DEV Community: Shubham Patil

Removing Timezones from Dates in Javascript

Shubham Patil — Sun, 23 Apr 2023 00:43:58 +0000

Foreword

It's been a while since I've wrote on here. I'm planning to write smaller pieces on here that relate to problems that I solve on a day-to-day basis.

Background

I was working on the React Native app the other day for my travel-planning startup, Tripley, and came across a somewhat unique problem. When creating events for the trip calendar, it would store dates with the current timezone in mind.

A Bit (Too Much) About Timezones

To prevent one side of the world eating their lunches in darkness, timezones were created. PST (Pacific Standard Time) is 3 hours behind EST (Eastern Standard Time). This means that 1:00 in San Francisco is equivalent to 4:00 in New York.

Each timezone gets a code relative to the timezone in London, UK. The timezone in London is GMT (Greenwich Mean Time). Why London? Imperialism.

"Universal Coordinated Time" (UTC) is derived from GMT (it's essentially the same time). The main difference between UTC and London's time is that UTC doesn't care about daylight savings. When The UK undergoes daylight savings and switches to the BST (British Summer Time) timezone, UTC stays the same time as it was before.

Each timezone gets a code relative to the timezone in London, UK.

Back to this. Each timezone gets a time in hours relative to the UTC time. PST's "code" is UTC-8, which specifies that PST is 8 hours behind UTC time. This isn't limited to just hours. Nepal, for example, has a code of UTC+05:45, which specifies that it is 5 hours and 45 minutes ahead of UTC time. BST even has a UTC code, which is UTC+1. In daylight savings time for Britain, the BST timezone is one hour of UTC time.

The Problem

This was a big problem for us. Say that you selected August 8th, 2023 at 4:30 PM while sitting in San Francisco. By the nature of JavaScript, the date would be registered under UTC time (in this case, it would be August 8th, 2023 at 11:30 PM UTC). For your trip, if you travel to the island of Oahu, Hawaii, you would be under the HST timezone (Hawaiian Standard Time), which is 3 hours behind PST (Pacific Standard Time).

The event that you scheduled for 4:30 PM would now show up at 1:30 PM for you. This would occur because JavaScript automatically adjusts UTC dates for you based on your current timezone. It would convert the UTC date we had to the HST timezone.

Suppose we had a JS date variable called date, and we ran this in San Francisco:



//Wed Feb 22 2023 14:00:43 GMT-0800 (Pacific Standard Time)
console.log(date);

Now, if we ran this in Honolulu, it would look a bit different:



//Wed Feb 22 2023 11:00:43 GMT-1000 (Hawaiian Aleutian Time)
console.log(date);

In either timezone, if you print the date using the .toISOString() method, you will get a date in the ISO 8061 format:



//2023-02-22T22:00:43.000Z
console.log(date.toISOString())

This ISO string is in UTC time. If we dissect this string, we can see that the T is a separator in the string. So, we have two portions: 2023-02-22 and 22:00:43.000Z. The first part is easily identifiable; it's the date! The second part is the time string.

Our original date in PST was 14:00:43, but this date reads 22:00:43? This is because the date is stored in UTC. The PST timezone is 8 hours behind UTC right? If you add 8 hours to 14:00:43, you get 22:00:43!

The Solution

I tried a couple things when I learned about this. First of all, I tried to see if I could omit the timezone. My first thought was to use the .toLocaleString() method.

Here is how it would look like:



const date = new Date();

// "2/23/2023, 1:48:30 PM"
console.log(date.toLocaleString())

I decided that I would put this string (2/23/2023, 1:48:30 PM) in my database. I thought that I could then input this as a parameter to the Date constructor on the client, like so:



new Date("2/23/2023, 1:48:30 PM")

I tried the code above in the MDN Web Docs JS Date Playground with my computer set in PST and HST:

Code run in PST timezone

Code run in HST timezone

I looked at both results and they were the same! I finally thought that this would be a great solution: store the output of .toLocaleString() and convert it to a Date again on the client, all without the timezone.

However, when I implemented the solution in my React Native app, it didn't work. It kept telling me that I had passed an invalid date into the Date constructor. I searched on the internet. Then, I found this on the MDN Web Docs:

This gave me a hint as to why the code worked in my browser but not my React Native app. The JS in Firefox was running on a different runtime than React Native.

Short Note About JS Engines

Since JavaScript is so uncoordinated, JS code typically runs in a specific environment called an engine. Each browser has their own engine: Chrome uses the V8 engine, Firefox uses their SpiderMonkey engine, and Safari uses JavaScriptCore.

In React Native's case, it uses an engine called Hermes:

I was testing my code on Firefox, which uses the SpiderMonkey engine, and running my code in my React Native app, which uses Hermes. Within these two engines, there must be a discrepancy between how the Date constructor parses a given string.

Second Round of Solutions

Now (after 2 hours) that I realized that my first idea wouldn't work, I came up with another

If we create a Date object with the given ISO string, the UTC time automatically gets converted to the current timezone.



const date = new Date('2023-02-22T22:00:43.000Z')

// Wed Feb 22 2023 14:00:43 GMT-0800 (Pacific Standard Time)
console.log(date)

Now, if we remove the Z from the end of the ISO8601 string, the timezone does not get automatically converted.



// notice the change
const date = new Date('2023-02-22T22:00:43.000')

// Wed Feb 22 2023 22:00:43 GMT-0800 (Pacific Standard Time)
console.log(date)

The console.log output changes from 2:00 PM to 10:00 PM

Pseudocode?

So here was the idea that I had. For simplicity purposes, let's select a date & time from the datepicker in our app: Feb 22 2023 at 4:30 PM

If we console.log this Date object's ISO8061 string, we'll get:



2023-02-23T00:30:00.000Z

Notice how the date is one day ahead and the time is 8 hours ahead of our given time. We can offset this difference simply by subtracting 8 hours (since I created this in the PST timezone) from the UTC time.

If we do that (subtract 8 hours), we get



2023-02-22T16:30:00.000Z

However, if we create a new Date object and console.log that, we get this string:



Wed Feb 22 2023 22:00:43 GMT-0800 (Pacific Standard Time)

We can still see that the UTC time is being converted to the local time. We can fix that by chopping off that trailing Z character in the ISO8601 string.

This is what the resulting ISO8601 string would look like:



2023-02-22T16:30:00.000

Now, if we console.log the given Date object in San Francisco, we get this string:



Wed Feb 22 2023 16:30:00 GMT-0800 (Pacific Standard Time)

Now, despite the timezone information still being there in the console.log, if we run the same code in Honolulu, we'll get



Wed Feb 22 2023 16:30:00 GMT-1000 (Hawaiian Aleutian Time)

The two dates line up! Now here is the actual implementation for the pseudocode:



export const dateWithoutTimezone = (date: Date) => {
  const tzoffset = date.getTimezoneOffset() * 60000; //offset in milliseconds
  const withoutTimezone = new Date(date.valueOf() - tzoffset)
    .toISOString()
    .slice(0, -1);
  return withoutTimezone;
};

First tzoffset initializes a new Date and get the timezone offset in milliseconds (in my case, it would be 28800000 milliseconds).

Then, we subtract that from the value of date, which was 10:30 PM, so it would now be 4:30 PM. Then, we cut off the trailing Z from the ISO String so that JS doesn't consider it in UTC and convert it.

And there we go! The function returns an ISO String that we can now store in our databases.

To parse this date again, you can simply run:



new Date("2023-02-22T16:30:00.000")

and if we console.log that, we'll get



Wed Feb 22 2023 16:30:00 GMT-1000 (Hawaiian Aleutian Time)

End

Hey thanks for reading my blog! I'm planning on writing small blogs (if schoolwork doesn't get in the way).

It's been a while since I last blogged, but in that time I've founded Tripley, an app that helps you plan and go on trips much more easily. It would help us out a ton if you could sign up for our waitlist and give us a follow on Twitter and Instagram. Thanks!

If you want to see more of my daily thoughts, follow my Twitter, much appreciated!

Sanity.io: a really good CMS

Shubham Patil — Thu, 30 Jun 2022 03:28:53 +0000

A couple weeks ago, I had to figure how to serve dynamic content for my personal website. While researching, I was led to the concept of a CMS (Content Management System). Most CMSs have the concept of the frontend and backend both being included, but that wouldn't work for my use case, since I already had a frontend up and running.

Headless CMS

This is where I learned about the concept of a Headless CMS. The concept of a Headless CMS is that you only get the backend, and instead you ping an API for your data.

I started searching for a good list of Headless CMSs, but none of them were quite as quick to setup as I expected. Most of them required you to host them somewhere, and I definitely did not want to spend money in order to host my stuff on a server.

Introduction to Sanity

While I was searching for a good CMS for my website, a certain Benjamin Ashbaugh (yes, I can confirm he is a cow) in Hack Club's Slack workspace told me about a certain CMS called Sanity. It didn't require me to host my own instance anywhere and was really easy to edit through a tool called Sanity Studio.

So I decided to give it a try, since the worse that could happen is that I don't have a good experience and lose hours of my life ¯_(ツ)_/¯

Let's-a-go!

Sanity has a really good starter guide to introduce you to the technology, so I would recommend following that to get the basic repository set up

Difference between Sanity Studio and Content Lake

Sanity Studio is a really intuitive tool used to manipulate data from Sanity itself (sort of like how Prisma Studio). Content Lake is the data itself that comes from handling data in Sanity Studio. Clients can access the Content Lake from the API that Sanity provides.

Schema

After you get Sanity Studio working, you're probably going to have to generate a schema.

One file will be labeled schema.js, which will be the gateway to our schema. Here is an example of it:

// First, we must import the schema creator
import createSchema from "part:@sanity/base/schema-creator";

// Then import schema types from any plugins that might expose them
import schemaTypes from "all:part:@sanity/base/schema-type";
import project from "./project";

// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
  // We name our schema
  name: "default",
  // Then proceed to concatenate our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    /* Your types here! */
    project,
  ]),
});

You might be wondering what exactly is the project import doing there. Well, that's our second file, the actual schema of the entity in question, project.js. Here is an example of that file:

export default {
  name: "project",
  type: "document",
  title: "Project",
  fields: [
    {
      name: "name",
      type: "string",
      title: "Name",
    },
    {
      name: "description",
      type: "string",
      title: "Description",
    },
    {
      name: "demo",
      type: "string",
      title: "Demo",
    },
    {
      name: "github",
      type: "string",
      title: "Github",
    },
    {
      title: "Technologies",
      name: "technologies",
      type: "array",
      of: [{ type: "string" }],
    },
    {
      title: "Image",
      name: "image",
      type: "image",
    }
  ],
};

Here, first of all, we import an object as the default export. Then, we define the name, type, and title. In our project.js file, we specify that it is a "document". Now, you might be wondering the difference between the name and the title. The name is most likely how Sanity refers to the data internally, while title is just how it's presented to the user.

The fields array contains a bunch of objects specifying the different fields in the schema. You can find more about schema types here

Sanity Client

To access data from the Content Lake, I'm going to use a client for Sanity. Alternatively, you can use the HTTP API.

I'm going to use the Node.js API, so I can simply install it with

npm install @sanity/client

yarn install @sanity/client

Then, we are going to create a new file (anywhere you want) with any name you want (I'm going to use client.js)

Then, use the code

import sanityClient from "@sanity/client";

export const client = sanityClient({
  projectId: "PROJECT_ID_PROVIDED_IN_SANITY.JSON",
  dataset: "DATASET_PROVIDED_IN_SANITY.JSON"
  useCdn: true,
});

Here, we're using the useCdn:true, because the CDN is much faster to respond and gives us more API calls in our free tier. Although, it doesn't update the content as quickly as without the CDN, so do keep that in mind.

Then, to get the content, we can use

const projects = await client.fetch(
    `
    *[_type == "project"]
  `
);

This basically selects everything document that has the type of "project" (e.g. every piece of content that follows the schema in project.js from the earlier example. Remember to run this in an async function by the way.

If you're curious about the query language that is used by Sanity, check out the guide here and the cheatsheet

End

So that's pretty much. Leave a reaction on the beautiful panel to your left (or a comment below)!

Follow me on Twitter: https://twitter.com/ShubhamPatilsd
Follow me on GitHub: https://github.com/ShubhamPatilsd

IP Location Grabbing

Shubham Patil — Sun, 29 May 2022 23:28:21 +0000

A couple of months ago, for a 12 hour hackathon, I built https://geochattr.netlify.app/ with Maggie Liu and Gautam Paranjape.

The project is essentially a way of communicating through drawings, and you can chat with people in your city.

The way we got the location to put in that city's chat room is by using your IP.

Guide

To do this, we're going to have to use an API to get the location information.

I generally found that most have some sort of premium plan, but IpAPI is good enough and has a good amount of accuracy for it to function.

Quick Method

To get your location, simply make a GET request to https://ipapi.co/json/ from the client. This will give directly give us all of our necessary information to get the user's location.

You can use any library you want from the client. I tend to stick to axios, so here is an example in axios:

axios.get("https://ipapi.co/json/").then(location => {
    console.log(location.data)
});

However, if you're doing this with plain HTML, CSS, JS, you're going to want to use the browser's fetch API.

fetch("https://ipapi.co/json/").then(data=>data.json()).then(location=>{
   console.log(location);
})

Then, you'll have something that looks like this (obviously I'm using a VPN):

{
    "ip": "89.238.130.72",
    "version": "IPv4",
    "city": "Manchester",
    "region": "England",
    "region_code": "ENG",
    "country": "GB",
    "country_name": "United Kingdom",
    "country_code": "GB",
    "country_code_iso3": "GBR",
    "country_capital": "London",
    "country_tld": ".uk",
    "continent_code": "EU",
    "in_eu": false,
    "postal": "M32",
    "latitude": 53.4507,
    "longitude": -2.3186,
    "timezone": "Europe/London",
    "utc_offset": "+0100",
    "country_calling_code": "+44",
    "currency": "GBP",
    "currency_name": "Pound",
    "languages": "en-GB,cy-GB,gd",
    "country_area": 244820.0,
    "country_population": 66488991,
    "asn": "AS9009",
    "org": "M247 Ltd"
}

More Secure Method

Of course, the client can always disable JavaScript when they want to, meaning that they can disable the GET request to the API. However, we can still get the IP on the server.

For example if a user wants to upload a post, and you want to categorize it based on what city they took it in, you can get the IP as such. We can get the IP from the user like so:

app.post("/upload", (req,res)=>{
    /* ... */
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
  console.log(ip); // ip address of the user

})

Then, we can make a GET request to the ipapi.co again, but this time, we're going to send a bit of a different request.

Instead of sending a request to https://ipapi.co/json, we'll send a request to https://ipapi.co/{ip}/json, where {ip} is the IP that you extracted from the incoming user's request. This would look like, for example, https://ipapi.co/89.238.130.72/json/. You should probably use axios for server side requests, so follow the example above on how to make the GET request.

Conclusion

I hope you learned something new on how to actually do this. I remember getting stuck for an hour or two on how exactly to do this during the hackathon, and I wanted to help prevent that confusion for others in the future.

If you want to see a cool demo, check out https://ip-grabber-demo.shubhampatilsd.repl.co/ for an interactive map.

The source code is at https://replit.com/@ShubhamPatilsd/ip-grabber-demograbber-demo#index.html

Anyways, leave a reaction on the left if you enjoyed this blog and follow me on Twitter!

Tab and Stack Layout in React Native

Shubham Patil — Sat, 02 Apr 2022 03:24:19 +0000

I was creating a React Native app with Expo a week ago and I had to do a layout with a bottom tab navigator and implement a stack layout at the same time. Stack navigation essentially puts screens on top of other screens when you navigate to other pages, while tab navigation allows you to have a bottom page to choose between pages.

Here is the demo:

Code:

ShubhamPatilsd / tab-stack-example

React Native Tab Stack Example

I'm going to be using React Navigation for this example, as it is the recommended library by Expo to use.

To get started, run (if you use npm)


 install @react-navigation/native

or run


 add @react-navigation/native

``` if you use Yarn to get started.

I prefer `yarn` so I chose that one.

Next, if you're using Expo, run
```expo

 install react-native-screens react-native-safe-area-context

``` to install the required dependencies for the project.

There is additional setup for base React Native projects, like pod linking and those additional dependencies, so check out the full setup guide [here](https://reactnavigation.org/docs/getting-started/).

Next, open up your `App.js` or `App.tsx` and import `NavigationContainer` from the React Navigation Library.

Import it by using
```js


import { NavigationContainer } from "@react-navigation/native";

Then, put that component in the your App() component:



export default function App() {
  return (
    <NavigationContainer>
      {/*It's a surprise tool that'll help us later!*/}
    </NavigationContainer>
  );
}

Now, we need to implement the Stack screen navigator.

We are going to import a function that gives us a navigator we can use to wrap all our screens in.

To install the stack navigator, we need an npm package called @react-navigation/native-stack. (Yes, another package 🙄).

Installation with npm:



npm install @react-navigation/native-stack

Installation with yarn:



yarn add @react-navigation/native-stack

Import it with:



import { createNativeStackNavigator } from "@react-navigation/native-stack";

Then, create the navigator with (keep it out of any components):



const Stack = createNativeStackNavigator();

Then, under our <NavigationContainer> component, we add <Stack.Navigator> as so:



export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* TODO: Add screens later */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And next, as you guessed, we're going to add screens.

Let's create two screens, Main and Settings. Put:



<Stack.Screen name="Main" component={Main}/>
<Stack.Screen name="Settings" component={Settings} />

under <Stack.Navigator>.

Oh no! You don't have a Main/Settings component? Don't worry, we can make one really quickly.

Outside of any of our other components (you can put it inside but I like it outside), create the Main component with



function Main() {
  return <Text style={styles.container}>I ❤ React Native</Text>;
}

function Settings() {
  return <Text style={styles.container}>You got to the settings page</Text>;
}

The styles are the default template styles we're given when creating an Expo app, but if you need them here they are:



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Now, your App.js/App.tsx should look like this:



import { StyleSheet, Text } from "react-native";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

function Main() {
  return <Text style={styles.container}>I ❤ React Native</Text>;
}

function Settings() {
  return <Text style={styles.container}>You got to the settings page</Text>;
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={Main} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Okay, now let's add a tab navigator into the mix. Time for more packages 🥳 📦!

Installation with npm:



npm install @react-navigation/bottom-tabs

Installation with yarn:



yarn add @react-navigation/bottom-tabs

Import it with



import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

and add



const Tab = createBottomTabNavigator();

below the Stack definition:



import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator(); //this one

Now, let's go to the Main component. You want to change it so that it has a Tab navigator, so that we can have tab-based navigation.



function Main() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: "#0d9f61",
      }}
    >
      <Tab.Screen
        name="Home"
        component={() => {
          return (
            <View>
              <Text>Home Screen</Text>
            </View>
          );
        }}
        options={{
          headerShown: false,
        }}
      />

      <Tab.Screen
        name="OtherPage"
        component={() => {
          return <Text>Other Screen</Text>;
        }}
        options={{
          headerShown: false,
        }}
      />
    </Tab.Navigator>
  );
}

