DEV Community: Zeeshan

12 easy SEO Tips Every Developer Should Know

Zeeshan — Mon, 01 Jul 2024 12:16:49 +0000

It's easy to code a website with good UI/UX with time and good coffee.

But what good is a website without visitors and users?

Here are 12 easy things to look out for when building your next website and get more organic visitors.

1. URL Structure

Keep the URLs short and concise that are easy to remember. Your goal here should be conveying lot's of information through less words. Your main keyword for webpage must be in the URL.

For example:
nextjs-tutorial vs superfine_nextjs-tutorial_aimed-at_100%-beginners

Which of the above do you think will better in terms of SEO?

Special characters like $ % ^^ (] must be avoided.

Using hyphens vs. underscores

Using special characters in URLs, such as underscores, might confuse search engines.
It makes sense to use hyphens in place of underscores.

You may improve the readability of your URLs and help search engines understand the genuine purpose of each web site by using hyphens to divide words.

2. Title Tags and Meta Descriptions

Here is how a title tag looks:

<head>
  <title>AcidOP | Freelancing Developer</title>
</head>

Your goal here is again to tell a lot in very less. You technically don't have any limit to this number but you should keep it less than 60 characters.

The title should explain your niche or product related to your website or article.

Writing compelling meta descriptions

Here is how a description tag looks:

<head>
  <meta name="description" content="Excellent Developer from India." />
</head>

One of the most important elements in drawing visitors to a website is the meta description tag.

The meta description should skillfully include the page's target keywords to persuade readers to click through to the page.

Search engines like Google frequently draw the user's attention by emphasizing terms from the query while displaying the description. It's critical to match your descriptions closely, but not excessively, to highly valuable search terms.

Below is a title and description tag in action:

Do not exceed 155 characters in descriptions or google will then truncate the text.

Here is a list of other meta tags that you can use as well.

3. Header Tags (H1, H2, H3, etc.)

Header tags help your users navigate the page. The break up your content and break the page into dedicated sections.

Search engines rely on headers to better understand the sections of a page, which help with SEO.

Instead of writing a very long article with a few paragraphs, divide the article in multiple parts with each having it's own heading, like I have done here in this blog.

Structuring content with header tags

The main title of your document should be your <h1>. The H1 Tag represent the document's overall topic and is displayed at the beginning as a large text.

Your main points should be wrapped in <h2>. H2 tags are second level headings used to break up content and make it scannable and easy to read.

Subsequent heading tags lead all the way up to H6, which are not that important in the heading hierarchy.

NOTE:

All the tags must be in hierarchy, i.e. H1>H2>H3...H6.
There should only be 1 H1 tag in entire document.

Example:

In my blog markdown editor, I arrange my headings in the below order.

<h1>I built an Markdown editor using Next.js and TailwindCss 🔥</h1>

<h2>Objectives</h2>

<h2>1. Create the landing page</h2>
<h2>2. Add states to store data</h2>
<h2>3. Setup react-markdown and @tailwindcss/typography</h2>
<h2>4. Code Highlighting and Custom Components</h2>
<h3>Optional</h3>
<h2>5. Adding Rehype and Remark Plugins</h2>
<h2>6. Header with Markdown buttons</h2>

4. Image Optimization for SEO

According to Optinmonster, content that contains images receives up to 94% more views.

Visuals naturally captivate people, and nothing does it more effectively than a pleasing image.

This means that in order to engage readers and increase your visibility, you must use visuals in your content.

Using descriptive alt text

Example:

<img src="https://acidop.codes/og.jpg" alt="My website banner" />

Alt tags (Technically they're not tags, they're attributes, but you don't need to worry about that) are important for a few key reasons:

Enhanced Accessibility: It assists visually impaired individuals in comprehending the image.
SEO Boost: It offers search engines valuable details about the image, aiding in its visibility in search rankings.
Improved User Experience: It conveys information about the image, even when it fails to load.

Choosing the right image formats

JPEGs are good for things like screenshots, blog post images, and content where site speed is essential.
PNG is better for quality and resolution, but these files are typically larger, which can result in slower page load times.
WebP offers superior compression capabilities compared to others, without compromising much on image quality. It enhances the load time of your web pages and minimizes bandwidth. It supports both the animated features of GIFs and the transparent backgrounds of PNGs.
SVG is best when it comes to icons and logos. They can be scaled to any size without losing resolution.

Implementing responsive images (srcset)

Your website may perform much slower with large graphics. We can speed up the process and lower the file size. But visual quality remains the same on mobile devices as it does on desktop computers.

srcset allows you to define a list of different image resources along with size information so that browser can pick the most appropriate image based on the actual device's resolution.

Example:

<img
  src="image.jpg"
  srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w"
/>

5. Mobile-Friendliness

With the rise in mobile device usage for online searches, like smartphones and tablets, Google's web crawler now prioritizes indexing the mobile version of a website's content.

Fun Fact:
Mobile devices contribute to 59.45% of global online traffic

Ensuring responsive design

The website shows the exact same HTML code on the same URL no matter what device you're using (like a computer, tablet, phone, or even a browser that doesn't display images), but it can adjust how the content looks depending on the size of the screen.

Google suggests using Responsive Web Design because it's the simplest design approach to set up and keep up with.

Free SEO Tools for testing mobile-friendliness:

6. Site Speed

According to a study conducted by Google, 53% users abandon a website if it hasn't loaded in 3 seconds.

Therefore page speed is now a ranking factor for SEO.

Use these 3 metrics to get a picture of loading speed based on speed, interactivity, and visual stability:

Largest Contentful Paint (LCP): How long it takes for your main content to load.
It should be 2.5 seconds or less.
First Input Delay (FID): How long it takes until a user can interact with a page.
It should be of 100 milliseconds or less.
Cumulative Layout Shift (CLS): How often users experience layout shifts.
CLS score should be as close to 0 as possible.

Free SEO Tools for measuring site speed:

7. Internal Linking for SEO

It's when you link to another page that lives on the same domain.

Linking another article or product in a tasteful way increase users time on the site and creates a network of links of related pages.

Internal Links make your pages more discoverable and they also pass Page Rank, which is a value used by Google to rank pages.

Best practices for internal linking structure

Will it be a good decision to spam internal links?

No. Absolutely not.

It's important that you link content where it feels natural, with anchor text that describes what the destination is.

Example:
Notice I have also linked to some of my other blogs all throughout the article 😉.

8. Schema Markup and Structured Data

Schema is not a ranking factor for Google. But it indirectly helps your site rank higher in google.

Google, Bing, Yandex, and Yahoo! worked together to create Schema.org so you could provide search engines the data they require to understand your content and deliver the most relevant results.

Implementing Structured data

You can use any of the 3 methods suggested by Google:

JSON-LD is the format Google recommends and also the easiest one to implement.

1. Choose the most important material on your blog to markup.

Typical keys consist of:

Author information
Publishing dates
Categories or tags

2. Create the script

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  ...other data,
  "author": {
    "@type": "Person",
    "name": "Your Name"
  },
  "datePublished": "2024-07-01",
}

3. Embed JSON-LD in Your HTML

This JSON-LD script needs to be embedded in the HTML of your blog now.

A special script tag: <script type="application/ld+json"> is used for this purpose.
We can insert this into head or the body of the html.

Schema markup of my github bio blog looks something like this:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "url": "https://acidop.codes/blogs/beautify-your-github-profile",
    "image": {
      "@type": "ImageObject",
      "url": "/blogs/beautify-your-github-profile/cover.jpg",
      "height": 630,
      "width": 1200
    },
    "author": {
      "@type": "Person",
      "name": "AcidOP"
    },
    "inLanguage": "en-US",
    "headline": "Beautify Your GitHub Profile like a Pro",
    "dateCreated": "2023-03-15",
    "datePublished": "2023-03-15",
    "description": "Beautify your GitHub ... appealing for developers."
  }
</script>

The above script can be placed in either <head> or <body>.

You can check the validity of your structured data in the schema.org validator.

9. XML Sitemaps and Robots.txt

An XML sitemap tells search engines which URLs on your website should be indexed. Its is a list of all important content of your website.

Here is a part of the sitemap of my website:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://acidop.codes</loc>
    <changefreq>Yearly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://acidop.codes/blogs/nextjs-markdown-editor</loc>
    <changefreq>Yearly</changefreq>
    <priority>0.7</priority>
  </url>
</urlset>

Save your sitemaps as sitemap.xml in your project root. Then submit your sitemap to Google Search Console.

Robots.txt

A robots.txt file is a simple text file on a website that tells search engines which pages they can or can't visit.

Example:

Sitemap: https://acidop.codes/sitemap.xml
User-agent: *
Allow: /
Disallow: /admin

In the above example, we submit our sitemap, and also make it clear we do not want to index our admin directory.

10. Canonical Tags (Important)

<head>
  <link
    rel="canonical"
    href="https://acidop.codes/blogs/developer-seo-tips"
  />
</head>

In SEO, canonical tag is a link attribute used to tell search engines which version of a webpage is the original one, helping to avoid confusion when there are multiple pages with similar or identical content.

Google is known to penalize sites with duplicate content.

EXAMPLE:

https://acidop.codes
https://acidop.codes?utm_content=buffer

Even with UTM parameters, both point to the same page right?

But Google would consider both URLs to be different pages.

Having a proper canonical tag would help google understand both are same.

My story :

I write blogs on 2 sites. Dev.to (which supports canonical URLs) and my website: acidop.codes. My primary source is my website obviously.

First I post my blog on my website. Then I post the same blog on dev.to with canonical URL pointing to my own website.

This way I manage to get a bigger audience while also preventing google from penalizing me.

11. User Experience (UX) on SEO

Google wants users to have a seamless, intuitive, and enjoyable experience when on a site (page experience).

Google has a set of guidelines to assess page experience.

Do your pages have good Core Web Vitals?
Are your pages served in a secure fashion?
Does your content display well on mobile devices?
Does your content avoid using an excessive amount of ads that distract from or interfere with the main content?
Do your pages avoid using intrusive interstitials?
Is your page designed so visitors can easily distinguish the main content from other content on your page?

12. Regular SEO Audits and Monitoring

An SEO audit determines how optimized your website is for search engines. It identifies problems that could be harming the website's rankings and offers ways to fix them.

Free Tools for SEO audits:

Conclusion

There you have it, 12 easy tricks to improve on SEO.

Implementing all of them does not need too much tweaking and are very straight forward.

I built an Markdown editor using Next.js and TailwindCss 🔥

Zeeshan — Tue, 14 Nov 2023 17:51:54 +0000

Join me on this project where we build an online Markdown editor using the latest version of Nextjs.

Objectives

Rendering markdown in an Next.js project
Use custom components
Add Remark and Rehype plugins
Learn to change states in parent component from child.
Have fun 🔥

To check the finished build click here

1. Create the landing page

I want a simple layout so I divided the screen into two parts; the left being the editor and we see the markdown rendering on the right.

const Homepage = () => {
    return (
    <div className='h-screen flex justify-between'>
        // Input the markdown
        <section className='w-full pt-5 h-full'>
          <textarea
            className='w-full ... placeholder:opacity-80'
            placeholder='Feed me some Markdown 🍕'
            autoFocus
          />
        </section>
        <div className='fixed ... border-dashed' />
        // Render the markdown
        <article className='w-full pt-5 pl-6'>
          Markdown lies here
        </article>
      </div>
    )
}

return Homepage

2. Add states to store data

Now let's change it into a client component and add the useState hook.

"use client"

import { useState } from "react"

const Homepage = () => {
    const [source, setSource] = useState('');
    return (
        ...
        <textarea
          className='w-full ... placeholder:opacity-80'
          placeholder='Feed me some Markdown 🍕'
          value={source}
          onChange={(e) => setSource(e.target.value)}
          autoFocus
        />
        ...
    )
}

3. Setup react-markdown and @tailwindcss/typography

We use react-markdown to render markdown and @tailwindcss/typography to style the markdown. Install them by firing the following commands.

npm install react-markdown
npm install -D @tailwindcss/typography

Now import and add the Markdown component and pass source as children. Remember to add the prose classname to the Markdown component.

import Markdown from 'react-markdown'

const Homepage = () => {
    return (
        ...
        <div className='fixed ... border-dashed' />
        // Render the markdown
        <article className='w-full pt-5 pl-6'>
          <Markdown
            className='prose prose-invert min-w-full'
          >
            {source}
          </Markdown>
        </article>
        ...
    )
}

Now if you type any markdown you'd still not find any changes. This is because we forgot to add the @tailwindcss/typography plugin to the tailwindcss config 💀

Change your tailwind.config.ts to the following:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  // Add the plugin here
  plugins: [require('@tailwindcss/typography')]
}

export default config

Now write some markdown and you will see the changes live 🚀

4. Code Highlighting and Custom Components

Now we need to install the react-syntax-highlighter package to add code highlighting to our project.

npm i react-syntax-highlighter
npm i --save @types/react-syntax-highlighter

Now we are going to create a Custom Component for the Code Highlighter.

Create a folder called components inside the src folder. Now create a file called Code.tsx inside the components folder.

Add the following code from the documentation of react-syntax-highlighter:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { materialOceanic } from 'react-syntax-highlighter/dist/cjs/styles/prism';

export const CodeBlock = ({ ...props }) => {
  return (
    <SyntaxHighlighter
      language={props.className?.replace(/(?:lang(?:uage)?-)/, '')}
      style={materialOceanic}
      wrapLines={true}
      className='not-prose rounded-md'
    >
      {props.children}
    </SyntaxHighlighter>
  )
}

Here the props contain a classname with the language of the code in the format: lang-typescript or sometimes language-typescript so we use some regexto remove everything except the name of the language. The not-prose classname is going to remove the default typography styles.

Now comeback to the main page.tsx file and import the CodeBlock component and pass it to the original <Markdown /> component

import Markdown from 'react-markdown'
import { CodeBlock } from '@/components/Code'

const Homepage = () => {
    const options = { code: CodeBlock }
    return (
        ...
          <Markdown
            className='prose prose-invert min-w-full'
            components={options}
          >
            {source}
          </Markdown>
        ...
    )
}

This is going to replace every occurrence of code with our Custom CodeBlockcomponent.

Optional

BUG (🐛): You might have a weird dark border around your code component which is caused by the pre tag and tailwind styles.

To fix this go back to your Code.tsx and add the following code that removes the tailwind styles from the pre tag.

export const Pre = ({ ...props }) => {
  return (
    <div className='not-prose'>
      {props.children}
    </div>
  )
}

Import this into your page.tsx and add it into the options variable:

const Homepage = () => {
    const options = { 
        code: CodeBlock,
        // Add here
        pre: Pre,
    }
    return ( ... )
}

This is going to remove that border.

5. Adding Rehype and Remark Plugins

Rehype and Remark are plugins used to transform and manipulate the HTML and Markdown content of a website, helping to enhance its functionality and appearance.

We are going to use the following:

rehype-sanitize : Sanitize the markdown
rehype-external-links : Add an 🔗 icon on links
remark-gfm : Plugin to support GFM (Supporting tables, footnotes, etc.)

Install the Plugins:

npm i remark-gfm rehype-external-links rehype-sanitize

Back to our page.tsx

import remarkGfm from 'remark-gfm'
import rehypeSanitize from 'rehype-sanitize'
import rehypeExternalLinks from 'rehype-external-links'

... 
<Markdown
  ...
  remarkPlugins={[remarkGfm]}
  rehypePlugins={[
    rehypeSanitize,
    [rehypeExternalLinks,
     { content: { type: 'text', value: '🔗' } }
    ],
  ]}
>{source}</Markdown>

Pass the remark plugins within remarkPlugins and rehype plugins in rehypePlugins (I know very surprising).

If any plugin needs any customization put them in square brackets followed by the plugin name and the options in curly brackets in this syntax: [veryCoolPlugin, { { options } }]

6. Header with Markdown buttons

Next we add a Header component that has buttons which on clicked inserts certain Markdown elements.

First create a Header.tsx in the components folder and write the following code:

const Header = () => {
  const btns = [
    { name: 'B', syntax: '**Bold**' },
    { name: 'I', syntax: '*Italic*' },
    { name: 'S', syntax: '~Strikethrough~' },
    { name: 'H1', syntax: '# ' },
]

  return (
    <header className="flex ... bg-[#253237]">
        {btns.map(btn => (
          <button
            key={btn.syntax}
            className="flex ...rounded-md"
          >
            {btn.name}
          </button>
        ))}
    </header>
  )
}

export default Header

Import it in the main page.tsx

import Header from '@/components/Header'

const Homepage = () => {
    const options = { code: CodeBlock }
    return (
        <>
        <Header /> // Should be on top
        <div className='h-screen flex justify-between'>
            ...
        </div>
        </>
    )
}

Now here's the catch. Our states lie in the parent component and the Header is a child component.

How do we work with the states in the child component? The best solution is we create a function to change the state in parent component and pass the function to the child component. Read this article

const Homepage = () => {
  const [source, setSource] = useState('');

  const feedElement = (syntax: string) => {
    return setSource(source + syntax)
  }
  
  return (
     <>
     <Header />
    ...
  )
}

In Header.tsx we need to accept the function as a parameter and add it to the button using the onClick attribute:

const Header = (
  { feedElement }: 
  { feedElement: (syntax: string) => void }
) => {
  const btns = [ ... ]

  return (
    ...
    <button
      key={btn.syntax}
      className="flex ...rounded-md"
      onClick={() => feedElement(btn.syntax)}
    >
      {btn.name}
    </button>
  )
}

Back to page.tsx we pass the feedElement function to the Header

const feedElement = (syntax: string) => {
  return setSource(source + syntax)
}
  
return (
  <>
  <Header feedElement={feedElement} />
  ...
)

Now anytime you click on a button you should get the following Markdown Element.

Wrapping Up

There you go. We now have a fully functioning Markdown Editor built using Nextjs.

If you liked this article or gained something please give this one a red heart 💖 and follow me for more.

I built an Harry Potter⚡ API, so you dont have to

Zeeshan — Fri, 16 Jun 2023 12:29:38 +0000

Hello World!

Now before you scoff and say, "What on Earth would you need a Harry Potter API for?" hear me out. We Potterheads love the intricate tapestry of spells, characters, houses, books, and movies. So, naturally, it got me thinking, "Wouldn't it be amazing to have an API that provides all this enchanting data?!"

3 days and almost 10 coffees later I have everything ready.

What we're building 🤔

Let's create an API that sends data about the following from the franchise:

Characters
Spells
Houses
Books
Movies

At the end I'll also tell you why I had to bang my head on wall for a mistake 🤏 this big, that caused a bug on production.

Setting up the project

I used NextJS for this because that is my goto for every web development project.

Almost everyone knows how to setup a Nextjs project so I'm not explaining it however you can follow this if you don't know how to.

Next I ~~stole~~ open sourced data from KostaSav and Daniel. And put them inside a folder called db inside project root.

Creating API Routes

In NextJS 13 the way API works has completely changed. In order to get APIs working follow the below steps:

Inside the app dir create a folder called api. Not necessarily api you can also use your name for the folder and it will still work, unlike Next 12. But for simplicity we will use api.
Create a folder called characters and finally inside it create a file called route.ts. The route.ts will be the entry to the /api/characters path. It is similar to what index.html is (entry point).
Inside characters folder create another folder called [characters] followed by another route.ts. This will catch all dynamic routes. e.g. /api/characters/harry%20potter
Repeat the above steps for houses, spells, books, movies.

Next 13 APIs (Important)

For an API to work in Next 13 we need to follow this syntax:

// For GET requests
export async function GET() {
  return new Response("Hello");
}

// For POST requests
export async function POST() {
  return new Response("World");
}

// To get slug follow this
export async function GET(
    { params }: { params: { character: string } }
) {
  const { character } = params;
  return new Response(character);
}

Check out their documentation here.

Setting up the APIs

/api/characters

This route sends json containing data about characters from the Franchise. So we need to read the data from db/characters.json, convert into a JSON string and send it.

import characters from "@/db/characters.json";

export async function GET() {
  return new Response(JSON.stringify(characters), {
    headers: { "content-type": "application/json" },
  });
}

/api/characters/[character]

This is a bit complicated.

Dynamic Route which will send data about an individual character.
For this we need to get the slug from URL.

So if your folder is named [character], inside the GET method you need to pass the following parameter:

import characters from "@/db/characters.json";

export async function GET(
  { params }: { params: { character: string } }
  // I totally understand this line I swear

  const { character } = params; // Ah finally the slug
)

Next we need to find the character from the slug in our JOSN file.

if (character) {
    const characterString = characters.find(
      (c) => c.name.toLowerCase() === character.toLowerCase()
    );
    
    if (characterString) {
      return new Response(JSON.stringify(characterString), {
        headers: { "content-type": "application/json" },
      });
    }
  }

Finally if no such character exists in the database, return a message saying the same.

return new Response(`No character with name ${character}`);

So at the end your code will look somewhat like this:

import characters from "@/db/characters.json";

export async function GET(
  request: Request,
  { params }: { params: { character: string } }
) {
  const { character } = params;

  if (character) {
    const characterString = characters.find(
      (c) => c.name.toLowerCase() === character.toLowerCase()
    );

    if (characterString) {
      return new Response(JSON.stringify(characterString), {
        headers: { "content-type": "application/json" },
      });
    }
  }
  return new Response(`No character with name ${character}`);
}

