Это реально одна из самых впечатляющих штук, сделанных для веба

Знакомьтесь — Horizon Drive, браузерная игра от команды Shopify. Под капотом чистый JS, Three.js и React Three Fiber

Вы не поверите (и проверите), но это жутко залипательно 😳

➡️ @FrontendPortal

Новая фишка в Chrome DevTools — теперь можно аннотировать перформанс-трейсы с помощью Gemini

Разрабы из Google прикрутили ИИ прямо в инструменты производительности: кликаешь два раза по ивенту в Main-треке, жмёшь «Generate label», и Gemini на основе стека вызовов и контекста подсказывает, что там вообще происходит

Фича полезная, особенно для глубокого разбора. Стоит попробовать ✌️

Работает с версии Chrome 137

➡️ @FrontendPortal | #tip

Проблема: Вам нужно объявить типы в обычных .js файлах.

Решение: Используйте комментарии JSDoc.

Вот как это сделать.

➡️ @FrontendPortal | #tip

Мультиколонки

Основная идея мультиколонок заключается в том, что вы можете взять фрагмент содержимого и поместить его в несколько колонок, как в газете

.article {
// Шорткат columns даёт возможность указать значения для свойств column-count и column-width одновременно, задав количество и ширину колонок
  columns: 2 200px;
  column-gap: 25px;
}
.title{
// Свойство column-span позволяет элементу растянуться на несколько колонок
  column-span: all;
}

➡️ @FrontendPortal | #CSS

Наткнулся на полезняшку для тех, кто не любит тащить весь репозиторий ради пары файлов — GitZip

Расширение для браузера, которое позволяет скачивать отдельные файлы или папки из любого GitHub-репо

Доступно в Chrome, Edge и Firefox

➡️ @FrontendPortal | #resourse

Chrome 137 подъехал. В CSS добавили функцию if. Да-да, условные конструкции прямо в стилях 😧

Ещё из интересного — завезли reading-flow и reading-order. Теперь можно управлять таб-навигацией в flex и grid без костылей. Это решает старую проблему в макетах, когда порядок фокуса может не совпадать с визуальным расположением элементов

Плюс WebAssembly теперь понимает промисы через API JSPI

Мелкие ништяки: изоляция Blob URL по storage key, добавлена поддержка offset-path: shape() и float-пикселей в Canvas

Подробнее: https://developer.chrome.com/blog/new-in-chrome-137

➡️ @FrontendPortal

Вышел Angular v20

‣ Стабилизация API реактивности и инкрементальной гидратации
‣ Интеграция с Chrome DevTools
‣ Улучшенная проверка типов, упрощённый гайд по стилю и другое
‣ RFC на официального маскота Angular
‣ И многое другое

Подробнее: https://goo.gle/angular-v20-blog

➡️ @FrontendPortal

Ещё одна свежая фича в Chrome DevTools — с помощью Gemini (это ИИ-моделька гугла) можно править CSS прямо в Elements и сразу сохранять изменения в исходники

Никакого копипаста между браузером и редактором. Внес правку — она тут же в проекте. Плюс — можно тестить на лету

Годнота 👍

➡️ @FrontendPortal

Math.random() пора на пенсию

В JavaScript появилась новая предложенная возможность — добавить пространство имён Random в язык

Это новый глобальный объект Random с более чем 20 методами для работы со случайностью в JS — включая перемешивание, выборку, взвешенный выбор, генераторы с сидом и т. д.

Предложение на днях достигло 1 этапа в TC39: https://github.com/tc39/proposal-random-functions

➡️ @FrontendPortal

Как добавить эффект буквицы всего двумя строками CSS

Примечание: В Firefox это работает только с префиксом вендора -webkit-initial-letter

Селектор ::first-letter можно использовать не только для задания свойства initial-letter, но также для добавления отступов, изменения цвета или настройки шрифта

➡️ @FrontendPortal | #CSS

Годная JS-либа для реализации drag-and-drop списков — Sortable

Живёт уже не первый год, проверена временем и продом. Поддерживает перетаскивание элементов как внутри одного списка, так и между несколькими. Работает на нативном Drag and Drop API

Простой и читаемый API, никаких зависимостей. Поддерживает анимацию при перетаскивании, работает на десктопах и тач-устройствах. Совместима с большинством фреймворков

➡️ @FrontendPortal | #resourse

Совет по веб-доступности: Лучший способ сделать ссылки только с иконками доступными для скринридеров

Иногда нужно создавать ссылки, содержащие только иконку. Например: ссылки для шеринга поста

Но такие ссылки недоступны для пользователей скринридеров

Чтобы это исправить, можно задать подпись в скрытом элементе и связать его с тегом <a> с помощью атрибутов aria-labelledby и id. Также установите aria-hidden="true" на SVG-иконку, чтобы скринридеры её пропускали

➡️ @FrontendPortal | #tip by Shripal Soni

Дэн Абрамов недавно выкатил годную статью о новом способе передачи данных с сервера — Progressive JSON

Если коротко: это когда JSON едет с сервера не целиком, а разбивается на куски и отправляется по мере готовности. Таким образом, мы можем начать рендер раньше, не дожидаясь всех данных. Да, прямо как Progressive JPEG, где сначала мыльцо, потом чёткость

Т.е., сначала прилетает каркас с заглушками:

{
  "imageUrl": "$1",
  "title": "$1",
  "comments": "$3"
}

Здесь $1, $2, $3 — это заглушки, которые будут постепенно заменены в потоке. На клиенте они обработаются как промис

Этот подход реализован в React Server Components и удобен для прогрессивного появления UI

Если не читали и вам интересна тема оптимизации загрузки данных — мастрид: Progressive JSON. Или можно глянуть в формате видео на YouTube

➡️ @FrontendPortal

Если нужно быстро сгенерировать кастомный SVG-лоадер — вот отличная опенсорс-тулза. Гибкая настройка: цвет, скорость, размер и прочее по вкусу

Закидывайте в закладки — пригодится: http://loaders.holasvg.com

➡️ @FrontendPortal | #resourse

Новый эффект от Apple, воссозданный на вебе с помощью HTML, CSS и SVG-фильтров

Для тех, кто пропустил: Apple представила новый дизайн — «Жидкое стекло».

Энтузиасты уже воссоздали эффект подложки с помощью HTML, CSS и SVG-фильтров

Работает в Chrome, но, иронично, не в Safari 😅

https://codepen.io/Mikhail-Bespalov/pen/MYwrMNy

➡️ @FrontendPortal