DEV Community: Deepankar Bhade

Understanding .ics file with RFC 5545

Deepankar Bhade — Thu, 04 Aug 2022 15:00:37 +0000

I was stuck in a shop for hours yesterday because it was raining heavily. I got bored so decided to pass some time by connecting my work google calendar to the Apple calendar in iOS.

As I was doing that found the "Add Subscription Calendar" option which had a SUBSCRIPTION URL to a .ics file. I got curious & started reading more about ics files.

In this blog, we will demystify the .ics file + also create our own and integrate it into our calendars! If you're using google calendar you can export your .ics file from the settings.

What's a .ics file?

The filename extension of ics is to be used for files containing calendaring and scheduling information. The file format was specified in RFC 5545 which defined the data format for representing and exchanging calendaring and scheduling information such as events, to-dos, journal entries, and free/busy information, independent of any particular calendar service or protocol.

If you open any .ics file you should see something like this

BEGIN:VCALENDAR
PRODID:-//Google Inc//Google Calendar 70.9054//EN
VERSION:2.0
BEGIN:VEVENT
DTSTART:20220626T093000Z
DTEND:20220626T133000Z
DTSTAMP:20220630T174300Z
UID:cc071185e5d1409d93fc60098f91f3e1@google.com
CREATED:20220623T183246Z
LAST-MODIFIED:20220623T183254Z
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:MEETUP
END:VEVENT
END:VCALENDAR

On 1st impression, this kinda looks like a markup language with the BEGIN and END words. Let's see it in a tree format:

vcalendar
  - vevent
    - dtstart- 2022-06-26T09:30:00Z
    - dtend- 2022-06-26T13:30:00Z
    - dtstamp- 2022-06-30T17:43:00Z
    - uid- cc071185e5d1409d93fc60098f91f3e1@google.com
    - created- 2022-06-23T18:32:46Z
    - last-modified- 2022-06-23T18:32:54Z
    - sequence- 0
    - status- CONFIRMED
    - summary- MEETUP
  - prodid -//Google Inc//Google Calendar 70.9054//EN
  - version - 2.0

Just like HTML consists of Document Object model ics is built on Core Object which is a collection of calendaring and scheduling information. The object consists of a sequence of calendar properties and one or more calendar components.

iCalendar Object

The above example we saw is the most basic representation of an iCalendar object. The first line and last line of the iCalendar object must contain a pair of iCalendar object delimiter strings: BEGIN & END in our case.

Calendar Components & Properties

The body of the iCalendar object consists of a sequence of calendar properties and one or more calendar components.

Here DTSTART & DTEND are properties that specify calendar component begin/end.

BEGIN:VCALENDAR
...
DTSTART:20220626T093000Z
DTEND:20220626T133000Z
...
END:VCALENDAR

You might have noticed VEVENT in the ics files it's a Calendar component to provide a grouping of component properties that would describe an event.

Now let's create our event and add it to our google calendar. To start let's create an iCalendar Object with property VERSION set to 2.0 (latest).

BEGIN:VCALENDAR
VERSION:2.0
END:VCALENDAR

Now let's add a new event by defining an Event Component. It would begin/end with VEVENT we will add UID which is a required property. Every event has a starting/ending time to define this in an event we will use DTSTART and DTEND.

We will use the date with local time For example, the following represents January 18, 1998, at 11 PM: 19980118T230000.

You can more read about the time formats in RFC doc.

BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
UID:1656613525081-91990@deep.dpnkr.in
DTSTART:20220701T090000
DTEND:20220701T100000
END:VEVENT
END:VCALENDAR

Now that our event is in place we will add some meta properties like location, summary.

BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
UID:1656613525081-91990@deep.dpnkr.in
DTSTART:20220701T090000
DTEND:20220701T100000
SUMMARY:Test Event
DESCRIPTION:This is test event for my blog
LOCATION:https://dpnkr.in
END:VEVENT
END:VCALENDAR

Now that this is in place let's try to import this in Google calendar, you can do it in settings -> import & export -> upload file. Upload the file and you should see our event created from the ics file.

I hope this gives your an overview of the ics file there are a lot of things like how recurring events are created, to-do component which I would recommend reading more into if you're interested.

A quick favor: was anything I wrote incorrectly or misspelled, or do you still have questions? Feel free to message me on twitter.

Until then, thanks, and have a great day.

Daytime Protocol RFC-867 in Golang

Deepankar Bhade — Fri, 08 Apr 2022 12:54:05 +0000

Daytime service is a useful debugging and measurement tool. A daytime
service simply sends a current date and time as a character string
without regard to the input.
Based on RFC-867

We will be building a Daytime service using TCP in this short example. We will create a server listening for TCP connections on TCP port 13, after the connection is established we will send back the date response.

Sounds easy? Because it is! I have ignored handling errors in the code to make it simple.

package main

import (
  "net"
  "time"
)

func main() {
  addr := ":13"
  tcpAddr, _ := net.ResolveTCPAddr("tcp", addr)
  // listens on PORT 13
  listener, _ := net.ListenTCP("tcp", tcpAddr)
  for {
    // wait for client to connect
    // when client connects, the accept call returns connection
    conn, err := listener.Accept()
    if err != nil {
      continue
    }
    daytime := time.Now().String()
    // writes data to the connection
    conn.Write([]byte(daytime))
    conn.Close()
  }
}

Then run this code and test it out using telnet you will see the response.

telnet 127.0.0.1 13

Hope you’ve learned something new, thanks for reading this tiny blog!

Understanding Goroutines & Channels with Ping Pong game

Deepankar Bhade — Wed, 06 Apr 2022 13:59:49 +0000

A lesser-known fact about me is that I am a State level Table tennis player, which I played for a good 5 years. Another fun fact: Table tennis in Chinese is called "Ping Pong". But we aren't here for this BS.

"Ping Pong" in reference to networking, is communication where ping is a transmitted packet to a destination computer, and the pong is the response. In this blog, we will implement this ping-pong using goroutines and channels in golang.

Let's understand Goroutines & channels briefly

