Web Tools #432 - CSS Tools, Testing/Debugging, Media/SVG

Advertisement

A couple of things I've written around the web that you might be interested in. First of all, on my main website:

Detecting Specific Text Input with HTML and CSS

The title doesn't really do it justice, as it's talking about a bunch of different CSS tricks rolled into one. The article is based on this CodePen demo, which does a fancy text recognition effect with pure HTML and CSS.

That one demo uses:

• HTML's accesskey attribute (remember that?)
• The pattern attribute for form inputs
• The :valid and :placeholder-shown pseudo-classes
• The --var() space-toggle hack

That's a lot of stuff! So I thought it would be cool to break down all the features individually in a full post. There should be something new in there for everyone, even if you're pretty experienced with CSS.

The other article I had published on CodeinWP:

Beginner’s Guide to Responsive Images: How to Get Them Right

Nothing too groundbreaking in this one, it's mainly a syntax guide to responsive images in HTML and CSS, going through all the primary features you'll use for responsive images:

• Some plain CSS defaults
• The srcset and sizes attributes
• Using srcset with a pixel density descriptor
• The picture element

Once you have a basic grasp of all those features, you can then delve into deeper stuff associated with each one in other articles and tutorials. Hope you enjoy one of those posts.

And one last thing: If you have yet to buy my JavaScript e-books, the full 3-volume bundle is half price on AppSumo. It's more or less a collection of all the JS/DOM tips I've published here (with older tips updated), along with some extra articles I've published elsewhere.

Now on to this week's tools!
 

CSS and HTML Tools

Retool is the Fast Way to Build Internal Tools
Visually design apps that interface with any database or API. Switch to code to customize how your app looks and works. The result? You can ship the business critical tools you need in days, not months. sponsored 

Ocean
Server-side rendering of Web Components, done by means of an `html` function that returns an async iterator that will stream out HTML strings.

Box Shadow Generator
Includes a gallery of predefined box shadow settings or you can create and customize your own before copying the CSS.

The New CSS Reset
A new take on the CSS reset/normalize using a number of modern enhancements, so this isn't backwards compatible with old browsers.

Huetone
Interactive tool to create and fine-tune your color system using the LCH color space, and helps your colors be more accessible and contrast-friendly.

Color Parrot
Ask "@color_parrot what is this color?" via Twitter and include an image and this bot will give you a response containing a color palette for that image.

ct.css
A diagnostic CSS snippet that exposes potential performance issues in your page’s `head` element.

Can Include
A quick way to check if a given HTML tag can be a child of another HTML tag (e.g. in case you forgot if ARTICLE can be placed inside of SECTION or something).

Wavy Dividers Generator
Using a "wave" color and container color, you can define and customize a wavy divider and then copy the code in HTML/CSS.

Animated Backgrounds
A gallery of animated backgrounds, sourced from various CodePen demos. Not all pure CSS, some use JS.

Tails
A drag-and-drop page creator built for Tailwind CSS that includes over 190+ components.

Beautiful CSS Buttons
A large gallery of 80+ CSS buttons, from simple examples to some more complex, animated, etc.

Searchbox Generator
Old project that lets you use a visual builder to create a custom branded search box field. Code is exported as HTML + SVG, CSS, or SCSS.

Testing and Debugging Tools

Want to Find Dream Projects to Work On?
Death To The Office is a free weekly report helping you discover new companies that promote location independence and flexible schedules.  sponsored 

Hurl
A versatile command line tool that runs HTTP requests defined in a simple plain text format. It can perform requests, capture values, and evaluate queries on headers and body response.

Ddosify
A multi-location-based and high-performance load testing and DDOS attack simulation tool.

Sapling
A VS Code extension that offers a convenient way to traverse your React app, including relationships between the components and containers, available props, and indication of routes and conditional rendering.

Peeky
A testing framework that's built for optimal performance, includes sane defaults with no configuration required, and a GUI for running and monitoring test.

JestTestGen
Takes a .js/.ts file as input and generates a Jest unit test file next to it with all imports mocked and test stubs for every class method and function exported.

Vytal
A page that displays if your device's data so you can test to see if your device 'fingerprint' remains the same in different contexts (private mode, new IP, etc).

Bundle Scanner
Enter the URL of a website and this tool will fetch every JavaScript file from the website and display number of files, size, first and third-party libraries used, etc.
 
Miniflare
A simulator for developing and testing Cloudflare Workers that supports most Workers features and runs fully local.

DOM Treemap
Chrome extension that extends your DevTools Elements tab with an additional pane to visualize the distribution of node descendants of the currently inspected DOM element. Also includes a BEM treemap visualizer.

http-server
A simple, zero-config command-line static HTTP server powerful enough for production, but simple and hackable enough for testing, local development, and learning.

Orval
RESTful client generator that's able to generate a client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in YAML or JSON format.

Google Title Rewrite Checker
Enter one or more URLs or enter a sitemap.xml file to check if Google is rewriting the titles in search results for the pages checked.
 

Media Tools (SVG, Video, etc.)

Want to Find Dream Projects to Work On?
Death To The Office is a free weekly report helping you discover new companies that promote location independence and flexible schedules.  sponsored 

Cleanup.pictures
Online tool to remove (i.e. airbrush) objects, people, text, or defects from a photo.

ssshape
Choose a few random points then this tool will create an SVG blob that you can customize using a number of different settings before downloading.

Caroumesh
A React component to display 3D models in a carousel-like fashion inside your application using Three.js and react-three-fiber.

Compressor.com
Online tool to compress JPEG and PNG files with minimal to no quality loss, with no files sent to the server and some other optional tools for resizing, converting, etc.

Imgsrc.space
Easily add image and video placeholders to projects using a script plus specific syntax for img or video tags that allow you to use keywords for the image/video topic.

AnyWebP
Online tool to bulk convert just about any image format to or from WebP. Also includes a Win/Mac native app version.

Doodle Ipsum
Doodle-based lorem ipsum that allows you to customize the look of the doodle, then include via the generated URL.
 
react-d3-cloud
React component that generates an SVG-based 'word cloud' (based on an older project called d3-cloud).

plyr-react
A simple, accessible, and customizable React media player for embedding video, audio, and YouTube or Vimeo clips.

drauu
An SVG-based drawing tool for the browser. There's something oddly satisfying about how smoothly the drawing works in the demo.

Basic Pattern Repository
A small gallery of simple patterns (lines, circles, squares, waves, etc.) that you can download in SVG format.

On the Release Radar:

• Boxicons - 1500+ vector icons now at version 2+
• Atrament - HTML Canvas drawing library at version 2+
• Plotly.js - JS charting library now at version 2+
• d3-funnel - JS funnel chart library now at version 2+

Commercial Apps and Classifieds

These are commercial (non-free) tools, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

Chartbrew - Interactive dashboards and client reports.

Morning Brew  - A daily newsletter to keep you informed & entertained. ad 

SKWAR - Square, monospaced variable font, letters alone free in TTF format.

Iterate - Create targeted, user-friendly, and on-brand surveys in minutes. ad 

Searchramen - An all-in-one tool to improve on-page SEO.

OffAlerts - Uptime monitoring and status page service.
 

A Tweet for Thought

2015 Tweet from Rainn Wilson of The Office that I'm going to have to try some time.

 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (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...

Aventuron is a platform for kids, designed for learning programming while building text adventure games.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee