We're growing into something new. Read More

Simon Madine  Pro

Blog design

I've just redesigned my site yet again and thought I'd ask for some feedback. I really should have gotten some opinions before finishing and putting it live but better later than whatever. Seeing as I've got quite a specific readership (fellow web devs and my Mum), I figured I could get away with trying out a bunch of the shinier aspects of CSS3 - multiple background images, border-image, linear-gradients, etc.


Computer generated hipster art.

Weekend project to squish together a bunch of different web technologies to create pseudo art. Ironically, of course. Uses Google Fonts, YQL, Instagram, jQuery, Twitter widget.js and a bit of custom JS cannibalised from an old JS1K. Click to generate a new one if you like your ironic art on demand otherwise, it'll update every 15 secs. The tweet button will link directly to the combination of image and statement if you want to share. If it's put full screen, the tweet button disappears so it can be used as a screensaver. Yeah, it's dumb but it only took 10 minutes on Friday night and 20 yesterday afternoon.

    	COUNT(owners_per_item) AS distribution 
    	FROM (
    			COUNT(item_id) AS owners_per_item 
    		GROUP BY 
    	) AS sub 
    	GROUP BY 

SQL to find out distribution of Many-Many pairings

I run a book reading/tracking site and wanted to know the popularity of each book based on its distribution amongst users (basically, how many users own each book). I've made the SQL a bit more generic so you can reuse it to measure distribution of any Many-Many relationship We have an item (book) which has a Many-Many relationship with an owner (user) which is stored in a mapping table (books_users). We don't just want to know the number of owners each item has (how many shelves you can find each book on), but what how many items have only one owner, how many have two owners and so on. The subquery here: SELECT item_id, COUNT(item_id) AS owners_per_item FROM items_owners GROUP BY item_id Raw Code » will return a list of [item_id, number of owners that item has] which we can then feed into the main query above. This will output something like: 1|100 2|75 3|10 4|2 5|1


8-Bit + Alpha PNGs

After reading this article a few days ago, I realised that not everyone who wants 8-bit + alpha PNGs has Fireworks (or wants to launch Fireworks just to re-save an image), myself included. There were plenty of instructions online about how to install server-side components or tweak GD or ImageMagick to do it but that all seemed like hard work. A quick bit of googling and copy-pasting later and this is the outcome. A shiny web service you can drag 24-bit + alpha PNGs into and get 8-bit + alpha PNGs out of. If you need the service, this'll be very handy, if you don't, this'll be quite pointless. There's not much middle ground. The code's available on github if anyone wants to have a look at it or improve it.


Scoped Style Blocks

I wrote this a few weeks back but haven't posted it because I wasn't sure if anyone else might actually find it useful. It's a polyfill that enables the new (HTML 5) 'scoped' attribute on style blocks. Style blocks are only valid in the HEAD of an HTML document unless they are marked as scoped. If a block is scoped, any styles defined in it should only affect its parent and its parent's children, not the entire page. Unfortunately, this isn't backwards compatible as any styles defined within a page are applied to the whole page by default. This jQuery plugin parses the page and modifies things so that scoped attributes are respected. It works by stepping through each block, figuring out which scopes it should apply to (you can also have multiple styles affecting the same scope) then emptying out every non-global style block. It then steps through the page again, re-enabling the right combination of blocks, measuring the styles of each element and reapplying them directly onto the element. W3C spec on the style element: w3.org/TR/html5/… Demo page (click to enable scoping) thelab.thingsinjars.com/scoped/… Blog posts describing it a bit more: thingsinjars.com/post/359/css-scoped/ thingsinjars.com/post/360/scoped-style/


jQTouch Calendar

I needed to build an offline calendar in jQTouch for a project and found this iCal project which relies on pregenerated HTML files or a server connection. A day later and I've pulled the thing apart, refactored and rebuilt into a shiny jQTouch extension (using Bruno Alexandre's original CSS still). It's built for Mobile Safari but still looks good in other webkits. The code's available on GitHub if anyone wants it: github.com/thingsinjars/…


I'm not entirely sure what the toolkit's for but it's got everything she needs. Again, the paper texture came from here. This was basically an excuse to look at pictures of Diana Rigg...

I wish...

What do you do when you find a nice paper texture? Juxtapose a couple of pop culture references on it and Save for Web. That's what I do, anyway.