Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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 574 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 525. 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 Grids6, Web Assembly, and async/await. They also disabled all plugins except for Adobe Flash.
  • The Samsung Internet browser beta is now available7 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 Internet8. 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 Web9”. 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 cards10, a component we use in nearly every design today.
Design Better Cards11
Cards — the component that symbolizes the web. Andrew Coyle shares how we can make even more of them12. (Image credit13)

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 measurements14 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 public15 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 usage16 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 Revealed17”. And, well, it does, in fact, confirm the worst fears privacy researchers had: The CIA is spying on Samsung TVs18, and it’s extremely likely that Amazon’s Alexa is no exception19, 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 messages20, 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 hyperHTML2321.
hyperHTML22
Andrea Giammarchi built hyperHTML2321, a lightweight virtual DOM alternative. (Image credit24)

CSS/Sass Link

  • Since this week, we’re able to play around with CSS Grids in a lot more public browsers25 (Chrome, Firefox, Edge with the old spec). When you do, this quite complete guide to CSS grid26 might come in handy.
  • Did you know you can use CSS to lint your HTML markup27? 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 Grid28
CSS Grid introduces a series of powerful possibilities29 that give us more control over our layouts. (Image credit30)

Work & Life Link

Going Beyond… Link

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

↑ Back to top Tweet itShare on Facebook

is a freelance front-end developer and architect and cares about sustainable front-end experiences and ethical choices in life. He curates the WDRL, a weekly handcrafted web development newsletter that thousands of developers love, subscribe to, and donate for.

  1. 1

    Rafhael Marsigli

    March 10, 2017 4:02 pm

    I’m using article and aside inside the mais class. Is that semanticly wrong?

    0
    • 2

      Rafhael Marsigli

      March 10, 2017 4:03 pm

      Sorry: “main” class

      0
      • 3

        For article, no. But you might want to consider nesting articles in a section tag. So the hierarchy would be main > section > article. The idea is to give search engines and other developers some idea of context.

        Asides are a little more tricky. I personally don’t see a problem with using an aside inside of main as long as it makes sense for your layout. This is pure speculation, but I imagine search engines would be calibrated to treat content within an aside as less important than content within an article for example. Again, it’s all about establishing some form of context.

        2
  2. 4

    Great, as usual. Thanks!

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top