Repeat the above steps for houses, spells, books, movies.

The Error

And about the error I talked about in the first part...

So I used TailwindCSS for the frontend and for some reason it just wasn't working when pushed on Vercel. So I had to spend a good part of my day just to find out that my tailwind config had a misconfiguration. So basically I wrote components instead of Components 😑.
Just 1 letter caused me so much trouble.

Finally...

This is just a quick rundown of a 4 days journey and around 10 cups coffee.

Please checkout the Live Demo and here is the Github Repo

If you enjoyed the API please give a 💖 and 🌟 the Github repo.

The Ultimate Linux Cheat Code Handbook

Zeeshan — Thu, 23 Mar 2023 19:26:01 +0000

You think you know Linux? Think again. With this cheat code handbook, you'll be hacking your way to total system domination in no time. No more asking for help on forums or struggling with confusing command lines. Get your copy now and start pwning the competition like the badass you are!

Basic System Commands

Command	Description
cat	displays the contents of a file
pwd	displays the current working directory
cd	changes the current directory
ls	lists the contents of a directory
cp	copies files and directories
mv	moves or renames files and directories
rm	removes files and directories
mkdir	creates a new directory
rmdir	removes an empty directory
chmod	changes the permissions of a file or directory
ps	displays information about running processes
top	displays real-time information about system usage
kill	terminates a process
shutdown	shuts down the system

File Commands

Command	Description
ls	lists the files of a directory
ls -l	lists the files of a directory in long format
ls -a	lists all files of a directory, including hidden
pwd	displays the current working directory
cd	changes the current directory
cd ~	changes the current directory to the home directory
cd ..	changes the current directory to the parent
cd -	changes the current directory to the previous
cd /	changes the current directory to the root
mkdir	creates a new directory with the specified name
rmdir	removes the directory with the specified name
touch	creates a new file with the specified name
cp	copies files and directories
mv	moves or renames files and directories
rm	removes files and directories
rm -r	removes files and directories recursively
rm -f	removes files and directories forcefully
rm -rf	removes files and directories forcefully recursively

File Permissions

Command	Description
chmod 777 file	Gives Read, Write and Execute permissions to everyone
chmod 755 file	Give read, write, and execute permission to owner, and read and execute permission to group and others
chmod 644 file	Give read and write permission to owner, and read permission to group and others
chown user file	changes the owner of a file
chown user:group file	changes the owner and group of a file
chmod u+x file	gives execute permission to the owner
chmod g+x file	gives execute permission to the group

Users and Groups

Command	Description
id	displays the user and group IDs
id user	displays the user and group IDs for a specific user
whoami	displays the current user
who	displays who is logged on
who -a	displays who is logged on and what they are doing
last	displays the last logged in users
adduser user	adds a new user
usermod -aG group user	adds a user to a group
groupadd group	adds a new group
userdel user	deletes a user
usermod	modifies a user account
chgrp group file	changes the group ownership of a file

Package Management (Needs `sudo`)

Command	Description
apt update	updates the package lists
apt upgrade	upgrades the installed packages
apt install package	installs a package
apt remove package	removes a package
apt autoremove	removes packages that are no longer needed
apt search package	searches for a package
apt purge package	removes a package and its configuration files
apt clean	removes downloaded package files
apt autoclean	removes old downloaded package files

SSH

Command	Description
ssh user@host	connects to a remote host using SSH
ssh -p port user@host	connects to a remote host using SSH on a specific port
ssh-keygen	generates a new SSH key pair
ssh-copy-id user@host	copies the SSH key to the remote host
ssh -i key user@host	connects to a remote host using a specific SSH key
scp file user@host:	copies a file to a remote host

System Info

Command	Description
uname	print system information
uname -a	displays all system information
uname -r	displays the kernel release
uname -m	displays the machine hardware name
uname -n	displays the network node hostname
hostname	displays the network node hostname
hostname -I	displays All IP address
uptime	displays how long the system has been running
whoami	displays the current user
df	displays the amount of disk space available
man	displays manual page

Privilege Escalation

Command	Description
sudo	allows a user to execute a command as the superuser
su	allows a user to execute a command as another user
sudo su	allows a user to execute a command as the superuser
sudo -i	allows a user to execute a command as the superuser
sudo -u	allows a user to execute a command as another user
sudo -l	allows a user to list the allowed commands

Archiving

Command	Description
tar -cvf archive.tar	creates a new archive
tar -xvf archive.tar	extracts files from an archive
tar -tvf archive.tar	lists the contents of an archive
tar -cvzf archive.tar.gz	creates a new compressed archive
zip archive.zip file	creates a new archive in ZIP format
unzip archive.zip	extracts files from an archive in ZIP format

Searching

Command	Description
grep pattern file	searches for a pattern in a file
grep -r pattern dir	searches for a pattern in a directory recursively
grep -v pattern file	searches for all lines that do not contain a pattern
grep -i pattern file	searches case-insensitively for a pattern in a file
grep -l pattern file	displays the names of files that contain a pattern
locate file	searches for a file in the database
find dir -name file	searches for a file in a directory
find .	searches for files in the current directory
find / -name file	searches for a file in the entire system
find / -name file -type f	searches for a file in the entire system for file types

Process Management

Command	Description
ps	displays your currently active processes
ps -ef	displays all processes
top	displays all processes
kill pid	kills the process with the specified process ID
killall process	kills all processes with the specified name
bg	List and resume stopped jobs in the background
fg	Bring the most recently suspended job to the foreground

Networking

Command	Description
ifconfig	displays the network interfaces
ifconfig -a	displays all network interfaces
ifconfig eth0	displays the network interface eth0
iwconfig	displays the wireless network interfaces
systemctl stop NetworkManager	stops the NetworkManager service
systemctl start NetworkManager	starts the NetworkManager service
systemctl restart NetworkManager	restarts the NetworkManager service
whois domain	displays whois information for a domain
dig domain	performs DNS lookup for a domain
host domain	performs DNS lookup for a domain
nslookup domain	performs DNS lookup for a domain
ping domain	pings a domain and displays the result

Keyboard Shortcuts

Command	Description
Ctrl + C	Stops the current command
Ctrl + Z	Backgrounds the current command
Ctrl + D	Logs out the current user
Ctrl + A	Moves the cursor to the beginning of the line
Ctrl + E	Moves the cursor to the end of the line
Ctrl + L	Clears the terminal screen
Ctrl + Shift + C	Copies the selected text
Ctrl + Shift + V	Pastes the selected text
Ctrl + Shift + T	Opens a new tab in the current window
Ctrl + Shift + N	Opens a new window in the current session
Ctrl + Shift + Q	Closes the current window
!!	Repeats the previous command
exit	Exits the current shell

Consider dropping a red heart 💖

Beautify Your GitHub Profile like a Pro 😍

Zeeshan — Wed, 15 Mar 2023 15:51:52 +0000

GitHub is a code-sharing platform that provides developers a platform to showcase their coding skills, expertise and build an impressive online presence. It is important to keep your GitHub profile up-to-date and visually appealing. Here are some tips to help you beautify your GitHub profile like a pro!

Add a ReadMe

