Harry Bailey

Harry Bailey specialises in turning project chaos into clarity. With two decades of hands-on agency experience and agile-certified expertise, he offers practical, immediately actionable strategies, not just theory, to dramatically improve agency project delivery.

Move your Sites folder in OS X with a SymLink NOT an Alias

Two hours of my life were wasted on this one, even though I’ve done it before. So…

If you want to move your ~/Sites folder into say Dropbox or AeroFS or Google Drive or SkyDrive and then you still want to point to it from its default location don’t use an alias.

I know an alias is only a ctrl-click away, but it means all sorts of pain.

Instead, move the folder to dropbox by dragging it (yes you can do this), then open Terminal and type:

ln -s ~/Dropbox/Sites ~/Sites

Replace Dropbox with whatever the folder of your service is called.

Restart Apache either by restarting Web Sharing in System Preference -> Sharing or by using Terminal and typing:

apachectl graceful

Cross your fingers and open a virtual host in your web browser. I fought with an Alias and all sorts of folder settings and httpd.conf lines to try and get it working, and then all I needed was to use a SymLink in its place.

Don’t worry about no longer having a ‘real’ ~/Sites folder. You don’t actually need one.

Cheers to James Galley, my desk neighbour for helping my brain to click on this one.

Animating Fade Of Twitter Bootstrap Buttons

I came across a curious issue today. You can’t select a period of time over which to fade out and fade in Twitter Bootstrap buttons.

If you apply jQuery fadeTo() or animate() they fade out and they fade in, but they do it in their own time.

This may be related to a css transition which is applied in the bootstrap css, I haven’t had a chance to look, but the workaround for me is to put the button in a span and fade the span in and out instead.

   Button Text

Add Random Hashes With Mysql

NB: This is a really really old post. See a newer better one about inserting and updating with random string.

Adding a new column to a table which needs to contain a different random hash for each row?

Mysql can easily generate md5 strings and update all rows in the table for you

UPDATE thetable
SET thecolumn = MD5(RAND())
WHERE thecolumn IS NULL

CSS3 Element Wiggle With Keyframes

This technique produces something similar to the wiggle you get on an iPhone when deleting items.

Be aware that keyframe animation is still very poor in Chrome and cases freezing and jumping if multiple items are animated at once.

The animation css below results in a hovered element rotating back and forth around it’s centre point. You can update the number of degrees and length of animation to change the appearance.

Just add this css and give your element the class ‘wiggler’ to implement

/* safari and chrome */
@-webkit-keyframes wiggle {
	0% {-webkit-transform:rotate(4deg);}
	50% {-webkit-transform:rotate(-4deg);}
	100% {-webkit-transform:rotate(4deg);}
}

/* firefox */
@-moz-keyframes wiggle {
	0% {-moz-transform:rotate(4deg);}
	50% {-moz-transform:rotate(-4deg);}
	100% {-moz-transform:rotate(4deg);}
}

/* anyone brave enough to implement the ideal method */
@keyframes wiggle {
	0% {transform:rotate(4deg);}
	50% {transform:rotate(-4deg);}
	100% {transform:rotate(4deg);}
}

.wiggler:hover {
	-webkit-animation: wiggle 0.5s infinite;
	-moz-animation: wiggle 0.5s infinite;
	animation: wiggle 0.5s infinite;
}

Twitter Bootstrap Tabs On Right Side

Twitter’s bootstrap css currently doesn’t support tabs on the right hand side or floated right. We’ll here is the css to allow it.

We’ll stick to existing naming. Twitter use secondary-nav within topbar so let’s use that…

.tabs .secondary-nav {
	float:right;
	margin-left:10px;
	margin-right:0;
}

The the html for the tab you want to float right you need:

Link Text

The outcome is most tabs on the left and any with the new class positioned over to the right.