Поиск
Поиск
Поиск
Light mode
Dark mode
Навигация
0000 Навигация
000 other themes
SoftSkills
Кто такой стейкхолдер (stakeholder)? Расскажите о матрице RACI?
Плюсы CICD
Почему критерии DoD и DoR важны для проекта?
Разница между DoD и DoR
Разница между POC, Prototype и MVP
Разница между менторингом и коучингом?
Что такое Agile?
Что такое CICD?
Что такое SDLC?
Что такое код ревью?
Что такое технический долг?
Что такое функциональные и нефункциональные требования?
001 Review - WebCore
002 Review - JSCore
003 Review - ReactCore
004 Review - FinalBoss
001 Frontend
001 HTML5
002 CSS3
003 JavaScript
004 React19
004 State Managers
005 TypeScript
006 Next.js
007 Jest, React Testing Library
008 Настройка окружения
010 Архитектура Веб-приложений
011 Решение задач: JS, TS и React
002 Backend
002 Node.js
100 Git
200 Браузерное окружение
300 Паттерны
001 Frontend
001 HTML
100 Подготовка к собеседованию
Что такое абсолютная и относительная ссылка?
Что такое режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)?
HTML, XHTML и XML и их отличия?
В каких случаях лучше использовать `canvas`s, а в каких `svg`?
Для какого тэга используется атрибут `alt` и зачем он нужен?
Для чего используется атрибут `aria-roledescription`?
Для чего используется атрибут `decoding`?
Для чего используется атрибут `enterkeyhint`?
Для чего используется атрибут `pattern`?
Для чего используется тэг `label`?
Для чего используется элемент `datalist`?
Для чего используется элемент `picture`?
Для чего используют `data-`атрибуты?
Для чего используют атрибут `inputmode`?
Для чего используют атрибут `novalidate`?
Для чего используются тэги `sub` и `sup`?
Для чего используются тэги `tr`, `th`, `td`?
Для чего нужен атрибут `autocomplete`?
Если представить HTML5 как открытую веб-платформу, из каких блоков он состоит?
Есть ли у HTML элементов свои дефолтные специфичные стили?
Знаете ли вы тег dfn и за что он отвечает?
Как можно изменить форму картинки или HTML элемента?
Как можно сгруппировать опции внутри тэга `select`?
Как можно скрыть элемент разметки не используя CSS и JS?
Как определить якорную ссылку внутри html-документа?
Как семантически верно сверстать кастомный чекбокс?
Как семантически верно сверстать навигационное меню?
Как семантически правильно сверстать картинку с подписью?
Как скрыть содержимое тэга от скринридеров?
Как следует оформлять страницу, содержимое которой может быть на разных языках?
Как удалить семантику у элемента?
Какая принципиальная разница между тегами q и blockquote?
Какая разница между тэгами `strong, em` и `b и i`?
Какая разница между элементами span и div?
Какие HTML атрибуты можно использовать для улучшения доступности?
Какие глобальные атрибуты есть в HTML?
Какие есть способы вставить SVG на страницу?
Какие категории считаются основными категориями контента?
Какие стандарты доступности следует учитывать при разработке?
Какой метод запускает проигрывание аудио-файла?
Какой тэг использовать для того, что бы сверстать кнопку?
Какой формат видео файлов сейчас поддерживается html5?
Могут ли возникнуть проблемы при подаче страниц с типом application xhtml+xml?
Можете ли вы описать некоторые методы SEO, которые вы использовали в последнее время?
Можете ли вы описать разницу между прогрессивным улучшением (progressive enhancement) и изящной деградацией (graceful degradation)?
Можно ли вложить p в другой такой же p? Можно ли вложить div в p?
На какие события video или audio можно подписаться?
На что необходимо обратить внимание при разработке мультиязычных сайтов?
Назовите средства и методы тестирования доступности?
Объясните разницу между cookies, sessionStorage и localStorage?
Объясните, что такое ARIA и скринридеры, а также как сделать сайт доступным?
Опишите базовую структуру HTML-страницы
Основные принципы доступности
Основные этапы проверок валидности HTML-документа?
Плюсы и минусы `canvas` и `svg`?
Почему стоит использовать семантические теги в верстке?
Почему удаление лишних символов пробелов (и символов переноса) в HTML не отражается на конечной производительности загрузки страницы?
Почему хорошей практикой считается располагать `link` для подключения CSS стилей внутри тэга `head`, а `script` для подключения JS ставить перед закрывающимся тэгом `body`?
Разница между `canvas` и `svg`?
Разница между `meter` и `progress`?
Разница между `script`, `script async` и `script defer`?
Разница между usability и accessibility?
Разница между кнопкой и ссылкой в HTML?
Расскажите о meta-теге с `name viewport`?
Расскажите об особенностях стилизации `svg`?
Типы `input` элементов в HTML
Типы списков в HTML?
Уровни доступности
Чем отличается `article` от `section`?
Что нужно учитывать при разработке доступного сайта?
Что описывается в тэге `head`?
Что такое `ARIA` роли в веб приложении?
Что такое `iframe`?
Что такое `srcset`? Как работает `srcset`?
Что такое `svg` и `canvas`?
Что такое ApplicationCache в HTML5?
Что такое DOCTYPE и для чего он используется? Сколько разновидностей вы можете назвать?
Что такое HTML и для чего он используется?
Что такое Secure (безопасные) и HttpOnly cookies?
Что такое shadow-root в инспекторе HTML-страницы?
Что такое WCAG?
Что такое атрибут `target`? Какие значения он принимает?
Что такое валидация? И какие типы проверок HTML документа вы знаете?
Что такое гиперссылка?
Что такое инлайновый стиль? Можно ли его переопределить?
Что такое категории контента в HTML5?
Что такое кроссбраузерность?
Что такое ленивая загрузка (lazyloading)?
Что такое мета-тэги?
Что такое прогрессивный рендеринг?
Что такое свойство `valueAsNumber`?
Что такое семантика? Какие семантичные тэги вы знаете?
Что такое скринридер?
Что такое элемент `canvas`? И для чего он используется?
Что такое элемент `output` в HTML5?
200 Курсы
Overview
000 Вопросы к ревью
WebCore2
WebCore3
WebCore4
001 Основы HTML & CSS
Единицы измерения. px, em, rem и другие
Как проверить валидность html-разметки
Язык HTML
002 Семантическая разметка
Подробнее о чекбоксах
Семантическая разметка
Список тэгов разметки
Таблицы
Форма
Чекбоксы, стилизация чекбоксов
Что такое PLACEHOLDER?
003 SEO. Доступность
Адаптивный дизайн сайта
Блочная модель документа
Блочная модель документа 2 - Сетки
Доступность
Используйте вендорные префиксы
Особенности кроссбраузерной вёрстки
Термины по БЭМ. Блок, элемент, модификатор, микс
002 CSS
100 Подготовка к собеседованию
CSS-modules и styled-components
Блочная модель CSS
В каком случае лучше использовать `translate()` вместо абсолютного позиционирования?
В чём разница box-sizing content-box от border-box?
Варианты добавление CSS стилей на страницу
Глобальные ключевые слова в CSS
Для чего используется ключевое слово `currentColor` в CSS?
Для чего используется псевдокласс `invalid`?
Единицы измерений vh, vw, vd (viewport width, viewport height, viewport dynamic)
Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?
Как Вы обеспечиваете отображение страниц в старых и ограниченных браузерах
Как добавить шрифт в веб-приложение?
Как исправлять специфичные проблемы со стилями для разных браузеров?
Как можно гибко изменять размеры flex элементов?
Как оптимизировать страницы для печати?
Как отследить прогресс и окончание CSS @keyframes анимаций или плавных переходов, реализованных с помощью transition, в JS?
Как поддерживать страницы в браузерах с ограниченными функциями
Как разместить блок по центру экрана?
Как с помощью CSS определить, поддерживается ли свойство в браузере?
Какие CSS-препроцессоры вы знаете? Преимущества их использования?
Какие CSS-свойства используются для создания анимаций и плавных переходов?
Какие CSS-свойства могут быть обработаны непосредственно через GPU?
Какие вы знаете методы запрета обтекания clearing и в каких случаях они применяются?
Какие еще методологии верстки вы знаете?
Какие псевдоклассы были добавлены в CSS3?
Какие фильтры есть в CSS?
Какими CSS-фреймворками вы пользовались? Что бы вы хотели в них изменить улучшить?
Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера)?
Какое правило flexbox задает вывод flex items в одну строку или в несколько строк?
Какое свойство flexbox отвечает за направление flex items?
Можете ли вы объяснить разницу между отзывчивым (responsive) сайтом и сайтом, сделанным по принципу mobile-first?
Можете ли вы привести пример свойства media, отличного от screen?
Можно ли использовать CSS grid и flexbox вместе?
Назовите псевдоэлементы для подсветки текста
Объясните разницу между единицами измерения px, em, rem?
Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
Плюсы и минусы методологии БЭМ
Порядок наложения элементов в CSS (Stacking Order)
Почему не стоит использовать краткую запись свойств CSS?
Принципы и подходы для обеспечения масштабируемости и поддерживаемости CSS-кода
Приходилось ли вам использовать или реализовывать медиазапросы или вёрстку под мобильные устройства?
Разница между `display none` и `visibility hidden`
Разница между `margin` и `padding`
Разница между Reset.css и Normalize.css
Разница между блочным и строчным (инлайновым) элементами
Разница между классом и идентификатором в CSS
Расскажите о свойстве `outline`
Расскажите о свойстве `pointer-events`
Расскажите о свойстве `scrollbar-gutter`
Расскажите о свойстве `text-decoration-skip-ink`
Расскажите о свойстве `text-rendering`
Расскажите про flex-grow, flex-shrink, flex-basis
Расскажите про свойство `display` в CSS
Расскажите про свойство `position` в CSS
Растровая и векторная графика
Свойство background-size
Свойство overflow
Сокращённое свойство flex
Способы задания цвета в CSS
Типы позиционирования в CSS
Чем отличается opacity 0 от opacity 0.00001?
Через какие директивы реализуется респонзив?
Что означает сокращение flex-flow?
Что такое `z-index`? Как формируется контекст наложения?
Что такое CSS Grid?
Что такое CSS препроцессор?
Что такое CSS спрайт? И для чего он используется?
Что такое CSS-атрибут (`attr`)?
Что такое CSS-правило?
Что такое CSS? И для чего он используется?
Что такое flexbox?
Что такое вендорные префиксы? И для чего они используются?
Что такое перечисление селекторов?
Что такое плавающие элементы (floats)? Как они работают?
Что такое поток документа?
Что такое псевдоэлементы? И для чего они используются?
Что такое селектор? И какие селекторы существуют?
Что такое специфичность селектора? Как считать вес селектора?
Что такое схлопывание границ (margin collapsing)?
200 Курсы
Overview
001 Что такое CSS
Наследование и каскадирование CSS
Язык CSS
002 CSS-свойства
CSS-свойства оформления текста
inline-block. Основные отличия от float
Анимации
Градиенты
Двумерные трансформации
Игра теней
О теории цвета
Позиционирование
Почему перемещать элементы с помощью `translate` лучше, чем с `position: absolute`
Различия форматов изображений, особенности SVG
Свойство box-sizing: border-box
Свойство float и inline-block (верстка флоатами и inline-block - их проблемы и способы решения)
Свойство float. Проблемы и их решения
Фоны
Форматы изображений
003 CSS-правила
@font-face -- Подключение шрифтов
@media -- адаптация сайта под экран
004 Псевдоклассы и псевдоэлементы
Виды селекторов
Комбинаторы
Отличие first-of-type от first-child
Псевдоклассы
Псевдоэлементы
Расчёт специфичности селекторов
005 Технологии CSS Flexbox & CSS Grid
flex-basis, flex-wrap, flex-shrink, flex-grow
Анатомия flexbox
Гриды
Отличия между CSS Grid и CSS Flexbox
400 Заметки
TailwindCSS
003 JSCore
100 Подготовка к собеседованию
Cпособы создания функции? Что такое анонимная самовызывающаяся функция?
Promise.all, Promise.allSettled, Promise.any, Promise.race
setTimeout и setInterval
В чем заключаются особенности геттеров и сеттеров?
В чём отличие оператора нулевого слияния ИЛИ?
В чём разница между var, let и const?
В чём разница между стрелочными и обычными функциями?
Виды событий в JavaScript
Где исполняются асинхронные функции?
Где хранятся методы и свойства объявленные в конструкторе и за конструктором, но внутри класса?
Для чего используется метод `.focus()`?
Для чего используется метод `.fromEntries()`?
Для чего используется метод `.getOwnPropertyDescriptors()`?
Для чего используется метод `.includes()`?
Для чего используется метод `.replaceAll()`?
Для чего используется метод `.scrollIntoView()`?
Для чего используется оператор двойного отрицания (`!!`)?
Для чего используется оператор остатка (`%`)?
Для чего используется свойство `.dataset`?
Для чего используется свойство `.forms`?
Для чего используется свойство `window.navigator`
Для чего используется цикл `for…of`?
Для чего используются метод `Object.seal()`?
Для чего используются методы `.flat()` и `.flatMap()`?
Для чего используются методы `.padStart()` и `.padEnd()`?
Для чего используются методы `.startsWith()` и `.endsWith()`?
Для чего применяется метод `Array.from()`?
Как в JavaScript создать объект?
Как в JavaScript удалять пробельные символы в начале и в конце строки?
Как выполнить несколько асинхронных операций последовательно?
Как динамически добавить элемент на HTML-страницу?
Как добавить обработчик события на DOM-элемент?
Как задавать значения в функции по умолчанию?
Как использовать media выражения в JavaScript?
Как обрабатывать ошибки в async и await?
Как обрабатывать ошибки в промисах?
Как осуществить перебор элементов в коллекциях `Map` и `Set`?
Как отлавливать и обрабатывать ошибки try-catch?
Как передаются параметры в функцию - по ссылке или по значению?
Как поверхностно скопировать объект?
Как превратить любой тип данных в булевый?
Как преобразовать список пар ключ-значение в объект?
Как проверить наличия свойства у объекта? Как отличить отсутствующее свойство от свойства со значением undefined?
Как проверить переменную на существование? Что будет если вызвать typeof у неинициализированной переменной?
Как проверить, является ли значение массивом?
Как работает «сборщик мусора» в JavaScript?
Как работает boxing и unboxing в JavaScript?
Как работает instanceof?
Как работает контекст выполнения (execution context) в JavaScript?
Как работает метод `Object.create()`?
Как работает механизм прототипов в JavaScript?
Как работают методы `.find()`, `.findIndex()` и `.indexOf()`?
Как сгенерировать случайное число в JavaScript?
Как сделать глубокое копирование объекта?
Как сделать проброс исключения? Куда попадает ошибка и как с ней работать дальше?
Как увеличить читаемость больших чисел?
Как удалить обработчик события с DOM-элемента?
Как узнать об использовании метода `event.preventDefault()`
Как установить прототип объекту? Можно ли замыкать цепочку прототипов (объект А ссылается на В, а В ссылается на А)?
Как хранятся числа?
Какие есть ограничения у `window.close()`?
Какие есть типы данных в JavaScript?
Какие методы используются в регулярных выражениях?
Какие ошибки бывают и что означают? Логические ошибки останавливают работы скрипта?
Какие проблемы может вызвать неправильное использование асинхронности в JavaScript?
Каким образом можно обмениваться кодом между файлами?
Какими способами можно получить доступ к свойству и методу объекта?
Когда определяется this?
Метод Map
Метод Set
Метод для обхода массива. Создаётся новый массив или мутируется текущий? Что будет записано в новый массив?
Метод массива filter()
Методы массивов в JavaScript
Методы поиска элементов в DOM
Методы строк в JavaScript
Многопоточность против асинхронного программирования?
Можно ли изменить значение определённое через `const`?
Можно ли изменять прототип после создания объекта?
Можно ли изменять состояние promise?
Можно ли перебирать свойства объекта?
Можно ли создавать свой объект ошибок error?
Можно ли удалять что-то из объекта?
На что ссылается this внутри функции, вызванной как метод объекта? А что если это стрелочная функция?
Назовите основные методы и свойства работы с коллекцией `Map`?
Назовите основные методы и свойства работы с коллекцией `Set`?
Назовите основные типы утечек памяти в JavaScript?
Операторы «И» и «ИЛИ»
Отладка AJAX
Парадигмы программирования в JavaScript
Плюсы и минусы асинхронного программирования в JavaScript?
Плюсы и минусы иммутабельности
Плюсы и минусы использовании AJAX
Плюсы и минусы использования `use strict`?
Подходы при работе с асинхронным кодом
После filter или map вновь созданный массив будет иметь одинаковую или отличную длину по сравнению со старым массивом
Почему в JS функции называют объектами первого класса?
Почему получаются неточные вычисления?
Почему расширение нативных JavaScript-объектов это плохая практика?
Почему результат сравнения 2х объектов это `false`?
Правила задания имён для переменных и функций в JavaScript
Преимущества использовании промисов вместо колбэков
Проблемы при использовании callback-функций?
Разница между «undefined» и «null»
Разница между `.forEach()` и `.map()`
Разница между `.some()` и `.every()`
Разница между `.stopPropagation()` и `.stopImmediatePropagation()`
Разница между `e.preventDefault()` и `e.stopPropagation()`
Разница между `event.target` и `event.currentTarget`
Разница между `innerHTML` и `outerHTML`
Разница между `JSON` и `XML`
Разница между `Object.freeze()` и `Object.seal()`?
Разница между `Object` и `Map`
Разница между `typeof` и `instanceof`?
Разница между == и === . Строгое и нестрогое равенство
Разница между attribute и property у DOM-элементов
Разница между ES6-классами и конструкторами функций?
Разница между feature detection, feature inference и анализом строки user-agent
Разница между function declaration и function expression?
Разница между host-объектами и нативными объектами
Разница между HTMLCollection и NodeList?
Разница между глубокой (deep) и поверхностной (shallow) копиями объекта? Как сделать каждую из них?
Разница между методами `.push()`, `.pop()`, `.shift()` и `.unshift()`
Разница между методами `.slice()` и `.splice()`
Разница между методами `.submit()` и `.requestSubmit()`
Разница между методом `Object.freeze()` и `const`?
Разница между параметром и аргументом функции?
Разница между примитивом и объектом
Разница между синхронными и асинхронными функциями?
Разница между событиями `load` и `DOMContentLoaded`
Разница между функцией и методом?
Расскажи про наследование классов? Можно ли наследоваться от нескольких классов?
Расскажите о `IntersectionObserver`?
Расскажите о `URLSearchParams`
Расскажите о методах `.keys()`, `.values()`, `.entries()`?
Расскажите об операторе Optional Chaining?
Расскажите про координаты в браузере?
Свойства для перемещения по DOM-дереву
Сколько аргументов принимает `addEventListener`?
Сколько потоков исполнения у JS?
Событийная модель JS ( всплытие события и погружение )
Типы всплывающих окон в JavaScript?
Типы объектов JavaScript
Типы операторов в JavaScript
Типы узлов DOM-дерева?
Типы функций по способности принимать другие функции
Чем отличаются this в стрелочных функциях и в обычных?
Что будет если не обработать исключение?
Что возвращает fetch? Как получить содержимое ответа? Как обрабатывать ошибки?
Что делает bind? Что возвращает bind? Какие параметры есть у bind?
Что делает reduce? Какие аргументы принимает?
Что делает оператор new? Чему будет равен this внутри класса?
Что делают call и apply?
Что означает функции высшего порядка?
Что попадает в блок catch?
Что произойдет при вызове несуществующего свойства у объекта?
Что такое __proto__ ?
Что такое `NaN`? Как определить, что значение равно `NaN`?
Что такое `Set`, `Map`, `WeakMap` и `WeakSet`?
Что такое `раннее связывание` и `позднее связывание`?
Что такое AJAX?
Что такое async и await?
Что такое BOM?
Что такое callback функция? Почему возникает callback hell?
Что такое DOM?
Что такое ECMAScript?
Что такое ES6 модули?
Что такое Eventloop, очередь задач, микрозадача и макрозадача?
Что такое getter и setter?
Что такое IIFE?
Что такое JavaScript?
Что такое JSON? Может ли содержать массив?
Что такое MapWeak и SetWeak?
Что такое Postman?
Что такое promise? Как они решают проблему callback hell?
Что такое rest и spread? В чём их разница? Какой тип данных у rest? Как с помощью spred сделать копию или конкатенацию массива и объекта?
Что такое same-origin policy в контексте JavaScript?
Что такое Strict mode в JavaScript?
Что такое super?
Что такое then? Что передаётся первым аргументом в колбек? Что возвращает then?
Что такое this?
Что такое XMLHttpRequest ?
Что такое асинхронность?
Что такое временная мёртвая зона (temporal dead zone)?
Что такое всплытие hoisting?
Что такое выражения (expression) и инструкции (statement) в JavaScript?
Что такое генераторы?
Что такое делегирование событий (Event Delegation)?
Что такое дескрипторы свойств объектов?
Что такое деструктуризация?
Что такое исключение?
Что такое итераторы?
Что такое каррирование (Currying)?
Что такое класс и для чего он нужен?
Что такое конструктор класса?
Что такое лексическое окружение? Что такое замыкание?
Что такое мемоизация? Реализуйте базовую логику функции для мемоизации?
Что такое метод, что такое свойство объекта?
Что такое необъявленная переменная?
Что такое неявное преобразование типов?
Что такое область видимости?
Что такое объект? Каким типом может быть ключ, а каким значение?
Что такое объектная обертка (Wrapper Objects)?
Что такое оператор логического присваивания?
Что такое оператор нулевого слияния?
Что такое побочный эффект?
Что такое полифил (polyfill)?
Что такое потеря контекста?
Что такое приватные аксессоры?
Что такое прототип (Prototype) объекта?
Что такое прототипное наследование? Как создать объект без прототипа?
Что такое псевдомассив `arguments`?
Что такое распространение события (Event Propagation)?
Что такое регулярное выражение (Regular Expression)?
Что такое рекурсия? Что если будет отсутствовать терминальный случай?
Что такое символ (Symbol) в ES6?
Что такое ссылочный тип данных? Когда происходит передача по ссылке?
Что такое статический метод класса (`static`)? Как осуществляется его вызов?
Что такое утечки памяти?
Что такое хостинг?
Что такое цепочка вызовов функций (chaining)? Как реализовать такой подход?
Что такое цепочка прототипов?
Что такое чистая функция?
Что такое шаблонные литералы (Template Literals)?
Является ли, Drag and drop частью спецификации? Какие drag-события Вам известны?
200 Курсы
Overview
000 Вопросы к ревью JSCore
JavaScript в браузере
JavaScript1. Основные концепции
JavaScript2. Прототипы и классы
JavaScript3. Обработка ошибок и асинхронность
JavaScript4. Browser API + HTTP
001 Введение в JS
Example Title
IIFE
JSDoc
var, let или const
Введение в JS
Виды событий
Всплытие и погружение событий
Глобальный объект
Действия с элементами
Замыкание
Зачем нужен метод preventDefault
Использование data-
Как подключить на страницу несколько скриптов?
Коллекция и свойства элементов
Лексический синтаксис JS
Область видимости
Объект события
Поднятие
Приоритет операторов
Прокрутка и операторы
Событийная модель
Создание, вставка и удаление элементов в JavaScript
Управление памятью. JS101. Сильные и слабые ссылки, FinalizationRegistry
Условия
Условия и создание элементов
002 Основные концепции
001 Примитивные типы данных
Example Title
Template string
В чём разница между var, let и const в JavaScript
Логические операторы
О структуре кода
Операторы сравнения
Переменные
Преобразование объектов в примитивы
Преобразование типов
Регулярные выражения. Основы
Советы
Строки
Типы данных
Требования к стилю кода
Устаревшее ключевое слово var
Числа
002 Ссылочные типы данных
Методы массивов
Объекты
Подробнее про методы массивов
Тернарный оператор и конструкция SwitchCase
Условные операторы
Флаги и дескрипторы свойств
Функции
Хранение по ссылке и по значению
Циклы
003 Продвинутая работа с функциями
Замыкания и области видимости
Метод объекта this
Подробнее про рекурсию
Рекурсия
Функции высшего порядка
004 Функции перебора массивов и стрелочные функции
Стрелочные функции
Функции высшего порядка. Перебирающие методы массивов
003 Прототипы и классы
001 Объекты
Вложенные обьекты
Дата и время
Деструктуризация
Методы map и set
Методы объектов
Остаточные параметры и оператор расширения
002 Прототипы и классы
Декораторы и переадресация вызова, сall и apply
Ещё немного о this
Класс. базовый синтаксис
Конструкторы, создание объектов через new
Контекст (this) в JS
Методы объектов
Методы прототипов, объекты без свойства __proto__
Прототипы, наследования
004 Обработка ошибок и Асинхронность
001 Обработка ошибок
Методы try..catch
Пользовательские ошибки, расширение Error
002 Работа с асинхронным кодом
async... await
Callback
CallBack функции
Promise
Promise. Обработка ошибок
Promises A+
Асинхронщина в JS под капотом
Всё о Promise и об асинхронности
Генерация пользовательских событий
Загрузка ресурсов onload и onerror
Микрозадачи
Объяснение работы EventLoop в JavaScript
Планирование setTimeout и setInterval
Полное понимание синхронного и асинхронного JavaScript с async await
Событийный цикл. Микрозадачи и макрозадачи
Цепочка Promise
005 Browser API + HTTP
001 DOM
DOM-дерево
LocalStorage, sessionStorage
Атрибуты и свойства
Браузерное окружение
Введение в браузерные события
Всплытие и погружение
Делегирование событий
Изменение документа
Методы getElement, querySelector
Навигация по DOM-элементам
Что такое объект Window , BOM и DOM?
002 Сетевое взаимодействие
Ajax. POST
FETCH
XMLHttpRequest
Отладка Ajax
003 HTTP, DNS, REST
Cookie
HTTP простым языком
Postman
REST API
REST простыми словами
RESTful API
Понимание REST
Хостинг
Что на самом деле происходит, когда пользователь вбивает в браузер адрес google.com
Что такое DNS
Что такое HTTP?
006 Стили в JS
Динамические стили элементов
Инклюзивные компоненты - переключатели
Как создавать высокопроизводительные CSS-анимации
Почему некоторые анимации медленные
Таблица стилей. Переопределение и вычисление
1000 Интересные задачи
Квизы на понимание `this`
Хитрый вопрос по JavaScript, который задают на собеседованиях в Google и Amazon
004 ReactCore
100 Подготовка к собеседованию
Actions в React19
AJAX и обращение к API
JSX, условный рендеринг, работа с коллекциями
Preload в React19
React Router и Redux-Router
React и Vue - что лучше и для каких задач?
Redux и MobX - что лучше и для каких задач?
Асинхронное получение данных и вывод в виде динамического списка?
В чем ключевое отличие между React и Angular?
В чем разница между createRef и useRef?
В чем разница между super() и super(props) в React с использованием классов ES6?
Для чего нужен атрибут `key` при рендере списков?
Для чего предназначен метод `registerServiceWorker()` в React?
Зачем нужны eslint и prettier?
Как React обрабатывает, или ограничивает использование пропсов определенного типа?
Как в React реализовать двустороннее связывание данных?
Как вы обновляете объект состояния в React?
Как вы обрабатываете асинхронные действия в React приложении? Назовите отличия axios и fetch
Как вы обрабатываете роутинг на стороне клиента в приложении React?
Как вы получаете доступ к параметрам запроса с помощью React Router?
Как вы создаете кастомные хуки?
Как вы справляетесь с управлением состоянием в большом React приложении?
Как вы укажите React работать в режиме Production и как это сделать?
Как выполнить действие с новым состоянием стейта после setState?
Как добавить React на страницу?
Как отрендерить HTML код в React-компоненте?
Как передавать пропсы в React Router?
Как предотвратить повторный рендеринг в React?
Как привязать методы или обработчики событий в callback() JSX?
Как реализовать однократное выполнение операции при начальном рендеринге?
Как создавать элементы в цикле в React?
Как создать компонент в React?
Как условно применить атрибуты класса?
Какие ломающие изменения произошли в 16 версии?
Какие типы данных может возвращать `render`?
Какие хуки были добавлены в React Router версии 5?
Какова цель использования constructor (super) с аргументом props?
Какую функцию выполняет API use() в React19 ?
Когда происходит ререндер состояния?
Лучшие практики безопасности в React?
Методы жизненного цикла компонента в React
Можете ли вы описать опыт работы со сложной структурой данных в приложении React? Как вы с этим справились?
Можете ли вы описать ситуацию, когда вам пришлось оптимизировать React приложение?
Можете ли вы описать, как бы вы реализовали пагинацию в приложении React?
Можете ли вы принудительно выполнить повторный рендеринг компонента без вызова setState?
Можете ли вы рассказать о преимуществах использования React Context API?
Можно ли использовать React без рендеринга HTML?
Можно ли приложение на React встроить в другое приложение на React?
Назовите основную цель React Fiber?
Назовите преимущества использования React
Недостатки хуков
Опишите, как в React обрабатываются события?
Оптимизация React-приложений. Как измерить производительность программы?
Оптимизация производительности? Что такое `PureComponent`?
Перечислите особенности React
Поддержка рендеринга тегов метаданных, стилей и async scripts в React19
Почему мы не должны обновлять состояние напрямую?
Почему названия компонентов должны начинаться с заглавной буквы?
Правила (ограничения) использования хуков
Преимущества хуков
Работа с таймерами
Разница между `createElement()` и `cloneElement()`? Что такое `React.isValidElement(object)`?
Разница между `memo()` и `useMemo()`
Разница между `React` и `ReactDOM`
Разница между `useEffect()` и `componentDidMount()`
Разница между DOM и VirtualDOM?
Разница между useEffect() и useLayoutEfffect()
Разница между классовым и функциональным компонентами?
Разница между рендерингом и монтированием?
Разница между состоянием(`state`) и пропсами(`props`)?
Разница между теневым (Shadow) и виртуальным (Virtual) DOM?
Разница между управляемыми (controlled) и не управляемыми (uncontrolled) компонентами?
Разница между элементом и компонентом?
Расскажите о хуках `useCallback()` и`useMemo()`
С какой версии React пользуешься и какие крупные изменения за это время произошли?
Стадии жизненного цикла компонента в React?
Техники оптимизации перфоманса React
Хорошо ли использовать setState() в методе componentWillMount()?
Чем React Router отличается от обычной маршрутизации?
Что возвращает fetch? Как получить содержимое ответа? Как обрабатывать ошибки?
Что делает setState?
Что произойдет, если вы используете props в исходном состоянии?
Что произойдет, если вы используете setState() в конструкторе?
Что такое «бурение пропсов» (Prop Drilling)?
Что такое «ленивая» функция?
Что такое «опрос» (Polling)? Как его реализовать в React?
Что такое `children` в props?
Что такое `ReactDOMServer`?
Что такое `useContext()`?
Что такое `useEffect()`?
Что такое `useReducer()`?
Что такое AbortController() ?
Что такое Batching ?
Что такое Concurrent Mode ?
Что такое CSS-modules и `styled-components`?
Что такое forwardRef() ?
Что такое JSX? Можем ли мы использовать React без JSX?
Что такое OffScreen API в React18 ?
Что такое Props?
Что такое React Fiber?
Что такое React Native?
Что такое React Profiler и для чего он используется?
Что такое React Reconciliation?
Что такое React хуки (Hooks)?
Что такое React-routing?
Что такое React-миксины?
Что такое React-ссылка (`ref`)?
Что такое React?
Что такое shouldComponentUpdate()?
Что такое useId() ? Как его можно использовать ?
Что такое useState( ?
Что такое VirtualDOM и зачем он нужен?
Что такое инверсия наследования (Inheritance Inversion)?
Что такое Компонент высшего порядка (Higher-Order Component)?
Что такое компонент-переключатель (Switching Component)?
Что такое поднятие состояния вверх (Lifting State Up)?
Что такое портал (`Portal`)?
Что такое предохранители (Error Boundaries)?
Что такое синтетические события (SyntheticEvent) в React?
Что такое строгий режим в React? Его преимущества?
Что такое фрагмент (`Fragment`)? Почему фрагмент лучше, чем `div`?
Что такое хук useActionState() ?
Что такое хук useDeferredValue() ?
Что такое хук useFormStatus() ?
Что такое хук useImperativeHandle() ?
Что такое хук useOptimistic() ?
Что такое хук useRef() ?
Что такое хук useTransition() ?
Является ли React реактивным?
200 Курсы
Overview
000 Вопросы к ревью React-Redux
ReactJSX 1
ReactJSX 2
ReactJSX 3
001 Вступление
Вступление
Настройка проекта React-Redux
Создаём новое React-приложение
002 Базовые концепции
React - компоненты
React-элементы
Знакомство с JSX
Как подключить CSS?
Коллекция и ключи
Компоненты и пропсы
Массивы, как свойства компонентов
Рендеринг элементов
Создание нового пустого проекта
Структура файлов
Условный рендеринг
003 Состояния и события
defaultProps
NPM , установка дополнительных пакетов
propTypes
setState - обновление элемента
setState() - добавление элемента
setState() - удаление элемента
State - состояние компонента
Библиотеки prop-types
Данные в React-приложении
Как работает setState?
Компоненты-классы
Контролируемые компоненты
Обновление состояния, которое зависит от предыдущего значения
Обработка событий
Работа с формами
Собственная система событий
Теория JSX - синтаксис . Передача контента
004 Инструменты проверки кода
Держи свой код чистым с помощью ESLint
005 Работа с API
Выбор HTTP API для браузера
Как работает Fetch API?
Компонент, который получает данные с сервера
Обработка ошибок в Fetch API
006 React-хуки
React Hooks
useCallback() и useMemo()
useEffect()
useEffect() - упражнения
useState()
Все хуки и концепты React
Использование useEffect() для загрузки данных
Правила и ограничения хуков
Создание собственных хуков
007 HOCS & StyledComponents, CSS-modules
Компоненты высшего порядка
Стилизация и CSS
008 Redux
Action Creator
bindActionCreators()
mapDispatchToProps в виде обьекта
mapDispatchToProps()
React-Redux и функция connect()
Reducer & Actions
Redux DevTools
Redux Store
UI для Redux
Асинхронное изменение state
Введение в Redux
Действия с параметрами
Использование React и Redux
Как работает Middleware?
Структура проекта
Чистые функции
009 React-routing
Link
Route
withRouter
Авторизация и закрытые страницы
Динамические пути
Компонент Switch (обработка несуществующих адресов)
Опциональные параметры
Основы React-routing
Относительные пути
300 Интересные статьи
Модули
Динамические импорты
Модули, введение
Экспорт и импорт
React.FormEvent и HTMLFormElement
registerServiceWorker()
400 Заметки
Интересные задачи
Делаем пагинацию в React приложении
Как работать с формами в React?
004 State Managers
100 Подготовка к собеседованию
React Query
React Query
Что такое React Query
Redux
Middleware
Redux
Как выглядит поток данных в Redux-приложении?
Ключевые концепции Redux?
Можете ли вы рассказать об отличиях между презентационным и контейнерным компонентами в React?
На чём построена redux-saga и для чего она нужна?
Плюсы и минусы Redux
Разница между React State и Redux State?
Разница между Redux и Flux?
Разница между компонентом и контейнером
Чистая функция в Redux?
Что такое «единственный источник истины» (Single Source of Truth)?
Что такое connect()?
Что такое Flux?
Что такое Redux-thunk?
Что такое Redux?
Что такое Reselect и как он работает?
Что такое useDispatch() и Redux-actions?
Что такое распределенный компонент?
Что такое редьюсер (Reducer)?
Что такое сайд-эффекты?
Redux Toolkit
Redux Toolkit
Какие методы есть в Redux Toolkit
Метод configureStore()
Метод createAction()
Метод createReducer()
Метод createSlice()
Что такое Redux Toolkit?
RTK Query
RTK Query
Что такое RTK Query?
Zustand
Immer middleware
Middleware Persist
Slice-паттерн в Zustand
Zustand
Возможно ли использовать значение состояния вне компонента ?
Как обрабатывать асинхронные операции в Zustand?
Как отладить приложение, которое использует Zustand? Как использовать devTools?
Как получить данные из state ?
Как реализовать подписку (subscribe) на store в Zustand ?
Кастомный хук для работы с URL Storage
Преимущества и недостатки Zustand
Работа с Tanstack Query
Сброс состояний в Zustand
Хук useShallow для оптимизации доступа к файлам
Что такое actions ?
Что такое slice ?
Что такое Zustand ?
Что такое кастомные хранилища hashStorage ?
005 TypeScript
100 Подготовка к собеседованию
Generics, Index Access Types, Keyof на простом примере
Union и TypeGuards, пользовательские проверки типов
Аннотация и вывод типов
В чем разница между tuple и массивом в TypeScript?
Для чего в TypeScript используется `NoImplicitAny`?
Для чего в TypeScript используют ключевое слово `declare`?
Как TypeScript поддерживает необязательные и дефолтные параметры в функции?
Как вы отлавливаете ошибки в TypeScript коде?
Как настроить окружение TypeScript - проекта?
Как объявить переменную в TypeScript?
Как преобразовать строку в число с помощью TypeScript?
Как проверить на null или undefined?
Как сделать все свойства (`interface`) необязательными?
Какие коллекции поддерживает TypeScript?
Какие области видимости доступны в TypeScript?
Какие элементы ООП поддерживаются в TypeScript?
Конструкции в TypeScript
Модификаторы доступа в TypeScript
Можно ли автоматически генерировать файлы объявлений TypeScript из JS-библиотек?
Можно ли в TypeScript использовать строго типизированные функции в качестве параметров?
Можно ли использовать TypeScript в серверной разработке?
Объясните Rest параметры и правила объявления таких параметров
Объясните как использовать миксины в TypeScript?
Основные компоненты в TypeScript
Основные особенности TypeScript
Плюсы и минусы использования TypeScript
Поддерживает ли TypeScript перегрузку функций?
Разница между абстрактным классом (abstract class) и интерфейсом (interface)?
Разница между внутренним (Internal Module) и внешним модулями (External Module)?
Разница между типами “Объединение” и “Пересечение”
Разница между типами `void`, `never` и `unknown`
Разница между типом (`type`) и интерфейсом (`interface`)
Типы в TypeScript
Утилиты - Parameters, ConstructorParameters, ReturnType и InstanceType
Утилиты - Partial, Required, NonNullable, Record, Readonly и ReadonlyArray
Утилиты - Pick, Extract, Exclude и Omit
Что делает тип Omit?
Что такое (`interface`) в TypeScript?
Что такое `.map` файл, как и зачем его использовать?
Что такое getters и setters. Как их использовать?
Что такое JSX в TypeScript? Какие режимы JSX поддерживает TypeScript?
Что такое внешние объявления переменных (ambient declaration)?
Что такое декораторы?
Что такое директивы с тремя наклонными чертами (Triple-Slash Directives), их типы?
Что такое классы в TypeScript?
Что такое общие типы (`generic`) в TypeScript?
Что такое перечисление (`enum`)?
Что такое пространство имен и как его использовать?
Что такое утверждение типа (type assertion) в TypeScript?
200 Курсы
Overview
002 Продвинутый TypeScript
Карманная книга по TS. Часть 1. Основы
Карманная книга по TS. Часть 2. Типы на каждый день
Карманная книга по TS. Часть 3. Сужение типов
Карманная книга по TS. Часть 4. Подробнее о функциях
Карманная книга по TS. Часть 5. Объектные типы
Карманная книга по TS. Часть 6. Манипуляции с типами
Карманная книга по TS. Часть 7. Классы
Карманная книга по TS. Часть 8. Модули
300 Интересные статьи
React + TypeScript
Простое обьяснение Generics
400 Заметки
Интересные задачи
Учимся писать сложные Typescript типы на примере роутинга в React
Миграция проекта на TS
Дополнительные библиотеки для работы с typescript - проектом
Миграция проекта React на TypeScript
006 Next.js
100 Подготовка к собеседованию
Объясните назначение `getStaticProps()`?
Автоматическая статическая оптимизация в Next.js
В чем разница между Next.js и React?
В чем разница между функциями `getServerSideProps()` и `getStaticProps()` в Next.js?
Как Next.js обрабатывает навигацию на стороне клиента?
Как бы вы реализовали аутентификацию в приложении Next.js?
Как бы вы управляли глобальным состоянием в приложении на Next.js?
Как вы можете добиться динамического разделения кода на основе маршрутов без использования `getServerSideProps` в Next.js?
Как вы можете обрабатывать запросы (CORS) в Next.js при отправке запросов API в другой домен?
Как вы можете реализовать пользовательские границы ошибок в проекте Next.js, чтобы корректно обрабатывать ошибки и предотвращать сбой всего приложения?
Как вы можете реализовать условные перенаправления в Next.js на основе определенных критериев, таких как статус аутентификации пользователя или его роль?
Как вы настраиваете пользовательскую конфигурацию Babel или Webpack в Next.js?
Как вы оптимизируете производительность приложения на Next.js?
Как использовать глобальные стили в Next.js?
Как установить приложение с Next.js? Почему используется Create Next App?
Какая разница между типами предварительного рендеринга (SSR и SG), доступными в Next.js?
Какова цель перехватчика `useEffect()` в React и как он связан с Next.js?
Какова цель свойства `excludes` в next.config.js?
Какова цель свойства `experimental` в next.config.js?
Какова цель свойства `redirects` в next.config.js?
Какова цель свойства `rewrites` в next.config.js?
Какова цель функции `getStaticPaths()` в Next.js?
Каково значение файлов _error.js и 404.js в каталоге pages и как их можно настроить для обработки ошибок в Next.js?
Можете ли вы объяснить, что делает "next/link" и почему это важно в проектах Next.js?
Объясни, как можно запросить query параметр в Next.js?
Объясните концепцию `prefetching` в Next.js и как это влияет на производительность?
Объясните концепцию динамической маршрутизации в Next.js
Объясните концепцию поддержки нескольких языков Next.js
Объясните назначение `next export`? Когда бы вы ее использовали и каковы ее ограничения?
Объясните назначение параметров `publicRuntimeConfig()` и `serverRuntimeConfig()` в Next.js? Чем они отличаются от обычных переменных среды?
Объясните назначение свойства `headers` в next.config.js
Объясните назначение файла _app.js и _document в Next.js?
Объясните назначение функции `getServerSideProps()`
Опишите сценарии, в которых вы бы предпочли использовать `getStaticProps()` вместо `getServerSideProps()`, и наоборот
Цель директории `Pages` в проектах на Next.js
Что вы понимаете под code splitting в Next.js?
Что делает `getInitialProps()` в Next.js? Можете ли вы предоставить пример его использования?
Что подразумевается под стилизованным JSX в Next.js?
Что такое Catch-All Routes в Next.js и как они работают?
Что такое Next.js? Чем отличается от других фреймворков?
Что такое SSR? Его преимущества и гидратация
Что такое графический компонент и оптимизация изображений в Next.js?
Что такое переменные окружения (.env) в Next.js?
Что такое рендеринг на стороне клиента CSR ?
Что такое функция инкрементной статической регенерации в Next.js и как вы использовали ее в своих проектах?
006 Remix.run
300 Интересные статьи
Learn Remix Framework with Kent C. Dodds
Why did OpenAI move from Next.js to Remix
400 Заметки
Возможно ли использовать Module Federation вместе с Remix ?
Возможно ли использовать Remix.run вместе с MobX ?
007 Jest, RTL
100 Подготовка к собеседованию
Базовое тестирование React-компонента
В чем разница между "describe()" и "it()"?
В чём разница между afterEach() и afterAll() в Jest?
В чём разница между beforeEach() и beforeAll() в Jest?
В чем разница между Snapshot и Unit тестированием?
Возможно ли запустить один или несколько тестовых файлов с помощью Jest? Если да, то каким образом?
Где вы будете хранить файлы *.test.ts в вашем приложении?
Зачем нужны тесты? Какие виды тестов существуют?
Интеграция тестирования в процесс разработки
Как Jest изолирует каждый тест от других? Почему это важно?
Как Jest моделирует зависимости?
Как Jest работает под капотом, чтобы достичь высокого уровня производительности?
Как бы вы использовали флаг –watch в Jest?
Как бы вы написали тест для проверки того, что функция выдаёт ошибку при определённых условиях, используя Jest?
Как бы вы настроили библиотеки тестирования Jest, RTL для приложения React?
Как бы вы структурировали свои тесты и описательные блоки в сложном приложении с помощью Jest?
Как вы будете тестировать layout компоненты?
Как вы будете тестировать хуки внутри компонента React?
Как вы имитируете вызовы внешних API в тестах Jest?
Как вы используете beforeEach() и afterEach() ?
Как вы используете Jest для тестирования компонентов React, у которых есть состояние?
Как вы можете использовать Jest для тестирования функции, вызывающей внешний API?
Как вы обрабатываете асинхронный код в тестах?
Как вы обрабатываете асинхронный код в тестах?
Как вы пишите mock для функции на Jest?
Как вы тестируете компоненты, у которых есть Children?
Как вы тестируете ошибки в Jest ?
Как вы управляете globalSetup и globalTeardown в Jest?
Как интегрировать работу Jest с линтером?
Как использовать callback «done» в Jest для асинхронного тестирования?
Как можно использовать Jest в сочетании с другими библиотеками тестирования, такими как Enzyme или React Testing Library?
Как можно оценить качество тестирования?
Как можно протестировать HTTP-запросы в Jest?
Как можно протестировать функцию на основе таймера, например setTimeout или setInterval, с помощью Jest?
Как настроить Jest для параллельного выполнения тестов?
Как следует настроить pipeline CI для запуска тестов, созданных с помощью Jest?
Как тестировать routing приложения?
Как тестировать кастомные хуки и что такое метод `act()` ?
Какие by-функции вы знаете в Jest?
Какие query-функции вы знаете в Jest?
Какие инструменты оценки покрытия кода тестами вы знаете?
Какие инструменты тестирования React-приложений ты знаешь?
Какие пользовательские действия вы знаете? Как вы будете их тестировать?
Какие преимущества и недостатки в тестировании собственного кода?
Какие стратегии вы используете для отладки тестов?
Какие хелперы ты знаешь для организации тестов?
Какие цели преследует каждый из видов тестирования?
Какова цель Jest CLI?
Какова цель интеграционного тестирования? Как вы будете писать интеграционные тесты для приложения на React?
Какую функцию выполняет toHaveBeenCalledWith()?
Можете ли вы объяснить, для чего используется блок "describe" в Jest?
Можете ли вы объяснить, как использовать Jest для тестирования actions и reducers в Redux?
Можете ли вы объяснить, как работает mock-функция в Jest?
Можете ли вы провести различие между toBe() и toEqual() в Jest?
Набор мэтчеров для разметки
Обязательно ли 100% покрытие кода тестами
Опиши разницу между `test` и `it`. Когда бы ты использовал каждый из вариантов?
Опишите сценарий, в котором вы бы использовали метод .spyOn() в Jest
Паттерн написания модульных тестов
Пирамида тестов и сколько тестов должно быть написано в приложении?
Проблемы при тестировании
Разница между mock и stub?
Разница между TDD и BDD
Советы по тестированию
Что делает метод cleanup в RTL?
Что делает метод renderHook в RTL?
Что обычно тестируют в приложении на React?
Что происходит, когда вы пытаетесь отобразить или установить не подключённый компонент с помощью ReactDOM?
Что такое `code coverage` в Jest и как его создать?
Что такое `fireEvent()` в RTL?
Что такое `istanbul`? Какую роль играет в code coverage?
Что такое `TDD`?
Что такое `test runner` в Jest?
Что такое aria-роли и как с ними работать?
Что такое dummy в unit-test?
Что такое expect? Разделяете ли вы expect на отдельные логические it-блоки?
Что такое fake в unit-test?
Что такое mock в unit-test?
Что такое Quality Gates?
Что такое React Testing Library?
Что такое setup -функция в Jest?
Что такое stub в unit-test?
Что такое teardown -функция в Jest?
Что такое UI-тестирование (BDD)?
Что такое Vitest? Какую функцию выполняет? В чем отличие Vitest от Jest?
Что такое Vitest? Какую функцию выполняет? В чем отличие Vitest от Jest?
Что такое White Black Grey Box-тестирование?
Что такое алиассы в Jest?
Что такое метод render в RTL?
Что такое трофей тестирования? Статическое тестирование
300 Интересные статьи
TDD. Методология разработки через тестирование
500 Технологии и библиотеки
Jest
Introscope. Unit-тестирование
Что такое Jest? Как установить и запустить первый тест?
Puppeteer
Puppeteer. Советы
React-Testing-Library
Обзор библиотеки react-testing-library
Vitest
Тестирование на примере реального проекта
Тестирование с помощью Vitest
Что такое Vitest? Как установить и запустить первый тест?
008 Настройка окружения
Babel
Что делает Babel?
Что такое Babel?
Emmet
Emmet - плагин
Eslint
Настройка eslint & prettier
Руководство Eslint + Prettier
Что такое stylelint?
NPM
Введение в NPM скрипты
Что такое NPM (Node Package Manager) ?
Исправление ошибки WslRegisterDistribution в Ubuntu
010 Архитектура Веб-приложений
100 Подготовка к собеседованию
Webpack
Module Federation
Архитектура `Module Federation`
Как построить хорошую архитектуру React-проекта?
Микрофронтенд
Описание `Module Federation`
Плюсы и минусы монолитной и микросервисной архитектур
Проблемы `Module Federation`
Проблемы монолитной архитектуры?
Разница между монолитной и микросервисной архитектурами?
Что такое микросервисы?
Что такое микрофронтенд?
Анализ `bundle.js`
Для чего разделяют `bundle.js` на чанки?
Зависимости для разработки
Как работает Webpack?
Как создаются чанки?
Как уменьшить размер `build`? Что такое `Production mode`?
Как уменьшить размер bundle.js? Сжатие с использованием gZip?
Какие основные задачи выполняет Webpack при сборке проекта?
Почему файлы bundle.js имеют разные хеши?
Что такое Source maps?
Что такое tree shaking?
Что такое бандл (bundle)?
Что такое статический анализ кода?
Что такое чанк?
300 Интересные статьи
Как настроить CORS?
Как создать host Application?
400 Заметки
JSON
Разница между файлами package.json и package-lock.json
ViteJS
Обзор Vite
Архитектурные стили
Feature-Sliced Design
Основы FSD
ВЗАИМОДЕЙСТВИЕ С BACKEND
Docker
Swagger
Коротко о SSH
Что такое CDN и как это работает?
011 Решение задач
JavaScript
0_Object && Collections
Array
Task_array - arraySubset()_1
Task_array - arrRandom()_0
Task_array - bancomat() v.2_1
Task_array - bancomat()_1
Task_array - calculate()_1
Task_array - chunk()_(1)
Task_array - findMax_1
Task_array - foo()_0
Task_array - func()_0
Task_array - getMoney()_0
Task_array - getSnakedFlatArray()_1
Task_array - getSumOfPreparedNumbers()_1
Task_array - getUniqDigits()_1
Task_array - highestFrequency()_1
Task_array - input()_0
Task_array - phoneNum()_0
Task_array - salary()_1
Task_array - sort()_1
Task_array - sortArr()_1
Task_array - sortBy()_1
Task_array - sortOperations()_1
Task_array - sumOfTwo()_1
Task_array - sumValue()_1
Object
Task_object -
Task_object - arrayFr()_1
Task_object - findDeep()_0
Task_object - flatObject()_2
Task_object - flatten()_1
Task_object - flattenObj()_1
Task_object - flutter()_1
Task_object - getTreeValues()_1
Task_object - groupBy()_1
Task_object - groupByGender()_1
Task_object - helperFnc()_1
Task_object - includes()_1
Task_object - inputExpiredSort()_1
Task_object - listOfPhones()_1
Task_object - optionalChaining_1
Task_object - readOnlyObj()_1
Task_object - removeC()_1
Task_object - sumAge()_1
Task_object - sumDimensions()_1
Task_object - sumTree()__1
Task_object - withValidation()_0
Task_object - zip()_0
OOP
Class
Task_OOP - class() 1_0
Task_OOP - class() 2_0
Task_OOP - class() 3_0
Task_OOP - class() 4_0
this
Task_this - 1_1
Task_this - 2_1
Task_this - 3_1
Task_this - 4_0
Task_this - 5_0
Task_this - 6_1
Task_this - 7_1
Task_this - 8_0
Task_this - 9_0
Task_this - 10_1
Task_this - 11_0
1_Number
Task_number - descendingOrder()_1
Task_number - getBigger()_1
2_String
Task_string - removeExclamation()_1
Task_string - camelCase()_1
Task_string - checkBrackets()_1
Task_string - checkWord()_1
Task_string - invertCase()_1
Task_string - isBalanced()_1
Task_string - isHappyNumber()_1
Task_string - isHappyTicket()_1
Task_string - isPerfect()_1
Task_string - isUnique()_1
Task_string - minifyString()_1
Task_string - removeDupes()_1
3_Conclusion
Task_conclusion - 1_0
Task_conclusion - 2_0
Task_conclusion - 3_0
Task_conclusion - 4_0
Task_conclusion - createIncrement()_0
4_Async
EventLoop
Task_eventloop - 1_1
Task_eventloop - 2_1
Task_eventloop - 3_1
Task_eventloop - 4_1
Task_eventloop - 5_0
Task_eventloop - 6_0
Task_eventloop - 7_1
Task_eventloop - 8_0
Task_eventloop - 9_1
Task_eventloop - 10_1
Task_eventloop - 11_1
Task_eventloop - 12_0
Task_eventloop - 13_0
Task_eventloop - 14_0
Task_eventloop - 15_0
Task_eventloop - 16_0
Task_eventloop - 17_0
Task_eventloop - 18_1
Task_eventloop - 19_1
Task_eventloop - 20_1 (повторить полезно)
Task_eventloop - 21_0
Task_eventloop - 22_0
Task_eventloop - 23_1
Task_eventloop - 24_1
Task_eventloop - 25_1
Task_eventloop - 26_1
Task_eventloop - 27_1
Task_eventloop - 28_1
Task_eventloop - 29_1
Task_eventloop - 30_1
Task_eventloop - 31_0
Task_eventloop - 32_0
Task_eventloop - 33_1
Task_eventloop - 34_0
Task_eventloop - 35_0
Promise && async..await
Task_async - ajax()_1
Task_async - doRequest()_1
Task_async - doSomething()_0
Task_async - for(setTimeout)_1
Task_async - heavyJob()_1
Task_async - makeManyReq()_1
Task_async - Promise.all()_1
Task_async - promisesInSeries()_0
Task_async - run() 1_1
Task_async - run() 2_1
Task_async - setTimeoutTimes()_0
Task_async - sizeOf()_0
Task_object - getData()_0
Task_object - getUsersData()_0
5_what if
Task_whatIf - 1_0
Task_whatIf - 2_0
Task_whatIf - 3_0
Task_whatIf - 4_0
Task_whatIf - 5_0
Task_whatIf - 6_0
Task_whatIf - 7_0
Task_whatIf - 8_0
Task_whatif - 9_1
Task_whatif - 10_1
Task_whatif - 11_1
Task_whatif - 12_1
Task_whatif - 13_1
Task_whatif - 14_1
Task_whatif - 15_0
Task_whatif - 16_1
Task_whatif - 17_0
6_Pattern
anagram
Task_anagram - aclean()_1
Task_anagram - allAnagrams()_1
Task_anagram - anagram()_1
Task_anagram - anagram(str)_1
Task_anagram - findAnagrams()_1
Task_anagram - findAnagramWords()_1
Task_anagram - findLongestAnagramChain()_1
Task_anagram - groupAnagrams()_1
Task_anagram - isAnagram()_1
Анаграммы
currying
Task_curriyng - plusMinus()_0
Task_currying - getN()_0
Task_currying - add()_1
Task_currying - addSum()_0
Task_currying - bind()_1
Task_currying - compose()_1
Task_currying - curry()_1
Task_currying - memoize()_1
Task_currying - partial()_1
Task_currying - sum()_0
Каррирование
memo
Task_memo - memo()_0
Task_memo - memo()-2_1
Task_memo - memoFn()_0
recursion
Task_recursion - sumOfDigits()_1
7_Polyfil
Task_polyfil - findUnique()_1
Task_polyfil - includes()_1
Task_polyfil - isNaN()_0
Task_polyfil - promiseAll()_0
Task_polyfill - bind()_0
Task_polyfill - some()_1
others
Task_others
Task_others - arr.push()
Task_others - FizzBuzz() v2_1
Task_others - FizzBuzz()_1
Task_others - makeReader()_0
Task_others - TDZ
KATA_TASK
React
ReactTask - asyncFunction_0
ReactTask - Bad App_0
ReactTask - Child rerender 2_0
ReactTask - Clicker_1
ReactTask - CodeReview_0
ReactTask - Company _0
ReactTask - ControlledComponent_0
ReactTask - Counter 1_1
ReactTask - Counter 2_1
ReactTask - Counter 3_1
ReactTask - Counter 4_1
ReactTask - Counter 5_1
ReactTask - DesignInterview
ReactTask - eventloop 1_-1 !!!
ReactTask - eventloop 2_-1 !!!
ReactTask - experience + date _0
ReactTask - fetchData 1_1
ReactTask - fetchData 2_0
ReactTask - GetTree_0
ReactTask - ListItem_0
ReactTask - Multiple clicks_0
ReactTask - PropsLogger_0
ReactTask - React.StrictMode_0
ReactTask - recordsmMock()_v.1.0_1
ReactTask - recordsmMock()_v.2.0_0
ReactTask - Slider_0
ReactTask - SomeComponent_0
ReactTask - SubElement_0
ReactTask - TextField_0
ReactTask - Timer 1_1
ReactTask - Timer 2_1
ReactTask - Timer 3_1
ReactTask - useDebounce()_0
ReactTask - useDirtyState_1
ReactTask - useQuery_0
ReactTask - useRef_0
ReactTask - useRef()
ReactTask - useRerender()_0
TypeScript
TSTask - add()_1
TSTask - firstUniqChar()_0
TSTask - getProperty()_0
TSTask - getUrls()_0
TSTask - getValue()_0
TSTask - Machine_0
TSTask - MyType()_1
TSTask - nullable()
TSTask - person()_0
TSTask - personList()_1
TSTask - ProcessedData()_0
TSTask - rollDice()_1
TSTask - Types vs Interface_0
Практические вопросы по typescript
Алгоритмы
Паттерны
101 Рабочие заметки
Диплинк
002 Backend
002 Node.js
100 Подготовка к собеседованию
Как избежать Callback Hell?
Когда следует использовать Node.js?
Плюсы Node.js
Почему в модулях переменные верхнего уровня не являются глобальными?
Почему использование блокирующих, или синхронных операций является плохой практикой в Node.js?
Преимущества однопоточного веб-сервера по сравнению с многопоточным
Разница между `createReadStream` и `readFile`?
Разница между `module.exports` и `exports`,
Разница между Node.js и JavaScript?
Разница между асинхронной и неблокирующей функциями
Что такое `npm`?
Что такое Continuation-passing Style (CPS)?
Что такое Node.js?
Что такое REPL в Node.js?
Что такое модуль Cluster?
Что такое поток (stream)? Типы потоков в Node.js?
Что такое цикл событий (event loop)?
Что такое циклические зависимости модулей в Node?
100 Git
100 Подготовка к собеседованию
Git Rebase
Git. Инструмент управления версиями
Автоматически генерировать и публиковать журнал изменений с помощью Node.js
Версионность веб-приложений
Ежедневная работа с Git
Как клонировать репозиторий с GitLab?
Как начать работать с проектом?
Как создать Merge Request?
Как создать ветку и как правильно писать коммиты (с примерами)?
Как создать свою ветку gitlab, git, vsCode, webstorm?
Какие проблемы могут возникнуть при работе с Git?
Первоначальная настройка Git
Список популярных команд `Git`, которые ты использовал в работе и для чего?
Что такое Git CLI?
Что такое Git Flow?
300 Интересные статьи
Автоматическое создание журнала изменений для Вашего проекта
200 Браузерное окружение
100 Подготовка к собеседованию
REST API. Что такое ресурс, ограничения, идемпотентность и кэширование?
В чём отличие REST от RPC и CRUD?
Виды аутентификации
Для чего нужен паттерн PRPL?
Если через консоль, примеру curl'oм, запросить сайт, что мы увидим
Из чего состоит `HTTP`-запрос?
Используете вы Perfect Pixel или что-то аналогичное?
Как можно оптимизировать загрузку внешних ресурсов на странице?
Как проверить что cookie включены?
Как происходит авторизация? Что передаётся в заголовке авторизации?
Как работает `JSONP`?
Как работает механизм кэширования в веб-браузере
Как работает мультиплексирование в `HTTP-2` ?
Как узнать устройство и ОС пользователя?
Какие инструменты используются для оптимизации производительности веб-приложений?
Какие методы может иметь `HTTP`-запрос?
Какие способы сжатия данных используются в HTTP?
Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?
Методы повышения безопасности веб-приложений
Механизм установки сеанса между клиентом и сервером
На каком уровне OSI находятся http/ tcp /ping/ json -витая пара ?
Назовите 5 кодов состояния при HTTP-запросе?
Назовите критические этапы рендеринга
Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)
Опишите несколько способов коммуникаций между серверов и клиентом
Почему очищать кэш важно? Как это можно сделать?
Разница между `HTTP 1` и `HTTP 2` ?
Разница между `HTTP` и `HTTPS`
Разница между `preload`, `prefetch`, `preconnect` и `prerender`
Разница между `PUT`- и `POST`-запросами
Разница между host и domain?
Разница между layout, painting и compositing
Разница между Long-Polling, Websockets и Server-Sent Events
Разница между URI и URL
Разница между идентификацией, аутентификацией, авторизацией?
Разница между протоколами `TCP` и `UDP`
Расскажите о метриках Core Web Vitals?
Сколько запросов одновременно можно отправить из браузера на определённый домен?
Способы уменьшения времени загрузки веб-страницы
Структура HTTP запроса и ответа. Основные метаданные от сервера и браузера
Структура URL - path, query, string и fragment
Тестирование API
Хранения данных на клиенте в LocalStorage, SessionStorage и Cookie?Особенности работы
Чем отличается GET от POST? Какие ещё виды запросов есть и для чего используются?
Что происходит, когда пользователь вводит адрес сайта в адресную строку?
Что такое “трехстороннее рукопожатие” (Triple handshake) ?
Что такое `WebSocket`? В чем принцип его работы?
Что такое API?
Что такое CDN?
Что такое Content Security Policy (CSP) ?
Что такое Core Web Vitals? Какие основные метрики туда входят?
Что такое CORS?
Что такое DNS ?
Что такое feature detection?
Что такое feature inference (предположение возможностей) и анализ строки user-agent?
Что такое Flash Of Unstyled Content (FOUC) ? Как его избежать?
Что такое GraphQL?
Что такое gzip и как он используется в HTTP?
Что такое History API в браузере?
Что такое HMAC ?
Что такое HTTP ?
Что такое HTTP cookie?
Что такое IndexedDB в браузере? Преимущества IndexedDB
Что такое IP-адрес?
Что такое Lazy Loading и как оно может помочь при оптимизации производительности?
Что такое OSI модель?
Что такое OWASP Top 10?
Что такое Progressive Web Application (PWA)?
Что такое protobuf и messagepack?
Что такое Reflow и Repaint? Какие есть подводные камни в оптимизации производительности?
Что такое REST?
Что такое Service Workers?
Что такое SSL и TLS? Зачем они используются в веб-разработке?
Что такое Web Workers?
Что такое Web Worklet?
Что такое WebSQL?
Что такое Веб-компоненты и какие технологии в них используются?
Что такое веб-хранилище (web storage)?
Что такое критический путь рендеринга веб-страниц?
Что такое куки? Для чего используются? Какие типы куки бывают? Как реализуются сессии на куках?
Что такое межсайтовый скриптинг (XSS)?
Что такое модель зрелости Ричардсона?
Что такое прогрессивный SSR ?
Что такое протокол-SOAP?
Является ли Service Worker частью спецификации HTML5?
Является ли Web Workers частью спецификации HTML5?
Является ли WebSQL частью спецификации HTML5?
300 Паттерны
100 Подготовка к собеседованиям
Какие ещё принципы кроме SOLID вы знаете?
Какие принципы можно использовать вместе с наследованием?
Можно ли в JavaScript реализовать абстрактный класс и как это сделать?
Недостатки паттерна MVW?
Однонаправленный поток и двусторонняя связь данных. В чем между ними разница?
Основные принципы ООП
Основные принципы функционального программирования
Плюсы и минусы ФП и ООП
Плюсы функционального программирования
Разница между императивным и декларативным подходами программирования
Разница между классовым и прототипным наследованием
Разница между композицией и наследованием
Типы паттернов
Типы полиморфизма
Что такое GOF паттерны?
Что такое GRASP паттерны?
Что такое MVC?
Что такое MVP?
Что такое MVVM?
Что такое Rx?
Что такое SOLID? Какие из принципов SOLID нельзя реализовать в функциональном компоненте?
Что такое инкапсуляция?
Что такое композиция в контексте JavaScript?
Что такое мутабельность ииммутабельность?
Что такое паттерн, или шаблон проектирования?
Что такое функциональное программирование?
011 Решение задач: JS, TS и React
Apr 27, 2026, 1 min read
Задачи:
§
Обрати внимание на поле справа! Выбери задачу из списка и решай.
Упоминания со ссылкой
Task_array - arrRandom()_0
Task_array - arraySubset()_1
Task_array - bancomat() v.2_1
Task_array - bancomat()_1
Task_array - calculate()_1
Task_array - chunk()_(1)
Task_array - findMax_1
Task_array - foo()_0
Task_array - func()_0
Task_array - getMoney()_0
Task_array - getSnakedFlatArray()_1
Task_array - getSumOfPreparedNumbers()_1
Task_array - getUniqDigits()_1
Task_array - highestFrequency()_1
Task_array - input()_0
Task_array - phoneNum()_0
Task_array - salary()_1
Task_array - sort()_1
Task_array - sortArr()_1
Task_array - sortBy()_1
Task_array - sortOperations()_1
Task_array - sumOfTwo()_1
Task_array - sumValue()_1
Task_OOP - class() 1_0
Task_OOP - class() 2_0
Task_OOP - class() 3_0
Task_OOP - class() 4_0
Task_this - 10_1
Task_this - 11_0
Task_this - 1_1
Task_this - 2_1
Task_this - 3_1
Task_this - 4_0
Task_this - 5_0
Task_this - 6_1
Task_this - 7_1
Task_this - 8_0
Task_this - 9_0
Task_object - arrayFr()_1
Task_object - findDeep()_0
Task_object - flatObject()_2
Task_object - flatten()_1
Task_object - flattenObj()_1
Task_object - flutter()_1
Task_object - getTreeValues()_1
Task_object - groupBy()_1
Task_object - groupByGender()_1
Task_object - helperFnc()_1
Task_object - includes()_1
Task_object - inputExpiredSort()_1
Task_object - listOfPhones()_1
Task_object - optionalChaining_1
Task_object - readOnlyObj()_1
Task_object - removeC()_1
Task_object - sumAge()_1
Task_object - sumDimensions()_1
Task_object - sumTree()__1
Task_object - withValidation()_0
Task_object - zip()_0
Task_object -
Task_number - descendingOrder()_1
Task_number - getBigger()_1
Task_string - removeExclamation()_1
Task_string - camelCase()_1
Task_string - checkBrackets()_1
Task_string - checkWord()_1
Task_string - invertCase()_1
Task_string - isBalanced()_1
Task_string - isHappyNumber()_1
Task_string - isHappyTicket()_1
Task_string - isPerfect()_1
Task_string - isUnique()_1
Task_string - minifyString()_1
Task_string - removeDupes()_1
Task_conclusion - 1_0
Task_conclusion - 2_0
Task_conclusion - 3_0
Task_conclusion - 4_0
Task_conclusion - createIncrement()_0
Task_eventloop - 10_1
Task_eventloop - 11_1
Task_eventloop - 12_0
Task_eventloop - 13_0
Task_eventloop - 14_0
Task_eventloop - 15_0
Task_eventloop - 16_0
Task_eventloop - 17_0
Task_eventloop - 18_1
Task_eventloop - 19_1
Task_eventloop - 1_1
Task_eventloop - 20_1 (повторить полезно)
Task_eventloop - 21_0
Task_eventloop - 22_0
Task_eventloop - 23_1
Task_eventloop - 24_1
Task_eventloop - 25_1
Task_eventloop - 26_1
Task_eventloop - 27_1
Task_eventloop - 28_1
Task_eventloop - 29_1
Task_eventloop - 2_1
Task_eventloop - 30_1
Task_eventloop - 31_0
Task_eventloop - 32_0
Task_eventloop - 33_1
Task_eventloop - 34_0
Task_eventloop - 35_0
Task_eventloop - 3_1
Task_eventloop - 4_1
Task_eventloop - 5_0
Task_eventloop - 6_0
Task_eventloop - 7_1
Task_eventloop - 8_0
Task_eventloop - 9_1
Task_async - Promise.all()_1
Task_async - ajax()_1
Task_async - doRequest()_1
Task_async - doSomething()_0
Task_async - for(setTimeout)_1
Task_async - heavyJob()_1
Task_async - makeManyReq()_1
Task_async - promisesInSeries()_0
Task_async - run() 1_1
Task_async - run() 2_1
Task_async - setTimeoutTimes()_0
Task_async - sizeOf()_0
Task_object - getData()_0
Task_object - getUsersData()_0
Task_whatIf - 1_0
Task_whatIf - 2_0
Task_whatIf - 3_0
Task_whatIf - 4_0
Task_whatIf - 5_0
Task_whatIf - 6_0
Task_whatIf - 7_0
Task_whatIf - 8_0
Task_whatif - 10_1
Task_whatif - 11_1
Task_whatif - 12_1
Task_whatif - 13_1
Task_whatif - 14_1
Task_whatif - 15_0
Task_whatif - 16_1
Task_whatif - 17_0
Task_whatif - 9_1
Task_anagram - aclean()_1
Task_anagram - allAnagrams()_1
Task_anagram - anagram()_1
Task_anagram - anagram(str)_1
Task_anagram - findAnagramWords()_1
Task_anagram - findAnagrams()_1
Task_anagram - findLongestAnagramChain()_1
Task_anagram - groupAnagrams()_1
Task_anagram - isAnagram()_1
Task_curriyng - plusMinus()_0
Task_currying - getN()_0
Task_currying - add()_1
Task_currying - addSum()_0
Task_currying - bind()_1
Task_currying - compose()_1
Task_currying - curry()_1
Task_currying - memoize()_1
Task_currying - partial()_1
Task_currying - sum()_0
Task_memo - memo()-2_1
Task_memo - memo()_0
Task_memo - memoFn()_0
Task_recursion - sumOfDigits()_1
Task_polyfil - findUnique()_1
Task_polyfil - includes()_1
Task_polyfil - isNaN()_0
Task_polyfil - promiseAll()_0
Task_polyfill - bind()_0
Task_polyfill - some()_1
Task_others - FizzBuzz() v2_1
Task_others - FizzBuzz()_1
Task_others - TDZ
Task_others - arr.push()
Task_others - makeReader()_0
Task_others
ReactTask - Bad App_0
ReactTask - Child rerender 2_0
ReactTask - Clicker_1
ReactTask - CodeReview_0
ReactTask - Company _0
ReactTask - ControlledComponent_0
ReactTask - Counter 1_1
ReactTask - Counter 2_1
ReactTask - Counter 3_1
ReactTask - Counter 4_1
ReactTask - Counter 5_1
ReactTask - DesignInterview
ReactTask - GetTree_0
ReactTask - ListItem_0
ReactTask - Multiple clicks_0
ReactTask - PropsLogger_0
ReactTask - React.StrictMode_0
ReactTask - Slider_0
ReactTask - SomeComponent_0
ReactTask - SubElement_0
ReactTask - TextField_0
ReactTask - Timer 1_1
ReactTask - Timer 2_1
ReactTask - Timer 3_1
ReactTask - asyncFunction_0
ReactTask - eventloop 1_-1 !!!
ReactTask - eventloop 2_-1 !!!
ReactTask - experience + date _0
ReactTask - fetchData 1_1
ReactTask - fetchData 2_0
ReactTask - recordsmMock()_v.1.0_1
ReactTask - recordsmMock()_v.2.0_0
ReactTask - useDebounce()_0
ReactTask - useDirtyState_1
ReactTask - useQuery_0
ReactTask - useRef()
ReactTask - useRef_0
ReactTask - useRerender()_0
TSTask - Machine_0
TSTask - MyType()_1
TSTask - ProcessedData()_0
TSTask - Types vs Interface_0
TSTask - add()_1
TSTask - firstUniqChar()_0
TSTask - getProperty()_0
TSTask - getUrls()_0
TSTask - getValue()_0
TSTask - nullable()
TSTask - person()_0
TSTask - personList()_1
TSTask - rollDice()_1
Frontend Подготовка к собеседованиям