W3C News

Making Sense of react-spring

August 4th, 2020

The animation is one of the trickier things to get right with React. In this post, I’ll try to provide the introduction to react-spring I wish I had when I first started out, then dive into some interesting use cases. While react-spring isn’t the only animation library for React, it’s one of the more popular…

The Making of: Netlify’s Million Devs SVG Animation Site

August 3rd, 2020

Building a Vue App out of an SVG The beauty of SVG is you can think of it, and the coordinate system, as a big game of battleship. You’re really thinking in terms of x, y, width, and height. <div id=”app”> <app-login-result-sticky v-if=”user.number” /> <app-github-corner /> <app-header /> <!– this is one big SVG –>…

A Lightweight Masonry Solution

August 3rd, 2020

Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood how…

SVG Title vs. HTML Title Attribute

July 30th, 2020

You know the title attribute? I can do this: <div title=”The Title”> I’m a div with a `title` </div> And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get… Which, uh, I guess is something. I sometimes use it for things like putting an expanded…

Getting the Most Out of Variable Fonts on Google Fonts

July 30th, 2020

I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono, and it just launched officially on Google Fonts! Wanna try it out super fast? Here’s the embed code to use the full Recursive variable font family from Google Fonts (but you…

Working Group Note: Web App Manifest — Application Information

July 30th, 2020

The Web Applications Working Group has published a First Public Working Group Note of Web App Manifest – Application Information. This document is a registry of supplementary members for the Web App Manifest specification that provide additional metadata to an application manifest. This metadata can be used in a digital storefront or other surfaces where…

style9: build-time CSS-in-JS

July 29th, 2020

In April of last year, Facebook revealed its big new redesign. An ambitious project, it was a rebuild of a large site with a massive amount of users. To accomplish this, they used several technologies they have created and open-sourced, such as React, GraphQL, Relay, and a new CSS-in-JS library called stylex. This new library…

A Bit on Web Component Libraries

July 28th, 2020

To my mind, one of the best use cases for Web Components is pattern libraries. Instead of doing, say, <ul class=”nav nav-tabs”> like you would do in Bootstrap or <div class=”tabs”> like you would in Bulma, you would use a custom element, like <designsystem-tabs>. The new Shoelace library uses the sl namespace for their components….

Want to get better at code? Teach someone CSS.

July 28th, 2020

A friend of mine recently asked me to teach her to code. She was an absolute beginner, having no idea what coding really involves. I decided to start where I started: HTML and CSS. Using CodePen, we started forking Pens and altering them. Soon, a learning path started to unravel. The aim of this article…

Bold on Hover… Without the Layout Shift

July 27th, 2020

When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That’s because the bold text is often larger and takes up more space. Sometimes that doesn’t matter, like a vertical stack of links where the wider/bolder text doesn’t push anything anyway. Sometimes it does matter, like…