DEV Community: Rameez Rami

How to detect if network connection is Online/Offline with Angular - RXJS

Rameez Rami — Sat, 07 Aug 2021 09:45:34 +0000

We all might be familiar with the JavaScript way of checking Online/Offline status. But in the case of Angular, we need to properly unsubscribe the events we are listening to, otherwise, we might cause unnecessary behaviors and memory leaks.

Plain JS



window.addEventListener("load", () => {
  this.networkStatus = navigator.onLine

  window.addEventListener("online", () => {
    this.networkStatus = true
  });

  window.addEventListener("offline", () => {
    this.networkStatus = false
  });
});

Angular Way



import { Component, OnDestroy, OnInit, VERSION } from '@angular/core';

import { fromEvent, merge, of, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  networkStatus: boolean = false;
  networkStatus$: Subscription = Subscription.EMPTY;

  constructor() {}

  ngOnInit(): void {
    this.checkNetworkStatus();
  }

  ngOnDestroy(): void {
    this.networkStatus$.unsubscribe();
  }

  checkNetworkStatus() {
    this.networkStatus = navigator.onLine;
    this.networkStatus$ = merge(
      of(null),
      fromEvent(window, 'online'),
      fromEvent(window, 'offline')
    )
      .pipe(map(() => navigator.onLine))
      .subscribe(status => {
        console.log('status', status);
        this.networkStatus = status;
      });
  }
}

You can see the demo here: https://angular-check-offline-online.stackblitz.io

or check the code here: https://stackblitz.com/edit/angular-check-offline-online?file=src/app/app.component.ts

Happy coding!!! 🎉🎉🎉

Brave Search Engine

Rameez Rami — Thu, 01 Jul 2021 07:59:57 +0000

Brave Search Engine 🤓
https://search.brave.com

Another bold move from my favorite browser Brave!! 👏

Beta version is live now and i'm lovin it 😎

GitHub has launched a new AI-based revolutionary tool on collaboration with OpenAI

Rameez Rami — Thu, 01 Jul 2021 07:38:29 +0000

GitHub Copilot!!!
https://copilot.github.com

GitHub has launched a new AI-based tool for Visual Studio Code that generates its own code. It can generate suggestions for whole lines or entire functions while we code.

Since GitHub has tons of open-source code on its hand, its AI Bot is trained on billions of lines of public code. This is why it's going to be super awesome comparing the existing similar solutions like Tabnine or IntelliCode.

This is going to be a revolutionary change in the way we write programs. People are going to code faster but might end up a bit lazy for minute code research. 😉

Click here to join the waiting list:
https://github.com/features/copilot/signup

You can find the VS Code extension here: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot