1. Print Statement

First, let's talk about the most basic debugging technique: using print statements. This is the simplest way to check the value of a variable or the flow of your program. Inserting print statements at key points in your code can help you identify where things are going wrong. For example, if you suspect a problem in a loop, you can print the value of the loop variable at the beginning and end of each iteration to see if it's behaving as expected.

2. Debuggers

Another technique is using a debugger. A debugger is a program that allows you to step through your code line by line, pause execution, and inspect variables. Most modern integrated development environments (IDEs) come with a built-in debugger, such as the one in Visual Studio Code, PyCharm, or IntelliJ. Debuggers are especially useful for identifying problems in large, complex codebases, as they allow you to set breakpoints, watch variables, and step through code.

3. Logging Library

A third technique is using a logging library. Logging libraries allow you to record information about your program's execution, such as error messages, variable values, and performance metrics. These logs can help identify problems that are not immediately obvious, such as memory leaks or performance bottlenecks. Some popular logging libraries include Python's logging module, Java's log4j, and C#'s log4net.

4. Profiler

Another common tool used in debugging is the use of a profiler. A profiler is a tool that helps you to understand how your code is performing, and where it's spending most of its time. Profilers can help you identify performance bottlenecks, such as slow functions or excessive memory usage. Some popular profilers include the Python profiler, Xdebug for PHP, and Visual Studio's built-in profiler.

5. Assertions

Another important technique for debugging is using assertions. Assertions are statements in your code that check if a certain condition is true and raise an exception if it is not. These can be useful in catching bugs early on, as they allow you to specify the expected behavior of your code and ensure that it is happening. For example, you might use an assertion to check that a variable is within a certain range or that a list is not empty.

6. Version Control

Another technique is using a version control system such as Git. Version control systems allow you to keep track of changes to your code over time and revert to previous versions if necessary. This can be especially useful when debugging, as you can easily revert to a known good version of your code and compare it to the current version to see what has changed. Additionally, many version control systems allow you to view the commit history and see who made specific changes, which can help identify the source of a problem.

7. Systematic Approach

Finally, it's important to have a systematic approach to debugging. This can help you to stay focused and avoid getting bogged down in minor details. One common approach is the "divide and conquer" method, where you break down a problem into smaller, more manageable pieces and tackle them one at a time. Another approach is the "scientific method", where you form a hypothesis about the problem, test it, and use the results to guide your next steps.

8. Have a Good Understanding

In addition to the techniques and tools mentioned above, it's also important to have a good understanding of the specific language and framework you are working with. This can help you to understand how the code is supposed to work and where potential issues may arise.

In conclusion, debugging is an essential part of the software development process. By using a combination of techniques such as print statements, assertions, version control, and a systematic approach, as well as tools like debuggers, logging libraries, and profilers, you can make debugging less painful and more effective. Remember, the key is to stay calm, be methodical, and always keep learning.

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

10 HTML Pro Tips

• Start Attribute

The start attribute specifies the start value of the first list item in an ordered list. This value is always an integer, even when the numbering type is letters or romans.

• <abbr> Tag

The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

• <meter> Tag

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

• <fieldset> Tag

The <fieldset> tag is used to group related elements in a form.

• Window.opener Property

The opener property returns a reference to the window that created the window.

• <base> Tag

The <base> tag specifies the base URL and/or target for all relative URLs in a document.

• Accordion

The accordion is useful when you want to toggle between hiding and showing a large amount of content:

• loading=lazy Attribute

The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.

• <ol> reversed Attribute

The reversed attribute specifies that the list order should be descending (9,8,7...), instead of ascending (1, 2, 3...).

• Download Attribute

The reversed attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.

I hope you all enjoyed this article and were able to learn some new HTML features! If you have any doubts or questions, make sure to write them in the comments below. Also, please add a reaction to this article and rate it out of 10. I really appreciate it 🙏

Don’t forget to join my Discord server!

#Have a Great Day! Thank you! Happy Coding! 💻⚡

As a server owner, you are not always going to be present to monitor your server, but a bot can, and it does it way faster.

You may not be a server owner, but if you want to create a bot for a server you belong to or maybe for public use (available for other servers) this article will help you do that.

Before we jump right into code, let's see how Discord bots work.

Prerequisites

Before you get started, you will need the following:

• Node.js installed on your development machine.
• Any text editor of your choice, such as Visual Studio Code, Atom, Sublime, or nano.
• A free Discord account with a verified email account and a free Discord server you will use to test your Discord bot.

Step 1 — Setting Up a Discord Bot

In this step, you’ll use the Discord developer's graphical user interface (GUI) to set up a Discord bot and get the bot’s token, which you will pass into your program.

In order to register a bot on the Discord platform, use the Discord application dashboard. Here developers can create Discord applications including Discord bots.

To get started, click New Application. Discord will ask you to enter a name for your new application. Then click Create to create the application.

