Matt Prokes

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #16

The firefox development environment will be the development environment leveraged by this book, so before we dig in, I would like to first show you around firefox first. I am sure that many readers are aware of firefox as an internet browser, but more recently it has also been adapted into a wonderful development environment. So lets fire it up, and take a look at a few of the features.

Neat! It looks the same as always, nothing to see here, its firefox as you remember it. So where is the development environment? Well, its not installed yet. See firefox has this nice little built in feature called add-ons.

The add-ons interface is a system which allows you to type in the type of thing that is needed, and it will contact the firefox website and find the appropriate extension for you! In this case we are trying to find the web developer toolbar. So to be clear, when you first get firefox the development environment doesn’t really come with it. You need to add extensions to firefox which allow it to become a development environment.

Some of the extensions that this book will be using are: Selenium, Web Developer Toolbar, Firebug, FireFTP, ColorZilla, and a few others here and there that will be mentioned throughout. We will have a tutorial on how to install things later on in the book. Anyway, when all these extensions are installed, firefox can look somthing like this if everything is enabled.

So what is all this stuff? Well lets start off with the web developer toolbar, some of the neat features of the tool allow things just as manipulation of page css (highly useful if you are laying things out). It also will also do cool things like capture the curent page source or css, allow you to inspect elements on the page, as well as provide various information on cookies, markup validation, and much more.

Next up is firebug, this tool has a awesome javascript debugger (by far the best in the industry). You may not know what it is now, but just take my word for it when I say its important. Firebug also has an excellent dom inspector, as well as a network inspector so you can see all the connections that firefox has made during the render of the page. It does also have a CSS editor, in someways it is more useful then the web developer toolbar css editor but in MANY ways it is inferior to the way the web developer toolbar css editor. I use firebug css when its appropriate for what I am doing.

Lets move on to selenium, selenium is cool because you can do automatic testing of your webapplications with it! Stuff like regression testing, and just UI testing in general becomes invaluable with selenium. The development environment is not shown in the previous screen (because it would take up the entire screen) but we will discuss it later.

FireFTP allows you to upload your webcontent to a FTP host on a server. Since FTP is the primary way of uploading content to webservers usually, I thought I would throw fireftp in there. It is also invaluable for inspecting FTP folder layout, as well as retaining ftp connections and working great with almost any kind of authentication that you throw at it.

Colorzilla is cool because rather then guessing what a particular color is on a webpage you can just up colorzilla dropper to tell you instead! Pretty neat huh, though I should note that it is not always perfect with images, but it is not the fault of firebug, rather the fact that some raster colors are a combination of other colors, rather then a true color. If you really need to be sure, ask the designer to write down the actual colors that they used in their mockup.

Thats the roundup of firefox browser core extensions (ones we will be using frequently), I will probably ask you to install a few others but I won’t be focusing on them as much as the extensions mentioned above. Anyway we are not done entirely yet. Lets move on to bookmarklets, you can think of these little guys as javascript applications which execute on what ever page you are looking at. Usually in the form of a bookmark, bookmarklets are very easy to install and have lots of promise.

A bookmarklet in particular we will be using frequently is the javasctipt shell. The cool thing about the JS Shell, is that it will let you execute arbitrary commands on what ever page you are looking at. It has javascript based code completion, it allows you to write full multi-line javascript applications, and generally prevents the need of switching back and forth between environments just to do some tests.

Tags: web developer 1.3
Posted in Environments, firefox, web development | 1 Comment »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter TBD
Page: TBD

A bit more about firefox, while in many cases the browser is exclusivly the best way of getting web development done it does have its own set of issues; particularly in utilization of computer memory.

I have seen firefox memory utilization start off at a feeble 20,000k, and grow to well over 1.5gb at times. Now, just so you know not all of this is completely attributed to issues with firefox its’ self. Memory leaks in websites’ applications, and firefox having a multi-tab environment greatly contributes to browser memory utilization overhead.

Extensions, are another HUGE factor when talking about how much memory the browser will use. To give you an idea, lets assume that 3 website tabs are each consuming 15,000k (a total of 45,000k). Next lets open a firebug extension and say it consumed an extra 5,000k per tab. That would spike the total memory useage to 60,000k.

Finally, lets add in 5 other extensions that also consume 5,000k (thats an extra 75,000k), you can see how extensions start to greatly contribute to the memory overhead of firefox. Sadly if you factor in leaks, and other issues. Memory starts to add up rapidly, so what can we do about it?

Option 1: Disable Extensions When Not In Use
One solution would be to only enable the extensions when doing development. Start off by opening the add-ons window again (page 16), but this time click on the extensions button in the window (the thing that looks like a puzzle peice).

Simply click on the “Disable” button to disable the extension when you do not need to use it, firefox will prompt you to restart and after you do the extension will not be available to the browser again until you re-enable it. To re-enable the extension simply go to the same configuration area and click “Enable” for the plugins you wish to use.

