Frontend Interview - собеседования по Javascript / Html / Css
12K subscribers
2.05K photos
108 videos
309 files
500 links
Канал для подготовки к собеседованиям по фронтенду

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

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

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Greatest common divisor

Найдите наибольший общий делитель двух целых положительных чисел. Целые числа могут быть большими, поэтому необходимо найти умное решение.

Исходные данные x и y всегда больше или равны 1, поэтому наибольший общий делитель всегда будет целым числом, которое также больше или равно 1.

👉 @frontendInterview
Что такое псевдоэлемент в CSS?

Псевдоэлементы — это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML.

Синтаксис:
Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after.

Распространенные псевдоэлементы:
- ::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.
    p::before {
content: "«";
color: blue;
}

p::after {
content: "»";
color: blue;
}


-::first-line: Применяет стили к первой строке текста в блочном элементе.
    p::first-line {
font-weight: bold;
}


- ::first-letter: Применяет стили к первой букве текста в блочном элементе.
    p::first-letter {
font-size: 200%;
}


- ::selection: Применяет стили к части текста, которую пользователь выделил.
    p::selection {
background: yellow;
}


Особенности работы:

- Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
- Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";).
- Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.

👉 @frontendInterview
👍5
Сколько ссылок из списка откроют страницу в новой вкладке?
Anonymous Quiz
69%
1
24%
2
6%
3
🔥9
Как подключить CSS стили?

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

Внешний файл со стилями
При этом подходе CSS пишется в отдельном файле с расширением .css. Такие стили ещё называют связанными.

Для связывания страницы с файлом стилей используется тег <link> внутри <head>:
<head>
<link rel="stylesheet" href="main.css">
</head>

Преимущества
- Можно использовать один CSS-файл для нескольких страниц. Изменение стилей в таком файле автоматически применится ко всем страницам, к которым он подключён.
- При первой загрузке страницы файл со стилями кэшируется, и в следующие разы она открывается быстрее.

Встроенные стили
Вариант, когда CSS-свойства описываются в самом HTML-документе внутри тега <style> в шапке страницы:
<head>
<style>
h1 {
color: tomato;
}
</style>
</head>

Преимущества
- Поскольку код находится непосредственно в HTML-файле, браузер не загружает сторонние файлы. Это позволяет отрисовать страницу быстрее.
- Встроенные стили работают изолированно и применяются непосредственно к странице, на которой прописаны.

Недостатки
- С каждым новым правилом вес HTML-файла будет увеличиваться и страница будет загружаться медленнее.
- Со временем такие же стили могут понадобиться на других страницах, и CSS придётся дублировать.

Инлайн-стили
В этом варианте элементам, которые необходимо оформить, добавляется атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые и применятся к элементу:
<h1 style="сolor: yellow; margin: 10px 20px">Заголовок</h1>

Преимущества
- Как и со встроенными стилями, браузеру не нужно запрашивать файл, что ускоряет рендеринг.
- Не нужно писать селекторы, потому что стили применяются сразу к нужному элементу.

Однако несмотря на преимущества, инлайн-стили — это антипаттерн. Недостатков у этого подхода слишком много.

👉 @frontendInterview
👍4
Борьба с перерендерами в React

На тему мемоизации написано довольно много статей, и все они хорошо раскрывают суть. Но мне часто не хватало шпаргалки, которую можно отправить на вопрос «А как мемоизировать?». В статье речь пойдет исключительно о функциональных компонентах.

👉 @frontendInterview
👎1🔥1
Mobile-first vs Desktop-first

Mobile-first и Desktop-first — это подходы в веб-дизайне и разработке, которые определяют, для каких устройств начинается проектирование дизайна и разработка в первую очередь.

Mobile-first подход получил широкое распространение в современном вебе благодаря возросшей популярности мобильных устройств. Однако есть типы задач (CRM / ERP системы, дашборды, эффектные имидживые проекты), для решения которых Desktop-first остаётся более подходящим.

Mobile-first
Минималистичные интерфейсы
Важно понимать, что в данном случае термин «минималистичные интерфейсы» не означает, что функциональность интерфейсов урезана. Минималистичность здесь — следствие небольшого размера экрана. В первую очередь создается UI & UX (англ. User Interface & User Experience, «пользовательский интерфейс и пользовательский опыт») именно для таких устройств. Далее, на основе мобильных интерфейсов, дорабатывается UI & UX для более широких экранов.

