#фишка дня

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

Белый контур для чёрного текста, чёрный — для белого (внезапно).

Есть ли что-то подобное в CSS? Ну, конечно, есть! Как минимум, можно бросить тень aka text-shadow. Правда, синтаксис не очень интуитивный да и выглядит иногда странненько.

Какие ещё варианты? SVG text, очевидно, но там свои нюансы с доступностью и стилями.

И есть ещё!

-webkit-text-stroke-color

Несмотря на префикс, Firefox тоже его поддерживает (спорное решение, но уж как есть).

Вот только как всегда есть нюанс. По-умолчанию, обводка будет нарисована перед слоем с текстом. Это очевидно, если понимать разницу между штрихом (stroke) и обводкой (outline), но всё же.

Поэтому paint-order: stroke нам в помощь! Таким образом, штрих будет отрисован первым, натуральным образом превратившись в обводку (при достаточной толщине, конечно же):

  -webkit-text-stroke-color: white; 
  -webkit-text-stroke-width: var(--stroke); 
  paint-order: stroke;

#css #stroke #outline

#такое дня

Вы, наверное, ждёте все, что я сообщу о выходе jQuery 4.0?

Ну так не вышла ещё, только RC1: https://blog.jquery.com/2025/08/11/jquery-4-0-0-release-candidate-1/

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

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

И вот что интересно, плохая или, что даже хуже, неочевидная работа Safari и движка WebKit в частности (а точнее говоря, работа движка в конечном продукте интеграции) сформировала целую культуру длинных гневных комментариев!

Вы только посмотрите на пример на иллюстрации! Я уверен, я бы тоже написал нечто подобное (да и писал), если бы наткнулся сам.

Ну то есть суть всей проблемы: WebKit или зумит по двойному тапу, или скроллит, если зум отключён через CSS. И чтобы предотвратить скролл, надо просто объявить использование события двойного клика. Даже отменять поведение по-умолчанию не обязательно.

Тред по этому поводу, кстати, шикарный. Много исторических отсылок и примеров подобных комментариев заодно.

А какая особенность яблочного браузера раздражает вас больше всего, котаны?

#safari #bug #feature

#заметка дня

А помните (конечно же помните!) как мы с вами обсуждали CSS Custom Highlight API для реализации подсветки кода?

Ну вот же, положила: https://t.iss.one/htmlshit/2715

Так вот, а почему бы не объединить подсветку CSS с поиском по тексту? Ну в самом деле, интересно же, как это реализовано, например, в текстовых редакторах или браузерах при поиске по странице. Хотя бы на минимальном уровне.

А реализовано это через, простите, обход дерева!

Алгориииииитмы

Ладно, нам не придётся самим писать обходчик, он уже имеется! Вот: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker

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

Ну в нашем случае всё просто: NodeFilter.SHOW_TEXT — ищем по текстовым нодам, словам.

Ну а дальше всё просто: проверяем регуляркой на совпадения и запускаем подсветку. Уж это за нас теперь может и браузер делать: https://codepen.io/alinaki/pen/zxvPbRJ

Да, теперь можно и ваших камтомных селектах красиво подсветить результат фильтрации.

Пользуемся, котаны.

#css #highlight

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

Мозаики (паттерны) это всегда прекрасно. Но соблюсти симметрию, чтобы заполнить поле, может быть не совсем тривиально.

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

И такой есть!

https://patternico.com/

Можно заполнить встроенными иконками (Font Awesome или Line), а можно загрузить свои. Есть даже ссылка на вариант конструктора с эмодзи :) Правда, там убогонькие Emojione, но вдруг кому ок.

