Essential Firefox Add-ons for Web Developers

Firefox has some cool add-ons which make the job of website designers much easier. These add-ons are definitely going to improve your work-flow and enhance your overall internet browsing experience. Don’t miss this chance to work quicker and better!

Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
http://addons.mozilla.org/en-US/firefox/addon/1843

Web Developer
The Web Developer extension adds a menu and a toolbar with various web developer tools.
http://addons.mozilla.org/en-US/firefox/addon/60

ColorZilla
Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.
https://addons.mozilla.org/en-US/firefox/addon/271

FireShot
FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.
http://addons.mozilla.org/en-US/firefox/addon/5648

Codetech
Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.
https://addons.mozilla.org/en-US/firefox/addon/1002

CSS Validator
Validates a page using the W3C CSS Validator.
http://addons.mozilla.org/en-US/firefox/addon/2289

HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
https://addons.mozilla.org/en-US/firefox/addon/249

W3C Offline Page validator
Validates the source of a HTML/XHTML page via the W3C Markup Validation Service using the direct-input form.
https://addons.mozilla.org/en-US/firefox/addon/6006

Greasemonkey
Allows you to customize the way a webpage displays using small bits of JavaScript.
https://addons.mozilla.org/en-US/firefox/addon/748

GridFox
Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout.
https://addons.mozilla.org/en-US/firefox/addon/4904

HttpFox
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.
https://addons.mozilla.org/en-US/firefox/addon/6647

CSSViewer
A simple CSS property viewer.
http://addons.mozilla.org/en-US/firefox/addon/2104

IE NetRenderer

If you are like me and design your sites for Firefox then this is a great tool for you. IE NetRenderer will create you an image of how the website looks in IE 5.5, 6, 7 and 8 so you can get an idea of whether or not it looks right in IE.
http://addons.mozilla.org/en-US/firefox/addon/6455

Foxy SEO Tool
Foxy SEO Tool offers tools for search engine optimization (SEO), web traffic and page analysis for webmasters and web professionals.
https://addons.mozilla.org/en-US/firefox/addon/9440

Useful jQuery Plugins

Quick and powerful, jQuery can help designers and developers create awesome interactive websites that are appealing and accessible to the widest range of browsers. For your audience, the visit to your site will be both exciting and entertaining. Navigation, galleries and slideshows, are hot points for a site to shine.

Here are 35 useful fresh jQuery plugins focusing on navigation, gallery and slideshows, calendars, tab browsing and further resources to reduce time and effort while increasing your audience.

Direct Link: 35 Fresh and Useful jQuery Plugins

CSS Tips & Tricks

Here is a list of CSS tips & tricks that will make your coding so much easier.

Sequence of the links is very important