Мобильные сценарии использования
Чтобы пользователю было комфортнее работать с мобильным интерфейсом, при его разработке учитывают:

- удобство сенсорного взаимодействия (по интерактивным элементам должно быть удобно тапать пальцами);
- возможность навигации одной рукой (дотягивается ли большой палец, не мешает ли ему что-то при скролле?);
- приоритетность основного контента (не заставляйте пользователя доскролливать до контента, ради которого он зашёл).

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

SEO
Google преимущественно использует мобильную версию сайта для индексации (mobile-first-indexing).

Desktop-first
Богатая функциональность
Благодаря большому размеру экрана, как правило, не возникает проблем с расположением элементов интерфейса, которые предлагают расширенную функциональность. Например, интерфейс аналитического дашборда может вмещать редактируемые таблицы с большим количеством столбцов.

Десктопные сценарии использования
С десктопным интерфейсом пользователь взаимодействует с помощью клавиатуры и мыши. Курсор менее требователен к области клика, чем палец, зато он всегда на экране: хорошей практикой будет следить, чтобы контент не появлялся и не пропадал с экрана при малейшем сдвиге мыши. Клавиатура в пользовательском интерфейсе может быть представлена (в виде подсказок о горячих клавишах) или нет, но в любом случае интерфейс должен на неё отзываться: например, отправится ли форма при нажатии на «Enter»?

👉 @frontendInterview
👍5
JavaScript с нуля

JavaScript еще никогда не был так прост! Вы узнаете все возможности языка программирования без общих фраз и неясных терминов. Подробные примеры, иллюстрации и схемы будут понятны даже новичку. Легкая подача информации и живой юмор автора превратят нудное заучивание в занимательную практику по написанию кода. Дойдя до последней главы, вы настолько прокачаете свои навыки, что сможете решить практически любую задачу, будь то простое перемещение элементов на странице или даже собственная браузерная игра.

👉 @frontendInterview
1👍1
Generate range of integers

Реализуйте функцию generateRange, которая принимает три аргумента (start, stop, step) и возвращает диапазон целых чисел от start до stop(включительно) с шагом step

start < stop
step > 0

Пример:
(1, 10, 1)  //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
(-10, 1, 1) // [-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1]
(1, 15, 20) // [1]


👉 @frontendInterview
Что такое hoisting?

Поднятие (hoisting) — это механизм, при котором объявления переменных и функций поднимаются вверх своей области видимости во время компиляции, до фактического выполнения кода. Это означает, что вы можете использовать переменные и функции до их объявления в коде.

Hoisting переменных
Для переменных, объявленных с использованием var, только само объявление поднимается, а присвоение значения остается на своем месте. Это может привести к неожиданным результатам.
console.log(a); // undefined
var a = 5;
console.log(a); // 5

Интерпретируется как:
var a;
console.log(a); // undefined
a = 5;
console.log(a); // 5


Переменные, объявленные с помощью let и const, также поднимаются, но находятся в так называемой "временной мертвой зоне" (temporal dead zone, TDZ) до тех пор, пока выполнение кода не дойдет до строки их объявления. Попытка доступа к таким переменным до их объявления вызывает ошибку.
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(b); // 10

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;
console.log(c); // 15


Hoisting функций
Функции, объявленные с помощью function declaration, полностью поднимаются — как объявление, так и их определение. Это позволяет вызывать функции до их объявления в коде.
hoistedFunction(); // "This function is hoisted"

function hoistedFunction() {
console.log("This function is hoisted");
}


Функции, объявленные как function expression, ведут себя иначе. Только объявление переменной поднимается, но не ее присвоение. Это значит, что вы не можете вызвать такую функцию до ее фактического объявления.
hoistedFunctionExpression(); // TypeError: hoistedFunctionExpression is not a function

var hoistedFunctionExpression = function() {
console.log("This function is not hoisted");
};


Важные моменты

- Переменные, объявленные с помощью var, поднимаются, но их значение становится undefined до присвоения.
- Переменные, объявленные с помощью let и const поднимаются, но остаются недоступными до фактического объявления в коде, что вызывает ошибку при доступе.
- Функции, объявленные как function declaration, полностью поднимаются и могут быть вызваны до своего объявления.
- Функции, объявленные как function expression, поднимаются только как переменные, а присвоение происходит на месте, что делает их недоступными до присвоения.

