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!

This week’s content has a great mix. We’re maybe a little heavy on React articles in the JavaScript section, but hey so’s the industry lately. :) Also some great CSS articles (and a seriously mind blowing pure HTML+CSS game), and a super exciting announcement about expanded availability of fonts for the web. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Splicing HTML’s DNA With CSS Attribute Selectors

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!

Using Feature Detection, Conditionals, and Groups with Selectors

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.

CSS Layout cookbook

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.

Keys to maintainable CSS: Order

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.

THE MINE: NO JS, CSS ONLY ADVENTURE GAME

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.

JavaScript

React 16.6: React.memo() for Functional Components Rendering Control

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.

How to apply SOLID principles in React applications

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.

Top Takeaways from AngularMix 2018

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.

Understanding React Render Props and HOC

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.

33 concepts every JavaScript developer should know.

A nice index of resources about a range of JavaScript topics, from very basic elements of the language (what’s the difference between == and ===) to high level concepts like JavaScript design patterns, partial application and currying.

Other Awesomeness

WebAssembly’s post-MVP future: A cartoon skill tree

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.

Typekit is Adobe Fonts

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.

Hard Costs of Third-Party Scripts

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.

You're using <em> wrong

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 <i> and <em> may look identical, the semantics are quite different and that will probably result in different treatment by voice devices.

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