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: Announcing Changes, A Design Kit, DNA Malware, And Why Meaning Is An Advantage

You might have noticed it already: in the past few weeks you might have missed Anselm’s Web Development Reading List1 issues here on SmashingMag. No worries, from now on, we’ll switch to collecting the most important news of each month in one handy, monthly summary for you. If you’d like to continue reading Anselm’s weekly reading list (and we encourage you to!), you can still do so via email2, on wdrl.info3 or via RSS4. — Editorial Team

Hello again! I’ll continue publishing this resource and am grateful for everyone who supports my ongoing work. And to celebrate the last weekly edition, I found a lot of great articles for you: Biohacking news that sound like science fiction, advances in deep learning with JavaScript, and a lot more. Happy reading!

News Link

  • The upcoming Chrome 615 (in beta channel now) brings support for JavaScript modules, the Payment Request API on desktop, smooth-scrolling in CSS, 8-digit hex colors (with alpha transparency), and the new Expect-CT HTTP header.
  • Edward Thomson shares why you should upgrade your git installation6 to 2.14.1 to fix vulnerabilities.
  • Microsoft will change their Edge rendering engine7, making it independent of and asynchronous to the main thread.
  • This week, Opera announced the end of Opera Max8, their data-saving browser product. The service will still stay active for a while but probably not for too long.

UI/UX Link

macOS Desktop Kit11
The macOS Desktop Kit12 includes desktop application and web UI elements a designer could need when building a user flow through a web app or constructing a Mac interface. (Image credit13)

Tooling Link

  • Puppeteer14 is a Node.js library that provides an API to control headless Chrome. It can also be configured to use full (non-headless) Chrome.

Security Link

Web Performance Link

  • Andreya Grzegorzewski explains how we can use the Cache API for offline POST requests17 in Progressive Web Apps. This super cool trick allows us to queue POST requests, such as a form submission/data upload, cache it, and send it to the server once the user is back online.

HTML & SVG Link

  • If you want to use <details>/<summary> elements together with rem font-size values on your site, be aware that there’s a bug in Safari that renders parts of a website with that CSS combination useless. After tracking it down and debugging it, I finally summarized the case18.

Accessibility Link

10 guidelines to improve your web accessibility20
Eva Ferreira shares ten web accessibility guidelines21 to guarantee access to your site to any person, in spite of disabilities. (Image credit22)

JavaScript Link

  • deeplearn.js23 is a hardware-accelerated machine intelligence library for the web. You can use it to build and train neural networks in your browser, to play color sequences or detect objects in images, for example.
  • flatpickr24 is a dependency-free, lightweight and powerful datetime picker.
  • Peter Kröner shares how he achieved immutable arrays and objects in JavaScript in only 33 lines25 (German article, automatically translated) without any library with ECMAScript Proxies.

CSS Link

CodePen Directionally-Aware Hover Only With CSS27
Giana uses :hover and the sibling selector to apply different styles to elements based on their position and, thus, create a CSS-only, directionally-aware hover effect28.

Work & Life Link

Going Beyond… Link

—Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/tag/web-development-reading-list/
  2. 2 https://wdrl.info/
  3. 3 https://wdrl.info/
  4. 4 https://wdrl.info/feed
  5. 5 https://blog.chromium.org/2017/08/chrome-61-beta-javascript-modules.html
  6. 6 https://www.edwardthomson.com/blog/upgrading_git_for_cve2017_1000117.html
  7. 7 https://blogs.windows.com/msedgedev/2017/08/17/making-web-smoother-independent-rendering/
  8. 8 http://blogs.opera.com/mobile/2017/08/upcoming-changes-opera-max/
  9. 9 http://facebook.design/desktopkit
  10. 10 http://facebook.design/ios10
  11. 11 http://facebook.design/desktopkit
  12. 12 http://facebook.design/desktopkit
  13. 13 http://facebook.design/desktopkit
  14. 14 https://github.com/GoogleChrome/puppeteer
  15. 15 https://www.wired.com/story/malware-dna-hack
  16. 16 http://telegra.ph/Why-Isnt-Telegram-End-to-End-Encrypted-by-Default-08-14
  17. 17 https://medium.com/web-on-the-edge/offline-posts-with-progressive-web-apps-fc2dc4ad895
  18. 18 https://colloq.io/blog/safaris-detailssummary-rem-font-size-issue
  19. 19 https://aerolab.co/blog/web-accessibility/
  20. 20 https://aerolab.co/blog/web-accessibility/
  21. 21 https://aerolab.co/blog/web-accessibility/
  22. 22 https://aerolab.co/blog/web-accessibility/
  23. 23 https://pair-code.github.io/deeplearnjs/
  24. 24 https://chmln.github.io/flatpickr/
  25. 25 http://www.microsofttranslator.com/bv.aspx?from=&to=en&a=http%3A%2F%2Fwww.peterkroener.de%2Fimmutable-arrays-und-objekte-fuer-javascript-mit-proxies%2F
  26. 26 https://codepen.io/giana/pen/YZWjQy
  27. 27 https://codepen.io/giana/pen/YZWjQy
  28. 28 https://codepen.io/giana/pen/YZWjQy
  29. 29 https://christianheilmann.com/2017/08/16/taking-a-break-and-so-should-you/
  30. 30 https://shift.newco.co/is-social-media-the-new-tobacco-936d28a2bfe2
  31. 31 https://getpocket.com/explore/item/stop-spending-so-much-time-in-your-head-1381441550
  32. 32 http://thestoryoftelling.com/meaning-advantage/

↑ Back to top Tweet itShare on Facebook

is a freelance front-end developer who cares about sustainable front-end experiences and ethical choices in life. He writes the WDRL, and is co-founder of the event platform Colloq.

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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