While this method works perfectly, part of an annoyance is having to click through and enable/disable several extensions when all you really want is a light-weight version of firefox without those plugins. That is where option 2 comes in.

Option 2: Set Up A “Light Weight” Firefox Profile
The idea of setting up a light-weight firefox profile is nothing spectacular, but it will for-sure take care of extension memory issues all in one shot. So lets get started, first off I have found a neat little firefox extension to make the job more easy called “profile switcher”, https://nic-nac-project.org/~kaosmos/index-en.html#profname lets go out to the website and right-click on the “Download” link choosing “save link as”.

Save it to a location on your computer where ever that may be. Next lets install the extension, in firefox choose [File > Open File], and select the extension that was just saved to your computer.

The browser will popup the familiar extension install window (page 16), install the extension and re-start the browser. Once the browser is re-started, you should see a blue icon on the bottom of the browser saying “default”. This is the profile switcher.

What are profiles in firefox? You can think of profiles almost as a way of defining different versions of the same browser. Its actually intended for situations such as multi-user environments, example: lets say that bill, judy, and jane all are using the same computer. Bill wants to have his own set of bookmarks, judy also wants her own set, and jane doesn’t use bookmarks at all. Profiles would allow bill to create a profile named say “firefox-bill” within the browser which would save all his bookmarks to firefox-bill if he was using it.

We will be using profiles in a little different way, currently the profile is set to “default” and is pretty heavy with all these extensions, so lets simply create a “firefox-lite” profile which contains NO extensions! Lets start off by right clicking on default, and click on “Open Profile Manager”.

You will probably get a pop-up asking you “Close current profile when switching?”, choose “No”. Next the “Firefox Choose User Profile” window will pop-up.  Click on the “Create Profile” button.

A window will pop-up describing what creating a profile does, click next. The next window that you will see will ask you for a profile name type “firefox-lite”, and click the finish button.

You should now see firefox-lite in the profile chooser, double click on it and a new version of firefox should start right up with no extensions installed! This functionality should allow you to create tailored custome firefox environments based on the type of development you are doing. Are you doing SEO? Great, install all the SEO extensions you want, and simply create a firefox-SEO profile, etc.

Tags: web developer 1.3
Posted in firefox, web development | No Comments »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter TBD
Page: #TBD

Throughout the book we will be covering web development tools which are common and well known by software engineers around the world. Before we are able to get to that, I will need to familiarize you with some of the technology platforms which we will be developing with.

So lets start off with Mozillas’ Firefox. Firefox; a well known internet browser is used every day by many. What people may not be aware of is the powerful web development tools available for the browser, making it one of the most popular web development platforms available today. So lets get you up and running.

If you do not already have it, you will need to go out and download firefox at http://www.firefox.com, next you will need to install it (if you need help installing firefox check out this video (windows users)). So lets install some extensions for the browser that will be the basis for the development environment.

How to install a firefox extension:

1. Start up the browsers and click on [Tools > Add-ons].
   
2. Next firefox should pop-up a window (Add-ons); you should see a text field stating “Search All Add-ons”, click on the text field and type in “web developer toolbar” and press the enter key.
   
3. You will notice that firefox returned back a result of “web developer”, this is one of the tools that you will be needing so click on the “Add To Firefox” button. Firefox will then pop-up a window asking you if you would like to install the plugin, click on the “Install Now” button to install it.
   
4. Next the browser should return you back to the original window, and ask you to restart firefox. DO NOT RESTART IT for now! Lets first get the rest of the plugins installed. Please repeat steps 2 through 4, and install the rest of the required firefox plugins as listed below, feel free to restart firefox afterwards.
   • Firebug
   • ColorZilla
   • FireFTP
   • Selenium

How To Install Bookmarklets:


Bookmarklets are little javascript applications which we are able to execute on any page the browser is currently displaying. Installing bookmarklets is very easy in the case of firefox (a bit harder for internet explorer). Anyway, lets install a bookmarklet which we will be needing in the future (Javascript Shell).

1. Open up firefox and lets go out and visit http://www.squarefree.com/shell/, next lets click on the link “get the Shell bookmarklet (Firefox only)” which will bring you to a page with a list of tools.
2. You will notice the first button in the list says “shell”, this is the software you will be needing. So next right click on the shell button and click on “Bookmark This Link”.
   
3. Firefox will pop-up a window for naming the bookmark you are saving, I am just going to leave the name the same but feel free to change it if you want. When you are ready click on the “Done” button, and thats it!
   
4. Now if you would like to execute the shell to confirm that it is working, simply go to the bookmarks toolbar and click on the newly added bookmark.
   
5. Perfect, you should see a window pop-up similar to the one below.
   

Tags: web developer 1.3
Posted in firefox, web development | No Comments »