Катерина | Про Frontend

Разбираемся с dispatchEvent в JS 👨‍🏫

Метод dispatchEvent в JavaScript позволяет программно отправлять события на элементы, что даёт возможность запускать обработчики событий так, как если бы они были вызваны пользователем.

📚 Основы использования Чтобы отправить событие, нужно: ✔️ Создать событие; ✔️ Отправить его с помощью dispatchEvent.

const button = document.querySelector('button');
const event = new Event('click');  // Создаём событие
button.dispatchEvent(event);  // Отправляем его

Теперь, если на кнопке есть обработчик события click, он сработает, как если бы пользователь реально кликнул. 👍 📚 События с данными Если необходимо передать дополнительные данные с событием, используем CustomEvent — специальное событие, которое позволяет передавать данные через свойство detail.

const customEvent = new CustomEvent('dataChanged', {
  detail: { value: 'Новый текст' },
  bubbles: true, // Событие будет всплывать по DOM
  cancelable: true // Можно отменить стандартное поведение события
});

✔️ detail — объект, который может содержать любые данные, которые вы хотите передать; ✔️ bubbles (необязательный) — событие может «всплывать» вверх по DOM; ✔️ cancelable (необязательный) — позволяет отменить стандартное поведение события. 📚 Зачем это нужно? ⏺️ Можно легко отправлять события в любой момент; ⏺️ С помощью CustomEvent можно передавать любые данные между компонентами; ⏺️ Удобно для тестирования или симуляции действий пользователя на странице. Как итог, это инструмент отлично подойдёт для создания динамичных и гибких интерфейсов. Используйте его, чтобы управлять событиями и передавать данные между элементами на странице. 👍

Как правильно передавать параметры в URL? 🤔 Когда мы отправляем параметры через URL, важно не забыть их правильно закодировать. Это нужно, чтобы запросы работали корректно, а данные не искажались. В JavaScript для этого есть несколько полезных функций: encodeURIComponent(), encodeURI() и URLSearchParams. Давайте разберёмся, что каждая из них делает и когда лучше всего её использовать. 😁 1️⃣ encodeURIComponent()

Используется для кодировки значений параметров в URL. Эта функция гарантирует, что все специальные символы (например, пробелы, амперсанд &, знак равенства =, косая черта /) будут заменены на их безопасные процентные эквиваленты.

Пример:

const name = "Katerina & Pro Frontend";
const encodedName = encodeURIComponent(name);
console.log(encodedName); // Katerina%20%26%20Pro%20Frontend

➡️ Используйте encodeURIComponent() всегда, когда кодируете значения параметров (например, имя или город), чтобы избежать неправильной интерпретации символов, таких как пробелы или амперсанд. 2️⃣ encodeURI()

Используется для кодировки всего URL, но оставляет нетронутыми такие символы, как ?, &, =, /, которые являются частью структуры запроса. Это полезно, если вы хотите закодировать весь URL, но не хотите, чтобы символы, отвечающие за разделение параметров, были изменены.

Пример:

const url = "https://example.com/search?channel=Katerina | Pro Frontend";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // https://example.com/search?channel=Katerina%20%7C%20Pro%20Frontend

➡️ Используйте encodeURI() для кодировки всего URL, включая путь и параметры, оставляя разделители запроса нетронутыми. 3️⃣ URLSearchParams

Этот объект помогает удобно работать с параметрами URL. Он автоматически кодирует значения параметров и предоставляет методы для добавления, удаления или изменения параметров запроса, что упрощает работу с динамическими данными.

Подробне можно почитать по ссылке 👍 Как итог, ✔️ encodeURIComponent() — для кодировки значений параметров (например, name=Katerina & Pro Frontend); ✔️ encodeURI() — для кодировки всего URL, включая структуру запроса; ✔️ URLSearchParams — для удобного добавления, изменения и работы с параметрами URL.

Использование атрибута accept для выбора файлов в HTML 🧐 Атрибут accept в HTML позволяет ограничить типы файлов, которые можно выбрать через форму загрузки. Например, если вы хотите разрешить пользователю загружать только изображения, вы можете использовать следующий код:

<input type="file" accept="image/*">

