Web Tools Weekly
What a Tool!

Issue #280  (Page Viz API, JS Libs, Media, Productivity)11/29/18

Advertisement via Paved
Retool – the Fast Way to Build Internal Tools
No one likes writing boilerplate CRUD. Instead, drag-and-drop our building blocks and connect them to your databases and APIs to build your own tools, fast. Connects with REST, GraphQL, SQL, mongoDB, Firebase, and more.
Sign up for free

The Page Visibility API is one that I had forgotten about until I just stumbled on it again. This simple set of features allows developers to handle specific actions when a page becomes visible or hidden.

A page is considered "hidden" when it is no longer 'visible' to the user (e.g. user has opened a new tab page, or the entire browser has been minimized). Here's a simple way to log the current page's status whenever the visibiiltychange event is fired:

let d = document;

d.addEventListener( 'visibilitychange' , function () {
}, false);

Try it on JS Bin

You can test it using the demo by simply visiting the page, then switching to another tab, and switching back. The log will update each time you view or stop viewing the page.

Use cases for this API include pretty much any situation where you want some kind of feature on the page to pause or stop running in order to save resources. This could be an auto-running carousel that stops running, a video that stops playing, audio that pauses, animations that stop running, and so on.

As you've probably noticed, many browsers will do this sort of thing automatically. For example, requestAnimationFrame() and setTimeOut() call backs will stop when a page is 'hidden'. Audio, however, keeps playing since it's considered a desired feature (which makes sense). You can mimic this behavior with the Page Visibility API.

One thing I'd like to point out as a best practice here is with regards to video. MDN's article on this subject, links to this video page, which demonstrates the API. Try playing the video, then moving away from the page and back again. Notice the video will start and stop based on page visibility.

The only problem is if you manually pause the video, then leave the page and come back, the video starts playing again. This is not desired behavior. If the user has manually paused the video, the page should have a means to detect this and keep it paused until it's manually played again, regardless of the page's visibility status. Of course, that page is just a simple demo, so it's not a big deal in that case. But if you're going to use this API, be sure to implement it in an intuitive way that takes the user's actions into consideration.

Now on to this week's tools!

Many of my previous JavaScript/DOM tips have been released in e-books (EPUB, PDF, MOBI):

JS & DOM Tips Volume 1 >
JS & DOM Tips Volume 2 >
JavaScript E-Books

JavaScript Libraries and Frameworks

Retool – the Fast Way to Build Internal Tools
No one likes writing boilerplate CRUD. Instead, drag-and-drop our building blocks and connect them to your databases and APIs to build your own tools, fast. Connects with REST, GraphQL, SQL, mongoDB, Firebase, and more.   sponsored via Paved 

Next generation web framework in 4kb of JavaScript (Web Components + JSX + Proxy + Store + Path Updating).

An audio programming language built in JavaScript.

A CQRS and event-sourcing framework for JavaScript and Node.js that fits perfectly with domain-driven design.

A modular framework for visual programming that allows you to create a node-based editor directly in the browser.

A JavaScript library for storing and updating the state of your front-end application.

A library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

Mono-repository of 58 TypeScript/ES6 projects for modern web development.

Faster alternative to Ramda (a practical functional library for JavaScript developers).

A JavaScript library for building SQL queries.

A Math framework for computation in JavaScript.

The popular JavaScript superset is now at version 3+ (details).

Recommended Courses for Developers
Fullstack Advanced React & GraphQL   ES6 for Everyone

Media Tools (SVG, Audio, Video, etc.)

Translate images across languages, easily.

A library to perform instant Canvas video through the WebRTC API with a fresh touch of CSS filters.

A library to enable smooth drawing with mouse, finger, or other pointing device.

Now at version 2+ (details). Audio library for the modern web that makes working with audio in JavaScript easy and reliable across all platforms.

A JavaScript library that makes working with the HTML5 Canvas element easy. Useful for creating games, generative art, and other highly graphical experiences.

A React component for visualizing profiling data.

React Shimmer
A powerful, customisable, `img` component that simulates a shimmer effect while loading.

A fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport, with support for responsive images.

The world’s largest icon library. Over 30,000 icons in .iconjar, .sketch, .fig, .svg, .ai, .pdf, and .png format.

Recommended Reading for Developers
Vue.js in Action   CSS Master   CSS Secrets Book
Have you written a book for developers that's available on Amazon? Reply to this email and let me know. I'll consider including it here. No charge.

Productivity Tools

Chrome extension. Emoji favicons for the web to replace blank favicons with unique emojis, or to override existing favicons.

SMS notepad. Write notes as text messages and view them on the web.

A powerful note-taking app that helps you organise + take notes without restrictions.

Your personal research assistant. A free, easy-to-use tool to help you collect, organize, cite, and share research.

A new way to navigate the web at lightning speed. Uses keywords to enable you to open your web resources instantly. Say goodbye to bookmarks.

Chrome and Firefox extension for quickly getting rid of elements on a web page.

Simple team management via email. Manage teams of any shape and size. No apps, usernames, or passwords needed – works directly in your team member's regular email inbox.

Work across time zones efficiently and remotely.

Mac app. Don't let side monitors distract you. Dims any number of screens, so that you can focus only on what you're working on.

A Tweet for Thought

"He's clearly on the chapter about tooling." Sad but appropriate response.

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

Web-animation Toolbox is a pretty hefty resource of tools related to web animation. Worth bookmarking if you're doing tons of stuff in that niche.

Thanks to all for subscribing and reading!

Keep tooling,