I want to start out this week’s newsletter with a hearty thank you! So many of you responded to my question earlier in the week about information, advice, and questions for new tech leaders. I’m compiling results and looking forward to publishing some great info. But I just want to say thank you; I’m grateful for your continued readership and engagement with me and this newsletter.
Anyway, on to this week’s content. We’ve got another neat set of CSS tricks, as well as a massive handbook covering a broad swatch. There’s a nice range of framework and pure JS articles, some interesting updates, and a thought-provoking article about how important naming things is for accessibility. Enjoy!
KBall from ZenDev
P.S. If you're not on the mailing list or missed the note earlier in the week, but you have advice about what important skills are for tech leads, or questions about becoming a tech lead, it's not too late! Just leave a comment or email me a note with your top 2 pieces of advice or questions.
A look into how
display: contents influence box generation of elements. The
display:none case is relatively trivial, and one I knew, but
display: contents is fascinating. I love the potential usecase (once browser bugs are ironed out) of maintaining semantic nesting while embedding children into a grid or flex based layout.
A fun exercise in using the
Some simple and straightforward examples of the benefits of using
rem sizing. And since I always have to look it up (and the article doesn’t explicitly say this, focusing more on benefits),
em is sized relative to local font-size, while
rem is sized relative to root font size.
Cool trick for trimming out a slanted/diagonal container within e.g. a header using just CSS.
Wow. This is massive. An all-in-one guide to understand a huge percentage of CSS. Each subject area doesn’t go super deep, but gives you a great overview and then you know what to google for if you want to learn more.
I don’t usually include vendor blog posts about using their own product, and this is on the Auth0 blog, but I’m making an exception in this case because this question - How to create an authentication-shielded area in a Gatsby site - came up a lot after my recent JSParty episode focused on Gatsby. And while the specifics of this example use Auth0, they start out the whole thing by showing how to create a gated client-side only area in Gatsby, which you could then use with any sort of auth solution.
Getters and setters is a very powerful pattern, and the built-in language features around them are widely supported. This tooling lets you create all sorts of “automatic” reactions based on what look like normal assigns… Vue.js utilizes getters and setters to implement “reactivity” where templates and computed data automatically react to data changes, and there are tons of other potential usecases.
Mixins are one of the key features of Vue.js that is different from React. They provide a tool for reusing logic that is tied into the state of a component that can be super useful. That said, it’s also easy to shoot yourself in the foot combining mixins (this is one of the reasons I’m excited about hooks coming to Vue), so an understanding of how they work is key. This post gives you the blow by blow.
This is very interesting. I haven’t been paying a ton of attention to Svelte, but it showed up on a recent episode of the Changelog and I’ve started seeing more and more stuff go by about it. The idea of moving as much as possible of our code into a compile-time step is reminiscent of static site generators, and the idea that we can get “cost-free” abstractions by doing compile-time optimization reminds me a lot of what’s going on in the Rust ecosystem. I’ll be very interested to see where this goes.
Udemy is running another sale, and from what I can tell checking right now there’s exactly 1 day left on it. Celebrate a new month by making a commitment to yourself and starting a new course today.
This was a great read on how the way you name things can influence their accessiblity. To be honest, I had never realized the impact of having ‘Read more’ links for someone browsing a site with an assistive technology… and the value of including some context. “Keep reading about [title]” may be more verbose, but suddenly the context is right there in the link & easy for a non-visual browser to digest.
The context may be design, but the four decision traps labeled are universal. We all suffer from them. And the techniques and heuristics described in this article for mitigating them are super useful.
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