Olivier 3lanc

Frontend Links May 2026

2026-05-07T00:00:00Z

Tools

Mokkit Create animated, transparent device mockups that convert. Ready in seconds, no design skills needed.
SLITSCANNER Image and Text Distortion Art Creation Tool. Free slit-scan art creation tool. Works in your browser and on your phone. Distort, warp, and drag images, text, and selphies with this tool that simulates moving objects on a flatbed scanner.
Mono Sketch An ASCII graph drawing app.
Charcuterie Charcuterie is a visual explorer for Unicode. Browse characters, discover related glyphs, and explore scripts, symbols, and shapes across the standard.
BDFM Bitmap generator
Fancy Frames Use clip-path: shape() to create a lot of CSS-only fancy frames. Get an optimized & modern code in no time.

Fun

100 Jumps Hold to charge, release to jump. Land on 100 platforms to win — but one miss and it's over. How many attempts will it take you?

Learning

Hacker Laws or Hacker Laws 🧠 Laws, Theories, Principles and Patterns for developers and technologists.
Laws of Software Engineering A collection of principles and patterns that shape software systems, teams, and decisions.

Javascript

liquid glass A liquid glass effect library for the web. Apply realistic glass refraction, blur, chromatic aberration, and lighting effects to any HTML element using WebGL shaders.

Fonts and graph

DataType Datatype is a variable font that turns text into charts.

Frontend Links April 2026

2026-04-05T00:00:00Z

IDE

VSCOdium Free/Libre Open Source Software Binaries of VS Code. Microsoft’s vscode source code is open source (MIT-licensed), but the product available for download (Visual Studio Code) is licensed under this not-FLOSS license and contains telemetry/tracking.

Tools

slim.sh Give your localhost a local or public URL. Turn localhost:3000 into https://app.test with path routing, HTTPS, HMR support, or get a public url without deployment.
OpenScreen Create stunning demos for free. Open-source, no subscriptions, no watermarks, and free for commercial use. An alternative to Screen Studio.
Tooscut Professional video editing, right in your browser. A powerful NLE editor with GPU compositing, keyframe animation, and real-time preview. No installs required.
visual-json The visual JSON editor. Schema-aware, embeddable, extensible.
archive.today archive.ph allows you to create a copy of a webpage that will always be up even if the original link is down

Icons

flag-icons 🎏 A curated collection of all country flags in SVG — plus the CSS for easier integration

Frontend Links March 2026

2026-03-23T00:00:00Z

CSS

Modern CSS Modern CSS code snippets, side by side with the old hacks they replace. Every technique you still Google has a clean, native replacement now.
OAT Ultra-lightweight, zero dependency, semantic HTML, CSS, JS UI library. ~8KB min+gz.
Base.css The web's first multipurpose classless stylesheet, with the most semantic rules, for complete customization and personalization of a webpage.

Tools

Convert PNG and JPG to SVG. Convert PNG and JPG to SVG.
Convert to it! Truly universal online file converter. Private, on-device conversion across mediums.
The Page Speed Optimization Tool Website speed analysis and optimization
EZTrimmer Cut videos online for free — trim, split and export in seconds. No signup required.
TheColorAPI The best color conversion, naming and scheming API out there.
Detect AI-generated images at scale Our AI image detector automatically detects images from popular AI generators. No watermarks needed.

Fun

Glitch Art Maker 100% client-side. No upload. Process local video or webcam in real time and export WebM.

JavaScript

simple-datatables A lightweight, extendable, JavaScript HTML table library written in TypeScript and transpilled to Vanilla JavaScript. Similar to jQuery DataTables for use in modern browsers, but without the jQuery dependency.

Articles

Approximating contrast-color() With Other CSS Features You have an element with a configurable background color, and you’d like to calculate whether the foreground text should be light or dark. Seems easy enough, especially knowing how mindful we ought to be with accessibility.
The 49MB Web Page If active distraction of readers of your own website was an Olympic Sport, news publications would top the charts every time. I went to the New York Times to glimpse at four headlines and was greeted with 422 network requests and 49 megabytes of data. It took two minutes before the page settled. And then you wonder why every sane tech person has an adblocker installed on systems of all their loved ones.
No time to learn React

Frontend Links February 2026

2026-02-18T00:00:00Z

JavaScript

ChartGPU Beautiful, open source, WebGPU-based charting library
lazy-brush Smooth drawing with mouse, finger or other pointing device
image-js Image processing and manipulation in JavaScript
Animating with Mobile Accelerometers

Tools

