Web Tools #445 - Chaotic JS, SVG, Git/CLI, React

Advertisement

A recent article called Chaotic JavaScript Patterns got me thinking about the way I tend to write code nowadays.

I write a lot of tutorials, blog posts, and newsletter intros that feature various front-end features and techniques. A lot of my day-to-day work involves creating small demos and reduced test cases to show off these specific techniques.

One thing I find myself doing a lot in these encapsulated instances is writing the worst code imaginable just to get things working. Once I have the working demo in place, I go back to refactor the code to ensure it's more maintainable.

Some of the refactorings I commonly do are:

• Store DOM references in variables, rather than repeating each reference for every use
• Convert old-school string concatenation to template literals
• Move common tasks across functions into small utility functions
• Rename variables and constants to more recognizable names
• Fix code indenting and formatting for better readability (including improving on long lines of code; I always use word wrap in my editor)

Now on to this week's tools!
 

MediaTools (SVG, Images, Video, etc.)

Free Talk with a Data Expert
Data is important to your business, but learning about the right tools and best practices is more difficult. Our data experts are here to help.  sponsored 

Meshy
Online tool to generate "mesh" gradients. You can randomize the mesh pattern or customize your own colors then download in PNG format.

Dither Patter Maker
Adjust various settings to create a pixelated patterned black-and-white image downloadable as PNG.

mmmotif
An SVG generator for creating 3D-like isometric patterns that can be customized via settings for angle, scale, translate, skew, and a selected shape for the repeating pattern.

HTTP Status Dogs
HTTP status codes represented by appropriate dog photos. Similar to an old project, but this one has more codes represented and the images are available in various formats should you want to use them for your own project.

Svija
A website builder based on Adobe Illustrator. You synch your Illustrator files with your website then changes are uploaded automatically. Seems ambitious let me know if you try it out.

Icon Horse
Simple tool to get any website's favicon, which you can use to create icons for menus, external inks, etc.

Glitch Image Generator
Upload an image then adjust various settings (mode, amount of glitch, opacity) to create a "glitchy" image effect.

Feather Icons React
The popular Feather icon set as a React component with fill and other properties customizable as React props.

SVG Silh
Thousands of free single-color SVG images and icons. You can choose a category and select a color at the top to theme the graphics.

react-p5-wrapper
A component to integrate sketches into React apps built with P5.js, the popular Canvas-based JavaScript drawing library.

Tethr
A JavaScript/TypeScript library built on top of WebUSB for controlling digital cameras from browsers.

Git, GitHub, and CLI Tools

API Spreadsheets – Build a Custom Spreadsheet Importer
Set up a custom spreadsheet import workflow and use our pre-written code to build an importer within minutes.  sponsored 

Pijul
Open source distributed version control system that's purportedly easy to learn and use without compromising power or features.

GitUI
A blazing fast terminal UI for Git written in Rust that features context-based help, keyboard-only control, and lots more features.

exa
A modern replacement for `ls` (the 'list files' command) that uses colors to distinguish file types along with a slew of other built-in features.
 
Octolink
Enables link sharing for GitHub repositories. When a user clicks on a link and accepts the invite, they are automatically added as a collaborator to the repository.

awesome-zsh-plugins
A collection of frameworks, plugins, themes, and tutorials for Zsh, the popular Unix shell.

Oh My Posh
A shell-independent a prompt theme engine for any shell that lets you customize and color your shell and port it to any other shell or platform.

Bina
An installer for self-contained, single-file binaries that lets you install binaries from GitHub releases with no additional CLI required.

Soft Serve
A self-hostable Git server for the command line that's configurable with Git, create repos on demand with `git push`, and more.

Repobeats
A way to embed colorful and dynamic contributor analytics into your GitHub project's README.md.

Oh My Fish
A framework for fish, the popular shell, that allows you to install packages to extend or modify the look of your shell.

Git History
A popular VS Code extension that lets you view your git log, file history, compare branches or commits, and more.
 

React Tools

API Spreadsheets – Build a Custom Spreadsheet Importer
Set up a custom spreadsheet import workflow and use our pre-written code to build an importer within minutes.  sponsored 

r3f-template
A starter project for building projects with react-three-fiber, the React renderer for Three.js.

FetchX
A library to fetch data in React, built with Axios and MobX, that gives you an easy way to handle CRUD.

React Focus Trap
A React hook to trap the focusable elements (e.g. when navigating inside a modal window).

React Cool IMG
A lightweight React `img` component that helps you handle image UX (user experience) and performance optimization and can be used as an HTML img tag replacement in React apps.

ActiveMDX
An extension of MDX (the JSX-in-Markdown library) that lets you "extract meaningful information from the content of your writing."

React Notion X
A fast and accurate TypeScript-based React renderer for Notion that allows you to fetch and render Notion pages.
 
use-prosemirror
A package that lets you bootstrap a minimal, unopinionated React integration of ProseMirror, the popular WYSIWYG editor, quickly using modern React best practices.

axios-hooks
Zero-config React hooks for Axios, the promise-based HTTP client for the browser and Node.

React-Intl-Tel-Input
React component to add international telephone inputs to your React app.

use-cannon
React hooks for cannon-es, a 3D physics engine written in JavaScript.

On the Release Radar:

• React Autosuggest - At version 10+ and looking for maintainers
• React PDF Reader - PDF viewer library at version 1+
• React Image Crop - responsive image cropping at version 9+
• React Router - Popular React routing solution at version 6+
• Rematch - Redux library now at version 2+
• React Datepicker  is at version 4+
• React Select - Flexible select input is at version 5+

Commercial Apps and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

Zigi - A developer's assistant for non-coding tasks.

Docstring - Documentation management and doc/code sync tool.

vscode.email - Newsletter featuring tips/tools for VS code, coming soon. ad 

AppFlags - Service for app feature flags without deploys.

Advanced React - React course with 70+ HD videos across 11+ modules. ad 

SavePage.io - Flexible API to screenshot any web page.

GLYPHICONS^® - Monochromatic icons and symbols in various formats.
 

A Tweet for Thought

Michael Seibel with an important thread on the constantly deteriorating quality of Google search results.

 

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

While we're on the subject of Google being the Devil incarnate, Is Google Analytics Illegal? is a resource for those in the European Union who are still using Google Analytics and want to know the legal ramifications of continuing to use it. On a related note, here's a Hacker News thread discussing alternatives to Google Analytics.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon  /  GitHub Sponsors  /  E-Books  /  $5 Tip  /  $1 Tip