DotNetNuke Tips & Tricks

Saturday, August 16, 2008 by Cuong Dang

Top 4 Essential Tools for Web Development (or Skinning)

Filed under: Tips & Tricks

I don’t know about you, but I since I started with web development (or skinning and UI design), the following web development tools have been my best friends. Not only do these tools helpful for DotNetNuke developers and designers, they’re also widely used by many others in the web community.

1. Web Developer Toolbar

A simple plug-in provides a rich tool set for web development. I enjoy using the CSS live editing to the file through the browser and see it changes before I make final update to the local copy. It also gives the option to view your website in multiple screen resolutions without having to reset your own screen.

Another favorite item of mine is that I can validate my code in just one click. There are many more usages for this toolbar depends on your role in web development.

Web Developer Toolbar for Firefox

This toolbar is available for both Mac & PC version of Firefox. Click here to download.

2. Firefbug Plugin

Firebug is an add-on for your Firefox browser. It provides the ability to edit, debug, and monitor HTML, CSS, Javascript and so on live right on your web page. But most importantly, this powerful plug-in is my best friend in troubleshooting CSS and HTML. Not only does it help me in skinning, it also plays an important role in UI design in module development. It’s a must have addition to your development toolbox.

Web Developer Toolbar for Firefox

This plug-in supports both Mac and PC version of Firefox and is developed by Joe Hewitt. The plug-in can be downloaded here.

3. IE Web Developer Toolbar

Ever wonder why your web site (or application) looks different in IE and Firefox? I’ve been there so many times. This toolbar provides similar functionality to Firebug (but isn’t as powerful) to help seeing through rendering issues. It’s also a must have if you plan to support cross-browser products.

IE Developer Toolbar

This toolbar is available for both IE6 & 7 and is developed by, of course, Microsoft. Click here to download.

4. Safari WebKit

Don’t blame me. I’m a Mac guy, therefore, I’d like to have my DotNetNuke web sites look right on the Mac platform. This WebKit is a powerful tool for my development and their UI is… awesome.

Safari WebKit

Click here to download Safari WebKit.

If you know of any tools that can be helpful for others in web development, please do share.

Comments

Joe Sak
Tuesday, August 19, 2008 6:34 AM
Now with Safari 3.x you can have the Develop menu on (advanced prefs) and just right click what you want to inspect. It's way faster than using the other two bars (IE and FFX) for getting to what you want and doesn't disturb your UI.

A drawback to Web Inspector is when you right click a line and hit Copy it only copies a portion of the line and seems to be random.

Hopefully they'll fix that.
Cuong Dang
Tuesday, August 19, 2008 7:50 PM
Joe, I noticed that. The Safari WebKit is just really cool, I wish FireFox can have some UI like that.
blog comments powered by Disqus