I’m trying something new today - recording a quick video to go with the newsletter. It’s just a quick 2 minutes about what got me excited this week in the Frontend world. Check it out, and let me know what you think, either by hitting REPLY or even better leaving a comment on the video.

Enjoy!
KBall from ZenDev

CSS & SCSS

The CSS Grid Layout vs CSS Frameworks Debate

“Does it still make sense to learn/use CSS Frameworks now that we have CSS Grid and Flexbox?” This article dives into this common question and does a good job of breaking down some of the reasons why it absolutely still makes sense to learn and use a CSS Framework. Personal opinion - I think the next iteration on CSS Frameworks is going to take advantage of the power of CSS Grid to make grids less structural and more component-like, giving you super-rapid access to a range of best practice patterns.


A Deeper Look at Generic Font Names in CSS

What’s actually going on when you specify font-family: Arial, Helvetica, sans-serif; in your CSS? What are the range of available generic fonts like that sans-serif? How do browsers decide what to show for a generic? If you’ve ever asked questions like these this article will help you out. Plus, check out the new up-and-coming font families like emoji and math!


A polyfill for the CSS Paint API, with special browser optimizations.

I’ve previously included some articles about Houdini, the constellation of upcoming APIs that enables JavaScript-based definition of CSS properties. This opens the possibility of reaching a state where we never have CSS properties we can’t use - as new ones are defined, they could be polyfilled into browsers until the browsers can implement, similar to how we use Babel for new JavaScript features. The first piece of Houdini to be released is the paint API, currently available only in Chrome, but looky here, a polyfill for that API!


How to create a simple CSS loading spinner & make it accessible

I’m in the old guard that’s always used gif-based spinners, and I somehow hadn’t connected the dots that CSS animations are supported broadly enough now to enable pure CSS-based spinners. This is really nice! A step by step guide to creating a reusable scss mixin that is also accessible.


JavaScript

Wielding Pure Functions in JavaScript and Function Composition

I don’t think anything has improved my programming more than learning the principles of functional development. The concept of purity is one of the key building blocks in that type of workflow, and this is a nice walkthrough of what it is and how it works, showing you how to use pure functions to create more powerful and reusable JavaScript.


Add `v-model` Support to Custom Vue.js Component

Adding v-model support is a key part of creating components that “feel” like native Vue components and are easy for other folks to pick up and use out of the box. Even if you’re not building components to share, understanding how v-model works under the covers will help you write better Vue code.


First Look: Angular Ivy

I don’t personally follow Angular as closely as I do React and Vue, but there’s some interesting stuff going on here with this new renderer called Ivy. The ability to compile ahead of time and only ship exactly the parts of the framework that are needed for any particular app is pretty darned cool. This article is a great introduction to the new renderer, for those more familiar with Angular there are also a great pair of posts on the Angular in Depth blog.


How React Reconciliation Works

An excellent dive into the guts of how React’s virtual DOM implementation actually works. This article will help you write more performance React code, and debug when things aren’t working quite how you like. Bonus: Vue’s virtual DOM implementation is pretty similar, so the concepts you learn here should help you if you’re using Vue as well.


Data-Forge

I’ve always had python as my go-to language for data processing, but following Atwood’s law anything that can be written in JavaScript will eventually be written in JavaScript, and here we have a super-powerful looking set of data wrangling and analysis tools written in JavaScript.


Other Awesomeness

What if JavaScript wins?

A fascinating look at some of the community and network effects occurring around the JavaScript ecosystem. We have seen in many domains - social networks, cities, marketplaces - that there are compounding returns to an increase in network size, leading to runaway growth and “winner take all” dynamics. Is the same thing happening with programming languages and JavaScript? I’m not 100% convinced, but I think it is an idea well worth understanding and considering.


Hello tensorflow

One of the simplest and easiest to understand introductions to Machine Learning I’ve ever seen, with live demos right in the browser and annotated example code all written using JavaScript. Thank you Tensorflow.js!


The Slow Death of Internet Explorer and the Future of Progressive Enhancement

We are slowly growing towards a future of entirely evergreen browsers, and more and more companies are completely cutting support for Internet Explorer. That said, I kinda love the idea of serving up websites without CSS and JS completely for users in old versions of IE. Would your site still work like that? Would users still be able to read your content? Worth considering...


Managing SVG Interaction With The Pointer Events Property

SVG! As longtime readers know, I loooooove SVG. This article goes through in great detail how to use the ‘pointer-events’ attribute to manage which parts of an SVG document or element can receive events from a pointing device such as a mouse, trackpad, or finger.


ReasonML vs TypeScript – First impressions

I’ve had ReasonML come up in conversations a couple of times recently, and hadn’t really looked into it yet, but this article has changed that. It looks like a really sweet language, particularly for those who like functional programming! The native function currying, immutability, and pipe operator are enough to sell me… it looks like it’s simple to interoperate with JS packages too… now I just need a project to try it on. :D