Fronteers 2012

• 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»

• 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»

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

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

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

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

Презентация

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

Презентация

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

Презентация

• В качестве цвета можно указывать любые слова
• Character reference. Даже такое можно найти
• Benchmark.js

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

• Phantom.js
• Casper.js

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

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

Презентация

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

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

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

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

Perch CMS

Презентация

Презентация

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

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

Демо

• slides: http://bit.ly/js-minty-fresh
• code: http://bit.ly/js-minty-fresh-code

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