I feel strangely proud about my first recursive function

I need to move the bottom-most of a given set of divs as part of a parallax effect, so I progress down through them until I hit bottom.

function left(amount, obj) {
    $(obj).children().each(function() {
        if ($(this).children().length > 0) {
            left(amount, this);
        } else {
            $(this).css('left', parseInt($(this).css('left')) - amount + 'px');

function wrap(obj) {
    var x = $(obj).offset().left;
    var y = $(obj).offset().top;
    var w = $(obj).width();
    var h = $(obj).height();

    if (y + h < 0) {
        $(obj).css('top', $(window).height() + 'px');
    } else if (x + w < 0) {
        $(obj).css('left', $(window).width() + 'px'); 
    } else if (x > $(window).width()) {
        $(obj).css('left', 0 - w + 'px');
    } else if (y > $(window).height()) {
        $(obj).css('top', 0 - h + 'px');


by Mark on
Tagged: , , , , , ,

HOWTO: Wall of photographs in jQuery/HTML/CSS

Gallery in action

The other half of the Funcan theme was a flexible photo gallery. Funcan was due at the start of March, and the gallery now at the end, and while I take a break for food I want to jot down some quick notes on progress so far:

I kicked around a few different looks, given the simple brief that

  1. The gallery’s appearance must fit with the Funcan theme.
  2. The gallery should be able to be inserted into any given container, and Just Work™.

and truth be told, most of them looked awful, either trite, slow, or overwrought, so I decided for steal from those who have done better (I know, shut up). I am not the first person who has wanted to steal Google or Flickr’s wall of photographs. Some quick investigation showed me that the algorithm used is fairly simple. Implementations can and are complex, but in theory anyone can understand how the wall of photographs works in under five minutes.

There are a bunch of other well-indexed blog posts that cover the algorithm in greater or lesser depth. I’ve chosen to not link any because the author’s invariably talk about about either how elegant their code, or how smart they are for for their understanding of the deeper math involved.

My gripes aside, I do appreciate the posts, but I have never been able to grep as much detail as the push. Not in one go, at least; I need bite-sized chunks, so I sat down with pen and paper, and worked out that for each given row of images:

  1. First make each image the same height, while you preserve proportions. This can be done via CSS.
  2. Find the total length of the row (add the width of each image together).
  3. Divide the length of the row by the desired width (in this case the .gallery div) to get the ratio.
  4. Change the height of the each individual image by this ratio.

You can find a live demonstration on my sandbox or fork the code from Github.


by Mark on
Tagged: , , , , , , , , , , , , ,


Although his site is offline at this exact moment in time, 091 Labs’s Duncan Thomas asked me to write the new theme for his site. “Funcan” is a dark, responsive theme inspired by terminal output on a Linux system. There are strong contrasts between the dark background and bright text, modern aesthetics in the header and layout, a fluid and responsive design. You can play with the theme temporarily on Peppermint, fork the repo on Github, or just gaze slackly in astonishment at the screenshots:

Funcan theme on the desktop
Funcan theme on iOS

by Mark on
Tagged: , , , , , ,

Linux course post-mortem


There was a dearth of classes going on at 091 Labs over the summer, so I stepped up to the plate at the start of August and advertised a Linux programming class, spread over four weeks: Learn the fundamentals of programming through the Bourne Again Shell, and all its queerness and oddities of syntax. The first class was held on August 19 in the hackerspace with the three successive classes each held on the following Monday. The crowd was small, and only shrunk, but compared to some classes I’ve attended and run, they were pretty attentive.

I, me, myself, I too learned a lot from this class, both in and out of Bash: Why certain things were handled by Bash in a certain manner (subshells comes to mind-I’ve been using them since day one, but never really thought about how they worked); how to perform tasks I thought difficult or weird (advanced awk and sed operations); how to parse the material for the class in an understandable manner; and odd as it is to admit, how to make eye contact and just interact in a relaxed and confident manner, given how long I’ve been avoiding just this.

The Bash part of the learning was fun, and I can comfortably say that I came out of each week with a better understanding than I did going in. The case structure, variables, oddities, efficiently testing items, parsing integers, math operations, and even some binary operations too were all items I picked up from basically scratch.

I’ve also built up a good body of material that I can just turn around and give to someone who wants to learn the Bourne shell, as simply as just sharing the Google Drive folder with them. The slides are concise if sparse, and cover the fundamental operations without delving into anything Linux-specific: You can follow through the slides and examples through Terminal on OS X, or Cygwin on Windows.

On the classes themselves, I learned some things: A Facebook event is where workshops go to die; Facebook users are as conditioned to ignore event invitations as they are blinking advertisements. The 091labs.com blog post, word of mouth through members and friends, and repeated postings on the 091 Labs twitter and Facebook accounts were what brought people in the door.

I did some things right, and others wrong:

  • I should have had printed handouts with exercises and solutions available.
  • A split-screen terminal (Terminator) was excellent: I could simultaneously show creation and execution without having to either tab away or change desktop.
  • Offering Cygwin and SSH access was a fantastic idea. It saved me from having to mess with people installing Linux for the first time.
  • Problems with Windows’ line-endings cost me time and frustration. Everything seems coded okay, but then you run it and whoops. Ditto this and people deciding to try vim despite my stern warnings away from it.
  • RE the above: Next time I need to mandate a good text editor for Windows and OSX, either Sublime Text. If you use Notepad or Wordpad or TextEdit-or any kind of rich text editor for that matter, you deserve to be shunned.
  • Relying on slides for the first week of solutions limited me and only served to fluff out the slideshow. Coding and uploading solutions separately allowed me to append notes at length.

The final workshop is tomorrow, and instead of a segue into C#, I will probably stick with more real-world examples of scripts, give more exercises, and invite my students to offer up problems for me to handle programmatically.

In the end it was fun, the money brought in helped the hackerspace, and I can port this material to other programming languages (C#, probably) with minimal effort. B++, would run again.

by Mark on
Tagged: , , , , , , ,

Round down a decimal of arbitrary precision to n.

For Darren. :D

using System;

public class DecimalRound {
	static void Main(string[] args) {
		// args[0] is the decimal to round to.
		// args[1] is the decimal.
		int sentinel = 0;
		// 1. Split the number. decimalStr[0] is the leading number.
		string[] decimalStr = args[1].Split('.');
		// 2. decimalStr[1] is the decimal.
		int[] decimalInt = new int[decimalStr[1].Length];
		// 3. Parse sentinel value.
		if (!int.TryParse(args[0], out sentinel))
			Fail(args[0], true);
		// Convert the decimals characters to ints, after validation.
		int n = 0;
		foreach (char a in decimalStr[1]) {
			if (ValidChar(a))
				decimalInt[n] = CharToInt(a);
				decimalInt[n] = -1;


		// 0-4, round down. 5-9, round up.
		for (int i = decimalInt.Length - 1; i > sentinel; i--) {
			if (i > 0) {
				if ((decimalInt[i] >= 0) && (decimalInt[i] <= 4))
					decimalInt[i - 1]--;
				else if ((decimalInt[i] >= 5) && (decimalInt[i] <= 9))
					decimalInt[i - 1]++;

		// Output. 
		Console.Write(decimalStr[0] + ".");
		for (int i = 0; i <= sentinel; i++)

	static bool ValidChar(char a) {
		// Validates that it is 0-9, and not any other character value.
		switch (a) {
			case '0': return true;
			case '1': return true;
			case '2': return true;
			case '3': return true;
			case '4': return true;
			case '5': return true;
			case '6': return true;
			case '7': return true;
			case '8': return true;
			case '9': return true;

		return false;

	static int CharToInt(char a) {
		// Converts, if valid. 
		return Convert.ToInt32(a - '0');

	static void Fail(string a, bool b) {
		// Spit out error message if you pass invalid characters.
		// b = true if this is fatal.
		Console.WriteLine("{0} is not valid.", a);

		if (b)

by Mark on
Tagged: , , , , , ,