Welcome to http://web.josephrogermoore.com! Type 'help' at any time for more information about what you can do.

To see what's available, type "ls" or "dir" at the prompt. To enter a section of the site, type "cd " and the section name.

To see what's in this section, type "ls" or "dir" at the prompt. Type "open" and the name of the project to view.

To see what's available, type "ls" or "dir" at the prompt. Type "open" and the name of the song to listen.

To see what's available, type "ls" or "dir" at the prompt. Type "open" and the name of the video to listen.

To see what's available, type "ls" or "dir" at the prompt. Type "open" and the name of the text to view.

Web

These are some of the web projects I’ve worked on. Most of the work here is front-end (HTML, CSS, Javascript) but some of it is back-end as well (PHP, Wordpress, Actionscript).

  • Fatalatour

    Fatalatour is a way to make the data of life and death real to you in the here and now.


    Fatalatour Thumbnail

    Screenshot of Fatalatour

    Fatalatour is a thesis project by David Leonard, an Art, Media, Design Graduate student at UCLA. The idea, is that whenever you use the app in LA, whenever you walk over a spot where a real life shooting or a shooting in a famous hollywood film happened, you get notified of the details of the shooting. Fatalatour is about experiencing data in a real visceral way. David will also be offering a guided Fatalatour, where you can strap on a hollywood blood pack vest and have a squib explode whenever you’re in the same spot as a shooting in the app.

    When David approached me about doing the website for the project, we spent hours talking about the purpose of the site, who will be using it, and what they need. We discovered that the barest minimum in terms of user need, is information about the app, information about the guided tour, and basic information about the project itself and its creators. These needs cover other artists who want to keep in touch with other media art and artists, journalists interested in the project as a story, casual spectators, and potential participants. Using the visual comps done by Mindy as a guide, I organized the information hierarchy as it is in the site, leading with the app & tour, and ending on the backstory.

    After we knew what we wanted, we decided to dress it up using modern javascript parallax techniques to move the different bubble across the screen at different speeds. After that, I duplicated the main page’s background image in each of the secondary red bubbles, calculating the offset so that it appears to magnify the background.

  • The Weather Dominator

    An app that tells you what to wear based on your location and the NOAA Weather forecast.


    The Weather Dominator Thumbnail

    The Weather Dominator

    I wanted to eliminate the process we all go through when we look up the weather forecast first thing in the morning, specifically, “What do I need to wear to be comfortable today?”. I built the Weather Dominator to get forecast data for your location from the NOAA Weather Service API, filter it through your personal preference for temperature (whether you feel hotter or colder than most people), and show you images of the appropriate clothes for the day’s weather, as well as temperatures for the next 12 hours.

    There is a wide diversity in the possibilities of clothing that I programmed the app to consider. There are accessories for rain and snow, as well as extreme heat and cold. Since men and women have such dramatically different clothing, the images toggle between men’s and women’s wear depending on which sex you select.

    The app grabs the local time from the user’s computer and displays a backdrop appropriate to the hour of the day or night. Every 60 seconds, the background updates to reflect the hour, so if you stay on the page long enough you can watch the sun or moon creeping up and down the screen. I also recommend checking out the sunset sometime, even in a digital app like this it’s beautiful.

  • Unsomble

    Unsomble is a place for NYC area musicians to find each other, based only three characteristics: where they are, what they play, and what they listen to.


    Unsomble Thumbnail

    Screenshot of Unsomble

    Unsomble is a place for NYC area musicians to find each other, based only three characteristics: where they are, what they play, and what they listen to. The idea was that by limiting profiles to these three key characteristics (location, instrument, and influences), you could increase the signal to noise ratio for anyone looking for someone to play with. You can also filter posts by each of these three factors. The app uses Facebook connect so that it’s easier for people to start participating.

    The first version of the site was conceptualized and created in a single day. The entire things was conceived, planned, built, torn down, and rebuilt again in about 6-7 hours. It offered no filtering and no Facebook integration, but the basic idea was there.

    The next version will include more social tools, allowing you to post your post on Facebook, and will possibly add badges to the site to give a little more supplementary information about the users (professional or not, how long you’ve been playing, etc.). I think it should move toward a more complete search experience. However, as it is, with only three deciding data points, discovery should be enough.

    Go to Unsomble

    Built Using: css, facebook, html, javascript, music, php, social

  • Movies +

    Discover movies through words. You’ll be surprised how the movies that come up are connected. An app built for the 10k app competition that lets you search movie metadata for some interesting connections.


    Movies + Thumbnail

    Screenshot of Movies Plus

    Movies + is an app I developed with Gabi Moore, for the 10k app contest held by A List Apart. The version that was submitted to the competition used the AnyClip API to take a search term and then show posters from the first dozen or so movies that match the search. On the back of each poster was the piece of metadata that “hit” in the search query, whether it’s a scene title or description, quote, or general tag. However, the API was still in development when I used it, and has since been changed significantly, breaking the app. You can see the original contest entry page here even though it doesn’t work.

    I have since rebuilt the app, so it will work with the new version of the API. However, there were a few changes that led me to change the way the app works. Now, instead of metadata about the clips returned, the app just gives you the clip itself. While there is no text to explicitly show you the connection between seemingly unrelated clips, you can watch them and discover it for yourself. Which I think is even more fun.

    One interesting thing I about this app, was that we spent more time talking about it and figuring out what exactly it should be than actually building it. After we had dissected the original idea, taking into consideration usability issues, trouble spots in the user experience (discovering which things were confusing or would seem disconnected to the user) we settled on the thing we wanted to focus on: Take a word, and see a bunch of movies, many of which you already know and love. Then, show exactly how these seemingly disconnected movies are in fact connected. Once we had that concept, the rest was easy.

    Go to Movies +

    Built Using: AnyClip API, css, html5, javascript, jquery, JSON

  • Tweet Roulette

    Utilizing the Twitter API, this app pulls random links from the public timeline and lets you see the sites other people are passing around Twitter. Developed in Javascript & HTML.


    Tweet Roulette Thumbnail

    Screenshot from Tweet Roulette

    I’d been wanting to do something with the Twitter API for awhile now, but never managed to come up with a good enough idea to start developing. But once chat roulette got popular, the idea of randomly connecting to content made me think about how to use the same idea for Twitter.

    Original Idea

    The first thing I thought of was an app that randomly selects tweets and displays them. But I realized that you can get the same result by looking at the public timeline. It updates so frequently with tweets from all over the world, that just looking at it is practically the same.

    So I thought about what other content is accessible through Twitter. I did a little research and found that not many applications take advantage of the links that get added to people’s tweets. So, I decided to build one that did.

    Another Idea

    Tweet Roulette takes the latest 20 tweets from the Public Timeline, and searches the text for any links. Anywhere from one to six links are then displayed anonymously for the user to click on.

    Once you click one, the target link opens in a new tab, and the information from the tweet that the link came from is added to the main page. That way, when a user finds content they like, they can check out the user who tweeted it, or go back to the link later. Once all the links are clicked, you get the chance to “reload” and pull links from another 20 tweets from the public timeline.

    The core program of Tweet Roulette is built entirely in Javascript, parsing the JSON the REST API returns and converting it to markup. One of the challenges in building this app was to deftly manipulate the strings that resulted from parsing the JSON. Strings are immutable in Javascript, so it took some variable juggling to parse out the links and then index them in such a way as to keep them well organized with the arrays holding the tweet information. I ended up using a series of arrays with identical keys to keep all the tweet information organized. I also used an array of indicies to serve as a key to translate between the arrays of tweet info (which always have a length of 20) and the array of links (which can be anywhere between 1 and 10).

    Looking Forward

    Future iterations of the app will include a place to log in using your twitter account, so you can easily re-tweet content you like, or even get random links from the people that you follow instead of the public timeline.

  • Capture the Phrase

    A photography game a friend of mine came up with, and I really enjoyed, so we turned it into a site. Developed in Wordpress, PHP, HTML, CSS, and Javascript.


    Capture the Phrase Thumbnail

    Screenshot of Capture the Phrase

    Capture the Phrase is an online photography treasure hunt, where we give out a list of phrases, and it’s the job of the user to make, stage, or create an appropriate photo for each phrase.

    The site was developed in WordPress, highly modified with custom PHP code, and utilizing lots of Progressive Enhancement techniques with CSS3. The structure takes advantage of WordPress’s category sorting mechanism, using several category names and those categories’ parents to create a rich and varied collection of different photos.

    To be more specific, each new photo takes three categories. These categories are children of the categories
    “Phrase”, “Place”, and “Photographer”. So if I took a picture for the Phrase “God”, and I took it in New York, that photo would be given the categories “God” (child of “Phrase”), “New York” (child of “Place”), and “Joseph Moore” (child of “Photographer”). With this structure I was able to make it simple to sort the photographs by Phrases, each specific Phrase, Places, each specific place, Photographers, and each specific photographer.

    One fun addition to the site was putting the Google Maps into the “Places” menu and the page for each specific place. The Google Maps API requires some special code, and the overhead of several extra scripts, so I decided that I should create a special header just for those pages, so as not to waste resources by having this extra code execute on pages that don’t have a map.

    I also used the API to give me a static world map with push pins for each location where we have a photo. Then, after clicking a place, the map will zoom in to that specific location. Google’s API is entirely in Javascript, so it was a snap to modify with a very small learning curve.

    For the next release of the site, we plan to offer better controls for the user to navigate through all the photos. Also, we plan to include a random feature that will allow users to casually flip through a pile of unorganized photos, encouraging more aimless surfing through the site’s content.

  • Leave-a-Note

    This is a messaging system I wrote in PHP and jQuery. I later adapted the concept into a Wordpress plugin.


    Leave-a-Note Thumbnail

    Screenshot of Leave-a-Note Plugin Site

    Leave-a-Note is a WordPress Plugin for post comments that I developed from a different site I had already created before (link below). The original idea was to create a bulletin board where people can leave a short message, and track the movement of the messages on the screen in real-time. I decided against using comet or other types of pseudo-duplex techniques due to the strain it would put on my server, so real-time updating was out the window.(However, with HTML5′s web socket technology, I may upgrade this app in the future to make it truly real-time.) Instead, I decided to use AJAX and a database to store the position of the notes, and let them update on refresh.

    Screenshot of Post-it Site

    When you leave a new message, the note is given a randomly generated position and placed on the board. When you click down on the note, the current (old) position is stored via AJAX, and when you click up, the current (new) position is also stored. The two positions are compared, and if they are different, the new position is sent and stored in the database. Now, anyone who visits the site will see the new position. When several people are moving the notes around on the page, you can refresh and see the progress happening.

    The next challenge came in translating this idea into a WordPress plugin. The most difficult aspect was to make it scalable enough to work across the ridiculously wide variety of WordPress builds that are out in the wild. I ended up re-writing most of the code, and tightening it up considerably. In addition to rebuilding the function of the site, I also created a backend menu so that people with no knowledge of code could customize some features of the note fairly simply. And of course, the design of the note itself is easily customizable through CSS alone.

    The current version of the plugin is more or less the same as the Post-it site, but future builds will include new features, such as snapping to a grid, easier controls for deciding which posts utilize the plugin, and the possibility of adding media (like photos, and html5 video elements) to the notes.

