Перевод статьи Эммы Ведекайнд «6 Mistakes You’re Making As A Beginner Web Developer And How To Avoid Them».
Изучение веб-разработки может быть пугающим. Огромное количество ресурсов и руководств может подавлять. Начинающим веб-разработчикам бывает сложно определить, какие подходы являются лучшими и на каких технологиях стоит сфокусироваться.
В этой статье мы рассмотрим шесть распространенных ошибок начинающих веб-разработчиков и расскажем, как их избежать. Последнее поможет вам произвести хорошее впечатление на потенциальных работодателей и получить свою первую работу.
Надежда на jQuery
JQuery это библиотека JavaScript, создающая слой абстракции для DOM-манипуляций, управления событиями, анимаций и многого другого.
Многие разработчики начинают свой путь во фронтенде с неправильным представлением о jQuery. Они считают, что это более простая версия JavaScript. Большинство из них не понимает, что jQuery никоим образом не может заменить JS. Подобные ошибочные убеждения могут иметь серьезные последствия для вашего преуспевания в роли фронтенд-разработчика.
Многие работодатели вообще рассматривают применение jQuery как некий недостаток кандидата, потому что это демонстрирует недостаточное понимание основных концепций JavaScript. Поэтому, если вы решили изучить jQuery, не нужно использовать эту библиотеку в качестве костыля при добавлении функций в ваше веб-приложение.
Рекомендация: Изучите JavaScript, как свои пять пальцев. У Кайла Симпсона есть тысячи отличных (и бесплатных) книг, которые помогут вам изучить этот язык вдоль и поперек.
Надежда на фреймворки JavaScript
React, Vue и Angular в настоящее время являются самыми «горячими» фреймворками в JavaScript-сообществе. Но одна из самых больших ошибок, совершаемых начинающими разработчиками, – изучение этих инструментов без хорошего понимания JavaScript.
Хотя знание популярных фреймворков JavaScript и умение работать с ними является ценным навыком на рынке труда, вам нужно сначала изучить JS, а уж затем выбирать фреймворк. Если вы не знаете основ языка, вы никогда не сможете понять, какие функции выполняются «под капотом» этих фреймворков.
Рекомендация: Заложите хороший фундамент из знаний основ JavaScript, прежде чем погружаться во фреймворки. Это намного более ценный навык, чем знание отдельного фреймворка. Кроме всего прочего, это обеспечит вам преимущество на собеседовании, когда вам станут задавать технические вопросы. Если у вас будет глубокое понимание JavaScript, вы не возникнет проблем с освоением нового фреймворка.
Использование Bootstrap
Bootstrap это фреймворк для создания пользовательских интерфейсов при построении сайтов. Многие разработчики сначала воспринимают Bootstrap как легкий способ стилизации веб-приложения. Но если вы слишком уж полагаетесь на него, то в глазах работодателей это скорее минус, потому что показывает недостаток знаний основ CSS.
Включение Bootstrap в маленьких веб-приложениях влечет за собой последствия в плане производительности. Для уменьшения времени загрузки гораздо лучше написать CSS-код самостоятельно. Потенциальный работодатель скорее предпочтет, чтобы у вас было хорошее знание CSS, чем любого UI-фреймворка.
Рекомендация: Изучите CSS Flexbox и Grid для адаптивного веб-дизайна, изучите основы CSS, а после этого изучите Sass. Если у вас возникают проблемы с проектированием вашего приложения, поищите вдохновение в dribbble или посмотрите шаблоны на Wix или Squarespace.
Отказ от модульности при программировании
Очень важно убедиться, что ваш код обладает модульностью. Когда ваш код HTML, CSS и JavaScript содержится в одном файле, это не просто плохая практика. Это создает беспорядок и затрудняет тестирование.
Рекомендация: выделите ваш JavaScript во внешний файл. Это позволит вам отделить функционал от представления. Когда освоитесь с JavaScript, я советую изучить нативные веб-компоненты. Это существенно улучшит архитектуру вашего проекта и облегчит написание юнит-тестов.
Также вы можете подумать об использовании JavaScript-фреймворка или библиотеки вроде React или Vue. Обе они очень облегчают реализацию модульных компонентов, однако, прежде чем браться за них, убедитесь, что вы понимаете vanilla JavaScript.
Неиспользование семантического HTML
Просматривая портфолио и проекты кандидатов, я часто замечаю чрезмерное использование <div> и <span>. Нужно всегда использовать семантические элементы HTML5. Почему? Потому что это удобно.
Рекомендация: Ознакомьтесь с доступными вам семантическими элементами. Изучите, как строить иерархию разметки. Кроме того, почитайте о доступности в вебе – это отличный навык, который может произвести впечатление на потенциального работодателя.
Незнание адаптивного дизайна
Если вы начинаете свой путь в веб разработке, вам обязательно нужны навыки создания адаптивного дизайна. Большая часть поиска в интернете осуществляется с мобильных устройств и планшетов, а это значит, что наши сайты должны приспосабливаться к различным размерам экранов.
Рекомендация: Пройдите курс-другой по адаптивному дизайну. Научитесь пользоваться медиа-запросами для придания различных стилей вашему приложению. Изучение Flexbox и CSS Grid также будет очень полезным. Возможно, вы даже захотите применять подход «mobile first».
Надеюсь, эти советы помогут разъяснить некоторые недопонимания. И помните, что все мы когда-то с чего-то начинали. Со временем станет легче.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
