Web Tools Weekly
Tools for Web Developers

Issue #568  (CSS/HTML, Media, Uncats)06/06/24


Advertisement

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.

Get training at the .NET epicenter: Microsoft HQ

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.

Type Fluidity

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.

Emoji Kitchen

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.
Advertisement

The Morning Paper for Hacker News Readers
Want a byte-sized version of Hacker News that takes just a few minutes to read? 

Try TLDR's free daily newsletter.

TLDR covers the most interesting tech, startup, and programming stories in under 5 minutes.

TLDR

No sports. No politics. No weather.

TLDR is read by 1,250,000 software engineers, founders, and tech workers.

Subscribe for Free →


 

The Uncateg­orizables

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.

Hi.Events

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

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
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 trans­actional docs using a simple API and your favorite CSS framework. 
Background – A collection of free and premium AI-generated, 6K resolution backgrounds.

An X Post for Thought

An important reminder that, even though the web platform has come a long way, cross-platform development is still a huge mountain to climb.
 
An X Post for Thought
 

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

Tired of short URL services? Try L(O*62).ONG to make your URLs longer.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris