DEV Community: Junaid

Boosting Web Performance: A Guide for Frontend Developers

Junaid — Thu, 24 Oct 2024 07:35:05 +0000

Hey everyone! It’s been a while since I last wrote a blog, and I’ll admit, it makes me a bit sad. The reality is, there’s so much to learn, and sometimes it feels like there’s never enough time to dive into everything. Who am I kidding, though? The truth is, I’ve been procrastinating a lot lately.

But recently, I’ve been exploring web performance—a crucial topic for any frontend developer—and I’m excited to share what I’ve learned. Performance optimization is one of those things that, when done right, can make a world of difference in how users experience your website or web app. Not only does it improve the user experience, but it also boosts SEO and can even impact conversion rates.

So, let’s dive in!

Why Web Performance Matters

In today’s fast-paced world, users expect websites to load quickly and interact smoothly. If your site is slow, users will leave—it's as simple as that. Studies show that a delay of even a few seconds can lead to higher bounce rates and lower engagement. As frontend developers, we’re responsible for ensuring that our applications not only look good but perform well under various conditions.

When it comes to measuring performance, Google is often considered the gold standard. Google provides a set of key metrics, known as Core Web Vitals, that help developers track and improve the performance of their websites. Let’s break them down:

As per the lord Google these things matter in performance

FCP (First Contentful Paint)
LCP (Largest Contentful Paint)
CLS (Cummulative Layout Shift)
TTI (Time To Interactive)
INP (Interaction to Next Paint)

Lets Explore them more closely

FCP (First Contentful Paint)

What it Measures: FCP measures the time it takes for the first piece of content (text, images, etc.) to appear on the screen after a user navigates to your page. It’s a critical metric because it gives users feedback that the page is loading. The quicker the FCP, the better the user experience.

How to Improve FCP:

Minimize Render-Blocking Resources: Reduce or eliminate resources that block the rendering of the page, such as synchronous JavaScript or CSS. Use <link rel="preload"> for critical resources.

Defer Non-Critical JavaScript: Use the defer or async attributes for non-essential scripts to ensure they don’t block the initial paint.

*Use Server-Side Rendering (SSR): * SSR helps deliver the initial HTML faster, especially for dynamic content, so that users can see meaningful content sooner.

Optimize CSS Delivery: Minimize the size of your CSS and inline critical CSS, so the browser can render content faster.

Use a Content Delivery Network (CDN): Serve static assets from a CDN to reduce latency and speed up resource delivery.

LCP (Largest Contentful Paint)

What it Measures: LCP focuses on the time it takes for the largest element (typically a hero image, large text block, or video) to fully render within the viewport. It’s a great indicator of perceived load speed, as users consider the page ready once the largest content has loaded. Aim to keep LCP under 2.5 seconds for a fast experience.

How to Improve LCP:

Optimize and Compress Images: Use modern image formats like WebP, compress images, and ensure the right image sizes are served using srcset and sizes attributes.

Lazy Load Below-the-Fold Images: Implement lazy loading for images that aren’t immediately visible to prioritize the loading of above-the-fold content.

Preload Important Resources: Use the tag to load important resources like fonts, hero images, or large media files more quickly.

Minimize Render-Blocking CSS: Just like with FCP, minimize the use of large CSS files that could block rendering.

Reduce Third-Party Scripts: Third-party ads, analytics, or other scripts can slow down LCP. Defer or asynchronously load non-essential scripts.

CLS (Cumulative Layout Shift)

What it Measures: CLS measures the visual stability of your page. Have you ever been reading something, and suddenly the layout shifts, causing you to lose your place or click the wrong button? That’s a bad CLS score. CLS tracks how much elements on the page shift unexpectedly during the load process. A low CLS is essential for smooth user experiences, especially on mobile.

How to Improve CLS:

Set Dimensions for Images and Videos: Always include width and height attributes on images, or use CSS aspect ratio boxes to reserve space for media elements before they load.

Avoid Inserting Content Above Existing Content: Avoid dynamically adding content above existing content unless it’s absolutely necessary (e.g., ads).

Use Font Loading Strategies: When loading custom fonts, use font-display: swap; to avoid layout shifts caused by font loading.

Avoid Injecting New Ads or Popups Without Space: Ensure that dynamically loaded ads, banners, or pop-ups are accounted for in the layout space to avoid unexpected shifts.

Use Image placeholders or loaders with the same space as the image

TTI (Time to Interactive)

What it Measures: TTI measures how long it takes for the page to become fully interactive. This means all buttons, inputs, and links are usable, and the main thread is free to respond to user input. A fast TTI ensures that users can engage with your content quickly without feeling like the site is sluggish or unresponsive.

How to Improve TTI:

Reduce JavaScript Execution Time: Break down large JavaScript bundles and load only essential scripts for the first interaction. Use code splitting in React (with React.lazy()) or dynamic imports in JavaScript.
Use Web Workers: Offload heavy, non-UI blocking tasks to Web Workers to keep the main thread responsive.
Defer Long Tasks: Split long JavaScript tasks into smaller tasks to avoid blocking the main thread for too long.
Preload Critical Resources: Ensure that essential resources needed for interactivity (scripts, styles) are preloaded to avoid delays in TTI.
Optimize CSS and JavaScript: Minify, compress, and prioritize essential code. Use tree-shaking to eliminate dead code and ensure faster script execution. Use GZIP or BROTLI Compression mechanism

INP (Interaction to Next Paint)

What it Measures: A relatively newer metric, INP tracks the time it takes for a page to respond to user interactions (like clicking buttons, scrolling, or typing) and update the UI accordingly. It helps measure overall interactivity beyond just the initial load, ensuring that your app remains snappy throughout the user session.

How to Improve INP:

Reduce Input Latency: Make sure that user inputs (clicks, keypresses) are handled quickly by avoiding long JavaScript tasks that block the main thread.

Prioritize Input Responsiveness: Use requestAnimationFrame or requestIdleCallback to handle non-urgent work during idle time, leaving the main thread open for interaction handling.

Use Debouncing and Throttling: When handling frequent user interactions (like scrolling or typing), debounce or throttle the event handlers to prevent the UI from becoming unresponsive.

Lazy Load Non-Critical Code: Defer loading of non-critical functionality until after the initial interaction.
For instance, you can lazy load components in React using React.lazy() and Suspense.

Tools to use for checking performance

Pagespeed by chrome -GTMetrix

By following these strategies, you can significantly improve these key metrics and deliver a faster, more responsive user experience. These optimizations, especially when applied together, help ensure your site not only passes Google's Core Web Vitals tests but provides an exceptional experience for your users

I hope you found this blog useful and you were able to get some key insights from it to help in your next performance improvement strategy.