В общем, имеет право на жизнь. Только на мобиле работает не очень :(

#pattern #background #generator #бородач

#заметка дня

Рубрика "Вы не спрашивали, но я всё равно отвечу!"

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

Итак, вопрос:
Что бы убедиться: использование testid в end-2-end тестах для выборки элементов это анти-паттерн, верно? Следует тестировать с точки зрения пользователя: искать кнопку с неким текстом, например.

Знаете ли вы статьи или доклады, которые подкрепляют эту точку зрения?

Отвечаю:
Это не то чтобы антипаттерн, это просто бестолковое использование ресурсов, потому и продвигается как антипаттерн.

1. Надо тестировать то, что видит юзер
2. Если что-то не видит, значит, всё плохо
3. Если там иконка или нужен результат — искать надо по a11y атрибутам.

Сразу поясню за "бестолковость".

Когда ты что-то тестируешь, тесты становятся твоей документацией. Значит, в тестах закрепляется текущее поведение проекта. Даже строки не стоит импортировать (если ты только не тестируешь систему перевода).

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

Дальше, решая проблему через ARIA-атрибуты, ты заодно решаешь вопрос доступности. Бесплатно. Поэтому data-testid и названы бестолковым использованием ресурсов.

Это же, кстати, касается систем трекинга вроде Datadog RUM.

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

Подобный подход к тестировани применяется как в E2E, так и в юнит- и интеграционном тестировании. Вот, например, поясняющая статья от Testing Library, которая нынче стандарт де-факто для тестирования в вебе.

Тестируйте, котаны!

#web #testing #e2e #бородач

#статья дня

JSON.stringify в V8 теперь в два раза быстрее!

Пруф: https://v8.dev/blog/json-stringify

JSON.stringify — одна из самых используемых функций в стандартной библиотеке JavaScript. Её используют для превращения объектов в JSON-строку. Надо ли объяснять, зачем? :)

Ну и мы все с вами так любим применять JSON.stringify для сравнения объектов... ведь достаточно сериализовать оба и сравнить строки. До недавнего времени способа лучше просто не существовало.

А еще клонирование! JSON.stringify => JSON.parse и вуаля!

Кто сказал structuredClone?

В V8 провели серьёзную работу и сделали функцию более чем в два раза быстрее!

Основные улучшения такие:

Срезание углов

Обычно при сериализации движок обязан быть очень осторожным: вдруг у объекта есть геттеры, собственный метод toJSON, прокси или ещё какой-то механизм, который может вмешаться в процесс.

Все эти проверки занимают время.

Теперь V8 научился определять случаи, когда объект «чистый», то есть просто содержит данные и не может неожиданно запустить код. В таких ситуациях сериализация идёт по короткому маршруту — без лишних проверок, что даёт значительный прирост скорости.

Убираем рекурсию

Прежняя реализация работала рекурсивно, из-за чего сериализация глубоко вложенных структур была и медленнее, и потенциально опасна переполнением стека. Теперь используется итеративный алгоритм: он быстрее и надёжнее, вне зависимости от глубины объекта.

Для разработчиков это значит, что операции с данными становятся заметно быстрее.

А как же structuredClone?

Конечно, для клонирования объектов нас есть современный инструмент — structuredClone. Его главное отличие в том, что он не превращает данные в строку, а создаёт точную копию структуры. Он умеет работать с типами, которые JSON.stringify просто «теряет»: Map, Set, Date, RegExp, бинарные буферы и даже циклические ссылки.

Для обмена данными снаружи всё равно будет нужен JSON.stringify, для внутренних операций удобнее и надёжнее использовать structuredClone.

Теперь же, благодаря оптимизациям, JSON.stringify остаётся такой же универсальной «рабочей лошадкой», но работает заметно быстрее.

Вообще, там в статье еще много чего! Очень рекомендую.

#v8 #json #stringify #structuredClone

Старт дан: сегодня SourceCraft от Яндекса открыл прием заявок на грантовую программу и конкурс репозиториев. Если у вас есть проект в опенсорсе — самое время показать его миру.

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

И не забывайте — активность и высокие оценки приближают вас к поддержке. Сегодняшний день может стать отправной точкой для вашего проекта.

Информация об организаторе Акции, о правилах проведения Акции, количестве призов, сроках, месте и порядке их получения размещена по ссылке

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

Volta? nvm? asdf? fnm? n?

Вы же поняли? Да, это всё менеджеры версий node.js.

Ладно-ладно, asdf чуть шире штука.

И хорошо, если нестабильные версии ноды ставишь только ради проверки фишек...

Так вот, к чему это я?

А к тому, что наш любимый pnpm с версии 10.14 тоже стал таким менеджером!

Подробнее: https://pnpm.io/blog/releases/10.14

