Ever since September 2019 I had this issue with my MacBook Pro where kernel_task would sometimes spike up to > 1000% (!) CPU load and drain my battery – even while connected to a charger. Second time this month kernel_task (with pid 0) decided to go nuts and drain my battery until my macbook shut […]
Category Archives: Original Content
CSS-Only Resizable Elements
In Playing With (Fake) Container Queries Chris used the <resize-asaurus> web component to make the elements resizable. Curious to see how that worked I dug into its source. As I was expecting a truckload of JavaScript to make it work, I was very surprised to see that it basically revolved around using just one single […]
ESNext: Proposals to look forward to (JS VidCon / JavaScript Remote Conf)
The past few days I’ve been attending some virtual conferences. At JS VidCon and JavaScript Remote Conf I also joined as a speaker, to bring forward my ever-evolving talk “ESNext: Proposals to look forward to” With the yearly ECMAScript releases (ES2015..ES2020) of a lot of things have changed in JavaScript-land, and there’s even more to […]
Spacing grid/flexbox items in CSS with the gap property
The gap property for Flexbox about to land in Chromium 85. It allows you to define the size of the gutters between Grid/Flexbox children. CSS Grid brought a delightful spacing feature called grid-gap, which quickly became a popular way to put space into layouts. It was easy to fall in love with because it took […]
ESNext: Logical Assignment Operators (||=, ??=, &&=)
A new ECMAScript Proposal that I’m looking forward to is Logical Assignment Operators. In short it combines Logical Operators (||, &&, and ??) with Assignment Expressions (=). // "Or Or Equals" (or, the Mallet operator) a ||= b; // "And And Equals" a &&= b; // "QQ Equals" a ??= b; 🤔 Not familiar with […]
100vh in Safari on iOS
When working with Viewport Units there’s this longstanding and extremely annoying bug in Safari on iOS where it does not play nice with the vh unit. Setting a container to 100vh for example will actually result in an element that’s a wee bit too high: MobileSafari ignores parts of its UI when calculating 100vh. Image […]
CSS Grid Layout Module Level 2: Masonry Layout
A long requested CSS feature is to be able to create a “Masonry Layout” using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately that’s not the real deal. 🤔 Masonry Layout? Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it […]
Colors in CSS: Hello Space-Separated Functional Color Notations
The CSS Color Module Level 4 spec introduces a new way to define colors in CSS: Space-Separated Functional Color Notations. Start using them today!
The Quest for the Perfect Dark Mode, using Vanilla JavaScript
In The Quest for the Perfect Dark Mode, Joshua W Comeau extensively explains how he has implemented the Dark Mode toggle on his Gatsby-powered website. It follows the system’s light/dark mode preference, but also allows for an override which he persists in localStorage. The flow to decide if Dark Mode should be used or not […]
Chrome vs. BlinkMacSystemFont: A Workaround
UPDATE 2020-04-28: Good news everyone! A workaround for this bug has landed in Canary (Chromium 84) and will be merged into the M83 release! The workaround described here still applies for Chromium 81. The problem As detailed before there’s this bug that shipped with Chromium 81 which somehow prevents the font-weight CSS property from being […]