Note: The name for your application is independent from the name of the bot, and the bot doesn’t have to have the same name as the application.

Now open up your application dashboard. To add a bot to the application, navigate to the Bot tab on the navigation bar to the left.

Click the Add Bot button to add a bot to the application. Click the Yes, do it! button when it prompts you for confirmation. You will then be on a dashboard containing details of your bot’s name, authentication token, and profile picture.

You can modify your bot’s name or profile picture here on the dashboard. You also need to copy the bot’s authentication token by clicking Click to Reveal Token and copying the token that appears.

Warning: Never share or upload your bot token as it allows anyone to log in to your bot.

Now you need to create an invite to add the bot to a Discord guild where you can test it. First, navigate to the URL Generator page under the OAuth2 tab of the application dashboard. To create an invite, scroll down and select bot under scopes. You must also set permissions to control what actions your bot can perform in guilds. For the purposes of this tutorial, select Administrator, which will give your bot permission to perform nearly all actions in guilds. Copy the link with the Copy button.

Next, add the bot to a server. Follow the invite link you just created. You can add the bot to any server you own, or have administrator permissions in, from the drop-down menu.

Now click Continue. Ensure you have the tickbox next to Administrator ticked—this will grant the bot administrator permissions. Then click Authorize. Discord will ask you to solve a CAPTCHA before the bot joins the server. You’ll now have the Discord bot on the members list in the server you added the bot to under offline.

You’ve successfully created a Discord bot and added it to a server. Next, you will write a program to log in to the bot.

Step 2 — Creating Your Project

In this step, you’ll set up the basic coding environment where you will build your bot and log in to the bot programmatically.

First, you need to set up a project folder and necessary project files for the bot.

Create your project folder:

mkdir discord-bot

Move into the project folder you just created:

cd discord-bot

Next, create a file named config.json to store your bot’s authentication token.

Then add the following code to the config file, replacing the highlighted text with your bot’s authentication token:

{
    "BOT_TOKEN": "YOUR BOT TOKEN"
}

Save and exit the file.

Next you’ll create a package.json file, which will store details of your project and information about the dependencies you’ll use for the project. You’ll create a package.json file by running the following npm command:

npm init

You’ll now install the discord.js package that you will use to interact with the Discord API. You can install discord.js through npm with the following command:

npm install discord.js

Now that you’ve set up the configuration file and installed the necessary dependency, you’re ready to begin building your bot. In a real-world application, a large bot would be split across many files, but for the purposes of this tutorial, the code for your bot will be in one file.

First, create a file named index.js in the discord-bot folder for the code.

Begin coding the bot by requiring the discord.js dependency and the config file with the bot’s token:

const Discord = require("discord.js");
const config = require("./config.json");

Following this, add the next two lines of code:

const client = new Discord.Client({intents: ["GUILDS", "GUILD_MESSAGES"]});

client.login(config.BOT_TOKEN);

Save and exit your file.

The first line of code creates a new Discord.Client and assigns it to the constant client. This client is partly how you will interact with the Discord API and how Discord will notify you of events such as new messages. The client, in effect, represents the Discord bot. The object passed into the Client constructor specifies the gateway intents of your bot. This defines which WebSocket events your bot will listen to. Here you have specified GUILDS and GUILD_MESSAGES to enable the bot to receive message events in guilds.

The second line of code uses the login method on the client to log in to the Discord bot you created, using the token in the config.json file as a password. The token lets the Discord API know which bot the program is for and that you’re authenticated to use the bot.

Now, execute the index.js file using Node:

node index.js

Your bot’s status will change to online in the Discord server you added it to.

You’ve successfully set up a coding environment and created the basic code for logging in to a Discord bot. In the next step, you’ll handle user commands and get your bot to perform actions, such as sending messages.

Step 3 — Handling Your First User Command

In this step, you will create a bot that can handle user commands. You will implement your first command ping, which will respond with "pong" and the time taken to respond to the command.

First, you need to detect and receive any messages users send so you can process any commands. Using the on method on the Discord client, Discord will send you a notification about new events. The on method takes two arguments: the name of an event to wait for and a function to run every time that event occurs. With this method you can wait for the event message—this will occur every time a message is sent to a guild where the bot has permission to view messages. Therefore you will create a function that runs every time a message is sent to process commands.

First, open your index.js.

Add the following code to your file:

client.on("messageCreate", function(message) { 

});

This function, which runs on the messageCreate event, takes message as a parameter. message will have the value of a Discord.js message instance, which contains information about the sent message and methods to help the bot respond.

Now add the following line of code to your command-handling function:

client.on("messageCreate", function(message) {
  if (message.author.bot) return;
});

This line checks if the author of the message is a bot, and if so, stops processing the command. This is important as generally you don’t want to process, or respond to, bots’ messages. Bots usually don’t need to use information from other bots, so ignoring their messages saves processing power and helps prevent accidental replies.

Now you’ll write a command handler. To accomplish this, it’s good to understand the usual format of a Discord command. Typically, the structure of a Discord command contains three parts in the following order: a prefix, a command name, and (sometimes) command arguments.

• Prefix: the prefix can be anything, but is typically a piece of punctuation or abstract phrase that wouldn’t normally be at the start of a message. This means that when you include the prefix at the start of the message, the bot will know that the intention for this command is for a bot to process it.
• Command name: The name of the command the user wants to use. This means the bot can support multiple commands with different functionality and allow users to choose between them by supplying a different command name.

• Arguments: Sometimes if the command requires or uses extra information from the user, the user can supply arguments after the command name, with each argument separated by a space.

• Note: There is no enforced command structure and bots can process commands how they like, but the structure presented here is an efficient structure that the vast majority of bots use.*

To begin creating a command parser that handles this format, add the following lines of code to the message handling function:

const prefix = "!";

client.on("messageCreate", function(message) {
  if (message.author.bot) return;
  if (!message.content.startsWith(prefix)) return;
});

You add the first line of code to assign the value "!"to the constant prefix, which you will use as the bot’s prefix.

The second line of code you add checks if the content of the message the bot is processing begins with the prefix you set, and if it doesn’t, stops the message from continuing to process.

Now you must convert the rest of the message into a command name and any arguments that may exist in the message. Add the following highlighted lines:

client.on("messageCreate", function(message) {
  if (message.author.bot) return;
  if (!message.content.startsWith(prefix)) return;

  const commandBody = message.content.slice(prefix.length);
  const args = commandBody.split(' ');
  const command = args.shift().toLowerCase();
});

You use the first line here to remove the prefix from the message content and assign the result to the constant commandBody. This is necessary as you don’t want to include the prefix in the parsed command name.

The second line takes the message with the removed prefix and uses the split method on it, with a space as the separator. This splits it into an array of sub-strings, making a split wherever there is a space. This results in an array containing the command name, then, if included in the message, any arguments. You assign this array to the constant args.

The third line removes the first element from the args array (which will be the command name provided), converts it to lowercase, and then assigns it to the constant command. This allows you to isolate the command name and leave only arguments in the array. You also use the method toLowerCase as commands are typically case insensitive in Discord bots.

You’ve completed building a command parser, implementing a required prefix, and getting the command name and any arguments from messages. You will now implement and create the code for the specific commands.

Add the following code to start implementing the ping command:

  const args = commandBody.split(' ');
  const command = args.shift().toLowerCase();

  if (command === "ping") {

  }                        
});

This if statement checks if the command name you parsed (assigned to the constant command) matches "ping". If it does, that indicates the user wants to use the "ping" command. You will nest the code for the specific command inside the if statement block. You will repeat this pattern for other commands you want to implement.

Now, you can implement the code for the "ping"command:

  if (command === "ping") {
    const timeTaken = Date.now() - message.createdTimestamp;
    message.reply(`Pong! This message had a latency of ${timeTaken}ms.`);
  }

Save and exit your file.

You add the "ping" command block that calculates the difference between the current time—found using the now method on the Date object—and the timestamp when the message was created in milliseconds. This calculates how long the message took to process and the "ping" of the bot.

The second line responds to the user’s command using the reply method on the message constant. The reply method pings (which notifies the user and highlights the message for the specified user) the user who invoked the command, followed by the content provided as the first argument to the method. You provide a template literal containing a message and the calculated ping as the response that the reply method will use.

This concludes implementing the "ping" command.

Run your bot using the following command (in the same folder as index.js):

node index.js

You can now use the command "!ping" in any channel the bot can view and message in, resulting in a response.

You have successfully created a bot that can handle user commands and you have implemented your first command. In the next step, you will continue developing your bot by implementing a sum command.

Step 4 — Implementing the Sum Command

Now you will extend your program by implementing the "!sum" command. The command will take any number of arguments and add them together, before returning the sum of all the arguments to the user.

If your Discord bot is still running, you can stop its process with CTRL + C.

Open your index.js file again.

To begin implementing the "!sum" command you will use an else-if block. After checking for the ping command name, it will check if the command name is equal to "sum". You will use an else-if block since only one command will process at a time, so if the program matches the command name "ping", it doesn’t have to check for the "sum" command. Add the following highlighted lines to your file:

  if (command === "ping") {
    const timeTaken = Date.now() - message.createdTimestamp;
    message.reply(`Ping! This message had a latency of ${timeTaken}ms.`);
  }

  else if (command === "sum") {

  }                            
});

You can begin implementing the code for the "sum" command. The code for the "sum" command will go inside the else-if block you just created. Now, add the following code:

  else if (command === "sum") {
    const numArgs = args.map(x => parseFloat(x));
    const sum = numArgs.reduce((counter, x) => counter += x);
    message.reply(`The sum of all the arguments you provided is ${sum}!`);
  }

