Архивы автора: Максим Маслов

Друзья, наконец-то я дописал свое последнее, перед началом поиска работы, демонстрационное одностраничное приложение для портфолио. Оно представляет собой социальную сеть с очень узким функционалом, что неудивительно, ведь для создания полноценной социальной сети, требуется целая команда IT — специалистов и несколько месяцев работы.

В конце этой статьи я расскажу про крутые курсы по React.js

Ссылка на репозиторий

URL приложения

Коротко про функционал:

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

— Если один и тот же пользователь войдет и выйдет из аккаунта 10 раз подряд, то сервер запросит ввод капчи, которую я тоже обработал.

— После входа у пользователя появляется возможность открывать раздел сообщения.

— Есть возможность просмотреть список всех зарегистрированных пользователей.

— На каждого участника можно подписаться или отписаться от него, при условии, что выполнен вход в аккаунт.

— Можно перейти на страницу профиля каждого пользователя.

— Можно изменять статус на странице своего профиля. Для этого достаточно нажать один раз мышкой на статус, внести в него изменения, после чего нажать мышкой в любом месте, либо нажать «Enter» на клавиатуре.

— На странице своего профиля можно добавлять новые посты. Поле для ввода текста также содержит валидацию на минимальное и максимальное количество символов. (Работает только локально. После перезагрузки страницы данные будут потеряны).

— При попытке перехода на страницу профиля или сообщений, если пользователь не авторизован, то его перенаправит на страницу входа в аккаунт.

— Если у пользователя отсутсвует фотография профиля, то отображается картинка-«заглушка» с изображением человеческого силуэта.

— Дизайн адаптирован под устройства с любыми размерами экранов.

Какие инструменты я использовал:

— Для разметки приложения и его адаптивного поведения использовался модуль CSS Grid.

— В качестве state-менеджера я использовал Redux.

— Для отслеживания URL- строки и соответствующей отрисовки компонентов, использовался React Router DOM.

— Для создания форм использовался хук useFormik() от Formik.

— Для создания контейнерных компонентов, которые подключены к хранилищу Redux, использовалась функция connect из пакета React-Redux.

— Для валидации форм использовалась библиотека Yup.

— Для взаимодействия с сервером использовалась библиотека Axios.

— Также использовал хуки useState, useEffect, useNavigate.

Интересные факты:

— Для отображения списка пользователей используется пагинация (постраничное отображение данных с сервера), а также пагинация на самой странице с пользователями. Функционал, не отображает сразу список всех страниц, а только первые 10. Нажав кнопку «Next» отобразится список со следующими 10 страницами, и тд.

— Те, кто еще не сталкивался с React скорей всего не знают, но, не смотря на то, что меняется URL браузера, а в след за ним и отображаемая информация, все действия происходят на одной единственной странице, которая динамически обновляется. В этом как раз и есть вся прелесть React.js, за что его так любят разработчики.

Приложение состоит из:

— 1691 строк кода

— 64 файлов в общей сложности

— 13 файлов js

— 26 файлов jsx

— 17 файлов сss

— 1 файл html

— 23 компонентов, включая 20 функциональных, 3 классовых, 7 контейнерных

— 11 запросов к серверу

Данное приложение частично написано по туториалу в рамках бесплатных курсов по React.js на YouTube «ReactJS — Путь самурая» на канале ITKAMASUTRA

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

Не смотря на это, я настоятельно рекомендую этот курс новичкам. Так, как «разжевывает» информацию автор курса, больше в постсоветском интернет-пространстве не «разжевывает» никто.

Человек записал бесплатно 100 видео-уроков, общим хронометражем 50 часов. Для сравнения в украинских IT-школах предлагают платные курсы по React c программой, в лучшем случае, на 30 часов. Я считаю, что эти видео-уроки + официальная документация = отличный способ достаточно хорошо выучить Реакт. 

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

Это приложение я написал полностью самостоятельно с самого нуля, не используя никаких инструкции.

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

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

URL приложения

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

Преимущество приложения перед аналогами:

— Интуитивно понятный интерфейс (Для тех, кто уже сталкивался с Тайным Сантой)

