Новости

• вышел TanStack Router — полностью типизированный (не только на TS, но и сами роуты защищены от ошибок типами) роутер от известного в узких кругах разработчика
• подведены итоги 2023 года в экосистеме JS по версии Rising Stars: победители — shadcn/ui, Bun и Excalidraw

Проекты

• refractror — хайлайтер синтаксиса, основанный на Prism, но отдающий на выходе не строку HTML, а объекты AST
• observable-membrane — создание обсервабл-объектов на основе Proxy
• tokenami — ещё одна CSS-in-JS либа на Тейлвинде + custom properties, типизация из коробки
• catalyst — первая демка UI-кита для Реакта на Тейлвинде, от создателей Тейлвинда
• devicescript — среда в VS Code, эмулятор и компилятор TS для программирования IoT-девайсов, контроллеров и прочего хардверного стафа
• оживление текста анимациями «ручных» обводок и подчёркиваний

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

JS

• оказывается цикл forEach всё таки можно остановить (но вряд ли нужно) с помощью throw внутри try с переходом в catch
• в каких случаях нужен flushSync в Реакте: по умолчанию изменения UI батчатся и затем применяются асинхронно, что не всегда подходит (Реакт иногда обновляет UI позже, чем нужно); если нужно гарантировано обновить UI «здесь и сейчас», то flushSync — подходящй инструмент (например, чтобы корректно установить фокус или позицию скролла)
• гайд по паттернам проектирования в JS с простыми примерами
• все JS и TS фичи за последние 3 года: чтиво на ночь для лёгкого засыпания либо для постновогоднего рефлексивного настроения
• кодогенерация и парсинг TS с помощью TS (конкурс на лучший юзкейс объявляется открытым!)
• если для работы с датами не хочется тащить библиотеку, то можно воспользоваться встроенным Intl.DateTimeFormat, который довольно много умеет сам по себе

CSS

• свойство align-content выравнивает элементы не только внутри флексбокса, но также и display: table-cell и list-item
• как происходит загрузка «невидимых» картинок: картинки без loading="lazy" грузятся всегда (даже в скрытом виде), а вот с loading="lazy" грузятся внутри visibility: hidden и не грузятся внутри display: none или <details>
• как выполнить невозможное calc(100vw / 5px) с помощью тригонометрических функций

HTML, SVG

• интерактивный гайд по path (залипательный)

Платформа

• абсолютный минимум о Unicode, который должен знать каждый уважающий себя разработчик в 2023 (и 2024, всё ещё никаких отговорок!)
• сложность алгоритмов. Разбор Big O: для освежения в памяти после новогодних каникул