DEV Community: Jitendra Choudhary

Every React Concept Explained in 5 Minutes

Jitendra Choudhary — Tue, 28 Jan 2025 09:15:34 +0000

Every React Concept Explained in 5 Minutes

Jitendra Choudhary ・ Jul 29 '24

#react #webdev #javascript #codenewbie

Integrating Stellar with JavaScript: Building dApp is easy

Jitendra Choudhary — Wed, 14 Aug 2024 07:12:16 +0000

This is a submission for the Build Better on Stellar: Smart Contract Challenge : Create a Tutorial

Your Tutorial

This is the link to my tutorial:-
Integrating Stellar with JavaScript: Building dApp is easy (for absolute beginner)

What I Created

I created a tutorial on how to integrate Stellar with JavaScript. I started with the basic explanation of the Stellar ecosystem. Along this, I dive into topics like Testnet, Lumens, and more as they come into the process.

This tutorial is meant for JavaScript developers who want to build DApp, this tutorial serves as a starting for them.

By using this tutorial one can conveniently integrate Stellar with JavaScript and start building DApps.

Journey

I mainly used Stellar's documentation as a reference. I also read some articles on the blockchain ecosystem and how it works.

The motivation for this submission was that I am a JavaScript developer, and not far ago, just 10 months ago, I wanted to build a social media messaging DApp. The DApp will keep the data safe and will not promote any falsely funded content, so the users would not have to worry about infiltration into the system. Learning a new skill is not easy, and having a steeper curve, it was very hard to learn blockchain. However, with Stellar's Soroban, it is even easy to write smart contracts.

Integrating Stellar with JavaScript: Building dApp is Easy (for Absolute Beginners)

Jitendra Choudhary — Tue, 13 Aug 2024 16:06:35 +0000

Stellar is an open-source blockchain network for fast and cross-border financial transactions. If you are a JavaScript developer and wanna build dApp on a stellar network, this is the thing for you. In this tutorial, we will learn how to integrate Stellar with JavaScript, from setting up the environment to making your first transaction.

So, let's start.

Oh, before we begin, we need basic knowledge of JavaScript and have npm and Node.js installed on your machine.

1. Sitting Up the Environment

First, open your terminal or command prompt and create a new directory for the project:

mkdir stellar-js
cd stellar-js
npm init -y

This command will initialize a new Node.js project.

Now, install the Stellar SDK for JavaScript.

npm install stellar-sdk

But, wait What is Stellar-SDK?

Stellar SDK is a powerful library to interact with the Stellar network using JavaScript.

2. Connecting to the Stellar Network

Now, that the environment is set up, we will connect with the Stellar network. We require Stellar SDK and connect to the testnet.

What's Testnet?

Testnet is a free-to-use network for a developer to test their application without connecting to real money. Where there is a mainnet that connects to real money and requires XLM to cover transaction fees, etc. The testnet is similar to the mainnet, it has free test Lumens (XLM) called Friendbot.

const StellarSdk = require("stellar-sdk");
const server = new StellarSdk.Server("https://horizon-testnet.stellar.org");

This will initialize the SDK and set the server to connect to the testnet.

3. Creating a New Account

To interact with the Stellar network, you need to have a Stellar account. You can easily create a new account using SDK by generating a key-value pair. The value pair consists of a public and a private key.

const pair = StellarSdk.Keypair.random();

console.log('Public Key:', pair.publicKey());
console.log('Secret Key:', pair.secret());

The publicKey() is your account’s identifier, while the secret() is your private key, which should be kept secure.

4. Funding the Account

In the testnet, you can fund your account using Stellar's Friendbot service.

const fetch = require("node-fetch");

const fundAccount = async (publicKey) => {
  try {
    const response = await fetch(
      `https://friendbot.stellar.org?addr=${publicKey}`
    );
    const data = await response.json();
    console.log("Account funded:", data);
  } catch (error) {
    console.error("Error funding account:", error);
  }
};

fundAccount(pair.publicKey());

The fundAccount function sends a request to Friendbot to deposit 10k test Lumens in your account. Accordingly, to the status of the transaction, it will log the message.

5. Making a Transaction

Now, that your account is founded, you can make your first transaction on the stellar network. We'll build, sign, and submit the transaction to the stellar network. We'll send 10 XLM from our account to another account.

const sendPayment = async (publicKey) => {
  try {
    const account = await server.loadAccount(pair.publicKey());

    const transaction = new StellarSdk.TransactionBuilder(account, {
      fee: StellarSdk.BASE_FEE,
      networkPassphrase: StellarSdk.Networks.TESTNET,
    })
      .addOperation(
        StellarSdk.Operation.payment({
          destination: publicKey,
          asset: StellarSdk.Asset.native(),
          amount: "10",
        })
      )
      .setTimeout(30)
      .build();

    transaction.sign(pair);

    const result = await server.submitTransaction(transaction);
    console.log("Transaction successful:", result);
  } catch (error) {
    console.error("Error sending payment:", error);
  }
};

sendPayment("Another_Account's_Public_Key");

6. Error Handling and Debugging

Even a single comma ( , ) can ruin your code. Handling errors is very important to keep the code on the expected track.

try {
  const result = await server.submitTransaction(transaction);
  console.log("Success:", result);
} catch (error) {
  console.error("Error:", error.response.data.extras.result_codes);
}

This catches any errors during the transaction and logs the specific error which helps to debug the code.

Conclusion

We just integrated Stellar with JavaScript and made our first transaction on the Stellar testnet. As JavaScript is widely adopted among developers, transitioning to the blockchain with Stellar is more convenient.

The best way to learn any new skill is to practice more projects. Build small projects and experiment with the concepts.

If you find this post helpful don't forget to keep showing me love. Until next time like, share, and learn.

You can also stay connected with me by following me here and on X, GitHub, and LinkedIn.

Every React Concept Explained in 5 Minutes

Jitendra Choudhary — Mon, 29 Jul 2024 12:33:00 +0000

React is a JavaScript library that allows you to develop front-end code in minutes. It has pre-built methods and functions to perform certain tasks. React as a library includes complex terms like reconciliation, state, props, etc. What do they actually mean?

In this article, you will learn about this exaggerated concept more simply.

1. Components

Components are small bit of reusable code that return a React element to be rendered on a webpage. It is a group of code that make up a single part of the webpage like buttons, navbar, cards, etc. It is just like a JavaScript function but returns a rendered element. It accepts parameters called "Props". Components are named with capital case.

Example Of Functional Component

function Heading(props) {
  return <h1>Join us, {props.name}!</h1>;
}

Note:

Functional Components are recommended instead of Class based.
Functional components are often called statefull components when the UI is updated dynamically due to state's value not Prop's value.
Functional components are called stateless components when it uses Prop's value to dynamically change UI not state's value.

2. JSX

JSX is JavaScript XML, which allows us to write HTML in React. It introduces XML-like tags and attributes to create React elements. It makes it easy to create React Components by letting you write HTML-like code in .jsx files. Instead of using complicated JavaScript, JSX makes the code readable and clean. React DOM uses camelCase for attribute naming such as htmlFor, onClick.

Example of JSX

<h1 className="head">This is H1!</h1>

Now, TSX is a file extension for TypeScript files that contains JSX syntax. With TSX you can write type-checked code with the existing JSX syntax. TypeScript is not a different language, it is just a superset of JavaScript that adds optional static typing.

More simply, with TSX files you can write React components using TypeScript and JSX together.

Example of TSX

interface AgeProps {
  age: number;
}

const GreetAge = (props: AgeProps) => {
  return (
    <div>
      Hello, you are {props.age} old.
    </div>
  );
};

Note:

JSX files uses a `.jsx` file extension.
TSX files uses a `.tsx` file extension.
TypeScript's type system helps catch potential errors early in development.

3. Fragments

Fragments in React allows you to return multiple elements from a component. It groups the list of elements without creating a extra DOM nodes. It cleans all the extra divs from the DOM. This quickly renders the UI.

Example of Fragments

const App = () => {
  return  (
    <>
      <h1>Eat</h1>
      <button>Learn more</button>
      <p>Code is Fun</p>
      <button>Repeat</button>
    </>
  );
}

Note:

Fragments makes the code cleaner and readable.
It are memory efficient.
It cannot have CSS styles.

4. Props

"Props" is a special keyword in React that stands for properties. It is used to transfer data between components. The follow of data transfer is uni-directional i.e from parent component to child component.

Example of Props

function Head(props) {
  return <p>{props.children}</p>;
}

Note: Props is read-only, which ensures that child components don't manipulate the value coming from parent component.

5. State

Components need to keep track of certain values when user interacts. Let's say the light/dark mode theme toggle button changes its value(from light to dark & vice versa) when a user clicks on the button. Components need to remember the current value of theme. In React, this kind of component-specific memory is called state.

State is defined using a useState() hook; more on that later.

Example of defining state

const [index, setIndex] = useState(0)

Note: It's always a good practice to define state in a top-level component to share it easily with other child components and ensure a single source of truth.

6. Lifecycle Methods

Lifecycle methods are special functions you can use within React classes to perform actions at various stages of a component's existence. These stages are:

Mounting: When a component is first created and inserted into the DOM.
Updating: When a component's props or state change, causing the component to re-render.
Unmounting: When a component is removed from the DOM.

7. Purity

Purity in functional programming is when a given same input returns the same output. The inputs is the only factor that determine the output then the function is said to be pure.

In React a component is said to be pure when it returns the same output for the same input (viz props)

8. Strict Mode

Strict Mode is a developmental feature in react that enables extra safety features to improve code quality. It shows warnings regarding potential errors and bugs into the code. It logs warning into the browser's console.

Example of Strict Mode

import { StrictMode } from 'react';

function App() {
  return (
    <>
     <StrictMode>
        <Header />
        <Sidebar />
        <Content />
        <Footer />
     </StrictMode>
    </>
  )
}

Strict Mode in React Showing Browser Console

9. Hooks

Hooks in React allows to use state and other React features without writing class components. Hooks are functions that provide access to React's state management, side effects, and other features.

Some commonly used hooks: useState, useMemo, useRef, etc.

Example of Hooks

import React, { useState } from "react"; // Importing useState hook;

function FavoriteColor() {
  const [color, setColor] = useState("red"); // Initializing the state and setter function;

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")} // Updating the state;
        >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")} // Updating the state;
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("yellow")} // Updating the state;
      >Yellow</button>
      </>
  );
}

Note:

Hooks can only be called inside React function components.
Hooks can only be called at the top level of a component.
Hooks cannot be conditional.

10. Context API

The Context API is used to share data like state, functions across the component tree without passing props down manually at every level. It avoids prop drilling by simplifying state management and sharing data across the component. With Context API the data is shared directly with the child component who will consume it.

The createContext() method is used to create a context. This function returns a context object with two components – a Provider and a Consumer.

The Provider is used to wrap the part of your component tree where you want the context to be available. It accepts a compulsory value prop that holds the data you want to share across other components.

The useContext hook is used to access the data.

Example of Context API

Create a context using createContext() method. Wrap child components in the Context Provider and supply the state value.

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`Current Count: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

Use useContext hook to access the value of age.

import { useContext } from "react";

function GrandChildConsumer() {
  const count = useContext(UserContext);

  return (
    <>
      <h1>This is GrandChildConsumer</h1>
      <h2>{`Current Count: ${count}`}</h2>
    </>
  );
}

Note: The `useContext` hook is often used instead of Consumer for better readability and simplicity.

11. Lists and Keys

A Key is a special kind of attribute for list items in React. It acts as a unique identifier for each items when it is updated, deleted, or added.

Assigning index of the item as the Key is discouraged because if the items are rearranged it will affect the expected behavior.

Imagine in shopping cart you have 10 items added and each item have a unique index as a Key. Now, you decide to remove the first and fifth item from the cart. When the items are removed the indexing will change; the second item will become first and sixth item will become fifth item.

Example of Lists and Keys

const fruits = ["apple", "banana", "orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}> {fruit} </li>
      ))}
    </ul>
  );
}

Note:

It is recommended to use string as a `Key` that uniquely identifies the item in the list.
Third-party libraries like UUID offer the functionality to create unique keys.

12. Form: Controlled & Uncontrolled Components

React forms allows to collect and manage user input better than traditional HTML form. These forms are built using components and store the user inputs into state. There are two types of components:

Controlled Components

In Controlled components, the form's state is managed by the component himself. This is the recommended approach for managing form data in React. When the user interacts with the form (e.g., typing in an input field), the component's state is updated to reflect the changes.

Example of Controlled Component

function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

Uncontrolled Components

Uncontrolled components rely on the DOM to manage the form data. The component doesn't directly control the form's state, but it can access the values using DOM methods like ref.

Example of Uncontrolled Component

function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleClick = () => {
    console.log(nameRef.current.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" ref={nameRef} />
      <button onClick={handleClick}>Get Name</button>
    </div>
  );
}

Note:

Controlled components provides form validation because the user's input is instantly reflected due to use of state.
Form validation is not possible in uncontrolled components because the user's input can only be accessed after the form is submitted.

13. React Router

Introduction to React Router for navigation
Basic setup and usage
Example: Creating routes and navigating between pages

React Router is a standard library for routing in React. It enables navigation among various components in the React app. It allows changing the browser URL and syncing the UI with the URL. React Router is important for creating single-page applications (SPA) with navigation features.

First, you need to install React Router from your terminal.

Installing React Router

# If you are using npm
npm install react-router-dom

# If you are using yarn
yarn add react-router-dom

Example of React Router

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

First wrap your content into the <BrowserRouter>. Then we define <Routes> and inside that introduces the <Route> for navigation. <Route> has path which specifies URL of the page and element attribute which specifies the component that needs to be rendered on the defined path.

Note:

An app can have multiple < Routes >.
< Route > can be nested.
`react-router-dom` also has < Link > and < Outlet > Component for navigation.

Conclusion

The best way to learn any programming language is to practice more projects. Build small projects and experiment with the concepts.

If you find this post helpful don't forget to keep showing me love. Until next time like, share, and learn.

You can also stay connected with me by following me here and on X, GitHub, and LinkedIn.

Learn CSS Positions: with Real Examples

Jitendra Choudhary — Thu, 27 Jun 2024 10:41:11 +0000

Let's start with even do you need CSS positions aren't the other properties enough to make you faint? Why CSS positions?

Say you want to create an navigation bar which stays on the page when you scroll, or the chat with us icon/button that stays on the bottom right corner always. This things are placed outside of the document's (i.e the webpage) workflow.

For examples, You see below the chat button or the navigation bar is still visible even after scrolling.

To build elements having similar behavior we use CSS position.

The CSS position property is used to define the position of an element on a webpage.

The position property has the following five values:

static (default value)
relative
absolute
fixed
sticky

We will look into each of them.

Before we begin lets first understand the basic context; we have a very basic div which contains 9 more boxes each with different color and also has a number on it.

CSS Static Position (default value)

The position: static property allows elements to be positioned in the normal flow of the document.


Note: This is the default value.

The below boxes has position: static;.

Eg codesandbox link

CSS Relative Position

The position: relative; property positions the element relative to its original position. The top, right, bottom, left properties is used to move the element accordingly.

Here, we give position: relative; to box one and make it top: 35px and right: 5px;. So, the box one moves to the top and right to its original position.


Note: The space is still preserved in the original position of the element.

CSS Absolute Position

The position: absolute; property removes the element completely from the normal flow of the document.

It is positioned relative to the nearest parent element having a position other than static.

If there is no parent with position other than static, then it is positioned relative to the document itself.

Below both the boxes has top: 50px; and right: 50px; only the difference is first eg is relative to the document(webpage) and second eg is relative to the border container.

Here, the box one is no longer the part of border container.


Note: An absolutely positioned element loses original space in the document flow.

CSS Fixed Position

The position: fixed; property positions an element to remain fixed in the same position, even when the page is scrolled. It is similar to the absolute value, but it remains relative to the viewport at all times.

Here, the box one is positioned 50px from top and right it will remain at the same position even when the page is scrolled.

CSS Sticky Position

The position: fixed; positions the element in the combination of fixed and relative values.

This property allows the element to stick to specific position in the viewport as you scroll, but only within its containing element.

When you first scroll, the element behaves like it has relative positioning. It moves with the flow of the document.

Once the element reaches the specified position (defined by top, right, bottom, or left), it "sticks" to that position. It will stay in that position as you continue to scroll.

The element will stop sticking and resume normal document flow once the containing element (the nearest scrollable ancestor) is out of view.

Conclusion

Thank you for reading!! If you find this helpful; drop your reactions and share this piece with others. Let me know into the comments, "Why you suck at CSS?"

You can also stay connected with me by following me here and on X, GitHub, and LinkedIn.

Everything You Need to Know About CSS Backgrounds

Jitendra Choudhary — Tue, 11 Jun 2024 17:15:22 +0000

We can do some cool things with CSS background property such as creating a hero image or using it to do some cool parallax effects. In this article, we'll pretty much everything you need to know about CSS background property.

CSS Background-color Property

Below you have a simple box with the class "container"; you can directly set the background color of the container by applying background-color: <any color you want, let's say violet> to the container itself. That's it it's that simple to change the background color, however, you can use many different colors like rgb, rgba, hex, and hsl.

CSS Background-image Property

Now you have to change the background image so you will set the background image of the container. You use background-image: url(<paste the url of the image; assets/lion.png>). You can see the box has a background image but it is not what we expected. this is because the size of the image is much smaller than the size of the box or you can say the width and height of the box. So by default, it tends to fill up the space by repeating the same image vertically (on the y-axis) and horizontally (on the x-axis) until it covers the whole space.

CSS Background-repeat Property

Like you expected to have a single image in the box and not allow the image to repeat; this can be achieved by using background-repeat: no-repeat here you have a bunch of options such as background-repeat: repeat-x and background-repeat: repeat-y which is pretty much self-explanatory.

background-repeat: no-repeat

background-repeat: repeat-x

background-repeat: repeat-y

CSS Background-size Property

Now you see you have a image taking a small portion of the box but you want to make this image take up the space. CSS has a solution for this as well. You can use background-size: <any pixel values, cover, contain>; often background-size: 150px; is not preferred because you need to adjust the image size of every viewport.

background-size: auto;

Scales the background image in the corresponding direction such that its intrinsic proportions are maintained.

background-size auto with repeat

background-size auto with no-repeat

background-size: cover;

Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no space. If the proportions of the background differ from the element, the image is cropped vertically or horizontally.

background-size: contain;

Scales the image as large as possible within its container without cropping or stretching it. If the container is larger than the image, this will result in image tiling, unless the background-repeat property is set to no-repeat.

CSS Background-position Property

The background-position property sets the initial position of the background image. The position is relative to the positioning layer set by background-origin. It is a shorthand property for background-position-x and background-position-y; the first value is positioning on the x-axis and the second on the y-axis.

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* on the x-axis and y-axis */
background-position: center top;
background-position: left center;

background-position-x;

It sets the initial horizontal position (on the x-axis) of the background image.

/* Keyword values */
background-position-x: left;
background-position-x: center;
background-position-x: right;

background-position-y;

It sets the initial vertical position (on the y-axis) of the background image.

/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

CSS Background-attachment Property

The background-attachment property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block. For this, you need to add text to the box to see the effect.

/* Keyword values */
background-attachment: fixed;
background-attachment: local;
background-attachment: scroll;

background-attachment: fixed;

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with background-clip: text.)

background-attachment: scroll;

The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)

background-attachment: local;

The background is fixed relative to the element's contents. If the element has a scrolling mechanism, the background scrolls with the element's contents and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

CSS Background-clip Property

The background-clip property is used to define how far the background image or color of an element should extend within the element. It determines whether the background should be drawn within the border-box, padding-box, or content-box of an element.

/* keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

background-clip: border-box;

The background extends to the outer edge of the border. This is the default value.

background-clip: padding-box;

The background extends to the outer edge of the padding. The border area is not covered.

background-clip: content-box;

The background is clipped to the edge of the content box. The padding and border areas are not covered.

CSS Background shorthand Property

The background shorthand property is a convenient way to set multiple background-related properties at once. This can include background color, image, position, size, repeat, origin, clip, and attachment. Using the shorthand property can help to make it more readable.

background: [background-color]
 [background-image]
 [background-position] / [background-size]
 [background-repeat]
 [background-origin]
 [background-clip]
 [background-attachment]
 [initial | inherit];

When using the background shorthand, the values should be specified in the order outlined above. However, not all values need to be included. If a value is omitted, the default for that property will be applied.

Conclusion

Whether you're setting a simple background color or creating complex layered backgrounds with images, CSS provides the flexibility to achieve your desired design.

Mastering CSS background properties is essential for any web developer aiming to create engaging and visually captivating websites.

Thanks for reading this!! If you find this helpful; drop your reactions and share this piece with others.

You can also stay connected with me by following me here and on X, and LinkedIn.

Learn CSS BOX MODEL

Jitendra Choudhary — Fri, 31 May 2024 18:14:14 +0000

Introduction

On the web everything is a box literally everything all the elements, images, buttons, paragraphs, videos, and everything. With everything being a box it has a BOX MODEL applied. So what is a CSS BOX MODEL? In this article, we will learn CSS BOX MODEL.

What is a BOX MODEL?

The CSS box model as a whole applies to block boxes and defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on a page. Inline boxes use just some of the behavior defined in the box model. - mdn web docs

The BOX MODEL consists of the content, padding, border and margin.

Parts of a box

Making up a block box in CSS we have this:

Content box: In this box your actual content is displayed; you can alter this using properties like height and width.

Padding box: The padding is the area around the content as white space; you can alter it using padding and related properties. Basically padding is creates a space inside an element.

Border box: The border box wraps around padding box if any otherwise on the content box; size it using border and related properties.

Margin box: The margin is the outermost layer around the content, padding, and border as white space between this box and other elements; you can size it using margin and related properties.

The standard CSS BOX MODEL

In the standard box model, if you set height and width property value on a box, these values defines the height and width of the content box. Any padding and borders are then added to get the actual size of the box.

Note: However, the margin takes space on the page it is not counted towards the size of the box.

If we assume that we have the following box with some CSS properties:

.box {
  width: 300px;
  height: 200px;
  margin: 25px;
  padding: 10px;
  border: 5px solid magenta;
}

The actual size of the box will be width (horizontal)(300 + 10 + 10 + 5 + 5) and height (vertical)(200 + 10 + 10 + 5 + 5).

The alternate CSS BOX MODEL

In the alternate box model, the size is of the box is just the simple width and height of the box.

To apply the alternate box model, we use box-sizing property on it.

.alternate {
  box-sizing: border-box;
}

If we assume that we have the following box with some CSS properties:

.box {
  width: 300px;
  height: 200px;
  margin: 25px;
  padding: 10px;
  border: 5px solid magenta;
}

The actual size of the box will be width (horizontal)(300) and height (vertical)(200).

The alternate box model is popular among developers and here is how you can apply to the elements:

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

Play with CSS BOX MODEL

Ignore the boilerplate, I create two divs with class name box. I also add one more class alternate to the second div. Now both the divs will have same properties except the alternate class.

The class box has following CSS properties:

.box {
  width: 200px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid magenta;
}

The class alternate has following CSS properties:

.alternate {
  box-sizing: border-box;
}

Conclusion

That's it for BOX MODEL; As everything on web is a box it is very important to learn the fundamentals of CSS. Learning box modeling enables you to manipulate and structure elements on the page.

Thanks for this reading!! If you find this helpful; drop your reactions and share this piece with others.

You can also stay connected with me by following me here and on X, LinkedIn.

What is React Hydration?

Jitendra Choudhary — Sun, 21 Apr 2024 17:35:07 +0000

Before surfing into the concept of hydration in React, it's essential to grasp some fundamental concepts: client-side rendering (CSR) and server-side rendering (SSR).

Client-side rendering (CSR)

Client-side rendering involves rendering all pages directly in the browser using JavaScript. In this approach, the browser handles all data-fetching tasks, leading to slower page loading times and potentially a subpar user experience. ReactJS serves as a prime example of a client-side rendering library.

Server-side rendering (SSR)

Server-side rendering, on the other hand, utilizes servers' request-response processes to render pages using JavaScript. Data fetching is performed by the servers, resulting in a better user experience. SSR loads HTML content initially, providing users with some content, while JavaScript loads in the background. Unlike CSR, SSR doesn't present a blank page during the initial render. This initial rendering disparity becomes apparent when dealing with larger applications with frequent state changes.

Understanding Hydration in React

Many developers encounter confusion surrounding the term "hydration" in React. But what exactly is hydration? When a server sends HTML to the browser, it's rendered on the client side. However, this HTML lacks React components. Hydration is the process by which React attaches itself to this existing HTML. It attempts to attach event listeners to the HTML, enabling control over all DOM nodes within it. Essentially, hydration allows React to integrate seamlessly with pre-rendered HTML, enhancing interactivity and functionality.

With the latest version of React (v18), developers can now render components on the server side. This means that the HTML generated by the server and sent to the client also originates from React. The HydrateRoot function facilitates the display of React components within a DOM node whose HTML content was previously generated by react-dom/server`.

Understanding React hydration is crucial for optimizing client-side rendering and improving user experiences. By seamlessly integrating React with server-rendered HTML, developers can achieve faster initial renders and better overall performance in their web applications.

Rendering and hydration are both crucial processes in React, but they serve different purposes and are used in different contexts.

Rendering

Rendering in React refers to the process of converting React components into DOM elements and displaying them on the screen. When you use ReactDOM.render() in your code, you're instructing React to render your component hierarchy into a specified DOM node.

For example,

React renders the <App /> component with the specified props (name="Jitendra") into the DOM node with the id root. This results in the component being displayed on the webpage as "If you find my blog helpful consider dropping an emoji".

Hydration

Hydration, on the other hand, is the process of attaching event listeners and reattaching event handlers to the server-rendered HTML. It's a crucial step when React is used for server-side rendering (SSR), as it allows React to take over the client-side interactivity of a page that was initially rendered on the server.

For example,

You're attempting to hydrate the server-rendered HTML with React. However, since the server-rendered HTML doesn't contain the expected <h1> element, React throws a warning because it expects the server HTML to match the client HTML.

hydrateRoot() API

The hydrateRoot() API is a more recent addition to React, introduced in React 18. It replaces the deprecated hydrate() method. This API allows you to hydrate a root React node with server-rendered HTML content.

domNode: The DOM element that was rendered as the root element in the tree.
reactNode: The React node used to render the existing HTML, typically a JSX file like App.js.
Options: An optional object with options for the React root.

Some key points to remember:

hydrateRoot() compares the rendered content and the server-rendered content and warns you of any mismatches during hydration.
If the HTML content is not rendered beforehand, you can't use hydrateRoot(). In this case, createRoot() has to be used.
It's typically best to have only one hydrateRoot() call in your entire React app.

Conclusion

Looking forward to React 19, there's a sense of anticipation for what's next.

If you have read this far and find my blogs worth reading feel free to follow me here so you can get my next blog update straight in your feed.
Interested in connecting on X, LinkedIn, GitHub?

Lessons I learned as a Self Taught Developer

Jitendra Choudhary — Sun, 14 Apr 2024 16:03:30 +0000

Table of Content

Introduction
Fundamentals is the King
Big Tech is not the end of the World
Networking is the Key
The stack is irrelevant
Learning is Real
Programming-is-Hard
Importance of Real World Experience
Become a Master of One Trade
Learn How to Collaborate
Project based Learning
Conclusion

“The most disastrous thing that you can ever learn is your first programming language.” ― Alan Kay

Introduction

In this blog Jitendra shares his 10 most important lessons he learned as a self taught developer. So if you in the same boat and your time is worth trying to implement these lessons in your programming life. Through my experience, I've come to learn several crucial lessons that have shaped my approach to coding and career development. In this article, I'll share some insights from my journey as a self-taught developer.

Fundamentals is the King

Many times you will hear the buzz “know the fundamentals”!! But I used to wonder why. Fundamentals are the building blocks of everything that exists out there. Knowing the fundamentals will help you understand the logic, the principles, and the purpose of what you are learning. Let's understand this with an example: learning the basics of programming is like knowing the alphabet, letters, words, etc., and then choosing which story to write about. The story is like a framework that will trend and flop, but the fundamentals of the language will remain. So, don’t be a React king first; be a JavaScript king.

Big Tech is not the end of the world

Working at Big Tech may not be the best experience for programmers who are looking for flexibility. Often, in big tech, you will end up working on a specific part of the company’s codebase. Whereas, working at a startup, you can have major control over things and, hence, a greater impact on the company. If you are looking for greater impact and learning and more control over things, big tech might not be the thing for you. Often, working in a startup means you can work on cool, creative projects, and innovation is your thing. Working at Big Tech gets you respect in the tech community and watches your bank account max out.

Networking is the key

Building a strong network within the tech community is invaluable. Networking opens doors to opportunities, mentorship, and collaboration. Attend meetups, conferences, and online forums to connect with like-minded individuals. Share your knowledge, seek advice, and be open to learning from others. Your network can play a significant role in your career growth and development as a self-taught developer.

The stack is irrelevant

It's natural to love the tools you use every day, but they're not as important as you might think. New tools are built to solve problems that their predecessors failed to solve. New technology can be a lot of fun, but becoming too attached to it can be harmful. So, be sure to learn about the latest technology, but also remember to use it as a tool, not a crutch. It's foolish to ignore new technology and stick with what you know. Instead, challenge yourself to explore new languages, frameworks, and patterns, because that's how you'll grow and expand your knowledge. Focus on learning because that's what makes work enjoyable.

Learning is Real

As a self-taught developer, the learning never stops. Embrace a growth mindset and be prepared to continuously update your skills and knowledge. Explore new technologies, languages, and frameworks to stay relevant in the ever-evolving tech industry. Take online courses, read books, and engage in hands-on projects to deepen your understanding. Remember, learning is a lifelong journey, and staying curious is the key to success.

Programming-is-Hard

Undoubtedly, programming can be challenging. It requires patience, problem-solving skills, and perseverance. Don't be discouraged by setbacks or failures; instead, view them as opportunities for growth. Break down complex problems into smaller, manageable tasks and tackle them one step at a time. Practice regularly, and seek help when needed. With determination and practice, you can overcome any programming challenge.

Importance of Real-World Experience

While theoretical knowledge is essential, nothing beats real-world experience. Internships, freelance projects, or contributing to open-source initiatives can provide valuable hands-on experience. These opportunities allow you to apply your skills in a practical setting, learn from experienced professionals, and build a portfolio of work. Employers value candidates with both theoretical knowledge and practical experience, so don't underestimate the importance of gaining real-world exposure.

Become a Master of One Trade

Rather than spreading yourself too thin, focus on mastering one programming language or technology stack. Specializing in a specific area allows you to develop deep expertise and differentiate yourself in the job market. Identify your interests and strengths, and invest time and effort into honing your skills in that particular domain. While it's essential to have a broad understanding of various technologies, becoming a master of one trade can open doors to exciting career opportunities.

Learn How to Collaborate

Collaboration is essential in the world of software development. Learn how to effectively communicate and collaborate with team members, whether they're developers, designers, or stakeholders. Practice agile methodologies, participate in code reviews, and contribute to group projects to enhance your collaborative skills. Being able to work effectively in a team not only improves the quality of your work but also fosters a positive and productive work environment.

Project-based Learning

Hands-on projects are an excellent way to reinforce your learning and showcase your skills to potential employers. Work on personal projects or contribute to open-source initiatives to apply what you've learned in a real-world context. Projects allow you to experiment with different technologies, solve practical problems, and build a portfolio of work that demonstrates your abilities. Focus on creating projects that align with your interests and career goals, and don't be afraid to step out of your comfort zone.

Conclusion

Teaching yourself programming is a journey filled with challenges and opportunities for growth. By implementing this points into your programming journey you can succeed as self taught developer.

If you have read this far and find my blogs worth reading feel free to follow me here so you can get my next blog update straight in your feed.

Interested in connecting on X? Say me Hi at @JitendraC

What is MQTT Protocol?

Jitendra Choudhary — Mon, 01 Apr 2024 07:32:07 +0000

Introduction
What is MQTT?
Importance of MQTT in IoT
Understanding MQTT
What are MQTT Components?
Understanding MQTT With An Example
Conclusion

Introduction

Welcome to the second article of our API series! In this article, we will learn about the MQTT protocol and its architecture, components, and real-world applications. If you are new to the series, we recommend starting with our first article where we discussed the basics of APIs and how they function.

If you haven't read the first article yet, be sure to check it out: What is an API and How Does it Work?

Now, let's continue with the MQTT protocol.

What is MQTT?

MQTT stands for Messaging Queuing Telemetry Transport. MQTT is a standard messaging protocol for machine-to-machine communication. Smart home systems, scanners, sensors, and other IoT (Internet of Things) send and retrieve data over a network having a limited bandwidth. For devices having limited hardware capabilities, MQTT proves to be an efficient architecture for communication.

Importance of MQTT in IoT

MQTT is the standard protocol for IoT devices to communicate with other machines. here are some main reasons:

Lightweight And Scalable

MQTT can be implemented on IoT devices with minimal usage of resources. It can even be used on microcontrollers. MQTT headers are small so that you can optimize the network bandwidth. As implementation of MQTT requires fewer resources it also requires less code that consumes very little power. MQTT also has built-in features so you get support for large IoT devices for communication.

Reliable And Secure

IoT devices connect via unreliable networks. MQTT re-connects quickly with built-in features. It offers three levels of quality-of-service for IoT use cases. MQTT also makes it easy to encrypt messages and authenticate devices and users using modern protocols such as OAuth and TLS1.3.

Understanding MQTT

MQTT protocol uses a publish/service model for communication. Whereas, in HTTP a client sends a request for data or resources and the server responds with data after authentication. This is a very straightforward approach. However, In MQTT protocol works on the principles of the publish/subscribe model where it decouples the publisher (message provider) from the subscriber (message receiver). There is a message broker which handles all the communication between the publisher and the subscriber. The message broker filters the messages received from the publisher and correctly sends them to its subscriber; not exposing the two parties to each other. The broker does the decoupling as below:

Space decoupling

The two parties (publisher and subscriber) are not aware of each other's network information like IP addresses, port numbers, or even location.

Time decoupling

The publisher and subscriber don’t run or have network connectivity at the same time.

Synchronization decoupling

Both publishers and subscribers can send or receive messages independently without interrupting each other. For example, the subscriber does not have to wait for the publisher to send a message.

What are MQTT components?

MQTT Client

A MQTT client is anything as big as a server or as small as a microcontroller that runs a MQTT library. If the client is sending messages, it acts as a publisher, and if it is receiving messages, it acts as a subscriber. Any device that communicates using MQTT over a network can be called an MQTT client device.

MQTT broker

The MQTT broker is a vital component that acts as a mediator between different clients. Its primary functions include receiving and filtering messages, identifying subscribed clients, and delivering the messages to them. In addition, the MQTT broker is responsible for other critical tasks such as authenticating and authorizing MQTT clients, forwarding messages to other systems for analysis, and managing missed messages and client sessions.

MQTT connection

To establish communication, clients and brokers use an MQTT connection. The MQTT client initiates the connection by sending a CONNECT message to the broker. The broker acknowledges the connection by responding with a CONNACK message. Communication between clients and the broker requires a TCP/IP stack. It's important to note that clients can only connect with the broker and not with each other.

Understanding MQTT With An Example

Imagine you have a smart home setup with various IoT devices like sensors, switches, and lights. You want to control and monitor these devices remotely using your smartphone or computer. MQTT can facilitate communication between your devices and your control interface (smartphone or computer) efficiently and reliably.

1. Setup:

You have an MQTT broker installed on a server (which could be a cloud-based service or a local server).
Each IoT device in your home (e.g., temperature sensors, motion sensors, smart lights) is equipped with an MQTT client.

2. Publishing Data:

Your temperature sensor periodically measures the temperature in a room.
When the temperature reading is taken, the sensor publishes this data to a specific MQTT topic, such as "home/living_room/temperature."
Similarly, your motion sensor detects movement and publishes an event to the topic "home/kitchen/motion."

3. Subscribing to Topics:

Meanwhile, your smartphone or computer is running an MQTT client application.
You subscribe to the topics you're interested in, such as "home/+/temperature" to receive temperature data from all rooms, or "home/+/motion" to monitor motion events in different areas.

4. Receiving and Acting on Data:

When a temperature reading is published to the "home/living_room/temperature" topic, your MQTT client on the smartphone receives this data.
The client application can then display the temperature on your smartphone's interface in real-time.
If the motion sensor in the kitchen publishes a "motion detected" event to the "home/kitchen/motion" topic, your smartphone receives this notification.

5. Controlling Devices:

Let's say you want to turn on the lights in your living room remotely.
You send a command to the MQTT broker, publishing a message to the topic "home/living_room/lights/set" with the desired action (e.g., "turn on").
The MQTT broker forwards this command to the MQTT client running on the smart light switch in your living room.
The smart light switch receives the command and turns on the lights accordingly.

Conclusion

MQTT is a reliable and lightweight protocol that connects and controls IoT devices over constrained networks. It uses a publish/subscribe model that ensures efficient communication and enables remote monitoring and control. Its security features and support for various quality-of-service levels make it indispensable for a wide range of applications.

If you have read this far and find my blogs worth reading feel free to follow me here so you can get my next blog update straight in your feed.

Interested in connecting on X? Say me Hi at @JitendraC

What is an API (Application Programming Interface)?

Jitendra Choudhary — Mon, 25 Mar 2024 05:19:20 +0000

Introduction
What is API?
How API Works?
API Protocols
Types of API
Conclusion

Introduction

API is really useful for the integration of new applications with existing software systems. You don't have to build everything from scratch, API provides ready-to-use functionalities for your project.

A lot of times you hear the term "API" from other devs, Do you know what exactly "API" is? How it works? In this article, we'll learn about API.

What is API?

API stands for Application Protocol Interface. API is a mechanism that enables two different software components to communicate with each other which has its own set of rules and protocols.

In API, one application is a client and the other is a server. Here, the client can your mobile, laptop, or computer you are using to surf the internet. The server is a bigger computer that stores the data. A protocol is nothing but a set of rules to communicate.

So, let's understand this with an example: Imagine there is a vending machine in front of you. This machine can give you all sorts of drinks and snacks you need. You need to ask the machine in a specific way i.e. you select the goods you need and use a credit/debit card or maybe cash. That is kind of how an API works, but instead of snacks it delivers you the information and action on the server.

But, What is an API? Well, think of it like this: you have social media, games, and even weather apps on your phone/computer. All of this does some different work. Let's say the weather app shows today's weather information. But, the app doesn't create weather information itself, It talks to a server via an API and gets back the information you requested.

How API Works?

Computers follow protocols to communicate with each other. Without a protocol, they don't have an expected form of communication.

Likewise, without a protocol, you press a button to get a lemonade from the vending machine. However, the machine returns coconut water. It's all chaos, right? This is where protocol comes in, it tells you what to do step by step, like "insert money, select an item, press the button," and so on.

Now, just like how vending machines have different protocols for different snacks (press A for lemonade, and B for coconut water), the internet also uses different protocols for different tasks.

On the web, there is HTTP protocol (which stands for Hyper Text Markup Language). APIs on the web use the HTTP protocol because it's easy to use and it's popular. The client requests along with a set of information so the server responds accordingly. The information sent along with the request includes:

URL – a web address where you want to make a request
Method – whether you want data already stored somewhere or want to save new data in a database e.g. GET, POST, DELETE, PUT, etc.
Header – all the relevant information about your request including in what format the client device expects to receive the data
Body – the body contains the actual requested data

API Protocols

As the use of web APIs has increased, it has led to the development of certain protocols. These protocols provide users with a set of defined rules, or API specifications that create accepted data types commands, and syntax.

SOAP API (Simple Object Access Protocol)

These APIs use Simple Object Access Protocols. Client and server exchange messages using XML. This is a less flexible API that was more popular in the past.

XML-RPC & JSON-RPC API (XML-Remote Procedure Call)

These APIs are called Remote Procedure Calls. The client completes a function (or procedure) on the server, and the server sends the output back to the client mainly in XML or JSON.

Websocket API

Websocket API is another modern web API development that uses JSON objects to pass data. A WebSocket API supports two-way communication between client apps and the server. The server can send callback messages to connected clients, making it more efficient than REST API.

REST APIs

These are the most popular and flexible APIs found on the web today. The client sends requests to the server as data. The server uses this client input to start internal functions and returns output data to the client.

Types of API

Today most APIs are web APIs that expose an application's data and functionality over the internet. Here are the four main types of web API:

Open API

Open APIs are open source application programming interfaces you can access with the HTTP protocol. Also known as public APIs, they have defined API endpoints and request and response formats.

Private API

Private APIs remain hidden from external users. These private APIs aren't available for users outside of the company and are instead intended to improve productivity and communication across different internal development teams.

Partner API

Partner APIs connect strategic business partners. Typically, developers access these APIs in self-service mode through a public API developer portal. Still, they need to complete an onboarding process and get login credentials to access partner APIs.

Composite API

Composite APIs combine multiple data or service APIs. They allow programmers to access several endpoints in a single call. Composite APIs are useful in microservices architecture where performing a single task may require information from several sources.

Conclusion

API is nothing a mechanism for two application to communicate with certain set of information.

Because APIs allow companies to open access to their resources while maintaining security and control, they have become a valuable aspect of modern business and personal projects. It is important to understand API.

Interested in connecting on X? Say me Hi at @JitendraC

How to Understand a Large Codebase Like a Pro

Jitendra Choudhary — Tue, 05 Mar 2024 12:50:28 +0000

Table of Content

Introduction
Read the Documentation
Read the Tests
Pair with other Engineers
Start with the Basics
Be Curious, Don't Criticize
Study the Workflow
Use the Product/Service
Conclusion

Introduction

Developers spend a significant amount of time on open sourced projects or institutional codebases before they push commits to production. It is a nightmare for the developers who freshly landed on the codebase. At first glance, it may be hard to understand how all the files are working together without knowing some more context. In this blog, I will share with you some of my thoughts on how to explore a legacy codebase.

For the explanation part, Let's use Appwrite's codebase which is fairly big enough to threaten fresh developers.

Read the Documentation

The first step I take when starting a new project is to read its documentation or README files. This allows me to get familiar with the project's setup and codebase. The documentation gives you a high-level understanding of the project's purpose, goals, and functionalities. This context helps you see how your contributions can fit into the overall picture.

Appwrite's Website Documentation

The documentation also provides information about the project's communication channels (e.g., forums, chatrooms) and contribution guidelines. This helps you learn how to interact with the project's community and get help when needed.

Read the Tests

Check for unit, integration, or functional tests in your project. Run the tests and see what each test is doing. Tests often cover not just typical scenarios but also edge cases and error conditions. By reviewing them, you gain insight into potential problems and how the code is designed to handle them. Reading the config files and others can be boring, so you don't have to understand it all at once. You can always revisit it later. That is the key. This helps you write more robust code in the future.

Read the Tests

Pair with other Engineers

Accessing the knowledge of an experienced developer who has already worked on the codebase can be helpful. By pairing up with this person, you can gain valuable insights into how certain things work and how to implement particular design patterns, testing, processes, and third-party code that are relevant to the project.

It is important to have a good relationship with other engineers on your team and make sure they are willing to answer your questions. In turn, you should also be willing to answer questions from others. Explaining what's going on is part of your job, so don't get annoyed by questions and always treat people with respect, as they are the ones who help make you valuable to the company.

Start with the Basics

It's always a good practice to start with the basics and understand the architecture before diving into the codebase. If you intend to work with Docker, it's essential to have a good understanding of container technology. Similarly, if you plan to work with service implementation, it's crucial to understand the fundamentals of service-oriented architecture. If you find it challenging to understand the code, take a step back and check if you're missing any basic information. If you're having difficulty understanding the code, it may be because you lack the necessary knowledge.

Understand Basic Architecture

Be Curious, Don't Criticize

When you're dealing with legacy code, it's important to remember that it was written by experienced developers who made decisions based on the context at the time. Criticizing it can make people feel attacked and can hurt collaboration. Instead, approach it with empathy and ask questions to understand the thought process behind it. This can help you learn from past mistakes and get insights into the project's evolution. By doing this, you can cultivate a learning mindset and promote collaboration, which is critical to the success of any project.

Study the Workflow

Take your time to understand the workflow of the most crucial parts of the codebase. It's essential to learn how different components connect. By tracing the flow of operations within a codebase, you can gain a better understanding of how everything works. This experience will help you act with precision when implementing features or fixing bugs within the codebase.

If you're unsure about how to get started, begin with a function. Read it carefully, then proceed to read and comprehend other functions or components that use it. You can repeat this process with modules, classes, and others until you have a solid understanding of the codebase.

Use the Product/Service

Before you start writing code, try to explore the platform like what it does. why it does? for whom it does? how fast it does?

Developers (You) write code for users to use the product and if you don't put yourself in the user's shoes you never know what the user might feel about a certain aspect of the platform. So, put yourself into the end user's shoes and understand what it is like to use the product. By having a good understanding of customers' needs, you can contribute features that end users will love.

Appwrite's Website

Conclusion

Having a strong understanding of a codebase can greatly increase your efficiency when working with a new codebase. By efficiently comprehending code written by other developers, you can improve your impact and productivity within an organization. This can be achieved by dedicating some extra time and patience towards learning the codebase.

Did you find the tips on how to navigate a new codebase useful? Here's how you can stay connected and continue learning. You can follow me @JitendraC on Twitter, where I regularly tweet about software development tips, industry trends, and fascinating projects. If you know someone who could benefit from these insights, share this article with them on Twitter! Let's assist more developers in conquering complex codebases together.