Count All Those Likes

Open a New Window and Immediately Print It

Restrict Viewing Based on Day and Time

Searching on JSON List With Results Based On Relevance

Progressive Display of List Items

Make Sure Variables Exist

Sorting Table Rows

A Simple Encoding Page

Building a Unique ID

Building Clones

Calculating Color Contrast

Handling the Expected Identifier Error

Extending and Duplicating JSON Data

Sizing, Filling, Placing and Opening Popup Windows

Popup Menus

Animated Glow

Animated Scrolling

Using Canvas to Display a CNN-Style Ticker

Making HTML5 Safe for IE8 and Earlier

HTML5 Canvas Backgrounds

Creating the Accordion Effect

Moving Items Horizontally (iTunes Store Style)

Change Content On a Specific Date

Loading Multiple RSS Feeds Via Google

HTML Tag Simplification

Floating Forms

Pick Lotto Numbers

Clean a Number String

Web Survey Application

Dynamic Liquid Template

Fix Apostrophes for Databases

Dynamic Set-Width Template

Creating a Favorites Menu

Format Currency

Display Long Select Boxes

Add Fields Dynamically

A Kinder, Gentler Reset

Nesting Structure in Javascript Object Notation (JSON)

Universal Init Script

Toggle Graphics

Local Variables vs. Global Variables

Expanding Hierarchical Menus

Delete All Spaces In a String

Convert Regular Latitude and Longitude to Digital

Universal Validation Project

Age Validation System

Data Validation

Creating an Interactive Google Map

Accessing JSON data

Automatically Resize Window

Shopping Cart

Cross-browser Onload

Decode URL Encoded Data

Pass Parameters from PHP

Process XML/XSLT Externally or Internally

Copy to Clipboard

Browser Detection

Fixing Objects in Internet Explorer 6

Generic Text Parser

Insert Text Using AJAX

Convert Web Log to Comma-Separated Values

Determine Line Endings

Home Page Calendar

Solving Problems with OnLoad

508-compliant Customized Tooltips

Interactive Character Counter

Pick A Folder, Any Folder

Trimming Spaces

Back Button

Color Picker

Highlight Table Row

Disable Enter Key

Disable Right Mouse Button in Windows

Display Online Help in Popup Window

Dart Board


Precious Metals Calculator

Fading Slide Show

Does Anybody Really Know What Time It Is?

Open Image In New Window

Type Ahead in a Drop-Down Combo Box

Stop Multiple Submissions

Include a JavaScript file

Block JavaScript Errors

My Experience With Javascript

I started learning Javascript about the same time as everyone else did ~~ way back in 1996, back when the World Wide Web started getting popular and Netscape brought out Javascript. I had just become a web developer and designer for Lost Treasure magazine and, like most other people, started using Javascript to provide cool applications for the website.

My preparation for Javascript began with other scripting languages, such as HyperTalk, the language behind Apple's HyperCard, and REXX, the scripting languaged used in IBM mainframes. My experience in REXX came about because I was a tech writer at Amoco Production Company, one of Amoco's research facilities. They wanted online help to be built into their products (a quaint concept at the time) and I was glad to help out. As it turned out, internal politics got in the way and the product itself was never distributed outside the group.

One such Javascripts applications I did was what we called the Precious Metals Calculator. Lost Treasure is a magazine for people who prospect for gold, dive on sunken shipwrecks and hunt for coins with metal detectors. The Precious Metals Calculator was designed to get the latest prices of gold, silver and platinum from a website (in the early days, a site ran by a company named Kitco) and, based on the amount of the metal the web visitor had, determine the current value on the metal in his possession. There was no other web app like that available anywhere in 1996.

Of course, I also provided other Javascript apps common in those days: moving text tickers, countdown timers, clocks and other such things. Javascript was awfully limited in those days, but things really exploded with the advent of the Document Object Model (DOM) and XMLHttpRequest in the early years of the 21st Century.

My first use of XMLHttpRequest (or AJAX, as it was commonly called in 2005) was with the same Precious Metals Calculator I've already written about. Before XMLHttpRequest, I gathered the data for the Precious Metals Calculator using server-side technology, reading the current metals price from a daily email I received. While this method was reliable, it was accurate only once a day. I longed for a system that was up-to-the-minute. I finally achieved that when I could start reading the Yahoo website via XMLHttpRequest and giving the visitors the current value in real time.

The ability to access the DOM was the point at which I could start moving away from the server-side entirely. I had previously been saddled with having to use technologies like Active Server Pages (ASP) or ColdFusion to control the user interface, but I quickly found that I barely needed to deal with the server-side at all, except for security and SQL database access. Practically everything else could now be done completely in the browser.

My first experience with that was while at AOL. That was a great experience. On the internal side of things, we used a Content Management System called Typo3, an open source system that itself was still in development. Originating out of Germany, most of the documentation was still written in German when we first started using it. And, as a relatively new product, there were things it couldn't do that we wanted it to do. I was assigned the task of adding the ability to tweak the look of the page, jiggering it with Javascript via the DOM.

I also started using Javascript frameworks at AOL. I was assigned the task of fixing a particularly problematic calendar written in Dojo. Not only did I fix it, I improved on it. The calendar was used by the advertising department to display upcoming meetings and events, but was dreadfully slow. I discovered the reason it was slow: it was bringing in all the upcoming meetings and events for the entire year upon opening the web app. I thought to myself that there was no reason for that. The "A" in AJAX stands for "asynchronous." Why not just open the current month and populate the calendar asynchronously? Adjusting the Dojo calendar to bring in the data asynchronously solved the problem.

It was the advent of Javascript Object Notation (JSON) that led me to creating the most comprehensive web app I had ever attempted: the Data Query project while at General Dynamics. This project started out as a proof-of-concept. I was asked to create a web-based version of a report that, at that time, was simply created on the server in Java and printed out on paper for the analysts at the Drug Enforcement Administration. This was no simple report, either. The data was gleaned from billions of pieces of information. The subset of this information sometimes produced reports that were hundreds of pages long. Not only was the DEA killing entire forests of trees, it was becoming nearly impossible to find and compare the information they were seeking in such large reports.

But I wasn't just building a web analogue to a paper-based report. They had some strict requirements for it. They needed the ability to compare information that was contained in different parts of the report. They needed to interactively sort the information based on any column of the section. They needed to drill down into any row of the section. They needed to limit the users' ability to print the data on paper. I was able to accomplish all these things in my proof-of-concept.

They liked my concept so much that they wanted me to do the project for real. I didn't expect that. To simplify things, the first thing I decided to do was create what looked like a six-page website out of a single page. I was able to accomplish this by creating it on the fly via a JSON with all the data (created by the back-end Java program already in use). Just like every large project I've ever tackled, it required that I learn some new things ~~ in this case, it was learning how to create and delete nodes, as well as finding out the intricacies of JSON creation on the fly.

By the time I finished that project, I was woefully behind in Javascript technologies. I had gotten by up to then with Core Javascript, being able to mostly avoid Javascript libraries. I had dabbled a little with things like Dojo and Scriotaculous (and didn't like what I had seen). YUJI was a little more palatable, but when I finished the General Dynmics Data Query project, everyone was using jQuery for everything. Also, there were new concepts, such as node.js (which turned Javascript into a server0 and backbone.js (which game Javascript model/view/controller capabilities) to contend with.

Although I'm trying to ramp up for these technologies, I am strongest in tchnologies related to Core Javascript, HTML5 and CSS 3.0 today.