Web Development Reading List #151: Microinteraction UX, Feature Policy, And Passport.js

In the last few years, I’ve seen a lot of code. As a freelancer working on multiple big projects with a lot of people, you’ll inevitably see all varieties of code styles. But I also realized how much writing JavaScript changed over the past years.

Having learned JavaScript before ES6 was there, a great mentor (Hans Christian Reinl¹) taught me the most important lesson: Always write clean, understandable code. Avoid ternary operators, declare variables in one place, make functions as simple as possible. Basically things that so many JavaScript style guides also advise. But with the growing adoption of ES6/ES2015, I also saw an increase of code where most of these principles (except for keeping functions small) are ignored.

I think it has something to do with the increased flexibility of ES6. A lot of developers probably think since arrow functions — which are shorter than a normal function — can be used, they should also write everything else in the shortest, smartest way. However, in my opinion and experience, this leads to a less maintainable codebase, one that’s hard to read for people who don’t work on it on a daily basis. Be smarter! By applying simplicity and not cleverness to your code.

News Link

• Carbide Alpha² is a new kind of programming environment which requires no installation/setup, has auto-import for npm and GitHub, and does some other crazy stuff. Just have a look at all the amazing features that are listed on the website.

Concept & Design Link

• Ali Torbati shares the process of reimagining Spokeo’s advanced search tools³. All about making a very complex interface as simple as possible.
• Little details are often important details. Nick Babich explores how animated microinteractions improve usability in mobile apps⁴.

⁵

Security Link

• Both the W3C and WICG (Web Incubator CG) share ideas on two new headers: Clear-Site-Data⁸ and Feature-Policy⁹. They both improve the security and privacy of users. While the first one can clean locally-stored objects, the latter declares features the browser is allowed to use within the origin, such as geolocation, cookies, and WebRTC. As a site-owner, you can use this to prevent a third-party from tracking your users.
• NIST’s new password rules¹⁰ say that text messages shouldn’t be used for two-factor authentication anymore. A huge progress that will hopefully lead to less crappy 2FA in the future.
• I recently shared an attack abusing target="_blank"¹¹ on pages where users can add custom URLs. To make clear how bad the attack is, Ben Halpern now shows how he made it work on Instagram¹² (they fixed it pretty fast). So remember to use rel="noopener" for any URL that you didn’t hard-code into the source.

¹³

Web Performance Link

• Eduardo Bouças explains how to use the WebPageTest API¹⁶ to improve your quality assurance process.

JavaScript Link

• The JavaScript library Grade.js¹⁷ produces complementary gradients generated from the top two dominant colors of an image.
• Brecht Billiet explains why you don’t always need a third-party component and illustrates this with an example of building a modal in Angular 2¹⁸.
• Passport.js¹⁹ is an authentication middleware for Node.js, supporting authentication via username and password, Facebook, Twitter, and many more.

Work & Life Link

• When dealing with clients, it’s important to ask the right questions²⁰. It’s your job to find out what the end user needs and to guide the client to what they want.

Going Beyond… Link

• We’ve been breaking global temperature records since ten months. And July was the hottest July on record²¹.
• You can now contribute to OpenStreetView²² with your phone. The aim of creating an open-source alternative to Google’s Streetview functionality is really promising and has already some locations covered²³. This is especially interesting in situations where people need fast updates — like in the case of the earthquake that stroke Italy this week and in which contributors updated all the maps in OpenStreetMap within a few hours.
• Xaddress²⁴ is an interesting idea of a universal address for every human on the world. It’s great to see the challenges of such systems and how we could solve them.
• This interview with Steven Pinker²⁵, psychology professor at Harvard University, explains why we think 2016 is the worst year ever. And next year will be the same. It’s a psychological issue since the news share only things that happened but not things that didn’t happen. If we look at the overall statistics of threats worldwide, we live in a safer and better world than ever before.

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.

— Anselm

Footnotes Link

1. 1 https://drublic.de/
2. 2 https://alpha.trycarbide.com/
3. 3 https://medium.com/@alitorbati/death-to-complexity-how-we-simplified-advanced-search-a9ab2940acf0
4. 4 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
5. 5 https://medium.com/@alitorbati/death-to-complexity-how-we-simplified-advanced-search-a9ab2940acf0
6. 6 https://medium.com/@alitorbati/death-to-complexity-how-we-simplified-advanced-search-a9ab2940acf0
7. 7 https://medium.com/@alitorbati/death-to-complexity-how-we-simplified-advanced-search-a9ab2940acf0
8. 8 https://www.w3.org/TR/clear-site-data/
9. 9 https://wicg.github.io/feature-policy/
10. 10 https://nakedsecurity.sophos.com/2016/08/18/nists-new-password-rules-what-you-need-to-know/
11. 11 https://wdrl.info/archive/129/977fcb771e018ba5f347e68a1ab515878c5bebb2
12. 12 https://dev.to/ben/the-targetblank-vulnerability-by-example
13. 13 https://nakedsecurity.sophos.com/2016/08/18/nists-new-password-rules-what-you-need-to-know/
14. 14 https://nakedsecurity.sophos.com/2016/08/18/nists-new-password-rules-what-you-need-to-know/
15. 15 https://nakedsecurity.sophos.com/2016/08/18/nists-new-password-rules-what-you-need-to-know/
16. 16 https://css-tricks.com/use-webpagetest-api/
17. 17 http://benhowdle.im/grade/
18. 18 http://blog.brecht.io/Modals-in-angular2/
19. 19 http://www.passportjs.org/
20. 20 http://alistapart.com/article/why-arent-you-asking-questions
21. 21 http://www.slate.com/blogs/bad_astronomy/2016/08/16/july_2016_was_the_hottest_july_on_record.html
22. 22 https://www.openstreetmap.org/user/mvexel/diary/39274
23. 23 http://openstreetview.org/map/@36.77409249464195,-122.83126831054686,8z
24. 24 http://xaddress.org/
25. 25 http://www.vox.com/2016/8/16/12486586/2016-worst-year-ever-violence-trump-terrorism
26. 26 https://wdrl.info/donate
27. 27 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook