Issue #498  (Bad Habits, CSS/HTML, Testing, Media)02/02/23

How do developers pick up bad practices when writing code? Whether it's spaghetti code, magic numbers, no comments in the code – I believe this happens for two reasons: We don't know any better; or we don't have time to write the code properly.

Sometimes we want to solve a problem and it doesn't matter how we accomplish the task – we just want it done, with no regard for what's considered 'best practice' or 'future proof'.

Picking up bad practices is inevitable for all developers at some stage, particularly early on. I think we can all agree that we cringe when we see code we wrote only a few years ago, let alone 5 or 10 years.

Is there a solution to the problem? Maybe not, but one interesting anecdote got me thinking about what it might take for young or inexperienced developers to improve when it comes to avoiding bad practices in the early stages of writing code.

Two friends of mine, a married couple, recently moved to a new country where they don't speak the language. They had a considerable amount of lead time before the move took place and they contemplated trying to learn the language on their own (online, through YouTube, etc.), prior to their trip. But they were told this was a bad idea. Why?

Because when you're learning a foreign language on your own, it's very easy to pick up bad practices with no locals there to correct you. They were given the advice, for this particular language, that it will be much better for them in the long term if they intermix with the locals and learn the language in the environment where the language is spoken constantly by experts.

Of course, everyone is different, and circumstances vary. I'm sure many people have learned a foreign language effectively without living in the area where the language is most spoken. But this really drives home the point of the importance of being mentored while learning something new.

Imagine if you had a programmer with 10+ years of experience looking over your shoulder from the first day you learned to code! That would be a much better way to learn.

But this isn't always possible, so we do the best we can. My advice for young programmers is: Do your best to solve the problems at hand, and don't be too anxious about writing bad code. If possible, find a mentor. Or blog about what you're learning, with comments open, so you can hear feedback from those who know better. And, of course, be open to criticism.

You might not be able to hire a full-time mentor to be with you constantly, but you can definitely take at least some steps towards getting consistent and accurate feedback on what you're learning.

Now on to this week's tools!
 

CSS and HTML Tools

Nothing Beats the Hyperlink
Old school hyperlinks are the best. They were born with the web, and they will always be here. A Fine Start taps into this raw, unassuming power by transforming your new tab page into a minimal list of links. Group and sort them how you see fit. It's fast and it's free.  SPONSORED  

GradienMood
An AI-based tool to generate a CSS gradient based on a 'mood' you enter, along with a preferred color. You can also view a gallery of existing mood-based options.

tailwindcss-fluid-type
A Tailwind plugin that makes it easy to implement a fluid type system into a Tailwind project.

CSS Generators
A small set of CSS generators that includes text and box shadows, CSS glow, CSS text glow, and unique underlines.

Accessible Color Palette Generator
You can generate a random palette or enter a color to generate WCAG-compliant color combinations.

Box Shadows for TailwindCSS
A curated gallery of box shadows for Tailwind projects, available in JIT and vanilla CSS. There's also a Tailwind box shadow generator on the page.

Glyphs
A huge gallery of copy/pasteable glyphs, symbols, bullets, fancy fonts, and lots more. They're categorized but there doesn't seem to be a way to filter by category other than scrolling through.

flatuicolorpicker
A general color inspiration resource that lets you view color palettes and combinations by keyword, industry, and color models.

classname-variants
A framework-agnostic variant API for plain class names, useful for Tailwind projects or projects built with styled-components and React.

CopySymbol.io
Another option for copying and pasting symbols and special characters, this one offering a search box to filter possible options.

Meta Tags Generator
An online tool to generate a complete list of HTML meta tags for your pages. Result includes general meta tags, open graph, schema.org, and social media meta tags.

Testing and Debugging Tools

Skyflow: What If Privacy Had an API?
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy.   SPONSORED  

AI Code Reviewer
Enter a snippet of code and this tool will use OpenAI to offer a code review, looking for syntax errors, poor practices, etc. Supports both front-end and back-end languages, with some limitations.

Bookmarklet Editor
An online tool to edit and test JavaScript bookmarklets. You can convert to and from bookmarklet syntax.

CSSViewer
An old but popular tool, it's a Chrome extension that lets you easily access the CSS for any element on the page. Similar to DevTools but I'm assuming it gives you quicker access to the CSS.

Console Ninja
A VS Code extension that displays console.log outputs inline with your code, along with an enhanced log viewer and ability to search your logs.

snapstub
A small command line tool that allows you to take "snapshots" of any given API endpoint and store the response.

modern-errors
A JavaScript utility to help you handle errors in a simple, stable, and consistent manner. You can create error classes, set error properties, wrap errors, normalize errors, and more.

Solid Developer Tools
A library of developer tools, reactivity debugger, and Chrome extension for writing, debugging, and visualizing reactivity in SolidJS apps.

R-Factor
VS Code, Atom, and Sublime plugins that provide a set of refactoring tools for React and Redux.

Vitest Preview
A fast and DX-focused visual debugging experience to effortlessly debug your Vitest tests.

broz
A simple, frameless browser for screenshots that you can execute in your terminal via an npx command.
 

Media Tools (SVG, Video, Images, etc.)

Skyflow: What If Privacy Had an API?
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy.   SPONSORED  

Theme Toggles
A collection of unique, animated SVG-based toggles, designed for use as a button to switch between light and dark modes.

CodeImage
A web-based tool to manage code snippets and prettify them for use as screenshots on social media and elsewhere.

Atlas Icons
A set of 2,700+ MIT-licensed icons, customizable on the page, and available for use as SVG, Figma, React, Vue and Flutter.

Pixel Art Converter
An online tool to convert photos to pixel-based art renderings, for use in games, kids apps, or something retro looking.

convert.io
An all-in-one website with dozens of utilities for converting, editing, and manipulating, video, audio, and PDF files.

Health Icons
An open-source set of 1,100+ health-themed icons, fill or outlined, categorized, and available in SVG and PNG formats.

Dittytoy
Create generative music/sounds online using a minimalistic JavaScript API. Some neat examples in the "contributions" section, where you can try out the sounds as well as view the code used to generate it.

Histogram Maker
A simple online tool to create a histogram (or bar chart) for visually displaying a set of values with custom colors and downloadable as SVG, PNG, or JPEG.

Glyph Editor
An online tool to create and edit your own SVG-based web fonts using a preexisting set of icons.

SVG Screenshots
Chrome or Firefox extension to take semantic, scalable, and accessible screenshots of websites, as SVG – as simple as taking a PNG screenshot.

pppixelate
An SVG-based pixel art maker for customizing and editing pixel-art-based backgrounds.
 

Commercial Apps and Classifieds

A Tweet for Thought

In case you were curious what it was like to be a web developer in the early 2000s. Macromedia forever, amirite?
   

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

Speaking of ancient technologies, check out the following YouTube video, originally filmed in the 1940s, showing a Bell Telephone promotion for ... mobile phones!

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris