Frontender's notes. Страница 57

📄Дата и время🕔

Встречайте новый встроенный объект: Date. Он содержит дату и время, а также предоставляет методы управления ими.
Например, его можно использовать для хранения времени создания/изменения, для измерения времени или просто для вывода текущей даты.

https://telegra.ph/Data-i-vremya-03-06

​​Асинхронные итераторы и генераторы

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

Обычные итераторы и генераторы прекрасно работают с данными, которые не требуют времени для их создания или получения.
Когда мы ожидаем, что данные будут поступать асинхронно, с задержками, можно использовать их асинхронные аналоги и for await..of вместоfor..of.
Синтаксические различия между асинхронными и обычными итераторами:

Перебираемый объект Асинхронно перебираемый Метод для получения итератора Symbol.iterator Symbol.asyncIterator next() возвращает {value:…, done: true/false} промис, который завершается с {value:…, done: true/false} Синтаксические различия между асинхронными и обычными генераторами:

Генераторы
Асинхронные генераторы Объявление function* async function* generator.next() возвращает {value:…, done: true/false} промис, который завершается с {value:…, done: true/false} В веб-разработке мы часто встречаемся с потоками данных, когда они поступают по частям. Например, загрузка или выгрузка большого файла.
Мы можем использовать асинхронные генераторы для обработки таких данных. Также заметим, что в некоторых окружениях, например, браузерах, есть и другое API, называемое Streams (потоки), который предоставляет специальные интерфейсы для работы с такими потоками данных, их преобразования и передачи из одного потока в другой (например, загрузка из одного источника и сразу отправка в другое место).

📌Привязка контекста к функции📌

⚠️При передаче методов объекта в качестве колбэков, например для setTimeout, возникает известная проблема – потеря this.
Эта статья даёт ясное понимание принципов работы колбэков и поведений объектов.

https://learn.javascript.ru/bind

​«Лаборатории Касперского» верят, что в будущем технологии улучшат жизнь всего человечества.
Главная задача наших специалистов — обеспечить безопасность, чтобы люди могли доверять инновациям и использовать безграничный потенциал технологического прогресса. Прямо сейчас компания ищет тех, кому интересно создавать безопасное будущее вместе с нами 💪🏽
«Лаборатория Касперского» не жалеет ресурсов на своих сотрудников: мы входим в топ-5 по уровню зарплат в отрасли, а на ДМС каждый год тратим сумму, в два раза превосходящую бюджет Норфолкских островов.
Посмотрите наши новые вакансии, их много — для совершенно разных направлений: http://bit.ly/3rkPIfb

💡Promise API

Объект Promise (промис) используется для отложенных и асинхронных вычислений.

Синтаксис
new Promise(executor);
new Promise(function(resolve, reject) { ... });

Параметры

executor
Объект функции с двумя аргументами resolve и reject. Функция executor получает оба аргумента и выполняется сразу, еще до того как конструктор вернет созданный объект. Первый аргумент (resolve) вызывает успешное исполнение промиса, второй (reject) отклоняет его.
Обычно функция executor описывает выполнение какой-то асинхронной работы, по завершении которой необходимо вызвать функцию resolve или reject. Обратите внимание, что возвращаемое значение функции executor игнорируется.

В классе Promise есть 5 статических методов. Давайте познакомимся с ними.
https://telegra.ph/Promise-API-03-03

​​💡Про BigInt.

Новая возможность
Эта возможность была добавлена в язык недавно. Узнать, где есть поддержка, можно на https://caniuse.com/#feat=bigint.

BigInt – это специальный числовой тип, который предоставляет возможность работать с целыми числами произвольной длины.

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

const bigint = 1234567890123456789012345678901234567890n;

const sameBigint = BigInt("1234567890123456789012345678901234567890");

const bigintFromNumber = BigInt(10); // то же самое, что и 10n
Математические операторы

BigInt можно использовать как обычные числа, к примеру:

