Trent Richardson » CSS

Using Impress.js for a Car Bounce Video

trent — Wed, 25 Jan 2012 11:43:16 +0000

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:



    This is a test

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:



    This is a test

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

Car Bounce – Keep Up with Your Car’s Value

Make jQueryUI and Timepicker More Beautiful

trent — Mon, 23 Jan 2012 11:24:28 +0000

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!

Clientside Plugin Available for Gedit 3

trent — Thu, 15 Dec 2011 11:34:57 +0000

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!

jQuery Timepicker Addon 0.9.8 Available

trent — Wed, 07 Dec 2011 11:18:24 +0000

A new jQueryUI Timepicker Addon is now available. With this release comes many additions, including support for touch/mobile devices through integration with the sliderAccess plugin. Here is an overview list of the updates:

Fix Daylight Savings bug.
Fix and Add several localizations/translations.
Fixed getter/setter bug.
Fixed timepicker update issue with undefined “inst”.
Updated CSS and generated markup.
Added integration with sliderAccess for touch devices.

As always feel free to check out timepicker on Github. If you’re upgrading be sure to grab the new CSS, as the markup generated has been changed. Hope you enjoy!

Impromptu 3.2 Gets Quick Update

trent — Fri, 04 Nov 2011 11:20:29 +0000

If you recently downloaded Impromptu 3.2, you may want to grab it again. A small bug was fixed. I didn’t find it worth while to create a new version, it was a line of code. On top of that the bug was merely a visual detail, and not critical. Long story short the overlay always stopped a few pixels short of the bottom of the document. Thanks to the users for catching this! Enjoy!

jQuery Impromptu Download and Docuentation

Updated Lint for Clientside

trent — Fri, 23 Sep 2011 11:04:53 +0000

For those fans of Gedit and Clientside plugin it is time for you to update! The plugin now has updated versions of CSSLint, JSLint, and JSBeautify.

As you may know Clientside Plugin provides several utilities to Gedit for working with CSS and Javascript, including minifying, formatting, and error checking/lint. Also as a bonus it can batch minify multiple css or javascript files. Where it really comes in handy is formatting old code from yesteryear, when the developer had no coding style at all.

Adding Tooltip to Timepicker Sliders

trent — Wed, 31 Aug 2011 11:24:02 +0000

I had a timepicker user ask recently about adding a tooltip to the timepicker’s sliders. Well I thought that may be a nice topic to touch on, as it can be a bit tricky, and potentially a bit of a hack. I opted to show you a quick hack solution instead of a detailed integrated solution as I figure it be clearer. I used the fancy qTip2 library for the tooltips here, but I figure most any library would work equally the same.

Lets dive right in. We first need to know when and how to access our sliders. This can be tricky and where I mentioned above I could provide a more integrated solution, but for most uses this hack would be the most clear cut way as it simply uses the beforeShow event of datepicker. Timepicker adds a third option to this event which is a timepicker instance:

beforeShow(input, dp_inst, tp_inst){ /*...*/ }

Now the only problem here is that even though there is a timepicker instance, it has not yet generated any html (neither has datepicker), so you will notice a timeout, which allows a second for this to occur. Once the timeout occurs you will notice some pretty straight forward code: Grab the sliders (and handles), add tooltips to the handles, and update the tooltip text on the slide event.

Now lets take a look at the entire solution:

$(document).ready(function() {

	$('#datepicker1').datetimepicker({
		stepHour: 1,
		stepMinute: 1,
		beforeShow: function(input, dp_inst, tp_inst){
			setTimeout(function(){

				var $sliders = $().add(tp_inst.hour_slider).add(tp_inst.minute_slider);

				$sliders.each(function(i, obj){
					var $t = $(this);
					var handle = $('.ui-slider-handle', $t);

					handle.qtip({
						content: '' + parseInt($t.slider('option', 'value'), 10),
						position: {
							my: 'bottom center',
							at: 'top center',
							container: handle
						},
						show: {
							delay: 100
						},
						style: {
							classes: 'ui-tooltip-slider',
							widget: true
						}
					});

					$t.bind("slide", function(event, ui){
						var val = $t.slider('option', 'value');
						handle.qtip('option', 'content.text', '' + parseInt(val,10) );
					});
				}); // end each

			}, 10); // must give datepicker a second to create itself as it has not done so at this point
		}
	});

});

I did notice a performance issue with my stepHour, stepMinute, so I had to adjust those to 1 as the event for slide was firing too much. That’s all! A quick tooltip solution to jQuery Timepicker Addon sliders! Enjoy!

Clientside Discussion

trent — Thu, 30 Jun 2011 11:53:43 +0000

I keep seeing mention of a few “preprocessors” for javascript and css, including CoffeeScript, Sass, and Less. I personally don’t see the need in these tools, but apparently they are all the rave at the moment. Essentially what these do is allow you to write in a more functional language/script, and compiles it down to cross browser css or javascript. I have a few questions of my own, specifically how the work with existing frameworks like jQuery or Mootools (accessing objects from the Coffee side). If anyone has any input on this or experience please share.

The main topic of this post however concerns the Gedit Clientside Plugin. It appears it would be possible to easily integrate CoffeeScript and Less into Clientside, since they both work well with node.js. One user suggested before adding support for Sass, however that seems to be more geared toward Ruby. The question is would this be a valuable/used component if added to the Clientside plugin? This plugin is geared towards helping manipulate, format, and debug clientside languages, and these do fall into this category, but I don’t want to begin cluttering the plugin with useless tools, and waist time keeping up with the latest CoffeeScript and Less plugins.

On another potential change to Clientside would be to consolidate the menu. Instead of having separate JS and CSS items for minify, format, lint, and batch minify, there could be one menu item for each, and depending on the document type process it accordingly. So considering this change, we could add one more menu item called “Compile: Coffee/Less”. I look forward to hearing your thoughts!

Gedit Clientside Now with CSSLint

trent — Wed, 29 Jun 2011 11:39:25 +0000

It only feels right to include a lint method for CSS since javascript has had support in the Gedit Clientside Plugin from the beginning. The latest commit over on Github now includes CSSLint through the nodejs hookup. Don’t worry, if you had it working before all you need to do is update your plugin.

The new CSSLint functionality works the same as JS Lint, through Tools->Clientside->CSS, or through the shortcut Alt+Shift+U. If there are any errors you will see them in the bottom panel under a tab called Clientside Issues.

Now the next step is to get Clientside plugin working with Gedit 3. I know this will take a bit of reworking, but honestly I’m still using classic gnome, not Unity or Gnome3. While I would like to have a version for both, its not priority at the moment. I plan to start using either Unity or Gnome 3 with Ubuntu’s next release. I felt it was too soon for this round, and didn’t have time for a cut in productivity trying to get things straightened out.

A Few New Colors, and Some Moo

trent — Wed, 08 Jun 2011 11:41:53 +0000

I swapped out a couple dark colors here on the site for something a little lighter. I also made a transition from jQuery to Mootools, which wasn’t much of a move as syntax highlighting and an Impromptu form were the only things I had going on here. It gave me a good opportunity to have a practical use for “Moopromptu”. For the syntax highlighter I decided to go with Lighter. Lighter seems to work well, but I had to use the compatibility option with mootools. In all I think I may have reduced the total file sizes a little, but not enough to make a big difference considering the amount of traffic I receive.

I guess I should have been a designer?.. I won’t quit my day job…