Lista de citire pentru dezvoltare web #144: Greșeli CSP, depanare JS și testare a erorilor

Fiecare săptămână este o săptămână de învățare și săptămâna aceasta mi s-a reamintit că unitățile de vizualizare nu sunt toate bune de utilizat. De asemenea, alegerea corectă a codului de stare HTTP poate fi dificilă și poate să nu fie nici măcar acceptată de versiunea Apache care rulează pe serverul dumneavoastră. De asemenea, am învățat cum poate fi extinsă înregistrarea erorilor JavaScript, astfel încât să puteți obține în sfârșit rapoarte utile și ușor de citit.

De parcă asta nu ar fi fost suficient, am învățat din nou multe despre accesibilitate și îmbunătățirea progresivă și am descoperit un slidedeck despre cum puteți ocoli CSP și de ce browserele pot reda elemente cu limite cunoscute, precum și cu limitări de aspect, incredibil mai rapid decât necunoscut. Sunteți gata? Acum este rândul tău să înveți și toate acestea.

Citiți suplimentare despre SmashingMag:

• Greșeli de proiectare a aplicațiilor pentru iPhone: imagini exagerate
• Povestea unei aplicații de top 10, partea 1: idee și design
• Cum să reușești cu aplicația ta mobilă
• Elementele de bază ale aplicațiilor web progresive

Generic

• Aceste diagrame minunate vă vor ajuta să decideți cu ce cod de stare HTTP adecvat ar trebui să răspundă aplicația dvs.

Instrumente și fluxuri de lucru

• WebPageTest este un instrument excelent pentru a testa site-ul dvs. pentru probleme de performanță. Cu toate acestea, instrumentul poate face mult mai mult decât credeți. Puteți simula un singur punct de eșec (de exemplu, un timeout de bibliotecă terță parte) cu acesta, puteți să scriptați autentificări pentru paginile autentificate de utilizator și să îl integrați în CI sau să rulați propria instanță. Dean Hume a adunat câteva dintre aceste trucuri în articolul său.
  

Securitate

• Politica de securitate a conținutului [CSP] are caracteristici excelente, dar aduce și propriile probleme și riscuri. Michele Spagnuolo și Lukas Weichselbaum prezintă cele mai comune probleme, greșeli de implementare, unele ocoliri și cum să facă CSP din nou grozav în pachetul lor de diapozitive.
  

Performanța web

• PerfTool de la devbridge people este un pachet npm excelent pentru a afișa statistici despre paginile dvs. web, inclusiv scorul Google PageSpeed ​​Insights, numărul de resurse, recomandări despre cum să remediați problemele de performanță, erori HTML și multe altele într-o singură pagină web personalizată.

HTML și SVG

• Uneori, designerii simplifică prea mult un formular eliminând etichetele. Problema este că minimal nu înseamnă întotdeauna că este simplu - ceea ce este cu siguranță cazul etichetelor. Etichetele, de fapt, sunt o parte esențială a proiectării formularelor ușor de utilizat.

Accesibilitate

• Heydon Pickering scrie o carte despre „Modele de design inclusive” și o puteți precomanda acum. Am reușit să obțin deja câteva informații și sunt destul de impresionat de diferitele unghiuri ale semanticii, îmbunătățirii progresive și accesibilității din carte și o pot recomanda dacă sunteți chiar ușor interesat de aceste subiecte.
• Heather Migliorisi a scris un compendiu imens despre crearea de SVG-uri accesibile pe care ar trebui să le citiți cu siguranță dacă utilizați fișiere SVG în proiectele dvs. (și cine nu le face?).

JavaScript

• Daniel Reis a publicat câteva trucuri practice pentru consolă care vă ajută să vă depanați mult mai ușor aplicațiile. Și dacă doriți să mergeți mai departe, logerr este o bibliotecă experimentală de ajutor pentru erori care vă poate oferi multe perspective.

CSS/Sass

• Compoziția aspectului CSS este adesea destul de lentă în browsere din cauza comportamentului necunoscut al elementelor. Acum, dacă aveți un element care, de exemplu, are un overflow: hidden și este opac, puteți ajuta browserul să redea mult mai rapid furnizând informații de reținere CSS. O optimizare similară will-change și probabil doar un lucru temporar pe care sperăm că nu va trebui să-l folosim prea mult timp sau deloc.
• Dacă utilizați vw sau alte unități de vizualizare pentru dimensionarea elementelor, rețineți întotdeauna că elementele cu dimensiunea unității de vizualizare nu pot fi mărite de utilizator. Puteți încerca pe cont propriu cu acest demo. O alternativă ar putea fi utilizarea calc(1em + 0.25vw) sau similare care nu depind în totalitate de unitățile de vizualizare și, prin urmare, sunt scalabile.
• Firefox 49 sosește săptămâna viitoare și, odată cu el, vor fi acceptate culorile alphatransparent-hex de ⁶ ⁄ ₈ cifre și, prin urmare, ar trebui să verificați site-urile dvs. dacă aveți vreuna dintre astfel de valori din întâmplare, deoarece acestea vor fi brusc evaluate!

Și cu asta, voi închide săptămâna asta. Dacă vă place ceea ce scriu în fiecare săptămână, vă rugăm să mă susțineți cu o donație sau să împărtășiți această resursă cu alte persoane. Puteți afla mai multe despre costurile proiectului aici. Este disponibil prin e-mail, RSS și online.