Web Development Reading List #190: Images in Web Notifications and Angular Code Splitting

• 3 min read
• Tools, Coding, Web Development Reading List
• Share on Twitter, LinkedIn

About The Author

Anselm 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 … More about Anselm ↬

Email Newsletter

Your (smashing) email

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

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

• Firefox Nightly is getting the Storage API 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

• Taurie Davis shares how the navigation of GitLab is evolving 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 sustainability. 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.

Tools & Workflows

• Bundle Buddy 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

• What does it really take to track a million cell phones? This article gives you a better understanding of cell phone technology and how it can be used to track any cell phone.

JavaScript

• Alastair Coote shares how to generate images in JavaScript without using the Canvas API. At The Guardian, they make use of this technology to display images in Web Notifications.
• Todd Motto shares how to use code splitting in your Angular project with Webpack.
• Ben Nadel explains how static methods are inherited when using ES6 extends syntax.

—Anselm

Further Reading

• Mobile Navigation For Smashing Magazine: A Case Study
• The Beauty Of React Native: Building Your First iOS App With JavaScript (Part 1)
• Improving Smashing Magazine’s Performance: A Case Study
• Using Sketch For Responsive Web Design (A Case Study)

(mrn)