Mark Myers «A Smarter Way to Learn JavaScript»

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

👉 @frontendInterview

Arrays Similar

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

Примеры:
const arr1 = [1, 2, 2, 3, 4],
arr2 = [2, 1, 2, 4, 3],
arr3 = [1, 2, 3, 4],
arr4 = [1, 2, 3, "4"]

arraysSimilar(arr1, arr2);
// Should equal true

arraysSimilar(arr2, arr3);
// Should equal false

arraysSimilar(arr3, arr4);
// Should equal false

👉 @frontendInterview

Как работают веб-приложения?

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

Любое веб-приложение, если оно работает в браузере, работает на 3 основных технологиях: HTML, CSS и JS. Ещё есть WASM, но о нём в этой статье мы говорить не будем.
Все приложения, которыми вы пользуетесь в браузере: GoogleDocs, Notion, Яндекс.Карты, Spotify, YouTube — сделаны с помощью этих технологий.
Но любое сложное приложение — это не только картинка в браузере, это ещё и данные, которые пользователи используют или создают. Эти данные нужно уметь хранить, обрабатывать и выводить.
Хранением и обработкой данных обычно занимается сервер или бэкенд.
Бэкенд — область веб-технологий, работающих на сервере, а также внутренняя часть серверной системы, занимается обработкой данных.
А архитектура, в которой участвуют сервер (бэкенд) и клиент (браузер, фронтенд) называется клиент-серверной.

👉 @frontendInterview

👉 @frontendInterview

Фиктивные объекты и данные, моки, стабы

Среди фиктивных объектов можно выделить две группы: моки и стабы.

Стабы (англ. stub) заменяют объекты, но сами ничего не проверяют. Их реализация простая, а зачастую — даже ничего не делает вовсе. Стабы нужны, чтобы заменить собой зависимость в системе и упростить окружение для тестов.

Моки (англ. mock) тоже заменяют зависимости, но при этом позволяют проверять предположения. Они могут следить за вызовами методов, аргументами этих вызовов и т. д. Моки удобны при тестировании функций с побочными эффектами.

Фиктивные объекты можно представить как беговые дорожки, которые заменяют собой настоящий большой парк. Только стабы — это дорожки попроще: крутящаяся лента без дисплея и настроек; а моки — дорожки, которые следят за темпом, ускорением, сердцебиением и т.д.

👉 @frontendInterview

👉 @frontendInterview

Что такое технический долг?

При разработке программ часто не хватает времени на всё, что хотелось бы сделать. Разработчикам приходится выбирать самые важные задачи и делать в первую очередь их. Обычно больше времени уделяют тому, что видит пользователь. Оставшиеся задачи относятся к улучшению кода и инфраструктуры проекта — такие задачи называют техническим долгом.

От тех. долга нужно избавляться, потому что он вредит проекту. Чем больше долгов накоплено в проекте, тем больше времени будет уходить на разработку новых фич и правку ошибок.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

JavaScript для профессиональных веб-разработчиков.

Самое полное руководство по современному JavaScript
Как максимально прокачать свои навыки и стать топовым JS-программистом? Четвертое издание «JavaScript для профессиональных веб-разработчиков» идеально подойдет тем, кто уже имеет базовые знания и опыт разработки на JavaScript. Автор сразу переходит к техническим деталям, которые сделают ваш код чистым и переведут вас с уровня рядового кодера на высоту продвинутого разработчика.

👉 @frontendInterview

Fibonacci Generator

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

Пример:
var fib = genfib();
fib(); // -> returns 0
fib(); // -> returns 1
fib(); // -> returns 1
fib(); // -> returns 2

👉 @frontendInterview

content

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

Пример
a::after {
content: "👉";
margin-right: 5px;
}

Изображение в качестве содержимого. Может применяться к любому элементу.
div {
content: url("http://www.example.com/test.png");
}

Все значения ниже могут применяться ТОЛЬКО к псевдоэлементам ::before и ::after.

👉 @frontendInterview

HTML тег data

Элемент <data> позволяет хранить в своём содержимом данные в формате, понятном человеку, а в атрибуте value — в формате, понятном машинам.

Так можно передать числовое значение для текста:
Жили у бабуси <data value="2">два</data> весёлых гуся.

Ещё один пример: вы разрабатываете интернет-магазин, который занимается продажей компьютеров. У вас есть множество типов, моделей и конфигураций — и у каждого есть свой ID, который используется в базе данных. Эти ID мало что скажут пользователям, поэтому лучше выводить названия компьютеров в формате, который они могут понять. Но тут же в атрибуте value тега <data> можно хранить ID, который используется для удобного доступа к нужной модели:

<ul>
<li>
<data value="2020138256">
MacBook Pro 13 M1 8 Gb 256 Gb mid. 2020
</data>
</li>
<li>
<data value="2020138512">
MacBook Pro 13 M1 8 Gb 512 Gb mid. 2020
</data>
</li>
</ul>

👉 @frontendInterview