The creative and technical vents of Scott Schiller

Time 2021-11-22 11:21:02

Web Name: The creative and technical vents of Scott Schiller

WebSite: http://www.schillmania.com

ID:245576

Keywords:

and,technical,The,creative,Scott,Schiller,vents,of,ScottSchiller,Schill,object-o

Description:

keywords:Scott Schiller, Schill, object-oriented javascript design, frontend engineering, flickr, yahoo, dhtml, ajax, javascript, javascript sound, soundmanager, snowstorm, web standards, css, javascript animation
description: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.
Schillmania! 04 05 06 07/08 08 09

---

Armor Alley: Web Prototype

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 /armor-alley. Related: Development process, screenshots etc. Also on GitHub.

A browser-based interpretation of the classic 1990 game.

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.

The Armor Alley Web Prototype home screen. Play it now or read more about the original game, units and strategy on Wikipedia.

A quick fly through of the AA Web Prototype in tutorial mode. Basic mechanics, defensive and offensive tactics are explained.

Why do this?

... Because.

Any application that can be written in JavaScript, will eventually be written in JavaScript. -- Atwood's Law (2007)

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.

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.

The reference: Armor Alley, PC-DOS version (1990)

Premise

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.

Studying the original

The original box: Armor Alley, PC-DOS compatible version (1990.) Thank-you, eBay.

PC-DOS, 1990 (port from original Macintosh version)

Side-scrolling, fixed-height, 4-bit colour

Reusable patterns (vehicles, shrapnel, gun fire, smoke, explosions)

Low-fi animations

Numerous interactions / behaviours between vehicles in the environment. Numerous, but somewhat shallow and limited complexity; relatively straightforward implementation.

Scope

Entirely client-side technologies: HTML, JavaScript, CSS.

First "level", standard vehicles and terrain elements including anti-aircraft turrets / "guns", but no armored bunkers.

Basic enemy "AI", automated convoy building / ordering + enemy chopper actions / defense - likely difficult to truly emulate original behaviour.

No network / multi-player.

Process

As with childhood family road trips: Source code, edited and annotated on the road.

Initial prototype: Basic landscape, terrain, vehicles, bunkers w/balloons and vehicle movement. Player helicopter can fly over terrain.

Enemy vehicles added. Basics of enemy detection, gunfire, bombs collision detection added.

Infantry, bunkers, vehicle-specific interactions.

Status bar, fuel line landing pads + repair / refueling / reloading actions.

Smart missiles and radar system.

Inventory / ordering system.

Nearby object finding / detection (smart missiles, AI)

Troubleshooting debugging

Chrome DevTools: Frames, memory, JS / CPU profiling

CSS transforms + JS feature detection

Hot loops, object creation / memory use / garbage collection

"Architecture"

A tightly-packed sprite containing the majority of the in-game graphics, made for the Web Prototype.

Raw (vanilla) JS, SoundManager 2 for audio

Good old-fashioned DOM elements for rendering UI vs. canvas or WebGL, etc. Benefits: Natural DOM createElement() for making game objects, CSS to style them, className-based manipulation, transitions and animations.

JavaScript: utils helper for CSS class name manipulation, DOM events, node tree removal, object mixins, cloning etc.

Controllers, i.e., gameLoop iterate over collections of game objects, calling each object's animate() method.

If animate() returns true, object is dead and controller can remove it from the array. Pattern is repeated for collections of vehicles, gunfire, buildings etc.

MVC-like theme: css, data, dom, objects interface is defined for major game objects.

Some objects have child and/or parent objects, i.e., bunker - chain - balloon.

frameCount and modulus determine interval of behaviours - movement, firing, animation rate, enemy detection and so on - i.e., if (frameCount % 10 === 0) { fire(); }

Object names + types map between array names, constructor pattern, CSS class names (generally.) e.g., a van has data.type of 'van', CSS of .van, stored in game.objects.vans and so forth.

Each object has a predictable DOM pattern, CSS class name and data structure.

isEnemy applies to JS, cascades to .enemy in CSS. UI + collision logic, otherwise, is mostly the same.

Collision detection / enemy + object interaction

nearbyOptions - "who gets fired at?"

nearbyObject() - "is an X (i.e., helicopter) in range?"

Object targeting - "move toward the helicopter"

If there is an object overlap, call target.hit() and provide "source" object interface. Target determines interaction - i.e., target may die, but may also kill source.

Animations

Combination of style.left/top, some backgroundPosition-based sprite animation, and CSS animations and transitions.

CSS step-based animations allow convenient className-triggered transitions, e.g., tank explosion: .tank.dying {} - .tank.dead {}

animate() method applies vX + vY to x + y, updates style.top/left (traditional) or transform (GPU-accelerated) properties to reposition DOM node.

"Inheritance"

Mixin-based inheritance of data, css structures etc. Common CSS class names (states), data attributes like x, y, dead, isEnemy etc.

Common operations: Move sprite (DOM x/y), object hit, die are in left in a top-level common helper, similar to utils.

Performance

Use transform: translate3d() 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.

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.

Object destruction / clean-up: Remove node tree, JS/DOM references and parent array reference in the object collection case.

Minimize DOM "I/O": Cache node references and coordinates to reduce reflow due to read operations (e.g., offsetWidth.) Update client coordinates only on critical events like init and window.onresize().

Web Prototype with GPU-accelerated transform: translate3d(), and room for improvement. Note that most frames are 16 ms, 60+ fps.

Web Prototype without GPU-accelerated transform: translate3d() - note lots of red (expensive repaint), and very slow frames.

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 return false. The proper fix involved changes to avoid object creation.

Memory, DOM node count and JS/DOM garbage collection

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.

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.

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.

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.

At time of writing (Nov 1, 2013) there might be a bug related to GPU-accelerated DOM nodes not being GCed, or simply not being reflected in the Chrome DevTools graphs. See #304689 for details.

"AI"

Actually, quite dumb. "Rule-based logic" is a more appropriate description of this implementation.

Smart Missiles: Make a beeline, plus minor deviation with acceleration changes, toward target.

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.

Enemy can hide in clouds, will bomb passing tanks within range if applicable.

"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.

"Targeting" flags: Clouds, tanks, helicopter, balloons. If multiple target options, logic determines priority. (Rough preference, low to high: Clouds, balloons, helicopters, tanks.)

Enemy convoy building / ordering: "MTVIE" sequence at fixed intervals - one every few minutes, depending on available funds.

Enemy helicopter has slight speed advantage, making it harder to chase or run from.

transform:translate origin considerations

While using GPU transform: translate, on Chrome: Odd/occasional redraw issues found if style.left/top or transformOrigin not initially assigned. Logical; otherwise browser says, "transform this element relative to what?" ... Recommendation: Apply initial top/left 0px and/or transform-origin values in CSS.

Sound effects

Sound greatly enhances the game experience.

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.

Distance affects volume, and ideally, panning effects on sounds (off-screen sounds are more quiet, and so on.)

Miscellaneous efficiency performance notes

Collision detection is largely just math. Caching / invalidation would probably be more expensive, not worth the effort.

Ditto for other simple coordinate checks, e.g., object nearby / on-screen / targeting.

Most time is spent in GPU/hardware, performing draw / layout / render operations.

Things that worked

Consistent naming convention within objects, public interface via exports = { css, data, dom }; return exports;

Common methods: animate(), hit(), die() etc.

Object arrays (vans, tanks, bunkers) + single top-level controller, loop which calls animate() on each item and removes "dead" items accordingly.

Collision accepts object exports (interface), standard properties like data and hit().

hit() accepts optional point value, and source/target object. In some cases, both objects can be damaged or destroyed.

JS swapping CSS class names based on state: .enemy, .dying, .dead and so forth.

Common object "create" methods, optional configuration option/param eg., isEnemy, x, y, vX, vY

frameCount-based intervals setting animation + behaviour rate, e.g., move() every frame, fire() only twice a second, detect enemies once a second etc.

Nearby "collision" configuration - easily determine "who gets fired at", eg., tanks - infantry. Default "lookahead" affects vehicle's ability to "see" in front of it.

"utils" for basic DOM events, CSS class name manipulation, node tree removal.

Batch DOM changes, particularly queueing and removal of nodes as the result of object destructors (i.e., a bunch of GunFire object instances dying.)

In retrospect: things I would change or revisit

Revisit object, data function inheritance - could most all game objects inherit from a "sprite" base of some sort?

Smarter collision detection algorithms could be researched and implemented.

Event broadcasting? Would this be smart to use in terms of abstraction? (Still not sold.)

Different "exports" / API per-object? More abstraction, less assumption about css, data, dom?

Better "sprite" abstraction per-object. Easier DOM manipulation?

Sprites in CSS earlier on / SASS / compass for automatic optimization

Avoid writing any setInterval() / setTimeout() 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.

TODO: tweaks and other bits to tidy up

Remove setTimeout() calls used for destruction of objects, move toward using animate() + frameCount for timing instead (some of this is implemented - see FrameTimeout() in code for reference.)

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.

Further optimization considerations: Image sprites and sound sprites, where applicable. Remove animated .GIFs in favour of sprites + CSS animations, if it is faster / smoother.

Features not in the original game

Tutorial Mode: Guided introduction to game mechanics, tasks and basic strategies.

Cloud hiding / cloaking from radar (perhaps implemented in original multiplayer mode - not sure.)

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.

Additional sound effects for helicopter, parachute infantry, infantry gunfire, van jamming and shrapnel hit.

Stuff I'll never get to

Multiplayer. Not for lack of interest; I think it'd be great, just don't have the time.

Fin.

The whole world, 8192px wide (original scale.)

Related links Play the Armor Alley Web PrototypePhotoset: Notes, development screenshots, debugging etc.Armor Alley (Web Prototype) on GitHubCredits + acknowledgements (Web Prototype)Armor Alley on Wikipedia Recently. Arkanoid: Recent Submissions

Create a level | More..

Amateur Photography - Photos from Schill Heavy Rotation - Recent top plays @last.fm Reading. Most Recently Armor Alley (1990): Web Prototype 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. SURVIVOR: Remaking A C64 Game In HTML 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. The Wheels Of Steel: An Ode To Turntables (inHTML) 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. How SoundManager 2 Works Background details to the JavaScript and Flash that makes SoundManager 2 work, plus technical notes and other findings about Flash's wacky ExternalInterface functionality. CSS 3 and The Future: Image-free Rounded Corners, Drop Shadows and Gradients 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. The Cost of "Social Media" Javascript Overload 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. HD Time-Lapse Photography: A How-To 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. Javascript Malware Analysis: A Case Study 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. Javascript Animation: Tutorial, Part 3 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. Extension Wars: Adblock Plus vs. NoScript 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.) Optimizing Your External Javascript References 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. Enhancing YUI-based Applications With Audio (yuiblog.com article) Thoughts about audio and how it can be applied online to user interface/experience design. Flickr Web Uploadr: File uploads via YUI (code.flickr.com article) A brief history of how browser-based file uploads suck, and how we made them a lot better on Flickr. A Snapshot of The Yahoo! Photos Beta (from 2006) 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. What I Did In 2008 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. On UI Quality (The Little Things) (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. Playing. Entertainment: Games DHTML Arkanoid An attempt at recreating the classic Arkanoid arcade game entirely in DHTML. Includes a level editor and a highscores list. "Smash Christmas Lights" 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".. Fireworks.js A goofy interactive Javascript Fireworks experiment, with animation and sound. "Web 2.0 Awareness Test" 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.) Code: F/OSS/Things You Can Use SoundManager 2: Javascript Sound For The Web A new, fancier version of a Javascript sound project allowing people to add sound, or make sound apps using Javascript. Javascript MP3 Player Demo An example of SoundManager 2, showing how you can make MP3 links play inline. Even More Rounded Corners With CSS Another take at creating single-image, alpha-transparent, fluid, rounded corner dialogs with CSS. Javascript Animation: Tutorial, Part 1 Part one of a planned series: Theory behind Javascript/DHTML-based animation via setTimeout and setInterval. Javascript Animation: Tutorial, Part 2 Discussing efficiency regarding interval-based animation Javascript Animation: Tutorial, Part 3 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. SnowStorm: A Javascript Snow Effect A downloadable DHTML component that creates an animated snowfall effect. Uses PNG-based images where supported. Thinking.

Observations, Thoughts and Rants

