from_anywhere

26 июня 2016, Санкт-Петербург, Россия

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

Всем привет, технически уже понедельник по Мск, так что я, пожалуй, начну. Меня зовут Иван Метелёв, я один из верстальщиков веб-версии ok.ru

21:58

До «Одноклассников» работал в одном из лучших питерских диджитал-агенств, а до этого делал с нуля отдел верстки в малоизвестной студии

22:02

Желание стартовать ночью вызвано стремлением понять срез местной активной аудитории перед началом недели. Итак, вы:

22:04
@jsunderhood @dimaip @cssunderhood github.com/garris/Backsto… вполне достойно для тестирования регрессий. Если достаточно phantomjs.
8:04

Классно всё-таки сделать перерыв в использовании социальных сетей на выходные. В их разработке, кстати, тоже иногда классно делать перерыв

16:33

Однако я обещал вам сформулировать какие-то финальные мысли по итогу нашей недели и вообще, а также ответить на то, что задолжал

16:34

За неделю я постарался раздельно обсудить некоторые вопросы производительности css, рефакторинга и ревью, кадровые и наставнические

16:36

Завершить хочу рассуждением о смысле всех этих процессов — иначе к чему тогда иметь столько технических решений, споров и реализаций

16:38
@cssunderhood и как вам живётся верстая такой уёбищный дизайн?

Вопрос о том, как живем с таким дизайном, и как живем с такими пользователями, и вообще, живы ли мы, я слышу нередко twitter.com/mikeBazhenov/s…

16:39

Знаете, мы отлично живем. Нет никакой общей объективной метрики, какой дизайн хорош, а какой плох. Наша метрика выражается в нашем доходе

16:41

Наша метрика построена на годах экспериментов и общения с пользователями, их отзывах, благодарностях и негодованиях. Длинная история

16:42

Да, мы не можем убрать мигающие гифки с онлайнов, потому что люди сравнивают их с «биением сердец» в профилях, и мы не можем их игнорировать

16:43

Но вместе с тем наш дизайн достаточно хорош, чтобы эволюционировать и хорошо ложиться в процесс разработки, отвечать бизнес-задачам

16:44

Нам живется хорошо: мы договариваемся с дизайнерами о модульной структуре, ревьюим не только разработчиков, но и дизайнеров, движемся вперед

16:45

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

16:47

У меня есть один из любимых отрывков в кино — «Предел риска». ok.ru/video/63868334… . Он примерно про это

16:50

Когда я только-только начинал верстать, одной из первых статей, что я прочел, был «Верстка со смыслом» — там что-то про семантику

16:52

Господа, «верстка со смыслом» — это вообще не про то, как вы там закрываете теги,и используете ли вы <li> вместо <div>. Это всем безразлично

16:53

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

16:57

Так что — верстайте со смыслом и ничего не бойтесь. Даже если ничего не знаете. Даже — вести андерхуды =)

16:58

На этой неделе с вами был @from_anywhere, верстальщик, «Одноклассники».

16:59

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

@cssunderhood и как вам живётся верстая такой уёбищный дизайн?

Тут сразу ожидаемый вопрос из зала. Короткий ответ — хорошо. Подробный ответ — ближе к концу недели twitter.com/mikeBazhenov/s…

8:51

На самом деле тут уже был @mishcherin с каким-то рассказом о внутренней кухне и процессах ok.ru, так что постараюсь не повторять эту тему

8:57

Давайте к делу, что ли. Расскажите, какие самые неожиданные проблемы по производительности вы ловили на проектах? Мы тут только про css, да

9:01
@cssunderhood float: left в firefox вызывает relayout до ближайшего родителя с position: relative. А у тебя keypress в contenteditable
9:03

Что, никто никогда не клал оверлей с filter: blur поверх играющего видео? Никто не страдал от тормозов :hover в старых ie?

9:29
@cssunderhood на одном из проектов полный отказ от анимаций хорошо сказался на производительности и не ухудшил ui. Особенно на моб. адаптиве
9:33

Вообще вот вам свежий хороший доклад от @xanf_ua. youtu.be/JIkWFrHL0xo . Там и про причины просадок, и про нюансы отладки

9:36
@cssunderhood однажды ловил крэш мобильного Сафари (на iPad mini 1) из-за флексбокса для основного каркаса страницы (без него не крэшилось).
9:54

Вообще я долго не понимал, какие могут быть проблемы.
Разговоры о сокращении вложенности селекторов из-за парсера казались неубедительными

10:03

Первый раз я увидел реальную проблему/целенаправленную оптимизацию, когда пришел в ok и увидел там асинхронную систему бандлов. Это был 2013

10:12
@cssunderhood В Опере (кажется, 9) тормозило динамическое переключение анкеты на форму. Потом они ускорили DOM, мы открыли БЭМ, стало лучше.
10:13

Здесь есть люди, которые _в силу необходимости_ применяли critical path, отложенную подгрузку? Есть те, кто от этого всего потом отказались?

10:15
@cssunderhood с ховером где-то был хороший совет: указывать имя тега, например a.link:hover, вроде помогало в IE7.
10:16
@cssunderhood Что есть отложенная подгрузка? Любой lazy loading?

Подразумевается подгрузка css. Например, при ajax-навигации на раздел [как в vk] twitter.com/webholt/status…

10:19
@cssunderhood Непонятно, что за проблема и в чём оптимизация.

Проблему формулировали так: есть 1 мегабайт стилей, блокирующих рендер, ну и наверное лучше как-то их параллелить
twitter.com/ruGreLI/status…

10:20

Я на всякий случай отмечу, что оценку объема css я даю после минификации и до gzip, потому что скорее не про сеть, а про парсинг

10:37

Зачем столько стилей — отдельный разговор. Отчасти это вызвано спецификой дизайна ok. Отчасти — спецификой a/b, которого у нас всегда много

10:40
@cssunderhood да, применял оба, не отказался.
10:40

В итоге отказались от асинхронной подгрузки стилей — при множестве точек входа сложно поддерживать эффективность сборок. С другой стороны,

10:47

@cssunderhood профит отложенной подгрузки оказался ничтожен. Второстепенные стили из подгружаемых файлов вызывали перерисовку всей страницы

10:50

@cssunderhood да, мы выигрывали, параллеля загрузку/отрисовку, но проигрывали на отложенном reflow/repaint и суммарно выходили в ноль

10:52

В ok загоняются на тему оптимизаций перерисовок страницы. Год-два назад мы делали анимированные полноэкранные заставки на логин-странице,

11:09

@cssunderhood мы делали их _нормально_ — без reflow и без repaint. То есть не так, как было у твиттера, например. Кстати, как такое сделать?

11:12

На самом деле оптимизация отрисовки не гарантирует вам, что у пользователя ваша страница будет рисоваться так же хорошо, как на стенде

11:45

У нас есть специальные «медленные» машины, чтобы моделировать пессимистичные сценарии отрисовки у юзера, но даже им нельзя верить полностью

11:48

Для того, чтобы ваш пользователь не страдал, делайте фоллбэк на статичную версию без анимаций в случае, если средний fps на клиенте ниже N

11:50

Средний fps меряется за заданный промежуток времени, N задается экспериментально, так что стоит озаботиться рубильниками и графиками заранее

11:51

Вообще, наличие любой обратной связи при интерактиве критично. Ваша страница может «тормозить» визуально, а по метрикам быть ok, и наоборот

11:54

Одна из мерзотнейших вещей, которая может испортить вам производительность — скролл. Я не имею ввиду разговоры про throttle, речь о html+css

12:08

Кто-то вспомнит статью «60fps scrolling using pointer-events: none» thecssninja.com/css/pointer-ev… — применяем, но проблема не только в ховерах

12:12

Экспериментально проверял, что любой скролл, кроме того, что на body, при увеличении вложенных узлов устает. Кол-во узлов зависит от клиента

12:14
@cssunderhood ещё resize события негативно влияют на производительность.
12:14

Постулирую: при сочетании анимации и скролла неплохо подумать о фризе оной. Подобное на мобилках — из коробки, но полезно не только там

12:18

Отчего подумать, а не сразу делать: бывают скачки нагрузки на CPU, если анимация выполняется на композитном слое. Проверял в Chrome + FF

12:20

Прервусь на пару часов, чтобы вернуться к вам с примерами последней нашей анимационной боли, а вы пока посмотрите котиков на @catunderhood

12:23
@cssunderhood Я как-то пробовал делать прогрессивную асинхронную загрузку всего. Оно работало, но выглядело иногда фрустрирующе.
14:19

Сейчас будет продолжение про css-анимации и производительность на примере реальной проблемы, решение которой, сразу говорю, мне не известно

14:24

В ok есть понятие «подарка»-изображения, которое может быть разным, в т.ч. анимированым, обязано быть прозрачным. Подарки— прибыльный бизнес

14:26

Тестовый стенд, который даст вам представление о происходящем. Осторожно, трафик, cpu load, анимашки, desktop-only welovehtml.ru:9000/sandbox/anim-e…

14:29

Тестовый стенд, конечно, отражает рафинированный пессимистичный вариант,но приближенная к этой ситуация вполне может возникнуть в реальности

14:31

Когда я начинал исследовать проблему, думал, что решу проблему просто переносом анимаций на композитный слой. Трансформы там, ну вы знаете

14:34

Это работает, если изображений немного. Нагрузка на cpu падает, температура, энергопотребление — тоже. Однако «немного» зависит от клиента

14:36

С другой стороны, если изображений много, то легко можно словить крэш браузера на каком-нибудь 8-ядерном mbp. Получается, что это не выход

14:38

При этом вне зависимости от кол-ва изображений нагрузка на cpu при скролле растет. Вроде бы простой вывод — останавливать анимацию на скролл

14:41

Однако вроде бы это хорошо работает, только если обработка на gpu не используется. Не знаю, с чем это связано, видимо браузерные оптимизации