You use the map method on the arguments list to create a new list by using the parseFloat function on each item in the args array. This creates a new array (assigned to the constant numArgs) in which all of the items are numbers instead of strings. This means later you can successfully find the sum of the numbers by adding them together.

The second line uses the reduce method on the constant numArgs providing a function that totals all the elements in the list. You assign the sum of all the elements in numArgs to the constant sum.

You then use the reply method on the message object to reply to the user’s command with a template literal, which contains the sum of all the arguments the user sends to the bot.

This concludes implementing the "sum" command. Now run the bot using the following command (in the same folder as index.js):

node index.js

You can now use the "!sum" command in any channel the bot can view and message in.

The following is a completed version of the index.js bot script:

const Discord = require("discord.js");
const config = require("./config.json");

const client = new Discord.Client({intents: ["GUILDS", "GUILD_MESSAGES"]});

const prefix = "!";

client.on("messageCreate", function(message) {
  if (message.author.bot) return;
  if (!message.content.startsWith(prefix)) return;

  const commandBody = message.content.slice(prefix.length);
  const args = commandBody.split(' ');
  const command = args.shift().toLowerCase();

  if (command === "ping") {
    const timeTaken = Date.now() - message.createdTimestamp;
    message.reply(`Pong! This message had a latency of ${timeTaken}ms.`);
  }

  else if (command === "sum") {
    const numArgs = args.map(x => parseFloat(x));
    const sum = numArgs.reduce((counter, x) => counter += x);
    message.reply(`The sum of all the arguments you provided is ${sum}!`);
  }
});

client.login(config.BOT_TOKEN);

In this step, you have further developed your Discord bot by implementing the sumcommand.

You have successfully implemented a Discord bot that can handle multiple, different user commands and command arguments. If you want to expand on your bot, you could possibly implement more commands or try out more parts of the Discord API to craft a powerful Discord bot. You can review the Discord.js documentation or the Discord API documentation to expand your knowledge of the Discord API. In particular, you could convert your bot commands to slash commands, which is a best practice for Discord.js v13.

Hope you all enjoyed this article and were able to make your very own Discord bot! If you have any doubts or questions, make sure to write them in the comments below. Also, please add a reaction to this article and rate it out of 10. I appreciate it 🙏

Don’t forget to join my Discord server!

#Have a Great Day! Thank you! Happy Coding! 💻⚡

For those not familiar with markdown, it’s a flat text format that looks like this:

# Heading

Some text

- list item 1
- list item 2
- list item 3

[My website](https://ishaantek.com)

This would result in the following HTML:

<h1><a id="Heading_0"></a>Heading</h1>

<p>Some text</p>

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
</ul>

<a href="https://ishaantek.com">My website</a>

Sounds lovely, right? And yes, it is lovely, so how cool would it be if we could make a blog in Next.js that allows us to write markdown formatted posts?

If you are wondering what the result is for this article, here is a little demo video:

Project Setup

If you are new to markdown or Next.js, don’t worry. This article will guide you completely through setting this project up from start to finish!

Let’s start by creating a new blank Next.js project. We’ll open up our favorite terminal and run the following command.

npx create-next-app next-blog

This command will create a blank next application in the next-blog folder.

Once it’s done installing, you can navigate to the project and run it. (This will show the basic Next.js starter)

cd next-blog

# Run the project
npm run dev

Adding Tailwind CSS for our styling

Tailwind CSS is a perfect CSS framework to make styling super easy for us, and it works super well in a Next.js project.

The first step we have to do is, install the dependencies that are required for Tailwind.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Then we can initialize Tailwind by running the following command. It will create all the side files we need.

npx tailwindcss init -p

Now head over to the tailwind.config.js file that the command above created for us. Modify the content: array to look like this:

content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
],

The last step to making everything work is modifying the existing styles/global.scss file. Remove everything in this file and only add the following three lines.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

And that’s it. We can now leverage the power of Tailwind in our application.

Creating a Reusable Next.js Layout

Next.js supports different pages out of the box, but we want to have one main layout that wraps around this.

We will define a header and footer in this layout, which means we don’t need to add them in all the separate files.

To create a layout in Next.js, create a components folder in your project.

Inside that folder, create a layout.js file.

The layout is a component, which looks like this:

import Link from 'next/link';

export default function Layout({ children }) {
  return (
    <div className='flex flex-col min-h-screen'>
      <header className='bg-fuchsia-100 mb-8 py-4'>
        <div className='container mx-auto flex justify-center'>
          <Link href='/'>
            <a>🏡</a>
          </Link>
          <span className='mx-auto'>Welcome to my blog</span>{' '}
        </div>
      </header>
      <main className='container mx-auto flex-1'>{children}</main>
      <footer className='bg-fuchsia-100 mt-8 py-4'>
        <div className='container mx-auto flex justify-center'>
          &copy; 2022 IshaanTek
        </div>
      </footer>
    </div>
  );
}

For this article, I decided not to extract any further, but you could go ahead and move the header and footer into their components for better readability.

The critical part here is that we accept children as property and render them in the main element.

This allows us to render any component inside there.

We have to open up our _app.js file to use this newly created layout. This file is the entry point for your entire application.

By default, you will see it renders a Component with specific properties.

We want to wrap that component in our layout.

import Layout from '../components/layout';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

And that’s it. Any page we create now will be wrapped in our layout component, making it show the header and footer.

Let’s try this quickly before moving on.

Modify the index.js file and add the following markup for now:

return (<div>Hello world 👋</div>);

When you rerun the application you should see the following:

You see, the header and footer are automatically applied. We didn’t need to say they should be used in any way.

Creating The Posts

Since we’ll be using markdown for our posts, create a new folder at the root of your project called posts.

Inside, you can start by creating your post items. Each file will also become the URL of the article, so keep this in mind.

One example of my articles looks like this: nextjs-page-options-and-how-they-work.md

Then inside the file, you have two sections.

The top part, called frontmatter, it’s a way to add non-rendered elements to your post.

They are divided by three dashes. And below that is all the content that you want.

For example:

---
title: 'Next.js page options and how they work'
metaTitle: 'Next.js page options and how they work'
metaDesc: 'How to use pages in Next.js exploring the options'
socialImage: images/22-09-2021.jpg
date: '2021-09-22'
tags:
  - nextjs
---

# The main content

You can add anything you want in the frontmatter, so you don’t have to use this example specifically.

We’ll only be using the following for this article:

• title
• socialImage

It’s up to you to enhance the website with other cool elements.

Note: Add the images in the public/images directory.

Create a couple of markdown posts (or use the ones from the demo). This makes it easier to test what we are building.

Loading the Markdown Posts on the Homepage

Now that we have our markdown posts in place, we want to retrieve them and show them on the homepage.

We want to show the image and the title and link to the actual post.

Since the image and title are defined in the markdown file’s frontmatter section, we need to find a way to extract them.

Luckily for us, there is a fantastic NPM package that can help us with this. Let’s install it.

npm install gray-matter

This package allows us to parse the frontmatter section and the content section from a content string.

Then we want to open up our index.js file and start importing the packages we will need.

import fs from 'fs';
import matter from 'gray-matter';
import Image from 'next/image';
import Link from 'next/link';

Then we need to leverage the Next.js getStaticProps method, which allows us to define variables the page can use on build time.

Note: Check out this article for more information on the rendering modes of Next.js

The main frame for this function looks like this:

export async function getStaticProps() {
  // Get all our posts
}

We need to work on retrieving all the posts from our posts folder.

We can leverage the fs (filesystem) module.

const files = fs.readdirSync('posts');

Then we want to loop over all those posts to extract the frontmatter part to get the title and image.

const posts = files.map((fileName) => {
    const slug = fileName.replace('.md', '');
    const readFile = fs.readFileSync(`posts/${fileName}`, 'utf-8');
    const { data: frontmatter } = matter(readFile);

    return {
      slug,
      frontmatter,
    };
});

There is quite a lot going on here, so let’s look step by step.

First, we define the slug (URL) for the page, which is the filename without the .md part.

Then we read the file by using the fs module again. And once it’s loaded, we use the matter package to read the file and extract the data object, but we destructure it as the variable frontmatter.

Basically, we change the data variable to frontmatter.

The last thing we need to do is return the props that our component will receive.

return {
    props: {
      posts,
    },
};

This sends the posts variable to our component.

So let’s modify our Home component to receive this variable.

export default function Home({ posts }) {

That’s it! Yes, super simple, right? We now have access to the posts inside the component.

Let’s create a grid and render our posts there.

export default function Home({ posts }) {
  return (
    <div className='grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 p-4 md:p-0'>
      {posts.map(({ slug, frontmatter }) => (
        <div
          key={slug}
          className='border border-gray-200 m-2 rounded-xl shadow-lg overflow-hidden flex flex-col'
        >
          <Link href={`/post/${slug}`}>
            <a>
              <Image
                width={650}
                height={340}
                alt={frontmatter.title}
                src={`/${frontmatter.socialImage}`}
              />
              <h1 className='p-4'>{frontmatter.title}</h1>
            </a>
          </Link>
        </div>
      ))}
    </div>
  );
}

The CSS part is rendering a grid, where we show one post on mobile and up to four for big screens.

Then we loop over each of the posts using the map method.

Each post will be one big link, including the image of the posts and the title. And on click, it links to /post/{slug}, which we’ll start working on next.

Let’s quickly look at and admire what we have made so far:

Creating Individual Markdown posts in Next.js

Now that we have a list of our posts on the homepage, we want to show more details and the actual content on each page.

We can leverage Next.js dynamic routing, allowing one file to render all our posts!

To create this file, create a post directory inside the pages directory and inside this folder, add a file called [slug].js.

The brackets define the file as a dynamic file.

This file will also use the getStaticProps to retrieve the data for a single post.

But it needs another function called getStaticPaths to create each path (URL).

Let’s start by importing the modules we need.

import fs from 'fs';
import matter from 'gray-matter';

And from here, we can work on the getStaticPaths function to ensure all our files get their URL.

export async function getStaticPaths() {
  // Retrieve all our slugs
}

Again, the first thing we need to do is get all our posts.

const files = fs.readdirSync('posts');

And you guessed it right, map the filenames to get the slugs.

const paths = files.map((fileName) => ({
    params: {
      slug: fileName.replace('.md', ''),
    },
}));

Then the critical part here is this function should return all valid paths, so we simply need to return them.

I also included a fallback: false, which ensures non-existing URLs will fail and show a 404.

return {
    paths,
    fallback: false,
};

The static part is much like what we did on the homepage. But for this one, we also want to retrieve the data from the file. This is because the file contains all our actual content.

export async function getStaticProps({ params: { slug } }) {
  const fileName = fs.readFileSync(`posts/${slug}.md`, 'utf-8');
  const { data: frontmatter, content } = matter(fileName);
  return {
    props: {
      frontmatter,
      content,
    },
  };
}

Before we start working on the component for this page, we want to install another NPM package called markdown-it. This package can convert markdown into HTML.

npm install markdown-it

Then load it on this page:

import md from 'markdown-it';

Now we can start working on the actual component, which is super simple as it only renders the title and the content.

export default function PostPage({ frontmatter, content }) {
  return (
    <div className='prose mx-auto'>
      <h1>{frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: md().render(content) }} />
    </div>
  );
}

As you can see, we need to use dangerouslySetInnerHTML as we are setting HTML. Don’t be scared by the name, as it’s only HTML we allow to be in there.

Almost there!

Let’s quickly try it out and see what we got. Run your app and open a page.

Cool, all our data is there, but it doesn’t look great yet.

Luckily we decided to use Tailwind CSS, and they have a fantastic plugin: Typography plugin

Let’s install this plugin and see what happens.

npm install -D @tailwindcss/typography

Open the tailwind.config.js file and add it under the plugins section.

plugins: [require('@tailwindcss/typography')],

Now reload your app and see what happens.

Conclusion

And that’s it. We now have a super cool markdown-powered Next.js blog!

This is only a basic starter, but enough to get your blogging career started.

Not bad for an hour worth of work!

Not it’s up to you to make this blog even more unique and share with the world what you created.

Some ideas to make it more excellent:

• SEO aspect, add meta titles/description
• Add a tag overview
• Add some coolers to the code blocks
• Refactor elements into components push

Hope you all enjoyed this article and were able to make your very own blog powered by Next.js! If you have any doubts or questions, make sure to write them in the comments below. Also, please add a reaction to this article and rate it out of 10. I really appreciate it 🙏

Don’t forget to join my Discord server!

#Have a Great Day! Thank you! Happy Coding! 💻⚡

This blog post will teach you how to build a local Chrome extension for personal use from scratch. The extension helps to copy any webpage's URL so you can save for fast access. You can also use it as a bookmark to jot things down for quick usage elsewhere.

We have all done something similar, copying links of pages and saving them in Notepad. There's nothing bad in that really, that's even the usefulness of Notepad - to keep notes.

But as we save links in Notepad, it gets pretty messed up with all our old notes. This extension will make saving URLs very easy.

Let's begin.

Prerequisite

Basic knowledge of these is required:

• HTML
• CSS
• JavaScript

We will call this project Savelinks, because it is a Chrome extension for saving links. The links will be saved in our browser's local storage.

Building

Step 1 - Project set up
Create a folder named Savelinks. Inside it, create index.html, style.css, and script.js files.

Step 2 - HTML code
Input this code in your index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Savelinks Extension</title>
</head>
<body>
    <input type="text" id="input-el">
    <button id="input-btn">SAVE LINK</button>
    <button id="save-btn">SAVE TAB</button>
    <button id="delete-btn">DELETE ALL</button>
    <ul id="ul-el"></ul>

    <script src="script.js"></script>
</body>
</html>

We have linked our CSS file and created an input tag to create new links to save. We have also created three buttons for saving inputs, saving tab, and deleting all saved links respectively. We also have an empty <ul> element. We will use JavaScript to put all our saved links in this <ul> element.

Step 3 - CSS code
Input this code in your style.css

body {
    margin: 0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 400px;
}

input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #5f9341;
    margin-bottom: 4px;
}

The CSS code above will set the styles for the extension body, we have also styled the input box. It has a width of 100%, 10px padding, and a border.

Add the next lines of CSS code.

button {
    background: #5f9341;
    color: white;
    padding: 10px 20px;
    border: 1px solid #5f9341;
    font-weight: bold;
}

#delete-btn {
    background: white;
    color: #5f9341;
}

This will style all our 3 buttons while the delete button will have a background color of white with a different text color (hex code = #5f9341).

Add the next lines of CSS code.

ul {
    margin-top: 20px;
    list-style: none;
    padding-left: 0;
}

li {
    margin-top: 5px;
}

a {
    color: #5f9341;
}

This will style our list by giving it margins, the displayed links by JavaScript will have a color with hex code = #5f9341.

Step 4 - JavaScript code
Now let's add some JavaScript code.

let savedLinks = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const deleteBtn = document.getElementById("delete-btn")
const saveBtn = document.getElementById("tab-btn")
const ulEl = document.getElementById("ul-el")
const linksFromLocalStorage = JSON.parse( localStorage.getItem("savedLinks") )

We have created an empty array called savedLinks and created a variable to hold the input and buttons elements, we are also getting savedLinks items from local storage, parsing them into JSON format, and saving it into a variable. We haven't initialized local storage yet, just saving the command in a variable called linksFromLocalStorage.

Let's add more JavaScript code.

if (linksFromLocalStorage) {
    savedLinks = linksFromLocalStorage
    render(savedLinks)
}

If linksFromLocalStorage exist, that is if we have savedLinks in local storage, render function will be called to display the links. Note that we have also passed savedLinks as an arguments in the render function.

Let's move on, add this code too.

function render(links) {
    let listItem = ""

    for (let i = 0; i < links.length; i++) {
            listItem += `
                <li>
                    <a target='_blank' href='${links[i]}'>
                        ${links[i]}
                    </a>
                </li>
            `
    }
    ulEl.innerHTML = listItem
}

The function above is called render with a parameter called links. The function will take in an array as an argument. A variable called listItem is defined and has an empty string "" value for now. A for loop is defined, it will loop through the array passed in let i = 0; i < links.length; i++ and create a <li> list of each item and add each to listItem. Each <li>will contain the saved links and the href is also set to the link. The list of links in the listItem variable will be embedded inside the <ul> element with ulEl.innerHTML = listItem. This will render the list to our index.html.

Let's add some code.

saveBtn.addEventListener("click", function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        savedLinks.push(tabs[0].url)
        localStorage.setItem("savedLinks", JSON.stringify(savedLinks))
        render(savedLinks)
    })
})

The save button has an addEventListener method that takes in two parameters here, the type of the event to listen to ("click") and a callback function to call.

The function contains the chrome.tabs API that is only available when we are running the code in the context of the extension. The API allows us to interact with the browser's tab system and can be used to create, modify, and rearrange tabs in the browser.

We attached a query() method to the tabs object to verify the tab we are working on. The query() method takes in an object and a function as an argument. The object has two properties, active and currentWindow. active is set to true to specify that we are in the current tab and currentWindow is set to true to specify that we are in the current window.

The function takes a tabs parameter and navigates to the tab's URL with tabs[0].url. The tabs are an array that has the first item as an object that contains the URL of the current tab. The URL property is gotten with tabs[0].url.

Next is the delete button.

deleteBtn.addEventListener("dblclick", function() {
    localStorage.clear()
    savedLinks = []
    render(savedLinks)
})

On double click, the local storage that contains the saved links is cleared with localStorage.clear(), the savedLinks rendering to the page is set to null, render(savedLinks) is called to run which returns no list of links.

What if we want to put links manually?

Here's the code handling that.

inputBtn.addEventListener("click", function() {
    savedLinks.push(inputEl.value)
    inputEl.value = ""
    localStorage.setItem("savedLinks", JSON.stringify(savedLinks))
    render(savedLinks)
})

The savedLinks array gets the input value pushed to it, then the input box is cleared with inputEl.value = "". The savedLinks array re-saves to the local storage to include the input value. The savedLinks array is rendered into the browser with the render function.

Copy the full JavaScript code here:

let savedLinks = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const deleteBtn = document.getElementById("delete-btn")
const saveBtn = document.getElementById("tab-btn")
const ulEl = document.getElementById("ul-el")
const linksFromLocalStorage = JSON.parse( localStorage.getItem("savedLinks") )

if (linksFromLocalStorage) {
    savedLinks = linksFromLocalStorage
    render(savedLinks)
}

function render(links) {
    let listItem = ""

    for (let i = 0; i < links.length; i++) {
            listItem += `
                <li>
                    <a target='_blank' href='${links[i]}'>
                        ${links[i]}
                    </a>
                </li>
            `
            // SAME
            // const li = document.createElement("li")
            // li.textContent = savedLinks[i]
            // ulEl.append(li)
    }
    ulEl.innerHTML = listItem
}

saveBtn.addEventListener("click", function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        savedLinks.push(tabs[0].url)
        localStorage.setItem("savedLinks", JSON.stringify(savedLinks))
        render(savedLinks)
    })
})

deleteBtn.addEventListener("dblclick", function() {
    localStorage.clear()
    savedLinks = []
    render(savedLinks)
})

