Een verhaal over twee websites

Het belang van langzame vooruitgang en zelfreflectie

Foto door Tanya Nevidoma op Unsplash

"Hé, denk je, omdat je leert coderen, dat je een website voor me zou kunnen maken?"

Ik weet zeker dat we deze vraag allemaal al eerder hebben gehoord. Het komt met het grondgebied van het zijn van een webontwikkelaar. De eerste keer dat ik het hoorde was in maart 2016. Mijn vrouw was een grafisch ontwerper en wilde graag inbreken in het UI / UX-veld. Ze wilde haar vaardigheden tonen in een online portfolio.

Ik was toen nog maar 3 maanden bezig met webontwikkeling (ik was begonnen als een goede voornemen voor het nieuwe jaar). Ik had een paar HTML-, CSS- en JavaScript-cursussen voltooid en wilde mijn tanden in een sappig project steken.

'Ja, dat kan ik voor je doen. Moet niet te lang duren. "

Het heeft vier maanden geduurd.

Ik realiseerde me vrij snel dat ik teveel had afgebeten. Hoewel ik naïef was, was ik echter ook vastberaden. Ik heb alles wat ik had in die website gestopt. Toen ik niet aan het werk was, codeerde ik of zocht ik Stack Overflow.

Meestal op zoek naar Stack Overflow, veel ervan.

Ondanks de stress en spanning die het project me heeft veroorzaakt, had ik me niet trotser kunnen voelen toen ik het voor het eerst in mijn browser zag.

Dat was mijn werk. Ik had het gedaan.

Met behulp van haar nieuwe website kon mijn vrouw een rol vinden als UX-ontwerper in New York City. We hebben allebei ontslag genomen en zijn verhuisd vanuit Seattle. Dit markeerde het begin van mijn eerste duik in programmeren.

Twee jaar later

"Hé, denk je dat je mijn website zou kunnen updaten?"

Het was juni 2018 en er waren nogal wat dingen veranderd. In die twee korte jaren was mijn vrouw van UX-ontwerper naar productontwerper gegaan om de leiding te nemen over een startup. Ze wilde een nieuwe update om die groei te weerspiegelen.

"Ja, dat kan ik doen."

Ik probeerde zo zelfverzekerd mogelijk te klinken, maar ik aarzelde. Ik herinnerde me hoe lang het duurde om haar website de eerste keer te bouwen. Ik wist niet zeker of ik het uithoudingsvermogen en mentale uithoudingsvermogen had voor een tweede wedstrijd. Het had me uitgeput.

Mijn zelfvertrouwen werd verder geschud toen ik de oude code begon door te graven. Ik had er al twee jaar niet naar gekeken. Het was niet goed verouderd. Terwijl de gebruikersinterface nog steeds werkte en er goed uitzag, was de voorkant een puinhoop. Het leek alsof het bij elkaar werd gehouden door duct-tape.

In termen van "codegeur", stonk het naar een afvalcontainer.

Hoewel mijn vrouw alleen een update wilde, was het navigeren door die codebase moeizaam. Het zou gemakkelijker zijn om helemaal opnieuw te beginnen. Ik was niet blij met het idee om opnieuw te beginnen. Maar hoewel mijn vrouw de afgelopen jaren veel was gegroeid, was ik dat ook. Ik maakte van de gelegenheid gebruik om na te denken over hoeveel ik had geleerd.

Vers beginnen

De eerste dag dat ik begon met het bouwen van de nieuwe website van mijn vrouw, wist ik dat het geen 3 maanden zou duren. Ik was in staat om meer te doen op die eerste dag dan ik eerder in een week had gedaan. Uiteindelijk duurde het slechts ongeveer een week om de update te voltooien.

Je kunt het hier live zien: irissprague.co

irissprague.co

Hoewel ik onder de indruk was van hoe snel ik het kon bouwen, wist ik niet precies waarom het zoveel sneller was geweest. Natuurlijk had ik nog twee jaar onder mijn riem, maar wat had ik precies geleerd in die twee jaar?

Hulpmiddelen gebruiken

Het eerste wat me opviel was mijn vermogen om hulpmiddelen te gebruiken. Zie je, twee jaar eerder wist ik heel weinig over open source tools. De eerste website van mijn vrouw werd gebouwd met ruwe HTML, CSS, JavaScript en een vleugje PHP. Hoewel dat op zichzelf niet slecht is, had ik geen idee van weergavesjablonen.

Ik schreef elk HTML-bestand helemaal opnieuw. Om de consistentie te behouden, heb ik alle herhaalde elementen gekopieerd. Helaas betekende dat dat het veranderen van een pagina betekende dat er meerdere moesten worden gewijzigd.

Bij mijn tweede poging vermeed ik al die uren kopiëren en debuggen met behulp van HAML-sjablonen en Flexbox.

Bedankt Flexbox

Het bouwproces automatiseren

Een andere reden waarom het zo lang duurde om de eerste website te bouwen, was omdat ik geen concept had van een bouwproces. De hele 3 maanden dat ik de eerste portfoliosite van mijn vrouw bouwde, deed ik het allemaal lokaal op mijn computer.

Telkens wanneer ik een grote verandering aanbracht, moest ik mijn vrouw lastigvallen om de wijzigingen op mijn laptop te bekijken. Als dat niet erg genoeg was, had ik geen idee waar ik moest beginnen toen het tijd werd om mijn wijzigingen naar een productieserver te pushen.

Ik was zo gefocust op het laten werken van de website dat ik niet eens had overwogen hoe ik het op internet zou krijgen. Ik had nog nooit gehoord van DigitalOcean, Docker of Heroku.

