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!
Best,
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.
CSS & SCSS
Digging Into The Display Property: Box Generation
A look into how display:none and 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.
How to Build a Filtering Component in Pure CSS
A fun exercise in using the :checked pseudoselector and a series of sibling selectors to build a filtering component without a bit of JavaScript.
Relative sizing with EM units
Some simple and straightforward examples of the benefits of using em and 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.
Diagonal Containers in CSS
Cool trick for trimming out a slanted/diagonal container within e.g. a header using just CSS.
The CSS Handbook: a handy guide to CSS for developers
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.
JavaScript
Securing Gatsby with Auth0
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.
How to use Getters and Setters in JavaScript
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.
Understanding Mixins in Vue JS
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.
Getting To Know The MutationObserver API
I think mutation observers are just plain cool - they let you watch in JavaScript and know when some part of the DOM has been modified. Useful? The main usecase I’ve thought of is when you’re creating reusable containers that need to behave differently based on their contents… but I’m sure there’s other uses out there. Any ideas?
Svelte 3: Rethinking reactivity
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.
Promoted Link
Last Day: Udemy Courses for $11.99
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.
Other Awesomeness
7 adorable web development tricks
A set of short tips/tricks for working with JavaScript and CSS. Some are entertaining but essentially useless, while some of these I use every day. Worth a look through.
Why Page Speed Scores can be Dangerous
There’s been an increasing emphasis on the cost of JavaScript and improving web performance of late, which I think is all in all a very good thing, but this article highlights some of the dangers of focusing too much on page speed scores. Keep your eye on the prize: a fast and usable site, and let the tools be a guide not a goal.
Naming things to improve accessibility
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.
Building an AMP website with React & Next.js
Interesting to see higher level frameworks like Next.js working on making it simpler to build AMP pages with modern JavaScript frameworks, either exclusively or side-by-side with a full page.
A Designer’s Guide To Better Decisions
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.
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)