ZenDev - Friday Frontend: Election Week Edition

Hey there,

Voting and counting votes in a pandemic was always going to be weird, but I don’t think any of us had understood how weird it would be, especially when paired with the state-by-state different dynamics of when votes cast by mail would be counted vs in person voting. This week has been a stressful one, no matter your political leanings, with so much on the line in the US. 

And no matter your political leanings, if you are in the US you come out of this week realizing roughly half the country believes continues to believe *very* differently from you. I hope that we are able to not only view this with disgust and anger, but also with humility and from a place of questioning. What is it that is so different about the world our coworkers, neighbors, and sometimes family see than what we see? 

There are simple answers that get thrown out there around racism, religion, elitism… but while those answers may hold some truth, they’re ultimately unsatisfying to me. Yes some people may be the caricatures that are held up, but most are not. We are all imperfect individuals with good and bad elements to us, and I hope that coming out of this deeply divided election we can find the humility to approach each other as individuals, not faceless mobs.

Best,

KBall from ZenDev

P.S. Thanks to you to everyone who wrote back after I asked if you value the newsletter. You both showed me that you value it, but also showed me tremendous grace in understanding the burden of writing it and giving me permission to stop writing it. I have not fully decided yet what I’m going to do with it, but will do so over the coming month and keep you posted. 

CSS & SCSS

GIFS and prefers-reduced-motion

I think this is really important - if you’re using animated GIFs in your website and not already making them responsive to the prefers-reduced-motion preference, take a look at this technique. It makes it relatively straightforward (so long as you have an alternate format, and that can be automated), and can make a huge difference for web users with motion-triggered reactions.

In Defense of Tables and Floats in Modern Day Development

It’s easy to get enamoured with modern tools. CSS Grid for every layout! Flexbox for every component! But as this article points out, while we used to use floats and tables for some completely inappropriate uses because we didn’t have better tools, they still do have some legitimate uses where we can use them today.

Native CSS Masonry Layout In CSS Grid

Speaking of super cool modern tools, check out one of the things coming next with CSS Grid: JavaScript free Masonry layouts! It’s still early and not well supported, but specified and early implementations are available. So exciting!

All CSS units compared & explained!

A solid deep dive into CSS units. There’s a lot more there than just pixels and rems. Check it out!

JavaScript

What Makes JavaScript JavaScript? Prototypal Inheritance

There is some real truth to this statement. Prototypal inheritance is one of the unique features of JavaScript that I have not seen in pretty much any other programming language. And to really deeply understand how the language works, you need to understand prototypes. This is a good article to start with.

Best Practices with React Hooks

I’m always a little hesitant about the words “best practices”, because there can be so much argument about the right approaches, and some of it is very context dependent. That said, this set of practices very much matches approaches I have found to be useful.

Getting Started with Modern JavaScript — Destructuring

Fundamentals focused - destructuring is one of the most useful additions to the JavaScript language in the last 5 years, in a very long list of additions. I use it for so many things now that I can barely remember how it used to be to code without it. If you’re not doing so also… maybe take a look at this article. :)

The JavaScript Cheatsheet you need in 2020

Super presumptuous title, but still a useful cheatsheet, especially for those a bit newer to web development. If you find yourself sometimes lost swimming in vocabulary while reading javascript articles, this is a great summary of what some of those terms mean, in a more accessible way than you’re likely to find just searching Google.

Other Awesomeness

Writing Better Self Reviews

Whether or not self-reviews are explicitly a part of your work place / performance review cycle, this is a super useful article to help you think about how to self-advocate. Mapping your work to impact and making it easy for your manager to advocate for you are KEY. 

compute cuter

This just tickled my fancy. I love to see whimsical uses of technology, and I think this fits. A set of curated fonts, editor themes, keyboards, and other computing accessories the like that project a “cute” vibe. It’s probably not what I might choose for myself (I tend to be pretty agnostic when it comes to my physical space, and lean towards more retro looks when I have to make a choice), but I love to see it.=

Design To Engineering Handoff

There’s a super useful set of practices in here for designers handing off to engineers. Another useful practice that I’d add to the list: Have a shared palette of colors, font stylings, and spaces that are consistently used, and then use comments in the component panel to call out which ones you are using. This makes it so much easier to ensure consistency and reference the component library/theme rather than recreating colors and stylings everywhere in the application.

3 Types of Roadmaps in UX and Product Design

Interesting breakdown of different levels of abstraction when it comes to roadmapping. The more specialized versions used as examples here are specific to design, but I think this same type of layering exercise applies very well to software engineering as well. Below a product design roadmap you might have an overall technical roadmap, and then some very specific specialized roadmaps for different specializations.

Redefining Impossible: XSS without arbitrary JavaScript

I’m not much into the security/hacking space, but occasionally I stumble across an article like this and it totally blows my mind. Such incredible cleverness to take advantage of a small coding mistake (e.g. reflecting a user string in a single quoted javascript string) to leak private cookie data.