DEV Community: Akram Narejo

Props Drilling In React?

Akram Narejo — Sat, 30 Oct 2021 10:22:35 +0000

what's props drilling?
why to avoid it?
How to dot that?

We are going to answer above questions to know about props drilling.

What's props drilling?

Passing props within a tree of components is known to be props drilling. Tree of components means when you pass prop from the root component App to the parent component Header of the child component Search.

App(props) --> Header(props) --> Search(props)

code for above example, shows how placeholder text is set upon the prop passed from root component.

import React from 'react'

export default function App(){
   return(
       <div>
        <Header text="Search Movie..." />
       </div>
   )
}
function Header(props){
    return(
        <header>
            <Search text={props.text} />
        </header>
    )
}
function Search(props){
    return(
        <nav>
            <input 
                type='text'
                value=''
                placeholder={props.text}
            />
        </nav>
    )
}

keep drilling until you reach the bottom.

Why to avoid?

Before knowing the answer, look at the following picture.

It seems like every next doll is the child of previous doll, and you can hide all the dolls under the largest doll(root).

What if we want to put the coins in the last doll or in between? here's the catch! we will open the every doll until we open the wanted doll.
So, is the case with components that to change the props in last component we will pass props through every parent component and re-render it. which is quite expensive. that's why we need to avoid this props drilling.

How to avoid?

hmmmm, how to avoid? Well what the logic says is that there should be a global value which must be accessed wherever wanted, right! That's how it is also resolved.

Need 3 things

Context component
Provider
Consumer

Context API is available to help us to provide and consume the context. Components accessing context will only be re-rendered.
Context component will be created by a built-in function of React React.createContext() function by default takes a value, whatever you provide it.

Create context component

Make a new file, then export and import it.

const Context = React.createContext('default value')
export default Context

Providing

import the context first, then provide to component you want, suppose we are providing to Header component.

//import Context
<Context.Provider value='Search Movie...'>
   <Header />
</Context.Provider>

Consuming

well context can be consumer by two way, either by React.Consumer or useContext() hook.
let's see the both

Context.Consumer

//import Context first, if it's a separate file.
<Context.Consumer>
{context => <input type='text' value='' placeholder={context} /> }
</Context.Consumer>

useContext() hook

you have to import {useContext} or use as React.useContext, it takes Context as an argument and returns the value.

<input type='text' value='' placeholder={useContext(Context)} />

Complete code

It's a functional component code so I have used hook.

import React, {useContext} from 'react'

const Context = React.createContext('default value')
export default function App(){
   return(
       <Context.Provider value='Seach Movie...'>
            <Header />
       </Context.Provider>
   )
}
function Header(props){
    return(
        <header>
            <Search />
        </header>
    )
}
function Search(props){
    return(
        <nav>
            <Context.Consumer>
                {context => (
                        <input 
                            type='text'
                            value=''
                            placeholder={context}
                        />
                    )
                }
            </Context.Consumer>
        </nav>
     )
}

Context API is the most common solution, but not the only.

Let me know if it helped you or if there's anything missing.

Join me on twitter @akramnarejo I keep sharing tips and resources about javascript, and react.

How to decide CSS units for responsive website?

Akram Narejo — Fri, 06 Aug 2021 17:13:53 +0000

When it comes to create a responsive website to fit the every device, It is important to know the right CSS units. But before diving into decision making, let's classify them to know their class.

Absolute units
- px - Pixel
- pt - Point
- pc - Picas
- in - Inch
- cm - Centimeter
- mm - Millimeter
Percentage units
- percentage % unit
Relative units
- Relative to font size
  - em
  - rem - root em
- Relative to view port/document
  - vw
  - vh
  - vmax
  - vmin

We are learning here the most common units:

px unit

In absolute px unit is only used for screen (interface) and rest of units are for print. px unit is not a good choice, actually this is not for scaling. px unit is fixed in size no matter what screen size you choose. That's why px unit is always preferred for borders because borders also kept fixed across all screen sizes.

% unit

This is used for setting the width of element and it's always relative to its immediate parent element size. If there's no defined parent then by default body is considered the parent.

Considering a box with 500px of width and a h1 element inside

.box{
  width: 500px;
  border: 1px solid crimson;
  padding: 10px;
}
h1{
  width: 50%;
  border: 1px solid;
}

👉 if there's no parent defined then root will be considered as the default parent.

em unit

em unit is always relative to the font size of it's immediate parent. 1em == to the size of parent's font size. Default font size is 16px if not overridden, let's say in parent element the font size is 48px then in the child element 1em == 48px.

h1{ 
  font-size: 1em; /* now 1em == 16px */
}

.container{
   font-size: 48px; 
/* or 3em, because default font-size is 16px
& it's parent is body so, 3*16px will be 48px */
}
h1{
   font-size: 1em; /* now 1em == 48px */
}

we can use this unit for margin and padding because it can allow us to use flexible spacing around the boxes according to our font-size of the element. So, element font-size will change according to device size therefore, spacing around the element will also change respectively.

rem unit

