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

Хотя многие из нас используют его постоянно, не все знают, что существует большое количество сторонних (и бесплатных) сервисов и инструментов, которые тесно интегрированы с github и расширяют его функциональность.

В данной статье мы уделим внимание, в основном, инструментам, работающим в инфраструктуре npm. Полный список сервисов, интегрирующихся с github, можно посмотреть на странице github integrations directory.

Сегодня в выпуске:

• Настраиваем continuous integration c travis ci
• Настраиваем отчеты о test coverage с coveralls
• Мониторим статус зависимостей с david
• Настраиваем автоматическое обновление зависимостей с greenkeeper
• Улучшаем сообщения коммитов с commitizen
• Генерируем changelog и release notes с conventional-changelog
• Управляем задачами с zube

Предупреждение: проверьте, как установлена версия Webpack в package.json. Возможно скоро ваш continuous integration сломается.

Наконец-то Webpack 2 преодолел рубеж beta и release candidate. Это значит, что всё работает стабильно, и можно без опаски использовать его в production.

Список изменений/улучшений:

• Нативная поддержка ES6-модулей;
• Разбиение кода на чанки — Code Splitting with ES6;
• Поддержка динамических выражений при загрузке модулей — Dynamic expressions;
• Изменения при работе с Babel;
• ES6-специфичные оптимизации;
• Breaking Changes;
• Новый сайт с документацией.

Подробности под катом.

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

В основе React лежат компоненты. Они схожи с DOM элементами браузера, только написаны не на HTML, а при помощи JavaScript. Использование компонентов, по словам Facebook, позволяет один раз написать интерфейс и отображать его на всех устройствах. В браузере все понятно (данные компоненты преобразуются в DOM элементы), а что же с мобильными приложениями? Тут тоже предсказуемо: React компоненты преобразовываются в нативные компоненты.

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

Итак, начнем.

Доброго времени суток, уважаемые хабравчане! Сегодня я хочу рассказать про наш с коллегами проект — Statsbot. Это аналитический бот, который интегрируется с Google Analytics, Mixpanel, New Relic и отображает необхомые метрики в вашем чате.

Изначально бот появился в Slack и за 4 месяца своего существования его “наняли на работу” более 7000 команд по всему миру, включая NASA, Vimeo, SalesForce, Pebble, Mixpanel и множество других известных брендов. А теперь мы рады сообщить, что “ваш покорный слуга” обитает еще в Telegram — @getstatsbot.

JavaScript quality guide

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

От переводчика

Всем привет, с вами Максим Иванов, и сегодня мы поговорим о правилах оформления кода на языке JavaScript. Николя Бэвакуа (Nicolás Bevacqua), автор книги «Дизайн JavaScript-приложений» (JavaScript Application Design), разработчик из Аргентины, опубликовал данное руководство достаточно давно, первая запись появилась еще в 2014 году, многое написано по стандарту ES5, однако, в наши дни это все равно актуально, сейчас, когда ES6 еще нигде полноценно не работает без babel и прочих транспайлеров. Хотя мы видим прогресс в топовых десктопных браузерах (Google Crhome, Firefox), где уже реализовано 70-90% задуманного, мы видим, что они стремятся поддерживать новый стандарт, но, к сожалению, ещё нет браузеров, которые полностью могли бы поддерживать ES6. К слову, я буду очень рад вашим комментариям. В общем, удачи и давайте начнем.

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

Заказчик в моем лице определил следующие требования:
1. Симуляция работы в Инстаграме как обычный пользователь, лайкание в одном треде (чтобы Instagram не забанил моего бота).
2. Возможность авто-лайкания произвольного количества аккаунтов с произвольной глубиной лайков.
3. Запуск через шедулер, работа в бэкграунде.

Выбор пал на nodejs. Почему nodejs? Потому на Perl'е (который я использую время от времени уже несколько лет) делать не хотелось, а nodejs привлек внятным менеджеров пакетов, нативной поддержкой JSON и вообще Javascript в браузере роднее чем какой-нибудь Python.

CSS Protips

Это современные решения типичных проблем, коллекция советов, которая поможет вам улучшить ваши профессиональные навыки CSS.

От переводчика

Приветствую, для вас подготовлен еще один перевод заметок на тему CSS. Мэтт Смит, разработчик из Портленда, поделился CSS-советами и выложил их на GitHub. Мне особенно понравилась его подборка, она структурирована, не особо громоздкая в плане скучных больших текстов и описаний, и в целом будет понятна даже новичку. Я буду рад, если в комментариях мы с вами обсудим каждый пункт и в итоге дадим некоторые заключения. Итак, приступим.

Cодержание