Это ограничит выбор файлов в диалоговом окне только изображениями (например, .jpg, .png и другие). Также можно указывать конкретные расширения:

<input type="file" accept=".jpg, .png">

‼️ Важное замечание: не полагайтесь только на accept Хотя атрибут accept полезен для улучшения пользовательского опыта, важно понимать, что это не защищает от ошибок и не является надёжным механизмом безопасности. Ведь пользователь может: ✔️ Обойти ограничение, выбрав файл с неподобающим расширением через инструменты разработчика; ✔️ Ввести путь к файлу вручную, игнорируя ограничения в диалоговом окне. ➡️ Это значит, что атрибут accept — всего лишь подсказка для пользователя, а не строгий фильтр. Поэтому не забываем про дополнительные проверки для проверки безопасности файлов, чтобы предотвратить загрузку нежелательных файлов. 👍

Как добавить разрыв строки в CSS без <br>? 🧐 Есть интересный трюк, который позволяет вставить разрыв строки в CSS с помощью символа \A и стилей, например, white-space: pre-wrap. Давай разберёмся, как это работает! 📕 Что такое \A ?

В CSS символ \A — это способ вставить разрыв строки в свойство content, которое можно использовать в псевдоэлементах ::before и ::after. Вместо того чтобы вручную ставить <br>, мы просто пишем \A, и браузер понимает, что здесь должен быть разрыв строки.

Однако, чтобы это сработало, нужно добавить стиль white-space, например, с значением pre-wrap. Это свойство говорит браузеру: "Обработай разрывы строк так, как в теге <pre>, но также разреши переносы строк, если текст не помещается." Вот как это может выглядеть:

.text::before {
  content: "Первая строка\AВторая строка"; /* \A вставляет разрыв строки */
  white-space: pre-wrap; /* Обрабатываем \A как разрыв строки */
}

Здесь \A в свойстве content вставляет разрыв строки, а white-space: pre-wrap помогает браузеру правильно отобразить этот разрыв. Как итог, это отличный способ сделать код чище и чуточку удобнее 👍

EyeDropper API: Выбираем цвета прямо с экрана 🤩 С каждым годом появляется всё больше интересных нативных браузерных API, и одним из таких нововведений является EyeDropper API.

EyeDropper API — это инструмент для веб-разработчиков, который позволяет пользователям выбирать цвет с экрана с помощью встроенной пипетки. После выбора возвращается значение цвета в формате sRGBHex (например, #ff5733).

Простой пример использования:

if ("EyeDropper" in window) {
  const eyeDropper = new EyeDropper();
  eyeDropper.open()
    .then(result => {
      console.log("Выбранный цвет:", result.sRGBHex);
      document.body.style.backgroundColor = result.sRGBHex;
    })
    .catch(err => {
      console.error("Ошибка:", err);
    });
}

Как это работает? 🧐 ⏺️ Вызывается метод open() на объекте EyeDropper; ⏺️ Браузер открывает инструмент пипетки; ⏺️ Пользователь выбирает цвет; ⏺️ Браузер возвращает выбранный цвет в формате #RRGGBB. В чём преимущества API? ✔️ Простота: Несколько строк кода, чтобы интегрировать выбор цвета; ✔️ Интерактивность: Возможность настраивать UI, позволяя пользователю выбирать цвета для фона, текста и других элементов; ✔️ Использование в дизайне: Идеально подходит для онлайн-редакторов изображений, генераторов цветовых палитр и адаптивных интерфейсов. К сожалению, поддержка этого API пока ограничена. На данный момент поддерживается в браузерах Chrome, Edge и Opera. В Safari и Firefox - функционал отсутствует.

ДАЙДЖЕСТ АВГУСТ & СЕНТЯБРЬ 🖇 ПОЛЕЗНОЕ: • Улучшаем производительность событий прокрутки • Что делать, если функция требует кучу параметров? • Что будет, если передать в JSON.parse() необычные данные? • Публичный доступ — опасность или возможность? • Как браузер обрабатывает <script> при построении DOM-дерева? 🖇 HTML: • атрибутом rel в теге <link> • <meta name="viewport"> 🖇 CSS: • table-layout • .setProperty() и CSS-переменные • align-items и align-content • content-visibility 🖇 JAVASCRIPT: • Перезагрузка страницы • Что делать, когда ошибки связаны между собой? • Сокращённые логические присваивания • String.raw • Как работать с параметрами URL 🖇 TYPESCRIPT / RXJS: • Автокомплит с ограниченными вариантами, но при этом сохранить возможность ввода произвольных значений • distinctUntilChanged и debounceTime • Лишние свойства в TypeScript: почему это бывает и как с этим работать? #дайджест #дайджест_2025_август #дайджест_2025_сентябрь

HTML Attributes vs DOM Properties 🧐 При разработке мы часто сталкиваемся с понятиями HTML attributes и DOM properties. На первый взгляд кажется, что это одно и то же, но это не так. Давайте разбираться! 😁 1️⃣ HTML Attributes (Атрибуты HTML)

Атрибуты HTML — это значения, заданные в разметке HTML для элементов. Они определяют начальное состояние элемента и не изменяются после загрузки страницы, если не использовать JavaScript.

Пример:

<input type="text" value="Привет">

Атрибут value="Привет" задает начальное значение, но чтобы изменить его в JavaScript, нужно использовать setAttribute:

document.querySelector('input').setAttribute('value', 'Новое значение');

2️⃣ DOM Properties (Свойства DOM)

Свойства DOM отражают текущее состояние элемента в DOM и могут изменяться динамически, например, при взаимодействии с пользователем.

Пример:

document.querySelector('input').value = 'Новое значение';

После изменения свойства DOM, атрибут HTML не обновится автоматически. Атрибут останется прежним, пока его не изменят через setAttribute. Когда и что использовать? 🧩 Используйте атрибуты, если вам нужно задать начальное состояние элемента, которое будет прочитано при загрузке страницы. Это идеально подходит для значений, которые не изменяются динамически, например, при установке стандартных значений в форме; 🧩 Используйте свойства DOM, когда вам нужно отслеживать и изменять текущее состояние элемента во время работы с веб-страницей. Например, при обработке пользовательского ввода или изменении динамических данных. Так в чём же их главная разница? ✔️ Атрибуты задают начальные значения, которые не изменяются автоматически. ✔️ Свойства DOM — это текущее состояние, которое может изменяться динамически через JavaScript. 👀 Важно: Атрибуты и свойства не синхронизируются после инициализации. Например, изменение свойства value не меняет атрибут value в HTML.

Управляем отступами во Flexbox и Grid с помощью column-rule и row-rule 🤩 Забываем о псевдоэлементах и костылях с границами — теперь всё делается напрямую. 😁 Можно легко контролировать ширину, стиль и цвет линии: ✔️ *-rule-width — задаёт толщину линии; ✔️ *-rule-style — стиль линии (сплошная, точечная, штриховая и т.д.); ✔️ *-rule-color — цвет линии. Давайте подробнее разберём, как это работает: 1️⃣ column-rule: Разделители между колонками

Свойство column-rule позволяет легко добавлять разделители между колонками.

Пример использования:

.container {
  column-count: 3;
  column-gap: 20px; 
  column-rule: 2px solid black;
}

В этом примере между колонками будет отображаться чёткая чёрная линия толщиной 2px. 2️⃣ row-rule: Разделители между строками

Работает аналогично column-rule, но теперь с ним добавляете разделители между строками.

Пример:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 15px;
  row-rule: 2px dashed red;
}

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

Двойные значения в display в CSS 🤔 Свойство display в CSS управляет тем, как элементы отображаются на странице. Когда используются двойные значения, это позволяет комбинировать два типа отображения для одного элемента, давая больше гибкости. Что такое двойные значения? 🧩 Первое значение определяет основное поведение элемента (например, block, inline, flex), 🧩 а второе дополняет это поведение. Например, в inline-block элемент ведет себя как строчный, но можно задать размеры, как для блочного элемента. 👍

<div style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">Блок</div>

