Miksi (ja miten) kirjoitan koodia kynällä ja paperilla

Jos käsinkirjoituskoodin ajatus tuntuu typerältä, saatat yllättyä tietää, että se on väistämätöntä. Jos olet epävarma, mieti viimeisintä työhaastattelua ja muista, kuinka haastatteluhuoneessa ei ollut tietokonetta – vain haastattelijasi, tyhjä paperiarkki ja sininen kuulakärkikynä.

Teidän opiskelijoillenne se on vielä isompi asia, kun arvosanat pysyvät koodiriveissä, jotka olitte strategisesti puristaneet vastauslomakkeen käytettävissä olevaan tilaan.

Eikä vain sitä, kokeneet ohjelmoijat voivat ohjata sinut toimiston kopiokoneesta poistamaansa A4-arkkinippuun raaputtaakseen erityisen monimutkaisen algoritmin, jonka parissa he olivat työstäneet.

Joten olitpa tenttiopiskelija, potentiaalinen työhaastateltava tai joku, joka haluaa ratkaista ohjelmoinnin umpikujansa, toivon, että tämä artikkeli auttaa sinua, kun laitat kynäsi paperille koodaamaan.

Vaikka keskityn koodin kirjoittamisen analogiseen puoleen, voit soveltaa näitä vaiheita koodaamiseen missä tahansa muodossa tai kielellä. Joten pidä tätä myös yleisenä koodausohjeena, joka toimii erityisesti minulle, mutta voi olla myös erittäin hyödyllinen sinulle työssäsi.

Miksi kirjoittaa se ylös?

Ennen kuin aloitamme, on tärkeää ymmärtää, että kukaan ei odota sinun kirjoittavan tuotantovalmiita koodia muistikirjaan. Ei ole niin, että voit pudottaa sen koodieditoriin ja kääntää sen ilman virhettä. Jos tavoitteena olisi tuottaa täydellinen koodi, istuisit tietokoneen ääressä haastatteluhuoneissa ja tenttisalissa.

Käsinkirjoituskoodin tarkoitus on työstää logiikkaa etukäteen. Suunnittelussa halutaan päästä "selaimeen" mahdollisimman pian, mutta käsin luonnostelussa on perinteistä viisautta. Low-fidelity media kannustaa nopeisiin kokeiluihin ja edullisiin virheisiin.

Sama voi päteä koodiin, lähinnä syntaksia ja semantiikkaa laadittaessa. Oikean syntaksin ja semantiikan hankkiminen on kuitenkin aina plussa, vaikka se ei ole koko käsinkirjoitusharjoituksen ainoa painopiste.

Katsotaanpa, mistä voimme aloittaa käsinkirjoituskoodin suhteen.

Tiedä kysymyksesi

Viimeisenä yliopistovuoteni aikana en voinut käydä harjoittelussa tai edes osallistua kampuksen haastatteluihin terveydellisistä syistä. Seurauksena oli, että ensimmäinen työhaastatteluni oli melko kirjaimellinen korkealla panoksella.

Kun nyt katson taaksepäin, haastattelu oli melko helppoa. Mutta koska en ollut koskaan osallistunut sellaiseen, olin järjettömän ahdistunut. Ensimmäinen asia, jota haastattelijat kysyivät ohjelmoinnista, oli, voisinko tulostaa käänteisen kolmion, joka on tehty tähdistä. Kuten sanoin, se oli helppoa - ei mitään a for silmukka ei kestä, eikö? Mutta kuten sanoin, ahdistukseni oli myös katon läpi.

Vedin syvään henkeä, painoin kämmeniä tyhjää paperia vasten, jonka he olivat asettaneet minulle, liu'utin sitä mahdollisimman hitaasti minua kohti pöydällä (ostoaika tietysti), napsautin kynää ja sitten tein jotain. oikein.

Piirsin ensin käänteisen kolmion tähdistä. Näin löysin jalat maassa alkaakseni vastata heidän kysymykseensä.

Olen nähnyt muuten loistavien kehittäjien saavan jotain vikaan yksinkertaisesti siksi, että he eivät koskaan täysin ymmärrä, mitä he ratkaisevat.

Kysymykset, joiden kanssa työskentelemme, eivät ole samanlaisia ​​kuin fyysikot tai matemaatikot ratkaisevat. He saavat joukon parametreja ja löytävät puuttuvat; kysymyksemme ovat myös tuloksiamme. Meille on jo kerrottu, mitkä ovat tuloksemme – meidän on selvitettävä, kuinka saavuttaa ne. Siksi on välttämätöntä tuntea kysymys hyvin, koska näet tuloksen.

Tulostettavan sisällön kirjoittaminen tai piirtäminen on yksi parhaista tavoista aloittaa koodaus. Ymmärrän, että nopeatempoisella alallamme odotetaan, että meidän on hypättävä suoraan ohjelmointiin suorittamalla "hello world" -demo. Ja on hienoa tutustua tuntemattomaan syntaksiin ja päästä eroon ahdistuksestasi kokeilla jotain uutta.

Mutta kun joku kysyy sinulta kysymyksen ja antaa sinulle tuloksen työstettäväksi, eikö olisi parempi laittaa se ensin esille? Tämä kysymys/tulos ei ole vain lähtökohtasi, vaan myös viitepisteesi. Voit tarkastella sitä missä tahansa koodauksen vaiheessa varmistaaksesi, että työskentelet sen eteen ja olet oikealla tiellä.

Joten olipa vastausarkeille tai tyhjälle A4-paperille, jolle olet kirjoittamassa, aloita ottamalla hetki ja kirjoittamalla ylös, mitä yrität tulostaa. Voit laittaa sen marginaaleihin tai nurkkaan, jos et halua sen olevan osa vastaustasi. Varmista vain, että se on jossain, jossa voit viitata siihen.

Piirrä koodisi

Tämä askel on kuin kaksiteräinen miekka. Se voi saada sinulle etenemissuunnitelman ohjelmallesi tai tuhlata aikaasi. Minun tehtäväni on varmistaa, että se on entinen.

Joten ennen kaikkea haluan sanoa: koodin hahmottaminen on tarpeetonta, jos ongelmasi tai kysymyksesi laajuus on pieni. Tämä käytäntö ei ole myöskään ohjeellinen eikä universaali kaikille projekteille tai tilanteille. Kuvittele, että olen haastattelijasi ja pyydän sinua kirjoittamaan, kuinka web-sivun elementti keskitetään CSS:n avulla mahdollisimman monella tavalla. Et varsinaisesti tarvitse ääriviivaa tähän. Koodinpätkät ovat suhteellisen pieniä jokaisessa menetelmässä.

Mutta nyt, oletetaan, että annan sinulle tehtävän kirjoittaa verkkosovellus, joka kaappaa käyttäjien allekirjoitukset kosketusnäytön käyttöliittymän kautta ja tallentaa allekirjoituksen palvelimelle. Ei niin suoraviivaista, eihän? Sinulla on enemmän kuin yksi asia selvitettävänä. Ehkä pieni hahmotelma voi auttaa.

1. Käyttöliittymä allekirjoituksen kaappaamiseen – HTML Canvas? WebGL?
2. Poista osoitintapahtumat käytöstä muualla verkkosivulla, kun käyttäjä allekirjoittaa
3. Muunna ja tallenna kaapattu kuva PNG-tiedostoksi — JS
4. Muunna se sitten blobiksi (ehkä) ja tallenna se vierailijan lokitietotaulukkoon.

Olen kirjoittanut karkean sarjan toimia, jotka minun mielestäni täytyy ehkä koodata. Se olisi voinut olla lyhyempi tai pidempi, riippuen siitä mitä halusin.

Suosittelen lämpimästi asiakasprojektien koodin hahmottamista. Kirjoita ääriviivat yhdessä käyttäjävaatimustesi kanssa tai tulostamiesi teräskehysten taakse.

Nopea tilannekuvasi luettelopisteistä antaa sinulle kartan, tehtäväluettelon ja tarkistuslistan, joita voit verrata, kun saavutat projektin lopun – lähes koko projektin yhteenveto matalan tarkkuuden luettelossa. Siitä voi myös tulla malli seuraavan samanlaisen projektin aloittamiselle.

Mutta kuten sanoin aiemmin, tämä askel on kuin kaksiteräinen miekka. Sinun on pidettävä tämä lyhyt kokeiden ja haastateltavien kohdalla, kun aikarajoitteita on.

Jos et tiedä mistä aloittaa, kirjoita muistiin vain kolme olennaista toimintoa, jotka sinun on koodattava sovellukseesi, ja jos sinulla on aikaa, tee siitä viisi.

Mutta siinä se. Käytä tähän mahdollisimman vähän aikaa äläkä hikoile yksityiskohtien takia. Esittely ei anna sinulle lisäpisteitä. Se on vain auttaakseen sinua varmistamaan, että sinulla on kaikki katettu. Se vangitsee alkuperäisen reaktion ja pitää sinut rehellisenä koko projektin ajan.

Longhand vs. shorthand

Aika aloittaa koodaus. Joten mitä kirjoitat? "Bdrs" tai "border-radius"; "div -> p"Tai"<div><p></div></p>"; "pl()"Tai"println()"; "q()"Tai"querySelector()"?

Jos joku muu arvioi koodiasi, vaihtoehtoja ei ole. Jätä pois lyhenteet, pseudokoodit, Emmet-pikakuvakkeet ja kaikki muut pikakirjoituksen muodot. Muuten ei ole mitään syytä olettaa, että kukaan tätä lukeva tietää mitä lyhenteet tarkoittavat.

Se on todellakin sinusta kiinni.

Jos olet päässyt käsin kirjoittamisesta eroon – ja monet meistä ovat tehneet – on parempi olla liioittelematta pitkäkätisiä merkintöjä, koska ne ovat tylsiä. Samaan aikaan ei ole sellaista asiaa, että kirjoitat liian säästäväisesti. Ei, jos haluat katsoa sitä jonain päivänä taaksepäin ja ymmärtää, mitä olet kirjoittanut.

Muistiinpanosovelluksessani on avoin tiedosto ja pöydälläni reunustettu muistilehtiö, johon kirjoitan muistiin koodinpätkät, jotka haluan tallentaa myöhempää käyttöä varten. Ne ovat järjestäytymättömiä, vain pitkiä katkelmia. Siksi kun selailen vanhempia muistiinpanoja, en tietäisi mitä tarkoitin kirjoittaa, jos en olisi kirjoittanut niitä selvästi.

Unohdan syntaksit koko ajan. Olen esimerkiksi käyttänyt nuolimerkintää JavaScript-funktioille sen käyttöönotosta lähtien (koska se on lyhyempi), ja olen melko varma, jos joku yhtäkkiä pyytää minua määrittelemään funktion function avainsana, saatan jopa laittaa sulut tai funktion nimen väärin, mikä aiheuttaa syntaksivirheen.

Ei ole epätavallista, että unohdamme syntakseja, joita emme ole käyttäneet vähään aikaan. Siksi on parempi kirjoittaa muistiinpanosi selkeästi, kun tiedät tarvitsevasi niitä myöhempää käyttöä varten.

Ei-peräkkäinen koodivirta

Toisin kuin viimeinen vaihe, joka ei koske teitä haastateltavia ja kokeen ottajia, tämä on tarkoitettu erityisesti sinulle.

Useimmat ohjelmointikielet tulkitaan, käännetään ja suoritetaan niin, että joskus lähteessä valmiiksi kirjoitettu koodi suoritetaan myöhemmin, kun sitä kutsutaan. Teemme sen esimerkiksi JavaScriptissä funktiokutsulla - funktiot voidaan määrittää aluksi ja suorittaa myöhemmin. Tutkittavat ja haastateltavat voivat käyttää tätä työstääkseen ensin vastauksesi kriittistä kohtaa.

Kuten olen alusta asti sanonut, käsinkirjoituskoodin tarkoitus on käydä läpi tai testata minkä tahansa ohjelman logiikkaa. On parasta, kun keskityt sen ratkaisemiseen ensin.

Otetaan klassinen oppikirjaesimerkki - ohjelma n:nnen löytämiseksi Fibonacci-numero. Jos kirjoittaisin sille yksinkertaisen luonnoksen, se olisi jotain tällaista:

1. Hanki syöte.
2. Laske Fibonaccin luku.
3. Tee yhteenveto tuloksesta.
4. Tulosta tulos.

Kaikki tämän hahmotelman vaiheet ovat olennaisia; 1, 3 ja 4 ovat kuitenkin pakollisempia. Ne ovat välttämättömiä, mutta eivät tarpeeksi tärkeitä keskittyäksesi heti.

On parempi aloittaa koodin kirjoittaminen muistiin Fibonacci-luvun laskemiseksi kuin syötteen hakeminen. Kääri se funktioksi, jatka sitten ja kirjoita koodi peräkkäin ja kirjoita muistiin rivi funktion kutsumiseksi tarvittaessa.

Käytä aikaasi kirjoittamalla koodia, joka keskittyy ongelman ytimeen.

Todelliset ammattilaiset voivat hypätä eteenpäin. Oletetaan, että minulla on asiakasprojekti, ja minun on työskenneltävä jollakin kolmiogeometrialla - minulla on kaksi sivua, vastakkainen kulma ja täytyy löytää kolmannen sivun pituus. Ja olen päättänyt kirjoittaa paperille aloittaakseni sen sijaan, että avaisin omani IDE.

Ensin piirtäisin tietysti kolmion (kuten voit kertoa, olen siitä erittäin kokenut). Kirjoittaisin ylös muutamia näytepituuksia ja kulmia. Sitten kirjoittaisin kaavan (online-haun kohteliaisuuksia, varmasti), ja sitten hyppään suoraan funktion koodiin.

Ei ole mitään järkeä kirjoittaa muistiin pakollisia vaiheita, vaikka tarvitsen niitä tuotantovalmiissa koodissa. Mutta olisi eri asia, jos minun pitäisi kirjoittaa se vastauslomakkeelle kokeessa. En voi ohittaa muita vaiheita; voin kuitenkin aloittaa kaavan koodilla.

Pseudokoodi

Chris on jo kirjoittanut a kätevä artikkeli pseudokoodista että suosittelen sinua lukemaan perusteellisesti.

Kaikille niille ammattilaisille, joiden mielestä koko käsinkirjoituskoodi ei vaikuta sinun kuppisi teetä, mutta saattavat silti olla uteliaita, voiko se auttaa sinua, pseudokoodi saattaa olla etsimäsi tasapaino.

Se on samanlainen kuin koodin hahmottaminen, kuten mainitsin yhdessä edellisistä vaiheista. Se on kuitenkin lyhyempi ja tuntuu enemmän pikakoodaukselta. Sitä kutsutaan joskus myös "luurankokoodiksi".

Tässä on nopea pseudokoodi CSS-ruudukkoasettelulle:

Grid
5 60px rows
6 100px columns

Ei ole paljon kirjoitettavaa! Joten vaikka kynän laittaminen paperille on erinomaista tällaisiin asioihin, on yhtä tehokasta, nopeaa ja edullista kirjoittaa pseudokoodia mihin tahansa käyttämääsi ohjelmaan.

Tilaa ja kommentteja

Uskon, että koodi koostuu 90 % avainsanoja ja 10 % välilehtiä. Ilman välilyöntejäsanojen luettavuus heikkenee. Sisennykset ovat välttämättömiä myös käsin kirjoitetussa koodissa. Älä kuitenkaan käytä sitä kaikilla tasoilla, koska paperin leveys rajoittaa sinua. Käytä välilyöntejä harkiten, mutta käytä niitä.

Jos kirjoitat koodia omaan käyttöösi, uskon myös, että jos olet noudattanut kaikkea tähän mennessä mainitsemaani ja olet jo kirjoittanut tuotosi ja luonnoksen sivulle, sinun ei ehkä tarvitse edes kommentoida. Kommentit kertovat nopeasti, mitä sen seuraava koodisarja tekee. Jos olet jo kirjoittanut ja lukenut koodin luonnoksen, kommentit ovat tarpeettomia huomautuksia.

