Hope you had a great week! Another week where what caught my eye was really in the JavaScript section - two very interesting articles looking at patterns I had not seen before in React. The first on a new hook related pattern, the second on recursive components (!).
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!
Best,
KBall from ZenDev
CSS & SCSS
A Better Approach for Using Purgecss with Tailwind
While written specifically referencing Tailwind, this article looks at a problem I’ve seen in other scenarios as well. When using a CSS library or framework, it can be great to purge out classes you don’t need using Purgecss… but how do you account for dynamically computed & applied classes (either from your templating language or directly applied via JavaScript). There’s no perfect solution, but this article goes through several and their pros and cons. Their final approach is delightfully simple if potentially verbose. I like it.
4 reasons your z-index isn’t working (and how to fix it)
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.
css-only-chat — A truly monstrous async web chat using no JS whatsoever on the frontend
DON’T DO THIS! But do read through how they did it. My goodness. Talk about exploiting the edges of the possible with technology… web chat in the browser without a single line of JavaScript.
Debugging CSS Grid Part 1: Understanding Implicit Tracks
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!
CSS3 Transform 2D & 3D CSS Transform functions visualizer
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.
JavaScript
Discovering patterns with React hooks
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.
Recursive React Components
This was a fun mind-bender. React components are “Just JavaScript”, and in fact often represented as simple functions… so of course they can be recursive like other functions, right? I hadn’t ever thought about this, but there’s a ton of interesting possibilities.
UI Animation in React
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.
12 tips for writing clean and scalable JavaScript
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.
10 Things You Are Doing Wrong in your Web Components
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.
Promoted Link
One Month Bootcamps
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!
Other Awesomeness
How Frontend Developers Can Help To Bridge The Gap Between Designers And Developers
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!
Is Google Ready to Catch Up with JavaScript?
Google recently announced that their crawler is going to be running an up-to-date version of Chromium, which led to all sorts of developer celebration. Maybe all the hijinks JavaScript-heavy sites go through to make their sites indexable will no longer be necessary? Not so fast… there are still a number of reasons you might want to render important content purely with HTML. Read this article to learn about some of them.
Getting involved with the web platform
A great set of simple ways that you can start going beyond being just a consumer of the web platform and starting to get involved in its creation. Like to gripe about HTML, CSS or JavaScript? Help make them better by turning your gripes into issues and getting involved in the debates around how the web should work!
Favicons: Perhaps the Least Understood Web Feature
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.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)