Goroutines

If we run the following code we would only see the "First" function running and the code for "Second" never executes. How do we make the first function run asynchronously?

package main

import (
  "fmt"
  "time"
)

func loop(msg string) {
  for {
    fmt.Println(msg)
    time.Sleep(time.Second)
  }
}

func main() {
  loop("First")
  loop("Second")
}

Goroutines helps you create a new thread for execution and will execute concurrently upon calling. Now if we run this code we would see both of our functions running simultaneously.

package main

import (
  "fmt"
  "time"
)

func loop(msg string) {
  for {
    fmt.Println(msg)
    time.Sleep(time.Second)
  }
}

func main() {
  go loop("First")
  loop("Second")
}

Channels

Channels are the pipes that connect concurrent goroutines. You can send values into channels from one goroutine and receive those values into another goroutine. In this simple example, we create a new channel send value to the channel from a goroutine, and receive it in the main goroutine.

package main

import "fmt"

func main() {
    // creating a new channel
    messages := make(chan string)

    // sending a value into a channel
    go func() { messages <- "ping" }()

    // receiving value from the channel
    msg := <-messages
    fmt.Println(msg)
}

In an ideal game of table tennis "Player A" hits the ball and "Player B" on receiving hits the ball back to "Player A".

Now let's think that Player A sends a ping and Player B sends a pong back and the ball is our packet. In an ideal table tennis match Player B would always wait for the ball to come i.e. ping and respond with pong. Player A then similarly waits for pong and sends back Ping again.

Each player has its own goroutine since they are playing asynchronously. But in an ideal game, there still would be some sync between the players. For example, Player A needs to hit back only if Player B has returned the ball. To maintain this communication we create channels to communicate between the goroutines (players).

Player A would be "Pinger" its main job would be to wait for Ping and upon receiving send back a pong & Player B would be "Ponger" would wait for pong and upon receiving send back a ping. These ping & pong would be the channels that would help us connect our concurrent goroutines.

Here's an implementation of pinger and ponger, both of these handle ping, pong channels as explained above.

/*
Would receive from ping channel
Wait for 1 second
Then send to pong channel
*/
func pinger(ping <-chan string, pong chan<- string) {
  for m := range ping {
    printAndDelay(m)
    pong <- "pong"
  }
}

/*
Would receive from pong channel
Wait for 1 second
Then send to ping channel
*/
func ponger(ping chan<- string, pong <-chan string) {
  for m := range pong {
    printAndDelay(m)
    ping <- "ping"
  }
}

Now to start the game we need to run both pinger & ponger concurrently with the help of goroutines. We will also need to start the game by sending a ping.

package main

import (
  "fmt"
  "time"
)

/*
Would receive from ping channel
Wait for 1 second
Then send to pong channel
*/
func pinger(ping <-chan string, pong chan<- string) {
  for m := range ping {
    printAndDelay(m)
    pong <- "pong"
  }
}

/*
Would receive from pong channel
Wait for 1 second
Then send to ping channel
*/
func ponger(ping chan<- string, pong <-chan string) {
  for m := range pong {
    printAndDelay(m)
    ping <- "ping"
  }
}

func printAndDelay(msg string) {
  fmt.Println(msg)
  time.Sleep(time.Second)
}

func main() {
  ping := make(chan string)
  pong := make(chan string)

  // Player A
  go pinger(ping, pong)
  // Player B
  go ponger(ping, pong)

  // Player A starts the game
  ping <- "ping"

  for {
  }
}

Hope you’ve learned something new, thanks for reading!

A quick favor: was anything I wrote incorrectly or misspelled, or do you still have questions? Feel free to message me on twitter.

My Open Source Journey

Deepankar Bhade — Mon, 14 Mar 2022 12:53:18 +0000

For the best experience head over to my original blog post.

It was early 2010s, my Dad introduced to me this word "Linux". A 10yo old me was curious to know more about it so I did what most software engineers do -> Googling.

This is when I heard the word "open source" for the 1st time in my life. Every popular software I read about had the term "open source" in it. As I couldn't understand the meaning of it I just assumed that every cool software is open source xD.

It wasn't until after an almost a decade I got into college, covid exploded and I started programming. In the 2nd year of my college we had Java as our subject and we had assignments around it. To help everyone in my class I created a solution repository to all our assignments. Check out the repo here.

I never realised this but this was my 1st step into open source here's how. I created solutions for these questions that helped my friends in completing their assignments. But not everything was correct in it, there were thing that weren't done correctly. Luckily some of my friends contributed to it and made it even better.

And this is what open source is, People contribute to a project by fixing issues, adding features and make it much better. I didn't actually start contributing was only collaborating with my college friends on some projects.

Later in January 2021 I become the recipient of GDC fellowship and got mentored by amazing people like Jacob Sherin & Jasim Basheer. I was completing my capstone project in the program, my mentors used to create github issues for things that can be improved/added and I used to created pull requests for them. This process of (issue -> PR) also got me my life's 1st code review. This wasn't a 1-liner comment or something it was a very insightful discussion you can check out some those conversations here:

My true spirit to get into open source wasn't until I attended the talks of Goutham Veeramachaneni & Vishnu Gopal. Both these people are the sole reason on Why I actually got into open source today.

This talk by Goutham gave a lot insights on getting started with open source and also learning programming, building projects and all. It's literally a gold mine for people who want to get started with this stuff so I highly reccomend it to everyone.

After getting motivated I started looking for some open source projects to contribute to, being a massive fan of Vercel I checked their open source projects out. This is when I found Virtual events starter kit other than the project being amazing it also had an easy issue open I knew this was my chance to make a contribution.

And I took it! On 9th March 2021 I created this Pull request which got merged marking my 1st ever Open source contribution. At the end of this blog you will find out how this contribution meant so much to me.

After this humble begining I started contributing to libraries I was using in my projects some of which are geist-react, leerob's site, html-to-rescript, dogehouse and much more.

On 17th march I joined coronasafe organization which is a free and open-source disaster management system that is used by National Health Mission, Government of India and various state governments for reimaging digital war rooms.

At the end of March I started working on the Arike project, tho I didn't contribute much to this project it was great learning trunk-based development & pair programming.

In April As India was witnessing its devastating 2nd wave of covid-19. Due to this, there was a shortage of oxygen cylinders, medicines, hospital beds.

To solve this problem we started working on the "Life project" which was started with less than 40 volunteers grew to over 900+ volunteers and 15+ organizatons from around the globe in under 1 month. Because of the project, I got to closely work with executives from NYSE, Disney+Hotstar, Dropbox and many more.

I am grateful for Bodhish Thomas for mentoring me throughout the project. This project truly showcases how much power an open source project .

Due to overexertion, I got burned out for the 1st time in my life. Since the project was stabilizing I decided to take some time off. Some weeks later I joined 100ms.

Here I built and maintained many things including: 100ms's docs, Web-app, Clubhouse clone, the UI library and many closed source projects.

Along with this I also loved contributing to this cool project MacOS on Web by Puru.

Also I wasn't always able to contribute to project many times I failed to understand the fix but I always learned something new, for example this issue I got to learn about how notification works in Gnome even though I wasn't able to find the fix xD.

The best way to find project to contribute to are the one's your using in your life. I use Fig for terminal autocompletion and so I contributed to it's autocomplete api.

In December I started working on a project in 100ms which was in collaboration with ▲ Vercel. And guess which project was it? The same project where I did my 1st contribution to!

Never thought I would get an invite from the OG Lee Robinson himself.

One thing that keeps me pushing to contribute to open source is Linus Torvalds who still contributes to linux even after 20+ years of its creation.

So why stop? Just push it.

Feel fee to text me on twitter if you have any questions around getting start with open-source or anything. Have a great day!

Building a Video chat application in Remix

Deepankar Bhade — Sun, 20 Feb 2022 12:44:37 +0000

For the best experience head over to my original blog post.

We will be building a Video chat application with Remix the hottest framework at the moment and 100ms React sdk. This would be detailed guide going from setting up the project to deploying it on ▲ Vercel so stay tuned.

For the best expeirence read the blog on

What is 100ms first of all? 100ms is a cloud platform that allows developers to add live video and audio conferencing to Web, Android and iOS applications. We will be using it's polished react sdk in this project.

Let's start our project setup, we will run the following command and make sure to choose the Vercel template since we will be deploying on it.

npx create-remix@latest
# choose vercel as deployment target

Now let's setup things on the 100ms side! It's very straight forward, go to 100ms dashboard create an account it will ask you to setup an app carry on the steps. You would see an app being deployed. You can also follow this guide if you're stuck somewhere.

Now let's install 100ms React sdk & icons to our project.

## npm
npm install --save @100mslive/react-sdk@latest
## yarn
yarn add @100mslive/react-sdk@latest @100mslive/react-icons@latest

Let us start with initializing the library. We need to wrap the entire application with <HMSRoomProvider /> component this let's us use the hooks for state and actions.

// root.tsx
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from 'remix';
import type { MetaFunction } from 'remix';
import { HMSRoomProvider } from '@100mslive/react-sdk';

export const meta: MetaFunction = () => {
  return { title: 'Remix Video Chat' };
};

export default function App() {
  return (
    <html lang='en'>
      <head>
        <meta charSet='utf-8' />
        <meta name='viewport' content='width=device-width,initial-scale=1' />
        <Meta />
        <Links />
      </head>
      <body>
        <HMSRoomProvider>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
          {process.env.NODE_ENV === 'development' && <LiveReload />}
        </HMSRoomProvider>
      </body>
    </html>
  );
}

useHMSStore will give you the complete state of the application and useHMSActions will help us perform actions such as joining the room, muting our audio/video, and sending messages.

Setting up env

We will need to generate an Auth Token to join a Room, you can get your Token endpoint from Developer section in 100ms dashboard.

Follow this guide to setup of environment variables in remix.

Now create a .env file and add your token endpoint there.

HMS_TOKEN_ENDPOINT=<YOUR-TOKEN-ENDPOINT>

That's it.

Flow of the app

To generate the Auth token we need to 2 things the room_id and the role name. We will get these params via the url. We will be using API routes and Data loading two of the most powerful features of remix to accomplish this.

If a person visits the url /meeting/:roomId/:role we can extract those params and generate the token. How do we do this in remix? We wil be defining a route in our remix config file. So now if someone visits /meeting/* we will render the <Meeting /> component.

// remix.config.js
/**
 * @type {import('@remix-run/dev/config').AppConfig}
 */
module.exports = {
  appDirectory: 'app',
  assetsBuildDirectory: 'public/build',
  publicPath: '/build/',
  serverBuildDirectory: 'api/_build',
  ignoredRouteFiles: ['.*'],
  routes(defineRoutes) {
    return defineRoutes((route) => {
      route('/meeting/*', 'meeting.tsx');
    });
  },
};

We will now create some files:

/app/meeting.tsx -> generates token, renders Live component
/app/components/Live.tsx -> renders Join or Room component
/app/components/Join.tsx -> will contain a form to join room
/app/components/Live.tsx -> live audio/video chat here

Generate Auth token

To generate the Auth token we will be making a fetch call to the endpoint pass roomId and role get the token and also handle some errors.

Each route module in remix can export a component and a loader. useLoaderData will provide the loader's data to your component. Inside this loader function we will call the fetch api.

Copy the CSS code inside global.css filefrom here.

// /app/meeting.tsx
import { useLoaderData } from 'remix';
import type { LoaderFunction } from 'remix';
import styles from '~/styles/global.css';
import Live from '~/components/Live';

interface ResponseType {
  error: null | string;
  token: null | string;
}

export const links = () => {
  return [{ rel: 'stylesheet', href: styles }];
};

