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.
If you would like to stay in the loop when I publish new content your best bet is to join my mailing list, as I don't tend to post my tutorials and articles to social media. Otherwise you can always follow my work on Youtube, Twitter, Instagram, Reddit, Artstation, LinkedIn, and Behance.