Writing: Highlights Non-technical Top 5 favourite albums: Beck: Mellow Gold Comments on Beck's classic break-out album from 1994, with a few insights from this Beck fan. What Turntables To Buy? My response to a forum post on choosing DJ equipment. On DJing and Turntablism Why you should buy a pair of 1200s, a mixer and some records. Nerd glasses required Sound For The Web: SoundManager 2 (Article) A new, fancier version of a Javascript sound project allowing people to add sound, or make sound apps using Javascript. How Web 2.0-aware Are You? A humorous look at Web 2.0-related sites, using a trick that tests your browsers visited URL history. Writing HTML like its 1993 A new job update, California, Eric and Molly teach CSS. Dont Believe The (Web 2.0) Hype! An attempt at popping the latest Internet 2.0 bubble and related technologies, along with a wishlist of ideals. On SEO and Search Engine Spamming From a post on theroot42.org originally entitled, SEO/How To Do Well On The Search Engines Application/XHTML+XML What I learned about XHTML when switching schillmania.com to application/xhtml+xml (forcing true XML validation.) The Obligatory Standards Rant A rant advocating standards on a respected design-oriented forum. Spam, spam, spam Spam: The scourge of the Internet. A quick overview-cum-rant, and some recommended tools to fight the spam war. Listening.

Random soundbites + video clips

Binaural Audio Recordings Hand/Eye Coordination An attempt at Beat juggling a seamless loop from a sample using turntables and two copies of the same record. Drumming with Vinyl Correctly scratch a record with a drum sample on it, and you can make your own variation on a theme. Scratching .. with a mouse? 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. Chill with Schill A two-hour Downtempo/Trip-Hop mix, recorded on a lazy afternoon while drinking a $4 mocha from Starbucks. Hows that for detail? Reacting.

Get In Touch.

Interact Contact How to get in touch with Scott Schiller. Elsewhere Online schill on Flickr Scotts Flickr profile and photos chillwithschill on Last.fm Scotts last.fm profile and music interests scottschiller.com: Portfolio Scott Schillers professional and personal portfolio site. (Last updated: 2004) freshly ground: Experimental sound/music A side-project of experiments in music and binaural audio recordings Digging.

The Archives: Design and content

Alternate Themes 2008 "Back To Basics" edition Schillmania! 2008 Edition: Back To Basics (CSS grid layout, minimal JS/images) 2007/08 "Night and Day" edition Schillmania! 2007/08 Edition: "Night and day" theme with time-sensitive UI/design, environmental sound effects and ambience "Smash Christmas Lights" 2007 Schillmania! 2007 Edition: "Smash Christmas Lights" seasonal feature 2006 "Work/life balance" edition Schillmania! 2006 Edition: Archived design (Sliding feature photo, two-column layout) 2005 "Bouncing Icon" edition Schillmania! 2005 Edition: Archived design (Horizon, bouncing icon layout) 2004 Edition: Now With More Funk Schillmania! 2004 Edition: Archived design (Multi-themed sliding photos+sound layout, may be buggy) Design Archives A Five-Year Retrospective A look back on the origins of schillmania.com and its previous incarnations. 2003 (Spring.03): Strictly XHTML edition Schillmania! 2003 Edition: Archived design ("Newspaper style", first major XHTML + heavy JavaScript rewrite) News + Article Archives

Everything else not previously mentioned.

