Francis Shanahan[.com]

Sencha Touch 2.0 MVC in 5 minutes or less

Francis — Fri, 21 Oct 2011 08:06:45 PDT

I’ve shied away from JS frameworks on the mobile platform primarily due to performance. I had not been able to find one that came close to native performance on Android. This changed last weekend when I tried out the Sencha Touch 2.0 dev preview. Performance is vastly improved over Touch 1.0. Animations and transitions are smooth, even on my Android 2.2 device and I was able to get up and running very fast.

Grab the Sencha Touch 2.0 Dev Preview here: http://www.sencha.com/blog/sencha-touch-2-developer-preview/

While I was able to get a basic app up and running quickly, unfortunately I spent a lot of time re-factoring into a proper MVC structure. The documentation on how to do this in Touch 2.0 is not there yet and there are some albeit small but killer differences between Touch1.0 and 2.0. To a novice like me they cost me a few hours.

Everything here was based off the Sencha ExtJS 4.0 walkthrough available here:

The sample code is available on Github and you can go here and download the entire project in a single ZIP/TAR: https://github.com/FrancisShanahan/SenchaTouch2MVCHelloworld

Or you can fork the repo using git: http://help.github.com/fork-a-repo/

Here are a few key points:

a) Let the app instantiate your controllers and any global stores your app needs. Notice how the initial layout is created using xtypes? These are created as aliases in the views.

b) Let your controllers instantiate your views and stores.

c) Use Component Queries instead of Ext.getCmp(‘id goes here’). This’ll keep your code more manageable as the code base grows. Note, the “ref” name here is important as it’s used to generate getters for the view instances. E.g. a ref of “stationList” will create a getter on the controller of “getStationList”.

I’ve already heard from a few folks so it looks like this project is helpful. It’s also ready for dropping into a Phonegap shell. Fork it and update or let me know if there’s anything you’d like to see added.

Attribution: Today’s photo comes from Anxo Resúa’s stream on Flickr http://www.flickr.com/photos/anxoresua/4652943076/

Stream a webcam using Javascript, NodeJS, Android, Opera Mobile, Web Sockets and HTML5

Francis — Mon, 19 Sep 2011 13:29:04 PDT

With all the recent Goruck-ness it’s time to throw out a tech post. I’ve been prepping for a NodeJS presentation recently and wanted a unique demo. I had also come across the experimental build of Opera which supports accessing the native webcam of a mobile device. So I threw these two technologies together and came up with a Javascript powered way to stream a video camera from a mobile device to a bunch of desktop (or mobile) clients.

HTML5 had originally laid out support for a new element (the “device” element) but it appears this element has been scrapped now in favour of the “getUserMedia” API. So far I have only seen the Opera Mobile Experimental build support this but hopefully it’ll get into Dolphin and other mobile browsers soon.

http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

If you just want to cut to the chase here’s a video of the final result:

There are three moving parts here

a) The client page which captures the video
b) the server which is a simple Node broadcast server
c) and the Client which is just a web page that renders the output.

The client is just a copy-paste from Opera’s website. I take the video stream, render it to a canvas, then grab the canvas as a base64 encoded image. One image per frame. I could not find a way to limit the video’s size so the resulting image is fairly large (240×400 on an HTC Incredible). I down-sampled, cutting the image data to reduce the traffic over the wire. Framerates are still pretty poor but this is just an experiment.

The server is a generic websockets server and gets a message which is a raw data/base64 stream. It broadcasts this down the any connected clients.

The client then is the simplest of all, just connects to the socket server and renders whatever it gets to an tag.

It’s all Javascript.

Client (this is a jade view).


h1
    Remote Webcam using NodeJS, Opera, Web Sockets and HTML5/Canvas
video(autoplay=true,id="sourcevid")
canvas(id="output")
div(id="log")
script
    var log = function(msg) {
       document.getElementById('log').innerHTML = document.getElementById('log').innerHTML + msg + "
";
    };
    var video = document.getElementsByTagName('video')[0],
        heading = document.getElementsByTagName('h1')[0];
    if(navigator.getUserMedia) {
        navigator.getUserMedia('video', successCallback, errorCallback);

        function successCallback( stream ) {
            video.src = stream;
        };

        function errorCallback( error ) {
            heading.textContent = "An error occurred: [CODE " + error.code + "]";
        };
    } else {
        heading.textContent = "Native web camera streaming is not supported in this browser!";
    };

    var back = document.createElement('canvas');
    var backcontext = back.getContext('2d');

    var ws;

    if('WebSocket' in window){
        connect('ws://192.168.2.100:8080/');
    } else {
        log ('web sockets not supported');
     }

    function connect(host) {
        ws = new WebSocket(host);
        ws.onopen = function () {
            log('connected');
        };

        ws.onclose = function () {
            log('socket closed');
        };

        ws.onerror = function (evt) {
            log('ERROR: ' + evt.data);
        };
    };

    function send(msg){
        if (ws != null) {
            if(ws.readyState === 1) {
               ws.send(msg);
            }
        } else {
            //log ('not ready yet');
        }
    }    

    cw = 120;//240;//video.clientWidth;
    ch = 200;//400;//video.clientHeight;
    log('width = ' + ch);
    back.width = cw;
    back.height = ch;
    draw(video, backcontext, cw, ch);

    function draw(v, bc, w, h) {

        // First, draw it into the backing canvas
        bc.drawImage(v, 0, 0, w, h);

        // Grab the pixel data from the backing canvas
        var stringData=back.toDataURL();

        // send it on the wire
        send(stringData);

        // Start over! 10 frames a second = 100milliseconds
        setTimeout(function(){ draw(v, bc, w, h); });
    }

