#шпаргалка дня

Уникальное предложение!

Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg

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

#pr #process #work #бородач

#статья дня от подписчика

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

Спойлер: вы у меня все любимые, котаны.

Впрочем, слово автору!

🔥 Slow SPAs Kill Conversions — и я знаю, как это исправить.

Привет! Я Олег, занимаюсь фронтендом и люблю разбираться, как сделать веб быстрее, легче и умнее. Когда SPA начинает тормозить, страдает не только UX, но и бизнес - падает конверсия, растёт отток

В своей новой статье «Улучшаем производительность SPA» я разложил по полочкам:
— Где именно тормозит ваше приложение (спойлер: не только в бандле)
— Как грамотно внедрить ленивую загрузку и код-сплитинг
— Зачем вам Web Workers и виртуализация, если хочется отзывчивости даже на слабых устройствах

p.s спасибо всем, кто даёт фидбэк, шарит и просто читает - вы крутые

Читай гайд по оптимизации
https://dev.to/oltrenin/improving-spa-performance-2k2g

#такое дня

Если этим утром вы проснулись с диким синдромом самозванца и считаете, что уж вас-то точно переоценили, помните.

Где-то в Google есть фронтенд-разработчик, PM и QA, которые не осилили скелетоны и скроллбары. И получают они сильно больше денег чем вы, котаны.

Синдром самозванца, вроде, стал полегче, но в целом стало гораздо хуже, не правда ли? :)

#такое дня

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

Но вот один вопрос, который задавал автор треда, прям немного покоробил: "Какие новые технологии в разработке вас вдохновляют?" И большинство просто отвечало: "RSC". И это автора очень расстраивало.

Речь шла, конечно, о фронтенд-собеседованиях.

Что не так с этим вопросом?

Да, вроде, всё так, пресловутая "искра в глазах". Вот только всегда есть нюансы.

Нюансы имплементации в браузерах. Там не просто собака порылась, там собака всё разнесла. Каждую из новых широкодоступных технологий.

Давайте посмотрим в качестве примера на такую простую штуку, как contenteditable.

Не так давно Firefox 136, наконец, присоединился к поддержке contenteditable="plaintext-only". Это значит, что при вставке какого-либо rich format куска, ну, грубо говоря, оформленного текста из HTML или Microsoft Word, он вставится обычным текстом, оберегая нас всех от лишних тегов.

Крутая фича, не правда ли? Так удачно легла на везде рекламируемый разными инфлюенсерами baseline!

Но вообще, нам что, textarea не хватает? Вот, кстати, не хватает. Например, сделать авторесайз textarea довольно непросто, и CSS Custom Highlight API тоже не накатить. А div всё сделает сам.

Вот только при редактировании такого текста Firefox вставит <br> на каждый перевод строки, а Chrome — нет.

Бадум-тсс.

И так почти с каждой новой спецификацией. Везде, где остаётся хоть какое-то пространство для манёвра вне спецификации — разработчики обязательно куда-то не туда вывернут и потом годами будут это защищать.

Плохо ли это? Да нет, наверное. Особенно, если ты разработчик браузера.

Но восхищаться этим становится как-то... трудозатратно.

#textarea #contenteditable

#статья дня

Как по-настоящему довести коллег в Slack?

Очень просто: заливайте туда эмодзи в формате HDR.

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

Эффект гарантирован:
– Весь чат будет похож на унылый подъезд с одной лампой на 40 ватт — и на этом фоне ВАШЕ эмодзи засияет, как люстра в Большом театре.
– Коллеги будут щуриться и переспрашивать: "А почему у тебя эмодзи такие... странные?"
– А вы будете невинно отвечать: "Не знаю, наверное, Slack сам что-то подкрутил".
А чтобы быстро сделать своё HDR-эмодзи, просто выполните команду:
```
brew install imagemagick

# Adjust the Multiply value up or down to preserve color as opposed to brightness
magick input.png \
-define quantum:format=floating-point \
-colorspace RGB \
-auto-gamma \
-evaluate Multiply 1.5 \
-evaluate Pow 0.9 \
-colorspace sRGB \
-depth 16 \
-profile 2020_profile.icc \
output.png
```

Понадобится ImageMagick и кастомный цветовой профиль, подробности — в статье.

Источник вдохновения: https://sharpletters.net/2025/04/16/hdr-emoji/

Главное — никакого буллинга. Только инновации и немного вкуса к жизни.

