Web Tools #425 - CSS Tools, Media/SVG, React

Advertisement

I've previously talked about the Location object in the DOM/HTML spec that gives you a number of different properties and methods dealing with the page's location.

The most common way it's used is by directly accessing either document.location or window.location (which are the same), which both by themselves give you the current page URL (readable or writable).

But there are other properties available on the Location object that are not used as often but might come in handy in certain cases. Here are some of the lesser-used ones:

• Location.protocol - Gets the current URL protocol, including the trailing colon but not including the forward slashes
• Location.port - Gets the port number on the URL (if one exists)
• Location.pathname - Gets the full path, starting with "/", not including domain/host and not including any query strings or hashes
• Location.host - Different from Location.hostname because it also includes the port number

Now on to this week's tools!
 

CSS and HTML Tools

Free Guide: The Evolution of JavaScript Tooling
Frameworks and libraries have been created to ease the burden of writing complex UI code. Learn how to deliver applications faster, better, and on budget in our free guide. Download your free guide!  sponsored 

Pollen
A library of CSS variables, heavily inspired by Tailwind, for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems.

View Source
A handy little tool that lets you view a page's source from anywhere you have an internet connection. Might be useful for mobile or another situation that doesn't allow you to inspect or view the DOM in the browser.

InstaHues
A collection of beautiful color palettes made up of 4 colors with each color able to be quickly copied in hex or rgb() format.

Assembler CSS
A high-performance, utility-first framework that allows you to quickly prototype and build modern websites and UI components without the need to install and maintain complex software.

Buttons Generator
A gallery of free CSS buttons in a number of different categorized styles, just click a button to copy the CSS.

Shaper
An interactive tool to fiddle with various UI settings live on the page, after which you can grab the code (which uses CSS Variables) using the "specs" button.

tailwind-merge
A utility function to efficiently merge Tailwind CSS classes in JavaScript without style conflicts.

CSS Buttons
Yet another gallery of CSS buttons, this one a little smaller than the previous set but with some unique styles.

CSS Photo Filters
36 beautiful photo filters, with ability to live edit and copy the CSS. Upload your own photo then use the settings to adjust as needed.

Glassmorphism CSS Generator
An interactive tool to create a semi-transparent 'glass' effect using CSS (that's apparently part of a future CSS UI library).

Media Tools (SVG, Images, Video, etc.)

Elevate Fall Summit Free Tickets
Want to learn from Engineering or Product leaders from companies like Reddit, Slack, Google or even Netflix? Grab your free tickets for Elevate Fall Summit with the promo code WTW21 to get a 100% discount on the 3-day pass.  sponsored 

React F7 Icons
A Framework7-based icon library of React SVG components with better usability.

flag-icons
A collection of all country flags in SVG, plus the CSS for easier integration.

DiceBear Avatars
An avatar library that also includes a handy HTML API so you can easily drop them into a project as placeholders or as custom user avatars.

Mesh Gradients
100 beautiful, curated gradients available for download as high-quality JPEGs.

Bioicons
A library of open source icons themed around science and biology, categorized and filterable by keyword.
 
drumsynth
A small drum synthesis library built with Elementary, the JavaScript audio library.

ts-audio
An easy-to-use, cross-browser library that abstracts the complexity of the  AudioContext API and can create playlists.

Blobbb
An interactive tool to create unique SVG blobs and shapes with the ability to add a gradient, stroke, and pattern to the shape.

Background Remover
Online tool to use AI to automatically remove the background from an uploaded image and optionally add a color background in its place.

Snowflake Generator
A really cool realistic snowflake generator with settings to customize the shape and look, then download the result as JPEG.

react-social-icons
A set of beautiful SVG icons for 40+ social networks, easy to use in React projects.

aRty face
Online tool to convert an image into a somewhat abstract, retro-looking pixelated version of the photo with settings to customize the look then grab the image in Data URI format.
 

React Tools

Elevate Fall Summit Free Tickets
Want to learn from Engineering or Product leaders from companies like Reddit, Slack, Google or even Netflix? Grab your free tickets for Elevate Fall Summit with the promo code WTW21 to get a 100% discount on the 3-day pass.  sponsored 

React Lottie Tools
A library to work with Lottie animations (the mobile animation library) inside React.

reaflow
A feature-rich, React-based, modular diagram engine to build static or interactive editors for displaying complex visualizations with total customizability.

ReactCasting
A Raycasting algorithm that renders a pseudo 3D scene in HTML using React (no Canvas). Impressively this can also render the scene in a textarea element or in the browser console in Chromium based browsers.

react-otp-input
A fully customizable, one-time password input component built with React. Includes a neat interactive demo where you can customize the number of characters, separators, etc.
 
React 3D Carousel
A 3D carousel component in React, with swipe support. Doesn't seem to have keyboard support though.

use-iterator
A collection of React hooks for using JavaScript's iterator/generator features.

react-linear-gradient-picker
A linear gradient picker in React that's created by wrapping an existing color picker.

react-responsive-modal
A simple responsive and accessible react modal that features a focus trap, customizable via props, and has TypeScript support.

RxEffects
Reactive state and effect management with RxJS. Provides a way to describe business and application logic using MVC-like architecture.

React CountUp
A configurable React component wrapper around CountUp.js, a utility for creating numerical animations.

react-hook-form-persist
Persist and populate a react-hook-form using SessionStorage or LocalStorage.

Network-Viewer
React.js component for viewing HAR files (the file you can export from the Network tab in DevTools).

Commercial Apps and Classifieds

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

JumpStory - Millions of stock images, easy to search, plus a photo editor.

JS E-Books Bundle - 3 JS/DOM e-books in EPUB, PDF, MOBI formats $9. ad 

POST2 - HTML forms back-end service with no code.

React for Beginners - Course w/ 29 HD videos (~5 hours) to learn React. ad 

100ms - Cloud platform to allow devs to add video conferencing to apps.

SnapTweets - Create attractive screenshots of Tweets in a snap.
 

A Tweet for Thought

Jameson Lopp shows off a really amazing next-level augmented reality demo.

 

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

Brickit is an iOS app that lets you scan your Lego bricks and the app will tell you what you can build with them. You can also use the app to find specific bricks.

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