DEV Community: Sahil Saif

learn JSON from head to toe

Sahil Saif — Tue, 01 Feb 2022 12:49:32 +0000

what is JSON ?

• JSON - JavaScript Object Notation

• JSON is a lightweight format for storing and transporting data.

• JSON is often used when data is sent from a server to web page

• JSON is language independent

The JSON format is almost identical to JavaScript objects.

• In json keys MUST be in strings, written with double quotes

• In JavaScript object, keys can be strings, numbers, or identifier names

In JSON, values must be one of the following data types:

string
number
object (JSON object)
array
boolean
null

In javaScript object , valuse must be one of the following data types:

string
number
object (JSON object)
array
boolean
null
function
date
undefined

🚥JSON.stringify( )

When sending data to a web server, the data has to be a string.

So thats why while before sending data we need to Convert it from a JavaScript object to a JSON

To make this happen we need JSON.stringify( ).

🚥JSON.parse( )

Likewise while we receiving data from a web server, the data is always a string.

So we need to Parse the data into javascript object to use the data in out applications.

And for this action we need to use JSON.parse()

That's it for now , if you have any doubt let me know on comments and let's connected on Twitter

25 CSS generator tool for developer . MUST Check

Sahil Saif — Thu, 09 Sep 2021 16:27:09 +0000

Here you find best tools for background gradient, color combination, box shadow, Neumorphism and more

A) Background Gradient generator

B) Color combinations

6) https://colors.muz.li
7) https://coolors.co
8) https://design-seeds.com
9) https://picular.co
10) https://colorion.co

C) Favicon maker

11) https://formito.com/tools/favicon
12) https://redketchup.io/favicon-generator
13) https://favicon.io
14) https://ionos.com/tools/favicon-generator

D) Attractive shapes with border-radius

15) https://9elements.github.io/fancy-border-radius/

E) Neumorphism css generator

16) https://neumorphism.io/#e0e0e0
17) https://hype4.academy/tools/neumorphism-generator

F) Glassmorphism css generator

18) https://ui.glass/generator/
19) https://hype4.academy/tools/glassmorphism-generator
20) https://markodenic.com/tools/glassmorphism-css-generator/

G) Box shadow measurement

21) https://shadows.brumm.af
22) https://box-shadow.dev

H) SVG icons (easy to use )

23) https://tablericons.com
24) https://icons8.com
25) https://ionic.io/ionicons

Twitter

Create real strong password generator with python

Sahil Saif — Mon, 06 Sep 2021 16:29:12 +0000

How to make strong password generator with PYTHON ?

Let's see 👇🏻

Step 1

→ First import build-in string module
→ store all characters ( uppercase or lower or digit or punctuation ) in their respective list

Step 2

→ Taking input for the numbers of characters in password and adding some conditions so that wrong input can be handle.

Step 3

→ import build-in random module and shuffle all 4 list
→ shuffle each list with random.shuffle(list_name)
→ we will create password with 30% of uppercase (characters number given by user) , 30% lowercase, 20% digits and 20% special character

Step 4

→ collecting characters from all 4 lists as the rule of 30%, 30% ,20%,20%
→ Now shuffle the final collected list for making the password pattern unguessed
→ Now join the final list elements with " ".join( )

FINAL code

import string
import random

s1=list(string.ascii_lowercase)
s2=list(string.ascii_uppercase)
s3=list(string.digits)
s4=list(string.punctuation)

characters_number=input("Enter the numbers of characters of your password: ")
while True:
    try:
        characters_number=int(characters_number)
        if characters_number < 6:
            print("you need at least 6 characters for a strong password !")
            characters_number=input("Enter the numbers of characters AGAIN: ")
        else:
            break
    except:
        print("X X X    please enter the number of characters ONLY !!!")
        characters_number=input("Enter the numbers of characters: ")

random.shuffle(s1)
random.shuffle(s2)
random.shuffle(s3)
random.shuffle(s4)
# 30% of the characters_number👇🏻
end1=round(characters_number * (30/100)) 
# 20% of the characters_number👇🏻
end2=round(characters_number * (20/100))    

