localStorageWrapper.js

jquery plugins

http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/

TodoMVC - Helping you select an MV* framework

https://github.com/addyosmani/todomvc - Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more

JavaScript profiling, Console

console.dir(obj);

console.time("t1")
....
console.timeEnd("t1")

console.profile("p1")
...
console.profileEnd("p1")

console.trace()

console.count("my_fun_count")

http://www.tuttoaster.com/learning-javascript-and-dom-with-console/

Modernizr

http://modernizr.com/  is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

django-gears

https://github.com/gears/django-gears
https://github.com/gears/gears
http://handlebarsjs.com/
https://github.com/learnboost/stylus

Links roundup from dotjs.eu

http://www.cubicweb.org/blogentry/2532796

Chrome developer tools
yeoman
grunt.js
backbone.js
Dart
TypeScriptLang
Express.js
Mocha
Testacular
SASS
Angular.js
Enyo.js
Socket.io
when.js
Coffeescript
Source Maps explained

TypeScript - Playground

TypeScript - Playground

Разработка адаптивного дизайна с помощью jQuery Mobile и CSS3

http://www.ibm.com/developerworks/ru/library/mo-jquery-responsive-design/

JavaScript frameworks

http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/

AngularJS от Google

http://angularjs.org

Chrome Developers Tools

Navigation

Ctrl + O

Ctrl + Shift + O

Ctrl + L

Search

Ctrl+Shift+F

Persisting Changes

1. Upon an external style sheet rule modification, the respective resource text is updated in the Resources panel, and the revision history is stored for such style sheet resources until the DevTools window is closed.
2. Activate the Resources panel, find tutorial.css in the resource tree. Note that the tree node is expandable. Click the arrow next to the node title, and you will see all the resource modifications that you have made above.

Scripts Panel

Pause on Next JavaScript Statement
Pause on Exceptions
Pause on Uncaught Exceptions (click twice)
Break on Subtree Modifications (right click on the Elements' panel tag)

Breakpoints on XHR (XHR breakpoint with empty URL filter will match any XHR)

Breakpoints on JavaScript Event Listeners

Documentation: https://developers.google.com/chrome-developer-tools/docs/overview
Shortcuts: https://developers.google.com/chrome-developer-tools/docs/shortcuts


Video: http://www.youtube.com/watch?v=N8SS-rUEZPg

Slides: http://chrome-devtools-io2011.appspot.com/template/index.html#1

mustache.js

http://mustache.github.com

Вывод прошедшего времени в удобочитаемом виде на JavaScript

function date_from_string(dt){
 // 2011-11-30 15:40:50
 var df = dt.split(' ');
 var d = df[0].split('-');
 var t = df[1].split(':');
 return d1 = new Date(d[0],d[1]-1,d[2],t[0],t[1],t[2]);
}

function diff_date(d1){
 var r = (new Date() - d1)/1000;
 
 var tt = {
   sec: ['{} секунд','{} секунда','{} секунды'],
   min: ['{} минут','{} минута','{} минуты'],
   hour: ['{} часов','{} час','{} часа'],
   day: ['{} дней','{} день','{} дня']
 }
 function sec(x,dtt){
  var r;
  x = x.toFixed(0);
  if(x>=11 && x<=14) r = null
  else {
   var s = '' + x;
   if(s.length>1) s = s.substring(1);
   r = { '1':dtt[1], '2':dtt[2], '3':dtt[2], '4':dtt[2] }[s];
  }
  if(!r) r = dtt[0];
  return r.replace('{}',x)
 }
 
 if(r<60) return sec(r, tt.sec) + ' назад';
 r = r / 60;
 if(r<60) return sec(r, tt.min) + ' назад';
 r = r / 60;
 if(r<24) return sec(r, tt.hour) + ' назад';
 r = r / 24;
 if(r<1) return 'сегодня';
 if(r<2) return 'вчера';
 return sec(r, tt.day) + ' назад';
}