DEV Community: Garima

Step-by-Step guide to set up Node server with TypeScript

Garima — Tue, 29 Oct 2024 03:44:30 +0000

So, I’m pretty new to TypeScript. As someone who’s been working with Node.js and JavaScript for a while, I thought switching to TypeScript would be a breeze. You know, it's just JavaScript with types slapped on, right? Well, I quickly realized it’s not that simple.

I wanted to find a good guide or video that explained how to build a Node.js server with TypeScript from scratch—something that didn’t feel like a puzzle missing half the pieces. But honestly, most of the stuff out there either skimmed over the basics or assumed I was already some TypeScript expert. It was frustrating!

That’s when I thought, why not write down everything I’ve learned so far? If you’re a JavaScript or Node.js developer like me, and you’re struggling to find a decent step-by-step on how to get started with TypeScript, I’ve got you covered. Let’s make this transition as smooth as possible, without the head-scratching moments.

Alright, let’s dive in! We will set up a Node.js server with TypeScript, and we will look at some other cool tricks along the way.

Step 1: Initialize Your Node Project

First things first, we need to initialize a Node.js project. Open up your terminal, go to your project folder, and run this command:

npm init -y

The -y flag just skips all the annoying setup questions like package name, version, etc. It says "yes" to everything, and bam! You’ve got yourself a package.json file. This is where Node.js tracks all the dependencies and scripts for your project.

Step 2: Create Your First File

Next up, create a file named index.js. For now, we’ll work in plain JavaScript to see how things work before we switch to TypeScript.

In index.js, let’s try importing a package. The traditional way of doing this in Node.js is by using CommonJS syntax:

const fs = require('fs');

Here, we are using the built-in file system module, a common pattern in Node.js. If you’ve worked with JavaScript before, this should be familiar. However, most developers today prefer using the import-export syntax as it looks cleaner, more organized, and fancy.

Now if we convert this to the new syntax

import fs from 'fs';

Now of we try to run this code we might be getting some errors stating some warning saying we cannot use this ES module unless we update our package.json and change the type to module

Simply add type: 'module' in the package.json file. This tells Node to use Es module instead of require. And now our code might be working fine.

type: 'module'

Now, let's talk about Typescript because this is what this blog is all about. Go ahead and install typescript as a dev dependency because we don't need it in the production environment. You can use any package manager you want to use for installing the packages whether it be pnpm, bun, npm or whatever.

npm i typescript --save-dev

Yeah, we have installed it but what exactly is typescript?

TypeScript is a superset of JavaScript, meaning it is built on top of JavaScript by adding optional static typing. This means you can define the types of variables, functions, and objects, helping to catch errors early in the development process.

Now this is important! TypeScript code needs to be compiled into regular JavaScript so that it can run in browsers or Node.js environments, as they don't natively understand TypeScript. And now we know why we don't need it in the production environment.

To convert the Typescript code to Javascript, we need to add a script in out package.json that will run the Typescript compiler that converts the TS code to the JS or technically speaking building the application. Go to the package.json and inside the scripts object add a build command that helps us to do the covering thing.

scripts: { 
build: "tsc".
// ... rest of the commands
}

Typescript needs some configurations to get started with it. Before actually starting the configuration let's organise out root directory. Create a src folder and drag the index.js file we just created and change the extension to .ts now we have an index.ts file inside the src folder.

When using node built-in modules you might get an error that says it cannot find corresponding type declarations. In lay man, it says install the types for node. Install the types for node using this command and the error should disappear.

npm i @types/node --save-dev

Run tsc --init, you might be able to see a tsconfig.json file if not go ahead and create it, we don't have to worry about it. We will now configure typescript to make it behave like we want it to.

{
  "compilerOptions": {
    "target": "es2020",
    "module": "NodeNext",
    "rootDir": "./", // Update this to your source directory
    "outDir": "./dist" // Update this to your desired output directory
  },
  "include": ["./" ], // Ensure this matches your source directory
  "exclude": [ "node_modules", "dist"] // Exclude output and dependency directories
}

You can copy-paste the configurations above or create your own to, but trust me this config works for almost all of the TS projects.

target: Specifies the JavaScript version that TypeScript should compile to. "es2020" here means the compiled code will use ECMAScript 2020 features.

module: Determines the module code generation method. "NodeNext" is suited for modern Node.js environments that use ES Modules (import/export syntax) rather than CommonJS.

rootDir: Specifies the directory where your source code files are located. "./" means the root directory, but you can change it to your specific source folder.

outDir: Defines where the compiled JavaScript files will be output. "./dist" sets this to the dist folder, so all compiled files go there.

include: Specifies which files and folders to include in the compilation. "./" includes all files in the root directory. Adjust it if your source files are in a different folder.

exclude: Excludes certain directories from compilation, typically those you don’t want TypeScript to process. Here, "node_modules" (dependencies) and "dist" (output folder) are excluded to avoid redundant checks.

Go into the terminal and run the build command we just wrote in package.json

npm run build

Now, you might be able to a dist folder in your root directory containing an index.js file. This command generates the dist folder that contains the Javascript code that we can actually run on NodeJs.

Voila! We are done with setting up typescript for creating our Nodejs server using Typescript. There are tons of other options to configure the tsconfig but I don't think we would need to use them.

Set up a Node Server

Creating a Node server will work the same as we do it while working with Javascript. We just need to install types for our dependencies eg. express node module. We need the express module in production environment and types are needed only the development environment.

Install dependencies

npm i express;
npm i ts-node @types/express --save-dev

Basic Server

import express, { urlencoded, json } from "express";

const app = express();

app.use(urlencoded({ extended: true }));
app.use(json());

app.listen(4000, () => {
  console.log(`Server is listening at port 4000`);
});

We're done with setting up a Node server. Run npm run dev, your server might be up and running.

Now the question is do we need Typescript?

Whether or not, it totally depends on one's project's needs. But, I believe using Typescript makes Javascript somewhat strict. It provides type-checking and various other features. As Javascript is a dynamically typed language, it can do blunders sometimes, you may never know what is leading to the server crash. Where you might be accidentally updating a string var with an integer. Javascript is sweet it will allow you to do that, but Typescript no,no sweetheart!

In the end, it's all Javascript :)

Want to connect?

twitter · blogs · portfolio · email · linkedin

Written and edited by me❤️

Unlock the Power of Web Scraping with Proxies and ScrapeOps Monitoring

Garima — Tue, 10 Sep 2024 05:27:49 +0000

In today's fast-paced digital world, businesses, marketers, and developers rely on web scraping to gather crucial data from various websites. But have you ever wondered what keeps your web scraper running smoothly without getting blocked? That’s where proxies come in.

What is a Proxy?

A proxy acts like a middleman between your computer (or scraper) and the website you're trying to gather data from. Instead of directly connecting your scraper to the target website, the proxy sends the request on your behalf, using its own IP address. Think of it like having a different digital identity each time you visit a website.

When web scraping, sending too many requests from the same IP can trigger the target site's security and lead to blocks or rate limits. By using proxies, your scraper can spread out the requests across multiple IP addresses, avoiding detection and ensuring smoother operations.

How Do Proxies Work?

Here’s a simple breakdown of how proxies work during web scraping:

Your scraper sends a request to a proxy server instead of the website directly.
The proxy server forwards the request to the target website.
The website sees the proxy’s IP address, not yours.
The proxy returns the data from the website to your scraper.

If you're new to web scraping, you might not realize the importance of proxies. Websites often restrict access when they detect too many requests coming from the same IP address. A proxy serves as a middleman, helping you send requests from different IP addresses, avoiding detection and ensuring uninterrupted access to your target sites.

But proxies alone aren't enough. You also need to monitor your scraper's performance and manage your scraping infrastructure to ensure it runs smoothly without errors or inefficiencies. This is where ScrapeOps' complete web scraping toolkit comes in.

The Three Products from ScrapeOps You Need to Know

ScrapeOps Monitoring

ScrapeOps Monitoring is a must-have tool for anyone serious about web scraping. It provides a clear overview of your scraper’s performance and helps you spot any issues that might be hindering your data collection process.

With a 30-second SDK installation, ScrapeOps Monitoring automatically tracks and visualizes key metrics like:

Job Progress Stats: Track the number of pages scraped, items parsed, and errors encountered.
Response Times & Success Rates: Understand how efficiently your scraper is performing.

Error & Warning Tracking: Spot issues early and fix them before they escalate.
The ScrapeOps dashboard makes it easy to compare the performance of your scraping jobs against historical data, giving you the insights you need to optimize your scraping processes continuously.

Health Checks & Alerts are another crucial feature, ensuring you’re always notified about potential issues. Whether you prefer alerts via Slack or want to generate daily reports, ScrapeOps has you covered.

ScrapeOps Server Manager & Scheduler

Managing and scheduling scrapers can be time-consuming, especially if you're working with multiple servers. ScrapeOps Server Manager & Scheduler makes this process effortless. It allows you to:

Deploy your scrapers to multiple servers easily.
Schedule scraping jobs, ensuring they run at specific times without manual intervention.
Monitor performance directly from the ScrapeOps dashboard.

With support for integration via SSH and Scrapyd, ScrapeOps makes it easy for you to control your web scraping infrastructure from one centralized location.

ScrapeOps Proxy Aggregator

Finding and managing proxies can be a daunting task. Enter ScrapeOps Proxy Aggregator. This tool allows you to access the best-performing proxies from a single endpoint. ScrapeOps takes care of testing and selecting the most reliable proxies, so you can focus on what matters most—extracting data.

The Proxy Aggregator simplifies your scraping setup by aggregating the best proxy options, making it a reliable choice whether you’re scraping hundreds or thousands of websites. No more hunting for proxies or worrying about failures.

Why ScrapeOps is a Game-Changer for Web Scraping

By using the full suite of ScrapeOps tools, you can:

Maximize scraper performance with real-time monitoring and detailed analytics.
Optimize your infrastructure with easy-to-manage server scheduling.
Eliminate proxy headaches with their reliable Proxy Aggregator.

Plus, getting started with ScrapeOps is quick and easy. You can set up ScrapeOps Monitoring in just 30 seconds, and all their products seamlessly integrate into your existing scraping framework.

Get Started with ScrapeOps and Save!

Ready to improve your web scraping? You can sign up for ScrapeOps today using this link and save 10% with coupon code SCRPGS10.

Whether you're an experienced developer or just getting started with web scraping, ScrapeOps offers everything you need to run efficient, error-free scraping projects.

Want to make your web scraper?

Checkout the The Ultimate Guide to Web Scraping with Node.js Or directly get the code here

Connect?

twitter · blogs · portfolio · email · linkedin

Working in a startup as a Software Developer

Garima — Mon, 04 Dec 2023 08:03:11 +0000

It's been a while since I wrote a blog. I usually cover topics related to the things I know in tech. I should share my developer's journey in a startup this time.

TL;DR

This blog contains my journey in a startup company. Everything I share here is entirely my beliefs and thoughts. I've been working as a software developer in a startup iDream Education for 2 years now. Therefore, I am sharing my insights, and my thoughts on working as a dev in this company. I hope it helps you decide whether working in a startup is something you'd consider and provides a glimpse into the workings of early-stage startups.

Earlier in 2021 ...

From the start, I believed working in startups was a great way to learn about new things, so I decided to start my career and join a startup where I could take full responsibility for building something meaningful in a product that adds value to people's lives.

Honestly, as a fresher one should be thankful to the organization that saw his/her potential without actually seeing their past experiences and gave them a chance to kick start their career.

iDream Education is where I started my corporate journey, as a Web Developer and shipped my first line of code in a real-time project. Working at iDream Education is a fantastic experience with amazing community support, providing opportunities to learn something new almost every single day.

In the initial time of mine, I faced a lot of hindrances in my journey like not knowing what and how to do a task. But, this is the phase where one can learn and shape their life. Working in a startup is like gambling, either you fly so high or you fall fast, but you shouldn't forget you can retry anytime.

Be water, my friend! - Bruce Lee. Water can take the shape of the container it is stored in. A startup will help you shape yourself and help you to cope with multiple situations at a time.

Work Pressures ...

Do not, do not, and do not avoid work pressures. While I understand, that being accountable for your product might frustrating sometimes but will teach you a lot, like, smart work is better than hard work. This is one of the healthy pressures one should deal with in their life. If you avoid work pressure you might lack the ability to manage and organize yourself.

When you work on a product alone you can learn multiple things at a time i.e.

Multitasking;
handling pressures;
brainstorming;
inter and Intra Teamwork;
understanding human behaviors;
time management;
leadership skills;
consistency;
and many more.

Later in 2023 ...

Still working in the same organization as a Senior Full-Stack Web Developer with better team management skills, better time management skills, higher technical knowledge as compared to myself back in 2021, and many more that I am unaware of.

One can decide to change organizations as per their understanding. I chose to stay committed to this org because I feel it is my responsibility to serve something good to this organization, in return for the skills I've developed.

Ending quotes ...

If you're a fresher and want to learn new things and experience a thrilling life, you should kick start your journey in a startup and see where your life goes.

Thanks for Reading :)

Want to connect?

twitter · blogs · portfolio · email · linkedin

Integrated Terminal - A powerful feature!

Garima — Thu, 09 Feb 2023 03:49:26 +0000

VS Code provides a full fledged terminal that starts at the root of the workspace.

To open the terminal:

Use the ⌃` keyboard shortcut to toggle the terminal panel.
Use the ⌃⇧` keyboard shortcut to create a new terminal.
Use the View > Terminal or Terminal > New Terminal menu commands.
From the Command Palette (⇧⌘P), use the View: Toggle Terminal command.

You can open a new terminal session directly in VS Code in your working directory using ctrl+ backtick (the key below the escape key).

When you start your terminal it uses your default shell, if you click on the caret it will show you a list of shells you can use if needed.

What often happens though is you may need multiple terminal sessions running at the same time. Like one for your server and other for managing git or tests.

You can also change the name, color, icon of that terminal session, right click on the terminal session you want to change the information for you may see these options

Click on change color, different color options may appear in the command palatte.

Similarly you can change the icon, name, color etc. And now you need to fumble between the different terminals to figure out what each one is doing.

Now if you type out an actual command in the terminal and you screw it up you can actually you can use control + arrows(right|left) to navigate through the command your mouse won't even work here. You can clear the terminal using ctrl|cmd + k then use up arrow to go to the last command in your history.

Tasks

What if there is a way where you don't have to write the same command over and over again in the same terminal. Like how many time you might have written npm start or npm run dev to simplify thing you can create a VS Code task which is just a JSON configuration that contains the commands that you want to run in the terminal.

Create a task

Go to command palette ctrl|cmd + shift + p
write task
select configure default build task

All these powerful features may help you boost your productivity while coding. Let me know in the comments below the productivity hack you use to boost your productivity.

Want to connect?

twitter · blogs · portfolio · email · linkedin

VS Code - Amateur to Pro 2

Garima — Sun, 22 Jan 2023 11:08:31 +0000

VS Code Productivity tips and speed hacks - 2

Move around quickly

Command palette is awesome but it doesn't help you write your code faster, when you see a line of code you want to edit the natural approach is to select and highlight that line. A developer might do this 100s/1000s of times a day.

A faster way to get to where you want to edit is to hit ctrl + go followed by the line number you want to edit, from there use the arrow keys to move character by character and start editing.

Multi-line editing

If you want to edit a word in multiple lines at the same time when the cursor lands on the word you want to edit with the help of the above-mentioned method hit ctrl + d or cmd + d again and again to select the same word. And now you're a 3x developer editing multiple lines of code at the same time.

In some cases you may want to use the mouse to select multi-line editing in such cases hold the alt or option key and click on different parts of the code in different lines where you want to edit, the editor will then set cursors in multiple places which will be then useful and easy to use for writing repetitive codes.

Delete or move a line

If you want to delete a line from VS Code and paste it somewhere else the amateur approach is to highlight and select the line hit ctrl+x or cmd+x to cut the line and paste it with ctrl+v or cmd+v where you want to paste it.

But a better approach to do that is if you already have your cursor on the line you want to cut hit ctrl+x or cmd+x to cut the line not highlighting it required. Or if you want to paste that line above or below you can simply move the line with option/alt + up arrow/down arrow. Or if want to copy the line down by hitting the command available in your VS Code keyboard shortcuts.

Custom snippets

In many projects, you may find yourself writing the same boilerplate again and again if you find yourself doing that a faster way to increase your productivity is to add a custom snippet.

From the command palette run the configure user snippet command. You can create global projects to use them across all over your project, now you edit this JSON file to add your snippets.

And now in your file, you can use the insert snippet command to insert your snippet. But if you work with a popular framework there are chances someone might have done that already for you. Before you build yours go into the extensions section and check out for your language snippets if available.

Auto-create directory/file

If you need to create a file in a folder that doesn't exist yet you can create that file by clicking on the create new file button, writing the file name with the nested directory names on top of it by putting a slash in front on them to separate them and VS Code will automatically create those directories.

Let me know in the comments below the productivity hack you use to boost your productivity.

Want to connect?

twitter · blogs · portfolio · email · linkedin

VS Code - Amateur to Pro

Garima — Thu, 29 Dec 2022 04:25:26 +0000

Vs Code Productivity tips and speed hacks - 1

TL;DR

Visual Studio Code is like a paint brush, it's only as good as the hands that wields it but unfortunately it has more knobs than a jet and requires the steady hand of a painter. To the untrained eye VS Code is just a simple text editor like Microsoft Word and a Google doc but in reality it contains a ton of productivity boosting features that you're probably not using yet, like...

Terminal Tasks
Mouse-Less Editing
Multi-cursor
Remote Repos
and etc

But here's a thing, every VS Code Pro started as an amateur. In this blog we will compare amateur VS Code techniques to the ones used by pros allowing you to write and analyse your code faster because the most valuable thing you own in this world is your time.

We are focusing more on faster approaches, so will not be using the mouse much.

Let's jump right into the things, assuming you have VS Code installed in you machine. If not try installing it from here.

1. VS Code CLI

If you want to open a folder in VS Code you directly go into the file explorer right click on the folder and click in open with VS Code that works fine but it would have been much quicker and faster with the CLI

Faster way - if you're in your terminal and want to open a directory or edit a file you can do it quickly with the CLI using the Code command like

If you're in Mac or Linux you need to run this shell command from your VS Code refer this

2. Minimise the use of Mouse

When we have our VS Code window open it is tempting to go around and click on the beautiful buttons provide by VS Code. VS Code allows you to use mouse for each and everything to make things approachable, but that's not the most efficient way to get things done, here is a productivity tip ⚡️ 'The less you rely on the mouse the better.

You don't have to learn anything like Vim or nano but it's important to understand anything you can do with a mouse is likely to be done by the Keyboard quicker. Vs Code provide keyboard shortcuts for literally everything. All the keyboard shortcuts are customisable.

Hit Cmd + k Cmd + S or click on the settings icon in the left panel in VS Code window and boom all the shortcuts are in front of you.

3. Use of Command Palette

The first shortcut you should memorise is cmd + p or ctrl + p which brings up the command palette. The Command Palette gives you access to a bunch of the powers of the VS Code without actually learning the commands by default it will give you a list of recently opened files

In addition you can start typing a file name that you want to open and that obviously much quicker than trying to find a file from the directories in the file explorer.

4. Advanced use of Command Palette

If you type cmd + > + p or ctrl + > + p it will give you access to the bunch of command that you can run directly from the command palette with addition to the commands of you downloaded extensions.

5. Find by symbols

Another really awesome thing we can do here is find blocks of code throughout our projects, when working in a really big file it is easy to get lost and get confused, the worst thing you can do here is to scroll down the file looking for the functions or interface you need or want to use.

- In a file

