Spot the web RSS 2.0
# Sunday, January 06, 2008

JavaScript Libraries in particular have grown immensely in popularity, and the article continues to be a great resource. However, it was apparent from how the Web development community responded, that there was a single missing component. Designers and developers wanted an at-a-glance comparison chart. I considered how to go about researching and writing such a comparison, and shortly thereafter, I was contacted by Cody Lindley. He let me know that he'd been working on such a chart. Here is that chart.

  DOM Assistant 2.5 YUI 2.4.1 jQuery 1.2 Dojo 1.0 Prototype 1.6 EXT 2.0 Mootools 1.11
1
Official (complete!) documentation (API found on domain)
2
Official off-line documentation (off-line API found on domain, included in download, and managed by Dev. team)
3
Real code, with working live examples included in the API (not just demo's/tutorials out side of the API)
4
An official manual/book, not an API, not tutorials, but a manual/book online or hardcopy
5
Official real world demos included in download
6
Modular by design (one file by design, or multiple)
7
File size (KB) not minified, obfuscated, or gzip (? = depends upon what you include)
41.4 29 - ? 77.4 219 - ? 121 29 - ? 9k - ?
8
Official minified version (removing just comments and spaces)

6 - ?

44.6

7 - ?
9
Official packed/obfuscated version

21

26.2

50 - ?
10
Official hosted minified version with gzip (free, unlimited)
11
Official widgets/UI toolkit
12
SVN/CVS access
13
Unit tested
14
Public unit testing
15
Open development
16
100% Funded development (paid, full-time developers, only focus)
17
Official forum
18
Official Mailing list
19
Commercial support and training
  DOM Assistant YUI 2.4.1 jQuery 1.2 Dojo 1.0 Prototype 1.6 EXT 2.0 Mootools 1.11
20
Official plug-in architecture (was the base code designed and documented (documentation key) to facilitate open plug-in development by the community) Similar to modular, but with a different intent.
21
License type
GNU BSD GPL / MIT AFL / BSD MIT LGPL MIT
22
Free for Commercial use
 
Official support for Safari 1.3+
 
Official support for Safari 2+
 
Official suppor for Safari 3+
 
Official support for Opera 8+ Mac/Win
 
Official support for Opera 9+ Mac/Win
 
Official support for Firefox Mac/Win 1.5+
 
Official support for Firefox Mac/Win 2.0+
 
Official support for IE 7
 
Official support for IE 6
 
Official support for IE 5.5
 
Official support for IE 5.0

There are several factors to consider when compiling the necessary information for this comparison. The first, and most important, is terminology. Even though there are numerous features and functionalities for each JavaScript library that are similar, they do not always fit neatly into predetermined headings. It remains imperative that each library feature be weighted while keeping this in mind, and when appropriate, read the full description that accompanies each heading. This is a fantastic starting point for your own research and analysis.

Although the groundwork has been laid, another factor to consider is that there is still the effort to maintain an accurate comparison. Remember, this is a living document, and you should use the chart whenever you begin a new project that requires a library. After listening to developers who have used these libraries, we intend to make updates, modifications, and maybe even a major overhaul. The intent is to facilitate discussion, and to be the primary (most accurate) resource for determining which framework is right for you, and right for the task you need to accomplish.

Before the initial release, several of the programmers who are responsible for the creation of these libraries were contacted, and their opinions will always be taken into consideration. This helps us to maintain a balanced, unbiased opinion. The number of options available to developers today can be daunting, and helping you to choose the right tool should be done without any preconceived notions on our part. We will not always be able to guarantee that each of the creators of these libraries agree on our comparison criteria, but we will always take the steps necessary to listen and cooperate.

The final consideration is determining which libraries to include for comparison. This is a little easier to determine, since the decision is driven from a set of closed questions. Is the library licensed under an open-source license? Is there API documentation, and how often is it updated? How mature is the library, and how often are updates released? Is this a core library, or is it an extension/add-on/plugin to an existing library? These are not the only questions to ask, but they are a few that can help with the process of elimination.

Sunday, January 06, 2008 11:34:06 AM (Jerusalem Standard Time, UTC+02:00)  #    Comments [0] - Trackback
Javascript | Programming
# Saturday, January 05, 2008

There are numerous spots that are good for page breaks made especially for printing:

  • Between page sections (h2 or h3 tags, depending on your site format)
  • Between the end of an article and subsequent comments / trackbacks
  • Between longs blocks of content


Luckily, using page breaks in CSS is quite easy.

The CSS Code

  1. @media all  
  2. {   
  3.     .page-break { display:none; }   
  4. }   
  5.   
  6. @media print  
  7. {   
  8.     .page-break { display:blockpage-break-before:always; }   
  9. }  

The XHTML Code

  1. <DIV class=page-break></DIV>  

The Usage

  1. <H1>Page Title</H1>  
  2. <!-- content block -->  
  3. <!-- content block -->  
  4. <DIV class=page-break></DIV>  
  5. <!-- content block -->  
  6. <!-- content block -->  
  7. <DIV class=page-break></DIV>  
  8. <!-- content block -->  
  9. <!-- content -->  

		
Saturday, January 05, 2008 11:52:19 AM (Jerusalem Standard Time, UTC+02:00)  #    Comments [0] - Trackback
CSS | Web 2.0
# Friday, January 04, 2008

YAML (Yet Another Multicolumn Layout)

YAML (Yet Another Multicolumn Layout)

Dirk Jesse’s extensive (X)HTML/CSS Framework offers the whole bunch of default-templates for a number of simple or more complex web-projects. YAML is based on web standards and supports every modern web browser. All Internet Explorer’s major rendering bugs are countered. YAML fully supports all IE versions from 5.x/Win to 7.0.

Apart from a number of standard-conform layouts the framework also offers a debugging stylesheet, print stylesheet as well as various robust tools for web-development in YAML. All CSS components of the framework as well as the various layout methods are thoroughly documented in both English and German, supplemented by numerous examples.

YAML Builder

You can also use a YAML Builder to develop your layout visually - in your web-browser. You can choose a Doctype, basic layout elements (#header, #footer, …), the number of content columns as well as preferred column order and set the layout and column widths. You can also drag & drop and nest both sub-templates and dummy content, display and output the complete code (XTHML markup and CSS) and switch between draft mode and preview of the finished layout.

Blueprint

Blueprint

Blueprint

The Blueprint CSS framework, created by Norwegian tech student Olav Frihagen Bjørkøy, is a very promising foundation for developing typographic grids using CSS. The framework offers an easily customizable grid, sensible typography, a typographic baseline and a stylesheet for printing. It also uses relative font-sizes, provides a CSS reset and is supposed to be cleaned of code bloats. The latter isn’t always true.

Besides, you can also use the Blueprint Grid CSS Generator to generate more flexible versions of Blueprint’s templates. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint CSS Framework - a new “to-become-standard” in grid-based design approach.

Yahoo! UI Library CSS Foundation

Yahoo! UI Library presents a set of CSS frameworks: the core YUI CSS foundation includes the Reset CSS, Base CSS, Fonts CSS, and Grids CSS packages.

While Reset CSS removes and neutralizes the inconsistent default styling of HTML elements, Base CSS applies a consistent style foundation for common HTML elements across A-grade browsers.

Fonts CSS offers cross-browser typographical normalization and control; the framework provides consistent font sizing and line-height, supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes and works in both Quirks Mode and Standards Mode.

Grids CSS delivers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. The framework supports easy customization of the width for fixed-width layouts; it also supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. YUI also offers The YUI Grids Builder — a simple interface for Grids customization.

You should be aware that these frameworks are often criticized for bloating the code with non-semantic markup and generating too many unnecessary classes, IDs and div-containers in CSS. Yahoo! UI Library also provides a detailed documentation with numerous examples, tutorials, cheat sheets, templates and tools.

Friday, January 04, 2008 11:49:10 AM (Jerusalem Standard Time, UTC+02:00)  #    Comments [0] - Trackback
CSS | Design | Site Reviews
Navigation
Archive
<January 2008>
SunMonTueWedThuFriSat
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789
About the author/Disclaimer

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2010
Guy Levin
Sign In
Statistics
Total Posts: 63
This Year: 0
This Month: 0
This Week: 0
Comments: 14
Themes
All Content © 2010, Guy Levin