Chatrooms have become very vital for course distribution, gaming, crypto lovers, etc. Discord covers all this by offering dedicated chatrooms for every industry.

But what if you want to create your own discord bot?

In this article, we are going to create our own bot using Python.

What is Discord?

Discord is a popular platform for online communities, and it’s important to have automated processes in place to manage the community effectively. One way to do this is to use “bot users” which are automated programs that can respond to events and commands on Discord as if they were real users.

For example, if you manage a Discord guild and want to welcome new members, you can use a bot to automatically send them a message. As the community grows, it may become impractical to welcome each new member personally, but a bot can handle this task for you, allowing you to customize its behavior and control how it interacts with users.

What is a bot?

A bot is a type of software application or script that performs automated tasks on the internet. In the context of Discord, a bot is a type of user account that can be added to a Discord server and controlled through commands. Discord bots are typically used to perform a variety of tasks, such as welcoming new members, moderating conversations, and responding to user requests. Discord bots can be programmed to do a wide range of things, and they are often used to add additional functionality to a server.

Why Use Python to Create Discord Bot?

Python is a general-purpose programming language that can be used to build almost anything. Some common use cases of Python include web development, data science, scientific computing, Automation like web scraping, designing desktop applications, and games, and many more.

With endless possibilities and applications, Python would be a go to language for creating a discord bot.

Other reasons why you might choose to use Python for creating a Discord bot:

1. Python is a popular, versatile programming language. It has a large and active community, which means there are many libraries and frameworks available that can make it easier to build a Discord bot.
   
2. Python is easy to learn and use. Its syntax is straightforward and readable, so it's a good language to start with if you're new to programming.
   
3. Python has strong support for interacting with Discord's API. There are several libraries available that make it easy to write a Discord bot in Python, such as discord.py, which is the most widely used library for building Discord bots in Python.
   
4. Python is fast to prototype and develop with. Its simplicity and flexibility make it a great choice for rapid development, so you can build and deploy your Discord bot quickly.

How to create a Discord bot using Python?

Using the Discord Python library, you can easily create a bot that can perform a variety of tasks, such as sending messages, moderating conversations, and more.

You can customize your bot to perform data analysis tasks by using various Python libraries, such as NumPy, Pandas, and Matplotlib.

Prerequisites

To get started, you’ll need to have Python 3.x installed on your machine and set up a Discord account, and create a new Discord bot.

You can then use the Discord Python library and the discord.py module to interact with the Discord API and create your bot.

Installation

I am assuming you have already installed Python on your machine. Then, install the Discord Python library, called discord.py, using pip.

pip install discord.py

After this create your python file where you will write the code and import all the libraries.

import discord
from discord.ext import commands

Then we have to create a new Discord client and assign it to a variable.

client = commands.Bot(command_prefix = '.')

Then define a function that will be called when the bot is ready to go online.

@client.event
async def on_ready():
print('Bot is ready!')

The next step is to use the @client.command() decorator to define a function that will be called when a certain command is received.

@client.command()
async def greet(ctx):
await ctx.send('Hello!')

Finally, run the bot using the run() method, passing in your Discord bot's token.

client.run('YOUR_BOT_TOKEN_HERE')

This is just a basic outline of how you can create a Discord bot in Python.

How to interact with discord APIs using python?

To interact with Discord APIs using Python, you will need to use a Python library that provides access to the APIs. There are several libraries available for interacting with the Discord API, including:

1. discord.py: This is an official library developed and maintained by the Discord team. It provides a simple, asyncio-based interface for interacting with the Discord API.
2. discord.py-rewrite: This is a rewrite of discord.py that uses a more modern syntax and includes additional features such as support for WebSockets.

Once you have installed the library, you will need to import it into your Python script and use the provided functions and classes to interact with the Discord API.

Here is an example of how you might use the discord.py library to send a message to a Discord channel.

import discord

client = discord.Client()

@client.event
async def on_ready():
   print('Logged in as')
   print(client.user.name)
   print(client.user.id)
   print('------')

@client.event
async def on_message(message):
   if message.content.startswith('!hello'):
       await message.channel.send('Hello!')

client.run('your_bot_token')

This script will create a Discord bot that responds to the command “!hello” by sending the message “Hello!” to the channel. You will need to replace your_bot_token with the actual token for your bot, which you can get from the Discord Developer Portal.

Getting data for the bot for data analysis

It is possible to create a Discord bot in Python that can perform data analysis tasks. Here is an example of how you might use the discord.py library to create a bot that retrieves data from an API and performs some basic analysis on it.

import discord
import requests
import pandas as pd

client = discord.Client()

@client.event
async def on_message(message):
   if message.content.startswith('!data'):
       # Retrieve data from API
       data = requests.get('https://api.example.com/data').json()
      
       # Convert data to a Pandas DataFrame
       df = pd.DataFrame(data)
      
       # Perform some basic analysis on the data
       mean = df['value'].mean()
       median = df['value'].median()
       std = df['value'].std()
      
       # Send results back to Discord
       await message.channel.send(f'Mean: {mean:.2f}')
       await message.channel.send(f'Median: {median:.2f}')
       await message.channel.send(f'Standard Deviation: {std:.2f}')

client.run('your_bot_token')

This script will create a bot that listens for the command “!data” and responds by retrieving data from an API, converting it to a Pandas DataFrame, and performing some basic statistical analysis on it. The results of the analysis are then sent back to the Discord channel as a message. You will need to replace https://api.example.com/data with the actual URL of the API you want to use and your_bot_token with the actual token for your bot.

You can customize this script to perform a variety of data analysis tasks, depending on the needs of your application. For example, you could use this approach to create a bot that retrieves and analyzes data from financial markets, social media, or any other source of data that has an API available.

Conclusion

In this tutorial, you learned how to create a Discord bot using Python and the discord.py library. You learned the basics of setting up a bot, handling events, and using commands and checks. You can use this knowledge to build bots for interacting with users on Discord servers that you manage or even on servers managed by other users.

You can also use the discord.py library to take your bots to the next level and build more advanced functionality. In addition to the discord.py library, you can also explore other tools such as ChatterBot, Tweepy, InstaPy, and Alexa Skills to learn how to create bots for different platforms using Python.

An essential part of the documentation is being consistent. You must be consistent with how you write and present your documents and the information in them.

This includes both the written content and the code blocks. Your documentation should follow a style guide that keeps your content across pages consistent.

However, ensuring that your content follows the style guide manually is difficult. You might easily miss small mistakes here and there. This is especially the case when your documentation is open source, where contributors can make fixes or changes to it.

This article covers the different methods and ways you can lint prose or content and code blocks to ensure it follows your style guide.

Why Use a Style Guide?

Documentation should provide a great developer experience. This includes consistency, clarity, and technical accuracy.

Creating a style guide can provide your documentation with the following benefits:

• Your tone remains consistent. For example, you shouldn't change between using "you" and "we". You should decide on the tone you want to speak to the developer with and stick to it.
• You ensure your content is outlined the same across pages. If you use dividers between sections, you should do that across the documentation. Switching between using and not using them can confuse the reader on when a section starts and ends.
• You maintain content that is written for everyone. Your tone shouldn't be biased toward gender, development level, disabilities, or anything similar.

Although style guides generally refer to the content of the documentation, you should also maintain a set of rules for your code block.

For example, if you're using JavaScript make sure you either use or don't use semicolons consistently. Similarly, make sure you either use double quotes across the code blocks or single quotes.

Markdown Content

Most documentation is written in Markdown (MD) or MDX formats. So, this article specifically targets linting markdown files.

If you write your documentation in different file formats, these solutions might not work for you.

Lint Prose with Vale

Vale is a linter for prose or content. It allows you to define rules based on your style guide, then shows you errors, warnings, or suggestions for changes in your documentation.

So many projects and companies use Vale, including GitHub, Microsoft, Angular, and more.

Vale provides some ready-made styles and packages that you can immediately add to your configurations. For example, you can use Microsoft's style guide.

Vale also provides ready-made style guides based on the purpose of your documentation. For example, if your documentation includes job listings, you can use the Joblint styles.

Vale is easy to set up and use. You can then either choose from existing styles or create your own. Vale also provides a config generator to save you time.

Then, you can test your content by simply running a command like this:

vale README.md

Vale also has a VS Code extension that allows you to quickly catch errors and warnings in your editor.

Not only can you use Vale through the command line, but you can also integrate Vale into your development or release pipeline.

For example, Vale provides a GitHub Action that you can use to test whether a PR has any lint errors. You can then ensure that no errors are merged into your repositories by mistake.

Lint Code with ESLint

ESLint is a linter that allows you to identify problems in JavaScript code. It also allows you to enforce style rules in your code to ensure that everything is consistent.

There are plugins that allow running ESLint with other languages. For example, typescript-eslint allows linting TypeScript.

By default, ESLint wouldn't work for lining code in the documentation. The problem is that the linter has to recognize where code blocks are within the markdown file, recognize the language of the code block, then check if there are any errors in it.

To do that with ESLint, you'll need to use the eslint-plugin-markdown. This plugin allows you to lint JavaScript, TypeScript, and other languages within your documentation files.

You can then define the rules similar to how you would with ESLint.

You can install the plugin in your Node.js project with the following command:

npm install --save-dev eslint eslint-plugin-markdown

Then, create the file .eslintrc.js in the root directory with the following content:

module.exports = {
    extends: "plugin:markdown/recommended",
    plugins: ["markdown"],
    overrides: [
        {
            files: ["**/*.md"],
            processor: "markdown/markdown"
        },
    ]
};

