CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <script type="text/javascript"> /* [ ] [ SCHILLMANIA! | 2009 edition ] [ ----------------------------------------------------- ] [ 200902xx ] [ APPROACH [ ] [ Khoi Vinh + TheRoot42 + others as design inspiration. ] [ Less is more. The grid is good. That is all. ] [ ] [ ABOOT ] [ ] [ Name: Scott Schiller ] [ Background: Canadian ] [ Live/Work: San Francisco | Flickr/Yahoo! ] [ Email: i'd like to work at yahoo.com ] */ var APP_XHTML = false; // Apparently your agent doesn't support application/xhtml+xml (or has issues with it. try ?xhtml=true to force it.) var urlRoot = '/'; </script> <title>The creative and technical vents of Scott Schiller</title> <meta name="description" content="Scott Schiller's personal, experimental web development / front-end engineering site. This is a collection of (mostly) standards-based and progressive development work, wacky JavaScript + HTML + CSS ideas and fun user interfaces." /> <meta name="keywords" content="Scott Schiller, Schill, object-oriented javascript design, frontend engineering, flickr, yahoo, dhtml, ajax, javascript, javascript sound, soundmanager, snowstorm, web standards, css, javascript animation" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <meta name="robots" content="all" /> <meta name="author" content="Scott Schiller" /> <meta name="copyright" content="Copyright (C) 1997 onwards Scott Schiller" /> <meta name="language" content="en-us" /> <base href="//www.schillmania.com/" /> <link rel="stylesheet" media="screen" href="2009/2009.css" /><link rel="alternate" type="application/rss+xml" href="/content/schillmania_rss.xml" title="RSS feed for Schillmania.com" /> <link rel="shortcut icon" href="https://schillmania.com/favicon.ico" /> <script type="text/javascript" src="2009/yui.js"></script> <script type="text/javascript" src="2009/2009.js"></script> <script type="text/javascript" src="common/stats.js"></script> </head> <body id="body"> <div id="site"> <div id="content"> <div id="container"> <div id="header"> <div id="header-content"> <div id="logo"> <a href="https://schillmania.com/" title="The creative and technical vents of Scott Schiller">Schillmania!</a> </div> <div id="theme-archive"> <div id="site-archives"> <a href="?theme=2004" title="View the 2004 'now with more funk' theme">04</a> <a href="?theme=2005" title="View the 2005 'bouncing icons' theme">05</a> <a href="?theme=2006" title="View the 2006 'work/life balance' theme">06</a> <a href="?theme=2007" title="View the 2007/08 'night/day' theme">07/08</a> <a href="?theme=2008" title="View the 08 'back to basics' theme">08</a> <a href="#theme=2009" title="2009 (current) theme" class="current">09</a> </div> </div> </div> <hr /> </div> <div id="lights" style="top:2em"> </div>  <div id="main-content"> <div id="entry-content"> <div class="top header"><h1>Armor Alley: Web Prototype</h1><div class="divider"> </div></div> <div class="copy"> <p class="header-comment">TL;DR version: I played this in the early 1990s on an old 8088-based IBM-PC compatible; this is my interpretation of it. Play now at <a href="http://www.schillmania.com/armor-alley/" title="Play the Armor Alley (Web Prototype) game">/armor-alley</a>. Related: <a href="http://www.flickr.com/photos/schill/sets/72157634655626918/" title="Photoset: Development process, hand-written notes, screenshots, debugging etc.">Development process</a>, screenshots etc. Also <a href="http://www.github.com/scottschiller/ArmorAlley/">on GitHub</a>.</p> <h2 id="interpretation">A browser-based interpretation of the classic 1990 game.</h2> <p>Armor Alley is a side-scrolling simulation involving strategy. The primary goal is to get a van across the battlefield to the enemy base. Of course, it is not that simple; the van is completely unarmed, and incredibly vulnerable. You must defend the van with a convoy of tanks, missile launchers and other units on the ground, in addition to providing air cover with your helicopter against identical enemy forces.</p> <div style="max-width:1920px;min-width:480px;margin: 1em auto;padding-top:2em"> <a href="http://www.schillmania.com/armor-alley/" title="Armor Alley (Web Prototype)" style="display:block;margin;0px;padding:0px"><img src="image/content/entries/2013/aa-title-screen.png" alt="Armor Alley: Web Prototype: Screenshot (scaled mode)" style="display:block;width:100%;max-width:1920px"/></a> <p class="header-comment" style="margin-top:0.5em">The Armor Alley Web Prototype home screen. <a href="http://www.schillmania.com/armor-alley/" title="Play the Armor Alley Web Prototype">Play it now</a> or read more about the original game, units and strategy <a href="http://en.wikipedia.org/wiki/Armor_alley" title="Armor Alley on Wikipedia">on Wikipedia</a>.</p> </div> <div style="max-width:1280px;margin:0px auto;padding-top:3em">  <div id="ytvideo">  </div> <p class="header-comment">A quick fly through of the AA Web Prototype in tutorial mode. Basic mechanics, defensive and offensive tactics are explained.</p> </div> <script> // this is because IE 8 is stupid and document rendering breaks after a normal inline <iframe>. (function() { var ytvideo, iframe; if (!navigator.userAgent.match(/MSIE [678]/i)) { ytvideo = document.getElementById('ytvideo'); iframe = document.createElement('iframe'); iframe.src = 'https://www.youtube-nocookie.com/embed/jH-RD43MLt4?rel=0'; iframe.style.border = 'none'; iframe.allowfullscreen = true; iframe.width = '100%'; iframe.height = '520'; ytvideo.appendChild(iframe); } }()); </script> <h2>Why do this?</h2> <p><i>... Because</i>.</p> <blockquote style="margin-bottom:2em">Any application that <i>can</i> be written in JavaScript, <i>will</i> eventually be written in JavaScript. -- <a href="http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html">Atwood's Law</a> (2007)</blockquote> <p>Writing a browser-based game using HTML, CSS and JavaScript is a great way to learn, re-learn and experiment with approaches to client-side programming. Games require a depth of logical thought, planning and effort to build, and encourage experimentation in architecture and development style.</p> <p>Performance and scalability are both important factors in building games, and both present learning opportunities in regards to writing performant code that is compatible with a number of platforms and devices. Regardless of fidelity, a working game prototype can be both educational and fun.</p> <div style="text-align:center"> <img src="image/content/entries/2013/armor-alley-dosbox-2.png" alt="Armor Alley, PC-DOS version, 1990 (running in DOSBox)" style="width:100%;max-width:754px"/> <p style="margin-top:-2.5em" class="header-comment">The reference: Armor Alley, PC-DOS version (1990)</p> </div> <h3>Premise</h3> <p>Build and defend convoys of Tanks, Missile Launchers, Infantry, Vans and Engineers as they cross the battlefield, using your helicopter for both offense and defense. The goal is to get your van to the enemy base on the other side of the battlefield.</p> <h3>Studying the original</h3> <div style="float:right;display:inline;width:50%;max-width:640px;margin:0px 1em 1em 1em"> <div> <a href="http://www.flickr.com/photos/schill/10476581506/in/set-72157634655626918/"><img src="http://farm4.staticflickr.com/3781/10476581506_a07faf5f50_b.jpg" alt="" style="width:100%;border:1px solid #ccc"/></a> </div> <p class="header-comment">The original box: Armor Alley, PC-DOS compatible version (1990.) Thank-you, eBay.</p> </div> <p>PC-DOS, 1990 (port from original Macintosh version)</p> <p>Side-scrolling, fixed-height, 4-bit colour</p> <p>Reusable patterns (vehicles, shrapnel, gun fire, smoke, explosions)</p> <p>Low-fi animations</p> <p>Numerous interactions / behaviours between vehicles in the environment. Numerous, but somewhat shallow and limited complexity; relatively straightforward implementation.</p> <h3>Scope</h3> <p>Entirely client-side technologies: HTML, JavaScript, CSS.</p> <p>First "level", standard vehicles and terrain elements including anti-aircraft turrets / "guns", but no armored bunkers.</p> <p>Basic enemy "AI", automated convoy building / ordering + enemy chopper actions / defense - likely difficult to truly emulate original behaviour.</p> <p>No network / multi-player.</p> <h3>Process</h3> <div style="float:right;display:inline;width:50%;max-width:640px;margin:0px 1em 1em 1em"> <div style="margin-bottom:0.5em"> <a href="http://www.flickr.com/photos/schill/9644488079/in/set-72157634655626918/"><img src="http://farm6.staticflickr.com/5328/9644488079_e81ed327d0_z.jpg" style="width:100%"/></a> </div> <div> <a href="http://www.flickr.com/photos/schill/9707753178/in/set-72157634655626918/"><img src="http://farm8.staticflickr.com/7330/9707753178_3d23dea006_z.jpg" alt="" style="width:100%"/></a> </div> <p class="header-comment">As with childhood family road trips: Source code, edited and annotated on the road.</p> </div> <p>Initial prototype: Basic landscape, terrain, vehicles, bunkers w/balloons and vehicle movement. Player helicopter can fly over terrain.</p> <p>Enemy vehicles added. Basics of enemy detection, gunfire, bombs & collision detection added.</p> <p>Infantry, bunkers, vehicle-specific interactions.</p> <p>Status bar, fuel line landing pads + repair / refueling / reloading actions.</p> <p>Smart missiles and radar system.</p> <p>Inventory / ordering system.</p> <p>Nearby object finding / detection (smart missiles, AI)</p> <h3 style="clear:left">Troubleshooting & debugging</h3> <p>Chrome DevTools: Frames, memory, JS / CPU profiling</p> <p>CSS transforms + JS feature detection</p> <p>Hot loops, object creation / memory use / garbage collection</p> <h3 style="clear:left">"Architecture"</h3> <div style="clear:right;float:right;display:inline;width:188px;margin:1em 0px 1em 2em"> <img src="image/content/entries/2013/aa-sprite.png" alt="Armor Alley Web Prototype: Game Sprite (development version)"/> <p class="header-comment">A tightly-packed sprite containing the majority of the in-game graphics, made for the Web Prototype.</p> </div> <p>Raw (vanilla) JS, SoundManager 2 for audio</p> <p>Good old-fashioned DOM elements for rendering UI vs. <code><canvas></code> or WebGL, etc. Benefits: Natural DOM <code>createElement()</code> for making game objects, CSS to style them, <code>className</code>-based manipulation, transitions and animations.</p> <p>JavaScript: <code>utils</code> helper for CSS class name manipulation, DOM events, node tree removal, object mixins, cloning etc.</p> <p>Controllers, i.e., <code>gameLoop</code> iterate over collections of game objects, calling each object's <code>animate()</code> method.</p> <p>If <code>animate()</code> returns <code>true</code>, object is dead and controller can remove it from the array. Pattern is repeated for collections of vehicles, gunfire, buildings etc.</p> <p>MVC-like theme: <code>css</code>, <code>data</code>, <code>dom</code>, <code>objects</code> interface is defined for major game objects.</p> <p>Some objects have child and/or parent objects, i.e., <code>bunker</code> <- <code>chain</code> -> <code>balloon</code>.</p> <p><code>frameCount</code> and modulus determine interval of behaviours - movement, firing, animation rate, enemy detection and so on - i.e., <code>if (frameCount % 10 === 0) { fire(); }</code></p> <p>Object names + types map between array names, constructor pattern, CSS class names (generally.) e.g., a van has <code>data.type</code> of 'van', CSS of <code>.van</code>, stored in <code>game.objects.vans</code> and so forth.</p> <p>Each object has a predictable DOM pattern, CSS class name and data structure.</p> <p><code>isEnemy</code> applies to JS, cascades to <code>.enemy</code> in CSS. UI + collision logic, otherwise, is mostly the same.</p> <h4>Collision detection / enemy + object interaction</h4> <p><code>nearbyOptions</code> - "who gets fired at?"</p> <p><code>nearbyObject()</code> - "is an X (i.e., helicopter) in range?"</p> <p>Object targeting - "move toward the helicopter"</p> <p>If there is an object overlap, call <code>target.hit()</code> and provide "source" object interface. Target determines interaction - i.e., target may die, but may also kill source.</p> <h4>Animations</h4> <p>Combination of <code>style.left/top</code>, some <code>backgroundPosition</code>-based sprite animation, and CSS animations and transitions.</p> <p>CSS step-based animations allow convenient <code>className</code>-triggered transitions, e.g., tank explosion: <code>.tank.dying {}</code> -> <code>.tank.dead {}</code></p> <p><code>animate()</code> method applies <code>vX</code> + <code>vY</code> to <code>x</code> + <code>y</code>, updates <code>style.top/left</code> (traditional) or transform (GPU-accelerated) properties to reposition DOM node.</p> <h4>"Inheritance"</h4> <p>Mixin-based inheritance of <code>data</code>, <code>css</code> structures etc. Common CSS class names (states), data attributes like <code>x</code>, <code>y</code>, <code>dead</code>, <code>isEnemy</code> etc.</p> <p>Common operations: Move sprite (DOM x/y), object hit, die are in left in a top-level <code>common</code> helper, similar to <code>utils</code>.</p> <h4>Performance</h4> <p>Use <code>transform: translate3d()</code> where supported for GPU-based motion of elements on x/y axis, vs. traditional left/top style changes. Translate avoids expensive repaints, instead using GPU-based compositing for motion.</p> <p>JS: Avoid creating excessive garbage (e.g., cloning objects mixin-style) in hot/expensive loops; reduce GC, RAM use and overall churn. Pass objects directly / by reference, avoid creating new objects or modifying original object values in loops.</p> <p>Object destruction / clean-up: Remove node tree, JS/DOM references and parent array reference in the object collection case.</p> <p>Minimize DOM "I/O": Cache node references and coordinates to reduce reflow due to read operations (e.g., <code>offsetWidth</code>.) Update client coordinates only on critical events like init and <code>window.onresize()</code>.</p>   <div style="max-width:1741px;min-width:480px;margin: 1em auto;padding-bottom:2em"> <img src="image/content/entries/2013/aa-timeline-with-transform.png" alt="Armor Alley: Web Prototype: GPU-accelerated transform:translate3d()" style="display:block;width:100%;max-width:1741px"/> <p class="header-comment">Web Prototype <i>with</i> GPU-accelerated <code>transform: translate3d()</code>, and room for improvement. Note that most frames are < 16 ms, 60+ fps.</p> </div> <div style="max-width:1741px;min-width:480px;margin: 1em auto;padding-bottom:2em"> <img src="image/content/entries/2013/aa-timeline-without-transform-3.png" alt="Armor Alley: Web Prototype: Traditional style.left/top-based animation (no GPU acceleration)" style="display:block;width:100%;max-width:1741px"/> <p class="header-comment">Web Prototype <i>without</i> GPU-accelerated <code>transform: translate3d()</code> - note lots of red (expensive repaint), and very slow frames.</p> </div> <div style="max-width:1280px;min-width:480px;margin: 1em auto"> <img src="image/content/entries/2013/chrome-devtools-memory-use.png" alt="Armor Alley: Web Prototype: RAM allocation in hot loop (Chrome DevTools)" style="display:block;width:100%;max-width:1280px"/> <p class="header-comment" style="margin-top:0.5em">This is why you don't create temporary cloned objects inside hot loops; that's a lot of garbage. Screenshot shows "spikey" RAM use and garbage collection events before the expensive function is shunted via <code>return false</code>. The proper fix involved changes to avoid object creation.</p> </div> <h5>Memory, DOM node count and JS/DOM garbage collection</h5> <div style="max-width:1024px;min-width:480px;margin: 1em auto"> <img src="image/content/entries/2013/aa-chrome-memory-node-tab.png" alt="Armor Alley: Web Prototype: Memory / DOM Node Count view (Chrome DevTools) - allocation and freeing of memory + nodes" style="display:block;width:100%;max-width:1024px"/> <p class="header-comment">Memory and DOM node count rising and falling over time, with ideal case of DOM nodes (green line) being properly GCed as JS objects and DOM nodes they reference are cleaned up.</p> </div> <p>Normal gameplay and memory allocation is illustrated above in blue, along with a growing number of DOM Node references (green.) In this case, the helicopter's machine gun fires 64 rounds and nodes are added in linear fashion. When the gunfire objects are destroyed, things settle down and eventually a garbage collection event happens.</p> <p>When JS/DOM nodes are dereferenced via JS object destruction / clean-up, the remaining DOM nodes can be properly garbage collected. A natural GC event reflects this at the mid-point, followed by the remainder of the new nodes with a manual GC event invoked toward the end.</p> <p>Chrome DevTools' "Detached Dom Trees" under the Heap Snapshot Profile section can also come in handy for finding leaked DOM nodes; the detached DOM is included under the Containment View.</p> <p>At time of writing (Nov 1, 2013) there <i>might</i> be a bug related to GPU-accelerated DOM nodes not being GCed, or simply not being reflected in the Chrome DevTools graphs. See <a href="https://code.google.com/p/chromium/issues/detail?id=304689">#304689</a> for details.</p> <h4>"AI"</h4> <p>Actually, quite dumb. "Rule-based logic" is a more appropriate description of this implementation.</p> <p>Smart Missiles: Make a beeline, plus minor deviation with acceleration changes, toward target.</p> <p>Enemy helicopter: Target nearby cloud, balloon, tanks or player's helicopter if in range. Fixed acceleration rate, normalizes to 0 when "close enough" to target. Returns to base when out of ammo + bombs, fuel, or heavily damaged. Does not dodge targets nor obstacles.</p> <p>Enemy can hide in clouds, will bomb passing tanks within range if applicable.</p> <p>"Dogfight mode": Aim to align with player helicopter. Fire gun when within range. If player is directly underneath, try bombing. Disourages direct fly-over / fly-under.</p> <p>"Targeting" flags: Clouds, tanks, helicopter, balloons. If multiple target options, logic determines priority. (Rough preference, low to high: Clouds, balloons, helicopters, tanks.)</p> <p>Enemy convoy building / ordering: "MTVIE" sequence at fixed intervals - one every few minutes, depending on available funds.</p> <p>Enemy helicopter has slight speed advantage, making it harder to chase or run from.</p> <h4><code>transform:translate</code> origin considerations</h4> <p>While using GPU transform: translate, on Chrome: Odd/occasional redraw issues found if <code>style.left/top</code> or <code>transformOrigin</code> not initially assigned. Logical; otherwise browser says, "transform this element <i>relative to what</i>?" ... Recommendation: Apply initial top/left 0px and/or <code>transform-origin</code> values in CSS.</p> <h4>Sound effects</h4> <p>Sound greatly enhances the game experience.</p> <p>Original 8-bit sounds could not be re-licensed; modern replacements (and new sounds) were mixed in from numerous Creative Commons and free sources on freesound.org. The hi-fi sounds made it more fun to blow up things, in particular.</p> <p>Distance affects volume, and ideally, panning effects on sounds (off-screen sounds are more quiet, and so on.)</p> <h4>Miscellaneous efficiency & performance notes</h4> <p>Collision detection is largely just math. Caching / invalidation would probably be more expensive, not worth the effort.</p> <p>Ditto for other simple coordinate checks, e.g., object nearby / on-screen / targeting.</p> <p>Most time is spent in GPU/hardware, performing draw / layout / render operations.</p> <h4>Things that worked</h4> <p>Consistent naming convention within objects, public interface via <code>exports = { css, data, dom }; return exports;</code></p> <p>Common methods: <code>animate()</code>, <code>hit()</code>, <code>die()</code> etc.</p> <p>Object arrays (vans, tanks, bunkers) + single top-level controller, loop which calls <code>animate()</code> on each item and removes "dead" items accordingly.</p> <p>Collision accepts object <code>exports</code> (interface), standard properties like <code>data</code> and <code>hit()</code>.</p> <p><code>hit()</code> accepts optional point value, and source/target object. In some cases, both objects can be damaged or destroyed.</p> <p>JS swapping CSS class names based on state: <code>.enemy</code>, <code>.dying</code>, <code>.dead</code> and so forth.</p> <p>Common object "create" methods, optional configuration option/param eg., <code>isEnemy</code>, <code>x</code>, <code>y</code>, <code>vX</code>, <code>vY</code></p> <p><code>frameCount</code>-based intervals setting animation + behaviour rate, e.g., <code>move()</code> every frame, <code>fire()</code> only twice a second, detect enemies once a second etc.</p> <p>Nearby & "collision" configuration - easily determine "who gets fired at", eg., tanks -> infantry. Default "lookahead" affects vehicle's ability to "see" in front of it.</p> <p>"utils" for basic DOM events, CSS class name manipulation, node tree removal.</p> <p>Batch DOM changes, particularly queueing and removal of nodes as the result of object destructors (i.e., a bunch of <code>GunFire</code> object instances dying.)</p> <h4>In retrospect: things I would change or revisit</h4> <p>Revisit object, data & function inheritance - could most all game objects inherit from a "sprite" base of some sort?</p> <p>Smarter collision detection algorithms could be researched and implemented.</p> <p>Event broadcasting? Would this be smart to use in terms of abstraction? (Still not sold.)</p> <p>Different "exports" / API per-object? More abstraction, less assumption about <code>css</code>, <code>data</code>, <code>dom</code>?</p> <p>Better "sprite" abstraction per-object. Easier DOM manipulation?</p> <p>Sprites in CSS earlier on / SASS / compass for automatic optimization</p> <p>Avoid writing <i>any</i> <code>setInterval()</code> / <code>setTimeout()</code> calls. Currently used for post-explosion delays before object destruction (DOM node removal, object clean-up.) Smarter: Use existing animation loop to apply an action after a given number of frames, and destroy object that way. This has been partially implemented.</p> <h4>TODO: tweaks and other bits to tidy up</h4> <p>Remove <code>setTimeout()</code> calls used for destruction of objects, move toward using <code>animate()</code> + <code>frameCount</code> for timing instead (some of this is implemented - see <code>FrameTimeout()</code> in code for reference.)</p> <p>Re-review object creation, memory allocation and garbage collection. Currently not too bad, but always room for improvement. Object pooling could be used for common objects like gunfire, etc.</p> <p>Further optimization considerations: Image sprites and sound sprites, where applicable. Remove animated .GIFs in favour of sprites + CSS animations, if it is faster / smoother.</p> <h4>Features not in the original game</h4> <p>Tutorial Mode: Guided introduction to game mechanics, tasks and basic strategies.</p> <p>Cloud hiding / cloaking from radar (perhaps implemented in original multiplayer mode - not sure.)</p> <p>Enemy helicopter can hide in clouds, and can bomb passing tanks ("Stealth cloud bombing mode".) Alternately, player can pass over enemy anti-aircraft guns, missile launchers and the enemy base, as well as the enemy helicopter, undetected. Adds a fun element to the game. Sneaky.</p> <p>Additional sound effects for helicopter, parachute infantry, infantry gunfire, van jamming and shrapnel hit.</p> <h4>Stuff I'll never get to</h4> <p>Multiplayer. Not for lack of interest; I think it'd be great, just don't have the time.</p> <h3>Fin.</h3> <div> <a href="http://www.flickr.com/photos/schill/9574996994/sizes/o/in/set-72157634655626918/" title="Armor Alley, Web Prototype: World Screenshot" style="display:block;margin:0px;padding:0px"> <img src="http://farm4.staticflickr.com/3784/9574996994_717c47a406_o.png" style="display:block;width:100%;max-width:1024px"/> </a> <p class="header-comment">The whole world, 8192px wide (original scale.)</p> </div> </div> <div class="top header"><h4>Related links</h4><div class="divider"> </div></div><div class="copy"><ul><li><a href="http://www.schillmania.com/armor-alley/">Play the Armor Alley Web Prototype</a></li><li><a href="http://www.flickr.com/photos/schill/sets/72157634655626918/">Photoset: Notes, development screenshots, debugging etc.</a></li><li><a href="https://github.com/scottschiller/ArmorAlley">Armor Alley (Web Prototype) on GitHub</a></li><li><a href="http://www.schillmania.com/armor-alley/CREDITS.txt">Credits + acknowledgements (Web Prototype)</a></li><li><a href="http://en.wikipedia.org/wiki/Armor_alley">Armor Alley on Wikipedia</a></li> </ul></div>  </div>  <div id="right">  <div id="nav"> <div id="options-stub"></div> <div id="stub" class="stub"></div> <ul id="nav-list" class="top"> <li id="external"> <h2 title="Recent Activity"><span class="l"></span>Recent<span>ly.</span></h2> <ul> <li> <div class="arkanoid item"> <h3><a href="https://schillmania.com/arkanoid/" title="The classic Breakout-style arcade game, playable in-browser">Arkanoid</a><span class="opt">:</span> <span>Recent Submissions</span></h3> <div id="arkanoid-stub"></div> <p class="cta"><a href="https://schillmania.com/arkanoid/#editor" title="Edit and submit your own DHTML Arkanoid level">Create a level</a> <span class="divider">|</span> <a href="https://schillmania.com/arkanoid/#browser" title="Browse and play user-submitted levels in DHTML Arkanoid">More..</a></p> </div> <div class="flickr item"> <h3>Amateur Photography <span class="opt">-</span> <span>Photos from Schill</span></h3> <div id="flickr-stub"></div> </div> <div class="lastfm item"> <h3>Heavy Rotation <span class="opt">-</span> <span>Recent top plays @<a href="http://www.last.fm/user/chillwithschill/" title="chillwithschill @ last.fm">last.fm</a></span><span class="record"></span></h3> <div id="lastfm-stub"></div> <div class="clear"></div> </div> </li> </ul> </li> <li> <h2 title="The latest and greatest."><span class="l"></span>Read<span>ing.</span><span></span></h2> <ul> <li>  <h3>Most Recently</h3> <dl> <dt><a href="content/entries/2013/armor-alley-web-prototype/">Armor Alley (1990): Web Prototype</a></dt> <dd>A browser-based interpretation of the MS-DOS release of Armor Alley, a combat strategy game originally released in 1990 for MS-DOS PCs and the Macintosh. Written in HTML, JavaScript and CSS.</dd> <dt><a href="content/entries/2012/survivor-c64-html-remake/">SURVIVOR: Remaking A C64 Game In HTML</a></dt> <dd>Remaking an Atari / Commodore 64-era space-based "shoot-'em-up" arcade game in HTML + CSS + JavaScript, including a level editor and design tool, thirty years after its release.</dd> <dt><a href="content/entries/2011/wheels-of-steel/">The Wheels Of Steel: An Ode To Turntables (in HTML)</a></dt> <dd>Building a browser-based turntable prototype using HTML, CSS, JavaScript and Flash: A bit of history, screenshots, explanation of the approach taken, limitations found and sample code.</dd> <dt><a href="content/entries/2010/how-soundmanager2-works/">How SoundManager 2 Works</a></dt> <dd>Background details to the JavaScript and Flash that makes SoundManager 2 work, plus technical notes and other findings about Flash's wacky ExternalInterface functionality.</dd> <dt><a href="content/entries/2009/css3-and-the-future/">CSS 3 and The Future: Image-free Rounded Corners, Drop Shadows and Gradients</a></dt> <dd>A brief history of rounded corner CSS 2 hacks and some examples of effects using border-radius, box-shadow and other fancy CSS 3 attributes (and vendor-specific extensions) allowing modern browsers to render shiny UI designs entirely from code.</dd> <dt><a href="content/entries/2009/browser-performance-cost-of-social-media/">The Cost of "Social Media" Javascript Overload</a></dt> <dd>Security, load time and user experience are all affected by the amount of inline Javascript blocks and third-party script "includes" being crammed into some modern sites, particularly commercial and tech blogs. This entry is a rant, and some suggestions to improve performance.</dd> <dt><a href="content/entries/2009/time-lapse-photography-chdk/">HD Time-Lapse Photography: A How-To</a></dt> <dd>A hacker type can't simply plant basil and cilantro outside, and leave them alone to grow; of course there has to be something else, preferably nerdy, in the process. This is how I ended up getting into time-lapse photography and making videos from sequences of photos using a Canon camera, the free CHDK software, and QuickTime.</dd> <dt><a href="content/entries/2009/javascript-malware-obfuscation-analysis/">Javascript Malware Analysis: A Case Study</a></dt> <dd>When JS goes bad: Remote iFrame tricks on legitimate (or phishing) sites can load Javascript exploits or "shellcode", which can mean drive-by downloads and other risks. This is an example of some heavily-obfuscated code seen on a recent Facebook phishing site.</dd> <dt><a href="content/projects/javascript-animation-3/">Javascript Animation: Tutorial, Part 3</a></dt> <dd>The final, and overdue, part in a series on Javascript animation techniques: Creating tweens, simultaneous animations and event handling are discussed. A simple animation API, demo and source code is included.</dd> <dt><a href="content/entries/2009/adblock-vs-noscript/">Extension Wars: Adblock Plus vs. NoScript</a></dt> <dd>Is it okay for one popular Firefox extension to alter the behaviour of another without asking for your permission? (PS: Internet drama/tempest in a teapot amusement goes here.)</dd> <dt><a href="content/entries/2009/defer-script-loading/">Optimizing Your External Javascript References</a></dt> <dd>Traditionally, the script tag blocks parse, load and render of a web page. A few ideas around this include loading JS with JS, the defer attribute and caching locally.</dd> <dt><a href="http://www.yuiblog.com/blog/2009/06/30/yui-soundmanager/">Enhancing YUI-based Applications With Audio</a></dt> <dd>(yuiblog.com article) Thoughts about audio and how it can be applied online to user interface/experience design.</dd> <dt><a href="http://www.yuiblog.com/blog/2009/02/26/flickr-uploadr/">Flickr Web Uploadr: File uploads via YUI</a></dt> <dd>(code.flickr.com article) A brief history of how browser-based file uploads suck, and how we made them a lot better on Flickr.</dd> <dt><a href="content/entries/2009/yahoo-photos-frontend-thoughts/" class="xhr-exclude">A Snapshot of The Yahoo! Photos Beta (from 2006)</a></dt> <dd>Javascript performance learnings: Memory leaks and management, event delegation, performance tweaks, debugging, UI observations and side thoughts from a web development perspective from my time working on the Ajax-heavy redesign of Yahoo! Photos, between 2005 and 2006.</dd> <dt><a href="content/entries/2009/what-i-did-in-2008/" class="xhr-exclude">What I Did In 2008</a></dt> <dd>A productive year seeing the redesign of SoundManager 2, the Javascript Sound library, a refresh of Snowstorm (a free Javascript Snow effect), continued downtempo and trip-hop mixes, binaural audio recordings, time-lapse photography and video experiments.</dd> <dt><a href="http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/">On UI Quality (The Little Things)</a></dt> <dd>(code.flickr.com article) Observations of how browsers do linear and bicubic image resampling when resizing, and how to make them look better in IE 6 and 7.</dd> </dl> </li> </ul> </li> <li> <h2 title="Fun and entertainment"><span class="l"></span>Play<span>ing</span><span>.</span></h2> <ul> <li> <h3>Entertainment: Games</h3> <dl> <dt><a href="/content/projects/dhtml_arkanoid/">DHTML Arkanoid</a></dt> <dd>An attempt at recreating the classic Arkanoid arcade game entirely in DHTML. Includes a level editor and a highscores list.</dd> <dt><a href="/?theme=2007&christmas=1">"Smash Christmas Lights"</a></dt> <dd>A seasonal twist on the 2007/08 web site theme, with animations and sound effects. There is a bonus sequence for those who are "thorough"..</dd> <dt><a href="/projects/fireworks/">Fireworks.js</a></dt> <dd>A goofy interactive Javascript Fireworks experiment, with animation and sound.</dd> <dt><a href="/random/humour/web20awareness/">"Web 2.0 Awareness Test"</a></dt> <dd>A Javascript/CSS experiment which gives you a score based on what Web 2.0-related sites you may have recently visited. (Written in 2006.)</dd> </dl> </li> <li> <h3>Code: F/OSS/Things You Can Use</h3> <dl> <dt><a href="https://schillmania.com/projects/soundmanager2/">SoundManager 2: Javascript Sound For The Web</a></dt> <dd>A new, fancier version of a Javascript sound project allowing people to add sound, or make sound apps using Javascript.</dd> <dt class="external"><a href="https://schillmania.com/projects/soundmanager2/demo/play-mp3-links/">Javascript MP3 Player Demo</a></dt> <dd>An example of SoundManager 2, showing how you can make MP3 links play inline.</dd> <dt><a href="/content/projects/even-more-rounded-corners/">Even More Rounded Corners With CSS</a></dt> <dd>Another take at creating single-image, alpha-transparent, fluid, rounded corner dialogs with CSS.</dd> <dt><a href="/content/projects/javascript-animation-1/">Javascript Animation: Tutorial, Part 1</a></dt> <dd>Part one of a planned series: Theory behind Javascript/DHTML-based animation via setTimeout and setInterval.</dd> <dt><a href="/content/projects/javascript-animation-2/">Javascript Animation: Tutorial, Part 2</a></dt> <dd>Discussing efficiency regarding interval-based animation</dd> <dt><a href="content/projects/javascript-animation-3/">Javascript Animation: Tutorial, Part 3</a></dt> <dd>The final, and overdue, part in a series on Javascript animation techniques: Creating tweens, simultaneous animations and event handling are discussed. A simple animation API, demo and source code is included.</dd> <dt><a href="/content/projects/snowstorm/">SnowStorm: A Javascript Snow Effect</a></dt> <dd>A downloadable DHTML component that creates an animated snowfall effect. Uses PNG-based images where supported.</dd> </dl> </li> </ul> </li> <li> <h2 title="Thoughts and so on"><span class="l"></span>Think<span>ing</span><span>.</span></h2> <ul> <li> <p>Observations, Thoughts and Rants</p> <h3>Writing: Highlights</h3> <h4>Non-technical</h4> <dl> <dt><a href="content/entries/2008/beck-mellow-gold/">Top 5 favourite albums: Beck: Mellow Gold</a></dt> <dd>Comments on Beck's classic break-out album from 1994, with a few insights from this Beck fan.</dd> <dt><a href="/content/opinion/2005/04/12/what-turntables-to-buy/">What Turntables To Buy?</a></dt> <dd>My response to a forum post on choosing DJ equipment.</dd> <dt><a href="/content/opinion/2004/01/03/on_djing_and_turntablism/">On DJing and Turntablism</a></dt> <dd>Why you should buy a pair of 1200s, a mixer and some records.</dd> </dl> <h4>Nerd glasses required</h4> <dl> <dt><a href="/content/projects/soundmanager2/">Sound For The Web: SoundManager 2 (Article)</a></dt> <dd>A new, fancier version of a Javascript sound project allowing people to add sound, or make sound apps using Javascript.</dd> <dt><a href="/content/entries/2006/08/how-web20-aware-are-you/">How Web 2.0-aware Are You?</a></dt> <dd>A humorous look at Web 2.0-related sites, using a trick that tests your browser's visited URL history.</dd> <dt><a href="/content/entries/2005/02/19/writing-html-like-1993/">Writing HTML like it's 1993</a></dt> <dd>A new job update, California, Eric and Molly teach CSS.</dd> <dt><a href="/content/opinion/2005/10/dont-believe-the-web-20-hype/">Don't Believe The (Web 2.0) Hype!</a></dt> <dd>An attempt at popping the latest Internet 2.0 bubble and related technologies, along with a wishlist of ideals.</dd> <dt><a href="/content/opinion/2005/10/on-seo-and-spamming/">On SEO and Search Engine Spamming</a></dt> <dd>From a post on theroot42.org originally entitled, 'SEO/How To Do Well On The Search Engines'</dd> <dt><a href="content/entries/2004/10/24/application-xhtml+xml/">Application/XHTML+XML</a></dt> <dd>What I learned about XHTML when switching schillmania.com to application/xhtml+xml (forcing true XML validation.)</dd> <dt><a href="/content/opinion/2004/06/27/the_obligatory_standards_rant/">The Obligatory Standards Rant</a></dt> <dd>A rant advocating standards on a respected design-oriented forum.</dd> <dt><a href="/content/opinion/2004/01/01/spam_spam_spam/">Spam, spam, spam</a></dt> <dd>Spam: The scourge of the Internet. A quick overview-cum-rant, and some recommended tools to fight the spam war.</dd> </dl> </li> </ul> </li> <li> <h2 title="Audio: Recordings"><span class="l"></span>Listen<span>ing</span><span>.</span></h2> <ul> <li> <p>Random soundbites + video clips</p> <h3>Binaural Audio Recordings</h3> <dl> <dt><a href="/content/media/beat-juggling/">Hand/Eye Coordination</a></dt> <dd>An attempt at 'Beat juggling' a seamless loop from a sample using turntables and two copies of the same record.</dd> <dt><a href="/content/media/drumming-with-vinyl/">Drumming with Vinyl</a></dt> <dd>Correctly scratch a record with a drum sample on it, and you can make your own variation on a theme.</dd> <dt><a href="/content/media/technics_mouse_scratching/">Scratching .. with a mouse?</a></dt> <dd>Combine a turntable with a computer mouse and a copy of the SoundCraft vinyl scratching emulation engine, and you have at least 30 seconds of entertainment.</dd> <dt><a href="/content/media/2-hour_mix/">Chill with Schill</a></dt> <dd>A two-hour Downtempo/Trip-Hop mix, recorded on a lazy afternoon while drinking a $4 mocha from Starbucks. How's that for detail?</dd> </dl> </li> </ul> </li> <li> <h2 title="Contact information and related links"><span class="l"></span>React<span>ing</span><span>.</span></h2> <ul> <li> <p>Get In Touch.</p> <h3>Interact</h3> <dl> <dt><a href="/content/react/contact/" title="Scott Schiller, contact information">Contact</a></dt> <dd>How to get in touch with Scott Schiller.</dd> </dl> <h3>Elsewhere Online</h3> <dl> <dt><a href="http://flickr.com/people/schill/">schill on Flickr</a></dt> <dd>Scott's Flickr profile and photos</dd> <dt><a href="http://www.last.fm/user/chillwithschill/">chillwithschill on Last.fm</a></dt> <dd>Scott's last.fm profile and music interests</dd> <dt><a href="http://www.scottschiller.com/" title="Scott Schiller, professional portfolio site">scottschiller.com: Portfolio</a></dt> <dd>Scott Schiller's professional and personal portfolio site. (Last updated: 2004)</dd> <dt><a href="http://www.freshly-ground.com/" title="Experimental design/music/DJ site">freshly ground: Experimental sound/music</a></dt> <dd>A side-project of experiments in music and binaural audio recordings</dd> </dl> </li> </ul> </li> <li> <h2 title="Old sites, articles and work"><span class="l"></span>Dig<span>ging</span><span>.</span></h2> <ul> <li> <p>The Archives: Design and content</p> <h3>Alternate Themes</h3> <dl> <dt><a href="https://schillmania.com/?theme=2008" title="2008 'Back to Basics' edition">2008 "Back To Basics" edition</a></dt> <dd>Schillmania! 2008 Edition: Back To Basics (CSS grid layout, minimal JS/images)</dd> <dt><a href="https://schillmania.com/?theme=2007" title="2007/2008 'night and day' theme">2007/08 "Night and Day" edition</a></dt> <dd>Schillmania! 2007/08 Edition: "Night and day" theme with time-sensitive UI/design, environmental sound effects and ambience</dd> <dt><a href="https://schillmania.com/?theme=2007&christmas=1" title="2007 Smash Christmas Lights seasonal feature">"Smash Christmas Lights" 2007</a></dt> <dd>Schillmania! 2007 Edition: "Smash Christmas Lights" seasonal feature</dd> <dt><a href="https://schillmania.com/?theme=2006" title="Schillmania! 2006 Edition">2006 "Work/life balance" edition</a></dt> <dd>Schillmania! 2006 Edition: Archived design (Sliding feature photo, two-column layout)</dd> <dt><a href="https://schillmania.com/?theme=2005" title="Schillmania! 2005 Edition">2005 "Bouncing Icon" edition</a></dt> <dd>Schillmania! 2005 Edition: Archived design (Horizon, bouncing icon layout)</dd> <dt><a href="https://schillmania.com/?theme=2004" title="Schillmania! 2004 Edition">2004 Edition: Now With More Funk</a></dt> <dd>Schillmania! 2004 Edition: Archived design (Multi-themed sliding photos+sound layout, may be buggy)</dd> </dl> <h3>Design Archives</h3> <dl> <dt><a href="/content/entries/2005/05/25/5-years/">A Five-Year Retrospective</a></dt> <dd>A look back on the origins of schillmania.com and its previous incarnations.</dd> <dt><a href="https://schillmania.com/spring_03" title="Schillmania! Spring.03 Edition">2003 (Spring.03): Strictly XHTML edition</a></dt> <dd>Schillmania! 2003 Edition: Archived design ("Newspaper style", first major XHTML + heavy JavaScript rewrite)</dd> </dl> <h3>News + Article Archives</h3> <p>Everything else not previously mentioned.</p> <h4>2005 - 2007</h4> <dl> <dt><a href="content/entries/2007/12/redesign/">A Fresh Redesign: 2007/08 edition</a></dt> <dd>An aggressive new time-sensitive redesign renders the site with different visual and audible cues over the course of the day.</dd> <dt><a href="content/entries/2006/12/happy-holidays/">A Holiday Update (2006)</a></dt> <dd>The usual holiday festivities: Snow, good tunes, smashing christmas lights and other debauchery.</dd> <dt><a href="/content/projects/soundmanager2/">Sound For The Web: SoundManager 2 (Article)</a></dt> <dd>A new, fancier version of a Javascript sound project allowing people to add sound, or make sound apps using Javascript.</dd> <dd>The usual holiday festivities: Snow, good tunes, smashing christmas lights and other debauchery.</dd> <dt><a href="/content/entries/2006/10/beck-hacks-yahoo/">Beck Hacks Yahoo!</a></dt> <dd>Beck Hansen and his band play an unannounced gig at Yahoo! Hack Day.</dd> <dt><a href="/content/entries/2006/08/how-web20-aware-are-you/">How Web 2.0-aware Are You?</a></dt> <dd>A humorous look at Web 2.0-related sites, using a trick that tests your browser's visited URL history.</dd> <dt><a href="/content/entries/2006/01/tj-schiller-us-open/">TJ Schiller Stomps US Open, X-Games</a></dt> <dd>My brother takes first place in two massive comps, throwing a never-done-before trick at one.</dd> <dt><a href="/content/media/world-of-trip-hop-mix/">World Of Trip-Hop Mix</a></dt> <dd>A 160-minute mix of downtempo and trip-hop.</dd> <dt><a href="/content/entries/2005/04/14/tj-schiller-2005-wsi/">TJ Schiller wins 2005 WSI Slopestyle</a></dt> <dd>My brother wins at a popular freestyle skiing event.</dd> <dt><a href="/content/entries/2005/04/03/okanagan-golf-paradise/">A Piece of Okanagan Golf Paradise</a></dt> <dd>A site built for a tourist vacation company at Predator Ridge.</dd> <dt><a href="/content/entries/2005/03/24/most-expensive-cab-ride-ever/">The Most Expensive Cab Ride. Ever.</a></dt> <dd>Regarding the purchase of a 2005 Toyota Celica.</dd> <dt><a href="/content/entries/2005/03/02/yahoo-10-sugar-ray/">Sugar Ray Rocks Yahoo! 10th Anniversary</a></dt> <dd>Yahoo celebrates 10 years with the musical talents of Sugar Ray.</dd> <dt><a href="/content/entries/2005/08/07/beck-in-santa-cruz/">Beck Live in Santa Cruz</a></dt> <dd>Meeting Beck Hansen, my favourite musician of all-time, after a concert in Santa Cruz</dd> <dt><a href="/content/entries/2005/02/19/writing-html-like-1993/">Writing HTML like it's 1993</a></dt> <dd>A new job update, California, Eric and Molly teach CSS.</dd> <dt><a href="/content/opinion/2005/10/dont-believe-the-web-20-hype/">Don't Believe The (Web 2.0) Hype!</a></dt> <dd>An attempt at popping the latest Internet 2.0 bubble and related technologies, along with a wishlist of ideals.</dd> <dt><a href="/content/opinion/2005/10/on-seo-and-spamming/">On SEO and Search Engine Spamming</a></dt> <dd>From a post on theroot42.org originally entitled, 'SEO/How To Do Well On The Search Engines'</dd> <dt><a href="/content/opinion/2005/04/12/what-turntables-to-buy/">What Turntables To Buy?</a></dt> <dd>My response to a forum post on choosing DJ equipment.</dd> <dt><a href="/content/opinion/2005/01/25/way-to-doh/">Way To D'oh!</a></dt> <dd>Some tech/geek thoughts on 'Way To Dough', a neat web-based promotion for the Subway chain of stores.</dd> </dl> <h4>2004</h4> <dl> <dt><a href="/content/opinion/2004/11/27/the-$5-coffee/">The (almost) Five-Dollar Coffee</a></dt> <dd>Starbucks ups the cost of already-overpriced coffee; I've had enough.</dd> <dt><a href="content/entries/2004/10/24/application-xhtml+xml/">Application/XHTML+XML</a></dt> <dd>What I learned about XHTML when switching schillmania.com to application/xhtml+xml (forcing true XML validation.)</dd> <dt><a href="/content/opinion/2004/06/27/the_obligatory_standards_rant/">The Obligatory Standards Rant</a></dt> <dd>A rant advocating standards on a respected design-oriented forum.</dd> <dt><a href="/content/opinion/2004/01/03/on_djing_and_turntablism/">On DJing and Turntablism</a></dt> <dd>Why you should buy a pair of 1200s, a mixer and some records.</dd> <dt><a href="/content/opinion/2004/01/01/spam_spam_spam/">Spam, spam, spam</a></dt> <dd>Spam: The scourge of the Internet. A quick overview-cum-rant, and some recommended tools to fight the spam war.</dd> <dt><a href="content/entries/../media/beat-juggling/">Hand/Eye Coordination</a></dt> <dd>An attempt at 'Beat juggling' a seamless loop from a sample using turntables and two copies of the same record.</dd> <dt><a href="content/entries/2004/12/19/15-minutes-of-fame/">15 Minutes Of Fame</a></dt> <dd>The UK-based Magazine 'Web Designer,' writes some kind words about my work.</dd> <dt><a href="content/entries/../projects/35mm-photo-viewer/">35mm Photo Viewer V5.0B</a></dt> <dd>A free, downloadable web-based photo viewer with optional XML templates.</dd> <dt><a href="content/entries/../media/drumming-with-vinyl/">Drumming with Vinyl</a></dt> <dd>Correctly scratch a record with a drum sample on it, and you can make your own variation on a theme.</dd> <dt><a href="content/entries/../opinion/2004/11/27/the-$5-coffee/">The (almost) Five-Dollar Coffee</a></dt> <dd>Starbucks ups the cost of already-overpriced coffee; I've had enough.</dd> <dt><a href="content/entries/2004/10/24/application-xhtml+xml/">Application/xhtml+xml</a></dt> <dd>What I learned about XHTML when switching schillmania.com to application/xhtml+xml (forcing true XML validation.)</dd> <dt><a href="content/entries/2004/10/17/tj-schiller_freshtival/">TJ Schiller at Freshtival 04</a></dt> <dd>My younger brother TJ does the skiing thing at Calgary's Freshtival, a freestyle skiing movie release event and rail session, with Tanner Hall and others.</dd> <dt><a href="content/entries/2004/10/04/javascript-sound/">Javascript Sound API</a></dt> <dd>An API and flexible Flash template for adding sound to websites, controlled entirely by Javascript.</dd> <dt><a href="content/entries/2004/09/19/a-real-world-website-counter/">A Real-World Website Counter</a></dt> <dd>A parallel-port-driven mileage-style counter is connected to schillmania.com. Meanwhile, rumors of geek-like antics abound.</dd> <dt><a href="content/entries/2004/08/15/photo-viewer-update/">Photo Viewer Update: v4.0a</a></dt> <dd>A DHTML-driven photo viewer application is revamped with a basic search engine and other nifty features.</dd> <dt><a href="content/entries/2004/08/15/when-lightning-strikes-next-door/">When Lightning Strikes - Next Door</a></dt> <dd>A nasty storm in Calgary hits the neighbours', damaging all sorts of electronic equipment.</dd> <dt><a href="content/entries/2004/07/18/">Montreal, Quebec, Toronto, Windsor</a></dt> <dd>Photos and commentary on my vacation to Ontario and Quebec, which have some great summer weather - both sunny and stormy.</dd> <dt><a href="content/entries/../opinion/2004/06/27/the_obligatory_standards_rant/">The Obligatory Standards Rant</a></dt> <dd>A rant advocating standards on a respected design-oriented forum.</dd> <dt><a href="content/entries/2004/06/20/cm_town_hall/">Critical Mass: Town Hall 2004</a></dt> <dd>The annual Town Hall event at Critical Mass happens on-time, but with a presentational twist.</dd> <dt><a href="content/entries/2004/06/13/">Scottschiller.com v4: Portfolio Site Update</a></dt> <dd>Scott Schiller finally gets around to updating his technical/work experience portfolio site - now at version 4.</dd> <dt><a href="content/entries/2004/05/31/calgary_flames_17th_red_mile_photos/">Flames win Game 3, city loses its mind</a></dt> <dd>The Calgary Flames win Game 3 of the Stanley Cup finals, prompting a massive and energetic crowd along the ever-popular 17th Avenue area downtown.</dd> <dt><a href="content/entries/2004/05/15/">DJing, beer, fire and .. rollerskating?</a></dt> <dd>Urban nightlife activities keep one Scott Schiller away from the computer.</dd> <dt><a href="content/entries/2004/04/27/whistler_2004_wsi/">Josh Bibby, TJ Schiller stomp the WSI</a></dt> <dd>Two crazy freestyle skiiers from Vernon, BC turn heads at the 2004 Whistler Ski Invitational.</dd> <dt><a href="content/entries/2004/04/12/">Okanagan Road Trip Photos</a></dt> <dd>Some new panoramic photos and other images from a trip to the Okanagan region of BC, Canada.</dd> <dt><a href="content/entries/../media/technics_mouse_scratching/">Scratching .. with a mouse?</a></dt> <dd>Combine a turntable with a computer mouse and a copy of the SoundCraft vinyl scratching emulation engine, and you have at least 30 seconds of entertainment.</dd> <dt><a href="content/entries/2004/03/28/">Special Blend</a></dt> <dd>Vietnamese iced coffee, 'ca phe sua da' - an enjoyable caffeinated beverage.</dd> <dt><a href="content/entries/2004/03/14/colophon/">Site Colophon</a></dt> <dd>A description of how the content for this site is generated and served.</dd> <dt><a href="content/entries/2004/03/14/aquarium_time_lapse/">Aquarium Time Lapse Video</a></dt> <dd>A time-lapse video (~12 days) of a fish tank.</dd> <dt><a href="content/entries/2004/03/01/">Back in Black</a></dt> <dd>An overview of the site redesign.</dd> <dt><a href="content/entries/2004/02/29/tj_schiller-us_open/">TJ Schiller at the US Freeskiing Open</a></dt> <dd>TJ Schiller (my younger brother) wins the Slopestyle comp at the US Freeskiing open.</dd> </dl> </li> <li> <h4>2003</h4> <dl> <dt><a href="content/entries/2003/12/18/">SnowStorm Update</a></dt> <dd>Changes and bug fixes relating to the DHTML SnowStorm component (Version 1.2a.)</dd> <dt><a href="content/entries/2003/12/06/">SnowStorm Component</a></dt> <dd>Continued description of SnowStorm, now a downloadable component-based javascript snow library.</dd> <dt><a href="content/entries/2003/11/17/">Bring the SnowStorm (DHTML, that is..)</a></dt> <dd>An introduction to SnowStorm, a DHTML component that provides a neat animated snow effect; uses PNG-based images where supported.</dd> <dt><a href="content/entries/2003/10/26/">More Fish Stuff</a></dt> <dd>Some small additions (and consequent losses) involving a 90-gallon fish tank.</dd> <dt><a href="content/entries/2003/10/24/">Ugly Hallowe'en Theme</a></dt> <dd>The one time of the year where the Spring.03 'Bold' theme actually suits the season.</dd> <dt><a href="content/entries/2003/10/09/">I Love Spam</a></dt> <dd>An experiment in spambots: 'How long until a new address is spammed?'</dd> </dl> </li> </ul> </li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript">preInit();</script> </div> </body> </html>