Vytvoril som aplikáciu, vďaka ktorej sú výukové algoritmy a dátové štruktúry zábavnejšie

Som programátor samouk. To znamená, že neustále riešim syndróm podvodníka. Nie je nezvyčajné, že mám pocit, že som nedostatočný a že som v nevýhode, keď chápem zložité koncepty počítačovej vedy.

V matematike som nikdy nebol dobrý. A vždy som spájal silné matematické schopnosti s prirodzenou schopnosťou človeka vyniknúť v programovaní. Mám pocit, že aby som sa naučil rovnaké pojmy, musím viac pracovať ako ostatní (ktorí majú vrodené matematické schopnosti). S touto myšlienkou zakorenenou hlboko v mojom mozgu som si bol celkom istý, že sa nikdy nebudem môcť naučiť veci, ako je prechádzanie binárnymi vyhľadávacími stromami a ako mentálne analyzovať rekurzívne nočné mory ako Mergesort.

Aj keď s trochou úsilia sa mi podarilo prekvapiť samého seba. Takže som sa chcel trochu podeliť o to, ako a o hmatateľné výsledky môjho snaženia. Ako vždy, s nádejou, že tam môžu byť niektorí prispievatelia, ktorí sú ochotní sa zapojiť!

Zadajte CS-Playground-React, jednoduché karanténu JavaScriptu v prehliadači, ktorá slúži na výučbu a precvičovanie algoritmov a dátových štruktúr.

Táto aplikácia na prípravu rozhovoru bez registrácie automaticky ukladá váš pokrok, ponúka riešenia, keď sa zaseknete, a obsahuje množstvo odkazov na užitočné články, návody a ďalšie zdroje, vďaka ktorým bude vaša cesta oveľa menej bolestivá ako tá moja. !

Hneď musím uznať, že táto aplikácia nie je nič prevratné. (Viem, že ste si to mysleli!) Existuje veľa aplikácií, ktoré učia podobné zručnosti a umožňujú vám písať a spúšťať kód priamo v prehliadači.

Ale CS Playground React má v úmysle pôsobiť mimoriadne minimalisticky a sústrediť sa na veľmi konkrétny súbor tém. Navyše to nemá byť ďalšia veľká vec. Budovanie tejto aplikácie bol iba môj spôsob, ako učenie týchto vecí urobiť zábavnými. Ak sa to nakoniec stane cenným zdrojom aj pre jednu ďalšiu osobu, o to lepšie.

Aplikácia je stále v štádiu rozpracovania a pokiaľ ide o predmet a potenciálne funkcie, je treba ešte veľa pokryť. Takže ak poznáte super výzvu alebo dátovú štruktúru, ktorej som sa zatiaľ nevenoval, alebo vidíte niečo, o čom si myslíte, že by ste mohli vylepšiť, neváhajte otvoriť problém alebo odoslať požiadavku na stiahnutie. ?

Ak si chcete aplikáciu len prečítať, už nič nečítajte - tu je zverejnená (k dispozícii aj cez https, zaregistruje servisného pracovníka pre ukladanie do medzipamäte offline).

Ak vás kód zaujíma, už nemusíte hľadať.

Zvyšok sú všetky nudné veci o tom, prečo a ako :-)

Prečo som to postavil

Moje motivácie pre vytvorenie tejto aplikácie boli jednoduché: chcel som sa učiť a chcel som, aby bolo učenie jednoduchšie a zábavnejšie. Dôležitejšie je, prečo som sa chcel naučiť tieto špecifické zručnosti.

Za posledných asi 18 mesiacov môžem s istotou povedať, že som sa naučil kódovať. Aj keď stále váham, či sa môžem nazvať programátorom. A to nie je preto, že nekódujem na živobytie (nemám), ale viac-menej kvôli fenoménu syndrómu podvodníka, o ktorom som sa zmienil skôr. Viem, ako stavať veci, určite. Ale až donedávna som vedel veľmi málo o formálnej informatike.

Tým, že som sa naučil základy CS, som dúfal, že sa budem nielen cítiť istejšie, keď budem myslieť na seba ako programátora, ale že pomôžem aj ostatným, aby ma tak videli.

Programátori samouk sú pilulkou, ktorú technický priemysel v posledných rokoch ľahšie prehĺta. Najmä v oblastiach ako Silicon Valley, kde sa kódovacie bootcampy objavili na každom rohu ulice.

Napriek tomu stále existuje veľká prekážka, ktorú treba prekonať pre väčšinu programátorov, ktorí dúfajú, že vstúpia do tohto odvetvia bez formálneho vzdelania v oblasti informatiky.

Aby som teda pomohol zmierniť ranu držaním bakalára a nie bakalára, vydal som sa naučiť sa niektoré koncepty, ktoré by sa mohol naučiť študent prvého alebo druhého ročníka CS. Myslel som si, že to doplní niektoré moje praktickejšie rozvojové schopnosti a pomôže ostatným, aby ma ako programátora brali vážnejšie.

Ako základnú líniu, ktorú som chcel pokryť, som použil skupinu tém, o ktorých je známe, že sú programovaním rozhovorov spoločné.

Triedenie podľa bublín, triedenie podľa výberu, triedenie podľa vloženia, zlúčenie podľa abecedy, rýchle triedenie, halda podľa tried, stohy, fronty, prepojené zoznamy, tabuľky hash a binárne vyhľadávacie stromy. Phwewf…

Táto zostava problémov ma veľmi vystrašila a ich riešenie som už dosť dlho odkladal.

Nechcel som prijať porážku a nakoniec som sa do toho začal púšťať. Sledovanie tutoriálov, čítanie každého článku, ktorý som našiel, a behanie okolo seba okolo seba deň čo deň.

Postupom času sa však niektoré koncepty začali potápať. Vyskytlo sa však niekoľko problémov:

  1. Začínal som sa akosi nudiť. Páči sa mi riešenie problémov, ale povedzme si na rovinu, riešenie reverseLevelOrderprechodu binárnym vyhľadávacím stromom je oveľa menej zábavné ako riešenie problému z reálneho sveta pre vašu najnovšiu aplikáciu.
  2. Bolo to veľmi náročné na čas. Pracujem na plný úväzok (NEMÁM písať kód celý deň) a môj voľný čas na kód je nesmierne cenný. Vedel som, že to budem tráviť mesiace, a začal som mať obavy, že stratím kontakt so svojimi obchodovateľnejšími schopnosťami.

Všetky tieto CS veci je skvelé mať pod opaskom, ale priznajme si, že najčastejšie si nás vývojári webových stránok najímajú, aby sme ich vytvorili. A väčšina z týchto konceptov nemá pri každodennom vývoji webu príliš veľa praktických využití.

Pre mňa bolo osvojenie si týchto konceptov pýchou a ja som sa ich nechcel vzdať. Mojou prioritou číslo jeden však stále bola znalosť praktického vývoja webových aplikácií.

Preto som sa rozhodol spojiť tieto dve myšlienky. Odpoveďou bolo vytvoriť jednoduchú aplikáciu, ktorá by mi pomohla dosiahnuť moje ciele a udržala ma dobre nacvičeného v mojich základných zručnostiach.

Pre mňa je najlepší spôsob, ako sa niečo naučiť (najmä niečo suché), spojiť to s niečím, čo máte radi. Keď som teda budoval túto aplikáciu a robil som to najrôznejšie, vyvíjal som pre ňu aj obsah.

Teraz bolo učenie sa algos a dátových štruktúr nevyhnutnou súčasťou môjho najnovšieho projektu. Pretože samozrejme, aký má zmysel vytvárať aplikáciu na prípravu pohovoru, pokiaľ ju nechystáte naplniť problémami!

Každých pár dní som sa učil nový algoritmus alebo dátovú štruktúru. Keď už som to mal skoro dole, skompiloval som učebné zdroje a pridal som ich do aplikácie. Teraz som to mohol cvičiť znova a znova na super jednoduchom pracovnom priestore, ktorý som si sám postavil. Aké je to super !?