s=[]
for i in range(end1):
    s.append(s1[i])
    s.append(s2[i])

for i in range(end2):
    s.append(s3[i])
    s.append(s4[i])

random.shuffle(s)
password="".join(s[0:])
print(f'your password is : {password}')

check the output

Twitter

Create an automated file formator with python

Sahil Saif — Fri, 03 Sep 2021 17:09:49 +0000

You all know how much messy it looks when all files lying on a single folder. like this 👇🏻

we will going to create an automated file formator with python

step 1

we will use build-in os module
→ stores all files in a list with os.listdir( )
→ remove main python file in which we will working from the list

step 2

→ identifying file type and store them in their corresponding list
→ we are going to create 4 folders ( images, docs, media, others ) in which all the files will divided.

step 3

→ Now create a function for folders making

step 4

→ make a function for moving files to folders

Final code

import os

def createFolder(folder):
    if not os.path.exists(folder):
        os.makedirs(folder)

def moveToFolder(folder,fileName):
    for file in fileName:
        os.replace(file,f"{folder}/{file}")

files=os.listdir()
files.remove('main.py')

imgExt=[".img",".png",".jpeg"]
images=[file for file in files if os.path.splitext(file)[1].lower() in imgExt]

docExt=[".doc",".pdf",".txt"]
document=[file for file in files if os.path.splitext(file)[1].lower() in docExt]

mediaExt=[".mp4",".mp3"]
media=[file for file in files if os.path.splitext(file)[1].lower() in mediaExt]

others=[]
for file in files:
    ext=os.path.splitext(file)[1].lower()
    if (ext not in imgExt) and (ext not in docExt) and (ext not in mediaExt) and os.path.isfile(file):
        others.append(file)
createFolder("images")
createFolder("media")
createFolder("docs")
createFolder("others")

moveToFolder("images",images)
moveToFolder("media",media)
moveToFolder("docs",document)
moveToFolder("others",others)

Take a look on the output

All Advance twitter search features

Sahil Saif — Sun, 08 Aug 2021 09:43:03 +0000

Let's make it Quick and To the Point

1. from: user_name

→ will get all tweets of that user.

2. from:user_name since:starting_date until:ending_date

→ will get all tweets of that user in between these time frame.

3. from:user_name "keyword"

→ you will get that keyword's related tweet from the user.
→ you can also use AND , OR operator with keywords

4. finds only popular tweets

→ min_faves:500 (minimum 500 likes on tweet)
→ min_replies:500 (minimum 500 retweet on tweet)
→ min_retweet:500 (minimum 500 retweet on tweet)

5. exclude:replies

→ adding this with from:user_name will give you user's only main tweets not replies tweet. Means only main contentGrimacing face

6. combination

and lastly you can play permutation and combination with all this features . here some examples -

That's it for today and connect with me on twitter

All js strings method - less text , more snippet

Sahil Saif — Mon, 19 Jul 2021 21:35:12 +0000

1. String.length :

Returns the length of the string.

2. indexOf( ) :

Returns the starting index no of searching character or word.
It searches forward.
It takes 2 argument, 2nd argument is for search starting index number and 2nd argument is not compulsory.
If searching string does not found then it will return -1

3. lastIndexOf( ) :

same as indexOf() just difference it starts searching from last or backward

4. search( ) :

same as previous two just difference is search() and does not take 2nd argument and always search forward.

5. includes( ) :

Returns true or false as the given string is present or not on the main string.

6. startsWith( ) :

Returns true or false as the main string starts with the given text or not.

7. endsWith( ) :

Returns true or false as the main string ends with the given text or not.

8. replace( ) :

Takes two argument - (present string, replaced string).
It replaces only the first matched.

9. replaceAll( ) :

will replace all matching string on main string.
VS code does not give suggestion for replaceAll() but you just type , it will work.

10. toUpperCase( ) :

Converts whole string to uppercase.

11. toLowerCase( ) :

Converts whole string to lowercase.

12. trim( ) :

Removes whitespaces from start and end of the string.

13. concat( ) :

Join two different strings.

14. repeat( ) :

Repeats a string from 1 to infinity times. Just need to mention repeat number inside ( )

15. charAt( ) :

Accessing string characters with index num.

16. charCodeAt( ) :

Accessing string character's UTF-16 code with character's index number.

17. slice( ) :

Extracting string from a string.
takes two argument - (starting index, ending index) . ending index is not compulsory.
ending index= -1 means till end.

18. substring( ) :

substring() is similar to slice() the difference is substring does not except negative indexes.
If we give negative value then the character are counted from the 0th position.

19. substr( ) :

2 argument- (starting index, length of new string). 2nd argument can't be negative.

20. match( ) :

The match() method searches a string for a match against a regular expression, and returns the matches, as an Array object.

21. padStart( ) :

Add white spaces at the start of the string. Inside ( ) you need to give your total string length with starting whitespaces.
whitespaces = length - string characters length

22. padEnd( ) :

same as padStart( ) just here whitespaces will add at last.
To recognize spaces , bellow in pic in comment at last added '|'

23. split( ) :

Break string and convert it in array.

24. codePointAt( ) :

Return unicode value of given character.

25. fromCharCode( ) :

Return character from unicode value.
in bellow pic comment ans is // TSb

26. localeCompare( ) :

Two string comparison. The reference or base string always written at first then .localeCompare(string2)
Returns negative number (-1) if the reference string is sorted before string2.
Returns 0 if two strings are equivalent.
Returns positive number (1) if the reference string is sorted after string2.

so here we are ! Feel free bookmark this blog for Quick revise on any time.
I tried best to mention all method even some similar to each other. But if i missed any method please tell me comment.

And connect with me on twitter for other JavaScript and CSS stuff.

5 vs code extension to make coding environment more attracting

Sahil Saif — Wed, 14 Jul 2021 07:22:51 +0000

VS code is simply awesome. These 5 extensions are like cherry on top.
so let's jump to the extensions-

1. SynthWave '84 :

Link: click here

This is a theme extension and it's become popular day by day for it's beautiful dark look and feel. It also has certain text glow option which also looks great .
sometimes the text glow disappear (very rare case) then you just need to do shift + ctrl + p and type 'synthWave' and select it. Then just need to reload vs code and now it's fine.
But if you don't like the glow you can turn off in setting. some other themes are 'JellyFish Theme', 'Omni Theme', 'Palenight Theme', 'Viow Color Theme' , 'Material themes' etc.

2. Indent-Rainbow :

Link: click here
Most of programming language need to follow indentation and it increases the code readability. TO make the indentation more clear this extension will help you much.

Now let see how it's looks like in code: 👇🏻

You can also change the indentation color in setting, but i think black is quite good.
If your indentation is wrong then the color turns to red and gives you warning.

3. @import-font :

Link: click here
when we writing CSS , for fonts we need to go google font then get the font's link and then paste on html or CSS file. Now with this extension you don't need to go anywhere. you just write font name starting with '@'. And thats it.

how to use in CSS file 👇🏻

4. Better Comments :

Link: click here
Everybody do comments on code. sometimes whatever we commenting is maybe very important to remind or less important or writing a question on whatever you learning on that point. Main point is there is various level of comments and to filter the comment's level this extension will help you.

you can give different colors in more important, less important, heading, question and whatever you want all can be customize in setting.
you need to give some symbol after the actual comment command like * or ? or # or any symbol you can customize from default.

Here is an example for you about how it's looks👇🏻

👆🏻Here symbols are customized from default symbols that you also can do.

5. Code Spell Checker :

Link: click here
while writing code there we gets auto complete so there this extension has not much use but in writing comments we don't get word suggestion or auto complete so there if we write wrong spelling of a word then the word will be underlined and to get correct word's suggestion we need to type ctrl + . having cursor on the word.

I assure you these 5 extension will attracts your attention day by day while coding.

And connect with me on twitter for other JavaScript and CSS stuff.

so for today this ends here. But let me know should I make part 2 of this?