Цель: позволяет сочетать все вещи, связанные с js & React, которые я узнал на сегодняшний день в одном большом проекте! Что может пойти не так?
Конечный результат: Сайт & Кодовая база
JavaScript сложно … сорта
Я узнал много вещей о JavaScript в прошлом году на работе, вещи, которые никто новичок в поле, без сомнения, также пройдет – вот несколько вопросов, которыми я столкнулся с тем, как некоторые из вас не могут относиться к И надеюсь, что примут немного комфорта в чтении:
- Какую IDE я должен использовать для программирования в JS?
- Какие плагины я должен использовать для оптимизации вашего рабочего процесса?
- Какой пакет менеджер и какая большая суета между пряжей или NPM?
- Что, черт возьми, WebPack и почему я уже ненавижу это?
- Eslint? Конечно, это приятно в теории, но вы пытались создать конфигурацию самостоятельно – больно!
- Фермент, шутка и моча – вы уверены, что вы все еще говорите о JS?
- Какая разница между Commonjs, ES6 & ES2018?
За прошедший год я пришел с точки зрения особенностей языка и может с радостью работать вместе с ним. Он по-прежнему очень много любви ненависти отношения, но привязав несколько проектов, начиная от полных веб-приложений, расширений Chrome и публикации базовых узлов, я чувствую себя гораздо более уверенно в своих возможностях, используя этот язык в качестве кодирующей среды.
Я чувствовал себя так уверен, что я понял, что попробую продемонстрировать свои знания и навыки, создавая сайт портфолио на моем личном Github, чтобы попробовать все методы, которые я узнал, и удивился, какая чудовищность выйдет.
Поцелуй – держи это простым глупым
Те, кто работают в UX, знают, что заранее от любого проекта вы должны в идеале сделать макет конструкций и пользовательских тестирование для обеспечения оптимального продукта для достижения максимального воздействия. Это было предприятие по идеальной дороге, что не делать … Сделай это, как вы идете.
У меня была идея (бурный эскиз) на блокноте, который я бы использовал в качестве основы для структуры сайта и фигурировал, я бы работал оттуда … Так как же работал процесс?
Настройка кодирования
Первые вещи сначала мне пришлось настроить проект с нуля. Я использовал базовый шаблон Create-React-App для начала.
Чтобы сделать процесс разработки оптимизирован, я настроил мой Атом IDE с Красивее Для обработки некоторой автоматической линии отступы на сохранении и добавил мой любимый Огни города Тема, чтобы сделать проект легче на моих глазах.
Я изложил создание некоторых основных многоразовых реагирования, таких как карты, заголовки, колонтитулы и навкары. Чтобы разрешить несколько страничных функций, я закончил добавить React Router и реагируйте на DOM – не то, что я действительно сделал с шаблоном Create-React-App.
Я оказался лечением отдельных страниц как «контейнеры», а не «компонентами», чтобы сделать код кода более разборчивым. Он оказался хорошим способом сегмента, что должно быть глупые компонента без природы от более интеллектуальных компонентов готовщики.
Далее я хотел попробовать показать некоторые из библиотек, которые я использовал в течение прошлого года, поэтому я добавил в Слифовые компоненты & Сетка в стиле Чтобы помочь структурировать отдельных страниц макета с пользовательским стилем.
Я решил добавить в дань данью дизайнерской библиотеке, которую я столкнулся в прошлом году с включением Дизайн муравья Карусель. Я хотел бы построить собственную карусель в ближайшее время, но на данный момент это было похоже на хорошее заполнителю, и конечный результат был вполне удовлетворен.
Я добавил в график пончика, чтобы представлять моих уровней доверия в моих лучших навыках, так что посадочная страница сайта даст всем, кто заинтересован в моих навыках, устанавливает снимок моих сильных и слабых сторон.
Рискнуть в неизвестное … CSS Media
У меня не было воздействия с использованием анимации или переходов с CSS и хотела попробовать что-то новое Поэтому я просматривал некоторые другие разработчики разработчиков Dev.to для вдохновения. В частности Али Сплитл Сайт выделялся мне. Я любил свое использование карт, чтобы отобразить некоторые образцы работы, которые она сделала. Мне всегда наслаждались игривой природой «О» раздела на ее странице с вращающимся изображением и решили интегрировать это на странице своих собственных проектов с добавлением вращающихся значков навыков.
Я решил сделать этот разведочный шаг на шаг и закончился, включая вращающиеся карты на моей домашней странице, чтобы раскрыть флип каждого изложенного навыка, чтобы содержать некоторые текст заполнителя. Это работает с наведением в браузере и с краном на мобильных устройствах. Я изначально видел эту технику в руководстве, демонстрирующем лицо по покерным картам, которые выявили себя на мыше. Идея заинтересовала меня, чтобы я не мог сопротивляться добавлять его!
Особенности ‘awwwww yes “
Были некоторые части того, что я разработал, что я был странно гордится и не пробовал реализовать ранее. Я всегда боролся с концепцией того, как обрабатывать с помощью мобильных веб-приложений для настольных компьютеров и управлять контентом для оптимизации пользовательского опыта. Я закончил использовать некоторые пользовательские Divs, чтобы скрыть дисплей как графа пончиков, так и карусели, когда экран был ниже установленного разрешения, чтобы разрешить полезный опыт на опыте мобильных и настольных компьютеров. Хотя это не оптимальный способ справиться с этой проблемой, это было что-то новое и творческое, что мне нравилось реализовать.
У меня были экспериментировали с использованием некоторых пользовательских функций серых массивов CSS, чтобы позволить зависать иконки социальных медиа на странице контакта, которая оказалась относительно хорошо, но может использовать уточнение позже.
Карты, которые у меня установили для демонстрации моих проектов, были личной подсветкой, особенно видят интерактивность между настраиваемыми кнопками, вращающимися иконами навыка и очистки текста, отображаемые в гармонии.
«Выше и выше» болевые точки
Следующие функции были абсолютной болью для внедрения и до сих пор требуют тонкой настройки Но я рад пройти через боль от земли вверх.
Я намеревался использовать некоторые пользовательские правила Eslinting и объединили их с помощью некоторой библиотеки предварительной коммиты, чтобы предотвратить возможность совершать свой код, если он не передал параметры льмина. Традиционно Eslinting используется с файлом ESLINTRC, определяющим индивидуальные правила. Я ранее не настроил один из них с нуля и в конечном итоге вызвал себя ужасной головной болью, пытаясь справиться с настройкой Eslinter рядом с XO библиотека. В конце концов мне удалось получить форму библиотеки XO, работающую с некоторыми плагинами, однако поскольку еще код все еще не на 100% Eslinted правильно, однако хороший прогресс был достигнут до сих пор, чтобы противодействовать этой второстепенному вопросу.
Список «быть завершенным»
Многие работы пошли в основной контур сайта портфеля на сегодняшний день, однако существуют существенные недостающие функции, которые необходимо будет включить:
- Круг CI Интеграция с защищенной главной ветви
- Обновленная посадочная карта страницы
- Шума
У меня есть некоторая дублированная пользовательская стиль, используемый в нескольких компонентах, которые я планирую объединить в один файл и разрешить импорт для предотвращения дублирования кода styling.
Другие ключевые дополнения, которые я хотел бы добавить в сайт, включает в себя:
- Интеграция redux
- Переключатель на использование рендеринга бокового сервера с Express для обслуживания контента.
- Интеграция элементов холста (возможно, демонстрируя некоторые P5.js Знание)
Хотя это будет хороший способ продемонстрировать еще несколько своих навыков, которыми я чувствую, что статическая природа сайта делает эти дополнительные возможности избыточными возможностями.
Последние мысли
Хотя сайт – это продолжение работы в прогрессе, вот несколько моих постоянных мыслей о проекте
Это было весело и интересно построить свои собственные многоразовые отзывчивые компоненты, это может быть что-то, что я смотрю на расширение в проект библиотеки компонентов по многоразонным компонентам.
Модификации Media-CSS были веселыми, а только добавляющие незначительные анимации и интерактивность, это определенно что-то, что я буду исследовать для будущих работ WebDev
Я определенно старую больше усилий в соображения UX до начала проекта, поскольку сайт в его текущей форме уже претерпел множество изменений проектирования во время его развития. Я могу рассмотреть возможность использования Marvelapp или эскиз для будущего каркасного дизайна
Такие генераторы статического сайта, такие как квадратные пространства, имеют тенденцию быть гораздо более художественным в их макетах сайта с полноэкранными страницами посадки, чистые цвета и более слоистые элементы, создающие более визуально привлекательный стиль. Я чувствую, что принять этот более тяжелый ориентированный на дизайн подход к другому проекту, будет веселой проблемой, движущейся вперед.
Хотя было весело делать все это в реакции, я не мог не отражать на том, насколько быстрее и проще, что это могло создавать нечто похожее в Bootstrap. Я даже остановился, чтобы рассмотреть более простые наборы инструментов, доступные для разработчиков, начиная от предопределенных услуг дизайна сайта, таких как квадрат и WordPress
Был в целом веселый эксперимент, который я был рад начать, однако конечный результат не такой чистый и четкий, как я бы хотел, чтобы это было. Это результат от отсутствия планирования дизайна. Это сказано, что я научился много участвовать в нем, а через несколько лет воздействие JavaScript готовый продукт не слишком шабит!
Если у вас есть какие-либо отзывы или предложения по отношению к тому, что могут быть некоторые полезные дополнения, или как я мог бы воспользоваться добавлением Redux на службу, обязательно позволить мне знать в комментариях.
Если вы работали над аналогичным проектом, обязательно поделитесь ниже – я хотел бы посмотреть!
Большое спасибо за чтение. до следующего раза!
Оригинал: “https://dev.to/dan_mcm_/building-a-portfolio-the-painful-way-3im8”