1. Используем псевдо-класс :not для задания рамки навигации
2. Добавляем межстрочный интервал элементу body
3. Центрируем по вертикали все что угодно
4. Правильно разделяем запятыми элементы списков
5. Отрицательный порядковый номер в nth-child
6. Используем SVG-логотипы
7. Аксиоматический CSS
8. Максимальная высота у CSS-слайдера
9. Наследуем box-sizing
10. Одинаковая ширина ячейки таблицы
11. Динамические внешние отступы при помощи flexbox
12. Используем селектор атрибутов пустых ссылок
13. Стили по умолчанию для обычных ссылок

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

В ушедшем году, вышел стандарт ECMAScript 2015 (неформально ES6), который сильно изменил, то к чему мы привыкли. Появилась масса новых возможностей, которые по сути представляют собой современное надмножество языка, пытающегося решить существующие проблемы. Class, let, const, стрелочные функции… разработчик, который ранее не видел код, написанный на ES6, не сразу догадается, что перед ним, по сути, старый добрый JS.

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

Я не хотел принимать участие в недельном тренде хабра — «Все пишем в 30 строк кода!», нет времени лишнего. Но пост theaqua про Hello world в 1 строчку на чистом JavaScript вдохновил меня побить этот рекорд. Я написал игру, используя JavaScript, HTML и CSS, при этом использовал всего 0 строк кода. После этого поста я не мог спать. Я мучался бессоницей и, взяв себя в руки, сел писать игру. Понимая что мне придется использовать 0 строк кода на Javascript — я сильно боялся. Написать программу в 1000 строк кода и больше — не составляет проблем. Но вот написать 0 строк кода… Это безумие. Это переворачивает мозг. Меняет отношение к вебу. Понимаешь, что раньше ты писал как-то не так…

Для тех, кто не привык ждать — ДЕМКА.

Это не фейк, а полноценная игра. Подробности под катом.

Это перевод статьи Крэга Баклера (Craig Buckler) «SitePoint Smackdown: PHP vs Node.js» и судейских решений Бруно Шкворца и Джеймса Хиббарда (Bruno Škvorc, James Hibbard) статьи Крэга Баклера.

От переводчика

Существует много статей на эту тему, с качественными характеристическими анализами и прогнозами производительности. Однако, мне все же хотелось найти такую статью, где профессиональные программисты делятся своими мнениями и пытаются что-то подсказать, предостеречь новичка, который только изучает PHP или NodeJS (cерверный JavaScript). Многие не любят PHP и говорят, что PHP создан, чтобы умирать (да, там есть сборщик мусора, который убивает наши переменные после выполнения скрипта, а не потому что его забросил Расмус Лердорф), однако, что теперь не учить PHP совсем, в то время как на нем работает 80% сайтов в интернете. Поэтому, если мы хотим быть профессионалами и пытаться хоть как-то расширить свой кругозор, нам нужно четко разделять задачи PHP и задачи NodeJS, а не сливать все в кучу.

«10 раундов боксеров разных весовых категорий»

Одним прекрасным днем Крэг Баклэр (Craig Buckler) на сайте SitePoint.com опубликловал сравнительный анализ PHP и NodeJS под названием «10 раундов», чтобы определить кто является абсолютным чемпионом. Однако, в это же время он отметил, что такой анализ является несколько спорным. Поэтому, для некоторого развлечения, он пригласил двух судей, которые внесли бы свою лепту в этот боксерский поединок. Он попросил Бруно Шкворца (Bruno Škvorc, редактор колонки PHP на сайте SitePoint.com) и Джеймса Хиббарда (James Hibbard, редактор колонки JavaScript на сайте SitePoint.com) прокомментировать каждый из раундов, удар за ударом — оценка.

Пытаясь разобраться с библиотекой от Facebook ReactJS и продвигаемой той же компанией архитектурой «Flux», наткнулся на просторах интернета на две занимательные статьи: «ReactJS For Stupid People» и «Flux For Stupid People». Решил поделиться с хабравчанами переводом первой (а чуть позже и второй) статьи. Итак, поехали.

ReactJS для глупых людей

TL;DR В течении долгого времени я пытался понять, что такое React и как он вписывается в структуру приложения. Это статья, которой мне в свое время не хватало.

Что такое React?

Чем отличается React от Angular, Ember, Backbone и других? Как управлять данными? Как взаимодействовать с сервером? Что, черт возьми, такое JSX? Что такое «component»?

СТОП.

Остановитесь прямо сейчас.

React — это ТОЛЬКО УРОВЕНЬ ПРЕДСТАВЛЕНИЯ.

Нам в Хекслете нравится ReactJS и Flux. Нам кажется, что это правильное направления развития. Мы любим функциональное программирование и чистые функции, и когда сложные архитектуры упрощаются за счет подходов, связанных с ними — это круто. По Реакту уже есть немало ресурсов в интернете, в том числе наш практический курс по React JS. Последний урок в этом курсе называется «Однонаправленное распространение данных», и там мы подходим к интересной теме, которая лежит в основе архитектуры Flux.

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

