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 responses¹. 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 Sharp².

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?³

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

iWebInspector

I’m not really sure how I stumbled upon iWebInspector⁴ 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 apps⁵.

Just install and start up the app and press the Open iOS Simulator button to launch the iOS Simulator if it isn’t already running⁶, 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!?⁷

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!

Hi, I’m Aral Balkan and What, Where, Why? is my new blog¹ on web development and related geekery.

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.

When I migrated from mobile.me to iCloud, I was plagued with the curse of massively-duplicated bookmarks (to the tune of over 23,000 duplicates). In addition to making a complete mess of my bookmarks, this also slowed the autosuggest feature in the Mobile Safari address bar to a crawl on iPhone and iPad.

So, if you somehow end up in the same boat, how do you clean these bookmarks and flush out iCloud?

This site is built using the excellent Octopress blogging engine by the prolific Brandon Mathis. It’s hosted on Amazon S3, delivered via Amazon CloudFront, and has DNS services provided by Amazon Route 53.

In this post, I will show you how these technologies fit together to create a static site that scales seamlessly and loads quickly no matter where in the world it is viewed from.

In addition to fixing the issue I had with ordered list rendering with rdiscount, Maruku also brings with it a number of very useful extensions to Markdown implemented from PHP Markdown Extra.

Here’s a summary of useful Markdown extensions I’ve found most useful so far in Maruku.

If you’ve been following my series of posts on Octopress, you may have seen that I switched from using rdiscount to Maruku for processing the Markdown in my posts.

One issue I ran into with Maruku is that it doesn’t wrap list item (<li>) tags in paragraph tags. Among other things, this causes lists to display without the correct styles and thus without the intended spacing.

Thankfully, I stumbled upon a fix that is easy to implement:

Octopress lets you use Markdown syntax when writing your posts. I ran into an issue with the default Markdown processor, rdiscount, where it would not render ordered lists that had code blocks in them properly (it would lose the count, and start the list from one again).

Changing the Markdown processor to Maruku fixed this issue.

s3cmd is an awesome open source command-line tool by the folks at s3tools for managing S3 buckets. Among other features, it allows incremental uploads to S3 (similar to using rsync), so that you only upload changed files during deployment.

This makes s3cmd an invaluable tool if you have a static website hosted on S3.

If you use S3 to host your static web site, you might also be using Amazon CloudFront to serve your site with low latency and at high speed. (This is what I do for WWW.) And, you may be happy to read that the last two beta versions of s3cmd (the current version is Beta 3) have Amazon CloudFront support for invalidating files that have been updated at deployment.

Unfortunately, if you try to use the CloudFront invalidation feature with an S3-hosted static site, it will fail. That’s because, as of s3cmd Beta 3, the feature only works with regular S3 buckets and ignores S3 buckets with Custom Origin URLs (which is what static sites use).

Or at least that was the case until I added support for S3 static site buckets to my fork of s3cmd.

So, you’ve cloned a Github project and made some changes to the code. How can you either contribute those changes back to the original project or simply push them to your own fork on Github? (I’m assuming that you probably don’t have commit rights to the original project or else you wouldn’t be reading this.)