Menu

W3C News

Rendering Spectrum

November 24th, 2020

Here are the big categories of rendering websites: Client: ship a <div id=”root”></div> and let a JavaScript template render all of it. Static: pre-render all the HTML. Server: let a live server process requests and generate the HTML response. They are not mutually exclusive. A website could statically pre-render 75% of it’s pages (say, blog…

First Public Working Drafts: WoT Archtiecture 1.1, Thing Description 1.1, Discovery, Profile

November 24th, 2020

The Web of Things (WoT) Working Group has published the following four First Public Working Drafts: Web of Things (WoT) Architecture 1.1 describes the abstract architecture for the W3C Web of Things based on a set of requirements derived from use cases for multiple application domains. This specification describes a superset of the features defined…

Creating UI Components in SVG

November 23rd, 2020

I’m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes and yet, still has elements, like text, links, and aria labels available to you. You can accomplish some of…

DRY-ing up styled-components

November 23rd, 2020

I like working with styled-components. They allow you to write CSS in your JavaScript, keeping your CSS in very close proximity to your JavaScript for a single component. As a front-end developer who loves to dissect a web page and break it down into reusable components, the idea of styled-components brings me joy. The approach…

A Dynamically-Sized Sticky Sidebar with HTML and CSS

November 20th, 2020

Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a position: sticky into your CSS ruleset, set the directional offset (e.g. top: 0) and you’re ready to impress your teammates with minimal effort. But sticky positioning can get a bit…

Color Theming with CSS Custom Properties and Tailwind

November 19th, 2020

Custom properties not only enable us to make our code more efficient but allow us to work some real magic with CSS too. One area where they have huge potential is theming. At Atomic Smash we use Tailwind CSS, a utility class framework, for writing our styles. In this article, we’ll look at how custom…

Creating WebGL Effects with CurtainsJS

November 18th, 2020

This article focuses adding WebGL effects to <image> and <video> elements of an already “completed” web page. While there are a few helpful resources out there on this subject (like these two), I hope to help simplify this subject by distilling the process into a few steps: Create a web page as you normally would….

Copyediting with Semantic HTML

November 17th, 2020

Tracking changes is a quintessential copyediting feature for comparing versions of content. While we’re used to tracking changes in a word processing document, we actually have HTML elements capable of that. There are a lot of elements that we can use for this process. The main ones we’ll look at are <del>, <ins> and <mark>….

A Complete Guide to CSS Gradients

November 16th, 2020

The background-size property in CSS is one of the most useful — and most complex — of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases. Here’s a basic example: html { background: url(greatimage.jpg); background-size: 300px 100px; } That’s an example…

Mixing Colors in Pure CSS

November 16th, 2020

Red + Blue = Purple… right? Is there some way to express that in CSS? Well, not easily. There is a proposal draft for a color-mix function and some degree of interest from Chrome, but it doesn’t seem right around the corner. It would be nice to have native CSS color mixing, as it would…