Reverse-Scrolling Columns with CSS Scroll-Timeline
hwb() – a color notation for humans?
On the web we can define colors in several Color Spaces. By default we’ve always been using sRGB, but newer ones such as P3 are on the way. To describe a color in CSS (in the sRGB Color Space) we can use the functions rgb() and hsl() today already. Both are well supported, even in …
FOUCE — Flash of Undefined Custom Elements
Cory LaViska: Web components are defined and registered with JavaScript. Depending on how and when you load the scripts that perform registration, you may see a brief flash of unstyled HTML where your custom elements should be when the page loads. This is not dissimilar to FOUC, which occurs when HTML is displayed before the …
Continue reading “FOUCE — Flash of Undefined Custom Elements”
CSS in 2022
Organic Blobs in CSS with border-radius
Nils and Mirko from 9elements create a handy tool to create blobs using border-radius. When you use eight values specifying border-radius in CSS, you can create organic looking shapes. Like so: border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; And as that’s CSS, you can also animate that easily: See the Pen Untitled …
Show a Progress Indicator for a Fetch Request with the Streams API
AnthumChris collected some JavaScript scripts to track the progress of fetch requests that download files/data. It works by leveraging the ReadableStream interface from the Streams API. A “simple” example is this: fetch('https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg') .then(response => { if (!response.ok) { throw Error(response.status+' '+response.statusText) } if (!response.body) { throw Error('ReadableStream not yet supported in this browser.') } // …
Continue reading “Show a Progress Indicator for a Fetch Request with the Streams API”
Accessibility Myths
The Fundamentals of CSS Layout
At Chrome Dev Summit 2021, Rachel Andrew hosted a workshop “The Fundamentals of CSS Layout”. If you’re looking to get started with CSS Grid and Flexbox, this is the video you’re looking for. In this 90-minute workshop you’ll learn about the key CSS layout methods of flexbox and grid. You’ll learn how these layout methods …
React Native Skia — High Performance 2D Graphics
React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and, Firefox OS, and many other products. Amazing work by the folks over at Shopify. React Native Skia →
ESNext: Sort arrays using array.groupBy() and array.groupByToMap()
An ECMAScript Proposal that recently made it to Stage-3 is “array grouping”. It brings us array.groupBy() and array.groupByToMap() methods to easily group arrays.