Spot the web RSS 2.0
# Tuesday, January 08, 2008

1. Web Developer Toolbar

The must have tool for any web developer.
Download Web Developer Toolbar

2. Firebug

Another must have extension for any developer. View, edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Download Firebug

3. View Source Chart

Draws a color coded chart of a web page’s source code and includes automatic indentation to make source code easier to read.
Download Source Chart

4. HTML Validator

Adds HTML validation to the view page source of the browser.
Download HTML Validator

5. SEO Quake

Quick view of site parameters in the search engine results pages
Download SEO Quake

6. ColorZilla

This extension adds a small eyedropper tool to the bottom left of the status bar which when clicked upon allows you to hover over any part of a web page to view the colour that is being used.
Download ColorZilla

7. Colour Contrast Analyser

A nice accessibility extension to check whether there is sufficient contrast between foreground and background colours of a web page.
Download Colour Contrast Analyser

8. Foxmarks

The Foxmarks Bookmark Synchronizer automatically synchronizes your bookmarks between two or more computers running Firefox.
Download Foxmarks

9. Adblock

Not so much a development tool but useful nonetheless. This extension allows you to block adverts within web pages easily and effectively.
Download Adblock

10. Dust Me Selectors

Dust-Me Selectors is a Firefox extension that finds unused CSS selectors.
Download Dust Me Selectors

Tuesday, January 08, 2008 1:13:34 PM (Jerusalem Standard Time, UTC+02:00)  #    Comments [0] - Trackback
Design | Web 2.0 | Web Design
# 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
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