{
  "devEngines": {
    "runtime": {
      "name": "node",
      "version": "^24.4.0",
      "onFail": "download" // we only support the "download" value for now
    }
  }
}

Поддерживаются Node.js, Deno, и Bun.

За что мы так любим pnpm? За воркспейсы в том числе. Так вот, теперь в разных воркспейсах могут быть и разные версии ноды!

Круто? Не то слово :)

#pnpm #nvm #volta #node #bun

#статья дня

Как решить главную проблему бесконечной бегущей строки?

При создании бегущей строки (marquee, да) в CSS всегда встаёт вопрос: в какой момент элементу нужно «перепрыгнуть» в начало, чтобы анимация выглядела непрерывной? Если рассчитать неправильно — появляются рывки или пустые промежутки.

Как правило, это решается или через JavaScript, или дублированием элементов до какого-то неразумного предела. Или и так и так.

В статье на Frontend Masters уже так хорошо знакомым нам Темани Афифом (он автор CSS Shape) предложен современный способ, где эта проблема решается автоматически.

Используются новые функции sibling-index() и sibling-count(). Они позволяют CSS «понимать», какой по счёту элемент в наборе и сколько всего элементов.

На основе этих данных каждому элементу назначается своя задержка старта анимации. Это делается через формулу: задержка = индекс * (общая_длительность / количество_элементов).

Путь движения задаётся через offset: shape(...), а сама анимация повторяется бесконечно (infinite linear).

В результате элементы выстраиваются один за другим и «зацикливаются» без единого рывка — всё считается динамически, без ручных правок.

И самое приятное: HTML остаётся простым <div> с изображениями, а вся магия — в десятке строк CSS!

Почитайте, очень круто вышло.

#css #marquee

Что происходит с рынком труда 2025?
И как найти работу?

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

Что с этим делать:

Самая главная ошибка - начинать писать резюме
👉вот почему и с чего начать

Если вы все-таки решили искать работу через hh вот вам
👉 13 инсайдерских лайфхаков по алгоритмам ХХ
👉 Как писать резюме
👉 А что еще фотку надо делать?

Начали там окликаться, но 90% висит в непрочитанных?
👉 вот как это надо делать - 6 этапов 😱

Наконец-то пробились на собес - супер. Как понять, сколько просить денег?
👉Вот тут реальные примеры ЗП вилок в ИТ, в т.ч. на 550к у аналитика

Дальше веселят рекрутеры - «Вы для нас слишком оверквал», «мы выбрали более подходящего кандидата»
👉Что на самом деле означают их отказы

Ну ладно, тут вроде выдохнули … они прислали оффер.
Ты увольняешься. Через 2 часа тебе говорят: «ой, сорри, мы отзываем оффер».
👉 реальная история. что с этим делать

Еще больше полезных материалов по ЗП вилкам, резюме и прохождению собесов, которые уже помогли в 2025 году получить больше 500 офферов на ЗП до 1,2 млн. руб

ЧИТАТЬ ТУТ

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

React Compiler, говорите...

А что если я скажу вам, что есть инструмент, конвертирующий ваши JSX-компоненты во... во все остальные?

Буквально: JSX/Svelte в: React, Svelte, Vue, Angular, Qwik, Lit, Solid, Preact...

Давайте просто сразу дам ссылку на песочницу: https://mitosis.builder.io/playground/

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

Знаешь JSX или Svelte — пишешь на всех :)

#framework #tool #бородач

🎯Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда

Как писать продуманный и масштабируемый фронтенд с помощью React? Какие паттерны реально работают, а какие — мода ради моды?

В новом сезоне Podlodka React Crew обсуждаем архитектуру, производительность, нестандартные layout'ы, системный подход к интервью и многое другое.

📌 В программе:
• Паттерны анимаций с View Transition API
• Проверка AI-ассистентов на реальных задачах
• Глубокое погружение в архитектуру React Hooks
• Практика layout'ов вне CSS Grid и Flexbox
• System Design для фронтендера: как не завалить интервью

💡Все доклады — с практикой, кейсами и интерактивом.

📆 Реактим с 25 по 30 августа. Бегом за билетами!


Вот вам промокод на скидку 500 рублей: react_crew_3_j8TCjg

