rugreli

1 февраля 2016, Москва, Россия

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

Всем привет! На этой неделе с вами Лев @ruGreLI из московского офиса Яндекса.

13:06

В Яндексе работаю два года в отделе разработки поисковых интерфейсов. Так же я ментейнер SVGO — поддерживаю в рабочем состоянии.

13:08

В мире веба я уже больше 15 лет. Сверстал первую веб-страницу на таблицах ещё где-то в 1999 году. Нарисовал сам же в Фотошопе 5.5.

13:10

Начал с того, что прочитал спецификации HTML 4 и CSS 2. Они достаточно легко читаются даже с моим английским тогда не выше Pre-Intermediate.

13:12
#Translation Russian translation of the W3C document “HTML5” ift.tt/1nzjATs

И как раз сегодня пришла новость: спецификацию HTML5 перевели на русский язык.
twitter.com/w3c/status/694…

13:13

Это приводит нас сразу к теме первого вопроса: а вы читали спецификации? Если не всю (бывают зубодробительные как HTML5), то хоть частично?

13:15
@cssunderhood Спецификации — документы для разработчиков браузеров. Верстальщик после чтения нынче может только забиться в угол и плакать.

Не согласен. У того же HTML5 есть версия для авторов, специально написанная простым языком: w3.org/TR/2011/WD-htm… twitter.com/webholt/status…

13:20
@cssunderhood читаю отдельные части по мере необходимости, когда надо в тонкостях разобраться или посмотреть изменения в процессе создания.
13:20
@cssunderhood Когда так говорят, сразу кажется, что это значит, что у обычного человека шансов нет

Ну, не стоит так сразу сдаваться. Порог входа конечно повысился, объёмы знаний выросли, но ничего сверхсложного нет. twitter.com/vavilina/statu…

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

Вот это да, многое хочется попробовать, чего ещё нет. Но полезно знать, хотя бы чтобы вспомнить когда придёт время. twitter.com/webholt/status…

13:24
@cssunderhood Читала часть спецификации HTML5, где описаны теги.

А я к своему стыду не читал. Только очень эпизодически по частным вопросам. Больше по статьям вроде html5 doctor. twitter.com/ierhyna/status…

13:26
@cssunderhood По таким спецификациям всякие парсеры и лексические анализаторы писать хорошо, а не разметку делать учиться.

Парсеры тоже иногда писать приходится. Я в SVGO это учитывал, инструментам вроде CSSO или @csscomb тоже нужно. twitter.com/webholt/status…

13:28
@cssunderhood или css tricks. Там уже все «разжевано», но для разработчика вполне норм.

Да, как раз к вопросу о пороге входа. Сейчас много хороших обучающих статей. Бесплатно, в интернете, только читай. twitter.com/life_maniac/st…

13:29
@cssunderhood Отдельные части её, конечно, вполне полезны и верстальщику, тут спорить не стану. Но информация зачастую доступна и в статьях.
13:29
Открыта регистрация на первый в этом году московский Я.Субботник по фронтенду #yasubbotnik bit.ly/1TwE6AW

Ещё можно ходить на конференции вроде Я.Субботника ;). Хотя во многом не про вёрстку, но полезно для профроста. twitter.com/ya_events/stat…

13:33
@cssunderhood За частую спеки как книга по "технике безопастности". Все написано в бою кровью и потом. Особые извращуги живут и без нее. ГЫ
13:33

Продолжая про себя: в 2014 году мой опыт пригодился для вёрстки версии серпа для старых браузеров. Рассказ коллеги:
events.yandex.ru/lib/talks/2584/

13:38

Даже я не думал, что мне в 2014 году пригодится опыт вёрстки под IE6. Сейчас его даже на приборах не видно. (IE7 мало, но видно.)

13:39
@cssunderhood не было ли за эти годы желания сменить язык, уйти на бэкенд например?

Прям горячего желания перейти на бэкенд нет. Люблю, когда красиво. Видимо, это наложило свой отпечаток. twitter.com/_sashashakun/s…

13:42
@cssunderhood красиво внешне, визуально?

Да, но не только. twitter.com/_sashashakun/s…

13:44
@cssunderhood а у меня в машине windows ce, кажется, 5ый. Так вот там IE5 стоит.

Под IE5 я перестал верстать лет девять назад. И то, до этого чисто по фану это делал. twitter.com/life_maniac/st…

13:47
@webholt @cssunderhood есть нюанс: в статьях доступна _интерпретация_ спеки авторами статей, кот. может сильно отличаться от оригинала:)
13:47
@SelenIT2 @cssunderhood Проблема не столько в неправильной интерпретации, сколько в опущенных мелких моментах.

Да, для этого и надо читать спецификации. twitter.com/webholt/status…

13:48
@cssunderhood Читаю спецификацию, чтобы целиком понять какие-то сложные вещи вроде stacking context и containing block.
13:49

К слову про нюансы и сложные штуки: я даже писал статью про способы вёрстки в рамках CSS 2.
web-standards.ru/articles/css-t…
web-standards.ru/articles/css-t…

13:51

А также небольшую статью про нюансы CSS:
web-standards.ru/articles/css-n…

13:51

Впрочем, выдача поиска довольно простая для верстки в IE6. Отжигал с прозрачными картинками (белая обводка иконок). pic.twitter.com/j2SAdug86T

14:04

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

14:06
@iamakulov_ @cssunderhood к вопросу, как читать спецификации — не могу не процитировать 1 абзац сегодняшней новинки spec.piraruco.com/html5/introduc…)
14:51
@cssunderhood кстати, о спеке HTML5: на какую ветку лучше ориентироваться верстальщику — WHATWG LS, W3C Rec., W3C ED?

Детально не разбирался, но кажется что версия WHATWG ближе к браузерам и дружелюбнее к читателям. twitter.com/SelenIT2/statu…

14:58
@cssunderhood добрый день! Я верстальщик, сейчас очень нужная работа - можете помочь?

Коллеги, есть кому что предложить? twitter.com/l_matero_l/sta…

17:56
@cssunderhood читал HTML4 и CSS 2.1, раза по три в разное время. Всегда узнавал что-то новое.
17:58
Ребята купили готовый шаблон. Хотел поделиться болью, но не влезло pic.twitter.com/OnRn0jE2LN
19:09

А вот разработчик CSS Grid Layout в движке Хрома разъясняет новые детали спецификации. blogs.igalia.com/mrego/2016/02/…

19:12
@cssunderhood прикольно, бывают же совпадения: css-live.ru/articles/zolot… — просто какая-то сезонная эпидемия гриДа! :)
19:44
П - преданность профессии pic.twitter.com/AycSZQKe4e
20:06

CSS Grid Layout — уникальная спецификация.
Во-первых, самая продвинутая раскладка. Можно делать сетки независимо от порядка элементов.

20:14

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

20:16

В-четвёртых, активно разрабатываются версии для движков Chrome и Gecko. Microsoft хочет доработать в Edge свою изначальную реализацию.

20:20

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

20:22

Разработчика, на блог которого я ранее сослался, кстати, спонсирует компания Bloomberg именно для разработки реализации. Такой интерес!

20:25
@cssunderhood к концу? Firefox 45 c поддержкой без флага вроде ведь уже в начале марта? Или «полноценный» — в плане css-live.ru/articles/podse…?

Полноценной в смысле поддержки всеми основными браузерами. twitter.com/selenit2/statu…

20:27
@cssunderhood всё равно мне кажется раньше. Хром де-факто уже практ. готов, в Сафари вроде дела не хуже. Только Ёжик может подмораживать...

Пожалуй, правильнее было бы «до конца» или «в течение». Но есть ещё нерешённые вопросы и проблемы кроссбраузерности. twitter.com/selenit2/statu…

20:36
@cssunderhood еще в 5-х — в нее влились исторически первый модуль для раскладки (Template Layout) и идеи из htmlforum.ru/index.php?show… :)

Да-да, знаменитый «ASCII-арт», впрочем никем нереализованный. twitter.com/selenit2/statu…

20:38
@cssunderhood а где не было проблем кроссбраузерности? С флекбоксами, что ли? С флоатами? С таблицами?:)

Нужны тесты, и чтобы все браузеры их проходили. Тоже займёт время. Они же требуются для утверждения спецификации. twitter.com/selenit2/statu…

20:49

А вот пример вклада сообщества: по мотивам доклада разработчицы добавили промежутки меж рядов/столбцов (*-gap) rachelandrew.co.uk/archives/2015/…

