​​Самодельные хуки.
В видео автор показывает самые популярные использование кастомных хуков, это позволяет убрать повторение кода и переиспользовать функционал, так же весь код из урока доступен на 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, которое предоставляет ещё и хостинг, поэтому если решили использовать его у себя в проекте, то можете не переживать за деплой. Надеюсь теперь вы сможете легко делиться своими работами и показывать их работодателям

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

​​Английский для программиста.
Важно понимать, что какой бы ни был у вас уровень английского, вы все равно можете стать программистом, ведь он напрямую не влияет на вашу продуктивность или навыки кодинга. Английский помогает лучше понять то, что вы пишете, но это не главное ради чего его стоит учить. Основной целью для изучения любого языка является открытие возможностей, которые до этого вам были недоступны, поэтому главной причиной изучения английского является именно то, что это язык коммуникаций в IT: все крутые конференции/выступления проходят на английском, все самые свежие статьи, видео, документации выходят сначала на английском, язык общения в команде участников из разных стран или заказчиком из другой страны все тот же английский

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

Помните, вы учите английский, чтобы увеличить свой доход, работать с зарубежными заказчиками и быть востребованным специалистом, который в курсе всех новинок в индустрии, иначе зачем вам выходить из зоны комфорта, тратить время, деньги и нервные клетки:)