This enables running the linter on Markdown files. You can also add **/*.mdx to the files array to run the linter on MDX files as well.

You can specify which languages you want to lint in the overrides array. For example:

overrides: [
    //...
    {
    	files: ["**/*.md/*.js"],
        // optional
        rules: {
			// ...
        }
    }
]

All languages are nested under **/*.md. So, to specify JavaScript files, you pass the pattern **/*.md/*.js.

You can also optionally pass rules specific to that language under the rules property.

Then, you can run the eslint command to test the code blocks in your documentation:

eslint

This assumes that you created the configuration file at the root of your project. Otherwise, you need to pass the CLI tool some options.

You can also pass it the --fix option to immediately fix errors that can be fixed:

eslint --fix

You can also run ESLint when pull requests are sent into your repository by creating a GitHub Action that runs the above command. This ensures that all contributions to your project don't lead to errors in your documentation.

Conclusion

This article lists two tools that can be used for configuring and automating linters both for the prose and the code of your documentation.

Although these tools are widely used, there are other tools that can be used for different types of documentation formats or projects. Regardless of what tool you use, invest in automating this process as it ensures clear documentation for developers.

While creating a website and working with JavaScript, you'll often need to get access to elements in the DOM for different purposes.

This tutorial shows you different ways to get an element from the DOM using JavaScript.

getElementById

The getElementById() method allows you to retrieve an element from the DOM using the element's ID.

If no element exists in the DOM with the supplied ID, null will be returned instead.

For example:

const mainElement = document.getElementById('main');

getElementsByTagName

The getElementsByTagName() allows you to retrieve an HTMLCollection of elements that have the tag name you supply to the method. An example of a tag name is div.

Items in an HTMLCollection can be accessed similarly to how you would access items in an array.

For example:

const divElements = document.getElementsByTagName('div');
console.log(divElements[0]);

You can use this method on any element and not just the document. That way, you can retrieve all children of that element that have the supplied tag name.

For example:

const divElements = document.getElementsByTagName('div');
const pElements = divElements[0].getElementsByTagName('p');
console.log(pElements);

getElementsByClassName()

The getElementsByClassName() method allows you to retrieve a live HTMLCollection of elements that have the class name you provide as a parameter.

A live HTMLCollection means that the items in the collection are updated with any updates that happen to the DOM. So, for example, if an item was part of the collection because it had the class provided as a parameter, but then its class was removed, the item will be removed from the collection.

For example:

const mainElements = document.getElementsByClassName('main');
console.log(mainElements);

getElementsByName()

The getElementsByName() method allows you to retrieve elements by the value of the name attribute. For example, you can use it to retrieve input elements that have the name attribute set to email.

This method returns a live NodeList, which is generally similar to an HTMLCollection, but the items in the list can be accessed through the methods it provides.

For example:

const emailElements = document.getElementsByName('email');
console.log(emailElements.item(0));

querySelector

The querySelector() method allows you to retrieve the first element that matches the specified selector. The selector can be any CSS selector.

For example:

const elm = document.querySelector('.main > p');
console.log(elm);

This method can be used on any element, and not just the document. So, you can use it to retrieve a child element of a parent element that matches the specified selector.

For example:

const table = document.querySelector('.main > table');
const thead = table.querySelector('thead');

querySelectorAll

The querySelectorAll() method allows you to retrieve all elements that match the specified selector. This method returns a NodeList.

For example:

const elms = document.querySelectorAll('.main > p');
console.log(elms.item(0));

This method can be used on any element, and not just the document. So, you can use it to retrieve all child elements of a parent element that match the specified selector.

For example:

const table = document.querySelector('.main > table');
const rows = table.querySelectorAll('tr');
for (const row of rows) {
    console.log(row);
}

children

The children property allows you to retrieve all immediate child elements of the document or any element. This property's type is a live HTMLCollection.

For example:

const rows = document.querySelectorAll('table tr');
for (const row of rows) {
    console.log(row.children);
}

firstElementChild

The firstElementChild property allows you to retrieve the first child element of the document or any element.

If the element does not have children, the value of firstElementChild is null.

For example:

const rows = document.querySelectorAll('table tr');
for (const row of rows) {
    console.log(row.firstElementChild);
}

lastElementChild

The lastElementChild property allows you to retrieve the last child element of the document or any element.

If the element does not have children, the value of lastElementChild is null:

const rows = document.querySelectorAll('table tr');
for (const row of rows) {
    console.log(row.lastElementChild);
}

scripts

The scripts property allows you to retrieve all <script> elements in the document. It returns an HTMLCollection of elements.

For example:

console.log(document.scripts);

elementFromPoint

The elementFromPoint() method allows you to retrieve the top element starting from a specified point. It accepts x and y coordinates to locate the point to look for the element.

For example:

const elm = document.elemetFromPoint(100, 20);
console.log(elm);

elementsFromPoint

The elementsFromPoint() method allows you to retrieve an array of Elements starting from a specified point until the end of the viewport.

For example:

const elms = document.elementsFromPoint(100, 20);
console.log(elm[0]);

closest

The closest() method available on elements (not on the document) allows you to retrieve the closest ancestor (which are the parents) of the element that matches the specified selector. If no elements are found, the method returns null.

For example:

const closestElm = table.closest('div');
console.log(closestElm);

nextElementSibling

The nextElementSibling property on elements (not on the document) allows you to retrieve the element that follows the current element among its parent's child elements.

If there are no elements after this element, the value of the property will be null.

For example:

console.log(table.nextElementSibling);

previousElementSibling

The previousElementSibling property on elements (not on the document) allows you to retrieve the element that proceeds the current element among its parent's child elements.

If there are no elements before this element, the value of the property will be null.

For example:

console.log(table.previousElementSibling);

Conclusion

This tutorial explores a list of methods and properties that you can use to retrieve elements in JavaScript. Each have different purposes and can be used differently based on your use case.

Hacktoberfest is an annual event that occurs in October. It is created by DigitalOcean. Thousands of developers participate in this event across the globe.

This article explains what Hacktoberfest is, how you can participate, and more!

What is Hacktoberfest?

As mentioned in the introduction, Hacktoberfest occurs every year during October. It encourages developers to contribute to open source projects and practice programming by participating in solving problems across projects.

Who Can Participate in Hacktoberfest?

All developers of different levels and backgrounds can participate in Hacktoberfest. Whether you're a beginner or an expert, or a junior or a senior, you can participate in Hacktoberfest.

There are two ways to participate in Hacktoberfest: as a contributor or as a maintainer.

A contributor is someone that helps open source projects resolve issues they have opened. Whereas a maintainer manages an open source project and presents issues that they need help with.

New in Hacktoberfest 2022

Hacktoberfest 2022 encourages low-code and non-code contributions, which can be done through blog posts, translating content, graphic design, and more. The contributions must be tracked through GitHub Pull Requests (PRs) as other types of contributions.

How to Participate in Hacktoberfest 2022?

Registration to Hacktoberfest

Registration to Hacktoberfest opens on September 26th. When you register, you'll be able to choose whether you're participating as a contributor or as a maintainer.

Participating as a Contributor

As a contributor, during October you must have four PRs that either:

• Are merged into a participating repository;
• Or have the hacktoberfest-accepted label;
• Or have an approving review, but not closed or draft.

A participating repository is a repository that has the hacktoberfest topic. Participation can be done through GitHub or GitLab.

Participating as a Maintainer

To participate as a maintainer, you must facilitate participation for contributors. The first step is to either:

1. Add the hacktoberfest topic to your repository;
2. Or add the hacktoberfest-accepted label into your repository to be used on pull requests.

Then, you must merge four PRs into your repository during October. If you decide to use the second option mentioned in the first step, make sure to add the hacktoberfest-accepted label into these PRs.

Rules

1. For PRs to be counted into your participation in Hacktoberfest, they must be merged between October 1st and October 31st.
2. Contributions must be made to public repositories.
3. If a PR has a label that contains the word spam in it, the PR will not be counted. Also, if a participant has 2 or more spam PRs, they'll be disqualified from Hacktoberfest.
4. If a PR has a label that contains the word invalid, it will not be counted. The exception for this is if the PR also has the label hacktoberfest-accepted.

Unwritten Rules

This section covers rules that aren't necessarily covered by Hacktoberfest, but, from personal experience, are highly recommended to follow for both contributors and maintainers.

For Contributors

1. Do not spam any maintainer: Hacktoberfest is a busy season for maintainers, so they'll highly likely take time to take a look at your PR. Spamming maintainers does not speed up the process and only ruins the experience for maintainers.
2. Make valuable contributions: During Hacktoberfest, many repositories are created with the purpose of participating in Hacktoberfest but without providing any value. For example, repositories where you just contribute by adding your name to a list. A lot of these repositories are caught by Hacktoberfest eventually, are disqualified, and contributions from them are labeled as invalid. There's no point in wasting time on this.
3. Give back to your favorite projects: There are many projects out there that you have benefitted from throughout the year. Take this time to give back to these projects by helping them with the issues they have.
4. Follow rules set by each project: Projects should have contributing guidelines that explain how you can contribute to them. Make sure you read those first before you contribute.

For Maintainers

1. Create contributing guidelines: Whether you have a small or big project, contributing guidelines make it easier for your contributors to know how they can contribute to your project.
2. Welcome all developers: Many beginner developers participate in Hacktoberfest. They may lack experience when it comes to contributing, but they're eager to do it. Make sure to be welcoming to all developers of different experiences. If possible, try creating issues of different levels of expertise.

Additional Resources

If you're interested in learning more about Hacktoberfest and how to contribute, here are some resources that can be helpful:

1. Hacktoberfest's participation page.
2. For contributors: Tips for Beginners to Open Source Projects.
3. For maintainers: Tips for Beginner Maintainers of Open Source Projects.
4. Awesome for Beginners list.

This year I transitioned from a full-stack developer to a technical writer. I started casually looking into technical writing and building my experience in it the year before until I realized that this was the path for me and decided to make the change.

This article explains briefly what technical writing is, and how you can become a technical writer.

What is Technical Writing?

Technical writing is the practice of writing down an explanation of how something technical works or can be used.

It can be in the format of a blog post or software documentation. For someone to become a technical writer, they also need technical knowledge.

Skills you Need to Become a Technical Writer

This will come across as something obvious, but the main skills that you need to become a technical writer are two skills: technical skills and writing skills.

Technical Skills

It's important that before you become a technical writer, you take the time to build your experience as an engineer.

As your content will be used by other engineers or developers, you must be able to understand what kind of information they're looking for when they look at your content and in what format it should be presented.

Furthermore, you can't write explaining something that you don't have any actual knowledge of. For example, you can't explain how Promises work in JavaScript if you don't know what is JavaScript in the first place.

Even after you become a technical writer, it is important to keep on practicing development. Whether through reading about it and applying new knowledge or by maintaining side projects.

Writing Skills

Most technical content is written in English as it is a universal language that is understood by most people around the world. So, it's highly recommended that you improve your fluency in the English language.

It should be noted that being a good writer does not mean that you have to use "big words" in your writing. Good technical content should be written in a way that anyone with any level of language fluency would be able to understand.

Writing Technical Content for Blogs

If you're interested in becoming a technical writer who either writes on their own blog or writes for other blogs, this section is for you.

Own Blog

Writing for your own blog can be highly beneficial for you, even if you don't want to become a technical writer. It showcases both your technical skills and your writing skills.

It also helps you find more freelance opportunities as a technical writer for other websites. It acts as a live resume.

Creating your own blog can seem like a big, difficult task, but that's actually not true.

One way to create your own blog is using platforms like Hashnode or Medium. It is for free and you don't need to manage your blog or the hosting, as that is done for you.

Alternatively, if you want more control over your blog and want to do things your own way, this can also be done with some solutions like Ghost CMS, Strapi, WordPress, and more.

After you create your own blog, it becomes just a matter of "what will I write about?" The answer is anything and everything that you have knowledge of.

If you know a cool thing that you've discovered through personal experience, write about it. If you, instead, just learned about CSS Grids, write about it too.

The more you write, the more you'll be practicing while also sharing your knowledge with other developers.

Other Websites and Blogs

Many websites pay technical writers to write content for them. This includes websites like SitePoint, Draft.dev, LogRocket, and more.

The application process for these websites is different, but generally speaking, you will need to apply through some kind of form where you fill out what technical and writing experiences you have.

If you have your own blog, you'll have a better chance of becoming a writer for these websites. Most websites rather see your experience beforehand to decide whether they want to work with you or not.

Writing for other websites increases your experience as a technical writer and helps you learn the different ways websites work with content. It can give you different insights and ideas for the content of your own as well.

Writing Documentation

Another aspect of working as a technical writer is writing documentation. Documentation is a key asset for any developer using any software or tool. Good documentation provides a good developer experience.

Writing documentation requires thinking like a developer. "If I were using this tool, how would I want to learn about using it?" It's about finding the right way to deliver information of different complexities and experimenting with the best solution that you can provide for developers.

Documentation is similar to blog posts, except they usually delve more into the deeper topic and they are related to one piece of software.

You can learn about different good practices of writing documentation by observing well-written documentation such as Stripe's documentation.

I personally have learned a lot from reading Docs for Developers, which is a book that explains the process of writing documentation from start to end in a very easy-to-understand language.

Unlike working with blogs, working with documentation generally means you have to be hired at a company and work on their documentation. If you have your own open-source solution, even if it's a small one, you can start by trying out writing documentation for it as a practice.

Conclusion

Technical writing is a key asset to software development. It helps engineers learn how to use certain software and tools, and guide them to perform their own tasks while developing.

Whether you're interested in becoming a technical writer or not, I highly recommend writing in your free time and publishing it. It can boost your chance of getting opportunities both as a developer and as a writer, and it will help you understand topics you're writing about more deeply.

Events in JavaScript allow developers to listen for changes in the document and handle them as necessary. For example, you can listen to when a button is clicked to open a modal. Another example is showing the "scroll up" button when the user scrolls halfway through the page.

This article helps beginners understand what Events are in JavaScript and how to handle them.

Why Use Events

Modern websites have evolved to be interactive and reactive. Instead of presenting information or functionalities all at once, some can be shown to the user based on a specific action performed. The example mentioned earlier in the article illustrates this.

Events are also helpful in detecting different states of your website. For example, detecting when a screen is resized can help to ensure the responsiveness of certain elements on the page.

The list of use cases where events are helpful is endless. Events are an essential part of web development with JavaScript and it's important to understand how to use them.

Add Event Handler

To listen to events, you can use the addEventListener method. This method is available on every Element and Node in the document.

addEventListener accepts three parameters: the first parameter is the name of the event to listen to; the second parameter is the function that handles this event; and the third parameter is an optional parameter that allows you to set more options for the listener.

In most cases, you only need to use the first two parameters. Here's an example of handling the click event on a button:

const button = document.querySelector("button");
button.addEventListener("click", function (e) {
    alert("Button clicked");
});

This retrieves the first button on the page and, when the button is clicked, shows an alert.

Can an Event Have More Than One Handler?

The same event can have many handlers. The handlers are triggered one by one when the event occurs.

Event Object

As you can see, the function passed as a second parameter to addEventListener received the argument e. This is an Event object. This object may have different properties depending on its underlying type. However, it has some common important properties.

A frequently used property on the Event object is the target property. This is the element that the event was triggered on. This can be helpful when you have the same handler for more than one element.

For example:

document.querySelector("input").addEventListener("change", function (e) {
    alert(e.target.value);
});

This code snippet adds an event handler to the first input element on the change event. The change event is triggered when you change the value of the input, then move the focus from the input (for example, click on something else on the page).

When the change event occurs and the handler is triggered, the value of the input is retrieved using e.target.value and used in an alert.

Prevent Default Behavior of the Event

In some cases, you want to prevent the default behavior of certain events. For example, when a link is clicked on a page, you might want to show a confirmation message before the user is actually taken to a new page.

To prevent the default behavior of an event, you can use the preventDefault() method on the Event object.

For example:

const a = document.querySelector("a.some-link");
a.addEventListener("click", function (e) {
    e.preventDefault();
    if(confirm("Are you sure?")) {
      window.location.href = e.target.href;
    }
});

This adds an event handler to the click events on a link that has the class some-link. In the event handler, e.preventDefault() is used to prevent the default behavior of opening the page indicated in the href attribute.

It then shows the user a confirmation window, and if the user clicks Yes on the confirmation window, it then opens the page as expected.

Prevent Other Handlers from Handling this Event

As mentioned earlier, an event can have more than one handler. However, in some cases, you might want to cancel other events from handling this event. For example, if a request is sent to the server on form submission and you don't want other event handlers of form submission to send more requests.

There are two methods that can be used to prevent other handlers from handling the same event: stopPropagation and stopImmediatePropagation.

stopPropagation is used to prevent other event handlers from handling an event during the bubbling phase.

Bubbling is when you have the same event on both child and parent elements. The event will be triggered first on the child element, then "bubbled" to the parent element.

In this case, stopPropagation prevents the event from being triggered on the parent element if called in the handler of the child element. However, it does not prevent the event from propagating to other event handlers.

To prevent the event from being handled by subsequent handlers, you can use stopImmediatePropagation.

For example:

const button = document.querySelector("button");

button.addEventListener("click", function (e) {
  e.stopImmediatePropagation();
  alert("Hello!");
});

button.addEventListener("click", function (e) {
  alert("Bye!")
})

Although the button has two event handlers that listen to the click event, only the first one will run since it calls the stopImmediatePropagation function.

Difference Between preventDefault, stopPropagation, and stopImmediatePropagation

preventDefault only prevents the default behavior of the event. However, it does not prevent other handlers from handling the event.

stopPropagation and stopImmediatePropagation only prevent other handlers from handling the event. However, they don't prevent the default behavior of the event.

If you want to prevent both the default behavior and other handlers from handling the event, use preventDefault with either stopPropagation or stopImmediatePropagation.

Handle Events on Dynamic Elements

Consider the following example:

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    alert("Hello!");
  });
})

//create new button
const button = document.createElement('button');
button.classList.add('btn');
button.textContent = "Bye";
document.body.append(button);

In this example, you first retrieve all buttons that have the class btn. Then, you loop over these buttons and add an event listener that just shows the alert "Hello" when the button is clicked.

Then, you dynamically create a new button, add the class btn to that button, and add it to the body of the document.

If you try clicking buttons that were added in the HTML of the document or that were added prior to adding the event listener, the alert will be shown as expected. However, if you click on the new button, no alert will be shown.

This is because the element was not part of the elements retrieved using querySelectorAll as it didn't exist at the time.

Although this is a reasonable outcome, in larger websites, you might not be able to attach an event handler every time you create a new element, or you might want to ensure that the event handler is added to all elements, whether originally or dynamically created, similarly.

In that case, instead of adding the event handler directly to each element separately, you can add the event handler to the document's body and use e.target to check if the element triggered matches a specific condition.

For example, you can transform the previous example to the following:

document.body.addEventListener("click", function (e) {
  if (e.target.classList.contains("btn")) {
    alert("Hello!");
  }
})

//create new button
const button = document.createElement('button');
button.classList.add('btn');
button.textContent = "Bye";
document.body.append(button);

You add a handler to the click event on the body. In the handler, you check if e.target has the class btn and only perform the necessary action if it does.

Now, when any of the elements that have the class btn, whether dynamically or initially created, are clicked, the event handler will run for them.

This approach, however, will run the event listener on every click event on the body. So, it's important to handle it based on the target carefully.

Remove Event Handler

In some cases, you might want to remove an event handler for an element. To do that, you can use the removeEventListener method. This method is available on every Element and Node in the document.

This method receives the same parameters addEventListener receives. It's important to pass the same function that you passed to addEventListener. For that reason, people commonly define the function separately, then pass it to addEventListener and removeEventListener.

For example:

const button = document.querySelector("button");

function handleClick (e) {
  alert("Hello");
}

button.addEventListener("click", handleClick);

//some time later
button.removeEventListener("click", handleClick);

Conclusion

This article scratches the surface of Events and helps you understand them better. To learn more about Events in JavaScript, check out the following resources:

1. Introduction to Events
2. Event Reference

React Query (now rebranded to TanStack Query) is a React library used to make fetching and manipulating server-side data easier. Using React Query, you can implement, along with data fetching, caching, and synchronization of your data with the server.

In this tutorial, you'll build a simple Node.js server and then learn how to interact with it on a React website using React Query.

Please note that this version uses v4 of React Query which is now named TanStack Query.

You can find the code for this tutorial in this GitHub repository.

Prerequisites

Before starting with this tutorial make sure you have Node.js installed. You need at least version 14.

Server Setup

In this section, you'll set up a simple Node.js server with an SQLite database. The server has 3 endpoints to fetch, add, and delete notes.

If you already have a server you can skip this section and go to the Website Setup section.

Create Server Project

Create a new directory called server then initialize a new project using NPM:

mkdir server
cd server
npm init -y

Install Dependencies

Then, install the packages you'll need for the development of the server:

npm i express cors body-parser sqlite3 nodemon

Here's what each of the packages is for:

1. express to create a server using Express.
2. cors is an Express middleware used to handle CORS on your server.
3. body-parser is an Express middleware used to parse the body of a request.
4. sqlite3 is an SQLite database adapter for Node.js.
5. nodemon is a library used to restart the server whenever new changes occur to the files.

Create Server

Create the file index.js with the following content:

const express = require('express');

const app = express();
const port = 3001;
const cors = require('cors');
const sqlite3 = require('sqlite3').verbose();
const bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(cors());

app.listen(port, () => {
  console.log(`Notes app listening on port ${port}`);
});

This initializes the server using Express on port 3001. It also uses the cors and body-parser middleware.

Then, in package.json add a new script start to run the server:

  "scripts": {
    "start": "nodemon index.js"
  },

Initialize the Database

In index.js before app.listen add the following code:

const db = new sqlite3.Database('data.db', (err) => {
  if (err) {
    throw err;
  }

  // create tables if they don't exist
  db.serialize(() => {
    db.run(`CREATE TABLE IF NOT EXISTS notes (id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, content TEXT, 
      created_at datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at datetime NOT NULL DEFAULT CURRENT_TIMESTAMP)`);
  });
});

This creates a new database if it doesn't exist in the file data.db. Then, if the notes table doesn't exist on the database it creates it as well.

Add Endpoints

Following the database code, add the following code to add the endpoints:

app.get('/notes', (req, res) => {
  db.all('SELECT * FROM notes', (err, rows) => {
    if (err) {
      console.error(err);
      return res.status(500).json({ success: false, message: 'An error occurred, please try again later' });
    }

    return res.json({ success: true, data: rows });
  });
});

app.get('/notes/:id', (req, res) => {
  db.get('SELECT * FROM notes WHERE id = ?', req.params.id, (err, row) => {
    if (err) {
      console.error(err);
      return res.status(500).json({ success: false, message: 'An error occurred, please try again later' });
    }

    if (!row) {
      return res.status(404).json({ success: false, message: 'Note does not exist' });
    }

    return res.json({ success: true, data: row });
  });
});

app.post('/notes', (req, res) => {
  const { title, content } = req.body;

  if (!title || !content) {
    return res.status(400).json({ success: false, message: 'title and content are required' });
  }

  db.run('INSERT INTO notes (title, content) VALUES (?, ?)', [title, content], function (err) {
    if (err) {
      console.error(err);
      return res.status(500).json({ success: false, message: 'An error occurred, please try again later' });
    }

    return res.json({
      success: true,
      data: {
        id: this.lastID,
        title,
        content,
      },
    });
  });
});

app.delete('/notes/:id', (req, res) => {
  const { id } = req.params;

  db.get('SELECT * FROM notes WHERE id = ?', [id], (err, row) => {
    if (err) {
      console.error(err);
      return res.status(500).json({ success: false, message: 'An error occurred, please try again later' });
    }

    if (!row) {
      return res.status(404).json({ success: false, message: 'Note does not exist' });
    }

    db.run('DELETE FROM notes WHERE id = ?', [id], (error) => {
      if (error) {
        console.error(error);
        return res.status(500).json({ success: false, message: 'An error occurred, please try again later' });
      }

      return res.json({ success: true, message: 'Note deleted successfully' });
    });
  });
});

Briefly, this creates 4 endpoints:

1. /notes endpoint of the method GET to fetch all notes.
2. /notes/:id endpoint of the method GET to fetch a note by an ID.
3. /notes endpoint of the method POST to add a note.
4. /notes/:id endpoint of the method DELETE to delete a note.

Test Server

Run the following command to start the server:

npm start

This starts the server on port 3001. You can test it out by sending a request to localhost:3001/notes.

Website Setup

In this section, you'll create the website with Create React App (CRA). This is where you'll make use of React Query.

Create Website Project

To create a new React app, run the following command in a different directory:

npx create-react-app website

This creates a new React app in the directory website.

Install Dependencies

Run the following command to change to the website directory and install the necessary dependencies for the website:

cd website
npm i @tanstack/react-query tailwindcss postcss autoprefixer @tailwindcss/typography @heroicons/react @windmill/react-ui

The @tanstack/react-query library is the React Query library which is now named TanStack Query. The other libraries are Tailwind CSS related libraries to add styling to the website.

Tailwind CSS Setup

This section is optional and is only used to set up Tailwind CSS.

Create the file postcss.config.js with the following content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Also, create the file tailwind.config.js with the following content:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}

Then, create the file src/index.css with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, in index.js import src/index.css at the beginning of the file:

import './index.css';

Use QueryClientProvider

To use the React Query client in all of your components, you must use it at a high level in your website's components hierarchy. The best place to put it is in src/index.js which wraps up your entire website's components.

In src/index.js add the following imports at the beginning of the file:

import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

Then, initialize a new Query client:

const queryClient = new QueryClient()

Finally, change the parameter passed to root.render:

root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

This wraps the App component which holds the rest of the website's components with QueryClientProvider. This provider accepts the prop client which is an instance of QueryClient.

Now, all components within the website will have access to the Query Client which is used to fetch, cache, and manipulate the server data.

Implement Display Notes

Fetching data from the server is an act of performing a query. Therefore, you'll use useQuery in this section.

You'll display notes in the App component. These notes are fetched from the server using the /notes endpoint.

Replace the content of app.js with the following content:

import { PlusIcon, RefreshIcon } from '@heroicons/react/solid'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'

function App() {
  const { isLoading, isError, data, error } = useQuery(['notes'], fetchNotes)

  function fetchNotes () {
    return fetch('http://localhost:3001/notes')
    .then((response) => response.json())
    .then(({ success, data }) => {
      if (!success) {
        throw new Error ('An error occurred while fetching notes');
      }
      return data;
    })
  }

  return (
    <div className="w-screen h-screen overflow-x-hidden bg-red-400 flex flex-col justify-center items-center">
      <div className='bg-white w-full md:w-1/2 p-5 text-center rounded shadow-md text-gray-800 prose'>
        <h1>Notes</h1>
        {isLoading && <RefreshIcon className="w-10 h-10 animate-spin mx-auto"></RefreshIcon>}
        {isError && <span className='text-red'>{error.message ? error.message : error}</span>}
        {!isLoading && !isError && data && !data.length && <span className='text-red-400'>You have no notes</span>}
        {data && data.length > 0 && data.map((note, index) => (
          <div key={note.id} className={`text-left ${index !== data.length - 1 ? 'border-b pb-2' : ''}`}>
            <h2>{note.title}</h2>
            <p>{note.content}</p>
            <span>
              <button className='link text-gray-400'>Delete</button>
            </span>
          </div>
        ))}
      </div>
      <button className="mt-2 bg-gray-700 hover:bg-gray-600 rounded-full text-white p-3">
        <PlusIcon className='w-5 h-5'></PlusIcon>
      </button>
    </div>
  );
}

export default App;

Here's briefly what's going on in this code snippet:

1. You use useQuery to fetch the notes. The first parameter it accepts is a unique key used for caching. The second parameter is the function used to fetch the data. You pass it the fetchNotes function.
2. useQuery returns an object that holds many variables. Here, you use 4 of them: isLoading is a boolean value that determines whether the data is currently being fetched; isError is a boolean value that determines if an error occurred. data is the data that is fetched from the server; and error is the error message if isError is true.
3. The fetchNotes function must return a promise that either resolves data or throws an error. In the function, you send a GET request to localhost:3001/notes to fetch the notes. If the data is fetched successfully it is returned in the then fulfillment function.
4. In the returned JSX, if isLoading is true, a loading icon is shown. If isError is true, an error message is shown. If data is fetched successfully and has any data in it, the notes are rendered.
5. You also show a button with a plus icon to add new notes. You'll implement this later.

Test Displaying Notes

To test out what you've implemented so far, make sure your server is still running, then start your React app server with the following command:

npm start

This runs your React app on localhost:3000 by default. If you open it in your browser, you'll see a loading icon at first then you'll see no notes as you haven't added any yet.

Implement Add Notes Functionality

Adding a note is an act of mutation on the server data. Therefore, you'll be using the useMutation hook in this section.

You'll create a separate component that shows the form used to add a note.

Create the file src/form.js with the following content:

import { useMutation, useQueryClient } from '@tanstack/react-query'

import { useState } from 'react'

export default function Form ({ isOpen, setIsOpen }) {
  const [title, setTitle] = useState("")
  const [content, setContent] = useState("")
  const queryClient = useQueryClient()

  const mutation = useMutation(insertNote, {
    onSuccess: () => {
      setTitle("")
      setContent("")
    }
  })

  function closeForm (e) {
    e.preventDefault()
    setIsOpen(false)
  }

  function insertNote () {
    return fetch(`http://localhost:3001/notes`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        title,
        content
      })
    })
    .then((response) => response.json())
    .then(({ success, data }) => {
      if (!success) {
        throw new Error("An error occured")
      }
      
      setIsOpen(false)
      queryClient.setQueriesData('notes', (old) => [...old, data])
    })
  }

  function handleSubmit (e) {
    e.preventDefault()
    mutation.mutate()
  }

  return (
    <div className={`absolute w-full h-full top-0 left-0 z-50 flex justify-center items-center ${!isOpen ? 'hidden' : ''}`}>
      <div className='bg-black opacity-50 absolute w-full h-full top-0 left-0'></div>
      <form className='bg-white w-full md:w-1/2 p-5 rounded shadow-md text-gray-800 prose relative' 
        onSubmit={handleSubmit}>
        <h2 className='text-center'>Add Note</h2>
        {mutation.isError && <span className='block mb-2 text-red-400'>{mutation.error.message ? mutation.error.message : mutation.error}</span>}
        <input type="text" placeholder='Title' className='rounded-sm w-full border px-2' 
          value={title} onChange={(e) => setTitle(e.target.value)} />
        <textarea onChange={(e) => setContent(e.target.value)} 
          className="rounded-sm w-full border px-2 mt-2" placeholder='Content' value={content}></textarea>
        <div>
          <button type="submit" className='mt-2 bg-red-400 hover:bg-red-600 text-white p-3 rounded mr-2 disabled:pointer-events-none' 
            disabled={mutation.isLoading}>
            Add</button>
          <button className='mt-2 bg-gray-700 hover:bg-gray-600 text-white p-3 rounded'
            onClick={closeForm}>Cancel</button>
        </div>
      </form>
    </div>
  )
}

Here's a brief explanation of this form

1. This form acts as a pop-up. It accepts isOpen and setIsOpen props to determine when the form is opened and handle closing it.
2. You use useQueryClient to get access to the Query Client. This is necessary to perform a mutation.
3. To handle adding a note on your server and keep all data in your query client synced, you must the useMutation hook.
4. The useMutation hook accepts 2 parameters. Thie first one is the function that will handle the mutation, which in this case is insertNote. The second parameter is an object of options. You pass it one option onSuccess which is a function that runs if the mutation is performed successfully. You use this to reset the title and content fields of the form.
5. In insertNote, you send a POST request to localhost:3001/notes and pass in the body the title and content of the note to be created. If the success body parameter returned from the server is false, an error is thrown to signal that the mutation failed.
6. If the note is added successfully, you change the cached value of the notes key using the queryClient.setQueriesData method. This method accepts the key as a first parameter and the new data associated with that key as a second parameter. This updates the data everywhere it's used on your website.
7. In this component you display a form with 2 fields: title and content. In the form, you check if an error occurs using mutation.isError and get access to the error using mutation.error.
8. You handle form submission in the handleSubmit function. Here, you trigger the mutation using mutation.mutate. This is where the insertNote function is triggered to add a new note.

Then, in src/app.js add the following imports at the beginning of the file:

import Form from './form'
import { useState } from 'react'

Then, at the beginning of the component add a new state variable to manage wheter the form is opened or not:

const [isOpen, setIsOpen] = useState(false)

Next, add a new function addNote that just uses setIsOpen to open the form:

function addNote () {
    setIsOpen(true)
}

Finally, in the returned JSX, replace the button with the plus icon with the following:

<button className="mt-2 bg-gray-700 hover:bg-gray-600 rounded-full text-white p-3" onClick={addNote}>
    <PlusIcon className='w-5 h-5'></PlusIcon>
</button>
<Form isOpen={isOpen} setIsOpen={setIsOpen} />

This sets the onClick handler of the button to addNote. It also adds the Form component you created earlier as a child component of App.

Test Adding a Note

Rerun your server and React app if they're not running. Then, open the website again at localhost:3000. Click on the plus button and a pop up will open with the form to add a new note.

Enter a random title and content then click Add. The pop up form will then close and you can see the new note added.

Implement Delete Note Functionality

The last functionality you'll add is deleting notes. Deleting a note is another act of mutation as it manipulates the server's data.

At the beginning of the App component in src/app.js add the following code:

const queryClient = useQueryClient()
const mutation = useMutation(deleteNote, {
    onSuccess: () => queryClient.invalidateQueries('notes')
})

Here, you get access to the query client using useQueryClient. Then, you create a new mutation using useMutation. You pass it the function deleteNote (which you'll create next) as a first parameter and an object of options.

To the onSuccess option you pass a function that does one thing. It executes the method queryClient.invalidateQueries. This method marks the cached data for a specific key as outdated, which triggers retrieving the data again.

So, once a note is deleted, the query you created earlier that executes the function fetchNotes will be triggered and the notes will be fetched again. If you had created other queries on your website that use the same key notes, they'll also be triggered to update their data.

Next, add the function deleteNote in the App component in the same file:

function deleteNote (note) {
    return fetch(`http://localhost:3001/notes/${note.id}`, {
      method: 'DELETE'
    })
    .then((response) => response.json())
    .then(({ success, message }) => {
      if (!success) {
        throw new Error(message);
      }

      alert(message);
    })
  }

This function receives the note to be deleted as a parameter. It sends a DELETE request to localhost:3001/notes/:id. If the success body parameter of the response is false, an error is thrown. Otherwise, only an alert is shown.

Then, in the returned JSX of the App component, change how the loading icon and error where shown previously to the following:

{(isLoading || mutation.isLoading) && <RefreshIcon className="w-10 h-10 animate-spin mx-auto"></RefreshIcon>}
{(isError || mutation.isError) && <span className='text-red'>{error ? (error.message ? error.message : error) : mutation.error.message}</span>}

This shows the loading icon or the error message for both the query that fetches the notes and the mutation that handles deleting a note.

Finally, find the delete button of a note and add an onClick handler:

<button className='link text-gray-400' onClick={() => mutation.mutate(note)}>Delete</button>

On click, the mutation responsible for deleting the note is triggered using mutation.mutate. You pass it the note to delete which is the current note in a map loop.

Test Deleting a Note

Rerun your server and React app if they're not running. Then, open the website again at localhost:3000. Click the Delete link for any of your notes. If the note is deleted successfully, an alert will be shown.

After closing the alert, the notes will be fetched again and displayed, if there are any other notes.

Conclusion

Using React (TanStack) Query, you can easily handle server data fetching and manipulation on your website with advanced features such as caching and synchronization across your React app.

Make sure to check out the official documentation to learn more about what you can do with React Query.

You probably have heard the term Kubernetes, somewhere or the other. K8S is an abbreviated form for Kubernetes, starting with the letter ‘K’, Ending with ‘S’, and has 8 characters between the letters, hence the name.

In this blog, we will discuss what they are, how they are used, what is the workflow they have, and whether every application needs it.

What is Kubernetes?

Kubernetes is an open-source project initially developed by Google. It is a container orchestration tool. It can be used using on-premise systems, VMs, and clouds.

Kubernetes is also provided as a service by many providers like AWS, Azure, and Google, and they are known as Amazon EKS, AKS, and GKE respectively. Each has its specific features.

I get it, if you were to ask what container orchestration is, Let’s see in short what that means,

Moving your Application to the Internet

You have an application on your machine that you want to deploy to the internet. Let’s say that it is Irrespective of what framework you use, or it is just the html, CSS, and js, you may want to host it on a server and map it with a domain.

One of the most common ways to do that is to use a VM and copy those files over there, use Nginx or apache or anything of your preference, start a server, and map the server with a domain name.

Virtual Machines

VM is one of the first choices in hosting your applications for specific cases. Now, hoping your web application gets popular, how much do you think a VM can accommodate on its server? A VM is simply a computer, RAM, ROM, CPU, etc resources are fixed.

To imagine, you can think of the number of people who can use your computer simultaneously. Likewise, how will the performance be when so many users access the website at the same time? And this is dependent on the resources of the machine.

If you have higher resources, it can accommodate a lot of users and less if it has lesser resources.

These are some of the questions that arise when a website is moved to production, including how many resources you need in your case, which shows higher performance, etc... Setting up a new VM is costly since it is almost an independent machine like the one you're building these with.

Also, it is a tedious task to create, monitor, and manage multiple instances of the same and redirect them if one is busy.

These are a few problems that may arise when on a VM. Since a VM is a complete structure, it has numerous packages, OS, and many other dependencies, which are irrelevant for the application to run. Also, the resources can not be used effectively since there is no proper allocation and utilization. That is where containers arise.

Containers

Containers are executable software applications that contain everything it needs to run on their own. Unlike VM, containers are smaller packages and so transporting them is easier. They can also be increased in number or decreased effortlessly. This is one of the important aspects of Kubernetes.

In an application, there can be several micro-services that help the function of the app. In that case, every micro-service will be made as a container and you can see from this that, as the complexity and size of the application increases, you have to manage multiple containers. Here is where Kubernetes comes in.

Container Orchestration tool

Kubernetes is a container orchestration tool, which means you get to increase, decrease, destroy, create, and configure containers with higher specifications and much more.

These help in scalability, monitoring, Health-checks and many more. Let’s see a real-time example of how container orchestration helps.

Short overview of a Real-time application

You developed a full-stack application. It will probably have a Front-end facing application, a backend, and a database.

Databases should be configured to be updated simultaneously in all the instances if we were to increase them in number, to avoid corruption of data, which again is not easier.

A database can be deployed in Kubernetes as a stateful set, but that needs a few extra configurations. There are many other different approaches other than Kubernetes for databases. Here in this blog, we will just focus on the front-end and back-end.

Containerizing the applications

Using docker you will probably have to create a docker file and write configurations in YAML so that the front-end can serve. Nginx or apache servers are generally used for front-end containers but there are many different ways as well. Similarly, a backend container is created.

Now that you have a front-end container and a back-end container, you want to take the images of both containers and push them to an image repository.

Pushing the container images

An image repository is generally provided by the cloud provider but Docker has its repository as well, and there are many different other image repositories available, you can choose one of your choices.

Now, you can add continuous integration and a continuous delivery pipeline in it and deliver the container images to Kubernetes or, you can send them to it directly as well. Continuous integration and continuous delivery pipeline is a different topic, you can learn about them separately and it is independent of Kubernetes.

Now that the image is pushed to Kubernetes, the image will be built and the container will run.

Now zooming out, let’s know some terms and structure of Kubernetes.

Structure of Kubernetes and its terms

What are Pods and Nodes in Kubernetes?

A pod is a basic deployment on which your container runs. A pod can have multiple containers but generally, a pod per container is preferred.

A node can be a physical machine or virtual machine and it is where the pods are deployed. A cluster can have several nodes on them.

The order is like this: container < pod < node < cluster.

We can start the pod by mentioning how many replicas we want, how many maximum replicas it can have, auto-scaling, health-check, etc.

The health-check feature checks whether a pod is healthy (running ) and if not, it will pass the information that can be made to create a new pod or inform the user about it for handling. So even if one pod fails, it will automatically detect it and can be made to create further replicas. This is mostly done with zero downtime.

What is downtime?

It is the time duration, in which the server is neither accessible nor working.

Zero Downtime is something that is preferred everywhere. We all know how it is when the site we use most often is down for maintenance or because the server crashed.

To prevent this and enhance the user experience, Zero downtime is a requirement nowadays.

Kubernetes helps in 0 downtime - Until a healthy pod starts, the new pod will not destroy itself. This way during updates you can have zero downtime, and also if some pod fails, It can be made to create replicas, etc…

Who needs Kubernetes?

Not every application needs Kubernetes, that said every product can have Kubernetes with its features if required. Kubernetes can help your application in many different ways but you probably can analyze different problems like resource management, downtime issues, scaling issues, and feasibility.

If you need to monitor and automate a large number of containers (micro-services), Kubernetes comes in handy. It does have different other features, which in case required for your product, you can use Kubernetes.

Conclusion

K8s is a container orchestration tool and it is used when there is an increased number of containers which can be difficult to monitor and handle. Not every application requires it, you can choose it if the features match your requirement.

A pod is a basic deployment that can be configured using YAML, the containers are deployed on pods and these pods are located on nodes, where nodes are created on clusters. It is better to know all the features of Kubernetes and match them with your application requirements, before implementing it.

For a large-scale application, Kubernetes saves a lot of time and automates almost everything related to scaling and everything with zero downtime.

Documentation websites are used to help people learn about your product or solution. More specifically for developers, it's an important resource to help other developers learn more about your tool and understand better how to use it.

In this tutorial, you'll learn how to create documentation with Docusaurus. This documentation website will have features such as multi-language code blocks and local search. You'll then deploy the website with Netlify.

Prerequisites

Docusaurus requires Node.js version 14.3 or above. If you don't have Node.js installed you can install it from their website.

To deploy your docusaurus website, you'll need a GitHub and Netlify accounts. You must also have an empty repository to hold the code of your docusaurus website.

Project Installation

Start by creating a new Docusaurus project with the following command:

npx create-docusaurus@latest my-docs classic

This will install Docusaurus in the directory my-docs and it will use the classic template.

Now, change to the directory my-docs and start the Docusaurus server:

cd my-docs
npm start

This will start the server on localhost:3000 and should open the website automatically in your browser.

The code for the landing page is in src/pages/index.js. However, this tutorial only focuses on the documentation part.

To open the documentation, click on Tutorial in the Navigation bar. You'll see a few documentation pages created by default with Docusaursus.

Documentation pages reside in the docs directory of your docusaurus project. They are either MD or MDX files. MD files are basic Markdown files with Markdown syntax. MDX files are Markdown files that also support React syntax within.

Try to change the content of intro.md to the following:

---
sidebar_position: 1
---

# Introduction

I've changed the documentation!

If the server is still running and you go back to the website, you'll see that the content of the page has changed.

Notice that there are at the top of the markdown file three dashes followed by some key-value properties, then followed again by 3 dashes. These are Markdown front matter fields that provide customization to some meta data attributes of the document such as the page title or, in this case, its position in the sidebar.

Create a New Document

To create a new document, you need to create a new file under the docs directory.

In this section, you'll create an MDX file to showcase and add some MDX features later in this tutorial.

Create tabs.mdx with the following content:

# How to Use Tabs

This will add a heading to the page. If you check your documentation website, you should find a new link in the sidebar for the new page.

Let's rearrange the position of the link in the sidebar. Add the following at the top of tabs.mdx:

---
sidebar_position: 2
---

This will move "How to Use Tabs" right after "Introduction".

Optional Features

This section includes optional features you can make use of in your documentation. You can skip this section or any subsection if you don't find them necessary for you.

Use Tabs

Using MDX provides you with a lot of features in your Markdown files. One of those features is adding tabs to your page.

In tabs.mdx add the following after the frontmatter part you added earlier:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Then, after the heading of the page, add the following to add tabs to the page:

<Tabs groupId="tabs">
  <TabItem value="tab1" label="Tab 1" default>
    I like tab 1
  </TabItem>
  <TabItem value="tab2" label="Tab 2">
    I like tab 2
  </TabItem>
</Tabs>

This will add 2 tabs with each having different text. Notice the following:

1. The groupId prop on Tabs allows you to synchronize the choice of tab throughout the website.
2. Each tab item must have a value prop. If you want to synchronize the choice of tab throughout the website, you'll need to use the same value for tabs used in other locations (you'll see an example in a bit).
3. The default prop makes a tab selected by default when the page is first opened.

Open the documentation now and you'll see tabs added to the documentation. You can click between the tabs and the text will change.

Let's try adding another Tab component under the previous one:

<Tabs groupId="tabs">
  <TabItem value="tab1" label="Tab 1" default>
    I still like tab 1
  </TabItem>
  <TabItem value="tab2" label="Tab 2">
    I still like tab 2
  </TabItem>
</Tabs>

Notice that Tabs has the same groupId as the previous Tabs element, and the tab items have the same values as well.

If you open the website now you'll see two tabs components each with tab items and text. Try choosing a tab from either component and the choice will be synced with the other tab component as well.

Multi-Language Code Blocks

You can also utilize tabs to add code blocks with multiple languages. This is helpful if you want to show the same code block in multiple languages.

Below the previous tabs you added add this new tab component:

<Tabs groupId="code-tabs">
  <TabItem value="js" label="JavaScript" default>

  ```js
  console.log("Hello")
  ```
  
  </TabItem>
  <TabItem value="python" label="Python">

  ```py
  print("Hello")
  ```

  </TabItem>
</Tabs>

Notice the following:

• This Tabs component has a different value for groupId compared to previous tabs. That's because there's no need for synchronization between this Tabs component and previous components.
• The code blocks inside tabs must be surrounded by empty lines. Otherwise, they will not be rendered properly.
• The indentation for the code blocks should not be more than one tab (equivalent to 2 spaces) or it might not render properly.

If you open the website now, you'll see tabs for the code blocks.

Add Automatic NPM and Yarn Tabs

NPM and Yarn are common package managers used for Node.js-related projects and tools. A lot of times, you want to show the same command in both NPM and Yarn. However, it's a hassle to manually add tabs each time you want to do it.

In this case, you can make use of the npm2yarn remark plugin. This plugin will allow you to automatically convert all code blocks that use NPM to yarn on your documentation.

Start by installing the npm2yarn plugin:

npm install @docusaurus/remark-plugin-npm2yarn

Then, in docusarus.config.js you need to add a new option remarkPlugins in the config object:

const config = {
	//other options...
    presets: [
        [
          'classic',
          /** @type {import('@docusaurus/preset-classic').Options} */
          ({
              docs: {
                  //other options...
                  remarkPlugins: [
                    [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
          ],
              }
          })
        ]
    ]
};

The {sync: true} option enables synchronizing the user's choice of tab across the website, similar to the behavior you saw earlier with Tabs.

Now, in tabs.mdx add the following at the end:

```bash npm2yarn
npm install react
```

The important bit here is npm2yarn. If you want a code block to have "npm" and "Yarn" tabs and you want to convert the command to yarn, add this keyword after the first 3 backticks of your code block.

Start your server again and open the website now on the "How to Use Tabs" documentation page. You might need to perform a hard refresh to clear your website's cache.

If you scroll down you should see the code block you added but with 2 tabs "npm" and "Yarn". You'll also see that the command was automatically converted to a Yarn command under the Yarn tab.

Table of Content

The last feature you'll learn about in MDX files is the table of content. You can automatically generate a table of content for any page.

In tabs.mdx under the previous imports add a new import:

import TOCInline from '@theme/TOCInline';

Then, add the following under the heading of the page:

<TOCInline toc={toc} />

## Heading 2
### Heading 3

If you open the website now, you'll see an automatically generated table of content under the header on the "How to Use Tabs" page.

Note that the TOCInline component will only render headings starting from h2 or ##. It will not render h1 or # headings.

Add Search

An important functionality in any documentation is a search engine. In Docusaurus, you can utilize services like Algolia to add a search engine. However, in this tutorial, you'll add a local search engine that works well for small documentation.

