If you ignore the slightly insulting and condescending clickbaity title, this is a handy run-down of eight browser features with good support:
addEventListener(),scrollTo(),setTimeout() and setInterval(),defaultChecked property for checkboxes,normalize() and wholeText for strings of text,insertAdjacentElement() and insertAdjacentText(),event.detail, andscrollHeight and scrollWidth.We have a saying at Clearleft:
Everything is a tiny lesson.
I bet you learn something new every day, even if it’s something small. These small tips and techniques can easily get lost. They seem almost not worth sharing. But it’s the small stuff that takes the least effort to share, and often provides the most reward for someone else out there. Take for example, this great tip for getting assets out of Sketch that Cassie shared with me.
Cassie was working on a piece of JavaScript yesterday when we spotted a tiny lesson that tripped up both of us. The script was a fairly straightforward piece of DOM scripting. As a general rule, we do a sort of feature detection near the start of the script. Let’s say you’re using querySelector to get a reference to an element in the DOM:
var someElement = document.querySelector('.someClass');
Before going any further, check to make sure that the reference isn’t falsey (in other words, make sure that DOM node actually exists):
if (!someElement) return;
That will exit the script if there’s no element with a class of someClass on the page.
The situation that tripped us up was like this:
var myLinks = document.querySelectorAll('a.someClass');
if (!myLinks) return;
That should exit the script if there are no A elements with a class of someClass, right?
As it turns out, querySelectorAll is subtly different to querySelector. If you give querySelector a reference to non-existent element, it will return a value of null (I think). But querySelectorAll always returns an array (well, technically it’s a NodeList but same difference mostly). So if the selector you pass to querySelectorAll doesn’t match anything, it still returns an array, but the array is empty. That means instead of just testing for its existence, you need to test that it’s not empty by checking its length property:
if (!myLinks.length) return;
That’s a tiny lesson.
You really don’t need jQuery any more …and that’s thanks to jQuery.
Here, the Github team talk through their process of swapping out jQuery for vanilla JavaScript, as well as their forays into web components (or at least the custom elements bit).
This is a really great short explanation by Chris. I think it shows that the really power of JavaScript in the browser isn’t so much the language itself, but the DOM—the glue that ties the JavaScript to the HTML.
It reminds me of the old jQuery philosophy: find something and do stuff to it.
This looks great! It’s a CC-licensed book by Cody Lindley (whose work I’ve admired for many years) aimed at teaching DOM Scripting for modern browsers. You can read the whole thing online or wait for the paper version from O’Reilly.
If all your JavaScript currently consists of writing jQuery plugins, I highly recommend you read this.
You may have noticed that there’s a second edition of DOM Scripting out. I can’t take any credit for it; I had very little to do with it. But I’m happy to report that the additions meet with my approval.
I’ve written about it on the DOM Scripting blog if you want all the details on what’s new. In short, all the updates are good ones for a book that’s now five years old.
If you’ve already got the first edition, you probably don’t need this update, but if you’re looking for a good introduction to JavaScript with a good smattering of Ajax and HTML5, and an additional dollop of jQuery, the second edition of DOM Scripting will serve you well.
The cover of the second edition, alas, is considerably shittier than the first edition. So don’t judge the second edition of a book by its cover.
Kenny Meyers on the ubiquity of JavaScript.
The BBC have released their JavaScript library. This one is worth paying attention to for its wide browser support base.
A detailed comparison of jQuery and MooTools.
This is a good straightforward hands-on explanation of Ajax: succinct and clear.
From the people who brought you jQuery comes a set of widgets built using jQuery complete with documentation and tutorials.
A nice succinct explanation of how to roll your own JavaScript event delegation from Andy Hume.
Okay, this started as a joke but then I couldn't resist writing a bit of code. Usage: OH_HAI.I_CAN_HAS_ELEMENT_BY_ID("Id") and OH_HAI.I_CAN_HAS_ELEMENTS_BY_TAG_NAME("tag").
DOM Scripting... now also available in Korean.
What excellent taste this web design shop has. I don't mean the fancy scrolling—I'm talking about what's on the bookshelf.
A collection of scripts. There might be some good stuff here but use with care and discretion.
Christian's wish list for JavaScript libraries.
How much page weight is being wasted on JavaScript. It's time to shed those pounds.
A PDF of Dan's slides from RailsConf. Looks like it was an excellent presentation.
Interesting use of unobtrusive JavaScript for front page navigation. Bonus points are awarded for the hAtom and hCard markup.