Fullscreen API
https://developer.mozilla.org/en-US/
docs/Web/API/Fullscreen_API
While browsers do
a good job of using
screen real estate,
hiding the address
bar sometimes
helps. In this case,
the Fullscreen API is a convenient way to deal
with the problem and enabling it requires but
a few lines of code.
Once requestFullscreen is invoked, the
browser is instructed to display the parent
element in full-screen mode. This is
especially useful when combined with an
interactive tag such as an HTML5 <video>
markup element.
However, as with other APIs, invoking
the method and getting permission are a
different kettle of fish – if the user does not
agree to full-screen mode, most browsers
will not let you hide the address bar.Geolocation API
https://developer.mozilla.org/en-US/
docs/Web/API/Geolocation_API
Getting access to a
user’s location is
paramount if many
business processes
are to work
seamlessly. The
Geolocation API lets you access position
information provided by a device’s GPS
receivers and other sensors, such as Wi-Fi.
Thanks to its importance for ecommerce,
almost all browsers support the Geolocation
API, enabling you to find out where the
user is located via but a few lines of code.
However, keep in mind that because
the information returned is sensitive,
the browser vendors require all kinds of
additional security. For example, the browser
will invariably display a permission dialog
before providing coordinates, which is vital
when it comes to ensuring you have a user’s
informed consent.HTML Drag and Drop API
https://developer.mozilla.org/en-US/
docs/Web/API/HTML_Drag_and_Drop_
API
The HTML Drag and
Drop API does what
exactly what it says
on the tin: some
HTML elements are
marked as
draggable, while others are marked as
droppable. From that point onward, the user
can drag and drop various elements to move
them around in the browser, duplicate them,
create links between them or even drag in
files from outside of their browser.
Alongside obvious DOM events it exposes
like drag and drop, it also offers dragover,
which activates when the cursor is over a
valid drop target, and dragend, which fires
when a drag operation ends.
Sadly, nothing is without its shortcomings:
for this API, the main problem comes when
you’re working on mobile devices. While
Drag and Drop worked well with the resistive
streams of yore, few mobile browsers offer
support on capacitive screens. Due to that,
developers are well advised to provide
an alternate way to access drag and drop
induced functionality for mobile.Intersection Observer API
https://developer.mozilla.org/en-US/
docs/Web/API/Intersection_Observer_
API
Finding out if an
element is visible
isn’t easy, yet it is a
very important job.
Not only is this
information
interesting for advertisers but the data can
also be used to implement various effects
such as infinity scrolling or lazy loading.
The newly introduced Interaction
Observer API helps address this. It expects
the developer to provide two elements –
one parent container and one child whose
visibility is to be tracked. Developers then
set up a threshold that determines how much
of the element must be visible before the
callback function is invoked.Can I use it?
While the browser wars of the
1990s are over, this does not
mean that the marketplace
has become completely
harmonious. Various
competing API development
campaigns have created a
situation in which browser
support is less than unified.
One nice way around the
problem involves CanIUse
(https://caniuse.com/). This
relatively simple website
provides an overview of the
various APIs and the browser
versions required to use them.
When working with APIs
specified by Mozilla, CanIUse
can be misleading. In this
case, developers are well
advised to look directly into
the API proposal on the
Mozilla website – it contains
a detailed table explaining
browser compatibility (https://
developer.mozilla.org/en-US/
docs/Web/API).
No matter how the table
looks, keep in mind that quite
a bit of individual testing is
required. Fortunately, modern
workstations have more than
enough CPU power to handle
virtualisation tasks – if you
don’t test your website on
various different browsers
and operating systems, don’t
complain if your users find all
kinds of annoying issues when
running it in their particular
browser of choice.FEATURES
19 groundbreaking APIs