A great, lengthy presentation from
on Rachel Andrews CSS layout, specifically
flex. Some key takeaways include:
repeat(), especially something like:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
which gives a really nice responsive wrapping column
auto placement and
named lines (not sure I get that yet) and named grid areas (my fave), and auto-generated grid line names!
inline-size (not really talked about, but spotted in the code)
align-self (and their related
::after for adding some style
pointing out that grid isn’t just for page layout
trying once more to understand the shorthand
understanding the differences between grid and flexbox
and probably the most important part: which should I use when (and pointing out how easy it is to switch from one to the other)…
Can I just point-out how wonderfully peaceful Rachel is as a presenter? I know she’s been at this a long time, and has done countless presentations around the world, but her calm, methodical presentation so so wonderful to watch… No frantic scrolling or cursor whipping around, no hurried and harried speech, and practically no typos! (I mean, I probably made 10 typos just typing this sentence!)… Bravo, Rachel, could watch you all day!
Anybody else sick of stuffing all this into their root directory, “just to be safe”?
A set of favicons generated by a popular online generator – How to Favicon in 2022, https://evilmartians.com/ says Andrey Sitnik we really only need 6 files.
presents François Beaufort … Wow, thanks Chrome, for kicking this off, and thank goodness the article includes a fallback example, ´cause…
showPicker(), “a canonical way to show a browser picker for
support is… not good yet.
I wholeheartedly admire the courage
displays Jen Simmons stepping out in front of the Internet and saying “hit me” like this, and respect her even more for “pre-calling-out” what she knew was sure to come… I remember years ago when started doing the same for Pete LePage IE. I am also fully encouraged by the responses Jen has received so far, doing exactly what she asked, in a respectful way, just like she asked. Bravo, Internet!
A WordPress-like open source headless TypeScript-based CMS for React/Next.js websites, with a powerful plugin/theming system.
Wow, that’s a lotta keywords stuffed into that marketing slogan. Sounds great, though! Anyone have a chance to play yet?
JS for a sec´, shares some Rupert fildon McKay typical and edge-case sorting methods. Good stuff to have in your toolbox!
And although nearly a year old,
‘s run-down of Sandro Turriate Everything you missed over the last 10 years is still worthy of a quick reminder/review.
Style Dictionary: Style once, use everywhere. Yeah, they mean it. Seriously impressive, and mega-useful for all you style-guiders out there! Check-out their YouTube video for a demo.
So how does your fave browser do when it comes to keeping you and your browsing data secure? Think Incognito/Private windows have you covered? Might want to have a look at
describes what he sees as a pendulum swing between the server and browser, for “where the work gets done”. And he says that, in middle of the Klint Finley world in which we live, we are getting ready for SPAs-gone-wild a swing back to the server, thanks to Web Sockets. I like what I am hearing so far…
One of the first things I noticed when this article loaded was how fast the custom font for the header was… No
FOUT, no noticeable delay, and this is on my laptop in Germany, via wifi. Of course, this is GitHub, so one would expect best practices and ultimate performance. But take a quick peak under the hood, that’s a whole lotta
deferring going on…
Browsing with assistive technology videos. As you might imagine, this can be an extremely uncomfortable experience, if not accustomed to it, especially when the audio speed is cranked up! As developers and/or product owners, we owe it to our audiences to spend some time watching the videos in the this article, and thinking about how visitors might navigate our sites…
This one hits a personal note, as my mother suffers from
dry macular degeneration in both eyes, leaving her essentially blind in both eyes (she can see vague, fuzzy shapes, but no details straight in front, only in her peripheral vision… Meaning she cannot see interfaces or devices, like remote controls or keyboards. You would think audio interfaces would be the way to go, but you would then be surprised by how shoddy some (read: most) of them are. the Amazon Echo has been a God-send, but the Internet is a complete bust, as are most apps.
So, if you are interested, maybe consider adding some ? VUI to your next app
walks us through how to Ahmad Shadeed use CSS Cascade Layers to better affect specificity. Man, this is really going to change things, once everyone is on-board… Love to see Safari right in the game, surprised to see Edge not…
Got ? Probably should.
Two great articles about using the in-browser File System API:
Getting Started With the File System Access API, by Charlie Gerard
The File System Access API with Origin Private File System, by Sihui Liu
And finally, for something a little lighter (at least topically),
walks us through Stephanie Eckles using CSS Scroll Snap to create a Slide Deck that supports live coding. No, really, it’ll be fun!