In your terminal, run the following command to install the plugin:

npm install --save @easyops-cn/docusaurus-search-local

Then, in docusaurus.config.js add to the config object a new key themes:

themes: [
    [
      require.resolve("@easyops-cn/docusaurus-search-local"),
      {
        hashed: true,
      },
    ],
  ],

That's all you need to add a local search engine.

The search engine will not work if you use npm start. You first need to build the website:

npm run build

Then serve the build:

npm run serve

Open the website again at localhost:3000. You should see a search bar at the right of your navigation bar.

Try searching for one of the pages you added and you should see the results in the dropdown.

Customize Sidebar

The sidebar at the moment is automatically generated from the files in the docs directory. You can, however, manually set the sidebar and items in it.

To do that, open sidebars.js and change the value of the sidebars object to the following:

const sidebars = {
   tutorialSidebar: [
        {
          type: 'doc',
          id: 'intro'
        },
        {
          type: 'category',
          label: 'Tutorial',
          items: [{
            type: 'doc',
            id: 'tabs',
            label: 'Learn all about tabs'
          }],
		}
	]
};

This will change the sidebar to include a link and a collapsable section with one sub-item.

If you open the website now you should see the sidebar changed.

Change the "Edit this page" Link

At the end of every document, you'll find an "Edit this page" link. This allows contributors to easily make changes they find necessary and submit a PR to your repository.

The prefix URL of this page is set in docusaurus.config.js under the docs object in the presets array in the config object:

docs: {
	editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
	},

You should change that to your repository's docs directory. For example:

"https://github.com/shahednasser/docusaurus-tutorial/tree/master/"

The URL prefix should be the URL before reaching the docs directory.

You can test this out by committing and pushing your changes to the repository. Then, try clicking the link on any of the documents and a new page will open. It will be the document on GitHub where you can edit it and submit a PR with the changes.

Deploy Your Documentation Website

The last step you'll do is deploy the documentation website. Log in to Netlify, then click on "Add new site" and from the dropdown select "Import an existing project".

A new page will open to create a new site. You can choose to import the code from multiple websites including GitHub. Click on GitHub.

You'll then be asked to give Netlify permissions to your GitHub account if you haven't done that before.

After you give the necessary permissions, you'll be able to select a repository to deploy. Choose the repository you created for the docusaurus website.

On the next page, Netlify will show build and deploy settings. They should be similar to the following:

If all looks good, click on "Deploy site". Netlify will then build and deploy your site which will take a couple of minutes.

Once the deployment is done and published, you can access the website from the randomly generated domain name. You can find it at the top of your website's dashboard on Netlify.

If you open your website you'll find that it's exactly similar to what you worked on locally with all features working well.

Conclusion

In this tutorial, you learned about the different features of Docusaurus documentation, how to add local search, and how to deploy the website on Netlify.

There's still more to be done with your documentation. Here are some additional steps you can take:

1. Learn how to customize your domain name in Netlify.
2. Learn how to manage your documentation's pages and blog.
3. Check out Docusaurus's documentation to learn about all the features you can add to your documentation.

Cookies in JavaScript are used to read from and store small data related to the user on the browser.

Local Storage allows you to also read from and store data related to the user on the browser using JavaScript's Storage API.

In this article, you'll learn about some of the main differences between local storage and cookies and which you should choose for your websites.

What are Cookies?

Cookies are pieces of data that are communicated between the server and the browser in the header of requests. This allows the server to learn more information about the user accessing the website but also gives you access in the browser to interact with that data.

An example of using cookies is storing the user's authentication token when they are logged in. The server needs to have access to that cookie to authenticate the user in later requests and retrieve data or process actions based on who the user is.

Similarly, as a developer, you'll probably need access to that token to use it for future requests to send to your server.

Cookies on the client-side (the browser) are natively accessed with document.cookies. When you store cookies on the browser, you can make them specific to a path in a domain name and you can add an expiry date for them.

What is the Local Storage?

Local Storage is used to read and write data in the browser's storage. The data is persistent and has no expiry date. The data is stored in key-value pairs. The server has no access to the client's local storage.

An example of using local storage is storing the user's color mode preference (light or dark mode). This piece of information is generally not necessary for the server to know, and is used to ensure that the user's preference is reflected on the website.

