zmoki

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

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

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

14:59

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

15:02

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

15:03

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

15:05

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

15:13

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

15:13

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

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

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

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

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

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

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

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

20:25

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

20:30

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

20:32

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

20:33

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

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

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

20:40

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

20:42

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

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

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

20:45

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

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

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

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

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

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

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

15:32

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

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

20:04

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

20:08

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

20:12

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

20:12

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

20:16

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

20:21

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

20:26

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

20:28

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

20:30

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

20:33

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

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

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

20:44

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

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

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

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

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

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

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

15:46

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

15:52

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

15:53

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

15:56

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

15:57

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

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

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

16:05

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

16:06

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

16:09

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

16:10

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

16:14

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

16:18

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

16:19

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

16:23

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

16:27
@cssunderhood wave.webaim.org

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

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

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

16:49

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

17:01

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

17:16

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

17:18

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

17:20

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

17:22

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

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

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

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

    21:44

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

    21:45

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

    21:47

    other


    @juwain