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 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 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 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 is a handy tool for generating CSS gradients.
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.
Type Scale Clamp Generator
Generate CSS code for type clamp properties using this handy Type Scale Clamp Generator by Maxim Roudier.
Dirty Markup is another great tool for beautifying code with some handy formatting options.
Google Mobile Friendly
Audit your site’s mobile friendliness with this simple tool from Google.
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.
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.
Otherwise, I hope you find this list of web development tools useful. Please don’t hesitate to get in touch at email@example.com if you know of any other useful tools that you think belong here.