log

Hilarious: News.com.au classed as ‘adult website’ in audit of politicians’ internet use

Andrew — Sat, 04 Sep 2010 03:03:52 +0000

No comment; the article itself is more than enough.

Both news.com.au and smh.com.au were classified as adult sites in the audit.

“The definition of what has been classed as an adult site is something we’re reviewing,” [Legislative Council president Amanda Fazio] said.

A photo corkboard using jQuery

Andrew — Sat, 04 Sep 2010 03:58:56 +0000

Inspired by Vladimir Vukićević’s photos.svg demo, I tried building something similar using CSS/JS instead of SVG/JS. This first version of the photo corkboard is nowhere near parity with Vlad’s on a performance or intuitiveness scale. When I get some more time I’ll strip out the jQuery and look into using a resize/rotate handle similar to Vlad’s.

jQuery Article Expander plugin v1.0

Andrew — Sun, 29 Aug 2010 11:19:34 +0000

Earlier this week a friend and I discussed using JavaScript to collapse and expand news articles to reduce page loads, so I played with a snippet of code over the weekend and then turned it into a jQuery plugin. It was fun getting my hands dirty with jQuery again — I’d forgotten how concise and beautiful the code can be.

See the demos

Installing and basic usage

Download jQuery and save it into the folder containing your other website files.
Download jquery.articleexpander.1.0.zip and extract the JS & CSS files into the folder above.

Insert the following lines into the section of your HTML file:

Change the jquery.js reference in the code above to match your jquery file’s filename.

Write your news articles, blog posts or whatever to use this HTML structure:


    Article Heading 1
    
        The first line of your article content.
        The second line of your article content.
        The nth line of your article content.

See if it works :)

Changing options and using different HTML structures

Like most jQuery addons, this one lets you change options with a JS object passed to the plugin. For example, the code below customises the expand and collapse text while making the animation a little faster:

The full list of the options

expandText: The text shown in the ‘read more’ button when the article is collapsed.
collapseText: The text shown in the ‘read more’ button when the article is expanded.
headingSelector: The CSS selector used to find the heading element inside the article. The selector is relative to the article element.
contentSelector: The CSS selector used to find the content element inside the article. Note the selector is relative to the article element.
headingClickable: If true, the article heading can be clicked to trigger the expand/collapse.
contentClickable: If true, the article content can be clicked to trigger the expand/collapse. Note this will get in the way of copy/paste operations and possibly links.
speedInMilliseconds: The length of time the animation takes to execute. 1000 milliseconds = 1 second.
cursor: The mouse cursor shown when hovering over clickable headings and content.

A full config example

Licensing, feedback and modifications

jQAE is dual licensed under the MIT or GPL Version 2 licenses, like jQuery itself. This leaves your options for re-use pretty open.

Feedback and comments are welcome; patches and improvements even more so! Thanks for your interest.

Brittle

Andrew — Sat, 28 Aug 2010 08:39:15 +0000

From public-html-wg-announce:

Testing front: We approved 25 canvas tests. Work is still on going on the underlying test framework to make tests more automatic: we are now going to allow reftests (but our framework will run them manually). We’re running into a serious limitation of the W3C test server (test.w3.org): it cannot run PHP code. This is preventing us from hosting the XHR test suite at the moment and will affect the HTML test suite in the medium term. We’re looking for a solution.

Emphasis mine.

Australian Election Pokémon

Andrew — Thu, 26 Aug 2010 20:09:32 +0000

Absolutely hilarious. Two thumbs up.

Also see: doesaustraliahaveagovernmentyet.com

The new DevMo: when designers get near documentation websites

Andrew — Thu, 26 Aug 2010 10:11:08 +0000

Egads. Overwhelming much? This new frontend-heavy design for the Mozilla Developer Network sure is disorienting until you learn to ignore most of the front page and realise all the useful content is halfway down, beneath the fold. Because it’s important that you know it’s the last week to vote for your favorite Firefox Home iPhone Skin (!), an entire sidebar, almost a third of the screen wide, is dedicated to Twitter posts. Significant screen space is set aside for an enormous swiping advert for projects you already know about (being a web developer and all) or that would be better delivered near a link to their relevant category.

A huge red bar dominates the front page like an error box that won’t go away, and sadly contains only one useful link (“Here’s how to get started”). Even that could be filed away near the login/register panel at the top right, which also really needs some loving. This red bar turns into a different bar when you navigate away from the front page, but it still doesn’t contain anything of merit (twitter, feed and forum links should not be in a dedicated horizontal bar that results in the actual page content being shoved down by 85px).

I initially disregarded the entire ‘WEB MOBILE ADD-ONS APPLICATIONS’ strip across the top since it just looked like an ugly way to state what you’d find on the site. Only by accident (noticing the mouse cursor change as I moved nearby) did I discover they’re actually links; without the traditional underline (or button/tab-styling) chunks of randomly-coloured capitalised text do not signify a link.

Clicking the large ‘WEB’ link at the top takes you to a page with only four ‘popular’ web documentation categories, so finding stuff on, say, the DOM requires clicking the small, light blue ‘All web development documentation’ link underneath. At this point you actually transition from the shell of the new design to the sane, reasonably simple old MDN pages.

I filed a bunch of “I suggest” requests through a support system that’s also quite needlessly confusing and operates on ‘points’ as if it’s some kind of democratic social network; here’s hoping something comes of it. Maybe I’ll just deep bookmark into the site proper instead…

Amazing colour photos from 100 years ago

Andrew — Wed, 25 Aug 2010 01:39:04 +0000

Just an amazing photo link this time.

Last minute voting choices

Andrew — Fri, 20 Aug 2010 16:49:54 +0000

Not sure which party represents your personal policies? Have a look at this great post at The Progressive Reformist that breaks down each party/candidate’s policies in a readable fashion (and has links to each party’s site!).

Easy-to-read information on party preferences can be found on the ABC Elections site.

Afterwards, visit BelowTheLine.cc to build your personal Senate voting sheet before visiting the polling booth. Thanks for the awesome tool Cameron McCormack!

A semi-useful, half-done JavaScript 2D game engine (featuring Streets of Rage 2 characters)

Andrew — Sun, 08 Aug 2010 09:54:20 +0000

In mid-April this year I got interested in playing with the Canvas element in JS. Back in the dark ages I used Visual Basic 6 (!) to make a few simple 2D & 3D particle and game engines, and so those were the first things translated to JS. A simple point sphere demo and this basic particle engine were the result. Hilarity and/or horror will ensue if you look at the physics code btw.

I took that particle engine and started building objects to manage images and animation, drawing, sound, keybindings, input sequences, actors controlled by a programmable state machine, basic (read: incorrect) physics and boundary collision. The end result is the incomplete Streets of Rage demo.

What’s missing

There’s no collision between characters, so you can’t attack anything yet.
Loading information of any sort. This is easy to do, and I just haven’t gotten to it.
Additional plumbing to allow multiple players.

I haven’t really worked on this in a month or two (as usual, I got distracted by real life and work) but today I fixed some of the outstanding glitches and reviewed the todo comments throughout the code. There’s plenty more to do yet.

Technical overview of features

For programmers out there interested in the internals, here’s a quick breakdown on what each system does:

imageStore:

handles the dynamic loading and storing of image files, with the option of providing or generating coordinates for each independent image in sprite sheets and a callback for load complete;
dynamic creation and storage of flipped-axis versions (to avoid using horribly slow transforms during Canvas drawing);
a draw function that knows about individual sprites in an image and automatically samples the correct coordinates from the source image;
a parser for compressed info about graphic files and sprite sheet coordinates that can also generate the coordinates when given the width and height of each sprite in an image.

animStore:

handles animation sets based on the sprite frames from imageStore;
has basic animStart, animStop and getCurrentFrame functionality to make it easy for your game to know which frame to draw;
a parser for compressed animation info.

inputStore:

handles the collection of keyboard events such as keyup and keydown (real keydown, not affected by the keyboard repeat rate);
translates raw keyboard events into customisable game key-mapping;
matches key-map sequences such as “down, down-forward, forward, jab punch” to game actions like “jab fireball”. The sequences are customisable and very similar to Mugen’s ‘D,DF,F,x’ style, including charged attacks such as ‘~20D,U,ab’ (an EX Flash Kick). This is the system I’m most proud of;
a parser for compressed input sequence data (again, quite similar to Mugen’s).

actorStore:

handles the creation of game actors (characters, agents, whatever you call them);
creates instances of actors with physics properties, animations, audio, state machine info etc unique to each instance;
a programmable state machine to affect a character’s state based on input, physics, current state and state timing, animation etc;
state machine can switch to new character states, animations, sounds, affect physics etc
a convenience function for building a draw queue list (see below) for every actor instance.

physicsStore:

stores basic physics information for each actor or particle such as position, velocity, mass, elastic restitution etc;
restricts actors to a customisable 3D boundary box
contains the most broken gravity and drag calculations you’ll ever see;
No actor/particle collision yet.

audioStore:

handles the loading and storing of audio files (very similar to imageStore);
detects browser support for the element and provides the browser with the appropriate file;
contains workarounds for popular browser bugs.

drawQueue:

handles the drawing queue for the game, so that other functions can just pass a list of sprites to draw;
drawQueue will sort everything by z order before running an optimised draw loop;
the result from actorStore’s getInstanceDrawList() can be passed directly to drawQueue.

In the Streets of Rage demo, all the above systems are stored in xlib4.js, and the game-specific parts (such as sprite and animation lists, audio and input settings, etc) are stored in xsor4.js. There’s still a huge amount of work to do, but there’s a pretty clean divide between system and game logic.

The source code is licensed pretty liberally, and feedback, comments and patches (!) are welcome. Check the license at the top of the files before using or sampling from the code though, just to be safe.

An increase in State-funded school chaplains

Andrew — Sun, 08 Aug 2010 02:39:31 +0000

We may have an atheist leader but she sure doesn’t shy away from buying votes from the religious wing. I would much prefer any state-funded programs to be establishing rational thought in schools, not the opposite.

The Department of Unpronounceable Acronyms provides a FAQ on the program including this interesting answer about school chaplain faith, although I find the answer on why the government funds this program more telling. There’s no real rationale apart from “Chaplains play[ing] a significant role in… supporting the wellbeing, values and spirituality of young people”; a highly debatable statement at best. Nothing a dedicated youth worker or counsellor couldn’t do, probably with a lot more frankness and pragmatism.

During my high-school years I have fond memories of avoiding the weekly religion class through any means necessary. Even at 13 I understood the absurdity of those classes being explicitly opt-out instead of opt-in; consider the parents and carers who don’t think about religion and thus aren’t likely to know their child is being delivered a dose of Arbitrary Belief System™ each week. From my perspective it’s an ill-fitting cog in a rational, supposedly-secular education system, and I’ve no interest in maintaining what church leaders consider the ‘special religious education system’. Eek.