The Tab.Navigator contains screens that we can navigate to with the bottom tab bar that shows up.

Here is the code so far:



import { Button, StyleSheet, Text, View } from "react-native";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function Main() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: "#0d9f61",
      }}
    >
      <Tab.Screen
        name="Home"
        component={() => {
          return (
            <View>
              <Text>Home Screen</Text>
            </View>
          );
        }}
        options={{
          headerShown: false,
        }}
      />

      <Tab.Screen
        name="OtherPage"
        component={() => {
          return <Text>Other Screen</Text>;
        }}
        options={{
          headerShown: false,
        }}
      />
    </Tab.Navigator>
  );
}

function Settings() {
  return <Text style={styles.container}>You got to the settings page</Text>;
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={Main} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Now, go to the Main function and add a navigator parameter to the function's parameters like so:



function Main({navigation}){
    /*...*/
}

Then, go to the Tab.Screen called "Home", and change it to



 <Tab.Screen
        name="Home"
        component={() => {
          return (
            <View>
              <Text>Home Screen</Text>
              <Button
                onPress={() => {
                  navigation.navigate("Settings");
                }}
                title="Go to settings"
              />
            </View>
          );
        }}
        options={{
          headerShown: false,
        }}
      />

Here, we added a button, so that we can go back to the Settings page. The onPress with navigation.navigate does the action of going to the "Settings" page when pressed.

And there you have it!

Here is the demo:

This is the entire code:



import { Button, StyleSheet, Text, View } from "react-native";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function Main({ navigation }) {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: "#0d9f61",
      }}
    >
      <Tab.Screen
        name="Home"
        component={() => {
          return (
            <View>
              <Text>Home Screen</Text>
              <Button
                onPress={() => {
                  navigation.navigate("Settings");
                }}
                title="Go to settings"
              />
            </View>
          );
        }}
        options={{
          headerShown: false,
        }}
      />

      <Tab.Screen
        name="OtherPage"
        component={() => {
          return <Text>Other Screen</Text>;
        }}
        options={{
          headerShown: false,
        }}
      />
    </Tab.Navigator>
  );
}

function Settings() {
  return <Text style={styles.container}>You got to the settings page</Text>;
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={Main} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Hope this helps and I'll come back in a couple of weeks with more stuff!

In the mean time, follow me on Twitter to get more frequent updates on my coding journey!
👋

Use Prisma Instead of SQL

Shubham Patil — Mon, 28 Feb 2022 05:47:59 +0000

What is an ORM?
Prisma Schemas
Benefits of this schema approach
Relations
Prisma Client
Benefits Compared To SQL
Learning Resources

Whenever I have to do anything regarding databases, my top pick with dealing with that stuff is usually Prisma. If you didn't know, Prisma is an ORM for SQL databases (and recently, MongoDB).

What is an ORM?

You might be wondering what an ORM is? Well, let me explain. Usually, with SQL databases, you have to write out queries in the SQL language. That includes statements like DROP TABLE STUDENTS; or SELECT * FROM STUDENTS WHERE emotion="stressed".

That mess is SQL, and in the 2000s, that was mainly how data was pulled from the server. Developers had to learn an entirely new "language" (not Turing-Complete of course) just to get some data from their database. This added layer of difficulty resulted in the need of specialization in these languages, and just slowed down the developer when they were making their applications.

Since this was obviously really painful, solutions were made, these being ORMs. If you were building an application in Go, for example, you could directly interact with your database using Go, not the SQL query language. This was really convenient as developers could now do complex things without the hassle of learning a new language.

Prisma is awesome!

This brings me to my next point: Prisma. Prisma is one of these ORMs, but it has a ton of intuitive and awesome features.

For example, if you wanted to select all the users that have signed up with Google, all you have to do in Prisma is

prisma.users.findMany({
    where: {
        OAuthMethod: "Google"
    }
}

Prisma Schemas

Where do we define the data? That leads me to the Prisma Schema.

This is an example schema in the context of the users:

model Users {
    id String @default(uuid())
    OAuthMethod: String
    name String
    email String?
}

Let me break down the model. In the first field, we are creating an id for each user. This id defaults to a random uuid that is generated. The id field has a type of String, since uuid() contains non-integer values. Next, the OAuthMethod and name are two other strings, but they are not default and we have to manually provide the values. The last value email is another string, but it is optional in the user model. It is not mandatory to give it a value, and the Prisma Client SDK won't scream at you with errors if you don't provide it.

Benefits of this schema approach

Prisma (or for that matter any ORM), is declarative compared to SQL's imperative model creation. In your schema.prisma file, all you do is declare model and Prisma handles the rest for you. However, in SQL, you have to manually say CREATE TABLE. This declarative approach makes it much easier to work with and understand, and allows the developer to ship their product faster.

Relations

Relations are also pretty straight forward in Prisma. This is how we would do a one-to-many relation, where the User has a bunch of Posts.

model User {
    id String @default(uuid())
    OAuthMethod: String
    name String
    email String?
    user_posts Posts[]
}

model Posts {
    id String @default(uuid())
    title String
    body String
    ownerId String
    owner User @relation(fields:[ownerId], references:[id]) 
}

What we do here is that we define a primary key (id), and a foreign key ownerId. The ownerId links the two tables together, hence why we create a relation for it. The fields parameter for the relation is the foreign key, while the references parameter is the primary key. The owner in the Posts model is the type of User, and the relation makes it link back to the actual owner. This link between the two tables makes it so that the user has many posts, but each post has only one owner.

Prisma Client

The Prisma client is also very intuitive to use. For example, to select a user that has an OAuthMethod of "Google", and list their email and their posts, (using the schema above), we can simply do this:

prisma.users.findMany({
   where:{
       OAuthMethod: "Google"
   },
   include:{
       user_posts: true   
   },
   select: {
       email: true
   }
})

First, with prisma.users, we access the Users data model. Then, we use findMany to, you guessed it, find multiple records that match out criteria.

Everything in this function is a JSON object, and the where field is another object. Inside the where field, we can specify that we want OAuthMethod to be equal to "Google".

Now, with include we can include the posts (as defined in the schema) that the user has by settings the user_posts parameter to true (user_posts is a field in the User model). If you don't have the include with the user_posts, or user_posts is set to false, it won't include the user's posts in the output.

Next, select allows us to only select the user's email out of the user's data. We can also set email to true here.

Benefits Compared To SQL

One of the clear advantages of Prisma is that you're not spending precious developing time to learn a completely new query language, Prisma allows the developer to get their work done quickly and efficiently without going through the extra steps to do the same thing. You could go through enormous efforts to learn SQL, but Prisma and other ORMs will be there to lessen the load, and at that point, you're basically choosing to be inefficient.

Learning Resources

Here are some learning resources:

Tutorial by Laith Harb:
Quick rundown of Prisma by Fireship.io:

Anyways, I hope you enjoyed my blog! This one might be a bit controversial though 🙃. If you enjoyed/didn't enjoy this little blog, I would appreciate it if you could like and share (it's really simple for you but means a lot to me). Also do let me know your opinion of Prisma/SQL in the comments below!

I'll see you all in March!

I wrote a script to get NFTs for me

Shubham Patil — Sat, 08 Jan 2022 03:42:35 +0000

Check it out at https://www.youtube.com/watch?v=l4NJ_PvAAec

Hope you enjoy!

Why are some frameworks so popular?

Shubham Patil — Sat, 01 Jan 2022 06:56:02 +0000

Humble Beginnings

I recently checked Stack Overflow's Developer Survey 2021 and instantly saw that

Why is this the case though? How did React become so wide-spread?

Clarification

In this case,

Most Popular != Most Loved

If we take a look back at the popular web framework in the Stack Overflow Developer Survey, we see this bar graph (I think that's what it's called):

Now, if we look at the most loved frameworks,

In the first graph, it is evident that Svelte is evidently not that widespread/common compared to other frameworks. However, it seems that Svelte is immensely loved by developers compared to React.

Hence, this is why I'm saying that the Most Popular framework is not the Most Loved. There are hidden gems that don't have the publicity to become widespread, and I believe Svelte is one of these.

React Study

One thing that I see React has, and one of the most important factors for increasing popularity is the size of the community for a technology. With React, if you search up for a fullstack tutorial on YouTube, I can bet that most of the results will definitely include React in them. This is because React has a bunch of developers using it, and so does JQuery.

Now, when someone comes to learn how to create a fullstack application, they will be guided in the direction of React, not the other libraries. I'm going to call this "Filter-Pass-Down" I'm not aware if this is an actual term or not but I made it so it doesn't matter anymore unless one of you comment about it. Then I'll change it. But for now, "Filter-Pass-Down" it is. It only takes a group of developers to be enchanted by the spells of a library before spreading it to others.

There is also another inconspicuous reason to why React is so widespread: its ecosystem. There are countless packages designed for React that just make developers' lives that much easier. Things like Framer Motion and React Reveal are mere examples of the vast and massive amounts of packages that help you get work done.

Svelte

One thing that Svelte lacks compared to React is the enormous community surrounding it. Don't get me wrong, it's somewhat there; the problem is that it's small. However, not many professional-grade applications are using it. There are also not that many supporting packages for it like React does. The lack of tutorials to get someone started with development don't use Svelte, so it makes it difficult for large scale adoption to occur. However, I've seen a lot of developers use Svelte and use it afterward, giving me a sense that it will grow in popularity.

Cherry On The Cake

While the community is one of the most important things to make a framework/library succeed, the innovative features it brings are equally important and tie the entire project together in a neat little package.

React used the concept of a Virtual DOM opposed to changing the actual DOM of a webpage, speeding up the entire process of updating the page (it also used declarative state management so you simply had to tell what you wanted to change and it would change the element for you). React also implemented JSX, opposed to the HTML templates stuff the Angular used. All of these features were well liked by the developers who used React, thus promoting the product.

This rise in popularity can also occur for Svelte, I believe. It gives a great user experience and is loved by many developers around the world. Svelte only needs a larger community/ecosystem for it to become a popular tool, and that very well might happen in the future.

Anyways those were my thoughts.

Recap of what you need:

Massive community/ecosystem
Innovative Features

People simply need that first taste of your library before suggesting it to others, and it only expands from there.

Sorry for the late blog this month I had final exams :(
If you liked this blog though, please leave a comment and click the buttons on the left side of the screen 👍.

Anyways, I'll try to post faster next month. Happy New Year!

Also, Follow me on Twitter it helps out a ton!: https://twitter.com/ShubhamPatilsd

Get Started With ThreeJS

Shubham Patil — Tue, 23 Nov 2021 19:33:25 +0000

Recently, I used ThreeJS and it was really fun. Today, I'll teach you how to get started with it, with a fun (and simple) tutorial.

As stated by Wikipedia,

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL.

Here's is the finished product:

I also made a demo of the finished product.

React Setup
ThreeJS Setup

I'm going to do this in React, but most of this stuff should apply for plain HTML CSS and JS. The ThreeJS docs have a really nice starter guide to get you up and running with vanilla JS, so do check it out. If you haven't done React before, I would suggest watching this video by Aaron Jack to get you started as fast as possible.

React Setup

Anyways, let's initialize a React project. If you want, you could also use something like NextJS, but I'm sticking to Create React App for now.

I'm using yarn to initialize my project, so here are the two commands (one with npm and the other with yarn) to create a React project.

npm: npx create-react-app threejs-learning
yarn yarn create react-app threejs-learning

And yes, as explained by the React docs, npx is not a typo (it's something to run scripts that comes with npm).

When you initialize the project, you'll see something like this:

Disregard this for now (we'll deal with the unnecessary files later). What you should do is start the server so you can see what the boilerplate looks like.

To do that, run the command that corresponds to what you initalized the project with:
yarn: yarn start
npm: npm run start

This will open up a browser tab at http://localhost:3000 and you'll see something like this:

Great job you now have a React project set up!

Back to your editor now. In the src folder, you'll see these files:

Here, you can delete App.css, App.test.js, index.css, logo.svg, reportWebVitals.js, and setupTests.js

Shoot! If you look back at the browser tab, we encounter an error:

If you take a look back at the App.js and index.js files in your editor, you'll see that they are importing some of the files we deleted, thus resulting in an error:

App.js:

import logo from "./logo.svg";
import "./App.css";

index.js

import "./index.css";
import reportWebVitals from "./reportWebVitals";

The solution is simple and requires only a couple keys. Just delete those lines from each file 🤪.

But some further works still needs to be done. Our code is still using the stuff we imported.

In index.js, after deleting the imports, your file should look like this:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

We need to delete the reportWebVitals(); and the <React.StrictMode> since we removed the imports for that.

This is index.js after those changes:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Now, let's fix App.js. This is how it should look like right now:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Just delete everything in the return(); function and replace it with a simple <h1>I love React!</h1>. This is how it should look:

function App() {
  return <h1>I love React!</h1>;
}

export default App;

Ok great, now we have all the bloat out of our way. Note that this stuff we deleted can be important if you have a big project, but for now it can be discarded since this a learning project.

Now, if you save it, you should see this in the browser:

ThreeJS Setup

So now we get to interact with ThreeJS. To get started, install it:

yarn: yarn add three
npm: npm install three

Okay, now go into your App.js file and import ThreeJS like this:

import * as THREE from "three";

Then, change your <h1>I love React!</h1> to <canvas id="bg"></canvas> in the return function of the component. This is so that ThreeJS has something to attach itself on and do its work.

At this point, we're going to have to do a clever "hack" if you'll call it that. Since the JavaScript loads before the JSX (JSX is the code that looks like HTML), our code is unable to reference the canvas element if placed before the return statement.

We're going to have to use something called useEffect so that ThreeJS runs after the first render and we can access the canvas element.

Import useEffect with

import { useEffect } from "react";

and insert

useEffect(() => {}, []);

above the return statement. Here, the empty array as the second argument indicates for the useEffect hook to only run on the first render, not repeatedly after each one. Traditionally, you would put variable name(s) there so that useEffect would run after those variable(s) changed, but we only want it to run after the first render.

Now, in the useEffect, create a new ThreeJS scene (this scene is where everything will show up):

useEffect(() => {
  const scene = new THREE.Scene();
}, []);

Now we have to create a camera. Add a camera with

useEffect(() => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
}, []);

This might be a bit overwhelming, but let me break it down. The first parameter (the 75) is the FOV of the camera. FOV (aka Field of View) is basically how much the camera can see.

Think of it like this pizza:

The angle of the missing slice is how much the camera can see. The higher the angle, the more it can see. However, if it's too high, you can get results that don't look right.

The second parameter is for the aspect ratio of the view. This is basically the ratio of the width : height, and I've done so with the space of the page using the window object. The next two parameters are how near and far the camera can view objects.

Next, we have to create a renderer. Below the camera, create a renderer and set the background of the scene:

useEffect(() => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  const renderer = new THREE.WebGL1Renderer({
    canvas: document.querySelector("#bg"),
  });
  scene.background = new THREE.Color(0x4e9fe5);
}, []);

The canvas option allows ThreeJS to latch itself on an element in the DOM. The scene.background enables us to create a color with the #4e9fe5 hex code (which will be our sky).

Next, add the following code:

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.set(10, 2, 0);
renderer.render(scene, camera);

The first line sets the pixel ratio, while the second sets the dimensions for the renderer. The third line sets the position for the camera (with the x, y, and z axes, respectively). The last line renders the scene with the camera we made above.

Now, let's make some lights:

const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hemiLight.position.set(0, 20, 0);
scene.add(hemiLight);

const dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(-3, 10, -10);
scene.add(dirLight);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
ambientLight.position.set(0, 0, 0);
scene.add(ambientLight);

The first chunk of code creates a new light, creates a gradient (from colors white to grey) of light from the top to the bottom of the scene. To wrap your head around this concept, I would suggest this interactive playground online) We then set the position of the light (with the xyz axes) and add it to the scene.

The second chunk sets up a directional light, which is like a traditional light source (it illuminates from a point). We set its color to white, set its position, and add it to the scene.

The ambient light is basically a light that is illuminating from everywhere in your scene. Think of your scene being put in a ball, which is then illuminated from the inside. We then set it's position to the center of the scene and add it.

Ok so now we have a basic scene set up. It should look like this:

We need to get a model in the scene now, to make it interesting. I would suggest going to poly.pizza and getting a model. I am using this airplane, (Attribution for model: Small Airplane by Vojtěch Balák CC-BY via Poly Pizza) but I highly recommend you to use any model you want. Download the .glb format of the object with this button:

Once downloaded, at this .glb file to the public/ folder in the root of your project.

At the top of your code, add this to import the GLTFLoader:

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

Next, add this code under the ambient light code to import the model:

const loader = new GLTFLoader();

loader.load("/NAME_OF_FILE.glb", function (gltf) {
  gltf.scene.scale.set(0.8, 0.8, 0.8);
  scene.add(gltf.scene);
});

The first line creates a new loader object, so we can load the file. The loader.load part loads the actual model. The first argument is the .glb file. The /NAME_OF_FILE.glb accesses it from the public/ folder, which is replaced by the name of your .glb file. The second argument is a function that has the resulted model as a varible. We can access the proper model with gltf.scene, hence why we are adding that to our scene instead of just gltf.

Inside the function, I am scaling the model down to 80% of its original size since it was way too big for the viewport. Note that this is optional based on how good your model looks. It might even be small, so you can scale it up in that case.

Next, we have to add an animate() function. This basically just re-renders our ThreeJS scene constantly. To do that, just create a function like so:

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

The first line inside of the function acts like a loop (the actual term is recursion). It calls the animate function again inside of itself, so it keeps re-rendering. The next line renders the scene and the camera again. We call the function outside of itself so it can start.

But wait a minute, nothing shows up in the browser! It's just a blue background! That's because we didn't add controls for the scene. ThreeJS doesn't work without these controls, hence why they are necessary.

To put them in the scene, import:

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

and add this above the function animate() stuff:

const controls = new OrbitControls(camera, renderer.domElement);

This creates a new object called controls, which is made from the OrbitControls class. The constructor of the OrbitControls has a camera (which we previously defined), and the domElement to put the controls in (which we set in the creation of the renderer with canvas: document.querySelector("#bg");

Now, you should see this in the browser!:

You can even interact with it by dragging using your left mouse button, scrolling to zoom in, and using right click to move the camera.

The only problem with this is that when you resize the window, it becomes really, REALLY distorted:

This is definitely not what we want, so let's change that. Above the place where you defined your animate function, create a function like so:

const resizeWindow = () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.render(scene, camera);
};

Here, we are updating the renderer dimension data. First, we set the new width and height. Then we set the new pixel ratio (this probably will not change but we're setting it just in case). Next, we change the aspect ratio of the camera to the new width and height. We then update the camera's view and re-render the scene.

If you check the browser again and resize it, you'll see that now this happens:

This is happening because we haven't added called the function at all yet. To do so, add this after your resizeWindow function:

window.addEventListener("resize", resizeWindow);

This line of code adds an event listener to the window object, and calls the resizeWindow function whenever the window is resized.

Now the plane is not distorted anymore!

We have the model loaded, but we should add some auto-rotation to make it look cool. To do that, add this in the function:

controls.autoRotate = true;
controls.autoRotateSpeed = 4.0;
controls.update();

This essentially enables auto rotation, multiplies the speed by 4, and updates the controls to make it spin. If you want a laugh, change the autoRotateSpeed to something like 1000.0 and watch it go crazy 🤣.

In the end, your App.js should look something like this:

import * as THREE from "three";
import { useEffect } from "react";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

function App() {
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    const renderer = new THREE.WebGL1Renderer({
      canvas: document.querySelector("#bg"),
    });

    scene.background = new THREE.Color(0x4e9fe5);

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.position.set(10, 2, 0);
    renderer.render(scene, camera);

    const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
    hemiLight.position.set(0, 20, 0);
    scene.add(hemiLight);

    const dirLight = new THREE.DirectionalLight(0xffffff);
    dirLight.position.set(-3, 10, -10);
    scene.add(dirLight);

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    ambientLight.position.set(0, 0, 0);
    scene.add(ambientLight);

    const controls = new OrbitControls(camera, renderer.domElement);

    const loader = new GLTFLoader();

    loader.load("/small-airplane-v3.glb", function (gltf) {
      gltf.scene.scale.set(0.8, 0.8, 0.8);
      scene.add(gltf.scene);
    });

    const resizeWindow = () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.render(scene, camera);
    };

    window.addEventListener("resize", resizeWindow);

    function animate() {
      requestAnimationFrame(animate);

      controls.autoRotate = true;
      controls.autoRotateSpeed = 4.0;

      controls.update();

      renderer.render(scene, camera);
    }

    animate();
  }, []);

  return <canvas id="bg"></canvas>;
}

