Archive

Archive for July, 2010

Lost in CSS3

July 29th, 2010

No, I’m not lost in the new CSS properties – I’m experimenting with them. About a month and a half ago somebody tweeted something (I tihnk it might have been Cameron Moll) about wanting to see a CSS3 version of the LOST intro.

This sounding appealing to me, so I threw together some code one afternoon, but never really got the finishing polish on it. Frankly, I kind of forgot about it until something made me think about it just now. So, here it is, in it’s unpolished, ready to be criticized and improved.

Check out the DEMO (Currently only works in Safari & Chrome)

The HTML is pretty simple:

Lost

The CSS really isn’t that bad either:

A little something to set the stage.

html, body {
	background: #000;
	height: 100%;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

I used a white text shadow to blur the text and then rotated it to the starting position.

#lost {
	text-shadow: 0px 0px .42em #fff;
	color: rgba(255, 255, 255, 0);
	display: block;
	font-family: Futura, Helvetica, Arial, sans-serif;
	font-size: 4em;
	letter-spacing: .1em;
	position: relative;
	text-transform: uppercase;
	top: 35%;
	-webkit-transform: rotate(-20deg);
}

This is just to get the container into the right position.

#container {
	height: 100%;
	margin: 0 0 0 -150%;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 400%;
}

On hover it uses the CSS transition to gradually change the text shadow from the blur effect to the 3D block effect.

#container:hover #lost {
	color: rgba(255, 255, 255, .7);
	font-size: 85em;
	letter-spacing: .13em;
	text-shadow: 1px 1px 0 #777, 2px 2px 0 #777, 3px 3px 0 #777,
		4px 4px 0 #777, 5px 5px 0 #777, 6px 6px 0 #777,
		7px 7px 0 #777, 8px 8px 0 #777, 9px 9px 0 #777,
		10px 10px 0 #777, 11px 11px 0 #777, 12px 12px 0 #777;
	-webkit-transform: rotate(20deg);

	/* transition */
	-webkit-transition-property: color, font-size, letter-spacing, text-shadow, -webkit-transform;
	-webkit-transition-duration: 8s, 9s, 9s, 5s, 7s;
	-webkit-transition-timing-function: ease-in;
}

Check out the DEMO and let me know what you think, and how you would do it differently.

Technology, Web Development

Bamboo Bike

July 26th, 2010

It’s been about a year since something prompted me to build a bamboo bike. I really don’t even remember what it was. After seeing guys like Craig Calfee and BME, I was convinced that it could be done. The question now was where to get all of the parts I needed?

Oddly enough, the bamboo was the easiest thing to get. we have a friend who works at a zoo where they happen to grow a lot of bamboo. She told me they had set some aside, and I just needed to come pick it up. Little did I know, that they set aside approximately 300 feet of bamboo. I think there should be enough in there to a build a bike, or four.

I’ve managed to scrounge up some parts and a donor frame (for the bottom bracket, head tube, and dropouts) from craigslist. Special thanks to Alexis and Colin for picking up my out-of-town purchases.

So, afte rI get the frame from Colin last weekend I should have most of the parts I need to get going. So I started working on the bamboo tonight. I cut a small piece, put it on the grill, and took a heat gun to it – experimenting with the best ways to heat treat the bamboo. It seems like it should work pretty well.

It was too dark for pictures, I’ll take some when I start treating actual bike parts.

Biking

New Job

July 15th, 2010

So, here’s the story of getting my new job:

A few months ago I came across @bencallahan while looking for some info on less css. His name caught my eye because I don’t often come across local web developers on Twitter, so I started following him (on Twitter, I’m not a stalker). This led me to find out about his company – FORGE. FORGE is the kind of place that I have wanted to work at since I left full-time church work. The more I read about the company and saw the kinds of things that they do, the more I wanted to work there. The question then, became how to get a job there, not even knowing if they wanted to hire anybody. While trying to figure out the best way to ask for a job, I came across this. This started making me think, and after deliberating, and talking it over with Deb, I decided that the I would create a simple site to send to the guys at FORGE.

heyforgepleasehireme.comI went ahead and purchased heyforgepleasehireme.com, and started to lay out what would be on the page. After about a week of fitting in some time around an already busy schedule, I had a site that I was pretty proud of – making use of the new HTML5 tags and a smattering of CSS3 for good measure. All that was left was the delivery mechanism. While I was hoping I could come up with a way for FORGE to simply stumble across my new site, that didn’t seem reliable, and I had no idea how long it would take. After losing another possible job because a company I had a contact with had just hired somebody, I didn’t want to wait around too long. I decided to simply send the URL in a tweet to @forgeideas. It felt like such a significant tweet, I was hesitant. I was talking to Debbie and Dane about it on IM when Debbie typed, “Just send it!” So I did. An hour later, I got a message back from FORGE asking me to come have lunch and talk.

The rest, as they say, is history…

Lesson learned: it can pay to be creative when searching for a job. I could have easily sent a resume with a nice cover letter, but that wouldn’t have conveyed how much I wanted to work at FORGE. If you want something, go after it whole hog. When I first walked into FORGE, I was introduced as the guy who made the website

Dayton, Web Development