Today’s Readings

A great, lengthy presentation from 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”?

A list of favicons generated by a popular online generator
A set of favicons generated by a popular online generator – How to Favicon in 2022, https://evilmartians.com/
says we really only need 6 files.

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 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 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, . (Also, cool highlights on your site!)

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

And although nearly a year old, ‘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

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…

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
  2. 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 using CSS Scroll Snap to create a Slide Deck that supports live coding. No, really, it’ll be fun!

Happy reading,
Atg

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.