Приказка с два уебсайта

Значението на бавния напредък и саморефлексията

Снимка на Таня Невидома на Unsplash

"Ей, тъй като се научиш да кодираш, мислиш ли, че можеш да ми направиш уебсайт?"

Сигурен съм, че всички сме чували този въпрос и преди. Той идва с територията на уеб разработчик. За първи път чух това през март 2016 г. Жена ми беше графичен дизайнер, който искаше да пробие в полето на UI / UX. Тя искаше да покаже своите умения в онлайн портфолио.

В този момент научих уеб разработка само 3 месеца (започнах като резолюция за Нова година). Завърших няколко курса по HTML, CSS и JavaScript и бях склонен да копая зъбите си в сочен проект.

„Да, мога да направя това за теб. Не трябва да отнема твърде много време. "

Това отне четири месеца.

Разбрах доста бързо, че съм ухапал твърде много. Въпреки това, докато бях наивна, аз също бях решена. Сложих всичко, което имах в този уебсайт. Когато не работех на работата си, кодирах или търсех Overflow.

Предимно търсене на Stack Overflow, много от него.

Въпреки стреса и напрежението, което ми причини проектът, не можех да се почувствам по-горд, когато го видях на живо за първи път в браузъра си.

Това беше моята работа. Бях го направил.

Използвайки новия си уебсайт, жена ми успя да намери роля като UX дизайнер в Ню Йорк. И двамата напуснахме работата си и направихме ход от Сиатъл. Това постави началото на първото ми гмуркане в програмирането.

Две години по-късно

„Ей, мислите ли, че бихте могли да актуализирате моя уебсайт?“

Беше юни 2018 г. и доста неща се промениха. В тези две кратки години съпругата ми беше преминала от UX дизайнер, към дизайнер на продукти, към дизайн на ръководител на стартиране. Тя искаше нова актуализация, която да отразява този растеж.

"Да, мога да го направя."

Опитах се да звуча възможно най-уверено, но се колебаех. Спомних си колко време отне да се изгради нейния уебсайт за първи път. Не бях сигурен, че имам издръжливост и умствена издръжливост за втори двубой. Това ме беше изчерпало.

Самочувствието ми се разклати още повече, когато започнах да ровя по стария код. Не съм го гледал от две години. Не е отлежал добре. Докато потребителският интерфейс все още работеше и изглеждаше добре, предният край беше объркан. Сякаш се държеше заедно с лента.

По отношение на „кодовата миризма“, тя изглеждаше като огън на боклук.

Докато жена ми искаше само актуализация, навигацията през тази кодова база беше трудоемка. Ще бъде по-лесно да започнем от нулата. Не се вълнувах от идеята да започна наново. Но докато жена ми е пораснала много през последните няколко години, аз също имах. Възползвах се като възможност да разсъждавам колко съм научил.

Започвайки прясно

Първия ден, когато започнах да създавам новия уебсайт на жена ми, знаех, че няма да минат 3 месеца. Успях да направя повече през първия ден, отколкото преди, след седмица. В крайна сметка за приключването на актуализацията бяха необходими само около седмица седмици.

Можете да го видите на живо тук: irissprague.co

irissprague.co

Докато бях впечатлен от това колко бързо успях да го изградя, не бях точно сигурен защо беше толкова по-бърз. Разбира се, имах още две години под колана си, но какво точно научих през тези две години?

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

Първото нещо, което забелязах, беше способността ми да използвам инструменти. Разбирате ли, две години по-рано знаех много малко за инструментите с отворен код. Първият уебсайт на жена ми е създаден с помощта на суров HTML, CSS, JavaScript и докосване на PHP. Въпреки че това не е лошо само по себе си, нямах концепция за шаблони за изглед.

Написах всеки HTML файл от нулата. За да поддържам последователност, копирах върху всички повтарящи се елементи. За съжаление, това означаваше, че смяната на една страница означава промяна на няколко.

При втория си опит избягвах всички онези часове на копиране и отстраняване на грешки с помощта на HAML шаблони и Flexbox.

Благодаря Flexbox

Автоматизиране на процеса на изграждане

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

Всеки път, когато направих голяма промяна, би трябвало да досаждам жена си, за да прегледам промените на моя лаптоп. Ако това не беше достатъчно лошо, когато дойде време да натисна промените си към производствен сървър, нямах идея откъде да започна.

Бях толкова фокусиран върху работата на уебсайта, че дори не бях обмислял как да го пусна в интернет. Никога не бях чувал за DigitalOcean, Docker или Heroku.

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

Отнеха часове. И винаги, когато трябваше да променя някой от активите, ще трябва да качвам тези редактирани файлове ръчно.

С тези грешки, изгорели в паметта ми, инвестирах в подобряването на процеса на изграждане. Автоматизирах своя работен процес на CI / CD с помощта на Docker Compose. С една команда док-композиране up -d, бих могъл да разгърна целия сайт за производство.

Дори създадох малък баш скрипт, за да групирам моите Git и Docker команди заедно.

Всякакви промени, които направих, могат да бъдат излъчени на живо за по-малко от минута. cPanel беше нещо от миналото.

Използвах и DigitalOcean Droplet, така че жена ми да вижда промените, които съм направила. Тя можеше да прегледа редакциите на собствената си машина, като посети IP адреса на Droplet. Няма повече местно развитие.

Съпругата ми и аз подобрихме нашия тръбопровод за проектиране и развитие. През 2016 г. дизайните са правени главно чрез Photoshop и устни сигнали.

„Можете ли да промените това? Можете ли да добавите това? “

Никой от нас не се радваше.

Този път заедно с жена ми използвахме Invision, за да си сътрудничим. Можех да видя промените в дизайна й в реално време и да ги прилагам за минути.

Захранване на захранването в най-добрия си вид.

Подобрено решаване на проблеми

Това няма да е изненада, но през последните 2 години станах по-добър и бърз програмист. Но най-важното подобрение бяха способностите ми за решаване на проблеми.

Нямаше нужда да търся как да създавам решетки в CSS или да изграждам въртележка за изображения в JavaScript. Имах инструментите и основата, които ми бяха необходими, за да решавам тези проблеми сам. Бих могъл да прекарвам повече време в поток и по-малко време да гугъл всеки проблем, който срещнах.

Знаех също как да направя повече с по-малко. Първият ми сайт имаше стотици линии на JavaScript, за да направя най-простата анимация. Новият сайт има само 70 реда. CSS преходите и ключовите рамки се справят с останалите.

Приоритизирането на CSS над JavaScript подобрява ефективността на всяка страница, като намалява DOM рисуването. Въпреки това, това не беше единствената оптимизация, която направих.

Оптимизации

Преди две години нямах идея как да създам изпълнителен уебсайт и не ме интересуваше. Просто исках проклетото нещо да работи. Сега, когато разбрах основите и мислех на по-високо ниво на абстракция, можех да се съсредоточа върху решаването на по-големите проблеми. А именно производителност и потребителско изживяване.

Чрез компилиране на статичните файлове, обслужването им чрез DigitalOcean CDN и кеширането им в браузъра, актуализираният сайт може да се зарежда с олекотена скорост.

Оценка на производителността от Pingdom

През 2016 г. това предишно изречение щеше да ми прилича на глупост. О, как се промениха времената

Отделете време, за да прецените колко сте научили

Така че защо казвам всичко това? Да цъкам собствения си рог? Може би малко.

Истинската причина е, искам да подчертая важността на саморефлексията. Колебаех се да актуализирам сайта на жена ми, тъй като не разбрах колко съм пораснал. Трудно е да видите сумата, която ежедневно увеличавате.

Знанието се натрупва инч по инч. Но като гледам назад за дълъг период от време, тези сантиметри стават скокове. В японската култура тази идея за малки ежедневни подобрения е известна като „kaizen“.

За мен е важно да си спомням къде бях в началото на кариерата си. Визуализирането на еволюцията ми ме мотивира, когато удрям платовете. Изливите и потоците са неизбежни. Ангажирайки се да прогресирам един инч в даден момент е как напредвам към постигането на целите си.

И така, като почит към майсторството и запомнянето на корените ми, първият сайт на съпругата ми ще живее като поддомейн на моя личен уебсайт. Можете да го видите сами на kaizen.sunli.co.

Искам да дам специален вик на Launch School, за да ме научи на важността на бавния път към майсторството. Това е цел, която ще продължа да преследвам.

И още един вик на съпругата ми Ирис Спраге, че просто беше невероятно.

Така че независимо дали програмирате 10 месеца, 10 години или повече, отделете време, за да помислите колко сте научили. Използвайте го като гориво, когато времената се чувстват бавно. Инвестирането в бавния път към майсторството има сложни резултати. Постепенно в началото, но с достатъчно време, ще се извисявате като ракета.

Ако тази статия е резонирала с вас, моля, оставете няколко хлопки и ме уведомете как сте отраснали в собствената си кариера. Бих се радвал да чуя за това!

Както винаги, щастливо кодиране!