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

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

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

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

Онлайн-курсы изменили мою жизнь

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

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

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

Когда я понимаю основу алгоритмов, я могу кодировать их для себя и даже повышать уровень для более сложных алгоритмов, таких как графовые алгоритмы, такие как Prim или Kruskal, связанные списки, стеки, деревья и т. д.

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

Но какое это имеет отношение к веб-разработке?

Это же мне было интересно, когда я был в классе.

Основы всегда важны

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

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

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

Дизайн — еще одна (важная) сторона программирования

Когда я начал учиться программировать в университете, все написанные вами программы показывались в командной строке гостевой ОС. C был первым языком программирования, который я знал, с культовым приветствием, миром, напечатанным на этом черном экране.

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

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

Знаменитая IDE под названием NetBeans дала мне возможность впервые увидеть настоящий пользовательский интерфейс, которого я ждал пару лет, наконец-то могу увидеть на себе.

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

Тогда я сделал это. Библиотека адресов, калькулятор, приложение для рисования и все подобные утилиты или простые инструменты, которые есть почти в каждой ОС. Я сделал все это на Java, используя NetBeans и Swing. И чувствует себя хорошо. Но мне нужно было нечто большее.

Мне нужно было поделиться этим.

Вперед в облаке

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

Git

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

Для управления этим инструментом вы должны знать палитру команд или командную строку вашей ОС, потому что все задачи выполняются оттуда. Теперь у него есть классные визуальные инструменты, которые позволяют вам взаимодействовать с Git через пользовательский интерфейс, но желательно, по крайней мере, знать основные команды для создания репозитория, внесения фиксации (регистрации изменений), создания ветки, слияния и отправки/вытягивания из /в удаленный репозиторий.

Вот изображение наиболее распространенных команд для запуска в Git:

Сеть

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

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

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

Гитхаб

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

Учимся программировать

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

HTML

Да, это не язык программирования, но он необходим для создания любого веб-сайта, HTML показывает вам структуру сайта. Эти теги позволяют вставлять на веб-сайт текст, изображение, аудио, видео или любой мультимедийный элемент. Современная версия, HTML5, включает в себя возможности совместимости со старыми навигаторами, но рекомендуется всегда использовать современные браузеры для обеспечения безопасности при работе в Интернете и разработки.

CSS

Для создания современного и привлекательного дизайна CSS представляет собой набор свойств, который позволяет управлять поведением тегов html и изменять его внешний вид. С помощью этого свойства измените положение, размер, цвет, границы, поля и многое другое для каждого элемента HTML.

JavaScript

Вот настоящий язык программирования. С помощью Javascript (теперь JS) вы можете добавить интерактивность на свой веб-сайт. JS используется для создания, от надежных систем в облаке до потрясающих 3D-видеоигр, которые запускаются в браузере. Даже можете эмулировать ретро-игры или создавать свои собственные, возможности безграничны. JS используется не только на стороне сервера, но и для создания настольных приложений, мобильных приложений и т. д.

Кроме того, его очень просто изучить, прочитать и понять, по крайней мере, в его ванильной версии.

Код Visual Studio

Это редактор кода. Но это не простой редактор кода. Visual Studio Code выходит в 2015 году и с тех пор стал самым популярным редактором кода в сообществе.

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

  • Мощный интеллект
  • Большая коллекция расширений
  • Git-интеграция
  • Горячие клавиши
  • Поддержка многих языков программирования
  • Поддержка пользовательских сниппетов
  • Встроенный терминал
  • Поддержка нескольких курсоров
  • Поддержка компиляторов и отладчиков

Школы W3

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

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

Флексбокс

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

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

CSS-сетка

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

Медиа-запросы

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

CDN

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

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

Манипулирование DOM

Объектная модель данных — это имя, которое дает интерфейс для веб-документов. Mozilla определяет DOM как «программный интерфейс для веб-документов. Он представляет страницу, чтобы программы могли изменять структуру, стиль и содержимое документа».

Другими словами, это возможность изменить HTML-документ, будь то с помощью CSS для создания стиля или с помощью JS для предоставления логических возможностей.

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