👉 @frontendInterview
👍62
Какие размеры у элемента span в следующем примере?
Anonymous Quiz
53%
0
47%
300x300
🤔10
This media is not supported in your browser
VIEW IN TELEGRAM
scroll-snap-stop

Свойство scroll-snap-stop определяет, должен ли скролл обязательно останавливаться в каждой точке привязки при прокрутке.

Пример
.element {
scroll-snap-stop: always;
}


Возможные значения scroll-snap-stop:
- normal — прокрутка может проскочить несколько элементов, значение по умолчанию;
- always — прокрутка должна остановиться на каждом элементе.

Попробуйте прокрутить каждый из контейнеров в демо с небольшим ускорением. Эффект от свойства можно увидеть на тач-экранах или устройствах с тачпадом.

👉 @frontendInterview
3👍1
React и графики: 8 библиотек для визуализации данных

Сегодня хочу поговорить о визуализации данных в React: какую библиотеку выбрать, чтобы было красиво и без проблем? Recharts, Visx, Nivo, ECharts или, может, что-то еще? Давайте разбираться! В посте оценим восемь разных библиотек: возможности, плюсы и минусы. Поехали!

👉 @frontendInterview
Что такое DNS?

DNS (Domain Name System) — это система, которая переводит доменные имена, понятные человеку, в IP-адреса, понятные компьютерам и сетевым устройствам. Основная задача DNS — облегчить доступ к ресурсам в Интернете, позволяя использовать легко запоминаемые доменные имена вместо сложных числовых IP-адресов.

Основные функции

- Основная функция DNS заключается в преобразовании доменных имен (например, www.example.com) в соответствующие им IP-адреса (например, 93.184.216.34), чтобы веб-браузеры и другие интернет-клиенты могли находить и обращаться к нужным ресурсам.

- Обратное разрешение (Reverse DNS) — это процесс преобразования IP-адресов обратно в доменные имена. Это используется для проверки подлинности или при проведении сетевой диагностики.

Как он работает
Процесс разрешения доменного имени включает несколько этапов и компонентов:

1. Введение DNS-кэша: Браузер и операционная система сначала проверяют свои локальные кэши на наличие записи о недавно разрешенном доменном имени. Если запись найдена и не истекла, используется закэшированный IP-адрес.

2. Запрос к DNS-серверу: Если локальный кэш не содержит нужной записи, запрос отправляется к DNS-серверу вашего интернет-провайдера (ISP) или другого конфигурируемого DNS-сервера (например, Google Public DNS).

3. Рекурсивный запрос:
- DNS-сервер провайдера может выполнять рекурсивный запрос, запрашивая информацию у других DNS-серверов, если он сам не знает ответа. Этот процесс включает несколько шагов:
- Запрос к корневому DNS-серверу.
- Корневой сервер направляет к DNS-серверу верхнего уровня домена (TLD, например, .com, .org).
- Сервер верхнего уровня направляет к авторитетному DNS-серверу конкретного домена.

4. Авторитетные DNS-серверы:
Авторитетный DNS-сервер для домена (например, example.com) содержит окончательную информацию об IP-адресе для запрашиваемого доменного имени и возвращает её DNS-серверу провайдера.

5. Ответ клиенту:
DNS-сервер провайдера кэширует полученный IP-адрес и отправляет его обратно клиенту (вашему браузеру или операционной системе).

6. Доступ к ресурсу:
Клиент использует полученный IP-адрес для установления соединения с нужным сервером и получения запрашиваемых данных.

Допустим, вы вводите в браузере www.example.com:
- Браузер проверяет локальный DNS-кэш.
- Если записи нет, браузер отправляет запрос на DNS-сервер провайдера.
- DNS-сервер провайдера выполняет рекурсивный запрос:
- Запрашивает корневой DNS-сервер.
- Корневой сервер направляет к серверу TLD .com.
- Сервер TLD направляет к авторитетному DNS-серверу example.com.
- Авторитетный DNS-сервер example.com возвращает IP-адрес, например, 93.184.216.34.
- DNS-сервер провайдера кэширует этот IP-адрес и возвращает его браузеру.
- Браузер устанавливает соединение с сервером по IP-адресу 93.184.216.34 и загружает страницу.

👉 @frontendInterview
👍74🔥2