Содержание
Преимущества создания веб-сайта с нуля
Большинство людей, с которыми я говорю о продукте или веб-сайте, который я разрабатываю, как правило, спрашивают, использую ли я какие-либо фреймворки или библиотеки. Когда я говорю «нет», они обычно очень удивляются и спрашивают: «Почему!? Библиотеку использовать гораздо проще, и это экономит много времени на разработку». Они заставляют меня снова и снова сомневаться в себе, но каждый раз я подтверждаю, что принял правильное решение. Каждая строка кода, которая делает мой продукт живым, написана мной, моим собственным мышлением и моими собственными творческими идеями. Это может быть не идеально, может быть, даже не соответствует рекомендациям в Интернете, но именно так вы учитесь!
Должен признать, что это не только сделало мой код более эффективным и управляемым, но и каждый фрагмент кода здесь, потому что он предназначен для этого. У него есть смысл, своя цель. Я ненавижу видеть ненужные данные в местах, которые только занимают место.
Я хочу контролировать каждую часть технологического цикла. Когда я думаю о сети, я думаю не только об эффективности, но и о времени загрузки и весе каждого запроса с вашей машины, туда и обратно на сервер. Как мы можем улучшить это? Как мы можем сделать его лучше для пользователя?
Сегодня я расскажу об основных преимуществах создания сайта с нуля. В основном я рассмотрю теоретические аспекты и поделюсь своими мыслями из своего опыта веб-разработки.
Вы владеете кодом, вы его контролируете!
Щелкните правой кнопкой мыши — новый файл. Пустая страница — мигающий курсор. Момент, когда ваши творческие идеи ждут воплощения, и наступает волнение по поводу нового проекта. Это такое прекрасное чувство — начать разрабатывать линейку за строчкой и превращать свои идеи и фантазии в реально работающий цифровой продукт. Вы постоянно сосредоточены на том, чтобы сделать свой сайт максимально чистым и эффективным. Даже если это только начало и часть вашего кода может быть не идеальной, вы все равно довольны работой, которую делаете.
Вы начинаете гордиться этим. Вы видите, как накапливаются файлы разработки, и понимаете, как много вы сделали, прежде чем даже осознали это. Продукт или веб-сайт начинают обретать форму. Вы начинаете контролировать свой код.
Наоборот, представьте теперь, что вы открываете новый шаблон Bootstrap, вы смотрите на код, начинаете его модифицировать и находите хаки, чтобы заставить его работать так, как вы задумали. Файлы начинают запутываться, много кода фактически пишется, чтобы заменить значения по умолчанию фреймворков. Если вы спросите меня, это худшая техника веб-разработки, которую только можно было использовать, но, к сожалению, многие ранние разработчики в конечном итоге идут по этому пути. Делая это, вы не учитесь, вы просто манипулируете готовым кодом. Как вы можете рассчитывать на получение новых навыков и продвижение таким образом? Как вы узнаете о новых веб-технологиях, если все, что вы делаете, это обновляете до последней версии фреймворка?
Поверьте мне, видеть конечный продукт, готовый к отправке, знать, что все сделано своими руками — это незаменимое чувство .
Только вы знаете, что потребовалось, чтобы добраться туда. Это определенно стоит усилий. Вы учитесь на своих ошибках, вы продолжаете совершенствовать свои навыки. Вы знаете все о структуре сайта, можете легко ее поддерживать. Теперь вы находитесь под контролем.
Будьте уникальными и креативными в своем дизайн-мышлении
Вы создаете веб-сайт на основе собственного вдохновения и вкуса . Каждая часть дизайна здесь, потому что вы думали об этом, и она соответствует вашему собственному уровню ожиданий. Не бойтесь мыслить нестандартно и экспериментировать с разными техниками. Не стесняйтесь и продолжайте искать свой собственный подход к достижению определенных функций. В большинстве случаев вы поймете, что так оно и есть на самом деле. Перед тем, как сдаться и искать в Интернете, настоятельно рекомендуется провести мозговой штурм. В конце концов, вы всегда можете перепроверить свою работу с другими, если у вас есть сомнения по поводу совместимости или поддержки.
Запуск процесса с нуля заставляет думать на более высоком уровне, чтобы достичь определенного дизайна с минимальными усилиями. Это то, что делает ваш код уникальным и учит вас тому, как стать профессионалом. Теперь вы знакомитесь со средой веб-разработки.
Легко находите ошибки, скачки производительности и проблемы с дизайном
Когда вы пишете весь код своего веб-сайта или продукта, вы неизбежно знакомитесь со всей структурой. Это значительно упрощает поиск того, что создает ошибку, вызывает ошибку или сбой в дизайне. Не тратится время на поиски иголки в стоге сена. Нет лишнего кода, который вам нужно пройти, или включить хаки, чтобы исправить ошибку, вызванную фреймворком или библиотекой.
Кое-что, что я нашел полезным, это оставлять строчные комментарии и писать документацию на протяжении всей разработки. Сделайте это привычкой! Вы будете удивлены тем, как легко можно запутаться, когда вы вернетесь к своему коду, чтобы настроить или реализовать новую функцию.
Комментарии повысят вашу производительность и значительно сократят ожидаемое время разработки для поддержания вашего продукта в будущих обновлениях.
Значительно улучшите свои навыки кодирования и дизайна
Как мы уже упоминали выше, создание веб-сайта с самой первой строки кода заставляет вас искать и продолжать учиться, чтобы достичь того, что вы себе представляете. Вы заставляете себя исследовать, как необходимые функции могут быть реализованы нативно без использования библиотек (обычно это более характерно для кодирования JavaScript, например, для создания пользовательского модального окна, которое показывает приветственное сообщение новому пользователю). Это то, что заставляет вас идти вперед, потому что вы постоянно ищете новые способы и методы для написания и улучшения вашего кода.
Оптимизируйте производительность вашего веб-сайта
Моя предыдущая статья была посвящена радикальному улучшению производительности вашего веб-сайта. Ниже приведены два основных преимущества того, как создание веб-сайта с нуля может повлиять на производительность вашего веб-сайта:
- В ваших файлах разработки нет ненужного кода .
Дополнительный код означает дополнительное время загрузки сайта. Все строки кода, написанные для веб-сайта, существуют только потому, что они необходимы. Библиотеки или фреймворки добавляют весь этот беспорядок и ненужный код для сотен трюков и функций, которые 90% вашего сайта не будут использовать. - Оптимизирован для ваших особых требований. Если вы уже знаете, что хотите разработать, вы строите структуру, оптимизированную специально для этого сайта. Это делает ваш сайт очень эффективным!
Дополнительный код означает дополнительное время загрузки сайта. Все строки кода, написанные для веб-сайта, существуют только потому, что они необходимы. Библиотеки или фреймворки добавляют весь этот беспорядок и ненужный код для сотен трюков и функций, которые 90% вашего сайта не будут использовать.Не позволяйте производительности отставать. Сохраняйте мотивацию для оптимизации производительности вашего веб-сайта, стремясь получить наилучшие результаты в аналитике скорости страницы Google.
Эксперименты с новыми технологиями
Владение кодом вашего личного веб-сайта или продукта означает, что это также может быть вашей игровой площадкой. Продолжайте практиковаться в применении новых технологий и достижений на своем собственном сайте.
Реализовать новую технологию или функцию с существующим кодом гораздо проще, ведь теперь вы знаете, как все это работает, вы уже знакомы со структурой сайта. Это имеет решающее значение для того, чтобы ваш сайт был адаптируемым, ориентированным на будущее и прогрессивным. Это поддерживает вашу мотивацию к обучению, улучшая и поддерживая ваш веб-сайт в актуальном состоянии с помощью новейших веб-технологий.
Заключительные мысли
Как я могу поддерживать свой веб-сайт в актуальном состоянии?
Рефакторинг вашего кода . Если вы боитесь рефакторинга или постоянного обновления своего кода, вам следует вообще пересмотреть свое решение стать разработчиком. Это то, что вы должны знать с самого начала, прежде чем погрузиться в веб-разработку. Какой бы язык вы ни использовали, вы можете легко быть в курсе последних событий, подписавшись на еженедельные информационные бюллетени и обновления из авторитетных блогов на выбранном вами языке. Таким образом, вы узнаете, скоро ли какая-либо функция станет устаревшей, и подготовите свой код для будущих выпусков.
Это также заставляет вас не лениться и не оставлять свой сайт устаревшим. Многие веб-сайты все еще используют библиотеки или фреймворки, которым уже несколько лет, и переход с одной версии на другую становится все более разочаровывающим. Методы чистого кодирования (при правильном использовании) могут сохраняться в течение десятилетий и более, поскольку они написаны так, как было предложено при начальной подготовке веб-сайта или продукта. Не позволяйте этому стать причиной миграции или создания нового веб-сайта с нуля. Рефакторинг вашего кода станет основным ингредиентом, который поможет вам выйти на более высокий уровень и опередить своих конкурентов!
Не бойтесь плохо написанного кода, сегодня все профессиональные веб-разработчики уже писали беспорядочный код. Если вы не начнете с изучения основ веб-разработки, вы привыкнете к легкости поиска готовых шаблонов или фрагментов кода. Это уменьшит количество усилий, которые вы в противном случае приложили бы для получения новых знаний.
Единственный способ продолжать совершенствоваться и становиться лучше — начать возиться с кодом прямо сейчас. Это поможет вам освоиться с языком и не бояться браться за новые задачи!
Спасибо за прочтение!
Вы также можете ознакомиться с моей электронной книгой здесь — Мастерство веб-разработки
До следующего раза,
Оуэн Фар
P.S. Следуйте за мной здесь или подпишитесь на мою рассылку, если вы хотите продолжать изучать важные секреты веб-разработки.
Еще от Owen Far:
Что такое фреймворки и библиотеки? — Мое честное мнение _О, и меня забанили на Reddit._hackernoon.com
Как радикально улучшить производительность вашего веб-сайта (Часть 2) _Пришло время активизировать игру и стать лучшим в том, что вы любите делать больше всего!_hackernoon.com
Как создать портфолио веб-дизайнера с нуля
Что такое портфолио в веб-дизайне?
Каждому веб-дизайнеру или графическому дизайнеру нужен сайт-портфолио.
Ваше портфолио — это точка соприкосновения вас как креативщика с вашими потенциальными клиентами или работодателями. Как еще потенциальные клиенты смогут оценить уровень вашего мастерства и творческий опыт, если у вас нет библиотеки отличных работ, на которые вы можете сослаться и продемонстрировать в любой момент?
На что следует обратить внимание перед созданием веб-сайта-портфолио:
1. Бюджет и опыт
Тип веб-сайта, который вы разрабатываете, зависит от вашего бюджета. Во-первых, вам нужно определить, сколько денег вы хотите выделить на разработку сайта. В этом случае при составлении этого бюджета необходимо учитывать различные вещи, в том числе ваш собственный уровень знаний.
Вот несколько вопросов, которые вы должны задать себе, прежде чем принимать решение о своем бюджете:
Каковы ваши варианты развития?
- Программирование веб-сайта с нуля
В идеале, если вы знаете, как программировать, у вас есть максимальная свобода для разработки вашего веб-сайта-портфолио любым способом, используя язык по вашему выбору.
- Используйте веб-конструктор
Здесь у вас есть несколько вариантов, таких как WordPress, drupal, Wix и Squarespace. Разработчики веб-сайтов предлагают творческим людям стильные шаблоны, которые можно просто подключить и настроить платформу для демонстрации контента наиболее удобным для них способом. Тем не менее, веб-конструкторы ограничены с точки зрения дизайна и макета, поскольку некоторые темы и макеты фиксированы и позволяют вам изменять только цвета или предустановленные параметры, поэтому стоит принять это во внимание.
- Наймите другого креативщика
Если вам нужен веб-сайт, созданный по индивидуальному заказу, вы можете нанять коллегу-творца, который создаст его для вас, но делайте это только в том случае, если вы уже точно знаете, чего хотите.
Будете ли вы разрабатывать/поддерживать веб-сайт или кто-то другой?
Это важный процесс — разработка веб-сайта может быть сложной задачей.
Нанять кого-то еще может быть неплохой идеей, но только если у вас есть прототип или каркас для работы. NB: Это ваш сайт, не позволяйте другому человеку решать, что должно быть на нем! Прислушивайтесь к советам, но знайте, что и как вы хотите отображать.
Готовы ли вы платить за хостинг?
Зная, что вы хотите, чтобы ваш веб-сайт портфолио делал и выглядел, вы сможете лучше договариваться о сделках с хостинговыми компаниями. Тем не менее, по-прежнему важно найти авторитетную хостинговую компанию, которая может принести вам пользу и помочь вам с потребностями вашего веб-сайта.
Хотите регулярно обновлять сайт?
Об этом часто забывают многие люди и компании. Веб-сайты похожи на магазин (никто не любит магазин, о котором не заботятся!), поэтому не пренебрегайте веб-сайтом после его разработки. Обновляйте веб-сайт как минимум раз в две недели или раз в месяц.
2. Какова цель вашего портфолио?
После того, как вы определились с хостингом и разработали дизайн для своего портфолио, вам нужно будет определить цель для своего веб-сайта.
Будь то получение информации или привлечение потенциальных клиентов, это цели, которые будут способствовать развитию вашего бизнеса в будущем, и их следует определить заранее.
Как создать портфолио веб-дизайна
После того, как вы ответили на приведенные выше вопросы, пришло время запустить колеса и создать веб-сайт портфолио, выполнив следующие действия.
- Выберите подходящий для вас маршрут разработки веб-сайта.
- Выберите пакет хостинга, соответствующий вашему бюджету.
- Выберите уникальное и релевантное доменное имя.
- Выберите шаблон дизайна или создайте структуру, которая вам нравится.
- Настройте дизайн своего шаблона или собственного веб-сайта.
- Загружайте и форматируйте собственный контент в соответствии с вашим макетом.
- Убедитесь, что все содержимое правильное, т.е. изображения, ссылки, видео и копии.
- Предварительный просмотр и тестирование вашего веб-сайта.
- Опубликуйте свой веб-сайт в Интернете.
Зачем вам нужен веб-сайт с портфолио
1. Выставка
Портфолио — это ключ к тому, чтобы вы могли получить всю работу, которую хотите и о которой мечтаете. Наличие портфолио также поможет вам предупредить потенциальных клиентов о том, к какому типу дизайнера вы относитесь. Это также поможет им понять ваш стиль и то, на что вы способны.
2. Подлинность
Хорошо продуманное и структурированное веб-портфолио долговечно. Чтобы создать аутентичный веб-сайт, вам необходимо следовать принципам хорошей компоновки (UX/UI), применить трендовую тему или тренд дизайна и заполнить веб-сайт соответствующими проектами для отрасли, в которой вы работаете (или хотите работать).
3. Доказательство
Веб-портфолио служит формой идентификации креатива; вроде как документ, удостоверяющий личность, делает с человеком. Допустим, ваше веб-портфолио на данный момент разработано так, как вы хотите, и оно следует хорошей структуре и эстетике дизайна.