Optimizing Build Performance in Nextjs

Hacktoberfest Etiquette and Best Practices

Understanding the Open Source Community: A Guide For The Newcomers

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

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

Getting Ready for Hacktoberfest: Preparing for Your Open source Journey

Best Practices for Securing Your ReactJs Application

Introduction to Hacktoberfest: A Celebration of Open source

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

How to Fork a Repo on GitHub using your Mobile Device

What is a CAPTCHA And How To Bypass CAPTCHAs

Using Captcha Solvers to Improve Web Accessibility & Work Productivity

Guide to CSS logical properties

How to analyze Next.js app bundles

Build customized data tables with PrimeReact

How to Debug React Code: Tips and Tricks for Developers

Why Choose Nextjs for Your Next Web Development Project in 2023

How to Create React Search Component Using React Hooks

Creating smoother CSS transitions with Animate CSS Grid

When and how to use CSS will-change

Top Features in Next.js 13

How to Build a Real-time Chat App with ReactJS and Firebase

Deep dive into the CSS :where() and :is() functions

How CSS Methodologies can enhance Code Efficiency

The Dangers of Using !Important in CSS: Why It Should Be Avoided

Understanding Technical Debt in Software Development

Understanding Vue.js touch events for Android and iOS

My Journey Through 2022: From Surviving to Thriving

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

Build a React theme switcher app with styled-components

Open source with SheCodeAfrica at Moja Global ContributhonbySCA

How I learned NextJs in 2 days

How to Create an Image Slider using CSS and JavaScript

How to create your own custom Code Snippets right in your Code Editor

How to Build a Random Color Flipper with Vallina Javascript

3 Simple Ways to Build an Accordion

Tech Roadmap: Everything you need to help you choose and learn a career in Tech

Why my React App Failed To Compile

21 no-code tech jobs: You don't need to write code to become a Tech Sis/Bro.

all vs root vs html vs body selectors

Using CSS Variables like a Pro

Resources that helped me on my Frontend Development Journey

How to fork a repo in GitHub using Your Mobile Device


Building modern web applications has always been challenging. And as the application grows, it becomes more and more difficult to maintain the performance of the application. Hence, optimizing your application's performance from the beginning is essential. With the advent of frameworks like Next.js, you can create a fully functional web application in minutes.

Next.js, one of the popular React frameworks, provides you with many features out of the box, including server-side rendering, static site generation, and file-based routing. It also provides you with many built-in optimizations to improve the performance of your application. In this article, we will look at some of the ways to optimize the build performance of your Next.js application.

## What is build performance?

Build performance is the time it takes to build your application, i.e., compile and generate the static files. A fast build performance is vital because it allows you to iterate faster and deliver your application to your users more quickly.

Many factors can affect the build performance of your application, including the size of your application, the number of dependencies, the number of pages, and the number of components. If the build performance of your application is slow, the overall performance of your application will be affected, thus affecting the user experience of your application.

By default, Next.js provides many optimizations to improve your application's build performance. And there are other things you can do too to improve the build performance of your application. Let's look at some of them.

## Optimizing the build performance of your Next.js application

The following are some of the ways to optimize the build performance of your Next.js application:

### Use the latest stable version of Next.js

The easiest way to improve the build performance of your Next.js application is to use the latest stable version of Next.js. Next.js is a fast-growing framework, and the team behind it is constantly working on improving the framework. New features and optimizations are continually added to it. Hence, it is vital to use the latest stable release.

As of the writing of this article, the latest stable version of Next.js is `v13.4`. (You can check the latest stable version of Next.js [here](https://github.com/vercel/next.js/releases)). You can also upgrade your application to the latest stable version of Next.js by running the following command:

```bash
npm install next@latest
```

### Use Next.js built-in optimizations

As I mentioned earlier, Next.js provides you with many built-in optimizations to improve the build performance of your application. Some of these optimizations include:

1. **Automatic Static Optimization**: By default, Next.js will automatically render your application as static HTML if there are no dynamic routes in your application. This is determined by whether the page has `getServerSideProps` or `getInitialProps` defined. If they are not, Next.js will not need to re-render the page on every request, as pages will be built once and served to all users.

   This improves the performance of your application by reducing the time it takes to generate the static HTML for your application. It is perfect for web applications without dynamic routes and pages that only change sometimes.

   For pages that do have dynamic routes or fetch data from an external API, using Next.js's `getServerSideProps` or `getInitialProps` functions will allow you to prerender the page on the server and fetch the necessary data before sending the HTML to the client. It helps improve the initial load time and overall performance of the page.

2. **Automatic Code Splitting**: Code splitting is the process of splitting your code into smaller chunks. Each chunk contains the code needed for a particular page. By default, Next.js will automatically break your code into smaller chunks to reduce the time it takes to load the code for your application. So, Next.js will only load the code needed for that particular page on the initial page load.

   To further utilize the benefits of code splitting, you can use dynamic imports to load the code for a particular page only when needed. Code splitting is helpful for pages that are visited infrequently. For example, if you have a page only seen by a few users, you can use dynamic imports to load the code for that page only when needed.

3. **Automatic Image Optimization**: Using the `next/image` component, Next.js built-in `<img>` element, you can benefit from Next.js automatic image optimization. Next.js will automatically optimize your images by lazy loading and automatically resizing/compressing images based on device size. Lazy loading is the process of loading images only when they are needed, i.e., when they are visible on the screen. Automatic Image Optimization reduces the time it takes to load the images in your application, improving your application's performance.

   You can also indicate to Next.js that you want some images to be loaded initially by setting the `priority` prop on the `next/image` component to `true`. Next.js will prioritize loading the essential images you want to load first.

4. **Automatic Font Optimization**: Next.js also optimizes font using the `next/font` component. This component includes built-in automatic self-hosting for Google Fonts. You can use Google Fonts in your application without having to worry about "layout shift" or "flash of invisible text"(FOIT).

   What Next.js does is that it will automatically download the fonts and serve them from your application. So the fonts will be available to your users even offline. It cuts down on the time it takes to load the fonts in your application, improving your application's performance.

5. **Automatic Prefetching**: Prefetching means loading the code for a particular page before the user navigates to that page. By default, Next.js will automatically prefetch the code for the page the user will likely visit next if you use the `Link` component from `next/link`. So when the initial page is loaded, the visible links on the screen are prefetched. It is handy for pages that are visited often.

   For pages that are not visited often, you can use the `prefetch` prop on the `Link` component and set it to `false` to disable prefetching for that page. So only when the user hovers over the link will the code for that page prefetch. Depending on the use case of `prefetch`, you can improve the performance of your application, reducing the time it takes to load the code for the next page.

6. **Optimizing third-party scripts**: Next.js provides you with `next/script` component to load third-party scripts. By default, the `next/script` component allows you to load scripts early but after some critical content has loaded to prevent blocking the page load.

   Next.js also ensures that a script is only loaded once. It is beneficial for scripts used across multiple pages in your application. It means that even when the user navigates to a page that does not use the script, the script will not be loaded again when they navigate to a page that uses it.

### Critical Rendering Path Optimization

The Critical Rendering Path (CRP) refers to browsers' steps to convert HTML, CSS, and JavaScript into a rendered webpage. Optimizing the Critical Rendering Path is essential for improving a web application's initial load time and perceived performance. CRP optimization involves optimizing the delivery and rendering of the most critical content to the user as quickly as possible. By minimizing the time it takes for the browser to render the page, you can improve the perceived performance and provide a better user experience.

The following are some techniques for optimizing CRP:

1. **Optimize Large Contentful Paint**: Large Contentful Paint (LCP) is a Core Web Vitals metric for measuring the time it takes for the largest content element in the viewport to become visible. LCP is crucial because it measures the perceived load speed of your application. Utilizing tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse) and [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) can help you identify opportunities to improve the LCP of your application. Some of the ways to enhance the LCP of your application include:

   - **Minimize render-blocking resources**: Render-blocking resources block the browser from rendering the page. These resources include CSS and JavaScript files. By minimizing the number of render-blocking resources, you can improve the LCP of your application.
   - **Minimize main thread work**: The main thread parses HTML, executes JavaScript, and renders the page. By minimizing the amount of work done on the main thread, you can improve the LCP of your application.
   - **Reduce JavaScript execution time**: JavaScript is a single-threaded language, meaning that only one task executes at a time. By reducing the amount of JavaScript executed on the main thread, you can improve the LCP of your application.

   Using `async` and the `next/script` component to load your scripts can also help improve the LCP of your application by allowing the browser to download the script asynchronously without blocking the rendering of the page.

2. **Use Intersection Observer API**: The Intersection Observer API is a browser API that allows one to observe changes in the intersection of a target element with its ancestor element or a top-level document's viewport. It is helpful for lazy loading images and other content not visible on the screen. By using the Intersection Observer API, you can improve the LCP of your application by loading contents only when they are visible on the screen.

3. **CSS and JS Optimization and Minification**: CSS and JavaScript optimization and minification remove unnecessary characters from your CSS and JavaScript files without changing their functionality. Avoid using CSS prepossessors that add unnecessary characters to your CSS files. You can also use tools like [PurgeCSS](https://purgecss.com/) to remove unused CSS from your application. It will reduce the size of your CSS files, improving the LCP of your application.

   Similarly, avoid using unnecessary characters in your JavaScript files. Tools like [Terser](https://terser.org/) also help you to minify your JavaScript files, reducing their size and improving the LCP of your application.

### Improving Network Performance

Improving network performance is another way to improve the build performance of your Next.js application. Network performance is the time it takes for the browser to download the resources for your application. The following are some ways to improve the network performance of your application:

1. **Caching**: Caching stores the resources for your application in the browser. Implementing caching strategies like Cache-Control headers and Service Workers can help improve the network performance of your application. Cache-Control headers allow you to specify browser caching policies like how long to cache a resource and when to revalidate the resource. Next.js enables you to set the Cache-Control headers for your application by using the `headers` property in the `next.config.js` file.

   Service Workers allow you to cache resources in the browser and serve them from the cache when the user is offline. It reduces the time it takes to load the resources in your application, hence, improving the network performance of your application.

2. **CDN Integration**: A Content Delivery Network (CDN) is a network of servers distributed globally. You store your static assets on these servers, which get delivered to users based on location. You can cache static assets and serve them from edge locations using a CDN for faster global delivery.

   Next.js also provides built-in support for [Vercel Edge Network](https://vercel.com/docs/concepts/edge-network/overview). If you use Vercel for deployment, you automatically use the Vercel Edge Network as a CDN.

### Bundle analysis

Bundle analysis is analyzing your application to identify opportunities to reduce its size. When you use a bundle analysis tool, you see what modules in your application bundle take up much space. You identify unnecessary files and then find ways to reduce the size of such files or delete unused ones. Some tools for analyzing the size of your Next.js application include next/bundle-analyzer, webpack-bundle-analyzer, and next-bundle-analyzer.

### Dependency management

Managing the dependencies in your application is another way to improve the build performance of your application. By removing unused dependencies and optimizing the dependencies in your application, you can enhance its build performance. The following are some ways to maximize your application's dependencies:

1. **Remove unused dependencies**: Using tools like [depcheck](https://www.npmjs.com/package/depcheck) in your application can help identify unused dependencies. You can then uninstall them, reducing your application's size and improving its build performance.
2. **Tree Shaking**: Tree shaking is the process of removing unused or dead code from the final bundle of your application. Next.js has built-in support for tree shaking. You should use ES6 modules instead of CommonJS modules to take advantage of this. i.e., use `import` and `export` statements instead of `require` and `module.exports` statements.
3. **Specific Imports**: You should import only the module parts you need when importing a module. It is handy for modules that have a lot of exports. For example, instead of importing the entire module like this:

```js
import { Button, Card, Input } from "react-bootstrap";
```

You can import only the parts of the module that you need, like this:

```js
import Button from "react-bootstrap/Button";
import Card from "react-bootstrap/Card";
import Input from "react-bootstrap/Input";
```

### Excluding unnecessary folders or files from the build

Another way to optimize the build performance of your Next.js application is by excluding unnecessary folders or files from the build process. You can reduce the build time and improve overall performance by excluding specific directories or files not required for rendering your application.

Configure the build process to exclude specific directories or files using the exclude option in the `next.config.js` file. Doing this allows you to specify patterns or paths that should be ignored during the build. For example, you can exclude folders containing large media files, documentation, or development-specific assets that are not necessary for the production build.

```js
module.exports = {
  exclude: ["**/media/**", "**/docs/**", "**/dev/**"],
};
```

By excluding these unnecessary resources from the build, you reduce the amount of data that needs to be processed and bundled, resulting in faster build times and more efficient resource utilization. This optimization technique is advantageous when dealing with large projects or when you have specific folders or files that don't contribute to the rendering, thus, omitting them safely.

## Conclusion

Optimizing the build performance of your Next.js application is crucial for a fast and responsive user experience. By leveraging Next.js's built-in optimizations and other techniques like Critical Rendering Path optimization, Network performance, and Dependency management, you can improve the build performance of your application. Continuous monitoring and testing of your application will help identify areas for improvement and ensure ongoing performance enhancements.

<connectWithMe />



> 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 good will of strangers and a strong coxswain to guide them. ~ William H. McRaven

In the previous articles of our <sparklyText>Hacktoberfest preparation series</sparklyText>, 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, and even made our first pull requests. However, it's essential to take a step back and delve into one of the most significant aspects of the open-source world—the community.

## 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 community is the heart of open source. It's a vibrant, collaborative, and inspiring space where people from all walks of life come together to create remarkable things. It's a place where you can learn, grow, and make a difference. It's a place where you can be yourself and be accepted for who you are. It's a place where you can find your tribe.

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 small bug fix or a significant feature enhancement, it's a team effort. Each contribution, no matter how big or small, is a step towards making open source better. 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 if you 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; you're becoming a 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/denkuysrh/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. At its heart, Open source is a community of like-minded individuals who share a passion for creating, sharing, and improving software. Let's take a look at some of the key players in the open-source ecosystem.

### 1. 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 the project's 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.

### 2. 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 their contributions are vital to the community.

### 3. 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, and their input is invaluable to the community.

### 4. The community

The open-source community is a global network of individuals who share a passion for creating, sharing, and improving software. It's a diverse, inclusive, and welcoming space where people from all backgrounds come together to build remarkable things. 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/denkuysrh/image/upload/v1694956133/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/13_20230917_135257_0011_qlqj1a.png)

## Effective communication in the Open source world

In the world of open source, where individuals from diverse backgrounds unite to create remarkable software, effective communication serves as the glue that holds this global community together. From sharing ideas and discussing technical decisions to reporting issues and offering feedback, communication is a vital aspect of open-source projects. Let's take a look at some of the ways communication empowers the open-source community.

### 1. Asking questions and seeking help

In the open-source community, there's no shame in asking questions or seeking help. Whether you're a newcomer or an experienced contributor, you're bound to run into challenges. You may need help understanding a project's codebase or have encountered a bug driving you up the wall. Don't hesitate to ask for assistance. The open-source community is a welcoming space where people are happy to help. Whether it's a technical question or a request for guidance, you can reach out to project maintainers and contributors for help. Asking questions is a great way to learn and grow as a developer and a person.

<infoCard title={"Pro tip"} color="yellow">
  Before seeking help, it's a good practice to do some research. Check the
  project's documentation, issues, and forums. Often, someone else has faced the
  same problem, and you can find a solution without even asking.
</infoCard>

![Asking questions and seeking help in the open-source community](https://res.cloudinary.com/denkuysrh/image/upload/v1694956133/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/9_20230917_135257_0007_s2xs4k.png)

<figcaption>It's ok to ask for help</figcaption>

### 2. Engaging in discussions

Open-source projects often involve discussions about technical decisions, feature requests, and community matters. These discussions are an integral part of the decision-making process. As a contributor, you can participate in these discussions by sharing your ideas, opinions, and feedback. Your input can help shape the project's future and contribute to its growth. Don't be afraid to speak up and share your thoughts. Your voice matters.

<infoCard title={"Pro tip"} color="yellow">
  When engaging in discussions, be respectful of others' opinions and beliefs.
  Don't engage in toxic behavior like trolling, bullying, or harassment. If you
  encounter such behavior, report it to the project maintainers.
</infoCard>

### 3. Reporting issues

Reporting issues is a valuable contribution to open-source projects. If you encounter a bug or have a feature request, report it to the project maintainers. It helps maintainers understand issues from a user's perspective and helps them identify and fix bugs, improve existing features, and plan future enhancements. When reporting issues, be as detailed as possible. Include information like the steps to reproduce the bug, the expected behavior, the actual behavior, and the environment you're using. This information helps maintainers understand the issue and resolve it quickly.

<infoCard title={"Pro tip"} color="yellow">
  If you're fixing the issue yourself (which is a fantastic way to contribute),
  mention that you're working on it to avoid duplication of effort.
</infoCard>

![Reporting issues in the open-source community](https://res.cloudinary.com/denkuysrh/image/upload/v1694956134/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/10_20230917_135257_0008_lk2kkb.png)

<figcaption>Reporting issues is a valuable contribution</figcaption>

### 4. Offering constructive feedback

Open-source projects thrive on improvement. If you notice areas where a project can be enhanced, don't hesitate to offer constructive feedback. Whether it's about user experience, documentation clarity, or code quality, well-phrased feedback can be invaluable to project maintainers. It's a collaborative effort to make projects better, and your insights can contribute to their growth.

<infoCard title={"Pro tip"} color="yellow">
  When providing feedback, be specific about what you think could be improved
  and suggest potential solutions. This approach makes it easier for maintainers
  to understand your perspective and implement changes.
</infoCard>

### 5. Participating in code reviews

Code review is a fundamental aspect of maintaining code quality in open-source projects. Even if you're not yet comfortable contributing code yourself, you can participate in code reviews. This involves examining proposed changes, checking for adherence to coding standards, and ensuring the changes align with the project's goals. Engaging in code reviews helps maintain code quality and fosters collaboration within the community.

<infoCard title={"Pro tip"} color="yellow">
  When conducting code reviews, focus on providing clear, actionable feedback.
  Highlight areas that need improvement while acknowledging well-executed
  aspects of the code.
</infoCard>

<subscribe />

## Collaborative tools

In the open-source community, collaboration isn't confined to in-person meetings or office chats. Instead, it thrives on a range of tools and platforms. These tools enable contributors to work together, share ideas, and build remarkable things. Let's take a look at some of the most popular collaborative tools used in the open-source world.

### 1. Version Control and Collaboration (VCS)

- **Git:** The backbone of open-source development, Git allows multiple contributors to work simultaneously on a project without conflicts.
- **GitHub and GitLab:** User-friendly platforms built on Git, offering interfaces for version control, collaboration, and issue tracking.

### 2. Project Management and Organization

- **Issue Trackers:** Central hubs for managing tasks, bug reports, and feature requests, fostering discussions around project-related matters.
- **Project Management Tools:** Platforms like Trello, Jira, or Asana aid in task tracking, project planning, and workflow organization.

### 3. Testing and Quality Assurance

- **Continuous Integration (CI) and Continuous Deployment (CD) Tools:** Automated testing and deployment tools such as Travis CI, Jenkins, and CircleCI ensure code changes are thoroughly tested before integration.
- **Code Review Platforms:** Tools like Gerrit or Phabricator facilitate code reviews to maintain code quality and adherence to project standards.

### 4. Documentation and Knowledge Sharing

- **Documentation Platforms:** Read the Docs and GitBook assist in creating and maintaining project documentation, vital for user understanding and effective contributions.
- **Collaborative Editing Tools:** Platforms like Etherpad or HackMD enable real-time collaborative document editing for various purposes.

### 5. Communication and Community Building

- **Communication Platforms:** Chat platforms like Slack, Discord, mailing lists, and forums serve as virtual meeting spaces for open-source communities, enabling real-time discussions and decision-making.
- **Community Platforms:** Dedicated platforms like Discourse or Slack are used for community discussions, announcements, and coordination.

These collaborative tools play crucial roles in fostering effective communication, efficient project management, and quality assurance within the open-source community. Each category serves distinct purposes, contributing to the success and growth of open-source projects.

## 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. As a member of the open-source community, you have a role to play. Here are some tips to help you get started:

1. **Be respectful:** The open-source community is a diverse, inclusive, and welcoming space. Be respectful of others' opinions, beliefs, and backgrounds. Don't engage in toxic behavior like trolling, bullying, or harassment. If you encounter such behavior, report it to the project maintainers.

2. **Give back:** Open source is a collaborative effort. If you're using a project, consider contributing to it. It doesn't have to be code. You can help with documentation, testing, or even design. If you're a developer, you can contribute to open-source projects by fixing bugs, adding new features, or improving existing ones. You can even contribute by sponsoring projects financially. The possibilities are endless.

3. **Support fellow contributors:** Encourage and assist others in their open-source journey. Offer guidance to newcomers who may have questions or face challenges similar to what you've experienced. By helping others, you strengthen the community and create a positive atmosphere.

4. **Advocate for diversity and inclusion:** Champion diversity and inclusivity within the open-source community. Promote projects and initiatives that focus on welcoming contributors from underrepresented backgrounds. Actively participate in discussions and efforts to make open source more diverse and accessible.

5. **Respect project guidelines:** Each open-source project may have specific guidelines, coding standards, and contribution processes. Respect and adhere to these guidelines when making contributions. Thoroughly review a project's documentation and follow the established procedures.

6. **Participate in discussions:** Engage in project discussions, whether they are about technical decisions, feature requests, or community matters. Your input, ideas, and feedback can contribute to the project's growth and improvement.

7. **Attend open-source events:** Consider attending open-source conferences, meetups, or webinars, either in person or virtually. These events provide opportunities to network, learn from experts, and stay updated with industry trends.

8. **Promote open source:** Spread the word about the benefits of open source to your peers and colleagues. Encourage others to get involved, whether they are developers or non-developers. A larger, more engaged community benefits everyone.

9. **Contribute to documentation:** Documentation is often an overlooked but essential part of open-source projects. Offer your assistance in improving documentation clarity and completeness. Well-documented projects are more accessible to newcomers.

10. **Be patient:** Understand that not everyone in the open-source community may have the same level of experience or expertise. Be patient with newcomers, answer their questions, and provide constructive feedback to help them learn and grow.

11. **Collaborate with other projects:** Explore opportunities to collaborate with other open-source projects. Cross-project collaboration can lead to innovative solutions and a broader network of like-minded individuals.

12. **Keep learning:** The open-source world is vast and ever-changing. There's always something new to learn. Don't be afraid to try new things, experiment, and make mistakes. Keep learning, and you'll grow as a developer and a person.

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/denkuysrh/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.

In the following article, we'll discuss the etiquette and best practices for contributing to Hacktoberfest. 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 />



> 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 [The Beginners Guide to Hacktoberfest 2023](/series/the-beginners-guide-to-hacktoberfest).

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/denkuysrh/image/upload/v1694956137/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/lluj1cauAlO2vQEm8A_r2acin.gif)

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

## 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 [previous article](/getting-ready-for-hacktoberfest), 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

Prevously, 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/denkuysrh/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/denkuysrh/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/denkuysrh/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/denkuysrh/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/denkuysrh/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.

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 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 [Twitter](https://twitter.com/timonwa_). I would love to hear from you. See you in the next article. 👋🏼🚀📝

<byeBye />

## Resources

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

<connectWithMe />



> 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/denkuysrh/image/upload/v1694956136/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/w6KEtVsdXnUGDfln8D_qa5sow.gif)

<figcaption>
  Image by{" "}
  <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, [Beginning Your Hacktoberfest Journey](/beginning-your-hacktoberfest-journey), 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/denkuysrh/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/denkuysrh/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/denkuysrh/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 />

## Resources

- [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 />



> 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/denkuysrh/image/upload/v1694956147/Article%20Images/Timonwa%27s%20Notes/Hacktoberfest/flbcUFdLSHwZC03p11_oakhs8.gif)

<figcaption>
  Image by{" "}
  <a href="https://giphy.com/gifs/Mecanicus-triumph-1964-herald-flbcUFdLSHwZC03p11">
    GIPHY
  </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/denkuysrh/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/denkuysrh/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, **[Getting ready for Hacktoberfest](/getting-ready-for-hacktoberfest)**. So, stay tuned for that.

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

<figcaption>
  Image by{" "}
  <a href="https://giphy.com/gifs/cbc-schitts-creek-lMsT2f47tDxFMYdJMC">
    GIPHY
  </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/denkuysrh/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 />



> 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?

## 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.mozilla.org/en-US/thunderbird/):** An open-source email client for managing emails, contacts, and calendars.

8. **[Krita](https://krita.org/):** 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.

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. **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 />

## Resources

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

<connectWithMe />



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.

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 [how to fork a repo on your mobile device](/how-to-fork-a-repo-on-github-using-your-mobile-device-archived).

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. Plus, desktop mode doesn't really work on iPhones. So, if you're using an iPhone, you're out of luck.

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/denkuysrh/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/denkuysrh/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/denkuysrh/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 />

<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>



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://cdn.hashnode.com/res/hashnode/image/upload/v1645192361327/48CAkrd_O.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.

![lady saying 'stay tuned'](https://cdn.hashnode.com/res/hashnode/image/upload/v1645192363370/Wc9ut3unW.gif)

## So What is a CAPTCHA?

CAPTCHA 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://cdn.hashnode.com/res/hashnode/image/upload/v1645192365835/Z5BFqLVP3.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://cdn.hashnode.com/res/hashnode/image/upload/v1645192368006/a1ojGSGvt.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.

## 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://cdn.hashnode.com/res/hashnode/image/upload/v1645192370242/CdwNVsCmG.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://cdn.hashnode.com/res/hashnode/image/upload/v1645192371682/I42bnLnpw.jpeg)

<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://cdn.hashnode.com/res/hashnode/image/upload/v1645192373106/k6hv-CNshJ.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://cdn.hashnode.com/res/hashnode/image/upload/v1645192374560/kYsu8b6Ow.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://cdn.hashnode.com/res/hashnode/image/upload/v1645192375903/HN2WfezkH.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://cdn.hashnode.com/res/hashnode/image/upload/v1645192377509/SlD9Hwhao.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](https://anti-captcha.com/), and [Death by CAPTCHA](https://deathbycaptcha.com/).

## 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://cdn.hashnode.com/res/hashnode/image/upload/v1645192379239/l3bYALXhX.jpeg)

<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 enjoyed this note, please share it with your friends and colleagues. Till next time guys.

<byeBye />

<connectWithMe />

## 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>



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

Captchas, 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/denkuysrh/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>



One crucial aspect of any web application is the size and performance of its codebase. Next.js is a popular JavaScript framework for building server-rendered and statically-exported React applications.

Next.js provides the ability to automatically optimize an application's code and minimize its bundle size. This can reduce the amount of data that needs to be transferred to the client, thereby improving performance. However, regularly analyzing your Next.js app's bundle can help ensure that it is as optimized as possible and can also help identify potential areas for improvement.

In this article, we'll discuss what a Next.js app bundle is and how bundle analyzer tools work. We'll demonstrate how to use the @next/bundle analyzer package to inspect your Next.js app bundles and talk about a few alternatives. Lastly, we'll discuss how to use bundle analysis to improve Next.js app performance.

## What is a Next.js app bundle?

When you build a Next.js app, the code gets organized into small units called modules. These modules are bundled together by webpack, a popular JavaScript module bundler, to form a single file called a bundle. This bundle is then served to the client's browser, which is executed to render the application.

As web applications become more complex and feature-rich, the size of their codebase can grow significantly. This can lead to slower loading times, which can frustrate users and negatively impact your app's performance.

Additionally, larger codebases are often more challenging to maintain, making it harder to identify and fix bugs. By analyzing your app bundles, you can identify areas where you can optimize your code to reduce its size and improve its performance.

Several bundlers exist, but this article will focus on using one of the most popular bundling tools, the webpack-based [@next/bundle-analyzer package](https://www.npmjs.com/package/@next/bundle-analyzer).

## What is @next/bundle-analyzer?

The @next/bundle-analyzer package is a plugin for the Next.js framework that allows you to analyze the size and composition of your app's bundle. By identifying large or unnecessary code blocks, you can reduce overall bundle size, which can help optimize the performance of your Next.js app.

The bundle-analyzer plugin generates a visual report that provides information about the size and contents of your app bundle, making it easier to identify areas for optimization. @next/bundle-analyzer generates a static HTML file that contains a detailed report on your app's codebase, including information on the size of each component and its dependencies.

## Installing the @next/bundle-analyzer package

To use the @next/bundle-analyzer package, you must install it into an existing Next.js project. For this tutorial, I'll use my Open source project, [Tech Career Roadmap](https://www.techroadmap.xyz/), as the Next.js example project.

To start, install the package with either npm or Yarn:

```bash
# npm
npm install --save-dev @next/bundle-analyzer cross-env
# Yarn
yarn add -D @next/bundle-analyzer cross-env
```

You'll notice that I also installed `cross-env`; we'll use this package later in this article to set an environment variable. The `cross-env` package will allow us to set environment variables when running scripts in our `package.json` file without any errors, regardless of our platform-specific syntax or our OS.

## Configuring the Next.js app

After you've installed the packages, you can enable the bundle analyzer by adding the following code to your `next.config.js` file:

```js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
module.exports = withBundleAnalyzer({
  // your Next.js configuration
});
```

## Analyzing the Next.js app bundles

To run an analysis for your app bundles, you'll need to start your Next.js app in development mode with the `ANALYZE` environment variable set to `true`. Then, run the following command to view the analysis:

```bash
ANALYZE=true npm run build
```

This command will automatically:

1. Create an `analyze` folder in your `.next` folder inside your root directory and create three files: `client.html`, `nodejs.html`, and `edge.html`
2. Open the three files in your browser; the `client.html` file represents the client side, and the `nodejs.html` file represents the server side. At this time of writing, there is no data supplied for the `Edge.html` page. It will presumably represent edge APIs, but we have been unable to get confirmation from the package's maintainers
3. Provide bundle analysis information in your terminal

After the bundle analyzer has run, you can start inspecting your bundles:

![Next.js Bundle Analyzer Example Terminal](https://res.cloudinary.com/denkuysrh/image/upload/v1686504836/Article%20Images/LogRocket/how-analyze-next-js-app-bundles/image_uwmylp.png)

<figcaption>Next.js Bundle Analyzer Example Terminal</figcaption>

## Inspecting the Next.js app bundles

The @next/bundle-analyzer package provides a few ways to inspect your bundles: via the terminal, via the browser, and by using the sidebar filter. Let's take a look.

### Via the terminal

In the above image showing the terminal output, there's a table displaying Page, Size, and First Load JS. Under the Page header is a list of all the pages in your Next.js app and chunks from the First Load JS bundle.

The First Load JS bundle is all the code shared or used by the app pages at initial load. Under the Size header, the package displays the file size of each page, bundle, and the chunks that make up the bundle.

Under the First Load JS, you can see the final size of the page or after the First Load JS has been added. The First Load JS size is also the initial size of the pages on initial load.

Next.js also color codes these sizes. Green tells us that the size is small and ok, while red indicates that the size is too large. If your First Load JS bundle size is shown in red, try to reduce it until it is displayed in green because the size of the bundle also affects the size and state of all your pages.

### Via the browser

To inspect your app bundles in your browser, simply go to your browser to see two pages opened for you by the analyzer.

The first page, `client.html`, displays all the bundles for the client side:

![Next.js App Bundles Client Side](https://res.cloudinary.com/denkuysrh/image/upload/v1686504836/Article%20Images/LogRocket/how-analyze-next-js-app-bundles/ice_screenshot_20221221-213753_sfz7nf.png)

<figcaption>Next.js App Bundles Client Side</figcaption>

The second page, `nodejs.html`, displays all the bundles for the server side:

![Next.js App Bundles Server Side](https://res.cloudinary.com/denkuysrh/image/upload/v1686504837/Article%20Images/LogRocket/how-analyze-next-js-app-bundles/image2_iyovb7.png)

<figcaption>Next.js App Bundles Server Side</figcaption>

If your app's pages are not automatically loaded, or if you have already closed the browser, just go into the `analyze` folder and right-click on any file names in order to open them in your browser.

Next, simply hover over any of the bundles to see its stats. You'll be able to see the Stat size, Parsed size, and Gzipped size of each bundle, as well as the bundles' file path.

Here's a little more detail on the size types:

- **Stat size**: The size of the JavaScript bundle when served to the client; this is the size of the JavaScript code that the client's web browser has to download and execute to run the app
- **Parsed size**: The size of the bundle after the web browser has parsed it; this is the amount of memory that the JavaScript code takes up in the web browser after it has executed the code
- **Gzipped size**: The size of the JavaScript bundle when compressed using the Gzip algorithm; this is the amount of data the client's web browser must download to run the app. Gzip is a common compression algorithm used to reduce the size of web assets like JavaScript files. It can significantly reduce the amount of data transferred over the network

With the analyzer pages in the browser, you'll be able to see which bundles are taking up the most space based on their size type. Also, the bundles are arranged based on their file sizes:

![Next.js Bundle Analyzer Example](https://res.cloudinary.com/denkuysrh/image/upload/v1686506193/Article%20Images/LogRocket/how-analyze-next-js-app-bundles/next-js-bundler-analyzer-example_tfy4m7.gif)

<figcaption>Next.js Bundle Analyzer Example</figcaption>

You can also right-click on the root bundle to view options related to that chunk. You can click **Hide chunks** to hide that particular chunk from view and view the rest, click **Hide all other chunks** to hide all other chunks except the one you clicked on, or click **Show all chunks** to show all the chunks that are currently hidden:

![Viewing Next.js Bundle Analyzer Hide Chunk Option](https://res.cloudinary.com/denkuysrh/image/upload/v1686504835/Article%20Images/LogRocket/how-analyze-next-js-app-bundles/FireShot_Capture_025_-_techroadmap_15_Dec_2022_at_19_37_-_kqzpnt.png)

### Using the sidebar filter

Another way to interact with and inspect your bundles is to use the sidebar filter. In the sidebar, you can specify a particular bundle or set of bundles that you'd like to view.

This approach can be useful for visualizing and inspecting smaller bundles quickly. You can also opt to have them ordered based on the size type: Stat, Parsed, or Gzipped:

![Viewing Next.js Bundle Analyzer Sidebar](https://res.cloudinary.com/denkuysrh/image/upload/v1686504837/Article%20Images/LogRocket/how-analyze-next-js-app-bundles/image3_hhv1eh.png)

<figcaption>Viewing Next.js Bundle Analyzer Sidebar</figcaption>

You can search for modules using a particular file, folder, or phrase from your app; the analyzer will display results based on your search input:

![Searching Next.js Analyzer Modules File Folder Phrase](https://res.cloudinary.com/denkuysrh/image/upload/v1686504838/Article%20Images/LogRocket/how-analyze-next-js-app-bundles/image8_vfe4dp.png)

<figcaption>Searching Next.js Analyzer Modules File Folder Phrase</figcaption>

Or, you can select an entry point for initial chunks (i.e., any of your app's pages):

![Filter Next.js Bundle Analyzer Initial Chunks](https://res.cloudinary.com/denkuysrh/image/upload/v1686504836/Article%20Images/LogRocket/how-analyze-next-js-app-bundles/FireShot_Capture_029_-_techroadmap_15_Dec_2022_at_19_37_-_cf98ge.png)

<figcaption>Filter Next.js Bundle Analyzer Initial Chunks</figcaption>

## Creating an analysis command/script

To save time, you can also create a quick command/script to run in your package.json file. By doing so, you can avoid setting the environment variable on every call.

In your `package.json` file, add the following script:

```js
"scripts": {
    ...
    "analyze": "cross-env ANALYZE=true next build",
},
```

As I mentioned previously, `cross-env` allows us to set environment variables in our `package.json` file. In this case, we are setting `ANALYZE` to `true`. If you were using a Windows operating system and didn't install `cross-env`, you'd get an error like the one shown below when running the above script:

![Error Did Not Install Cross-Env](https://res.cloudinary.com/denkuysrh/image/upload/v1686504837/Article%20Images/LogRocket/how-analyze-next-js-app-bundles/image4_qfpek7.png)

<figcaption>Error Did Not Install Cross-Env</figcaption>

Now, let's test our code by running one of the following commands:

```bash
# npm
npm run analyze
# Yarn
yarn analyze
```

Running either of the above command results in the same action as running the following:

```bash
ANALYZE=true npm run build
```

## Optimizing app performance with bundle analysis

Bundle analysis is an essential tool for optimizing app performance. It helps identify potential bottlenecks and areas for improving an app's load speed and reducing its bundle size.

Let's consider the scenario of a Next.js app that was analyzed with the @next/bundle-analyzer tool; the following issues were identified:

- **Large image file sizes**: this can slow down an app's load speed
- **Duplicate npmpackages**: this will increase the app's bundle size unnecessarily
- **Unused npm packages**: this will contribute to the app's bundle size and slow down its load speed
- **Heavy JavaScript files**: Unoptimized JavaScript files will add to an app's bundle size

To optimize the app's performance, here are some possible ways to address the above issues:

- Compress or resize images with large file sizes
- Remove duplicate npm packages
- Remove unused npm packages
- Use minification, tree shaking, and code splitting to optimize JavaScript files

## Alternatives to @next/bundle-analyzer

While @next/bundle-analyzer is a popular choice for analyzing the bundle size of a Next.js app, several other options are available. Here are some alternatives to consider:

[**webpack-bundle-analyzer**](https://www.npmjs.com/package/webpack-bundle-analyzer): This widely-used tool analyzes the bundle size of webpack-based applications, including Next.js. It generates interactive visualizations of the bundle size and composition, making it easy to identify which modules take up the most space

[**next-bundle-analyzer**](https://github.com/josselinbuils/next-bundle-analyzer): This community-driven alternative to the official @next/bundle-analyzer package provides similar functionality but with customized reports specifically for Next.js users

[**source-map-explorer**](https://www.npmjs.com/package/source-map-explorer): This popular tool analyzes the bundle size of an app by examining the source maps generated during the build process. It provides a treemap visualization of the bundle size and identifies where each byte of code is coming from

[**Statoscope**](https://github.com/statoscope/statoscope): This web-based tool analyzes the size and composition of webpack bundles. It provides a simple interface for users to upload webpack stats files and generate visualizations that help identify which modules and dependencies contribute most to the app's bundle size

These are just a few of the many options available for analyzing the bundle size of a Next.js app. Consider experimenting with different tools to find the one that best meets your needs.

## Conclusion

In this article, we discussed what a Next.js bundle is and investigated how bundle size can impact website performance. We also demonstrated how to use the @next/bundle-analyzer package to analyze and inspect the bundles in various ways, such as in the terminal, the browser, and the tool's sidebar filter.

Through this analysis, you'll identify potential bottlenecks, such as duplicated or unused npm packages and large image sizes. You'll be able to optimize your app's performance by reducing bundle size and improving load speed. Bundle analysis is a critical tool for any developer looking to optimize their Next.js application and enhance user experience.

<connectWithMe />

## Frequently asked questions

<details>
  <summary>1. What is a Next.js app bundle?</summary>
  <p>
    When you build a Next.js app, the code gets organized into small units
    called modules. These modules are bundled together by webpack, a popular
    JavaScript module bundler, to form a single file called a bundle. This
    bundle is then served to the client's browser, which is executed to render
    the application.
  </p>
</details>

<details>
  <summary>2. Why should I analyze my Next.js app bundle?</summary>
  <p>
    Analyzing the app bundle is essential because it helps identify the size and
    composition of the codebase. By understanding the bundle's contents, you can
    optimize its size, improve app performance, and identify potential areas for
    improvement.
  </p>
</details>

<details>
  <summary>
    3. What is @next/bundle-analyzer and how does it help in analyzing Next.js
    app bundles?
  </summary>
  <p>
    The @next/bundle-analyzer package is a plugin for the Next.js framework that
    allows you to analyze the size and composition of your app's bundle. It
    allows you to analyze the size and composition of your app's bundle. It
    generates a visual report showing information about each component's size,
    dependencies, and more. This makes it easier to identify large or
    unnecessary code blocks, enabling you to optimize the bundle and enhance
    your Next.js app's performance.
  </p>
</details>

<details>
  <summary>4. How do I optimize my Next.js app performance?</summary>
  <p>
    Bundle analysis is an essential tool for optimizing app performance. It
    helps identify potential bottlenecks and areas for improving an app's load
    speed and reducing its bundle size.
  </p>
  <p>
    To optimize the app's performance, here are some possible ways to address
    the above issues:
  </p>
  <ul>
    <li>Compress or resize images with large file sizes</li>
    <li>Remove duplicate npm packages</li>
    <li>Remove unused npm packages</li>
    <li>
      Use minification, tree shaking, and code splitting to optimize JavaScript
      files
    </li>
  </ul>
</details>

<details>
  <summary>
    5. Are there alternative tools for analyzing Next.js app bundles?
  </summary>
  <p>
    Yes, there are several alternative tools for bundle analysis, such as
    webpack-bundle-analyzer, next-bundle-analyzer, source-map-explorer, and
    Statoscope. Each tool offers unique features and visualizations to help you
    inspect and optimize your app bundles effectively.
  </p>
</details>

<details>
  <summary>
    6. How can bundle analysis help me optimize my Next.js app's load speed?
  </summary>
  <p>
    By inspecting the size and composition of your app's bundles, you can
    identify which modules contribute most to the bundle's size. By optimizing
    these modules, removing unused dependencies, duplicate npm packages, and
    reducing unnecessary code, you can reduce the overall bundle size. A smaller
    bundle size leads to faster load times, improving your app's performance and
    user experience.
  </p>
</details>

<details>
  <summary>7. What should I do after analyzing my Next.js app bundles?</summary>
  <p>
    After analyzing your app bundles, you can start addressing the issues
    identified during the analysis. This may involve compressing or resizing
    large images, removing duplicate or unused npm packages, and optimizing
    JavaScript files using techniques like minification, tree shaking, and code
    splitting. By taking these steps, you can optimize your app's performance
    and provide a faster and more efficient user experience.
  </p>
</details>

<details>
  <summary>
    8. How can I create a script to easily run the bundle analysis for my
    Next.js app?
  </summary>
  <p>
    To create a script for running the bundle analysis, you can add a custom
    script in your package.json file. Use the cross-env package to set the
    ANALYZE environment variable to true, which enables the bundle analyzer
    during the build process. This way, you can easily run the analysis by
    executing the script in your terminal or command prompt.
  </p>
</details>



Debugging is essential to the software development process, including React development. As React developers, encountering errors and issues in our code is inevitable, but being able to debug and fix them effectively is crucial to ensure the stability and performance of our React applications.

This article will explore various tips and tricks for debugging React code. We will cover common types of errors that React developers may encounter, such as UI bugs, logic errors, networking errors, and regression bugs. We will also discuss different ways to debug React code, including using the console, browser extensions, npm packages and tools, error boundaries, rubber-duck debugging, and more.

By the end of this article, you will better understand how to effectively debug React code and utilize different debugging techniques and tools to identify and fix issues in your React applications. So, let's dive in and master the art of debugging React code!

## Prerequisites before React debugging

Before diving into debugging React code, you must ensure that you have certain prerequisites to facilitate a smooth debugging process. These prerequisites include:

### Understanding React fundamentals

To effectively debug React code, it's crucial to have a solid understanding of the fundamentals of React, including concepts such as components, state, props, lifecycle methods, and event handling. Familiarize yourself with React documentation and tutorials to ensure you grasp React concepts well.

### Setting up a development environment

Ensure you have a well-configured environment for React development. A properly configured development environment ensures you can write, run, and debug React code effectively. This includes installing Node.js and npm, a code editor, and a version control system like Git.

### Using a modern web browser

React applications run in web browsers, so it's essential to use a modern web browser that supports the latest web technologies and developer tools. Popular browsers such as Chrome, Firefox, and Edge have built-in developer tools that can significantly aid in debugging React code.

### Familiarity with debugging concepts

It's essential to have a good understanding of general debugging concepts like using breakpoints, inspecting variables, and understanding call stacks. Familiarize yourself with debugging techniques and tools commonly used in web development, as they can also be applied to debugging React code.

Having these prerequisites before diving into React debugging can significantly enhance your debugging process and make it more effective. Once you have a proper understanding, you can identify and fix common errors in React, as discussed in the next section.

## Common types of errors in React

React development can involve various types of errors that can occur during the development process. Understanding these common types of errors can help React developers identify and fix issues more effectively. Some of the common types of errors in React include the following:

### UI bugs

These errors are related to the user interface of the React application and can manifest as visual glitches, layout issues, or the incorrect rendering of components. UI bugs can occur due to CSS styling issues, incorrect use of React components, or incorrect state management.

### Logic errors

These errors are related to the logic and behavior of the React application and can result in incorrect calculations, unexpected behavior, or improper data handling. Logic errors can occur due to incorrect conditional statements, data manipulation, or incorrect handling of events and callbacks.

### Networking errors

These errors are related to communication with external APIs or servers and can result in failed requests, incorrect data retrieval, or improper handling of network responses. Networking errors can occur due to issues with API endpoints, incorrect data formatting, or network connectivity issues.

### Regression bugs

These errors are introduced inadvertently during the development process and can result in the regression of previously working functionality. Regression bugs can occur due to changes in code, dependencies, or configurations that unintentionally affect the behavior of the React application.

It's essential to be aware of these common errors in React development and understand their potential causes to debug and fix them effectively. The following section will explore different ways to debug React code.

## Common ways to debug React code

Debugging React code can be challenging, but fortunately, several common ways exist to identify and fix issues effectively. These methods can help React developers find out and resolve errors in their code. Some of the common ways to debug React code include the following:

### 1. Console logging

One of the simplest and most widely used methods for debugging React code is to use console.log statements strategically placed in your code. By logging relevant data, variables, and component states to the console, you can gain insights into the flow of your application and identify potential issues.

### 2. Breakpoints

Breakpoints are a powerful tool for debugging React code. You can set breakpoints in your code using your browser's developer tools or a code editor and then step through the code line by line to observe the execution flow and inspect variables and states at different points in time.

### 3. Network debugging

Network-related errors, such as failed API requests or incorrect data retrieval, can be debugged using network debugging tools. Browsers' built-in developer tools, such as the Network tab, can help you inspect network requests and responses, check for errors, and analyze data exchange between your React application and external APIs or servers.

### 4. Browser extensions

There are several browser extensions available that can assist in debugging React code. For example, the React Developer Tools extension provides powerful tools for inspecting and debugging React components, props, and states directly from the browser in real-time.

### 5. React strict mode

React Strict Mode is a development mode that helps highlight potential issues and unsafe practices in your React code. By enabling Strict Mode, you can get additional warnings and checks from React to catch potential issues early in the development process.

### 6. Code quality tools

Utilizing code quality tools like linters, static analyzers, and code formatters can help you identify and fix common coding mistakes, potential bugs, and best practices violations in your React code. Tools like ESLint, Prettier, and TypeScript can help you catch issues early in the development process and improve the overall quality of your code.

### 7. Debugger

Most modern browsers come with built-in JavaScript debuggers that allow you to set breakpoints, step through code, inspect variables, and trace the flow of execution. Familiarize yourself with the debugger tools in your browser and learn how to use them to debug your React code effectively.

### 8. Documentation

React has extensive documentation provides detailed information about its features, APIs, and best practices. Reviewing the official React documentation can help you understand how React works under the hood, learn about common issues and their solutions, and stay updated with the latest best practices for debugging React code.

### 9. Rubber-duck debugging

This unconventional method involves explaining your code line by line to an inanimate object, such as a rubber duck. You can often identify issues you may have missed otherwise by verbalizing your thought process and explaining your code in simple terms.

## Advanced React debugging techniques

In addition to the common ways to debug React code, some advanced techniques can help you identify and fix complex issues. These techniques require a deeper understanding of React's internals and more advanced debugging skills.

### 1. React error boundaries

React allows you to define error boundaries, which are unique components that can catch and handle errors occurring in their children components. Using error boundaries strategically in your React application can help you capture and handle errors in a more graceful manner, providing better error messages and preventing the entire application from crashing.

### 2. npm packages and tools

Several npm packages and tools are available specifically for debugging React applications. For example, the "react-dom" package provides tools for debugging React components, such as the "findDOMNode" method for finding the DOM node associated with a React component. Other popular tools like "Redux DevTools"<a rel="nofollow" href="https://github.com/reduxjs/redux-devtools">Redux DevTools source</a> offer advanced debugging capabilities for React applications.

### 3. Debugging with React testing library

React Testing Library is a popular testing framework for React applications. It provides a set of utilities for testing React components. It allows you to assert the rendered output, simulate user interactions, and inspect the state and props of your components during testing. You can use React Testing Library to write comprehensive tests for your components and catch any issues early in development.

### 4. Custom debugging tools

You can create custom debugging tools tailored to your React application. For example, you can build a custom logger or debugger that provides insights into the internal state, props, and component hierarchy of your React components. This can help understand the flow of data and identify any unexpected behavior.

### 5. Debugging with code review

Code review is an integral part of the development process and can be a powerful debugging technique. Reviewing your code by peers or senior developers can help identify potential issues, provide feedback on code quality, and suggest improvements. Code review can help you catch issues that you may have missed and ensure that your code is clean and error-free.

Depending on your specific issue and development environment, some of these methods may be more effective than others. It's essential to experiment and find the best approach for your situation.

## Best practices for debugging React code

Here are some best practices for debugging React code:

### Use console logging

Console logging is a simple yet effective way to debug React code. You can use console.log() statements strategically in your components to print out values of variables, props, and states at different points in your component's lifecycle. This can help you understand the data flow and identify any unexpected behavior.

### Utilize browser developer tools

The built-in developer tools of most modern web browsers can be incredibly helpful for debugging React applications. These tools allow you to inspect and manipulate the DOM, view console logs, debug JavaScript code, and monitor network requests. They can help you identify and fix issues related to component rendering, state changes, and network interactions.

### Follow a "divide and conquer" approach

When debugging React code, following a "divide and conquer" approach is often helpful. Start by isolating the problematic component or section of code. Then, gradually narrow down the issue by systematically testing different parts of the component or inspecting relevant props and states. This can help you pinpoint the root cause of the issue more efficiently.

### Seek help from peers and communities

Be bold and seek help from peers, colleagues, or online communities when debugging React code. Discussing the issue with others can provide fresh perspectives, uncover potential blind spots, and lead to faster resolution. Online communities such as Stack Overflow, GitHub issues, and React forums can be valuable resources for getting help with React debugging.

## Conclusion

In conclusion, debugging is an essential skill for React developers to effectively identify and fix issues in their code, ensuring the stability and performance of their React applications. This article has explored tips and tricks for how to debug React code, including common errors in React and different ways to debug React code.

By mastering different debugging techniques and tools, React developers can save time and effort in identifying and fixing issues in their React applications, resulting in more stable and performant applications. Always remember to test your code thoroughly and use proper debugging techniques to ensure the reliability and quality of your React applications.

<connectWithMe />

## Frequently asked questions

<details>
  <summary>1. Why is my React component not rendering?</summary>
  <p>
    There could be several reasons for this issue, namely incorrect
    import/export statements, missing or misspelled component names, or
    incorrect usage of JSX syntax. Double-check your code for errors, review
    your component hierarchy, and verify that you have rendered the component
    using the correct syntax.
  </p>
</details>

<details>
  <summary>2. Why is my React component not updating?</summary>
  <p>
    This issue can occur when the component's state or props are not updated
    correctly. Check the component's state and props to ensure that they are
    updated correctly. Additionally, verify that you are using the correct
    syntax for updating the state and props.
  </p>
</details>

<details>
  <summary>3. How can I debug my React app in the browser?</summary>
  <p>
    React DevTools is a popular browser extension that allows you to inspect,
    debug, and profile your React applications. You can use it to inspect the
    component tree, check its props and state, and view the React component's
    lifecycle hooks. Additionally, you can use console.log() statements,
    debugging breakpoints, and the debugger; statement in your code to
    investigate and fix issues.
  </p>
</details>

<details>
  <summary>4. How do I handle "props" in React?</summary>
  <p>
    Props (short for properties) are used to pass data from a parent component
    to a child component in React. To handle props, you can define prop types
    using PropTypes or TypeScript, validate the props being passed to a
    component, and use destructuring to access the props in the child component.
    If you encounter issues with props not being passed correctly, check the
    prop names, data types, and usage in both the parent and child components.
  </p>
</details>

<details>
  <summary>5. How can I debug "undefined" or "null" errors in React</summary>
  <p>
    "Undefined" or "null" errors in React can occur when accessing properties or
    methods on undefined or null values. You can use the JavaScript debugger to
    set breakpoints and inspect the variables in your code to identify where the
    issue is occurring. Additionally, you can use conditional rendering and
    nullish coalescing (??) or optional chaining (?.) operators to handle cases
    where values might be undefined or null.
  </p>
</details>

<details>
  <summary>6. How do you debug React with breakpoints?</summary>
  <p>
    You can use the browser's developer tools to debug React with breakpoints.
    Go to the sources tab in the browser's developer tools to view your code,
    then on the left bar showing line numbers, click on the line of code you
    want to debug using breakpoint. On the right, you will see a Breakpoint tab
    that lists all the current breakpoints you have created. After that, reload
    the page so the code can run again. On new loading, the code will pause its
    execution at the breakpoints you have set. Clicking on the play button tells
    the browser to continue executing the code.
  </p>
</details>

<details>
  <summary>7. How do I debug React in VS Code?</summary>
  <p>
    To debug in VS Code, click on the Debug icon on the left sidebar in your VS
    code to open the debug menu. Click on the Run and Debug button and choose an
    environment you want to run your debugger in. VS Code will create a
    configuration file for you. After that, click the Run or Play button.
  </p>
</details>



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

## Introduction to Nextjs

[Nextjs](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, Nextjs stands out as a popular choice for modern web development. Furthermore, it integrates well with popular front-end tools such as Redux, TypeScript, and GraphQL. It offers a serverless deployment option, allowing developers to focus solely on delivering exceptional user experiences.

## Key Features of Nextjs

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

**1. Server-side Rendering (SSR)**: Nextjs 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, Nextjs 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 Nextjs 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**: Nextjs 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**: Nextjs 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**: Nextjs 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**: Nextjs 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**: Nextjs 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**: Nextjs 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**: Nextjs 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**: Nextjs provides a powerful and intuitive routing system, allowing you to create and manage your application's routes and pages easily.

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

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

## Are Nextjs and React the same thing?

No, Nextjs and React are not the same things. Nextjs 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 Nextjs is one of the popular frameworks used for building React applications.

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

## Should You Switch to Nextjs from React?

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

### Pros of Using Nextjs

**Improved performance**: Nextjs 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**: Nextjs 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**: Nextjs provides fast loading times and improved SEO, which can increase your business's conversion rate and sales.

**Boost of marketing channels**: Nextjs 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, Nextjs can help you overtake your competition and stay ahead in the market.

**Better user experience**: Nextjs 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**: Nextjs 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**: Nextjs is designed for scalability, making it easier for businesses to scale their applications as their needs grow.

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

### Cons of using NextJs

**Learning curve**: While Nextjs 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**: Nextjs relies on many external packages, such as React and Webpack, which can increase the risk of compatibility and security issues.

**Performance overhead**: Nextjs 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 Nextjs application, consider the additional infrastructure and costs associated with this.

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

### Conclusion

In conclusion, Nextjs 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, Nextjs 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, Nextjs is worth considering for your next web development project.

It's also important to keep in mind that switching from React to Nextjs 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 />

## Resources

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

<connectWithMe />



A Search Component is a UI element in a software application that allows a user to search for specific information or data. The component typically includes an input field where the user can enter a search query and a button to initiate the search. The search results are displayed to the user in a suitable format, such as a list or table.

The purpose of a Search Component is to provide a simple and efficient way for the user to find the information they are looking for within the application. A well-designed Search Component can significantly improve the user experience and make it easier for users to find what they want.

This article will discuss building a simple React Search Component using some [React Hooks](https://www.turing.com/kb/how-to-conduct-testing-using-react-hooks) like useState and useEffect.

## What are React Hooks?

React Hooks are functions in React that allow developers to add state and side effects to functional components. They were introduced in React 16.8 as an alternative to class components for adding state and logic. React Hooks simplify code and eases the process of building reusable and composable components. This include built-in hooks like useState, useEffect, and useContext, as well as the ability to create custom hooks. You can learn more about it from the React documentation website.

React Hooks are a good choice for creating a search component in React because they allow for reusable, simple, optimized, and easy-to-test components. They simplify the code, make it easier to understand, and only update what has changed for improved performance. These benefits make React Hooks a good choice for building efficient and effective search components in React. We will use the two most common hooks; useState() and useEffect().

## Setting up the project

Create a React app called react search component by running the command npx create-react-app react-search-component, then install the [axios](https://www.npmjs.com/package/axios) package by running npm install axios or yarn add axios. After that, open up the app in your preferred code editor, and run the command npm dev or yarn dev to view the app in your browser.

## Building the search component

We will build a one-page app that displays facts about different countries. We have created a [mock API](https://63db4515b8e69785e47e7435.mockAPI.io/country) using the tool [mockAPI](https://mockapi.io/) and populated it with country facts obtained from [Facts.net](https://facts.net/country-facts/). There will also be a search bar, where one can enter a search query. The country facts that contain the search query will be displayed in real-time when the user enters the search query.

Let us build and style the page. Going into the **App.js** file, write the following code:

```jsx
import React from "react";
import "./App.css";

const App = () => {
  return (
    <div className="App">
      <header className="header">
        <h1 className="page-title">Random Country Facts</h1>

        <div className="form-input-group">
          <label className="search-input-label" htmlFor="search">
            <input
              className="search-input"
              type="search"
              name="search"
              id="search"
              placeholder="Search..."
              required
            />
          </label>
        </div>
      </header>

      <main>
        <section className="cards-wrapper">
          <article className="card" key="index">
            <h2 className="short-fact">Title</h2>
            <p className="long-fact">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            </p>
            <p className="country-name">Country name</p>
          </article>
          <article className="card" key="index">
            <h2 className="short-fact">Title</h2>
            <p className="long-fact">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            </p>
            <p className="country-name">Country name</p>
          </article>
        </section>
      </main>
    </div>
  );
};

export default App;
```

From the code above, we have a **header** element containing our project's title and search input. We also have a **main** element containing an article element card that contains the dummy text, which will display the facts fetched later. Let us style them by adding the following code to our **App.css** file.

```css
* {
  box-sizing: border-box;
}
html,
body {
  overflow-x: hidden;
}
body {
  padding: 0 30px;
  color: #434341;
  max-width: 1400px;
  margin: auto;
}

/* header */
.header {
  padding: 20px 0;
  text-align: center;
}
.page-title {
  margin: 0 0 20px;
}
.form-input-group {
  display: flex;
  width: 100%;
  max-width: 400px;
  margin: auto;
}
.search-input-label {
  border-radius: 5px;
  flex-grow: 1;
}
.search-input {
  width: 100%;
  border: 1px solid #ddd;
  padding: 5px 10px;
  border-radius: 5px;
}
.search-input:focus {
  outline: #434341;
}
.search-button {
  padding: 5px 10px;
  border-radius: 0 5px 5px 0;
  border: 1px solid #ddd;
  background-color: #eee;
}

/* cards */
.cards-wrapper {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin: 40px 0 80px;
}
@media screen and (max-width: 960px) {
  .cards-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 786px) {
  .cards-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
.card {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px 20px;
  box-shadow: 4px 4px 4px 0px #eee;
}
.country-name {
  border: 2px solid #eee;
  border-radius: 5px;
  width: max-content;
  padding: 5px;
}
```

Let us view the changes in the browser.
![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686233349/Article%20Images/Turing/react-search-component/image1_saicms.png)

This looks great. Now let us fetch our data and display it on the page. Returning to our **App.js**, we import **axios** from the axios package we installed earlier to fetch our data. We also import the React hooks from React, **useEffect**, and **UseState**.

```jsx
import React, { useEffect, useState } from "react";
import axios from "axios";
```

The useState hook allows components to have state variables, which can change over time and trigger re-renders without using class components, while the useEffect hook allows components to perform side effects, such as updating the component's state or interacting with APIs, in response to changes in component's props or state.

We create two states called **isLoading** and **FactsFata** using the useState hook. The isLoading variable is a boolean we use to condition what we render on the screen. The factsData is an empty array that will hold the data we fetch. And while we fetch our data, a loading message will be displayed to the user until our data has been fetched and is ready to be displayed.

```jsx
const [isloading, setIsloading] = useState(true);
const [FactsData, setFactsData] = useState([]);
```

Next, we write the function to fetch and store our data.

```jsx
useEffect(() => {
  axios
    .get(`https://63db4515b8e69785e47e7435.mockAPI.io/country`)
    .then((response) => {
      setFactsData(response.data);
      setIsloading(false);
    })
    .catch((err) => {
      console.log(err);
    });
}, []);
```

Below our states, we have written our function within a useEffect hook. This function fetches data from the mock API created and stores it in the **fetchData** state. After that, it sets the **IsLoading** state from true to false. Now, let us output the data to the user. Replace the current code within the **main** element with the following;

```jsx
<main>
  {isloading ? (
    <p className="message">loading...</p>
  ) : (
    <section className="cards-wrapper">
      {factsData.map((data) => (
        <article className="card" key="index">
          <h2 className="short-fact">{data.shortFact}</h2>
          <p className="long-fact">{data.longFact}</p>
          <p className="country-name">{data.country}</p>
        </article>
      ))}
    </section>
  )}
</main>
```

We created a ternary operator to conditionally render different UI elements depending on the value of the isloading variable. If isloading is true, it displays a p element with the text "loading...". If isloading is false, it maps over the factsData array and creates a card for each item, displaying a short fact, a long fact, and a country name. Let us view it in our browser.

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686233350/Article%20Images/Turing/react-search-component/video1_oenvdq.gif)

Next, let us get the search query from the search bar and store it in a state.

```jsx
const [searchInput, setSearchInput] = useState("");

<input
  className="search-input"
  type="search"
  name="search"
  id="search"
  placeholder="Search..."
  value={searchInput}
  onChange={(e) => {
    setSearchInput(e.target.value);
  }}
  required
/>;
```

From the code above, we created a state called **searchInput**, initially set to an empty string, and then the value of our input element was set to the searchInput state variable. We also added an **onChange** attribute to the input element, which sets the searchInput state variable to the query the user enters. If you log the searchInput state variable to the console and enter a search query, you will see the value output as you type in the query.

Let us now show specific results based on the user's search query.

We create a state called **filteredResults** to store our filtered result with an empty array as its initial value.

```jsx
const [filteredResults, setFilteredResults] = useState([]);
```

We also create a react search bar function within another useEffect hook for our search bar component.

```jsx
useEffect(() => {
  const filteredData = factsData.filter((fact) => {
    return Object.values(fact)
      .join("")
      .toLowerCase()
      .includes(searchInput.toLowerCase());
  });
  setFilteredResults(filteredData);
}, [factsData, searchInput]);
```

This React search function updates the state of **filteredResults** based on the changes in the variables **factsData** and **searchInput**, which we passed in as a second argument to the useEffect hook telling React to run this effect only when either of these values changes.

It filters the **factsData** array based on whether the string representation of the fact object's values contains the lowercase value of searchInput. The filtered data is then stored in **filteredData** and set as the value of filteredResults using **setFilteredResults**.

Next we go back into our main element and include another ternary operator within the section element to render either the fetched data or filtered result.

```jsx
<main>
  {isloading ? (
    <p className="message">loading...</p>
  ) : (
    <section className="cards-wrapper">
      {filteredResults.length === 0
        ? factsData.map((data) => (
            <article className="card" key="index">
              <h2 className="short-fact">{data.shortFact}</h2>
              <p className="long-fact">{data.longFact}</p>
              <p className="country-name">{data.country}</p>
            </article>
          ))
        : filteredResults.map((data) => (
            <article className="card" key="index">
              <h2 className="short-fact">{data.shortFact}</h2>
              <p className="long-fact">{data.longFact}</p>
              <p className="country-name">{data.country}</p>
            </article>
          ))}
    </section>
  )}
</main>
```

This second ternary operator checks the length of the filteredResults array. If it is equal to 0, it maps over the factsData array, and for each item in the array, it creates a card for each fact.

If the length of the filteredResults array is not equal to 0, then it maps over the filteredResults array and creates a card for each item in the same way described above.

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686233351/Article%20Images/Turing/react-search-component/video3_oeoftb.gif)

Our final code should look like this.

```jsx
import React, { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";

const App = () => {
  const [isloading, setIsloading] = useState(true);
  const [factsData, setFactsData] = useState([]);
  const [searchInput, setSearchInput] = useState("");
  const [filteredResults, setFilteredResults] = useState([]);

  useEffect(() => {
    axios
      .get(`https://63db4515b8e69785e47e7435.mockAPI.io/country`)
      .then((response) => {
        setFactsData(response.data);
        setIsloading(false);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  useEffect(() => {
    const filteredData = factsData.filter((fact) => {
      return Object.values(fact)
        .join("")
        .toLowerCase()
        .includes(searchInput.toLowerCase());
    });
    setFilteredResults(filteredData);
  }, [factsData, searchInput]);

  return (
    <div className="App">
      <header className="header">
        <h1 className="page-title">Random Country Facts</h1>

        <form className="form-input-group">
          <label className="search-input-label" htmlFor="search">
            <input
              className="search-input"
              type="search"
              name="search"
              id="search"
              placeholder="Search..."
              value={searchInput}
              onChange={(e) => {
                setSearchInput(e.target.value);
              }}
              required
            />
          </label>
        </form>
      </header>

      <main>
        {isloading ? (
          <p className="message">loading...</p>
        ) : (
          <section className="cards-wrapper">
            {filteredResults.length === 0
              ? factsData.map((data) => (
                  <article className="card" key="index">
                    <h2 className="short-fact">{data.shortFact}</h2>
                    <p className="long-fact">{data.longFact}</p>
                    <p className="country-name">{data.country}</p>
                  </article>
                ))
              : filteredResults.map((data) => (
                  <article className="card" key="index">
                    <h2 className="short-fact">{data.shortFact}</h2>
                    <p className="long-fact">{data.longFact}</p>
                    <p className="country-name">{data.country}</p>
                  </article>
                ))}
          </section>
        )}
      </main>
    </div>
  );
};

export default App;
```

## Conclusion

That's it on building a Search Component in React using some React Hooks. This can be further customized by adding a button to the react search bar component and displaying the result only when the button is clicked.

You can find the [source code on GitHub](https://github.com/Timonwa/react-search-component) and [interact with the app](https://react-search-component-timonwa.vercel.app/).

## Frequently asked questions

<details>
  <summary>1. How do I create a search component in Reactjs?</summary>
  <p>
    You can create a search component in Reactjs by using a text input field and
    a button to trigger the search functionality. The text input field can
    capture the user's search query, and the button can be clicked to initiate
    the search.
  </p>
</details>

<details>
  <summary>2. How do I get the search input value in React?</summary>
  <p>
    You can get the search input value in React by using the "onChange" event
    listener on the text input field. This will allow you to capture the user's
    input as they type, and update the search query accordingly.
  </p>
</details>

<details>
  <summary>3. How do I create a dynamic search box in Reactjs?</summary>
  <p>
    You can create a dynamic search box in Reactjs by using the "useState" hook
    to manage the state of the search query. You can then pass the search query
    as a prop to your search component, and use it to filter your search results
    dynamically as the user types.
  </p>
</details>

<connectWithMe />



It is now possible to easily animate properties and create smooth transitions in CSS Grid without writing even one line of animation code. Yay!

In this article, we'll demonstrate how to use the Animate CSS Grid package to animate all the properties of our Grid. We'll take a look at the package's features and see how easy it is to use. Animate CSS Grid enables us to achieve smooth transitions between the state changes of our CSS Grid container without writing any CSS animation code. We'll also look at how we can configure the CSS package to suit our specific needs.

Let's get started!

## What is CSS Grid?

If you are reading this article, you're likely already familiar with [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). But, for those readers who are new to CSS, here's a brief introduction.

CSS Grid allows us to make layouts in CSS using a grid-based layout system involving rows and columns, thus making it easier to design web pages without using floats and positioning. CSS Flexbox was designed for building layouts in one dimension (either a row or a column), whereas CSS Grid was designed for building layouts simultaneously in two dimensions (rows and columns).

A grid-based layout comprises a parent element that has one or more child elements. Some CSS Grid properties include `grid-column`, `grid-row`, `grid-template-column`, and `grid-gap`. Most, of the CSS Grid properties can be animated; we'll demonstrate animating a few of them later in this article. To learn more about each of the CSS Grid Properties and which may be animated, [see the official documentation](https://www.w3.org/TR/css-grid-1/).

## Is it possible to animate a CSS Grid layout?

Previously, animating CSS Grid properties was nearly impossible because the feature lacked browser support. It has only recently gained support in Firefox v66+ and later in other browsers like Chrome v107+, Safari v16.1+, and Edge v107+.

As of this writing, nearly all of the CSS Grid properties are included in the [Animatable CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). However, for this article, we will not animate the Grid properties by writing CSS animation for our transitions. Instead, we'll use the [Animate CSS Grid](https://github.com/aholachek/animate-css-grid) Open source package.

## How does animate-css-grid work?

Animate CSS Grid allows you to conveniently transition the state of your CSS Grid from one state to another. If your Grid's content changes, or one of its children is updated by adding or removing a class, the grid will automatically transition to its new configuration.

This package allows you to animate CSS Grid properties, including `grid-column`, `grid-row`, `grid-template-column`, and `grid-gap`.

animate-css-grid handles all the animation for you, saving you the time and the stress of writing your own animation code. This is especially important if you are like me and do not like configuring pure animations in CSS!

To use animate-css-grid, all you have to do is wrap your Grid container with the wrapGrid method provided by the package. Whenever any of the Grid properties in your code change, it automatically has an animated effect when it transitions from one state to another.

Another way to configure the animation with the animate-css-grid package is by passing an object into the wrapGrid method. We'll discuss this option later in the article.

## Animate CSS Grid demo

Animate CSS Grid can be used in vanilla JavaScript, React, and Vue.js projects. For the scope of this article, we'll build a project using vanilla JavaScript.

### Building the project

To start, let's create a folder called `animate-css-grid` where we can create the following files: `index.html`, `style.css`, and `script.js`.

Open the folder in your preferred code editor (I'm using VS Code). Now, let's write some code.

In the `index.html` file, import the `style` file inside the `<head>` tag:

```html
<link rel="stylesheet" href="style.css" />
```

Now, add the following code inside the` <body>` tag, and import the `<script>` tag just below the html codes:

```html
<body>
  <h1>Animating CSS Grid</h1>
  <div class="buttons">
    <button class="column-button">Toggle Grid Column</button>
    <button class="row-button">Toggle Grid Row</button>
    <button class="gap-button">Toggle Grid Gap</button>
  </div>
  <div class="grid">
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
  </div>

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

Our `<body>` tag has an `<h1>` tag containing the name of the package and a `<div>` tag called `buttons` wrapping around three buttons. Later, we'll configure this tag to modify the properties of our Grid when any of the buttons are clicked.

There's also another `<div>` tag named `grid` representing our grid parent container with all our grid items inside.

Add the following code to the `style.css` file:

```css
html,
body {
  font-size: 16px;
  color: hsl(60, 58%, 0%);
}
body {
  padding: 20px;
  background-color: rgb(99, 232, 203);
}
h1 {
  font-size: 2rem;
  text-align: center;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0;
}
button {
  padding: 10px;
  border-radius: 5px;
  border: 2px solid hsl(60, 58%, 17%);
  background-color: navajowhite;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-auto-rows: 10rem;
  grid-gap: 20px;
  margin: 40px 0;
}
.grid__item {
  background-color: hsl(40, 58%, 17%);
  border-radius: 5px;
}
.grid__item:nth-child(1),
.grid__item:nth-child(4) {
  background-color: hsl(10, 58%, 17%);
}
.grid__item:nth-child(2),
.grid__item:nth-child(6) {
  background-color: hsl(150, 58%, 17%);
}
.grid__item:nth-child(3),
.grid__item:nth-child(7) {
  background-color: hsl(200, 58%, 17%);
}
.grid__item:nth-child(4),
.grid__item:nth-child(8) {
  background-color: hsl(305, 58%, 17%);
}

/* transition styles that would be animated */
.toggle-column {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.toggle-row {
  grid-auto-rows: 16rem;
}
.toggle-gap {
  grid-gap: 40px;
}
```

We've added styling to every element in our document, and we've also written styles that will be added to or removed from our Grid parent container via JavaScript when and of the buttons are clicked.

Here's how our current code looks in the browser:
![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686566421/Article%20Images/LogRocket/animate-css-grid/image1_rcvm91.png)

Next, add the following code to the `script.js` file:

```js
// selecting our elements
const gridButton = document.querySelector(".column-button");
const rowButton = document.querySelector(".row-button");
const gapButton = document.querySelector(".gap-button");
const gridCntr = document.querySelector(".grid");

// adding event listeners to the buttons
gridButton.addEventListener("click", function () {
  gridCntr.classList.toggle("toggle-column");
});

rowButton.addEventListener("click", function () {
  gridCntr.classList.toggle("toggle-row");
});

gapButton.addEventListener("click", function () {
  gridCntr.classList.toggle("toggle-gap");
});
```

In the above code, we've selected our buttons and saved them as `gridButton`, `rowButton`, and `gapButton` respectively. We've also selected our Grid parent container and named it `gridCntr`.

We've also added event listeners to each button. Here's how they work:

- When the `Toggle Grid Column` button is clicked, we add or remove the `toggle-column` style property on our Grid, increasing and reducing the width of our Grid items
- When the Toggle Grid Row button is clicked, we add or remove the toggle-row style property on our Grid, increasing and reducing the height of our Grid items
- When the Toggle Grid Gap button is clicked, we add or remove the toggle-gap style property on our Grid, increasing and reducing the space between each Grid item

Now, let's view the changes in our browser:

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686567232/Article%20Images/LogRocket/animate-css-grid/Untitled_video_-_Made_with_Clipchamp_mjhedx.gif)

We can see that our buttons work as expected. But, there needs to be a smooth transition between the different states our grid changes to. That's where the Animate CSS Grid package comes into play.

### Importing Animate CSS Grid and wrapping the container

There are two ways to use the Animate CSS Grid package in a project. One option is to install the package by running one of the following commands:

```bash
yarn add animate-css-grid

npm install animate-css-grid
```

A second option is to use a script tag instead of installing the package. You can read more about this option in the [package's GitHub ReadMe](https://github.com/aholachek/animate-css-grid#how-to-use-it).

For this article, we'll use the script tag approach.

At the bottom of the `<body>` tag, include the following script tags:

```html
<script src="https://unpkg.com/animate-css-grid@latest"></script>
<script>
  const grid = document.querySelector(".grid");
  animateCSSGrid.wrapGrid(grid);
</script>
```

You'll notice that we not only imported the package via our script tag, but we also targeted our Grid container and wrapped it with the animateCSSGrid.wrapGrid() method.

Going back into our browser, we can finally see a transition effect when we change the state of our Grid. This transition is made possible by the Animate CSS Grid package:

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686567246/Article%20Images/LogRocket/animate-css-grid/Untitled_video_-_Made_with_Clipchamp_1_ncwzhm.gif)

### Configuring Animate CSS Grid by passing an object

As I mentioned earlier, we can also configure the CSS animation by passing in an object. The object requires the following values:

- **stagger**: represents the amount of time that should elapse between each animation of an item in a grid; the default value is `0ms`
- **duration**: represents the total time the animation will last; the default value is `250ms`
- **easing**: represents the animation-timing-function of the transition; the default value is [ease-in-out](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). [You can learn more about available easing functions here](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function)
- **onStart**: represents a function to be called when an element is about to animate
- **onEnd**: represents a function to be called when an element has finished animating

Let's pass the following config into our `wrapGrid` method:

```js
animateCSSGrid.wrapGrid(grid, {
  stagger: 100,
  duration: 500,
  easing: "backInOut",
  onStart: (animatingElementList) => {
    console.log("starting animation");
  },
  onEnd: (animatingElementList) => {
    console.log("ending animation");
  },
});
```

Now, let's view the change in our browser:

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686567256/Article%20Images/LogRocket/animate-css-grid/Untitled_video_-_Made_with_Clipchamp_2_fxvtlm.gif)

And there you have it, easy peasy!

## Conclusion

Animation certainly makes our CSS Grid more visually appealing! We can use Animate CSS Grid to achieve this while writing less code.

In this article, we demonstrated how to use the Animate CSS Grid package to animate and create smoother transitions for our Grid and also how to configure its settings.

You can play with the code here on [GitHub](https://github.com/Timonwa/animate-css-grid) and in this [live demo](https://animate-css-grid-timonwa.vercel.app). Click the demo buttons to see the animation and transitions.

<connectWithMe />



The [will-change CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) is a powerful tool that allows developers to hint to the browser about the elements on a page that are likely to change soon. This gives the browser a chance to optimize its rendering of those elements ahead of time, potentially resulting in better performance. However, will-change should be used with caution, as overuse can actually harm performance rather than improve it.

This article will discuss how to use `will-change` property and when to avoid using it. We'll also share information about its browser support.

_N.B., `will-change` should be used with caution, as overuse can actually harm performance rather than improve it._

## What is will-change?

`will-change` is a CSS property that tells the browser which properties of an element (e.g., content, scroll prosition, opacity, etc.) are likely to change in the future. This allows the browser to optimize the element's rendering ahead of time, potentially resulting in better performance.

For example, let's say you have a page with many elements of the same size and color. If you know that one of those elements will change size or color soon, you can use `will-change` to inform the browser about this change before it happens.

This “heads up” will allow the browser to optimize its rendering of the element, potentially resulting in better performance when the change occurs.

## Why use will-change?

There are a few reasons why you might want to use will-change. Let's take a look.

### Optimizing performance

As mentioned earlier, the primary reason for using `will-change` is to improve performance. By letting the browser know which elements are likely to change soon, it can optimize its rendering of those elements ahead of time, potentially resulting in better performance when the change actually happens.

### Improving animations

`will-change` can improve the performance of animations. It allows the browser to optimize element rendering, potentially producing smoother and more fluid animations. If you know an element will be animated, you can use `will-change` to inform the browser about this.

### Preventing repaints and reflows

Repaints and reflows are expensive operations that can significantly impact the performance of a page. Repaint occurs when there are changes to an element that do not affect the DOM layout (e.g., a change in an element's background). Reflows occur when changes to an element do affect the DOM layout (e.g., a change in an element's width or height).

By using `will-change`, you can help prevent unnecessary repaints and reflows, further improving the performance of your page.

## Breaking down the will-change syntax

The `will-change` syntax looks like this:

```
will-change: <animateable-feature> = auto | scroll-position | contents | <custom-ident>
```

The `will-change` property can have one or more values:

- `auto`: Tells the browser that it should apply the standard optimization; this is the default value
- `scroll-position`: Tells the browser that an element's scroll position will be animated later and should prepare for its content which is not visible in the scroll window of that element
- `contents`: Tells the browser that the contents of an element will change, so the browser should not cache this element's content
- `<custom-indent>`: This can be any user-defined property, such as transform or background. It tells the browser that the value of the property will soon change; it can also be one or more properties separated by a comma

_N.B., if you specify a shorthand property as a custom-indent value (e.g., background), you are telling the browser that the background-color, background-image, background-position, and other background-related properties are likely to change_

## Adding will-change to an element

It's relatively simple to use the `will-change `property. Just add `will-change` to the element you want to optimize, and specify the properties that are likely to change, like so:

```css
element {
  will-change: height, width, color;
}
```

In the example above, we're telling the browser that the element's height, width, and color properties are likely to change soon. This allows the browser to optimize the element's rendering, potentially resulting in better performance when the property changes occur.

Do not use the will-change property at the point of an animation or transition; instead, use it before the transition or animation. `will-change` is supposed to tell the browser about an upcoming change so that the browser can prepare for it.

The browser can't prepare for a change that is currently happening or has already occurred.

For example, instead of adding it directly to an element at the point of transition, like this:

```css
.my-element:hover {
  will-change: color;
  color: red;
}
```

You'll add it to the element at its initial state when no change has occurred yet:

```css
.element {
  will-change: color;
  transition: color 300ms ease-in-out;
}

.my-element:hover {
  color: red;
}
```

Also, it's best practice to turn `will-change` on and off before and after the desired change occurs, especially if such changes will be infrequent. It can be hard to do this from your CSS stylesheet, but with JavaScript, you can easily add (and remove) it to your elements:

```js
const el = document.querySelector(".parent-element");
el.addEventListener("mouseenter", addWillChange);
el.addEventListener(mouseleave, removeWillChange);

const addWillChange = () => {
  this.style.willChange = "color";
};

const removeWillChange = () => {
  this.style.willChange = "auto";
};
```

Now that we understand how to use `will-change`, take a look at when to use it.

## When to use CSS will-change

There are different instances in which you might want to use the CSS `will-change` property to [improve the performance of your page](https://blog.logrocket.com/best-practices-improving-css-performance/). For example, if parts of your animation are not running smoothly, you can use `will-change` to make it more fluid and crisp, thereby improving animation performance:

```css
/* CSS file */
#animated-element {
  will-change: transform, opacity;
}

#animated-element.animated {
  transition: transform 0.5s, opacity 0.5s;
  transform: scale(2);
  opacity: 0;
}
```

```js
// JS file
const element = document.querySelector("#animated-element");

element.addEventListener("click", () => {
  element.classList.toggle("animated");
});
```

![using css will change to communicate property changes to the browser](https://res.cloudinary.com/denkuysrh/image/upload/v1686229846/Article%20Images/LogRocket/when-how-use-css-will-change/using-css-will-change-communicate-property-changes-browser_kkym4c.gif)

In the above example, we use `will-change` to let the browser know that the transform and opacity properties of the `#animated-element` are likely to change when the element is clicked. This enables the browser to optimize its element rendering, potentially producing smoother and more fluid animations.

Another use case for the CSS` will-change` property is when you know that the size or position of an element is going to change soon. Using will-change to inform the browser about this change ahead of time, enabling the browser to optimize its rendering of the element, potentially resulting in better performance when the change occurs:

```css
/* CSS file */
#changing-element {
  will-change: width, height, transform;
}
#changing-element.changed {
  width: 200px;
  height: 200px;
  transform: translateX(100px);
}
```

```js
//JS file
const element = document.querySelector("#changing-element");
element.addEventListener("click", () => {
  element.classList.toggle("changed");
});
```

![communicate changes browser width height transform css will change](https://res.cloudinary.com/denkuysrh/image/upload/v1686229878/Article%20Images/LogRocket/when-how-use-css-will-change/communicate-changes-browser-width-height-transform-css-will-change_mhwnfa.gif)

Here, we use `will-change` to let the browser know that the width, height, and transform properties of the `#changing-element` are likely to change when clicked.

Other examples where `will-change` can be helpful are when the style of an element, like the color, font size, or text decoration, is going to change soon.

## When to avoid using will-change

The `will-change` property can be useful for optimizing performance and improving animations in certain scenarios, but there are some cases where it may be best to avoid using it altogether. Use `will-change` with caution and only on elements that are likely to change soon and benefit from optimization.

Here are some situations where you should avoid using `will-change`:

- **During active animations or transitions**: Don't apply `will-change` to an element when an animation or transition is already taking place. Only use `will-change` when a change is imminent or likely to happen in the near future to give the browser sufficient time to optimize its rendering. Using `will-change` when a change has already occurred or is no longer imminent can strain the browser and harm performance
- **Unpredictable changes**: If changes to an element are unpredictable and can occur frequently or unexpectedly, it may not be worth using `will-change` as it can cause unnecessary performance overhead
- Small elements: `will-change` can be counterproductive for small elements on a page, as the performance gain from optimizing the rendering of a small element may be negligible
- **Non-animatable properties**: If you use `will-change` on non-animatable properties such as font-size or border-radius, it may have no effect on performance or could even negatively impact performance
- **Legacy browsers**: `will-change` is a relatively new CSS property and may not be supported in older browsers. If you need to support older browsers, you may need to avoid using `will-change` altogether
- **Overuse**: Overusing `will-change` can actually harm performance rather than improve it. You should avoid applying `will-change` to several elements on a page. This can cause the browser to hog machine resources, thereby slowing down the page load time. Instead, only use it on the elements that are likely to change soon and benefit from optimization. In general, `will-change` is best used as a solution for responding to performance issues rather than a means to preempt them

## Browser support for CSS will-change

The `will-change` property is supported in most modern browsers, including Microsoft Edge 79+, Google Chrome 36.0+, Mozilla Firefox 36.0+, Apple Safari 9.1+, and Opera 24+. You can learn more about [its browser support here](https://caniuse.com/will-change).

## Conclusion

The `will-change` CSS property is a valuable tool for optimizing the performance of elements on a page that are likely to change very soon. By letting the browser know about these changes ahead of time, the browser can optimize its rendering of those elements, potentially resulting in better performance.

However, `will-change` should be used with caution, as overuse can actually harm performance rather than improve it. You should limit the use of this property to cases when there is a specific need, such as when animating an element or when you know that an element's properties will change. Then, remove it as soon as it is no longer needed.

It's also important to realize that the browser may ignore the `will-change` hint if it's unnecessary. `will-change` is supported in most modern browsers.

By understanding when and how to use CSS `will-change` property, developers can leverage this powerful tool to improve the performance of their websites and applications.

<connectWithMe />



In June 2021, Next.js 13 was released and included several new features and improvements to make building and deploying high-quality applications more effortless. In this article, we'll look at some of the top features in this latest Next.js release and how they can benefit developers.

## A brief overview of Next.js

Next.js is a popular open-source [JavaScript framework](https://www.turing.com/blog/six-popular-javascript-frameworks-for-developers/) used to build server-rendered [React applications](https://www.turing.com/kb/types-of-react-apps-and-their-popular-examples). It allows developers to create performant and scalable web applications quickly and easily, making it a popular choice for many organizations.

## Noteworthy Next.js features

The following are some of the top features that were released in Next.js version 13.

- **Enhanced TypeScript support**

One of the significant improvements in Next.js 13 is the enhanced support for TypeScript, a popular programming language and a superset of JavaScript. It adds optional static typing and class-based object-oriented programming to the language.

Next.js 13 now includes built-in support for TypeScript, which means developers can easily add type-checking to their Next.js applications without installing additional dependencies. These new features help reduce runtime errors and make it easier to spot and fix bugs during development.

- **Automatic static optimization**

This version of Next.js has a new feature called 'automatic static optimization' that allows developers to optimize their applications for performance without manually configuring settings. The feature automatically generates a static version of each page in the application which can then be served to the user without requiring server-side rendering.

By default, [Next.js](https://www.turing.com/jobs/remote-next-js-developer) will automatically optimize pages that do not have asynchronous data requirements (e.g., data fetched from an external API or database). This means that for these pages, Next.js will generate the HTML for the page at build time and serve it to the user without needing additional server-side processing.

Automatic static optimization can be a valuable feature for improving the performance and scalability of a Next.js application as it reduces the load on the server and allows pages to be served more quickly to users. However, it is important to note that the feature is only suitable for pages that do not require dynamic data. If your page does require dynamic data, you will need to use one of the data fetching methods provided by Next.js, such as 'getServerSideProps', 'getStaticProps', or 'getServerProps', to fetch the data and render the page on the server.

- **Improved file system routing**

Next.js 13 features an improved file system routing that allows developers to define routes for their applications based on the file system structure. They can define routes simply by creating new files and folders in the application rather than manually configuring routes in a separate file.

This can make it easier for developers to build and maintain their applications as it reduces the amount of boilerplate code that they have to write. It also means that they can easily see and understand the structure of their application by looking at the file system, which can make it easier to navigate and work with.

- **Better serverless function support**

Next.js 13 has built-in support for serverless functions so developers can quickly deploy and run them within their applications. This can make it easier to add robust application functionality without worrying about setting up and maintaining a server. This, in turn, lets developers take advantage of the benefits of serverless computing without having to manage the underlying infrastructure.

- **Superior automatic prerendering**

Another feature of Next.js 13 is improved automatic prerendering which lets developers quickly generate static versions of their applications that can be served to users without server-side rendering. This can improve the application's performance and scalability as it reduces the load on the server and enables pages to be served more quickly.

Improved automatic prerendering is especially useful for applications that receive a lot of traffic since it lets them handle a larger number of requests without requiring additional server resources. It is also useful for applications used on slow internet connections.

- **Enhanced environment variables**

There's enhanced support for environment variables - variables that can be used to store configuration information for an application. They help store sensitive information such as API keys or passwords. They can be accessed from within the application without being exposed to the public.

The feature allows developers to define environment variables in their .env file, provides a process.env object that lets them access environment variables from their code available on both the server and the client, and lets them use environment variables to control the behavior of the framework itself.

- **Better image optimization**

Next.js 13 has improved support for optimizing images which can help reduce image size and boost the application's performance. This is achieved through the use of image optimization libraries that automatically compress and resize images.

The built-in support for image optimization libraries lets developers optimize images without installing additional dependencies. This is especially important for mobile users accessing the application on a slower internet connection.

- **Improved serverless deployment**

There is improved serverless deployment support that enables developers to quickly deploy applications to a cloud environment without having to set up and maintain a server. This can make it easier to build and deploy applications since it reduces the amount of infrastructure that they have to manage.

Next.js provides several features to make it easier to deploy applications as serverless functions: the serverless target, which optimizes the application for serverless execution and generates the necessary configuration files; the functions directory, where one can define custom serverless functions that can be called from the application; and integration with popular serverless platforms, such as AWS Lambda and Google Cloud Functions.

- **Enhanced internationalization support**

Internationalization, also known as i18n, is the process of designing and developing an application to be able to support multiple languages and locales. Next.js 13 offers enhanced support for internationalization to quickly build applications that users can use worldwide without having to install additional dependencies. This is achieved through the use of localization libraries that allow developers to easily translate their applications into different languages and localize them for different regions.

- **Better security features**

Finally, Next.js 13 provides better security features to protect applications from potential threats. These include improved support for Content Security Policies (CSPs), which help to prevent cross-site scripting (XSS) attacks, and support for the Secure Sockets Layer (SSL) protocol, which helps to secure communication between the server and the client.

## Conclusion

Overall, Next.js version 13 is a powerful and feature-rich JavaScript framework that makes it easy for developers to build and deploy high-quality applications. With its improved TypeScript support, automatic static optimization, and enhanced security features, it is well-suited for building performant and scalable applications that a global audience can use.

## FAQs

<details>
  <summary>1. What's new in Next.js 13?</summary>
  <p>
    Next.js 13 includes built-in support for TypeScript, automatic static
    optimization, improved file system routing, better serverless function
    support, and superior automatic prerendering to make building and deploying
    high-quality applications more effortless. It also reduces runtime errors
    and makes it easier to spot and fix bugs during development while improving
    application performance and scalability.
  </p>
</details>

<details>
  <summary>2. Is Next.js better than React.js?</summary>
  <p>
    Next.js is a framework built on React.js that offers additional features and
    improvements for building server-rendered web applications, including
    improved routing and SEO benefits. It has a built-in file system-based
    routing system that makes it easy to define routes based on the file
    structure of the application. This improves navigation and maintainability.
    Additionally, Next.js has automatic server-side rendering and prerendering
    which can improve the SEO of an application by making the content easily
    accessible to search engines.
  </p>
  <p>
    Both are powerful tools, but Next.js may be a better choice for projects
    requiring server-side rendering and improved performance.
  </p>
</details>

<details>
  <summary>3. Is Next.js 13 stable?</summary>
  <p>
    Yes, Next.js 13 is considered stable. It is a major release that includes
    new features and improvements. It underwent extensive testing and
    development before being released to the public. However, as with any
    software, it is always a good idea to thoroughly test a new version before
    deploying it to a production environment.
  </p>
</details>

<details>
  <summary>4. What is Next.js best for?</summary>
  <p>
    Next.js is best for building server-rendered React applications such as
    e-commerce sites, blogs, and dashboards. It is a popular choice for its ease
    of use, performance, and scalability. It provides a comprehensive solution
    for building full-scale web applications with features like built-in support
    for TypeScript, automatic static optimization, improved file system routing,
    better serverless function support, and superior automatic prerendering. It
    also offers improved routing and SEO benefits that can enhance the
    performance and scalability of an application.
  </p>
</details>

<details>
  <summary>5. Can I build a backend with Next.js?</summary>
  <p>
    Yes, you can build a backend with Next.js. It allows you to build
    server-rendered React applications, which means you can use it to handle
    server-side logic such as database queries, authentication, and
    authorization. It has built-in support for serverless functions that can be
    used to handle backend logic and respond to API requests.
  </p>
  <p>
    Additionally, Next.js provides a set of data fetching methods
    (getServerSideProps, getStaticProps, getServerProps) that can be used to
    fetch data on the server and render pages dynamically. However, it's worth
    noting that Next.js does not provide a built-in database solution, so you
    will need to use a database management system like MongoDB, SQL, or Firebase
    to handle data persistence.
  </p>
</details>

<details>
  <summary>6. Is Next.js good for REST API?</summary>
  <p>
    Yes, Next.js is a good choice for building REST APIs. It provides built-in
    support for serverless functions that can be used to handle backend logic
    and respond to API requests. It provides a set of data fetching methods to
    fetch data on the server and render pages dynamically. You can use Next.js
    to handle authentication and authorization as well as database queries and
    data validation. It also has a built-in development environment that makes
    testing and debugging your API easy.
  </p>
</details>

<connectWithMe />



The CSS `:where()` function takes in a list of selectors as arguments and minifies them, allowing you to write less code and simultaneously style them all together.

In this tutorial, we'll discuss the `:where()` pseudo-class function and demonstrate how it can be used in production. We'll review stacking, specificity, and forgiving in relation to the `:where()` function. We'll also look at some specific use cases and discuss its similarities and differences from the `:is()` function. Let's dive in!

## What is CSS :where()?

According to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:where), `:where()` is a CSS functional pseudo-class selector that takes in a list of selectors as an argument and applies the given styles to any element from that list. `:where()` is very useful for making a long selector list shorter.

In CSS, when multiple elements have the same style rules applied to them at the same time, we often end up writing a long list of selectors separated by commas.

Here's an example in which we apply the same style to all `<a>` tags found inside a `header`, `main` element, and `footer` element:

```css
header a:hover,
main a:hover,
footer a:hover {
  color: green;
  text-decoration: underline;
}
```

There are only three elements that we are selecting in the above code snippet, but with a larger number of elements and selectors, the code will begin to look untidy and may become difficult to read and understand. This is where the `:where()` pseudo-class function comes into play.

Here's how the above example would look using the `:where()` function:

```css
:where(header, main, footer) a:hover {
  color: red;
  text-decoration: underline;
}
```

Let's take a closer look at how this code works.

When the browser gets to the code snippet, the code directs the browser to look for `header`, `main`, and `footer` selectors and target all the anchor tags in those selectors. Then, when a user hovers over any of those anchor tags, the browser should apply the specified styles, which in this case are `red` and `underline`.

This pseudo-class function gives us the luxury of writing a long selector list in such a way that is shorter and more readily understandable.

## Combining, dividing, and stacking the :where() function

With the `:where()` function, we can group elements in several ways and combinations. We can place the `:where()` function at the beginning, middle, or end of the selector.

Here's an example with multiple selectors and styles:

```css
/* first list */
header a:hover,
main a:hover,
footer a:hover {
  color: green;
  text-decoration: underline;
}

/* second list  */
article header > p,
article footer > p {
  color: gray;
}

/* third list  */
.dark-theme button,
.dark-theme a,
.dim-theme button,
.dim-theme a {
  color: purple;
}
```

Here's the same code, rewritten with the `:where()` function:

```css
/* first list */
/* at the beginning  */
:where(header, main, footer) a:hover {
  color: red;
  text-decoration: underline;
}

/* second list  */
/* in the middle  */
article :where(header, footer) > p {
  color: gray;
}

/* third list */
/* at the end  */
.dark-theme :where(button, a) {
  color: purple;
}
.dim-theme :where(button, a) {
  color: purple;
}
```

In the first list, we specify that the `red` and `underline` styles should be applied to the `header`, `main`, and `footer` elements on `hover`. In the second list, we specify that the `article`, `header`, and `footer` elements should be styled with `gray`.

We divided the third list into two `:where()` functions for better clarity. In this list, we specify that the `button` and `a` element should be styled with the `.dark-theme`, `.dim-theme`, and `purple`.

Now, we'll even further reduce the third list functions, morphing them into one `:where()` function:

```css
/* stacked */
:where(.dark-theme, .dim-theme) :where(button, a) {
  color: purple;
}
```

This strategy for reducing a complex selector list is referred to as stacking.

## Specificity and the :where() function

Specificity is what browsers look at to determine what CSS property values or styles should apply to a particular element.

The specificity of the CSS `:where()` function is always zero. Therefore, any element that is targeted with this function automatically gets a specificity of zero, as well. This gives us the power to easily nullify the style of any element we want while reducing its specificity to zero.

Here's an example with HTML ordered lists:

```html
<div>
  <h2>First list no class</h2>
  <ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ol>
</div>
<div>
  <h2>Second list with class</h2>
  <ol class="second-list">
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ol>
</div>
<div>
  <h2>Third list with class</h2>
  <ol class="third-list">
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ol>
</div>
```

In the code snippet above, there are three ordered lists with two items in each list. The second and third lists have a given `class`, whereas the first list does not.

Without any styling, we can see that each list is ordered numerically:

![Numerically Ordered List](https://res.cloudinary.com/denkuysrh/image/upload/v1685803607/Article%20Images/LogRocket/Deep%20dive%20into%20the%20CSS%20:where%28%29%20and%20:is%28%29%20functions/image1_y5kn4u.png)

Now, let's add some styling:

```css
:where(ol[class]) {
  list-style-type: none;
}
```

In the above snippet, we use the `:where()` pseudo-class function to select all `<ol>` tags that have a `class` applied.

Below, we see that the second and third lists, which both have a `class`, were targeted with the `:where()` function and had their `list-style-type` removed:

![Second and Third Style Removed](https://res.cloudinary.com/denkuysrh/image/upload/v1685803608/Article%20Images/LogRocket/Deep%20dive%20into%20the%20CSS%20:where%28%29%20and%20:is%28%29%20functions/image2_rhc2hd.png)

Now, let's add some additional styling:

```css
:where(ol[class]) {
  list-style-type: none;
}

.second-list {
  list-style-type: disc;
}
```

Targeting only the second list using its `class` name, we can see that it is now displayed with bullet points while the third list still has no `list-style` type:

![Third List No Style](https://res.cloudinary.com/denkuysrh/image/upload/v1685803608/Article%20Images/LogRocket/Deep%20dive%20into%20the%20CSS%20:where%28%29%20and%20:is%28%29%20functions/image4_fxedil.png)

You might be wondering, "But, isn't that how it's supposed to be, seeing as the new styling is written below the `:where()` function styling?" No, it's not, and we'll see that in a moment.

Let's see what happens when we move the code we just added to the top of the code block and move the `:where()` function portion to the bottom:

```css
.second-list {
  list-style-type: disc;
}

:where(ol[class]) {
  list-style-type: none;
}
```

Notice that the styling still doesn't change:

![Style With No Change](https://res.cloudinary.com/denkuysrh/image/upload/v1685803608/Article%20Images/LogRocket/Deep%20dive%20into%20the%20CSS%20:where%28%29%20and%20:is%28%29%20functions/image4_fxedil.png)

Remember, the `:where()` function has zero specificity. Regardless of whether the new code is placed before or after the `:where()` function snippet, the specificity of the element targeted with `:where()` will become zero and its stylings will be nullified.

To illustrate this further, let's add the second list's stylings to the third list, following the `:where()` function in the code:

```css
.second-list {
  list-style-type: disc;
}

:where(ol[class]) {
  list-style-type: none;
}

.third-list {
  list-style-type: disc;
}
```

Both the second and third lists are displayed with bullet points, irrespective of code placement:

![Bullet Points](https://res.cloudinary.com/denkuysrh/image/upload/v1685803609/Article%20Images/LogRocket/Deep%20dive%20into%20the%20CSS%20:where%28%29%20and%20:is%28%29%20functions/image5_raftzg.png)

Now, let's look at how the CSS `:where()` function will react if one of the elements is targeted with an invalid selector.

<p
  className="codepen"
  data-height="400"
  data-theme-id="dark"
  data-default-tab="html,result"
  data-slug-hash="abjmErY"
  data-editable="true"
  data-user="timonwa"
  style={{
    height: "300px",
    boxSizing: "border-box",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    border: "2px solid",
    margin: "1em 0",
    padding: "1em",
  }}
>
  <span>
    See the Pen{" "}
    <a target="_blank" href="https://codepen.io/timonwa/pen/abjmErY">
      Example 1
    </a>{" "}
    by Timonwa (
    <a target="_blank" href="https://codepen.io/timonwa">
      @timonwa
    </a>
    ) on <a target="_blank" href="https://codepen.io">
      CodePen
    </a>.
  </span>
</p>

## The :where() function and forgiving

CSS is generally considered to be non-forgiving with regard to selector lists. If a browser does not recognize just one selector in a list, the entire list of selectors will be considered invalid and their styling will not be applied. However, this is not the case with the `:where()` pseudo-class function.

If an element in a `:where()` function is targeted with an invalid selector, that element will not get any styling. The rest of the elements will still get styled. The `:where()` function will just skip over the invalid selector to the next (`valid`) selector. This is why `:where()` is known as a forgiving selector.

In the below example, `:unsupported` is an invalid selector for many browsers. The below code above will be parsed correctly and will still match the `:valid` selector, even in browsers that don't support the `:unsupported` selector, as shown below:

```css
:where(:valid, :unsupported) {
  /* css goes here */
}
```

However, the following code will be ignored in browsers that don't support the `:unsupported` selector, even if they support the `:valid` selector:

```css
:valid,
:unsupported {
  /* css goes here */
}
```

## Special use cases for the :where() function

The `:where()` function can be a useful tool in some special use cases, but there are also some instances in which it should be avoided. Nearly all setbacks that occur when using the `:where()` pseudo-class function comes down to specificity. Because `:where()` has zero specificity, we need to be very careful about where and when to use this function.

First, let's look at a few use cases in which `:where()` can be particularly helpful.

### Improving CSS reset

A CSS reset refers to loading a set of style rules prior to any other styles in order to clear the browser's inbuilt styles. CSS resets are usually placed at the top or start of the CSS style sheet so they load first. Developers often use them to remove the default stylings given by the browser to several elements initially, before they start actually styling their elements and websites. CSS resets can also help remove inconsistencies between different browsers.

CSS resets are temporary stylings, that would change later on in the styling process. However, depending on the simplicity or complexity of the selectors of an element or group of elements used in the CSS reset, it may be difficult to override the initial stylings later on in the code.

For example, let's say we target all anchor tags on the website and style them in green. Then, we later decide to style all footer anchor tags in gray.

The new (gray color) style does not get applied due to the complexity of its selection in the CSS reset. The selector in the reset has a higher order of specificity than the selector used later in the code to target just the footer anchor tags, so the gray color style is not applied.

Now, if we add the `:where()` pseudo-class function to the CSS reset, this automatically gives all elements in the reset a specificity of zero. This makes it easier for us to change the styles later on without having to worry about specificity conflicts.

### Removing styling

The `:where()` function can be useful if we want to remove or nullify the styles or reduce the specificity of an element or set of elements. The change will occur at the point that we place it in our code, almost like a mini reset.

### Minifying

Shorter code is easier to read and debug. A good rule of thumb is to examine any code that has more than two commas or three list items to see if it could be minified using the `:where()` function. This is also a helpful strategy for combinations of two or more selectors, for example, `section` > `header` > `p` > `a`.

Now, let's look at a use case in which the `:where()` function should be avoided.

### Maintaining styling

If it is important to ensure that the styling or specificity of an element or set of elements does not change at any point in the future, do not use the `:where()` pseudo-class. The styling and specificity of any element targeted with this selector will be nullified.

### The CSS :is() function

The CSS `:is()` function works almost the same way as the `:where()` function. You can use it to simplify complex selectors and you can also place it at the beginning, middle, or end of the selector just like the `:where()` function.

It is also forgiving just like the `:where` function. So, when one of the selectors is invalid, that selector will be ignored by the browser but the stylings of the valid selectors will be added to the selected elements.

### The difference between :where() and :is() functions

The difference between these two functions is that where the specificity of the `:where()` function is always zero, the specificity of the `:is()` function depends on the specificity of its most specific argument. For example, let's look at a paragraph text in a `header` element:

```html
<header>
  <p>This is a paragraph text.</p>
</header>
```

Then, let's try to change the text color using four different selectors:

```css
header p {
  color: blue;
}

:is(header, section) p {
  color: green;
}

p {
  color: blue;
}

:where(header, section) p {
  color: blue;
}
```

The first selector gives the text a color of `blue`. The second selector which uses `:is()` has the same specificity as the first, but because it comes after the first one, it changes the text color from `blue` to `green`. The third selector, whose specificity is lower than both the first and second, has no effect on the text.

Lastly, the fourth one, which uses the `:where()` function, has no effect on the text because of its zero specificity:

<p
  className="codepen"
  data-height="400"
  data-theme-id="dark"
  data-default-tab="html,result"
  data-slug-hash="WNKGyqd"
  data-editable="true"
  data-user="timonwa"
  style={{
    height: "300px",
    boxSizing: "border-box",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    border: "2px solid",
    margin: "1em 0",
    padding: "1em",
  }}
>
  <span>
    See the Pen{" "}
    <a target="_blank" href="https://codepen.io/timonwa/pen/WNKGyqd">
      Example 2
    </a>{" "}
    by Timonwa (
    <a target="_blank" href="https://codepen.io/timonwa">
      @timonwa
    </a>
    ) on <a target="_blank" href="https://codepen.io">
      CodePen
    </a>.
  </span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Browser compatibility

All browsers both on desktop and mobile provide full support for the CSS `:where` function, including support for its forgiving nature. So you do not have to worry about if your styling is going to render properly in the browser or not.

## Conclusion

The CSS `:where()` pseudo-class function is very useful for improving CSS resets, removing styling at any point in our code, and making our code easier to read and debug.

In this article, we demonstrated how the `:where()` function can be used in production and examined several use cases. We also saw its similarities to the CSS `:is` function and the difference between the two.

What are your thoughts on this CSS selector? Can you think of any other instances in which it would be useful? Tweet at me your comments on this topic.

<connectWithMe />



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/denkuysrh/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/denkuysrh/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/denkuysrh/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/denkuysrh/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/denkuysrh/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/denkuysrh/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 Twitter or LinkedIn! Till next time guys...

<byeBye />

<connectWithMe />



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 />



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/4-types-technical-debt/)
- [The Engineer's Complete Guide to Technical Debt](https://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 Twitter [@timonwa\_](https://twitter.com/timonwa_). Till next time guys...

<byeBye />

<connectWithMe />



Vue.js is one of the popular frontend JavaScript frameworks that helps us build straightforward and fast UIs and SPAs. It also allows us to extend our HTML by using HTML attributes, known as directives. These directives can be [in-built](https://vuejs.org/api/built-in-directives.html) by Vue.js, or they can be custom directives predefined by the user.

For this article, we will discuss touch events. Touch events are triggered by users on touchscreen devices like mobile phones or tablets. This article will explain what touch events are, the types of touch events, and how to implement touch events in Vue.js.

Let's get started.

## What are touch events?

Touch events can interpret pointer activities from a finger or stylus on touch surfaces like touch screens or trackpads. They listen for touch points or interactions between the user and the touch surface, including when the user's finger touches, moves, or leaves the screen. They do not work on non-touchscreen devices.

Touch events are like mouse events when a user interacts with a screen using a pointing device, such as a mouse or joystick. Unlike mouse events, which listen for interactions happening in the same instance, touch events can listen for simultaneous or multi-touch interactions. For example, they can listen for two-finger gestures like pinching or an advanced movement like flickering.

The event starts when the pointer touches the surface and ends when the pointer leaves. During this event, an application receives all the properties relating to the touch events during the start, move, and end phases. The properties we can access during any event are:

- `identifier`: A unique identifier for a specific event. It is used to track multi-touch events. E.g., pointer 1 = identifier 1, pointer 2 = identifier 2
- `screenX / screenY`: The x and y coordinates of the touch pointer in the screen coordinates
- `pageX / pageY`: The x and y coordinates of the touch pointer in the page coordinates (including scrolling)
- `clientX / clientY`: The x and y coordinates of the touch pointer relative to the browser viewport (not including scrolling)
- `radiusX / radiusY / rotationAngle`: They describe the area covered by the touch pointer
- `target`: The element touched by the pointer. For example, a `p` element
- `force`: The amount of pressure applied to the surface by the user. It ranges between 0.0 (no pressure) and 1.0 (maximum pressure)

If multi-touch points are active simultaneously, all the properties relating to each touch point are collected and stored in a TouchList array and tracked with the identifier property. Before we listen to touch events, let us understand what some of these events are.

## Types of touch events

- `Touchstart`: This event is triggered when one or more touch points are on the touch surface
- `Touchmove`: This event is triggered when one or more touch points move along the touch surface
- `Touchend`: This event is triggered when one or more touch points leave the touch surface
- `Touchcancel`: This event is triggered when one or more touch points get disrupted in an implementation-specific manner
- `Tap`: This event is triggered when one briefly touches the touch surface
- `DoubleTap`: This event is triggered when one rapidly touches the touch surface twice
- `Drag`: This event is triggered when one drags a touch point from one point to another over the surface without losing contact
- `Flick/Swipe`: This event is triggered when one quickly brushes the surface

There are a lot of interactions that can happen on a touch surface. This article will focus on the most common ones, which are the events users do regularly; `tap`, `drag`, `swipe`, and `press`. You can check these [Touch Gesture Cards](https://static.lukew.com/TouchGestureCards.pdf) created by Luke Wroblewski to have an overview of the other interactions and their functionalities.

## Listening for Touch Events

Listening for touch events is the same as listening for any event on an element. You add an event listener relating to the touch event you want to listen for and then call the desired function when that event is triggered. Here's an example:

```html
<body>
  <p>This is a paragraph</p>

  <script>
    document.querySelector("p").addEventListener("touchstart", myFunction);

    function myFunction(e) {
      console.log(e.touches, e.type);
    }
  </script>
</body>
```

You can also listen for touch events on any mobile browser and iOS or Android.

## Listening for touch events in Vue.js

Listening for touch events in Vue.js is the same process as listening for any event in Vue.js. You add an event listener relating to the touch event you want to listen for and call the function you want to run when that event is triggered.

```js
<MyComponent
  @touchstart="startDrag(item)"
  @touchmove="moveDrag(item)"
  @touchend="endDrag(item)"
/>
...
methods: {
 startDrag(item) {
    // do something on touchstart
  },
   moveDrag(item) {
    // do something on touchmove
  },
  endDrag(item) {
    // do something on touchend
  },
},
```

And as I mentioned earlier, the web browser only gives us access to the `touchstart`, `touchend`, `touchmove`, and `touchcancel` events. You need to write a custom function to listen to custom touch events. Luckily for us, we have a few npm packages to choose from that already handle these event functions for us — the [vue3-touch-events](https://www.npmjs.com/package/vue3-touch-events) and [hammer.js](http://hammerjs.github.io/) plugins. We will use the vue3-touch-events package in this article.

## Creating custom touch events in Vue.js

The vue3-touch-events package lets us listen for events like `tap`, `swipe`, `hold`, and `drag` on any `HTML DOM` element in Vue 3. If you are using Vue 2, then you would use the [vue2-touch-events](https://www.npmjs.com/package/vue2-touch-events) package.

### Installing vue3-touch-events in Vue 3

First, create your Vue.js app by opening your terminal and running the command `vue create touch-events`, then install the vue3-touch-events package using the command `yarn add vue3-touch-events` or `npm install vue3-touch-events`; depending on the package manager you use.

Open the app in your preferred code editor and run the command `yarn serve` or `npm run dev` to view the app in your browser.

### Creating basic touch events

In your `App.vue` file, replace its current code with the following:

```js
<template>
  <button
    class="btn"
    @touchstart="nameCurrentEvent('touchstart')"
    @touchmove="nameCurrentEvent('touchmove')"
    @touchend="nameCurrentEvent('touchend')"
    >Touch me</button
  >
  <p class="output"
    >Current Touch Event:
    <span class="event">{{ name }}</span>
  </p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      name: "none",
    };
  },
  methods: {
    nameCurrentEvent(name) {
      this.name = name;
      console.log(name);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.btn {
  border: 2px solid rgb(71, 197, 255);
  background-color: rgb(246, 244, 244);
  border-radius: 5px;
  width: 150px;
  height: 100px;
  font-size: 1rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event {
  border-bottom: 1px solid rgb(71, 197, 255);
  color: rgb(113, 113, 113);
}
</style>
```

Looking at the code above, we created a button element with three event listeners on it; touchstart, touchmove, and touchend. These will call the same function nameCurrentEvent whenever its event is triggered. The event's name, when triggered, is stored in a variable called name, and the function outputs name on the screen.

Viewing this in our browser, we will have:

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686294611/Article%20Images/LogRocket/understanding-vue-touch-events/image1_hxc50n.png)

To view the same web app on your phone simultaneously, copy the `Network Url` created for you in the terminal where you ran `yarn serve` and paste the link into your phone browser. The link should look something like `http://000.000.00.00/8080`.

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686294729/Article%20Images/LogRocket/understanding-vue-touch-events/network-url-terminal-vue-js_hw0syx.webp)

So, in your mobile browser, we will have:

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686294613/Article%20Images/LogRocket/understanding-vue-touch-events/image3_kgp8i8.jpg)

Now, interacting with the button on our mobile phone, we should see our `name` value go from `none` to** `touchstart`** when our finger touches the button. Then, when we move our finger from one point in the button to another, we will see `touchmove`, and touchend when our finger leaves the screen.

Note that you can only test this code on a touch screen device.

![basic-touch-event-vue-js](https://res.cloudinary.com/denkuysrh/image/upload/v1686294391/Article%20Images/LogRocket/understanding-vue-touch-events/basic-touch-event-vue-js_x7s8vn.gif)

### Customizing the touch events

Using vue3-touch-events to listen to custom events is relatively easy. Since we already installed the plugin, we register the plugin inside our `main.js` file:

```js
import { createApp } from "vue";
import App from "./App.vue";
import Vue3TouchEvents from "vue3-touch-events";

createApp(App).use(Vue3TouchEvents).mount("#app");
```

In the Vue framework, we add touch events to our elements using the v-touch directive. So let's add the attach functions we want to run when the touch event is triggered. Going into `App.js`, we modify our current code:

```js
<template>
  <div class="grid-cntr">
    <button
      class="btn"
      @touchstart="nameCurrentEvent('touchstart')"
      @touchmove="nameCurrentEvent('touchmove')"
      @touchend="nameCurrentEvent('touchend')"
      >Touch me</button
    >
    <button class="btn" v-touch:tap="onTapItem">Tap me</button>
    <button class="btn" v-touch:swipe="onSwipeItem">Swipe any direction</button>
    <button class="btn" v-touch:swipe.left="onSwipeLeftItem">Swipe left</button>
    <button class="btn" v-touch:drag="onDragItem">Drag me</button>
    <button class="btn" v-touch:press="onPressItem">Press me</button></div
  >

  <p class="output"
    >Current Touch Event:
    <span class="event">{{ name }}</span>
  </p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      name: "none",
    };
  },
  methods: {
    nameCurrentEvent(name) {
      this.name = name;
    },
    onTapItem() {
      return (this.name = "tapped");
    },
    onSwipeItem() {
      return (this.name = "swiped");
    },
    onSwipeLeftItem() {
      return (this.name = "swiped left");
    },
    onDragItem() {
      return (this.name = "dragged");
    },
    onPressItem() {
      return (this.name = "pressed");
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.grid-cntr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 500px;
  margin: auto;
}
.btn {
  border: 2px solid rgb(71, 197, 255);
  background-color: rgb(246, 244, 244);
  border-radius: 5px;
  height: 100px;
  font-size: 1rem;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event {
  border-bottom: 1px solid rgb(71, 197, 255);
  color: rgb(113, 113, 113);
}
</style>
```

In the code above, we added five buttons and used `v-touch` to add `tap`, `swipe`, `swipe.left`, `drag`, and `press`. Let's test it on our mobile browser:

![custom-touch-event-vue-js](https://res.cloudinary.com/denkuysrh/image/upload/v1686294404/Article%20Images/LogRocket/understanding-vue-touch-events/custom-touch-event-vue-js_qpellc.gif)

Vue3-touch-events provide other touch events and you can learn more about them [here](https://github.com/robinrodricks/vue3-touch-events#Events).

### Using parameters in vue3-touch-events

Vue3-touch-events also allow us to pass parameters to the event handler. We need to return a delegate to the event handler, and we can pass as many attributes as we need.

So, let's pass a parameter into `v-touch:tap` and edit `onTapItem`:

```js
<button class="btn" v-touch:tap="onTapItem('onTapItem')">
  Tap me
</button>
...
onTapItem(param) {
return function () {
alert("You called the " + param + " touch event.");
};
},
```

We passed a string as an argument into another string in our function and then alerted the new string to the user.

![](https://res.cloudinary.com/denkuysrh/image/upload/v1686295776/Article%20Images/LogRocket/understanding-vue-touch-events/parameters-vue3-touch-events_ayogqq.gif)

## Conclusion

And that's it on understanding touch events in Vue.js! We discussed what touch events are and the different touch events, including the default browser events and custom events. We also discussed listening for them and using third-party plugins to create and listen for custom touch events.. The codes for this article are available [here on GitHub](https://github.com/Timonwa/using-vue3-touch-events-in-vue3).

<connectWithMe />



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/), [2Captcha](https://blog.timonwa.com/what-is-a-captcha-and-how-to-bypass-captchas), 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, Nextjs, 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 [Moja Global](https://blog.timonwa.com/open-source-with-shecodeafrica-at-moja-global-contributhonbysca), 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://www.techroadmap.xyz/), 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 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 page to document 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 [Achievement Tracker template](https://timonwa.notion.site/TEMPLATE-2023-Progress-Tracker-0ba55b40b463405b905bd9b87adae897))

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://cdn.hashnode.com/res/hashnode/image/upload/v1672505267630/0522525a-6ba3-47aa-b5ae-b0354733a3f2.gif)

<connectWithMe />



The **image-set()** is a CSS function that allows web developers to turn an image into a responsive image, showing variations of the same photo for different screen resolutions when needed. It is almost the same as the HTML **srcset** attribute for img tags.

In this article, we will learn about responsive images, how to use the image-set() function to create them, why you should make your images responsive, and the difference between the image-set() function and srcset attribute.

## What are Responsive Images?

Simply put, Responsive images display the information they are intended to on the user's web browser regardless of the screen size, screen pixel resolution, or bandwidth/network of the user. This is to say, these images automatically adjust themselves to fit the size of the user's screen and load according to the resolution of the user's screen. This improves the user experience as images load fast and look crisp to the human eye.

## Why Responsive Images?

Why not? Here are three essential reasons why we should always make our web images responsive;

1. To render high-quality images on different devices(also known as resolution switching)
2. To load the right images on different screen sizes(also known as art direction)
3. For faster loading of web pages

Let's discuss a little about each of them.

### 1. Resolution switching: Render high-quality images on different devices

A digital screen(computer, tablet, mobile phone) uses pixels to display images. These pixels are arranged horizontally and vertically in a grid. The number of pixels horizontally and vertically is known as the screen resolution.

For example, a screen with a 1024 x 768 screen resolution means that the screen has 1024 pixels horizontally and 768 pixels vertically. An image with a 1024 x 768 pixels screen resolution also has 1024 pixels horizontally and 768 pixels vertically, with the same width and height.

Still, the image would be stretched on a screen with a 2048x1536 pixel screen resolution because the screen's width and height are more significant, and you are showing fewer pixels in a larger space. This is due to the different pixel densities of the screen. So on a smaller screen, the image will look sharper because you are showing many pixels in a smaller space.

Image pixel resolutions also partly determine the image size, and the size of an image can affect how fast a browser loads a web page and the amount of data the user uses to download it. For example, a 150 x 100 px resolution image worth 17.7kb would load faster and save internet data than a 3500 x 2321 px resolution image worth 2.4Mb. Therefore, smaller images should also be used on smaller screens where possible.

![resolution-switching](https://res.cloudinary.com/denkuysrh/image/upload/v1686511776/Article%20Images/UploadCare/mage-set-for-responsive-images/resolution-switching_zqazk7.png)

<figcaption>
  The left car is probably looking horrible on your screen, because it's too
  blurry
</figcaption>

You can [view the live example](https://image-set-by-timonwa.netlify.app/resolution-switching.html) and play with the [source code](https://github.com/Timonwa/image-set-function/blob/main/resolution-switching.html) to better understand Resolution switching.

### 2. Loading the right images on different screen sizes - Art direction

We know additional images are displayed differently on various screen sizes. However, art direction focuses on the detail of the image content shown to the user, not the image resolution. Art direction might not matter for images that don't pass any information to the user, but it counts for images that give the user information.

For example, we can have a landscape orientation image with a lady standing at the center of the image as the primary focus. We can easily view the lady's face on large screens. However, if we are to let the image have the same aspect ratio and orientation on smaller screens, we won't be able to view the lady easily, let alone her face.

But if we were to crop the image, thereby changing its aspect ratio and letting it have a portrait orientation, we get to view her clearly on smaller screens. But when we switch back to larger screens with the new image, it becomes too big.

![art-direction](https://res.cloudinary.com/denkuysrh/image/upload/v1686511888/Article%20Images/UploadCare/mage-set-for-responsive-images/art-direction_js8vmv.png)

<figcaption>We can easily make the image look fine on any screen</figcaption>

Art direction ensures that regardless of the screen size, the user has smooth access to whatever details or content they are supposed to get from an image.

You can [view the live example](https://image-set-by-timonwa.netlify.app/art-direction.html) and play with the [source code](https://github.com/Timonwa/image-set-function/blob/main/art-direction.html) for a more practical understanding of Art direction.

### 3. For faster loading of web pages

Nowadays, people tend to access the internet through their mobile devices, so it is essential to consider this when adding images to your web pages.

Users should not have to download overly large images for their mobile screens or wait for larger images to load if they have slow internet. Instead, you should be able to provide a means for them to have access to images suitable for their screen sizes and internet connection. This reduces the time it takes for the web pages to load, the user's bandwidth and money, and overall improves the user experience of your website.

## What is the image-set() function?

As I said earlier, the **image-set() function** is a CSS function that allows web developers to turn an image into a responsive image, showing variations of the same photo for different screen resolutions when needed. And from what we have just learned about the what and why of responsive images, the image-set() function allows us to create responsive images easily.

We list a set of images within the image-set() function. The browsers can pick the most appropriate image from this list for different screen resolutions, with the assurance that the browser would make the best decision about which one to use.

## How to use image-set() to create responsive images

**The Syntax**

image-set() = image-set( 'image' ''resolution' type())

- The **image** represents the URL to where the image is stored. It is compulsory.
- The **resolution** represents resolution units, x or dppx, for dots per pixel unit, dpi, for dots per inch, and dpcm for dots per centimeter. Every image within an image-set() must have a unique resolution. It is optional.
- The **type()** specifies the image's file format–JPEG, PNG, GIF, AVIF, etc. It is optional.

**Example 1**

```css
.div {
  background-image: -webkit-image-set(
    url("small-car.jpeg") 1x,

    url("large-car.jpeg") 2x
  );

  background-image: image-set(
    url("small-car.jpeg") 1x,

    url("large-car.jpeg") 2x
  );
}
```

In example 1, 1x(1 dot per pixel unit) identifies the image the browser should use if the image resolution is higher or matches the screen, making the pixel density equal to 1. If the image resolution is lower than the screen's, the 2x image should be used. You can add more images if you want to.

Also, a fallback can be added so browsers not supporting image-set() can have an image to fall back on. We add the fallback before the background-image property with the image-set() function.

```css
.div {
  background-image: url("small-car.jpg"); /* fallback */

  background-image: -webkit-image-set(
    url("small-car.jpeg") 1x,

    url("large-car.jpeg") 2x
  );

  background-image: image-set(
    url("small-car.jpeg") 1x,

    url("large-car.jpeg") 2x
  );
}
```

**Example 2**

```css
.div {
  background-image: -webkit-image-set(
    url("car.avif") type("image/avif"),
    url("car.jpeg") type("image/jpeg")
  );

  background-image: image-set(
    url("car.avif") type("image/avif"),
    url("car.jpeg") type("image/jpeg")
  );
}
```

For example 2, we have specified two format types for the same image; **avif** and **jpeg**. The widely supported format should always come last, in this case, the jpeg, while the newer formats should go before it.

The browser will download only one image. It checks the first image specified and uses it if it supports it. If it doesn't, it ignores it and moves on to the next.

**Example 3**

```css
.div {
  background-image: -webkit-image-set(
    url("small-car.avif") type("image/avif") 1x,

    url("large-car.avif") type("image/avif") 2x,

    url("small-car.jpeg") type("image/jpeg") 1x,

    url("large-car.jpeg") type("image/jpeg") 2x
  );

  background-image: image-set(
    url("small-car.avif") type("image/avif") 1x,

    url("large-car.avif") type("image/avif") 2x,

    url("small-car.jpeg") type("image/jpeg") 1x,

    url("large-car.jpeg") type("image/jpeg") 2x
  );
}
```

For example3, we specify the resolution along with the image format. This gives the browser even more variations on which image to use.

## How does the image-set() function differs from the srcset attribute?

Although the image-set() function and the srcset attribute set out to do the same thing: to help us make our images responsive, there are a few differences between them.

The significant difference is that CSS files use the image-set() function, and Html files use the srcset attribute.

Another difference is that unlike with the srcset attribute, where you can also give image options based on the width of the browser(when Art direction is required), you cannot do that with the image-set(). However, Art direction can still be achieved in CSS using media queries.

[View the live example](https://image-set-by-timonwa.netlify.app/responsive-images.html) on responsive images going the resolution switching way and the art direction way and play with the[ source code](https://github.com/Timonwa/image-set-function/blob/main/responsive-images.html).

## Conclusion

Responsive images are vital in creating a good user experience and building faster web pages. We now better understand what a responsive image should be and how to make better-performance images with the image-set() CSS function.

<connectWithMe />



Next.js is a flexible React framework that can be used to build fast web applications. We can use the Next.js configuration to create, develop, and ship products fast without spending days structuring the application. We can also use Next.js to build both server-side rendering and static web applications using React.

But, building a web app quickly and creating a fast-loading web app are two different things.

The time it takes a web app to load to the client depends on how long it takes to serve its application code, styles, and data to the client in the first initial load. For example, the application's performance degrades if the server needs to send additional assets, such as images, during the first initial load.

Multiple studies have shown a [positive correlation between website page load speed and user experience and conversions](https://www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/). There are numerous ways to optimize or improve the performance of your Next.js app to achieve a faster loading time.

For example, you could use server-side rendering to render the initial HTML of your web page on the server side before delivering it to the browser, use the Next.js inbuilt caching feature to cache frequently used content, remove unused dependencies (which increase the size of your final application's bundle and loading time), or optimize images using lazy loading or placeholder images.

In this article, we'll focus on one of these optimization strategies: using image placeholders for image optimization. Specifically, we'll demonstrate how to create image placeholders using the [BlurHash](https://github.com/woltapp/blurhash/blob/master/Algorithm.md) algorithm.

## What is an image placeholder?

Having too many images in your app or images that are very large and load slowly can negatively impact page speed and user experience. In fact, images are probably one of the most significant contributors to your app's speed.

Instead of reducing the number of images in an app, we can use placeholders for some of them, thereby reducing the number of image files on initial load.

An image placeholder is a dummy image that the browser can load initially to represent the actual image until the true image has been downloaded. Placeholders can enhance page speed because their file size is tiny compared to that of the actual image they represent. Image placeholders can also prevent webpage layout shifts from occurring.

The placeholder could be a thumbnail of the image, an empty gray box, an `img` element with a border or background color, or even the dimensions of the image (if fixed) or the image's alt text. However, none of these options are pretty, and all of them will make your webpages look boring.

Now, let's consider another option for the placeholder.

## What is BlurHash?

To make the image placeholder more visually appealing, we can use the [BlurHash](https://blurha.sh/) method to create a blurred version of the image, resulting in a more visually appealing design.

The process involves producing a string of characters that encode a distorted version of the image; the number of characters created depends on the image's quality.

![image 1](https://res.cloudinary.com/denkuysrh/image/upload/v1686297235/Article%20Images/LogRocket/improving-nextjs-app-performance-blurhash/Image1_agxezh.png)

The BlurHash string is small enough that you don't need to retrieve and download an image file; instead, you may provide it straight into your website's HTML and have it decoded into the blurred picture.

Using this BlurHash string as your image placeholder makes your webpage more visually appealing and also reduces the page speed or initial load of your webpage.

## How does BlurHash work?

The [BlurHash algorithm](https://github.com/woltapp/blurhash/blob/master/Algorithm.md) analyzes an image and generates a string that serves as the image's placeholder. This process is usually done at the backend of your service, where the image URL is stored, so you can keep the BlurHash string alongside the image URL. The BlurHash string and the image URL are sent to the client together.

The BlurHash string is short enough to quickly fit into whatever data type you prefer. For example, it's easy to include it as a field in a JSON object.

To display a BlurHash placeholder image while the actual picture loads over the network, your client first takes the BlurHash string and decodes it into an image while its full-size version loads in the background.

```jsx
{
  src: "https://i.ibb.co/5MMtXQQ/masahiro-miyagi-t-Hz-Ai-Axe-GBo-unsplash.jpg",
  blurhash: “L44-*2%456X8~Xxv9aoepJS$RPxE”
}
```

## How much does BlurHash impact page speed?

The amount that BlurHash impacts pages speed can vary based on several factors. But here's an example that illustrates how BlurHash positively affects a page's initial load.

I used [Google PageSpeed Insights](https://pagespeed.web.dev/) to test the page speed of two versions of a webpage. The first version has an image without a placeholder. The second version has the same image with a BlurHash placeholder.

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686297235/Article%20Images/LogRocket/improving-nextjs-app-performance-blurhash/image2_wgnzat.png)

The first version of the page, which has an image without a placeholder, has a Speed index of 0.9sec.

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686297235/Article%20Images/LogRocket/improving-nextjs-app-performance-blurhash/image3_mp7oup.png)

The second version of the page, which has an image with a BlurHash placeholder, has a Speed index of 0.2sec.

## How do you implement BlurHash in a Next.JS app?

By default, Next.js automatically generates the BlurHash string for any static image (i.e., import banner from `../some/src/`), decodes it, and uses it as the image placeholder. But, if your image is dynamic (e.g., stored in your database, backend, or cloud), you must provide a data URL as a placeholder for the image.

### Generating BlurHash placeholders for static images

For static images in a Next.js app, you can generate BlurHash placeholders using the `placeholder` attribute on the `Image` component and giving it a `blur` value, like so:

```jsx
import Image from "next/image";
import image from "../public/masahiro-miyagi-xk0YHAn3dzk-unsplash.jpg";

...

<Image
   src={image}
   alt="masahiro-miyagi-xk0-YHAn3dzk-unsplash"
   placeholder="blur"
   layout="fill"
/>
```

### Generating BlurHash placeholders for dynamic images

For dynamic images in a Next.js app, in addition to the `placeholder` attribute, you'll also have to use the `blurDataUrl` attribute. This attribute takes in the image's Data URL.

```jsx
import Image from "next/image";

...

const images = [
  {
    src: "https://i.ibb.co/5MMtXQQ/masahiro-miyagi-t-Hz-Ai-Axe-GBo-unsplash.jpg",
    blurUrl: "mokjmin2kl/9j/4AAQSk…"
  }
]

<Image
    src={images[0].src}
    alt={images[0].src}
    placeholder="blur"
    blurDataURL={images[0].blurUrl}
    layout="fill"
/>
```

### Converting Base83 data URL to a Base64 data URL

It is important to note that if you use the data URL generated on the BlurHash website directly in Next.js for dynamic images, it won't work. This is because Next.js only accepts Base64-encoded images as data URLs, whereas BlurHash encodes images into Base83. No BlurHash implementation has been created yet for Next.js (view the [list of BlurHash's implementations here](https://github.com/woltapp/blurhash#implementations)).

From my research, I could not find any Next.js package that could help me with the conversion from BlurHash's Base83 data URL to a Base64 data URL or any Next.js implementation that works for dynamic images. The few packages I found, like the recently published [use-next-blurhash](https://www.npmjs.com/package/use-next-blurhash) and [plaiceholder.co](https://plaiceholder.co/), do not work with Next.js for dynamically stored images.

However, there is a [Next.js Image blurDataURL generator](https://blurred.dev/) created by Jimmy Chion, that generates an image's BlurHash and Base64 data URL. You can [fork the repo on GitHub](https://github.com/cjimmy/blurhash-js) and implement it into your project.

I will use the website version in this article to generate the data URLs; here's the process:

1. Visit [blurred.dev](https://blurred.dev/)
2. Upload the image
3. Manipulate the BlurHash algorithm's setting and the data URL formatting to get both URLs

You'll also notice how minute the size of the data URL is, compared to the size of the image.

Use a small version of your image to generate the URL, since the fine detail of the image will be lost anyway when the BluHash is generated. A thumbnail of your image is the ideal choice.

![alt_text](https://res.cloudinary.com/denkuysrh/image/upload/v1686297235/Article%20Images/LogRocket/improving-nextjs-app-performance-blurhash/Image4_clq1vp.png)

### Adding the BlurHash URL to a Next.js app

Now, let's use the URL in our Next.js app.

We'll create the Next.js app using the following command:

```bash
yarn create next-app blurdataurl-in-nextjs
```

Next, we'll make changes to the** `index.js`** file and create a** `Home.module.css`** file in the `styles` folder.

```jsx
//index.js
import Image from "next/image";
import styles from "../styles/Home.module.css";
import image from "../public/masahiro-miyagi-xk0YHAn3dzk-unsplash.jpg";
import images from "../public/images";

export default function Home() {
  return (
    <div className={styles.container}>
      <main className={styles.body}>
        <h1>Using BlurDataUrl in Next.js</h1>
        <section className={styles.section}>
          <figure>
            <div className={styles.imageWrapper}>
              <Image
                src={image}
                alt="masahiro-miyagi-xk0-YHAn3dzk-unsplash"
                layout="fill"
              />
            </div>
            <figcaption className={styles.imageCaption}>
              Image 1 is stored locally and does not use a placeholder.
            </figcaption>
          </figure>

          <figure>
            <div className={styles.imageWrapper}>
              <Image
                src={image}
                alt="masahiro-miyagi-xk0-YHAn3dzk-unsplash"
                placeholder="blur"
                layout="fill"
              />
            </div>
            <figcaption className={styles.imageCaption}>
              Image 2 is stored locally and uses a placeholder.
            </figcaption>
          </figure>

          <figure>
            <div className={styles.imageWrapper}>
              <Image src={images[0].src} alt={image.scr} layout="fill" />
            </div>
            <figcaption className={styles.imageCaption}>
              Image 3 is stored remotely but does not use a placeholder.
            </figcaption>
          </figure>

          {images.map((image, index) => (
            <figure key={index}>
              <div className={styles.imageWrapper}>
                <Image
                  className={styles.image}
                  src={image.src}
                  alt={image.src}
                  placeholder="blur"
                  blurDataURL={image.blurUrl}
                  layout="fill"
                />
              </div>
              <figcaption className={styles.imageCaption}>
                Image {index + 4} is stored remotely and uses a placeholder.
              </figcaption>
            </figure>
          ))}
        </section>
      </main>
    </div>
  );
}
```

```css
//Home.module.css
.body {
  padding: 20px;
  text-align: center;
}
.section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}
.imageWrapper {
  position: relative;
  width: 200px;
  height: 150px;
}
.imageCaption {
  margin-top: 5px;
  width: 200px;
}

@media screen and (max-width: 500px) {
  .imageWrapper {
    position: relative;
    width: 300px;
    height: 225px;
  }
  .imageCaption {
    width: 300px;
  }
}
```

The first and third `figure` elements contain images that are stored locally and remotely but have no placeholders.

The second figure element has an image that is stored locally and has a placeholder.

In contrast, the fourth figure element maps through an array of image object data which mocks the data we'll get from the backend. We'll store our mock data in the public folder inside the images.js file. You can [access the mock data on GitHub](https://github.com/Timonwa/Using-blurDataUrl-in-NextJs).

```jsx
//images.js
const images = [
  {
    src: "https://i.ibb.co/5MMtXQQ/masahiro-miyagi-t-Hz-Ai-Axe-GBo-unsplash.jpg",
    blurUrl: "data:image/jpeg;base64,/9j/4AAQSkZJRg….",
  },
  {
    src: "https://i.ibb.co/2kWYRTr/masahiro-miyagi-Lfoh1h1azok-unsplash.jpg",
    blurUrl: "data:image/jpeg;base64,/9j/4AAQSkZJRgAB…",
  },
];
export default images;
```

Now, run `yarn dev` in your terminal, so you can view the app in your browser.

![video](https://res.cloudinary.com/denkuysrh/image/upload/v1686297235/Article%20Images/LogRocket/improving-nextjs-app-performance-blurhash/ezgif-4-97219b0f0e_afalpr.gif)

As you can see, the placeholders load almost immediately for both local and remote images before the actual images get downloaded and loaded by the browser.

## Conclusion

In this article, we demonstrated how to use BlurHash to generate placeholder images for a Next.js application. This strategy results in a visually pleasing webpage, prevents layout shifts by ensuring that page contents retain their position, and improves the app's page load speed. In turn, this improves the performance of our Next.js app.

<connectWithMe />



Website sliders are flexible user interface elements that can be helpful for sharing multiple images or conveying information efficiently without wasting valuable space on your homepage.

In this article, we'll demonstrate how to use the [react-draggable-slider](https://www.npmjs.com/package/react-draggable-slider/v/0.1.4) package to build a slider with draggable functionality in React.

## What is a slider?

A website slider is a slideshow that displays a series of images or items that are arranged horizontally or vertically within a single space. The images are displayed individually over a defined time period with a transition effect between the change from one image or item to the next.

A user can navigate through the slider images using a set of navigation controls, and the images or items can also be looped through. A slider can help a website showcase individual items in a visually appealing way while also saving screen space.

Website sliders that showcase customer testimonials can be advantageous for building trust and credibility with new prospects. Sliders may also be used to display different service offerings or show multiple images of a product so a potential customer can visualize it from different angles.

This type of UI element is an attractive option to a long page of scrolling content. With a slider you can group information in one place, set a comfortable pace for cycling between each item, and even add an auto-play feature.

## What is a draggable slider?

Draggable sliders are navigated manually; the user navigates from one item to the next by holding and dragging the item that is currently in view to the left or right. To view the next item, the user holds and drags the current item to the left. Likewise, to view the previous item, the user holds and drags the current item to the right.

## What is react-draggable-slider?

To create a draggable slider in React, we can either build it from scratch or use a React package.

Using a React package may improve your productivity, as it will reduce the time you spend writing code. However, it does mean that your codebase will be dependent on (and perhaps vulnerable to) the package. This is why it's preferable to select an Open source package that has a large community contributing to it, finding, reporting, and fixing bugs, and thus keeping the code secure.

For this article, we'll use the react-draggable-slider package. This package is easy to use and comes with an inbuilt hover effect.

## React draggable slider demo

To demonstrate building a draggable slider in React, we'll set up a React app, install the react-draggable-slider package, and then create the slider and define the slider settings.

Let's get started!

### Creating the React app

Use the following command to create a React app and name it `react-draggable-slider`:

```bash
npx create-react-app react-draggable-slider
```

Now, open the app in the code editor of your choosing. In this demo, I'll use VS Code.

### Installing the react-draggable-slider package

At the time of writing, the react-draggable-slider package is not compatible with React v18, which is the version of React we'll get when we create the React app.

So, if we try to install the slider package right now using command: `npm i react-draggable-slider`, it won't be installed and we'll get a dependency conflict error in our terminal, as shown below:

![image_1](https://res.cloudinary.com/denkuysrh/image/upload/v1686567821/Article%20Images/LogRocket/building-draggable-slider-react/image_1_pygbp0.png)

As a workaround, we'll need to downgrade the versions of the `react` package and `react-dom` package in our React app to v16 in order to be compatible with the react-draggable-slider package.

There's no way to specify the desired React version when creating the app, which is why we needed to create the app before downgrading the version.

First, navigate into the `package.json` file and change the versions of the `react` package and `react-dom` package from v18.1.0 to v16.13.1.

Next, run the command: `npm install` in the terminal. This will automatically replace the current versions in ourn`node_modules` folder with the new one we specified in the `package.json` file.

Now we"re ready to install the slider package:

```bash
npm i react-draggable-slider
```

At this time, we should not see any errors in our terminal. To view the app in the browser, run the React app using either of the below commands:

```bash
npm start
yarn start
```

You'll notice in the browser there's a new error about the `react-dom/client` React module not being found. This error is occurring because we"re using React v16.

![image_2](https://res.cloudinary.com/denkuysrh/image/upload/v1686567821/Article%20Images/LogRocket/building-draggable-slider-react/image4_iibgvz.png)

To address this error, we'll need to make some modifications to our `index.js` file by changing the file path of the module.

Navigate into the `index.js` file and change the file path of the `ReactDom` import from:

```js
import ReactDOM from "react-dom/client";
```

to:

```js
import ReactDOM from "react-dom";
```

Next, we need to adjust how we render our React app to the DOM. To do this, change the code used to render the React app from:

```js
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

to:

```js
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
```

Now, go back and view the app in your browser. You should see the contents of the app without any errors:

![image_3](https://res.cloudinary.com/denkuysrh/image/upload/v1686567821/Article%20Images/LogRocket/building-draggable-slider-react/image5_hikmpn.png)

OK, we've created our app; now it's time to create our draggable slider.

### Creating the slider

To build the slider, go into the `App.js` file and delete the current `jsx` element (i.e., the `Header`) since it is not needed. We'll replace this element with the `Slider` component that we'll import from `react-draggable-slider`. We'll also pass a `sliderSettings` object as a prop into our `Slider` component that we'll create later.

```js
import Slider from "react-draggable-slider";
...
<div className="App">
  <Slider sliderSettings={sliderSettings} />
</div>
```

Next, we'll create an array of objects called `projectList`. We'll use this array to store the items that will be displayed on each slide in the slider.

```js
const projectList = [
  {
    title: "Nature's Life",
    image: project1,
    description:
      "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. ",
  },
  {
    title: "Into The Waters",
    image: project2,
    description:
      "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ",
  },
  {
    title: "Higher Than The Stars",
    image: project3,
    description:
      "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu.",
  },
  {
    title: "Miniature Wonders",
    image: project4,
    description:
      "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. ",
  },
  {
    title: "Giants Of History",
    image: project5,
    description:
      "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ",
  },
];
```

### Defining the slider settings

Now, we'll define our slider settings; these will be passed into our slider to configure its behavior.

We'll start by creating an object called `sliderSettings` which has the following props: `data`, `speed`, `easing`, `bgColor`, `showButton`, `buttonText`, `buttunHref`, and `buttonTarget`. These props define how our slider will behave and how it will be displayed.

#### data

The `data` prop accepts an array. The array of objects represents the details of the items or slides in the slider that will be displayed; in our case, the `projectList`. Each object accepts three key-value pairs: `title`, `image`, and `description`. By default, the `data` prop is set to an empty array, `[]`.

#### speed

The `speed` prop accepts an integer. It determines the speed (in milliseconds) at which the slider should progress when dragged to the next or previous item. As an example, a `speed` value of 3000 equals 3 sec. The default `speed` prop value is 500ms.

#### easing

The `easing` prop accepts a string. There are four available [GSAP](https://greensock.com/gsap/) easings used to animate sliding: power, back, elastic, and expo. Try each of them, and then choose the one you like best. If no value is specified, the `easing` prop value will default to `ease` which is the default value of the browser.

#### bgColor

The `bgColor` prop accepts a string. It sets the background color of the whole slider and accepts HEX and RGB(A) values. For example, `#ffffff` or `rgba(255, 255, 255, 0.05)`. The default value of the `bgColor` prop is `rgba(255, 255, 255, 0.05)`.

#### showButton

The `showButton` prop accepts a Boolean. If set to `true`, a button will be shown for each item or slide; however, no button will be shown if the `showButton` prop is set to `false`. By default, the `showButton` prop value is set to `true`.

#### buttonText

The `buttonText` prop accepts a string. It represents the text that will be displayed inside the button for each item. By default, the value is set to `View case study`.

#### buttonHref

The `buttonHref` prop accepts a string. This string is a `href` attribute that allows each item in the slider to link to another page, enabling the user to view additional details about the item. By default, the `buttonHref` prop value is set to #.

#### buttonTarget

The `buttonTarget` prop accepts a string. When the user clicks on a button, this prop specifies if the link should open on the current page or on a different page. The value can either be `_self` or `_blank`. By default, the `buttonTarget` prop value is set to `_blank`.

Let's begin by passing in only the `data` prop to see what our slider would look like.

```js
const sliderSettings = {
  data: projectList,
};
```

![](https://res.cloudinary.com/denkuysrh/image/upload/v1686568958/Article%20Images/LogRocket/building-draggable-slider-react/video1_eiaqcj.gif)

If we view our slider in the browser, we can see that it has the default react-draggable-slider props as described earlier. Now, let's pass on the rest of our props with our prefered values. Since, we"re not specifying a value for the `easing` prop, it will default to `ease`.

```js
const sliderSettings = {
  data: projectList,
  speed: 3000,
  bgColor: "#070707",
  showButton: true,
  buttonText: "View projects",
  buttonHref: "https://www.example.com",
  buttonTarget: "_self",
};
```

We'll also write some stylings in our `styles.css` file for our body and anchor tag, which is also our call to action button, and then import the file into our `App.js` file.

```css
body {
  font-family: sans-serif;
  text-align: center;
  background-color: #070707;
  color: #fff;
}
a:link,
a:hover,
a:active,
a:visited {
  color: #eee;
  border-top: 1px solid #434141;
  border-bottom: 3px solid #434141;
  border-radius: 20px;
}
```

At this point, our `App.js` file should look like this:

```js
import React from "react";
import Slider from "react-draggable-slider";
import "./styles.css";
import project1 from "./imgs/bibi-pace-Hi4fWKU2KSk-unsplash.jpg";
import project2 from "./imgs/scott-webb-e3dY8laAQtA-unsplash.jpg";
import project3 from "./imgs/alexander-andrews-fsH1KjbdjE8-unsplash.jpg";
import project4 from "./imgs/daan-mooij-RyxShs7mG8E-unsplash.jpg";
import project5 from "./imgs/damien-santos-M5rim8Yh4LY-unsplash.jpg";

export default function App() {
  const projectList = [
    {
      title: "Nature's Life",
      image: project1,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. ",
    },
    {
      title: "Into The Waters",
      image: project2,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ",
    },
    {
      title: "Higher Than The Stars",
      image: project3,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu.",
    },
    {
      title: "Miniature Wonders",
      image: project4,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. ",
    },
    {
      title: "Giants Of History",
      image: project5,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ",
    },
  ];

  const sliderSettings = {
    data: projectList,
    speed: 3000,
    easing: "ease",
    bgColor: "#070707",
    showButton: true,
    buttonText: "View projects",
    buttonHref: "https://www.example.com",
    buttonTarget: "_self",
  };

  return (
    <div className="App">
      <Slider sliderSettings={sliderSettings} />
    </div>
  );
}
```

Here's the slider with its new CSS styles:

![](https://res.cloudinary.com/denkuysrh/image/upload/v1686568977/Article%20Images/LogRocket/building-draggable-slider-react/video2_zfqjmy.gif)

You'll notice that we've changed the text color, as well as the background color of the page and slider. We've also styled the button and changed its text value. If we use the `power` GSAP `easings` to animate the sliding, the sliding animation will look like this:

![](https://res.cloudinary.com/denkuysrh/image/upload/v1686568973/Article%20Images/LogRocket/building-draggable-slider-react/video3_amgk9p.gif)

You can try out the other `easing` prop options on your own and choose the one you like best and also experiment with the other props values.

You'll also notice that the image cards have a nice hover effect when the cursor is moved over them. This is a cool, inbuilt feature of react-draggable-slider.

![](https://res.cloudinary.com/denkuysrh/image/upload/v1686568958/Article%20Images/LogRocket/building-draggable-slider-react/video4_k38zki.gif)

## Conclusion

In this tutorial, we showed how easy it is to create a draggable slider in React using the react-draggable-slider package. We demonstrated how to compensate for a compatibility issue with the most recent version of React. We also showed how to modify the default settings of react-draggable-slider to customize the styling and animation of our slider.

Feel free to view and play with the code [here](https://codesandbox.io/s/react-draggable-slider-f9391j). You may also want to [check out another React slider tool, Swiper](https://blog.logrocket.com/building-modern-sliders-html-css-swiper/), which is a very cool package as well.

<connectWithMe />



In this article, I will introduce changes to the **v-model** directive in **Vue 3**. Then, I will step through a tutorial, demonstrating how to use multiple v-model bindings to simplify the process of building complex forms in Vue.

## What is the v-model directive?

The Vue **v-model** directive enables two-way data binding on form input elements, such as the input element, textarea element, and select element on any Vue component.

It handles data updates in two ways:

- when the value of the input changes, the v-model reflects the value onto the state inside the component
- when the state of the component changes, the v-model reflects the changes onto the form input elements

The v-model directive uses distinct properties and emits different events for different input elements by default:

- value property and input event for text and textarea elements
- checked property and change event for checkboxes and radio buttons
- value as a prop and change event for select fields

A simple input element in a custom component will look something like this:

```js
<input
    type="text"
    :value="modelValue"
    @input="$emit(update:modelValue, $event.target.value)"
>
```

And its props will be defined like so:

```js
props: { modelValue: { type: String, default: '', required: true } }
```

In the parent component, the custom component would be used like this:

```js
<CustomComponent v-model:modelValue="name" />

// or the shorthand

<CustomComponent v-model="name" />
```

In the custom component, the v-model directive assumes an internal property has been defined with the name **modelValue** and emits a single event called **update:modelValue**.

You are not limited to the default naming convention; you may use a different name of your choosing. Having descriptive names for our v-model bindings enables us to use less code when trying to read and define what properties are attached to the parent component.

Just be sure to be consistent when selecting naming properties. Here's an example of a custom name, **fullName**, used for the **modelValue** property:

```js
<input
    type="text"
    :value="fullName"
    @input="$emit(update:fullName, $event.target.value)"
>
```

```js
props: { fullName: { type: String, default: '', required: true } }
```

```js
<CustomComponent v-model:fullName="fullName" />

// or the shorthand

<CustomComponent v-model="fullName" />
```

## How does v-model handle data binding?

The v-model directive has three modifiers that can be used for data binding: `.lazy`, `.number`, and `.trim`. Let's take a closer look.

### .lazy

By default, **v-model** syncs with the state of the Vue instance after each input event is emitted. But with the **.lazy** modifier, the v-model allows the sync to occur after each change event.

Here's an example showing the use of the .lazy modifier:

```js
<input v-model.lazy="message" />
```

### .number

The **.number** modifier, on the other hand, allows us to automatically convert a user entry to a number. An HTML input's default value is always a string, so this modifier can be super helpful. If the value can't be parsed into a number, the original value is returned.

Here's an example showing the use of the .number modifier:

```js
<input v-model.number="numPapayas" type="number" />
```

### .trim

The **.trim** modifier, as the name suggests, automatically trims whitespace from the user input.

Here's an example showing the use of the .trim modifier:

```js
<input v-model.trim="message" />
```

## How is the v-model in Vue.vue 3 different from Vue.vue 2?

If you're familiar with using the **v-model** directive in Vue 2, you understand how complex it was with regard to creating forms.

In Vue 2 we were only allowed to use one **v-model** per component. To support two-way data binding in complex components, a full-blown payload had to be utilized on the v-model.

The component would handle the state of all the input elements and a single payload object would be generated to represent the state of the component. An event with the attached payload would then be emitted to the parent component.

This method created issues when it came to creating Vue UI libraries because it wasn't always clear what was included in the payload. Developers had no choice but to loop through the payload object to ascertain what properties were included.

Fortunately, Vue 3 provides developers with more flexibility and power when it comes to building custom components that support two-way data binding. In Vue 3, we're allowed as many v-model directives as we need. This can be quite convenient, as we'll demonstrate later in this article.

## Multiple v-model directive bindings tutorial

Let's see how we can use multiple v-model directive bindings to simplify a complex Vue form.

For our example, we'll use a checkout form that lists the user's first name, last name, and email address, followed by some fields related to billing and delivery.

![unnamed.png](https://res.cloudinary.com/denkuysrh/image/upload/v1686293595/Article%20Images/LogRocket/v-model-in-vue-3/unnamed_znnfwx.png)

### Creating the reusable component

The billing and delivery sections include the street name, street number, city, and postcode. But, since a user's billing and delivery address are often the same, let's create a reusable address component for the form.

First, we'll set up the Vue app using the following command:

```js
vue create <project-name>
```

Then, we'll create a reusable component, `AddressFieldGroup.vue`, inside a components folder within our `src` folder.

This reusable component will be imported into our `App.vue` file. With the v-model, this reusable component will be bound to a custom component in the `App.vue` file.

Let's take a closer look at the reusable component, `AddressFieldGroup.vue`:

```js
<template>
  <section class="address">
    <h2>{{ label }}</h2>
    <div class="address__field">
      <label for="streetName">Street name</label>
      <input
        type="text"
        id="streetName"
        :value="streetName"
        @input="$emit('update:streetName', $event.target.value)"
        required
      />
    </div>
    <div class="address__field">
      <label for="streetNumber">Street number</label>
      <input
        type="text"
        id="streetNumber"
        :value="streetNumber"
        @input="$emit('update:streetNumber', $event.target.value)"
        required
      />
    </div>
    <div class="address__field">
      <label for="city">City</label>
      <input
        type="text"
        id="city"
        :value="city"
        @input="$emit('update:city', $event.target.value)"
        required
      />
    </div>
    <div class="address__field">
      <label for="postcode">Postcode</label>
      <input
        type="text"
        id="postcode"
        :value="postcode"
        @input="$emit('update:postcode', $event.target.value)"
        required
      />
    </div>
  </section>
</template>

<script>
export default {
  name: "AddressFieldGroup",
  props: {
    label: {
      type: String,
      default: "",
    },
    streetName: {
      type: String,
      default: "",
    },
    streetNumber: {
      type: String,
      default: "",
    },
    city: {
      type: String,
      default: "",
    },
    postcode: {
      type: String,
      default: "",
    },
  },
};
</script>
```

In the above code, the section element with class name address is reused (as we'll see a little later in this article) to create the **Billing Address** and **Delivery Address** in the parent component.

The **label** prop gives each address section its relevant name and four input fields: `streetName`, `streetNumber`, `city`, and `postcode`. The props for each input field along with the label are defined in the script tag.

The label prop will be passed from the custom component, `AddressFieldGroup`, to its parent component in the `App.vue` file in order to provide each address group with a unique label or name (e.g., Billing Address or Delivery Address).

### Creating the CheckoutForm

Now, we'll create the Checkout Form inside our `App.vue` file and import the `AddressFieldGroup.vue` into the `App.vue` file as well:

```js
<template>
  <div class="app">
    <form @submit.prevent="handleSubmit" class="checkout-form">
      <h1>Checkout Form</h1>
      <div class="address__field">
        <label for="firstName">First name</label>
        <input type="text" id="firstName" v-model="form.firstName" required />
      </div>
      <div class="address__field">
        <label for="lastName">Last name</label>
        <input type="text" id="lastName" v-model="form.lastName" required />
      </div>
      <div class="address__field">
        <label for="email">Email</label>
        <input type="email" id="email" v-model="form.email" required />
      </div>
      <AddressFieldGroup
        label="Billing Address"
        v-model:streetName="form.billingAddress.streetName"
        v-model:streetNumber="form.billingAddress.streetNumber"
        v-model:city="form.billingAddress.city"
        v-model:postcode="form.billingAddress.postcode"
      />
      <AddressFieldGroup
        label="Delivery Address"
        v-model:streetName="form.deliveryAddress.streetName"
        v-model:streetNumber="form.deliveryAddress.streetNumber"
        v-model:city="form.deliveryAddress.city"
        v-model:postcode="form.deliveryAddress.postcode"
      />
      <div class="address__field">
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
import AddressFieldGroup from "./components/AddressFieldGroup";
import { reactive } from "vue";

export default {
  name: "CheckoutForm",
  components: {
    AddressFieldGroup: AddressFieldGroup,
  },
  methods: {
    handleSubmit() {
      alert("form submitted");
    },
  },
  setup() {
    const form = reactive({
      firstName: "",
      lastName: "",
      email: "",
      billingAddress: {
        streetName: "",
        streetNumber: "",
        city: "",
        postcode: "",
      },
      deliveryAddress: {
        streetName: "",
        streetNumber: "",
        city: "",
        postcode: "",
      },
    });

    return {
      form,
    };
  },
};
</script>

<style lang="scss">
.app {
  font-family: Arial, Helvetica, sans-serif;
  color: #434141;
  text-align: center;
}
.checkout-form {
  margin: 5px auto;
  padding: 10px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.address__field {
  padding-bottom: 10px;
  width: 250px;
  text-align: left;
}
label {
  display: block;
  font-weight: bold;
}

input {
  padding: 10px;
  width: 230px;
  border: 1px solid #fff;
  border-radius: 5px;
  outline: 0;
  background: #f8edcf;
}

button {
  margin-top: 30px;
  padding: 10px;
  width: 250px;
  color: #f8edcf;
  border: 1px solid #fff;
  border-radius: 5px;
  outline: 0;
  background: #434141;
}
</style>
```

In the above code, we've created a **CheckoutForm** that contains three input fields: `firstName`, `lastName`, and `email`. We've also embedded the reusable `AddressFieldGroup` component twice in the form and used it to represent both the user's **Billing Address** and **Delivery Address**.

We used the `v-model:{property-name}` format to bind every property on both custom AddressFieldGroup components.

In addition to the **v-model** shorthand syntax, this code is also shorter, simpler, and easier to read. This enables us to quickly decipher and decode the properties that are being passed between the parent component and the custom component (in this case, the reusable AddressFieldGroup component).

We also defined all properties in the **CheckoutForm**, including the properties of both addresses. We saved the properties inside a reactive object called form, returned its value to the component, and used it to set the bindings on the CheckoutForm.

## Conclusion

In this article, we've explored the **v-model** directive, identified what Vue modifiers may be used with it, and demonstrated how to use multiple v-model bindings on Vue components to simplify the creation of complex Vue forms.

**v-model** gives us the flexibility to add multiple v-model directives on a single component instance and the \*\*modelValue \*\*can also be renamed according to our preference.

To view and play around with the example used in this article, [check out the source code on CodeSandbox](https://codesandbox.io/s/v-model-multi-binding-bzp5gz). Till next time guys, happy Vueing!

<byeBye />

<connectWithMe />



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



I had recently migrated one of my projects, an open-source called [Tech Roadmap](https://www.techroadmap.xyz/) from pure HTML, CSS, and JavaScript to ReactJs 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 ReactJs 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 ReactJs background and that NextJs is a framework for ReactJs.

I thought I was in love with ReactJs before, but now I'm even more in love with it because of Nextjs, and moving forward I will try to use NextJs as much as I can.

By the way, Nextjs is a ReactJs framework that makes working with ReactJs 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 ReactJs, I urge you to try using Nextjs. 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 />


An image slider is a type of slideshow that displays a series of images in a horizontal or vertical arrangement. The images are displayed one after another, with a transition effect between each image. The images can be cycled through, and the user can navigate through the images using a set of navigation controls.

Other configurations can also be added to the slider like autoplay, pause on hover, zoom in and out, etc. But in this note, we will only focus on the basic configuration of the slider. And as a bonus, we will add a modal to the slider which will display the image in full size.

---

Hi guys and welcome to the third note in my Javascript Project Series, a series where I build 10+ Javascript projects, to test and build our [Javascript coding skills](https://blog.timonwa.com/series/javascript-projects). In this third note, we are going to learn how to build an image slider using CSS and JavaScript.

_Note: All codes for each project in the series can be found on my [GitHub](https://github.com/Timonwa/javascript-project-series) and the deployed link to view all the projects is [here](https://javascript-project-series.vercel.app/)._

## Prerequisites

I am going to assume that you are already familiar with using Html, CSS, and JavaScript and also have a basic understanding of how JavaScript DOM Manipulation works. With that on hand, let's get coding.

![giphy.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1652361679274/hGC-sIJZK.gif)

## Building an Image Slider from Scratch

Going into our favourite code editor, (I will be using VsCode), create 3 files called `index.html`, `style.css` and `script.js`, and a folder called `img` which will hold our images. (You can find all the images used in this tutorial [here](https://github.com/Timonwa/javascript-project-series/tree/main/03-image-slider/img).) Now in your index.html file, copy the following code:

```html

<div class="slider">
  
  <img
    class="slide-image"
    src="./img/01-living-room-blue-theme.jpg"
    alt="slide"
  />
  
  <p>
    <span class="slide-image-number">1</span> of
    <span class="total-image-number">4</span>
  </p>
  
  <div class="btn backward">
    <span class="material-icons-outlined"> chevron_left </span>
  </div>
  
  <div class="btn forward">
    <span class="material-icons-outlined"> chevron_right </span>
  </div>
</div>
```

From the code above you can see that we have created a container called `slider` and inside it we have created an image called `slide-image` and a paragraph with two spans. We also created a previous button called `backward` and a next button called `forward`.

In our paragraph, the first span called `slide-image-number` will display the number or position of the image that is currently being displayed and the second span called `total-image-number` will display the total number of images that are in the slider.

The previous and next buttons as the name suggests are used to navigate back and forth through the images. I am using Google icons for the buttons. You can check it out [here](https://fonts.google.com/icons).

Viewed in the browser, our slider looks like this:

![image1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652361419819/L3_zfxcKg.png)

Now let's add some styling to it. In our style.css file, copy the following code:

```css
/* heading */
h3 {
  text-align: center;
}
/* slider container */
.slider {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  position: relative;
  margin: 40px auto;
  max-width: 600px;
}
/* image */
.slide-image {
  width: 100%;
  min-height: 200px;
  height: auto;
  max-height: 400px;
  padding: 10px;
  margin: 0 auto;
}
/* paragraph holding the count and number of the images */
p {
  text-align: center;
}
/* prev and next btns */
.btn {
  position: absolute;
  top: 50%;
  font-size: 80%;
  background-color: rgb(228, 231, 231);
  border: solid 1px rgb(201, 199, 199);
  padding: 5px;
  cursor: pointer;
}
/* prev btn */
.backward {
  left: 0px;
}
/* next btn */
.forward {
  right: 0px;
}
```

It should now look like this:

![image2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652361436681/lZ0nMYwNj.png)

At the moment, our slider is only showing one image. To add more images to the slider and be able to navigate through the images, we need to do that dynamically using JavaScript. So let's add some JavaScript to our script.js file.

```js
// the variables of the image slider
const image = document.querySelector(".slide-image");
const imageNumber = document.querySelector(".slide-image-number");
const totalImageNumber = document.querySelector(".total-image-number");
const prevBtn = document.querySelector(".backward");
const nextBtn = document.querySelector(".forward");

// the image array
const images = [
  "./img/01-living-room-blue-theme.jpg",
  "./img/02-living-room-couch.jpg",
  "./img/03-living-room-red-theme.jpg",
  "./img/04-modern-kitchen.jpg",
];

// the index of the image on page load
let currentImage = 0;

// the image details that shows when the webpage loads
window.addEventListener("DOMContentLoaded", showImage);

// function to select and change the image details
function showImage() {
  image.src = images[currentImage];
  imageNumber.textContent = currentImage + 1;
  totalImageNumber.textContent = images.length;
}
```

We created variables called `image`, `imageNumber`, `totalImageNumber`, `prevBtn` and `nextBtn`. We also created an array called `images` which will hold all the images that we want to display in the slider.

Next, we created a variable called `currentImage` which will hold the index of the image in the array that is currently being displayed. This index will change when we click on our previous and next buttons which in turn changes the image that is being viewed as you will soon see.

We then wrote a function called `showImage` that sets our image src to be the first on the list in the array using `currentImage` which is initially equal to 0. We also set the contents of both the `imageNumber` and the `totalImageNumber` to be 1 and 4 which is the total number of images in the array respectively.

We then added an event listener to the window which will run the function `showImage` when the webpage loads. Thus, letting the user view the first image in the array.

To confirm that our javascript code is working, let's go back into our index.html file and remove the values from our img src and spans.

```html
<div class="slider">
  
  <img class="slide-image" src="" alt="slide" />
  
  <p>
    <span class="slide-image-number"></span> of
    <span class="total-image-number"></span>
  </p>
  ...
</div>
```

Refreshing the browser, our slider still looks the same.

![image2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652361436681/lZ0nMYwNj.png)

Let's add some functionality to our buttons.

```js
// the next button function
nextBtn.addEventListener("click", function () {
  currentImage++;
  if (currentImage > images.length - 1) {
    currentImage = 0;
  }
  showImage(currentImage);
});

// the prev button function
prevBtn.addEventListener("click", function () {
  currentImage--;
  if (currentImage < 0) {
    currentImage = images.length - 1;
  }
  showImage(currentImage);
});
```

On our next button, we added an event listener called `click` and added a function which sets the currentImage value to the index of the next image.

We, first of all, increase the value of `currentImage` by 1 using the `++` operator. Then we check if the value of `currentImage` is greater than the length of the array minus 1. If it is, we set the value of `currentImage` to 0. If it isn't, we leave it as it is. This is because we want to loop back to the first image in the array. We then call the function `showImage` with the currentImage value as an argument. This will display the next image in the array.

On our previous button, we added an event listener called `click` and added a function which sets the currentImage value to the index of the previous image.

We first of all decrease the value of `currentImage` by 1 using the `--` operator. Then we check if the value of `currentImage` is less than 0. If it is, we set the value of `currentImage` to the length of the array minus 1. If it isn't, we leave it as it is. This is because we want to loop back to the last image in the array. We then call the function `showImage` with the currentImage value as an argument. This will display the previous image in the array.

Going back to our browser, let's see if our navigation buttons are working.

![video1.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1652361891696/Kg46dysuK.gif)

Our buttons are now working and as you can see, we have built a slider that can display images in a slideshow and can also navigate through the images using the previous and next buttons.

Remember I said at the beginning of the note that I will be adding a bonus part to this note. We have come to that part. Yes, I am also going to add a modal to the slider. So that when the user clicks on any image, a modal will appear with the image that was clicked on. and the user will still be able to navigate through the images. Let's continue with the bonus part.

## Adding a Modal to an Image Slider

It's quite simple really, and we can do it in a couple of lines of code along with some reusable code. First let's add a modal to our slider in our index.html file.

```html

<div class="modal">
  <span class="close-modal material-icons-outlined"> close </span>

  
  <div class="modal-content">
    
    <div class="slider">
      
      <img class="slide-image" src="" alt="" />
      
      <p>
        <span class="slide-image-number"></span> of
        <span class="total-image-number"></span>
      </p>
      
      <div class="btn backward">
        <span class="material-icons-outlined"> chevron_left </span>
      </div>
      
      <div class="btn forward">
        <span class="material-icons-outlined"> chevron_right </span>
      </div>
    </div>
  </div>
</div>
```

From the code above, we can see that we created a container called `modal`. We also created a container called `modal-content` which will hold our slider. We then duplicated the slider container into the modal content container. A span called `close-modal` was also added to be used to close the modal. Let's add some CSS to style our modal and its content.

```css
/** modal */
.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.649);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
/* close modal btn */
.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
}
/* modal content */
.modal-content {
  width: 100vw;
}
/* slider inside the modal */
.modal-content > .slider {
  max-width: initial;
  background-color: transparent;
}
.modal-content > .slider > .slide-image {
  width: 100%;
  max-width: 800px;
  display: block;
  min-height: initial;
  max-height: 500px;
  height: auto;
}
/*  paragraph holding the count and number of the images in the slider */
.modal-content p {
  color: #fff;
}
```

Currently, our modal is not visible. We have to write some Javascript code to make it visible. We also need to refactor our code to accommodate the modal.

### Refactoring our variables

```js
// the variables of the image slider
const image = document.querySelectorAll(".slide-image");
const imageNumber = document.querySelectorAll(".slide-image-number");
const totalImageNumber = document.querySelectorAll(".total-image-number");
const prevBtn = document.querySelectorAll(".backward");
const nextBtn = document.querySelectorAll(".forward");
const modal = document.querySelector(".modal");
const closeBtn = document.querySelector(".close-modal");
```

We refactored our `image`, `imageNumber`, `totalImageNumber`, `prevBtn`, `nextBtn`, using querySelectorAll instead of querySelector. This is so that we can also target them in our modal content container also. We also added a variable called `modal` which is the modal container. And a variable called `closeBtn` which is the close modal button.

### Refactoring our showImage function

```js
// function to select and change the image details
function showImage() {
  for (i of image) {
    i.src = images[currentImage];
    i.addEventListener("click", function () {
      modal.style.display = "flex";
    });
  }

  for (i of imageNumber) {
    i.textContent = currentImage + 1;
  }

  for (i of totalImageNumber) {
    i.textContent = images.length;
  }
}
```

We also refactored our `showImage` function. We added a for loop to loop through all the images. An event listener was also added to each image so that when the user clicks on an image, we display the modal.

A for loop was also added to loop through all the image numbers and the total image numbers so as to set the correct image number and total image number on both sliders.

Therefore, when the function is called, it not only runs on our image slider, it runs on the slider inside the modal as well.

Let's refactor our navigation buttons.

### Refactoring our previous and next button functions

```js
// the next button function
for (i of nextBtn) {
  i.addEventListener("click", function () {
    currentImage++;
    if (currentImage > images.length - 1) {
      currentImage = 0;
    }
    showImage(currentImage);
  });
}

// the prev button function
for (i of prevBtn) {
  i.addEventListener("click", function () {
    currentImage++;
    if (currentImage > images.length - 1) {
      currentImage = 0;
    }
    showImage(currentImage);
  });
}
```

So the for loop is also added to loop through all the next buttons and the prev buttons. And the event listener is added to each button.

Let's write some more code to close the modal.

```js
// close the modal
closeBtn.addEventListener("click", function () {
  modal.style.display = "none";
});
```

An event listener is added to the close modal button. When the user clicks on the button, the modal will be closed.

Now let's test our code.

![v2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1652364502724/HeMW6hz9O.gif)

Everything is working fine. Yay!

Our image slider is working perfectly along with the navigation buttons. When we click on any of the images, the modal will be displayed with the enlarged image that was currently clicked on. We can also
navigate through the images using the next and prev buttons as well.

We can also close the modal by clicking on the close modal button. When we close the modal, the image slider will be back to its original state showing the image that we were currently on before closing the modal.

## Conclusion

- We have seen how easy it is to build an image slider with minimal CSS and vanilla Javascript code.

- We also added simple navigation buttons to help us navigate through the images and added a paragraph to display the current image number and total image number.

- We also saw how easy it is to create a modal that can be opened by clicking on any of the images and can be closed by clicking on the close modal button.

- We also made the images in the slider and modal correspond to each other irrespective of each other or where they are being viewed.

- We not only learnt how to build a slider, we learnt how to build a modal as well.

And that's the end of this tutorial. I hope you liked it. If you have any questions or comments, please feel free to send me a dm or contact me via the links below.

Till next time guys, Byeee!

<byeBye />

## Resources

- [View the code on GitHub here](https://github.com/Timonwa/javascript-project-series)
- [View the project here ](https://javascript-project-series.vercel.app/)
- [Javascript HTMl DOM](https://www.w3schools.com/js/js_htmldom.asp)

<connectWithMe />


Code Snippet is a term used in programming to describe a small portion of reusable source code, machine code, or text. They help programmers reduce the time it takes to type repetitive codes while programming. Code Snippet can be found as a feature on most text editors, code editors, and IDE.

## Prerequisite

I assume you can write a decent amount of code in the language you want to create a code snippet for.

And with that on the confirmation,

![lady saying let us get started](https://www.freecodecamp.org/news/content/images/2022/01/gtL8MNgSES.gif)

When I first started learning how to code, the first code snippet I ever used along with other first-time front-enders was the **Ctrl + ! and enter** to get an HTML5 document template. (I doubt anyone knows how to write that from the heart.) It was cool and I felt like a code ninja.

As I started exploring more into coding, I learned about VsCode extensions that once downloaded made coding faster, code snippets in particular and I then went on a downloading spree.

All was going fine and well until I was frequently using frameworks and libraries in my projects which involved me trying to remember how to link my documents to their packages and also personalized CSS resets and variables. Plus I was always forgetting to link my stylesheets to my HTML pages making me spend an unreasonable amount of time trying to figure out why my pages were not being styled correctly. (I still forget to do so now and then.)

That got me thinking about having my personalized HTML and CSS templates which would have all the base codes I always used in my projects.

At first, I just created the templates and saved them on my system for me to copy the code from any time I started a new project but that also was getting stressful and I wanted to just type in a few letters, press enter and boom have my templates showing on my screen. And that was when I learned about VsCode Code Snippets.

I didn't know it was called code snippets at that time so I spent over 2 weeks trying to find a tool that could help me do this and I almost gave up. Until I randomly stumbled on Brad Travesty's video on one of my daily evenings walks on the YouTube streets without actively searching for it.

It was a lifesaver and every once in a while I add new custom snippets to my collection. _(You can check my personalized HTML and CSS templates [here](https://github.com/timonwa/my-templates.git).)_

I'm sure at one or multiple points in your coding journey you wished you had a custom snippet of a particular code you often used just like me and didn't know how to create or find it. Well, wish no more for I'm about to show you how to easily create yours.

## Creating Custom Code Snippets

Creating your custom snippet is very easy and with the help of another tool called **Snippet Generator**(which I will show you how to use later), it becomes even easier.

### Step 1: Checking if your editor lets you create custom snippets

You can check the docs on your code editor to know if the feature is available and how to access it. I am using VsCode for this tutorial. You can download it [here](https://code.visualstudio.com/download).

To access this, you can either click on the **settings icon** on the sidebar and then click on **user snippets** or open up the command palette using **Cntr + shift + p** on Windows or **CMD + shift + p** on Mac, typing in **snippet** and clicking on **Preferences: Configure User Snippets**.

This will give you a drop-down with different language selections to choose from.

![video1-open-code-snippet](https://res.cloudinary.com/denkuysrh/image/upload/v1686508272/Article%20Images/freeCodeCamp/create-your-own-custom-code-snippets/video1_open_code_snippet_x5ui5e.gif)

### Step 2: Deciding your Snippet Scope

You can either create a global snippet that can be used across all languages or create a local snippet scoped to a particular language.

So from the drop-down, you can see **New Global Snippet File** and then a bunch of languages in alphabetical order.

Scroll to the language you want to write your snippet for and click on it or select **New Global Snippet File** if you want to use your snippets in multiple languages.

If you selected a particular language, HTML for example, the file will automatically open, but if you chose Global snippet, you would be prompted to type in the name of the snippet file before it opens.

For this note, I would be using Global Snippet.

![video2-enter-snippet-name](https://res.cloudinary.com/denkuysrh/image/upload/v1686508272/Article%20Images/freeCodeCamp/create-your-own-custom-code-snippets/video2_enter_snippet_name_gqlm4e.gif)

### Step 3: Understanding the Syntax

The Syntax for code snippet is quite easy actually. It is written in JSON format and each file can contain an unlimited number of snippets.

```json
{
// Code Snippet 1
  "Snippet name": {
    "scope": "language1, language2"
    "prefix": "trigger word 1",
    "body": ["your code snippet"],
    "description": "description of the code"
  },
// Code Snippet 2
  "Snippet name": {
    "scope": "language1, language2"
    "prefix": ["trigger word 1, trigger word 2"],
    "body": ["your code snippet"],
    "description": "description of the code"
  }
}
```

#### Snippet Name

The Snippet Name is obviously the name of the snippet. It is also what will be displayed via IntelliSense if no description is provided.

#### Scope

This determines what languages are allowed to use the snippet. Enter the name of the language(s) separated by a comma. If you leave it empty or omit it, the snippet would be accessed by any language. This part is included in Global Snippets only as Local Snippets files are already locally scoped.

#### Prefix

This describes one or more trigger words that will prompt IntelliSense to display the snippet.

#### Body

This can be a string if it is a one-line code or and an array of strings if it is a multi-line code.

#### Description

This describes the snippet and what it does. If this is omitted, the name of the snippet would be used instead.

Example 1

```json
// log to console
  "Print to console": {
    "scope": "javascript, typescript",
    "prefix": "log",
    "body": "console.log();",
    "description": "Log output to console"
  }
```

From the above example, our snippet name is **Print to console**, it can only be used in a **JavaScript and Typescript file**. If you were to type **log** in a javascript or typescript file, IntelliSense would show it along with the description **Log output to console**. Once you select it and click enter, **console.log()** would be seen on the screen.

![video3-log](https://res.cloudinary.com/denkuysrh/image/upload/v1686508273/Article%20Images/freeCodeCamp/create-your-own-custom-code-snippets/video3_log_wn0eni.gif)

### Step 4: Adding Tab Stops

Tabstops allows you to move the editor cursor inside a snippet. $1, $2 specify cursor locations it should move into sequentially when you hit the tab key. $0 represents the final position the cursor should stop.

Example 2

```json
// named function
{
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": ["function $1($2){", "  $0", "}"],
    "description": ""
  }
}
```

In this example, when you type **nfn**, our Named Function snippet shows up and once you select it, you would see our snippet on the screen. What you would also see is that our cursor is now before the parenthesis as opposed to being at the end of the code.

Type in the name of the function, "GetUsers" for example, and then hit the tab button. You will notice that the cursor has now moved into the parenthesis. You can type in the parameter if it has one or and hit the tab key again to move the cursor to the next tab stop which is between the curly brackets where our function body will go.

![vide04-tabstop](https://res.cloudinary.com/denkuysrh/image/upload/v1686508272/Article%20Images/freeCodeCamp/create-your-own-custom-code-snippets/vide04_tabstop_ywxtvl.gif)

_Note: When you are writing multi-line codes, you cannot use a tab to indent your code, you can only use 2 spaces to indent your code or whatever number of spacing indentation you use to write your code._

### Step 5: Using Placeholders

These are Tab Stops with values. They help the user easily identify or understand what (s)he is supposed to type at that particular tab stop. The placeholder will be automatically highlighted so you can immediately type in what you want to replace it with.

Example 3

```json
// named function
{
  // named function
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function ${1:functionName}(${2:parameter}){",
      "  ${0:functionBody}",
      "}"
    ],
    "description": ""
  }
}
```

![video5-placeholders](https://res.cloudinary.com/denkuysrh/image/upload/v1686508273/Article%20Images/freeCodeCamp/create-your-own-custom-code-snippets/video5_placeholders_rj2bec.gif)

### Step 6: Creating Choices

Placeholders can have choices as values. Whereby instead of typing in your value, you can choose from a dropdown selection.

Its syntax is writing the values which are separated by a comma between two pipe-character, for example, ${1|one, two, three|}.

Example 4

```json
// array method
{
  "Array Method": {
    "scope": "javascript, typescript",
    "prefix": "arrmth",
    "body": [
      "${1|forEach, map, filter, reduce|}((${2:item}) => {",
      "  $0",
      "})"
    ],
    "description": ""
  }
}
```

![video6-choices](https://res.cloudinary.com/denkuysrh/image/upload/v1686508274/Article%20Images/freeCodeCamp/create-your-own-custom-code-snippets/video6_choices_meqshm.gif)

Here, once you type in arrmth, select it from IntelliSense, and hit enter, the first tab stop would be a dropdown of array choices to select from. The next tab stop is the parameter and the last stop is the function code.

## Snippet Generators

As your snippets begin to grow in line and size, it becomes difficult to type and create them within your code editor. This is where a snippet generator comes in.

A snippet generator will take in your normal code and turn it into a code snippet.

I will be using this [Snippet Generator](https://snippet-generator.app/). With this particular snippet generator, you can write code snippets for VsCode, Sublime Text, and Atom.

![image1-snippet-generator](https://res.cloudinary.com/denkuysrh/image/upload/v1686508269/Article%20Images/freeCodeCamp/create-your-own-custom-code-snippets/image1_snippet_generator_yjbrbt.png)

### Using the Snippet Generator

In the **description** input, enter the name of the code snippet which would be used as the name and description of the snippet.

In the **tab trigger** input, enter the prefix of your code snippet.

In the **your snippet..** input, enter your code in its natural form as you would without writing it as an array of strings.

After this, you can then add in Tabstops, Placeholders, and Choices as explained above.

Example 5

```json
//named function
function ${1:functionName}(${2: parameter}) {
  ${0:functionBody}
}
```

![image2-arrow-function](https://res.cloudinary.com/denkuysrh/image/upload/v1686508269/Article%20Images/freeCodeCamp/create-your-own-custom-code-snippets/image2_arrow_function_nsrb6f.png)

Example 6

```json
//array method
${1|forEach, map, filter, reduce,|}((${2:item}) => {
 $0
)}

```

### Final code

```json
{
  // log to console
  "Print to console": {
    "scope": "javascript, typescript",
    "prefix": "log",
    "body": "console.log();",
    "description": "Log output to console"
  },
  // named function
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function ${1:functionName}(${2:parameter}){",
      "  ${0:functionBody}",
      "}"
    ],
    "description": ""
  },
  // array method
  "Array Method": {
    "scope": "javascript, typescript",
    "prefix": "arrmth",
    "body": [
      "${1|forEach, map, filter, reduce|}((${2:item}) => {",
      "  $0",
      "})"
    ],
    "description": ""
  }
}
```

![image3-array-method](https://res.cloudinary.com/denkuysrh/image/upload/v1686508269/Article%20Images/freeCodeCamp/create-your-own-custom-code-snippets/image3_array_method_gxm4c9.png)

And that's it. Easy peasy lemon squeezy.

## Recap

Let's do a recap. We have learned that

- a Code Snippet is a small portion of re-usable source code, machine code, or text which helps programmers reduce the time it takes to type in repetitive codes while programming.
- a code snippet file can contain an unlimited number of snippets.
- you can have a locally scoped snippet used within only one language file or a globally scoped snippet used within two or more language files.
- code snippets are written in JSON syntax.
- you can add tabstops, placeholder, and choices to your code snippet.
- you can also use a snippet generator to generate your snippets.

## Resources

- [Brad's Custom Snippets video](https://youtu.be/JIqk9UxgKEc)
- [VsCode Snippet Documentation](https://code.visualstudio.com/docs/editor/userdefinedsnippets)
- [Snippet Generator](https://snippet-generator.app/)
- [My Custom HTML and CSS Templates](https://github.com/timonwa/my-templates.git)

Thank you for reading my article. You can connect with me on [Twitter](https://twitter.com/timonwa_) or [LinkedIn](https://linkedIn.com/in/pelumi-akintokun) to share with me what custom code snippets you would be creating, your comments or questions. And do feel free to share this article with others who might find this useful too. Till next time guys, Byeee!

![Mr Beans waving goodbye](https://www.freecodecamp.org/news/content/images/2022/01/HoDL1vbXj.gif)

<connectWithMe />


Hi guys and welcome to the second article in my [Javascript Project Series](https://blog.timonwa.com/series/javascript-projects), a series where I will be building 10+ Javascript projects, to test and build our Javascript coding skills.

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

_Note: All codes for each project in the series can be found on my [GitHub](https://github.com/Timonwa/javascript-project-series) and the deployed link to view all the projects is [here](https://javascript-project-series.vercel.app)._

## Prerequisites

I am going to assume that you are already familiar with using Html, CSS, and JavaScript and also have a basic understanding of how JavaScript DOM Manipulation works.

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://cdn.hashnode.com/res/hashnode/image/upload/v1632878132374/gtL8MNgSES.gif)

## What is a Color Flipper?

Like I said earlier, a Color Flipper is a fun mini javascript project where you create a simple button, that on click, runs a function that generates a random color and then sets the background/color of an element you preselected to that random color.

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

## Building the Color Flipper

To build this we first need to open our code editor and create 3 files called 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 3 links called `HEX`, `RGB`, and `HSL`. We also created 3 sections in our main tag that contains a paragraph and a button that on click will change the background of our body element.

At the moment, all 3 sections are visible, when we add our CSS styles to them, only one will be visible at a time. And with Javascript, we will use our links to toggle on and off the visibility of each section corresponding to that particular 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 is also equal to the color code that is 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 which indicates that the page of this link is currently active. Now let's add some functionality using Javascript.

### Adding Javascript

In our Javascript file, lets, 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 that was clicked on is underlined, if it isn't, it then underlines it and the corresponding page/section to that link becomes visible while the remaining pages become invisible with the other links having no line under them.

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

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

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

The Math.random() function, when called, 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.

The Math.floor() when combined with Math.random() just 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 on them in the article listed in the [Resources Section](#heading-resources). Now back to our buttons.

#### Hex button color generator

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

We will be generating the 6 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 of all, we created an array called `hex`, which contains all the hex characters that are used to create 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 any time we click on the button.

In this function, we have another variable called `hexColorValue`, which is used to store our generated hex code. Initially its value is set to ’#’, but as we generate our 6 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 that is stored in that array position is then added to our current hexColorValue. So if the random number generated is 5, then our hex character will be ‘4’ because its position in the array is 5 and if our random number is 15, then our hex character will be ‘f’ because its array position is 15.

Once we have generated all 6 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 gets 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 3 values represent a shade of Red, Green and Blue and that's what rgb stands for.

We are going to generate random numbers for these 3 values and in turn use them to generate 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 3 variables `a`, `b` and `c`, and generated random numbers between 0 and 256 for each of them. Each variable represents one of the values of our rgb color code.

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

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

You might have noticed that I multiplied our random number by 256 instead of 255. This 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 have to add 1 to it making it 256.

#### Hsl button color generator

Hsl color codes are also made up of 3 values but the values and ranges are different. The 3 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 is going to 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 are also generating 3 random values within the number ranges for our hue, saturation and lightness and storing them as `a`, `b` and `c` respectively.

We then take the generated values and use them in our variable called `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.

<p
  className="codepen"
  data-height="300"
  data-theme-id="dark"
  data-default-tab="html,result"
  data-slug-hash="ZEvXbJe"
  data-editable="true"
  data-user="timonwa"
  style={{
    height: "300px",
    boxSizing: "border-box",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    border: "2px solid",
    margin: "1em 0",
    padding: "1em",
  }}
>
  <span>
    See the Pen{" "}
    <a href="https://codepen.io/timonwa/pen/ZEvXbJe">
      Color Flipper - JavaScript Project Series
    </a>{" "}
    by Timonwa (<a href="https://codepen.io/timonwa">@timonwa</a>) on{" "}
    <a href="https://codepen.io">CodePen</a>.
  </span>
</p>

## Conclusion

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

And with this JavaScript project, we also learnt 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. I hope that you will use this in your next project. What JavaScript project would you like me to build next? Let me know in the on Twitter.

Till next time guys, Byeeee!

<byeBye />

### Resources

- [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 />


Hi guys and welcome to my JavaScript Project Series. In this series, I will be building several JavaScript projects, from simple easy mini-projects to the little bit complex ones.

Before we start, I want you to know that all the codes to each project can be found on my GitHub account in a particular [repo](https://github.com/Timonwa/javascript-project-series) which will constantly be updated as I publish more notes on different projects. I have also deployed a [live link](https://javascript-project-series.vercel.app/) where you can view and interact with the finished projects.

## Prerequisites

I am going to assume that you are already familiar with using Html, CSS, and JavaScript and also have a basic understanding of how JavaScript DOM Manipulation works.

Now let's get started with our first project; **3 Simple Ways to Build an Accordion**.

## First of all, What is an Accordion Menu?

An accordion menu is one that contains a vertical list of headers that when selected or opened hides or reveals additional content relating to the header. Oftentimes, they can be found on Frequently Asked Questions pages, where users can easily scan the list of questions without getting distracted by the answers, giving them control to click and view the answers to the questions that interest them.

Now let's build our accordions.

## How to Build an Accordion

As the title of this note denotes, I am going to show you 3 simple and different ways to build an accordion.

### Accordion Example 1

This first example is the simplest and easiest to build and it doesn't involve you writing any JavaScript code. You just have to use two html tags called summary and details.

```html
<details class="accordion1-card">
  <summary class="accordion1-card__header">Header</summary>
  <p class="accordion1-card__body">
    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>
```

The summary tag contains the header which gives you a summary of what the accordion is all about. The details tag on the other hand contains the summary tag and the body or additional content of the accordion which can be placed in a p tag as you can see from the code snippet above. So when you click on the header(i.e. summary), the details dropdown to reveal the additional content.

<p
  className="codepen"
  data-height="300"
  data-theme-id="dark"
  data-default-tab="html,result"
  data-slug-hash="QWaWEoY"
  data-editable="true"
  data-user="timonwa"
  style={{
    height: "300px",
    boxSizing: "border-box",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    border: "2px solid",
    margin: "1em 0",
    padding: "1em",
  }}
>
  <span>
    See the Pen{" "}
    <a href="https://codepen.io/timonwa/pen/QWaWEoY">
      Build and Accordion with HTML and CSS: Example 1 [T's Notes]
    </a>{" "}
    by Timonwa (<a href="https://codepen.io/timonwa">@timonwa</a>) on{" "}
    <a href="https://codepen.io">CodePen</a>.
  </span>
</p>

### Accordion 2 Example

In this second example, a few lines of JavaScript are involved. Here you would be listening for a click event on the header, so that when the user clicks on the header, a function is fired to toggle the display on the body or content.

Let's write our html,

```html
<div class="accordion2-card">
  <h3 class="accordion2-card__header">
    Header
    <span class="icons material-icons-outlined"> add_circle_outline </span>
  </h3>
  <p class="accordion2-card__body">
    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 element that contains an h3 tag for the header and a p tag for the body. We also have an icon inside the header which rotates at a 45deg angle with its color changing to red when the accordion is open, and the styles reverting back when the accordion is closed.

Let's add CSS to beautify it a little,

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

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

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

/* accordion body */
.accordion2-card__body {
  border-top: solid 1px goldenrod;
  padding: 10px;
  color: #3d3b3b;
  display: none;
}

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

.active {
  display: block;
}
```

Time for the JavaScript.

```js
//* Js code for accordion 2 example
// variables
const accordion2BtnToggle = document.querySelectorAll(
  ".accordion2-card__header"
);
```

Firstly, all the headers are selected using querySelectorAll and saving them as an array named accordion2BtnToggle.

```js
// adding event listener to the accordion2 toggle button
for (i of accordion2BtnToggle) {
  i.addEventListener("click", accordion2ToggleFunction);
}
```

Next, an event listener is added to all the headers so that when the user clicks on any of the headers, a function called accordion2ToggleFunction is run. Let's now create that function.

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

What this function does is that when the user clicks on a particular header, the body, 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 body's style go from a display of none to a display of block.

The children[0] on the other hand, selects 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.

<p
  className="codepen"
  data-height="300"
  data-theme-id="dark"
  data-default-tab="html,result"
  data-slug-hash="yLpLJWm"
  data-editable="true"
  data-user="timonwa"
  style={{
    height: "300px",
    boxSizing: "border-box",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    border: "2px solid",
    margin: "1em 0",
    padding: "1em",
  }}
>
  <span>
    See the Pen{" "}
    <a href="https://codepen.io/timonwa/pen/yLpLJWm">
      Build and Accordion with HTML and CSS: Example 2 [T's Notes]
    </a>{" "}
    by Timonwa (<a href="https://codepen.io/timonwa">@timonwa</a>) on{" "}
    <a href="https://codepen.io">CodePen</a>.
  </span>
</p>

Now let's move on to our third example.

### Accordion 3 Example

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 here, if the body of another header is currently open, it will automatically be closed before showing the body of the header you clicked on. 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 accordion3ToggleFunction() {
  for (i of accordion3BtnToggle) {
    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 all the body 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 body of the particular header that was clicked on has a display style of none. If it does, it then adds a style of display block to it and adds our toggleIcon class to the icons.

When the user then clicks on another header, the for…of loops runs again, making all the body have a display of none and removing the toggleIcon class from the icons including the ones we just added to the previous body and icon. The if statement then runs again and adds the active and toggleIcon class to the body and icon of the new header we just clicked on.

<p
  className="codepen"
  data-height="300"
  data-theme-id="dark"
  data-default-tab="html,result"
  data-slug-hash="jOYOMbj"
  data-editable="true"
  data-user="timonwa"
  style={{
    height: "300px",
    boxSizing: "border-box",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    border: "2px solid",
    margin: "1em 0",
    padding: "1em",
  }}
>
  <span>
    See the Pen{" "}
    <a href="https://codepen.io/timonwa/pen/jOYOMbj">
      Build and Accordion with HTML and CSS: Example 3 [T's Notes]
    </a>{" "}
    by Timonwa (<a href="https://codepen.io/timonwa">@timonwa</a>) on{" "}
    <a href="https://codepen.io">CodePen</a>.
  </span>
</p>

Now that you have seen 3 simple ways to build an accordion, I hope that you will use this in your next project. What JavaScript project would you like me to build next? Let me know in the on Twitter.

Till next time guys, Byeee!

<byeBye />

## Resources

- [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)
- [View the code on GitHub here](https://github.com/Timonwa/javascript-project-series)
- [View the project here](https://javascript-project-series.vercel.app/)

<connectWithMe />



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://techroadmap.xyz).

## 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://www.techroadmap.xyz/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://techroadmap.xyz) 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://techroadmap.xyz)
- [Tech Careers Roadmap (GitHub)](https://github.com/Timonwa/techroadmap)
- [Tech Careers Roadmap (Twitter)](https://twitter.com/TechRoadmap__)

<connectWithMe />



I was working on a personal ReactJs 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://cdn.hashnode.com/res/hashnode/image/upload/v1642600801472/QOMTmORU_.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://cdn.hashnode.com/res/hashnode/image/upload/v1642663391535/e9dq4E6JO.jpeg)

![warning screenshot](https://cdn.hashnode.com/res/hashnode/image/upload/v1642601365515/nN7aVU2DLL.png)

![error2 screenshot](https://cdn.hashnode.com/res/hashnode/image/upload/v1642602487707/H6pg8ZCEs.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://cdn.hashnode.com/res/hashnode/image/upload/v1642602587368/TzNIJxgsF.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://cdn.hashnode.com/res/hashnode/image/upload/v1642592758850/QArbJU5wZ.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://cdn.hashnode.com/res/hashnode/image/upload/v1642662163819/OxpnOGvAd.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://cdn.hashnode.com/res/hashnode/image/upload/v1627214008066/NoOGJ5cMr.jpeg)

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://cdn.hashnode.com/res/hashnode/image/upload/v1642602564777/B7gOQbXTW.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://cdn.hashnode.com/res/hashnode/image/upload/v1642592887001/QYatWsSCk.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 />



> 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, 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 />



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,

![tenor(25).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632878132374/gtL8MNgSES.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.

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. [Variables](/using-css-variables-like-a-pro) 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 [variables](/using-css-variables-like-a-pro) 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.

## 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 />



CSS variables help you to create custom CSS styles that can be reused continuously throughout your document or website.

## Prerequisites

I am going to assume that you already have basic knowledge on how to style your html documents using CSS.

And with that on the confirmation,

![letsGetStarted.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632878132374/gtL8MNgSES.gif)

## What are CSS Variables?

Imagine you are creating a website with a large CSS code base and complexity, and you have a brand color of Red and Green which would be reused a number of times throughout the website. You decide to use Red as the main color, you finish building the website and you show it to your client but the client says he would have preferred Green instead. So you have to go back to all the instances that you used Red and then change them to Green. That sounds stressful doesn't it, especially if the number of those instances are 20, 100 or even more.

Now imagine if you had used a CSS variable instead to declare the value of the color Red and you had called that variable in all those instances. Then when the client decides to go with Green, all you have to do is change the color value in one place (i.e where you declared it), and just like that, all the Reds suddenly become Green. Magical isn't it. Not really, it's just the power of CSS variables.

![magic.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1634037042468/VVPNBbc5o.gif)

> Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.

CSS variables help to make the reuse of stylings a lot easier. All you have to do is declare it once and call it anywhere that you want to use it. Now that you know what it's about, let's talk about where we can use it.

## The Scope

CSS variables can be used in any CSS selector. The type of the selector would determine if the variable would have a global or local scope hence become a global or local variable.

The **global variables** can be used by every element in the document, while **local variables** can be used only by the elements inside the selector where it is declared in.

To create a variable with a global scope, declare it inside the `:root` selector. The `:root` selector represents the document's root element.

To create a variable with a local scope, declare it inside the selector that is going to use it.

_Do note that it is custom practice to define CSS variables in the :root but a few cases might warrant you having them in a local scope._

## The Syntax

The syntax is really quite simple, and it makes use of a `var()` function.

First of all you have to declare the variable within the selector that you want to use it in. _Note that only the child elements or descendants of that selector would have access to the variable as explained above._

```css
/* Syntax */
selector {
  --variable-name: value;
}

/* Example */
:root {
  --main-color: red;
}
```

The variable must begin with two dashes (--) and is case sensitive! This means that `--main-color` is not the same as `--Main-color` or `--main-Color`. The browser will treat the above 3 as different custom properties.

The next step is to call the variable within the elements that will use it using the `var()` function.

```css
/* Syntax */
element {
  style: var(--name, value);
}

/* Example */
button {
  color: var(--main-color, blue);
}
```

The `value` is optional and is known as a fallback value.

## The Fallback Value

The purpose of a fallback value is that if for any reason the variable cannot be accessed and used by the browser, the browser should use this instead. So if our variable, `--main-color` cannot be used, then the browser should then use `blue`.

An instance would be if we

- made a spelling error when declaring our CSS variable name or when calling it.
- are calling a variable that is out of the scope it is being used in.
- forgot to declare the variable in the first place.

```css
:root {
  --main-coor: red;
}

button {
  color: var(--main-color, blue);
}
```

Therefore if our variable cannot be accessed by the browser because it cannot find its declaration anywhere, then the browser should use blue as the next best thing.

If after this the browser still cannot access the fallback value because you did not give it a value to fall back on or you again made a spelling error, then you are **on your own** oh.

![onlyGodCanSaveYou.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1634037188540/pEWLsll-9.gif)

![justKidding.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1634037286607/J1dnjcwoL.gif)

The browser would just look into the styles of the parent element to find if the property value is given there. If it's not it then looks into the next parent element and on and on going up until it has no more parent element and results back to its initial value, so therefore it would just be looking for styles for it to inherit. If it doesn't find one, the browser then gives the element back it's default property value.

```html
<body>
  <div class="outer-div">
    <div class="inner-div">
      <h1>Title</h1>
      <p>paragraph</p>
    </div>
  </div>
</body>
```

```css
.outer-div {
  color: green;
}

.inner-div {
  color: red;
}

p {
  --coor: blue;
  color: var(--color, blu);
}
```

You can see here that we are trying to make our p element to have a color of blue, but because we did not declare the variable and also misspelled the fallback value, it then inherits the red color from it's parent `.inner-div`. If you were to comment out the `.inner-div` color, the paragraph would then be a color of green gotten from the `.outer-div`, and if you were to comment that out again, the paragraph would now have a color of black, which is the default color it would inherit from the **body**.

But mind you if you were to give the body a color of orange, the paragraph would be an orange color instead of black.

It's all about inheritance.

Let's give another example of this.

## Inheritance

The CSS variables of an element can be inherited by its children if the children do not have their own stylings or custom properties applied to them. Or in the case of the example above, have a spelling error. These children would in the end inherit the style property of it's parent.

```html
<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>
```

```css
.two {
  --test: 10px;
  font-size: var(--test);
}

.three {
  --test: 2em;
  font-size: var(--test);
}
```

From the example above, the `class="two"` element gets a font size of 10px which should be inherited by it's children.

The `class="four"` element gets a font size of 10px which it has inherited from its parent, `class="two"` element.

But the `class="three"` element on the other hand gets a font size of 2em because the value of the declared variable has now been changed within the child element.

## Specificity

The same way specificity works in CSS is how it works with variables.

Take for example you declare a variable color twice in the same selector, firstly as red then secondly as green and then you call the variable in your p element. Which color do you think the p element would be?

```css
.div {
  --color: red;
  --color: green;
}

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

If you guessed green then you are right. The browser while going through the code would first save the variable as red, then when it sees that the variable is again declared a second time with another value, it then resaves the value to green. When it then finds a call for it --in our case the p element-- , it then gives it a color of green.

And from the example given in [Inheritance](#inheritance) above, you can see that the CSS variable declared in the child element takes precedence over the same CSS variable that was declared in its parent element.

## Validity

In an instance where the value of a CSS variable is not a valid value for the property of the element it is being called in, it either inherits a new value or has its initial value used.

![what.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1634037350430/lpP3zjCRC.gif)

Lemme further explain this.

A CSS variable initially when declared would have it's value said to be valid. Here the browser has not found any need for it to be used in any element yet so it would have no choice than to call it valid and store it as a valid value for CSS variable.

But when it gets to an element where it is to be used i.e being declared, and finds out that the value being given by the variable is not a value that is acceptable as a property value, that value then becomes invalid thus making the variable invalid.

This does not mean that the declaration of the variable in itself is invalid, but in the instance where the browser tried to use it and failed, it becomes invalid only in that element property and in any other whose element property cannot use the value. And in that instance, the browser would then look into it's parent element to find a value to use or in the end use its initial value. It wouldn't even bother looking for a fallback value.

Lemme explain with an example.

```html
<div>
  <p class="p1">This paragraph inherits the color green.</p>
  <p class="p2">This paragraph is blue.</p>
</div>
```

```css
:root {
  --font-size: 20px;
}

div {
  color: green;
}

p {
  color: blue;
}

.p1 {
  color: var(--font-size, blue);
  font-size: var(--font-size);
}
```

The browser first stores the `--font-size` as a valid value of `20px`. Then it gives all the paragraphs a color of blue as declared in the p selector. It then moves to the p element with a class of p1 and sees that the variable it has stored is being called and then tries to use it.

What is expected is that the browser takes the value of our CSS variable `--font-size` and substitutes it in our `.p1` element, but since 16px is not a valid property value for color, the value becomes invalid because it doesn't make sense to the browser. The browser then handles this situation in two ways:

- It checks if the property color is inheritable. Seeing that it is, it then looks for a parent element, in this case the div element and finds that there is a color property value the p element can inherit. So now the paragraph gets a color of green.
- In the case whereby the element does not have a parent element or it's parent element does not have a property value it can inherit, the browser then sets the value back to its default initial value, i.e., black, ignoring the fallback value.

But if you had written `color: 16px;` instead of `color: var(--font-size);` then the browser would have viewed that as a syntax error and the previous declaration of color: blue; on the p element will then be used.

Now remember that we also used that same variable as a value for the font size for the same element. Do you think that the font size of our .p1 element would change or not?

![calculating.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1634037405476/aF1CZeeqE.gif)

Yes it would. This is because the 16px value of our CSS variable is now a valid value to the font size property.

As you can see, the variable was only invalid when we tried to use it as a value for our color but then became valid once more when we used it as a value for our font size.

And that's basically everything you need to know about CSS variables. Let's do a quick recap.

## Recap

- CSS variables help you to create custom CSS styles that can be reused continuously throughout your document or website.
- They can either be globally scoped or locally scoped.
- To use a CSS variable, you have to declare the variable in a selector, which is usually in the :root and then call the variable in the element(s) you wish to use it in.
- A fallback value is a property value that is to be used if for any reason the CSS variable cannot be accessed and used by the browser.
- Css variables of an element can be inherited by it's children.
- A variable can become invalid if its value is not a property of the style that is being applied.
- The property either then inherits the value of it's parent element or goes back to its initial value when the value of the CSS variable becomes invalid.

And that wraps it up on the magic that is CSS variables. I hope you found it insightful and enjoyed reading it. Please share this with your friends if you did.😁

Till next time guys, Bye!

<byeBye />

<connectWithMe />



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 [Twitter](https://twitter.com/timonwa2) tech community. I also joined another after that, a training hosted by the [Zuri team](https://training.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 />



<infoCard title={"Update"} color="grey">
  This article has been updated in a new article to reflect the new GitHub UI.
  It can be found{" "}
  <a href="/how-to-fork-a-repo-in-github-using-your-mobile-device">here</a>.
</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://cdn.hashnode.com/res/hashnode/image/upload/v1627213909800/eb3I4MtHx.jpeg)

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://cdn.hashnode.com/res/hashnode/image/upload/v1627214008066/NoOGJ5cMr.jpeg)

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://cdn.hashnode.com/res/hashnode/image/upload/v1627214549084/-p7zRk6wB.jpeg)

### 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://cdn.hashnode.com/res/hashnode/image/upload/v1627214549806/Y9akSUOac.jpeg)

![screenshot showing the mobile browser displaying the desktop site button in on mode](https://cdn.hashnode.com/res/hashnode/image/upload/v1627214576075/XDXwfAEMb.jpeg)

![screenshot showing the mobile browser displaying the repository in desktop view](https://cdn.hashnode.com/res/hashnode/image/upload/v1627214827426/RkmnRKQzE.jpeg)

### 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://cdn.hashnode.com/res/hashnode/image/upload/v1627214639785/wCVaSX05n.jpeg)

![screenshot showing the mobile browser displaying the newly forked repository](https://cdn.hashnode.com/res/hashnode/image/upload/v1627214859343/jcbRh2TTv.jpeg)

![screenshot showing the mobile browser displaying the newly forked repository in mobile view](https://cdn.hashnode.com/res/hashnode/image/upload/v1627214914780/Diifswmh3.jpeg)

### Congratulate yourself

![congrats, you did it gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1627214924924/JaNiCvHLu.jpeg)

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 />



Hello World!

This is a demo code snippet.

<connectWithMe />


Dummy Snippet

How to build an image slider using CSS and vanilla Javascript that opens a modal when you click on any of the images and enlarges the image that is clicked on.

How to Create an Image Slider using CSS and JavaScript

Subscribe to my newsletter

Subscribe to my newsletter 💌