Мы используем React и Flux в своей браузерной среде разработки Hexlet IDE (она в опен-сорсе), в которой учащиеся выполняют практические задания. Flux одновременно очень популярен и очень непонятен для многих в мире веба. Сегодняшний перевод — попытка объяснить Flux на пальцах (ну, то есть картинках).

Проблема

Вначале нужно понять, какую проблему решает Flux.

С чего начать изучение новой библиотеки или фрейморка? Сразу же найти статью на Хабре и с головой погрузиться в пучину практических примеров? Или сначала тщательно изучить официальную и неофициальную документацию, прежде чем перейти к практике? Именно между этими вопросами будет метаться ваше сознание, когда вы решите узнать, что же такое ReactJS. Чтобы желание учиться не умерло, как знаменитый ослик, обязательно загляните под капот.

Наступает момент когда виртуального хостинга становится недостаточно и Ваш проект так и «просится» на сервер. Не всегда для новых задач Вам понадобится сразу выделенный сервер, но как минимум с виртуального сервера начать стоит. При этом многие из Вас, что бы как то сэкономить начинают искать партнера(ов) для аренды более производительной услуги. Также, одним из вариантов экономии бюджета — есть использование бесплатного программного обеспечения.

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



Думаю многие из Вас догадались, что речь пойдет о CentOS Web Panel (CWP). В отличие от многих других панелей управления CWP позволит автоматически развернуть полный стек LAMP с кэшированием на уровне веб-сервера посредством Varnish Cache — это замечательно решение для хранения «горячего» кэшируемого контента Ваших веб-страниц в оперативной памяти. Оно позволит ускорить Ваш веб-сайт, и в то же время уменьшит нагрузку на процессор.

Недавно вышла новая версия api Post Hawk и чат основанный на нём. Сегодня хочу показать как можно за минимальное количество времени трансформировать этот чат в электронного консультанта с простенькой панелью управления.

Итак, приступим.

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

1) UIkit

getuikit.com

99% проблем юзабилити возникают из-за медленного ответа веб-интерфейсов. Очень важно создавать быстрые интерфейсы. UIKit полезен именно для этого. Он лёгкий, модульный, и идеальный для разработки фронтенда. Предоставляет богатый набор HTML, JavaScript и CSS компонентов.

После выпуска Telegram Bot Platform многие задумывались о написании своего бота. Этот пост описывает минимальные шаги, необходимые для написания собственного бота на Ruby. Для этого потребуется только аккаунт в Telegram и машина с установленным Ruby на ней.

Доброго дня, хабровцы.
По результатам прошлой статьи я понял, что тема интересна общественности, поэтому подготовил еще один материал, чуть сложнее.
По прежнему нет скриптов, только HTML/CSS.

Смотрите видео и под кат.

Обойдусь без копипастов и даже ссылок о том, что Ruby за зверь такой, ибо написано было уже сполна. В данном посте просто хочу рассказать о пути изучения Ruby (и, впоследствии фреймворка Ruby on Rails) человека далекого от программирования.

1. Любопытство

«Насколько далекого?», спросите вы, а я отвечу — «Чуть менее, чем полностью», так как в десятом классе в школе у меня были уроки программирования, парочка из которых были уделены Паскалю. Признаюсь, впоследствии о html узнал, и даже мог в Dreamweaver-e сверстать страничку или поставить готовый движок, да по инструкции налепить плагинов, но не более.
Хотя компьютеры мне нравились, пошел я учиться на экономиста* — бакалавриат, магистратура по бух. учету и аудиту, аспирантура по финансам, работа в банке, преподавание, страхование. Но не жилось мне спокойно в финансах, — финансовый калькулятор удовлетворял необходимости решения тривиальных задач, но не удовлетворял мой мозг. А ему хотелось посчитать не только будущую и приведенную стоимость актива, но и создать массив данных из исторических стоимостей этого актива за n лет, высчитать среднюю доходность, дисперсию и, в конце-концов построить красивый график!

Cказ о том, как быстро создать несколько полезных сервисов для управления городом посредством ботов в Telegram.

Меньше 3 месяцев назад в республике Татарстан официально открылся Иннополис — первый российский город, появившийся в 21 веке.

Его особенность – экономика, основанная на высокотехнологичных индустриях и, прежде всего, на IT: ключевыми точками притяжения в город являются университет «Иннополис» — siliconrus.com/2015/09/innopolis-student/и одноименная особая экономическая зона: innopolis.ru/sez/investoru

Перспективный мастер-план города рассчитан на 155 тысяч жителей через 15 лет, а сегодня в нем проживает около 400 студентов и пара сотен постоянных жителей.



Как и все стартапы, город-стартап начинается с нескольких сотен жителей-последователей, которым мэрия города уделяет особое внимание. У такой немногочисленности есть свои преимущества: например, все жители города, равно как и лица, принимающие решения о развитии Иннополиса, находятся на расстоянии одного «тапа» в Telegram.