20:53
@cssunderhood ну на этом этапе ведь уже можно вовсю пользоваться (как всегда было), разве нет? А там небось и Grid Level 2 подоспеет..:)

Поживём — увидим. Недолго осталось. Правда, всё равно остаётся проблема старых браузеров. twitter.com/selenit2/statu…

20:56

А пока я тут веду монолог, Твиттер запустил шарики. pic.twitter.com/q2NAutDK7W

21:01
@cakeinpanic @cssunderhood я так пластиковые окна заказал там, где дизайн сайта и верстка больше всего понравились
21:45

# Вторник 47 твитов

@cssunderhood folks, feel free to write me about some work also. kiryl.ply@gmail.com
8:08
@cssunderhood @Copypasting + к csscomb. Мега удобный плагин.

Слегка запоздалый ответ. Я, к слову, быстро начал сортировать свойства — гораздо удобней ориентироваться потом. twitter.com/moskwin/status…

8:11

А вы следите за тем как появляются новые спцификации? Например, у рабочей группы W3 по CSS есть официальный блог: w3.org/blog/css/

8:17
@cssunderhood +1. Не уверен насчёт алфавита, но по группам (positioning/display/text) разбивать удобно
8:18

И завершая тему спецификаций, у W3 есть портал по CSS, позволяющий ориентироваться в обстановке: w3.org/Style/CSS/

8:21
@cssunderhood а еще спеки есть на гитхабе: github.com/SelenIT/csswg-… — можно прямо там править найденные корявости)
9:52
Видео с первой встречи FrontendFellows в Екатеринбурге 29 января: <input>, Relay, сборка — youtu.be/2uo74fpwCN4?li… pic.twitter.com/GXRiVh0dPe
9:56

Сегодня поговорим о командной строке. Умеете пользоваться? Ищете grep'ом? Правили файлы sed'ом или парсили логи awk'ом? Ну, и куда без git?

11:36
10 видео с декабрьской Web Standards Days в Москве и статистика из анкет участников — habr.ru/p/276307/ pic.twitter.com/Hltb9fi280
11:40
@cssunderhood какие-то магические слова
11:52

Пользуетесь ли вы командной строкой?

11:55
@cssunderhood да, это причина, по которой я перешел с винды на линукс, а затем на мак.
11:55
@cssunderhood конечно.

Возможно кому-то не видно (например, клиент под Мак страдает), это опрос, а не просто вопрос. На сайте Тви работает. twitter.com/c01nd01r/statu…

12:01
@cssunderhood да, npm i и все, все, все =)

Кстати да, куда без npm? twitter.com/juwain/status/…

12:03
@cssunderhood указывай вначале [опрос], а то да, не видно..
12:04
@cssunderhood Пользуюсь Powershell-ом, он классный. В нём из коробки даже работа с JSON, CSV и REST API

О, даже так. twitter.com/iamakulov_/sta…

12:11
@dcromster @cssunderhood я по этому и мак обожаю - есть и нормальный GUI и прекрасная консоль. Терминал очень удобная штука
12:11
@cssunderhood в основном для гита, ноды и запуска всяких галпов, ничего хардкорного.
12:13
@cssunderhood конечно! Вот сегодня закончил перевод своих дотфайлов с bash на zsh: github.com/denysdovhan/do…
Получилось очень круто.
12:15
@cssunderhood в IDE есть GUI для git/npm/gulp/etc, но руками быстрее. Собственно иногда и vim быстрее IDE и из строки уходит не надо.
12:16
@cssunderhood кстати давайте делиться статистикой zsh_stats и sh_stats!
Вот моя: pic.twitter.com/siN9LO8YKB

Боюсь, тогда вообще вся лента заспамится. twitter.com/denysdovhan/st…

12:17

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

12:19
@denysdovhan или "history|awk '{print $2}'|awk 'BEGIN {FS="|"} {print $1}'|sort|uniq -c|sort -rn|head -30" если 30 результатов @cssunderhood

У меня на разработческой виртуалке практически всё заспамили git и enb (make). Зато на машинке есть ещё svgo :). twitter.com/POS_troi/statu…

12:50
@cssunderhood командная строка для git - SourceThree. Гит в командной строке это больно.
12:50
@Copypasting @cssunderhood Не видел пока ни одной удобной графической реализации `git rebase -i`
13:08

