Archive for the 'Dynamic Web' Category

Making light of the situation (virtual hosting)


I like it when people come over. Apparently in New York, you don’t just drop by someone’s house, not like you do in Shanghai at least. Everything here requires several weeks worth of planning, confirming, and elaborate bad wine bringing. I miss having people drop in for dinner or at least to talk for a bit. So I built myself a virtual hosting setup.

Now, this isn’t virtual hosting in any sort of technical sense. I’ve simply realized that people drop in on me unannounced all the time on the web. Looking through my server logs, I can see that people stop by all the time, and even though at least five percent of the time it appears they’re trying to hack my site, I’d still like for them to stay a while, to make themselves at home.

To this end, I repurposed the setup of my L.A.M.P. project to turn on a light and a radio any time my site has a visitor.

Here’s what it looks like (minus radio):

Before I get into a technical discussion, I wanted to note the pure visceral effect of having the light and the radio turn on when I’m sitting at home, reading quietly in the living room with a mug of soup. Because if I’m home and it’s not the middle of the night, that’s probably what is happening as you read this. It doesn’t exactly feel like a physical presence—it’s more like the feeling of unexpectedly receiving a letter from a really good friend or hearing the sounds of breakfast being made on a Sunday morning from your bedroom. It’s like the shadow of a presence rather than the presence itself. You don’t feel alone but neither do you feel like someone has invaded your personal space. After the first couple of times, once you’ve grown used to it and the startle wears off, it’s reassuring, almost warming, not feelings I’ve ever associated with my website before!

This conversion from virtual to real, from web to real world is a powerful and compelling trope of interactive design. It is a tangible interface, like where the surface of the ocean meets the air, one that is generally impermeable but one where it’s fun to play. People have become accustomed to weightlessness in cyberspace and these sorts of projects remind them of gravity. One of my favorite projects in this vein is Jonah Brucker-Cohen’s Alerting Infrastructure, a web hit counter that works by activating a drill that damages the foundations of a building every time someone visits a website. A sufficient volume of visits could in theory bring the building down!

Hollywood took this idea to its (il)logical extreme in 2008’s Untraceable, a film in which Diane Lane hunts a killer who connects his victims to a live web feed so that each hit on the site accelerates their demise—we are the murderers!

It should be noted in passing that this movie rivals the sublime technical absurdity of the fine collection of films/tv shows featured here:

How it works

flow chart

Though it is probably going to sound complicated, the basic setup is pretty easy (see the sketch at the top of this post for a diagram). The lamp and radio are plugged into an outlet just like this one, which is in turn connected to an Arduino and Ethernet shield. The Arduino queries a remote php script over the web about once every two seconds (the latency of the relay that turns the outlet on and off is close to one second, so there’s not much point in querying more frequently). The php script checks the first column of a single-row, two-column MySQL database that stores the state of the system (on or off) and a timestamp indicating when it was last updated. It then translates the response (0 or 1) into on or off.

But how does the MySQL database know when someone is visiting my website, I hear you ask? That was the tricky part. My initial impulse was to use the onUnload method in Javascript, until I realized that would mean that each separate page a visitor viewed would count as a visit. Chris Sung suggested a brilliant alternative: having a Javascript on each page in my domain hit a php script that records a timestamp every half second or so. Each time the php script runs, it first checks the last timestamp. If the last timestamp and the most recent timestamp are within a couple of seconds of each other, then there’s obviously someone viewing my page and the script will change the state of the system from off to on in the database. If not, then it simply replaces the last timestamp with the newest and leaves the system status off. This method has the added benefit of only triggering the light/radio in response to human visits. Because search engine robots and most spiders scrape the site rather than loading it in a browser, the Javascript is never executed!

Just for fun, I also added a TextMark that allows me to check if someone is home even when I’m not by texting “anybodyhome” to 41411 and a dashboard (pictured at the top of the post) to quickly check the visitor statistic that most matters to me as a host—the length of each visit.


Web app screen shot

I like word games, I won’t lie, so I was pretty chuffed when I came up with the idea of creating a lamp that runs LAMP (Linux, Apache, MySQL, and PHP—one of the predominant acronyms behind the scenes on the web, both because of its robustness and its appealing freeness).

Puns aside, the idea is simple: I wanted to give people (especially strangers) remote control over a physical object in my house. My initial goal was to implement a RESTful interface for as many different channels of user interaction as possible, and to that end, I built a PHP script that will accept input from as many sources as I could think of and a single web front-end that displays the results.



1) Scenario: You're in my house
     Use the light switch!

2) Scenario: You're on the internet
    -Run the Processing sketch that
      allows you to switch the light.
    -Use the web interface directly.
    -Send dengdengalex[at]gmail an
     email with 0, 1, or 2 in the body.
          0 turns the light off,
          1 turns the light on,
          2 tells you the light's status

