JavaScript для FrontEnd-разработчиков. Написание. Тестирование. Развертывание

В книге последовательно затронуты все аспекты производства JavaScript-кода: от выбора архитектуры и конструирования кода до покрытия модульными тестами, отладки, интеграционного тестирования, сборки и непрерывной поставки вашего кода.

👉 @frontendInterview

Function Cache

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

Примеры:
var complexFunction = function(arg1, arg2) { /* complex calculation in here */ };
var cachedFunction = cache(complexFunction);

cachedFunction('foo', 'bar');
// complex function should be executed

cachedFunction('foo', 'bar');
// complex function should not be invoked again, instead the cached result should be returned

cachedFunction('foo', 'baz');
// should be executed, because the method wasn't invoked before with these arguments

👉 @frontendInterview

​Хотите продолжать учиться во фронтенде, но не знаете, куда идти дальше?

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

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

Но во многих компаниях не дают такие планы. А там, где дают, они направлены на рост внутри одной компании, а не всего рынка в целом.

При этом составить себе план сложно, ведь в разных компаниях требуют разные навыки, а сразу всё изучить невозможно — надо как-то расставлять приоритеты. И ещё есть софт-скиллы, с которыми всё тоже непросто.

Мы решили для вас эту проблему и создали скоринг для комплексной оценки хард- и софт-скиллов, которые востребованы прямо сейчас.

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

Оценка состоит из трёх этапов:

— автоматизированный технической скоринг — тест для проверки 56 групп навыков;

— техническое собеседование с экспертами из «Яндекса», «Связного», PandaDoc и других компаний;

— психологическое интервью для оценки софт-скиллов по авторской методике, проверенной на 150 разработчиках.

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

Начать оценку, чтобы получить план и начать осознанно развиваться, можно уже сейчас — по ссылке. До 1 сентября оценку можно пройти по специальной цене.

Что такое WebSocket? В чем принцип его работы?

WebSocket (веб-сокеты) — независимый веб-протокол, который позволяет создавать интерактивное соединение между сервером и клиентом (браузером) и обмениваться сообщениями в реальном времени. В отличие от HTTP, веб-сокеты позволяют работать с двунаправленным потоком данных, поэтому технология является уникальной.

👉 @frontendInterview

👉 @frontendInterview

Что такое Service Workers?

Говоря простыми словами, это сценарий, который запускается браузером в фоновом режиме. Он никак не связан с веб-страницей или DOM и предоставляет функции “из коробки”, такие как обработка сетевых запросов, push-уведомления и фоновая синхронизация. Service workers обеспечивают возможность работы offline.

Service worker — посредник между клиентом и сервером, пропускающий через себя все запросы к серверу. С его помощью можно перехватывать все запросы “на лету”.

👉 @frontendInterview

👉 @frontendInterview

Что такое делегирование событий (Event Delegation)?

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

Для работы делегирования событий нужно 3 шага:
1. Определить родителя элементов для отслеживания событий
2. Прикрепить на него обработчик событий
3. Использовать event.target для выбора целевого элемента

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Веб-дизайн для начинающих. HTML, CSS, jаvanoscript и веб-графика

Книга поможет освоить веб-дизайн, не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы JS и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.

👉 @frontendInterview

Detect Pangram

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

Пример:
В предложении "The quick brown fox jumps over the lazy dog" есть все буквы от A до Z.

👉 @frontendInterview

Что такое объектная обертка (Wrapper Objects)?

Примитивы строка, число и boolean имеют свойства и методы, несмотря на то, что они не являются объектами:

 let name = 'marko'

 console.log(typeof name) // string
 console.log(name.toUpperCase()) // MARKO

Name — это строка (примитивный тип), у которого нет свойств и методов, но когда мы вызываем метод toUpperCase(), это приводит не к ошибке, а к «MARKO».

Причина такого поведения заключается в том, что name временно преобразуется в объект. У каждого примитива, кроме null и undefined, есть объект-обертка. Такими объектами являются String, Number, Boolean, Symbol и BigInt. В нашем случае код принимает следующий вид:

 console.log(new String(name).toUpperCase()) // MARKO

Временный объект отбрасывается по завершении работы со свойством или методом.

👉 @frontendInterview

Пссс, хочешь подарочек?😏

Вот тебе канал со сливами дорогостоящих топовых курсов и литературы:

Букич IT

Быстренько подписывайся и сохраняй материалы, пока SkillFactory, GeekBrains, Яндекс.Практикум и другие авторы не снесли данный канал.

👉 @frontendInterview

В чем разница между явным и неявным преобразованием или приведением к типу (Implicit and Explicit Coercion)?

Неявное преобразование — это способ приведения значения к другому типу без нашего ведома (участия).

Предположим, у нас есть следующее:

 console.log(1 + '6')
 console.log(false + true)
 console.log(6 * '2')

Результатом первого console.log будет 16. В других языках это привело бы к ошибке, но в JS 1 конвертируется в строку и конкатенируется (присоединяется) c 6. Мы ничего не делали, преобразование произошло автоматически.

Результатом второго console.log будет 1. False было преобразовано в 0, true — в 1. 0 + 1 = 1.

Результатом третьего console.log будет 12. Строка 2 была преобразована в число перед умножением на 6.

Явное преобразование предполагает наше участие в приведении значения к другому типу:

 console.log(1 + parseInt('6'))

В этом примере мы используем parseInt для приведения строки 6 к числу, затем складываем два числа и получаем 7.