DEV Community: Shivashish Yadav

Want free learning resource at one place? Check this website.

Shivashish Yadav — Sun, 10 Apr 2022 14:23:00 +0000

freelearninglist.org

In pandemic, lots of websites made their learning and certifications free but many people when got to know about it from different sources, free duration was already passed. Well, if you ever wondered where to get the free resource list about podcasts, e-books, courses, certifications at one place. No need to worry. Here comes freelearninglist.org

The best free edu-things on the internet, carefully organized and ranked in order of awesomeness. YouTube channels, podcasts, e-books, courses, certifications, free courses and more are all included. The school of thought international, a 501c3 nonprofit organization that provides creative commons critical thinking materials, is providing this as a free service.

Most of the users are getting benefit from these countries. Because many people don't know about it.

Finding similar movies, TV-series made easy.

Shivashish Yadav — Sat, 09 Apr 2022 17:42:55 +0000

BestSimilar.com

Sometimes you watch movie which you like it a lot and wanted to get similar movie to watch. You search on internet but most results you get which lists different movies. No need to worry, here comes BestSimilar.com .

Enter the title of the film you want to view in the form, and related films will be suggested. The lists are built automatically, taking into account many movie parameters as well as suggestions and expert opinions ("hand-picked").

Because the algorithm for selecting movies is always improving, don't be surprised if movies you've already seen appear in the list of comparable films.

You can also view a film about the subject you're interested in. All the topics were classified into five categories: style, plot, audience, time, and location.

All movies are sorted by how relevant they are to the theme on the tag page. You can also use different sorts to rapidly select simply the best or newest among them.

What is Cybersecurity? Its types, advantages and importance.

Shivashish Yadav — Sat, 09 Apr 2022 06:20:52 +0000

If you want to know what is Cybersecurity, its Definition, how it works, and what are its types. If you know, then you may not know everything, then after reading this article properly, you will know the full information.

What is Cybersecurity

Cybersecurity is a type of security that is a security for systems connected to the Internet. Through this, the data of hardware and software is made more secure so that the data is not stolen in any way and all documents and files are safe.

Cybersecurity is made up of two words Cyber + Security, meaning whatever is related to Internet, Information, Technology, Computer, Network, Application or Data, we call it Cyber.

Whereas security is related to security which includes System Security, Network Security, Application and Information Security.

How Cybersecurity Works

Under Cybersecurity, there is a large team of Ethical Hackers who protect your data from theft, data deletion or damage to any of your devices. Those working in Cybersecurity prevent bad people from doing wrong things.

Under this, your network, computer system, any program and your data are kept secure.

Why Cybersecurity is Important

Cybersecurity is necessary to keep our personal data such as images, PDFs, Text Documents, or any other type of data that resides on our computers safe.
Cybersecurity is very important to keep any such data of ours, in which only our copyright is safe. For example, if you have a company, only you have copyright on its data, then it is necessary for no one to steal it or no other person can use it.
Cybersecurity is also very important to provide security to our Banking and Financial data because if our banking data is not secure then any hacker can withdraw money from our bank account. And nowadays, Internet banking has become an essential part of life, that is why it is important to keep banking and financial data safe.
Cybersecurity is also very important for national security. National Security means that nowadays there are cyberattacks on the defense system of our country too.
There is also some such data or information which is very necessary and sensitive, as nowadays most of the work in government offices is also done through the internet.

If the data of any government office gets leaked, then it can cause a lot of damage. Therefore, cybersecurity is also very important to keep this type of data safe.

Types of Cyber Crime

1. Hacking

In this type of cybercrime, hackers enter the restricted area and access the personal data and sensitive information of another person, without the permission of that person, the restricted area is someone's personal computer (PC), mobile, or any online. There can be a bank account (Net Banking).

2. Cyber Theft

In this type of cybercrime the hacker violates any copyright law, it is a part of cybercrime which means theft done through a computer or the internet. This includes identity theft, password theft, information theft, internet time theft, etc.

3. Cyberstalking

This Cyber Crime is more visible on social media sites. In this, stalkers harass and harass a person by repeatedly sending dirty messages or emails.

In this, stalkers often make victims of small children and people who do not have much knowledge of the internet. After this, stalkers start blackmailing that person, due to which the life of the person becomes very painful.

4. Identity Theft

This type of cybercrime is seen a lot these days. In this, hackers target those people who use online cash transactions and banking services like Google Pay, Phonepe, and Paytm.

Hackers take away all the money from a person by obtaining personal data such as account numbers, debit card details, internet banking details, etc.

5. Malicious Software

Much such dangerous software is created by hackers, so they can not only steal the data of any computer or mobile connected to the internet but can also delete it, as well as with the help of these software programs, hackers can make your entire system crash

These software programs are of many types such as Malware, Spyware, Viruses, Ransomware, and worm. Hackers send this type of software mostly through a link, pop-up message, or email to another computer and ask to touch the link in tempting ways.

If that person touches on the link, then the complete control of the computer goes into the hands of the hacker.

6. Phishing

In this type of Cyber Threat, the hacker sends a message or email to a person in the form of a trusted institution or bank, which looks valid on seeing. The purpose of the hacker behind this is to cause financial harm to that person by taking sensitive information like bank account number, debit card, Aadhar card, etc.

7. Child Pornography and Abuse

In this type of cybercrime, hackers mostly use chat rooms and talk with courtesy by hiding their identity.

Small children or minors do not have much information, and gradually hackers obstruct children from child pornography. Apart from this, children are not able to tell anything to their parents due to fear.

8. Man in the Middle (MITM) Attack

In this type of cybercrime, the attacker who is the hacker keeps on spying on the communication of two people and after some time becomes one of those two people and is necessary from the front. Information, and sensitive data like the bank, debit, credit card details, etc. Due to this, the person in front does not even know and the hacker gets all the information.

9. Denial of Services (DoS)

The main purpose of a DoS attack is to reduce the traffic of a network or website. In this attack, hackers weaken the network system by suddenly bringing a lot of traffic to a network or website.

Along with this, there are many services like Email, Yahoo, Hotmail, etc. When suddenly there will be a lot of traffic in these, then if any user goes to log in, the user will not be able to use that service.

10. Spoofing

In this type of cyberattack, the hacker can attack the system of a big server or big company by using the identity of another person. By taking the help of this attack, a hacker can ruin someone's life.

11. Salami Slicing Attack

"Salami Slicing Attack" is also called "Salami Fraud". In such cyber crime, cyber criminals carry out a big attack by doing many small attacks. Attackers use customer information such as bank/debit card details to deduct very small amounts of money.

Due to the small amount of money being deducted, customers remain unaware of slicing and do not even complain about it, due to which the hacker cannot be detected. It is just a strategy to profit from small increments from time to time.

Apart from these, there are many other cyberattacks, with the passage of time, new types of them are also being discovered.

Types of Cybersecurity

In Cybersecurity, different security is provided to the user in different layers of the network. All the crimes mentioned above are done online and the 6 best cybersecurity to prevent them are as follows-

1. Network & Gateway Security

This can be called the first layer of the network. You must have heard the name of Firewall in Computer. This is a wall for a network that allows only secure things to enter and keeps unsafe threads out.

2. Data Loss Prevention (DLP)

In this process, all the data of the user is fully encoded, in which SSL (Secure Sockets Layer) is used. Under this protection, the information or data is encrypted to keep it away from Unauthorized Access.

3. Application Security

By this, the applications being used in the network are passed through a security process. So that the shortcomings of that application can be removed. Also, if that application is insecure, then it is taken out of the network.

4. Email Security

If you use Gmail, you must have noticed that some emails go into the Spam folder. This happens because Spam Filters are installed in the network for Email Security. So that harmful emails can be kept away from the reach of the user because most of the crime is done through Email Phishing.

5. Antivirus Security

