Monthly Archives: January 2012

Two apps for your responsive design tool belt

Posted on by

While developing this site, I was testing its responsiveness with that age-old method of resizing my browser window. In my case, I was testing in Chrome on my Mac. What I didn’t realise, though, was that my instance of Chrome will not resize below 400px and that I really wasn’t testing my 320px breakpoint.

This became very clear when I actually tested the site on my iPhone in portrait mode.

When I tweeted about this, I got a stream of responses1. The first one that caught my eye was by Arjan Eising, urging me to try out responsivepx.com by none other than our very own Mr. Remy Sharp2.

ResponsivePX

ResponsivePX is basically the bee’s knees if you want to test out your responsive design at exact breakpoints. And you can test locally too. Did I mention that Remy is a genius?3

Here’s a screencast of Remy, showing ResponsivePX in action:

iWebInspector

I’m not really sure how I stumbled upon iWebInspector4 but it, too, is amazing. This Mac app by Maximilliano Firtman can launch and connect to the iOS Simulator and gives you a fully-blown web inspector to use when developing and debugging your web sites in Mobile Safari, Phonegap apps, or even custom hybrid apps5.

Just install and start up the app and press the Open iOS Simulator button to launch the iOS Simulator if it isn’t already running6, launch Mobile Safari and load a site, and then click the Load from Safari button to see your DOM magically appear. You can use the inspector just like the Elements Inspector in Chrome Developer Tools, Firebug for Firefox, or Opera’s Dragonfly.

How. Cool. Is. That!?7

I know for certain that these two apps are going to make my life so much easier, and I hope that you find them useful too. Here’s a huge thank-you to both Remy and Maximilliano for making then and sharing them with the community. Thanks, guys–you rock!

  1. I’m very lucky to have some lovely followers. Other suggestions included the commercial ProtoFluid app (thanks, John Morton), and Ripple (thanks, Dominic), Matt Kersleys tool (thanks, Matt Simon), and thank-you to everyone else who responded. You guys and gals rock.↩
  2. I swear Remy must have a little army of developers doing his bidding. It’s just not possible for one person to create so much awesome in the world.↩
  3. Remy is a genius.↩
  4. Isn’t it just fun, fun, fun trying to search your Twitter stream–or your mentions–for a specific tweet?↩
  5. Hybrid apps are native apps that use a WebKit component to render some or all of their User Interface or to implement a portion of their functionality. Most apps today make use of web technologies in some manner and probably fall somewhere on the hybrid spectrum.↩
  6. You can also easily launch the iOS Simulator using a Spotlight search. If you can’t find it, you may need to install Xcode.↩
  7. Very, very, cool, that’s how much!

YouTube iframe code gotcha in Maruku

Posted on by

It looks like the biggest issue I’m having with Octopress is finding the right MarkDown parser. This seems to be an unsolved problem in the Octopress world at the moment. As I mentioned in a previous post, the default rdiscount, which Brandon recommends as the lesser of all evils, didn’t work for me for various reasons and so I’m now using Maruku.

Maruku, however, has its own demons. One of which you will encounter if you copy and paste YouTube’s default iframe embedding code into one of your posts. That code looks something like

<iframe width="1280" height="720" src="http://www.youtube.com/embed/ecLtts8jLXU" frameborder="0" allowfullscreen></iframe>

And if you add it to your post, you will get an error message like this:

REXML could not parse this XML/HTML: 
<iframe width="1280" height="720" src="https://www.youtube.com/embed/ecLtts8jLXU" frameborder="0" allowfullscreen></iframe>

The culprit here, as far as Maruku is concerned, is the allowfullscreen attribute. It doesn’t like it one bit. Remove it, as shown below, and your video will render happily. Especially after you add a couple of spaces in between the opening and closing iframe tags too. Ah, temperamental MarkDown processors, what’re they like, eh? And, as an additional bonus–at least in my tests–the full screen option in your video remains unscathed.

 

<iframe width="1280" height="720" src="http://www.youtube.com/embed/ecLtts8jLXU" frameborder="0">        </iframe>