5 ошибок начинающих веб-разработчиков

1
699
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

Перевод статьи «5 Mistakes Beginner Web Developers Make – And How to Fix Them».

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

Все мы были новичками

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

Сегодняшние опытные специалисты когда-то тоже допускали некоторые из этих ошибок.

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

Итак, начинаем обратный отсчет!

Ошибка № 5: добавление пробелов в имена файлов

Вы можете сохранить свой HTML-файл с именем «my cool page.html», но ставить пробелы между словами — ошибка.

В веб-адресах (они также известны как URL-адреса) не должно быть пробелов.

Загрузив этот файл в свой браузер, в адресной строке вы увидите «my%20cool%20page.html». Поскольку пробелы недопустимы в URL-адресах, они кодируются.

Если вы хотите видеть разделение слов в именах файлов, используйте знаки подчеркивания (my_cool_page.html) или дефисы (my-cool-page.html).

Как новичок, вы, вероятно, не слишком беспокоитесь о поисковой оптимизации (SEO), но в Google отметили, что они предпочитают дефисы в именах файлов, а не подчеркивания.

Ошибка # 4: игнорирование чувствительности к регистру

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

Допустим, вы создали CSS-папку с именем «Css» и файл в ней с именем «Main.css». Но в вашем коде вы ссылаетесь на этот файл так:

<link rel="stylesheet" href="css/main.css">

Пока вы работаете над своим проектом, проблем нет.

Но когда вы загружаете свой проект на веб-сервер… Бум! CSS не подхватывается.

На многих веб-серверах вместо Windows работают различные версии Linux или Unix. Возможно, вы слышали о стеке LAMP. Буква L в LAMP — это Linux.

Эти системы чувствительны к регистру.

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

Ошибка № 3: непонимание путей к файлам

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

Вскоре после того, как вы приступите к изучению HTML, вы начнете учиться ссылаться на разные файлы HTML и CSS. Когда файлы находятся в одном каталоге, это довольно просто. Даже в приведенном выше примере в поисках файла main.css мы просто заглянули в каталог css.

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

В приведенном ниже примере мы устанавливаем фоновое изображение для веб-страницы в нашем файле main.css. Файл main.css находится в директории css. Мы ставим ссылку на изображение в директории img.

body {
     background-image: url("../img/moon.png");
}

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

Мы поднимаемся на одну директорию вверх при помощи двух точек: «..». Оттуда мы переходим в каталог img, чтобы создать ссылку на файл moon.png.

Если бы нам нужно было подняться на две директории вверх, путь к файлу начинался бы так: «../../».

Помните, что одна точка обозначает директорию, в которой вы находитесь. Две точки обозначают ее родительскую директорию.

Ошибка № 2: называть страницу по умолчанию иначе, чем index

Называть вашу страницу по умолчанию не «index», а как-то иначе, — ошибка.

Веб-серверы ищут файл index.

Если вы работаете с HTML, у вас должен быть файл index.html. Этот файл будет загружаться по умолчанию без отображения имени файла в конце URL-адреса.

Вот почему при переходе на свой любимый сайт вы не видите «/index.html» после «.com». index-файл загружается по умолчанию.

Конечно, ваш любимый сайт может использовать не только HTML, но эта концепция распространяется и на другие технологии, такие как PHP (index.php), React (index.js) и прочие.

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

Ошибка № 1: не делать перерывов!

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

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

Это случается со всеми нами.

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

Не огорчайтесь. Не вините себя. Просто встаньте из-за стола!

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

На самом деле эту ошибку допускают не только для новички. Это может случиться с кем угодно.

Мне тоже приходится напоминать себе о перерывах.

Вернитесь к коду, когда взбодритесь, и, скорее всего, очень быстро найдете ошибку, которую долго не могли найти!

Заключение

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

Если ошибки из моего списка были для вас очевидны — поздравляю! У вас уже есть опыт.

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

1 КОММЕНТАРИЙ

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here