JavaScript *

Авторы программы Tidbit

Через несколько часов начнутся слушания, где четверо студентов Массачусетского технологического института попытаются опротестовать судебную повестку с требованием раскрыть исходный код биткоин-майнера, созданного ими. Интересы 19-летнего Джереми Рубина (Jeremy Rubin) представляет адвокат Фонда электронных рубежей (EFF).

Автор статьи в Wired считает, что всё это напоминает печальную историю Аарона Шварца. Его арестовали за взлом компьютерной системы и «кражу» 4 млн бесплатных научных статей, после чего MIT вместе с властями активно «прессовали» активиста.

Рич Хикки, автор языка Clojure, недавно придумал новую концепцию — Трансдьюсеры. Их сразу добавили в Clojure, но сама идея универсальна и может быть воспроизведена в других языках.

Сразу, зачем это нужно:

• трансдьюсеры могут улучшить производительность, т.к. позволят не создавать временные коллекции в цепочках операций map.filter.takeWhile.etc
• могут помочь переиспользовать код
• могут помочь интегрировать библиотеки между собой, например underscore/LoDash могут уметь создавать трансдьюсеры, а FRP библиотеки (RxJS/Bacon.js/Kefir.js) могут уметь их принимать
• могут упростить FRP библиотеки, т.к. можно будет выбросить кучу методов, добавив один метод для поддержки трансдьюсеров

Трансдьюсеры — это попытка переосмыслить операции над коллекциями, такие как map(), filter() и пр., найти в них общую идею, и научиться совмещать вместе несколько операций для дальнейшего переиспользования.

Новым для Windows Phone 8.1 является возможность создавать и запускать приложения, написанные на JavaScript также, как на Windows 8.1. Тем не менее, есть некоторые отличия в специфике API, доступных для приложений на Windows Phone 8.1. Одним из таких отличий является отсутствие IndexedDB на телефоне. Это представляет трудности для JavaScript разработчиков универсальных приложений, которым требуется структурированное хранилище. В этой статье мы посмотрим, как создать компонент WinRT, позволяющий использовать SQLite из JavaScript. Также мы подготовили для вас пример приложения.

[Прим. перев.]: предлагаю вашему вниманию перевод статьи Бена Черри, в прошлом разработчика Twitter. В этой статье он приводит несколько советов по написанию javascript кода, пригодного для тестирования.

Культура разработки в Twitter требует написания тестов. У меня не было опыта тестирования Javascript до работы в Twitter, поэтому мне пришлось многому научиться. В частности, некоторые шаблоны программирования, которые я привык применять, о которых я писал и призывал к их использованию, оказались непригодными для тестирования. Поэтому я подумал, что стоит поделиться некоторыми наиболее важными принципами, которые я разработал для написания тестопригодного Javascript кода. Примеры, которые я привожу, основаны на QUnit, но могут быть применены к любому фреймворку для тестирования Javascript'а.

Избегайте синглтонов

Один из моих наиболее популярных постов был о том, как использовать javascript шаблон «Модуль» для создания синглтонов в вашем приложении. Этот подход может быть простым и полезным, но он создает проблемы для тестирования по одной простой причине: синглтон загрязняет состояние объекта между тестами. Вместо синглтона в виде модуля, следует создавать его как конструируемый объект и присваивать его экземпляру глобального уровня во время инициализации вашего приложения.

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

roBrowser

roBrowser — open source клон клиента достаточно популярной MMORPG игры Ragnarok Online в браузере. Проект разрабатывается по последним стандартам W3C — WebGL, HTML5, File API, Javascript, Threads… Небольшой ролик с демонстрацией игры:

Наверняка многие уже слышали о подходе FRP для организации асинхронного кода. На хабре уже писали об FRP (Реактивное программирование в Haskell, FRP на Bacon.js) и есть хорошие доклады на эту тему (Программировние UI с помощью FRP и Bacon.js, Functional Reactive Programming & ClojureScript, О Bacon.js от Juha Paananen — автора бекона)

Если коротко, FRP это подход похожий на Promise, но с неограниченным количеством возвращаемых значений, и бОльшим количеством методов для комбинирования / модифицирования потоков событий. Другими словами, если Promise позволяют работать со значением, которого у вас еще нет, так, будто оно у вас уже есть, то FRP позволяет работать со значением, меняющимся во времени, так, будто оно не меняется.

