#такое дня

Вот спросили в чате по поводу этого расширения: https://t.iss.one/htmlshit/1781, SVG Gobbler.

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

С другой стороны, я тут зашел на https://www.fooconf.fi/ и хотел скопировать их логотип в рабочий чат.

…а он в CSS background как base64. Вот я писал о таких инструментах: https://t.iss.one/htmlshit/576

И Gobbler такое не поддерживает!! Время для пулл-реквеста? Со стримом.

#svg

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

Дискасс в каментах, если надо.

#заметка дня

Я обещал про нытьё тимлида. Ну давайте поноем.

Технически, я engineering manager, что чуть больше, но то такое.

Итак, должен ли тимлид/менеджер кодить?

Короткий ответ: да. Но вот что и когда? И вот тут я начинаю сыпаться.

Почему люди (ну, кодеры) становятся тимлидами (или менеджерами)? Потому что, внезапно, они были достаточно хороши в своей работе по мнению вышестоящих менеджеров и/или инженеров.

Что это значит? Что они достигли максимального уровня комфорта, компетентности, если хотите.

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

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

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

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

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

1. Есть свободное окно. Планы закреплены, команда занята, довольна и понимает, что делать, цели намечены — ок, можно продолжать.
2. Ты лучший в том, что собрался делать. Можешь качественно и быстро сделать задачу — вперёд, но не забывай о процессах. Будь примером.
3. Не блокируй критичные узлы. Условно, не надо лезть в аутентификацию, а потом спрыгивать с неё, как будто ничего не было, вешая задачу на кого-то из команды. Не смог спланировать правильно — не начинай.

А вот что точно можно начинать без проблем — это улучшать жизнь команды: собирать аналитику, улучшать сборку, предлагать решения на обсуждение.

Справляюсь ли я с этим на данный момент? Хороший вопрос! Но я пытаюсь, правда :)

#teamlead #manager #code #problems

#статья дня

LCP? FID? CLS? INP?

ПНХ, скажете вы.

Нет, отвечу я. Это всего лишь перечисление т. н. Core Web Vitals — важнейших метрик веб-проектов.

Не в курсе что это?

Тогда читаем статью на web.dev: https://web.dev/top-cwv-2023/

Ну и есть в переводе на Хабре: https://habr.com/ru/company/timeweb/blog/714280/

#lcp #vitals #fid

#статья дня

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

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

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

Некоторые владельцы маков с чёлкой перешли на темные темы лишь бы скрыть чёлку 🤡

Так к чему это я. Действительно ли темные темы так хороши или так плохи для глаз? Что за ними стоит и почему черный цвет в них не используется? Отвечает вот эта статья: https://habr.com/ru/company/timeweb/blog/675526/

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

#dark #theme

#инструмент дня

Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.

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

И называется он git-sim, вот так вот буквально.

Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.

Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim

И на GitHub проекта: https://github.com/initialcommit-com/git-sim

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

#git #sim #tool

Я не могу это не форварднуть 😂

Тем временем процесс релиза:

🔥-🌚-🫦\
🥵-😭-😢---😱-🤨-💩-🥳
🤦‍♂-🤬-🍆/

#ссылка дня

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

Как же обходились? Ну, например, генерировали картинки, используя библиотеки FreeType и (для PHP) GD2/Imagemagick.

К слову, это до сих пор валидный кейс, соответствующие плагины для популярных CMS вполне себе поддерживаются: https://www.drupal.org/project/textimage

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

Естественно, всегда можно резать набор глифов (символов) на лету... например, утилитами вроде https://opentype.js.org/ или FontForge в командном режиме, но каждый ли проект в этом нуждается?

А, ну и как же, нельзя забывать о вкладе Adobe Flash в поддержку кастомных шрифтов! Была технология sIFR, которая генерировала маленькие Flash-апплеты на месте, где должен был располагаться ваш заголовок.

Или аналогичная — Cufon, но уже на связке JS/SVG или VRML (векторный язык в IE).

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

#font #old

#фишка дня

...от Никиты Голубова aka @midfilecrisis в Twitter.

