Drag and Drop using Knockout and HTML5

References for Drag and Drop using Knockout have improved dramatically over the last 8 months. It looks like many of these have been around for a while, but the search results have improved, making them more accessible.

I found this post useful:
http://stackoverflow.com/questions/7218171/knockout-html5-drag-and-drop

Especially this fiddle:
http://jsfiddle.net/marrok/m63aJ/

This also looks like a well refined binding:
https://github.com/One-com/knockout-dragdrop

complete with a nice demo:
http://one-com.github.io/knockout-dragdrop/

Still many of the results depend on JQuery UI integration, but Knockout and HTML5 and these approaches make it much easier to handle drag and drop without limiting yourself to JQuery UI approaches.

references use while crafting web page to automatically refresh temperature

http://192.168.1.85/
http://192.168.1.85/check/
https://www.google.com/search?q=javascript+poll+for+change&oq=javascript+poll+for+change&aqs=chrome.0.57.4275j0&sourceid=chrome&ie=UTF-8
http://stackoverflow.com/questions/3583203/server-polling-with-javascript
http://api.jquery.com/category/ajax/
https://www.google.com/search?q=ajax+update+page+on+interval&oq=ajax+update+page+on+interval&aqs=chrome.0.57.8069j0&sourceid=chrome&ie=UTF-8#sclient=psy-ab&q=jquery+ajax+update+page+on+interval&oq=jquery+ajax+update+page+on+interval&gs_l=serp.3...69425.73392.0.74376.7.7.0.0.0.1.167.1105.0j7.7.0...0.0.0..1c.1.17.psy-ab.mBw36GrUd4Y&pbx=1&bav=on.2,or.r_qf.&bvm=bv.48175248,d.aWc&fp=82a600f6a06a56f6&biw=990&bih=681
http://stackoverflow.com/questions/10861407/how-to-automatically-refresh-data-on-page-using-ajax-on-an-interval
http://stackoverflow.com/questions/4542863/jquery-ajax-call-with-timer
https://developers.google.com/speed/libraries/devguide#jquery
http://jquery.com/
http://www.google.com/#gs_rn=17&gs_ri=psy-ab&suggest=p&pq=jquery%20changes%20in%20version%202&cp=9&gs_id=o&xhr=t&q=jquery+ajax&es_nrs=true&pf=p&sclient=psy-ab&oq=jquery+aj&gs_l=&pbx=1&bav=on.2,or.r_qf.&fp=bc3fba682f534136&biw=990&bih=681
http://api.jquery.com/jQuery.ajax/
http://blog.jquery.com/2013/04/18/jquery-2-0-released/
https://www.google.com/search?q=jquery+update+content+of+div&oq=jquery+update+content+of+div&aqs=chrome.0.57.5734j0&sourceid=chrome&ie=UTF-8
http://api.jquery.com/html/
https://www.google.com/search?q=javascript+split+string&oq=javascript+split+string&aqs=chrome.0.57j62.6054j0&sourceid=chrome&ie=UTF-8
http://www.w3schools.com/jsref/jsref_split.asp


https://www.google.com/search?q=javascript+check+for+change+in+local+storage&client=ubuntu&channel=cs&aq=f&oq=javascript+check+for+change+in+local+storage&aqs=chrome.0.57.9568&sourceid=chrome&ie=UTF-8
http://stackoverflow.com/questions/12961986/how-to-detect-when-the-content-of-a-specific-localstorage-variable-changes-betwe
http://dev.w3.org/html5/webstorage/#storage-0
https://www.google.com/webhp?hl=en&tab=ww#hl=en&sclient=psy-ab&q=javascript+local+storage+event&oq=javascript+local+storage+event&gs_l=hp.3..0i30.201558.202192.4.202872.6.6.0.0.0.2.144.706.0j6.6.0...0.0...1c.1.12.psy-ab.iSgd9L1wwCg&pbx=1&bav=on.2,or.r_qf.&bvm=bv.46340616,d.aWc&fp=78bc312b652f28b7&biw=1056&bih=1037
http://diveintohtml5.info/storage.html
http://stackoverflow.com/questions/3055013/html5-js-storage-event-handler
http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx
http://forums.asp.net/t/1346989.aspx/1
https://www.google.com/search?q=chrome+extension+development&client=ubuntu&channel=cs&aq=f&oq=chrome+extension+development&aqs=chrome.0.57j62l2.7540&sourceid=chrome&ie=UTF-8
http://developer.chrome.com/extensions/getstarted.html
chrome://extensions/
https://www.google.com/search?q=javascript+moments+&client=ubuntu&channel=cs&aq=f&oq=javascript+moments+&aqs=chrome.0.57j62l3.5900&sourceid=chrome&ie=UTF-8#hl=en&gs_rn=12&gs_ri=psy-ab&gs_mss=javascript%20moment%20dynamically%20update%20date%20on%20page&pq=javascript%20setinterval&cp=17&gs_id=6b&xhr=t&q=javascript+set+span+text&es_nrs=true&pf=p&client=ubuntu&channel=cs&biw=1056&bih=1037&sclient=psy-ab&oq=javascript+set+sp&gs_l=&pbx=1&bav=on.2,or.r_qf.&bvm=bv.46340616,d.aWc&fp=78bc312b652f28b7
http://stackoverflow.com/questions/1358810/how-do-i-change-the-text-of-a-span-element-in-javascript
http://stackoverflow.com/questions/13924789/coffeescript-dynamically-update-time-with-moment-js-with-coffeescript
http://www.w3schools.com/jsref/met_win_setinterval.asp
http://momentjs.com/
view-source:http://momentjs.com/
http://momentjs.com/docs/#/plugins/
http://momentjs.com/js/home.min.js?v=2013-04-30T10:23:12-07:00


Drag and Drop

Drag and drop is a useful element in user interfaces. HTML5 brings drag and drop to the browser by default. Incorporating it with a project is not so easy to get the hang of (at least it's not for me!).

I found these articles to be useful when trying to implement a knockout based sortable list, as found in the "trees" project. (see that for samples)

http://www.html5rocks.com/en/tutorials/dnd/basics/
https://www.google.com/search?q=dragstart+dragstart.h5s&client=ubuntu&channel=cs&aq=f&oq=dragstart+dragstart.h5s&aqs=chrome.0.57.8634&sourceid=chrome&ie=UTF-8#hl=en&gs_rn=8&gs_ri=psy-ab&gs_mss=dragstart.h5s&pq=dragstart&cp=10&gs_id=25&xhr=t&q=dataTransfer&es_nrs=true&pf=p&client=ubuntu&channel=cs&sclient=psy-ab&oq=dataTransf&gs_l=&pbx=1&bav=on.2,or.r_qf.&bvm=bv.44770516,d.aWc&fp=1f3254f3ac0d9180&biw=1043&bih=702
https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop
https://developer.mozilla.org/en-US/docs/DragDrop/DataTransfer
https://www.google.com/search?q=knockout+sortable+binding&client=ubuntu&channel=cs&aq=f&oq=knockout+sortable+binding&aqs=chrome.0.57.4419&sourceid=chrome&ie=UTF-8#hl=en&client=ubuntu&channel=cs&sclient=psy-ab&q=knockout+drag+and+drop+binding&oq=knockout+drag+binding&gs_l=serp.1.0.0i7.887233.887754.0.890243.4.4.0.0.0.1.144.493.0j4.4.0...0.0...1c.1.8.psy-ab.6O_DVvQElZg&pbx=1&bav=on.2,or.r_qf.&bvm=bv.44770516,d.aWM&fp=1f3254f3ac0d9180&biw=1043&bih=702
https://github.com/bramstein/knockout.dragdrop
https://github.com/bramstein/knockout.dragdrop/blob/master/lib/knockout.dragdrop.js
https://github.com/rniemeyer/knockout-sortable
https://github.com/rniemeyer/knockout-sortable/blob/master/src/knockout-sortable.js
https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/dragstart
http://www.knockmeout.net/2011/05/dragging-dropping-and-sorting-with.html
http://www.ko-js.com/2012/04/part-1-sortable-list-in-knockout-js.html
http://www.ko-js.com/2012/04/part-2-sortable-list-in-knockout-js.html

https://www.google.com/search?q=html5+drag&client=ubuntu&channel=cs&aq=f&oq=html5+drag&aqs=chrome.0.57.3075&sourceid=chrome&ie=UTF-8


/c/technical/instances.txt
/c/technical/javascript/saving_data.txt
/c/technical/javascript/javascript-tutorial.txt
/c/technical/javascript/javascript.txt

working on web templates
making progress

http://requirejs.org/docs/api.html
http://api.jquery.com/Types/#Element
http://api.qunitjs.com/equal/
http://knockoutjs.com/documentation/introduction.html
http://underscorejs.org/#indexOf
http://www.knockmeout.net/2013/01/simple-editor-pattern-knockout-js.html
https://github.com/umdjs/umd/blob/master/returnExports.js
http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
https://github.com/volojs/volo
https://www.google.com/search?q=javascript+object+properties&aq=0&oq=javascript+object+prop&aqs=chrome.0.0j57j0l2j60j62.5697&sourceid=chrome&ie=UTF-8#hl=en&sclient=psy-ab&q=qunit+test+changes+to+dom+manipulation&oq=qunit+test+changes+to+DOM&gs_l=serp.1.0.33i29i30.1629538.1638585.3.1647910.25.23.0.0.0.0.3055.16577.2-1j1j2j3j3j9-4.14.0.les%3B..0.0...1c.1.6.psy-ab.5176GNs9i2w&pbx=1&bav=on.2,or.r_cp.r_qf.&fp=cba69c603a692dbc&biw=1241&bih=802
http://coding.smashingmagazine.com/2012/06/27/introduction-to-javascript-unit-testing/
http://stackoverflow.com/questions/1435038/testing-javascript-that-manipulates-the-dom
http://stackoverflow.com/questions/9949645/qunit-testing-of-html-dom-manipulation-procedures
https://www.google.com/search?q=knockoutjs&aq=f&oq=knockoutjs&aqs=chrome.0.57j5j0l2j60l2.6015&sourceid=chrome&ie=UTF-8#hl=en&sclient=psy-ab&q=ko.tojs&oq=ko.tojs&gs_l=serp.3..0l4.15014420.15016856.0.15019225.7.5.0.2.2.0.116.499.3j2.5.0.les%3B..0.0...1c.1.6.psy-ab.up043APULlw&pbx=1&bav=on.2,or.r_cp.r_qf.&bvm=bv.43828540,d.aWc&fp=cba69c603a692dbc&biw=1214&bih=722
http://knockoutjs.com/documentation/json-data.html
http://knockoutjs.com/documentation/plugins-mapping.html


trying to get require and jquery to work as expected...
might need a break from this for a bit.

thoughts about converting tree.py to javascript
then remember reading that should just use the DOM to store items...
makes sense

https://www.google.com/search?q=javascript+functions+vs+objects&aq=f&oq=javascript+functions+vs+objects&aqs=chrome.0.57j0l2j62l3.5657&sourceid=chrome&ie=UTF-8
http://stackoverflow.com/questions/5958417/javascript-function-and-object
http://stackoverflow.com/questions/1595611/how-to-properly-create-a-custom-object-in-javascript?lq=1
https://www.google.com/search?hl=en&sclient=psy-ab&q=javascript+window.self&oq=javascript+window.self&gs_l=serp.3..0j0i7i30l2j0i7i10i30.171301997.171302918.0.171303870.7.7.0.0.0.3.342.1156.1j4j1j1.7.0.les%3B..0.0...1c.1.5.psy-ab.IFYPOZ6ytYc&pbx=1&biw=1070&bih=704&cad=cbv&sei=lK80Uar8OceVyQHy-oGIAQ
http://stackoverflow.com/questions/3309516/when-to-use-self-in-javascript
http://ngauthier.com/2012/04/var-self-equals-lame.html#meowlater
http://www.w3schools.com/jsref/prop_win_self.asp
http://stackoverflow.com/questions/962033/what-underlies-this-javascript-idiom-var-self-this
http://alistapart.com/article/getoutbindingsituations
https://www.google.com/search?q=javascript+closure&oq=javascript+closure&aqs=chrome.0.57l2j61j59j62l2.4655&sourceid=chrome&ie=UTF-8
http://stackoverflow.com/questions/111102/how-do-javascript-closures-work
https://www.google.com/search?q=requirejs+create+object&aq=f&oq=requirejs+create+object&aqs=chrome.0.57j62l3.13552&sourceid=chrome&ie=UTF-8
http://stackoverflow.com/questions/8159873/how-to-use-a-backbone-model-with-node-js-and-amd-require-js-on-the-browser?rq=1
http://stackoverflow.com/questions/5608685/using-requirejs-how-do-i-pass-in-global-objects-or-singletons-around
http://backbonetutorials.com/organizing-backbone-using-modules/
https://www.google.com/search?q=javascript+optional+arguments+function&aq=0&oq=javascript+optional+arguments+&aqs=chrome.1.57j0l3j62l2.21204&sourceid=chrome&ie=UTF-8#hl=en&sclient=psy-ab&q=javascript+named+arguments+function&oq=javascript+named+arguments+function&gs_l=serp.3..0i30j0i8i30l3.669424.670096.0.670868.5.5.0.0.0.1.335.743.3j1j0j1.5.0.les%3B..0.0...1c.1.5.psy-ab.HZLkdjzkEIY&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&bvm=bv.43148975,d.aWc&fp=443df112168ae7b8&biw=1070&bih=704
http://stackoverflow.com/questions/11796093/named-parameters-in-javascript
http://stackoverflow.com/questions/2141520/javascript-variable-number-of-arguments-to-function?rq=1
http://stackoverflow.com/questions/587496/javascript-functions-and-optional-arguments
http://stackoverflow.com/questions/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function?rq=1


revisiting CSS preprocessors.
SASS might have nice syntax, but keeping ruby available just for that is a hassle.
That leaves LESS or Stylus
both seem pretty good. Stylus is maybe a bit more sleek, but LESS is a lot more popular. I like that either can be compiled in the browser while developing. That simplifies things.

http://lesscss.org/#usage

http://www.google.com/search?q=css+less+sass&aq=f&oq=css+less+sass&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8#hl=en&client=ubuntu&hs=89x&channel=cs&sclient=psy-ab&q=css+preprocessor&oq=css+pre&gs_l=serp.1.1.0l4.139810.140309.0.142905.4.4.0.0.0.1.256.632.0j3j1.4.0.les%3B..0.0...1c.1.5.psy-ab._OuZsX4ZfEc&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.43287494,d.aWc&fp=aa79bc8eab752bf1&biw=774&bih=850
http://en.blog.wordpress.com/2012/12/21/css-sass-less/
http://en.wikipedia.org/wiki/LESS_(stylesheet_language)
http://lesscss.org/
http://lesscss.org/#usage
https://github.com/cloudhead/less.js
http://css-tricks.com/poll-results-popularity-of-css-preprocessors/
http://www.google.com/search?q=less+vs+stylus&aq=f&oq=less+vs+stylus&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8
http://blog.myfriendbrad.com/post/20861295678/sass-vs-less-vs-stylus
http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
https://gist.github.com/paulmillr
http://www.google.com/search?q=stylus+css&aq=f&oq=stylus+css&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8
http://learnboost.github.com/stylus/docs/import.html
http://learnboost.github.com/stylus/try.html
view-source:http://learnboost.github.com/stylus/try.html
http://www.google.com/search?q=codemirror&aq=f&oq=codemirror&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8
http://codemirror.net/
http://codemirror.net/demo/resize.html


investigating modular javascript (using require.js) a bit more
getting a better feel for it

still not 100% comfortable with arguments/parameters to functions
no named parameters it seems

more reading about closures and modules

reading up on closures

looking at tidesdk
spin off from titanium for desktop specific apps

there is also XULRunner for Mozilla


thinking about javascript based moments library again

https://www.google.com/search?q=jquery+css&oq=jquery+css&aqs=chrome.0.57j60l4j62.2333&sourceid=chrome&ie=UTF-8#hl=en&sugexp=les%3B&gs_rn=2&gs_ri=serp&gs_mss=jquery%20css%20change%20c&tok=iBZdKSKTcN0seMjrlzMmJg&pq=jquery%20css%20change%20class%20attribute&cp=11&gs_id=38&xhr=t&q=jquery+on+load&es_nrs=true&pf=p&tbo=d&sclient=psy-ab&oq=jquery+on+l&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&bvm=bv.41934586,d.aWc&fp=e1f9056ea2a790b0&biw=1040&bih=745
http://api.jquery.com/ready/
http://api.jquery.com/css/
http://www.jquery4u.com/dynamic-css-2/change-css-jquery/
https://www.google.com/search?q=div+background+image+opacity&aq=f&oq=div+background+image+opacity&aqs=chrome.0.57j0l3.5522&sourceid=chrome&ie=UTF-8
http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements
https://www.google.com/search?q=javascript+split+string&oq=javascript+split+string&aqs=chrome.0.57j60l2j62l3.3718&sourceid=chrome&ie=UTF-8#hl=en&tbo=d&sclient=psy-ab&q=_.each+break&oq=_.each+break&gs_l=serp.3..0j0i30l3.72377.74738.10.75000.12.9.0.3.3.0.140.943.4j5.9.0.les%3B..0.0...1c.1.2.serp.LftPH5Q1WBw&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&bvm=bv.41934586,bs.1,d.aWc&fp=109a055c9b2c7613&biw=1068&bih=790
http://stackoverflow.com/questions/8779799/how-to-break-the-each-function-in-underscore-js
http://www.w3schools.com/js/js_break.asp
http://stackoverflow.com/questions/143847/best-way-to-find-an-item-in-a-javascript-array
http://www.echoecho.com/javascript6.htm
http://www.w3schools.com/jsref/jsref_parseint.asp
http://stackoverflow.com/questions/1133770/how-do-i-convert-a-string-into-an-integer-in-javascript
http://www.w3schools.com/jsref/jsref_length_array.asp
http://www.w3schools.com/jsref/jsref_split.asp
https://www.google.com/search?q=underscore+js&oq=underscore+js&aqs=chrome.0.57j60j64j62l3.6958&sourceid=chrome&ie=UTF-8
http://backbonejs.org/
http://underscorejs.org/#without
http://lodash.com/
http://www.cloudflare.com/plans


misc javascript related links

http://knockoutjs.com/documentation/style-binding.html
Knockout : The "style" binding
http://knockoutjs.com/documentation/template-binding.html
Knockout : The "template" binding
http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html
JavaScript Style Attributes
http://www.google.com/search?client=ubuntu&channel=fs&q=inline+css&ie=utf-8&oe=utf-8#hl=en&sugexp=les%3B&gs_rn=1&gs_ri=serp&gs_mss=td%20center%20i&pq=td%20center%20image%20vertically&cp=15&gs_id=3m6&xhr=t&q=javascript+if+or&es_nrs=true&pf=p&client=ubuntu&tbo=d&channel=fs&sclient=psy-ab&oq=javascript+if+o&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.41642243,bs.1,d.aWc&fp=9d04b7b3ac738ed3&biw=994&bih=859
javascript if or - Google Search
http://www.echoecho.com/javascript6.htm
Basics : If and Else - JavaScript Tutorial - EchoEcho.Com - Beginners best choice!
http://stackoverflow.com/questions/447539/aligning-image-and-text-vertically-within-td-element
html - Aligning image and text vertically within TD element - Stack Overflow
http://phrogz.net/css/vertical-align/index.html
Understanding vertical-align, or "How (Not) To Vertically Center Content"
http://www.google.com/search?q=javascript+template&ie=UTF-8&sa=Search&channel=fe&client=browser-ubuntu&hl=en#q=javascript+template&hl=en&client=browser-ubuntu&hs=5ko&tbo=d&channel=fe&source=lnt&tbs=qdr:y&sa=X&ei=D9UIUZPED-TWyQGN74HIDw&ved=0CB8QpwUoBQ&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.41642243,bs.1,d.aWc&fp=9d04b7b3ac738ed3&biw=994&bih=885
javascript template - Google Search
http://stackoverflow.com/questions/128949/what-good-template-language-is-supported-in-javascript?rq=1
What good template language is supported in JavaScript? - Stack Overflow
https://developer.mozilla.org/en-US/docs/JavaScript_templates
JavaScript templates | MDN
http://beebole.com/pure/
JavaScript Templates Engine PURE | BeeBole
http://beebole.com/pure/documentation/get-started/
Get Started | PURE
http://beebole.com/pure/documentation/what-is-pure-and-why/
What is PURE & Why ? | PURE
https://github.com/janl/mustache.js
janl/mustache.js · GitHub
https://github.com/defunkt/pystache
defunkt/pystache · GitHub
http://www.google.com/search?client=ubuntu&channel=fs&q=moustache+vs+pure&ie=utf-8&oe=utf-8#q=moustache+vs+pure&hl=en&client=ubuntu&hs=OP5&tbo=d&channel=fs&source=lnt&tbs=qdr:y&sa=X&ei=AXINUfnSLrCayQG3ooFA&ved=0CB8QpwUoBQ&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.41867550,d.aWc&fp=9d04b7b3ac738ed3&biw=994&bih=885
moustache vs pure - Google Search
http://jsperf.com/tuna-templates-vs-mustache-vs-pure-vs-underscore/6
Tuna Templates VS Mustache VS Pure VS Underscore VS Handlebars vs ICanHaz · jsPerf
http://stackoverflow.com/questions/9683287/mu2-vs-mustache-js-should-i-use-the-mu2-module-or-the-mustache-js-module-for-no
node.js - Mu2 vs Mustache.js? Should I use the Mu2 module or the Mustache.js module for nodejs templating - Stack Overflow
http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more
The client-side templating throwdown: mustache, handlebars, dust.js, and more | LinkedIn Engineering
http://akdubya.github.com/dustjs/
dust
http://blog.nu42.com/2012/06/handlebarsjs-only-good-javascript.html
ν42: Handlebars.js: The only good JavaScript template engine?
http://jsperf.com/tuna-templates-vs-mustache-vs-pure-vs-underscore/6
Tuna Templates VS Mustache VS Pure VS Underscore VS Handlebars vs ICanHaz · jsPerf
http://www.google.com/search?client=ubuntu&channel=fs&q=use+jquery+to+modify+css&ie=utf-8&oe=utf-8
use jquery to modify css - Google Search
http://api.jquery.com/css/
.css() | jQuery API Documentation
http://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery
How to change CSS using jquery - Stack Overflow


reading more about underscore

have been grinding on the best way to generate a dynamic page from within javascript, especially using knockout...
the resulting page starts to get pretty heavy with configurations stuffed into 'data-bind' attributes... i like keeping the bindings there,
but I would like an easier way to generate the initial layout...
something closer to the model maybe?

going to sleep on it.

http://www.google.com/search?q=backbone+vs+knockout&aq=0&oq=backbone+vs&sugexp=chrome,mod=17&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8
http://stackoverflow.com/questions/10320074/why-does-knockout-js-have-a-reputation-for-being-better-for-small-projects-back
http://lostechies.com/derickbailey/2011/11/22/backbone-vs-knockout/
http://smus.com/backbone-and-ember/
http://emberjs.com/
http://dev.hasenj.org/post/35572197519
http://www.google.com/search?q=knockout+js&aq=f&oq=knockout+js&sugexp=chrome,mod=17&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8
http://knockoutjs.com/
http://knockoutjs.com/downloads/knockout-2.2.1.js
http://knockoutjs.com/documentation/text-binding.html
http://learn.knockoutjs.com/#/?tutorial=custombindings
http://www.google.com/search?q=javascript+change+css&aq=f&oq=javascript+change+css&sugexp=chrome,mod=17&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8#hl=en&client=ubuntu&hs=kt2&tbo=d&channel=cs&sclient=psy-ab&q=javascript+manage+css&oq=javascript+manage+css&gs_l=serp.3...95121.99650.0.100416.21.16.0.5.5.0.338.3370.1j7j5j3.16.0.les%3B..0.0...1c.1.zDIDPB1pKRg&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.41248874,d.aWM&fp=ade360d3be480845&biw=1193&bih=944
http://stackoverflow.com/questions/566203/changing-css-values-with-javascript
http://stackoverflow.com/questions/2221160/how-to-change-a-css-class-style-through-javascript?rq=1
http://www.google.com/search?q=javascript+append+item+to+array&oq=javascript+append+item+to+array&sugexp=chrome,mod=17&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8



jotting down notes on different libraries

revisting backbone...
has promise
but I'm leaning more toward knockout at this point.

I know that backbone doesn't enforce any one way to manage data on the client side and how that data is tied to the DOM. I can see where that could be a benefit for some developers with a stronger preference for one way or another. I don't have much preference at this point, and I would be happy to have something existing manage that for me.

http://www.google.com/search?q=backbone+js&aq=f&oq=backbone+js&sugexp=chrome,mod=17&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8
http://backbonejs.org/
https://developer.mozilla.org/en-US/docs/JSON#toJSON()_method
http://underscorejs.org/#bind
http://lodash.com/
http://vimeo.com/44154599
http://www.google.com/search?q=javascript+_.&aq=f&oq=javascript+_.&sugexp=chrome,mod=17&sourceid=chrome&client=ubuntu&channel=cs&ie=UTF-8
http://stackoverflow.com/questions/5418279/what-does-means-here
http://backbonejs.org/#FAQ-why-backbone


keep coming back to python to javascript translators
but I think the real key is going to be to work natively with useful libraries created for DOM interaction.

http://jaredforsyth.com/projects/pjs/
https://github.com/jabapyth/PJs
http://chargen.blogspot.com/2011/08/survey-of-python-to-javascript.html

reading up


on this page there is a nice description of the single threaded nature of javascript:
http://javascript.info/tutorial/events-and-timing-depth


this snippet displays the latency on your browser for executing the next cycle:

var i = 0, diff = 0, d = new Date()

var timer = setTimeout(function() {
diff += new Date() - d
timer = setTimeout(arguments.callee, 0)
if (i++==1000) {
clearTimeout(timer)
alert("Resolution: "+diff/i)
}
d = new Date()
}, 0)


The key to the above, and many timing issues in javascript is:
setTimeout(function_call, 0)

also some considerations for making sure that changes to the DOM are re-rendered before continuing to the next display update.


http://www.google.com/webhp?sourceid=chrome-instant&ie=UTF-8#hl=en&tbo=d&output=search&sclient=psy-ab&q=browser%20event%20timing&oq=&gs_l=&pbx=1&fp=4ed87bf74c3b6306&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.41018144,d.aWc&biw=987&bih=887
http://www.w3.org/TR/workers/


https://www.google.com/search?q=web%20based%20editor&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&source=hp&channel=np
https://www.google.com/search?q=web%20based%20editor&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&source=hp&channel=np
http://www.smashingapps.com/2010/12/07/11-robust-web-based-editors-to-code-directly-from-your-browser.html
http://www.smashingapps.com/2010/12/07/11-robust-web-based-editors-to-code-directly-from-your-browser.html
https://www.google.com/search?q=javascript+text+editor&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb
https://www.google.com/search?q=javascript+text+editor&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb
http://socialcompare.com/en/comparison/javascript-online-rich-text-editors
http://socialcompare.com/en/comparison/javascript-online-rich-text-editors
https://www.google.com/search?q=javascript+code+editor&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb
https://www.google.com/search?q=javascript+code+editor&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb
http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors
http://codemirror.net/
CodeMirror
http://codemirror.net/demo/emacs.html
CodeMirror: Emacs bindings demo
http://codemirror.net/doc/manual.html
CodeMirror: User Manual
http://marijnhaverbeke.nl/blog/#cm-internals
Flows of energy
https://github.com/marijnh/CodeMirror/tree/master/lib/util
CodeMirror/lib/util at master · marijnh/CodeMirror · GitHub
http://www.ymacs.org/
http://www.ymacs.org/
http://codemirror.net/1/story.html
Implementing a Syntax-Highlighting JavaScript Editor In JavaScript
https://www.google.com/search?q=designMode&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb#hl=en&sugexp=les%3Bcpsugrpq2high&gs_nf=3&gs_rn=1&gs_ri=serp&tok=vxIjLwd-31eEp58T9yUsfQ&pq=designmode&cp=12&gs_id=hm&xhr=t&q=codeMirror+vs+ace&pf=p&client=firefox-a&tbo=d&rls=org.mozilla:en-US%3Aofficial&channel=fflb&sclient=psy-ab&oq=codeMirror+v&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&bvm=bv.1355325884,d.dmQ&fp=bbcdca4f4ff7f7a5&bpcl=39967673&biw=1037&bih=628
codemirror vs ace - Google Search
http://endofline.wordpress.com/2011/01/25/3-browser-based-editors-to-watch/
3 Browser Based Editors to Watch | End of Line
http://sandeep.shetty.in/2011/05/codemirror-vs-ace.html
Sandeep Shetty's Blog: CodeMirror vs. Ace
http://ace.ajax.org/#nav=about
ACE - The High Performance Code Editor for the Web
https://c9.io/site/pricing/
Sign up for Standard or Premium! | Cloud9 IDE | Online IDE – Your code anywhere, anytime
https://github.com/ajaxorg/ace
ajaxorg/ace · GitHub
http://ace.ajax.org/build/kitchen-sink.html
Ace Kitchen Sink


finished a first draft of browser extension for chrome
went ahead and published it just to get it out there.

requested [2012.11.18 11:28:58]
browser plugin for routing links
should override right click when active
allow up to 8 options in cardinal directions
(more as standard right click list)

also [2012.11.29 17:57:38]
moving directional menu idea to extension todo list, but not sure that it will be necessary


link_router extension for chrome is working now
looking into a way to publish it.


browser plugin work

working on creating a javascript based port of the moments module

i like the approach of require.js for modular code in python

oscillating between coffeescript, pyjs, and just straight javascript.
functions with variable number of arguments are cumbersome with straight javascript
i think that might lead to the point where development must be done with a local server rather than a local file... this might be the same issue as pyjs though...
hmm.

reading about requirejs some more...

I think that is one of the things that makes me less inclined towared pyjs...
it's handy to convert existing code,
but the output is not as readable, and not a standard approach to strucutring javascript source. It makes sense, and if you never want to work in javascript directly then it's not a big deal. That might limit the appeal of the modules though, so for something general purpose that may be bad.

https://www.google.com/search?q=pyjs+open+file&oq=pyjs+open+file&aqs=chrome.0.57j0l3.13299&sugexp=chrome,mod=0&sourceid=chrome&ie=UTF-8
https://groups.google.com/forum/?fromgroups=#!topic/pyjs-users/Tn22Jx6-_bU
https://github.com/pyjs/pyjs
https://github.com/pyjs/pyjs/wiki/GettingStarted
https://github.com/pyjs/pyjs/blob/master/INSTALL.txt
https://www.google.com/search?q=coffee+script&aq=f&oq=coffee+script&aqs=chrome.0.57j5j0l2.4364&sugexp=chrome,mod=0&sourceid=chrome&ie=UTF-8
http://coffeescript.org/
file:///c/moments/moments/output/timestamp.html
https://www.google.com/search?q=convert+javascript+object+to+json&aq=0&oq=convert+javascrip&aqs=chrome.1.57j0l3j62l2.5233&sugexp=chrome,mod=0&sourceid=chrome&ie=UTF-8
http://stackoverflow.com/questions/4162749/convert-js-object-to-json-string
https://www.google.com/search?q=coffeescript+vs+typescript&aq=1&oq=coffeescript+vs&aqs=chrome.2.0j57j0l2.10005&sugexp=chrome,mod=0&sourceid=chrome&ie=UTF-8#hl=en&tbo=d&sclient=psy-ab&q=coffeescript+vs+dart&oq=coffeescript+vs&gs_l=serp.1.3.0l4.263406.264021.0.267345.2.2.0.0.0.0.504.951.4-1j1.2.0.les%3B..0.0...1c.1.8E9drlUHZ2s&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&fp=ff999713c9217bd7&bpcl=38897761&biw=1102&bih=696
https://www.google.com/search?q=dart&oq=dart&aqs=chrome.0.57j60l3j59j60.676&sugexp=chrome,mod=0&sourceid=chrome&ie=UTF-8#hl=en&tbo=d&sclient=psy-ab&q=dart+javascript+comparison&oq=dart+java&gs_l=serp.1.1.0l4.238154.238888.0.240855.5.4.0.1.1.0.132.431.2j2.4.0.les%3B..0.0...1c.1.NRIua_F5-wE&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&fp=ff999713c9217bd7&bpcl=38897761&biw=1102&bih=696
http://www.dartlang.org/docs/technical-overview/
http://blog.sethladd.com/2012/01/vanilla-dart-ftw.html
https://groups.google.com/a/dartlang.org/forum/?fromgroups=#!topic/misc/YeYcRVkCrns


https://www.google.com/search?q=html%20canvas%20wave%20form&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&source=hp&channel=np
html canvas wave form - Google Search
http://waveformjs.org/#fly
Waveform.js
http://stackoverflow.com/questions/6170169/waveform-visualization-in-javascript-from-audio
html5 - Waveform visualization in JavaScript from audio - Stack Overflow
https://wiki.mozilla.org/Audio_Data_API
Audio Data API - MozillaWiki
http://www.html5multimedia.com/code/ch11/moz-audio-api-waveform.html
Mozilla Audio API - Audio Waveform
http://www.nihilogic.dk/labs/pocket_full_of_html5/#presets/circular.js
All this is done in HTML5 by the way.
http://www.generalfuzz.net/
general fuzz
http://www.nihilogic.dk/labs/
Nihilogic : The Labs - Experiments in JavaScript, Canvas and DHTML
https://www.google.com/search?q=html5+canvas+select&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb
html5 canvas select - Google Search
http://stackoverflow.com/questions/2801416/html5-canvas-select-drag-and-drop-features-in-a-js-lib
javascript - HTML5 Canvas + select / drag-and-drop features in a JS lib? - Stack Overflow
http://raphaeljs.com/
Raphaël—JavaScript Library
http://raphaeljs.com/reference.html#Element.getSubpath
Raphaël Reference
http://raphaeljs.com/icons/
Icons
https://www.google.com/search?q=raphael+selection&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
raphael selection - Google Search
http://stackoverflow.com/questions/11785366/raphael-selection-assistance
javascript - raphael selection assistance - Stack Overflow
http://stackoverflow.com/questions/5844927/selecting-multiple-svg-elements-and-dragging-them-in-raphael-js
selection - selecting multiple svg elements and dragging them in Raphael.js - Stack Overflow

these libraries look promising for making CSS more manageable:

http://code.google.com/p/css3-mediaqueries-js/
http://lesscss.org/

I think I came across less being used with other javascript library... backbone.js.

moving elements:
https://www.google.com/search?q=html5%20drag%20and%20drop&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&source=hp&channel=np#hl=en&client=firefox-a&rls=org.mozilla:en-US%3Aofficial&channel=np&sclient=psy-ab&q=html5+get+position+of+element+after+drag&oq=html5+get+position+of+element+after+drag&gs_l=serp.3...109773.117585.3.117824.34.30.0.0.0.0.1611.17490.0j2j2j2j2j9j3j3j2.25.0...0.0...1c.BjQep709IGs&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=cacde5bfcc741c6a&biw=994&bih=616
https://www.google.com/search?q=html5%20drag%20and%20drop&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&source=hp&channel=np#hl=en&client=firefox-a&rls=org.mozilla:en-US%3Aofficial&channel=np&sclient=psy-ab&q=html5+get+position+of+element+after+drag&oq=html5+get+position+of+element+after+drag&gs_l=serp.3...109773.117585.3.117824.34.30.0.0.0.0.1611.17490.0j2j2j2j2j9j3j3j2.25.0...0.0...1c.BjQep709IGs&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=cacde5bfcc741c6a&biw=994&bih=616
http://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the-screen
http://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the-screen
http://stackoverflow.com/questions/3977596/how-to-make-divs-in-html5-draggable-for-firefox
http://stackoverflow.com/questions/3977596/how-to-make-divs-in-html5-draggable-for-firefox
http://www.w3schools.com/html5/html5_draganddrop.asp
http://www.w3schools.com/html5/html5_draganddrop.asp
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_draganddrop
https://www.google.com/search?q=jquery+move+element&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb
jquery move element - Google Search
http://stackoverflow.com/questions/4998757/moving-elements-with-jquery
moving elements with jquery - Stack Overflow
http://jsfiddle.net/pHwMK/
Edit this Fiddle - jsFiddle


recent questions, searches

http://documentcloud.github.com/backbone/#FAQ-nested
Backbone.js
http://documentcloud.github.com/backbone/examples/todos/index.html
Backbone.js Todos
http://documentcloud.github.com/backbone/docs/todos.html
todos.js
http://www.google.com/search?q=jquery+select+this&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a#hl=en&client=firefox-a&rls=org.mozilla:en-US%3Aofficial&sclient=psy-ab&q=jquery+href+value&oq=jquery+href&aq=1&aqi=g10&aql=&gs_l=serp.1.1.0l10.2131665.2132280.16.2134946.4.3.0.1.1.1.384.986.2-1j2.3.0...0.0.Bo6ztoSgZKA&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=ced6ee9c13f8150d&biw=927&bih=679
jquery href value - Google Search
http://stackoverflow.com/questions/872217/jquery-how-to-extract-value-from-href-tag
JQuery How to extract value from href tag? - Stack Overflow
http://api.jquery.com/text/
.text() – jQuery API
http://stackoverflow.com/questions/1835440/jquery-changing-css-class-to-div
jQuery changing css class to div - Stack Overflow
http://getfirebug.com/logging
Firebug and Logging : Firebug
http://stackoverflow.com/questions/164397/javascript-how-do-i-print-a-message-to-the-error-console
debugging - JavaScript: How do I print a message to the error console? - Stack Overflow
http://www.echoecho.com/javascript6.htm
Basics : If and Else - JavaScript Tutorial - EchoEcho.Com - Beginners best choice!
http://api.jquery.com/each/
.each() – jQuery API
http://stackoverflow.com/questions/351409/appending-to-array
javascript - Appending to array - Stack Overflow
http://stackoverflow.com/questions/8232776/javascript-split-string-to-array-of-int
jquery - javascript split string to array of int - Stack Overflow
http://forum.jquery.com/topic/jquery-how-can-i-select-an-elements-parent
[jQuery] How can I select an element's parent? - jQuery Forum
http://jqueryui.com/demos/droppable/#default
jQuery UI - Droppable Demos & Documentation
http://stackoverflow.com/questions/4813219/jquery-checkbox-value
jquery checkbox value - Stack Overflow
http://stackoverflow.com/questions/551538/jquery-value-of-element
jquery value of element - Stack Overflow
http://stackoverflow.com/questions/306583/this-selector-and-children
jquery - $(this) selector and children? - Stack Overflow
http://www.google.com/search?q=coffee+script&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
coffee script - Google Search
http://coffeescript.org/
CoffeeScript


working on comparisons between python and javascript
few gotchas that still get me

it seems like migrating toward more javascript based foundations might make web applications easier

I can see the benefit of something like backbone.js

I am still a little wary of having a non-html-only compatible web app

but at some point, to have a compelling user experience (responsive, intuitive, etc), the traditional approach breaks down (server request, response)



more model based frameworks
going to start with backbone, see how that goes...

http://www.google.com/search?q=backbone%20js&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&source=hp&channel=np
backbone js - Google Search
http://www.google.com/search?hl=en&client=firefox-a&hs=QNI&rls=org.mozilla:en-US:official&channel=np&q=knockout+js&revid=1360056184&sa=X&ei=tbWdT8NEiqDxBOeR7aMP&ved=0CCcQ1QIoAA&biw=866&bih=687
knockout js - Google Search
http://knockoutjs.com/
Knockout : Home
http://www.google.com/search?hl=en&client=firefox-a&hs=QNI&rls=org.mozilla:en-US:official&channel=np&q=spine+js&revid=1360056184&sa=X&ei=tbWdT8NEiqDxBOeR7aMP&ved=0CCkQ1QIoAg&biw=866&bih=687
spine js - Google Search
http://spinejs.com/pages/examples
Spine
http://www.google.com/search?hl=en&client=firefox-a&hs=QNI&rls=org.mozilla:en-US:official&channel=np&q=sammy+js+vs+backbone+js&revid=1360056184&sa=X&ei=tbWdT8NEiqDxBOeR7aMP&ved=0CCsQ1QIoBA&biw=866&bih=687
sammy js vs backbone js - Google Search
http://groups.google.com/group/sammyjs/browse_thread/thread/3891f892e25916dc
Backbone.js vs. sammy vs. others? - Sammy.js | Google Groups
http://www.google.com/search?hl=en&client=firefox-a&hs=QNI&rls=org.mozilla:en-US:official&channel=np&q=sammy+js+vs+backbone+js&revid=1360056184&sa=X&ei=tbWdT8NEiqDxBOeR7aMP&ved=0CCsQ1QIoBA&biw=866&bih=687#hl=en&client=firefox-a&rls=org.mozilla:en-US%3Aofficial&channel=np&sclient=psy-ab&q=sammy+js+&oq=sammy+js+&aq=f&aqi=g1g-s1g2&aql=&gs_nf=1&gs_l=serp.3..0j0i10j0l2.328026.328026.0.328476.1.1.0.0.0.0.171.171.0j1.1.0.EfVRx9g4_v0&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=af46cba8562d9be&biw=866&bih=687
sammy js - Google Search
http://sammyjs.org/intro
Sammy.js / A Small Web Framework with Class / RESTFul Evented JavaScript
http://backbonejs.org/
Backbone.js
http://documentcloud.github.com/backbone/
Backbone.js
https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites
Tutorials, blog posts and example sites · documentcloud/backbone Wiki · GitHub
http://documentcloud.github.com/backbone/examples/todos/index.html
Backbone.js Todos
https://github.com/documentcloud/backbone
documentcloud/backbone · GitHub
http://documentcloud.github.com/underscore/
Underscore.js
https://github.com/documentcloud/underscore/
documentcloud/underscore · GitHub


have been working on concepts for sequencer in a browser representation

downloading backbone and underscore javascript libraries so they can be investigated for use in a web application

http://www.google.com/search?q=javascript%20drag%20and%20drop&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&source=hp&channel=np#hl=en&client=firefox-a&hs=Ibi&rls=org.mozilla:en-US%3Aofficial&channel=np&sclient=psy-ab&q=javascript+drag+item&oq=javascript+drag+item&aq=f&aqi=g-v1&aql=&gs_nf=1&gs_l=serp.3..0i15.153379.154479.0.155491.5.4.0.1.1.1.313.1052.2-3j1.5.0.3ceGDpsDlSk&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=6444ccfd1295e99d
javascript drag item - Google Search
http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices
jquery - Javascript Drag and drop for touch devices - Stack Overflow
http://www.google.com/search?q=javascript+libraries&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a#q=javascript+libraries+comparison&hl=en&client=firefox-a&hs=Ghi&tbo=1&rls=org.mozilla:en-US:official&output=search&source=lnt&tbs=qdr:m&sa=X&ei=KrWQT__uAZTpgQe-sfGeBg&ved=0CAcQpwUoBA&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=6444ccfd1295e99d
javascript libraries comparison - Google Search
http://news.ycombinator.com/item?id=3848683
Compare JS MVC frameworks implementing the same site: TodoMVC | Hacker News
http://socialcompare.com/en/comparison/javascript-graphs-and-charts-libraries
Javascript Graphs and Charts libraries | Comparison tables - SocialCompare
http://en.wikipedia.org/wiki/JavaScript_library
JavaScript library - Wikipedia, the free encyclopedia
https://developers.google.com/speed/libraries/
Make the Web Faster — Google Developers
http://www.google.com/search?q=backbone+js&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
backbone js - Google Search
http://documentcloud.github.com/backbone/
Backbone.js
https://github.com/documentcloud/backbone/wiki/Projects-and-Companies-using-Backbone
Projects and Companies using Backbone · documentcloud/backbone Wiki · GitHub
http://documentcloud.github.com/backbone/#examples
Backbone.js
http://zeptojs.com/
Zepto.js: the aerogel-weight jQuery-compatible JavaScript library
http://cubiq.org/iscroll
iScroll
http://www.google.com/search?q=underscore+js&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
underscore js - Google Search
http://documentcloud.github.com/underscore/
Underscore.js
http://sass-lang.com/
Sass - Syntactically Awesome Stylesheets
http://compass-style.org/
Compass Home | Compass Documentation
http://lesscss.org/
LESS « The Dynamic Stylesheet language
http://coffeescript.org/
CoffeeScript
http://requirejs.org/
RequireJS
http://www.google.com/search?q=node+js&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
node js - Google Search
http://en.wikipedia.org/wiki/Nodejs
Node.js - Wikipedia, the free encyclopedia
http://nodejs.org/
node.js
http://en.wikipedia.org/wiki/Content_delivery_network
Content delivery network - Wikipedia, the free encyclopedia


http://www.google.com/search?q=jquery+sortable&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a#hl=en&client=firefox-a&rls=org.mozilla:en-US%3Aofficial&sclient=psy-ab&q=jquery+post+large+list&oq=jquery+post+large+list&aq=f&aqi=&aql=&gs_nf=1&gs_l=serp.3...20270.20735.6.21304.5.5.0.0.0.4.230.887.0j4j1.5.0.LwlgfnZ9W_M&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=6444ccfd1295e99d
jquery post large list - Google Search
http://stackoverflow.com/questions/5978202/jquery-large-list-performance
json - jQuery Large List Performance - Stack Overflow
http://jquery-howto.blogspot.com/2009/02/5-easy-tips-on-how-to-improve-code.html
JQuery HowTo: 5 easy tips on how to improve code performance with huge data sets in jQuery
http://codeigniter.com/forums/viewthread/75166/
Session Size Limit... | CodeIgniter Forums
http://stackoverflow.com/questions/6564316/jquery-ui-sortable-toarray-skips-1-item
javascript - jQuery ui sortable toArray skips 1 item - Stack Overflow
http://jqueryui.com/demos/sortable/#option-zIndex
jQuery UI - Sortable Demos & Documentation
http://www.google.com/search?q=jquery+post+request&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
jquery post request - Google Search
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
5 Ways to Make Ajax Calls with jQuery | Nettuts+
http://api.jquery.com/category/ajax/
Ajax – jQuery API
http://api.jquery.com/jQuery.post/
jQuery.post() – jQuery API
http://www.google.com/search?q=jquery+sortable+with+position&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a#hl=en&client=firefox-a&hs=Ppv&rls=org.mozilla:en-US%3Aofficial&sclient=psy-ab&q=jquery+sortable+with+position+field&oq=jquery+sortable+with+position+field&aq=f&aqi=q-A1&aql=&gs_nf=1&gs_l=serp.3..33i29.11665.12496.0.13740.6.6.0.0.0.0.288.1490.0j1j5.6.0.U67JnTYCSFM&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=6444ccfd1295e99d
jquery sortable with position field - Google Search
http://stackoverflow.com/questions/2979643/jquery-ui-sortable-position
jQuery UI Sortable Position - Stack Overflow
http://jsfiddle.net/HgAQu/
Edit this Fiddle - jsFiddle
http://www.google.com/search?q=jquery+list+to+json&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
jquery list to json - Google Search
http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery
javascript - Serializing to JSON in jQuery - Stack Overflow
https://raw.github.com/douglascrockford/JSON-js/master/json2.js
https://raw.github.com/douglascrockford/JSON-js/master/json2.js
http://stackoverflow.com/questions/4327042/convert-select-list-to-json-using-jquery
Convert select list to JSON using jQuery - Stack Overflow


reading about different javascript libraries

http://www.codecademy.com/#!/exercises/0
Learn to code | Codecademy
http://www.codecademy.com/jobs
Jobs | Codecademy
http://documentcloud.github.com/backbone/
Backbone.js
http://documentcloud.github.com/backbone/#examples
Backbone.js
http://m.airbnb.com/
Airbnb Mobile
http://handlebarsjs.com/
Handlebars.js: Minimal Templating on Steroids
http://zeptojs.com/
Zepto.js: the aerogel-weight jQuery-compatible JavaScript library
http://sass-lang.com/
Sass - Syntactically Awesome Stylesheets
http://cubiq.org/iscroll
iScroll

cool visualization of bart trains arriving with javascript
http://bl.ocks.org/2009621

maybe multiple select isn't the right way to think of these...
maybe different lists is the way to go
or nested sortable lists..

looking into different options for a sortable list, preferably with multiple select options...
would be nice if click,shift-click worked to select

https://www.google.com/webhp?sourceid=chrome-instant&ix=seb&ie=UTF-8&ion=1#hl=en&gs_nf=1&tok=DklboIeJEihNPt0ztsJMvQ&cp=36&gs_id=6c&xhr=t&q=jquery+sortable+list+multiple+selection&pq=jquery+sortable+list+with+position&pf=p&tbo=1&sclient=psy-ab&oq=jquery+sortable+list+multiple+select&aq=0w&aqi=q-w1&aql=&gs_sm=&gs_upl=&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.,cf.osb&fp=cb5928975d0a7e48&ix=seb&ion=1&biw=1024&bih=514
http://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items
http://stackoverflow.com/questions/8512856/sort-multiple-selected-items-in-jquery-sortable
http://jsfiddle.net/benstenson/qPJFe/
http://archive.plugins.jquery.com/project/multisortable
http://archive.plugins.jquery.com/content/multisortable-121
http://www.mccran.co.uk/index.cfm/2011/6/17/JQuery-Sortable-Drag-and-Drop-lists-and-a-server-side-AJAX-save
http://jqueryui.com/demos/sortable/
http://stackoverflow.com/questions/2979643/jquery-ui-sortable-position
http://jsfiddle.net/HgAQu/
http://www.mccran.co.uk/examples/jquery-multi-drag-drop/
http://www.tripwiremagazine.com/2012/02/jquery-filter-sort-plugins.html
http://archive.plugins.jquery.com/search/node/sortable%20type%3Aproject_project
http://archive.plugins.jquery.com/project/NestedSortable

http://dragsort.codeplex.com/
http://archive.plugins.jquery.com/search/node/sort
http://codershelpdesk.com/2011/12/06/10-best-jquery-drag-and-drop-plugins/
http://www.ericbieller.com/2010/06/24/how-to-create-a-simple-drag-and-drop-with-jquery/
http://stackoverflow.com/questions/tagged/drag-and-drop
http://stackoverflow.com/questions/tagged/drag-and-drop+javascript
http://stackoverflow.com/questions/2870432/how-can-i-get-jquery-uis-draggable-and-sortable-functions-to-work-on-the-iphone
http://stackoverflow.com/questions/tagged/drag-and-drop+jquery
http://www.redips.net/javascript/drag-and-drop-content-shift/
http://www.redips.net/download/


This is a nice working example, that seems simple enough
no longer maintained
(forgot about multiple select at this point though)

http://tool-man.org/examples/sorting.html
view-source:http://tool-man.org/examples/sorting.html
view-source:http://tool-man.org/examples/sorting.html
http://blog.tool-man.org/2005/04/16/saving-a-reordered-list/
http://tool-man.org/examples/
http://tool-man.org/examples/LICENSE.txt
http://tool-man.org/examples/dragging.html


finished watching javascript for python programmers talk

reviewing video from pycon by ian bicking about python and javascript
making notes
pausing to understand.

comparisons
http://localhost:8000/tag/foo
Error 500: Internal Server Error
http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=javascript+python+ian+bicking
javascript python ian bicking - Google Search
http://ontwik.com/javascript/pycon-2011-javascript-for-people-who-know-python/
PyCon 2011: Javascript for people who know Python
file:///c/technical/web/javascript_vs_python.html
javascript_vs_python.html
http://daringfireball.net/projects/markdown/syntax#precode
Daring Fireball: Markdown Syntax Documentation
http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=javascript+vs+python#pq=javascript%20python%20comparison&hl=en&sugexp=gsih&cp=26&gs_id=34&xhr=t&q=javascript+for+python+programmers&qe=amF2YXNjcmlwdCBmb3IgcHl0aG9uIHBvcmc&qesig=yIl4u1YSzG9yQ4S2SmKuKA&pkc=AFgZ2tnUxZLZqmQusU_F8Hyyv_gZYmpfzMt2t97e2l0zTqR6o6mRA2vBdt4BJmD7I2rFEVFBOWz6cM30RPqxrw-IkXHaWwnMBw&pf=p&sclient=psy&source=hp&pbx=1&oq=javascript+for+python+porg&aq=0l&aqi=g-l1&aql=f&gs_sm=&gs_upl=&bav=on.2,or.r_gc.r_pw.&fp=4314f23e9084643a&biw=1024&bih=514
javascript for python programmers - Google Search
http://jfine.bitbucket.org/docs/js4py/
JavaScript for Python Programmers — JavaScript for Python Programmers v0.1c documentation
http://jfine.bitbucket.org/docs/js4py/gotcha-quiz.html
Gotcha quiz — JavaScript for Python Programmers v0.1c documentation
http://jfine.bitbucket.org/docs/js4py/gotcha-answers.html#equality-gotcha-answer
Gotcha answers — JavaScript for Python Programmers v0.1c documentation



watching ian bickings talk at pycon this year
http://ontwik.com/javascript/pycon-2011-javascript-for-people-who-know-python/

reading about objects.

http://www.google.com/search?aq=f&sourceid=chrome&ie=UTF-8&q=javascript+interpreter
javascript interpreter - Google Search
http://mochi.github.com/mochikit/examples/interpreter/
Interpreter - JavaScript Interactive Interpreter
http://stackoverflow.com/questions/112112/javascript-interpreter-to-replace-python
shell - Javascript interpreter to replace Python - Stack Overflow
http://peter.michaux.ca/articles/server-side-javascript-with-rhino-and-jetty
peter.michaux.ca - Server-Side JavaScript with Rhino and Jetty
http://www.google.com/search?aq=f&sourceid=chrome&ie=UTF-8&q=javascript+server
javascript server - Google Search
http://www.infoworld.com/d/application-development/javascript-conquers-the-server-969?page=0,0
JavaScript conquers the server | Application Development - InfoWorld
http://en.wikipedia.org/wiki/Server-side_JavaScript
Server-side JavaScript - Wikipedia, the free encyclopedia
http://nodejs.org/
node.js
http://www.google.com/search?aq=f&sourceid=chrome&ie=UTF-8&q=jquery+offline+documentation
jquery offline documentation - Google Search
http://stackoverflow.com/questions/44763/where-can-i-download-the-jquery-api-documentation
javascript - Where can I download the jQuery API documentation? - Stack Overflow
http://www.jqapi.com/
jQAPI - Alternative jQuery Documentation
http://www.google.com/search?aq=2&oq=jquery+autocomplete+input&sourceid=chrome&ie=UTF-8&q=jquery+autocomplete+input+text
jquery autocomplete input text - Google Search
http://code.google.com/apis/libraries/devguide.html#jqueryUI
Google Libraries API - Developer's Guide - Google Libraries API - Google Code
http://jqueryui.com/download
jQuery UI - Configure your download
http://jqueryui.com/demos/autocomplete/
jQuery UI - Autocomplete Demos & Documentation
http://andrewbadr.com/log/5/using-jquerys-autocomplete-for-text-input-suggestions/
Using jQuery's Autocomplete for Text Input Suggestions
http://www.devbridge.com/projects/autocomplete/jquery/
Ajax Autocomplete for jQuery


http://www.google.com/search?aq=f&sourceid=chrome&ie=UTF-8&q=javascript+interpreter
javascript interpreter - Google Search
http://mochi.github.com/mochikit/examples/interpreter/
Interpreter - JavaScript Interactive Interpreter
http://stackoverflow.com/questions/112112/javascript-interpreter-to-replace-python
shell - Javascript interpreter to replace Python - Stack Overflow
http://peter.michaux.ca/articles/server-side-javascript-with-rhino-and-jetty
peter.michaux.ca - Server-Side JavaScript with Rhino and Jetty
http://www.google.com/search?aq=f&sourceid=chrome&ie=UTF-8&q=javascript+server
javascript server - Google Search
http://en.wikipedia.org/wiki/Server-side_JavaScript
Server-side JavaScript - Wikipedia, the free encyclopedia
http://nodejs.org/
node.js

http://www.google.com/search?aq=1&oq=javascript+autocomplete&sourceid=chrome&ie=UTF-8&q=javascript+autocomplete+textbox
javascript autocomplete textbox - Google Search
http://blogs.sitepoint.com/life-autocomplete-textboxes/
Make Life Easy With Autocomplete Textboxes » SitePoint
http://devthought.com/2008/01/12/textboxlist-meets-autocompletion/
TextboxList meets Autocompletion | Guillermo Rauch's Devthought
http://www.webreference.com/programming/javascript/gr/column5/
Creating a Textbox with JavaScript Auto-Complete - WebReference.com-
http://simpleandeasycodes.blogspot.com/2009/03/javascript-simple-autocomplete-textbox.html
Simple and Easy Codes: Javascript : Simple Autocomplete Textarea or Textbox
http://stackoverflow.com/questions/2483661/javascript-autocomplete-upon-typing
jquery - JavaScript autocomplete upon typing - Stack Overflow
http://stackoverflow.com/questions/1364868/clickable-autocomplete-like-google
jquery - Clickable autocomplete, like google - Stack Overflow

search field on web page
send request to webserver
get json response
show available dropdown options for text field entry on page
(standard on many webpages now)x

/c/technical/instances.txt
/c/technical/web/javascript.txt
/c/technical/web/javascript-tutorial.txt

http://www.google.com/#hl=en&expIds=17259,26767&sugexp=ldymls&xhr=t&q=javascript+multiline+comment&cp=21&qe=amF2YXNjcmlwdCBtdWx0aWxpbmUgY28&qesig=V38rJgstUMbpImIrk0J-bw&pkc=AFgZ2tmKYPk_IW4AOQicSzuf5FGYHyiC48CiM4RqQtknJVL68PcaQwLhdpnG1NVErGu2R6BGFl_GK7j5QRwY-iC03PMSNL33Kw&pf=p&sclient=psy&aq=0&aqi=&aql=&oq=javascript+multiline+co&gs_rfai=&pbx=1&fp=e64ee6e4e8056c32
javascript multiline comment - Google Search
http://docs.jquery.com/Main_Page
Main Page - jQuery JavaScript Library
http://docs.jquery.com/How_jQuery_Works
Tutorials:How jQuery Works - jQuery JavaScript Library
http://api.jquery.com/category/traversing/
Traversing – jQuery API
http://www.google.com/search?client=ubuntu&channel=fs&q=jquery+mouse+over+image+change&ie=utf-8&oe=utf-8#hl=en&expIds=17259,26767,27642&sugexp=ldymls&xhr=t&q=jquery+cycle+load+images&cp=18&qe=anF1ZXJ5IGN5Y2xlIGxvYWQg&qesig=Ke2OrBLTkolS4rF-9SQqPA&pkc=AFgZ2tkagDawdbbqzHtd3lsF-cTNaXhHCq7RpKqsZYBisJmoQ1MdaafFjEMYDwsewdPvFp-93_b7nrvKDRMCHTXEKC9eE70A1w&pf=p&sclient=psy&aq=0&aqi=&aql=&oq=jquery+cycle+load+&gs_rfai=&pbx=1&fp=e64ee6e4e8056c32
jquery cycle load images - Google Search
http://jquery.malsup.com/cycle/
JQuery Cycle Plugin
http://jquery.malsup.com/cycle/basic.html
JQuery Cycle Plugin - Basic Demo
http://jquery.malsup.com/cycle/lite/
JQuery Cycle Lite Plugin
http://jquery.malsup.com/cycle/add.html?v2
JQuery Cycle Plugin - addSlide Demo
http://groups.google.com/group/jquery-en/browse_thread/thread/a368b8563dbb8c5e/1948b4c8fff4c4d3?pli=1
jQuery+Cycle : slideshow with progressive image loading - jQuery (English) | Google Groups
http://www.malsup.com/jquery/cycle/add3.html
JQuery Cycle Plugin - addSlide Demo 3
http://jquery.malsup.com/cycle/more.html?v2.23
JQuery Cycle Plugin - More Demos
http://www.malsup.com/jquery/cycle/add2.html
JQuery Cycle Plugin - addSlide Demo 2
http://jquery.malsup.com/cycle/int2.html
JQuery Cycle Plugin - Intermediate Demos (Part 2)
http://jquery.malsup.com/cycle/options.html
JQuery Cycle Plugin - Option Reference
http://jquery.malsup.com/cycle/basic.html
JQuery Cycle Plugin - Basic Demo
http://www.htmldrive.net/items/show/685/jQuery-cool-hover-Slide-Effect.html
jQuery cool hover Slide Effect | Required:jQuery | Tags:image slideshow | Slideshow & Scroller
http://designm.ag/tutorials/image-rotator-css-jquery/
Create an Image Rotator with Description (CSS/jQuery) - Web Design Blog – DesignM.ag
http://www.sohtanaka.com/web-design/examples/image-rotator/
Image Rotator w/ Teaser - CSS & jQuery Tutorial
http://www.jquery.wisdomplug.com/jquery-plugins/jquery-animation-effects-plugins-jquery-plugins/17-amazing-jquery-rollovers-examples-and-tutorials/
17 Amazing jQuery Rollovers – Examples and Tutorials | jQuery Wisdom
http://jqueryfordesigners.com/image-cross-fade-transition/
Image Cross Fade Transition | jQuery for Designers - Tutorials and screencasts
http://www.pankajpandey.com/2009/03/jquery-image-rollover-with-demo/
Jquery Image rollover with demo | Pankaj Pandey
http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html
Web Developer Blog: jQuery Quick Tip: Rollover images with jQuery
http://stackoverflow.com/questions/540349/change-image-source-using-jquery
html - Change Image Source using jQuery - Stack Overflow


http://www.google.com/#hl=en&expIds=17259,26767,27213,27744&sugexp=ldymls&xhr=t&q=javascript+comment&cp=13&qe=amF2YXNjcmlwdCBjb20&qesig=anY2dpLvOg4vX-mB8880Fg&pkc=AFgZ2tnVmi34LnqDIcPDmExR8Mu9AkulPA-iILRFuRVScAIdbUEvzmkPDw3Tzbzsv64U_ce-MLqXmwds-egzxSBNL4SPHf8cyQ&pf=p&sclient=psy&aq=0&aqi=&aql=&oq=javascript+com&gs_rfai=&pbx=1&fp=9111c1d610a8252
javascript comment - Google Search
http://www.google.com/#hl=en&expIds=17259,26767,27213,27744&sugexp=ldymls&xhr=t&q=jquery+keypress&cp=9&qe=anF1ZXJ5IGtleQ&qesig=HONPJ4fqxWyE78DZLV37rQ&pkc=AFgZ2tnrFdMix0wlAqV71ASfCIgeuDjlUb2-W356KXiSjk7H9O6v_FrMI0qxzFBne8ySeT4kAVyLWvu9-hjVUxlAqGAAUc7qaQ&pf=p&sclient=psy&aq=0&aqi=&aql=&oq=jquery+key&gs_rfai=&pbx=1&fp=4824b41ba0d4cfd8
jquery keypress - Google Search
http://api.jquery.com/keypress/
.keypress() – jQuery API
http://www.google.com/search?client=ubuntu&channel=fs&q=jquery+animate+svg&ie=utf-8&oe=utf-8
jquery animate svg - Google Search
http://stackoverflow.com/questions/3498261/jquery-svg-how-to-animate-an-attribute-value-not-style-property
jQuery, SVG: How to animate an attribute value (not style property)? - Stack Overflow
http://stackoverflow.com/questions/911357/how-can-i-animate-an-attribute-value-not-style-property-with-jquery
How can I animate an attribute value (not style property) with jQuery? - Stack Overflow
http://stackoverflow.com/questions/53997/any-good-ajax-framework-for-google
Any good AJAX framework for Google App Engine apps? - Stack Overflow
http://pythoughts.com/?p=AJAX%2520with%2520Google%2520App%2520Engine%2520%2528Python%2529
PyThoughts — Web Programming
http://docs.jquery.com/Main_Page
Main Page - jQuery JavaScript Library
http://api.jquery.com/jQuery/
jQuery() – jQuery API
http://docs.jquery.com/How_jQuery_Works
Tutorials:How jQuery Works - jQuery JavaScript Library
http://code.google.com/apis/libraries/
Google Libraries API - Google Code
http://docs.jquery.com/Tutorials
Tutorials - jQuery JavaScript Library
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Tutorials:Getting Started with jQuery - jQuery JavaScript Library


$(document).click(
function(event){
alert($(document).height())

});



bespin is now called skywriter
http://mozillalabs.com/skywriter/

don't forget to look in /c/technical/web/template/js
for actual javascript libraries that have been downloaded and stored locally.

having difficulty finding documentation for offline browsing for jquery libraries...
but at least they're available
can try this way

new directory for javascript related notes
I have tried to avoid javascript
to focus on python only
but I think I at least need to know something about some of the libraries available for javascript... jquery, raphaeljs, processing.js, bespin, etc

as they say, it is the lingua franca of the web.

bespin
for online code editing in the cloud
by mozillalabs.

venkman javascript debugger added to firefox

http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs
Which Javascript framework (jQuery vs Dojo vs ... )? - Stack Overflow
http://www.google.com/search?client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&channel=s&hl=en&source=hp&q=jquery&btnG=Google+Search
jquery - Google Search
http://jquery.com/
jQuery: The Write Less, Do More, JavaScript Library
http://docs.jquery.com/Main_Page
Main Page - jQuery JavaScript Library
http://docs.jquery.com/UI
UI - jQuery JavaScript Library
http://docs.jquery.com/UI/Draggable
UI/API/1.8/Draggable - jQuery JavaScript Library
http://www.google.com/search?q=dojo&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
dojo - Google Search
http://www.dojotoolkit.org/
The Dojo Toolkit - Unbeatable JavaScript Tools
http://dojotoolkit.org/license
The Dojo Toolkit - 404
http://docs.jquery.com/UI/Resizable
UI/API/1.8/Resizable - jQuery JavaScript Library
http://api.jquery.com/
jQuery API
http://demos.dojotoolkit.org/demos/skew/
Meet the makers: dojo.workers() | The Dojo Toolkit
http://www.uxebu.com/services/
uxebu - the Ajax and JavaScript Experts