Web Tools #532 - Guitar Tools, React, SVG, Uncats

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #532 • September 28, 2023

Advertisement

Let Auth0 by Okta Take Care of Customer Identity
Got better things to worry about than building Identity? If you’re an eligible startup, you can use Auth0’s Identity platform free for one year. By joining Auth0 for Startups, you’ll get access to the full, rich feature set of Auth0 including SSO, MFA, and universal login.

Okta

Use it to create secure, frictionless user access experiences that exceed customer expectations — and customize everything with low/no coding. This is a unique opportunity to get your application to market faster while giving your customers the best login box in the market.

Check Eligibility Now

 
 

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.

Ultimate Guitar


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.

https://moises.ai/


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.

SongData.io


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

Tap Tempo


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.

Songcraft


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

drumbit


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.

Chord Identifier


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.

React Plock

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.

Hal9: Chat with Your Data, Get Insights in Seconds
Chat with your enterprise databases using secure generative AI and empower business users in your team to do their own data analyses in seconds.    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.

Iconsans

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.

Hal9: Chat with Your Data, Get Insights in Seconds
Chat with your enterprise databases using secure generative AI and empower business users in your team to do their own data analyses in seconds.    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.

MoonBit

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

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Courier Inbox – APIs and SDKs to add a modern notification inbox to your web or mobile application.
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs.    AD 
Forminer – A seamless drag-and-drop form builder for React apps with a schema-first approach.
Figma to React Bootstrap - Gen-erate code-ready React-Bootstrap components from Figma designs.
Brilliant – Learn math and CS using interactive problem solving that's effective and fun.    AD 
CodeRabbit – An innovative, AI-driven platform that transforms how pull requests are reviewed.
Roll – AI-based video production studio in a mobile app for studio-quality remote video recording.

An X Post for Thought

Yeah, I'd say that's pretty irritating!
 
An X Post for Thought
 

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 everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly

Older messages

Web Tools #531 - Video SDK, JS Utilities, Build Tools, VS Code

Thursday, September 21, 2023

Web Tools Weekly WEB VERSION Issue #531 • September 21, 2023 The following intro is a paid product review for Dyte, a platform that provides a powerful SDK to create immersive live video experiences

Web Tools #530 - DOM Parser, Frameworks, Media Tools, JS Plugins

Sunday, September 17, 2023

Web Tools Weekly WEB VERSION Issue #530 • September 14, 2023 Advertisement They Call it the “Tesla of Productivity Apps" Achieve maximum productivity with: Daily planning: Add or create a daily

Web Tools #529 - CSS Survey, JS Utils, ChatGPT, JSON/DB

Thursday, September 7, 2023

Web Tools Weekly WEB VERSION Issue #529 • September 7, 2023 Advertisement How To Adjust Image Size Without Distortion Resizing pictures is an easy task, but it gets terrifying when you deal with

Web Tools #528 - CSS Tools, Git/CLI, Uncats

Thursday, August 31, 2023

Web Tools Weekly WEB VERSION Issue #528 • August 31, 2023 Advertisement The Marketer's Guide to Composable Content Creating and publishing content shouldn't be that hard. Grab this marketer-

Web Tools #527 - JS Libraries, Testing Tools, Vue.js

Thursday, August 24, 2023

Web Tools Weekly WEB VERSION Issue #527 • August 24, 2023 The following intro is a paid product review for Stashpad, a cross-platform note-taking app with a developer-friendly UI. At some point many of

You Might Also Like

Second Brain/Attention/Find Your Books

Sunday, May 19, 2024

Recomendo - issue #411 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Kotlin Weekly #407

Sunday, May 19, 2024

ISSUE #407 19th of May 2024 Hello Kotliners! The Google I/O just finished this week with a huge announcement for us, with Google supporting now Kotlin Multiplatform on Android, and the KotlinConf will

Learn How to Use AI to Reach Your Full Potential, newsletterest1!

Sunday, May 19, 2024

3 Ways AI Can Help Your Writing ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌ ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌ ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌ ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌  ͏ ‌

Software Testing Weekly - Issue 220

Saturday, May 18, 2024

Software Testing Conferences 📚 View on the Web Archives ISSUE 220 May 18th 2024 COMMENT Welcome to the 220th issue! Have you ever been to a testing conference? They're a great way to learn about

📶 Is a Cellular iPad Worth It? — How to Prevent YouTube From Taking Over Your Screensaver

Saturday, May 18, 2024

Also: This Robot Vacuum Can Clean Stairs, and More! How-To Geek Logo May 18, 2024 📩 Get expert reviews, the hottest deals, how-to's, breaking news, and more delivered directly to your inbox by

Weekend Reading — Objection-oriented programming

Saturday, May 18, 2024

This week we find a power-up box, replace GitHub Actions with Maven XMLs, avoid the worst website in the world, revisit RTO policies, “listen” to OpenAI employees, watch our Slack private messages, do

Daily Coding Problem: Problem #1445 [Easy]

Saturday, May 18, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Jane Street. The United States uses the imperial system of weights and measures, which

You don’t have to take our word for it…

Saturday, May 18, 2024

You can probably tell how excited we are to re-launch our Gigantic courses – which bring on-demand product management training for today's modern Product Managers and Product Leaders. In fact, we

🐍 New Python tutorials on Real Python

Saturday, May 18, 2024

Hey there, There's always something going on over at realpython.com as far as Python tutorials go. Here's what you may have missed this past week: What Is the __pycache__ Folder in Python? In

Visualized | Life Expectancy by Region (1950-2050F) 📊

Saturday, May 18, 2024

This map shows life expectancy at birth for key global regions, from 1950 to 2050F. View Online | Subscribe Presented by Voronoi: The App Where Data Tells the Story FEATURED STORY Life Expectancy by