Fancy Checkbox and Radio Button
If you are a web designer, you should have a look at FancyForm, a Javascript library to replace your checkbox and radio button on your web page.
The advantages are you need only two lines of markup to make it works, you can customize the look, and the web page still works on the older browser. It is free to use, but a link to FancyForm web site would be appreciated.
Click here for the demo.
Implementing a Syntax-Higlighting JavaScript editor in JavaScript
If you are interested in implementing a Javascript editor, have a look at Marijn Haverbeke’s Javascript editor. The editor run in a web browser (using Javascript itself!) and its features include Javascript syntax-highlighting and auto indent.
Marijn also includes implementation notes that explains insights, implementation challenges of cross-browser support, and cool programming techniques.
The code is released under BSD-like license.
Add Notes to Your Prototypes
Protonotes are notes you add to your prototype (or any document) on the web so you can discuss the design, requirement, etc. with your team members. It is another way to collaborate with people and it can be used to supplement email, wiki, and online-based project management / discussion board.
What is great about Protonotes? It is free and you don’t need to install anything on your machine. It can run on various browsers for read-only viewers, however, you need an IE browser for the admin work (why?).
Online Accessibility Testing Tool
GrayBit is an online accessibility testing tool designed to convert a full-color web page into its grayscale equivalent to help you to choose a better contrast combination.
Relying on colors to determine page visibility and contrast can be misleading. Converting the colors to their grayscale equivalents is a more reliable method. By removing color’s influence, you’ll better find true visual contrast… GrayBit makes it possible.
What If Microsoft Made iPhone
What if Microsoft made iPhone? This video is hilarious.
Web 2.0 in Video
Web 2.0 is defined in the first O’Reilly Media Web 2.0 conference in 2004 and has since become widely adopted. According to Tim O’Reilly:
Web 2.0 is the business revolution in the computer industry caused by the move to the internet as platform, and an attempt to understand the rules for success on that new platform.
I came across this video from YouTube and I thought it is a quite nice attempt in explaining what Web 2.0 is.
Enjoy!
Create Drawing and Diagram Using Javascript
Open-jACOB Draw 2D is a nice attempt to create drawing and diagram (ala Visio) using a standard web browser. You don’t need third party library or additional software installed - it just works.
This library can be used in your application as embedded workflow editor. It is under a LGPL license.
Download Open-jACOB Draw 2D version 0.9.2 here.
Fancy Menu
Guillermo Rauch has come out with combination of CSS and Javascript to create fancy menu with a nice effect. Move the mouse over the menu link and have the element served as background animated following the mouse over.
The Fancy Menu needs Mootools library and it is cross-browser (tested on Internet Explorer 6/7, Firefox and Safari).
Download Fancy Menu here.
Check Web Site Technology
Sometimes you are wondering what technology some web sites uses. Take a look at BuiltWith.com, a web site profiler tool. You can enter any web page address and BuiltWith will return all the technologies it can find on a page.
BuiltWith technology tracking includes widgets (snap preview), analytics (Google, Nielsen), frameworks (.NET, Java), publishing (WordPress, Blogger), advertising (DoubleClick, AdSense), CDNs (Amazon S3, Limelight), standards (XHTML,RSS), hosting software (Apache, IIS, CentOS, Debian).
I am quite impressed with the result returned by BuiltWith. From some web sites I checked, BuiltWith can detect the following technologies without fail.
- Analytics and Tracking: HitTail, Site Meter, ClickTale, MyBlogLog
- Javascript Libraries: Prototype
- Advertising: Google Adsense, Kontera
- Payment Services: Paypal
- PHP framework: CakePHP framework
- Ruby: Ruby on Rails, Mongrel
How to Compress Your Javascript Files
Julien Lecomte has come out with a Javascript compressor. As quoted in his blog, its aim is to create a compressor that is as safe as JSMin and has better compression than the Dojo compressor.
What is the YUI Compressor?
The YUI Compressor is a new JavaScript minifier. Its level of compaction is higher than the Dojo compressor, and it is as safe as JSMin. Tests on the YUI library have shown savings of about 18% compared to JSMin and 10% compared to the Dojo compressor (these respectively become 10% and 5% after HTTP compression)
How does it work?
The YUI Compressor is written in Java (requires Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate (in the face of evil features such as eval or with, the YUI Compressor takes a defensive approach by not obfuscating any of the scopes containing the evil statement). The YUI Compressor is open-source, so don’t hesitate to look at the code to understand exactly how it works.
Download YUI Compressor 1.0 here.