А сегодня чуть позже я запущу розыгрыш билета для вас, котаны! Надо только понять, какого бота использовать…

Итак, котаны, розыгрыш билета на конференцию Podlodka Crew! Описание и тематика конференции выше. Отмечаемся!

#статья дня

Можно ли заменить стейт-менеджеры — простым localStorage?

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

Давайте подумаем:

> Не всё должно быть постоянным. Допустим, у тебя открыто модальное окно. Перезагрузил страницу — и оно снова открыто, потому что значение сохранилось в localStorage. Абсурдный UX.

> Нет реактивности. Если просто читать из localStorage, React не узнает, что данные изменились, и не перерендерит компонент. Придётся вручную дёргать setState.

> Событие storage работает не так. Оно срабатывает только в других вкладках, а не в той, где ты вызвал localStorage.setItem(). То есть синхронизацию внутри приложения оно не решает.

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

> SSR недоступен. На сервере localStorage просто не существует, и код падает с ошибкой.

localStorage и, частично, sessionStorage отлично подходят для мелочей:

> выбор темы,
> сохранение введённых данных формы,
> открытая вкладка меню,

Но как только речь заходит о данных, которые должны синхронно обновляться в разных компонентах и вызывать ререндер — нужен Context или полноценный state-менеджер.

Итак: localStorage — это удобное дополнение к Context/Redux/Zustand, но не замена. Он решает задачу «сохранить между сессиями», а не «синхронизировать состояние внутри React».

А если хотите подробностей — собственно, статья от Нади Макаревич: https://www.developerway.com/posts/local-storage-instead-of-context

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

#react #localstorage

#фишка дня

И #тред дня, и #статья дня... Сегодня всё и сразу от Джоша Комо.

И речь пойдёт о недооценённом хуке в React: useDeferredValue.

Итак, некоторое время назад Джош выпустил свой инструмент для создания красиво выглядящих теней (да-да, drop-shadow просто уже недостаточно). И одной из проблем инструмента стала... дёрганая реакция на движение ползунков. Как будто мало FPS.

Начав разбирать проблему, Джош понял, что событие onChange происходит очень часто, за это время надо успеть сгенерировать тень, потом отрисовать её, потом вставить код в редактор для копирования. А редактор, естественно, ещё пытается этот самый код подсветить.

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

И именно для этого и нужен хук useDeferredValue. Данные молучим только когда основной процесс рендеринга завершится. Буквально ленивое выполнение.

Собственно, тред и статья если кто предпочитает подробности. Там, как всегда, шикарно.

Будьте разумно ленивыми, котаны!

#react #hook #бородач

🍂 Сезон кода едет в Санкт-Петербург!

6 и 7 сентября в новом офисе Т-Банка на Свердловской набережной пройдёт фестиваль для тех, кто живёт технологиями: разработчиков, ML-инженеров, архитекторов, техлидов и всех, кому интересен IT.

Что будет:
— яркие доклады от экспертов Т-Банка и партнёров;
— разбор инженерных решений и рабочих кейсов;
— демонстрации продуктов и то самое «под капотом»;
— карьерные консультации и живой нетворкинг;
— афтепати для участников, а еще с собой можно позвать одного взрослого и одного ребенка к 18:00

🗓 Программа:
День 1 (6 сентября): архитектура масштабируемых систем, клиентские сервисы Т-Банка, путь от идеи до своего инженерного инструмента.
День 2 (7 сентября): бэкенд-инструменты, безопасность, LLM от исследований до продакшена.

📍 Где: Санкт-Петербург, Свердловская наб., 44, стр. 1, БЦ «Феррум II»
🕚 Когда: 6–7 сентября, регистрация с 11:00

Чтобы попасть на фестиваль, заполните форму по ссылке, выберите фонд для пожертвования от 1 500 ₽ за каждый день — и получите билет на указанную при регистрации почту.
👉 Регистрация и подробности

⚡️ Уже сейчас можно оставить предзаявку на «Сезон кода» в Нижнем Новгороде — напомним вам, когда откроется регистрация.

Реклама. АО «ТБанк», ИНН 7710140679, лицензия ЦБ РФ № 2673, Erid: 2W5zFJ9HiGx