Привет! С вами на этой неделе @mishcherin

Меня зовут Даня, я живу в Санкт-Петербурге и последние полтора года верстаю в Одноклассниках.

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

Мне 26 лет, в Петербурге я чуть больше года, до этого жил, учился и работал 9 лет в Москве, ну а родился и закончил школу в Курске.

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

До этого, живя в общаге, работал админом (а заодно и монтажником СКС) в местной локальной сети и эникейщиком в различных госучреждениях.

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

Лето 2010го выдалось довольно странным, я долго не мог найти работу и попытался устроиться хотя бы курьером в страховую компанию.

Курьером меня не взяли – слишком неформально выгляжу, сказали, у них там клиенты-деньги-договора, пришлось стать верстальщиком. :)

Я устроился работать в небольшую местную веб-студию помощником SEO-специалиста и контент-менеджером, и к началу 2011 начал немного верстать.

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

За это я до сих пор ей очень благодарен, кстати. Настя, привет! :)

Ну а потом я просто читал документацию и много смотрел в DevTools (на тот момент в Firebug, первое время основным рабочим браузером был FF).

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

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

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

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

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

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

Это помогло мне немного переосмыслить отношение к работе и посмотреть на него еще и со стороны дизайна и задач, решаемых бизнесом.

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

Я жил не в самой Москве, а в небольшом и прекрасном Зеленограде (он вроде бы тоже часть столицы, но до него 40 минут на автобусе)

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

Когда встал выбор – тратить на дорогу до работы по 2 часа в один конец, перебираться внутрь МКАДа или уехать в Петербург, выбрал последнее.

В этом плане с ok.ru повезло – у нас три офиса (Москва, Петербург и Рига), поэтому перевестись из Москвы в Петербург было несложно.

И тут мы плавно подходим в сегодняшней основной теме. После перерыва расскажу про процессы и работу в Одноклассниках, задавайте вопросы. :)

.@dmitry_dok не мы такие, город такой. :)

.@meuwka @sapegin я тоже старался проводить время с пользой и читать что-то или смотреть доклады, но на этом плюсы для меня заканчиваются

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

@cssunderhood Как-то стояли в пробке от Зелика до Москвы. Часа 2. Пробки это зло. А в целом Зелик произвел приятное впечатление.

.@arseniydmitriev однажды стоял там в пробке 5 часов.
пробок хватает и в Петербурге, это одна из причин, по которой я предпочитаю велосипед

.@arseniydmitriev мы еще вернемся к этой теме на неделе.

@cssunderhood Иногда комбинирую рабочий день с такой музыкой: itunes.apple.com/ru/podcast/art…

Итак, про процессы в ok.ru в целом и в нашей команде верстки в частности.

Я отвечаю за верстку почти всех монетизирующих сервисов компании, кроме того так или иначе отвечаю за стайлгайды и взаимодействие с дизайном

Помимо этого вместе с другими коллегами участвую в процессе ревью верстки. Об этом расскажу поподробнее чуть позже.

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

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

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

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

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

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

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

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

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

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

Там же делимся интересными новостями, ссылками, чем-то полезным, там же задаем вопросы и принимаем решения.

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

@cssunderhood, картинка по запросу «отвечаю за вёрстку всех монетизирующих сервисов» pic.twitter.com/HagpY6RPBI

Стараемся поддерживать её в актуальном состоянии и потихоньку движемся в сторону полноценного компонентного подхода в UI

БЭМа у нас нет, мы придерживаемся нами же и созданной MCSS operatino.github.io/MCSS/

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

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

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

@sapegin superuser.com/questions/2716…

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

В этом плане наша методология очень похожа на БЭМ, да.

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

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

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

Делать прототипы в большинстве случаев нужно. На этом этапе можно «дешево» продумать все нюансы будущей фичи.

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

Перед тем как попасть в вёрстку, дизайн также проходит так называемое «ревью стандартов». На этом этапе смотрит на него уже наша команда.

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

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

«Продавить» получается далеко не всегда, часто запуск фичи важнее этих наших стайлгайдов, на это конечно тоже приходится делать поправку.

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

Благодаря наличию библиотеки компонентов нам практически не приходится работать с макетами. Еще один плюс в копилку этого подхода.

Обычно это просто спека в нашей внутренней вики, где расписаны все стейты компонента, отступы, цвета и прочее.

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

...либо сначала готовим стандарт вёрстки, собираем прототип и уже потом запускаем его в работу.

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

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

В целях ускорения разработки ревью верстки происходит обычно на этапе создания PR вместе с FLR и LR бекенда.

Кстати, в @jsunderhood на этой неделе как раз про тестирование фронтенда, подписывайтесь, если вдруг еще не.

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

@cssunderhood, а как с автоматизацией ревью кода? Линтеры-шминтеры. От машины не так обидно получать упрёки.

.@pepelsbey начали недавно двигаться в эту сторону, линтеры-шминтеры пока натравливаем в тестовом режиме.

.@pepelsbey к тому же далеко не везде их применишь, особенно если не про код-стайл речь.

@cssunderhood покажу кусочек рабочей спеки, которая обычно приходит на вход верстальщику от наших дизайнеров. :) pic.twitter.com/uV9DFsDkCG

@cssunderhood true

@cssunderhood Я один ничего не понял из этих аббревиатур?

@brainsapiens я тоже))) @cssunderhood

.@ShtirliZ_ @brainsapiens PR - pull request, FLR - first line review, LR - lead review :)

@cssunderhood Дело полезное — вот что думаем.

@cssunderhood @sapegin две маловато будет... pic.twitter.com/oF4XwcZoAs

@cssunderhood ниче не ясно? Что такое спека? И что за прямоугольнички?

.@ardshock спекой называем спецификацию – документ с набором экранов, состояний, вот это всё. прямоугольники здесь - контентные области.

@cssunderhood придераетесь ко всем участкам кода с вопросом: "почему именно так?"

.@ardshock конечно нет, но иногда некоторые решения вызывают определенные вопросы.

@cssunderhood много спорите на этом этапе или по принципу большинства?

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

@ardshock @cssunderhood скорее всего только к тем, которые можно решить несколькими способами и выбранное решение не очевидно

.@li_rian @ardshock да, всё так.

@cssunderhood зависть)

@cssunderhood а assets сами режете?

.@exdeniz нарезку тоже делает дизайнер, мы обычно только оптимизируем графику да спрайты клеим (автоматически, конечно)

@cssunderhood @li_rian не использование сеток это нубство?

.@ardshock @li_rian скорее недальновидность, без сетки рано или поздно ваш дизайн станет хаотичным и не поддающимся никакой логике.

@cssunderhood в каком виде дизайнеры передают спеки?

.@sc0rp1d пока что страница в нашей корпоративной вики. сейчас начали активно внедрять Zeplin для этих целей.
zeplin.io

@cssunderhood @li_rian в смысле в одном проекте или в нескольких станет хаотичным?

.@ardshock @li_rian в том проекте, где в дизайне не используется сетка. :)

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

smashingmagazine.com/2007/04/design…

@cssunderhood рекомендую cmsmagazine.ru/library/items/…

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

@cssunderhood, увидел ссылку на зеплин. Какой процент использующих скетч, дизайнеров, конечно?

.@helloilya 100% :) завтра поговорим об этом подробнее.

@yustovskiy @cssunderhood если что, этот берет любые ;) everythingfonts.com/font-face

@meuwka @cssunderhood а как вы относитесь к вертикальному ритму?

.@MarginoRu @meuwka сугубо положительно, особенно когда речь идет о сайтах с большим количеством контента, статей и прочего текста.

Для расчета размера шрифтов и интерлиньяжей в px использовал в своё время вот этот инструмент: gridlover.net/app/
Может, есть и другие?

Вообще, с появлением препроцессоров работать с вертикальным ритмом в вёрстке стало значительно проще, особенно если вы используете em

@helloilya @cssunderhood я дизайнер и не могу пересадить своих верстальщиков на Симпли (типа зепелина). Подскажите, как аргументировать,плиз

.@Nel_Kamai @helloilya интересно было бы конечно сначала послушать их аргументы против.)

Любой инструмент должен прежде всего быть удобным для конкретной команды, поэтому насильно кого-то пересадить на него вряд ли получится. :)

С вами по-прежнему @mishcherin, и сегодня мы поговорим про всё то, что позволяет нам чувствовать себя комфортно и делает нашу жизнь удобнее.

@Nel_Kamai @helloilya @cssunderhood pissed.pro

@cssunderhood pearsonified.com/typography/ и joshnh.com/tools/em-basel… в принципе все тоже самое ; )

.@arseniydmitriev о, да, последний тоже использовал, правда меня до сих пор немного пугают числа с таким кол-вом знаков после запятой :)

.@cssunderhood такая же паранойя

Тема достаточно холиварная, не стесняйтесь спрашивать, набрасывать и аргументировать. :)

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

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

.@exdeniz делиться знаниями с коллегами можно и нужно! :)

@cssunderhood Не приходилось ли верстать сложные интерфейсы, например - игры?

.@serhey_shmyg игры делать доводилось, но небольшие, внутри ok.ru, анимации и интерактив в основном либо стилями, либо на canvas

уф, во вторник обычно много работы, выкроил наконец немного времени.

@cssunderhood а вот сама верстка, если там кнопочка очень крутая скажем, как ее верстать? Вот такая скажем prntscr.com/8taoix

.@serhey_shmyg можно, конечно, по старинке - левый и правый края отдельно, центр – повторяющимся паттерном.

.@serhey_shmyg но я бы заморочился, сделал бы градиентами + тенями, поверх положил бы паттерн с светлыми точками.

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

На данный момент процентов 80 кода пишем на нем, оставшееся легаси-добро ждет своей участи, переводим на .styl, как доходят руки.

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

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

Это поможет сэкономить кучу времени и получить объяснение из первых рук, так сказать. Обычно ребята из опен-сорса довольно общительны. :)

Возвращаясь к препроцессорам, статей на тему сравнения, что лучше и почему, тьма, вот одна из них:
intuitivecompany.com/we-see/blog-po…

@cssunderhood И ещё свободнее сразу слать пулреквест с исправлением ошибки вместо ишью на Гитхабе.

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

Лично я считаю, что весь этот синтаксический сахар ничего, кроме проблем, со временем не приносит, вы можете со мной не согласиться.)

Выработали свой кодстайл, посмотреть его текущую версию можно вот здесь:
github.com/XOP/css-codegu…
Постоянно дорабатываем и обновляем его

@cssunderhood От чего же не согласиться? Правильно всё говоришь!

Для сборки на большинстве проектов используем grunt, кое-где переползли на gulp

Таски в большинстве своём стандартные - автопрефиксер, стайлус, минификации, склейки.

Отдельно писали подходящий нам таск для склейки спрайтов для обычной версии и ретины.

Вдруг кому пригодится:
github.com/cheshirsky/css…

Получилась удобная тулза, всё, что вам надо - положить рядом две версии иконки icon и icon@2x и в стилях указать референс на нужный спрайт.

Что вы используете для этого, как работаете со спрайтами у себя в проектах?

Для сжатия графики использую обычно что-либо из:

imageoptim.com
tinypng.com
tinyjpg.com

Или вот еще довольно популярный gulp-imagemin и его аналог для гранта grunt-contrib-imagemin
npmjs.com/package/gulp-i…
npmjs.com/package/grunt-…

Чего б еще вам рассказать? :)
Я единственный среди всей команды использую SublimeText,
остальные – поклонники Idea.)

У неё, кстати, недавно вышла EAP 15й версии, появилось много нового-долгожданного.
confluence.jetbrains.com/display/IDEADE…

В Sublime использую минимум плагинов - Emmet, Hayaku и плагин для Git (в нем смотрю blame файлов и большие диффы), обычно этого хватает.

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

Недавно жаловался коллеге о неудобстве постоянного переключения между ветками (сложно иногда держать названия веток в голове).

Посоветовали мне вот такой git-клиент
sourcetreeapp.com
Выглядит монструозно, но вроде удобный. Есть версии для винды и мака.

Я всем этим клиентам не очень доверяю, руками процесс контролировать намного приятнее. Удивляюсь, как это еще до сих пор на vim не перешёл.

Кстати, тут недавно где-то шутили про vim и верстальщиков, так вот, лично знаю парочку людей, кто верстает в нём. :)

@cssunderhood диффы и откаты через него проще делать, но консоль наше все да. Граф и понять где сломалось.

@cssunderhood Я тоже писал что-то похожее: github.com/tamiadev/grunt…

@cssunderhood раньше использовал спрайты для иконок, теперь иконочные шрифты

@cssunderhood наконец-то кто-то написал правильный сборщик спрайтов

@cssunderhood Ой, по-моему, сторонники БЭМ категорически против элементов у элементов prntscr.com/8tavqx

@cssunderhood О, вот в документации даже об этом написано ru.bem.info/forum/158/#Что-вы-скажете-на-nav__item__link-Все-равно-длинно

.@LeusMaximus ну, у нас же не BEM, а MCSS, нам можно. вообще я тоже не очень такое люблю, стараюсь не допускать больше одной вложенности.

@cssunderhood Это самый ужасный клиента для мака — я его боюсь ;-/

@sapegin @cssunderhood Из бесплатных самый хороший. Да - большой. Но все что мелкие за деньги и какие то убогие.

@serhey_shmyg Гитхаб-десктоп примерно в миллион раз лучше и тоже бесплатный. @cssunderhood

.@sapegin @serhey_shmyg надо будет попробовать, спасибо

@cssunderhood SourceTree на большой репе нещадно тормозит. Под винду лучший клиент - SmartGit (хоть и менее удобен), под мак - Tower.

@cssunderhood около года использую его, очень удобно

@cssunderhood .gitconfig в студию?

.@gunlinux довольно стандартный, ничего особенного.)

gist.github.com/mishcherin/cd1…

@cssunderhood есть еще compressor.io бесплатный веб-сервис jpegmini.com, но платные проги.

@cssunderhood gitgutter? И линтеры имхо могут.

.@gunlinux не, обычный Git packagecontrol.io/packages/Git

@cssunderhood Зазчем и Emmet и Hayaku?

.@serhey_shmyg я одно время пытался их скрестить удобным для себя способом, с тех пор так оба и стоят.)

Обещал еще рассказать про дизайнеров.
Да, у нас все дизайнеры и проектировщики работают в скетче.

Художники – фотошоп, иллюстратор и весь прочий набор адобовского софта.

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

Решили держать базу с нужными компонентами отдельно, в проектных файлах импортить всё оттуда.

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

If you are a team of a web project and you wanna beta-test theprotein.io, email us at [email protected] #betatest #startup

Ах, да, потихоньку начинаем думать о переходе на @PostCSS
Плюсов очень много, но есть пока и ряд проблем, мешающих миграции туда.

Если вы вдруг каким-то невероятным образом еще ничего не слышали про него, то эта ссылка специально для вас. :)
github.com/postcss/postcss

@cssunderhood спасибо :) Мы с радостью запишем всех, кто напишет нам на [email protected]

@cssunderhood Так, так! А @PostHTML не пробовали? ))))

.@voischev @PostHTML честно – пока не пробовал, обязательно посмотрю при случае :) слишком много всего нового что-то, не успеваю.)

@cssunderhood кстати, напиши куда-нить о ваших проблемах — нам будет полезно для расстановки приоритетов

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

.@andrey_sitnik @define-mixin / @mixin, calc() и вот это всё.

@cssunderhood добавь gitgutter, он вообще есть пить не просить, а делает так pic.twitter.com/ammAEeyDg0

.@gunlinux а, да, хорошая штука, использовал его раньше. :)

Во многих свежих статьях упоминается еще одна штуковина для процессинга стилей.
pleeease.io

Кто-нибудь работал с ней? Как вам?

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

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

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

@cssunderhood, можно наверное анимацию из Flash экспортировать в SVG и там уже разбираться max.adobe.com/sessions/max-o…

.@pepelsbey о, спасибо, посмотрю. у нас правда далеко не всегда флэш

@cssunderhood @pepelsbey можно из AE еще github.com/bodymovin/body…

.@fliptheweb @pepelsbey отлично, спасибо

@cssunderhood, используете иконочные шрифты?

.@helloilya не используем, у нас ie8+, геморроя и без них хватает.)

@cssunderhood вектор с раскадровкой

@cssunderhood Верстал под ие6 ?

.@serhey_shmyg да, довольно много.) пара стандартных костылей и условные комментарии обычно решали 99% проблем.

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

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

Про смарт-объекты в фотошопе, кто не в теме: например, у вас 10 баннеров разных, но они имеют общее объекты (логотипы, значки…) ->

-> вы создаете файлы psd с отдельными элементами, а потом в psd с баннерами их туда вставляете как смарт-объекты. И они как бы ссылаются ->

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

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

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

Сейчас вот набирает популярность подход Сritical СSS, там самые важные стили инлайнятся в <style> на странице.

smashingmagazine.com/2015/08/unders…

@cssunderhood используете 14кб и critical_css? Инлайните стили или просто загружаете.

@cssunderhood используете critical css на своих проектах?

.@bvvell @exdeniz про 14.6kB помним, critical css пока не используем, грузим так

Про вертикальный ритм в дизайне, о котором говорили сегодня утром, откопал у себя в закладках еще вот такую заметку:
typecast.com/blog/a-more-mo…

Про сборки поговорили, а про кеширование стилей – забыли.
Вот хорошая недавняя статья Криса Коера на эту тему:
css-tricks.com/strategies-for…

@sapegin в GitHub Desktop коммитить очень удобно, а вот с ветками и ревизиями удобнее SourceTree. @serhey_shmyg @cssunderhood

@cssunderhood gitsavvy для sublime и ты забудешь о консоли. Использую только его более полугода

@meuwka @cssunderhood oh my zsh в помощь) там плагин git из коробки стоит goo.gl/zYRgxA

@meuwka Чтобы было, с чего начать: github.com/sapegin/dotfil… @cssunderhood

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

jordanhawker.com/posts/13147703…

Перед сном давайте немного про рабочее место.

Дома у меня MacBook Pro 13" с ретиной, на работе – вот так: pic.twitter.com/Xh04SCszmX

MacBook Pro 15" с ретиной + Thunderbolt Display и еще один монитор про запас.

Третий монитор обычно включаю только если нужно постоянно держать перед глазами документацию или макет (довольно редко).

в такой развёртке на ноутбуке чаще всего открыт скайп, основная движуха – по центру.

Недавно отказался от мышки в пользу трекпада – доволен, полёт отличный.

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

Но на самом деле большинство твитов в этот аккаунт пока что я написал из своей любимой маленькой переговорки pic.twitter.com/ebwtuvKW4v

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

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

@cssunderhood Уже несколько лет так. Трекпад + планшет для обработки фотографий.

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

скоро Хэллоуин, поэтому покажу, как выглядела кухня на прошлый.
как по мне, лучше бы так и оставили. :) pic.twitter.com/zOpmbeDlo6

Еще у нас есть игровая комната (ps, xbox, кикер), но там я – редкий гость, обычно чтобы развеяться, просто иду проветриться на улицу.

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

.@Sigiller да, вот как раз чередовать и пробую иногда.

@cssunderhood Дома (только переехал): instagram.com/p/9Fvvtbwhl-/ и на работе: instagram.com/p/6MaqQNQhqH/

@meuwka @xamgore @cssunderhood gitup.co pic.twitter.com/vDmLYW9hWw

@cssunderhood Мне дают гифку :/

.@daer_ru хм, с гифкой наверное попроще. если дали гифку – могут значит дать и раскадровку нормальную?

Привет, сегодня поговорим о здоровье, спорте и питании.

В Петербурге +4℃, сухо и солнечно, поэтому я продолжаю ездить на работу на велосипеде.

Последние полтора года компанию мне составляет вот такой синглспид pic.twitter.com/B8fbQaJXtz

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

Это мой четвертый велосипед за последние пять лет, дома бережно хранится еще один – найнер Cube Reaction Pro 2013го года.

Много ездил на нём раньше по лесам-полям, в городе пока в нём нет нужды, но продавать рука не поднимается.)

Многие любят наклеивать стикеры на ноутбуки, я – на велосипед. :)
(осторожно, скрытая реклама ok.ru и Злых Марсиан) pic.twitter.com/saeJH0Pf3s

Сейчас использую его исключительно как средство передвижения из точки А в точку Б.

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

Однажды у меня уже украли велосипед, с тех пор основательно подхожу к выбору замка (U-lock) и стараюсь не оставлять его долго без присмотра.

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

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

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

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

Плюс это позволяет перемещаться с комфортной для меня скоростью 20-25км/ч, а не тошнить на тротуарах, объезжая всех подряд.

@cssunderhood а где возьшь этот U-lock ? он ж тяжелый и не очень удобный

.@kidovzky всегда с рюкзаком, там и держу. еще можно заиметь калёную цепь и обматывать её вокруг пояса во время езды. :)

Важно помнить про защиту и всегда (всегда!) надевать шлем, однажды он может спасти вашу жизнь. pic.twitter.com/kfGmzeTGNg

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

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

Кстати, для сравнения: дорога из дома до работы пешком, на общественном транспорте или машине занимает 20-25 минут, на велосипеде – минут 8.

У меня есть права, но машину куплю (возможно) только если будут дети, да и то не уверен.

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

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

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

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

Поэтому когда на термометре маячит -5℃, перебираюсь на метро или хожу пешком.

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

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

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

Я с недавних пор почти всегда стараюсь пешком ходить до ближайшего кафе – трачу лишних 20 минут, зато организм чувствует себя лучше.

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

@cssunderhood а расстояние до работы какое?

.@Wandermiltz немного, 2.1км плюс-минус endomondo.com/users/2225921/…

@cssunderhood со следующего сезона собираюсь перейти на ролики...

.@daer_ru тоже хороший вариант. я на роликах так и не смог нормально научиться ездить, не моё.)

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

.@gatilin2222 да много кто и на обычной работе так делает :)

Сегодня у нас день без технологий, обещал рассказать про питание. Рассказываю.)

Раньше я особо не задумывался над тем, что ем, когда и в каких количествах.

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

Где-то год назад внезапно для себя я обнаружил, что при росте 193 см вешу 107 кг и надо что-то менять.

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

В итоге решил три раза в неделю ходить в зал и попутно стал разбираться со своим рационом и количеством приёмов пищи.

