Jacob Steringa

CSS layout gets smarter with calc()

Thu, 03 May 2012 09:22:39 -0400

Didn’t even know about this feature, but it’s brilliant. A quick idea of what you can do:
#bar { height: calc(10em + 3px); } 
And regarding current support:

The calc() property for lengths is available now in Chrome 19 (Dev channel build) by use of the ‘-webkit-calc’ property, in Firefox since version 8 using the ‘-moz-calc’ property and in Internet Explorer since version 9 unprefixed.

9-bits: Verge forum user, Sputnik8, has posted a series of...

Fri, 30 Mar 2012 08:45:05 -0400

9-bits:

Verge forum user, Sputnik8, has posted a series of gorgeous UI concepts showing a Metro-inspired Windows desktop. I’d be reaching out to this guy in a heartbeat if I were Microsoft.

If only Microsoft took this approach, I like it a lot more then Microsofts own Metro interface

Content-type mapping with Lithium

Wed, 04 Jan 2012 16:25:00 -0500

Recently I started experimenting with Lithium, an awesome PHP framework. I really like it’s style, as it uses many new features of PHP 5.3 which really can make your code a lot leaner.

I wanted to return JSON in some occasions and Lithium has a neat feature on collections where you can call ->to(‘json’) on an result set. It works out of the box, but there is a problem with the formatting of the JSON. It looks like this:

{"1":{"id":"1","family_id":"2","family_position":"0","na....},{"id":"2","fami....}}

As you see, it is an object with objects in it. The desired result in my case is an array of objects, like this:

[{"id":"1","family_id":"2","family_position":"0","na....},{"id":"2","fami....}]

I started looking around the interwebs to find a solution. But I didn’t find a satisfying answer in the Li3 manual, so I started to browse the API docs. The docs for the Media class, the class responsible for almost everything what has to do with content-types, gave me the answer right away.

Within the file config/bootstrap/media.php you can declare custom content-types and assign custom handlers. With that knowledge things got really easy. I knew that I could get the desired result if I manually altered the results in the controller, but that doesn’t really adhere to the DRY principle. Declaring my own handler for the JSON format was the solution.

Media::type('json', 'application/json', array(
	'encode' => function($data) {
		$result = array();
		
		foreach($data as $object) {
			$result[] = $object;
		}
		
		return json_encode($result);
	}
));

This small snippet fixed my problem! I can now render JSON like this:

$this->render(array('json' => Projects::all()));

The cool thing about this feature is that it works for many more content-types, for instance csv, like in the example in the Li3 API docs.

The el property in Backbone.js and events

Tue, 20 Dec 2011 17:49:00 -0500

Today I found myself struggling with Backbone.js events. In this particular case I wanted a span element with the class use to point to a router url. That shouldn’t be that hard to do, but I couldn’t get it to work.

After a while I realized that I overwrote the el property with the template I used instead of adding it to the el property.

render : function() {
	this.el = this.template( this.model.toJSON() );
	return this;
},

When I added the the template to the el property instead of making it the element, all of the sudden it worked.

render : function() {
	$( this.el ).html( this.template( this.model.toJSON() ) );
	return this;
},

Lesson learned: do not overwrite the el property in your render method!