Local storage is specific to the protocol of a domain. So, the information returned for a website with HTTP protocol is different than the information returned for that same website with HTTPS protocol.

Local storage is accessed using window.localStorage. It's a read-only property with methods like getItem and setItem to access and modify or add data to the local storage.

What are the Differences Between Cookies and Local Storage

Access on the Server

As mentioned in the previous sections, the server can access the client's cookies but not the data stored in the client's storage.

So, in use cases where it's important for the server to have access to a set of data, you should use cookies.

Data Size

There's a big difference between the size of data that cookies can hold and that of the local storage. For cookies, the maximum size is 4096 bytes, whereas for local storage it's 5MB.

For that reason, cookies should not be used to store large pieces of data. For example, if you want to store the user's details in the browser then it's best to store them in the local storage.

Data Expiry

Cookies have an expiry date. You can set it to a very far away date, but it still expires. On the other hand, data in the local storage does not expire and will be available any time the user opens your website. The only way to clear local storage is either manually with code or if the user clears their browser storage manually.

Better API

Unless you're using a JavaScript library to facilitate this, it can be a hassle to read or write cookies using document.cookies as there is no straight way to do it. Here's an example from W3Schools of the code you'd need to use to get and set a cookie by name:

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

As for local storage, it implements the Web Storage API which contains easy-to-use methods to read and write data. Here's an example of setting data in the storage and reading them:

localStorage.setItem('name', 'Shahed');

//later
const name = localStorage.getItem('name');

Which Should You Choose?

From reading the differences and definitions this should be clear. However, to summarize it and make it even clearer:

1. If you need to store data that is accessible for both the server and the client, use cookies. Otherwise, use local storage.
2. If you need to store larger data, use local storage.
3. If you need to store data that does not expire, use local storage.
4. If you need easy-to-use methods to access and modify the data stored on the client, use local storage.

Conclusion

If you're interested to learn more about cookies and local storage, check out MDN's documentation for cookies and localStorage for a more thorough explanation of each.

React 18 came out at the end of March with a bundle of new features. One of these new features is Transitions.

In this tutorial, you'll learn more about Transitions in React 18 and see them in action.

Definition

You have 2 types of transitions. Urgent transitions and non-urgent transitions.

Urgent Transitions

Urgent transitions are transitions that the user needs to see instantly. For example, if the user changes their profile name and saves it, they should be able to see the change in the displayed profile name in the navigation bar.

Urgent transitions are done the same way you've been setting a state before:

const [name, setName] = useState('');

function handleChange (e) {
	setName(e.target.value); //urgent transition
}

Non-Urgent Transitions

Non-urgent transitions are transitions that are ok to be delayed a little. For example, if the user is performing a search, it's ok for the results to appear not so instantly.

There are 2 ways to start a non-urgent transition. The first one is using the hook useTransition:

import {useTransition, useState} from 'react';

export default function MyApp() {
    const [results, setResults] = useState([]);
    const [pending, startTransition] = useTransition();
    
    function handleChange(e) {
        let tempResults = [];
        ... // set results from APIs
        startTransition(() => {
            setResults(tempResults);
        });
    }
}

The hook returns the boolean variable pending which indicates whether the transition is active or not. It can be used to show a loading component.

The hook also returns a function startTransition that accepts a callback function in which you set the state. The state will not be set immediately.

The second way to start a non-urgent transition is using the function startTransition imported directly from React:

import {startTransition} from 'react';

export default function MyApp() {
    const [results, setResults] = useState([]);
    
    function handleChange(e) {
        let tempResults = [];
        ... // set results from APIs
        startTransition(() => {
            setResults(tempResults);
        });
    }
}

This approach does not give you access to a variable like isPending to check whether the transition is active or not.

This approach is mainly available for places in your code when you can't use hooks like useTransition.

Usage Example

In this example, you'll be creating a number input that accepts a large number of images to be shown. Then, random images will be retrieved using Falso.

Start by creating a new React app if you don't have one available:

npx create-react-app my-app

Next, change into the directory my-app:

cd my-app

Then, install the Falso library:

npm i @ngneat/falso

Now, open src/App.js and change it to the following:

import './App.css';

import { useState, useTransition } from 'react';

import { randImg } from '@ngneat/falso';

function App() {
  const [number, setNumber] = useState(5000);
  const [images, setImages] = useState([])
  const [isPending, startTransition] = useTransition();

  function showImages() {
    //TODO add transition
  }

  return (
    <div style={{
      padding: '10px'
    }}>
      <h1>Images</h1>
      <div>
        <label>Number of images</label>
        <input type="number" min="1" max="10000" value={number} onChange={(e) => setNumber(e.target.value)} style={{
          display: 'block',
          marginTop: '10px',
          width: '3rem'
        }} />
        <button type="button" onClick={showImages} style={{marginTop: '10px'}}>Show Images</button>
      </div>
      <div>
        <span>Number selected: {number}</span><br/>
        <span>Results:</span>
        {isPending && <span>Loading...</span>}
        {!isPending && images.length > 0 && images}
      </div>
    </div>
  );
}

export default App;

You first create 2 state variables number and images. You also use useTransition which gives you access to isPending and startTransition.

In the returned JSX, you show a number input and a button that will later retrieve the images on click.

Below the input and button, the number entered by the user in the input will be shown. Notice that in the onChange event handler for the input the name is updated urgently. This will show the number instantly as it is updated by the user.

Let's test it out now. Run the website server:

npm start

This will open the website in your browser. If you try to update the input, you'll notice that the number displayed below it will update instantly.

Now, let's test the non-urgent transition. In showImages replace the TODO with the following code:

const imgSources = randImg({length: number}).map((url, index) => <img src={`${url}?v=${index}`} key={index} />);
startTransition(() => {
	setImages(imgSources);
})

This will get the images using the falso library and inside startTransition with set the images state variable.

Notice that in the returned JSX of the function we use isPending to indicate whether to show "Loading..." or not.

If you try clicking on the button now, the "Loading..." text will show first, and then the images will be shown gradually.

Conclusion

Transitions in React 18 allow you to optimize your user experience, especially for tasks or features that require some time to load. You can now use Transitions in React 18 to differentiate between instate updates and updates that can be delayed, and show in the UI any necessary loading more efficiently for those that require more time.

Stackbit is a website builder that gives both technical and non-technical people a lot of power when creating their websites. It can be used to create portfolio websites, blogs, or any type of website if you wish to extend it to your use case.

In this tutorial, you'll learn how to create a blog with Stackbit using its Next.js starter theme. You'll also learn how to add custom pages for Content Models by creating an Authors page.

Project Setup

Start by choosing one of the Starter theme. This tutorial will be focused on the Starter theme.

Then, choose a name for your new project.

If you're not signed in you'll then be asked to either create an account or sign in. I recommend creating an account with GitHub as it will be easier to connect your repository to it then.

You'll then have your website ready for customization.

Notice that your website will be deployed on a free Stackbit subdomain. So, you'll be able to view it online right away.

Transfer Repository to Your Account

The next step is to transfer the website codebase to your GitHub account. This makes it possible for you to make changes to the website's codebase and add new content models.

Click on the gear icon at the top left. Then, under "Connected Services" you'll see GitHub and you'll be able to Request Repo Transfer.

When you click on that you'll receive an email to accept the transfer. Once you click on the link in the email, the transfer will begin and might take a couple of minutes.

Once the transfer is done, you'll have your website's codebase in you GitHub account.

Understanding the Branches

In your GitHub repository, you'll have 2 branches: the master branch and the preview branch.

The master branch is the deployed version that everyone can see when they go on your website.

The preview branch is what you can see when you log in on Stackbit. Think of it as a draft version. Once you think the changes are ready to be deployed on the main website, you can either push the changes to the master branch manually or just click the "Publish" button at the top right in your Stackbit app.

Set Up Local Development

Stackbit has a code editor that you can use right in your Stackbit app by clicking on the code icon in the sidebar.

Once you make a change in the code, it will be automatically committed to the preview branch which is what you see in your Stackbit app.

Alternatively, you  can work on your website's development locally. To do that, click on the gear icon at the top left again. Under "Envoironment" you'll see "Local Development" with steps you can copy and paste into your terminal directly.

Please note that if you haven't transferred the codebase into your GitHub account you won't be able to see these tips.

As mentioned under "Local Development", once you push commits to the preview branch, the visual editor in your Stackbit app will update automatically.

Creating Posts

There are 2 ways to create posts: through the visual editor or through the code editor.

Visual Editor

On your Stackbit app, if you press the second icon "CMS" you'll be able to edit and add pages and blog posts on your website.

Try clicking on "Post" then "Add new Post". You'll be able to enter information like slug and title. Then, you can select a feature image and the author.

You can then use the content editor, which has text formatting you can use but also supports raw markdown editing by pressing the Raw MD button.

All changes you make to posts are automatically committed to the preview branch. Once you publish them they'll be live on your deployed website.

Code Editor

To add posts in the code editor, go to content then pages. You'll see all pages there in markdown files, where the names of the files are the slugs of the pages.

You'll also find a blog directory which holds all posts inside it. To add a blog post create a new file with its name the slug you want for the post. Then, add in it the following information:

---
title: Test Post
layout: PostLayout
date: '2021-07-01'
author: content/data/team/hugh-saturation.json
excerpt: >-
  Sed in facilisis dui. Nulla molestie risus in mi dapibus, eget porta lorem
  semper. Donec sed facilisis nibh.
featuredImage:
  type: ImageBlock
  url: /images/post-2.jpg
  altText: Post Image
bottomSections:
  - elementId: ''
    variant: variant-c
    colors: colors-a
    title: Read next
    recentCount: 3
    styles:
      self:
        height: auto
        width: wide
        margin: ['mt-0', 'mb-0', 'ml-0', 'mr-0']
        padding: ['pt-12', 'pb-56', 'pr-4', 'pl-4']
        justifyContent: center
      title:
        textAlign: center
      subtitle:
        textAlign: center
      actions:
        justifyContent: center
    type: RecentPostsSection
---

This is test post

Everything between the opening and closing 3 dashes are the values of the fields you enter in your visual editor. That includes the title, author, feature image, and more.

Then, after the three dashes is the markdown content of the post. This is the content you'd enter in the text editor in the visual Stackbit app, but it should be in markdown format.

Once you're done, save the new file and commit it to the preview branch. You'll be able to see it in the visual editor among the CMS.

If you also open the Blog page in your Stackbit app or open the website locally, you should see the post you added among other existing posts.

Add Pages for Authors

In this section, you'll start to customize your Stackbit starter. You'll be adding a new predefined type of page to display authors. You'll need to create a layout specific for that page before creating that page.

Add Page to Content Models

Open stackbit.yaml in the root of your website's code and add the following under contentModels:

contentModels:
	...
    PersonFeedLayout:
    	isPage: true
    	singleInstance: true
    	urlPath: '/authors'
    	file: 'authors.md'
    	newFilePath: 'authors.md'

You're adding a new layout PersonFeedLayout. You can read more about content model fields in Stackbit's documentation, but briefly:

1. If isPage is set to true the UI will allow you to create pages using this model.
2. singleInstance means that this page can only be created once.
3. urlPath is the path that this page will be found on.
4. file is the markdown file that holds the data and content for this page. Since this is a page, its path is relative to content/pages
5. newFilePath is the file that should be created when this page is created through the UI. Similarly, since this content model is a page the path is relative to content/pages.

Define the Content Model Fields

In this section, you'll define the fields of the new content model PersonFeedLayout. This means that when you try to create the page through the UI, these fields is what you will see.

To do that, create the file .stackbit/models/PersonFeedLayout.yaml with the following content:

name: PersonFeedLayout
label: Authors
labelField: title
layout: PersonFeedLayout
hideContent: true
extends:
  - Seo
fields:
  - type: string
    name: title
    label: Title
    default: This is a page title
  - type: list
    name: topSections
    label: Top Sections
    items:
      type: model
      groups:
        - sectionComponent
  - type: list
    name: bottomSections
    label: Bottom Sections
    items:
      type: model
      groups:
        - sectionComponent
  - type: style
    name: styles
    styles:
      title:
        fontWeight: ['400', '700']
        fontStyle: ['normal', 'italic']
        textAlign: ['left', 'center', 'right']
    default:
      title:
        textAlign: center

You can learn more about Models in Stackbit through their documentation, but briefly the items under fields are what you'll see in the UI and the fields you can enter for this content model. This content model has 4 fields:

1. title: the title of the page
2. topSections: Sections you want to add to the top of the page. This is useful if you want to allow users using the visual editor to add custom sections before your defined layout.
3. bottomSections: Similarly to topSections, you'll allow users using the visual editor to add custom sections after the defined layout.
4. styles: Allow the users using the visual editor to customize some of the style of the layout.

Create New Layout

Next, you'll be creating the PersonFeedLayout which will hold the implementation of the Authors page.

Create a new file src/components/layouts/PersonFeedLayout/index.tsx with the following content:

import * as React from 'react';

import ImageBlock from '../../molecules/ImageBlock';
import { getBaseLayoutComponent } from '../../../utils/base-layout';
import { getComponent } from '../../components-registry';

export default function PageLayout(props) {
    const { page, site } = props;
    const BaseLayout = getBaseLayoutComponent(page.baseLayout, site.baseLayout);
    const topSections = page.topSections || [];
    const authors = page.authors || [];
    const bottomSections = page.bottomSections || [];

    return (
        <BaseLayout page={page} site={site}>
            <main id="main" className="sb-layout sb-page-layout">
                {page.title && (
                    <h1 className="text-center my-5" data-sb-field-path="title">
                        {page.title}
                    </h1>
                )}
                {topSections.length > 0 && (
                    <div data-sb-field-path="sections">
                        {topSections.map((section, index) => {
                            const Component = getComponent(section.type);
                            if (!Component) {
                                throw new Error(`no component matching the page section's type: ${section.type}`);
                            }
                            return <Component key={index} {...section} data-sb-field-path={`sections.${index}`} />;
                        })}
                    </div>
                )}
                <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 my-16 max-w-screen-md mx-auto'>
                    {authors.map((author, index) => (
                        <div className='group text-center' key={index}>
                            {author.image && <ImageBlock {...author.image} 
                                className="group-hover:shadow-md transition-shadow rounded-full w-40 h-40 mx-auto" />}
                            <h3>{author.firstName} {author.lastName}</h3>
                            <span className="text-gray-500">{author.role}</span>
                        </div>
                    ))}
                </div>
                {bottomSections.length > 0 && (
                    <div data-sb-field-path="sections">
                        {bottomSections.map((section, index) => {
                            const Component = getComponent(section.type);
                            if (!Component) {
                                throw new Error(`no component matching the page section's type: ${section.type}`);
                            }
                            return <Component key={index} {...section} data-sb-field-path={`sections.${index}`} />;
                        })}
                    </div>
                )}
            </main>
        </BaseLayout>
    );
}

First, notice that you display the topSections first and the bottomSections last in your layout.

In the middle, you display the authors in a grid. The authors are received in the props of the layout. You'll be defining this in the next section.

After creating this layout, add it in src/components/layouts/index.tsx:

import PostFeedLayout from './PostFeedLayout';
//...

export {
	...,
    PersonFeedLayout
}

Finally, you need to add it to src/components/components-registry.ts:

const components = {
    //...,
    'PersonFeedLayout': dynamic(() => import('./layouts/PersonFeedLayout'))
};

Add Props

To define the props passed to this layout, first, go to src/utils/data-utils.js and add a new function:

export function getAuthors(objects) {
    return objects.filter((object) => object.type === 'Person');
}