The server. Simple Broadcast app.


var sys = require("sys"),
    ws = require("./ws.js");

var clients = [];

ws.createServer(
	function (websocket) {

		clients.push(websocket);

		websocket.addListener("connect", function (resource) {
			// emitted after handshake
			sys.debug("connect: " + resource);
		}).addListener("data", function (data) {

		// handle incoming data
		// send data to ALL clients whenever ANY client send up data
		for (var i = 0 ; i < clients.length ; i ++ ) {
			clients[i].write(data);
		}

    }).addListener("close", function () {

		// emitted when server or client closes connection
		sys.debug("close");
    });
  }).listen(8080);

  sys.debug("Listening on port 8080");

The client.

Instead of broadcasting, you could store these frames in a MongoDB for assembly later. This would make the ultimate, storage independent video camera. Never run out of storage again!

I really need to start storing these snippets on github…

P.S. Everyone knows insects are clockwork which is why god made so many of them. Today’s image is from http://www.insectlabstudio.com/

GoRuck 057 New York City – GoodLivin’

Francis — Thu, 15 Sep 2011 12:32:51 PDT

It’s 7PM, Friday 9/9/11 and I find myself in a dingy one-room loft apartment in SOHO. I’ve just signed a death waiver so detailed that I’m not even sure I own my own soul anymore. The police are combing the streets trying to chase down a possible terrorist threat and I’m carrying 30lbs of bricks on my back. I’m sweating. I’m about to start the GoRuck Challenge New York City and experience some #goodLivin first hand.

Let’s backup for a minute. In April I completed the Tough Mudder in Bear Creek PA. 11.5miles of cold muddy fun with some bone-crunching obstacles thrown in [read more here]. Almost immediately following that I started jones-ing for the next challenge. I had actually found Tough Mudder easy enough, despite lots of long lines and cold, it turned out to be very do-able physically. So I resolved to find something more difficult. The Goruck Challenge (http://goruckchallenge.com) seemed like a good candidate so after a LOT of self-doubt and debating I signed up.

I remember thinking at the time “why am I doing this? I’m not sure if I can do it”, then realizing that was exactly why I needed to sign up. GoodLivin’ had begun.

A lot of folks have asked why do this. I guess if you have to ask then I can’t explain it. For me these challenges are an opportunity to appreciate life, to appreciate health and make the most of it. Here I am with the opportunity and the physical ability to be able to attempt something like this. That’s not something I take lightly. There are a lot of people who don’t have that opportunity through no fault of their own.

Over the last four plus years I’ve watched my wife go through various treatments, radiation, chemotherapy and surgeries and there have been times when something as simple taking a walk together has been out of reach. When just to be able to sit quietly and not have the room spin has been a blessing. I also have known others who’ve passed either in 9/11 or through cancer and out of respect for their families I won’t mention them here but all these people would’ve appreciated the chance to do something like this. Since I have the chance I won’t take it for granted.

Along with signup fee I committed to raising some cash for the Green Beret Foundation and purchased a Radio Ruck. I had no idea which bag to get but this turned out to be a good choice and I’ve already used it in my daily life on a recent business trip. More on the bag later.

The Challenge was set for 9/9/11 at 19:00, we’d be running all night. I had roughly 3 months to prepare. I’ve already spoken about my training here, here, here and here. I’m not a personal trainer, I don’t have a coach. Heck I’m actually an ex-smoker who used to spark up a pack a day! So training for me was sort of a hit-or-miss affair and I muddled through. Overall I think I did OK. I focused on upper-body, shoulders, core, running with a pack and my back. I really did not want to get beat up or cause a lasting injury from this ridiculous activity.

I ran with an old Russell Athletic crappy bag I had, found 20lbs of bricks in the back yard. The neighbors are convinced I am nuts by now. I mostly ran about 6 miles, in hot weather (NJ summer heat). I only really ran with the pack about 6 times. Mostly I ran without it and tried to change up the run by inserting pushups every half mile and pullups at the various kids playgrounds. The kids in the neighbourhood also think I’m nuts. Evenings I would visit Lifetime and row or do my burpee/pushup/pullup combo which is a good way to push your VO2 Max.

I don’t really have a huge amount of time to train but I made the most of what I had and come race day I was more or less ready. Areas I could’ve done more in are lower-body, squats, lunges and interval training. This bit me during the challenge as we’ll see in a minute. Meanwhile here’s everything I brought:

Our class was assigned the number 057 and we were slated for a 7PM start. I had spent the previous day drinking a gallon of water and 2 quarts of Pedialyte. I had kept drinking that day itself so as 7PM came and went I was pretty much amped up and ready to explode. After signing our waivers, Jennifer Paquette, the Executive Director of the Green Beret Foundation showed up to kick off the weekend with some thoughtful words. Her husband is a green beret who’s lost both legs below the knee. This was starting to get meaningful.

Our cadre’s name was Lou. Lou’s a man you don’t meet every day. A tall guy, well built, tanned and confident. I had pre-conceived notions of a full-metal-jacket Sergeant Hartman type leading us around. Right from the get go I could tell Lou wasn’t that, but he wasn’t our best friend either. At least not yet. As he read out the briefing I was starting to wonder what this guy’s seen. He has the look of a guy who’s been there and back. He’s steady. Confident. Takes no shit. You could probably drop him in any given cluster-f*ck of a situation and he’s going to keep his head.

We paired up 2-by-2 and it turned out our class headcount was only 28. No matter. I was paired up with my “battle buddy” Evan Lotzof and we set off running at an easy pace for Battery Park. The first bear crawl happened in the covered footbridge on the way to Battery Park. Up the stairs and over, nothing major but the trick was to keep alongside your buddy. Work as a team, don’t take off on your own.

We got to the water-side assembled into 4 rows of 7 and dropped packs for some basic PT. Lou had already cautioned us that the packs are not to be taken off without his say-so. Here we did a combination of Pushups, Flutter kicks, Air Squats and more Pushups all to Lou’s cadence. We sprung back up, put packs on and got ready for buddy carries.

As soon as I put my ruck back on I felt dizzy. Oh dear. Time to throw up. The combination of squats and pushups had pulled all the blood from my core. I’m sure Evan was thinking “this guy’s done, why’d I get paired up with this joker?”. That was physically the worst I felt all night.

Lucky for me Evan is a horse. With the pack I probably weighed 210lbs easily and Evan hauled me down the walkway no problem. 15 minutes later I was back to normal. I hadn’t thrown up. In terms of buddy carries there was no way I could carry Evan, I was just not strong enough so we figured out a strategy of pairing up with other people for buddy carries. This worked much better.

As far as feeling woozy I was not alone. We continued our PT with dive-bombers on the grass during which another big dude got queasy. I took his pack (which couldn’t hit the ground) and he recovered. A couple of others experienced the same throughout the night. Thankfully no one hurled, no one quit and no one was sent home.

Each team is asked to bring an extra 25lb weight as a team weight. This can be anything of the team’s choosing and in our case was recovered metal and glass from the world trade centers. The extra weight is put into a bag which gets passed around from team member to team member as the night progresses. At times you can be running with as much as 55-60lbs depending. A piece of our team weight:

The class behind us (~~058~~ 059) arrived at our old spot by the water and proceeded to begin their PT. Here is where Lou’s fiendish side came out. He decided to split off a small team of 3 or 4 to infiltrate the ~~058~~ 059 team and pretend to be one of them. It was early in the night so teams wouldn’t have known every member. The rest of us would distract whilst our plant would steal the team’s “bitch bag”. Needless to say we pulled this off flawlessly. A classic move. This pleased Lou greatly and I’m sure team ~~058~~ 059 was SEVERELY punished at having fallen foul of such a disgrace. We were already gelling as a team.

We continued around the tip of Manhattan to the Healing Field project. One flag for every life lost on 9/11. This was an impressive sight, even in the dark and a solemn reminder of the meaning of the weekend. Then we crab walked down Wall Street. A roach led me most of the way. I would get close to stomping him then he’d run off again. We stopped at George Washington for a photo op then continued down to the Wall Street Bull. More Photos. Then on to Brooklyn.

On the way we held a race. The losers got punished. I’m not saying what happened but this was integral in forming of the team. Maybe you can figure it out.

We hoofed over the Brooklyn Bridge. Anytime someone would ask us what we were doing the entire class would yell “GO-RUCK”. Sometimes we would ask ourselves what were doing, just as we passed someone sleeping or passed out on a bench. You gotta stay alert in New York City.

Once in Brooklyn we made our way down to the “beach” which is nothing more than a pile of slippery rocks. We waded in and laid down for some more PT. Pushups and flutter kicks. The night was hot and humid so the water was actually pretty nice. I changed my shirt but it really didn’t matter as ten minutes later it was soaked in sweat again. Given the heat we stopped regularly for water and I think I drank about 7 litres over the course of the night judging by the refills of my camelbak.

We picked up two massive coupons in Brooklyn, the first a huge log, estimated at around 500 to 700lbs. That’s about 50 stone for all my Irish friends. The second was a railroad tie around 300 lbs or 22 stone. These were carried for what seemed like hours. Back into New York over the Manhattan bridge into Chinatown, up Bowery and then over to Washington Square Park. This was far and away the toughest part of the challenge. Not only were they heavy, they were awkward. The log was irregular and you could not get comfortable with it. We tried padding the thing with cardboard found on the sidewalk but it was too little too late. Even now, days later my right shoulder has a huge road-rash area with no skin left. GoodLivin.

Once we dropped the log I think we all would agree the challenge became easy. We had gelled completely as a team. We ran up to Times Square, up to Central Park and watched the sun come up. Then jogged back downtown again.

Our challenge ended at a firehouse in lower Manhattan. This particular firehouse lost seven firefighters in 9/11 and our visit was arranged by a team member, Laura Cross, who’s father was a New York City battalion chief.

“Chief Cross, 60, known as Captain Fearless, lived with his wife in Islip Terrace, N.Y. His favorite saying was, “Take care of the men and the men will take care of you.” ”

Here’s the coincidence. Our class number was 057, his battalion number was 57. I’m not sure how this happened. There’ll only ever be one team 057 and there’ll only ever be one 10th anniversary of 9/11 so what a great way to memorialize him.

We buddy carried half the team the last 500′ into the firestation where after 15.5miles and 11 hours Lou declared us officially GoRuck Tough.

A note on the bag: As I’ve already said I bought a Radio Ruck. The bags are advertised as tough but we’ve all heard that before. Well after going through this challenge I threw my bag in the laundry to get the East River out of it. It’s good as new. By way of example at one point we decided carrying the enormous log would be easier if we took our packs off and got on either side of the log with the packs underneath. Each person held one strap of a pack whilst the log rested across all the packs. I was sure the bags would be trashed or rip a strap under the massive load but they held up fine. This worked great but Lou didn’t like it so we switched back to carrying the log on our shoulders. Bottom line is these bags are tough as nails.

What’s it all about? If you think this challenge is about a personal goal you’re right and you’ll be tested. Physically this is an extreme activity and I’ve left a lot out. We did a LOT of stuff and it was physically VERY tough but the challenge was not all about the physical. We could’ve done more pushups, carried more stuff, ran more miles. At the end I was tired but definitely not done-in. In the days that followed I was sore but to be honest I’ve been worse off in training.

For me this challenge is all about taking a group of individual people, of varying strengths and weaknesses and forming them into a team. You get a glimpse into the type of mental conditioning the army goes through when stakes are high. You go from a mode of “how can I get myself through this” to a mode of “how can I finish quick so I can go help out someone next to me”. Your mindset changes from thinking about all the stuff that lies ahead and psyching yourself out to breaking the task into smaller chunks and focusing on the immediate task at hand, getting yourself through the next 50 feet. That’s invaluable. If only there was a way to work this into corporate america

I would be remiss to end without a word of thanks: To all in 057. This group quickly put egos aside and were generally out for a good time. And of course my battle buddy Evan Lotzof who kept the party going with Mitch Hedberg jokes. You’re a horse in a fake tuxedo! Thanks 057 for a great night and here’s to many more.

Overall this was a great experience. I’ve met a lot of new people, gained some new friends and shared an experience and memories that will last a lifetime. My kids are at an impressionable age and I think it’s also a good influence on them to see that these kinds of crazy things are attainable and achievable. I’ve also pushed my own self to a new level both mentally and physically. That kind of goodlivin money can’t buy. Whatever you want in life, it’s there for the taking.

Would I do it again? In a heartbeat. What are we dooooowaannn? GO-RUCK!

Now go checkout Asha Wagner’s account of the night: http://nuffsaid6.blogspot.com/2011/09/goruck-tough-class-057-with-you.html

Here are some other pics from the night:

P.S. Thanks to Evan also for some of the pics which I stole from FB.

GoRuck Training – Final Push

Francis — Sat, 03 Sep 2011 23:59:21 PDT

The GoRuck Challenge New York is fast approaching (9/9/11 starting at 19:00) and thanks to the generosity of many I have exceeded my fundraising goal (http://firstgiving.com/fundraiser/Shanahan/nyc911). Thank you all! All that remains is to complete the challenge and earn all those donations.

For a long event like this (which I’ve no experience with), I really want to bring everything I need but nothing more so I’ve completed a gear-test run as a final “big run” before the event next Friday. It was very useful, no injuries and I learned a lot. Here’s the rundown.

I planned about 10 miles with fully loaded pack just to see how it’d go. 4 bricks, 2 liters of water, cell phone and food. For food I packed some GU gels, Clif bars, PowerBar Energy Bars. Total pack weighed 30lbs. Heavy.

I wanted to run in our local wildlife reservation but I didn’t want to drive home muddy, wet and sweaty. So I did something I’d never done before which is run to the reservation. It’s about 4 miles each way.

I set out and decided I needed some lower-body PT so another crazy move: I lunged all the way down a neighboring street. By now my neighbors are used to the crazy Irish guy who lives on the hill so they pretty much took no notice but this is not something I’d do in my native Dublin, down Collin’s Avenue for instance. This killed my legs but felt great and highlighted the need to do more in this area.

The Reservation is great. Within about 5 minutes on the trail you’re completely cut off from the rest of the world. It’s a real adventure. This time around I had my pack and Irene had just blown through the area so it made it that much more of a discovery to see what the damage was. Trees were down, creeks were flooded, some creeks were completely blocked so although I was running as much as possible I had to break into a fast hike in many cases.

The elevation is all over the place, sometimes the trail is level, sometimes veering down, sometimes you’re climbing over a 100 year old oak tree, sometimes you’re jogging straight up for 200′. It’s pretty fun.

Overall my body held up OK but there was no way I could’ve stayed running for the full duration. The whole run took over 3 hours, 11.5miles total and by the end I was alternating between running/hiking/running/hiking. My shoulders, quads and hamstrings were shredded even today my collar bones are still bruised.

Nutrition-wise I think the PowerBars worked well for me, Clif Bars not so much. The gels I probably will skip aswell. I wished I would’ve brought some salted Almonds or something as despite drinking plenty of water I think my body was completely depleted of all salt so I wasn’t absorbing anything. Next step is to track down some Perpetuem powder and see what that does mixed in with my water. I’ll try some ShotBloks and 5-hour energy between now and the challenge.

Mentally was really tough. The first 4 miles were just me psyching myself out thinking of all possible coupons that I couldn’t possibly carry in addition to the pack I was hauling. Then when I got into the Reservation I hit another mental wall thinking “what the eff is wrong with me? trying to run through a frickin’ hurricane stricken forest with a 30lbs pack”. Just pure determination, a bit of stupidity and a bit of “when are you ever going to do this again type thinking” got me through. Good lessons.

So I think/I hope the work is done. We have less than a week to go. I’ll do some light runs this week but I don’t think I can do much more. Need to lean on my team now and hope for an injury-free night. Either way it’s going to be an adventure. I’ll post my final “load-out” before the challenge and a debrief afterwards…Should be a night to remember.

+ The picture in today’s post is of “The Endurance”, look it up, you won’t be disappointed.

GoRuck Training – Full Bricks

Francis — Thu, 11 Aug 2011 10:07:25 PDT

No that’s not a homemade explosive, those are my bricks. 4 bricks, wrapped up with duct tape. So far I’ve been training with just 3 and finally made the transition to full “brickage”. My fun raising page is up http://www.firstgiving.com/fundraiser/Shanahan/nyc911 so please consider a donation if you can.

The challenge is less than a month away now and things are getting “real”. I’m trying to increase my training but it is so hard to find the time. I’m also cautious to avoid injury. The last thing I would want is a tweak or a pull right around now. There’s no way I am NOT doing this event.

But am getting ahead of myself. What is the Goruck Challenge? You can find a video at the bottom of this page and details here: http://goruckchallenge.com/nyc-911/. The New York event is a special instance of the Goruck Challenge to commemorate the 10 year anniversary of 9/11. We have our own event page and even our own special Patch! No doubt we’ll have our own blend of the challenge to earn that patch.

So far my training has been a mixture of swimming, running, some weighted runs and working out. I have created my own version of a WOD: Stand at a pullup bar, drop to a pushup (do a burpee), then add an extra pushup, then back up to standing and do a dead-hang pull up. Do this 50 times for time. I haven’t kept accurate times as it’s hard enough just to finish but so far I can do this in under 15 minutes. I’ve also been doing some 5km rows on the Concept2 machine. Typically around 22 minutes. Just trying to increase my overall conditioning.

The other day I added the 4th brick to the pack. I’ve arranged these side-to-side in a long lozenge in an effort to keep the weight as close to my back as possible. My bricks needed some personality so with the addition of smiley face, Mr. Happy was born. I also added my new Camelbak to the pack. Water weighs about 2lbs per liter. I added 2 liters. The whole pack weighed about 25lbs altogether.

The weight of this pack was a definite shock but it felt OK. Before setting out I did some chins on the bar and it was rough. The straps dig into your shoulders so all the upper body I’ve been doing has helped but I have a ways to go. I also need to work on lunges and overall leg strength as the pack throws off your balance and gait significantly.

It was about 85F and I ran a solid 6+ miles in about 80 mins without gassing. I added pushups every half mile but canned those after about 3 miles as I really wanted to finish. The first mile or two was really not that bad. But the shine wore off FAST.

You realize *crap* I’ve signed up for 12 hours of this, maybe 15 miles of this. And this is not even the full weight. We’ve got to carry logs, coupons, other people aswell! Then you start to psych yourself out thinking about the big picture instead of small manageable steps.

It’s a mental game.

I started to realize what it means to be in your own “private hell”. When you’re running with a pack like this all you want to do is stop and take a nap. Every step of the way it’s dragging you down. It’s hard to get into any kind of rhythm and you’re constantly thinking about the pack, the weight, how much farther, and so forth. It reminds me of when I first started running (having been a smoker for many years). I really struggled then and am struggling now. I expected this. It’s part of the process and it’s all about putting in a “new level”, setting a new bar mentally. Not easy.

I am starting to think about packing and gear. This run drove home the importance of traveling light and I’m going to be going over things with a fine-tooth comb. So far I have purchased a hydration bladder (Camelbak 2liter) and a headlamp (Petzl Tikka 2). I need to try different foods as some of those high-carb sport things and Gels/Gu cause me to spike and then bonk badly.

So there’s work to be done and in a way the challenge has already started.

It sucks, but it’s a glorious type of suck. Embrace the suck.

The Golden Gate (almost) Half Marathon

Francis — Thu, 07 Jul 2011 07:43:44 PDT

More GoRuck training folks! Bruce Willis in Die Hard 1 says “fists with your toes” is a great way to get rid of that airplane feeling. Well I have another way: running across the Golden Gate Bridge! Last week I flew to San Francisco. I got in around 3PM PST so with a few hours to kill I decided to take a jog over to the Golden Gate bridge, it turned out to be quite the adventure.

If you’re interested I mapped the run here [LINK].

I was staying at the Fairmont which sits on top of “Nob” Hill (this type of name could only exist in America). This is one of the steeper hills in San Fran, something I would realize later.

I dropped the bags, ate a Cliff Bar and set off with my cell phone in hand, $20 in my shoe in case of emergency and my RoadID on my wrist. The hotel desk clerk said it was 3 miles to the bridge and she’d have towels and water ready when I got back. I told her I’d be back in an hour.

The plan was to run across the bridge if I could, but I couldn’t tell if I’d be able to get up on the actual bridge or not. I figured I’d find out one way or the other. I turned right out of the hotel and am immediately hit with a view of Alcatraz off in the distance, how cool is that. I ran down towards the touristy part of SF, streets are straight but the pavement is busted up quite badly from roots and the steep incline. The incline is no-joke about 40-45 degrees on Nob Hill, pretty unbelievable in parts.

I’m jogging along, images of Steve McQueen, Dirty Harry, Bullitt, fastback Mustangs dancing through my head. It’s awesome.

I’ve gone about 2 miles and am down in the Marina, it’s nice, really sunny, I’m feeling good. I see the bridge off in the distance and ask someone if I’m on the right track. They say “yeah but it’s a bit of a ways, about 3 miles”. I’m thinking OK, we can at least get to the base of the bridge but maybe not up onto it. I’m down low at this point and the bridge looks completely unattainable.

So I run on and cross into Crissy field which is next to the bridge and all of a sudden I realize why no one’s running here, there’s a 20 mile an hour head wind blowing sheets of sand and gravel into my face. There are some foolish people walking but they are going the opposite direction and are all wearing hooded sweatshirts. I should’ve stayed on the road that runs parallel to the park. I’m convinced they all think I’m mad.

I stop and ask a couple of ladies wheeling prams (away from the wind) how to get up to the bridge and they direct me to a bike path that leads up to it. Now I’m sorted. With knowledge that the bridge is attainable I settle down into a rhythm.

I get up on the bridge and find it’s littered with tourists, all miserable. It’s freezing up here. The weather so far has been sunny but once you get up on to the bridge you’re in the clouds and the wind is blowing a gale. The tops of the bridge supports are not visible due to the fog/clouds. It’s fairly dizzying. I run into the center of the bridge and the wind has got to be 20-30mph in the middle. The bridge itself is 1.7 miles across and almost 750 feet above the water. The railings are not that high, you could EASILY vault over and drop to your death. I can see parasail surfers far below and they look like tiny dots. I’m not that bad with heights but this is making me dizzy. There are less folks in the middle and for good reason, most folks turn back before getting there.

I make it all the way to the Marin County border which is the base of the 2nd tower (the north side) then head back. At this point I’m ready to get off the bridge. It’s just too cold and windy. I head back and narrowly miss some cyclists who haven’t been on a bike in a while. Once I get back to the marina I start to warm up again. I jog through San Fran and eventually turn up Mason street which I now realize is a near-vertical climb all the way back to the hotel. Feck it. Head-down and a few mins later I’m home. 1hour 52mins 12.6 miles on a Cliff bar and some airline food.

If you get the chance I highly recommend this run, don’t be a tourist and hire a bike. It’ll be easier but you’ll miss a lot of the sights and experience. Jogging in this case is the way to go.

Separate topic: This Independence day I completed my 2nd run w/bricks. Read about the first here [LINK]. This time around was a LOT easier on my shoulders. I have been working on those. I did still end up with some fairly deep cuts into my collar bones where the ruck straps run but not as bad as first time around. I think mentally the fear/intimidation of running with bricks is still greater than the difficulty. It’s effing difficult, there’s no doubt. It feels like you are being pulled to the ground with every step. Like there’s a small child trying to pull you to the ground. But I think it’s an even worse mental game, especially leading up to the run itself. That’s something I aim to change.

In 1994 or ’95 I once chain smoked 18 cigarettes in a recreation room on D.C.U. campus as a sort of a dare/bravado on my part. Fast forward 16 years I can run a half marathon without dying and enjoy spectacular scenery from one of the world’s iconic locations. I’m glad I quit. Enjoy the pics:

Mycellium Source Code Available

Francis — Wed, 06 Jul 2011 07:08:35 PDT

Last time [LINK] I discussed how virtual Worms could “eat” a picture, seeking out the lighter or darker areas as food and leaving a trail in their wake. I’ve dumped the source here: http://francisshanahan.com/demos/worms/test.html so you can interact, create your own images and figure out how it’s done. To be honest I haven’t had much time to clean this up as I’ve been focusing on other things and doing a bit of travel for work so be gentle.

Just enter a URL of an image and click “create drawing” to being. The page will load that image into a hidden canvas and use it as reference to draw the picture. You should use Chrome of course but this should work in all HTML5 compatible browsers.

Room for improvement might be to place the code in an enclosure, cleaning up the global DOM namespace or multi-thread it this using Web Workers although the current speed is acceptable. Web Workers in this instance might be overkill.

Enjoy.

Using Node.js, Cygwin and Web Sockets

Francis — Thu, 23 Jun 2011 13:40:28 PDT

If you have not heard of Node.js (or “Node” as Ryan Dahl calls it) [LINK] it is more fun than a barrel full of monkeys and faster than stink. Node.js is built around the Google V8 javascript engine and aims to solve the issues of concurrency and blocking IO which are prevalent in todays web servers. It also improves over traditional OS threading by using an event model to handle requests. This leads to the ability to handle many more concurrent requests but also handle them faster since less memory is allocated on the heap for each new call.

I spent some time last week looking at Web Sockets as a way to push information to the client. Web sockets need a custom server, not an HTTP server, so I used Nugget which is an open source implementation of the web socket protocol on CodePlex (http://nugget.codeplex.com/). Nugget worked great but with all the hype and interest around Node I felt I was missing something so I built the same thing again, this time around using Node.js on the server side.

Before get started you’ll need to build Node. This can be done

“on Linux, Macintosh, and Solaris. It also runs on Windows/Cygwin, FreeBSD, and OpenBSD. The build system requires Python 2.4 or better. V8, on which Node is built, supports only IA-32, x64, and ARM processors. V8 is included in the Node distribution. To use TLS, OpenSSL is required. There are no other dependencies.”

I used Cygwin on Wintel and installed g++, Python 2.7 and GNU Make. You also need OpenSSL if you plan on using Node with Web Sockets.

Here’s a comprehensive walkthrough of installing Cygwin and building Node from scratch: [LINK]

Web Sockets uses a funky little handshake protocol [LINK] to establish the connection which I didn’t feel like implementing so I came across a WS Server implementation using Node.JS up on GitHub [https://github.com/miksago/node-websocket-server/]. This worked well with Node 0.2.5 testing from Chrome 12 which uses v-76 of the Hixie protocol.

Here’s my client which is based off the Dive into HTML5 example:

if(Modernizr.websockets){
	    connect('ws://localhost:3400/service');
	} else {
		log ('web sockets not supported');
	}
	var ws;

	function connect(host) {
		ws = new WebSocket(host);
		ws.onopen = function () {
			log('connected');
		};

		ws.onmessage = function (evt) {
			log('recv :' + evt.data);
			showNotification(evt.data);
		};

		ws.onclose = function () {
			log('socket closed');
		};

		ws.onerror = function (evt) {
			log('ERROR: ' + evt.data);
		};
	};

	function log(msg){
		document.getElementById('log').innerHTML += msg + "
";
	}

	function send(){
		var msg = document.getElementById('status').value;
		ws.send(msg);
	}

	function RequestPermission (callback) {
		window.webkitNotifications.requestPermission(callback);
	}

	function showNotification(msg){
		if (window.webkitNotifications.checkPermission() > 0) {
			RequestPermission(showNotification);
		}
		else {
			window.webkitNotifications.createNotification("alert.jpg", "Test Notification", msg).show();
		}
	}

With this client-side scripe and Node running the ws-socket server I was able to get a simple echo running forth between the web page and the server.

Node has gained some ground since I first looked at it (back when Chrome was on version 8). Even Microsoft has announced plans to port it over to Windows [LINK]. In the coming weeks I plan on looking at some of the templating engines (Like http://jade-lang.com/ and http://mustache.github.com/) and web frameworks (like http://expressjs.com and http://geddyjs.org/ ) which have cropped up around it and will report back on whether it’s ready for prime time or not. Watch this space.

Attribution: Today’s image by Casch52 on Flickr [LINK]

The GoRuck Challenge – Training

Francis — Mon, 20 Jun 2011 13:12:07 PDT

In April I participated in my first Tough Mudder (LINK). I have never been one to “participate” in things like this but I have to admit the sense of accomplishment was pretty overwhelming. We also raised $3,000+ for Colon Cancer (LINK) which only added to the experience. Almost immediately afterwards I started looking for the next challenge. Another TM would be fun but 7,000 people completed the TM course (out of 10,000 entrants), I felt maybe I could find something a bit more “exclusive”.

In researching TM I’d heard of the GoRuck Challenge [LINK] – 15-20 MILES. 8-10 HOURS. GOOD LIVIN’.

“Inspired by the most elite training offered to Special Forces soldiers and led by Green Berets, the GORUCK Challenge is a team event and never a race. Challenge cadre build each class into a team through collective conditions of mental and physical exhaustion. Classes are small, camaraderie is high, smiles are plentiful, and teamwork is paramount.

You and your fellow Challenge takers all wear GORUCK backpacks throughout the Challenge. Yes, your bags will be weighted down with bricks, but if the Challenge were easy you wouldn’t sign up. In fact, the greatest hurdle is signing up. We are proud that the pass rate is over 98%.

You won’t know the route but it showcases the best of every city. Think of it as a guided tour. The miles don’t disappear on their own, and 8 to 10 hours can feel like a lifetime. Welcome to our version of good livin’. “

The next event in NYC will be on 9/9 at 19:00 and I’ll be running with a Radio Ruck and 4 bricks. The weekend will commemorate the 10th anniversary of Sept 11th and we aim to start and finish at a Brooklyn firehouse so it should be a rare experience. I’ll be running with memories of my friend and co-worker Steve Weinstein who died in Tower 1 whilst working for Marsh and McLennan [LINK]. I only knew Steve a few years but we had some great conversations and he was someone I looked up to and respected a great deal.

After that long lead-in I must now share some notes from my first training run *with bricks* which happened yesterday. I typically will run 6-7 miles two to three times a week as a means of relaxation. I run slow, about 8:30/9mins pace. I’ll visit the gym twice on a good week, sometimes 3 times and sometimes miss it altogether. The past month I’ve been focusing on pushups and chinups. I attempted my first “Murph” WOD last Friday and did not finish. I bonked on the chinups managing only 40 out of a required hundred.

On Sunday I took three bricks from the back yard and taped them together. I then wrapped that in a towel, taped that and threw it in a backpack. I also threw in 32oz of water and weighed the whole ensemble. I was expecting the scale to ring up a big number as this felt really heavy but no, only 20lbs total. So I warmed up w/pushups/chins and squats then I set off.

Within 100 yards I realized this additional weight and the way it is distributed (flopping about on your back) really messes with your gait. I live in a VERY hilly neighborhood so it took me a while to figure out how to run with the pack. I also will normally run with a predominantly fore-foot strike, very little heel. With the backpack I found a heel strike is really almost essential.

After about a mile I was into a rhythm and got over the initial embarrassment of running with a backpack. Let’s face it, you look like a complete maniac running down the road with a 20lbs ruck on your back.

After 2 miles I had to pull over and grab the water out of the pack. I was starting to gas and the water was sloshing like crazy. I carried that for the rest of the way. Not having the water in the pack helped a lot and I got back in a rhythm. The terrain was fairly hilly so this was a tough-ish run even without the pack. It was also 85 degrees so I was feeling the #goodLivin.

After about mile 3 I was into a decent rhythm and tried distracting myself mentally. This worked and for a while I went into a running “trance” and almost forgot about the pack. By this time the pack was starting to cut into my collar bones but I’d expected this and just kept on going. It actually wasn’t as bad as I’d expected. I was feeling good and even de-toured about 1 mile to check out an open house along the way.

I Last 800 feet is a solid 400 foot vertical climb which I have done many times, the pack didn’t effect this as much as I thought it might. Overall about a 6mile run and I survived. It took about 70 minutes. This was hard. Not something I’d do every day. I think I’ll try this every two weeks or so and slowly work up to 4 bricks.

On the plus side my GoRuck class has organized itself on email and Facebook and all seem like really good people who’re really supportive and encouraging so I’m definitely looking forward to September.

Emulating Mycelium Hyphae with HTML5

Francis — Mon, 09 May 2011 14:00:23 PDT

Mycelium (plural mycelia) is the vegetative part of a fungus, consisting of a mass of branching, thread-like hyphae. Hyphae are any of the threadlike filaments forming the mycelium of a fungus. And YES I had to look both of those up.

Typically they travel and branch along a source of nutrients, following the source. I came across this awesome work of Ryan Alexander [LINK] whilst messing around with Processing one evening. Ryan used Processing which is similar to Java. Processing is a great sketch-language which makes whipping up graphical wonders a doddle and is a favourite of interactive media artists. It’s really cool and I’ve been messing with it for a few years now. Check out “http://processing.org/” for more.

A few hours later I had the same thing implemented in Javascript and HTML5 using the Canvas element although mine is not as sophisticated as Ryan’s.

Disclaimer: I know nothing of Mycelium or of Hyphae or how they branch and form. I merely tried to emulate how the branching works.

Basically you take an image as input and a number of threads are created, I called them “worms” since “hyphae” seemed a but over the top. The worms have a trajectory and will move along it in search of food. Each iteration the worm decides where to move, favouring the light or dark portions of the image. Just as in Ryan’s Processing application the image acts as a source of food. If the worm ventures into a dark portion of the image, after a while without food, he dies.

I’m sure there’s a lot more to say on how this Mycelium stuff grows than what I’ve modeled here. For example I didn’t consider the amount of food contributing to the speed of the “worm” nor did I attempt to make the worms avoid each other. This was primarily an artistic endeavor and a creative outlet written over a beer one night.

I made a bunch of different images, Martin Luthor King, Bob Dylan, Willie Nelson, Clint Eastwood. For Clint’s I made a slight adjustment where any worm that died I’d re-spawn inside his eyes. Results were pretty nice. Here’s the Flickr Album: http://www.flickr.com/photos/10277648@N03/with/5704290009/

This technique works best on images with high-contrasting areas. Basically wrinkled old men. You’ll notice how the hyphae follow the wrinkles in Clint’s face.

Bob Dylan was surprising as the threads were never able to “break through” into the darker areas around his eyes. He just didn’t have enough wrinkles to feed them.

Willie Nelson, looking down. You can start to see his two braids forming in the weeds.

If you like these click over to the Flickr Album for more: http://www.flickr.com/photos/10277648@N03/with/5704290009/

Interesting factoid: At one point Mycelium was considered the largest living organism in the world! From Wikipedia:

This 2,400-acre (9.7 km2) site in eastern Oregon had a contiguous growth of mycelium before logging roads cut through it. Estimated at 1,665 football fields in size and 2,200 years old, this one fungus has killed the forest above it several times over, and in so doing has built deeper soil layers that allow the growth of ever-larger stands of trees. Mushroom-forming forest fungi are unique in that their mycelial mats can achieve such massive proportions.

In the coming days I’ll clean up the code and try to make it configurable so you can upload your own photos and play along. More to come on this one…

[UPDATE] Source code is now available here: http://francisshanahan.com/index.php/2011/mycellium-source-code-available/