DEV Community: Deven Rathore

Build a CRUD API with Remix, Prisma, and Postgres

Deven Rathore — Sun, 19 Feb 2023 12:16:16 +0000

In this tutorial, we will learn how to build a CRUD API with Remix, Prisma, Docker, and Postgres, where we will talk about how we can use Remix, Prisma, and Postgres together to create powerful web applications.

The Project - Todo API

This will be a Todo App API where the user can add a new Todo , update, and also delete a Todo. At the end of this tutorial, we will have a fully functional Todo JSON API.

Tools Needed:

npm (node)
Docker
Vscode or any other code editor of choice
Insomnia or any other API testing software of choice e.g Postman

Set up Our Remix Project

We'll start by creating our Remix project using the below command:

npx create-remix@latest

Then, name your app, use the basic, run remix App server, and choose typescript.

? Where would you like to create your app? remix-todo
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix App Server if you're unsure; it's easy to change deployment targets. Remix App Server
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes

Run and Test the App

npm run dev

you should see something like this:

Remix App Server started at http://localhost:3000

visithttp://localhost:3000on your browser, you'll see the Remix welcome page.

More about Remix Routes

A basic remix file has a loader, action, and the JSX element, let's see this sample $postId.tsx file.

import type {
  ActionArgs,
  LoaderArgs,
} from "@remix-run/node"; // or cloudflare/deno
import { useParams } from "@remix-run/react";

export const loader = async ({ params }: LoaderArgs) => {
  console.log(params.postId);
};

export const action = async ({ params }: ActionArgs) => {
  console.log(params.postId);
};

export default function PostRoute() {
  const params = useParams();
  console.log(params.postId);
}

$postId.tsx

Basically, we have a loader, action, and the JSX element

Loader: they autoload with the page.
Action: Does something when there's an action
JSX Element: handles the JSX directly

CRUD - Create, Read, Update, Delete

CRUD is the acronym for CREATE, READ, UPDATE and DELETE.

These terms describe the four essential operations for creating and managing persistent data elements, mainly in relational and NoSQL databases.

A little more about CRUD:

Create: This is adding a resource to a database or an application. e.g. adding a new Todo to our Todo App.
Read: This is reading a resource from our database or application e.g. getting a Todo from the database
Update: This is updating a resource from our database or application e.g. updating a Todo from the database
Delete: This is deleting a resource from our database or application e.g. deleting a Todo from the database

We will do everything explained here in this tutorial.

Add CRUD to our App using Prisma - Postgres

Setup prisma and Postgres

First, we will start by installing Prisma and PrismaClient that we will use to access the postgres database from the Remix Application.

Run the below commands from the project folder terminal:

npm install --save-dev prisma
npm install @prisma/client

2. Initialize our prisma with postgresql

Then, by running the below code we will initialize Prisma with a ostgres provider, so it can generate all the needed files for our application,

npx prisma init --datasource-provider postgresql

It's possible to use another database of choice, Prisma works well with other databases like MySQL, SQLite, Mongo, Cockroach, etc. replace postgresql with any database you want to use, however, to continue with this tutorial, you will need to continue with Postgres.

3. Add schema to Prisma

We'll add our Todo schema to the prisma/schema.prisma file, this file was generated for us when ran the npx prisma init code above.

Add this line to the last line.

model Todo {
  id Int @id @default(autoincrement())
  title String
  content String?
  done Boolean @default(false)
}

4. Push schema to Postgres

To push our schema to the Postgres server, we will need to start our local postgres server using docker by downloading or copying this docker-compose file to your project folder and running the below code.

docker-compose up

This will start our Postgres server with the default user, password, and database set to postgres then we will edit .env file, make the DATABASE_URL equal to postgresql://postgres:postgres@localhost:5432/postgres?schema=public , if you edited the config in the docker file, make changes to DATABASE_URL too.

Run the below command to push the schema to Postgres and confirm our connection:

npx prisma db push

Optional: you can check your Postgres database for tables, Prisma has already created our table in the database, I use tablePlus.

Important: Let's Add a global database to our remix application, so we will not be creating a new instance of Prisma client for every call.

create a file app/utils/db.server.ts

import { PrismaClient } from "@prisma/client";

let db: PrismaClient;

declare global {
    var __db: PrismaClient | undefined;
}

// this is needed because in development we don't want to restart
// the server with every change, but we want to make sure we don't
// create a new connection to the DB with every change either.
if (process.env.NODE_ENV === "production") {
    db = new PrismaClient();
} else {
    if (!global.__db) {
        global.__db = new PrismaClient();
    }
    db = global.__db;
}

export { db };

CRUD implementation

Before diving into other CRUD operations, we'll start by using creating a /todos route, then we will give this route all the CRUD control. But first, we will make this route return the list of all todos in our database.

create a app/routes/todos.tsx and copy this code:

import {useLoaderData} from "@remix-run/react";
import { db } from "~/utils/db.server";

export const loader = async () => {
    return json({
        todos: await db.todo.findMany(),
    });
};

export default function TodosRoute() {
    const data = useLoaderData<typeof loader>();

    return JSON.stringify(data);
}

In the above code we have, I created a loader that imports db from the utils, then we used the PrismaClient findMany function to get the list of todo from the database.

Then I used an exported function TodosRoute() to return the JSON result mapped to the /todos route.

check the URL http://localhost:3000/todos, you should get an empty todo list at this point.

Let's add the CRUD functionality to our Todo App, we'll start with Create, we will the HTTP POST method to get data and create resources with the data, let's add this code to our app/routes/todos.tsx

export async function action({ request }: ActionArgs) {
    // read body
    const body = await request.json()
    let data: Prisma.TodoCreateInput

    if (request.method === 'POST') {
        data = {
            title: body.title,
            content: body.content,
            done: false
        }
        await db.todo.create({
            data: data,
        });
        console.log("added new todo")

        return redirect('/todos');
    }
}

By getting the body parsed in our request and checking the HTTP method used on the/todosURL, we serialized the body and sent it to Prisma create, so it will add the new todo to the database

To Create a read for this App I will use the $ operator to handle the URL and create a special handler for my todo by creating a app/routes/todo/$todoId.tsx.

import type {LoaderArgs} from "@remix-run/node";
import {json} from "@remix-run/node";
import { useLoaderData} from "@remix-run/react";
import { db } from "~/utils/db.server";

export const loader = async ({ params }: LoaderArgs) => {
    const todo = await db.todo.findUnique({
        where: { id: parseInt(params.todoId as string, 10) },
    });
    if (!todo) {
        throw new Error("Todo not found");
    }
    return json({ todo });
};

export default function TodoRoute() {
    const data = useLoaderData<typeof loader>();

    return JSON.stringify(data);
}

We are creating a loader that will use the findUnique() that takes an Id, then uses a where Id=Id to match a record from the database, this is another Prisma function that finds one unique item that matches the conditions parsed as Args, this function can return a not found if the item does not exist which we have handled for our API.

Using $ in the name will make us have control on /todo/$todoId due to how routes are designed in a Remix app. this return the todo which has the id parsed in the body as its id.

For Update, in this app, we are only updating the done field of our Todo model, no need to update other information, to do this we will add another block of code to our action function in the app/routes/todos.tsx that uses the HTTP PUT method.

if (request.method === 'PUT') {
        const id = body.id
        const done = body.done

        await db.todo.update({
            where: {id: parseInt(id as string, 10)},
            data: {done: done},
        });

        return redirect('/todos');
    }

With this we are going to get the request that has a JSON body consisting of id and done status, we then used Prisma update to update the data in our database.

Delete, to delete a resource is straightforward, it deletes resources from the database, let's add the code, open app/routes/todos.tsx, add after the Update code.

if (request.method === 'DELETE') {
        const id = body.id

        await db.todo.delete({
            where: {id: parseInt(id as string, 10)},
        });

        return redirect('/todos');
    }

We are using the DELETE HTTP method, we will be able to delete a resource by sending its body in the request.

Since we are done with the CRUD operations, let's restart our application and test with insomnia.

Test with Insomnia

We will use Insomnia to test our JSON application by using HTTP POST, GET, PUT, and DELETE to access the Todo API.

Let's start by adding a new Todo by sending a POST request to http://localhost:3000/todos, and add our Todo as the JSON body.

See the below image.

Creating a Todo

This will create a new Todo on the App by saving it to our Postgres database.

Next, is reading a Todo from the data store by adding its ID in the URL like http://localhost:3000/todo/1 , see the image below

getting a Todo

Let's try to update a Todo's status by changing it's done from false to true, to do this we will send a PUT request to our todos URL, we will then send the Todo ID and the done status we want to update with the request as a data.

See the image below.

updating a todo

Lastly, we will learn how to delete a Todo, we will use HTTP method DELETE on the todos URL of the app, by sending the Todo ID we want to delete as part of the request, the app will match the ID with the one in our database, then delete it.

See the image below.

deleting a todo

I have uploaded the Insomnia test data if you want to use my test data, download it by using the link below and import it to your Insomnia.

link to test data for Insomnia

Conclusion

We are at the end, in this tutorial we were able to build a Todo JSON API, using Remix, Prisma, and Postgres, we had two routes dedicated to our API, and we were able to Create, Read, Update and Delete a Todo, and we can also see all our todos at once.

The full code can be found on GitHub.com

Build a server monitoring app with Vue and Node

Deven Rathore — Sat, 18 Feb 2023 05:55:48 +0000

In this tutorial, we will learn how to Build a server monitoring app with Vue and node, where we will talk about how we can use Vue.js, Node.js, Express.js, and, Socket.io together to create a powerful web application.

Steps to build a server monitoring app with Vue and node

Install required packages - Backend
Create the server
Emit the real-data
Update the server to emit data periodically
Install required packages - Frontend
Create the Vue.js App
Set up the client to communicate with the server
Create the components
Create the server
Run the App

Step 1 - Set up the backend

We will start by setting up the backend server using Node.js and Express.js.

1.1. Install required packages

First, create a new directory for our project and navigate into it. Then, initialize a new Node.js project and install the required packages.

mkdir server-monitoring-app


cd server-monitoring-app

npm init -y

npm install express socket.io cors

express : To set up the web server and define routes.
socket.io : To enable real-time communication between the client and the server.
cors : To enable Cross-Origin Resource Sharing (CORS) for the server.

1.2. Create the server

Create a new file called server.js and add the following code:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');
const os = require('os');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

const port = process.env.PORT || 4000;

app.use(cors());

app.get('/', (req, res) => {
    res.send('Server is up and running');
});

server.listen(port, () => {
    console.log(Server running on port ${port});
});

This code sets up an Express.js app with a basic route and a Socket.io server that listens on the specified port. We have also added a CORS middleware to the app to allow cross-origin requests.

1.3. Emit real-time data

Now, let's create a function that emits real-time data to the client using Socket.io. Add the following code to the server.js file:

function emitServerData() {
  const cpus = os.cpus();
  const totalMemory = os.totalmem();
  const freeMemory = os.freemem();
  const usedMemory = totalMemory - freeMemory;

  io.emit('serverData', { cpus, totalMemory, usedMemory });
}

This function retrieves the CPU usage and memory usage data using the os module and emits it to the client using the io.emit() method.

1.4. Update the server to emit data periodically

Let's now update the server.js file to call the emitServerData() function periodically, so that it emits the server data to the client at regular intervals.

setInterval(() => {
  emitServerData();
}, 1000);

This code calls the emitServerData() function every second using the setInterval() method.

The full code for the server.js file should look something like this:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');
const os = require('os');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

const port = process.env.PORT || 4000;

app.use(cors());

app.get('/', (req, res) => {
  res.send('Server is up and running');
});

function emitServerData() {
  const cpus = os.cpus();
  const totalMemory = os.totalmem();
  const freeMemory = os.freemem();
  const usedMemory = totalMemory - freeMemory;

  io.emit('serverData', { cpus, totalMemory, usedMemory });
}

io.on('connection', (socket) => {
  console.log(`Client connected: ${socket.id}`);
  setInterval(emitServerData, 1000);

  socket.on('disconnect', () => {
    console.log(`Client disconnected: ${socket.id}`);
  });
});

server.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Step 2 - Set up the frontend

Now, we will create the frontend using Vue.js.

2.1. Install required packages.

In the root directory of your project, install the required packages for Vue.js using the following command:

npm install -g @vue/cli

This installs the @vue/cli package globally, which provides the vue command-line interface (CLI) for creating and managing

2.2. Create the Vue.js app

Use the following command to create a new Vue.js project:

vue create client

This command will prompt you to choose a preset. Select the default preset by pressing Enter.

2.3. Set up the client to communicate with the server

Now, we need to set up the client to communicate with the server using Socket.io. First, install the socket.io-client package using the following command:

npm install socket.io client

Next, open the main.js file located in the src directory and add the following code to create a new instance of the socket.io-client library and connect to the server:

import { createApp } from 'vue';
import App from './App.vue';
import io from 'socket.io-client';