The sourcebit-target-next plugin will use the sourcebit-source-filesystem to read files under content and import them into your Stackbit website.

There are two types of content: pages under the content/pages directory and data under content/data directory. You'll be able to filter out content based on the type field for data content, or the layout field for pages content.

In this case, you're retrieving all authors, which are data content. So, you check if the type field is Person. Please note that, by default, all authors are under content/data/team in JSON files.

Next, you'll use this function to pass the authors as a prop to the layout you created in the previous section. Go to src/utils/static-props-resolvers.js and add the following:

import {
    //...,
    getAuthors
} from './data-utils';

//...

const StaticPropsResolvers = {
    //..,
    PersonFeedLayout: (props, data) => {
        return {
            ...props,
            authors: getAuthors(data.objects)
        };
    }
};

Your Next.js website will resolve the props of the layouts by checking through the StaticPropsResolvers object. The key is the name of the layout and the value is a function that returns an object which will be the props of the layout.

You add a new key for PersonFeedLayout which accepts props and data as parameters. props is the data entered by the user in the UI for the fields you created for the content model earlier. For example, the bottomSections field.

The data is all the data on your website made available by sourcebit-target-next as explained earlier. It is an object that has 3 properties:

1. objects which is an array of all content files loaded by the sourcebit-source-filesystem plugin.
2. pages which is an array holding all static page props.
3. props which is an object with common props for all pages.

In this function, you return all the props as-is and you add the authors prop which will call the getAuthors function you created earlier passing it data.objects.

Add the Authors Page

Finally, you just need to add the Authors page. Create the file content/pages/authors.md with the following content:

---
title: Authors
layout: PersonFeedLayout
topSections:
  - type: CtaSection
    elementId: ''
    colors: colors-a
    backgroundSize: full
    title: Let's do this
    text: >-
      The Stackbit theme is flexible and scalable to every need. It can manage
      any layout and any screen.
    actions:
      - type: Button
        label: Try it now
        url: /
        style: primary
    backgroundImage: null
    styles:
      self:
        height: auto
        width: narrow
        margin:
          - mt-0
          - mb-0
          - ml-0
          - mr-0
        padding:
          - pt-24
          - pb-24
          - pl-4
          - pr-4
        alignItems: center
        justifyContent: center
        flexDirection: col
      title:
        textAlign: left
      text:
        textAlign: left
      actions:
        justifyContent: flex-start
---

This defines the page to use the PersonFeedLayout and adds among its top sections a Call to Action (CTA) section.

If you run your server now:

npm run dev

and go to /authors, you'll be able to see all the authors in your blog.

If you push the changes to the preview branch you'll be able to see your new page in the Stackbit app as well as edit the page fields.

Add Link to Page in the Header

Optionally, you can add a link to the page in the header. To do that, open content/data/config.json and add the new link under primaryLinks in header:

{
	...,
    "header": {
    	...,
        "primaryLinks": [
        	...,
            {
                "type": "Link",
                "label": "Authors",
                "altText": "Authors",
                "url": "/authors"
            }
        ]
    }
}

If you save the changes and view the website in local development, or push the changes to the preview branch to view it on the Stackbit app, you'll see a new link the navigation bar for "Authors".

Conclusion

In this tutorial, you learned how you can set up Stackbit and do some development and customization on it. For more features, be sure to check out Stackbit's documentation for more details.

As we are halfway through Ramadan, I want to take a chance to shed light on some cool Islamic tools and projects.

Some of these are open source and you can use them in your own projects as well.

Al Quran Cloud

Al Quran Cloud is a web app that you can use to read Quran, listen to it with your favorite reciters, and check translations in many languages.

What's cooler about this project is that it provides free APIs that you can use to add Quran verses to your own projects. You can use it to add the Quran verses both are text and audio, as well as display translations of it.

I personally have utilized these APIs in my Chrome extension Quran in New Tab.

You can also support this project on GitHub.

Salat Vue

Salat Vue is a simple Web app that shows you prayer times in any country and city. It also shows you the next prayer and how much time is left remaining.

You can support this tool on GitHub.

hijri-date

hijri-date is an NPM package that you can use to get the Hijri date. It provides a HijriDate class that you can use to handle hijri dates with an API similar to JavaScript's Date. You can also use it to convert to Gregorian date and vice versa.

You can support this tool on GitHub.

Quran.com

Quran.com is an organization that provides web apps and mobile apps to easily have access to the Quran and read it, as well as listen to it. It's actively maintained and uses modern technologies.

You can support this project on GitHub. You can also donate to their organization for more support.

azkar-db

azkar-db is a GitHub repository that has a wide set of azkar in a SQLite database, JSON format, and CSV format. It includes Morning azkar and Evening azkar, as well as other types.

Unfortunately, this one is all in Arabic only.

Muslim Mate

Muslim Mate is a dashboard with the necessary information for Muslims. It includes prayer times, a calendar of Islamic events, Azkar, and weather stats among other things. It's available as a website and as an Android app.

It's also fully customizable as you can remove or change the places of items in your dashboard.

You can support this project on GitHub.

Al-Adhan

By the creator of Al Quran Cloud, this website provides you with information about prayer times, as well as a Hijri calendar with events.

This project also has a free API that you can use in your projects. You can use it to get the Hijri calendar of a Gregorian month, prayer times at a specific longitude and latitude, and much more.

You can support this project and contribute to it on GitHub.

Quran-Flutter

Quran-Flutter is an open-source flutter project that allows you to read the Quran cross-platforms. This project is still in its development phase but at the moment it's a responsive Quran reader for any device.

It's Salah Time

It's Salah Time is a beautiful web app that shows you prayer times based on your location. It's also a PWA so you can add it to your mobile device and view it as an app.

You can support and contribute to this project on GitHub.

Sunnah.com

Sunnah.com is a website you can use to view the Hadith of Prophet Muhammad. You can also search for it. It supports 3 languages: Arabic, English, and Urdu.

It also provides free-to-use APIs to use these resources in your projects.

You can support and contribute to them on GitHub.

pyIslam

pyIslam is a Python library that you can use to calculate prayer times, hijri dates, qiblad direction, Zakat calculation, and more.

You can support and contribute to the project on GitHub.

Quran CLI

Quran CLI is an NPM package that you can install locally by cloning the GitHub repository. It allows you to view the Quran right from your terminal.

You can read as well as search the Quran right from your CLI. You can view the verses in both English and Arabic.

More Awesome Tools

To check out more awesome Islamic tools, check out the following repositories:

1. Awesome-Islam
2. Awesome-Muslims

As of macOS 12.3+, Python 2 which was installed by default at /usr/bin/python have been removed. This can lead to a lot of issues for developers that need to use Python 2 or that use other tools that depend on it.

Install Python 2

To install Python2 again, simply download the macOS universal installer from Python's website

After downloading the installer run it to install Python 2. This will automatically install Python in /usr/local/python as well.

Test it Out

You can run Python 2 in your terminal now and other tools using it will no longer have issues:

python

Something I constantly see on Twitter is threads that list people's jobs in the technical fields that don't require a lot or any technical knowledge. Some of those threads include Technical Writing.

I'm a technical writer, I had been a freelance technical writer for almost a year and now I'm working full-time. In this article, I'll give you a bit of summary about what we do and whether or not you need technical knowledge for the job.

Documentation

Documentation generally is a huge part of your work as a technical writer. Most, if not all, companies hire a technical writer to write documentation about their software.

The reason I'm saying most and not all is that some companies hire technical writers exclusively for blog content, especially if that company works as a digital marketing or content provider for other software companies. I'll get to the blog posts later on.

There are two types of documentation: user documentation and developer documentation. Some companies need you to write both. Some companies need you to write one or the other, depending on the type of solution they provide.

Developer Documentation

Writing documentation for developers requires you to sift through code written by other people to understand many things such as how something is done, how something is actually implemented, or why something is done a certain way.

This deep dive into the code requires you to have some knowledge of programming, especially in the language you're working with. The level of that knowledge depends on the type of software you're working on.

You can also rely on the technical team by asking them questions if anything is unclear or you need to confirm some details.

Working with documentation also requires you to actually build with the software at times to be able to explain the process, including code snippets, and test things out yourself.

User Documentation

Writing documentation might require less technical knowledge than that required for writing for developers. When you write documentation for users, it's often done in a way to simplify how to use a process. Users don't necessarily care about the code or how it's implemented.

Articles and Blogs

Another aspect of being a technical writer is writing articles. There are many types of articles you can work on, and again it depends on what type of company you're in.

One type is tutorial articles. You have to guide developers on how they can do something using the software. Those obviously require technical knowledge as you'll be building the solution yourself while writing about it.

Another type is general articles that might explain topics and concepts related to the product your company provides or programming in general. Although those might not have code snippets in them or might not require you to build anything throughout the article, they require a deep understanding of the topic at hand.

As it is a technical topic, you should have some technical knowledge to be able to write about it correctly.

Conclusion

Technical Writing jobs can vary from one company to another, but generally speaking, the technical part is a prominent part of it. If you're interested in technical writing, make sure you also develop your technical knowledge and skills as well.

Optional Chaining in JavaScript is used to return undefined for accessing an object property that doesn't exist and whose parent property is nullish (null or undefined).

If you are unaware that property exists or not and you want to avoid the error that's being thrown, you may want to use optional chaining to get around with it.

In this article, you’ll learn how and when to use Optional Chaining. You’ll also learn when not to use Optional Chaining in JavaScript.

How it Works

First, let's explore what can go wrong when accessing a property in a nested object.

let person = {
    name: "Murtuza",
    work: () => {
        return "Software Developer"
    },
    socials: {
        github: {
            username: "murtuzaalisurti",
            link: "https://github.com/murtuzaalisurti",
            proUser: {
                is: 'no'
            }
        },
        linkedin: {
            username: "murtuzaali-surti",
            link: "https://linkedin.com/in/murtuzaali-surti"
        },
        twitter: {
            username: "murtuza_surti",
            link: "https://twitter.com/murtuza_surti"
        }
    }
}

In the above object, let's try to access the property link nested within the property website. Can we?

console.log(person.website.link); //an error will be thrown

We get an error,

Cannot read property 'link' of undefined

The property website doesn't exist in the object!

But, let's add the property website to the root object and set the value of it as null.

website: null

Let's check if this works,

console.log(person.website.link); //an error will be thrown

We get a similar error,

Cannot read property 'link' of null

As mentioned in the above definition, we can use optional chaining to handle these types of errors! Here's how we can do that.

Syntax

// website: property to validate
// link: property to access
website?.link

The operator ?. will check if the property on its left-hand side is null or undefined and if that's the case, then it will simply return undefined without throwing any errors. In other words, this is also known as short-circuiting. Otherwise, it will return the value of the property on its right-hand side.

Not just that, you can also invoke a function if it exists using optional chaining.

person.work?.(args)

Also, you can access properties using [] brackets.

person.socials.github?.["username"]

What You Can’t Do

• You cannot apply optional chaining to the objects that are not declared yet. For example:

object?.prop // object is not defined

We haven't declared object, thus it will throw an error.

• You cannot assign a value to this expression. In other words, the optional chaining expression can't be on the left-hand side.

The below code is not valid.

person.socials.github?.["username"] = "name" // not valid

When to Use Optional Chaining?

It's important to note that optional chaining should not be used when it's not necessary to do so. Only use optional chaining when you know that the property that you want to access is optional and not mandatory.

For example, in our object person, we can keep the social media platforms optional, so we are not sure if a user has a social media account or not on a particular platform. For that, we can use optional chaining to check if a user has a social media account on a particular platform and if it exists, get the username.

person.socials.github?.["username"]

But, if we place the optional chaining operator at the root object, then it doesn't make any sense because the root object i.e. person must exist and if it doesn't exist, we should get an error!

Conclusion

In this article, you learned what Optional Chaining in JavaScript is, how it works when to use it, and when not to use it.

To learn more about how Optional Chaining works, make sure to check out the MDN documentation on it for more details.

If you search Google for ways to earn money online, one of the most popular methods is starting a blog. It's stated as one of the slow yet effective ways to earn money online.

When I created my blog, my goal wasn't to monetize it. I just loved writing and wanted to do it on my own terms. Also, as a technical writer, I wanted to learn more and I think writing is one of the best ways.

However, I have been able to generate some profit through my blog. For that reason, I'm listing in this article a few ways I've made profit from my blog.

Costs of Creating a Blog

Before you start talking about earning if you're creating your own blog you should think of the spending.

Generally speaking, when you create a blog you need to think about the costs of hosting and domain name. If you're not tech-savvy, then you might also need a developer to set it up and maintain it, but I won't get into the details of that.

There's a way to obtain both of those things for free, actually. I've listed some resources before in my ultimate guide of things you can do for free.

In my case, I've already purchased a personal domain, so I just used a subdomain of it to use for my blog.

As for the hosting, it depends on the type of blog you're running. In my case, my blog uses Ghost CMS as a headless backend and I connect it to a frontend built on Gatsby. This gives me more flexibility in the type of hosting.

I can host my Gatsby blog on Netlify for free due to their generous free plan. As for the backend, I started off with free hosting on Heroku. It was slow and limited, but as it was only for me to use to upload blog posts and didn't affect visitors' user experience, I had no issue with it.

Once I started earning some profit from my blog I switched to hosting my backend on DigitalOcean. Again, as I am the only one using the backend, I opted for one of the cheaper plans.

Summary

If you're considering hosting your own blog my tip for you is:

1. If you need to get a domain name for free you can either use an existing domain and add a subdomain to it, use free domain name providers, or use subdomains provided by some hosting websites like Netlify.
2. Consider going for the headless CMS approach to have more flexibility for your hosting.

Alternatively, you can use websites like Medium, Dev.to, or Hashnode to create your own custom blog.

Carbon Ads

One of the most common ways to make a profit off your blog is using ads, so I won't make this one long.

So many blogs go for Google ads. However, in my case, I was able to get Carbon ads instead. The reason I prefer Carbon ads is that the ads aren't annoying and are all engineering-related. So, the ads are relevant to my blog visitors.

Guest Posts

A lot of marketing companies write posts for their clients and look for blogs to post them. Usually, the posts are general posts that include a do-follow link to their client. When they post it on your blog, they pay you for the posting fees.

I started working with a bunch of marketing companies and individuals for that. However, it's important for me to ensure the quality of the content being posted on my website and the quality of links, as well.

If you have subscribers or followers, you should be careful with what kind of content you're sharing. Making a profit is not worth spamming them with content that's not relevant for them or educational.

So, I always do a review of the posts to be posted on my blog. I make sure its content is true, informative, and if it links to a client then it's not a scam.

If you're interested in doing this, you can have a Collaborate or Business page on your blog detailing how this process works. You can also try contacting digital marketing agencies to offer your services, however, I personally haven't tried that.

Article Reviews

On my blog, I have a section called Reviews. It's all the articles I've written for clients who have asked me to review their products or services. You either get paid or get something related to the product like a free subscription forever.

Article reviews are not easy to find, because you're usually contacted by the company to write the review for them. However, I recommend that if you get an opportunity to write a review for a product in the beginning and it's not paid, take it. You can use it to showcase your work for future work with other companies.

Again, quality is important for your blog. So, make sure when you take on collaboration with companies, make sure it's something you believe in and something that is relevant for your blog's content.

Do-Follow Links

Some companies don't want you to write a full article for them. They're just interested in you adding a link to their website on your website. They either pay you for it, add a do-follow link for your website on theirs, or share your website through their social media platforms.

If you do this one, you have to be careful with the quality of the websites you're linking to, as it can bring down your domain name rating if you link to websites with low-quality content.

Writing for Other Websites

