Всем привет и добро пожаловать обратно в Simeron’s Arcade, где я создаю небольшие проекты, чтобы помочь мне улучшить свои навыки веб-разработки. Изначально я начал делать это в начале пандемии, чтобы начать заново изучать javascript и восстановить уверенность в себе с помощью ванильного javascript. У меня была хорошая полоса, пока мое внимание не переключилось на мою работу фрилансером, не стесняйтесь проверить эту работу на моем веб-сайте designanddevelop.co и перейти в раздел портфолио, чтобы увидеть все проекты, над которыми я работал.
Во время пандемии я многое узнал о своем собственном стиле обучения и развития. Вот почему я знаю, что для меня какая-то форма повторения - это все, чтобы что-то застряло в моей голове. Когда я сделал значительный перерыв в работе над созданием этих проектов javascript, я знал, что постепенно снова вернусь на круги своя ...
Затем эта возможность постучала в мою дверь ... Буквально, это была самая совершенная задача для меня - восстановить уверенность в себе с помощью javascript и снова начать работу. Возможность создать макет страницы продукта, где продаются книги, извлекая данные из файла JSON. Раньше я делал нечто похожее. Но это было иначе, потому что:
- Это был более сложный набор данных
- Я обрабатывал разные типы данных, например. изображения и hrefs
- У меня были гораздо более короткие сроки для завершения проекта
Когда начать
Учитывая, что я уже некоторое время не создавал что-либо с нуля, я хотел взглянуть на то, что я создал в прошлом, и посмотреть, могу ли я повторно использовать любой уже существующий код. Так что я смог повторно использовать часть моего кода генератора случайных цитат для создания моего вызова API для извлечения и доступа к данным JSON. После того, как у меня было немного, я составил небольшой план действий:
- Сосредоточьтесь на извлечении данных
- Убедитесь, что я могу получить все необходимые данные для страницы книжного продукта.
- Проверьте все, что отображается на веб-интерфейсе
- Погуглите некоторые дизайнерские идеи и сайты конкурентов для вдохновения.
- Создайте каркас для того, как должна выглядеть страница и как она будет складываться на мобильном устройстве.
- Выберите шаблон CSS
- Начать создание пользовательского интерфейса
- Убедитесь, что он адаптирован для мобильных устройств
- Проверьте, все работает как положено
- Создать документ README
- Напишите сообщение в блоге
Основываясь на приведенном выше плане, я расскажу о том, как я выполнял каждый из этих шагов, которые помогли мне сделать страницу тем, чем она в итоге стала.
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