What would the end of the year be like without retrospectives? We’ve got a few included in this week’s Friday Frontend, along with an AWESOME css-only game demo and some great tutorials. Enjoy!

Happy Friday!
KBall from ZenDev

P.S. I had a double helping of performing childcare this week while my wife was out of town. If you have kids in your life and have someone else helping to take care of them, remember to thank them. Kids are HARD WORK! Software is so much easier. :P

CSS & SCSS

Manageable Utility Systems with CSS Variables

A great walkthrough of the difference between SCSS variables and the new CSS variables, and how they enable vastly simplified utility classes.


How the Roman Empire Made Pure CSS Connect 4 Possible

This is both a fascinating demonstration of the power of CSS, but also a tour de force of different CSS properties and techniques that make it possible to create a powerful interactive game with just CSS and not a single line of JavaScript.


Animating Border

You would think that something as conceptually simple as animating the border on a button would be easy to do, right? But no… it’s actually very hard to do right. This article on CSS tricks goes through the different approaches and their pros and cons.


Debugging CSS Grid Layouts With Firefox Grid Inspector

As with any new technology, key to learning how to use CSS Grid is learning how to debug it. The Firefox Grid Inspector is the hands down best tool for doing this, and in this article on Smashing Magazine you can get a great introduction to what it enables.


Cascading Web Design with Feature Queries

The concept of cascading web design - of creating a progress enhancement of designs implemented using a combination of the standard CSS cascade and feature queries - is fascinating. It requires a totally different way of thinking about design, fluid instead of static, but I think this is the future.


JavaScript

Jargon-Free Webpack Intro For VueJS Users

The title on this is misleading. It’s not very Vue specific, in fact it’s not even entirely webpack specific, and while it is very low-jargon I think a couple pieces may have crept in. That said, this is a great beginner-level breakdown of what module bundlers (webpack in particular) are doing and how to think about using modular javascript. If you haven’t made the jump yet and are still confused by it, check this out.


Why (and how) to use eslint in your project

I wouldn’t dream of doing a large JavaScript project without linting, and even for small projects these days I typically add it. When a language gives you as much rope as JavaScript does, you need tools like linters to keep yourself from hanging. Here we have a introduction to eslint and how to integrate it into your project.


Javascript and Functional Programming: An Introduction

If there’s one thing that has improved my programming skills more than anything else, it has been learning about and experimenting with functional programming. This article is an introduction to what that means in JavaScript.


Getting Started with Data Visualization — Build Your First Chart With D3.js

I recently did a data visualization project that involved some D3… and it left me realizing how little I know relative to how powerful D3 is. This is an incredibly powerful tool, with the potential to make building complex SVG graphics as simple as basic DOM manipulation.


A Look Back at the State of JavaScript in 2017

A panel of experts answers questions about the most important/excited developments in JavaScript over the past year. Many of these have been covered in this newsletter before, but still a useful touchpoint to see what folks are finding useful and look into things to learn about.


Other Awesomeness

How to Start With Static Sites

I wish there was more in this article that there is, but it’s a good place to start, with an overview of what a static site is and a bunch of links off to your options.. I’m a big advocate of using the minimum possible technology to solve your problem, and for many problem domains a static site is exactly the right approach. In fact, the number 1 reference in the article, Jekyll, is what I use for zendev.com


The Future of JavaScript Will Be Less JavaScript

This is a fascinating discussion of the way the front-end ecosystem is heading. While I’m not sure I agree with his statement as it stands (I believe pure/native JavaScript solutions are here to stay), the underlying premise is that the front-end ecosystem is about to get MUCH more diverse. Not only is babel enabling innovation within and on top of the JavaScript language, but the WASM toolchain opens the door wide to all sorts of new stuff. Exciting!!!


A Front End Developer’s Guide to GraphQL

GraphQL is definitely on my to-learn list. It keeps coming up in discussions about “hot” new technologies for web development, and definitely has a ton of potential. This article is a great step by step introduction, with working examples on a web platform that shows you not only how to interact with a GraphQL API, but how to build one using only JavaScript.


Introducing Turbo: 5x faster than Yarn & NPM, and runs natively in-browser

The JavaScript package management ecosystem has always been a bit of a cluster#*@! Things have improved somewhat with Yarn passing up NPM and completely obsoleting bower. That said, this is exciting - a package manager that promises to cut install speeds by 5x and the size of node_modules by 2 orders of magnitude. Crazy! I can’t wait to try it.


A recap of front-end development in 2017

It’s crazy to think about all of the things that have happened in the last year. This is an excellent and thorough recap of the biggest trends in front-end development in 2017.