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

PS: всех с 8 марта! :)

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

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

​​Асинхронность.
Js однопоточный, интерпретатор выполняет код последовательно: строчка за строчкой, команда за командой. Поэтому если у вас есть какие-то сложные расчеты, то пока они не выполняться, весь следующий код не отработает. Все вроде бы логично, но как быть, если нам нужно отправить запрос на сервер или провести какую-то асинхронную операцию, в таком случае js обращается за помощью к Web API, благодаря нему мы и получаем доступ ко всей асинхроннщине в языке

Существует call stack, который отвечает за выполнение кода, когда туда попадает какой-то асинхронный колбэк, то он передаётся Web API, который производит нужные операции и помещает коллбэк в очередь коллбэков (callback queue). Отдельно стоит отметить event loop — это цикл, который следит за стеком вызовов, и если он пуст, то он помещает туда коллбэк из очереди и он выполняется. Для закрепления советую посмотреть небольшое видео:

​​Анимация в React.
Порой мы хотим сделать плавный переход на другую страницу или анимировано скрыть/показать компонент, для этого обычно используют такую библиотеку, которая называется React transition group, она позволяет контролировать ход анимации, благодаря навешиванию определенных классов на компонент, с ее помощью можно делать красивые переходы или микро-анимации

К каждому класс можно добавить keyframe анимацию, так же доступны события состояния анимации, что иногда бывает очень полезно. Нашёл короткий курс, в котором автор подробно рассказывает про работу данной библиотеки, ссылку прикреплю к посту:

​​Интересный случай.
Всем привет! Верстаю сейчас интересный сайт, скоро напишу большую статью, а пока решил поделиться одним полезным видео. Все чаще я начинаю замечать элементы(обычно это изображения), выходящие за пределы контейнера, когда она занимает 50% от ширины вопросов не возникает, но если вдруг ширина отличается, то возникает ряд трудностей, о них подробно можно посмотреть в видео:

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

https://teletype.in/@programmerway/big-order

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

PS: Обновил превью, дизайнер: @shyngys_n

​​Регулярные выражения.
Что можно легко нагулить, но трудно написать? Да, те самые регулярки, до этого я считал их сложными и непонятными, да и зачем их учить, если легче нагуглить, так или иначе, это все равно часть джаваскрипта, которую желательно знать(но не обязательно)

Регулярки чаще всего используют для форматирования строк и фильтрации их значений, например нам нужно задавать цвет в шестнадцатеричном формате через инпут, который должен принимать цифры от 0 до 9 и буквы от a до f, для этого мы можем легко использовать регулярку, рекомендую видео, в котором автор простым языком обьясняет основные возможности regex:

​​Lazy loading.
Иногда нам нужно оптимизировать загрузку сайта, его вес или просто не загружать то, до чего пользователь может так и не дойти, для этого существует ленивая загрузка, и это не только картинки или инконки, но и карты, видео, тексты, и даже целые блоки при скролле (кстати, это называется бесконечный скролл) В уроке автор создаёт такую загрузку:

​​GreenSock.
Библиотека для быстрой и удобной работы с анимациями, ее скорость и простота нравиться многим разработчикам, поэтому она стала одной из самых популярных библиотек для анимации. Некоторые даже называют ее «стандартом», но не стоит зацикливаться просто на инструменте, ведь если попадётся какая-то задача, которую не сможет решить GSAP, то вы ничего не сможете сделать

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

Нашёл небольшой плейлист, который будет в дальнейшем обновляться:

​​HR позвонит.
Это шоу, в котором джуниоры отвечаю на вопросы по JavaScript, react, redux, работу веба и интернета в целом. Формат устроен в виде игры, подойдёт тем, кто хочет заняться полезным делом на досуге и развлечься. Вопросы интересные, разного уровня сложности, позволят узнать то, где у вас пробелы и подтянуть их. Ответы можно загуглить или узнать правильные, если получить минимальное спонсорство. Я часто смотрю подобные видео, поэтому рекомендую глянуть

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

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

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

Todo.
Каждый хотя бы раз делал список задач на каком-то фреймворке. Это один из самых крутых моих проектов, делал по одному курсу(ссылку прикреплю к посту), там был фейковый json-server, у каждого списка были свой цвет и задачи, дополнительно сделал адаптив, возможность добавлять свой цвет и всплывающие подсказки — это было самое интересное.

