Friday Frontend: Easter Weekend Edition
Happy Easter to everyone who celebrates it, and chag sameach to my Jewish friends! A confluence of holidays this year. Hope you are having a wonderful start to spring and life is treating you well.
This week’s newsletter has some very interesting articles… I think my favorite was the one on using CSS Shapes to enable new layout possibilities. Well, that, and the article on the web speech API just totally blew my mind.
KBall from ZenDev
CSS & SCSS
A fascinating look through some of the design possibilities enabled by wrapping text around CSS Shapes. Shapes is now supported by Safari, Firefox, and Chrome… and with Edge moving to a Chrome-based approach we’ll soon be able to use this everywhere. This opens a set of incredibly powerful layout possibilities using some very simple properties.
The title is a little over the top, but for those who are pretty new to CSS this is actually a very solid sequence of things to study. They could have done a better job of linking out to resources, but even just knowing what to google first is pretty good. (BTW If you do want a great set of resources check out the ultimate guide to learning CSS that I put together last year.)
Very interesting pure-css approach to a masonry layout. Highlights some of the power of flexbox for creating layouts that adapt to their internal content.
This is both an inspiring example of how to start from a simple checkbox and build up a complete toggle component visually using progressive enhancement… and a very cogent reason why I tend to use UI toolkits/component libraries wherever possible. There’s a lot that goes into doing a component right. This article takes you step by step through the thinking and the implementation.
It’s easy to get overwhelmed with the possibilities for layout from CSS, but this post highlights how very simple it can be to get a basic layout that looks good across devices.
Great article showing how easy it is to do CSS transitions with Vue.js. Starts basic and builds up. Love it!
Another great example of building a custom hook - this one to create a shared state management solution where you can have a single piece of state and a slew of related listeners. The solution is so simple and yet so powerful it really highlights the strength of Hooks as a paradigm.
Good fundamental explainer of a commonly used description. Controlled components are frequently referenced but infrequently explained. The example is in React (and I think that is where this description is most commonly used) but this concept is relevant across frameworks,
Okay this totally blew my mind. It’s like having a multi-language screen reader BUILT IN to the browser, but for whatever text you want to give it. I mean yes, google’s been able to do this type of stuff for a while, with audio versions of translate, but this means it’s accessible to every web developer! Amazing.
A massive resource for learning about the Front-end, published by FrontendMasters each year. It’s almost encyclopedic, with tons and tons of links out to high quality content. This is a resource to keep going back to, not a 1-time read.
Netlify has been getting a lot of buzz for their great JAMStack support and ability to deploy static sites & JAMstack applications quickly around the world. They have lots of tools for helping with this, serverless functions, etc but the development experience for tinkering with those tools has been challenging. No more, they’ve now released a local dev environment letting you test out and reproduce your serverless functions & entire environment on your desktop or laptop.
A set of the most commonly asked accessibility questions (I know I’ve asked most of these at one time or another) and in-depth answers.