Вот что это дает по сравнению с обратными вызовами:

1) Поток событий (Event stream) и значение меняющаяся во времени (Property / Behavior) становятся объектами первого класса. Это значит что их можно передавать в функции и возвращать из функций.

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

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

К примеру можно написать функцию, возвращающую поток перетаскиваний (drag). В качестве параметров она будет принимать 3 потока — начало перетаскивания, движение, конец перетаскивания. Дальше можно передать в эту функцию: либо потоки для соответствующих событий мыши (mousedown, mousemove, mouseup), либо для touch событий (touchstart, touchmove, touchend). Сама же функция не будет ничего знать об источниках событий, а будет работать только с абстрактными потоками. Пример реализации на Bacon.

2) Явный state

Второе большое преимущество FRP это явное управление состоянием. Как известно, state — один из самых главных источников сложности программ, поэтому грамотное управление им позволяет писать более надежные и простые в поддержке программы. Отличный доклад от Рича Хикки о сложности (complexity) «Simple Made Easy».

FRP позволяет писать бОльшую часть кода на «чистых функциях» и управлять потоком данных (dataflow) явно (с помощью потоков событий), а состояния хранить тоже явно в Property.

Веб-компоненты — это новая эра веб-разработки и почувствовать ее мощь можно уже сегодня при помощи Polymer от Google. Вы можете создавать свои собственные «элементы» (тэги), содержащие шаблон и инкапсулированные стили и логику (js), а так же воспользоваться богатой коллекцией уже готовых элементов.

Давайте посмотрим, как создать галерею изображений, используя элемент управления FlipView из библиотеки WinJS. Мы будем делать галерею фотографий и коллекцию карточек товаров в интернет магазине в рамках универсального приложения для Windows и Windows Phone, а также рассмотрим использование библиотеки WinJS в вебе.

Язык Processing, основанный на Java, был написан в 2001 году для создания графики и анимаций. Для использования этого языка в интернете в 2008 году Джон Резиг написал библиотеку Processing.js. Библиотека быстро завоевала популярность и активно развивалась в течение нескольких лет после релиза. Часы на кривых Безье, о которых на Хабре писали несколько дней назад, были созданы именно с помощью Processing.js.

В прошлом году команда разработчиков Processing объявила о планах создать собственную JavaScript-библиотеку. В августе бета-версия p5.js была представлена широкой публике. Библиотека p5.js сильно отличается от Processing.js по архитектуре. Главные отличия — отсутствие необходимости изучать язык Processing и более тесная интеграция с HTML. Processing.js — это транслятор Processing в JavaScript. Основное назначение этой библиотеки — рендеринг файлов PDE с исходным кодом Processing. При использовании этой библиотеки программист может вообще не знать JavaScript. Возможно, в 2008 году это была весьма удачная идея, но сейчас, после нескольких лет бурного развития JavaScript и появления множества графических библиотек сформировалось поколение программистов и дизайнеров, для которых JavaScript намного «роднее» и понятнее Java-подобного Processing.


Пример анимации, созданной с помощью языка Processing

Первая часть перевода тут.

После прочтения Google's AngularJS Guidelines, у меня создалось впечатление о его незавершённости, а ещё в нём часто намекали на профит от использования библиотеки Closure. Ещё они заявили, «Мы не думаем, что эти рекомендации одинаково хорошо применимы для всех проектов, использующих AngularJS. Мы будем рады видеть инициативу от сообщества за более общий стайлгайд, применимый как для небольших так и крупных проектов».

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

Фактическим стандартом для работы с математическими формулами в вебе, записанными в формате TeX, является библиотека MathJax. Платформа онлайн-обучения Khan Academy имеет в своём арсенале множество курсов, посвящённых математике. Один из важных пунктов миссии академии — сделать качественное образование доступным всем, независимо от географического и материального положения, поэтому для Khan Academy очень существенна быстрая работа сайта на слабых старых компьютерах и мобильных устройствах. Именно поэтому разработчики академии решили написать собственную библиотеку для рендеринга TeX в HTML, которая в перспективе могла бы полностью заменить MathJax и работала бы гораздо быстрее.

Библиотека KaTeX пока ещё довольна молода (текущая версия — 0.1.0) и пока ещё не может сравниться с MathJax по функциональности. Текущий список поддерживаемых функций доступен в вики проекта. KaTeX поддерживает меньше выходных форматов по сравнению с MathJax, которая умеет рендерить формулы в HTML+CSS, SVG и MathML. В КаТеХ реализован вывод в HTML, поддержка MathML планируется в будущем. KaTeX не поддерживает старые (старше 8.0) версии IE.

В программерских конкурсах широко принято и приветствуется написание постмортемов. Никаких похорон: фактически, это сочинение на тему «Что я узнал, участвуя в конкурсе».
Контест маленьких игр на джаваскрипте js13kGames не исключение, и я хотел бы поделиться с Хабром накопившимися ощущениями начинающего игродела.

(Для тех, кто хочет поиграть, но не хочет читать откровения, вот ссылка на игру.)

BiMap

BiMap (GitHub: alethes/bimap, Лицензия: MIT, npm: bimap) от James Daab представляет собой двунаправленную реализацию такой структуры данных как отображение(map). Данная реализация позволяет вам получать доступ к значением через ключи и наоборот к ключам через значения:

bimap.push({
  a: {
    b: 1,
    c: {
      d: 2
    }
  }
});
bimap.key('a.b'); // => 1
bimap.val(2); // => "a.c.d"

Ничего необычного, просто моя реализация одной из самых распространенных задач при создании динамических интерфейсов «связанные списки». Дабы не возникло недопонимания, я имею ввиду два и более элемента Ext.form.ComboBox, выбор значения в одном из которых влияет на подгружаемые значения во втором.

Приветствую уважаемых читателей. Меня зовут Андрей, в последнее время я работаю в Центральном Музее Великой Отечественной войны. Помимо создания обычных музейных занимаюсь ещё и разработкой виртуальных выставок. Поэтому в своём обзоре Nokia Lumia 1520 я покажу, как можно использовать данный телефон для создания небольшой виртуальной экскурсии, используя 20-мегапиксельную камеру и JavaScript библиотеку Three.JS.

Привет, Хабра!

Пол года назад я подумал: «А может книгу написать?», и таки написал.



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

Прочитав очередные вредные советы про стандарты оформления кода (раз, два, тысячи их), я не смог удержаться, чтобы не поделиться своими измышлениями на эту тему. Долгие годы я вынашивал в своём подсознании чувство «что-то тут не так». И вот, пришло время определиться с тем, что не так, и почему. Рискуя быть закиданным тухлыми бананами, я всё же пишу эту статью тут, а не в своём личном блоге, потому, что это очень важная тема и хочется, чтобы как можно большее число разработчиков поняли её суть и, возможно, пересмотрели свои взгляды на жизнь… кода.

Как-то раз я приуныл, делать ничего не хотелось, и тут я вспомнил, что в детстве мне сильно хотелось иметь пульт видео наблюдения, как у какого-то злодея из кино, который сидит в темной комнате и хохочет, наблюдая за беспомощными людишками, которые пытаются найти выход. Ну и освежив свои детские воспоминания, я решил воплотить их в жизнь, ну ту часть с пультом наблюдения, без людишек. И тут моим другом стал шагающий семимильными шагами HTML5, а если точнее Stream API.
Так как я раньше уже использовал getUserMedia для захвата звука с микрофона, я подумал, что с видео тоже не будет никаких проблем, но они все же вылезли на свет. Т.е. проблем с самим захватом видео-потока не было, а вот с одновременным выводом данных с нескольких источников на одной странице оказалось не все так просто, как хотелось.

Итак, начнем с самого начала, а именно с захвата и вывода видео с одного источника. Для этого мы будем использовать ф-ю getUserMedia, которая поддерживается во всех нормальных браузерах старших версий (Stream API), ну разумеется кроме IE.

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

Напомним, вкратце логику работы «навороченного» букмарклета:

1. Кликом по сохраненной в закладках браузера ссылке, вызывается на выполнение небольшой (до 2000 символов) javscript-код, основная задача которого организовать загрузку javascript-кода выполняющего основную работу букмарклета
2. Основная часть букмарклета после загрузки выполнят всю работу.
3. Если основную часть букмарклета невозможно подгрузить – основную часть работы, выполняет резервная часть букмарклета, как правило, в урезанном виде.

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


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

Но сначала 77 слов про js13k