vdv73rus

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

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

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

6:07

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

6:08

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

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

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

6:44

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

6:45

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

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

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

6:49

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

7:13

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

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

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

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

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

7:28

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

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

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

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

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

8:32

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

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

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

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

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

9:26

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

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

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

11:48

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

11:49

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

11:50

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

11:52

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

11:53

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

11:54

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

11:56

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

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

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

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

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

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

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

14:09

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

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

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

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

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

6:49

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

6:50

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

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

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

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

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

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

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

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

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

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

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

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

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

10:49

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

10:51

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

10:51

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

10:52

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

10:53

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

10:54

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

10:56

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

10:57

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

11:00

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

11:01

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

11:02

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

11:03

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

11:04

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

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

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

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

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

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

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

11:11

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

11:15

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

11:17

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

11:18

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

11:20

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

11:21

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

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

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

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

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

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

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

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

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

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

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

14:12

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

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

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

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

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

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

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

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

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

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

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

5:41

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5:38

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

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

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

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

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

6:03

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

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

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

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

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

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

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

6:50

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

6:54

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

6:54

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

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

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

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

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

7:02

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

7:02

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

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

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

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

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

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

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

10:10

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

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

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

14:54

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

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

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

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

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

6:14

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

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

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

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

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

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

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

9:51

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

9:56

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

9:58

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

10:04

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

10:25

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

12:17

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

12:21

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

12:39

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

13:16

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

19:06

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

19:06

github.com

other