Стать веб-разработчиком и переехать в другой город за 180 дней
Отсчет времени достижения цели с 10.01.2016
Решил я немного переосмыслить эту цель. Ранее тут было другое описание.
За последнее время произошло много всего интересного. Поставив цель "Найти работу в области веб разработки" ,я частенько терял курс и сворачивал с намеченного пути. Куда только меня не уносило: программирование ,веб-дизайн ,фриланс ,создание собственной студии и т.д. Из-за этих блужданий из стороны в сторону я потерял много времени.
Тяжело. Очень тяжело следовать по намеченному пути ,никуда при этом не сворачивая. Каждый раз казалось ,что новые возможности будут более выгодными в перспективе ,чем то ,что я выбрал. А выбрал я фронтенд разработку.
Возможно при постановке цели я не очень серьезно подошел к этому.
У меня есть 2 цели ,которые я буду преследовать в рамках этого мини-блога.
- Найти работу не в своем городе (предп. Санкт-Петербург)
- Съехать от родителей и жить одному в том городе ,где я найду работу
Я хочу достичь этого к лету. Чтобы выполнить эту цель ,мне нужно проявлять силу воли и упорство ежедневно. Учиться и работать без выходных. Работать не за деньги ,а за знания и навыки ,которые помогут мне в будущем обрести любимую работу в любимом городе.
Ранее я проанализировал вакансии на должности веб-разработчик / frontentd-разработчик / верстальщик.
Я выписал для себя все требования ,которые удовлетворят минимум 80% всех вакансий. В этом списке я учел как основные требования ,так и дополнительные ,которые повысят мои шансы.
Исходя из этих требований я составил список задач ,которые необходимо выполнить за 180 дней.
- Выучить теорию HTML / CSS / JavaScript (книги)
- Хорошо разбираться в HTML5 / CSS3 / JavaScript / JQuery
- Повысить скорость работы минимум в 2 раза
- Уметь быстро разобраться в чужом коде (CSS/HTML)
- Понимать устройство интернета в целом / браузеров и их различий / HTTP, REST
- Понимать специфику работы с AJAX, JSON
- Уметь верстать кроссбраузерно и семантично
- Responsive / Adaptive верстка с нуля
- Каждый день узнавать что-то новое из своей области / быть в курсе новостей
- Умение работать с Git / SVN
- Уметь натягивать верстку на WordPress / Drupal / Joomla / UMI. А так же уметь быстро разобраться в любой CMS ,CMF
- Знать 3 препроцессора: Less / Sass ( + Bourbon и его доп. библиотеки) / Stylus
- Знать сборщики Gulp / Grunt и некоторые утилиты для сборки и автоматизации
- Знать 2 методологии верстки - БЭМ и что-то еще (OOCSS / SMACSS / MCSS)
- Знать фреймворки Bootstrap / Foundation
- Знать шаблонизатор Jade
- Иметь базовые знания PHP / MySQL
- Хорошо ориентироваться в Linux и терминале
- Знать хотя бы один паттерн проектирования JS
- Уметь работать с SVG / d3.js
- Уметь верстать HTML-письма
- Знать методологии управления проектами
- Научиться грамотно излагать свои мысли и презентовать что-либо
- Сверстать 10 макетов с использованием всех выше перечисленных технологий
- Создать сайт-портфолио ,в котором будут мои работы и резюме
- Поднять уровень английского
Пожалуй это все ,что мне понадобится. Я не знаю ,смогу ли я это все забить в свою голову за пол года. Каждая из этих задач будет конкретизироваться ниже в списке этапов. Таким образом я буду иметь четкий список того ,что мне нужно будет сделать. Используя систему планирования и тайм-менеджмента ,шансы успеть сделать все это возрастают в разы. В принципе здесь все сводится к верстке 10 макетов ,в которых я заюзаю все технологии ,упомянутые выше.
Критерій завершення
Я нашел работу и жилье в чужом городе
-
Пройти курсы по JavaScript от Lynda
-
JSON
-
AJAX
-
-
Курс по JavaScript от Ильи Кантора
-
День 1
-
День 2
-
День 3
-
День 4
-
День 5
-
День 6
-
День 7
-
День 8
-
День 9
-
-
Теория JavaScript. Подробное руководство JavaScript
-
Введение в JavaScript
-
Лексическая структура
-
Типы данных ,значения и переменные
-
Выражения и операторы
-
Инструкции
-
Объекты
-
Массивы
-
Функции
-
Классы и модули
-
Шаблоны и регулярные выражения
-
Подмножества и расширения JavaScript
-
Серверный JavaScript
-
JavaScript в веб-браузерах
-
Объект Window
-
Работа с документами
-
Каскадные таблицы стилей
-
Обработка событий
-
Работа с протоколами HTTP
-
Библиотека JQuery
-
Сохранение данных на стороне клиента
-
Работа с графикой и медиафалйами на стороне клиента
-
Прикладные интерфейсы HTML5
-
-
Теория JavaScript. Учебник JavaScript
-
Введение
-
Основы JavaScript
-
Качество кода
-
Структуры данных
-
Замыкания, область видимости
-
Методы объектов и контекст вызова
-
Некоторые другие возможности
-
ООП в функциональном стиле
-
ООП в прототипном стиле
-
Современные возможности ES-2015
-
Документ и объект страницы
-
Основы работы с событиями
-
События в деталях
-
Формы ,элементы управления
-
Создание графических компонентов
-
Веб-компоненты: взгляд в будущее
-
AJAX и COMET
-
Анимация
-
Оптимизация
-
Окна и фреймы
-
CSS для JavaScript-разработчика
-
Сундучок с инструментами
-
Регулярные выражения
-
О всякой всячине
-
-
JavaScript Шаблоны (книга)
-
Введение
-
Основы
-
Литералы и конструкторы
-
Функции
-
Шаблоны создания объектов
-
Шаблоны повторного использования программного кода
-
Шаблоны проектирования
-
Шаблоны для работы с деревом DOM и браузерами
-
-
Теория CSS. Большая книга CSS3
-
Создание стилей и таблиц стилей
-
Селекторы: определение элементов стилизации
-
Механизм наследования стилей
-
Управление сложной структурой стилей
-
Форматирование текста
-
Поля ,отступы ,границы
-
Добавление графики на веб-страницы
-
Приводим в порядок навигацию сайта
-
Осуществление переходов ,преобразований и анимаций
-
Форматирование таблиц и форм
-
Введение в разметку CSS
-
Разметка страницы на основе плавающих элементов
-
Адаптивный веб-дизайн
-
Позиционирование элементов на веб-странице
-
CSS для распечатываемых страниц
-
Совершенствуем навыки работы с CSS
-
-
Теория HTML. Недостающее руководство HTML5
-
Представляем HTML5
-
Новый способ структурирования страниц
-
Разметка со смыслом
-
Продвинутые веб-формы
-
Аудио и видео
-
Основы рисования в холсте
-
Продвинутые методы работы с холстом
-
Совершенствование стилей с помощью CSS3
-
Хранение данных
-
Автономные приложения
-
Взаимодействие с веб-сервером
-
Несколько полезных возможностей на JavaScript
-
-
Уметь разбираться в чужом коде. Проанализировать чужие работы
Есть знакомый ,с которым мы верстаем одни и те же работы. Буду анализировать и править его код. А так же находить исходники других чужих работ и разбирать их. Цель - научиться быстро находить необходимые участки кода для правки элементов сайта.
-
1 работа
-
2 работа
-
3 работа
-
4 работа
-
5 работа
-
6 работа
-
7 работа
-
8 работа
-
9 работа
-
10 работа
-
-
Как устроен интернет. Как устроены браузеры и их отличия
Список материалов на изучение
-
В процессе..
-
В процессе..
-
В процессе..
-
-
Пройти курс от loftblog по комплексной разработке
Несколько уроков выборочно
-
Открытие курса
-
Как устроен интернет
-
Этапы разработки веб-проектов
-
Мастер класс по фотожопу
-
Workflow
-
Верстка 1
-
Верстка 2
-
JS 1
-
JS 2
-
Backend 1
-
Backend 2
-
Мастер класс по JS
-
JS 3
-
Мастер класс по ДЗ
-
Workflow 2
-
Workflow 3
-
Git, github
-
Мастер класс по ДЗ 2
-
Командная работа
-
Анимации
-
Мастер класс по ДЗ 3
-
Устройство на работу
-
Висновок
Ну вот и подходит к завершению эта цель
400 дней я шел к этому моменту. И таки дошел)
Конечно начал я эту цель не с нуля. До этого уже были какие-то знания ,но не было опыта. Весь год я наверное верстал какие-то учебные макеты ,пытался проходить курсецы по html и css. Читал книги ,опять таки по css и html. Пытался даже JS осваивать ,но как-то не получалось.
В какое-то время я и вовсе забрасывал верстку и познавал азы веб-дизайна. За все время было сделано 3 боевых проекта ,в которых я выступал и дизайнером и верстальщиком. За 1 из них я даже получил деньги :)
Было и время ,когда мы с одним знакомым хотели свой сайт по разработке сайтов сделать и продвигать его) В рамках этого проекта я как раз и сколотил 2 боевых сайта (2 заказа). Мы назвались Whspace) Потом я ушел ,а напарник вроде как-то пытается его продвигать. Даже команду собрал. Чтож ,удачи ему) А я выбрал иной путь.
Стал задумываться о работе в офисе (хотя первоначально планировал фрилансить). Но все это поначалу очень нестабильно ,а деньги нужны были. Начал готовить резюме. Это был уже июнь этого года. Посмотрел курс от GoIt по подготовке к собеседованию. Прогнал пару курсецов по веб-разработке. Сделал сайт родственнику для портфолио. А потом смотался на юг и забил на это все)
По приезду все же решил выложить резюме с 2 работами в качестве портфолио. Честно говоря я ни одной не хотел показывать там ,ибо код был ужасный ,как и кроссбраузерность. В общем выложил фотографии своих проектов ,но не стал выкладывать ссылки на них.
В резюме писал о себе много хорошего: SCSS ,less ,stylus, jade, git, gulp ,css3, html5, bootstrap ,jquery, javascript, photoshop, адаптивная/резиновая верстка ,SVG, БЭМ ,тайм-менеджмент. Ну и наверное ключевым фактором в моем резюме ,как я считаю ,который решил мою дальнейшую судьбу в плане работы ,оказались следующие слова (копипаст из резюме на HH)
Каждый день активно развиваю себя в области frontend-технологий по различным источникам (курсы ,уроки на youtube, статьи ,общение с опытными специалистами, форумы).
Имею большое желание работать и развиваться в области frontend. Быстро обучаюсь ,готов приложить максимум усилий для изучения новых технологий ,которыми еще не владею ,но которые потребуются в работе.
Проходит неделя ,но никто не звонит. Начал сам писать в топовые студии своего города. Написал в 2. Из одной сразу же ответили ,скинули тестовое задание. Кстати ,вот что я писал (копипаст из gmail):
Здравствуйте ,меня зовут Никита. Я начинающий веб-разработчик. Прошу рассмотреть мое резюме на позицию веб-программиста - ссылка.С примером моего кода можно ознакомиться здесь - https://github.com/webnikler. Готов выполнить тестовое задание. Готов к неоплачиваемой стажировке
Задание состояло из 2 частей. В одной нужно было сверстать страничку под ie7. Как сейчас помню ,ставил виртуальную машину с windows vista вроде и тестил)) Второе задание с JavaScript было связано ,уже не вспомню.
Начал я все это дело решать. Верстал аккуратно и семантично. Но тут вдруг мне звонят из какой-то московской компании. Это был тех. директор. Рассказал немного о компании ,о проектах ,поспрашивал чем я владею ,что умею. И скорее всего этот 5-минутный разговор как раз и был моим собеседованием)) После чего я начал ломаться. Ибо ангуляр для меня был чем-то слишком серьезным для моего уровня ,а на нем как раз и требовалось разрабатывать будущие проекты.
Я начал говорить правду. Я плохо знаю js и еще меньше у меня с ним опыта. Я лишь только верстал лэндинг пейджи. Но он сказал ,что тем не менее занесет меня в какой-то там список и перезвонит. Потом мне звонит один из менеджеров из Москвы. Собственно ему я начал твердить то же самое.
Ну и дня через 3 мне уже звонит hr и мы с ней договариваемся на стажировку. Мне предложили выйти уже в четверг в эту же неделю ,но я рассмотрел второй вариант - выйти в понедельник следующей. Почему? Да я просто накачал себе кучу курсов по ангуляру и уехал на дачу в надежде изучить хотя бы основы.
Какое-то осознание того ,что такое ангуляр к понедельнику у меня появилось таки. Однако повозившись с одним проектом ,который их бывший фронтенд-разработчик начал писать ,я понял ,что помимо ангуляра придется учить coffeescript ,gulp и angular material design.
Первое время я ничего не понимал. Вообще была идея перенастроить сборщик ,чтобы писать на чистом и привычном js. Иначе я и так js не знаю ,а тут совсем другой синтаксис ,хотя и симпатичный. Напомнил stylus или тот же Jade.
Но я взял себя в руки и выучил coffescript за выходные. Ну не весь конечно) Однако код уже мог читать и понимать. Время шло ,я начинал сильнее вникать в новые для меня технологии. Начал писать новые модули в проекте. Примерно через месяц я уже полностью разбирался в исходном коде.
Потом меня посадили на новый проект ,где мне самому пришлось планировать архитектуру. Вот сейчас им как раз и занимаюсь. На данный момент я единственный фронтенд-разработчик в отделе.
Вот так и прошел этот год. И эти 3 месяца моей стажировки. Цель считаю выполненной ,поэтому со спокойной душой закрываю ее)) На этом мой длинный рассказ заканчивается ,а новые цели и планы начинаются здесь.
Путь к Middle Frontend Developer. Этап 1
Всем удачи!)
Александр Соколов, у меня мечта в Питер свалить) Прикольный город) если вдруг выпадет возможность ,сразу туда)
Щоденник мети
Небольшое объявление о поиске сожителя в Мск)
В общем всвязи с тем ,что переезжаю в Москву ,решил тут оформить небольшой пост) Вдруг кто-то в такой же ситуации ,как и я ,и было бы круто объединиться)
Цены на жилье в Мск довольно высокие по сравнению с моим городом. И скорее всего одному будет очень туго вытягивать аренду жилья. Поэтому ,если вдруг кто-то тоже собирается переезжать в Москву или просто ищет жилье для совместной аренды ,но еще не нашел сожителя ,то могу предложить сделать это вместе)
Если вдруг звезды на небе сойдутся и по счастливой случайности вы тоже ищете сожителя в Мск ,то пишите сюда: vk.com/nikler.
Переезд планирую в следующем месяце)
Если вдруг кому интересно ,продолжение этой цели теперь веду здесь - https://smartprogress.do/goal/276127/.
Тимлид сегодня спрашивал ,когда у меня ИС заканчивается. Сказал ,чтобы я готовил шампанское ,в шутку конечно же)) Но намек я понял)
Новая неделя пошла ,а у меня куча новостей.
Ну в общем-то переехал я жить отдельно наконец-то. Если закрыть глаза на то ,что я все равно остался в своем городе ,то можно считать данную цель выполненной)
На работе непонятные вещи происходят. Старенькие менеджеры уходят (уже 2 ушло) ,а новеньких спецов все больше и больше. За последний месяц ,если не ошибусь ,пришло 4 человека конкретно в наш отдел.
Создал таки новую цель по становлению Middle Frontend Developer. Стартую с 18 октября - в день принятия решения о моей дальнейшей судьбе в компании.
Начинаем с другом проект на React. Вернее он начал уже ,а я пока что еще знакомлюсь с реактом и его окружением. Работать будем через пулл реквесты на гитхабе. Приложение ,которое мы собираемся пилить будет связано с учетом финансов.
Вот такие пока что дела. Эту цель закрою 18-ого числа. Пока что буду сюда отписывать. После 18-ого перехожу на новую ,и все посты ,касающиеся работы и саморазвития будут оказываться только там.
Пол дня возились с программистом над одной багой. У него команды отрабатывали нормально ,а у меня нет. Протестили на всех компьютерах почти. Везде нормально работает. У меня же нет. Переставлял сервак ,перегружал винду. В общем запрос исходящий с моего приложения некорректно обрабатывался сервером.
Уже почти опустили руки. И тут я заметил ,что когда отключил инспектор хромовский ,сразу все стало нормально отрабатывать. Судя по всему он что-то делал с запросами. Что-то ,что мешало работе сервера. Я почти всегда использую вкладку Network для отслеживания http-запросов и ответов. Пришлось временно пересесть на Firebug и мозиллу. Привыкаю к новому инспектору.
Разработка идет медленно. Очень часто приходится дергать программистов. Не все серверные модули реализованы. А там ,где реализовано ,есть какие-то недоработки. Уже не знаю ,куда списывать время на все обсуждения. Хотя замечаю за собой ,что мог бы работать раза в 2 эффективнее. Очень часто отвлекаюсь или просто жду ,какого-то решения. Хотя мог бы приступить к другой задаче. Нужно поработать над концентрацией и эффективностью.
Начал изучать ES6. И наткнулся на один канал ,где автор записал серию уроков.
В общем я в восторге от этого канала и уровня подачи материала. Я бы назвал его Sorax'озаменитель =) Реально очень доходчиво объясняет ,качество высокое.
CodeDojo
Собственно начал изучение ES6 здесь. Так же у меня есть книга по ES6 ,которую заказал недавно. Думаю ,этих 2 источников мне хватит для полного понимания нового стандарта. Параллельно буду просматривать примеры и статьи про связку angular 1.5 + ES6.
------
Кстати завел репозиторий на гитхабе ,где планирую хранить заметки ,конспекты и учебные проекты по js в рамках повышения знания JS до middle-уровня. Пока что веду там конспекты по ES6.
В общем буду начинать потихоньку формировать новую цель по фронтенд-росту.
Испытательный срок заканчивается примерно через 2 недели. За это время спланирую цель. Рассчитана она будет не на год ,как я планировал изначально ,а на пол года. Причем будет разбита на 2 отрезка. Собственно первые 3 месяца ,и вторые 3 месяца.
Какие цели я перед собой ставлю на этот период?
- Поднять знания JavaScript до middle-уровня. По плану будет пара курсов, книг и много статей. Цель - не должно быть такой особенности или сущности в языке ,о которых бы я не знал. Не ставлю целью знать все наизусть ,но при встрече с чем-то малознакомым иметь представление ,что это. DOM сюда не входит.
- Паттерны JavaScript. Лучшие практики. Стайлгайды .Ошибки и т.д.
- Изучить DOM ,BOM и общие принципы работы броузеров. Научиться максимально эффективно использовать инструменты разработчика Chrome и вспомогательные плагины.
- Прокачаться в angular 1.5 до middle-уровня. Освоить лучшие практики и инструменты. Архитектура и тестирование.
- Ознакомиться с React, Ember и Angular 2. Только ознакомиться ,вникать сильно не буду пока.
- Прокачать знания CSS3. Здесь же изучить лучшие практики с использованием препроцессоров.
- Сборщики. Изучить подробнее gulp и webpack.
- Изучение ES6-7.
- Чтение Совершенного кода.
Возможно список кажется очень насыщенным. В течении 2 недель буду его править и дополнять при необходимости. Саму цель распишу более подробно при создании. Разумеется это не полный путь до миддл-девелопера) Я полагаю ,что до мидла можно дорасти за 2 года. Поэтому буду подходить к этой цели этапами ,об одном из которых я рассказал в этом посте.
Все в голову не впихнешь за такое время. До мидла за пол года только вундеркинды вырастают. Если на работе этих технологий толом не будет...
Я бы ограничила список и составила на 3 месяца - посмотреть как пойдет, но чтобы и не расслабляться.
Сегодня интересная задачка была одна.
С сервера приходит строка с каким-то цветом в формате RGB. Нужно в этот цвет окрашивать бэкграунд определенного блока ,и в зависимости от того ,на сколько он темный или светлый ,красить шрифт так ,чтобы было читабельно.
Не стал изобретать велосипед ,пошел искать формулу ,и вот что нашел:
1 - (0.299 * red + 0.587 * green + 0.114 * blue) / 255 < 0.5
Собственно для начала я разбил строку по каналам:
RGB = backgroundColor // '#FF0000'
R = parseInt(RGB.slice(1,3), 16)
G = parseInt(RGB.slice(3,5), 16)
B = parseInt(RGB.slice(5,7), 16)
Подставил эти значения в формулу и получил булево значение на выходе. За основу для шрифта взял 2 цвета - темно-серый (не помню точное значение) и почти что белый (#eee).
Все это оборачивается в некую функцию - getFontColor(backgroundColor) ,которая возвращает строку с цветом шрифта в зависимости от результата формулы: true - значит цвет темный ,возвращаем #eee и противоположные действия для false.
Логика устроена так ,что я по таймеру отсылаю запросы на сервер ,чтобы обновлять цвет ,если он изменится. Соответственно внутри $interval я присваиваю в некоторую переменную значение этой функции.
$interval ->
httpRequest().then (backgroundColor) -> SomeService.data.fontColor = getFontColor(backgroundColor)
На самом деле там чуть больше логики. Но в общем решение было таким.
----------------------
Начал писать второй проект. Уже сверстал почти все состояния.Использую тот же йоман-генератор ,что и был на первом. Но как и планировал вместо coffeeScript буду юзать ES6. Недавно зацепил пару статей и репозиториев с проектами на angular 1 + ES6 ,за выходные нужно будет изучить.
Ну и реакт потихоньку изучаю))
Вчерашнюю проблему решили следующим образом. Сервер на самом деле может исковеркать регистр имени параметра только у одной определенной команды ,которая возвращала мне набор значений. Собственно конкретно для этой команды ,а возможно в будущем для подобных ,я написал функцию ,которая принимает пришедший с сервера объект ,имя необходимого параметра и значение по умолчанию.
vm.getParam = (obj, paramName, defaultValue) ->
for key, value of obj
return value if paramName.toUpperCase() == key.toUpperCase()
return defaultValue if defaultValue
return false
А вот так мы вызываем эту функцию ,когда получаем какие-то параметры с сервера
...
.then (data) ->
vm.params.someParam = SomeService.getParam(data, 'someParam', true)
В этом подходе есть 2 проблемы. Каждый раз ,когда мне нужно будет использовать какой-то новый параметр ,его нужно вручную прописывать. Для каждого такого параметра будет запускаться цикл. Но теперь мне не страшны нерегистрозависимые параметры прилетевшие с сервера)
-----------------
Сегодня с другом обсудили небольшой учебный проект ,который мы хотим написать на React + Redux + Webpack. Еще он хочет написать небольшой бэкенд на nodeJS + Express. В качестве UI возьмем Material-UI.
За выходные попробую в быстром режиме ознакомиться с React и Redux.
