Friday Frontend: Celebrating Caregivers Edition

Hey there,

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.

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

Extending the Limits of CSS

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.

Styling in the Shadow DOM With CSS Shadow Parts

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.

Making a responsive CSS grid layout with just 3 properties

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.

Using CSS to Set Text Inside a Circle

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.

JavaScript

How the Vue Composition API Replaces Vue Mixins

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. 

How To Create A Particle Trail Animation In JavaScript

Super fun article demonstrating a really neat animation. The library they use looks super cool too. 

How && and || Operators Really Work in JavaScript

You might think these are simple boolean operators, but in a very loosely typed language like JavaScript, that can lead to some very interesting behavior. Read on to learn how truthy and falsy values behave with these operators, and what actually gets returned when you mix types.

Using styled-components with VueJS

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!

Other Awesomeness

Image Techniques On The Web

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.

Front End Debugging — Tips on Resolving Issues Quickly so You Can Move on to Better Things

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.

What even is a micro frontend? (Audio)

(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.