Friday Frontend: Learning How To Learn Edition
Hope you’re having a great summer! This week’s edition has a number of articles that are tied into some big meta-question: how do we keep up, learn what we need to learn, and not burn out? In particular check out the first three articles in the ‘other awesome’ section of the newsletter.
KBall from ZenDev
P.S. quick reminder, I’ve recently launched a coaching program for anyone who wants some more 1-on-1 help. I’m happy to work on your technical skills, but also things like communication, career growth, and managing overwhelm. If you think you might be interested, book a free intro call and let’s talk about it!
CSS & SCSS
Managing Multiple Backgrounds with Custom Properties
Great look at how you can use CSS custom properties as a *part* of a CSS value, rather than the whole value. Also, properties can be made up from other properties, so this really gives you some amazing tools for managing & composing values in CSS.
How to build a calendar with CSS Grid
Nice step by step tutorial on building a calendar layout with CSS Grid. Really provides a nice demonstration of how the auto-placement algorithms work to your favor.
Everything You Need To Know About CSS Margins
Super deep dive into CSS Margins, including a bunch of time on the dreaded margin collapse. Margin collapsing has got to be one of the hardest things about CSS for new developers, and this article not only goes into it and how to avoid it, but explains the “why” behind it.
Position Sticky and Table Headers
Short, sweet, and to the point, but it will help you avoid some frustration and headaches when you start using
position: sticky with tables. And should you start using
position: sticky? Unless you have to support IE, I’d say the answer is YES ABSOLUTELY, because it solves a lot of the prior pain of dealing with sticky elements.
Multi-Line Truncation with Pure CSS
Are you using generators in your code? I’m not… and at least a part of that is they still aren’t super intuitive to me. This guide is super easy to follow, though there are definitely still some unintuitive things (the first value passed into a generator is ignored, but later ones are not? Whaaa?)
The value prop for maps over simple objects listed in the article seems pretty weak to me (the fact that maps give you consistent iteration ordering is a stronger argument), but sets are a phenomenally useful tool.
Building an Interactive and Distraction-Free Form with Vue
Very nice long-form tutorial. Starts with a set of requirements, moves into outline/proof of concept, and then builds out a full implementation, explaining the Vue features used along the way. Great read.
Create a custom modal in React with context, portals, and hooks
A shorter article in the same form as the one above. Building a thing (in this case a modal) and using that process as a way to explore some concepts, this time in React.
(2 days left!) All Programming Courses on sale at Udemy. Starting at $10.99
Beating the technology learning curve monster
I wish there was more to this article than exists, but I do really like the categorization he introduces between different types of learning (sequential vs scan-and-run). I feel like my approach for a new technology is to do just enough sequential to start to understand the big picture, then start a project and use scan-and-run each time a run into a problem.
An honest conversation about burnout (audio)
This was a phenomenal recent JSParty episode with three AMAZING folks in the JS/frontend world all talking about their struggles with burnout in different ways.
A Guide to Component Driven Development (CDD)
An excellent guide to how to make components central to your development process. Since components are one of the biggest megathemes in front-end development today, this impacts you pretty much regardless of what technology choices you have made, and is well worth a read.
output: HTML's native live region element
An interesting look at another semantic HTML element that I was unaware of. The
output element is a native “live” element, meaning that screen readers automatically expect it to be updating content and will watch it and announce updates. Cool!