4 min read
Thanks to caniuse.com, it's fairly easy to figure out more or less what can be used and when. Here is to give you an overview for the following browsers: Chrome 67 (2018), Firefox 67 (2019), Opera 64 (2019), Samsung Internet 8.2 (2019), Safari 11.1 (2018), Safari IOS 10.3 (2017).
As you can see, any fairly modern device should be able to run our code. But which features can you expect exactly?
Array.includes is a nice syntax improvement over regular indexOf !== -1. I haven't been using yet the find method but maybe some day.
Again, the includes function is nice to have and is consistent with the one available for arrays. Padding is also very useful as a built-in feature.
The locale compare is really handy for multilingual websites.
Object.entries and Object.values are really great alternatives over "for...in" loops because they only returns given object's own enumerable properties.
Object.assign provides a vanilla alternative to $.extend function.
NodeList foreach is very convenient with iterating over results of a document.querySelectorAll call.
As for for...of , I'm always confused with how it compares with for...in, but basically, for...of is like a better version of for...in because it works on any iterable object. You can read this article to learn more.
So this is the root of my article. Now I'm using more and more js modules. Any browser that don't support them will get a nice warning thanks to this little library I created.
Enjoy all the benefits of nicely deferred loaded js with local scope. No more document ready thing, domContentLoaded stuff... and it works with inline scripts too!
- Arrow functions
- ES6 classes
- ES6 Generators
- ECMAScript 2015 (ES6)
- ES6 Number
- Rest parameters
- ES6 Template Literals (Template Strings)
Too much to cover here but you can read all here already.
Classes work just great with js imports (one file, one class) and template literals are really handy.
- Async functions
Again great stuff here, the fetch api is really nice to work with and we can all forget the days of $.ajax.
Custom elements are great! They allow a framework agnostic approach, and since I don't like things like React, Vue ... they really fit nicely in my workflow. Recently I created Last Icon and I can hardly imagine using regular svg icons ever again.
- Internationalization API
- JSON parsing
- Proxy object
- ECMAScript 5 Strict Mode
No more $.parseJson! I'm not using the proxy object yet, but it sounds really handy. In php I've been using anonymous classes more and more so it's really similar in way.
The strict mode is obviously always welcome. Note that js modules are always in strict mode so no need to declare "use strict" everywhere :-D
For a long time I ignored most of these features because I was using jQuery or some older syntax to avoid compiling my code. But now that these features are available in most browsers, it's about time to learn and use them :-)