Всем привет! Эту неделю по ту сторону аккаунта я, Дима Вислов aka @vdv73rus Просыпайтесь )

Верстаю разное уже 7 лет. Прошёл через продуктовые компании, веб-студии, Битрикс и IE6. Сейчас работаю удалённо в hexlet-source.com

.@talgautb и все-все-все, вещание будет из UTC +3

@cssunderhood над чем сейчас интересным работаешь?

.@pvpshoot разные реакто-штуки (да-да, стильно-модно-молодёжно), но наш аккаунт не про это ;)

У кого бывает проблема сочинения названий цветов для препроцессоров? Я использую этот сервис chir.ag/projects/name-…

@cssunderhood но только сейчас поймал баг: #666666 и #6c6c6c назвал мне одним именем. Козявка!

@cssunderhood @pvpshoot расскажи про свой воркфлоу в вёрстке )

.@juwain @pvpshoot Инструмент сильно зависит от задачи: SPA || React —webpack, статика на gulp, для RubyOnRails сразу интеграция в проект.

Вдогонку к цветам: используете ли плагины подсветки цветов в стилях вроде atom.io/packages/pigme… или github.com/Monnoroch/Colo… ?

@cssunderhood мне нравится горошек ^_^ pic.twitter.com/pUgxLr00X0

@cssunderhood целиком цвет подсвечивать смотрится громоздко, а кружочки кайфово!)

@cssunderhood цвета пробрасываются сквозь переменные и файлы, и это мне нравится. pic.twitter.com/LFY6gzVlOP

@cssunderhood а для sublime 3 'горошка' нет?

@cssunderhood А вот, похоже, определялка названий цветов для мака: itunes.apple.com/ru/app/color-n…

.@usernamus На скриншоте одна из цветовых тем проекта, её могут кастомить сторонние разработчики со своим взглядом на КАПС букв в цветах )

@life_maniac @cssunderhood есть packagecontrol.io/packages/Gutte…

.@ru_rodweb @life_maniac в TODO однако ж там "Add support for SASS/LESS variables" и "Support for CSS gradients and named colors"

@cssunderhood @life_maniac Atom 1:0 Sublime :-(

@cssunderhood Юзаю #pigments для @AtomEditor. ColorHighlighter для саблайма сильно его вешал, а тут всё чётко. pic.twitter.com/xetmFuhYc8

.@iamstarkov @usernamus в некоторых компаниях есть StyleGuides где чётко прописано о маленьких буквах в цветах.

@cssunderhood я немножко расстроился. Оказывается, поиск в пигментах работает только в препроцессорных файлах, а в обычных css - нет.

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

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

@cssunderhood поэтому я складываю цвета в виде массива в самом начале _uikit.styl и в блоках далее использую только индекс массива

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

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

@cssunderhood Вот еще есть сервис name-of-color.com

@sapegin @rimmer333 @cssunderhood дополнительные цвета я просто порядковыми номерами именую, чем больше номер - тем реже встречается

Меня бесят ошибки/опечатки в именовании классов и id: <div id="freind">, <div class="foto"> etc. Стыдно с таким в продакшене? Боретесь?

@cssunderhood сюда же отнесём программистов, которые передают тебе код для вёрстки, а там в <h1> ГАЛЛЕРЕЯ.

@cssunderhood конечно) стыдно, когда ошибки в проде видно!

@cssunderhood ну конечно же надо писать <h1>Галлерея</h1>, а если надо все заглавными буквами, то ttu стиль применить. Эх, программеры, да?

@cssunderhood своих стараюсь не допускать, с чужими борюсь. Комичу «fix grammar nazi»

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

@cssunderhood конечно стыдно.

Поэтому я иногда натравливаю в репозиторий какой-нибудь спеллер, например этот npmjs.com/package/yaspel…

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

С именами классов вспомнилась байка про селектор .h-and-g
Угадаете, что это за блок на странице?

Ну ладно, это, по мнению автора, Hänsel und Gretel.
Или хлебные крошки по-нашему.

@sapegin @cssunderhood Бесплатный аналог apple.co/1K0JZO4

Поговорим о проблеме пользовательского ввода. Я имею ввиду визуальные редакторы. WYSIWYG-штуки типа ckeditor и т.д. и т.п.

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

Страшнее «умные» пользователи, которые могут намутить layout и написать JavaScript прямо там в тегах <script>, <style>.

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

Выход: можно прокидывать это всё в конфиги редактора. Такое себе удовольствие.

По организации пока не придумал ничего лучше оборачивать такие блоки в .wysiwyg-content и писать стили на элементы .wysiwyg-content h1 etc.

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

Считаю, нужно ограничивать пользователя markdown разметкой.
Удобно и без неожиданностей типа <style>body {display: none;}</style>.

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

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

@cssunderhood или сделать ещё круче — убрать редактор совсем. Пускай человеки фокусируются на содержимом, а не играют со шрифтами.

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

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

.@Sigiller Но почти все коробочные решения его пихают в практически любое textarea-поле панели управления.

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

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

@cssunderhood Я так и делаю, только класс называется .text.

@sapegin @cssunderhood @cssunderhood у меня обычно .text-content

Однажды дизайнер в макете сделал фотку Путина размером 146х146 пикселей. #тонко

@cssunderhood это еще ладно, а вот когда видишь heder, saidbar или futer, то появляется дикое желание выпилить авторов этих слов.

@cssunderhood в Magento 2 есть статик тест, который проверяет наличие слова Magneto в коде :)

@spbmak @cssunderhood shapka, podval, poisk — еще круче…

Тут говорят с Windows 10 и браузер EDGE вышел. Таким образом "last 2 versions" сдвигается на IE10+.

На заметку: если у вас в проекте IE9+, то не нужен весь зоопарк файлов шрифтов для @font-face, достаточно только .woff.

@cssunderhood если не инлайните шрифт, то нужен ещё woff2, так как он меньше

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

Всем привет! Продуктивного дня! Запускайте первый помидор! #pomodoro

Я где-то с полгода пользуюсь этой техникой. Класс! Для OSX пользуюсь приложением Pomodoro One.

Верстать из JPG или PNG приходилось, наверное, каждому. Я, например, верстал раз из Excel'я. А у вас есть подобные истории?

@cssunderhood Боюсь не доброшу до ближайшего коллеги :-)

@cssunderhood из экселя годно. там всё по сетке хотя бы (:

.@vladimore да, сетка единственное адекватное что было в том листе :)

@cssunderhood у меня только из JPG, но дизайнер(-печатник) был уверен, что все сделал правильно, ибо жал Save for Web. PSD не отдавал.

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

@cssunderhood из .png и делать круглые уголки картинками.

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

@cssunderhood индизайн, корел, картинка в ворде (эту послал обратно с мнением о «дизайнере»), самый шик — bmp формат

@cssunderhood из корела с диагональным градиентом через всю страницу. Это было 10 лет назад

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

@cssunderhood а я верстал сайты, которые рисовал дядька-полиграфист. в psd. в 300dpi…

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

Оффтоп, но у плеера YouTube новый дизайн. Мне нравится )

@denswor Однажды тоже получал макет от полиграфистов в Corel Draw с размерами в милиметрах @cssunderhood

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

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

Не нашёл пока лучшего гайда по flexbox, чем презентация @pepelsbey — pepelsbey.net/pres/flexbox-g…

@cssunderhood, я тоже, регулярно к нему возвращаюсь )

@pepelsbey @cssunderhood По flexbox так же хорого расписано на frontender.info/a-guide-to-fle… и теория на @htmlacademy_ru
Рассказ @pepelsbey крутой

Я — «типографский задрот». И люблю букву «Ё». Жаль, что в вебе она не приживается: «Плохо выглядит, зато хорошо звучит» ©.

@cssunderhood Ёпта, почему плохо выглядит?! ಠ_ಠ

.@sapegin ну это ещё Артемий Татьяныч в «Ководстве» писал.

@cssunderhood их jpg приходилось пару раз, блого ретины еще не было тогда 😀

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

Тут два подхода есть: собираем всё в один файл или каждая страница проекта будет иметь свой собранный бандл.

При этом естественно разграничиваем сайт и «админку».

При первом подходе у нас сразу всё в кеш и красота. При втором экономим («на спичках»?) на размерах файла.

В проекте большого и известного интернет-магазина пришлось действовать по второму варианту: 80% пользователей заходили в первый раз.

У них ещё нет кеша и заходили на абсолютно разные страницы, legacy-кода было много и отдавали определённые файлы для разных типов страниц.

В любом случае использовать концепцию Абсолютно-Независимых Блоков и БЭМ-нотацию. Это реально удобно.

Twitter Bootstrap годится для админок, не более. Иначе взрывает вам пространство имён классов. ©

В остальном предпочитаю иметь 1 корневой файл app, который импортит в себе всё остальное.

Всё остальное делим на blocks (штуки, которые повторяются хотя бы 2 раза), и pages (блоки, характерные для отдельных страниц)

Если приходится копировать элемент из pages, он переезжает в blocks. Ну и отдельно выделяем partials — head / header / footer.

Так же не забываем про отдельные файлики для fonts, variables, mixins. media queries, print etc.

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

Ах да, и забыл глобальный reset: normalize || EricMeyer || что-то подобное :)

@cssunderhood а что насчет extend в less/sass?

.@Oleshkevich к этому надо подходить с умом и избегать. Количество кода растёт лавинообразно. В первый раз я поймал баг 4096 селектора в ИЕ.

@cssunderhood ды не, жить можно нормально и с бутстрапом.

.@antonfrolovsky попробуйте покастомить хотя бы navbar! Жёсткие селекторы nav > ul > li > a это не по красоте )

@cssunderhood обычно хватает переопределить переменные. Вообще все от проекта(дизайна) зависит.

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

Скриншот структуры на начальной стадии pic.twitter.com/cQ8Z0RZChY

Сторонние библиотеки лежат в bower_components или поставляются в gems (а можно и bower-rails или Vendorer).

соответственно склеивается всё с основными стилями asset pipeline или gulp-таском.

Главное, помните, что вы должны уметь контролировать порядок подключения файлов. Например, в Yii Asset Manager не даёт такой возможности.

Если у вас критичный performance, то часть стилей первого экрана можно загрузить в тег <style> — т.н. Critical CSS

Только помните, рекомендуемый размер этого кода — 14 кБ. Собирать руками его не нужно. есть куча grunt/gulp тасков для этого.

К примеру, github.com/bezoerb/grunt-…

@cssunderhood в Yii есть механизм пакетов и их зависимостей, так что возможность в принципе есть

@cssunderhood yiiframework.ru/doc/cookbook/r…

@Oleshkevich @cssunderhood мне в этом чяте уже подсказали статью по этому поводу sitepoint.com/avoid-sass-ext…

@antonfrolovsky Не хватает. Даже в «админке» :-) @cssunderhood

Кстати а кто-то ещё делает без надобности менюшки как nav > ul > li > a? Очень часто список вообще не нужен и можно просто nav > a.

@cssunderhood А в каком случае нужен, а в каком нет?

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

@kartashov нужен если это список) @cssunderhood

.@sapegin много где вижу подобное, видимо люди переходили на HTML5 так

@cssunderhood @sapegin разве ul>li для меню не подходят? Что тогда использовать надо?

@Bizi @cssunderhood @sapegin если ссылки в навигации блочные, то nav > a.nav__link например. А если ссылки должны быть строчными, то li > a…