Да, а ещё к этому ребэйзу есть --autosquash — очень удобно править непоследние коммиты вместе с git commit --fixup @iamakulov_ @Copypasting

13:10
@cssunderhood, чёрт, почему я не знал об этих параметрах раньше! Огромное спасибо. @Copypasting
13:17

По поводу таких хороших команд есть статья «How to undo (almost) anything with Git»
github.com/blog/2019-how-…
@iamakulov_

13:18
@iamakulov_ @cssunderhood @Copypasting git reset --mixed @~2 ещё часто использую, рибейз для бедных
13:35
@cssunderhood @iamstarkov Отменяет последние два коммита, но сохраняет их изменения в файлах
13:35
@cssunderhood Ну если Гит еще можно на GUI перестроить и многим нравится, то проекты собирать как-то совсем извращенно будет.
14:22
@golodenko @cssunderhood собирать проекты пока в терминале удобней, это да. Но есть Codekit, который добавляет UI
14:24
@cssunderhood делаю им только то, что им делать действительно удобнее. git – нет. curl'ом размер ссылки проверить – да.

А если git не из консоли, то как? twitter.com/GrawlCore/stat…

14:58

Итоги голосования:
76% — Да, каждый день.
14% — Только если припрёт.
7% — Нет необходимости.
3% — Нет, это сложно.

15:00
@cssunderhood встроенный в @intellijidea (но на chunk'и режу Tower'ом, их IDEA не умеет)
15:00
@cssunderhood ну это-то да. npm, bower, php -S, mysqld, nginx, sass-convert, ls -A, npm-check-updates, wp-cli
15:02

Выходит, практически все могут пользоваться консолью. А что делают те, кому нет необходимости? Хватает GUI? Пересылают свёрстанное клиенту?

15:03

Мне всегда было проще верстать на живых (пусть тестовых) данных. Без рыбы, видно типичные кейсы. Но это требует технической вовлечённости.

15:05

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

15:10

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

15:11

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

15:12

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

15:16
@cssunderhood Возможно ли использовать fontawesome как svg спрайты?

В принципе да. Там есть SVG-шрифт, можно сделать из него просто иконки :). Более прямого пути, похоже, нет. twitter.com/koderhan/statu…

15:51

Во, отлично! А я с ходу не нашёл. @GrawlCore @koderhan

16:07
@cssunderhood а есть ли статьи, о том как настроить emacs/vim для фронт-энд разработки? Чтобы только в консольке девелопить 😊

Есть, но я так не скажу. Могу подсказать конфиг коллеги для Вима habrahabr.ru/post/206262/ twitter.com/nanoT1m/status…

17:19

# Среда 45 твитов

@cssunderhood @bem_ru Даже в Sketch — Local Sharing сверстали по БЭМ. Вы видели?

Нет. Это где такое? twitter.com/vovagabel/stat…

6:59
@vovagabel @cssunderhood @bem_ru там весьма специфичный БЭМ…
.fsWrap #document .list .artboard {
width: 30vh;
}
9:09
@cssunderhood это система публикации артбордов текущего документа скетча в локальной сети. но там совсем не БЭМ.
9:09

Сегодня поговорим об оптимизации изображений. По статистике проекта HTTP Archive они занимают 62±2% траффика. А вы оптимизируете картинки?

9:18

[Опрос] Оптимизируете ли вы картинки?

9:22
@cssunderhood 4% от общего объема трафика на текущем проекте. От загрузки отдельной страницы без учета ajax-обновлений контента.
9:31
@cssunderhood Всех картинок, что грузятся. SVGO автоматически при сборке. Растр тоже вроде оптимизируется, но руками и не мной.
9:31
@cssunderhood Суровый embedded, борьба за каждый килобайт)
9:31
@denswor @harisov @cssunderhood @bem_ru Не ну понятно, что не идеально по БЭМ все сделали. Но видно же, что взяли идею БЭМ. Исправятся.

Какая вера в людей! twitter.com/vovagabel/stat…

9:32

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

9:33
@cssunderhood @ruGreLI Да.

Всем интересны подробности! twitter.com/harisov/status…

