Issue #280 (Page Viz API, JS Libs, Media, Productivity)11/29/18
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 () {
console.log(d.hidden);
}, 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!
|
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 
Omi
Next generation web framework in 4kb of JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
Slang
An audio programming language built in JavaScript.
wolkenkit
A CQRS and event-sourcing framework for JavaScript and Node.js that fits perfectly with domain-driven design.
Rete
A modular framework for visual programming that allows you to create a node-based editor directly in the browser.
SpaceAce
A JavaScript library for storing and updating the state of your front-end application.
RxJS
A library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
Umbrella
Mono-repository of 58 TypeScript/ES6 projects for modern web development.
Rambda
Faster alternative to Ramda (a practical functional library for JavaScript developers).
Sqorn
A JavaScript library for building SQL queries.
TheoremJS
A Math framework for computation in JavaScript.
TypeScript
The popular JavaScript superset is now at version 3+ (details).
|
|
Recommended Courses for Developers
|
Media Tools (SVG, Audio, Video, etc.)
imgtranslate
Translate images across languages, easily.
Instacam
A library to perform instant Canvas video through the WebRTC API with a fresh touch of CSS filters.
lazy-brush
A library to enable smooth drawing with mouse, finger, or other pointing device.
howler.js
Now at version 2+ (details). Audio library for the modern web that makes working with audio in JavaScript easy and reliable across all platforms.
EaselJS
A JavaScript library that makes working with the HTML5 Canvas element easy. Useful for creating games, generative art, and other highly graphical experiences.
react-flame-graph
A React component for visualizing profiling data.
React Shimmer
A powerful, customisable, `img` component that simulates a shimmer effect while loading.
LazyLoad
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.
Streamline
The world’s largest icon library. Over 30,000 icons in .iconjar, .sketch, .fig, .svg, .ai, .pdf, and .png format.
|
|
Recommended Reading for Developers
|
Productivity Tools
Favioli
Chrome extension. Emoji favicons for the web to replace blank favicons with unique emojis, or to override existing favicons.
txxt
SMS notepad. Write notes as text messages and view them on the web.
μPad
A powerful note-taking app that helps you organise + take notes without restrictions.
Zotero
Your personal research assistant. A free, easy-to-use tool to help you collect, organize, cite, and share research.
Gurn
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.
ekill
Chrome and Firefox extension for quickly getting rid of elements on a web page.
Wundamail
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.
There™
Work across time zones efficiently and remotely.
ScreenFocus
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.
|
|
