Обнаружение статуса соединения

Для отслеживания статуса подключения можно использовать navigator.online API. Это вернет логическое значение, чтобы указать, находится ли пользователь в сети.

Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях

window.addEventListener('offline', (e) => {
  console.log('offline');
});

window.addEventListener('online', (e) => {
  console.log('online');
});

➡️ @FrontendPortal | #js

Форматирование чисел и Intl.NumberFormat

Intl.NumberFormat один за конструкторов Internationalization API, который используется для форматирования чисел, валюты, процентов и единиц измерения, таких как длина, температура и др.

Этот конструктор принимает локаль и объект с настройками

new Intl.NumberFormat(locale, options).format(number)

Одна из интересных возможностей — генерирование коротких форм для чисел

➡️ @FrontendPortal | #js

Простая кнопка в стиле ретро

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

Для активного состояния я перемещаю кнопку, уменьшая при этом тень, так что тень кажется статичной

Подобного трюка можно добиться и с помощью псевдоэлементов, но я предпочитаю эту технику за ее простоту

➡️ @FrontendPortal

Задаём цвет в зависимости от темы операционной системы пользователя

Функция light-dark() принимает два аргумента и возвращает один из них в зависимости от того, какую тему выбрал пользователь.

Первое значение вернётся, если у пользователя установлена светлая тема, либо тема не выбрана, а второе, если установлена тёмная тема

Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение

На данный момент поддержка — 87.36%

➡️ @FrontendPortal | #CSS

Тем временем подъехали результаты State of JS 2025

TypeScript уверенно лидирует как язык, Vite по загрузкам обогнал Webpack, а доля ИИ-сгенерированного кода к концу 2025 года подобралась вплотную к 30%. Параллельно заметно растёт интерес к инструментам нового поколения: Cursor, Zed, Claude, Gemini и Copilot

Общее состояние JS-экосистемы: ключевые тренды, инструменты, библиотеки и сдвиги за последний год — вся аналитика в отчёте: https://2025.stateofjs.com/en-US/

➡️ @FrontendPortal