For all of you Webpackers out there, have you gotten into Micro-Frontends yet? Basically shared components, but between teams, between projects, with run-time updates. Pretty cool stuff!
From Bruce Lawson comes a few excerpts from the UK Competition and Markets Authority’s report about Apple’s iOS browser monopoly and Progressive Web Apps. Halle-freaking-lujah! Can we please now start doing something about Apple’s stranglehold on iOS browsers and PWAs???
Chris Coyier presents a nifty trick in response to Jake Archibald‘s report that we cannot cross fade two DOM elements. Sadly, this is only possible via a -webkit prefix, so no Firefox, but also detectable via @supports!…
Matias Capeletto offers a “short” roundup of the Vite Ecosystem. Can I just say Holy Crap that’s a long list!
How do you pick your font sets? Usually by linking and swapping font URLs until you find the match that looks good on your site? Yeah, that’s fun… But if you are looking for some font joy, check out FontJoy! Pick different font-families for each page section (header, sub-header, body), or use the “similarity slider” at the top of the page to generate new font sets based on how similar or different they are.
Sticking with fonts for a second, Andy Bell shows off some fancy ideas for implementing consistent responsive text sizes sitewide using clamp() and custom properties!
Now a slightly different take on responsive, and adding in performance, Hongbo Song writes about a new Core Web Vitals metric that measures the latency of user interactions. Meaning, for example, when a user releases a key or click, “[w]e plan to capture every associated event’s duration, from initial user input until the next visual update occurs on the page after all the event handlers have run. We define the interaction latency to be the maximum duration of any event triggered by the interaction.” Damn…
And now sticking with performance, Amit Singh looks into a different aspect of JS-related performance: the cost of JS errors!
Reading the Ollie Williams article CSS Logical Properties and Values was my first exposure to logical properties, but they have obviously been around awhile, having near ubiquitous coverage. The intent is to move CSS away from declarations like margin-top, padding-right, border-bottom or our old friend float: left, since these are not the same when writing mode changes. inline is shorthand for both properties “parallel to the flow of text” (left and right in horizontal write-mode, top and bottom in vertical write-mode) and block is shorthand for both properties “perpendicular to the flow of text” (top and bottom in horizontal write-mode, left and right in vertical write-mode) .
Stephanie Eckles has a really nice dive into details and summary, including the toggle event listener, customizing the ::marker, accessibility concerns and more!
Reading Jim Nielsen’s Dynamic Color Manipulation with CSS Relative Colors, I noticed he was declaring a custom property:
:root { --color: 255 0 0; }
Then applying that using:
.selector { background-color: rgb(var(--color) / 0.5); }
I did a double-take because I noticed he was using an alpha channel with rgb, not rgba (note the a at the end). I checked, without the custom properties, and it works fine, meaning all of these are identical:
background: rgb(255, 0, 0, .5); background: rgba(255, 0, 0, .5); background: rgb(255 0 0 / .5); background: rgba(255 0 0 / .5);
How long have we been able to do that??? :-)
Anyhow, read Jim’s article, it gets really fun once he gets into calc()…
You kids, I swear…
Patrick Brosset helps us make our PWAs look more app-like by using Window Controls Overlay. If you like this, be sure to also checkout the linked article Customize the window controls overlay of your PWA’s title bar and the articles linked from that!
Deeplinks.js is a pretty sweet tool, providing very handy functionality! Unfortunately, there is no discoverability (how would users know they can do this?), and wouldn’t it be nice if the deeplink URL was made available via a “copy deep-link” icon/button or similar after you’ve highlighted something?
So, people are still talking about RSS… It’s not dead, it is still very much alive! I check-in with my Feedly nearly every day… I’m not crying, you’re crying…
And finally, holy be-freaking-jesus!!! Open this, and resize your browser… Okay, now I am crying… I’m just going to crawl into the corner and sob now…
Happy reading,
Atg