14:43
@cssunderhood попробуй расположить кадры в спрайте вертикально, это должно снизить нагрузку на кеш процессора и ввод/вывод из памяти.
14:45

Какую-то роль при анимациях такого вида, видимо, играет размер спрайта — его декодирование. Однако выигрыш при сокращении в два раза невелик

14:47

Также я проверял гипотезу о том, что при выносе на композитный слой «не хватает видеопамяти». Видимо, она некорректна — iStat не подтвердил

14:49

Не удалось подобрать хороших инструментов для диагностики. FF валился при попытке профайлинга. IE не очень понятно объяснял происходящее

14:53

Обычно не очень просто найти тестовую базу. Желающим поэкспериментировать с анимашками я подготовил архив на 200mb welovehtml.ru:9000/sandbox/anim-e…

14:55

Вообще навык подготовки тестовых стендов в ok крайне важен. Обычно это самый надежный способ убедить коллегу-ревьюера в удачности решения

14:58
@cssunderhood А пробовал сделать, чтоб изображений было немного? Взять окно в две высоты браузера и вне его пределов картинки убирать.

Пробовал, вьюпорт вроде бы значимой роли не играет. С другой стороны, такой сценарий недостаточно пессимистичен twitter.com/webholt/status…

15:00

Вообще, конечно, анимаций у нас много разных. Особенность подарочков в том, что у них очень большая плотность. Уменьшить нельзя — деньги

15:02
@cssunderhood Прям вообще картинки убирались? Из DOM долой? Откуда ж тогда нагрузка, если она при большом количестве всплывает?

Проблема в том, что неясно, что такое «большое количество». У меня на mpb оно одно, а у кого-то в деревне — другое twitter.com/webholt/status…

15:06

Отдельно — проблема выяснения причины repaint конкретного элемента. Кажется, хром разучился сообщать об этом нормально, а остальные не умели

15:18

У меня была проблема с устранением перерисовки при анимации opacity кейфреймами. Помогла изоляция родителя translateZ + will-change

15:22

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

15:24

Именно по причине странности я избегаю решений, основанных на svg. Анимаций на svg я совсем боюсь, на прод пускаем только маски, аккуратно

15:29

В одном из последних FF под виндой на тестовых «слабых» машинах недавно словили странные баги с отрисовкой контейнера с svg-маской. Откатили

15:32

Не припомню больше свежих интересных кейсов по производительности css. Отмечу, что средний собеседуемый вообще не очень владеет этой темой

15:50

Сегодня готов поотвечать на какие-нибудь ваши вопросы по ok, завтра будем говорить о рефакторинге

15:51
@cssunderhood critical path нет, а вот отложенные загрузки картинок, видео и прочих больших штук -да.
18:05
@cssunderhood Есть классы кирпичи общего назначения? Возможно есть сниппет для общих обьектных названий? Или в каждом проекте всё поновому

Есть реиспользуемые между приложениями ok компоненты, состоящие из шаблона, java-файла, биндящего данные и стилей twitter.com/dagoeos/status…

18:12

@cssunderhood js-файл в компоненты пока, кстати, не входит, — слишком уж отличается активация компонентов на клиенте в разных приложениях

18:14

# Вторник 124 твита

@cssunderhood @dagoeos
> java-файла
Ты серьёзно называешь джиэс джавой? Не стыдно?

Так-так, разберу ваши ответы. Тут меня упрекают в смешении js и java. Так вот,когда я говорю java, я имею ввиду java twitter.com/GrawlCore/stat…

8:09

Серверсайд ok реализован на java; код, который рендерит html, написан на java, соответственно частью компонента является java-код

8:11
@cssunderhood попробуй расположить кадры в спрайте вертикально, это должно снизить нагрузку на кеш процессора и ввод/вывод из памяти.

Тут отличный тред @wouldntfix о вчерашнем стенде. Коротко:по ховеру теряем деньги,аллокация памяти хрома вообще треш twitter.com/wouldntfix/sta…

8:14

Сегодня поговорим о рефакторинге. Расскажите о вашем самом страшном рефакторинге стилей в жизни. Зачем вы его делали? Стоило ли оно того?

8:18

Я прямо начинаю теряться — никто в цссандерхуде не рефакторил css? Никому не близка тема «разрушить до основанья, а затем»?

9:01
@cssunderhood было, конечно, но это как-то не воспринимается как некое важное карьерное достижение. Как-то уменьшил 300kb CSS до 160kb.
9:26
@cssunderhood это не минификация и гзип были, в полный рефакторинг. Выкинул стотыщ ненужных position:absolute итп, зарулил все на поток.
9:26
@cssunderhood пачка хз кем свёрстанных лендингов фикс ширины. Нужно было сделать адаптив. Кроме стилей пришлось еще и с разметкой повозиться
9:27

На самом деле последнее время рефакторинг css у меня связывается с процессом компонентизации. Объединение, атомизация — и тут начинается

9:29

Хотя самым незабываемым опытом для меня остается рефакторинг раздела музыки в ok — было ~ 6k строк, уменьшилось минимум на треть

9:33
@cssunderhood вот вспоминаю, как раньше все было просто:) а сейчас понастроили, всяких сборщиков!
9:33

Переезд ok с css на styl тоже оставил воспоминания, хотя и не такие яркие. Говорят об обратной совместимости, но мы наскочили на пару багов

9:35

Вообще, если вы понимаете, что предстоит рефакторинг, прежде всего нужно озаботиться «инфраструктурой» — тестированием и процессом ревью

9:36
@cssunderhood мне обычно задачу «разрушить до основанья, а затем» ставили как «переверстать», т.к. п-ц в CSS следовал за п-цом в разметке
9:38

У нас практикуют несколько уровней тестирования, ручное, автоматизированное, но всё равно случаются конфузы — слишком много разных сценариев

9:39

Я слышал,модно говорить о тестировании интерфейса, основанном на сравнении скриншотов. У нас такого нет, и я не очень уверен в эффективности

9:48

То есть если ваш интерфейс полностью построен на независимых компонентах, наверное вы можете тестировать компоненты. Их сочетание — сложнее

9:49

Впрочем, наш Selenium генерирует какие-то превью, и иногда это оказывается полезным. Но полностью я полагаться на автотесты не могу

9:50
@cssunderhood переделывал кипу CSS в стиле “фрилансер сверстает нам приложение”. под Angular. первым делом удалял классы из HTML.
9:50
@cssunderhood ну, знаешь, можно хотя бы превью всех страниц в качестве лога делать. Уж лучше, чем прокликивать всё самому.

Клево, когда автотестам доступны все состояния на всех тестовых средах. Сложно и для нас в общем случае не работает twitter.com/GrawlCore/stat…

9:54

Не всегда простые решения работают. Например, один и тот же компонент может по-разному рисоваться в авторизованном и анонимном состоянии

10:01

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

10:03
@cssunderhood А кто-нибудь использует для тестов что-то типа Galen? galenframework.com т.е. вместо скриншотов - декларативное описание?
10:04
@cssunderhood что за баги были?

У нас была сырая версия тогда, проблемы с интерполяцией и интерпретацией табуляции были. Сейчас уже всё перенесли
twitter.com/roma_milkovic/…

10:15
@cssunderhood А кто-нибудь использует для тестов что-то типа Galen? galenframework.com т.е. вместо скриншотов - декларативное описание?

Вообще прошу уделить внимание этому реплаю, мне любой опыт в этом вопросе тоже крайне интересен twitter.com/vfurso/status/…

10:16

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

10:18

Мне кажется, практика ревью растет. Во всяком случае, многие собеседуемые упоминали. Делаете ли вы ревью на проектах? Какими инструментами?

10:20
@cssunderhood рефакторю обычно потихоньку, до основания ни разу не получалось, жаль времени. хотя руки чешутся
10:33
@cssunderhood делаем битбакетом.
10:33

У нас стандартный инструмент — stash, который, видимо, эквивалентен битбакету. Ревью предполагает подтверждение минимум от двух ревьюеров

10:36
@cssunderhood бесило потому что не было методологий на проекте

Самое важное при ревью — выбор критериев оценки. Это может быть методология, но не только лишь она twitter.com/antonfrolovsky…

10:46

У нас есть «памятка ревьюера», в которой явно запрещается обсуждать вещи «религиозного характера», что для меня неясно (неформализовано)

10:49
@cssunderhood Делаем. К сожалению внутренним аналогом Гихаба (каким он мог бы быть в 1990-е).
10:50
@cssunderhood А можешь расшарить? У нас как раз пробел (или таб? :–) в этом.

Расшарить — попробую, не обещаю. Но на табы/пробелы мы точно время не тратим, мне кажется это несуществунным нюансом twitter.com/sapegin/status…

10:54
@cssunderhood phacility.com/phabricator/ все здесь: и код, и ревью и таски. Замечательный инструмент
10:55

Вообще по кодстайлу лично моя мысль — он должен содержать минимальное количество правил, ограничивать грабли, но не мешать работать

10:57

В этом плане набор пожеланий к оформлению "css"/styl на ok далек от совершенства — оговаривается слишком многое. Например, порядок правил

10:58

Признаком граблей могут быть, например, определенные виды свойств или вложенность правил. Ошибки может и не быть, но уделить внимание стоит

11:01
@cssunderhood Про табы я шучу ;-) Всё, что можно запретить линтером, нужно запретить. И не тратить время на код-ревью.

У нас, кстати, нет линтера, но есть долгая история обсуждений смысла его внедрения. Пока что всем лениво twitter.com/sapegin/status…

11:03

Short-list свойств, требующих внимания: overflow, z-index, float, display:flex, position: fixed, font-size: 0, line-height не коэффициентом

11:05

@cssunderhood transform,backface-visibility,позиционирование,не кратное 4, цвета,не ложащиеся в стандартную палитру,base64 и что-нибудь еще

11:10
@cssunderhood Если есть джуниоры или любители поспорить, линтер незаменим.

Право ревьюить css у нас выдается человеку с опытом работы не менее года, да и джуниоров мы не берем twitter.com/sapegin/status…

