Friday Frontend: Vanilla is Powerful Edition
Happy Friday! I hope you had a great week, filled with fun and learnings, and are going into the weekend ready to relax and enjoy.
KBall from ZenDev
P.S. I just launched a new project called SpeakWriteListen to help engineers and other technical folks become leaders by improving their communication skills. If there’s one thing that I can point to that has contributed most to my career success, it’s been my relentless focus on improving my abilities to speak in public, write coherently, and listen carefully. There’s a free newsletter, just like this one (but a daily tip instead of a weekly digest), and I’ll be adding additional free and paid resources very soon. Check it out at speakwritelisten.com.
CSS & SCSS
Great fun video breaking down a lot of the ‘why’ behind how CSS works on a number of different levels. The control inversion from creator to client is such a fundamental concept, and yet so hard to wrap your head around. Also kinda love that Mozilla seems to have started a new series of videos on CSS.
Another fabulous video from Mozilla on CSS, this one highlighting some of the new functionality available for styling lists. I absolutely love the new
This is seriously mindblowing. It’s a codepen with NO HTML and no JS that creates an animated piece of pixel art. WHAT?!? I spent about 15 minutes trying to understand what’s going on and finally figured it out. It takes advantage of the fact that the
box-shadow property allows you to create as many shadows as you want at any offset… the creator literally chains together a shadow for every pixel, in each time point in the series. And then runs it as a CSS animation on loop. Mind. Blown.
I still use Normalize as my CSS reset but this article makes me wonder how much of that is overkill and catering to old browser that are barely used anymore. I also appreciate how the article breaks down the thinking behind the choices for this new minimalistic reset.
var statements are hoisted while
let statements are not) but the nuances around how
Some interesting nuggets in here. While you may know some of them, chances are at least one will be new for you - for me the one I’d never heard of was
Object.seal. Pretty cool stuff!
A dive into the similarities and differences between
undefined. Frankly, as much as I love that JS makes a distinction between “We deliberately set this to empty” and “we just don’t know anything about this” the details are freaking confusing. This article helps set them straight
Lots of fun stuff in here. I hadn’t seen the dynamic event listeners before; that’s super cool!
Similar to last week’s article about an HTML element costing Chipotle, but what I love about this article is that the author not only goes through a compelling case for why accessibility problems cost the company money, but he includes video of exactly the INCREDIBLY FRUSTRATING experience users will go through with their site. It’s educational on the value of proper HTML for accessibility.
This is a solid look at some design principles around clickability of elements, and how that interacts with choosing the right HTML elements to create your design. Plus, if you do it right, you get accessibility for free!
File uploads are a new addition to the GraphQL spec, and an important addition if you want to move your entire API to be GraphQL. This is a long-form tutorial on how it works and how to add File Upload to an Express-based GraphQL API server.
In the theme of communication and communication skills, this is a recent JSParty episode where we talked about communication skills for coders. Everything from how we comment our code to how we talk with stakeholders and users. It’s good stuff.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!