Всем привет и добро пожаловать обратно в Simeron’s Arcade, где я создаю небольшие проекты, чтобы помочь мне улучшить свои навыки веб-разработки. Изначально я начал делать это в начале пандемии, чтобы начать заново изучать javascript и восстановить уверенность в себе с помощью ванильного javascript. У меня была хорошая полоса, пока мое внимание не переключилось на мою работу фрилансером, не стесняйтесь проверить эту работу на моем веб-сайте designanddevelop.co и перейти в раздел портфолио, чтобы увидеть все проекты, над которыми я работал.

Во время пандемии я многое узнал о своем собственном стиле обучения и развития. Вот почему я знаю, что для меня какая-то форма повторения - это все, чтобы что-то застряло в моей голове. Когда я сделал значительный перерыв в работе над созданием этих проектов javascript, я знал, что постепенно снова вернусь на круги своя ...

Затем эта возможность постучала в мою дверь ... Буквально, это была самая совершенная задача для меня - восстановить уверенность в себе с помощью javascript и снова начать работу. Возможность создать макет страницы продукта, где продаются книги, извлекая данные из файла JSON. Раньше я делал нечто похожее. Но это было иначе, потому что:

  • Это был более сложный набор данных
  • Я обрабатывал разные типы данных, например. изображения и hrefs
  • У меня были гораздо более короткие сроки для завершения проекта

Когда начать

Учитывая, что я уже некоторое время не создавал что-либо с нуля, я хотел взглянуть на то, что я создал в прошлом, и посмотреть, могу ли я повторно использовать любой уже существующий код. Так что я смог повторно использовать часть моего кода генератора случайных цитат для создания моего вызова API для извлечения и доступа к данным JSON. После того, как у меня было немного, я составил небольшой план действий:

  1. Сосредоточьтесь на извлечении данных
  2. Убедитесь, что я могу получить все необходимые данные для страницы книжного продукта.
  3. Проверьте все, что отображается на веб-интерфейсе
  4. Погуглите некоторые дизайнерские идеи и сайты конкурентов для вдохновения.
  5. Создайте каркас для того, как должна выглядеть страница и как она будет складываться на мобильном устройстве.
  6. Выберите шаблон CSS
  7. Начать создание пользовательского интерфейса
  8. Убедитесь, что он адаптирован для мобильных устройств
  9. Проверьте, все работает как положено
  10. Создать документ README
  11. Напишите сообщение в блоге

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

1. Получение данных

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

function loadDoc() {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
const jsonRawData = this.responseText;
const data = JSON.parse(jsonRawData);
console.log(data);
//gets all the data above
...
};
xhttp.open("GET", "https://link-to-json-file.json", true);
xhttp.send();
console.log(xhttp);
}
function loadAllBookContent() {
loadDoc();
}
loadAllBookContent();

2. Получение всех данных, необходимых для страницы книги, и 3. Убедитесь, что они отображаются на веб-интерфейсе.

Все это было связано с манипуляциями с JSON и доступом к нужным мне битам данных JSON. Для этого я выбрал точечную нотацию так…

Обновите знания json - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

//Accessing the data
const getBookTitle = data.title;
//Displaying it on the frontend
bookTitle.innerHTML = getBookTitle;
const getBookContributor = data.contributors[0].contributor.name;
bookContributor.innerHTML = getBookContributor;

4. Погуглите веб-сайты некоторых конкурентов и 5. Создайте каркасные модели.

После того, как я загрузил все данные (ну, около 80% данных), на этом этапе у меня не было отображения изображения или форматирования даты так, как я хотел, но я использовал необработанные данные, чтобы что-то сделать. с, и я знал, что у меня есть все, что мне нужно. С этого момента я решил начать делать набросок того, как должна выглядеть страница. Для начала я провел небольшое исследование того, как выглядели другие книжные веб-сайты и одну или две общие страницы продуктов, а также провел небольшое исследование того, что делает страницу продукта хорошей. Я оказался в Pinterest и смотрел несколько книжных магазинов, которые я достаточно хорошо знаю, выбирал то, что мне нравилось на каждой странице, и отмечал то, что я хотел, как часть моего собственного дизайна. Это некоторые из веб-сайтов, которые я проверял в поисках вдохновения. Я нарисовал начальный каркас на бумаге, а затем обвел его разными цветными ручками, чтобы помочь мне определить, как я хочу построить и структурировать страницу, а также как я хочу, чтобы она работала с точки зрения гибкости.

Inspo страницы продукта - https://blog.hubspot.com/marketing/product-pages-love-list

Веб-сайт Waterstones - https://www.waterstones.com/book/slough-house/mick-herron/9781529398847

Случайный дом пингвинов - https://www.penguinrandomhouse.com/books/611535/the-turnout-by-megan-abbott/

Шрифты - https://fonts.google.com/specimen/Playfair+Display#pairings

Окончательные шрифты - https://fonts.google.com/specimen/Raleway#standard-styles

6. Выберите шаблон CSS.

Для меня это был интересный процесс ... Мне нравятся CSS и SCSS, но я всесторонне посмотрел на проект и на то, что он может потребовать, и на основании этого сделал суждение. У меня есть готовый шаблон / фреймворк CSS, который мне нравится использовать, но я провел небольшое исследование, чтобы узнать, какие еще варианты были и какие из них были наиболее популярными на данный момент. Исходя из этого, я решил попробовать Bulma. Я никогда раньше не использовал этот фреймворк, но я читал о нем много хороших отзывов, он выглядит достаточно простым, чтобы начать работу, и совместим с SCSS, что было для меня выгодным аргументом, поскольку на данный момент я не полностью решил, что На этом этапе я хотел использовать SCSS. Я обнаружил, что с Bluma легко начать работу и довольно легко использовать, мне даже понравились документы, которые тоже были отличными. Но по какой-то причине я просто не ладил с фреймворком. Я думаю, это могло произойти из-за того, что у меня было мало времени, и я хотел сосредоточиться на стороне проекта javascript. Я хотел больше фреймворка plug-and-play, и у меня не было ни времени, ни терпения, чтобы изучить это один.

После долгого чтения и проб и ошибок я решил, что для меня будет лучше перейти на шаблон CSS, который я использовал так много раз раньше и с которым чувствовал себя комфортно. Мне почти не потребовалось времени, чтобы все изменить, и я почувствовал себя намного лучше и увереннее, когда сделал это. Мораль этой истории для меня состоит в том, чтобы выбрать область обучения, на которой я хочу сосредоточиться, а затем оставить все остальное без изменений, если только это не будет легким и простым обменом.

Предпочтительный фреймворк CSS

Выбор адаптивного шаблона - https://www.lambdatest.com/blog/responsive-lightweight-css-frameworks/

Столбцы и отзывчивость - https://bulma.io/documentation/columns/responsiveness/#different-column-sizes-per-breakpoint

Адаптивный шаблон - http://getskeleton.com/

7. Начните создавать пользовательский интерфейс.

Как только я выбрал bluma в качестве шаблона CSS, я начал разрабатывать пользовательский интерфейс. Я начал с базовой структуры того, где должен располагаться каждый элемент, а затем как все будет складываться и работать на экране мобильного устройства. Как только это было сделано, я убедился, что все данные поступают в каждый раздел моей новой структуры. Я бы сказал, что этот раздел занял больше всего времени, так как именно здесь я имплементировал свой дизайн и экспериментировал с разными цветами, настраивал вещи и проверял, все ли в порядке. Также в это время я получил изображение из изображения JSON, которое отображается правильно, и получил форматирование даты, а также получил вкладки, с которыми я хотел работать, и другие мелкие мелочи, подобные этому.

Добавление изображения json - https://www.codegrepper.com/code-examples/javascript/how+to+append+image+in+javascript

Ссылка на изображение json - https://stackoverflow.com/questions/28778048/get-image-from-json-file-using-javascript-and-display-in-html-img-tag

Ссылка на изображение и пример json - https://jsfiddle.net/

Добавление ссылки json - https://www.geeksforgeeks.org/how-to-create-a-link-in-javascript/

Как отформатировать дату / месяц / год в формате JSON - https://stackoverflow.com/questions/206384/how-do-i-format-a-microsoft-json-date/2316066#2316066

Пример форматирования даты - http://jsfiddle.net/dhoerster/KqyDv/

Начальная дата форматирования - https://stackoverflow.com/questions/206384/how-do-i-format-a-microsoft-json-date

Вкладки - https://jsfiddle.net/Vallek/qumtxs65/

8. Как сделать его мобильным

После некоторого времени, когда пользовательский интерфейс получился так, как я хотел, в основном на настольном компьютере на этом этапе, я затем перешел к тому, чтобы убедиться, что моя страница работает и на мобильных устройствах. На этом этапе я перешел на использование скелета в качестве предпочитаемого фреймворка CSS вместо bluma, так что эта часть больше походила на форматирование и проверки. Моей единственной мыслью было то, что мне жаль, что я не пошел с интуицией и только начал со скелета. В результате того, что я сделал ранее, мне нужно было поработать на маленьких экранах, чтобы убедиться, что я доволен тем, как все отображается, и все было ясным и имело смысл.

Размеры ответа для мобильных устройств - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

9. Протестируйте все работает

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

  • Я проверил свою страницу на разных размерах экрана
  • Убедился, что все работает, как ожидалось
  • Проверил все кнопки и состояния наведения
  • Проверено, что все мои вкладки работают и правильно меняют размер
  • Проверил качество моего кода
  • Вынул все комментарии, оставив только те, которые я хотел оставить.
  • Убедился, что весь код отформатирован правильно
  • Убедитесь, что все по-прежнему работает после развертывания кода
  • Протолкнул весь код и клонировал свое собственное репо, чтобы убедиться, что все открывается и отображается правильно.