— Не требует абсолютно никакой регистрации

— Не требует e-mail или каких-либо других контактных данных

— Не содержит вишлисты (Как по мне, это реальный абсурд, от которого пропадает вся загадочность самой идеи анонимного обмена подарками)

— Не содержит и никогда не будет содержать никакой рекламы

Интересные фишки приложения:

— На странице приложения в режиме реального времени идет виртуальный снег. Причем, это не анимированная бекграунд-картинка. Снег идет поверх всего контента. Тут я использовал плагин React Snowfall.

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

— Курсор мыши выглядит как новогодняя ёлка, чтобы поднять предновогоднее настроение пользователя.

— Ошибки плавно всплывают из-под верхних границ экрана, отображаются несколько секунд и также плавно заплывают за границы экрана.

— Loader (анимированная картинка, которая отображается, когда пользователь ожидает ответ от сервера) выглядит в виде танцующего Санты.

Интересные факты

— Для взаимодействия с сервером использовалась библиотека Axios

— Приложение содержит в себе 43 файла и состоит из 60 функций

— Насчитывает 1608 строк кода

— 12 компонентов в формате jsx

— 13 файлов css

— 2 файла js

— 1 файл html

— 13 валидаций инпутов и паролей

Минусы и баги приложения в текущей его реализации:

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

— Если ввести два и более одинаковых имени, то сервис это не распознает. Об этом тоже написал в инструкции.

— Пока-что не совсем понятные мне баги при вводе данных в инпуты. Если действовать пошагово, то всё работает отлично, но если при создании новой компании, сперва заполнить все инпуты, а потом какой-то стереть, то кнопка «Далее» не возвращается в режим “disabled”. На следующий шаг приложение, конечно-же не перейдет и выдаст ошибку, типо «Поле не должно быть пустым» или «Пароли не совпадают», но визуально это реально баг. Хотя, исходя из того, что прописано в логике, оно должно работать четко. Не хватает у меня опыта, но сделаю всё, чтобы к следующему Новому году всё работало идеально.

— Сервис mockapi.io, который я использовал, может хранить не более 100 объектов. Когда количество зарегистрированных компаний будет 100, то сервер будет возвращать ошибку и новые компании создаваться не будут. К следующему году я придумаю решение. У меня уже есть идея, чтобы оттуда автоматически удалялись завершенные компании.

— Дизайн. Я не дизайнер, создавал дизайн в режиме реального времени, на глаз, методом проб и ошибок. Мобильная версия, конечно, могла бы выглядеть и лучше, в следующем году постараюсь исправить.

Ссылку на Git – репозиторий этого приложения я выкладывать не буду по причине того, что я написал всё совершенно неправильно касаемо архитектуры проекта и принципа единственной ответственности. Потенциальному работодателю такой код вряд ли понравится, а новички могут ошибочно подумать, что раз оно работает, то это нормально так писать. Что могу сказать, это мой первый, причем очень спонтанный проект на React.js , с очень сжатыми сроками и написанный в условиях отсутствия света и интернета. Сейчас я пишу более масштабный, осознанный проект на Реакте с правильной архитектурой, использованием как функциональных так и классовых компонентов, контейнерных компонентов, с использованием Redux, контекста и самых распространненых хуков. Вот такой пет-проект можно использовать в качестве портфолио. А Тайный Санта – это больше для души 🙂

Всех с наступающим Новым Годом!

А что, что-то еще нужно учить? — спросите вы.

Программирование — это такое направление, где постоянно нужно что-то учить, учиться и переучиваться. Технологии очень быстро развиваются, и может так оказаться, что ваши знания, которые были актуальны 1,5-2 года назад, стали не совсем актуальными, либо какие-то технологии в вашем направлении работают уже как-то по-новому.

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

1. Bootstrap

     Bootstrap — это фреймворк, который представляет из себя огромный набор готовых HTML и CSS шаблонов, и различные JavaScript-расширения. Позволяет быстро и эффективно добавлять в верстку готовые компоненты, имеет низкий порог входа, так как разобраться с ним, как мне кажется, сможет любой человек, у которого есть самое базовое представление о верстке. Но в первую очередь, его преимущество в удобном написании адаптивных сайтов и кроссбраузерности. 

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

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

