Виктор Рябков - IT

Роль Javascript во Frontend

2023-06-03T16:15:56.123Z

Продолжаем серию статей в формате “для чайников”. Сегодня мы поговорим о том, зачем нужен JavaScript, как его учить и что для этого нужно.

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

JS - это ваша следующая ступенька изучения фронтэнда после HTML и CSS. И теперь эта ступенька вполне серьезная, и изучать ее придется долго и много

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

Если вкратце, можно выделить

Лексика, синтаксис и семантика;
Типы данных;
Операторы;
Переменные;
Функции;
Условные конструкции:
Методы, объекты и свойства;
Циклы.

Получше погрузиться в JS вам поможет вот этот учебник - https://learn.javascript.ru/

А тренироваться на практике можно на проектах, тут вам тоже нужна полезная ссылочка - https://proglib.io/p/web-projects

Важная ремарка: JS - уже реально достаточно сложный язык. И если html/css-у вас легко и на ютубе индусы научат, то Джаваскрипт может достаточно тяжело заходить. Мой личный совет - на этом этапе не сдаваться и начать более серьезно относиться к программированию

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

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

Во-вторых, тут уже реально пора задумываться о том, чтобы уделять изучению больше времени. Если html/css можно и за час в день выучить, на js вы рискуете надолго зависнуть, если будете медленно продвигаться.

Что после JS?

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

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

Во-вторых, на основе JS вам нужно будет овладеть одним или несколькими фреймворками.

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

Самые популярные фреймворки это React, Vue.js и Angular.

React — это самый популярный фреймворк, который нужен в 90% вакансий. Лично я на нем сейчас и пишу.

Angular — тоже популярный фреймворк от Google. Считается, что он подходит для более сложных приложений, но это понятие относительно, короче накодить можно что угодно. Лично я им почти не пользуюсь, но многие тоже его учат

Vue.js — что то между react и angular. Я лично на нем не писал, но иногда вакансии вижу где его требуют. Тут на ваше усмотрение

Короче, мой совет - react.

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

CSS для чайников - зачем нужен, как работает + подборка генераторов

2023-05-31T11:40:44.237Z

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

CSS расшифровывается как Cascading Style Sheets. Каскадные Листы Стиля - очень понятно, спасибо.

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

Продолжаем ряд: JavaScript - это про "что делает", а React, Angular, NodeJS - это про "найди себе уже друзей и девушку".

Так, общий смысл постарался донести. Теперь к функциональным особенностям.

https://msiter.ru/references/css-reference

https://puzzleweb.ru/css/all_properties.php

Здесь вы найдете весь список свойств, настраиваемых в CSS. Делать статью из перечисления их всех смысла нет, да и если есть желание разобраться подробнее, легче вписаться в мой бесплатный курс по HTML/CSS - - https://clck.ru/34NCEF

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

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

А теперь о более интересном - как себе упростить работу с CSS. Один из вариантов - использовать генераторы CSS-эффектов.

Это онлайн сервисы, которые помогают вам сгенерить код на CSS под ваш запрос. Сейчас поделюсь с вами небольшим списком того, что я нашел на просторах интернета или похожих статьях про СSS.

BGJar

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

CSS Grid Generator

Сайт для генерации кода для вашей сетки.

CSS Gradient Generator

Здесь можно удобно делать градиент, если самостоятельно вам пока тяжело это делать

CSS Button Generator

Название говорит за себя - это инструмент для создания кнопок для ленивых. Для особо ленивых там еще и много пресетов

Multiple Box Shadow Generator

Это инструмент для настройки теней, причем с достойным функционалом.

CSS Type Set

Здесь удобно настраивать текст, можно менять размер, спейсинг, шрифт и т.п. Не очень нужная фича, но можно пользоваться, если лень делать самостоятельно;

Keyframes

Здесь вообще много полезного для CSS, советую просто зайти и потыкать. Анимации, тени, цвета и т.п. Тени и цвета в списке уже были, а вот анимаций не было, поэтому я его сюда и вставил.

CSS Filters

Это инструмент для применения фильтров к фотографиям. Заливаете туда фотку, редактируете как в фотошопе, а сайт вам выдает код для такого же редактирования в CSS

Что скачать для разработки на JavaScript

2023-05-15T20:58:40.534Z

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

Браузер

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

Редактор кода

Теперь серьезно. Главное, с чего нужно начать - это выбор среды разработки. Если по-простому - то это умный блокнот в который вы будете писать свой код. Таких приложений огромное количество - Sublime Text, Visual Studio Code, WebStorm, IDEA и т.д, перечислять можно долго. Лично я сам пользуюсь и вам советую использовать VS Code по следующим причинам:

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

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

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

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

В общем качайте VSCode с официального сайта и радуйтесь жизни. https://code.visualstudio.com/

Node.JS

После того как вы скачали редактор кода, вам в первую очередь нужно установить nodejs. Да, даже если вы занимаетесь только фронтом. Если кратко Nodejs - это движок javascript прямо у вас на компьютере, а не только в браузере. То есть вы можете запускать свои js файлы, даже не открывая браузер. И это уже круто само по себе, но нам важно не только это.

Важно еще и то, что именно благодаря nodejs мы можем устанавливать любые пакеты, любые библиотеки, фреймворки, тулзы и так далее. Чтобы вы понимали: чтобы установить react, нам нужен nodejs, ведь реакт - это фреймворк. Как установить nodejs на пк я думаю вы разберетесь, здесь дам только краткие инструкции.

Есть две таблетки

Синяя таблетка - https://nodejs.org/en/download. Просто скачать архив, просто установить как обычное приложение. Заснуть спокойным сном младенца и забыть об этом уже завтра

Но я бы советовал идти другим путем.

Красная таблетка - использовать командую строку и менеджеры пакетов. Да, сначала вам будет страшно, а потом вы по-другому уже не сможете. Не бойтесь белого текста на черном фоне, на самом деле это самый удобный способ взаимодействия. В общем, буду говорить на своем примере - у меня MacOS, и для маков создали очень удобный инструмент который называется homebrew. https://brew.sh/

Вы заходите на оф. сайт. Копируете скрипт, вставляете в свою командую строку, нажимаете enter - готово. Теперь у вас установлен инструмент который позволит делать вам кучу классных вещей, в том числе и установить nodejs. Кстати о нем. После установки homebrew, вы легко можете написать в поиске node install homebrew и попадете на инструкцию где вам расскажут что и как делать. Вот кстати и сама инструкция - https://formulae.brew.sh/formula/node

Копируете команду, вставляете в терминал (так называется командная строка на маке) и готово. У вас установлен NodeJs и npm. И теперь вы еще на шаг отдалились от обычной жизни бытового юзера, упустили свою синюю таблетку и теперь вам придется стать программистом.

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

Git

После всех подготовок вам обязательно понадобится установить git. Благодаря ему вы сможете управлять версией своего кода, скачивать и заливать свои исходники. GIT это инструмент который упрощает вам жизнь при разработке. Github это сайт где в облаке хранится ваш код. Даже если вы работаете один и не хотите делится вашим кодом, то вам все равно нужно научится пользоваться этим инструментом. Чтобы добавить вам мотивации, представьте ситуацию. Вы пишите свой проектик, добавляете новые компоненты, фичи и все своевременно коммитите в гит. Таким образом у вас строится история вашего проекта и если в какой то момент вы все сломаете, то вы легко сможете найти так называемый ID вашего коммита и переключиться на него всего в две команды. Переключиться на тот момент когда еще все работало - это ли не чудо.

В общем идем в официальную документацию и читаем, как это сделать -https://git-scm.com/downloads

По важным установкам - все. Теперь надо понять, как со всем этим работать

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

В сроке пишем команду npm init, тем самым создавая наш package.json. package.json это файл где будут сохранены все ваши зависимости (библиотеки и тд) и скрипты.

И последний шаг - это создание git репозитория, для этого есть команда git init.

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

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

Как я изучал фронтэнд: полный список сервисов и советы по изучению

2023-05-10T08:54:55.438Z

Привет! Меня зовут Виктор Рябков, и сейчас я Senior Fullstack разработчик. Но 5+ лет назад я начинал как и все, с полного нуля и без технического или IT образования. Поэтому как и тебе, мне приходилось искать полезную информацию самостоятельно.

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

