🐽🐽🐽 Входим в IT: День 213. Готовимся к собеседованию! (Next JS, TS, REACT, JS, REDUX)

• Приветствие и обсуждение текущих дел.  

• Упоминание о предстоящем собеседовании.  

• Переход к стриму и обсуждение теории.  

• Начало теории и практики по Redux.  

• Обсуждение использования Redux и его функций.  

• Проблемы с сохранением и настройкой звука.  

• Первое собеседование за долгое время.  

• Подготовка к собеседованию и учеба.  

• Переход к обсуждению Redux.  

• Объяснение Redux как стейдж-менеджера.  

• Основные задачи Redux и его преимущества.  

• Обсуждение чистых функций и их правил.  

• Различие между экшенами и редюсерами.  

• Примеры использования экшенов и редюсеров.  

• Сложности с пониманием и использованием Redux.  

• Объяснение слайсов и их использования.  

• Экспорт действий и редюсеров.  

• Проблемы с пониманием экспорта и его функций.  

• Подготовка к следующему этапу обучения.  

• Обсуждение планов на будущее и завершение стрима.  

• Обсуждение необходимости просмотра видео.  

• Решение посмотреть видео про фундаментальный JS.  

• Приветствие и начало объяснения.  

• Введение в утилиту fs.  

• Объяснение использования экспорта и импорта.  

• Пример использования экспорта и импорта в JS.  

• Объяснение работы с Redux и экспортом.  

• Пример использования Redux и экспорта.  

• Объяснение необходимости экспорта rootState и updater.  

• Объяснение использования Redux для управления состоянием.  

• Пример работы с Redux и слайсами.  

• Объяснение создания и использования Redux.  

• Обзор стратегий рендеринга в Next.js.  

• Описание клиентского и серверного рендеринга.  

• Преимущества и недостатки различных стратегий.  

• Объяснение статической генерации и инкрементальной регенерации.  

• Преимущества статической генерации для SEO.  

• Пример использования статической генерации в Next.js.  

• Стриминг позволяет получать информацию по частям, что ускоряет процесс.  

• В отличие от классического SSR, статическая генерация генерирует страницы на сервере, что уменьшает нагрузку на клиента.  

• Новый подход с использованием Vite и EAP рекомендован для версий 13 и выше.  

• Некоторые фреймворки, такие как Remix, не поддерживают статическую генерацию.  

• Другие, как Gatsby, поддерживают её.  

• Генерация страниц происходит на сервере, что снижает нагрузку на сервер.  

• Для статической генерации требуется отдельная настройка.  

• В новых версиях используется функция getStaticParams.  

• Инкрементная регенерация позволяет обновлять страницы по триггеру.  

• SSR и статическая генерация могут использоваться вместе.  

• Триггеры для регенерации могут быть по таймеру или событию.  

• В документации есть раздел, посвященный инкрементальной регенерации.  

• Пример сайта с динамическими и статическими страницами.  

• В процессе сборки можно увидеть, какие страницы генерируются на сервере.  

• Статические страницы генерируются заранее и кэшируются.  

• Для статизации динамических страниц используется функция getStatic.  

• Функция формирует набор страниц на основе данных.  

• Это позволяет сделать страницы статическими и ускорить загрузку.  

• Статическая генерация обеспечивает высокую производительность и быструю загрузку страниц.  

• Статические файлы не требуют выполнения серверного кода для каждого запроса.  

• Это преимущество особенно важно для больших сайтов.  

• Статические файлы генерируются при сборке сайта.  

• Эти файлы размещаются на сервере и не требуют серверной обработки.  

• При запросе пользователя сервер отдает голый файл, что происходит быстро.  

• Для создания статических страниц используется асинхронная функция.  

• Функция запрашивает все посты и формирует набор конкретных страниц.  

• Страницы генерируются на этапе сборки и размещаются на сервере.  

• Данные постов преобразуются в строки для корректной работы.  

• Страницы генерируются и размещаются на сервере, что позволяет избежать динамической загрузки.  

• Данные подгружаются при скролле страницы, что улучшает производительность.  

• Важно понимать, как данные появляются в области видимости.  

• Функция генерации страниц выполняется только в процессе сборки.  

• Для создания новых страниц используется динамический импорт.  

• Автор готовится к пробному собеседованию, изучая вопросы и ответы.  

• Видеокаст "Фронтенд: вопросы на собеседовании" помогает подготовиться к интервью.  

• Вопросы охватывают HTML, CSS и JavaScript, а также практические задачи.  

• Первый вопрос по HTML: что такое document type и для чего он используется.  

• Document type указывает тип документа и определяет, как браузер интерпретирует страницу.  

• Базовая структура HTML-страницы включает document type, метатеги и основной тег HTML.  

• Обсуждение важности семантики для поисковых роботов.  

• Основные теги: head, body, nav, article, section, footer.  

• Семантика помогает поисковым роботам лучше понимать структуру сайта.  

• Семантические теги должны описывать содержимое страницы.  

• Примеры: h1, h2, p, strong, em, b, i.  

