The pipeline operator is essentially a useful syntactic sugar on a function call with a single argument. In other words, sqrt(64) is equivalent to 64 |> sqrt. This allows for greater readability when chaining several functions together. With the Pipeline Operator, one could rewrite this … let result = exclaim(capitalize(doubleSay(“hello”))); … to this (think Unix …
Category Archives: Original Content
Masonry Layout with CSS Grid and grid-auto-flow: dense;
By setting grid-auto-flow: dense;, the Grid auto-placement algorithm will attempt to fill in holes earlier in the grid if smaller items come up later, resulting in a Masonry-like layout. (click for demo) (via) 💁♂️ Do note that the result isn’t 100% masonry, but masonry-like. As Rachel Andrew – who else – notes: At first glance …
Continue reading “Masonry Layout with CSS Grid and grid-auto-flow: dense;“
Vertical margins/paddings and Flexbox, a quirky combination
In CSS, percentage-based paddings are – as per spec – calculated with respect to the width of an element. However, for flex items (e.g. items whose parent have display: flex; applied) that’s not always the case. Depending on which browser you are using the percentage-based padding of a flex item will be resolved against its …
Continue reading “Vertical margins/paddings and Flexbox, a quirky combination”
Shipping ES6 ES2015 Modules to Browsers
UPDATE 2017.09.13: Deploying ES2015+ Code in Production Today also provides a good writeup on this subject. Good workflow fleshed out by Sam Thorogood on using ES2015/ES6 modules with browsers that support, whilst also keeping older browsers (that don’t support it) happy. The modules Let’s take these 2 simple modules for example: // main.js import {x} …
What’s new in JavaScript? ES2017 Language Features
The ECMAScript 2017 Language Specification – the 8th edition of the spec – was officially released at the end of June by TC39. 💁♂️ ICYWW: Should we say ES2017 or ES8? → Say ES2017. Back in the day ES6 was (and still is) used a lot to refer to ES2015, but one should be referring …
Continue reading “What’s new in JavaScript? ES2017 Language Features”
Chrome DevTools’ Command Menu
Something I learnt via Umar Hansa‘s great DevTools Tips is that the Chrome DevTools sport a Command Menu. By hitting SHIFT+CMD+P (same shortcut as Sublime Text’s command menu BTW) you can open it. Thanks to fuzzy matching you can easily access things in it. Chrome DevTools: UI: Command Menu → Umar Hansa’s Twitter Account is …
Changing SVG path data with CSS
Another thing I learned at CSS Day is that it’s possible to alter SVG path data – which is to be found in its d attribute – using CSS. As Chris Coyier demoed, one can overwrite the SVG’s path in CSS by using the (underdocumented) d property. As long as the paths match up (i.e. …
Breaking Elements out of Their Containers in CSS
A common thing to see in a design are visuals that break out of the main content column. You most likely have already seen this kind of design over at Medium for example, where it’s common for the main visual to be full width (or “full bleed”), whilst the content remains centered. Your typical Medium …
Continue reading “Breaking Elements out of Their Containers in CSS”
Aspect Ratios in CSS are a Hack
UPDATE 2020.11.30: Aspect Ratios in CSS are no longer a hack, thanks to the new aspect-ratio CSS property! Right now I’m in Amsterdam attending CSS Day (my fourth time already!). Earlier this morning Bert Bos and Håkon Wium Lie – yes, the inventors of CSS – were on stage reflecting on the first days of …
Nicer CSS underlines with text-decoration-skip-ink: auto; (previously text-decoration-skip: ink;)
When applying text-decoration: underline; on an element, the line drawn will cross descenders. Using text-decoration-skip one can control the behavior of the underline The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also …