Everyone keeps Antivirus installed in their computer. It protects our computer from different types of Viruses. After all, all our sensitive information and private files are stored in the computer itself, that is why it is very important to keep it safe.

6. Network Access Control

By this, the work of keeping unauthorized users and devices out of the network is done. NAC protects the functionality of the network, ensuring that only authorized users and devices have access to it. Network operators decide which devices or applications comply with endpoint security requirements and whether or not they will be allowed network access.

Benefits of Cybersecurity

With the help of this, we can stay safe from Unauthorized Access, so that there will be no risk of any kind of data loss.
With the help of Cybersecurity, we can keep our network secure, so that we can use the Internet with confidence.
A security cover is provided to your personal and sensitive data so that hackers cannot exploit you financially or mentally.
Information security is improved and business management also increases.
Nowadays, online cash transaction is very much in vogue, so you can do secure transactions with cybersecurity.

Conclusion
What is Cybersecurity? Just knowing is not enough. The best way to avoid Cyber Crime is not to click on the link of any tempting message, if you do, then also check the URL of that link to see if there is any spelling mistake in it. Also, create a strong password for any of your accounts, which include uppercase and lowercase characters and be safe.

How did you like the article, do tell me in comments and if you like the article, then do share.

How To Write SEO Friendly Blog Post Which Ranks Easily.

Shivashish Yadav — Thu, 31 Mar 2022 18:12:48 +0000

Introduction

Do you know, how to write SEO-friendly blog posts and why it is important for every blogger? Yes, if this is your question and if you have reached here while searching for the answer to this question, then you have come to the right place.

No matter how good an article you write, if you write a good heading, content, even paragraph with great effort. Still, your article appears on the 5-6 number page in google search. What could be worse news for a blogger than this? To make this news good news, you have to write SEO friendly article. If your article also appears on the first page in google search, if this happens, then the traffic to your site will increase significantly.

Increasing traffic is not the work of any child. If you are a blogger, then you must have understood what are the benefits of getting more traffic. So there is nothing to be sad about, let's know how to write SEO-friendly blog posts.

How to Write SEO Friendly Blog Posts

The full name of SEO is Search Engine Optimization. You are writing SEO friendly article, this means that you are telling Google on which topic your article is written. Through this, you are optimizing the content for the search engine.

Which has many advantages like the traffic to the site will increase. On searching your article, it will come on the first page of google. There will be more and more visitors. The rank of your site will increase. These are all its advantages. Through this, the same content that visitors want can be given to google users. Your income will also increase.

So if you follow the tips given below, you will understand everything.

1. Keyword Research

The first question that must have come to your mind is what is this keyword. No more Rocket Science. Whatever Phrase and Sentence you search in Google is your keyword. Like you search in google "how to earn money from social media".

This is your keyword. Now the next question comes which keyword would be more correct. For this, you have to use tools like there is a free tool from Google. Whose name is "Google Keyword Planner". You should choose such a keyword in which the competition is low, you can rank such a keyword quickly.

If you want, you can also give keywords according to you, you can just check the competition with Google Keyword Planner. One important thing is to use a Long Tail Keyword. The advantage of this is, you can also rank Short Tail Keyword well in it.

Let me explain to you what is this long-tail keyword and what is the short tail keyword. “TOP 10 best games apps in 2022” is your long-tail keyword. But if you write best games apps, then this is the short tail keyword.

But the short tail keyword also comes in the above keyword (TOP 10 best games apps in 2022). I mean to say, use a long-tail keyword, the short tail keyword will automatically rank.

2. Put the Keyword in the Title

According to the topic on which your article is on, you have to choose your title. And remember one thing, your title should be the keyword of your article. Never make such a mistake that your focus keyword is “How to write SEO Friendly blog post” and you are writing something else. So you write the same in the title of your post. You must have understood this, let's learn something more now

3. Use keywords in your first paragraph

You also have to pay attention to this thing that whenever you write an article, you must use the keyword in the first paragraph. Which will be helpful for SEO. If you are writing an article in which the name is "What is SEO", then you have to take it according to the keyword.

I mean, write “What is SEO” anywhere in the paragraph. But keep one thing in mind, your keyword should be written naturally. Do not write the keyword deliberately, again and again, it is against the guidelines of Google. This is also called Keyword Stuffing.

4. Use Image Alt Tag

No search engine can read the image. Rather, you have to tell the search engine that you have used the image and to whom the image is related. You have to enter the name of the image in the alt tag.

For example, if there is an image of SEO, then you have to write SEO in the alt tag. This lets the search engine know what the image is about. Use keywords in the alt tag, this will optimize your article.

You can also use a plugin named SEO Friendly Image. One more thing, always compress the image, it will reduce the page load time. Whenever someone searches for a Google image, your image can also appear there.

5. Use Heading and Subheading (H2 and H3 Tags)

Using Heading and Subheading is an SEO in itself. Always remember that the heading lets visitors know what is written inside.

By the way, Heading and Subheading mean which keyword you have to use in H2 and H3 tags. But remember that you do not write the same keyword exactly, bring some changes to it and then write it.

For example, take the example “how to write an article”, instead of this you can also write “how to write an article well”. You can also write it in the H2 tag, and you can also write it in H3.

6. Bold Important and Related Keywords

You can do this work even after writing the post. This is also a good way to write SEO-friendly topics. In this, you just need to bold and related keywords. This will make it easier for the search engine to focus on the keyword. (This does not mean that you will make everything bold). This method also makes it easy for visitors to blur the content in the article.

7. 1 to 2 Italic keywords

You should italicize some words meaning 1 to 2 focus keywords. This will also make a big difference in your article. Always remember one thing you do not write a word or sentence repeatedly for ranking, otherwise, the user will also find your article boring.

8. Outbound Link To High-Quality Sites

You must have seen that there are some very big sites. Sites whose CPC, Rank, Page-rank are also high. Link those sites to your page. If you are writing an article whose name is "What is blogging", then in this you can link the word 'Blogging' with any other site.

You can give a link to a URL with the word blogging, and that link can also be from the Wikipedia site. Whenever someone clicks on the blogging world, it will redirect to the WIKIPEDIA page.

There are many sites like Facebook, Microsoft, Apple, all of these are high-quality sites. With all these, you can link some words to your site. Google considers this very important.

9. Internal Links to Related Article

If you have seen the video, then you must have understood what I want to explain. Internal Links to Related Article This means, give a link to another post in the middle of your article.

If you have written about Quality article in your article, then you can give a link to the post “What is SEO” in the middle, that too will be your written post. This will happen whether the engagement of your site will remain. Visitors will keep reading other posts on your site. Bounce Rate will also remain intact.

This was some information about internal links.

10. Write High Quality Content

Use whatever SEO keywords you want, but if you do not write for the user, then there is no use.

I mean you should always write quality content means write relevant content, user readable content, complete content. You write in such a way that after reading, the user think that I have got what I want.

You should also pay attention to the article length. Write an article of 700 words only. When you write quality content, then forget about SEO, just everything should come from the heart, this is what Google likes.

11. Blog URL

Blog URL has a lot of importance to optimize the article for Search Engines. Give a URL that contains only keywords.

Your keyword is what is Google.

Take an example, www.example.com/what-is-google

This is the best example, the blog URL should be something like this.

Other URLs like www.example.com/What-is-google-google are also not special. www. example.comt/GooGLeWhat? 11%p This is also not the correct URL.

12. Use Meta Description

In Meta Description, you have to summarize the entire article. Whenever you publish the post, first of all, you should see the Meta Description once.

In this, you have to use those keywords which you have used in the heading, title description, subheading of your post. It tells Google what your post is written about. This also makes it easier for Google to search.

This description should be about 140-150 words. You should never copy Meta Description. Related keywords should always be used. On WordPress, write Meta Description in the middle of the head tag.

13. Pay attention to important keywords

Bold and Italic important and related keywords in the post. This is also a good way to write SEO-friendly blog posts/articles. This will help the search engine to focus on the keyword of your post.

