Hope your week was amazing! Lots of great stuff this week, but what blew me away was the look into the future of WebAssembly that is included at the top of other awesome. OMG if we think programming now is good, wait another couple years until this really gets going!
KBall from ZenDev
P.S. Quick reminder that I recently launched a coaching program for anyone who wants some more 1-on-1 help. If you’re feeling overwhelmed or not sure where to focus to level up, this may be right for you. Book a free intro call and let’s talk about it!
A nice look at how CSS Custom Properties (AKA CSS Variables) allow you to consolidate responsiveness into a single location in your CSS. This is valuable for a couple of reasons. The obvious is it makes your code more readable and shorter, but I think the bigger is that it forces you to think about your styles more holistically, rather than addressing responsiveness 1 component at a time.
Beautiful example of how to create a styled checkbox in a way that is simple, accessible, utilizes entirely CSS (no images, JS, or extra elements), and falls back seamlessly in older browsers.
Woah, this completely blew me away. Variable fonts are already something that was on my radar, because they enable a range of typography with a much smaller download, but I hadn’t realized the way making fonts controllable by CSS also opens them up to all sorts of cool new animations via CSS. Wonderful!
Not a bad introduction to the basic “Anatomy” of CSS Grid. A step by step walk through of the fundamental pieces you need to get started with Grid, plus a little look at the devtool support.
A great look at how the destructuring feature can enable simpler code for a number of problems. I’ve used the array item access and immutability aspects a lot, but some of the other use cases look very interesting. I love the way dynamic property destructuring makes it easier to write higher level/reusable functions.
Great article about what is tricky when bridging between synchronous and asynchronous code. I know that promises and asynchronicity are a huge area of frustration and challenge - if you’re in that boat, definitely check this article out. Bonus related article for those interested, I recently saw this look at the differences between promises, observables, and streams.
What I like about this article is not that is shows how to implement a drag and drop in React - as the article itself states, there are many libraries that can do that. What I like is that it shows an example of how Higher Order Components (HOCs) are still extremely useful in the new React world of hooks. In this case, an HOC provides a super simple and clean interface for creating a drag-and-drop enabled list, even as the set and order of those list items is controlled using hooks. Beautiful!
DevTools with full support for hooks and better filtering capabilities to deal with deeply nested component hierarchies… tasty!
This is a long and somewhat involved piece, but if you’re interested in the future of programming, oooh boy is this a good one. A look at a new proposal for WebAssembly that will make it possible to easily communicate between WASM and pretty much any language/runtime. This will allow seamlessly embed code from one language into another… think “native modules” except you no longer have to re-compile them on the user’s machine, not to mention you can use them “for free” on the web, and you get sandboxing built in! Wow!
This one’s a video, also looking at interoperability of WebAssembly but this time for making system calls on the server. It’s short and sweet and worth your while.
I’ve spoken and included articles before on why it’s easier to build accessible websites if you lean more on built-in browser controls. This is a great checklist you can follow for those cases where you are building custom controls, to make sure you’re addressing all internationalization and accessability concerns.
Have you ever been working in a markdown file and wished you could just embed some JSX in there to create a dynamic, interactive piece? No? Me neither. :P But with the rise of static site generators, I expect this type of intermingling of interactive components with otherwise markdown generated files, and this tutorial teaches you how to make it happen using mdx.
A great look at a variety of different options available for showing a loading state in a button. I also appreciate that the author explains when it’s worth defining this vs when is fast enough you probably don’t need to bother.
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
Learning to code products doesn't take as long as you think - more precisely, 300 hours to learn, build, and launch. Learn about the history and misconceptions of development preventing you from even starting and then hop on that tech bus.