vdv73rus

3 августа 2015, Чебоксары

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

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

9:07

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

9:08

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

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

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

9:44

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

9:45

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

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

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

9:49

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

10:13

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

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

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

10:20
@cssunderhood а для sublime 3 'горошка' нет?
10:24
@cssunderhood А вот, похоже, определялка названий цветов для мака: itunes.apple.com/ru/app/color-n…
10:25

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

10:28

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

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

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

10:58
@cssunderhood я немножко расстроился. Оказывается, поиск в пигментах работает только в препроцессорных файлах, а в обычных css - нет.
10:58
@iamstarkov, для меня использование строчных удобно выглядит визуально. Большее отличие цифр и букв @cssunderhood
11:00
@cssunderhood в некоторых самых любимых проектах я поступаю проще и тупее. Название цвета не должно отражать мой дальтонизм.
11:10
@cssunderhood поэтому я складываю цвета в виде массива в самом начале _uikit.styl и в блоках далее использую только индекс массива
11:15
@cssunderhood потом бывает надо пересочинить всю цветовую таблицу, и это выливается в замену только в одном месте
11:15
@rimmer333 @cssunderhood я их обычно называю по назначению, чтобы не привязываться к самому цвету, который может поменяться
11:18
@cssunderhood Вот еще есть сервис name-of-color.com
11:20
@sapegin @rimmer333 @cssunderhood дополнительные цвета я просто порядковыми номерами именую, чем больше номер - тем реже встречается
11:22

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

11:32

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

11:34
@cssunderhood конечно) стыдно, когда ошибки в проде видно!
11:34
@cssunderhood ну конечно же надо писать <h1>Галлерея</h1>, а если надо все заглавными буквами, то ttu стиль применить. Эх, программеры, да?
11:38
@cssunderhood своих стараюсь не допускать, с чужими борюсь. Комичу «fix grammar nazi»
11:38
@cssunderhood глаз режет, работать невозможно, пока не исправишь
11:39
@cssunderhood конечно стыдно.
11:43

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

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

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

12:26

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

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

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

14:48

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

14:49

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

14:50

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

14:52

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

14:53

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

14:54

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

14:56

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

14:58
@cssunderhood как вариант похачить редактор и заставить помимо тэгов дописывать нужный класс
14:58
@cssunderhood это трабла грандиозна, можно было бы пересадить на маркдаун, но в #ulsu не поймут например как пользоваться
14:59
@cssunderhood или сделать ещё круче — убрать редактор совсем. Пускай человеки фокусируются на содержимом, а не играют со шрифтами.
15:01
@cssunderhood wysiwyg должен запрещать всякую подобную мету-информацию - он для текстов и медиа, а не для "программирования"
15:09
@cssunderhood очень немного случаев в которых пользователю действительно нужен визивиг
15:27

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

15:28
@cssunderhood к слову, мне очень нравится как он сделан на Медиуме - только самое необходимое и не засоряет интерфейс.
15:31
@cssunderhood @Sigiller потому что заказчики хотят чтоб как в ворде, а проблему креатива на местах можно решить организационно
15:41
@cssunderhood Я так и делаю, только класс называется .text.
15:56
@sapegin @cssunderhood @cssunderhood у меня обычно .text-content
16:03

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

16:21
@cssunderhood это еще ладно, а вот когда видишь heder, saidbar или futer, то появляется дикое желание выпилить авторов этих слов.
16:21
@cssunderhood в Magento 2 есть статик тест, который проверяет наличие слова Magneto в коде :)
16:56
@spbmak @cssunderhood shapka, podval, poisk — еще круче…
16:57

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

17:09

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

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

# Вторник 92 твита

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

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

9:49

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

9:50

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

9:59
@cssunderhood Боюсь не доброшу до ближайшего коллеги :-)
10:01
@cssunderhood из экселя годно. там всё по сетке хотя бы (:
10:01

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

10:02
@cssunderhood у меня только из JPG, но дизайнер(-печатник) был уверен, что все сделал правильно, ибо жал Save for Web. PSD не отдавал.
10:07
@cssunderhood он же нафигачил не просто макет, а каждую страницу с точным контентом. Он думал, я только ссылки расставляю и сервак админю.
10:07
@cssunderhood из .png и делать круглые уголки картинками.
10:07
@cssunderhood ну и еще газетчики прислали свой дизайн в InDesign, но в итоге все вышло тривиально из-за их привычки к двухцветному оффсету
10:11
@cssunderhood индизайн, корел, картинка в ворде (эту послал обратно с мнением о «дизайнере»), самый шик — bmp формат
10:13
@cssunderhood из корела с диагональным градиентом через всю страницу. Это было 10 лет назад
10:23
@cssunderhood из причудливых способов: верстал из ворда. там внутри табличка была и в ячейках картинки.
10:26
@cssunderhood а я верстал сайты, которые рисовал дядька-полиграфист. в psd. в 300dpi…
10:34
@cssunderhood впрочем, дядька-полиграфист еще в далеком 1998 году задумывался о ретина-устройствах и закладывал пикселей под это дело :)
10:34

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

10:34
@denswor Однажды тоже получал макет от полиграфистов в Corel Draw с размерами в милиметрах @cssunderhood
10:39
@cssunderhood тестировался уже давно и да, он классный.
10:41
@cssunderhood а я вот пользуюсь на айпадике который рядом стоит. Pomodoro Keeper очень радует, жду пока от них десктоп версию.
10:45

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

11:27
@cssunderhood, я тоже, регулярно к нему возвращаюсь )
11:36
@pepelsbey @cssunderhood По flexbox так же хорого расписано на frontender.info/a-guide-to-fle… и теория на @htmlacademy_ru
Рассказ @pepelsbey крутой
11:36

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

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

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

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

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

13:49

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

13:51

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

13:51

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

13:52

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

13:53

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

13:54

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

13:56

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

13:57

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

14:00

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

14:01

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

14:02

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

14:03

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

14:04

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

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

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

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

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

14:08
@cssunderhood обычно хватает переопределить переменные. Вообще все от проекта(дизайна) зависит.
14:10
@cssunderhood а куда засовываете код библиотек? А если его надо кастомизировать? А можно просто скриншот структуры? :)
14:11

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

14:11

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

14:15

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

14:17

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

14:18

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

14:20

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

14:21

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

14:22
@cssunderhood в Yii есть механизм пакетов и их зависимостей, так что возможность в принципе есть
14:24
@Oleshkevich @cssunderhood мне в этом чяте уже подсказали статью по этому поводу sitepoint.com/avoid-sass-ext…
14:27
@antonfrolovsky Не хватает. Даже в «админке» :-) @cssunderhood
14:45

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

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

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

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

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

14:59
@cssunderhood @sapegin разве ul>li для меню не подходят? Что тогда использовать надо?
16:03
@Bizi @cssunderhood @sapegin если ссылки в навигации блочные, то nav > a.nav__link например. А если ссылки должны быть строчными, то li > a…
16:30

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

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

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

17:12

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

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

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

17:15
@cssunderhood @andrey_sitnik codepen.io/denswor/pen/Jd… раньше в хроме был баг с транзишнами в свг внутри посещенной ссылки. щас вроде поправили
17:27
@andrey_sitnik скажи, а почему SVG в HTML не семантично? @cssunderhood @neonick
17:45
@denswor @cssunderhood @neonick потому что это оформление, а не контент чаще всего (если мы говорим про иконки)
17:48
@denswor @cssunderhood @andrey_sitnik @neonick а как насчет своего шрифта со всеми нужными иконками? Масштабируется и красится просто.
18:15
@spbmak @denswor @cssunderhood @neonick шрифты имеют разные размеры на разных платформах — нельзя добиться ровного вращения крутилки
18:15
Вот кстати да, на самом деле, по большей части из-за этого у меня теперь везде postcss, даже с диким легаси twitter.com/cssunderhood/s…
18:26
@spbmak Со шрифтами своих проблем навалом, включая сложность изготовления. @denswor @cssunderhood @andrey_sitnik @neonick
18:28
@sapegin ну я бы не сказал, что сложно делать. @inkscape тот же взять. +Удобно назначать на клавиши (учитывая регистр).
@cssunderhood
18:33
@spbmak Инкскейп? Не надо так шутить, там всё плохо делать :-) Да и нельзя считать способ ручного создания шрифтов годным. @cssunderhood
18:38
@spbmak github.com/sapegin/grunt-… почти нормальный, если бы не сложность установки и вечные проблемы с исходными файлами. @cssunderhood
18:46
@sapegin Кому как :) Везде свои нюансы. Я тоннами шрифты не произвожу, чтобы заморачиваться над сомнительной автоматизацией.
@cssunderhood
18:46
@spbmak Ключевое тут, очевидно, «я». Когда в команде появятся другие разработчики, они не захотят мучиться с Инкскейпом. @cssunderhood
18:49
@sapegin Нет, тут ключевое то, что каждый делает так, как ему удобно. Неважно, с помощью чего сделано, главное - результат.
@cssunderhood
19:00

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

19:02
@sapegin @cssunderhood @spbmak когда мне потребовалось собрать свой иконочный шрифт, то путём проб и ошибок добрался к Inkscape.
19:02
@cssunderhood .nav__a и без разницы какая разметка
19:08
@cssunderhood, ещё ИЕ только с версии Эдж умеет такое (@andrey_sitnik, @denswor)
19:11
@cssunderhood, без необходимости вообще не стоит лишние вложенности и сущности плодить. Семантика в любом случае будет не особо правильной.
19:13

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

19:20
@cssunderhood а потом и ваши сайты. и всё упадёт. сингулярность близко, бросай свои дела иди отдыхай.
19:25
@cssunderhood не забудьте <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
19:25

# Среда 73 твита

@igormorozov @sapegin @cssunderhood @spbmak когда-то пользовалась icomoon.io/app/ там в комлекте идет json
8:39
@meuwka @sapegin @cssunderhood @spbmak когда начинал собирать, то начинал с icomoon. Но хотелось более универсальное решение для потомков :)
8:40
@meuwka @sapegin @cssunderhood @spbmak поэтому есть svg, которые gulp собирает в шрифт. учётом постоянного изменения иконок
8:40
@igormorozov @sapegin @cssunderhood @spbmak а какой смысл собирать svg с помощью gulp в шрифт, а не в спрайт?
8:40
@neonick @cssunderhood, css-tricks.com/svg-symbol-goo… с автоматизацией вклеивания в html через github.com/w0rm/gulp-svgs…
8:40

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

8:41

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

8:42
@meuwka @sapegin @cssunderhood @spbmak для сервиса социального шаринга. Иконки должны быть любого цвета и при этом быстро вставляться JS
8:43
@cssunderhood На текущем, наверное, 0/100 :-)
8:52
@cssunderhood всегда считал что тупо статику собирать не круто, нужно быть более полезным в команде. По этому у меня всегда ЗП была выше ;)
9:51
@voischev удваиваю, бро =) @cssunderhood
10:02

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

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

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

10:08
@cssunderhood а сегодня я уже full stack разработчик и могу не в чем себе не отказывать :)))
10:08
@cssunderhood я считаю, что верстать сразу в в коде бэкенда — так сразу видишь, какие могут быть состояния
10:16
@cssunderhood да, и жутко приятно, когда редакторы и сервисы имеют эту функциональность по умолчанию. вот бы и в CMS-ные редакторы кода ее…
10:16
@cssunderhood Например не отказывать в реализации собственных задумок и отказывать только потому что нужен бекэнд.
10:22
@sapegin Я таким был… где то пол года в начале. Тогда и js был другой и требования :) @cssunderhood
10:22
@voischev У меня как-то наоборот получилось: сначала был JS, а потом уже меня верстать научили Мэйле :-) @cssunderhood
10:22
@cssunderhood @rimmer333 о, в Material Design Lite как раз БЭМ.
10:35
@sapegin меня статья про будущее веб-разработки заставила передумать о такой фигне =) @voischev @cssunderhood
10:37

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

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

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

10:38
@cssunderhood скажем так, просто верстальщики уже мало востребованы и получают меньше, чем те, что со знанием js
10:45
@gladkih_m В некоторых компаниях всё ещё есть разделение на верстальщиков и JS-программистов. @cssunderhood
10:46
@dshster просто сравни требования к разработчикам сейчас и лет 5 назад. Тогда про js намного реже писали. @cssunderhood
10:50
@gladkih_m @cssunderhood это понятно, сейчас мода на толстый клиент, но js-разрабочик дороже и тратить его силы на вёрстку таблиц неразумно
10:53
@cssunderhood 50/50. сам сверстал, сам интегрировал
10:55

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

10:55
@mazax1ct @gladkih_m @cssunderhood пару лет назад я собеседовался именно на верстальщика, без js. Должность эта до сих пор существует.
10:59
@jsunderhood @cssunderhood а как вы думаете, нужен ли современному разработчику свой блог? Полезно это аль нет?
11:04
Если нравится писать - то пиши. Есть много способов получить репутацию и без блога, например опен сорс. @mr_skriming @cssunderhood
11:12
@mr_skriming Уметь писать человеческим языком — очень полезно. К сожалению, не все блоги можно читать. @jsunderhood @cssunderhood
11:12
@mr_skriming @jsunderhood @cssunderhood кто-то структурирует мысли блогом, раскладывая по темам знания (в том числе и очевидные для многих)
11:20
@mr_skriming @jsunderhood @cssunderhood нужен чтобы оттачивать формализацию. Это положительно скажется и на написании кода.
11:33
@mazax1ct @gladkih_m @cssunderhood это уже другой вопрос, согласитесь, квалификация верстальщика не измерима с квалификацией js-программиста
11:33
@jsunderhood @mr_skriming @cssunderhood блог и опенсорс разные вещи, блог ближе к аналитике, к представлению полученной информации и опыта
11:37

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

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

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

11:56
@cssunderhood Конечно же по количеству строк кода — тех, кто фигачит всё в одну строку, можно будет сразу уволить :-)
12:02
@cssunderhood видишь, как народ боится признаваться в работе с битрихом! :-)
12:02
@sapegin @cssunderhood Если сделал минификацию файлов - уволен)
12:02

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

12:04
@mazax1ct @Sigiller @gladkih_m @cssunderhood оживить свой дизайн или прототип всегда интереснее! Я тоже начал именно с дизайна.
12:04
@cssunderhood я работаю с Битриксом плотно. Все зависит от шаблона=)) Такие приколы по возможности конечно выпиливаем
12:05
@cssunderhood оценка творческих профессий численным параметрами невозможна
12:05
@dshster @cssunderhood @sapegin еще можно на выходе мерить показатели организма для определения уровня усталости. Не устал - плохо работал.
12:06
@cssunderhood только команду в целом оценивали через agile и story point
12:09
@cssunderhood а как это возможно на не потоковой работе?
12:09
@cssunderhood ну да, из коробки там страшнючие шаблоны прямиком из 2003 года, вот только зачем их использовать мне лично непонятно.
12:21
@mazax1ct @cssunderhood релакс, гайз :) просто забавно было, что этот твит про битрикс был без единого реплая. вот, расшевелись чуток…
12:28
@mazax1ct @cssunderhood на самом деле после редизайна у Битрикса одна из лучших админок среди CMS на мой взгляд. Дизайнеры поработали славно
12:31
@denswor @cssunderhood но косяков в реализации достаточно
12:33
@ZhivotvorevNik @cssunderhood @dshster @sapegin «здесь мерилом работы считают усталость» — знакома строчка из песни? а сама песня?
12:33
@janitor42 @cssunderhood в связи с последними изменениями в ранжировании сайтов в гугле, Битрикс начал оптимизировать шаблоны для мобилок
12:33
@mazax1ct @cssunderhood покажите мне CMS без косяков и я… да даже пива куплю! я видывал такую лажу в далеко не самых дешевых CMS, что даже…
12:35
@janitor42 @cssunderhood короче пытаются перейти на бутстрап и пилят эти самые шаблоны из коробки
12:35
@denswor @cssunderhood а такие бывают? сам бы посмотрел с удовольствием))
12:36
@mazax1ct @cssunderhood обычно удаляю начальный код шаблона, компонет дает массив сырых данных, а с ними я разберусь как считаю нужным
12:40
@denswor @cssunderhood @mazax1ct тот из вас, кто не писал костылей, пусть первый кинет в неё камень
12:42
@mazax1ct @cssunderhood ну так не понимаю смысла иронизировать над стремным html в шаблонах компонентов, до прода он мало у кого добирается
12:43
@cssunderhood можно заказать песню?
12:52

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

12:52
@cssunderhood ладно. Передаю привет моим друзьям из @parksideup ! Поставьте для них какую-нибудь добрую песню. Про AJAX
13:00
@cssunderhood Да чёрт с ними, с шаблонами, он до сих пор в ядре ошибки в одну строчку через <br> собирает pic.twitter.com/AQYMSW9Fjt
13:45
@andrey_sitnik @cssunderhood без численных показателей невозможна сама оценка.
16:11
@cssunderhood KPI определяется исходя из целей. Для оптимизации затрат или удовлетворенности клиентов разные kpi. С какой целью оцениваете?
16:11

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

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

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

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

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

8:38

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

8:38
@denswor @delaz @cssunderhood кол-во $ в одной строке) А вообще, деньги, которые приносит конкретный человек - это не метрика, не считается
8:41
@ZhivotvorevNik @cssunderhood @denswor @delaz тоже в компании хотим ввести kpi для верстальщика. Собираемся сделать зависимость от оценки
8:46

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

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

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

9:03

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

9:04
@cssunderhood это проблема любых kpi, к сожалению.
9:11
@cssunderhood "нормально делай - нормально будет". Правки возникают из за того, что где то не проверил или не подумал.
9:11
@graff_z @cssunderhood проблема бесконечных правок от клиента, во многих случаях, может оказаться проблемой менеджера,а не верстальщика
9:22
@graff_z @cssunderhood если ввести оценку времени - будет стимул не проверить и не подумать
9:22
@Sigiller да, здесь кроется сложность. Можно продолжить задачу и поставить kpi РМу, но ему уже на фактический профит @cssunderhood
9:22
@graff_z @cssunderhood если прокатило - здорово. Если нет - то же время потратим на правки. Profit.
9:22
@Sigiller @cssunderhood но дальше может возникнуть проблема,что менеджер будет заинтересован в получении сиюминутной прибыли от клиента
9:22
@graff_z @cssunderhood ну тут много сложностей может возникнуть, но я не уверен, что kpi для верстальщика будет работать нормально.
9:22
@graff_z @cssunderhood чтобы объективно оценивать, например, время нужно для реализации проекта этот проект нужно ОЧЕНЬ хорошо знать.
9:22
@graff_z @cssunderhood то есть оценить может только другой специалист и чтобы правильно оценить ему потребуется потратить значительное время
9:22
@graff_z @cssunderhood в итоге может оказаться так, что "циферки" по затрачиваемому времени окажутся дороже, чем положительный эффект от них
9:22
@ZhivotvorevNik @cssunderhood @graff_z наиболее ответственно я подходил к проверке и тестированию, когда у меня была почасовая оплата
9:26
@ZhivotvorevNik оценку мы делаем всегда, это заложено в нашей бизнес модели @cssunderhood
9:26
@Sigiller зависит от типа проекта и использую методологии. Если у вас огромный проект и там канбан,то вам может и насрать @cssunderhood
9:26
@Sigiller а если речь о задачах на 5-40 часов, вы должны уметь оценивать и отвечать за оценку. @cssunderhood
9:26

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

9:28
@graff_z а можете рассказать, как у вас производится оценки необоходимого времени для выполнения задачи? @cssunderhood
9:31
@cssunderhood @makishvili когда я работал менеджером, сроки объявляемые заказчику могли быть в два раза больше сроков заявляемых разрабам)
9:31
@cssunderhood @makishvili при такой схеме сроки по договору почти всегда соблюдались)
9:32
@cssunderhood (Ой, даже на русский перевёл кто-то.) Он и в для подготовки очень хорош, потому что собеседующие задают из него вопросы :-)
9:40

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

9:41
@ZhivotvorevNik Так вот зачем придумали эту идиотскую фишку писать $ в начале ссылок на Джейквери-объекты. @denswor @delaz @cssunderhood
9:42
@cssunderhood О, а что посоветуешь для подготовки к собеседованиям? (У меня в черновиках есть пост на эту тему со стороны соискателя.)
9:50

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

9:50

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

9:54

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

9:54

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

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

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

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

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

10:02

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

10:02

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

10:05
@cssunderhood предложить для расширения кругозора сделать следующий небольшой проект или самостоятельную часть текущего в нем.
10:07
@cssunderhood typograf.ru лучше. Как минимум тем, что расставляет nbsp перед тире и оборачивает телефонные номера в nobr
10:08
@cssunderhood я знаю много дизайнеров для веба. И пока все кто пробует говорят, что Sketch огонь! 🔥
10:21
@cssunderhood кажется это прошлый век. А как же NodeJS пакеты? 100% подобное есть. Как же "станок" верстальщика?
10:24
@cssunderhood купить им мак. Они сами перейдут
10:24

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

10:27
Круто что появился @cssunderhood его можно поучить хорошему/правильному и полезному. Даешь больше крутых разработчиков! 💪💪💪
10:28
@cssunderhood нужно сначала оцени KPI заказчика, менеджера и дизайнера ;) верстальщик крайнее звено, на него валятся все предыдущие ошибки.
10:34
@voischev последний в цепи всегда крайний и самый виноватый. @cssunderhood
10:34
@gladkih_m всегда получалось что я лучше понимаю работу менеджера и дизайнера, чем они мою и это боль и печаль @cssunderhood
10:54
@gladkih_m поучиться им что ли нужно :)) @cssunderhood
10:55

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

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

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

