Трудно понять, с чего начать изучение веб-разработки. Обычные предложения React, Svelte, NPM и т. д., вероятно, оставили вас в замешательстве и запутали в сложности. Вам нужно сознательно минимизировать это. Позвольте мне помочь вам начать работу, без багажа.
Всегда используйте принцип ПОЦЕЛУЙ
Когда вы начинаете, вы не хотите увязнуть в ненужной сложности. Вместо этого вы хотите, чтобы между вашим кодом и браузером было как можно меньше всего. Вы хотите сосредоточиться только на основах. Вы хотите KISS — Keep It Simple, Stupid. Следование этому принципу позволяет вам быстро вносить изменения, видеть их эффект и на самом деле понимать их.
Я сосредоточусь на том, как достичь этой простоты. Я также рекомендую наше руководство, чтобы избежать распространенных ловушек при обучении кодированию.
Забудьте о фреймворках, потому что они только добавляют сложности
Самый простой способ увязнуть — установить часто рекомендуемые инструменты и фреймворки (NPM, Yarn, PNPM, NodeJS, React и т. д.). Люди рекомендуют их, потому что они популярны и более востребованы в профессиональном плане, чем обычный старый JavaScript (JS). Эти рекомендации соответствуют их требованиям, а не вашим.
Сложные инструменты добавляют дополнительные слои в ваш код, которые скрывают, как происходит магия. Сопротивляйтесь этим слоям. Сосредоточьтесь на основах: что такое вещи, для чего они и как их можно использовать. Проверяйте все, чему вы учитесь, и ведите простые заметки.
Короче говоря, пока держитесь подальше от инструментов и фреймворков. Вы можете изучить NPM за пару недель. Возможно, за пару месяцев вы сможете изучить React или Svelte.
Читабельный код снижает когнитивную нагрузку
Простота (читабельность) — один из руководящих принципов чистого кода. Я часто переписываю сложные части своего кода, чтобы сделать его глупее и проще для чтения. Ваш код должен выражать свое значение через имена переменных и его структуру.
Используйте имена как указатели
Например, начинайте имена функций с коротких, простых слов действия:
функция fetchUserAccount() {…}
Вы можете пока не полностью понимать этот код, но вы можете понять его намерение: он извлекает учетную запись пользователя. Если это вам понятно, то это хорошее имя.
Взгляните на следующее. Даже если вы do понять код, не сразу становится ясно, что он делает.
функция оценкиРазмеров(b) {
вернуть bx > 10 && bz > 5 && по > 7
}
Теперь посмотрите на этот код, который делает то же самое, но имеет гораздо более четкие намерения:
функция boxWillFit(box) {
константа isDeepEnough = box.depth > 5
const isWideEnough = box.width > 10
const isLongEnough = box.length > 7
вернуть достаточно Глубоко && достаточно Широко && достаточно Длинно
}
Опять же, вы можете не понимать код, но его намерение ясно видно с первого взгляда. Вы будете просматривать свой код сотни раз, так что сделайте себе одолжение, сделайте его глупо простым для быстрой обработки и используйте имена для указателей.
Группируйте связанные вещи вместе, используя новые строки в качестве границ
Когда мы группируем вещи вместе, они формируют естественные ассоциации в нашем сознании. Вам следует использовать пустые строки в качестве границ для группировки связанных блоков кода вместе. Использование пробелов таким образом является обычной практикой в дизайне пользовательского опыта (UX).
Комментарии также помогают провести эти границы. Комментарии — это не ваши заметки; это метки и информация для будущих программистов (включая вас). Используйте их, чтобы помогать другим, но также KISS. Чем меньше вы пишете, тем лучше. Оттачивайте искусство краткости. Включайте только полезные комментарии и понятные метки.
В следующем примере комментарии начинаются с косой черты (/):
функция boxWillFit(box) {
// ПОЛЕ ПОДТВЕРЖДЕНИЯ.
// Иногда мы получаем вещи, которые выглядят как коробки, но таковыми не являются.
если (!isBox(box)) возвращает false
// ОЦЕНИТЕ ФИТНЕС.
// Это можно прочитать; не изменяйте.
константа isDeepEnough = box.depth > 5
const isWideEnough = box.width > 10
const isLongEnough = box.length > 7
вернуть достаточно Глубоко && достаточно Широко && достаточно Длинно
}
Обратите внимание на последовательность. Последовательность делает ваш код читаемым и более простым для обработки. Вы должны предоставить в своих комментариях ровно столько контекста, чтобы быть полезными.
Код становится сложным, так что упростите себе задачу
Одной из самых больших побед для читабельности является согласованность. Согласованность в макете, именовании и группировке освобождает вас от стрессового бремени обработки каждой строки снова и снова. Цель состоит в том, чтобы посмотреть на блок кода и знать, что он делает, не задумываясь.
Соблюдение разумных практик читаемости поможет вам понять ваш код по мере обучения. Все будет становиться сложным, и вам понадобятся четкие указатели. Это сэкономит вам много стресса и умственных усилий.
Обслуживайте контент локально с помощью простого HTTP-сервера
Чтобы придерживаться принципа KISS, сохраняйте простоту инструментов. Обслуживать веб-контент несложно, и на самом деле это можно сделать одной командой.
Создайте каталог и поместите в него файл index.html со следующим содержимым:
Привет, мир!
Привет из HTML!
Поместите файлы JS и CSS в один и тот же каталог, перейдите в него, а затем запустите сервер с помощью следующей команды:
python -m http.сервер 8080
Я предполагал, что у вас установлен Python 3. Теперь просто зайдите на localhost:8080 в своем браузере, и вы увидите свою страницу.
Если вы хотите, чтобы ваша страница выглядела точно так же, как моя, установите в своем JS-файле следующее:
const main = document.querySelector(«main»);
const p = document.createElement(«p»);
p.textContent = «..и из JS..»
main.appendChild(p);
И добавьте следующее в ваш CSS-файл:
п {
шрифта: жирный;
цвет: rgba(5, 5, 5, 0.75);
font-size: 4em;
семейство шрифтов: sans;
поле: 0px;
}
p:nth-ребенок(2) {
font-size: 1em;
}
основной {
дисплей: гибкий;
flex-direction: столбец;
align-items: center;
}
За исключением вас, редактор, это весь ваш технологический стек. Как видите, все просто, и ничто не скрывает ваш код. Это идеальный блокнот для начала вашего ремесла.
Чтобы увидеть любые изменения, обновите страницу браузера после их внесения.
Остерегайтесь разных способов импорта JS-файлов
Экосистема JS — это беспорядок. Фактически, вся экосистема разработки веб-интерфейса — это беспорядок. Как новичок, я часто путался из-за множества способов достижения одной и той же цели. Одной из областей, вызывающих путаницу, является синтаксис импорта. Чтобы избавить вас от подробностей, скажу, что существует 4 разных подхода, но самый новый (ESM) — самый простой в использовании.
Чтобы использовать новый метод, установите напишите равно модулю во всех ваших тегах скрипта:
Внутри index.js импортируйте еще один JS-файл, поместив оператор импорта в начало файла:
// Начало файла.
импортировать {что-то} из «/bar.js»
// Другой код здесь.
Косая черта в «/bar.js» относится к пути на localhost:8080/ и указывает на каталог, который мы обслуживаем; импорт «/bar.js» импортирует файл с именем bar.js из этого каталога. Кроме того, он импортирует «что-то», что является функцией или именем переменной, из bar.js.
В связи с этим, будьте осторожны, чтобы не перепутать CommonJS с обычным JS. NodeJS использует CommonJS, который требует специальных инструментов сборки для работы в браузере. Они выглядят одинаково, с небольшими различиями. Если вы видите такое утверждение, то оно работает только для NodeJS, а не напрямую для браузера:
const foo = require(«бар»);
Это (старый) способ импорта файлов в NodeJS.
Выберите редактор, который как минимум имеет подсветку синтаксиса
Подсветка синтаксиса — это, по сути, цвета для вашего кода. Если бы я мог выбрать только одну технологию для своего редактора, это была бы подсветка синтаксиса. Опять же, это визуальная вещь; наш мозг развивался для визуальной обработки информации в течение миллионов лет, и я считаю, что использование наших визуальных чувств — один из самых мощных инструментов для быстрого понимания кода. Цвета — лучший способ задействовать эту силу.
Выберите редактор с подсветкой синтаксиса. Если у вас возникли проблемы с выбором, вам могут быть интересны причины, по которым я выбрал Neovim в качестве текстового редактора. Однако популярными вариантами являются VSCode, Emacs, Notepad++ и даже Nano.
Найдите набор хороших ресурсов, потому что это ваша Библия
Вам нужны ответы, руководство, справочные материалы, руководства, идеи и, самое главное, терпение. Я не просто так их выложил; каждый из них имеет решающее значение.
- Справочный материал: веб-сайт разработчиков Mozilla (MDN), который является основным ресурсом.
- Обучающие материалы: их можно найти где угодно, но используйте их только в качестве учебных колес.
- Ответы: Лучше всего настроить ИИ на краткий разговорный режим и критически его допрашивать — не копируйте и не вставляйте сгенерированный код. Stack Overflow надежен, когда ИИ отходит от реальности.
- Руководство: Реальные люди — лучший ресурс. IRC и Discord имеют активные сообщества, хотя, признаюсь, я не пользуюсь ни тем, ни другим.
- Идеи: Используйте книги и YouTube. Книги познакомят вас с основами, а YouTube полон новых идей.
- Терпение: обратитесь к своему внутреннему дзен.
Если вы используете ИИ правильно, он не должен генерировать код за вас. Вы должны задавать правильные вопросы и получать краткие ответы на простом английском языке. Когда ИИ пишет весь код за вас, это только вредит вашей разработке.
Преобладающая идея — сохранять простоту. Это означает избегать сложных инструментов, размещать код последовательно и использовать разумные имена, чтобы сделать его читаемым с первого взгляда.
Чтобы обслуживать контент, создайте каталог, поместите в него исходные файлы и запустите сервер. Оттуда вы можете редактировать файлы кода и обновлять браузер.
Ресурсы, которые вы соберете, зависят от вас. Однако MDN — лучшее в сети, а серия обучающих материалов MDN отлично подойдет для абсолютных новичков. Вы также можете следовать нашему руководству, чтобы создать свое первое веб-приложение.
