DEV Community: Lakshya Khera

Pages and Blocks in DBMS

Lakshya Khera — Fri, 19 Jan 2024 23:02:02 +0000

Hey there! I'm not so active here cause I don't write things that often, but here we are.

Been spending a lot of time around databases and everything around them, so I wanted to understand how data gets read and it's crazy how everything is orchestrated.
Usually pages and blocks are called interchangeably which pissed me off.

Disclaimer: I'm not an expert on this subject and might make mistakes.

We'll consider a scenario where we're dealing with a Relational Database (eg: Postgres)

A Table row is stored as tuples in disk
Remember this, what I mean by tuple is just an array of your entries in a row.

But of course, you can't store all these rows as it is on disk. So these rows are bundled together in Pages (database)

A page can have a bunch of rows next to each other with increasing order of IDs.

Let's not waste time around the technicals of the page.

Now whenever you read a row, you're fetching a whole page! (It's mainly due to efficiency. Disk I/O operations are expensive (time-consuming)) and posts this page in its cache (RAM) so in case if you re-read it you don't have to search the disk.

-- Easy till here --

Now storing this page on disk requires more work, we can't just store all pages as it is cause OS handles a lot of other things (READ about fragmentation)

So these pages ( end up breaking up into smaller chunks into a block (around 2kb).

Block is a logical unit of data in OS, in other words, OS tells with data as blocks. So it's part of file system jobs whenever to combine all these chunks of blocks into a page/file.

-- Still easy -- Cause we're not deep diving it.

But this physical disk? In that realm there are no blocks, but pages or sectors.

So There is a module called Disk Controller which puts these blocks into a disk and it's their job to take care of everything.
Here in simple terms, this controller maintains an LBA (Logical Block address) to Physical address mapping.

And on fetching this gets cached in the File system.

--- That's it --

I haven't deep-dived on things work but I suggest you should.
Feel free to reach out, and follow my socials!

Types of scans in database

Lakshya Khera — Wed, 13 Sep 2023 20:23:14 +0000

Here is a micro blog on types of scans in database, this is something which stays under the hood for most of us but it's a good idea to know what happens.

So whenever we fetch something from our db there are three ways for db engine to search the data based on few conditions.

Let's consider an example,

CREATE TABLE Employees( id int primary key not null, name text not null, department text, age int not null );

I have a employees table and there are lets say there are 1 million rows and I decided to get those employees whose age is between 28 to 41.

select * from employees where age>=28 and age<=41;

As in this case db has to go through each row one by one and check if the row satisfies the condition.

TOO SLOWW

What if I have an index on age.

CREATE INDEX age_idx on Employees(age);

Now I have a structure apart from actual db data where I can lookup from and then retrieve those data which satisfies the condition. This is index scan.

Easy and fast? What if 90% of my data satisfies this condition or maybe I want those employees who belong to IT department.💀

select * from employees where age>=28 and age<=41 and department='IT';`

It'll be very slow to retrieve from heap(actual data) one by one.

Here comes bitmap scan, in this case db engine creates a bitmap, it's an array where indices refers to row and the values can be 0 or 1. 1 means this row needs to be fetched and 0 means nope.

The bitmap gets created first and then all data gets fetched at once. It's fast!

So whats the difference between bitmap and index scan.

Index scan is very efficient when the filtered data is very small and specific so we can quickly fetch from index one by one.

Bitmap scan can be helpful when we have more conditions and there are too many rows which needs to be fetched.
A great example here is let's say we have index on department and age column.

create index age_idx on Employees(age);
create index dept_idx on Employees(department);

Now we need to fetch those rows where age is between 28 and 41 and also the department is IT.

Here we can create bitmaps on the both indexes and run an AND operation over both bitmaps to get those rows which satisfies both of the conditions.

Thats it!

Sorry for such long post, wanted to keep it a micro blog but I failed :P

Advance CSS resources

Lakshya Khera — Tue, 27 Oct 2020 14:10:26 +0000

So recently I realised that I am still little weak in CSS, when it comes to advanced concepts, including animations, building very complex pages and all. I looked over the internet and all I find the same things taught by everyone.

Example:

nth-child
::before , ::after etc.

Any advice where should I look over and what should I do.

Thank you!

Cheatsheet to React Lifecycle hooks Part-3

Lakshya Khera — Thu, 22 Oct 2020 18:08:01 +0000

So, here is the final blog of the series, hope you've learned something out it.

Anyway, links to my previous blogs:

So, let's end with lifecycle hooks in functional components and they're pretty clean and easy to grasp.

To add these lifecycle hooks we'll use useEffect from react package.

import React, {useState, useEffect} from 'react';

Now in our functional component, we can use it this way.

useEffect(() => {
 console.log("Use effect go brrr!");
});

It's pretty easy to understand, that the callback function will be executed when the hook is trigged.
But when will it be executed?
In this case, in all events.

How we can utilise to trigger on specific change ?

In the previous example, if I add a second argument of array type then the hook will be triggered whenever the element placed in that array is changed and this element can be props, state or anything.

useEffect(() => {
 console.log("Use effect go brrr!");
}, [props.a, state.b]);

Here, the hook will only be triggered whenever props.a and state.b updates.

So, what about when we want the hook to trigger on mounting only

We can place an empty array in the second argument and this will make sure the hook only runs on mounting.
This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.

useEffect(() => {
 console.log("Use effect go brrr!");
}, []);

Okay! We can do this, don't give up!

What about cleanup or when the component unmounts

So, in our effect, we can return a function and it'll run after the first execution of the effect and before every other render cycle.

Yeah, it is what it is.

But we can utilise it in a lot of ways! Seriously!
In our previous explanation, this return function will be called before useEffect method except the first when useEffect is called, which means we can use it for cleanup work. ¯\_(ツ)_/¯

But what about the case when [] is passed in second argument, which means in this case the return method will be executed when the component unmounts!

So, this is the end! I'm tired now but yeah don't let my hard work fade away. Make sure you read the docs and try things out! <3
Happy coding!

Cheatsheet to React Lifecycle hooks Part-2

Lakshya Khera — Thu, 22 Oct 2020 16:02:46 +0000

Hey there, hopefully, you've read the first part of the series and if not go and read.

So, now we're discussing ** Update lifecycle hooks on props and state change.**
So, let's point out in what ways you can update a component,

Change state
Change prop

So react provides several hooks which can be accessed to handle these changes, so we're going to discuss each of them one by one.

getDerivedStateFromProps, as discussed in Part-1, this hook runs in both mounting and updating cycle, and it takes props and state as the arguments so the developer can update state according to change in props and most importantly it should return an object to update the state, or null to update nothing also make sure not to do side-effects here.

static getDerviedStateFromProps(props,state) {
 //update the state if required 
 return state //or null
}

shouldComponentUpdate, so here is a great hook that we can utilise to improve performance of our application, let's say we props get updated but we don't want to re-render the component for some reasons, so here we can utilise this hook and return a boolean true to continue updating, false to abort, this way we can reduce unnecessary re-rendering thus improving performance. Also, don't do side-effects here.

Also, interesting takeaway, the nextState comes from the getDerviedStateFromProps method.

shouldComponentUpdate(nextProps, nextState) {
 if(/*Some checks*/) {
   return true
  }
return false
}

render, as we discussed we know what we're gonna do here Prepare your JSX.

render() {
  return <div>I love React</div>
}

Update child components, nothing here.
getSnapshotBeforeUpdate, this is an interesting hook, here we get last-minute snapshot of the component before the update, which means previous props and state which are passed as arguments in it so that we can do some computation if required. A snapshot value (or null) should be returned.
The best use case is we can use it to store user position in an application, so after the update, we can scroll it to that position automatically hence improving user experience.
Still not a goot place for side effects.

getSnapshotBeforeUpdate(prevProps, prevState) {
  // Code here 
}

componentDidUpdate, reaching the end, this is the best time for side-effects because our application is updated and we do anything we want. Protip: Try to keep side-effects async, so it won't mess up with react lifecycle. Also, don't update the state here, it'll cause re-render.

componentDidUpdate(prevProps, prevState, snapshot) {

}

What about when the component unmounts or get destroyed?
Here we can use componentWillUnmount, this will be executed just before the component is unmounted and this is best for cleanup work,don't update state here cause it'll never be re-render.

Here it is the end of part 2, hope you enjoyed it! I'm extremely tired so will write part 3 later. Anyway happy coding! Please like and follow <3 it'll motivate me.

Cheatsheet to React Lifecycle hooks Part-1

Lakshya Khera — Thu, 22 Oct 2020 13:31:40 +0000

I know this is the topic you can find anywhere so what's the point of writing it again?
What if I tell you this is the only post or article you would need to understand react lifecycle hooks and for revision as well.

So, here is the backstory I need to brush my knowledge in React and I started revising lifecycle so I thought I should write a blog and if I need to come back to something I can just look over it.

So, I'm writing 3 part tutorials on React lifecycle hooks.

Component creation hooks in class-based components
Component update hooks on props and state change in class-based components Link
React hooks in functional components Link

What is React lifecycle hooks?:

So every react component goes through a lifecycle(creation, rendering, updating) and react emits certain methods which can be overloaded, so we can(as a developer) use it for anything(Spoiler: with some restrictions).

As in every other tutorial, I'll show you this cool flow diagram! :D

This is lifecycle flow for a class component (yes, now functional components have lifecycle hooks as well npm update react please.)

Before diving,

Side effects are methods which have no relation with the application as it calls 3rd party libraries or API which lives outside the application ecosystem.

Component creation

So, when a component is created it goes through some phases including constructor to ComponentDidMount and we'll be discussing every method in detail and what kind of action you should take in it. Bear with me :D

First constructor is called, it takes props as its argument and injects it to the component.
- Do: Prepare state, according to props if you want so.
- Don't: Side Effects or anything which might take the time or fail as it'll mess up with the application or impacts performance.
Then, getDerivedStateFromProps is called, this is called whenever props are changed, so it exists both in creation and update cycle, as it's doesn't depend on the component instance we use static before it (i.e static getDerivedStateFromProps). It should return an object to update the state, or null to update nothing.
- Do: Sync your state according to props.
- Don't: Side effects
Now render method is called, and this is the method which returns JSX so what you should do in it? Structure your JSX nothing else!
Now Childs Components are rendered! The same cycle is followed in children and so on.
Now ComponentDidMount is called, everything is done! Congratulations! Now you can call side effects but don't update state it'll re-render the component.

That's pretty it! Hope you enjoyed it :D, please like and add me up on Twitter and Linkedin it does motivate me a lot. Ps: I need motivation these days :')

References:

React Docs

Vue + Typescript = 🔥

Lakshya Khera — Wed, 22 Apr 2020 04:55:03 +0000

So, I wrote an article about Vue using Typescript on Medium link, so thought to write about it here.

I am a huge fan of Vue and recently I joined as an intern at an organisation where they're using Vue + Typescript so after a week of hustle, I finally have an idea how to get started.

So Vue + typescript works on class-based components, and use decorators to add functionality in class, to get started let's build a simple component.

We used Component decorative from 'vue-property-decorator' and used it over the class which extends Vue and exported it.

What about the state, well we can add an attribute and it will work as an state property.

Now let's add props and a child component.

Here, we used Prop decorator and simply added to an attribute in the component, and with the power of typescript's static typing, I can add datatype as well.

Now, in the component decorator, we can add components property where child components can be registered.

I talked briefly talked over other decorators over my medium article, and here I'm adding a link for a practice project I build using vue + typescript. Link.

Twiliohackathon Project - ConnectShop

Lakshya Khera — Fri, 03 Apr 2020 21:26:16 +0000

What I want to build

Hey, this is my first blog for Twiliohackathon, and our first milestone is brainstorming an idea, UI/UX designs and codebase structure.

Before talking about the idea, let me share you about me and my team partner Uphaar, we both live in same city and due to lockdown we're facing issues like not access to the market or nearby general store because most of the time they're closed and we're not allowed to go outside unless necessary.

To tackle this, we thought to build an application which can connect consumers to shopkeepers so they can track which nearby shops are opened and contact them and also tells consumer is there rush in the shop or not so the user can go out accordingly.

We can integrate Twilio in the application in the following ways:

Adding OTP verification for users.
Push SMS notification for the consumer whether the shop is opened.

We decided to keep the tech stack:

React Native
NodeJS
MongoDB

Designs

For now, I'm building the designs and here goes the link.

CodeBase

We will setup Github repository and build proper database designs for same.

Let me know your opinion on our idea.

Thankyou! <3