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.
Promoted Link
$11.99 Courses During Udemy’s Easter Sale
Udemy is running a sale through April 22 that has almost all of their courses on sale for $11.99. Some of my favorite recommendations include this Vue course, this React course, and this CSS course.
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.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)