Vaibhav Khulbe

Posted on Jan 9, 2021

5 really cool web technologies to know! 🤩

#webdev #html #javascript #css

Welcome to my first article in 2021! This time I'm not focusing much on writing articles every week but of course, I will continue to write useful content whenever I feel the need.

Okay okay, back to the grind...

There are some web technologies which you already know and must’ve mastered. Need examples? How about JavaScript libraries, PWAs, or even CSS Subgrids?

There are all quite common and used in most of the projects (well, I don't know about Subgrids though). But there are some more really cool ones out there about which you might or mightn’t have heard about.

Here are 5 of those about which I recently got to know about and they can be the future, who knows!

1. Web Animation API ✨

➡️ What is it?

The Web Animations API allows developers to describe animations to DOM elements by syncing animation with the help of the Timing and Animation model..

➡️ Why use it?

It combines the best of CSS animation and transition to give you the best performance without using any external optimizations.

You can:

Use both CSS or JavaScript.
Move animations from stylesheets to JavaScript easily.
You no longer rely on writing CSS properties and scoping classes onto elements to control the playback of animations.
You can now dynamically set values from properties to durations.

➡️ What about the browser support?

Here's what caniuse.com says. The red blocks mean it's not supported and the green ones symbolize it is supported. Everything in between the two colors means partial support:

Web Animations API support — 92.67% usage

➡️ How to write the code?

Usually, if I say you to write an animation code for an HTML element, you would do something like this:

#element {
  animation: animationName infinite 1s linear;
}

@keyframes animationName {
  0% {
    transform: rotate(0) translate3D(-50%, -50%, 0);
  }
  50% {
    transform: rotate(0) translate3D(-50%, 50%, 0);
  }
  100% {
    transform: rotate(360deg) translate3D(-50%, -50%, 0);
  }
}

For the Web Animation API you would do something like this:

// 1. Representing the keyframes
var animationName = [
  { transform: 'rotate(0) translate3D(-50%, -50%, 0)' },
  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)' }
];

// 2. Representing timing properties
var animTiming = {
  duration: 1000,
  iterations: Infinity
}

//3. Applying the animation
document.getElementById("element").animate(
  animationName,
  animTiming
}

➡️ Where can I get more resources?

Apart from the documentation linked above:

Let’s talk about the Web Animations API by Daniel C. Wilson.
Web Animations API improvements in Chromium 84 by Una Kravets and Kevin Ellis.
web-animations-js by Web Animations.

2. WebRTC 🔌

➡️ What is it?

WebRTC or Web Real-Time Communication is a technology that enables web apps and websites to store and stream audio/video media, as well as to exchange data between browsers without the need of any plugin or a third-party software/tool.

➡️ Why use it?

Because it supports:

Media capture.
Media streaming.
Video and audio conferencing.
File transfer.
Screen share.
Interfacing with legacy devices.

➡️ What about the browser support?

Here's what caniuse.com says:

➡️ How to write the code?

Here's a quick example of sending a text message:

// Signalling the server and greeting a user with a text message

//1. Get the WebSocket library 
var WebSocketServer = require('ws').Server; 

//2. Create a server at port 8080
var wss = new WebSocketServer({port: 8080});

//3. User connects to the sever 
wss.on('connection', function(connection) { 
   console.log("user connected"); 

   //4. Server gets a message from a connected user 
   connection.on('message', function(message) { 
      console.log("Got message from a user:", message); 
   }); 

   connection.send("Hello from server"); 
});

➡️ Where can I get more resources?

Apart from the documentation linked above:

samples repo by webrtc.
WebRTC website. -Real time communication with WebRTC by Google Codelabs.

3. Web Speech API 🗣

➡️ What is it?

The Web Speech API enables you to incorporate voice data into your web apps. It has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition).

➡️ Why use it?

In the year 2018, Google reported that 27% of the global online population is using voice search on mobile.

With speech-enabled, users can speak across the website to access the data they need.

➡️ What about the browser support?

Here's what caniuse.com says:

➡️ How to write the code?

I really liked the following example to showcase the speech API by Lindsay Greene, check out the article:

“Talk to Me” Beginner’s Tutorial: Using the web speech API | by Lindsay Greene | Voice Tech Podcast | Medium

Lindsay Greene ・ Jan 19, 2021 ・
Medium

➡️ Where can I get more resources?

Apart from the documentation linked above:

Speech to text in the browser with the Web Speech API by Phil Nash.
web-speech-api repo by mdn.
Voice to Text with Chrome Web Speech API by Benson Ruan.

4. WebXR Device API (formerly WebVR) 🎮

➡️ What is it?

The WebXR Device API implements the core of the WebXR feature set, from the selection of output devices, rendering of the 3D scenes to the chosen device, and managing motion vectors created using input controllers.

But what is this WebXR?

Just like VR is Virtual Reality, AR is Augmented Reality and MR is Mixed Reality, in a similar fashion WebXR combines a group of standards that are used together to support rendering 3D scenes for VR, or for adding graphical imagery to AR.

➡️ Why use it?

Although all these 'reality' based technologies are starting to boom, and you need a setup like below (which isn't much popular yet):

Still, with this enabled you can:

Render a 3D scene at an appropriate frame rate.
Mirror the output to a 2D display.
Create vectors representing the movements of input controls.
Use the full potential of technologies like ARCore or use hardware like Oculus Rift.
Gain the benefit of WebGL's rich development tool ecosystem and a large

➡️ What about the browser support?

Here's what caniuse.com says:

➡️ How to write the code?

To access the WebXR API, we use navigator.xr property of the current window which returns the XRSystem object.

// Initiating the XR interface to use
class App {
  ...
  async init() {
    if (navigator.xr && XRSession.prototype.requestHitTest) {
      try {
        this.device = await navigator.xr.requestDevice();
      } catch (e) {
        this.onNoXRDevice();
        return;
      }
    } else {
      this.onNoXRDevice();
      return;
    }

    document.querySelector('#enter-ar').addEventListener('click', this.onEnterAR);
  }
}

➡️ Where can I get more resources?

Apart from the documentation linked above:

WebXR website.
Building an augmented reality (AR) application using the WebXR Device API by Google Codelabs.
Using WebXR With Babylon.js by Preston So.

5. WebSocket 🎛

➡️ What is it?

The WebSocket API makes it possible to open a two-way interactive communication session between the client and a server.

➡️ Why use it?

You can send messages to a server and receive event-driven responses without having to poll the server for a reply. So you can use it on social feeds, multiplayer games, collaborative environment, etc.

➡️ What about the browser support?

Here's what caniuse.com says:

➡️ How to write the code?

// 1. Create a new WebSocket
var exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocolOne");

//2. Send data to the server
exampleSocket.send("Text to server");

//3. Closing the connection
exampleSocket.close();