Мурыч написал под последним видео на YouTube. Кому интересно — зайдите в комментарии, он привёл 3 ответа по спецификации JS

JavaScript: Основы и теория
00:00:00 – Введение: теория и практика JavaScript.
00:00:49 – Способы создания переменных: let, var, const.
00:02:13 – Hoisting (поднятие) и типы данных.
00:03:20 – Примитивные типы данных и NaN.
00:05:40 – Подготовка к собеседованиям с платформой ehab.

Операторы и преобразование типов
00:07:33 – Унарные и бинарные операторы.
00:09:50 – Тернарные операторы и преобразование типов.
00:11:57 – Операторы сравнения и строгое равенство (===).
00:13:43 – Оператор switch как альтернатива if-else.

Функции и замыкания
00:23:06 – Типы функций в JavaScript.
00:26:58 – Стрелочные функции vs обычные функции.
00:27:58 – Замыкания и их применение.

Работа с числами и строками
00:30:11 – Округление чисел (round, floor, ceil).
00:32:57 – Методы строк (toLowerCase, slice, substring).
00:34:32 – Проверка подстроки (includes, регулярные выражения).

Массивы и объекты
00:44:46 – Объекты: хранение и ссылки.
00:46:36 – Клонирование объектов (поверхностное и глубокое).
00:55:05 – Методы массивов (push, pop, map, filter).

Асинхронность и промисы
01:45:12 – Промисы и их состояния (pending, resolved, rejected).
01:48:02 – Методы промисов (all, race, resolve).
01:50:51 – Работа с fetch и запросами.

ООП и прототипы
01:59:20 – Классы и наследование.
02:00:44 – Ключевое слово super и защищенные свойства.
02:02:00 – Создание функции-конструктора Animal.

DOM и события
02:04:24 – Поиск элементов в DOM.
02:07:59 – Фазы событий (захват, цель, всплытие).
02:09:17 – Пользовательские события.

Хранилища и прокси
02:10:28 – localStorage, sessionStorage, cookies.
02:13:03 – MutationObserver для отслеживания изменений DOM.

https://youtu.be/A2P3Gn2_gSY?si=iednvaJ0O502SI-H

Странно, что это видео набирает так мало просмотров. Подходы, которые в нём разбираются, действительно помогают моим ученикам трудоустраиваться. При этом там не просто шаблонные советы вроде «Так не говори, а так говори». Мы детально разбираем каждый вопрос, объясняем, как к нему подготовиться.

Лучшего гайда по усилению опыта для фронтенд-разработчика просто не найти. Советую всё-таки посмотреть — решил выпустить годный контент для ребят, потому что знаю ситуацию на рынке: компании сейчас очень избирательны и выбирают кандидатов именно по опыту.

00:00 - Разбор ключевых вопросов с собеседований и примеры ответов.
00:58 - Как презентовать свой опыт, особенно из стартапов и маленьких компаний.
01:45 - Важность командных процессов (канбан, ретро) и проверка знаний на собеседовании.
02:41 - Как добавить в резюме технологии, даже если не использовал их в проекте.
04:49 - Почему важно разбираться в инфраструктуре и как изучить базовые практики.
08:21 - Настройка CI/CD
09:51 - Пример слабого ответа. Почему ответ "тимлид делал, я не вникал" — провал.
10:51 - Пример сильного ответа. Как описать CI/CD, Docker, Git Flow и решение проблем с кэшированием.
14:19 - Ergostol
15:39 - Вопрос о сложной задаче. Три метода усилить простую задачу (масштаб, заимствование, гибрид).
19:43 - Плохой ответ о сложной задаче. Почему модальное окно — слабый пример.
20:56 - Идеальный ответ о сложной задаче. Пример: разработка конструктора отчетов с оптимизацией и интеграцией.
23:39 - Профессиональные фишки. Как упоминание метрик и бизнес-ценности усиливает ответ.
24:19 - Работа в команде. Зачем знать методологии (Scrum, Kanban) и инструменты (Jira, Figma).
28:59 - Плохой ответ о процессах. Хаотичная работа без документации — красный флаг.
30:16 - Хороший ответ о процессах. Пример работы по Scrum с Jira и Confluence.
32:46 - Взаимодействие с командой. Как общаться с тестировщиками, дизайнерами и бэкендерами.
37:03 - Пример хорошего взаимодействия. Совместные сессии, чек-листы и решение багов.
41:45 - Структура задач и баги. Как описывать баги и пользовательские сценарии в Jira.
43:56 - Важность командного подхода. Почему бизнес оценивает кандидатов по проектам, а не личным навыкам.
44:54 - Масштабирование проектов. Как превратить интернет-магазин в "экосистему для 50+ точек".
50:30 - Полноценный стек технологий. Зачем добавлять в описание TypeScript и state-менеджеры, даже если не использовал.
54:44 - Плохой ответ о проекте. Почему "магазин мебели на React" — слабая история.
55:51 - Идеальный ответ о проекте. Пример: платформа для цифровизации ритейла с AI и микрофронтендами.
59:33 - Развитие специалистов. Как прокачивать навыки вне работы и расти в карьере.

https://youtu.be/WemHjWFjh3o?si=sXpG5h8HSqn2hZ9w

🤯 Подборка сложных вопросов с собеседований

1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.

CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.

2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.

3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).

4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.

<base href="https://example.com/assets/">
<img src="logo.png"> <!-- Загрузится https://example.com/assets/logo.png -->

5. Как в runtime проверить поддержку CSS-свойства?

if (CSS.supports('display', 'grid')) {  
  console.log('Grid поддерживается!');  
} 

Альтернатива: @supports в CSS.

6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.

7. Как определить системную тему (dark/light)?
В JS:

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;  

// Следить за изменением темы  
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {  
  console.log(e.matches ? 'Тёмная тема' : 'Светлая тема');  
});  

В CSS:

@media (prefers-color-scheme: dark) {  
  body { background: #000; color: #fff; }  
}  

8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).

.container { container-type: inline-size; }  

@container (max-width: 500px) {  
  .card { flex-direction: column; }  
}  

9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.

Вывод: так писать нельзя, только padding: 1.5px.

10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?

const arr = [1, 2, 3] as const;  // Делаем кортеж  
type T = typeof arr[number];     // 1 | 2 | 3  

Без as const тип будет number[].

11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:

import { ReactNode } from 'react';  // Может попасть в бандл.  

Импорт типа (TypeScript 4.5+):

import { type ReactNode } from 'react';  // Удаляется при компиляции.  

Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).

#собеседования #react #javascript #typescript

Я запускаю цикл из 6+ постов для знакомства.
В них я расскажу:
- Как учился,
- Как искал работу,
- Как работал в британской компании,
- Как работал в международной компании, продуктами и сервисами которой пользуются Apple, IBM, Microsoft, Nike и другие крупные корпорации.
- Также поделюсь историями о своих сложных проектах и расскажу, чем занимаюсь сейчас.

Надеюсь, вам будет интересно! И кого-то они замотивируют

Я писал эти посты две недели: искал архивные фото (ещё с 2020 года), материалы о проектах, над которыми работал, и другие детали.😁