I’ve got my doubts about SSI, but we have literally thousands of templates that require it for includes. It also functions in subtly different ways to PHP, and we’re not about to embark on any bulk conversions of our front-end templates into haml, jade, or whatever else is in vogue – the legacy cost is to great.

Apologia out of the way, we are using Mountain Lion’s in-built Apache 2.2 server after a trigger-happy rm –rf on my part killed a painstakingly crafted homebrew version implemented by a colleague.

Config locations

If you are using the in-built server, you are using virtual hosts.

This simple truth is not well documented online, so if you are spending time in /etc/apache2/httpd.conf you will not succeed. The default port 80 (non-SSL) vhost file is at /Library/Server/Web/Config/apache2/sites/0000_any_80_.conf.

Enabling SSI parsing

There’s ample info online about enabling mod_include, but what isn’t mentioned is that you need a handler specified in the virtualhost config.

AddHandler server-parsed .html is all it takes, but this won’t necessarily have effect within your directive unless you tell it to.

An age old tale of computers doing exactly what you tell them. And a wasted Friday afternoon!

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)

Commercial use? No. Open source modification? No. Redistribution? Nope.

This is really annoying, but thankfully there’s another option. For your bookmarking pleasure, enter https://github.com/joahua/AusPostcode. It’s a CC-BY licensed version of suburb/postcode data in both CSV and JSON formats (feel free to fork and submit a pull request if you’ve got others) based on Australian census data that’s much more permissively licensed.

Happy free/open-source postcoding!

All in all, it’s pretty depressing for us — but we’re on 2.5–3 year old hardware in some cases so the next generation won’t have the same issues. In fact, today’s mobile devices would probably demolish the desktops of yesteryear.

From: Sam
Sent: Thursday, 10 November 2011 9:02 AM
To: Web Developers Frontend-DL
Subject: Three.js — 3D Animation in jQuery

The Web GL examples may not work if you have an older computer. I tried them at home – pretty cool.
http://mrdoob.github.com/three.js/

This one is particularly cool
http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html

Sam

From: Fiona
Sent: Thursday, 10 November 2011 9:09 AM
To: Sam; Web Developers Frontend-DL
Subject: RE: Three.js — 3D Animation in jQuery

:(

From: Josh Street
Sent: Thursday, 10 November 2011 9:14 AM
To: Fiona; Sam; Web Developers Frontend-DL
Subject: RE: Three.js — 3D Animation in jQuery

Doh.

From: Sam
Sent: Thursday, 10 November 2011 9:18 AM
To: Web Developers Frontend-DL; Anton; Darian
Subject: Three.js — 3D Animation in jQuery

Safe to assume it’s not ready to go mainstream just yet.

Imagine IE6 trying to deal with it…

IE6 is probably not relevant anymore, but the real issue is IE7-9. On the basis of something that’s mostly software related — whether at a level of browser support for different graphics cards, or a user’s access to a particular browser at all — we’re inhibited from deploying particularly cool/useful technologies.

This is an old story. Users take too long to upgrade.

The difference here is that, post Windows XP, upgrades aren’t being held back by hardware or platform anymore. Performance has plateaued across desktops as integrated graphics are “good enough” for many applications (see system-on-a-chip mobile solutions where CPU and GPU are tightly — and beneficially– integrated) and discrete graphics are blazingly quick.

I was surprised to discover that the much-hyped Skyrim would purportedly run at high detail on my 18-24ish month old desktop. Caveat — I’m a bit of a hardware geek and probably over-specced (in terms of gaming) when it was built, but it cost under $1000 once you exclude all the hard drives (video editing box… before I switched to OS X). It’s still (apparently) getting incredible performance by today’s standards. This doesn’t speak to a lack of innovation — though it probably says something about the self-cannibalising properties of that industry.

“Oops, my PC is too fast” probably remains an uncommon complaint. Still, I’d contend that for many users, perceived speed will become less of an issue over the next upgrade cycle. Form factor (Macbook Air), low latency (SSDs) and portability (tablets) are the key competitive fronts today and will continue to be. For web technology, this means that we can innovate with confidence where performance is concerned.

The blocker is software.

For now, the trend appears to be targetting applications at particular select user agents to the exclusion of others. WebGL is a great example of this insofar as it doesn’t have a neat fallback option as tools like Raphaël do with VML. Fundamentally, this may be no different to nested video embedding that differs on the basis of browser capabilities. In practice, few will seek to implement equivalent functionality or design 2D experiences to match rich WebGL ones — it’s just too complex.

The real winner in all this is mobile, which has a reasonably broad support for hardware accelerated web experiences.

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.