☕️ '${Вронтенд}'

Хочу стать вронтендером! Часть 4 - пет проекты и книги. По книгам, хочу порекомендовать вам наверно самую лучшую и важную на данный момент серию книг по JS: Вы не знаете JS (серия книг) После осознанного прочтения и понимания, у вас автоматически должны появиться ответы на почти все актуальные теоретические вопросы на собеседованиях по JS. Пет проекты - штука странная. Хорошо когда они есть, но ничего страшного если их нету. За всю мою карьеру мне никогда не приходили отказы из-за пустого гитхаба. Очень часто вижу резюме, в которых человек добавляет свой гит, а уникальных проектов там ноль. Все что есть, очередная копия авиасалез, написанная под копирку на воркшопе. Что делать? Тут в игру должна вступить ваша фантазия. Лучше иметь один уникальный, интересный пет проект, который будет челленджем для вас, чем 5 лендосов и написанный под диктовку код, который легко гуглится и уже лежит на сотнях репозиториев.

Хочу стать вронтендером! Часть 3 - что делать дальше? Давай предположим, что ты уже освоил базовые вещи в html, css и js, а что дальше? Не торопись лабать очередной и миллиардный "ToDo" app на реакте. Frontend RoadMap - ресурс, на котором ты можешь посмотреть полный роадмап от условного джуна, до синьора-помидора, взять оттуда навыки которые необходимо получить, а так же поочередность изучения тех или иных технологий. А еще не забывайте про английский язык, наверное одна из самых важнейших вещей в мире программирования (сорре что не запихнул ее в первую часть). Большая часть документаций, а так же новых технологий, библиотек - доступна на английском, а учитывая темпы развития технологий на фронтенд рынке, с доками и статьями вам придется работать достаточно часто. Без знаний английского будет очень печально.

Хочу стать вронтендером! Часть 2 - вспомогательные ресурсы. Ты уже готов стать джунёнком-тугокодей и начал изучать теоретический вопрос по курсам, урокам или документации, но в идеале нужно совмещать все это дело с практикой. Ниже я приведу список ресурсов, которые тебе помогут прокачиваться параллельно с изучением основ: Codewars/LeetCode - здесь можно попрактиковать алгоритмы, решать задачки и просто мериться рейтингом с такими же задротами. Крайне рекомендую сразу лезть на эти площадки после того, как вам покажется, что вы начали понимать JS и как решать задачки. CodePen - наверное одна из лучших песочниц для демонстрации кода. Еще там можно найти реализацию практически всего: ну на пример у нас возникает необходимость сделать модальное окно. Идем на кодпен, в поиске пишем "modal window", смотрим примеры и воруем код у понравившегося нам. Medium - статьи с рекомендациями по фронту и не только, часто это статьи скопирайченные индусами, но новичку будут более чем полезны.

Хочу стать вронтендером! Часть 1 - база и курсы. Регулярно и часто вижу вопросы о том, где, как и что учить воннаби вронтендеру. Ничего сверхоригинального, для начала нужно выучить базу: HTML, CSS, JS. А потом эти уже ваши реакты, вуи и прочие ангуляры. В каждом из пунктов я предложу вам бесплатное и платное решение, а так же сайт - справочник, тут выбор за вами: HTML + CSS: Пинг | Понг | Сайт JS: Пинг | Понг | Сайт Важно знать базу, потому что набор технологий может меняться от компании к компании и от отдела к отделу. Зная базу, освоение новых технологий не занимает много времени. В следующей части я расскажу о вспомогательных ресурсах и о том, как их правильно применять.

А у вас get или post? А промис вернёте?

Этот вопрос позволяет понять, насколько вообще собеседуемый вкурсе того, как работает язык, на котором он пишет. Если в кратце, то ниже будет приведена схема работы event loop, в которой будет видно как обрабатываются таски. Обычные Console.log() сразу летят в Call stack и выполняются сразу, а вот с промисами и таймаутами чуть интереснее. Почему промис выполняется не сразу если он сразу зарезолвлен? А почему таймаут выполняется еще позже, если задержка установлена на 0? Тут все дело в том, что у нас есть микротаски и макротаски со своими очередями соответственно.

Макрозадачи: setTimeout, setInterval, setImmediate
Микрозадачи: process.nextTick, Promise callback, queueMicrotask

Причем у микрозадач есть приоритет и спрева выполняются миркротаски, а потом уже макро. Задачу для собеседования можно разбавить разными вопросами связанными с этим делом ;)

Классика собеседований и наверное самый базовый вопрос, который вам могут задать:

В каком порядке и что выведется в консоль? Почему?

