Forem: iFTekhar

10 HTML tags and attributes maybe you didn't know!😶

iFTekhar — Tue, 23 Mar 2021 16:12:41 +0000

In this article, I am going to show some HTML tags and attributes maybe you didn't know so, enjoy guys!

Some examples were taken from W3school's

1)2 Submit buttons in 1 form!🤯

Did you know you can have 2 submit buttons in 1 form?
you can use the formaction attribute in order to specify which button will submit to which page.

It can be very useful in some cases.

2)The `template` Tag

You can use the template tag in order to hide some content from the user when the page loads.

You can then use some javascript to show the content later on.

3)The wbr tag

Sometimes the browser automatically breaks long word in an incorrect position so you can use the wbr tag in order to tell the browser where it is safe to break the line

it is not going to break any line but it will let the browser know is it safe to break the line there.

4)The contenteditable attribute

You can use the contenteditable attribute in order to enable the user to edit the content or disable the user to edit the content.

5)The colspan attribute

You can use the colspan attribute in a td tag in order to tell that specific td how many columns it should take from the table row.

6)The meter tag

The tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

7)The Title attribute

You can use the title attribute in an element that shows more info about the content as a tooltip

8)The picture tag

You can use the picture tag to show different images for different window sizes.

9)The blockquote tag

The

tag specifies a section that is quoted from another source.

10)The multiple attribute

You can use the multiple attribute in order to let the input take multiple values.

You can also use the multiple attribute in a select tag.

That was it! Thank you for reading my article hope this helps you and let me know if you like this little article of mine. Thank you so much for reading this!🙂

What is JWT? How does it work? Why JWT?

iFTekhar — Mon, 22 Mar 2021 10:46:09 +0000

Hey in this blog I will briefly explain what is JWT? how does it work? and why JWT? So keep reading thoroughly.

🔴 What is JWT?
JWT stands for “ JSON web token ” it is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.
JWT is simply a token that is written in JSON format. It is really safe to use because it can be signed in using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.

🔴How does JWT work?
JWT contains 3 parts 1) The header 2) The payload 3) The signature

The header of the JWT token is just some metadata for the token such as the algorithm name and type.

The payload is some data that you can encode into the jwt which will be saved in the token payload and later you can use those unique data to identify the specific user. The more data you add the bigger the jwt token will be.

And keep in mind that the header and the payload will get added as an encoded plain text but it is not going to get encrypted so anyone can decode them so we cannot save any sensitive data in the payload.
The secret is created with the header, the payload, and the secret that is stored on the server and this will process the signing JWT.

So, the signing algorithm is just an algorithm of JWT to verify if the token is correct. The signing algorithm creates a unique signature using the header, payload, and the secret, and only these data + the secret saved in your server can create this signature. Then this signature and header+payload forms the JWT Token which then is sent to the client

So, how does this process really work?
First, a user sends a post request to the server with the username and the password. Then the server checks the username and password is valid if this information is valid a JWT Token is formed and then gets send to the client and save in a cookie.

Now every time the server receives a JWT Token and grant the user access to the protected page it needs to verify the JWT Token in order to determine if the user really is the user he/she claims to be. In other words, it's gonna check that if no one manipulated the header and the payload data of the token. So it is gonna make sure that no 3rd party has manipulated the header and the payload data.

So how does the verification work? Well, whenever a JWT Token is received the verification method will take the header+paylaod and add the secret to it which is still on your server so no one can manipulate your secret, and then create a Test signature. and the original signature still remains on the JWT Token itself so now the Verification will compare the Test Signature with the original signature and if these two matched then that means the Token was not modified so the verification method will be successful but if it didn't match then that means someone did something with the Token so the verification method will fail.

🔴 Why JWT?
There are lots of reasons why you should use jwt but mostly you're going to choose it because of its simplicity and secure approach. The JWT token is also stateless which is just enough good for a restful API.
So that was the little blog I hope it helped you understand What is JWT? How does it work? Why choose it?
Thank you for reading…🙂

Awesome Uniquee 5 HTML tags and attributes

iFTekhar — Sat, 20 Mar 2021 15:45:24 +0000

Hey in this article I am about to show you some awesome tags and attribute in HTML that can help you a lot in some cases. enjoy guys!

1) The defer attribute

You might want to tell the browser to load your HTML DOM first them the javascript scripts. well, that is really easy to do by using the defer attribute in the script tag.

It tells the browser to load the HTML DOM first and not wait for the javascript scripts to load.

2) The Ordered list starting value

I'm sure you have used or heard about the li tag. it makes a list with nice-looking order numbers such as 1. , 2. ... But you can also change this order number and can put a starting attribute in order to tell the ol from which number it should start listing

You can also use the value attribute on the li tag in order to give it a specific order number.

3) The details tag

In HTML there is a tag called details tag which you can use in order to specify additional details that the user can open and close on demand.

which means you can put some details on the details tag and it would only show the heading and when the user opens the full details tag then the user can see all details inside the details tag

I know you got confused by what I wrote so there is an example below from which you will understand completely what I was saying.

4) Sending mail using HTML

Now you guys are going crazy by reading the title and thinking that this guy is crazy. But actually, you really can make functionality to allow the users to send mail using HTML.

When the user clicks that link a user will get a popup from which the user can choose from which service the user wants to send the mail from then after selecting the service such as Gmail the user will be redirected to Gmail (or other services) compose with the details that are provided on the link.

5) The required attribute

Maybe most of you know this about the required attribute but it is easy to forget.
instead of using javascript and if statements and all those fancy stuff you can just put the required attribute on the input to make it a required field.

4 things you might not know about javascript.

iFTekhar — Fri, 19 Mar 2021 15:55:53 +0000

Hey in this article I am going to be showing some unique things that you may not know about javascript! enjoy guys!

1) The -0

Did you know that javascript has a -0 number? we actually use the +0 number as default but you know what they return 0 anyway so both of them are equal.

2) NaN (Not a number) is a special number!

If you didn't know NaN is actually a special number. if you don't believe me just use the code that is given below and you would be surprised!

One more weird and interesting thing about this is NaN is not equal to itself meaning NaN !== NaN

3) Setting and reading the urlparams using searchParams

You can use the search params to get the value of any param and also you can set a param with a value using this.

4) Some cool icons using HTML Entity

There are some basic icons that you might wanna use in your site so instead of importing font and do all those time-consuming things

you can use some cool icons using the HTML Entity some examples are given below

That was it! Thank you for reading my article hope you enjoyed it and let me know if you like this little article of mine. Thank you so much for reading this!🙂

Awesome 5 javascript Shorthands

iFTekhar — Fri, 19 Mar 2021 13:51:57 +0000

In this blog, I have shared 5 awesome shorthand tricks to make a developer's life faster!

1) Setting the variables values

Normally you would define a variable then say x = value and if you have lots of variables (obviously) then it could take more time.

So you can simply define variables inside a set of square brackets then put the values on another set of square brackets like this.

2) Using Double Bitwise NOT operator instead of `Math.floor()`

Well you might have surely used Math.floor() to get rid of the decimal points but there is an easier way of doing the same operation using the Double Bitwise NOT operator it performs the same operation much faster.

3) For loop short hand

Instead of using a for-loop like the way we usually use you can just simply do this.

4) The logical AND operator

Suppose you want to call a function if one condition or statement is true or false. you would say if(something) then call function but instead of doing that there is a really better way of doing it which is to say something && callFunction() which means if the something is true then that function is going to be called.

5) Turning array into object

You might do a lot of things in order to just turn an array into an object. but the simplest way I think is to use the so-called spread operator or the ... operator

That was it! Thank you for reading my blog hope this makes your developing life fast and let me know if you like this little blog of mine. Thank you so much for reading this!🙂