This week several interesting things have occured deep in the depths of some long postings. This post aims to help extract some of that nuggety goodness and expose it in an easier to find manner.
-
It was learned that when you have several audio elements on a page, they are most usefully positioned inside of each playButton element so that they can easily gain a reference to their own play button. More is learned later on too about the dangers of having multiple HTML audio elements on a page.
-
Duplicating variable names is best avoided, especially when the function already has the same variable name as its parameter
-
Using JSLint to help drive problems out of the code is a beneficial technique, as criticism of your code is less likely to be taken personally when it’s coming from an automatic linting system.
-
The benefits of using JSLint really are appreciated when it comes to cleaning up troubled code. You can work through the code cleaning up issues one at a time, fixing a number of easy tasks. Another benefit of this is that it allows you to concentrate better on what the code should be doing too.
-
Sometimes, getting things right the first time isn’t relevant, for getting things working at all is a worthwhile goal. The proper structure of the code, such as the order in which statements occur can frequently wait, until other demands on the code force an appropriate structure to occur.
-
A useful link for beginning programmers is given with info about block statements and how the
{and}curly braces are used. -
When posting a message to the forum, it helps if you edit your post first before sending it. If you make significant edits to a post afterwards, no notifications are sent out about the update, and people will miss the changes that you made.
-
When updating code, the work is not complete until the code has been linted for issues
-
It’s best to avoid extending native objects, because you cannot know when your code will end up overwriting future improvements to that object. As a side-note, it can be okay to use polyfills and shims to make older browsers compatible with today’s official standards, but it’s best to only do so using code from official sources.
-
Using style.display to show/hide elements can get confusing, which is best dealt with by using dedicated show() and hide() functions. That then lets you more easily transition from using style.display to adding and removing the
"hide"classname instead. -
Using document.querySelector is prone to error compared with using button.querySelector when you have multiple
<audio>elements to deal with. -
Handling single or multiple elements, is dealt with by always treating single items as if they were a multiple list containing one item. Is it still safe when there are no matching elements found? Yes it is.
-
Out of scope issues occur when code attempts to use a function that’s lower down in the code. The solution to that - move the function above where it’s used. This is less of a concern when using function declarations, but will become a problem when using function expressions so it’s good to start with good habits.
-
Multiple
<audio>elements result in there being multiple audio streams that can be all downloading all at the same time. Having people leave the page or close their browser is not a good solution to that. Use only the one<audio>element instead to prevent that from ever becoming a problem. -
Stop using different class names to refer to the same things!
-
Use a dedicated addEventHandler to help remove the drudgery of managing multiple handlers
-
Sometimes the order of events doesn’t matter. There can be situations though when the order matters though, so it’s best to arrange the order so that it works regardless of the situation that you are in.
-
The benefits of grouping similar code together are that it then becomes easier to find your way around the code, and make sense of what it is doing.
-
Using similar terms for different things leads to confusion. Coming up with non-misleading terms can be tricky but the benefits are that it’s much easier for you to understand what is going on.