It’s possible that in my current mini love affair with Vue.js, I’ve been neglecting React. React has by far the widest adoption of any of the advanced JavaScript frameworks, and seems to be in the most demand by companies as well. So in this edition, I’m including an extra dosage of React articles - an introductory one, an important announcement, and a super cool advanced usage example with SVGs.

Of course there’s lots of other good stuff as well… CSS Counters, custom properties, an intro to GraphQL and more. Enjoy, and happy Friday!

Best,
KBall from ZenDev

CSS & SCSS

Counting With CSS Counters and CSS Grid

Did you know that you can count how many elements in your page match certain css conditions? This lets you do things like automatic labeling of headers with their respective number, and when combined with pseudoselectors this lets you see things like how many checkboxes are checked, and more. This has apparently been around since CSS 2, but I’ve never seen it before… it’s super cool, and this is a neat article about what you can do by combining it with CSS Grid.


Cheapass Parallax

I’m starting to think that CSS custom properties might make everything easier, but here’s an example about how you can use them with just a tiny amount of JavaScript (changing a custom property based on scroll position) to create diverse parallax effects. Neat!


Let’s make multi-colored icons with SVG symbols and CSS variables

This article takes one of my favorite attributes of SVGs - that they can be manipulated by CSS - and combines them with CSS custom properties to show you how to create super cool multi-colored icons from any set of SVGs (like say, the new FontAwesome 5 icons, which already come with a great “SVG with JavaScript” feature?)


How to create a fully responsive navbar with Flexbox

I like this article not only because I get excited about Flexbox, but because it walks you through the whole thought process of making a previously non-responsive component into a responsive one, using Flexbox properties the whole way. Flexbox is like magic. :D


Using Media Queries For Responsive Design In 2018

To level up your responsive thinking even more, this article includes not only all of the tools we have in our toolbox now to create responsive designs without media queries, but also what’s coming next in the CSS spec for media queries. Looking for things like the capacity to hover, and what type of pointer is being used… the future of responsivity is bright indeed.


JavaScript

The Beginner’s Guide to React

A great introduction to React, covering all of the core concepts and breaking them down and making things simple. Nothing really new here if you’ve been using React for a while, but if you haven’t tried it or are just getting started this will be a great resource.


Next.js 5: Universal Webpack, CSS Imports, Plugins and Zones

Next.js is a framework for “universal” React applications, applications that can render either server-side or on the client as a single page application. I’ve been using the Vue.js equivalent, Nuxt.js (inspired by Next.js), and can say that if you are in a situation where you need SSR, these frameworks are incredibly helpful. With their latest release, Next.js adds both some major configurability improvements and a cool new cross-application linking feature for playing nice with microapps.


Developing Games with React, Redux, and SVG - Part 1

I love this article because it takes another of my favorite advantages about SVGs - that they are code, just like HTML and can be manipulated by the same tooling - and shows how to build React.js controlled SVG images! They use this to create games, but seriously how cool is that! Using React to create interactive, dynamic vector imagery just like you would a regular website. Sweet!


10 things I love about Vue

Okay, so I’m a sucker for a pun and the title had me there. But honestly, even in an edition highlighting React, I would be remiss to exclude Vue.js as the rising star in the JavaScript world. While React still has the widest developer adoption and the richest ecosystem, Vue.js is rising fast and I’m betting on it to keep catching up.


How JavaScript works: The building blocks of Web Workers + 5 cases when you should use them

Session Stack has been doing a truly phenomenal job in their ‘How JavaScript works’ series detailing fundamental elements of Javascript, and this post is no exception. A great dive into how Web Workers work to let you offload cpu-intensive code from your main UI thread, along with some examples of where you might want to use them.


Other Awesomeness

An Introduction to GraphQL

GraphQL is one of those technologies that has been getting a lot of buzz, and I think is potentially prime to tip from “bleeding edge early adopters” to more mainstream use. It’s a total shift in the way we thinking about interacting with an API, but particularly for mobile devices where saving round trips and bandwidth is important, GraphQL’s model has some very large potential benefits. This article is a great introduction to GraphQL, and what it looks like for a Front-end developer wanting to use it.


Automatic visual diffing with Puppeteer

Visual details are hard to write tests for. Sure, we can do some cool tests that check if the right dom elements are in place, but how do we quickly make sure the CSS change we made doesn’t have some strange effect elsewhere in our application? (Assume with me for now that we’re in a legacy codebase that doesn’t follow good CSS practices). How about automatic visual diffing! Pretty cool, and this article shows you how to put it in place in no time flat.


An introduction to Progressive Web Apps

Progressive Web Apps are about to arrive on iOS, so if you’ve been holding back, now is the time to learn about them. What are they, why do they matter, what are the core features and benefits? All this and more, you’ll find in this article. :D


A Hacker’s Guide to WebAssembly

WebAssembly adoption and support is continuing to grow, with Firefox being the first browser to make it almost as fast to parse WebAssembly as to decode an image, and if you don’t know what the party is about yet you probably should start looking around. This is seriously going to change the web. This link is a solid video introduction to the technology and what it’s about.