Prototype javascript framework


Prototype javascript framework (prototype.js) is a library of front-end javascript classes and class extensions (Array, Ajax, Event...) aimed to help building interactive web pages. The library (current version 1.6.0) was originaly written in 2005 by Sam Stephenson and is published under MIT License (same as Ruby on Rails) which means it can be used in any project almost without limits.


Prototype core team consists of web developers from all around the world (USA, Canada, Austria, UK...) - Sam Stephenson, Thomas Fuchs, Justin Palmer, Andrew Dupont and others.


What makes this library so good?


The latest version is available at prototypejs.org/download


All round webdesign tips

  1. site logo on top of every page (linked to homepage)
  2. search bar on top of every page
  3. personal bar on top of every page (login/logout, profile (prefs, favs, watchlist, friends,...))
  4. top tags or tag cloud on homepage
  5. top searches suggestion on homepage
  6. search... text in the searchbox to save space
  7. clever (color coded) tabs
  8. breadcrumbs nav (path from homepage or session history)
  9. flag/spam button on every article/comment
  10. article filtering by age (24 hours - 7 days - 30 days - all)
  11. flexible column width with defined min- and max-width (in em)
  12. all important information must be placed above the fold
  13. the optimal column width is 30-70 characters
  14. ↑ go to page top link at the bottom of the page (using up arrow)
  15. thumbing/starring of articles/comments/users
  16. never define only single color. always define the whole set (color and background
  17. choose page <title> carefully
  18. every action that adds/updates/deletes data on server should be accessed by http POST method (html form)
  19. use em units when setting font-size. Don't use px because it does not respect user's preferences (is not relative to parent object's settings)


CSS global reset

When creating a style sheet from scratch it's a good thing to start with a global css reset to avoid problems with possible different presets of margin and padding properties in different browsers. The code (inspired by Andrew Krespanis's article) can look like this (notice the asterisk above h1): /* global reset */ * {padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:0.6em 4%; } li, dd { margin-left: 4%; } fieldset { padding: .6em; }