.@denswor @Bizi @sapegin а если display: inline-block? Область клика надо расширять сверху и снизу.

@neonick @cssunderhood я инлайню в CSS, так как в HTML не семантично. Цвет меня с помощью postcss-svg github.com/Pavliko/postcs…

Решение на PostCSS для инлайна SVG с поддержкой изменения цвета — лучшее на сегодняшний день.

Остальные решения довольно холиварны: компромиссы решения поставленных задач и семантики не находятся.

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

.@andrey_sitnik Если SVG вставить в HTML, то transition, скажем, на fill тоже не работает: резкий скачок.

@cssunderhood @andrey_sitnik codepen.io/denswor/pen/Jd… раньше в хроме был баг с транзишнами в свг внутри посещенной ссылки. щас вроде поправили

@andrey_sitnik скажи, а почему SVG в HTML не семантично? @cssunderhood @neonick

@denswor @cssunderhood @neonick потому что это оформление, а не контент чаще всего (если мы говорим про иконки)

@denswor @cssunderhood @andrey_sitnik @neonick а как насчет своего шрифта со всеми нужными иконками? Масштабируется и красится просто.

@spbmak @denswor @cssunderhood @neonick шрифты имеют разные размеры на разных платформах — нельзя добиться ровного вращения крутилки

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

@spbmak Со шрифтами своих проблем навалом, включая сложность изготовления. @denswor @cssunderhood @andrey_sitnik @neonick

@sapegin ну я бы не сказал, что сложно делать. @inkscape тот же взять. +Удобно назначать на клавиши (учитывая регистр).
@cssunderhood

@spbmak Инкскейп? Не надо так шутить, там всё плохо делать :-) Да и нельзя считать способ ручного создания шрифтов годным. @cssunderhood

@spbmak github.com/sapegin/grunt-… почти нормальный, если бы не сложность установки и вечные проблемы с исходными файлами. @cssunderhood

@sapegin Кому как :) Везде свои нюансы. Я тоннами шрифты не произвожу, чтобы заморачиваться над сомнительной автоматизацией.
@cssunderhood

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

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

.@spbmak @sapegin воу-воу, а как же дальнейшая поддержка и развитие? С плохими подходами соберётся снежный legacy-ком.

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

@cssunderhood .nav__a и без разницы какая разметка

@cssunderhood, ещё ИЕ только с версии Эдж умеет такое (@andrey_sitnik, @denswor)

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

Чот ВК упал.
Вот так и CDN с вашими jquery когда-нибудь упадёт )

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

@cssunderhood не забудьте <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

@igormorozov @sapegin @cssunderhood @spbmak когда-то пользовалась icomoon.io/app/ там в комлекте идет json

@meuwka @sapegin @cssunderhood @spbmak когда начинал собирать, то начинал с icomoon. Но хотелось более универсальное решение для потомков :)

@meuwka @sapegin @cssunderhood @spbmak поэтому есть svg, которые gulp собирает в шрифт. учётом постоянного изменения иконок

@igormorozov @sapegin @cssunderhood @spbmak а какой смысл собирать svg с помощью gulp в шрифт, а не в спрайт?

@neonick @cssunderhood, css-tricks.com/svg-symbol-goo… с автоматизацией вклеивания в html через github.com/w0rm/gulp-svgs…

Всем привет! А поделитесь соотношением в вашей работе чисто статики (html) и интеграции в проект / бэкенд, в процентах. У меня 20 / 80.

Интеграция в «плохие» проекты прямо-таки буээээ, иногда нравится. Иногда надоедает и хочется тупо собирать html / css / js )

@meuwka @sapegin @cssunderhood @spbmak для сервиса социального шаринга. Иконки должны быть любого цвета и при этом быстро вставляться JS

@cssunderhood На текущем, наверное, 0/100 :-)

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

@voischev удваиваю, бро =) @cssunderhood

Считаю Emmet штукой по дефолту: без неё как-то не пишется уже код.
Мыслите и пишите posa l0 t0 m-0-a p15 tdu =)

@voischev А ещё бывают верстальщики, которые Яваскрипт не хотят учить. Ну, не будем с утра о грустном ಠ_ಠ @cssunderhood

А есть люди, интегрирующие в CMS 1C-Битрикс? Там до сих пор в шаблоне пагинации теги <font>?

@cssunderhood а сегодня я уже full stack разработчик и могу не в чем себе не отказывать :)))

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

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

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

@sapegin Я таким был… где то пол года в начале. Тогда и js был другой и требования :) @cssunderhood

@voischev У меня как-то наоборот получилось: сначала был JS, а потом уже меня верстать научили Мэйле :-) @cssunderhood

@cssunderhood @rimmer333 о, в Material Design Lite как раз БЭМ.

@sapegin меня статья про будущее веб-разработки заставила передумать о такой фигне =) @voischev @cssunderhood

.@gladkih_m @sapegin @voischev Давайте ссылку, все почитаем, кто ещё не )

@cssunderhood это было лет 5 назад =)

.@gladkih_m Ну и как? Будущее уже наступило?

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

@gladkih_m В некоторых компаниях всё ещё есть разделение на верстальщиков и JS-программистов. @cssunderhood

@dshster просто сравни требования к разработчикам сейчас и лет 5 назад. Тогда про js намного реже писали. @cssunderhood

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

@cssunderhood 50/50. сам сверстал, сам интегрировал

.@mazax1ct может имеет смысл верстать в процессе интеграции?

@mazax1ct @gladkih_m @cssunderhood пару лет назад я собеседовался именно на верстальщика, без js. Должность эта до сих пор существует.

@jsunderhood @cssunderhood а как вы думаете, нужен ли современному разработчику свой блог? Полезно это аль нет?

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

@mr_skriming Уметь писать человеческим языком — очень полезно. К сожалению, не все блоги можно читать. @jsunderhood @cssunderhood

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

@mr_skriming @jsunderhood @cssunderhood нужен чтобы оттачивать формализацию. Это положительно скажется и на написании кода.

@mazax1ct @gladkih_m @cssunderhood это уже другой вопрос, согласитесь, квалификация верстальщика не измерима с квалификацией js-программиста

@jsunderhood @mr_skriming @cssunderhood блог и опенсорс разные вещи, блог ближе к аналитике, к представлению полученной информации и опыта

Как вам проджект менеджер – бывший верстальщик? С одной стороны шарит, с другой — немного отстал от жизни уже.

@cssunderhood У меня наоборот, из проджектов в верстальщики с прицелом на full-stack.

О, а ещё тема: если в конторе вводят KPI — как оценивать качество верстальщика / фронтендера в числовых показателях?

@cssunderhood Конечно же по количеству строк кода — тех, кто фигачит всё в одну строку, можно будет сразу уволить :-)

@cssunderhood видишь, как народ боится признаваться в работе с битрихом! :-)

@sapegin @cssunderhood Если сделал минификацию файлов - уволен)

.@denswor Да ладно, мне вот не стыдно — я года полтора интегрировал в него.

@mazax1ct @Sigiller @gladkih_m @cssunderhood оживить свой дизайн или прототип всегда интереснее! Я тоже начал именно с дизайна.

@cssunderhood я работаю с Битриксом плотно. Все зависит от шаблона=)) Такие приколы по возможности конечно выпиливаем

@cssunderhood оценка творческих профессий численным параметрами невозможна

@dshster @cssunderhood @sapegin еще можно на выходе мерить показатели организма для определения уровня усталости. Не устал - плохо работал.

.@ymatuhin KPI — ru.wikipedia.org/wiki/%D0%9A%D0…

@cssunderhood только команду в целом оценивали через agile и story point

@cssunderhood а как это возможно на не потоковой работе?

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

@mazax1ct @cssunderhood релакс, гайз :) просто забавно было, что этот твит про битрикс был без единого реплая. вот, расшевелись чуток…

@mazax1ct @cssunderhood на самом деле после редизайна у Битрикса одна из лучших админок среди CMS на мой взгляд. Дизайнеры поработали славно

@denswor @cssunderhood но косяков в реализации достаточно

@ZhivotvorevNik @cssunderhood @dshster @sapegin «здесь мерилом работы считают усталость» — знакома строчка из песни? а сама песня?

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

@mazax1ct @cssunderhood покажите мне CMS без косяков и я… да даже пива куплю! я видывал такую лажу в далеко не самых дешевых CMS, что даже…

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

@denswor @cssunderhood а такие бывают? сам бы посмотрел с удовольствием))

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

@denswor @cssunderhood @mazax1ct тот из вас, кто не писал костылей, пусть первый кинет в неё камень

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

@cssunderhood можно заказать песню?

.@zverolen Можете даже, пользуясь случаем, передать кому-нибудь привет ) ^_^

@cssunderhood ладно. Передаю привет моим друзьям из @parksideup ! Поставьте для них какую-нибудь добрую песню. Про AJAX

@cssunderhood Да чёрт с ними, с шаблонами, он до сих пор в ядре ошибки в одну строчку через <br> собирает pic.twitter.com/AQYMSW9Fjt

@andrey_sitnik @cssunderhood без численных показателей невозможна сама оценка.

@cssunderhood KPI определяется исходя из целей. Для оптимизации затрат или удовлетворенности клиентов разные kpi. С какой целью оцениваете?

Что-то для замера performance страничек чаще пользуюсь хипстерским yellowlab.tools нежели классикой webpagetest или GooglePageSpeed

@cssunderhood кол-вом $$$ которые он приносит компании. Это самая главная характеристика, ведь ради $ его же и наняли!

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

Если вам доведётся собеседовать кандидатов, то вот неплохой гайд github.com/h5bp/Front-end…

Устаревает со временем. Но это повод поконтрибьютить, а не повод для грусти =)

@denswor @delaz @cssunderhood кол-во $ в одной строке) А вообще, деньги, которые приносит конкретный человек - это не метрика, не считается

@ZhivotvorevNik @cssunderhood @denswor @delaz тоже в компании хотим ввести kpi для верстальщика. Собираемся сделать зависимость от оценки

.@graff_z А можно примерный алгоритм вычисления KPI для верстальщика?

@cssunderhood задачу поставил вчера, решения еще нет. Основная проблема в отличии оценки и фактического времени. Хотим бороться с этим.

.@graff_z тогда как быть с бесконечными поправками от клиента? Это всё испортит фактическое время. Работник будет вас посылать.

.@graff_z после введения KPI работник будет думать о цифрах, а не о задачах. Или будет пытаться обмануть систему.

@cssunderhood это проблема любых kpi, к сожалению.

@cssunderhood "нормально делай - нормально будет". Правки возникают из за того, что где то не проверил или не подумал.

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

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

@Sigiller да, здесь кроется сложность. Можно продолжить задачу и поставить kpi РМу, но ему уже на фактический профит @cssunderhood

@graff_z @cssunderhood если прокатило - здорово. Если нет - то же время потратим на правки. Profit.

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

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

@graff_z @cssunderhood чтобы объективно оценивать, например, время нужно для реализации проекта этот проект нужно ОЧЕНЬ хорошо знать.

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

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

@ZhivotvorevNik @cssunderhood @graff_z наиболее ответственно я подходил к проверке и тестированию, когда у меня была почасовая оплата

@ZhivotvorevNik оценку мы делаем всегда, это заложено в нашей бизнес модели @cssunderhood

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

@Sigiller а если речь о задачах на 5-40 часов, вы должны уметь оценивать и отвечать за оценку. @cssunderhood

Напоминаю великолепную формулу от @makishvili: первоначальная оценка проекта умноженная на половину длины окружности + две недели.

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

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

@cssunderhood @makishvili при такой схеме сроки по договору почти всегда соблюдались)

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

.@sapegin было-было пару пулл-реквестов и от меня )

@ZhivotvorevNik Так вот зачем придумали эту идиотскую фишку писать $ в начале ссылок на Джейквери-объекты. @denswor @delaz @cssunderhood

@cssunderhood О, а что посоветуешь для подготовки к собеседованиям? (У меня в черновиках есть пост на эту тему со стороны соискателя.)

.@sapegin со стороны соискателя или работодателя?

.@sapegin универсального ответа нет. Я, например, к собеседованиям не готовлюсь никак. Просто идёшь со своей головой.

.@sapegin не знать или не понимать чего-то не стыдно: все мы люди.

.@sapegin к тому же глупо «На собеседовании отвечать про структуры данных и алгоритмы, а потом формы на 1px двигать» © @mokevnin

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

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

.@sapegin да, поэтому список и появился в утренней ленте :) Полезно пойти и ответить / найти ответы на эти вопросы.

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

@Sigiller А если собеседование на английском, то полезно ещё и потренироваться перед зеркалом (но я это не сразу понял :-) @cssunderhood

@sapegin @cssunderhood это кстати да, пока не начинаешь разговаривать вслух, всё кажется гораздо проще, а потом слова все куда-то пропадают

Для чистки HTML кода из ворда / визуальных редакторов использую artlebedev.ru/tools/reformat…

А для крутой типографики — типограф Муравьёва mdash.ru/demo.html

Кстати, как перетащить дизайнеров на Sketch? Хочется поработать с новым софтом, но пока только PSD.

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

@cssunderhood typograf.ru лучше. Как минимум тем, что расставляет nbsp перед тире и оборачивает телефонные номера в nobr

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

@cssunderhood кажется это прошлый век. А как же NodeJS пакеты? 100% подобное есть. Как же "станок" верстальщика?

@cssunderhood купить им мак. Они сами перейдут

Ну а для Ps я купил себе CSSHat + PNGHat. До кризиса правда, но реактивит процесс разработки. csshat.com pnghat.madebysource.com

Круто что появился @cssunderhood его можно поучить хорошему/правильному и полезному. Даешь больше крутых разработчиков! 💪💪💪

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

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

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

@gladkih_m поучиться им что ли нужно :)) @cssunderhood

Если есть желание и свежий взгляд на мир фронтенда — велкам коммитить в словарь терминов github.com/web-standards-…

@cssunderhood Я ими тоже иногда пользуюсь. Но аналог PNGHat уже встроенный есть.

Об оптимизаторах: IMGO + SVGO + CSSO. Кто предложит лучше?

IMGO не идеален: GooglePageSpeed говорит, что можно выжать и больше.

@cssunderhood imagemin + clean-css, конечно.

@cssunderhood github.com/ben-eb/cssnano

@cssunderhood главный плюс cssnano — он состоит из маленьких плагинов и модно понять, как он работает cssnano.co/optimisations/

@cssunderhood @SilentImp и можно и модно. Понимать всегда модно.

@sapegin @cssunderhood вот только работает встроенный аналог плохо, когда дело касается scale 200%. @2x часто не точно в два раза больше.

@cssunderhood вместо CSSO — cssnano.

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

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

В последнее время центрирую любые элементы только через flexbox или через transform-translate.

@cssunderhood берегись нечетных размеров при translate в Chrome.

@cssunderhood для IE9 юзаешь полифил какой-нибудь?

@cssunderhood повезло :)

@xwoody @cssunderhood а в чём подвох нечётных размеров?

Всем пятницы! Немного понеформалим: как вы относитесь к таким чувакам: art73.ru ?

@cssunderhood я тайно ими восхищаюсь.

