Web Development Reading List #142: Contextual Identities, Form Hints, And ApplePay.js

Web Development Reading List #142: Contextual Identities, Form Hints, And ApplePay.js


Today will be a day in history regardless of what happens over the next weeks. The majority of people in the UK voted to leave the EU, and this made clear once again that many people in our society think the current situation is no longer acceptable. Unfortunately, we think blaming those people is the solution, but, as we see, it isn’t. Instead, we should focus on teaching people about the root causes of problems, and we should refrain from posting everything right away.

In other news, I’m back from vacation to bring you new articles to read. And I realized one thing: While mountaineering holds real risks and dangers, working on websites mostly does not. Of course, the security of our websites should be a top priority, but even if we fail, if a website is down for a few minutes, if we screwed up the layout on some devices, you won’t be dead. We have the opportunity to improve our work by making mistakes and fixing them.

News Link

  • Safari 10 has been announced1 at WWDC, and it has some great new features: IndexedDB support, CSP 2.0, Shadow DOM 1, complete ES6/ES2015 support, ES internationalization API support, inline and auto video playback on iOS, Picture in Picture on OS X, and WOFF2 support as well as font loading support (yay!). In CSS we now have object-position for the already available object-fit property and clipping using SVG paths. Last but not least, from now on, even if user-scalable=no is set as viewport rule, users will be able to pinch-and-zoom2.

Concept & Design Link

  • Mozilla introduced a new way to differentiate between life contexts in your browser3. You can now open a “work” or a “banking” tab, each created in its own context so that you can login to different Twitter accounts in one browser window, for example. This is an interesting concept, especially since the workflow is pretty well thought out already, making the browser experience way better.
Contextual identities in Firefox Nightly5 enable users to open tabs in different contexts — Personal, Work, Banking, Shopping — and segregates site data for improved privacy and security. (Image credit: Mozilla6)

Tools & Workflows Link

  • This week, Adobe presented a new beta of their code editor Dreamweaver. I had a look at it, and am pretty impressed7 that they managed to turn the tide and make it an appealing, modern editor for professional coders again. I’m curious what the open feedback will bring to the final product in the future.

Security Link

  • CIA director John Brennan is a pretty confident man. He recently told US senators to not worry about mandatory encryption backdoors hurting American businesses8, simply because there are no non-US products that are successful. Unfortunately, he’s right. There aren’t a lot of products that aren’t US-based, and that’s all the CIA wants, as it’s enough to tap on most traffic which comes from Facebook, Google, Microsoft, Apple, and Yahoo anyways.

Privacy Link

  • “Starting with iOS 10, Apple is using Differential Privacy technology to help discover the usage patterns of a large number of users without compromising individual privacy.” Matthew Green comments on this new technology9 and tries to find out the advantages, disadvantages and implications of it.
  • Facebook wants to prove that its ads lead to actual purchases. That’s why Facebook advertisers can now add their physical store locations, and Facebook will then track users by their phone locations and report if they have visited the store. Of course, Facebook is not the first company doing that: Google folks are proud of having done the same already for quite some time10. I’m glad I don’t have apps of these brands on my phone anymore.
  • Archive.org — the project that saves our online history every day. A project that we all love since it can recover sites that don’t even exist anymore, right? Well, it seems not everyone is happy about it, and Brewster Kahle explains the problems they face: While trying to protect the privacy of their users, they face massive DDoS attacks and are blocked by various restrictive countries. Now they share why routing the DNS via Cloudflare isn’t an option11 and why they rely on our donations to run the project.


Accessibility Link

Modal window on an e-commerce site18
Modals are usually an accessibility bottleneck. Rob Dodson explains how we can improve them19. (Image credit: Rob Dodson20)

JavaScript Link

  • AOS21 is a CSS-driven on-scroll animation library that gives the user full control over styling.
  • You can now start implementing Apple Pay into your website by using the company’s ApplePay JavaScript framework22. It’s interesting that Google and Apple both heavily work on getting their payment systems directly into the browser. Unfortunately, but also usual for Apple, they don’t follow a web standard such as the Web Payment API23 here but provide only their own ecosystem.

CSS/Sass Link

  • In his CodePen demo, Jonathan Neal shares how to make a decorative text underline with box-shadow24 that weaves between text descenders and preserves the text color.
  • Client-side form validation is hard, we all know that. But thanks to the browsers’ internal validation API, we can display very clever messages telling the user what went wrong. This article shows how to do that effectively25 and even offers a boilerplate.
  • Often we don’t use the full potential of CSS for form validation UX26. Chris Coyier shares some CSS trickery to get it right.

Going beyond… Link

  • It’s not surprising that big data companies like Google are no opponents of CETA or TPP/TTIP. What’s more surprising is that Google now takes a firm stand on supporting TPP27. With bloodcurdling logic they argument why it would be a step forward for the internet: “But Internet restrictions — like censorship, site-blocking, and forced local storage of data — threaten the Internet’s open architecture.” None of these issues would disappear with TPP except for local storage (which is a feature that the EU finally enforced last year in its fight to protect users’ privacy). TPP instead enforces copyright protections, can do nothing to prevent non-TPP-partners from blocking parts of the internet, and actually does a lot of harm to existing privacy, to existing laws and to countries’ courts as it gives companies the possibility to bring matters to arbitral courts — a fact that helps corrupt, capitalistic companies gain more power while normal citizens are at a disadvantage. You can see how much influence private companies already have on politicians in the excellent Netflix series “House of Cards28”.
  • I already linked to NASA’s “Mars Explorers Wanted” posters recently, but now they added new ones29 for you to download. Still very nice examples on how to design beautiful, unique posters.

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

— Anselm

Footnotes Link

  1. 1 https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
  2. 2 https://twitter.com/thomasfuchs/status/742531231007559680
  3. 3 https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/
  4. 4 https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/
  5. 5 https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/
  6. 6 https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/
  7. 7 https://medium.com/@helloanselm/dreamweaver-is-back-for-us-coders-2a1be75ae595
  8. 8 http://www.theregister.co.uk/2016/06/17/non_us_encryption_is_theoretical_claims_cia/
  9. 9 http://blog.cryptographyengineering.com/2016/06/what-is-differential-privacy.html
  10. 10 https://twitter.com/Speroman/status/742792033358647297
  11. 11 https://blog.archive.org/2016/06/16/geez-now-internet-insurance/0
  12. 12 https://lmjabreu.com/post/ios-8-privacy-updates/#safari-keychain-improvements
  13. 13 https://twitter.com/rem/status/744928019605766144
  14. 14 https://html.spec.whatwg.org/multipage/forms.html#autofill
  15. 15 https://www.paciellogroup.com/blog/2016/06/using-the-html-lang-attribute/
  16. 16 http://robdodson.me/building-better-accessibility-primitives/
  17. 17 https://www.udacity.com/course/web-accessibility–ud891
  18. 18 http://robdodson.me/building-better-accessibility-primitives/
  19. 19 http://robdodson.me/building-better-accessibility-primitives/
  20. 20 http://robdodson.me/building-better-accessibility-primitives/
  21. 21 https://css-tricks.com/aos-css-driven-scroll-animation-library/
  22. 22 https://developer.apple.com/reference/applepayjs
  23. 23 https://www.w3.org/blog/wpwg/2016/03/04/fpwd/
  24. 24 https://codepen.io/jonneal/pen/PzGYEE?editors=0100
  25. 25 https://bitsofco.de/form-validation-techniques/
  26. 26 https://css-tricks.com/form-validation-ux-html-css/
  27. 27 https://publicpolicy.googleblog.com/2016/06/the-trans-pacific-partnership-step.html
  28. 28 https://en.wikipedia.org/wiki/House_of_Cards_(U.S._TV_series)#Reception
  29. 29 http://mars.nasa.gov/multimedia/resources/mars-posters-explorers-wanted/
  30. 30 https://wdrl.info/donate
  31. 31 https://wdrl.info/costs/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to topTweet itShare on Facebook

Related eBooks

Share This: