Editorial
User Interface
Constructing an effective user interface for a web application requires that you apply the right mix of a variety of technologies, including HTML, CSS, JavaScript, JavaScript libraries such as Prototype, and perhaps Flash or Flex, and use them to implement a well-thought-out interaction design that reflects the perspective of your users, not that of the developers.Web 2.0 Expo: Social Media
The conference sessions at Web 2.0 Expo had a major emphasis on social media. I only attended a couple of these talks, about which I have brief comments below; at the end of the article, I have links to several others. continue...
Articles
New Articles
from around the Web
- Redesigning For A Reason: Towards Better Conversion Rates
- TinyMCE WYSIWYG Text Editor on Rails
-
Internet Explorer and CSS issues
Good summary of the layout issues and workarounds for various versions of Internet Explorer.
-
CSS Positioning
Detailed description of how CSS positioning works.
- Javascript framework usage among top websites
- HTML Editor or Rich Text Editor for Your Ruby on Rails Apps
- The Next-Gen Web: HTML5 - Will We Ever See A Real Standard?
- Scriptaculous switch to github and Lighthouse
-
Painless JavaScript Using Prototype
A good tutorial on using Prototype (not Rails specific).
-
Prototype JavaScript framework: Introduction to Ajax
An introduction to implementing Ajax with the Prototype JavaScript framework.
- Prototype JavaScript Framework
Books
Related Books
Website Optimization: Speed, Search Engine & Conversion Rate Secrets
Discusses both technical aspects of optimization (mostly front-end), and SEO (search-engine optimization) and SEM (search-engine marketin...
List: $39.99 Amazon price: $26.39 Buy
jQuery in Action
Very easy introduction to jQuery, though a little out of date _already_ as it focuses mostly on 1.2, and 1.3 makes some important changes...
List: $39.99 Amazon price: $26.39 Buy
JavaScript: The Good Parts
Avoid the “bad parts” of Javascript and see where it shines.
List: $29.99 Amazon price: $19.79 Buy
Links
Links by Type
Documentation (17)
- Versions
Nice little utility library for managing multiple versions of libraries on the same page (jQuery in particular). - W3C DOM Compatibility Tables
Nice, up-to-date table illustrating the compatibility across many browsers with various W3C standards. - Essentials of CSS Hacking For Internet Explorer
Summary of some older Internet Explorer (IE6 and earlier) hacks - WYMeditor - web-based XHTML editor
A new alternative for WYSIWYG editors. Uses JQuery. - AJAX In Place Rich Editor: In place AJAX-powered WYSIWYG editor
Using the great libraries Prototype 1.6, Script.Aculo.Us 1.8 and TinyMCE 3.1, IPRE provide a really easy way to implement an in place AJAX-powered editor using WYSIWYG. - Internet Explorer Bugs | CSS Class
Collection of known bugs with test cases for IE including IE8 (beta and beyond). - Mozilla Developer Center
- Prototype JavaScript framework: API.Prototype API Documentation
API documentation for the Prototype JavaScript framework. - Scriptaculous home on GitHub
Scriptaculous has moved its code to Github, and the documentation will be ported in time. - Legacy Scriptaculous documentation
A static capture, sans styling of the original Scriptaculous documentation wiki, which will eventually be ported to github. - SitePoint HTML Reference
- HTML Reference
Extensive online HTML reference from the folks at SitePoint. - jQuery: The Write Less, Do More, JavaScript Library
Home page for jQuery, a full featured, light-weight Javascript library. From site: “jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.” - CSS Reference
An extensive, free online reference to CSS. - HTML 5 Draft Specification
- GotAPI
Searchable API documents for Rails, as well as for HTML, CSS, and JavaScript. - Ajax In Place Editor
Scriptaculous in-place editor widget documentation.
Events (2)
- 2008 Web 2.0 & Technology Conference Calendar
An excellent list of web-related conferences. - Future of Web Design
Dates: 11/07/07– 11/08/07
Groups (1)
- Ruby on Rails: Spinoffs
Forum for discussion of Prototype, Scriptaculous, and other Rails spinoffs.
Screencasts (3)
FAQs & Resource Lists (4)
- John's Essential Guide to CSS
A list of essential reading for people interested learning CSS. Most of the articles are from A List Apart, but the volume of articles at A List Apart can can be overwhelming to people just to getting started. Consider this a pocket guide to the best of A List Apart with a few additional links thrown in to spice it up a bit. - Nice Web Type
- Danny Goodman FAQ
- Front Page - css-discuss
Great set of resources for learning the peculiarities of CSS.
Software (25)
- jRails -- jQuery on Rails
jRails is a drop-in jQuery replacement for Prototype/script.aculo.us on Rails. Using jRails, you can get all of the same default Rails helpers for javascript functionality using the lighter jQuery library. - SproutCore
- FusionCharts v3 - Animated Flash Charts and Graphs
Flash-based chart generator. - ZiYa
Rails plug for creating Flash-based charts. - jQuery 1.2.6: Events 100% faster
- Scripteka :: Prototype extensions library
A library of extensions for the Prototype JavaScript framework. - jQuery: The Write Less, Do More, JavaScript Library
- Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications
Central site for the Prototype JavaScript framework. - script.aculo.us - web 2.0 javascript
Main web site for the Scriptaculous project. - Opera Dragonfly
Browser Debugging tool (like Firebug), but runs on any device that Opera runs on. - Firebug - Web Development Evolved
Comprehensive debugging and in-browser development tool for Firefox. - IBM Page Detailer
Windows-based utility for analyzing page load times. - Dojo Toolbocks
Plugin for using the Dojo JavaScript libraries with Ruby on Rails applications. - Mozilla Labs Prism
Prism is a Mozilla tool for creating “single site browsers” to turn a web app into something that acts a little more like a desktop app. - PullMonkey Projects: Open Flash Chart Plugin for Ruby on Rails - Graphs
- Open Flash Chart
- blueprintcss
An open-source CSS framework, which provides a good starting point for your CSS designs. - A library of DHTML and Ajax scripts
- CSS Balanced Columns V3
Unless you use tables for layout, achieving equal-height columns is a matter of choosing the lesser of various evils. This is a sophisticated JavaScript solution that has a lot to recommend it. - WYM on Rails
Plugin for integrating the WYM editor into Rails. - WYMeditor - web-based XHTML editor - Home
- BlogFish: tooltip.js
Javascript function to add a tooltip when the user hovers over certain items. Uses Prototype and includes Rails helpers. - Jaxdoc: Javascript-enhanced documentation viewer
Open-soure project for viewing RDocs with and Ajax interface. This is the code behind RailsBrain.com and RubyBrain.com. - YM4R: Yahoo Maps for Rails
Plugin for using Yahoo maps in Rails applications. - Community Mapbuilder
An open-source, Ajax mapping client that runs in the browser and renders maps from Web Map Services (WMS), Web Feature Services (WFS), GeoRSS, and Google Maps.
Presentation Slides (1)
- Secrets of JavaScript Libraries
Slides from a session at SXSW 2008 that included the authors of the Prototype and Scriptaculous frameworks, as well as other notables.
Directories (2)
- Design Float
A Digg-like site for web design articles. - ProgrammerMeetDesigner - where web developers find web designers
Cheat Sheets (2)
- Visual jQuery 1.1
Really handy visual navigation through jQuery reference guide. - Protype 1.6 Cheat Sheet (PDF)
e-Books (1)
Hosted services (3)
- Test your web design in different browsers - Browsershots
This free service renders your page in a variety of browsers for Linux, Windows, and Macintosh, so you can see how your design fares in browsers that you don’t personally have access to. - ColorJack: Sphere (Color Theory Visualizer)
A great free visualization tool for picking sets of colors according to various schemes. - Typetester -- Compare fonts for the screen
A great free service for seeing what different fonts and settings look like on screen.
General Sites (6)
- Elements of Design: A Web Design Showcase
- A List Apart
An online magazine about web design, with some of the highest-quality articles available. - Eric Meyer: CSS
An assortment of CSS demos, tests, and documentation from one of the world’s experts on the topic. - W3Schools Online Web Tutorials
- CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase
- CSS Menu Generator
Blogs
Top Blogs
-
Ajax Bestiary » AJAX Development, News, Techniques & More
"A Javascript Field Guide" of useful techniques.
- Theresaneil's Weblog
-
perfection kills
"Exploring prototype by example"
-
mir.aculo.us
Thomas is the author of the Scriptaculous JavaScript library.
- Molecular Voices
-
Looks Good Works Well
Bill Scott is the director of UI engineering at NetFlix, and previously led the UI toolkit effort and other projects at Yahoo. His blog is full of great tidbits about interaction design.
- Molecular Voices
- WebAppers - Hunting the Best Open Source Resources for Web Developers
- Smashing Magazine
- AlternateIdea
- scottraymondnet
