Всем привет! На этой неделе с вами Зарема @Zmoki - основатель и активист сообщества @spb_frontend

Веб-разработкой я занимаюсь с 2004 года. Информации тогда было мало, интернет медленный и жила я в маленьком поселке на Северном Кавказе.

Начать верстать мне тогда помогла онлайн-книжка "HTML для девочек". Жалко не сохранилась, очень хотелось поблагодарить автора.

Тогда еще всё было на таблицах и можно было использовать теги font и center =) А JavaScript использовался для снежинок и бегущей строки.

В 2010 мой мир перевернул доклад Вадима Макеева @pepelsbey про HTML5 на NevaCamp.

На следующий день вся работа в нашей веб-студии была переведена на HTML5-рельсы.

Отсюда вопрос: было ли что-то такое в 2015-м году, что изменило ваш подход в работе с версткой?

@cssunderhood стал использовать flexbox. Фантастическая штука!

@cssunderhood было в 2014 и до сих пор продолжается. Доклад @akella "Как верстать сайты быстрее, чем их рисуют" slideshare.net/FDConf/ss-3359…

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

Сейчас сижу в кафе и жду @thought_sync, пойдем смотреть новую площадку для следующей встречи сообщества @spb_frontend

Еще прямо сейчас идет встреча @pitercss, нового сообщества от @pepelsbey. Очень жаль, что у меня не получилось туда пойти =(

На @pitercss как раз Вадим @pepelsbey рассказал про грид-раскладки, которые мы все ждем. Надеюсь, выложат потом презентацию.

У вас в городе есть сообщества, где фронтендеры выступают с докладами и общаются? На какие темы были последние выступления?

Тогда была проблема в том, что в верстке понимала только я, остальные ребята были из .NET и Haskell и они раставляли теги как могли

Когда я подключилась к проекту, пришлось навести порядок в html и настроить scss бутстрапа. P.S. проект был на React

@cssunderhood Омск: что нужно знать разработчику в 2016 году; ES2015. Пора использовать, а не бояться; React на примере сайта недвижимости

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

@iamakulov_ @SilentImp а пока @jsunderhood и @cssunderhood притихли, я похвастаюсь

instagram.com/p/BBnt7pILdDy pic.twitter.com/ln3sjt7ZTi

Привет и с пятницей! Ранее я обещала рассказать про любимую методологию CSS.

Если выбирать между БЭМ, OOCSS, SMACSS, Atomic CSS, MCSS, AMCSS, FUN, то мой подход ближе к SMACSS.

Использую scss. 1). Создаю файл с настройками, т.е. с переменными, и подключаю его в index.

2). Подключаю normalize.css. Его можно скачать через npm в node_modules.

3). Создаю и подключаю файл с базовыми стилями, т.е. для body, a и пр. Обычно он короткий, там есть то, чего не хватает мне в normalize.

4). Создаю layout файл или папку. Стили для основных частей макета. Класы: .page-header, .page-main, .page-footer и т.п. + сетка

5). Создаю файлы для разных частей сайта. Например, для статьи, превью чего-нибудь, блока с charts. Это самая обширная часть обычно.

5.1). Если какой-то модуль стал не нужен, то достаточно отключить scss файл его стилей.

6). Обязательно делаю файлы со стилями для типографики и форм. Даже, если сейчас на сайте нет ни одной формы или цитаты.

Сайт - живой организм. Я верстаю, пытаясь не забывать о том, что на нем может появиться любой контент.

Хотя чаще всего я делаю какие-нибудь MVP, поэтому просто беру bootstrap, настраиваю его в scss и вперед =))

Кто-нибудь пробовал flexboxgrid.com. Как вам?

@cssunderhood имхо - пока @LostGrid нравится. там можно переключаться с calc() на flexbox при необходимости.

С 2010 года по 2012 я делала много проектов для некомерческих организаций. Тогдая и узнала о стандарте WAI-ARIA.

Пыталась что-то делать, чтобы соотвествовать стандарту, но не качественно на мой взгляд.

Сейчас я изучаю accessibility заново.

Мне предстоит сделать 9+ сайтов в ближайшее время и нужно придумать такой подход, чтобы accessibility не забрало много времени от разработки

Текущая версия стандарта WAI-ARIA 1.0 w3.org/TR/wai-aria/. Идет работа над версией 1.1 w3.org/TR/wai-aria-1.…

Штудировать стандарты - долго и муторно, но небходимо. В целом информации мало о том, как надо делать, чтобы было хорошо с accessibility

Как мне кажется, начать с этого: продуманный семантический HTML, нет ссылкам-кнопкам и ссылкам-пустышкам, адекватные подписи к картинкам

Следующая ачивка: отключить мышку и попытаться воспользоваться сайтом только с помощью клавиатуры.

Например, так я сделала при разработке своего React компонента github.com/Zmoki/react-ui… Итог не идеальный, но клавиатурой пользоваться можно

Потом можно подумать о цветах, как минимум о контрасте.

Чем, например, бесят темы на wrapbootstrap: цвета часто настолько не контрастные, что даже мне со моим идеальным зрением тяжело читать текст

С определением уровня контрастности может помочь khan.github.io/tota11y/ К нему есть расширение для Chrome

У @PostCSS есть плагин, который позволяет увидеть сайт так, как его видят люди с разными видами нарушения зрения github.com/btholt/postcss…

Думаю, если делать фронт именно по стандартам, то большая часть вопросов о доступности будет снята. twitter.com/cssunderhood/s…

@cssunderhood есть два определяющих сайта w3.org/TR/WCAG20/ webaim.org и конечно тулза от них wave.webaim.org

Есть перевод крутой статьи от фронтендера, который притворялся слепым с течении недели webknowledge.ru/8-mifov-o-tom-… Многое проясняет.

Моя подборка ссылок и статей про доступность: evernote.com/pub/zmoki/acce… Есть даже ГОСТ по требованиям доступности

Вообще не хватает единого качественного инфоресурса, на котором всё с азов подробно расписывалось про доступность или хотя бы внятной статьи

Может вы знаете хорошие статьи и ресурсы про доступность?

Самый крутой проект: a11yproject.com Оттуда я, например, брала пример как делать dropdown.

Можно делать вид, что это никому не нужно. Но инвалидов в целом у нас по стране 10% + люди преклонного возраста.

Доходит до забавно-грустных моментов. Судя по интервью с людьми с нарушением зрения, они не могут юзать ВК, только стороннее мобильное app

@cssunderhood w3c например имеет некоторую сводку по этому вопросу w3.org/WAI/intro/peop…

Отличное введение в веб-доступность: marcozehe.de/2015/12/14/the…. Автор работает в Accessibility Team в Mozilla и слеп с рождения.
@cssunderhood

"Как мы делаем Яндекс доступным людям с ограниченными возможностями"
habrahabr.ru/company/yandex…
/cc @cssunderhood twitter.com/arik0n/status/…

На этом всё. С вами была @Zmoki. Мы немного поговорили о 2015-м, фронтенд-сообществах, SMACSS, сетках и о доступности сайтов.

Спасибо за интересное общение и ссылки =)

Подписывайтесь на @spb_frontend. Следующая встреча сообщества 24-го февраля, трансляция будет.