export const loader: LoaderFunction = async ({ params }: any) => {
  const endPoint = process.env.HMS_TOKEN_ENDPOINT;
  const data: ResponseType = {
    token: null,
    error: null,
  };
  const slug = params['*'];
  const url = slug?.split('/');
  if (url?.length === 2) {
    try {
      const response = await fetch(`${endPoint}api/token`, {
        method: 'POST',
        body: JSON.stringify({
          room_id: url[0],
          role: url[1],
        }),
      });
      if (!response.ok) {
        let error = new Error('Request failed!');
        throw error;
      }
      const { token } = await response.json();
      data['token'] = token;
    } catch (error) {
      data['error'] = 'Make sure the RoomId exists in 100ms dashboard';
    }
  } else {
    data['error'] = 'Join via /:roomId/:role format';
  }
  return data;
};

export default function MeetingSlug() {
  const { token, error } = useLoaderData<ResponseType>();
  return (
    <div>
      {!(token || error) ? <h1>Loading...</h1> : null}
      {token ? <Live token={token} /> : null}
      {error ? (
        <div className='error'>
          <h1>Error</h1>
          <p>{error}</p>
          <p>
            Get RoomId from{' '}
            <a href='https://dashboard.100ms.live/rooms'>here</a> and join with
            the role created in it :)
          </p>
        </div>
      ) : null}
    </div>
  );
}

We are handling errors here and also showing some helpful error messages. Upon successful token generation we will pass it on to the <Live /> component.

Now if the person has joined the room we will show the Join form i.e. <Join /> component and if joined we will render <Room /> component. But how do we know if the person has joined or not?

We can use helpful selector functions to fetch data from the 100ms store. Selector functions would fetch you information from the state at any point in time, it can be anything ranging from "how many people are in the room?" to "is my audio on or not?". The answer to all these questions is the store.

We can know if the person has joined the room with the help of selectIsConnectedToRoom selector function. We will also further pass the token to <Join/> component.

// /app/components/Live.tsx
import { selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
import React from 'react';
import Join from '~/components/Join';
import Room from '~/components/Room';

const Live: React.FC<{ token: string }> = ({ token }) => {
  const isConnected = useHMSStore(selectIsConnectedToRoom);
  return <div>{isConnected ? <Room /> : <Join token={token} />}</div>;
};

export default Live;

Now if you start the server and go to /meeting/:roomId/:role you should be able to see this Join component because we haven't joined the room.

To get your roomId visit Rooms section
And make sure to use the role that is created in the roomId.

Now let's work on creating the form. To join a room we need to call the join() function from the useHMSActions. It needs userName which we will get from the input and authToken from the prop.

// /app/components/Join.tsx
import { useHMSActions } from '@100mslive/react-sdk';
import React, { useState } from 'react';

const Join: React.FC<{ token: string }> = ({ token }) => {
  const actions = useHMSActions();
  const [name, setName] = useState('');
  const joinRoom = () => {
    actions.join({
      authToken: token,
      userName: name,
    });
  };
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        joinRoom();
      }}
    >
      <h1>Join Room</h1>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        required
        type='text'
        placeholder='Enter Name'
        maxLength={20}
        minLength={2}
      />
      <button type='submit'>Join</button>
    </form>
  );
};

export default Join;

Now if fill the form and submit you should be seeing the <Room /> component being rendered. You won't see anything yet because we haven't added anything so let's do it.

For the <Room /> component we will create the following components:

/app/components/Header.tsx -> header
/app/components/Conference.tsx -> Live Audio/Video here
/app/components/Footer.tsx -> will have audio/video controls and leave button

// /app/components/Join.tsx
import Conference from './Conference';
import Footer from './Footer';
import Header from './Header';

const Room = () => {
  return (
    <div>
      <Header />
      <Conference />
      <Footer />
    </div>
  );
};

export default Room;

Now how do we know "Who all are in my room?" for that we can use selectPeers selector functions for this. This will give us an array of peers (people in the room).

All we gotta do is Map over this array and render a <Peer /> component. This will show the video of the person. We will create the component in the same file.

// /app/components/Conference.tsx
import React from 'react';
import { HMSPeer, selectPeers, useHMSStore } from '@100mslive/react-sdk';

const Conference = () => {
  const peers = useHMSStore(selectPeers);
  return (
    <main>
      {peers.map((peer) => (
        <Peer key={peer.id} peer={peer} />
      ))}
    </main>
  );
};

const Peer: React.FC<{ peer: HMSPeer }> = ({ peer }) => {
  return <div className='tile'>{/* Render video here */}</div>;
};

export default Conference;

Rendering Video

To render the video, we need to call attachVideo method of useHMSActions, which accepts a trackId and a DOM element.

But we have abstracted this implementation inside useVideo hook for ease. This hook will return a ref given a video trackId. The returned ref can be used to set on a video element meant to display the video. The hook will take care of attaching and detaching video, and will automatically detach when the video goes out of view to save on bandwidth.

// /app/components/Conference.tsx
...

const Peer: React.FC<{ peer: HMSPeer }> = ({ peer }) => {
  return (
    <div className='tile'>
      <Video mirror={peer.isLocal} videoTrack={peer.videoTrack} />
    </div>
  );
};

const Video = ({ videoTrack, mirror }: any) => {
  const ref = useVideo(videoTrack);
  return (
    <video
      className={mirror ? 'mirror' : ''}
      ref={ref}
      autoPlay
      muted
      playsInline
    />
  );
};

Now join the room, you would be asked for permission to give camera access click on "Allow" and Voila! You can see yourself.

Muting/Unmuting

Right now we are publishing both audio and video feed of the user whenever they join the room. We may want to allow the user to mute/unmute their own tracks - both audio and video.

If you specifically need granular data like knowing the current video status you can use selectIsLocalVideoEnabled and for audio selectIsLocalAudioEnabled instead.

In this case, we can use useAVToggle hook which will give us the current audio/video status of the user and also give us functions to toggle them.

// /app/components/Footer.tsx
import { useAVToggle, useHMSActions } from '@100mslive/react-sdk';
import {
  MicOffIcon,
  MicOnIcon,
  VideoOffIcon,
  VideoOnIcon,
  HangUpIcon,
} from '@100mslive/react-icons';

function Footer() {
  const {
    isLocalAudioEnabled,
    isLocalVideoEnabled,
    toggleAudio,
    toggleVideo,
  } = useAVToggle();
  const actions = useHMSActions();
  return (
    <footer>
      <button onClick={toggleAudio}>
        {isLocalAudioEnabled ? <MicOnIcon /> : <MicOffIcon />}
      </button>
      <button onClick={toggleVideo}>
        {isLocalVideoEnabled ? <VideoOnIcon /> : <VideoOffIcon />}
      </button>
      <button onClick={() => actions.leave()}>
        <HangUpIcon />
      </button>
    </footer>
  );
}

export default Footer;

Now you should be able to toggle audio/video and leave room. But how will the other person know if my audio/video is off? For that we need to show the status on the video tile.

We will get user's current audio/video status via selectIsPeerAudioEnabled and selectIsPeerVideoEnabled these selector function need peerId as argument. We will show user's avatar when camera is off, show audio status and the user's name. Let's refactor our
<Peer /> component.

Copy the code for <Avatar /> component from here.

// /app/components/Conference.tsx
import React from 'react';
import {
  HMSPeer,
  selectIsPeerAudioEnabled,
  selectIsPeerVideoEnabled,
  selectPeers,
  useHMSStore,
  useVideo,
} from '@100mslive/react-sdk';
import Avatar from './Avatar';
import { MicOffIcon, MicOnIcon } from '@100mslive/react-icons';

const Conference = () => {
  const peers = useHMSStore(selectPeers);
  return (
    <main>
      {peers.map((peer) => (
        <Peer key={peer.id} peer={peer} />
      ))}
    </main>
  );
};

const Peer: React.FC<{ peer: HMSPeer }> = ({ peer }) => {
  const isAudioOn = useHMSStore(selectIsPeerAudioEnabled(peer.id));
  const isVideoOn = useHMSStore(selectIsPeerVideoEnabled(peer.id));
  return (
    <div className='tile'>
      {!isVideoOn ? <Avatar name={peer.name} /> : null}
      <span className='name'>{peer.name}</span>
      <Video mirror={peer.isLocal} videoTrack={peer.videoTrack} />
      <span className='audio'>
        {!isAudioOn ? <MicOffIcon /> : <MicOnIcon />}
      </span>
    </div>
  );
};

const Video = ({ videoTrack, mirror }: any) => {
  const ref = useVideo(videoTrack);
  return (
    <video
      className={mirror ? 'mirror' : ''}
      ref={ref}
      autoPlay
      muted
      playsInline
    />
  );
};

export default Conference;

You can watch this demo video.

And that's it. Isn't it amazing how we got our entire application done in minimal, easy to understand code?

Deep-Codes / remix-video-chat

Video chat app with Remix and 100ms react sdk in less than 100 lines of code.

Remix Video Chat

Video chat app with Remix and 100ms React SDK in less than 100 lines of code.

Try out the Public demo

Read this Detailed blog for understanding the code and setup.

View on GitHub

You can find the code for this project here.

Deploy on Vercel

If you want to directly deploy the app just click the button below and add token endpoint and that's it.

If you're interested in adding more features then refer to our docs. Here's some links

Thank you have a great day. Feel fee to text me on twitter if you have anty questions around this.

Found a change in next.config.js. Restart the server to see the changes in effect

Deepankar Bhade — Sun, 30 Jan 2022 09:30:33 +0000

For much better experience read this from the original blog

event - compiled successfully in 9.2s (227 modules)
wait  - compiling /...
event - compiled successfully in 782 ms (307 modules)

> Found a change in next.config.js. Restart the server to see the changes in effect.

Looks Familiar? If you're next.js developer there's a good chance that you have encountered this message in the terminal on changing the next.config.js.

So what is this blogpost even around?

I was curious to know how does next.js knows that I have modified the file, to start my expedition I just dived into the Next.js source code and saw the implementation.

The implementation is pretty simple, let's try to build something similar to it. So let's begin by creating a next.config.js and watch.js inside a directory.

Next.js uses watchFile to listen for file changes, the interface of fs.watchFile is as follows:

fs.watchFile(filename[, options], listener)
Watches for changes on filename. The callback listener will be called each time the file is accessed. The listener gets two arguments the current stat object and the previous stat, these are of the type Stats
fs.Stats object provides information about a file. You can refer to the entire interface here. We will be using the size property which returns the size of the file in bytes helping us to identify if the file was modified or not.

Let's create a dummy config file.

const config = {
  name: 'Deepankar',
  age: 20,
};

And then the watcher implementation, which would call the listener function based on the size stats. The greater than 0 check makes sure that the file isn't deleted.

const { watchFile } = require('fs');
const configFile = `next.config.js`;

watchFile(`${process.cwd()}/${configFile}`, (cur, prev) => {
  if (cur.size > 0 || prev.size > 0) {
    console.log(
      `\n> Found a change in ${configFile}. Restart the server to see the changes in effect.`
    );
  }
});

Now run node watch.js and modify the file and voila!

So yeah it was pretty simple but I love to understand how things work behind the scenes. here's that part from next.js source code.

if (command === 'dev') {
  const { CONFIG_FILES } = require('../shared/lib/constants')
  const { watchFile } = require('fs')

  for (const CONFIG_FILE of CONFIG_FILES) {
    watchFile(`${process.cwd()}/${CONFIG_FILE}`, (cur: any, prev: any) => {
      if (cur.size > 0 || prev.size > 0) {
        console.log(
          `\n> Found a change in ${CONFIG_FILE}. Restart the server to see the changes in effect.`
        )
      }
    })
  }
}

Next.js loops over the CONFIG_FILES which are basically ['next.config.js', 'next.config.mjs'] depending on if you're using the ES6/CJS flavour. The rest of the code is exactly how we did it.

That's it! As much as I loved writing this blog, I hope you folks found this interesting too. There are gonna more such "Next.js deep dive" blogs coming up soon so stay tuned and follow me on Twitter for updates.

Fixing Next.js router query param returning undefined on initial render

