Всем привет! На этой неделе с вами Сергей Попов из @htmlacademy_ru.

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

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

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

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

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

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

Утренняя проверка работ всех студентов занимает почти два часа, не надо думать, что это так просто.

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

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

В том году я попал на компьютерные курсы НОУ СЕГРИС, которые на самом деле были подготовкой к поступлению в Университет ИТМО.

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

Делая, свои первые табличные страницы я даже и представить не мог, что это доведёт меня досюда.

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

После этого официально с веб-технологиями я встретился уже на втором курсе техникума.

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

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

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

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

@life_maniac @cssunderhood видел стрим на livecoding.tv чела, который имеет 8 лет опыта по описанию, но пишет откровенный говнокод

Продолжим. Самообразованием я занимался до конца 3 курса, а на 4 курсе я уже работал в этом же техникуме. Занимался, естественно, сайтами.

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

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

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

Это было очень весело работать несколько месяцев почти бесплатно, собирая сайты на WordPress и !Joomla. Каждые три дня новый проект.

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

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

Кстати, всё это дело происходит в Питере, и, если у вас перерыв, советую - youtube.com/watch?v=4EoUz3…

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

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

А как вы начинали своё обучение?

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

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

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

Во всяком случае платить столько, сколько хотелось бы.

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

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

Только на фрилансе я работал достаточно долго, пока не попал в наставники @htmlacademy_ru. В тот момент мне показалось крутым передать опыт.

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

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

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

Чем за предыдущий период своей карьеры.

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

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

@cssunderhood любой специалист, который перестал узнавать новое — мёртвый специалист. Дизайнер, программист, даже менеджер

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

Основная часть моей работы – наставничество на базовом и продвинутом интенсиве по вёрстке. Я и подумать не мог что мне будет это нравиться.

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

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

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

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

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

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

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

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

Помимо официальных материалов для Академии, в свободное время я собираю дополнительные материалы для своих студентов. Записываю скринкасты.

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

В вёрстке всё просто. Пишу HTML без всяких препроцессоров. Для шаблонов использую Handlebars, который компилирую в HTML на этапе сборки.

Из препроцессоров предпочитаю @SassCSS, но последний проект пробовал вообще без них, только возможностями @PostCSS и мне нравится.

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

Ну и сейчас я пишу всё на нативном JS активно его изучая. До этого очень много писал на jQuery, спасибо @simonenko что снял меня с этого.

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

@cssunderhood ахах, как там говорят: Программируем на буцтрапе 😤

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

"Кхм-кхм... Пшш Пшш... Раз-два-раз-два... Ой, а это уже читают, да?"

Привет всем! Я Ростислав Назмеев, верстальщик из камчатской суперкоманды "Space Crabs".

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

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

Я, как водится, подготовился перед своей сменой, зацените план на 7 дней. pic.twitter.com/owYnJvIUGX

А еще вас ждет неделя легкой шизофрении, ибо вещать мне будет помогать знакомый каждому и неподражаемый Дед Лайн. pic.twitter.com/EFt5aFeoAd

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

Ну что я все не о себе да не о себе. Пора это исправить!

В вебе я порядка 5 лет. Есть опыт работы оффлайн (техподдержка, верстка, менеджер проекта), фриланса и удаленной работы в студии.

Всю жизнь живу в Чите. У нас это "столица края", но далеко не все этот город и на карте-то найдут.

Некоторые мои первые сайтики живы до сих пор. Характерный пример: chitinsky.ru - щелкаем любую ссылочку и делимся своими:)

В то время я считал верхом крутизны делать не просто html-ки, а собирать их с SSI (помните же такую штуку? ) CMS - нет, пока не слышал.

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

В этот момент я проникся любовью к Sublime Text (тогда еще 2 версии), его мультиселекту, поиску, шорткатам, плагинам и сниппетам.

Постепенно подрос до верстальщика и начал верстать несложные проекты. Открыл для себя less, jade и gulp (бессовестно прослоупочив grunt)

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

Вернувшись в профессию, поучаствовал в нескольких крупных проектах, распробовал git flow и весьма плотно познакомился с Дедом Лайном.

В итоге же - попал на удаленку в молодую камчатскую команду "Space Crabs". Спасибо @i_MiF за то что нашел меня и пригласил!

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

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

А по авторитетному мнению моей жены я лучший на свете и самый красивый. И да, я уверен, что для Вас это - важная информация:)

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

А каковы Ваши интересы, например, в процентном отношении? Мой пример: web - 60%, music - 40%. Напишите пожалуйста, будет лаконично и емко)

Жду Ваших интересных "процентных портретов" на предыдущий твит и ненадолго вас покину. Не скучайте;)

Давайте поговорим немного о работе в провинции. Я, как и многие, уже столкнулся я и минусами и плюсами, попробую поведать.

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

Зарплаты в регионах как правило меньше, чем в Мск или СПб, но и цены обычно ниже, так что жить можно нормально.

Но, ребята, не ищите малых цен в Чите и на Камчатке, это заколдованные места:)

Так же, живя в регионе ты всегда видишь светлую перспективу удачного переезда в ближе к центру:) Пусть и иллюзорную, но все же, душу греет))

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

Кстати, ребятушки, если есть среди Вас мои земляки-забайкальцы - отзовитесь!

И вообще, уважаемые подписчики - есть ли среди Вас жители отдаленных от центра городов? Попингуйте:)

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

Так вот, самое наболевшее для меня в моем городке - это отсутствие профильного сообщества. Не с кем все эти митапы и тп проводить. Ох и ах.

Возможно, просто нет специалистов на 300к населения, а может никто раньше не заморачивался собирать.

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

Пришла мысль о том, что было бы круто, если бы в каждом регионе, или крупном центре выделилась своя школа фронтенда, как например в роке:)

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

Объявить баркамп/ митап пригласит интересные персоны @cssunderhood

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

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

Будет весело! twitter.com/cssunderhood/s…

@cssunderhood я по рому и чаю, но это уже дело вкуса. Всякая туса собирается в пивную.

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

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

Итак... Давайте с маленького опроса начнем. Работаете ли Вы в коворкинге?

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

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

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

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

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

Кстати, по поводу Рен ТВ и подобного в нашей жизни я думаю, мы еще поговорим на неделе, ибо у меня от этого уже давно накипело)

@cssunderhood Обнаружил, что уже видел несколько из этих докладов:) Харизматично и со знанием дела!

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

13-й выпуск «Веб-стандартов»: VPN, методологии CSS, Stylelint и CSSX, параллакс, доступность soundcloud.com/web-standards/… pic.twitter.com/ZEMz6WtPAw

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

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

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

Так же нашлись первые земляки-коллеги)) Очень этому рад.

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

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

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

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

Спасибо сочувствующим за отзывы, беседы, лайки и участие в отзывах! До завтра;)

Мои поклонники часто спрашивают меня, кто я такой и почему я называю их своими поклонниками…
Эту неделю с вами я – Роман @Realetive Ганин.

