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.
- 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-positionfor the already available
object-fitproperty and clipping using SVG paths. Last but not least, from now on, even if
user-scalable=nois 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.
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.
- 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.
- “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.
HTML & SVG Link
- Following Safari that introduced the feature already in iOS 812, you’ll now be able to add
autocomplete="new-password"13 to hint upcoming Chrome versions at generating a password. It’s possible to add other hints14, too —
username, for example.
- Despite being a simple and old attribute, you can find a lot of websites doing it wrong: HTML’s
lang. Sometimes it’s not declared at all, and sometimes its value is
"en"although the content is not in English. Learn how to use the
lang-attribute properly and where you can apply it15.
- Rob Dodson explains why we should build better accessibility primitives16 at the example of modals and disabling tabindex.
- Google released a free web accessibility course on udacity17.
- AOS21 is a CSS-driven on-scroll animation library that gives the user full control over styling.
- 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.
- 1 https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
- 2 https://twitter.com/thomasfuchs/status/742531231007559680
- 3 https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/
- 4 https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/
- 5 https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/
- 6 https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/
- 7 https://medium.com/@helloanselm/dreamweaver-is-back-for-us-coders-2a1be75ae595
- 8 http://www.theregister.co.uk/2016/06/17/non_us_encryption_is_theoretical_claims_cia/
- 9 http://blog.cryptographyengineering.com/2016/06/what-is-differential-privacy.html
- 10 https://twitter.com/Speroman/status/742792033358647297
- 11 https://blog.archive.org/2016/06/16/geez-now-internet-insurance/0
- 12 https://lmjabreu.com/post/ios-8-privacy-updates/#safari-keychain-improvements
- 13 https://twitter.com/rem/status/744928019605766144
- 14 https://html.spec.whatwg.org/multipage/forms.html#autofill
- 15 https://www.paciellogroup.com/blog/2016/06/using-the-html-lang-attribute/
- 16 http://robdodson.me/building-better-accessibility-primitives/
- 17 https://www.udacity.com/course/web-accessibility–ud891
- 18 http://robdodson.me/building-better-accessibility-primitives/
- 19 http://robdodson.me/building-better-accessibility-primitives/
- 20 http://robdodson.me/building-better-accessibility-primitives/
- 21 https://css-tricks.com/aos-css-driven-scroll-animation-library/
- 22 https://developer.apple.com/reference/applepayjs
- 23 https://www.w3.org/blog/wpwg/2016/03/04/fpwd/
- 24 https://codepen.io/jonneal/pen/PzGYEE?editors=0100
- 25 https://bitsofco.de/form-validation-techniques/
- 26 https://css-tricks.com/form-validation-ux-html-css/
- 27 https://publicpolicy.googleblog.com/2016/06/the-trans-pacific-partnership-step.html
- 28 https://en.wikipedia.org/wiki/House_of_Cards_(U.S._TV_series)#Reception
- 29 http://mars.nasa.gov/multimedia/resources/mars-posters-explorers-wanted/
- 30 https://wdrl.info/donate
- 31 https://wdrl.info/costs/
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.