const socket = io('http://localhost:4000', {transports: ['websocket', 'polling', 'flashsocket']});

socket.on('connect', () => {
    console.log('Connected to server');
  });

createApp(App)
    .mount('#app')

This code imports the socket.io-client library and creates a new instance of it that connects to the server running on http://localhost:4000.

2.4. Create the components

We will now create the components for our Vue.js app. In the src/components directory, create two new files called ServerStatus.vue and ServerData.vue.

2.4.1. ServerStatus.vue

Add the following code to the ServerStatus.vue file:


<template>
  <div class="server-status">
    <h1>Server Status</h1>
    <div v-if="connected" class="status-connected">
      <i class="fas fa-circle"></i>
      <p>Connected</p>
    </div>
    <div v-else class="status-disconnected">
      <i class="fas fa-circle"></i>
      <p>Disconnected</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServerStatus',
  data() {
    return {
      connected: false
    }
  },
  mounted() {
    this.connectToServer();
  },
  methods: {
    connectToServer() {
      this.connected = true;
    }
  }
}
</script>

<style scoped>
.server-status {
  margin-top: 50px;
  text-align: center;
}

.status-connected {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #28a745;
}

.status-disconnected {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc3545;
}
</style>

This code defines a ServerStatus component that displays whether the client is connected or disconnected from the server. It uses the socket object we created earlier to detect the connection state.

2.4.2. ServerData.vue

Add the following code to the ServerData.vue file:


<template>
    <div class="server-data">
      <h2>Server Data</h2>
      <div class="server-info">
        <div class="cpu-usage">
          <h3>CPU Usage</h3>
          <ul>
            <li v-for="(cpu, index) in cpus" :key="index">{{ index }}: {{ cpu.model }}</li>
          </ul>
        </div>
        <div class="memory-usage">
          <h3>Memory Usage</h3>
          <p>Total Memory: {{ totalMemory }} bytes</p>
          <p>Used Memory: {{ usedMemory }} bytes</p>
          <p>Free Memory: {{ freeMemory }} bytes</p>
        </div>
      </div>
    </div>
  </template>

  <script>
  export default {
    name: 'ServerData',
    props: {
      cpus: Array,
      totalMemory: Number,
      usedMemory: Number
    },
    computed: {
      freeMemory() {
        return this.totalMemory - this.usedMemory;
      }
    }
  };
  </script>

  <style scoped>
  .server-data {
    margin-top: 50px;
  }

  .server-info {
    display: flex;
    justify-content: space-between;
  }

  .cpu-usage {
    flex: 1;
    text-align: left;
  }

  .memory-usage {
    flex: 1;
    text-align: right;
  }
  </style>

2.5. Create the server

We will now create the server using Node.js and Socket.io. Create a new file called server.js in the root directory of the project and add the following code:


const os = require('os');
const io = require('socket.io')();

const PORT = 4000;

function collectServerData() {
  const cpus = os.cpus();
  const totalMemory = os.totalmem();
  const freeMemory = os.freemem();
  const usedMemory = totalMemory - freeMemory;

  return {
    cpus,
    totalMemory,
    usedMemory
  };
}

io.on('connection', (socket) => {
  console.log('Client connected');

  const interval = setInterval(() => {
    const serverData = collectServerData();
    socket.emit('serverData', serverData);
  }, 1000);

  socket.on('disconnect', () => {
    clearInterval(interval);
    console.log('Client disconnected');
  });
});

io.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

This code imports the os module to collect data about the server and the socket.io library to handle real-time communication with the client. It defines a function called collectServerData() that collects data about the server's CPUs and memory usage.It then creates a new socket.io instance and listens for connections on port 4000. When a client connects, it starts sending server data to the client every second using a setInterval() function. When the client disconnects, the interval is cleared.

2.6. Update the App.vue file

We will now update the App.vue file to use the components we created earlier. Add the following code to the file:


<template>
  <div id="app">
    <ServerStatus />
    <ServerData />
  </div>
</template>

<script>
import ServerStatus from './components/ServerStatus.vue';
import ServerData from './components/ServerData.vue';