My final opinion on this article

So friends, today's information is very important for every blogger. In which the information about how to write SEO Friendly Blog Post is written. If you are a blogger and want to grow up and come on the list of some big bloggers, then try using all the above tips.

Always remember that you are writing for the user and not for the money.

Hope you have liked this article. If you want to ask any questions, then definitely write in the comment box below. And if you want to give any suggestions, then definitely give them so that I can do something new for you. If you have not subscribed to my blog yet, then definitely subscribe.

React design pattern you should know about.

Shivashish Yadav — Tue, 15 Mar 2022 08:59:03 +0000

How do I manage directories

This idea is probably the part that worries a lot whether it is a front-end or a back-end.

How to partition directories in React?

The goal with React is to create a tree of React elements and render them to the screen. The React element tree is composed of components. Then, components inevitably have a hierarchical structure. Since components have a hierarchical structure, it is natural to configure the directory structure according to the component hierarchy.

In this article, I will summarize some of the representative design patterns that provide the 'standard' for dividing the hierarchy.

Design pattern

Presentational and Container Component Pattern

This pattern was first introduced by Dan Abramov in 2015.This is the most basic and famous design pattern.

After the first introduction, Dan Abramov updated the article in 2019, and it is said that he no longer recommends dividing components according to the pattern he introduced. Although it is said that it is not recommended, this pattern was devised for a certain necessity in the past, and now let's look at why it is not recommended, and if so, what is recommended.

This approach divides components into two categories: 'Container' and 'Presentational'.

The presentational component is a component that is only responsible for being displayed on the screen. Because it is only responsible for being visible, it does not depend on other parts of the application and may know how data is imported and changed. It's just a component that shows what you've received. It can have a state, but only a state related to the UI.

The container component is a component in charge of the operation. It has no DOM markup structure or style because it deals only with behavior. Brings or changes data to be displayed in the Presentational component and defines the behavior of the component.

Advantages

You can separate your interests. Because the function and UI are clearly separated, the structure of the code is easy to understand and the maintainability and reusability are excellent.
Reusability can be improved. Presentational components do not depend on other parts, so they can be freely used in other containers.
Markup is convenient. If this pattern is used, the 'layout component' is inevitably extracted. This layout component prevents you from writing the same markup multiple times.

Why I don't recommend it anymore

Dan Abramov says he doesn't recommend this pattern for two reasons. It is not necessary, but there is a phenomenon of forcing this pattern too blindly, and the work of separating the logic can now be done through Hooks.

If you use logic with Hooks, you can take advantage of being able to reuse not only views but also logic.

Atomic Design Pattern

This pattern was first proposed by Brad Frost in 2013. It's older than I thought, but this pattern was originally for a design system. That is, it refers to a method of efficiently composing components in the design system.

Brad Fost borrows terms from chemistry to describe UI components. From 'atom', which is a small unit component such as a label, input, or button, 'molecule', which combines several atoms, 'organisms', which combines several molecules, and 'template', which is the layout to put the created components in, and the components created above the template. It consists of injected 'pages'.

Remember, this design pattern breaks down components into units of functionality, not views.

This configuration of components has the advantage of excellent UI reusability, but the initial cost to build a design system is high and the logic and state must be down to a lower unit, so props drilling issues may occur.

A glimpse of how it is used in practice

Let's see how to apply the atomic design pattern in RIDI .

In the video, the two patterns introduced above are mixed and used.

It is said that Lidi divides components into 3 stages, atom, block, and pages, rather than 5 stages. In this way, props starting from pages can end in 2 steps instead of 4 to atoms, so it seems that the props drilling issue can be prevented.

And the component returns the top-level component with each directory index.tsx. index.tsxmakes it act as a container component, leaving only the logic behind, separating it from the presentational component.

What I felt after watching this video is that you should not divide anything into binary and follow it blindly. I think it is important to know the strengths and weaknesses accurately and to know how to pick and use the ones that you think are good.

React & Vue Talk

Shivashish Yadav — Thu, 10 Mar 2022 07:45:06 +0000

Since the work needs to write React for several years, and because the work needs to write Vue in recent months, I have a certain degree of understanding and some understanding of these two frameworks. This article will start from the framework users (ie front-end developers, and next From the perspective of the same), briefly talk about modern front-end frameworks and the similarities and differences between React and Vue, without involving the analysis of source code and the underlying implementation.

modern front-end framework

First look at what React and Vue are. In short, both of them are JavaScript frameworks for building UI, generally used to develop web applications, of course, they can also be used to develop mobile apps and desktop applications (not discussed in this article). When it comes to JavaScript frameworks, we have to mention jQuery, the god-like framework. Let's make a comparison first. In order to facilitate the distinction, we introduce a concept and call frameworks such as React, Vue, and Angular modern front-end frameworks, and jQuery and other similar frameworks as jQuery-style frameworks. Taking a simple Count component as an example, the number will be +1 every time the button is clicked. The jQuery code is as follows:

<html lang="en">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  </head>
  <body>
    <p id="count">1</p>
    <button id="btn">+</button>
    <script>
      $('#btn').click(function () {
        $('#count').html(Number($('#count').html()) + 1);
      });
    </script>
  </body>
</html>

The React code is as follows:

import { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(1);
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>+</button>
    </div>
  );
};

Vue code is similar to React, with no duplication.

Although the above code is simple, it completely contains the three main elements of a web application: DOM, state, and events. The biggest difference between jQuery and React is the state and DOM. In jQuery, the application state (ie count) is stored in the DOM, and in React, it is a JavaScript variable; when the state is updated, jQuery needs to manually update the DOM, while React only needs to update the state, The framework automatically syncs state to the DOM.

Obviously, the biggest difference between modern front-end frameworks and jQuery-style frameworks is declarative versus imperative. In modern front-end frameworks, we can map the state to the DOM by declarative writing, and the framework will automatically synchronize the state to the DOM. For display pages or simple web applications, the two methods are not very different for our development and code maintenance, but now that more and more content is carried on the front end, and web applications are becoming more and more complex, the imperative writing method is not. It can meet our needs too much, the code written is difficult to maintain, and the declarative writing method allows us to focus on business logic without caring about DOM updates.

Modern front-end frameworks like React and Vue are actually doing the same thing: solving the problem of synchronizing the state with the UI. It's a nightmare to imagine dealing with DOM updates while dealing with complex business logic.

Three Principles of React

As mentioned above, the three main elements of a web application are DOM, state, and events. Since React does the DOM part of the work, for users, the main concern is the state part, and the API provided by the framework is mainly status-related. In order to better manage and update the state, there are three more important principles in the React ecosystem: one-way data flow, single data source, and immutable data structures.

Unidirectional data flow

The data flow refers to the flow of the state. In React, the data flow is relatively simple and clear, that is, the DOM is generated according to the state, and then the event function is triggered by the event bound on the DOM to update the state. All processes are one-way:

single source of truth

This principle comes from Redux, that is, the global state in the entire application is only stored in one store, which is convenient for debugging and maintenance. In fact, it can also be extended, and it is also applicable to pure React components, that is, only one copy of any state is saved (except in special cases), and the state that can be calculated from other states is not saved separately.

To give two examples, one is that component A has a subcomponent B, and A passes its state to B through props. In component B, unless it is a special case, do not copy the prop and save it in its own state, but directly Use the prop value, otherwise, it may cause the state to be out of sync. Second, when displaying a Todo List, there is a function to display only the unfinished Todos. In this case, do not save a copy of the entire list and the unfinished list, but calculate the Filter out incomplete lists in all lists.

immutable data

Immutable data, sometimes called state read-only. In React, all state updates are done through instead of directly modifying the state itself. For example, when the state is updated, it needs to be executed instead of directly modifying it .setStatestate: { count: 0, list: [] }setState({ count: 1 })state.count = 1