В WebStorm из коробки (а значит, и в том же PhpStorm) можно получить предпросмотр стилей для выбранного класса. Включая CSS Modules.

Option-Space на macOS, или через Cmd, зависит от выбранных хоткеев. Ctrl+Shift+I на остальных системах.

Аналогичное расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

...почти 4 миллиона установок, ик.

#css #webstorm #phpstorm #vscode #plugin #extension

#такое дня

Меня одного задолбали недоделанные технологии?

Ну в самом деле, что толку, что web-платформа развивается семимильными шагами, если каждый шаг — в клоунских ботинках?

Щас поясню. Примеры будут очень простые, про скроллинг. Но показательные. Дальше предложите сами.

1. position: sticky

Мы его ждали много лет. С таблицами правило стало работать только после того, как в Chrome полностью движок таблиц переписали. А теперь... а теперь ещё несколько лет будем ждать, чтобы получить возможности навесить нужные стили на «прилипший» элемент. Слухи о псевдоклассе :sticked так и остались слухами.

Что мы делаем? Конечно же считаем скролл ручками!

2. element.scrollIntoView

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

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

Но ведь есть scroll-margin-top, скажете вы...

Ага, вроде и есть. Но у меня нифига не вышло. А что если мне нужен разный в зависимости от ситуации? А если динамический? Что если у меня на одном варианте AB-теста есть sticky-заголовки, а в другом — нет?

Что мы делаем? А опять ручками:

const line = document.querySelector(`[data-id=${id}]`);

if (line) {
  const p = line.getBoundingClientRect();
  window.scrollTo(p.left, p.top + window.scrollY - 40);
}

Раздражает. Зачем таким вообще заниматься?

Ну выход на самом деле только один — участвовать в обсуждениях. Или заткнуться.

#css #hate

#инструмент дня

В копилку декларативных языков описания диаграмм, где уже лежат Mermaid и PlantUML, встречайте: D2.

https://d2lang.com/

…интересно, это реверанс в сторону D3.js? 🤔

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

…или просто надо перестать использовать тачпад и вернуться на мышь. Замечали, что мысли иначе работают?)

#diagram #language

#тред дня

Не так давно в нашем чате был мини-срач на тему SPA/Jamstack/SSR/SSG vs классические методы разрабоки сайтов.

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

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

Крайне рекомендую к ознакомлению тем, кто других подходов-то и не знал никогда и вошёл в мир веба с ноги CRA.

#spa #holywar

#фишка дня

Вы могли читать в разных учебниках или слышать на разных курсах по GIT, что GIT — это "машина времени" или "бесконечная отмена". Так-то оно так, но...

Но что если вы что-то сохранили раз, два, три, десять... захотели отменить одно из старых изменений — а коммитов-то не было?

Wes Bos подсказывает, что на помощь придёт инструмент Timeline в VS Code!

Ну и собственно фишка эта появилась в VS Code в начале апреля. В Твиттере разработчиков есть большой разбор нововведений, и этого тоже: https://twitter.com/code/status/1511463346167496706

Надеюсь, вам не жалко нескольких десятков килобайт на диске ради возможности путешествий во времени :)

P. S. из чата пишут, что в в различных IDE от JetBrains тоже имеется Local History. И хранит он изменения прилично долго. Так что, конечно, фишка не уникальна.

#vscode #feature #timeline #бородач

#инструмент дня

А что мы с вами пропустили? А выход публичной беты десктоп-приложения HTTPie пропустили!

HTTPie начинался как консольный HTTP-клиент. Наш ответ curl'у, так сказать. Чуть более человечный, чуть менее стандарт индустрии.

Почему надо предпочесть его — Postman'у и Thunder Client'у?

С Postman ответ очевиден — он стал монстром, пре- и пост-скрипты мне не нужны, интерфейс запутан, управление env-переменными ужасно.

Thunder... просто бесит.

Так вот, приложение: https://httpie.io/product

Обзор: https://twitter.com/httpie/status/1555557706538303488

Рассказ Злых Марсиан о том, как они его дизайнили: https://evilmartians.com/chronicles/ui-design-for-httpie-macos-vibes-for-the-api-testing-client