Although this is not a profit directly coming from your own blog, it's related to it. Building a blog can be like building a portfolio for writers. You give other companies or agencies a taste of what you can do.

I was able to write on a lot of websites like SitePoint and ButterCMS because of all the writing I've done on my blog. It builds your experience and helps you a lot when applying to write for other agencies or websites.

Conclusion

It's important to note that monetizing your blog can be a slow process. You need to make sure that you have quality content and you're consistent with your posting. That helps you gain regular readers and subscribers and will increase your ranking in search engines.

As your blog grows in quality, more opportunities to monetize it will come your way. Focus on the quality and durability of it first.

Perhaps one of the most annoying tasks in React is creating forms and validating them, especially if you're doing it without using any libraries. You'll have to manage the states, values, and validation of all inputs.

Formik is a React and React Native library that helps you create forms in React "without the tears". You can pair Formik with validation libraries like Yup to make the process even simpler.

In this tutorial, you'll learn how creating and validating forms can be simpler in React using Formik and Yup. You'll create a simple form with different types of fields and see the different ways you can validate that form.

You can find the code for this tutorial in this GitHub repository.

Project Setup

In this section, you'll set up your website using Create React App (CRA) and install some dependencies for the sake of the tutorial. If you already have a website set up you can skip this part.

In your terminal, run the following command to create a new React website with CRA:

npx create-react-app react-forms

I'm calling the website react-forms but you can change it to whatever you want.

Once the installation is done, change to the newly created directory:

cd react-forms

Then, install Tailwind CSS to add some styling to your website:

npm install -D tailwindcss postcss autoprefixer

To set up Tailwind CSS create the file tailwind.config.js with the following content:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And replace the content of src/index.css with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create the Form with Formik

You'll now use Formik to create a form. First, install Formik:

npm i formik

Replace the content of src/App.js with the following:

import { useFormik } from 'formik';

function App() {
    const professions = ['Developer', 'Designer', 'Other'];
    //TODO create formik instance
    
    return (
    	<div className="bg-blue-300 min-w-screen min-h-screen overflow-x-hidden">
        </div>
    );
}

export default App;

All you did here is create the component App which does nothing special at the moment.

Notice how you import the useFormik hook at the beginning of the file. You'll use this hook to create a Formik instance with all the states and helpers you'll need.

The useFormik hook accepts as a parameter an object of configurations. These configurations can be used to modify and shape your form as you need.

In this tutorial, you'll use the pass the following properties in the object:

1. initialValues: includes the form fields and their initial values.
2. validationSchema: A Yup schema to validate the fields. You'll use this in the next section.
3. onSubmit: a function to execute when the form is submitted.

Replace the TODO in the App component with the following:

const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
      profession: professions[0],
      age: '',
    },
    onSubmit: function (values) {
      alert(`You are registered! Name: ${values.name}. Email: ${values.email}. Profession: ${values.profession}. 
        Age: ${values.age}`);
    }
  })

As you can see, you set the value of the property initialValues to an object. This object's keys are the names of the fields in the form. Their values are the initial value.

In the onSubmit function, you receive the values object as a parameter. Here you can access the values and use them to save them in the database or send them to a server. For the sake of this tutorial, you just print them out in an alert.

Note that the onSubmit function is only executed once the form is validated. So, you don't need to perform any validation inside this function.

Now, you can use the formik variable to create a form, link its fields to the fields you defined in useFormik, link the validation, and link the submit handler.

formik includes the following properties among others:

1. handleSubmit: the submit function that should be called when the form is submitted. This is usually assigned to the onSubmit event handler of form elements.
2. errors: An object that has the field names as properties and the value of each is the error message resulted from validating that field if there are any errors.
3. touched: An object that has the field names as properties and the value is a boolean indicating whether the user has interacted with the field or not.
4. values: An object that has the field names as properties and the value of each is the current value of that field. It's usually used to set the value property of input elements.
5. handleChange: A function that should be used as the handler of the change event of input elements. It's passed as the value of the onChange prop of elements.
6. handleBlur: A function that should be used as the handler of the blur event of input elements. It's passed as the value of the onBlur prop of elements.

Replace the return statement in App with the following:

return (
    <div className="bg-blue-300 min-w-screen min-h-screen overflow-x-hidden">
      <form onSubmit={formik.handleSubmit} className="max-w-lg mx-auto bg-white rounded shadow-lg mt-7 p-3">
      <h1 className='text-3xl mb-3 text-center'>Register</h1>
        <div className='mb-4'>
          <label for="name">Full Name</label>
          <input type="text" name="name" id="name" 
            className={`block w-full rounded border py-1 px-2 ${formik.touched.name && formik.errors.name ? 'border-red-400' : 'border-gray-300'}`}
            onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.name} />
          {formik.touched.name && formik.errors.name && (
            <span className='text-red-400'>{formik.errors.name}</span>
          )}
        </div>
        <div className='mb-4'>
          <label for="email">Email</label>
          <input type="email" name="email" id="email"
            className={`block w-full rounded border py-1 px-2 ${formik.touched.email && formik.errors.email ? 'border-red-400' : 'border-gray-300'}`}
            onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.email} />
          {formik.touched.email && formik.errors.email && (
            <span className='text-red-400'>{formik.errors.email}</span>
          )}
        </div>
        <div className='mb-4'>
          <label for="profession">Profession</label>
          <select name="profession" id="profession"
            className={`block w-full rounded border py-1 px-2 ${formik.touched.profession && formik.errors.profession ? 'border-red-400' : 'border-gray-300'}`}
            onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.profession} >
            {professions.map((profession, index) => (
              <option value={profession} key={index}>{profession}</option>
            ))}
          </select>
          {formik.touched.profession && formik.errors.profession && (
            <span className='text-red-400'>{formik.errors.profession}</span>
          )}
        </div>
        <div className='mb-4'>
          <label for="age">Age</label>
          <input type="number" name="age" id="age"
            className={`block w-full rounded border py-1 px-2 ${formik.touched.age && formik.errors.age ? 'border-red-400' : 'border-gray-300'}`}
            onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.age} />
          {formik.touched.age && formik.errors.age && (
            <span className='text-red-400'>{formik.errors.age}</span>
          )}
        </div>
        <div className='text-center'>
          <button className='bg-blue-500 rounded p-3 text-white' type='submit'>Submit</button>
        </div>
      </form>
    </div>
  );

Notice how you used all the properties in the formik variable mentioned earlier.

Test it Out

The form is now created and ready to be used, even if there's no validation yet.

To test it out, run the server using the following command:

npm start

You can then open the website at localhost:3000 (default port). If you open the website, you'll see the form with 4 fields.

You can try and fill out the form. As currently there's no validation, you can fill out (or not) values as you want and click Submit. An alert will show with the values you entered.

Add Validation with Yup

In this section, you'll add validation to the form using Yup.

First, you need to install Yup. Run the following in your terminal:

npm i yup

Yup has a lot of methods and validation rules you can use. The way it works with Formik is you need to create a validation schema and pass it to useFormik as a value to the property validationSchema.

Yup validation schemas are created using Yup.object method which takes as a parameter an object. This object has the field names as properties and their values are validation rules from the Yup library.

Import Yup at the beginning of src/App.js:

import * as Yup from 'yup';

Then, add the property validationSchema to the object passed to useFormik with the following value:

const formik = useFormik({
    ...,
    validationSchema: Yup.object({
      name: Yup.string()
              .label('Full Name')
              .required(),
      email: Yup.string()
              .email()
              .required(),
      profession: Yup.string()
                  .oneOf(professions, 'The profession you chose does not exist'),
      age: Yup.number()
            .min(15, 'You need to be older than 15 to register')
            .required()
    })
  })

You add the following validation rules:

1. name: Should be a string and is required. You also use the label method to ensure that when the error message is shown it refers to the field as "Full Name". By default, the fields are referred to by the field name, which in this case is name.
2. email: Should be a string, an email, and required.
3. profession: Should be a string and one of the values in the professions array. You also pass a message as a second parameter to oneOf which will be the message that shows in case there's an error. It's also required.
4. age: Should be a number and at least 15. If the age is less than 15, the message "You need to be older than 15 to register" will show. It's also required.

Test it Out

Let's test it out. Run the server again if it's not running and open the website. If you enter values now that don't comply with the rules you set in the validation schema, an error will show in red and you won't be able to submit the form before resolving the errors.

If you all values are valid, then the form will be submitted and an alert will show.

Custom Validation Rules

Although Yup has helpful validation rules that you can use with most common cases, a lot of times you might need a custom validation rule. You can use the test function to add a custom rule.

In this section, you'll add a rule to make sure that the name field has both first and last name.

Change the name property inside the validationSchema to the following:

const formik = useFormik({
    ...,
    validationSchema: Yup.object({
      name: Yup.string()
              .label('Full Name')
              .required()
              .test('is-full-name', 'Please enter both your first and last name', function (value) {
                const nameArr = value.split(" ");
                return nameArr.length >= 2;
              }),
      ...
    })
  })

The first parameter is the name of the custom rule. The second parameter is the message to show in case the field is invalid.

The third parameter is the function that determines whether the field is valid or not. It should return a boolean value. If the value is true, then the field is valid. Otherwise, it's invalid.

You validate the name field to contain both first and last names by just splitting it  on the space delimiter which will return an array. You then check the array length. If it's at least 2, then the field is valid. Otherwise it's invalid.

Test it Out

Run the server again now and go to the website. If you enter one word in the Full Name field you'll see an error.

You'll need to enter at least two words for the field to be valid.

Conclusion

In this tutorial you learned how to use Formik and Yup in React. You can use these two libraries to create forms, validate them, and handle their submission. Using these two libraries makes creating forms in React easier and less stressful.

For the past 5 years, I've been working as a full-stack developer, both full-time and freelance. I learned a lot through it and have become better with time.

A year ago I started technical writing. I wrote articles, tutorials, and documentation for my own blog as well as other websites, agencies, and clients. It became a hobby of mine that I really enjoyed.

Today, I start my new job as a Technical Writer at Medusa. This decision wasn't an easy one and it took me a while to finally make the transition.

In this article, I share with you how I first started technical writing, and why am I transitioning into full-time technical writing.

How it Started

I've always loved writing in general. For a long time, I debated whether I should create a blog or not. Although I have my fair share of experience as a developer, I still considered myself an average developer. So, I didn't think anyone would be interested to read my content or that I had anything helpful to share.

I finally decided to create my own blog in December 2020. It wasn't because I suddenly gained the motivation or courage. It was mostly a "even if I fail and no one reads my content, what could go wrong?" kind of decision. I tried a different kind of content. Some got a lot of attention from other developers, others not so much. However, the best part about it all was receiving feedback, even from one person, saying that this article or tutorial helped them understand or learn something better.

Then, at the end of March 2021, I learned that you can actually get paid to write for other websites! It may seem like common knowledge to a lot of people, but to me it was news. I didn't know whether my content was good enough or not, but I decided to apply anyway. I applied to a lot of websites and agencies, and that's what really kickstarted my technical writing journey.

In the past year, I was able to write for a lot of websites and agencies like SitePoint, Draft.dev, LogRocket, and more. I was also able to work with my own clients, which was how I started my journey with Medusa.

Even though I really loved technical writing, it took a lot of thinking and consideration to finally embark on this journey and become a full-time technical writer.

Why I Made the Transition

Learn More

As I mentioned earlier I learned a lot from being a developer. However, when you are a developer a lot of time, especially if you work for a company that creates websites for other companies rather than having its own product, you end up prioritizing delivering features rather than the quality of the code or architecture. It becomes a "let's just get this over with" sort of mentality.

When I started technical writing, however, I became more curious. I started thinking "ok, but how does this thing work?" I also began diving more deeply into topics rather than learning surface-level details.

Even if you're not interested in writing, I recommend that you take the time to write about things as you learn them. It'll help you truly understand what you're learning instead of just applying.

Help Beginners

My main focus when writing is making sure that my content is easily understandable by beginners. Whether it's beginners to programming in general or to a certain tool, framework, or programming language.

I like to simplify my content, whether in the words I use or the approach I take. The first tutorial or guide a beginner finds while learning something can be a make-it or break-it sort of thing. If it's too complicated or doesn't give the reader a real understanding of what they're doing, it's a waste of their time.

Closer to the Community

I'm an introverted person. I've always struggled with communicating with people in general. This has also stopped me from becoming closer to the tech community in the past years.

Ever since I started sharing my content across platforms, it helped me meet new people, learn from people's feedback, and have more love and support for the community. And going back to the previous point, it made me want to make more (hopefully helpful) content for those in the community who do not necessarily have access to paid resources.

Build the Foundation

This is specific to my work at Medusa. As Medusa is a fairly new platform, we are still lacking in terms of technical content and documentation. We are going to be building the documentation from the ground up to ensure that it's easy to understand by anyone who wishes to use and learn about the platform.

As I believe that Medusa will become more and more successful in the upcoming years, I'm excited to be part of the team working on the foundation of the documentation of a platform that will hopefully grow with time.

Also, as an open-source platform that appreciates and works closely with its community, Medusa's values align well with why I love writing and want to keep doing it.

Conclusion

This is a personal post that maybe not many will read or be interested in. But this is a very important one for me. After a long time of struggling to find my footing in my career, I've finally reached a point where I understand what I want and have the opportunity to get there.

If you're reading this and you're still confused about what direction you want to go in, give yourself some time and experiment with different projects. As cheesy as it sounds, with hard work and dedication you'll get there sooner or later.

NPM (stands for Node Package Manager) is widely used by web developers to install and manage a variety of JavaScript libraries. It's a necessity for more websites nowadays. It comes installed with Node.js by default.

However, you've probably seen a lot of libraries or frameworks instructing you to use NPX when installing their packages. React even has a warning that clarifies for developers that using NPX is not a typo.

NPX is a package runner that allows you to run CLI tools or executables hosted on NPM without the need to install them with NPM first.

For example, previously you'd need to install create-react-app globally on your system, then run create-react-app my-website.

Ever since NPM v5.2, there's no need to install create-react-app globally (and it's recommended that you don't). You can simply run npx create-react-app my-website and the same script will run to create your React app.

In this tutorial, you'll learn how you can create your own NPX tool. The tool you'll create through this tutorial is pretty simple – it'll only multiply 2 or more numbers. You'll also learn how you can use your tool locally and how you can publish it on the NPM registry for others to use.

Prerequisites

This is pretty obvious, but you need Node.js installed to go through this tutorial. Installing Node.js will install in turn NPM and NPX.

Project Setup

Create a new directory that will hold your tool:

mkdir multiply-tool

Next, initialize your project with NPM:

npm init

You'll be asked a few questions about the package such as package name and author name. After you fill them out, a package.json file will be created in the current directory.

Create the Bin File

When you create a CLI tool or an executable file, you need to create a file and include it in your package.json under the bin field.

Create the directory bin and inside that directory create the file index.js with the following content:

#! /usr/bin/env node
console.log("Hello, World!");

All this file will do (for now) is print "Hello, World!" to your command line or terminal. However, the important thing to note here is the following line:

#! /usr/bin/env node

This line should be added to all files that will be executed through the command line. It's called a Shebang, and basically, it specifies what interpreter the file should be passed to for execution in Unix-like systems.

Next, in package.json add the new field bin:

"bin": {
	"multiply": "bin/index.js"
},

This means that when the user runs npx <package_name> the script bin/index.js will run.

Test it Locally

To test it locally, first, install the package globally in your system:

npm i -g

You should run this command inside the directory that holds your package.

Then, in your terminal, run the following command to run your NPX tool:

npx multiply

