Welcome to (almost) winter! I don’t know about where you are, but over here in the Bay Area we just started getting colder weather and rain. This last week and change I’ve started breaking out winter clothes, reviving winter foods, and all sorts of other fun stuff. Good to know that even with climate change, we still get some seasonality!

Whether it’s just getting cold where you are, or has been cold for a while, or you’re in the southern hemisphere and it’s starting to heat up, this week’s Friday Frontend has a bunch of articles you can curl up with in a corner and some hot tea. Enjoy!

Happy Friday!
KBall from ZenDev

P.S. - Next week I’m going to be hanging out at QConSF - I’m hosting an AWESOME track on “Web as Platform” on Wednesday, with some phenomenal speakers talking about everything from Web Assembly to WebVR.  Are you going to be there? We should meet up! If you’ll be around, hit REPLY and let me know, we can find a time to say hello.

CSS & SCSS

Flexbox and Grids, your layout’s best friends

Grid vs Flexbox? No, Grid + Flexbox = ❤️. This is article walks through some of the myths around Flexbox and Grid and shows you how to use them together to make beautiful layouts.


The Contrast Swap Technique: Improved Image Performance with CSS Filters

Woah - reduce the contrast on your images to make them smaller and faster to load, and then add the contrast back in with a css filter. This is some crazy stuff! Is it worthwhile? Probably not for most cases, but if you’re really trying to cut your images to fit in a bandwidth budget, this is a nice technique to try.


The CSS attr() function got nothin’ on custom properties

This will completely blow your mind. The possibilities arising as we get CSS custom properties supported across more and more browsers are truly incredible.


The CSS Holy War & How To Think Beyond Dogma

I’ve been known to participate in the “holy war” between different approaches to CSS, but I think the author’s thoughtful approach and push back on dogma is a much needed voice. We have a set of tools, and there are infinite problems, and we should choose the tools appropriate for the problems we need to solve.


Managing Font Loading CSS Was Painful  — Not Anymore

Short and sweet - a postCSS plugin that transforms your font CSS to make it easy to implement multi-stage font loading.


JavaScript

Version 5.0.0 of Angular Now Available

This is a big deal! A new major version of Angular, with a brand new Universal State Transfer API for better SSR support, more powerful reactive forms, and much more. If you’re in the Angular ecosystem, you gotta check this one out!


The 14 JavaScript debugging tips you probably didn't know

Debugging is one of the most important but least taught skills for advancing from junior to more intermediate and advanced development skills. This walks you through some of the most crucial tools you have at your fingertips for JavaScript debugging with the chrome debug tools.


How JavaScript works: Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path

He’s not kidding when he calls this a deep dive, but boy if you ever wanted to really dig into WebSockets and how they work, this is a good article to read.


VueJs: Introduction to Vuex

If you’re familiar with Redux, Vuex is pretty darn similar, but it has some subtle differences that make it worth digging into. In the Vue project I’m working on now, I’ve found that the ease with which you can translate async tasks into Vuex with actions really is making my life interacting with an API easier.


Tracing method calls via Proxies

A sweet, short, and to the point tutorial on how to use ECMAScript Proxies to trace method calls. Getting familiar with proxies is a good thing to do in general - they are how Vue.js handles a lot of its magic - and this gives you a very tangible example to start digging in.


Other Awesomeness

The Definitive Guide To SEO In 2018

Backlinko has become the go to resource for SEO, and they just published their guide to SEO in 2018. If you’re touching that side of the business, this is a MUST read.


Why I cancelled my ReactiveConf talk

Sexism and racism are serious problems in our industry, and codes of conduct are one of the most effective ways that we can counter them at our events. But what happens when the conference organizers themselves don’t follow the code of conduct?


Web Typography: Designing Tables to be Read, Not Looked At

An excellent breakdown of how to make your tables readable, not just pretty. Includes both design insights and the css & JavaScript to make it happen.


<input type="country" />

Gosh would I love to be able to simply enter <input type=”country” /> and not have to worry about all of the overhead and decisionmaking that goes into allowing users to select countries today. If only it were so simple… but technology decisions are not made in a vacuum, this is a fascinating look by one of the editors of the HTML 5.3 spec into the geopolitical challenges that are raised by this seemingly simple proposal.


Right-To-Left Development In Mobile Design

As a native English speaker, it’s hard for me to wrap my head around all of the changes that need to happen when you swap to a right-left language like Hebrew or Arabic. Tools like flexbox make our lives a bit easier, but it’s still a lot to wrap your head around. If you want to try, this is a great walkthrough of the considerations involved and how they play out into implementation.