
JavaScript *
Прототипно-ориентированный язык программирования
Includor.js, или @j includor

Вы наверняка привыкли, что для того, чтобы подключить внешний JavaScript код на вашей HTML-страничке, нужно писать длинные конструкции вроде этой:
<script src="JS/example.js"></script>
Много времени я мирился этой конструкцией, но однажды мне стало лень писать её, потому что понял, что мне вполне по силам сократить её до такой:
Jasmine vs. Mocha, Chai и Sinon
Данная статья — это краткий обзор различий между двумя популярными фреймворками для тестирования JS: Jasmine 2 и Mocha. Мы также обсудим наиболее полулярные библиотеки Chai и Sinon которые часто используются в связке с Jasmine и Mocha.
1. API (application programming interface)
API в Jasmine и Mocha очень схожи. Они оба поддерживают написание тестов используя BDD (Behavior Driven Development) подход. Вы можете спросить: «что такое BDD»? Если кратко, это подход к написанию тестов, который предоставляет возможность описания функциональности на разговорном языке.
describe('calculator', function() {
describe('add()', function() {
it('should add 2 numbers together', function() {
// assertions here
});
});
});
Как мы запускали Хабр для гуманитариев
«В следующие два года нужно не пытаться изобразить из себя что-то особенное, а просто быть достаточно умным, чтобы компоновать то, что человечество уже создало» (с) bobuk
Год назад на внутреннем хакатоне наши ростовские ребята за ночь скрестили визуальный текстовый редактор, «Типограф Муравьева» и антиплагиат-сервис. Получилась штука, которая помогала быстро подготовить и отправить публикацию в блог.
Одно время штука жила как сайд-проект, затем нам дали немного ресурсов — ну, как внутреннему стартапу. В итоге получилось удобное коллективное медиа без редакции.

Старик Гутенберг был бы доволен
Оно позволяет людям читать занятные истории, как дядька-водолаз 40 лет поднимает затонувшие корабли в Баренцевом море, а писателям на популярные нетехнические темы — немного зарабатывать на текстах.
Давайте посмотрим, что учитывать при разработке подобного сервиса, и что выбрать, чтобы без костылей.
Множество JS-пакетов в одном репозитории

Хабрадевелоперам, привет! Не так давно мы начали разрабатывать комплексный проект, у которого есть или планируется несколько видов фронт-енда, множество сервисов бэк-енда, интерфейс командной строки, демоны и много ещё чего. У всего этого в свою очередь есть шареный код, а совершенно новые приложения должно быть возможным собирать из имеющихся кирпичиков простым и понятным образом.
Если не занудствовать с терминологией, мы делаем платформу. Платформу для визуального программирования под DIY-электронику.
Несмотря на то, что проект находится на ранней стадии, кодовая база уже грозилась превратиться в кашицу. Чтобы это присечь, мы перевели проект на так называемый monorepo-подход. На Хабре не оказалось материалов на эту тему, поэтому попытаюсь восполнить пробел.
Теперь ONLYOFFICE может всё: добавляем плагины в редакторы документов
Подробности далее.

React'ивные Panel'и
Что такое панель? Это довольно простой компонент, разбивающий видимую область на 2-3 блока:
- Шапка. В шапку обычно выводится заголовок и какие-то (обычно навигационные) элементы правления.
- Тело. В тело панели выводится выводится произвольное содержимое. Часто этот блок делается скроллируемым, чтобы шапка не уходила из поля зрения.
- Подвал. Опциональный блок. Сюда выводят обычно общую для содержимого панели информацию и элементы управления.
Не смотря на кажущуюся простоту, реализации обычно не такие уж и простые. Связано это с тем, что вариантов его использования великое множество.
В шапке может быть, а может не быть:
- Заголовок. Дополнительно у него может быть подзаголовок.
- Хлебные крошки. Они могут быть частью заголовка, а могут — подзаголовка.
- Навигационные ссылки. Такие как "назад", "следующий" и тп.
- Кнопки. Такие как "открыть фильтры", "переключить флаг", "закрыть окно" и другие.
Короче говоря, в шапке может быть почти что угодно. В теле же, определённо должна быть возможность выводить любое содержимое. В подвале содержимое так же может быть произвольным.
Получается, что у панели должно быть минимум 3 параметра, которые принимают "сложное содержимое", то есть такое, которое не является плоским текстом, а содержит иерархию вложенных блоков.
Далее идёт обзор тех готовых решений, которые можно найти в гугле. Для каждого указан размер реализации в строках кода (CLOS). Плюс бонус в конце, для тех, кто доберётся ;-)
Горячая перезагрузка Chrome-расширения
На днях возникло желание написать простенькое расширение для Google Chrome. Столкнулся с такой проблемой, что после изменений в коде расширения, браузер не перезагружает его автоматически. Это очень сильно затрудняет разработку, т.к. после каждого Cmd-S в редакторе, приходится нажимать "Reload" в списке расширений, а затем еще и рефрешить страницу, чтобы перезапустить контент-скрипты.
После непродолжительных изысканий, выяснилось, что Chrome предоставляет все необходимые API для того, чтобы реализовать подобную функциональность для своего расширения самостоятельно.
Готовое встраиваемое решение лежит на github.com/xpl/crx-hotreload, а в этой статье я расскажу, как оно реализовано.
Be King of your state with Angular2 State Machine

Управление состоянием своего приложения — интересная и весьма важная задача для многих приложений. Ведь от этого зависит то, насколько внятно и вменяемо будет построен пользовательский интерфейс и насколько успешным будет само приложение.
Сегодня я хотел бы рассказать об одном интересном open-source проекте, который может облегчить работу с состояниями для тех, кто решил написать или переписать свое приложение на Angular2 и думает о том, переписывать ли ему логику управления состояниями заново или стоит что-либо поискать на просторах этих ваших интернетов.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №235 (1 — 6 ноября 2016)

Установка node.js на Raspberry Pi

Привет, Хабр! Статья посвящается веб-разработчикам, которым попала в руки Raspberry Pi первая модель. Когда несколько лет назад я покупал raspeberry это был компьютер за 35 долл, сегодня это приставка для телевизора и домашний сервер IoT устройств.
Из Firefox 52 удалят API уровня заряда аккумулятора для сохранения приватности пользовательских данных

Компания Mozilla заблокирует доступ к одной из функций браузера Firefox, известной как Battery Status API. С ее помощью веб-сайты могли узнавать об уровне заряда батареи ноутбука, планшета или смартфона пользователя. Решение было принято с целью обезопасить право пользователей на приватность. Хронология событий такова, что история началась с подозрений экспертов, за ними последовала реализация и реальное использование. На данный момент не ясно, что будут делать с этой функцией остальные браузеры.
Делаем проект на Node.js с использованием Mongoose, Express, Cluster. Часть 1
Введение
Добрый день, дорогой %username%! Сегодня мы будем описывать создание каркаса приложение по типу MVC на Node.js с использованием кластеров, Express.js и mongoose.
Задача — поднять сервер который имеет несколько особенностей.
- Работает в несколько асинхронных потоков.
- Сессионная информация будет в общей для всех потоков.
- Поддержка HTTPS.
- Авторизация.
- Легко масштабируем.
Статья написана новичком для новичков. Буду рад любым замечаниям!
Ближайшие события
Автоматически генерируемая CMS использую вашу готовую GraphQL-схему

