Essential TypeScript 4: From Beginner to Pro 2nd Edition(2021)

Узнайте об основных и дополнительных возможностях TypeScript, популярного супернабора языка JavaScript, в котором добавлена поддержка статической типизации. TypeScript сочетает в себе возможности типизации C# или Java с гибкостью JavaScript, уменьшая количество ошибок типизации и обеспечивая более легкий путь к разработке JavaScript.

👉 @frontendInterview

Count the divisible numbers

Создайте функцию, которая принимает 3 числа - x, y, k. И возвращает количество целых чисел в промежутке от x до y, которые делятся на k.

Пример:
x = 6, y = 11, k = 2
Функция должна вернуть 3, так как в промежутке от 6 до 11 три числа делятся на 2 (6, 8, 10).

👉 @frontendInterview

Как фронтендеру расти дальше?

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

Как вариант, пройти обучение с акцентом на практику, которое было создано руками тимлидов с опытом работы в Яндексе, Вконтакте, TON и Frogly.

Здесь вы будете постепенно добавлять в проект самые актуальные технологии и разбираться в том, как они работают.

За 5 месяцев обучения вы научитесь:
- находить и лечить сложные ошибки производительности
- готовить Service Worker и PWA, чтобы сайт работал в офлайне
- делать сайт доступным для людей с ограниченными способностями
- DevOps штукам для фронтендера
- создавать серверную часть веб-приложения самостоятельно с нуля

Приходите прокачивать скиллы
А по промокоду FRONTINT22 для вас скидка 7% на ближайший поток.

👉 @frontendInterview

Объясните, что делает приведенный выше код

Приведенный код использует генераторную функцию (function*) и ключевое слово yield для создания итератора, который будет возвращать значения в цикле.

Давайте разберем код по шагам:
1. Сначала определяется генераторная функция fn, которая принимает аргумент num. Генераторная функция отличается от обычной функции тем, что может приостанавливать свое выполнение и возобновлять его позднее.

2. Внутри генераторной функции есть цикл for, который итерирует от 0 до num - 1. В каждой итерации цикла выполняется следующая строка кода.

3. Ключевое слово yield используется для приостановки выполнения функции и возврата значения во время каждой итерации цикла. В данном случае, yield console.log(i) приостанавливает выполнение функции и выводит значение i в консоль. Затем yield возвращает undefined.

4. После выполнения каждой итерации цикла, выполнение генераторной функции приостанавливается, и управление передается обратно во внешний код.

5. Затем создается переменная loop, которая получает результат вызова генераторной функции fn(5). Это создает итератор, связанный с генераторной функцией.

6. Вызов loop.next() запускает выполнение генераторной функции до первого ключевого слова yield. В данном случае, это приведет к выполнению console.log(0) и возврату объекта {value: undefined, done: false}. Значение value равно undefined, потому что console.log() не возвращает никакого значения.

7. Затем вызов loop.next() возобновляет выполнение генераторной функции сразу после последнего ключевого слова yield. В данном случае, это приведет к выполнению console.log(1) и возврату объекта {value: undefined, done: false}.

Таким образом, код последовательно выводит числа от 0 до 1 в консоль.

👉 @frontendInterview

👉 @frontendInterview

Объяснение:

При использовании флага "global" или "sticky" у RegExp появляется состояние. У него есть lastIndex полученный из предыдущего вызова регулярки. При первом вызове lastIndex'у присваивается 5 (индекс на котором регулярка остановилась) и при следующем он начинает поиск с этого индекса, но т. к. это конец строки - там ничего нет и он выдаёт false (и lastIndex, кстати, обратно устанавливается в 0).

👉 @frontendInterview

Можете ли вы описать суть методологии git flow?

Git-flow — наиболее популярная методология разработки проектов с использованием git.

Зачем нам вообще нужны какие-то методологии для работы с git?
Дело в том, что сам git не привязывает нас к какому-либо определённому способу разработки, и каждый разработчик, в теории, может работать с контролем версий так, как он хочет. Чтобы в таких условиях не погрузить наш репозиторий в хаос, нам нужно придумать и донести до всех разработчиков некий единый стандарт для работы с контролем версий в проекте.

Всего в git-flow существует 5 типов веток, каждый из которых несёт определённую функциональную нагрузку.

 develop

