"hello world"
article in Tech programming

CSS, javascript, DOM, design, comet, stomp, jquery, and everything web.

Dive Into HTML5
Open Web Platform Daily Digest
Mousetrap - Keyboard shortcuts in Javascript
jsgif - jsgif: A GIF player in JavaScript (step through animated gifs on the web with this bookmarklet)
Online javascript beautifier
liammclennan/JavaScript-Koans - GitHub - JavaScript Koans is an interactive learning environment that uses failing tests to introduce students to aspects of JavaScript in a logical sequence.
DailyJS: A JavaScript Blog
Badass JavaScript - A showcase of awesome JavaScript code that pushes the boundaries of what's possible on the web.
If you haven't found the power of CSS, you should sit and move through some of the css Zen Garden: The Beauty in CSS Design, George, I mean it...
Then, please make sure you check out Google's Chrome Experiments - Home.

Tutorial 9 - Liquid three column layout - all steps combined
24 ways: Absolute Columns
css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers

PatternCooler | Cool Seamless Background Pattern Designs for Web and Graphic Projects, Blogs, Twitter, MySpace, Mobile Phone Wallpapers - wow some very nice patterns, reminds me of esher a lot...
kuler - color scheme selector.
24 ways: Golden Spirals - create spirals using nothing but divs;define a div container with bounds specified, fill with divs. The 1st and every 4th div are given a cycle class selector.

Sphere: Color Theory Visualizer
Sketchpad - Free Online Drawing
Raw - The missing link between spreadsheets and vector graphics. built on the very popular D3.js - Data-Driven Documents

Typography for the web

FitText - A plugin for inflating web type
Typetester – Compare fonts for the screen
Lettering.js - A jQuery plugin for radical web typography.
Viewport Sized Typography | CSS-Tricks

HTML Special Characters - a list of some HTML entities for when you forget the ► entity is marked up as ►
Processing.js - a Javascript port of the Processing Visualization Language
Protovis - a graphical toolkit for visualization
PhiloGL: A WebGL Framework for Data Visualization, Creative Coding and Game Development
JavaScript InfoVis Toolkit - The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.
ContextFree.js & Algorithm Ink: Making Art with Javascript « Aza on Design
contextfree.js - contextfree - Project Hosting on Google Code
Closure Library - Google Code - Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library.
Baseline - a designer framework by ProjetUrbain.com - Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography.
Blueprint: A CSS Framework | Spend your time innovating, not replicating - typographic with grid...
Internet Explorer UA Style Sheets - lists and compares the different default style sheets used to render HTML in the four major versions of Internet Explorer; IE6, IE7, IE8, and IE9 Platform Preview.
CSS3 Please! The Cross-Browser CSS3 Rule Generator
LESS « The Dynamic Stylesheet language - A set of small, responsive CSS modules that you can use in every web project. yui

John Resig - JavaScript Programmer
AddyOsmani.com | jQuery & JavaScript Articles For The Community

tmpvar/jsdom - GitHub - CommonJS implementation of the DOM intended to be platform independent and as minimal/light as possible while completely adhering to the w3c DOM specifications.
SVGCanvas - SVGCanvas is a JavaScript implimentation of most of the Canvas drawing API which creates SVG grapics elements instead of drawing to a pixel buffer.

Javascript micro templating

Fat-Free Templating with Barebones Javascript - Windows Live
John Resig - JavaScript Micro-Templating
Handlebars.js: Minimal Templating on Steroids
Tutorial: HTML Templates with Mustache.js
JavaScript Templates Engine PURE | BeeBole - Simple and ultra-fast templating tool to generate HTML from JSON data.


mrdoob/three.js - GitHub - Javascript 3D Engine - engine can render using <canvas>, <svg> and WebGL.
Learning Three.js Jerome Etienne Homepage jeromeetienne (Jerome Etienne) github Jerome Etienne.js Blog

HTML 5 Games / Javascript games

DHTML Arkanoid V1.2B | Schillmania! -This is an attempt at recreating the classic "Arkanoid" in Object-Oriented Javascript/DHTML.
Space Cannon 3D: A music-driven, 3D HTML5 / Javascript Game - using mrdoob/three.js - GitHub, echonest api.
javascript game of tron in 219 bytes
WebGL Browser Report — WebGL Detection — WebGL Tester

CSS cubes || isometric visions

