As the syntax for CSS Custom Properties is overly permissive it’s possible to store a JavaScript attack vector in them …
Injecting a JavaScript Attack Vector using CSS Custom Properties
content-visiblity: auto; vs. jumpy scrollbars, a solution
As warned in content-visibility: the new CSS property that boosts your rendering performance you need to be careful with applying content-visibility: auto; on each and every element as the scrollbar might get jumpy. This is because elements will be rendered as they scroll into the viewport and will be hidden as they scroll out of …
Continue reading “content-visiblity: auto; vs. jumpy scrollbars, a solution”
Better Times
Pretty crazy: a timelapse + lip-sync video all while growing a beard in between: Timelapse animation music video, with my beard growing through Covid lockdown. Using my face as a stop-motion puppet (a technique called pixilation), I took 2,117 individual photos, every night, over 101 days, and synchronized the actions to the song “Better Days” …
Debugging CSS
Apart from writing a ton of articles for his website this year, Ahmad has also written a book on Debugging CSS: An ebook with lots of tips and techniques on how to debug CSS the right way with easy and studied methods. It’s a very practical book that should get you help solve any potential …
Using the Numpad in vi over SSH
One of the things that kept on bothering me when SSH’ing is that the keys of the numpad would not work in vi: when pressing any key on the numpad, another key would be sent somehow. Should’ve Google’d this a lot earlier because the fix is very simple: in the preferences of Terminal, go to …
Deep Dive into Page Lifecycle API
As the name suggests, the Page Lifecycle API exposes the web page lifecycle hooks to JavaScript. However, it isn’t an entirely new concept. Page Visibility API existed for some time, revealing some of the page visibility events to JavaScript. However, if you happen to choose between these two, it’s worth mentioning some of the limitations …
How to useRef to Fix React Performance Issues
Sidney Alcantara who works on Firetable, a product which features a data grid and an adjacent side drawer. When clicking a cell in the table, the side drawer opens with info about the current cell. Initially they lifted up the state, but that caused performance issues: The problem was whenever the user selected a cell …
Continue reading “How to useRef to Fix React Performance Issues”
Keep calm and Git bisect
Ever saw your code break and don’t know when exactly the bug was introduced? Zvonimir Spajic walks us through git bisect to find the commit that broke things. I’ve used it myself quite a few times by now and it truly is really helpful in those situations. What I didn’t know however, is that it’s …
Sticky CSS Grid Items
Melanie Richards: If you’ve ever tried to put a sticky item in a grid layout and watched the item scroll away with the rest of the content, you might have come to the conclusion that position: sticky doesn’t work with CSS Grid. Fear not! It is possible to get these two layout concepts working together. …
Cyberpunk 2077 Button Glitch Effect in CSS
Wonderful demo by Jhey Tompkins, showcasing some recreated glitch effect buttons based upon Cyberpunk 2077. Recreate the Cyberpunk 2077 Button Glitch Effect in CSS → If you can’t quite follow there — as it’s quite a big demo — here’s a more simplified demo from 2015 featuring a simple glitch text effect: See the Pen …
Continue reading “Cyberpunk 2077 Button Glitch Effect in CSS”