Add better debug statement to overlay in VS Code - javascript

I use the library bignumber.js, which does the job of handling big/small numbers very nicely. However, debugging with VS Code is a pain, as i get the following output upon inspection:
Is there a way for me to edit this? I've looked into prototype editing but I could not get this to work.

Related

VS Code - unified checking of javascript, html, and CSS code as a whole - prior to running on a browser?

Forgive me if this is a really stupid question, but I haven't found any answers yet - or maybe I don't know the correct thing to ask for.
Given the following files that are part of the same project:
MyProject.html
MyProject.css
MyProject.js
(and a MyProject.py that runs on the server to make things happen)
. . . where all three of these items are related and are actually part of a single project and they need to integrate together.
The "html" part of VS code makes sure the html is correct.
The "css" part of VS code makes sure the css is correct.
the JavaScript part of VS code makes sure the javascript is correct.
However, they may not be correct together as a unified whole - I may have changed something in the javascript that references something in the html that may not yet exist - because I forgot to write it, and I don't discover this until I launch things and watch the web-page go all pear-shaped in ways I've never heard of before.
Is there something that will take all these pieces and say "Hey! You changed the definition of this element here in the Javascript but not in the HTML (or the CSS or whatever)
In other words, not only do I want to know if the individual files are syntactically correct, but do they agree with each other?
If there is a "something" that does this, what is it called?
That tool will never exist and for good reasons, it'd slow the living hell out of your computer when programming and wouldn't fair well as a best practice. Though it's cool, it's cooler to write code effectively and not have a slow code editor. So to that suggestion is write your JavaScript and HTML together hand in hand; split view and you won't ever have an issue. CSS can come into play any time.
Your best option for knowing if code is correct, would be a linter but that won't help you with the issues you face if you're calling elements that don't exist or did you'll want to improve how you code these functions/events.
As requested submitted as an answer for the OP.

How do I properly annotate an export that is result of function call?

I'm working on porting my app to use Flow types. I also use the Nuclide IDE which shows me my flow coverage. I'm trying to get all my files to 100% coverage so I can have type-safe code. I'm encountering a situation in which Nuclide shows that my code doesn't have type coverage, but I'm not sure how to fix it:
const ReduxWrapper = connect(mapState, mapEvents)(Component)
export default ReduxWrapper
Nuclide says that ReduxWrapper isn't covered by Flow. Why is that, and how can I fix it?
Other Notes:
I've created library definitions for react-redux which I can add to my question if someone wants to see them.
I already tried several ways to type-annotate it, but they just led to errors. I'm asking about my original problem instead of asking about the problems with what I've already tried to avoid the XY problem.
This is the hardest question I've ever written on StackOverflow. I like to distill and simplify things but I haven't been able to find a simpler piece of code that replicates my problem. If you need more information to answer just leave a comment and I'll add it.
You can try to use flow-typed library which will add to your project flowtype definitions of your dependencies.
Take a look here https://github.com/flowtype/flow-typed/blob/master/definitions/npm/react-redux_v4.x.x/flow_v0.30.x-/react-redux_v4.x.x.js

How to stop Extra Lines being inserted on completion with ReSharper

I've specifically set ReSharper to the code style I want, and in C# it does exactly what I ask. But I'm working on an Angular page, and in the controller.js file, when I copy/paste, or complete a statement (with a ; or a } ), ReSharper (and I've disabled it and reenabled it to make sure it was ReSharper) is taking this:
and making it into this:
Note the amount of space. It's auto-formatting an extra line between every thing in the code.
But in my settings, I don't have anything set to tell it to do that:
I'm at a loss as to how to proceed. I absolutely love the formatting I get in C# with it (much better control than VS15 has built in), but this JS stuff is going to cause a mental collapse. And what's stranger: This only started a few days ago. (Nope - nothing new installed in that time!)

Are console errors acceptable in Javascript if they do not cause problems?

I'm a beginner at Javascript, and I wrote some code that works perfectly, but generates a console error from time to time.
It's a coin flip simulator, where the class of the coin needs to change depending on the outcome- so it searches for the opposite outcome class name and changes it to the current outcome class name (using SetAttribute). However, sometimes you get two of the same outcomes in a row, so searching for the opposite class name returns null, and then I get an error for trying to setAttribute of null.
I could write an If statement to avoid this, but I'm wondering if that's necessary. I want to learn best practices, so please, if there's a reason to avoid console errors, let me know!
Console errors such as an unhandled exception indicate a problem in your code. Sometimes the problem might turn out to be benign, but there is no way to know if its benign without studying the code. And, by the time you have studied the code to understand the problem, it is usually one or two lines of code to avoid or handle the problem in your code.
You should add this extra code to handle the problem because if you let these benign warnings build up, then pretty soon you won't be able to notice a new warning pop up that is actually a sign of serious trouble. Your code should be exception free precisely for this reason so when an unexpected issue shows up, you can clearly see it and both you and everyone else working on the project or testing the project knows that a warning like this is unexpected.
So, it is a good practice to clean up all warnings like this and keep your code clean and warning free.
Imagine you were driving your car and a warning light came on. You take it into the mechanic and the mechanic says: "oh, that's how they designed it - the light comes on from time to time". OK, now the warning is basically useless because you don't know when a warning is a sign of a real issue and when a warning is just some incomplete design that didn't clean things up well. It's the same with your code.

How to implement Ember-Validations in Ember-App-Kit With Out Fixtures

This is a NEAR duplicate of this post which has a very nice example of ember-validations (without EAK) here. However, I am wondering if anybody can do an EAK version of this for me, with the one difference that the JSBIN has validation errors shown only once the user has blurred a form input. This jsbin shows the errors on load. I would expect to see the validation messages come after the field has been focused for the first time at the very soonest, rather than onload. Im not sure if this is an artifact of JSBIN implementation or the actual expected feature design of ember-validations. I would love to see a clean EAK in git or bitbucket that has just this, the same 5 or 6 inputs in the index.hbs that are tied to a controller with the same five elements in the validations object, but the difference that it doesn't show errors until after the controls are at least interacted with once by the user. I would be extra happy to see the steps the user took at the terminal to add ember-validations to their EAK, because currently, I'm following this study below and I am unsure if perhaps the problem is not the EAK implementation, but rather the manner in which I've brought the ember-validations.js into my app in the first place. I've had some conflicting suggestions on how this should be done, but considering that right now, I have at least seen error messages in the page it's hard to tell if there's a problem with the way the script is included or not.
gem install bundler
git clone git://github.com/dockyard/ember-validations.git
cd ember-validations
bundle install
bundle exec rake dist
cp dist/ember-validations/ember-validations.js vendor/ember-validations/ember-validations.js
subl app/index.html
insert line 57: <script src="/vendor/ember-validations/ember-validations.js"></script>
open http://localhost:8000
With this, I am able to see the errors highlighted when the app loads. However, for my attempt, I don't see the errors clear or the continue button enabled after satisfactory input is added. So I am having the same unwanted functionality as the JSBIN and the OP. This maybe a more basic ember js question, or a basic EAK question, but I would love to see a simple ember-validations set up in EAK(ES6) format. With a list of files, their locations, or better still a git to clone.
Also, I am looking to see this done without FIXTURES or DS store if possible. I am thinking a simple object in the controller. It appears to me in the documentation that as soon as the object is created, validation fires. So, how to defer the validation until after the form-controls are interacted with?
Thanks!
Edit: So, I was able to get the EAK architecture to happen... anybody interested in my solution, there's a bitbucket repo now for you to inspect and enjoy!
Edit 2: So, looking and thinking about this some more. It makes sense the way it is. It's only my styling and message language that makes it clunky. Of course the presence: property makes them seem like errors, but they are in fact, also hypostatized as cta's or call to actions, highlighting fields that need attention. When the fields are empty initially, instead of thinking about them like errors, think about them like attention getting call outs. Since my button is disabled as long as the fields are inValid, there's no reason to have the messages at any other time, since there will never be a use case in which the user has submitted the button without satisfying the presence and other properties of the validations object. So, to solve my "problem" I just need to think about the errors differently. Instead of styling them with an error class, I'll style them normally, and when presence is satisfied, show a checkmark or something friendly like that. So in effect, these validations are working as I want them to. It's just a matter of not following the out-of-the-box nature of the message error styling.
Double Thanks!

Categories

Resources