Happy September! It’s been another busy week in the web world, and this week’s Friday Frontend is packed with goodies. We’ve got some great learning resources for Flexbox, CSS Grid, and vanilla JavaScript right along side some mind-bending SCSS tricks, examples of awesome React and Angular patterns, a big webpack announcement, and much much more!

Happy Friday!
KBall from ZenDev

P.S. If you’re trying to figure out how to bring your front-end web stack up to speed, or even what technologies to use, I consult and do training on front-end architecture, workflows, and frameworks. Schedule a quick 15 strategy call to discuss how I can help you: https://calendly.com/kbal11/front-end-strategy

CSS & SCSS

A Simple Cheatsheet for Flexbox

I love Flexbox. Absolutely love it. There’s even a GIF floating around the internet that got started because I was trying to communicate how much I love it. It’s powerful, simple, and trivially solves problems that have plagued web developers for a decade. What I love about this article is that it does a beautiful job of graphically demonstrating one of the trickiest concepts in flexbox - how the concept of axis changes as you change flex direction. The rest of the article is solid as well, but that particular piece is best in class, something I haven’t seen as well done elsewhere.


Breaking Down a CSS Grid Layout

Different folks learn different ways, and so as we all attempt to ramp up on the new amazingness that is CSS Grid, I’m continually on the lookout for articles that break it down differently. This post by Tim Wright on CSS Karma takes the approach of using a single example and deep diving through it as a way to explore the spec. He does a fantastic job in taking a simple CSS Grid layout with just 3 CSS properties and using it to break down 6 different concepts from CSS Grid into understandable, bite-sized chunks. A great article if you’re still just trying to wrap your head around CSS Grid and learn best by diving through particular examples.


Create a responsive layout with CSS Grid

While the previous article started from a simple CSS grid layout and broke it down, this one builds up a CSS Grid and Flexbox based layout from the ground up, piece by piece. If your preferred way to learn is a set of code steps that you can tinker with each way along, pop open this tutorial and codepen side by side and before you know it you’ll be creating beautiful layouts with CSS Grid.


So you need a CSS utility library?

I’m a big advocate of more fully-featured UI frameworks like Foundation, Material UI, or even Bootstrap (yeah, I said it - even as a core developer on Foundation I’ll advocate for Bootstrap over nothing). But sometimes you don’t need or want something like that, but you still want a bunch of pre-created css utilities to make your prototyping faster. These things are DIRTY, but sometimes you want something super quick and dirty, and if you’re in that boat this overview of available CSS utility libraries will be right up your alley.


Sass Maps, Loops, and CSS word scrambling!

After a set of more serious learning resources, this one is pure fun. Using some clever SCSS looping, pseudo-elements, and CSS Animations Charlie Marcotte implements a fun word scrambling animation effect, and takes you along for the ride! It’s structured as a tutorial, so you can learn a lot from it, but I recommend it for the sheer delight factor of checking out what he’s accomplishing with pretty minimal HTML & SCSS and absolutely no JavaScript.


JavaScript

10 JavaScript concepts you need to know for interviews

The name of this post is a little off-putting, but the content is phenomenally useful. Far from being just for interviews, the post provides a list of key language concepts in JavaScript, along with both a quick overview of the important high level idea and a link to a deep dive explainer. A phenomenal resource for either beginners to JavaScript or old hands wanting to brush up on core concepts.


Why and How to implement Web Notification API.

Smartphones have taught us to expect instant notification when something important to us happens, and increasingly applications don’t live in one environment or another, but we expect them to follow us from device to device. This is probably why web applications increasingly ask for the ability to notify us as well. The underlying technology they’re using to do this is the Web Notification API, and this quick and easy walkthrough on Hackernoon will show you how incredibly simple it is to get started using it.


Introducing downshift 🏎️ for React

This is a great article, because it not only introduces a very useful tool for anyone building a React application, but it uses it to walk through two interesting and powerful design patterns for building React components - the “Function as Child” pattern and the “Controlled Props” pattern. Even if you don’t ever use downshift (though honestly, who couldn’t use a great tool for simple, flexible, ARIA compliant typeahead/dropdown/autocomplete/etc components?), you should still read this article if you’re building any sort of state-driven components, because it will make you a better developer.


Angular — Applying Motion principles to a listing

I love animation as a way to improve interaction and bring a user interface to life. The Angular Animations module, built on top of the new Web Animations API, provides a straightforward way to create and chain animations within Angular components. This excellent post by Gerard Sans on the Google Developer Experts blog not only breaks down how to use the Angular Animations library, but also gives you some insight into a few of the principles behind creating effective animations. If you’re using Angular, you should definitely check this out!


JavaScript — WTF is ES6, ES8, ES 2017, ECMAScript… ?

If you’re like me you’ve been have trouble keeping up with the alphabet soup of JavaScript related terms… ES6, ES2017, JSX, NGRX - there’s so many different acronyms, where do we begin? This short and to the point article is not a bad answer to that question - it quickly covers the history of the JavaScript language, explains its relationship to ECMAScript, and dives into all of the various ES* acronyms. At least that part of the ecosystem will never confuse you again!


Assorted Other


Road to webpack 4

If you’re staying on the cutting edge of JavaScript development, chances are you’re using webpack. The tool’s adoption has been skyrocketing, and the rate of improvements has been going up correspondingly. In this post, Tobias Koppers (one of the core team members) outlines what’s in the roadmap for version 4 of the industry-leading module bundler. With amazing goodies like WASM support and first-class CSS support, you won’t want to miss out on what’s coming next! Check it out.


Human Friendly Colours using HSL

As web developers, we are used to thinking of our colors very mechanistically. We define our palettes in terms of numbers, we assign semantic meanings to those palettes, and then apply them as they fit within our layouts. Seldom do we just play with color, exploring it the way my kids explore their paints. But if you ever get the urge to just play with color, and your artboard is a web browser like mine is, you’ll get a lot out of this article. In it, Ada Rose Edwards introduces the HSL representation of color, and then walks through a number of delightful ways you can use it to play with colors and effects.


Managing CSS & JS in an HTTP/2 World

We’ve built an incredible amount of tooling and best practices around the constraints of HTTP technology. Latency is high and connections are limited, with each request opening a new connection, so we consolidate our CSS and JavaScript into a few megafiles. We use image sprites and load every image up front. So many headaches and unintuitive approaches to speed up performance based on the way the web has worked. But lo, HTTP/2 changes all of that, and in fact many of our best practices become antipatterns! Suddenly you can multiplex many requests over a single connection, so it is cheap to load many small files. Instead of sending everything you might possibly need over the wire in one bundle, you’ll be better off sending things only when you anticipate needing them. This is the future, and we need to start thinking about it… this article is a great introduction that explores some of what that future might look like.


Low Hanging PWA Fruit: Manifest Files and Service Worker Precache

Progressive web applications (PWAs) are a hot topic these days in the web development world. If you’re not familiar with them, essentially a PWA is a web application augmented with a manifest to become “installable”, and with some additional functionality that is able to run locally on a mobile device without a web connection. These are essentially a way to “bridge the gap” even further between web applications and native mobile applications, letting you get your web app on a user’s home screen and provide an improved experience when the user has no or a slow connection. In this focused walkthrough, you’ll learn about two of the easiest pieces to tackle to start moving your responsive web application into a PWA that can be installed on a user’s mobile phone.


What’s New in WCAG 2.1

Writing websites and applications to be accessible for differently abled folks and non-traditional devices like screen readers is becoming more and more important. With millions of people needing some form of accessibility assistance, not to mention many government websites around the world required to be accessible, this is a key area to stay informed on. Unfortunately, the spec is rather dry and challenging to read, and as things change it’s not always obvious what you need to update. Fortunately, there are resources to help. In this detailed breakdown, Adrian Roselli takes us through all of the changes in the Web Content Accessibility Guidelines (WCAG) update released earlier this month.


Happy Friday!