Actualizare lunară pentru dezvoltare web 7⁄2018: accesibilitate practică, greșeli de proiectare și control al caracteristicilor

Publicat: 2022-03-10

Rezumat rapid ↬ Să fii la curent cu cele mai recente tehnici, actualizări ale browserului și subiecte fierbinți poate fi o provocare. În fiecare lună, Anselm rezumă ceea ce se întâmplă în industria web, astfel încât să puteți prinde cu ușurință tot ce este nou și important.

Web-ul continuă să mă uimească. Cu toată varietatea și diferitele modificări ale platformei, este greu să vezi un model drept - dacă chiar există (doar) unul. Dar este minunat să vezi ce se schimbă, ce caracteristici sunt adăugate platformei, care sunt depreciate și cum browserele implementează din ce în ce mai multă tehnologie pentru a proteja utilizatorul de atacurile malițioase ale site-urilor web. Este interesant de observat că aceste funcții de securitate primesc în prezent la fel de multă atenție ca și o caracteristică pentru dezvoltatori; acest lucru arată importanța confidențialității și securității și cât de instabil și nesigur a fost web-ul în trecut.

Dar cel mai bun lucru în toate acestea este că arată cât de important este să rămânem la lucrurile pe care ni le oferă oamenii. În loc să implementăm propriile soluții pentru orice, este adesea mult mai bine să reutilizam un sistem existent. Nu numai că este mai sigur să te bazezi, ci și mai puțină muncă, în timp ce este mai incluziv să extinzi un element DOM nativ cu un element personalizat (în loc să scriem propriul element personalizat de la zero). Dacă ne gândim dacă ar trebui să construim propria noastră versiune de SSL sau să folosim un software existent pentru aceasta, de ce am construi un element pe care se poate face clic pe baza nimic, în loc să modificăm comportamentul unui element a sau button ? Și de ce am verifica singuri validarea gazdei resurselor, dacă browserul ne oferă deja un API pentru asta? Articolele din această săptămână sunt toate dedicate acestor subiecte.

Un alt lucru care mi-a rămas blocat în cap este articolul lui Andrea Giammarchi, „A Bloatless Web”, în care el descrie modul în care folosim orbește Babel ca dezvoltatori atunci când scriem JavaScript pentru a putea scrie ECMAScript modern. Dar, de obicei, nu realizăm că transpilarea întregului cod al nostru modern în browserele moderne nu este cea mai eficientă modalitate. Mă bucur că Andrea oferă câteva idei despre cum putem îmbunătăți această situație și îmbunătăți performanța aplicațiilor noastre web. Nu ar fi uimitor să servim doar o treime din dimensiunea pachetului, fără a mai transpila codul pentru fiecare browser?

Știri

Izolarea site-ului îngreunează efectiv accesul sau furtul informațiilor din conturile dvs. de pe alte site-uri web pentru site-urile web neîncrezătoare. Chrome 67 este acum livrat împreună cu acesta și Cross-Origin Read Blocking (CORB) nu se va mai încărca, de exemplu, un fișier JSON ca imagine. Dar și mai mult, aceste modificări înseamnă că nu mai este garantat că aspectul pe toată pagina este sincron. Această nouă funcție vă afectează dacă citiți dimensiunile calculate dintr-un element din JavaScript sau folosiți ascultătorii de evenimente de unload . Asigurați-vă că știți despre acest lucru și verificați dacă site-urile dvs. funcționează în continuare conform așteptărilor.
Până acum, știm puțin despre Politicile de securitate a conținutului - o caracteristică care le permite dezvoltatorilor să limiteze încărcarea anumitor resurse după numele de gazdă. Dar furnizorii de browsere au venit cu ceva nou acum: Politica caracteristicilor. Acest lucru le permite dezvoltatorilor web să activeze, să dezactiveze sau să modifice în mod selectiv comportamentul anumitor API-uri și funcții web din browser. Este ca CSP, dar în loc să controleze securitatea, acesta controlează funcțiile și Eric Bidelman a scris o introducere la Politica caracteristicilor explicând totul.
Echipa de browser Brave își arată cea mai recentă caracteristică pentru a proteja confidențialitatea utilizatorilor: file care se conectează prin rețeaua Tor.

Mai multe după săritură! Continuați să citiți mai jos ↓

Generic

Anton Sten întreabă dacă valorile sectorului tehnologic sunt încălcate? Analizând strategiile de marketing ale Apple, Microsoft, Google, Amazon, dar și ale altor companii mici și cum putem face o muncă cu adevărat intenționată și ne rămânem la valorile noastre în loc să le tratăm ca pe un material de marketing pe care nu trebuie să-l respectăm sau de care nu trebuie să ne ținem.
Acum, că sectorul tehnologic al lumii transformă rapid toate lucrurile lumii în lucruri digitale, mulți au cerut mai multă etică în domeniul nostru. Acesta este în multe cazuri un obiectiv destul de vag, așa că să-l aplicăm unei părți a digitalului: dezvoltarea front-end. Cum putem fi mai etici ca dezvoltatori front-end, ce fel de lucruri putem face? Hidde de Vries a scris un articol despre asta.

Securitate

Datele clienților Ticketmaster au fost compromise și, după cum pare, se datorează unei singure linii de cod personalizate care include un script terță parte.

UI/UX

Eugen Esanu arată zece mici greșeli de design pe care le mai facem și ce putem face în schimb pentru a face designul nostru mai ușor de utilizat.

ceea ce proiectăm vs. ceea ce are nevoie un utilizator — Utilizatorii nu au timp să citească mai mult decât este necesar și totuși designerii tind să pună mult text, deoarece cred că oamenii trebuie să știe asta. (Sursa imagine)

Confidențialitate

Acesta este un raport interesant despre modul în care Google permite dezvoltatorilor externi de aplicații să citească e-mailurile Google ale oamenilor atunci când acordă permisiunea în timpul autorizării aplicației. Problema cu aceasta este că nu există nicio modalitate de a preveni cu ușurință acest lucru și ar putea avea un impact destul de mare dacă utilizați Gmail pentru compania dvs., deoarece ar putea afecta politicile de confidențialitate și face obiectul GDPR.

Performanța web

Max Bock despre cum putem construi componente care reacționează la viteza reală de conectare a dispozitivului folosind API-ul pentru informații de rețea. Și, în ciuda faptului că este disponibil în prezent doar în browserele de internet Chrome și Samsung, merită să îl încercați și poate îl serviți deja acestor utilizatori.
Din când în când, mai putem citi articole care menționează importanța optimizării selectoarelor CSS pentru a îmbunătăți performanța. Acest lucru provine din cercetările făcute cu câțiva ani în urmă, dar Ivan Curic a cercetat din nou acest lucru și a descoperit că nu contează.

Accesibilitate

Echipa de dezvoltatori Microsoft împărtășește un playlist video despre accesibilitatea practică, inclusiv cum să optimizați prezentările sau limbajul pentru includere sau cum să construiți o funcționalitate adecvată de „săriți navigarea” pe site-ul dvs. web.
Sara Novak povestește cum a reușit să demonstreze empatie experimentând cu devenirea daltonică pentru a înțelege modul în care alți oameni experimentează lumea diferit.
Instrumentele pentru dezvoltatori din Firefox au acum un mod Inspector de accesibilitate . Iată cum să îl activați și cum să îl utilizați.

Un formular cu indicatori bazați pe culoare — În articolul ei, Sara Novak explică de ce este important să nu te bazezi doar pe culoare ca indicator. Simbolurile și mesajele de eroare pot fi mult mai utile pentru utilizatori. (Imaginea de mai sus arată o formă cu indicatori bazați pe culoare. Stânga: Cum o persoană cu vedere normală vede o formă cu indicatori bazați pe culoare. Dreapta: Cum o persoană deuteranomală vede aceeași formă.) (Sursa imagine)

JavaScript

Leon Revill ne arată cum putem extinde elementele DOM native existente cu componente web. Acest lucru este extrem de util și util, deoarece nu numai că putem economisi mult timp utilizând șabloane prefabricate pentru elemente personalizate, ci și obținem gratuit toate optimizările și setările implicite (semantică, accesibilitate, funcționalitatea browserului) și încă ne putem construi propriul comportament deasupra. din ea. Cel puțin, dacă am putea folosi Elementele personalizate, dar asta este o altă poveste.
Gerardo Rodriguez arată cum putem eșua cu ușurință în optimizarea site-urilor web pentru performanță cu Service Workers și API-ul Fetch și cum acest lucru poate duce la o excepție de cotă în browsere. Din fericire, a aflat motivul acestui lucru și, setând anteturile CORS adecvate, Gerardo a rezolvat în cele din urmă misterul răspunsurilor opace cu un singur cache și ne-a spus cum să evităm problemele.
Filepond este un bun program de încărcare de fișiere JavaScript open-source. Rik Schennink împărtășește provocările cu care se confruntă construirea acestuia.
Andrea Giammarchi despre problema grupării JavaScript cu Babel și de ce transpilarea codului nu mai este cea mai bună soluție. În schimb, ar trebui să ne gândim cum să oferim pachete diferite, în funcție de suportul browserului, pentru a reduce dimensiunea pachetului și a îmbunătăți performanța.
Justin Fuller împărtășește trei funcții noi grozave care vor veni în curând în JavaScript, care ne vor ajuta să scriem cod mai ușor de înțeles, cum ar fi înlănțuirea operațională, coalescerea nulă sau operatorul conductei.
Addy Osmani și Mathias Bynens au scris o introducere introductivă despre cum putem folosi modulele JavaScript pe web astăzi.

CSS

O serie de articole care acoperă cum putem falsifica o grilă de plasare automată cu lacune în Internet Explorer.
CSS Grid este drăguț, dar aud adesea că oamenii nu îl pot folosi deoarece IE11 nu îl acceptă bine. Dar asta nu este chiar adevărat, deoarece IE11 are o versiune anterioară a CSS Grid disponibilă pe care o putem transpila cu ușurință cu autoprefixer. Daniel Tonon explică diferențele CSS Grid și ce caracteristici putem și nu putem folosi și va continua cu și mai multe sfaturi.
Pentru mulți oameni, CSS Grid este încă foarte nou și este foarte capabil și ne ajută să rezolvăm o mulțime de probleme atunci când creăm layout-uri bazate pe grilă în CSS. Dar în versiunea actuală, există câteva lucruri care încă nu sunt posibile. Grila CSS Nivelul 2 ne va aduce sub-grile, iar Rachel Andrew explică pentru ce aveți nevoie de ele.
CSS-in-JS este bun? Este doar rău? De ce cădem constant în capcana de a ne certăm când nu există învingători clari și cum ne putem descurca mai bine recunoscând evoluția și văzând lucrurile în context.

Muncă și viață

De ce conceptul de răbdare și străduința de a construi ceva care să dureze ar trebui să câștige mai multă atenție în afaceri. Câteva gânduri care mi-au venit în minte când am citit un alt articol și se pare că multor oameni le place ideea din spatele acestui lucru.
Ethan Marcotte despre cum abordează el să aleagă clienții și de ce crede că este important să aleagă doar clienții pe care îi puteți susține etic. Dar acest lucru arată și cât de dificil poate fi uneori, așa cum arată discuțiile recente despre cooperările de afaceri ale Microsoft cu entitățile juridice.