Bookmarks (162) clear filters

PixelCraft: A Pixel Art Editor — Tool installable as a PWA with offline use to build pixelated graphics and GIF animations (maybe useful for retro graphics). You can try it here.

Vue3 Icon Picker: An Beautiful Icon Picker Component for Vue — Try a demo here. The example is using Font Awesome and this is ported from a Vanilla JS version.

disableautofill.js: Disable Form Auto-Fill and Auto-Complete Functions — You need to be very careful about where you use things like this due to its effect on assistive tools.

Encrypt Storage: A Wrapper for More Secure Native Browser Storage — Not fool proof, as it’s still entirely frontend, but this uses crypto-js to encrypt the data before it’s stored.

Quick Menu: A 'Single Thumb' Mobile Friendly Navigation System — An interesting experimental UI element you might find useful for certain mobile use cases. Tap through for an animated GIF that shows it off.

blurhash-to-css: Convert a BlurHash to a CSS Object using TypeScript, Rust, and WebAssembly — A ’BlurHash’ is a compact representation of a placeholder for an image that can improve perceived load times. They’re often rendered using canvas but this makes it possible via CSS too. Example page.

github1s: One Second to Browse any GitHub Repo with VS Code — Just add 1s to any GitHub URL (before the .com) and you’ll get a Web-based VS Code-like view of the repo’s directory structure and files. Try an example here.

Cheval 2.0: 'Copy to The Clipboard' using JavaScript Without Writing JS — If you want to keep things really simple but offer a “copy to the clipboard” feature on your pages, this takes care of the whole thing once you’ve added some classes to a couple of HTML elements.

post-me: Communicate with Web Workers and Other Windows — A promise-based API for an app and its child workers or windows to expose methods and custom events to each other.

PACE: Automatically Add A Progress Bar to Your Site — View examples here. You can customize the color of the progress bar (which appears at the top of the page) and choose a style right on the page before downloading.

CodeCopy: A Browser Extension That Adds 'Copy to Clipboard' Buttons on Every Code Block — Works with GitHub (including gists), MDN, Stack Overflow (and other Stack Exchange sites), Medium, CSS Tricks, and more.

Tiny-Swiper: An 'Ingenious' JavaScript Carousel — A free carousel offering a ‘native-like experience’ for the web. Zero dependencies, written in TypeScript, no attribution required. Demos here.

Flappy.html: Flappy Bird in 205 Bytes — This is a really rudimentary version of Flappy Bird that uses HTML Canvas and has been 'code-golfed' to microscopic size.

Tailwind Starter Kit: An Open Source Extension for Tailwind CSS — This library extends Tailwind with 120 fully-coded CSS elements, four sample pages, and 16 dynamic JavaScript components. Homepage is here.

vue-dock-menu: A Dockable Menu Bar for Vue — Certainly an interesting UI concept here. It’s a menu bar, until you drag it to be a sidebar!

SuperTinyIcons: Almost 300 Popular Web Service Icons in Tiny SVGs — Minuscule SVG versions of common site and app logos, with hundreds to chose from.

Harold: A CLI Tool That Compares Frontend Project Bundles in Size — This tool makes it easier to compare bundle sizes by taking snapshots that you can then review to manage how a project’s size is changing.

web-ext: A Command Line Tool to Help Build, Run, and Test Web Extensions — "Initially, it will provide a streamlined experience for developing Firefox Extensions."