Friday Frontend: Happy Halloween Edition
If you have kids, you’re probably super aware that Halloween is coming up. (My five year old has been asking “Is it next week?” each week this month). It’s a fun time and really in many ways the beginning of the holiday season, leading into Thanksgiving and then Christmas. I’m looking forward to it, and hope you have some plans as well!
KBall from ZenDev
CSS & SCSS
Great article walking through how to use CSS to target based on the values in HTML attributes. Style based on things like link attributes, titles, and more. Very cool!
One of the great things about CSS is how resilient it is. Newer features can often be used without concern or any explicit feature detection as older browsers will just ignore them. Sometimes, however, you want to legitimately check support. This article goes through some of the ways you can do this, both with the
@supports at-rule, but also with some selector tricks.
I’m a huge fan of cookbooks as a way to share patterns and reusable code snippets. This one is great because it’s all pure CSS, no dependencies on any sort of framework or anything. Need to implement a card, a sticky footer, or some breadcrumbs? Take a look at these examples. Also a great first place to get involved contributing to MDN.
I’m a civilian survivor of the CSS property ordering wars; I don’t actually have a side in the discussion about the proper ways to order CSS properties, and in fact have found that it doesn’t make much of a difference for me personally. That said, I know a number of designers and developers who swear by their ordering rules, and most prefer something along the approach suggested in this post.
This is seriously mind blowing. A whole interactive game built using only HTML & CSS. Ok, that might not be true - the author used HAML and SCSS to generate HTML & CSS. 😉 But still, the end result is pure HTML & CSS with no JS, and it’s a whole freaking adventure game. Very very cool. This article explains the thinking behind it, but if you want to just jump to the game go ahead.
Short but sweet, highlighting a new feature in React 16.6 that allows you to reduce the amount of re-rendering child components do when parent components are rerendered.
This is a great article on how to think about component architecture and decomposing components. It’s using React for all of it’s examples, but I think the principles here could actually apply to any component oriented architecture, no matter which framework you’re using.
This is an interesting look at where the Angular world is going. The data about usage from crunchbase seems a little off to me based on what I’m hearing out in the ecosystem, but I can’t look into their data because the source is behind a paywall. :( Regardless, this shows some interesting things about what’s happening in the framework and what’s coming soon.
Great explainer of two very common and powerful techniques in React. What I particularly appreciate is that they don’t just talk about the upsides, but also some cautions about how not to use these patterns.
A super fun read of all the various improvements planned for WebAssembly, with Lin Clark’s amazing cartoon skills also applied to make it visual.
This is a HUGE announcement. Typekit is one of the largest (and easiest to use) repositories of fonts for the web, but it has long required an independent subscription. Adobe, who bought them a while back, just announced that they’re making all of Typekit’s fonts available to anyone who’s a Creative Cloud member. Both for desktop and web use. Given most designers are paying for at least some of the creative cloud, this is going to make fonts on the web way more prevalent.
Most developers I know fall in one of two camps when it comes to including 3rd party scripts: “eh, it’s not too big of a deal”, or “I HATE THEM BUT MARKETING INSISTS”. If you’re in the first camp, this might help change your mind, and if you’re in the latter this can give you some specific things to look for, measure, and highlight to make your case.
Ok, this may be a little bit pedantic, but I think as we’re moving into the world where more and more of our web content will be read by voice devices, it’s worth getting clear on the semantics. While in text
<em> may look identical, the semantics are quite different and that will probably result in different treatment by voice devices.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!