alert(1n + 2n); // 3
alert(5n / 2n); // 2

Обратите внимание: операция деления 5/2 возвращает округлённый результат, без дробной части. Все операции с числами типа bigint возвращают bigint.
В математических операциях мы не можем смешивать bigint и обычные числа:

alert(1n + 2); // Error: Cannot mix BigInt and other types

Мы должны явно их конвертировать: используя либо BigInt(), либо Number(), например:

let bigint = 1n;
let number = 2;

// конвертируем number в bigint
alert(bigint + BigInt(number)); // 3

// конвертируем `bigint` в number
alert(Number(bigint) + number); // 3

Конвертирование bigint в число всегда происходит неявно и без генерации ошибок, но если значение bigint слишком велико и не подходит под тип number, то дополнительные биты будут отброшены, так что следует быть осторожными с такими преобразованиями.
К BigInt числам нельзя применить унарный оператор +
Унарный оператор +value является хорошо известным способом конвертировать произвольное значение value в число.
Данный оператор не поддерживается при работе с BigInt числами.

let bigint = 1n;
alert( +bigint ); // SyntaxError: Unexpected identifier

Операции сравнения
Операции сравнения, такие как <, >, работают с bigint и обычными числами как обычно:

alert( 2n > 1n ); // true
alert( 2n > 1 ); // true

Пожалуйста, обратите внимание, что обычные и bigint числа принадлежат к разным типам, они могут быть равны только при нестрогом сравнении ==:

alert( 1 == 1n ); // true
alert( 1 === 1n ); // false

Логические операции
В if или любом другом логическом операторе bigint число ведёт себя как обычное число.
К примеру, в if bigint 0n преобразуется в false, другие значения преобразуются в true:

if (0n) {
// никогда не выполнится
}

Логические операторы ||, && и другие также работают с bigint числами как с обычными числами:

alert( 1n || 2 ); // 1
alert( 0n || 2 ); // 2

Песочница для JavaScript и TypeScript прямо в твоем редакторе.
Выполняет код по мере написания, показывает результаты рядом с кодом, даже сохраняться не обязательно.

Сделано с любовью русскими в 🦘Австралии 🦘

Есть бесплатная Community версия, а по ссылке скидка 15% на Pro версию.

https://quokkajs.com/pro/?referrer=tfrontendernotes?discount=FRONTENDER_NOTES_T_GYT56V

​​💥Angular VS React. 🖥️

REACT ⚛
- Когда использовать React?: - Используйте это приложение, если вы хотите разрабатывать нативные приложения, гибридные приложения или веб-приложения.
- Написан на: JavaScript.
- Процесс обучения : Его легче понять по сравнению с Angular. Однако при дополнении с помощью redux трудно научиться.
- Клчючевые фичи:
1. Дает вам свободу выбора инструментов, архитектуры и библиотек для разработки приложения.
2. Предлагает ограниченную свободу и гибкость.
3. Позволяет использовать сторонние библиотеки
4. Сохранение времени
5. Простота и возможность сборки
6. Полностью поддерживается Facebook
7. Лучший пользовательский интерфейс и очень высокая производительность
8. Более быстрое развитие
9. Стабильность кода с однонаправленной привязкой данных
10. Компоненты React



ANGULAR 🅰️
- Когда использовать Angular?: Вам следует использовать этот фреймворк, если вы хотите разработать одностраничное приложение и / или мобильные приложения.
- Написан на: TypeScript.
- Процесс обучения : Изучение Angular непросто для новичков. Таким образом, требуется много тренировок.
- Клчючевые фичи:
1. Встроенная поддержка AJAX, HTTP и наблюдаемых
2. Поддержка большого сообщества
3. В соответствии с технологиями
4. Машинопись предлагает эффективность
5. Более чистое и четкое кодирование
6. Расширенная поддержка обработки ошибок
7. Плавные обновления с использованием angular CLI
8. Формы и проверка
9. Теневой DOM / локальный CSS
10. Разделение пользовательского интерфейса и бизнес-логики

