Friday Frontend: New React Patterns
There’s some great other material too - definitely check out the CSS transforms visualizer, and for kicks and giggles reading how they did the css-only-chat is really a brain twister. I also loved the article on bridging the gap between design and development as a front-end engineer. All together a good week of articles. Enjoy!
KBall from ZenDev
CSS & SCSS
Z-index is one of those things that seems like it should be so simple, and yet it has some nuances that can make it very frustrating to work with on occasion. This is a nice 1 2 3 4 checklist of things to try when you run into z-index problems.
A great dive into one of the more confusing areas of CSS Grid - Implicit tracks. Explains the situation, shows some examples, and provides some heuristics for keeping out of trouble. Very nice!
This is a super cool tool for visualizing what different CSS transform functions will do. Tinker with transformations, apply random values, generally explore and see in real time what it does. Then when you’ve got one you want to apply to your own site, instantly see the associated CSS.
One of the super cool things about a genuinely new approach like hooks is that we start to see new patterns and possibilities. This is a look into one such pattern that the author has discovered, and how it plays out in a few different examples.
Nice step-by-step guide to adding animations within a React application. Looks at several types of transition you might want to animate and shows how to approach them. Includes an embedded video of a talk on the same content.
A solid list of recommendations. If you’ve been writing JS for quite a while you may know all of these, but with the language evolving quickly there may be some new ideas in here for almost everyone. I’m still not taking proper advantage of defaults in destructuring.
I’ve been on a bit of a web components kick recently… interesting to see what folks are doing with them. This is quick look through some things to think about where you might run into challenges creating web components. For each it either shows you directly how to address it or links off to resources.
If you’re like me, you have a whole ton of Udemy courses you’ve signed up for and never fully finished. It’s hard to stay motivated without a cohort of classmates & someone setting accountability and deadlines. One Month does just this - routing you through a one month bootcamp with other students, support staff, and a helpful instructor setting deadlines & hosting office hours. The variety of courses may be less than you’d find at Udemy, but if they’ve got something you want your likelihood of completing the course & actually learning the material is way higher. And if you go through this link you’ll get 10% off. Go check it out!
Great look at some of the challenges that can happen in the design/developer relationship, and how to bridge those gaps. I also love the callout to Can’t Unsee - I hadn’t seen that before and it’s a great way to practice your visual eye!
Interesting look at how people are using (and misusing) favicons throughout the web. Sites with favicons over 1MB in size? It’s hard for me to even wrap my head around what they might be trying to do.
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!