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

Google introduced “The Go Programming Language”

Google has introduced its new experimental programming language Go, which aims to combine speedy application development through simplified coding with high-speed program execution.

Google’s goal is that a major Google binary should be buildable in a few seconds on a single machine. The language is concurrent, garbage-collected, and requires explicit declaration of dependencies. Simple syntax and a clean type system support a number of programming styles.

Go works with Google’s open-source technology Native Client, designed for running native code in web-based applications, but it is not known yet whether Go will be used in the new Google operating system, Chrome.

For more on Go including FAQs, source code, libraries, and tutorials, please see the Go home page: http://golang.org

Microsoft Office 2010

Microsoft Office 2010 will be launching soon with many new features and it will also be faster than Office 2007.

Introduction to Office 2010

Introduction to Office 2010 Mobile

Screencast of Office 2010

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.

JavaScript Based Animation Frameworks and Libraries

These JavaScript based animation frameworks and libraries will enable you to create attractive and appealing user experiences. Also, those give developers the ability to create stunning and eye-catching animation and transition effects in there web pages.

1. $fx (http://fx.inetcat.com)
2. jsAnim (http://jsanim.com)
3. scripty2 (http://scripty2.com)
4. GX (http://gx.riccardodegni.net)
5. Glimmer (http://visitmix.com/lab/glimmer)
6. Animator.js (http://www.berniecode.com/writing/animator.html)
7. Scriptio (http://www.scriptio.us/index.php)
8. Processing.js (http://processingjs.org)
9. Run (http://aka-fotos.de/run)
10. Burst Engine (http://hyper-metrix.com/#Burst)

Microsoft extends Windows XP availability to 2011

Windows XP
Windows XP

Microsoft has decided to extend Windows XP availability until April 2011.

So basically, this is appealing to consumers who want to buy new PCs but skip Vista.  They want to be able to purchase PCs which have XP loaded on them, but able to upgrade to Windows 7 later on.

“This is good,” said Michael Silver (A noted research analyst) of Gartner about Microsoft’s new plan. “It proves that Microsoft listens to their customers. They have changed licensing decisions in response to customer demand before, and hopefully they will do it again, because this is still not great.”

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;