Hlavné je, že som si vzal niečo, čo som dlho odkladal, a našiel som spôsob, ako to urobiť zábavou. A určite som mal vďaka tomu väčší úspech pri dosahovaní svojich cieľov.

Túto aplikáciu som vytvoril pre seba, ale chcel som ju s vami všetkými z nejakého dôvodu zdieľať. Ak čo i len jedna ďalšia osoba považuje CS-Playground-React za užitočné, budem mať pocit, že som urobil svoju časť (alebo aspoň časť), aby som sa vrátil tejto komunite.

Existuje toľko programátorov, ktorí sa slobodne delia o svoje vedomosti a skúsenosti a na oplátku pýtajú len málo alebo nič. Bez takto otvorenej komunity by bolo ťažké naučiť sa kódovať sami.

Pred desiatimi rokmi existovalo oveľa menej možností, pokiaľ išlo o samoobslužné učenie. Takže som každý deň vďačný za to, že žijem v informačnom veku, kde je toľko vedomostí tak ľahko prístupných.

Umožnilo mi to cestu a dúfam, že tam niekto iný narazí na tento článok a zistí, že ich vlastná cesta sa o niečo uľahčila.

Tech Stack & Hacks

Pre prípad, že by vás zaujímal, som vytvoril túto aplikáciu s React & React-Redux (aj keď prvou verziou bola vanilla JS, CSS a HTML). Používa tiež CodeMirror a React-Codemirror2 na vloženie editora do prehliadača (POZNÁMKA: pôvodný React-CodeMirror sa už neudržiava a s novšími verziami Reactu sa dobre nehrá, takže choďte dať Repni Scniro na GitHub hviezdu na výber do prázdna!).

Vysmievaná konzola

Malý hack umožňuje spustiť akciu reduxu zakaždým, keď používateľ zavolá console.logsvoj kód. Týmto spôsobom môžem zachytiť prihlásené správy a zase vysmievať sa konzole v prehliadači a ukazovať výstup kódu - čo som považoval za super! Môžete ho spustiť clearConsole()kedykoľvek, keď chcete vymazať správy simulovanej konzoly.

Trvalý kódex

Chcel som, aby bola táto aplikácia super jednoduchá. Namiesto implementácie databázy a požiadania používateľov o prihlásenie som teda zvolil jednoduchší prístup k ukladaniu pokroku. Redux spravuje stav aplikácie počas každej relácie a používam localStoragena pretrvávajúci kód naprieč reláciami. Aplikácia načíta tento uložený stav pri vašej ďalšej návšteve a rehydratuje ňou obchod Redux. Týmto spôsobom môžete pokračovať tam, kde ste prestali.

Ak z nejakého dôvodu chcete vymazať všetok svoj pokrok, môžete ho kedykoľvek spustiť resetState()v editore. Ak svoj kód nechcete priradiť k miestnemu úložisku, // DO NOT SAVEpred odchodom preč zanechajte v kóde komentár. Toto zabráni uloženiu akéhokoľvek kódu, nielen pre tento súbor.

Ako vedľajšia poznámka sa ukazuje, že existuje balíček, ktorý to robí za vás, nazvaný Redux-Persist (čo som zistil po tejto skutočnosti). Ale pre jednoduchý prípad použitia, ak môžete urobiť niečo s niekoľkými riadkami kódu alebo nainštalovať balík NPM, aby ste vykonali to isté? Zakaždým si vyberiem to prvé. Je pravdepodobné, že šetríte stovky riadkov kódu a úplne novú sadu závislostí. Vždy je to dar a musíte sa rozhodnúť, kedy je vysoko optimalizované (ale s vyššou hmotnosťou) riešenie lepšie ako vaše zjednodušené.

Zmena veľkosti tabúľ

Posledným trikom, ktorý som mal v rukáve, bolo vytvorenie flexibilného a ľahko použiteľného pracovného priestoru. Chcel som dať používateľom možnosť zmeniť veľkosť editora aj konzoly, a tak som to umožnil pomocou malého skriptu, ktorý som našiel, nazvaného simpleDrag.jsReact refsa kúzla flexboxu.

Ďakujeme za prečítanie a šťastné hackovanie!