I just spent ages chasing [what I thought was] a bug using $.getJSON in IE7 that turned out to be an issue with something else entirely.

If you’re using $(el).css or .animate with JSON, make sure you’ve terminated all items correctly and don’t have any hanging commas left over:

This case sent me particularly crazy as I was also dealing with an actual JSON request in the same general vicinity that I’d validated a bunch of times and seemed perfect.

Note to self: Before you go down the whitespace and text encoding rabbithole next time, make sure you’re actually checking the right JSON!

• SVG sprites are a beautiful thing. Make the canvas size work at a device ratio of 1, and capable user agents (read: mobile Safari) will do the hard work for you. Don’t create a double-resolution sprite, because you’ll need to manually re-declare all your sizing and positioning, which is no fun.
• Opera supports SVG but doesn’t bother to scale it. In most cases, this means a well-quantised PNG is going to be smaller.
• Opera’s device-pixel-ratios are actually expressed as ratios (x/y), as opposed to floats (1.5). I actually think this makes a lot of sense, though I’m pretty sure they’ve already lost this battle.
• Mozilla/Fennec doesn’t do ratios in a standard way, either — their syntax is “min–moz-device-pixel-ratio”. They obviously missed the part where browser prefixes are supposed to be, well, prefixed. This was done back in late 2010 and they looked at the –webkit implementation first, before implementing it in a very different fashion without much debate. It’s a mind-bogglingly undiscussed issue on Bugzilla and the wider Internet.
• Android DPI values for DevicesYouKnowAbout™ hover around the 1.5 mark. Anything lower than this and the device capabilities probably don’t make it worthwhile, and anything higher is probably an iPhone. Higher resolution Android devices just don’t seem to exist, or, for the most part, report themselves as existing (March 2012 — yeah, the Nexus and Galaxy S2 and stuff are big, but don’t seem to be documented as reporting high DPIs).
• Okay, so DPI values aren’t quite that simple. To quote A List Apart, “we don’t know what each device considers a pixel and this is a problem.” Read about it, test lots, buy Android devices if you want to be sure.

Miscellaneous gotchas:

• Certain Android variants — I don’t have enough devices to test conclusively — drop gradient backgrounds, opacity etc. (presumably for performance reasons) despite having “A grade” capabilities in a lot of other senses. Make sure you do simple things like having backgrounds and borders on elements that would have previously been divided by gradient contrast. Your featurephone visitors will also thank you. In an ideal world you’d probably progressively enhance these kind of things, rather than patching it up afterwards, but it’s easy to get caught up in the excitement of only needing to support “A Grade” browsers (accepting that IE is suitably banished from Mobile land) and just forget. Don’t forget.
• Beware HTML5 manifests — they raise storage prompts that could scare some users in some browsers (“why is this site storing info about me?). They’re also actually not that effective unless you pin an app to the home screen, so reconsider your need to use one.
• Fennec uses left/right swiping for accessing browser UI. This is a pretty dumb design decision, because it breaks left/right swiping gestures (think photo galleries). Expose an alternative UI (Next/Prev buttons perhaps?) for browsers that don’t do touch events in this way.
• Windows Phone 7. You’ve heard good things, right? Kinda. It’s definitely up there, but early versions of this device (2011) had a browser that was more or less equivalent to IE7 with a few IE8 features thrown in for good measure. I’m not bothering to support it. However, even the latest versions (March 2012) don’t support touch events (!) so expect it to be even worse than Fennec for conventional swipe-driven mobile UI in the browser. It does have Canvas support, but apparently lacks SVG in the browser.
• SVG gradient support is patchy (probably for similar reasons Android devices choose not to render CSS gradients)

Tips:

• Use text-rendering: optimizeLegibility; on headings as it does great things on the iPhone 4. (via Menacing Cloud)
• Flash ads work. This is staggering, but true. Expect that Android devices will successfully display Flash ads, and pay attention to different markup that gets adserved for these devices as it will possibly impact your CSS.
• Image based ads scale down quite well. It’s tricky getting mobile inventory smaller than 300px wide, but if you’re expecting 240px devices then just use max-width:100% for this. It’s better than breaking the layout or not serving ads to these screens, not that there are many of them left.

[Visit] Telescopic Text.

Click [[any of] the [first [three]]] words.

(My formatting will make sense when you start using it)

Instead, you need to add it by installing the “Android SDK Platform-tools” package via the Android SDK Manager.

Once you’ve done this, it will be available under {path to Android}/android-sdk/platform-tools/ instead of its old location under android-sdk/tools/

Simple!

The colours below are the palette generated with indexed transparency (left) vs. true alpha transparency (right) in a 256 colour 8 bit PNG by a lovely piece of software called Fireworks. Let me explain.

I’ve joined a new UI development team this past week that require pretty broad-based browser support for a bunch of sites (i.e. IE6 experience needs to not suck) and their process includes a PNG quantization step before hitting a live environment. This is cool, but the IE6 support necessitates not using alpha. Or so I’m told.

This prompted me to look up something that I discovered probably around a year ago but never got around to writing it up, nor particularly practicing!

I can’t remember where, exactly, though suspect Dave Shea might’ve had a pointer or an article that presumed knowledge of the technique. In the process of writing this article, I’ve also rediscovered a SitePoint article on the issue that’s quite helpful.

The bottom line is PNG-24 is great but impractical in older browsers for a host of reasons. While 8 bit PNG is not without its limitations (c’mon, 256 colours ought to be enough for anyone!), it’s clear that for graceful degradation and marginal improvements in file size it’s stil worth considering.

In terms of creating images there are a few challenges. First and foremost, everyone uses Photoshop but Photoshop sucks at save-for-web’ing 8 bit PNGs: you just don’t get the options you need. Fireworks hands you this in spades. I’m no Fireworks pro insofar as workflows and just getting designs done goes, so typically I’ll save for web to a 24bit PNG from Photoshop and then open that in Fireworks to export the alpha 8 bit image.

The Sitepoint article linked above suggests that [some] quantizers will give you the chance to do the same thing, but the issue is if you’re exporting an 8 bit PNG in the first place you’ve already lost the chance to create an image with alpha. Most front end devs will want to preview things like dithers, colour banding, etc., so handing control over to a CLI tool just isn’t going to fly. I’d contend that Fireworks is really the only viable solution in that it balances image optimisation and control. Of course, you’re welcome to run the PNG Fireworks outputs through a quantiser: it’s already 8 bit so your palette is locked in, and the quantiser is unlikely to mess with the alpha if it purports to support this.

The reasons are broader than just browser support: in my (limited) testing, PNG24 files could easily weigh in at twice the size of their RGBA 8 bit alternatives. On a 500x500px test that generated the paletts shown above, file sizes were as follows:

• 8 bit PNG indexed: 7KB
• 8 bit PNG transparency: 7.5KB
• 24 bit PNG: 15KB

I’m going to make sure I actually take advantage of this feature in the future, as there are clear filesize benefits to be had as well as support for crappy, dwindling browsers. Sorry, IE6.

The easiest way to resolve this is to take the file through Compressor first — ProRes 422 Progressive will be great. Frustrating, but whatever.

Think of this as an (il)logic puzzle. Want to renew? Go get a green slip. Got a greenslip? Go get another safety check. Want to just give us money and do the others out of order? Nope, sorry, you can’t do that.

N/A in the Safety Check column actually means “you’re covered for now, don’t sweat it” — but you wouldn’t know it from the form. There’s a vicious red X if you’re not covered, but nary a tick if you are. Also, what’s with the grotesquely antialiased “i” rollovers?

If you’ve registered a company in Australia, chances are you’ve already got a DUNS number. Surprising, huh?

Search for your business and a DUNS number will be available top left, just above the company name or ABN.

I discovered this while trying to register for Apple’s iOS Enterprise program, which requires a DUNS number as part of the application process. You can sign up for the developer program without one (and it’s cheaper), but to privately manage and distribute apps you need enterprise access.

As we prepare to launch our Equip Mobile program into schools, the ability to roll out software to all users in an organisation is something we need to be across!

When you suspend/sleep a computer, often when you resume MAMP has lost track of the MySQL instance it started and can no longer connect to it. Not sure if this is a problem with the MySQL build being used, but as the problem has existed since 2009, I don’t have high hopes for it being fixed anytime soon.

The quickest solution is to kill off the process it had started previously and then hit “Start Servers” again — it just takes one line on the terminal.

killall -9 mysqld

Be aware that this will kill all running MySQL processes (including those outside of MAMP’s control) — this is normally fine, as no-one actually hosts websites on OS X!

Instead, use their form to send the government the OPPOSITE message!

Here’s what I said (more or less editing their message to the reverse effect):

“I am writing to say that I WHOLEHEARTEDLY SUPPORT the Government’s plan to introduce a licence to punt.

Problem gambling is an area of concern for the community and needs to be addressed by government.

A licence to punt on the pokies MAY drive problem gamblers to other forms of gambling, including online — where possible, it is, of course, important that these too are regulated appropriately — through funding community level support for problem gamblers, as well as domestic regulation (not Internet filtering). The clubs and pubs will be impacted by this legislation, of course, but the net benefit to the community stands to be tremendous.

Gambling destroys many families and imposes significant pressures on the financial security and emotional stability of individuals: within reason, this trumps the “privacy, rights and the importance of local clubs and pubs” that ClubsAustralia and the AHA so desire you to consider.”

There are other ways to contact your MPs, of course, but there’s something deeply satisfying about using tools provided by some of the largest industry lobbying groups in the country against their own purposes.

If you’re on one of those special midget keyboards (a laptop?) that lacks useful buttons like Home and End, you’re probably looking for Shift + Fn + Left / Shift + Fn + Right.

There are a bunch of ways you can remap the key bindings, but in the interests of staying sane when working on others’ machines, it’s probably worth changing your muscle memory instead of your bindings here. It’s also worth noting that Vim users can use ^ / $ for beginning / end of line respectively.

If you’re setting up a new computer and have Authorized This Computer (Store -> Authorize This Computer) already, it seems weird that iTunes won’t let you just sync your apps from the device.

For whatever reason, you ALSO need to “Transfer Purchases from” the iPhone or iPod in question. Crazy huh? Nevertheless, it’s actually pretty straightforward.

The way it’s meant to happen!

As and when typically just means “right before you click on a link”, with the whole thing triggered by mouseovers. The first page Firefox loads when you start the browser is available here — http://www.mozilla.com/en-US/firefox/4.0/firstrun/ — can you see what’s wrong with it?

I love event-listenery JavaScript as much as the next guy, but the icon on Step 2 suggested I’d be going to another page (c’mon, that’s just what right angle quotation marks have been co-opted to mean on the web!) while the browser wouldn’t say where.

Before visiting any actual pages in Firefox, not much trusting it at this point, I did some quick Googling and discovered two things:

1. That you can bring back the status bar by simply typing ⌘ + / or Ctrl + /, and
2. That, not knowing this, people have created at least one browser extension to do exactly that.

Fail.

Of course, if I’d bothered to actually USE Firefox for 2 minutes–trusting it even though it wouldn’t tell me where links were pointing–I’d have discovered that ordinarily it does. Pie-faced, I retreated to blogging angrily about how Mozilla’s first run screen is a great HTML5 page but a horrible initial demo of the browser’s capabilities.

A few observations from this:

• Browsers need to tell you where you’re going next. Users don’t[/shouldn’t] trust the Internet enough to find out when they arrive.
• None of this would’ve happened had the team creating the landing page used progressive enhancement and unobtrusive JS technique.
• The team probably didn’t because they wanted to show off how well their amazing browser does fancy “HTML5” (in the Jobs-ian CSS/JS inclusive sense) stuff. Fine, but also link to a page that has the same content.
• Browser vendors are responsible for keeping user’s trust from the very start. This is a weird issue because it’s actually nothing to do with the browser’s functionality itself, but it temporarily impacted my opinion on how seriously Firefox take user choice/security/usability in a significant way.
• No-one actually uses Firefox anymore, so it doesn’t matter. It is a pain while using Firebug to test my own sites, though. ;-)

After spending a day and a bit last week hacking together a simple mailer (with merge capabilities) for Amazon’s Simple Email Service (it’s really pretty simple) it struck me that there must be a better way to do this. I toyed with launching a web app for others to use to simply accomplish the same thing, but figured someone, somewhere, must’ve already done something substantially similar.

Turns out they have. Perfect.

For us, SES was a great way to send once-off personal mail beyond the volume that our Apps for Domains accounts permit. The biggest downside was Amazon’s rate limiting — something that still applies for this app.

This app would’ve made the process a lot quicker, though I’m not sure of its value for regular list emailing — which seems to be how they’re marketing it. You’re not just paying to send emails with MailChimp/Campaign Monitor — you’re paying for deliverability and list management. AWS give you the deliverability side (at least, that was our experience) but do nothing to help you with unsubscribes, updates, and tracking.

That said, if I’d found this a week ago…

yiic webapp ..\testdrive

Unfortunately, for most users this will result in an error along the lines of “bash: ./yiic: Permission denied” unless you first make yiic executable.

The easiest way to do this is to run the following command in your framework directory:

chmod +x yiic

The x simply means “eXecutable”.