Day 25 #helpful24: 24 tools, tips and tricks for smart web people

After last year’s 24tips series, we’re back for 2011. Austerity has bitten even the Tips, so rather than a whole blog post each day in the run up to Christmas, this year I’ll be sharing some of my favourite bookmarks by gradually building up the list below. Sit back, pluck a mince pie from the velvet cushion next to you, and enjoy:

25th December: Teach yourself to program in 2012
If you’re a non-coder, or dabble a bit but fancy a new challenge, why not try taking up coding (or a new language) in 2012? It’s the new Latin, after all. Here’s a good round-up of places to start.

24th December: Start making your own infographics
Every last nonsense press release comes with an infographic these days, but if you want to start making your own (entirely sensible) ones, check out this list of tools and services to get started.

23rd December: Bin the ‘print this page’ button
In 2012, ‘print this page’ buttons will become as embarrassing as blink text and animated gifs: for years now, CSS has supported print stylesheets, which reformat your content neatly to fit the printed page – where navigation and footers just waste ink and those neatly underlined links can’t be clicked on. Here’s a great tutorial on what you need to consider in building your print stylesheet.

22nd December: Generate website screenshot thumbnails
Need to grab a bunch of same-size screenshots, or want to build website previews into your application or theme? Try Thumbalizr, a neat little service which generates thumbnails of a given URL in a range of sizes, with a decent free tier with room to grow if you need more features or requests.

21st December: Don’t get Rickrolled (or worse)
Short URLs are great, but where will you end up if you click on http://helpful.im/sNAiix – a useful page of information? porn? or a phishing site that will hijack your insecure, outdated work web browser? LongURL is there to help – either as a one-off, to help you unscramble that suspicious link a friend has just sent you, or to build into your own sites via an API to help wary visitors see a tooltip about where the link goes before they click.

20th December: check what Googlebot sees
What’s Googlebot (and those other search engine spiders) actually seeing when it comes to your site? Give this Robots.txt checker a spin to spot errors – I just realised I wasn’t disallowing things properly).

19th December: Structure your data
Again, not one to raise on the first date, but a nifty little tool nonetheless: Mr Data Converter asks you to paste in a bunch of data from a spreadsheet and get it back in a variety of other structured formats: HTML, XML nodes, JSON or even a PHP array. Handy for testing, or as a quick way to turn Excel data into a clean HTML table to paste into your CMS. Worth bookmarking.

18th December: Learn Regular Expressions
You won’t regale the locals down at the Fox & Hounds with this particular skill, but on the flip side, knowing how to piece together a good regular expression when needed may free up hours of drinking time. They’re little search patterns – like Find + Replace on steroids – designed to match different characters in a given chunk of text. With them, you can make your server do clever redirects, convert thousands of rows of spreadsheet data in seconds, or build nifty scrapers to grab web content. Learn and practice at RegExr.

17th December: Make your email newsletters nice the easy way
Contrary to popular belief, HTML email is not the spawn of the devil: it’s actually quite a nice way to read stuff on a digital device, when done right. The hassle is in making it look nice, given that email clients are stuck in the browser wars of 2001, and if anything, going backwards. Step forward MailChimp (again) and their neat little tool to take a regular chunk of HTML + CSS and turn all the styles into inline styles within the HTML, so your newsletter can look beautiful in whatever vile email clients your recipients use.

16th December: Make a favicon
People have come to expect those little custom icons in their browser tabs and favourites – save the fiddling in Photoshop and make your favicon by uploading a base image file at Favikon.

15th December: Generate a fake identity
Whaaa? This one’s a bit spooky – say you’re looking to test your new app or profile page with some realistic data. Credit card numbers, actual postcodes, NI numbers, job titles etc – right down a valid UPS tracking number and a QR code. Fake name generator randomly creates worryingly detailed individuals to do just that.

14th December: Try out some A/B testing
While research is great, nothing beats trying out some alternative approaches and working out what actually changes visitor behaviour – like this great case study from Luke at MoJ highlights. Visual Website Optimizer lets you try out two alternative versions of a new feature on your site to see what the impact is on clickthroughs.

