Monday, November 28, 2011

CSS available in IE8 and above

Generated content (:before, :after)





  • Cleaner markup

  • Easier changes

  • Supports images, counters, and strings


Demo



Display inline-block





  • Vertical align columns

  • No clearing floats


Demo



Display Table





  • vertically align multiple lines of text

  • equal height columns that expand to content


Demo

Monday, November 21, 2011

Dart!

In October, Google released a new open source programming language for the web, Dart. It's meant to offer better performance, managability, & scalability over javascript for large web apps (think GMail or Google Docs).

- Dart allows for classes, interfaces, and looks familiar to anyone with experience in java, C#, or other object oriented languages.

- It can run in a VM, or be compiled as a javascript that will run in "modern browsers" (so far, Chrome, Safari 5+, and Firefox 4+).

- Has it's own IDE, Dart Editor (similar to Eclipse). Code completion, pointers to open declarations, class, method, and field outlining (see the Dart Editor Tutorial for screenshots).

I compiled some sample apps to give an idea of what it can do with HTML5 canvas:

Clock

Spirodraw

Sunflower

Here's what the sunflower class looks like.

While still in its infancy, looks like we'll be able to do some fun stuff with Dart and HTML5.

Tuesday, November 8, 2011

Static Filter with Built-in Paging

You can find 2 example implemtations of it below. They each open in a new window, and each use slightly altered versions of the plugin. As I improve upon them I'll be posting updates.



The default param values are as follows:



$('#theList').palateExpander({

'sortListId' : 'sorter',

'resultListId' : 'fourSquare',

'alphaOnLoad' : false,

'filterType' : 'omni',

'pageSize' : 20,

'topPaging' : true,

'pageStatus' : true,

'bottomPaging' : true
});

I like to think that they're fairly intuitive once you start playing with them. If you pass a filterType of "Omni" it will write a toggle drop down that allows you to search inclusively or exclusively. If you select "exclusive" (either as an embed parameter or within the dropdown) your relevant results will have to meet all selected criteria. If you select "inclusive" anything that matches on any criteria will be deemed relevant.


I did leverage a chunk of my existing static paging plugin, and integrate it with the new static filtering functionality. Some modification was necessary. In the original static paging script the paging only gets written once. In the new filtering example it needs to get written repeatedly. The only drawback -in general- to this script is that sorting gets slower the more results you have being indexed. Paging is still fairly immediate however.