de peterWeinberg

Am construit o aplicație care face algoritmii de învățare și structurile de date mult mai distractive

Am construit o aplicatie care face ca algoritmii de invatare
Interfața CS-Playground-React

Sunt programator autodidact. Aceasta înseamnă că am de-a face constant sindromul impostorului. Nu este neobișnuit să simt că sunt inadecvat și dezavantajat pentru a înțelege concepte complexe de informatică.

Nu m-am priceput niciodată la matematică. Și am legat întotdeauna abilități matematice puternice de abilitatea naturală a cuiva de a excela la programare. Simt că trebuie să lucrez mai mult decât alții (care au abilități înnăscute în matematică) pentru a învăța aceleași concepte. Având această idee înrădăcinată adânc în creierul meu, eram destul de sigur că nu aș putea învăța niciodată lucruri precum traversarea copacilor binari de căutare și cum să analizez mental coșmaruri recursive precum Mergesort.

Deși cu puțin efort, am reușit să mă surprind. Așa că am vrut să împărtășesc un pic despre cum și rezultatele tangibile ale eforturilor mele. Ca întotdeauna, cu speranța că ar putea exista unii colaboratori dispuși să participe!

introduce CS-Playground-React, un sandbox simplu JavaScript în browser pentru învățarea și exersarea algoritmilor și structurilor de date.

Această aplicație de pregătire a interviului fără înregistrare vă salvează automat progresul, vă oferă soluții pentru momentul în care vă blocați și vine plină de linkuri către articole utile, tutoriale și alte resurse pentru a vă face călătoria mult mai puțin dureroasă decât a fost a mea!

Permiteți-mi să recunosc direct că această aplicație nu este nimic inovator. (Știu că te gândeai la asta!) Există o mulțime de aplicații care învață abilități similare și îți oferă posibilitatea de a scrie și rula cod direct în browserul tău.

Dar CS Playground React intenționează să fie extrem de minimalist și se adaptează la un set foarte specific de subiecte. În plus, asta nu este menit să fie următorul lucru mare. Construirea acestei aplicații a fost doar modul meu de a face ca învățarea acestor lucruri să fie distractivă. Dacă ajunge să fie o resursă valoroasă chiar și pentru o altă persoană pe parcurs, cu atât mai bine.

Aplicația este încă în curs de desfășurare și rămâne o mulțime de teren de acoperit atunci când vine vorba de subiect și caracteristici potențiale. Deci, dacă cunoașteți o provocare interesantă sau o structură de date pe care nu am acoperit-o sau vedeți ceva pe care credeți că îl puteți îmbunătăți, nu ezitați deschideți o problemă sau trimiteți o cerere de extragere. ?

Dacă doriți doar să verificați aplicația, nu mai citiți – este live Aici (disponibil și prin https, va înregistra lucrătorul de service pentru stocarea în cache offline).

Dacă sunteți interesat de cod, Nu mai căuta.

Restul sunt toate lucrurile plictisitoare despre de ce și cum 🙂

De ce am construit asta

Motivațiile mele pentru construirea acestei aplicații au fost simple: am vrut să învăț și am vrut să fac învățarea mai ușoară și mai distractivă. Mai important, de aceea am vrut să învăț aceste abilități specifice.

În ultimele 18 luni sau cam așa, pot spune cu încredere că am învățat cum să codez. Deși încă ezit să mă numesc programator. Și acest lucru nu se datorează faptului că nu codific pentru existență (nu), ci mai mult sau mai puțin din cauza sindromul impostorului fenomen la care am făcut referire mai devreme. Știu cum să construiesc lucruri, sigur. Dar, până de curând, știam foarte puțin despre informatica formală.

Învățând elementele fundamentale ale CS, am sperat nu numai să mă simt mai încrezător în a mă gândi la mine ca programator, ci să-i ajut și pe alții să mă vadă așa.

Programatorii autodidacti sunt o pilulă pe care industria tehnologică a găsit-o mai ușor de înghițit în ultimii ani. Mai ales în zone precum Silicon Valley, unde bootcampurile de codare au apărut la fiecare colț de stradă.

Cu toate acestea, există încă un obstacol major de depășit pentru majoritatea programatorilor care speră să intre în industrie fără o educație formală în informatică.

Așadar, pentru a ajuta la diminuarea loviturii de a deține mai degrabă un Bachelor of Arts decât un Bachelor of Science, mi-am propus să-mi învăț câteva dintre conceptele pe care le-ar putea învăța un student în anul I sau al II-lea. Am crezut că acest lucru va completa unele dintre abilitățile mele de dezvoltare mai practice și îi va ajuta pe alții să mă ia mai în serios ca programator.

Am folosit un set de subiecte cunoscute ca fiind comune programării interviurilor ca linie de bază pe care am vrut să o parcurg.

Sortare cu bule, Sortare prin selecție, Sortare prin inserție, Sortare Merge, Sortare rapidă, Sortare în grămadă, Stive, Cozi, Liste conectate, Tabelele Hash și Arborii de căutare binari. Phwewf …

Am fost foarte intimidat de această gamă de probleme și am amânat abordarea lor de ceva timp.

Fără să vreau să accept înfrângerea, în cele din urmă am început să cercetez. Urmărirea tutorialelor, citirea fiecărui articol pe care îl găseam și desfășurarea cercurilor de confuzie în jurul meu zi de zi.

Cu timpul, însă, unele dintre concepte au început să se scufunde. Dar au existat câteva probleme:

  1. Mă plictiseam cam. Îmi place rezolvarea problemelor, dar să recunoaștem, rezolvarea reverseLevelOrder traversarea unui copac de căutare binar este mult mai puțin distractiv decât rezolvarea unei probleme din lumea reală pentru cea mai recentă aplicație.
  2. Acesta a fost foarte consumă timp. Lucrez cu normă întreagă (NU scriu cod toată ziua) și timpul meu liber pentru cod este extrem de valoros. Știam că voi petrece luni în acest sens și am devenit îngrijorat că voi pierde legătura cu abilitățile mele mai comercializabile.

Toate aceste lucruri CS sunt minunate să le aveți sub centură, dar să recunoaștem, cel mai adesea suntem angajați web devs pentru a construi lucruri. Și nu există prea multe utilizări practice pentru majoritatea acestor concepte în fiecare zi de dezvoltare web.

Pentru mine, învățarea acestor concepte era un punct de mândrie și nu aveam de gând să renunț. Dar prioritatea mea numărul unu era încă să mă pricep la dezvoltarea web practică.

Așa că am decis să aduc cele două idei împreună. Răspunsul a fost să construiesc o aplicație simplă care să mă ajute să-mi ating obiectivele și păstrează-mă bine antrenat în abilitățile mele de bază.

Pentru mine, cel mai bun mod de a învăța ceva (în special ceva uscat), este să-l raportez la ceva ce iubești. Deci, pe măsură ce construiam această aplicație și mă distrau să o fac, am dezvoltat și conținut pentru ea.

Acum, învățarea algelor și a structurilor de date a fost o parte necesară a ultimului meu proiect. Pentru că, desigur, ce rost are să construiești o aplicație de pregătire a interviului dacă nu o vei umple cu probleme!

La fiecare câteva zile, învățam un algoritm nou sau o structură de date. Odată ce aproape l-am pierdut, aș compila resursele de învățare și le-aș adăuga în aplicație. Acum, aș putea să-l exersez iar și iar într-un spațiu de lucru super simplu pe care l-am construit eu. Cat de tare e asta!?

Am construit o aplicatie care face ca algoritmii de invatare
Am găsit un site foarte interesant, care vizualizează modul în care funcționează sortarea algelor și a structurilor de date. Acesta este Quicksort care își face treaba pe o matrice de 100 de articole. Puteți găsi lista completă a vizualizărilor Aici. Mulțumesc USF, este minunat!

Principalul punct este că am luat ceva ce am amânat de mult timp și am găsit o modalitate de a face distractiv. Și, cu siguranță, am avut un succes mai mare în atingerea obiectivelor mele din cauza asta.

Am construit această aplicație pentru mine, dar am vrut să o împărtășesc tuturor cu un motiv. Dacă chiar și unei alte persoane i se pare util CS-Playground-React, voi simți că mi-am făcut partea (sau cel puțin o parte) pentru a da înapoi acestei comunități.

Există atât de mulți programatori acolo care își împărtășesc în mod liber cunoștințele și experiențele și cer în schimb puțin sau nimic. Fără o comunitate atât de deschisă, învățarea codării pe cont propriu nu ar fi posibilă.

În urmă cu zece ani, existau mult mai puține opțiuni în ceea ce privește învățarea autoguidată. Așadar, sunt recunoscător în fiecare zi pentru că trăiesc într-o eră a informației în care atât de multe cunoștințe sunt atât de ușor accesibile.

Mi-a făcut această călătorie posibilă și sper că altcineva de acolo va da peste acest articol și va descoperi că propria lor călătorie a devenit puțin mai ușoară.

Tech Stack & Hacks

În cazul în care sunteți interesat, am creat această aplicație cu React & React-Redux (deși prima versiune a fost vanilie JS, CSS și HTML). De asemenea, folosește CodeMirror și React-Codemirror2 pentru a încorpora un editor în browser (NOTĂ: React-CodeMirror original nu mai este întreținut și nu se joacă bine cu versiunile mai noi de React, așa că mergeți să dați Scniroeste o stea pe GitHub pentru că a preluat slăbiciunea!).

Consolă simulată

Un mic hack îmi permite să declanșez o acțiune de redux de fiecare dată când sună un utilizator console.log în codul lor. În acest fel, pot captura mesajele înregistrate și, la rândul meu, să bat joc de o consolă în browser pentru a afișa ieșirea codului – ceea ce mi s-a părut cam drăguț! Poți fugi clearConsole() oricând doriți să ștergeți mesajele consolei simulate.

Cod persistent

Am vrut să fac această aplicație foarte ușor de utilizat. Deci, în loc să implementez o bază de date și să cer utilizatorilor să se conecteze, am ales o abordare mai simplă pentru a salva progresul. Redux gestionează starea aplicației în timpul fiecărei sesiuni și o folosesc localStorage pentru codul persistent între sesiuni. Aplicația recuperează această stare salvată la următoarea vizită și rehidratează magazinul Redux cu aceasta. În acest fel puteți prelua chiar de unde ați rămas.

Dacă din anumite motive doriți să ștergeți toate progresele, puteți rula resetState() în orice moment în editor. Dacă nu doriți să vă transferați codul la stocarea locală, lăsați un // DO NOT SAVE comentează codul tău înainte de a naviga. Acest lucru va împiedica salvarea oricărui cod, nu numai pentru acel fișier.

Ca o notă laterală, se dovedește că există un pachet care face acest lucru pentru tine, numit Redux-Persist (pe care l-am aflat după fapt). Dar pentru un caz de utilizare simplu, dacă puteți face ceva cu câteva linii de cod sau puteți instala un pachet NPM pentru a face același lucru? O voi alege pe prima de fiecare dată. Este posibil să salvați sute de linii de cod și un set complet nou de dependențe. Este întotdeauna o alegere și trebuie să decideți când soluția extrem de optimizată (dar cu o greutate mai mare) este mai bună decât cea simplistă.

Panouri redimensionabile

Ultimul truc pe care l-am avut în mânecă a fost să fac spațiul de lucru flexibil și ușor de utilizat. Am vrut să le ofer utilizatorilor posibilitatea de a redimensiona atât editorul, cât și consola, așa că am folosit un mic script pe care l-am găsit numit simpleDrag.js, Reacționează refs, și magia flexbox pentru a face acest lucru posibil.

Vă mulțumim pentru citire și fericire de hacking!