[LINK CORRECTION] Friday Frontend: “Modern” JS & Web Dueling Takes Edition

[The first version of this newsletter contained an incorrect link. This version has been corrected. Thank you to the readers who let me know]
Hey there,

Happy Friday! There’s some super cool articles this week that I’d love to draw your attention to. In particular there are some dueling takes that present fascinating viewpoints on our front-end ecosystem. 

The first pair is the first two articles in the JavaScript section looking at what JavaScript is like today, highlighting both the challenges faced by outsiders and the potential in the ecosystem.

The second is a pair of takes about the “Modern Web”, summarized by the first article in the “Other Awesome” section.

Enjoy!

Best,

KBall from ZenDev

P.S. There is a LOT of bad shit going on right now, especially in the US. If thinking about tech helps you unwind, yay hopefully this newsletter can help. If not, DON'T feel like right now you have to be focusing on all this work related stuff. Go easy on yourself.
 

CSS & SCSS

Flexbox-like “just put elements in a row” with CSS grid

Nice little quick recipe for using Grid even when looking for a vector layout. I’m not sure exactly why you’d want to reach for Grid over flexbox here, but good to know what’s available.

CSS Tips for New Devs

A good roundup of useful info for folks who are new to CSS. Not much new content if you’ve been in the space for a while, but I know a number of you are newer to CSS and this is a nice rundown to get you oriented.

Building Reusable React Components Using Tailwind

I’ve never used Tailwind, and I am not aware of best practices for use, but I thought this was interesting. The author wraps up Tailwind classes both as individual and grouped props in React. Honestly to me it feels like it’s taking it a bit away from the Tailwind philosophy to spec out particular items as props, but I’d be curious what folks who’ve actually used Tailwind think. If that’s you, drop me a note!

Using calc to figure out optimal line-height

Nice look at creating a universal formula for line-height across elements of different font sizes. If you’ve got a super consistent design system and always use the same heights via classes (or by element), you may get better results by explicitly setting for every font size, but if you’re dealing with a more chaotic system this approach looks great! 

JavaScript

Today’s Javascript, from an outsider’s perspective

A valuable look from the outside at the costs associated with the power in our profusion of tools around JavaScript -- Complexity and difficulty of use. We’ve done a great job of enabling JavaScript to do more and more powerful and complex things, but done a poor job of keeping the basic use case simple. We need not just more powerful tools, but more accessible and immediately usable tools.

The Third Age of JavaScript

Great counterpoint to the piece above, this looks at what is going on in the community now and the evolution that is happening. Some of the big developments directly address the problems above - in particular the collapsing of layers into single end to end tools is likely to make it far easier to get started, pick up some JavaScript, and have it “just work”.

Best Practices in JavaScript Array Iteration

Nice educational article - I love the high level descriptions of each form of iteration, and descriptions of the “why” you’d want to use each one. The tactical “here’s how it works” is fine, but that “why” is what sets this article apart.

A visit to Deno Land (Audio)

If you’re interested in Deno as potentially being the “new hotness”, definitely take a listen through this recent episode of JSParty with one of the core contributors. I wish I’d been able to be on this show because I definitely would have pushed a bit harder on questions about package management and the community and CoC, but Divya and Nick did a great job interviewing and there’s a ton of fascinating content in there.

The Vue 3 upgrade guide

Super excited about Vue 3, and I love to see articles like this coming out to help migrate existing applications into the new hotness. The new approaches look super clean to me, and I love how much easier it’s going to get to use TypeScript with Vue.

Other Awesomeness

“The Modern Web”

A quick summary of two opposing posts making the rounds with opposite takes on the state of the modern web. You should read the underlying negative and positive posts as well, but this is a nice summary that draws it together.

Responsive web design turns ten.

If you’re getting into front-end development now, it may feel like responsive web design has always been around. There’s almost no web development done today that isn’t responsive in some form. But back when mobile phones had just started to get browsers, this was a brand new concept! This is a great backstory behind how the concept first came to be.

The Fastest Google Fonts

Fascinating walk through the process of optimizing load for webfonts from google fonts. Many of the tricks used here can apply to other types of CSS if applied carefully, but the level of impact the author sees from applying them strictly to fonts is striking. If you’re using webfonts, I highly recommend reading through this and applying some of the lessons. And if not, read through it anyway for a master class in optimizing meaningful front-end performance metrics.

IE11 Mainstream End Of Life in Oct 2020

I love the optimism in this post that we might be able to get away from IE11 soon, but now working at a company focused on large enterprises, and starting to interact with those large enterprises more and more… I think anyone focused on enterprise will likely have to support IE11 for a good while yet.

Accessibility is not like drowning

The author draws from philosophical discussions of virtue and drowning to highlight that Accessibility is not a binary switch. Small improvements matter, and if we each keep making progress it will make a meaningful difference for the web.