Ещё примеры: ✔️ inline-block: ⏺️ inline — элемент остается на той же строке; ⏺️ block — можно задавать размеры. ✔️ inline-flex: ⏺️ inline — контейнер не вызывает разрыв строки; ⏺️ flex — внутри контейнера элементы выстраиваются по правилам флексбокса. Как итог, двойные значения упрощают структуру макета и позволяют создавать более адаптивные и гибкие страницы с минимальным количеством кода. 💗

В чём разница между Number.isFinite и isFinite? 🤨 В JavaScript есть две функции для проверки, является ли значение конечным числом: Number.isFinite и глобальная isFinite. Давайте разбираться! ✔️ Number.isFinite Number.isFinite проверяет, является ли переданное значение конечным числом. Главное отличие — она не выполняет преобразование типов.

console.log(Number.isFinite(10));        // true
console.log(Number.isFinite('10'));      // false
console.log(Number.isFinite(Infinity));  // false

✔️ isFinite isFinite проверяет, можно ли привести значение к числу и является ли оно конечным. При этом производит преобразование типов.

console.log(isFinite(10));        // true
console.log(isFinite('10'));      // true, строка преобразуется в число
console.log(isFinite('abc'));     // false
console.log(isFinite(true));      // true, true преобразуется в 1

Подведём итог: 🧩 Number.isFinite: Когда нужна строгая проверка на конечное число без преобразования типов; 🧩 isFinite: Когда нужно проверить, можно ли преобразовать значение в число. 👍

Как работать с параметрами URL 🧐 Когда работаем с URL в JavaScript, часто приходится манипулировать строкой запроса — добавлять, изменять или удалять параметры. Именно здесь на помощь приходит объект URLSearchParams. Он упрощает работу с параметрами запроса, превращая её в интуитивно понятную и безопасную задачу. 👍

searchParams — это свойство объекта URL, которое представляет собой экземпляр URLSearchParams. Он позволяет легко получать доступ к параметрам строки запроса, а также изменять их, не обращаясь к строкам вручную.

Основные методы работы с параметрами перечислены на картинке выше. ⬆️ Кроме того, URLSearchParams автоматически заботится о кодировании и декодировании параметров. Это означает, что вам не нужно вручную кодировать или декодировать значения, содержащие специальные символы, такие как пробелы, амперсанды или знаки равенства. Все это будет обработано за вас. 😁

const params = new URLSearchParams();
params.append('name', 'John Doe');
console.log(params.toString()); // 'name=John+Doe' — пробел автоматически кодируется как '+'

Как итог, этот инструмент делает работу с параметрами URL простой, безопасной и эффективной, избавляя от необходимости вручную кодировать или декодировать параметры. 👍

Как браузер обрабатывает <script> при построении DOM-дерева? 🧐 Когда браузер разбирает HTML, встречающиеся теги <script> могут блокировать дальнейшее построение DOM, что влияет на производительность страницы. И вот как это работает: 1️⃣ Синхронные скрипты (<script>, без async или defer) — блокируют построение DOM до своей загрузки и выполнения. Это замедляет рендеринг страницы. 2️⃣ Асинхронные скрипты (async) агружаются параллельно с HTML, но выполняются сразу, как только файл загружен. Порядок их выполнения непредсказуем и может прервать рендеринг страницы. 3️⃣ Скрипты с defer загружаются параллельно, но выполняются после полного парсинга HTML, в том же порядке, в котором они встречаются в документе. 4️⃣ Модульные скрипты (type="module") загружаются как defer, но имеют строгий режим и поддерживают import/export. Они выполняются после загрузки HTML и поддерживают top-level await. 5️⃣ Динамические скрипты (через document.createElement('script')) ведут себя как async по умолчанию. 👩‍🎓 Немного рекомендаций: ✔️ Используй defer для большинства скриптов, чтобы они не блокировали рендеринг; ✔️ Для независимых скриптов (например, аналитики) используй async; ✔️ Минимизируй количество синхронных скриптов в <head> — это замедляет загрузку страницы. И помним, скрипты могут блокировать не только DOM, но и рендеринг страницы, влияя на скорость загрузки и пользовательский опыт, поэтому правильное использование async и defer ускоряет загрузку и рендеринг. 👍

