Friday Frontend: Shelter In Place Edition
This week has been a crazy one for me! Dealing with all sorts of extended family health challenges, while also being quarantined at home with my wife & 2 kids, and still trying to get some work done.
Consequently the newsletter today is just a tad on the short side, but still found some delightful articles. Enjoy!
Hope you’re staying safe and healthy!
Best,
KBall from ZenDev
CSS & SCSS
CSS Viewport Units
Great in-depth tutorial on Viewport units (vw, vh, etc) and how to use them to make your CSS naturally responsive.
Flexbox and absolute positioning
Woah this is interesting. I would have assumed that once you put absolute positioning on the child of a flex container, there was no impact from the flex because you’ve taken it out of flow. WRONG! While that is mostly true, it turns out things like flex alignment still influence it. Cool!
Twitter thread as blog post: Thoughts on how we write CSS
Very stream-of-consciousness style post, but some definitely interesting thoughts within. I love the comparison of specificity to conditional logic, the challenges of machine-generated CSS, and the thoughts around bringing CSS development closer to the medium in the browser. Hot reloading + devtools have helped a lot on that front, but I think there is more that can be done.
Background Scale Hover Effect with CSS Clip-path
I don’t love the way this article is written - it doesn’t explain too much, and you have to click through to the demos and the source code to figure out what’s really going on - but the effect is so bloody cool I want to include it anyway. Hover around on the various links in each one of the demo pages (there’s 4) to see a really cool effect! Then you can click through to github and dig into the CSS to really understand how they do it.
JavaScript
JavaScript: The First 20 Years
If you (like me) are stuck at home under a “shelter in place” or other quarantine, and are looking for an interesting long read, check this out! The linked post describes a (LONG) paper on the history of the JavaScript language, with authors including none other than Brendan Eich (one of the creators of the language). Or if you’d like to skip straight to the paper, here is a preprint version.
A Simple Guide to Error Boundaries in React
Error boundaries are a crucial tool for developers working with React to prevent problems in one part of your application from breaking the entire application for users. This guide is a super helpful introduction to how they work, what types of errors they are most useful for, and how they interact with try/catch (spoiler, you want to use both types of error handling, picking which is best for different parts of the lifecycle!)
Angular Localization: The Why, What, and How
Longtime readers know I’m not super into the Angular ecosystem, but I was interested to learn that there is a “blessed” plugin within Angular for localization/internationalization. This is a huge pain point that most companies (especially larger enterprises) will have to tackle eventually, and it’s neat to see how the Angular community has solved it.
Why Svelte is our choice for a large web project in 2020
Super interesting pros & cons breakdown of Svelte as compared primarily to React and Vue, though with some mentioning of other approaches. I like this because it’s not abstract, it’s documenting a developer’s decision process as they decided what framework to recommend to their team for a long-term project.
Other Awesomeness
Setting Height And Width On Images Is Important Again
Deep look at sizing on images, why you might want to specify height and width on image tags again, and how that interacts with responsivity and resizing of images.
Considerations When Choosing Fonts for a Multilingual Website
Fascinating look at how the browser handles font selection across languages with different character sets. It can get potentially complicated, especially when you’re supporting both LTR and RTL languages! But turns out CSS has your back, and there’s a “golden” way to do it.
GraphQL resolver middleware
Nice introduction to how middleware can make your code simpler and easier to reason about, in this case it’s in the context of building a GraphQL server. Short and sweet!
"I do, we do, you do" (audio)
(Bias alert - I was a panelist on this show). A huge number of folks in the technical community have thought about or are interested in publishing online courses. In this episode of JSParty we dove into what it’s actually like, things to consider, and tips and tricks for doing it well. All 3 of us on the show (Myself, Emma Bostian, and special guest Jason Lengstorf) have experience in that domain, and I found myself floored by some of the advice and ideas the other two were giving. Check it out!