Новости
- появился новый линтер 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 у кнопки позволяет сабмитить форму, даже если кнопка снаружи неё