toString() vs String() 🤨 Одна из частых задач - преобразовывать данные в строку. Для этого есть два подхода: toString() и String(). Хотя они делают похожие вещи, но существует ключевое различие. Давайте разберёмся! 😁 1️⃣ toString() — Метод объекта Он преобразует объект в строку, но: ✔️ Для примитивных типов (например, числа и строки) просто возвращает строковое представление; ✔️ Для объектов (массивы, функции) результат зависит от типа; ✔️ Ошибка при попытке вызвать toString() на null или undefined.

const num = 42;
console.log(num.toString()); // "42"

const arr = [1, 2, 3];
console.log(arr.toString()); // "1,2,3"

// Ошибка на null/undefined
null.toString(); // TypeError

2️⃣ String() — Глобальная функция Это универсальная функция для преобразования любого типа в строку: ✔️ Работает с любыми значениями (включая null и undefined); ✔️ Не вызывает ошибок, возвращая "null" или "undefined" вместо исключений.

console.log(String(42));        // "42"
console.log(String([1, 2]));    // "1,2"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"

Немного дополнительных рекомендаций: ✔️ Для объектов и массивов, которые не переопределяют toString(), результат будет общим ("[object Object]" или "1,2,3"). Если нужно другое представление — переопределите toString(); ✔️ Если нужно сериализовать объекты в JSON, используйте JSON.stringify(); ✔️ В большинстве случаев toString() немного быстрее, так как не требует дополнительных проверок, в отличие от String(), но разница в производительности обычно незначительна и не влияет на повседневную работу кода. В большинстве случаев я использую метод toString(), так как он удобен для преобразования. Но если нужно обработать null или undefined, то я я обращаюсь к функции String(), так как она безопасно справляется с этими случаями, не вызывая ошибок. 👍

Публичный доступ — опасность или возможность? 🔐 Не так давно наткнулась на статью, которая заставила задуматься о безопасности в разработке. Автор рассказывал, как он сканировал публичные репозитории на GitHub, чтобы найти утекшие секреты — пароли, токены API и другие конфиденциальные данные, которые разработчики случайно выкладывают в своих коммитах. 😳 Оказывается, даже если удалить коммит с токеном или паролем, это не гарантирует, что данные исчезнут навсегда. 😰 Git хранит всю историю изменений, и даже после использования команд вроде git reset и git push --force, данные могут остаться доступными. Это значит, что, если случайно выложить секрет, то нужно не только удалить коммит, но и срочно поменять все ключи и пароли, иначе кто-то может ими воспользоваться. 📕 Вот как работают эти команды: ✔️ git reset — позволяет откатить изменения в локальном репозитории, возвращая его к более раннему состоянию; ✔️ git push --force — перезаписывает историю на удалённом репозитории, удаляя коммиты, которые не хочется видеть. ❗️❗️❗️❗️ Даже если коммит был удалён, стоит помнить, что эта операция не удаляет данные окончательно. Когда изменения сбрасываются и выполняется принудительная отправка, ссылка на коммит в ветке удаляется, и он больше не будет виден через стандартную навигацию Git (например, с помощью git log). Однако этот коммит всё равно остаётся доступным на GitHub, поскольку GitHub хранит историю коммитов, даже если они были переписаны или удалены. Для того чтобы избежать таких ситуаций, всегда стоит использовать специальные инструменты для сканирования репозиториев на наличие секретов, прежде чем что-то загружать в публичный доступ. И, конечно, ключи, токены и пароли лучше хранить в безопасных менеджерах секретов, а не прямо в коде! Помним: публичный доступ — это не только возможность для других посмотреть и использовать ваш код, но и опасность, если не быть внимательным. Поэтому всегда лучше проверять дважды перед тем, как что-то выкладывать в общий доступ. 🛡

Разбираемся с интересным CSS-свойством content-visibility 🤨

content-visibility — это CSS-свойство, которое позволяет улучшить производительность сайта, скрывая рендеринг элементов, которые не видны пользователю. А браузер рендерит только те элементы, которые находятся в области видимости, что ускоряет загрузку страницы и снижает нагрузку на систему.

