As web developers, we know how easy it is to end up with web page bloat. But loading a webpage is much more than shipping bytes down the wire. Once the browser has downloaded our page’s scripts it then has to parse, interpret & run them. In this post, we’ll dive into this phase for …
Tag Archives: javascript
ES6 ES2015: Easily remove duplicates from an Array
Say you have a JavaScript Array containing duplicate values. By creating a Set – which only stores unique values (primitive values or object references) – and then spreading that Set into a new Array you can easily dedupe the given Array: // Array with duplicates const arr = [7, 3, 1, 3, 3, 7]; // …
Continue reading “ES6 ES2015: Easily remove duplicates from an Array”
ESNext: JavaScript “Optional Chaining Operator”
UPDATE February 2018: The proposed operator got renamed from “Null Propagation Operator” to “Optional Chaining Operator”. This post has been updated to reflect this name-change. UPDATE December 2019: This feature has now advanced to Stage-4 and will be part of the ES2020 Specification! 🎉 Earlier today I was delighted to see that the “Optional Chaining …
Continue reading “ESNext: JavaScript “Optional Chaining Operator””
Free Book: Exploring ES2016 and ES2017
Free Book: Exploring ES6
An in-depth book on ECMAScript 6, for JavaScript programmers. Extensive book written by Axel Rauschmayer (whom you might know from 2ality.com), available for free online. It’s also possible to purchase as an ebook-version (.epub et al) of the book. Exploring ES6 – Upgrade to the next version of JavaScript →
Using Object.assign() to quickly set multiple inline styles
Since an HTMLElement its CSSStyleDeclaration (viz. its style property) essentially is an Object, it’s perfectly possible to pass it as the target object into Object.assign() along with a few other objects. The result is that all keys from those extra objects will be merged as CSS properties along with their values on the currently applied …
Continue reading “Using Object.assign() to quickly set multiple inline styles”
react-day-picker
react-day-picker is a flexible date picker component for React. no external dependencies select days, ranges, whatever using CSS modifiers ready for localization, even with moment.js customizable style navigable via keyboard, ARIA support As with every other well-written React component you can easily include this in your own code to – for example – create a …
Does Google execute JavaScript?
Stephan Boyer created a website with some JS injected content and waited for Google to crawl it. It got indexed, but without JS execution. Only after having submitted the site manually via the Google Search Console it got indexed with JS executed. His conclusion: Google may or may not decide to run your JavaScript, and …
Marky, a high-resolution JavaScript timer
Marky, by Nolan Lawson: JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations. For browsers that don’t support performance.mark(), it falls back to performance.now() or Date.now(). In Node, it uses process.hrtime(). The greatest win to me is the visualization in the Dev Tools timeline. After installing it …
Continue reading “Marky, a high-resolution JavaScript timer”
Polyfill.io
Interesting service by Polyfill.io. Just include their polyfill.js file and it’ll include a set of polyfills specifically for the browser used: <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser. This one could come in handy for older projects that have gathered some dust …