JavaScript *

Начиная с версии 0.9.0 (примерно пару месяцев назад) в Meteor обновилась система пакетов, созданная на основе Atmosphere. С выходом новой системы пакетов, каждому пользователю стали доступны создание и публикация собственных пакетов. По состоянию на текущий момент в системе более 1800 пакетов и насчитывается около 500 контрибьюторов.

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

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

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

19 сентября в Екатеринбурге прошла конференция сообщества фронтенд-разработчиков.

Ниже представлены видео-записи докладов.

Как сделать Инстаграм в браузере (Дмитрий Дудин, xbSoftware)

• достоинства и недостатки Canvas, WebGl, SVG и CSS-фильтров и шейдеров;
• неизведанный мир SVG-фильтров, его продуманные до мелочей устои, синтаксис и правила;
• возможности обработки изображений — от простых чёрно-белых картинок до нелинейных искажений и градиентных карт.

Social-feed

В настоящее время практически на каждом сайте есть социальный блок, где отображаются последние посты из twitter, последние фото из instagram или обновления из facebook. Зачастую эти социальные блоки работают на основе iframe, что не позволяет гармонично интегрировать обновления из социальных сетей с основным контентом сайта. В случае, если необходимо отображать обновления только из facebook или только из instagram, то существуют jQuery плагины с редактируемым внешним видом (этот, или этот). Если вам необходимо отображать обновления сразу из нескольких социальных сетей, то на помощь приходит Social-feed.

Не так давно озадачился поиском работы, в связи с чем посетил n-нное количество собеседований и услышал много интересных вопросов. По сети гуляет много статей с вопросами по JS, поэтому постараюсь выбрать вопросы, которые ещё не видел. Здесь нет вопросов типа Что такое замыкание?, Наследование в JavaScript или Сделайте ajax запрос на VanillaJS. Кстати советую поискать ответы на эти вопросы, прежде чем читать статью :) Под катом вопросы типа «с подвохом». Вряд ли какой-то из них попадётся вам, но, надеюсь, статья настроит вас на «подвоховое» мышление, и напомнит некоторые скользкие места и подводные камушки javascript.

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

Сделал веб страничку для упрощения процесса — каждая напечатанная буква пропадает через 10 секунд. Ничего никуда не сохраняется.

morula.ru/clearYourMind

Надеюсь кому-либо тоже будет полезно.

Спасибо за внимание.

Оригинальная статья — Understanding Monads With JavaScript (Ionuț G. Stan).
Буду признателен за комментарии об ошибках/опечатках/неточностях перевода в личку

От автора

Последние несколько недель я пытаюсь понять монады. Я все еще изучаю Haskell, и, честно говоря, думал, что знаю, что это такое, но когда я захотел написать маленькую библиотечку — так, для тренировки — я обнаружил, что хотя и понимаю, как работают монадические bind (>>=) и return, но не представляю, откуда берется состояние. Так что, вероятно, я вообще не понимаю, как это все работает. В результате, я решил заново изучить монады на примере Javascript. План был тот же, когда я выводил Y Combinator: взял изначальную задачу (здесь это взаимодействие с неизменяемым явно состоянием), и проделал весь путь к решению, шаг за шагом изменяя изначальный код.

Сегодня на Хабре мы представляем технологию реплицированной модели, которая позволяет создавать коллаборативные и реалтаймовые веб приложения так же легко, как локальные десктопные. Мы считаем, что при разработке приложений, синхронизация данных в реальном времени должна быть доступна так же, как TCP поток, HTTP запрос или ток из розетки — сразу и без вопросов. HTML5 приложения, написанные на Swarm, в части автономности, локальности и скорости загрузки не уступают нативным.
Используя библиотеку Swarm, за выходные мы делаем больше, чем за месяц делали без Swarm. Что важней — можем делать то, что без неё делать вообще не могли. Эту библиотеку синхронизации мы предлагаем совершенно бесплатно.



Сегодня мы выкладываем TodoMVC++, реактивное HolyGrail-на-стероидах приложение, написанное на Swarm+React. Приведу список демонстрируемых в приложении возможностей:

npm 2.0

npm 2.0 увидел свет, и объявление об его выходе содержит множество деталей об исправлениях и о развитии процесса выпуска проекта. Одно из главных изменений касается run-script, данная команда теперь способна принимать аргументы:

В npm@2.0.0, Ben изменил npm run-script таким образом, что-бы дать вам возможность передавать аргументы в скрипт. Это критическое изменение. Это так просто. Думайте о npm 2 как о шаге на пути прямо к npm с semver. (Дальше больше. npm 3 выйдет еще до конца года.)

Рабочее название — TTT, или Тасующаяся Трансформация Текста. 
Разработан по спецзаказу digital-агенства Contorra.
Этот плагин позволяет сменить один текст на другой посредством событий «клика» или «наведения» на сам объект, либо любой другой, с эффектом трансформации каждого символа. Каждый символ текущего текста двигается по кратчайшему пути в массиве символов своего типа (заглавные, строчные буквы, цифры, знаки пунктуации и прочие) и останавливается при достижении конечного результата. В результате мы наблюдаем, как из хаоса вращающихся символов постепенно проявляется заданный текст.