Как работает content-visibility? Когда элемент имеет content-visibility: auto, он не рендерится, пока не попадёт в область видимости пользователя. Это позволяет браузеру экономить ресурсы на невидимые элементы.

.element {
  content-visibility: auto | hidden | visible;
}

✔️auto — рендерится только видимый элемент; ✔️ hidden — элемент скрыт и не рендерится; ✔️ visible — элемент всегда видим и всегда рендерится. Данное свойство хорошо работает в связке с contain-intrinsic-size. Разберёмся! Что такое contain-intrinsic-size? 🤨 Когда используется content-visibility, браузер может не знать точный размер скрытых элементов, что может вызвать проблемы с макетом. Чтобы избежать этого, используется contain-intrinsic-size, которое задаёт минимальный размер элемента, даже если он не видим. Это помогает браузеру правильно "запланировать" место для элемента.

.image-gallery img {
  content-visibility: auto;
  contain-intrinsic-size: 200px;  /* Задаём минимальный размер */
}

Преимущества: ✅ Страница начинает загружаться чуть быстрее; ✅ Меньше нагрузка на процессор и память; ✅ Более быстрый рендеринг элементов, когда они становятся видимыми, без необходимости тратить ресурсы на невидимые элементы. Когда использовать? 🔘 Длинные страницы с большим количеством контента (например, ленты новостей или каталоги товаров); 🔘 Динамический контент, который появляется по мере прокрутки. Как итог, использование content-visibility — это простой способ ускорить рендеринг страницы, а в сочетании с contain-intrinsic-size можно избежать проблем с макетом при скрытых элементах. 👍

Лишние свойства в TypeScript: почему это бывает и как с этим работать? 😰 Однажды я писала о том, что TypeScript использует структурную типизацию. Это означает, что он проверяет типы объектов не по их имени, а по структуре. Такой подход делает работу с типами данных гибкой и удобной, но иногда приводит к интересным и порой запутанным ситуациям. Например, TypeScript может, "проигнорировать" лишние свойства, а в других случаях выбросить ошибку, когда этого совсем не ожидаешь. 😤 Давайте разберёмся на нескольких примерах, почему так происходит. Для наглядности все примеры я разобрала на картинках. ⬆️ Итак, ключевые моменты, которые важно понимать: ✔️ Когда мы передаём объект в функцию, TypeScript сравнивает его структуру с типом, указанным для этой функции. Если структура объекта не совпадает, возникает ошибка; ✔️ Когда мы создаём объект в переменной и не указываем тип явно, TypeScript "ленится" проверять его сразу, и ошибка не появляется; ✔️ Со spread-оператором TypeScript вообще не проверяет, что добавление новых свойств нарушает тип. Он просто считает, что структура объекта остаётся в пределах ожидаемого. 😂😅

Что будет, если передать в JSON.parse() необычные данные? 🧐 Все мы привыкли парсить строки через JSON.parse(), но что происходит, если передать в него что-то необычное, например: null, undefined или пустую строку? Давайте разберёмся! 🤔 1️⃣ JSON.parse(null) Когда передаём в JSON.parse значение null — просто вернется сам null.

console.log(JSON.parse(null));  // null

Почему? Потому что null в контексте JSON — это просто пустое значение, и метод возвращает его без изменений. Мистично, но работает! 🙃 2️⃣ JSON.parse(undefined) А вот с undefined будет другая история. Этот тип данных не является валидным JSON, поэтому JSON.parse выбросит ошибку:

console.log(JSON.parse(undefined));  // Uncaught SyntaxError: Unexpected token u in JSON at position 0

undefined нельзя превратить в валидный JSON, и метод сразу сообщает о синтаксической ошибке. 3️⃣ JSON.parse('') Пустая строка тоже не пройдет. Попытка распарсить её — это ошибка:

console.log(JSON.parse(''));  // Uncaught SyntaxError: Unexpected end of JSON input

Дело в том, что пустая строка не является валидным JSON-значением. Метод JSON.parse ожидает, что строка будет содержать валидный JSON-тип. 😁 Как итог, если передаваемая строка может являться пустой или принимать значение undefined, то всегда не забываем проверять её перед использованием в JSON.parse(), чтобы избежать неприятных ситуаций. 👍

