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.

This week what really struck me is we have a ton of articles (and some new videos from Mozilla) that highlight how incredibly powerful vanilla CSS and JavaScript have gotten. I love the new styles, I was blown away by the pure CSS pixel art, and Iearned about a ton of new JavaScript features this week.

Best,

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

Why Is CSS So Weird? (video)

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.

Powerful New CSS for Styling Bullets, Numbers, and List Markers (video)

Another fabulous video from Mozilla on CSS, this one highlighting some of the new functionality available for styling lists. I absolutely love the new ::marker pseudoelement.

Zero Divs! Pure CSS pixel art animation!

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.

A Modern CSS Reset

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.

JavaScript

Don't Use JavaScript Variables Without Knowing Temporal Dead Zone

Fascinating look into some of the details of the JavaScript language. I knew most of this at a high level (functions and var statements are hoisted while const and let statements are not) but the nuances around how typeof works in different cases and how that interacts with scopes (particularly the example towards the end) blew my mind. If you’re interested in a deep understanding of how JavaScript works, take the time to read through this.

6 Things you probably did not know javascript could do natively

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!

Chaining styles with a JavaScript Proxy

While the objective is related to setting CSS styles on DOM objects, the article is all about how to enable a chaining approach in JavaScript using proxies. I personally love this type of API, it’s part of what made jQuery so popular & easy to use back in the day, and it was fun to follow along in how to create one with vanilla JavaScript.

Understanding Null and Undefined in JavaScript

A dive into the similarities and differences between null and 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

A few handy Vue.js tricks

Lots of fun stuff in here. I hadn’t seen the dynamic event listeners before; that’s super cool!

Other Awesomeness

An HTML Element Potentially Worth $18M to Indiegogo Campaigns

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.

Enhancing The Clickable Area Size

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!

How to Add File Upload to Your GraphQL API

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.

Remember, people are human (audio)

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.

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