The ReadMe is the first thing people see when they visit your profile. So, make sure you add one that gives a clear idea of who you are and what you do.

To create a ReadMe for your profile you need to create a repo with your username as the repo name. For example if your username is AcidOP then you must name the repo as AcidOP.

Use your creativity

Now if the perfect time to learn some markdown and put it to good use. You can also use html for this step but I would suggest putting the time to learn markdown and use the same.

Now this is your place to shine. Use your creative ideas to create the best possible profile according to you. You can insert images and badges to make it more aesthetic.

Pro tip: You can ask ChatGPT: "Some tips for writing an aesthetic Github profile"

I will add my 2 cents:

Keep it concise and to the point
Use relevant images or gifs to make it more engaging
Add links to your best projects and social media profiles

Pin Best Repositories

Pinning your best repositories at the top of your profile makes them more visible to visitors. This gives them a quick insight into your coding skills and expertise.

Choose the ones that are your best projects so far or the ones that you are most proud of. You can also pin your most recent projects to keep your profile updated.

Contribute

Contribution is the key to building a strong presence on GitHub. It shows that you are an active member of the developer community and are passionate about coding. Through contributing you will not only add more to the open source community but also increase your network. But remember to keep it authentic.

Here are some ways you can contribute:

Find repositories that need help
Add more to the libraries you already use
Create your own open source project
Report bugs and suggest improvements

Good GitHub Bio Section

The GitHub bio section is a brief introduction about yourself that appears at the top of your profile. It is important to keep it simple yet engaging.

Here are some tips to write a good bio:

Use keywords that describe your skills and expertise
Mention your current job title or what you are studying
Add a touch of humor to make it more interesting

Additional Pro tips:

You can get the Github Pro Highlight for free if you are a student. Apply for Student Developer Pack
Keep stacking Achievements. Definately a plus point.
Join the Developer Program. You get another highlight.
Create an organisation. (Better to keep it legit though)

Here is my Github profile readme if you need any inspiration.

In conclusion, these tips will help you beautify your GitHub profile and make it stand out from the crowd. Remember to keep it updated, engaging and relevant to your skills and interests. Happy coding!

Thanks for reading

If you liked this article consider liking this and following me as I write frequently about new tools and stuff

Regex Cheatsheet 101: Your Ticket to Regex Mastery

Zeeshan — Sun, 19 Feb 2023 18:13:30 +0000

Regex Cheatsheet 101

Are you tired of trying to make sense of regex? Don't worry, you're not alone! Regex is like a secret language that only a select few seem to understand.

We've got you covered with our Regex Cheatsheet 101!

NOTE: This blog is visually unappealing due to the formatting of dev so I am also linking my blog where it looks better.

Anchors

^: Start of string or line. Think of it as a hat for your text. It marks the beginning of a line.
\A: Start of string. A fancier hat that marks the beginning of a string.
$: End of string or line. The opposite of ^, it marks the end of a line.
\Z: End of string. The fancier cousin of $ that marks the end of a string.
\b: Word boundary. It's like a little force field around a word that tells you where it begins and ends.
\B: Not word boundary. The opposite of \b.
\<: Start of word. Similar to ^ and \A, but specifically for words.
\>: End of word. The opposite of \<.

Character Classes

\c: Control character. A character that controls your text. Watch out, it's in charge!
\s: Whitespace. Spaces, tabs, and other invisible characters that make your text look nice and neat.
\S: Not whitespace. Anything that's not a space, tab, or other invisible character.
\d: Digit. The numbers 0-9.
\D: Not digit. Anything that's not a number.
\w: Word. Letters, numbers, and underscores.
\W: Not word. Anything that's not a letter, number, or underscore.
\x: Hexadecimal digit. A fancy name for numbers and letters (A-F, a-f) that are used in hex code.
\O: Octal digit. Numbers in base 8. Fun fact: octopuses are also good with digits!

Quantifiers

*: 0 or more. Like a buffet that you can go back to as many times as you want.
+: 1 or more. Like a VIP lounge that only lets in the cool kids who have something to offer.
?: 0 or 1 (optional). Like a checkbox that you can check or leave empty.
{3}: Exactly 3. The perfect number of times to do something.
{3,}: 3 or more. Like a marathon that never seems to end.
{2,5}: 2, 3, 4 or 5. Like a multiple-choice question with several correct answers.

Special Characters

\n: New line. The line break that you use when you want to start a new paragraph.
\r: Carriage return. A fancy name for the Enter key.
\t: Tab. The button that you press when you want to indent your text.
\v: Vertical tab. A rarely used character that you probably won't need to worry about.
\f: Form feed. A character that's mostly used in old printers. Don't worry about it.

Assertions

?=: Lookahead assertion. Like a crystal ball that tells you what's coming up next in your text.
?!: Negative lookahead. The opposite of ?=. It tells you what's not coming up next in your text.
?<=: Lookbehind assertion. Like a time machine that takes you back to the beginning of a word or phrase.
?<!: Negative lookbehind. The opposite of ?<=. It tells you what's not behind you in your text.

Groups and Capture

(): Group. A way to group parts of your regex together.
(?:): Non-capturing group. Like a regular group, but it doesn't create a capture group.
\n: Backreference. A way to reference a previous capture group.
(?P<name>): Named capture group. A way to give a capture group a name.

Alternation

|: Alternation. A way to match one thing or another. It's like a fork in the road.
[]: Character set. A way to match one character out of a set of characters.
[^]: Negated character set. The opposite of []. Matches anything not in the set.

Flags

i: Case-insensitive. Matches both upper and lowercase letters.
m: Multiline. Allows ^ and $ to match the beginning and end of lines.
s: Dot-all. Allows . to match newline characters.
x: Verbose. Allows you to write your regex in multiple lines and add comments.

Family Friendly Examples

Match the first word of a sentence:

^\w+

Match the whole text except for the last line:

^.*\n.*\n.*$

Find all the words that contain the letter "z":

\b\w*z\w*\b

Find all the words that do not contain the letter "e":

\b[^e\s]+\b

Match any line that starts with a digit:

^\d.*$

Match any line that ends with a punctuation mark:

^.*\p{P}$

Find all the phone numbers in a text:

(\d{3})-(\d{3})-(\d{4})

Find all the email addresses in a text:

\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b

Match any line that starts with the word "Lorem":

^\bLorem\b.*$

Match any line that ends with a three-digit number:

^.*\b\d{3}$

Match any line that contains the word "regex" and the word "cheat":

^(?=.*regex)(?=.*cheat).*$

Match any line that does not contain the word "Python":

^(?!.*Python).*$

Match any line that starts and ends with the same word:

^\b(\w+)\b.*\b\1\b$

Match any line that has more than 10 characters:

^.{11,}$

Match any line that has exactly 3 digits:

^.*\b\d{3}\b.*$

Match any line that has a word with 2 or more consecutive vowels:

^.*\b[aeiou]{2}\w*\b.*$

Match any line that has a word with at least 3 consonants in a row:

^.*\b[^aeiou]{3}\w*\b.*$

Match any line that has a word that starts with "c" and ends with "t":

^.*\bc\w*t\b.*$

Originally published on my blog at acidop.codes

How to Use 2Captcha to Solve reCaptcha V3 Challenges in Python