Вы до сих пор дважды дублируете \, чтобы использовать в шаблонных строках? 🔍 На днях увидела, как кто-то дублирует обратные слэши (\\) в шаблонных строках для экранированных символов, таких как \n (новая строка) или \t (табуляция). Но существует решение куда проще — достаточно использовать String.raw. 😁 📕 Что такое String.raw? Этот метод позволяет работать с шаблонными строками так, чтобы escape-последовательности (такие как \n, \t, \\ и другие) оставались «необработанными». То есть, если вам нужно записать строку с путём или с символами новой строки и табуляции, без лишнего экранирования, String.raw сделает всё за вас. 👍 Пример:

const path = String.raw(`C:\Users\Name\Documents\file.txt`);
console.log(path);  // C:\Users\Name\Documents\file.txt

Вместо того чтобы дважды экранировать каждый слэш или символ новой строки, как это требовалось бы в обычной строке:

const path = `C:\\Users\\Name\\Documents\\file.txt`;
console.log(path);  // C:\Users\Name\Documents\file.txt

➡️ С String.raw код становится чище и легче читаемым, так как не нужно дважды экранировать символы, такие как \, n или t; Где это полезно? ✔️ Пути к файлам: Если вы работаете с путями на Windows, где много обратных слэшей, String.raw избавит вас от необходимости писать \\; ✔️ Регулярные выражения: Если в паттерне много слэшей или специальных символов, String.raw поможет избежать интерпретации этих символов и сохранить их в исходном виде; ✔️ Многострочные строки: Когда необходимо сохранить символы новой строки или табуляции в виде текста, а не фактически разрывать строки или вставлять табуляцию. Как итог, то быстрый и простой способ избежать лишних шагов в работе с шаблонными строками и сохранить точность вывода. Особенно если вы работаете с путями, регулярными выражениями или многострочными строками.

Разбираемся с <meta name="viewport"> 🤓

<meta name="viewport"> — это мета-тег, который сообщает мобильным браузерам, как устанавливать размер виртуального окна просмотра (viewport) и как масштабировать страницу.

Без него браузеры на телефонах обычно рендерят страницу «как десктопную» (шириной ~980px), и в итоге всё выглядит крошечным и сжато. 📚 Базовый синтаксис:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Этот вариант — большинство случаев: ширина вьюпорта = реальной ширине экрана устройства, начальный масштаб = 100%. Значения content привела на картинке выше 😁 👀 <meta name="viewport"> сам по себе не делает сайт адаптивным. Он только задаёт «полотно» для рендеринга. Немного советов: 1️⃣ Добавляйте тег в <head> и как можно раньше. Браузер должен увидеть его до рендеринга; 2️⃣ Используйте width=device-width, initial-scale=1.0 как правило по умолчанию; 3️⃣ Не вставляйте несколько мета-тегов viewport. Браузеры могут применить только один, или поведение станет непредсказуемым И, конечно, не забываем проверять дизайн и масштабирование на реальных устройствах и в эмуляторах 🥰

align-items и align-content — кажутся одинаковыми, но на деле решают разные задачи 🧐 На первый взгляд оба свойства — про выравнивание по поперечной оси; на практике же они работают на разных уровнях: ✔️ align-items управляет позиционированием отдельных элементов внутри каждой линии, ✔️ а align-content контролирует распределение самих линий внутри контейнера. 📖 align-items — инструмент локального контроля. Оно отвечает за положение каждой карточки, иконки или строки текста внутри своей линии: поджать к верху, опустить вниз, выровнять по базовой линии или растянуть до высоты линии. ➡️ Меняем align-items — меняется положение содержимого в каждой строке, а не расположение самих строк. 📖 align-content — средство работы с композиционной структурой. При flex-wrap: wrap и наличии нескольких линий это свойство определяет, как ряды будут занимать доступное поперечное пространство контейнера: собраться у начала, у конца, центрироваться, распределиться равномерно или растянуться. 👀 Если строка одна или свободного пространства нет — align-content молчит. Как запомнить попроще? 🌟 align-items - про «положение людей в ряду», 🌟 align-content — про «положение рядов в зале». 🙂