У popup-ов был тип уведомления, ошибки, ввода текста, согласие или отмена, манипулируя пропсами я задавал тип, например, если мне надо получить согласие от пользователя на удаление списка, то я просто в пропсы передаю функцию, которая выполниться, когда пользователь нажмёт на «ок», а если надо сделать ещё и инпут, то просто передать определённый пропс, и функция, которая будет вызываться, уже будет принимать значение инпута

Демо версии нету, так как приложение использует сервер, если кто знает, как опубликовать такие приложение — напишите в личку, можете запустить код у себя на локалке и потестить todo:

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

Я раньше часто смотрел этот плейлист, особенно когда разрабатывал свой сайт портфолио, взял оттуда несколько фишек, благодаря которым, мой сайт стал выглядеть лучше, а главное — удобнее для пользователя, ведь обычно мы задумываемся только над красивым дизайном и крутым функционалом, но про удобство для пользователя часто забываем

​​Прараллакс эффект.
На сайтах(особенно в первом блоке) можно встретить различные параллакс эффекты, это может быть как и обычный параллакс при скролле, так и параллакс при перемещении курсора, об этом сейчас и пойдёт речь

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

​​Шрифт.
Меняли ли вы свою тему? А шрифт? Большинство программистов даже не задумывается про возможность изменения шрифта для редактора, хотя это напрямую влияет на производительность, удобство чтения и удовольствие при кодинге. Сейчас я расскажу на примере шрифта FiraCode, как изменить шрифт в VS code(если у вас другой редактор, то вот инструкция установки)

Для начала устанавливаем шрифт с официальной станицы GitHub, после этого распаковываем архив, выделяем нужные начертание, нажимаем правую кнопку мыши, а затем — установить. Теперь заходим в VScode: Settings->Open Settings (икона файла справа), и далее вставляем "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace", так как FiraCode — моноширинный, а это означает, что комбинации символов могут образовывать новый знак, например => превратиться в цельную стрелку, то для него еще нужно дописать "editor.fontLigatures": true. Ссылку на шрифт прикреплю к посту, можете подробнее почитать про фишки

​​Переход на yarn. 
Я перешёл на yarn ещё зимой и каких-то особых отличий не заметил, да, пакеты стали устанавливаться быстрее, да, без сбоев, да, удобнее, но особых изменений лично я не заметил. Независимо от того, устанавливается ли пакет с помощью npm или yarn, при этом решается серия задач. В npm эти задачи выполняются последовательно и отдельно для каждого пакета, это значит, что пока пакет не установлен полностью, следующий пакет будет ждать. В yarn эти операции выполняются параллельно, что улучшает производительность. Так же в yarn-е были исправлены некоторые косяки npm связанные с версиями, например, могло быть так, что на разных компьютерах при установки пакетов версии отличаются

Переходить или нет — дело ваше, в общем и целом, рекомендую попробовать.Вы можете установить yarn и самостоятельно проверить его работу, так же хочу посоветовать одну статью:

​​Создаём ЯП.
Хотели бы вы создать свой язык программирования, где разместить крутые и удобные фичи или исправить недочеты какого-то языка? В этом видео автор создаёт простой ЯП на свободной грамматике, в нем можно создавать переменные и делать вычисления и выводить их в лог, функционал написан в качестве примера, вы можете его доработать: создать условные операторы, циклы или какие-то крутые фичи. Первая половина состоит из теории, а затем идёт практическая часть, советую пересматривать пару раз, чтобы уловить суть

​​Деплой.
Как задеплоить реакт приложение? Этот вопрос обычно задают тогда, когда большая часть функционала готова, и вы уже хотите поделиться результатом с работодателем или скинуть друзьям. В этом видео автор расскажет как задеплоить статическое приложение или с фейковым сервером, в дополнение к видео хочу сказать, что есть бесплатное облачное хранилище firebase, которое предоставляет ещё и хостинг, поэтому если решили использовать его у себя в проекте, то можете не переживать за деплой. Надеюсь теперь вы сможете легко делиться своими работами и показывать их работодателям

Экзамены закончились, а значит теперь приступлю к ведению канала, заканчиваю просмотр курса «Путь самурая» и уже планирую об этом пост, так же хочу рассказать про английский, так как за год мое мнение изменилось