export default App;

That's it! Now you're up and running with ThreeJS. This is a beginner tutorial and there is a bunch of stuff I didn't cover, so check out the ThreeJS docs and examples. If you've followed along with this tutorial, choose another model and send a picture in the comments section so you can share your work!

The full code is in a repository on GitHub:

ShubhamPatilsd / threejs-learning

Code for the tutorial for ThreeJS!

If you liked this post, the three shiny buttons on the left are waiting to be clicked, and if you didn't like the post, they still are open to clicking.

Oh yeah, and I also have a Twitter now (very exciting stuff). If you enjoy my blogs, do follow me as I share my thoughts about programming there as well (but more frequently). Follow me at: https://twitter.com/ShubhamPatilsd

Start Using Tailwind CSS Right Now

Shubham Patil — Sun, 03 Oct 2021 20:20:28 +0000

I've been using Tailwind CSS for the past 4 months now, and I can confidently say that it's much much MUCH better than plain CSS.

If you didn't know, Tailwind CSS basically provides utility classes that can be used to style your HTML. Think of it as Bootstrap but with much more freedom. Instead of being stuck to a certain design, Tailwind CSS gives you the ability to make your own. Although it does have a design system, it is pretty subtle compared to Bootstrap, while saving you time from creating a design system from scratch like with plain old CSS.

You might be confused so let me give you an example. To create a 4rem margin above your element in CSS, you would do

.element{
    margin-top: 4rem;
}

and then your HTML would look like so:

<div class="element">
    ...
</div>

But, with Tailwind CSS, those lines of CSS get incorporated into the class of the HTML element, like so:

<div class="mt-16">
    ...
</div>

Here, the mt-16 stands for margin-top: 4rem.

This leads me to my first point: creating an entire design system (including spacing and classes) can be very time-consuming and unproductive. Tailwind CSS provides a solution to this problem by providing spacing, color, responsive and basic animation classes, that act as substitute for actual CSS.

For example, for spinning animation, all you need is the class name animate-spin. The implementation for that would be:

<div class="animate-spin">
    ...
</div>

and you have a spinning element now!

The color system Tailwind has is fantastic for small projects in which you don't want to create a color scheme.

The colors that Tailwind offers are not just CSS colors with fancy names, they are much more appealing.

This is Tailwind's most vibrant blue:

And then this is CSS's most vibrant blue:

It is noticeable that Tailwind's colors are much more soothing and are less harsh than the base CSS colors.

Tailwind also has a variety of other classes that shorten the amount of styling you need to write. For example, pseudo-selectors like hover:, are basically condensed into

<div class="hover:whatever-you-want-to-do-on-hover">
    ...
</div>

Tailwind also has a bit of sorcery when it comes to responsive layout. Tailwind uses pre-set (by default) pixel values for certain breakpoints. For example, there is an sm breakpoint which is a screen width of 640px. If you're confused, just think of these breakpoints as media queries in CSS.

To use these breakpoints, just use breakpointName:. The breakpointName is one of the values below:

Say that you wanted to hide a div on smaller screens for a responsive layout and have it shown as flex on screens bigger than 768px.

<div class="hidden md:flex">
   ...
</div>

In the HTML above, it basically says to "Hide everything below the md breakpoint, and everything above the md breakpoint should be shown as flex". (In this case, flex = display: flex; in normal CSS).

Tailwind also has a lot customization options. Just hop into the tailwind.config.js and you have a bunch of options to customize breakpoints and other colors and stuff.

However, Tailwind is not without its weak points. First let's talk about how bloated the code looks after applying these styles.

Just take a look at this:

If you wanted four buttons, you would have to do something like:

<button class="bg-blue rounded-md shadow-md px-2 py-1">
    ...
</button>

<button class="bg-blue rounded-md shadow-md px-2 py-1">
    ...
</button>

<button class="bg-blue rounded-md shadow-md px-2 py-1">
    ...
</button>

<button class="bg-blue rounded-md shadow-md px-2 py-1">
    ...
</button>

Pretty repetitive right? Well, this can be solved if you use a JavaScript framework that supports the creation of components, like React, Vue, Angular, and Svelte (which is loved by a lot of developers due to its simplicity).

Another option to shorten the class name is to use @apply in the accompanying CSS file that Tailwind needs to apply the styles. More information about the applying concept can be found on their website

The same example of that button class name would be condensed to

.button{
    @apply bg-blue rounded-md shadow-md px-2 py-1
}

and your button would look like:

<button class="button"> ... </button>

After a while, Tailwind becomes second nature, and you start to know exactly what to type out. This can be challenging to you if you're new to Tailwind as you think you have to memorize all the classes. Don't do this to yourself; it's like subconsciously knowing the class for the job. After a while, you simply gain the sense of which utilities to use and when to use them. Also, if you need any help, Tailwind's website is always there to assist you.

If you're interested, check out https://tailwindcss.com/docs/installation to view the documentation on setting it up with frameworks like NextJS and even CDN through your HTML.

That's all about Tailwind! As I've stated before, do check the website for more help on specific topics like, for example, CSS grid and other utilities. If you enjoyed this post, there are 3 buttons on the left side of this article for your clicking pleasure and a comment section awaiting your input. If you didn't like this article, those buttons are still open, ready to be clicked 🙃.

Using Arch Linux

Shubham Patil — Sun, 15 Aug 2021 18:34:23 +0000

This is an article originally from Medium. I have decided to switch from Medium to dev.to and import all my posts from there.

So I’ve been wishing to switch to Linux for about a year and a half now. There was just something intriguing about Linux that made me want to use it.

