There are over 97 Web APIs, and you’re only using 5% of them. Let’s unlock that other 95 percent!

After taking a long stroll down the dark realms of the spec, I realized that there were so many technologies out there being left-out.

My goal with this article is to bring them to the light. And I’ll prove to you, using practical examples, that some APIs are really worth a shot!

Each section will thoroughly examine each API and provide a fun example that beautifully demonstrates a practical use-case.

Warning about portrait mode

Screen is too narrow. try in landscape mode.

Screen is too narrow. try in landscape mode.

Some apps like non-linear video editors were not meant for vertical devices: they just don’t work well in narrow screens!

Sure, the web is supposed to be responsive, but it’s not always worth it to port a whole wide layout to a narrow display.

Wouldn’t it be nice if we could warn our users when their device is rotated in the wrong direction? Let me introduce to you… the Screen Orientation API!

In order to avoid errors, it’s important to check support for the Screen Orientation API. This is as simple as: if ('orientation' in screen). You’ll see this pattern again and again throughout this article.

The Screen Orientation API

Browsers expose a global variable named screen, which we’ll use to access the information we need. The [ScreenOrientation](<https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation>) instance can be accessed with screen.orientation. We’ll be working with this object throughout this section.

Detecting the screen orientation

Screen Orientation types and angles: https://w3c.github.io/screen-orientation/#dfn-screen-orientation-values-table

Screen Orientation types and angles: https://w3c.github.io/screen-orientation/#dfn-screen-orientation-values-table

Contrary to popular belief, there are four ways that a screen can be oriented, as can be seen in the picture above. But we’re only interested in knowing whether the screen is in portrait or landscape mode, and it’s easy to write a function that tells us exactly that:

function getOrientation() {  
	const isPortrait = screen.orientation.type.startswith('portrait')  
	return isPortrait ? 'portrait' : 'landscape'
}

Locking the screen orientation

Native apps like Instagram lock the screen orientation while it’s in-use. As the line between PWAs and native apps is getting blurrier by the day, it’s not a surprise that this feature is also on the web.