Дебаггинг.
Сейчас разрабатываю аудио плеер на react, до этого никогда не работал с аудио, поэтому было интересно посмотреть на такую механику. Хотелось сделать простой, но удобный музыкальный плеер, куда можно добавлять свои песни, искать по названию, а также проигрывать их по списку или в случайном порядке(чтобы не надоедало)

Дебаггинг — это, если простыми словами, поиск и отладка ошибок. Иногда ошибки неочевидны. Например, у меня проблема возникла на этапе создания переключения песен: по нажатию на стрелку вперёд, индекс текущей песни увеличивался на 2, хотя я все посмотрел, и нигде не было двойки, но потом я немного отвлёкся и до меня дошло, что я переписывал логику переключения на switch-case конструкцию, а в каждом кейсе должен быть break. Сходу понять, что проблема была в этом довольно тяжело, банальная невнимательность может привести к долгим поискам ошибок

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

​​React Router.
Изначально маршрутизации в react не предусмотренно, поэтому для того чтобы менять url без перезагрузки используется библиотека react-router-dom, она позволяет легко и удобно отображать компоненты в зависимости от url, делать редиректы, а так же имеет большой функционал помимо этого, например: вы можете получить значение после определенного пути в переменную, это может быть id пользователя(/profile/:userId) или название пиццерии(/restaurant/:pizzeria). Нашёл небольшой урок про базовый функционал:

​​Как выучить все?
Когда смотришь на перечень js библиотек, то думаешь, что ничего не знаешь. Но это не так, и знать все не надо. Если задуматься, то все библиотеки построены на обычных функциях, классах и объектах, которые есть в js, они не приносят ничего нового, поэтому если хорошо знать базу языка, то изучение библиотек не будет такой уж сложной задачей

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

​​Сложность алгоритма.
Я думаю вы часто встречали такое понятие, как «сложность алгоритма», но что это такое? Если простыми словами, то каждый алгоритм принимает на вход данные и обрабатывает их. Когда входящие данные будут увеличиваться, то у нас будут расти 2 параметра: время, за которое будет выполняться и количество памяти, которое будет использоваться. Скорость роста этих параметров и показывает нам сложность алгоритма

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

​​Качество или количество?
Часто слышу мол: «Нужно набрать Х часов, и тогда вы станете крутым программистом», некоторые набирают эти Х часов и всё-таки становятся спецами, но это ошибка выжившего. Многие, набрав эти часы, так и не начинают понимать то, как все устроено. Зачастую эти люди просто ставят себе цель: буду программировать по 14 часов в неделю и через 3 месяца стану программистом, но в это время включается ещё и просмотр обучающих видео, ответы на сообщения, пролистывание соцсетей и тд

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

Ещё часто встречается, что программируют по 10 часов в сутки, а потом неделю просто ничего не делают. Важно программировать регулярно, чтобы код был всегда перед глазами, так вы не забудете то, что выучили и лучше запомните новое

​​Fullstack проект.
В чем отличие fullstack проекта от не fullstack? В том, что в первом мы делаем сразу и фронтенд и бэкенд части, а во втором — только одну. Если мы захотим сделать fullstack pet-проект, но не знаем бэкенда, то мы можем воспользоваться готовыми решениями, например использовать готовые api, но мы попрежнему будем разрабатывать только одну часть

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

Я принял решение заморозить проект, пока я не освою node.js, думаю мне надо время, чтобы найти хорошую информацию по этой теме. Основной функционал уже готов: проигрывание песен в обычном и случайном порядке или только избранные, добавление в избранное, поиск по названию, страница избранных и страница всех песен, осталось только внедрить добавление песен и пару фич, но для этого нужен api

​​Спойлер.
Если кратко, спойлер — это контент, который мы хотим скрыть, а по нажатию на заголовок отобразить. Аккордион — это тоже самое, но открытым может быть только один спойлер. Есть два самых популярных варианта использования: когда у нас слишком большой контент, который занимает много места или не является очень важным, чаще всего это ответы на вопросы или характеристики товара; либо когда мы хотим скрыть меню(или любой другой блок) в спойлер на определенном расширении

В видео автор делиться собственными наработками, которые позволят сделать любой спойлер + крутая анимация

​​Funiro.
Сверстал нереально крутой интернет магазин с работающей корзиной и подгрузкой товара из json. Верстка вышла на совершенно другой уровень: повсеместное использование grid, нестандартные блоки, сложные слайдеры с параллакс эффектом, крутые решения, а самое главное — адаптив

Когда нам нужно сделать адаптив блока, то мы действуем по такой схеме: уменьшаем шрифт, отступы, пока верстка выглядит нормально, если контент уже не влезает — изменяем блоки(делаем в колонку или уменьшаем размер). Если с перестановкой блоков все понятно, и от этого нельзя избавится, то с отступами и размером шрифта все немного иначе. Часто мы вынуждены на каждом бреикпоинте уменьшать отступы блоков, подбирать подходящий размер шрифта, который будет смотреться, если вы хоть раз верстали макеты, то думаю вам это знакомо

Решением будет простой миксин, который принимает css свойство, значение при максимальном контейнере и минимальное значение, которое будет на 320px, а также тип(по умолчанию 1, и 0, если надо чтобы свойство пропорционально изменялось на любых расширениях, а также 2, если только для расширений больших чем контейнер), подробнее можно посмотреть на курсе или в видео про отзывчивое свойство

К посту прикреплю результат и GitHub репозиторий с кодом:

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

Начал проходить курс React Pizza, пока всем доволен, в курсе будут классовые компоненты, но думаю это не проблема, так как они все ещё используются, и знать про них стоит. Скоро подведу итоги моего трехмесячного эксперимента с «зелёным» GitHub, думаю будет интересно

​​Рекурсия.
Когда функции вызывают сами себя — этот процесс называют рекурсией. Это напоминает цикл while, соотвественно функция не может вызывать себя бесконечно, поэтому должно быть условие выхода из рекурсии. Если это условие будет написано неверно или его не будет, то call stack будет переполнен и вылезет ошибка, поэтому внимательно проверяйте условия, когда работаете с рекурсией

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

Нашёл отличный урок про рекурсию с подробным объяснением и примерами:

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

Поначалу все шло очень даже хорошо: я не пропускал ни дня почти месяц, но потом я не делал коммиты 5 недель по субботам из-за того, что у меня не получалось; примерно в тот момент я понял, что надо давать себе отдыхать и делать перерывы, ведь у меня не было цели программировать каждый день, я хотел только делать это регулярно. Следующие недели я старался отдыхать некоторые дни и переключаться

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

​​React pizza.
Очень крутой курс, который я рекомендую всем новичкам, действительно просто и с нуля объясняется про компонент, пропсы и хуки. Из минусов: иногда автор чересчур детально описывает некоторые моменты, но можно проставить на 2х или промотать. Используются библиотеки redux, axios, для работы с бд используется json-server, а сам проект можно выложить на heroku

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

​​Axios.
Библиотека для более удобной отправки запроса на сервер, создано на базе fetch, но с более коротким и простым синтаксисом, может использоваться в любых проектах, часто используется в связке с react для взаимодействия с различными api

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

​​Изучать что-то новое.
Если вы идёте в каком-то направлении и вам это надоело, попробуйте изучить какую-то новую тему/подход, например вы работаете с redux и react, и вам это надоело, тогда попробуйте поменять redux на mobx и начать его учить

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

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

Код и сам сайт прикреплю к посту:

​​TypeScript.
Обычный JavaScript, но со встроенными типами. Когда js начал набирать популярность, а бизнес начал создавать все больше приложений со сложным функционалом, разработчики задумались о том, как расширять и поддерживать существующие приложения. Нативный js приносил как и быструю скорость и лёгкость в освоении, так и много новых проблем, одна из них была типизация