Я питерский фрилансер, начинающий фронтенд разработчик с 5-летним стажем. По образу жизни сова. Не ЗОЖ, не веган, не фотограф и не музыкант.

Вопреки устоявшейся традиции плана на неделю не будет. Принципиально. Я считаю, что это скучно. Всё будет спонтанно… pic.twitter.com/27Ze6LEFrV

Спонтанно мы обсудим IDE и текстовые редакторы, будем неожиданно переключаться на форкфлоу и сборщики, впереремешку с #b_, @PostCSS и SVG.

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

Дерзко, смело и без прелюдий я побуду хейтером современных «веб-дизайнеров». Хороший дизайн тоже обсудим. Вдруг. Никого не предупреждая.

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

Если не отвечу сразу, значит потом (или я не знаю ответа и судорожно гуглю). Я фрилансер, т. е. безработный; времени у меня на это — вагон.

К слову, я плохой программист. Серьёзно. Как и прошлый автор, @denisfedosov (июнь @cssunderhood), я когда-то начал делать сайты на #MODX.

И делаю их до сих пор, являясь к тому же амбассадором MODX в России. Я с удовольствием расскажу о преимуществах этой CMS для фронтендеров.

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

Ближайшая встреча, кстати, будет на этой неделе. Даже если вы не знакомы с MODX – приходите, это и про фронтенд тоже vk.com/modxspb_2016_05

Мы планируем обсудить: #БЭМ, LESS и @SassCSS, @bower, @nodejs, @Browsersync, @gulpjs, TARS, ENB, Webpack, плагины @PostCSS и много другое!

Кажись, мне о5 пора искать работу. Никому, случайно, не нужен за гроши чувак со вкладом в разработку спек CSS (github.com/w3c/csswg-draf…)? :)

Вообще испытываю нехватку таких живых форматов. Хочется регулярно, «по-настоящему», понимаете? Поплакаться в рубашку, обсудить, поспорить.

Конечно, в Питере есть дринкапы @spb_frontend, есть кулуары и афтэпати @pitercss и @piter_united, за что их организаторам большое спасибо!

Первый раз очень боялся пойти на встречу разработчиков (посвещённую MODX, кстати), которая была 5 октября 2013 года (не поленился, нашёл).

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

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

Это очень мотивирует и воодушевляет, знаете ли. Вот и сейчас пишу я тут вам, а самого «АЖ ТРИСЁТ ОТ ВАЛНЕНИЯ» — вдруг я что не так ляпну…

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

О её применении в вебе я рассказывал на последней встрече @spb_frontend, вот слайды и материалы, туда не вошедшие: bit.ly/TypoTales

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

Если верить @glvrdru и продвинутому курсу о редактуре текста от Максима @perepisal Ильяхова, лучше вообще не писать. Не верите? А зря!

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

Ввели неправильно пароль — тот же экран, красный цвет, поле ввода трясётся, крики, слёзы! Красота! А рядом ещё какая-то мерзкая подсказка…

Читаешь, что написано: пароль должен содержать минимум N символов, в обеих регистрах, с цифрами и символами Юникода за пределами клавиатуры!

Какая досада… =(
UPD: даже так, наверное, лучше: pic.twitter.com/xP0jSiW70U

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

Кстати, возвращаясь к Тёме Лебедеву: можно долго спорить о его методах и мнениях, но я уважаю его вклад в развитие русского сайтостроения.

Ну и закончим на этом о Тёме, а то вспомню вёрстку таблицами, теги <br> и <nobr>, desktop only или ещё чего похуже. pic.twitter.com/IEPKTKIP7O

Продолжая тему типографики, сайт typewolf.com или @typewolf – подборки «сайт дня», советы и руководства. pic.twitter.com/Ibv1Cc3mPZ

Вообще на определённом этапе становления себя, как веб-разработчика, отказался от субъективного восприятия типа «нравится-не нравится».

Дизайн не может «нравиться». Он или «работает» (выполняет ваши задачи), или нет.
— Ваш Кэп.

А теперь идите, поиграйте со шрифтами…

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

Выключку по центру можно заменить правильной расстановкой переносов. Помните Тёму: «Так верстают только мудаки»? pic.twitter.com/X4e1EPi537

Заглавные буквы используются только в начале предложения, именах собственных и аббревиатурах или акронимах. pic.twitter.com/McmHRfrPll

Для тех, кто упустил слайд с моей презентации (bit.ly/TypoTales) по веб-типографике: pic.twitter.com/HArlmgOva6

@cssunderhood кстати, вчера был великий @may1reboot. Меня вот все интересовало, как верстальщики относятся к приему "распидорась верстку"

Уникальная книга «Типографика и вёрстка» от @artgorbunov. «Не читал, но рекомендую» =).

artgorbunov.ru/projects/book-… pic.twitter.com/co9Fxg4gNl

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

Кстати, мой любимый сервис картинок-плейсхолдеров: babeholder.pixoil.com
Вариант «с мальчиками» тоже есть. pic.twitter.com/3T9LcKeMHD

Тогда не верьте мне. Нечего там читать. twitter.com/life_maniac/st…

Что-то я «заболтался» с вами «до утра». Я же сова. Пойду-вздремну пару часиков. Обещаю всё прочитать, что вы тут напишите в моё отсутствие.

А что касается #MODX, то это очень удобная CMF на всеми ненавистном PHP. Самая килфича (имхо) — handlebars-подобный шаблонизатор. @midler

Если угодно, #MODX – это как React, а #WordPress тогда будет Angular, #Drupal – как Ember (я не пытаюсь обидеть ваши любимые js-фреймворки).

По сути, любой чистый статичный HTML-CSS-JS-шаблон является валидным шаблоном для #MODX. Пару строк оживят ФОС. Инвалидация кэша из коробки.

Плюс ORM на xPDO. В общем, порог вхождения достаточно корректно отсеивает «школоту» и домохозяек, оставляя именно нас с вами, разработчиков.

Привет, меня зовут Денис @DenisZavgorodny и верстаю

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

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

Сегодня праздники и начнем мы без напрягов, по традиции. В меня все как обычно: sublime+reload+сервер статики. Но, у нас php. Об этом позже.

А еще я не использую препроцессоры, хотя, в команде используют. Использую @PostCSS и то в виде autoprefixer. Остальное все в sublime

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

Кстати, в субботу я планирую посетить IT Weekend #chernowiz Буду рассказывать в тви о происходящем. В этот раз у них тематика frontend

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

а почему нет? мак - это ж не фетиш ) @losewmac

Я чего заговорил о cli. Мы устраивали как-то #nodeschool и я удивился на сколько сложно людям работать в cli. А люди ИТ-ники студенты.

Если вас не пугает cli и запуск чего-то из консоли, ngrok.com. Это я о полезностях. Тунель для вашего локального dev сервера

Т.е. в css (sass) еще и часть атрибутов в html заполняет? Или я не правильно понял? @akrekotun

а, все, сыплю пеплом. Это просто шаблон. @akrekotun

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

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

Привет, народ! Меня зовут Богдан. Я front-end разработчик из Питера. Работаю в SlonWorks/Siemens.

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

