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

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #425 • September 9, 2021

Advertisement
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!
Sencha

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
Usefully, MDN's article on the subject has a little interactive URL viewer that lets you hover over the different parts of the URL to see how they map to the different properties of the Location object.
 
Interactive URL Breakdown for the Location Object

I've ported their code (which is pure HTML/CSS) into a CodePen demo so you can try it out. It's a little jarring when you hover, but you'll get the gist of it, as shown in the screen grab above.

Notice the interactive demo includes all the different parts of the document's location, not just the ones I mentioned above.


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.

Shaper

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

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-otp-input

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.

A Tweet for Thought
 

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

Older messages

Web Tools #424 - JS Utilities, Git/CLI Tools, Vue.js

Thursday, September 2, 2021

Web Tools Weekly WEB VERSION Issue #424 • September 2, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #423 - URL Structure, Media Tools, JSON, React

Thursday, August 26, 2021

Web Tools Weekly WEB VERSION Issue #423 • August 26, 2021 Advertisement Free PDF Generation API Use pdflayer to automate PDF generation on your website. This free API renders HTML to PDF quickly and

Web Tools #422 - CSS Modules, JS Libraries, Build Tools, React Native

Thursday, August 19, 2021

Web Tools Weekly WEB VERSION Issue #422 • August 19, 2021 Advertisement Web Scraping API Extract the data you need with scrapestack's powerful web scraping API. Get Your Free API Key! Web Scraping

Web Tools #421 - VS Code, Testing Tools, React

Friday, August 13, 2021

Web Tools Weekly WEB VERSION Issue #421 • August 12, 2021 The following intro is a paid product review for Clerk, an authentication and user management service for Next.js, React, and JavaScript apps.

Web Tools #420 - CSS Tools, Front-end Frameworks, Uncats

Thursday, August 5, 2021

Web Tools Weekly WEB VERSION Issue #420 • August 5, 2021 Advertisement Stock Market Data API The marketstack API offers free stock data in JSON for various ticker symbols. Access real-time and

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your