A rather geeky/technical weblog, est. 2001, by Bramus
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”
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 …
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”
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 →
Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. It’s no coincidence the site looks similar to the one from The Framework That Must Not Be Named 😅 Pico.css →
Nice work by Chris: when you crossfade an image — using the proprietary -webkit-cross-fade() — with a transparent gif, you can create semi-transparent background images. .el { background-image: -webkit-cross-fade( url(image.jpg), url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), /* transparent GIF, base64 encoded */ 50% ); Clever! WebKit/Chromium based browsers only though (i.e. no Firefox) Maybe there kinda is background-opacity? →
No more hacking around with the inadequate JSON.parse() or bouncing data to a Web Worker in order to deep clone an object, as there’s now structuredClone() For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with structuredClone(), a built-in …
Continue reading “Deep-copying in JavaScript using structuredClone”
An issue with linear gradients in CSS is that they often have hard edges where they start and/or end or transition from one color to the other. In 2017, Andreas Larsen wrote about them on CSS-Tricks, eventually leading him to create a nice editor to generate them. Sparked by that post, a CSSWG Issue to …
Embrace the Platform — My submission for CSS-Tricks’s End of Year series, answering “What is the one thing people can do to make their website better?”
