prayingmadness.github.io/sand-drawing

What you see here is the sand-drawing portion of the application – along with this I had built a backend application that would capture the <canvas> element as a static image and upload it to a gallery hosted on De Bijenkorf’s Facebook page (that gallery is, unfortunately, lost to the ravages of time).

The sand-drawing part of the application can still be used (obviously I’ve stunted the submission portion), however as this was strictly written to be iPad-only it won’t function at all in a desktop browser (it makes heavy use of iOS-specific touch events), and while it will work on an iPhone some of the controls (erase, submit) are off-screen. Setting Chrome to emulate an iPad in portrait mode will give you an approximation of the functionality and smoothness of the drawing as well.

Clothing brand Killer Loop’s mission was to celebrate and supply a new generation of passionate authentic filmmakers and photographers – modern day adventurers if you will. Well, what better way to do this than with a ‘high-adrenalin, downhill bigfoot pursuit (on skis)?’ The idea behind this interactive film was to throw camera control over to the user during Bigfoot’s big stunt.

This project pushed HTML5 <video> in directions it was never supposed to go, integrating live camera-angle switching at one point in the video, allowing the user to choose which angle to view a stunt from. This was accomplished through a technique similar to a graphic sprite sheet, where all the camera angles were contained in one video file and “changing the camera angle” redirects the user to a new point in the video timeline. I’ve seen this used with audio files but, to the best of my knowledge, I’m the only developer in the history of the universe to attempt it with video. It resulted in a pretty long preloader since the entire video file needed to be loaded in order for timeline jumping to work accurately and smoothly, which introduced it’s own host of issues since every browser implements video preloading differently. Chrome, oddly, was the worst offender here and required a significant amount of hacking to force it into submission.

This was a project built in late 2013 for Minivegas. The live version of the project has been significantly changed by the client’s internal development team since my initial build went live, so a build of the project as it stood when I handed it off is available at prayingmadness.github.io/killerloop

Up until the site was handed off to the client and deployed live I was the sole developer on the project.

Important note: browsers have changed a lot in regards to autoplaying content since this was built and, as a result, the video might not start when you load it up. I’ve hacked in a Play button that should disappear when triggered – the scene-switching functionality requires media controls to be hidden – but it may not work as originally intended. I think it works best in Safari at the moment but no guarantees. You’ll have to take me on my word that it’s amazing.

adidas Runners is one of the most ambitious attempts at building communities adidas has ever taken before. The goal was to not only set up groups of like-minded runners in cities around the world but to also empower the natural leaders within these groups to self-organize and build their own calendar of different events at a grassroots level – events which adidas would then support (through promotion and occasional swag). Local groups nominated “captains” and “coaches” who took on the responsibility to manage and plan future events, many of which happen several times per week.

Complicating factors here was that approximately a year after the communities launched we entered into Phase 2 of the project: integration with our sister athletics-tracking program, Runtastic (adidas acquired Runtastic in 2015). Tapping into Runtastic’s existing userbase of 130+ million athletes, our plan was to greatly expand the size and number of communities by allowing Runtastic users to join their local running groups from directly within the app. This was the very first technical integration between adidas and Runtastic and required an incredible amount of teamwork and collaboration between teams both external (3rd party development agency, Runtastic infrastructure) and internal (adidas AWS management, network security, CRM, account management). My role as Technical Director was to manage and oversee all of the teams here, facilitating communication (the teams were spread over 5 countries in two separate continents) and ensuring that our stated goals and KPIs were front-of-mind at all stages of development to manage expectations and avoid scope creep.

The end result? Well, in the Runtastic app you can now join running communities around the world. This is continuing to expand into more and more cities so if yours isn’t there, keep checking back!

Lots of smexy SVG animations on the characters and throughout the entire site that screenshots can’t properly convey. Go see!

In the weeks and months leading up to the show I designed and built all of the technical schematics and setup for our portion of the event. Determining the best deployment of equipment, cabling, power management, and ensuring all the gear required was purchased in advance or would be waiting at the pavilion for us when we arrived. This involved many many phone calls with our partners in China in an effort to ensure we’d have our setup completely locked in place with no surprises.

During the event itself I managed the A/V booth (pictured below), running the on-screen content and audio mix for the fashion shows. For two weeks this show ran eight times per day. You can imagine how burned into my mind the soundtrack was by the end of the exhibition.

As far as I know this is the only video in existence of our show, unfortunately the quality is fairly poor (I deputized someone to run out and record it using my iPad) but you can clearly see the different visual effects in play. The crowd reaction during some of these moments was intense and definitely added a lot to the show.

The talks were all recorded, here’s mine! Unfortunately the video and audio desync by a twee bit about halfway through. ¯\_(ツ)_/¯

In late 2011 I had the incredible opportunity to write an article on jQuery performance techniques for 24ways.org, “the advent calendar for web geeks.” This was a great experience for me as a technical writer (something I hadn’t done much of up until now) and the positive feedback I recieved was overwhelming. I don’t have exact stats on the article, but it’s one of the most highly-commented on articles 24ways have posted, and there’s some GREAT discussion in the comments, too.

24ways have been doing their thing for seven years now, and it’s more than a little bit humbling to see myself listed on the Authors page along with luminaries of the industry like Jeffrey Zeldman and Eric Meyer.

Supported by the installation and flash banners, users can play with a Rubik’s Cube on their Facebook timeline, then customise their own and share that across Twitter and Facebook.

We managed the process through a carefully planned and well-documented process of Conceptual Development, Tech R&D, UX Design, Visual Design and Development to bring together this campaign that allows users to access the 3D gameplay across all modern desktop browsers and mobile devices.

Note: this project isn’t currently available online since the campaign ended, I’m working on bringing a static version back up. Feel free to let me know if you want to be notified when that happens! –S.

With access to a wealth of real time data, we created an interactive WebGL experience that dramatically brings to life every detection made by Kaspersky software, happening at that very moment, around the world.We denoted different threats with colours and geometric symbols. Some show the point of detection while others show the source of the threat as well, with bright, arcing trajectories linking source to destination. Users can zoom in and out of either a globe or flat map view to pinpoint the major threats and identify the most infected areas. A breakdown of each country’s level of infection can be triggered with a click, along with the ability to directly select your own country and share statistics through social.

The visualization went on to feature on big screens at Kasperksy Lab events and trade shows around the world, using a specially designed demo mode which takes the audience on an autopilot fly-through that descends down to ground level and right into the heat of the action. The combination of true data and live statistics with an engaging user experience, tells a compelling story and hopefully provides Kaspersky with an eye-catching way to raise brand awareness, showcase their products and possibly remind a few people of their favorite childhood 80’s movies!

In an effort to reach a younger target demographic, UK television network Channel 4 decided to turn to the one media format that all of the kids are using these days.

Animated .gifs.

Yep.

We built this site on Tumblr, but in the process of doing so hacked Tumblr like it was attacking my family. Pushing Tumblr in directions it was never meant to go has become somewhat of a hobby as of late and in the end it turned out to be a near-perfect CMS for this sort of thing. The benefit of pushing all .gif content to followers’ Tumblr Dashboards helped spread the site farther and wider than we ever hoped imaginable. A combination of Tumblr and an S3-powered Backbone application keeps everything humming nice and smoothly.