Code

How Lowe Can You Go

Meme generator to create mock billboards

CanvasVue 3RemixActivism

I started this project with my friend Mix Irving, out of frustration at the way that the real estate agency & property management firm Lowe&Co have been flooding our city with billboards. Lowe&Co's billboards are often 'edgy', gloating about their success, while Wellington suffers in a housing crisis that's forcing many to move away, others to live in unhealthy, unaffordable rentals, and others to live under the life-long shadow of an unsustainable mortgage.
This tool allows people to take control of the narrative, to edit Lowe&Co's billboards to more accurately reflect the current housing crisis, and the role of estate agents, landlords and property managers in that crisis, then share their creations online (using the native Web Share API,Clipboard API, or downloading, depending on their device).
As it turns out, many others share our frustrations!

Radio New Zealand: Spoof Wellington real estate billboard pictures flood internet

Convert Anime.js Animations to CSS

Write with the flexibility of Javascript, publish with the performance & portability of CSS

TypeScriptAnime.jsCSSWeb Animation

Writing web animations with the help of Anime.js feels very natural. You make a timeline, and tell your story:

first: the triangle rotates to point towards the circle
then:  the triangle anticipates an action, compressing and vibrating
then:  the circle squishes down, ready to jump
then:  the triangle charges!
then:  the circle jumps out of the way!
then:  the triangle slumps to a stop.
then:  the circle bounces to a safe landing.

Of course, this isn't exactly what an anime timeline looks like, but the key is that you can tell the interdependent story of the triangle and the circle together, as one chronological timeline.

When it comes to publishing your animation though, you can't use Javascript everywhere, e.g. on a Squarespace site, or in a README on Github. There are security restrictions, and it's all a bit more complex than the usual approach (just whacking a GIF in).

However, if you have a looping SVG , animated with CSS , it gives you the crispness and lightness of web animation, in an image file which can be added to a site just as readily as one of those big clunky old GIFs.

It's just a pity that writing CSS animation is such a drag: you need to write one animation for the triangle, and separate animation for the circle, and try to keep everything synched up:

10%: the triangle rotates to point towards the circle.
30%: the triangle anticipates an action, compressing and vibrating.
50%: the triangle charges!
80%: the triangle slumps to a stop.

35%: the circle squishes down, ready to jump
55%: the circle jumps out of the way!
85%: the circle bounces to a safe landing.

If you need to make changes (you always need to make changes) then everything else in the animation gets messed up. I've written complex CSS animations before, and it's a horrible experience!
So this script enables writing animations with anime.js, but publishing as either anime or CSS.

CC Buttons

adapt SVG designs for your local CC chapter

JavascriptVue.jsSVG.jsRemix

This was a fun tool quickly pulled together for the 2019 Creative Commons Summit - the Dutch Creative Commons chapter had been preparing stickers and badges with the CC heart logo combined with a Dutch flag. The idea was to make their local chapter members identifiable and to swap swag with friends from other chapters. I thought it would be fun for other chapters to be able to adapt their idea to their own country's flag.

Video to SVG

convert videos to lo-fi animated SVGs

PythonFFmpegCSSSVG Animation

This script converts a video to a image sequence at a low framerate, then converts each frame to a vector image of basic shapes.
Each of these vector frames are added to an SVG file in a vertical 'filmstrip', which is then pulled down through the viewBox using a frame-by-frame CSS animation.
I have no idea if there is a practical use-case for this, but it makes teeny tiny files which can still be somewhat discernable, and I think the result looks cool.

People Against Prisons Aotearoa

Contributing to F/LOSS and prison abolition

CSSHAML DesignAccessibility

Incrementally improving the design of an existing project

People Against Prisons Aotearoa (PAPA) has created custom F/L OSS tools for giving members an overview of the organisation, for coordinating advocacy work, and for communicating with prisoners, enabling the organisation to be really effective and spend their energy where it counts. I've done a small amount of work in PAPA's Design and Tech working groups on improving visual design, usability and accessibility, and doing odd media-related jobs (like fixing flickering videos using Python + FFmpeg).