Web Development Tools

Over the years I have stumbled across many useful web development and coding tools. These are usually simple tools for doing things like generating code, auditing websites and web apps, and generating and formatting website content.

I decided to put together an archive of some of my favourites. The following is a list of tools that I have either found myself using often, or are tools that I think are particularly useful and well designed. Enjoy.

Web Code Tools

Web Code Tools is suite of tools for generating web code including CSS, HTML5, etc. I find the JSON-LD Schema Generator and Open Graph Generator particularly useful.

TitleCase

TitleCase is a handy tool for converting the case of text. I often use it for article headings or to convert text that has been (annoyingly) written in uppercase.

PXtoEM

PXtoEM is a tool for conversions between pixels, ems, percentages, and point values. I have found this tool useful because I like to code my text sizes in EMs.

Favicomatic

Favicomatic is a handy tool for generating website or app icons and favicons. I usually start with a nice large image of the icon and then use Favicomatic to automatically generate the different icon sizes for the different devices. Favicomatic also generates the required code to include the icons in your website or web application.

CSS Gradient

CSS Gradient is a handy tool for generating CSS gradients.

RespImageLint

Figuring out the correct formulas for responsive image source sets can be a bit of a head-ache, especially in relatively complex layouts. I was amazed at how well RespImageLint worked in this regard.

Minify Code

Minify Code includes a handy set of tools to minify and beautify JavaScript, CSS, and HTML.

Type Scale Clamp Generator

Generate CSS code for type clamp properties using this handy Type Scale Clamp Generator by Maxim Roudier.

Dirty Markup

Dirty Markup is another great tool for beautifying code with some handy formatting options.

JavaScript Obfuscator Tool

As its name suggests, a simple tool for obfuscating javascript.

Google Mobile Friendly

Audit your site’s mobile friendliness with this simple tool from Google.

GTMetrix

GTMetrix – A thorough web performance analysis tool.

Page Speed Insights

Page Speed Insights has been around for a while now, but I think it is still a great tool for auditing website performance with a lot of useful information and tips. These days Lighthouse in Chrome DevTools (see below) does pretty much the same thing and is possibly a bit more up to date.

Chrome DevTools

For website and app development I use Chrome DevTools more than any other tool. Just right-click and select ‘Inspect’. I regularly use Lighthouse to audit my sites and progressive web apps for things like accessibility, best practices, and SEO etc. I also use the Application and Console tabs frequently to check how my code is functioning. I also find Chrome DevTools to be the best place to resolve bugs with my CSS.

Operator Lookup

Operator Lookup is a nicely designed tool for looking up Javascript Operators.

Keycode Tool

The Keycode Info tool is a simple tool to get the Javascript event Keycode for any keyboard key. I have found this tool useful when developing games or apps that require keyboard inputs.

Otherwise, I hope you find this list of web development tools useful. Please don’t hesitate to get in touch at contact@henryegloff.com if you know of any other useful tools that you think belong here.