DEV Community: ziadi lotfi

publish react app to github pages

ziadi lotfi — Wed, 23 Mar 2022 01:02:11 +0000

How to deploy a React app to GitHub pages ? , React pages is a free static website hosting by github

1- Create New Repo : Create new github repo , Choose a username & add .github.io

example : yourname.github.io

2 - Install github pages dependency : Install **gh-pages **using the following command

npm install gh-pages — save-dev

3 - Add Deploy & Homepage scripts : Add these two lines of code in your package.json file

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

Add Home Page Prop To The Same File :

"homepage": "https://yourname.github.io",

Note replace your name with your git repo name

4- Deploy Your Static Website : run npm deploy to deploy your website

npm run deploy

Get Phone Number Details Using Python

ziadi lotfi — Fri, 11 Mar 2022 17:27:10 +0000

Get Any Phone Number Details Using phonenumbers Python Library

*1- Import Library : *

import phonenumbers

*2- import modules *

from phonenumbers import carrier , geocoder , timezone

*3- Prompt User *

Number = input('Please Enter Your Number With Country Code : ')

*4- Parse User Input *

Number = phonenumbers.parse(Number)

*5- Print Timezone *

print(timezone.time_zones_for_number(Number))

*6-Print Phone Number Carrier : *

print(carrier.name_for_number(Number,"en"))

*6-Print Phone Number Country : *

print(geocoder.description_for_number(Number , "en"))

*7-Check Phone Number Validity : *

print('Valid Mobile Number : ',phonenumbers.is_valid_number(Number))

Generate Qrcode Using Python

ziadi lotfi — Thu, 10 Mar 2022 13:20:14 +0000

Generate Qrcode using qrcode python library

1- Import qrcode library

import qrcode

2- Declare url variable

url = "www.dev.to"

3- Generate Qrcode

code = qrcode.make(url)

4- Choose Filename & Save

code.save("my_qrcode")

Css Best Practices Part : 01

ziadi lotfi — Tue, 08 Mar 2022 15:42:17 +0000

CSS BEST PRACTICES

1- Avoid Code Duplication : Keeping Your CSS Code Dry Will Help You Minimizing The Amount Of Edits To Make Change To A component

2- Don't Use Absolute Lengths : Use Relative Units For Scallable Size On Larger & Smaller Viewports

Example :

font-size : 24px

Use :

font-size : 75%

3- Use Inheritance : Use Inheritance To Copy A Specific Parameter From The Parent Element

Example :

input , select , button { font:inherit; }

4- Use Viewport Relative Units : Use Viewport Relative Units , To Reduce The Amount Of Media Queries For Every Viewport And Keep Your Code Clean

Example :

vh (viewHeight) vw(viewWidth) vmin , vmax

4- Set max-width For Replaced Elements : Set Max Width For Replaced Elements Such As : img - object - video - iframe

Hit The Like Button If You Like The Content
Thanks For Reading

vscode Extensions For Web Developers

ziadi lotfi — Mon, 07 Mar 2022 20:18:07 +0000

1- Live Server : Live Server Is An Indispensable Extension For Front End Web Development it allows us to run a local server with live reload features to develop on our sites

Link : Live Server Extension

2- Prettier : Prettier Is A Must Have Extension For Every Developer , It Formats Your Code For Ideal Readability And Save You Lot Of Tab Clicks Or (Space)

Link : Prettier Extension

3- Bracket Pair Colorizer : Braket Pair Colorizer Highlights Open And Closing Bracket With Same Color

Link : Bracket Pair Colorizer

4- Color Highlight : Color Highlight As It's Name Says It highlights styles css colors found in your document.

Link : Color Highlight

5- TODO Tree : TODO Tree This Extension Make It Easy To Save Your Comments As To Do Tree . For More Check Documentation

Link : Color Highlight

vscode themes for night development

ziadi lotfi — Sun, 06 Mar 2022 16:57:13 +0000

Top 5 VsCode Themes For Night Coders

You can install themes in Visual Studio Code in two main ways. You can either visit the marketplace and select the theme you want to download, or you can search in VSCode IDE.

Dracula Dark Theme

Github Dark Theme

Atom One Dark Theme

Monokai Pro

One Dark Pro