#slack #emoji #hdr

#фишка дня от Гарри Робертса aka csswizardry.com

Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь: shape-outside.

Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.

Тем не менее, иногда надо. И поэтому, спешу напомнить: shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!

Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!

Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.

Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.

Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae

Важный момент, это правило shape-margin, без него текст начинает прилипать к объекту.

Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/

Весьма интересный обзор проблем протокола HTTP/2, если что.

#css #shape #img #бородач

#молния дня

Ничего никому не говорите, срочно вбивайте "чиксулуб" без кавычек в поиск Google.

#статья дня

Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://www.tg-me.com/htmlshit/1580

Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.

А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)

Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?

Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d

Ну, точнее, линейная алгебра.

Есть перевод на русский: https://habr.com/ru/articles/870462/

Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.

#svg #math #matrix #transform #бородач

#странное дня

Странное чувство. После 5.5 лет работы в компании Supermetrics, я принял решение уйти.

И сегодня — первый день моего месячного отпуска, после которого я уже не вернусь в столь знакомый офис 😭

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

Куда я ухожу — расскажу через месяц.

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

И добровольное понижение позиции начинает встречаться в сети всё чаще.

Почему это происходит?

— Желание вернуться к инженерной работе.
Управленческая роль — это митинги, процессы и координация. Разработка при этом часто уходит на второй план.

— Смена технологии или направления.
Если переходишь в другую сферу — разумно указать должность, которая соответствует реальному уровню в новом контексте.

— Меньше ответственности — меньше стресса.
Иногда хочется просто делать свою работу хорошо, без постоянного напряжения и необходимости принимать управленческие решения.

— Интерес к самому продукту или команде.
Ради сильной команды или интересного проекта можно пожертвовать тайтлом. Это не редкость.

— Релокация или выход на международный рынок.
Не все должности адекватно транслируются между странами. То, что называлось «тимлидом» здесь, может восприниматься совсем иначе там.

— Ожидания и реальность.
В своей веб-студии ты можешь быть C-level. Но на собеседовании в продуктовую компанию такой титул скорее вызовет недоумение и завышенные ожидания — как у HR, так и у будущих коллег. Иногда честнее и полезнее прийти в новую команду без лишнего шума.

Такие решения не стоит воспринимать как «шаг назад». Это адаптация.
Но очень важно — изучать компанию, куда идёшь. Понимать её культуру, ожидания и структуру. Не везде звания означают одно и то же.

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

#life #work #balance

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

Так вышло, что в своей карьере я умудрился поработать в компании, которая хотела сделать стримы на веб-сайте своей основной фишкой. С тех пор HLS, RTP и nginx-rtmp-plugin были моими друзьями.

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

Но сегодня я наткнулся на нечто прекрасное: https://compositor.live/

Это набор React-компонентов и медиасервер, который позволяет стримить видео и микшировать несколько потоков, управляя ими как обычными компонентами и элементами страницы!

Можно построить нечто аналогичное Google Meet за считанные дни.

Вырезать зелёный экран, добавить текст, поменять видео местами, наложить блупер — всё на месте. Напоминает react-three-fiber по своей сути.

#react #video #mixer #media #stream #бородач

#фишка дня

С трудом понимаю, как эта штука прошла мимо меня. Претендует на очередное переосмысление иконок в вёрстке! Туда, к картинкам, SVG в HTML, SVG в CSS, символам...

И я о функции CSS shape(). Для clip-path.

Например, треугольник будет выглядеть так:

.shape1 {
  clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
}

Выглядит просто? Ну так это потому что и определения простые. Вы только посмотрите, что сделали в CodePen (в смысле, в компании) для демонстрации мощи функции: https://codepen.io/t_afif/pen/JoovLam

Если честно, я пока не видел конверторов SVG в shape(), но уверен, они должны появиться.

Или это отличный шанс кому-нибудь блеснуть знаниями!

Впрочем, в Firefox пока поддержки нет :(

#css #shape #svg

Извините, не было сил держать в себе.

Тред.

#статья дня

...ну и #инструмент дня к ней заодно.

Где-то с месяц назад в блоге Chrome появилась интересная запись, посвящённая... каруселям изображений в CSS

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

И на самом деле, это не самодеятельность Chrome! Это целый новый черновик спецификации: CSS Overflow Module 5.

Из интересного:
- кнопки пред-след aka ::scroll-button
- маркеры слайдов и страниц aka ::scroll-marker
- автоматическая разбивка на страницы
- выделение активного слайда и затенение остальных

Естественно, поддерживается пока только в Chrome со 135 версии и прочих Blink-браузерах.

Но выглядит интересно! Собственно, обещанный конструктор: https://chrome.dev/carousel-configurator/

Учитывая, что карусели изображений подходят только для, хм, изображений и ни один нормальный дизайнер в здравом уме не станет запихивать в карусели важную информацию (её не увидят, это факт), внедрение этой функциональности в браузеры чтобы перестать подгружать сотни килобайт скриптов выглядит разумно.

Ну и фоллбек до обычной прилепленной прокрутки aka scroll snap никто не отменял.

Ваши мысли, котаны? Имеет смысл ждать это в Safari и Firefox?

#css #scroll #gallery #carousel

#codepen дня

Кому в детстве нравилось крутить в руках всякие цепочки и кисточки для велосипедов?

Сегодня ваш шанс вспомнить то самое чувство!

Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)

Тут: https://codepen.io/donotfold/pen/ZYYYJRV

Работает в Chrome и Safari TP.

Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.

#css #scroll #animation

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

Вот вы такие посмеялись надо мной, когда я предложил сделать генератор кривых в CSS aka функция clip-path shape() из SVG, а это уже реальность!

напоминаю, в чём суть беседы: https://www.tg-me.com/htmlshit/3603

Из этого:

M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z

нужно сделать это:

clip-path: shape(from 97.54% 10.91%,curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,close);

Я знаю, вы любите простыню кода в постах!

так вот, Темани Афиф, автор уже известного вам проекта CSS Shape взял и сделал!

А не просто клоуна поставил, слыш ты

Пруф: https://css-generators.com/svg-to-css/

Да, поддерживается только одна кривая aka path aka атрибут d, но каков эффект!

Там, кстати, довольно сложные примеры есть. Одна кривая совсем не означает что-то непрерывное: перо же можно поднимать и опускать по координатам.

Как вам такой поворот, котаны?

#svg #css #shape #clip

#статья дня

Я знаю, знаю — вас всех уже достали различные реализации Doom.

Тут дум, там дум, а на байкале не дум.

И точно так же я прекрасно знаю, как вам надоели все эти #codepen'ы дня в стиле «вы только посмотрите, Мона Лиза на одном div'е», которые являются эксплуатацией линейных и радиальных градиентов и часто вообще делаются через формулы в Excel: группы пикселей конвертируются в колор-стопы градиентов.

Формулы в экселе... погодите. Если что-то можно описать формулой, значит, это что-то можно и автоматизировать?

Сюрприз-сюрприз! Можно. И вот тут начинается абсолютная дичь. Подбираемся к статье дня!

Итак, есть такой проект: WASM DOOM. Это просто движок, на его выходе — canvas. И что делает безумный автор статьи дня?

Правильно, рендерит холст в CSS-градиенты! Вот, собственно, и статья: https://dev.to/grahamthedev/doomrendered-using-a-single-div-and-css-1fal?

А вот прямая ссылка «на поиграть»: https://grahamthe.dev/demos/doom/

Кажется, на этом разговоры о Моне Лизе в одном DIV'е можно заканчивать.

#css #doom

#статья дня

Фича-флаги: фронтенд против бэкенда — где провести линию раздела?

Сегодняшняя статья от ConfigCat — отличный разбор того, как по-разному работают feature flags в клиенте и на сервере.

Если ты не в курсе:
фича-флаг — это переключатель, который позволяет включать или отключать части функциональности без выката новой версии. Прекрасный способ тестировать, экспериментировать и чинить баги на лету.

Фронтенд-флаги
Плюсы:
— моментальные изменения, удобны для UX-экспериментов
— не требуют изменений на сервере

Минусы:
— логика доступна в клиенте (а значит и пользователю)
— сложно скрыть саму фичу, даже если она выключена
— возможны баги при сбоях SDK

Да ладно, кому нужны исходники вашего SPA...

Бэкенд-флаги
Плюсы:
— безопасно: логика и флаги не видны снаружи
— удобно управлять доступом, ролями, регионами и т.п.

Минусы:
— отклик медленнее
— нужна координация между фронтом и бэком
— UI не всегда знает, что делать с отключённой фичей

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

В статье всё по делу, с примерами и выводами:
https://configcat.com/blog/2025/05/08/frontend-vs-backend-feature-flags/

#feature #dev