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

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



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

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

Задача вроде бы не сложная, но среди немногочисленных решений в интернете я не нашел подходящего по следующим причинам: слишком сложный и непонятный код, медленные запросы к БД (это особенно ощущается, если в базе много записей), использование библиотеки jQuery, к которой я отношусь не очень хорошо.

Итак, к плюсам моего календаря можно отнесли следующее:

1. Весь код помещается в 200 строчек и состоит из одного файла, который подключается через include
2. Скрипт состоит из чистого php + javascript без использования библиотеки jQuery
3. Используются простые и оптимизированные запросы к БД
4. Подгрузка следующего (предыдущего) месяца происходит через AJAX

Теперь обо всем по-порядку.

В моем случае, в качестве frontend сервера, стоит nginx и формат access-лога имеет вид:

log_format main '$remote_addr — $remote_user [$time_local] "$host" "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" -> $upstream_response_time';

Что на выходе дает что-то вроде такой строки:

188.142.8.61 — - [14/Sep/2014:22:51:03 +0400] «www.mysite.ru» «GET / HTTP/1.1» 200 519 «6wwro6rq35muk.ru» «Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.191602; .NET CLR 3.5.191602; .NET CLR 3.0.191602» "-" -> 0.003

1. tail -f /var/log/nginx/nginx.access.log | cut -d ' ' -f 1 | logtop

