Recent posts

What about Scottish independence?

Published

I've created a short booklet and a series of A5 flyers explaining why people in Scotland should vote 'Yes' in the upcoming independence referendum.

You can download the booklet and flyers at yes.ocodia.com.

okaidia prism.js theme

Published

In case you haven't heard, Lea Verou has just released an awesome syntax highlighter called Prism.

While there are quite a few highlighters already on the web, this one is particularly nice because it seems easily extensible, supports web workers, uses the HTML5 language-xxxx class (as recommended by the W3C) and doesn't force you to use any Prism specific markup (not even a class name).

The only jibe I have with it is it doesn't have a theme similar to the one I use in my favourite text editor (Sublime Text 2), so I've fixed that by making one.

It's loosely based on the Monokai theme (which was originally made for TextMate I think), which has since been ported to Sublime Text (sorry, I can't remember by whom). It's not exactly the same, but it's good enough for me, so here it is, I call it okaidia.

Here's what it looks like with HTML:


<!DOCTYPE html>
<html lang="en">
<head>

<script>
    // Just a lil’ script to show off that inline JS gets highlighted
    window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="prism.css" data-noprefix />
<script src="prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="http://www.google-analytics.com/ga.js" async></script>
</head>
<body>

Javascript:



if (Prism.languages.markup) {
    Prism.languages.insertBefore('markup', 'tag', {
        'script': {
            pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/ig,
            inside: {
                'tag': {
                    pattern: /(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/ig,
                    inside: Prism.languages.markup.tag.inside
                },
                rest: Prism.languages.javascript
            }
        }
    });
}

And CSS:


body {
    font: 100%/1.5 Questrial, sans-serif;
    tab-size: 4;
    hyphens: auto;
}

Obviously it's on Github for forking/tweaking etc. Enjoy!

The Graphalo

Published

I've been tinkering around with the HTML5 canvas element recently and it's been pretty good fun. To further my understanding of both it and javascript, I've decided to start a little graphing library, which I couldn't resist called 'The Graphalo' (or just Graphalo, if you prefer).

At the moment it only has 2 graph types, the first of which is something called a sparkline. A sparkline is a very small line chart, like this: which is typically drawn without axes or coordinates and can sit inline with text content, to illustrate something like the stock market or some other trend.

This is all the markup needed to create a sparkline:

<span class="graphme" data-graph-values="75,23,12,..."></span>

Note that Graphalo will attempt to graph anything with a graphme class.

The second graph type I call a 'percentage pie'. It accepts 1 value (a percentage between 0 - 100) and looks like this:

Note the graphs accept custom graph colours and can be any size you like.

The markup for the graphs is nice and simple, it's basically the same as before, but with a data-graph-type attribute specifying that you want a 'percpie' and a few other optional attributes for size: data-graph-size (automatically 100px x 100px) & colour: data-graph-color (HEX values).

Like so:

<span class="graphme" data-graph-values="75" data-graph-type="percpie" data-graph-color="#3366CC"></span>

I know there are probably hundreds of similar libraries, but this has been a nice little learning experience so far. Obviously the library is far from finished (I only started it a couple of days ago), but the code is available on GitHub for those who are interested in playing around with it.

Check My Links v3.0

Published

I've recently published a new version of my most popular little Chrome extension, Check My Links.

I've had a few people mention that the extension checks (and therefore clicks) links on their pages that they don't necessarily want to be clicked (such as advertisements or 'logout' buttons etc).

So, version 3.0 allows you to manually add any URLs to the extension's exception list. Any URL added to this list, will be skipped during the checking process. To add to the exception list, please see the options page for the extension.

If anyone has any other feedback or feature requests, please feel free to ping me on Twitter. The source code for the extension is also available on GitHub