. 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 …
Category Archives: Original Content
Stylus
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 …
CSS attribute value less than / greater than / equals selectors
Yesterday Ana Tudor wondered if should could write CSS selectors using less-than and greater-than logic: CSS attribute selector wish:[data-code>2][data-code<19] { /* styles */ }[data-code>=19][data-code<65] { /* other styles */ }and so on… — Ana Tudor (@anatudor) October 12, 2016 Unfortunately this kind of selectors don’t work (yet). Until then one could use JavaScript to tackling …
Continue reading “CSS attribute value less than / greater than / equals selectors”
Why I’m excited about Yarn
Today, Facebook – in collaboration with Google and others – released Yarn, a new package manager for JavaScript. Introducing Yarn: a new package manager for JavaScript from @fbOpenSource, @tildeio, @googledevs & @exponentjs. https://t.co/2LfN5OXjOv — Yarn (@yarnpkg) October 11, 2016 In comparison to npm, the Yarn website pushes these three main benefits forwards: Speed Reliability Security …
CSS Transparent and Outlined Text
For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly. Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen: See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) …