The best Firefox addons for a web developer

Browsers, Web Development Stuff 19 Comments »

If you read my last post “I used to love Firefox” you will already know my favorite Firefox addons, however you will also know that by installing a load of addons your browser speed will suffer. I can’t live without my addons so here is my recommended list of Firefox addons a web developer needs without slowing his/her firefox down too much.

1. Colorzilla

Colorzilla ImageWith ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

2. del.icio.us Bookmarks 1.5.29

del.icio.us imageThis extension seamlessly integrates your browser with del.icio.us (http://del.icio.us/), the leading social bookmarking service on the Web.

This extension integrates your browser with del.icio.us (http://del.icio.us/), the leading social bookmarking service on the Web. It does this by augmenting the bookmarking functionality in Firefox with an enhanced experience that offers the following advantages:

- Search and browse your bookmarks
- Access your bookmarks from any computer at any time
- Keep your bookmarks organized with tags
- Share your bookmarks with friends or anyone on the Web
- Import your existing Firefox bookmarks

3. Download Statusbar

Download statusbar imageView and manage downloads from a tidy statusbar - without the download window getting in the way of your web browsing. Despite its compact size, Download Statusbar packs in more useful features than the standard download window. The fully customizable interface auto-hides when not in use, allowing full control without interruption.

4. Firebug

Firebug Screenshot 1Firebug 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.

5. Flash Switcher

Flash SwticherSwitch between various flash plugins or remove current plugin. It is installed in the statusbar of your browser. when you click on it a popup menu appears showing different options: which flash player version to install (2,3,4,5,6,7,8,9) or if you want to remove the currently installed one.

6. Google Toolbar

Google Toolbar Image
Basically this is another toolbar with good features like spell check, bookmarks, quick links, autofill forms and so on. For me however the most important deature is the page rank.

7. 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.

HTML Validator Image

I’m not sure whether to add this to the list as you can simple use the “Web Developer Toolbar” to do the same thing through the w3c validator, but i guess this dows save two mouse clicks.

8. IE Tab

IE Tab ImageThis is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox. Got to say I develope website in firefox and this make switching to an IE browser unbelievably easy.

9. MeasureIt

Measureit ImageDraw out a ruler to get the pixel width and height of any elements on a webpage. Amazingly useful when you are trying to get the pixel distance perfect from on div tag to another, or measure the sapcing you have left. I personally use if for turning the jpg image of the website into a perfect copy full product.

10. Save As Image

Save as ImageI used to use screengap however I dont think its supported in the new firefox and it uses Java runtime to save the image. I’ve got to say it took me a while to find this addon but it’s brilliant. Adds the ability to save a page, frame, or part of either as an image.

Useful for showing people bugs in a website, creating a snapshot of design progress, or perhaps even creating a gallery of websites.

11. Web Developer Toolbar

Web Developer Toolbar

This is the absolute MUST for any web developer using Firefox. I use it every day no matter what i’m doing, its so user friendly and packed full of feature. This is my number 1 recommendation, try it you will not be disappointed.

And that’s it. If anyone else has any recommendations please feel free to post them.

Rate This Post:

I used to love firefox

Browsers, Web Development Stuff No Comments »

I installed Firefox (FF) way back in early 2005 and since then haven’t touched Internet Explorer (IE) until now. I used to find that FF loaded pages much quicker and kept up with new CSS techniques unlike IE. Furthermore I love the add-ons you can get and, for me, web development would have been a real pain without them but alas things have changed with the release of IE7.

IE7 Better than Firefox?

IE7 now has good support for CSS (although a few annoying bugs), a growing number of add-ons and seems to load web pages a lot faster than FF. On top of all of this (and I don’t know whether this is just me but) text seems to render beautifully in IE7 and makes FF text rendering look of lack of a better word jagged. I have read into this a little and I have found people talking about anti-aliasing and using TFT screens (which I do) and so on. All I know is text looks better in IE than FF. I also find the FF often freezes or crashes when I have a few tabs open or a lot of pages with flash open.

So why am I writing this post well, I am willing to forgive FF unsmooth text (in the hope that FF v3 will fix this) as long as it runs faster and stops crashing/freezing all the time. So I have a load of add-ons installed (which I love and am going to list below) that I’m going to uninstall to try and speed up FF. Some of the below addons I don’t have active normally only when I need them but I think they are still slowing things down (na = not active)

The best addons for Firefox for a web developer

BetterSearch
British English Dictionary
Colorzilla
del.icio.us Bookmarks 1.5.29
Download Statusbar
Firebug
Flash Switcher- na
Foxmark Bookmark Synchronizer
Google Toolbar
IE Tab
MeasureIt
Online Bookmark Manager Synchronizer
Save As Image
SEOquake For Firefox- na
Server Spy
Web Developer Toolbar

Personal Use addons

Download them all- na
Firefox Extension Backup Extension- na
StumbleUpon
VideoDownloader- na

Uninstall All Add-ons

Right back to my original plan, I’m using Firefox right now so I’ll let you know my finding after I restarted… Oh yeah forgot to mention I have over 1500 bookmarks which might be causing the issue with FF however IE7 has the same bookmarks and seems to run fine, anyway back to the uninstalling…

Conclusion

Right so if your Firefox browser is loadin pages slowly uninstall your addons for a huge speed boost. It’s about the same speed as IE7 now. Problem is I love my addons just got to decide which ones I can live without.

Oh yeah the bookmarks make no difference.

Rate This Post:

X-cart breakdown of files

Code Library, x-cart No Comments »

I started to use x-cart a little for some of my clients so everything I learn about the file structure, style design, programming etc I will continually add to this post.

Skin1/

Where all the design files are kept using smarty template engine
header.tpl The header info of the page

Skin1/customer/

Generally everything in the skin1>customer folder is to do with the front end of the store.
home.tpl is the home page

Skin1/main/

Skin1>main also has a few usuful files
prnotice.tpl is generally where the copyright notice and footer contents goes.

Rate This Post:

SSH Commands for FTP

Code Library, Linux Apache Server No Comments »

Ok so one of my servers is with 1and1 and they provide free backup space via ftp. However you can only access it via the server you have with them, this means logging into your server using putty (SSH) from your desktop then logging into the backup server.

To do this:
1. From a command prompt you would use the ftp command ‘ftp backup_server_name.info’
2. Enter the username, then the password.
3. Use the make directory command to create a directory: ‘mkdir
testDirectory’

The reason I wanted to make a directory is so I can automate the server backup per domain via the plesk control panel.

Rate This Post:

SSH Mysql command line

Code Library, Linux Apache Server, Mysql No Comments »

Ok so i had a huge amount of trouble trying to upload a sqldump file (large sql file) into the mysql database with phpmyadmin. It kept timing out, even when I increased the timeout and upload file size larger in the php.ini file. So logged in using Putty and used the following SSH commands.

Show how many current open connections there are to mysql
mysqladmin processlist |wc -l

MySQL Dump
mysqldump -u username -ppassword dbname > file.sql

so if my username = alice, password = madhatter database name = wonderlanddb and I wanted to write to a file called sqlbackup.sql and the folder http://www.lenatsu.co.uk/databackup/ I would type:
mysqldump -u alice -pmadhatter wonderlanddb > /var/www/vhosts/lenatsu.co.uk/httpdocs/databackup/sqlbackup.sql

If a file ends in .zip (for example, file.zip) type:
unzip file.zip

If a file ends in .tar (e.g., file.tar) type:
tar -zxvf file.tar.gz

If a file ends in .gz (e.g. file.gz) type:
gzip -d file.gz

If a file ends in .tar.gz (e.g. file.tar.gz) type:
gzip -d file.tar.gz
and then
tar -xvf file.tar

Importing MySQL database
mysql -uusername -ppassword database_name < file.sql
So i would type:
mysql -u alice -pmadhatter wonderlanddb < /var/www/vhosts/lenatsu.co.uk/httpdocs/databackup/sqlbackup.sql

Right if it comes up with some rubbish like
/*!40101 mysql

then it ismost likely you have put “mysqldump” at the beginning of the command instead of “mysql”, last time it happened to me it took a couple of hair pulling hours to figure out why.

Rate This Post:
Entries RSS Comments RSS