https://github.com/wearehive/project-guidelines
https://watchandcode.com/p/practical-javascript
https://github.com/bpesquet/thejsway/#
После запуска приложения в браузере, нажмите [F12], чтобы открыть Chrome DevTools, потом переключитесь на вкладку Sources, нажмите [Ctrl+P], в строке поиска введите имя требуемого файла.
https://github.com/Bogdan-Lyashenko
https://www.sitepoint.com/event-bubbling-javascript/
transducers
https://habrahabr.ru/company/ruvds/blog/329536/
http://raganwald.com/2017/04/30/transducers.html
https://css-tricks.com/reactive-uis-vanillajs-part-1-pure-functional-style/
https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/
https://github.com/MostlyAdequate/mostly-adequate-guide-ru
https://medium.com/devschacht/glossary-of-modern-javascript-concepts-1198b24e8f56
https://habrahabr.ru/post/317586/ localstorage
https://habrahabr.ru/post/324640/ inheritance
https://habrahabr.ru/post/319894/ vanilla js
http://robertjliguori.blogspot.com/2016/12/interactive-data-visualization-with.html
http://www.discoversdk.com/blog/the-observer-pattern-in-javascript
https://github.com/verekia/js-stack-from-scratch
https://habrahabr.ru/company/nixsolutions/blog/324172/ map/reduce/filter
http://jrsinclair.com/articles/2017/javascript-without-loops/
http://www.applandeo.com/en/functional-like-data-manipulation-javascript/
Fetch API
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
http://getmesh.io/Blog/Make+AJAX-Requests+Great+Again
Crossfitter
http://animateddata.co.uk/articles/crossfilter/
http://robertjliguori.blogspot.com/2016/12/crossfilter-tutorial-by-rusty-klophaus.html
http://robertjliguori.blogspot.com/2016/12/crossfilter-example-piechart-rowchart.html
https://parrisneeds.coffee/2016/12/18/vanillajs-2016/
https://hackernoon.com/who-said-javascript-easy-f4a1d5b399b8#.5vwz2luo7
https://blog.petrovic.gr/2016/12/frontend-development-a-learning-guide/
https://www.codementor.io/johnnyb/tutorials/javascript-cheatsheet-fb54lz08k
https://hackernoon.com/an-ode-to-async-await-7da2dd3c2056#.a6nwkqq17
http://www.discoversdk.com/blog/5-best-way-to-write-and-run-javascript-online
https://habrahabr.ru/company/infopulse/blog/311582/
http://youmightnotneedjquery.com/
http://intercoolerjs.org/ AJAX
http://www.thinksincode.com/2016/10/30/create-a-basic-lexer.html
https://www.youtube.com/watch?v=vkuKW_wuFq4
https://www.youtube.com/watch?v=ZaJWw6X6Pfw
https://www.youtube.com/watch?v=s2lBQY-kuy4
https://www.youtube.com/watch?v=ZWNtxmrA4UY&list=PL8sJahqnzh8JST_ZwTcGG1FHGgKBMcpn6&index=20
http://courses.angularclass.com/courses/modern-javascript
https://www.youtube.com/watch?v=5NIL3Epadj0
https://github.com/nzakas/computer-science-in-javascript
https://github.com/planttheidea/crio Immutable objects
https://www.udemy.com/understand-javascript/
https://github.com/adam-s/js-interview-review
https://github.com/rmurphey/js-assessment
https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/
https://medium.freecodecamp.com/from-zero-to-front-end-hero-part-2-adfa4824da9b#.aia7xvy71
https://jsfiddle.net/ondras/hYfN3/ Excel - like sheet
https://github.com/vasanthk/js-bits
https://advancedweb.hu/2016/05/17/more-readable-js-without-vars/
Functional
http://markonis.github.io/functional/programming/2016/05/03/functional-programmers-toolbox.html
https://habrahabr.ru/company/mailru/blog/327522/
https://tproger.ru/translations/functional-js%e2%80%8a-%e2%80%8awith-examples-1/
https://bethallchurch.github.io/JavaScript-and-Functional-Programming/
http://freecontent.manning.com/javascript-functors-explained/
closures
http://www.ibm.com/developerworks/web/library/wa-use-javascript-closures-efficiently/index.html
https://medium.freecodecamp.com/lets-learn-javascript-closures-66feb44f6a44#.qo76e419p
https://blog.jscrambler.com/12-extremely-useful-hacks-for-javascript/
http://developer.telerik.com/featured/tools-learn-javascript/
https://habrahabr.ru/post/281967/
https://habrahabr.ru/company/mailru/blog/282149/ JS error handling
https://auth0.com/blog/2016/03/15/javascript-module-systems-showdown/
http://www.sitepoint.com/function-expressions-vs-declarations/
https://slack-files.com/T03JT4FC2-F151AAF7A-13fe6f98da
https://github.com/aearly/icepick frozen objects
arrays in JS
https://habrahabr.ru/post/279867/
http://www.sitepoint.com/quick-tip-create-manipulate-arrays-in-javascript/
https://benfrain.com/understanding-native-javascript-array-methods/
http://thejsguy.com/2016/07/30/javascript-for-loop-vs-array-foreach.html
https://www.educative.io/collection/10370001/160001?ref=rprogramming
https://scotch.io/tutorials/learning-javascript-native-functions-and-how-to-use-them
http://blog.benoitvallon.com/category/data-structures-in-javascript/
http://blog.codepen.io/2016/01/27/new-feature-javascript-console/
https://repl.it/languages/javascript online IDE
function isNumeric (num) {
return !isNaN(parseFloat(num)) && !isNaN(Number(num));
}
function isNumeric (value) { return parseFloat(value) === Number(value); }
https://habrahabr.ru/post/276673/
http://chimera.labs.oreilly.com/books/1234000000262 free book online
https://leanpub.com/javascriptallongesix
https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504#.gew3zvtm1
https://www.udacity.com/course/offline-web-applications--ud899
http://watchandcode.com/courses/eloquent-javascript-the-annotated-version/lectures/203644
https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.i8b7dljex
http://developer.telerik.com/featured/leveling-up-your-javascript/
Lazy
http://oli.me.uk/2015/05/31/lazy-arrays-in-javascript/
https://medium.com/@roman01la/understanding-transducers-in-javascript-3500d3bd9624#.wm8q49hg2
https://github.com/cht8687/You-Dont-Need-Lodash-Underscore
https://news.ycombinator.com/item?id=12014860
https://github.com/nzakas/computer-science-in-javascript
http://danmartensen.svbtle.com/events-concurrency-and-javascript
http://danmartensen.svbtle.com/the-anatomy-of-a-javascript-function
http://danmartensen.svbtle.com/type-checking-techniques-in-javascript-part-1
http://danmartensen.svbtle.com/type-checking-techniques-in-javascript-part-2
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
https://watchandcode.com/courses/eloquent-javascript-the-annotated-version
https://github.com/mknichel/javascript-errors/
http://habrahabr.ru/post/264993/
https://github.com/coodict/javascript-in-one-pic
https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
http://www.kirupa.com/html5/closures_in_javascript.htm
http://danmartensen.svbtle.com/how-to-write-mvc-without-a-framework
Functional JS
https://github.com/DrBoolean/mostly-adequate-guide
https://github.com/ajnsit/functional-js/raw/master/functional-js.pdf
http://www.sitepoint.com/higher-order-functions-javascript/
http://www.datchley.name/getting-functional-with-javascript-part-1/
Filter
Like map() it traverses the array from left to right invoking a callback function on each element. The returned value must be a boolean identifying whether the element will be kept or discarded. After all elements have been traversed filter() returns a new array with all elements that returned true
var array=[3,4,5,3,0,5]
var unique_elements = array.filter(function(elem, i, array) {
return array.indexOf(elem) === i;
}
);
console.log(unique_elements)
map
var fahrenheit = [0, 32, 45, 50, 75, 80, 99, 120];
var celcius = fahrenheit.map(function(elem) {
return Math.round((elem - 32) * 5 / 9);
});
console.log(celcius);
reduce
parameters:
array.reduce(function(prevVal, elem, index, array) { ...}, initialValue);
var rockets = [
{ country:'Russia', launches:32 },
{ country:'US', launches:23 },
{ country:'China', launches:16 },
{ country:'Europe(ESA)', launches:7 },
{ country:'India', launches:4 },
{ country:'Japan', launches:3 }
];
var sum = rockets.reduce(function(prevVal, elem) {
return prevVal + elem.launches;
}, 0);
// ES6
//var sum rockets.reduce((prevVal, elem) => prevVal + elem.launches, 0);
console.log(sum)
https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84
http://habrahabr.ru/post/261723/
http://habrahabr.ru/company/hexlet/blog/260427/
https://gist.github.com/ericelliott/d576f72441fc1b27dace
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
http://renderedtext.com/blog/2015/11/18/closures-are-not-magic/
http://www.javascriptenlightenment.com/
http://www.reddit.com/r/javascript/comments/32djsm/decent_written_github_repos_i_can_study_to_learn/
http://www.objectplayground.com/
http://howtonode.org/object-graphs
http://howtonode.org/object-graphs-2
http://howtonode.org/object-graphs-3
http://read.humanjavascript.com/
http://habrahabr.ru/post/259529/ map
ES6
https://github.com/ericdouglas/ES6-Learning
http://es6katas.org/
This
http://bjorn.tipling.com/all-this
http://habrahabr.ru/post/149516/
http://www.sitepoint.com/mastering-javascripts-this-keyword/
if a function is called as a property of an object, 'this' will be set to that object.
var myObject = {}; function whatIsThis() { if ( this === myObject ) { console.log("'this' is myObject"); } else if ( this === window ) { console.log("'this is the global object'"); } else { console.log("'this' is something else"); } } myObject.whatIsThis = whatIsThis; var aDifferentObject = { whatIsThis: whatIsThis } whatIsThis(); // 'this is the global object' myObject.whatIsThis(); // 'this' is myObject myObject["whatIsThis"](); // 'this' is myObject aDifferentObject.whatIsThis(); // 'this' is something else
In other words, this takes it value based on how the function is called, not where the function is defined.
http://plainjs.com/javascript/
В JavaScript есть только одна величина, которая не равна самой себе – NaN («не число»).
Функция isNaN – стандартная функция JavaScript, которая возвращает true, только если её аргумент – NaN (не число). Функция Number возвращает NaN, если задать ей строку, которая не представляет собой допустимое число. В результате, условие звучит так: «выполнить, если только theNumber не является не-числом».
alert, prompt и confirm
Окружение браузера содержит другие функции, кроме alert, которые показывают всплывающие окна. Можно вызвать окно с вопросом и кнопками OK/Cancel при помощи функции confirm . Она возвращает булевское значение – true, если нажато OK, и false, если нажато Cancel. confirm("Ну что, поехали?");
Функцию prompt можно использовать, чтобы задать открытый вопрос.
Первый аргумент – вопрос, второй – текст, с которого пользователь начинает. В диалоговое окно можно вписать строку текста, и функция вернёт его в виде строки.
var theNumber = Number(prompt("Выбери число", ""));
if (!isNaN(theNumber))
alert("Твоё число – квадратный корень из " + theNumber * theNumber);
else
alert("Ну ты что число-то не ввёл?");
var object1 = {value: 10};
var object2 = object1;
Переменные object1 и object2 держатся за один и тот же объект, поэтому изменения object1 приводят к изменениям в object2.
Оператор == при сравнении объектов возвращает true только, если сравниваемые объекты – это одна и та же переменная. Сравнение разных объектов вернёт false, даже если у них идентичное содержимое.
var todoList = [];
Методы push и pop, которые добавляют и отнимают элементы в конце массива.
Соответствующие методы для начала массива называются unshift и shift
Когда вызывается функция, к окружению исполняемого тела функции добавляется особая переменная под названием arguments. Она указывает на объект, содержащий все аргументы, переданные функции.
У объекта arguments есть свойство length, которое содержит реальное количество переданных функции аргументов. Также у него есть свойства для каждого аргумента под именами 0, 1, 2 и т.д.
Объект global
К глобальной области видимости, где живут глобальные переменные, можно получить доступ так же, как к объекту. Каждая глобальная переменная является свойством этого объекта. В браузерах глобальная область видимости хранится в переменной window.
var myVar = 10;
console.log("myVar" in window);
// → true
console.log(window.myVar);
// → 10
console.log(8 * null)
// → 0
console.log("5" - 1)
// → 4
console.log("5" + 1)
// → 51
console.log("пять" * 2)
// → NaN
console.log(false == 0)
// → true
Замыкания
Функции умножающую числа на любое заданное число.
function multiplier(factor) {
return function(number) {
return number * factor;
};
}
var twice = multiplier(2);
console.log(twice(5));
// → 10
У массивов есть несколько полезных методов высшего порядка – forEach, чтобы сделать что-то с каждым элементом, filter – чтобы построить новый массив, где некоторые значения отфильтрованы, map – чтобы построить новый массив, каждый элемент которого пропущен через функцию, reduce – для комбинации всех элементов массива в одно значение.
У функций есть метод apply, для передачи им аргументов в виде массива. Также у них есть метод bind для создания копии функции с частично заданными аргументами.
http://httplambda.com/memoization-in-javascript-what-it-is-why-you-need-it-and-how-to-use-it/
var memoize = function (f) {
'use strict'; var cache = {}; return function () { var arArray = [].slice.apply(arguments); var args = JSON.stringify(arArray); if (!cache[args]) { var value = f.apply(this, arArray); cache[args] = value; } return cache[args]; }; }; var fibo = function (n) { 'use strict'; return (n === 0) ? 0 : (n === 1) ? 1 : fibo(n - 1) + fibo(n - 2); }; fibo = memoize(fibo); console.log(fibo(200)); // add a cache directly to function var fibo = function (n) { 'use strict'; if (!fibo.cache[n]) { var result = {}; result = (n === 0) ? 0 : (n === 1) ? 1 : fibo(n - 1) + fibo(n - 2); fibo.cache[n] = result; } return fibo.cache[n]; }; fibo.cache = {}; console.log(fibo(200));
http://www.mattgreer.org/articles/javascript-is-a-pass-by-value-language/
http://eloquentjavascript.net/
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#designpatternsjavascript
https://docs.google.com/document/d/1aa2-HtUglQrAps31s4LdTPVsiFb1BxhyjZolxeezzcI/preview?sle=true
http://overapi.com/javascript/
http://chimera.labs.oreilly.com/books/1234000000262/index.html
http://www.amazon.com/gp/product/1617291951/
https://github.com/moklick/frontend-stuff
http://ilikekillnerds.com/2015/03/things-every-javascript-developer-should-know/
http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015/
https://slides.com/concise/js/fullscreen#/
http://www.infoq.com/articles/modern-javascript-toolbox
JSLint JSHint
https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48?hn
http://www.sitepoint.com/comparison-javascript-linting-tools/
http://www.smashingmagazine.com/2015/02/18/avoid-javascript-mistakes-with-static-code-analyzer/
http://habrahabr.ru/company/paysto/blog/251277/
https://javascriptweblog.wordpress.com/2015/01/05/if-hemingway-wrote-javascript-explained/
http://blog.javascripting.com/2014/11/06/real-world-javascript-anti-patterns/
http://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
CLOSURES
http://dmitryfrank.com/articles/js_closures
http://www.sitepoint.com/demystifying-javascript-closures-callbacks-iifes/
http://jibbering.com/faq/notes/closures/
http://howchoo.com/g/mge2mji2mtq/javascript-closures-by-example
var foo = function(){ var x = "Hello World!"; return function() { alert(x); } };var bar = foo(); bar(); //alerts "Hello World"
The important thing to note about the above function is that the function “foo” has finished executing. The function foo finishes executing and returns an anonymous function. Despite the fact that foo is finished, the anonymous function being returned still retains access to the variable “x”. This means that you have greater flexibility with how you write your functions. You don’t have to worry about any of your functions losing access to variables over the course of your program.
http://interglacial.com/hoj/hoj.html
https://www.voxxed.com/blog/2014/11/how-to-not-hate-java-script-tips-from-the-frontline/
https://www.youtube.com/watch?v=v0TFmdO4ZP0
https://medium.com/javascript-scene/learn-javascript-b631a4af11f2
http://habrahabr.ru/post/124327/
http://habrahabr.ru/post/243403/
http://jhusain.github.io/learnrx/
http://habrahabr.ru/post/240969/
http://read.humanjavascript.com/ Book online
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
https://www.gitbook.io/book/amischol/javascript_challenges
http://habrahabr.ru/post/239065/
http://eloquentjavascript.net/2nd_edition/preview/
http://www.2ality.com/2014/07/javascript-survival-guide.html
http://habrahabr.ru/post/231071/ Interview
http://colintoh.com/blog/5-array-methods-that-you-should-use-today Arrays
http://www.mobtowers.com/how-to-search-for-an-object-in-a-javascript-array-and-fast/
http://www.reddit.com/r/javascript/comments/2hz1r8/5_array_methods_that_you_should_be_using_now/
http://frontendbabel.info/articles/webpage-rendering-101 Web page rendering
http://blog.interfacevision.com/design/design-mop-and-javascript/
http://buzzdecafe.github.io/code/2014/10/26/functors-and-applicatives/
Event bubbling and capturing
http://habrahabr.ru/post/126471/
https://news.ycombinator.com/item?id=9790411
http://code.tutsplus.com/tutorials/bubblejs-a-16k-solution-to-a-common-problem--cms-21986
http://personallearnings.wordpress.com/2014/07/24/event-capturing-and-event-bubbling-in-java-script/
http://www.toptal.com/javascript/10-most-common-javascript-mistakes
http://www.codeproject.com/Articles/668351/HTML-File-API-Capability-and-Compatibility
var people = ["Dave", "Sally", "Amanda", "Mike", "John", "Jane"]; var peopleToRemove = ["Dave", "Mike", "John"];
I either need the three people removed from the people array or a new array without those three people is fine.
var filteredPeople = people.filter(function(element) { return peopleToRemove.indexOf(element) === -1; });
----------------------
var peopleToRemoveSet = peopleToRemove.reduce(function(previous, element) { previous[element] = true; return previous; }, {}); var filteredPeople = people.filter(function(element) { return !(element in peopleToRemoveSet); });
---------------------------
function difference(first, second) { for (var i=0; i<second.length; i++) { var index = undefined; while ((index = first.indexOf(second[i])) !== -1) { first.splice(index, 1); } } return first; }
Functional JS
http://howardtang.co.uk/posts/2014-09-22-functional.html
http://habrahabr.ru/post/251729/
http://scott.sauyet.com/Javascript/Talk/2014/01/FuncProgTalk/#slide-0
http://shop.oreilly.com/product/0636920028857.do
http://bahmutov.calepin.co/tag/functional.html
http://thedrearlight.com/functional-js-wut
http://habrahabr.ru/post/227753/ Metaprogramming
https://news.ycombinator.com/item?id=8107447 Immutable data collections
Apply and call()
http://tech.pro/tutorial/2010/functional-javascript-part-3-apply-call-and-the-arguments-object
https://variadic.me/posts/2013-10-22-bind-call-and-apply-in-javascript.html
Source code for some useful utils like jstree, debounce
http://habrahabr.ru/post/234279/
https://www.youtube.com/watch?v=8iXoWC9XcU8
http://dmitrysoshnikov.com/ecmascript/ru-javascript-the-core/
http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/
http://www.reddit.com/r/javascript/comments/27brbn/what_should_i_know_about_js_that_i_wont_learn/
http://aexmachina.info/javascript-and-oo/
http://habrahabr.ru/post/223027/
http://www.raymondware.com/blog/5-great-javascript-tutorials-from-around-the-web/
Queue in JS
http://bsumm.net/2013/03/31/analyzing-mbostocks-queue-js.html
https://news.ycombinator.com/item?id=5471808
10 Things
https://www.youtube.com/watch?v=i_qE1iAmjFg
http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/
http://paulirish.com/2011/11-more-things-i-learned-from-the-jquery-source/
DOM
http://krasimirtsonev.com/blog/article/Mastering-the-DOM-access-JavaScript-set-get-value
http://habrahabr.ru/post/228325/ debounce
https://github.com/codemix/fast.js Fast reimplementation of standard JS methods
https://www.youtube.com/watch?v=f7AU2Ozu8eo Javascript Development Workflow
http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/
http://habrahabr.ru/post/224187/
https://github.com/jamesshore/object_playground
function multiplier(factor) {
return function(number) {
return number * factor;
};
}
var twice = multiplier(2);
console.log(twice(5));
// → 10
JavaScript provides two functions, JSON.stringify and JSON.parse, that convert data from and to this format.
you will almost never want iterate over arrays withfor...in loops. Instead, use an ordinary for loop, or one of the built-in array iteration methods like forEach or map.
http://developer.telerik.com/featured/seven-javascript-quirks-i-wish-id-known-about/
http://www.toptal.com/javascript/javascript-prototypes-scopes-and-performance-what-you-need-to-know
http://gosukiwi.svbtle.com/object-oriented-javascript
http://eligrey.com/demos/FileSaver.js/
http://xbsoftware.com/blog/file-system-javascript-processing-files-browser/
http://tech.pro/tutorial/2010/functional-javascript-part-3-apply-call-and-the-arguments-object
https://github.com/dannagle/HTML5GameEngines
Debugging JS
https://scotch.io/tutorials/debugging-javascript-with-chrome-devtools-breakpoints
https://aboullaite.me/15-must-know-dev-tools-tricks/
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference
https://www.youtube.com/watch?v=zoo69lxnE-Y
https://raygun.com/blog/2016/05/debug-javascript/
http://habrahabr.ru/post/236447/
http://tech.pro/tutorial/1404/debugging-modern-web-applications-part-1
Source maps
https://raygun.com/blog/2015/05/javascript-debugging-made-easy-with-source-maps/
Placing breakpoints on JavaScript makes debugging much easier, but if your code has already made it to production then it's probably been minified. How can you debug minified code? Helpfully, some of the browsers have an option to un-minify your JavaScript.
In Chrome and Safari, simply select the 'Scripts' tab, find the relevant file and then press the "{ }" (pretty print) icon located in the bottom panel.
In Internet Explorer, click the tool icon by the script selection drop down to find the option to format the JavaScript.
Opera will automatically prettify minified JavaScript.
http://blog.mitemitreski.com/2014/12/how-to-not-hate-java-script-tips-from.html
http://alphapixels.com/prepros/
http://www.jetbrains.com/webstorm/
http://pivotal.github.io/jasmine/
http://habrahabr.ru/post/188066/
http://habrahabr.ru/post/188268/
http://www.bentobox.io/ all web tools in one place
http://www.reddit.com/r/javascript/comments/1wnrw5/5_useful_chrome_devtools_commands/
http://designzum.com/2014/02/04/10-essential-javascript-tools-developers-must-know-about/
http://habrahabr.ru/post/198372/ JS console
Best practice
Video: Full Stack JavaScript
http://www.youtube.com/watch?v=b5pFv9NB9fs
https://hexlet.org/open_lectures/fullstack_javascript/
http://habrahabr.ru/post/199472/
Server Side JS
generating SVG on Server
http://www.smashingmagazine.com/2014/05/26/love-generating-svg-javascript-move-to-server/
Tools
http://habrahabr.ru/post/209258/
http://www.catswhocode.com/blog/10-super-useful-tools-for-javascript-developers
http://uptodate.frontendrescue.org/
Articles
http://shichuan.github.io/javascript-patterns/
https://www.youtube.com/watch?v=XgKYna8_tkI
http://www.codeproject.com/Articles/642499/Learn-JavaScript-Part-1-Create-a-Starfield
http://www.codeproject.com/Articles/681130/Learn-JavaScript-Part-2-Space-Invaders
http://www.codeproject.com/Articles/696943/Learn-JavaScript-Part-3-AngularJS-and-Langtons-Ant
http://matt.might.net/articles/learning-javascript-in-small-bites-part-4/
http://www.toptal.com/javascript?#hiring-guide
http://javascriptissexy.com/how-to-learn-javascript-properly/
http://www.reddit.com/r/learnjavascript/
http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
Articles
http://javascriptissexy.com/how-to-learn-javascript-properly/
http://adamonio.us/sandbox/66/introduction-to-javascript/
http://shiflett.org/blog/2012/apr/javascript-study-guide
http://www.reddit.com/r/javascript/comments/1jw96t/what_are_your_vanilla_javascript_knowledge/
http://www.youtube.com/watch?feature=player_embedded&v=R4sTvHXkToQ Reactive Programming
http://habrahabr.ru/post/196092/
http://christianheilmann.com/2013/10/31/perpetuating-terrible-javascript-practices/
http://www.reddit.com/r/javascript/comments/1paovo/what_are_the_absolute_best_resources_to_learn/
http://killdream.github.io/blog/2013/04/the-hikkikomoris-guide-to-javascript/
https://developer.mozilla.org/en/A_re-introduction_to_JavaScript
http://www.catswhocode.com/blog/best-practices-for-modern-javascript-development
http://blog.reybango.com/2010/12/15/what-to-read-to-get-up-to-speed-in-javascript/
https://code.google.com/p/jslibs/wiki/JavascriptTips#language_advanced_Tips_&_Tricks
http://dmitrysoshnikov.com/ecmascript/ru-javascript-the-core/
http://bonsaiden.github.com/JavaScript-Garden/
http://www.learn-javascript-tutorial.com
http://www.slideshare.net/Dmitry.Baranovskiy/presentations
http://www.denbagus.net/online-resources-learning-javascript
http://skilldrick.co.uk/2010/09/why-javascript-is-awesome/
http://igstan.ro/posts/2011-05-02-understanding-monads-with-javascript.html
http://radar.oreilly.com/2011/06/time-to-learn-javascript.html
http://habrahabr.ru/blogs/webdev/122554/#habracut
OOP class inheritance
http://javascriptissexy.com/javascript-objects-in-detail/
http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/
http://www.codeproject.com/Articles/687093/Understanding-JavaScript-Object-Creation-Patterns
http://www.kirupa.com/html5/introduction_to_objects_in_javascript.htm
http://blog.javascriptroom.com/2013/01/29/the-illusion-of-class/
http://beardedocto.tumblr.com/post/21920818233/oo-js-in-15mins-or-less
http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/
http://blog.morrisjohns.com/illumination_on_javascript_prototypes.html
http://killdream.github.com/blog/2011/10/understanding-javascript-oop/index.html
http://javascript.ru/tutorial/object/inheritance
http://killdream.github.com/blog/2011/10/understanding-javascript-oop/
http://kevinoncode.blogspot.com/2011/04/understanding-javascript-inheritance.html
http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-works.html
http://css.dzone.com/articles/going-completely-prototypal
http://ejohn.org/blog/simple-javascript-inheritance/
https://speakerdeck.com/getify/new-rules-for-javascript
Architecture
http://speakerdeck.com/u/addyosmani/p/large-scale-javascript-application-architecture
http://hanselminutes.com/383/enough-with-the-javascript-already-with-nicholas-zakas
http://www.slideshare.net/nzakas/scalable-javascript-application-architecture
http://www.toptal.com/javascript/guide-to-full-stack-javascript-initjs
https://news.ycombinator.com/item?id=6884377 Server Generated JS
IndexedDB is a JavaScript API found currently in Firefox, Chrome, and IE10 that implements a client side data store for web applications. It stores data locally similar to localStorage, but can store much larger chunks of data and is asynchronous and much faster.
http://www.drdobbs.com/jvm/real-time-list-filtering-in-html5javascr/240159811
Promisses
http://frontender.info/asynchronous-javascript/
https://habrahabr.ru/company/wrike/blog/302896/
http://promise-nuggets.github.io/
http://frontender.info/javascript-goes-to-asynchronous-city/
https://www.stephanboyer.com/post/107/fun-with-promises-in-javascript
http://codesi.nz/nodejs/2015/01/28/working-with-javascript-promises.html
http://oli.me.uk/2016/01/24/asynchronicity-and-javascript/
https://github.com/vasanthk/async-javascript
https://github.com/thalesmello/exploring-async/blob/master/exploring_async.md
https://medium.com/@pyrolistical/how-to-get-out-of-promise-hell-8c20e0ab0513#.yq926ctw7
https://medium.com/@isntitvacant/observations-on-promises-2b08a0d0c27#.8evsmt3h4
http://robotlolita.me/2015/11/15/how-do-promises-work.html
http://spion.github.io/posts/why-i-am-switching-to-promises.html
http://sriku.org/blog/2014/02/11/bye-bye-js-promises/
https://news.ycombinator.com/item?id=8395820
http://www.reddit.com/r/javascript/comments/2b4euh/what_are_some_good_videos_short_ones_that_show/
http://www.49lights.com/blogg/2013/07/deferred-objects-promises-and-asynchronous-code/
https://news.ycombinator.com/item?id=7018819
http://mattgreer.org/articles/promises-in-wicked-detail/
http://stackoverflow.com/questions/21141817/why-are-callbacks-more-tightly-coupled-than-promises
http://habrahabr.ru/post/209662/
http://blog.millermedeiros.com/callbacks-promises-signals-and-events/
http://raganwald.com/2013/05/30/functionals-greatest-accomplishment.html
http://habrahabr.ru/post/178133/
http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting
http://stevelosh.com/blog/2013/03/list-out-of-lambda/
http://habrahabr.ru/post/175947/ Async Javascript
http://net.tutsplus.com/tutorials/javascript-ajax/event-based-programming-what-async-has-over-sync/
EVENT LOOP
http://baudehlo.wordpress.com/2013/02/14/how-an-event-loop-works/
http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/
http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/
http://habrahabr.ru/post/178261/ Main loop
http://vimeo.com/96425312 event loop
https://www.youtube.com/watch?v=8aGhZQkoFbQ
https://medium.com/@fay_jai/what-is-the-javascript-event-loop-98707ed20a90
https://github.com/stevekwan/best-practices/blob/master/javascript/gotchas.md
http://www.devclub.eu/2010/04/07/javascript-secrets-soswow/
http://www.infoq.com/presentations/UX-JavaScript-Spaghetti
http://news.ycombinator.com/item?id=4673106
http://doctrina.org/Javascript-Function-Invocation-Patterns.html
http://wiki.theory.org/YourLanguageSucks#JavaScript_sucks_because
http://habrahabr.ru/post/150730/
http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)
http://www.codethinked.com/preparing-yourself-for-modern-javascript-development
http://www.gabordemooij.com/articles/jsoop.html
http://www.javascripttoolbox.com/bestpractices/
https://news.ycombinator.com/item?id=5392984
http://habrahabr.ru/blogs/javascript/117838/
http://newky.posterous.com/functions-in-javascript-javascript-week-off
https://github.com/rwldrn/idiomatic.js
http://stackoverflow.com/questions/3894895/examples-of-beautiful-javascript
http://shichuan.github.com/javascript-patterns/
http://jeditoolkit.com/2012/04/26/code-logic-not-mechanics.html
https://news.ycombinator.com/item?id=3862137
http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/
http://news.ycombinator.com/item?id=4673106
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
http://habrahabr.ru/post/173447/ Tail recursion
Prevent duplicated submission
http://habrahabr.ru/post/234279/#procrastinate
http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing/4298672#4298672
http://blog.codebrag.com/post/57412530001/preventing-duplicated-requests-in-angularjs
http://stackoverflow.com/questions/16814157/how-to-prevent-users-from-submitting-a-form-twice
http://stackoverflow.com/questions/18130808/preventing-dealing-with-double-button-clicks-in-angular
http://kurtfunai.com/2014/02/angular-directives-intro.html
Draggability
https://news.ycombinator.com/item?id=9914045
If the variable is not associated with a var keyword, then the variable is declared in global scope.
Variables that are not initialized have an initial value of undefined
var prop;
for (prop in object) {
if (object.hasOwnProperty(prop)) {
console.log("Property name is " + prop);
console.log("Property value is " + object[prop]);
}
}
There are five primitive types in JavaScript:
string, number, boolean, null, and undefined.
The typeof operator works on a variable and returns a string indicating the type of value.
Both undeclared variables and variables whose value is undefined return “undefined” when typeof is used.
typeof returns “object” for any type of object (Object, Array, Date, Error, RegExp, etc)
typeof returns “object” for null values
typeof operator also works with functions, returning “function”
The instanceof operator is the best way to detect values of a particular reference type
Every object inherits from Object by default, so every object returns true for
value instanceof Object.
Functions are reference types and have a Function constructor of which each function is an instance
function isArray(value) {
return Object.prototype.toString.call(value) === "[object Array]";
}
way to detect the presence of a property is to use the in operator.
If the property either exists on the instance or is inherited from the object’s prototype, the
in operator returns true.
Array iterating:
for (var i = 0; i < a.length; i++) {..}
An object being used as an associative array is iterated using:
for (var key in o) {..}
apply versus call
function theFunction(name, profession) {
alert("My name is " + name + " and I am a " + profession + ".");
}
theFunction("John", "fireman");
theFunction.apply(undefined, ["Susan", "school teacher"]);
theFunction.call(undefined, "Obama", "president of the United States");
== and != does type coercion:
If a boolean value is compared to a number, then the boolean is converted to a number
before comparison. A false value becomes 0 and true becomes 1.
If you compare a number to a string, the string is first converted to a number
like in Number() casting function.
If one of the values is an object and the other is not, then the object’s valueOf() method
is called to get a primitive value to compare against. If valueOf() is not defined, then
toString() is called instead.
=== does not do type coercion:
0 === 0 // true
0 == '0' // true
0 === '0' // false
0 == false // true
0 == '' // true
null == undefined // true
null === undefined // false
Anonymous function:
var doSomething = function() { ..};
var value = (function() { return { message: "Hi"} }() );
Object-Based Inheritance
var person = {
name: "Nick",
sayName: function() { alert(this.name);}
};
var myPerson = Object.create(person);
myPerson.sayName(); // pops up "Nick"
This example creates a new object myPerson that inherits from person.
The inheritanceoccurs as myPerson’s prototype is set to person.
Type-based inheritance:
function MyError(message) { this.message = message;}
MyError.prototype = new Error();
In this example, the MyError type inherits from Error, which is called the super type. It
does so by assigning a new instance of Error to MyError.prototype
Reactive Extension to JavaScript
http://codebetter.com/matthewpodwysocki/
http://habrahabr.ru/post/132463/
Functional Programming with JavaScript
http://codingcookies.com/2012/03/27/a-gentle-introduction-to-functional-programming-part-2/
http://habrahabr.ru/post/154105/#habracut
http://blog.jcoglan.com/2011/03/11/promises-are-the-monad-of-asynchronous-programming/
Video
http://www.youtube.com/watch?v=hQVTIJBZook&feature=related
http://www.youtube.com/watch?v=seX7jYI96GE&feature=player_embedded
http://www.youtube.com/watch?v=v2ifWcnQs6M&feature=relmfu
http://www.youtube.com/watch?v=_zhQIfT7g58
JS scope
http://habrahabr.ru/post/239863/
Closures
http://dmitrysoshnikov.com/ecmascript/ru-javascript-the-core/#zamyikaniya
http://learn.javascript.ru/functions-closures
http://www.sitepoint.com/understanding-variable-scope-closures-without-losing-mind/
http://www.functionaljavascript.com/
http://blog.fogus.me/2013/06/18/functional-javascript-closure/
http://0a.io/0a-explains-javascript-closure-and-design-patterns
http://blog.jhades.org/really-understanding-javascript-closures/
Closure means that a block of code "closes over" variables defined outside that block. More importantly, those variables persist even after they would ordinarily have gone out of scope and disappeared. The closure captures and retains surrounding variables.
Замыкание образуется, когда одна из
вложенных функций становится доступной вне той функции, в которую она была включена, таким образом, она может быть выполнена после завершения внешней функции. В этот момент она все еще имеет доступ к локальным переменным, параметрам и внутренним декларациям функций (function declarations) своей внешней функции. Эти локальные переменные, параметры и декларации функций (изначально) имеют те же значения, которые были во время завершения внешней функции и могут взаимодействовать с внутренней функцией.
http://habrahabr.ru/post/223459/
https://www.codefellows.org/blogs/closures-the-ringers-of-javascript
http://nathansjslessons.appspot.com/lesson?id=1000
http://stackoverflow.com/questions/111102/how-do-javascript-closures-work
http://reallifejs.com/the-meat/getting-closure/
http://nathansjslessons.appspot.com/
http://habrahabr.ru/blogs/javascript/125306/
http://www.artima.com/weblogs/viewpost.jsp?thread=329840
http://skilldrick.co.uk/2011/04/closures-explained-with-javascript/
http://skilldrick.co.uk/2010/11/a-brief-introduction-to-closures/
http://davidbcalhoun.com/2011/what-is-a-closure-in-javascript
http://blog.morrisjohns.com/javascript_closures_for_dummies.html
http://stackoverflow.com/questions/12930272/javascript-closures-vs-anonymous-functions
http://www.bofh.org.uk/2010/11/18/higher-order-javascript
HTML5: Canvas
http://creativejs.com/2011/08/31-days-of-canvas-tutorials/
http://www.sitepoint.com/a-developer%E2%80%99s-guide-to-html5-canvas/Example of public data in XML and JSON format
http://services.faa.gov/airport/status/SFO?format=application/XML
http://services.faa.gov/airport/status/SFO?format=application/json
Build JS framework:
http://dailyjs.com/tags.html#lmaf
http://www.quirkey.com/blog/2009/09/15/sammy-js-couchdb-and-the-new-web-architecture/
http://igstan.ro/posts/2010-12-01-deriving-the-y-combinator-in-7-easy-steps.html
http://msdn.microsoft.com/en-US/scriptjunkie/gg602402.aspx
Two methods are primarily used with JavaScript and JSON:
JSON.parse() break down a JSON string into an Object
JSON.stringify() will create a JSON string from an Object.
JSON.parse() example:
var jsonString = '{"name":"ben","age":23,"skills":["php","css","javascript"]}';
var json = JSON.parse(jsonString);
console.log(json);
output::
Object
age: 23
name: "ben"
skills: Array[3]
0: "php"
1: "css"
2: "javascript"
JSON.stringify example:
var data = {
name: 'ben',
age: 23,
skills: [
'php', 'css', 'javascript'
]
}
var json = JSON.stringify(data);
console.log(json);
output:
{"name":"ben","age":23,"skills":["php","css","javascript"]}
var car = {
colour:'red',
wheels:4,
hubcaps:'spinning',
age:4
}
var moviesThatNeedBetterWriters =
[ 'Transformers','Transformers2','Avatar','Indiana Jones 4'];
JSON is short for "JavaScript Object Notation
var band = {
"name":"The Red Hot Chili Peppers",
"members":[
{
"name":"Anthony Kiedis",
"role":"lead vocals"
},
{
"name":"Michael 'Flea' Balzary",
"role":"bass guitar, trumpet, backing vocals"
},
{
"name":"Chad Smith",
"role":"drums,percussion"
},
{
"name":"John Frusciante",
"role":"Lead Guitar"
}
],
"year":"2009"
}
Finding the largest number in an array of numbers
var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);
Notice that you cannot use sort() on a number array because it sorts lexically
Async and defer in JS
http://davidwalsh.name/deferred
http://syzygy.st/javascript-coroutines/