Часто бывает нужна какая-нибудь конкретная регулярка — например, проверить почту или номер телефона. Собрали 40 часто встречаемых, чтобы они всегда были под рукой (или, на худой конец, в закладках).

Сохрани страницу — и 40 самых полезных регулярных выражений всегда под рукой!

Объект Date позволяет создавать, сравнивать и форматировать дату и время. Используется для отображения текущего времени, вычисления интервалов и работы с таймзонами в веб-приложениях.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

@counter-style — это правило CSS, которое позволяет определять свои собственные стили нумерации для списков, счётчиков и других элементов, использующих функцию counter(). Вместо привычных арабских цифр, латинских букв или стандартных маркеров вы можете задать любые символы, изображения или даже сложные последовательности.

Поддержка: доступно в Baseline в статусе «Newly Available» с 18 сентября 2023 года.

Функция reversed() в CSS позволяет создавать счётчики, которые уменьшаются, а не увеличиваются. Это удобно для обратных отсчётов, нумерации элементов с конца и чисто-CSS эффектов без JavaScript.

Статус: экспериментальная функция (Limited Availability, поддержка ограничена).

Синтаксис функции:

/* Объявление обратного счётчика */
counter-reset: reversed(<имя-счётчика>) [начальное-значение]?;

/* Изменение счётчика */
counter-increment: <имя-счётчика> <число>;

Функция reversed() оборачивает имя счётчика в counter-reset. counter-increment работает как обычно; чтобы счётчик убывал, задайте отрицательное значение.

Разбираем спорную новинку 2025 года — CSS‑функцию if(), которая появилась в экспериментальном режиме в Chrome. Смотрим, как она работает, где помогает, где подводит и чего от неё ждать дальше.

Летом 2025 года в Chrome появилась экспериментальная функция if(). На первый взгляд это звучит как революция: наконец‑то условия в CSS! Но так ли всё радужно? Разберёмся спокойно и по шагам.

Год 2025 принёс фронтенд-разработчикам множество долгожданных новинок, которые делают веб-платформу более мощной и удобной. Вот краткий обзор ключевых возможностей, которые уже начинают поддерживаться в современных браузерах.

Ключевое слово CSS unset, представленное в спецификации CSS Cascading and Inheritance Level 3, — это мощный инструмент для сброса значений свойств с учетом контекста. Доступное в браузерах с 21 сентября 2018 года (статус Baseline «Widely Available»), unset позволяет фронтенд-разработчикам гибко возвращать свойства CSS к их значениям по умолчанию или унаследованным значениям. В этой статье мы подробно разберем механику, исторический контекст, варианты применения и практические сценарии использования unset.

Предполагается, что читатель знаком с основами CSS, включая каскад, специфичность и наследование. Мы рассмотрим, как unset вписывается в современные рабочие процессы CSS, сравним его с родственными ключевыми словами initial и revert, а также приведем практические примеры для демонстрации его полезности.

Инструменты разработчика в браузере Chrome лишатся одной из своих экспериментальных возможностей — «живого редактирования» JavaScript-кода. Как сообщила команда разработчиков в официальном блоге, функция будет полностью удалена в феврале 2026 года с выходом версии Chrome 145. Это решение отражает эволюцию современных инструментов веб-разработки.

Функция line-clamp находится в статусе ограниченной доступности в Baseline, но уже широко используется для создания аккуратных текстовых блоков. Это свойство позволяет ограничить отображение текста заданным количеством строк, скрывая всё, что выходит за пределы. Оно идеально подходит для превью статей, цитат или карточек товаров, где нужно показать только часть текста, не перегружая страницу.

В основе line-clamp лежит комбинация свойств, включающих display: -webkit-box, -webkit-line-clamp и -webkit-box-orient: vertical. Современные браузеры поддерживают стандартное свойство line-clamp без префиксов, но для максимальной совместимости лучше использовать и префиксные версии. Это особенно важно для старых версий браузеров, таких как Safari.

Давайте разберём, как работает line-clamp, и посмотрим на несколько примеров.

API Intl.RelativeTimeFormat доступно в Baseline в статусе «Widely Available» с 16 марта 2023 года. Это мощный инструмент для отображения относительного времени в локализованном виде, например, «через минуту», «вчера» или «2 недели назад». Он автоматически адаптируется к языку и культурным особенностям региона, делая интерфейс более понятным и дружелюбным для пользователей.

В этой статье мы разберём, как работает Intl.RelativeTimeFormat, и приведём несколько примеров его использования.

Операторы ?? и ??= стали доступны в Baseline в статусе «Widely Available» с 16 марта 2023 года. Они упрощают работу с переменными, которые могут быть null или undefined, позволяя задавать значения по умолчанию или обновлять переменные только в этих случаях. Это делает код чище и понятнее, особенно при работе с потенциально отсутствующими данными.

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

Функции btoa() и atob() — это встроенные средства JavaScript для кодирования и декодирования строк в формате Base64.

С 20 марта 2019 года они входят в статус «Widely Available» по Baseline — значит, поддерживаются всеми современными браузерами и подходят для использования в продакшене.

Шутки в сторону, на кону серьёзная задача — нужно вибрануть сайтом. К счастью, в 2025 году это не очень сложно и нужна поддержка есть. Vibration API поддерживается почти везде, кроме Safari. Конечно, ещё нужно устройство с вибромотором, но тут подойдут почти все телефоны, если есть нужный браузер.

Не будем растягивать эту инструкцию и давайте начнём с базовой страницы (это будет просто кнопка, выровненная по центру.)

<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Кнопка по центру</title>
</head>
<body>
 <button>Нажми меня</button>
</body>
</html>

