JavaScript shithead game

I’d started work on this some time ago, but hadn’t gotten around to fixing a couple of bugs. I finally did today!

It’s the variant that I used to play a lot when I younger (and still do occasionally) so follows those rules, but I’ve tried to build it in a way that it should be possible to modify the game to meet your rules. I quite like the Deck and Card object prototypes and I’m hoping to re-use them in another card game I’m toying with making a clone of.

I’m quite happy with the card styling too, I like the effect of the card stack and, despite the bug when you hover over the right-hand edge of the last card in a hand, I’m happy with how it functions!

You can check it out here, and the source code is on github for your forking pleasure!

Flow Free JavaScript clone

I’ve been playing a lot of Flow Free on my phone and tablet. Probably far too much, but I really enjoy it.

The aim of the game is to link each of the dots together with their counterparts via a drawn line, but you also need to ensure the whole box is filled with the lines. This means that on some levels there are multiple solutions, or that the solution you need is not obvious!

I was interested in how easy it would be to re-make the game in web technologies, so I took the opportunity to learn about CSS variables and experimented with very minimal HTML.

The result is available to experiment with on Codepen and the source is also available on github.

Running CSS animations when the element is shown

Not a unique idea at all, many existing libraries out there, but I wanted a very basic jQuery plugin that I controlled entirely with CSS animations and classes being applied when the user scrolled to (or past) the element, along with a few key features: chaining animations to run in sequence, customisable delays and customisable visibility offsets.

Some code snippets from the example page. The get started, all you need to add to your page is:

<script src=""></script>
<script src="jquery.animateOnShow.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="animations.css" media="screen" charset="utf-8">

then you can add the following classes to your page and the animations will work when the user scrolls to them:

<p class="animate-on-show fade-in">This text will fade in!</p>
<p class="animate-on-show slide-in-from-below fade-in">You can add multiple animations if wanted...</p>

<p class="animate-on-show fade-in" data-animate-chain="sequential-example">This will fade in first</p>
<p class="animate-on-show fade-in" data-animate-chain="sequential-example" data-animate-delay="500">Then this, 500ms later</p>
<p class="animate-on-show fade-in" data-animate-chain="sequential-example" data-animate-delay="1000">Then finally this after 1000ms!</p>

All delays are relative to the first element shown with a data-animate-chain attribute, so when this first element is shown, the timeouts are set up for all other elements with the same data-animate-chain attributes.

The CSS is pretty straightforward and some basic example animations are defined in animations.css

.animate-on-show { transition: all 1s ease-in-out; }
.animate-on-show.fade-in { opacity: 0; }
.animate-on-show.fade-in.animated { opacity: 1; }

The simplified example above controls the basis for the plugin, first all elements with an animate-on-show class are set up with a 1s animation. Then the child classes, in this case fade-in are defined with an initial state, and how it should end once the animation is applied (.animated). The plugin essentially just applies the animated class to each element that is deemed visible and CSS does the rest. The additional chaining happens at the same time along with accounting for delays.

There are some global settings you can define, including vertical adjustments for some classes. For example slide-in-from-below:

.animate-on-show.slide-in-from-below { transform: translate(0, 400px); }
.animate-on-show.slide-in-from-below.animated { transform: translate(0, 0); }

