A rather geeky/technical weblog, est. 2001, by Bramus
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”
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 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 →
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.
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 →
Looking forward to Everything Everywhere All At Once: An aging Chinese immigrant is swept up in an insane adventure, where she alone can save the world by exploring other universes connecting with the lives she could have led. Written and directed by the same guys who did Swiss Army Man, which explains a lot. In …
Continue reading “Everything Everywhere All At Once | Official Trailer”
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”