Как ускорить работу фронтендера с помощью ИИ
Искусственный интеллект, такой как GPT-5, GitHub Copilot или Cursor, становится настоящим помощником, который экономит время и повышает качество кода. В этой…
- 18 октября 2025
Свежие статьи
Обрезка блоков текста с помощью line-clamp
Функция line-clamp находится в статусе ограниченной доступности в Baseline, но уже широко используется для создания аккуратных текстовых блоков. Это свойство позволяет ограничить отображение текста заданным количеством строк, скрывая всё, что выходит за пределы. Оно идеально подходит для превью статей, цитат или карточек товаров, где нужно показать только часть текста, не перегружая страницу.
В основе line-clamp лежит комбинация свойств, включающих display: -webkit-box, -webkit-line-clamp и -webkit-box-orient: vertical. Современные браузеры поддерживают стандартное свойство line-clamp без префиксов, но для максимальной совместимости лучше использовать и префиксные версии. Это особенно важно для старых версий браузеров, таких как Safari.
Давайте разберём, как работает line-clamp, и посмотрим на несколько примеров.
- 18 октября 2025
Форматирование относительного времени в JavaScript
API Intl.RelativeTimeFormat доступно в Baseline в статусе «Widely Available» с 16 марта 2023 года. Это мощный инструмент для отображения относительного времени в локализованном виде, например, «через минуту», «вчера» или «2 недели назад». Он автоматически адаптируется к языку и культурным особенностям региона, делая интерфейс более понятным и дружелюбным для пользователей.
В этой статье мы разберём, как работает Intl.RelativeTimeFormat, и приведём несколько примеров его использования.
- 17 октября 2025
Что такое null-коалесцентный оператор ?? в JavaScript
Операторы ?? и ??= стали доступны в Baseline в статусе «Widely Available» с 16 марта 2023 года. Они упрощают работу с переменными, которые могут быть null или undefined, позволяя задавать значения по умолчанию или обновлять переменные только в этих случаях. Это делает код чище и понятнее, особенно при работе с потенциально отсутствующими данными.
В этой статье мы разберём, как работают операторы нулевого слияния, и покажем примеры их использования.
- 15 октября 2025
Кодирование и декодирование Base64 с atob и btoa
Функции btoa() и atob() — это встроенные средства JavaScript для кодирования и декодирования строк в формате Base64.
С 20 марта 2019 года они входят в статус «Widely Available» по Baseline — значит, поддерживаются всеми современными браузерами и подходят для использования в продакшене.
- 14 октября 2025
Как в 2025 году вибрануть сайтом
Шутки в сторону, на кону серьёзная задача — нужно вибрануть сайтом. К счастью, в 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 и написано обратное).
Но теперь, если вы хотите клёво вибрануть телефоном в ответ на реакцию в каком-нибудь чатике, вы точно знаете, что делать.
- 3 октября 2025
Как найти элемент в массиве по индексу на JS
Метод 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() делает код чище и удобнее, особенно когда нужно работать с элементами с конца массива или с переменной длиной массива.
- 3 октября 2025
Как защитить VPS от взлома: 10 простых правил
Если вы новичок и впервые работаете с VPS на Ubuntu, важно сразу настроить базовую защиту. Эти 10 правил помогут снизить риск взлома без сложной конфигурации.
- 2 октября 2025
Основы работы с Ubuntu VPS для новичка: установка node.js и веб-сервера
Допустим, вы только что купили VPS с Ubuntu, чтобы захостить там какого-нибудь бота или даже простой сайт, экспериментов с Linux и автоматизации задач. В этой статье мы пошагово разберём базовые команды и операции, которые нужны каждому новичку, чтобы уверенно работать в терминале, управлять файлами, процессами и устанавливать приложения. Все примеры даны на практике, с пояснениями, чтобы вы сразу могли применять их на своём сервере.
- 1 октября 2025
Как подключиться к VPS через Visual Studio Code: короткий гайд
В прошлой заметке мы настроили доступ к нашему VPS-серверу, а теперь попробуем подключаться к нему через VS Code, чтобы было удобнее заливать код.
Заходите в VS Code и найдите слева вкладку Remote Explorer. Там будет пункт SSH и кнопка с плюсиком рядом.
Смело жмите в плюсик, сверху появится такой пункт. Туда нужно ввести команду для подключения к ssh, например, такую (не забудьте подставить свой IP-адрес).
ssh root@194.00.00.00
На следующем шаге выберем файл конфигурации. Нужен первый в списке:
И после этого появится окошко с успехом — можно подключиться или открыть конфиг (это просто файл с адресом и логином). Подключаемся и нас спросят пароль:
Вводите не стесняясь. Если у вас не установлен VS Code Server, то нужно подождать, пока он скачается. А дальше готово — вы на собственном сервере, можете легко загружать, создавать и удалять файлы. Всё сохранится автоматически после сохранения.
Надеемся, что вы будете аккуратными и никому не расскажете свой пароль. А чтобы не вводить его каждый раз, прочитайте статью о работе с Git через консоль, там есть раздел о создании SSH-ключей.
- 27 сентября 2025
Как сделать свой сайт на VPS. Самая простая инструкция
Итак, вы купили себе личный сервер, вообще не важно, для чего именно. Может, чтобы поднять там телеграм‑бота, а может, чтобы сделать сервер в Майнкрафте. Но рано или поздно появляется желание сделать себе сайт и показать друзьям и знакомым.
Давайте разбираться.
- 26 сентября 2025
CSS-свойство image-orientation: исправляем ориентацию изображений из EXIF
При загрузке фотографий со смартфонов или камер на сайтах порой возникает проблема с неправильной ориентацией изображений. Это связано с тем, что устройства сохраняют ориентацию изображения в метаданных EXIF, а браузеры могут не всегда учитывать эти данные при отображении. Свойство CSS image-orientation позволяет корректировать ориентацию изображений, обеспечивая их правильное отображение.
- 25 сентября 2025
7 интересных тем для Visual Studio Code этой осенью
Visual Studio Code — один из самых популярных редакторов кода, и он действительно преображается с помощью красивых и удобных цветовых тем. Мы собрали для вас подборку из 7 свежих и стильных тем, которые помогут настроить рабочее пространство этой осенью. В списке вы найдёте и тёмные, и светлые варианты — от минимализма до неонового киберпанка.
- 19 сентября 2025
7 промптов, чтобы очистить код от следов вайбкодинга
Вайбкодинг — это когда код вроде бы работает, но написан «по вайбу»: с кривыми отступами, странными именами переменных, копипастой и магическими числами. Такой код сложно поддерживать. Многие настоящие программисты с большим опытом добавляют себе в портфолио фразу «очищу ваш вайбкод». Но что, если я скажу, что и нейросети отлично помогают его чистить, особенно в небольших проектах?
Вот 7 промптов, которые слегка улучшат код, написанный нейросетью, и превратят его в условно нормальный фронтенд-код. Или даже просто помогут вам улучшить обычный человеческий код, если вы только недавно начали и не знаете, как делать сразу хорошо.
- 18 сентября 2025
4 плагина в Figma, которыми я реально пользуюсь
По работе мне постоянно нужно делать картинки для статей в блоге, поэтому я постоянно экспериментирую с плагинами в Figma. Некоторые остаются «про запас», но есть плагины, без которых я уже не представляю ежедневную работу. Ниже — мой личный топ инструментов, которые экономят время и реально делают проекты лучше.
- 18 сентября 2025
Использование метода normalize() для строк в JavaScript
Метод normalize() приводит строки к единой форме Unicode. Это нужно, когда один символ (например, буква с акцентом) записан по-разному, но должен обрабатываться одинаково. Метод доступен с 20 марта 2019 года (статус Baseline «Widely Available»).
Пример: буква «é» может быть единой или комбинацией «e» и «́». normalize() делает их одинаковыми для сравнения.
const str1 = 'e\u0301'; // «e» + акцент
const str2 = 'é'; // единая «é»
console.log(str1 === str2); // false
console.log(str1.normalize() === str2.normalize()); // true
Получается, в Unicode один символ может быть записан разными способами, что мешает при сравнении строк, поиске или сортировке. normalize() решает эту проблему, приводя строку к стандартной форме.
- 12 сентября 2025
Визуализация: nth-child – как выбирать элементы на странице
Давайте разберёмся с :nth-child(). Это встроенная возможность CSS, которая помогает выбрать элементы на странице по их порядку внутри какого-нибудь контейнера, например, списка или блока. Хочется выделить каждый второй элемент? Или, скажем, каждый третий, начиная с четвёртого? С :nth-child() это легко! Можно просто написать номер, чтобы взять, к примеру, пятый элемент, или использовать что-то вроде «чётные» или «каждые три», чтобы всё красиво стилизовать.
- 7 сентября 2025
Использование rel="prefetch" и другие методы предзагрузки страницы
Ресурсные подсказки (Resource Hints) — это механизмы, позволяющие браузеру заранее загружать ресурсы или устанавливать соединения для ускорения навигации и загрузки страниц. Одним из таких механизмов является атрибут rel="prefetch", который указывает браузеру загружать ресурсы с низким приоритетом для возможного использования в будущем. Это сокращает время загрузки страниц и улучшает пользовательский опыт, особенно на сайтах с частыми переходами.
- 7 сентября 2025
Таймеры в JS с setTimeout и clearTimeout
setTimeout — это метод, предоставляемый API браузеров и Node.js, который позволяет выполнять код с заданной задержкой. Он принимает функцию (коллбэк), время задержки в миллисекундах и, опционально, аргуtimes для передачи в функцию. Для отмены выполнения используется clearTimeout.
setTimeout и setInterval были введены в первых версиях JavaScript (ECMAScript 1, 1997) как часть API WindowOrWorkerGlobalScope. Эти методы интегрированы в цикл событий (event loop), который управляет асинхронным выполнением в JavaScript. Несмотря на появление современных инструментов, таких как Promises и async/await, setTimeout остаётся востребованным благодаря своей простоте и универсальности.
const timerId = setTimeout(() => {
console.log('Сообщение появится через 2 секунды');
}, 2000);
// Отмена выполнения
clearTimeout(timerId);
Здесь setTimeout возвращает числовой идентификатор таймера (timerId), который используется в clearTimeout. В Node.js возвращается объект Timeout.
- 6 сентября 2025
Именованные цвета в CSS
Цвета в CSS можно задавать не только в форматах RGB, HEX или HSL, но и с помощью именованных цветов. Такие названия, как red, limegreen, blue или rebeccapurple, упрощают стилизацию, делая код более читаемым и интуитивным. Этот подход особенно полезен для быстрого прототипирования и учебных проектов.
Именованные цвета были введены в спецификации CSS1 (1996 год) и основаны на палитре X11, используемой в оконной системе UNIX. Названия вроде aliceblue, papayawhip или moccasin пришли именно из этой палитры. В CSS Color Level 4 (2022 год) стандарт закрепил 147 именованных цветов, включая transparent и currentcolor. Эти цвета поддерживаются во всех современных браузерах и могут использоваться для задания фона, текста, границ, теней и других свойств.
- 5 сентября 2025
Операторы присваивания &&= и ||= в JavaScript
JavaScript развивается быстрыми темпами, и новые возможности языка часто появляются именно для того, чтобы писать меньше кода и делать его более читаемым. Одной из таких возможностей стали логические операторы присваивания &&= и ||=, которые вошли в стандарт относительно недавно и уже поддерживаются во всех современных браузерах (статус Widely Available в Baseline с 16 марта 2023 года).
До появления этих операторов разработчики писали длинные конструкции с проверками:
let a = true;
if (a) {
a = false;
}Код был понятен, но избыточен. Новые операторы &&= и ||= позволяют объединить проверку и присваивание в одну строку.
- 30 августа 2025