is configured with an initial state of 400px below the target end location, this means we have to adjust our offset by 400. The $.AnimateOnShow.settings.custom object handles this:

    $.AnimateOnShow = {
        settings: {
            custom: {
                // these can be used to adjust positioning, like with the example
                // slide-in-from-below, the calculation needs to take the initial
                // translate into consideration and so we add the 400 which is
                // missing due to the initial state.
                'slide-in-from-below': 400,
                'slide-in-from-above': -400

If you’re adding in other animations that adjust the vertical position, be sure to add these to your version of the plugin or change in your page’s script via $.AnimateOnShow.settings.custom['your-classname-here'] = <adjustment>.

Hope this saves someone some time if they want to do something similar!

I’ve made it a fairly customisable package although it does currently rely on jQuery as the site for which this was originally developed already had it.

There’s a demo page that includes download links and you are free to use this code however you see fit!

Bookmarklet: Reload CSS files without reloading the page

Working on styling the contents of popup windows can be frustrating and laborious. But not if you can just reload the CSS…

This bookmarklet will reload all the associated stylesheets in the current document. It looks for all <link/> elements with rel="stylesheet", removes from the DOM and re-adds them appending a ?_=1234567890 (or &_ depending on the URL, where the numbers represent the JS timestamp) into the <head/>.

Hopefully this will help someone suffering similar pain to myself!

Reload CSS (Add the link to the left to your bookmarks to use!)

Please note: I haven’t tested this in IE, but surely it’ll work… Right?

Continue reading “Bookmarklet: Reload CSS files without reloading the page”

TextMate: Minify CSS Regular Expression

I love TextMate. It’s saved me so much time since I’ve started using, I think I’d find it impossible to use another editor. However, the format CSS compressed snippet, doesn’t quite do what I’d expect.

Luckily the Find and Replace regular expression engine is pretty cool!

I’ve got this small (!) regular expression that should minify your CSS, by putting:


in the Find box and:


in the replace box, and by ensuring that Regular expression is ticked, you should be able to minify CSS with the Replace All button!

TextMate Find and Replace: Minify CSS

Note: I haven’t test this particularly extensively, or with the IE expression(). This may produce undesired results! It certainly seems to be fine on all the standard CSS I’ve tested it with.

Minify CSS – Shrink your CSS down to size

I know there are probably many services offering it already out there, and it’s not too hard to run right in TextMate, but I haven’t been able to find it in 30 seconds of Googling (well, I couldn’t at work, but I’ve since found this… Oh well!), so I set up a quick script to do it for me:

If it’s useful, I might set up a memorable URL, let me know in the comments 🙂

I did set up syntax highlighting, using codemirror, which looked pretty nice, but made the minification (on large-ish files) take far too long. I haven’t really tested on any huge files, so try this at your own risk, but it seems faster that TextMate was.

Parallax 0.1 – Simple parallax effect for jQuery

I’ve seen some very cool parallax effect around lately, especially liking the Silverback site. But none of them are particularly interactive, so I thought I’d make a small implementation of the Parallax effect that interacts with the mouse.

Very early stages (and I haven’t tested it on IE yet… but you could just you conditional comments to exclude ‘those’ people anyway…) but it seems to be working ok. The options aren’t really simple, but they should be fairly self-explanatory…

Check out the demo (it is a very poor demo, please don’t look at the images, imagine it with a lovely hand drawn vector!) and get it here (minified).

Update: Created a quick demo of the silverback homepage with interactive parallax.

Update 2: Tested on IE8, seems to work fine!

Update 3: I have modified the script slightly, you can view the post here.

JSS – Nested CSS using Javascript

Update: I have worked on a newer version with more features and a PHP conversion, here.

Ever wanted nested stylesheets?

I have!

Now you can have them! If you code your stylesheets as JSON and parse them using JSS 0.1. You could have the following:

        'html': {
          'body': {
            background: '#fff',

            'div#header': {
              height: '100px',
              background: '#00f'

            'div#footer': {
              height: '40px',

              'span#copyright': {
                color: '#0f0'
              'span#testing': {
                color: 'black',
                background: '#eeccff'
          width: '800px'

Turned into:

      html {
        width: 800px;

      html body {
        background: #fff;

      html body div#header {
        height: 100px;
        background: #00f;

      html body div#footer {
        height: 40px;

      html body div#footer span#copyright {
        color: #0f0;

      html body div#footer span#testing {
        color: black;
        background: #eeccff;

You can get it here or view the test page here.

jQuery – Automatic Image Captions

Lots of RTEs allow you to add images and float them, but not many allow for simple captions to be wrapped around the images…

This script in conjunction with jQuery allows just that… Very simple and fairly unobtrusive.

If you wanted to add captions to all images (from their longdesc, title or alt attributes) within <div class=”content”/> you could do:


Which produces something like this:

jQuery Add Captions - Screenshot (Like this!)
jQuery Add Captions - Screenshot (Like this!)

No styling is carried out by the script itself, so you’ll have to add in some extra classes, but in the zip file should be everything you need to get started (including jQuery 1.3.2 minified).


Edit: Added to the work blog too.

Update: I have updated the script, see this post.