Слышали про то, что 80% успеха – это питание, и всего 20% – тренировки? Это действительно так.

Проснулся – стакан воды в себя и утреннюю интенсивную зарядку. Пару минут какой-нибудь из планок
liveinternet.ru/users/irzeis/p…

Это не так просто, как кажется, кстати. Особенно первое время.) Попробуйте.

@cssunderhood не совсем, еще важен сон

@cssunderhood сон - это восстановление

Приёмов пищи – четыре-пять в день, с периодичностью в среднем раз в три часа. Объем небольшой, ~350мл

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

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

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

Третий-четвертый приём пищи – 50/50 углеводов с белками, плюс добавляйте побольше зелени, клетчатка помогает пищеварению.

Вечером перед сном - что-нибудь лёгкое, кефир или немного творога.

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

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

@cssunderhood мед в помощь)

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

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

@cssunderhood и место, место подходящее! :)

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

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

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

По выходным позволял себе заменить один прием пищи на что-то "вредное", но привычное и любимое.

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

Стал замечать, что чувствую себя комфортнее, бодрее. Ну и помимо всего этого, минус 15 кг за три месяца – тоже приятный результат.

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

Кстати, я курю (чему иногда совсем не рад) и довольно частый гость в местных барах, так что не подумайте, что я ярый сектант и фанат ЗОЖ.
:)

@SiliconBangalor @SilentImp @cssunderhood Если жрать 1 раз в день и пить пиво по вечерам — толстеешь. Инфа 100%

@SilentImp @cssunderhood Если при таком росте весишь 93 — это ожирение. Кушай 5 раз в день, не ешь мучное, сладкое, не пей пиво. Поможет.

@cssunderhood кто сказал?) Чел тут литературу по этому поводу поднимал youtube.com/watch?v=N-0VZB…

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

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

@cssunderhood соглашусь, если организм хочет/не хочет пить - то как бы стоит прислушаться к нему.

@cssunderhood , главное после не забыть поесть и выспаться))

@sanokps @cssunderhood Речь, скорее, о том, чтобы сразу после принятия пищи выпить почти поллитра чая-кофе. А не о запивании, чтоб шло лучше

@cssunderhood Кроссфит для тех кто занят. 20 мин === 1,5 часам тренировки в зале. :) и можно дома.

@cssunderhood @SiliconBangalor @Semenov @SilentImp ага,я вес стал набирать обратно снизив частоту питания. Порции увеличились, стали вреднее

@cssunderhood если упражнения не подобрал - не успел или чего то еще. Прыгаю бурпи :) 7 минут без перерыва. И полный коматоз ))

@cssunderhood в разных брвузерах и в разный ОС отображаюся по разному

.@devmru идеального соответствия никогда не пытался добиться, но часто помогает игра с letter-spacing и -webkit-font-smoothing

@cssunderhood какая причина у okru использовать _ для элементов а __ для модификаторов? Вы_используете_вложенные_элементы? (бэму #b_ привет)

.@i_dmytro это всего лишь вопрос кодстайла, у нас – так. вложенные_элементы_элементов раньше использовали, сейчас – практически нет.

@i_dmytro @cssunderhood думаю пишут БЭМ руками и поэтому проще: блокДлинноеНазвание_элемент.__модификатор.

.@freepad @i_dmytro мы не пишем БЭМ никак, потому что у нас не БЭМ :)

@cssunderhood а у вас в ok в подмастерья принимают? Даже за символическую плату для начала, например

@cssunderhood @i_dmytro а MCSS?

.@freepad @i_dmytro MCSS допускает такую вложенность, но практика показывает, что лучше по возможности её избегать.
operatino.github.io/MCSS/

.@freepad @i_dmytro модификаторы пишем без упоминания имени блока ради, т.к. в стилях модификатор сам по себе существовать не может.

@cssunderhood чай и кофе (из-за кофеина) выводят воду из организма, поэтому нужно компенсировать их дополнительными приемами чистой воды.

@SilentImp @cssunderhood @tthread @Semenov способность удерживать внимание на 1й вещи, получение удовольствие от работы тела и окр. природы.

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

@cssunderhood можно добавить курагу или банан в овсянку

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

@cssunderhood @Semenov плавание попробуй

.@spotykashka @Semenov плавание – отличный вариант, кстати. особенно, если есть проблемы с позвоночником и суставами.

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

Последние несколько лет на работе надо быть в районе 11 часов, это сильно расслабляет.

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

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

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

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

Максимально забив таким образом расписание, довольно быстро возвращаюсь в нормальный режим.

Тут играет роль психологическая особенность – когда я обещаю что-то сделать кому-то кроме себя, с вероятностью 99% не просплю, не опоздаю.

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

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

@cssunderhood А что вы думаете о полифазном сне?

.@psyw я пробовал несколько разных вариантов, оптимальным для был 3 раза по 3-4 часа каждые 48 часов.

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

Сейчас, например, занимаюсь английским с преподавателем два раза в неделю по полтора часа.

На домашнюю работу уходит около 12 часов в неделю. Думал, будет тяжело справиться с таким потоком, однако нет, нормально.

Рекомендую, кстати, подписаться на @testyourenglish и на рассылку от него
nativenglish.ru/index.php?opti…
Там освещается много интересных нюансов.

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

@cssunderhood @psyw продуктивность была на том же уровне как и при 8 часовом сне?

.@ilyasovd @psyw продуктивность примерно такая же, но чувствовал, что устаю меньше.

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

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

Писать рукой в этом случае – приятнее.

Какие, кстати, используете вы, и почему?
Хочу написать свой (с блэкджеком и шлюхами, как водится), а то тысячи их – а ни один не нравится.

@cssunderhood не пробовал Trello? Для меня он стал спасением, особенно если использовать методику GTD

.@Bizi пробовал, он какой-то очень монструозный и дизайн не нравится.)

@cssunderhood родные приложения «Напоминания» и «Календарь» на OS X. Все перепробовал, эти лучшие. В компании пользуемся Асаной.

.@shugich напоминания - пока что наиболее удобный и подходящий вариант, да.

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

Это может не мешать тебе, когда ты один, но когда результат твоей работы ждут еще двадцать человек – выглядит так себе.

Справиться с этим обычно помогают всё те же списки задач. Списки – это очень важно.

Пока перед глазами нет чёткого плана, что и в каком порядке делать, объем работы оценить невозможно, а в голове – каша.

На эту тему есть хорошая статья Ника Товеровского @ksoftwaretweet
ksoftware.livejournal.com/291683.html

Он там еще рассказывает про технику помидорок, наверное, почти все уже о ней слышали.
ksoftware.livejournal.com/282745.html
pomodorotechnique.com

Или вот про многозадачность. Часто приходится делать по 5-6 задач сразу, это поначалу буквально разрывало меня на части, было очень тяжело.

Помогает тут техника пустого инбокса, только не та, что про почту, а та, где инбокс у вас в голове.

Каждую крупную задачу дроблю на много мелких, четко фиксирую все этапы в плане. Сделал мелкую – всё, git push, очистил голову, переключился.

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

Еще, в тысячный раз: «делать» – не значит «сделать». Очень часто сталкиваюсь с таким.

ksoftware.livejournal.com/202173.html

@cssunderhood держу несколько списков дел в google keep, ну и бумажки всякие конечно, куда без них) написанное запоминаю гораздо лучше

.@li_rian google keep отличный! но у меня он больше как-то просто для быстрых заметок, которые потом надо обдумать.

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

Раньше приходилось оценивать буквально с точностью до часа, так и не понял, как люди это делают вообще.

@cssunderhood она бессмысленна, так как включает R — правильно оцененные первоначальные сроки.

Теперь про личностный рост. Как понять, что развиваешься, а не топчешься на месте? Ответ простой – надо чаще оглядываться назад.

Вот замечательная статью на эту тему от Рахима Давлеткалиева @freetonik

medium.com/@freetonik/how…

Если коротко, немного стыдиться себя прежнего – это очень хорошо, не надо этого бояться.

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

@cssunderhood, индивидуально, в группе? Где в Питере найти нейтива для занятий? И другие вопросы.

.@pepelsbey индивидуально, удаленно по скайпу, не нейтив, но русский на уроках под запретом.

.@pepelsbey я что-то не доверяю всем нашим языковым школам, где часто за титулом нейтива прячутся неквалифицированные преподаватели.

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

@pepelsbey а не нейтивы хороши с точки зрения знания и понимания теории. @cssunderhood

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

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

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

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

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

@cssunderhood я использую doit.im, очень похож на things. Мне нравится, как по мне, идеальная реализация пустого инбокса.

@cssunderhood в памяти лучше откладывается

@cssunderhood Сингс. Пробовал другие, но прижился только он.

@cssunderhood Антон крут. А ещё он очень хороший музыкант. @testyourenglish

Сейчас очень популярны различные образовательные программы: htmlacademy.ru, codecademy.com , тысячи их.

Помимо курсов предлагают интенсивы, где за 3 дня и много денег из вас обещают сделать крутого специалиста. Как вы к этому относитесь?

Я лично считаю, что деньги здесь – не реальная стоимость этого интенсива, а всего лишь дополнительный инструмент для мотивации.

Раз уж заплатил – надо отработать, как-то так.

С чего бы лично вы начали обучать человека вёрстке? Я вот прежде всего рассказал про git и другие VCS, а уже потом начал про вёрстку.

Как начинали учиться сами? Есть кто-нибудь, кто учился по курсам, что это дало вам, как помогло при трудоустройстве?

Открыл для себя недавно Hexlet ru.hexlet.io

Ничего не скажу про их курсы, но @mokevnin и @freetonik проводят замечательные вебинары, обязательно посмотрите
github.com/Hexlet/webinar…

Еще у них есть чат в слаке hexlet-ru.slack.com, там и про фронтенд, и про английский, и про многое другое, подписывайтесь.

@cssunderhood @mokevnin @freetonik после их вебинаров купил подписку )

Ну и на Веб-стандарты в слаке тоже подписывайтесь конечно, если еще не.
web-standards.slack.com

@cssunderhood что такое блоки, семантика HTML, css (Sass), JS и дать сверстать страниц 10 с 0, потом уже все остальное

.@kbytin а не рановато ли препроцессоры и js давать человеку, который и про DOM толком не в курсе? :)

кстати, обязательно послушайте очень толковый доклад @mokevnin про формирование инженерной культуры в компании.
vimeo.com/90822994

@cssunderhood на самом деле нужно. про сетевой стек, про операционные системы, про алгоритмы.

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

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

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

@cssunderhood, неправильная ссылка, по ней не подписаться. Вот правильная: slack.web-standards.ru

@cssunderhood я не верстальщик, дизайнер. Сверстала несколько своих дизов, не буду рассказывать как это помогло моим будущим коллегам :)

.@WasilisaFish дизайнеры, умеющие верстать – это всегда здорово :)

Вот интересно, каковы шансы у верстальщика, немного умеющего в дизайн, попасть в школу стажёров к @artgorbunov
artgorbunov.ru/school/1feb201…

@cssunderhood огромные ) там главное думать, в делать научат. Я прошел первую ступень, понравилось

@WasilisaFish @cssunderhood есть много начинающих чуваков, которые пока вообще ничего не знают. а вокруг сплошь "продвинутая" информация :)

Книги на все времена:
map.hexlet.io/pages/books

@cssunderhood так будет правильно: slack-ru.hexlet.io

@cssunderhood я бы сначала показала что-то простое, но крутое. По-моему, надо зацепить и впечатлить, какой уж там гит и сасс :)

@cssunderhood @not_plasticine @WasilisaFish @DevTipsShow youtube.com/user/DevTipsFo… пажалста ))

Отличная подборка видео с лекций ШРИ у Яндекса, кстати.
youtube.com/channel/UCTUyo…

@cssunderhood мне как-то приставили новичка. я его посадила рядом на работе и комментировала что делаю. потом очень благодарил меня

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

@cssunderhood начинала с курсов на codecademy.com - там самые основы основ. потом было сплошное гугление и велосипеды

Признания авторов CSS, чтобы бы они исправили, будь у них машина времени (corner-radius вместо border-radius)
wiki.csswg.org/ideas/mistakes

@beskrovnyy @cssunderhood @SilentImp @pepelsbey Как по мне "ангри-рашен-аксэнт" это круто, не стоит его стесняться youtube.com/watch?v=oRIsC7…

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

@cssunderhood я вот жду дня, когда в @PostCSS можно будет скормить .styl, и всё будет работать.

@xamgore такого никогда не будет, у нас будет другой синтаксис, просто тоже без { и ;

@cssunderhood Вообще, этому в школе на ОБЖ учили, пешеходы, велосипеды и пр. должны ехать по встречной, им проще среагировать на опасность

.@Akurganow понятно теперь, откуда ноги растут. меня такому не учили.)
это в корне не верно и противоречит ПДД, математике и здравому смыслу

@cssunderhood postcss-svg, в последнем проекте пользовал. Не спрайты, но удобно и быстро. Особенно с готовыми иконками

Вечер пятницы, все с нетерпением ждут выходных, а у нас – день разговоров на вольные темы.

В начале недели кто-то мне посочувствовал, узнав, что я работаю в Одноклассниках. :) Зря, сочувствовать тут абсолютно нечему.

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

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

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

@cssunderhood я был на мастер-классах у @operatino когда он ещё был в ок. было очень круто, прям третий глаз открылся)

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

Кстати, список докладов и мастер-классов Роберта @operatino можно посмотреть у него на сайте rhr.me/pres/

@cssunderhood А что там верстать?)) Дизайн вроде не часто меняется
или какие то побочные проекты?

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

.@timurKarshiev плюс да, различные спец.акции, инструменты для интранета и прочее, и прочее

Вчера я открыла для себя такие понятия, как Спагетти-код и Пахлава-код ) Илья вообще супер рассказчик. twitter.com/ymatuhin/statu…

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

Помните доклад Артема Поликарпова «Технолог – тоже дизайнер»?
events.yandex.ru/lib/talks/460/
Он всё еще актуален.

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

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

@cssunderhood он _тоже_ принимает дизайнерские решения. @artgorbunov постоянно об этом твердят.

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

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

Опыт показывает, что есть два основных типа фронтендеров – те, кто пришли "из дизайна" и те, кто пришли "из бэкенда".

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

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

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

Вот, например, недавно Вадим Макеев @pepelsbey рассказывал дизайнерам, о чём смеются верстальщики.
youtube.com/watch?v=lW4uzJ…

@cssunderhood по-моему, 90% фронтэндеров пришли с курса типа «Создание сайта за 30 дней» по основам хтмл, и просто не смогли в бэкенд

.@press_dislike я так не думаю.) к тому же фронтенд давно уже спокойно может тягаться с бекендом и по сложности задач, и по порогу вхождения

@timurKarshiev @cssunderhood помимо редизайнов, есть новые фичи, которые требуют вёрстки.

Раз уж на то пошло, вёрстка сегодня – это html, css, js, автоматизация и сборка, оптимизация производительности, тестирование, шаблонизаторы

Вот необходимый baseline, чтобы чувствовать себя комфортно в наше время:
rmurphey.com/blog/2015/03/2…

Несколько советов, о чём должен помнить дизайнер:
github.com/nicothin/web-d…

А вот хорошие подборки по фронтенду:

А вот полезная подборка книг по фронтенду от Владимира Старкова @iamstarkov
vstarkov.ru/required-books…

Перед тем, как отдать вёрстку, полезно проверить, ничего ли не забыл.
Один из чеклистов, который вам в этом поможет:
github.com/delka/html5che…

@cssunderhood И вот еще подборка github.com/miripiruni/fro…

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

.@maxmaximov я обычно это трактую как «всегда ставь себя на место пользователя»

В начале недели спрашивали про подкасты. Я очень плохо воспринимацию информацию на слух, особенно техническую, поэтому подкасты не слушаю.

Вот тут есть небольшой список подкастов, а заодно и ссылок на чаты различных сообществ, которые "в теме"
headjs.ru/info

Возвращаясь к вчерашней теме про многозадачность.

Отличный курс о внимании к себе и своему времени, рекомендую:
niceandeasy.me/daily/course01…

Многим, а дизайнерам особенно, будет полезно подписаться на курс от Главреда @glvrdru

maximilyahov.ru/glvrd-pro/

Могу вот порекомендовать блог Ильи Бирмана, там и про дизайн в том числе:
ilyabirman.ru/meanwhile/

С удовольствием читаю советы в бюро Горбунова:
artgorbunov.ru/bb/soviet/

Еще очень много интересного можно найти на medium по нужному тегу:
medium.com/tag/design

Что считаете эталоном тестового задания при приёме на работу? Нужны ли они, в каком виде? Делитесь примерами.

@cssunderhood недавно дали тестовое задание сверстать вот такой смайлик pic.twitter.com/47TGKhjOgO

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