9:34
@harisov @denswor @cssunderhood @bem_ru Вот! Разве тут нет отголосков БЭМ? pic.twitter.com/2RIMJegfXD
9:36
@cssunderhood Мне чертовски нравятся tinyjpg.com / tinypng.com. Сжимают с потерей качества, зато очень хорошо
9:38
@iamakulov_ @cssunderhood Мне тоже очень нравится, даже для gulp есть плагин. Жаль сам сервис платный для массовой оптимизации.
9:40
@vovagabel @denswor @cssunderhood @bem_ru

Это БЭМ, кроме

.pswp img

9:50
@cssunderhood так всё банально.

ImageOptim для растра, svgo для avg.

11:32
@cssunderhood imageOptim & imageAlpha
11:35
@harisov @cssunderhood для PNG сначала ImageAlpha и только потом ImageOptim
11:36
@cssunderhood да. ImageOptim на всё, иногда сборка сложных изображений (напр. фото с сеткой поверх) версткой.
12:16
@cssunderhood на “жирных” страницах выгадывали до пяти мегабайт этими средствами.
12:19
Перевод статьи автора реализации CSS Grid в Blink о размещении элементов, на css-live.ru; css-live.ru/articles/podro… pic.twitter.com/hW4ncQSZqI
14:53

Итоги опроса: Оптимизируете ли вы картинки?
56% — Да, постоянно.
24% — Время от времени.
08% — Нет, некогда/сложно.
12% — Это делают роботы.

15:48
@cssunderhood Даже когда не надо. Иногда просто захожу на сайт и оптимизирую, смотрю.

Ачивка: маньяк оптимизации. Поймает, и как начнёт оптимизировать и ещё раз оптимизировать! habrahabr.ru/post/131539/ twitter.com/wouldntfix/sta…

15:54

Оптимизация картинок начинается с выбора верного формата. Думаю, вы и без меня знаете: jpeg — фото, png — графика, svg — вектор.

16:06

Можно ещё попробовать WebP, но он ещё не везде поддерживается. Ну, и начнём с основ.

16:08

Как ни странно, несколько байт может выиграть GIF (размер ~10 пикселей) в сравнении с PNG. Но имеет смысл только как внедрённый data:uri.

16:10

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

16:11

С JPEG'ом вроде бы понятно: выбираете соотношение качество-размер при сохранении. Но всё равно есть настройки, которых нет в фотошопе.

16:13

Вот, например, недавняя статья советует сохранять с семплингом 4:2:0 calendar.perfplanet.com/2015/why-arent… Но есть замыливание, особенно на красном.

16:18

JPEG как казалось бы простой и изученный формат всё равно оставляет простор для оптимизаций. Этим занимается mozjpeg github.com/mozilla/mozjpeg

16:20

Ещё интереснее с PNG. Формат без потерь и уже есть много утилит оптимизации. Кажется, одна из лучших — ScriptPNG css-ig.net/scriptpng

16:27

Работает просто: перетаскиваешь файлы и выбираешь подходящий метод. Под виндой, но у вас всё равно же должна быть виртуалка с ней ;-).

16:29

Но, если для нас приемлемо сжатие с потерями в JPEG, то как насчёт PNG? Можно делать постеризацию (уменьшать количество цветов).

16:30

Можно подобрать так, что вес уменьшится на десятки %, а на глаз не различишь. В фотошопе неудобно, есть программка x128.ho.ua/color-quantize…

16:32

Что удобно, в ней можно выбрать как 256 цветов (PNG-8 с прозрачностью), так и больше. Например, 1024 или 4096 (зависит от изображения).

16:35

WebP даже с потерями гораздо труднее уже сражаться с такими оптимизированными картинками. Хотя свои 5–10% уменьшения тоже может дать.

16:37

Для SVG конечно же SVGO github.com/svg/svgo, однако, можно и подсобить. Немного рассказывал тут events.yandex.ru/lib/talks/3210/

16:42

Есть ещё пара статей про оптимизацию SVG: medium.com/larsenwork-and… (2¹⁄₂ части) и css-tricks.com/understanding-… (через масштабирование viewBox).

16:46

Хороши и старые статьи Сергея @chikuyonok: artlebedev.ru/tools/technogr… Много подробностей. «Грязная прозрачность» уже есть в инструментах.

16:52

Но это вручную, и занимает время. Для автоматизации есть такой проект как github.com/bem/image-optim. Есть линтинг. Правда, пока только PNG.

