It’s the last day of August, the end of summer is upon us, and I definitely am feeling it. The weather has started to turn cooler, my kids have started up in school, and I’m shifting back into normal life after doing a lot of traveling.

I don’t have a video for you this week, but I do want to thank all of you who answered the survey I sent out.

There’s a lot of you who want more about front-end architecture, so I’m going to work on getting more of those resources into the newsletter going forward, along with our usual helpings of CSS and JavaScript tutorials and other awesome stuff.

Enjoy!
KBall from ZenDev

CSS & SCSS

Super-Powered Grid Components with CSS Custom Properties

I loved this walkthrough because it not only covered how to create responsive components using Grid, but somehow made the concept of manipulating component versions utilizing custom properties of the parent click for me in a way that it hadn’t before. Creates a super elegant way to write CSS for components that have many variations!


Using feature detection to write CSS with cross-browser support

This article not only talks about the many different ways that we can approach CSS feature detection and how those have evolved (I definitely started my career doing server-side browser sniffing to set body classes), but also talks through what scenarios we might not even need feature detection at all. Nice!


A Tale of Two Buttons

There’s a lot of words spilled about the benefits of modularity in components vs the cascade in CSS, but I haven’t seen too many articles that really walk you through step by step how to best take advantage of the cascade. This does exactly that.


The Benefits of Using CSS Grid for Web Form Layout

Interesting tutorial from a couple of angles. First off, it’s not looking at layouts as a whole but really just focusing down on the annoying things that are forms. 😝But secondly, it takes progressive enhancement approach to applying grid - rather than doing a grid implementation and then providing fallbacks, it takes a float-based layout and then uses grid to upgrade it where possible.


CSS Grid in 45 Minutes!

A 45 minute talk by one of the great online teachers in our business, Wes Bos. It’s very well done - if you like learning by video, check it out.


JavaScript

Protecting Angular v2+ Routes with CanActivate/CanActivateChild Guards

Using guards for routes is a very simple yet powerful way to handle things like role-based access control for different portions of your application. This article is about how to do this in Angular, but you can apply the same concept in Vue Router or via an NPM package with React Router.


Structuring a React Project — a Definitive Guide

This is an opinionated take, and there are a few pieces I disagree with (it touts Bit, which I’m pretty skeptical of, but it is on their blog so I guess they had to do some promotion). That said, most of what is in this guide matches consensus I’m starting to see grow in terms of how to architect React projects, and whether you agree with everything or not you’ll probably learn something from it.


Errors handling for Vue class components

An interesting tutorial along two dimensions. First because it digs into error handling within Vue, but even more so because it introduces and uses the decorator pattern that is a proposed part of the JavaScript language (currently at stage 2 in the 4 stage process to becoming official). Decorators are not something many JavaScript developers are familiar with, but as this article shows they can provide a very elegant solution to many problems.


Understanding Execution Context and Execution Stack in Javascript

A bit dense, but if you really want to understand how your tooling works this will be helpful. Goes deep into the semantics of the language and what is actually happening behind the scenes as functions are compiled and run.


Checklist for Writing Highly Reusable Components in React and Vue

A very useful list of ideas to consider. Not sure I’d call it a checklist, because not every one is applicable to every component, but definitely a good list of things to read through and think about as you design your components.


Other Awesomeness

SVG Filters Playground

Super cool visual playground to explore all the power that SVG filters give you. Play around, add filters and take them away, muck with the values, and in the end copy out your filter code! And of course, everything is demonstrated on a kitten because the internet is for cats. Very nice. I think combining feColorMatrix and feConvolveMatrix is my favorite…. Ghost kitten!


WorkerDOM: Concurrency for JavaScript programming with the DOM

This was the biggest announcement that happened in this year’s JSConf.US, a library coming out of Google (specifically the AMP project) that lets you imitate the DOM and do DOM manipulation in a web worker. For applications and frameworks that do a lot of heavy DOM manipulation, this will let them offload all the intermediate work to a second thread and only use the main thread for the final update. Very very cool!


The power of progressive enhancement

Great article taking you through the process of thinking of an application via a progressive enhancement approach. I’m intrigued by the note that web components and Vue components are similar and give you a straightforward way to give default functionality in a custom HTML element. I haven’t done much with this, but given the drive towards serverside rendering of frameworks I wonder if we’ll start to see a return to “progressive enhancement” experiences even within a heavy JavaScript-first environment. Intriguing...


How My Team Accidentally Moved to TypeScript and Loved It

I must admit I’ve been a bit slow to the TypeScript bandwagon, but recently had a good friend strongly advocating it to me, and am seeing more and more adoption lately. In a talk at JSConf.US, Laurie Voss the COO of NPM shared the statistic that a staggering 46 percent of NPM users are using TypeScript! If you’re curious what all the hype is about, this is a great post that talks about some of the benefits seen from using TypeScript.


Babel 7 Released

A new major release of Babel is a pretty big deal, and while I think increasingly Babel configuration is getting handled by frameworks and boilerplates, it’s probably worth taking a look at all the changes and starting to get ready for the new stuff.