Where have I gone.

I know, this is really late. But I wanted to let you know that I have been spending all of my blogging time on bildr. So…. for the foreseeable future, I won’t be updating here.

You can find me here: http://bildr.org/

bildrCode 365days later

If you can believe it – bildrCode is over a year old now. Without any major gaps in development, bildrCode has matured quite a bit. Without looking back it was hard to know how far I had come. But then I gathered all the papers and drawings I had done along the way, and it was easy to see how much I had done, and how far I had taken this.

The project is actually on beta 2 right now, and has really come alive with the recent changes. The system supports file permissions, and a host of more advanced features.

I think it would have been impressive had this been all I was working on, but the entire bildr site is starting to bloom as well, and it’s incredible how much my php SQL and MooTools skills improved through this.

Why so slow?

I often wonder why my blog posts seem to be further and further apart, and also more boring. (maybe that last part is just me). Maybe nothing can compete with last year at this time, but my lack of posting makes it seem like im not doing anything. Perhaps just nothing to report, or is it that im just too busy… maybe im lazy? However it is, what am I doing now?

Lately I have been doing one of 2 things. Reading “About Face 3” (Just finished it last night), and working on bildr, mainly from a content point of view.

About Face was really good. I think this is actually the longest book of its kind I have read cover to cover, every word minus the index. It works almost like a textbook for interaction design with a great deal of design patterns and best practices mixed in. I think it really is 2 books, and even though it is split into 3 sections, I think it should have been 2 books.

The first is all about process. What does an Interaction designer do? What is his process? Who does he work with, and how is his job best accomplished. This part of the book I think should be required reading for anyone that wants to be an interaction designer.

The second part should be names “Patterns for great interaction design”. That’s exactly what it is. This last half is all about why things are done a certain way, how we can break out of the rut, and what could be done better.

Wait… I take that last paragraph back. It did have a good amount of how things should be done. But I think it had even more of how things should not be. Why saving should be put down to rest along with alert boxes, and a horde of other things.

So all in all, it really was more about offering problems than solutions. But as a designer, that is what we need. When Charles Eames was asked “What is the boundaries of design?” he simply said “What are the boundaries of problems?” We designers go after problems like kids to the ice cream truck. But as the book points out, the problem here is that we dont see the problems all the time. If you think saving/save as is a good system, why design something different? So it does a great job of showing that.

The second thing I have been doing is bildr. bildr bildr bildr. Seems like that is all I do… right? Sadly right now I dont have too much to show off that is really cool, but I have started entering in a lot of content.

The parts that gets me is that it takes so long, and seems so small. When your project is to build a window, it seems like you work so fast. But when you are building a tower, that window dosnt seem like much has been done.

Scale 9 Grid HTML

The image to the right is the original image. The large image was scaled using HTML and css alone. At first you might not see what was going on here, but take a closer look. The tip, and the corners, the gray part… they didn’t scale with it. It is as if just the center expanded. That is actually exactly what has happened here.

In ActionScript you can scale an image just like this using scale9grid. It is really useful when you want a custom image like this and want it to scale to content. The third image with the lines shows how this works. The image is split into 9 parts. The 4 corners never scale. The top and bottom middle only scale horizontally , and the left/right middle only scale vertically. The middle scales both ways.

So … The large image is actually, the same image repeated 9 times, all placed next to each other to achieve this effect. The corners are easy, they are just CSS background images that never scale. The rest are HTML  elements (wrapper) that are set to the correct size, and have an IMG inside (like this <p><img src=”this.jpg”></p>) that is scaled to fit. This is all done because you can not scale a background image. (Lame I know)

When you scale an IMG, it scales the entire image to fit the set dimensions, but we only want to show part of it, like just the left middle side, or just the middle portion. Because of this, we scale the IMG to be big enough so that the part we need is the correct size, then that wrapper element acts to crop it so we only see the part we need. This is done by setting the wrapper overflow to hidden.

Working demo

Anyways, as of now, this was done by hand, but I think I could make a PHP or javascript thing to automatically do this.