I used to use a 2019 Macbook Air (I still do but not very often), but the speed of the thing kills me. Sometimes I have a couple VS Code and browser windows open and it just starts lagging a lot. Not to mention the keyboard, which (due to my fault) ended up requiring a certified Apple Repair Store to fix an arrow key. The reason is not entirely me being dumb because I noticed that the key was sticky. This article is not going to be about the performance of the Mac but it was one of the reasons I wanted to switch to Linux.

My first experience with Linux was installing Ubuntu on a Lenovo Ideapad 310 about a year ago. That laptop got very slow due to it’s drive being a hard drive, not an SSD.

When I first installed it, I encountered an error that basically left me unable to install the operating system. I decided to re-download and re-flash the .iso onto the USB drive and try installing it again. This time, it actually worked!

Ubuntu was very fascinating for me and it sparked an intrigue in me for Linux. I then tried multiple distros (all of them being Debian based), and finally just settled on Ubuntu.

However, I didn’t really use this laptop much and didn’t use Linux commonly. I kept using my Macbook for a year or so until the golden opportunity to use Linux arose: building a PC.

If you are interested, here is the part list (here is the link if you want to modify it):

All in all, the entire PC came for about $808 including tax!

So when the PC came, I assembled it (which took more than seven hours because this was the first time I did it) and went to sleep at 12 AM with the PC 98% complete (I had to change the PCIE slot of the WIFI card).

In the next day or two, I opened up my Macbook and started searching on how to install Arch Linux. I was really hesitant about which distro of Linux to install.

If you didn’t know already, a distro is kind of like a flavor of Linux. Think of it like ice cream. There are different flavors like chocolate, strawberry and vanilla, each having their own pros and cons.

I had a choice of Debian based distros or Arch based distros. The former being stuff like Ubuntu, Debian, PopOS, Linux Mint etc. etc. For the latter, I had options like Arch, Manjaro, Arco and Garuda.

The main reason I went with plain Arch is because the experience of setting everything up myself was really intriguing. I also thought about package availability. When it comes to installing applications, Linux is different than macOS or Windows. Power users of either two operating systems equally hate their “App stores” and normally install programs through the application developer’s website. On Linux however, these “app stores” are actually quite good and are basically the de-facto way for users to install programs. Linux distros have something called a package manager which is an interface into these “app stores.”

On top of having packages, Arch Linux has something called the AUR, which is a set of programs that were adapted to run on Arch Linux by the Arch Linux community. This was cool because instead of going to the application developer’s website for programs not in the official Arch package list (which in most cases you would have to install the application manually), I could just install it like a normal package!

In the Linux community there is a bit of negative stigma surrounding the Arch Linux installation process in the form of the installation difficulty. I admit that if you are not comfortable using the command line/the Bash shell, you should definitely not install Arch Linux and instead go with a GUI option other than Arch like Ubuntu or Manjaro and learn the terminal from there. The Arch Installation process relies heavily on terminal usage and if you don’t know how to use it, you could seriously mess up your computer’s existing installation or have to restart the entire installation from Step One.

Now that I chose Arch to be my distro, I actually had to install it. For this, I used the official Arch wiki page’s installation guide and this guide from It’s FOSS. I also got guidance from a couple Discord servers I was a part of to see if I was really doing things the right way.

I didn’t make a swap partition as my computer had enough resources for that and I didn’t make a home partition as well because creating a user later would account for that.

Note: for the step that used pacstrap, I installed network-manager as well because that would help me do WIFI related stuff post-installation.

After installing Arch Linux, I simply rebooted the computer, took out the USB drive I had the .iso on, and arrived at a tty screen with a user and password prompt. For this, I entered the username root and the password, which I setup when installing Arch Linux.

From here, I made my own user with the useradd command, which created it’s own /home/USERNAME directory.

Now I had to get a “GUI” up and running. I had used KDE and GNOME on my old laptop before but I wanted to try something called a tiling window manager. If you didn’t know, tiling window managers basically automatically resize windows based on available space, so instead of having a bunch of windows overlapping each other like macOS or Windows, all of them are on the screen and visible to the user. For this, I was going to use a tiling window manager called dwm .

dwm is a bit different than another tiling window manager called i3 because you edit the source code (which is a header file utilized by the C language) directly to tweak and customize it.

Along with dwm, I installed dmenu which basically is like Spotlight except that it only opens applications that are in the PATH environment variable. The applications themselves are just scripts running, so when I launch an application through dmenu, it’s really just executing a script to launch that program. I didn’t really customize dmenu except loading in a custom font.

For my terminal, I decided to use the Suckless Terminal, also known as st. I mainly chose this because I heard it was nice and I wasn’t ready to try out stuff like alacritty or terminator just yet (those are other terminal emulators by the way).

Oh yeah I forgot to mention something similar about two of the Suckless projects mentioned (dwm and st): they can’t be installed with a package manager. In essence, because of the concept of editing the source code directly, we have to manually install these tools. You can do that by running sudo make clean install after tweaking the source code (a file called config.h mostly). Notice how we couldn’t use a package manager (by default the package manager on Arch is pacman) to install this.

Note: For dmenu, you can install it with a package manager

To modify st terminal, you need to install things called patches, which essentially are .diff files that you need to patch to the source code to add new features. For example, a patch you chose could add scrolling to the st terminal, and you would have to run a command to merge those changes to the actual source code. This video is an excellent tutorial on patching the terminal.

For the prompt on my terminal, I decided to use something called Starship Prompt. It is an excellent cross-platform prompt which is really colorful and gives you a lot of data about the current directory you are in, which I find very helpful, especially for git. It is really fast (it’s written in Rust, which is a speedy programming language). You can find more about the prompt on their website.

To get those special symbols in the prompt, I used the FiraCode Nerd Font, which gives the ability to use these special symbols. You can download it here.

So remember those community package repositories I mentioned earlier? That is called the Arch User Repository, more commonly known as the AUR. To install a package from the AUR manually would consist of cloning repos from the AUR and running makepkg or whatever, which is highly inconvenient compared to a package manager.