Ветка существует на протяжении всего процесса разработки. В данную ветку попадает стабильный код новых фич и багфиксов.

 feature-*

Временные ветки, которые создаются для каждой нетривиальной фичи.
Каждая ветка feature отделяется от develop и мержится обратно в него. После завершения работы над фичей и финального мержа в develop, ветка удаляется.

 master

Ветка, куда поступают самые стабильные изменения, которые идут в релиз. Существует на протяжении всего процесса разработки.
В ветку master мержатся только изменения из веток release и hotfix. На каждый такой мерж создаётся тег с именем версии.

 release-*

Временные ветки, создаваемые для подготовки новой версии к релизу. В эти ветки попадают правки багов и настройки перед релизом.
Ветка выходит из develop и может мержится в develop по ходу подготовки версии. Как только работа над версией заканчивается, происходит финальный мерж ветки в master и develop, после чего ветка удаляется, а коммиту мержа в master присваивается тег новой версии.

 hotfix-*

Временные ветки создаются для правки критических проблем в релизной версии.
Ветка отходит от master и по завершению правок багов мержится обратно. Сама ветка после этого удаляется, а коммиту мержа в master присваивается тег новой версии.

👉 @frontendInterview

​Как вырасти от junior до middle? Middle-специалист отличается не только опытом и уровнем владения технологиями, но и софт скилами. Курс Яндекс Практикума «Мидл фронтенд-разработчик» составлен так, чтобы вы могли освоить и то, и другое а ещё:

• разработать мессенджер, используя только JavaScript, Typenoscript, CSS и API браузера;
• познакомиться с теорией и отработать её на практике в больших проектах;
• научиться брать ответственность за решения и вкладываться в общий результат;
• самостоятельно декомпозировать задачи и распределять время;
• исследовать смежные сферы программирования, без которых невозможен фронтенд:
• информационную безопасность, прототипирование интерфейсов, командную работу, DevOps, ООП.

На всех этапах вас будут сопровождать опытные разработчики: мы не дадим просесть по учёбе и поможем выкроить время на образование. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты. А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы.

Пройдите первый бесплатный урок

👉 @frontendInterview

От чего зависит успех собеседования?

Front End Team Lead BCS Денис Воронин отвечает на этот и другие вопросы о прохождении и проведении интервью на своем youtube-канале.

«Собесы. В чем смысл?» — это не рецепт успеха, а рефлексия разработчика с 10-летним опытом о том, что собеседования — это в первую очередь про человеческие отношения.

👉 @frontendInterview

👉 @frontendInterview

​Что такое Shadow DOM?

Shadow DOM (Shadow Document Object Model) - это технология, которая позволяет создавать и изолировать компоненты веб-страницы. Она предоставляет возможность создавать и использовать собственные элементы и стили, которые не будут влиять на остальную часть страницы.

Когда вы используете Shadow DOM, вы создаете отдельное "теневое дерево" DOM для вашего компонента. Это означает, что структура и стили вашего компонента остаются скрытыми от остальной части страницы. Это полезно, когда вы хотите создать компоненты с собственным поведением и стилями, которые не должны быть доступными или изменяемыми извне.

Основные преимущества использования Shadow DOM:
1. Изоляция: Компоненты, созданные с использованием Shadow DOM, не могут быть непреднамеренно изменены или повреждены извне. Это позволяет разработчикам создавать надежные и независимые компоненты.

2. Локальные стили: Стили, заданные внутри Shadow DOM, применяются только к элементам внутри компонента. Это позволяет избежать конфликтов стилей с другими частями страницы.

3. Повторное использование: Компоненты, созданные с использованием Shadow DOM, могут быть повторно использованы на разных страницах или в разных проектах без влияния на другие части кода.

4. Инкапсуляция: Shadow DOM позволяет скрыть внутреннюю структуру и детали реализации вашего компонента, что способствует лучшей абстракции и модульности кода.

👉 @frontendInterview

JavaScript с нуля

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

👉 @frontendInterview

Recursive Replication

Создайте рекурсивную функцию replicate, которая принимает два аргумента: times и number и возвращает массив, состоящий из number, повторенного times раз.

Пример:
replicate(3, 5) вернёт [5,5,5]

👉 @frontendInterview