Это видео представляет собой структурированный разбор ключевых тем JavaScript, необходимых для успешного прохождения технического собеседования. Формат сочетает теоретические вопросы с практическим решением задач.
Тут собраны все темы по JavaScript:
- Основы языка: переменные, типы данных, операторы
- Функции: объявление, hoisting, замыкания
- Работа с объектами и массивами
- Контекст выполнения и this
- Асинхронность: колбэки, промисы, async/await
- ООП в JavaScript
- Современные возможности ES6+
- Классы и прототипы
- Работа с DOM и событиями
Практическая часть включает разбор 70 задач разного уровня сложности, включая:
- Алгоритмические задачи
- Задачи на понимание работы JS
- Реальные кейсы из собеседований
Включай это видео в поездке на работу, учебу, во время утренней пробежки, или занятия спортом.
ПС: Очень грамотные ответы на вопросы и поставленная речь. Глубокие и полные ответы Дениса, отличные рассуждения. Советую посмотреть видео и учиться отвечать так же
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#javascript #собеседование
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥40👍8💯2❤1🤝1
🤯 Подборка сложных вопросов с собеседований
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 для всех относительных ссылок на странице.
5. Как в runtime проверить поддержку CSS-свойства?
Альтернатива: @supports в CSS.
6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.
7. Как определить системную тему (dark/light)?
В JS:
В CSS:
8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).
9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.
Вывод: так писать нельзя, только padding: 1.5px.
10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
Без as const тип будет number[].
11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:
Импорт типа (TypeScript 4.5+):
Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).
#собеседования #react #javascript #typescript
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
👍20🔥5❤2
DOM — это представление HTML-документа в виде дерева объектов, с которым можно работать через JavaScript. В этом видео мы рассмотрим, что такое Document object model и как браузер создает DOM при загрузке страницы. Без DOM in javascript веб-страницы были бы статичны, а с его помощью мы можем динамически изменять контент.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥14❤4😁2
👨💻 План развития Frontend Разработчика (Часть 2)
JavaScript — это база, это фундамент фронтенда. Именно он вызывает больше всего сложностей у новичков, и именно по нему 80% вопросов на собеседованиях.
Изучать JavaScript нужно с разных сторон. Окружайте себя им: смотрите видео на YouTube, решайте задачи на CodeWars и LeetCode, учите вопросы собеседований и просто разбирайтесь в теории.
Эта технология может вам не даваться с первого раза, но главное — не сдаваться. Подходите к обучению по-разному, пробуйте новые форматы.
Когда я учил JavaScript, я потратил на это около трёх месяцев и за это время:
→ просмотрел 5 видеокурсов (каждый от 5 до 11 часов);
→ прошёл 3 курса на платформах с тренажёрами;
→ читал книги;
→ параллельно решал задачи на CodeWars.
→ практиковался с DOM API
Если не понимаете — смотрите 1, 2, 3 курса, пробуйте разные форматы, изучайте объяснения разных авторов. Ваша задача — подготовить мозг, создать нейронные связи, адаптировать себя к восприятию информации.
Банально: посмотрели один курс — поняли 5%. Не страшно. Смотрите следующий — уже 10%. Каждое новое видео, курс или книга раскроют вам одну и ту же тему по-новому. Всё просто: главное — не лениться и регулярно делать шаги к цели. Просто садимся за компьютер и включаем курс.
Технически, в курсе на 7 часов можно услышать 80% всего JavaScript. Но на практике всё сложнее — мозгу нужно время, чтобы привыкнуть, чтобы информация уложилась. Регулярность — ключ к успеху! Если остановитесь — будет откат назад.
Это как картинка с шахтёром, который развернулся в метре от клада. Главное — не разворачиваться!
🖥 JavaScript (2-4 месяца)
→ JavaScript - Полный Курс JavaScript Для Начинающих
https://www.youtube.com/watch?v=CxgOKJh4zWE
→ Неплохой курс на Степике
https://stepik.org/course/180784/promo
→ Doka, почитывайте переодически
https://doka.guide/js/
→ Основы JavaScript
https://ru.hexlet.io/courses/js-basics
→ JavaScript DOM с 0 до Профи. Полный курс + Практика
https://youtu.be/6wJoaiK3NxI?si=DKrRFVo_VjXMnjfj
→ Делаем календарь на JavaScript
https://youtu.be/HmZ7j0WtjdU?si=DfuFFlW7yHp26Crg
→ Пишем простые часы на JavaScript
https://youtu.be/FMgbaVz-TZ4?si=JaRSfWMv3Nj_Yfw8
→ Плейлист из 10 проектов
https://www.youtube.com/playlist?list=PLqp5ZRS9tv4QDOXnn6zGtl1R5LfPDMvz4
→ ВЕСЬ JavaScript в одном собеседовании. 200 вопросов + 70 задач за 2 часа
https://youtu.be/A2P3Gn2_gSY?si=1QlhgaAFxMrPOA6D
→ 5 главных правил THIS
https://youtu.be/VOtZ4ghy3ik?si=1E0XfSUhd8iovyIE
→ Разбор задач по Event Loop
https://youtu.be/QQg5wOloZDI?si=NVYpx07mWH5f0QA4
→ Плейлист 72 задачи по JS
https://www.youtube.com/playlist?list=PLEhUqRdnYdykSMw9irD8yJ7q5GSVvQLL0
А также вводите себе в привычку решать задачи на Codewars или, лучше, на Leetcode. Ничего страшного, если не получается решить самостоятельно — просто продолжайте пытаться и разбирать правильные решения.
После изучения DOM API нужно самостоятельно сделать 1-2 проекта: найти макет, API и реализовать всё самому. Перед тем как изучать React, важно хорошо освоить базу, иначе будете "плыть".
С самого начала параллельно с изучением технологий готовься к собеседованиям. Каждый раз после освоения новой темы закрепляй теорию — проходи вопросы в тренажере🚀 YeaHub.
#javascript #курсы #гайд
JavaScript — это база, это фундамент фронтенда. Именно он вызывает больше всего сложностей у новичков, и именно по нему 80% вопросов на собеседованиях.
Изучать JavaScript нужно с разных сторон. Окружайте себя им: смотрите видео на YouTube, решайте задачи на CodeWars и LeetCode, учите вопросы собеседований и просто разбирайтесь в теории.
Эта технология может вам не даваться с первого раза, но главное — не сдаваться. Подходите к обучению по-разному, пробуйте новые форматы.
Когда я учил JavaScript, я потратил на это около трёх месяцев и за это время:
→ просмотрел 5 видеокурсов (каждый от 5 до 11 часов);
→ прошёл 3 курса на платформах с тренажёрами;
→ читал книги;
→ параллельно решал задачи на CodeWars.
→ практиковался с DOM API
Если не понимаете — смотрите 1, 2, 3 курса, пробуйте разные форматы, изучайте объяснения разных авторов. Ваша задача — подготовить мозг, создать нейронные связи, адаптировать себя к восприятию информации.
Банально: посмотрели один курс — поняли 5%. Не страшно. Смотрите следующий — уже 10%. Каждое новое видео, курс или книга раскроют вам одну и ту же тему по-новому. Всё просто: главное — не лениться и регулярно делать шаги к цели. Просто садимся за компьютер и включаем курс.
Технически, в курсе на 7 часов можно услышать 80% всего JavaScript. Но на практике всё сложнее — мозгу нужно время, чтобы привыкнуть, чтобы информация уложилась. Регулярность — ключ к успеху! Если остановитесь — будет откат назад.
Это как картинка с шахтёром, который развернулся в метре от клада. Главное — не разворачиваться!
→ JavaScript - Полный Курс JavaScript Для Начинающих
https://www.youtube.com/watch?v=CxgOKJh4zWE
→ Неплохой курс на Степике
https://stepik.org/course/180784/promo
→ Doka, почитывайте переодически
https://doka.guide/js/
→ Основы JavaScript
https://ru.hexlet.io/courses/js-basics
→ JavaScript DOM с 0 до Профи. Полный курс + Практика
https://youtu.be/6wJoaiK3NxI?si=DKrRFVo_VjXMnjfj
→ Делаем календарь на JavaScript
https://youtu.be/HmZ7j0WtjdU?si=DfuFFlW7yHp26Crg
→ Пишем простые часы на JavaScript
https://youtu.be/FMgbaVz-TZ4?si=JaRSfWMv3Nj_Yfw8
→ Плейлист из 10 проектов
https://www.youtube.com/playlist?list=PLqp5ZRS9tv4QDOXnn6zGtl1R5LfPDMvz4
→ ВЕСЬ JavaScript в одном собеседовании. 200 вопросов + 70 задач за 2 часа
https://youtu.be/A2P3Gn2_gSY?si=1QlhgaAFxMrPOA6D
→ 5 главных правил THIS
https://youtu.be/VOtZ4ghy3ik?si=1E0XfSUhd8iovyIE
→ Разбор задач по Event Loop
https://youtu.be/QQg5wOloZDI?si=NVYpx07mWH5f0QA4
→ Плейлист 72 задачи по JS
https://www.youtube.com/playlist?list=PLEhUqRdnYdykSMw9irD8yJ7q5GSVvQLL0
А также вводите себе в привычку решать задачи на Codewars или, лучше, на Leetcode. Ничего страшного, если не получается решить самостоятельно — просто продолжайте пытаться и разбирать правильные решения.
После изучения DOM API нужно самостоятельно сделать 1-2 проекта: найти макет, API и реализовать всё самому. Перед тем как изучать React, важно хорошо освоить базу, иначе будете "плыть".
С самого начала параллельно с изучением технологий готовься к собеседованиям. Каждый раз после освоения новой темы закрепляй теорию — проходи вопросы в тренажере
#javascript #курсы #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20🔥10👍4🫡3