Ну или ладно, сначала она вообще не по центру. Добавим стили, чтобы кнопка получила цвет и оказалась там, где мы хотим. Вставьте весь этот тег <style> куда-нибудь внутри <head>.

<style>
   body {
     margin: 0;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #f0f0f0;
   }
   button {
     padding: 15px 30px;
     font-size: 18px;
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
   }
   button:hover {
     background-color: #0056b3;
   }
 </style>

Чтобы добавить поддержку вибрации, слегка изменим код внутри <body> — добавим скрипт, который проверяет поддержку вибрации и вибрирует.

<body>
 <button id="vibrateButton">Нажми меня</button>
 <p id="status">Проверка поддержки вибрации...</p>

 <script>
   const vibrateButton = document.getElementById('vibrateButton');
   const statusText = document.getElementById('status');

   if ('vibrate' in navigator) {
     statusText.textContent = 'Vibration API поддерживается!';
     vibrateButton.addEventListener('click', () => {
       navigator.vibrate(200); // Вибрация на 200 мс
       statusText.textContent = 'Устройство завибрировало!';
     });
   } else {
     vibrateButton.disabled = true;
     statusText.textContent = 'Vibration API не поддерживается.';
   }
 </script>
</body>

И всё!

Есть, конечно, нюанс. В теории с поддержкой всё хорошо, а на практике при проверке у редакции на Андроид-смартфоне вибрация поддерживается в Chrome и Яндекс-браузере, а в Firefox не работает (хотя на CanIUse и написано обратное).

Но теперь, если вы хотите клёво вибрануть телефоном в ответ на реакцию в каком-нибудь чатике, вы точно знаете, что делать.

Метод at() возвращает элемент массива по индексу. Отрицательные индексы позволяют отсчитывать элементы с конца массива.

const numbers = [10, 20, 30, 40, 50];

// Получаем элемент по индексу
console.log(numbers.at(0));   // 10
console.log(numbers.at(2));   // 30

// С конца массива
console.log(numbers.at(-1));  // 50
console.log(numbers.at(-3));  // 30

Здесь показано, что at() работает как обычный доступ по индексу, но с преимуществом: отрицательные числа позволяют легко получать элементы с конца массива. Это особенно удобно, когда размер массива заранее неизвестен.

// Использование с типизированными массивами
const typedArr = new Uint8Array([1, 2, 3, 4]);
console.log(typedArr.at(1));   // 2
console.log(typedArr.at(-2));  // 3

Метод одинаково хорошо работает и с типизированными массивами (TypedArray), что делает его универсальным инструментом для работы с любыми последовательностями чисел.

// Безопасный доступ
console.log(numbers.at(10));   // undefined
console.log(numbers.at(-10));  // undefined

Если индекс выходит за границы массива, метод возвращает undefined. Это безопаснее, чем напрямую обращаться к элементу через квадратные скобки, так как код остаётся читаемым и предсказуемым.

Метод at() делает код чище и удобнее, особенно когда нужно работать с элементами с конца массива или с переменной длиной массива.

Если вы новичок и впервые работаете с VPS на Ubuntu, важно сразу настроить базовую защиту. Эти 10 правил помогут снизить риск взлома без сложной конфигурации.

Допустим, вы только что купили VPS с Ubuntu, чтобы захостить там какого-нибудь бота или даже простой сайт, экспериментов с Linux и автоматизации задач. В этой статье мы пошагово разберём базовые команды и операции, которые нужны каждому новичку, чтобы уверенно работать в терминале, управлять файлами, процессами и устанавливать приложения. Все примеры даны на практике, с пояснениями, чтобы вы сразу могли применять их на своём сервере.

В прошлой заметке мы настроили доступ к нашему VPS-серверу, а теперь попробуем подключаться к нему через VS Code, чтобы было удобнее заливать код.

Заходите в VS Code и найдите слева вкладку Remote Explorer. Там будет пункт SSH и кнопка с плюсиком рядом.

Смело жмите в плюсик, сверху появится такой пункт. Туда нужно ввести команду для подключения к ssh, например, такую (не забудьте подставить свой IP-адрес).

ssh root@194.00.00.00

На следующем шаге выберем файл конфигурации. Нужен первый в списке:

И после этого появится окошко с успехом — можно подключиться или открыть конфиг (это просто файл с адресом и логином). Подключаемся и нас спросят пароль:

Вводите не стесняясь. Если у вас не установлен VS Code Server, то нужно подождать, пока он скачается. А дальше готово — вы на собственном сервере, можете легко загружать, создавать и удалять файлы. Всё сохранится автоматически после сохранения.

Надеемся, что вы будете аккуратными и никому не расскажете свой пароль. А чтобы не вводить его каждый раз, прочитайте статью о работе с Git через консоль, там есть раздел о создании SSH-ключей.

Итак, вы купили себе личный сервер, вообще не важно, для чего именно. Может, чтобы поднять там телеграм‑бота, а может, чтобы сделать сервер в Майнкрафте. Но рано или поздно появляется желание сделать себе сайт и показать друзьям и знакомым.

Давайте разбираться.

При загрузке фотографий со смартфонов или камер на сайтах порой возникает проблема с неправильной ориентацией изображений. Это связано с тем, что устройства сохраняют ориентацию изображения в метаданных EXIF, а браузеры могут не всегда учитывать эти данные при отображении. Свойство CSS image-orientation позволяет корректировать ориентацию изображений, обеспечивая их правильное отображение.

Visual Studio Code — один из самых популярных редакторов кода, и он действительно преображается с помощью красивых и удобных цветовых тем. Мы собрали для вас подборку из 7 свежих и стильных тем, которые помогут настроить рабочее пространство этой осенью. В списке вы найдёте и тёмные, и светлые варианты — от минимализма до неонового киберпанка.