Заниматься опен сорсом начал полтора года назад. Тогда же присоединился к команде postcss. Так же разработал postcss-inline-svg.

Мой профиль на github
github.com/trysound
Так же участвую в разработке rollup, buble и только что присоединился к сборщику gobble.

В сименс мы делаем интерфейсы с окошечками и кнопочками. Показываем всякие стрим данные с разных датчиком и того подобного. Внедрил redux.

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

Кому интересно, вот запись доклада Рича Харриса о gobble, предпосылках и целях.
youtube.com/watch?v=9NttxO…

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

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

Тогда всем светит прогресс и процветание. А дальше ишью за ишью, пр за пр, вам дают доступ, ну или просите дать доступ. В итоге есть доступ.

Доступ - это хорошо. Это власть, это возможности. Вам начинают доверять. Вы приходите и говорите: "эй чувак, хочу присоединиться". И вуаля.

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

Крч, делайте для себя. Исправляйте баги, добавляйте фичи, чтобы улучшить свой workflow. Каждый внесет лепту и получится отличный инструмент.

Привет! Меня зовут Исмаил и эту неделю я веду @cssunderhood Надеюсь, со мной будет интересно)

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

Среда - обсуждение ставшего уже распространненным "нестандартного" дизайна сайтов. Пятница у нас будет о рабочей рутине.

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

Итак, живу я в Махачкале, работаю дизайнером и верстальщиком в @ColorITru
Верстать начал в 11 классе, а первый заказ выполнил на 3 курсе

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

В работе я использую Gulp, Stylus + PostCSS и Jade. Просто потому что это удобно и работает.

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

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

Но тут очень популярен PHP. Очень. Ruby, Python и Node.js в работе используются точечно и очень редко. Это и удручает и вдохновляет

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

В Color-IT очень радует открытость руководства к внедрению всего нового. Мне дан зеленый свет в использовании всего, что я считаю нужным

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

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

Сейчас наша студия работает с 1C-Битрикс. И впихивать в ЭТО препроцессоры или какие-то фреймворки нет никакого желания

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

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

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

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

@cssunderhood с поддержкой старых (особенно чужих) проектов - беда,для новых я собрал (собираю) вот такой лисапед github.com/vkryukov76/bit…

Не доводилось) У нас таких клиентов не будет еще лет 10 @nemcik7

Если подвернется такой проект, буду только рад :D @nemcik7

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

Большинство "мамонтов" - в PHP и C#, JS тут плавает на уровне "jQuery для SPA"

За последние несколько лет IT в Дагестане развивается очень даже неплохо. Немаловажную роль в этом сыграло появление @perinnovations

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

В местных веб-студиях до сих пор популярны CMS. Битрикс, джумла, InstantCMS и иже с ними. Редко встречается Yii.

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

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

А использовать, например, реакт или ангуляр приходится только для самообразования, в стол. То же и с node.js. Учить нельзя использовать.

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

Ну простите) Я тогда на работу свой ноутбук таскал, маки были мечтой @sapegin

Ахаха :D Ну я ведь их не поддерживаю, просто описываю ситуацию) @iamstarkov

А как вы взаимодействуете с дизайнерами / программистами / менеджерами во время работы над проектом?

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

Без этого практически всегда верстка была далека от дизайна. Зачастую от того, что верстальщики не умели в ФШ

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

Попадались макеты вообще без групп и с названиями "прямоугольник 4 copy 10", которые шли даже не по порядку.

И после этого было блаженством нарисовать для себя макет и самому же его верстать. И тут появлялись программисты...

Я очень люблю @CodePen и периодически захожу туда за вдохновением и помощью. Иногда делаю что-то свое.

codepen.io/dead_seagull/ вот мой профиль. Делитесь ссылками на свои или те, которые считаете крутыми

Компания. Переход на скрам от каскада, например, все встретили с одобрением. @iamfrntdv

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

Начну с себя. dagpress.com - дизайн меняли три раза. В итоге "креативный" заказчик пришел в офис и руководил, сидя рядом со мной

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

К слову, от отказались от такого варианта. youtube.com/watch?v=Aa6taI… Вкусы кавказских бизнесменов - это нечто.

Теперь понятно, почему все так плохо? :D twitter.com/dbarabashdev/s…

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

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

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

И даже если позвонили, начинается беседа на 10 минут, будто информативно уложиться в 15 секунд - дурной тон.

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

pic.twitter.com/RfnVsjTIxO

Предлагайте темы или вопросы, о чем хотелось бы поговорить?

Вру, на днях подсел на MAME, прошел битемап Сейлормун, подсел на рпг "Illusion of gaia" для SNES. Но все - эмуляторы. Тут больше ностальгия.

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

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

А у кого из верстальщиков есть бэкграунд в геймдеве? Не обязательно коммерческом. Как начали, почему бросили?

Я на первом курсе игрался с конструкторами Game Maker и Scirra Construct, зависал на GCUP. Сделал несколько небольших игрушек и успокоился

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

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

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

Фронтендеров, желающих в геймдев, может привлечь Unity3D с javascript

Пример упорности и упоротости

17-й выпуск «Веб-стандартов»: семантика, CSS новичкам, Git-клиенты, JS-модули, Google I/O — soundcloud.com/web-standards/… pic.twitter.com/9AtwxTtYMH

Вспомнил про одну штуку, которую делал 4fun
Попробуйте расшифровать pic.twitter.com/n2Sf0nJ3oZ

А поиграться с этим можно тут
codepen.io/dead_seagull/p…

@cssunderhood разок участвовал в game jam. Затащили с индюшатиной grawl.ru/geom/

@cssunderhood нечто подобное и со мной сейчас происходит, хирургия) “На этой иконки не видно диафрагмы…”

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

Всем привет из Казани! Меня зовут Илья @Gorenburg и я проведу эту неделю за главного в @cssunderhood.

1) Работаю верстальщиком в компаниях @DroidLabs и @Planiro. Большое интервью со мной публиковало Казанское издание БизнесОнлайн...

2) ...В нем вы найдете информацию обо мне и то, чем занимаются наши компании: business-gazeta.ru/article/136872 Буду рад ответить на все ваши вопросы!

1) План недели таков: совсем чуть-чуть времени уделим всяким фреймворкам, библиотекам и коду...

2) Хотелось бы поговорить больше с вами о повседневных вещах и услышать ваше мнение на темы непосредственно связанные с ИТ и с нашей работой

Сегодня вечером я бы хотел поговорить с вами на тему прокрастинации. Онлайн после 8 вечера по МСК. Что это такое: ru.wikipedia.org/wiki/%D0%9F%D1…

Пожалуй, можно начинать! Есть у вас проблемы с прокрастинацией? Как вы пытаетесь с ней справляться?

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

@cssunderhood Возьму на заметку

Кто еще чем пользуется кроме помодоро для борьбы с прокрастинацией?

-ничего не делай, оставайся в жопе.
-не самый лучший выход
-лучший, не лучший — действенный.
/via @gladkih_m

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

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