It is ugly but the HTML ends up looking like this: (dont copy this, the ” are all messed up)

<div id="scale9grid">

	<p class="tl"></p>
	<p class="tm">
		<img src="leftWindow.png"/>
	</p>
	<p class="tr"></p>

	<p class="ml">
		<img src="leftWindow.png" />
	</p>
	<p class="mm">
		<img src="leftWindow.png" />
	</p>
	<p class="mr">
		<img src="leftWindow.png" />
	</p>

	<p class="bl"></p>
	<p class="bm">
		<img src="leftWindow.png" />
	</p>
	<p class="br"></p>

</div>

Difference engines

So something that I have wanted to put into bildrCode since the start is something called a difference engine. A difference engine takes two files and shows you the difference between them. The really nice thing about implementing something like this into a wiki or bildrCode is that you can quickly see what changes were made in whatever version. See on the right, anything added to the file is highlighted in green, while anything subtracted is crossed out in red.

Early on, I decided to use the one that wikipedia uses. It is free and open source so why not. Ill tell you why not. It is a series of classes and files, and NO documentation at all. The best I could get was to output the differences alone, but out of context. (none of the text that was common between the files)

So how did I do this? PEAR, a class library for PHP has one it turns out. So I just had to get PEAR (already done I found out) setup, and send it what it needed.

Anyone who is reading this because they couldn’t get PEAR’s Text_Diff working… It wants 2 arrays, not strings. In the documentation it has it reading 2 files. I wanted to compare 2 blobs from the database. So you need a way to take those and send it to Text_Diff in a way it wants.

The example from PEAR’s site used “file” to read the files. Checking the docs for PHP’s “file” shows that it reads a file, and splits it into an array using the end of line as the split marker. EG a 10 line long text thing, will be split into a 10 element array (each line in its own part of the array) [0] = first line, [1] – second line etc.

So we need to do the same thing with our blob of text stored in the DB. So after getting both of them (new and old), you want to do a explode on them (separately ) based on the end of a line. First you want to clean all the end of line characters because they come in so many flavors. (\r\n, \n, \r). So we do a simple preg replace to find all 3 of those and replace them with just “\n”s. This way we can split up the text on “\n” and not wonder if it worked.

$current_file = preg_replace('/\r\n|\r/', "\n", $files['code']);
$old_file = preg_replace('/\r\n|\r/', "\n", $files['old_code']);

$current_file = explode("\n", $current_file);
$old_file = explode("\n", $old_file);

So now you have 2 ready-to-go Arrays to work with. No you just need to place them into Text_Diff and it will do the rest.

$diff = new Text_Diff($current_file, $old_file);
$renderer = new Text_Diff_Renderer_inline();

echo $renderer->render($diff);

That’s it. But if you have any questions about this, or need a full working version (wont help you install PEAR though) email me.

the front end

This is a real embedded front end (very alpha) of bildrCode.
Click away.

This is placed inside mooshell for now – But will not need to be later on.

Videos Videos Videos

So a few days ago I promised video(s). And I have them now. But I had them on Thursday too. I uploaded the videos, and nothing happened. They never finished doing their thing on Vimeo.

I went to NYC for the weekend and got to hang out with my friends / cousins.  - AND for the first time in as long as I remember, I left my computer at home. Yeah, I can’t believe it either.

So I just put them back up.

