Forem: Onkar Deshpande

What the hell is 👿 Hasura 👿

Onkar Deshpande — Wed, 18 May 2022 20:25:22 +0000

You started your programming journey , made the famous "Hello World" appear and felt like you have conquered the world ! You learnt a little HTML , then went into a little Javascript , made a to do list , amazing !

But then you refresh and poof ! Everything is gone !

To keep your data , you realize you need a backend a server , and suddenly these words like Django, NodeJS, Server , Nginx, Apache, Postgres , SQL make you dizzy.

But don't worry, there is an easier way.

This open source marvel is what you can use.

What you already need to know before you start

1.You need to know how api's work Nice Video

2.How Graphql works 100 second video about graphql

3.Very Basics of Apollo Client (just go with it) Nice Video on basic setup for apollo client

What Hasura simplifies

What Hasura Simplifies , is management or creation of database (sql , mongo , postgres), setting up your own server (nginx , apache) , hosting of said server (aws, gcp , azure) .

What Hasura falls short of

Creating business logic, making your server itself do complicated operations on data, is out of question, as the server itself does not exist ! A way out here is using AWS Lambda or other server less tech to handle those needs.

Lets look at a quick example:

How I made a simple LeaderBoard in Hasura for my game :

I made a simple game here : game link ( It is a quickly spun up app forgive the styling)
Its is a simple card flipper memory game , made in React , here's the GITHUB repository.

Now in Hasura I made a postgres database linking my heroku account and made a table called LeaderBoard:

These things might sound alien , but are straight forward like the Next>Next>Next>install we do to install programs.

The table has three columns, a Name , which is a string, a score , which is a number , and an ID which is a UUID , is (auto generated at hasura's end)

Now when the Leaderboard api is to be called , we call this auto generated piece of Graphql query using apollo client for React, and tada ! we get all the leaders.

The specific query I ran was :

query getLeaderBoard {
    Leaders {
      Name
      Score
    }
  }

This returns the leaderboard with their names and scores.

You can modify these queries in your Hasura Dashboard like so :

Now , when someone wins the game, a useEffect fires another query , this time to add a player to the leaderboard.

mutation AddScore($Name: String!, $Score: Int!) {
    insert_Leaders_one(object: { Name: $Name, Score: $Score }) {
      id
    }
  }

This takes two arguments , one , the name of the player (taken from the user in a local state) and one score ( maintained in a state in the useContext.)

This api adds the player to the leaderboard.

Now to a very beginner beginner , this might be a lot. But it saves weeks of work setting up your backend, deploying it, and a lot of other things.

Now I will consider myself to be post-beginner and say Hasura is a too-good-to-be-true product and I look forward to using it even more !

Thanks for listening to me and you can get to me anytime on twitter and see my github
Until next time...

'___' is most popular hook in ReactJs ?

Onkar Deshpande — Wed, 11 May 2022 16:06:59 +0000

Before we reveal the most popular hook ( the secret is already out , it's useState !), lets try and understand what are React hooks and why do we need them in the first place?

Hooks are basically functions which help you hook into the React state in functional components. If you are new to React, just know that this hooks basically helped decrease the lines of code written significantly !

Here is an example of class based components, which was the default way to write components before React 16.8 (2018) (this was when React hooks were released)

The old way :

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

The new way :

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React Hooks made React developers lives easier , hence made React's learning curve much less steeper , increasing it's popularity.

And , the most popular hook used in ReactJs is .....

useState() !

In simple language, useState is a way to store and use , any kind of data in our react component.
Above , we saw the the example of how useState works as a counter.

Few points to remember about useState :
const [counter ,setCounter] = useState(0)

It uses array destructuring to get two things. The data (counter), and a function to set the data (setCounter).
You can use the counter directly in your JSX code like so : {counter}
You can use the setCounter function to set data to the state like so : setCounter(10)
You can also use Objects or arrays as the data in the useState, making it a powerful tool to render out data.

Here are 3 examples of useState() to make our understanding of useState ironclad.

1.Color selector :
Use the state to change color of the text :

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [textColor, setTextColor] = useState("");
  return (
    <div className="App">
      <h1 style={{ color: textColor }}>Hello CodeSandbox</h1>
      <button onClick={() => setTextColor("red")}>Red</button>
      <button onClick={() => setTextColor("blue")}>Blue</button>
      <button onClick={() => setTextColor("green")}>Green</button>
      <button onClick={() => setTextColor("black")}>Reset</button>
    </div>
  );
}

See the result

2.List rendering and updating using state :

import { useState } from "react";
import "./styles.css";

export default function App() {
  const data = [
    { name: "Onkar", age: 28 },
    { name: "Tushar", age: 24 },
    { name: "Amira", age: 29 }
  ];
  const [userData, setUserData] = useState(data);
  const removeHandler = (obj) => {
    setUserData(userData.filter((person) => person !== obj));
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ul>
        {userData.map((obj) => (
          <li>
            {obj.name} is of the age {obj.age}{" "}
            <button onClick={() => removeHandler(obj)}>remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

See the results

3.Using state to use Dark mode for an app:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [theme, setTheme] = useState("");
  return (
    <div className="App">
      <div className={`app-container ${theme}`}>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={() => setTheme("dark")}>Switch to Dark mode</button>
        <button onClick={() => setTheme("")}>Switch to Light mode</button>
      </div>
    </div>
  );
}

See the results

I hope you now have a fair Idea of how the useState hook works and are going to be able to use the hook in your beginner journey of being a FrontEnd Developer !

You can always contact me on twitter !

Happy Hacking !

Where is '~' used in CSS ?

Onkar Deshpande — Tue, 10 May 2022 16:58:35 +0000

If we rank the popularity of the CSS combinators, tilde is probably at the bottom of the list. It is a nifty little combinator written for niche situations!

Let's take a step back and get to know the CSS combinators :

Ranking CSS Combinators :

1." " : Descendant combinator

The most popular CSS combinator is the descendant combinator.

Confused what " " does ? Here's the syntax :

.card-container button-container{
     /* some property here */
}

As a Front-end Developer , you end up using this operator without realizing that you are using it ! What it does, is selects the second element only if the first element is one of its ancestors.

You can play around with the code here for better understanding : code sample

2.> : Child combinator

In a close second is the child combinator , and it's job is to select the second element only if it is the direct child element of the first element.

Examples will clear your confusion :

card-container > p{
     /* some property here  */
}

Here's a code sample similar to the code sample above : code sample

3.+ : Adjacent sibling combinator

In my coding journey I haven't had the chance to use the last two on our ranking list in my projects yet , but here goes !
The plus , or the adjacent sibling combinator , is used to select the adjacent element of first element , if it matches with the second element.

Example :

h1 + p{
   /* some property here */
}

Here's a code snippet to help you understand better : code sample

4.~ : General sibling combinator

Last but certainly not the least , is tilde. Known technically as the general sibling combinator . Or worm . Or squiggly line. Whatever you wanna call it , it's job is to select any siblings of the first element , which match the second element.

Here's how :

card-container-first-batch ~ rest

It is a very very corner case, but it exists. And hence our job to know!
Here's a code sample similar to the code sample above : code sample

So summarizing :

There are 4 types of CSS combinators: descendant (" ") , child(>) , adjacent sibling(+) , and general sibling(~).

Use them carefully , and hope your code never breaks !

For more such fun bits ( if you think css is fun 😂 )

Follow me on twitter , and check out my github , see you next time !