Web Development

Three must-have web development tools

Tony Patton starts each web development project with a certain set of tools. See what's in his toolbox.

 

tools1_090513.jpg
 

The abundance of web development tools available can make the process of selecting one a little overwhelming. In the end, it comes down to personal preference and what fits your needs. Basically, you need a way to create your code and then preview, test, and debug it. You might also require specialty tools depending on the project.

I'm sharing which tools are must-haves for my web development projects. My list includes a code editor, browser tools, and a framework for turning designs into reality.

Also read: The three must-have tools for ASP.NET developers and The three must-haves for C# developers

Building your application

Whether it is standard HTML or dynamic code like PHP or ASP.NET, you need a good editor to put it all together. I have used a number of editors over the years, and the one I like and use daily is WebMatrix. The latest version is a free download and has everything you need to build prototypes and the final product. In addition, there are a variety of templates available to quickly build an application.

Although WebMatrix is a Microsoft offering, you are not restricted to Microsoft technologies, as it can be used for PHP-based applications and those using HTML/CSS/JavaScript standards. It only runs on Microsoft Windows, though I run it on my Mac in a Windows VM.

I know Microsoft doesn't have the best reputation in the web development community, so if you choose to explore other options, you might start with Dreamweaver, Brackets, or a cloud-based tool such as Cloud9.

Browser tools

The latest version of Firefox offers some great tools, but I'm still a big fan of Chrome and its developer tools and the wide variety of extensions available. With a few clicks, you can easily access the JavaScript console and developer tools. The tools allow you to dig into every detail of a web page and its code: JavaScript, HTML DOM, CSS classes and elements, and so forth. One of my favorite features is the ability to edit CSS elements on the fly to quickly view how changes affect the interface.

A good foundation

There are freely available frameworks that provide the foundation for your own application; these frameworks utilize the latest techniques for full-featured web applications. My favorite is Bootstrap, and the latest version fully embraces responsive design and the mobile platform -- the motto of Bootstrap 3 is mobile first.

Bootstrap allows you to build powerful interfaces that conform or respond to the user platform. It is a simple concept but, like anything, it takes time and patience to get acclimated with the framework (nothing beats diving into the code).

There are plenty of other options available, such as Foundation. The key is to utilize a framework that conforms to standards and allows you to concentrate on application design as opposed to the nitty gritty details of concepts like responsive design.

Plenty of options

Other tools you might want to check out are: Proto.io for quickly creating prototypes, PhoneGap for mobile development, BrowserStack for testing, and free JavaScript libraries such as Modernizr and Chart.js. The key is to find good tools and know how to use them; this allows you to focus on tackling your new project as opposed to figuring out how to use the tools.

What tools are must-haves for your development projects? Let us know in the discussion.

 

 

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

8 comments
Paul Dolan
Paul Dolan

That's very interesting, I hadn't heard of WebMatrix before, but will definitely have a look at it.  I guess when it comes to browser tools it is whatever you are most comfortable with, my preference is firebug.  When it comes to HTML frameworks I have used Boilerplate and Foundation.  I find Boilerplate handy for smaller sites and it is well supported on via git.  I built my own website www.pauldolan.me using Boilerplate.  

428r_Cruzr
428r_Cruzr

"I know Microsoft doesn't have the best reputation in the web development community"

--This may be the case in the LAMP community but Visual Studio is still one of the best IDE's ever produced and certainly a must have for .Net types. If you need the ability to program in various languages and have access to code completion hints, etc then Eclipse is a far better choice than WebMatrix  in my opinion for Java, PHP, Ruby, Python and HTML/Javascript.


http://www.eclipse.org