zmoki

8 февраля 2016, Санкт-Петербург, Россия

# Понедельник 11 твитов

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

11:59

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

12:02

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

12:03

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

12:05

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

12:13

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

12:13

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

12:14
@cssunderhood Для бегущей строки marquee! (=

Возможно я запамятовала =))) twitter.com/webholt/status…

12:19
@cssunderhood css-modules - только это

Круто! Делаешь серверный рендеринг с css modules? twitter.com/Tom910ru/statu…

12:20
@cssunderhood стал использовать flexbox. Фантастическая штука!
12:21
@cssunderhood было в 2014 и до сих пор продолжается. Доклад @akella "Как верстать сайты быстрее, чем их рисуют" slideshare.net/FDConf/ss-3359…
12:30

# Вторник 10 твитов

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

17:25

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

17:30

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

17:32

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

17:33

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

17:37
@cssunderhood можете рассказать про методологии верстки которые использовали на прошлой работе?

На моей последней официальной работе было просто "О боже, зачем вы запихнули div в span"?! и bootstrap 3. twitter.com/koderhan/statu…

17:40

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

17:42

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

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

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

17:45

# Четверг 4 твита

@cssunderhood Довольно много. Последние месяца два ленился ходить ;-) Вот прямо сейчас идет up.front.ug/2016/02/09/mee…

Up.front - митапы по веб-дизайн и фронтенду в Берлине. @sapegin они выкладывают куда-нибудь презентации? twitter.com/sapegin/status…

12:26
@cssunderhood в ноябре front-hub.su проходил.

Ты наверно fronthub-15 в Ульяновске имеешь ввиду? fronthub.ru @frontendsu twitter.com/kalashnikovism…

12:28
@cssunderhood в samarajs последний раз говорили про бекэнд)

и у samarajs слоган звучит как "Технологии современного бэкенда" + доклады про Go и Scala. Неожиданный поворот =) twitter.com/KELiON/status/…

12:32

# Пятница 15 твитов

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

17:04

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

17:08

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

17:12

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

17:12

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

17:16

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

17:21

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

17:26

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

17:28

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

17:30

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

17:33

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

17:34
@cssunderhood сетку сами пишите? Под каждый проект разную или универсальная есть?

Беру сетку отдельно из bootstrap, привыкла к ней. Иногда она не нужна и я использую flexbox. twitter.com/ardshock/statu…

17:44

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

17:44
@cssunderhood Я нет, а как вам Foundation?

Пробовала его на 2-3 проектах 3-4 года назад. Что-то мне в нем очень не понравилось. Может быть попробую снова. twitter.com/alexpivtorak/s…

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

# Воскресенье 32 твита

@cssunderhood А что скажешь о доступности?

Отличный вопрос! Поговорим о доступности =) twitter.com/hiway_real/sta…

12:46

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

12:52

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

12:53

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

12:56

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

12:57

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

13:02
@cssunderhood Сколько уже занимаешься в этой сфере?)

Веб-разработкой занимаюсь с 2004 года. Писала на ASP.NET и на PHP. Последние два года только JS. twitter.com/nemcik7/status…

13:05

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

13:06

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

13:09

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

13:10

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

13:14

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

13:18

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

13:19

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

13:23

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

13:27
@cssunderhood wave.webaim.org

Сервис для проверки на сайта на доступность. Есть также расширение для Chrome - WAVE Evaluation Tool twitter.com/SheVasya/statu…

13:32
Думаю, если делать фронт именно по стандартам, то большая часть вопросов о доступности будет снята. twitter.com/cssunderhood/s…
13:43
@cssunderhood есть два определяющих сайта w3.org/TR/WCAG20/ webaim.org и конечно тулза от них wave.webaim.org
13:44

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

13:49

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

14:01

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

14:16

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

14:18

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

14:20

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

14:22

  • много людей с нарушением зрения и дислексией, особенно мужчины. И каждый из нас может оказаться со сломанной рукой или подбитым глазом.
  • 14:25

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

    14:27
    @cssunderhood w3c например имеет некоторую сводку по этому вопросу w3.org/WAI/intro/peop…
    14:27
    Отличное введение в веб-доступность: marcozehe.de/2015/12/14/the…. Автор работает в Accessibility Team в Mozilla и слеп с рождения.
    @cssunderhood
    14:47
    "Как мы делаем Яндекс доступным людям с ограниченными возможностями"
    habrahabr.ru/company/yandex…
    /cc @cssunderhood twitter.com/arik0n/status/…
    18:28

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

    18:44

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

    18:45

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

    18:47

    other


    @juwain