Wiretext — Unicode Wireframe Design Tool A spatial design tool where everything renders as Unicode box-drawing characters. Create wireframes, diagrams, and mockups. Share as text.
drawmote Draw remotely with your phone
Programming Fonts Test drive programming fonts online: the definitive list of fonts for code
Sweetfont The sweetest way to find Google Fonts. Explore Google Fonts by personality, vibe, and style using interactive controls. Find your perfect typeface.
ease-master Design motion that feels real. The ultimate easing visualization and generation tool for modern frontend development.
SVG Studio Inspect, edit, and optimize SVGs in the browser
All SVG Icons Browse and download 250,000+ free SVG icons for your projects that are free to use and customizable. Copy Raw SVG code or download as PNG, SVG, JSX or Base64 formats. Alternative of Flaticon, Iconmonstr, SVG Repo.
Griddy Icons Griddy Icons is free open-source icon family with unique utilitarian vibe

Articles

It’s hard to justify Tahoe icons
Open close dialog without JavaScript More invoker commands, and more reasons not to use JavaScript please
Beyond the Mouse: Animating with Mobile Accelerometers
Performance-Optimized Video Embeds with Zero JavaScript

Frontend Links January 2026

2026-01-23T00:00:00Z

JavaScript

picknplace.js A proof of concept of a viable drag and drop alternative
relative-time-element Web component extensions to the standard <time> element.
css-color-component a modern color picker for the web with support for all spaces.
floating-ui A JavaScript library to position floating elements and create interactions for them.
media-chrome Custom elements (web components) for making audio and video player controls that look great in your website or app.

Tools

Regex Vis Regex visualizer & editor, make the regular expression easier.
Iconify Design All popular icon sets, one framework. All popular icon sets, one framework.
city-roads Visualization of all roads within any city.

Articles

25 years of Wikipedia From dial-up days to now, travel through Wikipedia's history. Today, Wikipedia is the backbone of knowledge on the internet—but everything has to start somewhere. For Wikipedia, that was a blank website and a dream.
Web Almanac 2025 HTTP Archive’s annual state of the web report
20 Best Data Visualization Libraries for Web in 2025 How to pick between lightweight and powerful libraries without analysis paralysis. Which library handles your data size (hint: not all of them). Real performance benchmarks that matter.
How to Favicon in 2026 Three files that fit most needs. It’s time to rethink how we cook a set of favicons for modern browsers and stop the icon generator madness. Frontend developers currently have to deal with 20+ static PNG files just to display a tiny website logo in a browser tab or on a touchscreen. Read on to see how to take a smarter approach and adopt a minimal set of icons that fits most modern needs.
How to detect Safari and iOS versions with ease in 2026

Video

Incredible 🤩🤩

Frontend Links December 2025

2025-12-21T00:00:00Z

Articles

Accessible Names and Labels: Understanding What Works and What Doesn’t This article explores how to correctly define and associate labels and accessible names for UI elements to ensure that all users, including those relying on assistive technologies, can understand the purpose of each control.
A complete guide to the HTML number input

Tools

browser-window Used in demos as a way to fake a Safari-esque web browser window.
Color Palette Pro - A Synthesizer for Color Palettes Generate customizable color palettes in advanced color spaces that can be easily shared, downloaded, or exported.
Printable Grid Paper I made this because every time I searched for a printout of graph paper I only get weird low-res JPGs with URLs making it ugly. Or I could buy a pallet of graph papaer on Amazon. Then you gotta know how many inches or centimeters it needs to be and I dunno, I'm not a scientist. So I made this app with a few options you can play with.
Project Wallace - The best CSS analyzer out there. Project Wallace is a set of CSS analyzers that check your complexity, specificity, performance, Design Tokens and much more. And all of that in a single web app.
Cursor Effects Old-school cursor effects for your browser built with modern JavaScript
Canisuse Embed Embed the CanIUse compatibility table in your site

Fun

VOLE.wtf 🐹⁉️ working towards a dafter internet The home of Styscraper, DayBrix, Dog Poo Golf, Penga, Kick the Ball Back, Crisp Sandwich Day and oodles more.
Interactive Scientific Simulations Interactive scientific explorations - Physics, biology simulations and more
Cool native HTML elements you should already be using Learn how to use native HTML to implement features like modals & accordions, image captions, grouped lists and more.

Frontend Links November 2025

2025-11-15T00:00:00Z

Tools

Harmonizer OKLCH Color palette generator for UI
Dither Me This Use this tool to reduce the file size of an image… but in a stylish old-school way. It uses dithering to reduce the colors in an image, and places dots to emulate the missing shades. Dithering is used to display images on screens with limited colors palettes — it has the modern advantage of making web pages load faster. Upload an image and click the preset buttons to see what it can do.
Free OG Image Generator Create beautiful OG Images, Twitter/X Header Images, Blog Featured Images & more for free, in simple clicks.
Embed PDF files without the pain A lightweight, customizable PDF viewer that works seamlessly with any JavaScript project. No dependencies, no hassle.
Make Graph Create Beautiful Charts and Graphs Online. Transform your data into stunning visualizations with our free, powerful chart maker. No downloads, no sign-ups—just beautiful charts in seconds.
Lucide Icons Beautiful & consistent icon toolkit made by the community.
Obra Icons A simple, consistent set of icons, perfect for user interfaces.
Complete Toolkit for JSON & Data Processing Professional JSON platform with 40+ free tools. Format, validate, convert to CSV/XML/PDF. Features AI-powered error fixing, API testing, and code generation. ✓ No signup required
JustGage ustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.
ASCII Drawing Board Set a brush (almost any unicode character), canvas size and export art as a text file.
Explore color as we see it Discover how the OKLCH color model works. Learn, experiment and create more consistent and perceptually uniform color palettes.
raw.githack.com CDN for your source code A decade proven way to serve files from source code hostings with proper Content-Type headers
spoilerjs A framework-agnostic web component for creating beautiful spoiler effects with Telegram-inspired particle animations.
Kagi Liberate your search. Free of ads. Free of surveillance. Free of noise. With Kagi, you are the customer, not the product.

Articles

Modern CSS Round-Out Tabs Chris Coyier: Quite a while back I made a set of “round out” tabs, where the literal tab part of the UI would connect to the content below with a rounded edge that flared out as it connected. A bit tricky of a situation, even now! That old school solution used four additional elements per tab. Two to place a square on the bottom edges of the tab, and then larger circles to hide everything but the flared part.

Frontend Links October 2025

2025-10-03T00:00:00Z

Tools

Tooooools Tooooools (exactly 6 o's), free minimalist and lo-fi effects for image and video processing online.
CrawlerCheck Instantly check if Google bots and AI crawlers can access your website.
PicTiler Transform Your Photos Into Mosaics
MediaBunny Pure TypeScript media toolkit for reading, writing, and converting video and audio files, directly in the browser
Lossless Cut The swiss army knife of lossless video/audio editing
ASCII Flow Infinite ASCII diagrams, save to Google Drive, resize, freeform draw, and export straight to text/html.

JavaScript

Dual Range Input Native dual range input in 60 lines of JavaScript.
Range Slider Element 🎚 A cross browser customizable and accessible <range-slider> web component
Peak.js JavaScript UI component for interacting with audio waveforms
Shiki.js A beautiful yet powerful syntax highlighter

Articles

Scrubbing videos using JavaScript JavaScript part is actually pretty easy, it is more about preparing the video file correctly.
Promises From The Ground Up Great article to learn JavaScript Promises

Fun

Messenger It's a small planet, but someone's gotta make the deliveries.
Visual Phenomena & Optical Illusions 152 Visual Phenomena & Optical Illusions with explanations by Michael Bach. Optical illusions don’t “trick the eye”, nor “fool the brain”, nor reveal that “our brain sucks”, … but are fascinating!

Frontend Links September 2025

2025-09-12T00:00:00Z

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.

Upscayl examples with old photos

2025-09-01T00:00:00Z

Testing awesome Upscayl AI image upscaler (or https://upscayl.org) with its built-in different models. Here are the before and after results with few old photos.

Defaults models are:

upscayl-standard: Suitable for most images.
upscayl-lite: Suitable for most images. High-speed upscaling with minimal quality loss.
high-fidelity: For all kinds of images with a focus on realistic details and smooth textures.
remacri: For natural images. Added sharpness and detail. No commercial use.
ultramix-balanced: For natural images with a balance of sharpness and detail.
ultrasharp: For natural images with a focus on sharpness.
digital-art: For digital art and illustrations.

Upscayls allows to add custom models. The following examples includes defaults and two of this additional set of custom models:

4xLSDIRplusC
4xNMKD-Superscale-SP_178000_G: NMKD Superscale - Perfect upscaling of clean (artifact-free) real-world images.

Roselend 1 with upscayl-standard

Roselend 1 with upscayl model: upscayl-standard 4x - Original file Upscaled file

Roselend 1 with upscayl-lite

Roselend 1 with upscayl model: upscayl-lite 4x - Original file Upscaled file

Roselend 1 with high-fidelity

Roselend 1 with upscayl model: high-fidelity 4x - Original file Upscaled file

Roselend 1 with remacri

Roselend 1 with upscayl model: remacri 4x - Original file Upscaled file

Roselend 1 with ultramix-balanced

Roselend 1 with upscayl model: ultramix-balanced 4x - Original file Upscaled file

Roselend 1 with ultrasharp

Roselend 1 with upscayl model: ultrasharp 4x - Original file Upscaled file

Roselend 1 with digital-art

Roselend 1 with upscayl model: digital-art 4x - Original file Upscaled file

Roselend 1 with LSDIRplusC

Roselend 1 with upscayl model: LSDIRplusC 4x - Original file Upscaled file

Roselend 1 with NMKD-Superscale-SP_178000_G

Roselend 1 with upscayl model: NMKD-Superscale-SP_178000_G 4x - Original file Upscaled file

Roselend 2 with upscayl-standard

Roselend 2 with upscayl model: upscayl-standard 4x - Original file Upscaled file

Roselend 2 with upscayl-lite

Roselend 2 with upscayl model: upscayl-lite 4x - Original file Upscaled file

Roselend 2 with high-fidelity

Roselend 2 with upscayl model: high-fidelity 4x - Original file Upscaled file

Roselend 2 with remacri

Roselend 2 with upscayl model: remacri 4x - Original file Upscaled file

Roselend 2 with ultramix-balanced

Roselend 2 with upscayl model: ultramix-balanced 4x - Original file Upscaled file

Roselend 2 with ultrasharp

Roselend 2 with upscayl model: ultrasharp 4x - Original file Upscaled file

Roselend 2 with digital-art

Roselend 2 with upscayl model: digital-art 4x - Original file Upscaled file

Roselend 2 with LSDIRplusC

Roselend 2 with upscayl model: LSDIRplusC 4x - Original file Upscaled file

Roselend 2 with NMKD-Superscale-SP_178000_G

Roselend 2 with upscayl model: NMKD-Superscale-SP_178000_G 4x - Original file Upscaled file

Roselend 3 with upscayl-standard

Roselend 3 with upscayl model: upscayl-standard 4x - Original file Upscaled file

Roselend 3 with upscayl-lite

Roselend 3 with upscayl model: upscayl-lite 4x - Original file Upscaled file

Roselend 3 with high-fidelity

Roselend 3 with upscayl model: high-fidelity 4x - Original file Upscaled file

Roselend 3 with remacri

Roselend 3 with upscayl model: remacri 4x - Original file Upscaled file

Roselend 3 with ultramix-balanced

Roselend 3 with upscayl model: ultramix-balanced 4x - Original file Upscaled file

Roselend 3 with ultrasharp

Roselend 3 with upscayl model: ultrasharp 4x - Original file Upscaled file

Roselend 3 with digital-art

Roselend 3 with upscayl model: digital-art 4x - Original file Upscaled file

Roselend 3 with LSDIRplusC

Roselend 3 with upscayl model: LSDIRplusC 4x - Original file Upscaled file

Roselend 3 with NMKD-Superscale-SP_178000_G

Roselend 3 with upscayl model: NMKD-Superscale-SP_178000_G 4x - Original file Upscaled file

Roselend 4 with upscayl-standard

Roselend 4 with upscayl model: upscayl-standard 4x - Original file Upscaled file

Roselend 4 with upscayl-lite

Roselend 4 with upscayl model: upscayl-lite 4x - Original file Upscaled file

Roselend 4 with high-fidelity

Roselend 4 with upscayl model: high-fidelity 4x - Original file Upscaled file

Roselend 4 with remacri

Roselend 4 with upscayl model: remacri 4x - Original file Upscaled file

Roselend 4 with ultramix-balanced

Roselend 4 with upscayl model: ultramix-balanced 4x - Original file Upscaled file

Roselend 4 with ultrasharp

Roselend 4 with upscayl model: ultrasharp 4x - Original file Upscaled file

Roselend 4 with digital-art

Roselend 4 with upscayl model: digital-art 4x - Original file Upscaled file

Roselend 4 with LSDIRplusC

Roselend 4 with upscayl model: LSDIRplusC 4x - Original file Upscaled file

Roselend 4 with NMKD-Superscale-SP_178000_G

Roselend 4 with upscayl model: NMKD-Superscale-SP_178000_G 4x - Original file Upscaled file

Wrapping up

Even for a single category of picture, there is no single "best" model. For each image, the model giving the best results depends on what you expect and what the model is made for.

Frontend Links August 2025

2025-08-21T00:00:00Z

Desktop software

Upscayl Upscayl lets you enlarge and enhance low-resolution images using advanced AI algorithms. Enlarge images without losing quality. It's almost like magic! 🎩🪄
LocalSend LocalSend is a free, open-source app that allows you to securely share files and messages with nearby devices over your local network without needing an internet connection.

JavaScript

syntax-highlight element Syntax Highlighting using the CSS Custom Highlight API. Test status npm version npm downloads jsDelivr hits (npm) The code is highlighted without having to wrap a bunch of <span> elements around each token, thanks to Prism's tokenizer and the CSS Custom Highlight API.
JSON Blob JSON Blob was created to help parallelize client/server development. Mock JSON responses can be defined using the online editor and then clients can use the JSON Blob API to retrieve and update the mock responses. Blobs that are not accessed in 30 days will be removed.
JSON Server Get a full fake REST API with zero coding in less than 30 seconds (seriously).

Frontend Links July 2025

2025-07-24T00:00:00Z