Zeeshan — Fri, 17 Feb 2023 19:47:36 +0000

Introduction

Are you tired of being locked out of websites that use reCaptcha V3?

Don't worry boys, for we have a solution! In this blog, we'll teach you how to use Python and the 2Captcha library to solve reCaptcha V3 challenges.

But first, let's talk about why reCaptcha V3 is such a pain in the bot. Unlike previous versions of reCaptcha, V3 doesn't require users to solve a visual puzzle. Instead, it assigns a score to each user based on their browsing behavior, and if their score falls below a certain threshold, they'll be prompted to solve a challenge.

This is a problem for bots and automation tools because they don't behave like normal users. Even if you try to mimic human behavior, your score might still be too low to bypass the challenge. That's where 2Captcha comes in.

What is 2Captcha?

2Captcha is a third-party service that uses human workers to solve challenges like reCaptcha. It's like outsourcing your captcha-solving to an army of freelancers.

The process is simple and lightning fast 🔥:

Captcha sent to them (captcha -> 2Captcha)
They send it to a worker (2Captcha -> worker)
A worker solves it (worker -> 2Captcha)
The solution is sent to you (2Captcha -> you)

You can use 2Captcha for free, but you'll need to pay for credits to access the service. The cost varies depending on the number of credits you buy, but it's generally affordable. And it's a small price to pay for the convenience of not having to solve reCaptcha challenges yourself.

Setting up the 2Captcha API

To use 2Captcha, you'll need to create an account and get an API key. Once you have your API key, you can use the 2Captcha Python library to send challenges to the service and get the solutions.
Install the 2Captcha Python library:

pip3 install 2captcha-python

Create a new Python file and import the 2Captcha library:

import twocaptcha

api_key = 'YOUR_API_KEY_HERE'
solver = twocaptcha.TwoCaptcha(api_key)

Getting the Sitekey and Action

Before you can solve a reCaptcha challenge, you'll need to know the sitekey and action. These values are embedded in the HTML of the website you're trying to access.

P.S. This is the boring and hard part. I promise it gets better from here 😅.

To get the sitekey and action, you can use regular expressions to search for them in the HTML. Here's some sample code that shows you how to do that:

import requests
import re

url = 'https://www.example.com'
html = requests.get(url).text

# Set the regex patterns
sitekey_pattern = re.compile(r"data-sitekey='(.*?)'")
action_pattern = re.compile(r'action="(.*?)"')

# Search the HTML for the sitekey and action
sitekey_match = sitekey_pattern.search(html)
action_match = action_pattern.search(html)

# Check if the sitekey and action were found
if sitekey_match:
    sitekey = sitekey_match.group(1)
else:
    sitekey = None

if action_match:
    action = action_match.group(1)
else:
    action = None

# Error & exit if the sitekey or action were not found
if (sitekey == None) or (action == None):
    print("Error: Sitekey or Action not found ❌")
    print(f"Sitekey: {sitekey} | Action: {action}")
    exit()

The code assumes that the website's reCAPTCHA sitekey and action are located within the HTML code using the patterns data-sitekey='(.*?)' and action="(.*?)", respectively. If the website's HTML code uses different patterns you need to change the regex patterns accordingly.

If no matches are found, the code will print an error message and exit. Fix your regex patterns and try again.

NOTE: If you're not familiar with regular expressions or making requests in python, here are some resources that can help you get started 🤗:

Use this Regex Cheatsheet if you want some help with regular expressions.
Read the requests library documentation here.

Solving the reCaptcha Challenge

Now that you have the sitekey and action, you can send the reCaptcha challenge to 2Captcha and get the solution. Here's some sample code that shows you how to do that:

result = solver.recaptcha(
  sitekey=sitekey,
  url=url,
  version="3",
  action=action,
  score=0.6
)

print(result)

NOTE: The code assumes that you're using reCaptcha V3, but you can also use it to solve reCaptcha V2 challenges. To do that, you'll need to pass only the sitekey and url.

Final Code

import re
import requests
import twocaptcha

url = 'https://www.example.com'
html = requests.get(url).text

# Set the regex patterns
sitekey_pattern = re.compile(r"data-sitekey='(.*?)'")
action_pattern = re.compile(r'action="(.*?)"')

# Search the HTML for the sitekey and action
sitekey_match = sitekey_pattern.search(html)
action_match = action_pattern.search(html)

# Check if the sitekey and action were found
if sitekey_match:
    sitekey = sitekey_match.group(1)
else:
    sitekey = None

if action_match:
    action = action_match.group(1)
else:
    action = None

# Error & exit if the sitekey or action were not found
if (sitekey == None) or (action == None):
    print("Error: Sitekey or Action not found ❌")
    print(f"Sitekey: {sitekey} | Action: {action}")
    exit()


result = solver.recaptcha(
  sitekey=sitekey,
  url=url,
  version="3",
  action=action,
  score=0.3
  )

print(result)

Conclusion

And there you have it, folks! Now you know how to implement 2Captcha in your Python scripts. You can use this technique to automate any task that requires solving reCaptcha challenges.

Helpful Resources 📚

Originally published on acidop.codes

React Pro Tips - How to Write High Quality Code Like a Pro

Zeeshan — Sat, 11 Feb 2023 16:31:38 +0000

Best Practices for Building Reactive User Interfaces with React

React is a popular JavaScript library for building user interfaces that are both dynamic and responsive. It offers a powerful set of features for building scalable, efficient, and maintainable applications. In this blog post, we will explore some of the best practices for building user interfaces with React.

ES6 Syntax

One of the key features of React is its use of ES6 syntax. This enables developers to write code that is concise and expressive. You should take advantage of the latest features of ES6, such as arrow functions, template literals, and destructuring, to make your code more readable and maintainable.

Here is an example of a simple component that uses ES6 syntax:

Use Arrow Functions

Arrow functions are a great way to simplify your code. They allow you to write functions that are more concise and easier to read. In React, arrow functions are commonly used as anonymous functions that are passed as props to child components.

Here is an example of a component that uses arrow functions:

const add = (a, b) => {
  return a + b;
}

Use Template Literals

Template literals are a powerful feature of ES6 that allow you to embed expressions within strings. In React, you can use template literals to simplify your JSX code and make it easier to read.

Here is an example of a component that uses template literals:

const MyComponent = ({ name }) => {
  return <div>Hello, ${name}!</div>;
};

Use const & let

When declaring variables in React, it's a good practice to use const and let instead of var. This ensures that the scope of your variables is well-defined, making it easier to reason about your code.

Here is an example of a component that uses const and let:

const MyComponent = ({ name }) => {
  const message = `Hello, ${name}!`;
  let color = 'blue';

  return <div style={{ color }}>{message}</div>;
};

Object Destructuring

Object destructuring is a convenient feature of ES6 that allows you to extract values from an object and assign them to individual variables. In React, you can use destructuring to simplify your code and make it easier to read.

Here is an example of a component that uses object destructuring:

const myObject = {
    name: "Acid"
    role: "Developer"
}

const { name, role } = myObject;

Defining Objects

When defining objects in React, it's a good practice to use shorthand syntax and object destructuring to make your code more concise and readable.

Here is an example of a component that defines an object using shorthand syntax and destructuring:

const fruit = {
    name: "Mango",
    sweet: True,
    title: "King of fruits 💪🏻"
}

const { name, sweet, title } = fruit;

key Prop with map in JSX

When rendering a list of components in React, it's important to include a unique key prop for each component. This allows React to keep track of the components and optimize their rendering.

Here is an example of a component that uses the key prop with map in JSX:

const MyComponent = ({ names }) => {
return <ul>{names.map(name => {
    <li key={name}>{name}</li>
})}</ul> 
};

Component Name Should be in PascalCase

In React, it's a good practice to name your components using PascalCase. This makes it easier to distinguish your components from regular HTML elements.

Here is an example of a component named using PascalCase:

const MyComponent = () => {
    return <div>Follow Me!</div>
}

Variable & Function Names Should be in camelCase

In React, it's a good practice to name your variables and functions using camelCase. This makes your code more consistent and easier to read.

Here is an example of a component that uses camelCase for variable and function names:

const Component = ({ name }) => {
    const myVariable = `Hello, ${name}!`;
    function myFunction() {
        // Some Code
    }
    return <div>{myVariable}</div>;
}

Check null & undefined for Objects & Arrays

In React, it's important to check for null and undefined values before rendering objects and arrays. This ensures that your components don't throw errors and display unexpected results.

Here is an example of a component that checks for null and undefined values:

const Hello = ({age}) => {
    if(!age) {
    return <div>Please provide your age 😥</div>
    }

    return <div>You are {age} years old!</div>
}

Avoid DOM Manipulation

In React, it's important to avoid manipulating the DOM directly. Instead, you should let React handle the updates to the UI and take advantage of its built-in optimizations.

Here is an example of a component that uses DOM manipulation:

<div id="dom"></div>

const link = document.getElementById("dom")
link.textContent = 'AcidOP on top';

Remove Every Event Listener in useEffect

In React, it's important to remove event listeners when a component is unmounted. This helps to prevent memory leaks and improve the performance of your application.

Here is an example of a component that removes event listeners in useEffect:

import { useState, useEffect } from 'react'

const Hello = () => {
const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);

    return () => {
        setCount(0)
    }
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

Functional Components are Recommended

In React, it's recommended to use functional components whenever possible. They are easier to write, understand, and test than class components. Additionally, they can be optimized by React with functional updates.

Here is an example of a functional component:

const Component = () => {
    return <div>AcidOP on top!</div>
}

Here is an example of a class component:

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (
      <div>
        Hello, World!
      </div>
    );
  }
}

export default HelloWorld;

Create a Habit of Writing Helper Functions

In React, it's a good practice to write helper functions to encapsulate complex logic. This makes your code easier to understand, maintain, and reuse.

Here is an example of a component that uses a helper function:

const MyComponent = ({ names }) => {
  const getNameList = () => {
    return names.map(name => <li key={name}>{name}</li>);
  };

  return (
    <div>
      <h2>Names:</h2>
      <ul>{getNameList()}</ul>
    </div>
  );
};

Don't Throw Your Files Randomly

In React, it's important to organize your files in a structured and meaningful way. This makes it easier to find and maintain your code.

For example, you could create a directory for each component and place the component file, its styles, and tests together. You could also create a shared directory for common components and utilities.

src:
  components:
    Navbar.tsx
    Footer.tsx

styles:
  Navbar.css
  Footer.css

Use Ternary Operator Instead of if/else if Statements

In React, it's a good practice to use the ternary operator instead of if/else statements when possible. This makes your code more concise and easier to read.

Here is an example of a component that uses the ternary operator:

const MyComponent = ({ name }) => {
  return <div>
    {name ? "Hello, ${name}!" : 'Please enter a name.'}
  </div>;
};

Conclusion

These are just a few of the best practices for writing clean and efficient code in React. By following these guidelines, you can write code that is easy to understand, maintain, and scale over time. So, try to implement these practices in your next React project and let us know how it works for you!

The only markdown cheatsheet you will need

Zeeshan — Fri, 10 Feb 2023 14:51:30 +0000

Markdown is a lightweight markup language that is widely used for formatting and styling text. It is simple to learn and easy to use, making it a popular choice for creating content for the web. Whether you are a blogger, a content creator, or just someone who wants to format text quickly, Markdown is an excellent choice. In this blog post, we will provide you with the only Markdown cheatsheet you will ever need.

Headings

Headings are used to organize and structure text. Markdown supports six levels of headings, from H1 to H6.

# H1 (Largest)
## H2
### H3
#### H4
##### H5
###### H6 (Smallest)

Emphasis

To add emphasis to your text, you can use bold, italic, or strikethrough formatting.

**bold**
*italic*
~~strikethrough~~

Lists

Markdown supports both ordered and unordered lists. To create an ordered list, use numbers, and to create an unordered list, use asterisks, pluses, or hyphens.

## Ordered List
1. Item 1
2. Item 2
3. Item 3

## Unordered List
- Item 1
- Item 2
- Item 3

Links

Links allow you to include hyperlinks in your text. To create a link, use the following syntax:

[Link text](URL)

Images

Markdown also supports the inclusion of images. To add an image, use the following syntax:

![Image Alt](URL)

Code Blocks

If you need to include code in your text, Markdown supports code blocks and inline code. To create a code block, use three backticks () before and after your code. To create inline code, use a single backtick (\) before and after your code.

# SingleLine Code
 `console.log("Follow me")`

# Multiline Code
    ```


    function printer(text) {
        console.log(text);
    }

    printer("AcidOP on top")


    ```

Blockquotes

To create a blockquote, use the greater than symbol (>) before your text.

> Quote here

Horizontal Rules

To create a horizontal rule, use three hyphens (---), asterisks (***), or underscores (___).

---
# Or
***
# Or
___

Tables

Markdown also supports the creation of tables. To create a table, use the following syntax:

| Column 1 | Column 2 | Column 3 |
| --- | --- | --- |
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |

Conclusion

That's it! With this Markdown cheatsheet, you now have all the tools you need to format and style your text. Whether you're writing a blog post, a readme file, or just taking notes, Markdown is a great choice. Start using it today and see how much easier it makes your life!

Fun Fact: This markdown tutorial blog was written using markdown

15 fun APIs to elevate your project

Zeeshan — Sun, 05 Feb 2023 15:08:10 +0000

As developers, we often find ourselves sifting through countless APIs searching for the perfect one to integrate into our latest project. But let's face it, sometimes the process can get a little dull. That's why we've scoured the web to bring you 15 APIs that are not only functional, but also sure to bring a smile to your face.

1. Chuck Norris API:

Why settle for ordinary jokes when you can have Chuck Norris jokes? This API delivers hilarious one-liners and trivia about the martial arts master. With over 500 jokes in its arsenal, you'll never run out of Chuck Norris material.
Chuck Norris API

2. Cat Facts API:

Whether you're a cat person or not, everyone can appreciate a daily dose of feline fun. This API sends out a daily cat fact to keep your users purr-fectly entertained.
Cat Facts API

3. Giphy API:

This API provides a huge collection of gifs and stickers, so you can add a touch of humor and animation to your next project. Giphy API

4. The Cat API:

Sometimes less is more, and that's certainly the case with this API. With access to thousands of cat images, you'll never run short on kitty content.
The Cat API

