В этом посте любитель javascript, вооружившись бензопилой, безжалостно распиливает одну из лучших, на его взгляд, универсальных библиотек.



Препарируем вот этот исходник с точки зрения ученика 5-го «Б» Васи Пупкина, прочитавшего книжку по основам javascript, и страстно желающего получше запутаться в полученных знаниях.

Меня зовут Денис Чистяков, и я руковожу группой разработки интерфейсов в Екатеринбурге. Мы занимаемся фронтендом: делаем множество сложных, ярких и красивых страниц для приложений Яндекса.

Два года назад мы запустили свою Школу разработки интерфейсов, в рамках которой пытаемся в максимально сжатый срок превратить веб-разработчиков в крутых веб-разработчиков, готовых к специфике нашей компании, нашей инфраструктуре и нашим технологиям. Этот год тоже не стал исключением. В 2014 году ШРИ пройдет в Екатеринбурге и Минске.

Сегодня я хочу поделиться с вами курсам, собранным из лучших лекций в нашей школе за последние годы, а также рассказать о том, что в ней будет по-новому.

В этом году мы приняли решение отойти от ставшего привычным за два года формата Школы и попробовать провести её в совершенно новом ритме. В этом году обучение разделится на две части, условно говоря, очную и заочную.



Мы понимаем, что часто желающие поучиться у нас выкраивают время между учебой, работой и семьей. А мы не обычная школа и не вуз, где нужно обязательное присутствие на уроках и парах. У нас есть уверенность, что те люди, которые попадают в ШРИ, обладают здоровым азартом, ответственны и понимают то, для чего они начали путь обучения. (Да-да, мы знаем, что вы крутые :)

Поэтому, обобщив все вышеперечисленное, мы решили, что теоретический материал учащиеся будут осваивать самостоятельно в удобное для них время. Но чтобы почувствовать вкус создания интерфейсов, мало много читать и смотреть. Нужно еще много практиковаться и кодить. Поэтому второй — очной — частью обучения будут практические занятия (которых, важно заметить, не было в прошлых ШРИ).

Это будут мини хакатоны, на которых ребятам придется реализовывать целый проект. А помогать им в этом будет команда яндексовых менторов. И в этом есть много плюсов: общение, возможность поработать бок о бок с профессионалами, получить «живой опыт» и, самое главное, попробовать почувствовать себя частью Яндекса.

Перевод книги Marijn Haverbeke "Eloquent JavaScript". Лицензия Creative
Commons attribution-noncommercial license. Код предоставляется под лицензией MIT.

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Сегодня на одном довольно широко известном ресурсе разместили базу email адресов с паролями от почтовых ящиков «Яндекса». База представляет собой текстовый документ, в котором заявлено 1 млн позиций.

С удивлением обнаружил там один из своих, и хотя пароль не был космической сложности, уж точно не для брута и словарей.

Когда именно, и по какой причине данная база утекла в сеть, остается неизвестным. В комментариях народ пишет, что из первых попавшихся 10 яшиков как минимум 8 являются на настоящий момент валидными.

В общем, дружно меняем пароли, пока представители «Яндекса» ищут крота.

Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.

На первый взгляд, этот язык может показаться довольно простым. Встраивание в веб-страницу базового функционала JavaScript — это не проблема для любого опытного разработчика, даже если он ранее не сталкивался с этим языком. Однако это обманчивое впечатление, поскольку JavaScript гораздо сложнее, мощнее и чувствительнее к нюансам, чем кажется поначалу. Немало тонкостей в этом языке приводит к большому количеству распространённых ошибок. Сегодня мы рассмотрим некоторые из них. На эти ошибки нужно обратить особое внимание, если вы хотите отлично программировать на JavaScript.

Наверное, каждый, кто использовал JavaScript, когда-либо сталкивался (или столкнётся в будущем) с асинхронными вызовами. Может быть, это будет обращение к базе на стороне сервера. Может быть — работа с таймером для создания анимации на сайте.

Для того, чтобы «побороть» асинхронность, используются разные инструменты от промисов до смены языка программирования. Но иногда очень хочется бросить всё и написать на чистом JS линейный код:

timeout(1000);
console.log('Hello, world!');

Можно ли реализовать нечто подобное? Разумеется, можно.
В данной статье мы рассмотрим один опасный, но действенный способ.

Сегодня хочется воздать по заслугам программе-долгожительнице SequoiaView — приложению, созданному в начале двухтысячных годов Техническим университетом Эйндховена (Нидерланды). Приложение получилось настолько практичным, лаконичным и удобным, что уже более 10 лет выручает всех, у кого вдруг внезапно закончилось место на диске, а сейчас как раз позарез нужно расчистить пару десятков гигабайт, чтобы поставить новую игру, скачать фильм или просто забить это место в очередной раз мелким мусором.

Примечание переводчика: Оригинал здесь. Все примеры в оригинале написаны на JavaScript, но я решил перевести их на Scheme. Уверен, менее понятно не стало, но зато видна вся красота этого языка.
UPD: добавил ко всем примерам справа еще и оригинальные примеры на JavaScript.


