👉 @frontendInterview

​Оптимизация js скриптов

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

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

В первую очередь, нужно сделать анализ того, используются ли каждый подключаемый скрипт на сайте. Во вторую очередь, нужно проверить, используются ли скрипты на всех страницах или только на одной/нескольких.
Если пара скриптов используется только на главной странице, то не нужно их загружать на всех других страницах сайта. В любой CMS можно создать несколько шаблонов раздела head, которые будут отличаться списком подключаемых файлов.

Итак, вы убедились, что скрипты только нужные, а загружаются они только на нужных страницах. Далее смотрим внутри этих файлов. Сжат ли там код? Если нет, то простое сокращение ненужных символов может сэкономить десятки килобайт. Можно это сделать вручную (например, https://jscompress.com/), а можно с помощью дополнительных сервисов, которые сжимают код всех подключенных js файлов автоматически (например, в Modx это MinifyX).

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

👉 @frontendInterview

Использование Docker

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

👉 @frontendInterview

Add Length

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

Пример:
"apple ban" --> ["apple 5", "ban 3"]
"you will win" -->["you 3", "will 4", "win 3"]

👉 @frontendInterview

Подработка для веб-разработчиков от 2 часов в неделю! Делайте код ревью на одном из курсов по JavaScript, React, Node.js или других в HTML Academy. Учитесь сами, обучая других: дружное комьюнити, удалёнка, море фана, опыт преподавания и скидки для своих.
Приходите в команду: https://tml.io/2snii

​TypeScript void, never и unknown

Void
Тип данных Void можно назвать полной противоположностью типа any, так как этот тип означает отсутствие конкретного типа. Основное предназначение типа Void — явно указывать на то, что у функции или метода отсутствует возвращаемое значение.

Для функций и методов, которые ничего не возвращают и у которых отсутствует аннотация типа возвращаемого значения, вывод типов определяет принадлежность к типу void.
Тип Void является подтипом Any и супертипом для Null и Undefined.

 function a(  ): void {
   let result: number = 5;
   return result; // Error
 }
 function b(  ): void {
   let result: string = '5';
   return result; // Error
 }
 function c(  ): void {
   let result: any = 5;
   return result; // Ok
 }

Never
Примитивный типа данных Never служит для указания того, что какие-либо операции никогда не будут выполнены.

Never обозначается ключевым словом never и так же как и void не имеет явных значений.
Тип Never можно указать только той функции, по сценарию из которой, программа, реально никогда не сможет выйти.

 function error( message: string ):  never {
   throw new Error( message );
 }

 function loop():  never {
   while( true ) { }
 }

Unknown
Тип Unknown является типобезопасным аналогом типа any и представлен в виде литерала unknown. Все типы совместимы с типом unknown, в то время как сам тип unknown совместим только с самим собой и типом any.
Кроме того, над типом unknown запрещено выполнение каких-либо операций.
let v0: any;
v0.a = 5; // Ok
v0.a = ''; // Ok
v0(); // Ok

let v1: unknown = v0; // Ok
v1.a = 5; // Error
v1.a = ''; // Error
v1(); // Error

👉 @frontendInterview

​Как вырасти от junior до middle? Middle-специалист отличается не только опытом и уровнем владения технологиями, но и софт скилами.

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

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

А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы.

Начать учиться

👉 @frontendInterview

👉 @frontendInterview

TypeScript Пересечение (Intersection Type)

Пересечение (Intersection) - мощный механизм TypeScript, который позволяет рассматривать множество типов данных, как один. Пересечение указывается с помощью оператора амперсанда &, по обе стороны от которого указываются типы данных.

Переменной, которой был указан тип пересечение A и B и С может быть присвоено значение, которое принадлежит к типам A и B и C одновременно.

 name: A & B & C; 
// значение должно принадлежать ко всем типам одновременно

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Сборка мусора в JS

Управление памятью в JavaScript выполняется автоматически и незаметно. Мы создаём примитивы, объекты, функции… Всё это занимает память.

Основной концепцией управления памятью в JavaScript является принцип достижимости.
Если упростить, то «достижимые» значения – это те, которые доступны или используются. Они гарантированно находятся в памяти.
Любое другое значение считается достижимым, если оно доступно из корня по ссылке или по цепочке ссылок.

В интерпретаторе JavaScript есть фоновый процесс, который называется сборщик мусора. Он следит за всеми объектами и удаляет те, которые стали недостижимы.

Простой пример

 // в user находится ссылка на объект
 let user = {
   name: "John"
 };

Глобальная переменная user ссылается на объект {name: "John"}
Если перезаписать значение user, то ссылка потеряется:
user = null;
Теперь объект John становится недостижимым. К нему нет доступа, на него нет ссылок. Сборщик мусора удалит эти данные и освободит память.

Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node (2017)

Соберите полный стек, необходимый для создания современного веб-приложения, используя React: MongoDB (база данных NoSQL) и Express (фреймворк для серверов веб-приложений), который работает на Node (JavaScript на стороне сервера), очень хорошо дополняют React. В этой книге также будут рассмотрены многие другие инструменты, необходимые для создания полноценного веб-приложения: React Router, React-Bootstrap, Redux, Babel и webpack.

👉 @frontendInterview

Найти пропавшую букву

Напишите функцию, которая принимает массив букв в алфавитном порядке, следующие друг за другом. При этом одна буква будет пропущена. Функция должна вернуть пропущенную букву.

Примеры:
["a","b","c","d","f"] -> "e"
["O","Q","R","S"] -> "P"

👉 @frontendInterview