@cssunderhood ну кто-то же должен делать "Сайт за 3300 руб", есть спрос - есть и предложение

@juwain @cssunderhood Хром не округляет полпикселя, поэтому все мутным становится.

placehold.it скучен по большей части, но иногда полезен.
lorempixel.com более симпатичен.

@cssunderhood unsplash.it

И да, читателей стало за 500 ^_^ Подперчивайтесь к нам! RT

@xwoody @cssunderhood это актуально именно при выравнивании типа left: 50% translate -50%?

@life_maniac @cssunderhood для ie нет полифилов для флексбокса. Только gracefull degradation с помощью inline-block или table-cell

@cssunderhood жизнь хороша, когда не поддерживаешь IE8+ ...

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

.@toivonens дыа? Поделитесь-ка соображениями )

@cssunderhood Ну вот этот ответ даёт достаточно информации.

@Seleckis ну, gd я как раз и воспользовался недавно. А flexiejs.com не оно? @cssunderhood

@r3nya @cssunderhood IE8+? Включая Edge? ))

@r3nya 9очка во многих случаях очень даже ничего @cssunderhood

@life_maniac @cssunderhood не, там старый синтаксис 2009 года, у него на github написано, что он вторую версию начал, но так и не сделал

@r3nya @cssunderhood я за IE, если его очень хотят, денег беру отдельно))) Так и я в плюсе, и процентная доля пользователей IE сокращается))

@spbmak @cssunderhood хороший совет. Спасибо! :)

@Seleckis @cssunderhood "а мне вот не смешно" ;) До Edge пока не добрались. Я вам больше скажу - мне надо еще опцию "no js" поддерживать.

@r3nya это, например, когда диалоговые окна без js нужно по ссылке открывать в новом окне? @cssunderhood

@Seleckis @cssunderhood ну что-то типа того ... + навигацию по якорям, различные переходы используя анимацию из css и все такое.

@cssunderhood устраивает ретвитный ад хуже чем @navalny

@Seleckis столкнулся, что Safari (Yosemite) не поддерживает транзишн. @r3nya @cssunderhood

@toivonens @jsunderhood @cssunderhood верстальщики еще не умерли как профессия?

@jsunderhood @cssunderhood пятничный оффтопик. интересно, как со спортом среди нас? кто что смотрит/играет? киберспорт?)

.@mr_skriming я бегаю ) Зимой — лыжи, раньше был хоккей на роликовых коньках.

@mr_skriming @cssunderhood @jsunderhood футбол и плавание

@mr_skriming @cssunderhood @jsunderhood а если я всю ночь в ведьмака играл - это киберспорт?))) Если не считается - то велосипед, пейнтбол)

@mr_skriming бегаю. Из игр — hearthstone @jsunderhood @cssunderhood

@cssunderhood Допилил пост о собеседованиях, который вчера упоминал. Буду рад ретвиту :-) twitter.com/sapegin/status…

Нужна ли сетка в проекте? Вот эти все rows / cols.

lost-grid нужна — github.com/corysimmons/lo… © @pfrlv

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

только если дизайн был нарисован по сетке, иначе это приводит к некоторым противоестественным занятиям © @Sigiller

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

Какие хорошие комнаты по front-end в Slack посоветуете? У нас есть front-end-here.slack.com, кто захочет вступить, пишите @vdv73rus

Подсказывают про такой чат: frontenddevelopers.slack.com © @nayanov

Говорят в современных front-end слак-чатах холиварят на тему PostCSS =) @nayanov @sapegin

@cssunderhood @vdv73rus Есть группа чатов в gitter
github.com/dev-ua
gist.github.com/listochkin/c81…

А ещё мы мутим локальную конфу в г.Ульяновск. 2014.front-end.su Приезжайте в этом году и послушать, и выступить!

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

С вами был Дима Вислов aka @vdv73rus Всем пятницы и хороших выходных! Пока!