Сегодня Redux — это одно из наиболее интересных явлений мира JavaScript. Он выделяется из сотни библиотек и фреймворков тем, что грамотно решает множество разных вопросов путем введения простой и предсказуемой модели состояний, уклоне на функциональное программирование и неизменяемые данные, предоставления компактного API. Что ещё нужно для счастья? Redux — библиотека очень маленькая, и выучить её API не сложно. Но у многих людей происходит своеобразный разрыв шаблона — небольшое количество компонентов и добровольные ограничения чистых функций и неизменяемых данных могут показаться неоправданным принуждением. Каким именно образом работать в таких условиях?

В этом руководстве мы рассмотрим создание с нуля full-stack приложения с использованием Redux и Immutable-js. Применив подход TDD, пройдём все этапы конструирования Node+Redux бэкенда и React+Redux фронтенда приложения. Помимо этого мы будем использовать такие инструменты, как ES6, Babel, Socket.io, Webpack и Mocha. Набор весьма любопытный, и вы мигом его освоите!

В субботу 20 июня мы снова проводим конференцию Web Standards Days по фронтенду и веб-стандартам в Петербурге и будем рады видеть вас среди участников.

Место проведения новое. Вместо привычного факультета переподготовки специалистов в Политехе мы решили попробовать что-то новенькое и нашли отличный зал в самом центре Санкт-Петербурга — Центр деловой культуры на Почтамтской улице.

В этом году мы порадуем вас зарубежным докладчиком Брюсом Лоусоном, который будет впервые выступать в Петербурге и расскажет про Blink.



Мы уже анонсировали докладчиков из Opera Software, Яндекса, LiveJournal и Авито. Вот полная версия программы:

Мой коллега Заур рассказал о разработке проекта по перезапуску медиа-издания. Я же хочу рассказать об особенностях работы менеджера на таком проекте.

С 2007 года я работаю проджектом. Работала в Студии Лебедева, Articul Media Group, работала в основном с крупными компаниями (TНК-BP, Евросеть, ВТБ, Samsung, ОКОИ Сочи-2014). Опыта работы с медиа у меня не было до мая 2012, когда пришла в Ленту.ру и попала в самый разгар проекта по перезапуску. Новая Лента открылась в январе 2013-го. В марте 2014-го, после увольнения главреда, мы перешли в Ведомости, где cейчас готовим перезапуск.

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

    Не так давно меня попросили подобрать новый телефон, так как я имею кое-какой опыт общения с платформой Android и телефоны на этой платформе доступны в широком ценовом диапазоне, взгляд был смещен именно на так называемые андроидфоны.

    Изучив российский розничный рынок не дорогих смартфонов на базе Android'а я начал уже присматриваться к LG Optimus One, но по счастливой случайности бродя по интернетам наткнулся на героя обзора — Orange San Francisco, ценой в Англии всего в £99 (около 4500 наших рублей) и по техническим характеристикам превосходящий чуть-ли не в два раза все предоставленные на нашем рынке смартфоны стоимостью до 10 000 рублей.

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

С чего всё началось / Идея

На дворе стоял холодный январь 2013 года. За окном было где-то -30. Все, чего хотелось — закинуться чашкой-другой кофе, закутаться в плед и сидеть у камина. Но возбужденный взгляд Миши Давыдова и уверенность в победе долго томиться не дали:

— Олег, есть идея! Давай организуем встречу по типу MoscowJS, почитаем докладов, будет круто!
— Хм… давай!

В итоге решили, что для встреч по JS контента будет слишком мало, и взяли весь frontend. Так и началась история одной из ведущих на сегодняшний день frontend-тусовок Екатеринбурга – FrontTalks.

По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.

У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.

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

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

30 мая мы выступили с рядом докладов в разных секциях конференции DUMP, которая прошла в Екатеринбурге. Изначально нас попросили затронуть холиварную тему «почему 1С-битрикс», говно :-), но мы решили ограничиться проблемами кастомизации коробок при создании площадок синхронизированных с системами товарного учета (далее СТУ)

Многие слышали о рекомендациях WAI-WCAG (Web Accessibility Initiative Web Content Accessibility Guidelines), призванных в частности помочь пользователям с ограниченными возможностями (например с дефектами или отсутствием зрения).

Но, зачастую, он игнорируется или отправляется как backlog task в долгий ящик. Это кажется лишним, не востребованным, да и в принципе, что слепой будет делать у меня на сайте?



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

В моем же случае — это требование заказчика. Согласно Section 508 если я хочу продать продукт любому федеральному органу США – я должен поддерживать этот стандарт.

Многие скажут, что вряд ли собираются что-то продавать правительству США, но в России такой стандарт тоже есть (ГОСТ Р 52872–2007) и никто не гарантирует, что завтра он вас/нас не коснется.

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

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

В этом посте я приведу пример организации стилей на типичном проекте.

Небольшое вступление, попробую объяснить актуальность проблемы и зачем это нужно.
Рассмотрим такую ситуацию. Разработчику ставят задачу, реализовать очередной функционал на сайте. Это допустим включает добавление новых разделов, блоков, элементов. Разработчики зачастую не доверяют чужому коду, и когда доходят до верстки, находят css-файл с названием типа main.css и дописывают в конец свои новые стили.
Проходит некоторое время, приходит новый разработчик, ему ставят подобную задачу, он если и пытается разобраться в стилях, то видит, что там нет никакой закономерности, и повторяет то же, что делали предыдущие.
Руководство ставит сроки, разрабатывается все новый и новый функционал, проект растет. В итоге css файлы превращаются в мусорку, сайт грузится дольше, появляется больше дефектов и т.д..
Я думаю, многим это знакомо.

(картинка кликабельна и поздравительна)

Общая идея: летающие бабочки на фоне красивой картинки и под весеннюю музыку. (Сразу признаюсь, у меня также была Silverlight-версия открытки, которую я делал год назад. Урок анимации бабочек в Silverlight.)

Для отрисовки открытки, помимо стандартных средств CSS, будем использовать HTML5 Canvas и библиотеку анимации EaselJS.

Сегодня мы запускаем для публичного тестирования новый API-сервис  – Яндекс.Локатор. C помощью этого программного интерфейса можно определить координаты мобильного устройства или ноутбука по идентификаторам WiFi и GSM сетей, в зоне действия которых он находится. С помощью API Яндекс.Локатора можно отображать местоположение пользователя на карте,  добавлять геотэги к фотографиям и сообщениям, отправляемым в социальные сети (например, в Twitter), создавать игры и придумывать другие сервисы, основанные на географическом местоположении пользователя.

Если в телефоне пользователя нет GPS-приемника, локатор поможет определить, где пользователь находится.API будет полезен и для десктопных приложений. В большинстве настольных устройств нет GPS-приемника, поэтому определение местоположения по WiFi и IP – единственный доступный способ.

Разработчики Яндекса используют этот API во многих сервисах, например в Мобильных Яндекс.Картах, Мобильном Яндексе и в Яндекс.Баре для Firefox и Internet Explorer.

Техническая документация и примеры использования нового API доступны на странице API Яндекс.Локатор Для использования необходимо получить  уникальный ключ API Яндекс.Карт

Олег Герасимов, Григорий Бакунов, локаторы.
г. Москва, ул. Льва Толстого 16

^{*) На самом деле все равно сложно, но зато проще, чем было раньше.}

История началась с постановки задачи: нужно сделать анимированный баннер с примерно тридцатью объектами средствами HTML+javascript за один день. За день, конечно, баннер сделан не был, а был сделан за два усилиями трех человекодней. После выполнения задания осталась библиотека пакетной анимации, которую я назвал Scenario. О её доработанной версии я и хочу рассказать.

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

Запуск сценария из любого места предельно прост:

var newScenario = [...];
$.scenario(newScenario, {
    complete: function(time) {
        alert('Готово!');
    }
});

Осталось только разобраться, что писать вместо трех точек в примере :)

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

С самого начала «вебошрифтовой революции» мы полагались на неизящные хаки деклараций @font-face, чтобы шрифты из Паутины загружались во всех браузерах. Может ли существовать лучший путь? Вполне изящный и совместимый с будущими браузерами?

Вкратце об истории вопроса

В сентябре 2009 года Пол Айриш (Paul Irish) огласил пуленепробиваемый синтаксис для записи деклараций @font-face. Синтаксис был компактным и в то время действовал во всех браузерах. Недавно стали поступать, со временем усиливаясь, жалобы на отказ шрифтов загружаться в Android — поэтому мы стали вместо того рекомендовать синтаксис «Mo' Bulletproofer», сочинённый Ричардом Финком (Richard Fink). К сожалению, синтаксису «Mo' Bulletproofer» требуется двойная запись деклараций, так что поддержка его сложнее.

Синтаксис Fontspring @Font-Face

А вот таким этому коду следовало бы быть с самого начала. Чистым, ясным и простым:

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

Что? Я не понял.

Хак Трюк, заставляющий этот код заработать — символ «?» вслед за именем файла EOT. Без шуток.

Как это срабатывает

Знаете ли вы, что с помощью jQuery можно загружать не только контент страницы, но и выбранного контейнера на ней? Оказывается можно и делается это следующим образом:

$("#area").load("something.html #content");

Данный код найдет на странице something.html контейнер с id content, возьмет его содержимое и загрузит в контейнер с id area. Но есть одно но…

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

Статья написана для тех, кто уже хоть немного знаком с архитектурой Zend Framework. Если кому-нибудь будет интересно — опишу работу с формами более подробно в отдельной статье.

Для загрузки файлов на сервер с помощью форм в Zend Framework Form есть элемент Zend_Form_Element_File. У него есть фильтр «Rename», который позволяет переименовать закачаный файл. Но есть минус — мы не можем просто указать новое имя для файла, чтобы сохранилось его расширение. Как это сделать? А как быть, если мы используем setMultiFile?

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

Добрый день!

Как представитель проекта Лекториум рад сообщить — мы опубликовали весь архив Computer Science клуба.
Кроме того, почти год назад мы организовали запись всех лекций на хорошие камеры и микрофоны.
А в этом году планируем подключить вебинары.


Большинство лекций читается на русском языке. Все записи снабжены презентациями и описаниями.

UPD. Кратко. Старые лекции в плохом качестве, а новые с 2010 года с хорошим звуком и в 720p.
UPD 2 Расширили канал, видео грузится теперь без проблем.

Под катом перечень курсов и несколько вопросов касательно вебинаров.