3D Cube using CSS transformations – Paul Hayes & FofR Online; web design portfolio and experiments
Ajaxian » Fun with 3D CSS and video
Iso - Isometric cubes
Isomer – an isometric graphics library for HTML5 canvas - Simple isometric graphics library for HTML5 canvas jdan/isomer


50 Brilliant CSS3/JavaScript Coding Techniques - Smashing Magazine
11 Classic CSS Techniques Made Simple with CSS3 | Nettuts+
CSS3 Transitions, Transforms and Animation Tutorial
Magic of CSS — Adam Schwartz

JSON && E4X ECMAscript for XML

content moved to data interchange formats- CSV, XML, JSON*, BSON, YAML, HAML, TOML and others

Web syntax highlighting / Web code editing

SyntaxHighlighter - Alex Gorbatchev - javascript code syntax highlighter for the web.
Pygments — Python syntax highlighter
bespin: Summary - Mozilla bespin code, code ide from html5 canvas.
Mozilla Labs » bespin - open extensible web-based framework for code editing that aims to increase developer productivity, enable compelling user experiences, and promote the use of open standards.
CodeMirror - In-browser code editing made bearable.
jquery tweets - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
Cloud9 IDE - Ajax.org - Cloud9 IDE is aiming to be the IDE for Javascript developers. (github)
ether/etherpad-lite - Really real-time collaborative document editing for the rest of us Etherpad
Ace - The High Performance Code Editor for the Web - replaces bespin.

Lists of things CSS

I dunno y, but the whole web designer field always has these lists...
A List Apart - Good site on elements of design for web designers.
53 CSS-Techniques You Couldn't Live Without
10 Useful Web Application Interface Techniques | How-To | Smashing Magazine
50 Useful JavaScript Tools | Developer's Toolbox | Smashing Magazine
55+ Extremely Useful Online Generators for Designers
AJAX Crawler - Collection of DHTML and AJAX Samples.: November 2008
15 Must Read Articles for CSS Beginners
10 Geeky Web Tricks with HTML5 and CSS3 | GeekDad | Wired.com

Components, Widgets, and what have yous.

Icons, Forms, Validation, Key support, etc all make and break the website usability. In this day in age, I believe in standing on the shoulders of giants. Don't re-invent your own datagrid if one is already out there! I'm in the process of choosing widgets for datagrids and menus.
Data Grids with AJAX, DHTML and JavaScript | Developer's Toolbox | Smashing Magazine

Some sites I'm currently looking at:
Active Widgets - A very pretty looking set of widgets, however, it is all javascript based so I'm not sure what kind of work it would be to integrate this in my theme based widget code for my applications.

Cool concepts on websites

Using a pronunciation guide on your website!

My name is Thomer M. Gil [].
You should have the ability to get the pronunciation of whatever word you what on your website. The standard words are defined using a web dictionary and the dictionary's wav files. However, for things like product names, people's names, and accent studies you should record your own pronunciation so that others can hear how your say it. Interesting to think that you could do a survey on how people most pronounce a word. How cool! You could take a vote from the internet on the real way to say tomato, cache, linux, deamon, char *, or any other pet peeve that you think you know how to pronounce and others don't.

Mario Wallpaper | ./shadow.sh - Mario Desktop

Royal Pingdom » Javascript framework usage among top websites


dojo offline


mootools - compact, modular, Object-Oriented JavaScript framework
JonDesign's (Javascript) SmoothGallery 2.0: Improved Mootools Mojo for Images
MooTools Tutorials and Resources Round-Up | Developer's Toolbox | Smashing Magazine
MochaUI - A web applications user interface library - built on mootools
moo.rd - A lightweight Mootools extension


Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications
script.aculo.us - web 2.0 javascript
Example (YUI): AutoComplete Widget :: Flat-file Data
Resizable Reloaded - A reusable component for resizing elements
CSS slicing guide
Script Class Browsing Utility

CSS compatibility - chasing the CSS dragon

Nice and Free CSS Templates - the simplest of CSS templates, but enough to get the job done.
Position Is Everything - Modern browse bugs explained in detail!
QuirksMode - sitemap
Cascading Style Sheet Compatibility in Internet Explorer 7
IEBlog : Call to action: The demise of CSS hacks and broken pages
CSS Cheat Sheet (V2) - Cheat Sheets - Added Bytes
12 Principles For Keeping Your Code Clean | CSS | Smashing Magazine
Using CSS3: Older Browsers And Common Considerations - Smashing Magazine
yepnope.js | A Conditional Loader For Your Polyfills! - love the name. yep. nope.

Development tools

When working with CSS, you'll find yourself needing something to highlight page elements so you can view CSS props. There are many good browser plugins for this sort of thing of course. Here are some that I have found useful over the years:
Web Developer - very cool (Firefox, Flock, Mozilla and Seamonkey) plugin, works cross platform!
Download details: Internet Explorer Developer Toolbar
Firebug - Web Development Evolved

Images, icons, and media

Getting a nice visual look is important....which requires some work with images.
famfamfam.com: Icons - silk and other icon sets which are free to use.

50 Extremely Useful And Powerful CSS Tools | CSS | Smashing Magazine

Comet (bayeux)

Comet (programming)
Comet Daily » Blog Archive » Using REST Channels in Dojo
HTTP Streaming - Ajax Patternsr/> Comet Daily » Blog Archive » Server-Centric Comet With ItsNat
nComet is a .NET implementation of the Comet (reverse-AJAX push) architecture. This server-side pipeline uses long-lived client-initiated HTTP connections to push messages to the client. Once the client receives a response, it immediately opens another HTTP request, which the server holds until a message is ready. This architecture allows the server to push dynamic html/xml/json/etc to the browser, rather than the browser polling the server.
The Bayeux Protocol - Bayeux is a protocol for transporting asynchronous messages (primarily over HTTP), with low latency between a web server. (The Dojo Foundation)
cometd's svn is available at: http://svn.cometd.org/trunk/.
Cometd dev blog - Vox
jquerycomet - Google Code - use jquery with comet.
HTTP Streaming - Ajax Patterns
Comet Daily » Blog Archive » Comet is Always Better Than Polling - includes some pretty graphs.

HTML 5 WebSocket

Home - KAAZING.ORG - Home - Kaazing Gateway
Comet Daily » Blog Archive » Comet Gazing: WebSocket


The jquery section of this page grew, and grew, and grew, until one day, I created another page for that content. jQuery.

Doodle.js?—?A Sprite Library for Canvas | notebook
BBC - Glow JavaScript Library - DOM manipulation, event handling, animations, and user interface widgets.


Ext JS - Client-side JavaScript Framework
Google AJAX APIs Blog: Ext-core ready to go
Saki's Ext Examples Page
Ext JS And PHP – Grid Panel Sample


24 JavaScript Best Practices for Beginners - Nettuts+
JSLint, The JavaScript Code Quality Tool
CommonJS Spec Wiki - building up the JavaScript ecosystem for web servers, desktop and command line apps and in the browser.
JavaScript Debug: A simple wrapper for console.log
v8 - Project Hosting on Google Code - V8 is Google's open source JavaScript engine. V8 is written in C++ and is used in Google Chrome, the open source browser from Google.

Server-side Javascript / HTTP server in Javascript

I pushed all my node.js content to:
Node.js npm and that wonderful javascript world.

Controls and what nots

JavaScript Time Component | NoGray.com - nice time picker. click with analog hands.
MooTools Events Calendar
Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements
phatfusion : roundedcorners - give div elements rounded corners easy. (mootools)
Window.Growl 2.0 with MooTools 1.2beta2 - growl notifications for your browser.
Detecting if user is idle, away or back by using Idle.js | Shawn Mclean | Software Engineer | Jamaica shawnmclean/Idle.js - Javascript activity library for the browser. (onHidden, onVisible, onAway,onAwayBack,awayTimeout)


Real-Time Web Protocol PubSubHubbub Explained
pubsubhubbub - Project Hosting on Google Code
BuildingAHub - pubsubhubbub - How to build a hub - Project Hosting on Google Code

Open Data Protocol

HTML 5 Video

HTML5 Video Player | Video JS
HTML5 Video & Media JavaScript Library | Kaltura: Open Source Video Developer Community
Projekktor Zwei - HTML5 video player
FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
TimeJump – Deep linking for Podcasts

Javascript regex randomness

s=s.replace(/(\n|\r)+$/, ''); // remove \n or \r
s=s.replace(/^\s+|\s+$/g,""); // trim whitespace beginning and ending

// http://cass-hacks.com/articles/code/js_url_encode_decode/
function URLEncode (clearString) {
  var output = '';
  var x = 0;
  clearString = clearString.toString();
  var regex = /(^[a-zA-Z0-9_.]*)/;
  while (x < clearString.length) {
    var match = regex.exec(clearString.substr(x));
    if (match != null && match.length > 1 && match[1] != '') {
    	output += match[1];
      x += match[1].length;
    } else {
      if (clearString[x] == ' ')
        output += '+';
      else {
        var charCode = clearString.charCodeAt(x);
        var hexVal = charCode.toString(16);
        output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
  return output;
function URLDecode (encodedString) {
  var output = encodedString;
  var binVal, thisString;
  var myregexp = /(%[^%]{2})/;
  while ((match = myregexp.exec(output)) != null
             && match.length > 1
             && match[1] != '') {
    binVal = parseInt(match[1].substr(1),16);
    thisString = String.fromCharCode(binVal);
    output = output.replace(match[1], thisString);
  return output;

Upload tools

Plupload - A tool for uploading files using Flash, Silverlight, Google Gears, HTML5 or Browserplus - developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar.(flash,gears,html5,silverlight)

Reactive Rx

Reactive Extensions for .NET (Rx)
Reactive Extensions for JavaScript: The Time flies like an arrow sample - Jeffrey rambles about Rx, .NET and programming in general. - Site Home - MSDN Blogs
Jeffrey rambles about Rx, .NET and programming in general. - Site Home - MSDN Blogs
Node JS Bindings for RxJS - Jeffrey rambles about Rx, .NET and programming in general. - Site Home - MSDN Blogs
Expert to Expert: Brian Beckman and Erik Meijer - Inside the .NET Reactive Framework (Rx) | Going Deep | Channel 9

Dynamic fav icons using javascript

Dynamic favicons - remysharp: Google Calendar favicon which renders the current day instead of a generic "31"
360° MP3 player UI demo (SoundManager 2): Javascript + Canvas Visualization - fav icon is level meter!
DEFENDER of the favicon | Mathieu 'p01' Henri | July 2008

HTML Audio

SoundManager 2: JavaScript Sound For The Web


bitovi/todomvc · GitHub - Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more.
JavaScriptMVC - JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development.
Agility.js Javascript MVC library arturadib/thewall · GitHub Anonymous Twitter-like wall (Agility.js demo)
Spine - Build Awesome JavaScript MVC Applications (Spine.app,hem,CoffeeScript)
Shopify/batman · GitHub - batman.js is a framework for building rich single-page browser applications. It is written in CoffeeScript and its API is developed with CoffeeScript in mind, but of course you can use plain old JavaScript too.
A comparison of Angular, Backbone, CanJS and Ember - Sebastian's Blog
vue.js - MVVM Made Simple Vue.js is a library for building interactive web interfaces. It provides data-driven components with a simple and flexible API.


Angular.js - Dave Horner's Website
AngularJS — Superheroic JavaScript MVC Framework
Popular Modules - AngularJS Modules, Plugins and Directives
Sample Application with Angular.js - wine celler in angular.js
angular-ui/ui-router · GitHub - about - ui-router flexible routing with nested views, organize the parts of your interface into a state machine. States are bound to named, nested and parallel views.
Angular directives for Twitter's Bootstrap - Bootstrap components written in pure AngularJS by the AngularUI Team. no dependency on jQuery or bootstrap's javascript.
this vs $scope in AngularJS controllers - Stack Overflow

Can.js || canjs

CanJS - can be used with jquery,epto,dojo,mootools,yui
Blog Archives » Bitovi - blog about CanJs and Jquery++
CanJS blog posts, tutorials, and examples · bitovi/canjs Wiki
retro/Tonfa.js · GitHub - Tonfa.js is a glue library between CanJS and jQueryMobile
jupiterjs/cantodo · GitHub - CanJS TodoMVC Demos using each of the external libraries supported by Can.JS.
Diving into CanJS | Nettuts+
CanUI bitovi/canui · GitHub


Backbone.js - Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
Hello Backbone.js Tutorial
larrymyers/backbone-koans · GitHub - A set of jasmine powered koans for learning Backbone.js.
addyosmani/backbone-fundamentals · GitHub - This is the home of ‘Developing Backbone.js Applications’, an (in-progress) book about the Backbone.js framework for structuring JavaScript applications.
unspace/faux - GitHub - Faux is a Javascript library for building Single Page Interface (or "SPI") applications with Backbone.js's Model, View, and Controller classes.
raganwald's Profile - GitHub - Reg Braithwaite has quite a few examples of using faux and backbone.js together.
powmedia/backbone-forms · GitHub - Form framework for BackboneJS with nested forms, editable lists and validation.
Make Big Backbone.js Forms Change Models Fast
Awesome Model Binding For Backbone.js | ThoughtStream.new :derick_bailey
Recipes with Backbone
Mini book review: Recipes With Backbone | Richard Dingwall
Building a single page app with Backbone.js, underscore.js and jQuery | &yet | the blog
Chariot Solutions: Using jQueryMobile and Backbone.js for handling forms
Building a shared calendar with Backbone.js and FullCalendar: A step-by-step tutorial | The Shine Technologies Blog
Backbone.js Training - A Multi-Day, Hands-On, Training Class
AaronHardy.com » JavaScript Architecture: The Basics
Backbone Boilerplate - self-documenting example app useful for quick developer and/or learning backbone.js. (Backbone.js, Underscore.js, Require.js, Html5Boilerplate)
PaulUithol/Backbone-relational · GitHub - Get and set relations (one-to-one, one-to-many, many-to-one) for Backbone models.
Awesome Model Binding For Backbone.js | ThoughtStream.new :derick_bailey - nice article talking about backbone.modelbinding
derickbailey/backbone.modelbinding · GitHub - awesome model binding for Backbone.js
logicalparadox/backbone.iobind · GitHub - Bind socket.io events to backbone models & collections. Also includes a drop-in replacement for Backbone.sync using socket.io.
Integrating Backbone.js with ASP.NET Web API - Pablo M. Cibraro (aka Cibrax)
Backbone.Syphon: Serialize Form Inputs To JavaScript Objects | ThoughtStream.new :derick_bailey
derickbailey/backbone.syphon · GitHub - Serialize a Backbone.View in to a JavaScript object.

QR code

QR code - Wikipedia, the free encyclopedia
qr for my website
Did you know you could use google charts to make qr codes?

underscore and functional javascript

documentcloud's underscore at master - GitHub - Functional Programming Aid for Javascript. Works well with jQuery.
Javascript Functional programming with Underscore or ECMAScript5 | united-coders.com
Lo-Dash - Created as a fork of the Underscore project. Lo-Dash is your utility belt.
Say "Hello" to Lo-Dash - Kit Cambridge
Bacon.js - Functional Reactive Programming library for JavaScript baconjs/bacon.js

Canvas - SVG

FishIE Tank
Fabric.js Javascript Canvas Library
Raphaël—JavaScript Library
SVG To RaphaelJS Converter - Ready.Set.Raphael.
Inkscape. Draw Freely.

HTML slides (hypercard stacks)

HTML5 Showcase for Web Developers: The Wow and the How - great html5 slides demo.
html5wow - HTML5 Showcase for Developers: The Wow and the How - Google Project Hosting - source for htmlfivewow.com.
HTML5 Terminal - great example in slide deck.
dzslides - DZSlides is a one-page-template to build your presentation in HTML5 and CSS3.
adamzap/landslide - GitHub - Generate a slideshow using the slides that power the html5-slides presentation
Creating HTML 5 slide presentations using landslide
HTML5 Rocks - A resource for open web HTML5 developers
HTML5 Presentation
impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz
impress.js - S9 Template Pack by geraldb
impressionist - v - impress.js gui
Strut - ALPHA - impress.js gui


Twitter bootstrap - Dave Horner's Website

HTML KickStart

another reset, bootstrap.
HTML KickStart - Ultra–Lean HTML Building Blocks for Rapid Website Production - KickStart your Website Production - 99Lime.com
floarc/HtmlKickstartBundle · GitHub


Ender - the no-library library. - Ender is a full featured package manager for your browser. think dselect,apt-get,nuget,npm (jquery,require.js,CommonJS).


bassistance.de » jQuery plugin: Tooltip (jQuery Tooltip Plugin Demo)
tipsy - Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.
Trenker/Twipsy · GitHub - Mootools port of the jQuery plugin Twipsy

spin.js - javascript only spiner
Piecon / Pie charts in your favicon!
Rivets.js — A declarative data binding facility
Knockout : Home - another MVC data binding observables library.
dat.GUI dat-gui - A lightweight controller library for JavaScript. - Google Project Hosting

compile javascript

John Resig - Asm.js: The JavaScript Compile Target

device orientation

Keep it level: responding to device orientation changes - App Center | MDN franciov/rolling-ball
Introduction to HTML5 Game Development with Phaser and the Device Orientation API - Game development | MDN
Created: 2006-07-16 05:35:38 Modified: 2014-07-13 02:54:49
/root sections/
>peach custard pie
>random tech

moon and stars

My brain

Visible Dave Project

0, 1, 1, 2, 3, 5, 8, 13, 21, 34,...
xn = xn-1 + xn-2