hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

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

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.is1 and archive.org2 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 syntax3 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 features4: The Fetch API now supports a custom referrer policy, Performance Observer5 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-ready6 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 487, 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 improved8 and unsigned/unverified add-ons won’t load anymore. Web Extensions support9 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 week10 and with it a lot of great new things11. Notably, the new version got a lot of accessibility improvements and now competes as one of the best browsers in the HTML5 Accessibility test1412. 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.
Browsers’ score in terms of HTML5 accessibility.13
The new version of Edge, Edge 14, got a lot of improvements and now scores 100% in the HTML5 Accessibility test1412.

General Link

  • Dave Rupert reflected on hidden expectations15 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 development16 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 tooling17 and reasonable choices18.
  • 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 gitlab19 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 network20 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 slides21 (PDF) or read the write-up22 (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 manifest23 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 deleted24, 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.
25
A wide-spread issue in iOS apps that use SQLite: Deleted entries aren’t deleted26 but only set free to be overwritten. (Image credit: Jonathan Zdziarski27)

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 used28 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 Uber29.

Web Performance Link

  • Mattias Geniar had a look at Google’s new QUIC protocol30 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 scale31 and how they even built something like a content management system around it.

JavaScript Link

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 indicator35 by Mike Riethmuller is an awesome show-off of using gradients, viewport units and a pseudo-element.

CSS only scroll indicator36 by Mike Riethmuller (MadeByMike37) on CodePen38.

CSS-only scroll indicator by Mike Riethmuller.

Work Life Link

Going Beyond… Link

  • Simon St. Laurent on decentralizing the web41. 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 news42 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 life43.

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation44 or share this resource with other people. You can learn more about the costs of the project here45. 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/
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 top
Tweet itShare on Facebook

Article source: https://www.smashingmagazine.com/2016/08/web-development-reading-list-148/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.