Всем привет! На это неделе с вами @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 начинает тупить, вылетать и садить аккум.

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

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

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

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

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

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

@cssunderhood multi-columns :: twitter.com/lazy_frontend/…

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

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

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

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

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

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

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

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

@cssunderhood с ховером где-то был хороший совет: указывать имя тега, например a.link:hover, вроде помогало в IE7.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood critical path нет, а вот отложенные загрузки картинок, видео и прочих больших штук -да.

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

Отлично! Маленький персональный отпуск аккаунта окончен и мы снова live.

Привет. На этой неделе с вами разработчик интерфейсов из Екатеринбурга @evilj0e.

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

Такой роадмап недели я наметил:
Работа → Релокейшн → Обучение → Тексты и блоги → Вдохновение → и в конце недели накидаю на вентилятор.

Разница с Мск у меня +2 часа, так что буду писать утром, пока все спят, а отвечать на реплаи буду примерно в то время, когда все едут домой.

Тема на сегодня: «Работа»

Сразу начну с опроса.
Где вы работаете?

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

Сейчас я работаю в Яндексе, и понятно, что всё технологично и круто, хотя бывает ощущение того, что винтик в громадном болиде прогресса :D

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

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

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

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

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

Фриланс хорош иллюзией того, что ты свободен, можешь говорить, что ты «один» запилил большой проект (оч важно).

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

Есть ли у вас проекты по фрилансу, которыми вы гордитесь?

Плюсы есть, но о минусах забывать тоже не стоит.

@cssunderhood поиск заказчиков, общение с людьми, утверждение ТЗ, договора, разделение зон для заказчика, приёмка продукта, поддержка...

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

Кстати, ребята-фрилансеры, кто ваши заказчики?

@cssunderhood Мелочи вроде genn.org, да и я решил больше этим не заниматься — не остаётся времени для своих проектов.

Применяете ли вы современные технологии, новые фреймворки в своих проектах?

Рынок фриланс услуг в айти плох тем, что в него очень низкий порог входа ⇒ низкая средняя стоимость часа/задачи, не высокое качество услуг.

Какой фрилансер не хочет запилить свой стартап? Я подумал так же и начал пилить ГИС-сервис — сдать диплом и сервис. Комбо.

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

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

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

Недавно прочитал «Доставляя счастье» Тони Шея и это настоящий триллер о том, что даже мелочи стоит учитывать. mann-ivanov-ferber.ru/books/paperboo…

Был ли у вас опыт сотрудничества с бизнес-акселераторами/бизнес-инкубаторами? Что вам запомнилось?

Вариант: "Агентство/Студия". Здесь я побывал и на стороне и исполнителя и нанимателя и есть очень большое отличие от фриланса и стартапа.

Со стороны работника всё просто: «Хочу волшебные, полезные, технологичные проекты, которыми буду гордиться и, чтобы деньги платили, конечно»

Со стороны нанимателя: «Поиск проектов, стратегические решения, платить работникам, администрирование и управление, басфактор»

После успеха в инкубаторе мы создали дизайн-студию devdigital.ru
На небе появились облака.

@cssunderhood Выберите два пункта из трёх. И откажитесь от них.

Дело было 3 года назад и было решено остановиться на минимализме в интерфейсах, сделать большой уау-эффект от сайта. Такого вообще не было.

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

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

Есть здесь те, кто вкладывается в опенсорс и верит, что это необходимо? Какие ваши последние репозитории?

@cssunderhood топ-10 специалистов по специальностям. Не компаний,а именно специалистов

Остаётся и увеличивается проблема оптимизации процессов, поиска клиентов и прочее, но и цели больше.

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

Мне не хватало технологичности и я оставил студию очень хорошим ребятам и ушёл в Яндекс.

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

Всё, ребята, закругляюсь.
С вами был Антон Конев @evilj0e, разработчик интерфейсов из Я. Пишу обо всём, подписывайтесь.

Пишите красивый код и делайте веб удобнее.
Удачи!

Раз раз, приём, тут вообще кто-нибудь жив?

Кто-то есть. Всем Привет! На этой неделе с вами Сергей Попов. Фронтенд разработчик из компании Setka.io

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

Я выступал на этих выходных на конференции @webstandards_ru где говорил о молодых специалистах, потом все выходные топил на эту тему на FB

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

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

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

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

Ну и естественно поговорим о технологиях, похоливарим и так далее.

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

Давайте для затравочки, для тех кто ещё не видел мой доклад и кто не знает какой в нём посыл

youtube.com/watch?v=bEWLTQ…

А для тех кто сидит на работе и не может посмотреть – текстовый вариант выступления goo.gl/6jq3b9

Я пока пойду поработаю pic.twitter.com/L6VAgxOr4E

ну что, кто был на #wstdays в Москве в эти выходные?

Больше 40 процентов было на #wstdays. И каково ваше впечатление?

Список статей, которые мотивируют вас стать докладчиком и делиться опытом с другими. @cssunderhood… twitter.com/i/web/status/8…

@cssunderhood впервые была на конференции по фронтенду; откуда-то было странное ощущение, что все люди вокруг - свои, и чуть ли не семья.)

@redhead_jules @cssunderhood О, это прекрасное чувство! Я выбираюсь из дома только ради этого ощущения единения и комфорта в толпе =)

Давайте поговорим всё таки о новичках. Тут наверняка есть новички, которые уже где-то работают. Расскажите, в вашей компании берут новичков?

А если вы сам компания или не новичок, нов компании, тот же вопрос, у вас берут на работу джунов, на вырост?

Что неужели только 4 компании берут себе новичиков? Остальные стестняются? :) или всё так плохо?
Можно мне в личку писать если что)

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

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

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

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

у нас нет обходов лицензии, мы за все шрифты платим абонентку

Доброго дня коллеги.

@cssunderhood человек-рефакторинг!

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

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

Ради интереса опрос. Где вы работаете?

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

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

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

Надо поработать, вернусь позже.

@cssunderhood Хуже потокового клепания сайтов студиями только клепание этими студиями своих CMS. Вот это ваще веселуха.

@MhMadHamster @cssunderhood я думаю это происходит не так. Человек просто не интересуется своей отраслью.

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

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

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

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

Ты спрашиваешь его на чём строиться сетка у третьего бутсрапа или из чего состоит clearfix и человек зависает.

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

@katealf @cssunderhood На самом деле, достаточно спросить поисковик toster.ru/q/143443

В Петербурге мощнейшая радуга. pic.twitter.com/GTPt4wLhIV

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

У меня как у наставника чаще всего студенты поступают вот так. Обнаружить проблему – спросить наставника.

А хочется. Обнаружил проблему – попробовал решить сам – погуглил, поискал решение – спросить наставника. Не хватает самостоятельности.

@cssunderhood Блин, я вот щас перечитал переписку с интенсива и думаю, как я такие вопросы мог задавать? Чувствуется, вырос

@cssunderhood Возняк согласен) pic.twitter.com/hJYspr3QJF

Всем доброго дня/утра! Надеюсь большинство из Вас уже проснулись? Если что - простите, что разбудил) Сегодня будем городить об инструментах.