De enige hostingservice die ik destijds kende, was Godaddy. Godaddy gebruikt cPanel om bestanden naar de server zelf te uploaden. Helaas stond cPanel slechts toe dat bestanden één voor één werden geüpload.

Het heeft uren geduurd. En telkens wanneer ik een van de middelen moest wijzigen, moest ik die bewerkte bestanden handmatig opnieuw uploaden.

Met die fouten in mijn geheugen gebrand, heb ik geïnvesteerd in het verbeteren van mijn bouwproces. Ik automatiseerde mijn CI / CD-workflow met Docker Compose. Met één opdracht voor het samenstellen van een docker-compose kon ik de hele site inzetten voor productie.

Ik heb zelfs een klein bash-script gemaakt om mijn Git- en Docker-opdrachten samen te voegen.

Alle wijzigingen die ik heb aangebracht, kunnen binnen een minuut live zijn. cPanel was verleden tijd.

Ik gebruikte ook een DigitalOcean Droplet zodat mijn vrouw eventuele wijzigingen kon zien. Ze kon de bewerkingen op haar eigen computer bekijken door het IP-adres van de Droplet te bezoeken. Geen lokale ontwikkeling meer.

Mijn vrouw en ik hebben ook onze pijplijn van ontwerp tot ontwikkeling verbeterd. In 2016 werden de ontwerpen voornamelijk gedaan via Photoshop en mondelinge aanwijzingen.

“Kun je dit veranderen? Kun je dat toevoegen? '

We hebben er geen van genoten.

Deze keer gebruikten mijn vrouw en ik Invision om samen te werken. Ik kon haar ontwerpwijzigingen in realtime zien en in enkele minuten implementeren.

Krachtkoppeling op zijn best.

Verbeterde probleemoplossing

Dit zal geen verrassing zijn, maar in de afgelopen twee jaar ben ik een betere en snellere programmeur geworden. Maar de belangrijkste verbetering was mijn probleemoplossend vermogen.

Ik hoefde niet op te zoeken hoe ik rasters kon maken in CSS of een afbeeldingscarrousel kon bouwen in JavaScript. Ik had de tools en de basis die ik nodig had om die problemen zelf op te lossen. Ik kon meer tijd in flow doorbrengen en minder tijd besteden aan het googlen van elk probleem dat ik tegenkwam.

Ik wist ook hoe ik meer kon doen met minder. Mijn eerste site had honderden regels JavaScript om de eenvoudigste animaties te maken. De nieuwe site heeft slechts 70 regels. CSS-overgangen en hoofdframes zorgen voor de rest.

Prioriteit geven aan CSS boven JavaScript verbetert de prestaties van elke pagina door DOM-schilderen te verminderen. Dat was echter niet de enige optimalisatie die ik maakte.

optimalisaties

Twee jaar geleden had ik geen idee hoe ik een performante website moest maken en het kon me niet schelen. Ik wilde gewoon dat het verdomde ding zou werken. Nu ik de fundamenten begreep en op een hoger abstractieniveau dacht, kon ik me concentreren op het oplossen van de grotere problemen. Namelijk prestaties en gebruikerservaring.

Door de statische bestanden te compileren, ze te presenteren via een DigitalOcean CDN en ze in de cache te bewaren, kan de bijgewerkte site razendsnel laden.

Prestatiebeoordeling van Pingdom

In 2016 zag die vorige zin er voor mij uit als wartaal. Oh, hoe tijden zijn veranderd.

Neem de tijd om te waarderen hoeveel je hebt geleerd

Dus waarom zeg ik dit allemaal? Toot mijn eigen hoorn? Misschien een beetje.

De echte reden is dat ik het belang van zelfreflectie wil benadrukken. Ik aarzelde om de site van mijn vrouw bij te werken, omdat ik me niet had gerealiseerd hoeveel ik was gegroeid. Het is moeilijk om elke dag het bedrag te zien dat je boekt.

Kennis stapelt zich centimeter voor centimeter op. Maar door over een lange periode terug te kijken, worden die centimeters sprongen en grenzen. In de Japanse cultuur staat dit idee van kleine dagelijkse verbeteringen bekend als "kaizen".

Voor mij is het belangrijk om te onthouden waar ik was aan het begin van mijn carrière. Het visualiseren van mijn evolutie houdt me gemotiveerd als ik plateaus bereik. Eb en vloed zijn onvermijdelijk. Door elke centimeter vooruit te gaan, bereik ik mijn doelen.

Dus als een eerbetoon aan meesterschap en het onthouden van mijn roots, zal de eerste site van mijn vrouw voortleven als een subdomein van mijn persoonlijke website. Je kunt het zelf zien op kaizen.sunli.co.

Ik wil Launch School een speciale schreeuw geven om me het belang van het langzame pad naar beheersing te leren. Het is een doel dat ik zal blijven nastreven.

En nog een schreeuw naar mijn vrouw Iris Sprague omdat ze gewoon geweldig was.

Dus of u nu 10 maanden, 10 jaar of langer programmeert, neem de tijd om na te denken over hoeveel u hebt geleerd. Gebruik het als brandstof voor wanneer de tijden langzaam aanvoelen. Investeren in de langzame weg naar meesterschap heeft de resultaten verergerd. In het begin geleidelijk, maar met voldoende tijd zul je als een raket stijgen.

Als dit artikel bij je is doorgekomen, laat dan wat klappen achter en laat me weten hoe je bent gegroeid in je eigen carrière. Ik hoor het graag!

Zoals altijd, gelukkig coderen!