I’ve listed some of the technologies I’ve either worked with or want to add to my personal arsenal. It’s overwhelming sometimes how much a developer has to know. Here’s a mindmap neatly categorized (labeling/categorization can be debated).

A friend of mine asked me to post a simple script to show the power of ANT. Here it is with comments that show some of the things you can do with it. To read how to set up ANT and run scripts, please read my earlier post on doing so.

This script gets the latest from an SVN repo, deploys using FTP, then sends an email using a Gmail account. Here’s the ant script (deploy.ant), followed by a properties file (i.e. the config file, deploy.properties), which the ANT script pulls from:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<?xml version="1.0"?>
<!-- ======================================================== -->
<!-- Sample build file used to retrieve svnant's sources -->
<!-- ======================================================== -->
 
<!-- TODO: Mail if the script failed --> 
 
<project name="STAGING-Deploy" basedir="." default="empty">
 
  <property file="STAGING-Deploy.properties" />            
  <!-- Import SVNAnt tasks from jar files.  -->
  <typedef resource="org/tigris/subversion/svnant/svnantlib.xml" />
 
  <target name="Deploy"> 
    <!-- Step 1: Export the latest files from the repo to local machine. -->
    <antcall target="export" />
 
    <!-- Step 2: FTP the files from the local machine to STAGING. -->
    <antcall target="ftp_files" />
 
    <!-- Step 3: Cleanup. -->
    <antcall target="cleanup" />  
  </target>  
 
 
  <!-- SVN Checkout (Latest) -->
  <target name="checkout_latest">
    <svn username="${svnant.repository.user}" password="${svnant.repository.passwd}">
      <checkout url="${svnant.projectrunk.url}" revision="${svnant.checkout.revision}" destPath="${svnant.checkout.destpath}" />
    </svn>    
  </target>   
 
  <!-- SVN Update -->
  <target name="update_latest">
    <svn username="${svnant.repository.user}" password="${svnant.repository.passwd}">
      <update dir="${svnant.update.directory}" recurse="${svnant.update.recurse}" revision="${svnant.update.revision}" />
    </svn>    
  </target>  
 
  <!-- SVN Export  -->
  <target name="export">
    <svn username="${svnant.repository.user}" password="${svnant.repository.passwd}">
      <export srcUrl="${svnant.export.srcurl}" destPath="${svnant.export.destpath}" force="${svnant.export.force}" />
    </svn>    
  </target>
 
  <!-- FTP the export of the latest revision to STAGING. -->  
  <target name="ftp_files">    
    <!-- Import FTP tasks from jar files.  -->
    <taskdef classname="org.apache.tools.ant.taskdefs.optional.net.FTP" name="ftp" />
 
    <ftp server="${ftp.server}" port="${ftp.port}" remotedir="${ftp.destination}" userid="${ftp.userid}" password="${ftp.password}" 
         passive="${ftp.passive}" depends="${ftp.depends}" binary="${ftp.binary}" retriesAllowed="${ftp.retriesallowed}" verbose="${ftp.verbose}">
 
      <fileset dir="${svnant.export.destpath}" />
 
    </ftp>    
  </target>  
 
  <!-- Cleans Up: Remove temp info, etc. -->
  <target name="cleanup">  
    <delete includeEmptyDirs="true">
      <fileset dir="${svnant.export.destpath}"/>      
    </delete>
 
    <!-- Email Notification -->
    <mail mailhost="${mail.host}" mailport="${mail.port}" subject="${mail.subjectalert}" ssl="${mail.ssl}" user="${mail.username}" password="${mail.password}">
      <from address="${mail.from}"/>      
      <to address="${mail.to}"/>
      <message>The nightly build has completed.</message>
    </mail>
 
    <echo>Cleanup complete. </echo>
  </target>
 
  <target name="empty">    
    <echo>Pass in a default target to call </echo>    
  </target>
 
</project>

Now let’s check out the properties file (deploy.properties):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# -----------------------------------------------------------------------------
# STAGING-DEPLOY
# Variables are initialized here.
# -----------------------------------------------------------------------------
#
# NOTE: Backslashes have to be escaped with another backslash (on Windows)
#
 
# === INIT =====================================================================
svnant.projectrunk.url=svn://192.168.3.142/TESTING/trunk
svnant.repository.user=YOURUSERNAME
svnant.repository.passwd=YOURPASSWORD
 
# === CHECKOUT (INITIAL) =======================================================
# Check out a working copy of the latest to a local directory.
svnant.checkout.destpath=C:\\testing123
svnant.checkout.revision=HEAD
 
# === UPDATE TO LATEST =========================================================
# Update the working copy of your local directory to latest revision
svnant.update.directory=C:\\Experiments\\Firehawk\\src_latest
svnant.update.revision=HEAD
svnant.update.recurse=true
 
 
# === EXPORT ===================================================================
# Copies From Source Repo:
svnant.export.srcurl=${svnant.projectrunk.url}
 
# Into a temporary directory in your ant home (that will be FTP'd):
svnant.export.destpath=${ant.home}\\export-temp
 
# Overwrite (needs to in case the file changed)? 
svnant.export.force=true
 
PBNStagingFTP
# == FTP INFO ==================================================================
# FTP what was exported (latest version) to this location on staging:
ftp.destination=/testing/
ftp.server=TESTING
ftp.port=21
ftp.userid=USERNAME
ftp.password=PASSWORD
ftp.passive=yes
ftp.depends=yes
ftp.binary=yes
ftp.retriesallowed=5
ftp.verbose=yes
 
# == MAIL INFO ==================================================================
# Currently using GMAIL for now.
mail.host=smtp.gmail.com
mail.port=465
mail.subjectalert=[STAGING ANT Build] Test build
mail.ssl=yes
mail.username=USERNAME
mail.password=PASSWORD
mail.from=someone@somewhere.com
mail.to=someone@somewhere.com

Similar to the Conceptual Firefox Architecture, here's an overview of the other prominent browsers (except IE, because it's proprietary). The document is titled "Architecture and Evolution of the Modern Web Browser" by Alan Grosskurth and Michael W. Godfrey.

Great document outlining the architecture of Firefox from a conceptual level. What components make it up and how it's maintained.

Here’s a set of Firefox add-ons I use in my daily development. Note all of them analyze code. Some of them are for being productive.

Make sure you go to the Firefox web site to get the latest versions of these.

	CodeBurner for Firebug 1.2 CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. https://addons.mozilla.org/en-US/firefox/addon/10273
	ColorZilla 2.0.2 Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies... https://addons.mozilla.org/en-US/firefox/addon/271
	Firebug 1.4.2 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 1.4 requires Firefox 3.0 or higher. https://addons.mozilla.org/en-US/firefox/addon/1843
	GooglePreview 3.22 Inserts preview images (thumbnails) and popularity ranks of web sites into the Google and Yahoo search results pages. https://addons.mozilla.org/en-US/firefox/addon/189
	Greasemonkey Allows you to customize the way a webpage displays using small bits of JavaScript. https://addons.mozilla.org/en-US/firefox/addon/748
	Html Validator 0.8.5.8 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. https://addons.mozilla.org/en-US/firefox/addon/249
	IE Tab 1.5.20090525 IE Tab - an extension from Taiwan, features: Embedding Internet Explorer in tabs of Mozilla/Firefox... https://addons.mozilla.org/en-US/firefox/addon/1419
	Selenium IDE 1.0.2 Selenium IDE is an integrated development environment for Selenium tests. It is implemented as a Firefox extension, and allows you to record, edit, and debug tests. Selenium IDE includes the entire Selenium Core, allowing you to easily and quickly... https://addons.mozilla.org/en-US/firefox/addon/2079
	Web Developer 1.1.8 The Web Developer extension adds a menu and a toolbar with various web developer tools. https://addons.mozilla.org/en-US/firefox/addon/60
	Mozilla Labs - Ubiquity 0.1.9 An extension that allows for the use of dynamic commands in Firefox. https://addons.mozilla.org/en-US/firefox/addon/9527
	Text2Link 1.9.4 Text2Link is a simple and easy-to-use way to copy the text of a link, or to open URLs and send emails to addresses not marked-up as HTML links. https://addons.mozilla.org/en-US/firefox/addon/6003
	Tab URL Copier 1.1.9 Copies the URLs of all open tabs. Puts 'Copy Tab URLs' item in right click menu of tabs and Edit main menu. Useful for bibliographies, quickly sending someone a list of pages to view etc. Can now open tabs from previously copied... https://addons.mozilla.org/en-US/firefox/addon/2069
	Wired-Marker 3.1.09060400 Wired-Marker(http://www.wired-marker.org/en/) is a permanent (indelible) highlighter that you use on Web pages. The highlighter, which comes in various colors and styles, is a kind of electronic bookmark that serves as a guide when you revisit a Web page. The highlighted content is automatically recorded in a scrapbook and saved. https://addons.mozilla.org/en-US/firefox/addon/6219
	YSlow 2.0.0b6 YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites. https://addons.mozilla.org/en-US/firefox/addon/5369
	FireShot 0.78 FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part). Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers. The captures can be: - uploaded to FREE public screenshot hosting - saved to disk (PNG, GIF, JPEG, BMP) - printed - copied to clipboard - e-mailed - sent to configurable external editor for further processing. https://addons.mozilla.org/en-US/firefox/addon/5648
	Text Area Resizer & Mover 1.80 Allows to easily resize or even move textareas. https://addons.mozilla.org/en-US/firefox/addon/8287

