Happy holiday season! It’s entering the crazy time - lots of traveling and family abound, so stay safe out there and enjoy!

The newsletter is celebrating by including some great articles on new frameworks, the AMAZING state of JavaScript 2017 survey results, and more.

I’m celebrating by running around like a chicken with my head cut off getting all of our travel and holiday stuff lined up, especially for the kids.

However you're celebrating, make sure you take the time to do it right. Cut off from work for a bit and enjoy the holidays!

Happy Friday!
KBall from ZenDev

P.S. I’ll still be publishing over the next couple weeks, but we may run a few fewer links each week while life is crazy with holidays, and I may be a bit slower to respond to any questions. Enjoy the season, and we’ll be back to 100% in the new year!

CSS & SCSS

ABEM. A more useful adaptation of BEM.

An alternate take on BEM inspired by Atomic CSS. I particularly like their approach to modifier classes - this slight deviation from the rigid “single class API” approach of BEM to me leads to a more intuitive, expressive syntax without causing undue complexity.


Say hello to iota.

This one is potentially a bit controversial. According to the website, iota is “A responsive micro-framework for the grid spec powered by CSS custom properties.” There’s lots of folks who say that CSS Grid obviates the need for any sort of grid framework, because the framework is now the spec. That said, the spec can feel a bit overwhelming I think there’s room for a toolkit that encapsulates common patterns… does iota fit that description? I’m on the fence - check it out and let me know what you think!


Specificity Visualizer

If you’re trying to improve the structure of your CSS… or even just understand what it is you’ve got, this can be very helpful! Just drop in your CSS and get a visualization of the specificity graph instantly.


What to use Grid Layout for? Some ideas.

This is exactly the type of post that I was hoping we’d see with CSS Grid starting to get wider usage - an investigation and ideation session around real use cases for Grid. We’re no longer just in the realm of the hypothetical and starting to be able to figure out exactly the problem domains where this is going to make all of our lives better.


Understanding CSS Layout And The Block Formatting Context

This is super cool! I’ve been doing CSS a long time and used some of the tools in this article, but it lays out the conceptual model for a “Block Formatting Context” within CSS in a way I’d never heard or had labeled for me before. Definitely improved my understanding of CSS.


JavaScript

The State of JavaScript 2017

The annual “State of JavaScript” report is out! And if you’re a data nerd like me, you’ll be spending a lot of time digging through. They have some great interactive graphics and LOTS of data drawn from more than 28,000 developers around the world. Did you “no framework” is more popular than Angular 1, Angular 2, or Vue? Only React outstrips it in popularity. Or that yarn has passed npm in usage? All this and more, in the report. Check it out!


Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.

If you learn well by reading code examples, this is an excellent resource. Close to 100 categorized JavaScript snippets for a range of different purposes. You could treat this as a reference for cut & paste solutions, but I think better still is to go through them (maybe one a day?) and understand exactly why and how they work, so next time you need one it’s just at your fingertips.


await vs return vs return await

This is a fun little exploration of the nuances of promises and the async/await functionality new to JavaScript. Worth a readthrough even if you think you’ve mostly got it down, make sure you know how each of these subtly different cases works.


Reshader: A micro, highly-customisable JavaScript library to get the shades of colors

Another bite-sized tidbit, this is a library for playing with manipulating colors. You put in a color, along with some options, and get back a palette of related colors. For a static color palette I’d use scss lighten and darken, but especially now that with CSS custom properties more dynamic palettes are looking easier and easier, this could prove very useful indeed.


What’s The Deal With Vue’s Virtual DOM?

Overview of the Virtual DOM that underlies Vue’s approach to views, what it is, why its used, and some of the benefits of use.


Other Awesomeness

Fronteers Conference 2017

The Fronteers Conference has put all of their talks online in a single Vimeo stream. I haven’t had the chance to do more than skim the titles yet, but there’s talks on everything from the history of CSS to WebVR and WebAssembly.


HTML5 Accessibility

It’s like caniuse but specifically for the web accessibility functionality in HTML5, giving you a quick and easy reference to what you can use where.


Notes on “How Browsers Work”

When you’re starting out, you can get away without understanding the underpinnings of your environment and focusing on operating above some abstraction. Just understanding HTML, CSS, and JavaScript without worrying about how the browser implements them. But as you start to get into more edge cases, or you trip on odd bugs or performance oddities, understanding how all the pieces actually work together becomes key.


Evolution of <img>: Gif without the GIF

This is very interesting! Talking through the benefits of being able to play video formats like mp4 within an image tag, as demonstrated by Safari Technology Preview. Far more performant than GIFs, but preserving the nice image semantics we’ve come to expect for gif-style animations, rather than forcing into video semantics.


Building an Inclusive Web: Why Accessibility Matters

A discussion of why accessibility is about more than just screen readers, but really about creating inclusivity for all. Covers different reasons one might need accessible content, and the reasons for creating it.