În urmă cu aproximativ 15 ani, lucram la o companie în care am creat aplicații pentru agenții de turism, lucrătorii aeroporturilor și companiile aeriene. De asemenea, am construit propriul nostru cadru intern pentru componentele UI și capabilitățile aplicației cu o singură pagină. Aveam componente pentru orice: câmpuri, butoane, file, intervale, tabele de date, meniuri, datepickers, selectii și multiselectări. Aveam chiar și o componentă div. Componenta noastră div a fost grozavă de altfel, ne-a permis să facem colțuri rotunjite pe toate browserele, ceea ce, crezi sau nu, nu era un lucru ușor de făcut la momentul respectiv.
Munca noastră a avut loc într-un moment al istoriei noastre când JS, Ajax și HTML dinamic au fost văzute ca o revoluție care ne-a adus în viitor. Dintr-o dată, am putut actualiza o pagină în mod dinamic, să obținem date de la un server și să evităm nevoia de a naviga la alte pagini, ceea ce a fost văzut ca fiind lent și a afișat un dreptunghi alb mare pe ecran între cele două pagini. A existat o frază, făcută populară de Jeff Atwood (fondatorul StackOverflow), care spunea: „Orice aplicație care poate fi scrisă în JavaScript va fi în cele din urmă scrisă în JavaScript.” – Jeff Atwood
Pentru noi, la vremea aceea, se simțea ca o îndrăzneală să mergem și să creăm acele aplicații. Mi s-a părut o aprobare generală să faci totul cu JS. Așa că am făcut totul cu JS și nu ne-am făcut timp să cercetăm alte moduri de a face lucrurile. Nu am simțit cu adevărat motivația să învățăm corect ce ar putea face HTML și CSS. Nu am perceput cu adevărat web-ul ca pe o platformă de aplicații în evoluție în întregime. În cea mai mare parte, am văzut-o ca pe ceva la care trebuia să rezolvăm, mai ales când era vorba de suport pentru browser. Am putea doar să aruncăm mai multe JS pentru a face lucrurile. M-ar fi ajutat să am timpul necesar pentru a afla mai multe despre cum a funcționat web-ul și despre ce era disponibil pe platformă? Sigur, probabil că aș fi putut rade o grămadă de cod care nu era cu adevărat necesar. Dar, la momentul respectiv, poate nu atât. Vedeți, diferențele dintre browser erau destul de semnificative pe atunci. Acesta a fost o perioadă în care Internet Explorer era încă browserul dominant, Firefox fiind pe locul secund, dar începea să piardă din cota de piață din cauza că Chrome câștiga rapid popularitate. Deși Chrome și Firefox se pricepeau destul de bine la standardele web, mediile în care rulau aplicațiile noastre au însemnat că a trebuit să acceptăm IE6 pentru o lungă perioadă de timp. Chiar și atunci când ni s-a permis să acceptăm IE8, am avut totuși de a face cu o mulțime de diferențe între browsere. Nu numai asta, dar web-ul vremii pur și simplu nu avea atât de multe capabilități integrate chiar în platformă.
Avanză rapid până astăzi. Lucrurile s-au schimbat enorm. Nu numai că avem mai multe dintre aceste capacități decât oricând, dar și rata cu care devin disponibile a crescut. Atunci, permiteți-mi să pun întrebarea din nou: v-ar ajuta să vă acordați timp pentru a afla mai multe despre cum funcționează web-ul și despre ce este disponibil pe platformă? Absolut da. A învăța să înțelegeți și să utilizați platforma web astăzi vă aduce la un avantaj enorm față de alți dezvoltatori. Indiferent dacă lucrați la performanță, accesibilitate, receptivitate, toate împreună sau doar la livrarea funcțiilor de UI, dacă doriți să faceți acest lucru ca inginer responsabil, cunoașterea instrumentelor care vă sunt disponibile vă ajută să vă atingeți obiectivele mai rapid și mai bine. Câteva lucruri pentru care s-ar putea să nu mai ai nevoie de o bibliotecă Știind ce browsere acceptă astăzi, întrebarea este: de ce putem renunța? Avem nevoie de o componentă div pentru a face colțuri rotunjite în 2025? Desigur, noi nu. Proprietatea border-radius este acceptată de toate browserele utilizate în prezent de mai bine de 15 ani în acest moment. Și forma de colț va veni în curând, chiar și pentru colțurile mai înfățișate. Să aruncăm o privire la caracteristicile relativ recente care sunt acum disponibile în toate browserele majore și pe care le puteți folosi pentru a înlocui dependențele existente în baza de cod. Ideea nu este să renunțați imediat la toate bibliotecile iubite și să vă rescrieți baza de cod. În ceea ce privește orice altceva, va trebui să luați în considerare mai întâi suportul pentru browser și să decideți pe baza altor factori specifici proiectului dvs. Următoarele caracteristici sunt implementate în cele trei motoare principale de browser (Chromium, WebKit și Gecko), dar este posibil să aveți cerințe diferite de asistență pentru browser care vă împiedică să le utilizați imediat. Acum este încă un moment bun pentru a afla despre aceste funcții, totuși și, poate, să plănuiți să le folosiți la un moment dat. Popovers și dialoguri API-ul Popover, elementul HTML
Sigur, viteza conexiunii dvs. la internet a crescut probabil și, dar acesta nu este cazul pentru toată lumea. Și nu toată lumea are aceleași capacități de dispozitiv. În schimb, introducerea unui cod terță parte pentru lucruri pe care le puteți face cu platforma înseamnă, cel mai probabil, că trimiteți mai mult cod și, prin urmare, ajungeți la mai puțini clienți decât ați face în mod normal. Pe web, performanța proastă de încărcare duce la rate mari de abandon și dăunează reputației mărcii. Rularea mai puțin cod pe dispozitive În plus, codul pe care îl trimiteți pe dispozitivele clienților dvs. rulează probabil mai rapid dacă folosește mai puține abstracții JavaScript în partea de sus a platformei. De asemenea, este probabil mai receptiv și mai accesibil în mod implicit. Toate acestea conduc la clienți mai mulți și mai fericiți. Consultați blogul anual al colegului meu Alex Russell, care arată că dispozitivele premium sunt în mare parte absente de pe piețele cu miliarde de utilizatori din cauza inegalității de avere. Și acest decalaj nu face decât să crească în timp.
Aspect zidărie încorporat O caracteristică a platformei web care va veni în curând și de care sunt foarte încântat este CSS Masonry.
Permiteți-mi să încep prin a explica ce este masoneria. Ce este masoneria Zidăria este un tip de aspect care a fost popularizat de Pinterest cu ani în urmă. Acesta creează piese independente de conținut în care articolele se împachetează cât mai aproape de începutul piesei.
Mulți oameni văd Masoneria o opțiune excelentă pentru portofolii și galerii foto, ceea ce cu siguranță poate face. Dar Masonry este mai flexibilă decât ceea ce vezi pe Pinterest și nu se limitează doar la machete asemănătoare cascadei. Într-un aspect de zidărie:
Urmele pot fi coloane sau rânduri:
Piesele de conținut nu trebuie să aibă toate aceeași dimensiune:
Elementele se pot întinde pe mai multe piste:
Articolele pot fi plasate pe anumite piste; nu trebuie să urmeze întotdeauna algoritmul de plasare automată:
Demo-uri Iată câteva demonstrații simple pe care le-am făcut folosind viitoarea implementare a CSS Masonry în Chromium. O galerie foto demonstrativă, care arată modul în care elementele (titlul în acest caz) se pot întinde pe mai multe piese:
O altă galerie foto care arată piese de diferite dimensiuni:
Un aspect al site-ului de știri cu unele piese mai largi decât altele și unele elemente care se întind pe întreaga lățime a aspectului:
O tablă kanban care arată că articolele pot fi plasate pe anumite piste:
Notă: TheDemo-urile anterioare au fost realizate cu o versiune de Chromium care nu este încă disponibilă pentru majoritatea utilizatorilor web, deoarece CSS Masonry abia începe să fie implementat în browsere. Cu toate acestea, dezvoltatorii web folosesc cu plăcere biblioteci pentru a crea machete Masonry de ani de zile deja. Site-uri care folosesc zidăria astăzi Într-adevăr, masoneria este destul de comună astăzi pe web. Iată câteva exemple pe care le-am găsit pe lângă Pinterest:
Și încă câteva exemple, mai puțin evidente:
Deci, cum au fost create aceste machete? Soluții alternative Un truc pe care l-am văzut folosit este utilizarea unui aspect Flexbox, schimbându-i direcția în coloană și setând-o să încapă. În acest fel, puteți plasa articole de diferite înălțimi în mai multe coloane independente, dând impresia unui aspect de zidărie:
Există, totuși, două limitări cu această soluție:
Ordinea articolelor este diferită de ceea ce ar fi cu un aspect de zidărie real. Cu Flexbox, articolele umple prima coloană și, când este plină, apoi trec la următoarea coloană. Cu Masonry, articolele s-ar stivui în orice pistă (sau coloană în acest caz) are mai mult spațiu disponibil. Dar, de asemenea, și poate mai important, această soluție necesită să setați o înălțime fixă pentru containerul Flexbox; altfel, nu ar avea loc nicio ambalare.
Biblioteci de zidărie terțe Pentru cazuri mai avansate, dezvoltatorii au folosit biblioteci. Cea mai cunoscută și populară bibliotecă pentru aceasta se numește pur și simplu Masonry și este descărcată de aproximativ 200.000 de ori pe săptămână, conform NPM. Squarespace oferă, de asemenea, o componentă de aspect care redă un aspect Masonry, pentru o alternativă fără cod, iar multe site-uri o folosesc. Ambele opțiuni folosesc cod JavaScript pentru a plasa elemente în aspect. Zidărie încorporată Sunt foarte încântat că Masonry începe să apară acum în browsere ca o caracteristică CSS încorporată. De-a lungul timpului, veți putea folosi Masonry la fel ca Grid sau Flexbox, adică fără a avea nevoie de soluții alternative sau de cod de la terți. Echipa mea de la Microsoft a implementat suport Masonry încorporat în proiectul open source Chromium, pe care se bazează Edge, Chrome și multe alte browsere. Mozilla a fost de fapt primul furnizor de browser care a propus o implementare experimentală a Masonry în 2020. Și Apple a fost, de asemenea, foarte interesat să facă acest nou aspect web primitiv. Lucrările de standardizare a caracteristicii continuă, de asemenea, cu acord în cadrul grupului de lucru CSS despre direcția generală și chiar un nou tip de afișare: grid-lanes. Dacă doriți să aflați mai multe despre Masonry și să urmăriți progresul, consultați pagina mea de resurse CSS Masonry. În timp, când Masonry devine o caracteristică de bază, la fel ca Grid sau Flexbox, vom putea să o folosim pur și simplu și să beneficiam de:
Performanță mai bună, Reactivitate mai bună, Ușurință în utilizare și cod mai simplu.
Să aruncăm o privire mai atentă la acestea. Performanță mai bună Crearea propriului sistem de aspect asemănător masoneriei sau folosirea unei biblioteci terță parte înseamnă că va trebui să rulați cod JavaScript pentru a plasa elemente pe ecran. Aceasta înseamnă, de asemenea, că acest cod va bloca randarea. Într-adevăr, fie nu va apărea nimic, fie lucrurile nu vor fi în locurile potrivite sau de dimensiunile potrivite, până când acel cod JavaScript va fi rulat. Aspectul de zidărie este adesea folosit pentru partea principală a unei pagini web, ceea ce înseamnă că codul ar face ca conținutul dvs. principal să apară mai târziu decât ar fi altfel, degradând valoarea LCP sau cea mai mare vopsea de conținut, care joacă un rol important în performanța percepută și optimizarea motorului de căutare. Am testat biblioteca Masonry JS cu un aspect simplu și prin simularea unei conexiuni 4G lentă în DevTools. Biblioteca nu este foarte mare (24KB, 7.8KB gzipped), dar a fost nevoie de 600 ms pentru a se încărca în condițiile mele de testare. Iată o înregistrare a performanței care arată timpul lung de încărcare de 600 ms pentru biblioteca Masonry și că nu a avut loc nicio altă activitate de randare în timp ce se întâmpla:
În plus, după timpul inițial de încărcare, scriptul descărcat trebuia apoi analizat, compilat și apoi rulat. Toate acestea, așa cum am menționat anterior, blocau redarea paginii. Cu o implementare Masonry încorporată în browser, nu vom avea un script de încărcat și rulat. Motorul de browser își va face treaba în timpul etapei inițiale de redare a paginii. Reactivitate mai bună La fel ca atunci când o pagină se încarcă pentru prima dată, redimensionarea ferestrei browser duce la redarea aspectului în pagina respectivă. În acest moment, totuși, dacă pagina folosește biblioteca Masonry JS, nu este nevoie să încărcați din nou scriptul, deoarece este dejaAici. Cu toate acestea, codul care mută elementele în locurile potrivite trebuie să ruleze. Acum, această bibliotecă pare să fie destul de rapidă în a face acest lucru atunci când pagina se încarcă. Cu toate acestea, animă elementele atunci când trebuie să se mute într-un loc diferit la redimensionarea ferestrei, iar acest lucru face o mare diferență. Desigur, utilizatorii nu petrec timp să-și redimensioneze ferestrele browserului la fel de mult ca noi dezvoltatorii. Dar această experiență de redimensionare animată poate fi destul de șocante și se adaugă la timpul perceput necesar pentru ca pagina să se adapteze la noua ei dimensiune. Ușurință în utilizare și cod mai simplu Cât de ușor este să folosești o funcție web și cât de simplu arată codul sunt factori importanți care pot face o mare diferență pentru echipa ta. Ele nu pot fi niciodată la fel de importante ca experiența utilizatorului final, desigur, dar experiența dezvoltatorului are un impact asupra mentenanței. Utilizarea unei funcții web încorporate vine cu beneficii importante în acest sens:
Dezvoltatorii care cunosc deja HTML, CSS și JS vor putea, cel mai probabil, să folosească această funcție cu ușurință, deoarece a fost concepută pentru a se integra bine și a fi în concordanță cu restul platformei web. Nu există niciun risc de a se introduce modificări întrerupte în modul în care este utilizată funcția. Există aproape zero riscul ca această funcție să devină depreciată sau neîntreținută.
În cazul zidăriei încorporate, pentru că este un aspect primitiv, îl utilizați din CSS, la fel ca Grid sau Flexbox, fără JS implicat. De asemenea, alte proprietăți CSS legate de aspect, cum ar fi gap, funcționează așa cum v-ați aștepta. Nu există trucuri sau soluții pe care să le cunoașteți, iar lucrurile pe care le învățați sunt documentate pe MDN. Pentru lib-ul Masonry JS, inițializarea este puțin complexă: necesită un atribut de date cu o sintaxă specifică, împreună cu elemente HTML ascunse pentru a seta dimensiunile coloanei și ale intervalului. În plus, dacă doriți să acoperiți coloane, trebuie să includeți singur dimensiunea spațiului pentru a evita problemele:
Să comparăm asta cu cum ar arăta o implementare încorporată de masonry:
Un cod mai simplu, mai compact, care poate folosi doar lucruri precum decalajul și unde traseele se întinde cu span 2, la fel ca în grilă, și nu necesită să calculați lățimea corectă care include dimensiunea spațiului. Cum să știi ce este disponibil și când este disponibil? În general, întrebarea nu este dacă ar trebui să utilizați masoneria încorporată peste o bibliotecă JS, ci mai degrabă când. Biblioteca Masonry JS este uimitoare și a umplut un gol în platforma web de mulți ani și pentru mulți dezvoltatori și utilizatori fericiți. Are câteva dezavantaje dacă o comparați cu o implementare încorporată de masonry, desigur, dar acestea nu sunt importante dacă această implementare nu este gata. Îmi este ușor să enumerez aceste noi funcții interesante ale platformei web, deoarece lucrez la un furnizor de browser și, prin urmare, tind să știu ce urmează. Dar dezvoltatorii împărtășesc adesea, sondaj după sondaj, că ține evidența lucrurilor noi este dificilă. Este dificil să rămâi informat, iar companiile nu acordă întotdeauna prioritate învățării. Pentru a vă ajuta în acest sens, iată câteva resurse care oferă actualizări în moduri simple și compacte, astfel încât să puteți obține rapid informațiile de care aveți nevoie:
Platforma web include site-ul explorator: S-ar putea să fiți interesat de pagina sa cu note de lansare. Și, dacă vă place RSS, consultați fluxul de note de lansare, precum și fluxurile de bază nou disponibile și disponibile pe scară largă.
Web-ulTabloul de bord privind starea platformei: S-ar putea să vă placă diferitele pagini ale anului de referință.
Pagina de parcurs pentru starea platformei Chrome.
Dacă aveți puțin mai mult timp, s-ar putea să fiți interesat și de notele de lansare ale furnizorilor de browser:
Chrome Edge Firefox Safari
Pentru și mai multe resurse, consultați Foaia mea de trucuri Navigare pe platforma web. Lucrul meu nu este încă implementat Asta e cealaltă parte a problemei. Chiar dacă găsești timpul, energia și modalitățile de a ține evidența, există totuși frustrare în a-ți face auzită vocea și în implementarea funcțiilor tale preferate. Poate că ați așteptat de ani de zile ca o anumită eroare să fie rezolvată sau o anumită caracteristică să fie livrată într-un browser unde încă lipsește. Ceea ce voi spune este că furnizorii de browsere ascultă. Fac parte din mai multe echipe între organizații în care discutăm semnalele dezvoltatorilor și feedback-ul tot timpul. Ne uităm la multe surse diferite de feedback, atât interne la fiecare furnizor de browser, cât și externe/publice pe forumuri, proiecte open source, bloguri și sondaje. Și, încercăm mereu să creăm modalități mai bune pentru dezvoltatori de a-și împărtăși nevoile specifice și cazurile de utilizare. Deci, dacă puteți, vă rugăm să cereți mai mult de la furnizorii de browsere și să ne faceți presiuni pentru a implementa funcțiile de care aveți nevoie. Înțeleg că este nevoie de timp și poate fi, de asemenea, intimidant (ca să nu mai vorbim de o barieră mare la intrare), dar funcționează și. Iată câteva moduri prin care vă puteți face auzită vocea (sau a companiei dvs.): luați sondajele anuale privind starea JS, starea CSS și starea HTML. Aceștia joacă un rol important în modul în care furnizorii de browsere își prioritizează munca. Dacă aveți nevoie de un anumit API bazat pe standard care să fie implementat în mod consecvent în toate browserele, luați în considerare trimiterea unei propuneri la următoarea iterație a proiectului Interop. Este nevoie de mai mult timp, dar luați în considerare modul în care Shopify și RUMvision și-au împărtășit listele de dorințe pentru Interop 2026. Informații detaliate ca aceasta pot fi foarte utile pentru ca furnizorii de browsere să le acorde prioritate. Pentru mai multe link-uri utile pentru a influența furnizorii de browsere, consultați Foaia mea de trucuri Navigare pe platforma web. Concluzie Pentru a încheia, sper că acest articol v-a lăsat cu câteva lucruri la care să vă gândiți:
Excitare pentru masonerie și alte funcții web viitoare. Câteva funcții web pe care poate doriți să începeți să le utilizați. Câteva bucăți de cod personalizat sau terță parte pe care le puteți elimina în favoarea funcțiilor încorporate. Câteva moduri de a urmări ceea ce urmează și de a influența furnizorii de browsere.
Mai important, sper că v-am convins de beneficiile utilizării platformei web la întregul său potențial.
