Part of a PHP project I’m working contains a list of sites/buildings. For each site/building we monitor some data, for example its energy usage. We decided that we wanted to generate a daily/weekly/monthly reports of the data, by aggregating the datapoints. As our sites/buildings are spread across the globe – and thus timezones – we …
Category Archives: Original Content
The Sound of Silence
If you’re a regular reader of bram.us you might have noticed that I haven’t posted anything here during the past month. In short: I’ve been busy with many (personal) things that needed my attention. Here’s a few of the things that kept me from blogging … Public Speaking With COVID-19 many conferences have switched to …
JavaScript Yellow
Back in November I was invited to speak at Full Stack Europe 2019. At the conference I was scheduled to do a pre-conference workshop on React and a lightning talk named “JavaScript Yellow” — a talk I first presented at Frontend United back in 2018. Last week the video got released: References: javascript-yellow Robustness and …
Don’t charge your MacBook Pro from the left side. Use the right side.
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 …
Continue reading “Don’t charge your MacBook Pro from the left side. Use the right side.”
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 …
Continue reading “ESNext: Proposals to look forward to (JS VidCon / JavaScript Remote Conf)”
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 …
Continue reading “Spacing grid/flexbox items in CSS with the gap
property”
ESNext: Logical Assignment Operators (||=
, ??=
, &&=
)
Update 2020.07.21: This proposal made it into Stage-4 and will officially be part of ES2021 🥳 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; // …
Continue reading “ESNext: Logical Assignment Operators (||=
, ??=
, &&=
)”
100vh
in Safari on iOS
Update 2021.07.08: There are new viewport units on the way that will finally solve this issue. 100dvh is the one you’re looking for. 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 …
CSS Grid Layout Module Level 2: Masonry Layout
UPDATE 2020.10.22: Masonry Layout founds its home in the CSS Grid Module Level 3 Draft Spec! 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 …
Continue reading “CSS Grid Layout Module Level 2: Masonry Layout”