Всем привет! Сегодня мы будем вести трансляцию @cssconfbudapest
Начало в 10:00 местного времени. А пока проходит регистрация. pic.twitter.com/WDqGgIYZ06
Пора начинать! pic.twitter.com/2bGDBgTieN
Первый докладчик - @DavidKPiano - CSS Animations, Orchestrated! CSS анимации
График изучения CSS pic.twitter.com/h1TlAnwjVk
Давид рассказывает о том насколько важен ритм в CSS анимации pic.twitter.com/O3UV1FtAho
Давид сравнивает CSS анимацию с музыкой: ритм, мелодия, гармония pic.twitter.com/vTbJWPB2wI
Группы и последовательности анимации pic.twitter.com/5cMX0t7x4r
Так как CSS анимация считается в процентах, Давид объясняет как правильно считать в процентах а не в ms. pic.twitter.com/lM7oGvMYfw
Давид показал несколько примеров о том какие могут быть проблемы с delay и как их можно решить
Теперь свой доклад будет вести @DaveOrDead - Shedding Light on the Shadow DOM.
@DaveOrDead объясняет как Shadow DOM может помочь инкапсулировать наш код.
Итоги доклада Давида pic.twitter.com/LfuOXbe29P
Несколько примеров Shadow DOM и подключение CSS pic.twitter.com/hEpPjLKTyp
После небольшого перерыва следующий доклад ведет @ddprrt - The Super Mario Bros. Principle
Как можно использовать CSS Properties с Shadow DOM pic.twitter.com/bRqAkZypLI
Вся сила CSS в его простоте pic.twitter.com/YSFrRyxREB
@ddprrt рассказывает о возможностях CSS переменных, чем они могут быть полезны, насколько легче можно решать некоторые проблемы с их помощью
CSS переменные также можно контролировать в JS
Но также CSS переменные могут быть и такими, что немного усложняет работу с ними pic.twitter.com/SQI08ZpJLt
Следующий докладчик - @rachelandrew - The New CSS Layout, расскажет нам про лейауты
Итог pic.twitter.com/ljH0ust8Uj
Рейчел говорит о проблеме таких CSS фреймворков как Bootstrap, Foundation и др.
Основная проблемы CSS фреймворков в их комплексной системе классов, с которой сложно работать...
Flexbox, CSS Grid Layout - сильно упрощают задачу. Нет необходимости использовать сложные системы селекторов.
Flexbox, CSS Grid Layout также упрощает манипуляцию элементов. Мы с легкостью можем менять порядок элементов.
Grid auto flow pic.twitter.com/N9ZrmYOqMN
Немного про ответственность построения кода pic.twitter.com/kpkXAAzT97
Flexbox позволяет нам не использовать математические вычисления для margin и padding - "justify-content: space-between/space-around"
Адаптивный дизайн - это про пропорции. Flexbox помогает выдержать правильные пропорции
Flexbox позволяет работать одновременно в одном измерении - колонки или строки.
CSS Grid позволяет одновременно работать в двух измерениях - колонки и строки.
Вступайте в обсуждение/разработку спек, у вас есть все шансы повлиять на спеки pic.twitter.com/gSHQjNETCf
Доклад @rachelandrew подошел к концу!
У нас был обед, а теперь со следующим докладом выступает @estellevw @webdevtips @standardista - Simply Accessible
Сегодня Эстель расскажет про доступность!
К сожалению сегодня интернет страницы потребляют много трафика pic.twitter.com/V0IqYoYENg
Основные правила доступности: pic.twitter.com/urbRAM46H7
На примере сайта VISA Эстель показала какие проблемы производительности могут быть при использовании множества зависимостей в продакшине.
Не важно сколько и какие технологии вы используете при разработке сайта/приложения. Куда важнее его производительность и доступность
В формах важно использовать ID чтоб с помощью FOR можно было легко прыгать на элемент формы
с помощью aria атрибутов можно хорошо экономить на js коде
"Доступная "карусель"" от Эстель pic.twitter.com/h9vLS1m0Cm
Ссылки: pic.twitter.com/VHawsHGMhD
Следующий доклад от @glenmaddern - CSS Modules, CSS Variables & the Future of Reusable CSS
Основная идея CSS Modules - это изоляция.
Глен попытается сегодня рассказать как можно разрабатывать компоненты, которые можно легко и удобно изменять внешне.
Многие фреймворки используют очень много переменных для описания стиля, и это их одна из основных проблем
С помощью CSS модулей очень легко манипулировать внешним видом элемента в зависимости от того где он находится.
@snookca - Responsive Web Applications with Container Queries. Расскажит о процессе разработке адаптивные веб приложения
Одна из проблем, что над разными частями сайта могут работать разные команды использую разные технологии.
@webstandards_up как следствие одни и те же элементы интерфейса могут немного отличатся друг от друга внешне.
Очень много форм факторов. Сложно разрабатывать так чтоб приложение/вебсайт на всех устройствах работало хорошо
Очень часто важно, а иногда очень даже актуально, понятие адаптивного контента.
Следующий доклад - @jackiebackwards - Schrödinger’s Website: Using Sass To Build Indeterminate, User-generated Websites
Джеки рассказала о воркфлоу разработки сайта. Также о том как они решили проблемы адаптивности в одном из своих проектов.
@verpixelt - Visual Regression Testing for CSS. Регрисивные тесты
Зачем нам нужны регрессивные тесты? Ответ: каскады, наследование, рефактор, сложные системы, адаптивность..
Несколько примеров регрессивного тестирования pic.twitter.com/efc4ajleVh
Полезная ссылка о визуальному тестировании pic.twitter.com/fOJKxCR0ud
Следующий доклад @andreysitnik - The Componentization of the Web
Андрей рассказывает о компонентах.
Андрей рассказывает как с помощью @PostCSS можно изолировать компоненты
Изолированные компоненты помогают избегать конфликтов, неожиданных результатов.
Андрей показал на примере как можно генерировать уникальные/изолированные селекторы.
@twholman - In the Wild. О диких штучках.
@twholman на смешных примерах показал как могут быть полезны БОТЫ
Ну что ж конференция подошла к концу pic.twitter.com/J0EwR7M2Ir
Спасибо всем, кто был с нами!
Немного позже будут ссылки докладов с @cssconfbudapest
Видео @cssconfbudapest ustream.tv/cssconfbp
Слайды от @ddprrt speakerdeck.com/ddprrt/the-sup…
Полезные ссылки от @rachelandrew rachelandrew.co.uk/presentations/…
Слайды от @estellevw @webdevtips @standardista instartlogic.github.io/p/cssbudapest/…
Слайды от @andreysitnik slides.com/ai/css-comp
Няшная CSS анимация от @DavidKPiano codepen.io/davidkpiano/pe…