The advantage of doing this is that it is easy to track state changes, making the code clearer and easier to maintain; the second is that because a new state object is generated for each update, it can avoid the problem of JavaScript object references, and thus avoid all kinds of weirdness. bug.

Similarities and differences between Vue and React

When writing React, you will feel that the above three principles are nothing special, and everything should be like this! It wasn't until I wrote Vue that I noticed some differences, although React and Vue essentially do the same thing. Look at them one by one below.

two-way data binding

As mentioned earlier, React is a one-way data flow. When writing a form, you need to bind values to, and manually listen for events to update the state:

import { useState } from 'react';

const App = () => {
  const [input, setInput] = useState('');

  const handleInputChange = (event) => {
    setInput(event.target.value);
  };

  return (
    <form>
      <input value={input} onChange={handleInputChange} />
    </form>
  );
};

In Vue it is much simpler:

<template>
  <form>
    <input v-model="input" />
  </form>
</template>

<script>
  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const input = ref('');

      return {
        input,
      };
    },
  });
</script>

Since Vue provides this API, we can omit the step of writing events, which can save a lot of time and code when there are many forms. However, it is essentially a syntactic sugar. You can also manually bind values and listen for events like React. For some special scenarios or when you need to do some other processing while updating form values, manual writing is still necessary.v-modelv-model

single source of truth

Whether it's React or Vue, a single source of truth is an important principle. However, Vue provides an API that can greatly facilitate our development. Take the Todo List as an example. The filtering of the completed list can be handed over to, and Vue will cache it to reduce unnecessary calculations and improve performance. .computedcomputed

variable data

Unlike React's immutable data, the state in Vue is mutable data, which may be the biggest difference between React and Vue. React updates the state through setState, Vue directly modifies the state, and then he listens for changes in the state in the content. Vue's approach has several benefits:

Simple, easy for novices to use;
The granularity of data monitoring is finer and coupled with the compile-time optimization of the template, it has better performance;
The code is simple and not cumbersome, and the amount of code is small;

From a personal point of view, I don't think the above benefits are pain points and optional, but the problems they bring are big troubles:

It is not intuitive, because assigning values to variables in JavaScript will not cause other reactions. For novices, although it is easy to get started, it also affects the learning and understanding of JavaScript itself;
Data monitoring cannot be perfectly implemented. The data monitoring is implemented by using many restrictions, such as the inability to monitor the addition and deletion of properties, the inability to monitor array changes in some cases, and the after-hours API that increases the learning cost of users; Vue The data monitoring implemented by using in 3 requires the user not to forget to write it at all times. Although it can be automatically completed by some editor plug-ins, it should not exist in the first place, and at the same time, it does not need to be written in the template, resulting in inconsistent mental models;Object.defineProperty$setProxy.value.value
Due to the object reference logic of JavaScript, mutable data may lead to some strange and difficult debugging bugs. For example, some values in the state refer to an external object. Vue will directly modify the object itself, which may lead to other references. There is a problem with where the object is located;

How CSS works in React.

Shivashish Yadav — Tue, 01 Mar 2022 07:31:15 +0000

Since React itself has no special support or processing for CSS, you can use regular inline styles or class selectors used in normal HTML when writing CSS in React, or you can use various community solutions such as CSS Modules, CSS in JS, etc. This article briefly introduces the various options.

1. Inline styles

Just like writing inline styles in normal HTML, add a style attribute. But the difference is that in HTML the value of the style attribute is a string, while in JSX it is an object:

<!-- HTML -->
<h1 style="color: red">Heading 1</h1>
// JSX
<h1 style={{ color: 'red' }}>Heading 1</h1>

In addition, the properties of the style object in JSX are named in lower camel case, such as the need to be written as. It is generally not recommended to use this method extensively in a project.background-color backgroundcolor

2. class selector

When using the class selector in JSX, you need to write the value as a string, and use spaces to separate multiple classes.classclassName

<h1 className="h1 text-center">Heading 1</h1>

In React 16 and above, it can be written as, but to avoid confusion with the keyword, it is recommended to write it as .classNameclassclassclassName When there are multiple classes and dynamic changes are required, classnames can be used to simplify the code. As for the processing of CSS files, it can be directly introduced in HTML. For example, when using bootstrap, a CDN address can be directly introduced in HTML; when using CSS files written by yourself, it is recommended to split the CSS files corresponding to React components and put them in the Use in the component file to import, and then configure CSS-loader in webpack for processing.import

src
 |-- components
          |-- Header
                |-- index.jsx
                |-- index.css
          |-- Footer
                |-- index.jsx
                |-- index.css
// src/components/Header/index.jsx
import React from 'react';
import './index.css';

const Header = () => {
  return (
    <h1 className="header">Heading 1</h1>
  );
};

export default Header;
/* src/components/Header/index.css */
.header {
  color: #333;
}

It should be noted here that component splitting does not equal style isolation. When multiple components are referenced on a page at the same time, the CSS files of these components will be referenced at the same time. Because native CSS has no concept of scope, all classes are globally valid, so these CSSs may conflict; When switching, there may also be style conflicts between multiple pages, because a single-page application is essentially just one page. When switching from page A to page B, the CSS file of page B is loaded, but the CSS of page A is not destroyed. , the two coexist. To solve the problem of style scoping, naming conventions such as BEM can be used to avoid naming duplication as much as possible, but this does not solve the problem fundamentally. CSS Modules was born to solve this problem.

3. CSS Modules

CSS Modules are built to implement CSS scoping effects. The principle is very simple, that is, to modify the class name and animation-name according to certain rules, so that the class name is globally unique, so as to avoid the problem of naming conflicts.

/* App.css */

.home {
  color: #333;
}

.App_home__T45xz {
  color: #333;
}

It is also very simple to use. Take webpack as an example, just add a to. There is also a little change when used in the code:modules: true

import React from 'react';
import styles from './App.css';

const App = () => {
  return (
    <div className={styles.home}>App</div>
  );
};

export default App;

The imported is an object, which is the mapping between the original class name and the compiled class name, such as .styles{ home: 'App_home__T45xz' } In addition to modifying the class name, CSS Modules also have advanced functions such as class combination, and importing classes in other files, and you can customize the naming rules through the configuration items of CSS-loader. For details, please refer to the documentation of css-loader. Whether it is importing a CSS file or using CSS Modules, it does not conflict with Less, Sass, etc. Just add a corresponding loader before the CSS-loader in the webpack configuration.

4. CSS in JS

The previous methods are relatively conventional, and none of them deviate from the conventional HTML + CSS mental model.

In web development in the jQuery era, we focused on "separation of concerns" - separating HTML, CSS, and JavaScript from each other. But React combines HTML and JavaScript through JSX and pays more attention to componentization. Is there any solution to writing CSS in JS way to achieve All in JS?

CSS in JS is a general term for solutions to write CSS through JS, not a specific solution. Due to a large number of schemes, this article only introduces two.

4-1. styled-components

styled components use template string syntax to integrate CSS into React's component system, and use JS to implement some functions that CSS does not have, such as variables, loops, and functions. While these functions can be implemented through Less or Sass, these functions of styled components are implemented through JS with low or no learning cost.

It is recommended that you configure the Babel plugin before you start using it, it can provide some optimizations and SSR support, but this plugin is optional .babel-plugin-styled-components.

Basic usage

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: #333;
`;

const App = () => (
  <Title>Heading 1</Title>
);

export default App;

When you define a style, you actually generate a React component that contains the style.

Dynamic styles

Now that a React component is generated, props can be passed, the props values can be read in the style, and the style can be dynamically adjusted according to the props value:

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: #333;
  font-weight: ${props => props.bold ? 700 : 400};
`;

const App = () => (
  <Title bold={true}>Heading 1</Title>
);

export default App;

Extended style

The above examples are all adding styles to an HTML tag, and you can also add styles to a component, and will override the existing styles:

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: #333;
  font-weight: ${props => props.bold ? 700 : 400};
`;

const ItalicTitle = styled(Title)`
  font-style: italic;
`;

const App = () => (
  <>
    <Title bold={true}>Heading 1</Title>
    <ItalicTitle bold={true}>Heading 1</ItalicTitle>
  </>
);

export default App;

If you don't want to modify the style, but want to modify the HTML tag, you can pass a prop, the value can be a string of HTML tags or a React component.as

<Title as={'h2'} bold={true}>Heading 1</Title>

The rendered DOM node is the h2 tag.

More detailed functions can be viewed in the official documentation of styled-components .

4-2. styled-jsx

As can be seen from the name, styled-components is to bind styles to components, while styled-jsx goes a step further and directly binds styles to JSX, with finer-grained control of the scope.

You need to add the plugin .styled-jsx/babel

Basic usage

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>
        Heading 1
        <style jsx>{`
          h1 {
            color: red;
          }
        `}</style>
      </h1>
    </div>
  );
};

export default App;

Now the style of the h1 tag selector defined in the style tag only takes effect in the h1 tag that wraps it and does not take effect for the h1 tag added outside.

Dynamic styles

Since the style is written in JSX, it can read the props and state of the current component, and then dynamically adjust the style according to the state:

import React, { useState } from 'react';

const App = () => {
  const [bold, setBold] = useState(true);
  return (
    <div>
      <h1>
        Heading 1
        <style jsx>{`
          h1 {
            color: red;
            font-weight: ${bold ? 700 : 400};
          }
        `}</style>
      </h1>
      <button onClick={() => setBold(!bold)}>Toggle</button>
    </div>
  );
};

export default App;

global style

There are always cases where we need to write a global style. When we need to write a global style, we can add an attribute :global

<div>
  <style jsx global>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</div>
You can also add a class to a class , and only globalize this class. This is also used in CSS Modules::global()
<div>
  <style jsx>
    :global(.header) {
      color: #333;
    }
  </style>
</div>

For more usage and configuration, see the official documentation of styled-jsx .

5. Finally

Some people also classify CSS Modules as CSS in JS, but it does not break away from the mental model of separation of HTML and CSS, and there is no runtime after compilation, so this article will not classify it as CSS in JS.

There are many CSS in JS solutions. Although the usage is different, the basic idea is to give CSS the ability of JS. The biggest benefit is that it can dynamically adjust the style, which is especially useful in similar requirements such as switching themes and Dark Mode. Since they also have runtime after compilation, the performance will be reduced compared to the traditional solution.

Type-safe development through API specifications, and up to Mock Server

Shivashish Yadav — Tue, 25 Jan 2022 09:11:01 +0000

When working on front-end development, I often experience cases where the work becomes pending. It is ideal to proceed with the front-end work after planning and back-end development are completed sequentially. Still, in reality, in many cases, the result is performed in parallel with the kick-off for developing a specific function.

If there is no API development, waiting, or minor project changes, the front-end development area modifications that deal with the final product will snowball. I am actively utilizing development and mocking based on specification documents to minimize the number of blockers in this work stage.

Fixing the API spec

Once the requirements and initiatives have been formulated, the stage to fix the API specification is entered before proceeding with feature development. Setting and sharing API specs is a crucial step. If the API specification is unilaterally delivered or omitted, it may cause problems such as not having expected properties in a specific interface or mismatching types. Even if the API specification was unilaterally provided, it was indeed shared.

To prevent this, the steps of fixing and sharing the API specification are for all developers involved in developing the feature. Finally, the agreed API specification goes through the documentation phase, and Stoplight is used.

It is an editor that provides various functions such as API, endpoint, and model design. Additionally, the specification can be updated by linking with the Github repository. Finally, it returns the API specification document in YAML file format.

Automatically creating classes and interfaces containing API functions. The process in this section can be viewed as an example in the GitHub repository. It is time to proceed with development through the fixed API specification. It was said that the Stoplight editor finally returned the YAML file. If you provide this YAML file to Opanapi-generator, it automatically creates classes containing API functions and various interfaces necessary for defining API functions. Install the package, select a generator suitable for the project environment, and run the script to create the API.

~$ yarn add @openapitools/openapi-generator-cli -g
~$ openapi-generator-cli generate -i {yaml or json file} -g {generator name} -o {file path to be created} --config {config file}

The class containing the interface function and the related object interface are automatically created. In fact, I said bluntly, the advantages of automatically creating an API and interface are enormous.

When defining API functions in TypeScript, the amount of typing increases considerably, and the interface of the response object must also be accurately represented. The resources used here also help you focus on your business tasks. In addition, it helps to enable type-safe development based on API specifications by minimizing the potential for dormant errors in the work process.

Take advantage of parallel development productivity through Mocking.

I mentioned above the problem of realistically parallel development in developing a specific function. To minimize the pending state of the front-end development stage, before the actual API is developed, the mocking server is operated to receive the mock data and render it as if it is transmitted. When defining the interface in documenting the API specification, you can enter example data for the interface.

After that, you need to run the mock server. In this case, Prism provided by Stoplight is used.Provide the API specification in the form of Prism, YAML. You can run a mock server based on the API specification locally and receive the example data you wrote when defining the interface.

~$ prism mock {yaml or json file}`

You can focus on front-end development in parallel through the mock server even if the actual API development is not completed. It provides the advantage of maximizing productivity by minimizing the pending state.

As you finish

We talked about solving problems that may occur in a parallel development cycle by applying API specification-based development through Openapi-generator. In a real work environment that is not a development cycle that draws an ideal routine, but in parallel, it would be good to take care of type-safe development based on API specifications and productivity at the same time :)

What is SEO and how to do search engine optimization? Explained for begginers.

Shivashish Yadav — Thu, 20 Jan 2022 11:11:42 +0000

Introduction

What is SEO, and why is it important for a blog? The simple answer is SEO is the life of blogging. Because if you want to write any good article, if your article is not ranked properly, then the chances of getting traffic in it are negligible. In such a situation, all the hard work of the writers goes into the water.

In today's digital age, if you have to come in front of people, then online is the only way where you can be present in front of crores of people simultaneously.

Here you can be present through the video itself, or you can reach out to the people through your written content. But to do this, you have to come to the first pages of Search Engines because these are the pages which visitors like and trust more.

But reaching here is not that straightforward task because for this you have to do SEO of your articles properly. Meaning that they have to be optimized properly so that they can rank in the search engine. And its process is called SEO. Whereas in today's article, we will get information about what is called SEO and how to do it.

What is SEO

SEO or Search Engine Optimization is a technique by which we bring our post or page to the top on any search engine, or rank it. We all know what a search engine is. When it comes to search engines, then for your information, let me tell you that Google is the most popular search engine in the entire world, apart from this there are other search engines like Bing, Yahoo. With the help of SEO, we can keep our blog at No.1 position on all search engines.

For example, if we go to Google and search by typing any keyword, then Google shows you all the contents related to that keyword. All these contents that we see come from different blogs.

The result which we see at the top is on No.1 rank in Google, only then it has maintained its place at the top. On No.1 it means that SEO has been used very well in that blog so that it gets more visitors and that is why that blog has become famous.

SEO helps to bring our blog to No.1 rank in Google. This is a technique that increases the number of visitors to your website by placing it at the top of the search result of the search engine.

If your website is at the top of the search result, then internet users will first visit your site, which increases the chances of getting more and more traffic in your site and your income also starts getting good. It is very important to use SEO to increase organic traffic to your website.

What is the full form of SEO?

The full form of SEO is "Search Engine Optimization".

Why SEO is Important for Blog?

You have learned what SEO is, let us now know why it is important for the blog. We use SEO to make our website accessible to people.

Suppose I have created a website and have published good quality content in it, but if I do not use SEO, then my website cannot reach people and there will be no use of making my website.

If we does not use SEO, then whenever a user searches for a keyword, then even if there is any content related to that keyword in your website, the user cannot access your website.

