Improve your web design and development skills and save time and effort with our selection of lesser-known but brilliant apps.
So this article isn't about them. Instead we thought we take a look at the more underrated tools that can help you improve client-side browser development and rigorously test everything that you build. Hopefully you'll find something useful in our feature that you've not heard about previously. Meanwhile, if you know of a tools that doesn't get the press it deserves, let us know about it in the comments below...
Words: Kieran Potts, Sam Hampton-Smith and Tom May
Dealing with duplicate content is a big problem for web designers, not least because of the impact it can have on your search engine optimsiation (SEO) efforts. Plagiarism Checker is intended to check papers for unintended plagiarism, but it can also serve as a useful tool for ensuring that your content is unique, giving your pages the full SEO benefits and also allowing you to check that your content isn’t being stolen by competitors!
Making your website appeal to window shoppers is enormously important. Google’s Rich Snippet tool, which is part of its suite of Webmaster tools, allows you to preview and customise how your site shows up in search results. It provides a handy solution for both checking that your website is providing useful data to Google, and enhance your site’s listing.
03. Sprite Box
Sprite Box is a useful system for generating CSS sprite classes and IDs. Upload a sprite image you’ve created, and using the WYSIWG tool you can quickly define and preview your individual elements within the sprite. This tool takes the guess work out of using sprites, making it a quick and easy process to line up your graphics perfectly.
This handy little bookmarklet allows you to interrogate a page to view box model information about specific elements on the page. Simply drag the bookmarklet onto your favourites bar, then when viewing a page you’d like to interrogate, click the bookmark and then click on the element you want to view data about. A popup displays the element’s position within the DOM, basic style information and IDs/classes.
Primer is a really simple tool that allows you to paste HTML into a window, and will output blank CSS for you based on the classes and IDs used in the HTML. Ideal if you work by creating your markup first, and then apply styling, Primer will parse your HTML and automatically grab everything with an instance of a class or ID and generate a simple set of empty CSS nodes ready for you to paste in or develop your CSS.
06. Adobe Brackets
This small program, available for Windows, Mac, and Linux, enables you to test what your web pages will look like in Opera browsers installed on a variety of phones and handheld devices. A less functional, web-based version is also available.
09. Code Anywhere
10. Cloud 9 IDE
11. Site Validator
Save time validating your entire website by using this tool, which does it in just one click. Site Validator complies with the validation done by the official W3C Validator, and that includes validating HTML5 markup on your sites.
Google's Rich Snippets Testing Tool offers quick and easy way to check that your web pages are properly marked up with Schema.org metadata.
13. Coding App
Bogged down by overwork? Coding App manages the time consuming tasks and repetitive actions necessary for modern web development to take the edge. By taking focusing on the core tasks of a web developer, it frees you up to be a more productive creative. The app is currently in beta, so you'll need to contact them for an invite.
You should also take a look at SQL Fiddle for prototyping data schema.
What other tools do you find invaluable when bolting together new web projects? Let us know in the comments below.