Hope you had a great week this week! This was my first week back from the end of year holiday break, and I can definitely feel the positive impact of the time off. It’s good to take some time for yourself every now and then, you come back so much more focused and productive.

This week’s Friday Frontend has a great set of resources in it - I particularly love the new flexbox guides, the in-depth guide to reliable JavaScript, and the post on evolutionary architecture, but it’s all good stuff.

Happy Friday!
KBall from ZenDev

P.S. - A little bit of personal news, I’ve just been accepted as a news editor for InfoQ.com on the subject of HTML5 and JavaScript. While this newsletter focuses more on learning & educational resources, my InfoQ articles are focused on new things happening in the industry. If you’re interested, you can follow me on InfoQ to see the news I publish there.

CSS & SCSS

Better Typography with Font Variants

A guide to how to control OpenType variants using CSS. Super cool stuff, and this is one of the most detailed breakdowns I”ve seen in terms of exactly what is accessible via CSS.


Level Up with These CSS Books in 2018

I know we tend to emphasize online resource here in this mailing list, but this is a nice list of actual dead-tree books for growing your CSS skills.


New flexbox guides on MDN

An interesting combo post by Rachel Andrew, one of the top CSS Grid Layout folks in the world, this contains both a list of new resources that she’s put together for learning and thinking about Flexbox, as well as some context for how she recommends thinking about Flexbox and CSS Grid and their relationship.


The Spectre Attack and Critical CSS

I’m still trying to wrap my head around this attack and all of the implications, and the state of the art seems to be changing daily as browsers and operating system vendors implement patches, but this seems pretty important if you’re using cookie-based techniques for critical CSS.


CSS Grid + Flexbox Solving Real-world Problems

I like this article because it’s not only tackling some real world problems and walking through how they did it, but it also handles fallback to older browsers and gives you some concrete examples of using a postCSS mixin to handle the varied types of fallbacks needed for different browsers.


JavaScript

Nuxt.js 1.0 is out

Nuxt.js is a framework on top of Vue.js that makes it simple and straightforward to create and deploy not only single page apps, but also universal (server side rendered + SPA post rendering) and static generated sites. I’ve been using Nuxt on one of my projects now for a couple of months and can definitely say it is awesome! If you’re working in or interested in Vue, this is a must see.


Six Tiny But Awesome ES7 + ES8 Features

Simple, straightforward, and to the point - this walkthrough highlights some of the new functionality available to us in newer versions of JavaScript. Read and learn - and if you’re using Babel, you can use these in your projects right away!


How to write highly readable React code — 10 coding style tips

While some of these tips are React specific, many are applicable to any JavaScript project you might take on. Definitely worth taking a look through.


Robust Client-Side JavaScript

In-depth online book on how to build reliable JavaScript, walks through many potential types of errors and how to mitigate them. An excellent resource!


Open Source —Learn JavaScript Objects with Object Explorer

A couple new awesome resources are available for learning about JavaScript, created by the great Sarah Drasner and explained in this article on Codeburst.


Other Awesomeness

What’s New in HTML 5.2?

Just last month, the new HTML 5.2 spec was finalized as a W3C recommendation. This article does a very nice breakdown of some of the key changes and what they mean to you as a developer.


A letter about Google AMP

Folks across the industry are pushing back against the level of control Google has over AMP, and the way they’re using it to grab control. This is a very thoughtful and well-written letter about the problems with the way AMP is currently run, with the ability for anyone to cosign. And early signs are the AMP team is listening. Let’s keep the pressure on!


How Airbnb is putting AMP at the core of its digital strategy

One of the reasons there is such a concern with AMP is that using it does allow for some key advantages. This is a great case study of how Airbnb has been using AMP, some challenges they ran into, and how they’ve adjusted.


Evolutionary Architecture

I love this approach to Architecture and development philosophy; circumstances change, tools change, and our knowledge changes, and so our architectures must constantly be changing and evolving as well. Also love the Martin Fowler quote: “The only thing a Big Bang rewrite guarantees is a Big *Bang*.” Hadn’t heard that before but I’m going to start using it.


Writing Automated Tests for Accessibility

This is interesting. I’d always thought about Accessibility testing as a very manual process, but this article makes the argument that pieces of it are amenable to automated testing, and shows how to get started.