Mozilla’s vision for the evolution of the Web

The Web is an enormous asset and Mozilla is committed to protecting it and making it better. Powerful economic and technological forces have combined to make the Web the way it is today. Making it better won’t be easy and we can’t do it alone. Mozilla’s vision for the evolution of the Web →

CSS color-contrast() – Target Contrast Ratio Demo

Nice demo by Daniel Yuschick, showing how color-contrast() does its thing. Using the controls you can change the target contrast using a keyword or a custom value. Good use of Custom Properties there as well! 👨‍🔬 To check this demo you’ll need Safari Technology Preview 122+ with the CSS color-contrast() Experimental Feature enabled.

Using FormData And Enhancing Forms With JavaScript

Jason Knights dissects a form that’s: not a form relies entirely on JS to handle the form submission He then takes his own approach that uses an actual <form> that can be submitted, along with some extra JS sprinkled on top to prevent a full reload. By using PROPER name=”” in the markup and a …

Olympe mono

Olympe is a monospace font revived from an Olympia typewriter. The first weight, regular, is based on the original weights of the font that was on this machine, and the light weight, close to hairline actually, has been designed from scratch, with a heavy punctuation, because who doesn’t like a bit of contrast? When I …

Corset — Cascading Binding Sheets

Matthew Philips made something odd-looking: a JavaScript framework that lets you add DOM bindings using a CSS-like syntax. Say your framework of choice generates this markup: <div class="counter"> <button type="button" class="increment">Increment</button> <button type="button" class="decrement" disabled>Decrement</button> <div class="result"> Count: <strong class="count">0</strong> </div> </div> Using Corset, you can then add behavior as follows: import sheet, { mount …

A Proposal For Type Syntax in JavaScript

A very interesting Stage-0 proposal is to bring optional and erasable type syntax to JavaScript. The proposed syntax looks like this: function add(a: number, b: number) { return a + b; } The type hints wouldn’t be used by JS itself though — so you won’t get a runtime error if you pass something other …