14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Выиграй деньги, став чемпионом ИТ-соревнования от МТС
Остались считанные дни до окончания регистрации — призовой фонд 1 500 000 рублей.
True Tech Hack — это три уникальные задачи для инженеров данных, разработчиков и системных аналитиков. За лучшие решения дают деньги и зовут на стажировку. Для всех финалистов — закрытая вечеринка с диджеем в Москве на видовой площадке.
Среди всех, кто зарегистрировался, разыгрывают 2 приставки с геймпадами для облачного гейминга МТС Fog Play и 10 подписок по 20 часов игры.
Регистрация закроется 10 апреля в 10:00 — торопись!
15 апреля на вебинаре поговорим о том, как с нуля построить разработку в облаке
⚫️Обсудим, зачем переносить разработку в облако, какие есть подводные камни
⚫️Подготовим базовую инфраструктуру и развернëм ключевые сервисы разработки
⚫️Соберём, протестируем и развернëм приложение в целевое окружение, оптимизируем раннеры для ускорения сборок
⚫️Настроим безопасность: доступы, секреты, шифрование
⚫️Подготовимся к продакшену и масштабированию
⚫️Ответим на ваши вопросы
Присоединяйтесь! Узнайте, как с нуля построить и запустить инфраструктуру разработки в облаке MWS Cloud Platform.
📆 15 апреля в 14:00 (мск)
Зарегистрироваться
#заметка дня
Чем отличаются auto-fit и auto-fill в гридах?
Отвечает Александр Друзь.
Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)
Так в чем же разница, словами? :)
При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.
В общем, всё довольно просто.
#css #grid #repeat #бородач
#книга дня
Невозможно было пройти мимо, обязательно к прочтению!
#инструмент дня
Как узнать, верный ли JSON тебе передали, или нет?
Ну, общепринято как-то так:
function tryParseJSONObject (jsonString){
try {
const o = JSON.parse(jsonString);
if (o && typeof o === "object") {
return o;
}
}
catch (e) { }
return false;
};
1234 и false к ошибке не приведут. Да и передача null просто вернёт null, который ещё и объект... ну вы поняли.
#codepen дня
Наткнулся на приятный и эффектный пример 3D-интерфейса — Painting Wheel.
Выглядит и ощущается как Three.js, но это CSS-преобразования.
По сути, берётся набор карточек и раскладывается по окружности. У каждой есть свой угол и одно и то же расстояние от центра. За счёт этого из обычного списка получается кольцо. Дальше вся сцена чуть наклоняется и добавляется перспектива.
JavaScript используется только чтобы поменять перспективу.
Ну а чтобы показать, что это всё совсем не запредельно сложно, я решил вытащить непосредственно реализацию кольца в отдельный кодпен: https://codepen.io/editor/alinaki/pen/019d2f65-9738-7ea5-a667-524ee1a68bef
Чтобы стало совсем понятно, я добавил панель управления: можете прощёлкать чекбоксы в верхнем правом углу и настроить любой аспект карусели.
Можно вообще сделать простую бесконечную прокрутку!
Из наворотов — только зум колесом, чтобы было проще рассматривать и понимать происходящее. Понятное дело, ваш ИИ-агент с лёгкостью вытащит код и из оригинального примера, но из упрощённого это делать сподручнее, не правда ли? :)
#css
🎮 Хочешь зарабатывать на играх, а не только играть?
Игровая индустрия растёт каждый год — и ей нужны специалисты.
В XYZ School обучают профессиям, без которых не создаётся ни одна игра:
🧠 Гейм-дизайнер
🖌 Концепт художник
📱 Тестировщик мобильных игр
🎬 Специалист по визуальным эффектам
💻 Разработчик игр (Unity, Unreal Engine, C#, C++)
🎨 Художник трехмерных моделей (3D-художник)
На курсах ты не просто смотришь лекции — выполняешь практические задания, собираешь портфолио и работаешь под руководством специалистов, которые участвовали в проектах вроде Doom, Fortnite и Metro.
🚀 Начать можно без опыта.
👉🏻 Посмотреть курс
Erid: 2SDnjdMg8n5
Название: ООО "ИКС ВАЙ ЗЕТ НЕТВОРК"
ИНН: 9705150153
#польза дня
Самое важное при разработке ИИ-агентов (на мой взгляд) — создать такую систему, где тебя не нагружают очередными «можно и допилить», а снимают рутину, освобождают время.
Поэтому приглашаю всех на Agents Week от Школы анализа данных Яндекса, который пройдет с 6 по 10 апреля. В течение пяти дней будут вечерние лекции с экспертами, где вы сможете задать любой вопрос, а ещё практика-практика-практика.
За 5 дней узнаете с чего начать проектирование агентов и настройку их поведения, какие есть практики построения single-agent и multi-agent-систем, как доводить агентов до продакшена.
Программа, спикеры, регистрация — всё по этой ссылке
#vscode дня
Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.
Я щас не шучу, know your tools!
Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.
Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!
Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque
Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!
Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).
Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.
Но потом ка-а-ак понял!
#search #extension #бородач
🌐 Что происходит внутри инфраструктурных сервисов Yandex Cloud?
Разработчики Yandex Cloud и Yandex Infrastructure расскажут об этом на встрече для разработчиков, архитекторов и инженеров, которая пройдет 16 апреля.
В программе вас ждут реальные технические варианты реализации и опыт нетривиальных решений разработчиков платформы:
— Инфраструктура как код для управления оповещениями: и никаких проблем
— Развёртывание в ритме танго: как мы заменили оркестрацию процесса установки «хореографией»
— Как мы оптимизируем вывод больших языковых моделей: кэширование, время отклика и ресурсы графических ускорителей
— Как мы строили собственную сеть доставки контента и через что нам пришлось пройти?
— Как мы работаем с уязвимостями на примере современных аппаратных атак
Также команда расскажет о разработке программных решений, которые устанавливаются в инфраструктуре заказчика, и о том, как в процессе установки оркестрацию заменили «хореографией».
Участники смогут обсудить волнующие вопросы, варианты реализации и ошибки с разработчиками сервисов Yandex Cloud и другими участниками.
Встреча пройдет офлайн в Москве и онлайн. Помимо экспертных докладов, офлайн участников ждут секретная техническая сессия и развлекательная программа, а онлайн-участников ждёт инженерное соревнование в прямом эфире.
Зарегистрируйтесь, чтобы послушать реальные истории от разработчиков, обменяться опытом и узнать, что скрыто под «капотом» инфраструктурных сервисов, а также какие планы у команды на будущее!
Стань стажером-разработчиком Frontend/Fullstack в Яндексе
Реализуйте новые фичи и интерфейсы в приложении Умного Дома, пишите веб‑приложения для роботов‑доставщиков и автономных машин, участвуйте в развитии международных финтех‑стартапов Yango Pay и Buy&Sell, создавайте геймификацию на трекинге заказа в Яндекс Лавке и Яндекс Карты нового поколения.
Фронтенд-разработчику необходимо:
— уверенно владеть HTML, CSS и основами JavaScript
— иметь опыт взаимодействия с TypeScript, React и SSR. Как преимущество: понимать основы Git, Docker, написания тестов
— обладать базовыми техническими навыками.
Фулстек-разработчику необходимо:
— иметь опыт с Node.js
— понимать основы CI/CD, баз данных, WebSocket, REST API или GraphQL
— знать основы Python или Go.
Стажировка официально оформляется, оплачивается, имеет гибкий график и предлагает оплату проезда и проживания для студентов из других городов.
Станьте частью одной из команд фронтенд или фулстек разработчиков в Яндексе — оставляйте заявку.
#такое дня
Развлекаюсь тем, что извлекаю из ТВ-пульта на Flutter разные общие штуки в библиотеки. Первым на выход пошла реализация DLNA, ну а теперь — D-Pad, крестовина.
Понятное дело, сама по себе крестовина мало интересна. А вот как концепт радиального меню — очень даже!
Ну и потренироваться выкладывать пакеты в общий репозиторий тоже надо.
#flutter
90% каналов про ИИ - пересказ чужих новостей.
А что если контент делают те, кто строит эти системы?
🥷🏻 NeuroNinja - канал, который ведёт команда инженеров из Яндекса, Тинькова, Озона и Сбера.
Не блогеры. Не инфобизнесмены. Практики, которые каждый день работают с ML, LLM и продуктовым AI.
Что внутри:
🔹 Разборы реальных кейсов из BigTech изнутри
🔹 Гайды по нейросетям от тех, кто их внедряет
🔹 Инструменты и лайфхаки, проверенные в бою
🔹 Честный взгляд на тренды без хайпа
Без рекламы. Без воды. Только то, что реально работает.
👉 Подписаться: /channel/+UuibMa7rB-diNGM6
#фишка дня
А вы знали, что Apple уже очень давно для каждой ноутбука поставляет и 3D-модель?
Кроме шуток, если зайти на страницу продукта с Safari на iPhone, появится возможность посмотреть, например, ноутбук в дополненной реальности. Ясное дело, скачивается 3D-модель. Но эту модель легко вытащить и посмотреть даже на десктопе! Ссылка, нонечно, скрыта, потому лезем в исходники и ищем USDZ-файл.
USDZ расшифровывается как Universal Scene Description Zipped, и придумал был ещё в Pixar. Что значит Zipped? Очевидно, zip-контейнер, а значит, можно распаковать и найти там и модель, и текстуры и карты нормалей.
Но это история давняя, ARKit с нами уже лет 10. Что новое — это то, что начиная с MacBook Neo модель поставляется с возможность конфигурации по цвету и состоянию! Закрыт-открыт, розовый-жёлтый... вот это вот всё.
Можете сами зайти на яблочный сайт и скачать USDZ любого продукта. Как минимум, это забавно. А дальше уже можно и модельки покрутить, если надо.
#apple #3d #ar
#статья дня
Разработчики Microsoft Edge очень любят доставать разные экспериментальные фишки и включать их. Чем и живут. Но в этот раз они пошли дальше!
Вашему вниманию представляется focusgroup: https://blogs.windows.com/msedgedev/2026/03/05/making-keyboard-navigation-effortless/
Что делает? А довольно крутую штуку: внутри группы фокус элементов можно будет передвигать клавиатурными стрелками, а не только табом. Захват фокуса произойдёт автоматически, не надо городить скрипты.
В блоге Chrome они тоже отметились: https://developer.chrome.com/blog/focusgroup-rfc
Потестировать можно уже сегодня в Chromium-браузерах: включаете Experimental Web Platform features в about://flags и дальше тут: https://microsoftedge.github.io/Demos/focusgroup/
Очень жду распространения, поддержка клавиатурной навигации штука сложная.
#focus #a11y
#заметка дня
Модераторы Apple отклонили мой пульт, соответственно, не приняв его в магазин.
Причина звучит обидно и стыдно: 4.3 Spam. И означать это может всё, что угодно: от того, что использованы чужие закопирайченные ассеты и до того, что я просто взял рандомное приложение с гитхаба и собрал его.
А я ведь им соточку занёс, и вовсе не рублей!
Каюсь, логотипы приложений были взяты с сайта Самсунга, было глупо их не менять. Единственная ли это причина — неизвестно. Возможно, слишком много пультов развелось.
Вот только проблема с теми пультами довольно прозаична: они все требуют подписку. 7 долларов в неделю за пользование посредственным приложением — а, каково?! Весь их бизнес построен либо на отмывании денег, либо на забывчивости людей (примерно как большое количество сервисов резюме).
Но Apple такая ситуация полностью устраивает, 15-30% капают же, почему нет.
Ладно, отбомбившись, я посмотрел ещё раз и решил реализовать некоторые вещи, которые хотел вынести в обновления: визард подключения, переключение между несколькими телевизорами, «умные» сцены вроде включить ТВ и нетфликс, или выключить ТВ через заданное количество минут. На подходе макросы.
Вся суть действий — превратить копию физического устройства в нечто большее, в подобие некоторого умного хаба. Во что-то, напоминающее сервис.
Пульт сейчас в TestFlight, если у кого есть дома телевизор Samsung или LG — отмечайтесь в комментариях, пришлю приглашение. Пульт никаких данных не собирает вообще, в том и была задумка.
Но даже подача приложения на ревью это отдельная история: то размеры скриншотов не те, то видео. Потому в последующих постах я выложу разные полезные сниппеты и подходы, которые помогли мне пройти подачу как минимум до модерации. Надеюсь, получится и дальше.
P. S. Если я всё верно понял, вот и ссылка на TestFlight: https://testflight.apple.com/join/XXPPYAHN
#apple #flutter
Как строить карьеру в IT и не раствориться в работе.
Я backend-разработчик и футбольный энтузиаст с системным подходом к спорту.
Играю в разных странах и с разным уровнем соперничества: от локальных матчей до турниров в Азии.
В канале пишу:
— о личном опыте лида в IT и реальных технических решениях 👨🎓
— о развитии своих проектов и о том, чему они учат 📈
— о футбольных движухах в разных странах 🏃♂️
— о том, как не терять форму при плотной работе 💪
— о лайфстайле зимовщика 🧘♀️
Без мотивационных лозунгов.
Без «успешного успеха».
Только практика, дисциплина и честные наблюдения.
👉 Футбольный синьор
Если вам близка идея баланса между карьерой и личной жизнью и интересно заглянуть за кулисы IT, добро пожаловать на канал.
#такое дня
Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»
Ну… как бы… мне даже добавить нечего: mizinov/area-comparison" rel="nofollow">https://observablehq.com/@mizinov/area-comparison (на русском)
#optical #illusion #perception #design #бородач
#молния дня
Обнаружена supply chain-атака на axios. Скомпрометированы версии 1.14.1 и 0.30.4, опубликованные через взломанный аккаунт мейнтейнера.
Что происходит:
— в зависимости добавлен вредоносный пакет
— он выполняется через postinstall без участия пользователя
— скачивает payload с C2 и запускает его (macOS / Windows / Linux)
Под угрозой:
— проекты с axios@^1.14.0 или ^0.30.0 (обновятся автоматически)
Что делать:
— зафиксировать версию на 1.14.0 / 0.30.3
— проверить системы, где делали npm install сегодня
— при необходимости ротировать креды
Подробный разбор:
https://safedep.io/axios-npm-supply-chain-compromise/
Вокруг ChatGPT и AI сейчас много шума, и среди него всё сложнее находить действительно полезные источники.
Это подборка Telegram-каналов про разработку, AI и безопасность без случайных рекомендаций. Внутри:
— автоматизация и инструменты для разработчиков
— OSINT, кибербезопасность и практики ИБ
— работа с AI и примеры промптов
— агенты, инструменты и новости индустрии
Если хочется нормального сигнала вместо шума — вот список:
/channel/addlist/iUFqGiQpZ6NmNjE6
#инструмент дня
Я искренне радуюсь способности разных людей создавать хайп вокруг своих продуктов. Умению создать продукт, попадающий в нерв миллионов людей. И сегодня такой продукт — Pretext от Шен Лу.
Собственно, заявка прям сильная: дать людям чёткий, быстрый и всеобъемлющий алгоритм подсчёта размерности текстовых нод на чистом TypeScript.
Как звучит, а?!
Зачем это нужно? Ну, яркий пример прямо на скриншоте: рассчитать, в каких местах разорвать текст, чтобы вставить туда фигуру. Или раскладка masonry. Или ASCII-арт. Или аккордионы с конкретным числом строк. Или редакторы текста. Примеров-то прям много: https://chenglou.me/pretext/
Правда — и вот проблема хайпа — подаётся это на потрясающем соусе вроде: «На CSS это сделать невозможно или очень сложно, все проблемы решены, никакого рефлоу, много лет этого никто не делал, мы прошли сквозь ад, пока писали это, никаких больше расчётов через DOM, работает с корейским и японскими языками» и так далее и тому подобное.
Я ни в коей мере не преуменьшаю объём работы и возможности библиотеки. Но...
Но даже если мы оставить за рамками то, что CSS в целом давно решает как минимум половину заявленных вещей и даже гораздо проще, вся красота решения лежит в стандартном методе canvas.measureText. Эта штука с нами чуть ли не с IE9 и — естественно — на ней писалось множество решений в последние лет 10. Так что половина заявлений о крутости библиотеки ну... как минимум, слишком сильная.
Главное — уметь попасть в нерв, да :)
Нас ждут еще множество удобных библиотек, реализующих всё и сразу, благодаря хорошей забытой идее и LLM.
Довольно злой пост получился, библиотека-то точно стоит вашего внимания. Просто посмотрите на это. Или это. Вдохновить людей — это тоже дорогого стоит.
#css #js #measureText #text
#инструмент дня
Если доступность для вас не пустой звук (а мы уже как-то обсуждали, что рано или поздно с проблемами управления интерфейсом столкнутся все), то поддерживать горячие клавиши точно придётся.
А для этого о них надо как-то договориться, продемонстрировать, выявить возможные проблемы и нестыковки. К примеру, стрелки не работают там, где должны.
Ну или, как вариант, показать кому-то как эффективно можно управлять текстовым или графическим редактором, девтулзами. Стать настоящим хоткей-ниндзей!
Что ж, по крайней мере для маководов у меня есть решение! Keycastr — https://github.com/keycastr/keycastr
Задача этой маленькой утилиты буквально вывести на экран нажатые клавиши. Конечно, есть выбор — показывать все, или только модификаторы.
Очень круто было наблюдать, как наш техлид джирой манипулирует :)
Ну и я уже вовсю создаю баги поддержки хоткеев с видео. Гораздо удобнее, чем описывать проблему словами.
Upd.
Альтернатива для Windows: http://carnackeys.com/
Для Linux:
https://github.com/bm-mit/key-caster
https://www.thregr.org/wavexx/software/screenkey/
https://github.com/critiqjo/key-mon
#hotkey #a11y #record #бородач
#инструмент дня
Хотели попробовать local‑first? Zero от Rocicorp — отличный способ это сделать.
Идея простая: клиент работает с данными так, будто они у него уже локально. Чтение и запись происходят мгновенно, а синхронизация с сервером идёт в фоне. Даже если интернет медленный или его нет, интерфейс остаётся отзывчивым.
Запросы к данным автоматически становятся подписками и кэшем. Не нужно писать refetch, invalidate или подписки вручную — библиотека сама решает, какие данные хранить на клиенте и когда их обновлять. Изменения, сделанные на клиенте, сразу видны в UI, а сервер получает их в фоне.
На клиенте данные хранятся в IndexedDB, что обеспечивает быстрый доступ и поддержку оффлайна. На сервере Zero использует Postgres как источник правды и реплицирует данные в т. н. zero-cache для обслуживания клиентских запросов. Конфликты при синхронизации обрабатываются библиотекой автоматически.
API достаточно простой: схема с типами и связями, queries для реактивного чтения данных и mutators для записи. Всё это позволяет строить приложения с мгновенным откликом и оффлайн-доступом без больших изменений в привычном коде.
Если хотите попробовать local‑first без сложной архитектуры и ручного синка — Zero даёт такую возможность.
https://zero.rocicorp.dev/
#local #indexeddb #postgresql
#видео дня
Оказывается, у блога Chrome for Developers есть свой собственный YouTube-канал: ChromeDevs" rel="nofollow">https://www.youtube.com/@ChromeDevs
Формат, правда, довольно странный. Основу канала составляют видео по 1-3 минуты, и нет, даже не все из них шортсы. Впрочем, есть и подкасты.
Ладно, это я к чему. Они выкатили очень пафосное видео о том, как в Pinterest пересмотрели свои методы создания CSS-каруселей и — как утверждается — избавились от кучи джаваскрипта, перейдя на нативные View Transitions и свежие API для скролла: https://youtu.be/oWJPu3yvfp8
Но, конечно, невозможно в две с половиной минуты уместить все идеи проекта. Потому действительная польза — в описании! А что там у нас?
А, собственно, ресурсы для повторения:
Доступные карусели → https://goo.gle/4aTpGtc
Карусели на CSS → https://goo.gle/3YuWhOv
Локальные View Transitions → https://goo.gle/3XuZMUX
View Transition API → https://goo.gle/3MzVngY
Другой вопрос, конечно, в том, что половина этих API толком недоступна не то что в других браузерах, а даже в самом Chrome без флага, это они аккуратно обходят стороной.
Впрочем, никого ещё обычный скролл и отсутствие переходов вместо красивых транзишенов не убивало.
#chrome #css #carousel
#красивое дня
Угадайте, что красиво летит по небу и укладывается в 249 символов?
Правильно, SpaceX Starship!
Не, ну правда:
vec2 p=(FC.xy-r*.5)/r.y*mat2(8,-6,6,8),v;for(float i,f=3.+snoise2D(p+vec2(t*7.,0));i++<50.;o+=(cos(sin(i)*vec4(1,2,3,1))+1.)*exp(sin(i*i+t))/length(max(v,vec2(v.x*f*.02,v.y))))v=p+cos(i*i+(t+p.x*.1)*.03+i*vec2(11,9))*5.;o=tanh(pow(o/1e2,vec4(1.5)));
#статья дня
А ну, сходу ответьте, чем отличается :has(:not()) от :not(:has())?
На самом деле, если тупо воспользоваться логикой английского языка — легко ошибиться.
Разработчики браузера для, простите, разработчиков —Polypane — ведут свой блог с разными мелкими фишками, и сегодня — вот такая, как раз об этом.
📌 :has(:not())
Выбирает элементы, которые содержат определённые дочерние элементы, но не содержащие другие.
.card:has(:not(img)) {
background: lightblue;
}
.card, если внутри есть любой элемент, кроме <img>.
.card:not(:has(img)) {
background: lightcoral;
}
.card, если внутри вообще нет <img>.:has(:not(img)) проверяет, есть ли что-то, кроме <img>.:not(:has(img)) проверяет, что <img> вообще нет.
#фишка дня
Я всегда считал карту кода достаточно бестолковой фишкой. С другой стороны, TODO-комментарии и ошибки достаточно легко распознаваемы и перемещаться по ним удобно.
А сегодня я узнал, что блоки кода можно ещё и помечать комментарием // MARK: Something, и этот самый Something будет виден на карте.
В идеале, конечно, не стоит развозить свой код на несколько экранов, но прежде чем разбивать — надо ж распознать, верно? :)
#vscode #minimap #бородач
#статья дня
Страница грузится 7 секунд.
Причина — один эмодзи ❤️
Иногда проблемы с производительностью оказываются совсем не там, где их ищешь. В статье Аллена Пайка «A Broken Heart» он разбирает случай, когда страница внезапно начала грузиться по 7 секунд, хотя сервер, сеть и JavaScript работали нормально. В профайлере оказалось, что почти всё время Safari тратит на layout — причём один проход занимал больше секунды.
Дальше — обычный путь: постепенно вырезать куски интерфейса и смотреть, когда станет быстрее. В какой-то момент выяснилось, что всё упирается в один эмодзи в кнопке. Убираешь его — всё работает мгновенно. Возвращаешь — снова тормоза.
Причина оказалась в том, как Safari работает со шрифтами. Если указать Noto Color Emoji как основной шрифт, он используется даже для обычного текста, хотя покрывает только эмодзи. Для всех остальных символов браузер каждый раз ищет подходящий fallback-шрифт. В процессе layout он пересчитывает размеры текста, переносы строк и позиции элементов, и делает это много раз подряд.
В норме такие пересчёты почти ничего не стоят, но в Safari здесь есть просадка, из-за которой всё резко замедляется. В итоге одна строка с emoji-шрифтом может увеличить время layout в десятки или даже сотни раз.
Минимальный пример:
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">
<style>
body {
font-family: "Noto Color Emoji";
}
</style>
<button>Click ❤️</button>
#заметка дня
Иногда стоит выкладывать рекламу, чтобы просто увидеть, что вы живы, котаны. На посты такого количества реакций никогда нет.
А тема сегодняшней заметки — очередная статья на тему «Нам не нужен useEffect»: вот тут.
В чём же проблема таких статей? Да на самом деле проблемы-то особой и нет, есть некоторая недосказанность.
И недосказанность эта связана с тем, что ВСЕ ваши прекрасные библиотеки управления состоянием, анимацией, загрузкой данных и кешем — будут использовать useEffect внутри себя. И говорить, что вы отказываетесь от useEffect — не очень верно.
Что верно, так это то, что их имплементация будет просто намного лучше протестирована. Ну, возможно.
Тем не менее, самый любимый пример, когда отказ от useEffect действительно имеет смысл — на иллюстрации.
Суть проста: если ваше действие требует полной перезагрузки логики, перерисовки компонента — так перерисуйте, блин, компонент, а не пытайтесь через useEffect чота там стартануть.
Продублирую текстом:
// ❌ BAD: Effect attempts to emulate remount behavior
function VideoPlayer({ videoId }) {
useEffect(() => {
loadVideo(videoId);
}, [videoId]);
}
// ✅ GOOD: key forces clean remount
function VideoPlayer({ videoId }) {
useMountEffect(() => {
loadVideo(videoId);
});
}
function VideoPlayerWrapper({ videoId }) {
return <VideoPlayer key={videoId} videoId={videoId} />;
}