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!
I also love the CSS checkbox example, the list of JavaScript destructuring usecases, and the article about naked promises being NSFW (Not nearly as risque as it sounds, don’t worry!) Enjoy!
Best,
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!
CSS & SCSS
How to make responsiveness super simple with CSS Variables
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.
2019 Checkbox Styled — Accessible, Simple, CSS-only
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.
Variable Font Animation with CSS and Splitting JS
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!
Getting Started with CSS Grid: Anatomy
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.
JavaScript
Why I like JavaScript Optional Chaining
Great deep dive into one of the new JavaScript language features that just moved into stage 3 in the standardization process and is coming to browsers near you. Optional chaining allows for much more compact and readable code, particularly when dealing with deeply nested properties. This article goes into this, the usecases, but also touches on when not to use this feature so you don’t get yourself into trouble. Love it!
5 Interesting Uses of JavaScript Destructuring
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.
Why Naked Promises Are Not Safe For Work - and What to Do Instead
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.
Draggin’ and Droppin’ in React
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!
Introducing the New React DevTools
DevTools with full support for hooks and better filtering capabilities to deal with deeply nested component hierarchies… tasty!
Promoted Link
Udemy Legacy Sale: Top Courses Just $9.99
If you're ready for your next online course, now is a great time to buy at Udemy. Pretty much every course is discounted down to $9.99. Courses I’ve been recommending recently include The Complete JavaScript Course 2019, Modern React with Redux (the course I learned React from, updated with all the latest features), and Vue JS 2 - The Complete Guide (by one of my favorite Udemy instructors, Maximilian Schwarzmüller.)
Other Awesomeness
WebAssembly Interface Types: Interoperate with All the Things!
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!
WebAssembly on the Server: How System Calls Work
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.
Basic Custom Control Requirements
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.
Intro to MDX in Gatsby
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.
When You Need to Show a Button’s Loading State
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.
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)