13th December: Find harmonious colours
Brand colours only get you so far: often you want to find a lighter tint to use as a background, or want a harmonious contrasting colour which doesn’t exist in the brand palette. Amongst my go-to sources of help for these jobs are the venerable SlayerOffice Color Palette Creator, Elvan Online’s Color Scheme Generator or the lovely Color Scheme Designer. Keep it harmonious, man.

12th December: Learn DNS
You don’t have to be a hardcore developer to need to dabble in DNS management from time to time: whether it’s setting up a domain to work with Google Apps or hosting a WordPress.com blog at your own URL. If you want to spend 10 minutes getting straight on A records vs MX records, TTLs vs priorities, check out DNS University.

11th December: A layer of context for your site
Most people know about robots.txt, the file that tells a search engine about where to go (and not go) on your site. But there’s a bunch more you could look to create, from the occasionally-mentioned humans.txt or .vcf to the little-known p3p.xml.

10th December: Audit that content
Big websites full of overgrown content: where do you start to hack it back? PageCrawler is a nifty little tool to generate a content inventory for a given site, similar to a sitemap, giving you the head start you need in going through the redundant, outdated or trival…

9th December: Find the perfect icon
If you’re looking for an icon – or just want inspiration about how other people have tried to represent ‘sharing’ in icon form – check out iconfinder.com. Icons found are complete with the licence terms, many of which are open and let you reuse the perfect icon you find in your own projects.

8th December: What do you mean it looks funny in Internet Explorer?
Making Things Look Nice in Internet Explorer 6.0 is happily a dying requirement these days, but it still crops up from time to time. I run – count them – four separate virtual machines on my Mac to emulate IE6-9 and testing is often slow and annoying. There’s a lovely cheap and cheerful alternative though: Browserling. Pop in a URL, choose a browser and version, and up pops the screenshot (admittedly with a bit of a delay if their servers are busy, but the basic package is free after all). Brill.

7th December: What’s powering that site?
‘Nice site,’ you think ‘I wonder how that was built. Looks a bit like WordPress and yet…Drupal?’. BuiltWith is a neat little tool (hat tip: Simon, who enjoys that kind detective work) that lets you pop in a URL and get back a summary report about the web server, cacheing technology, CMS and front-end technologies a site is running. You could figure quite a lot of it out from hunting around the page source, but BuiltWith is quicker.

6th December: Combining RSS feeds
There are all kinds of situations in which you need to munge some RSS feeds together: maybe to create a bundle of bloggers, or get results from two different Twitter searches, or maybe to pipe into a dashboard. Anyway, with the recent Not Helpful changes to Google Reader, your options are braving the complexity of Yahoo Pipes or… the simplicity of ChimpFeedr, a byproduct of the guys who made MailChimp. Just paste in the feed URLs you want to combine and, voila.

5th December: The perfectly-proportioned placeholder
You’re testing out a new site template, bored of your WordPress site header (940 x 198px) or looking to find some filler content for that 462 x 201px carousel:  do you faff around in Photoshop to find the right image for the slot? No, you head over to lorempixel.com, where a URL like http://lorempixel.com/462/201 gives you just what you need.

4th December: What’s taking the time to load on your page?
Now that page speed affects Google ranking, it’s worth optimising the images, javascript and HTML in your pages. Here’s a neat little tool from Site Confidence that charts how long each element of your page takes to load, so you can go after the biggies.

3rd December: Get inspired with data visualisations
Infographics and data visualisations are all the rage. There’s bubble charts, and heatmaps and… er… er… lots of others. If you’re looking for ideas about more engaging ways to present your data, check out OCSI’s CLG-sponsored ‘Improving visualisation in the public sector‘ resources, especially their impressive catalogue of examples.

2nd December: Audit your site against SEO guidelines
Here’s a great, concise checklist from SEO experts SEOmoz, which takes you through the steps you need to take to optimise your site for search engine rankings. No magic, just things to do.

1st December: Keep a copy of page exactly as it was
FreezePage lets you pop in a URL and preserve a full copy of a given URL – useful if you spot a news story or blog post you suspect will be deleted, or simply want to archive a page before it gets swallowed up by linkrot. Could be the perfect tool for simple ‘before and after’ demonstrations when screenshots aren’t quite enough.