A rather geeky/technical weblog, est. 2001, by Bramus
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”
:has() selector is way more than a “Parent Selector”
Safari TP 137 just dropped with unflagged support for :has(). Often dubbed “the parent selector”, :has() is way more than that …
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?”
This is wild: while writing his own parallel-decodable PNG implementation, David Buchanan discovered he had a bug in his code. Soon after, he found out Apple has the same bug in their implementation which ships with macOS and iOS. As a result, it’s possible to craft a PNG in such a way that Apple’s decoder …
Continue reading “Here’s a PNG that will show a different image in Apple Software”
Rik Schennink: If we show a modal on iOS we need to prevent events inside the modal from interacting with the page behind the modal. On a previous episode of “Fun with Safari” we could use preventDefault() on the touchmove event but on iOS 15 that no longer works. Here we go. The solution lies …
Continue reading “How to prevent scrolling the page on iOS Safari 15”
Can’t follow there with Jamstack’s SSG, ISR, DPR, DSG abbreviations? And what about Edge Rendering? Brian Rinaldi has a nice post explaining them all, and guiding you when to choose which. static rendering – Use this as your default. deferred rendering – Use this when you have to render a lot of pages. server-side rendering …
Continue reading “Understanding Rendering in the Jamstack (SSG, ISR, DPR, DSG, …)”
Last week React Conf 2021 took place, focussing on the upcoming React 18 release. I especially liked these talks, all before the 2:00:00 mark: 15:00 — React 18 Keynote 48:55 — React 18 for app developers (useDeferredValue 🔥) 1:08:03 — Streaming Server Rendering with Suspense 1:26:40 — React Developer Tooling 1:54:12 — React without memo …