Войти в IT в 27 лет
Расскажу про свой опыт смены работы с не-айтишной на айтишную, про проседание по зп в 4 раза, про собесы, про правдивость обещаний знакомых программистов типа "да ты уже через полгода будешь 150 зарабатывать" и в целом про свои поиски
Волею судеб у меня 2 высших в сфере экономики, а знакомство с программированием ограничивалось Бейсиком на курсах в 7 классе и парой шаблонных сайтиков, которые я делала для поиска клиентов по фотографии (подрабатывала в универе) и по SEO оптимизации.
Я работала в маркетинговом агенстве в центре Москвы, была более чем довольна как доходом, так и гибким графиком, и еще более гибким отношением начальства, позволяющего прийти в офис к 12 и уйти в 16, если работы не было. Впрочем, тот мой шеф был отдельным кадром - однажды я задала ему достаточно тупой и очевидный вопрос, на что он ответил "Я нашел причину проблемы за 2 минуты, ты тоже сможешь решить ее сама - у тебя час, на кону твоя премия". Однако через пару лет работы я достаточно разочаровалось в SEO и захотела чего-то более конкретного в плане сферы деятельности.
На тот момент я искренне верила в то, что моих знаний тегов h1 и span более чем достаточно для понимания верстки (про флексы-гриды, мобильную верстку и анимации я даже не задумывалась), поэтому резко решила освоить JavaScript и стать фронтенд-разработчиком. Зарплаты на HeadHunter радовали, книжка по JS лежала у меня на столе... 3 месяца неспешного изучения, подколки коллег, видевших темную тему редактора кода у меня на мониторе, "Опять Пентагон взламываешь?" и я отправилась на первые собеседования. Для портфолио я сверстала несколько сайтиков по видео-урокам.
До тех собесов у меня почти не было неудачного опыта собеседования - чаще звали, чем нет. Тут же я приходила и за первые 5 (серьезно, пять) минут разговора с техническим специалистом я сама понимала, что дальше можно было просто встать и уходить. Очень быстро стало понятно, что о фронтенде речи быть не может, взяли бы верстальщиком - на тот момент я не могла ответить на вопросы о том, как выровнять элемент по вертикали, как сделать модалку на Бутстрапе и т.д. Что поразило больше всего - технические директора тратили свое время и объясняли. Вплоть до "А давайте вместе посмотрим, залезем в документацию к Бутстрапу, так, хорошо, вот она модалка...". Надо сказать, что эти объяснения отпечатались у меня в голове, мне кажется, навсегда.
Наконец, меня взяли верстальщиком в маленькую контору на несколько человек. На зп в 4 раза меньше текущей на тот момент. Но взяли! Я радостно начала ездить к 10 утра на окраину Москвы (реально окраину, там было только шоссе и грустная тропинка вдоль него), огребать за опоздания на 3-4 минуты, самой покупать чай и кофе и делать шаблонные сайты. Моего энтузиазма хватило до того момента, когда я, стоя на пустом этаже бизнес-центра перед автоматом с едой, думала о том, могу ли я себе позволить вафли или нет. После этого я отправилась просить повышения к начальству и получила ответ "Если вы сможете повысить продажи, то мы поднимем вам зп". Как моя работа связана с продажами, я не поняла и открыла резюме. Получила втык от руководства. Усилила активность по поиска новой работы.
Несмотря на все странности первой компании, за 2,5 месяца в ней мне удалось понять намного больше, чем за все время самостоятельного изучения верстки. Боевой опыт - есть боевой опыт. Научилась и мобильной верстке, и кастомизации готовых библиотечек, и отправить формочку на php. После чего меня без проблем взяли в агентство, и это были почти полтора года идеальной работы. Очень повезло с командой - стоило попросить кого-то о помощи, и коллега мог просидеть с тобой и полчаса, и час, и два, пока проблема не решалась. Опять же самый разноплановый опыт - много клиентов, много проектов, много технологий. Этому клиенту нужны доработки сайта на Vue, здесь - верстка с анимацией с нуля, эти ребята требуют PixelPerfect, тем нужно разобраться с Docker для сборки проекта, параллельно подрядчики намутили конфликтов в гите и ждут, пока я их решу. Все начиналось с задачек по верстке, потом иногда попадался и JavaScript, и полноценный фронтенд. Но 80-90% - верстка.
Стресс - бывало, но опыт - бесценный. Но у меня ключевым фактором оказалась еще и отличная команда, благодаря которой опыт набирался, а стресс был небольшим. Как говорил мой бывший "Ты хоть по одному из своих бывших так скучала как по той работе?". Как я узнала позже, это весьма распространенная схема "Пойти новичку работать в агентство, набраться опыта и потом уйти на сторону клиента - на меньшую загрузку и большие деньги". И такой момент настал и у меня.
В конце февраля 2020 (вы чувствуете, чем пахнет?) я начала деятельность по смене работы. Хотелось меньше загрузки и больше погружения в глубину технологий (когда ежедневная загрузка на 90-110%, нет ни времени, ни мотивации углубляться, надо быстрей-быстрей), ну и больше денег тоже хотелось - ни секрет, что в агентствах не самые высокие зарплаты. Одним из главных критериев было "Фронтенд, а не только верстка".
Ровно за 3 недели до начала общего карантина в марте 2020 я уволилась. Тогда еще мало кто верил в карантин. Но случилось то что случилось, и в середине марта мне позвонили кадры с новой работы и попросили срочно приехать и оформиться в штат, так как с послезавтра они переходят на удаленку.
Устроилась фронтенд-разработчиком. Почти 4 месяца на новой работе, и я ни разу не видела ни одного из своих коллег-программистов, все удаленно. В целом, никому бы не посоветовала включаться в новую работу по удаленке. Ситуаций, в которых чувствуешь себя тупой, в разы больше, чем при офисной работе. Мелкие административные дела типа подписать документ или написать электронное заявление на отпуск становятся часовыми квестами. Однако лучше так, чем если бы я не успела найти новую работу перед карантином вообще. А так - работаем, по зп удалось выйти на тот уровень, который был до ухода в IT. Но 150 пока нет, и тем более их не было через полгода после смены профессии, не ведитесь на такие обещания :)
Продолжение поста «Frontend-разработка. Initial commit»
Всем привет. В прошлом посте Я кратко рассказал о том, как Я решил заниматься frontend-разработкой. Итак, продолжим.
Когда Я устроился на работу Я понял, что это - лишь самое начало. Можно сказать, что предыдущие 3 месяца были разминкой. Я продолжил изучать информацию и закреплять её практикой. Вообще для новичка самое сложное - это найти практику. Изучение информации было хаотичным, денег на платные курсы не было, да и как понять какой курс тебе нужен? На Youtube полно бесплатных материалов, где Вас будут учить делать todo лист или что-то подобное, причем много платных курсов делают тоже самое. И много воды.
Если тут будут люди, которые только в начале пути и решились самостоятельно изучать, то скажу сразу, какие ошибки Я допустил.
1. Я очень быстро прыгнул в изучения языка программирования JS. И недостаточно времени уделил HTML и CSS, именно базовой теории. В будущем Я тратил больше времени, чем нужно, застревая на простых вещах.
2. Видео курсы как наркотик. Смотришь, вроде все понимаешь, повторяешь за автором, думаешь что усвоил материал. А как только закончил курс идешь за следующим. И это ошибка. Какое решение Я тут вижу? Мне помог такой подход: Я смотрел курс и параллельно начал простенький проект, в котором можно было использовать то, что дает автор курса. Так ты одновременно делаешь 2 проекта (1 твой и 1 тот, который дает автор) + на своем проекте ты закрепляешь материал и набиваешь шишки. В идеале после курса запилить еще что-то для закрепления.
3. Учить надо только то, что собираешься использовать.
Вообще заметил, что качество твоего обучения напрямую зависит от количества совершаемых ошибок. Ошибки заставляют тебя думать, глубже разбираться в материале/технологиях. А чтобы их совершать нужна практика.
Итак, 12 июля 2019 Я начал работать. Первые 2 месяца были достаточно сложными, потому что Я ни разу не работал в такой сфере. Несмотря на нагрузку и достаточное количество рабочих задач Я продолжал искать и учить материал. В следующие несколько месяцев Я углубился в изучение JS. По себе заметил, что мне нравится именно программировать - писать код, думать над логикой.
Я частенько оставался после работы в офисе до 10-11 часов вечера и изучал материалы, которые были в свободном доступе. Так начали появляться первые проекты: тетрис, todo-лист, опросник, слайдеры, клавиатурный тренажер, приложение с новостями (тут бесплатный API на определенное кол-во запросов в день, тренировал AJAX -запросы). Конечно все это было сделано не самостоятельно с нуля, да и сейчас если на них посмотреть с точки зрения качества кода они сделаны ужасно.
Но самое главное Я набирался опыта.
Спустя больше года со старта Я продолжаю свое самообучение. Когда сложно продолжать в таком режиме Я делаю перерывы на недельку (как раз прошлая неделя и была такой).
Какова цель этих 2 постов? Рассказать о себе, чтобы найти единомышленников. Спустя год стало еще сложнее определиться в выборе технологий. Почему? Потому что хочется делать качественно. Поверхностное погружение никому не нужно на рынке. А чтобы было качество - нужно посвятить достаточно много времени на изучение чего-то одного. Еще одна цель, которую Я преследую - делиться с людьми тем, что делаешь. Например, у меня есть шаблон модального окна, который Я сделал на своей сборке, вся логика там на Typescript. Но нет обратной связи о том, насколько это будет удобно для других и возможно стоит скачать какую-то готовую библиотеку и не изобретать велосипед.
С января этого года Я начал изучать React. Чуть больше месяца назад начал изучать Typescript. Хочу добавить потом его в React и продолжать его изучение. Около 2 недель назад решил изучить material-ui.
Проблема еще в том, что все что Я учу в последнее время - не используется у меня на работе)
План изучения на ближайший месяц:
1. Изучить matherial-ui
2. Сделать простенькую верстку на этом фреймворке.
3. Углубиться в изучение Typescript и начать учить TS для React.
P.S. не хочу начинать тут холивар, но считаю обязательным ответить на этот комментарий
Даже в веб-разработке можно столкнуться с необходимостью знания математики или физики. Вы можете поискать на Youtube конференцию, где сотрудник Яндекса рассказывает об алгоритмах и о том, как правильное их использование позволяет ускорить приложение, чтобы оно меньше потребляло памяти и т.д., делая его более комфортным для пользователя.
Есть так же и другой пример, про физику и математику. Если вы на фронте будете (например в Canvas) рисовать анимированные фигуры, которые должны будут двигаться в зависимости от действий пользователя + взаимодействовать друг с другом (например столкновения), то для реалистичности вам придется использовать сложные формулы, которые есть и в физике и в математике для расчета скорости/ускорения/той силы, с которой пользователь, например передвинул кнопку мыши. Поэтому не все так однозначно)
Спасибо всем, кто прочитал до конца)
Frontend-разработка. Initial commit
Имя: Александр;
Город: Москва;
Возраст: 29 лет;
Опыт: 1 год, 3 месяца, 4 недели (485 дней)
Всем привет. Я frontend-разработчик. Опыт работы в веб-студии, в коммерческой разработке - 1 год и 4 недели (на момент написания поста). Считаю себя новичком в этой сфере, потому что в апреле прошлого года Я работал обычным менеджером по продажам, абсолютно ничего не знал о web-разработке и решил самостоятельно переучиться на новую профессию. Поэтому немного расскажу свою историю и цель написания этого поста.
Как Я в этому пришел? В какой-то момент Я понял, что профессия менеджер по продажам сходит на нет, у этой профессии нет будущего. Я очень много могу написать своих мыслей на эту тему, но не в этом посте. Но еще что более важно, мне она не нравилась. И Я начал искать чем еще могу зарабатывать на жизнь.
Сначала Я начал искать методы удаленной работы, потому что не знал с чего начать. Youtube в этом плане предложил много разных вариантов. На данном этапе Я ничего не учил, просто смотрел и пытался понять, подходит ли мне работа, потому что цель была не войти в IT, а найти профессию, в которой можно будет развиваться и которая будет интересна для меня.
Я отлично помню день и момент, с которого Я заинтересовался именно фронтендом. Есть такой канал на Youtube Хауди Хо и там было видео "Учим HTML за 1 час!". И, конечно, Я не выучил за час HTML. :D Но Я увидел, что всего несколько строчек в обычном блокноте дают результат. Чтобы создать что-то простое не нужно никуда идти и это было не сложно. Это было 12 апреля 2019 года. И с этого момента Я начал изучение. Это было то, что Я искал
Так как у меня была работа 5/2, Я учился после работы. До 19:00 Я работал, к 20:00 был дома. И с 20:00 и обычно до 02:00 ночи Я изучал информацию. По выходным Я сидел по 12 часов. В течении 3 месяцев Я не пропустил ни дня. Поглощал информацию как безумный, тратил все свое свободное время. Почему так? Потому что на тот момент мне было 28,5 (часики то тикают), потому что IT - не моя основная специальность, у меня нет профильного образования и по сути, никого из этой сферы, кто мог бы мне помочь.
Откуда Я знал что нужно учить? Ниоткуда. Технологий предлагалось так много, а Я в них ничего не понимаю. Решить данную задачу мне помогла логика. Я открыл hh и написал в поиске junior frontend. И стал мониторить вакансии. Таким образом Я ориентировался на рынок труда, ведь Я планировал получать за это деньги))))
Выбор пал на классику - HTML, CSS, Javascript.
Примерно месяц Я изучал HTML и CSS. Со второго месяца Я начал учить JS. Нашел книжку Девида Флэнагана в сети и читал её по пути на работу/с работы. Честно скажу - мне это совсем не помогло. Я вообще не понимал что там написано. Хотя в сети писали, что это - библия JS. До сих пор Я не прочитал ни одной книги по JS. Со второго месяца Я начал откликаться на вакансии, где нужны были Junior-разработчики. Я понимал, что меня вряд ли возьмут, но мне были нужны тестовые задания и вопросы, которые задавали работодатели. Это было что-то типа промежуточного экзамена, когда Я мог проверить собственные знания и подтянуть то, что не знал.
Так Я наткнулся на одну вакансию, в которой был составлен план из 5 этапов. Если кратко - то это изучение HTML, CSS, JS, JQuery. Там Я познакомился со средой Node JS, Webpack, Pug, пре- и постпроцессорами и т.д.
Суть вакансии была такой: нужно было пройти все этапы, создать свою сборку, сверстать макеты, написать плагин и если ты все сделал нормально, то тебя могли взять на удаленную работу. Спойлер - до конца Я не дошел)) Но зато познакомился с несколькими людьми, по сути тоже самоучками и узнал много новых вещей.
На третий месяц Я старался посвятить больше изучению Javascript и делать макеты, которые находил в сети. К сожалению, большая их часть не сохранилась, с системой контроля версий Git Я познакомился не сразу. При этом Я продолжаю рассылать свои резюме. Хоть немного, но руку Я набил. Так Я попал в веб-студию, где и работаю до сих пор. Трудовой договор Я подписал 12 июля 2019 года (ровно через 3 месяца после начала моего самообучения).
Конечно человека с таким опытом не возьмут на разработку полноценных проектов, поэтому меня взяли на техническую поддержку сайтов. С того момента, как Я начал работать в веб-студии, мое самообучение начало набирать обороты, Я получил огромный буст к опыту)))
----
Текста получается достаточно много, на этом свою вводную Я пожалуй закончу. В следующем посте опишу, как и что Я учил дальше, цели и планы. Спасибо всем кто прочитал это)
И у меня есть вопрос: нужно ли выкладывать такие посты в конкретном сообществе (например Лига программистов)??
Сказочка дня
Поставил как-то раз Карим задачу на вёрстку сайтика. Мол, сверстайте мне новый блок, только у меня нет ничегошеньки, окромя макетушек.
Ну, что делать, пошли искать вёрстку... День, искали, два искали, на третий день нашли, да она тухлой оказалась.
Ну, ничего, посидели-подумали и придумали. А давай, найдём старый Комп Рустама, вдруг на нём дистрибутивы волшебные осталися? А давай!
И вот, уже пишут вовсю Андрюшеньке, царю всея СТП-шников. И поручает он поскрести по сусекам склада 7-го корпуса и найти тот Комп Рустама.
И пошли, и нашли, и проверили - нет, каким-то чудом его ещё не отформатировали, и принесли обратно.
И да собрались добры молодцы в офисе и извлёкли они диски жёсткие. И подключили их к компу рабочему и нашли на тех дисках проект!
И залили его быстро в репу созданную, дабы потомкам не иметь с ним более кручины никакой.
------------------------
Мораль басни - заводишь, сука, проект "да нам просто отдать заказчику", залей его, сука, в репу.
Быстрый хостинг проекта / surge.sh
По-хорошему статья должна уже закончиться, но я позволю добавить пару слов от себя.
surge — веб сервис, который позволяет опубликовать frontend приложение буквально двумя командами. Он будет вам полезен если вам нужно временно опубликовать проект в интернете.
А сейчас я начну «переписывать» документацию.
Установка
npm install --global surge
Запуск
surge
Подготовка к деплою
Итак, у нас есть проект
Переходим в терминал и запускаем surge
surge
Деплой
После регистрации подверждаем путь к проекту, указываем желанный домен и жмем enter.
Готово, вы в интернете!
Целью данной статьи было не научить чему-то, а показать, что такой сервис в принципе существует и как просто с ним работать.
Если он вас заинтересовал и вы хотите поближе с ним познакомиться — у него достаточно хорошая документация.
Разновидности Full-stack разработчиков
Вариаций Full-stack разработчиков, на самом деле, множество: PHP Full-stack Developer, Node.js Full-stack Developer, Java Full-stack Developer и так далее. Название, которое стоит в самом начале специальности, говорит о том, какой язык/платформа берется за основу во время реализации BackEnd части. Стек технологий FrontEnd-а практически всегда одинаков и отличается лишь используемыми JavaScript-фреймворками — Angular, React или Vue.js. А вот бекенд предоставляет гораздо больше возможностей для реализации своих амбиций.
Еще раз проговорим, что Full-stack Developer — это разработчик, который принимает непосредственное участие во всех этапах разработки веб-приложений — от создания клиентской части (визуальная часть + пользовательская логика) до реализации серверной (базы данных, серверная архитектура, программная логика). Какой стек технологий и языков находится в распоряжении данного специалиста? Если говорить о FrontEnd составляющей (клиентская сторона), то она у всех примерно одинакова:
язык верстки HTML и язык стилей CSS;
языки программирования JavaScript и TypeScript;
препроцессоры SASS и LESS;
библиотека jQuery;
фреймворк Bootstrap;
фреймворк Angular/React/Vue.js;
технологии DOM, AJAX, JSON;
навыки адаптивной и кроссбраузерной верстки.
Теперь разберемся с ответвлениями в бекенде, которые указывают на популярные языки и технологии, использующиеся во время реализации серверной стороны разрабатываемых веб-приложений.
Node.js Full-stack Developer
BackEnd составляющая (серверная сторона) может иметь различную начинку, в отличии от FrontEnd. Если говорить о Node.js Full-stack разработчике, то в качестве основного языка выступает JavaScript, а сам стек следующий:
платформа Node.js;
фреймворк Express.js;
пакетные менеджеры npm, yarn;
Web Sockets;
понимание REST API;
другие специализированные технологии.
Java Full-stack Developer
Главный акцент делается на язык программирования Java и связанные с ним технологии. BackEnd-стек у такого разработчика должен быть следующим:
язык Java + Java Core;
веб-сервер Apache;
инструменты для комфортного взаимодействия с БД — JPA/Hibernate;
фреймворк Spring (Spring MVC, Spring Boot, Spring REST, Spring Web);
применение облачных сервисов Google Cloud, AWS или Azure;
знание сервлетов, JSP (Java Server Pages);
знание микросервисов.
ASP.NET Full-stack Developer
.NET разработчики имеют широкий инструментарий для самореализации в вебе. В качестве основного языка программирования они используют C#. Копилка знаний BackEnd части у ASP.NET Full-stack Developer-а должна содержать:
язык C#;
знание инфраструктуры .NET;
платформа ASP.NET MVC / ASP.NET Core (Web API);
Entity Framework;
облачный сервис Azure;
язык T-SQL;
понимание RESTful API;
PHP Full-stack Developer
PHP — классический язык веб-разработки. Типичный BackEnd-стек данного разработчика отличается от остальных своей компактностью. РНР в вебе уже достаточно давно, а потому ему многого не нужно, а достаточно лишь:
собственно, сам язык PHP;
фреймворк Yii2/Symfony/Laravel.
Python Full-stack Developer
Универсальность Python не знает границ! Не стала исключением и сфера веб-разработки. BackEnd-стек Python Full-stack специалиста следующий:
язык Python;
фреймворк Django/Flask;
REST API;
Web Sockets;
навыки работы с ОС Linux и веб-сервером Nginx/Apache (возможно);
опыт работы с облачными сервисами.
Также, помимо специализированных технологий, всем Full-stack разработчикам необходимо:
знать систему управления версиями Git + сервис для хостинга IT-проектов GitHub;
знать реляционные (SQL) и нереляционные (NoSQL) базы данных, уметь их проектировать;
разбираться в протоколах HTTP, HTTPS;
уметь оперировать языком запросов SQL и одной из СУБД — MySQL / PostgreSQL / SQLServer, либо одной из NoSQL СУБД (MongoDB, например);
уметь проводить тестирование приложений;
осуществлять Code Review;
использовать Docker;
владеть английским языком на уровне Intermediate и выше;
знать популярные паттерны программирования и уметь их реализовывать;
иметь хорошее знание алгоритмов и структур данных.
Также, от Full-stack специалиста могут потребовать навыки мобильной разработки, если работодатель будет намерен портировать веб-приложение на соответствующие платформы.
Как видите, список необходимых языков и технологий для создания хорошей серверной составляющей веб-приложений достаточно внушительный. В следующей главе мы разберемся, какие преимущества и недостатки подстерегают тех, кто таки намерился связать свою профессиональную деятельность с Full-stack разработкой.
https://itvdn.com/ru/blog/article/who-is-fullstack?utm_sourc...
Аккордеон на грязном jQuery
Учебный пример! Не использовать нигде!
HTML
Добавим только триггер и содержимое:
<button class="js-accordion">
Click me?
</button>
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic iure eaque id repudiandae autem doloremque asperiores dolorum ullam molestias! Quidem sint quis quam quisquam at rem repellat! Magni, doloribus eaque!
</div>
CSS
Скрываем содержимое по умолчанию:
.content {
display: none;
}
jQuery
// При клике на кнопку
$('.js-accordion').on('click', function() {
// раскрываем следующий элемент
$(this).next().slideToggle();
});
В итоге вся магия в методе .slideToggle(). Можете еще почитать о .next() и .on(), хотя пожалуй не стоит. Лучше посетите мой codepen :)