DEV Community: Gandharv

Developer Burnout :\

Gandharv — Wed, 18 Jan 2023 16:16:29 +0000

Have you ever finished a large project and returned to your desk only to discover that you now have to meet even more stringent deadlines? Would you be excited to tackle these new projects, or would you see them as a tedious chore that must be completed? If you guessed the latter, you're probably exhausted, and I don't blame you - it's difficult to be expected to run like a well-oiled machine. However, be aware that this is a sign of burnout.

Chances are, we’ve all heard about and experienced burnout at some point in our lives. But recently, research has indicated a rise in burnout amongst developers me included.

What is Burnout?

According to the World Health Organization, burnout is an “occupational phenomenon.” This occurs due to chronic workplace stress characterized by exhaustion or drained energy, feeling mentally distant from one’s job, negative feelings about one’s career, and reduced professional efficacy.

Three phases of burnout

Honeymoon
When you start a new job and take on new responsibilities, you may feel excited, enthusiastic, and more satisfied with your job. You may not experience burnout symptoms during this stage, but you are likely to anticipate the types of stresses you will face in the future.
Chronic stress
In this phase, you may begin experiencing stress more frequently along with intense symptoms compared to phase two. It may have become an everyday experience filled with anxiety and stress.
Burnout 🔥
In this final phase, burnout has become a huge part of your life, leaving you vulnerable to significant and ongoing impacts on your mental, physical, and emotional health.

Reasons for burnout in developers:

Poor Coding Culture

In many organizations, junior developers are not properly trained to manage the future implications of specific projects. Consequently, senior developers are held responsible for clearing or avoiding technical debts, which can be highly time-consuming. This can increase your workload and easily blur the lines between your work-life balance.

Monotonous Work

Just like any other profession, devs also get tired of coding. It’s pretty intense brain work, and one can only do so much. That’s why it’s crucial to give devs a variety of work to make their day-to-day routine more interesting and enjoyable.

Lack of Work-Life Balance

Different for different individuals.

How Developers Can Reduce Burnout

Take Care of Yourself

It’s common wanting to complete your work in one sitting to avoid distractions caused by zoning in and out of work. But realistically speaking, the more you get away from your screen, the better it will be for your health. You can make some time for a quick walk or lunch break or engage in physical activity to get your body moving and blood circulating. It would be even more helpful to schedule regular breaks throughout your day, so you don’t forget to take them.

Also, keep your passion alive. Kudos.

How to bulk upload files to S3 using node script

Gandharv — Mon, 20 Jun 2022 11:59:14 +0000

In this article let's see a small nodejs script which can be run to upload files to amazon S3 bucket.

Prerequisite

I am going to assume you understand what amazon s3 is using for. If not you can visit this link to learn more.

Writing the upload script

// uploadTos3.js

const fs = require('fs');
const readDir = require('recursive-readdir');
const path = require('path');
const AWS = require('aws-sdk');
const mime = require('mime-types');

AWS.config.update({
  region: 'ap-south-1',
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.SECRET_ACCESS_KEY,
  maxRetries: 3
});

const directoryPath = path.resolve(__dirname, './images');

const getDirectoryFilesRecursive = (dir, ignores = []) => {
  return new Promise((resolve, reject) => {
    readDir(dir, ignores, (err, files) => (err ? reject(err) : resolve(files)));
  });
};

const generateFileKey = fileName => {
  const S3objectPath = fileName.split('/images/')[1];
  return `website-assets/${S3objectPath}`;
};

const s3 = new AWS.S3();

const uploadToS3 = async () => {
  try {
    const fileArray = await getDirectoryFilesRecursive(directoryPath, [
      'BUILD_ID'
    ]);
    fileArray.map(file => {
      // Configuring parameters for S3 Object
      const S3params = {
        Bucket: 'public-read-bucket',
        Body: fs.createReadStream(file),
        Key: generateFileKey(file),
        ACL: 'public-read',
        ContentType: mime.lookup(file),
        ContentEncoding: 'utf-8',
        CacheControl: 'immutable,max-age=31536000,public'
      };
      s3.upload(S3params, function(err, data) {
        if (err) {
          // Set the exit code while letting
          // the process exit gracefully.
          console.error(err);
          process.exitCode = 1;
        } else {
          console.log(`Assets uploaded to S3: `, data);
        }
      });
    });
  } catch (error) {
    console.error(error);
  }
};

uploadToS3();

Note: I’m uploading all the assets to website-assets folder. The cloudfront distribution will have that as a base path.

Run the command node uploadToS3 to upload all the files to S3 bucket.

JavaScript async and await in loops

Gandharv — Fri, 17 Jun 2022 20:02:45 +0000

Basic async and await is simple.

Things get a bit more complicated when you try to use await in loops.

Let's discuss further about in this article.

Prerequisite:

I’m going to assume you know how to use async and await. If you don’t, you can check it out here

Await in a for loop

for (let index = 0; index < iterable.length; index++) {
  const value = await remoteApiCall();
}

for await (const variable of iterable) {
  const value = await remoteApiCall();
}

When you use await, you expect JavaScript to pause execution until the awaited promise gets resolved. This means awaits in a for-loop gets executed in series.

Same behaviour with while & for-of loops, i.e. all awaits gets executed in series one after another.

Loops that require a callback

await won’t work with loops that require a callback. Examples of such loops that require a callback i.e.

forEach
map
filter
reduce

Using await in loops with a callback

...
console.log('start')
const promises = iterable.map(remoteApiCall)
const values = await Promise.all(promises) // using promise.all is key
console.log(values)
console.log('end')

The console logs are printed in order.

Summary

await doesn't work with loop in callback in serial fashion.
The solution is to use await Promise.all(...) where you pass all the promises