10. Создайте документ README.

В моих документах README я стараюсь делать их относительно простыми. Я включаю следующее:

  • Название моего проекта
  • Небольшое вступление о том, что я построил
  • Как использовать и получить доступ к странице, которую я создал
  • Ссылка на место, где я разместил созданную мной страницу
  • Дополнительные примечания о проекте, например какие улучшения будут в будущем
  • Снимок экрана, чтобы пользователь мог наполовину знать, чего ожидать, когда он перейдет по ссылке развертывания.
  • Небольшая линия для связи, если у кого-то возникнут вопросы.

11. Сообщение в блоге

И последнее, но не менее важное: я фактически начинаю проект со своего сообщения в блоге. В тот момент, когда я впервые выполняю поиск проекта в Google, я открываю свой блог и начинаю добавлять примечания и ссылки (ПОЛЕЗНЫЕ ссылки). Под полезными я подразумеваю ссылки, которые мне могут понадобиться в будущем и которые могут помочь мне, если они мне понадобятся снова, и которые хорошо иметь под рукой и иметь ссылку. Блог также является для меня отличным способом поразмышлять над проектом, который я только что сделал, и поразмышлять над тем, что я нашел легким и трудным, а также над тем, что я нашел полезным. Я люблю завершать каждый проект публикацией в блоге, чтобы помочь мне закрепить мои знания и, надеюсь, помочь кому-то еще, кому это тоже пригодится. Я часто пытаюсь писать в блоге сообщения о себе в прошлом и быть той помощью, которую искал много лет назад. Ниже я перечислил все веб-сайты, которые я упомянул в этом сообщении в блоге, не стесняйтесь их проверять.

Важнейшие выводы и обучение

Я многому научился во время этого проекта.

  • Я могу работать в условиях цейтнота
  • Я могу научиться всему
  • Мне не нужны сразу все ответы
  • Всегда следуй моей интуиции
  • Измените только одну вещь для каждого проекта
  • Доверяйте своему суждению

Все сайты, перечисленные в статье выше

Дизайн сайтов

Страница продукта - https://blog.hubspot.com/marketing/product-pages-love-list

Моя идея: Waterstones - https://www.waterstones.com/book/slough-house/mick-herron/9781529398847

Моя идея: случайный дом пингвинов - https://www.penguinrandomhouse.com/books/611535/the-turnout-by-megan-abbott/

Шрифты

Шрифты - https://fonts.google.com/specimen/Playfair+Display#pairings

Окончательные шрифты - https://fonts.google.com/specimen/Raleway#standard-styles

Предпочтительный фреймворк CSS

Выбор адаптивного шаблона - https://www.lambdatest.com/blog/responsive-lightweight-css-frameworks/

столбцы и отзывчивость - https://bulma.io/documentation/columns/responsiveness/#different-column-sizes-per-breakpoint

Адаптивный шаблон - http://getskeleton.com/

Создание полезных ссылок интерфейса

Обновите знания json - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

Добавление изображения json - https://www.codegrepper.com/code-examples/javascript/how+to+append+image+in+javascript

Также как отобразить изображение json - https://www.codegrepper.com/code-examples/javascript/how+to+append+image+in+javascript

Ссылка на изображение json - https://stackoverflow.com/questions/28778048/get-image-from-json-file-using-javascript-and-display-in-html-img-tag

Ссылка на изображение и пример json - https://jsfiddle.net/

Ссылка на json-ссылку - https://www.geeksforgeeks.org/how-to-create-a-link-in-javascript/

Добавление пути со ссылкой на js - https://www.geeksforgeeks.org/how-to-create-a-link-in-javascript/

Как отформатировать дату / месяц / год в формате json - https://stackoverflow.com/questions/206384/how-do-i-format-a-microsoft-json-date/2316066#2316066

Поэтапная дата - https://www.geeksforgeeks.org/how-to-create-a-link-in-javascript/

Пример поэтапной даты - http://jsfiddle.net/dhoerster/KqyDv/

Дата первоначального фарсинга - https://stackoverflow.com/questions/206384/how-do-i-format-a-microsoft-json-date

Вкладки - https://jsfiddle.net/Vallek/qumtxs65/

CSS и хитрости дизайна

Применить стили к дочерним элементам - https://stackoverflow.com/questions/26349987/how-do-i-apply-a-style-to-all-children-of-an-element

тень окна - https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Размеры мобильного ответа - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Переход к неправильному репо - https://stackoverflow.com/questions/31977100/git-push-is-pushing-to-the-wrong-repo