В прошлой заметке мы настроили доступ к нашему 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 свежих и стильных тем, которые помогут настроить рабочее пространство этой осенью. В списке вы найдёте и тёмные, и светлые варианты — от минимализма до неонового киберпанка.

Вайбкодинг — это когда код вроде бы работает, но написан «по вайбу»: с кривыми отступами, странными именами переменных, копипастой и магическими числами. Такой код сложно поддерживать. Многие настоящие программисты с большим опытом добавляют себе в портфолио фразу «очищу ваш вайбкод». Но что, если я скажу, что и нейросети отлично помогают его чистить, особенно в небольших проектах?

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

По работе мне постоянно нужно делать картинки для статей в блоге, поэтому я постоянно экспериментирую с плагинами в Figma. Некоторые остаются «про запас», но есть плагины, без которых я уже не представляю ежедневную работу. Ниже — мой личный топ инструментов, которые экономят время и реально делают проекты лучше.

Метод 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() решает эту проблему, приводя строку к стандартной форме.

Давайте разберёмся с :nth-child(). Это встроенная возможность CSS, которая помогает выбрать элементы на странице по их порядку внутри какого-нибудь контейнера, например, списка или блока. Хочется выделить каждый второй элемент? Или, скажем, каждый третий, начиная с четвёртого? С :nth-child() это легко! Можно просто написать номер, чтобы взять, к примеру, пятый элемент, или использовать что-то вроде «чётные» или «каждые три», чтобы всё красиво стилизовать.

Ресурсные подсказки (Resource Hints) — это механизмы, позволяющие браузеру заранее загружать ресурсы или устанавливать соединения для ускорения навигации и загрузки страниц. Одним из таких механизмов является атрибут rel="prefetch", который указывает браузеру загружать ресурсы с низким приоритетом для возможного использования в будущем. Это сокращает время загрузки страниц и улучшает пользовательский опыт, особенно на сайтах с частыми переходами.

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.

Цвета в CSS можно задавать не только в форматах RGB, HEX или HSL, но и с помощью именованных цветов. Такие названия, как red, limegreen, blue или rebeccapurple, упрощают стилизацию, делая код более читаемым и интуитивным. Этот подход особенно полезен для быстрого прототипирования и учебных проектов.

Именованные цвета были введены в спецификации CSS1 (1996 год) и основаны на палитре X11, используемой в оконной системе UNIX. Названия вроде aliceblue, papayawhip или moccasin пришли именно из этой палитры. В CSS Color Level 4 (2022 год) стандарт закрепил 147 именованных цветов, включая transparent и currentcolor. Эти цвета поддерживаются во всех современных браузерах и могут использоваться для задания фона, текста, границ, теней и других свойств.

JavaScript развивается быстрыми темпами, и новые возможности языка часто появляются именно для того, чтобы писать меньше кода и делать его более читаемым. Одной из таких возможностей стали логические операторы присваивания &&= и ||=, которые вошли в стандарт относительно недавно и уже поддерживаются во всех современных браузерах (статус Widely Available в Baseline с 16 марта 2023 года).

До появления этих операторов разработчики писали длинные конструкции с проверками:

let a = true;
if (a) {
  a = false;
}

Код был понятен, но избыточен. Новые операторы &&= и ||= позволяют объединить проверку и присваивание в одну строку.

Свойство letter-spacing — одно из базовых средств CSS-типографики, которое управляет расстоянием между буквами текста. Оно позволяет сделать текст более разреженным или, наоборот, плотным. Сегодня это свойство используется повсеместно — от стилизации логотипов до улучшения читаемости в длинных абзацах. С января 2018 года оно находится в статусе Widely Available в Baseline, а значит, поддерживается всеми современными браузерами.

Мышь — один из самых привычных способов взаимодействия с веб-страницей, и JavaScript даёт разработчику полный набор инструментов, чтобы реагировать на действия пользователя. Мышиные события позволяют «слушать» клики, движения и даже прокрутку, создавая динамичные и удобные интерфейсы. Эти события существуют в браузерах очень давно и с января 2018 года находятся в статусе Widely Available в Baseline — значит, поддерживаются всеми современными браузерами.

Элемент <input> — один из самых старых и фундаментальных в HTML. Ещё в HTML 2.0 (1995 год) существовали только базовые типы вроде text, password и checkbox. Но по мере развития веба стало очевидно, что пользователям нужно вводить не только текст, а самые разные данные: email, телефоны, даты, цвета, числа. Так, начиная с HTML5 (2014 год), появились новые семантические типы <input>, которые помогают браузеру лучше понимать контекст и давать пользователю удобные инструменты для ввода.

С января 2018 года все эти новые типы ввода находятся в статусе Widely Available в Baseline. Это значит, что их можно использовать без оглядки на совместимость: современные браузеры корректно поддерживают большинство сценариев.

Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link, :visited и :any-link. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году.

Псевдоклассы :link и :visited существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link отвечал за стилизацию непосещённых ссылок, а :visited — посещённых, основываясь на истории браузера.

Псевдокласс :any-link появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.

Когда вы создаёте интерактивные веб-приложения, взаимодействие с клавиатурой пользователя становится важной частью. Хотите, чтобы ваш сайт реагировал на нажатие клавиши Enter для отправки формы? Или, может, мечтаете сделать простую браузерную игру, где персонаж движется при нажатии стрелок? Для этого в JavaScript есть события keydown и keyup. Они позволяют отслеживать, когда пользователь нажимает или отпускает клавишу. В этой статье мы разберём, как работают эти события, их историю, особенности и как безопасно использовать их в 2025 году.

Если вы только начинаете свой путь в веб-разработке, то наверняка уже столкнулись с необходимостью писать CSS-код так, чтобы он был понятным, организованным и легко поддерживаемым. Представьте, что у вас есть проект с десятками компонентов, и все стили свалены в один огромный файл. Кошмар, правда? Вот тут на сцену выходит правило @import в CSS, которое позволяет загружать стили из других файлов, делая ваш код модульным и структурированным. В этой статье мы разберём, как работает @import, его историю, особенности использования и почему оно до сих пор актуально в 2025 году.

Когда вы начинаете погружаться в веб-разработку, рано или поздно возникает задача: как программно оформить текст? Представьте, что вам нужно выделить часть текста жирным или курсивом прямо из JavaScript, не прибегая к ручному написанию HTML-тегов. Здесь на помощь приходят встроенные методы строк в JavaScript, такие как bold(), italics() и их менее известные собратья. Эти методы позволяют оборачивать строки в HTML-теги, возвращая новую строку с нужным форматированием. Давайте разберёмся, как они работают, откуда взялись, и стоит ли их использовать в 2025 году.

Числа — это основа многих программ, будь то расчёты в играх, обработка данных в формах или генерация случайных событий. В JavaScript числа представлены типом Number, который охватывает как целые, так и дробные значения. А для сложных математических операций есть встроенный объект Math, который предоставляет множество полезных методов. Если вы новичок в веб-разработке, понимание чисел и их возможностей в JavaScript — это ключ к созданию динамичных и функциональных приложений. В этой статье мы подробно разберём тип Number, объект Math, специальные значения вроде Infinity и NaN, а также покажем, как использовать их в реальных проектах.