There are actually two parts to a shopping cart application. The first consists of the actual shopping cart (where the users search and buy items from) and the other is the administrative portion where tasks such as setting price, adding/deleting items to the database are done.

Shopping Cart

An Internet shopping cart actually consists of many subparts. These are the basics:

• Catalog
• Session Tracking
• Search Engine
• Security
• Payment
• Return/Exchanges

Catalog

A catalog is information about goods. Customers can browse the catalog (web pages) and see what there is in stock. Each good will most likely be composed of the name, picture, and price. Rather than assigning an item to each web page, the items can be generated dynamically from a database on to one page. Instead of listing all items on one page, a customer can browse through page by page. (All the items will be browsed page by page. For example, if there are 20 items, then it’s broken down into 4 pages. If there are 100 items, it will be broken down into 25 pages, with links that say Next/Back so they can go to the next page. In a catalog, it’s preferable that items be listed in categories.

Session Tracking

While a customer is browsing a catalog and looking for items, there has to be a way to keep track of what items he/she clicks on (so it gets sent to the customer’s shopping bag). This is done through session tracking. On check out, the check out process will tell them to register (fill in their information and pick a username and password) before checking out. The information, after they register, is saved in the database so they can login next time they enter the site and not have to reenter it again (all except credit card information).

Search Engine

This is closely related to the catalog. Rather than browsing and clicking links to find the item the customer wants, they can go to a search textbox and search for an item. This will be located on a visible spot on each page. After the customer submits the search, it will display the results like a catalog with Next/Back links.

Security

This is vital when processing credit cards and keeping customer information safe. Information submitted by the customer will be encrypted and stored in the database. Also, when submitting information so credit cards get processed, it will be submitted under an SSL secure connection. A logo can be shown by whomever company handles the SSL to make it shown that there is in fact security.

Payment

Directly connected with session tracking and security. Before checking out, customers will have to submit valid information about themselves. They will be sent to a form page under SSL where they must put valid information. After they submit, the data will be validated then sent off to a gateway where the funds will be sent to a merchant account. All done securely. An automatic e-mail will be sent to the user when this process is done.

Return/Exchanges
Done as secure as Payment. The customer will pick which item he wants to return, put all the necessary information from the invoice they received, and the return/exchange will be processed.

Administrative

The administrative portion consists of two basic subparts:

• Content Management System (CMS)
• Data Inventory

Content Management System (CMS)
There will be pages on the web site that have significant importance. For example, the home page and the catalog pages. These are pages that will constantly be changing. (The home page can contain items on sale, popular items, “just in,” etc. It might also be a good idea to include some of this home page information on the catalog pages because they are constantly browsed.)

Instead of changing the pages manually (opening up the page, changing the source code of each page), it will be faster and safer (changing the source code has to be done carefully so no errors occur) to do it through an administrative feature. You can go into an administrative panel, and just change that portion of the page that you want to update. There would never be a need to look at any code, just a click, type, and submit. Everything will be done through options. This is what a CMS does. Manages the content of pages.

Data Inventory

There will be a section under the administrative feature where company employees can insert/update/delete information from the database. This information can be customer, item, purchase information. They can also check out a queue of the items customers have purchased.

Shopping Cart Application Add-ons

Contingency Plan

A plan that’s executed if something fails or is performing poorly. For example, if the host goes down, there’s an error in the application, or there’s a hacker break-in.

Automation

Schedule content through the content manager. Can assign by date when something will be on sale, for example. When the date comes, it will display the new information on the page automatically.

Forum/Message Board

This will create an online community.

Chat

Where people can interact in real time.

Rating

Each item can have its own rating. For example, 1 out of 5 stars.

Reviews
Users can critique each item. Contains language filter.

Reports

Stats can be generated according to customer’s habits. What they click on, what the buy, etc. Reports can be generated according to this information. As an option, automated actions can be taken upon reporting information. For example, if a customer has bought purely shoes in the past from the site, then show shoes on the home page.

Advanced Search

Search not only by item name, but by price range, date range, and any other related information.

Data Export

Export information from the database as text files, XML, Access and Excel.

Mailing Lists

Send customers e-mails with news on prices, offers, new items, etc.

Portals

A page that contains links and other related information about other sites.

Gift Certificate

Gift Certificates can be bought online so it can be used in-store or online.

Site Map

Will contain a list or a map of all the sections and pages of the web site for quick navigation.

Other Online Marketing Options:

• Affiliates
• Web Rings
• Forums
• Search Engine Submission
• METATAG creation

This is a paper that I wrote for an Information Systems class in 2002. It gives a basic overview of web applications – the language and how data is transmitted across the Internet from the user to the server (the web site the user is trying to view) and back to the user. It uses ColdFusion as an example. Also talks about Flash, a multimedia technology. This essay was written in 2002, so it is a bit outdated, however, the principles of web technologies are still the same.