Tag Archives | css

CSS Live Reloader

CSS Live Reloader is a Firefox extension to ease website CSS development. The extension reloads a page CSS whenever it changes on the server, resulting in something close to live editing of the stylesheet.

Continue Reading →

cssUpdater

Edit your css with FireBug and let cssUpdater update the corresponding property and value in your css source file. Pixel push with ease! (Please visit the homepage for more information.)

Continue Reading →

Jetpack Gallery

Gallery of Jetpack Add-ons

Do you remember Jetpack?

It is the Mozilla Labs project that makes the add-on building process easier, mixing elements of HTML, CSS and JavaScript.  Mozilla has released an awesome Jetpack Gallery, which serves as a community for Jetpack developers and add-on users.

Continue Reading →

Best of the Web Development Add-ons

Most Popular Firefox Web Development Tools

One thing is for sure, with the correctly equipped Firefox browser, you too can become a better web designer or developer. How so? Well, Firefox has some really great tools for both of these jobs. Finding the one that doe the best job, is another job all on it’s own.

Firefox has a lot of web development add-ons you can use, however these are the best of the best at what they do.

  • Console² – Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console. From v0.5 includes the Console Filter extension previously available separately from the Console² website.
  • User Agent Switcher – The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser.
  • 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.
  • MeasureIt – Draw out a ruler to get the pixel width and height of any elements on a webpage.
  • FoxyProxy – FoxyProxy is an advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc.
  • FirePHP – FirePHP enables you to log to your Firebug Console using a simple PHP method call. You must have Firebug installed and the “Net” panel enabled to use this extension.
  • ColorZilla – Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. Perfect color picker tool for Firefox.
  • Stylish – Perfect for testing those tiny CSS tweaks, you can also restyle the rest of the web too with this unique user styles manager.
  • View Source Chart – Graphically displays HTML tag boundaries, nesting tag orders, structure and hierarchy. In other words, it makes it all pretty looking.
  • Web Developer – The Web Developer extension adds a menu and a toolbar with various web developer tools.

Disagree or have your own suggestion for the perfect web designer or web development add-on that should be on this list? Drop in a comment and let us know. We’d love to hear your feedback!

Introducing Jetpack for Firefox

Ever wanted to write your own Firefox extension, but thought the process was too drawn out or difficult to do?  Jetpack is looking to use open Web technologies to enhance the browser.  The idea here is that if you can make a web page, you will be able to build an add-on for Firefox.

This video does a great job at giving you a basic walk-though of what Jetpack development looks like thus far:

Mozilla Labs Jetpack – Intro & Tutorial from Aza Raskin on Vimeo.

Overall, I am really excited about this!  I always love to tweak away at Firefox using tools like Greasemonkey and Stylish (which Jetpack reminds me of, in a sense of being simple ways to extend the browser).

Word of warning, this is an extremely early release of the software, that is still being designed and developed.  This version that is out now is pretty much just for the developers and testers who want to start getting their hands dirty.

Grab Jetpack, and play around with it yourself.  It might not be for everybody, however should really help to inspire those of us who like to tweak around with our browser to make it work for us.

10 Popular Web Designer Tools for Firefox

Thanks to Firefox and some of the great add-ons that have been developed for it, your browser is your best friend when it comes to web site design.  From CSS tools, to promoting your domain, here are 10 of the most popular web designer tools for Firefox.

Any of these add-ons would be great to add to your own proverbial web designer’s toolbelt.

  • ColorZilla – This advanced eyedropper and color picker will help you find out exactly what color is being used on somebody else’s web site, so you can use it on your own.
  • 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.
  • FireFTP – Looking for an FTP client you can reach from inside of Firefox?  FireFTP is a free, secure, cross platform FTP client built into and for Firefox.
  • IE Tab – Quickly embed Internet Explorer into an open tab of Firefox, for cross browser web site checking and testing.
  • Picnik – Get quick access to your own online image editor with this add-on.  It adds a menu option to import images right into the Picnik online image editor.
  • Stylish – This add-on is often considered for web site tweakers, however it can also be used to add or remove CSS and design elements on the fly, without even having to login to your web site.
  • Web Developer Toolbar – By far, the king of the web development Firefox extensions.  It adds a menu and a toolbar with various web developer tools.
  • User Agent Switcher – Another good one to have for cross browser testing.  It adds a menu to the toolbar so you can quickly change the user agent of the browser.
  • FireShot – Take a screenshot and also add notes to it.  If you are a designer, wanting to highlight key features of a design to a client, there is no better Firefox add-on out there to do just that.
  • SeoQuake – Aimed at the search engine optimization crowd, this extension will help webmasters deal with the promotion side of their domains.

What Firefox add-ons and services help you get the job done when it comes to web design?  Drop in a comment, and give me your own “best of” suggestions.


Welcome Digg.com Visitors! Appreciate you stopping in to check out the list. If you have any other suggestions for web developer Firefox add-ons, please add them to the comments, and I’ll be putting out a “reader-inspired” version of the list soon!

While your here, remember to subscribe to the RSS feed to get all of our updated delivered to your favorite feed reader. You can also get our posts delivered to your e-mail inbox once a day, so you never miss another Firefox tool, add-on, theme or tutorial!

A New (Simple) Face for an Old Google Reader

screen

Can you believe that is Google Reader?  Nah, me neither.  There has to be some sort of oddball voodoo magic going on here, right?  What?  You say it is a Greasemonkey script?  Helvetireader breaks Google Reader down to just the things you need.  I true, “Woah, that is awesome” fashion – the userscript creator also encourages people to customize the CSS and make it their own.  (found via Lifehacker)

3 Addons for Web Dev Heads

Web Dev Tools for FirefoxWhen web development and design is mentioned, everybody’s top Firefox extension is the Web Developer toolbar. There are a few other choices out there for design and coding tools that you might have not of seen before.

View Source Chart – This extension does one job and does it well. It draws colored boxes around different source codes to help you read the information better. Instead of black and white confusing stuff – it’s all colored man. Look at all the pretty colors. Far out!

FireShot – This screen grabbing extension does the basics. It takes pictures of the web page your looking at. Unlike other extensions that do this job, this plugin provides a set of editing and annotation tools, which let users quickly modify captures and insert text and graphical annotations.

Palette Grabber – This one is really new (at least to me). It creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, or OS X based on the current page.

What alternative web development extensions are in your toolkit?

Webmasters? Validate Everything!

Total ValidatorFinding yourself in a bind with your web site design? Maybe you just can’t get your CSS to level out with your HTML? If you find yourself in these shoes we talk about, you might need to pick up the Total Validator extension for Firefox.

Perform multiple validations and take screen shots in one go. This 5-in-1 validator works with external, internal, or local web pages using the Total Validator service or local copy of the Pro desktop tool… Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly (they don’t use the official DTDs).

For more information on and about the Total Validator make sure you check out and bookmark their web site TotalValidator.com.