Из блога OpenReplay
Легкая интернационализация: замените библиотеки на Intl API
Замена Moment.js, date-fns и numeral.js на нативный Intl API сокращает размер бандла и обеспечивает форматирование дат, валют и чисел без зависимостей.
Практические советы по фронтенду для улучшения показателей Core Web Vitals
Показатели LCP, INP и CLS улучшаются через fetchpriority, scheduler.yield и указание размеров изображений для стабильного макета и отзывчивого потока.
Исправление ошибки 'Permission denied (publickey)' при отправке в GitHub
Исправление ошибки Permission denied publickey на GitHub требует генерации SSH-ключей, добавления публичного ключа в настройки GitHub и проверки SSH-соединения.
Как создать эффекты стекломорфизма с помощью чистого CSS
Создание эффектов стекломорфизма с помощью backdrop-filter, rgba-фонов и мягких теней на чистом CSS с учётом поддержки браузеров и доступности.
Избежание подводных камней события resize в JavaScript
Throttling, debouncing, ResizeObserver и CSS media queries помогают избежать layout thrashing при обработке события resize и повысить производительность.
Live Browser Preview в VS Code: Краткое руководство
Сравнение Microsoft Live Preview и Live Server для VS Code, настройка live-перезагрузки браузера и устранение ошибок путей при разработке статических сайтов.
Краткое руководство по локализации сайта на Astro
Настройка i18n-роутинга в Astro, организация папок локалей и работа с динамическими строками интерфейса через Paraglide для создания многоязычного сайта.
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.