• Стронг и м добавляют логическое выделение, а би и ай изменяют визуальный вид.  

• CSS расшифровывается как каскадная таблица стилей.  

• CSS используется для добавления стилей к элементам страницы.  

• Стили можно выносить в отдельный файл для удобства.  

• Четыре основных способа добавления стилей: онлайн, глобальные, внешние файлы, импорт.  

• Онлайн стили добавляются через атрибут style, глобальные стили через head, внешние файлы через link, импорт внутри файлов стилей.  

• Пять основных типов позиционирования: static, absolute, fixed, sticky, relative.  

• Static позиционирование по умолчанию, absolute позиционирование позволяет изменять положение в пикселях, fixed позиционирование двигается вместе со скролом, sticky позиционирование появляется при прокрутке, relative позиционирование относительно текущего положения.  

• Абсолютное позиционирование позволяет перемещать элемент относительно другого элемента или окна браузера.  

• Относительное позиционирование позволяет перемещать элемент относительно его начального положения.  

• Фиксированное позиционирование формирует новый поток и игнорирует позиционирование родителя.  

• Стики комбинирует фиксированное и относительное позиционирование, позволяя элементу вести себя как фиксированный внутри видимой области и как относительный при скролле.  

• Блочная модель CSS позволяет рассчитать итоговое пространство, занимаемое элементом на странице.  

• Включает контент, внутренний отступ, границу и внешний отступ.  

• Для точного размера элемента можно использовать свойство box-sizing со значением border-box.  

• В JavaScript существует восемь основных типов данных: строка, число, булево значение, символ, объект, null, undefined.  

• Оператор typeOf используется для определения типа данных.  

• Null и undefined показывают отсутствующие данные и могут быть преобразованы в объект.  

• Git используется для контроля версий кода.  

• Вопросы по фронтенду включают генерацию DOM, загрузку CSS, формирование дерева рендеринга и отрисовку страницы.  

• Рендеринг включает расчет положения элементов и отрисовку страницы.  

• Строгое равенство сравнивает значения и типы данных.  

• Нестрогое равенство сравнивает только значения, игнорируя типы данных.  

• Строгий режим позволяет избежать ошибок при сравнении значений с разными типами данных.  

• Строгий режим в JavaScript заменяет исключения на ошибки.  

• Можно включить строгий режим тремя способами: добавить строку `use strict` в начало документа, внутри функции или автоматически с помощью Babel.  

• Babel автоматически добавляет строку `use strict` при транспайлинге.  

• Babel-eslint позволяет объявлять функции как константы.  

• Функции, объявленные в Babel, могут использоваться после объявления.  

• В Babel-eslint функции создаются в основном потоке, что позволяет вызывать их до объявления.  

• Задача: создать функцию для проверки, является ли строка палиндромом.  

• Решение: использовать цикл для проверки каждого символа строки.  

• Обсуждение различных методов для переворачивания строки.  

• Вопрос о валидации и типах проверок.  

• Обсуждение различных критериев валидации и их полезности.  

• Упоминание о том, что валидация может быть полезна для автоматического выставления типов.  

• Валидация проверяет документы на соответствие веб-стандартам и выявляет ошибки.  

• Валидатор определяет тип документа и проверяет HTML-код на правильность и отсутствие ошибок.  

• Проверяются имена тегов и их вложенность.  

• Основные типы проверки: синтаксис, вложенность тегов, DOCTYPE и наличие посторонних тегов.  

• Для создания кнопок используются теги button, input и a.  

• Стилизация кнопок может быть переопределена с помощью inline-стилей.  

• Inline-стили указываются в HTML-файле и добавляются с помощью атрибута style.  

• Дефолтные стили элементов могут отличаться в разных браузерах.  

• Для кросс-браузерности используются normalize.css или reset.css.  

• Атрибут alt добавляется к тегу img для объяснения изображения.  

• Обязателен для использования и улучшает доступность страницы.  

• Используется для объяснения изображения в случае его отсутствия или ошибки.  

• Селектор указывает, к какому элементу или элементам на странице будет применен стиль.  

• Селекторы делятся на простые и составные.  

• Простые селекторы включают класс, ID, тип элемента и универсальный селектор.  

• Составные селекторы включают групповые селекторы, селекторы потомка и псевдо-классы.  

• Специфичность селектора определяет приоритет применения стиля.  

• Обобщающие селекторы имеют минимальный вес, конкретные теги и классы - более высокий.  

• Более подробные классы имеют еще более высокий приоритет.  

• Специфичность определяет, какие стили будут применены к элементу.  

• Существует четыре основных веса селекторов: инлайновый, атрибут, псевдо и элемент.  

• Вес селектора можно рассчитать, суммируя веса входящих элементов.  

• Сброс стилей удаляет все дефолтные стили, нормализация стабилизирует их для разных браузеров.  

• Сброс стилей требует повторного применения, нормализация делает стили одинаковыми для всех браузеров.  

• Выбор между сбросом и нормализацией зависит от поставленной задачи.  