Позволяет получить общую картину: распределение уникальных IP, с которых идут запросы, кол-во запросов с одного IP и т.д.
Самое ценное — что все это работает в режиме реального времени и можно мониторить ситуацию, внося какие-либо изменения в конфигурацию (например просто забанить ТОП 20 самых активных IP через iptables или временно ограничить географию запросов в nginx через GeoIP http://nginx.org/ru/docs/http/ngx_http_geoip_module.html).

Gstreamer — самая популярная *nix библиотека для работы с видео, которая является основой для большинства популярных приложений (основной список можно найти здесь).



Однако, столь гибкий инструмент требует тонкого подхода для стабильной и эффективной работы.
Все действия будут рассмотрены на примере онлайн HD трансляции с HDMI входа по RTMP с помощью blackmagic intensity pro, Debian Linux, gstreamer и Nginx.

Всем веб-разработчикам так или иначе нужен какой-то сервер для разработки своих веб-приложений. Кто-то использует «Денвер», кто-то OpenServer, более продвинутые берут виртуальный сервер (VPS), а еще более продвинутые используют Vagrant, а кто-то просто ленивый. Под катом я расскажу, как разворачиваю веб-приложение для разработки с помощью VirtualBox, баша и кой-каких костылей. Для тех, кто ленив и не хочет смотреть под кат: описан один баш-сценарий, который монтирует расшареные папки в гостевую ОС и полу-демон, который запускает первый сценарий после запуска перед остановкой системы и реализует интерфейс демона.

Содержимое: что такое CDN? История возникновения. Зачем она нужна? Кому она нужна, а кому нет? Порог вхождения, стоимость, издержки. Основные технологии.

CDN — сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов с специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. Сервера расположены по всему миру таким образом, чтобы время ответа посетителям сайта было минимальным. Под “контентом” чаще всего подразумевают видео и статические элементы веб-сайтов (не требующие выполнения кода на сервере или запросов в базу данных, такие как css/js), но к “контенту” относятся и совсем неожиданные вещи — например, игры в Стиме (использует CDN для отдачи игр), обновления для операционных систем и т.д.

Немного истории

Резкий рост Интернета в середине 90-х привёл к ситуации, что сервера тех лет не могли в одиночку выдержать нагрузку (много ли может отдать могучий двухпроцессорный сервер на базе Pentium Pro на частоте в 266 МГц с 128 мегабайтами памяти?). Лимит производительности серверов и потребность во всё большей и большей производительности породила ныне забытые слова: “ферма серверов”, “иерархическое кеширование”… Айтишный новояз удивительно чувствителен к возрасту — и слова вроде “servers farm” или “information superhighway” сейчас ассоциируются с тёплыми ламповыми CRT-мониторами, а не с прогрессом. В ходе разработки и внедрения разных решений была замечена одна важная особенность: есть два типа контента — статический и динамический.

Продолжаем разговор о Fossil.

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

Статья для node.js программистов, понимающих принципы асинхронно-событийного программирования, но не знающих как это устроено изнутри. Если для вас уже недостаточно стандартной картинки с «зацикленными» кружочками и хочется хотя бы взглянуть, что же у цикла событий под капотом, то вам под кат.

promise.io

Promise.io представляет собой модуль для удаленного вызова процедур(RPC), использующий «обещания» (promises). С его помощью можно создать вот такой сервер:

var server = new PromiseIO({
  someFunc: function(input) {
    return 'I got: ' + input;
  }
});
server.listen(3000);

Привет, Хабр! В этот раз мы поговорим о стилизации инпутов без картинок и JS, особенностях вертикальных отступов, CSS счетчиках, необъятных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.

Последние три дня примечательны тем, что в сеть попали три больших базы аккаунтов пользователей почты Яндекса, Mail.ru и Gmail.

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

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

В 2010 году Аза Раскин, сын Джефа Раскина, поделился в своем блоге очень интересным, как мне кажется, методом фишинга, который он назвал Tabnabbing.

Его суть в следующем:

1. Атакующий привлекает пользователя на страницу своего сайта, которая выглядит абсолютно нормальной и такой, какой пользователь ожидает её увидеть.
2. Атакующий определяет, что пользователь длительное время не взаимодействовал со страницей, или вообще переключился на другую вкладку.
3. Пока страница неактивна – подменяется ее favicon на иконку сайта, под который она будет маскироваться.
4. Контент страницы меняется на контент фейковой формы логина сайта, под который она маскируется.
5. С определенной достаточно большой долей вероятности пользователь, вернувшись ко вкладке – не задумываясь, автоматически введет свои логин и пароль.
6. После перехвата данных авторизации – пользователя можно просто переадресовать на атакуемый сайт, ведь вероятнее всего он на нем уже авторизован и именно этого поведения он и будет ожидать.

Вместе с обновлением Windows Phone 8 до версии 8.1 появилась возможность писать нативные приложения на HTML и JavaScript. Вы можете использовать стандартные возможности HTML, CSS, JavaScript, сторонние библиотеки и специальную библиотеку WinJS (в версии 2.1).

Браузер Google Chrome поставляется с превосходными инструментами для разработчика, они же есть в Яндекс.Браузере, новой Опере, и в других браузерах, основанных на базе Chromium.

Среди них есть потрясающие инструменты для работы с памятью, ознакомиться с которыми можно в статье пользователя Panya — «Как находить и устранять утечки памяти на примере Яндекс.Почты».

Javascript хранит объект в памяти до тех пор, пока на него есть хоть одна ссылка. Как только вы удаляете все ссылки на объект, он уничтожается сборщиком мусора.

Таким образом, чтобы удалить объект, нужно удалить все ссылки на него.

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

Bézier Clock — часы на кривых Безье, где цифры плавно перетекают из одной формы в другую. Автор говорит, что это его первый проект на Processing.js, исходный код опубликован. Можно отредактировать его и изменить, например, скорость анимации.

При выключенной анимации цифры трансформируются за 5 секунд до смены значения, а при включенной (пробелом) — в течение всего времени. Например, в 12:30:35 цифра «2» будет уже на полпути к превращению в «3». Направляющие скрываются кликом мыши.

DataCollection.js

DataCollection.js* — представляет собой библиотеку для выполнения запросов к источнику данных. Вы можете использовать ее как в браузере так и на стороне Node. Пример в документации использует массив объектов, над которым выполняются операции по отбору(фильтрации) используя представление ключ/значение, а так же используются некоторые около sql-ные операторы, такие как max и distinct.

Эффект Glitch Лукаса Беббера выглядит очень круто — как будто вы смотрите на текст на старом мониторе, который слишком часто роняли на пол и у него «плавает» вертикальная синхронизация и сведение.

Реализация этого эффекта на CSS выглядит вполне убедительно. Мне пришлось немного поломать голову, чтобы выяснить, как он работает, и теперь я хочу объяснить это вам. Кроме того, я воспроизвёл этот эффект не только для текста, но и для растровых изображений и SVG, а так же написал несколько примесей Sass, чтобы облегчить работу с ним.

Все началось с того, что некоторые абоненты, подключающиеся по протоколу SIP к нашей корпоративной АТС без использования VPN, не соблюдали основы безопасности и оставляли на внешнем IP-адресе доступ к веб-интерфейсу или роутера, или IP-шлюза со стандартным логином-паролем. Что дает потенциальным злоумышленникам возможность получить настройки, прикинуться нашим абонентом и сделать множество звонков по междугородним направлениям.

Сначала просто CURL'ом подергал IP-адреса абонентов (выявилось, что некоторые аппараты при простом HTTP POST запросе ребутятся), а затем захотелось как-нибудь с изюминкой просканировать да красоту получить. В общем, получился Scrawl — скриншотер сайтов (сайт проекта, репозиторий).

На модной волне headless браузеров захотелось попробовать PhantomJS, более удобный интерфейс к которому дает CasperJS, а затем стало желательно использовать совместно с Node.JS, поэтому стал использовать SpookyJS.

Привет, друзья!

Я просто хотел поделиться с вами своей визуализацией зависимостей пакетов на npm'e. Выглядит это так:



Вы ему говорите имя пакета, он вам в ответ весь граф зависимостей. Затем можно проанализировать кто поддерживает пакеты и какие есть лицензии в графе.

Все исходники доступны здесь: github.com/anvaka/npmgraph.an
Рабочая версия сайта здесь: npm.anvaka.com/#

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

Надеюсь, кому-нибудь пригодится. Буду рад любым пожеланиям!

P.S: Забавы ради я также сделал визуализацию в 3D, но пока от нее мало толку (кроме забавы).

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

Highcharts.js

В последнее время я зачастил с библиотеками предназначенными для построения графиков и диаграмм. Но против трендов на GitHub с 2500+ звезд не попрешь, да и когда есть из чего выбирать — всегда хорошо. Highcharts.js — это мощный инструмент, основанный на SVG и VML рендеринге со множеством плагинов. Минус этого проекта — лицензия, которая позволяет использовать скрипт только в некоммерческих целях. Хочу обратить также ваше внимание, что именно этот проект выбрали такие компании как Яндекс, Facebook, Twitter, Yahoo, AT&A, Nokia и др.

Добрый день, %username%. Сегодня я хотел бы поделится своим опытом разработки прототипа онлайн lossless аудио плеера.

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