Music

I’ve been playing music since I was 8 years old, and here are some of the songs I’ve written and recorded over the years. I play several different instruments and many songs are completely different styles. You can take a listen below. You can find my album on iTunes and Spotify under the band name “Control Patrol”.

  • Whittle Little Figures

    (type "reload" to restart the track)

    A song I wrote about little whittled people and the adventures they have. I didn’t even realize it was almost a reggae song until I listened to it without the vocals.

    What I did: drums, guitar, keyboard, vocals

  • Legend of Zelda

    (type "reload" to restart the track)

    The theme song of the original NES game, The Legend of Zelda, transcribed for and performed on guitar only.

    What I did: guitar

  • Chores

    (type "reload" to restart the track)

    An experimental song I wrote, in the style of “Dodecophonismo”, a style of non-traditional structural songwriting.

    What I did: keyboard

  • Avelã

    (type "reload" to restart the track)

    Avelã is Portuguese for Hazelnut. The best Brazilian candy is made from Avelã.

    What I did: bass, drums, guitar, keyboard

  • Yo!

    (type "reload" to restart the track)

    Not sure about this one. I kind of like the parts when it seems to slow down though.

    What I did: bass, drums, guitar, keyboard

  • Bad Day Blues

    (type "reload" to restart the track)

    This song was written for a really bad short film I made after college. The film was really bad. I think this song was the best thing that came out of it.

    What I did: guitar, vocals

  • Remote Control

    (type "reload" to restart the track)

    My attempt to do a Naked City-like noise song.

    What I did: bass, drums, guitar, vocals

  • O Holy Night

    (type "reload" to restart the track)

    A cover I did of the Christmas song O Holy Night.

    What I did: guitar, keyboard, vocals

  • Night Court

    (type "reload" to restart the track)

    My version of the Night Court theme song.

    What I did: keyboard

  • Pain Killer

    (type "reload" to restart the track)

    A slow jam I wrote with Mike Patrick. He did the sax and keyboard.

    What I did: bass, drums, guitar

  • Dickin’ Around

    (type "reload" to restart the track)

    A sketch of a song I did based on the bassline.

    What I did: bass, guitar

  • Deaf

    (type "reload" to restart the track)

    I wrote this song after I first discovered what the different major and minor chords in a major scale are. If you know that, then you can dissect this song very easily.

    What I did: bass, drums, guitar, vocals

  • A Scream

    (type "reload" to restart the track)

    Part of the trio, A Thought, A Moment, A Scream. Written by me and Mike Patrick.

    What I did: bass, drums

  • A Moment

    (type "reload" to restart the track)

    Part of the trio, A Thought, A Moment, A Scream. Written by me and Mike Patrick.

    What I did: bass, drums

  • A Thought

    (type "reload" to restart the track)

    Part of the trio, A Thought, A Moment, A Scream. Written by me and Mike Patrick.

    What I did: bass, drums, vocals

  • A Minor

    (type "reload" to restart the track)

    This song is called that because it’s written in A minor.

    What I did: bass, guitar, vocals

  • Weird Song

    (type "reload" to restart the track)

    Old rockin’ song I did in college. When in doubt overdub 30 phaser guitars to solo.

    What I did: guitar

  • Phone Sex Commercial

    (type "reload" to restart the track)

    A cover I did of a phone sex commercial that played incessently in the middle of the night in Baltimore when I was in school there. “Blonde girls, black girls, beautiful girls!”

    What I did: keyboard

  • I Never Meant to Hate You

    (type "reload" to restart the track)

    The middle part of the song uses samples from Clockwork Orange, Cube, Deathtrap, and Empty Nest.

    What I did: drums, guitar, keyboard

  • Go Away

    (type "reload" to restart the track)

    Old song full of anger. Lots of screaming.

    What I did: drums, guitar, vocals

  • Diogenes

    (type "reload" to restart the track)

    I noise song inspired by Einstürzende Neubauten. The lyrics are a story by Franz Kafka read in the original German by Jon Thomas.

    What I did: drums, guitar

  • Vicious Circle

    (type "reload" to restart the track)

    Song I wrote in college, experimenting with harmonies and circular logic.

    What I did: guitar, vocals

  • Hick Song

    (type "reload" to restart the track)

    Old song I wrote in college with my friend Jon Thomas.

    What I did: guitar

  • UV

    (type "reload" to restart the track)

    Nominated for the Most Chord Changes in A Song Award.

    What I did: guitar

  • Alkabot

    (type "reload" to restart the track)

    A song I wrote with my friend Jon Thomas. He wrote the lyrics, we did the guitar together.

    What I did: guitar, vocals

  • Joe’s Song

    (type "reload" to restart the track)

    A song my friend Jon Thomas wrote, dedicated to me, after I convinced him it was worthwhile to learn to play the guitar.

    What I did: guitar

  • Sludge

    (type "reload" to restart the track)

    High-school era experiemental audio sludge. Some points of the song just sound like someone opened a big valve labeled “SOUNDS” and let it pour all over the place.

    What I did: bass, drums, guitar, keyboard

Video

Here is some of the video production, editing, motion graphics, and animation that I’ve done. Many of these videos are for comedy groups in NYC.

  • Emotional Guidance: A GSR Calming Experience

    This is an experiment I did with Arduino and a Galvanic Skin Response meter I made. It reads your skin conductivity, and makes a calming message and music appear whenever your emotions spike. Processing and Arduino source code

    What I did: arduino

  • Getting Sophistucated: Cinco de Mayo

    A segment explaining the history of Cinco de Mayo, from The Sophisticates.

    What I did: animation, editing, graphic design

  • Rush Justice

    Intro animation I did for a 24-parody skit called Rush Justice, about the inhumane methods Canadian interrogators use to stop terrorism (namely, making them listen to Rush)

    What I did: animation, graphic design

  • Maxim’s Hot 100 Animals

    Video for The Sophisticates making fun of those annoying VH1 Hot lists.

    What I did: animation, editing, graphic design

  • Bach Band

    A hot new video game lets you sing along with one of America’s most devisive political figures. Produced for Wake Up World.

    At the moment, this content is only visible to browsers that use HTML5. Try Firefox or Google Chrome (which is better) to see this content.

    What I did:

  • A Storm is Gathering

    Parody of a popular anti-gay marriage ad. Produced for Wake Up World.

    What I did: animation

  • Wake Up World Open

    Opening for the fictional morning news show, Wake Up World.

    What I did: animation, graphic design

  • Inauguration Stinger

    Fake news stinger celebrating the inauguration of President Obama. Produced for Wake Up World.

    What I did: animation, graphic design

  • Rick Warren Bio

    Fictional bio for Rick Warren. Produced for Wake Up World.

    At the moment, this content is only visible to browsers that use HTML5. Try Firefox or Google Chrome (which is better) to see this content.

    What I did: editing, graphic design

  • Collateral Victory

    A video parodying the Barack Obama commemorative plates that were advertised incessantly right before and after the election, honoring the true victor from the 2008 election, Joe Biden. Produced for Wake Up World.

    What I did: editing, graphic design

  • Darfur Seasons

    Hope Jean Paul shows us a charity worth giving to. Produced for Wake Up World.

    What I did: editing, graphic design

  • Steaming News Dump

    An animation for a web show pilot with Lizz Winstead.

    At the moment, this content is only visible to browsers that use HTML5. Try Firefox or Google Chrome (which is better) to see this content.

    What I did: animation, editing, graphic design

  • Michele Bachmann Bio

    Fictional bio for Minnesota’ s most hysterical Congressperson, Michele Bachmann. Produced for Wake Up World.

    What I did: editing, graphic design

  • The Patriot Act

    Promo animation I did for a play at the Edinburgh Fringe Festival in 2008. It was like a living movie poster that played on a loop above the theater.

    What I did: animation

  • Newsreel: Hillary Takes WV

    This is a 40′s style newsreel chronicling Hillary Clinton’s late advance in the 2008 election. We will never surrender.

    What I did: animation, editing, graphic design

  • The Fallen

    A touching look back at some of the Republican politicians we’ve lost over the years. Produced for Wake Up World in 2008.

    What I did: editing

  • Give to the War

    Sarah Silverman delivers a plea to raise awareness on funding one of America’s most important institutions. Produced for Wake Up World.

    What I did: editing, graphic design

  • Rachel Ray Bio

    Fictional bio for Nutritional expert Rachel Ray. Produced for Wake Up World.

    What I did: editing, graphic design

  • Condoleezza Rice Bio

    Fictional bio for former Bushie, Condoleezza Rice. Produced for Wake Up World.

    What I did: animation, editing, graphic design

Writing

