Friday Frontend: Celebrating Caregivers Edition
Hope you’re staying safe, healthy, and sane during this crazy year. I’m still doing okay, sheltering in place, but it’s extremely mentally & emotionally difficult to keep up with work while also doing extra childcare and coordinating extra care for my parents. Makes me realize how good I have it most of the time, and how much we tend to underestimate the amount of emotional, mental, and physical work caregivers put in every day.
This week, hats off to every one of you who is taking on extra burdens of care during this pandemic. And to those who take on that caregiving even in normal times, bearing up still under these abnormal ones.
Anyways, on to the content. Lots of good stuff, but if I were to recommend one article it would be the article on front-end debugging. Getting good at debugging has been one of the highest leverage skills in my career, and that article will help you get there.
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
This is an amazing roundup of projects people have done that push CSS beyond all reasonable expectations. I’d seen some of the artwork before, but the pure CSS search engine!?! Oh my gosh. People do some truly astounding things.
This is pretty interesting, and now after Safari’s latest release has very widespread availability. The Shadow DOM already allows you to completely encapsulate styles for custom components (similar to CSS-in-JS, but more complete and built-in), but I hadn’t seen this functionality: you can deliberately expose parts of your custom component to be styleable by the outside page, while keeping others completely contained. This article dives into how.
Solid quick hit article that really shows some of the power of CSS Grid. Goes through a specific design, but also very easy to generalize.
Interesting technique for wrapping text within a shape, despite the current lack of a
shape-inside property. Also highlights a nifty tool from Firefox for testing and tweaking your shaped text.
Very nice look at the Vue 3 composition API, and how it cleans up some of the behavior-sharing properties that previously Vue developers relied on mixins to provide.
Super fun article demonstrating a really neat animation. The library they use looks super cool too.
I’ve been using Styled Components with React at work, and while I continue to not be a huge fan of this hard-core CSS-in-JS approach, many of my coworkers are. This is the first I’ve seen of taking this approach to Vue. Now personally, I think Vue’s SFCs and using their scoped CSS features are a way nicer approach, but if you find yourself working in Vue and wishing you could use Styled Components, take a look at this article!
Great in-depth breakdown of various ways to handle images on the web. I wish I’d had this when I was first learning about how to put images in.
Debugging often feels like a black art - it is rarely taught, and techniques are passed from engineer to engineer by word of mouth. I love to see articles like this written, and while some of these tips seem obvious, there is a tremendous amount of wisdom here. Don’t skim past the “obvious” ones either; I can’t tell you how many times simple instructions like “try to read and understand the error message” are the solution to otherwise vexing problems.
(Bias Alert: I was a panelist in this podcast episode). This JSParty podcast episode was super fun, interviewing the author of ‘Micro Frontends in Action’ about the pros and cons of this new approach.