2005 - 2007 A Fresh Redesign: 2007/08 edition An aggressive new time-sensitive redesign renders the site with different visual and audible cues over the course of the day. A Holiday Update (2006) The usual holiday festivities: Snow, good tunes, smashing christmas lights and other debauchery. Sound For The Web: SoundManager 2 (Article) A new, fancier version of a Javascript sound project allowing people to add sound, or make sound apps using Javascript. The usual holiday festivities: Snow, good tunes, smashing christmas lights and other debauchery. Beck Hacks Yahoo! Beck Hansen and his band play an unannounced gig at Yahoo! Hack Day. How Web 2.0-aware Are You? A humorous look at Web 2.0-related sites, using a trick that tests your browsers visited URL history. TJ Schiller Stomps US Open, X-Games My brother takes first place in two massive comps, throwing a never-done-before trick at one. World Of Trip-Hop Mix A 160-minute mix of downtempo and trip-hop. TJ Schiller wins 2005 WSI Slopestyle My brother wins at a popular freestyle skiing event. A Piece of Okanagan Golf Paradise A site built for a tourist vacation company at Predator Ridge. The Most Expensive Cab Ride. Ever. Regarding the purchase of a 2005 Toyota Celica. Sugar Ray Rocks Yahoo! 10th Anniversary Yahoo celebrates 10 years with the musical talents of Sugar Ray. Beck Live in Santa Cruz Meeting Beck Hansen, my favourite musician of all-time, after a concert in Santa Cruz Writing HTML like its 1993 A new job update, California, Eric and Molly teach CSS. Dont Believe The (Web 2.0) Hype! An attempt at popping the latest Internet 2.0 bubble and related technologies, along with a wishlist of ideals. On SEO and Search Engine Spamming From a post on theroot42.org originally entitled, SEO/How To Do Well On The Search Engines What Turntables To Buy? My response to a forum post on choosing DJ equipment. Way To Doh! Some tech/geek thoughts on Way To Dough, a neat web-based promotion for the Subway chain of stores. 2004 The (almost) Five-Dollar Coffee Starbucks ups the cost of already-overpriced coffee; Ive had enough. Application/XHTML+XML What I learned about XHTML when switching schillmania.com to application/xhtml+xml (forcing true XML validation.) The Obligatory Standards Rant A rant advocating standards on a respected design-oriented forum. On DJing and Turntablism Why you should buy a pair of 1200s, a mixer and some records. Spam, spam, spam Spam: The scourge of the Internet. A quick overview-cum-rant, and some recommended tools to fight the spam war. Hand/Eye Coordination An attempt at 'Beat juggling' a seamless loop from a sample using turntables and two copies of the same record. 15 Minutes Of Fame The UK-based Magazine 'Web Designer,' writes some kind words about my work. 35mm Photo Viewer V5.0B A free, downloadable web-based photo viewer with optional XML templates. Drumming with Vinyl Correctly scratch a record with a drum sample on it, and you can make your own variation on a theme. The (almost) Five-Dollar Coffee Starbucks ups the cost of already-overpriced coffee; I've had enough. Application/xhtml+xml What I learned about XHTML when switching schillmania.com to application/xhtml+xml (forcing true XML validation.) TJ Schiller at Freshtival 04 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. Javascript Sound API An API and flexible Flash template for adding sound to websites, controlled entirely by Javascript. A Real-World Website Counter A parallel-port-driven mileage-style counter is connected to schillmania.com. Meanwhile, rumors of geek-like antics abound. Photo Viewer Update: v4.0a A DHTML-driven photo viewer application is revamped with a basic search engine and other nifty features. When Lightning Strikes - Next Door A nasty storm in Calgary hits the neighbours', damaging all sorts of electronic equipment. Montreal, Quebec, Toronto, Windsor Photos and commentary on my vacation to Ontario and Quebec, which have some great summer weather - both sunny and stormy. The Obligatory Standards Rant A rant advocating standards on a respected design-oriented forum. Critical Mass: Town Hall 2004 The annual Town Hall event at Critical Mass happens on-time, but with a presentational twist. Scottschiller.com v4: Portfolio Site Update Scott Schiller finally gets around to updating his technical/work experience portfolio site - now at version 4. Flames win Game 3, city loses its mind 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. DJing, beer, fire and .. rollerskating? Urban nightlife activities keep one Scott Schiller away from the computer. Josh Bibby, TJ Schiller stomp the WSI Two crazy freestyle skiiers from Vernon, BC turn heads at the 2004 Whistler Ski Invitational. Okanagan Road Trip Photos Some new panoramic photos and other images from a trip to the Okanagan region of BC, Canada. Scratching .. with a mouse? 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. Special Blend Vietnamese iced coffee, 'ca phe sua da' - an enjoyable caffeinated beverage. Site Colophon A description of how the content for this site is generated and served. Aquarium Time Lapse Video A time-lapse video (~12 days) of a fish tank. Back in Black An overview of the site redesign. TJ Schiller at the US Freeskiing Open TJ Schiller (my younger brother) wins the Slopestyle comp at the US Freeskiing open. 2003 SnowStorm Update Changes and bug fixes relating to the DHTML SnowStorm component (Version 1.2a.) SnowStorm Component Continued description of SnowStorm, now a downloadable component-based javascript snow library. Bring the SnowStorm (DHTML, that is..) An introduction to SnowStorm, a DHTML component that provides a neat animated snow effect; uses PNG-based images where supported. More Fish Stuff Some small additions (and consequent losses) involving a 90-gallon fish tank. Ugly Hallowe'en Theme The one time of the year where the Spring.03 'Bold' theme actually suits the season. I Love Spam An experiment in spambots: 'How long until a new address is spammed?'

TAGS:and technical The creative Scott Schiller vents of ScottSchiller Schill object-o

<<< Thank you for your visit >>>

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.

Hot Websites