5. Dog CEO API:

Woof woof! This API provides images and information about various dog breeds. Whether you're building a pet-themed app or just want to add some canine cuteness, this API is sure to be a paw-some choice.
Dog CEO API

6. Meme Generator API:

Who doesn't love a good meme? This API lets you create popular meme images with custom captions, so you can meme-ify your latest project in no time.
Meme Generator API

7. Harry Potter API:

For all the Harry Potter fans out there, this API provides information on characters, spells, and more from the wizarding world. Harry Potter API

8. Superhero API:

Get ready to fight crime (or at least pretend to) with this API. It provides information on thousands of superhero characters, including their powers, abilities, and biographies.
Superhero API

9. Star Wars API:

For all the Star Wars fans out there, this API is a must-have. With information on characters, planets, starships, and more, you'll be able to bring the Star Wars universe to life in your next project.
Star Wars API

10. Emoji API:

This API provides information on emojis, including their names, keywords, and images. You can even search for emojis based on keywords or categories. Emoji API

11. Trivia API:

Do you have a trivia buff on your team? Then they'll love this API. It provides random trivia questions and answers on a wide range of topics.
Trivia API

12. Number Facts API:

This API provides interesting and fun facts about numbers. It's a great way to add a touch of trivia to your project. Number Facts API

13. Color API:

This API provides information on colors, including RGB and HEX values, color names, and more. It's a great way to add some color to your project. Color API

14. Ron Swanson Quotes API:

If you're a fan of the TV show Parks and Recreation, you'll love this API. It provides a collection of quotes from the character Ron Swanson, guaranteed to bring a smile to your face.
Ron Swanson Quotes API

15. Lyrics API:

This API provides lyrics for thousands of songs, so you can add a touch of music to your project. Lyrics API

So there you have it, 15 APIs that are sure to bring a fun and quirky touch to your next project. With options ranging from Chuck Norris jokes to visiting Hogwarts, there's something for everyone. Give them a try and see for yourself!

Originally written on my blog

Setup Google Analytics with Next.js (4 easy steps)

Zeeshan — Thu, 12 Jan 2023 18:31:21 +0000

In this blog post, we'll setup Google Analytics with your Next.js app and take it to the next level. (See what we did there? 😎)

Before we get started, it's important to note that Google Analytics is a powerful tool for tracking the performance of your website 🚀. By integrating it into your Next.js project, you'll be able to get valuable insights into things like how users are interacting with your site, where they're coming from, and what devices they're using.

So, let's get started! 🔥

Setup your Google Analytcs profile

Setting up a Google Analytics Account and Property

The first step in integrating Google Analytics with your Next.js project is to set up a Google Analytics account and property. Here's how to do it:

Go to the Google Analytics website and click the "Sign In" button in the top right corner.
If you don't already have a Google account, you'll need to create one. Click the "Create Account" button and follow the prompts to set up your account.
Once you've signed in to your Google account, click the "Admin" button in the bottom left corner of the page.
In the "Account" section, click the "Create Account" button.
Enter a name for your account and select "Web" as the "Industry Category". Then click the "Get Tracking ID" button.
Review the terms of service (or maybe skip? 😅) and click the "I Accept" button.
You'll now see your tracking ID and a snippet of code. This code needs to be added to your Next.js project. We'll do that in the next step.

Integrating Google Analytics with Next.js using "nextjs-google-analytics"

Now that you have a Google Analytics account and property set up, it's time to integrate it into your Next.js project. One way to do this is by using the "nextjs-google-analytics" library. Here's how to do it:

Install the "nextjs-google-analytics" library by running the following command in your terminal:
```
npm install nextjs-google-analytics
```

Create a new file called .env.local in the root of the project and add the following code:

NEXT_PUBLIC_GID=G-XXXXXXXXXX
# Don't forget to replace "G-XXXXXXXXXX"
# with your Google Analytics tracking ID

Add the following code to your _app.js file:

import '../styles/globals.css'
import { GoogleAnalytics } from 'nextjs-google-analytics'

// Don't forget to replace "G-XXXXXXXXXX"
// with your Google Analytics tracking ID
// in the .env.local file
const GID = process.env.NEXT_PUBLIC_GID

export default function App({ Component, pageProps }) {
  return (
    <>
      <GoogleAnalytics gaMeasurementId={GID} trackPageViews />
      <Component {...pageProps} />
    </>
  )
}

4.You're all set! Google Analytics will now track page views for your Next.js project.

Wrapping Up 📦

Congratulations, you've successfully integrated Google Analytics with your Next.js project! With this powerful tool, you'll be able to track the performance of your website and get valuable insights into how users are interacting with it.

I hope this blog post has been helpful in explaining how to integrate Google Analytics with your Next.js project. If you have any questions or need further assistance, feel free to leave a comment below or reach out to me on Twitter.

Happy tracking! 👀

Originally Posted on my blog at acidop.codes

DEV Community: Zeeshan

12 easy SEO Tips Every Developer Should Know

1. URL Structure

Using hyphens vs. underscores

2. Title Tags and Meta Descriptions

Writing compelling meta descriptions

3. Header Tags (H1, H2, H3, etc.)

Structuring content with header tags

4. Image Optimization for SEO

Using descriptive alt text

Choosing the right image formats

Implementing responsive images (srcset)

5. Mobile-Friendliness

Ensuring responsive design

6. Site Speed

Free SEO Tools for measuring site speed:

7. Internal Linking for SEO

Best practices for internal linking structure

8. Schema Markup and Structured Data

Implementing Structured data

1. Choose the most important material on your blog to markup.

2. Create the script

3. Embed JSON-LD in Your HTML

9. XML Sitemaps and Robots.txt

Robots.txt

10. Canonical Tags (Important)

My story :

11. User Experience (UX) on SEO

12. Regular SEO Audits and Monitoring

Conclusion

I built an Markdown editor using Next.js and TailwindCss 🔥

Objectives

To check the finished build click here

1. Create the landing page

2. Add states to store data

3. Setup react-markdown and @tailwindcss/typography

4. Code Highlighting and Custom Components

Optional

5. Adding Rehype and Remark Plugins

6. Header with Markdown buttons

Wrapping Up

I built an Harry Potter⚡ API, so you dont have to

What we're building 🤔

Setting up the project

Creating API Routes

Next 13 APIs (Important)

Setting up the APIs

The Error

Finally...

The Ultimate Linux Cheat Code Handbook

Basic System Commands

File Commands

File Permissions

Users and Groups

Package Management (Needs sudo)

SSH

System Info

Privilege Escalation

Archiving

Searching

Process Management

Networking

Keyboard Shortcuts

Consider dropping a red heart 💖

Beautify Your GitHub Profile like a Pro 😍

Add a ReadMe

Use your creativity

Pin Best Repositories

Contribute

Good GitHub Bio Section

Here is my Github profile readme if you need any inspiration.

Thanks for reading

Regex Cheatsheet 101: Your Ticket to Regex Mastery

Regex Cheatsheet 101

Originally published on my blog at acidop.codes

How to Use 2Captcha to Solve reCaptcha V3 Challenges in Python

Introduction

What is 2Captcha?

Setting up the 2Captcha API

Getting the Sitekey and Action

Package Management (Needs `sudo`)