This week’s newsletter has an extra helping of the state of modern of JavaScript. From a runthrough of all the new language features in the last 3 years, to a cartoon explainer of ES modules, to a deep dive into the ‘why’ behind modern JavaScript frameworks - we’ve got it all.

Of course there’s more than that - a super cool article on building responsive grids, per-component theming, some big PWA news, and much much more

Happy Friday!
KBall from ZenDev

P.S. In case you missed it, I recently published a course on manipulating SVGs as code! Learn how to create interactive icons and a photo editor, all using simple CSS and JavaScript combined with the power of SVG, and you can get FREE access with this link. Check it out: https://www.skillshare.com/classes/SVGs-as-Code-Interactive-Icons-and-Easy-Image-Manipulation/641984422?teacherRef=47092

CSS & SCSS

Solved With CSS! Colorizing SVG Backgrounds

A bite-sized post on how to use CSS filters to change colors on background images. While I’m more of a fan of using injected SVGs to handle this sort of thing (it gives you a lot more power), the super cool thing here is that you can apply CSS filters even when the images are being applied as background images, which opens up a whole new range of possibilities.


Super-powered layouts with CSS Variables + CSS Grid

Another nice example of how powerful CSS is getting. Having gone through the headache of implementing responsive grid systems before CSS grid before, I love how incredibly simple this problem has become. Implementing a flexible, responsive, and semantic grid in just 50 lines of SCSS? Amazing!


Contextual styling with custom properties

Super cool use case for custom properties: Creating themes that can be applied at the level of components using data attributes. Want to reuse the same components in in different parts of the site with different themes? Merely apply the right attribute. Want to mix and match between themes within the same page? Just as simple. Wow!


Working with the new CSS Typed Object Model

With the coming of Houdini, CSS is in the process of undergoing a dramatic upgrade and systematization of its internals, particularly with relation to how to interact with CSS using JavaScript. The new CSS Typed Object Model dramatically improves the API for interacting with style via JavaScript, allowing for proper unit manipulation, bounds checking, and error handling instead of interactions entirely being via opaque strings. It’s not supported on many browsers yet, but this gets me super excited about the future.


Ruby Sass to be put to pasture on March 26, 2019

There has long been a discrepancy in the Sass world, with the Ruby implementation being canonical (and perpetually ahead), while the C++ version shipped as libsass was used in far more implementations (including probably the widest adopted, node-sass). The 2 have had opposite challenges, with the Ruby implementation being far easier to develop but far harder to use, and the C++ implementation having the opposite problem. Now there’s a new player in the ecosystem, Dart-sass, which appears to have a nice mix of the benefits with fewer of the drawbacks, so the Ruby implementation is going away.


JavaScript

Here are examples of everything new in ECMAScript 2016, 2017, and 2018

Extensive article showing examples of all 18 new features added to the JavaScript language in the last 3 years worth of specifications. You’ve probably already encountered most of them, but worth a look through just to make sure.


13 Noteworthy Points from Google’s JavaScript Style Guide

It’s always interesting to know how the leaders in the field are doing things, and Google’s JavaScript Style Guide is definitely worth a read through, but if you want the cliffs notes version this is a good place to start. These best guidelines definitely align with practices I’ve adopted as well.


The deepest reason why modern JavaScript frameworks exist

A dive into one of the primary value propositions of frameworks like Angular, React, and Vue: The challenge of keeping a UI in sync with state. A nice explainer of both the major problem and the way in which these frameworks resolve it.


ES modules: A cartoon deep-dive

Lin Clark’s cartoon-assisted explainers are not to be missed. She’s done some amazingly enlightening introductions to complex subjects like Firefox’s new CSS engine, and she’s back again with a great overview of ECMAScript modules - what they are, what problems they solve, how they work and how to use them.


A Brief Intro to Using Vue.js with NativeScript

The first in a series of 4 articles on using Vue.js with NativeScript to create native mobile applications using Vue. NativeScript has different pros and cons than React Native, but if you’re as excited about Vue as I am, and ever have the desire to dabble in native applications, the ability to use Vue for that domain without the headaches of Cordova (aka phonegap) is incredibly exciting.


Other Awesomeness

Calling all web developers: here’s why you should be using Firefox

A great rundown of the unique features and benefits of newer versions of Firefox. I have to admit I still mostly use Chrome, but I’ve been starting to use Firefox more and more for auxiliary tasks, and have been very happy with its performance to date. Combining the new performance with some wicked-cool development tools and the lack of a corporate overlord who makes money by tracking me… definitely has an appeal.


Modern Frontend Developer in 2018

One of the best ‘how to get started in Frontend development’ posts I’ve seen recently, with a great flow chart and step by step breakdown. For those who are newer to this world, I definitely recommend taking a look through here. It’s also a bit intimidating just how much there is, but the article provides a nice step-by-step approach.


Progressive Web Apps on iOS are here 🚀

With the latest iOS release, a ton of the underlying technologies enabling PWAs have suddenly arrived on iOS. This article breaks down what exactly is possible, what the differences are between PWAs on iOS as compared to Android, and much more. Go check it out!


Data Tables

A truly deep dive into what makes a table displaying data accessible to those who are using screen readers and other assistive technology, while still making them responsible and beautiful for those using desktop and mobile devices.