Back in August 2014 I pre-ordered a Navdy. Last week, 2 years later than expected, my unit finally arrived. Was this long wait worth the while? YES! Navdy? The Navdy is an aftermarket “Head-Up Display” for your car. Where your Bluetooth-enabled car radio acts as an audio extension to your smartphone, the Navdy acts as …
Category Archives: Original Content
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”
Why does Chrome show a T-Rex when it’s offline?
With touching the topic “offline” in the previous post, I was reminded of the T-Rex that Chrome shows when it’s offline. Most of us think it’s just a fun little pixel dinosaur which acts as facade for a game you can play whilst there’s no active internet connection, but there’s more to it. The T-Rex …
Continue reading “Why does Chrome show a T-Rex when it’s offline?”
Stylus nth-of-m-child(n,m) Selector
. As explained/linked in (ab)using CSS3’s :nth-child() selector to invent new ones and Quantity Queries for CSS it’s possible to create new types of CSS selectors by cleverly combining a few the available CSS pseudo selectors. One of those new selectors is the :nth-of-m-child selector: /** * :nth-of-m-child selector * This selector will select the …
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””
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”
Text-wrapping, hyphenation, emojis and what not
Earlier today I ran some tests to see how text-wrapping/hyphenation of long uninterrupted strings works in browsers. I tested both “normal” strings and strings of emojis. The tests (and its rendering results per browser) are stored on Codepen and embedded below: 💩 and ⚠️ behave differently (click to enlarge): These tests left me with some …
Continue reading “Text-wrapping, hyphenation, emojis and what not”
ES6 ES2015: Looping over an Object with keys and values
Say you have an object like this: const obj = { firstName: ‘John’, lastName: ‘Doe’, age: 50, eyeColor: ‘blue’ }; Using lodash’s forEach you can easily loop over this object, with easy access to both the key and the value: _.forEach(obj, function(value, key) { console.log(key + ‘ ‘ + value); }); But what about ES2015? …
Continue reading “ES6 ES2015: Looping over an Object with keys and values”
Rendering Markdown using Custom Elements v1
Inspired upon a v0 implementation, I’ve recreated a Markdown renderer in Custom Elements v1. The result is <custom-markdown>. The code itself is pretty straightforward: other than some (contained) styling the custom element uses showdown to convert the Markdown to HTML. This conversion is triggered in the connectedCallback(). class Markdown extends HTMLElement { constructor() { super(); …
Continue reading “Rendering Markdown using Custom Elements v1”
Check if a browser supports ES6 ES2015
Great snippet by Benjamin De Cock: var supportsES6 = function() { try { new Function(“(a = 0) => a”); return true; } catch (err) { return false; } }(); The critical test is the a = 0. All browsers supporting default parameters have a fairly complete support of ES6 — for example, Edge 13 will …