Friday Frontend: Passover 2020 Edition
The Jewish tradition of Passover seems incredibly symbolic at this time in the world. We are all stuck alone in our homes, hoping and praying that the plague will pass us over. And I’ve heard so many stories of people finding ways to innovatively be together for the holiday without physically being together. Zoom Seders are a thing!
Anyway, we’re still moving forward. If you read one article this week, read the one about CSS findings from the new Facebook design. It is utterly fascinating. Lots of other good stuff as well. Enjoy, and stay safe and healthy!
KBall from ZenDev
P.S. If you are looking for work, or your company is hiring, please hit REPLY and let me know. I know so many folks have been impacted by COVID related economic problems, and I’m doing my best to play matchmaker to help them find new opportunities. A couple resources for those looking - 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
CSS Findings From The New Facebook Design
This is a fascinating article. The author goes through the new Facebook design element by element, looking at what they’re doing. In some places he uncovers some very bizarre choices, but what’s extra cool is that Facebook engineers then responded and he updated the article with the reasons behind those choices. A ton to learn here!
BEM Cheat Sheet
Super useful quick reference if you’re using BEM and having trouble figuring out how to name things. Also a nice set of examples to scroll through just to see how one experienced developer structures common web components in HTML and CSS.
How to Re-Create a Nifty Netflix Animation in CSS
Nice little step by step explainer to recreate a particular effect using only CSS.
CSS logical properties: using the margin-block and margin-inline instead of the default margin
Super quick hit, but worth going through if you’re not already using logical properties. The more we can get in the habit of using logical properties like
margin-inline-start instead of
margin-block-start instead of
margin-top, the easier it will be to adapt our sites to different language directions and devices.
The Svelte Compiler Handbook
Super cool dive into how Svelte works it’s magic. Worth checking out even if you’re not using Svelte; you’ll learn a lot about how frameworks parse and compile your code. Vue’s single file components use a similar parser-like approach, though of course Vue doesn’t precompile everything in the same way.
A set of small useful snippets of code for different purposes. Useful both as a resource to come back to as you need particular functionality, or as a learning resource to go through each snippet and understand how they work.
The WebAIM Million—Updated
A look at how the world is doing from an accessibility front, looking at the top million homepages, with a comparison to last year. Spoiler alert: it doesn’t look so good! Surely we can do better.
Covid-19 and the dark side of web performance [video]
Great talk on web performance and looks at how the massive increases in web traffic going on right now are impacting folks. Includes some interesting look at Gatsby around minute 9 and where it falls a bit short of its performance claims of being “fast in every way that matters”.
Responsive Images the Simple Way
I don’t know if I’d call this exactly *simple*, but it is pretty clear and explicit how to use adaptive images via srcset.
We could all use a little levity these days. This is a delightful set of whimsical “overly descriptive” color palettes.