Issue #423 (Intuitive URLs, Media, JSON/DB, React)08/26/21
Free PDF Generation API
Use pdflayer to automate PDF generation on your website. This free API renders HTML to PDF quickly and easily. All it takes is a few lines of code and a free API key to get started.
Get Your Free API Key!
|
|
URLs should be intuitive, understandable to humans, and each "directory" in a URL should be meaningful. Sometimes I'll visit a URL, then I'll essentially "hack" the URL to get to a part of the website that's at a higher level in the site's hierarchy. I'm sure many of you have done something similar.
Take the following URL from Addy Osmani's website:
https://addyosmani.com/resources/essentialjsdesignpatterns/book/
If you haven't visited that URL before, then you should! It's a great and timeless resource on design patterns in JavaScript that all professional JavaScript developers should be familiar with.
However, when I see a URL like that I see 4 parts to that resource:
- The root URL/domain where the resource is held
- A "resources" section where the book is held
- A home page for the book
- A specific section for the "book" form of the resource
Whether Addy intended it or not, his URL causes me to make the following assumptions (in line with the generic image above):
- He has a "resources" section on his website that has other stuff in it
- This specific resource has other forms besides "book"
So I should be able to modify the URL to get to the stuff higher up. But in this case, the URL's makeup doesn't match up with my expectations. If I remove parts of the URL to try to get to "resources" or to the primary page for the resource, I get 404s.
In this specific example, I don't think it matters all that much. This is an older project of Addy's. I don't think he's given it much thought and this particular resource is not integrated with his website's primary design.
But, in my opinion, this is definitely something we ought to give thought to when creating URL structure. WordPress does this well with categories and tags, which I'm sure you've noticed. That's a good pattern to follow.
It's true that URLs weren't necessarily intended to be used as a navigation tool – but that's how they are used. As long as browsers let us change them, we should give some thought to URL structure for any project.
Now on to this week's tools!
|
| |
Media Tools (SVG, Images, Video, etc.)
Free PDF Generation API
Use pdflayer to automate PDF generation on your website. This free API renders HTML to PDF quickly and easily. All it takes is a few lines of code and a free API key to get started. Get Your Free API Key! sponsored
MIDIVal
A TypeScript/JavaScript library for sending and receiving MIDI data using a clean, easy-to-use API that's extendable, platform agnostic, and built with modern patterns in mind.
Free Background Remover
Online tool to delete backgrounds from an image using AI with a single click.
Meyda
A JavaScript audio feature extraction library that supports both offline and real-time feature extraction using the Web Audio API.
Pattern Monster
A simple online pattern generator to create and customize pre-built, repeatable SVG patterns then download as CSS, SVG, or PNG.
React Rounder
A collection of animated loading indicator components built with React and styled-components.
wavesurfer.js
A customizable audio waveform visualization library, built on top of Web Audio API and HTML5 Canvas to create anything from an HTML5 audio player to a sophisticated DJ application.
tiff
A TIFF image decoder written entirely in JavaScript that can decode greyscale and RGB images (8, 16 or 32 bits) and supports LZW compression and images with an additional alpha channel.
SVG Gobbler
A browser extension that finds the vector content on the page you're viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.
Wicked Backgrounds
A background generator to create SVG-based backgrounds with randomized 'waves' that can be customized with a selected color, wave angle, and number of waves.
pica
JavaScript utility that adds a client-side image resize component to a page. Works fast and the API allows you to define the features used to be compatible with more browsers.
pmndrs market
A gallery of canvas-based 3D models available to download as GLTF, react-three-fiber, or Three.js.
|
JSON Tools, Databases, etc.
Run Node.js Applications Faster and Safer with Unikernels
The easiest way to deploy your Node.js applications to the cloud. No servers to manage – deploy in tens of seconds. sponsored
JSON Blob
Online tool to help parallelize client/server development. Mock JSON responses can be defined using an online editor and then clients can use the JSON Blob API to retrieve and update the mock responses.
tXml
A very small, easy-to-use, and fast XML parser written in pure JavaScript.
TypeBox
A JSON Schema type builder with static type resolution for TypeScript.
FracturedJson
A JSON formatter that produces human-readable but fairly compact output.
Envelop
A GraphQL plugin system. Develop and share plugins that are usable with any GraphQL server framework or schema.
Bytebase
An open source, web-based, zero-config, dependency-free database schema change and version control for teams.
react-json-chart-builder
A chart builder component in React that uses JSON for schema.
Database Starters
A small collection of 4 starters to help you work with persistent data storage.
Supabase Schema
Secured and simple schema visualizer for Supabase, the Firebase alternative.
No installations and no database password required.
nanoSQL
Universal database layer for the client, server, and mobile devices. It's like Lego for databases.
WatermelonDB
A reactive database framework. Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast
|
React Tools
Run Node.js Applications Faster and Safer with Unikernels
The easiest way to deploy your Node.js applications to the cloud. No servers to manage – deploy in tens of seconds. sponsored
React Joyride
Add a WAI-ARIA-compatible guided tour to your React app that you can style to your brand's needs.
React Table Library
A customizable and extensible table library for React that prioritizes developer experience.
DatePicker
A simple React date picker component for working with Gregorian, Persian, Arabic, and Indian calendars with the ability to select the date in single, multiple, and range modes.
React Chat Widget
A fully customizable chat widget for your React app with a plain text message UI.
ckeditor4-react
Official React component for the popular CKEditor 4 WYSIWYG editor.
auth0-react
Auth0 SDK for React Single Page Applications (SPA).
react-color-palette
A lightweight color picker component for React with no dependencies.
React Cool Form
A set of React hooks for forms state and validation to let you manage dynamic and complex form data with no hassle.
react-country-region-selector
Provides a pair of React components to display connected country and region drop-downs (pick a country, it shows the relevant regions).
Unstateless
A shared state management library for React with zero boilerplate and makes shared state as easy to use as local state.
rc-queue-anim
Queue animations in your UI, which might be useful for animations on scroll or when loading up a page.
React Wavify
A simple React component that creates an animated wave. Maybe useful for creating an animated scene on water.
|
Commercial Apps and Classifieds
These are commercial (non-free) apps and paid classifieds. You can submit a link for consideration or you can buy a classified link (will be marked "ad").
Easysub - Online automatic subtitle generator for videos or YouTube URLs.
Readyui - 200+ Bootstrap and Figma-based UI blocks.
NsLookup.io - A simple and powerful tool for querying DNS records. ad
StaticBackend - No vendor-lock-in backend as a service.
JS E-Books Bundle - 3 JS/DOM e-books in EPUB, PDF, MOBI formats $9. ad
|
A Tweet for Thought
I can't fathom that anyone thinks this would be an unpopular opinion but it's a relevant discussion in the current work landscape.
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...
If you like video game emulators and have fiddled around with ROMs, you might want to check out OpenEmu, an open source video game emulation platform for Mac with an easy-to-use UI.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
