Tech Career Roadmap: Guiding Your Growth in Tech Careers

How to Integrate Sender with a React Form to Collect and Deliver Emails for Free

How to use Inline CSS Variable in Html

Why Choose Next.js for Your Next Web Development Project in 2024

Resolving hydration mismatch errors in Next.js

Biome Adoption Guide: Overview, Examples, and Alternatives

Bulma CSS Adoption Guide: Overview, Examples, and Alternatives


Hey everyone, I've got something exciting to share—<sparklyText>Tech Career Roadmap</sparklyText>! It's a project close to my heart, aimed at helping anyone interested in tech careers find their path and thrive in the industry. So, buckle up and let's dive into what Tech Career Roadmap is all about!

## Tech Career Roadmap in a Nutshell

For those unfamiliar, [Tech Career Roadmap or Tech Roadmap](https://roadmaps.timonwa.com/) is all about providing free resources for anyone interested in tech careers. Whether you're looking to break into the industry or seeking guidance to level up your existing tech career, Tech Roadmap has got your back. From articles to videos, guides, and more, it's a one-stop hub to kickstart your journey and thrive in tech.

<infoCard title="Non-Coding Tech Careers" color="grey">
If you're curious about tech careers that don't involve coding, check out this
insightful article:{" "}

  <internalLink href="/blog/you-dont-need-to-write-code-to-become-a-tech-sisbro">
    21 tech jobs that don't require coding
  </internalLink>
  . It offers a comprehensive look at no-code or low-code roles in the tech industry, providing
  valuable insights for those exploring alternative career paths.
</infoCard>

## My Inspiration

Reflecting on my own journey, I have always had a strong desire to learn programming since a young age. However, it wasn't until I came across a Data Science advertisement before the pandemic that I considered trying it.

At first, I unknowingly pursued frontend development on my own instead of data science without proper guidance, but I soon discovered the wide range of career opportunities available within the tech industry.

After receiving messages from others who were facing similar confusion, I decided to do something. This led me to create Tech Roadmap, a technical roadmap project that aims to demystify the tech industry and empower newcomers to find their niche.

## How It Works

Tech Career Roadmap functions as a roadmap (no pun intended!) for tech enthusiasts. Unsure of where to start? Dive into the careers page for insights into various tech job roles. Once you've got a grasp, venture into career-specific pages curated with resources tailored to each path, guiding you step-by-step towards success.

In the [Frontend Development](https://roadmaps.timonwa.com/careers/frontend) path, you'll find resources covering HTML, CSS, JavaScript, and popular frameworks like React, Vue, and Angular.

For those interested in [Backend Development](https://roadmaps.timonwa.com/careers/backend), the roadmap delves into languages such as Python, Java, and C#, along with frameworks like Express.js and Django.

While on the [Technical Writing](https://roadmaps.timonwa.com/careers/technicalwriting) path, you'll discover resources for honing your writing skills, understanding technical documentation, and more. (Although, it is still a work in progress.)

We are also working on creating readmes for each technical roadmap on GitHub, which will make it easier for users to access and explore the resources.

As we continue to grow and evolve, we plan to add more paths. So stay tuned for updates!

## The Tech Stack

Now, let's discuss the tech behind Tech Roadmap. I am using [Next.js](https://nextjs.org/) and [styled-components](https://styled-components.com/) for a smoother development experience. The code is hosted on [GitHub](https://github.com/Timonwa/techroadmap), and the site is deployed via [Vercel](https://vercel.com/) for a seamless setup. I also use [Google](https://capitaloneshopping.com/s/store.google.com/coupon) Icons to enhance the website's visual appeal.

## Conclusion

Building Tech Career Roadmap has been an incredible journey, and I'm thrilled to see it evolve. My goal remains unchanged: to empower individuals transitioning into tech, one resource link at a time.

So, if you're looking to explore tech careers, level up your skills, or simply seeking guidance, Tech Roadmap is here to guide you. Dive in, explore the paths, and embark on your tech journey with confidence.

Till next time, happy coding! 🚀

<byeBye />

## Explore More

Discover more insights and tutorials on my blog:

- Discover the importance of [Open Source Contributions](/blog/embarking-on-your-open-source-adventure) and how they can boost your tech career.
- Learn about [21 No-Code Tech Jobs](/blog/you-dont-need-to-write-code-to-become-a-tech-sisbro) to kickstart your career in tech without coding.
- Check out [41 Job Titles in Tech](https://skillcrush.com/blog/41-tech-job-titles/) to find the right role for you in the tech industry.

## Useful Links

- Website - [Tech Career Roadmap](https://roadmaps.timonwa.com/)
- GitHub - [Tech Career Roadmap](https://github.com/Timonwa/techroadmap)
- Twitter - [@techroadmap\_\_](https://twitter.com/TechRoadmap__)
- [41 Job Titles in Tech](https://skillcrush.com/blog/41-tech-job-titles/) to discover more tech roles

<connectWithMe />


Exploring Catalyst, Tailwind's UI kit for React


Setting up a subscription form on your website is a great way to collect emails from your visitors. You can then use these emails to send them newsletters, updates, and other important information about your website. And one of the best ways to do this is by using [Sender](https://www.sender.net?ref=timonwa).

Sender is a powerful email marketing tool that allows you to create and send beautiful emails to your subscribers. With its easy-to-understand API documentation, you can easily integrate it with your website to [collect and deliver emails](https://www.linkedin.com/pulse/top-5-reasons-why-you-need-collect-more-email-addresses-jason-bach/) using plain JavaScript or a JavaScript framework like React, Vue, or Angular.

This article will show you how to integrate Sender with React for free to collect and deliver emails. You can apply these steps to any JavaScript framework, not just React. You can use the same steps to integrate Sender with Vue, Angular, or any other JavaScript framework. Let's get started.

<infoCard
  title="Sender integrates seamlessly with any JavaScript framework."
  color="grey"
>
  Follow these steps to integrate Sender with React, plain HTML/JavaScript
  forms, or any JavaScript framework like Vue and Angular. The process is
  flexible and applies seamlessly across different frameworks.
</infoCard>

## What is Sender?

Sender is an [email marketing](https://neilpatel.com/blog/beginners-guide-email-marketing/) tool that allows you to create and send beautiful emails to your subscribers. You can use it to collect emails from your website visitors, create and send automated email campaigns like newsletters and updates, track the performance of your emails, and more.

Its generous free tier offers up to 2500 subscribers and 15,000 emails per month, making it an excellent option for small businesses, bloggers, and anyone who wants to connect with their audience through email. Its user-friendly drag-and-drop editor makes it easy to create stunning emails.

## Prerequisites

Before you get started, you'll need a Sender account. If you don't have one, you can sign up for free at [Sender](https://www.sender.net?ref=timonwa). You'll also need a basic understanding of React and JavaScript. If you're new to React, check out the [official React documentation](https://react.dev/learn) to get started.

<advertCard2 />

## How to integrate Sender with a React form

### Step 1: Create a React project

If you do not have a React project yet, you can create a new one by running the following command in your terminal:

```bash
npx create-react-app sender-react-integration
```

This will create a new directory called `sender-react-integration` and create a new React project inside it. Once the project is set up, open the project directory in your code editor and create a new file called `SubscriptionForm.js` inside the `src` directory. This file will contain the subscription form you'll use to collect emails from your visitors.

_Note: You can find the complete code for this article on [GitHub](https://github.com/Timonwa/sender-react-integration). If you already have a React project, you can skip this step and use your existing project._

### Step 2: Create an API access token in Sender

To connect your React app with Sender, you must create an [API access token](https://getstream.io/glossary/api-token/) in Sender. To do this, log in to your Sender account and go to your "Settings". Click the "API access tokens" tab and then the "Create API token" button. A prompt will be displayed to choose how long the token is valid. Choose the duration that best suits your needs and click the "Create" button.

<figure>
  <img
    src="https://res.cloudinary.com/timonwa-s-notes/image/upload/v1708863516/Article%20Images/Timonwa%27s%20Notes/sender-react/sender-api-token_djfsmh.png"
    alt="Create API token in Sender"
  />
  <figcaption>Create API token in Sender dashboard</figcaption>
</figure>

After creating the token, you will be given an API key. Copy this key, as you will need it later to connect your form with Sender.

### Step 3: Create a subscription form

Now that you have created your React project and API access token, you can make a subscription form to collect emails from your visitors. You can use the following code as a starting point:

```jsx
// src/SubscriptionForm.js
import React, { useState } from "react";

const SubscriptionForm = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [firstname, setFirstname] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Send the email to Sender
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Subscribe to my newsletter</h1>
      <label htmlFor="first_name">First name:</label>
      <input
        type="first_name"
        value={firstname}
        onChange={(e) => setFirstname(e.target.value)}
        placeholder="Your first name"
      />
      <label htmlFor="email">Email:</label>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? "Subscribing..." : "Subscribe"}
      </button>
    </form>
  );
};

export default SubscriptionForm;
```

```css
form {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: 20px auto;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.5em;
}

label {
  margin-bottom: 5px;
  font-size: 0.8em;
}

input {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}
```

<subscribe />

This code creates a simple subscription form with fields for the user's first name and email address. When the form is submitted, it calls the `handleSubmit` function, which is responsible for sending the email to the Sender.

### Step 4: Send the form data to Sender

To send the form data to Sender, you must make a POST request to the Sender API. You can use the `fetch` function to do this. Here's an example of how you can send the data to Sender:

```jsx
const handleSubscribe = async () => {
  try {
    const url = "https://api.sender.net/v2/subscribers";
    const apiKey = "YOUR_API_KEY"; // Replace with your API key

    const data = {
      email: email,
      firstname: firstname,
      groups: ["group_id"], // Replace with your group ID(s)
      trigger_automation: false,
    };

    const headers = {
      Authorization: `Bearer ${apiKey}`,
      "Content-Type": "application/json",
      Accept: "application/json",
    };

    const response = await fetch(url, {
      method: "POST",
      headers,
      body: JSON.stringify(data),
    });

    if (response.status === 200) {
      alert("You have successfully subscribed to my newsletter.");
    } else {
      alert("Failed to subscribe. Please try again.");
    }
  } catch (error) {
    console.error("Error:", error);
  } finally {
    setIsLoading(false);
  }
};

const handleSubmit = (e) => {
  e.preventDefault();
  setIsLoading(true);
  handleSubscribe();
};
```

In this code, we're making a POST request to the Sender API with the user's email and first name. We're also passing in the group ID(s) to which the user should be added. You'll need to replace `YOUR_API_KEY` with the API key you got from Sender and `group_id` with the ID of the group(s) you want to add the user to.

A **group ID** is a unique identifier for a group of subscribers in Sender or any other email marketing tool. You can use group IDs to organize your subscribers and send targeted emails to specific groups. You can find the group ID by visiting the "Subscribers" page Sender account and clicking the "Groups" tab. Click on the group you want to add the user to, and you'll see the group ID in the top left of the page, below the group name.

<figure>
  <img
    src="https://res.cloudinary.com/timonwa-s-notes/image/upload/v1708863516/Article%20Images/Timonwa%27s%20Notes/sender-react/sender-group-id_uuavid.png"
    alt="Group ID in Sender"
  />
  <figcaption>Group ID in Sender</figcaption>
</figure>

I have also set the `trigger_automation` to `false` in this example. But by default, it is set to `true`. This means that when a user subscribes, it will trigger an automation in Sender.

An email automation is a series of emails sent automatically to the user based on certain conditions. For example, you could [set up an automation in Sender](https://help.sender.net/knowledgebase/how-to-create-a-welcome-series-automation-inside-sender/) to send a welcome email to new subscribers.

There are other options you can pass to the `data` object. More information about the options is in the [Sender API documentation](https://api.sender.net/#introduction/). (Their API documentation is very detailed and easy to understand.)

### Step 5: Test the subscription form

Now that you've set up the subscription form and the code to send the data to Sender, you can test it.

Start your React app by running the following command in your terminal:

```bash
npm start
```

This will start your React app and open it in your default web browser. You should see the subscription form on the page. Enter your first name and email address, and click the "Subscribe" button. If everything is set up correctly, you should see an alert saying that you have successfully subscribed to the newsletter.

<video width="100%" controls autoplay loop>
  <source
    src="https://res.cloudinary.com/timonwa-s-notes/video/upload/v1708885865/Article%20Images/Timonwa%27s%20Notes/sender-react/ice_video_20240225-121804_liqr4i.mp4"
    type="video/mp4"
  />
</video>
<figcaption>Sending subscription form data to Sender</figcaption>

<figure>
  <img
    src="https://res.cloudinary.com/timonwa-s-notes/image/upload/v1708863516/Article%20Images/Timonwa%27s%20Notes/sender-react/sender-group-id_uuavid.png"
    alt="Sender subscription list showing subscribers"
  />
  <figcaption>Sender subscription list showing subscribers</figcaption>
</figure>

## Conclusion

Sender is an excellent tool for collecting and delivering emails. Its generous free tier makes it a fantastic option for small businesses, bloggers, and anyone else who wants to connect with their audience through email. Following this article's steps, you can seamlessly integrate Sender with React or any other JavaScript framework to collect and deliver emails for free. You can find the complete code for this article on [GitHub](https://github.com/Timonwa/sender-react-integration).

I hope you found this article helpful. If you have any questions or comments, feel free to contact me on [X](https://twitter.com/timonwa_) or [LinkedIn](https://www.linkedin.com/in/timonwa/). And if you'd like to learn more about Sender, you can check out their [official website](https://www.sender.net?ref=timonwa).

<connectWithMe />

## Useful Links

- [GitHub repository for this article](https://github.com/Timonwa/sender-react-integration)
- [Official Sender website](https://www.sender.net?ref=timonwa)
- [Official React documentation](https://react.dev)
- [Sender API documentation](https://api.sender.net/#introduction/)
- [How to create a welcome series automation inside Sender](https://help.sender.net/knowledgebase/how-to-create-a-welcome-series-automation-inside-sender/)
- [Top 5 reasons why you need to collect more email addresses](https://www.linkedin.com/pulse/top-5-reasons-why-you-need-collect-more-email-addresses-jason-bach/)
- [Beginner's guide to email marketing](https://neilpatel.com/blog/beginners-guide-email-marketing/)
- [What is an API token?](https://getstream.io/glossary/api-token/)

## Frequently Asked Questions

<details>
  <summary>
    1. How to send an email after a form is submitted using JavaScript?
  </summary>
  <p>
    You can send an email after submitting a form in JavaScript using email
    marketing tools like{" "}
    <a
      href="https://www.sender.net?ref=timonwai"
      target="_blank"
      rel="noopener"
    >
      Sender
    </a>{" "}
    ,{" "}
    <a href="https://get.brevo.com/3ffxlwm000bi" target="_blank" rel="noopener">
      Brevo
    </a>
    , or MailChimp. These services provide APIs that you can use to send emails from
    your JavaScript app. You can follow the steps in this article to integrate Sender
    with your JavaScript app and send emails after a form is submitted.
  </p>
</details>

<details>
  <summary>2. How do I create an email automation in Sender?</summary>
  <p>
    You can create an email automation in Sender by going to your Sender
    account, visiting the "Automation" page, and clicking on the "Create new
    workflow" button. You can then set up the conditions and actions for your
    automation, such as when to trigger the automation and what emails to send.
    You can find more information about creating automations in the{" "}
    <a href="https://help.sender.net/knowledgebase/how-to-create-a-welcome-series-automation-inside-sender/">
      Sender documentation
    </a>
    .
  </p>
</details>

<details>
  <summary>
    3. How do I create a contact form in React that sends emails?
  </summary>
  <p>
    You can create a contact form in React that sends emails using a service
    like{" "}
    <a
      href="https://www.sender.net?ref=timonwai"
      target="_blank"
      rel="noopener"
    >
      Sender
    </a>{" "}
    ,{" "}
    <a href="https://get.brevo.com/3ffxlwm000bi" target="_blank" rel="noopener">
      Brevo
    </a>
    , MailChimp, or SendGrid. These services provide APIs that you can use to send
    emails from your React app. You can follow the steps in this article to integrate
    Sender with your React app and create a contact form that sends emails.
  </p>
</details>

<details>
  <summary>4. Can I use Sender with Vue or Angular?</summary>
  <p>
    Yes, you can use Sender with Vue, Angular, or any other JavaScript
    framework. The steps in this article can be applied to any JavaScript
    framework, not just React. You can use the same steps to integrate Sender
    with Vue, Angular, or any other JavaScript framework. You can also use it
    with plain JavaScript.
  </p>
</details>

<details>
  <summary>5. What is an API access token?</summary>
  <p>
    An API access token is a unique identifier that allows you to connect your
    application with an API. It's like a password that your application uses to
    authenticate itself with the API. You can create an API access token in the
    settings of your Sender account.
  </p>
</details>

<details>
  <summary>6. How do I find my API key in Sender?</summary>
  <p>
    You can find your API key in the settings of your Sender account. Log in to
    your Sender account, go to your settings, and click on the API access tokens
    tab. You can then create a new API access token or view your existing
    tokens.
  </p>
</details>

<details>
  <summary>7. How do I create a contact form in react JS?</summary>
  <p>
    You can create a contact form in React by using the <faqCode>form</faqCode>{" "}
    element and the
    <faqCode>input</faqCode> element to create the form fields. You can then use
    the <faqCode>fetch</faqCode>
    function to send the form data to an API like the Sender API. You can follow
    the steps in this article to create a contact form that sends emails using
    the Sender API.
  </p>
</details>

<details>
  <summary>8. How do I send a form data URL?</summary>
  <p>
    You can send form data to a URL using JavaScript's <faqCode>fetch</faqCode>{" "}
    function. You can pass the form data as an object to the{" "}
    <faqCode>body</faqCode> property of the <faqCode>fetch</faqCode>
    function and the <faqCode>fetch</faqCode> function will send the data to the
    specified URL. You can follow the steps in this article to send form data to
    the Sender API using the <faqCode>fetch</faqCode> function.
  </p>
</details>



CSS variables, known as custom properties, are a handy tool for managing and reusing styles in web projects. Technically used in stylesheets, they can also be applied directly within HTML for more dynamic and flexible styling. If you're new to CSS variables, check out my article on <internalLink href="/blog/using-css-variables-like-a-pro">how to use CSS variables like a pro</internalLink>.

## Understanding Inline CSS

[Inline CSS](https://www.freecodecamp.org/news/inline-style-in-html/) is the process that involves adding CSS styles directly to an HTML element using the `style` attribute. Here's a simple example:

```html
<p style="color: red;">This is a paragraph.</p>
```

This technique comes in handy when you want to add [dynamic styling via JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information) or style a single element without affecting others, avoiding the need for a separate stylesheet.

## What are Inline CSS Variables?

Inline CSS variables are simply CSS variables used directly within the `style` attribute of an HTML element. This approach offers a dynamic and isolated method for styling.

### How to Use CSS Variables Inline

To apply CSS variables inline in HTML, set the `style` attribute of an HTML element directly. For instance:

```html
<div>
  <p>This is a paragraph.</p>
  <p style="--primary-color: goldenrod;">
    The is a paragraph styled using inline CSS variable.
  </p>
  <p style="--primary-color: lightgreen;">
    The is another paragraph styled using inline CSS variable.
  </p>
</div>
```

```css
p {
  color: var(--primary-color);
}
```

<iframe
  height="400"
  style={{ width: "100%", minHeight: "400px", height: "400px" }}
  scrolling="no"
  title="How to use inline CSS variable in Html"
  src="https://codepen.io/timonwa/embed/mdgPQvW?default-tab=result&editable=true"
  frameBorder="no"
  loading="lazy"
  allowTransparency="true"
  allowFullScreen="true"
>
  See the Pen{" "}
  <a href="https://codepen.io/timonwa/pen/mdgPQvW">
    How to use inline CSS variable in Html
  </a>{" "}
  by Timonwa (<a href="https://codepen.io/timonwa">@timonwa</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

<figcaption>
  View demo on CodePen:
  <a href="https://codepen.io/timonwa/pen/mdgPQvW">
    https://codepen.io/timonwa/pen/mdgPQvW
  </a>
</figcaption>

In this demo, the `style` attribute of the second `<p>` element sets the `--primary-color` variable to `goldenrod`. The CSS variable is then used to style the text color of the paragraph.

<advertCard2 />

## Why Use CSS Variables Inline?

Although CSS variables are typically used in stylesheets, integrating them inline in HTML offers several advantages:

1. **Dynamic Styling:**
   Imagine you have a weather app that displays temperature with color-coded indicators. You can use inline CSS variables to dynamically adjust the background color of a temperature display based on the temperature range:

   ```html
   <div class="temperature" style="--bg-color: var(--cold);">10°C</div>
   ```

   ```js
   <script>
     const temperatureElement = document.querySelector(".temperature");
     const temperature = 10;

     if (temperature < 0) {
       temperatureElement.style.setProperty("--bg-color", "var(--freezing)");
     } else if (temperature > 30) {
       temperatureElement.style.setProperty("--bg-color", "var(--hot)");
     } else {
       temperatureElement.style.setProperty("--bg-color", "var(--moderate)");
     }
   </script>
   ```

   Here, the `--bg-color` variable dynamically represents the temperature's severity
   level.

2. **Isolated Components:**
   Consider a scenario where you have a modular card component used in different sections of your website. Users can customize each card's background color independently without affecting others:

   ```html
   <div class="card" style="--card-bg-color: #f0f0f0;">
     <p>This is a customizable card.</p>
   </div>

   <div class="card" style="--card-bg-color: #ffeecc;">
     <p>Another customizable card.</p>
   </div>
   ```

   In this way, users can tailor the appearance of each card individually.

3. **Inline Styles:**
   Suppose you're creating a blog where authors can highlight specific paragraphs with different background colors. Inline CSS variables provide a cleaner approach for managing these inline styles:

   ```html
   <div class="highlight" style="--bg-color: #ffeb3b;">
     <p>This paragraph is highlighted for emphasis.</p>
   </div>
   ```

   Authors can easily adjust the `--bg-color` variable to customize the highlight color for different paragraphs.

<subscribe />

## Conclusion

Now that you know about inline CSS variables, feel free to use them in your HTML for dynamic and personalized styling. It's a handy tool that adds simplicity to your styling toolkit. Give it a try and enjoy the flexibility it brings to your web projects! Till next time, byeee!

<byeBye />

<connectWithMe />

## Frequently Asked Questions

<details>
  <summary>1. Can I use CSS variables inline?</summary>
  <p>
    Yes, you can use CSS variables inline in your HTML by applying them directly
    in the <faqCode>style</faqCode> attribute of an HTML element.
  </p>
</details>

<details>
  <summary>2. What is inline CSS with example?</summary>
  <p>
    Inline CSS involves adding CSS styles directly to an HTML element using the{" "}
    <faqCode>style</faqCode> attribute. For example:
    <br />
    <faqCodeBlock>
      {`<p style="color: red;">This is a paragraph.</p>`}
    </faqCodeBlock>
  </p>
</details>

<details>
  <summary>3. What is a CSS variable in HTML?</summary>
  <p>
    A CSS variable in HTML, also known as a custom property, is a user-defined
    entity that stores values for reuse throughout the HTML document. It begins
    with two hyphens (--). Learn more about CSS variables in my article on{" "}
    <internalLink href="/blog/using-css-variables-like-a-pro">
      using CSS variables like a pro
    </internalLink>
    .
  </p>
</details>

<details>
  <summary>4. How do you use inline variables in CSS react?</summary>
  <p>
    In React, you can use inline CSS variables by setting the{" "}
    <faqCode>style</faqCode> attribute directly in your JSX components. Here's
    an example:
    <br />
    <faqCodeBlock>
      {`<div style={{ "--primary-color": "blue" }}>
        {/* Your component content */}
      </div>`}
    </faqCodeBlock>
  </p>
</details>

<details>
  <summary>5. Can I set variables in CSS?</summary>
  <p>
    Yes, you can set variables in CSS using the `--` syntax. For example:
    <br />
    <faqCodeBlock>
      {`:root {
      --primary-color: blue;
    }`}
    </faqCodeBlock>
  </p>
</details>

<details>
  <summary>6. How to use CSS variable in style?</summary>
  <p>
    To use a CSS variable in a style, you can apply it using the{" "}
    <faqCodeBlock>var()</faqCodeBlock> function. For example:
    <br />
    <faqCodeBlock>
      {` p {
        color: var(--primary-color);
      }`}
    </faqCodeBlock>
  </p>
</details>

<details>
  <summary>7. Why would you use inline CSS?</summary>
  <p>
    Inline CSS is useful when you want to apply styles to a single element
    without affecting others or when you don't want to create a separate
    stylesheet for a specific element.
  </p>
</details>

<details>
  <summary>8. What is a CSS variable inline?</summary>
  <p>
    A CSS variable inline refers to using custom properties directly in the
    <faqCode>style</faqCode> attribute of an HTML element, providing a dynamic and
    isolated approach to styling.
  </p>
</details>

<details>
  <summary>9. What are the benefits of using CSS variables?</summary>
  <p>
    CSS variables offer benefits such as easy maintenance, reusability, and
    dynamic styling, enhancing the overall flexibility of your stylesheets.
  </p>
</details>

<details>
  <summary>10. What is inline CSS advantages and disadvantages?</summary>
  <p>
    Advantages of inline CSS include simplicity and specific element styling.
    Disadvantages may include less maintainability and difficulty in managing
    styles across multiple elements.
  </p>
</details>



Next.js provides developers with a straightforward solution to create high-performance, efficient, and scalable React apps. This article will explore the key features of Next.js and weigh the pros and cons of switching from React to Next.js for your next project.

## Introduction to Next.js

[Next.js](https://nextjs.org/) is a robust JavaScript framework for developing server-side rendered (SSR) React applications. This framework is maintained and developed by Vercel and offers developers a simple solution to create fast, efficient, and scalable React applications. With its automatic code splitting, optimized performance, and support for CSS-in-JS libraries like styled-components, Next.js stands out as a popular choice for modern web development. Furthermore, it integrates well with popular front-end tools such as Redux, TypeScript, GraphQL and [Express.js](https://www.mirrorfly.com/blog/nextjs-vs-expressjs/). It offers a serverless deployment option, allowing developers to focus solely on delivering exceptional user experiences.

## Key Features of Next.js

The following are some of the key features that make Next.js an ideal choice for web development:

**1. Server-side Rendering (SSR)**: Next.js provides built-in support for server-side rendering (SSR), enabling the initial render of the application to be performed on the server instead of the client. This results in faster load times and improved SEO, as search engines can easily crawl and index the rendered HTML.

**2. Pre-rendering**: In addition to SSR, Next.js also offers pre-rendering, which enables you to pre-render specific pages or routes to static HTML files. This leads to even faster initial load times and reduces the amount of server-side rendering required.

**3. Hot Module Replacement (HMR)**: Another advantage of Next.js is its support for hot module replacement (HMR), allowing for live code updates without needing a full page refresh. This enhances the development experience and enables faster iteration during the development process.

**4. Automatic Code Splitting**: Next.js offers automatic code splitting, which automatically divides the application code into smaller chunks based on usage. This improves performance by only loading the code the user needs instead of loading the entire codebase on every page load.

**4. Built-in Image Component and Automatic Image Optimization**: Next.js also has a built-in Image component and automatic image optimization, providing a quick and easy way to improve application loading times and performance.

**6. Community Support**: Next.js has a strong community of developers with plenty of resources and tools available to help you get started and troubleshoot any issues.

**7. CSS Modules**: Next.js supports CSS modules, allowing you to write modular and reusable CSS scoped to a specific component. This enhances the maintainability and organization of your application's styles.

**8. TypeScript Support**: Next.js also supports TypeScript, enabling you to use the popular typed language in your application, resulting in improved code reliability and fewer runtime errors.

**9. Zero-Config Approach**: Next.js takes a zero-config approach, meaning you can start with minimal setup and configuration, saving you time and effort and enabling you to focus on building your application.

**10. API Routes**: Next.js offers API routes support, making it easy to create and manage your application's API endpoints. This enhances the organization and maintainability of your application's backend.

**11. Routing**: Next.js provides a powerful and intuitive routing system, allowing you to create and manage your application's routes and pages easily.

**12. 100% React Support**: Next.js offers full React support, allowing you to use all of React's features and components in your Next.js application.

**13. Best SEO Practices**: Finally, Next.js follows best SEO practices, ensuring that your application is optimized for search engines, improving your application's visibility, and attracting more users.

## Are Next.js and React the same thing?

No, Next.js and React are not the same things. Next.js is a JavaScript framework built on top of React that makes it easier to build server-side rendered (SSR) React applications.

React, on the other hand, is a JavaScript library for building user interfaces. It allows developers to build reusable UI components and manage the state of their applications. React can be used with or without a framework, and Next.js is one of the popular frameworks used for building React applications.

So, while Next.js is built using React, it offers additional features and abstractions that make it easier to build server-side rendered applications.

## Should You Switch to Next.js from React?

If you're considering switching from React to Next.js or are wondering if Next.js is the right choice for your project, here are some pros and cons to consider:

### Pros of Using Next.js

**Improved performance**: Next.js has several performance optimizations built into the framework, such as automatic code splitting and optimized asset loading, which can help improve the overall performance of your application.

**Ease of use**: Next.js provides a direct development experience with a minimal setup process and a familiar file structure. This can make it easier for developers to start a new project and maintain their code over time.

**Increase in conversion rate and sales**: Next.js provides fast loading times and improved SEO, which can increase your business's conversion rate and sales.

**Boost of marketing channels**: Next.js offers a rich set of features and tools that can be used to boost marketing channels, such as social media and email marketing.

**Overtake of competition**: With its fast performance and advanced features, Next.js can help you overtake your competition and stay ahead in the market.

**Better user experience**: Next.js provides a great user experience with its fast and responsive applications, making it an excellent choice for businesses looking to improve the user experience for their customers.

**Lower maintenance costs**: Next.js is designed for simplicity and ease of use, making it easier to maintain and update your application, potentially leading to lower maintenance costs.

**Easier business scaling**: Next.js is designed for scalability, making it easier for businesses to scale their applications as their needs grow.

**Robust documentation**: Next.js has comprehensive documentation and tutorials, making it easy for developers to learn and use the framework.

### Cons of using NextJs

**Learning curve**: While Next.js is designed to be simple and straightforward, it still requires a certain level of understanding and experience with React, JavaScript, and web development in general. This means there may be a learning curve for developers who are new to these technologies.

**Dependence on external packages**: Next.js relies on many external packages, such as React and Webpack, which can increase the risk of compatibility and security issues.

**Performance overhead**: Next.js provides many performance optimizations, but these optimizations can also add some performance overhead, particularly for smaller projects.

**Infrastructure**: If you are using the serverless option for deploying your Next.js application, consider the additional infrastructure and costs associated with this.

**Limited customization options**: Next.js has a set of conventions and best practices that developers should follow, which can limit customization options for some projects.

### Conclusion

In conclusion, Next.js is a powerful and popular framework for building fast and efficient React applications. It offers a wide range of features and advantages, such as automatic code splitting, optimized performance, simple client-side navigation, built-in support for CSS-in-JS libraries, integration with popular front-end tools, and a serverless option for deployment.

While there may be a learning curve and additional dependencies, Next.js provides a simple, efficient, and scalable solution for building great user experiences, helping businesses achieve their goals, and improving their online presence. With its strong community of developers and support, its focus on performance, ease of use, and best SEO practices, Next.js is worth considering for your next web development project.

It's also important to keep in mind that switching from React to Next.js may require some investment in terms of time and effort, especially if you're already familiar with React and have a large codebase built with it. It may be worth considering if you're looking to take your web development to the next level, but consider the costs and benefits before deciding.

Thank you for reading my article. Please share it with your friends. Till next time, Adios!

<byeBye />

## Useful Links

- [Pros and cons of NextJs](https://pagepro.co/blog/pros-and-cons-of-nextjs/)

<connectWithMe />



So, here we are again, at the beginning of another year, looking back on what went down in the past 12 months. I've been avoiding this reflection thing for a couple of months, but hey, it's January 1st – better late than never, right? Let's jump into it.

<advertCard />

## The Backstory: Metamorphosis

2022 last year, my tech community, [Nsonye](https://twitter.com/Nsonye_), asked us for our word for the year. I went with "metamorphosis" because I thought 2023 was going to be my glow-up year. I had a rough plan, or maybe not really a plan, just going with the flow and letting God take the wheel, as I mentioned in <internalLink href="/blog/my-journey-through-2022-from-surviving-to-thriving">last year's review</internalLink>. It turned out okay; I learned stuff and ticked some boxes. I thought, why not do the same for 2023? If you're curious about the no-plan journey, you can <internalLink href="/blog/my-journey-through-2022-from-surviving-to-thriving">check it out here</internalLink>.

## How It Went Down: The List of 39 Goals

So, 2023 kicked off with me jotting down my goals. It was more like a to-do list for the year, not really life-changing stuff. Looking back, maybe that was my first mistake. Unlike 2022, where I was all about finding myself and spiritual stuff, 2023 lacked a clear focus. Still, by the end of the year, things turned out pretty good.

<infoCard
  color="blue"
  title="PS: Grab My Yearly Goals and Progress Tracker Template"
>
  I crafted this{" "}
  <a href="https://affiliate.notion.so/lf6xqpcmgvpi" target="_blank">
    Notion
  </a>{" "}
  template to stay on top of my yearly goals, and it made a huge difference.
  Now, I want to share it with you! Download the{" "}
  <a href="https://www.timonwa.com/shop/progress-tracker" target="_blank">
    Yearly Goals and Progress Tracker
  </a>{" "}
  for free and keep your journey organized. Let's make 2024 even more remarkable
  together.
</infoCard>

## Big Move: Quitting the Job

In the first half of the year, I snagged a part-time gig at twoMatches. It was cool, but life happened, and I had to leave. I still had my full-time gig, but working for a Nigerian startup was draining the life out of me. I spent a year there, hearing promises about the company launching, getting better pay, etc. But after hearing the same story for a year, I had enough. I wasn't growing, learning, or seeing any benefits. So, in June, I quit.

## Reality Check: The Breakdown

Before that, though, I was drowning in everything – being a developer, writing, volunteering, and trying to handle side projects. It was a bit much. That's when I decided to take a chill pill for the second half of the year. I had some savings and a few writing gigs, so I figured I could survive.

Then came August, and bam! Mental breakdown time. I was sad, confused, and lucky to have friends like [Bibi](https://twitter.com/BibiTheWriter), [Lanre](https://twitter.com/LanreCodes), and [Tobi](https://twitter.com/toby_solutions). Bibi had this idea for me to write a letter to God, and surprisingly, it helped. Lanre was my constant chatterbox, and Tobi let me rant, even when half of what I said made no sense. 😂

## The Sneaky Feeling: Productivity Guilt

Here's the kicker – despite doing a bunch of stuff, by the end of the day, I'd still feel like a slacker. You know how it goes. You've got a ton of things on your plate and not enough time, and suddenly, you're convinced you're lazy and not achieving squat, even when you are. It's this weird feeling that you should be doing more, but maybe what you actually need is a break or just doing less. It's like a silent struggle that sneaks up on you.

That productivity guilt? Yeah, it was my shadow for most of the year, growing darker with each passing month. I tried all sorts of tricks – apps, calendars, organizers, and even went old school with pen and paper, plus a whiteboard. I even bought a fancy timer for my desk. I trimmed down my commitments to the essentials, but it still felt overwhelming.

Honestly, some days, I just lay there, staring at the ceiling. When you have a laundry list of things you want to tackle, you feel like you are stuck in a mental traffic jam – can't decide where to start or how to dive in, so you end up doing nada.

As much as I wish I could gain superpowers or sneak in extra hours into the day, I haven't cracked the code on maxing out my productivity. And this dreamland of doing less for more? Not there yet. It's still about grinding and leveling up skills. But you know what? I've learned to tell myself, "Hey, I'm not lazy, just hustling too hard."

## The Curveball: Taking the Dive into DevRel

In July, my friend Tobi threw me a curveball – and invited me to be a DevRel at [Million.js](https://million.dev). Never saw that coming, but I'm not one to shy away from a challenge, so why not? It was tough, and honestly, I'm still figuring it out. Battling productivity guilt didn't help, so I decided to treat it more like volunteering for an open-source project than a full-on assignment. It made things a tad easier, and for now, I'm just enjoying the ride, contemplating if DevRel is my thing.

<advertCard2 />

## The Bright Side: The Wins

Even if it feels like I didn't achieve as much in 2023, the truth is that I did more than I give myself credit for. The outcomes might not be visible yet, but the seeds I planted should sprout soon, as long as I keep at it. I checked off a decent chunk of my goals, leveled up as a developer, and lent a hand to plenty of folks.

I penned over 30 articles and took part in three hackathons (no wins, but hey, it's the participation that counts, right? 😅). Treated me to a new laptop and built a killer workstation(speaking in faith 🙏🏽). My proudest moment? Wrapping up my <internalLink href="https://tech.timonwa.com/blog/series/the-beginners-guide-to-hacktoberfest">Hacktoberfest article series</internalLink> – again, mental breakdown, productivity guilt, hello 🤷🏽‍♀️. It was tough, but I stuck it out.

Also, I built my blog from scratch and revamped my [portfolio](/) and [link page](/links). It was a wild ride that took the whole year, but man, was it exhilarating.

![Before and after photo of Timonwa's work station](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1704134908/Article%20Images/Timonwa%27s%20Notes/beforeafter_kyau89.png)

<figcaption>Before and after photo of Timonwa's work station</figcaption>

## Lessons learned: The Top 6

1. **Acknowledging My Efforts:** I've learned the importance of giving myself credit even when the results aren't immediately evident. Progress isn't always visible, but that doesn't mean it isn't happening.

2. **Prioritizing and Letting Go:** Understanding the art of prioritization and knowing when to let things go has been crucial. Balancing commitments required a shift in my mentoring style from facilitating/teaching at bootcamps to giving talks at them, allowing me to still contribute without overwhelming myself.

3. **Managing Emotional Burnout:** Constantly juggling multiple tasks can lead to emotional burnout. Recognizing the signs and addressing overwhelming emotions is just as important as managing the workload.

4. **Setting Long-term Goals:** While short-term goals have their place, I was reminded of the significance of establishing specific long-term objectives. Aligning plans with the recent reset and realignment I've experienced provides a clearer path forward.

5. **Alignment of Desires:** Toke Makinwa shared a powerful perspective on a podcast that deeply resonated with me. She expressed her practice of asking God to align her desires with His. It struck a chord because, in our pursuit of various goals, our desires might not always sync with what is truly meant for us. Being on the same page with the divine plan ensures we're working towards the right goals, saving us from unnecessary detours.

6. **Anthem of the Year:** Tom Odell's song "Stranger" became a sort of anthem for me in 2023. The poignant lyrics, especially "Isn't it strange, how people change, from strangers to friends, friends into lovers, and strangers again?" resonated deeply with a personal experience this year. Life happens, and understanding these changes becomes a part of the journey. 🥲

## Plans for the New Year: The Top 5

1. **Career Move:** My primary goal is to secure a new job, and I'm eyeing roles as a front-end engineer or a technical writer. If you or someone you know is on the lookout or has leads, please connect me! Here is [my CV](/cv).

2. **Project Launches:** I plan to roll out some exciting projects this year. From ideation to execution, I'm ready to bring them to life and see them flourish.

3. **Community Building:** Crossing my fingers to nurture and grow a community or two. The dream is to connect with like-minded individuals, share experiences, and build something impactful together.

4. **Public Speaking:** I aim to improve my public speaking game. This also doubles as a personal challenge to tackle social anxiety. The memory of attendng a mid-year tech event and nearly sprinting home due to a panic attack is still fresh – tough times indeed.

5. **Content Creation:** This year, I'll be creating content on navigating social anxiety and introversion, along with web-dev content. I invite you to [follow me](/links) on your favorite social media platforms – I'll be sharing my first set of posts by mid-January, so stay tuned!

<subscribe />

## Wrapping Up: The Candid Journey

In drawing the curtains on this year's review, I must acknowledge that life, much like this recount, isn't always the smooth narrative we expect. It's not always about achievements and triumphs; sometimes, it's about grappling with the raw realities of mental and emotional breakdowns. These moments shape us, teach us, and remind us of our shared humanity.

It's easy to paint a picture-perfect image of our lives. But the truth is that we all navigate through challenges, uncertainties, and the occasional chaos. This review might not align with conventional expectations, but it honestly portrays my journey in the past year.

As we turn the page to a new chapter, let's embrace the imperfections, celebrate the victories, and acknowledge the lessons, for it is in the messy intricacies of life that we find our truest selves.

Here's to the unfiltered journey of life, with all its ups, downs, and everything in between. May the coming year bring growth, resilience, and a tapestry of experiences that add depth to our stories.

Share your experiences, challenges, or moments on unfiltered moments of 2023? Share your experiences, thoughts, and reflections with me on <twitterShareLink url="https://tech.timonwa.com/blog/candid-journey-through-2023" title="Unfiltered Moments: A Candid Journey Through 2023 written by @timonwa\_" hashtags={[`UnfilteredMoments2023`, `UnfilteredMoments`]}>X(Twitter)</twitterShareLink>. Let's connect and exchange stories using #UnfilteredMoments2023. Your journey matters,
and I'd love to hear from you!

<connectWithMe />


Unfiltered Moments: A Candid Journey Through 2023

Using CSS Variables like a Pro: A Beginners Guide to the var() CSS Function


## Code

```html
<body>
  <p>
    All Rights Reserved,
    <span id="currentYear"></span>
    <a href="https://tech.timonwa.com">Timonwa Akintokun</a>.
  </p>

  <script>
    let date = new Date().getFullYear();
    document.getElementById("currentYear").textContent = date;
  </script>
</body>
```

For **HTML projects**, you can use the above code snippet to update the year automatically on your website.

```jsx
const Footer = () => {
  let date = new Date().getFullYear();

  return (
    <p>
      All Rights Reserved, {date}.{" "}
      <a href="https://tech.timonwa.com">Timonwa Akintokun</a>.
    </p>
  );
};
```

You can use the above code snippet for **React projects** to automatically update the year on your website.

## Explanation

The JavaScript `Date()` object captures the current date and time. Afterward, the `getFullYear()` method extracts the current year from the obtained date and time. The identified year is stored in a variable named `date`.

## Why Update the Copyright Year?

Updating the copyright year is more than just a legal formality; it is a crucial indicator of your commitment to maintaining and protecting your content. Here's why keeping the copyright year current is essential:

1. **Accurate Protection:** A current copyright year ensures that you accurately claim protection for your original work, providing a clear timeframe for your exclusive rights.

2. **Relevance Signaling:** A recent copyright year signals to your audience that your content is up-to-date and relevant. It shows that you actively manage and maintain your website.

3. **Legal Compliance:** Regularly updating the copyright year demonstrates your commitment to legal compliance, reinforcing your dedication to respecting intellectual property laws.

By incorporating the provided JavaScript snippet into your website's footer, you automate the process, ensuring that your copyright year is always current without manual intervention.

<connectWithMe />


How to Auto Update Copyright Year on Your Website


![HTML Progress Bar](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1702629411/Article%20Images/Snippets/progress_bar_jyods0.png)

<figcaption>A styled HTML Progress Bar</figcaption>

## Code

```html
<div class="progress-bar__wrapper">
  <label class="progress-bar__value" htmlFor="progress-bar"> 40% </label>
  <progress id="progress-bar" value="40" max="100"></progress>
</div>
```

```css
.progress-bar__wrapper {
  position: relative;
}
.progress-bar__value {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
progress {
  width: 100%;
  height: 20px;
  border-radius: 50px;
  background-color: #eee;
  transition: width 300ms ease;
}
progress[value]::-webkit-progress-bar {
  width: 100%;
  height: 20px;
  border-radius: 50px;
  background-color: #eee;
  transition: width 300ms ease;
}
progress[value]::-webkit-progress-value {
  width: 0;
  border-radius: 50px;
  background-color: maroon;
  transition: width 300ms ease;
}
```

## Explanation

This code utilizes the standard HTML `<progress>` element to create a visually appealing progress bar. The `<label>` element is positioned within the bar as a dynamic value indicator. The accompanying CSS styles enhance the aesthetics with smooth transitions and rounded edges, providing a polished appearance for the HTML Progress Bar.

## Demo

<iframe
  height="400"
  style={{ width: "100%", minHeight: "400px", height: "400px" }}
  scrolling="no"
  title="CSS Loading Spinner"
  src="https://codepen.io/timonwa/embed/yLZdMrq?default-tab=result&editable=true&editable=true&theme-id=dark"
  frameBorder="no"
  loading="lazy"
  allowTransparency="true"
  allowFullscreen="true"
>
  See the Pen{" "}
  <a href="https://codepen.io/timonwa/pen/yLZdMrq">CSS Loading Spinner</a> by
  Timonwa (<a href="https://codepen.io/timonwa">@timonwa</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

**View demo on CodePen**: [https://codepen.io/timonwa/pen/yLZdMrq](https://codepen.io/timonwa/pen/yLZdMrq)

<connectWithMe />


How to Style Html Progress Bar


![CSS Loading Spinner with Overlay](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1702630352/Article%20Images/Snippets/loading_spinner_btm2nz.gif)

<figcaption>CSS Loading Spinner with Overlay</figcaption>

## Code

```html
<div class="loading"></div>
```

```css
.loading {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ddd;
  border-top-color: orange;
  animation: loading 1s linear infinite;
}
@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}
```

## Explanation

The loading spinner is a circle with a border. One part of the border is colored to stand out from the rest of the border. The spinner rotates using CSS animations.

- The `border` property adds a border around the element to create the circle.
- The `border-radius` property makes the border a circle.
- We color one part of the border orange using the `border-top-color` property so that when the spinner rotates, the orange part stands out from the rest of the border, giving the illusion of a spinner.
- The `animation` property is used to rotate the spinner.

## Adding an overlay to the loading spinner

Adding an overlay to the loading spinner allows you to create a loading spinner that covers the entire page. This is useful when you want to show a loading spinner while a page is loading or when a form is submitting. This prevents the user from interacting with the page while the loading spinner shows.

If you want to add an overlay to the loading spinner, you can do so by wrapping it in a div and adding some styles.

```html
<div class="loading-state">
  <div class="loading"></div>
</div>
```

```css
.loading-state {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ddd;
  border-top-color: orange;
  animation: loading 1s linear infinite;
}
@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}
```

<iframe
  height="400"
  style={{ width: "100%", minHeight: "400px", height: "400px" }}
  scrolling="no"
  title="CSS Loading Spinner"
  src="https://codepen.io/timonwa/embed/dyaEVbp?default-tab=result&editable=true&theme-id=dark"
  frameBorder="no"
  loading="lazy"
  allowTransparency="true"
  allowFullscreen="true"
>
  See the Pen{" "}
  <a href="https://codepen.io/timonwa/pen/dyaEVbp">CSS Loading Spinner</a> by
  Timonwa (<a href="https://codepen.io/timonwa">@timonwa</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

**View demo on CodePen**: [https://codepen.io/timonwa/pen/dyaEVbp](https://codepen.io/timonwa/pen/dyaEVbp)

## Usage

Instances, where you might use a loading spinner, are

- When a page is loading
- When a form is submitting
- When a component is loading

<connectWithMe />


How to Create a Loading Spinner in CSS with Overlay.

Mastering the Modulo Operator in JavaScript: A Complete Guide

How to Build Responsive Layouts Using CSS Grid

How to Build a Responsive Image Slider with Html, CSS and JavaScript: Step-by-Step Guide

Hi guys, and welcome to the second article in my <internalLink href="/blog/series/javascript-projects-for-beginners">JavaScript Projects for Beginners Series</internalLink>. In this series, I will be building 10+ Javascript projects to test and develop our Javascript coding skills.

In this second article, we will learn how to build a <sparklyText>Color Flipper using JavaScript</sparklyText>. In case you don't know what a Color Flipper is, it is a simple random color generator that changes the color of a web element to that random color at the click of a button.

<infoCard color="grey" title="Project Code and Live Demo">
  You can access all the project code on my{" "}
  <a href="https://github.com/Timonwa/javascript-project-series">
    GitHub repository
  </a>
  . Additionally, explore the <a href="https://javascript-project-series.vercel.app/">
    live demo
  </a> to interact with the finished projects.
</infoCard>

## Prerequisites

Before we dive into creating accordions, I assume you understand **HTML**, **CSS**, and **JavaScript**. Familiarity with **JavaScript DOM manipulation** will be helpful.

We will also be using **Math.Random()** and **Math.Floor()** functions to generate the random color values.

And with that on the confirmation,

![gif of a lady saying let's get started](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699723838/memes/gtL8MNgSES_u3xze8.gif)

## What is a Color Flipper?

Like I said earlier, a **Color Flipper** is a simple application where you have a button that, on click, runs a function that generates a random color and then sets the color of an element you preselected to that random color.

![A random color flipper](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1698764041/Article%20Images/Timonwa%27s%20Notes/color%20flipper/video1_ultgy5.gif)

<figcaption>A random color flipper</figcaption>

For this project, we are targeting the background color of our body element and changing it using three different color codes; `hex`, `rgb`, and `hsl`. We will also use the `Math.random()` function combined with the `Math.floor()` function in Javascript to generate the colors randomly.

## Building the Color Flipper

To build this, we first need to open our code editor and create three files: `index.html`, `style.css`, and `script.js`.

### Adding Html

In our `index.html` file, write the following code:

```html


<header>
  <div class="page-header">
    <h1>Color Flipper</h1>

    <div class="page-links">
      <span id="hex-page">HEX</span>
      <span id="rgb-page">RGB</span>
      <span id="hsl-page">HSL</span>
    </div>
  </div>
</header>



<main>
  <section class="main-wrapper" id="hex-wrapper">
    <p>Change the background color by clicking this button.</p>
    <button id="hex-color">#babfff</button>
  </section>

  <section class="main-wrapper" id="rgb-wrapper">
    <p>Change the background color by clicking this button.</p>
    <button id="rgb-color">rgb(120, 191, 255)</button>
  </section>

  <section class="main-wrapper" id="hsl-wrapper">
    <p>Change the background color by clicking this button.</p>
    <button id="hsl-color">hsl(26, 100%, 86%)</button>
  </section>
</main>
```

In our Html file, we have created a simple header that says `Color Flipper` and a `div` that contains three link-like elements called `HEX`, `RGB`, and `HSL`. We also created three sections in our `<main>` tag containing a paragraph and a button that will change the background of our body element on click.

All three sections are visible; only one will be visible at a time when we add our CSS styles. With Javascript, we will use our links to toggle on and off the visibility of each section corresponding to that link. We will also be able to change the background color of our page with the click of the button in that section.

### Adding CSS

So, let's now add our CSS:

```css
/* body */
body {
  background-color: #babfff;
  padding: 20px;
}

/* header */
header {
  width: 100%;
  margin: 20px 0;
  text-align: center;
}

/* page links */
.page-links > span {
  font-weight: bold;
  cursor: pointer;
}

/_ first-page link _/ #hex-page {
  text-decoration: underline;
}

/_ second and third-page links _/ #rgb-wrapper,
#hsl-wrapper {
  display: none;
}

/* main */
.main-wrapper {
  width: 300px;
  margin: 40px auto;
  text-align: center;
}

button {
  margin: 20px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 110%;
  border: solid 1px grey;
  color: rgb(68, 65, 65);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  cursor: pointer;
}
```

We have given our body a default color of `purple`, which also equals the color code currently displayed on the button (`#babfff`). We have hidden all the sections except the first one, which is for the Hex code, and also given our Hex link a text-decoration of underline, indicating that this link's page is currently active. Now, let's add some functionality using Javascript.

### Adding Javascript

In our Javascript file, let us, first of all, create our variables:

```js
//* variables
// selecting the body element
const changeBackground = document.body;

// selecting the links to change the page
const hexPage = document.getElementById("hex-page");
const rgbPage = document.getElementById("rgb-page");
const hslPage = document.getElementById("hsl-page");

// selecting the main wrappers
const hexWrapper = document.getElementById("hex-wrapper");
const rgbWrapper = document.getElementById("rgb-wrapper");
const hslWrapper = document.getElementById("hsl-wrapper");

// selecting the buttons to change the background
const hexColor = document.getElementById("hex-color");
const rgbColor = document.getElementById("rgb-color");
const hslColor = document.getElementById("hsl-color");
```

Now that we have done that let's write some functions for our page links:

```js
//\* adding event listener and function to the color page links
// hex page
hexPage.addEventListener("click", function () {
  if (hexPage.style.textDecoration != "underline") {
    hexWrapper.style.display = "block";
    rgbWrapper.style.display = "none";
    hslWrapper.style.display = "none";
    hexPage.style.textDecoration = "underline";
    rgbPage.style.textDecoration = "none";
    hslPage.style.textDecoration = "none";

    // changes the background color

    changeBackground.style.backgroundColor = hexColor.textContent;
  }
});

// rgb page
rgbPage.addEventListener("click", function () {
  if (rgbPage.style.textDecoration != "underline") {
    rgbWrapper.style.display = "block";
    hexWrapper.style.display = "none";
    hslWrapper.style.display = "none";
    rgbPage.style.textDecoration = "underline";
    hexPage.style.textDecoration = "none";
    hslPage.style.textDecoration = "none";

    // changes the background color
    changeBackground.style.backgroundColor = rgbColor.textContent;
  }
});

// hsl page
hslPage.addEventListener("click", function () {
  if (hslPage.style.textDecoration != "underline") {
    hslWrapper.style.display = "block";
    rgbWrapper.style.display = "none";
    hexWrapper.style.display = "none";
    hslPage.style.textDecoration = "underline";
    rgbPage.style.textDecoration = "none";
    hexPage.style.textDecoration = "none";

    // changes the background color
    changeBackground.style.backgroundColor = hslColor.textContent;
  }
});
```

What each function does is that when we click on a page link, it checks if the link clicked on is underlined. If it isn't, it underlines it, and the corresponding page/section to that link becomes visible. In contrast, the remaining pages become invisible, with the other links having no line under them.

It also takes the color code displayed in the button that is visible on the page/section and sets the page's background color to that color.

Next up is adding functionality to our buttons. We will use `Math.random()` and `Math.floor()` functions. But before that, let me briefly explain what they do.

#### The `Math.random()` and `Math.floor()` Functions

When called, the **Math.random()** function always returns a random decimal number between 0 and 1. If you want to generate random numbers within a given set of numbers, let's say 0 to 10, you would then multiply the decimal number generated by 10.

When the **Math. random()** is combined with **Math.floor()**, it rounds down the number to a whole number.

```js
console.log(Math.random());
// logs out 0.5408145050563944

console.log(Math.random() * 10);
// logs out 5.408145050563944

console.log(Math.floor(Math.random() * 10));
// logs out 5
```

You can read more about them in the article in the <internalLink href="#resources">Resources Section</internalLink>. Now, back to our buttons.

#### Hex button color generator

Hex color codes are made up of 6 characters prefixed by a '#' (e.g., #434343, #baffff, #d3ded3). The hex characters are always numbers between '0' and '9' or letters between 'a' and 'f'.

We will generate the six characters randomly and string them together to get our random hex color code. Copy the javascript code below:

```js
//\* adding event listener and function to the color buttons
// hex button
// array of values for the background color
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
// a random number value
let randomNumberValue;

hexColor.addEventListener("click", function () {
// saves the new background color
let hexColorValue = "#";
// randomly picks a value in the array and adds it to the background color above
for (let i = 0; i < 6; i++) {
randomNumberValue = Math.floor(Math.random() \* hex.length);
hexColorValue += hex[randomNumberValue];
}
// changes the text inside the button
hexColor.textContent = hexColorValue;
// changes the background color
changeBackground.style.background = hexColorValue;
});

```

First, we created an array called `hex`, which contains all the hex characters used to generate hex codes. We will be getting our random characters from this array.

Next up is a variable called `randomNumberValue`. This variable temporarily stores any random character we generate.

After that, we created a function that runs whenever we click the button.

In this function, we have another variable called `hexColorValue`, which stores our generated hex code. Initially, its value is set to '#', but as we generate our six random hex characters, they will be added to the hexColorValue to give us a hex color code(i.e. '#bab434').

In our `for...loop` function, we are now generating a random number that falls between 0 and 16 (where 16 is the length of our array) by combining `Math.random()` and `Math.floor()` functions. This number will represent the position of each character in the array.

Once the number is generated, the character stored in that array position is added to our current `hexColorValue`. So if the random number generated is **5**, our hex character will be `4` because its position in the array is **5**. If our random number is **15**, our hex character will be `f` because its array position is **15**.

Once we have generated all six characters via the `for...loop` and added them to our `hexColorValue` simultaneously, the text of our button and the background color of our page is then set to our `hexColorValue`. And if we were to click on the button again, the whole process would be repeated.

Next up is the RGB button.

#### RGB button color generator

Rgb color codes are made up of 3 values, which are numbers between 0 to 255. The three values represent a shade of Red, Green, and Blue, and that's what rgb stands for.

We will generate random numbers for these three values for our random rgb color code. Copy the javascript code below:

```js
// rgb button
rgbColor.addEventListener("click", function () {
  // randomly picks a number between 0 and 255
  let a = Math.floor(Math.random() * 256);
  // randomly picks a number between 0 and 255
  let b = Math.floor(Math.random() * 256);
  // randomly picks a number between 0 and 255
  let c = Math.floor(Math.random() * 256);
  // saves the new background color
  const rgbColorValue = `rgb(${a}, ${b}, ${c})`;
  // changes the text inside the button
  rgbColor.textContent = rgbColorValue;
  // changes the background color
  changeBackground.style.background = rgbColorValue;
});
```

So, in this function, we created three variables, `a`, `b`, and `c`, and generate random numbers between **0** and **256** for each. Each variable represents one of the values of our rgb color code.

Next, we have a variable called `rgbColorValue`, representing our rgb color code. We are taking our three values stored in `a`, `b`, and `c`and using them in the template literal to which our`rgbColorValue` is equal.

Once that is done, the function replaces the text of our button and the background color of our page with the generated `rgbColorValue`.

You might have noticed that I multiplied our random number by 256 instead of 255. It is because if we were to use 255, the function would give random numbers below 255 but not the actual 255. So, if we want to include 255 as a random number, we must add 1, making it 256.

#### Hsl button color generator

Hsl color codes are also made up of 3 values, but the values and ranges differ. The three values they represent are hue, saturation, and lightness.

The hue value is between **0** to **360** degrees, while the saturation and lightness are between **0** to **100%**.

Our code will look similar to that of our rgb button color generator.

```js
// hsl button
hslColor.addEventListener("click", function () {
  // randomly picks a number between 0 and 360
  let a = Math.floor(Math.random() * 361);
  // randomly picks a number between 0 and 100
  let b = Math.floor(Math.random() * 101);
  // randomly picks a number between 0 and 100
  let c = Math.floor(Math.random() * 101);
  // saves the new background color
  const hslColorValue = `hsl(${a}, ${b}%, ${c}%)`;
  // changes the text inside the button
  hslColor.textContent = hslColorValue;
  // changes the background color
  changeBackground.style.background = hslColorValue;
});
```

Here, we generate three random values within the number ranges for our hue, saturation, and lightness and store them as `a`, `b`, and `c`, respectively.

We then take the generated values and use them in our variable, `hslColorValue`, which represents our hsl color code.

The background color of our page, along with the text of our button, is then set to the value of our hslColorValue.

And it's as easy as that.

![A random color flipper](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1698764041/Article%20Images/Timonwa%27s%20Notes/color%20flipper/video1_ultgy5.gif)

<figcaption>A random color flipper</figcaption>

## Conclusion

We created a Color Flipper that changes the background of our page using three different color codes at the click of a button.

With this JavaScript project, we also learned how to use the functions `Math.random()` and `Math.Floor()` to generate random colors in **hex**, **rgb**, and **hsl** color codes along with using **JavaScript DOM Manipulation**, would you be trying this out? Let me know in the on [X (Twitter)](https://x.com/timonwa_). Tell me, what JavaScript project would you like me to build next?

Till next time, guys, Byeeee!

<byeBye />

## Useful Links

- [View the code on GitHub here](https://github.com/Timonwa/javascript-project-series)
- [View the project here](https://javascript-project-series.vercel.app/02-color-flipper/index.html)
- [JavaScript HTML DOM Manipulation](https://www.w3schools.com/js/js_htmldom.asp)
- [Creating JavaScript random numbers with Math.random()](https://www.udacity.com/blog/2021/04/javascript-random-numbers.html)
- [JavaScript Math random() Method](https://www.geeksforgeeks.org/javascript-math-random-method/)
- [Defining colors in CSS](http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors)

<connectWithMe />

## Frequently Asked Questions

<details>
  <summary>1. What is a color flipper in web development?</summary>
  <p>
    A color flipper, in web development, refers to a simple application or
    script that generates random colors or allows users to cycle through
    predefined colors with the click of a button. It's often used for design or
    development purposes to quickly experiment with different color schemes,
    test contrasts, or add visual interest to web projects.
  </p>
</details>

<details>
  <summary>2. How can I create a basic color flipper for my website?</summary>
  <p>
    To create a basic color flipper for your website, you can use HTML, CSS, and
    JavaScript. Start by defining a set of colors you want to flip between, then
    use JavaScript to generate a random color or cycle through the predefined
    colors when a user interacts with the page. CSS is used to apply the chosen
    color to the background or other elements. There are also libraries and
    tools available to simplify this process.
  </p>
</details>

<details>
  <summary>
    3. Are there any libraries or frameworks for building advanced color
    flippers?
  </summary>
  <p>
    Yes, there are several libraries and frameworks that can help you build
    advanced color flippers. Some popular options include TinyColor, Chroma.js,
    and D3.js. These libraries offer features like color manipulation, gradient
    generation, and more. You can integrate them into your projects to create
    more sophisticated color-flipping applications.
  </p>
</details>

<details>
  <summary>
    4. What are some creative use cases for a color flipper in web design?
  </summary>
  <p>
    Color flippers can be creatively used in web design for various purposes.
    For example, you can use them to create eye-catching backgrounds, design
    interactive elements that change color on user interaction, or even build
    games and puzzles based on color patterns. They add an element of surprise
    and engagement to your website.
  </p>
</details>

<details>
  <summary>
    5. Are there any accessibility considerations when using color flippers?
  </summary>
  <p>
    Yes, accessibility is essential when using color flippers. Ensure that the
    colors you use have sufficient contrast to meet accessibility standards,
    making content readable for all users, including those with visual
    impairments. You should also provide controls or options for users to pause,
    stop, or customize the color flipping to accommodate various preferences and
    needs.
  </p>
</details>

How to Build a Random Color Flipper with Vanilla Javascript


Welcome to the <sparklyText>JavaScript Projects for Beginners Series</sparklyText>
. Throughout this series, we'll embark on a journey to explore a wide range of
JavaScript projects. From simple mini-projects to more complex ones, we'll build various projects to help you master JavaScript fundamentals.

We will start this series with a simple project: <sparklyText>Accordions</sparklyText>. Accordions are a great way to display content in a compact and organized manner. They allow users to access content without distraction selectively. We'll build three different but simple accordions using HTML, CSS, and JavaScript. Let's get started!

![lady saying let's get started](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699723838/memes/gtL8MNgSES_u3xze8.gif)

<figcaption>
  Image from{" "}
  <a href="https://giphy.com/gifs/facethetruthtv-lluj1cauAlO2vQEm8A">
    giphy.com
  </a>
</figcaption>

<advertCard />

## Prerequisites

Before we dive into creating accordions, I assume you understand **HTML**, **CSS**, and **JavaScript**. Familiarity with **JavaScript DOM manipulation** will be helpful.

<infoCard color="grey" title="Project Code and Live Demo">
  You can access all the project code on my{" "}
  <a href="https://github.com/Timonwa/javascript-project-series">
    GitHub repository
  </a>
  . Additionally, explore the <a href="https://javascript-project-series.vercel.app/">
    live demo
  </a> to interact with the finished projects.
</infoCard>

## What is an Accordion Menu?

A simple accordion menu is essentially a vertical list of headers or titles. When a user selects or clicks on an header, it reveals or conceals additional content associated with that header.

You've probably encountered accordions on Frequently Asked Questions (FAQ) pages, where they allow users to effortlessly scan through questions and selectively access answers without distraction.

![A frequently asked questions accordion menu](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1698058139/Article%20Images/Timonwa%27s%20Notes/3%20simple%20accordions/image1_sdv3cf.png)

<figcaption>A frequently asked questions accordion menu</figcaption>

Accordion menus are often used to display a substantial amount of information in a compact and organized manner. They can be used to present product descriptions, long content that needs organization, and any scenario where you want to show information in a user-friendly way.

## Benefits of Using Accordions on a Website

Accordions offer several benefits, including:

- **Saving space on web pages**: Accordions effectively save valuable space on web pages, allowing you to convey comprehensive information without overwhelming the layout.
- **Providing a clean and organized way to present content**: They offer a clean and well-organized method to showcase content, ensuring visitors can easily access information that piques their interest.
- **Reducing clutter**: By enabling content to expand or collapse, accordions reduce visual clutter, offering a polished and visually appealing browsing experience.
- **Enhancing user experience:** Accordions improve user engagement by empowering visitors to focus on specific content sections, enhancing their overall interaction with your website.

## How to Build an Accordion Menu

There are several ways to build an accordion, and we'll explore three simple ways on how to build an accordion. The first method uses the HTML `<details>` and `<summary>` tags. The second method uses JavaScript to toggle the visibility of the accordion content and the third method uses JavaScript to open one accordion at a time.

### Method 1: Using HTML `<details>` and `<summary>` Tags to Build an Accordion

The simplest way is to use the HTML `<details>` and `<summary>` tags. It allows you to build an accordion without javascript. You can build a pure HTML accordion menu using the `<details>` and `<summary>` tags and a little bit of CSS or no CSS at all. Let's see how it works.

```html
<details>
  <summary>Header</summary>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipiscing elit. Et neque, velit
    quasi quos quia nulla omnis! Similique dolorum, veniam facilis aliquam est
    fuga aperiam voluptatibus, sapiente atque vitae quia accusamus.
  </p>
</details>
```

![Pure HTML accordion menu using the details and summary tags](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1698058454/Article%20Images/Timonwa%27s%20Notes/3%20simple%20accordions/image2_ntyttc.png)

<figcaption>
  Pure HTML accordion menu using the `details` and `summary` tags
</figcaption>

The `<summary>` tag contains the header, which summarizes what the accordion is all about. The `<details>` tag, on the other hand, includes the `<summary>` tag and the additional content of the accordion, as you can see from the code snippet above. So when you click on the **header**(i.e., summary), the details drop to reveal the additional content.

You can also add CSS to style the accordion. Let's see how that works.

```css
/* accordion card */
details {
  width: 280px;
  border: double goldenrod;
  background-color: white;
}

/* accordion title */
summary {
  font-weight: bold;
  color: #202020;
  position: relative;
  padding: 10px;
  margin-bottom: 0;
}

/* accordion content */
p {
  border-top: solid 1px goldenrod;
  padding: 10px;
  color: #3d3b3b;
}
```

![A simple accordion menu using HTML `details` and `summary` tags with CSS styling](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1698058272/Article%20Images/Timonwa%27s%20Notes/3%20simple%20accordions/ezgif-1-bd0be6f987_zrauxx.gif)

<figcaption>
  A simple accordion menu using HTML `details` and `summary` tags with CSS
  styling
</figcaption>

### Method 2: Using HTML, CSS, and JavaScript to Build an Accordion

We'll build an accordion using Javascript, HTML and CSS in this method. With Javascript, when a user clicks on a header, the accordion will toggle the visibility of the corresponding content.

```html
<div class="accordion-card">
  <h3 class="accordion-card__header">
    Header
    <span class="icon"> + </span>
  </h3>
  <p class="accordion-card__content">
    Lorem ipsum, dolor sit amet consectetur adipiscing elit. Et neque, velit
    quasi quos quia nulla omnis! Similique dolorum, veniam facilis aliquam est
    fuga aperiam voluptatibus, sapiente atque vitae quia accusamus.
  </p>
</div>
```

Here we have a `<div>` tag that contains an `<h3>` tag for the header and a `<p>` tag for the content. We also have an icon inside the header that will rotate at a `45deg` angle, with its color changing to `red` when the accordion is open and the styles reverting when it is closed.

Let's add the CSS.

```css
/* accordion card */
.accordion-card {
  width: 280px;
  border: double goldenrod;
  background-color: white;
}

/* accordion header */
.accordion-card__header {
  color: #202020;
  position: relative;
  padding: 10px;
  margin: 0;
}

/* icon */
.icon {
  position: absolute;
  right: 10px;
  color: goldenrod;
  transform: rotate(0deg);
  transition: transform 300ms, color 300ms;
}

/* accordion content */
.accordion-card__content {
  border-top: solid 1px goldenrod;
  padding: 10px;
  color: #3d3b3b;
  display: none;
  margin: 0;
}

/* javascript css classes to be added and removed */
.toggleIcon {
  transform: rotate(45deg);
  color: hsl(0, 70%, 50%);
}

.active {
  display: block;
}
```

<advertCard2 />

Let's add the JavaScript.

```js
// variables
const accordionBtnToggle = document.querySelectorAll(".accordion-card__header");
```

From the function above, all the headers are selected using `querySelectorAll`, and saved in an array named `accordionBtnToggle`.

```js
// Adding event listener to the accordion toggle button
for (i of accordionBtnToggle) {
  i.addEventListener("click", accordionToggleFunction);
}
```

An event listener is added to all the headers so that when the user clicks on any of the headers, a function called `accordionToggleFunction` is run. Let's create that function.

```js
// function to open an accordion
function accordionToggleFunction() {
  this.nextElementSibling.classList.toggle("active");
  this.children[0].classList.toggle("toggleIcon");
}
```

This function runs when a user clicks on a particular header. The content, which is its next element sibling (since both of them are stored in the same `<div>` element), will have an `active` class attached to it, which then makes the content's style go from a display of none to a display of block.

The `children[0]`, on the other hand, select the icon (which is the first child of the `<h3>` tag, i.e., the header) and adds a class of `toggleIcon` to it, which changes the degree angle and color of the icon on click.

![Accordion menu using Html, CSS and JavaScript](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1698059847/Article%20Images/Timonwa%27s%20Notes/3%20simple%20accordions/video2_krgaqm.gif)

<figcaption>Accordion menu using Html, CSS, and JavaScript</figcaption>

Now, let's move on to our third example.

### Method 3: Accordion Menu Using JavaScript to Open One Accordion at a Time

This third example is the same as our second example. The only difference is that when a user clicks on the header of a particular accordion, if the content of another header is currently open, it will automatically be closed before showing the content of the header you clicked on. Basically, it's an accordion menu that closes opened accordions when you click on one. The html and CSS code remains the same, but in our JavaScript code, the function that runs is different.

```js
// function to open an accordion while closing the others
function accordionToggleFunction() {
  for (i of accordionBtnToggle) {
    i.nextElementSibling.style.display = "none";
    i.children[0].classList.remove("toggleIcon");
  }
  if (this.nextElementSibling.style.display == "none") {
    this.nextElementSibling.style.display = "block";
    this.children[0].classList.add("toggleIcon");
  }
}
```

From the code above, when the user clicks on a particular header, the **for…of loop** first of all loops through the content of each accordion, giving them a style of display `none` and then loops through all the icons, also removing the `toggleIcon` class from all of them.

The **if statement** then checks to see if the corresponding content of the particular header clicked on has a display style of `none.` If it does, it then adds a style of display `block` to it and the `toggleIcon` class name to its icon.

When the user clicks on another header, the **for…of loop** runs again, setting the display of all the content to `none` and removing the `toggleIcon` class from the icons, including the ones we just added to the previous content and icon. The **if statement** then runs again and adds the `active` and `toggleIcon` classes to the content and icon of the new header we just clicked on.

![JavaScript accordion menu that closes opened accordions when you click on one](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1698061141/Article%20Images/Timonwa%27s%20Notes/3%20simple%20accordions/ezgif-1-e92ee6d226_sxh4tc.gif)

<figcaption>
  JavaScript accordion menu that closes opened accordions when you click on one
</figcaption>

## Conclusion

Accordions are a great way to present content in a compact and organized manner. They allow users to selectively access information without overwhelming the layout. In this article, we explored three simple ways to build an accordion: using the HTML `<details>` and `<summary>` tags, HTML, CSS, and JavaScript, and JavaScript to open one accordion at a time.

Now that you have seen three simple ways to build an accordion, I hope you will use one in your next project. What JavaScript project would you like me to do next? Let me know on [X (Twitter)](https://x.com/timonwa_).

Till next time, guys, Byeee!

<byeBye />

<subscribe />

## Useful Links

- [When Should You Use Accordions on Your Website](https://designtlc.com/when-should-you-use-accordions-on-your-website/)
- [JavaScript HTML DOM Navigation](https://www.w3schools.com/js/js_htmldom_navigation.asp)
- [Get the code on GitHub](https://github.com/Timonwa/javascript-project-series)
- [View the project](https://javascript-project-series.vercel.app/)
- [Interact with the code on Codepen](https://codepen.io/collection/zxoQZp)

<connectWithMe />

## Frequently Asked Questions

<details>
  <summary>1. What is an Accordion Menu?</summary>
  <p>
    An accordion menu, often called an "accordion," is a user interface
    component commonly used to display content in a compact and organized
    manner. It consists of a list of headers, which can be expanded or collapsed
    to reveal or hide additional content associated with that particular header.
    Accordions are particularly useful for web pages that aim to present a
    substantial amount of information without overwhelming the user with too
    much content at once.
  </p>
</details>

<details>
  <summary>2. How do I build an Accordion?</summary>
  <p>
    There are several ways to build an accordion. In this article, we explored
    three simple ways to do so. The first method uses the HTML{" "}
    <faqCode>details</faqCode> and
    <faqCode>summary</faqCode> tags. The second and third methods use JavaScript
    to toggle the visibility of the accordion content.
  </p>
</details>

<details>
  <summary>3. Can you build an accordion without JavaScript?</summary>
  <p>
    Yes, you can build an accordion without JavaScript. The simplest way is to
    use the HTML <faqCode>details</faqCode> and <faqCode>summary</faqCode> tags.
  </p>
</details>

<details>
  <summary>4. What Are the Benefits of Using Accordions on a Website?</summary>
  <p>
    Accordions offer several benefits, including saving space on web pages,
    providing a clean and organized way to present content, reducing clutter,
    and enhancing user experience by allowing users to focus on the content
    they're interested in.
  </p>
</details>

<details>
  <summary>5. Are There Any SEO Considerations When Using Accordions?</summary>
  <p>
    Yes, there are SEO considerations when using accordions. Search engines can
    index hidden content within accordions, but ensuring it is relevant and
    valuable is important. Properly structured HTML and informative summary
    labels can also help search engines understand the content.
  </p>
</details>

<details>
  <summary>6. How Can I Style Accordions to Match My Website's Design?</summary>
  <p>
    Styling accordions can be done through CSS to match your website's design.
    You can modify the fonts, colors, borders, and animations to achieve the
    desired look. Adding CSS classes to different accordion components allows
    for precise styling.
  </p>
</details>

<details>
  <summary>7. What Are the Best Practices for Accessible Accordions?</summary>
  <p>
    Building accessible accordions is important for all users. Use semantic HTML
    elements like <faqCode>button</faqCode> for headers and <faqCode>p</faqCode>{" "}
    for content, provide keyboard navigation, and ensure screen readers can
    interpret the content. ARIA attributes, such as{" "}
    <strong>aria-expanded</strong> and <strong>aria-controls</strong>, can be
    used to enhance accessibility.
  </p>
</details>

<details>
  <summary>8. Can I Have Nested Accordions?</summary>
  <p>
    Yes, it's possible to have nested accordions. Nested accordions allow you to
    organize content hierarchically. Each nested level functions independently,
    and clicking on a header within a nested accordion reveals or hides content
    within that section.
  </p>
</details>

<details>
  <summary>9. What Are Common Use Cases for Accordions on Websites?</summary>
  <p>
    Accordions are commonly used for Frequently Asked Questions (FAQ) sections,
    product descriptions, long content that needs organization, and any scenario
    where you want to present information in a compact and user-friendly way.
  </p>
</details>

<details>
  <summary>10. Are There JavaScript Libraries for Building Accordions?</summary>
  <p>
    Yes, JavaScript libraries and frameworks, such as{" "}
    <a
      href="https://getbootstrap.com/docs/5.3/components/accordion/"
      target="_blank"
      rel="noopener"
    >
      Bootstrap
    </a>{" "}
    and{" "}
    <a
      href="https://www.npmjs.com/package/react-accessible-accordion"
      target="_blank"
      rel="noopener"
    >
      react-accessible-accordion
    </a>
    , provide pre-built accordion components. These libraries can simplify the process
    of creating accordions with additional features and customization options.
  </p>
</details>

<details>
  <summary>11. What is the FAQ accordion?</summary>
  <p>
    A FAQ accordion, short for Frequently Asked Questions accordion, is a user
    interface element commonly used on websites to display a list of frequently
    asked questions and their corresponding answers in an organized and
    space-efficient manner. It allows users to easily access specific
    information by clicking on a question, which then reveals the corresponding
    answer.
  </p>
</details>


How to Build an Accordion Menu 3 Simple Ways


Hi there! Welcome to the final article in our Hacktoberfest series. It's been an exciting journey throughout our Hacktoberfest 2023 series. We hope you've enjoyed the journey and are ready to take the next step. Congratulations on completing the journey if you have been following along since the beginning of the series. If you are joining us, welcome! We're glad you're here. You can catch up on the previous articles in the series here: [The Beginners Guide to Hacktoberfest](/blog/series/the-beginners-guide-to-hacktoberfest).

Today, we're closing this series, but it's only the beginning of your open-source adventure. This final article will wrap things up, discuss what comes after Hacktoberfest, and provide valuable tips to continue your open-source journey.

Before we move forward, let's take a moment to reflect on our Hacktoberfest series. We've covered a lot of ground, from the basics of open source to the intricacies of making your first contribution. Let's take a quick look at the topics we've explored so far:

## Wrapping up the series

### 1. Embarking on Your Open Source Adventure: A Beginner's Guide to Hacktoberfest 2023

In this series opener, we set the stage for a thrilling adventure into the world of Hacktoberfest. We introduced the concept and its significance, emphasizing the inclusivity of this open-source celebration. With an invitation to explore, we started our journey with excitement.

### 2. Introduction to Hacktoberfest: A Celebration of Open Source

In our second article, we delved deeper into the heart of Hacktoberfest. We defined this month-long coding festival, tracing its origins to DigitalOcean in 2013. The beauty of Hacktoberfest lies in its openness to all, regardless of their tech prowess. It's a global call to unite in coding, collaborating, and community-building. We also discussed the importance of open source and how it's transforming the world.

### 3. Getting Ready for Hacktoberfest: Preparing for Your Open Source Journey

At the third stop, we prepared for our upcoming Hacktoberfest adventure. We emphasized the importance of "Preptember," where aspiring contributors can equip themselves with the necessary tools and get acquainted with the open-source landscape. We guided readers in setting up their GitHub or GitLab accounts and configuring Git on their local machines. Plus, we highlighted the significance of a good code editor.

### 4. Finding Your First Hacktoberfest Project: A Step-by-Step Guide

The fourth article brought us closer to the main event by addressing a common challenge for newcomers: finding the right project to contribute to. We discussed the intricacies of GitHub and GitLab, the platforms Hacktoberfest tracks for contributions. Readers learned how to explore projects, what to look for when choosing one, and the vital role of README files, licenses, activity levels, and more. We concluded with valuable tips for first-time contributors, encouraging them to start small, seek community, ask for help, and, most importantly, have fun.

### 5. Making Your First Open-source Contribution: A Beginner's Guide

In our fifth installment, we took a hands-on approach. We guided you through the process of making your first open-source contribution. From forking a repository to creating a new branch, making changes, and finally opening a pull request, we demystified the jargon and made contributing a breeze for newcomers.

### 6. Hacktoberfest Etiquette and Best Practices: A Guide for First-time Contributors

The sixth article explored the etiquette and best practices for a successful Hacktoberfest journey. We discussed how to be a courteous and effective contributor, emphasizing the importance of respectful communication, patience, and embracing feedback. We also highlighted the significance of quality contributions and the value of collaboration.

### 7. Understanding the Open Source Community: A Guide For The Newcomers

Finally, we explored the etiquette and best practices for a successful Hacktoberfest journey. We discussed how to be a courteous and effective contributor, emphasizing the importance of respectful communication, patience, and embracing feedback.

We hope you've found these articles insightful and that they've encouraged you to take part in this fantastic open-source festival.

## What's Next After Hacktoberfest?

Remembering that Hacktoberfest is a month-long event, it's essential to know what to do afterward. Here are some tips to help you continue your open-source journey:

### 1. Reflect on Your Experience

Take a moment to think about your Hacktoberfest experience. What did you learn? What challenges did you face? What successes did you achieve? Reflecting on your journey can help you set meaningful goals for your future contributions.

### 2. Stay Engaged with the Community

The open-source community is active year-round. Continue to participate in discussions, forums, and chats. Engaging with the community is an excellent way to stay updated on projects and discover new contributing opportunities.

### 3. Explore New Projects

Now that you've dipped your toes into open source consider exploring new projects beyond Hacktoberfest. Find projects that align with your interests and expertise. You don't have to limit your contributions to just one event; open source is an ongoing endeavor.

### 4. Contribute Regularly

Don't stop at Hacktoberfest. Make open-source contributions a regular part of your routine. Whether fixing bugs, improving documentation, or developing new features, consistent contributions will sharpen your skills and make a lasting impact.

### 5. Mentorship and Learning

Consider joining mentorship programs or engaging with experienced contributors. Learning from others and mentoring newcomers can be incredibly rewarding. It's an opportunity to give back to the community while expanding your knowledge.

## Tips for Maximizing Your Hacktoberfest Experience

Here are some final tips to make the most of your Hacktoberfest participation:

1. **Quality Over Quantity:** Focus on meaningful contributions rather than trying to meet a specific quantity goal.

2. **Collaborate:** Engage with project maintainers and other contributors. Collaboration leads to better results.

3. **Learn Continuously:** Open source is a constant learning experience. Keep exploring new technologies and tools.

4. **Share Your Knowledge:** Write blog posts, tutorials, or documentation to share what you've learned.

5. **Have Fun:** Enjoy the process. Open source is not just about code; it's about building a supportive community.

## Conclusion

As this series ends, we hope you've gained valuable insights into the open-source world. Remember, your contributions can make a difference, no matter how small. There's so much more you can achieve. So stay connected with the community, keep learning, and continue to be an integral part of this vibrant world of collaboration.

Thank you for joining us in this series. Your dedication to open source is commendable, and we look forward to seeing your continued success. Until next time, happy coding and contributing!

<byeBye />

<connectWithMe />


After Hacktoberfest 2023: What's Next?


> You can't change the world alone—you will need some help— and to truly get from your starting point to your destination takes friends, colleagues, the goodwill of strangers, and a strong coxswain to guide them. ~ William H. McRaven

In the previous articles of our Hacktoberfest preparation series, we've covered a lot of ground. We've learned what Hacktoberfest is, set up our development environment, found our first projects to contribute to, made our first pull requests, and learned the best practices for contributing to open-source. However, it's essential to take a step back and delve into one of the most significant aspects of the open-source world—<sparklyText>the community</sparklyText>.

## The community is the heart of open source

**Open-source** is all about collaboration. It's a global movement where individuals from diverse backgrounds, cultures, and skill sets come together to build incredible software, tools, and solutions. It's a world where geographical boundaries blur, and the focus is on the code, not the coder.

The open-source community is a vibrant, collaborative, and inspiring place. It is a welcoming space where people can be themselves and express their ideas freely. You build relationships, share ideas, and create remarkable things together. It's a place where you can learn, grow, and make a difference.

In the open-source community, collaboration is the key to success. It takes a collaborative effort to build, maintain, and improve projects. Whether it's a minor bug fix or a significant feature enhancement, it's a team effort. Each contribution, whether big or small, is a step towards improving open source. It's a journey of learning, growing, and building remarkable things together.

As a newcomer, you may feel intimidated by the open-source world. You may wonder if you're good enough to contribute or have the skills to make a difference. The truth is, you don't need to be an expert to contribute to open source. All you need is a passion for learning and a willingness to help others. The open-source community is a welcoming space where everyone is encouraged to participate, regardless of their skill level or experience. It's a place where you can learn, grow, and make a difference.

When you contribute to open source, you're not just contributing to a project but becoming part of a vibrant, collaborative, and inspiring community. You're joining a global network of like-minded individuals who share a passion for creating, sharing, and improving software. You're becoming a member of a community that values diversity, inclusivity, and accessibility. You're becoming a part of something bigger than yourself.

![Open source is a worldwide collaboration](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956133/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/12_20230917_135257_0010_co2m1d.png)

<figcaption>Open source is a worldwide collaboration</figcaption>

## The open-source ecosystem

The open-source ecosystem is a vast, interconnected web of projects, maintainers, contributors, and users. It's not just about code; it's about people. Some of the most essential components of the open-source ecosystem are:

### 1. Projects

Projects are the building blocks of open-source software. They are the software, tools, and solutions created by the community. They are the essence of open source, and their success is vital to the community. Projects come in all shapes and sizes, from small libraries to large frameworks. They are the foundation on which the open-source ecosystem is built.

### 2. Project maintainers

Project maintainers are the heart and soul of open-source projects. They are responsible for the project's overall direction, growth, and maintenance. They manage the project's codebase, review contributions, and ensure its quality and stability. They also foster a welcoming and inclusive environment for contributors and users. Maintainers are the driving force behind open-source projects, and their efforts are invaluable to the community.

### 3. Contributors

Contributors are the lifeblood of open-source projects. They are the ones who build, maintain, and improve projects. They fix bugs, add new features, and enhance existing ones. They also help with documentation, testing, and design. Contributors are the backbone of open-source projects and are vital to the community.

### 4. Users

Users are the reason open-source projects exist. They are the ones who benefit from the software, tools, and solutions created by the community. They provide feedback, report bugs, and request new features. Users are the driving force behind open-source projects; their input is invaluable to the community.

### 5. The Community

The open-source community is a global network of individuals passionate about creating, sharing, and improving software. The community is the heart and soul of open source, and its members are the driving force behind its success.

![The Open source ecosystem](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695493092/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/THE_OPEN-SOURCE_ECOSYSTEM_harifi.png)

<figcaption>The Open source ecosystem</figcaption>

<subscribe />

## Effective communication in the open-source world

In the open-source world, where individuals from diverse backgrounds unite to create remarkable software, effective communication is the glue that holds this global community together. From sharing ideas and discussing technical decisions to reporting issues and offering feedback, communication is vital to open-source projects. For a community to thrive, its members must be able to communicate effectively.

Communication takes many forms in the open-source world. It can be as simple as asking a question or as complex as discussing a project's future, so effective communication is essential to the success of open-source projects. It enables contributors to share ideas, discuss technical decisions, and report issues. It also fosters a welcoming and inclusive environment for all participants.

Some of the most common forms of communication in the open-source world are:

### 1. Documentation

Documentation is an essential part of open-source projects. It helps users understand how to use the software, tools, and solutions created by the community. It also allows contributors to understand the project's codebase and contribute effectively. An adequately documented project is more accessible to newcomers and easier to maintain. Some of the most common forms of documentation in the open-source world are:

- README files
- Code comments
- Wiki pages
- Tutorials
- Blog posts

### 2. Issue tracking

Issue tracking is another crucial part of open-source projects. It helps maintainers and contributors keep track of bugs, feature requests, and other project-related matters. It also enables users to report issues and request new features. Issue tracking is also a collaboration between project maintainers, contributors, and users. When done right, it can help improve the project's quality and stability. Some of the most common forms of issue tracking in the open-source world are:

- GitHub issues
- GitLab issues
- Jira issues
- Trello cards

### 3. Code reviews

Code review is an integral part of open-source projects. It helps maintainers and contributors ensure code quality and adherence to project standards. It also enables users to provide feedback on proposed changes. This ensures that the project's codebase is of the highest quality and meets the community's standards. A well-maintained codebase that adheres to project standards is more accessible to newcomers and easier to maintain. Code reviews are usually done via pull requests. Some of the most common forms of code reviews in the open-source world are GitHub pull requests and GitLab merge requests.

### 4. Chat platforms

Chat platforms like Slack and Discord are an integral part of open-source projects. They enable maintainers, contributors, and users to communicate in real time. They also foster a welcoming and inclusive environment for all participants. They make community members feel like they're part of a team.

### 5. Social media

We are living in a social media world. It's no surprise that social media platforms like Twitter, Facebook, and LinkedIn are an integral part of open-source projects. They enable the community to communicate in real time, fostering a welcoming and inclusive environment for all participants.

## Your role in the open-source community

As a newcomer, it's natural to feel overwhelmed when entering the open-source world. However, remember that every contributor, no matter how experienced, started as a newcomer. It doesn't matter if you're a beginner or an expert; you can always do something to help. You can fix bugs, add new features, improve documentation, or help with testing. You can also share your knowledge by writing tutorials, blog posts, or documentation. Or help others by answering questions on forums, chat platforms, or social media.

And you don't have to start big to make a difference. You start with as little as fixing a typo in the documentation or adding a missing comma in the code. Even low-code and no-code contributions like design, marketing, and community management are welcome. The important thing is that you're contributing to open source and becoming a part of the community.

> Remember that your role in the open-source community is not limited to coding contributions; it extends to fostering a supportive and inclusive environment for all participants.

![Open source is a welcoming community](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956133/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/11_20230917_135257_0009_vbj8kk.png)

<figcaption>Open source is a welcoming community</figcaption>

In the open-source community, you're not alone. You're part of a global network of individuals who are passionate about making technology more accessible, robust, and innovative. Don't hesitate to ask questions, seek help when needed, and engage with your fellow community members. Together, we can create remarkable things.

## Conclusion: Welcome to the Open source community

So, as you embark on your Hacktoberfest journey and dive into open-source projects, remember that you're not just contributing but becoming a part of a vibrant, collaborative, and inspiring community.

The following article will wrap up our series and discuss the next steps after Hacktoberfest. We will also share some tips on continuing to contribute to open source and building remarkable things together.

If you enjoy this series, please share it with your friends and colleagues. And if you have any questions or suggestions, don't hesitate to contact me at [@timonwa\_](https://twitter.com/timonwa_). I can't wait to hear from you! See you in the next article. 👋🏼🚀📝

<byeBye />

<connectWithMe />


Understanding the Open Source Community: A Guide For The Newcomers


> Etiquette is not just about following rules; it's about showing respect and consideration for others.

Welcome back to our Hacktoberfest journey! By now, you're well on your way to becoming a seasoned open-source contributor. However, contributing to open source goes beyond code and pull requests. It involves a set of etiquettes and best practices that ensure a harmonious and productive open-source community.

If you are joining us for the first time on this Hacktoberfest journey, check out our previous articles in <internalLink href="/blog/series/the-beginners-guide-to-hacktoberfest">The Beginners Guide to Hacktoberfest series</internalLink> to get up to speed. We have covered a lot, from the <internalLink href="/blog/introduction-to-hacktoberfest">history of Hacktoberfest</internalLink> to <internalLink href="/blog/finding-your-first-opensource-project">how to find projects to contribute to</internalLink> and <internalLink href="/blog/making-your-first-contribution">how to make your first contribution</internalLink>. This is an eight-part series, and we have much more to cover. So, be sure to check out the other articles in the series.

This article will delve into the essential <sparklyText>Hacktoberfest etiquette and best practices</sparklyText>. Whether you're a seasoned contributor or just starting, understanding these principles will make your contributions more effective and make the open-source community a better place for everyone.

## Open-source etiquette: The dos and don'ts

1. **Respect and inclusivity**: Open source thrives on diversity. Treat all contributors, regardless of their background, with respect. Be mindful of your language and interactions. Inclusivity fosters a more vibrant and innovative community. Avoid offensive language, harassment, and discrimination. If you encounter any such behavior, report it to the maintainers.

2. **Mind the code of conduct**: Every open-source project has a code of conduct. Please familiarize yourself with it and abide by it. It sets the ground rules for respectful behavior within the community. If you encounter any violations, report them to the maintainers.

3. **Be patient and courteous**: Open source often involves asynchronous communication. Don't expect immediate responses. Be patient when waiting for feedback or replies. When you do respond, be courteous and constructive. Remember, maintainers and contributors are volunteers, too, and they have other commitments.

<infoCard title="Asynchronous means" color="blue">
  Asynchronous communication is a method of communication where the sender and
  receiver don't have to be present at the same time. Examples include email,
  forums, and social media.
</infoCard>

4. **Ask before you act**: Before making substantial changes or introducing new features, discussing your intentions with the maintainers or other contributors is good practice. This helps avoid duplicated efforts and ensures your contribution aligns with the project's goals. You do not want to spend hours working on a feature only to find out that it's not needed.

5. **Be open to feedback**: Open source is a collaborative effort. Be open to feedback and constructive criticism. It's an opportunity to learn and grow. If you disagree with the feedback, be respectful and explain your position. Remember, the goal is to find the best solution for the project.

6. **Don't be a jerk**: This is a general rule of thumb. Don't be a jerk. Don't be rude, condescending, or dismissive. Don't make personal attacks. Don't be a troll. Don't be a jerk.

![Open-source etiquette: The dos and don'ts](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695471878/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/13_fhygxp.png)

<figcaption>Open-source etiquette: The dos and don'ts</figcaption>

## Best practices for effective contributions

1. **Follow the project's coding standards**: Every project has its own coding standards and style guide. Please familiarize yourself with them and follow them. This helps ensure consistency and readability. Ask the maintainers or other contributors for feedback if you need clarification on the best approach.

2. **Use meaningful branch names**: Branch names should be descriptive and meaningful. Avoid generic names like "feature" or "bugfix." Instead, use a descriptive name that conveys the purpose of the branch. For example:

```bash
git checkout -b add-sms-feature

git checkout -b fix-login-bug
```

3. **Write clear commit messages**: A well-crafted commit message is a gift to fellow contributors. Make your commit messages concise, descriptive, and informative. They should convey what the commit does and why it's necessary. Avoid vague messages like "fixes bug" or "updates code." Instead, use a descriptive title and provide context in the body of the message. For example:

```bash
git commit -m "Added the new SMS feature to the app"

git commit -m "Fixed the bug that prevented users from logging in"
```

<infoCard title="Commit messages should" color="yellow">
  <ul>
    <li>Be concise, descriptive, and informative.</li>
    <li>Convey what the commit does and why it's necessary.</li>
    <li>
      Use a descriptive title and provide context in the body of the message.
    </li>
  </ul>
</infoCard>

4. **Open an issue before trying to fix a bug or add a feature**: Before fixing a bug or adding a feature, open an issue and discuss it with the maintainers. This helps ensure your fix aligns with the project's goals. It also helps avoid duplicated efforts. If you need help with the best approach, ask for feedback from the maintainers or other contributors. Most repos have an issue template that guides you on what information to include. Follow it.

![Best practices for effective contributions](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695471878/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/14_xvowij.png)

<figcaption>Best practices for effective contributions</figcaption>

5. **Creating meaningful pull requests**: Provide context when submitting a pull request. Explain what problem the PR solves or what feature it adds. If it's related to an issue, reference that issue in your PR description. If you need help with the best approach, ask for feedback from the maintainers or other contributors. This helps ensure your PR is relevant and aligns with the project's goals. Most repos have a pull request template that guides you on what information to include. Follow it.

<infoCard title="When creating issues or pull requests" color="yellow">
  <ul>
    <li>Provide context.</li>
    <li>Explain what problem the issue or PR solves.</li>
    <li>Reference related issues or PRs.</li>
    <li>Follow the issue or PR template.</li>
  </ul>
</infoCard>

6. **Quality over quantity**: Hacktoberfest encourages quality contributions. Instead of rushing to meet the required number of PRs, focus on making meaningful contributions that benefit the project. Avoid spamming the repo with low-quality PRs. Remember, quality over quantity.

<infoCard title="How Hacktoberfest handles spamming" color="red">
  Hacktoberfest has a zero-tolerance policy for spamming. If you spam a repo
  with low-quality PRs, your PRs will be marked as invalid. They won't count
  towards your Hacktoberfest contributions. Any user with two or more spammy
  PR/MRs will be disqualified.
</infoCard>

7. **Readable code**: Write easy to understand code. Follow the project's coding standards and style guide. Well-structured and documented code is more likely to be accepted. Besides, you'll be more likely to get feedback and help from other contributors. Forming a habit of writing readable code will help you in your career as a developer.

8. **Engage in discussions**: Don't just drop your changes and disappear. Engage in discussions on issues and pull requests. Share your thoughts, ask questions, and be open to feedback. Collaboration is key in open source. Engaging in discussions helps you learn and grow as a developer. It also helps build a vibrant and innovative community.

## Conclusion

Hacktoberfest celebrates open source, and understanding the etiquette and best practices is essential to being a valuable contributor. By respecting others, following best practices, and engaging in meaningful discussions, you'll not only enhance your own skills but also contribute to the growth of the open-source community.

Our next article will discuss the <sparklyText>open-source community</sparklyText>. Understanding the community, its dynamics, and your role is essential to becoming a valuable contributor.

Remember, open source is about collaboration, and your positive contributions make a significant impact. Keep coding, keep collaborating, and keep the open-source spirit alive!

<byeBye />

## Useful Links

- [How to Write a Git Commit Message](https://cbea.ms/git-commit/).
- [How to Write Good Commit Messages: A Practical Git Guide](https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/).
- [Conventionally Commits](https://www.conventionalcommits.org/en/v1.0.0/).
- [How to Write Clean Code: Tips and Best Practices](https://www.freecodecamp.org/news/how-to-write-clean-code/).

<connectWithMe />

## Frequently Asked Questions

<details>
  <summary>
    1. How can I ensure respectful interactions in open-source projects?
  </summary>
  <p>
    To ensure respectful interactions, treat all contributors with respect
    regardless of their background, avoid offensive language, and be mindful of
    the project's code of conduct. Report any disrespectful behavior to the
    project maintainers.
  </p>
</details>

<details>
  <summary>
    2. What should I do if I receive negative feedback on my contributions?
  </summary>
  <p>
    If you receive negative feedback, remain open to it. Use it as an
    opportunity to learn and improve. If you disagree with the feedback, respond
    respectfully and explain your perspective. The goal is to find the best
    solution for the project.
  </p>
</details>

<details>
  <summary>3. How can I write clear commit messages?</summary>
  <p>
    Write clear, commit messages by making them concise, descriptive, and
    informative. They should convey what the commit does and why it's necessary.
    Use a descriptive title and provide context in the message body.
  </p>
</details>

<details>
  <summary>
    4. What's the importance of opening an issue before making changes in
    open-source projects?
  </summary>
  <p>
    Opening an issue before making changes helps you discuss your intentions
    with project maintainers and contributors. It ensures your contribution
    aligns with the project's goals, avoids duplicated efforts, and maintains
    project focus.
  </p>
</details>

<details>
  <summary>
    5. How can I engage in discussions effectively in open-source projects?
  </summary>
  <p>
    To engage effectively, share your thoughts, ask questions, and be open to
    feedback in issue and pull request discussions. Collaboration is key in open
    source and helps you learn and contribute meaningfully.
  </p>
</details>


Hacktoberfest Etiquette and Best Practices: A Guide for First-time Contributors


> It takes a lot of people to make a winning team. Everybody's contribution is important. ~ Gary David Goldberg

Welcome back to our journey into the world of **open source** and **Hacktoberfest**! By now, you should be well-versed in the fundamentals of open source and ready to take your first steps as a contributor. 🚀

In this article, we'll dive into the nitty-gritty of making your very first open-source contribution. We'll use a practice repository called [Open-source Practice Repo](https://github.com/Timonwa/Open-Source-Practice-Repo) to demonstrate every step. So, let's get started on your path to becoming a bona fide open-source contributor.

<infoCard title="Important" color="red">
  For this example, I will show you how to contribute via the GitHub web
  interface. However, you can also make contributions via the command line.
  Check out the readme of this practice repository for more information. And the
  video in the <internalLink href="#resources">Resources</internalLink> section.
</infoCard>

## Steps to Making your first open-source contribution

### Step 1: Forking a repository

The first step is to **fork** the open-source project's repository. Forking creates a personal copy of the project where you can make changes without affecting the original project.

- Visit the project's GitHub repository. (I am using [Open-source Practice Repo](https://github.com/Timonwa/Open-Source-Practice-Repo).)
- Click the **Fork** button in the upper right corner and fill in the details.
- You'll now have your copy of the project in your GitHub account.

![How to fork a GitHub repo](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695401427/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/image1_vd5j9j.png)

<figcaption>How to fork a GitHub repo</figcaption>

### Step 2: Creating a branch

Before you start making changes, it's good practice to create a **new branch**. This isolates your work from the main project and makes it easier to manage your contributions.

- Navigate to your forked repository.
- Click the **Branch** button.
- Click the **New branch** button and enter a name for your branch.
- Give your branch a descriptive name, e.g., `feature/add-my-name`.

![How to create a new branch](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695401427/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/image3_c7s7kn.png)

<figcaption>How to create a new branch</figcaption>

### Step 3: Making changes

Here comes the exciting part! You can now make changes to the project in your branch. It could be anything from fixing a bug to adding a feature. For this example, we'll add our name to the list of contributors.

- Navigate to the branch you created earlier.
- Look for the **contributors** folder in the root directory and click on it.
- Click on the **names.md** file.
- Click the **Edit** button.

![How to edit a file on GitHub](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695401428/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/image4_k7pdao.png)

<figcaption>How to edit a file on GitHub</figcaption>

- Add your name to the list of contributors.
- Click **Commit changes**.
- Enter a descriptive commit message.
- Click **Commit changes**.

![How to commit changes on GitHub](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695401427/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/image5_rsfjjp.png)
![How to commit changes on GitHub](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695401427/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/image6_ntprr3.png)

<figcaption>How to commit changes on GitHub</figcaption>

### Step 4: Submitting a Pull Request (PR)

Once you're satisfied with your changes, it's time to submit a **Pull Request** to the original project. This is how you propose your changes for inclusion.

- Go to your forked repository on GitHub.
- Click on the **Pull Request** tab.
- Click **New Pull Request**. (You might also see a **Compare & pull request** button.)

![submiting a pull request](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695401426/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/image7_xippev.png)

<figcaption>submiting a pull request</figcaption>

- Select the branch you created earlier.
- Describe your changes and why they should be merged.
- Click **Create Pull Request**.

![How to submit a pull request on GitHub](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1695401429/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/image8_zcajxy.png)

<figcaption>How to submit a pull request on GitHub</figcaption>

### Step 5: Celebrate!

Congratulations! You've just made your first open-source contribution. 🎉 All that's left to do is wait for the project maintainer to review your changes and merge them into the project.

## Open-source projects to explore

As promised in the previous article, here are some other beginner-friendly open-source projects to practice with. Feel free to fork them and make your contributions.

- [Open-source Practice Repo](https://github.com/Timonwa/Open-Source-Practice-Repo)
- [Syknapse/Contribute-To-This-Project](https://github.com/Syknapse/Contribute-To-This-Project)
- [firstcontributions/first-contributions](https://github.com/firstcontributions/first-contributions)

You can also use these platforms to find more open-source projects to contribute to:

- [GitHub Explore](https://github.com/explore)
- [CodeTriage](https://www.codetriage.com/)
- [Up For Grabs](https://up-for-grabs.net/#/)
- [Awesome for Beginners](https://github.com/MunGell/awesome-for-beginners)
- [Good First issues](https://goodfirstissues.com/)

## Conclusion

In the following article, we'll examine some of the best practices for making open-source contributions. Like writing good commit messages and making your code readable. So, stay tuned for that.

Remember, every contribution counts, no matter how big or small. Your journey to open-source greatness has just begun! 🌟🌐

If you have any questions or comments, don't hesitate to contact me on [X (Twitter)](https://twitter.com/timonwa_). I'd love to hear from you. 😊 Also, don't forget to share this article with your friends and colleagues. See you in the next one!

<byeBye />

## Useful Links

- [Open-source Practice Repo](https://github.com/Timonwa/Open-Source-Practice-Repo)
- [How to Do Your First Pull Request](https://www.youtube.com/watch?v=nkuYH40cjo4)

<connectWithMe />


Making Your First Open-source Contribution: A Beginner's Guide

Optimizing Next.js Build Performance: Strategies for Faster Web Apps


> In Open Source, we feel strongly that to really do something well, you have to get a lot of people involved. ~ Linus Torvalds

In the world of Open source, collaboration reigns supreme. It is a place where people from different backgrounds, cultures, and countries come together to build amazing ideas.

## A quick recap for newcomers

If you have been following this series so far, kudos to you for embarking on this journey. If you've just joined us or missed any of the previous articles, don't fret. You can catch up by checking out our earlier discussions in <internalLink href="/blog/series/the-beginners-guide-to-hacktoberfest">The Beginners Guide to Hacktoberfest 2023</internalLink>

We have already learned what Hacktoberfest is and how it is an excellent opportunity to start with Open source. We have also seen how to set up our development environment and get familiar with Git and GitHub.

In this article, we will be looking at how to find your first Hacktoberfest project to contribute to. This process is a crucial step in participating in Hacktoberfest. It is also one of the most challenging steps for newcomers. So, let us dive right in.

![Woman saying "lets do this"](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956137/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/lluj1cauAlO2vQEm8A_r2acin.gif)

<figcaption>
  Image from{" "}
  <a href="https://giphy.com/gifs/facethetruthtv-lluj1cauAlO2vQEm8A">
    giphy.com
  </a>
</figcaption>

<advertCard />

## Preparation in Preptember

First things first, don't wait for Hacktoberfest to begin before embarking on your quest. September, often playfully called "Preptember" in the open-source world, is the perfect time to start preparations. This is the time to get familiar with the tools and technologies you will be using.

It is also the time to get familiar with the open-source community and the projects you will contribute to. This will help you hit the ground running when Hacktoberfest begins. From our <internalLink href="/blog/getting-ready-for-hacktoberfest">previous article</internalLink>, we have already seen how to set up our development environment and get familiar with Git and GitHub. So, we are already on the right track. 🚀 Now let us go looking for our first Hacktoberfest project.

## Finding your first Hacktoberfest project

Previously, I mentioned that only projects hosted on GitHub or GitLab are eligible for Hacktoberfest. This is because Hacktoberfest uses the GitHub and GitLab APIs to track your contributions. So, those are the platforms we will be looking at.

### GitHub

GitHub is the world's largest open-source community. It is home to millions of open-source projects. So, it is a great place to start looking for your first Hacktoberfest project.

The easiest way to find projects on GitHub participating in Hacktoberfest is to visit the [Hacktoberfest topics page](https://github.com/topics/hacktoberfest) on GitHub. This topic is a collection of all projects on GitHub participating in Hacktoberfest.

![GitHub's Hacktoberfest topic page](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694968339/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/github-hacktoberfest-topic_gzizbg.png)

<figcaption>GitHub's Hacktoberfest topic page</figcaption>

You can also find projects by searching for the `hacktoberfest` topic on GitHub. This will return a list of all projects on GitHub that mention `hacktoberfest` anywhere in their repository.

![GitHub's Hacktoberfest search results page](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694968325/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/github-hacktoberfest-search_ugx71n.png)

<figcaption>GitHub's Hacktoberfest search results page</figcaption>

You can also search for projects by language. For example, if you are interested in contributing to a JavaScript project, you can search for `hacktoberfest javascript` on GitHub. This will return a list of all JavaScript projects on GitHub participating in Hacktoberfest.

![GitHub Hacktoberfest search by language results page](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694968492/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/GitHub_Hacktoberfest_Search_by_Language_fz2yy3.png)

<figcaption>GitHub Hacktoberfest search by language results page</figcaption>

### GitLab

GitLab is another popular open-source community. It is home to thousands of open-source projects. So, it is also a great place to start looking for your first Hacktoberfest project. The process of finding projects on GitLab is similar to that of GitHub.

The easiest way to find projects on GitLab participating in Hacktoberfest is to also visit the [Hacktoberfest topic page](https://gitlab.com/explore/projects/topics/hacktoberfest) on GitLab. This topic is a collection of all projects on GitLab participating in Hacktoberfest.

![GitLab Hacktoberfest topic results page](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694968360/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/GitLab_Hacktoberfest_Topic_i55mit.png)

<figcaption>GitLab Hacktoberfest topic results page</figcaption>

You can use the language filter to search for projects by language. For example, suppose you are interested in contributing to a JavaScript project. In that case, you can search for `hacktoberfest` and filter by `JavaScript` on GitLab. This will return a list of all JavaScript projects on GitLab participating in Hacktoberfest.

## Things to look out for when choosing an open-source project

Now that we know how to find projects on GitHub and GitLab participating in Hacktoberfest let us look at some things to look out for when choosing a project.

![Things to look out for when choosing an open-source project](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956133/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/20230917_135719_0000_i9ciug.png)

<figcaption>Checklist for choosing an open-source project</figcaption>

### README file

The first thing to look out for when choosing a project is the README. This is because the README contains essential information about the project. It includes information on the project, how it works, what tools and technologies it uses, and its license.

It also contains information about how to contribute to the project. This is very important because it will help you know what kind of contributions the project seeks. It will also help you understand how to make contributions to the project. So, always read the README before choosing a project.

You can find this file in the root directory. It is usually named `README` or `README.md`.

### LICENSE

The LICENSE outlines what you can and cannot do with the project. It also outlines the consequences of violating the license. So, always read the LICENSE before choosing a project.

The [MIT](https://opensource.org/license/mit) and [GNU General Public License (GPL)](https://www.gnu.org/licenses/gpl-3.0.en.html) are the most common open-source licenses. The MIT license is a permissive free software license. It allows you to do whatever you want with the project as long as you include the original copyright.

<advertCard />

The GNU General Public License (GPL) is a copyleft-free software license. It allows you to do whatever you want with the project as long as you include the original source code and any modifications you make to the project. It also requires you to make the source code of any modifications you make to the project available under the same license.

The license is usually located in the root directory. It is generally named `LICENSE` or `LICENSE.md`. If you don't find the license in its root directory, you can look for it in its README.

<subscribe />

### Project's activity

Knowing the activity is also very important. This will help you understand how active the project is, how busy the maintainers are, and its community. This lets you know if the project is still being maintained and your contributions will be accepted.

You can get an idea of the activity by looking at the commits, issues, and pull requests. Checking when the commits, issues, and pull requests were made, who made them, and who closed them will give you an idea of how active the project is, how busy the maintainers are, and how involved the community is.

Are the commits, issues, and pull requests regularly made and closed? Are they being created and closed by the maintainers, contributors, or both? How often do the maintainers respond to issues and pull requests? These are also some questions you should ask yourself when checking the activity.

You don't want to contribute to a project that is no longer being maintained or whose maintainers aren't active. So, always check the activity before choosing a project.

### CONTRIBUTING guide

The next thing to look out for when choosing a project is the CONTRIBUTING guide. This is because the CONTRIBUTING guide contains more information about how to contribute to the project. It can collect information about the code of conduct, how to set up the project locally, how to run the tests, how to make contributions to the project, how to submit your contributions, and so on.

It can also contain information about the roadmap, how to report bugs, request features, ask questions, etc. This will guide you on how to make meaningful contributions to the project. So, always read the CONTRIBUTING guide before contributing to the project.

You can find this file in the root directory. It is usually named `CONTRIBUTING` or `CONTRIBUTING.md` or linked to in the README.

### CODE OF CONDUCT

The CODE OF CONDUCT outlines the expectations for all contributors. It also outlines the consequences of unacceptable behavior. It helps maintain a respectful and inclusive environment, ensures compliance with laws and regulations, and promotes ethical collaboration. So, always read the CODE OF CONDUCT before choosing a project.

You can find this file in the root directory. It is usually named `CODE_OF_CONDUCT` or `CODE_OF_CONDUCT.md` or linked to the README.

### issues and pull requests

An **issue** is a problem or bug in the project. It can also be a feature request or a question. It is usually made by a contributor to the project. It can also be made by the maintainers.

On the Issues page, you can find a list of all issues in the project. This is very important because it will help you know the problems and what issues you can work on. It will also help you see what issues have been worked on and are still open.

While a **pull request** is a request to merge changes into the project. It also is usually made by a contributor to the project. It can also be made by the maintainers. In the Pull Requests page, you can find a list of all pull requests.

When looking for issues as a first-timer or newcomer, you should look for issues labeled `good first issue`, `first-timers-only`, `beginner-friendly`, `help-wanted`, and `hacktoberfest`. These are issues that are suitable for first-timers or newcomers.

They are usually easy to fix and only require a little knowledge of the codebase. They are also typically well-documented and have clear instructions on how to fix them. So, always look for issues with such labels when choosing a project.

<infoCard title={"Pro tip"} color="blue">
  If you can't find any issues you can work on, don't panic. You can create your
  own issues by looking for bugs in the project or by adding new features. You
  can also reach out to the project maintainers for help.
</infoCard>

### Other things to look out for

Other things to look out for when choosing a project are the stars, forks, and watchers. These are usually located at the top of the page. They will give you an idea of the popularity and how many people are interested. They will also give you an idea of how many people contribute to the project.

You can also look at the releases. This will show you how often the project is being released. And the Discussion tab. This will give you an idea of how active the community is.

## Tips for first-time contributors to Open source

Now that we know how to find projects on GitHub and GitLab participating in Hacktoberfest and what to look out for when choosing a project, let us look at some tips for first-time contributors.

1. **Find a project you are interested in**: This is very important because it will help you stay motivated. It could be a project you use or want to learn more about. This will help you come up with ideas for contributions.

2. **Know more about the project**: This is also very important because it will help you make meaningful contributions. You can learn more about the project by looking at the README and CONTRIBUTING files. This will help you know what the project is about, how it works, what tools and technologies it uses, and how to set it up locally. You can also look at the issues to see if there are any issues you can work on.

3. **Start small**: As a newcomer, it is important to start small. This will help you get familiar with the project and the open-source community. You can begin by fixing typos in the documentation or adding a new feature to the project. This will help you familiarize yourself with the codebase and the tools and technologies you will use.

4. **Join the community**: Joining the community is also very important because it will help you get updates about the project and communicate with other contributors. You can follow the project on GitHub or GitLab and join the Discord or Slack channel.

5. **Ask for help**: Be bold and ask for help. Newcomers are always welcome in the open-source community. When you feel stuck or need help, you can ask for help by commenting on the issue you are working on or reaching out to the project maintainers. You can also ask for help by contacting the open-source community on X(Twitter), Discord, or whatever platforms they use.

6. **Be patient**: Be patient with yourself and the maintainers. Open source is a marathon, not a sprint. So, don't be in a hurry to make contributions. Take your time to understand the project and the open-source community. And don't be in a hurry to get a response from the maintainers. They are also busy people. So, be patient with them.

7. **Be respectful**: Be respectful to everyone. Open source is all about collaboration. So, be respectful to everyone, including the maintainers and other contributors. Be respectful to their time and contributions. Be respectful to their opinions and ideas. And be respectful to their feedback and criticism.

8. **Be receptive to feedback and criticism**: Speaking of feedback and criticism, embrace feedback and criticism as valuable assets on your journey. They are gifts that aid your growth, both as a developer/contributor and as an individual. Don't hesitate to seek or accept feedback. Constructive criticism, when delivered thoughtfully, can also be a catalyst for your improvement and personal development.

9. **Be open to learning**: Be open to learning new things. Open source is all about learning new things. So, be open to learning new things. Be open to learning new tools and technologies. Be open to learning new ways of doing things. And be open to learning from others.

10. **Have fun**: Last but not least, have fun. Open source is all about having fun and learning new things. So, don't be afraid to make mistakes. Don't be scared to ask questions. Don't be afraid to try new things. And most importantly, don't be frightened to have fun.

## Conclusion: What's next?

Knowing how to find your first Hacktoberfest project is very important. This helps you choose the right project to contribute to and leads you to success. In this article, we have seen how to find projects on GitHub and GitLab participating in Hacktoberfest and what to look for when choosing a project. We have also seen some tips for first-time contributors.

Our next article will examine how to make your first Hacktoberfest contribution. So, stay tuned. (As a bonus, I will share a list of projects you can contribute to in the following article, including one to practice all you have learned so far to help you get started. 😉)

I hope you have found this article helpful. Please share it with your friends and colleagues. If you have any questions or feedback, don't hesitate to get in touch with me on [X (Twitter)](https://twitter.com/timonwa_). I would love to hear from you. See you in the next article. 👋🏼🚀📝

<byeBye />

## Useful Links

- [Hacktoberfest Website](https://hacktoberfest.com/)
- [Types of Open-source License](https://opensource.org/license)

<connectWithMe />

<advertCard />


Finding Your First Hacktoberfest Project: A Step-by-Step Guide


> My own personal dream is that the majority of the web runs on Open source software. ~ Matt Mullenweg

Welcome to the third stop in our eight-part adventure series on <sparklyText>Getting Ready for Hacktoberfest</sparklyText> where we prepare you for this coding festival. If you're ready to gear up for a month of contribution, camaraderie, and swag, you're in the right place. So, without further ado, let's get you ready to rock Hacktoberfest!

![Litte girl playing an air guitar](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956136/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/w6KEtVsdXnUGDfln8D_qa5sow.gif)

<figcaption>
  Image from{" "}
  <a href="https://giphy.com/gifs/air-guitar-w6KEtVsdXnUGDfln8D">Giphy</a>
</figcaption>

If this is your first time hearing about Hacktoberfest, don't worry. We've got you covered. Check out our first article in the series, <internalLink href="/blog/embarking-on-your-open-source-adventure">Beginning Your Hacktoberfest Journey</internalLink>, to get up to speed.

## A quick recap of our last adventure

Before we forge ahead of preparing for this grand Hacktoberfest journey, let's take a pit stop and revisit where we've been. In our previous article, we deeply explored what Hacktoberfest is all about and why you should eagerly anticipate it.

To summarize:

### Hacktoberfest in a nutshell

Hacktoberfest isn't your run-of-the-mill tech event. It's a month-long celebration of open-source goodness that completely transforms October for the tech community. This global invitation welcomes tech enthusiasts like you from every corner of the world to jump into open-source projects, roll up your sleeves, and start contributing. It's a month bursting with code, collaboration, and, of course, the chance to score some awesome swag!

Now, with our compass set and excitement in the air, let's focus on thoroughly preparing you for this festive adventure!

## Understanding the guidelines of Hacktoberfest

To make the most of Hacktoberfest and snag those awesome rewards, specific rules must be followed:

1. [Register](https://hacktoberfest.com/participation/) between **September 26** and **October 31**.
2. Create pull/merge requests to projects participating in Hacktoberfest hosted on either GitHub or GitLab.
3. Have your pull/merge requests accepted by project maintainers.
4. The first 50,000 participants to have their first pull/merge requests accepted will have a tree planted in their name through [Tree Nation](https://tree-nation.com/).
5. Participants with four pull/merge requests accepted between **October 1** and **October 31** will receive a unique digital reward.

_(More about the guidelines can be found on the [Hacktoberfest website](https://hacktoberfest.com/participation/).)_

Now that we understand the guidelines let's assemble the necessary tools and environment for open-source contribution.

![Understanding the guidelines of Hacktoberfest](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956134/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/8_20230917_135257_0006_bysdev.png)

<figcaption>Understanding the guidelines of Hacktoberfest</figcaption>

## Setting up our open-source toolkit

You'll need to set up your toolkit to get started with Hacktoberfest contributions. Here's what you'll need:

### 1. A GitHub or GitLab account

**GitHub** and **GitLab** are code hosting platforms for version control and collaboration. It lets you and others work together on projects from anywhere. This is where you'll be contributing to open-source projects during Hacktoberfest.

In case you are wondering what version control is, here's a quick explanation:

**Version control** is a system that records changes to a file or set of files over time so that you can recall specific versions later. It's like a time machine for your code. It allows you to revert files and folders to a previous state, track modifications, and compare changes. It also makes it easier for you to collaborate with others on projects and keep track of your work. You can read more on it in this [tutorial by Atlassian](https://www.atlassian.com/git/tutorials/what-is-version-control).

If you don't already have a GitHub account, fear not! Creating one is easy:

1. Head over to [GitHub](https://hacktoberfest.com/participation/) and create an account.
2. Once you've created your account, you'll need to verify your email address.
3. Once your email address is verified, you can start contributing!

The exact process applies to [GitLab](https://about.gitlab.com/).

### 2. Configure Git on your local machine

**Git** is a free and open-source distributed version control system designed to handle everything from small to massive projects quickly and efficiently. In the simplest of terms, Git is a tool that allows you to keep track of changes made to files and folders on your computer. It's also the tool that you'll use to contribute to open-source projects during Hacktoberfest.

> See it this way: Git is the tool that allows you to make changes to files and folders on your computer, and GitHub/GitLab is the tool that allows you to share those changes with others.

Now that you have your GitHub/GitLab account, you'll need to configure Git on your local machine. Here's how:

1. Download and install [Git](https://git-scm.com/downloads) on your machine.
2. Once Git is installed, you'll need to configure your username and email address. To do this, open your terminal and enter the following commands:

```bash
git config --global user.name "Your Name"
git config --global user.email "Your Email"
```

3. To verify that your username and email address has been configured, enter the following command:

```bash
git config --global --list
```

4. You should see your username and email address listed in the output.

Alternatively, GitHub provides an alternative to using Git on your local machine. You can use [GitHub Desktop](https://desktop.github.com/) to contribute to open-source projects during Hacktoberfest. GitHub Desktop is a free and open-source Git client that lets you manage your Git repositories on your computer.

The GitHub Desktop app has a more straightforward setup process than Git. You can download and install the app on your machine and sign in with your GitHub account. Once you've signed in, you're ready to start contributing! This is an excellent option if you're new to Git and want to start quickly.

<subscribe />

### 3. Install a code editor

A code editor is like a word processor for writing code. It's where you'll write the code to contribute to open-source projects during Hacktoberfest. There are many code editors to choose from, but here are a few of our favorites:

- [Visual Studio Code](https://code.visualstudio.com/)

- [Sublime Text](https://www.sublimetext.com/)

Once you have installed your chosen editor, you can start weaving your code magic!

![Tools to get started with Hacktoberfest/Open-source contributions](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956133/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/5_20230917_135256_0003_t2s7q1.png)

<figcaption>
  Tools to get started with Hacktoberfest/Open-source contributions
</figcaption>

## But what if I don't know how to code?

If you're new to coding or want to contribute in another way, don't worry. Many ways to participate in Hacktoberfest don't require coding skills. Here are a few examples:

### Low-code and no-code open-source contributions

1. **Documentation**: Documentation is crucial to any project. It helps users understand how to use the project and how it works. If you have a knack for writing, you can contribute to open-source projects by writing documentation.
2. **Design**: If you have an eye for design, you can contribute to open-source projects by designing logos, icons, and other visual elements. You can also contribute to the design of a project's website.
3. **Translation**: If you're fluent in multiple languages, you can contribute to open-source projects by translating documentation and other text into other languages. This helps make projects more accessible to people around the world.
4. **Testing**: If you have a knack for finding bugs, you can contribute to open-source projects by testing them and reporting bugs. This helps make projects more stable and reliable.
5. **Media**: If you're a photographer, videographer or a content creator, you can contribute to open-source projects by creating media for them. This helps projects promote themselves and attract new contributors.
6. **Community**: If you're a people person, you can contribute to open-source projects by helping them build their communities. This helps projects grow and thrive.
7. **Writing blog posts**: If you're a writer, you can contribute to open-source projects by writing blog posts about them. This helps projects promote themselves and attract new contributors.
8. **Social media**: If you're a social media guru, you can contribute to open-source projects by helping them promote themselves on social media. This helps projects grow and thrive.
9. **Accessibility**: If you're passionate about accessibility, you can contribute to open-source projects by making them more accessible. This helps projects reach more people and make the web a better place for everyone. You can read more about accessibility in this [article by WebAIM](https://webaim.org/intro/).
10. **Data analysis**: If you're a data scientist, you can contribute to open-source projects by analyzing their data. This helps projects make better decisions and improve their products.

These are just a few examples of how you can contribute to open-source projects without coding skills. You can explore the projects and find one that interests you or even think of another creative way to contribute.

<infoCard title={"Key point to remember"} color="blue">
  Some projects may have specific guidelines for low-code or no-code
  contributions. Be sure to check the project's README for more information
  (more on this in the next article). If you are unsure how to contribute, you
  can always contact the project maintainers for guidance.
</infoCard>

![Low-code and no-code Hacktoberfest/Open-source contributions](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694973026/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/Networking_lzcog6.png)

<figcaption>
  Low-code and no-code Hacktoberfest/Open-source contributions
</figcaption>

## Conclusion: The Hacktoberfest adventure awaits!

With your GitHub account, Git on your trusty machine, and your chosen code editor, you're fully equipped for your Hacktoberfest adventure. In our next article, we'll dive deep into the thrilling process of discovering your very first open-source project to contribute to. Get excited because the open-source odyssey has only just begun!

And if you're already excited about Hacktoberfest or have questions along the way, don't be shy. Please share it with your friends and colleagues. Send me your thoughts and queries at [@timonwa\_](https://twitter.com/timonwa_) and join the conversation. I can't wait to hear from you! See you in the next article. 👋🏼🚀📝

<byeBye />

## Useful Links

- [Hacktoberfest participation guidelines](https://hacktoberfest.com/participation)
- [How to set up Git](https://docs.github.com/en/get-started/getting-started-with-git/setting-your-username-in-git)
- [Git and GitHub for beginners ~ freeCodeCamp](https://www.youtube.com/watch?v=RGOj5yH7evk)
- [Learn Visual Studio Code in 7min ~ Visual Studio Code](https://www.youtube.com/watch?v=B-s71n0dHUk)
- [Using GitHub Desktop for beginners. ~ Kevin Powell](https://youtu.be/GqNAD4XoZ6k)

<connectWithMe />


Getting Ready for Hacktoberfest: Preparing for Your Open Source Journey

Best Practices for Securing Your React Application


> In real Open source, you have the right to control your own destiny. ~ Linus Torvalds

In the world of programming and software development, October takes on a special meaning. It's not just a month of autumn leaves and pumpkin spice lattes; it's also <sparklyText>Hacktoberfest season</sparklyText>! 👩🏽‍💻

So, you've taken your second step into the wild world of Hacktoberfest, and we couldn't be more thrilled to have you along for this open-source journey. Here, we'll explore what Hacktoberfest is, its significance in the open-source community, a bit of its history, and why beginners in the programming world should pay attention to it. Let's fire up the engines and hit the road! 🚀

![A hand starting a car by turning the keys](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956147/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/flbcUFdLSHwZC03p11_oakhs8.gif)

<figcaption>
  Image from{" "}
  <a href="https://giphy.com/gifs/Mecanicus-triumph-1964-herald-flbcUFdLSHwZC03p11">
    giphy.com
  </a>
</figcaption>

## What is Hacktoberfest?

[Hacktoberfest](https://hacktoberfest.com/) is an annual event that celebrates open-source software and encourages people from all around the globe to contribute to open-source projects. It's a month-long festival of coding, collaboration, and community. The event is open to everyone, regardless of their skill level or role, and it's an excellent opportunity for both beginners and experts to get involved in Open source.

![Hacktoberfest 2023 banner](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956146/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/hf10_email_header_600x360px_rundt2.jpg)

<figcaption>Hacktoberfest 2023 banner</figcaption>

Hacktoberfest was first launched in 2013 by [DigitalOcean](https://www.digitalocean.com/), a cloud infrastructure provider. The idea was to encourage developers to contribute to Open source and help them get started on their journey. Since then, it has grown significantly in popularity, from 676 participants in 2014 to nearly 147,000 participants in 2023. It has become more than just an event.

With the festival open to not just developers, nearly every role in the tech space can participate in it. There's something for everyone, from designers to technical writers, project managers to marketers, and everyone in between. Hacktoberfest is a celebration of the open-source spirit, and it's a great way to get involved in the open-source community.

![Hacktoberfest allows people to collaborate on projects and learn from each other](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956135/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/3_20230917_135256_0001_lsovnv.png)

<figcaption>
  Hacktoberfest allows people to collaborate on projects and learn from each
  other.
</figcaption>

## How does Hacktoberfest work?

Hacktoberfest is a month-long event that takes place every **October**. Participants are required to make **four pull requests** to any public **GitHub/GitLab** repository. Pull requests can be made to any repository participating in Hacktoberfest. The repository's maintainer must approve the pull requests, which must be made in a **public repository**. Pull requests made to private repositories will not count toward the four required pull requests.

During the previously held Hacktoberfests, participants with four or more approved pull requests were eligible to receive a limited-edition Hacktoberfest T-shirt and stickers. However, this year, there will be no physical rewards. Instead, participants will receive digital rewards, while the first 50,000 participants can choose to have a tree planted in their name.

We will dive more into how Hacktoberfest works in the following article, <internalLink href="/blog/getting-ready-for-hacktoberfest">Getting ready for Hacktoberfest</internalLink>. So, stay tuned for that.

![Lady flipping her hair in excitement](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956147/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/lMsT2f47tDxFMYdJMC_skghvi.gif)

<figcaption>
  Image from{" "}
  <a href="https://giphy.com/gifs/cbc-schitts-creek-lMsT2f47tDxFMYdJMC">
    giphy.com
  </a>
</figcaption>

<subscribe />

## The significance of Hacktoberfest to Open source

Hacktoberfest holds immense significance in the open-source community for several reasons:

1. **Promoting Open source**: It plays an essential role in promoting the idea of open-source software. Open source is all about making software accessible to all, and a global community collaboratively develops it. Hacktoberfest drives this idea home. It encourages people to contribute to open-source projects and helps them start their journey.
2. **Community building**: It fosters a sense of community among developers. By participating, individuals become part of a worldwide network of programmers who are passionate about sharing knowledge and code. It's a great way to meet like-minded people and build lasting relationships and meaningful collaboration.
3. **Learning opportunities**: Hacktoberfest is a fantastic learning opportunity for beginners. It allows them to dive into real-world projects, work on practical coding challenges, and learn from experienced developers. It's also a great way to get feedback on their work and improve their skills.
4. **Contributions to projects**: Many open-source projects rely on volunteer contributions to thrive. Hacktoberfest brings a burst of contributions to these projects, helping them grow and improve. It's a win-win situation for everyone involved.

## The benefits of Hacktoberfest for beginners

Participating in Hacktoberfest can be especially rewarding for beginners:

- **Skill development**: It's a fantastic way to enhance coding skills and gain practical experience.
- **Build a portfolio**: Contributions made during Hacktoberfest can be showcased in a developer's portfolio, making it more attractive to potential employers.
- **Networking**: It's an opportunity to network with experienced developers and potentially find mentors.
- **Giving back**: By contributing to Open source, beginners give back to the community and become part of a global movement that values collaboration and knowledge sharing.

![Benefits of Hacktoberfest for beginners](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694956134/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/2_20230917_135256_0000_kzemny.png)

<figcaption>Benefits of Hacktoberfest for beginners</figcaption>

## Conclusion: Hacktoberfest is a celebration of Open source

In conclusion, **Hacktoberfest** is not just an event; it's a celebration of the open-source spirit. It's an opportunity for new and experienced developers and other contributors to come together, learn, collaborate, and contribute to the world of Open source.

Now that we know what Hacktoberfest is about, our next stop on this fantastic journey is <sparklyText>Getting Ready for Hacktoberfest</sparklyText>. In the following article, we'll dive into the practical steps to prepare for Hacktoberfest. And if you're as excited about Hacktoberfest as I am or love this series so far, don't keep it to yourself! Please share it with your friends and fellow tech enthusiasts.

Share your thoughts and questions to [@timonwa\_](https://twitter.com/timonwa_) and join the conversation. I can't wait to hear from you! See you in the next article. 👋🏼🚀📝

<byeBye />

<connectWithMe />


Introduction to Hacktoberfest: A Celebration of Open source


> The best journey is the one that is taken with good company. ~ Unknown

Open source is more than just a buzzword in the world of technology. It's a dynamic, collaborative ecosystem where passionate individuals from across the globe come together to build, innovate, and share. And <strong>Hacktoberfest</strong>, a month-long celebration of Open source, is your ticket to dive headfirst into this exciting world.

Hi guys! Welcome to <sparklyText>The Beginners Guide to Hacktoberfest 2023</sparklyText>, an eight-part series designed to help you on your open-source adventure. Whether you're an aspiring developer, a student eager to learn, or simply someone curious about the magic behind the software that powers our lives, this series is tailor-made for you.

For the next eight days, we will discuss all things **Hacktoberfest**. We'll cover everything from the basics of Hacktoberfest to the etiquette and best practices of Hacktoberfest. By the end of this series, you'll be ready to embark on your Hacktoberfest journey with confidence.

But before we begin this journey, let's answer the essential questions: What is Open source? Why does it matter? And why should you care about Hacktoberfest?

<advertCard />

## What is Open source?

<strong>Open source</strong> is a term used to describe software that is freely available
for anyone to use, modify, and share. It's a collaborative effort where developers
and contributors from worldwide come together to build, innovate, and share. Open-source
software powers the internet, from the websites we visit to the apps we use. It's
everywhere, and it's here to stay.

You might be wondering, _"Am I using open-source software?"_ The answer is yes! If you've ever used Firefox, WordPress, or VLC Media Player, you've used open-source software. Open source is all around us and in everything we do.

Some of the most popular open-source projects include:

1. **[Mozilla Firefox](https://www.mozilla.org/en-US/firefox/):** A popular open-source web browser for safe and private browsing.

2. **[LibreOffice](https://www.libreoffice.org/):** A free, open-source office suite for word processing, spreadsheets, presentations, and more.

3. **[Audacity](https://www.audacityteam.org/):** An open-source audio editing and recording software for creating and editing audio content.

4. **[GIMP (GNU Image Manipulation Program)](https://www.gimp.org/):** An open-source image editor for tasks like photo retouching and image composition.

5. **[VLC Media Player](https://www.videolan.org/vlc/):** A versatile open-source media player supporting various multimedia formats.

6. **[WordPress](https://wordpress.org/):** An open-source content management system (CMS) that powers websites and blogs.

7. **[Thunderbird](https://www.thunderbird.net/en-US/):** An open-source email client for managing emails, contacts, and calendars.

8. **[Krita](https://krita.org/en/):** An open-source digital painting application for artists and designers.

9. **[HandBrake](https://handbrake.fr/):** An open-source video transcoder for converting video files into different formats.

10. **[Calibre](https://calibre-ebook.com/):** An open-source e-book management tool for organizing and reading e-books.

### If it is free, how do developers make money?

Open source is free, but it's not free of cost. When we say "it's not free of cost," we mean it is not free to develop and maintain. Developers spend a lot of time and effort building and maintaining open-source software. They do it because they love it but also need to make a living.

For developers to make money, they offer paid services like support, training, and consulting to individuals and businesses. They also make money by selling add-ons, plugins, and themes. Some developers even offer paid versions of their software with additional features.

> Open source is free, but it's not free of cost.

And if you're wondering, _"Why would anyone pay for something that's free?"_ The answer is simple: <sparklyText>convenience</sparklyText>. Paid services offer convenience and peace of mind. They save you time and effort, and they're worth every penny.

If you use free open-source software, consider donating or purchasing a paid version to support the developers. It's a small price to pay for convenience and peace of mind.

## Why does Open source matter?

The websites we use, the apps we download, and the software we install are all powered by open-source software. It's the backbone of the internet and the future of technology. Open source matters because it's the future of technology. As the world and the internet are evolving, open-source software is becoming increasingly important.

Without open-source software, we wouldn't have the internet as we know it today. Most of the free software we can use today would not exist or be very expensive and inaccessible to most people. If you're reading this article, you're using open-source software right now. And if you're using open-source software, you're part of the open-source community.

Because open-source software is collaborative, they are often more secure and reliable than proprietary software. They are also more customizable and flexible, allowing you to tailor them to your needs. And because they are free, they are accessible to everyone, regardless of their financial situation.

This is because open-source software is developed by a community of developers and contributors from across the globe. When you use software and have a chance to contribute to it, you want to make it better for everyone, yourself, and for others. This is why open-source software is often more secure and reliable than proprietary software.

<infoCard title="What is proprietary software?" color="grey">
  Proprietary software is software that is owned by a company or individual.
  It's usually closed-source, meaning the source code is unavailable to the
  public. It's also usually paid, meaning you must pay to use it. Examples of
  proprietary software include Microsoft Windows, Adobe Photoshop, and Microsoft
  Office.
</infoCard>{" "}

You can make a difference by contributing to open-source projects as a developer or contributor. You can help build the future of technology and positively impact the world. Being part of the open-source community is a rewarding experience.

<advertCard2 />

Open source isn't just about code; it's a lively community where you learn, connect, and make a difference. It's your training ground for skills and a platform for fun, friendship, and self-expression. Engaging with Open source lets you give back, grow, and build a standout portfolio while being authentic.

## What is Hacktoberfest?

**Hacktoberfest** is an annual event that celebrates open-source software and encourages everyone to get involved, regardless of their coding experience. Throughout October, contributors worldwide come together to contribute to open-source projects. It's a month of coding, collaboration, and growth.

We will be celebrating the 10th anniversary of Hacktoberfest this year (2023). The event was first organized in 2014 by DigitalOcean and GitHub. It was a huge success, with over 676 participants in 2014 and nearly 147,000 participants in 2023. It's a global event with participants from over 150 countries. (More on Hacktoberfest history in the following article.)

<subscribe />

## Why should you care about Open source?

1. **It's everywhere**: Open source is everywhere, from the websites we visit to the apps we use. It's the backbone of the internet and the future of technology.

2. **It's the future of technology**: As the world is changing and the internet is evolving, open-source software is becoming increasingly significant.

3. **It's a rewarding experience**: Being part of the open-source community is a rewarding experience. It's your training ground for skills and a platform for fun, friendship, and self-expression.

4. **Learning Opportunity**: Open source is a classroom without walls. It offers you the chance to learn by doing. Whether you're a seasoned coder or taking your first steps, there's something here for you.

5. **Community Connection**: It's a global community of developers who share your passion for code. You'll collaborate with like-minded individuals, make new friends, and even find mentors along the way.

6. **Contributing to the Greater Good**: Your contributions will benefit real-world projects. Open-source software powers the internet, and you're giving back to the digital world by participating.

Now that we better understand **Open source** and **Hacktoberfest**, let's talk about how you can get started.

## What to expect from this series

This eight-part series is your roadmap to a successful Hacktoberfest experience. Here's a sneak peek at what's ahead:

1. **Embarking on Your Open Source Adventure**: We'll kick things off by introducing you to the world of Open source and how Hacktoberfest fits into the picture. You'll also know what to expect from this series and how to get the most out of it.

2. **Introduction to Hacktoberfest**: We'll take a deep dive into the world of Hacktoberfest. You'll learn about the event's history, how it works, what to expect from this year's edition, and the significance and benefits for you as a participant.

3. **Getting ready for Hacktoberfest**: We'll guide you through the necessary tools, from creating your GitHub account to configuring Git on your local machine and selecting the perfect code editor. You will also learn about low-code or no-code contributions for those who don't code.

4. **Finding your first Hacktoberfest project**: Discovering a project that matches your skills and interests can be daunting. We'll show you how to find beginner-friendly open-source projects and decipher documentation. We also discuss what to look for when choosing a project and share some tips for first-time contributors.

5. **Making your first contribution**: Step into the world of open-source contribution. We'll walk you through the process, from forking a repository to submitting your first pull request. Even if you're a complete beginner, you'll be able to make your first contribution by the end of this article.

6. **Understanding the open-source community**: Open source is about more than code; it's about community. Learn how to engage with others, ask questions, and work collaboratively. Know your role in the community and how to make the most of it.

7. **Hacktoberfest etiquette and best practices**: Finally, we'll delve into the dos and don'ts of Hacktoberfest and Open source. Understanding the etiquette and best practices is crucial for a smooth and enjoyable journey. We'll also share some tips for maximizing your Hacktoberfest experience.

8. **After Hacktoberfest 2023: What's Next?**: We'll wrap up the series by discussing what's next for you after Hacktoberfest. You'll learn how to continue your open-source journey and build on your acquired skills. We'll also share some tips for maximizing your Hacktoberfest experience.

## Conclusion: Let's get started

So, are you ready to embrace Open source, learn, and contribute? Let's embark on this journey together. <sparklyText>The Beginners Guide to Hacktoberfest 2023</sparklyText> is your guide, and the open-source community is your playground. The code is open, the possibilities endless, and your journey begins now. Happy hacking!

If you're excited about this series, please share it with your friends and colleagues. Share your thoughts and questions at [@timonwa\_](https://twitter.com/timonwa_) and join the conversation. I can't wait to hear from you! See you in the next article. 👋🏼🚀📝

<byeBye />

## Useful Links

- [What is Open source](https://opensource.com/resources/what-open-source)
- [Hacktoberfest official website](https://hacktoberfest.com/)

<connectWithMe />

<advertCard />


Embarking on Your Open Source Adventure: A Beginner's Guide to Hacktoberfest 2023


Have you ever been in a situation where you needed to fork a repo on GitHub, but you didn't have access to a computer? Well, I have, and it was a pain in the butt. (Ps. You can skip the back story and go straight to the tutorial. Head over to <internalLink href="#how-to-fork-a-repo-on-mobile">How to fork a repo on mobile</internalLink>.)

Earlier in my learning journey, I did most of my learning on my mobile device. I didn't have access to a computer at the time, so I had to make do with what I had.

I was able to do most of the things I needed to do on my mobile device, but forking a repo was not one of them. I had to wait until I could access a computer before I could fork a repo. This was a huge inconvenience for me, and I'm sure it is for many others as well.

Later, I found a workaround that allowed me to fork a repo on my mobile device. It wasn't the most convenient way, but it worked. I had to switch my browser to desktop mode, and then I could fork the repo. But desktop mode doesn't really work on iPhones. If you're using an iPhone, you might be out of luck.

This was a vast improvement over waiting until I could access a computer, but it could have been better. You can read more about this method in my previous article on <internalLink href="/blog/how-to-fork-a-repo-on-github-using-your-mobile-device-archived">how to fork a repo on your mobile device</internalLink>.

Another method I discovered later was trying to edit a file in the repo. When you try to edit a file in a GitHub repo you don't have access to, GitHub will prompt you to fork the repo. This was a much better solution than the previous one. It was a lot easier to do and didn't require me to switch my browser to desktop mode.

With the recent update to GitHub's web interface, you can now fork a repo with the click of a button. This is a massive improvement over the previous methods.

_On a side note, I am loving this new interface update. It's so much easier to use than the previous one. Anyhow, let's get started._

## How to fork a repo on mobile

To fork a repo on GitHub using your mobile device, follow the steps below.

1. **Find a repo to fork**: Obviously! You need to find a repo to fork. You can fork any repo you want, but for this tutorial, I'll be using my [Tech Roadmap repo](https://github.com/Timonwa/techroadmap). You can fork it if you want, but you don't have to. (You should totally fork it, though. It's a cool repo. 😉)

2. **Click the fork button**: Once you've found a repo to fork, click the fork button. It's located at the top left corner of the repo page. It's the button with the fork icon on it. It's not hard to miss. Once you click the button, GitHub will prompt you to choose where to fork the repo. You can fork it to your account or an organization you're a member of. For this tutorial, I'll be forking the repo to my account.

![GitHub's fork button in a mobile browser](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694724459/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20on%20mobile/image1_mzofba.jpg)

<figcaption>GitHub's fork button in a mobile browser</figcaption>

![Creating a new fork in GitHub](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694724466/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20on%20mobile/image2_fmeirg.jpg)

<figcaption>Creating a new fork in GitHub</figcaption>

3. **Click the create fork button**: Once you've chosen where to fork the repo, click the **Create Fork** button. This will fork the repo to your account. Once the repo has been forked, you'll be redirected to the forked repo page. You can now start working on the repo.

![Forking a repo on a moblie broswer](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1694724457/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20on%20mobile/image3_la0xyz.jpg)

<figcaption>Forking a repo on a moblie broswer</figcaption>

## Conclusion

And that is it. That is how you fork a repo on GitHub using your mobile device. It's super easy to do and doesn't require you to switch your browser to desktop mode. Plus, it works on both Android and iPhone.

If you found this article helpful, please share it with others. It will help others find it and encourage me to create more content like this. If you have any questions or comments, please feel free to tweet me at [@Timonwa\_](https://twitter.com/timonwa_). I'd love to hear from you.

Till next time, happy coding! 👋

<byeBye />

## Explore More

Discover more insights and tutorials on my blog:

- Learn how to [Create a Loading Spinner in CSS with Overlay](/blog/simple-css-loading-spinner).
- Dive into [JavaScript Projects for Beginners](/blog/series/javascript-projects-for-beginners) and enhance your coding skills with practical projects.
- Getting started with [Open Source Contributions](/blog/embarking-on-your-open-source-adventure) and how they can boost your tech career.
- Learn how to [Improve the UX of your data tables](https://blog.logrocket.com/improving-responsive-data-table-ux-css/) using CSS.

<connectWithMe />

## Frequently Asked Questions

<details>
  <summary>1. What is a GitHub repo?</summary>
  <p>
    A GitHub repo is a repository that contains files and folders. It can store
    code, documents, images, and more. Repos are used to organize a single
    project or multiple projects, and they can be made public or private.
  </p>
</details>

<details>
  <summary>2. What is a fork in GitHub?</summary>
  <p>
    A fork is a copy of a repo that allows you to freely experiment with changes
    without affecting the original project. Forks are used to propose changes to
    someone else's project or use someone else's project as a starting point for
    your idea. You can stay updated with the original repo by pulling changes
    from the original repo into your fork.
  </p>
</details>

<details>
  <summary>3. Can I fork a repo on my mobile device?</summary>
  <p>
    Yes. You can do this by clicking the fork button on the repo page. You can
    also fork a repo by editing a file in the repo. When you try to edit a file
    in a GitHub repo you don't have access to, GitHub will prompt you to fork
    the repo.
  </p>
</details>

<details>
  <summary>4. Can I fork my own repo?</summary>
  <p>
    You can't fork your own repo on the same account it is on. But you can fork
    it to another account you own or an organization you're a member of.
  </p>
</details>

<details>
  <summary>5. Can I fork a private repo?</summary>
  <p>
    You can only fork a private repo if the owner grants you access to it and
    permits forking on that repo. Do note that when the access gets revoked,
    you'll also lose access to the forked repo.
  </p>
</details>

<details>
  <summary>6. Can I fork a repo twice?</summary>
  <p>No, you can't. You can only fork a repo once.</p>
</details>

<details>
  <summary>7. Can I fork a repo and make it private?</summary>
  <p>
    No, you can't. For security reasons, GitHub doesn't allow you to make a
    forked repo private. But you can{" "}
    <a
      href="https://docs.github.com/en/repositories/creating-and-managing-repositories/duplicating-a-repository"
      target="_blank"
    >
      duplicate
    </a>{" "}
    the repo and make it private.
  </p>
</details>


How to Fork a Repo on GitHub using your Mobile Device

Improving responsive data table UX with CSS


Have you ever come across a checkbox asking you to confirm if you are not a robot followed by a visual test asking you to select images of traffic lights or something of that nature? I'm sure you have, especially if you have been using the internet frequently this past few years. This annoying test is known as a CAPTCHA.

![An example of a CAPTCHA test - NoCAPTCHA ReCAPTCHA](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795926/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/48CAkrd_O_sik9za.gif)

<figcaption>An example of a CAPTCHA test - NoCAPTCHA ReCAPTCHA</figcaption>

You usually would have to pass a CAPTCHA test before you can have access to certain parts of a website, especially if you want to make a purchase, fill out a form, or subscribe to a service.

It is usually time-consuming and annoying for users often making us wish we had a way we could automatically solve CAPTCHAs. But for companies and service providers, it is a safe way for them to secure their websites and data.

In this note, I will be explaining what CAPTCHAs are, the types, their usefulness, and their difficulties. I will also be telling you about a CAPTCHA Solver service you can use to bypass it. For a more detailed guide on how to overcome CAPTCHA challenges, you can check out my article on [Using Captcha Solvers to Improve Web Accessibility & Work Productivity](/blog/using-captcha-solvers-to-improve-web-accessibility-work-productivity).

![lady saying 'stay tuned'](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795943/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/Wc9ut3unW_u71pou.gif)

## So What is a CAPTCHA?

[CAPTCHA](http://www.captcha.net/) stands for Completely Automated Public Turing test to tell Computers and Humans Apart, a term coined by Luis von Ahn, Manuel Blum, Nicholas J. Hopper, and John Langford in 2003.

It is a challenge-response test used on websites to know if it is a human or a computer/bot that is trying to gain access to areas of restrictions on its website.

![A robot saying "I'm not a robot dumbass I'm alive"](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795962/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/Z5BFqLVP3_veoag1.gif)

The tests are usually visual challenges that are difficult for computers to solve but easy for humans. For example, clicking in a specific area or identifying stretched letters or numbers.

Computers do not usually have the sophistication that human beings have when it comes to processing visual data. So where we can look at an image and pick out patterns easily, a computer cannot.

![A robot trying to twist a door numb but twisting the air instead](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795978/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/a1ojGSGvt_xji4rf.gif)

## What are CAPTCHAs Used for?

Any website that desires to restrict usage and access of their services or data uses CAPTCHA to do so. Examples of such restrictions include:

- Ensuring people don't mess with poll accuracy by using a bot for voting or voting multiple times.
- Prevent bots from spamming message boards, contact forms, or review sites with false comments.
- Prevent people from buying lots of tickets to an event for resale or fake registrations for the event.
- Prevent people/bots from making multiple fake accounts on websites.
- <internalLink href="/blog/using-captcha-solvers-to-improve-web-accessibility-work-productivity">Improve web accessibility and work productivity for disabled users</internalLink> and professionals like Data Entry Operators, Market Researchers, and SEO Specialists.

## How Do CAPTCHAs Work?

CAPTCHAs work by providing information to a user for interpretation. It could be overlapping letters and numbers that a user then has to submit via a form field or clicking in a specific area and waiting until a timer runs out.

## Types of CAPTCHAs.

There are different types of CAPTCHAs and they can be identified as either Text-based, Image-based, or Audio-based.

### Text-based CAPTCHA

They make use of words, phrases, or combinations of random letters and numbers which can also be a combination of small and capital letters.

![A text-based CAPTCHA](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699796003/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/CdwNVsCmG_ys31pt.png)

<figcaption>An example of a text-based CAPTCHA</figcaption>

### Image-based CAPTCHA

They use photos of animals, shapes, or scenes which are supposed to be recognized easily by humans. The users are required to select images matching a theme or identify images that don't fit.

![An image-based CAPTCHA - Select all images with taxis](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699796038/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/I42bnLnpw_mxnvzx.jpg)

<figcaption>
  An example of an image-based CAPTCHA - Select all images with taxis
</figcaption>

### Audio-based CAPTCHA

They use recorded audio of words or phrases which the user has to listen to and give back as input.

![An audio-based CAPTCHA](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699796054/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/k6hv-CNshJ_dums3z.png)

<figcaption>An example of an audio-based CAPTCHA</figcaption>

### No CAPTCHA reCAPTCHA

This asks the user to click on a box stating I am not a robot. It captures mouse movements to determine if a user is human or not.

![A No CAPTCHA reCAPTCHA](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699796072/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/kYsu8b6Ow_kr07zr.png)

<figcaption>An example of a No CAPTCHA reCAPTCHA</figcaption>

### Math or Word Problems

This asks the users to solve a simple mathematical problem such as "5+4" or "8-3" or to type the word missing in a sentence or complete a sequence of several related terms.

![A math-based CAPTCHA](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699796093/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/HN2WfezkH_notlbj.png)

<figcaption>An example of a math-based CAPTCHA</figcaption>

## Difficulties of using CAPTCHAs

Although CAPTCHAs are effective to most bots, there are some drawbacks to using them:

- They can be frustrating for users to use.
- They can be difficult to understand by a certain audience.
- Not all browsers support them.
- Some CAPTCHAs are not accessible to screen readers.
- They can be time-consuming.
- They are not entirely foolproof.

We have now come to the juicy part… bypassing CAPTCHAs.

![A man wiggling his shoulders and smiling](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699796108/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/SlD9Hwhao_ncglmu.gif)

## How to bypass CAPTCHAs

You might be wondering how you can bypass CAPTCHAs. Well, there are several ways you can do that. One of them is by using a CAPTCHA solving service.

CAPTCHA solving services are services that help you bypass CAPTCHAs. They are usually powered by humans who solve the CAPTCHAs for you or AI that can solve the CAPTCHAs.

These services help you bypass CAPTCHAs by sending the CAPTCHA challenge to their servers, which then sends it to a human worker or an AI to solve it and send the answer back to you. They can help you bypass text-based CAPTCHAs, image-based CAPTCHAs, and audio-based CAPTCHAs, and more.

There are several CAPTCHA solving services out there, like [2Captcha](https://2Captcha.com) which we will be talking about in this article, [Capsolver](https://www.capsolver.com/), Anti-CAPTCHA, and Death by CAPTCHA.

## Bypassing CAPTCHA using 2Captcha

I recently came across the CAPTCHA solving software called [2Captcha](https://2Captcha.com). It is a Human-powered CAPTCHA-solving service, which means that each CAPTCHA is solved in real-time by human intelligence and not by computer or robot thus providing a high level of accuracy.

![2Captcha - Human-powered CAPTCHA-solving service](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699796125/Article%20Images/Timonwa%27s%20Notes/what%20is%20a%20captcha/l3bYALXhX_h74eid.jpg)

<figcaption>2Captcha - Human-powered CAPTCHA-solving service</figcaption>

2Captcha can recognize different types of CAPTCHA (remember the examples I gave above?) and Its API is available for most programming languages. Their average response time is less than 12 seconds and their service is inexpensive starting from just $0.50 for 1000 solved CAPTCHAs. And that's a lot compared to what you are paying for.

There are two ways you can use it, which is by either integrating their API if you are a developer or using their browser [extension](https://chrome.google.com/webstore/detail/2Captcha-solver/ifibfemgeogfhoebkmokieepdoobkbpo?hl=en). if you don't want to write code. Ps, you can also earn additional income on 2Captcha by solving CAPTCHAs, after all, it IS powered by humans.

### So How Exactly does 2Captcha work?

Since 2Captcha has workers who are willing and waiting to solve CAPTCHAs, a customer wanting to solve a CAPTCHA in real-time requests with the CAPTCHA challenge via their API directly or through their browser extension to the 2Captcha server which then delivers the CAPTCHAs from the customer to their worker. Once the CAPTCHA is solved, 2Captcha servers deliver the answer back to the customer. It's that easy and all these happen in seconds.

The customer pays for the service and the worker also gets paid for solving the CAPTCHA. It's a win-win for everybody.

## Conclusion

And that's it on CAPTCHAs. I hope you enjoyed the note. Remember CAPTCHA helps to keep the bad guys out and the good guys in. But sometimes they are very annoying, that's why services like 2Captcha help us automate the process.

Other services like Capsolver also help us bypass CAPTCHAs using AI and machine learning. So if you are a developer or a user who wants to bypass CAPTCHAs, you can use any of these services.

If you want to explore the best CAPTCHA solvers specifically tailored for Google Chrome, check out this comparison guide [here](https://slashdot.org/software/captcha-solvers/for-google-chrome/).

If you enjoyed this note, please share it with your friends and colleagues. Till next time guys.

<byeBye />

<connectWithMe />

## Explore More

Discover more insights and tutorials on my blog:

- Dive into [JavaScript Projects for Beginners](/blog/series/javascript-projects-for-beginners) and enhance your coding skills with practical projects.
- Learn to seamlessly integrate [Sender.net with a React Form](/blog/integrate-sender-with-react-form) for free email collection and delivery.
- Unlock enhanced web accessibility and productivity with our guide on [Using Captcha Solvers](/blog/using-captcha-solvers-to-improve-web-accessibility-work-productivity).

## FAQs

<details>
  <summary>1. What is a CAPTCHA?</summary>
  <p>
    A CAPTCHA, which stands for Completely Automated Public Turing test to tell
    Computers and Humans Apart, is a test used on websites to determine whether
    the user is a human or a computer program. It is used to prevent automated
    bots from accessing certain areas of a website or performing actions like
    filling out forms or making purchases.
  </p>
</details>

<details>
  <summary>2. What are CAPTCHAs used for?</summary>
  <p>
    Any website that desires to restrict usage and access of their services or
    data uses CAPTCHA to do so. Examples of such restrictions include:
  </p>
  <ul>
    <li>
      Ensuring people don't mess with poll accuracy by using a bot for voting or
      voting multiple times.
    </li>
    <li>
      Prevent bots from spamming message boards, contact forms, or review sites
      with false comments.
    </li>
    <li>
      Prevent people from buying lots of tickets to an event for resale or fake
      registrations for the event.
    </li>
    <li>Prevent people/bots from making multiple fake accounts on websites.</li>
  </ul>
</details>

<details>
  <summary>3. How do CAPTCHAs work?</summary>
  <p>
    CAPTCHAs work by presenting a challenge to the user that is easy for humans
    to solve but difficult for computers. This challenge could involve tasks
    like identifying objects in images, solving math problems, or clicking on
    specific areas. Users must complete these challenges to prove they are not
    bots.
  </p>
</details>

<details>
  <summary>4. What are the different types of CAPTCHAs?</summary>
  <p>
    There are several types of CAPTCHAs, including text-based CAPTCHAs,
    image-based CAPTCHAs, audio-based CAPTCHAs, and more. Each type presents a
    different challenge to the user, making it harder for bots to solve.
  </p>
</details>

<details>
  <summary>5. What are CAPTCHA solving services?</summary>
  <p>
    CAPTCHA solving services are services that help you bypass CAPTCHAs. They
    are usually powered by humans who solve the CAPTCHAs for you or AI that can
    solve the CAPTCHAs. With them you can bypass text CAPTCHA, bypass click
    CAPTCHA, bypass math CAPTCHA, bypass hcaptcha, and more.
  </p>
</details>

<details>
  <summary>6. What other CAPTCHA solving services are there?</summary>
  <p>There are several CAPTCHA solving services out there. Some of them are:</p>
  <ol>
    <li>
      <a href="https://www.capsolver.com/" target="_blank">
        Capsolver
      </a>
      : A leading CAPTCHA-solving service that offers a Chrome extension and API
      to automatically solve/bypass CAPTCHAs, including reCAPTCHA v2, v3, hCAPTCHA,
      FunCAPTCHA, and more.
    </li>
    <li>
      Anti-CAPTCHA: Using a hybrid of human workers and OCR (Optical Character
      Recognition) technology, Anti-CAPTCHA tackles a wide range of CAPTCHA
      types.
    </li>
    <li>
      Death by CAPTCHA: This service provides fast and reliable CAPTCHA solving
      using human workers and integrates with various popular software
      platforms.
    </li>
  </ol>
</details>

<details>
  <summary>7. What is 2Captcha?</summary>
  <p>
    2Captcha is a human-powered CAPTCHA solving service that helps you bypass
    CAPTCHAs. It is powered by humans who solve the CAPTCHAs for you.
  </p>
</details>

<details>
  <summary>8. Is there how I can avoid CAPTCHAs?</summary>
  <p>
    Avoiding CAPTCHAs entirely can be challenging since they are designed to
    verify that a user is human. However, there are a few things you can try to
    minimize encounters with CAPTCHAs:
  </p>
  <ul>
    <li>
      <strong>Use Trusted Networks</strong>: Logging in or accessing websites
      from trusted networks, such as your home or workplace, may reduce the
      frequency of encountering CAPTCHAs.
    </li>
    <li>
      <strong>Maintain a Good Online Reputation</strong>: Frequent online
      activity and responsible behavior, such as not engaging in spammy or
      suspicious activities, can help establish a positive online reputation and
      reduce CAPTCHA prompts.
    </li>
    <li>
      <strong>Use Browser Extensions</strong>: Some browser extensions and tools
      like 2Captcha and Capsolver can help you bypass CAPTCHAs.
    </li>
  </ul>
</details>


What is a CAPTCHA And How To Bypass CAPTCHAs


Online security is of utmost importance in the digital age. Captchas, those familiar puzzles that require users to prove their humanity by solving challenges, play a crucial role in safeguarding websites from automated bots and malicious activities.

While captchas have undoubtedly contributed to web security, they often pose challenges for disabled users and professionals like Data Entry Operators, Market Researchers, and SEO Specialists.

This article, sponsored by [Capsolver](https://www.capsolver.com/), sheds light on the accessibility issues and productivity hindrances posed by captchas and explores the potential of captcha solvers like Capsolver to create a more inclusive and efficient online experience.

## What are Captchas

<internalLink href="/blog/what-is-a-captcha-and-how-to-bypass-captchas">Captchas</internalLink>, short for **Completely Automated Public Turing test to tell Computers and Humans Apart**, is designed to differentiate between real human users and automated bots. These challenges may involve image recognition, distorted texts, or other interactive puzzles.

By solving captchas, users demonstrate that they are humans, preventing bots from accessing sensitive information or engaging in unauthorized activities.

Several types of captchas exist to differentiate between humans and automated bots. These captchas vary in format and challenges, each serving a distinct purpose in online security. Some common types of captchas include:

1. **Image-based Captchas**: These captchas require users to identify and select particular objects within an image. Users might need to select all images containing a specific object, such as a car or a street sign.
2. **Text-based Captchas**: These captchas present users with distorted or obscured text characters that must be deciphered and entered correctly. The distortion makes it challenging for automated bots to recognize the characters.
3. **Audio Captchas**: In these captchas, users listen to an audio clip containing a sequence of numbers or letters and then type in what they hear. This option caters to users who have visual impairments.
4. **Mathematical Captchas**: Users are presented with simple math problems that must be solved to proceed. These captchas are relatively straightforward for humans but can be challenging for bots to solve.
5. **Checkbox Captchas**: Often used with other captchas, they ask users to check a box indicating they are not a robot. This type is usually more straightforward and more user-friendly.
6. **Slider Captchas**: Users must slide a puzzle piece or a marker along a predefined path to complete an image or a pattern. This adds an interactive element to the captcha challenge.
7. **ReCAPTCHA**: Developed by Google, reCAPTCHA presents users with challenges like identifying specific objects in images or transcribing distorted text. It also employs an invisible reCAPTCHA that assesses user behaviour to determine their human status.
8. **hCaptcha**: Similar to reCAPTCHA, hCaptcha requires users to complete tasks like identifying objects in images or solving text-based challenges. It aims to provide user-friendly alternatives to traditional captchas.

![Types of Captchas](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1692377394/Article%20Images/Timonwa%27s%20Notes/Using%20Captcha%20Solvers%20to%20Improve%20Web%20Accessibility%20Work%20Productivity/types_of_captchas_ubf0am.png)

<figcaption>Types of Captchas</figcaption>

These various captcha types create barriers that automated bots struggle to overcome while allowing genuine human users to pass through with relative ease.

While captchas are designed to present challenges that are easier for humans to solve, it's important to note that they can sometimes be difficult for humans, especially for individuals with visual impairments, cognitive disabilities, or other accessibility challenges.

## The impact of Captchas on user accessibility and productivity

Just as Captchas play a vital role in ensuring security against automated bots, they can also affect user accessibility and professional productivity.

### How Captchas affect user accessibility

Captchas can unintentionally create difficulties for individuals with disabilities. Users with visual impairments or cognitive disabilities often encounter obstacles when faced with captchas that require deciphering distorted text or identifying hidden objects within images. These challenges can be equally daunting for humans as they are for bots.

For those relying on screen readers or assistive technologies, the visual nature of captchas without alternative text descriptions creates a barrier, hindering effective interaction. The struggle to decode distorted text or solve complex puzzles can lead to frustration and website abandonment. This lack of accessibility inconveniences users and denies them access to crucial online services, widening the digital divide and causing inequality.

Addressing these challenges is crucial for inclusivity and aligns with accessibility standards, making solutions like captcha solvers a bridge to a more accessible online experience.

### How Captchas hinder professional productivity

For professionals who encounter captchas frequently during work, these security measures can become a significant source of frustration and inefficiency. Having to solve captchas repeatedly disrupts their workflow and slows down their productivity.

This can lead to job dissatisfaction and reduced overall efficiency, impacting their ability to complete tasks promptly. As a result, finding solutions to simplify the captcha-solving process, such as [Capsolver](https://www.capsolver.com/), becomes essential for enhancing their productivity and job satisfaction.

## What are Captcha-solving services

Captcha-solving services are specialized solutions that assist in bypassing captchas. These services employ advanced technologies, including artificial intelligence and machine learning algorithms, to decipher and solve various captchas.

The primary purpose of captcha-solving services is to assist users, especially in professions that deal with frequent captcha interactions, such as data entry tasks, market research, and search engine optimization (SEO) activities, in overcoming the obstacles of captchas and improving their overall online experience.

By outsourcing the captcha-solving task to these services, users can save time and focus on more meaningful activities, such as their core tasks or browsing the internet. Captcha solvers, like [Capsolver](https://www.capsolver.com/), offer a promising solution to these challenges.

Capsolver is a leading captcha resolver service that harnesses the power of AI and machine learning to provide 100% effective solutions for bypassing captchas. Their cutting-edge technology ensures a seamless online experience for users while safeguarding websites from potential threats. Their commitment to inclusivity and productivity makes it a game-changer for disabled users and working professionals alike.

Professionals can integrate Capsolver into their workflow, enabling them to save valuable time and focus on more meaningful tasks, significantly improving their overall productivity.

And disabled individuals can access online services without facing accessibility barriers. This empowers them to navigate the web more independently and efficiently, bridging the digital divide and promoting inclusivity.

## Conclusion

Captchas, though essential for web security, can create accessibility challenges and hinder productivity for users. The emergence of captcha solvers like Capsolver offers a promising solution, empowering disabled individuals to access the web with ease and enabling data entry professionals to streamline their workflows. As we embrace more inclusive and efficient online experiences, captcha solvers like Capsolver are vital in bridging the gap between web security and user accessibility.

If you found this article helpful, please share it with others. Till next time, keep learning, keep growing, and keep sharing your knowledge.

<byeBye />

<connectWithMe />

## FAQS

<details>
  <summary>1. What are captcha-solving solutions?</summary>
  <p>
    Captcha-solving solutions are tools and services that automatically
    recognize and solve CAPTCHA challenges on websites by providing efficient
    and accurate responses, ensuring seamless interaction with online platforms.
  </p>
</details>

<details>
  <summary>2. What are some examples of CAPTCHA-solving services?</summary>
  <p>Some popular examples of CAPTCHA-solving services include:</p>
  <ol>
    <li>
      Capsolver: A leading CAPTCHA-solving service that offers a Chrome
      extension and API to automatically solve CAPTCHAs, including reCAPTCHA v2,
      v3, hCaptcha, FunCAPTCHA, and more.
    </li>
    <li>
      2Captcha: This service employs many human workers to solve CAPTCHAs,
      making it effective for complex or hard-to-solve challenges.
    </li>
    <li>
      Anti-Captcha: Using a hybrid of human workers and OCR (Optical Character
      Recognition) technology, Anti-Captcha tackles a wide range of CAPTCHA
      types.
    </li>
    <li>
      Death by Captcha: This service provides fast and reliable CAPTCHA solving
      using human workers and integrates with various popular software
      platforms.
    </li>
  </ol>
</details>

<details>
  <summary>3. How do CAPTCHA-solving services work?</summary>
  <p>
    CAPTCHA-solving services employ sophisticated algorithms and
    machine-learning techniques to analyze and recognize CAPTCHA images or
    audio. Some services use human workers to manually solve CAPTCHAs. In
    contrast, others rely solely on AI-based methods to automate the process.
    The solved CAPTCHA results are then sent back to the user
  </p>
</details>

<details>
  <summary>
    4. How can captcha solvers like Capsolver help me overcome captcha
    challenges?
  </summary>
  <p>
    Capsolver, an AI-powered captcha solver, navigates captchas easily,
    providing seamless access to websites without manual solving. It streamlines
    the process, making your online experience faster and more efficient.ce
    accessibility and ensure a seamless user experience for all.
  </p>
</details>

<details>
  <summary>
    5. How can I improve captcha accessibility for disabled users?
  </summary>
  <p>
    To improve CAPTCHA accessibility for disabled users, website owners should
    implement alternative CAPTCHA options, such as audio-based tests or simple
    math problems, to cater to individuals with visual or cognitive impairments.
    Additionally, providing an option to bypass CAPTCHA for registered users can
    further enhance accessibility and ensure a seamless user experience for all.
  </p>
</details>

<details>
  <summary>6. Are captcha-solving services secure and reliable?</summary>
  <p>
    Yes, captcha-solving services are secure and reliable. They offer a reliable
    and effective solution, ensuring websites remain protected while providing
    an inclusive user experience.
  </p>
</details>

<details>
  <summary>
    7. What are the common frustrations data entry professionals face with
    captchas?
  </summary>
  <p>
    Data entry professionals often encounter captchas repeatedly throughout
    their workday, slowing productivity and causing frustration. Captcha-solving
    services offer a solution by efficiently solving captchas, allowing
    professionals to focus on their core tasks.
  </p>
</details>

<details>
  <summary>
    8. Can captcha solvers benefit industries beyond data entry?
  </summary>
  <p>
    Absolutely! Captcha solvers have a wide range of applications. Market
    researchers, social media managers, SEO experts, online shoppers, and online
    gamers can all benefit from the increased productivity and accessibility of
    captcha solvers.
  </p>
</details>

<details>
  <summary>
    9. How does Capsolver work to ensure a seamless user experience?
  </summary>
  <p>
    Capsolver leverages sophisticated AI technology to recognize and solve
    captchas efficiently. By mimicking human behavior, it provides a seamless
    online experience, eliminating repetitive challenges and delays.
  </p>
</details>

<details>
  <summary>10. Does Capsolver integrate easily with existing systems?</summary>
  <p>
    Yes, Capsolver offers easy integration with over 1000+ platforms, making it
    convenient for users to access its services without complex programming
    skills. It ensures a hassle-free experience for all users.
  </p>
</details>

<details>
  <summary>
    11. What are the benefits of using CAPTCHA-solving services?
  </summary>
  <p>
    CAPTCHA-solving services offer several benefits, including improved user
    experience by reducing obstacles for users with disabilities, increased
    efficiency for data entry professionals facing numerous CAPTCHAs, and
    enhanced security for websites implementing CAPTCHA challenges. These
    services save time and effort for end-users while helping website owners
    protect against automated bot attacks.
  </p>
</details>

<details>
  <summary>12. Are there any limitations to CAPTCHA-solving services?</summary>
  <p>
    Yes, CAPTCHA-solving services may not be 100% accurate, and certain complex
    CAPTCHA types can still pose challenges for AI algorithms. Additionally,
    relying heavily on automated CAPTCHA solving could lead to developing more
    sophisticated CAPTCHAs, making it an ongoing cat-and-mouse game between
    website owners and malicious actors.
  </p>
</details>


Using Captcha Solvers to Improve Web Accessibility & Work Productivity

Guide to CSS logical properties

Creating Responsive Data Tables with CSS

How to Debug React Code: Tips and Tricks for Developers

How to Create React Search Component Using React Hooks

How to analyze Next.js app bundles

Top Features in Next.js 13

Build customized data tables with PrimeReact


As developers, we've all been there: handed a codebase that was done without proper planning, leaving us to navigate through a tangle of disorganized code. This can be incredibly frustrating when it comes to debugging CSS, where the improper use of CSS can make development and troubleshooting more difficult and time-consuming. In this article, I'll share my experience working with a poorly written codebase, how I tried to debug responsive web design issues, and the importance of using proper CSS methodologies to make development more efficient and effective.

![When you try to solve a bug in CSS by using !important everywhere and z-index:9999999.](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1686158395/Article%20Images/Timonwa%27s%20Notes/enhance-code-efficiency-with-css-methodologies/meme-dev-humor-when-you-try-to-solve-a-bug-in-css-261_f3uzja.jpg)

## The Problem and Challenges

I was working for a startup, and they were using Bulma CSS for their website. Most of the pages were already created but needed to be functional and more responsive, which was a significant issue. The problem was that the original developer had not used proper CSS methodologies. They used Bulma CSS alongside vanilla CSS and inline CSS to override styles. And when these methods didn't give them the desired result, they used the !important property even within the inline CSS, making the codebase a tangled mess. This made it very difficult to debug the CSS code and make the pages more responsive.

![two ladies standing at a party staring at something in shock. one of them is saying 'this is a mess'.](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1686158570/Article%20Images/Timonwa%27s%20Notes/enhance-code-efficiency-with-css-methodologies/7015d686-7fa8-4ac9-8672-cfe7312cc0c8_efcp97.gif)

In addition to that, I noticed that the developer had used unclear or nondescriptive names like **pt** and **mb** to target elements on the page. This made it difficult to understand the code and made it harder to make changes. To make matters worse, they also attempted to override the styles of the Bulma CSS class names by targeting names that were not working the way they wanted, resulting in a massive clash in styling, which made it nearly impossible to make significant changes without breaking something else.

However, I was determined to overcome these challenges and find a way to make the codebase more efficient and effective.

![Lady saying 'And I am not going to let anything get in the way of making it amazing'.](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1686158501/Article%20Images/Timonwa%27s%20Notes/enhance-code-efficiency-with-css-methodologies/giphy_2_ba0z1w.gif)

## The Solution

When I first encountered the poorly written codebase, I was initially hesitant to start from scratch. After all, the original developer had already put in a lot of work, and I didn't want to dismiss their efforts completely. However, as I dug deeper into the code, it became clear that the existing structure was too tangled and complex to work with efficiently. It was difficult even to understand what the original developer was trying to accomplish in some areas of the code.

![A man talking to another man saying 'I am thoroughly confused. What is going on?'](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1686158533/Article%20Images/Timonwa%27s%20Notes/enhance-code-efficiency-with-css-methodologies/z2uBNY6rh2Nm5gl74mh8uOdYn19BYOmywJBVglI3p5Wff3xF9jyOXxU_NCK77LXfkZ5KOu118QXY3UN1F4u6ff9QQpJ_lv32YWBAoAmErd0yEme3ODMtQ6Tw0clVrWSZVbg4R54QjefZOJlouislbS4_ij3muf.gif)

So, I decided to take a step back and reassess the situation. I realized that the best way forward was to start with a clean slate and rebuild everything using proper CSS methodologies. It wasn't an easy decision to make, as it meant throwing away a lot of work that had already been done. However, I knew that trying to work with the existing code would ultimately be more time-consuming and frustrating in the long run.

Using the Bulma CSS library proved to be the right choice, primarily since it was already being used in the codebase. By starting fresh and utilizing a standardized library, I was able to create a more responsive and efficient codebase. It also allowed me to cut down the code significantly, making it easier to maintain and update in the future.

Overall, the experience taught me the importance of using proper CSS methodologies and how it can save a lot of time and effort in the long run. While it can be tempting to take shortcuts and use quick fixes like !important or inline styles, these approaches often lead to messy, difficult-to-maintain code. By prioritizing readability, organization, and consistency, developers can create high-quality code that is more efficient and effective in the long run.

![A man saying 'Lessons have been learned'.](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1686158616/Article%20Images/Timonwa%27s%20Notes/enhance-code-efficiency-with-css-methodologies/giphy_3_jjumiq.gif)

## Importance of using proper CSS methodologies

CSS is a crucial aspect of web development, and it's critical to ensure proper CSS methodologies for the highest efficiency and effectiveness. One way to achieve this is by utilizing CSS frameworks or libraries, which provide standardized styles and functionality that make development more efficient.

Using a CSS framework or library can help improve the quality of CSS code. These tools provide standardized styles and functionality that can make development more efficient and collaborative. However, it's crucial to understand how the framework or library works and not rely solely on it without a solid understanding of CSS fundamentals.

It can be tempting to rely solely on these CSS frameworks or libraries to quickly achieve desired styles or layouts. Still, without a foundational understanding of CSS, this can quickly lead to a tangled mess of code. It's like trying to build a complex machine without first learning how the individual components work together.

![A master saying to his pupil 'First learn stand, then learn fly'.](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1686158651/Article%20Images/Timonwa%27s%20Notes/enhance-code-efficiency-with-css-methodologies/first-learn-stand-then-learn-fly_lial5b.gif)

Writing clean, well-organized CSS code is crucial for easy readability, comprehension, and debugging. It also allows developers to work more efficiently and collaborate more effectively. Developers can avoid common pitfalls and create high-quality, maintainable code by prioritizing a deep understanding of CSS before using frameworks or libraries.

A consistent naming convention for CSS classes and IDs is also crucial for maintaining a clean and organized codebase. It's essential to use descriptive and meaningful names for classes and IDs that clearly convey their purpose and the element they are targeting. When naming classes and IDs, using lowercase letters and hyphens to separate words is also best. This not only helps you understand your own code but also makes it easier for other developers to read and work with your code.

Additionally, following proper naming conventions allows for better collaboration and communication between developers, making it easier for others to understand the code's purpose and target elements. By following a consistent naming convention, you can create more maintainable and scalable code, which is essential for long-term success in web development.

It's important to understand that the use of "!important" should be reserved for exceptional cases where it's necessary to override styles that cannot be changed otherwise. The overuse of "!important" can make code maintenance and debugging more complicated, especially when dealing with large and complex codebases. When "!important" is used excessively, it can create a complex mess of conflicting styles, making it difficult to understand and modify the code. Learn more about [the dangers of using !important](https://blog.timonwa.com/the-dangers-of-using-important-in-css-why-it-should-be-avoided).

Although there are various CSS methodologies that developers can use to write clean and maintainable code, the codebase in question needed to be improved in these areas. By following established CSS methodologies, such as using descriptive class and ID names, keeping code organized and easy to read, and avoiding the overuse of "!important," developers can ensure that their code is maintainable and scalable. While learning and implementing these methodologies may take some extra time and effort, the benefits of a well-structured and maintainable codebase are worth it in the long run.

## Conclusion

In conclusion, as developers, we must prioritize proper CSS methodologies for efficient and effective web development. Neglecting these practices can lead to tangled and disorganized code, making it challenging to make changes or maintain the codebase. Using a CSS framework or library can be helpful. Still, having a foundational understanding of CSS is crucial to avoid common pitfalls.

Moreover, it's essential to follow proper naming conventions and avoid using !important, which can make code maintenance and debugging more complicated. By writing clean, well-organized CSS code, we can work more efficiently and collaboratively, leading to a more maintainable and scalable codebase.

Overall, taking the time to develop a solid understanding of CSS and utilizing proper CSS methodologies can significantly improve the quality and efficiency of our codebase, making our work as developers more enjoyable and effective.

Thank you for making it this far. I would love to hear your experiences and thoughts on the topic. You can share them with me on X (Twitter) or LinkedIn! Till next time guys...

<byeBye />

<connectWithMe />


How CSS Methodologies can enhance Code Efficiency

Creating smoother CSS transitions with Animate CSS Grid


CSS is a vital part of modern web development, responsible for how a website looks and feels. It defines the visual appearance of a website and enables developers to create beautiful and engaging web pages. However, there are some advanced features in CSS that, when misused, can lead to complications, including the use of !important.

!important is a CSS declaration that is used to override all other style declarations for a particular element. This declaration takes precedence over all other styles and is given the highest priority in determining the final appearance of an element. While it can be tempting to use !important to force specific styling, it should be avoided in most cases as it can create more problems than it solves.

When you use !important, you prevent other styles from modifying that element, which makes it difficult to adjust the styling later. It may seem like a good way to force the look of an element, but it can quickly spiral into a difficult-to-maintain codebase. As a result, debugging the CSS becomes a tedious task.

For instance, imagine you're working on a web page that has some styling issues. You try to change the color of a text, but for some reason, it's not working. You check your CSS files and find out that there is a color property already set for that text. Now, you want to overwrite that color property, so you add another color property and assign it to the color that you want. However, the new property does not take effect, and the text color remains unchanged. In this situation, you may be tempted to use !important to override the existing color property.

However, this solution creates another problem. By using !important, you have created a styling override that is difficult to manage. The next time you want to change the text color, you'll have to remember to remove the !important declaration, or you'll risk accidentally breaking other parts of your website. This scenario demonstrates how the overuse of !important can lead to poor maintenance and debugging of your CSS.

There are instances, however, when !important can be used as a debugging tool. For example, suppose you are experiencing styling issues on a page, and a particular style declaration prevents your changes from taking effect. In that case, you can use !important temporarily to test your new styles without removing the problematic declaration entirely. Once the issue is resolved, you can remove the !important declaration and ensure your CSS is structured correctly.

But it's crucial to remember that !important should only be used as a temporary solution, not a permanent one. Overusing !important can make maintaining and updating your code challenging, leading to a more extended debugging process. Let's discuss some of these problems below.

**Cascading issues**: In a scenario where you use !important in a parent element. It will override any style declarations in its child elements, which can create conflicts and inconsistencies in your website's design.

**Specificity wars**: !important can cause specificity wars in your CSS. When you use !important, you say that this particular style declaration is more important than any other declaration. This can create conflicts when multiple styles are applied to a particular element. The more specific and complex your CSS rules become, the more likely you will have specificity wars.

**Code duplication**: When you use !important, you essentially duplicate code. This can lead to bloated and redundant CSS code. In addition, maintaining and updating your code can be difficult if you have multiple instances of !important declarations throughout your CSS.

**Inflexibility**: When you use !important, you are creating inflexible CSS. This can make it difficult to change your design in the future. If you need to change the styling of an element that has an !important declaration, you'll need to modify the existing declaration, which can be a cumbersome process.

**Code readability**: !important can make your CSS code less readable. When you have multiple !important declarations throughout your CSS, it can be difficult to understand the hierarchy and order of your style declarations.

**Collaboration**: !important can also create problems when working collaboratively on a project. If you're working with other developers or designers, they may not be aware of your !important declarations, which can lead to conflicts and difficulties in merging code.

In conclusion, while !important can be helpful as a debugging tool, it should be used carefully. It's better to structure your CSS in a way that does not rely on !important declarations. It can lead to a cleaner and more maintainable codebase, making your life easier in the long run.

So the next time you're tempted to use !important, think twice before you add it to your code. With well-organized and structured CSS, debugging your code will become easier and quicker, saving you a lot of time and effort in the long run.

If you loved this article, please share it with your friends and tweet me your comments. Till next time guys...

<byeBye />

<connectWithMe />


The Dangers of Using !Important in CSS: Why It Should Be Avoided

When and how to use CSS will-change


Technical debt is a term that describes the cost associated with using quick and dirty solutions in software development. It is a consequence of prioritizing short-term gains over long-term technical excellence. Such costs include time, money, and resources.

When a team of developers is under pressure to meet deadlines, they may choose to take shortcuts in their code to get the job done quickly. While these shortcuts might help the team meet its immediate goals, they can also introduce additional complexity and risk into the codebase. This might involve using hacks or workarounds, skipping proper testing, or failing to follow best practices.

Over time, this technical debt accumulates and can lead to many problems. A code that is difficult to understand or maintain is more likely to have bugs, which can cause user issues and require even more time and resources. In addition, the need to constantly work around the shortcomings of the initial quick and dirty solutions can slow down future development and make it more challenging to add new features or make changes to the code.

Technical debt is neither bad nor good because of the different instances in which we can acquire it. Technical debt is just debt. Think of it like a financial debt. Sometimes taking out a financial loan is necessary. We might use that loan to start a business or pay for hospital bills. And at the end of the day, we either pay back the loan on time or suffer the consequences of late payment or lack of payment.

And just like financial loans, the cost of technical debt can be a trade-off for faster shipping times. What matters is that we accumulate debt prudently, manage it properly and have the plan to pay it back.

## Managing technical debt

Managing technical debt is a balancing act. On the one hand, it's important to avoid accumulating too much technical debt, as this can lead to significant problems down the road. On the other hand, it's also important to recognize that sometimes taking on a certain amount of technical debt can be a necessary trade-off to meet business goals or respond to changing circumstances.

One way to manage technical debt is to establish a formal process for tracking and addressing it. This might involve setting up a system for identifying and prioritizing technical debt and implementing regular code reviews and refactoring sessions to address the most pressing issues.

Another critical aspect of managing technical debt is communication. It's essential for everyone on the team, from the developers to the product managers and executives, to be aware of the technical debt that exists and to discuss the trade-offs involved in taking on additional debt. This can help ensure that the team makes informed decisions and works together to find the right balance between short-term gains and long-term technical excellence.

To effectively tackle technical debt, it's crucial to have a clear understanding of its causes and potential solutions. This way, you can proactively prevent and manage technical debt effectively.

## Causes of technical debt

There are many causes of technical debt, some of which are preventable and others simply an inherent part of the software development process.

### Lack of planning and design

One of the most common causes of technical debt is the lack of proper planning and design during the early stages of software development. When developers do not take the time to plan and design the architecture of a software application carefully, it leads to a lack of modularity, flexibility, and scalability. This can result in a codebase that is difficult to maintain and update, leading to a build-up of technical debt over time.

### Unclear requirements and scope

Another common cause of technical debt is unclear or incomplete requirements and scope during the development process. When developers do not have a clear understanding of the goals and objectives of a software application, it can lead to a lack of direction and focus. This results in a codebase that aligns differently from the application's intended purpose, leading to technical debt.

### Poor coding practices

Developers who do not follow best practices and coding standards can create a codebase that is difficult to read, understand, and maintain. This can lead to a higher likelihood of bugs and vulnerabilities, as well as increased time and effort required for code maintenance and updates. Poor coding practices can also cause technical debt.

### Legacy code and technical debt

Technical debt can also be caused by using legacy code in software development. Legacy code refers to outdated or deprecated code that has been inherited from previous versions of a software application. Using legacy code can be problematic, as it may not be aligned with current best practices and standards. This can result in a codebase that is difficult to maintain and update, leading to technical debt.

### Lack of code review and testing

Another common cause of technical debt is the lack of code review and testing during the development process. Developers who do not regularly review and test their code can create a codebase prone to bugs and vulnerabilities. This can lead to technical debt, as it may require more time and effort to fix these issues in the future.

### Lack of team collaboration

A lack of collaboration and communication within a development team can cause technical debt. If team members are not working together effectively, it can lead to a lack of consistency in the codebase, making it difficult to maintain and improve the software system.

### Pressure to meet deadlines

In today's fast-paced world, there is often pressure to meet tight deadlines and deliver software applications quickly. While this can be necessary in some cases, it can also lead to shortcuts and compromises in the development process. This can result in technical debt, as developers may prioritize speed over quality and long-term maintainability.

### Lack of resources

Developing a software system requires significant time, money, and expertise. A lack of resources can also lead to technical debt. If a company does not have the necessary resources to develop a software system, it may be forced to take shortcuts or make compromises that result in technical debt.

### Lack of focus on long-term maintenance and improvement

In addition, technical debt can be caused by a lack of focus on long-term maintenance and improvement. Many companies focus on getting a software system up and running as quickly as possible without considering the long-term implications of their decisions. This can result in a system that is difficult to maintain and improve over time, leading to technical debt.

## Solutions to technical debt

Fortunately, there are several steps that developers and organizations can take to reduce or limit technical debt.

### Plan and design carefully

One of the most effective ways to prevent technical debt is to carefully plan and design the architecture of a software application during the early stages of development. This involves creating a detailed roadmap for the development process, including the application's goals, objectives, and requirements. This helps ensure that the codebase is modular, flexible, and scalable, making it easier to maintain and update over time.

### Follow best practices and standards for coding

Another critical step in preventing technical debt is following best coding practices and standards. This involves using consistent coding conventions, such as naming conventions and coding styles, and following established design patterns and frameworks. This helps ensure that the codebase is easy to read, understand, and maintain, which will reduce the likelihood of bugs and vulnerabilities.

### Clearly define requirements and scope

To prevent technical debt, it is also essential to clearly define the requirements and scope of a software application during the development process. This involves creating detailed specifications and requirements documents and establishing clear milestones and deadlines. This helps ensure that the development team has a clear understanding of the goals and objectives of the application, which will prevent the codebase from becoming misaligned with the intended purpose of the application.

### Prioritize quality over speed

While prioritizing speed over quality can be necessary in some cases to meet tight deadlines and deliver software applications quickly, it is important to prioritize quality over speed to prevent technical debt. This means taking the time to carefully plan and design the application's architecture and following best practices and standards for coding. It also involves regularly reviewing and testing the codebase to ensure it is free of bugs and vulnerabilities.

### Refactor legacy code

It is vital to regularly refactor legacy code to align it with current best practices and standards to prevent technical debt. This can involve updating the codebase to use more modern programming languages, frameworks, and libraries and reorganizing and modularizing the code to improve maintainability.

### Regularly review and test the codebase

Another effective way to prevent technical debt is regularly reviewing and regularly testing the codebase throughout the development process. This involves using code review tools and processes to ensure that the code is consistent, maintainable, and free of bugs and vulnerabilities. It also involves conducting regular testing, such as unit testing, integration testing, and end-to-end testing, to ensure that the application is functioning as intended.

### Foster collaboration and communication within the development team

To prevent technical debt, fostering collaboration and communication within the development team is essential. This involves establishing clear roles and responsibilities and providing opportunities for team members to share their knowledge and expertise. It also involves using tools and processes to ensure that all team members work together and are on the same page throughout the development process.

## Summary

In summary, technical debt is a common and often inevitable part of software development. By understanding the costs and risks associated with technical debt and implementing strategies for managing it effectively, teams can avoid letting it become a significant hindrance to their success.

### Learn more about technical debt

- [What is Technical Debt?](https://www.productplan.com/glossary/technical-debt/)
- [How to Identify Technical Debt in Your Software](https://devsquad.com/blog/how-to-identify-technical-debt)
- [The 4 main types of technical debt](https://blog.codacy.com/technical-debt)
- [The Engineer's Complete Guide to Technical Debt](https://www.stepsize.com/blog/complete-guide-to-technical-debt)

Thank you for reading! Please share this article if you found it useful. If you have any questions or comments, please send me a message on X (Twitter) [@timonwa\_](https://twitter.com/timonwa_). Till next time guys...

<byeBye />

<connectWithMe />


Understanding Technical Debt in Software Development

How to Build a Real-time Chat App with React and Firebase

Deep dive into the CSS :where() and :is() functions


I'm the type of person to document and write down plans or steps for anything I do, but a lot happened to me in 2020/2021 when I was depressed and too broken to review or write out new plans. 2022 was the first time I started a new year without any short-term or long-term plans. The old ones were out the window; almost everything I knew about my life was gone as my life was heading in an unknown direction.

So I took a break from planning my life and left it 100% to God, wondering what the end result would be like. This article will discuss my 2022 challenges, accomplishments, and everything in between.

## ⏪For context

In 2021 I joined tech twitter, and when December came, I experienced the December holidays on its streets. Of all the happenings, the one that stood out to me was the EOY(End of Year) Review that almost every person was writing. I wasn't going to write a review for 2021 because it was too sad for me, but I told myself I would do so for 2022.

So even though I didn't have any plans for 2022 except to survive, I made a short list of tasks. Simple stuff I was sure I could finish and nearly impossible ones to inspire me. I also decided to document any achievements I made along the way.

And I recorded many achievements that I never imagined would happen to me in 2022. Out of the 28 tasks I gave myself, I finished 20 of them.

## 🕹My challenges

I journeyed into 2022 again without a laptop so learning web development and applying confidently for jobs or internships was still tricky for the first few months.

In February, I got a front-end developer role at a Nigerian startup. (I had to borrow someone's laptop for it.) I wasn't happy working there, but I wanted to gain experience. But the longer I stayed, the more it felt like a toxic environment. So after a few months, I left.

It also was challenging balancing a full-time job as a developer with writing articles as a hobby and having a healthy social life. In 2021, it was easy to write articles continuously because I was without a job. But in 2022, I struggled to write frequently. I wanted to write 20 articles for my blog but ended up writing 7.

And I worked on weekends because I wanted to meet the deadlines for the contract articles I was writing. But I tried to sleep as much as possible and rewarded myself occasionally for my hard work.

Social anxiety didn't allow me to network with people as I would have liked. When I wanted to go out, especially to tech events, I would prepare myself before the event on how to do my networking. At the event, I would panic and end up talking to a few people or not networking.

During the year's second half, I started volunteering my skills to the tech community. My friend [Benny Ifeanyi Iheagwara](https://twitter.com/Bennykillua) got me to speak at a twitter space and later as a facilitator for a training program. I was scared at first, but later relaxed and enjoyed the experience.

After the first training program, I got excited and started applying to other ones. I had already forgotten how busy I was and didn't expect to be picked by some of them. One time I had 2 programs running simultaneously for 3 months at the same time during my already stressful work life. It was hard trying to balance all these commitments, but in the end, I was happy I was a part of all of them.

## 🏆My Achievements

I had a lot of wins in 2022. Many of them I didn't dream or think of. My goal was to survive and see what God might do for me, and he surprised me. If someone were to tell me at the beginning of the year that I would achieve all these and be where I am today, I wouldn't believe it.

Almost all of the jobs and gigs I got in 2022 I never applied for. I was either referred to by a friend, or the company saw my work online and reached out to me.

I got to write articles, get paid for them, and have most of them published for companies like [LogRocket](https://blog.logrocket.com/author/pelumiakintokun/), [UploadCare](https://uploadcare.com/blog/author/pelumi-akintokun/), <internalLink href="https://blog.timonwa.com/what-is-a-captcha-and-how-to-bypass-captchas">2Captcha</internalLink>, and [Turing](https://www.turing.com/), to name a few. I wrote over 20 articles and had almost all of them published, with half featured on [Daily.dev](https://app.daily.dev/Timonwa), [CSS weekly](https://css-weekly.com/), and a couple of other Email newsletters.

I added more technical skills to my bag, including Vuejs, Bulma CSS, Next.js, Ant Design, and Redux Toolkit. I also got a new job at another startup, immediately after I left the first one. And I also got to experience what it was like to work in a sane environment.

I contributed to 5+ Open source projects, including <internalLink href="/blog/open-source-with-shecodeafrica-at-moja-global-contributhonbysca">Moja Global</internalLink>, through the [She Code Africa](https://shecodeafrica.org/) Contributhon program, which I participated in, and [ChRIS](https://github.com/FNNDSC/ChRIS_ui) through the [Outreachy](https://www.outreachy.org/) program. I also built an open-source project called [Tech Roadmap](https://roadmaps.timonwa.com), which provides free curated resources for code and no-code tech jobs.

I competed in 1 of the Hasnodes Hachathons and spoke at two Tech X (Twitter) spaces. One was hosted by [Non-Tech in Tech](https://twitter.com/nontech_it) (NTIT), and the other by [Nsonye](https://twitter.com/Nsonye_). Thank you, Benny, for getting me started on this talk/volunteering thing.

I got to guide/mentor a handful of individuals on technical writing, development, and design, and also be a mentor/facilitator for 4 programs. I was a Front-end developer mentor for the She Code Africa mentorship program and a Technical writer facilitator for the training programs hosted by [Yoable](https://www.yoable.org/), Nsonye, and [Empower Her Community](https://empowerher.community/) x NTIT.

I attended 3 in-person tech events; OSCAFest, CareerBuddy, and Startup Festival. And I volunteered for 3 more; Mara Blockchain Masterclass, DevFest Lagos, and the No-Code Tech Summit. And I attended a lot of online events as well. I also made friends from these events and many new friends online from different places, and I met several of them in person.

I also don't remember being depressed or extremely sad throughout the year. Baby girl was either happy licking ice cream or too busy with work to be sad or depressed. And I got to grow spiritually too.

My sister and I also bought my mum a new phone, and then I also bought myself a new laptop (not a Macbook, though), phone and tablet.

Then I went into investment again. I stopped because there was no money. _Sapa no let me_ (which in loose terms means 'poverty/brokeness did not allow me to').

## 📉My disappointments

There were only a few disappointments I had. I applied to many companies as a writer and developer and was rejected.

I also applied and wasn't picked for the Outreachy program and [The Collab Lab](https://the-collab-lab.codes/). I got discouraged and took a break from job-seeking during the second half of the year.

Then I lost a $36k+ job due to _village people_ (a term used my Nigerians to mean bad luck). Omo, I was sad for a couple of weeks.

## 💐Acknowledgements

I am thankful for a lot of people who contributed to my growth. I'm thankful to [Emmy Stephen](https://twitter.com/emmysteven_) for explaining what tech was all about and helping me decide which career path to follow, and to [Elijah Obominuru](https://www.linkedin.com/in/elijah-obominuru) for allowing me to prove myself and [Sandra Onome](https://twitter.com/sandra_onome) for the referral.

And to the people who supported me and cheered me on even when I wanted to give up countless times, including [Gabriel Akinyosoye](https://twitter.com/humaneguy), @[Joseph Tsegen](https://twitter.com/Tsegs_tech), [Eniola Oladipo](https://www.linkedin.com/in/oladipo-eniola-912b38189), and my beautiful sister, [Tomisin Akintokun](https://www.instagram.com/tomi_xoxoxo/), thank you.

And most importantly, I am thankful to God; it would have been harder without him, and to myself for not giving up and pushing through.

## 👩🏽‍🏫Lesson learned

Here are a couple of things I learned in 2022. First, no work is worth my mental health, even if I am my own boss. Another one was that if one were to die today from overworking for a company, that company would find someone to replace them immediately, so put yourself first.

The third was that having a life outside work is very important, especially if you are a developer. Most of us have formed the habit of working every day non-stop, especially in this work-from-home era.

I am not a fan of going out and socializing and was terrified of public speaking, but when I noticed that my little life was starting to become nonexistent, I had to force myself to meet people, make friends and do things I usually don't do. Basically, I left a lot of my comfort zones. It was scary, and it still is, but I know it's for the greater good.

Constantly recording my wins and losses, no matter small or insignificant I thought they were, really helped me visualize my year. I made a [Notion](https://affiliate.notion.so/lf6xqpcmgvpi) tracking document to keep track of my journey, and I'm excited to start the experience
again in 2023. (If you are curious as to what it looks like or want a copy of it, here is the [Yearly Goals and Progress Tracker Notion template](https://www.timonwa.com/shop/progress-tracker).)

365 days is a lot of days for someone to remember everything that happens. If I had done that in 2021 and celebrated even the tiniest wins, I wouldn't have been as sad or depressed as I was then.

Of Course, other lessons were learned, but these few were eye-opening.

## ⏩Moving forward

Nsonye tweeted asking what our one word for 2023 is, and I chose **Metamorphosis**. I have successfully survived 2020/2021 with all its downs and downs, and it has shaped me into who I am today. 2022 was the development process, and now it's time to fully morph into this new person I am becoming.

<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">
    My one word is metamorphosis. I am about to morph from my current states in
    all aspects to the next/better states. I have grown a lot this year, but
    next year is about to be in full force.{" "}
    <a href="https://t.co/29xJCezltE">https://t.co/29xJCezltE</a>
  </p>
  &mdash; World Class in Transit 🚀 (@Timonwa_) <a href="https://twitter.com/Timonwa_/status/1608364094888845312?ref_src=twsrc%5Etfw">December 29, 2022</a>
</blockquote>

In summary, I plan to learn more skills and improve on existing ones, move a few steps higher on the work ladder, write more articles and documentations, speak at events, mentor more people, build more awesome projects, contribute to more Open source, develop myself spiritually, mentally, and physically, go out more, make more friends, significantly increase my current earnings and enjoy life 100%.

And with this, we have come to the end of my Dev Retro 2022. Thank you for reading my EOY review. I hope you gained a few things from it. Welcome to the new year. 💃🏽

![happy new year](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699724715/Article%20Images/Timonwa%27s%20Notes/my%20journey%20through%202022/0522525a-6ba3-47aa-b5ae-b0354733a3f2_a5tu4m.gif)

<connectWithMe />


My Journey Through 2022: From Surviving to Thriving

Understanding Vue.js touch events for Android and iOS

Creating responsive images with image-set

Improving Next.js app performance with BlurHash

Building a draggable slider in React

Using the v-model in Vue 3 to build complex forms


So, earlier this year, I applied for and was accepted for SCA's Contributhon open-source boot camp. Yay. This note will talk about my experience and participation in the program.

## SheCodeAfrica (SCA)

[SheCodeAfrica](https://shecodeafrica.org) is a non-profit organization that focuses on celebrating and empowering females in tech across Africa.

### Contributhon by SCA

[Contributhon by SCA](https://shecodeafrica.org/programs/contributhon-1) is an annual open-source boot camp that allows girls from all across Africa to contribute to open-source projects for one month.

I've been a member of SCA for about a year, and I was excited when I saw a post about the Contributhon program on their slack workspace in March 2022. I had previously contributed to a few open-source projects, but this will be the first time I will have the opportunity to engage in an open-source program.

## Moja Global (Open source software)

The company I was assigned was [Moja Global](https://moja.global) and I was to work on their [Flint UI](https://github.com/moja-global) project.

Moja Global is a not-for-profit open-source software that allows its users to accurately and affordably estimate greenhouse gas emissions and removal from agricultural, forestry, and other land-use sectors.

Flint UI is the web-based user interface for Flint, the greenhouse estimation software system. Harsh Bardhan Misha was my mentor for this project, but I also received assistance from other members of the community as well, particularly Shloka and Akronix.

## The Journey

The program officially began on April 5th, with an onboarding call during which we met all the mentees from all the participating projects and learned more about each project.

### Meetings

Every two weeks we would have an online meetup section hosted by SCA, where one of the mentors from each project/company would talk to us and teach us a few things about Open source.

Flint UI however had weekly meetings where we discussed the UI(user interface) of the project and any other topics related to the project.

### My Contributions

Flint UI is primarily built with VueJs, TailwindCSS, and Ant Design Vue, so contributing was simple because I was already familiar with VueJs and TailwindCSS.

I spent most of my time improving some of the pages' responsive designs and migrating some of their components from TailwindCSS to Ant Design.

I submitted seven pull requests in total, six of which have been accepted. I was also tasked with checking for and identifying duplicate opened issues in the project repo.

### My Challenges

The project makes use of Docker (a platform for developing, shipping, and deploying applications), which I had never used previously. It was a little difficult at first, but the project's documentation made it simple to set up the project on my machine.

I also missed the first few Flint UI weekly calls because I was unaware of them at the time.

### My Wins

The whole experience itself is a huge win for me. I was contributing to an open-source project and actively interacting with other contributors who are from different locations in the world.

I also got to learn about new technologies. I learned about Docker; I won't pretend to know how to use it well, but I can say I understand it and why it's important for some projects.

I also learned about Ant Design, a user interface library containing easy-to-use components, and Moments.js, a JavaScript library that makes dealing with dates and time easy in JavaScript.

## Next Steps

Even though the program is near its end, I do not intend to stop contributing to Moja Global. I'll also keep looking for and contributing to other open-source projects while also honing my technical skills.

## Appreciation

I am thankful to SheCodeAfrica for this opportunity and to all the sponsors and mentors that made this happen.

I am also thankful to Moja Global for welcoming, accepting me and allowing me to contribute to their project.

### My pull requests

- https://github.com/moja-global/FLINT-UI/pull/278
- https://github.com/moja-global/FLINT-UI/pull/272
- https://github.com/moja-global/FLINT-UI/pull/269
- https://github.com/moja-global/FLINT-UI/pull/267
- https://github.com/moja-global/FLINT-UI/pull/261
- https://github.com/moja-global/FLINT-UI/pull/260
- https://github.com/moja-global/FLINT-UI/pull/251


Open source with SheCodeAfrica at Moja Global ContributhonbySCA


I had recently migrated one of my projects, an open-source called [Tech Roadmap](https://roadmaps.timonwa.com) from pure HTML, CSS, and JavaScript to React and was trying to make it SEO friendly for Google and other website crawlers. So I decided to use Helmet to give all the pages unique metatags and React Snapshot to prerender the pages.

The only problem was that React snapshot and its alternative React Snap were not compatible with React v18, the current version I was on which was a bummer. To fix the problem, I had to either downgrade the version to 17 or below or forget about SEO which I wasn't very happy about. Guess what I did? I learned NextJs instead.

I learned how to use NextJs in 2 days with the help of [Codevolution's NextJs playlist](https://www.youtube.com/playlist?list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH) on Youtube (which is an awesome course by the way) and used the 3rd day to migrate the web app, all 7 pages to NextJs.

It was quite an exciting experience for me as I found [NextJs](https://nextjs.org/) quite easy to use given my React background and that NextJs is a framework for React.

I thought I was in love with React before, but now I'm even more in love with it because of Next.js, and moving forward I will try to use NextJs as much as I can.

By the way, Next.js is a React framework that makes working with React easier and faster because of the unique features it comes with like

- automatically defining your routes for you,
- prerendering your pages by default which is good for SEO,
- there is no need for 3rd party packages to inject metatags into your different pages as it has its inbuilt package for that,
- using CSS modules that allow you to scope CSS styles to a particular component so you don't have to worry about your style rules clashing and many other nicest feature.

If you are already familiar with React, I urge you to try using Next.js. It would make coding so much easier and also make the online presence, SEO-wise, faster and better for whatever web app you are building. I will write more about NextJs later but for now, enjoy my mini-article/note.

<byeBye />

<connectWithMe />


How I learned NextJs in 2 days

Build a React theme switcher app with styled-components


Tech Roadmap provides you with roadmaps, articles, guides, videos, and other useful resources to help you choose a career path, start your journey and grow in tech.

> Knowledge increases by sharing but not by saving. ~Kamari aka Lyrikal

## What is Tech Roadmap

Tech Roadmap is a free online resource for anyone who wants to break into the tech industry or has already broken into it, choose and define their career path and learn about the skills needed to build themselves in the chosen career.

It lets you have access to collections of ebooks, videos, articles, guides, etc on different careers in tech including the no-code jobs. So if you are just starting your career or have yet to choose a career path, then you should check out [Tech Roadmap](https://roadmaps.timonwa.com).

## The Inspiration

Since I was a little girl, I had always wished that I could be a programmer like the guys I see on the tv but I never knew that I could study it in school let alone learn it on my own.

A few years back before the pandemic started, I stumbled upon an ad about Data Science and it sparked the interest in me again to learn about programming but this time I decided to learn it by myself.

The only problem was that I didn't have access to the right people or resources that could help me grow and I ended up learning the Html and CSS languages because I didn't know the skill set needed to become a data scientist. So I ended up becoming a frontend developer instead but I am loving it now though.

Recently I have also been getting messages from people online and offline about them wanting to learn tech but clueless about where to start or how to go about it.

So I built this project as a way to help them and other newbies wanting to start a career or transition into tech, who might be confused just as I was when I first started, understand the difference between each career and thus help them decide on the one they want and guide them on how they can go about it.

## How it Works

If you haven't chosen a career path and are unsure of what to pick, the careers page has resources that give information on the various types of jobs in the tech industry.

Once you feel knowledgeable enough to decide on the career path to start in, you can then move onto the career page dedicated to that career. There you will find a curated list of resources.

These lists are specially arranged so that you start learning the most important skills first, moving on to the next like a step-by-step guide or roadmap, helping you attain success and achieve your goals in the said career.

## The Tech Stack

This project was built with HTML, CSS, and JavaScript languages, the code hosted on [GitHub](https://github.com/Timonwa/techroadmap), the site deployed on [Netlify](https://www.netlify.com/), and Google Icons for the icons.

## Future Plans

Tech Roadmap is live with the first roadmap created [Frontend Development Roadmap](https://roadmaps.timonwa.com/careers/frontend).

I am working on adding more quality roadmaps on other Tech Careers. Anticipate! 😁

The project is currently built with HTML, CSS, and JavaScript. Soon all data will be removed from the html pages and placed into corresponding Json files to have cleaner html documents.

Readmes will also be created for each roadmap so that one can also have copies of the resources on GitHub by forking the repository.

It will also be migrated to the React Framework in the later future.

I also want Tech Roadmap to not just be a free online resource, but also be a growing community as well.

## Challenges Faced

Because I started the project a few days before the end of this Hackathon, I had to work faster than I have ever done to get it good enough for the showcase. This also made me decide on using pure Html and CSS as it would have taken me more time if I were to use a framework and create a database.

Although I have been passively saving up resources on frontend development while I was learning, it isn't easy gathering them especially since this project isn't just focused on frontend.

## Conclusion

It was really fun working on [Tech Roadmap](https://roadmaps.timonwa.com) and as I continue to build it, I hope that I can change the lives of more people transitioning into tech one resource link at a time.

## Links

- [Tech Careers Roadmap (website)](https://roadmaps.timonwa.com)
- [Tech Careers Roadmap (GitHub)](https://github.com/Timonwa/techroadmap)
- [Tech Careers Roadmap (X (Twitter))](https://twitter.com/TechRoadmap__)

<connectWithMe />


Tech Roadmap: Everything you need to help you choose and learn a career in Tech


I was working on a personal React project late December last year and had encountered errors while deploying it on Vercel and for the love of me could not figure out a solution to it. So I took a break from the project and didn't touch it until yesterday.

Deciding to check the status of the project before working on it, I saw that I had made changes on my remote repo and I had to pull it before I continue to work on it locally. And it was then I remembered why I had left the project untouched for that long in the first place and wanted to cry.

So I started the battle again of debugging both on my local repo and tackling the errors from my failed build on vercel. This time around I made sure I cleared all the errors and warnings that my react app was giving me on my console. The console was so white, I started doubting if that itself was an error. Then I pushed it to GitHub which automatically deployed it to vercel.

![console screenshot](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725496/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/QOMTmORU__vsbreu.png)

You would think that finally, it would deploy successfully, it didn't. Instead, I kept having `Build failed` along with warnings and `Error: Command "CI=false npm run build" exited with 1` as feedback.

![Build failed screenshot](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725521/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/e9dq4E6JO_tpsava.jpg)

![warning screenshot](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725541/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/nN7aVU2DLL_cdozgi.png)

![error2 screenshot](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725562/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/H6pg8ZCEs_l2dnsq.png)

I tried fixing the error after a few googling and stack overflow visits but I was still getting the warnings and failed deployments.

They were warnings mind you and not errors, so I still expected the code to deploy successfully. And I just couldn't figure out why it wasn't going through. I even shared the problem with some dev friends in one of my WhatsApp group chats.

I lost count of how many times I made tweaks and redeployment of an already perfect code and just when I was about to give up again and abandon the project for God knows how long this time around, I decided to just read for reading sake every single line of the Build log. And you wouldn't believe it, the actual f\*\*\*king error was sitting there in all its splendor, mocking me at how well it had disguised itself.

![component1 error screenshot](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725588/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/TzNIJxgsF_txqk1g.png)

Not only had I missed the ``Failed to compile` line but I also did not see the other errors in the lines that preceded it.

They weren't highlighted in red or yellow as errors and warnings usually are. I'm trying not to curse again, but the mother\*\*\*\*er was just sitting there in full incognito mode.

> It's a new year and we are barely halfway through January but the coding violence has already begun.

![woman saying hope you are ready to fight.gif](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725616/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/QArbJU5wZ_auus6x.gif)

Finally, I had found the cause of my deployment woes, or did I?

No. No, I did not. Looking at the
incognito error critically and closely, I saw that this was an error my react app would have definitely with all affirmation thrown at me while I was coding and as I mentioned earlier, I made sure I cleared every single warning and error before pushing the code. So what the hell was going on?

![a confused monkey with what is going on written on the image.gif](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725643/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/OxpnOGvAd_ab9yvm.gif)

Deciding to now view the code on GitHub because the code on my local repo was **perfect**, I realized that the code I had there was different from what I had countlessly pushed to it.

![stuffed animal sitting on a chair with camera moving around it, the word why printed on the gif](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725668/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/NoOGJ5cMr_kw0hpx.gif)

Was I seeing double? No. Why was it happening, I dunno. And frankly, I was too tired at this point to care, I just wanted my code to deploy successfully. So I made the necessary changes to the file on GitHub, committed, and deployed it again. Fingers crossed that it would work now.

It didn't. I read the Build log again and saw the same incognito error disguised in another form.

Another file was having the same issue and I began to reason that if I were to redo the previous steps I had taken again, I might encounter another one because the Build log wasn't showing me at once all the files that were sharing this same error.

![component2 error screenshot](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725693/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/B7gOQbXTW_csltqe.png)

So I just decided to delete the entire **src folder** from the repo on GitHub, make a copy of the perfect src folder in my local repo to my desktop, pull the changes from GitHub, and then add again the copy of the src folder I made earlier and push it back to GitHub. This time it worked. It actually worked. The relief and excitement I felt could not be expressed with words.

![man showing expressions of relief and excitement](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725715/Article%20Images/Timonwa%27s%20Notes/why%20my%20react%20app%20failed%20to%20compile/QYatWsSCk_oygpue.gif)

I had gone through all this stress and trouble and project abandonment just because I didn't _fara bale_ (a Yoruba translation of saying "take time") to read the Build log. All these would have easily been avoided if I had thoroughly read the damn **Build Log**.

Now, judging from all the bugs and errors I have come across since I started my coding journey, I have finally come to the realisation that

> Bugs and Errors will come in different shapes and sizes, styles and formats you never expect, sitting in plain sight or disguise. And the diversity of them requires you to most times be calm and patient, think outside the box, waaaaay outside the box. Oh and read thoroughly through the damn Build log.

I hope this note gives you hope and motivation in finding patience, perseverance, and unexpected ways to tackle your next **incognito error or code violence** 😁.

Please share this article with your friends if you found it useful. Till next time guys. Byeee!

<byeBye />

<connectWithMe />


Why my React App Failed To Compile

How to create your own custom Code Snippets right in your Code Editor


> Tech is the new Oil and Gas and everyone wants a part of it.

When most people think about Tech jobs, they think of coding, programming, hacking, maths. Although they are right, the tech industry encompasses more than just programmers and hackers. There are a lot of other jobs in the tech industry especially ones that do not involve writing codes or solving mathematical problems and those roles will be the focus of today's note.

There are so many roles in the tech industry that if I were to write about all of them this would be a long read I still would not be able to cover them all.
And because of lack of access to information or mentorship, people who want to start a new career in or transition into tech, find it hard to pick a career path to follow.

So if you are a person that wants to start a new career in tech and also doesn't want to write a single line of code, this note is for you.

Now, do note that some of these roles are not limited to the tech industry, which makes it easier for people already doing it or something related to it to transition into or out of tech. And also that a few of them might need you to have some foundational coding knowledge. It is not required but it does help you understand and appreciate the work that you do and help your programming colleagues have a less frustrating day, no offence to UI designers and job recruiters.

So without further ado, let's dive into it.

## Design

1. UX Designer: Also known as a User Experience Designer is responsible for the way a person feels about using a website, app or video game. They spend their time making sure that everything works not only as it should, but also in a way that is logical and easy to understand by the user.

2. UI Designer: Also known as a User Interface Designer focuses on the visual part of the website, app or video game that a user sees and interacts with. They create all the screens through which a user will move to and from on the website or app. They work closely with UX designers and developers, providing insights and incorporating feedback into the designs. It is a subset of UX design.

3. Mobile Designer: The experience you get while accessing a website/app on a mobile phone or tablet is quite different from when you access it on a larger screen. Mobile Designers ensure that such websites and apps work well across a variety of devices. You will find them working closely with UX and UI designers.

4. Graphics Designer: They create designs for advertisements, brochures, banners, magazines, corporate reports and other visual representations for companies and clients using them to communicate ideas to inspire, inform, or captivate consumers through both physical and virtual art forms. By constant communication with clients, customers, and other designers, they ensure that their designs accurately reflect the desired message and effectively express the information with an end goal to make the company that hired them recognizable and prominent.

## Marketing, Sales and Branding

5. SEO/SEM Consultant/Specialist: SEO(Search Engine Optimization/Marketing) helps websites rank higher in search result pages(Google for example) thus helping users easily find it. The work of an SEO Consultant is to help websites gain more traffic and online exposure. They are knowledgeable of search engine behaviours and algorithms and use strategies such as keywords, metadata and tags to increase search rankings.

6. Web Analytics Manager: If SEO has to do with how users find a website, web analytics is all about what they do once they get there. Here you're now analyzing how users behave on that site. A Web Analytics Manager will collect, measure and analyze data (like web traffic, acquisition, and conversion) so he can make sense of how people are using the site, hence optimizing it based on that data collected.

7. Digital Marketer: Digital Marketing entails the promotion of products and services through a variety of digital channels, so instead of magazine ads and radio commercials, for example, digital marketers advertise on new media platforms like social networks, email, and blogs. They are responsible for and play a major role in enhancing brand awareness in the digital space to drive traffic and acquire leads/customers.

8. Social Media Manager: Social Media Managers are in charge of representing a company across social media channels as the sole voice of the brand providing them with the guidance needed to enhance their online presence. They manage the day-to-day activities of these channels such as LinkedIn, Facebook, X(Twitter), Pinterest, Instagram, TikTok and YouTube, adapting content to suit the different channels. They also respond to comments, create content and campaigns on the company's behalf.

9. Community Manager: Community Managers are the social advocates of a brand. Where the social media manager will post content as the brand's account on social networks, a community manager will post content as a brand ambassador under their personal account, and work on developing the community by participating in discussions, finding new customers and listening to the current ones. They focus more on the community of a brand than the social presence of a brand.

10. Software Sales Consultants: Software Sales Consultants work in the SaaS (software as a service) sales field. Like other sales positions, they are responsible for generating leads, negotiating contracts and closing deals. They manage relationships with clients and vendors helping them identify their software needs and then matching them to the right products and services as part of closing the deal.

## Management

11. Product Managers: Product Managers oversee the entire life cycle of a new product, from idealisation to launch. They work closely with all departments, including development, design, marketing and executives, to ensure a specific product meets a specific client need, meets quality standards and stays on schedule.

12. Project Manager: A Project Manager, on the other hand, is responsible for planning and overseeing projects within an organisation, from the initial ideation through to completion. They coordinate people and processes to deliver projects on time, within budget and with the desired outcomes aligned to objectives. Where the product manager sets the vision for the product that needs to be built, gathers requirements, and prioritizes them, the project manager acts upon this vision and makes sure that it is executed on time and budget.

## Writing

13. Technical Writer: A Technical Writer transforms complex technical information into documentations that are easy to read and understand by target audiences. Technical writing may take the form of creating instructions, documentation or even press releases describing a new product the company is releasing.

14. Technology Journalist: Technology Journalists research and report on matters related to technology. They can work for private publications, professional organizations, newspapers, magazines, radio, television, websites, blogs, etc. They monitor industry trends, attend conferences and events and conduct interviews. They write for consumers who are interested in tech-related products or services.

## Testing

15. QA(Quality Assurance) Specialist: A QA Specialist evaluates software and applications by developing and running a series of quality tests, then documents and analyzes the test results to determine whether the software meets specifications or requirements.

16. Game Tester: A Game Tester plays video games that are under development to check for errors, also known as glitches or bugs. They work closely with the game developers and other technical members of the development team.

## Administrative roles

17. System Administrator: System Administrators manage the physical components of networks and computer systems, often installing, maintaining, updating, and upgrading software, cables, accessories and other hardware components, backing up files, creating firewalls, and more. They also help employees or clients troubleshoot and resolve technical issues.

18. Database Administrator: A DB Admin's job is to install, maintain and secure the databases and data storage of a company. They ensure that the company's applications have continuous working and uninterrupted access to data. Most modern organizations use at least one DBMS(Database Management Systems) and therefore require database administrators.

19. Cloud Administrator: A Cloud Administrator handles cloud computing services for their organization. They design, set up, and manage cloud data storage and access services, transition locally hosted data to the cloud, configure cloud environments to meet the company's needs, design systems for data management and work to prevent security issues.

## Others

20. Technical Support Specialist: A Tech or IT Support Specialist educate customers and employees, answer questions, and troubleshoot any related problems about technology-based products and services. Technical support can be internal (within a large organization, helping coworkers) or external (helping customers).

21. Technical Recruiter: Technical recruiters recruit, interview and present candidates for IT positions. They have a foundational understanding of IT positions and their responsibilities, as well as strong interviewing and communication skills. While you won't be spending your days' coding as a technical recruiter, chances are you'll be lost if you're not familiar with coding/development lingo. That's because as a recruiter, you're responsible for finding, interviewing, and ultimately hiring tech talent–so you have to know enough to vet them properly.

So that's 21 tech roles you can do without writing a single code. I hope you found this insightful and that this note helps you in deciding your next career path.

Hit the reaction button and subscribe to my newsletter to not miss upcoming notes.

Till next time guys. Byeee!

<byeBye />

<connectWithMe />


21 no-code tech jobs: You don't need to write code to become a Tech Sis/Bro.


This note aims to explain the difference between them and hopefully, at the end enlighten you more on how and when to use them.

## Prerequisites

I am going to assume that you already have basic knowledge on

1. Html elements and
2. CSS selectors.

And with that on the confirmation,

![lady saying lets get started](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699723838/memes/gtL8MNgSES_u3xze8.gif)

---

Basically, they are CSS selectors. CSS selectors are used to select elements in our html document so we can apply CSS styles to them. Let's dive into the ones mentioned above.

## The universal selector

First, let's start with the universal selector `*`. As the name implies, it is a universal selector which selects all the elements in your html page, it's as simple as that. Any styling you give to the universal selector gets applied to every element on the page. For example,

```css
* {
  border: 1px solid red;
}
```

Here all the elements in your webpage will have a red border. This becomes useful when debugging CSS whereby you want to know the amount of space each element is occupying.

You can also use it to give some CSS reset to your elements. For example,

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```

Here all the elements will have 0 margins and paddings on all sides with their box-sizing set to border-box.

<advertCard />

Note that the style given through the use of `*` can be overridden by styles given in individual element selectors and should not be used to give permanent styles to elements.

```css
*{
color: red;
margin 5px;
border: 1px solid black;
}

p{
color: green;
}
```

```html
<body>
  <div>
    <span>I'm a red span.</span>
    <p>I'm a green paragraph.</p>
    <p>I'm a green paragraph.</p>
    <p>I'm a green paragraph.</p>
    <span>I'm a red span.</span>
  </div>
</body>
```

You will see that our p elements would have a color of green instead of red, while other elements in our case the span element would receive the universal color of red.

You can also select all the descendants of a particular element or CSS selector, by placing the `*` after the CSS selector.

```css
* {
  color: red;
  margin: 5px;
  border: 1px solid black;
}

p {
  color: green;
}

.sample-element * {
  color: blue;
}
```

```html
<body>
  <div>
    <span>I'm a red span.</span>
    <p>I'm a green paragraph.</p>
    <p>I'm a green paragraph.</p>
    <p>I'm a green paragraph.</p>
    <span>I'm a red span.</span>
  </div>
  <div class="sample-element">
    <p>I'm a blue paragraph.</p>
    <p>I'm a blue paragraph.</p>
    <span>I'm a blue span.</span>
  </div>
</body>
```

## The :root selector

`:root` on the other hand is a pseudo-class selector. It selects and represents the root element of your document, i.e. the highest-ranking parent element of your document, in our case the html element.

You might think that the `html` element selector and `:root` selector are the same because they both represent the root parent element but they are not.

Remember I said the `:root` selector targets the root element of your document, the keyword being **document**. This means that your document doesn't necessarily have to be your HTML document, it could also be an XML document, XHTML document or any other document you want to apply CSS style on. And thus the parent element of these files will be the one targeted when you use the `:root` selector. That is the html element, xml element and xhtml element respectively.

This also means that when using the `:root` selector and html element selector for example to apply a style, the style in the `:root` selector will have a higher specificity than the style in the html element selector as seen in the example below.

```css
:root {
  background-color: red;
}

html {
  background-color: green;
}
```

You will see that the background color is red instead of green.

The `:root` selector is also used to declare global variables. <internalLink href="/blog/using-css-variables-like-a-pro">Variables</internalLink> in CSS are reusable styles. For example, you have a specific hex code that you want to use as the color for a particular set of elements, instead of memorizing the hex color and entering it one by one on each CSS selector, you can just define it in your `:root` and then call it in each CSS selector. Then when you decide you don't like the color again, you can change it in the `:root` instead of manually going through all the CSS selectors one by one that you had used it in. This makes it easier to manage repeated styles. (You can read more on <internalLink href="/blog/using-css-variables-like-a-pro">variables</internalLink> in my previous note.)

```css
:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
}

h2 {
  color: var(--primary-color);
}

p {
  color: var(--secondary-color);
}
```

All `h2` element and `p` element in your page will receive the hex color of `#ff0000` and `#00ff00` respectively.

<advertCard2 />

## The html element selector

Now let's talk about the `html` element selector. The `html` element selector refers to the root element of an HTML document. It contains two child elements which are the head element and body element.

Some styles declared in the `html` element selector will be inherited by all elements in the html file such as color and font styles. While some will not be inherited like the background color.

Here only the `html` element will have the background color while the other elements will have a background color of transparent which is the default for all elements. This then gives you the illusion that all the elements have the same background color as the `html` element.

It is not recommended to apply styles to the `html` element because they will be overridden by the `body` element styles and any other element in the document.

The only exception could be if you want to declare the font styles that will be inherited by all its descendant elements, especially the font size. This is because the `html` element selector as the root element, has the rem (root em unit) sizing of any element based on whatever font size set for the element (root element).

So for example,

```css
html {
  font-size: 16px;
}
.rem-block {
  font-size: 1.2rem;
}
```

The `.rem-block` will have a font size of 19px.

Most of the time if not all the time, the body element would take up all the space in the html document so there would be no point in styling the html element when the body element is eventually going to cover it up in the browser.

## The body element selector

The `body` element selector on the other hand contains all the elements that we see or view in our web browser.

There isn't much difference between the `html` element selector and `body` element selector, other than the fact that the `body` element selector has higher specificity than the `html` element selector. Hence whatever styles you have in the `body` element will override any replicate style in the `html` element. And also its style can be overridden by the element styles within it.

As I said earlier it is better to give styles to the `body` element than the `html` element because the `body` element covers the entire `html` element and it also is the element that actually contains all other elements that we see in our browser. While the `html` element just specifies the root element and the type of document.

## Let's recap.

### The universal selector

- It is a universal selector that selects every element in the html document.
- It can be used to give universal styles to all elements.
- It can also be used to select all descendant elements within a particular element.
- It can be used to create CSS resets.
- It can be overridden by other element styles.

### The :root selector

- It is a pseudo-class selector.
- It represents the root parent element of your document.
- It can be either an html, XML, SVG tag, etc depending on what document you are styling with CSS.
- It has a higher specificity than html element selector.
- It is used to declare global variables in CSS.

### The html element selector

- It is the root element of an html document.
- It contains 2 child elements being the head and body elements.
- Some styles declared in it are inherited by its descendants and can be overridden by them.
- Only necessary styles should be applied to the html element like the font styles.

### The body element selector

- It covers the entire html document viewed in the browser.
- It holds all other elements displayed in the web browser.
- It's better to declare styles in the body than in the html.

Whew, you made it up to the end of this article. Thank You. I do hope you by now understand the difference between the `*` selector, the `:root` selector, the `html` element selector and the `body` element selector and how to use them. If you did please share this article, send me a tweet and leave your reactions down below. 😁

Till next time guys. Byeee!

<byeBye />

<connectWithMe />


all vs root vs html vs body selectors


Ok, so a lot of us have been there and will still be in such a situation of learning something new whether code related or otherwise and how fast we master that skill depends on if we have the right resources and right people around us.

The resources could be books (softcopy or hardcopy), documentations on the subject, tutorial videos, learning platforms, mentors, boot camps, friends, etc. With lots of options out there, it might be overwhelming at first for beginners and newbies to learn or even choose which style of learning they are comfortable with. Some people like to study in groups while some like me like to study alone. And some would prefer reading to watching videos and vice versa. A few would be comfortable doing both.

For me, it wasn't much different. I wanted to learn Frontend Development and I had access to unlimited resources but I still didn't understand what I was doing, I was just going in circles and not making any progress. Consuming data but not being able to turn it into useful information.

Here's the thing, in learning a new skill, even if you have access to all the resources and people in the world, if you don't know how to distinguish between what is needed or of value to you, then you will gain nothing, just learning in circles.

So after a long time wasted, I finally sat myself down and told myself that I need to start learning and creating something. I then tried to figure out what learning style works for me and what materials and YouTube videos I was understanding. In doing so, I was able to reduce my scope of resources. I realized I prefer to read part of the documentations first while I watch a crash course on the language before then watching a full course on it and then create projects from what I learnt and over time I was able to create a list of resources that I still use today and sometimes share with my friends too on Frontend development. And I will also be sharing them here too for those who might find them useful to them.

## My Frontend development resources

Like I said earlier, I would first read part of the documentations, while I watch a crash course on it, followed by a full course video that I code along with. Then after that, I make unique projects with what I have learnt so far. I often try to limit my tutorial videos to 2 videos (Crash course and full course). So its really important to find good tutors whose videos you easily understand.

### The 3 top websites I shuffle between when I want to read are:

1. [MDN Web Docs](https://developer.mozilla.org/en-US/) (formerly known as the Mozilla Developer Network or MDN). It is a free resource for in-depth documentation on web standards such as HTML5, CSS, JavaScript, and much more. If you want to know everything there is to know about a web language, this is the place to be.

2. [W3schools](https://www.w3schools.com). It is a free educational website for learning to code online.
   It is the first place I go to anytime I want to learn something new or want to quickly refresh my memory. You can also practice what you learn on the web pages without leaving your browser.

3. [Freecodecamp](https://www.freecodecamp.org). In addition to coding while learning in your web browser, you can also interact with their ever-growing online community using forums, chat rooms and learn more from the tons of published articles on their site written by other developers. And if you feel you would rather watch a video instead, they curate full videos on all their courses too on their [YouTube channel](https://youtube.com/c/Freecodecamp).

### Next up is my list of YouTube videos divided into two;

Crash-courses/Full course videos and Playlists.

#### Crash course/Full course videos

A Crash course is a course where you learn a lot about a particular subject over a short period. This helps you get an idea of what that subject is all about.

- [HTML crash course by Brad Traversy](https://youtu.be/UB1O30fR-EE)
- [CSS crash course by Brad Traversy](https://youtu.be/yfoY53QXEnI)
- [CSS Flexbox by FreeCodeCamp](https://youtu.be/-Wlt8NRtOpo)
- [CSS Grid by Brad Traversy](https://youtu.be/jV8B24rSN5o)
- [CSS Grid by Dev Ed](https://youtu.be/EFafSYg-PkI)
- [JavaScript full course by FreeCodeCamp](https://youtu.be/PkZNo7MFNFg)
- [JavaScript DOM by Brad Traversy](https://youtu.be/0ik6X4DJKCc)
- [15 basic JavaScript projects by John Smilga](https://youtu.be/c5SIG7Ie0dM)
- [10 JavaScript projects in 10hrs by Florin Pop](https://youtu.be/dtKciwk_si4)
- [40 JavaScript Projects for Beginners by Jessica Wilkins](https://www.freecodecamp.org/news/javascript-projects-for-beginners/)
- [Git crash course by Brad Traversy](https://youtu.be/SWYqp7iY_Tc)
- [Git crash course by FreeCodeCamp](https://youtu.be/RGOj5yH7evk)
- [Google Chrome Developer Tools by Brad Traversy](https://youtu.be/x4q86IjJFag)
- [Google Chrome Developer Tools by Codedamn](https://youtu.be/Uuaue9odUEo)
- [Figma Tutorial by DesignCourse](https://youtu.be/3q3FV65ZrUs)
- [Figma Tutorial by Example 2021 by DesignCourse](https://youtu.be/Gu1so3pz4bA)
- [Design a Website with Figma by Dev Ed](https://youtu.be/FK4YusHIIj0)

#### Video Playlist

And now we go into the YouTube playlists. A playlist is a collection of videos. These playlists usually contain everything you need to know on a particular subject. They pick each topic and subtopics one by one in sequential learning and explain them with examples in dedicated videos.

- [Learning CSS by Steve Griffith](https://youtube.com/playlist?list=PLyuRouwmQCjl4wTSNbb8RTKZuyMhoIxBe)
- [CSS full tutorial by Dev Dreamer](https://youtube.com/playlist?list=PL7TLF4T4Tq2RCWa-ZRkEWXVtXteyZ2CjK)
- [CSS Animation series by Dev Tips](https://youtube.com/playlist?list=PLqGj3iMvMa4LvJ8VctoXnPI0dtE40wfid)
- [JavaScript for frontend dev beginners by Telusko](https://youtube.com/playlist?list=PLsyeobzWxl7qtP8Lo9TReqUMkiOp446cV)

#### Additional Youtube info.

I usually watch [Kelvin Powell](https://youtube.com/kepowob), [Web Dev Simplified](https://youtube.com/c/WebDevSimplified) and [Dev Ed](https://youtube.com/c/DevEd) videos for tips and tricks on CSS elements. I learn a lot about elements I haven't had before or ones people rarely use or know about and how to make CSS work easier for me(and you too). And no matter how sad or down you are, watching a Dev Ed video will automatically cheer you up and have you laughing. They also make some of the coolest code-with-me tutorials on web development projects. And I watch [DesignCourse](https://youtube.com/c/DesignCourse) videos when I need help with web design fundamentals.

I almost forgot to mention [Online Tutorials](https://youtube.com/c/OnlineTutorials4Designers), he makes tutorials on how to make various animations and effects and projects relating to frontend and web design which are very easy to follow and the most amazing part of it are that he doesn't even talk in the videos but you will always understand what he's doing in them. And if you want to practice your skills and make cool transition and animation with CSS and Javascript then you should check him out.

### Code Learning Platforms.

Like I said earlier, I much prefer to self learn, but sometimes you need to interact with people too to share and gain more knowledge and also build upon your people and soft skills too.

I partook in an online tech training hosted by SideHustle Internship where I made my first few tech friends and also got involved with the [X (Twitter)](https://twitter.com/timonwa2) tech community. I also joined another after that, a training hosted by the [Zuri team](https://www.zuri.team) which also helped me in learning how to work in teams, meet up deadlines and interact with other people in the workspace also. And right now they are hosting an internship in partnership with [HNG](https://internship.zuri.team) which I am also partaking in being in the Frontend development track.

I hope to learn more from it and by the end of the internship, level up my Frontend dev skills most especially in JavaScript, make more new friends and make it to the final level(fingers crossed).

To grow as a developer, you not only need technical skills but you also should know how to interact with people like your co-workers and clients because you will be dealing with people from different locations and cultures, different backgrounds and characters and different areas of life. And with Zuri Team I not only get to work with people from my country but for other places in and out of my continent as well.

There are many other training platforms (boot camps, training, internships) out there both paid and free that you can join too. I could name a handful but I'm limiting this to the ones I have used and partook in. (I could write an article on this if you would like to know them.)

So these are the resources I used and still using that has gotten me here so far. I hope it helps you too on your coding journey.

Whew, you made it up to the end of this article. Thank You. I hope you enjoyed reading this as much as I did writing it. I would like to know, do you prefer to read documentation and articles when learning a new language or do you prefer to watch video tutorials or do you do both like me.

Till next time guys. Byeee!

<byeBye />

<connectWithMe />


Resources that helped me on my Frontend Development Journey


<infoCard title={"Update"} color="grey">
  This article has been updated in a new article to reflect the new GitHub UI.
  You can read the updated version{" "}
  <internalLink href="/blog/how-to-fork-a-repo-on-github-using-your-mobile-device">
    here
  </internalLink>
  .
</infoCard>

Have you ever been in a situation where you are scrolling through a repo on GitHub on your mobile device and wanted to fork it but could not because the feature is not available on mobile and you had no access to your computer at that moment, and when you eventually did, you had forgotten the name or the link to that repo? I know I have, a couple of times. And being the type who would prefer to do all things internet related on my mobile rather than on my computer because where I live, electricity is not stable and the cost of data is high and my computer has made it a competition between itself and chrome on who can consume the most data any time I connect it to my hotspot. So I had to find a solution to my dilemma.

After a lot of google searches and zero solutions to my problem, I had almost given up, until an idea hit me.

![hey gif](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725830/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/eb3I4MtHx_arfpbf.gif)

Why don't I change my browser mode from mobile to desktop? That usually works when a website wants to act -know it all- for me and restrict my access to some settings or features only available on the web. Like I don't understand, why can I only change my username using a computer when I used my phone to register for your services.

![asking why gif](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725878/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/NoOGJ5cMr_kktnsa.gif)

And guess what, it did. Such a simple solution. (It's amazing what you can achieve when you **turn on that desktop mode**.) I even made a tweet about it, and a few days later, a friend ([@BroVic](https://twitter.com/BroVic)) tweeted at me if I had found a way to do it because the Nigerian electricity was currently falling his hand(failing him). I told him obviously, and that tweet birthed this article. Yay, my first article!

In case you are still unsure about what I'm talking about, let me give you a demonstration.

## Forking a repo on mobile

The process is going to take less than a minute to do, well minus the time you would use in finding that repo. The steps are as follows:

### Find a repo that you like

Obviously, Duh! You don't want to just fork any repo out there (except you are a random repo collector). So open your mobile browser (I'm using Firefox), log in to your GitHub account and search for a repo that you like. For me, I chose [Contribute to this Project](https://github.com/Syknapse/Contribute-To-This-Project) by [@Syknapse](https://twitter.com/syknapse) which is a good place to start if you are a beginner and want to learn how to contribute to Open source.

### Open your browser menu

This can be found on the navigation bar at the top or bottom of the screen. In my browser it is represented by the 3 vertical dots, yours might be different.
![screenshot showing the mobile browser displaying the repository and the menu](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795518/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/-p7zRk6wB_sywlyu.jpg)

### Turn on the desktop site

You will see it on the dropdown menu. It could be a toggle button or a checkbox. Turn it on by clicking on it. This would immediately reload the page and show you the desktop version. Here you would be viewing the page as if you were using a computer.

![screenshot showing the mobile browser displaying the menu dropdown and desktop site button in off mode](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725902/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/Y9akSUOac_zwvl0t.jpg)

![screenshot showing the mobile browser displaying the desktop site button in on mode](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699725923/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/XDXwfAEMb_idokhn.jpg)

![screenshot showing the mobile browser displaying the repository in desktop view](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795534/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/RkmnRKQzE_hg5vig.png)

### Fork that repo

Now zoom in to the top right corner of the page where the fork button is to have easy access to it and click on it. Once the button has been clicked, you will be immediately redirected to a new page displaying your copy of the repo and you would notice that the fork button is now disabled because you can't actually fork your repo.

![zoomed view of the repository in desktop view showing the fork button](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795556/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/wCVaSX05n_alwgoo.jpg)

![screenshot showing the mobile browser displaying the newly forked repository](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795571/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/jcbRh2TTv_jqge9u.jpg)

![screenshot showing the mobile browser displaying the newly forked repository in mobile view](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795591/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/Diifswmh3_o2pc8c.jpg)

### Congratulate yourself

![congrats, you did it gif](https://res.cloudinary.com/timonwa-s-notes/image/upload/v1699795608/Article%20Images/Timonwa%27s%20Notes/How%20to%20fork%20a%20repo%20in%20GitHub%20using%20Your%20Mobile%20Device/JaNiCvHLu_wdb0rr.gif)

You have successfully forked a Repo on GitHub using your mobile device. I'm so proud of you. You can switch back to mobile mode now if you want, no not. It's the same steps either way.

So next time when you find yourself wondering like me “How do I fork a repo on my phone?”, remember it's as simple as **pressing a button**, literally.

Whew, you made it up to this place **Thank You**. I hope you enjoyed this article as much as I did writing it. Tweet at me if you have ever needed or wished to fork a repo on your mobile device, if so how did you do it? And if this is your first time hearing about it, are you going to try it out?

Till next time guys, Bye!

<byeBye />

<connectWithMe />


How to fork a repo in GitHub using Your Mobile Device


Join our 8-part series to prep for Hacktoberfest 2023. Learn how to get started, find projects and make your first pull request. Enjoy! 🎉


Join our 8-part series to prep for Hacktoberfest 2023. Learn how to get started, find projects and make your first pull request.

Master Hacktoberfest 2023: A Comprehensive Guide

The Beginners Guide to Hacktoberfest 2023


Unlock productivity secrets with 'The Productive Developer' series - optimize workflow, stay motivated, elevate skills, become an effective developer! 👩🏽‍💻


Unlock productivity secrets with 'The Productive Developer' series - optimize workflow, stay motivated, elevate skills, become an effective developer!

Elevate Your Workflow: The Productive Developer Series

The Productive Developer


Build 10+ easy projects, such as an image slider, calculator, to-do list, etc., and improve your coding skills with hands-on learning. 👋🏼


Build 10+ easy projects, such as an image slider, calculator, to-do list, etc., and improve your coding skills with hands-on learning.

JavaScript Projects for Beginners: Learn by Building

JavaScript Projects for Beginners


Master frontend development with 'The Deep Dives' series. Each concept is meticulously explained, empowering you with the knowledge and skills to excel! 🤿


Master frontend development with 'The Deep Dives' series. Each concept is meticulously explained, empowering you with the knowledge and skills to excel!

Welcome to my Blog

Categories

Latest Articles