- read

New Browser APIs That Every Web Developer Should Know

Web Development

Shalitha Suranga 55

Photo by Christopher Gower on Unsplash, edited with Canva

Earlier, almost all websites were static and showed the same content for all online readers. The server-side programming concept that began with CGI (Common Gateway Interface) scripting helped web developers to change web content based on user inputs. JavaScript introduced the client-side programming concept and helped web developers implement dynamic web pages without consuming the server computation power. Standard browsers motivated web developers to do client-side web programming with various web APIs that they can use via JavaScript interfaces. Now, we can even run a program written in C on the web browser using the user’s computing resources thanks to WebAssembly technology.

Nowadays, standard browsers offer new web APIs focusing the developer productivity and those APIs can even replace popular client-side development libraries. For example, using the vanilla DOM API now looks the same as using DOM manipulation libraries like JQuery. The inbuilt sanitization API started replacing popular sanitization libraries. So, knowing inbuilt browser APIs helps you write up-to-date, standard, compatible, lightweight code without extra third-party dependency libraries.

In this story, I’ll explain some browser APIs and features you should know as a web developer. You can use these approaches in your web apps, own libraries, and experiments without increasing your web app bundle size with external dependencies. Even though you use fully-featured web frameworks, knowing these mechanisms helps you to understand web implementation internals!

Custom Events API

The browser’s JavaScript execution environment is single-threaded, but the browser-related processing is multi-threaded. So, the browser emits events to the JavaScript’s event queue to let JavaScript help developers do asynchronous, non-blocking development. DOM event bubbling and propagation features help developers build better interactions for web interfaces. Most web APIs use some pre-defined names (i.e., onlick , onkeydown, etc.) for DOM events, but the browser event system also supports custom events.