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!
Best,
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-left
or margin-block-start
instead of margin-top
, the easier it will be to adapt our sites to different language directions and devices.
JavaScript
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.
Understanding Default Parameters in JavaScript
Super useful article about one of the very nice improvements in the JavaScript language in recent years. I use static default parameters all the time, but hadn’t been aware that you could also use dynamic defaults that run functions or do other work at call time, and can even base them on earlier parameters. Very cool!
30 Helpful Javascript Snippet That You Should Know
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.
An introduction to Lambda Calculus, explained through JavaScript
For those interested in going deeper on functional programming, this is a really nice post. Lambda calculus has long been one of the “scary” things about the hardcore functional programming languages, but this post breaks it down (relatively) simply using JavaScript.
Other Awesomeness
Getting JavaScript to Talk to CSS and Sass
Ever struggle with getting information back and forth between your styles and your JavaScript? I definitely have! If you’re all into CSS-in-JS this won’t be important to you, but for those of us who aren’t, check out these cool tricks!
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.
colors.lol
We could all use a little levity these days. This is a delightful set of whimsical “overly descriptive” color palettes.