This is why I installed an AUR helper called paru. If you don’t know what an AUR helper is, it basically eases the process of installing packages from the Arch User Repository. First, to get all the tools needed to actually install the tool, I ran sudo pacman -S --needed base-devel in my terminal so we can use the required command line utilities to install it. To actually install it though, I basically did a git clone [https://aur.archlinux.org/paru.git](https://aur.archlinux.org/paru.git). This makes a directory on our machine that contains the git repository for paru. I went into the directory of paru by running cd paru. Then I ran makepkg -si, to install paru.

In summary, I ran these commands to install paru (this guide helped me):

sudo pacman -S --needed base-devel
git clone https://aur.archlinux.org/paru.git
cd parumakepkg -si

Then, I could install AUR packages similar to installing them with pacman!

If you want to find how to use paru you can check the guide I linked above as it gives you the basic commands you need to use it.

One of the main packages I installed was VSCode. The package in the AUR was named visual-studio-code-bin and I installed it by running paru -S visual-studio-code-bin.

Installing AUR packages takes a bit more time than installing packages with pacman so don’t fret if it’s running scripts for a minute or so.

To set my desktop wallpaper with a tool called nitrogen. This package is in the base Arch repos so you don’t have to worry about using paru. I ran sudo pacman -S nitrogen in my terminal to install the package.

To set the wallpaper, I ran the command: nitrogen. However, there is one more step to get your wallpapers running. nitrogen only checks for images in the certain directories that you tell it to. By default it’s set to the Desktop directory. You can edit these directories manually.

To do this, press the “Preferences” button in the bottom right.

Then, set the directories with the “Add” and “Delete” button in the directories section in the GUI that pops up.

If you press the “Add” button, a file manager will popup so you can navigate to the directory containing your wallpapers!

That’s all well and all, but the wallpaper won’t stay after you restart the computer or simply end your dwm session by pressing Alt + Shift + Q. For this, I needed to run nitrogen --restore. It’s not great to run that every time you start your dwm session, so I had to figure out a way to do it on auto start.

To run commands on auto start, I installed a patch for dwm (like the st terminal) which ran a script called autostart.sh in the ~/.dwm/ directory which ran every time I started dwm. This enabled me to put nitrogen --restore & in that autostart.sh file (If you were wondering what the ampersand [the &] is doing there, it basically tells your shell to do the task in the background).

If you have been using dwm for sometime, you might be wondering why I don’t use the .xinitrc file. For those of you who have no clue what I’m talking about, let me explain. Since I’m using Arch Linux and I started from scratch, when I boot up my computer, it just plops me in the command line. This is extremely fast and when I want to start up dwm, I just run startx in the command line.

This startx command already has a file to execute commands when dwm starts called .xinitrc. I didn’t opt to use that just so that if I ever stop using startx and start using a login screen (more formally known as a display manager), I can still do all the things on autostart without having to patch dwm with the autostart.sh thing.

This whole autostart.sh thing allowed me to setup update my status bar in dwm really efficiently. In that dwm folder, I had another file called changebar.sh which basically was the script to change the status bar in dwm. If you didn’t know what the status bar in dwm is, it is in the top right.

By default, this is set to something like dwm VERSION_NUMBER , but I customized it with the changebar.sh file and a command that was xsetroot -name "whatever you want in the status bar". Also, if you were wondering how I customized the color of the top bar and everything else, check out this video.

This is where I use changebar.sh. In my autostart.sh file, I have this code written out:

while true; do  
        /home/shubhampatil/.dwm/changebar.sh  
        sleep 5s  
done

This basically enters a while loop that goes on forever, activating that changebar.sh script and sleeps 5 seconds later.

You might be wondering what is in that changebar.sh file. Well, here it is:

VOLUME="$(amixer sget Master | grep -e 'Front Left:' | \\sed 's/\[^\\\[\]\*\\\[\\(\[0-9\]\\{1,3\\}%\\).\*\\(on\\|off\\).\*/\\2 \\1/' | sed 's/off/M/' | sed 's/on //')"  
TIME="$(date '+%a %D |   %I:%M %p')"  
xsetroot -name "| 🔊 $VOLUME |  $TIME"

bash

This basically gets the current volume and gets the current time and displays it in the status bar.

Now, let me talk about volume control with dwm. For this, I had to edit the source code for dwm.

In the config.h file in the source code, I added this at the top of the file:

#include <X11/XF86keysym.h>

/* volume keys*/

static const char \*upvol\[\] = { "sh","-c", "amixer sset Master unmute; amixer set Master 5%+; /home/shubhampatil/.dwm/changebar.sh",  NULL };

static const char \*downvol\[\] = { "sh","-c", "amixer sset Master unmute; amixer set Master 5%-; /home/shubhampatil/.dwm/changebar.sh",  NULL };  

static const char \*mutevol\[\] = { "sh","-c", "amixer set Master toggle; /home/shubhampatil/.dwm/changebar.sh",  NULL };

Then, I added the lines

{ 0, XF86XK_AudioLowerVolume, spawn, {.v = downvol } }, 
{ 0, XF86XK_AudioMute, spawn, {.v = mutevol } },
{ 0, XF86XK_AudioRaiseVolume, spawn, {.v = upvol } },

To the keys[] array in the config.h file. After that, I just ran sudo make clean install again in the dwm source code directory, restarted dwm, and it worked! Now, whenever I pressed the volume up/down/mute keys on my keyboard, it would change the volume output of the sound.

One more thing about my computer: time. I found out that the clock on my computer got a minute out of sync with the rest of my devices.

To combat this, I installed a package called ntp(Network Time Protocol), which allowed me to sync my clock to servers on the internet that had the correct time.

This package I installed generated a .conf file, which allowed me to change the default servers to pool.ntp.org‘s servers.

My config file looks like this (located at /etc/ntpd.config)

# Please consider joining the pool:  
#  
# http://www.pool.ntp.org/join.html 
#  
# For additional information see:  
# - https://wiki.archlinux.org/index.php/Network_Time_Protocol_daemon  
# - [http://support.ntp.org/bin/view/Support/GettingStarted](http://support.ntp.org/bin/view/Support/GettingStarted)  
# - the ntp.conf man page

#  NTP pool server setup  
server 0.pool.ntp.org  
server 1.pool.ntp.org  
server 2.pool.ntp.org  
server 3.pool.ntp.org

# By default, the server allows:  
# - all queries from the local host  
# - only time queries from remote hosts, protected by rate limiting and kod  
restrict default kod limited nomodify nopeer noquery notrap  
restrict 127.0.0.1  
restrict ::1

# Location of drift file  
driftfile /var/lib/ntp/ntp.drift

You can find more info about this pool.ntp.org stuff at https://www.ntppool.org/en/use.html.

I then had to setup my printer. Printer support with Linux is sort of complicated. I had to install the cups package. Then, I ran sudo systemctl enable cups and sudo systemctl start cups. The former made it so that the cups service would be enabled on startup. The latter basically started it right now.

Then, I went to localhost:631 in my browser to configure my printer. I went to add my pritner but discovered that the driver for my printer wasn’t present. To get these drivers, I had to install the hplip package, since I was using an HP printer. After that, the printing functionality worked properly. To find more about printer setup on Linux, I would recommend you to watch this video.

Using raw Arch Linux or Gentoo (another Linux distribution) is very different from something like Ubuntu or Manjaro. Not everything is pre-setup like you expect. Even if you install a GUI (called desktop environments) like Gnome or KDE Plasma, you will have to install some packages to get the printer setup correctly, for example. Overall, I’m glad that I tried Arch Linux, and if you’re comfortable with the Linux command line, I would suggest it too. Although, if you’re not comfortable using the command line just yet, I would suggest something like Ubuntu or PopOS!. If you’re an “intermediate” Linux user, and really want to try out Arch, I would suggest using Garuda Linux or Manjaro Linux. I am by no means an expert at Linux and I do have a lot to learn but I decided to jump in the deep end to challenge myself. In the end, Linux is still Linux so don’t feel bad about using something like Ubuntu versus raw Arch.

Another difference I am yet to call out is the nature of Arch Linux’s updates. Arch is something that has a rolling release cycle. This means all the packages that make up your install are updated on an on-going basis, instead of the operating system itself with all the packages being updated every 6 months (like Ubuntu). The latter method is called a stable release cycle. To find out if you are better suited for rolling release distro or a stable release distro, check out this video.

By Shubham Patil on August 15, 2021.

Canonical link

Exported from Medium on August 15, 2021.

Storing Login Information With Cookies (JavaScript)

Shubham Patil — Sun, 15 Aug 2021 18:20:26 +0000

This is an article originally from Medium. I have decided to switch from Medium to dev.to and import all my posts from there.

Let’s create a hypothetical situation. Say you have important login information for a site you’re building. If we wanted to implement a system where your site would automatically log the user in when they visit, the approach of making the user click the button to login every time will not work.

This is where cookies come into the picture. HTTP Cookies, in simple terms, are a way to store data, which then can be sent to a server. An example in a video by Tom Scott, a cookie can be used for a dark/light mode preference. Your browser would set a cookie containing a preference of which theme to use, and the server would communicate back the correct one. In this tutorial, however, we will be using cookies for storage, not for communicating with a server.

There is an npm package we can use called js-cookie(or, alternatively, you can use a script tag to import it from jsDelivr CDN. Use this link for more info on how to install it.)

Now comes the actual implementation. I’m going to be using React for this (a UI library for JS), but you can use anything that involves JavaScript. From my last writing, I used Firebase Authentication to get login info. I am going to be picking up the code from there (you don’t need to read that one to understand what is going on though). To import js-cookie after installing it, put this line of code at the top of your JavaScript file:

import Cookies from ‘js-cookie’

Now, this is the code to set a cookie after we get the login information: (Login.js)

const loginAsync = async () =>{
        const res = await githubLogin();

        //This is where we create the Cookie. Note the syntax.
        //The JavaScript object we created here is just stuff for me to use later.

        Cookies.set('userInfo', {
            username: res.additionalUserInfo.username,
            pfp: (res.additionalUserInfo.profile.avatar_url).toString()+'.png',
            accessToken: res.credential.accessToken

        }, {expires: 29})

        //The expires line basically says the cookie expires in 29 days.

        //this is not a part of js-cookie but if you're interested, I have a getter and setter with React's useState hook which basically
        //says if it has to redirect to the main content.
        setRedirect(true);   
    }

The res variable is the response from the Firebase Authentication regarding the user’s GitHub account details (I implemented a “Login With Github” button). We set the cookie with Cookies.set(). The first argument the function takes in is the name of the cookie. In this case, I set it to userInfo. The second argument is an object (which resembles JSON). This is the content of the cookie. It doesn’t have to follow this structure and can contain anything as long as it is under 4 kilobytes. You can have up to 50 cookies on your domain as per this Stack Overflow post. The third argument is optional and is another object that defines how long the cookie will last (here, I put it for 29 days).

Now, when the user signs in, we have stored their login credentials in a cookie!

Retrieving this cookie is equally as easy. Now that we have stored the login credentials, you can redirect the user to the main page. If you’re using plain HTML + CSS + JavaScript, you can normally set the window.location.href to the page you want your user to go to. This is a great tutorial to help you setup a server to host your pages. You can also skip ahead as this next section will cover redirecting with React.

If you are using React however, you would use React Router to accomplish this task.

To install the web version of React Router, run npm i react-router-dom in the directory of your project. (Note: Don’t install the package named react-router as it will install the module for React Native, a way to write mobile applications with React.) Great! You now have React Router installed!

Now, you should start coding in the file that contains the ReactDOM.render() function.

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import ReactDOM from 'react-dom';

import yourComponent from 'RELATIVE_PATH_TO_YOUR_COMPONENT';




ReactDOM.render(


  <Router>
    <Switch>
      <Route path="/PAGE_NAME" component={yourComponent}/>    

    </Switch>
  </Router>
  ,
  document.getElementById('root')
);

Let me break this down. At the top, we have our React Router imports that basically import what we need. The import yourComponent from ‘RELATIVE_PATH_TO_YOUR_COMPONENT’; is more crucial however.

With React Router, instead of pointing to new HTML files, we can load components when we redirect to a certain endpoint. You can rename yourComponent to whatever you want. The RELATIVE_PATH_TO_YOUR_COMPONENT is the path to your component from the JavaScript file that renders our React code.

Now let’s look at this block of code:

<Router>  
    <Switch>  
        <Route path="/PAGE\_NAME" component={yourComponent}/>  
    </Switch>  
</Router>

What this basically does is setup the endpoints for our web application. The <Router> just tells React that “This is the code where we setup the URL endpoints.” The <Switch> is a component that selects the first endpoint if all of them match. For example, if we have an endpoint for /profile and /:variable , (the latter being so that you can retrieve parameters from the URLs of the endpoints such as retrieving the “ShubhamPatilsd” in github.com/ShubhamPatilsd), <Switch> will only use the first endpoint, or in this case, /profile .

The <Route> component is most important of all here. This is what defines the endpoints for our React app. You can see in this example that I’ve set the path to /PAGE_NAME and it renders yourComponent when a user tries to access that page. Change the PAGE_NAME part to the endpoint you want. For example if you wanted /cool , you would change it to /cool instead of /PAGE_NAME .

There are a lot of things that React Router offers and I suggest reading their documentation to get more information.

Now that we’ve setup the infrastructure to handle our links, we can actually talk about how to retrieve the cookies.

To import js-cookie , again, type import Cookies from ‘js-cookie’ at the top of your JavaScript file. Then, to retrieve the data, use this code below:

JSON.parse(Cookies.get('userInfo'));

You’re going to need JSON.parse because js-cookie doesn’t automatically return the cookie data in JSON but instead returns it as a string. That’s an issue because if the rest of your code tries to access the raw string like its JSON, it will result in errors.

If you’re using plain HTML, CSS, and JavaScript, this is the end of the guide! I hope you’ve got cookies working! If not, do look at this video, and if it still doesn’t work, you could write a comment so I can help you.

If you’re using React however, there are still some extra steps that could benefit you in the long-run.

First, import the <Redirect> component from the React Router library by typing this at the top of your JavaScript file:

import {Redirect} from 'react-router-dom';

Then, implement a if-else statement to check if the user is logged in like so:

if(!Cookies.get('userInfo')){
    return <Redirect to='/login'  />
  }else{
      const userData = JSON.parse(Cookies.get('userInfo'));
      //your ui here

For the condition in the first if block, it checks if the cookie by the name of userInfo is null or not. If it is, we redirect the user to a certain endpoint called /login . (Note: You can redirect the user to any endpoint you want, just remember to set it up!). If the cookie is not null however, we store the parsed JSON of the cookie inside a varible called userData.

And that’s it! Now you can access this userData variable like a JSON object!

Thanks for reading my second Medium article! If you have any suggestions, do let me know in a private comment!

By Shubham Patil on April 19, 2021.

Canonical link

Exported from Medium on August 15, 2021.

Firebase Authentication — Lowering Headaches In Developers

Shubham Patil — Sun, 15 Aug 2021 18:09:09 +0000

This is an article originally from Medium. I have decided to switch from Medium to dev.to and import all my posts from there.

So I had to do some authentication with GitHub the other day for a mini-project I was making. The main idea was that I would use GitHub’s authentication service with OAuth to use with a web app for a login system.

Everything was fine, I found this amazing tutorial by “Barely Coding With Daniel Bark” which showed me how to use Node.js to authenticate the user.

In essence, when the user clicked the “Login With GitHub” button, my web app would redirect the user to [https://github.com/login/oauth/authorize](https://github.com/login/oauth/authorize), which I would also send my CLIENT_IDof my OAuth app with.

Once the user logs in on the GitHub sign-in page we redirect them to (usinghttps://github.com/login/oauth/authorize), it would then send me back a temporary code and client secret of my GitHub OAuth app on one of my endpoints with the Node.js server, because the user would be redirected there. I then had to send a POST request to [https://github.com/login/oauth/access_token](https://github.com/login/oauth/access_token) with my CLIENT_ID, CLIENT_SECRET and the code we got when it redirected back to my site. After that, I would get a response with an access_token, which would allow me to get other info such as the user’s profile picture on GitHub, their username, etc. etc. etc.

Code for the server side from video (Not my code view source):

As I mentioned above, I found a very intuitive tutorial on YouTube which helped me get the gist of things, and all was good. We got the access token and then redirected the user to a static HTML page. Then I realized that I had to incorporate this with React, a UI Framework for JavaScript.

You might be thinking that this was no big deal and that I could easily incorporate a backend with Node.js with this. Here, the issue lies in serving the UI and communicating the access_tokenwith React.

First of all, I had to serve the UI once the user is authenticated. Now you see, React is meant to be a frontend framework, or in other words, it manages the things the user can see. The backend is the infrastructure behind the frontend, which manages and serves data for the frontend. Our backend task of communicating with the GitHub OAuth App now needs to be code on the frontend, as we cannot just serve up a JSX file with React UI.

React in its nature appends to an element in one HTML file. This could be a div with an id of root or something else. I’m going to massively oversimplify here but, React appends its own, JavaScript and HTML “hybrid” code called JSX, to the inside of that element we specified in the original HTML file.

You might say that we should just load the HTML file from the server, but the HTML file is not how the React code loads. React uses a Node.js server (different one from our backend) to run the React code.

To clear things up, the React server could run on http://localhost:3000/ while our backend server would run on http://localhost:5000/ .

So, to have a frontend, we need to run a Node.js server so your React code can append itself to that one HTML file.

Now that we have two different Node.js servers running, (one for the backend and one for the frontend with React) this leads me into the second issue, communicating the access token to the frontend.

Since we are running two Node.js servers, communicating data between them would be very hard and unintuitive (for a beginner programmer like me) and would involve multiple API endpoints and possibly cookies.

This can all get pretty complicated pretty fast. You might be thinking that we should just somehow incorporate the backend in the React frontend. This isn’t impossible but it would just be very complicated for a programmer who just wants to get things done in their project. (This approach or this one can be very complicated for beginner programmers and coders who just want to get things done in their project. They’re really good if you’re advanced or you want to understand things at a very low level.)

This is when Firebase Authentication really shines.

As I was banging my head on a wall trying to figure this out, Benjamin S on the CodeDay Discord Server, (CodeDay is a non-profit dedicated to introducing students to computer science) told me about Firebase Authentication.

Firebase Authentication? I’ve only heard/used Firebase Realtime Database in my personal projects such as this chat website and this mechanical keyboard sound test platform. This could be worth a shot.

Worth a shot it definitely was. With this lovely article in the Firebase documentation and this video, I installed Firebase in my project (npm install firebase ), setup a Firebase Project, and started coding my authentication. (I recommend using that article if you want an in-depth explanation)

So I had a config for my Firebase project which was basically setting up my Firebase with API credentials.

Code for the firebase-config.js:

Now on to the authentication.

Code for auth.js :

Now for where it all comes together, App.js

App.js (don’t read all of this code I’ll explain the important parts)

We have the function called loginAsync which I setup to handle clicks of the login button.

import githubLogin from './service/auth';

const loginAsync = async () =>{

const res = await githubLogin();

console.log(res);

}

We then have the actual button. (I’m using Material-UI, which allows me to have Google’s Material Design)

<Button onClick={loginAsync} style={{

}}variant="contained" startIcon={<LockOpenIcon />}>Login With GitHub</Button>

We have an onClick handler, which tells the code to go to our loginAsync function above.

And that was it! It worked perfectly. I would redirect the users to a URL when they click the login button with the OAuth CLIENT_ID , which allowed them to login. This then sent the user to a Firebase URL such as my-app-12345.firebaseapp.com/__/auth/handler for an OAuth callback handler. Firebase would then redirect the user to my site and send the data with the access token again.

This was amazing how it prevented me from going crazy trying to figure out authentication. Thank you Firebase!

Hope this helps! You can always respond to this and give me some feedback! (This is also my first time writing on Medium)

By Shubham Patil on March 23, 2021.

Canonical link

Exported from Medium on August 15, 2021.

DEV Community: Shubham Patil

Removing Timezones from Dates in Javascript

Foreword

Background

A Bit (Too Much) About Timezones

The Problem

The Solution

Short Note About JS Engines

Second Round of Solutions

Pseudocode?

End

Sanity.io: a really good CMS

Headless CMS

Introduction to Sanity

Let's-a-go!

Difference between Sanity Studio and Content Lake

Schema

Sanity Client

End

IP Location Grabbing

Guide

Quick Method

More Secure Method

Conclusion

Tab and Stack Layout in React Native

ShubhamPatilsd / tab-stack-example

React Native Tab Stack Example

Use Prisma Instead of SQL

Table of Contents

What is an ORM?

Prisma is awesome!

Prisma Schemas

Benefits of this schema approach

Relations

Prisma Client

Benefits Compared To SQL

Learning Resources

I wrote a script to get NFTs for me

Why are some frameworks so popular?

Humble Beginnings

Clarification

React Study

Svelte

Cherry On The Cake

Get Started With ThreeJS

Table of Contents

React Setup

ThreeJS Setup

ShubhamPatilsd / threejs-learning

Code for the tutorial for ThreeJS!

Start Using Tailwind CSS Right Now

Using Arch Linux

Storing Login Information With Cookies (JavaScript)

Firebase Authentication — Lowering Headaches In Developers