You are using an older version of Internet Explorer. Get out of the past and upgrade!
Click here to upgrade to the latest version of IE.

3 Tips and Tools for Efficient Web Development


This is the first in a series of posts on efficient web development. Subscribe to our blog or check back for future updates and posts.

At WrightIMC, we’re always looking for ways to improve our productivity. Whether this means optimizing code, or debugging errors more rapidly—efficiency is something we can all work on improving. Luckily, in the world of development there are a number of tools and communities that you can leverage to lower the turnover time on your projects. Here are 3 tips and tools to help make your development more efficient.

Tilt

A New Way to Visualize Markup

Tilt is a plugin for Firefox that lets you view the markup of websites on a 3D plane. It also has built-in functionality for viewing and editing the properties of different elements on the fly. There are many uses for such a visualization tool, such as debugging errors causes by nested markup or to see how bloated a particular page is. I’ve used Tilt to find offending elements that make me crazy, such as objects with improper width that cause a container to be wider than it should be. It’s also useful for jumping into projects quicker by acquainting yourself with the visual structure of elements on a page. This solution is much more graceful than the barbaric method of having to add an outline or border style in order to diagnose an issue.

JSLint

A Stricter Way to Evaluate Your Programs

Have you ever found yourself writing a particularly large piece of Javascript, only to run into an error that causes you to bang your head against the wall in frustration? Welcome to the club. When I run into situations like this, I turn to JSLint first. JSLint is a code quality tool than analyzes your programs and reports errors that you have made and approximately where to find them. Javascript users know that the language has its good parts, but also its horrible and ugly parts. JSLint also helps you differentiate between these good and bad parts by evaluating code based on a stricter subset of Javascript. It will reject programs that browsers would not typically reject, forcing its users to do away with sloppy code and embrace code of a higher quality.

Bases & Frameworks

Getting a Headstart

As a web developer you get used to reusing pieces of code across several different projects. If you’re taking the time to write that code out from scratch for each project, you’re being inefficient. This is where a base or framework comes in. There are a number of great starting points out there, such as the 960 Grid System and the HTML5 Boilerplate, but these bases all share a common flaw—excess code. Sure you can pick and choose which parts of a framework to use, but I prefer to build my own. I’ve got a base set of CSS classes including a master reset that I use to rapidly flesh out my layouts, in addition to a basic HTML markup structure and a handful of JS functions. When I start a project, I can jump right into stylizing and creating functionality—skipping the preliminary structuring. I suggest you do the same.

Have questions about these tools or other development resources? Leave it in the comments section or ask me on Twitter at @JosephNDenton.

Discussion

  1. Whoa. The Tilt extension is wicked.

    for those trying to install it. download the XPI file from their website and manually install it via the add-ons menu under “tools”.

    download: https://github.com/victorporof/Tilt/raw/master/bin/Tilt.xpi

    Then in Firefox. Go to Tools > add-ons > get add-ons and click the gear icon in the top right. Then select “install add-on from file”

Speak Your Mind

*