netmagFeature

20 useful tools for web developers

Improve your website's performance, validate your code and more with these handy tools.

Life as a web developer may offer many rewards, but when project managers are asking you to do more and more in less and less time, it can becoming frustrating. So it's always good to find tools that can make your work faster and more productive. Here we've gathered together some of the most useful.

Some you'll have heard of, others you'll already be using, but hopefully there'll be at least one or two that can lighten your workload and brighten your day...

01. Firebug

Firefox add-on Firebug is a must-have for devs

From the developers at Firefox, the amazingly useful add-on Firebug enables you to debug, edit and monitor HTML, JavaScript and CSS live, all in the browser. One of the very best web development tools out there, this is a must-have for anyone working in web development.

02. HTML Entity Character Lookup

HTML Entity Character Lookup
HTML Entity Character Lookup helps you ensure all the characters on your page are validated

Using HTML entities is essential to ensure all the characters on your page are validated. However, often finding the right entity code requires scanning through 250 rows of characters. It's also available as a widget on the Mac Dashboard.

03. Adobe Edge Inspect

Adobe Edge Inspect – for mobile developers
Adobe Edge Inspect is a modern alternative to Flash for mobile developers

This relatively new platform from Adobe gives developers a viable way to build interactive websites in the post-Flash era. With the aid of this tool, you can create mobile-ready and responsive apps and content using CSS and HTML that targets modern mobile and PC browsers.

04. -prefix-free

Prefix-free
-prefix-free helps you break free from CSS prefix hell

This cool tool from Lea Verou lets you use unprefixed CSS properties. It essentially works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

05. Cloud9 IDE

Cloud9 IDE
Cloud9 IDE enables developers around the world to edit the same code and chat together

Cloud9 IDE is a tool to help you collaborate with others on big-scale code projects. Letting developers around the world edit the same code and chat together in realtime, it's fast emerging as one of the best browser-based IDEs. Features include code completion and editor, drop-document trees, smart drag and FTP integration.

06. PixelDropr

PixelDropr
PixelDropr is a great way to quickly create graphical website elements

This brilliant Photoshop plug-in helps you create a wide array of illustrations, buttons and icons easily. All these elements can then be dropped to any PSD file.

07. Foundation

Foundation3
Foundation 5 makes it "crazy fast" to code responsive designs, say its makers ZURB

Made by develpopers for developers at ZURB, this prototyping tool acts as a blueprint for your responsive design projects. Its latest version is an easy grid-structure that makes styling even more convenient and flexible. It works with both SASS and CSS.

08. Fontello

Fontello
Fontello offers an easy way to generate icons in web font form

This icon generator is truly one of a kind. Pick the icons you want and Fontello will compile them into customized web fonts. You can also edit and customize the symbol codes and names.

09. Cloud Comp

Cloud Comp
Share sites and apps with ease using Cloud Comp

This lightweight and easy to use tool helps you share website and apps with others. It's been specifically built to give designers and developers a way to present comps to their clients inside of a realistic device shell.

10. BLOKK

BLOKK
BLOKK replaces dummy text with blocks

BLOKK is a fun-to-use font for "clients who do not understand Latin". In other words, it replaces all text with blocks to suggest generic text instead. That way you can create good looking mock-ups and wireframes without confusing people with Lorem Ipsem.

11. Basecamp

Basecamp
Basecamp is the project management of choice for much of the web design industry

Developed by 37signals, Basecamp is a popular online tool to help you manage collaboration and project management with ease. It all runs in the cloud and most people working in web design and development will be familiar with it.

12. Browser Shots

Browser Shots
Browser Shots takes screenshots of your sites in different browsers

Browser Shots generates screenshots of how websites appear at 800x600 and 1024x768 resolution in six commonly used web browsers. Just submit the web address and a group of distributed computers will access and open it, then upload screenshots of the site for you to check out.

13. FavIcon Generator

FavIcon Generator
FavIcon Generator

A favicon ('favorites icon') is a small, 16x16 image that's shown inside the browser's location bar and bookmark menu when your site is called up. This tool makes it easy to create them for your site.

14. Web-developer toolbar

Web-developer toolbar
The Web Developer extension adds a range of handy tools to the browser

This Firefox plug-in feature provides a number of useful tools that web developers use on a day-to-day basis. It's particularly useful when inspecting your HTTP header information or when you need to validate your XHTML.

15. Load Impact

Load Impact
Load Impact simulates large amounts of traffic to test your site's performance

A successful website is one that loads faster and quickly. Load Impact is a cloud-based service for load testing and website optimization that generates traffic load by simulating users. In other words it lets you test how your website, web app, mobile app or API will perform with up to 1.2 million concurrent users.

16. Lorem Ipsum Generator

Lorem Ipsum Generator
Lorem Ipsum Generator does exactly what you'd expect

If you're not impressed with BLOKK (see 10) and want to stick with Lorem Ipsum, this reference site about the subject, giving information on its origins, also includes a random Lorem Ipsum generator.

17. W3c Markup Validation Service

W3c Markup Validation Service
W3c Markup Validation Service checks your documents for conformance to the relevant specification

Validating web documents is an important step that can dramatically help improving and ensuring their quality. This free service from the W3C helps you to check the markup validity of different web documents, in HTML, SMIL, XHTML and MathML and more.

18. Typetester

Typetester
Take fonts for a spin with Typetester

The Typetester is a browser tool for comparing different kinds of fonts, Choose the typeface you want to test out, along with your chosen size, tracking, colour etc, and Typetester applies it to a set piece of text so you can see what it will look like.

19. Pingdom

Pingdom
Pingdom is a great tool for monitoring your site's performance

Pingdom is a service that tracks the uptime, downtime, and performance of websites. Upload a full page in HTML and it will mimic the loading process of the entire website, incorporating all the elements (namely JavaScript, RSS, CSS and images), thereby enabling you to check and monitor the efficiency of your site.

20. CSS Sprite Generator

CSS Sprite Generator
CSS Sprite Generator can help improve your site's performance

By reducing the number of HTTP requests, this tool aims at increasing the loading speed of your website. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

Words: Ananya Srivastava

Ananya Srivastava is a writer working with EnablingBiz eSolutions, whihc offers internet marketing, web design and development services, as well as white-label services to design and development firms in North America and Europe. Join them on Google+.

Subscription offer

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection