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.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Art Direction For The Web Using CSS Shapes

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.


Follow these steps to become a CSS Superstar

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.)


CSS masonry with flexbox, :nth-child(), and order

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.


Under-Engineered Toggles

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.


58 bytes of css to look great nearly everywhere

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.


JavaScript

The Power of Named Transitions in Vue

Great article showing how easy it is to do CSS transitions with Vue.js. Starts basic and builds up. Love it!


The Pitfalls of Async/Await in Array Loops

Asynchronicity is one of the hardest concepts to completely wrap your head around in JavaScript. This article is short & sweet and highlights a common mistake and its solution.


State Management with React Hooks — No Redux or Context API

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.


What are Controlled Components in React?

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,


Kyle Simpson: I’ve Forgotten More JavaScript Than Most People Ever Learn

The title is a little… provocative… but this is a solid interview with the author of ‘You Don’t Know JS’ and related books. An interesting look into how one of the most widely read authors talking about JavaScript thinks about the language.


Other Awesomeness

Using the Web Speech API for Multilingual Translations

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.


Front-end Developer Handbook 2019

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 Dev - The Power of Netlify on Your Local Computer

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.


Top 5 Questions Asked in Accessibility Trainings

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.