Published

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 2012If 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.

23rd December: Bin the ‘print this page’ buttonIn 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 thumbnailsNeed 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 seesWhat’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 dataAgain, 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 ExpressionsYou 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.

16th December: Make a faviconPeople 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.

14th December: Try out some A/B testingWhile 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.

12th December: Learn DNSYou 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 siteMost 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 contentBig 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 iconIf 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 feedsThere 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 placeholderYou’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.

3rd December: Get inspired with data visualisationsInfographics 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 guidelinesHere’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 wasFreezePage 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.