Issue #532  (Guitar Tools, React, Media, Uncats)09/28/23

Long before I ever got into web development (which was 1999), I started playing guitar. I was into the grunge scene in the early 90s like every self-respecting mid-twenties suburbanite. If you were a white kid living in your parents house in the 90s, Nirvana's album Nevermind was issued to you and you were required by law to start a crappy grunge band.

I was so obsessed with 90s music that I even attempted to audition for the guitar player role in the Red Hot Chili Peppers! I actually got a call to fly out to Los Angeles but couldn't afford it. But don't get too excited – everyone got the callback, those auditions were pretty much a disaster.

Over the last 6 or 7 years, I've started playing guitar again regularly and sometimes I'll jam with friends. I started a music-based YouTube channel about two years ago that I occasionally update.

Of course, this is a tools newsletter, so I'm not going to bore you too much with the history of my music hobby. Since some of you might be hobby musicians as well, I thought it would be useful to share some of the online tools I use when making YouTube videos and doing other guitar-related things.

Ultimate Guitar
Probably the most popular guitar tabs resource. I have a pro account, so I can view and contribute to "official" tabs. I regularly contribute corrections there, as even the "official" tabs are often wrong.

Moises
My favourite track separation tool. The free version is pretty much all most people will need. It permanently stores everything you separate. I often use it to play along with tracks or create my own backing tracks, which I sometimes upload to my YouTube channel.

SongData.io
Sometimes I want to jam along to a song without actually playing a backing track, but I want to know the tempo. This website tells me the BPM and key for any song so I don't have to figure out the tempo myself.

Tap Tempo
Alternatively, this is a simple app that lets you tap along with any song to find the BPM manually.

Songcraft
My favourite website for writing custom guitar tablature. It's not perfect, but I like the way it looks and it's easy to use. I use this app to create screenshots for the guitar lessons and on-screen tab videos I've included on my YouTube channel.

drumbit
A simple drum machine app that's installable as a PWA. Useful for jamming along with a custom beat (although I also have a real Boss drum machine that I bought back in the 90s that's pretty cool too).

Chord Identifier (Namer)
When I write my own tabs, I like to put the chord names at the top of the tab staffs. This is a nice tool to find the names of obscure chords.

That's pretty much the set of tools I use regularly, along with various native apps, for fiddling around and experimenting in the non-web development side of my life.

If you happen to be a musician yourself and have any interesting tools that you like to use, feel free to reply to this email or hit me up on Twitter/X. I'd love to hear what stuff you've been using and if you have suggestions for any better alternatives to the tools I listed above!

Now on to this week's (web development) tools!

 

React Tools

React Lite Month Picker
Here's something a little different and minimalist, a date picker that's nothing but a simple, customizable month picker component for React.

puck
A self-hosted, drag and drop editor for React that allows integrations with third-party CMS's and no vendor lock-in.

Daxus
A server state management library for React that provides full control over data, leading to a better user experience.

Let Auth0 by Okta Take Care of Customer Identity
We know you have a million things to worry about. Let us take care of Identity, so you can focus on everything else. Auth0 for Startups enables startups to provide secure access to any application, for any user.     SPONSORED 

AutoForm
A React component that automatically creates a @shadcn/ui form based on a zod schema.

Remix PWA
A Progressive Web App framework that seamlessly integrates PWA features into Remix including offline support, caching, installability on Native devices, and more.

React Plock
A small React package that lets you create responsive and customizable masonry layouts.

CopilotKit
A powerful and hackable copilot for any React app that lets you get started in minutes and iterate as needed.

gltfjsx
A small command-line tool that turns GLTF assets into declarative and reusable react-three-fiber JSX components.

StateDecorator
A set of React hooks that manage a complex component state in an easy, testable and deterministic way.
 

Media Tools (SVG, Images, etc.)

PureImage
A pure 100% JavaScript implementation of the HTML Canvas 2D drawing API for NodeJS that has no native dependencies.

iconbundler
An online tool that lets you upload SVG icons  in ZIP format, then the tool will export them as React, Vue, and Svelte components.

freeillustrations.club
Four collections of free, hand-drawn illustrations in SVG format that you can use in commercial projects.

UI Skeleton Gallery
A free customizable collection of SVG skeleton loader UI elements for design wireframes and mockups.

Meco: Free Your Newsletters From the Inbox
The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading.     SPONSORED 

ImageCreator
An AI-based image copilot plugin for Photoshop, for creating generative art, customized models, and more.

Iconsans
A collection of 660+ free icons in bold and line styles, designed for use Vue and React projects.

Typograms
A lightweight image format (text/typogram) useful for defining simple diagrams in technical documentation.

Flatdraw
An open-source drawing web application with a nice, easy to use UI that lets you export your drawings in PNG or JPEG format.

Image-to-Pixel
An editor that lets you convert images to pixel art, add dither, set palettes, and more, made entirely in p5.js.

 

The Uncategorizables

FFmpeg
A visual web interface for FFmpeg. Just type a phrase for what you want to do with your media file and the tool will generate the code.

Neon
Rust bindings for writing safe and fast native Node.js modules with no build scripts or dependencies.

Socket Security
A Chrome extension for Socket that adds security metrics to your npm package pages and search results, protecting you from threats in open-source packages before you even install them.

Meco: Free Your Newsletters From the Inbox
The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading.     SPONSORED 

Glink
A changelog service that lets you display app updates, roadmaps, features, and even lets you add a searchable user forum to your product's page.

Documate
An open-source tool for embedding an AI chat dialog into your documentation site, to answer user questions based on your content.

MoonBit
An end-to-end programming language toolchain for cloud and edge computing using WebAssembly.

Nullstone
An easy-to-use developer platform that enables developers to quickly deploy any application. Includes a decent free starter plan for a single user.

Configu
A simple, modern, and generic standard for managing and collaborating software configurations.

Permit.io
Plug-and-play app-level authorization to enforce in frontend or backend and control via no-code UI elements.

Web Tools Directory
A set of online tools for doing various tasks that includes everything from generators, spell check, lorem ipsum, dummy images, and lots more.
 

Commercial Apps and Classifieds

An X Post for Thought

Yeah, I'd say that's pretty irritating!
   

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

Rooms is a platform that let's you create games and interactive experiences in the browser. You can browse and remix existing 'rooms' or create your own from the hundreds of items that become functional using code.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris