DEV Community

Cover image for 5 really cool web technologies to know! 🤩
Vaibhav Khulbe
Vaibhav Khulbe

Posted on

5 really cool web technologies to know! 🤩

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

➡️ Where can I get more resources?

Apart from the documentation linked above:

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:

WebRTC Support

93.91% usage

➡️ 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"); 
});
Enter fullscreen mode Exit fullscreen mode

➡️ Where can I get more resources?

Apart from the documentation linked above:

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:

Web Speech API Support

93.85% usage.

➡️ How to write the code?

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

➡️ Where can I get more resources?

Apart from the documentation linked above:

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):

WebXR Setup

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:

WebXR Support

7.09% usage.

➡️ 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);
  }
}
Enter fullscreen mode Exit fullscreen mode

➡️ Where can I get more resources?

Apart from the documentation linked above:

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:

Websocket Support

95.85% usage.

➡️ 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();
Enter fullscreen mode Exit fullscreen mode

➡️ Where can I get more resources?


Hope you liked the information. You can comment below with your thoughts about it.

And now...as always, enjoy a meme! 😆


The #DevHumour Corner 😂

Dev Humour Image


Some of my previous articles


Find me on


📫 Subscribe to my weekly developer newsletter 📫

Discussion (17)

Collapse
realtoughcandy profile image
RealToughCandy.io

Good list of resources. People certainly seem to enjoy WebRTC.

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author • Edited

Yes, Web RTC is so cool! Also, I'm a regular subscriber of your channel RTC 😜 and I'm also on your Discord :)

Keep up with the course reviews and stuff!

Collapse
realtoughcandy profile image
RealToughCandy.io

Awesome! Thanks for the support!

Collapse
absphreak profile image
ᴀʙʜɪɴᴀᴠ sʜᴀʀᴍᴀ✩

Great write-up Vaibhav!

I would add WASM to that list 💯.

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Yes, Web Assembly is also favoured. 🔥

Collapse
obaino82 profile image
Obaino82

Cool

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Thanks!

Collapse
paras594 profile image
Paras 🧙‍♂️

Nice article ! I like the web rtc and web animations api suggestion :)

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Thanks for reading!

Collapse
juanfrank77 profile image
Juan F Gonzalez

The web RTC is definitely something very interesting that has been on my radar for quite some time. Great that I showed up here 😀

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Cool! It's definitely an awesome technology to incorporate.

Collapse
nur_uddin_shohan profile image
NurUddinShohan

Great list!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Thanks! 😊

Collapse
iamshruti profile image
Shruti Goyal

CSS animations and web socket API are lit🔥

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author • Edited

Yess, they really are. Thanks for reading!

Edit: Just saw you are new here. Just follow me back here I can help you in a way or two :)

Collapse
madza profile image
Madza

good write-up 😉👍

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe Author

Thanks a lot! :)