Frontend Links September 2025

Web app

• How does my Browser Score? Formerly known as The CSS3 Test. The name was no longer accurate, since it has been testing a lot more than CSS 3 for years now, and the new name gives it room to grow beyond just CSS.
• Spätzi, l'assistant contrastes Vérifiez et optimisez le contraste de vos couleurs selon les standards d'accessibilité (WCAG et APCA). Explorez les variations de couleurs en OKLCH pour créer des palettes accessibles.
• oklch.fyi Convert, generate OKLCH colors and create a unique color palette for your next app.
• HDR Gradients Wide gamut Color 4 compliant CSS gradient builder.
• Frame Zero Sketch -> Animate -> Share. Create motion in minutes. All in your browser, no sign-up.

JavaScript

• Image Compare Viewer Compare before and after images, for grading and other retouching for instance. Vanilla JS, zero dependencies.
• JSON Editor JSON Editor takes a JSON Schema and uses it to generate an HTML form. It has full support for JSON Schema version 3 and 4 and can integrate with several popular CSS frameworks (bootstrap, spectre, tailwind). Take a look at this example for a simple form submission case study.
• Over Type THE MARKDOWN EDITOR THAT'S A TEXTAREA. OverType is a transparent textarea over rendered markdown. Plain text simplicity, WYSIWYG beauty, zero complexity.
• Create a Draggable Element in JavaScript A common gesture we use all the time and take for granted is the ability to drag an element around on screen. Despite how common this drag gesture is, there is no good built-in support for making an element draggable on the web. This is doubly-so if we wish to go beyond the mouse and support things like touch! That's where this tutorial comes in. Over the next few sections, we'll look at a pure JavaScript-based solution (aka no jQuery) that will allow you to turn any boring element into one that you can drag around on your page. Onwards!

Articles

• Make any website load faster with 6 lines of HTML Ever clicked a link and had the next page appear almost instantly? That magical, speedy experience is becoming easier to achieve thanks to the Chrome Speculation Rules API. This new browser feature helps make navigation feel instant with just a few lines of HTML.
• You’re loading fonts wrong (and it’s crippling your performance) Fonts are one of the most visible, most powerful parts of the web. And yet: almost everyone gets them wrong.
• What are OKLCH colors? oklch is a newer color model that is designed to be perceptually uniform. This means that colors are much more accurate in terms of how humans perceive them and it makes working with them much easier.