История двух веб-сайтов

1656566296 istoriya dvuh veb sajtov

автор Сун-Ли Битти

Важность медленного прогресса и саморефлексии

1*j1DjBAA7lRTBVaE17yRQGQ
Фото Тани Неизвестные на Unsplash

«Эй, поскольку ты учишься кодировать, ты думаешь, что можешь сделать мне веб-сайт?»

Я уверен, что мы все уже слышали этот вопрос. Он предоставляет территорию веб-разработчика. В первый раз я услышал об этом в марте 2016 года. Моя жена была графическим дизайнером, стремившимся проникнуть в сферу UI/UX. Она хотела показать свои навыки в онлайн-портфолио.

В тот момент я учился веб-разработке всего 3 месяца (я начинал как новогоднюю резолюцию). Я закончил несколько курсов HTML, CSS и JavaScript и очень хотел погрузиться в сочный проект.

Да, я могу это сделать для вас. Это не должно занять слишком много времени».

На это ушло три месяца.

Я довольно быстро понял, что откусил слишком многое. Однако, будучи наивным, я тоже был решителен. Я вложил все, что у меня было на этом сайте. Когда я не работал на своей работе, я либо кодировал, либо искал Stack Overflow.

Преимущественно ищет Stack Overflow, многое.

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

Это была моя работа. Я сделал это.

Используя свой новый сайт, моя жена смогла найти роль UX-дизайнера в Нью-Йорке. Мы оба оставили работу и переехали из Сиэтла. Это стало началом моего первого погружения в программирование.

Два года спустя

«Эй, как вы думаете, вы могли бы обновить мой веб-сайт?»

Это был июнь 2018 года, и многое изменилось. За эти два коротких года моя жена прошла путь от UX-дизайнера, до дизайнера продуктов, до руководителя дизайна стартапа. Она хотела получить новое обновление, чтобы отразить этот рост.

«Да, я могу это сделать».

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

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

С точки зрения «запаха кода», он пах, как пожар мусорника.

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

Начало свежего

В первый день, когда я начал создавать новый сайт моей жены, я знал, что это не займет 3 месяца. За этот первый день я смог сделать больше, чем через неделю. В конце концов, в завершение обновления понадобилось всего около недели.

Вы можете увидеть это вживую здесь: irissprague.co

1*8PRyq64Cm6RAhhoLLkRm_A
irissprague.co

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

Инструменты использования

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

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

Во время второй попытки я избежал всех этих часов копирования и отладки, используя шаблоны HAML и Flexbox.

0*4WNpnLyPMvNmPgAo
Спасибо Flexbox

Автоматизация процесса сборки

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

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

Я был настолько сосредоточен на том, чтобы сайт заработал, что даже не думал, как запустить его в Интернет. Я никогда не слышал о DigitalOcean, Docker или Heroku.

Единственной услугой хостинга, которую я знал в то время, был Godaddy. Godaddy использует cPanel для загрузки файлов на сервер. К сожалению, cPanel позволяла скачивать файлы только по одному.

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

С теми ошибками, которые вписались в мою память, я инвестировал в улучшение процесса сборки. Я автоматизировал рабочий процесс CI/CD с помощью Docker Compose. С одним docker-compose up -d команды, я мог бы развернуть весь сайт в производстве.

Я даже создал небольшой сценарий bash, чтобы соединить мои команды Git и Docker вместе.

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

Я также использовал DigitalOcean Droplet, чтобы моя жена могла видеть все внесенные изменения. Она могла просматривать изменения на собственной машине, посетив IP-адрес Капли. Больше никаких локальных разработок.

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

«Можете ли вы изменить это? Вы можете это добавить?

Ни одному из нас это не понравилось.

На этот раз мы с женой использовали Invision для сотрудничества. Я мог видеть ее изменения в дизайне в режиме реального времени и реализовывать их в считанные минуты.

Силовая муфта в самом лучшем виде.

Улучшенное решение проблем

Это не станет неожиданностью, но за последние 2 года я стал лучшим и более быстрым программистом. Но самым важным улучшением были мои способности к решению проблем.

Мне не нужно было искать, как создать сетки CSS или создать карусель изображений в JavaScript. У меня были инструменты и основа, необходимые для решения этих проблем. Я мог бы тратить больше времени в потоке и меньше времени на поиск в Google каждой проблемой, на которую я сталкивался.

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

Приоритетность CSS над JavaScript улучшает производительность каждой страницы, уменьшая окрашивание DOM. Хотя это была не единственная оптимизация, которую я сделал.

Оптимизация

Два года назад у меня понятия не было, как создать эффективный веб-сайт, и мне было все равно. Я просто хотел, чтобы эта проклятая вещь сработала. Теперь, когда я понял основы и думал о более высоком уровне абстракции, я мог сосредоточиться на решении более масштабных проблем. А именно производительность и опыт пользователя.

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

1*cCFxOR2msa4DecxHNXrUpQ
Рейтинг производительности от Pingdom

В 2016 году это предыдущее предложение выглядело бы для меня как тарабарство. Ой, как изменились времена.

Найдите время, чтобы оценить, сколько вы научились

Почему я все это говорю? Гудить на мой угол? Может немного.

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

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

Для меня важно помнить, где я был в начале своей карьеры. Визуализация моей эволюции держит меня мотивированным, когда я достигаю плато. Приливы и отливы неизбежны. Обязательство прогрессировать на дюйм за раз – это то, как я двигаюсь к своим целям.

Как дань мастерству и памяти о своих корнях, первый сайт моей жены будет жить как субдомен моего личного сайта. Вы можете сами увидеть это на сайте www.kaizen.sunli.co.

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

И еще одна благодарность моей жене Айрис Спраг за то, что она просто удивительна.

Итак, занимаетесь ли вы программированием в течение 10 месяцев, 10 лет или больше, найдите время, чтобы подумать, сколько вы научились. Используйте его как топливо, когда время медленное. Инвестирование в медленный путь к мастерству усложняет результаты. Сначала постепенно, но с достаточным количеством времени вы будете летать как ракета.

Если эта статья вызвала у вас резонанс, оставьте пожалуйста несколько аплодисментов? и дайте мне знать, как вы выросли в своей карьере. Я хотел бы услышать об этом!

Как всегда, приятного кодирования!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *