A great, lengthy presentation from Rachel Andrews on CSS layout, specifically grid and flex. Some key takeaways include:

• fit-content()
• deep-dive into fr, minmax(), auto-fill and repeat(), especially something like:

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  which gives a really nice responsive wrapping column

• auto placement and grid-auto-flow
• named lines (not sure I get that yet) and named grid areas (my fave), and auto-generated grid line names!
• block-size and inline-size (not really talked about, but spotted in the code)
• difference between align-content, align-items and align-self (and their related justify- declarations)
• using ::before and ::after for adding some style
• pointing out that grid isn’t just for page layout
• trying once more to understand the shorthand flex declaration
• 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)…

Anybody else sick of stuffing all this into their root directory, “just to be safe”?

François Beaufort presents showPicker(), “a canonical way to show a browser picker for <input> elements”… Wow, thanks Chrome, for kicking this off, and thank goodness the article includes a fallback example, ´cause… support is… not good yet.

I wholeheartedly admire the courage Jen Simmons displays 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 Pete LePage started doing the same for 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!

Cromwell CMS:

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?

Higher-Order Functions(HoF) in JavaScript – Explain Like I’m Five? Yes, please. And thank you, Tapas Adhikary. (Also, cool highlights on your site!)

Sticking with JS for a sec´, Rupert fildon McKay shares some typical and edge-case sorting methods. Good stuff to have in your toolbox!

And although nearly a year old, Sandro Turriate‘s run-down of 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 PrivacyTests.org…

Klint Finley 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 SPAs-gone-wild world in which we live, we are getting ready for a swing back to the server, thanks to Web Sockets. I like what I am hearing so far…

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…

Ahmad Shadeed walks us through how to 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 text-size-adjust? Probably should.

Two great articles about using the in-browser File System API:

1. Getting Started With the File System Access API, by Charlie Gerard
2. The File System Access API with Origin Private File System, by Sihui Liu

And finally, for something a little lighter (at least topically), Stephanie Eckles walks us through using CSS Scroll Snap to create a Slide Deck that supports live coding. No, really, it’ll be fun!

Happy reading,
Atg

Top⇪