banner
Dave Horner's Website - Yet another perspective on things...
Home Tech Talk Programming CSS, javascript, DOM, design, comet, stomp, jquery, and everything web.
If you appreciate the information found on this website, please drop me a line!

Who's Online

We have 10 guests online
Content View Hits : 821392
moon and stars
How did you find my site?
 
How often do you answer random online questions?
 

Random Quote

Human beings in their thinking, feeling and acting are not free but are as causally bound as the stars in their motions.
--Albert Einstein
007_8
P1010128
100_1622
Las_Vegas_2002_277

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

Sunday, 16 July 2006 00:35
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.
Typetester – Compare fonts for the screen
documentcloud's underscore at master - GitHub - Functional Programming Aid for Javascript. Works well with jQuery.
Processing.js - a Javascript port of the Processing Visualization Language
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.
JavaScriptMVC - JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development.
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

John Resig - JavaScript Programmer


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


CSS cubes

3D Cube using CSS transformations – Paul Hayes & FofR Online; web design portfolio and experiments
Ajaxian » Fun with 3D CSS and video


CSS 3

50 Brilliant CSS3/JavaScript Coding Techniques - Smashing Magazine
11 Classic CSS Techniques Made Simple with CSS3 | Nettuts+


JSON

JSON - Introducing JSON
Mastering JSON ( JavaScript Object Notation )
On Web Development: Converting XML to JSON
JsonML (JSON Markup Language)
XML.com: Converting Between XML and JSON
Index of /download/prj/jsonxml - includes code from above article and some fixes.
Jayrock: JSON and JSON-RPC for .NET


E4X ECMAscript for XML

XML.com: Introducing E4X
ECMAScript for XML - Wikipedia, the free encyclopedia
senocular.com -XML (E4X) - XML (E4X) out of an ActionScript 3 article.
E4X Tutorial
Ajaxian » CouchDB: Using E4X to get the XML back


Web syntax highlighting

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.


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

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.



Royal Pingdom » Javascript framework usage among top websites

dojo

dojo
dojo offline


MooTools

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

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
http://ajaxian.com/
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


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.


STOMP / AMQP

Stomp (Streaming Text Oriented Messaging Protocol) is a pub/sub wire protocol.
Stomp - Protocol
Apache ActiveMQ - apache powerful open source Enterprise Messaging and Integration Patterns provider.
Orbited – Networking for the Web - python web router and firewall that allows you to integrate web applications with arbitrary back-end systems (XMPP,IRC,STOMP). uses twisted and morbidq.
MorbidQ - a python STOMP broker, single node, uses twisted.
Willow Chat – Networking for the Web - uses Orbited and implements a simple web chat in python.
Comet Daily » Blog Archive » Scalable Real-Time Web Architecture, Part 2: A Live Graph with Orbited, MorbidQ, and js.io
Gozirra - simple java STOMP client/server.
Sprinkle - A STOMP messaging broker written in Python
stomperl - Project Hosting on Google Code - Stomp broker with Erlang
stompserver's stompserver-0.9.8 Documentation - ruby stomp server, this article talks about using it from a python client...Using Python and Stompserver to Get Started With Message Queues | Morethanseven
juretta's objc-stomp at master - GitHub - objc stomp client
Comet Daily » Blog Archive » Scalable Real-Time Web Architecture, Part 1: Stomp, Comet, and Message Queues
RabbitMQ - Open Source Messaging
[tutorial]How to: Django, Comet, Orbited, Stomp, MorbidQ, js.io | Thought Outflux | Anirudh Sanjeev
Apache Qpid: Open Source AMQP Messaging - Index
carrot - AMQP Messaging Framework for Python — Carrot v0.10.1 documentation


HTML 5 WebSocket

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


jQuery

jqueryjs - Google Code - 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. jQuery is designed to change the way that you write JavaScript.
45+ New jQuery Techniques For Good User Experience | Developer's Toolbox | Smashing Magazine
jQuery: The Write Less, Do More, JavaScript Library
jQuery 1.2 Cheat Sheet :: www.gscottolson.com/weblog/
jquerycomet - Google Code - use jquery with comet.
Jquert ContextMenu plugin - jquery plugin for context menus.
Ariel Flesler: jQuery.Listen - event bindings that work for even dynamic content...
Glimmer: a jQuery Interactive Design Tool - Home - quick wizard for jquery...
jQuery Auto-Complete Text Box with ASP.NET MVC : b#
jQuery Plugins by Dylan Verheul, Autocomplete - A jQuery autocompleter with caching options to limit server requests.
jquery.suggest 1.1
TicTacToe in jQuery « Things I Learned
jqPlot Charts and Graphs for jQuery
jQuery Grid Plugin
start - jqGrid Wiki
jqGrid Demos
Flexigrid - Web 2.0 Javscript Grid for jQuery
Meta-Me : Tip 50 – How to query a Data Service using JQuery
jQuery idleTimer plugin « Paul Irish
yayQuery Podcast - A jQuery Podcast
Tabify - Tabbed content with ease (jQuery plugin) | Unwrongest
Elastic - Make your textareas grow Facebook style jQuery plugin | Unwrongest
40 Useful jQuery Techniques and Plugins - Smashing Magazine
TipTip jQuery Plugin | Drewwilson.com
jQuery Masonry · David DeSandro - Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
jQuery to the Rescue: Changing style and target for all external links on my site - Pete Brown's 10rem.net
FireQuery = Firebug extension for jQuery development
jQuerify Bookmarklet » Learning jQuery - Tips, Techniques, Tutorials
Selectors
Introducing SelectorGadget: point and click CSS selectors
Ben Alman » jQuery equalizeBottoms
Sexy.js » A Sequential Ajax (Sajax) JavaScript library for jQuery - Sexy.js is a lightweight JavaScript library which provides enhanced Sequential Ajax (Sajax) functionality and a sleek facade to jQuery’s native Ajax methods.
.: Sammy :: Quirkey.com :: Code :: :: Quirkey NYC, LLC :: Aaron Quint :: Web Developer :: Brooklyn, NY :. - “It would be cool to implement Sinatra in JavaScript”
Signs of a poorly written jQuery plugin


jQuery and twitter

How To: Using jTweetr plugin for jQuery
Plugins | jQuery Plugins - offical jquery plugin page for jtweetr.
FullCalendar - Full-sized Calendar jQuery Plugin
Using FullCalendar jQuery component with ASP.NET MVC - Gunnar Peipman's ASP.NET blog


Use jquery to modify the contents of a div. (here we're incrementing the contents of div id="somedivid")
$("#somedivid").html(parseInt($("#somedivid").html(),10)++);
Check All Checkboxes with JQuery : iKnowKung(Foo).Blog();

What is the difference between .this. and .$(this). in Jquery
$(this)[0] == this
By using $(this) you can perform additional Jquery operations on the object. Jquery always selects an array of elements. If you are looking to operate directly on the DOM object, you can simply use this.

What are some of the ways to access a checkbox in Jquery using selector?
  • $('input:checkbox') - find all input elements of type checkbox.
  • $('#givenname') - give a checkbox an id and search for it.
  • $('.givenclass') - give a checkbox a class and search for it.
  • $("input[@name='givenname'][type='checkbox']") - give the checkbox a name and select it.



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


Ext

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


Javascript

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

node.js - Evented I/O for V8 javascript. ex. web server
node(1) -- evented I/O for V8 JavaScript
ry's node_chat at master - GitHub - simple chat demo for node
sixtus's node-couch at master - GitHub - A CouchDB interface for node.js
doc.js at master from DracoBlue's enhanced-node-api - GitHub
creationix's howtonode.org at master - GitHub - based on creationix's wheat at master - GitHub
Server Side JS Framework - Spludo is a high performance evented, server side Javascript Webframework with MVC, prototype based, includes DI+AOP and a Convention-Over-Configuration Approach. It's running on the node.JS-platform, which employs the lightning fast V8-Engine.
visionmedia's express at master - GitHub - Insanely fast (and small) server-side JavaScript web development framework built on node.js and the V8 JavaScript engine.
visionmedia's kiwi at master - GitHub - node.js package management system -- feature rich, fast, inspired by GIT / RubyGems / Gemcutter / Kiwi Fruits :D
jed's fab at master - GitHub - a modular async web framework for node.js


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.


PubSubHubbub

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


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();
      }
      x++;
    }
  }
  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
Last Updated on Friday, 03 September 2010 09:05