Issue #445 (Chaotic JS, Media, Git/CLI, React)01/27/22
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)
I suppose a lot of this could be avoided by better planning that could lead to actually writing good code to begin with. But I do find the speed at which I can get quick-and-dirty demos running can be a benefit and I don't find the refactoring time is all that bad.
Chaos can get out of hand
I know working on a large scale project isn't the same as writing small demos and one-off examples, but I think these same principles can be applied to larger projects that have code bases divided into small modules and utilities. There's nothing wrong with stream-of-consciousness coding that leads to awful code and which you can easily tidy up in 10 or 15 minutes immediately afterwards.
But that's the key – don't wait too long to do the refactoring, otherwise the bad code can really pile up and now you have a behemoth of a mess that you're less likely to ever want to go back to.
Do you find you do something similar in your projects? Feel free to hit reply and let me know. I'd love to hear your thoughts.
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 Pattern 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:
|
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 all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