Начну я с себя, точнее с того как у меня проходит процесс верстки.

Я в работе использую связку @sublimehq + @avocode + @gulpjs. Верстаю на @less, обычно без фреймворков.

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

Еще в последнем проекте попробовал использовать TARS (goo.gl/0Xe8Q4) как готовое решение, но смолкнулся с проблемой при обновлении

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

Опишите путь, который вы проделали к вашему текущему редактору:) Вот мой пример: Блокнот -> NotePad++ -> ST -> Atom -> PhpStorm -> ST

@cssunderhood Да и читается в коде лучше.

Вообще, я думал сделать днем холиваров не сегодняшний день, но, видимо народ к этому душой тянется:)

Возможно, надо уточнить. Я 90% времени трачу на верстку, не на JS. Это мой случай, и потому IDE-плюшки мне нужны меньше, чем многим из вас.

Ох, чую, если сейчас напишу что BEM почти не использую - вообще у уважаемых людей всё повзрывается... :)

Благодарю всех за высказанные мнения! Я покину Вас на какое-то время, после возвращения немного сбавим пыл сражений:)

@ardshock @cssunderhood плохой практикой это считают сторонники неадекватно крайней простоты. ни Pug/Jade, ни Sass, только хардкор.

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

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

Предлагаю немного сменить тему на менее эмоциональную:)
Хочу поговорить с вами о том, как Вы упрощаете себе сам процесс написания стилей.

@cssunderhood Для начала поделюсь своим опытом в Sublime Text.

Для начала хочу рассказать Вам о своем плагине, которым я для себя упростил работу со стилями с Emmet: goo.gl/0NgQhp.

@cssunderhood Если кратко - то писать стили в одну строку и раскрывать в конце весьма удобно.

Так же, например, когда мне нужно получить список классов из HTML, я использую плагин Tag в ST, точнее его команду Get CSS Classes

Для той же цели для Atom я, когда с ним работал, написал подобный плагин: css-from-html, получив некий профит в скорости.

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

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

Теперь у меня есть, например, сниппеты, которые помогают мне писать такие штуки (этим я расширяю для себя emmet): pic.twitter.com/Dec9tvAEOt

@cssunderhood конкретно эта конструкция у меня раскрывается по аббревиатуре "ss" :)

Кстати, помните в свое время было много шума по поводу проекта livestyle.io Они не так давно обновились, кто-нибудь пользуется?

У меня назрел вопрос. Многие ли из Вас используют в качестве браузера для работы (конекретно для верстки и написания js) Firefox? И почему?

@cssunderhood перестал использовать, т. к. CSSComb перестал парсить мой код, поэтому написал postcss-sorting github.com/hudochenkov/po…

Вот скажете - мелочь, а меня в FF всегда напрягало, что нельзя поскролить значение вот тут (только стрелками): pic.twitter.com/Vtj1U41CQa

@cssunderhood ретвитни пжлст. Ребят, кто-нибудь решал задачу «тихой» печати из браузера? Поделитесь опытом? Нужно совсем без окон.

@cssunderhood @indieloki github.com/A/code-screens…

@cssunderhood @i_MiF я сейчас поняла, что вообще не замечаю дизайна Хрома, и это круто! А в других браузерах интерфейс раздражает

@cssunderhood кину и свой вариант. Тема: Afterglow (я в нее просто влюбился) + Droid Sans Mono/16

Раскладка Ильи @ilyabirman Бирмана —«швейцарский нож» в вашем арсенале веб-типографа. pic.twitter.com/mio1SVIEaY

@Wingerie @cssunderhood вот поэтому и нужны правила. Язык – это не про выживание смысла, а про его развитие.

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

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

Для тех, кто мается бессонницей: доклад Михаила Макишвили (наверняка, видимый большинством из вас уже миллион раз): youtu.be/xPPCzryZK44

И ещё: харизматичный Алексей Аболмасов о «Прикладной эмпатии» с питерского IT NonStop @DataArt_Dev
youtu.be/0rOXcQT0wBA

Всем доброе утро! -__-

Последние несколько лет я пользуюсь Sublime Text. Были попытки подружиться со Штормом @jetbrains, но он показался мне излишне монструозным.

А сейчас очень хочу попробовать полностью перейти на Vim. Но как-то ссыкотно… Этакое двойственное чувство одиозности гложет.

Что, не знаете, что такое «одиозность»? И я не знаю. Но гложет…
— А. Покровский, «Расстрелять!».

.happy,
.birthday,
.to,
.you,
#happy,
#birthday,
#to,
#you{}
.happy.birthday,
.dear, /* @lapanoid */
#happy_birthday,
#to_you{display:cake}

Сейчас позавтракаю под серийку Scrubs и буду потихоньку собираться на митап-дринкап #modx. Будем обсуждать фронтенд — присоединяйтесь!

Кстати, ваш покорный слуга — несостоявшийся врач. А ещё я гвардии старшина медицинской службы запаса 0_о

Минутка юмора на @cssunderhood:
— У меня девушка: 90-60-90.
— Фиолетовая что ли?

Lisp: Code is data
Haskell: Data is code
Ruby: Strings are code
JavaScript: Undefined is not a function

Я на месте в Commode на ул. Рубинштейна, 1. Открыт для общения по #MODX и фронтенду на ближайшие часа 3-4.

Мой Буцефал, начало 2011 г. @twenty @mrmlnc pic.twitter.com/aV4RaChT0r

@cssunderhood вопрос учасникам, со стажем. какой редактор был популярен во времена Mac G4? Нужно настроить среду на 10.5, что посоветуете?

@cssunderhood невозможно читать на этой недел

В принципе, ST3 полностью устраивает, но как ещё унифицировать server-side? Не подымать же Иксы ради этого. vimtutor проваливаю на середине.

Шарить свои плагины не вижу смысла – у вас есть проблема, вы находите её решение в виде плагина. Проблемы у всех разные, схожие уже описаны.

Много слышал о преимуществах #b_. Сам люблю и практикую. А кто может привести доводы «против» (CSS Modules не в счёт, это читерство 😇 )?

Enb сам по себе прекрасен и удобен, простыни конфига в скором времени перестают пугать. А разруливание зависимостей в DEPS.js вообще огонь.

Но если использовать, например, @PostCSS, #b_ как лишь методология именования для изоляции и специфичности теряет смысл за счёт CSS Modules.

И получается: «Я тут только @autoprefixer поставлю…» А через 5 минут: инжект SVG, CSS4, литеры и 13-колоночная сетка с автоинклудом шрифта…

Принятие #БЭМ начинается с паломничества в чертоги bem.info, распения методологии и обряда #b_ мозга… pic.twitter.com/R5SyWOAdmz

Ммм, на wercker.com появились pipelines. До праздников их не было, по крайней мере в бесплатном аккаунте.

Новый день, новые истории. Меня постоянно волнует вопрос эффективно ли я работаю, а как назвать класс .top-menu__cart-page--static

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

А вот оценить макет вам не поможет cli утилита или плагин grunt

Как вы оцениваете сроки? Есть ли какие-то нормы в команде? Например, главная страница - 6 часов?

@cssunderhood т.е. какие-то среднепотолочные сроки

Вопрос не к фрилансерам. Кто регламентирует нормы времени на верстку? Другими словами кто вам ставит задачу и сроки выполнения?

Так проще будет и нагляднее, наверное. @cssunderhood

Думаю, все подписаны на @webstandards_ru но я продублирую soundcloud.com/web-standards/… вышел 15 выпуск.

Сам, правда, еще не слушал

А вот еще такой вопрос, меня волнующий. Качество работы верстальщика. Как ее обеспечить. Т.е. не тот чеклист @ihorzenich, а речь о человеке.

Т.е. построение процесса самого, контроль качества кода @cssunderhood

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

Начну с себя. У нас bitbucket->wercker->ftp Примерно такой цикл. На ftp из master в случае успешной сборки.

Успешность сборки - прохождение линтеров.

Речь сейчас только о html верстке. Т.е. до интеграции еще не добралась она.

А что не так? Это домен со всей статикой. Т.е. верстка после репозитория и прочих штук попадает по ftp сервер. @denysbutenko

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

И вот нужно что-то переделать. Но, оно ж работает. Как объяснить клиенту, да и менеджеру?@cssunderhood

Так все же, код вылизываете? Следите за семантикой? Или div-ом можно сделать все?

Я вчера буквально видел верстку, в которой вместо ссылки использовался div и onclick с location.href Удивился.

<i> забыли ) @webholt

А помните, такая штука была raphaeljs, еще пользуется кто-нибудь им? Я чего спрашиваю, у меня raphaeljs.com домен не резолвится

Дмитрий, вы в курсе? @DmitryBaranovsk @cssunderhood

Да, клевая штука, но raphaeljs он же... он же мог! Он магию делал с ie @f0rmat1k

Агаааа, raphaeljs.com -> dmitrybaranovskiy.github.io/raphael/ Все на месте, кстати, даже коммиты какие-то в репозиторий есть.

Кто линтит стили и какие именно стили, ну и чем?

Кто-нибудь юзает css-modules и в каком контексте?

@cssunderhood Начинал, как все с GM, в школе на конкурсах занимал места. Потом перешел на unity 3D и через врем забросил

Вот видишь, за год сразу в миддл) Сила пиздюлей недооценивается. twitter.com/dbarabashdev/s…

Дробное утро, друзья. Я патологическая сова, так что утро у меня начинается в 11 утра.

Сегодня будем говорить о пересечении верстки и дизайна

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

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

@cssunderhood вопрос ко всем: как задаёте отступы блокам? стараетесь ли делать это централизованно, например через сетку?

Просматривая зарубежные вакансии, я заметил, что у них нет отдельной должности верстальщика. Только web-designer и frontend developer

Люди, которые только рисуют — графические дизайнеры. А если назвался веб-дизайнером, изволь знать html/css/js

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

И вот эту "лицевую" часть сайта разбивать на верстальщика и дизайнера немного странно. У каждого человека в любом случае свое видение.

О том, чтобы кнопки работали, таблицы сортировались, данные сохранялись. А следить, чтобы кнопки не съехали - работа верстальщика @Sigiller

@alexzdesign @cssunderhood 1) чем лучше дизайнер понимает вёрстку, тем лучше потом будет свёрстан его макет
2) дизайнер - не художник

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

Дизайнер должен быть немного верстальщиком и наоборот, верстальщик дожен быть немного фронтендером, фронтендер бэкендером

Для верстальщика жизненно важно уметь работать с редактором, в котором нарисован макет.

Кривая верстка из-за неумения посмотреть размер шрифта, или правильно вырезать иконку - частая история.

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

Реализация макета должна подчиняться стандартам веба, их нельзя игнорировать. @alexzdesign @Sigiller

на глазок @koderhan pic.twitter.com/R9gS1WkFxb

А кто из вас работал над сайтами с большим количеством анимации в интерфейсах и на странице? Как приходили к общему видению?

Подниму еще одну холиварную тему. Сайты с обилием анимаций и эффектов, коими заполнены awwwards.com и cssdesignawards.com

Обычно обсуждение делится на два фронта: 1) "Анимации не нужны в продакшене"; 2) "Анимации есть добро и несут счастье"

Например, сайт navigatingresponsibly.dk
Невероятно красивые анимации и переходы, параллакс, интерактивные элементы.

Стоит ли "wow"-эффект огрехов в UX и как определить золотую середину?

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

@cssunderhood да кого волнует, что думают разработчики? Самое главное - что думает клиент и его аудитория! :D

Еще один очень красивый сайт
lookbook.quechua.com/spring-summer-…

От анимаций кнопочек и плавности параллакса хочется визжать аки маленькая девочка

Я фанат красивого UI.
Особенно нравятся анимации A->B, B->C, а не A->B->A, когда при сдвиге мыши анимация продолжается, а не реверсится

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

Есть такое, да. НО КРАСИВЕНЬКО ЖЕ! @revakoreva

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

Побуквенная анимация текста грузит браузер, но в умелых руках смотрится очень изящно и "so smoothly"

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

я запустался .-. @webholt

@cssunderhood был товарищ, который всегда, всегда выбирал самый страшный. Как с ним не боролись, как ни подбирали варианты

Немного фронтендером. Но главное - человеком @nemcik7

Коллеги верстальщики и дизайнеры, а сколько макетов было в вашей самой большой работе?

В работе над resort-elbrus.ru я нарисовал 25 макетов. Сверстал половину, но потом ушел из той студии. Сайт попиливают до сих пор :\

@cssunderhood 5 гигабайтов.

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

Он самый @c01nd01r

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

@cssunderhood оу, мои мечты сбываются :-) Дизайнера заставили верстать его творение. Справедливость существует посоны!

@cssunderhood дело было так: анимация — зло ==> статика — всепоглощающающее благо ==> решено!

Тут или чувак меня неправильно понял или у него реально было в 600+ макетов в одном проекте @GolubevVictor

Если буква = состояние, то да, так вернее @trolizmaslom

Айтишники, не умеющие в английский язык, всегда будут в хвосте.
Наболело.

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

@cssunderhood помидорка не решает проблему прокрастинации — её решает дисциплина, либо планирование

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

Итоги вчерашнего онлайна борьбы с прокрастинацией: помодоро, дисциплина, планирование, почасовая работа, кредит (все вместе или отдельно)

Сегодня вечером хотел бы поговорить на тему CSS, БЭМ и @getbootstrap. Пообщаемся сегодня в 8 вечера по МСК

Всем доброго вечера! Хотелось бы начать с обсуждения CSS. Как вы придумываете названия классов в больших проектах? Есть ли у вас свой гайд?

Про БЭМ. Я ненавижу БЭМ. Вот честно. Я не могу как его можно использовать имея по 5-6 классов на одном диве (это про modifier)?

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

И еще немного про БЭМ. БЭМ в CSS - это как предложить человеку без ноги заменить руку на руку робота. Не, ну а чО, работает же! :)

Кстати, вчера на хабре вышла статья о 5 методах в Flexbox о которых уже все знают %)
habrahabr.ru/post/302130/

А кто-нибудь пишет гайды какая структура файлов, как именовать классы? (для себя)

@cssunderhood нормально. Зато всё понятно.

Сегодня давайте поговорим про организацию 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

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

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

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

@cssunderhood было, конечно, но это как-то не воспринимается как некое важное карьерное достижение. Как-то уменьшил 300kb CSS до 160kb.

@cssunderhood это не минификация и гзип были, в полный рефакторинг. Выкинул стотыщ ненужных position:absolute итп, зарулил все на поток.

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood переделывал кипу CSS в стиле “фрилансер сверстает нам приложение”. под Angular. первым делом удалял классы из HTML.

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

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

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

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

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

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

@cssunderhood делаем битбакетом.

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

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

@cssunderhood Делаем. К сожалению внутренним аналогом Гихаба (каким он мог бы быть в 1990-е).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood smashingmagazine.com/category/uxdes…

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

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

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

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

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

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

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

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

@cssunderhood вот это еще круче css1k.net

@iamale_ru @cssunderhood Подробности про вакансии brightcomputing.com/jobs?__hssc=17…

@cssunderhood сейчас предстоит это, я с ужасом думаю. Пытаюсь покрыть тестами регрессии :(

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

Доброй ночи :)

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

@cssunderhood github.com/admdh/adm-dev-… - сейчас работаю над этим. А ещё есть пара плагинов для @PostCSS. Опенсорс помогает развиваться)

Релокейшн.
Люблю писать транслитом иностранные слова. Это переезд в другой город/страну при устройстве на работу, но всё ли так просто?

Когда я говорю «релокейшн», что приходит вам на ум? Заграница?

У большей части людей, с которыми я обсуждал это всё было 2 мысли:
1) Москва;
2) Страх.

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

@cssunderhood скорей переезд. Вот мы переезжаем всей фирмой в Симферополь — релокейшн, хотя лучше «переезд» всё же =)

Сейчас громадное количество предложений и про СПб, Европу, USA. Пункт про Москву меня всегда радовал.

Как думаете почему, когда столько много вариантов, таким лакомым в головах людей остаётся переезд в Мск?

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

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

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

Начнём с самого «большого» переезда – за границу.

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

Если вы задумываетесь о светлом будущем, например, в USA, то советую @abroadunderhood. Опыт без регистрации и СМС.

У вас был опыт переездов? Что вам понравилось или хотели бы улучшить в процессе?

У меня не было опыта переездов за границу. Кажется, что разницы между переездом по РФ/загранице немного. Может только условия и бонусы выше.

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

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

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

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

92% опрошенных ответили, что задумывались о переезде. Вернёмся в РФ. Хочу опустить пока переезд в столицу и СПб. Вы рассматривали города РФ?

@cssunderhood эээ? А они существуют? :)

@cssunderhood Для меня самыми полезными были stackoverflow.com/jobs и berlinstartupjobs.com

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

Как думаете, проще ли проходить собеседования дистанционно? У вас был такой опыт?

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

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

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

Ещё сейчас модно проходить собеседования в колабораторных редакторах. У кого-то был такой опыт?

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

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

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

@cssunderhood Искал бы тут.

Ещё есть страх того, что там нет никого из знакомых и близких. Человек в социуме и прочее, но так ли это важно, когда есть соцсети, скайп?

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

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

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

@cssunderhood бывшие нормальные коллеги.

@cssunderhood Был. Проще.

@cssunderhood проще в том плане,что никуда ехать не надо и о времени договориться. Но в плане вопросов - всё тоже самое и нисколько не проще

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

@cssunderhood 1. Записываешься в кружок по интересам (языки, рисование и тд).

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

В новом городе, вы можете жить в любом районе. Вы бы выбирали жильё ближе к работе?

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

По фоткам она была ок: натяжные потолки, ламинат, а на деле умирающая хрущёвка в лучшем состоянии 😂 @cssunderhood @GrawlCore

.@SheVasya @GrawlCore, это ”ужас какой-то”

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

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

@cssunderhood В Берлине с этим тоже туго.

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

@cssunderhood Не везде можно работать без прописки. @doberbober

@doberbober github.com/ewgRa/de_faq/b… @cssunderhood

А тут есть дизайнеры?

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

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

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

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

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

@cssunderhood вместо тысячи слов. pic.twitter.com/KthM54XDQz

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

А почему никто не говорит про @sketchapp? Мои знакомые говорят, что дизайнеры поголовно переходят на него.

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

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

Верстальщики у которых нет мака, как вы открываете макеты, которые дизайнер рисует в @sketchapp ?

@cssunderhood когда не было открывал через зепелин

@cssunderhood для этих целей есть @zeplin_io

@cssunderhood @sketchapp у меня стоит виртуальная машина с маком, всё отлично работает и верстается pic.twitter.com/9b1sXWA1nT

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

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

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

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

@cssunderhood много лет назад atrium.su я верстал с jpg. Суровые времена были.

По каким причинам дизайнеры могут не готовить макет для верстальщика? Это неграмотность специалиста или лень например?

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

@cssunderhood Вот видео в тему, для дизайнеров больше. Но все же. youtube.com/watch?v=lW4uzJ… @pepelsbey, спасибо за интересный доклад!

На этом ретвите на сегодня всё. Продуктивной ночи.

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

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

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

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

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

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

Самым частым выбором первого редактора оказался NotePad++. Аплодисменты ветерану!

По общему количеству упоминаний (и, видимо, времени использования) использования лидируют PHPStorm/WebStorm.

Самый частый переход с редактора на редактор: SublimeText -> PHPStorm/WebStorm.

Ну и, наконец, в номинации "Использую сейчас" - тоже побеждают PHPStorm/WebStorm, за ними с отрывом в 3 очка оказался Atom!

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

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

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

А помните, я обещал вам устроить небольшой литературный конкурс? Можете не отвечать, конечно же помните:)

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

ИТАК, ПРАВИЛА КОНКУРСА: до воскресенья присылайте мне в личку небольшой текст на тему: "Почему я в веб-разработке?"

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

Авторитетным жури выступим я, жена моя и Марина Ивановна, теща моя распрекрасная.

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

Надеюсь, Вам будет интересно попробовать себя в этом и, заодно, поделиться с нами дельными мыслями!

@cssunderhood поправочка, "жюри", конечно :)

Я пока сбавил активность — по совету @niquola поставил Spacemacs, пытаюсь освоить его. Пока такое двойственное чувство, как в шутке про Vim:

— Я уже пять лет работаю в Vim. Просто не знаю, как отсюда выйти…

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

А «верстали» ли вы под React Native? А то смотрю я тут доклад Алексея @doochik Андросова и ху… когнитивно диссонирую
youtu.be/RwTmWpZ0MyA

По поводу личной эффективности я не лучший пример, имхо. Но кое-какие наработки имеются, сейчас расскажу, спасибо за идею, @hiway_real