This is because the search engine cannot find your site, nor will it be able to store the content of your website on its database. Due to which, it will be very difficult to have traffic in your website. That is why it is very significant to do SEO properly in your site.

Understanding SEO is not so difficult, if you learn it, then you can make your blog much better and increase its value in the search engine.

After learning SEO, when you use it for your blog, you will not see its result immediately, for this you will have to be patient and keep doing your work. Because the fruit of patience is sweet, and you will definitely see the color of your hard work.

Like I have already said that how it becomes necessary to do SEO for ranking and for traffic.

Why is SEO (Search Engine Optimization) so important?

Most users use Search Engines on the Internet to get answers to their questions. In such a situation, they pay more attention to the top results shown by the search engine. So if you also want to come in front of people, then you also have to take the help of SEO to rank the blog. That is, youYou have to come to the first page of the Google search result. SEO is not just for search engines, but having good SEO practices helps in increasing the user experience and also increases the usability of your website. Users mostly trust only the top results and this increases the trust of that website. That is why it is very significant to know in SEO, as well as keep yourself updated. SEO is also very essential for the social promotion of your website or blog. Because people who see your site in search engines like google, then most of them share them in social media like Facebook, Twitter, Pinterest. SEO plays an important role in increasing the traffic of any site. SEO definitely helps you to stay ahead in any competition. For example, if two websites are selling similar things, then the website which is SEO optimized attracts more customers to itself and their sales also increase while others cannot do that much.

Types of SEO

There are two types of SEO, one is On-page SEO, and the other is Off-page SEO. The work of these two is completely different, let us also know about them.

On-Page SEO
Off-Page SEO
Local SEO

1. What is On-Page SEO

On-page SEO work is done in your blog. This means to design your website properly which is SEO friendly.

Using the template in your website by following the rule of SEO. Writing good content and using good keywords in them which are most searched in the search engine.

Using keywords in the right place in the page like title, meta description, using keywords in the content makes it easy for Google to know on whom your content is written and helps to rank your website on Google page quickly. Due to which the traffic of your blog increases.

How to do On-Page SEO

Here we will learn about some such techniques, with the help of which we will do On-Page SEO on our blog or website in a good way.

1. Website Speed

Website speed is a very important link from the point of view of SEO. It has been found from a survey that any visitor stays on a blog or website for 5 to 6 seconds.

If it does not open within this time, then it leaves it and migrates to another. And this also applies for Google because if your blog does not open soon then a negative signal reaches Google this blog is not that good, or it is not quick. So keep your site speed as good as possible.

Here I have given some important tips by which you can speed up your blog or website:

Use simple and attractive themes
Don't use too many plugins
Keep the image size to a minimum
Use W3 Total cache and WP super cache plugins

2. Navigation of the Website

It should be easy to move around in your blog or website so that no visitor and Google have any problem in going from one page to another. The more smooth the navigation of the website, the more ease any search engine will have to navigate the site.

3. Title Tag

Make the title tag very good in your website so that if any visitor reads it, then click on your title as soon as possible, this will also increase your CTR.

How to make good title tag: Do not use over 65 words in your title because Google does not show title tag in google searches after 65 words.

4. How to Write the URL of the Post

Always keep the URL of your post simple and as short.

5. Internal Link

This is a great way to rank your post. With this, you can be interlinking your related pages with each other. With this, all your interlinked pages can be ranked easily.

6. Alt Tag

Use images in the post of your website. Because you can get a lot of traffic from images, so while using the image, do not forget to put ALT TAG in it.

7. Content, Heading and Keyword

As we all know about the content that this is a very important link. Because Content is also called King and the better your content, the better the site's valuation will be. Therefore, write content of over 800 words at least.

With this you can also give complete information, and it is also good for SEO. Never steal or copy content from anyone else.

Heading: Special care should be taken of the headings of your article as it has a great impact on SEO. The title of the article is H1 and after this you can nominate the subheadings with H2, H3, etc. With this, you must use the focus keyword.

Keyword: Use LSI Keyword while writing your article. With this, you can easily link people's searches. With this, BOLD significant keywords so that Google and visitors know that these are important keywords, and it will attract their attention towards it.

These were some points about some information about On-Page SEO.

2. What is Off-Page SEO

All the work of Off-Page SEO is done outside the blog. In Off-page SEO, we have to promote our blog, like visiting many popular blogs, commenting on their article and submitting the link of our website, we call it backlink. The website benefits a lot from backlinks.

Make an attractive page of your website on social networking sites like Facebook, Twitter, Quora and increase your followers, this has the chances of increasing more visitors to your website.

In big blogs which are very popular, submit guest post on their blog, this will allow visitors to their blog to know you and traffic will start coming to your website.

How to do Off-Page SEO

Here I will tell you about some Off-Page SEO Techniques which will prove very useful for you later.

1. Search Engine Submission

Your website should be submitted properly in all search engines.

2. Bookmarking

The page and post of your blog or website should be submitted on the website with Bookmarking.

3. Directory Submission

Your blog or website should be submitted to a directory with a popular, high PR.

4. Social Media

Create a profile on your blog or website page and social media and add a link to your website like Facebook, Twitter, LinkedIn

5. Classified Submission

Advertise your website for free by going to the Free Classified Website.

6. Q & A site

You can ask any question by going to the question-and-answer website, and you can put a link to your site.

7. Blog Commenting

By visiting the blog related to your blog, you can comment in their posts and put a link to your website (the link should be placed where the website is written).

8. Pin

You can post the image of your website on Pinterest, this is an excellent way to increase traffic.

9. Guest Post

You can guest post by visiting the blog related to your website, this is the best from where you can take a do-follow link and that too in the right way.

3. What is Local SEO

Often people ask what is Local SEO? If I believe, then the answer lies in the question itself.

If you do Local SEO, then this is the summation of two words, Local + SEO. SEO done keeping in mind a local audience is called Local SEO.

This is a technique in which your website or blog is specially optimized so that it ranks better on the search engine for a local audience.

By the way, with the help of a website, you can target the entire internet, whereas if you want to target only one particular locality, then for this you have to use Local SEO.

In this, optimize the name of your city, while its address details will also have to be optimized together. To say it briefly, then you have to optimize your site in such a way that people can know you not only online but also offline.

Example of Local SEO

If you have a local business, such as a shop, where people often visit you, then if you optimize your website in such a way that people can easily reach you in real life too.

If here, you only target your own local area and SEO optimized your site accordingly. Then this type of SEO is called "local SEO".

What is the difference between SEO and Internet Marketing?

Many people have many doubts about SEO and Internet Marketing. They think that these two are often the same. But in response to this, I want to say that SEO is a type of tool, it can also be called a part of Internet Marketing. By using it, it becomes very easy to do Internet Marketing.

What is the difference between SEO and SEM?

The major difference between SEO and SEM is that SEO is an important part of SEM. Let me tell you about both SEO and SEM.

SEO or Search Engine Optimization is a process by which a blogger optimizes his blog or website in such a way that he can rank the articles of the blog in the search engine and bring free traffic to his blog from there. The main purpose of SEO is that your blog/website can be optimized properly so that it can get a better ranking in the search engine.
SEM or Search Engine Marketing is a marketing process by which you can make your blog more visible in search engines so that you can get traffic, whether it is free traffic (SEO) or paid traffic (Paid Search Advertisement). With SEM you can get more things than SEO. Because it is not only limited to free traffic but it also includes other methods such as PPC advertising, etc.

Information about SEO Terms

If you have a blog or a website, then you will know a lot about basic SEO, how it works. But I know that there are many of you who do not even have any idea about Basic SEO Terms.

That's why I thought why not give information about some very important Basic SEO Terms to you people so that you can also know about it.

Backlink

Also called its in link or simply link, it is a hyperlink to another website that points to your website. Backlinks are very important from the SEO point of view, as it directly influences the Search Ranking of any webpage.

