A rather geeky/technical weblog, est. 2001, by Bramus
Photo by Lautaro Andreani on Unsplash It’s been a while since I’ve done some React Native work, but the 0.69 release seems like a very welcome one: React 18, bundled Hermes, Fabric, TurboModules, and the JSI. React Native 0.69 brings a ton of important improvements & updates to the table, with performance & memory usage …
m-cli is a macOS command line tool that lets you interact with utilities and applications entirely in Terminal. Gives you a bunch of shorthand CLI commands that you can use, such as m finder showdesktop YES, m battery status, m dns flush, etc. These replace a bunch of custom aliases you might have set up …
Jim Nielsen set out to style a bunch of links that appeared before hr elements. As the element tree – generated from a Markdown file – was entirely flat, there are no enclosing section elements to hook onto in order to select those links (using something like section p:last-child a:only-child). The solution? The :has() selector: …
A presentation by Hidde de Vries covering <selectmenu> Styling selects? You’ve got options! →
Good post by Miriam Suzanne In CSS, there are compound selectors and also complex selectors, and I never remember which is which. Do you need to learn the difference? Probably not. But I’m tired of looking it up. Don’t tell anyone but this is the reason why many of us blog: to remember things 😉 …
In this post, Lynn Fisher walks us through the parallax scrolling CSS effects featured on the Matterday project. Does not use Scroll-Linked Animations (which is undergoing a spec rewrite) but transform hacks that rely on translateZ() to create a stack and scale() to correct the size again. Fun CSS-only scrolling effects for Matterday →
Jeremy underlines importance of revisiting past decisions: In recent years in particular it feels like the web has come on in leaps and bounds: service workers, native JavaScript APIs, and an astonishing boost in what you can do with CSS. Most important of all, the interoperability between browsers is getting better and better. Universal support …
You know those wipe transitions between scenes in Star Wars movies? Have you ever thought it would be awesome to recreate them with CSS? Probably not, but, well, here we are. Let’s do it. Uses gradients set as a mask-image which transition on hover. For the iris and clock wipte effects, @property is used. Star …
Continue reading “Star Wars Scene Transition Effects in CSS”
object-view-box Property
Ahmad Shadeed dives into the new object-view-box property, a side-invention to the aforementioned Page Transitions API: The object-view-box property specifies a “view box” over an element, similar to the <svg viewBox> attribute, zooming or panning over the element’s contents. Like so: img { aspect-ratio: 1; width: 300px; object-view-box: inset(25% 20% 15% 0%); } Available now …
Continue reading “First Look At The CSS object-view-box Property”
Will Boyd: Let’s talk about the various ways we can control how text wraps (or doesn’t wrap) on a web page. CSS gives us a lot of tools to make sure our text flows the way we want it to, but we’ll also cover some tricks using HTML and special characters. Contains a ton of …
Continue reading “Deep Dive into Text Wrapping and Word Breaking”