Ускорьте рендеринг с помощью content-visibility: auto

Это CSS-свойство пропускает рендеринг контента вне экрана до тех пор, пока он не понадобится, давая серьёзный прирост производительности на длинных страницах.

⋅ Хорошо сочетается с contain-intrinsic-size
⋅ Ленивый рендеринг практически «из коробки» (zero-effort)

Подробнее 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

@WebDev_Plus

push(), pop(), shift() и unshift() в JavaScript 👇

Это базовые методы массива, используемые для добавления или удаления элементов в начале или в конце массива.

Важные моменты:
▪️push() → добавляет элементы в конец массива
▪️pop() → удаляет последний элемент
▪️shift() → удаляет первый элемент
▪️unshift() → добавляет элементы в начало массива

Помните, что все эти методы изменяют исходный массив (они мутабельные).

@WebDev_Plus

Точно измеряйте производительность своего кода

performance.mark() и performance.measure() позволяют вам инструментировать JavaScript, используя высокоточные тайминги.

Узнайте больше 👇
https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

@WebDev_Plus

Свойство transitionType для ссылок (Links) в Next.js 16.2
(требует дополнительной настройки для <ViewTransitions />)

<ViewTransitions> всё ещё является экспериментальной возможностью в Next.js и не рекомендуется для продакшена

Полное демо 👇

https://github.com/SidKH/gist-of-next-demos/blob/cursor/view-transition-transition-types-demo/README.md

@WebDev_Plus

Это поможет вашим пользователям не уходить со страницы случайно — особенно при прокрутке таблицы или слайдера.

Запомните мои слова 😁

@WebDev_Plus

Рарзраб прошёл через все круги ада, чтобы принести вам, на ближайшие годы, один из ключевых фундаментальных инструментов UI-инжиниринга (если не в реализации, то хотя бы в концепции): быстрый, точный и полный алгоритм измерения текста на стороне пользователя на чистом TypeScript, который можно использовать для верстки целых веб-страниц без CSS, обходя измерения DOM и перерасчёт reflow.

Верстка и измерение текста были последним и самым большим узким местом для создания более интересных UI, особенно в эпоху ИИ.

С этим решением больше не нужно выбирать между эффектностью GL-лендинга и практичностью статьи в блоге. Демки: тут

Установить через npm или bun:

npm install @chenglou/pretext
# или
bun add @chenglou/pretext

И используйте его, чтобы дать волю своему ИИ и создавать крутые демки 😶

@WebDev_Plus

Если вы знаете эти строки CSS, вы можете сверстать 80% макетов 👇

display: flex;
justify-content: center;
align-items: center;

display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

position: relative;
gap: 1rem;

@WebDev_Plus

Мгновенно извлекайте всю дизайн-систему любого сайта

Dembrandt — это NPM-пакет, который сканирует сайт и вытаскивает его визуальные стилевые параметры: цвета, типографику, отступы и паттерны лейаута.

Вместо того чтобы вручную инспектировать стили в DevTools, вы можете быстро понять, как сайт структурирован и стилизован

GitHub тут, сайт здесь 👜