Everyone gets sick of all the thousands of advertisements seen on the internet, on just about every website you visit, at any given time. Some advertisements are so annoying and sometimes you just want them gone. You may be one of the 58 million Firefox users that have installed the extension, 
I recently came to learn how useful using the excerpt feature that is built into Wordpress. You can use excerpts if you want to show a short blurb for each post on your blog’s homepage, which I have been wanting to do on Tweeaks for a long time now I just didn’t know how to do it. Since I was doing some layout modifications, and tweaks FINALLY, I figured I should find out how to use excerpts, and I am happy I did. It’s so easy
These 20 extremely essential Firefox addons will make your life as a graphic and web designer much easier! The Firefox addons are extremely easy to install and you will be notified when new versions of the addons are available. These are the most popular and most useful Firefox addons that every web designer, developer and graphic designer should have. I even included a few that aren’t necessarily related to designing, but they are just as useful to have installed. I recommend at least trying out each one of these at least once, just so you know how incredibly useful they are. They are a real time saver, and stress reliever.
Tab Mix Plus
This isn’t necessarily needed for design or development, but it is still one that I absolutely need to have. Tab Mix Plus enhances Firefox’s tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. It also includes a full-featured session manager.
JSView
Another handy development extension (and timesaver) is JS View which nests itself next to the quick search bar (although at work it sits in the status bar – maybe the versions differ, didn’t check) and when clicking it, it gives you a list of the currently linked stylesheets and javascript files. When then clicking any of the items you immediately are taken to the view source window with the selected file in the source. Very handy, very timesaving imo!
All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code. Previously if you wanted to view the source code of an external javascript/stylesheet you would have to manually look through the source code to find the url and then type that into your browser.rnrnWell now there’s a much easier way. You can use the JSView extension to solve the problem. You can access it from the context menu, from the toolbar, from the view menu, or from the status bar. If the website you are viewing contains any external js/css files, an icon will appear that says “SS”, “JS”, or both. Each individual file can then be viewed by clicking on the filename. The file will be opened in a new window. You can also choose to open all external files by clicking on “View All”. With the latest version you can now view the embedded css and js as well (FF2 and SM2 only). Just open the “Page Info” window from the context menu or tools menu. There will be 3 new tabs in that window. One for scripts, one for stylesheets, and one for frames. You can open them by double clicking or by using the context menu.rnrnYou can also right click on the ‘view page source’ menu item and open the url of the current page with jsview. This allows you to open the source code of any web page in a new tab or in an external editor.
Adblock Plus
Ever been annoyed by all those ads and banners on the internet that often take longer to download than everything else on the page? Install Adblock Plus now and get rid of them. Right-click on a banner and choose “Adblock” from the context menu — the banner won’t be downloaded again. Maybe even replace parts of the banner address with star symbols to block similar banners as well. Or choose a filter subscription, then even this simple task will usually be unnecessary: the filter subscription will block most advertisements fully automatically.
Adblock Plus: Element Hiding Helper
Element Hiding Helper is a companion extension for Adblock Plus meant to make creating element hiding rules easier. You simply select the element you want to be hidden and then choose which attributes of this element should be taken into account when hiding it in future. The element hiding rule is generated and added automatically. Parts of the code are based on the Aardvark extension.
Element Hiding Helper will run anywhere where you can install Adblock Plus (K-Meleon is the only exception at the moment). Adblock Plus 0.7.5 or higher is required, this extension will not do anything on its own.
Download Adblock Plus: Element Hiding Helper
ColorZilla 1.0
ColorZilla add-on features an online eyedropper, which makes it quite simple to get the exact value of a specific color. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. In addition to color picker, ColorZilla offers a DOM color analyzer which allows you to locate elements on the page that correspond to a given color and find out the CSS rules that specify a certain color. ColorZilla also features a online palette viewer that allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. With this beautiful extension you can Zoom the page you are viewing and measure distances between any two points on the pages.
Gmail Manager
The original Gmail notifier for multiple accounts. Allows you to receive new mail notifications along with viewing account details including unread messages, saved drafts, spam messages, labels with new mail, space used, and new mail snippets.
YSlow
YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
Screengrab
Screengrab! saves webpages as images… It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.
Personas for Firefox
Personas are free, easy-to-install “skins” for Firefox that make changing the look of the browser as easy as changing your shirt. With Personas, you can individualize your browser with hundreds of artist-created designs or create your own design.
Window Resizer
The Browser Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you’re working on looks right in all of the standard resolution sizes. This will allow you to see if your design is going to look good to visitors who aren’t using the same resolution as you. The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window. Browser Window Resizer add-on resize your Firefox window to 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolution sizes.
Web Developer
This is one of my favorite addons ever. The Web Developer Extension is a extension for the Firefox browser and it’s a great tool for web designers. It has a variety off essential tools that allow you to code quality websites and troubleshoot problems easily. It’s a powerful all in one plugin. Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. The added benefit of having Web Developer Tool is the ability to edit CSS on the fly. If you want to try a different font, different size, different color, background, borders, margins, padding, practically anything to do with CSS, you can make the changes in the Web Developer tool and see the changes instantly. The Web Developer tool saves you time when playing around with CSS.
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. Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose. Inspect and edit HTML, Tweak CSS to perfection, Visualize CSS metrics, Monitor network activity, Debug and profile JavaScript, Quickly find errors, Explore the DOM, Execute JavaScript on the fly, Logging for JavaScript. Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.
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.
Palette Grabber
Palette Grabber is a nifty little addon that creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, or OS X based on the current page you are viewing in your browser.
GridFox
One of the most frustrating issues that a web designer undoubtedly encounter when coding grid-based layouts. How can a designer be sure that the grid is maintained from the original mockup to the final coded version?
GridFox is a great extension that will overlay a grid on a selected website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.
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.
FireShot gives you several options for handling your screen captures. Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server. As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.
FoxyTunes
FoxyTunes is a kick butt addon for anyone who listens to music while they design. It allows you to control almost any media player from your browser. You can also find lyrics, covers and so on.
MeasureIt
As someone who creates designs for the Internet, one of the most chellanging job is to create design elements aligned. In that case MeasureIt comes in handy and allows you to overlay a ruler on a browser page so you can verify width, height and alignment of page elements.
IE Tab
With the well known issue of having to design for multiple browsers, and Firefox being your default, IE Tab is an essential addon to have. IE Tab is a useful tool for designers who need to check to see if their website looks good in Internet Explorer. A simple click will switch you back to Firefox.
FireFTP
FireFTP is a free, secure, browser based FTP client that allows you to easily access your server via Firefox instead of having to launch a separate program.
Incase you are looking for some ways to hack Firefox, and tweak it out even more, here are some sites with some great tips and tricks.
Other Useful Firefox Tips
- Ultimate List of Firefox 3 Tips and Tricks
- 28 Coolest Firefox About:Config Tricks
- 15 must-have Firefox tricks
- Five Firefox Tips You May Not Know About
- 15 Coolest Firefox Tricks Ever
- 15 Must-Have Firefox tricks
December 26th, 2009 at 3:16 pm
RT @Tweeaks: 20 Useful Firefox Addons for Web Designers and Developers http://bit.ly/72fZ4i
January 24th, 2010 at 12:23 am
Cool! Keep up the good work and thank you for sharing.