11:12
@cssunderhood А правда что у flexbox с производительностью плохо? Очень давно видел тест flexbox vs float и старый метод был гораздо быстрее

Руками не проверял,другим не верю,хорошего ответа на вопрос не знаю. При ревью флексы не баню, сам стараюсь без них twitter.com/roma_milkovic/…

11:14

@cssunderhood но если фантазировать, то потенциально любой нефиксированный руками способ раскладки может дернуть reflow у потомков

11:16

О ревью препроцессорного кода:используем малое подмножество stylus,чтобы не влететь в приключения. Бан на циклы, очень аккуратно с примесями

11:19

Допустимая вложенность правил не более двух,чтобы не терять контекст в коде. Бан на составные селекторы вида &-item. С & вообще аккуратно

11:21

Мы используем только «сокращенные» модификаторы вида .block.__mod, с ними & можно. При контекстном .context & — можно. Остальное — опасно

11:24

Недавно перекрашивал на ok все кнопки из зеленого в оранжевый,чуть недооценил & и влетел на +800 селекторов. А вы удивляетесь,откуда 1mb css

11:26
@rimmer333 @cssunderhood я делал рефакторинг. Выкинул стотыщ ненужных флоатов, инлайн-блоков, флексов и переписал все нормально на абсолюты.
11:27

Я вот кстати со времен верстки посредственных промосайтов очень люблю абсолюты, но теперь не очень получается ими пользоваться =)

11:28
@cssunderhood а stylus у вас с каким синтаксисом? Скобочки ставите?

Да, мы в этом плане чтим традиции — скобки, двоеточия, точки с запятой, всё как полагается twitter.com/c01nd01r/statu…

11:29

Мне нравится подход,когда из проекта выделяют _малое_ количество общих переменных и примесей в отдельный файл. Это дешевый путь улучшить код

11:32

@cssunderhood на ревью можно просто напомнить об использовании таких значений. Главное — следить за изменениями этого файла и вовремя банить

11:34

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

11:39
@sapegin @cssunderhood Литер нужен. Всегда. Чистый код. Меньше работы. Автоматизация.

Это всё клёво, когда у вас проект с нуля, или маленькая кодовая база, или очень много времени на изменения twitter.com/Copypasting/st…

11:40

Отсутствие изоляции делает важным ревью не только эксперта по конкретным изменениям, но и вообще людей, которым вы могли что-то сломать

11:44

Вы мне сейчас будете говорить про независимые блоки, shadow dom, эмуляцию scoped styles в angular 2, генерируемые префиксы, но жизнь сложна

11:45

@cssunderhood если я полезу менять какую-нибудь карду с видео где-нибудь в ленте, я обязательно провлеку к ревью верстальщика всего видео ok

11:47

Кроме стандартного ревью до слияния с мастером у нас в ok есть еще спорная практика пост-ревью. Этот процесс живет только в команде верстки

11:52

Если в вашей команде проекта кода немало, людей немного, а верстальщиков еще меньше, попробуйте начать с внедрения пост-ревью раз в неделю

11:53

Формально пост-ревью — так себе решение. Заставить кого-то что-то переделать несколько дней спустя может быть непросто. Но есть и плюсы

11:56

Пост-ревьюить можно только на критичные вещи, это быстрее, и вы видите изменения в контексте всего проекта, не фокусируясь на имени таска

11:57

Пост-ревьюить можно весь код, не только css. Не сомневаюсь, что у вас были случаи, когда разработчик самостоятельно менял верстку. Это оно

11:58

Наконец, для пост-ревью не нужно вообще никаких специальных инструментов. Если пролезло что-то критичное, достаточно revert-коммита

12:01

Но, допустим, вы как-то изменили код, прошли ревью, выкатились в продакшн. Бывало ли так, что впоследствии вы сожалели о проделанной работе?

12:05
@cssunderhood а почему выбрали Stylus? Мне кажется многие выбирали Stylus из-за синтаксиса.

На вопрос о причинах выбора Stylus отвечает @operatino_ru
twitter.com/xwoody/status/…

12:12

@cssunderhood на самом деле до принятия решения был опыт работы с less, и тогда хотелось инструмента, в котором не было бы тесно в будущем

12:14
@cssunderhood рефакторил пару раз. Подробностей особо не помню, всё делалось постепенно, с внедрением БЭМа и базовых стилей.
12:30

Постепенный, модульный рефакторинг — это правильно и здорово. Если, конечно, код позволяет

12:31

Но вообще лично мой опыт: код размножается копипастой. Где-то что-то недорефакторили — обязательно вылезет потом. Лучше режьте сразу всё

12:32

У нас на проекте есть как минимум три разные реализации модалок. Раз мы тут про css, то, в частности, три разных стилевых конструкции.

12:38

@cssunderhood Недорефакторили в своё время.Это не единичный пример. Нужны значительные усилия, чтобы закончить рефакторинг,а не «прекратить»

12:39
@cssunderhood ага, на рефакторинге :-P.
12:44

Мои сожаления о проделанной работе связаны, например, с рефакторингом для упрощения поддержки ретины в музразделе ok — всё равно не оценили

12:46

@cssunderhood мой личный опыт — не всегда нужный и хороший рефакторинг стоит затраченного на него времени. Теперь стараюсь оценивать точнее

12:48

Вторую часть дня предлагаю поговорить об особенностях выкатки изменений на ваших проектах. У нас вот есть условная «css-специфика», а у вас?

14:57

У нас рассуждают примерно так: есть фича и разные гипотезы о её внедрении. Делаем единую разметку, отображение меняем одним модификатором

15:01

В таком раскладе выигрываем практически везде, кроме css: легко переключать «темы», данные шаблонизируют один раз, меньше разметки

15:03

Правда, есть опасение, что в «строгом» компонентном режиме так уже не прокатит, и рубильники придется усложнять. Но пока что живем!

15:05

И вообще. Тут есть еще люди, работающие с a/b на продакшне, или я тут сейчас буду изливать профдеформацию?

15:09

Окей, раз никто ничего не отвечает, начну с начала: a/b-тестирование — это хорошо. В нашем случае оно помогает зарабатывать _значимо_ больше

15:29

Ваша аудитория делится на некоторое количество групп, которым демонстрируется разное отображение/поведение, и анализируется их активность

15:30

Под активностью можно понимать разное — проведенное время, количество кликов, полученных реплаев. Наука о метриках отдельна и сложна

15:31

Знание об a/b может повысить вашу ценность, как специалиста, потому что a/b очень любят ux-дизайнеры, а ux — это модно.

15:33

В ok a/b может реализовываться по-разному, но с точки зрения html+css это запросто может быть контекстный класс, который меняет вообще всё

15:34

У нас есть простое правило: все ui-изменения должны выкатываться на продакшн обязательно с рубильником в отключке — аудитория теста будет 0

15:36
@cssunderhood а есть интересные источники, для изучения UX и a/b?

Интересные источники для изучения UX, наверное, есть. Сам не читал, могу поспрашивать наших. Для a/b — не слышал twitter.com/PMarinchenko/s…

15:38

Простой пример a/b — обновленная версия вк. У них там есть ссылка для переключения между версиями, это интересный пример контроля a/b юзером

15:40

Мы своим юзерам контроля не даем. Мне кажется, свобода выбора при a/b — неудобно для разработчика. Возможно, я не прав и стоит попробовать

15:42

В любом случае, без a/b рискуете получить кинопоиск и не получить денег. Выкатываете фичу — вешайте классы, переключайте шаблоны и будет ok

15:43
Ребятки, а есть кто у меня в контактах, что про #фронтенд, #линукс, #опенстэк, #питон и ++?

У меня 4 вакансии в Амстердаме 🧀

Рекламная пауза twitter.com/mursya_ru/stat…

15:44

Так, по a/b мне пообещали помочь источниками, но не сегодня

15:54

На самом деле есть еще одна причина кроме a/b, специфичная для ok, по которой мы очень любим css — это хотфиксы

15:56

Релиз ok происходит от одного до двух раз в неделю, а проблемы с ui возникают чаще =). Это требует срочной реакции, тут верстальщик полезен

15:57

Релизиться чаще _непросто_ по разным причинам, начиная от процессов тестирования до, например, работ в дата-центрах и нагрузки на сервис

15:59

Поэтому в админке ok есть поле для применения произвольного css в реалтайме.Точка врезки этого css помечена в коде «на случай ядерной войны»

16:01

Если вы откроете приезжающий html ok, вы легко найдете такие «хаки». Использование подобного порицается, но ничего лучше пока не придумали

16:03
@cssunderhood а букинг вот могёт

vk тоже могёт, там на pitercss разработчик с болью рассказывал, как они так раскатались, а потом фиксили срочно twitter.com/operatino/stat…

16:06

@cssunderhood вот вам ссылка на этот доклад, если кто пропустил youtube.com/watch?v=qseu-Z…

16:08

Почему такие «хаки» неудобны: 1) нужно описывать их в правильном формате, чтобы было понятно, кто автор. У нас указывают фамилию/id таска

16:10

2) «хаки» — тоже код. Неплохо уметь его версионировать. Наша админка умеет, хотя дифф в ней смотреть не очень удобно

16:12

3) «хаки» нужно не забывать переносить в репозиторий или просто удалять. У нас это решается руками и занимает какое-то время + опрос авторов

16:14

Вообще у нас подобные поля есть и для js, и, по грязным слухам, для java, но это уже не формат этого твиттера, и за такое у нас больно бьют

16:16

Возможность применить кастомный стиль в реалтайме может помочь заработать немало денег, в этом случае риски окупаются. Актуально при акциях

16:19

Тут просили принудительно рисовать ценник на подарке,если тот бесплатен.Привязался к значению поля в json в data-атрибуте. Не делайте так =)

16:22

Еще один «черный» паттерн применения этой возможности — борьба с adblock. В попытке порезать рекламу скрывают лишнее во вред другим юзерам

16:25

