Issue #568 (CSS/HTML, Media, Uncats)06/06/24
Get Training at the .NET Epicenter: Microsoft HQ!
Take your frontend and full-stack skills to new heights at VSLive! Developer Conference – the premier training event for mastering the latest web dev tech. Expert & Microsoft insider-led sessions on .NET, Generative AI, Blazor, and much more give invaluable insights elevating frontend/full-stack expertise.
Stay ahead with hands-on workshops, real-world apps, and best practices for high-performance, responsive web experiences. Don't miss this chance to learn from the best, network with your peers, and future-proof your career. Exclusive offer: save $900 off standard pricing with code WEBTOOLS.
Join us August 5–9 →
|
CSS and HTML Tools
AI CSS Animations — A neat little AI-based tool that allows you to generate complex CSS animations using a prompt. Just describe the animation to apply to an element and this will generate the keyframes code (limited free features).
matcha.css — A stylesheet to apply sensible defaults to most HTML elements, for simple sites and quick prototypes, with the option to create a custom stylesheet where you only include the styles you want.
Restyle — A zero-config CSS-in-JS solution for React, with features like no runtime, isomorphic styling, and on-demand style loading. Note that it currently requires a Canary release of React which uses style hoisting.
Get Training at the .NET Epicenter: Microsoft HQ! — Exclusive offer: save $900 off standard pricing with code WEBTOOLS. Join us for VSLive! Developer Conference August 5-9 @ Microsoft HQ in Redmond, WA. SPONSORED
Screen Ruler — A Chrome extension to quickly and easily measure sizes, distances, margins, and padding of any element on any web page.
Type Fluidity — An online tool to calculate fluid typography sizes using the CSS clamp() feature, with options to customize min/max font-size, viewport, and preview with your choice of Google font.
|
fullwindcss — A extension for Tailwind CSS that allows you to add 1001 color shades per color, instead of the limited 11 shades that Tailwind offers by default.
selectlist-polyfill — A polyfill for the selectlist element proposed by Open UI, to extend the customization of the HTML select element, which historically has had limited styling and features.
Deblank Colors — Instantly generate personalized color palettes, simply enter your prompt and see your color palette come to life on useful mockups. Requires sign-in for more than three palettes.
JHson.js — A zero-dependency JavaScript library for converting between HTML and JSON, with binding, templating, attributes, and CSS support.
|
Media Tools (Images, Video, etc.)
og-img — A framework agnostic package, built using web APIs, for generating Open Graph images using Satori and resvg.
Omniclip — An open-source video editing application that works in the browser and no data is saved to a server. Supports rendering up to 4k resolution.
SVG Viewer — An online SVG editor and converter that lets you optimize, prettify, flip, rotate, scale, change dimensions, and convert to React, React Native, PNG, and Data URIs.
🎹 STRICH – Barcode Scanning for Web Apps — STRICH brings fast & reliable 1D/2D barcode scanning to the web. You don't need a native app to scan barcodes! Free demo, 30-day trial. SPONSORED
Chromicons — A set of 400+ SVG line icons, searchable and categorized under app/ui, science, and health, and you can download the whole lot with a click.
Dupe — A gallery of royalty-free social-first imagery featuring high-quality, high-resolution images that you can filter by aesthetic or subject.
Emoji Kitchen — Create a custom emoji that combines two selected emojis (chosen from thousands of existing ones) which you can then download as an image. You can also generate a random combo emoji.
|
JPEG Compressor — A free online image optimization tool that can compress different image formats including JPEG, PNG, SVG, and WEBP.
Figicon — A free set of 400+ SVG icons that you can copy as SVG code or download directly, under more than 30 categories, with a Pro option available for more.
UI Faces — A growing library of free, AI-generated, high-resolution avatars for design mockups, available under categories of human, alien, cartoon, abstract, and robot.
|
The Uncategorizables
Openpanel — An open-source alternative to Mixpanel (the product analytics platform) that's privacy-friendly, cloud hosted, has real-time analytics, and more.
Hi.Events — An open-source, event management and ticket selling platform, with optional cloud hosting, to help you create, manage, and sell tickets for events of all sizes.
Sink — A simple, speedy, and secure link shortening service with analytics that's 100% run on Cloudflare, and has the option to add an expiry date.
🎹 STRICH – Barcode Scanning for Web Apps — STRICH brings fast & reliable 1D/2D barcode scanning to the web. You don't need a native app to scan barcodes! Free demo, 30-day trial. SPONSORED
pico — A set of open and managed web services leveraging SSH that includes static site hosting, localhost tunnel, a blog platform, code snippets, and more.
Bouncy Ball — A single resource to compare web animation techniques with code and demos for all the different ways you can do a bouncy ball effect (JavaScript, React, CSS, WebGPU, Lottie, and lots more).
Lowcoder — An open-source, low-code, internal tools and app building platform to create software for your team and customers quickly and easily.
tl-rtc-file — A WebRTC P2P online web media streaming tool (for files, video, screen, live streaming, text) with management and statistical monitoring capabilities.
ArchiveWeb.page — A JavaScript-based system for high-fidelity web archiving directly in the browser that can be used as a Chrome extension or as an Electron app.
Arc — A new browser for Windows and Mac with a clean UI, organizational features for work/study, split view, themes, and more.
|
Commercial Apps & Classifieds
CodeAtlas – An AI-powered docs platform, to remove the manual work of documenting software.
|
|
TLDR – A byte-sized version of Hacker News that takes just a few minutes to read. AD
|
Mailwind – Build transactional emails using Tailwind CSS, free up to 1000 emails per month.
|
|
Pixel-Art.ai – Generate vibrant pixel art images using AI with a privacy-friendly pixel art studio.
|
Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights. AD
|
|
Transactional – Create transactional docs using a simple API and your favorite CSS framework.
|
Background – A collection of free and premium AI-generated, 6K resolution backgrounds.
|
|
|
|
|