Deepankar Bhade — Thu, 06 Jan 2022 13:47:40 +0000

While building a React application using next.js, I stumbled upon an issue that kept me stuck for a good amount of time. I don't want people to do the same therefore I would be covering the fix in this blog. Feel free to skip to fix if you want to.

Issue

First, let's just try to reproduce this issue. You might encounter some cases where you need access to query params of a route. Nextjs makes it easy to deal with routes by using the useRouter hook. Here's an example code that you can place inside the /pages directory to try it out.

import { useRouter } from 'next/router';
import React from 'react';

const Test = () => {
  const router = useRouter();
  console.log(router.query);
  return <div>Hello World</div>;
};

export default Test;

Now let's visit the router with some param and see the logs. In my case, I visited /test?name=Deepankar.

{}
{name: 'Deepankar'}

As you can see in the 1st render we don't have the access to the param. So how do we know when the router fields are updated client-side and ready for use?. Now let's look into the fix.

Fix

useRouter hook returns isReady field which is a boolean value that denotes if the router fields are updated client-side and ready for use. Accessing isReady field should be done inside of useEffect methods and not for conditionally rendering on the server.

import { useRouter } from 'next/router';
import React from 'react';

const Test = () => {
  const router = useRouter();
  React.useEffect(() => {
    if (router.isReady) {
      // Code using query
      console.log(router.query);
    }
  }, [router.isReady]);
  return <div>Hello World</div>;
};

export default Test;

Reason

Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).

After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

References:

How I self-hosted my own website analytics with Umami

Deepankar Bhade — Wed, 08 Dec 2021 12:38:41 +0000

I absolutely love over-engineering this site. After months of procrastinating I finally rolled out my blog to this beautiful world. I stumbled upon this part of adding analytics and my needs were simple, lightweight, ethical, great if open-source and privacy-friendly Google Analytics alternative. So I signed up for Plausible , Fathom & Panelbear and started using them.

I didn't want to miss any other alternatives so I asked on Twitter on what people use in their sites and that's when I heard of umami. Here's a rough comparison of 4 of them.

Tool	Open Source	Pricing	Bypass ad-blockers
umami	✅	Free	✅
Plausible	✅	$6/month	❌
Panelbear	❌	Free (1000visits)	❌
Fathom	❌	$14/month	❌

Umami was clearly a winner here so decided to self-host it and after 5mins I had my very own analytics up. In this article, I would explain how you can do the same.

There are many ways you can self-host umami you can find all ways here. Deciding to use Railway was a no-brainer for me because it would set up both the Postgres DB and Frontend app (analytics dashboard) therefore making my life easy.

To get started click on the "Deploy on railway" button, you would be prompted to sign up if you haven't already and to connect it to a GitHub repository. After you're done go and click "Deploy".

This would create a new GitHub repo and start building the project. This generally takes 2-3min for deployment is not that much .

This would set up Prisma, Nextjs and also create an admin user. You should see a deployed link go ahead and click on it.

Umami installation will create a default administrator account with the username admin and the password umami. Make sure to reset the password in the settings you can refer to official docs for reference.

You should be able to see a dashboard-like interface but hey where are the sites? You can add websites to track in the settings. Now to add them to your sites just click on the code icon and place the following code in the <head> section of your website.

That's it? Yes! isn't it amazing how quickly you can provision and deploy it? Now if you visit your website you should see the dashboard getting updated. I would now cover some things I added to complete my setup.

I added a custom domain to the dashboard for that you can refer to this official guide from the railway.

One thing that was important for me is skipping analytics from the dev environment and from my personal visits.

Make sure to add data-domains attribute to the script to avoid sending analytics other than the production environment.



<script
  async
  defer
  data-domains='dpnkr.in'
  src='https://umami.is/umami.js'
  data-website-id='1313u131-85ee-42d4-97d2-8ba80de140a6'
></script>

If you're like me who visits his own site too much then you shouldn't send the analytics to the dashboard to make this possible add umami.disabled = true

And that's a wrap. Hope you find this interesting feel free to connect with me on Twitter if you have any questions. Cheers!

Building TailwindCSS with Sass

Deepankar Bhade — Wed, 01 Dec 2021 13:27:08 +0000

According to the 2020 state of CSS report, Tailwind CSS stood out as one of the tools with the highest satisfaction ratio (86%). Tailwind has become a go-to solution to build web applications. And the reason is justified you can build and ship websites faster and still have 100% control over the styling unlike other CSS frameworks (Bulma, bootstrap, etc).

I was always curious about how tailwind generates 3645.2kB of CSS which is full of utility classes from "p-0 , mx-1 ... pt-40" to the color variants and all.

This blog covers how you can build TailwindCSS utility classes in a very minimal way and doesn't cover the plugin/config ecosystem it provides.

We will be building it with the help of Sass (SCSS) or syntactically awesome stylesheets. If you don't know what this is you can watch this video to get an overview. Using Sass will help us to write CSS code more efficiently and programmatic.

A short demo:

Browser doesn't understand what Sass actually is, so we need to compile it to CSS. We will use a bunch of tools to accomplish that. Now let's start by setting up our project.

yarn init -y
# or
npm init -y

This would create a minimal package.json file for our project. Now we will add some devDependencies

yarn add -D autoprefixer node-sass postcss postcss-cli
# or
npm install autoprefixer node-sass postcss postcss-cli --save-dev

A brief explanation of what these actually do:

node-sass helps in compiling .scss / .sass files to css
postcss parser which tokenizes CSS code to create an abstract syntax tree, we will be using it's plugins
autoprefixer plugin of postcss, adds vendor prefixes to CSS rule

Now, will add some scripts in package.json, feel free to modify the input and output of your build.

"scripts": {
    "build": "rm -rf build && yarn build-sass",
    "build-sass": "node-sass --output-style expanded src/index.scss ./build/index.css  && yarn  build-autoprefix",
    "build-autoprefix": "postcss --use autoprefixer --map --output ./build/index.css ./build/index.css"
}