Начальная загрузка

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

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

JQuery

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

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

Swiper.js

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

Ниже пример того, как я использовал этот инструмент на веб-сайте:

Показать прокрутку

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

Дерево.js

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

ScrollMagic

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

Node.js

Ну а с Node.js у меня не хватает опыта. Едва ли я сделал только один проект с этой технологией. Это была простая игра для зарабатывания очков с помощью Angular, но я еще очень новичок в этой технологии.

Электрон.js

С Электроном вы можете создавать настольные приложения на основе веб-разработки и использовать Chromium в качестве движка рендеринга. С помощью Electron был создан большой список известных приложений, таких как Visual Studio Code, Atom, Slack для Windows или более старая версия WhatsApp для Windows. Постепенно он устаревает из-за большой загрузки ЦП и плохой оптимизации.

Vue.js

Это фреймворк для JS, который позволяет быстрее разрабатывать и использовать объекты в качестве контейнера данных. На мой взгляд, это очень похоже на формат JavaScript JSON и упрощает отправку данных из одного места в другое. Форма создания пользовательских интерфейсов с помощью Vue.js намного проще, чем в других интерфейсных фреймворках, таких как Angular или React. Но популярность React привела к тому, что этот фреймворк перестал использоваться и развиваться.

API

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

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

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

Чтобы сделать такой проект, вы должны знать о формате JSON и о том, как анализировать все данные, полученные из API. Вы можете увидеть исходный код здесь.

НПМ

NPM — это инструмент командной строки, который используется для установки и удаления пакета для Node.js. Все библиотеки и фреймворки, принадлежащие к известным «стекам», таким как MERN (MongoDB, Express.js, React.js, Node.js), MEAN (MongoDB, Express.js, Angular, Node.js) или MEVN (MongoDB , Express.js, Vue, Node.js) и т. д. должны быть установлены вместе с инструментом NPM. Поэтому настоятельно рекомендуется знать все основные команды для взаимодействия с npm, потому что это необходимо также для запуска каждого бэкэнд-проекта, созданного с любой структурой.

Следующие шаги

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

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

Упражняться

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

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

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

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

Машинопись

С пиком таких библиотек, как React.js, TypeScript становится обязательным предметом для изучения, чтобы достичь роли разработчика внешнего интерфейса. Typescript — это «расширенный набор» Javascript, который добавляет возможности статических типов данных, добавляя уровень защиты к проектам JavaScript.

Как вы наверняка знаете, JS — это язык программирования с динамическими типами данных, что означает, что одна переменная может использоваться для хранения разных типов данных. В связи с этим родился Typescript, задачей которого является добавление статических типов данных в Javascript, например, для предотвращения вторжений в базу данных, использующих преимущества этого отсутствия отдельных типов данных, как это происходит с веб-сайтами, которые используют, например, более старые версии PHP и SQL. , где вы можете взломать веб-сайт с помощью простого запроса, как вы можете видеть на изображении ниже:

Фреймворки

Фреймворк значительно сокращает время написания кода и разработки проекта. С помощью фреймворка внешнего интерфейса вы можете получить элегантный пользовательский интерфейс для своих веб-приложений и страниц. Как я уже говорил, React.js и React Native являются наиболее популярными платформами для JavaScript (хотя некоторые считают React.js библиотекой).

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

Наиболее известны:

Библиотеки

Мы все знаем несколько библиотек, как для CSS, так и для JS, но было бы неплохо часто посещать такие сайты, как cdn.js, чтобы открывать и изучать новые инструменты и утилиты, чтобы максимально упростить наши проекты.

Отладка

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

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

Бэкенд-разработка

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

Кроме того, профиль Fullstack Developer иногда очень привлекателен при поиске работы, это во многом зависит от страны, в которой вы живете.

Делайте заметки и чистый код

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

В моем случае мой способ делать заметки — прямо над кодом, то есть с комментариями.

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

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

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

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

Что ты хочешь делать?

Коду мы доверяем, сохраняем спокойствие и продолжаем…