Пробовал использовать Toggl, но почему-то он понравился мне меньше, чем @trackingtime – аналогичный функционал free. pic.twitter.com/L2z4fVNho8

Для личных нужд ещё хорош «помидорный» PomoDone, синхронизируемый с Вундерлистом (предпочёл Тудуисту) @d3head pic.twitter.com/J17ti5juI3

Все мои достижения в сфере веб-разработки — самообразование; специализированного диплома у меня нет (разве что фельдшера). Не жалею ни чуть.

Я поступил в ИТМО экстерном на середину второго курса на бюджет. Но с помощью каких-то махинаций «выше» меня зачислили на платное.

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

Но когда в хвалёном ИТМО тебя в 2011 г. учат скруглять углы пнгешками, а на CSS3 преподаватель смотрит, как на магию, невольно задумаешься.

После того, как бросил ИТМО (они якобы перевели на бюджет на 3 курсе, а спустя полгода опять потребовали деньги — или плати, или вали)…

… поступил в Британский институт искусства и дизайна. Но, как вы понимаете, ТАКИХ денег на обучение у меня точно не было. Тешил самолюбие.

@Sigiller Это я к тому, что высшее образование, желательно два-три — нужны @cssunderhood

А проверяете ли вы свою вёрстку в Opera mini? Вопрос, конечно, субъективный — зависит от продукта. Но всё же… pic.twitter.com/b9kCSajYjp

Когда вы забываете об Opera mini, где-то грустит один Леонид Аркадьевич, а Вадим @pepelsbey Макеев ему тихо вторит… pic.twitter.com/3jG7Bnhh11

Какой атрибут элемента <html> включает механизм кэширования страницы? Уже используете на своих проектах?

В него можно было добавить steps Я использовал simpletechs/ftp-deploy-exclude Искать тут app.wercker.com/#explore/steps… @Copypasting

Еще вариант, добавить в свой grunt (gulp) какой-нибудь ftp-deploy и запускать его после билда в контейнере wercker @Copypasting

У меня сегодня день рождения, буду снова смотреть youtube.com/watch?v=xPPCzr… А позже поговорим о самореализации и куда расти верстальщику

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

А куда дальше? Менеджеры?

Я в 25 не особо задумывался над этим, а сейчас уже поздно, наверное

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

Тут велика роль наставника, мне кажется.

Свое дело, т.е. Да вариант. @dbarabashdev twitter.com/dbarabashdev/s…

Тут вот интересуются @dbarabashdev twitter.com/dbarabashdev/s…

Я заговорил о наставнике. А вам нужен наставник? Ну или хотели бы иметь?

Увидел в профиле @asakasinsky должность веб-технолог Это так согрело душу. Веб-технолог это более широкое понятие нежели фронтендер?

Интересные результаты опроса о наставнике. 68% процентов хотели бы иметь наставника и лишь 8% его имеют. Тимлиды и менеджеры - задумайтесь

Какие мысли о разметке в js без jsx?

Рассыпчатый вопрос: кто и почему до сих пор сидит на es5, а не транспилит es6?

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

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

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

Так появилась группа вконтакте vk.com/frontseagulls и чат в телеграме. Пока все только онлайн, но уже на подходе первая встреча.

Не хотелось ставить в название что-то вроде "dag" или "05", поэтому выбор пал на чаек. pic.twitter.com/cWJbHKkzOp

Чайки ассоциируются с морем, они классные и я их люблю.

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

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

Пробовал и гиттер и слак. В слаке даже набралось сколько-то людей и воцарилась тишина. Необходимость регистрироваться отсеивает много людей.

Вопрос к жителям "не-столиц". Какие конференции вы посещаете, участвуете ли и как они вам помогают?

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

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

Тут очень помогает доклад @olmokhov "Путь бобра".
youtube.com/watch?v=b7kFvT…

@cssunderhood ездил в Харьков, Киев и Москву на конференции. Узнавал новые фишки, общался с людьми. Это давало понимание некоторых вещей

@cssunderhood ну разные бывают. обычно компании проводят. itnonstop, javaday. И фонды (ФРИИ). Если ты эксперт, особо не помогает) это связи

@cssunderhood в моем городе Гродно ничего подобного не было :( смотрела онлайн и ездила. а потом перебралась в Минск.

@cssunderhood иногда проводятся необычные встречи, правда. По дизайну и мини-воркшопы. Это наиболее полезные сходки) иногда приглашают топов

Макетов нет, но вы держитесь!

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

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

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

@cssunderhood если честно, я вообще не использую препроцессоры, сборщики, git и живу нормально)

Не сразу) @_yukkat

@zeihlis @id2473 @cssunderhood habrahabr.ru/post/282333/

@cssunderhood в двух местах работала с битриксом. Фронтенд всегда настраивали как хотели

@cssunderhood не знаю, как там с крупными проектами, но я смысловые названия пишу. searchmd, newsmd и подобное. Чтоб по названию было ясно.

Как работать с CSS-препроцессорами и БЭМ: nicothin.github.io/idiomatic-pre-…
/via @moskwin

Соглашусь. Один — класс от блока, второй — модификатор (если нужен). Ну и максимум третий — класс миксования. @cssunderhood

Если это layout-элемент, то класс от блока layout__ может быть. @cssunderhood

Если 5-6 классов и при этом — это «БЭМ», то это уже не БЭМ, а классянка. БЭМ — это как раз про уход от атомарности. @cssunderhood

@moskwin single-responsibility principle, functional CSS и все такое @cssunderhood

Я бы выбрал первый вариант. Комьюнити, поможете Александру с выбором? :) twitter.com/AlexanderEin/s…

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

Вы ведете свои проекты? Вечерам или в выходные? :)

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

2) ...желание пропадает, приходят новые идеи проектов, которые более приоритетные и еще масса причин. Поэтому лекарство - фуллтайм!

Один проект хорошо зашел - я получил поездку в Кремниевую долину от Казанского ИТ-парка на 2 недели. Было очень круто. Проект в итоге закрыл

@cssunderhood Я к тому, что у людей есть время на подобное. Но чаще при этом основная работа у них не шибко крутая (хоть и уместная).

@cssunderhood мои проект - моя работа. Я стартапер)))

@cssunderhood Я веду свой проект, кажется, круглые сутки:)

@cssunderhood На счёт того, что на это уходит всё свободное и не свободное время - абсолютная правда!

Сегодня вышла статья на @smashingmag о БЭМ: Борьба с 10-ю основными проблемами в БЭМ: smashingmagazine.com/2016/06/battli…

Большой материал на тему прокрастинации: Почему прокрастинация полезна: vc.ru/p/adam-grant-t…
БРОСАЕМ РАБОТУ И ПРОКРАСТИНИРУЕМ! %)

Вчера на vc.ru задали вопрос: Как совместить постоянную работу и стартап: vc.ru/p/problem-14879

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

@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

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

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

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

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

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

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

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

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

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

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

@cssunderhood какого рода стресса?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood и обратное тоже верно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@cssunderhood в первый год работы верстка стано