You could use ctrl foxtrot i.e. ctrl + f to find the text on the page but let me tell you a little better approach for this, use the @ symbol from the command palette that will list down all the symbols, variables, functions from the code so you can quickly navigate through it.

Isn't is awesome?

I have another approach too, by using ctrl + shift + . you can directly bypass the command palette and navigate through all the functions, variables and etc directly from the file.

- In the whole project

Now you may need to find a function in the entire project,
you can use ctrl + shift + f to search something in the entire project, the approach is to use a # in the command palette. Use a # in the command palette followed by the name of the function you want to search and boom! all the functions containing the name of function you wrote appears out of no where.

Command palette is awesome when it comes to productivity boosting.

This is a series for VS Code productivity hacks and tips, stay tuned for the next blog of the series.

Let me know in the comments below the productivity hack you use to boost your productivity.

Want to connect?

twitter · blogs · portfolio · email · linkedin

How to Scrape Google SERPs Using WebScrapingAPI in Node.js

Garima — Wed, 01 Sep 2021 08:03:47 +0000

What is web scraping?

In a nutshell, web scraping means automating the task of collecting useful information from websites. There are many use cases for web scraping, but here are just three ideas: collecting prices from various online stores for a price comparison site, getting flight times and hotel listings for a travel site, even building a search engine like Google!

Getting started with web scraping is easy, and the process can be broken down into two main parts:

acquiring the data using an HTML request library or a headless browser
parsing the data to get the exact information you want

What is this article about and What are we going to do?

This article is all about showing you how to get data from search engine results pages. To do that, we’ll need a scraper.

You can use whatever scraping tool you feel most comfortable with. Just know that from here on, the article will focus on how to get the results using WebScrapingAPI. It’s a simple, fast, and reliable REST API that collects HTML from any web page and handles all possible problems in the backend. So, we don’t have to worry about proxy management, Javascript rendering, or CAPTCHAs.

So, let’s learn how to get the SERP data using WebScrapingAPI in Node.js!

What is SERP or SERP data?

Every second, Google processes 60,000+ searches. That means that this year there will be over 2 trillion Google searches.

Well, that’s a lot of Googling! It also means that as a digital marketer or website developer, it’s more important than ever to understand Google SERP features and how they affect your webpage.

A SERP or Search Engine Results Page is the result page's data returned by Search Engines. When you type in a keyword into Google, it will fetch the most relevant data, structured into SERPs.

Besides getting answers to the random questions that might pop into your head, Google SERPs are invaluable for many other reasons:

Search Engine Optimization
Competitor analysis
Paid ads monitoring
Keyword research

So, SERP data can help you in two significant ways: keeping an eye on the competition and getting ahead in the search results.

Sometimes we need more SERP data that can be easily copied manually. In that case, the most efficient way to collect information is to develop algorithms that do if for as. But it’s not always easy as search engines regularly change their SERP structure and search algorithms, meaning that we have to change our own code to match them. No need to panic, though. WebscrapingAPI will help extensively here.

What is WebScrapingAPI ?

It’s one of the leading REST APIs for web scraping. WebScrapingAPI collects the HTML from any web page with a simple API call and provides ready-to-process data to everyone in your company or maybe for personal use. It’s easy to integrate into your own scripts, making it a versatile and reliable tool in any developer’s arsenal.

Perks of WebScrapingAPI

Make sure you never get blocked
100M+ rotating proxies at your fingertips
Easy to use, easy to customize
Around the globe geotargeting
99.99% Uptime
Automatic Scaling
24/7 Monitoring
Collect data from any type of webpage

For more info, check out WebScrapingAPI.

So let’s proceed with the tutorial to integrate WebScrapingAPI in Node.js.

How to use WebScrapingAPI to scrape SERP data

In the following section, we will use Node.js and some libraries like got and Cheerio to create the script that will get all the data from a SERP and format it nicely to be as understandable as possible.

Let’s see how all the information presented above can be converted to tangible results:

Step 1: Get API Access Key

The API Key is required to access the API. So first, we will create an account and get the API Access Key from the dashboard.

Register for free at webscapingapi.com
Get the API access key

You can start your free trial with 5000 requests and access to all functionalities to test the product.

After successfully creating a free account, access the API Playground page through the button on the dashboard’s left side. The page should look like this:

As the name suggests, this is the place where we can test the scraping tool before creating our script. Let’s copy the URL presented above in the URL input (left column), scroll down a little bit, and smash the “Send API Request” button. This action should return a result that looks like this:

Now let’s build the script that is going to do the work for us.

Step 2: Check if you have installed node and npm

Run these commands in terminal/Command line

node -v

and

npm -v

Output might look like

v14.16.1

If you get the version as the command’s output, you have already installed node and npm. If you receive any errors, please try installing them from Node.js, and once you have installed Node.js, run npm install -g npm to install npm and repeat Step 2.

Step 3: Set up new npm Package

npm init -y

This command will do a lot of the hard work at the back and create a package.json file which will keep track of all the dependencies and DevDependencies we will install throughout our program.

Step 4: Install the packages

npm i got cheerio

npm install got cheerio

With Cheerio installed, it’ll be much easier to parse the HTML we extract.

Step 5: Go to your favorite Code Editor/IDE

Let's make a file named serpScraper.js and include the modules into our script to get the results page’s HTML.

const got = require('got');
const $ = require('cheerio');

If you face any problem using cheerio, sometimes require('packageName').default needs to be exported. So if you get an error about cheerio is not a function or $ is not a function. Try using this:

var $ = require('cheerio');
if (typeof $ != "function") $ = require("cheerio").default;

Step 6: Use the API Key

We will initialize API Access Key to create the client to access the API.

