Новости

• появился новый линтер oxlint:
  • написан на Rust
  • можно не настраивать (convention over configuration)
  • плагинов пока нет, но обещают, что можно будет писать их без использования JS или Rust
  • быстр, но в том числе потому что проверяемых правил мало
• вышел SvelteKit 2: Vite 5 под капотом, подготовка к будущему Svelte 5, shallow routing; tldr: Svetle продолжает прорастать в экосистему
• Vue 2 станет deprecated 31 декабря 2023
• вышел Firefox 121: главное поддержан :has()!
• вышла библиотека date-fns v3: теперь 100% типизирована, уменьшен размер бандла, функции экспортируются через named exports и кое-что ещё
• обновился Tailwind CSS v3.4: динамические viewport units, поддержка :has(), text-wrap: balance, субгриды и многое другое

Проекты

• waku — минималистичный React-фреймворк с поддержкой ServerComponents: включает клиент, сервер и роутер
• constate: библиотека для решения проблемы плодящихся контекстов в Реакте
• simple-web-server: простая декстопная аппка для настройки и запуска дев-сервера

Статьи и демки

JS

• список всех известных (и неизвестных) JS рантаймов и движков на все случаи жизни (даже чтобы выполнять JS в с/с++)
• если промис ушёл и не вернулся, он попал в чёрную дыру: чтобы это исправить нужно отказаться от асинхронных функций в угоду генераторов
• профилируя приложение для локализации автор пришёл к тому, что node --prof и инструмент speedscope — хорошая отправная точка для анализа перфоманса
• члены tc39 устали отвечать на одни и те же вопросы в ишью, и создали faq, в котором можно узнать, почему JSX не появится в ES, почему JSON никогда не поменяется, а также почему числа в JS такие странные
• в конкурсе на самый быстрый способ проброса состояния с сервера на клиент победил <script type="mime/invalid" id="myState">{"foo":"bar"}</script> window.__STATE__ = JSON.parse(window.myState.innerHTML)
• темы для холиваров в вашей команде, если вы работатете с Реактом: как писать экспорты, как называть файлы и пропсы, нужны ли стрелочные функции, а также тернарники vs early return
• TS-фичи «следующего» уровня: satisfies, infer, exhaustive type checking
• эволюция синхронного рекурсивного обхода папок в ноде достигла вершины — await fs.readdir(dir, { recursive: true })
• всё про Unicode для разработчиков: символы, их объединение, эскейп в JS, сравнение строк и регекспы

CSS

• смена стилей в зависимости от количества элементов с помощью element:has(> :nth-child(10))
• лок скролла из глубины DOM-а с помощью body:has(.lock-scroll) { overflow: hidden} <dialog class="lock-scroll">
• четыре способа создать анимированные градиентные рамки
• свойство animation-composition, позволяет начать анимацию с нуля либо с того значения свойства, которое уже задано на момент начала анимации (удивительно, но поддерживается везде!)

HTML

• в каких случаях подходит использование <link rel=preconnect>
• при использовании атрибута sizes="auto" у img нужно указывать также width и height
• создание шумной текстуры в SVG (секрет в применении SVG-фильтров)
• древнее знание: атрибут form у кнопки позволяет сабмитить форму, даже если кнопка снаружи неё