Записки фронтендера

Обновлены word-spacing и letter-spacing Chrome в 145 версии добавил возможность передачи процентов данным свойствам, где 100% — это размер символа пробела (U+0020) в текущем шрифте. Эта фишка будет полезна адаптивным макетам, где при смене font-size или font-family, автоматически должны подстраиваться и отступы. ⚙️ Поддержка браузерами (word-spacing, letter-spacing ещё не добавили)

Вышел Vite 8 🔥 Главным изменением этой версии является переход с esbuild (для dev режима) и Rollup (для build) на единый Rolldown, написанный на Rust. Он такой же быстрый как esbuild, поддерживает тот же API плагинов, что Rollup и Vite, а также привносит ряд недоступных ранее фич, среди которых: полноценный bundle-режим, более гибкое управление разделением чанков, персистентный кэш на уровне модулей, Module Federation и многое другое. Авторы заявляют, что такой переход позволил ускорить этап сб...

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

Upsert для Map и WeakMap 🔥 Chrome в 145 версии добавил сразу 2 новых метода: 📌 getOrInsert(key, value) — возвращает существующее значение по ключу key, если оно есть, иначе вставляет value и также возвращает его const fruitsCount = new Map([ ['apple', 10] ]); const appleCount = fruitsCount.getOrInsert('apple', 5); // 10 const bananaCount = fruitsCount.getOrInsert('banana', 20); // 20 📌 getOrInsertComputed(key, callback) — то же самое, только вставляет результат выполнения переданной callback ...

Новые мультиколоночные CSS свойства 🔥 Chrome в 145 версии добавил column-height и column-wrap, расширив тем самым возможности мультиколоночной вёрстки. column-height задаёт высоту каждой колонки текста, а column-wrap указывает, будет ли происходить перенос текста в колонки ниже при переполнении этой высоты. Значения column-height: 1) auto (по-умолчанию) — высота рассчитывается автоматически на основе других свойств 2) Численные значения от 0 до бесконечности, например 100px Значения column-wrap...

Caninclude Полезный инструмент, который позволяет определить может ли один элемент быть вложен в другой по спецификации HTML По каждому тегу предоставляется детальная информация: 1) Его категория 2) Контекст, в котором может быть использован 3) Контентная модель Если вы пользуетесь SSR, то наверняка сталкивались с проблемой того, что браузер автоматически исправляет некорректный HTML и финальное дерево в браузере не совпадает с тем, что было сгенерировано на сервере. 🔗 Ссылка на инструмент

Гибкое управление фокусом элемента Chrome в 145 версии добавил параметр focusVisible в метод focus: input.focus({ focusVisible: true }); Как вы уже, наверное, догадываетесь, это позволяет самостоятельно управлять тем, будет ли элемент при ручном вызове фокуса, помимо CSS-псевдокласса :focus, соответствовать ещё и :focus-visible. Ранее без данного параметра браузер самостоятельно решал этот вопрос. ⚙️ Поддержка браузерами широкая

Защита от XSS В последнее время в браузеры активно завозят Trusted Types и HTML Sanitizer API. Оба очень полезны для фильтрации содержимого, вставляемого напрямую в HTML. HTML Sanitizer API // Создаём санитайзер с разрешением только для <b> и <i> тегов const sanitizer = new HTMLSanitizer({ allowElements: ['b', 'i'] }); const unsafeHTML = '<div onclick="alert('XSS')">Hello <b>World</b></div>'; // Очищаем небезопасный код const safeFragment = sanitizer.sanitizeFor('div', unsafeHTML); document.body...

React Doctor 👨‍⚕️🏥 Попался интересный инструмент для анализа кода, написанного на React. Он автоматически определяет на чём написан ваш проект (Next.js, Vite, Remix и т.д.) и запускает 2 параллельные проверки: 1) Линтинг 2) Неиспользуемые файлы По итогу он возвращает все найденные проблемы, а также индивидуальный рейтинг качества кода от 0 до 100. В отличие от линтеров он проверяет не просто синтаксис единичного файла, а всё приложение целиком и позволяет выявить гораздо больше проблем. Его мо...

Топ донатов месяца Этот месяц был рекордным на донаты, спасибо всем огромное за вашу поддержку! 🤗 У меня грандиозные планы на развитие проекта и каждый такой шаг с вашей стороны сильно приближает нас к их осуществлению! Boosty: 🔥 @EmberIsReal - бронзовая подписка Телеграм: 🤩 @maunsh 102 звёздочки ⭐️ @EmberIsReal 10 звёздочек ⭐️ @donaks 3 звёздочки ⭐️ @Roody_Roodpecker 1 звёздочка Сегодня в 18:00 мск пройдёт первая встреча с подписчиками Boosty, жду с нетерпением ваших вопросов!