#релиз дня

Вышел React 19.3, и на этот раз в релизе есть несколько вполне заметных вещей.

Главное — две экспериментальные фичи наконец стали стабильными:

— <ViewTransition> — React теперь умеет нормально работать с браузерным View Transition API: enter/exit/update/shared-element анимации, интеграция с Suspense, свои переходы.

— refs на <Fragment> — можно получить доступ к группе DOM-элементов без лишнего wrapper-div: повесить event listener, IntersectionObserver, управлять фокусом, вызвать scrollIntoView() и т.д.

Ещё появилась довольно приятная мелочь для SSR:

use(browser())

Компонент таким образом можно явно исключить из серверного рендера. На сервере он уйдёт в ближайший Suspense, а в браузере продолжит рендериться как обычно. Никаких typeof window !== 'undefined' и mounted через useEffect.

Плюс React теперь поддерживает Trusted Types. Это браузерная защита от DOM XSS: через CSP можно запретить передавать обычные строки в опасные API вроде innerHTML и разрешать только заранее проверенный TrustedHTML. Раньше React такой объект превращал обратно в строку и ломал механизм. В 19.3 trusted-значения наконец проходят в DOM как есть.

Штош, мне нравится этот островок стабильности.

https://react.dev/blog/2026/09/09/react-19-3

#react

🇩🇪 Германия нуждается в квалифицированных IT-специалистах. Но даже сильного опыта уже недостаточно, чтобы получить оффер. Узнайте у практикующих рекрутеров, что действительно работает на рынке.

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

Начать стоит с LinkedIn — ваш профиль должен быть адаптирован под выдачу в поиске рекрутера.

15 сентября в 19:00 по Берлину (UTC+2) пройдет бесплатный мастер-класс, где вы узнаете:

✔️ Как правильно настроить LinkedIn-профиль, чтобы рекрутеры находили вас и приглашали на интервью
✔️ Как рекрутеры ищут кандидатов через LinkedIn Recruiter и что влияет на выдачу профиля в поиске
✔️ Как адаптировать профиль под разные рынки и карьерные цели
✔️ Какие зарплаты сейчас предлагают компании для IT-специалистов (внутренняя статистика)
✔️ Как получить оффер в Германии уже в этом году

📌 Зарегистрироваться

🎙 Спикеры:

Инесса — IT-рекрутер, раньше работала в Amazon, ING Bank и REWE Digital, где формировала и развивала международные IT-команды.

Роман — Software Engineer с опытом 13+ лет. Работал в BMW, IBM и Eurowings, где прошёл путь от разработчика до тимлида. Обладает большим опытом найма IT-специалистов и точно знает, на что обращают внимание немецкие компании при выборе кандидатов.

Инесса и Роман — основатели рекрутингово-иммиграционного агентства Transparent Hiring. Они знают рынок найма с обеих сторон: каждый день нанимают кандидатов для немецких компаний и помогают специалистам с поиском работы и переездом.

У Transparent Hiring:
⚡️100% закрытие кейсов по визам и жилью — ни одного отказа в визе за 6 лет на рынке
⚡️В команде работают практикующие рекрутеры и визовые эксперты с опытом работы в немецких визовых центрах и австрийском консульстве
⚡️ 600+ успешных кейсов релокации в Германию кандидатов из 45 стран

А еще у команды глубокая экспертиза в работе со специалистами из стран СНГ. Они продолжают перевозить кандидатов в Германию, в том числе из РФ.

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

А пока ждете вебинар, подпишитесь на авторский канал Германия с Инессой 🇩🇪 — там Инесса делится полезными советами по оформлению CV и LinkedIn и переезду в Германию и другие страны Европы.

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

Слово «модель» сейчас обычно вызывает в голове что-нибудь на 7–70 миллиардов параметров и десятки гигабайт весов. Но модель вообще не обязана быть такой.

Vercel Labs сделали gpu-lexer — библиотеку подсветки кода, в которой вместо набора грамматик используется одна обученная модель на 41 321 параметр.

Веса упакованы в 6 бит, а весь браузерный пакет занимает 27.4 KB, в сжатом состоянии.

Работает через WebGPU.
Код сначала режется на слова, пробелы, переводы строк и символы. Потом модель для каждого токена выбирает класс: keyword, string, function, type, operator и т.д. Язык заранее указывать не нужно.

У классических хайлайтеров подход другой. Prism и Highlight.js хранят правила для отдельных языков. Shiki использует TextMate-грамматики. Больше языков — больше правил и больше данных.
Здесь одна модель занимает два десятка килобайт и пытается покрыть всё сразу.

Для сравнения, автор приводит примерно 162 KB для Prism, 240 KB для Highlight.js и 992 KB для полного набора Shiki.

Но это именно ML: результат не гарантирован правилами. С Shiki модель совпадает примерно на 88–90% токенов. На TypeScript и Python лучше, на менее популярных языках и шаблонизаторах заметно хуже.

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

https://gpu-lexer.vercel.app/

#syntax #ml #highlight

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

Этого стоило ожидать. Вашему вниманию — Quake на CSS.