13:10

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

13:11
@cssunderhood imagemin + clean-css, конечно.
13:17
@cssunderhood главный плюс cssnano — он состоит из маленьких плагинов и модно понять, как он работает cssnano.co/optimisations/
14:06
@cssunderhood @SilentImp и можно и модно. Понимать всегда модно.
14:11
@sapegin @cssunderhood вот только работает встроенный аналог плохо, когда дело касается scale 200%. @2x часто не точно в два раза больше.
14:25
@cssunderhood вместо CSSO — cssnano.
15:39
@voischev @cssunderhood огонь, но порой глючный как незнамо что. но авторы дебажат и релизятся регулярно, удаляя старые баги, добавляя новые
15:39
@cssunderhood По кол-ву правок, которые он делает после того, как он уже сделал и сдал задачу.
15:40

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

17:54

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

@cssunderhood берегись нечетных размеров при translate в Chrome.
8:18
@cssunderhood для IE9 юзаешь полифил какой-нибудь?
8:18
@cssunderhood повезло :)
8:44
@xwoody @cssunderhood а в чём подвох нечётных размеров?
8:49

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

8:52
@cssunderhood я тайно ими восхищаюсь.
8:54
@cssunderhood ну кто-то же должен делать "Сайт за 3300 руб", есть спрос - есть и предложение
8:59
@juwain @cssunderhood Хром не округляет полпикселя, поэтому все мутным становится.
9:06

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

9:14

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

9:28
@xwoody @cssunderhood это актуально именно при выравнивании типа left: 50% translate -50%?
9:29
@life_maniac @cssunderhood для ie нет полифилов для флексбокса. Только gracefull degradation с помощью inline-block или table-cell
9:33
@cssunderhood жизнь хороша, когда не поддерживаешь IE8+ ...
9:33
Теперь я вижу, зачем нужен был отдельный от @jsunderhood аккаунт @cssunderhood
9:35

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

9:35
@cssunderhood Ну вот этот ответ даёт достаточно информации.
9:38
@Seleckis ну, gd я как раз и воспользовался недавно. А flexiejs.com не оно? @cssunderhood
9:46
@r3nya @cssunderhood IE8+? Включая Edge? ))
9:46
@r3nya 9очка во многих случаях очень даже ничего @cssunderhood
9:47
@life_maniac @cssunderhood не, там старый синтаксис 2009 года, у него на github написано, что он вторую версию начал, но так и не сделал
9:50
@r3nya @cssunderhood я за IE, если его очень хотят, денег беру отдельно))) Так и я в плюсе, и процентная доля пользователей IE сокращается))
9:50
@spbmak @cssunderhood хороший совет. Спасибо! :)
9:52
@Seleckis @cssunderhood "а мне вот не смешно" ;) До Edge пока не добрались. Я вам больше скажу - мне надо еще опцию "no js" поддерживать.
9:55
@r3nya это, например, когда диалоговые окна без js нужно по ссылке открывать в новом окне? @cssunderhood
10:00
@Seleckis @cssunderhood ну что-то типа того ... + навигацию по якорям, различные переходы используя анимацию из css и все такое.
10:03
@cssunderhood устраивает ретвитный ад хуже чем @navalny
10:18
@Seleckis столкнулся, что Safari (Yosemite) не поддерживает транзишн. @r3nya @cssunderhood
10:22
@toivonens @jsunderhood @cssunderhood верстальщики еще не умерли как профессия?
10:29
@jsunderhood @cssunderhood пятничный оффтопик. интересно, как со спортом среди нас? кто что смотрит/играет? киберспорт?)
10:37

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

10:38
@mr_skriming @cssunderhood @jsunderhood футбол и плавание
10:40
@mr_skriming @cssunderhood @jsunderhood а если я всю ночь в ведьмака играл - это киберспорт?))) Если не считается - то велосипед, пейнтбол)
10:44
@mr_skriming бегаю. Из игр — hearthstone @jsunderhood @cssunderhood
10:44
@cssunderhood Допилил пост о собеседованиях, который вчера упоминал. Буду рад ретвиту :-) twitter.com/sapegin/status…
12:36

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

12:51

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

12:56

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

12:58

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

13:04

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

13:25

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

15:17

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

15:21

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

15:39

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

16:16

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

22:06

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

22:06

github.com

other