Leseliste Nr. 144 für die Webentwicklung: CSP-Fehler, JS-Debugging und Fehlertests

Jede Woche ist eine Lernwoche und diese Woche wurde ich daran erinnert, dass Viewport-Einheiten nicht alle gut zu verwenden sind. Auch die Auswahl des richtigen HTTP-Statuscodes kann schwierig sein und wird möglicherweise nicht einmal von der Apache-Version unterstützt, die auf Ihrem Server ausgeführt wird. Ich habe auch gelernt, wie die JavaScript-Fehlerprotokollierung erweitert werden kann, sodass Sie endlich einfach zu lesende und nützliche Berichte erhalten.

Als ob das nicht genug wäre, habe ich noch einmal viel über Zugänglichkeit und progressive Verbesserung gelernt und eine Präsentation darüber entdeckt, wie Sie CSP umgehen können und warum Browser Elemente mit bekannten Grenzen sowie Layoutbeschränkungen unglaublich schneller als unbekannt rendern können. Sind Sie bereit? Jetzt sind auch Sie an der Reihe, all dies zu lernen.

Weiterführende Literatur zu SmashingMag:

• Designfehler bei iPhone-Apps: Übertriebene Optik
• Geschichte einer Top-10-App, Teil 1: Idee und Design
• Wie Sie mit Ihrer mobilen App erfolgreich sind
• Die Bausteine ​​von Progressive Web Apps

Generisch

• Diese schönen Flussdiagramme helfen Ihnen bei der Entscheidung, mit welchem ​​richtigen HTTP-Statuscode Ihre Anwendung antworten soll.

Tools & Arbeitsabläufe

• WebPageTest ist ein großartiges Tool, um Ihre Website auf Leistungsprobleme zu testen. Das Tool kann jedoch viel mehr, als Sie vielleicht denken. Sie können damit einen Single Point of Failure simulieren (z. B. ein Timeout einer Bibliothek eines Drittanbieters), Skript-Logins für benutzerauthentifizierte Seiten erstellen und es in Ihr CI integrieren oder Ihre eigene Instanz ausführen. Dean Hume hat ein paar dieser Tricks in seinem Artikel gesammelt.
  

Sicherheit

• Die Content Security Policy [CSP] hat großartige Funktionen, bringt aber auch ihre ganz eigenen Probleme und Risiken mit sich. Michele Spagnuolo und Lukas Weichselbaum präsentieren in ihrem Slide-Deck die häufigsten Probleme, Implementierungsfehler, einige Umgehungen und wie man CSP wieder großartig macht.
  

Webleistung

• PerfTool von den Devbridge-Leuten ist ein großartiges npm-Paket zum Anzeigen von Statistiken über Ihre Webseiten, einschließlich Google PageSpeed ​​Insights-Punktzahl, Ressourcenanzahl, Empfehlungen zur Behebung von Leistungsproblemen, HTML-Fehlern und vielem mehr auf einer benutzerdefinierten Webseite.

HTML und SVG

• Manchmal vereinfachen Designer ein Formular zu sehr, indem sie die Beschriftungen entfernen. Das Problem ist, dass minimal nicht immer einfach bedeutet – was bei Etiketten sicherlich der Fall ist. Etiketten sind in der Tat ein wesentlicher Bestandteil beim Entwerfen benutzerfreundlicher Formulare.

Barrierefreiheit

• Heydon Pickering schreibt ein Buch über „Inclusive Design Patterns“ und Sie können es jetzt vorbestellen. Ich konnte mir bereits einige Einblicke verschaffen und bin ziemlich beeindruckt von den verschiedenen Blickwinkeln auf Semantik, progressive Erweiterung und Zugänglichkeit in dem Buch und kann es empfehlen, wenn Sie sich auch nur ansatzweise für diese Themen interessieren.
• Heather Migliorisi hat ein riesiges Kompendium über das Erstellen barrierefreier SVGs geschrieben, das Sie unbedingt lesen sollten, wenn Sie SVG-Dateien in Ihren Projekten verwenden (und wer tut das nicht?).

JavaScript

• Daniel Reis hat ein paar praktische Konsolentricks veröffentlicht, die Ihnen das Debuggen Ihrer Anwendungen erheblich erleichtern. Und wenn Sie noch weiter gehen möchten, logerr ist eine experimentelle Fehlerhilfsbibliothek, die Ihnen viele Einblicke geben kann.

CSS/Sass

• Die CSS-Layout-Komposition ist in Browsern aufgrund unbekannten Verhaltens der Elemente oft recht langsam. Wenn Sie nun ein Element haben, das beispielsweise einen overflow: hidden -Satz bereits hat und undurchsichtig ist, können Sie dem Browser helfen, viel schneller zu rendern, indem Sie eine CSS-Containment-Information bereitstellen. Eine ähnliche Optimierung wie will-change und wahrscheinlich nur eine vorübergehende Sache, die wir hoffentlich nicht zu lange oder überhaupt nicht verwenden müssen.
• Wenn Sie vw oder andere Ansichtsfenstereinheiten für die Elementgröße verwenden, denken Sie immer daran, dass Elemente in Ansichtsfenstereinheitsgröße nicht vom Benutzer gezoomt werden können. Mit dieser Demo können Sie es selbst ausprobieren. Eine Alternative könnte die Verwendung calc(1em + 0.25vw) oder ähnlichen Berechnungen sein, die nicht vollständig von Viewport-Einheiten abhängen und daher skalierbar sind.
• Firefox 49 kommt nächste Woche und damit werden ⁶ ⁄ ₈ -stellige alphatransparente Hex-Farben unterstützt und deshalb sollten Sie Ihre Seiten überprüfen, ob Sie zufällig solche Werte haben, weil sie plötzlich ausgewertet werden!

Und damit schließe ich für diese Woche. Wenn Ihnen gefällt, was ich jede Woche schreibe, unterstützen Sie mich bitte mit einer Spende oder teilen Sie diese Ressource mit anderen Menschen. Mehr zu den Kosten des Projekts erfahren Sie hier. Es ist per E-Mail, RSS und online verfügbar.