Keep those rows in line with this little jQuery snippet

I’ve recently needed this little snippet of code a few times over the last couple of months, I’ve never seen it documented so it’s probably obvious to anyone who isn’t me. But I’m going to stick it here just in case there are other people this has annoyed.

The situation: you have a series of elements (say divs or images) of equal width and floated left to give the visual impression of columns. However, this visual impression is broken when the elements start differing in height.

As you can see here, the 3rd and 4th elements are stacked, instead of breaking onto the next row.

While we could give the elements a fixed height, it’s not very nice for authors to have to tailor their content to a design.

So what we do is create a new clearing element at the end of the ‘row’.

We can actually do this with very little JavaScript: $('<div/>').css({ 'width': '100%', 'clear': 'both', 'height': '0', 'border': '0' }).insertAfter('div:nth-child(3n)');. This creates a new div element, applies a bit of CSS to stretch it and make it invisible, and then adds it after every third div (or image or whatever you want).

The full effect can be seen in the following jsFiddle:

Now purists will be screaming at me for using JS for the presentation layer, and they’d be dead on. Ideally we’d use CSS, and technically that can be done using something like div:nth-child(3n+1) {clear:left;} (I’ve only tested that in Chrome). Unfortunately, nth-child is only supported as of IE9 beta and so those chumps in MS-land won’t get the benefit of your genius design skills. Another way of attacking it is coding in those clearing divs in the source, but that’s pig ugly and I just plain don’t like it, but feel free to go that way if you wish (this would also get rid of the problem of people with JS turned off, but that’s a whole other discussion).

So yeah, no idea if that’s useful to anyone outside of me, but figured I’d put it out there if only to get some fresh content on this here blog.

Edit: Oh, and while I remember, this code is in use on my little Mixed Martial Arts news tracker that I knocked up while playing with Google App Engine. To see the effect of the code click some of the ‘+’s next to the news items and watch with glee as the entire row below slides up and down. Neat, eh?

THE ADVENT CALENDARS THAT EVERY GEEK ABSOLUTELY MUST SUBSCRIBE TO!!!!

Excuse the Smashing Magazine-like title. I couldn’t resist.

I increasingly seem to be subscribed to more and more tech-based advent calendars, it’s a nice gimmick which pretty much guarantees 24 days worth of solid content on varying topics. So here are (at time of publishing, I might add more as they appear) 5 to check out and throw scorn upon:

  • 24 Ways

    The original, and arguably the best – a veritable who’s who of the web development world provide tips and insights on a variety of topics – mostly design and front-end based.

  • PHP Advent

    The theme this time is, quite obviously, PHP. This year’s topics have already included Javascript (the link being AJAX), Deployment Automation, and URLs. It’s a great read, highly recommended.

  • WPEngineer

    Everybody and his mother seems to be making a living from wordpress, and why not – it’s way customisable, easily deployable, and easy for clients to work with. WPEngineer.com are running a tip every day in December, and they’re of great quality.

  • SysAdvent

    SysAdmin->SysAdvent – geddit?! Hahahaha, geeks are awesome. Anyway. I don’t know about you, but my day-to-day activities seem to involve quite a bit of cross over with everything else tech, especially SysAdmining. Over last year and this year, it’s addressed both Linux and Windows, as well as more highlevel stuff, such as time-management.

  • Phpied.com: Performance Advent Calendar

    A new one on my radar, this advent calendar has thus far looked at the anatomy of a web 2.0 web page, tools for analysing performance, and required reading. It’s looking promising.

Github: Lowering the barrier of entry for open source

Open source is great. But really, raising a bug and submitting a patch for a few documentation issues is more trouble than it’s worth. I’m stupid and lazy, so don’t contribute too much code to open source, but I am very anal. I hate stumbling across spelling mistakes and grammatical errors that anyone could fix, but to get this sorted without coming across as neurotic is nigh-on impossible. That was until Github came along.

I could wax-lyrical about Git and Distributed Version Control all day long, but a billion and one people have already done that a whole lot better than me. So I’ll just give you a quick step-by-step in how Github solved my problem.

First: Gareth posted code for a couple of nice CSS testing ideas he’d been mulling over.

I looked over his README, and recognised that Gareth had clearly wrote it as an afterthough and left some annoying spelling and grammar mistakes in it (I was particularly riled by the flagrant abuse of they’re/there/their). So I forked his code. That’s right, I forked it mercilessly and without remorse. It didn’t matter that the only thing I wanted to change was some spelling in the minimal documentation: OCD is my problem, nobody elses. And forking is ridiculously cheap in Git.

Once forked, I didn’t even need to clone the repository locally. Github lets you modify files from the web interface, so I fixed the grammar issues I could find.

Great, I’ve got some nice grammatically correct documentation – what next? Should I just say “screw Gareth, my version of CSS-test is clearly better, for I know my ‘theirs’ from my ‘theres'”? Of course not, that didn’t wouldn’t work, and what’s more, it’s not very nice. Rather, I sent a “pull request” to him (again, available from the web UI), just saying – “look, you can’t spell, I can, and I’ve even done the boring work for you”. Mr Rushgrove merged in my changes to his copy, and the world was better for it.

Yes, this is a fairly weird use-case, but I wasn’t the only person to consider it. It’s just a simple alternative to the traditional centralised commit-bit / bug report->patch scenario found in “normal” open source projects.

Gears for AMD64 on Ubuntu and a brief hello

Coincidentally, it is a year today since I updated this thing. Whoops. I might keep it updated in due course, but I’ve got other commitments for now, so while it may get the now-and-again treatment, don’t expect anything regular.

I actually came here to post a link (something I’d usually save for my ma.gnolia page), because for about six months now, I’ve been trying to get Gears working in 64-bit Ubuntu (Google’s insistence on not even trying is giving even Adobe a run for their money). Finally, Scott Wolchok, has put together a binary, which he has linked to, on the Gears Google group. (OK, he actually originally put this together in March, I just couldn’t get it to work back then).

I’ve tested it with Google Reader. On initial installation, it screams that my version of FF (v3) isn’t compatible, but offers itself to restart any way. After restarting, everything is back to good again, Reader works in offline mode with no problems.

oooh – shiny!!! (now with added book reviews)

It took slightly longer than a week, but dammit – the new styles have been applied. They’ve been tested against nothing but Firefox2 on Linux at 1024 (I did have a peek at 800×600, but it made my eyes hurt. So for now if you care that much, you can upgrade your computer or buy some stronger specs – I am an accessibility Lord). All in all, it’s an obvious improvement over the previous eyesore, I’m still unsure as to how I let myself upload that heap of dung.

Computer Science Degree == the design chops of David Blunkett

I never fooled myself into believing that the previous design looked good, however I just stuck with the excuse that it was probably the best I could do. However, my job as a front-end developer sorta led me to need to at least understand WHY it looked wank, and so I started to do some research. I invested in a couple of design books – specifically Robin Williams’ (no – not THAT Robin Williams, you douche) “The Non-Designers’ Design Book” and Timothy Samara’s “Making and Breaking the Grid: A Layout Design Workshop”. Both have been extremely helpful, particularls the former.

Non-Designers’ Design Book

I cannot recommend Robin Williams’ offering highly enough, she presents the four basic design principles (Contrast, Repetition, Alignment and Proximity – CRAP!!! GEDDIT?!?!) in easily digestible chunks with a bit on Typography to set you on your way to knowing just why everything you put out there looks like it was shat out by a constipated rabbit. Having read through it, I had a better understanding of what to avoid when hacking together this new design. It still lacks in good typography and the contrast aspect of the profane acronym, but I think it’s something ok to work off of.

The only thing I found this design book short of was some level of colour theory, and that’s why I have deliberately avoided using any colour that isn’t in the generic HTML palette (ie the link colours). I’m on the look out for a good book on colour, so anyone with recommendations feel free to shoot them my way. I’d also like some guidance on Typography books – nothing too heavy, there’s such a selection out there and they tend to cost about a grand each, so I wouldn’t mind some advice before I mortgage my (rental) house.

Making and Breaking the Grid: A Layout Design Workshop

As instructional books go, this isn’t particularly amazing – it goes in to what grids are and how to use them, but mostly serves loads and loads and loads of examples. As you can see, I’m currently sporting quite the grid of my own – nothing ripped directly from the book, but plenty of inspiration gained. Half of the book is devoted to breaking the grid and how to do it, but I never really got why the non-grid designs worked even when explanation was attempted. I’m unsure whether this is down to the book or my small brain capacity, either way – you should be expecting to see something more closely looking like a sudoku puzzle than a beautiful garden anytime soon.

To conclude..

I am by no means the next Vivienne Westwood of web design, but this is good enough for now (or at least until I get some colour theory under my belt) – the rest will be done in little increments, (babysteps, if you will). Either way, if you – like me – left uni with a lot of coding knowledge and absolutely nothing in terms of design you should definitely check out Robin Williams’ book.

Tune in next time for a brief recap of hackday…

Eurgh – nudity!

My last post promised some proper content that week. That was quite a lie, wasn’t it? Pick your excuse – work, personal life, coming of age – they could all be applied for why I am yet to update properly.

This place looks like it was neglected, however I have done a complete redesign offline. This redesign highlighted a fundamental problem with this whole thing – my code is out of sync with what’s live. Like totally – the mark-up’s wrong, there are features here that haven’t been replicated on my laptop, and visa-versa. It’s a complete mess. So this week I’ve made it my mission to bring both deployments into line so code-maintanence is a matter of one rsync / scp / svn (dependant on how clever I end-up being – so it’s probably going to be scp then) and I can get back to actually providing meaningful blogposts.

In the meantime, I’ve decided that no-styling is better than the previous design. Having looked at the nice, clean, new design for the past week, I feel almost sick seeing what is still being shown to the world at large. So I decided instead that the page-innards would be more tasteful. This also brings the site temporarily into sync with my MySpace design.

A quick apology

Anyone on my feed this morning would have experienced some link diarrhea in the form of the Ma.gnolia feedburner link splice thingy. I apologise, in the future you’ll only get good stuff – most of that was crap which I bookmarked for other people / later perusal.

I will be back later this week with some proper content – in the meantime I’ve been working on a redesign of sorts, so treasure the current uggo-design while you can, it’s only here for a week or so.

You know when you’ve been Twango’d

You take one Django app (this monstrosity, which I mockingly label “my blog”), you take one completely exhausted Ruby On Rails app with a nice simple API but as much stability as a menstruating Dr Jekyll (in this case, Twitter) and what do you get?

Well I kinda ruined it with my hilarious entry-title, but yeah – Twango.

Why I love Twitter

Twitter could very well be my illicit lover, I only have like three “friends” – but that matters none. I still feel the need to tell them what I’m cooking, reading, programming, and why I hate Gillian McKeith (she’s a pretend doctor who dissects people’s poo on TV – who needs any more excuses?) along with stuff that I find to be funny in the empty landscape that is my head (so yes, I am a sadist).

The downside is, of course, that this goes both ways – you get the doings of the people you have subscribed to (it’s only nice to return the favour, isn’t it?) broadcast live to your phone via text message. This has led to some people finding the service “intrusive” and turning the alerts off. I quite like it – generally people on my list have been pretty sensible with their updates and it keeps the (non-salacious) voyeur in me happy. But you know – horses for courses and all that.

But it’s not really all that useful, is it?

That’s what my girlfriend said. (BUH-DUM..TSH!) No really – she did. Only for her to sign up and send this twitter the VERY next day. She’s not used it since, but it’s served as something to sling in her face if she ever moans about my incessant Twittering. “You’re always on your phone!” “Well you lost yours!” – that’ll show her.

Anyway, what we have here is a very nice alerting tool for absolutely nothing. We can use its aforementioned “intrusiveness” for many many things: This guy hooked up his doorbell, Gareth Rushgrove has mentioned the idea at work of hooking it into CruiseControl to tell us when a build has gone awry, and now I’ve hacked together a little something which alerts me whenever somebody posts something on my blog.

So THAT’S where Django comes in…

Django makes such alerting a breeze. All you need to do is override the model in question’s save method so that it sends a Twitter to your twitterbot anytime it is called. Then as long as you are subscribed to your twitterbot’s feed, you’ll get a twitter to your phone shortly after.

It’s proper simple, and the code is pretty straight forward too. There are a bunch of python APIs out there already, but I used the simple posting function released by Matthew Boedicker, I only need that posting functionality, and this seemed ideal – just a couple of URLlib calls and you’re sorted. Just stick that somewhere (I’ve got a nice customised helpers file) and call it a bit like this in your model:

class Comment(models.Model):
   ultra hot model code
   def save(self):
      super(Comment,self).save()
      twitter_update("comment posted to " + self.blog_entry.slug + ": " + self.content)

And it should work nicely.

But couldn’t it all go bits up?