export default {
  name: 'App',
  components: {
    ServerStatus,
    ServerData
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

This code imports the ServerStatus and ServerData components we created earlier and adds them to the App component.

2.7. Run the app

To run the app, open two terminals. In one terminal, navigate to the root directory of the project and run the following command to start the server:

node server.js

In the other terminal, navigate to the client directory and run the following command to start the Vue.js app:

npm run serve

This will start the Vue.js app and open it in your default web browser.

2.8. Test the app

If everything worked correctly, you should see the following on the Vue.js app:

A Server Status component that displays whether the client is connected or disconnected from the server.
A Server Data component that displays information about the server's CPUs and memory usage.

If you open the browser console, you should see log messages indicating that the client has connected and disconnected from the server. Congratulations! You have created a server monitoring app using Vue.js and Node.js!

The full Code source is on GitHub so you can check it out there.

Learn Git, Github, and Opensource

Deven Rathore — Sun, 12 Feb 2023 16:00:12 +0000

This course will introduce you to git with some of its most important commands everyone should know.

In this course, we will use the command-line tool to leverage the full potential of git as it is a good way to use git.

We will be more practical in explaining the basic concept and commands so make sure you ride along.

What you will learn

At the end of this article, you will understand

Why Git and GitHub are necessary for the development of software.
How to use Git and GitHub for your project.
What open-source software is
how you can contribute to some Open Source projects.

Lesson 1

In this lesson, you will be introduced to Git, the benefits of using Git, important Git commands and how to install Git.

Read Lesson 1

Lesson 2

In this lesson, you will be able to configure Git on your machine, you will know what a repository is, what GitHub is, how to make changes, add changes and also undo changes in a repository.

Read Lesson 2

Lesson 3

In this lesson, you will be introduced to branching in Git and why branching is necessary for Git as I will walk you through a practice project.

Read Lesson 3

Lesson 4

In this lesson, you will learn how to synchronise a local repository with GitHub, how to invite people to your repository and how to add multiple people to the same repository.

Read Lesson 4

Lesson 5

In this lesson, you will understand what open-source software is, what a fork is in GitHub, how to fork a repository and how to contribute to an open-source project. Finally, to solidify your understanding of this course, you will contribute to the Open Source project for the course.

Read Lesson 5

Conclusion

With all the knowledge gathered from each lesson in this course, your confidence level and knowledge in making contributions to any Open Source project will increase intensively. Also, remember this course will serve as a reference while contributing to open source projects in the future.

Building a Real-Time Chat App with React and Firebase

Deven Rathore — Tue, 24 Mar 2020 02:44:08 +0000

Just published an article on building a Real-Time Chat App with React and Firebase.

You can React Tutorial on Css-tricks.com

Handling File Uploads in Laravel

Deven Rathore — Sat, 07 Mar 2020 17:34:15 +0000

In this Article James Shows How to Handle File Uploads in Laravel, At the end of this tutorial, you should be able to handle file uploads, handle file upload validation, and know what to do when the file doesn’t get uploaded successfully.

Read The Complete Tutorial on CodeSource.io

How To Become A Better Programmer: 11 Actionable Tips

Deven Rathore — Tue, 25 Feb 2020 09:17:28 +0000

So there is this joke amongst programmers that work with me, the “Full-stack Programmer” joke. In the anecdote, an intern updates his bio to a full-stack programmer in the second month of training. Ridiculous, right?

There are increasing vacant programming jobs globally. Similarly, there is a swarming force of programmers out there gunning for the same openings as you. However, what sets you aside, from every other programmer, in the field are the extra things, little yet big.

If you are looking to get even way better than you currently are as a programmer, then let’s do this together, shall we?

Tips to Becoming a Better Developer

Caveat Emptor: All under-listed tips here were used by now very successful programmers. Do not use the tips, if you can’t handle them. So, readers discretion does apply.

That was on a much lighter note, however, now that we have an understanding, let’s get to it.

1. Specialize your Skill as a Programmer

The world of programming is a very dynamic one. Methods and processes are quite transient such that they are replaced by new ones, in most situations, a month after you learned them. You, perhaps, are more likely to experience this if you are everywhere.

So, specialize in a particular niche and keep up with trends and changes in methods, processes, frameworks, and so on. This way, you stay on top of your game as a programmer.

2. Learn Extra Languages

Unlike specializing in a niche, it’s very okay and professional to learn and know more than one Programming language. Also, considering the dynamic nature of programming, a particular programming language could go out appreciation for certain projects at any time. You don’t want to be that Programmer stuck with a relic language.

3. Develop Great Soft Skills

Soft skills are like the oil that lubricates the grinding cogs and wheels of your technical skills. Developing skills like collaboration, teamwork, time management, good networking, and so on, set you apart from the denizens of “full-stack” programming. Also, acknowledging interpersonal communication as a soft skill would improve your interaction in your team as a team player.

Similarly, contribution to open source is an excellent way to develop yourself while giving great value. Besides, pay attention to feedback from other programmers and users on your contributions. The feedback refines and fine-tunes your coding.

4. Write Codes for Real-life Solutions

While writing your codes, get in touch with real-life. Identify real-world programs and write codes that find application in the creation of solutions to real and existing problems. Also, this practice sets you aside from the rest.

5. Have a Side-Project

As a programmer, you could have a lot of mental power-draining paid projects crawling in and out of your mind pushing your very limits, but the projects that truly let you grow at a pace and learn without pressure are your side-projects. So, create a side-project, then nurture, develop, and grow it for fun. See how much you would improve.

6. Join a Local Community of Programmers

There are a lot of international communities of programmers that have local communities in different countries, bringing programmers together and organizing meetups and hackathons to boost interactions and growth like Facebook Developers Circle and Google Developers Group. However, if none exists in your locality, you can create one, it doesn’t have to be grand. Just do it, anyway.

7. Consult with other Programmers Who are Ahead

No man is an island, they say. It’s very okay to consult with other programmers, who are probably ahead of you in your niche. This practice builds your network while allowing you to learn from other people who have walked the walk and now talking the talk.

8. Consider Code Reviews

Have you ever considered code reviews? As much as code reviews are a great way to uncover bugs in your written codes, it is similarly, an excellent way to learn, when reviewing other person’s codes. Get in touch with other programmers.

Additionally, sharing ideas is not out of the question either. Put yourself out there.

9. Understand the Business of Programming

Don’t get me wrong, you, the programmer, or your organization may not be in for the money, but understanding the business part of programming in your niche puts on top of the ladder. Most of the programs or codes you’ve written are actively used by people in the industry for businesses. So, understanding the money-talk helps you understand what is needed and when it is needed. Think about it.

10. Read a Lot

Read, read, and read. The only way you can grow and hone your skills outside a structured learning environment would be by reading copiously. So, reading books by other programmers and by people in your industry shapes you in ways you would hardly see until you are tested. So read and try out new things for fun. Equally, you’d be amazed at how much you would grow.

11. Practice makes Near-Perfect

Practice a lot. What is more important than all the codes you have ever written, which could be all bugs, is a constant practice. While having a huge repository is good for your ego, regular coding is what builds your inner coding muscles, like in athletes. Be the practicing Programmer.

The WORD

Conclusively, anybody can be a better programmer. Like I said earlier, try these tips at your own risk. Take charge of your growth as a professional, and then you would probably be on your way to near-perfection.

Until next time, stay in charge.

Originally written by Managi Iwuoha on Dunebook.com

Improved Control Flow In JavaScript

Deven Rathore — Fri, 31 Jan 2020 12:45:15 +0000

This is nothing new in the language as this concept does the same thing that the normal if, else-if and else statement does but with a neat and less verbose syntax.

However, there are some cases that will be much easier to handle with the advanced control flow than the if, else-if and else statement.

Ternary Operator

This is how the ternary operator flow is :

The condition ? First expression : Second expression

The condition is returning a Boolean (i.e true or false).

? says if the condition is true, then execute the First expression.

:says if the condition is false, then execute the Second expression.

let's mimic a security robot to solidify our understanding on how ternary operators work.

let Robot = ( permission ) => {
    return permission;
}
let allow = true;
let deny = false;
const access = Robot(allow) ? "Access successful" : "Access denied";
~~~{% endraw %}

copy and paste the snippet above in your browser’s console, hit enter and type access in the console.

![Source- CodeSource.io](https://i0.wp.com/codesource.io/wp-content/uploads/2020/01/image_preview-1.jpeg?w=577&ssl=1 "Console screen shot")

Replace allow in access with deny let's see the result.


![Source- CodeSource.io](https://i0.wp.com/codesource.io/wp-content/uploads/2020/01/image_preview-2.jpeg?w=572&ssl=1 "Console screen shot")

### Difference between the ternary operator and the if else statement

Let’s see if there is any difference between the ternary operator and the {% raw %}`if` `else` statement.

~~~js

let Robot = ( permission ) => {
    return permission;
}
let allow = true;
let deny = false;
const access1 = Robot(allow) ? "Access successful" : "Access denied";
let access2 = () => {
  if (Robot(allow)) {
    console.log("Access successful");
  }else{
    console.log("Access denied");
  }
}
~~~

Lets run this on the browsers console to see the result:

![Source- CodeSource.io](https://i0.wp.com/codesource.io/wp-content/uploads/2020/01/image_preview-3.jpeg?w=547&ssl=1 "Console screen shot")

Now we can see that both are doing the same thing but ternary operator has a less verbose syntax as it is written in just a single line while the if else statement is written in five lines.

So ternary operator is suitable for a control flow where there is a condition and two possible expression to be executed in a mutually exclusive order. The ternary operator syntax is a lot nicer.

## switch statement

~~~js

function myFruitsStore(fruit) {
let verification
    switch (fruit) {
        case ("banana") :
            verification = `${fruit} is £5`;
            break;
        case ("plantain") :
            verification = `${fruit} is £10`;
            break;
        case ("potato") :
            verification = `${fruit} is £15`;
            break;
        case ("Apple") :
            verification = `${fruit} is £20`;
            break;
        case ("potato") :
            verification = `${fruit} is £25`;
            break;
        default :
            verification = " Enter the name of fruit for purchase please ";
            break;
    }
    return verification;
}
myFruitsStore ("apple");

~~~

Let’s see what is happening in the code snippet above.

The variable verification is declared with no assigned value.

switch keyword check what the variable verification is .The case keyword checks if a condition is met and then execute the corresponding expression. In the code snippet above, it checks if the variable fruit equals banana, same with the rest of the cases.

The break keyword stops the control flow.The default keyword triggers the execution of it’s corresponding expression when none of the conditions is met.

Copy and paste the code snippet above in your browser’s console to see the result.

![Source- CodeSource.io](https://i0.wp.com/codesource.io/wp-content/uploads/2020/01/image_preview-4.jpeg?w=576&ssl=1 "Console screen shot")


### Advantages of switch statement

Instead of using several if else commands to execute several expressions, a switch statement is more suitable. However, switch statement is suitable where there are several expressions to be executed in a mutually exclusive order.

##Conclusion

In conclusion, the ternary operator and switch statement in [JavaScript](https://codesource.io/category/javascript/) is just an improved approach to decision making when compared to the `if` `else` statement.

Further Reading on [Dunebook.com](https://www.dunebook.com/)

* [“#” vs Javascript:void(0);](https://www.dunebook.com/vs-javascriptvoid0/). 
* Top 5 [JavaScript Frameworks](https://www.dunebook.com/top-5-javascript-frameworks-to-learn-in-2020/) to learn in 2020
* 15 best Opensource [JavaScript machine learning libraries](https://www.dunebook.com/opensource-javascript-machine-learning-libraries/)
* best [Javascript IDE](https://www.dunebook.com/5-best-javascript-ide-javascript-editors/) & Javascript Editors
* Cool [Raspberry Pi Projects](https://www.dunebook.com/amazing-raspberry-pi-projects-ideas/).

Learn Git, Github, and Opensource – Course

Deven Rathore — Thu, 30 Jan 2020 12:30:57 +0000

It's more of a beginner course on why git and GitHub, building a personal project with git and GitHub then introduction to open source with a practical approach of contributing to open source projects. It will be helpful for new learners who are just getting started.

This course will introduce you to git with some of its most important commands everyone should know.

In this course, we will use the command-line tool to leverage the full potentials of git as it is a good way to use git.

We will be more practical in explaining the basic concept and commands so make sure you ride along.

What you will learn

At the end of this course, you will understand

Why Git and GitHub are necessary for the development of software.
How to use Git and GitHub for your project.
What open-source software is
how you can contribute to some Open Source projects.

Lesson 1

In this lesson, you will be introduced to Git, the benefits of using Git, important Git commands and how to install Git.

Read Lesson 1

Lesson 2

In this lesson, you will be able to configure Git on your machine, you will know what a repository is, what GitHub is, how to make changes, add changes and also undo changes in a repository.

Read Lesson 2

Lesson 3

In this lesson, you will be introduced to branching in Git and why branching is necessary for Git as I will walk you through a practice project.

Read Lesson 3

Lesson 4

In this lesson, you will learn how to synchronize a local repository with GitHub, how to invite people to your repository and how to add multiple people to the same repository.

Read Lesson 4

Lesson 5

Read Lesson 5

Conclusion

How to optimize Vue.js applications

Deven Rathore — Mon, 06 Jan 2020 17:54:38 +0000

Liquid syntax error: 'raw' tag was never closed

Top 5 JavaScript Frameworks to learn in 2020

Deven Rathore — Wed, 01 Jan 2020 17:11:21 +0000

I just published an article on dunebook Featuring Top 5 JavaScript Framework to learn in 2020.

You can Read Complete article here - Top JavaScript Framework 2020 for pros and cons including Real-time Github Stats, But Here I will share some insights and All listings from the article.

In this article, our main focus will be only on JavaScript Frameworks in 2020 and a library that has a Framework ecosystem.

1. Vue

Vue is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Moreover, Vue is a Simple, minimal core with an incrementally adoptable stack that can handle apps of any scale.

2. React

React is a declarative, efficient, and flexible JavaScript library with a framework Ecosystem, React is based on the concept of DOM manipulation is a costly operation and ought to be minimized.

3. Angular

Angular is a Typescript (Superset of JavaScript) framework that you can use to build a large scale single page web applications.

Angular comes with most everything you need to get some web development done.

4. Svelte

Svelte is a modern JavaScript framework that allows you to write easy-to-understand JavaScript code that is then compiled to highly efficient code that runs in the browser.

The framework is similar to React or Vue, but in Svelte, we don’t have any dependencies. That means it will not take any time to interpret our code, so we will get pure JavaScript before runtime.

5. Ember

Ember.js is a JavaScript framework that greatly reduces the time, effort and resources needed to build any web application.

Conclusion

You can surely use any JavaScript library or framework of your preference, but the best choice will facilitate your work a lot.

Read Complete article on Dunebook.com

My Top 5 Tutorials Of 2019

Deven Rathore — Thu, 26 Dec 2019 07:36:51 +0000

I started CodeSource.io in October 2019 and so far we have received 30k+ page views, which is a good start for a new website, I created this platform to solve some problems which I faced while learning my Tech Stacks.

You may see some Great Courses on CodeSource.io in Coming Months, which will be available for Free.

Okay, that's, much of Introduction For the Platform. So Let's Get Started with the List:

5. Server-side rendering in React.js

In this tutorial, I have explained Server-Side Rendering In React, Currently, It has around 1108 pageviews.

You can Read Tutorial Here

4. Create a crud Application using Vue, Node and MongoDB

In this tutorial, I have explained how to build a simple CRUD application using Vue, Node.js, and MongoDB. Currently, It has around 1082 pageviews.

You can Read Tutorial Here

3. Setting up React Authentication using JWT

In this tutorial, I have explained how to manage React authentication in SPAs.Currently, It has around 1351 pageviews.

You can Read Tutorial Here

2 Build a server monitoring app using Node & Angular

In this tutorial, I have explained how to build a Real-time server monitoring app using Node and Angular that will show the free memory available on our server.
Currently, It has around 1544 pageviews.

You can Read Tutorial Here

1. Build a Crud application using Vue and Django

IN this tutorial, I Have shown you how to build an API with Django REST Framework and an SPA with Vue.js. Currently, It has around 3497 pageviews.

You can Read Tutorial Here

If you have any Suggestions, Ideas, and Topics for the Platform please let me know in the Comment Section Below

Thank you.

Learn SOLID Principles of Object-Oriented Design

Deven Rathore — Tue, 24 Dec 2019 15:05:10 +0000

In this series, we are going to understand what is known as SOLID principles of object-oriented design.

By the end of this series, you will be able to

understand what the SOLID principles are.
Why they are important.
How they will help you write good and maintainable code.

Understanding the SOLID Principles of Object-Oriented Design

Lesson 1

Building a CLI application in Javascript. This application will not follow any SOLID principle, but it will be working as expected

Read Lesson 1

Lesson 2

Introduction to SOLID principles: Here, we will study what the SOLID principles are.

Read Lesson 2

Lesson 3

Refactor the CLI application to observe SOLID principles.

Read Lesson 3

This course will solidify your understanding of SOLID principles and how to apply them in your JavaScript projects. We went through the process of building an application without observing any of the solid principles, then we learned about solid principles.

And finally applied the principles learned in refactoring the application to be better. By now, you should have an in-depth understanding of what SOLID principles are and why they are important.You can go on and use the principles in your own projects. Do leave your comments, suggestions, and questions about this course!