I love writing fiction, so that’s what you’ll see the most of here. But I’ve left a spot for a blog post, article or something non-fiction as well.

  • Aaron Freeman >= Gene Ween

    My review of the Aaron Freeman (Gene Ween) concert in Williamsburg in May 2013.

    Aaron Freeman >= Gene Ween

    I just saw Aaron Freeman (Gene Ween, from the best band in, like, ever, Ween) at the Williamsburg Music Hall tonight, and I have to say it was way better than I, a pretty rabid Ween fan, had expected. Unlike some Ween fans I overheard at the show, I am also a huge fan of Marvelous Clouds, Aaron’s post-Ween solo effort of re-dos of Rod McKuen songs. I actually think that Marvellous Clouds is a better album than a few of the last several Ween releases. One thing a friend recently said to me, which I now realize is a huge barrier to their acceptance to people, is that they come off as unauthentic. Ween has a sense of humor and playful dynamic that to some people, it comes off as affectation or somehow less than. While I can see that point, personally, I have to disagree. There are some Ween songs of unquestioned depth and honesty that are in no way jokey or somehow a put-up job (Birthday Boy, Baby Bitch, It’s Gonna Be Alright) that to write them off as a joke is completely unfair. However, there is a dynamic within Ween that is limiting, and I hadn’t realized it until tonight.

    There are so many Ween songs that I hate to hear when I see Ween in concert. They are the ones that slow things down, get in the way, etc. But tonight, as Aaron Freeman, those were the only kinds of songs they played. And it was great. Almost every song in the show that was one of Aaron’s was a song that always made a Ween show a worse experience. But in the context of this concert, every one was exciting and amazing to see. Even The Mollusk, which I’ve seen live more time than I’ve probably listend to the CD version, was good in this accoustic trio.

    No matter what you feel about Ween’s breakup and the way Gener handled things, tonight’s show proved something to me: he kinda knew what he was doing when he did it. You could see him stretching out and exploring who he is as an artist outside of the context of Ween and it was good. Aaron is a great songwriter and watching him bust out so many songs I know and love and either never heard or never enjoyed live before, and made them kick ass, made me realize this was a good move for him as an artist and a person. Sometimes it is a little cognitively dissonant to see this Joe Guitar guy not being Deaner, but he is great in his own way too. I like that he doesn’t try to be Deaner in any way, but he still has to play melodies that will always be linked to Micky in my mind.

    So, go see Aaron Freeman if you can. Totally worth it. Awesome to see some of the best Ween songs you never see or never enjoy in such a fresh and real format. Taking some of the sheen and comedic playfulness off the veneer of Aaron’s music does a lot for its maturity and honesty, and made his concert an experience that was good on its own terms and for its own reasons, outside of what Ween is was or will be.

    Tags: honest, music, review, ween

  • Scents and Sensibilities

    A cutup poem I made from an academic essay by Jonathan T. Thomas of the same title.

    Scents and Sensibilities

    Scents and Sensibilities

    Words by Jonathan T. Thomas, Arrangement by Joseph Moore

    Following the immensely ambitious
    And productive period of knowledge
    Considered valid within
    Orthodox scientific frameworks,
    Emblematic and now rather well-known,
    Faces of the chiefs, the shamans,
    And the other prehistoric movers and shakers.
    The engraved slate,
    Enigmatic expressions
    Of prehistoric European art,
    Capturing the imagination of
    Mnemonic, prestigious, or ritual objects,
    Phenomenological information –
    The haptic, olfactory, auditory, visual, and even gustatory
    Experience of the emergence of
    Complex societies.
    This region has long been known
    As rich in terms of
    Institutionalized class division,
    Political centralization,
    Or rigid hierarchical systems.
    Some social differentiation existed.
    However, that evidence is highly variable.
    Similar to people.
    This perceived one-dimensional
    Understanding of
    The sensory experiences.

    Tags: academia, cutup, poetry

  • No Image

    A site to make the creation of pointless “no image available” images pointless.

    No Image

    I am proud to present http://noimage.us. It’s a site that only displays a black image with white text that says “no image available”. All you have to do to use it is set the src of any image you don’t have an image for to http://noimage.us. Coming soon, url parameters to specify the size of your image (though if you were clever, you would just use css anyway).

    Tags: development, html, images, shortcuts

  • Failed Fractals

    This was an attempt I made to write a fractal algorithm in Processing. These are my failed attempts, still beautiful to me, even in their failure.

    Failed Fractals

    This was an attempt I made to write a fractal algorithm in Processing. These are my failed attempts, still beautiful to me, even in their failure.

    Tags: failure, fractals, processing

  • The Builder

    A builder finds his way from chaos to order when faced with an overwhelming mess of tags and styles.

    The Builder

    The builder looked at his blueprints, then at the pile of rubble on the ground, then back at his blueprints again. There was a pile of tags, strewn every which way, ‘p’s on top of ‘a’s, a smattering of ‘b’s and ‘i’s, and even a few made up ones with numbers and equals signs in the wrong place.

    The builder scratched his head and looked at the beautiful structure he was trying to build, and back at the pile of tags. Mechanically, he wandered toward them and started nudging them around with his feet. “What are all these stupid things for, and why can’t I find the ones I need when I need them?”, he thought in frustration. “Why does this have to be so fucking hard?” he wondered, and started to get angry. Without thinking, he stooped down and grabbed a handful of tags and started throwing them madly against the canvas. The tags splattered and overlapped, some half formed, others combined in strange ways to make nonsense tags that looked strange and fearsome. Wearing himself out with the effort, the builder stepped back, breathing hard, and looked at what he’d done. He looked down at the blueprints, forgotten in the heat of the moment, lying crumpled on the ground, and then he looked back at what he’d built. “The two couldn’t be more dissimilar,” he lamented, and sat down on the ground, defeated.

    He sat and stared for hours, sometimes at the abomination he’d created, sometimes at the flawless but now tattered blueprint, and sometimes at the pile of unused tags still piled on the ground. He was staring at the pile when he noticed something stuck to one of the tags. He pushed aside the other tags and pulled it free from the tangle. It was a “div” and it had a stray body tag stuck to it. He had never seen that combination before, but it got him thinking. He looked at the div for awhile, and imagined that it was like a body. But whose body? Was it for his body or someone else’s? He imagined what it would look like if his body was inside it, and then his eyes came across the blueprint again. He looked a little harder this time and tried to imagine which part of the structure would be the body. After a moment he snatched up the blueprint and traced a finger around the body. Standing quickly he went back to the canvas and swept away everything he’d thrown there. In its place he put the div he’d been holding to act as the body of the structure. “This is the center of it all. It all starts here.” He pulled the tags apart wide, so that everything that needed to go inside would have room.

    The builder picked up the blueprints and looked at it again. “If is a body, then this would be the head, and this would be the feet.” He stooped down and dug around in the pile of tags until he found something that would accurately describe heads and feet. He found them both and held one in each hand, “header” and “footer”. He put them on the canvas in their respective places and looked back at the blueprints.

    “I’ve got the main containers built now, and everything in the site would go in one of these three. So now I have to go deeper. He looked at the blueprint again, and saw that inside the header were lists, links, images and bits of text. He dug through the pile, pulling out “ul”s, “li”s, “a”s, “img”s, ” and “span”s. He looked at the body, cataloguing what’s inside, and found in the pile “div”s, “section”s, “article”s, “p”s, “audio”s, and “video”s. He carefully looked at each part of the blueprint, trying to map tags to parts of the blueprint that have the same meaning. Wherever there was a sequential display of the same type of thing, he used a list. Wherever there was a full paragraph of text, he used a “p”. Wherever there was text that was less than a paragraph, he used a span.

    Bit by bit, and structure by structure, he put together a map of exactly what the contents of the blueprint demanded he include. He looked again at the canvas and marveled at the geometric perfection of perfectly semantic code. Everything was what it said it was, and was organized in discreet containers and divisions that make it modular and easy to move around. He looked back at the tags on the ground, and saw there weren’t many left. But there was something else underneath, only now visible that he’d used most of the tags. The builder looked down at them and started to smile.

    While the thing he’d built was accurate and represented the truth of his blueprints, it still didn’t look like what it needed to be. He knew that the first thing he’d have to do is move the blocks around, and put things in their right place. And what he’d just found would be the perfect thing. Underneath the tags were a pile of styles, and on top the positions, from absolute to floating. “These will do the trick just fine,” he thought and started to put them where they needed to go. But he noticed when he used the floats, the structure would fall in on itself and push the floated thing into weird places. He scratched his head in frustration, after a few hours of trying to make it right, when he saw a small asterisk on the back of one of the floats. He pulled on the asterisk and a disclaimer appeared on the back of the float: “Still buggy, use clearfix hack to work properly.” Luckily, the builder had a spare clearfix in his pocket so he slapped it on the float, and it fell back into it’s right place. He loved to watch the structure collapse as he pulled elements out of the flow with fixed and absolute positioning, but he knew it was something he should do sparingly, using floats and block/inline characteristics to push most of what he needed into place.

    A few hours later he was finished. The shape was identical to the blueprint and for the first time he could see the finished project in his work. Empassioned by his success, he turned to the pile of styles and found his font-families, his colors, his borders, and rounded corners, he found his backgrounds and background positioning, even an image replacement class from time to time. He painted that canvas like a master, breathing color and life and energy into the canvas as he worked. Every rule was a step closer to refinement, and he loved watching it take shape. He started with the most general rules, deciding what all the headings should look like, how all images should be styled, what the base palette and default typeface should be. Once he had the broad strokes down, he changed brushes, and started working in detail, creating his own classes for parts of the structure that needed to be different from the general rules. With each exception he brought uniqueness and and certain organic feeling to thing he was building, while keeping the consistency and comfort of the general rules in the background like a baseline of normalcy.

    When there were no more styles and no more classes left to be had, the builder stepped away and looked at what he’d done. The thing he’d built was indistinguishable from the blueprints in his hand. He looked back and forth with satisfaction and pride. He knew then he was more than just a builder, he was a craftsman, an artist, and the work showed that as well. He walked to the closet and picked up a broom, sweeping all his unused classes and tags into the trash. Having cleaned up his space, the builder put on his jacket and got ready to go home. It wasn’t quite finished yet, he still had to wait for the Javascript guy to come tomorrow. He said he would be be there sometime between 9am and 3pm, but he knew he’d be there all day, as you can never count on those guys to show up when they say they will. But he could already see the possibilities. Once the javascript guy turned on the juice, he’d be done, and proud to have been a part of making something so special.

    Tags: abstract-ish, code, fantasy

  • Game of Thrones with Cellphones

    A comic I wrote based on Game of Thrones, and created with Pixton.

    Game of Thrones with Cellphones

    I’m proud to present a comic series I made, based on the plot of Game of Thrones. I made all the strips with a web app called Pixton. SPOILER WARNING: These comics will spoil the crap out of the first season of the show Game of Thrones / the first book in the series A Song of Ice and Fire titled Game of Thrones. So if you haven’t read/seen it, don’t cry when I ruin all the major plot points for you.

    All the comics are clickable, opening on the Pixton page where the comic lives, so if you feel like commenting, that’s the place to do it.

    Game of Thrones with Cellphones strip 1
    Game of Thrones with Cellphones strip 2
    Game of Thrones with Cellphones strip 3
    Game of Thrones with Cellphones strip 4
    Game of Thrones with Cellphones strip 5
    Game of Thrones with Cellphones strip 6
    Game of Thrones with Cellphones strip 7
    Game of Thrones with Cellphones strip 8
    Game of Thrones with Cellphones strip 9
    Game of Thrones with Cellphones strip 10
    Game of Thrones with Cellphones strip 11
    Game of Thrones with Cellphones strip 12
    Game of Thrones with Cellphones strip 13
    Game of Thrones with Cellphones strip 14
    Game of Thrones with Cellphones strip 15
    Game of Thrones with Cellphones strip 16
    Game of Thrones with Cellphones strip 17
    Game of Thrones with Cellphones strip 18
    Game of Thrones with Cellphones strip 19
    Game of Thrones with Cellphones strip 20
    Game of Thrones with Cellphones strip 21
    Game of Thrones with Cellphones strip 22
    Game of Thrones with Cellphones strip 23
    Game of Thrones with Cellphones strip 24
    Game of Thrones with Cellphones strip 25
    Game of Thrones with Cellphones strip 26
    Game of Thrones with Cellphones strip 27
    Game of Thrones with Cellphones strip 28
    Game of Thrones with Cellphones strip 29
    Game of Thrones with Cellphones strip 30
    Game of Thrones with Cellphones strip 31
    Game of Thrones with Cellphones strip 32
    Game of Thrones with Cellphones strip 33
    Game of Thrones with Cellphones strip 34
    Game of Thrones with Cellphones strip 35
    Game of Thrones with Cellphones strip 36

    Tags: comics, game of thrones

  • Metallica Gets Respect

    Why Metallica deserves respect as a great band based on musicianship behind all the anger.

    Metallica Gets Respect

    It took 20 years and an amazing 8-bit rendition of one of their signature songs, but I finally realize the true musical genius of Metallica. When I was younger, I listened to them unironically, loving every angry minute. I was a little metalhead and listened to a lot of really bad music, but Metallica was always one of my “top bands”. As I grew up, I grew out of metal, and as any young person will do when they find something new to like, started hating the old things I used to like, including metal. So I disdained Metallica and pushed them down in my mind as just “one of those awful late 80′s metal bands”. And they helped me hate them, putting out bad music with their little goatees in a sad attempt to stay relevant past their prime. They became a joke to me, especially since everything that came out after “And Justice for All” was a pale comparison to what came before it.

    But as time passes we look kinder on our past, and a few years ago I started feeling wistful and re-acquired everything up to “Justice”. I listened, and it brought me back. But there was still a part of me that couldn’t take it completely seriously. I mean, it was still loud brash angry metal, not some timeless composition of truth and beauty. I had it kind of pigeonholed in my brain as a “genre” type of music. Something to be enjoyed sparingly when appropriate, and a proud part of my white trash past and heritage. But I didn’t respect it.

    That changed when I heard an 8-bit conversion of “Master of Puppets”. It’s funny, but you can hear a song a thousand times and never really hear it. And it wasn’t until I heard it stripped down and laid out in simple 8-bit tones that I got a real appreciation for the composition and musicianship of this band. My God, some of the harmonies and runs are as complex and interesting as the best classical composers. And the overall structure of the composition with all its parts and movements is as sophisticated as it is pleasurable. The catch is, all this gets lost for me when I hear the original version, with its growls and heavily distorted guitars. I guess it’s all the emotion that clouds my perception, but when I hear the song as recorded, I feel the anger, the rage, the energy. When I hear the 8-bit version, I hear the composition. And that’s when the respect came. Lots of people dismiss Metallica, thinking they can’t be a great band because they’re metal, but that’s not fair. Anyone who could create a composition like this deserves the respect of people who are serious about music.

    So if you don’t believe me, you can listen to the original here. And the 8-bit version here (At least listen through to the interlude in the middle of the song). Maybe you won’t see it. Or maybe you just can’t wrap your head around the idea that Metallica is good. But behind all the metal is really good music. For reals.

    Tags: 8-bit, metal, metallica, music

  • What is HTML5?

    This is a blog post I originally did for a site called Upward Mobility Group at my job, re-posted here. Some of the same material can be found in my earlier blog post “HTML5 Audio: Easy and Not”.

    What is HTML5?


    Originally produced for Upward Mobility Group

    HTML (Hypertext Markup Language) is the language on the web. Every single web site is read in HTML, even though not all sites are entirely written in HTML. (Backend web technologies like PHP, Ruby, Python, Perl, and many others do much of the heavy lifting when it comes to building modern web sites and web applications, but they all have an HTML component that their code must output to.) HTML 5 is simply the fifth version of the language.

    HTML5 OR HTML 5?

    Notice above, I wrote HTML 5. Not HTML5. If you’ve read anything about it, you may have seen it written both ways. But what’s the difference? HTML 5 (with a space) is simply the 5th version of the HTML language. By itself, HTML 5 is just markup. It can’t draw pictures. It can’t be used to program a video game. It just outputs basic web structures onto a web page, like text, photos, video, audio, and Javascript. But HTML5 (with no space) is a type of shorthand to denote the HTML 5 language plus a collection of Javascript APIs that allow for all the exciting new possibilities that everyone is talking about.

    HTML5 VS. FLASH

    Did you say Javascript APIs? Yes. Javascript APIs. Their integration into the HTML specification allows you to do just about anything on the web with just the three basic front end technologies: HTML, CSS. and Javascript. That’s why you have been hearing a lot about HTML5, especially when it comes to replacing Flash. But is HTML5 a Flash killer? Well, Steve Jobs apparently seems to hope so.

    As for being a Flash killer, the new HTML5 <video> element will single-handedly eliminate the need for the most popular Flash “product”, the Flash video player. And as for everything else Flash can do, the <canvas> element makes it possible to script in Javascript pretty much anything you could script in Actionscript, the native language of Flash, which is nearly identical to Javascript in syntax. But there are still some things that are faster and easier to do in Flash (cel animation for example), and there are a lot of people who believe in it, work in it, and will try to preserve the medium. But whatever the fate of Flash ultimately is, it is clear that these advances in HTML will certainly replace a great portion of the Flash content that is currently on the web.

    There are a lot of Flash haters out there right now, and some of the reasons are well founded. The modern web relies a lot more on the concept of accessibility than websites of old did. But what does accessibility mean? It means that the content of the site is easily accessed and able to be accessed by a wide variety of different users. Flash has come under a lot of criticism for not being a very accessible technology. Content marked up in HTML will be available to screen readers, and by using simple wai-aria techniques you can make your markup even more organized for those users. It will also be crawled by search engines and indexed as part of the content that is available online.

    However, content in Flash is entirely encapsulated in a Flash object. That means all your text, your links, photos, everything inside a Flash object is kept inside the object and not connected to the web like HTML content is. Also, many users who use a screen reader disable flash completely because it’s so inaccessible. Add to that the fact that the iPhone/iPad will not render any Flash content, and you can see that by using Flash you’re excluding a significant amount of users from experiencing your site.

    Also, Flash is proprietary where HTML, CSS, and Javascript are all open source. This means that anyone with a text-editor can write in the open languages, but if you want to edit or create Flash content, you have to buy the (very expensive) Flash program. Part of what makes the web so exciting is the possibility that anyone, anywhere can create content that the rest of the world might want to see. But by putting a price tag on the technology, Flash basically alienates any would be programmers that can’t afford the cost. However, anyone can write in the open languages without paying a cent.

    WHY IS IT AN IMPROVEMENT?

    One of the goals of HTML5 was to incorporate into the language itself the most common structures developers were already using. For example, most developers have written this code more than once in their careers:

    <div id="header">
       ... header content
    </div>

    This is a <div> tag, with an id name of “header”. So, instead of using a <div> tag to markup a header, HTML5 gives us the <header> tag to use. This is not only easier to remember, but also it is more semantic, as the content is in fact a header, not some arbitrary division. The new code would look like this:

    <header>
       ... header content
    </header>

    This “user-centered” approach to writing the language gives developers more of the tags they need to markup the content of a web site more accurately and more intuitively. Personally, I hate to see a website that looks like a place where <div>s come to die. These new tags (though a bit tricky to remember at first) will ultimately make markup cleaner, more readable, and easier for machines to parse.

    But what everyone keeps talking about are the features. So without further ado…

    The Features

    <video>

    This feature has gotten the most attention, because the web is moving more toward a medium for transmitting video as much as it is for text and images. The video element makes it simple to embed video on your page, resize it however you want, or even animate it with Javascript. The biggest drawback to using <video> right now, is that to get it to be cross-browser compliant, you have to upload two versions of the same video file (an MP4 and an OGG video file). That’s because the browsers that do recognize the <video> tag can’t agree about which format should be the standard, and they’ve all implemented different solutions. Hopefully, all browsers will eventually read all types of video, but as of now, that’s not the case). But for browsers that don’t recognize the <video> tag, you can place fallback code between the <video> and </video> tags that will not be rendered in browsers that recognize the tag. That way you can put a Flash player inside, and the content will be available for everyone.

    <audio>

    The <audio> tag works almost identically to the <video> tag, but instead of a video file, you use an audio file (duh). The two file formats you have to use for audio are MP3 and OGG audio.

    <canvas>

    The <canvas> tag is pretty much what it sounds like, a blank canvas. But instead of paint, you use Javascript to bring it to life. There are a few simple lines of code that you must use in Javascript to access the canvas object, but after that, it’s all scripting. There are quite a few impressive examples of this in use already out there. (See below in the “More Information” section for examples.)

    <section>

    This tag can easily be confused with a <div>. The difference is that a <div> is a division, that doesn’t have to have any meaning. You can group anything in a <div>. Essentially, a <div> is for the person writing the code. A <section> needs to include only things that have a user-recognized element in common. For example, if you needed to group a <nav> and a <header> in order to float it correctly, you’d use a <div>. But if you needed to group a set of elements that are all part of a contest submission, you could use a <section>, because to the user, a contest submission section is apparent.

    <article>

    This tag refers to a single “post” or element that is independently complete, like a news article or an article of clothing. If you have a list of thumbnails with titles, each item could be represented with an <article> tag.

    <header>

    The <header> tag is for the header of the page, but also has other purposes. In a feed of blog posts, each entry has header information, so it would be semantically correct to put that information in a <header> inside the <article> tag.

    <footer>

    Like the <header>, the <footer> can be used for the whole page, or individual items. Footers often encompass additional or supplemental information. For our list of blog posts the tags, the author name and the social media button could all be footer information.

    <nav>

    This tag is used for navigation and usually has a list of links inside it.

    <time>

    Date/time information can be supplemented with Microformats to make them more machine readable.

    <figure>

    This tag is used for drawings or “figures” used to supplement a text. You can also use the <legend> tag inside it to give the figure a caption.

    <aside>

    This tag is used for information that is not part of the main information flow and should not be confused with a sidebar. If we had a list of blog posts, and the owner of the blog wanted to write a bit about a contest submission, this information could be marked up with an <aside> tag.

    <h1…h6> & <hgroup>

    Unlike before, you can now have multiple <h1>s on a page. Each hierarchy of headings applies to the parent element of the heading, not the entire page. If you have more than one heading (for example, an <h1> followed by an <h2>) you can wrap them in the <hgroup> tag.

    <form> (input types)

    HTML5 has created a lot of useful additions to the <form> element, by giving the <input> tag new type. Some of the most useful and exciting ones are date, range, password, and email. This will eliminate a lot of needless Javascript validation of forms, since the browser itself will recognize these new datatypes and handle the validation itself.

    Separation of Content and Presentation

    Some people must be thinking that it will be hard to remember all these new elements of HTML5, especially the tags that are just about marking up text. Yes, the new tags are more specific, but it’s important to train yourself to think this way. One of the most important concepts of modern web development is the separation of content from presentation, and by giving us more semantic tags, we are forced to write more semantic code. Don’t call a date a <span> if you have a <date> tag available. Don’t call an article a <div> when you can call it an <article>.

    WHEN CAN IT BE USED?

    Right now. There are already lots of sites using HTML5 and many of the features I’ve described. Some of the sites are frankly amazing. However, for some client work it may not be a good idea to dive in. Once the spec is accepted and officially released, there should be a bit more consistency across browsers so that it’s less dangerous. But as it stands, any part of the spec could change, and if something drastic does change, your clients’ sites could break.

    However, if they’re forward-thinking enough to accept that risk (a very minimal risk, in fact) and want to explore some of the most cutting edge features of the web, go on ahead. Just know it won’t be fun to try and make it work in some browsers… like…

    WHAT ABOUT IE?

    … IE. So what about IE? Microsoft says they’re planning to implement some HTML5 in their browser, but as of right now, they haven’t done so. There is a Developer’s version of IE9 now available, but it’s probably not a very reliable depiction of what the final IE9 will look like, since it’s still in Beta mode. So for now, as a general rule, you can expect that IE will not use any HTML5 features. But that doesn’t mean you can’t use the text-based tags. With a small snippet of CSS and a small Javascript file, you can make browsers that don’t recognize HTML5 elements treat them all like a <div>. So there’s no harm in using <header>, <footer>, <aside>, etc. Just don’t expect your video player to work there. However, there are many fallback techniques to use for some features. For others you’re just out of luck.

    SO WHAT’S THE SOLUTION?

    One step everyone can be taking right now is to start writing in HTML5, just to get used to it. Take this dummy code for a typical blog feed:

    <div class="post">
        <h2>Post Title</h2>
        <abbr>June 31st, 2021</abbr>
        <div class="post-excerpt">
            ... excerpt content
        </div>
        <div class="tags">
            <h3>Tags:</h3>
            <ul>
                <li><a href="#">Tag 1</a></li>
                <li><a href="#">Tag 2</a></li>
                <li><a href="#">Tag 3</a></li>
            </ul>
        </div>
        <div class="categories">
            <h3>Posted in:</h3>
            <ul>
                <li><a href="#">Category 1</a></li>
                <li><a href="#">Category 2</a></li>
                <li><a href="#">Category 3</a></li>
            </ul>
        </div>
    </div>

    If we were to write it in HTML 5 it would look like this:

    <article class="blog-post">
        <header>
            <h1>Post Title</h1>
             <date>June 31st, 2021</date>
        </header>
    
        <div class="post-excerpt">
            ... excerpt content
        </div>
    
        <footer>
            <div class="tags">
                <h1>Tags:</h1>
                <ul>
                    <li><a href="#">Tag 1</a></li>
                    <li><a href="#">Tag 2</a></li>
                    <li><a href="#">Tag 3</a></li>
                </ul>
            </div>
            <div class="categories">
                <h1>Posted in:</h1>
                <ul>
                    <li><a href="#">Category 1</a></li>
                    <li><a href="#">Category 2</a></li>
                    <li><a href="#">Category 3</a></li>
                </ul>
            </div>
        </footer>
    </article>

    It’s not that different, is it? But the important thing to note is that there is extra infrastructure with HTML5 that would be unnecessary in HTML4/XHTML. So instead of having to go back later, when your client demands you upgrade his site to HTML5, and add extra levels, throwing off you beautifully spaced and organized code, you can write in HTM5 first, then change the new tags to <div>s with a class name of the HTML5 tag name. Here’s our example transformed:

    <div class="blog-post article">
        <div class="header">
            <h2>Post Title</h2>
            <abbr class="date">June 31st, 2021</abbr>
        </div>
    
        <div class="post-excerpt">
            ... excerpt content
        </div>
    
        <div class="footer">
            <div class="tags">
                <h1>Tags:</h1>
                <ul>
                    <li><a href="#">Tag 1</a></li>
                    <li><a href="#">Tag 2</a></li>
                    <li><a href="#">Tag 3</a></li>
                </ul>
            </div>
            <div class="categories">
                <h1>Posted in:</h1>
                <ul>
                    <li><a href="#">Category 1</a></li>
                    <li><a href="#">Category 2</a></li>
                    <li><a href="#">Category 3</a></li>
                </ul>
            </div>
        </div>
    </div>

    Modifying the HTML5 to this code took me about 30 seconds. Much less time than writing regular HTML into HTML5. So when the time comes to make it HTML5, we can just change the tag names and be done. Easy, no?

    MORE INFORMATION

    There are a million articles out there about HTML5 and a quick google search should yield good results. But here are a few choice selections for anyone who wants to know more.

    Tags: flash, html, html5, web standards

  • HTML5 Audio: Easy and Not

    Problems with manipulating the HTML5 audio data dynamically, and how I overcame them.

    HTML5 Audio: Easy and Not

    Out of all the new features of HTML5, <audio> and <video> is probably the most written about. Though they are really easy to implement, I found them surprisingly difficult to work with once I started to scratch the surface.

    One cool thing about it, is that the spec is written so that anything you put inside the element will be ignored by browsers that understand the tags. For browsers that don’t, the inner content will render. This gives these tags a powerful mechanism for use in progressive enhancement, and gives you no excuse for starting to use it right now. Except…

    Hold Up a Minute, Why Two?

    … There are two file types you have to upload in order to use these tags correctly (sigh). Seriously. The two largest file types any website will ever encounter (video and audio files, obviously) have to be duplicated in order to make it work across all HTML5 ready browsers. Webkit recoginzes .mp4 video and .mp3 audio. Mozilla, on the other hand is insisting on supporting .ogg for video and audio. So, that means for every piece of audio or video, you have to encode it twice, upload it twice, and code the source twice.

    At first this was a dealbreaker for me. I felt that if a new technology requires something so drastic, it’s not ready yet. However, as time went on I felt like I needed to just get over it and do it, so I started converting the audio and video on my site to html5 audio and video. It was cool, and I really like using it. But it was only simple if you use the native browser controls.

    It’s Not as Easy As I Thought

    I decided to build an iTunes-like player in the site for my musical portfolio, where multiple audio files will be loaded dynamically into one audio element. Interacting with the audio API was where I started to stumble.

    Problems With jQuery

    I love jQuery, and I use it for everything, so much so, that I think of it as just being "Javascript". This gave me a few headaches though, when I tried to use the audio play API with jQuery objects.

    Typically, I put all my selectors in the head of a script, assigning them variable names to be called later. That way, you’re only forcing the browser to traverse through the entire DOM once at the beginning, instead of every time you call an action. But I had some problems when I did this with the audio element:

      var audio = $('audio#player');
      audio.play();
    

    Nothing happened. The command .play() is supposed to play the audio object, but it wouldn’t work, even though "audio.html()" would output [HTMLAudioObject]. Instead, I had to do this:

      var audio = getElementById('player');
      audio.play();
    

    And then it worked. The audio and video API commands don’t seem to work yet with jQuery objects. They need a "vanilla" javascript object to work. Perhaps this is somethig that jQuery will need to implement in their source code in order to pass the right function to the object itself. Also, I imagine in the first example, "audio.html().play()" might have worked, but I didn’t try that.

    However, once I discovered this, I had no problem integrating the "vanilla" JS object into the rest of my jQuery-heavy code.

    Problems With Dynamic Source Code

    The other major stumbling block I faced making this player was in using dynamic source code for the audio element to load.

    In an iTunes-style player, there is one player and a list of songs. Each song that’s clicked needs to deliver the corresponding source code to the <source> tags inside the audio element.

    The function I used looked something like this:

      var audio = getElementById('player');
      var mp3source = $(source#mp3);
      var oggsource = $(source#ogg);
    
      function playSong(obj){
    
          mp3source.attr('src', obj.mp3src);
          oggsource.attr('src', obj.oggsrc);
    
          audio.addEventListener("canplay", function(){
              audio.play();
          }, true);
    
          audio.load();
      }
    

    And it worked like a charm in Chrome (my browser of choice). But when I tested it in Firefox, no luck. After much debugging, I discovered that everything was working, except that the new source data was not being loaded, even though the "src" attribute was changing in the element inspector.

    The solution ended up being to remove and re-append the source elements before loading:

      var audio = getElementById('player');
      var mp3source = $(source#mp3);
      var oggsource = $(source#ogg);
    
      function playSong(obj){
    
          mp3source.attr('src', obj.mp3src).appendTo(audio);
          oggsource.attr('src', obj.oggsrc).appendTo(audio);
    
          audio.addEventListener("canplay", function(){
              audio.play();
          }, true);
    
          audio.load();
      }
    

    Once I did that, it worked in Firefox ad Opera as well.

    Edit: The version of Firefox I was using at the time was three point something. As of version four and later, this workaround isn’t necessary.

    The Result…

    The result is on the music section of my site (http://web.josephrogermoore.com/music). Be the judge for yourself to see if it’s worth starting to use now. I think it is, and the sooner talented developers start using it, the sooner it will become standardized and easier to do. So get to HTML5ing. It’s not that hard. Really.

    Tags: audio, html5, javascript, jquery, Video

  • My First Real Foray into HTML5

    Some basic info on some of the more conceptually confusing aspects of using HTML5 right now.

    My First Real Foray into HTML5

    Ever since I attended a conference about the developments being written into the new HTML5 spec, I’ve been dying to give it a try. So much about the language is exciting, and will really expand the possibilities for web developers to do more with much less effort. So when the time came for me to re-design my personal website, I decided to do it in HTML5.

    Quick Background on HTML5

    So what’s so great about HTML5? First of all, it’s much simpler and more semantic. Second of all, it has a lot of new features that will make rich internet experiences much easier to produce without a lot of technical or backend programming knowledge. Most articles about HTML5 focus on these features, like the <video> and <audio> tags, and you can read all about some of the new features more in-depth with a quick google search. But I’m not here to cover this well-trodden ground, I’m here to talk about the realities of my experience using HTML5 today.

    It’s So Easy

    At first, I couldn’t believe how easy it was to do. After swapping out the doctype and character encoding, I had to tackle the main body of the site. More than anything else, it’s just a matter of re-organizing the way you think about markup. The new elements that I used the most for this were:

    • <header>
    • <footer>
    • <article>
    • <section>
    • <time>

    Before HTML5, the first 4 would be a <div>, and the last one <abbr> (if you follow microformats). But now each of these tags have very specific meanings.

    <header> & <footer>

    The <header> and <footer> tags are deceptively simple, and you probably already think you know how they should be used. Most modern pages have a header and footer section, and if you think that you should use these tags instead of a <div>, you’d be right. But that’s just one use, not the actual meaning.

    A <header> tag is designed to encapsulate heading information, not just of the page, but of any sub-sections that’s appropriate as well. For example, in a list of blog posts, each post has header information (the title, the date, an author). So, using the <header> tag would be appropriate there.

      <ol>
          <li>
              <header>
                  <h1>Blog Post Title</h1>
              </header>
    
              <div id="content">
                  (post summary or content)
              </div>
    
           </li>
           ...
      </ol>
    

    A <footer> tag is designed to encapsulate supplementary information. The footer on most pages is exactly that, extra links, contact info, ads, etc. However, going back to the example of a list of blog posts, information like tags, category names, number of comments could be stored in a <footer> tag for each post.

      <ol>
          <li>
              <header>
                  <h1>Blog Post Title</h1>
              </header>
    
              <div id="content">
                  (post summary or content)
              </div>
    
              <footer>
                  <ul>
                      <li>
                          (post tags)
                      </li>
                      <li>
                          (post categories)
                      </li>
                      <li>
                          (post comments)
                      </li>
                  </ul>
              </footer>
          </li>
          ...
      </ol>
    

    The funny thing is, that for a language based on being semantic the <footer> tag is a surprisingly presentational name. So don’t let it fool you. Just because it’s called a footer doesn’t mean it has to be at the bottom.

    <article> & <section>

    There are many posts out there describing the difference between <article> and <section> so I won’t waste a lot of time on that distinction, other than to explain how I kept it straight in my head.

    For me, it’s not so much about the distinction between <article> and <section>, but rather the distinction between <section>, and <div>.

    • <section> : a collection of objects that requires a thematic or semantic realtionship between them
    • <div> : a collection of objects that doesn’t require any kind of semantic realtionship between them

    A <section>  is used to represent a thematic grouping of things that have some kind of relationship that’s apparent to the user. For example, if there’s a part of a blog that is dedicated to raising money for a recent crisis or tragedy, this would be a <section> inside of that page.

    A <div> is used to group things that need to be grouped for the developer, but this grouping is invisible to the user. For example, if I had a three column layout, I might need to put two of those columns into one container in order to float them all properly. But these two columns have no relationship to each other (one is a list of posts, the other is headlines from a sister site). Using a <section> would not make sense, since this is not a section of the site, distinct and separate from the rest of the content. Instead, I’d use a <div>.

    An <article> tag is the easiest one to understand, in my opinion, as it just relates to an individual production. In a list of blog entries each entry would be an <article>. Here’s some markup that shows all three together.

      <div class="left-column">
    
          <section id="movie-posts">
              <ol>
                  <li>
                      <header>
                          <h1>Blog Post Title</h1>
                      </header>
    
                      <div id="content">
                          (post summary or content)
                      </div>
    
                      <footer>
                          <ul>
                              <li>
                                  (post tags)
                              </li>
                              <li>
                                  (post categories)
                              </li>
                              <li>
                                  (post comments)
                              </li>
                          </ul>
                      </footer>
                  </li>
                  ...
              </ol>
          </section>
    
          <section id="headlines">
              <ul>
                  <li><a href="#">Headline</a></li>
                   ...
              </ul>
          </section>
    
      </div>
    
      <div class="right-column">
    
          <section id="video">
          </section>
    
          <section id="audio">
          </section>
    
      </div>
    

    Problems With Specificity

    One last general problem I had using HTML5 was a problem with specificity. Once I dove into the CSS of the site, I realized that I hadn’t given as many class and id names as I’d need. Especially to these new elements. I guess, psychologically, some part of me thought since they were so new they’d be unique. But as I showed you above, you can have many different headers, footers, articles, sections, etc. And because HTML5 allows for multiple <h1> tags, you will need to give them a name now as well (something you may not be used to, since there only used to be one <h1> allowed per page). So, always make it a point to give headers with similar functions semantic class names (or even better, microformats if you know them):

      <div class="left-column">
          <section id="movie-posts" class="hfeed">
              <ol>
                  <li>
                      <article class="blog-post hentry">
                          <header class="post-header">
                              <h1 class="post-title entry-title">Blog ↩
                              Post Title</h1>
                          </header>
    
                          <div id="content" class="entry-content">
                              (post content)
                          </div>
    
                          <footer class="post-info">
                              <ul>
                                  <li>
                                      (post tags)
                                  </li>
                                  <li>
                                      (post categories)
                                  </li>
                                  <li>
                                      (post comments)
                                  </li>
                              </ul>
                          </footer>
                      </li>
                      ...
                  </ol>
              </article>
          </section>
    
          <section id="headlines">
              <ul>
                  <li><a href="#">Headline</a></li>
                   ...
              </ul>
          </section>
    
      </div>
    
      <div class="right-column">
    
          <section id="video">
          </section>
    
          <section id="audio">
          </section>
    
      </div>
    

    Tags: article, div, html5, section

  • Sally’s Doll

    A story about a young girl and her doll. Originally written for Liberty Hall Writers, a website where you can participate in challenges that give you 90 minutes to write a short story.

    Sally’s Doll

    Sally was wandering from aisle to aisle, eyes crawling over the neverending swaths of color and print swirling around her. She reached out to touch the fabrics with one hand, while her other hand clutched the tattered old doll that hung by her side. The doll looked like it was an older woman, maybe 50 or 60 years old, but her clothes were that of a young girl, though tattered and faded with time. Sally never went anywhere without her doll, and she held on to it out of reflex alone, since her attention was completely enraptured by the selection of clothes in the department store.

    “Sally, stay close to your Mommy,” her mother Margie said, “I don’t want you wondering off. It’s dangerous for a little girl like you to be all alone in a place like this.”

    Sally gave her mother a quick thin-lipped smile and turned back to the dress she had been admiring.

    “Mommy, when can I wear clothes like these?” Sally asked, with a hint of a pout below the surface.

    “When you’re a big girl.” Margie said, distracted with a dress of her own.

    Sally rolled her eyes at her mother’s standard response. She’d been asking that question for years now.

    “Or at least it felt like years,” Sally thought, “it’s kinda hard to tell sometimes.”

    Sally started trying to remember how many birthdays she’d had since she first started asking and lost count after a dozen or so. But no matter how many birthdays Sally had, she never got any older. The perfect eight year old little girl.

    “Mommy tells strangers that I’m eight, but I know I must be older than that…” But whenever Sally met any new children “her own age” she seemed to get along with them so well, that Sally forgot that she was easily 3 times as old as anyone there.

    Sally knew it wasn’t normal, but she also knew what made her special. Her mommy had explained it to her a long time ago.


    Sally was on the floor of the living room playing with legos, when Margie came into the room. She sat down next to Sally and that when she noticed the doll. She was young and pretty and had beautiful new clothes. Sally reached for the doll and Margie smiled.

    “Hey baby. I have a present for you.” Margie said holding out the doll for Sally to see. Sally’s little arms reached for the doll, but Margie pulled in back from her.

    “I’m going to give you this doll in a minute. But first, I need you to listen to me. This doll is an old family heirloom. I know it doesn’t look old now, but it goes back for generations. It’s been with your cousin Maria for the past few years, but now it’s come back to me… for you.”

    Sally smiled at her mom, not quite understanding everything, but patiently waiting for the doll to be hers.

    “Oh honey, you don’t know yet how special this doll is. I had when I was a girl and it was just so wonderful. Those were some of the best years of my life, the time I spent with my mother then. I wish I could have kept her forever…”

    “But why couldn’t you?” Sally asked.

    “My mom made me give it to my little sister after a few years. But you, you don’t have a sister, and you’re the youngest in the family. I don’t see why you couldn’t keep her forever! Wouldn’t that be great?”

    Sally nodded eagerly and wondered when she would get to hold the doll.

    “But the thing you need to understand is what makes this doll so special. As long as you keep it with you, you’ll stay my little girl forever, and you’ll never grow up. But don’t let anyone else hold her, cause then it won’t work anymore.”

    Margie looked at Sally to see if she understood what she was saying, but was only met with the eager open face of a little girl wanting to hold a doll.

    “Do you understand? Do you want your new doll?”

    “Yes, please!” Sally said, bouncing up and down in anticipation. Margie handed her the doll.

    “Great! Now you can stay my perfect little girl forever and ever. And no one’s going to take her away from you. Or you from me.”

    Sally smiled and gave the doll a hug. Margie leaned over and gave them both a hug in return.


    Sally wasn’t sure how long ago that had been, but she did remember that after she had had the doll awhile, she started to notice that it was getting lines in its face. kind of like her mommy was getting. And as the years passed, Sally saw the doll get older and her mommy too, but Sally herself stayed the same. She didn’t mind, her mother took her shopping all the time, and they went out to play, and it was great.

    Sally watched her mother talking to the sales person, asking about the different types of fabric for the dress she was looking at. Sally tried to stay close, but a swath of fabric caught her eye and before she knew it she was deep in the women’s wear section and all alone.

    She set down her doll for a minute to take a closer look at the dress that had caught her eye. After a brief and valiant struggle, the garment came down over her head. Sally struggled to get free, and once she could see again, she slipped the dress over her clothes and admired herself in the mirror. She knew the dress was way too big for her, but she imagined that it fit just right and that she was going to some big grown-up party like her mom always did.

    While she was lost in her fantasy, another shopper came up behind her, pushing her little girl in a stroller. Sally saw the little hand come out from the side of the stroller and wrap its little fingers around the doll she had carelessly left lying in the middle of the aisle. Sally saw the doll’s clothes get bright again, and the years melt off its face. The doll was as young and fresh as the day Margie had given it to her. The little girl in the stroller giggled and the mother looked down and saw what had happened.

    “Oh, my, I’m sorry. What an adorable little doll you’ve got,” the mom said and pulled the doll from her daughter’s grasp, handing it back to Sally. The little girl started to cry, and Sally put her hands behind her back and shook her head.

    “She can keep it. I think it’s hers now anyway. Just look at its clothes and its face, they’re just like they were when I got her.”

    The mother furrowed her brow, and looked down at the doll, trying to make sense of what Sally had said to her. But Sally didn’t wait. She stepped out of the dress she had been trying on, turned back to find her mom, and walked right into her legs. Sally looked up at Margie’s face and realized that she had been there the whole time. Sally’s heart fell a little as she saw the tears standing in her mother’s eyes and wondered why she was so sad. “I mean, it wasn’t even her doll”, Sally thought before Margie took her hand. They left without buying a thing or saying a word to each other.

    Ten minutes later, in the car ride home, Sally finally worked up the courage to ask the question she’d been dying to ask.

    “Mom, are you mad at me?”

    Tags: childhood, doll, fiction, flash contest, mother

  • Daydream

    A story about a daydream.

    Daydream

    The need for sleep was drawing my eyes shut no matter how much I tried to fight it. The pen in my hand seemed to become immovable, and the notes I had been taking were turning into small squiggly lines. My head drooped, the weight of my falling head jerking me back awake. At the front of the room Professor Miles just droned on. I made a brief effort to figure out what he was saying but tarted thinking about what kind of superpower he’d have. My eyelids started dropping again and this time I decided not to fight it.

    I was walking in a dark hall in the old warehouse where bands used to play. I heard a crowd of people in the other room, but I couldn’t figure out how to get to them. I walked a little faster, head swiveling from side to side, searching for a door to go through, but they were all locked. I turned a corner and saw the outside. It was very bright. My eyes were watering from the intensity of the light, but I was inexorably drawn to it. I walked slower, unable to see where I was going but overwhelmed with the dazzling quality of the bright unknown ahead of me.

    I opened my eyes and looked around. I was all alone. The class must have ended while I was sleeping. Talk about embarrassing, I felt like an idiot. I gathered my things, but no matter how hard I tried, I couldn’t fit all my papers and books in the bag. And it seemed like every time I got one in, two more would fall out. I looked down, and saw that there was a pile of books and papers so deep, I’d need 10 backpacks just to make a dent. I stuck my hands in the papers below and felt a sharp pain in my left hand. I pulled it out to look at it. I couldn’t see any mark, but the whole hand seemed to be swelling and turning red. I looked around again, but there was no one there to help me. I opened my mouth to cry out, but couldn’t speak above a whisper. I waded through the papers and headed for the door.

    I opened my eyes and looked around. Professor Miles was still going on about whatever he goes on about, but he seemed to be the only one oblivious to my laziness. Everyone else in the room was staring right at me. I looked from angry face to angry face, and wondered why they were so mad. One by one, they returned to their work, but I couldn’t concentrate. I listened hard to what Professor Miles was saying, but I couldn’t seem to make out a single syllable. Every word sounded alien, and mushed up. Everyone around me was scribbling their notes like mad, clearly they weren’t having trouble making out what he was saying, but the more I tried, the more impossible it was to discern any aspect of language in the sounds coming out of his mouth. I took a quick glance around to make sure the coast was clear, then peered over at the notes of the girl closest to me. The lines on the page were twisted into bizaare shapes I’d never seen before, writing as alien as the language the professor was speaking. She looked up at me, and moved her notebook so I couldn’t see it. I tried harder to hear what he said, but then, I looked out the window.

    I was outside. I was walking in the field near my aunt’s house. The grass was tall and lush, swaying under the kind of gentle breeze you only get for a few weeks a year. The flowers were fragrant and in full-bloom. Everything was a living cliche of what spring’s supposed to be. I walked for awhile until I noticed that the sun was setting too fast.

    “And that’s why he chose springtime as the season of his work…”

    I opened my eyes and looked around. No one seemed to have seen me sleeping.. I looked down at the useless mess of notes I had half-taken and thought about what kind of dog I’d get if I could have animals in my dorm.

    Tags: dream, fiction, imagination

  • The Stairs

    Kind of a sketch of a story. Just keep climbing the stairs.

    The Stairs

    The stairs stretched out in front of me, lines of perspective narrowing them to a dot in the distance. I looked behind me and saw even more stairs, stretching to unthinkable depths below. I picked up my feet wearily and continued to climb. Each step burned in my muscles, legs pumping to hoist my body higher and higher. Sweat started running down my chest and back. I sucked the air in and spat it back out, feverishly panting, mouth agape. My arms were swinging fast, then drooping more and more as time went on. I stopped for a moment and put my hands on my knees. Breathe.

    I looked down the stairs and they were as endless as those that stretched in front of me. I kept climbing. Slower now, but deliberately, I planted each foot on the stair in front of me and hauled myself up after it. It seemed like days, without a break. My clothes were limp and dripping with sweat. My mouth was dry as cotton, and my hands had started to shake. But still I climbed. I had nearly given up, when I saw it from a distance. A platform. I kept climbing.

    “I’m almost there.” I thought, and dragged myself up another stair. I could see that the platform stretched around to the back of the stairs. I wondered what it would look like from the other side. The underside of a neverending staircase. Every step cost more of my will, and by the time I reached the last one, I practically collapsed on the platform I’d been chasing. The world swam in front of my eyes, so I closed them. The wind whipped in my ears, but it wasn’t too long before the darkness took me, and shallowed me whole.

    I was climbing a ladder, nearing the top of something. I climbed with curiosity, and reached the top. It was a park slide, but it was the longest slide I’d ever seen. The bottom was so far down, I wasn’t even sure if I was seeing it. I noticed my palms sweating and body started to shake. My God, I’ve never been so scared. I realized that I just couldn’t go down that slide. There way no way! I had to leave. I had to back out. I moved backward and started to put my feet back on the ladder, but I felt hands pushing me back, landing me even closer to the edge f the slide.

    “Please! Let me get down.” I asked, but no matter how hard I tried to talk, the words came out feeble, weak, and nearly inaudible. The hands were relentless. I was moving closer and closer to the edge. I realized that I was going to go no matter what I did, so I grabbed the sides and pushed off.

    I slid down the slide, gaining speed, but still not seeing the bottom. My mouth and eyes were wide open, breathless with the rush of freefall. I slide further and further, with no end in sight. But still, I felt a lightness, like my body was lifting off of the slide. As soon as I felt it, it got stronger, and a second later I flew upwards, leaving the slide behind, falling upwards, faster and faster into the endless sky.

    I opened my eyes. I felt the corner of the stairs biting into my legs, draped as they were over the last few stairs I had managed to climb. I picked myself up off the platform floor, I felt a soreness in my legs and back like I’d never had before. The pain was nearly crippling. I hobbled down the length of the platform, leaving the stairs behind, and turned the corner. I walked around to the other side of the staircase. The underbelly looked just like the slide from my dream, and I felt a tinge of fear creeping into my heart. I shuffled along past the underside, and headed toward a door, set far off in the distance, at the other end of the platform’s walkway. Though I wasn’t sure I would make it, in time, I found myself opening those doors and going through them.

    Tags: endless, fiction, imagination, stairs

  • The Calling

    Inspired by what little HP Lovecraft I’ve read, this is a story about a strange discovery made by a crew at sea.

    The Calling

    The dark blue waves of night lapped at the slick black hull of the ship, cradling us in its angry arms. It had all started as a simple science expedition, but only God knows now how it will end. Carlos is at the bow near the spotlight. He keeps tracing the outline of the thing in light, as if just by looking, he could figure out what it is.

    It was nearing dusk on the 14th day of our journey when we saw it for the first time. No one on the deck could make out what it was, and I swear I couldn’t even see it right. Like my eyes were rejecting what was there because it simply couldn’t be. But there was no denying it, in the middle of what should have been an endless expanse of empty ocean, some kind of structure was poking out of the water, rising to dizzying heights and stretching down to unknown depths below. Carlos said it looked like a talon sticking up into the air, but that doesn’t quite describe it. Even from miles away, you could tell that the surface wasn’t smooth, but impossibly intricate, and full of rich carvings and textures. The work is too fine and we’re too far off to make any sense of it, but the effect leaves the thing looking like it’s shimmering, or at times, even undulating if the light hits it just right.

    We reported it immediately and were told to stand down. The government decided to send in some special teams to investigate. Some of the men were angry and wanted us to go in anyway. We were, after all scientists, and naturally many of us were eager to get a look. But I decided to be cautious and told the men we’d wait, and get out chance, without the risk of being arrested for disloyalty when we got home.

    That first night passed without incident, and the next day too, other than repeatedly explaining why we were waiting to an increasingly anxious and eager crew. It was the next night that we started to hear it.

    It started faint at first, then got louder as the night went on. It was plaintive, yet somehow animal. A soft mewling wail, that grew in strength for a time, then suddenly cut short followed by a strange low rumbling. No one was sure at first where the sound was coming from, but as the night wore on, and the sound got louder, it became clear that it was coming from the thing sticking out of the ocean.

    Many of us didn’t sleep that first night, and a few men even tried to jump overboard, as if they could swim out to it and make it stop. As the sky lightened for the dawn, the sound grew fainter and finally stopped.

    The next night was even worse than the first, the call becoming more urgent, and the rumbling aftershocks becoming deeper and more insistent. I was wondering how long it would be before there was a mutiny on my hands, when Carlos turned on the spotlight. I don’t know why he did it, maybe he was just bored, or he thought he would be able to see something none of us had before, but for whatever reason, he trained the spotlight on the thing, and the calling became nearly inaudible. We looked at each other in shock, and laughed at our good fortune. It would be the last few nights of good sleep I’d get for a long time.

    A few days later, the special team arrived, and it was clear at a glance they were not scientists. Hard, military men, getting ready for a mission they’d never trained for. We helped them as best we could and watched them speed off toward the thing, wondering what it was they’d find.

    But we never found out what they found, cause they never came back to the ship. We waited on the deck until well after dark. It wasn’t until after midnight that we noticed there was no sound from it that night. Caught up in waiting for the team’s return, we had forgotten set up the spotlight. But for some reason, the silence that rolled across the ocean’s surface was worse that the sound we’d been hearing night after night.

    We called in to our superiors what had happened, but they did’t seem as surprised as I would have thought. They told us another team was already in route, and that we were to continue standing down. We did what we were told and waited for the next team. The next night it started up again.

    That was a few weeks ago, and the second team as come and gone, disappearing just like the first. The funny thing is, we can’t get any response from home now. Something in our communications equipment must have gone bad. I have our best man working on it, but he doesn’t seem too optimistic, since he can’t even find out where the problem is.

    I’ve been spending the past few nights at the spotlight, just watching it and thinking about what it wants. What does it want from me? Even the sound of it calling has a certain beauty to it I never would have noticed at first. It’s almost like a song. A song calling out to me to do what no one else can. We may have orders to stand down, but then, those orders may have been changed, and we just don’t know it yet. I’ve been thinking a lot about it, and I feel like it’s time to make a command decision. We’re going in at first light. Just listen to the call, and you’ll know like I do, that it’s what we have to do.

    Tags: calling, fiction, flash contest, Lovecraft, monster, sea

  • No Experience

    A man looking for work discovers a new talent, even though it thoroughly disgusts his wife.

    No Experience

    “I just love this place…” Maria said to her fiancee, Paul. They had just stepped over the threshold of their new apartment, and Maira looked impressed.

    “I knew you would. Look at the downstairs…”

    Paul led Maria down the windy set of metal stairs that led to the bedrooms and bathroom.

    “Look at the ceilings! They’re so high, I knew you’d – ”

    Paul stopped. Maria hadn’t followed him into the master bedroom like he thought. He turned around, and saw her silhouette in the bathroom.

    “There you are, why didn’t you – ”

    But Maria was staring, transfixed at the bathtub. A big black cockroach was scuttling around. Maria’s eyes were popping slightly, and she seemed unable to make a sound. Paul stepped forward and saw what Maria was looking at. The moment Paul stepped forward, Maria turned her head. Paul peered down into the tub and saw the roach.

    “BLAHHHHHH!” he shouted at the roach, as if to shame it to death with it’s own disgustingness. The porcelain was ringing with the sound of Paul’s exclamation. And Paul was just deciding how he wanted to deal with the little monster, when he saw the bug curl up, and stop moving.

    “What? Did it -”

    Paul turned to see if Maria had seen what he had. She was still turned away, with her face in her hands.

    “Baby, did you see that? I just watched that roach curl up and die.”

    “Good! Now get it out of here!” Maria screamed, face still buried in her hands, and a curtain of hair standing guard over the unwanted visual.

    “But it was incredible! I mean, I don’t like the things either, but what are the odds of watching a roach die a natural death?”

    “Who wants to see a roach do anything! Just get it out of here!” Maria was sounding close to hysterics, so Paul decided not to push the point any further. He grabbed a wad of toilet paper, picked up the roach, and flushed it down the toilet.

    “There, it’s done. I took care of it.”

    Maria looked up. Here eyes were wide and watery. She looked like she was either about to cry, or had just finished. Paul wasn’t sure which.

    “I’m sorry, you know, it’s just that I can’t even look at them. The thought of even being near one makes me want to throw up.”

    And then she started to cry. Paul cradled her head on his shoulder and patted her back. After a moment or two, they separated and went to look at the rest of the house.

    Paul woke up the next day, one minute before his alarm was set to go off. Paul smiled, turned off the alarm, and threw the covers off himself. But the force of this celebratory gesture carried far enough that Maria was also suddenly exposed to the cool morning air. She squirmed for a moment, before opening her eyes.

    “What are you doing?”

    “Sorry honey, I just got carried away with the moment. I woke up before my alarm again, you know I love it when -”

    “I’m cold. Where’s the blanket?”

    “I’ll get it. Sorry. Here let me -”

    Paul scrambled around the bed to the corner where the blanket had landed. He picked it up and spread it over Maria. She curled up under it’s warmth and fell back asleep. Paul tiptoed out of the room, and closed the door.

    An hour later, Paul was eating breakfast and reading the classifieds.He hummed tunelessly to himself, and smiled every few seconds, inevitably amused at one thing or other in the newspaper. He sat with a glass of juice on one side of his plate, a black magic marker on the other. Every so ofter he would pick up the pen and circle an ad. By the time he’d eaten his breakfast, the paper was littered with little black ‘o’s. He got up to put his dishes in the sink, when he saw another roach scutling across the floor. He stopped dead, terrified of the scene he’d have to endure if Maria came up starirs right now. He sighed to himself, and muttered another “Blahhh” to himself. The roach stopped, twiddled its antennae and then disappeared under the fridge.

    “Yeah, you stay there for now. Don’t let Maria see you out for another walk.”

    Around noon, Maria climbed up the stairs to find Paul talking on the phone.

    “Paul, P-A-U-L, Edwards, that’s E-D-W-A-R-… Okay, I was just trying to make sure you had it down correctly. If you could just -” Paul looked up as he was hung up upon to see Maria watching him with a scowl. He set the reciever on the cradle, and asked her what was wrong.

    “You woke me up this morning.”

    “I know, I’m sorry -”

    “I couldn’t get back to sleep.”

    “I said I’m sorry, what do you-”

    “I just want you to promise that you’ll never do that again.”

    “But I didn’t mean to do it this time. I can promise that I’ll never try to do it -”

    “So you’ll just do it without meaning to again?”

    “No, I mean, I hope not, it’s just -”

    “I want you to promise that you’ll never do it again!”

    “I’m sorry, I’ll try harder. I was just so eager to get started with the job search.”

    Maria crossed her arms and pouted for a moment before responding, “How is it?”

    “It’s going great! I called 15 places this morning, and no takers. But there’s bound to be some better offers in tomorrow’s paper.”

    “Mmmm.”

    “Don’t worry baby. It’s all going to be alright.”

    The week went by, and every morning Paul would look for a job, while Maria slept in. But luckily, it was a completely roach-free week. Friday afternoon, Paul had already finished his morning calls, and was busy cleaning up. He was sweeping the kitchen floor, when he saw it. Another big black roach was scuttling from under the fridge, trying to escape to another dark sanctuary. Paul didn’t even think about what he was doing, or that Maria was still sleeping, he did exactly what he did when he saw the roach in the bathtub.

    “BLAHHHHHH!” Paul shouted, dropping the broom in his gusto. But then the broom was the furthest thing from his mind. Once again, Paul watched the roach stop moving, and curl up, dead. Disbelief was all over his face, and he looked up to see just as much in Maria’s face too. She had come up the stairs just as Paul noticed the roach. She had stopped transfixed in her disgust. But then she saw it happen. Paul screamed, and the roach died.

    “Did you do that?” she asked uncertainly.

    “Um, yeah, I guess. I don’t know….”

    “That’s what you said happened before!”

    “I know.”

    “Remember all that about, what are the odds, and whatever else you were saying?”

    “I know. But you don’t think – I mean, come on, I didn’t really -”

    “You screamed, and that roach died. You screamed in the bathroom too. That roach is dead…. Baby, how do you do it?”

    “I don’t even know what I’m doing! It’s just my reaction. I see the filthy things, and go ‘Blahhh’.”

    Maria looked at Paul, and Paul looked at her. Both seemed unable to move.

    “Hold on. I think I see one.”

    “Just don’t let it get near me!” Maria shrieked. She was curled up into a ball on the chair, hands over her mouth, and both feet off the floor, waiting for Paul to do his thing. Paul was lying on his stomach on the kitchen floor, holding a flashlight, and his face screwed up in concentration. He was sweepng the floor under the fridge with the light, hoping for some sign of scuttling. After 20 minutes or so, Paul was getting tired. Maria was looking bored, and even forgot her fear long enough to put her feet back on the floor. Paul clicked off the flashlight, and stood back up. He walked over to Maria.

    “I just couldn’t find one baby. Sorry.”

    Maria looked at him and smiled, she pulled him toward her, and gave him a hug. Paul looked happier after that, and he stood there for a moment just holding her hands, and looking at his beautiful wife to be. Then suddenly he dropped her hands and ran into the kitchen. A big black roach was once again wandering across the kitchen floor. Paul squared his shoulders and shouted as loud as he could.

    “BLAHHHHHH!!!!!”

    The roach shuddered once, and curled up dead.

    “I did it! I Killed one with my voice!”

    Paul jumped up and down in triumph and marvel at his newfound skill. He ran over to Maria to bask in his success, but as soon as he rounded the corner he saw her scream in horror. Paul faltered, the triumphant grin sliding from his face. Then he realized she wasn’t looking at him, she was looking behind him. Paul turned around and jumped back in horror. Dozens of roaches of all sizes were coming out of the woodwork, and zigzagging all over the kitchen floor. Some appeared to be limping, or scuttling in circles, others appeared crazed, running into walls, and making strange low hissing sounds. Paul was so disgusted that at first he forgot all about his ability, but after the initial shock, he took action.

    “BLAHHHHHHH!!!!!!!!” Paul shouted, even louder than before. The roaches stopped as suddenly as if a key had been turned. They all curled up dead. Paul stood still, unable to believe that it was all over so easily. He looked and waited for more roaches to appear, but none did. After a moment, he went to the cupboard to get the broom and sweep up the mess.

    “You have to see a doctor.”

    “What? No…”

    “I’m serious.”

    “Why should I go to a doctor?”

    “It’s not normal.”

    “And what’s a doctor going to do about it? No, I’m not going.”

    “But it’s just so creepy!”

    “What?”

    “It’s just creepy knowing that you have this connection with those nasty things.”

    “But I’m killing them! I thought that’d make you happy!”

    “Nothing that has anything to do with those things could ever make me happy.”

    Paul continued to look for work, but to no avail. And the days went by much the same, except for the mounting unspoked dread of their dwindling bank account.

    “You need to be more aggressive.”

    “What? I’m aggressive.”

    “No. You’re not. I’m much more aggressive than you are.”

    “What? That’s crazy. You’re so sweet.”

    “Ha ha. But seriously, you just can’t take no for an answer.”

    “How do you do that? Insist that someone give you a job? That’s ludicrous. I’ll find something.”

    “You always say that.”

    “Mmm.”

    Maria paused for a moment, and sniffed the air.

    “You know, I’ve been smelling something funny all day. Do you smell it too?”

    “You know, now that you mention it, I do. But what is it?”

    “I don’t know, but it’s getting stronger. It smells like something’s died.”

    “Maybe there’s a mouse in the walls or something.”

    “Yeah. Maybe.”

    But it turned out it wasn’t just a mouse. There were 4 dead mice, and hundreds of dead cockroaches lining the insides of the kitchen and living room walls. Paul and Maria had to move out for a week while the Realty company had the place fixed up again. But by the time they returned, Maria was insistant.

    “Don’t you say a word. Don’t you so much as think bee-ell-ay-aich-aich-aich.”

    “I know. But I never mean to do it, it just comes out.”

    “I’d rather live with the things in the walls, as long as I don’t have to see them! I just NEVER want to see anything so horrible as we saw the

    other night.” Maria said on the verge of tears.

    “Okay, okay.”

    And Paul was as good as his word. He kept his mouth shut, and kept looking for a job. But it didn’t really matter, as he hadn’t seen a single bug or mouse anywhere near the house. But one day, as he was combing the newspaper for more jobs, an ad caught his eye.

    Exterminator Wanted

    No experience neccessary

    Good money, easy work

    Call today

    He hesitated for a moment, wondering what Maria would think, then picked up the phone to call.

    Tags: ability, cockroaches, fiction, relationship