Для удобства буду опираться на уже известные роудмапы (например - https://roadmap.sh/frontend)

Проблема таких роадмапов в том, что они слишком общие. Понятное дело - если вы выучите вообще все, что там указано, то вы станете просто гением. Проблема в том, что там указан настолько огромный объем знаний, что большинство даже до 1/4 не дойдут и сдадутся, так как прямого результата не будет.

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

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

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

Раздел Internet это конечно хорошо, но далеко не обязательно по началу. Первое, с чего стоит начать, это HTML&CSS. Тут все очевидно, это база, которую должны знать даже дизайнеры. Что могу посоветовать?

https://www.w3schools.com/html/html5_video.asp

На этом сайте описаны все теги HTML и за что они отвечают как работают и тд. Учить их все не нужно, вы должны пользоваться этим сайтом как подсказкой. Не знаете как работает тэг? Зашли и почитали на сайт. Но все равно советую изначально хотя бы мельком пробежаться, почитать названия, иначе вам будет трудновато понимать, какие теги есть и что вы можете сделать при помощи HTML. Дальше сразу ныряем в верстку и пробуем все ручками. Представьте что вы Марк Цукерберг и пишете гениальный сайт, а получился фейсбук.

ВАЖНО! Зацикливаться на мыслях “Я ничего не знаю, пойду читать теорию…” - ошибка. Большая ошибка. Набивайте шишки в своей среде для разработки, так вы научитесь гораздо быстрее. Если не получится, просто удалите проект, никто вас ругать за ошибки не станет

Также советую документацию от мозиллы, тут сильно лучше дизайн и проще искать. https://developer.mozilla.org/en-US/docs/Web/HTML Используем как шпаргалку и не забываем по практику

После того как натыкали свою первую верстку, смотрим как сделать это красиво. Идем смотреть CSS.

https://msiter.ru/references/css-reference

https://puzzleweb.ru/css/all_properties.php

https://html5book.ru/css-spravochnik.html

Работает все так же, как и с предыдущим сайтом для HTML. Просматриваем базово и сразу в бой.

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

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

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

Ссылка на курс - https://clck.ru/34NCEF

После того как вы изучите простой CSS и HTML вы сталкнетесь с такой штукой как тэг Form, свойства CSS как Grid / Flexbox и т.п. Тут основной совет - идти на ютуб и посмотреть пару видео. Это супер базовый контент который есть почти у каждого, легко найдете объяснение на свой вкус и цвет.

По Grid моя личная рекомендация - https://cssgridgarden.com/ На этом сайте вы сможете в игровой форме изучит, как работает grid выращивая морковку. Короче топ за свои деньги (бесплатно).

Здесь мы подходим к рубежу когда вы уже Программист с большой буквы и знаете HTML / CSS.

Дальше идем учить JavaScript. JS делится на две части - простая часть (понять, что такое типы данных, функции, объекты и т.д.) и сложная часть (асинхронщина, евент луп, прототипирование и замыкание)

Начинаем от сложного к простому. Сначала смотрим базово, что вообще такое этот ваш джаваскрипт Смотреть тут https://learn.javascript.ru/

По моему мнению, это самый классный учебник по JS, который поэтапно вас введет в курс дела. Во время чтения постоянно все пробуем и тестируем в вашей среде разработки, не стесняемся.

Дальше используем вот такую шпаргалку от мозиллы. https://developer.mozilla.org/en-US/docs/Web/JavaScript

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

Допустим мы хотим попробовать запросить какие-то данные, чтобы посмотреть как у нас это получится. Берем и идем сюда https://jsonplaceholder.typicode.com/Это бесплатный Fake Api в котором вы можете брать ссылки как будто бы у вас есть backend и работать с этим.

На этом этапе я лично рекомендую взять небольшую паузу в обучении и сделать упор на практике. Берем несколько проектов на разработку, буквально один/два, не будем изобретать велосипед.

Берем первый сайт по запросу "Топ 10 идей для проектов для обучения JS" - https://proglib.io/p/web-projects

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

После практики и создания нескольких проектов нужно начинать уже набирать портфолио. Это значит, что нужно их куда то залить. И лучшее место для этого это github.

По Github учим, что такое репозитории и контроль версий. Тут к сожалению не подскажу сервисов, все раскидано по разным сайтам

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

На основе закончили. Дальше вам понадобится менеджер пакетов.

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

Гуглим NPM или YARN (кому что больше нравится) и тренируемся. Дальше создаем package.json которые будет записывать все ваши библиотеки и научиться устанавливать и удалять любые пакеты. Тут могу только посоветовать посмотреть https://www.npmjs.com/. Это огромная библиотека со всеми пакетами. Дайте разгуляться вашей фантазии.\

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

Angular / VUEjs / Svelte еще успеете глянуть позже когда начнете работать. Переучиться с фреймворка на другой фреймворк сильно проще чем сразу учить что то трудное. Тут нет каких то уникальных ссылок, только документация React https://react.dev/. Она классная удобная и на многих языках. Читаем ее, пробуем и практикуем, все непонятные моменты гуглим на ютубе.

Еще вам понадобятся форматирующие библиотеки вашего кода. Это нужно, чтобы код выглядел красиво и его могли читать другие разработчики. Основные две библиотеки для этого Prettier и Eslint https://prettier.io/ https://eslint.org/

Иногда сложновато заставить их работать вместе, но статей в интернете по этому полно. Просто вбейте “Настройка prettier и eslint” и действуйте по инструкции. И не переживайте, если сначала не будет получаться. Главное не бросайте это дело, ибо в коммерческой разработке это сильно важно. Красивый код - это ваше лицо.

Дальше опять останавливаемся в обучении и ныряем в практику. Сначала пробуем перенести свои проекты которые делали в самом начале на чистом JS в React. После того как все перенесем, идем опять гуглить прикольный проект и пишем его с нуля на react.

Приложение на react - это уже серьезное достижение. После этого момента останется только совершенствовать свои навыки и углубляться в тему.

После того как напишем свое собственное приложение на React, начинаем понимать, что писать весь css самому - тяжело. И вы правы, так как есть много готовых компонентов, например https://mui.com/. Это одна из самых популярных UI lib. Идем в доки, устанавливаем себе и пытаемся сделать все еще красивее.

Чтобы ощутить всю силу, создайте простое приложение (ToDo list или калькулятор) только из UI lib. Вам понравится

Идем дальше. Чтобы приложение работало как приложение понадобиться какой то State manager. Это инструмент который делает хранилище куда можно записывать состояние приложения. Залогинился пользователь, записали туда firstName / lastName и дальше используем во всех частях приложения.

Короче - Redux и Redux toolkit https://redux.js.org/

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

На этом этапе мы уже умеем с вами. HTML / CSS / JavaScript / React / Redux / UI lib

Но чего то не хватает…

Правильно, архитектуры! Нам нужна структура приложения. Конечно можно складывать все в корневую папку src и выглядеть как "гений". Но нам такое не подходит. Лично мой совет - брать все самое новое и свежее. Архитектура во фронте - очень динамичная вещь, она постоянно меняется и улучшается. Приложения которые я писал два года назад уже выглядят как отстой по архитектуре. Тут берем самое свежее - https://feature-sliced.design/

Там ребята на русском языке расписали как это использовать и какие проблемы это вообще решает в мире фронтенда.

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

Сначала будет трудно, непонятно, но как втянетесь, поймете что я был прав. Приложение с архитектурой легче поддерживать даже через много лет. Открываете проект и сразу понимаете, где что лежит. Это так же важно как eslint и prettier.

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

Это TypeScript. И нет, это не другой язык программирования и не что то сложное. Это просто надстройка над обычным JS чтобы помогать ВАМ же. Суть TS в том чтобы выкидывать вам ошибки еще на моменте разработки

Без тайпскрипта вы не сможете создать большое поддерживаемое и стабильное приложение. В какой-то момент вы упретесь в загадку: меняете в одном месте - разваливается в другом. Появляется так много зависимостей друг от друга, что без TS очень сложно. Поэтому открываем документацию по тс и читаем - https://www.typescriptlang.org/

Основное что вам тут нужно понять - как создавать config файл и как это вообще работает. Если в двух словах, то на TypeScript вы только пишете, а само приложение все еще продолжает работать на js. Круто то, что после того, как вы что-то написали на TS, вы запускаете компилятор и он вам выдает код на JS. И все готово.

Ну что, базово это почти все, что вам нужно для первой работы. Звучит конечно легко, но на деле - месяцы и месяцы изучения. Главное - не сдаваться, не бояться практиковаться, и не сворачивать с пути. Лично я именно так и делал.

Мой путь в IT

2023-05-10T07:11:37.285Z

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

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

Начнем с моих 17 лет. Я жил в Петергофе (пригород СПб), учился в школе, играл в компьютер, гулял, в общем, ничего необычного.

Близилось ЕГЭ, и, как и все, я целился поступить в университет. Поэтому я занимался с репетитором по информатике. И эти занятия даже начинали давать свои плоды: я уже умел писать мини сайтики, сам ковырялся в html и css, а также немного шарил в JavaScript.

С этим набором знаний я пошел сдавать экзамены. Кажется, при таких вводных данных, что же может пойти не так? Оказалось - вообще все, и ЕГЭ я с кайфом написал на чуть выше проходного балла.

Сейчас я понимаю, почему так получилось: я не готовился к тому, что требует ЕГЭ по информатике (не решал душные задания на логику и т.п), а учился скорее программированию.

Все же с набранными балами я решил подавать документы в вузы. Выбрал для себя 4 университета с проходными 230+ (уточню, у меня было суммарно 160 баллов) и решил поступать на шару.

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

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

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

Я решил не унывать и хотя бы работать (на тот момент я уже подрабатывал официантом после школы, так что я начал брать там больше часов)

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

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

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

После пару месяцев работы я накопил на курсы + 2-3 месяца пожить. А макбук я купил, продав свой старый игровой ПК.

Вуаля - стандартный набор фронтэндера готов - 18 лет, макбук, говнокурсы и пара рублей в кармане.

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

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

После окончания курса вариант оставался только один - искать работу

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

После этого я опять пошел на собеседования и еще два-три разочка на них обосрался. Пробовался я тогда только в РФ компании, то есть меня кто-то даже про диплом спросил. Это меня отпугнуло и я пошел пробовать иностранные вакансии (несмотря на свой низкий уровень английского)

Откликаюсь на вакансию, мне дают тестовое задание, спрашивают, сколько времени мне нужно. Как настоящий мужик я говорю - 2 часа.

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

В итоге его не только посмотрели, но и пригласили на 2 этап собеседования - на техническую часть.

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

С огромной натяжкой я веду с ним диалог и прохожу! Меня принимают на мою первую работу - какой то маленький американский стартап. Первая зарплата спустя пол года усилий и обучения - 600 USD в месяц. Это примерно 40-45 тысяч на то время.

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

На этой работе я полгода работаю как junior fullstack за 600usd в месяц. После этого прихожу просить повышения по причине "я вырос над собой, дикий разработчик, могу гугл второй создать" и договариваюсь на небольшое повышение и теперь у меня 820USD в месяц. А на тот момент это уже целых 60к в месяц. Гордость! Так я работаю еще полгода, решаю какие то мелкие задачки и наступает коронавирус. Массовое сокращение, джуны первыми улетают в помойку, меня увольняют.

Было неприятно, но я понимал, что год опыта у меня уже есть, а это по сути самое важное, чтобы подходить под минимальные требования уже на нормальные вакансии. Я сразу пошел записываться на все возможные собеседования, до которых мог дотянуться. Помню что их было порядка 20-25 штук и в каждом по 3 этапа. Мое расписание дня в тот период выглядело как: проснулся, с технические собесы или подготовка к ним, вечером задачи попроще вроде HR собеседований. Вечером анализируешь, где были пробелы по знаниям, и читаешь, чтобы в следующий раз ответить правильно.

Из-за короны с трудоустройством все было очень тяжело, и я искал работу месяца три, Но у меня были требования 120к в месяц, (то есть сразу x2 от прошлой зарплаты), удаленка и оформление как самозанятый, чтобы меньше платить налогом. Я был зажравшимся джуном.

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

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

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

Еще пол года работы за 120к и я пошел на переоценку моих знаний. По итогу переоценки мне дали 180к и уже уровень миддл-разработчика. Тогда я уже отошел от первого провального стороннего проекта и решил что хочу пробовать еще.

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

Еще пол года работаю за 180к и понимаю, что все. Хочу x2, хочу 300к в месяц! На работе покрутили у виска и подумали "мальчик, ты что, больной". Но я не обращал внимание и пошел собеседоваться. Спустя 2 собеса я сразу выбил себе 300к в какой-то компании, прихожу к прошлой и говорю, что мне дали столько денег, сколько я хочу, и я ухожу. Меня сразу остановили, предложив 280к, только чтобы я не уходил. Я согласился и радовался, что у меня получилось получить все, что я хотел.

По итогу через месяц меня уволили из-за низкого перфоманса. Не совсем понял как это произошло, ну да ладно.

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

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

Вот и все, хэппи энд!