Posts tagged Firefox

Firefox is by it’s nature a web browser good for designers and developers, it’s collection of add-ons just makes it better. Here is the list of, in my opinion, must have and most useful Firefox add-ons for web designers and developers, both front-end and back-end.

1. Firebug

[caption id=”attachment_150” align=”alignnone” width=”700” caption=”Firebug Console”][/caption]

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. It is the world’s most popular front-end development (web design) add-on. In detail, you can see every element’s characteristics like width, length, type, etc.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/firebug]Download[/button]

2. Web Developer

[caption id=”attachment_151” align=”alignnone” width=”333” caption=”Web Developer”][/caption]

The Web Developer extension adds various web developer tools to a browser. By default, it is displayed as a toolbar in Firefox. It is a place containing all useful shortcuts and tools you could possibly need.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/web-developer]Download[/button]

3. FireFTP

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. With an add-on like FireFTP you don’t have to use other FTP Clients, but access your server without leaving your browser.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/fireftp]Download[/button]

4. FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/firephp]Download[/button]

5. 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.This is a must-have if you deal with the HTML code a lot, it will check everything for all possible errors like syntax mistakes for example.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/html-validator]Download[/button]

6. CSS Usage

[caption id=”attachment_152” align=”alignnone” width=”700” caption=”CSS Usage”][/caption]

CSS Usage is made to be used with Firebug, that I mentioned earlier. This add-on uncovers unused CSS style rules. It is used for making your CSS files as light as possible.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/css-usage]Download[/button]

7. SEO Doctor

Search Engine Optimization (SEO) is one of your website’s most crucial and most important parts if you would like to get some traffic. This is why this add-on is important. It gives you a score between 0% and 100% depending how good your site’s SEO is. It highlights mistakes and tells you how to repair them.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/seo-doctor]Download[/button]

8. YSlow

YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/yslow]Download[/button]

9. CollorZilla

[caption id=”attachment_153” align=”alignnone” width=”200” caption=”ColorZilla”][/caption]

Advanced Eyedropper, ColorPicker, Gradient Generator and other colorful goodies. You can actually get some of Photoshop’s most useful web design “features” right inside your browser. Like that color? Use CollorZilla and get the RGB code right this instant.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/colorzilla]Download[/button]

10. MeasureIt

[caption id=”attachment_154” align=”alignnone” width=”425” caption=”MeasureIt”][/caption]

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/measureit]Download[/button]

These are, in my opinion, must-have addons for every serious web designer or developer. If you think that the list is missing something, share it in the comments bellow!

Mozilla Firefox is my personal favorite web browser, and I use it as my default web browser on daily basis. I like it because of it’s many features and above all customizability allowing you to make your web browser your own. It is the only web browser with about:config page that allows you to control and change every bit of it’s core and make it the way you like it. This tutorial concentrates on making Firefox faster, more responsive, less hanging and smother.

First thing first, enter about:config into Firefox’s awesome bar and press enter…

[caption id=”attachment_149” align=”aligncenter” width=”568” caption=”Mozilla Firefox: about:config”][/caption]

Click “I’ll be careful, I promise!” button in order to continue. Now, you will enter Firefox’s about:config page where you can change all the options you possibly need, remember that you need to be careful doing this otherwise you could crush the browser if you don’t know what you are doing, so do this with caution. As you can see now, there are many preferences available, all these are variables including integers, booleans and strings, and these preferences have values that control how the browser works.

[message class=yellow-message ]In order to changes some preference’s value you need to double click on it and then set the value if it is the integer type, if it is a boolean just double click the value to toggle it.[/message]

In order to make Firefox faster and more responsive you need to do the following tweaks:

Enable pipelining

Normally, browsers send a request to a web server and then wait for a response in order to continue, enabling pipelining lets your browser send multiple requests even before one response is received. This feature will speed up the total download time of webpages in most cases.

How to enable it?

Firstly, make sure that booleans network.http.pipelining and network.http.proxy.pipelining are set to true. Then set network.http.pipelining.maxrequests integer’s value to 8, you can put even more if you have a faster Internet connection, but setting it to 8 is enough in most cases.

Get the most of rendering speed

When you are downloading a web page Firefox will show what has been downloaded so far every 0.12 seconds. This is too frequent and it will increase the total download time of a web page. Increasing the value that controls this solves the problem.

How to enable it?

You will need to create a new integer (Right click -> New - > Integer) called content.notify.interval which is the preference name, and put a value of 600000. You will also need to create a new boolean (Right click -> New - > Boolean) called content.notify.ontimer set to true.

Make loading faster

If you don’t do anything in 0.75 seconds while the Firefox’s loading process is active, Firefox will enter so called low-frequency mode. It means that Firefox will become less responsive, but your page will load more quickly. Reducing the value of content switch threshold will improve performance, but make Firefox a little less snappier, so don’t overdo it. You can also make Firefox ignoring all user interface request while downloading a page, it will definitely make it faster, but I wouldn’t recommend that since it will make Firefox non-responsive too often.

How to enable it?

You will need to create a new integer (Right click -> New - > Integer) called content.switch.threshold which is the preference name, and put a value of 250000, which stands for quarter of a second. I’m using this value since I want faster loading, if you would like to make Firefox more responsive then use a greater value like 1000000+ which stands for 1+ second. In order to make Firefox ignoring all user interface requests (which I don’t recommend) create a new boolean called content.interrupt.parsing and set it’s value to false.

Other useful tweaks

The tweaks above are the most important in making you web browser Firefox faster, if you would like to go one step ahead apply these quick changes:

• Make sure that network.http.keep-alive is set to true.
• Create new integer named nglayout.initialpaint.delay and set it’s value to 0.
• Create new integer named content.notify.backoffcount and set’s it’s value to 5.
• Create new integer named browser.cache.memory.capacity and set’s it’s value to 4096.
• Create new boolean named browser.cache.memory.enable and set it’s value to true.
• Create new boolean named browser.cache.disk_cache_ssl and set it’s value to true.
• Create new boolean named plugin.expose_full_path and set it’s value to true.
• Create new boolean named config.trim and set it’s value to true.

[message class=yellow-message ]Have in mind that if you change the value you need to restart Firefox in order for it to take effect. However, for some preferences this is not the case.[/message]

Maintaining Firefox on daily basis

All these tweaks will make you browser run better, but there are also some things that you can do to prevent Firefox hanging or feeling slow like updating your addons and plugins regularly, clearing history every once in a while, deleting bookmarks and search engines you don’t use, disabling some features you don’t use and so on. If you have a useful tip or tweak make sure to share it in the comments bellow!