TRTrent Richardson

practical web design & development

I was pretty amazed when I first saw Impress.js. It’s ability to take a very simple html page and use transformations to create a presentation phenomenal. This plays right in to the hands of developers who want to create something snazzy, but do not have the video experience to do so. It is also probably worth noting that it has likely been done before, but this is the first I’ve seen (I didn’t do much research on it, I was happy with what I saw).

Its process is simple, line up multiple container elements inside a container with id=”impress”, and supply those elements with a variety of data coordinates and scaling attributes, resulting in something like:


<div id="block1" class="step" data-x="1000" data-y="1500" data-rotate="90" data-scale="2">
    <p>This is a test</p>
</div>

Impress will take the coordinates and scale and place them on your canvas. You can also apply 3D effects too using the z for the 3rd dimension and rotate on the x and y axis:


<div class="block2" data-x="1500" data-y="2000" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
    <p>This is a test</p>
</div>

Thats all, just line up these different containers in order and Impress does the rest. Style them up a little and you have a snazzy presentation! I will leave you with simple demo I came up with for CarBounce.com

After some time the standard jQueryUI themes can get stale, boring, monotonous, and you need a fresh look. I’ve rounded up a couple very customized, non-”run of the mill” themes you should take a look at.

Absolution (Github) is a very clean theme with support for Uniform and Wijmo. Uniform, as its name indicates, styles form elements to have a uniform look, across all browsers. Drastically, improving the consistency of appearance. Wijmo is a snazzy widget collection providing both an “Open” (open source) and “Complete” (commercial) set of widgets. The developer has a few example widgets on their site showing off the look on all widgets. Another bonus is that development is handled with LESS, making it super easy to tweak. I will definitely keep this close by for future development!

A second theme worth a look is Aristo (Github), a port of Cappuccino. It has a bit more of an OSX look, but still a very clean, beautiful theme. An example of all widgets are included on the developer’s site.

Just looking over the Absolution I am impressed with how LESS makes this look so more portable and themable than if only the CSS were provided. I definitely need to get up to speed on using LESS and the compiler. Better keep an eye out for integration on an upcoming project ;)

Both of these themes appear to work very well with Timepicker as well as the SliderAccess plugin, and are a nice compliment to most any jQueryUI based project! I’m still on the hunt for more quality custom jQueryUI themes for projects, so if you know of any please post them!

A while back I discussed how to use the new sqlsrv extension for php to retrieve multiple result sets at a time from stored proceedures. This was indeed helpful when you need to retrieve related data and avoid multiple calls to stored proceedures. The down side is this was using a rather expensive (but good) database engine. Also, until recently, there was absolutely no support for the sqlsrv php extension on unix based servers. How can the open source world tap into such functionality?

PostgreSQL has the ability to return multiple cursors to result sets. Using this we can achieve the same effect with php with a little magic. Lets take a look at a simple function which returns three queries by way of refcursor type. Also not that I said “function”, not “procedure”, but never fear, 6 of one, half dozen of the other as far as this topic goes:


CREATE OR REPLACE FUNCTION test_get_users(userID integer) RETURNS SETOF refcursor AS $$

	DECLARE
		ref1 refcursor;
		ref2 refcursor;
		ref3 refcursor;
	BEGIN

	OPEN ref1 FOR
		SELECT id, name, email FROM users;
	RETURN NEXT ref1;

	OPEN ref2 FOR
		SELECT id FROM users WHERE is_active=1;
	RETURN next ref2;

	OPEN ref3 FOR
		SELECT * FROM users WHERE id = userID;
	RETURN next ref3;

	RETURN;

END;
$$ LANGUAGE plpgsql;

Read the rest of this entry »

Finally, UberUploadCropper gets a much needed update. First off, flash is gone. Now you can upload and crop with just javascript and your serverside language of choice. What is UberUploadCropper? It is a jQuery plugin which pulls together jCrop, Impromptu, and FileUploader plugins into one uniform unit to upload and crop images.

The latest version can be found with all it’s glory on Github, along with 2 examples. The examples provide a very basic, upload and crop routine. The second, a much more advanced example, demonstrates how to handle large images efficiently. Both examples should be fairly easy to merge into your own projects. Here is a video of version 1 of UberUploadCropper in action. I will provide a newer video shortly:

This plugin uses these three fantastic plugins:

The plugins mostly differ in using ajax upload instead of Uploadify. So all options which use to target Uploadify have been removed and replaced with the corresponding FileUploader options. The examples are commented and should be pretty clear cut. Enjoy!

UberUploadCropper on Github

The Gedit Clientside plugin is now available for Gedit 3. All the features remained the same, just some minor tweaks throughout. You can still find both Gedit versions of the plugin on Github:

I moved the old Gedit 2 version to a separate branch on Github, so both versions of the project are still available.

If you’re unfamiliar with the Clientside plugin you just found a real gem. The plugin bundles together functionality to minify, format, batch minify, and run a lint service on both Javascript and CSS. Hope you enjoy!