За несколько лет работы в области в веб-разработке я заметил, что новички часто наступают на одни и те же грабли. И это нормально — все мы учимся на ошибках. Но зачем повторять чужие, если можно заранее узнать о подводных камнях?
Я написал эту статью не для того, чтобы высмеивать ошибки новичков или смущать тех, кто только начинает. Скорее, моя цель — обучить новичков и, надеюсь, уберечь их от некоторых распространённых ошибок.
Почему опытные разработчики забывают, каково это — быть новичком?
Когда ты годами пишешь код, многие вещи кажутся очевидными. Но важно помнить: профессионалами не рождаются. Каждый когда-то путал `margin` и `padding`, добавлял бесконечные `console.log` для отладки или забывал про семантическую вёрстку.
Если вы новичок, я надеюсь, что этот список сэкономит вам немного времени и избавит от беспокойства в ближайшем будущем.
Вы можете сохранить свой HTML-файл под названием «моя крутая страница.html», но пробелы между словами — это ошибка.
Веб-адреса (они же URL-адреса) не могут содержать пробелов.
Если вы загрузите этот файл в свой браузер, то увидите «my%20cool%20page.html» в адресной строке браузера. Пробелы необходимо кодировать, потому что они недопустимы в URL-адресах.
Если вы хотите, чтобы в названиях файлов слова разделялись, используйте подчёркивание (my_cool_page.html) или дефис (my-cool-page.html).
Как новичок, вы, вероятно, не слишком беспокоитесь об оптимизации для поисковых систем (SEO), но Google отметил, что они предпочитают дефисы в именах файлов вместо подчёркиваний.
Если вы используете Windows в качестве среды разработки, вы можете не заметить проблему, если будете использовать строчные и заглавные буквы непоследовательно. Это ошибка.
Допустим, вы создали папку CSS с именем «Css» и файл в ней с именем «M.css». Но в вашем коде вы ссылаетесь на него следующим образом:
<link rel="stylesheet"href="css/m.css">
Пока вы работаете над своим проектом, проблем не возникает.
Но когда вы загружаете свой проект на веб-сервер... Бум! CSS не применяется.
На многих веб-серверах вместо Windows используется какая-либо версия Linux или Unix. Возможно, вы слышали о стеке LAMP. Linux — это L в LAMP.
Эти системы чувствительны к регистру!
Поэтому лучше всегда использовать имена файлов и каталогов в нижнем регистре, если только не используется специальное соглашение об именовании, в котором имена пишутся с заглавной буквы. В этом случае имена файлов всегда будут последовательными. А последовательность — это то, что предотвратит эту ошибку.
Студенты, которые не понимают, как связывать файлы в разных каталогах, часто помещают все свои файлы в корневой каталог, чтобы получить к ним доступ. Это ошибка, которая приводит к беспорядочному расположению файлов.
Вскоре после того, как вы начнёте изучать HTML, вы узнаете, как создавать ссылки на другие файлы HTML и CSS.
Это довольно просто, если файлы находятся в одном каталоге. Даже в приведённом выше примере мы просто искали файл main.css в каталоге CSS.
Ситуация усложняется, когда нам нужно перейти в каталог, расположенный выше (или до) того, в который мы переходим.
В приведённом ниже примере мы задаём фоновое изображение для веб-страницы в файле main.css. Файл main.css находится в каталоге CSS. Мы ссылаемся на изображение в каталоге img.
body {
background- image:url("../img/moon.png");
}
Оба этих каталога (или папки) находятся в корневом каталоге. Поэтому нам нужно перейти в каталог CSS, а затем в каталог img.
Мы поднимаемся на один каталог вверх с помощью двух точек: «..»
Затем мы переходим в каталог img, чтобы создать ссылку на файл moon.png.
Если нам нужно подняться на два уровня вверх, путь к файлу будет начинаться так: «../../»
Помните, что одна точка указывает на каталог, в котором вы находитесь. Две точки указывают на каталог, расположенный выше того, в котором вы находитесь.
Назвать страницу по умолчанию как-то иначе, чем «index», — это ошибка.
Веб-серверы ищут индексный файл.
Если вы работаете с HTML, у вас должен быть файл index.html.
Этот файл будет загружаться по умолчанию без указания имени файла в конце URL-адреса.
Вот почему вы можете зайти на свой любимый сайт dot com или другой веб-адрес и не увидеть «/index.html» после «.com». По умолчанию загружается индексный файл.
Конечно, ваш любимый сайт может использовать не только HTML, но эта концепция применима и к другим технологиям, таким как PHP (index.php), React (index.js) и другим.
По мере обучения вы обнаружите, что некоторые разработчики выбирают другие имена файлов при использовании других технологий, но если вы новичок, придерживайтесь индекса.
Я получаю электронные письма от разочарованных студентов. Они часами изучали свой проект и не могут найти ошибку.
Часто проблема заключается в неправильном написании тега или переменной, отсутствии точки с запятой или другой небольшой синтаксической ошибке.
Это случается со всеми нами.
Если долго смотреть на код, зрение начинает расплываться, мозг затуманивается, и то, что было бы легко заметить свежим взглядом, становится невозможным.
Не расстраивайся. Не вини себя. Просто встань!
Прогуляйтесь. Выпейте кофе. Прилягте вздремнуть. Что угодно, что поможет вам избавиться от тумана в голове и снова ясно мыслить.
На самом деле, эта ошибка характерна не только для новичков. Она может случиться с каждым.
Я тоже должен напоминать себе делать перерывы.
Вернитесь к коду, когда отдохнёте, и ошибка, которую вы не могли найти, станет очевидной!
По мере того как вы наберетесь опыта, вы быстро преодолеете эти распространенные ошибки.
То, что когда-то было трудно понять, станет ясным.
Если эти распространённые ошибки были очевидны для вас, поздравляем! У вас уже есть некоторый опыт.
Если вы только начинаете, я надеюсь, что этот обзор распространённых ошибок новичков поможет вам сэкономить время и избежать разочарований в ближайшем будущем.
Благодарю за внимание!
Ваше время дорого для меня. Я рады, что вы провели его за прочтением данной статьи. Если вам понравился материал, подписывайтесь на наши обновления в Telegram, — там вы найдете еще больше полезных статей, лайфхаков и вдохновение. Всем удачи!