Специально для разработчиков, Яндекс организует крутую сессию в Clubhouse YACR. Работа в Яндексе — как зарабатывать и расти внутри компании.

Основные темы:
- Как попасть в Яндекс. Расскажут о вступительных испытаниях, специфике их прохождения и внутренней кухней компании.
- Про доход. Сколько в компании платят, что такое опционы и зачем они нужны.
- Карьерные перспективы. Можно ли расти внутри и как из джунов становятся топ-менеджерами.

Подключайтесь к разговору завтра (4 марта) в 10:00. Ловите ссылку - https://www.joinclubhouse.com/event/xeOaAAyd

​​⚛️Лучшие фреймворки ReactJS.💡

Next JS
Next.js дает вам лучший опыт разработчика со всеми функциями, необходимыми для производства: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое. Конфигурация не требуется.

Gatsby JS
Создавайте невероятно быстрые и насыщенные веб-интерфейсы, объединяющие все ваши любимые службы и контент. Создавайте сайты электронной коммерции, целевые страницы, блоги и многое другое за считанные минуты.

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


Blueprint JS

Blueprint — это набор компонентов пользовательского интерфейса React, которые охватывают большинство общих элементов интерфейса, шаблонов и взаимодействий в Интернете. Использование Blueprint гарантирует, что вы получите элегантный и простой в использовании пользовательский интерфейс, что позволит вам сосредоточиться на создании продукта, а не на элементарных элементах, которые его составляют. Повысьте свою производительность с помощью набора высококачественных базовых компонентов, которые можно использовать «из коробки», а универсальные концепции дизайна и модификаторы применимы ко всем компонентам. Blueprint был разработан с нуля для настольных приложений, поэтому он не был тщательно протестирован в мобильных веб-браузерах (iPad работает нормально).

🤔Когда использовать Flexbox и когда использовать CSS-сетку🚀

В последнее время мы всё чаще натыкаемся на споры вокруг использования CSS-Grid и Flexbox. В этой статье мы подробно описали каждый из них и дали точное понятие, когда использовать CSS-Grid а когда лучше обратится к Flexbox.

​​10 качеств, которые отличают хорошего программиста

1. Сильные технические навыки
Большая ошибка кадровиков заключается в том, что они нанимают людей, исходя из списка требований. Вместо того, чтобы искать человека с тремя года опыта программирования на С++ и годом на Java, они смотрят на весь список того, что он умеет. А ведь на самом деле, если программист выучил нужный для работы язык всего год назад, но до этого много лет программировал на другом языке, то он идеальный кандидат для этой должности из-за хорошего бекграунда в других областях.

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

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

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

5. Увлечение работой
Многие разработчики склонны к тому, чтобы просто выполнять свою работу с девяти до шести, но рекрутеры обычно ищут людей, которые с удовольствием по несколько часов подряд будут решать какую-то интересную задачу, требующую решения. Часто таких сотрудников можно найти, если в процессе собеседования спрашивать их про хобби и другие интересы. Настоящие программисты — это гики, которые в свободное от работы время играют в игры, собирают серверы или создают приложения для друзей. Это не самая главная черта хорошего программиста, но зачастую именно благодаря ей можно найти действительно стоящих сотрудников.

6. Стрессоустойчивость
Программирование может быть чрезвычайно стрессовой профессией. Когда поставлены жесткие сроки и ничего не работает, легко потерять рассудок и начать сходить с ума. Идеальный программист может справиться с самой сложной стрессовой ситуацией, и, что самое главное — будет в состоянии продолжать работать.

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

8. Умение работать в команде
Программист редко работает в одиночку, даже если он единственный разработчик в компании. Для него очень важно умение работать с другими программистами, бизнес-пользователями, маркетингом и отделом продаж.

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

