Jeg byggede en app, der gør læringsalgoritmer og datastrukturer meget sjovere

Jeg er en selvlært programmør. Det betyder, at jeg konstant beskæftiger mig med bedrageres syndrom. Det er ikke ualmindeligt, at jeg føler, at jeg er utilstrækkelig og i en ulempe for at forstå komplekse datalogikoncepter.

Jeg har aldrig været god til matematik. Og jeg har altid bundet stærke matematiske færdigheder til ens naturlige evne til at udmærke sig ved programmering. Jeg har lyst til at arbejde hårdere end andre (som har medfødte færdigheder i matematik) for at lære de samme begreber. Med denne idé rodfæstet dybt i min hjerne var jeg ret sikker på, at jeg aldrig ville være i stand til at lære ting som at krydse binære søgetræer, og hvordan man mentalt kan analysere rekursive mareridt som Mergesort.

Selvom det med en lille indsats lykkedes mig at overraske mig selv. Så jeg ville fortælle lidt om, hvordan og de konkrete resultater af min indsats. Som altid med håb om, at der måske er nogle bidragydere derude, der er villige til at komme ind!

Indtast CS-Playground-React, en simpel JavaScript-sandkasse i browseren til at lære og øve algoritmer og datastrukturer.

Denne forberedelses-app uden tilmelding gemmer automatisk dine fremskridt, tilbyder løsninger til, når du sidder fast og kommer fyldt med links til nyttige artikler, vejledninger og andre ressourcer for at gøre din rejse meget mindre smertefuld end min var !

Lad mig direkte erkende, at denne app ikke er noget banebrydende. (Jeg ved, du tænkte det!) Der er masser af apps derude, der lærer lignende færdigheder og giver dig mulighed for at skrive og køre kode lige i din browser.

Men CS Playground React har til hensigt at være ekstremt minimalistisk og finpudser et meget specifikt sæt emner. Plus, dette er ikke meningen at være den næste store ting. At bygge denne app var bare min måde at gøre det sjovt at lære disse ting. Hvis det ender med at være en værdifuld ressource for selv en anden person undervejs, desto bedre.

Appen er stadig i gang, og der er masser af plads tilbage til at dække, når det kommer til emne og potentielle funktioner. Så hvis du kender en sej udfordring eller datastruktur, som jeg ikke har dækket, eller ser noget, du tror du kan forbedre, tøv ikke med at åbne et problem eller indsende en pull-anmodning. ?

Hvis du bare vil tjekke appen, skal du ikke læse mere - den er live her (også tilgængelig via https, registrerer servicearbejder til offline caching).

Hvis du er interesseret i koden, skal du ikke lede længere.

Resten er alle de kedelige ting om hvorfor og hvordan :-)

Hvorfor jeg byggede dette

Mine motiver til at opbygge denne app var enkle: Jeg ville lære og jeg ville gøre læring lettere og sjovere. Mere vigtigt er det, hvorfor jeg ville lære disse specifikke færdigheder.

I løbet af de sidste 18 måneder kan jeg med sikkerhed sige, at jeg har lært at kode. Selvom jeg stadig tøver med at kalde mig programmør. Og det er ikke fordi jeg ikke koder for at leve (det gør jeg ikke), men mere eller mindre på grund af det bedragersyndrom-fænomen, jeg refererede til tidligere. Jeg ved, hvordan man bygger ting, helt sikkert. Men indtil for nylig vidste jeg meget lidt om formel datalogi.

Ved at lære CS-grundlæggende håbede jeg ikke kun at være mere sikker på at tænke på mig selv som programmør, men også at hjælpe andre med at se mig på den måde.

Selvlærte programmører er en pille, som den tekniske industri har fundet det lettere at sluge i de senere år. Især i områder som Silicon Valley, hvor kodende bootcamps er sprunget op på hvert gadehjørne.

Alligevel er der stadig en stor forhindring at overvinde for de fleste programmører, der håber på at komme ind i branchen uden en formel uddannelse i datalogi.

Så for at hjælpe med at mindske slaget ved at holde en Bachelor of Arts snarere end en Bachelor of Science, satte jeg mig for at lære mig selv nogle af de begreber, som en første eller andet år CS studerende kan lære. Jeg troede, at dette ville supplere nogle af mine mere praktiske udviklingsevner og hjælpe andre med at tage mig mere seriøst som programmør.

Jeg brugte et sæt emner, der vides at være fælles for programmering af interviews, som den grundlinje, jeg ønskede at dække.

Boblesortering, Markeringssortering, Indsætningssortering, Flettsortering, Hurtig sortering, Bundsortering, Stakke, køer, sammenkædede lister, Hash-tabeller og binære søgetræer. Phwewf ...

Jeg blev super skræmt af denne opstilling af problemer og havde udsat for at tackle dem i nogen tid.

Uvillig til at acceptere nederlag begyndte jeg endelig at grave i. At spore tutorials, læse hver artikel, jeg kunne finde, og køre cirkler af forvirring omkring mig selv dag efter dag.

Men med tiden begyndte nogle af begreberne at synke ned. Men der var et par problemer:

  1. Jeg kedede mig lidt. Jeg elsker problemløsning, men lad os indse det, at løse reverseLevelOrdergennemkørsel af et binært søgetræ er meget mindre sjovt end at løse et virkeligt problem til din nyeste app.
  2. Dette var meget tidskrævende. Jeg arbejder på fuld tid (skriver IKKE kode hele dagen), og min fritid til kode er ekstremt værdifuld. Jeg vidste, at jeg ville bruge måneder på dette, og jeg blev bekymret for, at jeg ville miste kontakten med mine mere omsættelige færdigheder.

Alle disse CS-ting er dejlige at have under dit bælte, men lad os indse det, oftest bliver vi webudviklere ansat til at bygge ting. Og der er ikke for mange praktiske anvendelser til de fleste af disse begreber i hver dag webudvikling.

For mig var det et stolt punkt at lære disse begreber, og jeg ville ikke give op. Men min førsteprioritet var stadig at være dygtig i praktisk webudvikling.

Så jeg besluttede at bringe de to ideer sammen. Svaret var at opbygge en simpel app, der ville hjælpe mig med at nå mine mål og holde mig veløvd i mine kernefærdigheder.

For mig er den bedste måde at lære noget på (især noget tørt) at relatere det til noget, du elsker. Så da jeg byggede denne app og havde det godt med at gøre det, udviklede jeg også indhold til den.

Nu var læring af algos og datastrukturer en nødvendig del af mit seneste projekt. Fordi, selvfølgelig, hvad er meningen med at oprette en app til forberedelse af interviews, medmindre du vil udfylde den med problemer!

Hvert par dage lærte jeg en ny algoritme eller datastruktur. Når jeg næsten havde det nede, ville jeg kompilere læringsressourcerne og føje det til appen. Nu kunne jeg øve det igen og igen i et superenkelt arbejdsområde, som jeg selv byggede. Hvor sejt er det !?

Hovedpointen er, at jeg tog noget, jeg havde udsat i lang tid, og fandt en måde at gøre det sjovt på. Og helt sikkert havde jeg større succes med at nå mine mål på grund af det.

Jeg byggede denne app til mig, men jeg ville dele den med jer alle af en grund. Hvis selv en anden person finder CS-Playground-React nyttig, vil jeg føle, at jeg har gjort min del (eller i det mindste en del af det) for at give tilbage til dette samfund.

Der er så mange programmører derude, der frit deler deres viden og erfaringer og beder om lidt eller intet til gengæld. Uden et sådant åbent samfund ville det næppe være muligt at lære at kode selv.

For ti år siden var der langt færre muligheder, når det kom til selvstyret læring. Så jeg er taknemmelig hver dag for at bo i en informationsalder, hvor så meget viden er så let tilgængelig.

Det gjorde denne rejse mulig for mig, og jeg håber, at en anden derude vil snuble over denne artikel og opdage, at deres egen rejse er blevet lidt lettere.

Tech Stack & Hacks

Hvis du er interesseret, byggede jeg denne app med React & React-Redux (selvom den første version var vanille JS, CSS og HTML). Det bruger også CodeMirror og React-Codemirror2 til at integrere en editor i browseren (BEMÆRK: den originale React-CodeMirror vedligeholdes ikke længere og spiller ikke godt med nyere versioner af React, så giv Scniros repo en stjerne på GitHub til plukning op i slakken!).

Mock konsol

Et lille hack giver mig mulighed for at affyre en redux-handling hver gang en bruger ringer console.logtil deres kode. På denne måde kan jeg fange de loggede beskeder og til gengæld spotte en konsol i browseren for at vise kodens output - hvilket jeg syntes var lidt sejt! Du kan køre når som clearConsole()helst, du vil rydde mock-konsolens meddelelser.

Vedvarende kode

Jeg ønskede at gøre denne app super nem at bruge. Så i stedet for at implementere en database og bede brugerne om at logge ind valgte jeg en enklere tilgang til at gemme fremskridt. Redux administrerer applikationens tilstand under hver session, og jeg bruger localStoragetil vedvarende kode på tværs af sessioner. Appen henter denne gemte tilstand ved dit næste besøg og rehydrerer Redux-butikken med den. På denne måde kan du fortsætte lige hvor du slap.

Hvis du af en eller anden grund vil slette alle dine fremskridt, kan du resetState()til enhver tid køre i editoren. Hvis du ikke ønsker at forpligte din kode til lokal opbevaring, skal du efterlade en // DO NOT SAVEkommentar i din kode, før du navigerer væk. Dette forhindrer lagring af kode, ikke kun for den fil.

Som en sidebemærkning viser det sig, at der er en pakke, der gør dette for dig, kaldet Redux-Persist (som jeg efterhånden fandt ud af). Men for en simpel brugssag, hvis du kan gøre noget med et par kodelinjer eller installere en NPM-pakke for at gøre det samme? Jeg vælger førstnævnte hver gang. Chancerne er, at du sparer hundreder af linjer med kode og et helt nyt sæt afhængigheder. Det er altid en give and take, og du skal beslutte, hvornår den meget optimerede (men tungere) løsning er bedre end din forenklede løsning.

Størrelser, der kan ændres

Det sidste trick jeg havde i ærmet var at gøre arbejdsområdet fleksibelt og let at bruge. Jeg ønskede at give brugerne mulighed for at ændre størrelsen på både editoren og konsollen, så jeg brugte et lille script, jeg fandt kaldet simpleDrag.js, React refs, og magien ved flexbox for at gøre dette muligt.

Tak for læsningen og glad hacking!