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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood ноуп. скачиваю и смотрю.

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

@cssunderhood О да, все через это проходили. В итоге, заставляешь себя и читаешь самое интересное. Read It Later = Read It Never.

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

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

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

@cssunderhood BEM, SMACSS, CSSModules. Всё!

@cssunderhood структура обычно такая. Комментарии очень редко ставятся, в основном TODO. (media legacy) pic.twitter.com/KVUCzIEfOq

@cssunderhood вот написал, что я хочу от нашего проекта, буду рефакторить потихонечку github.com/PackageFactory…

@cssunderhood как-то так: goo.gl/jM75Yz. Комментарии пишу в случае магии, когда сложно понять без примера.

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

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

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

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

@cssunderhood
Мне когда-то это помогло
thesassway.com/beginner/how-t…

@cssunderhood каждому свое, но я бы советовал sass и его правило 7 к 1

@okunev @cssunderhood глобальный импорт в Less доступен в виде плагина less-plugin-glob. Под капотом все прелести Glob.

@cssunderhood хелп, не могу найти туториал по параллакс эффекту, как здесь 8eight.co.il со всеми этими бургерами. Не подскажете?

уволившись с работы (учитель), подумала: А почему бы не пойти в верстку. И заверте... twitter.com/cssunderhood/s…

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

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

@cssunderhood должны гармонично дополнять друг друга)

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

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

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

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

@cssunderhood Естественно. Это ж одна профессия.

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

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

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

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

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

@cssunderhood спрашивает у меня(!) можно ли что-то реализовать,мы советуемся, ищем прототипы или видео,устно составляем тз вместе и делаем:)

@cssunderhood я пару раз делал их в AE или сам наверстывал в codepen и кидал ссылку

@cssunderhood рисует в after effects, утверждает с заказчиком, а потом присылает мне *.mov
*убейте меня*

@ardshock @GolubevVictor @cssunderhood Дизайнеры, как программисты, делятся по классам. Веб-дизайнеры могли бы верстать. Иллюстраторы - нет

@cssunderhood @napilsya сейчас рисую / верстаю сам, в т.ч. и на фрилансе. Так проще.

@cssunderhood верстка это навык, а не профессия.

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

@cssunderhood по GSAP куча туториолов. На codepen куча примеров, ищи.

@GolubevVictor @ardshock @cssunderhood Господи, это вёрстка должна основываться на дизайне. Никак не наоборот.

@cssunderhood будущее — t-shaped skills

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

@cssunderhood мне очень тяжело учиться в обоих направлениях одновременно, в верстке так и осталась на уровне 3хлетней давности.

.@cssunderhood мы уже затрагивали эту тему, но всё же:

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

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

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

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

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

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

@cssunderhood кстати интересно, кто-то использует в работе тот же @polymer, какие впечатления?

@grim_juz @cssunderhood @polymer @cssunderhood
Я работал с Polymer когда был в версии 0.5, много заморочек были тогда с тем же “vulcanize”.

@cssunderhood почитайте вакансии дизайнеров на загнивающем западе :-)

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

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

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

@cssunderhood трекать время и анализировать. За несколько проектов заметил, что ошибаюсь на 20% — стал умножать сроки на 1.2.

@cssunderhood кросс-навыки экономят ресурсы. Оставили из дизайна лишь стайлгайды, а компоненты из UX сразу переходят в верстку. Хорошо так.

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

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

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

@cssunderhood джун: новое? узнаю! Мидл - ну да слышал, но... сеньёр - работает-не трогай

@cssunderhood мне нравится метод Лебедева, правда он про дизайнеров artlebedev.ru/kovodstvo/sect…

@dcromster @cssunderhood работает, не трогай - это джун.

@cssunderhood по раздутым от самомнения щекам 🐹

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

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

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

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

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

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

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

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

@cssunderhood о, во время! делаю for fun анимированный x-wing из star wars на svg. будет пулять из пушек и мб летать codepen.io/kenzoki/pen/ox…

@cssunderhood было бы хорошо, если сообщество плюнуло ссылочками на толковые статьи по анимации svg (можно на инглише).

Рендеринг всех шрифтов в #chrome 51.0.27. Подскажите, как пофиксить? RT, пожалуйста @cssunderhood @iamspacegray pic.twitter.com/4vRUkMzd35

@cssunderhood джуниор – нет опыта, есть теоретические знания и желание разваиваться; мидл – джун с опытом; сениор – мидл без желания :)

@petrthepig @cssunderhood ссылками ща кинуть не могу, но очень рекомендую полистать твитты @vlh

@petrthepig @cssunderhood можно тут почитать css.yoksel.ru

@cssunderhood а кто-нибудь нашел хак, как использовать css для внешних файлов svg, подгружаемых через <use/> в Chrome?

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

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

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

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

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

На лето @cssunderhood переходит в свободный режим: новый автор будет не каждую неделю, а как придётся. Хотите быть автором — пишите мне.

Обещанные эксперименты с форматом @cssunderhood будут с осени, так как сейчас многие усердно трудятся или отдыхают.