After a few issues without as much CSS Grid Layout, this week we’re back with no less than three AMAZING CSS grid resources. I don’t think it was coordinated, but when Rachel Andrew (one of the top CSS Grid experts) publishes an in-depth walkthrough in the same week that Wes Bos (great front-end teacher) launches a CSS grid course, it’s a good week for CSS grid.

That said, there’s other good stuff in here too - we’ve got a closures tutorial for JavaScript that is a must read if you don’t already understand closures, and for folks like me who get excited about really geeky tech the continued evolution of Firefox Quantum is AWESOME!

Happy Friday!
KBall from ZenDev

CSS & SCSS

How Big Is That Box? Understanding Sizing In CSS Layout

Smashing Magazine sure made a good move when they brought Rachel Andrew on to be editor-in-chief. The quality of their articles about CSS fundamentals and CSS Layout (both Flexbox and Grid) have been off the charts. This is another excellent read, take the time to go through it.


Recreating the GitHub Contribution Graph with CSS Grid Layout

Nifty walkthrough with lots of code snippets and a final example in codepen. A great example of how using named grid areas can make your CSS more semantic and explicitly match the design you’re recreating.


Learn CSS Grid with Wes Bos

Continuing our CSS-grid theme, there is a newly released FREE video course by Wes Bos. I haven’t taken any of Wes’s courses yet, but I know a lot of folks who have and they all give him extremely high marks. Check it out!


Using CSS Clip Path to Create Interactive Effects

Wow is this some cool stuff. Using CSS Clip path to create programatically controlled effects on an image, using pure CSS. I particularly love the example that morphs highlighted portions of the image based on hover.


CSS Naming Conventions that Will Save You Hours of Debugging

One of the simplest and most entertaining introductions to BEM that I’ve ever seen. If you’re not already using BEM or a similar naming convention, you have to see this. And if you are, check it out anyway for the cartoons. :P


JavaScript

JavaScript — Learn & Understand Closures

Closures are a key concept to truly understanding how to read and write JavaScript code. They’re one of the key features of the language, and if you don’t already feel rock solid on them do yourself a favor and spend 10 minutes with this article.


Angular Classes with NgClass

A dive into the varied options for setting and manipulating classes within Angular. Seems simple, but the details are important, and Todd makes it perfectly clear what the pros and cons of each approach are.


Introducing React Easy State

This is interesting - it’s an alternative take on state management in React (where Redux has become pretty much the standard). To my eye, Easy State behaves much closer to how VueX does in the Vue world - using reactivity on a mutable store rather than purely mutable state. I think this approach is a bit less intimidating for newer coders, and will be interested to see if this gets any traction.


The Ultimate Guide to JavaScript Frameworks

This is a really cool resource if you’ve got some time to poke around and explore. Many JavaScript Framework reviews/guides will only talk about the top popularity frameworks, but while this one does highlight the “big 3” of React, Vue, and Angular it also surfaces a monstrous 50+ additional frameworks and libraries, each with at least a brief description about what it is and what makes it unique. For maximum marketability focus on the big 3, but for learning potential of obscure and different techniques you could do far worse than browsing through some of the lower down options.


The only NodeJs introduction you’ll ever need.

We stay pretty focused on the front end here in this newsletter, so why an article on Node? Both because if you’re familiar with JavaScript from the front end Node is probably the smallest jump to server-side development and because increasingly all of our front end tooling is written in Node. This article is focused on creating a simple webserver in Node, but does a nice job of explaining the core programming model as well - the more you know, the easier it will be to start jumping in and truly manipulating your build system.


Other Awesomeness

Firefox 58: The Quantum Era Continues

I’m absolutely loving all of the innovation and improvements coming out of Firefox lately. Moving painting off thread is huge, and the new WebAssembly compiler approach is AMAZING. (So amazing I wrote an article about the performance improvements folks are seeing and some of the implications). So cool to see what’s happening in the browser world.


How To Create a Living Style Guide

Coded style guides are amazing, and in my opinion a MUST if you’re going to scale your front-end team out at all. There are almost always translation errors between designers and developers, so unless your designers are doing all of your code, or you are able to have a designer review every single component before it goes live, having your design conventions encapsulated in code is a must. This is a great starter tutorial for how to get there.


TweenDeck

This is cool! Especially for folks who like to use web technologies for presentations, and want to add a little pizazz. TweenDeck leverages the Greensock animation libraries to make it super easy to animate between html & css based slides. Check it out!


Productive Debugging

There’s a dearth of good write-ups on how to debug properly, and I’ve found it to be one of the most important skills I’ve ever developed in my career. I spend hours working with junior engineers trying to help them learn to debug better. This article isn’t perfect - I’d love it if it went into more depth - but it does give you a great set of tips to think through as you learn to debug.


Mental Illness in the Web Industry

Mental health and mental illness is a hugely under-discussed issue in the tech world, and I’m thrilled to see a publication as prominent as alistapart having an open conversation about it. We need to be open about mental illnesses as real and treatable diseases, and for those lucky enough to not suffer from them learn how to support those who do.


Happy Friday!

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!