3) Scenario: You're on a mobile device
     -Send an email as above.
     -Text "alexlight" followed by a:
          0 to turn the light off,
          1 to turn the light on,
          2 to get the light's status

Following this fabulous tutorial, I built an Arduino-controllable power outlet. Though I chose a lamp, the system can accommodate anything that can be controlled either with an on/off switch or a relay.

There is a php script that is triggered every couple of seconds by the Arduino which records the state of the switch connected to the outlet and another script that changes that state when it receives input (via web, text message, Processing, or email) and displays the state information on a web page. The final script runs in the background on the server polling for new email.

There are a couple of little fixes that I probably won’t get around to but I will mention so I won’t forget them, the most significant being the meta refresh method I’m currently using to check for the light’s status on the web page. I know I could call a php script in the background using AJAX, I just haven’t figured out how yet, so in the interim, I’m reloading the whole page every two seconds. Because it’s so small, the user probably won’t notice, at least not until his browser crashes.

The other major problem is email. There’s a bit of a lag. If it weren’t for my sucky hosting company, I’d be able to run a cron job on the server to check for new email every five seconds or so, but my host limits me to running jobs every fifteen minutes or on a specific minute of each hour. I tried several workarounds (putting fifteen minutes-worth of looping in the script so that it runs the entire time before it is next called => crashed the server; adding the same job 60 times, one for each minute => the server ends up synchronizing the jobs and calling about a quarter of them every fifteen minutes).

The Kill Switch: Turn Off Sites At Will

Following the footsteps of fine sites such as bacolicious,, and cornify, The Kill Switch loads any website of your choosing (save, which doesn’t play nice) into an iframe using URL rule rewrites in an .htaccess file to funnel whatever follows “/TheKillSwitch/” into a GET variable and superimposes a nice toggle switch with which you can turn the site on and off (toggling the visibility an initially invisible black div).

Try out the The Kill Switch or use the live example below by clicking on the toggle switch.

Ideally, your browser would remember which sites were off so that even if you closed the window or navigated away from them, the next time you tried to open them, you’d be redirected to my page until you toggled them back. Greasemonkey and SQL would do the trick, but that would limit the site to Firefox. As a compromise, I’ll try to have my site remember which sites are on and off, so that if someone else KillSwitches Google while you’re browsing it through my site, it would turn off for you too.

John Dimatos alerted me to a much more elegant solution which is both way beyond my ken and also way too irreversible (and way cool too). Steve Lambert’s Self-Control is a little application that allows you to blacklist websites for a specific time period. It works on a system level (I’m guessing on your hosts file) and is a real bitch to shut off when after three hours, you regret the bravado that led you to believe you could go without checking your fantasy team for a week.

Get meta or

Hours of fun.

It’s been a while since I really dug into the web, and I hadn’t realized just how shitty sound playback is in pre-HTML5 browsers. Eventually, I got the sound working using Scott Schiller’s extremely elegant Soundmanager2, which uses behind-the-scenes Flash to deliver reliable cross-browser and platform sound with Javascript. Not ideal but certainly better than relying on god knows what sound plugin.

Celebrity Site-ing


For my Dynamic Web midterm, I built a database to log and map celebrity sightings. I implemented sorting and pagination (and understand why there are frameworks built for dealing with such things), session variables, user accounts and tracking by hand. I also used Google’s Static Maps API, which requires no Javascripting—just pass in all your parameters in the URL.

I apologize in advance to any celebrities who might stumble on this site when self-Googling: I saw all of you; the dates, however, might be a tad shaky.


Overall Structure:





Linking Tables:




New York Single-Handed

I noticed last winter that New Yorkers lose an inordinate number of gloves. I started counting on my way to and from school every day and gave up sometime after about thirty, lying in piles of slush or thoughtlessly trampled underboot. This winter I decided to do something about it.

NYC Glove Orphanage

The New York City Glove Orphanage is a collection of gloves found on the streets of New York. The site was an exercise in PHP and MySQL backend building for a class assignment, but the idea lives on. Initially the idea was to allow people to create profiles a la dating site for their remaining gloves (“looking for other my half”) or to use the site as a mismatched pair clearing house, but both of those require getting other people to come to the site. Too much work. In the spring when the gloves come off, I hope to have a box full that I can make something with, a tree of blooming fingers and palms I can “plant” somewhere along my daily route so that people can be reunited with their long lost gloves.

I have a couple of rules. I don’t pick up latex gloves or any other disposable glove (I count work gloves, of which I have one representative sample, as disposables because they are interchangeable, ubiquitous, and more often than not filthy). If I see the owner of a glove drop it, I return it immediately. I carry around a plastic bag for quick hygienic scoop-ups of gloves of questionable origin.