Забавно, что статья про дизайн — вторая из серии «Как сделать Electron-приложение максимально десктопным». Первая, про основные правила: https://evilmartians.com/chronicles/how-to-make-absolutely-any-app-look-like-a-macos-app

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

#httpie #client #api

#статья дня, предложка от нашего подписчика glebcha:

Изумительная детективная история о том, как производительность eslint улучшали.

В сюжете:
- ставший привычным случай замены на классический цикл for
- страх и ненависть к полифилам с их последующим удалением из процесса сборки
- исследование/оптимизация "лентяек" (в этом случае была библиотека esquery, которая предоставляет DSP для обращения к AST через css-подобные селекторы)
- «сложности перевода», точнее, как AST тайпскрипта приводить к формату estree и насколько это затратно (использование бабеля с пресетом тайпскрипта существенно ускорило процесс в ущерб типобезопасности).

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

Читаем: https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-3

Автор статьи — член кор-команды Preact. Третья из цикла, если что. Там много интересного.

#подписчик #eslint

#инструмент дня, тянущий на #открытие дня

Я тут изучал возможности сервиса Datadog, особенно в части Session Replay. Что это? Ну, собственно, запись пользовательских действий в вашем приложении.

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

А Datadog раскрывает источники. Как оказалось, их средство записи — открытый проект https://www.rrweb.io/

Чем хорошо? Ну, оно, на самом деле, не записывает никакого видео!

Средство записи делает слепок текущего состояния DOM, кодирует его, архивирует и шлёт вместе с информацией о векторе направления курсора!

А потом просто отправляет разницу с новым слепком.

Вы понимаете, что это значит? Что нагрузка на сеть и компьютер минимальная, никто не гоняет картинки и всё то, что можно восполнить.

Касаемо же приватности: перед отправкой можно забить звёздочками любой HTML-элемент, указав ему нужный атрибут приватности.

Офигенная штука, это вам не жисоны гонять. Хотя, по факту...

#js #tool

#заметка дня

Минус это не дефис! Минус это, простите, минус. Он такой не просто так, будете использовать дефис — табличные данные будут скакать.

Как его поставить?

Ну, на macOS это:
- дефис: -
– минус: option + -
— тире: option + shif + -

У кого-то на клавиатуре Option это Alt.

Кто на винде и линуксе, подскажите ваши сочетания. Я уже не помню, что там с Compose.

Александра Королькова напомнила об этом в своём посвященном новому изданию Живой типографики канале. А старое издание все так же доступно бесплатно.

#typography

Upd.

На самом деле, как верно заметили в комментариях, мы ставим таким образом короткое тире.
https://www.compart.com/en/unicode/U+0150

Минус… он другой:
https://www.compart.com/en/unicode/U+2212

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

Или используйте типографы.

#видео дня

Вы ждали этого. Вы просили. И вот время пришло.

Вышла документалка про React.js!

https://youtu.be/8pDqJVdNa44

Полтора часа превосходства и превозмогания!

Не, ну а что. Про Vue.js было, про GraphQL было. Пришло время!

#react

#видео дня

Первым комментарием к предыдущему посту было: «Подумал что дока из бетки вышла. 😁»

И вообще, это весьма забавно. Бета-версия документации React.js засиделась уже слишком долго. Я вообще, мягко говоря, удивлён, как React прошёл через переход классы — хуки с куском камня вместо документации. Ну да ладно.

Так что если что, доки по реакту читаем тут: https://beta.reactjs.org/

Всё ещё неполное, но всё ещё лучше.

Теперь к видео. Меня спросили, что за документалки по Vue.js и GraphQL.

Редакция отвечает.

Vue.js: https://www.youtube.com/watch?v=OrxmtDw4pVI

GraphQL: https://www.youtube.com/watch?v=783ccP__No8

На том канале (Honeypot) вообще очень много документалок и прочих вдохновляющих видео. Не только для фронтендеров.

По Ember.js хочу...

#video #vue #react

Upd. там и про Эмбер есть, кек. Моя вечная любовь:

https://www.youtube.com/watch?v=Cvz-9ccflKQ