Tools of the Trade

by
,

I thought I'd list some of the web development tools I use. Not the cool stuff I've recently found or wish I understood but the actual things I go to or reach for when I need to get a job done.

Everyone has their own preferred code editor, which does the bulk of the work. And I'm pretty sure everyone uses their browser developer tools too. This is more the little tools for very specific jobs.

Compressor.io I use this for optimising images - compressing and removing any junk. The site has a very slick UI, which makes it fun to use.

Web Semantics Data URI Conversion This lets you upload an image and get back a data URI. It also provides the code for setting it as an image or the CSS for a background image, which saves extra time.

Patternify It's great fun creating simple repeating background patterns as data URIs with this site.

Subtle Patterns This is what it sounds like - understated background tile images.

Pattern Cooler A more advanced background pattern creator with a lot of customisations and options. Used for the background pattern seen on this site on larger screens.

Unsplash Free high quality photos, mainly outdoor scenes.

SVG-Edit An online SVG editor. There are plenty of others with nicer UIs and easier URLs but this one has all the right options for me.

Dynamc Drive's Favicon Generator I've been using this one from the very start and it still holds up as a great tool for me. There are too many favicon generators that try to do too much - spitting out huge files with 20 lines of HTML.

Advanced REST Client This is a Chrome app, which allows you to play around with http requests.

Web Page Test The site's ugly as hell but works a treat for providing loading times and performance data.

Google PageSpeed Insights Get Google suggestions for improving your page load times. Useful for both performance and SEO.

I recommend Louis Lazaris' Web Tools Weekly, a weekly email with JavaScript tutorials and links to New tools.