This week’s edition comes with an extra helping of newly native JavaScript capabilities. We see some awesome applications of the new template literal syntax, get a deep dive into the IntersectionObserver API, and see all of the new goodies that are now officially a part of ES2018.

Of course, along the way we also cover some cool CSS functionality, hear some exciting iOS/Safari news, and get a super cool deep dive into what it’s like to use the web through a screen reader.

Happy Friday!
KBall from ZenDev

P.S. I try not to do much in the way of self promotion on this newsletter, but I recently wrote a post for the folks at LogRocket talking about the Frontend Development landscape that you might be interested in: “The increasing nature of frontend complexity”

CSS & SCSS

CSS Grid + CSS Multi-Columns = ♥

We hear a lot about CSS Grid, but we haven’t heard as much about the CSS Multi Columns layout, even though it is tremendously powerful for a number of column layout problems, and has very wide browser support. This article quickly covers what columns are capable of, and then dives into something really interesting - how you can combine columns with grid to create some super powerful responsive layouts with just a few lines of CSS.


CSS Gridish

Now this is COOL! This new open source tool released by IBM takes as input a high level specification for a grid - breakpoints, number of columns, gutter sizes, number of rows and the like - and outputs everything you need to use that grid in your project. Not only does it output CSS Grid-based SCSS, but also Flexbox based fallback SCSS and a Sketch file with prebuilt artboards and grid settings for your designers! You can use it as a one-off grid generator, or integrate it straight into your build system. Super cool!


In Defense of Utility-First CSS

I tend to be a little skeptical of approaches like Atomic CSS, the poster child of “Utility-based CSS”, but I have to admit that this article makes some very strong points. In particular, the idea of starting with small, functionally composable classes and working up from there makes a ton of sense to me.


One File, Many Options: Using Variable Fonts on the Web

An excellent in-depth walkthrough on how to use the new variable fonts feature to manipulate multiple features of your fonts using only CSS. I’m excited about this one - browser support is starting to get there (Chrome and Safari yes, Edge and Firefox have previews available), and this is going to make fonts on the web so much more powerful (and lightweight!)


CSS Scroll Snap: What Is It? Do We Need It?

On the lower end of the browser support spectrum, check out this new CSS feature that was just released as a W3C Candidate Recommendation. Pure CSS scroll snapping into place? There are soooo many lines of javascript this could replace… :D


JavaScript

Stimulus 1.0: A modest JavaScript framework for the HTML you already have

From the creators of the Ruby on Rails application framework comes a digression from the trend towards more complex JavaScript frameworks owning more and more of the DOM. Taking a markedly different approach than full-dom-ownership tools like Angular and React, Stimulus aims to provide more structure for in-page interaction than tools like jQuery, while still progressively enhancing existing HTML rather than creating the HTML itself. Definitely interesting for those who long for the days of pure server-generated web applications while still wanting to add modern UI features to their applications.


HTML templating with vanilla JavaScript ES2015 Template Literals

I’m a big fan of templating libraries like Handlebars, even when you don’t need the power of a full-powered JavaScript Framework. This article is a fascinating look into how the new template literal syntax in ES2015 enables you to get most or all of the power of something like Handlebars without the size of that library. There are even libraries like lit-html that wrap aroudn this new power to add extra security guarantees and diff-based re-rendering while only weighing a tiny 2kb.


Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver

A bit on the long side, but worth it even if you just skip down and read the last section. This shows how you can implement lazy-loading of assets and lazy instantiation of JavaScript in just a few lines of code without having to worry about any complicated scroll handlers, positioning, or anything. Super cool!


🚀webpack 4 beta — try it today!🚀

The next major release of webpack is just around the corner, with the beta available today. Check it out for some major upgrades - zero config for simple projects, JSON tree shaking, webassembly support and more!


JavaScript: What’s new in ECMAScript 2018 (ES2018)?

TC39 just finalized what new features are officially in ES2018, and there’s some good ones in there. I’m already using object rest/spread in all of my projects (courtesy of Babel), and can barely remember how I lived without it. Then you add in async/await, more powerful regular expressions, and boy is JavaScript a fun place to be these days. :)


Other Awesomeness

Safari 11.1

While still only available in beta/developer builds of iOS 11.1 and macOS 10.13.4, the changelog for the next version of Safari is up and BOY does it get me excited. The biggest item on the list is support for the Web Payments API, which means mobile websites will be able to let folks check out with Apple Pay, but there’s also support for Service Workers (PWAs on iOS here we come!) and much much more.


PWAs are coming to iOS 11.3: Cupertino, we have a problem

As exciting as PWA support on iOS is, it’s not all rainbows and sunshine. There are some major differences from how PWAs behave on Android, and some definitely challenges and drawbacks. Read through this article for a sense of the gotchas and what to look for.


Part 2: How to stop me harvesting credit card numbers and passwords from your site

After a scarily plausible post that went ridiculously viral talking about how third party dependencies could quietly and almost untrackably harvest sensitive information from your site, developer David Gilbertson talks about some sensible ways to protect yourself and your customer’s information without having to read the source of every npm package you ever use on your site.


A Tale of Two Rooms: Understanding screen reader navigation

This article was incredibly eye-opening for me. While I’ve been interested in accessibility for a while, I always conceptually start with keyboard navigation. I like to use the keyboard to navigate a lot (I’m a coder, I live in my terminal, etc…) and so translating it to the web seems natural. But this article gave me a truly different perspective on the subject of accessibility as it comes to visibility - what the experience of the web is like for someone who is visually impaired. Wow. Definitely go read it.