Here, multiply is the name of the package. If you named your package something else be sure to put the name of the package.

When you run the command, you'll see "Hello, World!" printed in your terminal.

Using Arguments

In this section, you'll implement the functionality of the multiply package. This package should accept at least two arguments (if the arguments are less than 2, the user will get an error). Then, it will multiply all the arguments. If the result is NaN it means that at least one argument is not a number and the user will see an error in that case as well.

Replace the content of bin/index.js with the following:

#! /usr/bin/env node
const args = process.argv.slice(2);
if (args.length < 2) {
  console.error('Please enter at least 2 numbers');
  process.exit(1); //an error occurred
}

const total = args.reduce((previous, current) => parseFloat(current) * parseFloat(previous));

if (isNaN(total)) {
  console.error('One or more arguments are not numbers');
  process.exit(1); //an error occurred
}

console.log(total);
process.exit(0); //no errors occurred

A few things to note:

1. process.argv is used to retrieve the command line arguments. The first 2 arguments will be the interpreter running this script (which is Node in this case), and the second argument is the name of the package (which is multiply in this case). Any other arguments passed will be available starting from index 2. So, to get the arguments passed by the user you need to slice the array process.argv and get the elements starting from the index 2.
2. When an error occurs, you can use process.exit(1) to indicate that. If process.exit receives a value other than 0 it means that an error occurred in the CLI tool.
3. The reduce array function is used to multiply all items in the array one by one.
4. If the final result of total is NaN, the user will get an error.
5. If everything is successful, the result will be printed out and the process will exit with 0 indicating that the process ended successfully.

Let's test it out. Run the command again in your terminal passing it 2 numbers:

npx multiply 3 15

You will see the result of the multiplication in your terminal.

You can also try adding more than 2 numbers and you'll see the result. To see how the error messages work, try entering less than 2 numbers or entering strings instead of numbers.

Publishing the Package

Now that your tool is ready, you can publish it on NPM. This step requires an NPM account, so if you don't have one make sure to create one.

Then, in your terminal, run the following command to log in using your NPM account:

npm login

You'll be prompted to enter your username and password. If all is correct, you'll be logged in and you can then publish your tool.

To publish your tool, simply run:

npm publish

Note: If you're using a GitHub repository for your project make sure to commit everything before running this command.

This will publish your tool into the NPM registry. Please note that if another package is created with the same name you'll need to change the name of your package in package.json then try publishing again.

Use Your Published Package

To use your published package, you can run the same command you used earlier when running your local command:

npx <package_name>

Notice how you don't need to install your package globally in this case. You can just run it through NPX.

In my case, I had to rename my package to multiply-tool since multiply already existed in the NPM registry. Then, I ran the following command:

npx multiply-tool 3 15

And received the result of the multiplication:

Update Your Package

To update your package, you can use the following command:

npm version <type>

Where <type> determines how to increment the version. It can be one of the following values:

1. patch: This will increment the last number in your version and it usually means a small change. For example, it would change the version from 1.0.0 to 1.0.1.
2. minor: This will increment the second number in your version and it usually means a minor change that doesn't necessarily affect how the user uses this tool. For example, it would change the version from 1.0.0 to 1.1.0.
3. major: This will increment the first number in your version it usually means that a big change happened that can affect how this tool is used. For example, it would change the version from 1.0.0 to 2.0.0.

After running the above command run the publish command again:

npm publish

And your tool will be updated.

Conclusion

In this tutorial, you learned how to create a tool that can be run with NPX directly without the need to install it globally. You also learned how to publish the tool and update it.

This tool is a simple tool, however, for more complex tools you can use helper libraries like commander and chalk.

Recently, I decided that I will start learning Python. I'm already familiar with the language, what can be done with it, and some of the syntaxes as well. However, I never took the time to properly learn it and create projects with it.

But why am I writing about it? Ever since I created my blog and started writing I've noticed how much writing has helped me learn more. When I write about something, I commit to completely understanding it and taking a deeper dive into it.

In this article, and (hopefully) the following ones as well, I'll share what I learned in Python within a week. Not only will this help me learn better, but I might learn from the readers as well if they point out anything wrong with what I've learned. This could help others who are interested in learning Python follow along this journey with me.

Quick Note

The learning progress of every person is different. What I learn within a week may be more or less than what you'd learn in a week. That's fine for both of us.

Also, I already have knowledge and experience in a lot of other programming languages, so in most of these articles I'll be pointing out things that might be new to me or different than other languages.

Where I Started

I wanted to find a good place to start learning Python starting from the basics. I didn't want to just find a tutorial and start programming. I wanted to take the time to learn more about it.

After looking through different websites and python courses online that could help, I decided to learn from learpython.org. The topics seem to be divided up pretty well and each chapter had examples and an exercise at the end.

Up until the time I'm writing this I've finished until Generators.

What I Learned

Indentation

In all programming languages I've used, code blocks are usually wrapped with curly braces { and }. For example, this in JavaScript:

if (x > 1) {
    console.log("x is not 0");
}

However, in Python, all code blocks are represented by just an indentation. So, if i were to write that same code block in Python it would be:

if x > 1:
	print("x is not 0")

Simultaneous Assignment

The naming for this might be incorrect but that's what I'm calling it for now.

In Python, you can assign multiple variables simultaneously like this:

a,b = 1,2

This line of code will set a to 1 and b to 2.

Operators

There are many operators that are common between Python and other languages. However, there were some that I haven't seen in other languages I know.

You can use ** to make a power relationship:

a = 2 ** 3 //8

You can use the multiply operator * on strings to repeat them n times:

a = "hello" * 3 //hellohellohello

You can also use the multiply operator * on lists (which are basically arrays in Python) to repeat them as well:

a = [1,2,3] * 3 // [1,2,3,1,2,3,1,2,3]

String Formatting

To format strings and add variables inside strings, you can use the % operator in the string followed by a letter depending on the type of the variable you're inserting in the string.

For example:

print("I am %d years old" % age)

%d is used for integers, %s for strings, %f for float numbers, and %.nf is a float number with n places following the decimal.

Slicing Strings

The brackets [] are usually used with Arrays to refer to an item at a certain index. It's also used in some languages to access a character at a certain index in a string.

However, in Python, you can also use the brackets [] with strings to take substrings of them. If you use the notation [n:m] it will take a slice of the string starting from the index n till the index m.

For example:

x = "My name is Shahed"
print(x[3:10]) //name is

You can also use the notation [n:m:x], where x is the number of steps to take when moving from index n till index m. When you use the notation [n:m] it sets x to 1 by default. x can also be a negative value if you want to slice the string in reverse.

Boolean Operators

Most languages use && to specify an "and" condition, and || to specify an "or" condition.

In Python, you use and for "and" and or for "or". This is part of what makes Python human-readable.

For example:

if x == 2 and y == 3:
	print("x is 2 and y is 3")

Other operators are in to check if an item is in an iterable object like a list, is to check if 2 variables match in both value and reference, and not to negate a boolean expression.

Else in Loops

else is usually used with if conditions, where you perform an action if the condition is not true.

In Python, else can be used with loops to perform an action when the condition of the loop fails.

For example:

for i in range(1,5):
	print("i is less than 5")
else:
	print("i is greater than 5")

If you use break inside the loop, then the else block won't be executed. If you use continue inside the loop, the else block will be executed.

init Function in Classes

In Python, the function __init__ in a class is the function that is first called when the class is created. It's the equivalent of the constructor function in other languages.

Modules

Each Python file that you create can be used as a module in other Python files. This allows you to use the functions or variables that are in that module.

To import a module:

import user

Where user is a file in the same directory with the name user.py

You can then access functions in that module using the . notation:

user.create()

Alternatively, you can import the function directly:

from user import create

You can also import all objects in the module:

from user import *

You can then use the objects directly:

create()

In addition, you can import modules with aliases:

import user as my_user

Packages

Packages are directories that hold other packages and modules. Each package should include the file __init__.py, even if it's empty. It's used to indicate that the current directory is a package.

Modules can be imported from inside that package. For example, if you create the directory blog and it has the user module inside it, you can import it like this:

import blog.user

Or alternatively:

from blog import user

By default, all modules inside a package can be imported. You can specify which modules can be accessed in a package by assigning the __all__ variable in __init__:

__all__ = ["user"]

Numpy Arrays

Numpy arrays are like lists, but they are more fast and efficient. Using Numpy arrays you can easily perform a lot of tedious tasks.

For example, you can perform operations on all elements in a Numpy array:

np_array = np.array([1,2,3])

np_array = np_array * 2 //[2,4,6]

You can also use [] to take a subset of items in the Numpy array. For example:

np_array = np.array([1,2,3])

np_array[np_array > 1] //[2,3]

Where np_array > 1 will return a new Numpy array but instead of the original values it will be either True or False based on whether each element satisfies the condition or not. If you then pass it as an index to np_array it will return a Numpy array with only the elements that test true for that condition.

Pandas DataFrame

DataFrames in Pandas allow you to store data in a table-like structure where there are columns and rows.

DataFrames can be created from dictionaries. They can also be created from CSV files.

You can access the data using a column name as an index:

dataframe["name"]

This will return the data as a Pandas Series. You can use double brackets to have it be returned as a DataFrame:

dataframe[["name"]]

You can also return multiple columns or indices:

dataframe[["name", "age"]]

Another way of getting a set of data from the DataFrame is using loc and iloc, where loc accesses the data using a label index, while iloc accesses the data using a numeric index. It's helpful if you have a specific row and column to access.

Generators

Generators are used to implement iterators. They are functions that use the keyword yield to return an iterable set of items.

When you run an iteration over the generator function, the generator starts. Everytime the yield keyword is reached, the value is returned as the value for the current iteration.

For example:

def age():
	for i in range(5):
    	yield "I am %d years old" % i

for str in age():
	print(str)

This will print:

I am 0 years old
I am 1 years old
I am 2 years old
I am 3 years old
I am 4 years old

Where Next?

There are still more chapters to go through in learnpython.org, however, I think I want to practice solving some problems as well.

A platform that I found good reviews for among Python learners and developers is CheckiO. So, I'll probably start learning through this platform while also continuing on with some of the other chapters.

If you have any ideas of how I should continue in my journey of learning Python or find anything wrong with this article, please let me know!

Almost a year ago, I wrote about how I created a CLI tool to cross-post articles to Dev.to, Hashnode, and Medium. I created the tool because it made the process easier for me, but I also received a lot of feedback from other writers about how it was helpful for them.

Since then, I haven't been able to maintain it much due to my busy schedule. Now, I'm taking more time to commit to it and improve it with the help of the community.

On Monday, the 28th of February, I pushed out a new release of cross-post-blog with the version 1.3.0. I'll be sharing some of the features and fixes it includes. You can also check out the GitHub repository for more information about the library.

If you're reading this article on Dev.to, Hashnode, or Medium, then it is reposted from my own blog using the Cross-Post CLI tool!

Posting From Local Files

Based on demand from some of the developers using this library, I've now added the ability to post directly from a local file instead of a public URL. To do that, you simply need to add the -l or --local option to your command.

For example:

cross-post run /path/to/test.md -l

This will post a local file test.md to all of the platforms.

You can also use it with all of the options you previously used.

Changed Markdown Converter

Each of the platforms requires you to send the content of your article to post in Markdown format. So, when you pass a URL to the command, the content of the article on that page is converted to Markdown before submitting it to the platform you want to post on.

I previously was using node-html-markdown. It worked fine in terms of functionality. However, there were some issues related to how it parsed code blocks.

The new version is now using turndown instead, which does a better job of parsing code blocks. Your articles should now be posted to the different platforms almost exactly as you have it posted on your own blog.

Added Title Selector

Previously, you could set a default article and image selectors in the configuration. You could also override those configurations in the run command.

N0w, you can also set the default title selector in your configuration:

cross-post config titleConfig

Or, pass it as an option -ts or --title-selector to the run command:

cross-post run <url> -ts .post-full-title

Upcoming Features

I'll be working from now on to improve the tool and add new features, either from the request of developers using this tool or from my own experience using it. For example, a feature that has been requested is the ability to update posts.

I'm also going to look into adding new platforms to enable posting to. If you have any platform in mind that you think would be good to add please do let me know!

How to Install or Update

If you want to install and start using Cross-Post or update your version you can install it with NPM:

npm i -g cross-post-blog

Please check the README for more information on installing and using this tool.

Contribution

At the moment, there's no contribution guideline added in the repository (I'm working on that). However, if you would like to contribute to any of the existing issues or add new features, then please don't hesitate!

Node.js can be used to build a variety of apps and websites. It's most popularly used with Express to create a server for your websites and apps.

In this tutorial, you'll learn how you can read and write CSV files using Node.js and Express. You can find the full code for this tutorial in this GitHub Repository.

Project Setup

You'll start by setting up the server with NPM.

Run the following command to create a new directory and initialize the project with NPM:

mkdir node-csv
npm init -y

Then, you need to install the dependencies needed for the project:

npm i express body-parser nodemon

This will install express to create a server, body-parser to parse the body of the requests, and nodemon to make sure that the server restarts whenever there are new changes in the files.

After that, create index.js with the following content:

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = 3000

app.use(bodyParser.json())
app.use(express.static('public'))

app.listen(port, () => {
  console.log(`App listening on port ${port}`)
})

This will initialize your server.

Finally, add the start script command in package.json:

"scripts": {
    "start": "nodemon index.js"
},

Now, you can start the server by running the following command:

npm start

This will start the server on localhost:3000.

Write CSV Files

The first part of this tutorial will go over how you can write CSV files.

For this, you'll use the CSV Stringify library that takes a set of data and turns it into a string in the CSV format. You can then use the string to write a CSV file.

In this tutorial, you'll create a page where the user can dynamically create a table to be transformed into a CSV file that they can download.

Start by installing the necessary dependency for this functionality:

npm i csv-stringify

Create the file public/create.html with the following content:

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
  <title>Create CSV</title>
</head>
<body>
  <div class="container py-4">
    <h1>Create CSV</h1>
    <h2>Add Columns</h2>
    <input type="text" name="column" id="columnName" class="form-control" placeholder="Column Name" />
    <button class="btn btn-primary mt-1" id="addColumn">Add</button>
    <h2 class="mt-3">Column Data</h2>
    <button class="btn btn-primary mb-3" id="addRow">Add Row</button>
    <div id="csvTable"></div>
    <button class="btn btn-primary mt-3" id="submitForm">Create CSV</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
  <script>
    const columnNameInput = document.getElementById('columnName');
    const addColumnButton = document.getElementById('addColumn');
    const addRowButton = document.getElementById('addRow');
    const submitFormButton = document.getElementById('submitForm');

    const table = new Tabulator("#csvTable", {
      height:"300px",
      data: [], //assign data to table
      movableColumns: true, 
      addRowPos: "bottom",
    });

    addColumnButton.addEventListener('click', () => {
      const name = columnNameInput.value ? columnNameInput.value.trim() : '';
      if (!name) {
        alert("Please add a name");
        return;
      }

      table.addColumn({title: name, field: name.toLowerCase(), editableTitle: true, editor: true});
      columnNameInput.value = '';
    });

    addRowButton.addEventListener('click', () => {
      table.addRow({});
    });

    submitFormButton.addEventListener('click', () => {
      const data = table.getData();

      fetch('/create', {
        method: 'POST',
        body: JSON.stringify({
          data
        }),
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then((response) => response.blob())
      .then((blob) => {
        const fileURL = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = fileURL
        a.download = "file.csv"
        a.click()
      })
      .catch((e) => {
        console.error(e)
        alert(e.message)
      })
    })
  </script>
</body>
</html>