ZenDev - Friday Frontend: May 15 Edition

Hey there,

Hope your week went okay. I’ve been absolutely SLAMMED with life stuff plus a big work project coming close to deadline. Little bit of a shorter set of articles this week for that reason, but still some great ones.

Enjoy!

Best,

KBall from ZenDev

P.S. I’m sorry, I’ve been completely slammed with deadline and life and have not been able to get back to everyone who reached out about finding work. I’ll keep plugging the resources I’ve been plugging, but have to say that realistically I won’t be able to do much personalized help until I finish this work project. The 2 resources in question:  this great resource of which companies are hiring and which are not, as well as share this resource that a reader shared.

CSS & SCSS

min(), max(), and clamp() are CSS magic!

Working at a company focused on enterprise clients I’m sadly unable to use all of these fun magic tricks that don’t work in IE, but DAMN has CSS gotten cool if you can focus entirely on modern browses.

Modern CSS Solutions for Old CSS Problems

Great series of CSS solutions for common problems. If you’re an old-time frontend developer like me  who has your “way to do things” this is a great place to look and see if any of those ways have been superseded, whereas if you’re newer to CSS this is just a great set of implementation guides for common situations.

CSS fix for 100vh in mobile WebKit

This is great! A simple useful fix to work around the issues with iOS and 100vh. Yes, it’s a total and complete hack, but it also works. This solves a problem that has vexed me multiple times when building mobile layouts.

CSS Findings From Twitter Design

A deep dive digging through Twitter’s production CSS looking for interesting things. Some cool techniques, but also a lot of ‘WTF?’ type of pieces, many of which to me look like broken abstractions coming from using CSS-in-JS like a massive hammer without understanding CSS.

Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

Quick hit showing a super useful tool within Firefox devtools.

JavaScript

React Single File Components Are Here

Super cool breakdown of the new ‘Cell’ approach from Redwood.js, which the author points out is an extremely viable approach to “single file components” within React. If you’re intrigued by Redwood (I certainly am!) you might enjoy this JSParty episode as well.

Deno 1.0

Any way you cut it, this is a big deal. A Typescript first server-side environment similar to Node.js, launched by among others Ryan Dahl who was the original developer behind Node. Lots of fascinating stuff. Honestly though, I’m pretty worried about the culture of the project. The maintainers have systematically pushed back against adopting a code of conduct, despite reports of toxicity in the online communities. Does not strike me as a community that will be welcoming to anyone outside of the reigning SV/tech bro culture.

React Flow - A Library for Rendering Interactive Graphs

This looks super cool; a very simple to use library for rendering interactive graphs. If you have graph-like data (a set of nodes with edges) that you want to visualize, check this out!

Getting started with Sapper and Svelte

Shortly before I started my most recent job I started playing around with Svelte and Sapper, and I built a simple JAMStack site with them. Have to say I loved the experience. If you’re curious, this looks like a solid step by step tutorial to get you started.

Other Awesomeness

Why does writing matter in remote work?

An article after my own heart. Writing has elevated so many aspects of my career, and is one of the key reasons I’ve been able to be successful in remote work both before and now during the pandemic.

Reducing Design Risk

Great article on conducting usability research. I have to say, I’ve had the opportunity this last 6 months or so to work with a dedicated UX researcher (as compared to someone who tried to fit in UX research as a part of an overall design position) and it is a BLESSING to have on your team. 

Introducing Web Vitals: essential metrics for a healthy site

The team over at Google is continuing to push the web for high performance websites, and have just introduced a new standard set of metrics. You should definitely look at these, not only because they are generally useful, but also because Google looks like they’re putting these into all of their tooling and will probably be using them to do things like drive search engine ranking and more.