(async () => {
const params = {
    api_key: "YOUR_API_KEY_HERE”,
    url: "https://www.google.com/search?q=nodejs&rlz=1C1SQJL_enIN868IN868&oq=nodejs&aqs=chrome.0.69i59l3j69i60j69i61j69i65j69i60j69i61.987j0j7&sourceid=chrome&ie=UTF-8",
    country: "US",
}

const response = await got('https://api.webscrapingapi.com/v1?', {searchParams: params});

// Storing the results in a variable
const html = response.body;

Make sure to replace the “YOUR_API_KEY_HERE” string with the API key provided to you by the service. You can find it on the dashboard page.

Step 7: Inspect the Page

Let’s get back to the page we want to scrape. Right-click on the first heading and click ‘Inspect.’ This is how we can select only the information we need.

You’ll get a new window containing the HTML source code:

We will inspect the heading and get the class-name used to identify the heading from the source code.

For the Heading, we got the class-name h3.LC20lb.DKV0Md. The heading is contained inside the h3 tag, and the class-name is .LC20lb.DKV0Md.
In .LC20lb.DKV0Md, .LC20lb and .DKV0Md are two different classes.

We will inspect the link and get the class-name used to identify the paragraph from the source code.

For the links we got class-name as yuRUbf which contain another a tag inside of it. So we will use this syntax to get the link from the page .yuRUbf > a.

Step 8: Store the headings and links in separate arrays

As we have already inspected and got to know the class-name of the heading and link, we can now extract the information from the source code. We can go through and grab a list of links to all Node.js topics by getting them from each element’s “attribs” section.

Let's use them to extract the headings and links.

  const length = $("h3.LC20lb.DKV0Md", html).length;
  const links = [];
  const headings = [];

  for (let i = 0; i < length; i++) {
    links.push($(".yuRUbf > a", html)[i].attribs.href);
    headings.push($("h3.LC20lb.DKV0Md", html)[i].children[0].data);
  }

Step 9: Format the information

As we have extracted the information from the source code, we need to format it in a human-readable format.

function print(links, headings) {
    for(let i = 0; i < length; i++) {
      console.log(`${i+1}. ${links[i]} :- ${headings[i]}`);
    }
  }

print(links, headings);

Step 10: Put it all together.

Here is the complete code to make WebScrapingAPI request and get response result data.

const got = require("got");
var $ = require("cheerio");
if (typeof $ != "function") $ = require("cheerio").default;

(async () => {
  const params = {
    api_key: "YOUR_API_KEY_HERE",
    url: "https://www.google.com/search?q=nodejs&rlz=1C1SQJL_enIN868IN868&oq=nodejs&aqs=chrome.0.69i59l3j69i60j69i61j69i65j69i60j69i61.987j0j7&sourceid=chrome&ie=UTF-8",
    country: "US",
  };

  const response = await got(
    "https://api.webscrapingapi.com/v1?",
    { searchParams: params }
  );

  const html = response.body;
  const length = $("h3.LC20lb.DKV0Md", html).length;
  const links = [];
  const headings = [];

  for (let i = 0; i < length; i++) {
    links.push($(".yuRUbf > a", html)[i].attribs.href);
    headings.push($("h3.LC20lb.DKV0Md", html)[i].children[0].data);
  }

  function displayResults(links, headings) {
    for(let i = 0; i < length; i++) {
      console.log(`${i+1}. ${headings[i]} :- ${links[i]}`);
    }
  }

  displayResults(links, headings);
})();

Output:

1. Node.js :- https://nodejs.org/
2. Node.js - Wikipédia :- https://fr.wikipedia.org/wiki/Node.js
3. NodeJs : le guide complet pour tout comprendre du javascript ... :- https://practicalprogramming.fr/nodejs
4. Qu'est-ce que Node.js et pourquoi l'utiliser ? - Kinsta :- https://kinsta.com/fr/base-de-connaissances/qu-est-ce-que-node-js/
5. Apprendre NodeJS | Grafikart :- https://grafikart.fr/tutoriels/nodejs
6. Tutoriel : Node.js sur Windows pour débutants | Microsoft Docs :- https://docs.microsoft.com/fr-fr/windows/dev-environment/javascript/nodejs-beginners-tutorial

As you can see, scraping SERP data using WebScrapingAPI is quite easy. We have to use a scraping API to get the HTML content, parse the response, get the relevant information from each element on the page and console everything or store it in arrays or json format.

The results might differ depending on the location of the proxy. The results stated above are for a US proxy but if you choose a proxy from another location results will be different.

Conclusion

To take your startup or business to their peak nowadays takes a lot more than having a great product. There are endless opportunities depending on how creative you can be. Some of the most important and healthy strategies business owners should pay attention to are:

creating an online presence;
knowing the Substitutes for and Complimentary products to your own;
working on providing the most value for the lowest price;
knowing about the demand and supply for your product- this helps in knowing when to modify the pricing according to the demand and supply chains;
having a complete understanding of the competition’s advantage.

All of these strategies can prove vital in one’s business. It feels good to know that web scrapers offer a huge help in tackling these problems. Adding automation to the data gathering process may be the easiest step to improve their business.

We try to offer a helping hand by creating the necessary tools for these kinds of jobs. Thank you for reading the article, and remember that you can use this code too with a WebScrapingAPI free trial. Give it a spin and see if it works well for your use case!

Additional Resources

The Ultimate Guide to Web Scraping with Node.js

Garima — Tue, 17 Aug 2021 08:33:19 +0000

What is web scraping?

It involves automating the task of collecting information from websites.

There are a lot of use cases for web scraping you might want to collect prices from various e-commerce sites for a price comparison site. Or perhaps you need flight times and hotel listings for a travel site. Maybe you want to collect emails from various directories for sales leads, Or you could even be wanting to build a search engine like Google!

Getting started with web scraping is easy, and the process can be broken down into two main parts:

acquiring the data using an HTML request library or a headless browser(maybe we will check this out in another post),
and parsing the data to get the exact information you want.

This guide will walk you through the process with the popular Node.js request-promise module, CheerioJS, and Puppeteer. Working through the examples in this post, we will learn all the tips and tricks you need to become a pro at gathering any data you need with Node.js!

We will be gathering a list of all the names and birthdays of Indian presidents from Wikipedia.

Let's do it step by step

Step 1: Check if you have installed node and npm in your system.
Run these commands in terminal/Command line

node -v

and

npm -v

if you get the version as the output of the command you have already installed node and npm,if you receive any error please try installing them. Output might look like

v14.16.1

Step 2: Set up new npm Package
Run command

npm init -y

This command will do a alot of hardwork at the back and create a package.json file which will keep a track of all the dependencies and DevDependencies we will install throughout our program.

Step 3: Making your first request

npm i -D request request-promise cheerio puppeteer

npm install --save request request-promise cheerio puppeteer

-D and --save tags are used to install npm module as DevDependencies.

Puppeteer will take a while to install as it needs to download Chromium as well or you can skip this because we are not using puppeteer in our program yet.

Step 3: Go to your favorite Code Editor/IDE
Let's make a file named scraper.js, and write a quick function to get the HTML of the Wikipedia “List of Presidents” page.

const rp = require('request-promise');
const url = 'https://en.wikipedia.org/wiki/List_of_presidents_of_India';

rp(url)
  .then((html)=>{
    console.log(html);
  })
  .catch((err)=>{
    console.log(err);
  });

Output:

<!DOCTYPE html>
<html class="client-nojs" lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<title>List of Presidents of the India - Wikipedia</title>
...

Using Chrome DevTools

Cool, we got the raw HTML from the web page! But now we need to make sense of this giant blob of text. To do that, we’ll need to use Chrome DevTools to allow us to easily search through the HTML of a web page.

Using Chrome DevTools is easy: simply open Google Chrome, and right click on the element you would like to scrape

Now, simply click inspect, and Chrome will bring up its DevTools pane, allowing you to easily inspect the page’s source HTML.

After inspecting the name of the President of India, we came to know that the names are stored inside the th tag wrapped in an anchor tag. So let's use it then !

Step 4: Parsing HTML with CheerioJS

const rp = require('request-promise');
const $ = require('cheerio');
const url = 'https://en.wikipedia.org/wiki/List_of_presidents_of_India';

rp(url)
  .then((html)=>{
    console.log($('th > a', html).length);
    console.log($('th > a', html));
  })
  .catch((err)=>{
    console.log(err);
  });

Output:

18
{ '0':
  { type: 'tag',
    name: 'a',
    attribs: { href: '/wiki/Rajendra_Prasad', title: 'Rajendra Prasad' },
    children: [ [Object] ],
    next: null,
    prev: null,
    parent:
      { type: 'tag',
        name: 'big',
        attribs: {},
        children: [Array],
        next: null,
        prev: null,
        parent: [Object] } },
  '1':
    { type: 'tag'
...

Note:

I was facing some problem using cheerio and found out that sometimes require('packageName').default needs to be exported. So if you get an error about cherrio is not function or $ is not a function. Try using this:

var $ = require('cheerio');
if (typeof $ != "function") $ = require("cheerio").default;

It worked for me!

Step 5: Getting the names of all the Presidents.

We check to make sure there are exactly 18 elements returned (the number of Indian presidents), meaning there aren’t any extra hidden “th” tags elsewhere on the page. Now, we can go through and grab a list of links to all 18 presidential Wikipedia pages by getting them from the “attribs” section of each element.

const rp = require('request-promise');
const $ = require('cheerio');
const url = 'https://en.wikipedia.org/wiki/List_of_presidents_of_India';
if (typeof $ != "function") $ = require("cheerio").default;

rp(url)
  .then((html)=>{
    const presidentUrls = [];
    const length = $("th > a", html).length;
    for (let i = 0; i < length ; i++) {
      presidentUrls.push($('th > a', html)[i].attribs.href);
    }
    console.log(presidentUrls);
  })
  .catch((err)=>{
    console.log(err);
  });

Output

[
  '/wiki/Rajendra_Prasad',
  '/wiki/Sir Sarvepalli_Radhakrishnan',
  '/wiki/Zakir_Husain',
  '/wiki/V._V._Giri',
  '/wiki/Mohammad_Hidayatullah',
  '/wiki/V._V._Giri',
  '/wiki/Fakhruddin_Ali_Ahmed',
  ...
]

Step 6: Let's grab their birthdays from the html page.

Now we have a list of all 18 presidential Wikipedia pages. Let’s create a new file (named scrapParse.js), which will contain a function to take a presidential Wikipedia page and return the president’s name and birthday. First things first, let’s get the raw HTML from Rajendra Prasad’s Wikipedia page.

const rp = require('request-promise');
const url = 'https://en.wikipedia.org/wiki/Rajendra_Prasad';

rp(url)
  .then((html)=> {
    console.log(html);
  })
  .catch((err)=> {
    console.log(err);
  });

Output:

<html class="client-nojs" lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<title>Rajendra Prasad - Wikipedia</title>
...

Let’s once again use Chrome DevTools to find the syntax of the code we want to parse, so that we can extract the name and birthday with Cheerio.js.

So we see that the name is in a class called “firstHeading” and the birthday is in a class called “bday”. Let’s modify our code to use Cheerio.js to extract these two classes.

const rp = require('request-promise');
const $ = require('cheerio');
const url = 'https://en.wikipedia.org/wiki/Rajendra_Prasad';
if (typeof $ != "function") $ = require("cheerio").default;

rp(url)
  .then((html)=> {
    console.log($('.firstHeading', html).text());
    console.log($('.bday', html).text());
  })
  .catch((err)=> {
    console.log(err);
  });

Output:

Rajendra Prasad
1884-12-03

Step 4: Putting it all together
Now let’s wrap this up into a function and export it from this module.

const rp = require('request-promise');
var $ = require('cheerio');

if( typeof $ != 'function' ) $ = require('cheerio').default;

const scrapParse = (url) => {
    return rp(url)
    .then((html)=>{
        return {
        name: $('.firstHeading', html).text(),
        birthday: $('.bday', html).text(),
        };
    }).catch((err)=>{
        console.log(err);
    });
}

module.exports = scrapParse;

Now let’s return to our original file Scraper.js and require the scrapParse.js module. We’ll then apply it to the list of presidentUrls we gathered earlier.

const rp = require("request-promise");
var $ = require("cheerio");
const scrapParse = require("scrapParse");
if (typeof $ != "function") $ = require("cheerio").default;

const url = "https://en.wikipedia.org/wiki/List_of_presidents_of_India";

if (typeof $ != "function") $ = require("cheerio").default;

rp(url)
  .then((html) => {
    const presidentUrl = [];
    const length = $("th > a", html).length;
    for (let i = 0; i < length; i++) {
      presidentUrl.push($("th > a", html)[i].attribs.href);
    }
    return Promise.all(
      presidentUrl.map((name) => {
        return scrapParse(`https://en.wikipedia.org${name}`);
      })
    );
  })
  .then((presidents) => {
    console.log(presidents);
  })
  .catch((err) => {
    console.log(err);
  });

Output:

[
  { name: 'Rajendra Prasad', birthday: '1884-12-03' },
  { name: 'Sarvepalli Radhakrishnan', birthday: '1888-09-05' },
  { name: 'Zakir Husain (politician)', birthday: '1897-02-08' },
  { name: 'V. V. Giri', birthday: '1894-08-10' },
  { name: 'V. V. Giri', birthday: '1894-08-10' },
  { name: 'Fakhruddin Ali Ahmed', birthday: '1905-05-13' },
  { name: 'B. D. Jatti', birthday: '1912-09-10' },
  { name: 'Neelam Sanjiva Reddy', birthday: '1913-05-19' },
  { name: 'Zail Singh', birthday: '1916-05-05' },
  { name: 'Zail Singh', birthday: '1916-05-05' },
  { name: 'Zail Singh', birthday: '1916-05-05' },
  { name: 'Ramaswamy Venkataraman', birthday: '1910-12-04' },
  { name: 'Shankar Dayal Sharma', birthday: '1918-08-19' },
  { name: 'K. R. Narayanan', birthday: '1997-07-25' },
  { name: 'A. P. J. Abdul Kalam', birthday: '1931-10-15' },
  { name: 'Pratibha Patil', birthday: '1934-12-19' },
  { name: 'Pranab Mukherjee', birthday: '1935-12-11' },
  { name: 'Ram Nath Kovind', birthday: '1945-10-01' }
]

Additional Resources

And there’s the list! At this point you should feel comfortable writing your first web scraper to gather data from any website. Here are a few additional resources that you may find helpful during your web scraping journey:

Some beginner-friendly recommended APIs for Web Scraping

Scraper API - An API with Web scraping benefits and processes with multiple types of data collection. Helps in handling proxies, browsers, and CAPTCHAs, so you can get the HTML from any web page with a simple API call.

Suggestions and corrections are most welcome❤️.
Get the Code:

Garima-sharma814 / Web-Scraper

Simple Web scraping app to scrape all the Indian Presidents (Name and Birthdays) present on Wikipedia.

What is Web Scraping?

This repository will walk you through the process with the popular Node.js request-promise module, CheerioJS, and Puppeteer. Working through the examples in this post, we will learn all the tips and tricks you need to become a pro at gathering any data you need with Node.js!

We will be gathering a list of all the names and birthdays of Indian presidents from Wikipedia.

To know how to do it step by step read my blog here.

View on GitHub

Written and edited by me❤️

CSS- The Cascade !

Garima — Thu, 01 Jul 2021 05:49:58 +0000

Sometimes two or more competing CSS rules are applied to a particular element. In this post we will find out how browser choose which property to use for the element and how to control it.

CSS stands for Cascading Stylesheets. The Cascade is the algorithm for solving conflicts where multiple CSS rules are applied to an HTML element. If we have this <p> tag.

<p> Let's Check which color is chosen by the browser </p>

p{
color: red;
}

p{
color: blue;
}

So why this happened ?

Understanding the cascade algorithm helps us understand how the browser resolves the conflicts like these ..

The Cascade can split into 4 stages

1. Position and order of appearance :- The order in which the CSS rule appear in the Stylesheet.

2. Specificity :- An algorithm which determines which CSS property have strongest preference.

3. Origin: the order of when CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS.

4. Importance :- some CSS rules are weighted more heavily than others, especially with the !important rule type.

Position and Order of Appearance

The order in which our CSS rules appear in the Stylesheet and their appearance is always taken into consideration by the cascade to calculate the conflicts if any.

The demo right at the start of this blog is the most straightforward example of positioning. There are two rules that have selectors of identical specificity, so the last one to be declared won.

Styles can come from various sources on an HTML page, such as a <link> tag, an embedded <style> tag, and inline CSS as defined in an element's style attribute.

If you have a <link> that includes CSS at the top of your HTML page, then another <link> that includes CSS at the bottom of your page, the bottom <link> will have the most preference. The same thing happens with embedded <style> elements, too. They get more specific, the further down the page they are.

This ordering also applies to embedded <style> elements. If they are declared before a <link>, the linked stylesheet's CSS will have the most specificity.

An inline style attribute with CSS declared in it will override all other CSS, regardless of its position, unless a declaration has !important defined.

Position also applies in the order of your CSS rule. In this example, the element will have a purple background because background: purple was declared last. Because the green background was declared before the purple background, it is now ignored by the browser.

.my-element {
  background: green;
  background: purple;
}

Specificity

Specificity is an algorithm which determines which CSS selector is the most specific, those calculations. By making a rule more specific, you can cause it to be applied even if some other CSS that matches the selector appears later in the CSS.

Suppose that we are working this HTML and CSS.

<button class="btn">Hello, Specificity!</button>

button {
  color: red;
}

.btn{
  color: blue;
}

There's two competing rules here. One will color the button red and the other will color it blue.

Which rule gets applied to the element?
Understanding the CSS specification's algorithm about specificity is the key to understanding how CSS decides between competing rules.

Specificity is one of the four distinct stages of the cascade.

Preference of Selectors from lowest to highest

1. Universal Selector
A universal selector (*) has no specificity and gets 0 points. This means that any rule with 1 or more points will override it.

*{
margin: 0;
padding: 0
}

We usually use this to reset the default properties of CSS.

2. Element or pseudo-element selector
An element (type) or pseudo-element selector gets 1 point of specificity .

Type selector

div {
  color: red;
}

Pseudo-element selector

::selection {
  color: red;
}

3. Class, pseudo-class, or attribute selector
A class, pseudo-class or attribute selector gets 10 points of specificity.

Class selector

.my-class {
  color: red;
}

Pseudo-class selector

:hover {
  color: red;
}

Attribute selector

[href='#'] {
  color: red;
}

The :not() pseudo-class itself adds nothing to the specificity calculation. However, the selectors passed in as arguments do get added to the specificity calculation.

div:not(.my-class) {
  color: red;
}

This example would have 11 points of specificity because it has one type selector (div) and one class inside the :not().

4. ID selector
An ID selector gets 100 points of specificity, as long as you use an ID selector (#myID) and not an attribute selector ([id="myID"]).

#myID {
  color: red;
}

5. Inline style attribute
CSS applied directly to the style attribute of the HTML element, gets a specificity score of 1,000 points. This means that in order to override it in CSS, you have to write an extremely specific selector.

<div style="color: red"></div>

6. !important rule
Lastly, an !important at the end of a CSS value gets a specificity score of 10,000 points. This is the highest specificity that one individual item can get.

An !important rule is applied to a CSS property, so everything in the overall rule (selector and properties) does not get the same specificity score.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

There are a lot of Selectors with their specificities for more go to references.

References

Windows 11 browser layout

Garima — Mon, 28 Jun 2021 05:54:15 +0000

I just tried to make windows 11 layout in browser with HTML, CSS and JAVASCRIPT.

Windows 11 provides a calm and creative space where you can pursue your passions through a fresh experience. From a rejuvenated Start menu to new ways to connect to your favorite people, news, games, and content—Windows 11 is the place to think, express, and create in a natural way.

Looking forward to m add more functionalities to make this browser layout more similar to Windows11.

Contributions and suggestions are Welcome ❤

If you feel like contributing to this go to GitHub Repo and create Pull Request.
See the code
Final output

Garima-sharma814 / windows11-browser-clone

Windows 11 browser clone made with HTML, CSS, JAVASCRIPT.

Windows11-browser-clone

Windows 11 browser layout made with Html, Css and JavaScript. Looking forward to add more functionalitites.

Contributions are welcome ✨

View on GitHub

Pseudo-classes and pseudo-elements

Garima — Thu, 24 Jun 2021 12:27:32 +0000

CSS provide useful selector types that focus on specific platform state, like when the element is hovered, active etc.

Pseudo-Classes

HTML here find themselves in various stages either because they are interacted with user or one of their child element is in a certain state.

For example, an HTML element could be hovered with the mouse pointer by a user or a child element could also be hovered by the user. For those situations, use the :hover pseudo-class.

/*When the link is hovered with a mouse pointer this code is fired*/
a:hover {
color: blue;
text-decoration: underline;
}

Pseudo-classes let you apply CSS based on state changes. This means that your design can react to user input and changes accordingly.

For example
you have an email signup form, you can change the border color of the field to red, if it contains invalid email address and green when it contains correct email address.

As stated above pseudo-class let us apply CSS based on user input. Entering an email address is the input of the user. (whether right or wrong)

How do you do that?
Well, we have a pseudo-class :invalid, this is one of many browser-provided pseudo-class

A pseudo-class lets you apply styles based on state changes and external factors. This means that your design can react to user input such as an invalid email address.

Interactive States

We can apply the following pseudo-classes on the interaction of a user with our page.

:hover If the user is pointing to an element with a pointing device (can be a mouse), an they place it over an element, we can trigger the action of the user with :hover class to apply different style when user hovers on it.

We can achieve this effect with little effort

<p> This is link <a href="#"> Try hovering me! </a> </p>

/*This line is to remove the default behavior of anchor tag we want underline effect one hover */
a{ 
    text-decoration: none; 
}

/*When the user hover on a tag this code will be fired*/
a:hover{
    text-decoration: underline;
    color: #8e44ad;
}

:active This state is triggered when an element is actively being interacted with— such as a click—before click is released. If a pointing device like a mouse is used, this state is when the click starts and hasn't yet been released.

We can achieve this effect with little effort

<div>
<button class="btn">Click and hold to see the active state</button>
</div>

.btn:active {
  transform: scale(0.99);
  box-shadow: none;
}

There are tons of pseudo-classes for us to explore on. If you want to know more go to Pseudo-classes

Pseudo-Elements

Pseudo-elements differ from pseudo-classes because instead of responding to the platform state, they act as if they are inserting a new element with CSS. Pseudo-elements are also syntactically different from pseudo-classes, because instead of using a single colon (:), we use a double colon (::).

A pseudo-element is like adding or targeting an extra element without having to add more HTML.

For example
If you've got an article of content and you want the first letter to be a much bigger drop cap— how do you achieve that?

In CSS, you can use the ::first-letter pseudo-element to achieve this sort of design detail.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
}

::before and ::after

Both the ::before and ::after pseudo-elements create a child element inside an element only if you define a content property.

.my-element::before {
  content: "";
}

.my-element::after{
  content: "";
}

::before pseudo-element to insert content at the start of an element, or the ::after pseudo-element to insert content at the end of an element.

Pseudo-elements aren't limited to inserting content, though. We can also use them to target specific parts of an element.

The content can be any string even an empty one but be mindful that anything other than an empty string will likely be announced by a screen reader. We can add an image url, which will insert an image at its original dimensions, so we won't be able to resize it.

There are tons of pseudo-classes for us to explore on. If you want to know more go to Pseudo-Elements

Written and Edited by me❤.

CSS Selectors

Garima — Mon, 14 Jun 2021 06:30:18 +0000

To apply CSS to an element you need to select it. CSS provides you with a number of different ways to do this, and you can explore them in this post.

If you have got some text that you want to render in Red or any other color How would you do that?
for ex you have this element

<div>
<p> This is first paragraph in this div which is to be rendered in Red Color</p>
<p> This is second paragraph in this div which is normal </p>
</div>

You use a CSS selector to find that specific element and apply a CSS rule, like this.

div p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS provides us a lot of options to select elements and apply specific rules to them, ranging from very simple to very complex, to help us to tackle situations like this.

Parts of CSS rules

To understand how selectors work and their role in CSS, it's important to know the parts of a CSS rule. A CSS rule is a block of code, containing one or more selectors and one or more declarations of property which we want to make change in our HTML element.

In this image, the selector is .my-css-rule which finds all elements with a class of my-css-rule on the page. There are three declarations within the curly brackets. A declaration is a property and value pair which applies styles to the elements matched by the selectors. A CSS rule can have as many declarations and selectors as you like.

Simple Selectors

The most simple selectors of CSS are targeting the element by classes, ID and other attributes.

Universal Selectors

A universal selector is a selector which selects all the elements in HMTL file. Universal Selector is also known as wildcard. It matches all the elements.

*{
color: blue;
}

This rule will apply on each and every element of the HTML file.

Type Selectors

Type selectors directly targets the HMTL element by its type/tag i.e. div, section etc.

p{
color: red;
}

This rule cause every

tag to render in red color.

Class Selectors

An HTML element can have more than one class at a time. The class selector will target every element having that class.

<div class="test-class"> This is just a div </div>

We can select this div with its class.

.test-class{
color: blue;
}

In CSS , class is selected by a . this dot is not present in the HTML element. This means . is a character which instructs CSS to target all the elements having class test-class.

A HTML element that has a class of .test-class will still be matched to the above CSS rule, even if they have several other classes, like this:

<div class="test-class another-class some-other-classes"></div>

Id Selectors

An HTML element with an id attribute should be the only element on a page with that ID value. An HTML element should not have more than 1 ID at a time (good practices) and if you have more than 1 ID in an element you code might break. You select elements with an ID selector like this:

<div id="test-id"></div>

We can select this div with this ID

#test-id{
color: blue;
}

As seen in the class selector we can select the id by the # symbol. # symbol instructs CSS to target the element having this ID.

Grouping Selectors

A selector doesn't have to match only a single element. You can group multiple selectors by separating them with commas:

h1, h2, h3, h4, h5, h6, .test-class, #test-id{
color: white;

Complex selectors

You have already seen a lot of selectors, but sometimes, you will need more fine-grained control with your CSS. This is where complex selectors step in to help.

It's worth remembering at this point that although the following selectors give us more power, we can only cascade downwards, selecting child elements. We are not able to target upwards and select a parent element.

Combinators

A combinator is an element which resides inside another element. For ex <strong> tag can reside inside a <p> tag.

Descendant Combinators

Let's understand the relationship in Child and Parent tag.

<p>A paragraph of text with some <strong> bold text for emphasis /strong>.</p>

The parent element is <p> tag child element is the <strong> tag. We can understand this because <strong> tag sits inside the <p> tag. So,

tag is the direct parent of <strong> tag.

A descendant combinator allows us to target the child element with the help of the parent tag. This use space to instruct about the parent-child relationship.

p strong{
color: red;
}

This rule will select all the <strong> tag which resides inside a <p> tag.

Compound Selectors

You can combine selectors to increase specificity and readability. For example, to target <a> elements, that also have a class of .my-class, write the following:

a.my-class {
  color: red;
}

Resources

Learn CSS