Что такое шаблонные строки в JS?

Шаблонные строки — это ещё один способ создания строк, наравне с одинарными или двойными кавычками. Шаблонные строки объявляются с помощью обратных кавычек.

Шаблонная строка может быть многострочной, все переносы строк в ней будут сохранены. В шаблонной строке с помощью синтаксиса ${ } можно использовать любые выражения JavaScript. Любой нестроковый результат (например, объект) будет приведён к строке.

Шаблонные строки сейчас — основной способ работы со строками, в которые нужно подставлять вычисляемые значения.

Пример

`однострочная строка`

`строка на
несколько строчек,
можно сколько угодно`;

`Дважды два равно ${2 * 2}`; // Дважды два равно 4

const name = "Федя";

`Привет ${name}!`; // Привет Федя!

👉 @frontendInterview

👉 @frontendInterview

Перечисление селекторов

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

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

Пример
.main-noscript,
.noscript {
position: relative;
color: #ffffff;
font-weight: 500;
}

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Programming with Types (2019)

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

👉 @frontendInterview

Santa wish list form in ReactJS

В этом задании необходимо создать форму на React по заданному ТЗ. Выполнив его, можно с уверенностью сказать, что вы умеете создавать формы на React.

👉 @frontendInterview

Для чего можно использовать HTML тег picture?

Тег <picture> используется, когда для разных устройств или вариантов отображения нам нужны разные картинки.
<picture>
<source srcset="320.jpg" media="(max-width: 800px)">
<img src="640.jpg" alt="Абстрактное изображение">
</picture>

Одна и та же страница может быть открыта на разных устройствах и в браузерных окнах разной ширины. У телефона небольшой экран, и было бы круто не загружать полноразмерные картинки с большим разрешением. В CSS мы можем изменять фон элемента (background-image) в зависимости от ширины экрана, используя медиа выражения. Но если изображение контентное, вставлено в HTML при помощи тега <img>, то CSS нам уже не поможет. Мы должны использовать теги <picture> и <source>.

👉 @frontendInterview

👉 @frontendInterview

Что такое выражения и инструкции в JavaScript?

Выражение (expression) — это код, который после выполнения возвращает какое-либо значение. Например, 5 + 3 вернёт 8, а Math.random() — случайное число.

Инструкция (statement) — это отдельная команда в коде, которая выполняет определённое действие. Например, if позволяет создать ветвление в программе, for позволяет повторять одно и то же действие.

👉 @frontendInterview

👉 @frontendInterview

Что такое iframe?

<iframe> — это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети.

Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.

Пример
С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:
<iframe
id="inlineFrameExample"
noscript="Inline Frame Map"
width="560"
height="400"
frameborder="1"
allowfullscreen="true"
src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A"
>
</iframe>

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview