Am început săptămâna aceasta cu o oprire rapidă a interfețelor programelor de aplicație (API-urile pe scurt). Acestea sunt metode utile pe care le folosim ca dezvoltatori (clienți) pentru a prelua informațiile de care avem nevoie din baze de date (servere) pentru a afișa acele informații pe site-ul nostru.
Folosim solicitări de preluare pentru a „obține” aceste informații, iar API-ul le va extrage de la sursă, în același mod în care un (câine bine dresat — iată la tine Lassy) va prelua ziarul (obiectul) pentru proprietarul (clientul) din cutia poștală. (Server). Când solicitați informații cu un API, puteți obține înapoi tot felul de obiecte de date - așa că am învățat cum să verificăm răspunsul nostru API (și să verificăm că Lassy nu a mai adus o veveriță înăuntru) utilizând un program numit Postman care ne permite să vedem preluarea. rezultat înainte de a-l integra în aplicațiile noastre.
În a doua jumătate a săptămânii, am trecut la învățarea unui cadru numit React, care este în prezent de departe cea mai folosită și populară bibliotecă JS. Dezvoltat de Facebook, îl puteți vedea pe site-uri precum Instagram, The New York Times, Air BnB, Netflix și Dropbox.
Atractia dezvoltatorilor este că ne permite să descriem în mod declarativ interfețele cu utilizatorul și să le schimbăm starea și DOM-ul virtual, ceea ce înseamnă mai puțin cod, care este mai ușor de urmărit. Și un DOM pentru care nu trebuie să vă faceți griji (la revedere queryselectorAll, au revoir getElementsByClassName, auf wiedersehen getElementById).
React este modular și ne permite să ne împărțim site-urile în seturi de componente, adică bare de navigare/feeduri de conținut/linkuri sociale pe care le putem crea o dată și reutiliza ulterior, reducând timpul nostru de dezvoltare, astfel încât să putem începe să ne testăm codul cu Jest, care vine la pachet cu React mai devreme. În cele din urmă, React este popular, foarte popular în acest moment, ceea ce înseamnă că există o comunitate uriașă cu suport disponibil pe Github și stack overflow, precum și o piață de muncă decentă pentru când va veni acea zi.
După ce am învățat cum să folosim componentele și elementele de recuzită, am atins stilul SASS în reactie și destructurarea prop pentru a ne simplifica componentele (mai multe detalii aici: https://medium.com/@lcriswell/destructuring-props-in-). react-b1c295005ce0 ).
Mi-am petrecut după-amiezele săptămâna aceasta re-vizitând proiecte din ultima săptămână care aveau nevoie de ceva TLC. Mi-am revăzut jocul JS Tetris - am revizuit codul din spatele lui, astfel încât să nu mai rămână și să se prăbușească și am adăugat ceva stil la pornire. Mai trebuie să adaug o funcție de drop, niveluri cu o rampă de dificultate și poate câteva efecte sonore.
De asemenea, am revenit asupra unei provocări pe care am avut-o să construim un traducător de cod morse, în timpul pe care l-am avut, am ajuns până la a crea o aplicație simplă care ar putea traduce din engleză în codul morse, dar nu mai face. Revenind la el, am scris funcții pentru a traduce codul morse înapoi în engleză și am adăugat câteva stiluri spion din Războiul Rece în SASS.
O provocare majoră pe care am avut-o când am adăugat cea de-a doua funcție de traducere a fost să găsesc o modalitate de a o afișa pe ecran. Scopul meu a fost ca utilizatorul să apese pe un buton de pe formularul numit Encryptcare ar schimba formularul de la engleză-morse la morse-engleză. Executarea acestui lucru sa dovedit a fi dificilă; Am avut anterior probleme la inserarea și eliminarea elementelor DOM în HTML în cadrul funcțiilor JS - așa că știam că nu pot să inserez un formular nou în HTML-ul meu. În schimb, am decis să redau ambele forme pe ecran în același timp și să găsesc o modalitate de a ascunde una dintre ele.
Am încercat să folosesc clase CSS pentru a ascunde și afișa formularele mele. M-am gândit că apăsând pe Criptare/Decriptare, utilizatorul poate adăuga/elimina în mod dinamic clase în containerele care cuprind traducătorii. Gândirea a fost corectă, dar execuția a fost greșită, am folosit mai întâi display: none, care va ascunde un element. Cu toate acestea, va avea ca rezultat, de asemenea, ascultătorii de evenimente să nu mai vadă elementul din pagină, ceea ce a făcut ca întregul container să fie inutil. Apoi am încercat vizibilitatea: niciuna, dar asta a făcut ca containerele mele să fie afișate stânjenitor pe pagină.
În cele din urmă, am găsit o soluție utilizând și atribuind poziție: relativ pe corp și poziție: absolut containerelor atunci când un utilizator dă clic pe Criptare/Decriptare > buton. Acest lucru a mutat containerul selectat din vedere pe ecran și a permis totuși containerul rămas să stea așa cum a fost menționat anterior. De asemenea, am aplicat un index z: -1 pe containerul ascuns pentru a mă asigura că se află în spatele oricăruia dintre celelalte elemente ale mele.
Un fragment de cod util pe care l-am învățat săptămâna aceasta pentru a căuta obiecte după chei
const getKeyByValue = (obiect, valoare) =› {return Object.keys(obiect).find((cheie) =› obiect[cheie] === valoare);};
Pentru a apela funcția
getKeyByValue(obiectiv, valoare aleasă)
