Useful online tools for web developers

I’ve got a whole load of online tools and apps saved in my bookmarks, so I thought I would share a handful of my favourites here. Some of these do very simple things, but they save so much time during the development process, or save me from remembering the exact way to do things.

Iconogen

This tool creates all the different types of favicon and website icons a modern website needs. No longer do you just need a simple 16px ico file on your site, and with Iconogen you just upload an image and it outputs the code and files you need.

My tip: When putting the code into a WordPress template header file, you can use <?php echo get_bloginfo('template_directory');?> in the image href to grab the images from your theme directory.

The author of Iconogen has also created a few other neat tools which you can find by clicking their names, top right on the Iconogen site.

Underscores

The Underscores site will generate a starter theme for WordPress that you can create a custom design on top of – you just need to put in your theme name & a few other details you might want to set, and it outputs a zip file of a complete theme that can be uploaded straight to WordPress and customised from there. It isn’t designed to be used as a parent theme, and is very SEO friendly out of the box.

I build almost all of my WordPress themes using Underscores, and you can end up with vastly different sites all beginning from this starter theme.

Underscores

Html entity encoder/decoder 

Really useful for generating badge codes, etc – this tool will convert symbols like < into their html entities so that you can share them within posts.

TinyPNG / TinyJPG

These are two brilliant sites by the same development team, that compress image files for use on the web, without any compromise on image quality. It’s like magic! It often reduces the sort of images I work with by around 70%, which can really speed up a site.

Also, pandas!

The TinyPNG Panda
The TinyPNG Panda

WordPress functions.php Snippets

Another WordPress-centric one, this site is full of snippets of code that you can add to your WordPress functions.php file to add extra functionality to a WordPress site. Some of these are included in the Underscores theme files by default, but there are some nice extra bits in here too.

WP Test

My third WordPress tool is this set of test data for designing and developing WordPress sites. It will test your theme to the limit and try it’s best to break it, so you can make sure your theme is ready for all eventualities. I used to use the “official” WP test theme data, but this is basically an enhanced (and a bit more humorous) version of that.

Font Awesome

This is a webfont comprised entirely of icons, that you can embed in your site and use whenever you need an icon. They have all of the most popular social networks and anything you might need for an ecommerce shop or business site. It saves you having to make and embed lots of teeny tiny icon image files all over the shop, and you can use css to change the colour of the icons really quickly and easily.

CSS Font Stack

Grab pre-made font stacks for all the most common fonts, so that your design deprecates as gracefully as possible if the first choice font isn’t available on the user’s computer. This is really useful when you’re using a font that isn’t fully “web safe” but also isn’t available as a webfont.

One thought on “Useful online tools for web developers

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.