For more amazing blogs on performance , web security , react, angular, vue keep following me

Hygen - Never Repeat your frontend tasks

Junaid — Wed, 15 Nov 2023 15:41:34 +0000

Introduction

As JavaScript developers, we are constantly seeking ways to enhance our productivity and streamline our workflows. One tool that has gained popularity in recent years for its ability to generate consistent, maintainable code is Hygen. In this article, we will explore the fundamentals of Hygen and dive into practical examples of how it can be seamlessly integrated into React projects to automate code generation.

What is Hygen?

Hygen is a code generation tool that allows developers to create and manage templates for generating boilerplate code. It provides a simple and flexible solution to reduce repetitive tasks, enforce best practices, and maintain consistency across a codebase.

Getting Started with Hygen

To begin using Hygen, you'll need to install it using npm or yarn:

npm install hygen
// or use yarn
yarn hygen

This will install hygen in your code base and creates a _templates folder in your app

you can put that folder inside your app if its not inside.

After the setup you need to create a generator

A generator is basically where whatever repetitive tasks you want to avoid , you create a generator for that.

In our app , every time i create a component i need to :-

create a folder with the component name
Inside the folder should be a index.tsx with the basic structure of a react component in place
I also need a css file for the component
I might also need a test file and a story file

For simplicity i am taking two files only

index.tsx
index.css

So we will create a generator for this task called

npx hygen generator new componentBase

Now our generator is ready and if you look inside it , it will have two folders

new
with-prompt

If you want to use prompts while creating a component (which we will use since we have to name the component everytime we create one) we will be using the with-prompt one

Going inside this , we see two files

hello.ejs.t

prompt.js

We will be adding files to however we want with different names.

Since we want to create two files , we will create two files

hello.ejs.t
main.ejs.t

Inside each file we have to explain what we would like to do

*For our first file , we want to create a react component with base structure in place , here is the structure for the same

---
to: src/components/<%=message%>/index.js
---
import React from 'react'

export const <%= message %> = ({ children }) => (
  <div className="<%= h.changeCase.paramCase(message) %>">{children}</div>
)

Notice we are putting <%=message%> as folder and component name , this is the prompt message which the user will be providing.

The path will be given as you like - for me i would like to put these folders inside components /

we can also put some default styling for out css file

---
to: src/components/<%=message%>/index.css
---
.<%= h.changeCase.paramCase(message) %>{
    color:'black'
}

Now there is one more file called prompt.js
This file is responsible for what the user will see and it will have some thing like this code inside

module.exports = [
  {
    type: 'input',
    name: 'message',
    message: "Name of the folder you would like to have?"
  }
]

Notice the name is message , this can be different for you - the same name has to be used in the above components

Ok ! awesome we are good to go

Now to make our life easy , we will create a shortcut for generating the component so that we dont have to type a long command everytime

Go inside your package.json and put this inside

  "scripts": {
    "hygen-generate":"npx hygen mygen with-prompt"
  }

Superb , we are good to goooo

Drumrollll

Go inside the terminal and type

npx hygen-generate

Give a name to your component and your component will be created .

This is one of thousands of examples we can do with hygen
I would love to see what you guys come up with , with this amazing tool

Tag me or comment below what you created with this beautiful tool .

I have created this as a project as well , here is the repo for you guys to check and explore

jsh854 / react-hygen-boilerplate

This repo is the boiler plate for react with hygen for code generation

This repo is for react with hygen for code generation

Run ** npm i ** initially

Here is how to use and get started with this

Go inside the terminal
Run npm run hygen-generate
Give a proper name for the folder you would want to create
It will create a folder with the name provided under src/components and files
- .js
- .ts
- .css

Customisation

If you would like to customise the folder generation , maybe add more files or add different content for the generated files
- Go inside _templates > mygen > with-prompt
- Three .ejs.t files are there . - In order to add more files , create a new file with different name but same extension of .ejs.t
- Each file has a purpose and you can customize how they look accordingly

View on GitHub

Vue 2 vs vue 3 - The Differences

Junaid — Mon, 05 Jun 2023 13:31:25 +0000

whats new in vue 3 that developers can start taking advantage of

Vue JS as we all know is great tool to get you up and running with frontend development .

It has got all the things a frontend developer needs in 2023

I have got the privilege of working on Vue 2 couple of months ago and its really amazing framework to work with .

Today what i am going to focus about more is "what are the new things that came in Vue 3 " and are the new features useful to an average Vue developer

_First lets dive into options API _
So as you vue developers know , in vue 2 we are using the good "Options Api" . The Options API is the traditional way of structuring and defining components. It involves defining a component using a set of options.

 data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  }

This above is an example of options api usage .

We also have 'Methods' for functions , props for props (obviously ) , watchers , lifecycle methods like created , mounted , updated etc in Options Api

 watch: {
    message(newVal, oldVal) {
      console.log('Message changed from ' + oldVal + ' to ' + newVal);
    }
  },  

created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  destroyed() {
    console.log('Component destroyed');
  }

Now in Vue 3 , we also have Composition Api

The Composition API is an alternative way of structuring and organizing code within Vue components. It provides a more flexible and scalable approach compared to the Options API. Instead of separating component options into different sections, the Composition API encourages grouping related logic together.

Here are the key concepts and features of the Composition API in Vue 3:

Setup function: In the Composition API, each component consists of a setup function that returns an object containing the component's properties, methods, and other reactive references. The setup function is run before the component is created, allowing you to set up the component's reactive state and define the component's logic.

import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue!',
      count: 0
    });

    const increment = () => {
      state.count++;
    };

    const doubleCount = computed(() => {
      return state.count * 2;
    });

    return {
      state,
      increment,
      doubleCount
    };
  }
};

Reactive state: The Composition API provides the reactive function, which allows you to create reactive objects. Any changes made to reactive properties will trigger reactivity and update the component's view accordingly.
Computed properties: Computed properties can be created using the computed function. Computed properties are derived values that are automatically updated when their dependencies change.
Methods: You can define component methods within the setup function. These methods can be accessed and used within the component's template or programmatically.
Lifecycle hooks: The Composition API provides lifecycle hooks similar to the Options API. However, they are prefixed with on, such as onMounted, onUpdated, and onUnmounted. These hooks allow you to perform actions at different stages of the component's lifecycle.

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });
  }
};

Ref: The Composition API introduces the ref function, which allows you to create a reactive reference to a value. Refs are particularly useful when dealing with primitive values that need reactivity.
Watch: The Composition API provides the watch function, which allows you to perform operations based on changes to reactive state or refs.

import { watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log('Count changed from ' + oldValue + ' to ' + newValue);
    });

    return {
      count
    };
  }
};

This is the main core difference in vue 2 vs vue 3 which came along and is going to improve code quality and performance of vue. However Options api is not going anywhere , its going to stay as is and will be available in vue 3 as well .

The Other differences include
Reactivity System:
Vue 3 introduces a revamped reactivity system, which is more efficient and performs better compared to Vue 2. The new system, known as the Proxy-based reactivity system, offers improved reactivity tracking, resulting in faster and more accurate updates.

// Vue 2
this.message = 'Hello, Vue!';

// Vue 3
import { reactive } from 'vue';

const state = reactive({ message: 'Hello, Vue!' });

Performance Improvements:
Vue 3 brings significant performance improvements over its predecessor. The virtual DOM (VDOM) algorithm has been optimized to reduce memory allocation and increase rendering speed. The new static tree hoisting technique in Vue 3 eliminates redundant re-rendering of static content, leading to better performance in complex applications.

Smaller Bundle Size:
Vue 3 comes with a smaller bundle size compared to Vue 2. This is achieved through better tree shaking and improved module system. The modular design of Vue 3 allows developers to import only the necessary features, reducing the overall size of the application bundle.

TypeScript Integration:
While Vue 2 had limited TypeScript support, Vue 3 takes full advantage of TypeScript's static typing capabilities. The Vue 3 codebase is written in TypeScript, which ensures better type inference and provides enhanced autocompletion and tooling support for TypeScript users.

Conclusion

The major focus in vue 3 have been performance and optimisation . Well many can argue that composition api is great and everyone should switch to it right away - i can confidentaly say that many would want to stick with options api due to some obvious reasons.
The core differences are Composition API, revamped reactivity system, enhanced performance, smaller bundle sizes, improved TypeScript integration.
While it may take some time to switch to vue 3 , the improvements are worthwhile.

I hope you find this article usefull and i was able to help you in someway .
Checkout my website for more articles that will be coming soon . Jayshahcodes
I am also open for dev articles , if you have a article in mind or want me to write dev articles for you , lets discuss.

Support me here

Typescript - For React Developers

Junaid — Sat, 04 Mar 2023 09:20:18 +0000

Lets get React Developers armoured with TS

Introduction
React is a popular JavaScript library used for building user interfaces. It is a great tool for creating dynamic and responsive web applications. However, as your application grows in complexity, it can become harder to maintain and debug. This is where TypeScript comes in.
TypeScript is a static typing language that can be used with React to improve code quality and maintainability. In this post, we will discuss the benefits of using TypeScript in React and how to get started with it.

Benefits of Using TypeScript in React
Here are some key benefits of using TypeScript in React:

Type Safety

One of the main benefits of using TypeScript with React is type safety. TypeScript provides a way to catch errors early in development by providing type checking for components, props, state, and other variables. This helps catch errors before they become bigger issues, making your code more reliable and easier to maintain.

Improved Code Readability and Maintainability

TypeScript provides better documentation for your code and helps ensure consistency across your project. This improves the readability and maintainability of your codebase, making it easier for developers to understand and modify your code.

Better Tooling Support

TypeScript integrates well with many popular development tools, including IDEs, linters, and testing frameworks. This makes it easier to work with, and ensures that your code is consistent and follows best practices.

Faster Development and Easier Refactoring

TypeScript provides better autocompletion and refactoring support, making it easier to write and modify code. This results in faster development times and a more efficient workflow.

Getting Started with TypeScript in React

To use TypeScript in a React project, you need to add a few dependencies to your project and configure your development environment. Here are the steps to get started:

Step 1: Install Dependencies

If you are starting a fresh React App here is the template that will configure typescript for you directly

//using npx
npx create-react-app my-app --template typescript
// using yarn
yarn create react-app my-app --template typescript

If you already have a react app and you want to add Typescript support now , here is the code:

//using npm
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

//using yarn
yarn add typescript @types/node @types/react @types/react-dom @types/jest

This will install TypeScript and the necessary type definitions for React and ReactDOM.

Step 2: Use TypeScript in Your Code

Now that your project is configured, you can start writing components and other code using TypeScript syntax. Here are some examples:

Defining Types for Props and State

import React from 'react';

interface Props {
  name: string;
  age: number;
}

interface State {
  isOn: boolean;
}

class MyComponent extends React.Component<Props, State> {
  state: State = {
    isOn: false,
  };

