Web Tools #568 - CSS Tools, SVG, Media, Uncats

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #568 • June 6, 2024

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 everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly

Older messages

Web Tools #567 - Frameworks, Git/CLI, JSON, Databases

Monday, June 3, 2024

WEB VERSION Issue #567 • May 30, 2024 Advertisement Supercharge Your Finances The average American juggles 15 different accounts, including credit cards, loans, bank accounts, and fintech apps.

Web Tools #567 - Tech Books, Frameworks, Git/CLI, JSON, Databases

Monday, June 3, 2024

WEB VERSION Issue #567 • May 30, 2024 Advertisement Supercharge Your Finances The average American juggles 15 different accounts, including credit cards, loans, bank accounts, and fintech apps.

Web Tools #566 - Viewport API, JS Libraries, Build Tools, Uncats

Thursday, May 23, 2024

WEB VERSION Issue #566 • May 23, 2024 Advertisement Support Web Tools Weekly via GitHub Sponsors It's getting harder and harder to find viable advertising options for a small- to medium-sized

Web Tools #565 - Chris Coyier, CSS Tools, AI, JS Utilities

Friday, May 17, 2024

WEB VERSION Issue #565 • May 16, 2024 Advertisement Support Web Tools Weekly via GitHub Sponsors It's getting harder and harder to find viable advertising options for a small- to medium-sized

Web Tools #564 - JS Utilities, React Tools, Uncats

Thursday, May 9, 2024

WEB VERSION Issue #564 • May 9, 2024 Advertisement Support Web Tools Weekly via GitHub Sponsors It's getting harder and harder to find viable advertising options for a small- to medium-sized

You Might Also Like

Will humanoid robots take off?

Tuesday, June 11, 2024

The sci-fi dream of humanoid robots working among us seems to be just around the corner. But will it come true? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Let’s BeReal

Tuesday, June 11, 2024

Plus: GM invests $850M in Cruise and time to schedule those iPhone texts View this email online in your browser By Christine Hall Tuesday, June 11, 2024 Good afternoon, and welcome to TechCrunch PM.

🖥️ How AI Will Transform the iPhone, iPad, and Mac — Hidden Windows 11 Features

Tuesday, June 11, 2024

Also: How to Stop Apps From Draining Your Android Battery, and More! How-To Geek Logo June 11, 2024 Did You Know Although over a century and a half has elapsed since settlers traversed the Oregon Trail

String Interpolation, Music Processing, Command-Line Utilities, and More

Tuesday, June 11, 2024

String Interpolation in Python: Exploring Available Tools #633 – JUNE 11, 2024 VIEW IN BROWSER The PyCoder's Weekly Logo String Interpolation in Python: Exploring Available Tools In this tutorial,

JSK Daily for Jun 11, 2024

Tuesday, June 11, 2024

JSK Daily for Jun 11, 2024 View this email in your browser A community curated daily e-mail of JavaScript news Create Interactive Digital Logic Circuits in React Welcome to the world of digital logic

New Webinar! Simulation Brings Out the Best in Additive Manufacturing

Tuesday, June 11, 2024

A fully integrated system can enable an end-to-end digital thread View this email in your browser engineering.com Simulation Brings Out the Best in Additive Manufacturing NEW Live Webinar! June 26 th

Live demo: Proactively protect your business with 1Password Business

Tuesday, June 11, 2024

Curious about 1Password Business? Join us for a demo. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

New Webinar! Simulation Brings Out the Best in Additive Manufacturing

Tuesday, June 11, 2024

A fully integrated system can enable an end-to-end digital thread View this email in your browser engineering.com Simulation Brings Out the Best in Additive Manufacturing NEW Live Webinar! June 26 th

Daily Coding Problem: Problem #1469 [Hard]

Tuesday, June 11, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Oracle. You are presented with an 8 by 8 matrix representing the positions of pieces on

Mapped | Where Tesla and BYD Make Their Cars 🌎

Tuesday, June 11, 2024

We map the locations of Tesla and BYD's present and future EV factories, along with their estimated maximum output. View Online | Subscribe Presented by: EnergyX's groundbreaking technology can