Пример того, какие мысли приходили мне в голову
Ранее в этом году я тайно поставил перед собой задачу создать веб-сайт как можно быстрее. В некотором смысле, это было проверкой моих знаний и помогло мне определить мою личную неэффективность.
Когда у вас есть все время в мире, вы склонны блуждать и никогда ничего не доводите до конца.
Но с техническими проектами дело обстоит именно так: они никогда не закончатся должным образом, поскольку со временем материализуются новые идеи, требования, обнаруженные ошибки и обновления стека. Это просто природа дисциплины.
Итак, я решил сделать это максимально MVP. Кодирование, дополнительная графика и развертывание происходили во время дневного сна моего малыша, и миру была выпущена Dotted Squirrel v1.0.
Мысли за спиной v1.0
Краткое
Для первой итерации Dotted Squirrel я хотел создать что-нибудь быстрое и полезное. Я также хотел, чтобы он был как можно более простым в обслуживании, поскольку я сосредоточился на моем личном глубоком году и выяснил, где я хочу двигаться дальше в своей карьере разработчика.
Но я тоже не хотел быть одним из тех сайтов-портфолио личных рекламных щитов. Итак, я решил сделать для себя персонализированный агрегатор новостей, который может оказаться полезным другим.
Временные ограничения
Между малышом, письмом и обучением у меня действительно не было много времени ни на что другое. Я поставил перед собой задачу завершить все за один дневной сон малыша.
В то время она спала около двух часов, прежде чем снова буйствовать со своим кроликом-приятелем.
В результате я решил создать одностраничное приложение с использованием Angular с маршрутами к странице «Обо мне» и одной службой для извлечения необходимых мне каналов.
Данные XML
С фидами дело в том, что они представлены в формате XML. Хотя это, вероятно, имело смысл еще в 90-е годы, когда JSON еще не существовало, в настоящее время XML - это скорее пережиток, похожий на телефонные звонки, чем обычная вещь в современных технических стеках.
Из-за нехватки времени я остановился на rss2json. Хотя сторонние библиотеки синтаксического анализа для Angular существуют, они не гарантируют надежный синтаксический анализ данных и постоянную совместимость с течением времени как rss2json.
Сервис сделал работу с фидами намного проще и предсказуемее.
Графика, шрифты и CSS
На моем компьютере был Photoshop, но, судя по прошлому опыту, Photoshop может занять время для создания визуально приятной графики.
В итоге я использовал Canva, поскольку она предоставляла тщательно подобранную коллекцию инструментов, которые гарантировали уровень эстетики про-Instagram за очень короткое время.
Импорт шрифтов Google был использован для того, чтобы сайт выглядел менее универсальным и придал индивидуальность с помощью типографики.
Для CSS я использовал Twitter Bootstrap, в основном для системы сеток и не более того.
Конечный продукт
Для первой итерации был набросок на бумаге того, как я хотел, чтобы это выглядело. Конечный продукт не сильно отличался, и визуальные решения принимались на месте.
Twitter Bootstrap занимался большей частью мобильной совместимости, а гибкие сетки большую часть времени поддерживали визуально приемлемый макет. Я действительно не добавлял никаких дополнительных стилей, кроме названия веб-сайта.
К концу первого часа у меня был функционирующий и визуально приемлемый веб-сайт, который собирал каналы из пяти разных источников и любые опубликованные истории, которые я создал на Medium.
Мысли позади v2.0
Что я хотел
Хотя версия 1 Dotted Squirrel служила своей первоначальной цели, я быстро обнаружил недостаток в использовании каналов.
В разделе, в котором были опубликованы мои истории на Medium, я быстро обнаружил, что не могу отвечать на комментарии, не скрыв фактически опубликованные мной истории.
Это связано с тем, что в ленте все рассматривается как история, включая комментарии. Нет различий по типу контента в данных. В результате мои отклики на мои и другие статьи в Medium резко сократились.
Еще одна проблема, с которой я столкнулся с v1, заключалась в том, что дизайн был ограничен только пятью каналами. Если бы я добавил еще что-нибудь, прокрутка увеличилась бы до такой степени, что стала бы неэффективной для пользователя.
Поскольку органический трафик для Dotted Squirrel рос в течение нескольких месяцев, помимо постоянных посетителей, я хотел улучшить взаимодействие с пользователем, иметь больший контроль над отображаемыми историями и перестроить Dotted Squirrel в соответствии с тем, каким я хочу двигаться в своей карьере на 2020 год.
На этот раз у меня была целая суббота на редизайн, код и развертывание Dotted Squirrel, пока малыш отдыхал с моей мамой.
Использование Firebase
С тех пор, как я открыл для себя Firebase, я всегда был его поклонником.
Однако после фиаско по счету Firebase на 30 тысяч долларов я очень хорошо осознал, как мои данные структурированы и потребляются. Это связано с тем, что Firebase взимает плату за использование документов, а не за фиксированную почасовую ставку.
В разделе «Средние истории» я решил создать единый документ с одним массивом объектов, в котором будут храниться заголовок, источник изображения и ссылка. В этом массиве десять элементов.
Это уменьшило количество операций чтения моего документа с десяти операций чтения при загрузке страницы до одного.
На уровне бесплатного пользования Firebase обеспечивает 50 000 бесплатных чтений документов в день.
Если бы я использовал документ для хранения моих данных в традиционном стиле SQL, я был бы ограничен просмотром 5000 страниц, прежде чем начнется счет.
При использовании метода агрегированных данных мне нужно было бы получать 50 000 просмотров страниц в день - огромная разница в долгосрочной масштабируемости и возможном выставлении счетов в будущем.
Мобильная совместимость с Materialize CSS
Проблема с Twitter Bootstrap заключается в том, что имена классов CSS и структурные требования HTML могут быть довольно подробными.
За прошедшие годы я обнаружил, что, хотя Bootstrap продолжает служить своей цели, существует много кода, который нужно читать и фильтровать, когда дело доходит до применения CSS.
Материализовать CSS - это альтернативный фреймворк, который сокращает количество неиспользуемых функций, поставляемых с Bootstrap. Систему сеток от Materialize CSS проще кодировать, она имеет более короткие имена классов и совместима с мобильными устройствами.
Развлекается с: nth-child
Для раздела каналов я хотел создать отдельные разделы, которые постепенно перемещались по цветовой шкале.
В коде Angular я перебирал массив, используя *ngFor. Это означает, что я не могу легко прикрепить класс CSS, который будет применять различный фон к каждому разделу канала.
Присоединение классов CSS для визуального изменения элементов вручную - это традиционный путь. Чтобы решить свою проблему, я использовал условный CSS через псевдоселектор :nth-child
Чтобы создать цветовой узор, я применил цвет фона в зависимости от того, существует ли селектор по отношению к его братьям и сестрам.
В приведенном ниже фрагменте кода условие применяется ко второму и восьмому .feedSection. Этот образец повторяется для других :nth-child.
Теоретически это можно реорганизовать таким образом, чтобы он автоматически применялся к каждому пятому элементу, начиная с определенного брата, но у меня не хватило времени, поэтому, возможно, это произойдет в следующей итерации.
Это позволило мне создать следующий визуальный паттерн, как показано ниже.
Творчески используя карты ()
Мне нужен был способ перебрать каждый канал, получить данные и сохранить их в доступной переменной для доступа к моему компоненту Angular.
Первоначально я начал с цикла forEach, но он быстро стал излишне запутанным. Он также иногда ломался или останавливался, когда асинхронный вызов занимал немного больше времени, чем ожидалось.
Для меня не имело значения, в каком порядке отправляется http запрос, только то, что он был отправлен.
Особенность массива JavaScript map() заключается в том, что вы можете применить дополнительную логику перед возвратом значений, которые будут сохранены в переменной, которая содержит результаты карты.
В этом случае я ничего не возвращал, но выполнял getNewsFeed(), а затем отправлял результаты в переменную, доступную для компонентов, за пределами fetchNews()
В результате получился более чистый код, чем цикл forEach, с которого я начал.
Конечный продукт
В этой итерации я потратил больше времени на изучение шрифтов Google для типографики этой версии Dotted Squirrel. У меня был черновой набросок макета и цветовой схемы на Canva, но это было все, что касалось моего каркаса.
Веб-сайт был готов к обеду, а остальное время ушло на выяснение того, что я хочу сделать на 2020 год. Хотя следующий год может показаться еще далеким, давайте просто скажем, что реклама Рождества уже началась.
Я скопировал свой код в частный репозиторий на GitHub, развернул его позже той же ночью, написал свой твит и отправился спать.
Последние мысли и планы на будущее
Последние восемь месяцев были интересным опытом для профессионального и личного развития.
За прошедший углубленный год я многое узнал о себе, развил свой писательский голос, и мне нравится думать, что я улучшил свои навыки разработчика, обучая других, и когда Интернет исправляет меня, когда я не совсем так.
Я не идеальный разработчик, но мне нравится процесс обучения и обучения других. Теперь передо мной возникает вопрос: «Как мне сделать это финансово возможным в 2020 году?» Средняя и избирательная работа с клиентами в настоящее время финансирует прожиточный минимум на 2019 год.
Но я хочу перейти к видеоформатам обучающего кода, который отнимает время от работы с клиентами. Итак, я решил проявить себя с Patreon. Принял ли кто-нибудь меня к предложениям внести свой вклад в сообщество - это совсем другая история.
В настоящее время я завершаю работу над книгой по CSS, которую я отдаю сообществу.
На 2020 год я планирую:
- Создавайте больше бесплатных учебных материалов в виде электронных книг. В будущем запланированы темы JavaScript и Angular.
- Учебные материалы в виде видео.
- Дни поддержки кода AMA и Q&A на Discord.
- Добавьте раздел отправки ссылок для Dotted Squirrel, чтобы контент стал управляемым сообществом.
Все это войдет в экосистему, состоящую из Dotted Squirrel, Medium, YouTube, электронных книг и информационного бюллетеня.
Пожелайте мне удачи и надеюсь, что все пойдет хорошо в моих дальнейших планах.
Спасибо за чтение. ❤
Афинья
