Little Lightbox_me quirk

Using the excellent Lightbox_me jQuery plugin the other day I came across an interesting quirk. When you lightbox an element, Lightbox_me moves that element in the DOM to a container it creates to lightbox it, but when you close the lightbox it doesn’t put it back where it found it.

The Problem

In my case I was using jQuery’s find function to look inside the clicked element’s parent to find the element I wanted to lightbox. This was because I had multiple elements on a page I wanted to lightbox, so I started with something like this:

$('.button').click( function(){
	$(this).parent('.container')
	.find('.lightbox')
	.lightbox_me()
});

Which worked fine when you clicked on the button the first time, but if you closed the lightbox and clicked the same button again, nothing happened.

The Solution

After prodding about for a while I noticed that Lightbox_me was moving the .lightbox element from the .container element, sticking it in another div hidden at the bottom of the DOM, and crucially, leaving it there after the lightbox was closed.

Obviously this meant when the jQuery looked for the element in the parent a second time, it wasn’t there. So the solution was to change the markup so the trigger had a rel attribute that matched the targets ID, meaning it could be found wherever it was in the DOM.

HTML:

<div class="container">
	<a rel="my-lightbox" class="button" href="#">More info</a>
	<div id="my-lightbox" class="lightbox" style="display: none">
		Lightbox content
	</div>
</div>

JS:

$('.button').click( function(){
	$('#($(this).attr('rel'))').lightbox_me();
})

My thanks to Justin Perry for helping me troubleshoot this issue.

Currently occupied

I haven’t been updating here as frequently as I would’ve liked over the past few weeks as I’ve been working full-time for a new client. Unfortunately (or fortunately for me, depending how you look at it) this means I won’t be taking on any new work for a while.

Lolbash

This must be one of the geekiest things I’ve ever seen.



# LOL!!1
# Source: http://aur.archlinux.org/packages/lolbash/lolbash/lolbash.sh

alias wtf='dmesg'
alias onoz='cat /var/log/errors.log'
alias rtfm='man'

alias visible='echo'
alias invisible='cat'
alias moar='more'
alias tldr='less'
alias alwayz='tail -f'

alias icanhas='mkdir'
alias gimmeh='touch'
alias donotwant='rm'
alias dowant='cp'
alias gtfo='mv'
alias nowai='chmod'

alias hai='cd'
alias iz='ls'
alias plz='pwd'
alias ihasbucket='df -h'

alias inur='locate'
alias iminurbase='finger'

alias btw='nice'
alias obtw='nohup'

alias nomz='ps -aux'
alias nomnom='killall'

alias byes='exit'
alias cya='reboot'
alias kthxbai='halt

Hello toggles, goodbye sprites

No, not that kind of Sprite.

Before today, if you visited my site on a device with a high resolution screen, like the iPhone 4, you would of seen some blocky icons in the header made with an image sprite. Which was something that always really bugged me.

When Apple announced the retina display they introduced the -webkit-device-pixel-ratio media query to WebKit, the rendering engine used by Safari, Mobile Safari and Chrome (amongst others) to detect higher resolution displays. I could have used that media query in my stylesheet to serve a higher resolution sprite to visitors, or just served a higher resolution sprite to everyone.

Instead I opted to use an icon font, which has a number of advantages over rendered images:

  1. They’re vector based so can be scaled to any size without an increase in file size and look great on higher resolution screens.
  2. They have transparency that works properly in IE6.
  3. They can of course be styled with CSS properties like text-shadow, color or rotate.

There’s one small Gotcha with Firefox: it won’t load cross-domain font files. This confused me somewhat as it worked when I tested it locally, but not on the live site where I use a CDN. The solution was to encode the fonts as Base64 in the stylesheet, which has the added benefit of saving a http request as well.

Toggles are nicer than buttons

Ok, buttons are still cuter.

This is as true of duffle coats as it is web design, which is why the second feature I’ve added is a toggle on my portfolio to switch between a two and four column layout. I spent quite a while thinking what combination of jQuery UI modules it would need before I realised I could just do it with a CSS3 transition.

The toggle itself is just a <button> element styled with a background image and a couple of lines of jQuery that switch the class on the button and column containers when it’s clicked. I probably spent more time getting the toggle image looking just right with drop shadows and gradients in Photoshop than I did on the CSS and JavaScript.

To see how many people use the toggle I’ve attached a Google Analytics event that gets triggered every time it’s clicked. At the moment it’s just some simple code that tracks clicks, but in the future I might add some logic to see which layout is more popular. I’m not sure how I’d remove the bias towards the initial layout though, maybe with some sort of randomisation.

It’s always good to try new things out on your own site, so when a client asks for them you can point to live demo of the technology and you know how to implement it.

Farewell Facebook

Don't you forget about me

I’ve decided to leave Facebook for a while. Not because of a lack of privacy, the new timeline – quite the contrary, I’ve been using it since the developer preview  - or obnoxious new advertising placements.

The other day I noticed that Facebook was sitting at the top of the list of most visited sites in my browser, its actually been at the top of that list for a while, but I realised that to be at the top of that list I must be spending hours and hours of my life there. Those hours turn into days and I daren’t think how many of those add up into weeks or even months since I joined in 2006.

Hours of my time and effort are spent every week feeding this insatiable machine. I’ve given it more information than the last census, hundreds of photos of and countless messages shared between my friends.

So I’ve invested my time in Facebook, but what have I gotten in return? Are my friendships richer because of it? Have I made new friends through it? Am I using it to network with professional contacts? For me the answer to all these questions is no. Perhaps I’m not using it to it’s potential in that case, but I don’t think I want to double down on my investment.

My online relationships mirror my existing relationships – I’m most social with those I’m already close with and I don’t really care about what my friends from primary school are up to these days (sorry).

What I do find useful about Facebook is it’s convenience. To quickly invite a bunch of friends to a party, for example, without having to worry about keeping your phonebook up to date and texting all of them. Send a quick message to someone whose phone number or email you don’t have. There’s probably other completely obvious things that I’ll miss when I’m gone, but I’ll see how it goes.

For now I’ve decided to block access to Facebook on my computer, disable notification emails and delete the app from my phone so I won’t have to resist the temptation of logging back in. In a month or so I’ll come back and review how things are going and if I find I’m not missing it terribly I’ll deactivate my account.

Farewell Facebook, it’s been fun, but I think it’s time I moved on to other things.

When will my website be ready?

There’s a good series of answers on Quora to the question: Why are software development task estimations regularly off by a factor of 2-3?

Asked recently if I could work quickly, I pondered for a moment, trying to think of a more eloquent answer than ‘yes’ and replied that I found the slowest part of development was waiting for feedback on changes. To elaborate: redesigning my photography site a few weeks ago took less than a day from development to deployment.

Firstly, because I knew exactly what I wanted and how to execute that with WordPress. But more importantly the feedback on changes was instant. Because there was immediate feedback there was no break from work to grab a screenshot, write up the changes, email them to a client and then wait to hear back. The final sentence of one answer on Quora is succinctly brilliant:

Request-Response latency between humans is thousands of times longer than in a single person’s mind.

— Why are software development task estimations regularly off by a factor of 2-3? – Walt Howard, Quora