DEV Community: Md Farid Hossain

What's a CSS Selector? How works CSS Selector?

Md Farid Hossain — Fri, 04 Mar 2022 18:35:08 +0000

“Selectors are used to selecting elements in an HTML or XML document, in order to attach (style) properties to them.”

The most used CSS selectors are by class and by id, nevertheless, there are many selectors which you can use easily and fairly to add styles into a set of elements.

Let’s take a look at all the different kinds of available selectors along with a brief description of each one of them.

The Selectors

div p → Descendant Selector

It selects an element inside another element.
This selects all the p elements inside of div.

div p {
  bacground-color: #fff;
  display: flex;
  text-aling: center;
}

#user.admin / ul.class → Descendant Combinator

You can combine any selector with the descendent selector.

user.admin selects all elements with id="user" that also have class="admin".

ul.list selects all ul elements that have class="list".

#user.admin, ul.list {
  border: none;
  text-align: left;
  width: 100%;

}

*** → The Universal Selector**

You can select all the elements with the universal selector.
div * selects any element inside all div elements.

ul.something * selects every element inside all ul class="something" elements.

div * {
  color: #F8386D;
  line-height: 26px;
}

div + p → Adjacent Sibling Selector

It selects an element that directly follows another element.

This selects the p elements that directly follow div tag. Elements that follow another one are called siblings.

span + .intro selects every element with class="intro" that directly follows a span.

span + .intro {
  color: rgb(182,216,218);
  background: #D37C71;
}

div ~ p → General Sibling Selector

You can select all siblings of an element that follow it. This is like the Adjacent Selector (div + p), but this one gets all of the following elements instead of one.

div ~ p {
  display: flex;
  align-items: center;
}

div > h1 → Child Selector

It selects direct children of an element.

You can select elements that are direct children of other elements.
div > h1 selects all h1 that are direct children div.

div > h1 {
  font-size: 16px;
  width: 100%;
}

:first-child / :last-child → First, last Child Pseudo-selector

You can use these selectors to select an element that is the first child / last child element inside another element.

ul li:first-child selects all first child p elements that are in a div.

ul li:last-child selects the last li elements inside of any ul.

ul li:first-child {
  padding: 5em;
  margin: 0 1px 0 -4px;
}

ul li:last-child {
  font-size: 16px;
  text-decoration: none;
}

:only-child→ Only Child Pseudo-selector

It selects any element that is the only element inside of another one.

ul li:only-child selects the only li element that is in a ul.

ul li:only-child {
  color: #1264a3;
  padding: 0 12px 0 15px;
}

:nth-child(A) → Nth Child Pseudo-selector

It selects the nth (Ex: 1st, 3rd, 12th, etc.) child element in another element.

div p:nth-child(8) selects every p element that is the 8th child of a div element.

div p:nth-child(8) {
  color: #FA6887;
  height: 26px;
  width: 100%;
}

:nth-last-child(A) → Nth Last Child Selector

It selects the children from the bottom of the parent.

ul li:nth-last-child(2) selects all second-to-last child elements.

ul li:nth-last-child(2) {
  display: flex;
  font-size: 16px;
  justify-content: center;
}

:first-of-type → First of Type Selector

It selects the first element of that type within another element.

span:first-of-type selects the first span in any element.

span:first-of-type {
  display: block;
  font-size: 18px;
  margin-top: 3rem;
}

:nth-of-type(1) → Nth of Type Selector

It selects a specific element based on its type and order in another element, either 'even' or 'odd' instances of that element.

.example:nth-of-type(odd) selects all odd instances of the class=”example”.

div:nth-of-type(2) selects the second instance of a div.

.example:nth-of-type(odd) {
  line-height: 1.5;
  padding: 10px 0;
  text-align: center;
}

Sending Emails with Email Js

Md Farid Hossain — Fri, 25 Feb 2022 11:57:31 +0000

Sending Emails with Email Js in React.

This service allows us to connect our email service, build an email template and send it from JavaScript without any server code. Let’s check out the scope.

Create an account and choose an email service to connect with. There are the popular transactional services options available, such as Amazon SES or Mailgun, as well as personal services like Gmail or Outlook. You can also add a custom SMTP server. That’s what we’re going to do since we use Mailtrap.

Create an email template using the built-in editor. The editor provides plenty of options for content building and other useful features, such as auto-reply, reCAPTCHA verification, and more. It’s also necessary to understand the basics of coding your own HTML email template. For this, read our Guide on How to Build HTML Email. Once this is done, click Save.

One of the major benefits of EmailJS.com is that the typical email attributes are hidden. The template includes the recipient field and it cannot be overridden from JS, so you send the template you have configured previously.

Now you need to install EmailJS SDK. This can be done with npm:

npm install emailjs-com --save

The actual email sending can be carried out via two methods: emailjs.send or emailjs.sendForm. Here are the code examples for both of them:

emailjs.send

var templateParams = {
    name: 'James',
    notes: 'Check this out!'
};

emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams) //use your Service ID and Template ID
    .then(function(response) {
       console.log('SUCCESS!', response.status, response.text);
    }, function(error) {
       console.log('FAILED...', error);
    });

emailjs.sendForm

var templateParams = {
    name: 'James',
    notes: 'Check this out!'
};

emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams) //use your Service ID and Template ID
    .then(function(response) {
       console.log('SUCCESS!', response.status, response.text);
    }, function(error) {
       console.log('FAILED...', error);
    });

Run it in the browser and check out the Mailtrap Demo Inbox. It works!

Pricing

EmailJS offers a free subscription plan that allows you to send up to 200 emails per month using only two templates. In addition, you’ll have a limited list of contacts and email size (up to 50Kb). Higher quotas are available for paid subscriptions: Personal ($5/month), Professional ($15/month), and Business ($50/month).

What is CRUD?

Md Farid Hossain — Thu, 23 Dec 2021 17:24:30 +0000

What is CRUD?
CRUD stands for Create, Read, Update, and Delete.
Create — To insert any record to the database.
Read — To retrieve records from the database.
Update — To update a record in the database.
Delete — To delete a record in the database.
If you are new to Node and Express JS, do visit my previous blogs on Node JS, which explains the basics of Node and Express JS.

What is Custom Hook?

Md Farid Hossain — Thu, 23 Dec 2021 17:02:34 +0000

What is Custom Hook?
Custom Hook is a JavaScript function which we create by ourselves, when we want to share logic between other JavaScript functions. It allows you to reuse some piece of code in several parts of your app.
When and How to Use
When we want to share the logic between other components, we can extract it to a separate function. According to official documents, the custom hook has to:
start with the key word use
call other hooks
Because custom hook is a JS function, the Rules of Hooks apply to it as well. Those are:
Never call Hooks from inside a loop, condition or nested function
Hooks should sit at the top-level of your component
Only call Hooks from React functional components
Never call a Hook from a regular function
Hooks can call other Hooks
How to Create Custom Hook?
You create the hook same way as you create any JS function. Look at it as a refactoring of code into another function to make it reusable. It will speed up your productivity and save your time.
Let's consider the following example, where we have useEffect()hook which updates the document title:

import {useState, useEffect } from 'react';

    export const Counter=()=> {
      const [count, setCount] = useState(0);
      const incrementCount = () => setCount(count + 1);
      useEffect(() => {
        document.title = `You clicked ${count} times`
      });

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={incrementCount}>ClickMe</button>
        </div>
      )
    }

What we want to do is to create a custom hook, which accepts a piece of text and updates the document title for us. Here is how we do that:

const useDocumentTitle = (title) => {
        useEffect(() => {
          document.title = title;
        }, [title])
      }

Our useDocumentHook() now accepts the string and calls useEffect() hook inside, which updates the document title with a given title, when the title was changed (we pass title as dependency here).
So our final code would look like this:

import { useState, useEffect } from "react";

const useDocumentTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

export const Counter = () => {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  useDocumentTitle(`You clicked ${count} times`);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  );
};

And that is all, as simple as that :) In my next blog post I'll share 5 the most commonly used custom hooks, which make your development faster and easier.

CSS Transformations

Md Farid Hossain — Thu, 23 Dec 2021 16:42:29 +0000

CSS Transformations

CSS transformations can be split into two categories, two-dimensional and three-dimensional. We’ll look at two-dimensional transformations first. Two-dimensional CSS transformations operate on the X (horizontal) and Y (vertical) axes.

CSS Transform: Translate
The translate() method translates, or moves, a page element up, down, left, and/or right on the page by a specified amount. In the parenthesis, the first number specifies the horizontal distance, and the second number specifies the vertical distance.
For example, we can translate our div by a number of pixels:

transform: translate(100px, 75px);

TranslateX():
In addition to translate(), we also have the translateX() and translateY() methods. translateX() moves an element only horizontally, and takes one argument:

transform: translateX(100px);

TranslateY():
Similarly, the translateY() method moves an element vertically. It also takes just one argument:transform: translateY(100px);

CSS Transform: Scale
The scale() method changes the size of the target element. If we provide one argument, this increases or decreases the size of our div by a multiple of its original size:

transform: scale(2);

CSS Transform: Rotate
The rotate() function, as you might guess, rotates an element. By default, the element will rotate around its center. We can specify the rotation in terms of degrees, radians, or turns (from 0turn to 1turn):

transform: rotate(45deg);

CSS Transform: Skew
The skew() method skews, or slants, an element along its X and/or Y axes. Its arguments specify the horizontal and vertical angle of the skew, respectively.

transform: skew(50deg, -15deg);

The CSS transform-origin Property
transform-origin is another CSS property that can be used with transform. The transform-origin property changes the position of the origin, the point where the transformation starts or is based around.
This is most clearly demonstrated with the rotate() method: We can use transform-origin to move the center point of rotation:

transform: rotate(45deg);  transform-origin: top left;

CSS Transform: Perspective
The perspective() value sets the depth of the element on the Z-axis. It toggles how “close” or “far away” the element appears. perspective() is used in conjunction with other 3D transformation methods, as we’ll see next.
CSS Transform: rotateX() and rotateY()
Like rotate(), the rotateX() and rotateY() values rotate our div, but “around” the X and Y-axes:

transform: perspective(500px) rotateY(40deg);
transform: perspective(500px) rotateY(60deg); 
transform: perspective(500px) rotateY(80deg);

Don't forget to share this post!