Yeah, there’s every chance that this is open to abuse. Twitter’s far from safe with the whole SMS spoofing thing, and even then people could totally kill your phone if you’re not careful – so obviously use it while acknowledging the risks involved. Luckily, Twitter makes it relatively simple to silence – everything arrives at your phone from one source, so you could easily shut it up – and there’s no stopping you implementing spam-protecting measures such as Askimet and Captchas (the first is definitely next on my BDT todo-list).

Feel free to tell me why I’m wrong, add me on twitter (I’d really liked to be added by people not trying to spam me for a change) or just plain ignore me – thanks for making it this far.

the elusive commenting system

BDT (yeah, third post in, already acronym-ising this thing) finally has one of them there commenting systems. Check it out below if you don’t believe me.

The delay

The reason I was holding back was because I wanted to “hand-roll” my system for maximum control. Yeah, this is a gross violation of “don’t reinvent the wheel” (Django has a comments module), but sometimes invention is fun even if you’re contributing nothing new to anything. My main motivation for spitting in the face of Django was because at some stage I want to play with Akismet. There are tutorials out there for adding Akismet using the existing comments system, however they all involve altering core Django code and I sorta felt that this could be a bit messy – particularly in terms of maintenance further down the line.

The problem

The Django API makes it a breeze to add a comment, the big problem comes in escaping stray html / javascript etc. I could write my own sanitiser – it probably wouldn’t be all that hard, but I would never want to reinvent the wheel (I’m banking on 90% of readers skimming the last paragraph). The only method out there in Django seems to be that in the template system – and that’s only going to be directly useful in sanitising the main blog page, and only then if I explicitly tell it to on every template. It won’t stop somebody from submitting some code and it messing about with my admin page, for example. But the method itself is useful, it is powerful and in one command it can strip a string of any potential offensiveness (by offensiveness I mean XSS etc, not the word, “dick” – we wouldn’t want to prevent people from commenting about their favourite British pudding now, would we?).

The solution

PS I have stumbled upon this idea in surfing, but cannot remember where, if you were the originator, tell me and I’ll give due credit.

To harness the escape method, first you need to hook into the django.template module – specifically looking for the Parser class (I was stumbling about aimlessly in the python shell when I finally cracked this one, there is probably a better way of doing this). From an instance of the Parser class you execute the find_filter method to return the escape function, which you can then use at will. So, sticking this in your “add a comment” view-method-thing would look a little like this:

from django.template import Parser

...ace django code goes here...

p = Parser("you could probably put anything in here, I should probably try looking for a static class or something more efficient")
esc = p.find_filter("escape")
new_comment.content = esc(new_comment.content)
new_comment.save()

...more ace django code...

note to self: find / implement a “code” template module. Preferably with syntax highlighting built in.

obviously, you’ll want to do some content checks and the like, but you get the general idea. I am of the opinion that if you are not super paranoid about what you let into an effectively open database then you are asking for trouble. If you need further proof (beyond common sense), look at all of the trouble myspace have had over the years.

Still to come…

hmmmm, somehow this has formed itself into BDT’s first “proper” entry, I should probably have planned it better. Anyway, next on my list are per-category feeds, a bit of an “about” section and then some playing with Django vs Jabber interactivity. Should be fun, yay!

keeping this thing updated

…is a royal pain in the bollock. Figure I should give a small checklist of what Si has been working on:

XML Feed

I have just finished implementing an Atom feed for this mofo. It was ridiculously simple using Django – create a feed class, point the url file at it and you’re away. I think I will have to stick some per-category feeds in because that was waaaay too easy

Comments System

I am working on getting a comments system sorted ASAP, I think the power of blogging is in the dialogue – without it you have a glorified ego-wank. The aforementioned feed will not be going live until this is all cleared and working.

Super hyper mega WEB APP!!!

Hayley and me – we had one of them $5 ideas* that she swears is gonna make her us a million. I am not so sure. I just want to be able to say that I have successfully deployed a working web application, rather than being a dumb simpleton who has no idea of the rigeurs involved. The app itself is pretty useless to anyone not of the myspace generation and it took me just 45 minutes to manufacture a proof of concept (again – thanks to my boyfriend, Django) – but there is always a chance that Fox will give me £50 for it within the next 10 months, therefore making me a profit on my hosting. Wooyay.

* ok, it’s probably closer to 50p.

So yeah – still plenty on my plate, next post will hopefully about this mysterious wAPP (saying it aloud like that is strangely satisfying), if not inviting you – my non-readers – to leave a comment.