Если закрыть глаза на практическую сторону компьютеров — размер, вес, цену, тепло и т.п., что же на самом деле должен уметь язык программирования? Давайте исследуем этот вопрос.

Для понимания примеров в этой статье необходимы базовые понятия о функциях в LISP (Scheme). Если вы понимаете, что напечатает этот код, можно смело читать дальше:

(define x 10) (define (f y) (display x) (newline) (display y) (newline) ) (define g f) (f 1) (g 2)

var x = 10; var f = function(y) { console.log(x); console.log(y); } var g = f; f(1); g(2);

Эта статья — просто разминка для мозгов, а не то, что можно было бы использовать в реальном коде. Но как гитарист играет гаммы, которые он никогда не использует в настоящей песне, так же и программистам стоит разминать свои мозги время от времени.

Привет, хабр.
В данной статье мы познакомимся с линзами, узнаем для чего они нужны, а также реализуем их на JavaScript.

Зачем нужны линзы

Начнем, пожалуй, с ответа на вопрос, зачем же нужны линзы.

В функциональном программировании широко используются неизменяемые структуры данных. Работа с ними значительно отличается по сравнению с изменяемыми данными.

В основе этого лежит тот факт, что при изменении какой-либо части неизменяемой структуры данных создается ее копия, отличающаяся от оригинала этой самой измененной частью. Полное копирование всей исходной структуры не эффективно, поэтому новая структура как правило использует ссылки на неизмененные части из оригинала.

Введение

JavaScript мощный, но недопонятый язык программирования. Людям нравится говорить, что он является объектно-ориентированным языком программирования или является функциональным языком. Другим нравится говорить, что он не является объектно ориентированным или не является функциональным языком программирования. Некоторые скажут что он относится к обеим парадигмам или ни к одной из них — но, давайте отложим на пока этот спор в сторонку.

Уже ни раз на хабре писали о том, как работают новые генераторы и я даже не буду первым, кто напишет о их возможности приостанавливать своё выполнение инструкцией yield.

После прочтения статьи «Генераторы в node.js (новый способ борьбы с лапшой)» меня не покидала мысль о том, что можно обойтись без лапши-callBack'ов, но я никак не мог смириться с тем, что для каждой асинхронной функции, которую мы хотим вызвать, нужно писать функцию-обёртку.

И тут родилась идея! Очень простая, а суть её в том, что внутри генератора имеется ссылка на функцию n, которую мы передаём асинхронным функциям как callBack, приостанавливаем генератор при помощи yield, а затем наша функция n продолжает выполнение генератора, передавая в него массив, сформированный из аргументов, с которыми она была вызвана.

Заинтересованных прошу под кат.

Дуглас Крокфорд

2007-02-21

Введение

В 1973 году на первом ежегодном симпозиуме «Принципы языков программирования» (Principles of Programming Languages Symposium) Вон Пратт представил статью «Нисходящий парсер с операторным предшествованием» (Top Down Operator Precedence). В этой статье Пратт описал метод синтаксического разбора, который объединяет лучшие стороны рекурсивного спуска и метода операторного предшествования Флойда. Метод Пратта очень похож на рекурсивный спуск, но требует меньше кода и работает гораздо быстрее. Пратт заявил, что его метод прост в освоении, реализации и использовании, необычайно эффективен и очень гибок. Благодаря своей динамичности он может использоваться для расширяемых языков.

Но если метод действительно безупречен, почему же разработчики компиляторов по сей день его игнорируют? В своей статье Пратт предположил, что БНФ-грамматики и их многочисленные модификации, а также связанные с ними теоремы и автоматы заняли нишу раньше и теперь препятствуют развитию теории синтаксического анализа в других направлениях.

Есть и другое объяснение: этот метод наиболее эффективен для динамических, функциональных языков программирования и использовать его в статическом, процедурном языке куда сложнее. Свою статью Пратт иллюстрирует на примере Lisp и играючи строит синтаксические деревья по потоку лексем. Но методы синтаксического разбора не особо ценятся в сообществе Lisp-программистов, которые проповедуют спартанский отказ от синтаксиса. С момента создания Lisp предпринималось немало попыток придать этому языку богатый синтаксис в стиле ALGOL: CGOL Пратта, Lisp-2, MLISP, Dylan, Interlisp's Clisp, оригинальные М-выражения Маккарти и так далее. Но все они провалились. Для Lisp-сообщества согласованность программ и данных оказалась важнее выразительного синтаксиса. С другой стороны, подавляющее большинство программистов любит синтаксис, поэтому сам Lisp так и не стал популярен. Методу Пратта нужен динамический язык, но сообщество динамических языков исторически не пользовалось синтаксисом, который так удобно реализуется методом Пратта.

Gulp.js это потоковый сборщик проектов на JS. Он использует Stream и действительно является очень быстрым. Для примера у меня есть проект где около тысячи stylus файлов, GruntJS нужно примерно 2.5 секунды на сборку и 2 секунды на обработку autoprefixer'ом. Gulp все это делает за 0.5 секунды выигрывая у GruntJS минимум в 4 раза.



Вас может отпугнуть молодость проекта, отсутствие плагинов и небольшое сообщество. Но это не так, на данный момент ведется активная разработка проекта, написано достаточное количество плагинов под задачи для популярных инструментов. На данный момент существует 165 плагинов, посмотреть их вы можете тут.

В этой статье будет больше практики, мы соберем среду разработки фронтенда используя Jade и Stylus, запустим локальный сервер и подключим Livereload. Проект я выложил на Github, экспериментируйте.

Введение

Решения, написанные на JavaScript становятся сложнее из года в год. Это, несомненно, обусловлено разрастанием такого прекрасного зверя, как веб. Многие из нас сейчас работают с JavaScript модулями — независимыми функциональными компонентами, которые собираются вместе и работают как единое целое. Так же такой подход позволяет нам реализовать взаимозаменяемость компонентов, не прикончив попутно код. Многие из нас использовали для этого паттерн AMD и его реализацию в RequireJS.

Многие слышали про «магические» элементы Пельтье — при прохождении тока через них одна сторона охлаждается, а другая — нагревается. Это работает и в обратную сторону — если одну сторону нагревать, а другую охлаждать — вырабатывается электричество. Эффект Пельтье известен с 1834 года, но и по сей день нас не перестают радовать инновационные продукты на его основе (нужно только помнить, что при генерации электричества, как и у солнечных батарей — есть точка максимальной мощности, и если работать далеко от неё — КПД генерации сильно снижается).

В последнее время китайцы поднажали, и заполонили интернеты своими относительно дешевыми модулями, так что эксперименты с ними уже не отнимают слишком много денег. Китайцы обещают максимальную разницу температуры между горячей и холодной стороной в 60-67 градусов. Хммм… А что если мы возьмем 5 элементов, подключим последовательно, тогда у нас должно получиться 20С-67*5 = -315 градусов! Но что-то мне подсказывает, что все не так просто…

Одним солнечным весенним утром, мне пришла в голову замечательная идея — заняться изучением популярной библиотеки RequireJS. Я уже давно читал много хорошего и о простоте использования и о преимуществах, которые она оказывает при использовании в проектах. Поэтому и подумать не мог, что подключение RequireJS к модульному проекту на Backbone может вызвать столько проблем. Я потратил два дня на то, что должно занять не более часа. А если у разработчика нет этих двух дней? Вот и решил поделиться с другими своим опытом, чтобы сэкономить время и нервы.

Взаимодействие между клиентом и сервером как правило устроено очень просто и опирается на довольно примитивный инструментарий. Это не создает проблем само по себе, но зачастую даже небольшое усложнение поставленной задачи плохо укладываться в привычные подходы, порождая не слишком изящные решения-заплатки. Многие задачи решаются в каждом новом проекте заново, бессистемно и независимо друг от друга. К подобным задачам относятся, например:

• Batch-запросы
• Передача даты в составе сложной структуры данных
• Обозначение кастомных типов данных
• Проброс round-trip данных, которые сервер должен вернуть в ответе
• Дополнение запроса и ответа метаданными
• Обработка ошибок, пришедших в ответе

Разработчики тратят немало времени, раз за разом создавая неказистые велосипеды на серверной стороне, после чего их приходится поддерживать еще и на стороне клиента.

jsonex представляет собой попытку объединить решение упомянутых выше и многих других задач в рамках простого единого подхода, основанного на концепции вычислимых данных (callable data).

Введение

Грядет революция. Появилось новое дополнение к JavaScript, которое изменит всё, что вы когда-либо знали о дата-байндинге. Помимо этого, изменится и подход ваших MVC библиотек к наблюдениям за редактированием и обновлением моделей. Вы готовы?

Хорошо, хорошо. Не будем тянуть. Я рад вам представить Object.observe(), который появился в бета версии Chrome 36. [ТОЛПА ЛИКУЕТ]

Object.observe() является частью следующего ECMAScript стандарта. Он позволяет асинхронно отслеживать изменения JavaScript объектов… без использования каких-либо сторонних библиотек, он позволяет наблюдателю отслеживать изменения состояния объекта во времени.

Алгоритмы получения текстур игры Caesar III© и отрисовки города разобраны, осталась самая «сладкая» часть, которая притягивает «древнеримских архитекторов» уже больше 15 лет — игровая логика. Используя различные подходы к анализу игры, выношу на ваш суд результат этого небольшого исследования. Я заранее прошу прощения за большую статью, но, как говорится, слов из песни не выкинешь. В заключении будет несколько слов о судьбе исходников, восстановленных из исполняемого файла оригинальной игры.

Сегодня я хочу поделиться с вами еще одним дополнением, позволяющим разрабатывать кроссплатформенные мобильные приложения для Windows, Windows Phone, iOS и Android, используя Visual Studio 2013. В отличие от многих известных вам фреймворков – это дополнение абсолютно бесплатно и легко в освоении для веб-разработчика. Речь пойдет про дополнение, интегрирующее проект Apache Cordova в Visual Studio 2013.