Frontend Interview - собеседования по Javascript / Html / Css

👉 @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

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

JavaScript с нуля

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

👉 @frontendInterview

​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

Что-то на супержизненном?

👉 @frontendInterview

Борьба с перерендерами в React

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

👉 @frontendInterview

​Как подключить 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

👉 @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

Greatest common divisor

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

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

👉 @frontendInterview

JavaScript from Frontend to Backend: Learn full stack JavaScript development using the MEVN stack with quick and easy steps

Книга начинается с основ переменных и объектов в JavaScript, а затем быстро переходит к созданию компонентов на стороне клиента с помощью Vue.js и простого приложения для управления списками. После этого внимание переключается на серверную сторону и Node.js, где вы рассмотрите модель MVC и изучите модуль Express. После того как вы освоите серверную и клиентскую части, останется только база данных. Вы познакомитесь с MongoDB и модулем Mongoose. В последней главе этого быстрого руководства вы объедините все эти части, чтобы интегрировать приложение Vue.js в сервер Node.js, используя Express для структурирования серверного кода и MongoDB для хранения информации.

👉 @frontendInterview

​Что такое amp страницы?

AMP (Accelerated Mobile Pages) — это технология от Google, которая позволяет создавать очень быстрые и легкие веб-страницы для мобильных устройств. AMP-страницы загружаются почти мгновенно, потому что:
Используют оптимизированный HTML (AMP HTML)
Ограничивают использование JavaScript
Подключают Google AMP Cache для мгновенной загрузки

Зачем нужны AMP?
- Ускоряют загрузку страниц → полезно для мобильных пользователей
- Улучшают SEO → Google любит быстрые сайты
- Увеличивают CTR → в поиске AMP-страницы помечены ⚡️ и привлекают внимание
- Снижают нагрузку на сервер

Как создать AMP-страницу?
AMP-страница – это обычный HTML, но с ограничениями и своими тегами.

<!DOCTYPE html>
<html ⚡️ lang="ru">
<head>
  <meta charset="UTF-8">
  <title>AMP Страница</title>
  <link rel="canonical" href="https://example.com/normal-page.html">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-boilerplate>
    body { visibility: hidden; }
  </style>
  <noscript>
    <style amp-boilerplate>
      body { visibility: visible; }
    </style>
  </noscript>
</head>
<body>
  <h1>Привет, это AMP!</h1>
  <amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>

👉 @frontendInterview

Когда исправляешь опечатку в комменте в большом пулл-реквесте:

👉 @frontendInterview

Моем Код с Мылом

Эта статья – краткий обзор первой половины книги Чистый код.
Разберём ключевые принципы именования переменных, проектирования функций и других аспектов, чтобы писать код, который будет понятен вам и вашей команде спустя годы.

Основные тезисы:
- Думайте над именами
- Не делайте код слишком чистым
- Следуйте стандартам языка или вашей команды
- Программист не должен заниматься форматированием

👉 @frontendInterview