function explainEL() {
  console.log(1);
  setTimeout(() => {
    console.log(2);
  }, 0);
  Promise.resolve().then(() => {
    console.log(3);
  });
  Promise.resolve().then(() => {
    setTimeout(() => {
      console.log(4);
    }, 0);
  });
  console.log(5);
}

explainEL();

Не для всех очевидно, но вывод будет такой: 1 5 3 2 4 А все из-за того, как JS работает "под капотом"

Parcel.js Часть 3 Собственно зачем и почему? Простой пример из жизни: мне перепала возможность написать немного логики для проекта, который уже был полностью сверстан с применением бутстрапа и жквери, но в нем было большое количество форм, модалок и инпутов, которые нужно было валидировать. Кстати верстала просто оставил весь свой код прямо в файле Jquery.min.js 😏👍🏻 Писать под каждую страничку огромный жс файл не хотелось, да и в целом, люблю когда все по полочкам, модулями и в отдельных файликах. А между тем, огромное количество верстки переиспользовалось в разных файлах, искать что, почему и где ломается в ~20 файлах с идентичной версткой очень не очень (тут то паршлы и решают эту проблемку, эдакие компоненты на минималочках). Потратив примерно час времени (час только из-за специфического жквери плагина, который нужно было перенести, по факту это бы заняло минут 10), проект был перенесен на парсель, со всеми его зависимостями вроде жквери, слайдерами и прочими финтифлюшками. Спустя еще минут 10, логика была полностью перенесена, добавлены необходимые npm пакеты и я спокойно решал свои задачи, вместо того, чтобы конфигурить вебпак и разбираться, почему что-то не завелось. - - - Ответ на главный вопрос напрашивается исходя из истории в первой части этой эпопеи: Parcel решает множество проблем небольших проектов и позволяет вам сэкономить время на конфигурации какого нибудь gulp/webpack, позволяет писать на ванильных JS/HTML с максимальным удобством. Если вы боитесь или вам просто лень рыться в конфигах, да и собственно за это никто ничего не доплачивает, то парсель - то что вам нужно. Он отлично подойдет верстальщикам, без труда организует вам hot reload и live server, сэкономит кучу времени, а главное, parcel - это дешево.

Parcel.js Часть 2 Все что нужно, чтобы Parcel.js начал собирать наш проект, команда:

parcel *.html

(или указываем на конкретный html/js файл) И оно магическим образом заводится! Что мы имеем из плюшек, при том совершенно не притрагиваясь к конфигам? - Hot reload - Сборка Js модулей - Сборка Sass - Поддержка typesctipt Для всего этого достаточно просто ввести одну команду и залинкать файлы в нужном html/js файле и все. Кстати любимый всеми жквери тоже можно использовать, да, даже установив его из npm, собственно как и другие модули. - - - Между тем, parcel позиционируется как zero-config бандлер, ну ок, проверяем на пример установкой модуля:

parcel-plugin-html-partials

Создаем отдельные паршлы (в простых проектах это чаще всего хэдеры, футеры, менюшки и прочие блоки). Инклудим в наш самый обычный html файл:

@partial("headerMenu.html")

И оно работает! Так же и со многими другими плагинами для parcel js. Хотим работать с scss/sass? Тоже не беда, просто пишем:

<link rel="stylesheet" href="./сustom.scss">

И оно просто работает! Кстати если очень хочется, можно сделать вот так:

import './custom.scss'

Дальше думаю суть ясна 👾

Parcel.js Часть 1 Своим первым постом я расскажу о Parcel.js, тяжелой житухе жуна, как его можно использовать и почему вам стоит хотя бы присмотреться к этому бандлеру. --- Как то раз, я наблюдал замечательнейшую историю: мой Джуненок-тугокодя делал левак. Совершенно простой лендос с формошлепством, но примечательно то, что он делал его на vue (не ну а что, на работе же пишем на вуях, вот и заказазчика он решил прокатить на ***). Мотивировал тем, что есть готовые компоненты, либы и пр. штуки для валидации, а рассово верным жквери он пользоваться не хочет, ок. Причем самое смешное, что заказчик прифигел с этого не меньше чем я и пришел с ризонной предъявой о том, что сайт плохо индексируется и вообще, что там по PageSpeed Insights? Джуненок не долго думая взял кодовую базу на вуях и бахнул тоже самое, на nuxt js что в общем то заказчика устроило🌚 --- Тогда то мы и рассказали ему про Parcel.js, который подходит для подобных проектов практически идеально (это если не писать конфиги, а если писать, то его можно приспособить к вообще разным проектам).