Web Development Reading List #148: CSS Color Syntax Change, Browser News, And Hidden Expectations

I shut down my browser on Wednesday, accidentally having a setting switched on that clears history and all sessions. First, I was sad to have lost many tabs with articles I stored “for later”. At the same time, it felt refreshing, liberating to have a clean browser window with zero tabs open. So my new goal is to start work in the morning with a completely clean browser window at least once a week.

In other news: I spent several hours fixing broken links this week, and as a result I can’t say how happy I am that archive.is¹ and archive.org² exist to prevent content from disappearing forever. Still, some of the resources I found broken have left forever. So remind yourself about redirecting content.

News Link

• There’s a big change coming up for how we write colors in CSS. Tab Atkins recently changed the color functions syntax³ in the CSS specification. So in future, we will write rgb(0 255 0 / 50%) instead of rgba(0, 255, 0, 50%). This might sound awkward after years of doing it differently, but the reason for it are the new color functions available in CSS Colors Level 4, including color(). You can read more about this in Tab’s blog post, but for now be assured that the old syntax is likely to be supported forever in our browsers thanks to legacy support.
• Opera 39 and Chromium 52 hit the streets this week and with them a couple of new features⁴: The Fetch API now supports a custom referrer policy, Performance Observer⁵ is supported, just like alpha channel for RGB colors in hex notation (#ffffff50), and CSP 3’s strict-dynamic directive is now available as well.
• The new Docker for Mac and Windows is finally production-ready⁶ after several months in beta. Great news for all users who eagerly awaited it but always had issues with the previous version (i.e. disk and permission management problems).
• Big news from Mozilla this week: With Firefox 48⁷, the multi-process engine e10s is now enabled for many users, making Firefox much more robust, faster and more reliable. Also, protection against harmful downloads has been improved⁸ and unsigned/unverified add-ons won’t load anymore. Web Extensions support⁹ including CSP enforcements for web extensions is also new, just like the about:debugging developer page. For developers, the DevTools come with an improved font inspector, calc() is now supported for line-height and can be nested, and, last but not least, support for the CSP directive upgrade-insecure-requests has been added, too.
• Microsoft pushed Edge 14 this week¹⁰ and with it a lot of great new things¹¹. Notably, the new version got a lot of accessibility improvements and now competes as one of the best browsers in the HTML5 Accessibility test¹⁴¹². New features also include extensions and pinned tabs and performance got better to improve battery life, too. Fellow developers will be happy to hear about web notifications, the Fetch API, Beacon Interface, JavaScript’s asyncawait, and support for <time> and WOFF2.

¹³

General Link

• Dave Rupert reflected on hidden expectations¹⁵ and why the hardest parts of the web are the ones the client doesn’t see. Accessibility, security, and performance serve very well as main examples for such hidden expectations.

Concept & Design Link

• In our industry, it’s important to have a connected workflow between design and development¹⁶ to make sure we’re aligned and to make real collaboration possible. Subjects like “avoiding assumptions, team up with our peers or sharing knowledge” will help us work together in a better way, says Simon Colijn.

Tools & Workflows Link

• Users don’t care what tools we use; they care when we ship something useful. A great presentation by Liz Abinante on the simplicity of tooling¹⁷ and reasonable choices¹⁸.
• We take GitHub for granted. We pay for it and we use it as the primary end point for our git-repositories. Now Fabio Akita shares why it’s the more expensive option and how you can use the open-source alternative gitlab¹⁹ on a pre-configured VPS that is cheaper and more flexible. At least worth reading.

Security Link

• Proofpoint published a very interesting in-depth analysis of a big malvertising network²⁰ that they found in the wild and that hid itself from plain sight by using steganography and file whitelisting. There’s evidence that they targeted a daily traffic of 1-5 million high-quality client hits.
• Mathy Vanhoef and Tom Van Goethem presented a new HEIST-attack on HTTPS pages to steal SSNs, email addresses, and more. You can view the slides²¹ (PDF) or read the write-up²² (PDF) to understand the attack and what you can do to prevent it.
• Mike West, one of the main persons pushing security web standards at the moment, proposes to introduce an origin-wide policy manifest²³ to reduce the risk that security policies aren’t applied to specific resources. The proposal suggests to use a file in the /.well-known/origin-policy/[name-goes-here] directory on the origin server, adapting an already used folder name and path.
• The well-known security researcher Jonathan Zdziarski found an issue in Whatsapp’s iOS app that seems wide-spread in iOS apps in general: Deleted chats aren’t deleted²⁴, which means that forensic experts could reconstruct them. Any app that uses SQLite on iOS has the same issue since deleted entries are only set “free” to be overwritten instead of actually deleted. In fact, Apple’s Messages app faces the same issues, and cloud sync makes this even worse as it spreads the deleted information to other devices. Jonathan finally shows how to implement an SQLite database in an iOS app to prevent this issue.

²⁵

Privacy Link

• The Battery Status API in general sounds like a great addition to our web platform. Initially built by Mozilla to complete the API-set on the web, we can use it on websites to reduce the amount of interactivity and animation or serve videos in low resolutions when the battery is nearly empty, for example. Lukasz Olejnik, however, found out that this API is actually already used²⁸ as a user tracking identifier by ad networks and others. And last but not least, it can also be used to charge more for a service when a user’s battery is low — as reportedly done by Uber²⁹.

Web Performance Link

• Mattias Geniar had a look at Google’s new QUIC protocol³⁰ that uses UDP instead of TCP and manages to be more reliable and faster — an ideal candidate as a successor to the TCP protocol. While it’s still at an early stage, the IETF is considering to make it a standard, Google uses it for some of their services already, and several server and browser vendors have plans to implement it, too.
• For very big websites, we often tend to use a CMS, as this seems to be the best option at first glance. But what about choosing a static site generator for better performance and less security risks? Stefan Baumgartner shares his experience with using static site generators at scale³¹ and how they even built something like a content management system around it.

JavaScript Link

• React is a bit different when it comes to technical design decisions. Chris James Hycner looks into SVG icon systems for React.js³² and how to build a well-working module for it.
• “Add this JS-snippet to the project.” — a request that developers hear quite often. Kevin J. Dolan shares his eye-opening experience with a QA-person on why it’s a very, very bad idea to follow such requests blindly and why you shouldn’t include external third-party JavaScript references without extensive reviews³³.
• Ben Frain explains the native JavaScript array methods³⁴ and how they differ from each other. A great introduction (or reminder) of what we can use today to get data out of arrays.

CSS/Sass Link

• For long articles, a scroll indicator can be very useful to indicate the reading progress. Most people use some sort of JavaScript code to do this (which is calculation-expensive); some people, however, find clever tricks to do it with CSS. The CSS-only scroll indicator³⁵ by Mike Riethmuller is an awesome show-off of using gradients, viewport units and a pseudo-element.

CSS only scroll indicator³⁶ by Mike Riethmuller (MadeByMike³⁷) on CodePen³⁸.

Work & Life Link

• Hannah Rosefield puts exhaustion, the ‘status symbol’ of today, into perspective³⁹.
• Tom Bartel shares some great thoughts on recalibrating your productivity sensors as a developer⁴⁰. Reframe your work, whether it’s managing people, talking to others, or actual coding work whenever you think you’re not productive. Most of the time it’s simply untrue.

Going Beyond… Link

• Simon St. Laurent on decentralizing the web⁴¹. Some useful thoughts about our current lock-in on technology, service providers, and centralized solutions, and how we might be able to break that up again to unlock the real power of the web.
• Katharine Viner writes about how social media swallowed the news⁴² and how the consequences of this go far beyond journalism. Does the truth even matter any more? An interesting essay on how well-done social marketing has an enormous influence on the decisions people make — no matter if it’s about buying a product or making a political decision.
• Since the financial crisis, the private equity industry has become hugely influential. The New York Times curated a lovely, interactive story about how private equity plays out in your daily life⁴³.

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://archive.is/
2. 2 https://archive.org/
3. 3 http://www.xanthir.com/b4iW0
4. 4 https://dev.opera.com/blog/opera-39/
5. 5 https://developers.google.com/web/updates/2016/06/performance-observer
6. 6 https://blog.docker.com/2016/07/docker-for-mac-and-windows-production-ready/
7. 7 https://blog.mozilla.org/blog/2016/08/02/exciting-improvements-in-firefox-for-desktop-and-android/
8. 8 https://blog.mozilla.org/security/2016/08/01/enhancing-download-protection-in-firefox/
9. 9 https://blog.mozilla.org/addons/2016/04/29/webextensions-in-firefox-48/
10. 10 https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/desktop/14393/?compareWith=10586
11. 11 https://blogs.windows.com/msedgedev/2016/08/04/introducing-edgehtml-14/
12. 12 http://www.html5accessibility.com/
13. 13 http://www.html5accessibility.com/
14. 14 http://www.html5accessibility.com/
15. 15 http://daverupert.com/2016/08/hidden-expectations/
16. 16 http://simon.fyi/articles/aligning-design-and-development
17. 17 https://twitter.com/AndyHieb/status/761272450554269696
18. 18 https://speakerdeck.com/feministy/in-defense-of-static-sites
19. 19 http://www.akitaonrails.com/2016/08/03/moving-to-gitlab-yes-it-s-worth-it
20. 20 https://www.proofpoint.com/us/threat-insight/post/massive-adgholas-malvertising-campaigns-use-steganography-and-file-whitelisting-to-hide-in-plain-sight
21. 21 https://tom.vg/talks/BlackHatUSA2016_HEIST-presentation.pdf
22. 22 https://tom.vg/papers/heist_blackhat2016.pdf
23. 23 https://discourse.wicg.io/t/proposal-set-origin-wide-policies-via-a-manifest/1617/4
24. 24 http://www.zdziarski.com/blog/?p=6143
25. 25 http://www.zdziarski.com/blog/?p=6143
26. 26 http://www.zdziarski.com/blog/?p=6143
27. 27 http://www.zdziarski.com/blog/?p=6143
28. 28 https://go.lynxbroker.de/eat_heartbeat.js
29. 29 http://www.telegraph.co.uk/business/2016/05/22/uber-app-can-detect-when-a-users-phone-is-about-to-die/
30. 30 https://ma.ttias.be/googles-quic-protocol-moving-web-tcp-udp/
31. 31 https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned/
32. 32 http://blog.goguardian.com/nerds/an-odyssey-to-find-a-sustainable-icon-system-with-svgs-in-react
33. 33 https://tech.metriccollective.com/of-course-ill-let-you-execute-arbitrary-javascript-code-in-my-users-browsers-3032eca3480e
34. 34 https://benfrain.com/understanding-native-javascript-array-methods/
35. 35 https://codepen.io/MadeByMike/pen/ZOrEmr?editors=0100
36. 36 ‘https://codepen.io/MadeByMike/pen/ZOrEmr/’
37. 37 ‘http://codepen.io/MadeByMike’
38. 38 ‘http://codepen.io’
39. 39 https://newrepublic.com/article/135468/exhaustion-became-status-symbol
40. 40 http://www.tombartel.de//2016/07/05/recalibrate-your-productivity-sensors/
41. 41 https://www.oreilly.com/ideas/decentralize-now
42. 42 https://www.theguardian.com/media/2016/jul/12/how-technology-disrupted-the-truth
43. 43 http://www.nytimes.com/interactive/2016/08/02/business/dealbook/this-is-your-life-private-equity.html?_r=0
44. 44 https://wdrl.info/donate
45. 45 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook