Friday Frontend: Extra Dose of React Edition
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!
KBall from ZenDev
CSS & SCSS
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.
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
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.
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 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.
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!
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.
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.
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
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.