Blog
Oxygen Kiosk at Unconvention Brisbane
Over the weekend, Oxygen Kiosk was involved in Unconvention Brisbane, a “not for profit grassroots led music conference for DIY and Independent promoters, labels, entrepreneurs, writers, technologists, innovators and artists.”
I setup a webcast for both days of conference panels, played an audiovisual set as half of Cowper, spoke on the Music as Product panel (which has already been released on Youtube – Part 1, Part 2), VJ’d and mixed live visuals for the Unconvention Showcase, and then backed it all up by running the Unconvention After Party at The JOYnt, featuring Cowper, Tash Parker and Tim Jackman.
Then I slept for 12 hours. Read more
We’re Hiring! Junior Web Ninja
We’re looking for a junior web developer/silent killer to work remotely or from our Sydney office. Official transmission follows:
Oxygen Kiosk, the sleek web boutique in Sydney and Brisbane is looking for a junior web developer for a 6-month contract (with a view to executing a permanent position).
We’re geekily obsessive about code and hype-free solutions. We’re small and agile, love the web, and love making it a better place with handcrafted websites.
If you’d like to join us, you should have Ninja-level skills* in at least 2 of the following:
Hand-coded HTML, CSS, Javascript, PHP, Front end web design.
… and pirate-level abilities in as many as possible of:
Textpattern, MODx, WordPress (WPMU, Buddypress), Shopify, Gallery2, Linux/Apache server admin.
*For the purposes of this document, it is presumed that Ninjas are considerably more skillful than Pirates.
The successful ninja will be driven, well organized, able to work independently, and have ridiculously high attention to detail while still remaining stealthy and ruthless. There’s scope to be based in our Sydney dojo, or work remotely.
Please apply with a portfolio of killer projects.
Ads For Your Blog: Simple Code for Calling OpenX’s Single Page Call Within WordPress Using current_post
Advertising is one of those “necessary evils” of the web, and of non-ecommerce blogs in particular. For blogs which aren’t associated with a particular product or revenue-generating business, advertising is the main way to pay the bills. It’s not something which generally enhances a site, but we try our hardest to ensure that it’s not actively detracting from the important bits of a site.
One thing which can seriously detract is the increased load time when a site is filled with ads. This not only comes from the actual images and other assets which are loaded for each ad block, but often those blocks are generated by chunks of javascript, which can add rather a large amount of code to the HTML page, even before any imagery is loaded.
Most blogs start out with Google’s Adsense, and then eventually graduate to Ad Manager if there’s enough advertiser interest that they can start selling their inventory directly. However, Google does have some vast shortcomings, so when your sites get big enough, you start looking around for ad-serving alternatives, and inevitably come upon OpenX.
The Standard Way of Calling Ads
We’re about to launch a redesign for a fantastic australian blog (more on that soon), who have a sizable roster of advertisers. They can have over 20 ad blocks of various sizes on some of their pages, so using “traditional” OpenX ad calls was not only time-consuming to add to the site, but it was adding a huge amount of HTML weight. Here’s what the “standard” OpenX ad block code looks like:
<!--/* OpenX Javascript Tag v2.8.1 */-->
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://example.com/www/delivery/ajs.php':'http://example.com/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=11");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://example.com/www/delivery/ck.php?n=a86ff4c4&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://example.com/www/delivery/avw.php?zoneid=11&cb=INSERT_RANDOM_NUMBER_HERE&n=a86ff4c4' border='0' alt='' /></a></noscript>
It’s a bit messy, but not so bad by itself. However, when you’ve got 8 of these blocks all together, and another dozen spread across the rest of the page, it gets rather hefty. The front page of the site in question, without ads, weighs in at a bit over 600 lines of HTML. Dropping in 20 ad blocks brings it up to just under 1000 lines.
As I said. Hefty.
Read more
Spammers, Evildoers, and Opportunists, or: Why Oxygen Kiosk doesn’t offer “SEO” Services
I had a chat with a new client the other day about why we don’t consider “Search Engine Optimization” an optional extra, or even a service that we offer.
This morning there was a great string of posts on Merlin Mann‘s twitter:
If you’re “insulted” by criticism of SEO, go write a novel or work at a food bank. With all respect, find a job worth fake-defending. [link]
Shorter: “SEO” is either 1. Common Sense (clean code, good urls & titles); or 2. Cheating (most everything else). Learn “1″; Exorcise “2″. [link]
Once worked at an SEO-optimized bar. Sign said we were an emergency room but our house special was 1 oz. of urine and 9 ads for other bars. [link]
These led me back to this post by Derek Powazek (@fraying on Twitter), which sums up the issues we have with the SEO industry, (and then continues to deride SEO people generally, which is fine too, they don’t do much which makes me feel like defending them from derision.)
Read more
Open Migration: Rescuing Content and Images from Squarespace
We’re currently helping our clients at Dubspot migrate their blog from Squarespace to a new system which will be built around a multi-user setup of WordPress.
Squarespace’s propaganda goes on about “Total Data Portability”, and how “your data is yours to keep”. However, when it comes to moving to another system, there’s no automated method to get your images and other files out. You can use a “data export” to create a Movable Type formatted export of your posts (which will import fine to most blogging engines), leaving your images in their proprietary file system, to which you only have web access, and no functionality to create an archive for downloading.
I asked Squarespace support if there was any other way to get our images out, and their response was “Currently there is no feature for this — each file will need to be downloaded individually from File Storage, sorry about this.”
I asked if we could get a Squarespace dev to compress the directory so we could download it, and got various permutations of “that feature doesn’t exist, but I can suggest it as a future feature” from 3 different Squarespace support people:
Fortunately, while all this frustration was going on, I figured out a sneaky little system to allow me to download all of the images directly from their web interface. It uses Firefox and the DownThemAll extension.
Read more
Handy CSS Test Cases
Over at oksushi.com I’ve linked to a number of handy little CSS test cases that I’ve been creating in my IRC time on #css.
I hope they help someone, somewhere, with a CSS problem.
WordPress Post Image Resources
We’re doing some advanced WordPress templating and hacking for the new version of the awesome The Motor Report blog, and trying to do some cool things with images from posts. Rather than requiring authors to manually define “feature” images, we’d like wordpress to automatically generate various thumbnails for search results, feature post scrollers etc.
So hence, some interesting/useful resources on the subject:
Get Images Attached to a Post: Requires functions.php hacking, gets attachments from the database, rather than through brute force search of the post content.
Get the first image from the wordpress post and display it: Requires some functions.php hacking, searches the actual post text, and has the advantage of getting the first actual image in the post, rather than the first image uploaded and associated with the post.
Simple Image Grabber WordPress Plugin:
Also interesting: Related Posts with Thumbs plugin.
Magento Ecommerce
Hi everyone – I have written a post outlining the various costs we were faced with developing a large site with Magento Ecommerce over at my site.
Hopefully, some of you will learn from my mistakes!
WordPress Developer-Friendly Plugins List
We spend quite a bit of time with the awesome open source Content Management System WordPress. A huge amount of WordPress’ power comes from the vast range of plugins available. On the flip side: As a developer trying to create a website with fast, clean, valid code, plugins can cause problems by injecting styles into their HTML output or into the head of the template. We’ve also had issues with plugins loading their own versions of common JavaScript libraries, ending up with redundant and possibly conflicting JS loads.
It’s understandable that this can happen. Plugins are generally designed to allow functionality without any template editing, and automatically including CSS and JS means that your plugin can look “right” to most users. However, we believe that plugins which include this kind of code should have “Developer Friendly” options, which allow you to turn off these includes and keep full control over how your site is styled.
A specific example: The PXS Mail Form plugin is a simple, light WP plugin which looks for code and replaces it with, yes, an email form. It’s getting rather old (last update was 2005), and there are mail form plugins with greater functionality, but PXS wins over the newer, flashier ones because of this simple feature:
It allows you to turn this extra CSS off.
Of course, a developer who’s smart enough to know they don’t want multiple lightbox.js versions embedded in their template or style declarations in their content is probably smart enough to also know how to hack it out of the plugin responsible, and we’ve done so on many occasions. This causes problems for upgrading though, we have to document these changes and remember to re-apply them whenever the plugin is upgraded, which makes more work for us, and more expense for our clients.
So, whenever we can, we try to use plugins which either don’t do these “unfriendly” things, or give us the option to disable them. So this is a list of plugins we’ve discovered which are Developer Friendly:
Cal’s Queensland Government design launches
Last year I worked full time for the Queensland Government, as part of the Smart Service Queensland team, where I was contracted to redevelop the main Queensland Government website qld.gov.au. Initially contracted for a short three month stint, this quickly blew out to a six month, then a nine month contract, as the site was a mess.
Going back to #webkitnightly as Safari has decided to crash when opening web inspector. I wonder if this will work… 2010-10-07