Демо

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

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

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

Издательство Питер решило вспомнить о хороших, но забытых книгах по JavaScript
1. JavaScript: сильные стороны — Дуглас Крокфорд
2. Графика на JavaScript — Рафаэлло Чекко
3. Веб-приложения на JavaScript — Алекс Маккоу
4. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS 2-е изд. — Робин Никсон

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

HumHub

Открытая социальная сеть, построенная на Yii — достойный аналог Diaspora. Разработчики вообще говорят, что это фреймворк, который предоставляет инструменты для лёгкой и продуктивной командной работы. Гибкая модульная система и ряд плагинов: заметки, таск-менеджер, календарь, голосование, рассылки и др. Еще HumHub — это очень красиво. Клевый современный интерфейс, асинхронность, всплывающие подсказки и прочие детали.

Arr.js — это «класс», унаследованный от стандартного Array. Отличительными особенностями являются: наличие события change для отслеживания любых изменений в массиве, и методы insert(), update(), remove(), set(), get() для упрощенной работы с массивом. Доступны все «родные» методы стандартного Array.

var fruits = new Arr('apple', 'orange', 'pineapple');

fruits.on('change', function(event) {
  alert('I changed fruits: ' + fruits.join(', '));
});

fruits.push('banana');

Melchior.js

Melchior.js (GitHub: voronianski/melchior.js, Лицензия: MIT, npm: melchiorjs) от Dmitri Voronianski представляет собой реализацию цепочного определения модулей(CMD), концепцию, введенную John Wu.

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

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

Предисловие

Меня уже очень давно привлекает javascript в качестве единого языка для веб-разработки, но до недавнего времени все мои изыскания оканчивались чтением документации nodejs и статей о том, что это callback`овый ад, что разработка на нем приносит лишь боль и страдания. Пока не обнаружил, что в harmony появился оператор yield, после чего я наткнулся на koa, и пошло поехало.

Всем привет!

Увидел, что статья о трансдьюсерах на JavaScript стала вполне популярной и хотел отметить, что уже давно доступен генератор парсеров на транзисторах^W трансдьюсерах. По крайней мере, очень на это похоже. У меня есть статья с подробным описанием на английском «Generating Functional Parsers» и, собственно, исходники.

Тут какие-то новые правила, постов-ссылок уже нет, просят всё обильно описывать — так что я подчинюсь и парой слов (разбавленных необходимой водой), расскажу, о чём это, а то могу ведь и не прав оказаться. Тем более русской версии статьи пока нет, да и скорее всего не будет. Одна надежда, что эта пройдёт.

Поиск оптимального маршрута юнита к цели на неизвестной карте — одна из самых сложных задач при разработке игры. К счастью, существует некоторое количество алгоритмов, которые решают эту задачу. Есть и отличная библиотека PathFinding.js с поддержкой 11 таких алгоритмов.

Введение

Как известно, создать новый объект в JavaScript можно используя функцию-конструктор следующего вида:

function Fubar (foo, bar) {
  this._foo = foo;
  this._bar = bar;
}

var snafu = new Fubar("Situation Normal", "All Fsked Up");

Когда мы вызываем функцию-конструктор при помощи ключевого слова new , то получаем новый объект, а контекст его конструктора устанавливается на сам объект. Если мы явно не возвращаем ничего из конструктора, то получаем сам объект в качестве результата. Таким образом, тело функции конструктора используется для инициализации вновь созданного объекта, прототипом которого будет содержимое свойства prototype конструктора, так что можно писать следующим образом:

Fubar.prototype.concatenated = function () {
  return this._foo + " " + this._bar;
}

snafu.concatenated()
  //=> 'Situation Normal All Fsked Up'

Используя оператор instanceof можно убедиться в том, что объект был создан при помощи определенного конструктора:

snafu instanceof Fubar
  //=> true

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

В первой части мы остановились на следующей спецификации: Трансдьюсер — это функция принимающая функцию step, и возвращающая новую функцию step.

step⁰ → step¹

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

result⁰, item → result¹

Чтобы получить новый текущий результат в функции step¹, нужно вызвать функцию step⁰, передав в нее старый текущий результат и новое значение, которое мы хотим добавить. Если мы не хотим добавлять значение, то просто возвращем старый результат. Если хотим добавить одно значение, то вызываем step⁰, и то что он вернет возвращаем как новый результат. Если хотим добавить несколько значений, то вызываем step⁰ несколько раз по цепочке, это проще показать на примере реализации трансдьюсера flatten:

function flatten() {
  return function(step) {
    return function(result, item) {
      for (var i = 0; i < item.length; i++) {
        result = step(result, item[i]);
      }
      return result;
    }
  }
}

var flattenT = flatten();

_.reduce([[1, 2], [], [3]], flattenT(append), []); // => [1, 2, 3]

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

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

Итак, сейчас мы можем:

1. Изменять элементы (прим. map)
2. Пропускать элементы (прим. filter)
3. Выдавать для одного элемента несколько новых (прим. flatten)