DEV Community: Md Shahab Uddin

Tools you need to write meta tags faster

Md Shahab Uddin — Tue, 27 Jul 2021 18:12:03 +0000

I have just completed learning about HTML Meta tags. I never thought that it can be so much powerful for SEO. I learnt about 20-30 meta tags, opergraph protocol and twitter cards. But after reading all thsese things , I Understood that I need to use some tools so that I can work faster.
SO , I am sharing some websites and tools whcih will help you to write better meta tags. Here is the list:

General Meta tag generator

  * https://www.freemetataggenerator.com/
  * https://smallseotools.com/open-graph-generator/

Opengraph Meta tag generator

   * https://metatags.io/

A nice website to understand better about meta tags

   * https://www.metatags.org/

Github Repository for collection of meta tags

   * https://gist.github.com/lancejpollard/1978404  
   * https://github.com/joshbuchea/HEAD

CSS border in Images

Md Shahab Uddin — Sun, 20 Jun 2021 16:54:30 +0000

Let's learn about CSS border with images

The Arguments Object in Javascript

Md Shahab Uddin — Sat, 19 Jun 2021 10:32:24 +0000

In javaScript we are free to pass as many argument as we want and javaScript won't show us error. For example:

function multiply(x) {
    var result = x * 10;
    console.log(result);
}
multiply(5,7,8,9);  //50

This code won't show error becuase javaScript avoids these extra arguments. But if we want,we can access them via an Object which is called arguments object.

Those parameters which are present in funciton definition can only be accessed by the parameter name.Other additional parameter will have to access throguh arguments object.
Let'see and example:

function wage(salary, month) {
    const total = salary * month;
    const invoice = total + arguments[0];
    console.log(invoice); 
}
wage(1000, 5, 1000);

The output of the above funciton is 6000. IF you add more arguments , we also can access them throgh argument object.

Remember that It's not an Array , It's an arry like object which doesn't have any array like properties except length. You can calculate legth of the argument with arguments.length. For example:

function wage(salary, month) {
   console.log(arguments.length)
}
wage(1,2,3,4,5,6,7,8,9,10);  //10

Althoguh arguments object don't have array properties and methods but we can convert them to array and use all the Array properties

4 ways to convert Argument Object to Array

First Method:

function wage(x,y) {
    return Array.prototype.slice.call(arguments);
}
wage(1, 2, 3); //[1,2,3]

Second Method:
function wage(salary) {
return [].slice.call(arguments);
}
wage(1, 2, 3); //[1,2,3]
Third Method:

function wage(salary) {
    return Array.from(arguments);
}
wage(1, 2, 3); //[1.2.3]

Fourth Method:
function wage(salary) {
return [...arguments];
}
wage(1, 2, 3); //[1.2.3]

I hope you now have a clear idea of converting this array like object to an actual array. You can also check type of arguments passed in the funciton. FOr example

function wage() {
    console.log(typeof arguments[0]); //Number
    console.log(typeof arguments[1]); //String
    console.log(typeof arguments[2]); //Object
    console.log(typeof arguments[3]); //Object 
}
wage(1, "John", ["A","B"],{age: 25,gender: "Male"});;

Thanks for reading my article.

CSS Rule order of precedence

Md Shahab Uddin — Sun, 13 Jun 2021 21:47:47 +0000

This is the order of precedence(Highest to lowest):

Specific rules: When we target html by claa or id or tag. Order
of precedence is ID>class>tag. IF specificity is the same, later takes the precedence.
Inline styles
Embedded styles: Styles defined inside the header of a page.
External styles
Browser Default

Most Important Color Tools For Your Design

Md Shahab Uddin — Sun, 13 Jun 2021 07:38:28 +0000

Every professional on the web has to play with colors such as graphics designer, web designer, ui/ux designer,. To use color efficiently, we have to use some tools. Here are some color tools and websites I used to accomplish various tasks. I hope it helps you too.

coolors.co

1.Color picker: I can make shades , tints, hues, temperature, harmony, blindness simulator, contrast checker and color library

2.Extract color pallette from photo

3.crete ccollage

4.contrast checker

5.Generate color/Explore color pallette

6.Trendng colors

canva.com

1.Color wheel

2.Color meaning

cssfontstack.com

1.Lighten and darken a color

colorable.jxnblk.com

1.Contrast checker

picular.co

1.Primary color generator

pigment.shapefactory.co

1.Primary and accent color maker

Some other websites which may be helpful

labs.tinyeye.com

Google chrome extension

1.colorpick eyedropper: This extension will help you pick a color from any website on your browser screen.

Confusing attribute selector

Md Shahab Uddin — Fri, 11 Jun 2021 15:31:12 +0000

I find some attribute selectors sometimes confusing. Here is the three attribut selector I find confusing. This article will help those who also have confusion about these attribute selectors.

1. [attribute ~= "value"] Selector

Suppose we have html code like this:

  <p class="team1 member">First Paragraph</p>
  <p class="team2 member">Second Paragraph</p>
  <p class="team3">Third Paragraph</p>

If i use the above selector in CSS, it looks like this

p[class ~="member"] {
  background-color: red;
}

The above CSS only will be applied on The first 2 paragraph element, Because "member" is one of the class of the p element. There may be more than one class or only one class. NO matter what this rule works

2. [attribute |= "value"] Selector

This attribute applies to only those selector which starts with the specified value
Suppose this is the html

  <p class="member-team">First Paragraph</p>
  <p class="member first">Second Paragraph</p>
  <p class="team3">Third Paragraph</p>

and now we use css

p[class |="member"] {
  background-color: red;
}

Above CSS applies to only first and third paragraph element. Because Value has to alone or there should be a hypen after the value. Only then selector will match

2. [attribute *= "value"] Selector

In the case of this selector it doens't matter where the value is .It may be at the beggining, at the endign , in the middle or the value may be part of a long word. No matter what if the value exists, this selector will match.

Empty Pseudo Class

Md Shahab Uddin — Mon, 31 May 2021 08:59:28 +0000

There are so many Pseudo Class and ":empty" is one of them.Let's break dowth is pseudo class.

Empty pseudo class is applied on empty element.At First we need to learn what are empty elements. There are certain requiements to become an empty element.
Some examples of empty elements are.

<div></div> 
<div><!--This is a comment --></div>

Even a space inside an element cause the element to be non empty
element.Even if we add one letter or one sentence it becomes a non empty element such as:

 <div>P</div> 
 <div>Lorem ipsum dolor sit amet.</div>
 <div> </div>

If we want to target those empty element, we can use empty pseudo class.Let's target all empty elements in CSS:

:empty {
   //Your code here
}

If you want to target specific empty element such as empty table cell use this

td:empty {
    background: red;
}

I hope you get it How to use empty pseudo class

Difference between Child Selector and Descendant Selector

Md Shahab Uddin — Sat, 29 May 2021 10:31:43 +0000

Sometimes we confuse Child Selector with Descendant Selector. Here is an easy explanation on this topic.

*Example 1: *
Suppose you have one brother , one sister and one cousin. As you know that All of you are descendant of your grandfater. But Your father is direct child of your grandfather.

*Example 2: *

You are child of your fater but your son isn't child of your fater but they are descendant of your fater.

Now let's apply this rule in CSS selector
Look the below html code. I have a section which has one paragraph element. Inside the section element there is one div and inside the div there is one paragraph element.
So we can conclude that:

First paragraph is child of section element
Second paragraph is descendant of section element

 <section>
     <p class="first">This is first Paragraph</p>
     <div>
       <p class="second">This is second paragraph </p>
     </div>
   </section>

IF i use this code:

section p {
     background-color: red;
}

The above code will be applied on both first and second paragrpah because they both are descendant of section.
But if i use this code:

section > p {
  background-color: red;
}

This above code will be applied only on first paragraph because only this paragraph is direct child of the section.

5 Quick facts on Universal Selector

Md Shahab Uddin — Fri, 16 Apr 2021 06:34:55 +0000

4 quick learning at CSS:

Specificity of a universal selector is zero. You can override it with a class or an id.
Browser reads CSS selectors from right to left. So try to put class or id at the end of the selector
You should only use a universal selector only in two cases. The first is while reset and the second is when you want to select all child elements inside a selector. Using universal selector is a controversial topic, so you shouldn't use this other than these two cases.
If you ever saw that your style isn't affecting the webpage, there might be a problem with CSS specificity. Determine the specify with a specificity calculator.

Let's know about Process, thread, and Synchronicity

Md Shahab Uddin — Tue, 05 Jan 2021 04:25:12 +0000

Process and Thread

Process and thread: It's a program in execution. Generally, the creation of a process is resource-consuming. That's why we split our process into multiple unit's which is called a thread. It's of two types:
Single thread: If there is one thread in a process
Multithread: if more than one thread in a process

Every thread is assigned to do a specific task. The single thread executes the full process without being interrupted by a thread but in multithread it allows other threads to executed independently but shares their resources. Also, in a single thread, one thing is done at a time. But the multithread process allows multiple parts of a program to be executed at the same time.

Although most of the programming languages are single-threaded, they support libraries and other functionality that enable us to use multithreading. JavaScript is a single-threaded language. Go and Rust is the multithreaded language.

What is Synchronous and asynchronous

In Programming, two operations are very significant is Synchronous and Asynchronous.

Synchronous operation is also called blocking operation because it blocks instruction until the task is completed. you can execute only one task at a time, after finishing the current task then the next task starts.

Asynchronous operation is called non-blocking operation because you can execute multiple things at a time and it's not necessary to finish execution of the current program in order to execute the next one. It can execute multiple programs at a time. Every program does its job independently without blocking others and they share resources among them.

HTML AccessKey Pros and Cons

Md Shahab Uddin — Wed, 16 Dec 2020 00:41:36 +0000

We all love to use Keyboard Shortcuts. There is a proverb that “The more Keyboard Shorcuts you use, the more technical guy You are”. To give users the freedom to use Shortcuts there is an HTML Global Attribute Named “accesskey”. Let’s Explore it.

What is the Accesskey attribute?

It is used for creating keyboard shortcuts mostly used by web designers and software designers to increase a better user experience. Also, we can focus on and target HTML elements with the “accesskey” attribute.

With Which HTML elements we can use this attribute?

We can use it with “Input, area, button, legend, a label, textarea” these elements.

How to use it?

First, we need to create an element like this:

<a href="https://www.w3schools.com/html/default.asp"> Click to read about HTML</a>

Then add accesskey attribute in this anchor tag like this:

<a href="https://www.w3schools.com/html/default.asp" accesskey="m"> Click to read about HTML</a>

Now run this code in your browser. If you click in the link text, you will redirect to the webpage. But you can do this By clicking (Alt+m) in your keyboard and the page will redirect to the desired webpage. We used “m” for this shortcut. You can use any letter for creating your shortcut.

Let’s use access to other HTML elements and see how it works. We begin with the input tag. First, we create a form and add accesskey with an input tag.

<form>
<label>First Name</label> <br />
<input type="text" accesskey="u" /><br />
<label>Last Name</label> <br />
<input type="text" accesskey="l" />
</form>

Now we get two input fields for writing first and last name. We can write by clicking in those fields. But we can click (ALt+u) for navigating to first name input died and (ALt+l) for navigating to last name input field because we used (accesskey=”u”) for the first name and (accesskey=”l”) for the last name.

We can use the same principle for other HTML tags. I showed you the anchor tag and input tag. You need to play with other tags such as textarea, button, and other tags.

Shortcuts for using the Accesskey attribute?

Should we always need to press (Alt+letter) to navigate? NO. It depends on which browser and which operating system you are using. There is a table on which shortcuts to use on which browser. Go to this link to see the Table.

Cons of accesskey

Overlapping shortcuts: Some shortcuts created by you will overlap with browse shortcuts and operating system shortcuts. This can sometimes cause problems.
No defined Convention: Most of the time users don’t know which keystroke combination to use(Alt, Ctrl, Shift, etc..)This creates confusion among users.

Pros of accesskey

Easy to use: It helps “Power Users” to navigate swiftly.
Special users: It is mostly used for people with disabilities, blind, motor disabilities, and people who use screen readers.

Conclusion

You should use this attribute when a task is to be done repetitively. Also, if your webpage has special users you should use this attribute.
Thanks a lot. Keep following me for more articles on web design.

WRITTEN BY
Md Shahab Uddin
Front-End Developer & Tech Writer