Flipity flop – mmm.phpied.com

November 19th, 2009. Tagged: CSS, Fun, WordPress

Randomly browsing something on the iPhone it occurred to me that people could prefix their mobile sites with "mmm" instead of "m" or "i", as in mmm.mysite.tld. It's longer, true, but I don't think it will take longer to type three m's instead of one. And it's funny - mmm, it's like www. Only... flipped.

So I tweeted about it, got some good reasons why not to use something like this and Lucas Smith (of YUI fame) joked that I could setup mmm to deliver the same as www, only flipped.

Now, English is not my first language, so I miss out on many expressions, nuances, humor and so on. And there, I took it verbatim. :D

mmm.phpied.com

Ladies, and gentlemen, announcing the flipped version of this blog - http://mmm.phpied.com

You should be able to browse the whole site on its head, maybe with the exception of "popular posts" and other places, where I've hardcoded www.

how-to

All the changes had to be in my wordpress template, of course.

CSS first. Developer extraordinaire Ryan Grove have already solved the problem of x-browser flipping, so that was easy. At the bottom of the stylesheet, I added a new declaration block:

.flip {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Now the only thing was to add the class name to the body whenever the domain is mmm. That took some digging around WordPress, but eventually I decided to short-circuit the function call that takes the home URL option. WordPress provides a hook for that. So I added this to the beginning of functions.php in my template.


function mmm() {
  if (substr($_SERVER['HTTP_HOST'], 0, 4) === 'mmm.') {
    return 'http://mmm.phpied.com';
  } else {
    return 'http://www.phpied.com';
  }
}
add_filter('pre_option_home', 'mmm');

Finally, the change to header.php - replacing the body tag with:

<?php
  if (substr($_SERVER['HTTP_HOST'], 0, 4) === 'mmm.') {
    echo '<body class="flip">';
  } else {
    echo '<body>';
  }
?>

And voila - mmm.phpied.com

Tell your friends about this post: Facebook, Twitter, Google+

7 Responses

  1. Hilarious, I love it. I expected it was going to be more like the “flipped text” unicode trick, this is actually really cool. I didn’t know there was an IE alternative to that.

  2. heh, awesome.

  3. why only limit tourself to mmm on 180 degrees?
    proceed with EEE at a 90 degree angle :-)
    the only thing we need is some letter for the 270 degree turn… maybe the number 3 ?

  4. Awesome!

    I’m *so* going to use this to mess with my friends :D

  5. I wondered why I couldn’ see anything changed, even after activating JS. OK, it’s not the Unicode trick or dir=”rtl” but CSS3 that Fx 3.0 won’t understand.
    So I’m safe for now with my “old” version of Fx :)

  6. Awesome css trick. :) I had to show everyone in the office(in context of course). Keep up the good work. ;)

  7. Where there’s a will there’s a way …

    I would suggest reverse scrolling… just to mess with peoples minds [just a little bit more]… ;)

Leave a Reply