Добро пожаловать на семнадцатый день журнала сборки useaffiliates.com! В этой серии рассказывается о моем путешествии по созданию публичного бизнеса с нуля. Если вы пропустили шестнадцатый день, вы можете проверить это здесь. Я также загрузил сегодняшний Twitch стрим на YouTube, если хотите посмотреть повтор.

Почему у меня нет трафика!? 😭

Работая вчера над блогом ежедневных обновлений, я был расстроен тем, что за последние семь дней у меня не было посетителей на useaffiliates.com. Но уже через пару секунд это ощущение сменилось о дерьмо💡.

Я столкнулся с этим однажды с пакетом fathom-client. Если ваш домен перенаправляет на www. версии и у вас ее нет внутри массива includedDomains, данные в Fathom отправляться не будут.

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

Улучшения UX ✅

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

Ход загрузки.

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

Я даже думал, что страница не отвечала пару раз, пока вскоре после этого она не перенаправила меня на нужную страницу.

Чтобы противостоять этому, вчера я уже внедрил лучшие стратегии кэширования. Тем не менее, я также хотел добавить индикатор загрузки, чтобы, если страница еще не кэшировалась, люди все равно получали хорошую обратную связь о том, что что-то загружается/происходит.

Я использовал библиотеку под названием nprogress, и реализовать ее было очень просто. Вы можете проверить изменения через коммит здесь. Теперь каждый раз, когда происходит событие изменения маршрута, пользователь получает визуальную обратную связь о том, что мы загружаем изменения.

Обновление кнопки фильтра.

Вчера попросил всех протестировать живую 💩 вне сайта. Повторяющаяся часть обратной связи, которую я получил, была;

"Когда я тестировал ваш сайт, я некоторое время не знал, как убрать фильтры. Затем я наконец нашел значок отмены ближе к концу».

Это было то, что я должен был исправить перед запуском. Я хочу, чтобы мои пользователи без проблем просматривали партнерские программы и находили свою идеальную партнерскую программу. И если вы не знаете, как очистить фильтр, ну… пользователь расстроится и может не вернуться.

Я переделал иконку с моим чатом (зрители на Twitch), чтобы она стала кнопкой. Таким образом, он более заметен, и теперь он также показывает текст «очистить фильтры». Я также позаботился о том, чтобы кнопка теперь отображалась только тогда, когда у пользователя включен хотя бы один фильтр.

Чтобы пользовательский интерфейс оставался согласованным, я также изменил кнопку «очистить фильтры» в сообщении «результаты не найдены», чтобы она оставалась прежней.

И, как кто-то сказал в чате: «Теперь он готов к производству!» 🚀

Улучшения пользовательского интерфейса ✏

Во время тестирования веб-сайта я снова обнаружил пару вещей, которые, как мне хотелось, выглядели немного иначе. Поэтому я добавил их в список «отзывов о бета-версии» и поработал над ними сегодня!

Обновлены теги категорий.

Я собираюсь быть честным, никакой обратной связи или науки здесь. Меня просто не зацепил серый цвет фильтров. Он просто не вписался в строки программы.

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

Ближе к концу дня я также заметил, что шрифт тегов категорий был довольно жирным в Safari и Firefox. Когда я проверил свой код, я заметил, что я использовал вес шрифта medium, что слишком много для мелкого текста. Я обновил толщину шрифта до normal, и теперь все снова выглядит четко!

Уменьшена высота контейнера программы отправки на мобильных устройствах.

Что хорошо в Typeform, так это то, что как только вы нажмете «Пуск» на мобильном телефоне, форма перейдет в полноэкранный режим, что упрощает заполнение формы.

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

После настройки высоты контейнера мы избавились от бесполезных пробелов, а кнопку «Пуск» теперь найти намного проще.

Я добавил юридические страницы! 📜

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

При добавлении контента для страниц мне нужно было внести пару изменений в стиль.

Первое изменение стиля заключалось в том, что я хотел, чтобы заголовки страницы были короче, поскольку заголовки страниц состояли только из одной строки (положения и условия и политика конфиденциальности). Я обновил компонент defaultLayout, чтобы использовать реквизит isSmall (отличное название! 😬). Таким образом, для некоторых макетов я теперь могу сделать заголовок короче, чтобы он не выглядел странным.

Другое изменение стиля связано с содержимым страницы. Поскольку я использую TailwindCSS, мой текст не имеет стилей по умолчанию. Что я обычно делаю для таких типов сгенерированного текста, так это добавляю класс .WYSIWYG в мой CSS, который я применяю к родителю текста.

При этом я по привычке вложил CSS. Конечно, компилятор пожаловался, но не в плохом смысле. На этот раз он сказал мне: «Смотри; вы можете сделать это; Я знаю, что вы этого хотите, но вам нужно установить плагин». После быстрого просмотра предоставленной ссылки на документацию я был рад обнаружить, что все, что вам нужно сделать, это обновить файл tailwindconfig.js и включить файл tailwind/nesting plugin, который поставляется в комплекте с Tailwind.

И бум! 💥 Поддержка вложенных CSS и две красивые юридические страницы.

Готов к запуску! 🚀

Как вы могли заметить в моем Твиттере, я удалил тег бета, и теперь у нас есть версия 1 useaffiliates.com. 🥳

Я все еще работаю над планом запуска, но, судя по календарю, мы, вероятно, запустим его на следующей неделе! А пока не стесняйтесь делиться проектами со своими друзьями-создателями и сообществами, и, надеюсь, кто-то заработает немного денег, найдя партнерскую программу, которая соответствует их контенту.

Теперь я буду работать над созданием всего необходимого контента и медиа для «официального» запуска.

Еще раз спасибо за чтение этого журнала сборки, и я надеюсь увидеть вас в день запуска!

Если вы хотите оставаться в курсе тем временем, подпишитесь на меня в Твиттере.

С любовью,

Тванкруи