Web Development Reading List #144: CSP Mistakes, JS Debugging And Failure Testing

5 min read
Coding, Tools, Web Development Reading List
Share on Twitter, LinkedIn

About The Author

Anselm is a freelance front-end developer who cares about sustainable front-end experiences and ethical choices in life. He writes the WDRL, and is co-founder … More about Anselm ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

What’s going on in the industry? What new techniques have emerged recently? What insights, tools, tips and tricks is the web design community talking about? Anselm Hannemann is collecting everything that popped up over the last week in his web development reading list so that you don’t miss out on anything. The result is a carefully curated list of articles and resources that are worth taking a closer look at.

Every week is a learning week and this week I was reminded that viewport units are not all good to use. Also, choosing the right HTTP status code can be difficult and may not even be supported by the Apache version running on your server. I also learned how JavaScript error logging can be extended so that you can finally get easy-to-read and useful reports.

As if that wasn’t enough, I learned a lot about accessibility and progressive enhancement again, and discovered a slidedeck on how you can bypass CSP and why browsers can render elements with known boundaries as well as layout limitations incredibly faster than unknown. Are you ready? It’s now your turn to learn all of this as well.

Generic

These lovely flowcharts will help you decide which proper HTTP status code your application should respond with.

Tools & Workflows

WebPageTest is a great tool to test your website for performance issues. However, the tool can do much more than you possibly think. You can simulate a single point of failure (e.g. a 3rd party library timeout) with it, script logins for user-authenticated pages, and integrate it into your CI or run your own instance. Dean Hume has collected a couple of these tricks in his article.

Did you know that you can customize the way the waterfall chart appears in WebPageTest? Once you've run a test, click on the waterfall image and scroll down a little bit. You'll notice a link entitled "customize waterfall". (Image source)

Security

Content Security Policy [CSP] has great features but also brings its very own issues and risks. Michele Spagnuolo and Lukas Weichselbaum present most common problems, implementation mistakes, some bypasses and how to make CSP great again in their slide deck.

Web Performance

PerfTool by the devbridge people is a great npm package to display statistics about your web pages, including Google PageSpeed Insights score, resources count, recommendations how to fix performance issues, HTML errors and many more in one custom web page.

HTML & SVG

Sometimes designers oversimplify a form by removing the labels. The problem is that minimal does not always mean it’s simple — which is certainly the case for labels. Labels, in fact, are an essential part of designing easy-to-use forms.

Larger hit area helps motor-impaired users activate a control. (Image source)

Accessibility

Heydon Pickering is writing a book about “Inclusive Design Patterns” and you can pre-order it now. I’ve been able to get some insights already and am quite impressed by the different angles on semantics, progressive enhancement and accessibility in the book and can recommend it if you’re even sightly interested in these topics.
Heather Migliorisi wrote a huge compendium about creating accessible SVGs that you should definitely read if you use SVG files in your projects (and who doesn’t it?).

A cool SVG cat by Heather Migliorisi user="hmig"]See the Pen Simple Inline Accessible SVG Cat - using title and desc by Heather Migliorisi (@hmig) on CodePen.

A cool SVG cat by Heather Migliorisi user=“hmig”]See the Pen Simple Inline Accessible SVG Cat - using title and desc by Heather Migliorisi (@hmig) on CodePen.

JavaScript

Daniel Reis published a few practical console tricks that help you debugging your applications a lot easier. And if you want to go further, logerr is an experimental error helper library that can give you manys insights.

CSS/Sass

The CSS layout composition is often quite slow in browsers due to unknown behavior of the elements. Now, if you have an element which, for example, has an overflow: hidden set already and is opaque, you can help the browser to render way faster by supplying a CSS containment information. A similar optimization to will-change and likely only a temporary thing that we hopefully won’t need to use for too long or at all.
If you’re using vw or other viewport units for element sizing, always bear in mind that viewport-unit sized elements are not user-zoomable. You can try on your own with this demo. An alternative could be to use calc(1em + 0.25vw) or similar calculations that don’t entirely depend on viewport units and therefore are scalable.
Firefox 49 arrives next week and with it, ⁶⁄₈-digit alphatransparent-hex colors will be supported and therefore you should check your sites if you have any of such values by accident because they’ll suddenly be evaluated!

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation or share this resource with other people. You can learn more about the costs of the project here. It’s available via email, RSS and online.