• Объявление переменных через var позволяет получить доступ к ним до инициализации.  

• Объявление функций через var позволяет обращаться к ним в любом месте скрипта.  

• Объявление переменных через let и const не всплывает и не вызывает ошибок.  

• Логические операторы: &&, || и !.  

• Оператор && возвращает первое ложное значение, || возвращает первое истинное значение.  

• Оператор ! возвращает значение, противоположное истинному.  

• Таймеры позволяют вызывать функцию через определенный промежуток времени.  

• Интервалы позволяют вызывать функцию постоянно через определенный промежуток времени.  

• Для поиска самого короткого слова в строке можно использовать метод sort.  

• Метод sort сортирует массив по возрастанию длины слов.  

• Возвращается первый элемент массива, который является самым коротким словом.  

• Видео с реальным собеседованием на вакансию фронтенд-разработчика.  

• Собеседование было интересным и успешным, команда дала положительный фидбек.  

• Автор видео предлагает подписаться на телеграм-канал для помощи в трудоустройстве.  

• Обсуждение терминов: кол-стек, кью, опекью.  

• Упоминание собеседования и абстрактности темы.  

• Введение в микро- и макротаски.  

• Объяснение, что все это абстрактно и требует джобы.  

• Упоминание спецификации и необходимости объяснения.  

• Попытки найти и понять тему.  

• Объяснение работы кол-стека и ивент лупа.  

• Операции попадают в кол-стек и выполняются в веб апи.  

• Различие между микро- и макротасками.  

• Ивент луп как бесконечный цикл.  

• Синхронные операции и их выполнение.  

• Пример с сет тайм-аутом и слушателем событий.  

• Очередь задач и стек вызовов.  

• Пример выполнения функций и попадания в стек вызовов.  

• Ожидание новых задач и выполнение синхронных операций.  

• Различие между микро- и макротасками.  

• Примеры макротасков: сет тайм-аут, сетевые запросы, скрипты.  

• Примеры микротасков: промес, мульти сервер, отслеживание изменений страницы.  

• Микротаски позволяют вручную ставить задачи в очередь.  

• Это удобно для явного указания кода, который должен выполняться после текущего блока.  

• Микротаски выполняются после текущего блока кода, но до следующего ивента.  

• Ивент — это бесконечный цикл, выполняющий обработчики событий.  

• Браузер распределяет обработчики по очередям: микротаски, макротаски и синхронный код.  

• Микротаски включают промесы, функции и макротаски.  

• Синхронный код выполняется первым, затем микротаски и макротаски.  

• Проверка на наличие синхронного кода и микротасок происходит постоянно.  

• Это предотвращает блокировку интерфейса и позволяет выполнять запросы асинхронно.  

• Однопоточные приложения выполняют код синхронно.  

• Многопоточные приложения используют асинхронность.  

• В JavaScript используется один поток, но можно создать дополнительные с помощью веб-воркеров.  

• Обсуждение блокировки интерфейса и бесконечных циклов.  

• Вопрос о том, как избежать блокировки интерфейса при выполнении синхронных вызовов.  

• Обсуждение использования промисов для асинхронных вызовов.  

• Объяснение, что промисы выполняются синхронно, но не блокируют основной поток.  

• Пример с бесконечным циклом в теле промиса.  

• Вопрос о том, как запросы к бэкенду выполняются с использованием промисов.  

• Объяснение работы с сокетами и операционной системой.  

• Вопрос о связи промисов с синхронными функциями.  

• Объяснение, что синхронные функции всегда возвращают промисы.  

• Объяснение синтаксического сахара над промисами.  

• Использование ключевого слова "wait" для ожидания выполнения промиса.  

• Обработка ошибок в синхронных функциях с помощью try/catch.  

• Объяснение, что такое замыкания и как они работают.  

• Пример использования замыканий для сохранения контекста.  

• Вопрос о том, как замыкания помогают в программировании.  

• Объяснение прототипирования и наследования в JavaScript.  

• Пример использования прототипов для избежания дублирования кода.  

• Объяснение цепочки прототипов и статических методов.  

• Автор выражает недовольство классами и статическими методами.  

• Обсуждается, что статические методы не требуют создания экземпляра класса.  

• Пример использования статических методов в Promises.  

• Пример использования Promises и статических методов.  

• Автор объясняет, что статические методы могут быть полезны для вызова бэкенд-методов.  

• Упоминается проект Hero, где использовались статические методы.  

• Автор планирует запустить стрим перед собеседованием.  

• Описывает свой график на следующий день, включая время на дорогу и подготовку.  

• Просит зрителей досмотреть стрим до конца.  

• Обсуждаются различия между массивами и коллекциями.  

• Сет используется для уникальных значений, а мап — для ключ-значение пар.  

• Массив и мап имеют свои методы и способы инициализации.  

• Автор упоминает сборщик мусора, но решает отложить обсуждение на завтра.  

• Просит зрителей поставить лайк для продвижения стрима.  

• Завершает стрим, прощается со зрителями и желает спокойной ночи.