Fronteers 2012

Владимир Кузнецов, СофтПлюс

Fronteers 2012

Pathé Tuschinski

Jam Session

  • Anselm Hannemann, «The road to responsive images»
  • Антон Немцев, «Some funy css tricks you may use in lazy game dev»
  • Eric Eggert, « How I stopped worrying and learned to love defaults»
  • Hans Christian Reinl, «Writing awesome code»
  • Iacobien Riezebosch и Rian Rietveld «The WP-Accessible Project»

Jam Session

  • Peter Müller, «A different approach to build systems»
  • Philipp Naderer, «Concurrent Server-side JS on the JVM»
  • Rodney Rehm, «Designing APIs for usability»
  • Роман Комаров, «Use CSS transitions for pseudo-elements right now»
  • simurai, «Flexible Web Apps»
  • Варвара Степанова, «Frontend evolution at Yandex. The road to BEM»

Adapting to Responsive Design
Mark Boulton

  • Дорого — нужно искать клиента
  • Сложно делать разрозренными командами
  • Дизайн — Производство — Тестирование — Исправления
  • Fail fast

Adapting to Responsive Design
Mark Boulton

  • Wireframes не работают. Прототипы быстро дают обратную связь
  • Стандартное тестирование не работает из-за того, что нужно проверить много устойств
  • Адаптивный дизайн требует особого контента

The New And Improved Developer Toolbelt
Addy Osmani

Инструменты нужно менять, если они перестают выполнять свои функции

The New And Improved Developer Toolbelt
Addy Osmani

  • Shell: разноцветная подсветка, dotfiles, aliases, autocomplete
  • Sublime Text
  • In-browser dev tools
  • Scaffolding: Brunch.io, GruntBBB, Angular Seed
  • Testing: Grunt, QUnit, Travis, Bunyip
  • Yeoman

Презентация

A Pixel is not a Pixel
Peter-Paul Koch

  • Пиксели не зависят от разрешения
  • viewport
  • window.innerWidth — CSS-пиксели (за исключением Android и IE)
  • media queries задаются в device-пикселях
  • meta viewport. Нет смысла использовать что-то кроме "device-width"

Презентация

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

  • Modest map, D3, Miso
  • для мобильников можно делать фолбек картинкой с помощью той же библиотеки

Презентация

Ten things I didn’t know about HTML
Mathias Bynens

Style guides are the new Photoshop
Stephen Hay

В Фотошопе все выглядит иначе. Делайте прототипы в браузере.

  • Phantom.js
  • Casper.js

Accessibility panel with Bram Duvigneau, Antoine Hegeman and Bor Verkroost

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

  • Тень у списков в при прокрутке
  • Fixed width, fluid back
  • Транзишины (не работают в IE < 10)
  • Разлиновка
  • Сложные фигуры (много прямоугольников с вращением в разные стороны)

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

  • Движение по траектории
  • Тень у сложного объекта (filter: drop-shadow)
  • Полупрозрачный фон
  • text-align: justify; hyphens: auto;

Презентация

The biggest devils in the smallest details
Marcin Wichary

  • Анимация на JS
  • Спрайты — много изображений в одном файле
  • Все пректы Гугла содержат скрытую консоль для разработчиков

Keep it Simple, Smartypants
David DeSandro

  • Смотрите исходники
  • Занимайтесь домашними проектами

The State of HTML5 Video
Jeroen Wijering

  • JW player
  • 80% пользователей уже сейчас имеют поддержку <video>

Building the web platform
Anne van Kesteren

  • Codepoint — caracters
  • encoding.spec.whatwg.org
  • Люди хотят вставлять контент. Они не хотят заботиться о семантике, стандартах и т.п.

I can smell your CMS
Phil Hawksworth

Perch CMS

Презентация

Beyond simple transitions, with a pinch of JavaScript
Peter Nederlof

Презентация

  • CSS Transformations: translate, scale, rotate, skew, combined, matrix
  • Для динамики нужно использовать трансформации, а не транзишины.
  • нет reflow, hw accel, hw on mobile, lots of FPS

Beyond simple transitions, with a pinch of JavaScript
Peter Nederlof

  • win.getComputedStyle(ele, null)
  • requestAnimationFrame callback
  • работает почти во всех современных браузерах за исключением IE < 8

Демо

JS Minty Fresh: Identifying and Eliminating Smells in Your Code Base
Rebecca Murphey

Видео

На Vimeo: http://vimeo.com/fronteers