2 заметки с тегом

фронтенд

Алгоритмы, ReactJS и другие новости

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

Основная работа

Ну что могу сказать? Спустя полгода «жёсткой» коммерческой разработки, меня уже не пугает legacy-код) Я могу достаточно быстро развернуть любой проект и продебажить его, чтобы понять как он там работает.

За это время я успел поработать на трёх разных, достаточно крупных, рельсовых проектах и пощупать их изнутри. Все проекты работаю в связке Rails + ReactJS с примесью рельсовых вьюх (на Slim или на Haml).

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

И это меня конечно, несколько, демотивирует...

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

Алгоритмы

Я, наконец, взялся за своё фундаментальное образование и начал учить алгоритмы и структуры данных.

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

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

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

Паттерны проектирования

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

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

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

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

ReactJS

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

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

По одному из видео-туториалов мне удалось собрать и задеплоить на Heroku собрал небольшой приложение, для расчета курса криптовалют.

Получилось прикольно! Теперь хочу сделать свой блог в этой же связке.

SMM Collector

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

В общем и целом, всё хорошо)

О самообучении в веб-разработке (часть 1)

Мысль о том, чтобы стать профессиональным full-stack веб-разработчиком меня посетила ещё в июне 2016 года.

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

Поскольку информации будет много, я решил разбить её на три части:

  1. Front-End (расскажу как я учился вёрстке и джваскрипту)
  2. Back-end (опишу свои мытарства при выборе серверного языка программирования)
  3. Скорость и результаты самообучения (философская часть, с выводами)

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

Front-End — начало

Начнём с того, что я уже 7 лет занимаюсь интернет-рекламой. Моя специализация — трафик и аналитика.

На тот момент я слабо знал HTML и CSS, но мне хватало этих знаний для моей работы. Я мог немного поправить вёрстку на сайте, подключить счётчики Метрики и Analytics и всё. JavaScript мне вообще казался клинописью. О серверных языках я даже и не заикался.

С этими «знаниями» я и стартовал в мире веба в июне 2016 года.

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

HTML5 и СSS3

С изучением HTML и СSS проблем не возникло. Мне повезло, поскольку я «варился» в теме интернет-маркетинга. Маркетолог не обязан уметь верстать макеты по тем исходникам, что присылает дизайнер, но ты очень плохой интернет-маркетолог, если не умеешь хотя бы починить «поплывшую» вёрстку у себя на лендинге.

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

Первое, что я сделал — подтянул свои знания HTML5 и CSS3.

Я перепробовал и пересмотрел кучу разных материалов, но лучшее, что я видел, было на сайте HTMLacademy.

У них отличные интерактивные уроки! Материал подаётся настолько простым, понятным и живым языком, что за несколько недель я сверстал с нуля свой первый одностраничник на чистом HTML и СSS.

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

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

JavaScript и прочие ангуляры с реактами

Что касается JS, то я ещё не погружался в этот язык очень глубоко.

Я успел пройти только пару тематических курсов на Codeacademy.

Там я познакомился с синтаксисом языка, попробовал написать какие-то свои простые скрипты.

Ещё, мне понравился сайт https://learn.javascript.ru. На мои вопросы по JS, Гугл чаще всего отсылает меня именно сюда.

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

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

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

Что ещё предстоит изучить:

В ближайших планах: освоить LESS (или PostCSS, пока не решил). Также я хочу подтянуть знания JS, освоить AJAX и работу с DOM-деревом, изучить простую анимацию и эффекты.

В дальних планах — научится использовать библиотеку React JS и смежные с ним технологии для реализации свои целей и задач.

Что изучать не планирую:

Я понимаю, что время на обучение ограничено, а фронтенд развивается c такой скоростью, что мне просто физически не изучить все технологии. Да это и не нужно!

Для реализации моих целей, мне отлично подходят знания в HTML5, CSS3, базовые знания JS и библиотеки в виде React.

Что касается других технологии...

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

Также не хочу углубляться в изучение jQuery. Я периодически подключаю эту библиотеку к лендингам (не понимая как она работает) из-за того же AJAX, но я уверен, что знания React в этом плане будут лучше.

В итоге:

  1. Если вы хотите работать фронтендером, зарывайтесь в JavaScript с головой. Это ваша и мама и папа на ближайшее будущее. Параллельно с этим учите React JS или Angular. Ну и NodeJS, если хотите заниматься бэкендом (об этом в другой части).
  2. Если вы не практикуетесь в языке, как например я (сейчас мало пишу на JS, так как изучаю Ruby), то навык написания кода конкретно на этом языке программирования (ЯП) — теряется.
  3. Предыдущие два пункта абсолютно не значат, что второй язык не нужно изучать, если не освоил первый или сконцентрировать всё своё внимание только на одном ЯП! Я заметил интересную вещь, что погружаясь в изучение разных ЯП, ты лучше их понимаешь. Логика работы этих языков очень похожа. Взглянув на какой-то код, ты можешь понять как он работает. То есть у тебя реже возникает «ступор» и чаще происходит узнавание кода. А это прекрасно!
  4. Только с погружением во френтенд я разобрался с тем, какие технологии мне нужны на самом деле. Поэтому выбирайте технологии и инструменты, исходя из своих целей и задач!

Конец первой части.

2018   веб-разработка   обучение   фронтенд