Реализован он с помощью движка PolyCSS, а выбрать карту можно просто передав значение в параметр. Например, вот второй уровень первого эпизода: https://cssquake.com/?map=e1m2

Итак, а что же такое PolyCSS?

PolyCSS — 3D-движок, который рендерит модели обычными DOM-элементами через CSS matrix3d(). Без WebGL и без canvas для самой сцены. Загружает OBJ/MTL, STL, glTF/GLB и VOX, умеет в текстуры, свет, тени, камеры, orbit/map/first-person controls, плюс есть обёртки для React и Vue.

Полигоны при этом реально остаются HTML-элементами. Их можно увидеть в DevTools, стилизовать через CSS, повесить click, анимацию или вообще работать с ними как с обычным DOM. Отсюда же и довольно специфичная модель производительности: важны количество DOM-узлов и объём работы, который потом достаётся браузеру на рендер и композитинг.

Поэтому PolyCSS много возится с самой геометрией: убирает внутренние грани, объединяет подходящие поверхности и выбирает разные способы рендера для разных типов полигонов. По умолчанию используется lossy`-оптимизация, которая может немного упростить исходную сетку ради меньшего количества DOM-элементов; если это нежелательно, есть `lossless. С текстурами похожая история: движок собирает texture atlas, а элементы показывают нужные участки, вместо того чтобы тупо вешать отдельную картинку на каждый треугольник.

До Three.js или Babylon.js по возможностям тут далеко: освещение проще, у теней и текстур есть ограничения, а большие сцены довольно быстро начинают упираться в DOM. Но для небольших интерактивных сцен, моделей и всяких веб-экспериментов подход вполне рабочий, и при этом весь результат остаётся частью обычной страницы.

PolyCSS: https://github.com/layoutit/polycss
cssQuake: https://github.com/layoutit/cssQuake

Демонстрация квейком, конечно, это мощно.

#3d #polycss #quake

#статья дня

Мы как-то с вами уже обсудили, какими разными бывают .*ignore-файлы. И что не .gitignore-ом единым, вот тут: https://t.me/htmlshit/3989

Но я упустил из виду, что у автора есть ещё статья-продолжение! И она — конкретно про разные вспомогательные файлы уже самого git.

Ну, например, с .gitignore всё уже понятно. А что насчёт .gitattributes?

А этот файл помогает разобраться, как поступать с разными файлами. Например, merge strategy:

package-lock.json merge=ours

и всё, разрулится как надо. Или вот шипите вы мультиплатформу:

*.sh text eol=lf
*.bat text eol=crlf

А? По-моему, очень круто. Но давайте дальше.

.gitmodules — конфигурация подмодулей git, .mailmap — хендлит обновление почты в старых коммитах, .gitmessage — шаблон сообщения коммита, .git-blame-ignore-revs — позволяет не включать преттиер и линтер в blame (Привет, Саша!).

Ну и, например, как зашиппить пустую папку в git? Положите в неё файл .gitkeep! Но это не стандартный файл, это просто соглашение. Таких много.

Короче, всё это — вот тут: https://nesbitt.io/2026/02/05/git-magic-files.html

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

#git #config

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

Когда-то давно ещё на Ubuntu я пользовался колорпикером Pick.

Он был настолько прост и удобен, с этими милыми названиями цветов, что я не мог себе представить работу как-то иначе. И вот, наконец, я сделал его клон для macOS!

И назвал его Pipetka.

Как оказалось, macOS не умеет записывать видео выбора цвета :)

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

Проект открытый, на гитхаб автоматически выкладываются неподписанные релизы: https://github.com/bekharsky/pipetka

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

Upd. Подписанный релиз загружен на гитхаб, всё хорошо! Но запускать приложение надо из Applications.

А если есть желание поддержать — Pipetka лежит в App Store: https://apps.apple.com/fi/app/pipetka/id6784390987?mt=12

Пользуйтесь :)

#colorpicker #app #macos

🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг! 
[+ разбор 50 сложных вопросов в подарок ]

17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика!

Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер,

Как это будет:

📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе

📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью

📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ

Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы

И ты можешь посмотреть его бесплатно 🔥
Только завтра, в прямом эфире!

🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥

Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot

Реклама.
О рекламодателе.

#статья дня

Chrome DevTools умеет включать условный Slow 3G, и очень легко забыть, что это не совсем эмуляция реальной сети.

Throttling в DevTools работает на уровне HTTP-запросов, а настоящая сеть — на уровне пакетов. Из-за этого Chrome не очень точно воспроизводит TCP slow start, handshakes, приоритизацию трафика и вообще не умеет нормально симулировать packet loss. В итоге вполне реальна ситуация, когда 20 КБ картинка в DevTools грузится 12 секунд, а на близком к реальному 3G — 300–500 мс.

То есть для быстрого «а как оно будет на медленной сети» DevTools годится. Для замеров, на основании которых вы собираетесь что-то оптимизировать, — уже не очень.

У Ивана Акулова хороший короткий разбор, почему так происходит и чем тестировать вместо этого: WebPageTest, Network Link Conditioner, @sitespeed.io/throttle и другие инструменты с packet-level throttling.

https://3perf.com/blog/chrome-throttling/

#devtools