inputBtn.addEventListener("click", function() {
    savedLinks.push(inputEl.value)
    inputEl.value = ""
    localStorage.setItem("savedLinks", JSON.stringify(savedLinks))
    render(savedLinks)
})

Step 5 - Setting the metadata
The metadata is the information sent to the Chrome browser about the extension. manifest.json file is used to configure the extension and provide metadata about it. The file is a .json file so it uses the object structure but with "" in the key-value pairs. The manifest_version, version, name, action, and action are in "" because we are using JSON. Read more about JavaScript JSON here.

{
    "manifest_version": 3,
    "version": "1.1",
    "name": "Savelinks",
    "action": {
        "default_popup": "index.html",
        "default_icon": "link.png"
    },
    "permissions": [
        "tabs"
    ]
}

manifest_version tells Chrome which version of JSON we are using, the version lets us set the version of our extension, the name provides the name of the extension, action provides objects in JSON format with two values, and the default_popup provides the home page of the index, it is set to the index.html while the default_icon sets the extension icon, there is an icon named link.png, it will display on our Chrome interface when we deploy the extension, the permissions arpermits ussion to access the URL so we have declared the "tabs" permission.

Deployment

To deploy our extension, follow these steps:

1. Click on the Chrome extension icon by the top right icon, your current extensions should pop up, click the Manage extension at the end of the list. The direct link is chrome://extentions

2. Trigger the developer mode at the top right corner

3. Navigate to load unpacked at the top right corner

4. It prompts you to choose your extension project, and choose the savelinks folder to deploy.

5. Open a new tab and in your extensions bar, pin Savelinks.

6. You can now start to use the new extension.

If deployment is successful, the index.html page should pop up and the savelinks extension should work fine.

That will be all. Hope you found any value here as you learn to build more projects effectively.

Hope you all enjoyed this article and were able to make your very own Chrome extension! If you have any doubts or questions, make sure to write them in the comments below. Also, please add a reaction to this article and rate it out of 10. I appreciate it 🙏

Don’t forget to join my Discord server!

#Have a Great Day! Thank you! Happy Coding! 💻⚡

You all may have noticed the emoji switcher effect on Discord. It is a super awesome idea and provides a neat User Interface (UI) to the user with good micro-interaction.

Let's Build this emoji switcher using Vanilla Javascript in just 5 minutes. So, let's get started ✌️🔥

Let's get started

Our project consists of a total of 3 files.

1. index.html
2. style.css
3. index.js

root/
├── index.html
├── style.css
└── index.js

Let's start coding

First of all, we can start with the HTML. The HTML is so simple, it just consists of a simple button with an emoji inside it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Emoji Switcher like Discord 😎</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

     <!--Importing CSS -->
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <span id='emoji-btn'>😀</span>

    <!--Importing Javascript -->
    <script src="index.js"></script>
</body>
</html>

Our next part is the CSS. The CSS is also very simple, we just have to align our emoji button to the center and give some basic styling to our app and make it look clean to the users. We also need to provide cool micro-interactions like hovering over the grayscale emoji and turning to the color emoji also scales a bit big.

body{
  margin: 0;
  padding: 0;
  height:100vh;
  overflow: hidden;
  width:100%;
  display: flex;
  background: #222;
  align-items: center;
  justify-content: center;
}

#emoji-btn {
  font-size: 3rem;
  filter: grayscale(1);
  transition: .1s;
  border: none;
  cursor: pointer;
}

#emoji-btn:hover {
  transform: scale(1.23);
  filter: grayscale(0);
}

Now the HTML and CSS part of our app is completed. Let's move on to the last part, which is our index.js. The index.js controls the functionality of changing the emoji on every mouse hover.

// Get emojis from https://emojipedia.org/

const btn = document.getElementById("emoji-btn");
const emojis = [ 
    "😆",  "😅",  "🤣",  "😂",  "😀",  "🤑",  "🤨",  "🙂",
    "😊",  "😗",  "😛",  "😏",  "🤥",  "😴",  "🥺", "😧",
    "🤗",  "🤩",  "😎",  "🥳",  "😍",  "😱",  "🤓", "😷",
    "🥴",  "😳",  "🤯",  "🤫",  "🤑",  "😪",  "😴", "😵"
];

btn.addEventListener("mouseover", () => {
  btn.innerText = emojis[Math.floor(Math.random() * emojis.length)];
});

Hurray, we have successfully finished our app! The app is looking great and has some really cool micro-interactions.

Here is the demo of the working app. ✌️😅

The full source code is on the CodePen, but try to code it on your own to boost up your skills. 🚀

Hope you all enjoyed this article and were able to make your very own emoji switcher! If you have any doubts or questions, make sure to write them in the comments below. Also, please add a reaction to this article and rate it out of 10. I really appreciate it 🙏

Don’t forget to join my Discord server!

#Have a Great Day! Thank you! Happy Coding! 💻⚡