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.
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.
A Stricter Way to Evaluate Your Programs
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.