вторая версия GraphQL CMS
В моей предыдущей статье "ну Русском. Оригинал" я рассказывал как можно вдвое сократить свой код и время, если вы используете GraphQL вместе с Mongoose.
Сегодня речь также пойдет о технологии GraphQL и если вы работаете с ней то данная статья сможет помочь вам сохранить приличное количество времени на разработку. Оригинал статьи на английском вы можете найту по ссылке.
» Ссылка на сам модуль: graphql-auto-generating-cms.
Как вы уже наверное догадались данный модуль использует вашу готовую GraphQL схему для генерации полнофункциональной CMS. Вам не нужно будет тратить кучу времени на разработку административной панели, и вы сможете больше сосредоточиться на бизнес процессах вашего проекта и на его архитектуре.
Важным достоинством данного модуля является то что он не требует от вас никаких изменений в вашем готовом коде или архитектуре проекта, что делает его интеграцию максимально простым даже на уже готовых проектах.
У вас есть два способа использовать данный модуль.
- Первый максимально быстрый и подойдет для нового проекта. От вас требуется только GraphQL схема и следование легкому паттерну по наименованию GraphQL методов и типов.
- И второй способ который не требует от вас следованию никаких паттернов, и может быть легко интегрирован в уже готовый проект. Все что от вас нужно предоставить конфигурационный объект вместе с GraphQL схемой.
На данный момент модуль не поддерживает GraphQLList, вложенные объекты и загрузку файлов, их поддержка будет реализована в будущих версиях. На данный момент вы можете легко обойти эти ограничения используя самописные функции и компоненты которыми вы можете дополнить CMS, мы рассмотрим как это сделать в данной статье.
Исходя из всего выше перечисленного давайте разделим текущую статью на несколько пунктов:
- Общие правила
- Подготовка к работе
- Первый способ использования, с паттерном
- Второй способ использования, с конфигурационным объектом
- Дополнение CMS своими компонентами и функциями
Паттерн Стратегия на JavaScript
Ранее я уже публиковал перевод статьи с таким же названием. И под ней товарищ aTei оставил комментарий:
По-моему кое-чего не хватает в этой статье и в статье в википедие — примера в стиле «Было плохо — стало хорошо». Сразу получается «хорошо» и не достаточно ясно, что это действительно хорошо. Буду благодарен за такой пример.
Ответа на него так никто и не дал до сих пор. За 3 года я набрался опыта смелости и теперь, как ответ на этот комментарий, хочу написать о паттерне Стратегия от своего имени.
Крохи теории встречаются где-то по тексту. Но большая часть статьи посвящена практическим способам применения этого паттерна и вариантам его применения избежать.
Добавление аватара, обрезка фото на мобильном устройстве и десктопе на JavaScript и PHP
JavaScript и SEO в 2016 году

Redux-form. Когда работать с формами просто
Подробности здесь.
Хочу представить вашему вниманию библиотеку, которая работает по тому же принципу для форм.

Интервью c Max Stoiber и Сергеем Лапиным: Выбираем state management решение для React.js

В преддверии конференции HolyJS мы поговорили с Максом Штойбером (одним из организаторов React.js Vienna Meetup, создателем react-boilerplate, принимавшим участие и в создании Carte Blanche) и Сергеем Лапиным (членом программного комитета HolyJS) и обсудили, как выбрать state management решение.
Redux, MobX, Relay или другая реализация Flux? Практические рекомендации и лучшие практики.
Макс Штойбер
– Макс, привет! Для начала коротко представься и расскажи о себе.
– Привет! Меня зовут Макс Штойбер, я Open Source разработчик, работаю в компании Thinkmill. Мы делаем всякие прикольные штуки вроде KeystoneJS, разрабатываем веб- и мобильные приложения, вносим свой вклад в улучшение User Experience.
– Звучит круто! Расскажи, как давно ты всем этим занимаешься, когда открыл для себя React, и в каких проектах участвовал?
$mol: reactive micromodular ui-framework
Сколько нужно времени, чтобы просто вывести на экран большой список, используя современные фреймворки?
| Список на 2000 строк | ReactJS | AngularJS | Raw HTML | SAPUI5 | $mol |
|---|---|---|---|---|---|
| Появление списка | 170 ms | 420 ms | 260 ms | 1200 ms | 50 ms |
| Обновление всех его данных | 75 ms | 75 ms | 260 ms | 1200 ms | 10 ms |
Напишем нехитрое приложение — личный список задач. Какие у него будут характеристики?
| ToDoMVC | ReactJS | AngularJS | PolymerJS | VanillaJS | $mol |
|---|---|---|---|---|---|
| Размер ( html + js + css + templates ) * gzip | 322 KB | 326 KB | 56 KB | 20 KB | 23 KB |
| Время загрузки | 1.4 s | 1.5 s | 1.0 s | 1.7 s | 0.7 s |
| Время создания и удаления 100 задач | 1.3 s | 1.7 s | 1.4 s | 1.6 s | 0.5s |
Небольшая головоломка: перед вами синхронный код, загружающий и обрабатывающий содержимое 4 файлов, но с сервера они грузятся параллельно. Как такое может быть?

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