a:link { color: #000; text-decoration: none; }
a:visited { color: #666; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
a:active { color: #333; text-decoration: underline; }

Use future proof CSS hacks method
<!–[If IE 5]>
ie 5
<![endif]– >

<!–[If lte 6] >
ie 6 and lower
<![endif]–>

<!–[If gte 7] >
ie 7 or higher
<![endif]– >

Use group selector
h1, h2, h3, h4, h5, h6 {
font-family:verdana;
margin:0;
padding:0;
}

Cross Browser CSS Transparency Setting
.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}

PNG Fix for IE6
.png_ie_hack {
background-image: url(../images/pngimage.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/pngimage.png’);
}

Remove links or textbox hightlight border
a, input { outline:none; }

Hidden text for search engine
a { text-indent:-999em; outline:none; background: url(image.jpg) no-repeat 0 0; width:100px; height:50px; display:block; }

Click here for more details on CSS Optimization.

Optimize your stylesheet

If your website uses large stylesheets, optimizing the CSS code can help your code to load and render faster. CSS shortcuts shortern the cascading stylesheets rules into one efficient line of code.

Fonts

.MyClass
{
font-weight: normal;
font-size: 14px;
line-height: 12px;
font-family: arial, verdana;
}

You can simply use:

.MyClass
{
font: normal 14px/12px arial, verdana;
}

Background Images

#MyID
{
background-image:url(images/Vikas.gif);
background-position:top;
background-repeat:repeat-x;
background-color:#r1f1f1;
}

Can be shortened to:

#MyID
{
background: #f1f1f1 url(images/Vikas.gif) repeat-x top;
}

Borders

.MyClass
{
border-width: 1px;
border-color: #e0e0e0;
border-style: solid;
}

Shortcut:
.MyClass
{
border: 1px solid #e0e0e0;
}

Margins/Padding

#MyID
{
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
}

Use a single line of code, like this:

padding: top right bottom left;

#MyID
{
padding: 10px 5px 20px 5px;
}

The margin or padding shortcut can be be shortened further.

margin: top right bottom left;
margin: 10px 20px 10px 20px;

Can be shortened to:

margin: top/bottom right/left;
margin:10px 20px;

You can even take this one step further.

margin: top/bottom/right/left;
margin:10px;

If you do not want any margins or padding with a web object, you can set all of the values to zero.

margin: 0;
padding: 0;

Color

color: #000000;

shortcut:
color: #000

color: #FFCC00;

shortcut:
color: #FC0;

Important reasons for using web standards

For web programmers who are already using web standards, this list may come in helpful when you want good arguments and feel free to add any extra benefits you can think of. If you’re new to the idea of web standards and are unsure on whether you should spend the time to study all about them or not, here are some of the most important reasons for doing so.

Get better search engine rankings
Well-written content delivered through clean, well-structured, and semantic markup is delicious food for search engine spiders and will help our rankings. This will lead to increased traffic, which is what most website owners want.

Maximize website visitors
You don’t know which browser visitors will use to access your site. The only thing you can be logically sure of is that they are using something that can parse HTML. By using web standards properly you make sure that you have completed your job in making your website work with the largest possible number of browsing devices.

Faster page loading
Clean and well-structured HTML that separates structure and content from presentation will be smaller and faster for visitors to download.

Accessibility
Web standards do not guarantee that all features of our website will be accessible to people with disabilities, but it is a very good start. Make sure your html documents are valid, well-structured, and semantic, and you’re well on the way towards having an accessible website.

Make our HTML easier to maintain
When we need to update our website then we will like to browse through a clean and well-structured document. Using CSS to organize layout also makes it much easier to make overall website design changes.

Look professional
Our colleagues, competitors, friends and potential employers will be able to look at our work and know that the person likes to keep up with changes in technology and make sure that his knowledge and skills are always current. It will make us look like a real web professional.

Making our clients feel good
Use web standards combined with best practices for accessibility and give your clients a chance to talk about how they cater to all people, and how they find it important that everybody can use their services or find information about their products. You will also avoid the bad publicity that can be caused by shutting out visitors like disabled people, Mac users, and mobile phone users.

Future-proof content
If we separate content from presentation and use current web standards, we have done the best we can to ensure that our website content can still be read even after fifty years or hundred years.

Good business sense
Any business owner will like to have more visitors, a faster website, improved search engine rankings, potential good publicity and it does make sense to do so.

Accurate way to do things
Web standards provide the way to build the web from the beginning and now that we can surely do something the right way and have a really important reason to feel good about ourselves.

Guidelines for a clean HTML code

A good HTML is the base of a beautiful website. A good CSS can only exist with similarly good HTML markup. The advantages of clean, semantic HTML are many, yet lots of websites suffer from badly written markup.

Let’s take a look at some points to improve your written HTML code.

1. Use Strict DOCTYPE for HTML 4.01 or XHTML 1.0

2. Declare Character set just after the opening <head> tag.

3. Use properly encoded Special/funny characters like “&amp;” for “&” instead.

4. Proper indentation of markup for readability of code.

5. Keep your CSS and JavaScript external.

6. Nest your tags properly.

7. Remove unnecessary divs/tags.

8. Use better naming conventions for CSS classes and ids.

9. Leave typography to the CSS (Text uppercase and lowercase etc.)

10. Apply unique class or id to the page content lies in the “body” tag.

11. Use heading tags like <h1>, <h2> etc. for page headings.

12. Validate your code using W3C validator tool.

13. Logical ordering of the sections of your website in code.

14. Just do what you can to make it right.

HTML 5: the next version of the HTML

World Wide Web Consortium released the first working draft for HTML 5 this year in January. It is a fifth major revision of the HTML we all use every day. When HTML 5 is expressed in XML, it is called XHTML 5. The current version of HTML is 4 which developed in 1999.

Apple, Opera, and the Mozilla Foundation – major browser vendors – came together as a group called Web Hypertext Application Technology Working Group (WhatWG) to build up an updated and upgraded version of HTML. W3C took note of these developments and started its own next-generation HTML effort with many of the same members.

This new version HTML 5 also goes under the name Web Applications 1.0 and it would be immediately familiar to existing HTML programmers. There are no namespaces or schemas. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table. At the same time, we would come across some new and confusing elements. Our div remain, but now HTML includes section, header, footer, and nav as well. em, code, and strong are still present, but so are meter, time, and m. img and embed continue to be used, but now there are video and audio too. However, closer inspection by the html programmer would reveal that these elements aren’t that different. This can also be an effort to make HTML more developer friendly; the datagrid controls seem similar to those of ASP.NET in name and possibly functionality too.

It was explicitly designed to degrade gracefully in browsers that don’t support it. It provides real benefits to programmers today while promising even more for future page visitors.

But remember that HTML 5 is still a draft and this draft may not be finalized for years, work on HTML 5 continues. Perhaps it will be in our browsers in December 2010.

» View draft recommendation