midler

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

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

Всем привет! На это неделе с вами @midler, верстальщик в @Molinos_Ru

9:18

На это неделе я подготовил некоторое количество вопросов и дам некоторое количество ответов =)

9:20

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

9:23

Сам я использую хром Хром, Саблайм и Zenburn. Дальше я затрону эту тему, но в другом ракурсе.

10:18
@cssunderhood Вопрос для теоретиков: что делать когда стоишь перед багом в верстке и не знаешь почему так? Какие методы?

Упрощаем код, удаляем не нужные элементы, тестим в других браузерах, читаем спеки. Постепенно отсекаем лишнее. twitter.com/Copypasting/st…

10:24
@cssunderhood Вопрос для теоретиков: что делать когда стоишь перед багом в верстке и не знаешь почему так? Какие методы?

А вообще поищи как поймать льва(баг) в пустыне(код) =) twitter.com/Copypasting/st…

10:26
После двух недель такого проёба спрашиваем совета у коллег и за 10 минут решаем проблему. twitter.com/cssunderhood/s…
10:28

Расскажу немного кто я.
Учился верстать по "Большой книге css" Девида Макфарленда. Читал её около года, в неспешном режиме.

10:48

Уволившись с работы(инженер) подумал "а почему бы не пойти в вёрстку?"

10:48

В резюме написал что опыта нет, но есть желание. Устроился в компанию где мы делали сайты на потоке(визиточки за 3999 и пр.).
@cssunderhood

10:51

И это здорово прокачало меня. До сих пор считаю такую работу отличным трамплином в профессию. @cssunderhood

10:54

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

10:55

В итоге почти год работаю в Питерской студии Molinos @cssunderhood

10:55

Так же я почти два года являюсь наставником в @htmlacademy_ru. Если интересно то могу о наставничестве в академии @cssunderhood

10:56

Был инженером электросвязи, делал связь между электросчётчиками @c01nd01r @cssunderhood

10:59

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

11:00
@cssunderhood @Copypasting где-то вылез контейнер за viewport. Когда уже отчаился и не понимаешь, что и где - display:none. Поочереди)))
11:00

А когда вы поняли что "верстать это моё", и что чувствовали при этом?

11:03

Я свои первые сайты сделал в 2005 году (2 штуки), но потом начался универ и было не до этого.

12:13

А когда читал Макфарленда, появилось волшебство, когда от одной строчки меняется всё.Я называю это "магия на кончиках пальцев" @cssunderhood

12:15

Под закат рабочего дня давайте поговорим о хранении информации.

16:43

Я складывал всё в разные сервисы. В итоге накопилась пара тысяч с задержками в год. И стало понятно что я делаю что-то не то @cssunderhood

16:43

Но не прочитанная статья остаётся не прочитанной. Каждое не посмотренное видео не станет лучше от того что лежит в закладках @cssunderhood

16:44

В итоге я отписался от всех пабликов и всех рассылок. Читаю только @webstandards_ru и подборку на хабре от @frontender_ua @cssunderhood

16:45

А вы продолжаете закатывать видео в банки и засушивать гроздья ссылок? @cssunderhood

16:45
@cssunderhood ноуп. скачиваю и смотрю.
17:00
@cssunderhood видео смотрю на скорости 2х, если что то интересное, ссылки стараюсь каждый день разгребать накопившиеся, в основном статьи
17:00
@cssunderhood О да, все через это проходили. В итоге, заставляешь себя и читаешь самое интересное. Read It Later = Read It Never.
17:00
@cssunderhood открываю вкладки в мобильной мозилле. Когда накапливается больше 30 начинает тупить, вылетать и садить аккум.
18:08

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

Сегодня давайте поговорим про организацию CSS. Расскажите какими правилами руководствуетесь при создании структуры CSS и написании кода?

9:04

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

9:59
@cssunderhood BEM, SMACSS, CSSModules. Всё!
10:08
@cssunderhood структура обычно такая. Комментарии очень редко ставятся, в основном TODO. (media legacy) pic.twitter.com/KVUCzIEfOq
10:08
@cssunderhood вот написал, что я хочу от нашего проекта, буду рефакторить потихонечку github.com/PackageFactory…
10:08
@cssunderhood как-то так: goo.gl/jM75Yz. Комментарии пишу в случае магии, когда сложно понять без примера.
10:09

Я никогда не использовал CSSModules. Расскажите в чём плюсы, в чём минусы?

10:35
@cssunderhood минусы в не очень удобной интеграции со сторонними библиотеками (через :global {...}). Плюсы: никакой больше бэм-страхоты.
11:31

Мне очень нравится вот эта статья на тему организации css-кода prgssr.ru/development/pe…

13:16

А какие советы дадите человеку, который только сейчас начинает использовать препроцессоры, со всеми плюшками?

15:35
@cssunderhood
Мне когда-то это помогло
thesassway.com/beginner/how-t…
15:42
@cssunderhood каждому свое, но я бы советовал sass и его правило 7 к 1
15:42
@cssunderhood совет не использовать препроцессоры, а использовать модули @PostCSS

Я включаю @PostCSS в понятие препроцессоров. twitter.com/d_markovskiy/s…

15:45
@cssunderhood если коротко то все стили раскладываются по полочкам и потом компилятся в один main.css sass-guidelin.es

Не знал что этот паттерн так называется. Вот более точная ссылка sass-guidelin.es/#the-7-1-patte… twitter.com/s_martynyuk/st…

15:46

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

@okunev @cssunderhood глобальный импорт в Less доступен в виде плагина less-plugin-glob. Под капотом все прелести Glob.
9:02
@cssunderhood хелп, не могу найти туториал по параллакс эффекту, как здесь 8eight.co.il со всеми этими бургерами. Не подскажете?
9:02
уволившись с работы (учитель), подумала: А почему бы не пойти в верстку. И заверте... twitter.com/cssunderhood/s…
9:03

@cssunderhood @Fabian_Lagrange Ссылка на плагин не та =) github.com/htdt/parallax

9:33

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

9:37
@cssunderhood должны гармонично дополнять друг друга)
11:01
@cssunderhood с дизайнером нужно дружить, тогда ваша работа будет приятней:) особенно в мелочах это может проявиться сильно
11:01

А должен ли дизайнер уметь верстать? А верстальщик понимать в дизайне?

11:33
@cssunderhood на западе дизайнеры верстают ) понимать верстку нужно, чтобы диснейленд не рисовать. Верстальщик - насмотренность на behance?)
11:36

Да, у нас произошло разделение этих профессий. Сейчас верстальщики больше из технарей ребята @PMarinchenko @cssunderhood

11:42
@cssunderhood Естественно. Это ж одна профессия.
11:42
@cssunderhood Дизайнеру уметь верстать не помешает. Верстальщик обязательно должен понимать в дизайне.
11:42

Как думаете, в будущем, обьъединение професии будет? Или будет полное разделение?

11:43

Да не, ты передёргиваешь. Просто функции вертальщика должны поделить верстальщик и программист @ardshock @GolubevVictor

13:03

Тьфу! Отвлекли. Дизайнера имел в виду. @ardshock @cssunderhood @GolubevVictor

13:08

Ладно, это всё холивар.
Лучше скажите, как Дизайнер передаёт вам анимации в вёрстку?

13:09
@cssunderhood спрашивает у меня(!) можно ли что-то реализовать,мы советуемся, ищем прототипы или видео,устно составляем тз вместе и делаем:)
13:46
@cssunderhood я пару раз делал их в AE или сам наверстывал в codepen и кидал ссылку
13:54
@cssunderhood рисует в after effects, утверждает с заказчиком, а потом присылает мне *.mov
*убейте меня*
13:55
@ardshock @GolubevVictor @cssunderhood Дизайнеры, как программисты, делятся по классам. Веб-дизайнеры могли бы верстать. Иллюстраторы - нет
13:55
@cssunderhood @napilsya сейчас рисую / верстаю сам, в т.ч. и на фрилансе. Так проще.
17:28
@cssunderhood верстка это навык, а не профессия.
17:42

Меня ещё попросили узнать best practice анимаций и GreenSock. Так что если есть чем поделиться, пишите!

17:48
@cssunderhood по GSAP куча туториолов. На codepen куча примеров, ищи.
19:44
@GolubevVictor @ardshock @cssunderhood Господи, это вёрстка должна основываться на дизайне. Никак не наоборот.
19:44
@cssunderhood будущее — t-shaped skills
19:44

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

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

Как вы насчитываете сколько времени нужно для задачи?

9:05

Я не попадаю в свои оценки =)
Делю макет на блоки и оцениваю их. Но всегда что-то всплывает. Может посоветуете что-нибудь?@Copypasting

9:14
@cssunderhood @Copypasting умножай на 2 или 3 — в зависимости от объема работ. На мелких проектах можно добавлять 50% от суммарной оценки
9:54

В последнее время мне очень интересны Веб-компоненты. Но в сообществе это встречается без воодушевления.
Как думаете взлетит или нет?

10:58

Веб-компоненты это набор стандартов по созданию "собственных тегов". @xCubek

11:08

Состоит из 4-ёх спецификаций: шаблоны, пользовательские элементы, теневой DOM и html импорт @xCubek

11:09
@cssunderhood кстати интересно, кто-то использует в работе тот же @polymer, какие впечатления?
13:55
@grim_juz @cssunderhood @polymer @cssunderhood
Я работал с Polymer когда был в версии 0.5, много заморочек были тогда с тем же “vulcanize”.
14:00
@cssunderhood почитайте вакансии дизайнеров на загнивающем западе :-)
15:20

Вопрос от знакомого:
Какие модные технологии вы применяете в команде?
И с какими сложностями сталкиваетесь при внедрении?

16:34

Если за последний час ничего не поменялось, то вроде как @sapegin

16:45
@cssunderhood есть более обобщённое понятие — разработчик интерфейса. Это и дизайн, и вёрстка, и динамика. Кажется, это >> правильный подход
20:05

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

@cssunderhood трекать время и анализировать. За несколько проектов заметил, что ошибаюсь на 20% — стал умножать сроки на 1.2.
9:13
@cssunderhood кросс-навыки экономят ресурсы. Оставили из дизайна лишь стайлгайды, а компоненты из UX сразу переходят в верстку. Хорошо так.
9:13

А в чём разница и какие обязанности у верстальщика, веб-мастера, веб-разработчика, фронтендера, разработчика интерфейсов, веб-технолог?

9:45
Создатель CSS Хокон Виум Ли из Opera расскажет зачем изобрели CSS на PiterCSS №5 17 июня — pitercss.timepad.ru/event/340787/ pic.twitter.com/blIOQnTIQ8
10:09

Как различать джуна, мидла и сеньора?

13:04
@cssunderhood джун: новое? узнаю! Мидл - ну да слышал, но... сеньёр - работает-не трогай
13:21
@cssunderhood мне нравится метод Лебедева, правда он про дизайнеров artlebedev.ru/kovodstvo/sect…
13:21
@dcromster @cssunderhood работает, не трогай - это джун.
13:21
@cssunderhood по раздутым от самомнения щекам 🐹
13:21

Что работадатель хочет от верстальщика? А что от фронтендера? По каким критериям отбирают людей?

15:17
@cssunderhood мидл это человек способный делать типичные проекты без подсказок.
15:29

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

@cssunderhood тут статья на эту тему недавно вышла krekotun.ru/ui-developer-s…
9:33

Давайте про "рисование на CSS"(и на SVG). На codepen.io много демок "нарисованных" кодом на CSS или SVG. Как вы к этому относитесь?

9:46

Среди нас наверняка есть люди которые это делают.
Расскажите о том как вы это делаете? Придумываете идею заранее или делаете сразу?

9:47

С какими трудностями сталкиваетесь? И что чувствуете в процессе?

9:47
@cssunderhood svg няшно, я рисовал, больше того, яндекс индексит svg, ну карты по крайней мере и наливает траф
9:59

И покидайте примеры крутых демок.

10:01
@cssunderhood о, во время! делаю for fun анимированный x-wing из star wars на svg. будет пулять из пушек и мб летать codepen.io/kenzoki/pen/ox…
12:22
@cssunderhood было бы хорошо, если сообщество плюнуло ссылочками на толковые статьи по анимации svg (можно на инглише).
12:22
Рендеринг всех шрифтов в #chrome 51.0.27. Подскажите, как пофиксить? RT, пожалуйста @cssunderhood @iamspacegray pic.twitter.com/4vRUkMzd35
12:24
@cssunderhood джуниор – нет опыта, есть теоретические знания и желание разваиваться; мидл – джун с опытом; сениор – мидл без желания :)
14:57
@petrthepig @cssunderhood ссылками ща кинуть не могу, но очень рекомендую полистать твитты @vlh
14:57
@petrthepig @cssunderhood можно тут почитать css.yoksel.ru
16:02
@cssunderhood а кто-нибудь нашел хак, как использовать css для внешних файлов svg, подгружаемых через <use/> в Chrome?
16:18

Вспомнил, есть же вот такая книга cssanimationspocketguide.com
@petrthepig

16:20

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

• Джуниор — ты пользуешься опенсорсным решениями;
• Мидл — создаёшь опенсорные решения;
• Сеньор – твоими продуктами пользуются остальные.

Не все люди пишут опенсорс. twitter.com/Realetive/stat…

9:35
@cssunderhood возник вопрос по поводу разных тем для сайта. Поделитесь опытом? Как лучше через класс или отдельный файл и т.п. (sass)
10:32

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

12:59

Я не думал что вести твиттер так сложно. В голове всё было совсем не так =)
Перед началом я подготовил 27 тем, но не написал даже половины.

13:00

Спасибо за обсуждения.
Кушайте кашу, слушайтесь маму и верстайте с удовольствием.
С вами был Серёдкин Андрей aka @midler. Пока!

13:00
На лето @cssunderhood переходит в свободный режим: новый автор будет не каждую неделю, а как придётся. Хотите быть автором — пишите мне.
18:32
Обещанные эксперименты с форматом @cssunderhood будут с осени, так как сейчас многие усердно трудятся или отдыхают.
18:32

other