  handleClick = () => {
    this.setState((prevState) =>

Before we go any further here are some basics for typescript you need to know
Basic Types

// Defining variables with types
let age: number = 30;
let name: string = "John Doe";
let isStudent: boolean = true;
let hobbies: string[] = ["reading", "swimming", "traveling"];

// Defining functions with types
function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

function add(x: number, y: number): number {
  return x + y;
}

Interface

An interface is a TypeScript feature that allows you to define the shape of an object or class. Interfaces are often used for describing the structure of objects that will be passed as arguments or returned from functions. Here's an example of how to define an interface in TypeScript:

interface Person {
  name: string;
  age: number;
  email: string;
}

In this example, we define an interface called Person that has three properties: name of type string, age of type number, and email of type string.
Interfaces are often used for describing the shape of objects that will be passed around in your code. They can be extended and combined to create more complex types.

Type

A type is another TypeScript feature that allows you to define custom types. Types are often used for defining union types, intersection types, and other complex types. Here's an example of how to define a type in TypeScript:

type Car = {
  make: string;
  model: string;
  year: number;
}

In this example, we define a type called Car that has three properties: make of type string, model of type string, and year of type number.
Types are often used for defining more complex types that cannot be described by interfaces. They can also be used for defining union types, intersection types, and other advanced types.

Differences
The main differences between type and interface in TypeScript are:

Interface can be extended to create new interfaces, while type can be used to define union types, intersection types, and other complex types.
Type can be used to define computed properties, while interface cannot.
Type is more flexible than interface in some cases, because it allows you to define more complex types that cannot be described by interfaces.

Union

In TypeScript, a union type is a type that can represent values of multiple types. You can use the vertical bar (|) to combine two or more types into a union type.

Here's an example of a union type in TypeScript:

type MyType = string | number;

In this example, MyType is a union type that can represent values of either string or number.

You can use union types in various scenarios to make your code more flexible. For example, you might want to define a variable that can accept either a string or a number value.

Typing Arrays

To define an array type, you can use the following syntax:

let myArray: Type[];

Here, Type is the type of elements that the array can hold.

For example, if you want to define an array of strings, you can do the following:

let myArray: string[];

Now, myArray can only hold string values.

You can also define an array of union types by using the following syntax:

let myArray: (string | number)[];

Now, myArray can hold values of either string or number type.

Typing Objects
To define an object type, you can use the following syntax:

let myObject: { key1: Type1, key2: Type2, ... };

Here, Type1 and Type2 are the types of values that the keys key1 and key2 can hold. You can define as many key-value pairs as you want.

For example, if you want to define an object that has a name property of type string and an age property of type number, you can do the following:

let myObject: { name: string, age: number };

You can also define an object with dynamic keys using the following syntax:

let myObject: { [key: string]: Type };

Here, key is the name of the dynamic key, and Type is the type of values that the key can hold. This syntax allows you to define an object with any number of keys, as long as the key names are strings.

Generics:

Generics are a powerful feature in TypeScript that allow you to create reusable functions, classes, and interfaces that can work with a variety of types. The basic syntax for generics is to define a type parameter in angle brackets <>, which can be used throughout the function, class, or interface. Here's an example of a generic function that returns the first element of an array:

// Defining a generic function that works with any type
function identity<T>(arg: T): T {
  return arg;
}

// Using the identity function with a string
const result1 = identity<string>("hello"); // result1 is "hello"

// Using the identity function with a number
const result2 = identity<number>(42); // result2 is 42

Using Typescript in React
Now that we have the basics all known to us , lets see how we can put typescript magic in react and make it typesafe

User Events

Using Typescipt for giving types to different user events in React

Before we start giving types to the events, we need to import the React types. These can be imported as follows:

import React, { ChangeEvent, MouseEvent } from 'react';

Here, we are importing the ChangeEvent and MouseEvent types for use in our component.

Giving types to events

onClick The onClick event is used to handle mouse clicks on an element. Here's an example of how to give proper types to the onClick event:

function handleClick(event: MouseEvent<HTMLButtonElement>) {
  console.log('Button clicked');
}

function MyButton() {
  return <button onClick={handleClick}>Click me</button>;
}

In this example, we give the handleClick function a type of MouseEvent. This means that the function expects a MouseEvent object, with the target element being a button element.

onChange
The onChange event is used to handle changes in the value of an input element. Here's an example of how to give proper types to the onChange event:

function handleChange(event: ChangeEvent<HTMLInputElement>) {
  console.log('Input value changed:', event.target.value);
}

function MyInput() {
  return <input onChange={handleChange} />;
}

In this example, we give the handleChange function a type of ChangeEvent. This means that the function expects a ChangeEvent object, with the target element being an input element.

onSubmit

The onSubmit event is used to handle form submissions. Here's an example of how to give proper types to the onSubmit event:

function handleSubmit(event: FormEvent<HTMLFormElement>) {
  event.preventDefault();
  console.log('Form submitted');
}

function MyForm() {
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, we give the handleSubmit function a type of FormEvent. This means that the function expects a FormEvent object, with the target element being a form element.

Read More About available types here

Typing State in React

When building React components, it's often useful to define the shape of the component's state. This can help catch type-related errors at compile time, making your code more robust and easier to maintain. Here's how to type the state of a React component using TypeScript:

import React, { useState } from 'react';

interface State {
  count: number;
  message: string;
}

function MyComponent() {
  const [state, setState] = useState<State>({
    count: 0,
    message: 'Hello, world!',
  });

  const handleClick = () => {
    setState((prevState) => ({
      ...prevState,
      count: prevState.count + 1,
    }));
  };

  return (
    <div>
      <div>{state.message}</div>
      <div>Count: {state.count}</div>
      <button onClick={handleClick}>Increment count</button>
    </div>
  );
}

export default MyComponent;

In this example, we define an interface called State that has a count property of type number and a message property of type string. We use the useState hook to define the component's state, and pass in an initial state object of type State. We then use the handleClick function to update the state by incrementing the count property. We can access the state properties using state.count and state.message.

The as operator

The as operator in TypeScript is used for type assertions. It allows you to explicitly cast a value to a specified type, telling the TypeScript compiler to treat the value as if it were of that type.

const value: unknown = "Hello, world!";

// Error: Property 'toUpperCase' does not exist on type 'unknown'.
value.toUpperCase();

// Using the 'as' operator to assert that 'value' is a string.
const valueAsString = value as string;

// No error: 'valueAsString' is now treated as a string by the TypeScript compiler.
valueAsString.toUpperCase(); // "HELLO, WORLD!"

The as operator comes very handy in a lot of places when you are dealing with typescript in react

Utility Types in Typescript

Utility types in TypeScript are a set of built-in type transformations that can help you create new types based on existing ones. These types are defined in the utility-types module, which is included with TypeScript.
- Here are some common utility types:

Partial: This utility type creates a new type that has all the properties of T, but with each property being optional. For example:

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;

// Equivalent to:
// type PartialPerson = {
//   name?: string;
//   age?: number;
// };

Required: This utility type creates a new type that has all the properties of T, but with each property being required.
This is just the opposite of Partial

Pick: This utility type creates a new type by picking a set of properties of type K from T

interface Person {
  name: string;
  age: number;
  address: string;
}

type PersonNameAndAge = Pick<Person, "name" | "age">;

// Equivalent to:
// type PersonNameAndAge = {
//   name: string;
//   age: number;
// };

Exclude: This utility type creates a new type by excluding all the properties of U from T.

type Fruit = "apple" | "banana" | "orange";
type NonBananaFruit = Exclude<Fruit, "banana">;

// Equivalent to:
// type NonBananaFruit = "apple" | "orange";

There are other utility types also you can read about them here

Types of Components
In React, there are two main ways to define a functional component: using the React.FC type or returning a JSX.Element directly from the function.

// FC Type
import React from 'react';

type Props = {
  name: string;
};

const MyComponent: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

//JSX.Element Type
import React from 'react';

type Props = {
  name: string;
};

function MyComponent({ name }: Props): JSX.Element {
  return <div>Hello, {name}!</div>;
}

Both approaches are valid, but there are some differences to consider.

The React.FC approach has some advantages, such as automatically providing the children prop and making it easy to define default props and prop types. However, it also has some disadvantages, such as making it more difficult to define props that are required or optional.

On the other hand, returning a JSX.Element directly has the advantage of being more flexible and explicit about the component's return type. However, it also requires you to manually define default props and prop types, and it doesn't automatically provide the children prop.

Using Generics in React For Advanced Types

import React from 'react';

interface Props<T> {
  data: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>(props: Props<T>) {
  return (
    <div>
      {props.data.map((item) => props.renderItem(item))}
    </div>
  );
}

export default List;

In this example, we define a generic type T that represents the type of data that the List component can render. The Props interface takes a generic type T and defines two properties:

data: An array of type T.
renderItem: A function that takes an item of type T and returns a ReactNode.
The List component takes a generic type T and renders the list of items using the props.data.map() method. The props.renderItem() function is called for each item in the list, and the resulting ReactNode is rendered in the output.

Here's how you can use the List component:

import React from 'react';
import List from './List';

interface Item {
  id: number;
  name: string;
}

function App() {
  const items: Item[] = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  const renderItem = (item: Item) => (
    <div key={item.id}>
      <h3>{item.name}</h3>
    </div>
  );

  return (
    <div>
      <List<Item> data={items} renderItem={renderItem} />
    </div>
  );
}

export default App;

There is a lot of other things that typescript offers , you can read more about best practices and use cases of typescript in react here

I hope with this knowledge you will be able to tackle most of the problems of typescript and ace your react code with typescript superpowers and make it bulletproof.

For more such tutorials ,React out to me on
linkedin
Also keep an eye on my website for amazing content coming in
jayshahcodes

Typescript - Basics and use cases

Junaid — Tue, 01 Nov 2022 06:50:16 +0000

Typescript as we all know is the what was missing in javascript from ages - A static type checking system since javascript itself is a weakly typed language

With the help of typescript we can give type-safety to our js codebases like react.

So lets get started with the basics of typescript

First of lets cover the types of variables

A variable in javascript can be of these types

string
number
boolean
undefined *
null *
object

So lets cover them one by one

If a variable is going to be a string we can simple put it inclusively
item : string
This means that item is strictly going to be a string only
similarly with the other types e.g
item : number. / for number
item : boolean / for boolean

now these are the basic types , but for props that can be grouped together how do we create some thing that shows a group of types together

That is where type and interface comes into effect

Both are used to create a group of types that a component is going to get

e.g

type inputTypes{ value:string, placeholder:string, type:string }

Similarly can be done with interface as well but there are some differences

object type can be shown in interface but not in type
interface with same name in the same file gets merged but that is not for types - for them its just an error

now lets talk about creating types for objects and functions

Objects

Objects has two things to be taken care of i.e
Key part and the value part
so for objects we can set type as like this

[v:string]:string

you can use all the basic types as key and value types here

this means the key is going to be a string and the value is also going to be a string

Functions
Now with functions there are also two parts to it i.e

Parameters that it is going to be getting
and the return type that the function is going to be returning

So an example is going to be like this

type functionProps{
name:string,
age:number,
isAboveThirty:boolean}

function getAgeSection({name,age,isAboveThirty}:functionProps):string{ if(isAboveThirty){ return 'the person is above thirty' }else{ return 'He is below thirty' } }

what this means is the function is going to accept the types which are functionProps and the return type is going to be a string

If u don't provide a return type it is going to either infer the type from whatever u returned from the function , or if you don't return anything at all it will set it to void

These are just the basic types just to get you started with typescript

In the next post i will share how to use typescript in a react app with some advanced types like click events ,input events

What every junior developer should know

Junaid — Fri, 18 Feb 2022 04:24:12 +0000

Let me get this straight - Every developer is a junior developer all his life.

Get this as soon as possible.

Now let's talk about the actual junior developer , the people who are just to starting there career in development .

Let's talk about you guys.

First thing first nobody knows every thing "nobody" .

Not even the best dev in your company would know every thing.

So never feel like damn i don't know this , nobody does - just go ahead , research about the task you have been assigned - and learn

Ask as many relatable questions as you can . Don't ever feel like by asking many questions your seniors will judge you, they wont.

If i were them i would think of you as a good dev who actually knows when to ask for help because let's get this clear every one needs help at one part or another .

But what you should do is don't just go and ask for help all the time, do your research first.

Try to do it on your own but if you feel like giving up only then ask for help and when you ask for help explain it to them what you did and where do you got stuck.

That will give the seniors a clear idea that you have done a good job by researching a lot and now you are stuck somewhere and needs help.

Now when you are a junior dev you will be given tasks that are doable by you as per the team so try to solve them by your own first only when you feel like stuck only then go and ask for help.

Alright now
Being a junior dev you will be baffled with new and crazy technologies and being a developer you would be so pumped to learn new tech(if you are not , you definitely should ask yourself is this what you want to do in life?)

You will learn a lot of things , you should be open to it - maybe unlearn something to learn new things as done by the company.

I started my first company by only knowing the basics of react , had done some small projects
and just in one year i learned about

Typescript
Next js
Flask
Postgres

all these things and so much more things like patterns , code quality etc.

So try to learn as much as you can and you will be amazed by where you will be even after six months.

I wish you all the junior dev's best of luck - i know you will rock .

Interview questions for JS

Junaid — Fri, 26 Nov 2021 05:32:10 +0000

Javascipt is a great language and i believe every web developer in todays world should definitely learn it.

Not is it just awesome but also by just learning and understanding javascript you will be able to learn and use so many great frameworks that are buzzing in current job market
like React , Angular , Next JS etc.

So this is a gist of some of the questions and concepts that i have came across in my interview for some product based startups.

Basics

Basics of javascript should be clear very much , Things like arrays , objects , variables etc should be very clear before even you think of applying at any job as a js dev.

Arrays

Arrays are very important and since you will be using them so much in your day to day use case as being a web dev you should definitely learn all the things that can be done in js for arrays like
* Push
* pop
* shift
* unshift
also you should learn how we iterate over arrays

Also learn these :-
* Slice
* Splice

Objects

Every developer in his day to day life will definitely come across objects while working on a javascript project .
So every interviewer expects you know the basics of Objects.

Try to understand them and apply them in any of your projects.

Objects will also be used while you work on things like json all that is is a big blob of object so you have to work with them .

So try to understand all related topics to objects
Things like how we add an item to an object

How to iterate through an object
How can we delete an item from an object

Try to also learn things like object.keys , object.freeze etc.

More Good Topics

Every interviewer will ask you questions related to these questions so its very necessary that you know these concepts and can explain them in detail

Whats Execution context in js.
Whats a promise and how to create one .
What are callbacks
whats async/await used for
Difference between == and ===
whats call , apply and bind .
Difference between simple functions and arrow functions
Whats 'this' in javascript
What are closures
whats memoization
what is an IIFE(Immediately Invoked Function Expression).
Difference between let and Var.
Different stages of a promise.
Difference between setTimeout and setInterval

There are other topics also which you should give a good go before going for the interview , not everyone will ask you these but its good to know them

Whats prototype and prototypal inheritance
what are anonymous functions
Event bubbling and how do you prevent that.
Whats promise.all
whats a polyfill.

There are many many topics in javascript that you would to know but for a fresher js or even for 1+ year of experience these are the most asked questions .
You can also checkout the greats series by Akshay Saini which explains all the javascript concepts in great detail.

All right , i guess this will be hopefully helpful for any one out there .

Feel free to reach out to me for any thing over email
junaid shah

Create CI/CD pipeline using jenkins

Junaid — Sat, 28 Aug 2021 05:16:42 +0000

For all the people who do not know what jenkins is , let me explain it to you

Jenkins is a CI/CD tool that you can use on any project of yours or your companies to make your lives a little easier .
What it does for you is a whole lot of things
just for example

lets just say you want that whenever a team member pushes anything to a specific branch of your project all unit and integration tests should run first hand .

You can do that with jenkins .

You want that everytime a push is made to the repo it gets re build , jenkins got you .

CI/CD is very powerful tool for any developer to have in this era and there are many tools that let you do this , Jenkins being one of them.

Ok , so now you understood what jenkins is , lets just use it in our project and try to create a pipeline.

Go ahead and download jenkins.
Once downloaded go to the directory using your terminal
once inside the terminal , type the command Java -jar jenkins.war
This will start the jenkins on localhost:8080 and will also give you the password autogenerated
copy this password and go to localhost:8080 and you will be greeted by this screen
Use the password you just copied from the terminal here
If you want you can also create a user (we are not going to do that here).
so every thing set up this page will appear in front of you(you wont be having the multitesting in front of you )
Here what you can do is click on new item and this screen will be visible to you
Here give your project a name and click on multipipeline and click ok
You will be greeted with a new screen here , that has a bunch of options to configure but what we want is we want to hook it up with our github repo . So first of all create a create a new github repo and make sure you create a file namely Jenkinsfile in it .
Inside that file paste this code

pipeline {
    agent any

    stages {
        stage('Build') {
            steps {
                echo 'Building..'
            }
        }
        stage('Test') {
            steps {
                echo 'Testing..'
            }
        }
        stage('Deploy') {
            steps {
                echo 'Deploying....'
            }
        }
    }
}

Once this is done take the https github url from the clone like this
Ok perfect , now go back to your jenkins local host and from all those options find Branches > Click on Add Source and click on git

Now paste your github url that you copied over here like this
perfect 👌 , now click on save .

What it will do is it will scan your branches by itself and run the tests for you .
By this point of time you are basically done but just to make it a little interesting what you can do is push anything to your code base and then come to your github and click on scan multibranch pipeline now .
This will force it to rescan the code and in any branch where it see the change it will re build that branch (On a real life scenario you dont have to do it manually , it will do it yourself via a github hook that will be made inside of the github , but since its on localhost git hub wont allow that )

Ok perfect you are done and can go ahead and learn more about the code in the jenkins file here .
You can do a lot of cool stuff with it , run cron jobs , run tests etc which is outside of the scope of this tutorial.

Ok , i hope you guys have learnt anything new from this tutorial .
Feel free to reach me at my Linkedin

Want to encourage me to create posts like this more
Buy me a coffee

Whats new in Next Js 11

Junaid — Thu, 19 Aug 2021 17:28:26 +0000

Lets make the web faster with Next Js 11.

Next Js people are working really hard and getting some amazing features to market in the product .

The new features that are included are

Conformance
Improved Performance
next/script
next/image
Webpack 5
Create React App Migration (Experimental)
Next.js Live

Lets talk about all of them one by one

Conformance

Conformance is a system that provides carefully crafted solutions and rules to support optimal loading and Core Web Vitals, with further additions coming to support other quality aspects like security and accessibility. These solutions free your team from memorizing all the latest rules for optimal loading performance, while still giving you the flexibility to make the right choices for your applications.

What conformance basically allows developers is it allows them to follow rules while writing code even if the developer will forget to use some good practice this system will automatically do it for them.

It will also support Eslint out of the box.
In order to use it you need to run
npx run lint

Performance

Since Next.js 10, next js team has been obsessed with further improving the developer experience of Next.js.

Next.js 11 includes another optimization to Babel to further reduce the startup time. They have created a brand new implementation of the Babel loader for webpack, optimizing loading and adding an in-memory config caching layer. In practice, this means no change for developers but will ultimately mean a faster development experience.

next/script

This is a very great feature that comes in next js 11 .
What this lets you do is it lets you add scripts to your site however you want like for example
If there is a script that you want to run even before the page becomes interactive you can do that .
If there is a script that can be delayed and can run after the page has been loaded it will allow you to do that as well.

very cool and useful feature.
To do this you must use the next/script component and then you can use the strategy

beforeInteractive: For critical scripts that need to be fetched and executed before the page is interactive, such as bot detection and consent management. These scripts are injected into the initial HTML from the server and run before self-bundled JavaScript is executed.

afterInteractive (default): For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.

lazyOnload For scripts that can wait to load during idle time, such as chat support and social media widgets.

<Script
  src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

next/image

Image component has improved quite a lot and this is also a useful feature and would be used by many developers globally.
This update for the image will let you

use a placeholder for the image while it is being loaded (blur placeholder).
You no longer need to give the height and width for the image now. Example <Image src="abc.jpeg" alt="some very cool picture"/>

For using the blur you can do placeholder="blur" and it will automatically blur the image till the time it will be loaded
Example
<Image src="apple.jpg" alt="an apple a day keeps doctor away" placeholder="blur"/>
[Example of the blur]
https://nextjs.org/static/blog/next-11/Placeholder.mp4
Next.js also supports blurring dynamic images by allowing you to provide a custom blurDataURL, which is provided by your backend.

webpack 5

Another great feature allowing devs to upgrade to webpack 5 hassle free.
They worked closely with the community to ensure a smooth transition to webpack 5, over 3,400 existing Next.js integration tests run on every pull request with webpack 5 enabled.
They also said that if your application has a custom webpack configuration, we recommend following the following steps

CRA Migration(Experimental)

Since many people were switching from Create React App to next js so these people came up and made the journey effortless (still working on that but you get it)

To help developers convert their applications to Next.js, they introduced a new tool to @next/codemod that automatically converts Create React App applications to be Next.js compatible.

To get started migrating your Create React App project use the following command:
npx @next/codemod cra-to-next

Its still a experimental feature.

next js live

Next js live is a very very cool feature that allows users collaborate on the fly without using any other tool .

By leveraging cutting-edge technology like ServiceWorker, WebAssembly, and ES Modules, Next.js Live puts the entire development process in the web browser.

This opens up possibilities like collaborating and sharing instantaneously with a URL, without a build step. For developers, this means a faster feedback loop, less time waiting for builds, and real-time peer programming and editing within the browser.

Want to encourage me to create posts like this more
Buy me a coffee

SQL Joins you should know

Junaid — Sat, 14 Aug 2021 14:41:20 +0000

We all as developers know what a database is , right
Its a way of storing your data whether it be text , images , audio or video databases can be used to save all kinds of data and over the years databases have evolved from having just SQL to now having databases like Mongo db .

But the basics of database can be learnt every time in order to better understand how databases work.

So we know that a table is something that stores the table in a particular structure called columns

So e.g we can have a table for login where in we can store the email and password of the user to authenticate him every time he tries to login and so on

Joins come into play when we have to join(as the name suggests) two tables in order to get a table that has some common ground(that we tell in the join itself ).
So the most used joins that there are right now are

Inner Join (also called as simply JOIN)
Left Join
Right Join
Outer Join( also called FULL OUTER JOIN)

So lets go over each one of them one by one

Inner Join

Inner join also can be called as simply “join” is a way getting data out of two tables that would be common among both the tables.
This can be better understood by an example
Lets just say we have a facebook table Like this

and lets say we also have another table of instagram likes for some users

Now the way we would use inner join on these two is like this

SELECT * FROM facebook JOIN instagram ON facebook.name = instagram.name

So the way this works is we are telling SQL to join both the tables and create a new table that has all the entries that are common to both these tables and satisfy the criteria that is facebook.name = instagram.name , everything else will not be included in that table.

So katie and kim will not be included in the join table.
The Inner Join table will look like this then

Left Join

Left join is another join that we can use to join the tables in a way that all the values of the left table are going to come in the joined table irrespective of if they have a match or not .

If they don't have a match a null value is passed in that column

Let's just take the previous example again.
If we use a left join on those two tables , the query will look like this

SELECT * FROM facebook LEFT JOIN instagram ON facebook.name = instagram.name

Take a moment and think how the resulted table will look like .
OK , so the table will look like this.

Ok, so you can see that the first table in the query thats Facebook , its all columns are put in the table where as in the Instagram table , since there was not any match for that column of Facebook name thats “kim” , so the column are put as null.

If you would have written the query as Instagram first and then Facebook , then the query would have done the opposite of what it did here .

It would have taken the Instagram table put all its columns and when there would have been no match for any column the field would have been put as null.

The opposite that i talked about here is what can also be called as RIGHT JOIN.

Right join is exactly what a left join is , but opposite .

What it will do is take the right table instead of left and do the same thing that it did in the left join .
Right join can also be written as a left join as well (if you can visualise it , you get it).
Lets do i Right join on the same exact query we did for the left join

SELECT * FROM facebook RIGHT JOIN instagram ON facebook.name = instagram.name

Now the table will look like this

This is the exact same as like this

SELECT * FROM instagram LEFT JOIN facebook ON facebook.name = instagram.name

So as i said left join can also be written as right join and vice versa.

FULL OUTER JOIN

FULL OUTER JOIN is a way of joining tables such that both the tables columns will be available and whenever there is no match in the next column a null is placed for that .
Lets take the previous example and do a full outer join on that one

SELECT * FROM facebook FULL OUTER JOIN instagram ON facebook.name = instagram.name

So the joined table will look like this

So as you can see in the joined table whenever there is no match a null is placed in the adjacent column for that .
OK , so thats about it for JOINS in tables .
I hope you guys got some value out of it and learnt something new today.
You can always reach to me at Junaid shah

Smart VS Dumb Components

Junaid — Wed, 11 Aug 2021 09:19:40 +0000

I was giving an interview some days back and every thing was going great .

Then the interviewer asked "Can you tell me the difference between a smart and a dumb component? "

I had although worked in a product based company for about 3 months then but had no idea what makes a component smart or dumb.

Obviously you don't have to go that road because today i am going to share with you what is the difference between a smart and dumb component in react.
This question will not be asked to a junior but i believe everyone should have a fair understanding of the concepts.

So lets get going

Dumb Component
Dumb component as the name suggests is "dumb"
meaning that it doesn't care about anything just itself.
It does not change any state or anything else .
Its just dumb
Dumb components are mostly made just for the UI based work.
Here is an example of a Dumb Component

<input label={label} type={type} onChange={onChange}/>

As you can guess that all the things that it needs that are changeable like label or type or a onchange callback is given as props and all it does is show the UI.
You can use it wherever you want to
You just have to pass the props it has and it will work like a breeze.
Smart Component

Smart components (or container components) on the other hand have a different responsibility. Because they have the burden of being smart, they are the ones that keep track of state and care about how the app works.

Smart Components has there own state inside of the components itself.
Its can also then send down the same state to the dumb components so they can work as expected without worrying about the state.

A good example of a smart component can be the root of the app which handles a lot of the state and can also pass along the state to other components as well.

So thats the comparison between smart and dumb components .
I hope you guys got something to learn from it .

Want to encourage me to create posts like this more
Buy me a coffee

Creating a CRUD App using Flask and SqlAlchemy

Junaid — Wed, 28 Jul 2021 05:00:28 +0000

Flask is a python library that lets you create dynamic webapps using python.

Flask has great powers that we will be looking into in a minute.

In this tutorial we will be creating a simple Todo App using flask along with sqlite using our ORM i.e flask_sqlalchemy and jinja2 for using great powers inside of the html.

ORM means object relational mapping meaning that you get to interact with the database using your language of choice instead of using SQL queries .

ORM also comes helpful in a way that if you in the future would have to change your database for the app you do not have to write the whole schema for the database again .

you just have to change the database url and its done (easy -peasy).

OK , let's get started with the code.

First of all what you need to do is Create a folder with your app name
e.g FlaskTodoApp

inside of the folder create a new folder called venv

We are going to create a virtual environment for the flask to run inside of.
open up your project in vscode and go the terminal
Type

python3 -m venv venv

then type for mac users

. venv/bin/active.fish

For windows users type

venv/bin/active

and your environment will be created .
Now create two more folders inside of the project but outside of the venv folder namely templates and static

Template is where all the templates i.e html css files will be saved
and if you have any static file like an image or anything that will be saved inside of the static folder.
Your folder structure should look like this

now create a file namely app.py and type this code inside of that:-

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():   
    return "<p>Hello world from flask</p>"

if __name__ == "__main__":
    app.run(debug=True)

If you look closely there is a lot going on here

first the @app.route is used to declare a route for the webpage ("/" means the index page i.e abc.com)
Then we are telling the app to run in debug mode(until we create the app fully then we can go to production , don't push this to production).

You can test this app by going to the terminal and typing
python app.py

and it will show you where it is running e.g http://127.0.0.1:5000/ is the default .
Head over to there and see magic 🥳.

Great so we have just made a simple webpage which shows a p tag inside .
But what if we want to display a whole webpage with some cool images , text , headings and all that .
Thats where the built in render_template of flask comes into play.

create a file inside of your templates e.g home.html
write whatever html you would want to show to the user
Head back over to your app.py
Inside of that file the code will look like this now

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def hello_world():   
    return render_template('home.html')

if __name__ == "__main__":
    app.run(debug=True)

Now head over to the url again and refresh the page and see the magic happening

If your webpage is working properly thats amazing ,
Congratulations to you 🥳🥳.
First part of the app is done .
Now for the database part we will be using sqlite for the database and flasksqlalchemy as the ORM as already discussed and for the data to show to the user we will use Jinja2 for that.

So let's get started.

First install flask_sqlalchemy by
pip install flask_sqlalchemy
and it should be installed for you.

Now the boiler plate for creating a database connection is as follows

from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db=SQLAlchemy(app)

type this code in the same app.py file of yours.

now for creating a table in the database we need to use classes in python to create a model like this

class Todo(db.Model):
    sno=db.Column(db.Integer,primary_key=True)
    title=db.Column(db.String(200),nullable=False)
    description = db.Column(db.String(200), nullable=False)
    def __repr__(self) :
        return "{} is the title and {} is the description".format(self.title,self.description)

Here you can see we are creating a class for the todo table that has 3 columns:-

S.no this will act as a primary key and will be auto generated by the database
Title of the todo
Description of the todo.

Great , now let's create the database for the first time.

Go to your terminal
type python and hit Enter
now type from app import db and hit enter
then type db.create_all() and hit enter
you should see the todo.db file created inside your project since we gave the database url as local file

Great if everything works perfectly then congratulations, your database has now been created .

Your Database is created
Your table is created with the columns you wanted to have .
Perfect.

Now lets create a form inside of your home.html to upload the data to the database.

  <form action="/" id="formSubmission" method="POST">
    <span>Title</span>
    <input type="text"name="title" placeholder="enter your Title" id="name">
    <span>Description</span>
    <input type="text"name="description" placeholder="Enter your description" id="description">
    <button type="submit">Add Todo</button>
  </form>

whats important here is you give name attribute to your inputs
Lets also create a table to showcase the todos coming from the database

 <ul id="data">
   <li>Title</li>
   <li>Time</li>
   <li>Description</li>
</ul>

We will be using jinja for loop here to show the data but first lets get the C(create) part working.

So lets create our end point for the creation of data in our database.

@app.route("/",methods=['POST'])
def main_page():
    if request.method=='POST':
        title=request.form['title']
        description=request.form['description']
        todo=Todo(title=title ,description=description)
        db.session.add(todo)
        db.session.commit()
    alltodos=Todo.query.all()
    return render_template('index.html',todos=alltodos)

For adding values in your database the command is db.session.add(your_data_object_here)
It wont get saved if you do not commit it so db.session.commit()
Perfect
Here you can see that we are checking that if the request coming is a post request then get the data from the inputs and create a todo object with the details you want to save and then add to the database.
If the request is not a post request then get all the todos that are saved in the database and send them over to the webpage using jinja . (here we have named it todos that we will be using in the webpage ).
Now head over to your webpage and do the following changes

 {% for user in todos %}
     <li>{{loop.index}}</li>
  <li>{{user.title}}</li>
     <li>{{user.description}}
         <div class="buttons">


      <button><a href="/delete/{{user.sno}}">Delete</a>
<button><a href="/update/{{user.sno}}">Delete</a></button>

              </div>
     </li>

{% endfor %}

This is for loop that is given to us by jinja and we can use it.
We have also put the buttons for deleting and updating the todo but lets ignore that for now.
So you can see we extracted title and description from our todos array that we are getting.
loop.index is the index just as we have index in any loop in any language , this is just used to give a number to the todo.

OK 👍 Most of the heavy lifting is done.

Lets look at some of the commands of sqlalchemy that we can use

we already saw

db.session.add()
db.commit()

We also have

db.session.filter_by(criteria to filter e.g sno = 1) This is used to filter the database based on the criteria we provide e.g filter the database and get me only the row where in we have sno = 1 and it will give it to you. Now if the database has more than 1 with the same criteria it will give you all of that , so we can chain it up with .first() in order to get only the first instance of it.

Then we also have db.session.delete(todo_to_delete)

Ok ! so upto now if you run the code you should be able to view all the todos that are there and also save the new todos to the database.

Now Let's delete them.
For deleting any todo you need something thats unique to it only e.g here we have the sno thats a primary key and that will be unique to every todo.
Ok lets create the end point for deletion.

@app.route("/delete/<int:sno>")
def delete(sno):
    deletetodo = Todo.query.filter_by(sno=sno).first()
    db.session.delete(deletetodo)
    db.session.commit()
    return redirect("/")

Easy , right

Ok so here you can see that the end point needs a sno that would be an integer value and then we pass that to the function

What we then do is query the database and then filter out the exact todo from the database

Then pass that todo to the delete function

Then we commit the changes

Great ! Once all the changes would be saved we will be redirecting the user back to the index page using redirect module imported from the flask

Sweet ! you now would be able to delete your todos as well .
Now we are able to

Create the todo

Delete the todo

And View All the todos

Now in order to Update the todo , its very easy as well
Let me break it down to points for you

First create the end point for the update where in we will get the sno of the todo (the same way we did for delete)
Then create a new webpage for the update todo form
send the todo that we will get from the end point to this page just as we did in the view end point for all todos.
Then once you get the data there , once the user clicks on update send the request to the same endpoint but using a POST request .
And in the end point we will check that if the request is a post request update the todo and then redirect the user back to the index page.

Lets code it.

we already have the button for the updation of the todo .so lets create the end point.

@app.route("/updatetodo/<int:sno>",methods=['POST'])
def update_todo(sno):

     if request.method == 'POST':
        updatetodo = Todo.query.filter_by(sno=sno).first()
        title = request.form['title']
        description = request.form['description']
        todo = Todo(title=title, description=description)
        updatetodo.title=title
        updatetodo.description=description
        db.session.commit()
        return redirect("/")
    updatetodo = Todo.query.filter_by(sno=sno).first()
    return render_template('update.html',
updatetodo=updatetodo)

ok so the end point is created.

Lets create a new file namely update.html for the update todo and put this code inside(along with the boiler plate for html obviously)


<div class="container">
  <form action="/updatetodo/{{updatetodo.sno}}" id="formSubmission" method="POST">

    <span>Title</span>
    <input type="text"name="title" placeholder="enter your Title" id="name" value="{{updatetodo.title}}">
    <span>Description</span>
    <input type="text"name="description" placeholder="Enter your description" id="description" value="{{updatetodo.description}}">
    <button type="submit">Update</button>

  </form>

Ok , Great

So now when you click on the update button the user will be taken to this page with the fields already filled with the existing data .
And on clicking the submit the post request will be sent to the end point and the details i.e title and description will be changed to the new data.

** If you have made it to this point congratulation ✨✨✨.***
There is a lot that can be done afterwards but i will leave you guys to it.
I hope you guys find it useful .
Thankyou so much .
Keep coding

Want to encourage me to create posts like this more
Buy me a coffee