Web Development Reading List #173: CSS Grid Support, A Virtual DOM Alternative, And Designing Better Cards

by

Web Development Reading List #173: CSS Grid Support, A Virtual DOM Alternative, And Designing Better Cards

This week was a big week in terms of web development news. We got much broader support for CSS Grids and Web Assembly, for example, but I also stumbled across some great resources that teach us a lot of valuable things.

With this Web Development Reading List, we’ll dive deep into security and privacy issues, take a look at a lightweight virtual DOM alternative, and get insights into how we can overcome our biases (or at least how we can better deal with them). So without further ado, let’s get started!

Further Reading on SmashingMag: Link

News Link

  • Chrome 575 was released this week, and it brings us CSS Grids, the Media Session API, and Web Assembly. Also new is that Chrome will return an error for SHA1 certificates from now on.
  • A new Firefox version was released to the public this week: Firefox 526. The new version will display a prominent warning if a user fills in their password on a non-secure page, rel="noopener" was implemented, too, just like broad support for CSS Grids7, Web Assembly, and async/await. They also disabled all plugins except for Adobe Flash.
  • The Samsung Internet browser beta is now available8 in the Google Play Store and via Samsung Galaxy Apps. It runs on Chromium 51, has support for progressive web apps, Service Worker, and content blockers.

General Link

  • By analyzing the large-scale issues the web faced in the past month (think Amazon’s S3 outage causing a downtime of millions of websites, Cloudflare’s data leak that required users of very popular websites to change their passwords, or Google’s accidental WiFi reset which wiped out customers’ Internet profiles) Tristan Louis reflects on the question if we are breaking the Internet9. The trend towards a few services hosting a majority of the Internet’s infrastructure is causing more and more large-scale problems. If we want to avoid issues like these, we need to rethink this new kind of centralization and fix it.
  • Bruce Lawson wrote about the “World Wide Web, Not Wealthy Western Web10”. It’s about the bias of western web developers, about ignoring other continents, and why we need to see the bigger picture instead. A piece you should definitely take the time to read.

Concept & Design Link

  • It’s easy to build a standard card design, but we could do so much more with them. Andrew Coyle wrote about designing better cards11, a component we use in nearly every design today.
12
Cards — the component that symbolizes the web. Andrew Coyle shares how we can make even more of them13. (Image credit14)

Security Link

  • In an attempt to participate in their own bug bounty program, Brett Buerhaus and Ben Sadeghipour analyzed AirBNB’s web service. And indeed, they stumbled over some pretty good examples of how to bypass a lot of security measurements15 they already had implemented.
  • We know backups are crucial in IT operations. But what we often don’t think about is the backup’s security. A company that’s responsible for a lot of email spam recently exposed their backups to the public16 for over a month. Initially, we might think that’s great as this mishap makes it relatively easy to bring their operations to a halt, but then others have probably already picked up all the data to use it for their operations and, thus, producing an increase of spam.
  • Tobias Laudinger and some of his co-workers conducted the first comprehensive study of client-side JavaScript library usage17 and the security implications it brings along. Based on data from over 133K websites, they found that 37% of websites include at least one library with a known vulnerability. Time to reconsider our use of external dependencies and how we can keep them up-to-date.

Privacy Link

  • Another big data leak was revealed by WikiLeaks this week, this time it’s called “Vault7 — CIA Hacking Tools Revealed18”. And, well, it does, in fact, confirm the worst fears privacy researchers had: The CIA is spying on Samsung TVs19, and it’s extremely likely that Amazon’s Alexa is no exception20, just like a lot of other centralized, not end-to-end-encrypted services, too. The findings also caused a lot of discussion about whether messaging apps like Whatsapp and Signal are safe since their encryption was reportedly broken as well. But you need to differentiate here, because, in the case of the messaging apps, the encryption was broken by infecting only selected targeted devices with malware. Together with this news about decrypted PGP messages21, the published data shows that apps like Signal do indeed work as expected: They prevent third parties from mass-capturing private data and instead force them to target individual devices.

JavaScript Link

  • Andrea Giammarchi shared his latest project, a lightweight virtual DOM alternative called hyperHTML2422.
hyperHTML23
Andrea Giammarchi built hyperHTML2422, a lightweight virtual DOM alternative. (Image credit25)

CSS/Sass Link

  • Since this week, we’re able to play around with CSS Grids in a lot more public browsers26 (Chrome, Firefox, Edge with the old spec). When you do, this quite complete guide to CSS grid27 might come in handy.
  • Did you know you can use CSS to lint your HTML markup28? Ire Aderinokun shared a couple of use cases and some very neat tricks — how to check for unlabelled form elements or inaccessible viewport attributes, for example.