2. TypeScript

 TypeScript считается отдельным языком программирования. Что? Еще один язык учить? — удивленно спросите вы. На самом деле является ли он отдельным языком программирования — вопрос филосовский. Исходя из бегло-изученной мною информации, это скорее всего своеобразная надстройка над языком JavaScript, расширяющая его возможности, улучшающиая скорость разработки и читаемость кода. Почему это именно надстройка, а не язык? Во первых, хотя бы потому, что не существует движка, который может его выполнять. Он компилируется в JavaScript, который уже имеет движок для его выполнения. Это схоже с тем, как JSX транспилируется в JavaScript или SCSS в CSS. Возможно, это грубый пример и в чем-то я заблуждаюсь. Но в этой статье сильно рассуждать о технологиях, которые я абсолютно не знаю, не имеет смысла. Просто делюсь с вами с тем, что есть из того, с чем еще придется разобраться.

3. CMS

  CMS (Content Management System) — это система управления контентом сайта. С одной стороны, использование таких систем может обходиться без разработчиков вообще. Помимо управления, любой человек, без каких-либо знаний может создать сайт на одной из CMS — платформ. С другой стороны, их использование предополагает интерфейс как для разработчиков так и для контент-менеджеров, что используется очень часто.  Если описать CMS  простыми словами, то это программное обеспечение, которое позволяет хозяину (менеджеру) сайта редактировать страницы и наполнять сайт данными. В пример можно привести следующее. Вы самостоятельно, либо с командой создаете сайт по согласованному дизайну и функционалу. Например, это новостной портал. Возникает логический вопрос: Каким образом редакторы сайта будут публиковать новости? Им необходимо удобное, быстрое и максимально экономное решение для администрирования, а лезть в код они, конечно же, не будут.    Исходя из моего текущего понимания вопроса, есть способ подключить созданный нами сайт к CMS  и далее уже настроить его работу. Честно говоря, я еще не знаю на каком этапе нужно прописывать всю логику работы сайта.   В открытых вакансиях я часто натыкаюсь на должности типо «FrontEnd WordPress developer» с обычными рыночными зарплатами разработчиков. Это говорит о том, что такого рода специалисты вполне востребованы. Но можно абсолютно не уметь работать с CMS и строить при этом успешную карьеру разработчика. 

    На самом деле, существует еще много всего, с чем предстоит столкнуться на пути постоянного развития как программист. Множество технологий, которые в основном нужно знать для BackEnd-разработки,  тоже часто встречаются в требованиях к кандидату, но в основном уже для middle+ разразаботчиков.

  В скором времени я планирую написать статью о бесплатных онлайн-курсах, на которых я сейчас изучаю React.js

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

Друзья, рад сообщить, что наконец-то закончил своё первое одностраничное веб-приложение для портфолио на чистом JavaScript.

Оно представляет собой решение для управления небольшим рестораном с интуитивно понятным интерфейсом.

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

Ссылка на репозиторий

URL приложения

Интересные факты:

1) Приложение содержит в общей сложности 2030 строк кода

2) Включает в себе 22 файла js, 1 файл css, который транспилируется из 1 файла scss, и, естественно, 1 файл html

3) Насчитывает 100 функций, включая 19 функций API запросов к серверу и 15 обработчиков событий

4) Весь проект писался и собирался с использованием Webpack

5) В качестве базы данных использовался бесплатный сервис mockapi.io, в котором было создано 4 API: столов, официантов, счетов и меню

6) Внешний вид приложения адаптируется под любые браузеры и мобильные устройства при помощи использования технологии flexbox и нескольких медиа-запросах.

Интерфейс понятен интуитивно, но расскажу в двух словах о функционале.

1) В разделе настроек можно добавлять, удалять и редактировать существующие меню и цены, официантов и столы. Все изменения мгновенно отправляются на сервер.

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

3) Вновь созданный счёт содержит в себе индивидуальный номер, текущую дату и время, выбранного официанта и стол.

4) Созданный счёт можно отменить в любой момент, если, например, человек передумал что-то заказывать. Счёт сразу же удаляется с сервера.

5) В счёт можно добавлять блюда, выбрав их из списка в сплывающем модальном окне.

6) После добавления блюд, в текущем счёте появляется их список и общая сумма заказа.

7) При закрытии счета, общая сумма заказа отправляется на сервер, а сам счёт перемещается в раздел «Архив счетов».

Минусы

Теперь расскажу о минусах, почему именно в таком виде приложение не подойдет для использования в реальном бизнесе

1) Отсутствие бэкенда. Для того, чтобы сделать это приложение пригодным к использованию, необходимо, чтобы каждый юзер, со своими правами доступа мог логиниться на сайте и получать информацию именно о своём ресторане. Хочу отметить, что тут ещё необходимо прописать роли пользователей, чтобы, например, у официанта не было возможности редактировать меню.

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

3) Добавление блюд. Каждый раз, при нажатии кнопки добавления блюд в чек, можно добавить только одно блюдо в количестве 1шт. Согласитесь, это такое себе удовольствие для официанта, особенно, когда пришла большая компания и каждый заказал себе первое, второе и компот. Но я не считаю целесообразным тратить очень много времени на подобные нюансы для демонстрационного приложения, которым по факту никто и никогда не будет пользоваться.

Следующий свой пет-проект я уже начал писать на React.js, параллельно разбираясь в этой библиотеке.

October 25, 2022

Ця стаття українською

Как и обещал, в этой статье я коротко, но информативно расскажу о стеке самых популярных технологий, которые необходимо знать для того, чтобы устроиться фронтенд-разработчиком в 2022 году. Весь список я составил самостоятельно, в правильной последовательности, исходя из моего опыта обучения, множества статей, видео-уроков и советов друзей. Также, для того чтобы обозначить сложность той или иной технологии относительно друг друга, я оценил их по 10-ти бальной шкале.

Стек (англ. stack – стопка) технологий — это набор инструментов, применяющийся при работе в проектах и включающий языки программирования, фрэймворки, системы управления базами данных, компиляторы и т.д.

1. HTML

Уровень сложности: 1/10

Необходимость изучения: Обязательно

HTML — язык гипертекстовой разметки, который представляет из себя код для построения и структурирования веб-страниц. Для того, чтобы вы начали понимать как правильно писать разметку страницы, вам понадобиться 1-2 дня. Я говорю о базовых вещах, таких как иерархия элементов и стандартные теги. Далее нужно будет разобраться с формами, таблицами, атрибутами и многим другим. Однозначно, сразу вы всё не запомните, но вы не будете зацикливаться только на HTML без применения CSS.

2. CSS

Уровень сложности: 5/10

Необходимость изучения: Обязательно

CSS — это код, который используется для стилизации веб-страницы и позиционирования элементов относительно друг друга. Новички, которые уже начали изучать css и которые читают это статью, могут удивиться, что я поставил css оценку сложности аж 5 балов. Это означает только то, что вы еще не дошли до адаптивной верстки, flexbox, grid и css-анимации. Поверьте, там есть над чем зависнуть. В интенсивном режиме обучения вполне не плохо можно научиться пользоваться html и css за 1,5 месяца. Но, поскольку в следующие пару месяцев, вы можете ничего не верстать вообще, то желательно периодически возвращаться к верстке, чтобы не терять навык.

3. JavaScript

Уровень сложности: 10/10

Необходимость изучения: Обязательно

JavaScript — это полноценный динамический язык программирования, который может использоваться в абсолютно разных направлениях, но в нашем случае, он применяется к HTML документу, обеспечивает динамическую интерактивность на веб-сайтах, управление данными и взаимодействие с сервером. Именно ему я поставил наивысшую оценку сложности, чтобы можно было понимать о сложности других технологий относительно js. Основные вещи, при очень интенсивном режиме обучения и постоянной практике, можно понять за 4 месяца. Но никогда ни на одном этапе вашего обучения или работы, вы не будете знать всё на 100%. В принципе, это же касается и CSS и многих других технологий.

4. jQuery

Уровень сложности: 4/10

Необходимость изучения: Необязательно

JQuery — это javascript библиотека, которая представляет собой набор функций для упрощенного, удобного и быстрого взаимодействия между javascript и html. В современном мире, эта технология отошла на задний план, и практически никогда не используется в новых проектах. В ходе работы вам могут попадаться старые проекты, в которых используется jQuery, а в некоторых вакансиях до сих пор пишут в требованиях необходимость умения работы с этой библиотекой. Поэтому, когда я пишу, что необходимость обучения необязательна, то это не значит, что вы должны вообще пройти мимо этой технологии. Желательно потратить хотя-бы 2-3 дня, посмотреть видео, «пощупать» её, чтобы понимать что это такое и как оно работает.

5. Node.js

Уровень сложности: ?/10

Необходимость изучения: Не нужно

Node.js — это среда для работы и выполнения кода javascript, которая может превратить его из узкоспециализированного языка в язык общего назначения. В основном используется для написания кода для серверной части. Я в него особо не углублялся, и если вы не собираетесь или пока-что не собираетесь становиться fullstack разработчиком, то не стоит тратить время на эту технологию. Вы просто должны знать, что это такое и для чего используется. Об этом вас могут спросить на собеседовании. Исключением из написано является менеджер пакетов Node.js о котором написал ниже.

6. Node Package Manager

Уровень сложности: 3/10

Необходимость изучения: Обязательно

NPM — это менеджер пакетов, который автоматически устанавливается вместе с Node.js, и который позволяет устанавливать в проект какие-то либо библиотеки или инструменты для более удобной и продуктивной работы. Я не могу сказать, что я сильно углублялся в его работу, но я им пользуюсь буквально каждый день. Я считаю, что на первом этапе достаточно просто знать как устанавливать пакеты, используя базовые команды в терминале, и поверхностный принцип работы, включая понимание что такое зависимость одного пакета от других. Чем больше вы потратите времени на изучения npm, тем лучше. Но я бы не рекомендовал в самом начале тратить на это больше 2-3 дней.

7. Gulp

Уровень сложности: 5/10

Необходимость изучения: Необязательно

Gulp — самый распространенный менеджер для выполнения часто используемых задач, которые необходимых в разработке. Например, минификация, объединение файлов, трнаспиляции sсss в css и т.д. В современном мире чаще всего его используют в небольших проектах, которые впоследствии могут использоваться совместно с CMS (система управления контентом сайта) и в которых использовать Webpack (о котором написал ниже) просто нет необходимости. Я бы рекомендовал хотя-бы ознакомиться с этой технологией, поиграться с ней пару дней. На собеседовании могут спросить.

8. Babel

Уровень сложности: 3/10

Необходимость изучения: Желательно

Babel — это программа, которая переписывает современный JavaScript на старый стандарт, а также транспилирует JSX (расскажу ниже) и прочие расширения синтаксиса в чистый JavaScript. Самый распространенный случай, когда разработчик касается Babel своими руками — это когда возникает необходимость, чтобы код поддерживался старыми браузерами, некоторые из которых больше никогда не будут обновляться. На самом деле, его возможности шире, и в React он выполняет работу «под капотом», а мы этого даже не видим. Не могу сказать, что если меня попросят воспользоваться Babel прямо сейчас, то я с легкостью это сделаю. Я больше понимаю его предназначение, чем имею опыт работы с ним. Также даже не имею представления на сколько часто он встречается в работе разработчика, время покажет.

9. Webpack

Уровень сложности: 6/10

Необходимость изучения: Обязательно

Webpack — сборщик модулей, который позволяет скомпилировать JavaScript-модули в единый JS-файл. Простыми словами, при большом количестве файлов программы, он создает один объемный файл для её запуска. Это же касается и html/css. Также в него встроены все функции, которые есть в Gulp. На начальном уровне, я считаю, невозможно понять и запомнить весь его функционал, но нужно обязательно уделить достаточно времени, чтобы уметь делать базовую настройку для вашего приложения. Практиковаться нужно до тех пор, пока это не будет происходить на автомате.

10. Git

Уровень сложности: 4/10

Необходимость изучения: Обязательно

Git — это система контроля версий, которая даёт возможность разработчикам совместно работать над одним проектом, управлять и отслеживать изменениями в файлах проекта.

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

Нет необходимости смотреть обучающие видео просто про Git, сразу начинайте с GitHub и вам всё станет со временем понятно. Вообще, эту технологию желательно уже знать как-только вы разобрались с html/css, в первую очередь, для вашего удобства, чтобы вы могли попросить помощи у знакомого/друга/ментора/преподавателя, залив свой код на GitHub и передав ему ссылку.

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

11. React

Уровень сложности: 9/10

Необходимость изучения: Обязательно

React — это самая популярная библиотека, которая позволяет удобно разрабатывать интерфейсы сайтов и приложений, разделяя код на небольшие компоненты (кусочки кода, которые отвечают за конкретный элемент). На данный момент я только изучаю React и это мне даётся сложно. Но уже прекрасно понимаю его преимущества. Среди них: JSX — синтаксис javascript, который на 99% похож на html, и который пишется в общем файле js; повторное использование компонентов в любом участке кода; и в целом, удобное создание одностраничных приложений (не путать с одностраничным сайтом). Не уверен, но сейчас мне кажется, что на изучение Реакта необходимо потратить хотя-бы два месяца. Более подробно о библиотеках, которые всегда используются вместе с React я расскажу как только буду более компетентен в этом вопросе.

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

Сейчас продолжаю писать своё одностраничное приложение на чистом js, которое я обязательно продемонстрирую с подробным описанием, а также продолжаю учить Реакт.

Вот и закончилось моё обучение в IT школе, которое длилось почти 4,5 месяца.

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

Под конец курса в нашей группе было 13 человек, 7 из которых, включая меня, получили сертификат c отличием с высшей оценкой «Excellent», один человек получил оценку «Very Good», двое «Good» и трое «Satisfy».

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

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

Вот какие планы у меня на ближайшие два месяца:

1) Написать одностраничное веб-приложение на чистом JS
2) Параллельно полностью разобраться с React.js и научиться на нём работать
3) Подтянуть проблемные темы, которые я не до конца понял или подзабыл в чистом JS
4) Переписать моё веб-приложение на React.js
5) Начать искать работу, и дальше наращивать портфолио

(Конечно-же, параллельно буду усердно учить английский язык)

Наш преподаватель посоветовал уже сейчас начинать проходить собеседования, но видимо у меня присутствует так называемый «синдром самозванца» и мне кажется, что я еще не полностью готов.  Да о чем говорить, если я еще даже нормально не разобрался в Реакте. Поэтому всему своё время.

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

Не хочу кого-то расстраивать, но, быть может, я сохраню чье-то время и скажу сразу. Те, кто рассчитывает на то, что будет достаточно посещать курсы по программированию 2 раза в неделю по 2 часа на протяжении 6 месяцев, и он станет программистом, то этого не будет. Разве что вы входите в 0,2% населения планеты и ваш уровень IQ более 140 баллов.

Очень часто на просторах Ютуба я встречаю такое мнение, что для того, чтобы стать программистом, необходимо выделять этому хотя-бы два часа в день. Возможно. Но это при условии того, что Вы будете заниматься 7 дней в неделю, и как я считаю, в этом случае ваше обучение продлиться года полтора. Либо вы сможете найти работу, условно говоря «верстальщика» с базовыми знаниями javascript. Но такие вакансии встречаются крайне редко и они имеют очень низкий уровень зарплаты.

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

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

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

Ближе к делу. Я выделяю на своё обучение 5 часов в день в одно и то же время. В эти 5 часов входят маленькие перерывы, для того, чтобы отдохнули глаза и перерыв на прием пищи. За вычетом перерывов, у меня выходит в среднем 4 часа в день чистой учебы. Но главная суть в том, чтобы определить для себя конкретные временные рамки в течении дня, в которых вся ваша жизнь будет посвящена учебе. Я рекомендую выработать строгий график, например каждый день с 17.00 до 21:00 вы учитесь. Как будто вы на работе или в школе и никак не можете отвлечься на какие-либо другие дела.

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

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

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

  Для начала хочу рассмотреть последовательность изучения, которую я считаю абсолютно неправильной.  Именно такую последовательность предлагают некоторые IT-школы в своих программах. Людям, которые в большинстве своём, не имеют никакого представления что и как, но которые выбрали именно фронтенд, потому что это должно быть интересно, предлагают начать сразу с языка программирования javascript. То есть программа начинается с двух! месяцев изучения javascript, в которой один только код, и максимум как визуально можно увидеть работает он или нет — это вывести результат в консоль в виде данных, либо тоже самое через всплывающее окно в браузере. И всё. Лично мне кажется, что я бы уже через неделю забросил обучение, потому что эта «интересность» так и не наступает, а понимать программирование очень сложно. В результате: сложно и не интересно. Зачем тогда продолжать себя мучать?

  Второй, как я считаю, тоже не совсем верный, но более распространенный подход — это сначала изучение  html/css, а после полное погружение в javascript. На примере группы в которой я прохожу обучение, несколько человек, после двух месяцев html/css,  вероятно ожидали подобной «легкости» от языка программирования. Ну первые же два легко дались. Да, js — это что-то другое, но уровень сложности обучения уже был установлен, поэтому, скорей всего, и дальше будет легко. Какого же было удивление людей, когда их «розовые очки» были сняты. Я тоже был среди них. Разница лишь в том, что я сразу себя готовил, что будет очень тяжело, и что html/css — это цветочки. В результате, эти несколько человек просто сдались уже в первый месяц обучения, а я остался.

  И вот теперь я дам совет новичкам, которые всего на несколько месяцев отстают от меня в обучении.

  Во первых, для того, чтобы понять все прелести профессии фронтенд-разработчика, нужно начинать с языков  разметки и стилей html/css. Про них всегда говорят как про одно целое, потому что они очень тесно связаны. Хотя бы потому, что вы не сможете визуально увидеть свою html-разметку и понять её принцип работы, пока не покрасите или обведете блоки с помощью css-стилей.

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

  И вот на моменте, когда уже можете сверстать простой блок, скажем, с одной картинкой, текстом и кнопкой, я бы рекомендовал начинать «щупать» javascript. Изучите как подключить файл скрипта, как повесить обработчик событий на кнопку. Привяжите кнопку к какому-то простому действию, например перекрасить цвет блока, при помощи добавления ему определенного класса. Пусть вы не будете понимать полностью принцип действия и просто скопируете чей-то код из Гугла, подставив свои значения, но начало будет положено.

  И вот, в процессе обучения css, периодически, нужно пробовать искать ответы в гугле, на какие-то базовые простые вопросы. Хотя-бы выработать привычку каждый раз вешать какие-то события на кнопку — это уже хорошая практика. Показать/скрыть блок, перекрасить какой-то элемент, вызвать всплывающее окно с какой-то информацией, а может даже вывести какой-то конкретный элемент, на котором кликнули — все эти базовые команды команды со временем начнут складываться в голове по кирпичикам. И периодически, выделяя время для решения легких задач в js, вы предотвратите ваш шок, когда следующим шагом в вашей учебе будет полное погружение в javascript. А то, что вы начали обучение сразу с тех действий, после которых вы мгновенно видите результат своей работы, будет вас мотивировать и не даст забросить учебу.

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

Первая часть статьи

Продолжать писать код после «закипания мозгов»

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

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

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

Лично мне комфортно делать перерыв каждые 1,5 часа на 15-20 минут.

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

У меня бывают случаи, когда я на столько увлечен решением какой-то задачи, что не делаю никаких перерывов 3-4 часа подряд. И вроде-бы кажется, что всё хорошо, что я ни капли не устал. Но не тут то было. В один момент, как будто по щелчку, я смотрю на код, который я писал три дня, как будто в первый раз.

Так что, делать перерывы нужно тоже уметь себя заставить, чтобы это стало привычкой, не смотря на увлекательность процесса.