Kuitenkin, jos tuomiosi käskee luopua, tee se. Lisää se koodin oikealle puolelle (koska et voi lisätä sitä jo kirjoitettujen rivien väliin samalla tavalla kuin esimerkiksi VS-koodissa). Käytä vinoviivaa, hakasulkua tai nuolia osoittamaan, että ne ovat kommentteja.

Kirjoita kommentit muistiin tutkittaville, jotka eivät ole varmoja tiettyyn syntaksiin. Tällä tavalla ainakin kerrot paperisi arvioijalle aikomuksestasi väärin muotoillun koodin avulla. Ja käytä vain oikeita erottimia kommenttien merkitsemiseen – esimerkiksi se olisi JavaScriptin vinoviiva.

Analoginen vs. digitaalinen

Kuten aiemmin mainitsin, kaikki, mitä tarjoan täällä, on yleisiä koodausneuvoja. Jos et halua kokeilla tätä fyysisellä paperilla, mikä tahansa muistiinpanosovellus toimii myös.

Mutta jos aiot kokeilla digitaalista reittiä, suosittelen käyttämään jotain muuta kuin suoraa muistiinpanosovellusta. Työskentele visuaalisten digitaalisten työkalujen – vuokaavioiden, ajatuskarttojen, rautalankakehysten jne. – kanssa. Niiden avulla voit visualisoida tuloksesi, ääriviivat ja itse koodin.

En ole kovinkaan digikansalainen (paitsi verkossa työskentelyä ja äskettäin siirtymistä e-kirjojen lukemiseen), joten pysyn fyysisissä muistikirjoissa.

Suosikkityökaluni käsinkirjoituskoodiin

Mikä tahansa kynä ja paperi käy! Vaihtoehtoja on kuitenkin monia, ja tässä on muutamia valitsemiani työkaluja:

Ei ole olemassa "kirjoitus" tapaa koodata

Toivon, jos ei muuta, niin pieni tapani kirjoittaa koodia lyijykynällä ja paperilla saa sinut arvioimaan tapaa, jolla jo suunnittelet ja kirjoitat koodia. Pidän siitä, että tiedän, miten muut kehittäjät suhtautuvat työhönsä, ja tämä on minun tapani antaa sinulle kurkistus tavasta, jolla teen asioita.

Jälleen, mikään tässä ei ole tieteellistä tai tarkkaa taidetta. Mutta jos haluat kokeilla käsinkirjoitetun koodin suunnittelua, tässä on kaikki, mitä olemme käsitelleet mukavassa järjestetyssä luettelossa:

1. Aloita kirjoittamalla muistiin (tarvittaessa esimerkkitiedoilla) koodisi tulos.
2. Kirjoita koodille luonnos. Pidä se kolmessa vaiheessa pienissä tai vähemmän monimutkaisissa projekteissa.
3. Käytä pitkäkätisiä merkintöjä. Itsekseen kirjoittavat kehittäjät voivat käyttää lyhennettyjä merkintöjä, kunhan teksti on luettavissa ja on sinulle järkevää, kun viittaat siihen myöhemmin.
4. Kun sinulla on aikarajoitus, harkitse ensin koodin kirjoittamista, joka ratkaisee ongelman ytimen. Kirjoita myöhemmin koodin kutsu oikeaan kohtaan peräkkäisessä koodissasi.
5. Jos olet itsevarma, yritä kirjoittaa pseudokoodi, joka käsittelee pääideaa.
6. Käytä asianmukaisia ​​sisennyksiä ja välilyöntejä – ja huomioi paperin leveys.

Se siitä! Kun olet valmis kokeilemaan koodin kirjoittamista käsin, toivottavasti tämän artikkelin avulla sinun on helppo aloittaa. Ja jos istut kokeeseen tai haastatteluun, toivon, että tämä auttaa sinua keskittymään vastaamaan kysymyksiin oikein.