
## Introduction

As a programmer, I understand that designing websites can sometimes feel overwhelming, especially when our personal projects lack a strong design element. But don't worry, I've been there too! Over time, I've picked up some valuable tips that have helped me improve my design skills. In this post, I'd love to share a few of these tips with you. By implementing these strategies, you'll be able to enhance your design abilities and create visually appealing websites.

## Get Inspired by Other Websites

One of my favorite strategies is to draw inspiration from other websites. Exploring well-designed websites can give you insights into successful design choices and innovative approaches. Take the time to analyze and deconstruct the elements that make these websites visually appealing and user-friendly. By studying and understanding the design principles employed by other websites, you can expand your design repertoire and incorporate fresh ideas into your own designs. Remember, inspiration is not about copying. Use other websites as a source of inspiration to spark your creativity and adapt their ideas to suit your unique design needs and goals. I personally like to take elements from different websites, make some tweaks, and blend them into my work.

When it comes to design, understanding and applying basic principles is essential to create visually appealing and balanced designs. Here are a few key principles to consider:

1. **Color Contrast**: Choosing colors with sufficient contrast ensures that text and important elements are easily readable and distinguishable. High contrast between foreground and background colors improves accessibility and legibility.
2. **Padding**: Proper use of padding, or the space between elements, helps create a sense of visual balance and organization. Sufficient padding around elements prevents them from feeling cramped or cluttered, while also improving readability and user experience.
3. **Typography**: Selecting appropriate fonts, font sizes, and font styles contributes to the overall look and feel of your design. Consider factors such as readability, hierarchy, and consistency when choosing typography for your interfaces.
4. **Whitespace**: Whitespace, also known as negative space, refers to the empty areas between elements in a design. Effective use of whitespace helps create a clean and uncluttered layout, improves readability, and directs the user's attention to key elements.
5. **Alignment**: Consistent alignment of elements creates a sense of order and cohesion in your design. Whether it's left-aligned, centered, or justified, choose an alignment that suits your design goals and maintains visual harmony.
6. **Hierarchy**: Establishing a clear visual hierarchy guides the user's attention and helps prioritize information. Use varying sizes, colors, and styles to differentiate between headings, subheadings, body text, and other elements.
7. **Consistency**: Consistency in design elements such as colors, typography, and spacing creates a unified and cohesive look. Maintaining consistency throughout your design enhances user experience and helps establish brand identity.

## Experiment with different design tools and software

You can also explore design tools like [Figma](https://www.figma.com) to enhance your design capabilities. Figma is a popular design tool that offers a wide range of features and collaboration options. With Figma, you can create and prototype designs, collaborate with team members in real-time, and easily share your designs with stakeholders. By incorporating Figma into your design workflow, you can take advantage of its intuitive interface and powerful features to bring your design ideas to life. Experiment with Figma and discover how it can expand your design capabilities and streamline your design process.

## Apply Responsive Design Principles

To create a seamless user experience across various devices, it's crucial to design interfaces that adapt well to different screen sizes and devices. By incorporating responsive design principles, you can ensure that your designs are optimized for a wide range of devices, including smartphones, tablets, and desktop computers. Responsive design involves designing and developing websites in a way that allows them to automatically adjust and respond to the user's device and screen size. This ensures that the content and layout remain visually appealing and functional, regardless of the device being used. By embracing responsive design, you can provide a consistent and user-friendly experience to your audience, regardless of the device they choose to access your website on.

![Responsive Desgin](/content/articles/unlock-your-design-potential-as-a-programmer/responsive.jpg)

## Stay Updated With Design Trends and Best Practices

Just like programming, design is a fast-evolving field, and it's important to stay current with the latest trends and best practices. Regularly reading design blogs, like this one, can keep you informed about the latest design techniques and methodologies.


As a programmer venturing into the world of design, there are several strategies you can use to improve your design skills and create impactful user interfaces.

Unlock Your Design Potential as a Programmer with These 4 Strategies


Errors are never fun. I had a project that I was updating to the latest version of Next.js and I got the following error:

![Screenshot of the hydration error](/content/articles/nextjs-hydration-error-version-13/error.png)

## What's A Hydration Error?

This error is a hydration error. Hydration is the process of taking the HTML that is rendered on the server and turning it into a fully interactive React application in the client. This error is telling us that the HTML that was rendered on the server is different than what was rendered on the client. This is a problem because React will not be able to hydrate the application.

## How To Fix A Hydration Error

A hydration error can be caused by a multiple issues which makes this a bit tricky to debug. I was also updating all my packages at once so I wasn't sure which yarn package was actually causing this error.

Luckily, Next.js gives us some info about possible reasons for this error. In my case it was a mismatched `<a>` tag. In case that wasn't the issue, I also went to the [link](https://nextjs.org/docs/messages/react-hydration-error) the suggested. Here I found some more possible reasons:

1. Incorrect nesting of HTML tags
    1. `<p>` nested in another `<p>` tag
2. Using checks like typeof window !== 'undefined' in your rendering logic
3. Using browser-only APIs like window or localStorage in your rendering logic
4. ... and some more reasons

I was able to pinpoint my issue to the upgrade of the `Next/Link` component. You used to have to wrap your own `<a>` tag in the `Next/Link` component. Now you can just use the `Next/Link` component and it will render the `<a>` tag for you.

## Quick Fix Using Code Mod

Before going through your entire code base and manually finding and fixing each and every nested `a` tag, it might behove you to know that a codemod is available to fix this issue.

> [Codemods](https://nextjs.org/docs/app/building-your-application/upgrading/codemods) are transformations that run on your codebase programmatically. This allows a large number of changes to be programmatically applied without having to manually go through every file.

[Here](https://nextjs.org/docs/app/building-your-application/upgrading/codemods#remove-a-tags-from-link-components) is the link to the codemod that will remove `<a>` tags inside Link Components, or add a legacyBehavior prop to Links that cannot be auto-fixed. Here is an example of what it will do:

```jsx
<Link href="/about">
  <a>About</a>
</Link>
// transforms into
<Link href="/about">
  About
</Link>
 
<Link href="/about">
  <a onClick={() => console.log('clicked')}>About</a>
</Link>
// transforms into
<Link href="/about" onClick={() => console.log('clicked')}>
  About
</Link>
```

If you are not able to fix this error, it will still run in production. You will just see an error in the console but it won't break your application.


When upgrading to Next.js version 13, I encountered a hydration error. This is what a hydration error is and how to fix them.

Fix For - Error: Hydration Failed Because The Initial UI Does Not Match What Was Rendered on The Server


## Hooks Overview

React Hooks have revolutionized the way we manage state and side effects in functional components. Introduced in React 16.8, they make it possible to handle state without writing class components. If you're new to hooks, you might want to check out our previous article on the `useEffect` hook, [linked here](using-react-useeffect).

> Missed our `useState` in Next.js article? [View it here!](/articles/nextjs-usestate)

### What is `useContext` Hook?

The `useContext` hook is a powerful tool for managing global state in your React application. It allows you to share state and functions across components without prop drilling. Let's dive into an example to understand how it works.

### How does `useContext` work?

In a nutshell, `useContext` provides access to a value, known as the context value, that's defined by a `Provider` component. This value can be shared across multiple components, making it a great choice for managing global state and reducing component complexity.

### `useContext` Hook Example

```javascript
import React, { useContext } from 'react'

// Create a context
const MyContext = React.createContext()

function ParentComponent() {
  // Define a state value in the parent component
  const stateValue = 'Hello from Parent'

  return (
    <MyContext.Provider value={stateValue}>
      <ChildComponent />
    </MyContext.Provider>
  )
}

function ChildComponent() {
  // Access the state value using the useContext hook
  const contextValue = useContext(MyContext)

  return <p>{contextValue}</p>
}
```

In this example, the ParentComponent defines a state value and provides it through the MyContext.Provider. The ChildComponent then consumes this value using the useContext hook.

## Uses of `useContext` Hook

The useContext hook is particularly useful for scenarios where you need to manage global state, such as user authentication, theme preferences, or language settings. By using context, you can easily share this state and update it from any part of your component tree.

Here's a quick example of using useContext to manage the theme of your application:

```javascript
import React, { createContext, useContext, useState } from 'react'

// Create a context
const ThemeContext = createContext()

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light')

  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>
}

function App() {
  const { theme, setTheme } = useContext(ThemeContext)

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light')
  }

  return (
    <div className={`App ${theme}`}>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  )
}
```

In this example, we create a ThemeContext to manage the theme state. The ThemeProvider component provides the theme state to its children. The App component, which is a child of ThemeProvider, uses the useContext hook to access and update the theme.

## Explore More Hooks

The useContext hook is just one of the many powerful hooks that React provides for building functional and efficient components. Explore more [React hooks](/tags/react-hooks)! Happy React hooking!


Learn what useContext is and how to use it in Next.js to manage global state with React Hooks.

useContext() Hook in Next.js - React Hooks


Creating code is easy, but creating great code is not. When we start to learn programming, we make what works and we're happy just with that. As we mature our skills, it's important to give ourselves the best environment to produce quality code. We can stop poor code from being pushed in our repository through [linting](https://stackoverflow.com/questions/8503559/what-is-linting) and formatting. In this article, we'll learn how to improve our developer experience (DX). Let's go ahead and dive right in!

## TDLR

You can access the source code on this [github repo](https://github.com/Umayarz18/commit-better-code-with-husky-prettier-eslint-lint-staged).

## Tools of the Trade 🧰

To create such a useful environment, we'll use these packages to check our code through git hooks:

- **`Husky`** 🐶: Supercharges our DX by linting, testing, or formatting code as code is committed with git.
- **`ESLint`** ✔️: Checks for certain code patterns to stop errors or potential bugs.
- **`Lint-Staged`** 🔧: Lints code before a commit occurs to keep production code clean.
- **`Prettier`** ✨: Keeps code formatting consistent based on our own preferences.

## Commiting Clean Code to a Project

We'll use create-react-app to make the initial project. We won't be doing anything too much with React and you should still be able to follow along.

```Bash
mkdir better-code-app
cd better-code-app
npx create-react-app ./
```

Now that the code has been made, let's go ahead and run it in our browser to see if everything is correct.

```Bash
npm run start
```

Everything should be working just fine! Now before we add our tools, lets make that first commit with just the CRA project.

```Bash
git add .

git commit -m 'init'
```

Great! Now that we know the web app is working, let's add our tools to make clean code.

### Adding ESLint and Prettier

ESLint is put in 'create-react-app` by default, but we will create custom configuration files for both ESLint and Prettier.

Let's install Prettier and eslint-config-prettier and make our config files in root project directory.

```Bash
npm install --save-dev --save-exact prettier eslint-config-prettier
```

Create an ESLint config and check off whatever specifications you'd like for your project.

```Bash
npm init @eslint/config 
```
You can select your own preferences through that command. If you're unsure what to pick, just make a copy of this `.eslintrc.json` in our root directory with the following configuration:

```JSON:.eslintrc.json
{
	"env": {
		"browser": true,
		"es2021": true
	},
	"extends": ["eslint:recommended", "plugin:react/recommended"],
	"parserOptions": {
		"ecmaFeatures": {
			"jsx": true
		},
		"ecmaVersion": "latest",
		"sourceType": "module"
	},
	"plugins": ["react"],
	"rules": {
		"indent": ["warn", "tab"],
		"quotes": ["error", "single"],
		"semi": ["error", "always"]
	}
}
```

Let's also make a `.eslintignore` file to prevent linting on tests:
```Markup
src/*.test.js
```

You'll notice there are a lot more errors appearing in the code than before. 
That is ESLint enforcing our selected code style based in the config file. 
Before we fix these errors, lets make our Prettier config file to help format 
our linted code.

```Bash
touch .prettierrc.json //or create manually
```

Once your config file is made, add the following code to sync up both ESLint and Prettier:

```JSON:.prettierrc.json
{
	"tabWidth": 2,
	"useTabs": true,
	"printWidth": 80,
	"semi": true,
	"trailingComma": "es5",
	"jsxSingleQuote": true,
	"singleQuote": true
}
```

Then modify `eslintrc.json` to include the following as the final item in the `"extends"` configuration:

```JSON
...,
"extends": [
  ...,
  "prettier"
],
...,
```

Now with those two set up, we can move on to Husky and lint-staged.

### Configuring Husky

Let's initialize Husky to our project:
```Bash
npx husky-init && npm install       
```
This command will freshly add Husky to our project in the `.husky` folder. Inside this folder, we can create files that match the git hooks we want to use. 

There are many Git hooks you can use to set up certain actions when using Git with your code. This tutorial will only deal with `pre-commit` Git hook provided to format and lint our code before it gets committed to our repository. Refer to [Husky's Documentation](https://typicode.github.io/husky/#/) for more examples of Git Hooks to use to improve your developer experience on your projects.

While we're here, let's install lint-staged:

```Bash
npm i --save-dev lint-staged
```

Modify the `pre-commit` Git Hook in `.husky`. This will run lint-staged before a commit can be pushed to our codebase.

```Shell
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged
```

Add the lint-staged configuration to `package.json` so when certain files are staged for a commit, we run ESLint and Prettier.

```JSON:package.json
...,
"lint-staged":{
    "**/*.{js,jsx,ts,tsx}":[
      "npx prettier --write",
      "npx eslint --fix",
    ]
  }
```

### Testing Our Setup

Now that we've installed and configured our tools, let's test this out in action!

Let's find out what happens if we commit our code as-is:

```Bash
git add.
git commit -m 'test commit with husky'
```

Oops! Seems our commit failed. Luckily, the packages we use inform us what is causing the linting problem in `App.js`. Let's fix it and try again:

```Bash
git add.
git commit -m 'test commit with husky again :)'
```

Success! 🥳🥳 We have just committed clean code to our repository like a true pro 😎. 


## Further Resources

To further your own DX while you code, refer back to the documentation 
of these technologies to discover more ways to use git hooks.

- [Prettier Docs](https://prettier.io/)
- [ESLint Docs](https://eslint.org/)
- [Husky Docs](https://typicode.github.io/husky/#/)
- [Lint-Staged Docs](https://github.com/okonet/lint-staged)
- [Automating Code Checks and Tests with Git Hooks](https://www.antstack.io/blog/adding-git-hooks-to-your-project/)


Improve your developer experience by linting and formatting your code through git hooks.

Commit Better Code with Husky, Prettier, ESLint, and Lint-Staged


## Introduction

**Open source software** (OSS) is intimidating to get involved with as a 
newer developer but so rewarding once you do. Beginners have a hard time getting 
started because projects are complex with problems and code that are difficult 
to understand let alone add to. It might feel hard to find ways to contribute 
when you're new or have less experience with large codebases. Despite being new, 
there are still many ways to get active in open source with any skill level. 
In this article, you'll learn the basics about open source software to start 
contributing today. 



## What is Open Source?

**Open source software** is any software that allows the public to edit, modify, 
and improve the codebase. This is made possible by developers that contribute 
via improving code quality, bug fixes, performance, documentation, and community 
awareness.


### Open Source Licensing

Projects that are open sourced use different licenses to denote the level of 
freedom and restrictions a user of the code inherits. Licenses are a legal 
contract between the user and author of the code for what a user can and cannot 
do with the technology. There are many types open source licenses such as MIT or
GNU General Public License that places different rules on a project. It is always
important to know what type of license the project falls under so you are aware 
of your rights as a developer or user of the source code. (Note: you can learn 
more about [open source licenses in this article](https://www.whitesourcesoftware.com/resources/blog/open-source-licenses-explained/))


### Stakeholders of Open Source

Open source projects have a few different types of members that influence and 
improve the source code. These people can be typically classified in the 
following roles:

- **Author:** Whoever created the repository. This can be an individual 
developer or an organization.
- **Owner:** Whoever has administrative access to the repository.
- **Maintainers:** Contributors that drive the repository's goals by assessing 
discussions, pull requests, and issues.
- **Contributors:** People that help add value to a project through coding and 
non-coding methods.
- **Community Members:** People that actively use the project and give feedback 
to the project.


### Anatomy of an Open Source Project

Open source projects come in all shapes and sizes with many sharing the same 
overall structure for collaboration. Projects often contain the following 
documents to better onboard new contributors and state the project's governance. 
Here are common files found across open source projects:

- **README**: The file that explains the project's purpose and how new members 
can use the project.
- **LICENSE**: The license that allows others to contribute under certain 
guidelines.
- **CONTRIBUTING**: The file that explains what areas of the project need 
contributions and the process to contribute.
- **CODE_OF_CONDUCT**: The guidelines of how community member should conduct 
themselves to cultivate a welcoming environment.


## Benefits of Open Source contributions

Contributing to open source adds value to every stakeholder invested in a 
project. Organizations, developers, and the customers they serve all benefit 
from an active open source project.  This section will go more into the 
benefits for us as developers rather than the other stakeholders.  If you like 
to know more about the business case, Tobe Langel does an excellent job stating 
[the benefits of businesses contributing to open source](https://www.youtube.com/watch?v=XleabBLC4Q8).


### Better Source Code

Through contributing to open source, a project's quality improves and makes 
lives better for those that use it. This can be through bug and documentation 
fixes, listing examples, and feature requests. The better quality adds more 
value for stakeholders to invest and use that open source project.


### Learn Best Practices

A beginner will pick up new coding skills by viewing and contributing to open 
source projects. With early software knowledge, simply reading the code brings 
awareness to industry standards that beginners can learn. Developers can see 
examples of good coding techniques in projects and start implementing them in 
their work. This gives beginners a better idea of code etiquette and standards 
that help transform them into more knowledgeable developers.


### Connect with Community 

Being part of an open source community offers the chance to grow, network, and 
mentor/be mentored. You can mutually exchange knowledge that benefits you and 
your connections as developers. It's also rewarding to connect with developers 
of all walks of life that can be your support network throughout your tech 
journey. By connecting, this developer community sees first-hand your skills 
and can bring opportunities straight to you.


### Build Your Reputation

The job hunt is fierce for new developers and open source contributions provide 
a public track record of your ability as a developer. Your ability as an 
employable developer is shown not only through the code skills, but also your 
soft skills. Working on open source is like being part of a giant team. Even if 
your contributions seem small, they demonstrate your ability to work and 
communicate on a team. Putting yourself out there in open source gives you a 
public space to display the skills necessary to get a developer job.


## Ways to Contribute to Open Source

There are many ways to add value to open source projects that you can even new 
developers can do. The following section covers some methods to contribute in 
brief detail. I have compiled a list of extra resources at the end of this 
article that can provide more substantial descriptions and examples of how 
each method is done.


### Submit an Issue

You can use issues to start discussions on bugs, feature requests, documentation 
improvements, and other enhancements.  You can ensure contributors and community 
members are aware of these ideas or problems by submitting an issue. Before 
submitting, it's best to check if someone else has already started that 
conversation. If that issue hasn't been done, you can create one that helps 
maintainers diagnose and solve the problem. 


### Do a Pull Request

You can solve known issues or problems found by yourself using pull requests 
(**PR**). Pull requests are the method you can contribute your own code to an 
open source repository safely without overriding the main branch. By placing 
changes in a PR, the maintainers and other contributors can view the code, make 
comments, and changes necessary before your code is added. When contributing 
through a PR, the process works like this:

- **Fork the Repository**: Make a copy of the repository and clone it to your 
device. Now you will have a version of the code to play with. 
- **Create a Branch**: Make a new branch with a name that references issues you 
are working on or explains the change you want to do.
- **Make the Changes**:  Work on the new additions or improvements in your 
branch and **test** them when possible.
- **Create the Pull Request**: Make sure you highlight the differences in your 
changes so maintainers better know your contribution's impact. Hopefully, the 
maintainers approve of your code and tada! You've contributed code to open 
source 🥳🥳🥳!


### Non-Coding Contributions

Directly coding isn't the only way to help an open source project. Developers 
can contribute just by spreading project awareness and creating opportunities to 
support the project. Here are just some of the many ways you can contribute 
without coding:

- Write content that raises awareness of the project. 
- Help set up meetups or social channels.
- Help create merch or other methods for funding. 
- Sponsor the project. 
- Help organize the project.
- Help with the project's visual design.
- Answer community questions about the project.
- Contribute ideas to [Github Discussions](https://docs.github.com/en/discussions).


## Addition resources

Many developers and organizations involved in the open source space have better 
described the topics in this article in greater detail. Here is a living list 
of resources to supplement your open source journey: (**Note**: This section 
will be updated to provided newly suggested or discovered resources to better 
educate new developers. Feel free to suggest resources that have helped you in 
open source)

- [Open Source Guides](https://opensource.guide/): Website full of guides relating to open source.
- [A Business Case for Open Source – Why You Should Contribute to the Open Source Community](https://www.freecodecamp.org/news/a-business-case-for-open-source/) 
- [Eddie Jaoude](https://www.youtube.com/c/eddiejaoude/about): GitHub Star, Youtuber, and Experienced Open Source Freelancer.
- [How to Get Started in Open Source](https://www.youtube.com/watch?v=GbqSvJs-6W4&list=LL&index=25) by WebDevSimplified.
- [How to Contribute to Open Source Repo](https://github.com/freeCodeCamp/how-to-contribute-to-open-source) by FreeCodeCamp.


## Wrapping Up

After reading this guide, I hope you have enough info to confidently dive into 
the open source world and widely expand your developer knowledge. If you are 
looking for places to start contributing, you can start at [Up For Grabs](https://up-for-grabs.net/#/), 
a website that lists projects with good first issues. Looking at projects you 
use is also a great start to contribute. For me, this article was published here on 
[Coffeeclass.io](https://coffeeclass.io), an open source education platform 
like FreeCodeCamp. The projects available for contributions are endless and 
getting started is just the first step in another rewarding piece of your 
software developer journey.


Learn the basics behind the Open Source software movement and how to contribute to Open Source projects as a beginner developer.

Getting Started in Open Source for Beginners


*This is a living document. I plan to update it often with new problems and solutions.*

<ThreeDots />

Preparing for technical interviews time consuming and difficult. To hold myself accountable, I am uploading all my solutions along with explanations in this article. I hope you enjoy!

## 2114. Maximum Number of Words Found in Sentences

[Question](https://leetcode.com/problems/maximum-number-of-words-found-in-sentences/) on Leetcode.

### Question

A sentence is a list of words that are separated by a single space with no leading or trailing spaces. You are given an array of strings sentences, where each sentences[i] represents a single sentence. Return the maximum number of words that appear in a single sentence.

### Solutions

#### JavaScript

```javascript
var mostWordsFound = function(sentences) {
    let maxCount = sentences[0].split(" ").length
    
    // loop over each sentence
    for (let i = 1; i < sentences.length; i++) {
        let tempCount = sentences[i].split(" ").length
        if (tempCount > maxCount)
            maxCount = tempCount
    }
    
    return maxCount
};
```


#### C#

```csharp
public class Solution {
    public int MostWordsFound(string[] sentences) {
        int maxCount = sentences[0].Split(" ").Length;
            
        foreach(string sentence in sentences.Skip(1)) {
            int tempCount = sentence.Split(" ").Length;
            if (tempCount > maxCount)
                maxCount = tempCount;
        }
        
        return maxCount;
    }
}
```

#### Java
```java
class Solution {
    public int mostWordsFound(String[] sentences) {
        int total = 0;
        
        for(int i = 0; sentences.length > i; i++){
            int tempLength = sentences[i].split(" ").length;
            if(tempLength > total){
                total = tempLength;
            }
        }
        return total;
    }
}
```

### Explanation

We are asked to figure out which sentence has the most words. The sentences are held in an array. The idea is to iterate over each of the sentences and count the number of words. Each word is seperated by a space. An easy way to get this count is to use `split()`. After we split by spaces, we can use `length` to get the count.

Each time we get the count, we should compare it to our previous count. Take the higher count. Initially, we will set the `maxCount` to the first sentence. We can get this value like such: 

```javascript
let maxCount = sentences[0].split(" ").length
```

Then, we start our for loop at `i = 1`.

### Runtime

The runtime for this problem would be `O(n)` where n is the number of sentences.

### Submission Image

![Leet Code Question 2114 JavaScript](/content/articles/leet-code-benjamin-carlson/2114-javascript.png)
![Leet Code Question 2114 C#](/content/articles/leet-code-benjamin-carlson/2114-csharp.png)
![Leet Code Question 2114 Java](/content/articles/leet-code-benjamin-carlson/2114-java.png)

Ben's Leetcode solutions. This is a living document. Check back daily for new solutions to top leet code questions in various languages.

Ben's Leet Code Solutions


## What's A Progressive Web App?

Imagine this... you have a website that is complex. It has a frontend, backend, data, and lots of other features.

You want to make an app for your website. Traditionally, you would have to make 2 apps - one for Android and one for IOS. Another more modern option would be to use a cross platform framework such as Flutter or React Native. This still involves a lot of work!

There has to be another way. Luckily for us, there is (kind of). A Progressive Web App, or PWA, is a website that looks and behaves like a mobile app. PWA's even have splash screens!

The user also doesn't have to download your app from the app or play store and your app is always updated whenvever you update your website.

## PWA Demo

[Here](https://next-pwa-rosy.vercel.app) is a simple site I deployed with the `next-pwa` package. If you open it in Google Chrome or on your phone, you will see a button that says "Install App".

## `next-pwa` Package

Creating a PWA can be difficult. However, with Next.js we can easily create one using the [`next-pwa` package](https://www.npmjs.com/package/next-pwa). Under the hook this package uses [Workbox](https://developers.google.com/web/tools/workbox/). Here are some of the features you get from using `next-pwa`:

### Features

- 0️⃣ Zero config for registering and generating service worker
- ✨ Optimized precache and runtime cache
- 💯 Maximize lighthouse score
- 🎈 Easy to understand examples
- 📴 Completely offline support with fallbacks example 🆕
- 📦 Use workbox and workbox-window v6
- 🍪 Work with cookies out of the box
- 🔉 Default range requests for audios and videos
- ☕ No custom server needed for Next.js 9+ example
- 🔧 Handle PWA lifecycle events opt-in example
- 📐 Custom worker to run extra code with code splitting and typescript support example
- 📜 Public environment variables available in custom worker as usual
- 🐞 Debug service worker with confidence in development mode without caching
- 🌏 Internationalization (a.k.a I18N) with next-i18next example
- 🛠 Configurable by the same workbox configuration options for GenerateSW and InjectManifest
- 🚀 Spin up a GitPod and try out examples in rocket speed
- ⚡ Support blitz.js (simply add to blitz.config.js)
- 🔩 (Experimental) precaching .module.js when next.config.js has experimental.modern set to true

## `next-pwa` Installation

First, Add the `next-pwa` package. I'll be using `yarn`.

```bash
yarn add next-pwa
```

## `manifest.json`

We need to create a `manifest.json` file to tell `next-pwa` some basic info about our app. We can use [this website](https://www.simicart.com/manifest-generator.html/) to help us out.

Go ahead and fill out all the fields that are required and the optional fiels if you'd like. For the display option, be sure to select standalone.

When you are done, download it and move all the files into your `public` folder. Rename the `manifest.webmanifest` file to `manifest.json`.

## `_document.js`

Add the following code to `_document.js` inside of the `Head` tag. If you don't have this file, create it.

```javascript:_document.js
<Head>
  <link rel="manifest" href="/manifest.json" />
  <link rel="apple-touch-icon" href="/icon.png"></link>
  {/* other stuff here */}
</Head>
```

## `next.config.js`

Add the following to `next.config.js`:

```javascript:next.config.js
const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
    disable: process.env.NODE_ENV === "development",
  },
});
```

These options set up the `next-pwa` package to work with our project. If you run yarn dev with the `disable` option commented out, you will see some generated files inside of the `public` folder. We don't need these in dev so that is the reason we have added that line.

Going one step further, we can add the following to `.gitignore` so the PWA files will not be tracked by git.

```javascript:.gitignore
# PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
```

## Deploying

Go ahead and deploy your website. Then navigate to chrome and at the top you should see a button to install the PWA.

## Conclusion

Congrats! You have just created a Progressive Web App!

To recap, in this article we:

- Added the `next-pwa` package
- Added the `manifest.json` file
- Added the `_document.js` file
- Added the `next.config.js` file
- Added the `.gitignore` file
- Deployed the website


Turn your Next.js website into a Progressive Web App allowing offline support, push notifications and other great features using the next-pwa package.

Next.js Progressive Web App


## Introduction

As 2021 comes to an end, we are going to take a look at the top 5 coffeeclass.io articles of 2021 by page views. We'll start with the least popular and work our way to the number one most popular article of 2021!

<Step number="5" title="Connect Firebase To Next.js" />

In our number 5 spot, we have "Connect Firebase To Next.js". In this article, we connect [Firebase](https://firebase.google.com) to [Next.js](https://nextjs.org) and also add authentication, cloud firestore, realtime database, and storage. This is a great artcile to get you up and running with Next.js and Firebase fast.

<FeaturedPost
  title="Connect Firebase To Next.js"
  url="/articles/add-firebase-to-nextjs"
  date="April 15, 2021"
  views="657"
>
  Seamlessly add Firebase to your Next.js project.
</FeaturedPost>

<Step number="4" title="Pure CSS Float On Hover Effect" />

Next up, we have `css`! It is the only article tagged [css](/tags/css) and [css-animation](/tags/css-animation) on coffeeclass.io but that didn't stop it from taking the number 4 spot!

<FeaturedPost
  title="Pure CSS Float On Hover Effect"
  url="/articles/make-div-float-up-hover-css"
  date="August 23, 2021"
  views="818"
>
  A simple and fun css margin animation.
</FeaturedPost>

<Step number="3" title="useEffect() Hook in Next.JS - React Hooks" />

In our number 3 spot, we have hooks! Learn how to easily use the `useEffect` hook in React.js in this article.

<FeaturedPost
  title="useEffect() Hook in Next.JS - React Hooks"
  url="/articles/using-react-useeffect"
  date="August 09, 2021"
  views="1241"
>
  Learn what useEffect is learn how to use useEffect in Next.JS.
</FeaturedPost>

<Step number="2" title="Chakra-UI Responsive Navigation Bar" />

Chakra-UI articles also did well this year. One in particular was "Chakra-UI Responsive Navigation Bar" which took the number 2 spot. Learn how to create a responsive navigation bar using Chakra-UI.

<FeaturedPost
  title="Chakra-UI Responsive Navigation Bar"
  url="/articles/create-responsive-navbar-using-chakra-ui"
  date="April 25, 2021"
  views="2153"
>
  Learn how to create a responsive navigation bar using Chakra-UI.
</FeaturedPost>

<Step number="1" title="How To Use The map() Function In Dart" />

This brings us to our most popular post of 2021, "How To Use The map() Function In Dart". The idea for this article came to me when I ran into an issue in one of my Flutter projects so I decided to write about it. Aparently many other ran into the same issue as well. The article goes over how to use the `map` function in dart and compares it to the `map` function in JavaScript.

<FeaturedPost
  title="How To Use The map() Function In Dart"
  url="/articles/map-function-with-dart-lists"
  date="April 28, 2021"
  views="2402"
>
  Using .map() in dart doesn't have to be complicated.
</FeaturedPost>

## Conclusion

If you already read all the above posts, we have many more [articles](/articles)! This article wraps 2021 for coffeeclass.io. Next year we plan to ramp up the number of articles we publish so be sure to check back soon!


Take a look at the top 5 coffeeclass.io articles of 2021 and see what others are interested in.

Top 5 coffeeclass.io Articles of 2021


## Hooks Overview

React Hooks were introducted React 16.8. They allow you to create stateful components without writing a class. For more info, check out [an article](using-react-useeffect) we wrote on the `useEffect` hook.

## What is `useState` Hook?

The `useState` hook lets you manage state throughout your application. Let's take a look at an example.

### What does calling useState do?

Simply put, a state variable persists the state throughout the lifecycle of your application instead of dissapearing when the function is exited.

> From the React Docs: It declares a “state variable”. Our variable is called count but we could call it anything else, like banana. This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class. Normally, variables “disappear” when the function exits but state variables are preserved by React.

### `useState` Hook Example

```javascript
import React, { useState } from 'react'

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}
```

The example above is from the [React docs](https://reactjs.org/docs/hooks-state.html). As you can see, we are storing the count inside a state variable.

We can access the count from the `count` variable and we can change the count using the `setCount` function.

> You cannot change a useState variable directly (i.e. `count = 7`) because it is read only. You must use the `setCount` function to change the value.

### More Complex Example

You can also store more than a simple number in a state variable. Let's look at some examples.

```javascript
const [count, setCount] = useState(0);
const [name, setName] = useState('Max');
const [items, setItems] = useState([1, 2, 3]);
const [bool, setBool] = useState(true);
const [obj, setObj] = useState({ a: 1, b: 2 });
const [null, setNull] = useState(null);
```

As you can see, we can store ints, strings, arrays, booleans, objects, nulls, custom objects, and more inside of a `useState` variable.

## Uses of `useState`

A cool use of `useState` is to dynamically change a `css` value. Maybe as the user scrolls, we want to change the `font-size` of the text.

```javascript
const [fontSize, setFontSize] = useState('10px')
const handleScroll = () => {
    setFontSize(window.scrollY + "px")
}

...

<p style={{ fontSize: fontSize }}>
    Hello World
</p>
```

The `p` tag above will increase in size as the user scrolls down the page!

Enjoyed this article on useState? Explore more [React hooks](/tags/react-hooks)!


Learn what useState is and learn how to use useState in Next JS by coding some examples.

useState() Hook in Next JS - React Hooks


## Introduction

C can be a very difficut language to learn. From compiling it, to accepting user input, every aspect has a significant learning curve. In this article, we will build a C converter program which takes in a number between 0 and 100 and returns a letter grade.

## Creating Our File

Create a file named `converter.c`.

## Imports

To import external libraries, we use the `#include` directive. In this program, we will use the `stdio.h` library. This library contains many basic functions, such as `printf`, `scanf`, and `getchar`.

```c:converter.c
#include <stdio.h>
```

## Main

We will declare our main program with a return type of int. The function will not take in any args so we will use `void`.

```c:converter.c
int main(void)
{
    // code will go here!

    return 0;
}
```

Note the line `return 0;` at the end of the function. This means the function has finished running successfully. If we changed this to `return 1;`, that would mean the function would have failed.

## Accepting User Input

Now that we have our function, we can begin by getting an `int` from the user. We will achieve this in two steps.

1. Declare a variable to hold the user's input.
2. Use the `scanf` function to get the user's input.

```c:converter.c
int main(void)
{
    int grade; // local variable of type int to store numerical grade

    printf("Enter a numeric grade: "); // prompt user for input
    scanf("%d", &grade); // store input in local variable grade

    return 0;
}
```

We use `%d` to tell the `scanf` function to read in an `int` and store it in the variable `grade`. We use `&grade` to tell the function to store the value of `grade` in the memory address of `grade`.

## If/Else Statements

Lastly, we will use an `if/else` statement to determine the letter grade.

```c:converter.c
if (grade > 100 || grade < 0) printf("Invalid grade.\n");
    else if (grade >= 90) printf("A\n");
    else if (grade >= 80) printf("B\n");
    else if (grade >= 70) printf("C\n");
    else if (grade >= 60) printf("D\n");
    else printf("F\n"); // end if else statement
```

> `\n` is an escape code that tells the compiler to print a new line!

## Complete Program

All together the code looks like this:

```c:converter.c
#include <stdio.h>

int main(void)
{
    int grade; // local variable of type int to store numerical grade

    printf("Enter a numeric grade: "); // prompt user for input
    scanf("%d", &grade); // store input in local variable grade

    // start if else statement to determine letter grade
    if (grade > 100 || grade < 0) printf("Invalid grade.\n");
    else if (grade >= 90) printf("A\n");
    else if (grade >= 80) printf("B\n");
    else if (grade >= 70) printf("C\n");
    else if (grade >= 60) printf("D\n");
    else printf("F\n"); // end if else statement

    return 0;
}
```

## Compiling

To compile our program, we will use the `gcc` command.

```bash
gcc -o converter converter.c
```

This will compile our program and allow us to run it by typing `./converter`. We are using the `-o` flag to tell the compiler to output the executable to the file `converter` instead of the default `a.out`.

## Running

To run our program, we will use the `./converter` command.

```bash
./converter
```

If you run the program and pass in a grade of 87, you should see the following output:

```bash
Enter a numeric grade: 87
B
```

## Conclusion

In this article, we created a C program which takes in a numerical grade and returns the letter grade. We covered some basic C concepts such as variables, if/else statements, and functions. We also used the `gcc` command to compile our program. Happy coding!


Learn C programming by creating a simple grade converter program using if/else, scanf, and local variables.

Create A Grade Converter C Program


## Introduction

As a developer, I find myself using the terminal all the time. In this article, I'll list the top 10 commands I use the most for speed and productivity, along with some examples.

<Step number="1" title="ls" />

The `ls` command is used to list the contents of a directory. It is a very basic command but it is a lot quicker than using the Finder to list the contents of a directory.

<Step number="2" title="cd" />

Next we'll look at the `cd` command. This command is used to change the current working directory. Again, it is a very basic command but it is a lot quicker than using the Finder to change the current working directory.

<Step number="3" title="pwd" />

`pwd` is used to print the current working directory. This command is very useful when you want to know where you are in a directory structure.

<Step number="4" title="cat" />

Getting into the more advanced commands is the `cat` command. This command is used to read the contents of a file without opening it. Here is an example:

```bash
cat README.md
```

Output:
```bash
# This is a markdown file
```

In this example, we are assuming that `README.md` has the contents `# This is a markdown file`.

<Step number="5" title="head" />

The `head` command is used to print the first few lines of a file. Here is an example:

```bash
head README.md
```

<Step number="6" title="tail" />

Similarly to `head`, the `tail` command is used to print the last few lines of a file. Here is an example:

```bash
tail README.md
```

<Step number="7" title="grep" />

Next is the `grep` command. This command is used to search for a pattern in a file. Here is an example:

```bash
grep -i "markdown" README.md
```

### Explanation

In this example, we are searching for the word `markdown` in the file `README.md`. We are also searching for the word `markdown` ignoring case, which is the `-i` flag.

<Step number="8" title="mkdir" />

The `mkdir` command is used to create a new directory. Here is an example:

```bash
mkdir new-directory
```

<Step number="9" title="touch" />

The `touch` command is used to create a new file. Here is an example:

```bash
touch newfile.txt
```

<Step number="10" title="rm" />

The last command is the `rm` command. This command is used to delete a file or directory. Here is an example:

```bash
rm newfile.txt
```

## Bonus 11th Tip!

As a bonus, you can use the `&&` operator to run multiple commands in one line. Here is an example:

```bash
mkdir new-directory && cd new-directory && touch newfile.txt
```

You can see we can make a new folder, change to the new folder, and create a new file all in one line!

## Conclusion

That's it for this article! I hope you find this article useful and that you can use it to speed up your development process. Here is a lsit of all the mac terminal commands we went over:

1. `ls`
2. `cd`
3. `pwd`
4. `cat`
5. `head`
6. `tail`
7. `grep`
8. `mkdir`
9. `touch`
10. `rm`
11. `&&`


10 Mac terminal commands that will increase your developer speed and productivity.

Top 10 Mac Terminal Commands for Speed and Productivity


## Introduction

Adding search to a website is a great way to increase page views and conversions. With the help of [Algolia](https://www.algolia.com), you can easily integrate search into your Next.js application. In this article, we will walk through the process of adding Algolia Search to Next.js.

## What is Algolia?

Before we implement InstantSearch into our project, let's take a quick look at what Algolia is, and why you should (or shouldn't) use it. When I first heard of Algolia, I thought, "A company built around searhcing? Who would use that!". However, as I did some more research, I found that Algolia offers more than a simple search api. Algolia's two main services are [Algolia Search](https://www.algolia.com/products/search-and-discovery/hosted-search-api/) and [Algolia Recommend](https://www.algolia.com/products/recommendations/). Let's take a brief look at each of them.

### Algolia Search

Algolia Search is their first main product. It allows you to "deliver relevant content to users in milliseconds with our powerful search API" - algolia.com.

Inside of Algolia Search, they offer sub services to help you integrate their search api. Some of these services include Crawler, InstantSearch, and more! In this article, we will be using Algolia's [InstantSearch](https://www.algolia.com/products/search-and-discovery/ui-component-libraries/) service.

> Deliver relevant content to users in milliseconds with our powerful search API

#### InstantSearch

InstantSearch is "a set of UI components that help developers design the perfect Search & Discovery experience for your business, for any device." - algolia.com. We will be custimizing the InstantSearch components to our needs. InstantSearch also provides the following features:

- Search as you type
- Sorting
- Pagination
- Federated Search
- And more!

### Algolia Recommend

With Algolia Recommend, you can build a "unique AI-powered product recommendation engine for personalized ecommerce experiences using a simple and flexible machine learning api" - algolia.com. Implementing Recommend is usually the next step after integrating Algolia Search. It can be very powerful and increase conversions. We'll save that for another article though.

> Build a unique AI-powered product recommendation engine for personalized ecommerce experiences

If you want to learn more about Algolia Search, Algolia Recommend, or any of their other products, you can visit the [Algolia website](https://www.algolia.com/).

## I Have a Small Project - Why Should I use Algolia?

This was one of the questions I had when I first heard of Algolia. I figured if a site has a couple hundred articles, it would be easy to use a simple `useState` hook and implement search yourself. However, even for a small project, I found that Algolia outperforms other solutions.

### It's Free!

... up to 10k queries per month. For a small project, you are unlikely to hit this limit.

### Quick to Get Started

You can get up and running with Algolia's InstantSearch in 15 to 30 minutes.

### Automate Search Results

You can create a script that will automatically put the articles into the search. This way, you can have a search that is always up to date.

### More Than Title and Description

You can allow users to search for more than just the title or description. You can add more fields such as tags, author, and even headings from the article! Doing this with `useState` would be very difficult and slow.

### Searches Don't Need Exact Spelling

If my article title is "Top Ten Pros of Next.js" and you search "Top Ten Pros of nextjx" or "Top 10 Pros of Next.js" a `useState` hook would not show that article but Algolia would. Note the spelling of 10 vs ten and nextjs vs next.js.

### Searches can be Ranked

You can make popular posts appear higher in the search results. This is a great way to help users find the most relevant articles that they are more likely to enjoy.

### Analytics

You can see what your users are searching for and which results have no search results.

After hearing these pros, if you want to use Algolia continue reading!

## Getting Started

The first thing you'll want to do is set up a new Next.js project if you don't have one already. Next.js is a JavaScript framework built on top of React. If you are using another React based framework, you should be able to follow along just fine. If you are using a non React framework, this will still work but you may need to modify some code.

Here are the steps we will be taking to implement InstantSearch into our Next.js project:

1. Create an Algolia application
2. Create an Algolia search index
3. Add articles to this index via code
4. Add the UI

## Create an Algolia Application

First, go ahead and create an Algolia account if you do not already have one. Then, create a new application. You can do this by clicking the dropdown in the upper left hand corner of the screen and then selecting "+ create application". Go ahead an give the application a name if you would like.

Next, be sure to change the subscription from pay as you go to free! You can always upgrade later if you need higher limits.

![Create a new algolia application](/content/articles/add-algolia-search-to-nextjs-website/create-new-algolia-application.png)

Next, select a region for your datacenter. This is where your data will be hosted. Ideally, you should choose the data center which is closest to your users. You can always change this later.

Finally, agree to the terms and create the application! If you have selected the free tier, like I did, you will not be charged once you hit 10k requests. Your account will simply be suspended until you upgrade.

![Order sumary and limits](/content/articles/add-algolia-search-to-nextjs-website/create-application.png)

After you create the application, click no for the tour. You will then be brought to your application overview.

![Algolia Dashboard](/content/articles/add-algolia-search-to-nextjs-website/dashboard.png)

## Create a Search Index

Search records are stored inside of an index. Scroll down to the bottom of the overview page and click "See all" right under the Top Indices box. From this page we can create a new index. Enter an index name and click create.

![Create a new Index](/content/articles/add-algolia-search-to-nextjs-website/create-index.png)

We can now add records to the Index!

We can add records in 3 ways:

1. Upload a file
2. Use the API
3. Add records manually

We will be using the API for this article becuse it will allow us to add additional records with ease.

## Add Records Using the API

Before we leave the algolia site, go ahead and make note of the three api variables we will need. Open up settings (top right corner). We will need the following keys:

- Application ID, we'll call this NEXT_PUBLIC_ALGOLIA_APP_ID
- Search-Only API Key, we'll call this NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY
- Admin API Key, we'll call this ALGOLIA_SEARCH_ADMIN_KEY

Go ahead and open up your Next.js app inside of the IDE of your choice. Create a file `.env` and paste the three api keys inside.

```bash:.env
NEXT_PUBLIC_ALGOLIA_APP_ID=xxx
NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=xxx
ALGOLIA_SEARCH_ADMIN_KEY=xxx
```

Replace `xxx` with your actual values. Be sure to restart your app for these changes to take effect.

Create a file named `build-algolia-search.js`. Inside of here is where we will dynamically and programmatically add the search records.

Import `dotenv` and `algoliasearch`. You will need to install these if you do not already have them.

```bash
yarn add dotenv algoliasearch
```

```javascript:build-algolia-search.js
const dotenv = require("dotenv");
const algoliasearch = require("algoliasearch/lite");
```

Next, let's test for the two api keys we will be using and make sure they are defined.

```javascript:build-algolia-search.js
const dotenv = require("dotenv");
const algoliasearch = require("algoliasearch/lite");

try {
    dotenv.config();

    if (!process.env.NEXT_PUBLIC_ALGOLIA_APP_ID) {
        throw new Error("NEXT_PUBLIC_ALGOLIA_APP_ID is not defined");
    }

    if (!process.env.ALGOLIA_SEARCH_ADMIN_KEY) {
        throw new Error("ALGOLIA_SEARCH_ADMIN_KEY is not defined");
    }
} catch (error) {
    console.error(error);
    process.exit(1);
}

console.log("It works!")
```

You can now run this script by using `node ./src/scripts/build-algolia-search.js`. I am using `./src/scripts` because I have the following folder structure:

```bash
├── src
│   ├── pages
│   ├── components
│   ├── ...
│   ├── scripts
│   │   └── build-algolia-search.js
├── package.json
├── ...
├── README.md
├── package.json
└── .env
```

If your script file is in a different location, update the command accordingly. If this script prints out "It works!", you have everything configured correctly so far!

### Query Your Posts

The next step is to grab all of your posts(or whatever data you want to be indexed for search). This will be different depending on where they are stored. For me, I use `.mdx` files stored locally.

```javascript:build-algolia-search.js
// imports and try/catch loop here

const CONTENT_PATH = path.join(process.cwd(), 'content/articles')
const contentFilePaths = fs
    .readdirSync(CONTENT_PATH)
    // Only include md(x) files
    .filter((path) => /\.mdx?$/.test(path))

async function getAllBlogPosts() {
    const articles = contentFilePaths.map((filePath) => {
        const source = fs.readFileSync(path.join(CONTENT_PATH, filePath))
        const { content, data } = matter(source)

        return {
            content, // this is the .mdx content
            data, // this is the frontmatter
            filePath, // this is the file path
        }
    })

    return articles
}
```

Again, getting your posts will most likely be different depending on where they are stored. However you fetch them, just make sure the `getAllBlogPosts` function returns them as an object.

### Transform The Data to Algolia Format

Next, we need to transform the data to a format that Algolia can understand. The format we need is JSON format. Here is an example from Algolia themselves:

```json
[
  {
    "firstname": "Jimmie",
    "lastname": "Barninger",
    "zip_code": 12345
  },
  {
    "firstname": "John",
    "lastname": "Doe",
    "zip_code": null
  }
]
```

Add the following function to our script under everything we have so far:

```javascript:build-algolia-search.js
function transformPostsToSearchObjects(articles) {
    const transformed = articles.map(article => {
        return {
            objectID: article.data.title,
            title: article.data.title,
            description: article.data.description,
            slug: article.filePath,
            tagsCollection: { tags: article.data.tags }, // we can nest objects in Algolia!
            date: article.data.publishedAt,
            type: 'article',
            // ...
        };
    });

    return transformed;
}
```

The above function takes in an article and extracts data we want to index. The data might be different depending on how it is stored. For example, `article.data.title` might not work. I suggest console logging the `getAllBlogPosts` function to see what your data looks like.

A couple of things to note:

- None of the fields above are required
- You can nest objects like you see in the example above with `tagsCollection`

Now, let's actually call these functions and add the data to the index!

```javascript:build-algolia-search.js
// everything we did so far is here

(async function () {
    // initialize environment variables
    dotenv.config();

    try {
        const articles = await getAllBlogPosts();
        const transformed = transformPostsToSearchObjects(articles);

        // initialize the client with your environment variables
        const client = algoliasearch(
            process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
            process.env.ALGOLIA_SEARCH_ADMIN_KEY,
        );

        // initialize the index with your index name
        const index = client.initIndex("dev_coffeeclass.io");

        // add the data to the index
        const algoliaResponse = await index.saveObjects(transformed);

        console.log(
            `Successfully added ${algoliaResponse.objectIDs.length} records to Algolia search! Object IDs:\n${algoliaResponse.objectIDs.join(
                "\n",
            )}`,
        );
    }
    catch (err) {
        console.error(err);
    }
})();
```

When you run this script, you should see the objectIDs printed out. If you navigate to your Algolia index, you should see your data.

![Our index in the Algolia Dashboard](/content/articles/add-algolia-search-to-nextjs-website/index-data.png)

### Add Script to package.json

Because we have this as a script, we can add it to the `package.json` file. This will run every time you run `yarn build` or deploy your app. This way, whenever you add new posts, they will automatically be added to the index without any work from you.

```json:package.json
// ...
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "node ./src/scripts/build-algolia-search.js", // this is our script
    "start": "next start"
  },
// ...
```

## Add the UI

Now that the data is indexed, we can add the UI and allow users to search. Add the following package:

```bash
yarn add react-instantsearch-dom
```

Inside of your app, preferably inside a `components` folder, add the following three files, `Search.js`, `Hits.js`, and `SearchBox.js`.

> Hits are what Algolia calls the "results" of your search.

Inside of `Search.js`, we will add the `InstantSearch` UI from Algolia, `Hit.js` will be the results, and `SearchBox.js` will be the search box.

Let's first add the following inside of `Search.js`:

```javascript:Search.js
// import algoliasearch and InstantSearch
import algoliasearch from "algoliasearch/lite"
import { InstantSearch } from "react-instantsearch-dom"

// Initialize the Algolia client
const searchClient = algoliasearch(
    process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
    process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY,
)

return (
        <>
            <InstantSearch
                searchClient={searchClient} // this is the Algolia client
                indexName="dev_coffeeclass.io" // this is your index name
            >
                <SearchBox />
                <Hits />
            </InstantSearch>
        </>
    )
}
```

Above, we are initializing our client and returning a basic UI which uses InstantSearch from Algolia. Let's create the SearchBox and Hits components.

```javascript:SearchBox.js
// import connectSearchBox
import { connectSearchBox } from "react-instantsearch-dom"

function SearchBox({ refine }) {
    return (
        <>
            <input
                id="algolia_search"
                type="search"
                placeholder="Search for articles!"
                onChange={(e) => refine(e.currentTarget.value)}
            />
        </>
    )
}

export default connectSearchBox(SearchBox)
```

The above code is a simple search box. Now, lets create the Hits component so we can display the results.

```javascript:Hits.js
import { connectStateResults } from "react-instantsearch-dom"

function Hits({ searchState, searchResults }) {
    const validQuery = searchState.query?.length >= 3 // 3 is the minimum query length

    return (
        <>
            {searchResults?.hits.length === 0 && validQuery && (
                <p>No results found!</p>
            )}

            {searchResults?.hits.length > 0 && validQuery && (
                <>
                    {searchResults.hits.map((hit, index) => (
                        <div tabIndex={index} key={hit.objectID}>
                            <p>{hit.title}</p>
                        </div>
                    ))}
                </>
            )}
        </>
}

export default connectStateResults(Hits)
```

Now, if you search in the box, you should see the results!

## Conclusion

In this article we learned what Algolia is, looked at some pros, and added InstantSearch to a Next.js website. If you enjoyed this article, check out my [YouTube channel](https://youtube.com/benjamincarlson) where I upload lots of programming tutorials!


Seamlessly integrate Algolia's InstantSearch into your Next.js application and watch the searches roll in!

Add Algolia's InstantSearch to Next.js - A Quickstart


## Introduction

If you have worked with Next.js, you have without a doubt come across the `next/image` component. Introduced in `v10.0.0`, `next/image` is an imporovement over the humble `<img />` HTML tag.

Features of `next/image` include:

- Image lazy loading
- A custom loader
- Quality control
- Placeholder image
- and more!

The `NextImage` component makes the lives of the website visiter much better, however, at times it can be hard to work with and make the lives of the developer harder!

## next/image Not Filling Parent Div

One of the most common issues with `next/image` is that it doesn't fill the parent div. Let's take a look at the following example:

```javascript
import NextImage from 'next/image'

<div height="500px" width="500px">
    <NextImage src="https://picsum.photos/id/1/500/500" layout="fill" />
</div>
```

Note: The code above is "pseudo code". It will not run. `height` and `width` cannot be declared on `div` like I did in the example above.

If I aked you what would happen, you would probably say that the image would render with a height of 500px and a width of 500px. However, this is not the case! The image will have the height and width of itself! If the raw image is 230px by 570px, those will be the dimensions.

## The Solution

I have seen this question asked many times on sites like stackoverflow. Some of the answers aren't even helpful!

- https://stackoverflow.com/questions/67421778/next-js-image-layout-fill-is-broken
- https://github.com/vercel/next.js/discussions/18739
- https://dev.to/tanahmed/next-image-make-image-fill-available-space-272o

The simple solution is to add `position: relative` to the parent div!

```javascript
import NextImage from 'next/image'

<div height="500px" width="500px" position="relative">
    <NextImage src="https://picsum.photos/id/1/500/500" layout="fill" />
</div>
```

Now, the image will take up the width of the parent div!

## Explanation

So why does this work? The default position of a html div tag is [`static`](https://stackoverflow.com/questions/16316834/what-is-the-default-value-of-position-attribute-of-a-div).

> You can even check for yourself and check in Chrome by doing: Click On the Element --> Computed --> Filter --> Show All. [Thanks SO](https://stackoverflow.com/questions/16316834/what-is-the-default-value-of-position-attribute-of-a-div)

Because of this, the image will not fill the parent div.


If next/image does not fill the parent div, you need to use position relative.

Next/Image Doesn't Fill Parent Div!


## Introduction

[Chakra UI](https://chakra-ui.com) is a component based React library that allows us to rapidly build beautiful, responsive, and accessible user interfaces. One of the components it gives us, is the `Menu` component. Out of the box, to expand the menu, you need to click on the `MenuButton`. In this snippet, I'll show you how to use the `useDisclosure` hook to create a dropdown menu on hover.

## useDisclosure

### Definition

[useDisclosure](https://chakra-ui.com/docs/hooks/use-disclosure) is defined in the Chakra UI documentation as such:

> `useDisclosure` is a custom hook used to help handle common open, close, or toggle scenarios. It can be used to control feedback component such as `Modal`, `AlertDialog`, `Drawer`, etc.

### Import

We can import the `useDisclosure` hook from `@chakra-ui/react`.

```javascript
import { useDisclosure } from '@chakra-ui/react'
```

### Usage

Here is how you would use the `useDisclosure` hook to create a dropdown menu on hover. In the next section, we'll take a look at each line and explain what is happening.

```javascript:Navbar.js
import {
    useDisclosure,
    MenuItem,
    Menu,
    MenuButton,
    MenuList,
} from "@chakra-ui/react"
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'

export default function Navbar() {
    const { isOpen, onOpen, onClose } = useDisclosure()
    return (
        <Menu isOpen={isOpen}>
            <MenuButton
                variant="ghost"
                mx={1}
                py={[1, 2, 2]}
                px={4}
                borderRadius={5}
                _hover={{ bg: useColorModeValue("gray.100", "gray.700") }}
                aria-label="Courses"
                fontWeight="normal"
                onMouseEnter={onOpen}
                onMouseLeave={onClose}
            >
                More {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
            </MenuButton>
            <MenuList onMouseEnter={onOpen} onMouseLeave={onClose}>
                <MenuItem>Menu Item 1</MenuItem>
                <MenuItem>Menu Item 2</MenuItem>
                <MenuItem>Menu Item 3</MenuItem>
            </MenuList>
        </Menu>
    )
}
```

## Explanation

Let's take a more detailed look at the code. First, we are importing the `useDisclosure` hook and the `Menu` components. We are also importing 2 Chakra UI icons to make the dropdown look a bit nicer.

We are using the `useDisclosure` hook like such:

```javascript
const { isOpen, onOpen, onClose } = useDisclosure()
```

We can then use `isOpen`, `onOpen`, and `onClose` to control the state of the dropdown.

- `isOpen` is a boolean that tells us if the dropdown is open or not.
- `onOpen` is a callback function to set a truthy value for the isOpen parameter.
- `onClose` is a callback function to set a falsy value for the isOpen parameter.

### `onMouseEnter` and `onMouseLeave`

At this point, the Menu dropdown works, but there is still no hover effect! To add this we can use `onMouseEnter` and `onMouseLeave` to control the state of the dropdown.

When we use it like such:

```javascript
onMouseEnter = { onOpen }
onMouseLeave = { onClose }
```

We are saying when a user hovers over that Component, set the `isOpen` parameter to `true`. When they leave the Component, set the `isOpen` parameter to `false`. Simple!

> The [mouseenter](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event) event is fired at an Element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.

> The [mouseleave](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event) event is fired at an Element when the cursor of a pointing device (usually a mouse) is moved out of it.

## Conclusion

In this snippet you learned how to use the `useDisclosure` hook paired with `onMouseEnter` and `onMouseLeave` to create a dropdown menu on hover.


How to use Chakra UI's useDisclosure hook to create a dropdown menu on hover.

Chakra UI Menu Dropdown on Hover

## Update December 2021:

This article is still up to date and works, however a much, much easier way to add a dynamic sitemap in Next.js is using the [next-sitemap](https://www.npmjs.com/package/next-sitemap) package. [This website](https://www.coffeeclass.io) now uses next-sitemap! [As you can see](https://github.com/carlson-technologies/coffeeclass.io/blob/main/next-sitemap.js) it is super easy to set up.

## Introduction

A sitemap is how you tell Google what pages are in your website. This helps them get ranked higher. Take a look at the performance chart of this website. 

![Performance click chart in Google Search Console for coffeeclass.io](/content/articles/generate-dynamic-sitemap/performance.png)

I added the sitemap on 7/20/21 and you can see the clicks spiked right after.

In this snippet, we'll write code to generate a dynamic sitemap for a React (specifically Next.js) based website.

<Step title="Install Dependencies" number="1" />

First, install these 3 dependencies:

```bash
yarn add fs globby prettier
```

We will be using `fs` to write to our file system, `globby` to read and sort the files, and `prettier` to format our outputted `sitemap.xml`.

<Step title="Write Code!" number="2" />

Create a file named `generate-sitemap.js`. Inside of here, require all 3 of the packages we just imported.

```bash
const fs = require('fs');
const globby = require('globby');
const prettier = require('prettier');
```

Next, define our `async` function.

```jsx
(async () => {
	// we'll add code in here!
})();
```

<Step title="Use `globby` to find files and directories using glob patterns" number="3" />

We'll initialize our prettier variable named `prettierConfig` and use `globby` to find files and directories using glob patterns. In this example, I have `js` pages inside of a `pages` folder and `mdx` files inside of a  `content` folder. We can also exclude routes using `!`.

```jsx
(async () => {
	const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
    const pages = await globby([
        'pages/*.js',
        'content/**/*.mdx',
        '!pages/_*.js',
        '!pages/api'
    ]);
})();
```

<Step title="Create our `sitemap` variable" number="4" />

Declare a variable `sitemap` which will be our sitemap content. Go ahead and add any urls that were not able to be fetched with `globby`. Below that, map over the `pages` variable, remove the extensions, and add them to the sitemap.

```jsx
(async () => {
	const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
    const pages = await globby([
        'pages/*.js',
        'content/**/*.mdx',
        '!pages/_*.js',
        '!pages/api'
    ]);

const sitemap = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            
            <url>
                <loc>https://www.example.com</loc>
            </url>
					${pages
            .map((page) => {
                const path = page
                    .replace('pages', '')
                    .replace('content', '')
                    .replace('.js', '')
                    .replace('.mdx', '');
                const route = path === '/index' ? '' : path;
                if (path === '/404') {
                    return;
                }
                return `
                        <url>
                            <loc>${`https://www.example.com${route}`}</loc>
                        </url>
                    `;
            })
            .join('')}
        </urlset>
    `;
})();
```

<Step title="Use `fs` To Write To Public Folder" number="5" />

Finally, format the sitemap using prettier and write the sitemap to our `public` directory using `fs`.

```jsx
const formatted = prettier.format(sitemap, {
        ...prettierConfig,
        parser: 'html'
    });

    // eslint-disable-next-line no-sync
    fs.writeFileSync('public/sitemap.xml', formatted);
```

Your sitemap is now available on the route `/sitemap.xml`!

## Full Code

```jsx
(async () => {
	const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
    const pages = await globby([
        'pages/*.js',
        'content/**/*.mdx',
        '!pages/_*.js',
        '!pages/api'
    ]);

const sitemap = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            
            <url>
                <loc>https://www.example.com</loc>
            </url>
					${pages
            .map((page) => {
                const path = page
                    .replace('pages', '')
                    .replace('content', '')
                    .replace('.js', '')
                    .replace('.mdx', '');
                const route = path === '/index' ? '' : path;
                if (path === '/404') {
                    return;
                }
                return `
                        <url>
                            <loc>${`https://www.example.com${route}`}</loc>
                        </url>
                    `;
            })
            .join('')}
        </urlset>
    `;

    const formatted = prettier.format(sitemap, {
        ...prettierConfig,
        parser: 'html'
    });

    // eslint-disable-next-line no-sync
    fs.writeFileSync('public/sitemap.xml', formatted);
})();
```

## Google Search Console

The last thing you want to do is tell google where to find your sitemap. Navigate to [Google Search Console](https://search.google.com/search-console) and in the left pannel, click on the "Sitemaps" tab. In the "Add a new sitemap" input box, enter the url to your sitemap. When Google processes it, you should see a success status in the table!

Learn how to create a dynamic sitemap for a react and Next.js website using fs, globby, and prettier.

Generate A Dynamic Sitemap In Next.js Website


## Introduction

Building a todo app is common practice when you are trying to learn a new tech stack. In this tutorial, I'll show you how to build a todo app using the follwing stack:

- [Next.js](https://nextjs.org) for the JavaScript framework
- [Chakra-UI](https://chakra-ui.com) for the CSS framework
- [Firebase](https://firebase.google.com) for the auth and backend
- [React hooks](https://reactjs.org/docs/hooks-intro.html) for handling data locally

Let's jump into coding!

## Bootstrapping With `next-firebase-auth`

I will be building this like any other project. This means, I will not be starting from scratch. Instead, we will be cloning [this repo](https://github.com/gladly-team/next-firebase-auth) which has Firebase Auth already implemented. Go ahead and clone the repo and then `cd` into the `example` folder. This is the Next.js source code.

As a reminder, you can clone this repo from your terminal using:

```bash
git clone https://github.com/gladly-team/next-firebase-auth.git

then...

cd example
```

Once you have the starter files, feel free to open them up in the IDE of your choice.

### .env.local

You will notice that if you try to run the app (using `yarn dev`) you will get an error. This is because we need to edit the secret values inside of `.env.local.example` to our Firebase values. First, copy everything inside of `.env.local.example` into a new file named `.env.local`.

```bash:.env.local.example
# Copy this file as ".env.local".
# Update these with your Firebase app's values.
FIREBASE_CLIENT_EMAIL=my-example-app-email@example.com
NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=MyExampleAppAPIKey123
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=my-example-app.firebaseapp.com
NEXT_PUBLIC_FIREBASE_DATABASE_URL=https://my-example-app.firebaseio.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=my-example-app-id

# Your Firebase private key.
# When using Vercel, add the private key with double quotes
# via the CLI, not the Vercel dashboard:
#   vercel secrets add firebase-private-key '"my-key-here"'
# Then, use `JSON.parse` in the app. See:
# https://github.com/vercel/vercel/issues/749#issuecomment-707515089
FIREBASE_PRIVATE_KEY='"some-key-here"'

# Secrets used to sign cookies.
COOKIE_SECRET_CURRENT=someSecretValue
COOKIE_SECRET_PREVIOUS=anotherSecretValue

# Cookie options.
NEXT_PUBLIC_COOKIE_SECURE=false # set to true in HTTPS environment
```

Next, create a Firebase project and create a web project inside of it.

![Image of creating a firebase web app](/content/articles/todo-app-nextjs-chakraui-firebase/create-web-app.png)

Go ahead and turn on Email/Password auth, cloud firestore and realtime db.

![Image of left sidebar](/content/articles/todo-app-nextjs-chakraui-firebase/left-sidebar.png)

Now, go into project settings. In the general tab, you will find most of your secret values.

![Image of secrets](/content/articles/todo-app-nextjs-chakraui-firebase/secrets.png)

To get the remaining values, click the "Service Accounts" tab and "Generate a New Private Key." Open the file that is downloaded. The remaining secret values such as the api key (the super long string) can be found in here.

![Image of generating a private key](/content/articles/todo-app-nextjs-chakraui-firebase/generate-private-key.png)

> For the 2 cookie secrets, simply generate 2 random strings!

At this point, you should be able to log into the site using email and password.

## Adding Chakra-UI

### Add Dependencies

Once this is complete, we can add Chakra-UI to our project. First add the dependencies:

```bash
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```

### Wrap With ChakraProvider

Next, wrap `_app.js` with the `<ChakraProvider>`.

```javascript:_app.js
import React from 'react'
import '../styles/globals.css'
import initAuth from '../utils/initAuth'
import { ChakraProvider } from "@chakra-ui/react" // <- add this

initAuth()

function MyApp({ Component, pageProps }) {
  // eslint-disable-next-line react/jsx-props-no-spreading
  return (
    <ChakraProvider> // <- add this
      <Component {...pageProps} />
    </ChakraProvider> // <- add this
  )
}

export default MyApp
```

## Creating `todo.js`

All of the code in this turoial will be added in a file named `todo.js`. You can go ahead and create this inside of the `pages` directory.
We will start by adding a bunch of imports.

### Adding The Imports

```javascript:todo.js
import React, { useState, useEffect } from 'react'
import {
    Flex,
    Heading,
    InputGroup,
    InputLeftElement,
    Input,
    Button,
    Text,
    IconButton,
    Divider,
} from "@chakra-ui/react"
import { AddIcon, DeleteIcon, StarIcon } from "@chakra-ui/icons"
import {
    useAuthUser,
    withAuthUser,
    withAuthUserTokenSSR,
    AuthAction,
} from 'next-firebase-auth'
import getAbsoluteURL from '../utils/getAbsoluteURL'
import firebase from 'firebase/app'
import 'firebase/firestore'
```

- line 1 are react imports
- lines 2-13 are chakra ui imports
- lines 14-20 are `next-firebase-auth` imports
- lines 21-22 are firebase imports

### Defining Our Body

Next, define our react functional component with some basic styles:

```javascript:todo.js
// imports here

const Todo = () => {
    return (
        <Flex flexDir="column" maxW={800} align="center" justify="center" minH="100vh" m="auto" px={4}>

        </Flex>
    )
}

export const getServerSideProps = withAuthUserTokenSSR()

export default withAuthUser()(Todo)
```

I'll go ahead and add the rest of the UI elements.

```javascript:todo.js
<Flex flexDir="column" maxW={800} align="center" justify="center" minH="100vh" m="auto" px={4}>
    <Flex justify="space-between" w="100%" align="center">
        <Heading mb={4}>Welcome, {AuthUser.email}!</Heading>
        <IconButton ml={2} onClick={AuthUser.signOut} icon={<StarIcon />} />
    </Flex>

        <InputGroup>
            <InputLeftElement
                pointerEvents="none"
                children={<AddIcon color="gray.300" />}
            />
            <Input type="text" placeholder="Learn Chakra-UI & Next.js" />
            <Button
                ml={2}
            >
                Add Todo
            </Button>
        </InputGroup>
</Flex>
```

If you run the app you should see some nice output!

## Writing Data to Firebase's Cloud Firestore

### useState

To write data to cloud firestore, we will first need to get the data from the user and hold it locally. We can use `useState` for this. Add the
following code:

```javascript:todo.js
const [input, setInput] = useState('')
const [todos, setTodos] = useState([])
```

Now we can store the users input value in the `input` variable and when we fetch the data back, we can store it in the
`todos` variable.

### onClick + onChange

To get the data, we can use `onClick` and `onChange`.

```javascript:todo.js
<InputGroup>
        <InputLeftElement
            pointerEvents="none"
            children={<AddIcon color="gray.300" />}
        />
        <Input type="text" onChange={(e) => setInput(e.target.value)} placeholder="Learn Chakra-UI & Next.js" />
        <Button
            ml={2}
            onClick={() => sendData()}
        >
            Add Todo
        </Button>
    </InputGroup>
```

If you add some `console.logs` and type in some data, you will see that this works! The next step is to create the `sendData` method and send the data to Firebase.

We can wrap everything inside of a try catch loop to handle errors. To interact with Firestore, we can use `firebase.firestore()`.

We will store each users todo's inside of their own collection using their id. Each individual toto will be stored inside a doc, using the todo name and the doc name.

### Sending The Data

Lastly, use `.set` to set the data! We'll pass in the `timestamp` as well so we can order todos better later on.

```javascript:todo.js
const sendData = () => {
        try {
            // try to update doc
            firebase
                .firestore()
                .collection(AuthUser.id) // each user will have their own collection
                .doc(input) // set the collection name to the input so that we can easily delete it later on
                .set({
                    todo: input,
                    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                })
                .then(console.log('Data was successfully sent to cloud firestore!'))
        } catch (error) {
            console.log(error)
        }
    }
```

## Fetching Data from Firebase's Cloud Firestore

We can fetch data in a similar fashon. We'll fetch everything inside of `useEffect` so we can listen to changes in real time.

```javascript:todo.js
useEffect(() => {
        AuthUser.id &&
            firebase
                .firestore()
                .collection(AuthUser.id)
                .orderBy('timestamp', 'desc')
                .onSnapshot(snapshot => {
                    setTodos(snapshot.docs.map(doc => doc.data().todo))
                })
    })
```

Now, we have all the todo items inside of the `todos` variable! Let's map over them and display it to the user.

### Displaying Todos To User

```javascript:todo.js
{todos.map((t, i) => {
                return (
                    <>
                        {i > 0 && <Divider />}
                        <Flex
                            key={i}
                            w="100%"
                            p={5}
                            my={2}
                            align="center"
                            borderRadius={5}
                            justifyContent="space-between"
                        >
                            <Flex align="center">
                                <Text fontSize="xl" mr={4}>{i + 1}.</Text>
                                <Text>{t}</Text>
                            </Flex>
                            <IconButton onClick={() => deleteTodo(t)} icon={<DeleteIcon />} />
                        </Flex>
                    </>
                )
            })}
```

## Adding Delete

Lastly, let's add delete functionality. as you can see, we already have the `deleteTodo` method. Let's create this above.

To delete, we can grab the collection, grab the doc, and call `.delete`. Recall the collection name is the user's id and the doc name is the todo.

```javascript:todo.js
const deleteTodo = (t) => {
        try {
            firebase
                .firestore()
                .collection(AuthUser.id)
                .doc(t)
                .delete()
                .then(console.log('Data was successfully deleted!'))
        } catch (error) {
            console.log(error)
        }
    }
```

## Conclusion

We have now created a todo web app with Firebase Auth, Next.js as the JS framework, Chakra UI as the CSS framework, Firebase Cloud Firestore as the backend, and React Hooks to handle data locally. If you want to look at any of these in more detail, check out the recommended posts below!


Create a todo web app using Next.js, Firebase, Chakra UI, and React hooks (useState and useEffect). This is a full stack app with the following features: write to cloud firestore, read data using snapshot + useEffect, delete a todo, sign in with different accounts and protect data.

Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks


## Introduction

[Chakra UI](https://chakra-ui.com) is a css framework for React based apps. It is super easy to use which makes for a smooth developer experience. I've been using Chakra UI for over a year now and in this time I've learned a lot about it. In this post, I'll show you 5 Chakra UI features that will take you from beginner to advanced.

<Step number="1" title="Custom Theme Multiple Files" />

When you override the default theme, most developers create one theme file - usually named `theme.js`. When your project gets larger and you have multiple components and multiple overrides this file will get long and hard to read. To fix this we can use multiple theme files. It will look something like this: We can create a folder named `theme`. Inside of here create a file named `index.js`. This will be the main entry point for our theme. It is where we will use the `extendTheme` hook and pass in the overrides.

```jsx
📁 theme
  📄 index.js  # my main theme entrypoint
  📄 styles.js  # all my global style overrides
  📁 foundations
    📄 borders.js  # all my border overrides
  📁 components
    📄 button.js  # all my button overrides
```

You'll notice we are importing a few other files. `styles.js` will be all of our custom style overrides. For example color, fonts, etc. The `foundations` folder will hold our Foundational style overrides and the `components` folder will hold all of our component style overrides. By splitting it up like this, we create a project that is scalable friendly.

```jsx
// theme/index.js
import { extendTheme } from '@chakra-ui/react'

// Global style overrides
import styles from './styles'

// Foundational style overrides
import borders from './foundations/borders'

// Component style overrides
import Button from './components/button'

const overrides = {
  styles,
  borders,
  // Other foundational style overrides go here
  components: {
    Button
    // Other components go here
  }
}

export default extendTheme(overrides)
```

<Step number="2" title="useBreakpointValue" />

Normally to create responsive values in Chakra UI you do something like this:

```jsx
<Text fontSize={[10, 20, 30]}>I am responsive.</Text>

// or

<Text fontSize={{ base: "24px", md: "40px", lg: "56px" }}>I am responsive.</Text>
```

However, some properties like variant and size don't accept this. For these properties, we need to use the `useBreakpointValue` hook. By using this, we can achieve the same effect as the array and object syntax.

```jsx
function Example() {
  const variant = useBreakpointValue({ base: 'outline', md: 'solid' })

  return (
    <VStack align="flex-start">
      <Text>Resize your window to see the button variant change</Text>
      <Button colorScheme="teal" variant={variant}>
        Button
      </Button>
    </VStack>
  )
}
```

<Step number="3" title="useMediaQuery" />

`mediaQuery` is an advanced css feature but Chakra UI makes it easier to use. You might be thinking, why do we need this if we already have custom breakpoints? Well, you might want to add a breakpoint that is not defined in our custom breakpoints to only one element. To use this, simply use the `useMediaQuery` hook and pass in your value. Then use the variable in the code!

```jsx
function Example() {
  const [isLargerThan1280] = useMediaQuery('(min-width: 1280px)')

  return <Text>{isLargerThan1280 ? 'larger than 1280px' : 'smaller than 1280px'}</Text>
}
```

<Step number="4" title="config" />

There is a property called `config` which is passed into the `extendTheme` hook. This property takes in 3 global theme config properties which most people don't use.

```jsx
const config = {
  initialColorMode: 'light',
  useSystemColorMode: false,
  cssVarPrefix: 'coffeeclass-io'
}
```

The first is `initialColorMode`. This is the initial color mode that will render when the user gets to your site.

The second is `useSystemColorMode`. This is a boolean value that tells Chakra UI to use the system color mode (or not if it's set to `false`).

The third is `cssVarPrefix`. This is the prefix that Chakra UI will use for all of its css variables. It does not change any of the behavior but it is a cool way to further personalize your app.

<Step number="5" title="Custom Color Palette" />

Right out of the box, Chakra UI provides us with some nice looking colors. If you dive deeper into the colors, you'll notice that each color has a value from [50 to 900](https://chakra-ui.com/docs/theming/theme). This is so it works well with the `colorScheme` property and the color mode. You can create your own custom color palette such as a brand color palette but naming it and then passing in hex values for each of the values. You'll want to make 50 your lightest color and work your way darker for best results.

```jsx
custom_brand: {
        50: '#FFF29F',
        100: '#FFEE80',
        200: '#FFEA60',
        300: '#FFE540',
        400: '#FFE120',
        500: '#FFDD00',
        600: '#DFC100',
        700: '#BFA600',
        800: '#9F8A00',
        900: '#806E00'
    }
```

```jsx
<Button colorScheme="custom_brand" size="xs">
  Button
</Button>
```

![Chakra UI default red color pallete](/content/articles/advanced-chakra-ui-do-you-know-all-5/color-pallete.png)

## Conclusion

Did you know all 5 of these advanced Chakra UI tricks? If so leave a comment down below!


Learn 5 Chakra UI advanced tricks and tips to bring you from a beginner React developer to advanced.

Advanced Chakra UI


## Introduction

Inheritance is an important concept in Object Oriented Programming (OOP). It is a mechanism through
which an object acquires properties and behavior of another object. An object which is inheriting is
called Child and other one is called Parent object. Objects belong to classes, so class having basic
attributes and behavior is called Super Class (Parent class), and Class which is inheriting called
Subclass (child class).

Reuseability is a very powerful feature of OOP, which is ensured through inheritance. Without inheritance a lot code is written again and again. Lets understand it by an example of vehicle.

## Inheritance Example

Every vehicle has some common attributes, like name, model,company, seating capacity, production
year and horse power. There are some specialized type of vehicles which have some extra attributes and
behaviors than basic vehicles, like Electric vehicle has battery capacity, average per kw. Similarly
Gasoline and Hybrid vehicles have specialized attributes and behaviors. Following diagram gives us a
good overview.

![A diagram of Java Inheritance](/content/articles/java-inheritance-tutorial/diagram.png)

All three type of vehicles have extra features, including basic feature of vehicle. If there is no
inheritance, then we need to include all attributes and behavior of basic vehicle in all type of
specialized vehicles.

## Java Syntax

Java uses keyword `extends` to inherent a class from its superclass. Using the keyword `extends`, all
public attributes and behaviors are automatically included in child class, there is no need to rewrite all
the code.

### Source Code

Here is the source code in java for above classes.

```java:Vehicle.java
public class Vehicle {
    String vehicle_name;
    String model;
    int seating_capacity;
    int production_year;
    float engine_horse_power;

    public String getVehicle_name() {
        return vehicle_name;
    }
    
    public void setVehicle_name(String vehicle_name) {
        this.vehicle_name = vehicle_name;
    }

    public String getModel() {
        return model;
    }

    public void setModel(String model) {
        this.model = model;
    }

    public int getSeating_capacity() {
        return seating_capacity;
    }

    public void setSeating_capacity(int seating_capacity) {
        this.seating_capacity = seating_capacity;
    }

    public int getProduction_year() {
        return production_year;
    }

    public void setProduction_year(int production_year) {
        this.production_year = production_year;
    }

    public float getEngine_horse_power() {
        return engine_horse_power;
    }

    public void setEngine_horse_power(float engine_horse_power) {
        this.engine_horse_power = engine_horse_power;
    }
}
```

```java:Electric_vehicle.java
public class Electric_vehicle extends vehicle {
    float battery_capacity;
    int num_of_batteries;
    float fuel_average_per_kw;

    public float getBattery_capacity() {
        return battery_capacity;
    }

    public void setBattery_capacity(float battery_capacity) {
        this.battery_capacity = battery_capacity;
    }

    public int getNum_of_batteries() {
        return num_of_batteries;
    }
    
    public void setNum_of_batteries(int num_of_batteries) {
        this.num_of_batteries = num_of_batteries;
    }

    public float getFuel_average_per_kw() {
        return fuel_average_per_kw;
    }

    public void setFuel_average_per_kw(float fuel_average_per_kw) {
        this.fuel_average_per_kw = fuel_average_per_kw;
    }
}
```

```java:Gasoline_vehicle.java
public class Gasoline_vehicle extends vehicle {
    int fuel_tank_capacity;
    int slyinder_engine;
    float fuel_avg_ltr;

    public int getFuel_tank_capacity() {
        return fuel_tank_capacity;
    }

    public void setFuel_tank_capacity(int fuel_tank_capacity) {
        this.fuel_tank_capacity = fuel_tank_capacity;
    }

    public int getSlyinder_engine() {
        return slyinder_engine;
    }

    public void setSlyinder_engine(int slyinder_engine) {
        this.slyinder_engine = slyinder_engine;
    }

    public float getFuel_avg_ltr() {
        return fuel_avg_ltr;
    }

    public void setFuel_avg_ltr(float fuel_avg_ltr) {
        this.fuel_avg_ltr = fuel_avg_ltr;
    }
}
```

```java:Hybrid_vehicle.java
public class Hybrid_vehicle extends vehicle {
    int fuel_tank_capacity;
    int engine_cylinder;
    int battery_capacity;
    float fuel_avg_per_ltr;

    public int getFuel_tank_capacity() {
        return fuel_tank_capacity;
    }

    public void setFuel_tank_capacity(int fuel_tank_capacity) {
        this.fuel_tank_capacity = fuel_tank_capacity;
    }

    public int getEngine_cylinder() {
        return engine_cylinder;
    }

    public void setEngine_cylinder(int engine_cylinder) {
        this.engine_cylinder = engine_cylinder;
    }

    public int getBattery_capacity() {
        return battery_capacity;
    }

    public void setBattery_capacity(int battery_capacity) {
        this.battery_capacity = battery_capacity;
    }

    public float getFuel_avg_per_ltr() {
        return fuel_avg_per_ltr;
    }

    public void setFuel_avg_per_ltr(float fuel_avg_per_ltr) {
        this.fuel_avg_per_ltr = fuel_avg_per_ltr;
    }
}
```

## Multilevel and Multiple Inheritance

Multilevel inheritance means inheritance is at multiple level in classes. There is a parent class A, a child
class B extends A and class C extends B. As C extends B, all properties and behavior of B including its
parent class will also be available in class C.

```java
public class A {………
public class B extends A{…….
public class C extends B{…….
```

In multiple inheritance one class can inherent more than one class at the same time. In C++ and C multiple inheritance is allowed,
but in Java it is not allowed. This is because multiple inheritance can lead to ambiguity.


Learn Java Inheritance definition with a vehice inheritance example and code snippets.

Java Inheritance - A Quickstart


## Demo

In this step by step snippet, you will learn how to add a simple `css` hover animation to a `HTML` element to create the following effect:

<FloatUpDivAnimation />

## Code

```html
<div class="flex-wrapper">
  <div class="tag">
    <p>Hover Me</p>
  </div>
  <div class="tag">
    <p>To Float Up</p>
  </div>
</div>

<style>
  .flex-wrapper {
    display: flex;
    height: 5px;
  }

  .tag {
    margin-right: 2px;
    transition: margin 0.2s ease-in-out;
    background-color: gray;
  }

  .tag:hover {
    margin-top: -2;
  }
</style>
```

> The code above is basic `HTML`. Later on in this snippet, I'll show you the [React](https://reactjs.org/) implementation and a [Chakra UI](https://chakra-ui.com/) implementation.

## Steps + Explanation

<Step number="1" title="Add The HTML Markup" />

The basic `HTML` markup with class names.

```html
<div class="flex-wrapper">
  <div class="tag">
    <p>Hover Me</p>
  </div>
  <div class="tag">
    <p>To Float Up</p>
  </div>
</div>
```

<Step number="2" title="Define The Wrapper CSS" />

We will make the wrapper `flex` and set the height to `5px`. The height can be whatever height you want.

```html
<style>
  .flex-wrapper {
    display: flex;
    height: 5px;
  }
</style>
```

<Step number="3" title="Define The Tag CSS" />

Both of these styles are optional and subjective.

```html
<style>
  .tag {
    margin-right: 2px;
    background-color: gray;
  }
</style>
```

<Step number="4" title="Create The Hover State" />

When the user hovers over the tag, the `margin` will be changed to "-2". If you try this code out, you will notice that the tag will jump up, rather than float nicely.

```html
<style>
  .tag:hover {
    margin-top: -2;
  }
</style>
```

<Step number="5" title="Add The CSS Transition" />

We can use a `transition` to make the tag float nicely. This transition is added to the `tag` class.

```html
<style>
  .tag {
    margin-right: 2px;
    transition: margin 0.2s ease-in-out; // Add the transition
    background-color: gray;
  }
</style>
```

## Going Further

Let's take a further look at some of the code bits.

### css Transition

#### Definition

> CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized. - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)

#### How We Use Transition

In our case, our transition looks like

```css
transition: margin 0.2s ease-in-out;
```

Breaking this down further, we have:

- `margin` - the property we are changing
- `.2s` - the time it takes for the transition to complete
- `ease-in-out` - the easing function

### ease-in-out

#### Definition

> Easing both in and out is akin to a car accelerating and decelerating and, used judiciously, can provide a more dramatic effect than just easing out. - [Google Developers](https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing)

## Common Mistakes

Here are some common mistakes and how to avoid them.

- not having a defined `height`

If you don't have a defined `height`, the tag layout will shift if you hover quickly between the tags. This is because the tag you are hovering over will grow larger causing the wraper to also grow and create a layout shift.

<FloatUpDivAnimationNoHeight />

This is the exact same code as above except we have no defined `height`.

```css
.flex-wrapper {
  display: flex;
  // height: 5px; // <-- this line is removed
}
```

- adding `transition` to the wrong element

Be sure you are adding `transition` to each `tag` and not the `wrapper`.

## React Example

Here is the react code with inline styles.

```javascript
import React from 'react'

export default function make-div-float-up-hover-css() {
    return (
        <div style={{border: '2px dotted', borderColor: 'gray', padding: '10px 0', marginTop: '4px'}}>
            <div style={{display: 'flex', margin: '4px 0', justifyContent: 'center', height: 5}}>
                <div style={{marginRight: 2, transition: 'margin .2s ease-in-out'}} _hover={{marginTop: 2}}>
                    <p>Hover Me</p>
                </div>
                <div style={{marginRight: 2, transition: 'margin .2s ease-in-out'}} _hover={{marginTop: 2}}>
                    <p>To Float Up</p>
                </div>
            </div>
        </div>
    )
}
```

> Some of the specific subjective `css` styles will differ slightly from the example. i.e. `border`, `borderColor`, tag color/size.

## Chakra UI Example

```javascript
import { Flex, Tag, Text, Box, useColorModeValue } from "@chakra-ui/react";

export default function FloatUpDivAnimation() {
  return (
    <Box
      border="2px dotted"
      borderColor={useColorModeValue("gray.300", "gray.100")}
      py={10}
      mt={4}
    >
      <Flex my={4} justifyContent="center" h={5}>
        <Tag
          mr={2}
          size="lg"
          transition="margin .2s ease-in-out"
          _hover={{ mt: "-2" }}
        >
          <Text>Hover Me</Text>
        </Tag>
        <Tag
          mr={2}
          size="lg"
          transition="margin .2s ease-in-out"
          _hover={{ mt: "-2" }}
        >
          <Text>To Float Up</Text>
        </Tag>
      </Flex>
    </Box>
  );
}
```


Add a float up hover transition animation to a div using css.

Pure CSS Float On Hover Effect


## Introduction

Back in the day when JavaScript was introduced, it didn’t have any specific `date` data type. But later, the [date data type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) was introduced in JavaScript and that’s when developers started to look around for ways to compare dates in JavaScript.

If you are also looking for ways to compare different dates, you are at the right place. Besides that, even if you were just exploring the topic, it is recommended to go through this guide because at some point in your programming career as you will need to compare dates.

In this guide, I’m going to explain the simplest and most functional method to compare dates in JavaScript.

## Simplest Method to Compare Dates

In order to compare dates, you have to convert the data type values to numerical values. You can do that using the built in method `getTime()`.

### getTime Method Definition

`getTime()` returns the number of milliseconds since midnight, January 1, 1970, Coordinated Universal Time (UTC).

> Refer to the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime) for more information.

### getTime Usage

Once you have successfully converted the dates values to numeric values, you can use the comparison operator such as `>`, `<`, etc. 

Refer the script below for better understanding:

```javascript
var date1 = new Date(2021 - 08 - 21);
var date2 = new Date(2020 - 09 - 21);

if (date1.getTime() > date2.getTime())
    console.log("First date is greater than Second Date");

else if (date1.getTime() < date2.getTime())
    console.log("First date is lesser than Second date");

else
    console.log("Both the dates are same");
```

```bash:Output
First date is greater than Second Date
```

> In this example, only year, month and day was passed in both the variables. If you want, you can pass year, month, day, hour, minute, second as well. But beware of the format i.e., `YY-MM-DD-Hr-Min-Sec`

Refer the script below for more understanding:

```javascript
var date1 = new Date(2021, 08, 21, 12, 15, 20); // Year, Month, Day, Hour, Minute, Second
var date2 = new Date(2020, 09, 21, 11, 23, 18); // September 21, 2020, 11:23:18 AM

if (date1.getTime() > date2.getTime())
    console.log("First date is greater than Second date");

else if (date1.getTime() < date2.getTime())
    console.log("Second Date is greater than First date");

else
    console.log("Both the dates are same");
```

```bash:Output
First date is greater than Second date
```

> ❗ Note: The time values are in [millitary time](http://militarytimechart.com/) ❗

## Final Notes

In this guide, you have learned how to compare dates in JavaScript. Now, let's quickly recap everything that we have read so far. 

1. First, you need to convert the dates to numeric values. 
2. Secondly, you have to use the basic comparison operators to compare the numeric dates. 

Based on the comparison, you can print the desirable output, or use the values however you want!


How to compare 2 or more dates in JavaScript using the getTime method. getTime definition and usage.

How to Compare Dates in JavaScript


## What Are React Hooks?

Released in React 16.8, [React Hooks](https://reactjs.org/docs/hooks-intro.html) allow you to you use state and other React features without writing a class.

Here is a simple example from the reactjs.org website:

```javascript
import React, { useState } from 'react'; // <--- import the hook

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0); // <--- useState is the hook

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

As you can see, we can create a state variable named count in *only* one line using the `useState` hook.

> **Note:** React hooks are imported from React like such: `import { yourHookHere } from 'react'`.

## Using useEffect In Next.JS

Adding the `useEffect()` (or [Effect Hook](https://reactjs.org/docs/hooks-effect.html)) hook in [Next.js](https://nextjs.org/) is not at bad as one would think. Let's take a look at an example. We will use ```useEffect``` to add an event listener
to handle when a user scrolls. We will then log to the console the scrollY value. This is how this website dynamically adds
the css to the nav bar on scroll!

> The useEffect hook is used to perform side effects in function components.

<Step number="1" title="Import useEffect from react" />

```javascript
import React, { useState, useEffect } from 'react'
```

<Step number="2" title="Call the method and add code" />

```javascript
useEffect(() => {
        
    })
```

We can add anything we want in here. Let's add our event listeners:

```javascript
useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    })
```

Finally, create the handle scroll method and log the scrollY value to the console:

```javascript
const handleScroll = () => {
        console.log(scrollY)
    }
```

## Conclusion

And that's it! Check out my [YouTube channel](https://youtube.com/benjamincarlson) for more coding tutorials!

Learn what useEffect is learn how to use useEffect in Next.JS.

useEffect() Hook in Next.JS - React Hooks


## What Is React Native?

React Native is a JavaScript framework for building cross platform mobile apps. It allows you to create native apps for Android and iOS using [React](https://reactjs.org/).

For the website: React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

> Learn once, write anywhere.

In this tutorial, I’ll show you how to quickly set up a React Native project and run your app on your actual device!

## Expo

In this tutorial, we will be using [Expo](https://expo.dev/) with React Native. Expo acts as a container around the React Native framework that allows us to develop applications more quickly and easily compared to if we were using bare bones React Native. The first thing we need to do is install the Expo CLI command line utility. Open your terminal and run the following command:

```shell
npm install -g expo-cli
```

Now we can create a new React Native project. I will call my project `ExampleProject` but you can call it whatever you like.

```shell
expo init ExampleProject
```

Expo will prompt you with the following message:

![React Native Expo template options](/content/articles/how-to-create-react-native-app/2.png)

For this tutorial, I will select blank but I encourage you to do some research and select the best option for your project.

## Running Our React Native App On Expo

Believe it or not, our app is ready to be run! To start our app we must move into the folder which contains our app and then run the start command.

```shell
cd AwesomeProject
npm start
```

When you run ‘npm start’, a new browser window will open at your local host. You will notice a barcode in the lower left hand corner.

![Expo running in browser](/content/articles/how-to-create-react-native-app/3.png)

We can scan this barcode in the expo app to run our app on a device. Go to either the Apple App Store or the Google Play Store and search for ‘expo client’. See the image below.

![Expo in google play store](/content/articles/how-to-create-react-native-app/4.png)

Once you download and open the app, you will see an option to “Scan QR Code”. Tap this and scan your code. After the JavaScript loads, you should be able to see the app on your device. If you see “Open up App.js to start working on your app!” you have done it correctly.


Create a cross platform ios and Android app using React Native and run it using Expo.

Create and Run React Native Mobile App Using Expo in Under 5 Minutes!


## Introduction

In this snippet we will create a simple mobile navigation bar using Chakra UI's [drawer component](https://chakra-ui.com/docs/overlay/drawer). It will be similar to the one on this website.

<Step number="1" title="Creating the Hamburger Icon Button" />

To begin, we will create a simple `IconButton` to open the Navbar. Declare some basic properties such as `aria-label`, `m`, and `zIndex`.

```javascript
const Navbar = () => {
  return (
    <>
      <IconButton
        pos="fixed"
        right={0}
        top={0}
        m={3}
        zIndex="10"
        aria-label="Open Menu"
        icon={<HamburgerIcon />}
        onClick={onOpen} // what's this?
      />
    </>
  )
}

export default NavBarTop
```

You will notice that the `onClick` property is set to `onOpen`. This is from `useDisclosure`. [Chakra UI](https://chakra-ui.com/) gives us this along with `isOpen` and `onClose` to handle the state of the Drawer.

<Step number="2" title="Adding The Drawer" />

Import the drawer component and all of its sub components.

```javascript
import {
  useDisclosure,
  Drawer,
  DrawerOverlay,
  DrawerContent,
  DrawerHeader,
  DrawerBody,
  DrawerFooter
} from '@chakra-ui/react'
```

Now, we can use the `Drawer` component to create the drawer. We can add this right under the `IconButton` which I will not show below for brevity.

```javascript
<Drawer onClose={onClose} isOpen={isOpen} size="sm">
  <DrawerOverlay />
  <DrawerContent>
    <DrawerHeader borderBottomWidth="3px">
      <Heading>I am the Header!</Heading>
    </DrawerHeader>
    <DrawerBody>
      <Text>I am the body! Add aything in here, even components like Flex and Button.</Text>
      <Flex>
        <Button />
      </Flex>
    </DrawerBody>
  </DrawerContent>
</Drawer>
```

The last step is to add the `useDisclosure` hook above the return statement.

```javascript
const { isOpen, onOpen, onClose } = useDisclosure()
```

<Step number="3" title="More Improvements" />

Lastly, let's add a button to close the Drawer. We can use the `onClose` method to do this. Again, I am not repeating any code for brevity.

```javascript
<IconButton size="md" onClick={onClose} icon={<CloseIcon fontSize="xs" />} borderRadius={5} />
```

As always, refer to the Chakra UI docs for additional [Drawer props](https://chakra-ui.com/docs/overlay/drawer#props).


Use Chakra UI's drawer component to create a simple mobile navigation bar.

Chakra-UI Mobile Navbar (Drawer Component)


<EmbeddedVideo
  src="https://www.youtube.com/embed/WcckDQ716_o"
  alt="Watch Advanced Chakra UI on YouTube."
  maxW={800}
/>

## Introduction

Most websites use [Google Analytics](https://analytics.google.com/analytics/web/) to track users and events. This is a great way to get an idea of how your website is performing. However, there are some downsides to using Google Analytics.

1. They sell your data
2. It slows down your website speed slightly
3. There is a significant learning curve

In this snippet, we will explore an alternative analytics solution called [Splitbee Analytics](https://www.splitbee.com/).

<Step number="1" title="Register" />

Navigate to [https://splitbee.io/](https://splitbee.io/) and sign up for a free account (no credit card required).

<Step number="2" title="Add The Tracking Tag" />

Add the folling tag to the head of your website. In Next.js this is inside of `_document.js`.

```javascript
<script async src="https://cdn.splitbee.io/sb.js"></script>
```

```javascript:_document.js
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends NextDocument {
    render() {
        return (
            <Html lang="en">
                <Head>
                    {/* Splitbee Analytics */}
                    <script async src="https://cdn.splitbee.io/sb.js"></script>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}
```

<Step number="3" title="Go To Your Site" />

Navigate to your site and you should see analytics flow through your dashboard!

<Step number="4" title="Advanced Usage" />

To get the most out of Splitbee, the Splitbee team recommends looking into event tracking and storing user properties. They allow you to do things like:

- Track conversion events
- Capture form data and attach it to a user
- Assign data to a user, like their email address

Happy tracking!


Add Splitbee Analytics to a Next.js Jamstack website for free. Track analytics, users, funnels, automate tasks, run experiments like a/b testing and more with Splitbee Analytics.

Add Splitbee Analytics To Next.js


## The Code

```dart:main.dart
import 'package:flutter/material.dart';
import 'package:bottom_navigation_bar/nav.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation Bar Tutorial',
      home: Nav(),
    );
  }
}
```

```dart:nav.dart
import 'package:flutter/material.dart';
import 'package:bottom_navigation_bar/home_screen.dart';

class Nav extends StatefulWidget {
  @override
  _NavState createState() => _NavState();
}

class _NavState extends State<Nav> {
  int _selectedIndex = 0;
  List<Widget> _widgetOptions = <Widget>[
    Home(),
    Text('Messgaes Screen'),
    Text('Profile Screen'),
  ];

  void _onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Tutorial'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text(
              'Home',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.message,
            ),
            title: Text(
              'Messages',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
            ),
            title: Text(
              'Profile',
            ),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTap,
        selectedFontSize: 13.0,
        unselectedFontSize: 13.0,
      ),
    );
  }
}
```

```dart:home_screen.dart
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.ac_unit),
          Icon(Icons.access_alarms),
        ],
      ),
    );
  }
}
```

## Usage

<Step number="1" title="Adding The Code" />

- Inside of `main.dart` point your home to your nav component: `home: Nav(),`
- Inside of `nav.dart` add the Bottom Navigation Bar code. Your nav screens go inside the `_widgetOptions` list. In this example we have a `Home(),` screen.

<Step number="2" title="More Than 3 Items" />

If you need more than 3 Nav bar items, you will need to add the following property to the nav bar:

```dart
...
selectedFontSize: 13.0,
unselectedFontSize: 13.0,
type: BottomNavigationBarType.fixed, // addded line
...
```


Create a flutter bottom navigation bar using the BottomNavigationBar Flutter widget that works with more than 3 items!

Create A Flutter Bottom Navigation Bar


## Introduction

If you're a web developer, you've probably heard of [Jamstack](https://jamstack.org/). Coined in 2015 by the CEO of Netlify, Mathias Biilmann, Jamstack consists of pre-rendered, static HTML that relies on client-side APIs and JavaScript to provide interactive elements. Some of the many pros of Jamstack is that it's fast, scalable, cheap, secure, and SEO friendly.

There are a lot of popular Jamstack frameworks. The main ones are [Next.js](https://nextjs.org/), [Nuxt.js](https://nuxtjs.org/) [Gatsby](https://www.gatsbyjs.com/), [Hugo](https://gohugo.io/), and [Jekyll](https://jekyllrb.com/). Out of these 5, Next.js is by far the largest in terms of market share beating out second place Nuxt.js by over 3x.

In this post, you will learn Next.js by building a developer portfolio complete with a blog. You will also learn some other awesome technologies in the process like chakra-ui, next-mdx-remote, next-seo, Vercel, and more.

![A pie chart comparing the top Jamstack frameworks](/content/articles/nextjs-crash-course-build-a-developer-portfolio-website/pie-chart.png)

## Starter Files Overview

To create a Next.js website, we can use the command:

```bash
yarn create next-app
```

When we run this command, all of the necessary files will created.

- The `node_modules` folder holds all of our yarn and npm packages such as react-bootstrap, lodash, and next.
- The pages folder holds, you guessed it, our pages. For example, index.js can be reached at the root of our website. In development, this is http://localhost:3000/. If we created a blog page and called the file blog.js, that page can be reached at http://localhost:3000/blog. There are 2 exceptions to this.

  - `_app.js` is a special next.js file. It is the entry point to our app. At the bare minimum, `_app.js` includes a function that returns the page component. We can also import global css, add custom error handling, and do a couple of other advanced things inside of here. We will be coming back to `_app.js` in a bit when we add chakra-UI for our css framework.
  - The second exception is `_document.js`. This file is optional because Next.js provides it if we don't create it. If we need to add something to the `<html>` or `<body>` tags of our site, we will need to override this file. We can do that easily by creating it and adding the following code:

  ```jsx
  import Document, { Html, Head, Main, NextScript } from 'next/document'

  class MyDocument extends Document {
    static async getInitialProps(ctx) {
      const initialProps = await Document.getInitialProps(ctx)
      return { ...initialProps }
    }

    render() {
      return (
        <Html>
          <Head />
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }
  }

  export default MyDocument
  ```

  - One of the nice things about Next.js is its support for dynamic routes. Because we are making a developer portfolio, let's say we have a bunch of projects. We can create a folder called `project` and inside of it, create a file called `[project].js`. The brackets tell Next that this route will be dynamic. Now if we navigate to the following route: [https://localhost/projects/1](https://localhost/projects/1) we don't see any errors.
  - What if we wanted to grab that dynamic route and display it to the user? We can use `next/router` for this. Inside of our file import `useRouter` from `next/router`. Declare a variable `router` and set it equal to the `useRouter()` hook we imported. We can now use this variable to access a bunch of different properties. In our case, we can grab the dynamic route using `router.query`. Now, we can use this anywhere inside of our component.

- The final thing you will notice inside of the pages folder is the api folder. This is where any api routes will live. Because Jamstack does not have a server (it can if you need one), all of the data and authentication can be done using api routes. Next provides us with a simple example, in which we are returning some json. This can be accessed on the route [localhost:3000/api/hello](http://localhost:3000/api/hello). We can also consume this api endpoint in our application and display the data to the user, which we'll see in a bit.
- The next folder is the `public` folder. Inside here we can put any static images, gifs, favicons, txt files, like robots.txt, and xlm files such as our sitemap.
- The last folder is the styles folder. Here we can add any css or sass style sheets. We can go ahead and delete this folder because we will be using chakra-ui along with css in js to style our app.

## Building Our Site

Now that you have a high level understanding, let's start building our developer portfolio.

Let's first add `chakra-ui` to our app by adding the yarn packages.

```bash
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```

Now, all we need to do is wrap our app with the `ChakraProvider` in `_app.js`.

```javascript:_app.js
import { ChakraProvider } from "@chakra-ui/react"

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

export default MyApp
```

### Container.js

The first thing we want to do is create a page layout component that we can use in every page. Create a folder named `components` and inside of it, create a file named `Container.js`.

Go ahead and add the add the following code. The `{children}` text you see is the content for each page.

```javascript:Container.js
import {
    Flex,
    Stack
} from '@chakra-ui/react'
import Navbar from './Navbar'

export default function Container({ children }) {
    return (
        <>
            <Navbar />
            <Stack
                as="main"
                spacing={8}
                justifyContent="center"
                alignItems="flex-start"
                m="0 auto 4rem auto"
                maxWidth="800px"
                px={4}
            >
                <Flex
                    flexDirection="column"
                    justifyContent="flex-start"
                    alignItems="flex-start"
                    maxWidth="800px"
                    w="100%"
                >
                    {children}
                </Flex>
            </Stack>
        </>
    )
}
```

Next, let's create our `<Navbar />` component. Create a file named `Navbar.js` and another file named `DarkModeSwitch.js`. For the dark mode switch, we are simply using chakras `toggleColorMode()` hook to determine the current color mode and style accordingly. I am also using chakra icons in this example so you will need to import those:

```bash
yarn add @chakra-ui/icons
```

Now inside of `Navbar.js`, import the switch component. There are 2 things I want to point out inside of this Navbar that are Next.js specific.

1. We are using `useRouter()` again to style the active item differently. `router.pathname` gives us the slug.
2. We are using `next/link`, which is a special Next.js component. It acts like an `<a>` tag but is for Client-side transitions between routes. It is common to wrap `next/link` around an `<a>` tag. If you do this, be sure to use the `passHref` property otherwise you will render 2 `<a>` tags and hurt your SEO!

Now that our page container component is complete, let's import it into `index.html`. Let's add some basic information to this home page like name, description, and a call to action.

### API Routes

Let's take a look at one of the best features of Next.js, api routes. Earlier in this post, we took a look at `hello.js`, which was a simple api route. Let's create our own api route to fetch our GitHub repositories from our GitHub account.

We can do this using `swr`. SWR is a React hook created by the Next.js team. It handles caching, revalidation, focus tracking, refetching on interval, and more. To use it, we first need to import it:

```jsx
import useSWR from 'swr'
```

We can then use it like such:

```jsx
const { data, error } = useSWR('/api/github')
```

We now have the data returned stored inside of a variable `data` and if we have an error it will be stored inside the variable `error`. The data is coming from the api route `github.js`, a file we will create momentarily. Let's first add three return statements to handle our different states.

1. An error state
2. A loading state
3. And a success state

```jsx
if (error)
  return (
    <Container>
      <Text>Failed to load projects!</Text>
    </Container>
  )
if (!data)
  return (
    <Container>
      <Text>Loading...</Text>
    </Container>
  )
return (
  <Container>
    <Heading as="h1">Projects</Heading>
  </Container>
)
```

Now inside of the `api` folder, create a file named `github.js`. The syntax for an api route is as such:

```jsx
export default async (req, res) => {
  return res.status(200).json({})
}
```

We can now use vanilla javascript to fetch data from the GitHub api. As always, refer to GitHubs official docs for any help with this.

Back inside of `projects.js` we can map over the data and display it.

Recall, earlier in this post, we made a dynamic route accessible on `localhost:3000/projects/[pid]`. We can take advantage of that here by linking to that route passing in the project name. Then from this page, we can fetch additional data on that project or we could pass it in as part of the query string.

### Blog

To create a blog, we will use next-mdx-remote.

```bash
yarn add next-mdx-remote
```

We can store blog posts where ever we want because we will be using `getStaticProps()` to fetch them. In this post, and in most cases, storing them locally is the best option. Let's create a folder called `posts` and add our first blog post. We can store the important parts of the post like the title, description and published date in whats called the `frontMatter`.

```jsx
---
title: "Post Title"
description: "Post 1 description"
publishedAt: "2021-07-04"
---
```

The rest of the content can be added below as markdown. One of the cool things about using `mdx` is that you can add interactive javascript components inside of the post!

Now that we have a blog post, we can create a page named `blog.js` and inside of here we'll query all of our posts and display them in a list view.

Before we do this, we will need some information regarding the path to the posts. Let's make a new folder called `lib` and a new file named `mdxUtils.js`. This file will export 2 variables: the path to our blog posts, and a list of all the mdx files inside of this path. Be sure to add `fs` and `path` via yarn.

```bash
yarn add fs path
```

Inside of our `blog.js` page, import both of those variables as well as `fs`, `matter`, and `path`.

```bash
yarn add gray-matter
```

Inside of `getStaticProps` we can declare a variable `posts` and map over all of our blog posts which are stored in the `postFilePaths` variable. We can get the source of each post using `fs` and then extract the content and data using `gray-matter`. Finally, return posts as a prop.

Now, we can pass the posts prop into our component and map over each of the posts displaying them to the user. We are using the `as` property on `next/link` which is the path shown in the browser URL bar.

You can see that we can grab any of the `frontMatter` by using `{post.data.title}`.

### Individual Blog Posts

The final step is to make a dynamic page for each individual blog post. Inside of our `blog` folder, create a file named `[slug.js]`. Add the following imports and our basic post page body. You can see that we are passing in `source` and `frontMatter`. This is being fetched via `getStaticProps` and `getStaticPaths`. Inside of `getStaticPaths`, declare a variable `paths` and set it equal to `postFilePaths`. Recall this is being imported from `mdxUtils.js` and represents a list of all mdx files inside the `POSTS_PATH` directory. Next, remove file extensions for page paths and finally map the path into the static paths object required by Next.js. Then return the paths and set fallback to false.

Inside of `getStaticProps`, we are doing something very similar to what we did in `blog.js`, instead here we are only working with one blog post - the requested post. Declare a variable `postFilePath` and set it to the current url. Grab the source of the post using `fs`. Next, parse through the source using `gray-matter`. Finally, serialize the content and pass in any `mdxOptions` such as prism for code styling. Then, return the source and frontMatter.

In our page component, pass both of these variables in. We are setting the content of the post by the line:

```javascript:blog.js
<MDXRemote {...source} components={components} />
```

Now, you are probably wondering what the components variable is. That is where the markdown maps to its html element and it is also where we pass in our custom components. For example, we can declare a custom a tag like such:

```javascript:blog.js
a: (props) => <Link {...props} color={useColorModeValue("blue.700", "blue.400")} />,
```

We can also set our `DarkModeSwitch` equal to our darkmode switch component in this line:

```javascript:blog.js
DarkModeSwitch: dynamic(() => import('../../components/DarkModeSwitch')),
```

You should now be able to visit individual blog posts!

### Adding SEO

We will be using the `next-seo` package to add some SEO to our blog.

```javascript
yarn add next-seo
```

Create a new file called `next-seo.config.js`. Inside of here is where we can add a our default page title, description, etc.

Inside of `_app.js`, import this and add it right above our page component. Now we can add it to each of our pages.

To add SEO to our blog, we can create a file named `BlogSEO.js` and add our seo. We can use the article tag to tell Google that this is an article. Now, inside of `[slug].js` add our SEO. We need to pass in the page url dynamically so we can use the `useRouter()` hook to help us with this.

```jsx
import BlogSeo from '../../components/BlogSEO'
import { useRouter } from 'next/router'

const router = useRouter();
const slug = router.asPath.replace('/blog', '')

<BlogSeo url={`https://example.io/blog${slug}`} {...frontMatter} />
```

## Deploy To Vercel

After all this work, our website is now complete. Most tutorials would stop here but I am going to show you how to ship this website. Vercel is the company behind Next.js so it makes sense to deploy it there. Navigate to [https://vercel.com](https://vercel.com). If you don't have an account, go ahead and create one. It is 100% free forever on the hobby plan. Before we deploy our website, it needs to be on GitHub or another git platform. Once that is done, click the new project button and select your project repository. You will need to add the vercel app to your GitHub account so it has permissions. Give your app a project name if you want a different name from your GitHub repo, and add any environment variables if you have any. We did not use any in this crash course. Finally, click deploy! After a few minutes you should be able to see your website live.

## Conclusion

I hope you enjoyed this crash course of Next.js. We only covered the basics and skimmed past a lot of cool features so use the resources at the beginning og this post to keep learning.


Build a developer blog/portfolio using Next.js, Chakra UI, next-mdx-remote, next-seo and deploy it to Vercel in this Next.js crash course.

Next.js Crash Course


Chances are, you are a developer looking to build  a personal website to show off your projects, experience, writing, and more.
If you are using a React based framework, like Next.js, you can use MDX pages instead of JavaScript! By doing this, you can 

- Increase page speed
- Increase SEO
- Easier content development (I.E. A blog)

> This website uses mdx pages for all the snippets, tutorials, and learn posts!

## Starter Files

Go ahead and create a new Next.js project or feel free to use an already started project.

## Adding dependencies

Inside of `package.json` we need to add a few dependencies.

```json:package.json
"dependencies": {
    "@mdx-js/loader": "^1.5.1",
    "@mdx-js/react": "^1.6.18",
    "@next/mdx": "^9.1.1",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
```

Make sure to add `@mdx-js/loader`, `@mdx-js/react`, and `@next/mdx`. I left in `next`, `react`, and `react-dom` so you can see what versions I am using.

## next.config.js

Next, create a file in your root directory named `next.config.js`. You may already have this file created. Inside of it we will use the dependencies we just added.

```javascript:next.config.js
const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
})
module.exports = withMDX({
    pageExtensions: ['js', 'jsx', 'mdx'],
})
```

## Adding MDX pages

Inside of `pages` directory, add a page named `about.mdx`. If you navigate to this route you should see a blank screen. This is good, because if we got an error that would mean we did something wrong.

Inside of here we can add anything we want. Any [Markdown syntax](https://www.markdownguide.org/basic-syntax/) will work.

```javascript:about.js
# About

## Paragraph 1

Lorem ipsum dolor `sit` amet, consectetur adipiscing elit. Ut viverra euismod nisi, quis dignissim nisl sodales ut. Integer tincidunt congue orci. Vestibulum eu scelerisque massa, at tempor erat. Sed sed placerat tortor. Nam sagittis gravida quam, id commodo est rhoncus in. Cras eget venenatis sapien, nec eleifend ex. Nullam rhoncus nulla ac tellus tincidunt tincidunt. Proin non nisl non ex fermentum placerat et eget sem.

### Sub Paragraph

Maecenas gravida lacinia ante eu placerat. Phasellus placerat erat enim, ut suscipit nunc ultrices et. Praesent dictum arcu et volutpat tristique. Aliquam vitae enim ut ante vulputate suscipit non at purus. Sed efficitur lacinia augue, non placerat orci semper vitae. Curabitur sodales auctor rhoncus. Morbi porttitor nisi id mi cursus bibendum. Integer bibendum elementum nibh vitae imperdiet. In tortor elit, convallis rutrum ultricies nec, aliquam sit amet massa. Cras nec condimentum neque. Donec malesuada neque a enim ultricies, sollicitudin tempus libero vulputate.
```

We can even use components!

```javascript:about.js
import Button from '../components/Button.js'

# About

<Button />

## Paragraph 1

Lorem ipsum dolor `sit` amet, consectetur adipiscing elit. Ut viverra euismod nisi, quis dignissim nisl sodales ut. Integer tincidunt congue orci. Vestibulum eu scelerisque massa, at tempor erat. Sed sed placerat tortor. Nam sagittis gravida quam, id commodo est rhoncus in. Cras eget venenatis sapien, nec eleifend ex. Nullam rhoncus nulla ac tellus tincidunt tincidunt. Proin non nisl non ex fermentum placerat et eget sem.

### Sub Paragraph

Maecenas gravida lacinia ante eu placerat. Phasellus placerat erat enim, ut suscipit nunc ultrices et. Praesent dictum arcu et volutpat tristique. Aliquam vitae enim ut ante vulputate suscipit non at purus. Sed efficitur lacinia augue, non placerat orci semper vitae. Curabitur sodales auctor rhoncus. Morbi porttitor nisi id mi cursus bibendum. Integer bibendum elementum nibh vitae imperdiet. In tortor elit, convallis rutrum ultricies nec, aliquam sit amet massa. Cras nec condimentum neque. Donec malesuada neque a enim ultricies, sollicitudin tempus libero vulputate.
```

And the button component:

```javascript:button.js
export default function Button() {
    return (
        <button onClick={() => alert('Button was clicked')}>Click me!</button>
    )
}
```

## Adding Styles

At this point you might be saying to yourself, this is great but how do I add styles? We can do that by mapping each markdown tag to an html element and then style that!

Create a file named `MDXComponents.js`.

Inside of here, add the following:

```javascript:MDXComponents.js
const CustomCode = (props) => {
    return <code style={{ backgroundColor: 'lightblue' }} {...props} />
}

const MDXComponents = {
    p: (props) => <p style={{ fontSize: '25px' }} {...props} />,
    inlineCode: CustomCode,
}

export default MDXComponents
```

As you can see, we are mapping some Markdown element to some HTML element and then styling it. You can do this for any html tag.

The last step is to wrap our application with these styles. Inside of `_app.js`:

```javascript:_app.js
import '../styles/globals.css'
import MDXComponents from '../components/MDXComponents' // import the styles
import { MDXProvider } from '@mdx-js/react' // import the dependency

function MyApp({ Component, pageProps }) {
  return (
    // Wrap out page props with the MDX Provider!
    <MDXProvider components={MDXComponents}>
      <Component {...pageProps} />
    </MDXProvider>
  )
}

export default MyApp
```

## Conclusion

And that's it! You can now rest easy knowing your pages load in record time!

If you are building a developer personal website using next.js, you can use mdx pages for your blog or other static pages to increase speed and seo.

Next.js + MDX Pages Quickstart


## Introduction

Whenever I work with [Firebase](https://console.firebase.google.com/u/0/), I always seem to run into small issues that can be very annoying (yet simple) to solve. When I tried to connect my [Flutter](https://flutter.dev/) application to a Firebase backend for one of my personal projects, I ran into some small issues that set me back some time. Because of this, I decided to write a simple and straightforward article showing you how to connect your Flutter application to a firebase backend for both IOS and Android. After this tutorial, you will be all set to add authentication, Cloud Firestore, or any other Firebase feature you might want.

## Pre Reqs

To keep this tutorial short, I expect that you have the following:

- You have Flutter installed on your machine
- You have a Flutter project started already and are ready to connect it with Firebase

## Creating a Firebase Project

Before we start working in Flutter, we need to create a Firebase project.

1. Navigate to [Firebase console](https://console.firebase.google.com/)
2. Click on **Add Project**
3. Enter a project name
4. Choose if you want Google Analytics to be enabled (I recommend this). You can always enable this later on.
5. Choose what account you want this project to be associated with
6. Click **create project**

After a minute or two, your project will finish creating and you will be brought to the overview page.

## Add Firebase to Android

Next, we will add Firebase to our Android version. We will need to do IOS and Android separately although the process is similar.

![Firebase Console](/content/articles/connect-flutter-to-firebase/console.png)

- Click on the Android Icon from the overview page
- Complete the Register App step.

For Android package name use the format: _com.[your name or business name].[project name]_. For app nickname, use whatever name you’d like.

![Firebase Console](/content/articles/connect-flutter-to-firebase/add.png)

Step 2

- Download the config file and place it in the app level (in the app folder).

![Firebase Console](/content/articles/connect-flutter-to-firebase/app-level.png)

- In the project level build.gradle, add the following:

![Firebase Console](/content/articles/connect-flutter-to-firebase/build.gradle.png)

- In the app level build.gradle add the following:

![Firebase Console](/content/articles/connect-flutter-to-firebase/app-level-build.gradle.png)

Lastly, in the app level build.gradle file (same file as above), find the applicationId and change it to the name you chose in step 2. In my case I used _com.benjamincarlson.medium_tutorial_.

![Firebase Console](/content/articles/connect-flutter-to-firebase/name.png)

At this point we are done. Run the app with an android emulator and make sure everything works. You should see the following image below if everything works as expected.

![Firebase Console](/content/articles/connect-flutter-to-firebase/working-android.png)

## Add Firebase to IOS

Like I said earlier, this is similar to what we did for Android.

Click on the IOS Icon from the overview page

Enter the IOS bundle ID. This can be found by opening your project in Xcode -> click on runner (top right) -> general tab -> Identity

![Firebase Console](/content/articles/connect-flutter-to-firebase/bundle-id.png)

I changed mine from com.example.mediumTutorial to com.benjamincarlson.mediumTutorial.

- Enter an app nickname and app store ID (both optional)

- Download the config file. Add the file in the project root by opening Xcode, right clicking on runner, and clicking “add files to runner”. You need to add the file directly through Xcode otherwise you will get an error and the app won’t run.

- Skip the next 2 steps firebase tells you to do

- Run the IOS app and make sure everything is working correctly

## Finishing Up

The last thing you want to do is open up `pubspec.yaml` and add the following under dependencies:

```dart:pubspec.yaml
firebase_auth: ^0.14.0+5
cloud_firestore: ^0.12.9+4
```

Any other Firebase tools you want to use will be added here as well.

That’s it guys! I hope you found this article useful and that you are able to successfully connect your Flutter app to Google's Firebase!


Learn how to connect Google's Firebase database to your Flutter mobile app easily.

How To Use Firebase As Flutter's Backend


## Introduction

Adding comments to a [Jamstack](https://jamstack.org/) website is a challenge. The main reason for this is because
comments require some sort of database, and (one of) Jamstack's selling point is that it doesn't need one!
You can choose to connect a database such as [Firestore](https://firebase.google.com/docs/firestore) or [AWS](https://aws.amazon.com/products/databases/) - but we're not going to do that because it's

- challenging
- time consuming
- **costs money!**

In this article, I'll show you how to connect [utterances](https://utteranc.es/) to your React based application.

## What Is Utterances?

Utteranc under the hood interacts with the [GitHub api](https://docs.github.com/en/rest) to store all of your comments in the issues tab. According to their website, some of the pros of using utteranc are:

- Open source. 🙌
- No tracking, no ads, always free. 📡🚫
- No lock-in. All data stored in GitHub issues. 🔓
- Styled with Primer, the css toolkit that powers GitHub. 💅
- Dark theme. 🌘
- Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲

I don't know about you, but this sounds like a great comment solution.

## Adding Utterances To A React Website

If you want to add Utteranc to a simple html site, all you need to do is paste in a `<script>` tag. Unfortuantly, in React, we can't do this. We need to create a [custom component](https://reactjs.org/docs/components-and-props.html).

### Step 1: Create a GitHub repo

The first step is to create a GitHub repo to store your comments. You can use the same repo that your website
is pushed to, however, I recommend creating a new one just for the comments. You can then name this `comments-your-website-name` - or another name if you feel so inclined.

![The comments GitHub repo for this website](/content/articles/add-comments-to-nextjs-website/comments-coffeeclass-io.png)

> ❗ Make sure this repo is public and that Utterances is authorized. ❗

### Step 2: Create The React Component

Next, create a component named `Comments.js` in your app.

Add the following code:

```JavaScript:Comments.js
import React, { Component } from "react";

export default class Comments extends Component {

    constructor(props) {
        super(props);
        this.commentBox = React.createRef(); // use ref to create our element
    }

    componentDidMount() {
        scriptEl.setAttribute("theme", 'github-light');
        let scriptEl = document.createElement("script");
        scriptEl.setAttribute("src", "https://utteranc.es/client.js");
        scriptEl.setAttribute("crossorigin", "anonymous");
        scriptEl.setAttribute("async", true);
        scriptEl.setAttribute("repo", "your-repo-name-here"); // i.e. bjcarlson42/comments-coffeeclass.io
        scriptEl.setAttribute("issue-term", "url"); // you can change 'url' with other options
        this.commentBox.current.appendChild(scriptEl);
    }

    render() {
        return (
            <div style={{ width: '100%' }} id="comments">
                <div ref={this.commentBox} />
            </div>
        );
    }
}
```

As you can see, we are doing the following:

- Create a class named Comments which extends Component
- Creating our element using `React.createRef()`
- Using `componentDidMount()` to set all the properties

Be sure to include your repo name on this line:

```JavaScript
scriptEl.setAttribute("repo", "your-repo-name-here");
```

Be sure to add your username too. For example, I would do `bjcarlson42/comments-coffeeclass.io` and not `comments-coffeeclass.io`.

#### Dynamic colorMode

If you want to dynamically change the color mode, you can do that too. Here is an example
of that using [Chakra-UI](https://chakra-ui.com/).

```JavaScript:Comments.js
import React, { Component } from "react";

export default class Comments extends Component {

    constructor(props) {
        super(props);
        this.commentBox = React.createRef(); // use ref to create our element
    }

    componentDidMount() {
        // dynamically getting color mode
        let colorMode = localStorage.getItem('chakra-ui-color-mode');
        const utteranceTheme = colorMode === "dark" ? "github-dark" : "github-light";
        scriptEl.setAttribute("theme", utteranceTheme);

        // or
        scriptEl.setAttribute("theme", 'github-light');

        // rest
        let scriptEl = document.createElement("script");
        scriptEl.setAttribute("src", "https://utteranc.es/client.js");
        scriptEl.setAttribute("crossorigin", "anonymous");
        scriptEl.setAttribute("async", true);
        scriptEl.setAttribute("repo", "your-repo-name-here"); // i.e. bjcarlson42/comments-coffeeclass.io
        scriptEl.setAttribute("issue-term", "url"); // you can change 'url' with other options
        this.commentBox.current.appendChild(scriptEl);
    }

    render() {
        return (
            <div style={{ width: '100%' }} id="comments">
                <div ref={this.commentBox} />
            </div>
        );
    }
}
```

Finally, we return the actual html:

```JavaScript:Comments.js
render() {
        return (
            <div style={{ width: '100%' }} id="comments">
                <div ref={this.commentBox} />
            </div>
        );
    }
```

> Make sure to add the `style={{ width: '100%' }}` otherwise your comment box will be squished. The `id=comments` is optional.

Now, go ahead and test it out by importing the component anywhere in your application! If you have questions feel free to leave them in the comments below - which uses utteranc ;).

Update Dec. 16, 2021: We no longer use utterancs! We have migrated to [Giscus](https://giscus.app).


How to add comments to a Next.js/React website? In this tutorial, we'll use utteranc - a comment solution which uses GitHub issues to store comments.

Add Comments To React/Next.js Website


## Introduction

Adding Google analytics to a Next.js website seems complicated, but is not that difficult. To begin, make sure you have
a [Google Analytics](https://analytics.google.com/) account with your project set up.

## Add The Tracking Code

Create a folder in your Next.js root directory called `lib`. Inside of here, create a file named `gtag.js`. Paste in the following
code:

```javascript:gtag.js
export const GA_TRACKING_ID = 'G-XXXXXXXXXX'

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
    window.gtag('config', GA_TRACKING_ID, {
        page_path: url,
    })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
    window.gtag('event', action, {
        event_category: category,
        event_label: label,
        value: value,
    })
}
```

Replace the `'G-XXXXXXXXXX'` with your tracking id (This can be found in the Google Analytics admin pannel for your website).

## Add GTAG To Document.js

Next, open up `_document.js`. If you do not have this file created already, [follow along with the docs](https://nextjs.org/docs/advanced-features/custom-document) and
and create a custom `_document` file for your site. Inside of here we will import our gtag and use it.

```javascript:_document.js
import { GA_TRACKING_ID } from '../lib/gtag'
// other imports

export default class MyDocument extends NextDocument {
    render() {
        return (
            <Html lang="en">

                {/* other code */}

            <Head>
                    {/* Global Site Tag (gtag.js) - Google Analytics */}
                    <script
                        async
                        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
                    />
                    <script
                        dangerouslySetInnerHTML={{
                            __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
                        }}
                    />
            </Head>

            {/* Other code */}

        </Html>
        )
    }
}
```

That's it! Once you [deploy to Vercel](https://vercel.com/) (or another hosting service of your choice) you should see analytics coming
through after 5 minutes or so.

![Realtime Views](/content/articles/add-google-analytics-to-nextjs/realtime.png)


Connect Google analytics to your Next.js website and track clicks, scrolls, page views, and more.

Add Google Analytics To Next.js Website


## The Problem

Recently, I was building a [Flutter](https://flutter.dev/?gclid=Cj0KCQjwsqmEBhDiARIsANV8H3aB8Bs-JYv8Pupzys4lwa3Trgh2gIfCWxUGsf4BuCIVxM0VJnT6sikaAmc_EALw_wcB&gclsrc=aw.ds) app and
I needed to map over an array of users when a user logged in and check if their username, password, and security question answer matched what was
in the database (the userArray). I tried to do something like this:

```dart
var userArray = ['User 1', 'User 2', 'User 3'];

userArray
    .map((user) => {
            if (user == 'User 1')
            {
                // log user in
            } else {
                    // don't log user in
                }
            });
```

> Quick note: I removed some of my project specific logic and only included the important parts so it is easier to follow.

This code logs the user in *if* they are user 1. This looks like it should work, right? Unfortunately, it doesn't. It will not break either. Instead,
nothing will happen. This makes it hard to debug.

## The Solution

The simple solution is to add `.toList()` to the end of the map statement.

```dart
var userArray = ['User 1', 'User 2', 'User 3'];

userArray
    .map((user) => {
            if (user == 'User 1')
            {
                // log user in
            } else {
                    // don't log user in
                }
            }).toList(); // add .toList() here!
```

## Why This Works

Unlike in [JavaScript](https://www.javascript.com/), in Dart when you `.map()` over an object, the `Iterable` that
is returned is `lazy`. This means it is not evaluated by calling `.map()`. To `evaluate` it, we need to call `.toList()`. You
can read more about this [here](https://api.dart.dev/stable/2.12.4/dart-core/Iterable-class.html).

If you want to quickly see this in action, open up [DartPad](https://dartpad.dev/?null_safety=true) and paste in the code below (with added print statements)
with and without `.toList()`.

```dart
void main() {
  var userArray = ['User 1', 'User 2', 'User 3'];

userArray
    .map((user) => {
            if (user == 'User 1')
            {
                print('logging user 1 in!')
            } else {
                    print('Not user 1, can\'t log in!')
                }
            }).toList(); // Remove .toList() to see no output!
}
```

## From The Flutter Docs

<br />

### .map()

> `Iterable<T>` `map<T>`(T Function(String) f)

Returns a new lazy Iterable with elements that are created by calling f on each element of this Iterable in iteration order.

This method returns a view of the mapped elements. As long as the returned Iterable is not iterated over, the supplied function f will not be invoked. The transformed elements will not be cached. Iterating multiple times over the returned Iterable will invoke the supplied function f multiple times on the same element.

Methods on the returned iterable are allowed to omit calling f on any element where the result isn't needed. For example, elementAt may call f only once.

### .toList()

> `List<Set<Set<void>>> toList({bool growable = true})`

Creates a List containing the elements of this Iterable.

The elements are in iteration order. The list is fixed-length if growable is false.

Dart and Flutter doesn't return data when I use .map() function on array list.

How To Use The map() Function In Dart


## Introduction

If you are familiar with Bootstrap, you know how easy it is to create a responsive nav-bar. In Chakra-UI,
there is no built in, out of the box solution. In this snippet, we will create a responsive
nav-bar component that you can use in your React app.

## Setup

We will be using Next.js in this example but it works for any react based framework. Navigate to the [Next.js GitHub repo](https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui) and
clone their starter example using Chakra-UI. If you don't want
to leave this page the command is:

```bash
yarn create next-app --example with-chakra-ui with-chakra-ui-app
```

Open this in your preferred IDE - mine is [VSCode](https://code.visualstudio.com/). Inside of `src/components`, open up the `DarkModeSwitch` component.
This is the only file we will be modifying.

## Imports

We will start by importing everything we need.

```javascript:DarkModeSwitch.js
import { useState } from 'react'
import {
  useColorMode,
  Switch,
  Flex,
  Button,
  IconButton
} from '@chakra-ui/react'
import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
import NextLink from 'next/link'
```

## Adding Desktop Content

First, wrap everything inside of a `Flex` element. Then, add the below code.

```javascript:DarkModeSwitch.js
<Flex>
<Flex position="fixed" top="1rem" right="1rem" align="center">
  {/* Desktop */}
  <Flex>
    <NextLink href="/" passHref>
      <Button as="a" variant="ghost" aria-label="Home" my={5} w="100%">
        Home
      </Button>
    </NextLink>

    <NextLink href="/about" passHref>
      <Button as="a" variant="ghost" aria-label="About" my={5} w="100%">
        About
      </Button>
    </NextLink>

    <NextLink href="/contact" passHref>
      <Button as="a" variant="ghost" aria-label="Contact" my={5} w="100%">
        Contact
      </Button>
    </NextLink>
  </Flex>

  {/* Mobile */}
  <IconButton
    aria-label="Open Menu"
    size="lg"
    mr={2}
    icon={<HamburgerIcon />}
    onClick={}
  />
  <Switch color="green" isChecked={isDark} onChange={toggleColorMode} />
</Flex>
{/* Mobile Content */}
</Flex>
```

## Adding Mobile Content

This is simply our desktop nav bar. We will add the mobile content below the comment. Let's do that now.

```javascript:DarkModeSwitch.js
{/* Code above */}

{/* Mobile Content */}
<Flex
  bgColor="gray.50"
  overflowY="auto"
  flexDir="column"
>
  <Flex justify="flex-end">
    <IconButton
      mt={2}
      mr={2}
      aria-label="Open Menu"
      size="lg"
      icon={<CloseIcon />}
      onClick={}
    />
  </Flex>

  <Flex flexDir="column" align="center">
    <NextLink href="/" passHref>
      <Button as="a" variant="ghost" aria-label="Home" my={5} w="100%">
        Home
      </Button>
    </NextLink>

    <NextLink href="/about" passHref>
      <Button as="a" variant="ghost" aria-label="About" my={5} w="100%">
        About
      </Button>
    </NextLink>

    <NextLink href="/contact" passHref>
      <Button as="a" variant="ghost" aria-label="Contact" my={5} w="100%">
        Contact
      </Button>
    </NextLink>
  </Flex>
</Flex>
```

## Using useState To Open And Close Navigation

Now that we have content, we need a way to show it. We can use `useState` for this. Before the
return statement, add the following:

```javascript:DarkModeSwitch.js
const [display, changeDisplay] = useState('none')
```

We now have a variable `display` set initially to none, and a method `changeDisplay` we can use
to change it.

Let's add this to our code. Note, I am only writing the components that we are changing below.

```javascript:DarkModeSwitch.js
<IconButton
          aria-label="Open Menu"
          size="lg"
          mr={2}
          icon={
            <HamburgerIcon />
          }
          onClick={() => changeDisplay('flex')} // added line
        />

<Flex
  display={display} // added line
  bgColor="gray.50"
  overflowY="auto"
  flexDir="column"
>

<IconButton
            mt={2}
            mr={2}
            aria-label="Open Menu"
            size="lg"
            icon={
              <CloseIcon />
            }
            onClick={() => changeDisplay('none')} // added line
          />
```

Now we should be able to open and close the menu! It looks a bit messy though. Let's add styles to the `Flex`.

```javascript:DarkModeSwitch.js
<Flex
  w="100vw"
  display={display}
  bgColor="gray.50"
  zIndex={20}
  h="100vh"
  pos="fixed"
  top="0"
  left="0"
  overflowY="auto"
  flexDir="column"
>
```

The important styles we added:

- Setting the height to 100vh
- Setting the width to 100vw
- Setting the position to fixed
- Making z-index 20 so it is above the page content
- Setting top and left to 0
- Setting the display to our dynamic display variable.

The rest is subjective.

## Completed Code

And that's it! Here is the completed code:

```javascript:DarkModeSwitch.js
import { useState } from 'react'
import {
  useColorMode,
  Switch,
  Flex,
  Button,
  IconButton
} from '@chakra-ui/react'
import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
import NextLink from 'next/link'


export const DarkModeSwitch = () => {
  const { colorMode, toggleColorMode } = useColorMode()
  const isDark = colorMode === 'dark'
  const [display, changeDisplay] = useState('none')
  return (
    <Flex>
      <Flex
        position="fixed"
        top="1rem"
        right="1rem"
        align="center"
      >
        {/* Desktop */}
        <Flex
          display={['none', 'none', 'flex','flex']}
        >
          <NextLink href="/" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="Home"
              my={5}
              w="100%"
            >
              Home
                    </Button>
          </NextLink>

          <NextLink href="/about" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="About"
              my={5}
              w="100%"
            >
              About
                    </Button>
          </NextLink>

          <NextLink href="/contact" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="Contact"
              my={5}
              w="100%"
            >
              Contact
                    </Button>
          </NextLink>
        </Flex>

        {/* Mobile */}
        <IconButton
          aria-label="Open Menu"
          size="lg"
          mr={2}
          icon={
            <HamburgerIcon />
          }
          onClick={() => changeDisplay('flex')}
          display={['flex', 'flex', 'none', 'none']}
        />
        <Switch
          color="green"
          isChecked={isDark}
          onChange={toggleColorMode}
        />
      </Flex>

      {/* Mobile Content */}
      <Flex
        w='100vw'
        display={display}
        bgColor="gray.50"
        zIndex={20}
        h="100vh"
        pos="fixed"
        top="0"
        left="0"
        zIndex={20}
        overflowY="auto"
        flexDir="column"
      >
        <Flex justify="flex-end">
          <IconButton
            mt={2}
            mr={2}
            aria-label="Open Menu"
            size="lg"
            icon={
              <CloseIcon />
            }
            onClick={() => changeDisplay('none')}
          />
        </Flex>

        <Flex
          flexDir="column"
          align="center"
        >
          <NextLink href="/" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="Home"
              my={5}
              w="100%"
            >
              Home
                    </Button>
          </NextLink>

          <NextLink href="/about" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="About"
              my={5}
              w="100%"
            >
              About
                    </Button>
          </NextLink>

          <NextLink href="/contact" passHref>
            <Button
              as="a"
              variant="ghost"
              aria-label="Contact"
              my={5}
              w="100%"
            >
              Contact
            </Button>
          </NextLink>
        </Flex>
      </Flex>
    </Flex>
  )
}
```


Create a responsive navigation bar using Chakra-UI. Mobile responsive, add animation using framer motion.

Chakra-UI Responsive Navigation Bar

Learn how to connect Next.js to Google's Firebase and use authentication, cloud Firestore, Realtime Database, and cloud storage.

Connect Firebase To Next.js

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.