build clears build directory and runs build-sass
build-sass compiles scss and build css in a new directory then runs build-autoprefix
build-autoprefix adds vendor prefixes and generates source maps

Now let's create our input file src/index.scss, if you write some valid scss code and run yarn build you should see the compiled css created.

Now that our project is setup we will look into creating text-color & background-color variants of tailwind. The base idea is to loop over all colors you have and generate utility classes (text-gray-100, bg-gray-100 ... etc).

Let's start by first creating a new directory utils and a file inside it _colors.scss. Adding a leading underscore in scss files is called partials this helps us in modularizing the code and importing it into other files.

To declare our colors we will use Maps which is provided by SASS to declare key-value pairs.

// utils/_colors.scss
$colors: (
  'gray-100' #f7fafc,
  'gray-200' #edf2f7,
  'gray-300' #e2e8f0,
  'gray-400' #cbd5e0,
  'gray-500' #a0aec0,
  'gray-600' #718096,
  'gray-700' #4a5568,
  'gray-800' #2d3748,
  'gray-900' #1a202c
);

Now to loop over these we will use @each rule this helps us to evaluate code for each element of a lists/maps to generate repetitive styles which is exactly what want to do.

// utils/_colors.scss
@each $name, $hex in $colors {
  .text-#{$name} {
    color: $hex;
  }
  .bg-#{$name} {
    background-color: $hex;
  }
}

Now let's import this partial in our input file

// src/index.scss
@import '../utils/colors';

On running yarn build you should be able to see all your utility classes being generated.

/* build/index.css */
.text-gray-100 {
  color: #f7fafc;
}

.bg-gray-100 {
  background-color: #f7fafc;
}

.text-gray-200 {
  color: #edf2f7;
}

.bg-gray-200 {
  background-color: #edf2f7;
}

... and so on

Moving on to the next part we will look into creating margin , padding utility classes. We will be using lists data type in this case.

Let's start by creating a new partial _spacing.scss and we will create 2 lists, 1st one would be $spaces which will be used to calculate the spacing (For eg: m-4 -> margin: '1rem') and the 2nd one being $sides which is basically the direction of spacing to create margin-(top, right, left, bottom) variants.

// utils/_spacing.scss
$spaces: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
  20;

$sides: 'top', 'right', 'bottom', 'left';

Now that we have our values all we have to do is now loop over them with the help of the @each rule. To generate margin/padding-top,left,bottom,right utility classes we will nest another @each rule to map over $sides lists. We will also use str-slice which returns the slice of string.

// utils/_spacing.scss
@each $space in $spaces {
  .m-#{$space} {
    margin: #{$space/4}rem;
  }

  .mx-#{$space} {
    margin-left: #{$space/4}rem;
    margin-right: #{$space/4}rem;
  }

  .my-#{$space} {
    margin-top: #{$space/4}rem;
    margin-bottom: #{$space/4}rem;
  }

  .px-#{$space} {
    padding-left: #{$space/4}rem;
    padding-right: #{$space/4}rem;
  }

  .py-#{$space} {
    padding-top: #{$space/4}rem;
    padding-bottom: #{$space/4}rem;
  }

  .p-#{$space} {
    padding: #{$space/4}rem;
  }

  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space/4}rem;
    }

    .p#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space/4}rem;
    }
  }
}

Make sure to import the partials in our input file.

// src/index.scss
@import '../utils/colors' , '../utils/spacing';

Now if you build it you should see the spacing variants generated.

/* build/index.css */
.m-0 {
  margin: 0rem;
}

.p-0 {
  padding: 0rem;
}

.mx-0 {
  margin-left: 0rem;
  margin-right: 0rem;
}

.my-0 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

... and so on

Using the same approach you can create breakpoints, typography, literally any kind of utility classes you want! I hope you found this article informative I thought this was cool enough implementation to share with you folks.

You can refer the code in this Github repo.

Let me know what you think about it, feel free to connect with me on Twitter if you have any questions. Cheers!

Automatic scrolling for Chat app in 1 line of code + React hook

Deepankar Bhade — Thu, 25 Nov 2021 13:10:18 +0000

While using WhatsApp, twitch, or any social media application your chat feed automatically scrolls to the bottom when a new message is sent/received. While building an application with a chat feature this is definitely an important feature you should ship.

If you don't understand what I am actually talking about try out this little demo I made. Type a message and press enter, as you send a new message it goes out of view and you have to scroll to view it.

If you want to try this interactive demo live head over to my original blog post.

It's actually pretty simple to fix this, firstly we should know the container element which is wrapping all the chats. Then select the element, get the height using scrollHeight then set the element's vertical scroll height using scrollTop.

That's it.



const el = document.getElementById('chat-feed');
// id of the chat container ---------- ^^^
if (el) {
  el.scrollTop = el.scrollHeight;
}

Here's the new demo with this thing implemented. Now it scrolls to the bottom when a new message comes in.

Now coming to the react implementation, we will use useRef & useEffect to get access to the element and handle the side effect.

This would take dep as an argument which will be the dependency for the useEffect and returns a ref which we will pass to the chat container element.



import React from 'react'

function useChatScroll<T>(dep: T): React.MutableRefObject<HTMLDivElement> {
  const ref = React.useRef<HTMLDivElement>();
  React.useEffect(() => {
    if (ref.current) {
      ref.current.scrollTop = ref.current.scrollHeight;
    }
  }, [dep]);
  return ref;
}

Usage of the above hook:



const Chat = () => {
  const [messages , setMessages] = React.useState([])
  const ref = useChatScroll(messages)
  return(
    <div ref={ref} >
      {/* Chat feed here */}
    </div>
  )
}

Logical assignments and their use cases

Deepankar Bhade — Mon, 22 Nov 2021 16:19:14 +0000

Binary operations and conditional rendering are something we do quite frequently while building applications. This article is about logical assignment operators that were introduced in ES2021.

it's important to understand truthy & falsy before we get to the good part you can read my blog on the topic if you want to.

Logical OR ||=

You might have encountered a situation were you want to assign a default value incase the input is not provided. One of the ways to do this is:

let input;
if (input === '' || typeof input === 'undefined') {
  input = 'Default value';
}
console.log(input);

This works and does assign the default value but we might also want to include the case of null, false, or basically falsy values. This is exactly where Logical OR comes in handy.

let input;
input ||= 'Default value';
console.log(input);

||= would only assign only if the input is falsy.

Logical AND &&=

Opposite of Logical OR is Logical AND which would assign only if the input is truthy.

let input = 10;
input &&= undefined;
console.log(input);

This would assign input as undefined. This assignment operator can be helpful if we want to reset the value of a variable.

Logical nullish ??=

The 2 operators we talked about are based on truthy & falsy values. But what if we only want to perform assignments based on undefined or null value.

NOTE: undefined and null are falsy under Boolean context and are also referred to as being nullish values.

A really good example from MDN docs explaining this:

let obj = {
  name: 'deepankar',
};
obj.language ??= 'javascript';
console.log(obj);

// OUTPUT:
// {
//     "name": "deepankar",
//     "language": "javascript"
// }

Since there's no language key in the object it will be undefined and hence performing the assignment.

Understanding never in TypeScript

Deepankar Bhade — Tue, 16 Nov 2021 12:37:03 +0000

I never really understood never in my life because to understand never you have to use the word never again and again.

So understanding never can be quite baffling. If you're like me and ever had faced similar issue then this blog should be able to explain it with the help of some examples.

Before taking you through the examples this is how TypeScript explains characteristics of never in their release notes.

never is a subtype of and assignable to every type.
No type is a subtype of or assignable to never (except never itself).
In a function expression or arrow function with no return type annotation, if the function has no return statements, or only return statements with expressions of type never, and if the end point of the function is not reachable (as determined by control flow analysis), the inferred return type for the function is never.
In a function with an explicit never return type annotation, all return statements (if any) must have expressions of type never and the end point of the function must not be reachable.

Let me break it down for you.

Basics

Let's start with a simple example

const logName = (s: string) => {
  console.log(`Your name: ${s}`);
};
const returnName = (s: string): string => {
  return `Your name: ${s}`;
};

Now if you look at the type declaration of these functions it's easy to understand logName returns void and returnName returns string type.

declare const logName: (s: string) => void;
declare const returnName: (s: string) => string;

Now if we log the logName function we get undefined.

This happens because a function that doesn't explicitly return a value, implicitly returns the value undefined in JavaScript.

const logName = (s: string) => {
  console.log(`Your name: ${s}`);
};
console.log(logName('Deepankar'));
// Your name: Deepankar
// undefined

I added this example to explain that even if void seems to not return any value but still returns undefined this is inferred as void in TypeScript.

Functions that never return

So what does happen if a function literally doesn't return anything? Well let's look at some examples.

const runInfinitely = () => {
  while (true) {
    console.log('Running');
  }
};

const throwError = () => {
  throw new Error('Bruh');
};

Now looking at it's type declarations

declare const runInfinitely: () => never;
declare const throwError: () => never;

Awesome so we finally see the never type now let's understand why

runInfinitely() runs in an infinite loop and never breaks/returns anything and throwError() runs and throws an exception which stops the program to run and never returns.

From these examples we can conclude that Typescript infers the return type as never if a function expression

never breaks/returns anything
has a throw statement which throws error

Impossible types

Have you ever seen a variable with the type of string & number both? Well let's see how TypeScript handles it's type.

const impossibleType = string & number;

Now if we hover over the variable in vscode we should be able to see that impossibleType has never type.

Hence TypeScript will use a never type to represent a type which is impossible to exist.

Exhaustive Checks

From the TypeScript handbook

When narrowing, you can reduce the options of a union to a point where you have removed all possibilities and have nothing left. In those cases, TypeScript will use a never type to represent a state which shouldn’t exist.

The never type is assignable to every type; however, no type is assignable to never (except never itself). This means you can use narrowing and rely on never turning up to do exhaustive checking in a switch statement.

To understand this take the following example

const notPartOfLife = (n: never) => {};

type Life = 'Eat' | 'Sleep' | 'Code';

const liveLife = (life: Life) => {
  switch (life) {
    case 'Eat':
      return 'Eating';
    case 'Sleep':
      return 'Eating';
    case 'Code':
      return 'Coding';
    default:
      return notPartOfLife(life);
  }
};

Here liveLife is a function that has a switch case who's default case would never run because it exhausts all the cases of Life type.

TypeScript is intelligent enough to infer the type as never if the conditional block is impossible to happen and that's why life is inferred as never.

Now let's add another value to the Life type

const notPartOfLife = (n: never) => {};

type Life = 'Eat' | 'Sleep' | 'Code' | 'Play';

const liveLife = (life: Life) => {
  switch (life) {
    case 'Eat':
      return 'Eating';
    case 'Sleep':
      return 'Eating';
    case 'Code':
      return 'Coding';
    default:
      return notPartOfLife(life);
  }
};

Upon doing this we should be able to see this beautiful Typescript error. But don't worry it's helping us out here. Typescript was able to infer that type of life would be Play which is a string but notPartOfLife function needs a param of type never.This mismatch of types causes TypeScript to throw error.

Fixing this is easy we will just add the case for Playing.

const notPartOfLife = (n: never) => {};

type Life = 'Eat' | 'Sleep' | 'Code' | 'Play';

const liveLife = (life: Life) => {
  switch (life) {
    case 'Eat':
      return 'Eating';
    case 'Sleep':
      return 'Eating';
    case 'Code':
      return 'Coding';
    case 'Play':
      return 'Playing';
    default:
      return notPartOfLife(life);
  }
};

And now the error is gone!

Recap

TypeScript will use a never type to represent a type which is impossible to exist.
The never type is assignable to every type; however, no type is assignable to never (except never itself).
TypeScript will infer never as return type if the function never returns / throws error.

Hope you’ve learnt something new, thanks for reading!

A quick favour: was anything I wrote incorrect or misspelled, or do you still have questions? Feel free to message me on twitter.