r stands for root em and unlike em it's always relative to the root font size no matter what font size it's very next parent element has. if the root has redefined font-size like 60px then 1rem == 60px in child.

html{
   font-size: 60px;
}
.container{
   font-size: 16px;
}
h1{
   font-size: 1rem;
}

vw unit

vw stands for the viewport width which means vw is always relative to the 1% of the width of root, irrespective of parent element's width. So, if 1vw == 1% then 100vw == 100% of the viewport width.

let's consider a following example where the width of one child is relative to parent size and other's is relative to root.

.container{
  width: 600px;
  border: 2px solid black;
  text-align: center;
  font-size: 20px;
}
.box1{
  width: 100%;
  background: skyblue;
}
.box2{
  width: 70vw;
  background: pink;
}

vh unit

vh stands for viewprot height like vw it's also relative to the 1% height of root/document.
let's consider a following example where the height of one child is relative to parent size and other's is relative to root.

.container{
  border: 2px solid;
  font-size: 40px;
  width: 800px;
  height: 400px;
  display: flex;
  text-align: center;
  margin: 0 auto;
}
.box1{
  height: 100%;
  width: 50%;
  background: skyblue;
}
.box2{
  height: 100vh;
  background: pink;
  width: 50%;
}

Summary

px unit for borders.
% unit for width relative to parent.
em unit for margin and padding relative to fonts size of element.
rem unit for fonts size relative to root.
vw and vh for width and height relative to root.

These are the 6 css unit, which are the most commonly used to make the website responsive.

Hope, I have helped you to understand these concepts somehow. Your feedback will be appreciated 👏

I would love to connect with forntend devs on linkedin

Frames in tkinter

Akram Narejo — Wed, 23 Sep 2020 11:16:28 +0000

from tkinter import *

class Frames:

    def makeFrame(self):
        root = Tk(className="X Name")
        root.title("X title")
        root.geometry("900x900")
        root.resizable(0,0)


        def raise_frame(frame):
            frame.tkraise()

        frame1 = Frame(root, width=600)
        frame2 = Frame(root)

        for frame in (frame1,frame2):
            frame.grid(row=0, column=0, padx=50, pady=200, sticky='news')


        Label(frame1, text='Welcome to tkinter Frames',font=("Courier",40)).pack()
        Button(frame1, text="Frame 2", width=10,height=2, font=("Courier", 30), command=lambda:raise_frame(frame2)).pack(pady=10)

        Label(frame2, text='Frame 2', font=("Courier",40)).pack()
        Button(frame2, text="Frame 1",width=10,height=2, font=("Courier", 30), command=lambda:raise_frame(frame1)).pack(pady=10)

        raise_frame(frame1)
        root.mainloop()

frame = Frames().makeFrame()

like to support & share to help <3

How to push remote changes to github with another account

Akram Narejo — Wed, 09 Sep 2020 02:53:53 +0000

In git when we push changes remotely to another account we always get an error like. Permission to x denied to y. here y is the old account we used to keep pushing with.

Now when we are trying to push with different account to different repository it tells us that permission denied.
And we always changes just by
git config --global user.name or user.email
but doesn't work. Because the old account is stored in a cache what we call credentials. In windows or mac we simply remove the credentials with a click of mouse that's what everybody tells and that's Ok.

But what about Linux, where do we find the credentials to remove. You can not find a file in Linux which stores the credentials. To change them we need a command.
git config --global credential.username
( it lets u know the old username u're logged in with ) and to change it just type the account username you're trying to push the changes to.
git config --global credential.username "username"
that's all later on you will be prompted to provide password.

diff and patch explained

Akram Narejo — Thu, 30 Jul 2020 07:57:58 +0000

diff and patch are the useful commands which help in updating the file with current changes.

diff tells the difference between two files
Patch is the difference of two files conceptually but as for command patch updates the file with given changes

Let's create a file demo.py with a command nano demo.py with a print statement inside.

print(hello world)

If we execute demo.py python3 demo.py we will get an error

File "demo.py", line 2 print(hello world) SyntaxError: invalid syntax

So in this case Let's make an other file demo_fixed.py and correct the error.

print('hello world')

Now if we execute demo_fixed.py file we get the output

hello world

Let's compare the both of files demo.py and demo_fixed.py to see the difference.

diff -u demo.py demo_fixed.py

we get the following changes

--- demo.py 2020-07-30 12:35:50.200813874 +0500 +++ demo_fixed.py 2020-07-30 12:35:35.144740070 +0500 @@ -1,2 +1,2 @@ -print(hello world) +print('hello world')

- means statement is deleted & + means the statement is added.
Let's write the changes to another file so we can update the changes with original file.

diff -u demo.py dem_fiexed.py > changes.diff

> writes the data & < reads the data

Now let's apply the patch or changes to our actual file

patch demo.py < changes.diff

If we execute the demo.py file now

Python3 demo.py

we get

hello world

Finally we updated our demo.py file with the given patch of changes.

This is my first post so please let me know about the content and if you find it helpful please do appreciate.