PageRank

PageRank is an algorithm that Google uses to estimate which relative significant pages are in the web.

Anchor text

Anchor text of any backlink is a type of text which is clickable. If your Keyword is available in your Anchor Text, then it will help you a lot from the point of view of SEO as well.

Title Tag

Title Tag is mainly the title of any web page and this is a very important factor for Google's Search Algorithm.

Meta Tags

Just like Title Tag, by using Meta Tag, Search Engines get to know what is in the content in the pages.

Search Algorithm

With the help of Google's search algorithm, we can find out which web pages are relevant in the whole Internet. About 200 algorithms work in Google's Search Algorithm.

SERP

Its full form is Search Engine Results Page. It basically shows only those pages which are relevant according to Google Search Engines.

Keyword Density

This Keyword Density shows how many times any keyword has been used in the article. Keyword density is very important from the point of view of SEO.

Keyword Stuffing

Like I have already said that Keyword Density is very important from the point of view of SEO but if a Keyword is used excessively, then it is called Keyword Stuffing. This is called Negative SEO because it has a deleterious effect on your blog.

Robots.txt

This is nothing more than just a file which is kept in the domain's root. Using this, the search bots are informed about the structure of the website.

Q n A

What are Organic and Inorganic results?

There are mainly two types of listings on SERP (Search Engine Result Page) – Organic and Inorganic.

In this, we have to pay Google for Inorganic Listing. They are paid and money has to be paid in it.

Whereas organic listing is completely free, we can also come on the top page of Google without paying, but for this you have to do SEO first.

Is SEO easy to teach or do?

There is no simple answer to this. Because no one can ever achieve complete mastery over SEO, the reason for this is that there are always changes in it.

In such a situation, if you are serious about blogging, then you must keep information about SEO tutorial. By doing this, they are going to be of great use to you later. There are no such rules of SEO, rather it is based on some Google Algorithms, and it keeps on changing.

We must note one thing that if someone tells you he is a big SEO Expert, then never believe him because till date no one has been able to mastery on SEO.

This thing is like this, and it keeps changing with time and according to the need. But still there are some fundamentals of Google SEO guide which are always the same. That's why it is important that bloggers always keep themselves updated with new SEO techniques.

With this, you will know about the trends going on in the market, so that you can also bring necessary changes in your articles, which will help you to rank later.

Is SEO always changing?

Yes, SEO is always changing. This is because the search engine's algorithm is always changing, in the same way we also have to change the SEO in our site so that it appears at the top of the SERP.

What is the best SEO strategy?

No SEO strategy is the best. This is because the strategy or technique of SEO is always changing. Therefore, it would not be right to consider any one strategy as the best. It would be better that you keep doing your own research and experimentation, by this you will know about the right working things.

Does Page Speed Matter in Google Ranking?

Yes, Page Speed has a different importance in Google ranking. The better the page speed, the more easily you can rank on Google.

What did you learn today?

You all must have understood what is SEO. If you have any doubts about this article, or you want that there should be some improvement in it, then you can write low comments for this.

Easily now you can feel free to answer what is SEO. From these thoughts of yours, we will get a chance to learn something and improve something.

Basic SEO Terms and their Meanings

Shivashish Yadav — Thu, 20 Jan 2022 10:25:35 +0000

Introduction

Today we will know about some Basic SEO Terms and their meanings. SEO is search engine optimization. When you search for something in Google, it shows you its results.

It only shows you the same results with which your search term matches. Whatever bloggers and website owners are, they optimize their content in such a way that they come in search results. We call this SEO.

If you are interested in digital marketing, then it is very important for you to be aware of it. There are many terms of SEO, if you do not know about them then you cannot understand it.

Unless you know the English alphabet from A to Z, you cannot make any word or sentence. Similarly, it is significant to know about the basic terms of SEO.

As a beginner, I have told you some terms of SEO and their meaning below. Do these before you go to Advanced. In this way, you will slowly remember all the terms, when you will practically use them.

Basic SEO Terms and Their Meanings

Alt-Text

This is done in images. With the help of this, the search engine gets to know what this image is about.

Anchor Text

Used to link to another page. You can do it in the image as well.

Backlink

This is a link that is done from another site to your site.

Black Hat SEO

This technique is used to rank your site in search engines quickly. But it is not safe, and it puts you at risk of getting a penalty.

Bot/Spider/Crawler/GoogleBot

Search Engine sends their bots to other sites. Through which he could read the contents of your site. This is an automatic process.

Keyword

This is a phrase or sentence, which people search in the search engine. There are two types of keywords; Short Tail and Long Tail. The keyword which lasts up to 1-3 words is called Short Tail and the keywords with more than that are called Long Tail.

Metadata

The search engine does this to make the search results appear properly.

Meta Title

This is the title of your article or website that describes your content.

Meta Description

It is used in the search result to describe the content.

No-Follow

This is an attribute that is used in anchor text. With this, the search engine understands the app is not following that link. It is used in external links.

On-Page SEO

The technique you use in your site to make your website or blog post SEO friendly is called On-Page SEO. In this you have to optimize texts, images, tags, URL structure, internal links, headers.

Off-Page SEO

The technique used to improve the ranking position of your website in Search Engines is called Off-Page SEO.

Robot.txt file

This file is an art to communicate with the search engine robots and tells them which site to the index which page to index and which page not.

PageRank (PR)

Google gives a rank to every website and page from 0 to 10 by looking at the quality of their site and SEO score. Who's more his page ranks better in Google. But more PR updates are not coming from last year.

SEO: Search Engine Optimization

This is a process to improve the search engine score of your website. Good SEO decides which page of your page will appear in the search results.

Sitemap

Sitemap contains details of all the contents of your blog or website. By submitting it to the search engine, he can read all your pages well.

White Hat SEO

This is called good quality SEO technique. Because of this, it takes time to rank your page, but you are completely safe from penalties.

Best Free Keyword Research Tool for SEO

Shivashish Yadav — Sat, 15 Jan 2022 18:58:52 +0000

In today's post, I will tell you about the Top 5 Free Keyword Research Tools. Nowadays, there are many paid tools on the internet, which are difficult for beginners to purchase. Before knowing about the Top 5 Keyword Research Tools, we know why it is important to do keyword research?

Why is it significant to do keyword research?

Keyword research is very significant in blogging. Keyword research comes in ON-Page SEO. If your ON-Page SEO is good, then your chances of ranking in Google increase. Good keyword research gives you the following benefits.

High CPC
Increase Organic Traffic
High Ranking
Increase DA of Website due to Ranking
Know Every Keyword Search Volume

1.Ubersuggest

Uber Suggest is a free tool. This tool gives you the same service as a paid tool for free. This tool is from Neil Patel, who is a huge blogger and YouTuber. In this tool, you can do keyword research for free. You get the information of all the keywords.

Features of Uber Suggest

no limit to find keywords
You can easily see the keyword difficulty.
Which keywords have high CPC they can see?

2. Google Keyword Planner

Google Keyword Planner is a Google product, which is free. Google Keyword Planner is also an excellent tool for doing keyword research. This tool is 99% accurate because of being from Google. This tool is also a good and free tool.

Features of Google Keyword Planner

It's very easy to use.
99% accurate.
It's best thing is that it is a service of Google itself.

3. Keyword Shitter

Keyword Shitter is also a great tool. You do not have to enter just one keyword into this tool. As soon as you enter 1 keyword, many keywords come in front of you in suggestive. You can suck any good keyword out of them. This tool is also free.

Features of Keyword Shitter

Many keywords are found in the suggestion.
It's very easy to use.

4.KW Finder

KW Finder Tool is also a great tool, you can easily do keyword research in it. The special thing about this tool is that it allows you to suggest keywords and also tells its diff. This tool also tells the details of your compressor.

Features of KW Finder

Keyword Difficult also appears.
Auto suggest keywords |
The competitor's detail is visible.

5. Google Auto Suggest

When you search for something in Google, then you see the auto-suggest keywords below. You see this keyword for free; it is a service of Google itself. According to what all the people in the world search, Google proposes your keywords.

Features of Google Auto Suggest

Google's only service.
From which keywords people search, it gives suggestions accordingly.

How to Improve Page Rank of Your Blog by Creating Quality Backlinks.

Shivashish Yadav — Thu, 13 Jan 2022 09:25:14 +0000

Introduction

If you have read about SEO somewhere, or you are a newbie blogger, then you must be a little familiar with the word 'Backlinks'. You must have also thought that what is Backlink and what is its importance on SEO. You use On-Site / On-Page SEO Techniques like Keywords, Meta Description, etc. to increase the traffic of your websites, but in the absence of more information, keep ignoring the importance of Backlinks.

Backlinks are very important for your blog because, because of backlinks, search engines check the authority of any website. Backlinks are an important factor in determining the search rank of a website by search engines.

What are Backlinks?

Backlinks, as the name suggests, are links that connect your web page to another web page. That second page can be on your own website and can also be on any other website. The link appearing on any other page, on clicking which visitors come to your page, is called a backlink. These are also called Inbound Links (IBLs). They are called backlinks because they point back to your page from another page.

The backlinks that are in our own domain are called internal links, and the backlinks on other websites are called external links. Proper use of Quality Backlinks improves the Search Engine Ranking of your website.

Backlinks also help search engines a lot in finding links to your website and accessing your website through them. Especially for a new website or blog, it is even more necessary to create Quality Backlinks because they make quick search and indexing of your site easier for Search Engines. They send referral traffic to your website or blog, which is Targeted Traffic and its bounce rate is very low.

Meaning and Importance of Quality Backlinks

Quality Backlinks are those backlinks that are got from a High PageRank website and such website which is related to the content of your blog. Like if you are blogging on Health Niche, then it is important for you to have the backlinks that you are getting from other high-page ranked health websites.

A High-Quality Backlink can be a thousand times more effective than any Normal Backlink. Quality Backlinks are very important to improve the Search Rankings of our website. If your content is getting organic backlinks from a good and high page ranked website, then the chances of getting a higher position in the search engine ranking increase manifold compared to other pages of that page or content. Therefore, it should be your goal to create quality backlinks for your homepage and other pages.

6 Ways to Build Quality Backlinks

Many times bloggers do not get any benefit in SEO even after creating many backlinks of their blog or website. The only reason for this is that their backlinks do not have quality backlinks. For example, suppose your website is about Technology Reviews and you have created your backlink on a website related to Dog Care. Such backlinks will not bring much benefit to your SEO. Because Search Engines see the similarity of both Backlink Hosting Site and Targeted Site along with Quantity.

Before creating backlinks, keep in mind that any blog post you are making links to should have High-Quality Content in that blog post and if the user clicks and reads your blog post, then it should benefit. The second important thing is that do not make backlinks everywhere, only on such relevant websites, on which the user will benefit by leaving the link.

You can use the following ways to create Quality Backlinks-

Guest Blogging

Guest blogging is one of the best ways to generate quality backlinks. This is the most commonly used method. Find some Famous Blogs related to your website that accept Guest Posting. Then write an attractive and Informative Post on those blogs and include a link to your blog in that post. Not only will you get a good backlink from this, but the visitors of that website will read your post and will be attracted to your website.

Comment on other blogs:

Commenting on the posts of other blogs is also a good way to get backlinks. It should be kept in mind that the blog supports Do-Follow Links. Do-Follow Links means those links from which we get the benefit of Backlinks. Not all blogs support Do-Follow Links and hence we do not get any referral from the comments made on them. Therefore, we should comment on more and more Do-Follow Blogs. Leave only a small comment, the comment also does some value addition, then only you will get the benefit.

Use Discussion Platforms

Some discussion platforms are also very helpful in generating quality backlinks. The most prominent of these are Quora.com and Yahoo Answers. Take part in the discussion related to your Blogging Niche going on these Discussion Platforms, answer the questions logically and leave the link of your website there. Their people will visit your website after being impressed by your answer.

Use Blogging Community:

Make the most of blogging communities like Indiblogger, DoSplash, Inbound, and Blog Engage. Post the content of your website on it. If your content is good and informative, then you will get Upvotes. This will not only improve your search engine ranking, as well as the backlink of your website on these communities will also increase the traffic of your website in a big way.

Exchange the link with other bloggers related to your niche:

Link Exchange with other bloggers related to the area of your website. Your website will also get backlinks from this. In Link Exchange, two bloggers place each other's links in their own blog posts, due to which both get quality backlinks. This is a freeway to get Quality Backlinks, and it also has a Guaranteed SEO Boost. But keep in mind that this should not be only for backlinks, your links should benefit the user, otherwise, this link can harm your search engine. Create links in such a way that they should look real and if the user clicks on that link, then he should get useful information.

Use internal links:

Internal links are those quality backlinks that we use to give a link to another post in one post of our website. If they are used properly, then there can be a significant improvement in search engine ranking. Search Engine Ranking is determined by your keywords, visitors, and the time they spend on your website. The biggest advantage of internal links is that they are helpful in taking the visitor from one post to another, due to which the visitor spends more time on your website. In this way, your Search Rankings improve.

Apart from these methods, you can also use Social Media, Blog Directories, and Public Forums to get quality backlinks. Quality Backlinks always prove to be useful in increasing traffic and SEO.

DEV Community: Shivashish Yadav

Want free learning resource at one place? Check this website.

freelearninglist.org

Finding similar movies, TV-series made easy.

BestSimilar.com

What is Cybersecurity? Its types, advantages and importance.

What is Cybersecurity

How Cybersecurity Works

Why Cybersecurity is Important

Types of Cyber ​​Crime

1. Hacking

2. Cyber ​​Theft

3. Cyberstalking

4. Identity Theft

5. Malicious Software

6. Phishing

7. Child Pornography and Abuse

8. Man in the Middle (MITM) Attack

9. Denial of Services (DoS)

10. Spoofing

11. Salami Slicing Attack

Types of Cybersecurity

1. Network & Gateway Security

2. Data Loss Prevention (DLP)

3. Application Security

4. Email Security

5. Antivirus Security

6. Network Access Control

Benefits of Cybersecurity

How To Write SEO Friendly Blog Post Which Ranks Easily.

Introduction

How to Write SEO Friendly Blog Posts

1. Keyword Research

2. Put the Keyword in the Title

3. Use keywords in your first paragraph

4. Use Image Alt Tag

5. Use Heading and Subheading (H2 and H3 Tags)

6. Bold Important and Related Keywords

7. 1 to 2 Italic keywords

8. Outbound Link To High-Quality Sites

9. Internal Links to Related Article

10. Write High Quality Content

11. Blog URL

12. Use Meta Description

13. Pay attention to important keywords

My final opinion on this article

React design pattern you should know about.

How do I manage directories

Design pattern

Presentational and Container Component Pattern

Advantages

Why I don't recommend it anymore

Atomic Design Pattern

A glimpse of how it is used in practice

React & Vue Talk

modern front-end framework

Three Principles of React

Similarities and differences between Vue and React

How CSS works in React.

1. Inline styles

2. class selector

3. CSS Modules

4. CSS in JS

5. Finally

Type-safe development through API specifications, and up to Mock Server

Fixing the API spec

As you finish

What is SEO and how to do search engine optimization? Explained for begginers.

Introduction

What is SEO

What is the full form of SEO?

Why SEO is Important for Blog?

Why is SEO (Search Engine Optimization) so important?

Types of SEO

1. What is On-Page SEO

How to do On-Page SEO

1. Website Speed

2. Navigation of the Website

3. Title Tag

4. How to Write the URL of the Post

Types of Cyber Crime

2. Cyber Theft

Does Page Speed Matter in Google Ranking?