Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Entries from November 2007

Ingrid: A Server-Side Table Widget for jQuery

Posted by Don Albrecht

ingrid Ingrid is a wonderfully feature rich Table Widget built in jQuery.

Features

  • Row striping (complex patterns supported)
  • Sorting (Server Side)
  • Column resizing
  • Row & Column Styling
  • Beautiful default design

Ingrid’s biggest strength & biggest weakness is its focus on server side data manipulation. In a world where table widgets that support page views of data are less & less common, this is a welcome surprise. It’s also a weakness and overkill for small data sets. Over all, it’s a handy table widget to add to your toolkit.

http://www.reconstrukt.com/ingrid/

SkyBytejs: A Prototype Based Library for Rich User Interaction

Posted by Don Albrecht

skybyte SkyByte is an interesting, lightweight library that was originally designed to help facilitate WYSIWYG CMS creation.

Key Features:

  • Resizable Elements
  • Drag & Drop
  • Editor (in development)

SyByte is a wonderful library for adding the ability to manipulate & scale Elements. While it’s uses are limited at this time, hopefully when combined with an editor, this will become a robust WYSIWYG solution for CMS development.

Check it out online here:

http://www.skybyte.net/scripts/ 

A Closer Look at the Blueprint .6 plugins

Posted by Don Albrecht

On top of yesterdays release of the silksprite plugin.  There are already 3 plugins included in the default blueprint download that are quite useful.  This will be a closer look at using these plugins and will hopefully inspire you to create & deploy plugins in your future projects.

Buttons 

Blueprint Buttons

buttons styles <button /> & <a/> elements of type button.  Into a more polished, cross browser web 2.0 look.  It also handles hover states.

Of note, the button plugin provides 2 “modifier” classes of type positive & negative which provide the green & red appearance.   Although the icons shown in the sample are included with the button plugin, they aren’t handled by CSS.

Fancy-Type

Fancy Type provides significant, baseline compatible classes to improve the polish of your blueprint layouts. The provided classes include

  • p + p indentation instead of line shifts for sibling paragraphs
  • .alt a fancy, italic script to call attention to ampersands, prepositions etc.
  • .dquo Fancy quotation marks for the start of titles & lines
  • .incr Reduced font & line size for sidebars & similar that complies with baseline
  • .caps Special, small-caps class.

CSS-Classes

A collection of utility classes to help with formatting.

  • .hide
  • .left (float left)
  • .right (float right)
  • .reset-margin
  • .reset-padding
  • .reset (reset both padding & margin)
  • .align-left
  • .align-right
  • .align-center
  • .align-justify

All of these plugins can be included in your project simply by adding the line

@import ‘plugins/(plugin file)/(plugin css file)’;

to screen.css

Announcing SilkSprite: A CSS Sprite Plugin for Blueprint

Posted by Don Albrecht

Today, I’m proud to announce the release of SilkSprite a CSS Sprite plugin for Blueprint based on the widely used Silk Icons.

Benefits

  • 1000 icons compressed into 1 file
  • Entire Plugin is only 3 files
  • Easy to use

