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 #190: Images in Web Notifications and Angular Code Splitting

New APIs offer great possibilities to build better web services. And some people push these new technologies to their limits. For example, we can use JavaScript to generate images that we then can use in Web Notifications. We can use the Storage API to find out if and how much data we can save on a user’s device and can adjust the behavior of our applications accordingly.

And then we can push our designs further. Constant improvement and development of the navigation is what makes a service like Gitlab easier to use. And by giving advice to users, such as promoting more sustainable options, we can show empathy to our users while improving the world. It all starts with us pushing our projects further.

News Link

  • Firefox Nightly is getting the Storage API1 now, after the Chrome team has it built into their browser. This technology becomes more important now as permanent storage, localStorage, IndexedDB, service worker, backgroundSync and other options become largely available for websites in browsers. With the new Storage API, websites get information about the remaining storage on a user’s device and can therefore improve the reliability and footprint of their service.

Concept & Design Link

  • Taurie Davis shares how the navigation of GitLab is evolving2 and why they rearranged navigation items. Some great insights on UX design improvements.
  • Artiom Dashinsky explores how we can build products today that can make the world more sustainable tomorrow by designing the product for sustainability3. He explores options that software and websites could show to users that are more practical, healthy and sometimes even more convenient: promoting direct flights in a flight search, promoting remote jobs at LinkedIn, preferring walking, biking and public transport over car on a map app, and similar options.
Designing the product for sustainability4
Artiom Dashinsky explores5 how we can build products today that can make the world more sustainable tomorrow.

Tools & Workflows Link

  • Bundle Buddy6 is a useful tool by Sam Saccone to help you find source code duplication across your JavaScript chunks/splits. It basically enables you to fine tune code splitting parameters to reduce bundle invalidation rates and improve repeat page load performance.

Privacy Link

JavaScript Link

—Anselm

Footnotes Link

  1. 1 https://blog.nightly.mozilla.org/2017/07/17/preview-storage-api-in-firefox-nightly/
  2. 2 https://about.gitlab.com/2017/07/17/redesigning-gitlabs-navigation/
  3. 3 https://uxdesign.cc/product-design-for-sustainability-3fffbb2a7f0e
  4. 4 https://uxdesign.cc/product-design-for-sustainability-3fffbb2a7f0e
  5. 5 https://uxdesign.cc/product-design-for-sustainability-3fffbb2a7f0e
  6. 6 https://github.com/samccone/bundle-buddy
  7. 7 https://thehftguy.com/2017/07/19/what-does-it-really-take-to-track-100-million-cell-phones/
  8. 8 https://medium.com/the-guardian-mobile-innovation-lab/generating-images-in-javascript-without-using-the-canvas-api-77f3f4355fad
  9. 9 https://toddmotto.com/lazy-loading-angular-code-splitting-webpack
  10. 10 https://www.bennadel.com/blog/3300-static-methods-are-inherited-when-using-es6-extends-syntax-in-javascript-and-node-js.htm

↑ 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. 1

    Hmmm… Looks like this might be the last one… Anyway, thanks for doing this for the past few years. I really appreciate the fact the time that you took to do it.

    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