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

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

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

Larger hit area helps motor-impaired users activate a control
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

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.

Further Reading

Smashing Editorial (ah, mrn)