Объявление переменных без заданных типов приносило непредсказуемости в код, а, как следствие, кучу багов. Вдохновившись типизацией других языков(Java, C# и тд) разработчик из Microsoft создал TypeScript, который полностью совместим с js и компилируется в него при сборке

Буду делиться моими успехами в изучение TypeScript-a. А пока хочу посоветовать небольшое вводное видео про основы ts:

Шифр Цезаря.
Шифр Цезаря — это вид шифра, в котором каждый символ в тексте заменяется символом, находящимся на некотором постоянном числе позиций впереди или позади него в алфавите. Написал небольшое приложение, в котором можно зашифровать и расшифровать английский текст, а также выбрать сдвиг и направление(вперёд/назад) куда будет сдвигаться буква, например: если сдвиг 3 и направление по-умолчанию(вперёд), то a -> d, b -> e, c -> f и тд. Результат и код прикреплю к посту, можете потестить:

​​Material UI.
Библиотека для создания UI для ваших react приложений. Если вы не хотите париться над вёрсткой и не нуждаетесь в каком-то сложном функционале, то вы можете использовать готовые компоненты и даже целые секции из Material UI. Очень полезно, если вам не слишком важен визуал или у вас мало времени на создание верстки. Также подойдёт для тех, кому надо что-то быстро протестить и быстро накидать тестовую структуру проекта, чтобы потом уже конкретно заняться визуалом. Нашёл небольшой курс, где вкратце рассказывается про данную UI библиотеку:

​​Работа с Date.
Всем привет, недавно досмотрел видео, где создавалась копия Вконтаке на react и решил добавить отображение времени для постов и сообщений, казалось, что сделать это будет проще простого: просто записываешь дату, время, а затем показываешь, но нет; обычно в соц сетях время показывается по-разному: если пост вышел недавно, то можно показать время относительно текущего(5 минут назад, 1 час и тд.), когда прошло уже достаточно времени можно показать что-то по типу «Сегодня в 20:00», если пост уже давний, то смысла нет показывать его точное время, можно просто записать дату

Поэтому решил записать число миллисекунд прошедших с 1.01.1970 и потом просто сравнивать с текущим значением и выбрать подходящий формат, для удобной работы решил подключить momentjs, так как есть ещё нюансы, например, если пост вышел до 12, а текущее время уже после, то надо записать «Вчера», чтобы это все не считать можно воспользоваться функционалом библиотеки, а какие вы используете библиотеки для работы с датой или используете чистый js? Напишите в чате!

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

В этом году я узнал много нового (не только по программированию) Столкнулся с морем трудностей, взял крупный заказ, примерно определил дальнейший путь и понял, что мне нужно ещё много чего учить, хотя за этот год я значительно преуспел: начал учить react и redux, лучше изучил grid, стал лучше верстать и делать адаптив, старался делиться успехами и неудачами в своём телеграмм канале, но в последние время что-то редко это получалось. Надеюсь в 2022 больше изучать и углубиться в программирование, чаще выпускать посты и больше заниматься спортом. Желаю всем хороших праздников, меньше багов и побольше читабельного и красивого кода:)

Ruby Home.
Сверстал небольшой лендинг кампании по аренде жилья в Америке, необычный главный экран: элемент поиска немного выпирает, реализованы табы и селекты для выбора параметров поиска, блок с логотипами превращается в слайдер на мобильных устройствах и планшетах, для позиционирования карточек использовал grid, необычные решения для адаптива блока с иконками были использованы нестандартные решения: пришлось немного изменить верстку в ходе адаптива, но зато на планшетах сетка смотрится очень хорошо, постарался максимально качественно сверстать этот макет, чтобы оценить свои силы, в планах улучшить стартовый шаблон и пройти один марафон по верстке