- PVSM.RU - https://www.pvsm.ru -

Fronteers 2012 — лучшая конференция по клиентской разработке, часть 1

В этом году мне посчастливилось впервые посетить ежегодную (5-ю по счету), конференцию Fronteers [1] #fronteers12 [2], в Амстердаме.

Самая громкая клиент-сайд конференция в Европе, длилась 2 дня, 4-5 октября в стенах необычного кинотеатра Pathé Tuschinski [3].

Все доклады были на английском языке, в постоянном сопровождении Кристиана Хейлманна [4]. Под катом ссылки на слайды и основные тезисы презентаций первого дня конференции.

Пять копеек

Прежде всего стоит отметить, что организация мероприятия была на высоте! Сразу видно что ребята из сообщества клиент-сайд разработчиков Fronteers [5] очень ответственно подошли к делу, и учли опыт предыдущих конференций. Ощущать недостаток розеток и хорошего Wi-Fi не приходилось (что еще для жизни нужно :).

Все доклады записывались, и скоро будут выложены в открытый доступ на Vimeo [6].

Единственное, что не очень понравилось, это чересчур длинные сессии докладов, 50 минут на одного человека слишком много, из-за чего доклады казались немного разбавленными.

Первый день конференции

Adapting to Responsive Design

Mark Boulton [7] — storify [8]

