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!
KBall from ZenDev
CSS & SCSS
Great in-depth tutorial on Viewport units (vw, vh, etc) and how to use them to make your CSS naturally responsive.
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!
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.
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.
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!)
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.
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.
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.
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.
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!
(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!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!