OK Sushi

Mini testcases for your css pleasure

When you spend a bit of time hanging out on IRC helping people, you tend to create a whole bunch of little test cases, proving one thing or another.

I’m no exception, and I’ve decided to make a more concerted effort to keep them up-to-date.

You can view my testcases here – hopefully they are of use to somebody.

Some popular ones are:


Chilli Jam

We found some delicious-looking chillies at the market yesterday: perfect for making chilli jam!

A good chilli jam is sweet, but not too sweet, and leaves a delicious heat in your mouth. This recipe is my own concoction, although jaymis has a good alternative, sans tomato


  • 2 cans of diced tomatoes (I use roma tomatoes – cherry tomatoes would be a nice alternative)
  • 5 chillies (more or less – do what you think is right for your audience) – seeds removed and set aside
  • Garlic (I used 5 very large cloves – I suppose about half a standard-size garlic would be sufficient) – peeled and roughly chopped (chop it finer if you don’t like bits of garlic)
  • 3 tsp tamarind paste
  • 1 cup sugar (raw sugar works well – the more unrefined the better)
  • 1 cup red wine (I used some leftover tempranillo )
  • 1/2 cup fish sauce

Put all the ingredients into a largish saucepan, bring to the boil, then reduce the heat to very low. Cook for at least 2 hours, until such a time where you can see the mixture becoming non-runny.

Remove from heat, put into pre-boiled jars. Enjoy!


Styling Wordpress Images

No doubt if you have used Wordpress for a website, you have used it’s WYSIWYG to insert images into posts. The class names that it gives images is pretty bad:

  • Want the image floated left? You get the class name ‘alignleft’
  • How about right? You guessed it: ‘alignright’
  • What about if you want it displayed in the centre of the post? Try ‘aligncenter’ on for size

Styling these tags

So, depending on your styles, you’ll want something like this:

	.alignleft {float: left; margin: 0 1em 1em 0;}
	.alignright {float: right; margin: 0 0 1em 1em;}
	.aligncenter {display: block; margin: 0 auto 1em auto;}

The above styles pretty things a little bit. However, what happens if you have a rogue person editing your content who uses the ‘align’ attribute on your images? How can you standardise the display of images?

Using attribute selectors, it’s pretty easy:

	.alignleft, img[align=left] {float: left; margin: 0 1em 1em 0;}
	.alignright, img[align=right] {float: right; margin: 0 0 1em 1em;}
	.aligncenter {display: block; margin: 0 auto 1em auto;}

In the perfect world that I dream of, no CMS would allow people to use ‘align’ on images (or any other element), but in the immortal words of John Bender: Screws fall out all the time, the world is an imperfect place. http://www.imdb.com/title/tt0088847/quotes (that’s from the Breakfast Club)


Sampology Super Visual Disco Party Sampler

Sam’s HOT! He’s so on fire that his records melted. This short little video has it ALL

Untitled from Green Eggs and Ham on Vimeo.


Grafica Fidalga

Fantastic little documentary about a letterpress workshop in São Paulo, must see. Keeping here so I don’t lose it.



My flickr photos