Из блога OpenReplay
5 современных CSS-возможностей, которые должен знать каждый разработчик
Container queries, каскадные слои, пользовательские CSS-свойства и селектор :has позволяют писать адаптивный и поддерживаемый CSS без использования фреймворков.
Обнаружение попадания элементов в область просмотра с помощью Intersection Observer
Intersection Observer API заменяет scroll-обработчики для отслеживания видимости элементов и реализации ленивой загрузки, анимаций и автовоспроизведения видео.
Сравнение 11ty и WordPress для современных веб-проектов
Сравнение Eleventy и WordPress по производительности, безопасности и стоимости для выбора статической или динамической архитектуры проекта.
Современные техники анимации SVG
Сравниваются CSS-анимации, GSAP и Web Animations API для создания производительных SVG-анимаций с оптимизированными путями и повторным использованием элементов.
Создание доступных поповеров с помощью современных CSS и JS
Создание доступных поповеров на основе нативного Popover API, CSS-позиционирования и ARIA-атрибутов с поддержкой навигации с клавиатуры и управления фокусом.
Упрощенная валидация форм с htmx
Статья показывает, как строить формы с htmx, сочетая атрибуты валидации HTML5 и серверные inline-подсказки без написания лишнего JavaScript.
ИИ-браузеры и будущее веб-разработки
Семантический HTML и разметка Schema.org помогают браузерам Comet и Edge Copilot эффективно разбирать содержимое сайтов.
Управление длиной строк в CSS для улучшения читаемости
Контроль длины строк в CSS с помощью единиц ch, clamp() и container queries позволяет улучшить читаемость и соответствовать требованиям доступности.
Storybook: Создание лучшей UI-документации
Storybook позволяет строить живую UI-документацию через Autodocs, MDX и Controls, автоматически синхронизируя описания компонентов с реальной кодовой базой.
Добавление темной темы на ваш сайт с помощью Tailwind
Добавление тёмной темы через dark-вариант Tailwind CSS: системные настройки, ручное переключение и сохранение предпочтений в localStorage.
Обратные прокси-серверы: объяснение для веб-разработчиков
Nginx, Caddy и Traefik маршрутизируют трафик, обеспечивают терминацию HTTPS и позволяют обслуживать React и Node.js приложения под одним доменом.
Core Web Vitals: Как оптимизировать LCP
Оптимизация низких показателей LCP за счёт устранения проблем с TTFB, загрузкой ресурсов и блокировкой рендеринга через CDN-кеширование и preload изображений.
Git Rebase для начинающих: простое введение
Git rebase переносит коммиты на целевые ветки, формируя чистую линейную историю. Статья охватывает интерактивный squash и force push для feature-веток.
Автоматизация проверки кода с помощью Git pre-commit hooks
Настройка Git pre-commit hooks через фреймворк pre-commit, ESLint, Prettier и Black помогает выявлять ошибки форматирования и линтинга перед каждым коммитом.
Начало работы с Google Gemini CLI
Установка Gemini CLI, аутентификация через Google-аккаунт и команды терминала для анализа кодовой базы, генерации тестов и рефакторинга кода.
Ghostty: Современный терминал для разработчиков
Возможности терминала Ghostty: GPU-ускорение, поддержка GTK4, встроенный мультиплексинг и сохранение сессий для оптимизации рабочего процесса.
JavaScript Pipeline Operator и что это означает
Pipeline operator в JavaScript превращает вложенные вызовы функций в линейный читаемый код; статья показывает, как применять это уже сегодня с Babel.
Продвинутые возможности GitHub Copilot, которые стоит попробовать
Возможности GitHub Copilot, такие как многофайловое редактирование, агенты, slash-команды и голосовой ввод, меняют подход к написанию и поддержке кода.
CSS Anchor Positioning: Подробное руководство
CSS Anchor Positioning позволяет прикреплять тултипы, дропдауны и поповеры к элементам на чистом CSS, без вычисления позиций через JavaScript.
Понимание Device Orientation API
Разработка веб-приложений с управлением движением через Device Orientation API: оси alpha, beta, gamma, данные гироскопа и разрешения iOS.
Использование Priority Hints с fetchpriority для повышения производительности
Управление порядком загрузки ресурсов с помощью fetchpriority и Priority Hints позволяет улучшить показатели LCP и Core Web Vitals в современных браузерах.
Использование Top-Level Await в современном JavaScript
Top-level await в ES-модулях устраняет необходимость в async IIFE и определяет порядок выполнения модулей, динамических импортов и циклических зависимостей.
Obsidian vs Logseq: Выбор приложения для ведения заметок
Сравнение Obsidian и Logseq по организации заметок, экосистеме плагинов и локальному хранению данных для выбора подходящего инструмента управления знаниями.
Управление состоянием: Встроенные инструменты против внешних библиотек
Сравнение React hooks, Redux, Zustand и Pinia для выбора оптимального подхода к управлению состоянием в масштабируемых фронтенд-проектах.