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.
Along the way, we’ve also got your usual lineup of CSS and JavaScript articles, including both quick hits and some great long pieces. Enjoy!
Best,
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
A very very clever trick. Probably in most cases better done with JavaScript. But if you find yourself working in an environment where you really want to keep this in CSS and you don’t mind a little extra white space between the end of your content and the ‘...’, this looks like a good match.
JavaScript
Beginner's working guide to JavaScript generators
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?)
JavaScript Maps and Sets Explained
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.
Promoted Link
(2 days left!) All Programming Courses on sale at Udemy. Starting at $10.99
All software development courses are still on sale at Udemy! But this sale only runs until Sunday, so jump on it now! If you’ve got a new area you want to learn about, now is a great time to buy a course, even if you won’t have time for it for a little while, because you can get them dirt cheap. Courses I’ve been recommending recently include The Complete JavaScript Course 2019, Modern React with Redux (the course I learned React from, updated with all the latest features), and Vue JS 2 - The Complete Guide (by one of my favorite Udemy instructors, Maximilian Schwarzmüller.)
Other Awesomeness
Improve Your JavaScript Knowledge By Reading Source Code
While the title and examples are JavaScript specific, I actually think this is a phenomenally useful article for anyone in the dev world. Hands down one of the best ways to learn about new techniques is to read through and try to understand other people’s code. Especially well-written code, but honestly any functioning code. And with the proliferation of open source, you have at your fingertips a monumental array of examples. So pick a library or framework you’re using and read through it, building your understanding. This article will give you a guide for some techniques you can use to help make it feel more approachable and to optimize your learning.
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!
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 (1)
I spotted a typo: "each time a run into a problem," should be, I believe, "each time I run into a problem."