Тема борьбы с adblock выходит за рамки этого твиттера, но полезно знать, что разные плагины на разных браузерах режут рекламу по-своему

16:26

В рамках саморазвлечения рекомендую посмотреть, как работает adblock в ff. Они используют -moz-binding, мне это показалось занятным

16:27
@cssunderhood для тупых не верстальщиков можно объяснить, почему?

Для стилизации лучше пользоваться обычными предсказуемыми способами. Нужно показать элемент — повесьте класс,
twitter.com/imbfa/status/7…

16:29

@cssunderhood json в data-атрибуте скорее всего нужен другим модулям. Их потом могут изменить, формат может поменяться, у вас все сломается

16:29

@cssunderhood , причем вы даже об этом даже не узнаете. И еще где-то тут должны быть рассуждения о производительности селектора с [*=""]

16:32
@cssunderhood и откатывать могут мгновенно

Математически выходит вроде бы всё хорошо. Но интуитивно где-то хочется прогона тестов, выкладки на тестовую группу twitter.com/operatino/stat…

16:39

Вообще мне очень близка тема модификации отображения стилями без изменения разметки. Еще со времен работы в веб-студии. Когда код написан ->

16:44

@cssunderhood -> непонятно кем и непонятно как, и вообще доступа к его изменению нет, дешевле наваять css-патч и выслать его автору по почте

16:45

Если я правильно помню, «отцы» развлекались с csszengarden.com . Мне было лениво, я ограничился рестайлом стандартной темы вордпресса

16:49

Я не могу доказать свою гипотезу, но полагаю способность рестайла неизменного html тренировкой интеллекта не худшей, чем какие-нибудь судоку

16:51

Расскажите, используете ли вы css не в прикладных целях, а для «разминки мозга»? Утекают ли результаты таких развлечений в реальные решения?

16:55

Чот как-то фидбэка совсем маловато. Есть две гипотезы: андерхудеры живут по ночам и мой текущий формат неудачен. Попробую завтра вести иначе

17:22
@cssunderhood у нас такое в легаси-проекте было. разметку менять нельзя, потому что все шаблоны в строках, в которых чёрт ногу сломит.
17:55
@cssunderhood миксины на sass пишу. Обычно потом находят применение в реальных проектах. Иногда просто фаново "попрограммировать на sass"

В первый раз слышу о миксинах, как о способе «разминки мозгов». Обычно как-то в контексте «proof of concept» twitter.com/victoria_veles…

18:26
@cssunderhood вот это еще круче css1k.net
19:32
@iamale_ru @cssunderhood Подробности про вакансии brightcomputing.com/jobs?__hssc=17…
19:42
@cssunderhood сейчас предстоит это, я с ужасом думаю. Пытаюсь покрыть тестами регрессии :(
19:43

# Среда 119 твитов

Я обещал другой формат. Сегодня пробую паттерн «аргументированный наброс», а заодно — немного смежную и более «человечную» тему — сотрудники

9:41
Желание стартовать ночью вызвано стремлением понять срез местной активной аудитории перед началом недели. Итак, вы:

В начале недели я опрашивал по составу местной активной аудитории.Срез небольшой,но наверное как-то отражает отрасль twitter.com/cssunderhood/s…

9:43

Обратите внимание, всего 10% женской аудитории. На мой взгляд, это странный результат. Наброс: вёрстка скорее женская профессия, чем мужская

9:46

Аргументировать наброс буду на основе личного опыта, но, возможно, у кого-то есть схожий/альтернативный — не стесняемся, реплаим

9:48

Если вы посадите в абстрактном вакууме верстальщика и верстальщицу с одинаковым опытом, скорее всего женский код будет качественнее

9:49

Ясно, что критерии качества сложны, но можно выделить простоту, но не примитивность, аккуратность. Возможно, он будет даже документирован

9:51

Почему так? Девочки почему-то внимательнее следуют рекомендациям, правилам, не срываются писать велосипеды — ровно, предсказуемо работают

9:53
@cssunderhood при одинаковом сроке?

Но если было всё так просто, то наверное, результаты опроса значительно отличались бы. Хороший вопрос twitter.com/dcromster/stat…

9:54

Всё меняется в агрессивных условиях работы. При фоновом стрессе выигрывают эмоционально выносливые люди. Сколько стресса на вашем проекте?

9:56

Кроме того, склонность писать велосипеды (даже очень плохие велосипеды) иногда реально «выстреливает», окупая негативные издержки

9:58

Кроме того, способность принимать рискованные решения, катить «решето» в прод под свою ответственность — то, чего иногда недостает

10:00

Зачем я тут всё это пишу: не с целью кого-то задеть или наоборот. Полезно понимать особенности сотрудников и использовать их сильные стороны

10:01
@cssunderhood какого рода стресса?
10:01
@Sigiller @cssunderhood Проект надо сдать вчера, о нём узнали только сегодня, а он ещё и требует нетривиальных решений.
10:01

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

10:03

С коллегой-девушкой почти всегда проще договориться,если в проекте она играет роль ведомой.Возможно, ведущей—тоже,но тут у меня меньше опыта

10:04

Если у вас в команде верстки есть девушка — хорошо. Попробуйте перераспределить задачи так, чтобы вам шло больше треша, ей — меньше

10:06

Речь не про джентльменов и вот это все. Просто такой подход скорее всего окупится по результату.

10:07
@webholt @cssunderhood впрочем это я бы стрессом не назвал. просто придётся посидеть подольше. но переработки-то все оплачиваются

А вот кстати переработки могут не всегда оплачиваться. Принуждение к переработке без переоплаты — тоже стресс twitter.com/Sigiller/statu…

10:09

Старайтесь приглашать девушек в команды. Да, это может менять командную атмосферу, но заставит вас посмотреть на ваш код под другим углом

10:11
@cssunderhood но вроде как в приличных конторах такого не бывает?

Ну вот в ok нет понятия переработок. Есть понятие ежегодной премии, которая как-то формируется twitter.com/Sigiller/statu…

10:12

Если вы собеседуете девушку, которая немного «не дотягивает», возможно, лучше отнестись чуть более лояльно, отдать кусок задач «попроще»

10:14
@cssunderhood это если есть свободные деньги у компании.

Это хороший и глубокий комментарий, я попробую ответить на него чуть позже twitter.com/bayevn/status/…

10:16
@cssunderhood но у вас переработки я так понимаю - это экстренная ситуация и по идее их вообще не должно происходить?

Всё зависит от того, что считать переработкой. Деплой ok идет только ночью, иначе риск упасть — это переработка? twitter.com/Sigiller/statu…

10:17
@cssunderhood недавно слушала тему о формировании команды. Найм девушек важен не сколько из-за распределения обязанностей, сколько
10:18
@cssunderhood для социальной стабильности внутри команды. То, о чем ты пишешь, можно применить к любому джуну, вне зависимости от полу. :)
10:18

С утверждением о применимости моих утверждений к любому джуну не согласен по опыту. Просто особенности хорошо видны на граничных ситуациях

10:19

У меня была кандидатка, которая руками обновляла весь html на проекте, вместо докручивания туда любого шаблонизатора. Никто не заставлял

10:21

@cssunderhood это граничный случай. Практически любому джуну-мальчику было бы тупо лениво всё это перебирать руками

10:22
@cssunderhood когда команда однополая, в силу законов человеческой природы начинается дедовщина и перераспределение гендерных ролей.
10:22
@cssunderhood В итоге устанавливается нездоровая система отношений, которая ухудшает выполнение профессиональных задач.
10:22
@cssunderhood ну по ночам за так сидеть тоже не особенно-то приятно.

Мне кажется, в крупных компаниях есть негласное понятие «лояльности», когда на какие-то вещи взаимно закрывают глаза twitter.com/Sigiller/statu…

10:24

@cssunderhood стандартный внутренний мем ok — с утра накатывал [апдейт], буду позже/работаю из дома/поликлиники/маршрутки

10:26
@cssunderhood Тут как с готовкой: обычно готовят женщины, но лучшие повара — мужчины. Если нужно хорошенько подумать, вряд ли она справится.
10:28

Смотрите, еще один наброс: хороший сотрудник — не обязательно хороший специалист

10:28

На каждом своём месте работы я рано или поздно начинаю собеседовать людей.Не все люди,которых я взял,идеально верстали.Кто-то вообще не умел

10:31
@ruGreLI @cssunderhood наверное потому, что девушек воспринимают как эфемерные создания для украшения пространства и не предъявляют

Такого вообще никогда нигде не встречал. Проще посмотреть в дифф, на стейдж, чем в соседнюю ячейку опенспейса twitter.com/SheVasya/statu…

10:32

@cssunderhood зато каждый человек оказался порядочным, обладал конструктивными личными качествами. Я не знаю, как так вышло =)

10:35
@cssunderhood и обратное тоже верно
10:39
@cssunderhood но из хорошего сотрудника можно сделать хорошего специалиста. а вот обратный процесс гораздо сложнее, если вообще возможен
10:39
@cssunderhood но брать очевидный якорь - зачем?

Зависит от контекста. Якорь удобно затачивать под конфигурацию корабля, если руки позволяют twitter.com/SheVasya/statu…

10:41

@cssunderhood если говорить человеческим языком, то я упоминал, что в среднем девушки более внимательно относятся к правилам и рекомендациям

10:43

Смотрите мой негативный опыт: в ok хантят суперспециалистов. Суперспециалист — часто суперличность, с суперопытом и суперуверенностью

10:45

Даже на этапе собеседований с таким человеком может быть некомфортно договариваться. После приема на работу тоже бывают нюансы общения

10:48
@cssunderhood я понимаю, что крупным компаниям выгодно так поступать, но и джунов для обучения они набирают пачками вне зависимости от пола.

А джунов на верстку мы не берем совсем, потому что высокий порог входа. До ok много брал, но тут всё иначе twitter.com/SheVasya/statu…

10:50

Стандартная проблема специалистов — убеждены, что их личный опыт может перевешивать проектный. Это может быть некорректно в сложном проекте

10:57

@cssunderhood какая-нибудь специфика, по которой (примитивный пример) ресурсы клеят в спрайты, а не в base64, или наоборот

10:58

Я видел случаи, когда проектнонеприменимые предложения суперспециалистов отклоняли, они «ломались», и больше толка от них не было

11:01

Я оставлю в стороне рассуждения, почему это плохо вообще для всех, и перейду к способам борьбы с такими проблемами

11:04

В ok есть стандартный процесс «менторства». Кажется, он применяется не во всех командах, но у верстальщиков он точно есть

11:09

Он длится весь испытательный срок (3 месяца) и подразумевает наставничество и контроль. Не все задачи в этот период могут быть продуктовыми

11:11
@cssunderhood не согласен с таким подходом, это какой-то сексизм, но в другую сторону

Мы все разные, и это не хорошо и не плохо. Нужно учиться видеть в этом сильные стороны и уметь ими пользоваться twitter.com/dimaip/status/…

11:13
@cssunderhood соединить какие-то хорошие вещи и сложный проект вообще может быть той ещё задачей по сложности.
11:14

С точки зрения нашего руководства выход на реальные задачи для свеженанятого верстальщика—месяц.На практике всё сложнее,и зависит от ментора

11:17

С чего я вообще всё это начал: каждый из вас рано или поздно может оказаться ментором в вашей команде, со всеми вытекающими последствиями

11:20

Процесс менторства при найме крайне полезен как для кандидата, которому нужно облегчить коммуникацию с коллективом, вхождение в стек,

11:22

@cssunderhood оградить его от лишней нагрузки на старте,оберечь от лишнего стресса,«сгорания»,прикрыть его косяки,дать раскрыть способности,

11:24

@cssunderhood так и для ментора. Систематизация инструкций, аргументация причин решений, последовательность усложнения задач, вовлечение ->

11:27

@cssunderhood в атмосферу коллектива, подбор «подходящих» задач под уровень, контроль подопечного — всё это позитивно сказывается на менторе

11:29

Раньше в ok новый сотрудник начинал с работы над «библиотекой компонентов», которая не обладала привязкой к проду, но сохраняла специфику

11:32

Этот подход позволял приучить человека к кодстайлу,процессам ревью,обсуждениям и критике до того,как это негативно сказывалось бы на задачах

11:33

До ok было удобно менторить, сажая сотрудника на проект рядом с собой. Так и контролировать проще, и создается командная согласованность

11:36

С контролем нового сотрудника вообще очень сложно: плохо недоконтролировать и плохо переконтролировать. Тут где-то в области интуиции

11:37

Недоконтролируете — сотрудник потеряет время на разработку заведомо бесполезных, некорректных вариантов,переконтролируете — оба потеряете ->

11:39

@cssunderhood -> время на избыточные обсуждения. Во втором случае будет трата вашего, более «дорогого» времени, тут аккуратно нужно

11:41

Вообще, навык делегации задач значительно сложнее, чем это может показаться. Без него никак — чем выше ваш уровень, тем меньше у вас времени

11:45

Тактика наброса хороша тем, что привлекает внимание, но плоха тем, что за развитием темы уже не следят. Хотя фоновые обсуждения — хорошо

11:47

Сделаю еще одну попытку. Наброс: хантить сложнее, чем хорошо верстать

11:50

Каков возраст вашей легаси-верстки? Во сколько бы оценили стоимость её поддержки? (Любая хорошая верстка рано или поздно становится легаси)

11:53
@cssunderhood в первый год работы верстка становится легаси практически ежемесячно)
12:01

Наверное, логично, что слабый фидбэк по легаси коррелирует со слабым фидбэком по рефакторингу. Я тогда за себя: в промопроектах, например,

12:22

@cssunderhood код запросто может устареть за полгода. В ok можно найти используемый код какого-нибудь 2007 года. Специфика, вы понимаете

12:23
@cssunderhood О этого всем будет плохо, если он не один.
12:23
@cssunderhood Зависит от того, кто автор :-/ У некоторых она становится легаси в момент коммита.
12:27

На самом деле сколько бы у вас ни было легаси кода и как бы ни было тяжело его поддерживать, это не так страшно, как найм «не того» человека

12:31

Если вас привлекают к собеседованиям на каком-нибудь этапе процесса найма, ответственность, наверное, не так сильно ощущается

12:33

Когда принимаешь решение о найме единолично — тяжело. Когда принимаешь решение об увольнении — еще сложнее. Кажется, это не для всех

12:35

У меня небольшая карьера верстальщика — лет 5, я начинал с построения отдела верстки. На аутсорс, как продукта, тогда было не очень много

12:37

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

12:38

Руководство предполагает, что финальную ответственность всегда несешь лично ты. Ты несешь её в три стороны — заказчику, подчиненному и себе

12:40

Сложнее всего отвечать перед подчиненными. Можно отказаться от проекта или уволиться самому, но увольнять/штрафовать людей — плохо

12:42

Отсюда важно сформировать коллектив, на который можно рассчитывать в экстренных ситуациях. Достаточно автономный в работе, например

12:43

Отсюда критично понимать распределение ролей участников коллектива в случае отсутствия руководства.Формирование мягкой иерархии без «базара»

12:45

Каждый из участников вашей команды силен в своей области. Отдайте ему эту зону ответственности, делегируйте — результат будет качественным,

12:46

@cssunderhood сотрудник будет морально удовлетворен, внутри коллектива будет формироваться взаимное уважение (делегировать — сложно,я писал)

12:47

Сохранять авторитет внутри команды — сложно, особенно, если подчиненные растут быстрее тебя (больше практики, меньше бюрократической возни)

13:17

В этой ситуации нет механических инструментов; важно признавать рост человека, поощрять его интересными задачами, возможно, премиями

13:18

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

13:20

Сагитируйте своих коллег на _совместное_ посещение бесплатных конференций. От этого профит больше, чем от коллективного чтения твиттера

13:21

Шаг назад к теме найма: какое количество людей оптимально для максимальной эффективности отдела? 7-8 человек. Параллелят 2-3 проекта

13:23

Важно не перенабрать людей. Во-первых, тяжело и сложно увольнять. Во-вторых, неудобно координировать. Сложнее дифференцировать задачи

13:24

Специфика микростудий: руководитель может самостоятельно искать заказы подчиненным, чтобы вообще было чем им платить. Малоприятная ситуация

13:25

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

13:27

Тему оценки проекта до меня поднимали. Дополню схемой работы того отдела, удачными и неудачными решениями оценки времени и стоимости

13:29

50% времени сверху — минимальный запас времени. Съедается на стыковке модулей, тестировании, устранении первичных недоработок, форсмажорах

13:30

Мы тогда работали «вчерную». Отчисления шли только на аренду, инфраструктуру, покрытие издержек сотрудникам при отказе заказчиком от проекта

13:32

Целились в преднизовую нишу рынка — не так, чтобы треш, но чтобы з\п были в районе 30к рублей. 5 лет назад это было терпимо для найма

13:34

Цену проекта формировали по статическому прайс-листу, исходя из «примерных» временных трудозатрат. Что-нибудь в духе «одна страница — 300р»

13:35

Ясно, что такая оценка смешна, но в среднем з\п на фуллтайме вполне могла пробивать 30к, если человек работал. Речь о _простой верстке_.

13:36
@cssunderhood это если есть свободные деньги у компании.

А вот теперь я вернусь к комментарию про «свободные деньги». Свободных денег у нас не было никогда,но схема работала twitter.com/bayevn/status/…

13:40
@cssunderhood а как должно быть? Работники сами должны искать себе заказы?

Вообще у нормальных людей бывает отдел продаж. Поиск заказов руководителем отдела верстки — странная практика twitter.com/ardshock/statu…

13:41
@cssunderhood надо просто определиться, менеджер ты или программист. И расти в конкретной области.

Надо просто не бояться и не ограничивать себя спецификой написанного в трудовой twitter.com/SheVasya/statu…

13:42
@cssunderhood ничего себе небольшая :)

На этой неделе мне реплаят люди с опытом работы > 10 лет, по блогам которых учился — представляете, какой опыт ) twitter.com/SheVasya/statu…

13:44

Еще рекомендации «коллективного» плана: собираетесь увольняться — говорите об этом заранее и только тем людям, которых зааффектит явно

13:51

Если у вас в коллективе есть человек на ваше место — спросите, интересно ли ему заниматься вашими задачами. Представьте его руководству

13:52

Если такого человека нет, постарайтесь его найти заранее, чтобы успеть передать все свои дела без накладок. Обычно помогает опрос знакомых

13:53

Вы можете быть со мной не согласны в моральном плане, но я считаю корректным «переманивание» сотрудника из другой компании в его интересах

13:54

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

13:54

Важно не забывать, что в момент вашего увольнения у вашего работодателя почти всегда возникают проблемы, лучше их минимизировать

13:57

Ну то есть, побыв в шкуре такого работодателя, начинаешь как-то более внимательно относиться к проблемам в т.ч. «старших» коллег

13:58

Я упоминал об ответственности перед собой. Важно следить, можешь ли выполнить обещания, данные подчиненным, например, при собеседовании

14:01

Я ушел с позиции руководителя, когда не смог выбить для подчиненных переход с «черной» схемы оплаты в «серую». Говорят, потом им всё сделали

14:02

Хотите начать карьеру руководителя — постарайтесь быть уверенными во всех качествах вашего партнера. Или заранее запасайтесь деньгами

14:04
@cssunderhood добавь только сюда "на неограниченное время" :) потому что с ограниченным - будет наоборот.
14:04

Теперь я готов поотвечать на ваши вопросы о личном опыте _не в ok_

14:11

Формат наброса не оправдался. Завтра попробуем обсуждать «всё спорное»—от инструментов до сайд-проектов. Вы кого-то:

15:08
@cssunderhood Коллективное чтение твиттера? Это когда все садятся в кружок и кто-то зачитывает вслух твиттер?

Ну да, это когда у вас есть общий чатик и в нем расшаривают занятные ссылки twitter.com/ruGreLI/status…

15:37
@cssunderhood аа отдела, ещё и верстки… А если в копании 3 человека?

Мне кажется, найти проект на 3х человек проще, чем на 7 twitter.com/ardshock/statu…

20:10
@cssunderhood зачем люди в России работают за такие деньги, если есть западный рынок?

У нас были и западные заказчики, кстати. Платили больше, но и времени на их проект уходило больше twitter.com/dimaip/status/…

20:11

# Четверг 149 твитов

Сегодня мы обсуждаем «всё спорное», и я буду пытаться ставить под сомнение какие-то известные/привычные или малоизвестные, но модные, вещи

8:31

Сколько здесь людей, которые знают, что такое CSS Modules? Сколько ими пользовалось на проектах? Кто считает, что это хорошо и удобно?

8:32
@cssunderhood Тесты, планирование, реакт, толстый бэкэнд.

Отличное предложение, хотя уверенно из всего этого я, наверное, смогу только про толстый бэкенд twitter.com/webholt/status…

8:34
@cssunderhood знаю, но не пользовался. воспользуюсь, когда будет проект на котором не только я делаю вёрстку
8:34
@cssunderhood мы пользуемся, очень довольны, считаем, что это хорошо и удобно
8:36
@cssunderhood ещё как понял, если используешь css модули про бэм можно забыть раз и навсегда. Так ли это?
8:36

Я сразу скажу, что мы не пользуемся, не будем и попробую показать, почему мне кажется вообще этот подход (костыль?) спорным

8:37

Значит поскольку мы не применяем, я могу где-то ошибаться в рассуждениях, вы меня поправляйте, если что

8:45

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

8:47

Предполагается,что черный ящик делает какое-то преобразование с целью создания уникальных идентификаторов. Процесс может быть параметризован

8:48

Самым простым вариантом такого преобразования выглядит добавление уникального префикса, который создает «неймспейс», организующий изоляцию

8:50
@cssunderhood мы пользуемся на всех проектах, с того момента, как они появились в css-loader. Считаем, "что это хорошо и удобно" :)
8:50
@cssunderhood Я пользуюсь и считаю, что это хорошо и удобно.
8:51
@sapegin @cssunderhood и на 95% безопасней, чем обычный css #извините
8:52

Декларирую непопулярную мысль, что любое преобразование селектора, особенно «в черном ящике» — потенциальный источник багов

8:56

Сравнение примитивно, но неужели никто из вас никогда не сталкивался с проблемами сконкатенированных селекторов в коде?

8:58
@cssunderhood знаю, не пользуюсь, думаю что удобно для SPA. Для лендосиков и прочей статики не очь надо имхо.
8:59

Никто никогда не пытался понять результат работы нескольких таких последовательно расположенных «черных ящиков» и исправить под задачу?

9:00
@cssunderhood пока не пользуюсь. Думаю что на новых проектиках уже попробую.
9:00
@cssunderhood любой код - потенциальный источник багов

Справедливо. Мне кажется только, что лучше минимизировать риски twitter.com/Sigiller/statu…

9:01
@cssunderhood ещё как понял, если используешь css модули про бэм можно забыть раз и навсегда. Так ли это?

Одним из аргументов к использованию CSS Modules упоминают стремление уйти от БЭМ, да twitter.com/Sigiller/statu…

9:03

Я никогда не понимал проблем с неймингом БЭМа. Кого вообще волнует длина селектора? Или кто-то думает, что она серьезно влияет на трафик?

9:04
@Sigiller @cssunderhood как раз писал про CSS-модули в этом контексте
habrahabr.ru/post/270103/
9:15

БЭМ – это не столько про изоляцию, сколько про вменяемое описание сущностей. Изоляция – просто частное следствие из этого

9:25

Вы же не загоняетесь написать «главная неактивная кнопка»? В чем проблема написать main-button __disabled?

9:27

Проблема написать лишние несколько букв ничто в сравнении с отсутствием отражения сущностного подхода в представлении

9:28

Брожения по коду в духе «Так, кнопка.Кнопка у друга.Ага, кнопка поделиться у друга в ленте» дольше, чем написать .friend-feed-reshare-button

9:32

Так что, господа, извините, но утверждение про «когнитивный диссонанс» в вышеупомянутой статье я принципиально не разделяю

9:34
@cssunderhood Проблема БЭМа не в этом, а в том, что работа компьютера перекладывается на человека. CSS-модули этой проблемы решены.

И с утверждением, что оперирование сущностями – работа компьютера, тоже. Особенно при работе с чужим кодом mobile.twitter.com/sapegin/status…

9:36
@cssunderhood я на текущем проекте отказался от минификации JS, потому что все скрипты меньше самой маленькой картинки

Минификация – сложный отдельный кейс. Клёво, если вы понимаете, как она работает внутри mobile.twitter.com/rimmer333/stat…

9:39
@cssunderhood ЦСС-модули – это хорошо и удобно. Я считаю 👍 @jsunderhood
9:42

Некоторое время назад в ok тоже ленились писать селекторы полностью. В итоге – сотни селекторов мертвого забытого кода, недели на вычистку

9:44

Я осознаю что, вероятно, с CSS модулями такого не будет, но согласитесь, это же просто очередной костыль до прихода Shadow DOM

9:46

Что потом происходит с костылями? Их выпиливают. Долго и с болью, потому что вросло. Или не выпиливают, и остается мертвым грузом

9:47

Вы видели костыли для Shadow DOM в Angular 2? они там генерируют уникальные атрибуты и к ним привязывают стили вида [scope1] .classname

9:49

Может быть, они и знают что делают, но я лучше дождусь нормальной нативной изоляции, чтобы не словить сайд-эффектов сейчас

9:50
@cssunderhood да, и это офигенно.
9:51

Вот вы говорите, проблемы изоляции. Если у вас в разметке хозяйничает чужой код, или вы внедряете чужой html «насквозь», проблема не в css

9:53

Хотите изоляции – берите iframe. Там уже все проблемы с безопасностью решили до вас. Посмотрите, как сделаны «родные» кнопки соцсетей

9:54

В ok часть рекламы приходит в виде чужой разметки с изолированными стилями. Как-то с ними работать, достилизовывать, чинить просто кошмар

9:56

Хотите чужой контент? Забирайте данные через API, шаблонизируйте и стилизуйте у себя. Больше контроля, меньше багов, больше денег

9:58
@cssunderhood CSS-модули вообще не про изоляцию ;-)

Как же не про изоляцию? Вон там в статье написано про проблему глобального пространства имен mobile.twitter.com/sapegin/status…

9:59

Пусть я могу быть не прав, но это очень круто, что пошел какой-то фидбэк от разных людей и дискуссия. В этом смысл нашего андерхуда

10:02

Я прервусь на N часов [потому что отпуск], а вы пока попробуйте меня убедить использовать CSS Modules,и расскажите, зачем вам postcss вообще

10:05
@cssunderhood Уникальность имён и изоляция стилей не одно и то же. CSS-модули только про первое.
10:08
@cssunderhood CSS-модули вообще не про изоляцию ;-)
10:08
@cssunderhood PostCSS — фреймворк для изменении CSS. Сам он не нужен, но позволяет просто создавать крутые инструменты
10:08
@cssunderhood postcss только начал использовать. Пока что в нем только stylelint и автопрефиксер
13:51
@IgorDTP @cssunderhood @meuwka Autoprefixer, cssnext, Stylelint, postcss-inline-svg
13:51

CSS Modules у нас нет, и убедительных реплаев с конкретными кейсами к использованию я не увидел,а вот postcss у нас в двух местах используют

13:54
@cssunderhood у меня студентка написала курсач на postcss для выявления списанного кода

!!! ссылку в студию, если можно mobile.twitter.com/olmokhov/statu…

13:56

У нас есть своя недозаоперсорсенная спрайторезка, работающая на аннотациях. Не могу показать актуальную версию, к сожалению

13:58

Я не её автор, так что не знаю, насколько оправдан внутри неё postcss, но наверное да. Ну и автопрефиксер еще, да. Хотя тут был случай

14:00

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

14:02

Вообще это тема для размышления, если из нескольких десятков миллионов людей в сутки была только одна жалоба на отсутствие анимации

14:03

Жалоба была от пользователя браузера Maxthon, это если кто не знает, такой хромообразный [теперь] зверь

14:05

Вообще идея какой-то работы с AST клёвая, и у нас есть люди, которые пытаются работать с postcss для прод-задач, но пока не очень активно

14:10

Просто я понимаю проблему производительнсти обработки большого объема кода последовательностью операций над деревом, но в студийном проекте

14:13

Поэтому я хотел ваших примеров, но пореплаило мне всего пара человек. Может, еще успешные кейсы?

14:15

На самом деле у меня был личный негативный опыт работы с обработкой css. Правда, я не использовал postcss, может быть, дело в этом

14:32

В ok периодически возникают пожелания сделать какой-нибудь инструмент дизайнерского толка. В разных целях. Например, демонстрация прототипов

14:34

В рамках одного из таких проектов я пытался построить из исходного кода все возможные состояния компонента. У меня был css и html на входе

14:35

Да, разумеется, я что-то там собрал на основе описания модификаторов в css, матчинга с разметкой, но полученный результат был весьма слаб

14:37

Если кто-то будет собирать у себя подобное, я очень рекомендую избегать использования сокращенных модификаторов — создают неопределенность

14:38

Что-то в таком ключе, если хотите поплеваться github.com/sourcejs/lego/…

14:41

Пока я буду рассказывать про наши последние эксперименты по упрощению жизни дизайнерам, расскажите, занимаетесь ли вы подобным? Как успехи?

14:43
@cssunderhood Только обычный стайлгайд: github.com/sapegin/react-…
14:45

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

14:46