CSS Grid29
CSS Grid introduces a series of powerful possibilities30 that give us more control over our layouts. (Image credit31)

Work & Life Link

Going Beyond… Link

  • A team around the co-inventor of Lithium-ion batteries developed the first all-solid-state battery cells35 that could lead to safer, faster-charging, longer-lasting rechargeable batteries.
  • Jelmer Mommers recently stumbled across a video from the oil company Shell that shows that they were aware of the dangers that global warming brings along already more than 25 years ago. Unfortunately, they decided to focus on short-term solutions nevertheless, for financial reasons. This great article shows how money can make us ignore important facts36. I really believe that you and me, we can do better than Shell.

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

— Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
  2. 2 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
  3. 3 https://www.smashingmagazine.com/2010/03/web-design-criticism-a-how-to/
  4. 4 https://www.smashingmagazine.com/2015/10/dealing-with-loud-silent-burnout/
  5. 5 https://blog.chromium.org/2017/02/chrome-57-beta-css-grid-layout-improved.html
  6. 6 https://developer.mozilla.org/en-US/Firefox/Releases/52
  7. 7 https://hacks.mozilla.org/2017/03/firefox-52-introducing-web-assembly-css-grid-and-the-grid-inspector/
  8. 8 https://medium.com/samsung-internet-dev/samsung-internet-beta-now-available-without-sign-up-e0d5d4010838
  9. 9 https://www.fastcompany.com/3068627/are-we-breaking-the-internet
  10. 10 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/
  11. 11 https://uxdesign.cc/design-better-cards-c0d12ab581c4
  12. 12 https://uxdesign.cc/design-better-cards-c0d12ab581c4#.dfp2dsxh2
  13. 13 https://uxdesign.cc/design-better-cards-c0d12ab581c4#.dfp2dsxh2
  14. 14 https://uxdesign.cc/design-better-cards-c0d12ab581c4#.dfp2dsxh2
  15. 15 https://buer.haus/2017/03/08/airbnb-when-bypassing-json-encoding-xss-filter-waf-csp-and-auditor-turns-into-eight-vulnerabilities/
  16. 16 http://www.csoonline.com/article/3176433/security/spammers-expose-their-entire-operation-through-bad-backups.html
  17. 17 https://blog.acolyer.org/2017/03/07/thou-shalt-not-depend-on-me-analysing-the-use-of-outdated-javascript-libraries-on-the-web/
  18. 18 https://wikileaks.org/ciav7p1/
  19. 19 https://motherboard.vice.com/en_us/article/the-cia-spied-on-people-through-their-smart-tvs-leaked-documents-reveal?asd
  20. 20 https://twitter.com/BusterUSMC/status/839489658283261952
  21. 21 https://motherboard.vice.com/en_us/article/dutch-cops-say-theyve-decrypted-pgp-messages-on-seized-server
  22. 22 https://medium.com/@WebReflection/hyperhtml-a-virtual-dom-alternative-279db455ee0e
  23. 23 https://medium.com/@WebReflection/hyperhtml-a-virtual-dom-alternative-279db455ee0e
  24. 24 https://medium.com/@WebReflection/hyperhtml-a-virtual-dom-alternative-279db455ee0e
  25. 25 https://medium.com/@WebReflection/hyperhtml-a-virtual-dom-alternative-279db455ee0e
  26. 26 http://caniuse.com/#search=grid
  27. 27 https://tympanus.net/codrops/css_reference/grid/
  28. 28 https://bitsofco.de/linting-html-using-css/
  29. 29 https://tympanus.net/codrops/css_reference/grid/
  30. 30 https://tympanus.net/codrops/css_reference/grid/
  31. 31 https://tympanus.net/codrops/css_reference/grid/
  32. 32 https://www.theatlantic.com/business/archive/2017/03/economist-email-less-painful/518934/
  33. 33 https://superyesmore.com/its-not-how-many-hours-of-sleep-you-get-31511419ec81ce17835eeeb6c1a570a5
  34. 34 https://www.fastcompany.com/3068689/the-science-of-work/your-feedback-will-always-be-biased-but-heres-what-to-do-about-it
  35. 35 https://news.utexas.edu/2017/02/28/goodenough-introduces-new-battery-technology
  36. 36 https://thecorrespondent.com/6311/shell-took-a-good-long-look-at-climate-change-and-then-went-back-to-looking-for-oil/2244455904680-2a618a43
  37. 37 https://wdrl.info/donate
  38. 38 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

Leave a Reply

Your email address will not be published. Required fields are marked *