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


Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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 Reinl1) 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 Alpha2 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

Spokeo navigation5
Spokeo declared death to complexity and simplified their advanced search6. (Image credit: Ali Torbati7)

Security Link

  • Both the W3C and WICG (Web Incubator CG) share ideas on two new headers: Clear-Site-Data8 and Feature-Policy9. 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 rules10 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"11 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 Instagram12 (they fixed it pretty fast). So remember to use rel="noopener" for any URL that you didn’t hard-code into the source.
New password rules13
The United States National Institute for Standards and Technology (NIST) formulated new guidelines for password policies14 to be used in the US government. (Image credit: Naked Security15)

Web Performance Link

JavaScript Link

  • The JavaScript library Grade.js17 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 218.
  • Passport.js19 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 questions20. 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 record21.
  • You can now contribute to OpenStreetView22 with your phone. The aim of creating an open-source alternative to Google’s Streetview functionality is really promising and has already some locations covered23. 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.
  • Xaddress24 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 Pinker25, 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 donation26 or share this resource with other people. You can learn more about the costs of the project here27. It’s available via email, RSS and online.

— Anselm

  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 top

Tweet itShare on Facebook


Source link

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar