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

Web Development Reading List #129: CSRF, Modern Tooling And The UX Of Web Fonts

Quick Summary

Every week I learn so many new things about front-end development. By building various kinds of projects, by talking to other developers, by reading new articles. Of course, it can be overwhelming, but to me this is the best part of the job. By sharing and talking to other people, my job gets more interesting. For example, this week I learned how to build malicious links with target="_blank", I learned how CSRF works, and how important it is that an icon clearly indicates what it is thought for — the latter after I implemented the icons and only found some of them helpful as I saw the fallback/title text for them. Always stay curious.

Table of Contents
Membership counter

Members support Smashing

Wonderful, friendly people who keep this lil' site alive — and get smarter every day.

Are you smashing, too? →

Every week I learn so many new things about front-end development. By building various kinds of projects, by talking to other developers, by reading new articles. Of course, it can be overwhelming, but to me this is the best part of the job. By sharing and talking to other people, my job gets more interesting.

For example, this week I learned how to build malicious links with target=”_blank”, I learned how CSRF works, and how important it is that an icon clearly indicates what it is thought for — the latter after I implemented the icons and only found some of them helpful as I saw the fallback/title text for them. Always stay curious.

Further Reading on SmashingMag:

News

  • What’s new in Chromium 49 and Opera 36? They support ES6 default function parameter values, ES6 destructuring assignment, ES6 Proxy and Reflect, CSS custom properties, "a rel=noopener" (see article in the security section), and many things more.

General

Tools

Security

  • If you run git on a server, if you use git, please update your software clients immediately. An exploit has been published that allows remote code execution in all versions up to 2.7.4 (the version containing the fix).
  • How target="_blank" can be abused to serve malicious links is shown in this demo by Mathias Bynens.
  • Mozilla implemented a new block-all-mixed-content CSP directive that lets websites opt in to hard-fail on mixed content (it won’t be shown and no warning will be triggered).
  • Do you know how a cross-site request forgery (CSRF) works? There is now an infographic that visually explains how CSRF works.
Infographic explaining CSRF
Cross-site request forgery (CSRF) visually explained. (Image credit: Barricade)

Privacy

  • What happens when a surveillance state becomes an affordable gadget? Maybe it doesn’t faze you that your local police has a $400,000 device that listens in on cell phones. But how do you feel when your neighbor has a $1,500 version? In most countries it’s illegal to buy such devices, however, a recent study revealed that anyone can buy one very easily nonetheless.

HTML/SVG

  • If you use React, it’s relatively easy to implement an SVG icon system with the <use> element. But Sarah Drasner found an even better way that uses React’s core principles of a virtual DOM.

Accessibility

  • Rodney Rehm published the first big update to his amazing accessibility library ally.js. Version 1.1 has completely rewritten tests, supports way more browsers, and is even more reliable to handle focus states on your web application. And finally, you can also learn a lot about how to maintain an open-source project — just look at the incredibly detailed release notes or at the test suite that’s behind it.

JavaScript

CSS/Sass

  • Toggling passwords is considered a great UX pattern for users. On the other hand, there are some risks and challenges that you should know of. Avoid caching of the passwords and disabling autofill managers by following this short article.
  • Adam Morse shares his experience with user testing web projects and sums up what he thinks about using web fonts in the context of providing a good user experience. I have to admit that while it can be cool and necessary to use a web font, it often doesn’t have to be. A lot of projects don’t care about using a proper fallback font that matches the web font — and these days, with content and privacy blockers available for every device, there are a lot of people not seeing any web fonts at all.

Work & Life

  • Casey Gerald gave a great talk at this year’s SXSW questioning the traditional approach of doing work and also asking the question “With all the power we hold in our hands, why are people still suffering?”
  • One year after being fired, Zach Holman wrote up his knowledge on firing people. A great read for both employees and employers.
  • “Most offices are the average of what works for everyone,” says Mike Del Ponte who believes that companies should offer employees the best of both worlds — working remote and on-site — and give them the choice of both. We’ve already seen a lot of such articles but what I found particularly interesting here is that the article is talking about benefits of on-site work as well as remote work and puts both into perspective.

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.

Thanks and all the best, Anselm