Frontend Interview - собеседования по Javanoscript / Html / Css – Telegram
Frontend Interview - собеседования по Javanoscript / Html / Css
11.4K subscribers
2.1K photos
118 videos
319 files
530 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Перечисление селекторов

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

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

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


👉 @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
Что такое выражения и инструкции в JavaScript?

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

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

👉 @frontendInterview
👍1
Что такое 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
Multithreaded JavaScript: Concurrency Beyond the Event Loop (2021)

По своей природе JavaScript должен быть однопоточным. Это отражено не только в библиотеках и приложениях, но и в сообщениях на онлайн-форумах, в книгах и документации. Благодаря недавним достижениям в платформе, таким как веб-воркеры в браузере, worker threads в Node.js, а также объекты Atomics и SharedArrayBuffer, JavaScript инженеры могут создавать многопоточные приложения. Эти функции станут крупнейшим сдвигом парадигмы для самого популярного в мире языка программирования.

👉 @frontendInterview
Maximum Product

Вам дан массив из чисел. Обработайте его и верните наибольший результат умножения двух чисел из этого массива.

Пример:
adjacentElementsProduct([1, 2, 3]); ==> return 6

👉 @frontendInterview
Как проверить, содержится ли значение в коллекции Set?

Метод set.has() проверяет, содержится ли значение в коллекции Set. Если значение есть в коллекции, метод вернёт true, в противном случае — false.

Пример
const watchList = new Set(['Сияние', 'Интерстеллар', 'Казино'])

console.log(watchList.has('Казино'))
// true

console.log(watchList.has('Чёрная пантера'))
// false


👉 @frontendInterview