Fronteers 2012 — лучшая конференция по клиентской разработке, часть 1
(http://instagram.com/p/QWey8vDuAt [9])

Марк начал доклад с пяти-минутного отрывка из фильма “Матрица”, отметив, что Responsive Design (далее RD) как красная таблетка Морфиуса. До этого все мы жили в мире статичных сайтов, но сейчас нам открылся мир совершенно новых возможностей.

В докладе были особо выделены 3 секции — бизнесс, процесс, контент:

Бизнес

  • RD стоит дороже, клиентам нужно с этим считаться
  • Рекламные баннеры тормозят развитие RD, трудно объяснить рекламным агентствам, что нужно рисовать резиновые баннеры

Процесс

  • Сначала скетчи на бумаге, а не варианты дизайнов
  • Wireframes больше не работают, делайте живые прототипы
  • Стандартное тестирование больше не работает, за счет необходимости проверки на многих устройствах
  • Нужны сплоченные команды разработки, что бы быстрей коммуницировать и обсуждать проблемы вариаций дизайна на лету

Контент

  • Больше нет понятия “страница”, думайте прежде всего о контенте
  • RD бросает вызов системам управления контента (CMS)

Так же, Марк упомянул об интересном докладе [10], про адаптирование контента.

The New And Improved Developer Toolbelt

Addy Osmani [11] — storify [12], слайды [13]

Fronteers 2012 — лучшая конференция по клиентской разработке, часть 1

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

Учитесь любить командную строку, с ней намного проще, чем с графическим интерфейсом “из 300 кнопок”:

Изучайте свои IDE! Пару советов для Sublime Text:

  • Emmet [17] (ex-Zen Coding)
  • Поиск кода по Stack Оverflow
  • Библиотека снипетов
  • Делайте собственные бинды

И многое другое

  • TodoMVC [18]
  • Дебаг SASS [19] в браузере
  • Source maps (пока только в Chrome Canary) позволят отслеживать генерированные стили из SASS
  • Yeoman [20] — ускоряем процесс разработки веб приложений (для Win [21])
  • Travis [22] — continuous integration в облаке
  • Tincr [23] — плагин для Chrome, позволяющий редактировать файлы прямо в браузере

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

A Pixel is not a Pixel

Peter-Paul Koch [24] — storofy [25], слайды [26]

Докладчик рассказал нам о трёх типах пикселей:

  • CSS Pixels — то, с чем мы работаем в вебе
  • Device pixels — настоящие пиксели на экране (разрешение), для них задаются media queries
  • Density-independent pixels — виртуальные пиксели, не используются в веб разработке. Были придуманы, что бы не ломать интерфейс, увеличивая плотность пикселей на экранах

И рассказал о типах viewport (оба измеряются в CSS пикселя):

  • Layout viewport — реальный viewport
  • Visible — видимый (при зуме на моб. устройстве)

Далее речь шла о проблеме position: fixed на моб. устройствах, но лучшее решение, к сожалению, не было раскрыто.

Смысл использования Responsive Design в приравнивании ширины сайта к ширине экрана устройства (width=device-width) с помощью:

<meta name=”viewport” content=”width=device-width” />

Стоит упомянуть интересные девайс — CamHolder [27], который использовался во время доклада.

На недавно прошедшем Форуме технологий [28] от Mail.ru, Вадим Макеев тоже рассказывал [29] про типы пикселей.

Using JS to build bigger, better datavis to enlighten and elate

Alex Graul [30] — stotify [31], слайды [32]

Fronteers 2012 — лучшая конференция по клиентской разработке, часть 1
(http://twitpic.com/b0w9ua [33])

Алекс рассказывал о визуализации данных в вебе:

  • d3.js [34] — библиотека позволяющая визуализировать данные с помощью SVG и HTML/CSS
  • Modest maps [35]

Ten things I didn’t know about HTML

Mathias Bynens [36] @mathias [37] — storify [38]

Матиас начал с рассказа об интересных фактах чтения кода цветов в HTML. Можно указать любое слово, и браузер прочитав знакомые буквы в коде цвета, выдаст цвет на его усмотрение, например “сhucknoriss”:

Fronteers 2012 — лучшая конференция по клиентской разработке, часть 1
(http://twitpic.com/b0wymk [39])

Цвета имён участников [40] конференции.

Потом раскрыл темы кавычек в JS [41] и CSS [42] (по ссылкам валидаторы значений), по сути, можно все значения писать без кавычек, но в некоторых случаях, такой код может сломаться.

Минимальный, валидный HTML документ может состоять только из doctype и title. Остальное дописывается браузером, и не определённые теги html, body, можно даже стилизовать через CSS.

Еще из интересных фактов — не все символы считаются в JS одинаково, например математическая символы, могут выдавать значение “2” — пример [43].

Style guides are the new Photoshop

Stephen Hay [44] — слайды [45]

Fronteers 2012 — лучшая конференция по клиентской разработке, часть 1
(http://image.slidesharecdn.com/fronteers2012-121004104049-phpapp01/95/slide-30-728.jpg [46])

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

Используйте новые инструменты для генерации HTML прототипов, как Adobe Edge. Код не должен быть продакшн уровня. Клиенты в восторге, когда могут посмотреть наработки дизайна сразу на многих устройствах.

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

Далее он Стефан намекнул, что не стоит боятся командной строки, а нужно использовать её возможности по максимуму. После чего, рассказал о интересных инструментах, в помощь к разработке своих стайл-гайдов:

  • Dexy [47] — инструмент для генерации стайл-гайдов
  • Phantom.js [48] и Casper.js [49] — для автоматизации тестирование и создания скрин-шотов
  • Jinja [50] — шаблонизатор на python

Accessibility panel

Antoine Hegeman, Bor Verkroost, Bram Duvigneau & Chris Heilmann — storify [51]

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

Основные тезисы секции:

  • Меню, появляющиеся на ховер, должны иметь “запасное пространство”, что бы не пропадали, при малейшем непопадании
  • Скрин ридерам очень важна семантика, особенно в заголовках, по ним реализуется навигация в вебе
  • Текст должен быть текстом, и находится через поиск по странице
  • Полезно указывать язык сайта в атрибуте HTML, для voice over
  • Улучшайте семантику HTML с помощью ARIA [52]

В секции вопросов-ответов, я спрашивал, почему нельзя из веба определить физические недостатки пользователя, что бы предоставить более чистый контент. Ответили [53], что определять недостатки пользователя не допустимо, по тем же соображениям, как и определение пользователя по расовым признакам, дискриминация.

Еще немного по теме доступности в вебе — Леа недавно анонсировала удобный инструмент, позволяющий удобно проверять контрастность цветов [54].

More CSS secrets: Another 10 things you may not know about CSS

Lea Verou [55] @leaverou [56] — cлайды [57], cлайды с прошлого года [58]

Fronteers 2012 — лучшая конференция по клиентской разработке, часть 1
(из слайдов)

Леа, как и в прошлом году, рассказывала об интересных трюках в CSS. Тут пересказывать смысла нету, советую просмотреть слайды и пощупать примеры в живую.

Ссылочная

I’ll be back

В ближайшее время подготовлю вторую часть отчета, в который включу тезисы с Jam Session [64], где выступали пару наших соотечественников. Следите за обновлениями в твитере [65]!

Автор: Operatino

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/17444

Ссылки в тексте:

[1] Fronteers: http://fronteers.nl/congres/2012

[2] #fronteers12: http://twitter.com/search?q=%23fronteers12

[3] Pathé Tuschinski: http://en.wikipedia.org/wiki/Tuschinski

[4] Кристиана Хейлманна: http://christianheilmann.com

[5] Fronteers: http://fronteers.nl/about

[6] Vimeo: http://vimeo.com/fronteers/videos

[7] Mark Boulton: http://twitter.com/markboulton

[8] storify: http://storify.com/frenkie/fronteers-12

[9] http://instagram.com/p/QWey8vDuAt: http://instagram.com/p/QWey8vDuAt

[10] докладе: http://www.youtube.com/watch?v=CGyBrlCKySk

[11] Addy Osmani: http://twitter.com/addyosmani

[12] storify: http://storify.com/frenkie/fronteers-12-the-new-and-improved-developer-toolbe

[13] слайды: http://dl.dropbox.com/u/70775642/talks/tooling/fronteers/index.html

[14] раскрасьте: http://www.iterm2.com/

[15] Dotfiles: http://dotfiles.github.com/

[16] подборка дотфайлов: http://github.com/TjRus/dotfiles

[17] Emmet: http://github.com/sergeche/zen-coding

[18] TodoMVC: http://habrahabr.ru/post/142301/

[19] Дебаг SASS: http://mobify.github.com/sass-sleuth/

[20] Yeoman: http://yeoman.io

[21] для Win: http://www.google.com/url?q=http%3A%2F%2Fwww.decodize.com%2Fcss%2Finstalling-yeoman-front-end-development-stack-windows%2F&sa=D&sntz=1&usg=AFQjCNHcz5Nv3ynoGOaTTrBghAnoKd1ZGw

[22] Travis: http://travis-ci.org/

[23] Tincr: http://tin.cr/

[24] Peter-Paul Koch: http://twitter.com/ppk

[25] storofy: http://storify.com/frenkie/fronteers-12-peter-paul-koch-a-pixel-is-not-a-pixel

[26] слайды: http://quirksmode.org/presentations/Autumn2012/viewports_fronteers.pdf

[27] CamHolder: http://camholder.org/

[28] Форуме технологий: http://techforum.mail.ru/

[29] рассказывал: http://pepelsbey.net/pres/clear-and-sharp/

[30] Alex Graul: http://www.sho.ch/

[31] stotify: http://storify.com/frenkie/fronteers-12-alex-graul-using-js-to-build-bigger-b?awesm=sfy.co_mA5k&utm_source=direct-sfy.co&utm_campaign=&utm_medium=sfy.co-twitter&utm_content=storify-pingback

[32] слайды: http://dl.dropbox.com/u/58725996/Fronteers2012-AlexGraul.pdf

[33] http://twitpic.com/b0w9ua: http://twitpic.com/b0w9ua

[34] d3.js: http://d3js.org/

[35] Modest maps: http://modestmaps.com/

[36] Mathias Bynens: http://mathiasbynens.be/

[37] @mathias: http://twitter.com/mathias

[38] storify: http://storify.com/frenkie/fronteers-12-mathias-bynens-ten-things-i-didn-t-kn

[39] http://twitpic.com/b0wymk: http://twitpic.com/b0wymk

[40] участников: http://wesoudshoorn.nl/f12/

[41] JS: http://mothereff.in/js-variables

[42] CSS: http://mothereff.in/font-family

[43] пример: http://jsfiddle.net/mTqrf/

[44] Stephen Hay: http://twitter.com/stephenhay

[45] слайды: http://www.slideshare.net/stephenhay/style-guides-are-the-new-photoshop-fronteers-2012

[46] http://image.slidesharecdn.com/fronteers2012-121004104049-phpapp01/95/slide-30-728.jpg: http://image.slidesharecdn.com/fronteers2012-121004104049-phpapp01/95/slide-30-728.jpg

[47] Dexy: http://www.dexy.it/

[48] Phantom.js: http://phantomjs.org/

[49] Casper.js: http://casperjs.org/

[50] Jinja: http://jinja.pocoo.org

[51] storify: http://storify.com/frenkie/fronteers-12-accessibility-panel

[52] ARIA: http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html

[53] Ответили: http://twitter.com/codepo8/status/253873701550948352

[54] контрастность цветов: http://lea.verou.me/2012/10/easy-color-contrast-ratios/

[55] Lea Verou: http://lea.verou.me/

[56] @leaverou: http://twitter.com/LeaVerou

[57] cлайды: http://lea.verou.me/more-css-secrets

[58] cлайды с прошлого года: http://lea.verou.me/css3-secrets

[59] @FronteersConf: http://twitter.com/FronteersConf

[60] Lanyrd: http://lanyrd.com/2012/fronteers/

[61] Github: http://github.com/hay/fronteers/blob/master/2012/notes/fronteers-day1.md

[62] Слайды: http://noteskeeper.ru/wp-content/uploads/press/fronteers12-overview/

[63] Владимира Кузнецова: http://noteskeeper.ru/about/

[64] Jam Session: http://fronteers.nl/congres/2012/jam-session

[65] в твитере: http://twitter.com/operatino