Communicating between browser tabs

Baedyl — Thu, 27 May 2021 15:12:59 +0000

I recently came across the issue of sharing some data between different tabs of the same web application. Using OAuth to retrieve an external provider's API key, saving it and finally displaying it on our platform. The first solution implied reloading the entire page. But the user experience was heavily compromised. In a SPA point of vue, imagine being in /process/emailing/... and redirected to /process 😕

While looking for a more suitable solution, I came across the Broadcast Channel API.

It allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin. Messages are broadcasted via a message event fired at all BroadcastChannel objects listening to the channel.

Let's start by creating a broadcast channel:

const channel = new BroadcastChannel('oauth')

Here we specified the name oauth that will later be used in other parts of our app to listen on any message sent through this channel.

channel.postMessage(data)

Here we send a message and, we can pass any object we like. In our case, we just needed an indication to know a certain task was done so the content did not really matter, feel free to pass useful data according to your need.

The data sent can be any of those supported values:

All primitive types, excluding symbols
Arrays
Object literals
String, Date, RegExp objects
Blob, File, FileList objects
ArrayBuffer, ArrayBufferView objects
FormData objects
ImageData objects
Map and Set objects

Now we need to listen to the same channel in other parts of our app. To do so, we create a channel with the same name and use the onmessage event handler

const channel = new BroadcastChannel('oauth')
channel.onmessage = (e) => {
  // Business logic here
  // data sent through the channel is available at e.data
}

And that's it! We successfully sent data from a different window, tab or frame to another 😀.

Finally, to make a channel stop receiving messages you can close it using:

channel.close()

You can achieve the same result using the SharedWorker API or even Local Storage but, personally I found this method the most intuitive. Do you know any other alternative ?

The version control tool your team deserve

Baedyl — Wed, 15 Apr 2020 18:11:00 +0000

Since there are many solutions for us to choose out there, We will focus primary on the two most popular of them known as GitLab and GitHub.

How many of us actually thought that these two platforms were related? Honestly... They share many things in common, starting with the fact that they are both version control manager tools. But, each one of them offers a set of specific features that make them stand out from the rest.
One of these platforms (GitHub) has recently granted some of its premium features for free. Cool, right? But how does this new bundle compares to a robust existing solution such as GitLab?

The main goal of this article is to give you enough insight to be able to make a choice for yourself/team that will suit your needs.
If you go over to https://github.com/pricing you will see a range of plans and features available in each one of them. Let's take a closer look at the free plan:

Unlimited public/private repositories
Unlimited collaborators
2,000 Actions minutes/month Free for public repositories
500MB of GitHub Packages storage Free for public repositories
Community Support

If you scroll further down you will see a bunch of other features. Some of them include:

Protected branches
Code owners
Multiple pull requests assignees
Repository insights
Required reviews

But pay attention, as some of them are only available on public repositories. And if privacy is one of your (or team) concerns, then these might not be as much appealing as they seem. Otherwise, if keeping the code public is not an issue for you (or team), then you could profit of a lot of features without spending a penny.

For Gitlab pricing and features, go over at: https://about.gitlab.com/pricing/
There you will automatically realize that besides offering the same common features seen previously in the free plan, you also get a large choice of other useful tools such as:

Support for multiple kubernetes clusters
Export issues in .csv files
Java, npm, .NET, and other repositories to make it easier to publish packages
Preview your changes with review apps
And more...

We will not define the term DevOps here, but GitLab also offers a set of useful DevOps tools that can make your (team) software development cycle a lot easier and more transparent. These tools include but are not limited to:

*DevOps* score
Auto *DevOps*
Performance testing
Cluster monitoring
Logging
Audit management accross *DevOps* Lifecycle

Although these features are not necessarily all included in the free plan, if you are willing to spend a few bucks to improve your (team's) workflow, GitLab is the platform you want to turn to since, these last features are not available on GitHub.
We will not go over the details of the entreprise plans. But they offer more flexibility and support. If you know another exciting version control manager tool that offers any feature not listed here, feel free to add it down!

DEV Community: Baedyl

Communicating between browser tabs

The version control tool your team deserve