The blog of Jokels.com's creators.

I fully intend to come back and write a blog post on this, because it was the most exciting two hours of Ruby coding in my life, but for the meantime here’s a demonstration of embedding a joke from Jokels.com:

Is there such a thing as too clever? I would typically say, no. But then, I typically would say anything with Joss Whedon involved would suffer from being “too clever” or better yet, “too far up its own ass”.

The whore makes out with a stuffed wolf head. She's such a slut, she's into bestiality! Oh Joss Whedon!

Cabin in the Woods basically presents two movies at once. Rather, one movie within a movie that you’re watching. And given that Scream milked slasher horror movie tropes dry, it only seemed necessary to have another movie that did the exact same thing, except this time with the whole genre and the Wayans Brothers aren’t involved! At the end of the day, it’s all the same thing, horny white teenagers get hacked up.

So movie #1 starts with two ordinary businessmen (the always amazing Richard Jenkins and Bradley Whitford) setting up five teenagers to be offered up as part of a sacrifice (the story of the five teenagers is movie #2). Basically, they’ve set up a horror movie with the usual recurring cast of characters – the “virgin” (she’s not really a virgin though! Aw, shucks!), whore (typical and blonde), brains (he wears glasses), jock (this one is Thor! or Chris Hemsworth), and burnout/fool/freak (he smokes weed! Hilarity!). These people are basically being set up by the two aforementioned old dudes to be murdered in a cabin in the woods. It’s all part of a ritualistic sacrifice dating from prehistory. Other countries do it too (the “international” focus is namely Japan, sending up the most common Japanese horror movie staple: ghost of murdered Japanese girl who has hair in her face) but it’s all part of the greater good. Quell the spirits below. It’s basically similar to the plot of The Harvest, The Wicker Man; there was even a South Park episode about it. Except here, the “harvest” in question are the horror movie universes we love? It’s hard to say – the movie doesn’t spend a lot of time explaining things (or anything really). The people they chose turned out to be smarter than they hoped and chaos ensues and Sigourney Weaver makes a cameo. Wa-hoo – so now the tables have turned and the plot continues.

It can be funny. Sure, there’s no doubt about that. It can even be clever and rather ingenious about its whole presentation (despite it being all presentation and no actual explanation. I don’t need an explanation per se, but I’d prefer something more than what I’ve been given here – complete with giant Titan/Greek God hand emerging from Hell at the very end). It’s just not very scary and much like how Studio 60 was supposed to give us the backstage details on SNL but wasn’t very funny, the same thing is happening here. The thrills and suspense ebbs more toward action than true horror. Just because zombies are chasing you doesn’t give the chase any gravitas. Just because a man has razor blades flying out of his face doesn’t make the fact that he’s just standing there scary. There’s no weight behind any of it – it’s all pulling from horror movie clichés that we’ve come to expect (or have been told as such) rather than ones that truly exist. Good horror movies don’t subscribe to the usual – but then I guess this isn’t sending up good horror movies.

My problem is that this is where horror is going – to this place where being the most ironic, self-referential asshole of a script means the better horror movie you are. There’s no thrill to any of these scenes. There’s no chase. There’s no suspense. There’s no horror in gore, there’s no horror in mocking a trope – so what’s the point? The same can be said for Scream 4 – sure you made some good points about the current state of the genre and sequels and trilogies and whatnot, but the movie just wasn’t very scary. So what’s to make of a genre that when it’s good it’s damn good and when it’s bad it’s as hackneyed and clichéd as a Christina Aguilera song? Cabin in the Woods seems to think it’s the former (like most Joss Whedon ventures, it rests assuredly on the fact that it’s better than everything you’ve ever seen, deserved or not…usually not) when it’s really more of the latter. Maybe I just want my horror movies to actually scare the shit out of me.

**/****

[Cabin in the Woods is Rated R for strong bloody horror violence and gore, language, drug use and some sexuality/nudity. It stars Richard Jenkins, Bradley Whitford, and Chris Hemsworth. Directed by Drew Goddard and written by Joss Whedon and Drew Goddard.]

When we added a mobile site to Jokels.com, I decided to go with JQuery Mobile. I had recently seen a presentation on it at DevNexus by Raymond Camden and was pleasantly surprised at how easy it was to create a slick, dynamic site for mobile browsers without much coding or design work. In practice, integrating JQuery Mobile into a Rails site proved incredibly easy. We use Mobile Fu to detect mobile browsers and redirect them to our mobile layouts (.mobile.erb) and have a new mobile-only application layout containing links to the Jquery Mobile stylesheet and javascript file.

For a full explanation of using JQuery Mobile, check out their documentation; it’s astoundingly easy to create rich UIs. For example: adding a link that looks like a native button is as easy as adding the HTML5 tag ‘data-role=”button”‘. The strange thing about JQuery Mobile is that it takes over your navigation model and substitutes its own. It uses this to allow you to do things like put multiple mobile “pages” into a single page and substitute native browser page navigation with an AJAX load of only the target page’s content. This allows the browser to skip loading most of the DOM or reloading the Javascript engine when navigating between pages. The effect of this is that JQuery Mobile sites feel much more snappy, almost like a native app. (Phonegap, an installed mobile platform, supports using JQuery Mobile to create native sites.)

The disadvantage of this is that you lose a lot of your control over your navigation model; there are concerns to note when executing javascript on DOM elements and AJAX loading your own content has some small issues to keep in mind.

I learned the hard way JQuery Mobile works best when you stop fighting its static nature and allow it to provide a dynamic feel as much as possible. For the full version of Jokels, whenever you click the “random joke” button, a new joke’s HTML is dynamic loaded and inserted into the main page to replace the old one, so my first attempt at the mobile site did the same:

Here we use JQuery Mobile’s showPageLoadingMsg() and hidePageLoadingMsg() along with JQuery’s fadeIn and FadeOut to hide the page while a new Joke’s DOM is pulled in and the JQuery Mobile effects are applied manually. Not only is this more likely to break than JQuery Mobile’s navigation but it also means we can’t use certain JQuery Mobile effects which don’t support manual creation, like button groups.

The second pass at this is was much simpler and robust. Instead of trying to do our own AJAX loading we let JQuery Mobile do the work for us by dynamically creating a link to a random joke each time the mobile page is loaded:

We don’t include the random joke link in the page creation since JQuery Mobile caches pages already visited: this means including the static link in the page HTML would create a cycle if we managed to loop around to a previously visited joke in a given user’s session.

Page caching brings up another big gotcha with JQuery Mobile: old page DOMs stick around after navigation. This means that when you’re trying to use a JQuery selector to get a given element that may be on past pages, you need to make sure to select the current “page”‘s element instead of a cached one. We do this by looking for the class “ui-page-active.” This is how we set the upvote button to a pressed state and update the vote score, for example:

The final big issue with JQuery Mobile is that it doesn’t support query params. Ostensibly this is to support page caching: the theory being that “pageA.html?a=1” wouldn’t differ dramatically from “pageA.html?a=2”, so JQuery Mobile strips out query params and treats both links as identical. Obviously, this isn’t necessary true. For example, our leaderboards use query parameters to change whether Users or Jokes are being shown, by what criteria they’re sorted and for what time frame they’re being considered. This means that the same page with different query params can be dramatically different, so we need some way to support query parameters. One way to get around this is to add the ‘data-ajax=”false”‘ attribute to any links with query parameters, but this loses the beautiful AJAX navigation model. For the leaderboards we found a really simple solution: embed query parameters in the path using Rails’s dynamic segments routing. So for our leaderboard links, we just use this snippet in our routes.rb:

Then, in our Leaderboard_helper class we have this small function to get a link to a given leaderboard:

This allows us to still have static leaderboard pages using our query parameters, but use distinct paths so Jquery Mobile treats them as independent pages and loads them using its Ajax model.

JQuery Mobile has a few minor hang-ups. But combined with mobile-fu, it allowed us to get a functional mobile version of Jokels.com much quicker than anyone with our mobile experience has the right to do so.