Новости
🔡 вышел отчёт 2024 JavaScript Rising Stars:
🔵 самый «быстрозвездеющий» проект года — shadcn/ui — не нуждается в представлении, второй — Excalidraw — инструмент для создания рисунков и диаграмм, тоже на слуху, третий — AFFiNE — опенсорсный Notion
🔵 htmx — больше всех набрал из фронтенд-фреймворков, даже перегнав React
🔵 из бэкенд/фулстек-фреймворков в топе по популярности Next.js, Hono и Astro
🔵 в тулингах чемпионы Biome, Bun, Vite — чувствуется, что обычному разработчику нужно, чтобы просто работало
🔵 среди state manager-ов победил Zustand, Jotai и XState (Valtio тоже в топе, Redux замыкает лист)
🔵 в CSS-либах топ заняли Tailwind, DaisyUI (либа под TW) и Bootstrap
Проекты
🔡 pixel-canvas — веб-компонент, применяющий блестящий фон на
canvas к элементу🔡 trimmiddle — либа, вырезающая текст из середины строки (недостающий метод строки вдовесок к
trimStart() и trimEnd())Статьи и демки
JS
🔡 Temporal API, ещё нигде в стабильных релизах браузеров не реализованный, хорошо интегрируется с другим полезным Internationalization API, который есть везде уже сейчас и может, например, перевести часы в секунды без доп вычислений с помощью
Intl.DurationFormat или отобразить время относительно другого времени с Intl.RelativeTimeFormat (кроме того: у даты есть метод toLocaleString(), выдающий дату в строки в текущей локали, а локаль модно получить в navigator.language)🔡 история команды, осознавшей, что борется с Next.js больше времени, чем кодит продукт, и перешедшей на обычный React: потеряли фулстек-подход, кеширование и пререндер, серверные компоненты и actions, приобрели быстрый билд и деплой и счастье команды
🔡 Daishi Kato, автор стейт-менеджеров Zustand, Jotai, Valtio поделился мыслями о будущем либ в эру React Compiler/React Server Components: возможно в будущем оптимизации RC сделают встроенные инструменты управления стейтом useState/useContext более эффективными в плане оптимизации необходимости перерендеров, а кеширование в RSC — сделают ненужными комплексные стейты, но тем не менее юзкейсы всех трёх подходов либ продолжают быть актуальными и скорее всего так и будет дальше
🔡 детали того, как работает TS в Node.js:
🔵 типы отбрасываются, работают для файлов с разрешениями .ts, .mts, .cts (.tsx не поддерживается)
🔵 пока что по умолчанию не поддерживаются фичи, требующие транспиляции (enum, decorators, namespaces)
🔵 сорсмапы не создаются, так как расположение кода остаётся тем же
CSS
🔡 необычный юзкейс свойства
text-wrap: balance: решает проблему переноса на следующую строку иконки за текстом 🔡 селектор
&:hover > *:not(:hover) применит стили по наведению ко всем элементам внутри контейнера, кроме текущего🔡 интересный концепт безкейфреймовой «анимации»: объявляется кастомное свойство типа integer (значение — конечное в «анимации»), в
@starting-style прописывается начальное значение в «анимации», создаётся довольно длинный transition для этого кастомного свойства, в процессе которого выполняется «анимация»HTML
🔡 атрибут
translate="no" выключит нежелательный перевод HTML-элемента в браузере🔡 подборка, чтобы обновить представление, на что способен современный HTML: для себя нашёл атрибут hidden=until-found, скрывающий элемент до тех пор, пока текст внутри его не нашли поиском по странице, и вспомнил атрибут
inert, делающий элемент недоступным для взаимодействия (мощнее, чем pointer-events: none)@web_platform | Поддержать канал 🤝