@cssunderhood Вот эти было интересно делать: github.com/sapegin/react-… github.com/sapegin/react-…

.@sapegin крутота!

@cssunderhood Если компания не компания мечты, то считаю достаточно собеседования. Многих подходящих кандидатов это может отпугнуть.

По пятницам приходит рассылка javascriptweekly.com. Всегда есть что-то интересное. В этом выпуске рассказали про rollupjs.org

@cssunderhood последнее мое тестовое-редиз ужасного рандомного сайта. Я сделала его и отправила в сапорт этому сайту в дар.На работу прошла)

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

@maxmaximov @cssunderhood думаю, что путь таков: сначала "как для себя", а потом для себя :)

@cssunderhood у меня задание было простенькое. Замутить сайтец на WP, с использованием макета. Макет был унылый, пришлось доделывать самому.

@cssunderhood ещё если снизить кол-во еды и пойти на йогу, тоже неплохо сушит

@jsunderhood @cssunderhood ретвитните плиз. Ищу удаленщиков, с кем можно поехать в Азию на зимовку, бюджетно. Писать vk.com/fladex

@cssunderhood Лично мне еще интересен блог @imbacile Vlad Golovach medium.com/@imbacile и usethics.ru/lib/

@cssunderhood elliotjaystocks.com/blog/ жаль уже не обновляется. НО можно еще заглядывать: langsam.ru/ris/

@cssunderhood designinstruct.com и design.tutsplus.com и webappers.com и typofonderie.com/gazette/

@cssunderhood Еще можно заглядывать на awdee.ru и vandelaydesign.com/blog/ и tympanus.net/codrops/

@cssunderhood Еще sitepoint.com/design-ux/ и blog.jazov.com и lopart.by. Недавно вышел deadsign.ru

@cssunderhood letterday.ru для любителей шрифтов и типографики. Ммм abduzeedo.com, webdesignerwall.com

Кстати, про конференции. Вот тут есть список наиболее популярных и ссылки на их видео-каналы с докладами:
github.com/FrontenderMaga…

Замечаю, что многие конфы стали носить более философский характер, доклады стали легче, меньше кода, больше вау-эффектов. Как вам такое?

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

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

Кстати, на уже упомянутом Front-Trends 2015 буквально до мурашек пробрал рассказ Léonie Watson про accessibility
youtube.com/watch?v=qdB8SR…

@cssunderhood Хорошо. Больше трёх строк кода всё равно не видно на слайдах.

Привет, сегодня воскресенье, моё время здесь подходит к концу.

Самое время задать вопросы, если еще не успели этого сделать.

Напоследок немного поговорим про анимации.

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

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

Единственные два свойства, которые можно изменять достаточно «дешево» – opacity и transform

Таким образом, если вам нужно изменить местоположение элемента, не делайте это, меняя значения top/right/bottom/left или с помощью margin

До сих пор не все знакомы с довольно старым трюком: translate3d(). Уже давно пора, 2015й подходит к концу. :)

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

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

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

Подробнее про производительность и translate3d() можно почитать, например, вот здесь:
html5rocks.com/en/tutorials/s…

@cssunderhood Очень интересный и подробный доклад по веб-анимации Js/Css с примерами youtube.com/watch?v=zJxPuX… Александр Завьялов, Яндекс

@cssunderhood Вот еще наглядная статья была paulirish.com/2012/why-movin…

Теперь про новый трюк: will-change

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

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

Подробнее о will-change можно почитать вот здесь: sitepoint.com/introduction-c…

или здесь: dev.opera.com/articles/css-w…

Однако у will-change есть и тёмная сторона, будьте аккуратны:
cssmojo.com/the-dark-side-…

Еще есть замечательное свойство animation-play-state, с помощью него вы можете, например, паузить ваши анимации во время скролла.

Ну и применять его по первоначальному назначению тоже бывает удобно :)
lea.verou.me/2014/01/smooth…

@cssunderhood И перевод этой статьи: css-live.ru/articles/to-ch…

@cssunderhood Пора уже will-change

@cssunderhood Задевается вопрос производительности, FPS и тд

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

Например, по onscroll вы можете перекрывать ваш контент дополнительным леером с большим z-index.

Кстати, если хотите посмотреть, что происходит при анимации того или иного свойства CSS, это можно сделать здесь:
csstriggers.com

Отличная поборка статей с советами про производительность, анимации, дизайн и многое другое есть у Гугла:
developers.google.com/web/fundamenta…

. @cssunderhood Не единственные, еще filter, а вообще есть такая вот замечательная таблица csstriggers.com

Про CSS Filters можно почитать, например, в статье Криса Коера:
css-tricks.com/almanac/proper…

. @cssunderhood Проще вешать на body pointer-events: none;

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

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

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

Концерты, встречи с людьми, много времени вне дома, путешествия – всё это позволяет сменить контекст и разгрузить мозг.

Новые впечатления (те же путешествия, например) помимо прочего выстраивают в мозгу новые нейронные связи. :)

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

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

. @cssunderhood И разрушают старые) стараюсь на выходных либо дико тюленить, либо заниматься пет проектами.

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

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

Сегодня, например, буду на октябрьской встрече SPB Frontend
vk.com/spb_frontend_m…

Там поговорят про React, Redux и CSS в JS, она стартует буквально через час, будет прямая трансляция.

Может, там с кем-то и развиртуализируемся, кстати. :) Буду рад знакомству.

Что ж, неделя подошла к концу, пришло время прощаться.

Вы клёвые, это был очень интересный и новый, необычный для меня опыт.

С вами был Даниил @mishcherin (подписывайтесь). Надеюсь, было хоть немного интересно и полезно. Всего хорошего!