WTF is CORS

Gandharv — Thu, 16 Jun 2022 22:28:06 +0000

Often I find people scratching their head around the definitive meaning to CORS.

Cross-Origin Resource Sharing (CORS)

Let's try to explain CORS by first talking about what is the ooposite of CORS i.e. same-origin policy.

In same-origin policy websites are restricted to accessing resources from the same origin through what is known as same-origin policy

But why do we need same origin policy in the first place?

Let’s say you browse to a malicious website https://stealbankbalance.com while logged into https://mysweetbank.com, stealbankbalance can essentially make AUTHENTICATED requests if the same origin policy was not in place.

What is the need for a cross-origin policy?
As web developers we know that working on a website we will make cross-origin requests to other domains too.

Let's talk about how do we fix the error.

CORS is controlled by Access-Control-Allow-Origin header.

CORS is a browser feature and checks for the response headers having the domain name or else rejects the request.

If you have control over the server you are responding from, you need to add the clients domain name in the response headers

Example: Access-Control-Allow-Origin: https://www.mydomain.com

NOTE: A server that responds Access-Control-Allow-Origin: * allows all origins which can be a large security risk.
Only use * if your application absolutely requires it such as creating an open/public API.

If you do not have access to the server response headers then need to proxy the request from your frontend server, since cors is a browser feature it will not complain if the request is passed through a server.

Building a realtime multiplayer game using React & Conflict-free replicated data types (CRDT) of Yjs

Gandharv — Tue, 22 Mar 2022 12:27:28 +0000

TL;DR: In this article, you will learn how to build a real-time, collaborative Tic Tac Toe game application that enables two users to play the game simultaneously. To create this app, you will use React & Yjs.

We were trying to build realtime multiplayer editing capabilities into ToolJet (https://github.com/ToolJet/ToolJet/). Those who are not familiar with ToolJet, it is an open-source low-code application builder. We had tried different approaches for this but found Yjs to be the best approach. Hope this tutorial will help you get started with Yjs and CRDTs. If you want to see how capable is CRDTs, check out our PR for realtime multiplayer editing of applications in ToolJet.

Yjs is a CRDT implementation that exposes its internal data structure as shared types which we will be using to build a real time collaborative game tic tac toe.

Want to jump straight to the code? here it is: https://github.com/ToolJet/yjs-crdt-game

Building the UI

Let's first start by building the 3-by-3 grid user interface for the game and then add reactivity to it

Let's start by creating our parent component <Game />,

<div className="game">
    <div className="game-board">
        ...
    </div>
    <div className="game-info">
        <div>{status}</div>
        <ol>{moves}</ol>
    </div>
</div>

The game component does the following:

Shows the status of the game i.e. displays the winner or displays who has to play the next turn
Allows a user to reset the game from the beginning
Show a list of moves performed
Renders the game board (explained in the next section)

<Board /> component will look like this:

<div className="game-board">
   <Board
      squares={current.squares}
      onClick={i => this.handleClick(i)}
    />
</div>

The board component renders squares that we need to display for user input:

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

<Square /> component is a simple functional component that renders a square:

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

After adding all these components our UI should look like the following:

Adding the game logic

Let's start by adding the initial state of the application inside the <Game /> component:

this.state = {
    history: [
        {
            squares: Array(9).fill(null),
        },
    ],
    stepNumber: 0,
    xIsNext: true,
};

Initially, all nine square are neither filled with "X" or "O" hence we are storing the array with nine null values, initialising the step with count 0 and allowing "X" to be the first one to make the move.

In the game of tic tac toe, a winner is decided whenever the player succeeds in placing three of their marks in a horizontal, vertical, or diagonal row is the winner.

Let's convert this into code:

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2], // horizontal
    [3, 4, 5], // horizontal
    [6, 7, 8], // horizontal
    [0, 3, 6], // vertical
    [1, 4, 7], // vertical
    [2, 5, 8], // vertical
    [0, 4, 8], // diagonal
    [2, 4, 6], // diagonal
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

In the above function we pass a variable called squares that we had declared in our <Game /> component. Each square[i] contains either 'X' or 'O'. In the above for loop we check if the three consecutive values in either horizontal, vertical or diagonal contain the same value i.e. either X or O. If its true then 'X' or 'O' is returned as the winner.

Making the game collaborative

Let's add yjs to the code for allowing two users to be able to play the game collaboratively.

For this purpose we are going to use two packages yjs and y-webrtc.

const ydoc = new Y.Doc();
const provider = new WebrtcProvider(`tutorial-tic-tac-toe`, ydoc);

To start of with we create a ydoc which represents a yjs document. This document is passed to a webrtc provider that helps us utilize public signalling servers for creating a peer-to-peer connection.

  componentDidMount() {
    const ymap = ydoc.getMap('state');
    ymap.observe(() => {
      this.setState({
        ...ymap.get('state')
      })
    });
  }

In the componentDidMount function we are going to declare a variable ymap, which gets a shared data type Y.Map called 'state'.

Then on the shared data type we add an observable to observe the changes on the state.

handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState(
      {
        history: history.concat([
          {
            squares: squares,
          },
        ]),
        stepNumber: history.length,
        xIsNext: !this.state.xIsNext,
      },
      () => {
        const ymap = ydoc.getMap('state');
        ymap.set('state', this.state);
      }
    );
  }

Whenever a use clicks on any square, we use ymap.set(..) function to set a key value on the Y.map shared data type.

Now whenever we have a change on the ydoc the observable is called and all peers connected to the room through webrtc signalling server will receive the update.

The final outcome looks like below:

You can find the code at the GitHub repo https://github.com/ToolJet/yjs-crdt-game