10. Соблюдение сроков
Большинство программистов работает над проектами с указанием сроков. Понятно, что менеджеры должны выставлять разумные сроки для разработки и отладки приложений, но и сами программисты должны проявлять уважение к дедлайнам. Важно определить, что кандидат будет делать все возможное, чтобы «вписаться» в назначенные сроки.

Макеты для верстки — telegram канал, куда выкладываются уникальные дизайн-макеты для тренировок. Верстайте, оценивайте свои навыки, добавляйте проекты в портфолио!🚀

​​📌Синтаксис "new Function"

✅Синтаксис для объявления функции:

let func = new Function([arg1, arg2, ...argN], functionBody);

Функция создаётся с заданными аргументами arg1...argN и телом functionBody.
Это проще понять на конкретном примере. Здесь объявлена функция с двумя аргументами:
let sum = new Function('a', 'b', 'return a + b');
alert( sum(1, 2) ); // 3

А вот функция без аргументов, в этом случае достаточно указать только тело:
let sayHi = new Function('alert("Hello")');
sayHi(); // Hello

Главное отличие от других способов объявления функции, которые были рассмотрены ранее, заключается в том, что функция создаётся полностью «на лету» из строки, переданной во время выполнения.
Все предыдущие объявления требовали от нас, программистов, писать объявление функции в скрипте.
Но new Function позволяет превратить любую строку в функцию. Например, можно получить новую функцию с сервера и затем выполнить её:


let str = ... код, полученный с сервера динамически ...

let func = new Function(str);
func();

Это используется в очень специфических случаях, например, когда мы получаем код с сервера для динамической компиляции функции из шаблона, в сложных веб-приложениях.
Обычно функция запоминает, где родилась, в специальном свойстве [[Environment]]. Это ссылка на лексическое окружение (Lexical Environment), в котором она создана.
Но когда функция создаётся с использованием new Function, в её [[Environment]] записывается ссылка не на внешнее лексическое окружение, в котором она была создана, а на глобальное. Поэтому такая функция имеет доступ только к глобальным переменным.

function getFunc() {
let value = "test";
let func = new Function('alert(value)');
return func;
}
getFunc()(); // ошибка: value не определено

​​🤔🔢Нужна ли математика фронтенд-разработчику?📊

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

Так кто из них прав?!

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

Если вы разрабатываете сложное веб-приложение с кучей анимаций и мат. вычислений на стороне клиента - без знания математики вы обречены на провал.
Так же знание дискретной математики и базовой комбинаторики является обязательным при приёме на работу в IT компаниях.

Итого: Если вы делаете первые шаги в профессии фронтенд-разработчика, вы можете спокойно обойтись без математики, а дальше без нее никак...

​✅ Построй карьеру в IT, научись делать сайты и зарабатывать в $$$? Стань Front-end разработчиком!
⠀
👨‍💻 Это программист, который создает интерфейсы приложений, веб-сервисов и сайтов. Ту часть сайта, которую видят пользователи. Сегодня это востребованная профессия, которая позволяет работать в ТОП-компаниях и получать высокую ЗП!

Это твой реальный шанс:
◾️работать из дома (удаленно или фриланс);
◾️больше зарабатывать;
◾️брать интересные проекты;
◾️перестать работать 24/7, самому составлять график.

🎁 Среди участников на вебинаре разыграем 3 бесплатных места для обучения.
⠀
Регистрируйся на бесплатный вебинар и на практике попробуй себя в веб-разработке.
⠀
Для регистрации жми на кнопку сразу под изображением 👇

​​📄Взаимодействие: alert, prompt, confirm В JavaScript.🖥️

Так как мы будем использовать браузер как демо-среду, нам нужно познакомиться с несколькими функциями его интерфейса, а именно: alert, prompt и confirm.
alert
С этой функцией мы уже знакомы. Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».
Например:
alert("Hello");

Это небольшое окно с сообщением называется модальным окном. Понятие модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».
prompt
Функция prompt принимает два аргумента:
result = prompt(title, [default]);

Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
title
Текст для отображения в окне.
default
Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.
Квадратные скобки в синтаксисе [...]
Квадратные скобки вокруг default в описанном выше синтаксисе означают, что параметр факультативный, необязательный.
Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result. Пользователь также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc. В этом случае значением result станет null.
Вызов prompt возвращает текст, указанный в поле для ввода, или null, если ввод отменён пользователем.
Например:
let age = prompt('Сколько тебе лет?', 100);
alert(`Тебе ${age} лет!`); // Тебе 100 лет!

Для IE: всегда устанавливайте значение по умолчанию
Второй параметр является необязательным, но если не указать его, то Internet Explorer вставит строку "undefined" в поле для ввода.
Запустите код в Internet Explorer и посмотрите на результат:
let test = prompt("Test");

Чтобы prompt хорошо выглядел в IE, рекомендуется всегда указывать второй параметр:
let test = prompt("Test", ''); // <-- для IE

confirm
Синтаксис:
result = confirm(question);

Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.
Результат – true, если нажата кнопка OK. В других случаях – false.
Например:

let isBoss = confirm("Ты здесь главный?");
alert( isBoss ); // true, если нажата OK

Итого
Мы рассмотрели 3 функции браузера для взаимодействия с пользователем:

alert
показывает сообщение.

prompt
показывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный в поле ввода текст или null, если была нажата кнопка «Отмена» или Esc с клавиатуры.

confirm
показывает сообщение и ждёт, пока пользователь нажмёт OK или Отмена. Возвращает true, если нажата OK, и false, если нажата кнопка «Отмена» или Esc с клавиатуры.

📌Все эти методы являются модальными: останавливают выполнение скриптов и не позволяют пользователю взаимодействовать с остальной частью страницы до тех пор, пока окно не будет закрыто.
На все указанные методы распространяются два ограничения:
Расположение окон определяется браузером. Обычно окна находятся в центре.
Визуальное отображение окон зависит от браузера, и мы не можем изменить их вид.
Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатой функциональностью для взаимодействия с пользователем, но если «навороты» не имеют значения, то данные методы работают отлично.

​​📖Ключевое слово «this» в методах🖥️

Как правило, методу объекта необходим доступ к информации, которая хранится в объекте, чтобы выполнить с ней какие-либо действия (в соответствии с назначением метода).
Например, коду внутри user.sayHi() может понадобиться имя пользователя, которое хранится в объекте user.

Для доступа к информации внутри объекта метод может использовать ключевое слово this.
Значение this – это объект «перед точкой»,
который использовался для вызова метода.
Например:

let user = {
name: "Джон",
age: 30,

sayHi() {
// this - это "текущий объект"
alert(this.name);
}

};

user.sayHi(); // Джон
Здесь во время выполнения кода
user.sayHi() значением this
будет являться user (ссылка на объект user).
Технически также возможно получить
доступ к объекту без ключевого слова this,
ссылаясь на него через внешнюю переменную (в которой хранится ссылка на этот объект):


let user = {
name: "Джон",
age: 30,

sayHi() {
alert(user.name); // используем переменную "user" вместо ключевого слова "this"
}

};

…Но такой код будет ненадёжным. Если мы решим скопировать ссылку на объект user в другую переменную, например, admin = user, и перезапишем переменную user чем-то другим, тогда будет осуществлён доступ к неправильному объекту при вызове метода из admin.
Это показано ниже:

let user = {
name: "Джон",
age: 30,

sayHi() {
alert( user.name ); // приведёт к ошибке
}

};


let admin = user;
user = null; // обнулим переменную для наглядности, теперь она не хранит ссылку на объект.

admin.sayHi(); // Ошибка! Внутри sayHi() используется user, которая больше не ссылается на объект!.

Если мы используем this.name
вместо user.name внутри alert,
тогда этот код будет работать.