В общем, действительно сложно помнить все вариации, комбинации, контекстные изменения на портале,даже для примитивных элементов вроде кнопок

14:47

Поэтому они попросили тул,который привозил бы им в скетч всё актуальное,а они бы из этого делали макеты.Меньше разнообразия,больше строгости

14:49

Ну, мы им что-то подобное собрали, конечно — на основе спецификаций компонентов в @SourceJS и набора тестовых данных для шаблонизации

14:51

Был написан дополнительно плагин для Sketch на чем-то специфичном,который принимал данные заданного формата,которые я как-то готовил из спек

14:53

Идея от которой отталкивались — как-то сделать браузер из скетча. Оставили работу только по отрисовке, калькуляцию лейаута делали на сервере

14:55

В целом — загоняли в фантом шаблон, данные, стили, как-то всё сочетали, снимали computed styles и приводили их к оговоренному формату

14:56

С точки зрения фантома computed styles псевдоэлементов имели отличия от «нормальных» узлов, соответственно были нюансы по расчету их свойств

14:58

Самым простым вариантом мне показалась замена псевдоэлементов на элементы в реалтайме с применением описанных свойств без честного парсинга

15:02

С точки зрения скетча мы просто перерасчитывали все слои на абсолютное позиционирование и сравнительно без проблем отрисовывали результат

15:04

Где-то попутно возникла потребность в «дообработке» значений стилей — например, перевода процентных величин в абсолютные

15:08

Вся эта собранная конструкция в принципе неплохо работала на несложных шаблонах, хотя браузерный рендер, конечно, в деталях отличался

15:11

Конец истории таков, что, кажется, заказчик в лице дизайнеров забыл про неё раньше, чем мы доделали её до какого-то вменяемого уровня

15:13

И, на самом деле, вообще неочевидно, нужны ли подобные инструменты для облегчения взаимодействия разработчиков и дизайнеров

15:14

Есть какое-то количество инструментов прототипирования. Протеин есть, из последних — но я не слышал, чтобы кто-то это внедрял, кроме авторов

15:16

Вообще у меня ощущение, что модных инструментов больше, чем нужных. И используют их так же — чтобы в резюме написать, что, мол, пользовал

15:18

А мне кажется — решение под задачу нужно подбирать, а не по моде. Я последнюю халтуру вообще на голом css писал и мне было не тесно

15:19

Без всяких сборок, линтеров и вот этого всего обвеса. Что там верстать-то, в лендингах — несколько десятков блоков с модификаторами

15:21
@cssunderhood параллаксы, кастомные прокрутки, модальные окна, формы, кастомные графики и чарты + это всё в адаптив... ну а так вообще да...
15:26

Кто просил ссылки про A/B — разбирайте habrahabr.ru/post/242701/ nngroup.com/articles/putti…

15:29
@cssunderhood У меня еще и года нет, как занимаюсь версткой, но первые 4 месяца так и было. Проблем не возникало.
15:29
@cssunderhood resume-driven development, есть такое
15:32
@alpengol @cssunderhood голый css имеет смысл использовать если в дальнейшем не будут добавляться правки и/или новые фичи

Вообще не вижу никакой связи между голым css и правками/фичами twitter.com/NUM13RU/status…

15:33

Давайте вот что. Напишите, какие инструменты вы считаете излишними, в каком контексте и почему?

15:34
@alpengol @cssunderhood Голый css это так секси! Мне нравится.
15:35
@cssunderhood по сравнению с препроцессорами, его труднее поддерживать. Из простого: поменять медиазапросы или брэндовый цвет по всему сайту

Сколько здесь людей, которые реально меняли полностью брендовый цвет по всему сайту одной переменной? twitter.com/NUM13RU/status…

15:41

Есть набор аргументов в пользу препроцессоров, которые мне всегда казались синтетическими. Генерация сетки циклами и переменными, к примеру

15:42

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

15:43
@cssunderhood Кстати, TOP 1 в списке аргументации ЗА препроцессоры

В моём представлении нельзя просто поменять брендовый цвет в переменной и пойти домой. Все равно проверять вхождения twitter.com/DenisZavgorodn…

15:48

@cssunderhood так в чем тогда выигрыш в сравнении с обычной полнотекстовой заменой?

15:48
@cssunderhood в читабельности

У нас есть переменная $black со значением #333. Нет, не смешно twitter.com/alexfedoseev/s…

15:59

@cssunderhood да, мы все знаем, что называть переменные так глупо, и селекторы — глупо, но иногда такое просачивается, и потом не убрать

16:00

@cssunderhood это бывает даже у умных джавистов, true story pic.twitter.com/jj9lxBXguZ

16:06
@cssunderhood ну с такими переменными без препроцессоров лучше, согласен
16:07
@cssunderhood переменные оказываются очень полезными в таких ситуациях: pic.twitter.com/lfDvR4CSRw
16:13
@cssunderhood переменные оказываются очень полезными в таких ситуациях: pic.twitter.com/lfDvR4CSRw

Я с этим аргументом полностью соглашусь. Вот бы по CSS Modules мне бы так же хорошо аргументировали twitter.com/NUM13RU/status…

16:14
@cssunderhood меняли
16:17
@cssunderhood обычно решается через промежуточную переменную: $gray: #333; $bodyTextColor: $gray;
16:19
@cssunderhood меняем через darken, lighten или их аналоги
16:19
@cssunderhood а что про CSS modules? Я их люблю и готов защищать если чо))

Я хочу конкретные кейсы, где без них совсем плохо, а с ними совсем хорошо twitter.com/dimaip/status/…

16:21
@cssunderhood описал вот как мы их на проекте используем. Мне больше всего нравится @value в них: github.com/neos/neos-ui/w…
16:25
@cssunderhood т.е. решение глобального скоупа переменных в Sass: ты точно знаешь, от чего зависит твой компонент, и можешь его изолировать
16:26
@cssunderhood мы кстати оставили и БЭМ нэйминг вместе с css modules: github.com/neos/neos-ui/w…
16:29
@cssunderhood перед использованием переменной ее нужно эксплицидно импортировать, это можно статически анализировать и проч.
16:31
@cssunderhood Добавляет строгости и проч. В реальном проекте, где много народу, очень помогает
16:31
@cssunderhood но самый большой профит, когда большую часть реюза стилей переносишь на уровень Реакт компонентов, а не на CSS классы
16:45
@cssunderhood риск нечаянно переопределить "чужой" класс в разы выше, чем что CSS modules сломаются. И это кстати будет труднее заметить
16:45
@cssunderhood но самый большой профит, когда большую часть реюза стилей переносишь на уровень Реакт компонентов, а не на CSS классы

А если у меня нет реакта? twitter.com/dimaip/status/…

16:45
@cssunderhood Используем уже довольно давно. После css-modules невозможно вернуться к обычному css, да и к БЭМу тоже.
17:46
@cssunderhood @dimaip как нет реакта? О_о

Сейчас расскажу вам про наш сервер-сайд рендеринг (предлагали к обсуждению утром) [без реакта] twitter.com/DenisZavgorodn…

17:49

Сервер-сайд рендеринг, как я понял, упоминался в качестве «спорного» подхода, и тут я в немодном/невыгодном положении — буду его защищать

17:53

Сервер-сайд у нас на java, я упоминал. Серверного рендеринга на реакте, изоморфности у нас нет и не будет точно еще какое-то время

17:55

html генерируется внутренним фреймворком, суть работы которого я раскрывать не буду, чтобы мне потом не выгнали за разглашение know how

17:56

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

17:58

Шаблонизаторы я трогал в основном на клиенте, так что громкость заявления можно немного приглушить. Всё равно, если привыкнуть, оч. удобно

17:59

Средняя по ok точка зрения такова: затраты на генерацию, доставку и отрисовку с сервера меньше, чем на всё то же на клиенте. Типа, проверяли

18:01
@cssunderhood неужто даже @bemxjst?)

Не могу сходу найти примеры шаблонов. У нас — честный человекопонятный xml, расширяемый кастомными тегами twitter.com/dimaip/status/…

18:03

Естественно, утверждение про скорость генерации/доставки/отрисовки выглядит спорным, поэтому каждый приходящий js-разработчик говорит «фи»

18:05

В общем, если не отклоняться от css-тематики и не обсуждать нашу борьбу с gwt, пока это утверждение никто доказательно не опроверг

18:07
@cssunderhood Интересно было бы увидеть числа. Почти любая страница может быть отрендерена на клиенте за 20-50 мс без учета загрузки данных

Числа я не готов. Но как минимум серверсайд приезжает с данными. Дальше можно обсуждать активацию хуков и грустить twitter.com/dmitryshimkin/…

18:09

Зато я могу точно сказать, что серверсайд отлично решает проблему версионирования компонентов без какой-либо просадки по производительности

18:10

А еще серверсайд хорошо решает проблему локализации и хорошей синхронной раскатки изменений на странице. У нас не совсем глупый рендер, да

18:12

Естественно, страничка перерендеривается частями, там у неё есть ajax-транспорт, и вот значит оно плюётся обновлениями по запросу или само

18:13

И в целом, для того, чтобы нарисовать ленту, которая может содержать в себе _много_ разных шаблонов для разных событий, такой подход хорош

18:15
@cssunderhood А он умеет отдавать чанками? Critical path, все дела.

Не очень понял, но ответ да, потому что он, кажется, умеет вообще всё twitter.com/ruGreLI/status…

18:16

Выходит,что вместо того,чтобы как-то забирать шаблоны на клиент, их как-то кешировать, версионировать, лишнее выгружать мы просто не паримся

18:18

У нас есть разделы, которые живут полностью «на клиенте». Это, например, музыка, это исключение, и это в текущей идеологии будет переписано

18:22

Есть альтернативная идеология, но тут начинаются инсайды, это я пока не готов рассказывать. Так что — мы живем сервер-сайд рендерингом!

18:23

В ok есть несколько проектов — «веб»версия, «моб»версия, и два платежных модуля — «веб» и «моб», соответсвенно. Всё +- на одних технологиях

