Menu

W3C News

Masking GIFs with other GIFs

December 3rd, 2019

The other day, Cassie Evans tweeted a really neat trick that I’ve never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful GIF and place it on top of a monochrome one: See the Pen Masking gifs with other…

W3C opens Technical Architecture Group (TAG) election

December 3rd, 2019

The W3C Advisory Committee having nominated four individuals, is invited today to vote until 10 January 2020 for three seats in the W3C Technical Architecture Group (TAG) election. The TAG is a special working group within the W3C, chartered under the W3C Process Document, with stewardship of the Web architecture. Some aspects of its mission…

Having a Little Fun With Custom Focus Styles

December 2nd, 2019

Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI and asks you to remove it. Or you might even be looking to remove it yourself. So you do a little research and find out…

Simplified Fluid Typography

November 29th, 2019

Fluid typography is the idea that font-size (and perhaps other attributes of type, like line-height) change depending on the screen size (or perhaps container queries if we had them). The core trickery comes from viewport units. You can literally set type in viewport units (e.g. font-size: 4vw), but the fluctuations in size are so extreme…

Testing React Hooks With Enzyme and React Testing Library

November 29th, 2019

As you begin to make use of React hooks in your applications, you’ll want to be certain the code you write is nothing short of solid. There’s nothing like shipping buggy code. One way to be certain your code is bug-free is to write tests. And testing React hooks is not much different from how…

First Public Working Draft: TTML Profiles for Internet Media Subtitles and Captions 1.2

November 28th, 2019

The Timed Text Working Group has published a First Public Working Draft of TTML Profiles for Internet Media Subtitles and Captions 1.2. This specification defines two profiles of [ttml2]: a text-only profile and an image-only profile. These profiles are intended to be used across subtitle and caption delivery applications worldwide, thereby simplifying interoperability, consistent rendering…

First Public Working Draft: Use Cases and Requirements for Decentralized Identifiers

November 28th, 2019

The Decentralized Identifier Working Group has published a First Public Working Draft of Use Cases and Requirements for Decentralized Identifiers. This document sets out use cases and requirements for a new type of identifier that has 4 essential characteristics: decentralized: there should be no central issuing agency; persistent: the identifier should be inherently persistent, not…

When your dependencies break your software, wouldn’t you like them to fix it?

November 27th, 2019

We at Allianz Global Digital Factory (GDF) use the tooling of Angular to keep our ecosystem in sync. Our main asset is our user interface (UI) component library, that enables teams in Allianz to use ready-made UI components for building their apps. The main techniques we use are Schematics and ng update. This is something…

The Power (and Fun) of Scope with CSS Custom Properties

November 27th, 2019

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set them in declaration blocks like –size: 1em and use them as values like font-size: var(–size);, they differ from preprocessor variables (e.g. they cascade), and here’s a guide with way more…

iOS 13 Broke the Classic Pure CSS Parallax Technique

November 27th, 2019

I know. You hate parallax. Do you know what we should hate more? When things that used to work on the web stop working without any clear warning or idea why. Way back in 2014, Keith Clark blogged an exceptionally clever CSS trick where you essentially use a CSS transform to scale an element down…