Usage

    • Place this directory inside blueprint/plugins
    • Add this line to “blueprint/screen.css”,
      • @import ‘plugins/silksprite/sprite.css’;
    • Use the sprites by attaching classes ss_sprite & ss_(name of sprite) to an a, span or div element. You can use test.htm as a key to the names of sprites.
    • example:
      <span class="ss_sprite
      ss_add"> </span><br />

    Credit

    Check it out online here:

    http://www.ajaxbestiary.com/Labs/SilkSprite/

    SmartClient is going Open Source

    Posted by Don Albrecht

    smartclient The SmartClient library is based on databinding & presentation widgets (Similar to Spry).  And is being released as an OpenSource LGPL product. 

    The LGPL Version is feature complete for client side development but lacks the presentation server & visual IDE included in the full premium version.

    Check it out online  here:

    http://www.smartclient.com/product/download.jsp

    Prototype 1.6 & Scriptaculous 1.8 Have Landed

    Posted by Don Albrecht

    Prototype 1.6 has landed and is available here Prototype 1.6 final

    Scriptaculous 1.8 (based on prototype 1.6) is available here script.aculo.us 1.8 final

    Both releases help to dramatically simplify the task of writing AJAX applications.

    Plugins, CSS Frameworks And How I Came to Drink The Koolaid

    Posted by Don Albrecht

    When I first started using CSS frameworks & standardized resets to streamline my web development, I adopted a process that I’m sure is familiar to many of you.  I would first link to the frameworks CSS files and then link to a project specific stylesheet.  The project specific stylesheet would build on the frameworks foundation to provide color & background data, special classes and all the other bits and bobs unique to the design.

    For me, this system worked quite well.  I gained the benefit of the frameworks without excessive overhead and while I was no longer coding my CSS from the ground up, the process was surprisingly smooth.  When I first heard about plugins, I really didn’t see the point of adopting them.  They seemed an arbitrary way to include functionality that really belonged in the project stylesheet.  A recent project, however, completely changed my mind.  I was working with a client on a site that required support for several different templates (holiday sale, investor relations, technical support, etc).  While many of these sections employed radically different looks, they needed to be consistent in terms of typography, form elements, tooltips, etc.  They also needed support for seasonal theming as much of their marketing was holiday & special event oriented.

    Suddenly, the plugins systems made sense.  I built a single plugin for all site wide styling and a second plugin to allow for seasonal color schemes (simply upload a different folder to the same location and you can change the colorscheme site wide).  Once I realized the power of plugins for complex projects, the realm of uses has exploded for me.

    Where I use CSS plugins:

    • Site specific typography & branding
    • Common form elements (error, required field, etc)
    • turn on and off debugging styles (great for troubleshooting)
    • My personal CSS widget toolkit ( pullquotes, notes, etc.)
    • Custom Grid (Instead of replacing grid.css in blueprint, I may deploy a new grid as a plugin during development)
    • CSS Sprites

    Plugins are currently supported by Tripoli & Blueprint.

    I’m curious who here has started working with plugins or some other formal, modular system for CSS.

    jQuery Scroll Show, A Scrolling Photo Gallery Plugin

    Posted by Don Albrecht

    scrollshow ScrollShow is a unique photo gallery implementation that uses scrolling to display the items.  It’s similar to a carousel implementation, but simpler and more flexible.

    Check it out here:

    http://flesler.blogspot.com/search/label/jQuery.ScrollShow

    Namespaces & Why You Should Use Them

    Posted by Don Albrecht

    If you don’t already know about Namespaces, Here’s a quick primer.

    A namespace is a unique identifier for a particular library or collection of objects.  Namespaces are used to prevent conflicts between various libraries and to simplify debugging.

    Traditionally Namespaces are defined using the unique name of a given project or library followed by a subsequent functional grouping i.e. (Yahoo.Util).  There is also a tradition from the Java community of defining namespaces & packages using reverse URL notation i.e. (com.ajaxbestiary.libraryname)  I’ve found this notation to be too cumbersome for most Ajax projects.

    Abbreviating Namespaces 

    Some developers prefer to abbreviate namespaces using a shorthand variable notation ie (var yu = Yahoo.Util).  This technique should be used quite carefully as it can lead to conflicts and confusion in multi-library & multi-person development.  My recommendation is that any abbreviations be standardized upon across all development within an organization.

    Over the next few days I will be exploring the use of namespaces in common Ajax toolkits.

    Rocket GWT releases .38

    Posted by Don Albrecht

    For those of you who don’t know, Rocket GWT is an excellent library for use with the Google Web Toolkit.  It provides a dramatically expanded widget library as well as Drag & Drop and Enhanced Event support.

    Today marks the .38 maintainence release.  I encourage anyone using this framework in the projects to upgrade for the performance enhancements alone.

    Find out more about the release here:

    http://rocket-gwt.blogspot.com/2007/11/rocket-038-release-mostly-assortment-of.html