18:27

И если «основные» версии умеют там как-то обновляться частями, то «платежки» обновляются втупую полностью.Кто-то в iframe, кто-то standalone

18:28
@cssunderhood а чем тебе не понравилось «автоматический БЭМ, надёжнее и меньше о нём надо думать»?

Я пока не очень осознал эквивалентность методологии и способа «автономизации» компонента twitter.com/andrey_sitnik/…

18:32
@cssunderhood префиксров ещё много, тот же user-select, но это правда, что большинство *популярных* префиксов ушло
18:33
@cssunderhood «БЭМ как именование» защищает от конфликта селекторов и разной их селектиности — CSS Modules делает тоже самое, но автоматом

Так скажу—вообще давно (несколько лет) не сталкивался с проблемой пересечения стилей,наверное, поэтому сложно понять twitter.com/andrey_sitnik/…

18:35

@cssunderhood то есть вот реально, сколько работаю в ok — никогда не видел ни у кого таких проблем [на всём нашем мегабайте css-кода]

18:36
@cssunderhood у кого как, я тут тоже случайно отломал его, и заметили сразу все.
18:45

В контексте истории про автопрефиксер должен сказать, что мы поддерживаем на вебе ie10+. Потому что мы — Можем, да.

18:48
@cssunderhood а что для ie < 10 ?

Принудительный редирект на мобильную версию, но там какой-то смехотворный процент twitter.com/c01nd01r/statu…

18:51
@cssunderhood аналогично. Да здравствуй новые технологии!
18:51

Вообще мобильная версия ok значительно отличается от «web» в плане клиентских технологий, говорят, в лучшую сторону, но я там не эксперт

18:55

Хорошо сегодня поговорили. Убедили меня использовать переменные в препроцессорах вот. Завтра буду собирать всякую мелочь — предлагайте темы

19:02
@cssunderhood для верстки не годится вообще, а приложения всякие писать клево ж.
19:35
А подскажите плагин для grunt/gulp который бы собирал все стили, используемые на странице в отдельный файл @cssunderhood
22:14

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

@aelyseev Все оказалось проще: gulp-uncss Может я задачу неверно описал. Но, помог мне uncss @cssunderhood
8:31
@cssunderhood Знаю, но не использую. Пробовал баловаться, показалось, слишком неочевидно работает, теряешь контроль над оптимизацией
8:32
@cssunderhood как так? Эта проблема возникает всегда.

Сокращайте переопределения, переиспользуйте компоненты, рефакторьте спорный код вовремя и всё будет хорошо twitter.com/BestFreelancer…

9:00
@cssunderhood Из одного проекта в другой слайдер, а там уже есть другой. Вот вам и конфликт стилей

В нашем случае их обобщают до одного компонента, унифицируют интерфейс, определяют параметры twitter.com/BestFreelancer…

9:28

@cssunderhood заодно все возникающие «слайдерные» проблемы, расширение функционала затем происходит в одном месте, выходит качественнее

9:29

С точки зрения обобщения есть конфликтующие точки зрения—«компонент должен быть универсален» и «не надо городить комбайн». Я в первом лагере

9:32

Если из-за обобщения компонент чрезмерно усложняется, это повод пересмотреть вообще все подобные реализации. Пользователь хочет единообразия

9:33

Убежден, что «в сложном компоненте мне не разобраться в параметрах» — проблема не компонента/его отображения/поведения, а документации

9:36
Давайте узнаем состояние в отрасли: «Я верстаю / в моих проектах по-дефолту…»
Plz RT.

Предлагали обсуждать * box-sizing. Вот итоги сравнительно свежего опроса, а я пока подумаю, как с этим жить дальше twitter.com/ihorzenich/sta…

9:41

box-sizing и прочий normalize мне совсем не хочется обсуждать — не вижу значимой специфики. Я просто умею со всем этим работать, и вы тоже

10:34
@cssunderhood а как у вас в OK со временем на обучение? Выделяется, как-то регламентируется?

Давайте лучше про обучение, да twitter.com/DenisZavgorodn…

10:35

В ok все самостоятельные. Никто не стоит за спиной и не предъявляет, что вот сегодня ты час не код писал, а читал какие-то блоги

10:37

С другой стороны, никто не стоит за спиной и не пинает, чтобы ты эти блоги читал. Вообще, любое стояние за спиной оказывается неэффективным

10:38

Но иногда так бывает, что интересы нескольких сотрудников совпадают, и они добиваются выделения времени на обучение чему-то конкретному

10:39

Верстальщики добились курсов по основами java, чтобы не быть совсем уж беспомощными в нашем стеке. Были слухи, что лектор потом был поощрен

10:41

Есть мероприятия образовательного плана, организуемые строго внутри команды — что-нибудь вроде технологического хакатона, не связанного с ok

10:43

Такие мероприятия сложно организовывать — они требуют полного отрыва от работы хотя бы на несколько дней, это нужно как-то обосновывать

10:45

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

10:47
@cssunderhood да, это насущная тема Останавливаться нельзя ни на минуту. А времени нет. Как быть?)

Искать внутри команды самых активных и что-то пилить во внерабочее время. Хотя бы отвечать за это не придется twitter.com/DenisZavgorodn…

10:50

Принудительно тащить лентяев в светлое будущее — неблагодарное дело. Коллеги не могут? Растите с теми, кто может, или сами, иначе увязнете

10:52
Формат наброса не оправдался. Завтра попробуем обсуждать «всё спорное»—от инструментов до сайд-проектов. Вы кого-то:

Хорошо расти можно, обучая других. Местной аудитории, подозреваю, это хорошо известно — 41% учил верстке с нуля twitter.com/cssunderhood/s…

10:55

Проблема в том, как это наставничество хорошо организовать. Я пробовал разные форматы—менторство,чтение лекций в вузе,дипломное руководство

10:56

Личное убеждение — оптимального роста для преподавателя и для студента можно добиться, только заперев их один на один на фулл-тайм проекте

10:58

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

11:00

Хотите вырасти сами? Попробуйте спроектировать и прочитать курс лекций по верстке на семестр.Только потом не жалуйтесь на падание самооценки

11:01

Предполагаю, при системной подготовке лекций вы поймете, что сами много не знаете о своей предметной области, и начнете в себе сомневаться

11:03

Затем,если это лекции в вузе, то вне зависимости от уровня вуза вы вероятно будете не в восторге от активности (и прогресса) ваших студентов

11:04

Кроме того,процент эффективных студентов на выходе,который вы закладывали, исходя из собственного уровня, скорее всего будет ниже ожидаемого

11:05

Если вы после этих трех твитов хотя бы немного усомнились в желании читать лекции, не ходите в вуз, не надо. Лучше попробуйте другой формат

11:06
@cssunderhood не нужно спойлерить )

Ну тут опытом просили делиться, вот я делюсь — мне нравится результат работы примерно каждого десятого студента twitter.com/DenisZavgorodn…

11:08

@cssunderhood из обсуждений выходит, что это хороший показатель, хотя неясно, справедливо ли такое сравнение между дисциплинами

11:09
@cssunderhood Какой хороший совет. Но вот что делать с кодом, которые пишут лентяи?

1) Ревьюить 2) Рефакторить 3) (!) Понять, в лентяях ли причина 4) (!) Понять, объективно ли он плох twitter.com/sapegin/status…

11:11

Лекций про верстку я больше не читаю.Не уверен, что даю полезные и нужные вещи.Раньше говорил—того,кто будет хорошо учиться,оторвут с руками

11:14

Теперь,чтобы оторвали,нужно знать на входе столько разных и сложных особенностей,что я просто не успел бы их вычитать,даже если бы знал все

11:14

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

11:16
@cssunderhood от группы зависит, обычно из человек 20 - от 1 до 3-4 человек. Так что так примерно и выходит. Правда, дисциплина не IT
11:16

Если преподаете,бонус за вашу работу—возможность дать студенту написать самый лучшый диплом на кафедре,чтобы он запомнил,зачем учился в вузе

11:19

Берите не больше одного человека, самого лучшего из группы, не меньше, чем за полгода и никогда не навязывайте ему тему

11:21
@cssunderhood у меня студентка написала курсач на postcss для выявления списанного кода

Я, правда, не очень представляю, про что можно написать хорошую работу о современном css, хотя мне понравилась тема twitter.com/olmokhov/statu…

11:29

Мы дипломы пытаемся про js писать.Пару лет назад demiurg.es/,в этом году техконсультировал по моделированию анонимного p2p на js

11:33
@cssunderhood это шикарно. Моим дипломным руководителем был Java архитектор и он мне кучу полезной инфы дал, за что я ему очень благодарен
11:41
@muhas Мы тут про других лентяев. Про тех, кто не хочет вырасти из первой стадии — medium.com/humans-create-… @cssunderhood
11:41

Вот тут много людей учило верстке. Расскажите, с чего вы начинали курс обучения? Как мотивировали студента? Остался ли студент в отрасли?

11:53

По возможности, избегайте такого при обучении студентов (и на ревью тоже) pic.twitter.com/TgbZNT2Z4w

12:12

Какие-то финальные мысли и ответы на отложенные вопросы обещаю сформулировать в воскресенье

14:57

# Суббота 4 твита

@dimaip вообще инструментов много. но я в последнее время ушел очень далеко от верстки. лучше мне кажется у @cssunderhood спросить.

Лично я инструменты для тестирования визуальных регрессий не трогал,возможно,кто-то из подписчиков что-то посоветует twitter.com/jsunderhood/st…

21:12
@cssunderhood что последние годы ковыряли?

Последнее мероприятие было «не про технологии ok», и я ковырял там WebRTC twitter.com/operatino/stat…

21:14
А кто поможет с картами кода для css разобраться? gulp-sourcemaps+concat+cssmin дают карту кода, которая ... @cssunderhood
21:14
... проходит валидацию, но в браузере неверно подсвечивает файлы @cssunderhood
21:15

github.com

other


@midler