If you watch any of them. Watch the one on Tags. The others are things you have seen before – on other sites that is. The Tags one (#3), I doubt you have. Im pretty sure Im on to something with this. – Seems to work really well.

The only thing holding me back is me.

Seriously, I need an entourage. Just some people who can answer questions, or at least point me in the right direction. Actually I need a mySQL cookbook. (quick search on amazon – found one MySQL Cookbook)

Reasoning? I have a ton of ideas, and I want to create usable proofs so I can prove their worth. But sometimes, the longest part of building it is finding out some small part needed to make it happen.

I haven’t posted in 7 days, but do not think that is because I haven’t been working. On the contrary. I haven’t posted because I have too much to talk about. A few things I have been thinking about, other that I though about a long time ago, and other that I have been working on. So what I want to tell you about,  but will hold off for more time are:

• ajax comment system I made
• Hands, do we really need them? (web usability)
• How to really help people with their papers about fiction writing
• My bread crumb system
• Libraries of the 21st century, and how to get around the licensing issue.
• Nice tag system Im working on.

So, I know it is a lot, and we shall see what I actual talk about in the future. But… Ill post a video on at least one of them in the next few days.

77 in 365

Today is the one year anniversary of my development blog, and my 77th post.

It is so strange that it has only been a year because I have done so much.

In the past year I:

• Redesigned Wikipedia
• Came up the idea for bildr
• built an SVN like system called bildrCode
• Closed RISDpedia
• Got married
• Graduated from RISD
• Got a Job
• Interviewed with FaceBook
• Went to Palo Alto – thanks facebook
• Bought a car
• Relearned to drive
• Designed Foode
• Met Bill Buxton
• Read a lot of books
• Read my first fiction novel in like 10 years
• Went to Europe for my first time
• Meet my niece
• Built and Prototyped a dimmer for Zack
• Learned to make some pretty nice infoGraphics
• Perfected the letterpress look
• Designed my wedding invitations with ben
• Moved to a new bigger apartment
• Started selling off my art collection – pay of loans
• Learned the arduino system and language
• Spent too much at SparkFun
• Learned Mootools pretty well
• Used a ton of sensors
• Built a wireless RFID reader
• Applied to Grad School
• Got Denied from Grad School
• Built a new website for my portfolio
• Started this blog
• Made a ton of videos
• Learned to do some pretty good voice overs
• Taught actionScript basics to a class in just 4 hours
• Built new collection system for my Art forum
• Learned a lot more SQL
• Made a pretty nifty flickr viewer
• Redesigned Tellart’s Website
• Made a game for kids that measured their speed
• Built an RFID radio jukebox
• Went to the presidential Inauguration
• Got the Flu – Type A
• Worked a lot on a multitouch system
• Worked a ton with high-power LEDs
• Learned to SMD solder
• Worked with more than a few touch sensors

Wow… good year

The wildfire that is the web

This may look like a repeat post. But it is not. Something happened. Since I posted things with bildr got out of hand. Someone at Make Magazine posted the video on their front page, then tweeted about. From that others picked up on it and 2,800 views later… here I am.

Over 70 people emaild me about the project, and I responded to every one. I was so sick of email at the end of the day, I couldn’t come here to post anyting about it.

So there is a crud ton of pressure to get this off the ground. And luckily most of the 870 people contacted about helping out. Some wanted to make money, or hock their products. But most loved the idea and felt compelled to help out.

So now I have a ton of work to do, and Im feeling the pressure. I think I just need to take a deep breath and get to work.

So you know on your favorite social site, the time posted is always like 2 seconds ago, 3months ago. I really like this because it is friendly and less mechanical feeling. It is also nice because no math is needed, and it really is the way people talk about time. “I got married about 2 weeks ago”

So I wanted to make a function that did just this really quickly. So without further ado…
I used SQL to do the calc because… (see below)

function funTime($timeStamp){

	$sql = 'SELECT TIME_TO_SEC(TIMEDIFF(NOW(), "'.$timeStamp.'")) AS ago';
	$query = mysql_query($sql);
	$return = mysql_fetch_assoc($query);

	$timeDiff = $return['ago'];

	if($timeDiff < 60){
		return $timeDiff.' seconds ago';
	}else if($timeDiff < 3600){
		return floor($timeDiff / 60).' minutes ago';
	}else if($timeDiff < 86400){
		return floor($timeDiff / 3600).' hours ago';
	}else if($timeDiff < 2635200){
		return floor($timeDiff / 86400).' days ago';
	}else{
		return floor($timeDiff / 2635200).' months ago';
	}

}

You can do this easily outside of a function by just replacing timestamp with a time record in the database. like so…

SELECT TIME_TO_SEC(TIMEDIFF(NOW(), timeStamp)) AS ago FROM table WHERE table.record_id=1