ZenDev - Friday Frontend: May 8 Edition

Hey there,

Hope you had as good a week as we can in the current craziness.

It’s been another frantic week this week for me between childcare, dealing with parent health issues, and keeping up on work, but I’ve got a lot of great stuff for you below.

Enjoy!

Best,

KBall from ZenDev

P.S. I’ve been a bit overwhelmed this last week so haven’t been able to help as many folks as I’d like to on the COVID displacement/hiring front, but don’t hesitate to reach out to me if you’ve been laid off and need help finding something (and if you already reached out, feel free to ping me again; I’ve just been slammed, sorry!). A couple resources - I want to plug again this great resource of which companies are hiring and which are not, as well as share this resource that a reader shared.

CSS & SCSS

Faking 3D Elements with CSS

A fun example that shows how to create what looks for all intents and purposes like a 3d sphere using CSS and 2 HTML elements.

List Style Recipes

A great set of tools to use for styling your lists. I didn’t know about some of these tricks! I particularly am excited about all of the ways for customizing the numbers of an ordered list.

A Complete Guide to CSS Functions

Incredibly detailed list of all of the different functions available to you in CSS. Organized by group. Good both as a resource to go to for a specific function or to browse for new and interesting CSS… I’m particularly intrigued by some of the ‘not ready for primetime’ functions.

When to use CSS grid and when to use flexbox

Short, easy to understand, and with great visual examples. What’s not to love?

Performance monitoring in CSS animations

A great look at some of the tools available to you in devtools to understand (and debug) the performance of your CSS animations.

JavaScript

Continuously refactoring 100000 lines of code

Interesting look behind the scenes at modernizing a large JavaScript project. Working with legacy code is a huge part of many developer’s lives, but often under-emphasized in educational posts, so love to see something like this with real life examples of how to approach it.

A Visual Guide To React Mental Models

For something billed as a visual guide, the visuals on this actually aren’t super helpful. HOWEVER, the writeup is helpful, so I want to share it anyway. Sums up a number of the core concepts and mental models around writing React applications.

Demystifying React Redux

In-depth dive into the mental models behind Redux and how it works with React. I like this approach of re-implementing a simplified version of a library to understand the mental models. Well done.

10 JavaScript Image Manipulation Libraries for 2020

Very neat set of tools. I love to see how easy some of these make it to do features that feel advanced like auto-cropping, edge detection, and more.

Detect text toxicity using React

This is also a super cool example of how easy it is to integrate machine-learning based tools for real and important impacts. Add toxicity checking into your React forms or others using a few simple hooks. 

Other Awesomeness

For many, accessibility is an unknown unknown

This is an article that expresses better than I have the sense that “More of accessibility should be baked into the browser”. Not in the sense that individual developers will never have to do anything, but that we should build the same types of guide rails and error flagging for common accessibility errors as we do for visual & logical JavaScript errors.

How to Build HTML Forms Right: Accessibility

Great super in-depth article about how to handle accessibility in forms. What I like about this article is that it brings together a whole slew of techniques that you can often fine one-off articles on and gives you the big picture.

We're not smarter than browsers

Straightforward, well-written argument for why we should default to using vanilla HTML and CSS for elements over building custom JavaScript-based replacements whenever possible. I particularly like the formulation that “when you disable user-select or try to disable right-click on your web page and you're not only breaking the accessibility the page, but you're also making the rather bold statement that your code will never, ever break.”

What’s in that .wasm? Introducing: wasm-decompile

Very interesting new tool if you’re doing stuff with webassembly. Takes a wasm binary (even an optimized one) and “decompiles” it into readable pseudo code.