www.tomauger.com :: home page

WHAT'S NEW	See all BLOG CATEGORIES
tomauger.com :: WP Wrapper June 29, 2009 JavaScript: Unobtrusive Script Execution onLoad or on DOMReady that Plays Nice with Legacy BODY onLoad Filed under: HTML, JavaScript, Tips and Tricks, Web Development, XHTML It’s been documented quite a bit on the web already: proper use of unobtrusive JavaScript in your web pages to achieve not only behavioural separation (keeping content, style and functionality separated into HTML, CSS and JavaScript documents respectively) but also degrade gracefully, to support browsers or platforms where JavaScript is not available. These two concepts form the heart of the development ethic in New Web development: Keep your HTML markup completely free of all inline styles and inline JavaScript (in essence, try to use only those attributes inside your HTML tags that are absolutely necessary Do not make JavaScript a requirement to be able to access content / functionality on your sites (anticipate the user who is not using JavaScript during the browsing experience) Using DOM traversal methods such as getElementsByTagName() and regular expressions on the class attribute, you can fairly easily parse through your markup and unobtrusively add in your behavioural JavaScript, eliminating the need to add onClick=”" or onMouseOver=”" attributes inline. However, this is all still done with JavaScript so at some point, the JavaScript code to do this unobtrusive replacement must be executed. Since it can only be executed once all the relevant DOM elements have been loaded, this has been traditionally done using the (inline) onLoad=”" attribute within the <BODY> tag. For the purists, this represents an issue since we’re not achieving total separation. One migh argue that even putting the <script> tag in the head of the document is too tight of a coupling, but I don’t know of anyone who has cracked that chestnut yet, nor does it seem likely that we’re even going to go there. Regardless of whether you’re that die-hard, there’s a certain elegance in letting your scripts execute themselves without any further dependencies in the HTML - you include the external .js file in your HTML’s header tag and it takes care of itself from then on. Set it and forget it. (more…) Comments (0) January 28, 2009 Western Digital MyBook Locking Up Windows Filed under: Hardware, Technology, Tips and Tricks Apparently, the Western Digital MyBook line of external USB/Firewire hard drives have their share of problems. Fortunately, I haven’t had (knock on linoleum) the sorts of hardware failures that many have reported. However, when using the MyBook via 4-pin firewire attached to my smoking Dell XPS Notebook, I have intermittently experienced complete lockups as the Plug and Play driver kicks in and craps out. It hasn’t helped installing the WD Drivers that are highly suspect, so in fact I uninstalled everything on my computer that smacked of “Western” or “Digital” (well, sort of) using Add/Remove Programs. One trick that appears to be working is quite simple: don’t plug the power into the hard drive until AFTER you have plugged the firewire cable into the computer. Could be blatant superstition, but so far, so good. Okay, to be honest, I’ve only tried it the one time but that time it worked!! Anyway, just a tip. Try it out if you’re experiencing troubles. Let me know how it turns out. Then buy Seagate. Comments (0) January 26, 2009 Flash CS4 Motion Tween - Weird Symbol Swapping Filed under: Flash / ActionScript, Technology So, with great trepidation I unleashed just a tiny little portion of CS4 on my primary production workstation a few weeks ago: Flash CS4 and Dreamweaver CS4. I foolishly decided to work on what was supposed to be a dead-simple mini project (with a mini deadline) using Flash CS4. Sort of a “trial by fire”. Well, I got burnt. Badly. Turned-on by the new Timeline / Motion Tweening model (they finally listened and brought back the AfterEffects-style animation model from LiveMotion - remember LiveMotion?) I jumped into a very simple project: I was going to do a little “slideshow” of images that would simply fade in, grow a little on the screen and then fade out. Sounds dead simple, right? And in CS3 it would have been a snap. Turns out that it IS a snap in CS4, it just took me over two weeks to figure it out, with Jen DeHaan of Adobe’s patient help. Sounds like the cats on the Adobe Flash team made some pretty funky decisions regarding the new timeline. Let me walk you through what I’ve learned. Or you can just follow the threads on the Adobe Forums here and here. In a nutshell the problem is this: by default, the behaviour of the new motion tween in Flash CS4 is that it takes over the entire layer that it is on. As much as the Adobe guys claim that this is “object-level” motion tween, it still completely consumes the layer it’s on in the timeline. What’s worse, by default, it’s actually very hard to mix two different movieClip or Graphic symbol animations on the same layer of the timeline. What occurs is that if you have one symbol with a Motion Tween attached to it in a layer, and then on some later frame in that same layer you try to add a Motion Tween to a different symbol, that symbol gets hijacked and actually physically becomes the earlier symbol. That’s right. You drag a symbol onto a layer that already has a Motion Tweened symbol on it, and as soon as you add Motion Tween to the new symbol - BAM! it becomes the other symbol. In fact, even if you look at that symbol in the Library, it’s been changed! Don’t believe me? Read on… (more…) Comments (0)

LINKS
SNAPSDiary
theFORUM
Online Games

THINGS TO DO
Zeitguys Apparel can be viewed, purchased, even customized online. We've got an online store at Zazzle.com. Very cool stuff. Are you hip? Are you with it? Are you a Zeitguy or Zeitgal? Oh, man - then get yourself over to the Zeitguys Apparel store! The Blog contains useful information that I want to make sure is indexable and accessible to search engines. Tutorials, tips, and stuff I've unearthed with difficulty will find their way here for the reference of the rrest of humanity. Or something like that. Do you enjoy reading or writing poetry, or sharing your ideas on various topics such as humour, politics or sex? Then check out theFORUM. My SNAPSDiary is a visual photojournal. Updated often, so stop by and check it out! If you like games, check out Val's Chess online, or play a solitaire game of Shanghai. Valen's Tome is a fully searchable visual database of all Basic and Advanced Magic: The Gathering cards (40,000+ cards!). If you were a fan of the Amiga platform, check out my Shrine to the computer legend and its mythical games.

THE WALL
cloud - you need a unix server that can run Perl (all do). And you need read/write access to a directory somewhere on the server. The rest is a no-brainer. - Tom

print web branding 3d modeling illustration

projects languages process projects in progress

online mixes playlists / sets composition philosophy technique

user interface chat/forum security games database dynamic content physics client/server

Perl JavaScript Lingo ActionScript ASP SQL

lifecycle IA / usability creativity testing

proposal assessment brainstorm brief UI design

click a design category at right for samples

Design is about more than pretty graphics. Design is about researching, understanding and planning. It's about balance, form and message; environment, audience and impact. It's about conception and the implementation of those concepts.

In this section I have collected work I have designed and produced in various media.

print|web|branding|modeling|illustration

resume|bio|links|SNAPSDiary|forum

I got into the print industry in 1990. Since then I've progressed from the 55 lpi b&w offset lithography of the Faculty of Arts newsletter. My work has involved layout design, logo design, large-format, stochastic/fm screening, specialty inks, glosses, varnishes, foil stamps, even die-cuts and scoring for package design. On the prepress side I've done film stripping, trapping, imposition, colour calibration and correction, drum and film scanning, and of course the obligatory 2 a.m. press aprovals! view print portfolio [slideshow OFF]

develop|deejay

bio|resume

I love designing for the web for a host of reasons: it requires greater discipline than static page design and has to take the client's parameters and preferences into account; it offers the challenge of interactivity and dynamic content; there is an appealing public immediacy to publishing a website that the whole world could potentially see.

This portfolio collects my online work. For interactive new media projects, see the development section on this page. view web design portfolio [slideshow OFF]

develop|deejay

bio|resume

A brand is not a logo, a colour set or a font. It is a perception, an identity: a message. The audience is as much a part of it as the brand holder, the delivery as much as the content.

Here I have assembled various logos, corporate ID packages, styleguides and document templates that I have been asked to create.

Branding Case Study - eClore view branding portfolio [slideshow OFF]

develop|deejay

bio|resume

Who needs stock photography when you can create photorealistic objects yourself that can be placed, posed, lit, shot and close-cropped any way you like?

In this portfolio I have gathered some of the more interesting 3D models and animations that I have done over the years using a host of software and animation systems. view 3D modeling & animation portfolio [slideshow OFF]

develop|deejay

bio|resume

choose artistic or business illustration

Illustration. The visual idea. Whether for purely artistic reasons, or to communicate a complex business concept, creating an illustration that speaks to its audience and attracts the eye is always an enjoyable challenge. I use a combination of digital tools for my illustrations: 3D modeling, Photoshop, Fractal Design Painter and of course, Adobe Illustrator.

Click on "artistic" or "business" below (or in the hierarchical menu at right) to see those portfolios.

artistic|business

bio|resume

artistic illustration
portfolio slideshow

Art for art's sake.
It's about letting creativity make use of whatever tools and materials are at its disposal. Digital or traditional media, unorthodox methods, complex mathematical formulae. Whatever gets the job done.

Check out some of my favourite artistic pieces - some for clients, but many just for the sheer joy of creating.

view artistic illustration portfolio [slideshow off]

business

develop|deejay

bio|resume

business illustration
portfolio slideshow

An image is worth
a thousand bucks. A good illustration can inspire the client, create a "graphic bite" that they hold on to long after the presentation is over.

Here are just a few examples of business illustrations that were used in pitches, presentations and deliverables.

view business illustration portfolio [slideshow off]

artistic

develop|deejay

bio|resume

click a development category at right

I have been programming since I was 12, but I've learned that product and solution development is much more than stringing together a few hundred lines of spaghetti code.

An effective development cycle requires a solid understanding of the requirements, a solid architecture of the solution framework, a realistic plan for developing and deploying the project, a rigorous testing model and metrics that will drive future development forward.
Here you can explore the wide range of development projects I've been involved with, working with a number of environments and languages.

chat|database|server|games|physics

resume|bio

snaps|forum|chess

User Interface when you can create photorealistic objects yourself that can be placed, posed, lit, shot and close-cropped any way you like?

In this portfolio I have gathered some of the more interesting 3D models and animations that I have done over the years using a host of software and animation systems. view user interface examples [slideshow OFF]

design|deejay

bio|resume

It's about community - people's undeniable need to communicate, to share ideas, to touch each other. To reach beyond and through the veil of virtuality and make contact.

I have created chat engines and user forums that have been used in games, distance education, online customer service and special interest groups. Most have involved Perl for the back-end and JavaScript for the user interface layer. I have only ever explored the stateless model, since one of my philosophies is to use ubiquitous technology grant users immediate accessibility without the need to download additional components or plugins.

click for a list of chat / forums installations view chatpage and forum examples [slideshow OFF]

design|deejay

bio|resume

Security when you can create photorealistic objects yourself that can be placed, posed, lit, shot and close-cropped any way you like?

In this portfolio I have gathered some of the more interesting 3D models and animations that I have done over the years using a host of software and animation systems. view security programming examples [slideshow OFF]

design|deejay

bio|resume

The power of the internet to deliver high-value content these days leaves the door wide open to a huge gamut of online gaming possibilities.

Currently I have two working* games up and running on tomauger.com: Chess, and Shanghai. A number of other exciting projects are in the works, but if there's one thing I've learned: writing a good game by yourself takes time!

*with some small bugs and quirks!

design|deejay

bio|resume

Chess
is written entirely in Perl / JavaScript over flatfile and SQL databases, requiring absolutely no download from the client and making it perfectly easy for the end-user to get into the game fast.

Users can play each other in real-time, with a chatpage for communication, or they can play asynchronously, with email notification when their opponent has moved.

The game features point-and-click moving, illegal move and check detection and multiple board sizes (for different screen resolutions).

In the Lobby area, users can see who's playing and how they're doing, they can create new games or join existing ones.

Play Chess @ www.tomauger.com

design|deejay

bio|resume

I created Shanghai because I found myself constantly playing a shareware version of the game and it was ugly! I rendered each 3D tile using Strata StudioPro and programmed the game using Lingo in Macromedia Director.

I've never actually managed to beat my version, so I'm not sure if the victory condition is even working at all, but the hardest part was programming the tile set-up and randomization procedure.

The menu drag function is the offshoot of some physical simulation experiments I was working on at the time. Completely gratuitous, wacky fun.

Try the Ancient Game of Shanghai.

design|deejay

bio|resume

Mercury is a game framework that's missing a concept. It started off a visual experiment - I was trying to simulate a basic "metablob" functionality - the effect of two drops of mercury as they approach each other. The effect was so cool I started building a Tetris-type game framework around it. The principle: place similarly-coloured blobs diagonally next to each other and they will "fuse".

But so what? Without the driving concept the game is just an excuse for cool graphics. Any suggestions? What should the game objectives be? How do you win or lose? What should future levels contain to make them more challenging? If you have ideas, contact me.

Take a look at Mercury alpha.

design|deejay

bio|resume

You almost always need a database to store, manage and serve up content, whether it's user-input, pre-seeded data or data captured from external sources.

I work in Oracle, MySQL, BerkelyDB, MS Access, or Pipe-delimited Flatfiles; whichever is most appropriate to the platform, delivery method, content and programming environment being used.

click for a list of projects and DB types

design|deejay

bio|resume

An excellent example of MySQL/Perl interaction
is VALEN's Tome - an informal exploration of over 4000 collectible Magic:The Gathering(tm) cards.

The data is seeded using a Perl capture routine that visits the Wizards of the Coast website, downloads and parses an HTML list of all their currently active cards, then visits their card image database and captures the URL of all their card images. All of this information is stored in a relational MySQL database. Users can then browse and query against this database using a complex, visual query form.

jump to VALEN's Tome

design|deejay

bio|resume

Another obvious example of MySQL serving XML-like content to a web service is the portfolio found on this very site.

All portfolio items, images and hit frequency data are stored in an ITEMS table with foreign keys to a HEADER table. All headers have foreign keys to a SECTION table which contains the major portfolio sections.

This data is then encoded on demand into an XML markup that is merged with a DOM-compliant HTML page template. Inline JavaScript on the resulting page handles everything from resizing the window to fit the content, to automating the slideshow to storing user preferences in session cookies.

design|deejay

bio|resume

Chat / Forum when you can create photorealistic objects yourself that can be placed, posed, lit, shot and close-cropped any way you like?

In this portfolio I have gathered some of the more interesting 3D models and animations that I have done over the years using a host of software and animation systems. view chat / forum examples [slideshow OFF]

design|deejay

bio|resume

I'm no scientist, nor much of a mathematician, but I've come up with a few interesting effects using math and physics. Mostly eye-candy, some of these have practical applications in the real world, from video games to data modeling and visualisation to human-computer interaction and user interface design.

design|deejay

bio|resume

Particles

	Viscosity simulates viscuous molecular motion. Parameters include momentum, inertia, initial force and drag.
	Shower is a continuous explosive particle emitter. Basic trig stuff, really. Parameters include force, wobble, decay and gravity.
	Repulsor demonstrates particle elasticity. Move the "repulsor brush" through the spring field. Parameters include speed, damping, brush force and brush radius.

* requires Shockwave Player to run. Free install [HERE]

design|deejay

bio|resume

3D Math

This 3D Projection of an XML dump from a database demonstrates how data polarized along three axes can be visualized in 3 dimensional space.
A simple rotating Starfield giving the illusion of rapid movement through space.

* requires Shockwave Player to run. Free install [HERE]

design|deejay

bio|resume

My only client-server project was a big one: open a Perl secure socket connection to a remote real-time stock server, send a coded request based on the user's search input, parse the binary data coming back against a predetermined API format, and then parcel the whole thing up and merge with some pseudo-HTML markup templates and a graphical user interface.

Creating the actual socket connection was the easy part, using Perl::MOD IO::Socket. The biggest stumbling block of the entire project was getting the data stream to read correctly. After days of hair-pulling, it turned out that the data was being sent in little-endian format and my Unix-based script was assuming big-endian (MSB-first) data.

click to see some code fragments

design|deejay

bio|resume

DJ Valentine in da house. Mixing it up for all you funky people out there in the world wide weird. Spinning deep house, lounge, techno, world and drum & bass. Laying down original tracks and kicking live percussion while the bass is pumping.

visit soundZero - dj valentine's home on the web.

design|develop

mixes

This site will not work correctly using Mac IE 5.0 Download latest version?

The SNAPSDiary @ tomauger.com is an online visual blog featuring an assortment of photographs and text from the days and lives of Tom, Sophie, Jake, The Poupousses and the rest of the gang.

It's fun, it's visual, it loads fast and it features images from all around the world (well, Canada and Europe to be more precise.) Check it out and see what one guy and an Olympus E-10 Digital SLR can do!

Programmed using Perl and JavaScript. The image and text "database" is the directory structure itself.

With enough demand, I will implement a "multiple user" version which will allow you to create your own SNAPSDiary account so you can share your own images with the world.

Click on the link under your mouse to take you there!

theFORUM @ tomauger.com is the latest version of theFORUM software created by myself for a variety of clients on the web. The original intention was to create a simple way for users of a site to post messages - a basic online forum.

Since its early incarnations, the FORUM was distinguished by its extended format - messages were in one long scrolling list, 25 to 50 messages at a time, with most recent messages first. This reduces the interface clutter and focuses on continuity.

TheFORUM software has evolved considerably, to include an online dictionary and thesaurus, user-definable categories, user profiles, email alerts, simple markup tags, swearword parser (that was fun to write) and full search capabilities.

TheFORUM is based on Perl/BerkeleyDB and JavaScript.

Click on the link under your mouse and express yourself!

I love games and gaming, so it's natural that I try my hand at creating some games online. So far, the actual number of debugged and tested offerings are few, but there are a number of exciting projects in the make.

Currently you can try your hand at the classic Mah Jongg tiles-based solitaire game, or you can challenge another human opponent to a game of Chess in real-time or asynchronously.

Click the link under your mouse to go to the Games section of my portfolio. From there you can follow the links to the online games

Thanks for your interest in Tom Auger and d3.

Tom Auger can be reached at the coordinates below:

Why display my coordinates as graphics and not copy-and-pasteable text? A lot of web crawlers ("spiders"/"robots") traverse websites looking for text and tags that contain email addresses. They then store these email addresses in mass-mailing lists to be sold to third parties for spam marketing campaigns. I have been attacked many times this way and have decided to no longer show my email address in plain text or HTML on my site. I apologize for the slight inconvenience: luckily I've made my email address easy to remember!

Disney Consumer Products (Canada)	Media Asset / News Management	Berkeley DB
www.borgandvella.com	Mailing List	Flatfile
www.borgandvella.com	Event Calendar	Flatfile
www.cal-look.com	User Forum	Berkeley DB
www.linuxstocknews.com	Weekly Newsletter & Mailing List	Flatfile & Berkeley DB
www.gate403.com	Monthly Jazz Lineup	MySQL
CHESS @ tomauger.com	User and Games Databases	Berkeley DB
The FORUM @ tomauger.com	User Forum	Berkeley DB
VALEN's Tome	Queryable Trading Card Database	MySQL
www.tomauger.com	Portfolio Content Management Server	MySQL
SNAPSDiary @ tomauger.com	Photo Scrapbook	Hashed Files & Dirs

# This snippet is an exerpt of the API definition for the datastream
# This is basically a field definition: FieldName, FieldLength
@API13 = ( ['Type' , 1],['Error' , 1], ['MsgId' , 1], ['Base' , 13], ['Name' , 31]) # /snip/

# Later in the code, we parse and transform the data
if ($byte_length == 184) # Basic error checking
{

my $API13Ref = FillStruct (\@API13, $response); # turn datastream into a hash

DivideDailys ($API13Ref, qw (Open1 Open2 High Low PrevClose Last Bid Ask) ); # algorithmic transforms

$API13Ref->{'Tick'} = $Tick[$API13Ref->{'Tick'}]; # additional basic transforms

my %SnapQuote = %$API13Ref; # just to eliminate refs to refs

# now, load the pseudo-markup HTML template and
# load in the appropriate data fields where desired
open TEMPLATE, "$d_template_dir/$no_match_tpl";
while (

June 29, 2009 JavaScript: Unobtrusive Script Execution onLoad or on DOMReady that Plays Nice with Legacy BODY onLoad

(more…)

January 28, 2009 Western Digital MyBook Locking Up Windows

January 26, 2009 Flash CS4 Motion Tween - Weird Symbol Swapping

June 29, 2009
JavaScript: Unobtrusive Script Execution onLoad or on DOMReady that Plays Nice with Legacy BODY onLoad

January 28, 2009
Western Digital MyBook Locking Up Windows

January 26, 2009
Flash CS4 Motion Tween - Weird Symbol Swapping