16:54

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

17:00
@cssunderhood посоветуйте, пожалуйста, ресурс где можно поискать интересные эффекты (и не интересные тоже))

Ох, много их. На css-live.ru есть подборки. На css-tricks.com есть чуть ли не всё. twitter.com/hej_veronica/s…

17:32
@cssunderhood @hej_veronica если эффекты в плане моушена, то на сайтах codyhouse.co/library/ и tympanus.net/codrops/ много всего
17:40

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

Вчера @cssunderhood вещал об оптимизации картинок. Хочу обратить внимание, что их ещё нужно правильно масштабировать bit.ly/1TFhy0H
9:47
@cssunderhood главное палку не перегнуть. Даже мобильный интернет способен загрузить мгновенно даже тяжелые имеджи.

Только не в Крыму ;-). И в России на самом деле очень приличная мобильная связь. twitter.com/betstep/status…

9:47
@cssunderhood есть ли что-то подобное placehold.it только с локальными картинками?

Я о таком не знаю. Кто-то может подсказать? twitter.com/copypasting/st…

9:48
Открылась регистрация и программа первой встречи PiterCSS 9 февраля в офисе Яндекса — pitercss.timepad.ru/event/289721/ pic.twitter.com/vnkUltNyoy
9:50
@cssunderhood мы ищем верстальщика на контрактную работу, постоянное и долгое сотрудничество.

RT, если не сложно :)

10:31
@mista_k @cssunderhood если говорит об оптимизации и масштабировании картинок, то смотрите на github.com/thumbor/thumbor

Не очень понимаю, какое это имеет отношение именно к оптимизации. twitter.com/pismenny/statu…

10:32
В HTML есть элемент <details> и <summary>, которые работают как «раскрывашка». Жаль в ff и ie не работают. developer.mozilla.org/ru/docs/Web/HT…

Да, есть такой саджест из коробки. Увы, ограниченный. Улучшенная версия <select>, в которой можно набирать текст. twitter.com/fliptheweb/sta…

10:36

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

10:38
@cssunderhood нене, это не про тот suggest ;)

Ах, перепутал, речь шла про раскрывашки типа как в «FAQ». Такие, впрочем, скриптуются на раз-два. twitter.com/fliptheweb/sta…

10:41
@cssunderhood я видимо ввел в заблуждение словом «раскрывашка»,но правда не знаю как это правильно по-русски. Есть другие варианты названия?

Похоже на выпадающее меню, только это не меню. Скорее ближе к аккордеону. twitter.com/fliptheweb/sta…

10:42
БЭМ-методология: с чего всё начиналось и зачем это всё нужно — bit.ly/1PTSnSg #b_
11:26
@cssunderhood еще больше похоже на хабраспойлер)

Да на любой спойлер на популярных ресурсах и форумах. twitter.com/SelenIT2/statu…

11:42
Управляем поведением web-шрифтов с использованием CSS-свойства font-display developers.google.com/web/updates/20…
13:04

Если вы ещё не читаете Юлию, то у неё фантастический блог вёрстку. @yoksel

13:20

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

Наступила пятница, и это хороший повод поговорить про то, кто как её проводит.

10:31

[Опрос] Где вы в основном работаете?

10:34
CSS-анимации для которых включилось аппаратное ускорение Firefox помечает значком молнии pic.twitter.com/by2kL1ga4h
10:54

Что касается меня, то в основном работаю в офисе. Иногда могу и дома, но дома семья больше отвлекает. Практически не работал где-то ещё.

10:56

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

10:59
@cssunderhood примерно 50/50 офис/дом
11:17
Флексбокс может ломать клавиатурную доступность при изменении визуального порядка элементов tink.uk/flexbox-the-ke… pic.twitter.com/iOHN2IfygZ

Это не флексбокс ломает, просто он переставляет исключительно визуально. За порядок отвечает DOM или tabindex. twitter.com/webstandards_r…

12:02
A masterclass in `background-clip` via @anatudor

css-tricks.com/the-backgound-…

14:58
Педантичный учебник по CSS-расклакам из 5 частей: блочная модель, позиционирование, флекс — book.mixu.net/css/ pic.twitter.com/1aN6e3OObs
15:10

Похоже, действительно весьма подробный учебник @webstandards_ru

15:13

# Суббота 21 твит

[опрос] Что вы делаете по выходным?

11:41
Читаю @cssunderhood

Интересно? Есть темы, которые хотелось бы обсудить? twitter.com/AndreyBerezhno…

11:49

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

11:52
@cssunderhood всё перечисленное.
11:52
@cssunderhood верстка под IE - подходы, методы, трюки (если есть). В общем, все такое про IE.

Ныне в вёрстке под IE ничего особенного. Надо смотреть на баги, пытаться обойти. twitter.com/way2bariton/st…

11:54

Недавно встретил эпичный баг в IE11 с флексбоксами. Только в настоящем. В IE10 нет, в Edge эмулиции IE11 — nоже.

11:55

Ну, и стоит помнить какие есть возможности и ограничения в старых версиях IE. Например, Flexbox в IE10 с префиксами, а IE9 без фильтров SVG.

11:57

Впрочем, гораздо более заметную долю имеет IE8, так что по возможности стоит деградировать до CSS 2.1.

11:58
Кому скучно, можете потроллить: top.fse.guru/how-to-pick-a-…

@jsunderhood @cssunderhood

У них BEM — Markup framework. А вроде претендуют на серьёзный обзор. twitter.com/mr_mig_by/stat…

12:16
@cssunderhood @jsunderhood у нас бем - методология. Всё как у взрослых!

Не, я понимаю, что БЭМ-стек не идеален, и, наверное, сложен. Но стоит посмотреть на Реакт — глаза на лоб лезут. twitter.com/mr_mig_by/stat…

12:19
@cssunderhood по выходным у меня технологический шаббат.
12:48
@cssunderhood а от чего лезут то?

Смешение логики и представления. Javascript превращается в чёрти что. Не хватало ещё там писать угловые скобки. twitter.com/OlkhovoiDmitry…

12:56
@cssunderhood Типичные слова джуна который впервые видит фронтенд разработку)) Логика никоем образом не смешивается, все на своих местах.

Типичные слова стажёра, который не слышал про MVC. twitter.com/OlkhovoiDmitry…

13:05
@cssunderhood недавно доклад делал про стек технологий БЭМ, bit.ly/BEM-full
С примером реального проекта, полноценного магазина.
13:37
@cssunderhood @OlkhovoiDmitry щас тебе расскажут, что MVC во фронтенде в чистом виде не бывает, и вообще он мёртв.
13:37
@cssunderhood покажите где сейчас есть чистый MVC на клиенте.
На примере MVC-фреймворка, например. И да, React это и есть слой представления

Началось. twitter.com/zetoke/status/…

13:43
@cssunderhood причем тут MVC? На фронте MVC в принципе нет. Ты лучше расскажи в чем плох подход react'а, или покажи свой MVC на фронте))

А мужики-то и не знают… twitter.com/olkhovoidmitry…

14:15
@OlkhovoiDmitry @cssunderhood MVC — паттерн о пользовательских интерфейсах, где как не во фронтенде ему место?
15:09
@cssunderhood эмуляция вообще флексбоксы не всегда правильно отображает. например в ie9 почему-то работает, хотя не должно
16:26
@meuwka @cssunderhood это не эмуляция старых _движков_ для тестирования, это эмуляция старых *багов* для совм-сти с *существующими* сайтами.
16:26

# Воскресенье 7 твитов

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

12:42

Результаты опроса: «Что вы делаете по выходным?»:
22% — Только отдыхаю
49% — Смотрю, читаю, учусь
10% — Пишу код для фана
19% — Работаю

19:39

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

19:43

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

19:47
@cssunderhood Процентов 80 раработчиков полостью устраиват рутина. Перегорают только те, кого не устраивает (вхожу в их число)
19:51

На этом я с вами прощаюсь. С вами был Лев Солнцев @ruGreLI, Москва, Яндекс. Надеюсь, эта спонтанная неделя была вам полезна. Ещё увидимся!

19:56
@Semenov @cssunderhood о, да. Наверное поэтому вернулся из стартапа с реальными вызовами в стабильную компанию.

У стабильности свои плюсы, особенно, когда содержишь семью. Вызов не обязан быть стартапом, просто что-то новое. twitter.com/twenty/status/…

19:58

github.com

other


@zmoki