
## Introduction

Whenever I work with Firebase, I always seem to run into small issues that can be very annoying (yet simple) to solve. When I tried to connect my Flutter 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:

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

If you don’t have those 2 things yet, you can read my last article where I go over how to do just that.

## 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](/images/connect-flutter-to-firebase/console.png)

1. Click on the Android Icon from the overview page

2. 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](/images/connect-flutter-to-firebase/add.png)

Step 2

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

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

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

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

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

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

6. 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](/images/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](/images/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](/images/connect-flutter-to-firebase/bundle-id.png)

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

3. Enter an app nickname and app store ID (both optional)

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

5. Skip the next 2 steps firebase tells you to do

6. 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 firebase!

Learn how to integrate Google's Firebase into your Flutter App.

Add A Firebase Backend To Your Flutter App Fast!


## Introduction

A few weeks ago I wrote an article detailing how you can quickly create a cross platform mobile app with React Native and run it on your device. Since that article got a lot of traction, I have decided to write a similar article with Flutter!

> Rather watch a video than read? Watch this article in video format on YouTube: https://youtu.be/0eAqiyIr-_Y

## What Is Flutter?

Flutter, built by Google, is a UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop. Flutter apps are built using the dart programming language.

The first step is to download the Flutter SDK from flutter’s website. Be sure to download the right one for your machine.

Next we need to unzip this folder and move it to somewhere more permanent. Find the zipped file in your downloads folder and double click it to unzip it.

Next, create a folder named Developer right under your main user. Inside that folder place the unzipped flutter folder. Here is my folder structure:

```bash
/Users/bjcarlson/Developer/flutter
```

Instead of bjcarlson you should see your username. This is for a mac but windows should be similar.

The final step is to tell our machine where to find these files whenever we want to use them! For this, open up a terminal window and write:

```bash
vim .bash_profile
```

Inside here we will write:

```bash
export PATH="$PATH:/Users/bjcarlson/Developer/flutter/bin"
```

Of course, replace my username for yours. To exit and save write:

```bash
:wq!
```

After this quit and restart terminal.

To make sure everything works, open up terminal again and write:

```bash
flutter --version
```

If you get the following output, you have done it correctly.

![Python](/images/create-a-flutter-app-fast/1.png)

Now we can create an app.

Navigate to where you want to place this app and run ```flutter create my_awesome_app```

Move into the folder and run the run command.

```bash
cd my_awesome_app
flutter run
```

That’s it! Your app will now start on an actual device if you have one connected, or a simulator if you set that up. For info on that see flutters docs.

Happy coding!

Learn how to create a cross platform android and IOS mobile app using dart and Flutter.

Create a Cross Platform Mobile App With Flutter in Under 5 Minutes!


## Introduction

Recently I make two YouTube videos detailing how to use Python and Selenium to code an Instagram Bot. Today, I am taking those videos and putting them into article format so you can follow along and copy/paste code! Just like the videos, I will be splitting these articles into 2 parts. You can watch the first video here:

> Remember, this is for educational purposes only. I do not recommend using this outside testing and exploring purposes because Instagram does not allow bots!

## Prerequisites

The following are items you need installed before you begin.

### Python

- Navigate to https://www.python.org/downloads/ and download the latest version.

### Virtualenv

- Run the following command:

```bash
pip install virtualenv
```

(Note: you need pip installed to run the command)

### Selenium

- Navigate to https://www.selenium.dev/downloads/ and download the latest version

### WebDriver for Chrome

- Navigate to https://chromedriver.chromium.org/downloads and under Current Releases download the version for your Chrome Browser (81, 80, or 79)

- Unzip the file

- Run the following command:

```bash
mv ~Downloads/chromedriver /usr/local/bin
```

(Note: There is a space after …chromedriver and /usr…)

After you have those three things, we are ready to start!

## Setting Up The Environment

We will be using a Python virtual environment to keep this project and its dependancies separate from other projects on your machine.

Make a new folder where you want to store this project, move into that folder, and then create a new virtual environment.

```bash
mkdir <projectName>
cd <projectName>
virtualenv -p python3 <venvName>
```

Next, activate the virtual environment.

```bash
source <venvName>/bin/activate
```

Next, let’s install Selenium. Selenium is our one dependency for this project and it allows us to automate web browsers.

```bash
pip install selenium
```

Finally, open those files in a code editor of your choice.

## Time To Code!

I mentioned that we are going to be making an Instagram bot. More specifically, we will be writing code to automate logging in to Instagram, searching a hashtag from the explore page, and liking and commenting on each picture.

Create a file named bot.py at the same level as your vitualenv.

Inside this file, write the following code:

```python
from selenium import webdriver
from time import sleep
from selenium.webdriver.common.keys import Keys
from random import randint
```

We will use each of these imports and discuss what they each do when we use them.

Next, let’s declare some standard Python boilerplate code:

```python
class Bot(): 
    def __init__(self):
        self.login('benscstutorials')
   
    def login(self, username):
        print('hi')
def main():
    my_bot = Bot()
if __name__ == '__main__':
    main()
```

The above code will print ```hi``` if you run it.

Next, lets declare an instance of our webdriver. The following code will all be written in the login def.

```python
self.driver = webdriver.Chrome()
```

We can now user driver to call various methods that webdriver gives us access to. First, we need to open instagram. We can do that with the get method.

```python
self.driver.get('https://www.instagram.com/')
```

If we run this with python -i bot.py, you will see an automated webbrowser window open up and navigate to Instagram.

Pretty cool, right!

Next, we need to wait for Instagram to open. This is where sleep comes in. We can use sleep to make our code go idle for a specified number of seconds.

```python
sleep(5)
```

Now, we need to insert our username and password into the form and hit login. To do this we can get each element by xpath, and use the send_keys() method to send text!

To get the element xpath, right click on the element and click inspect. This will bring you to the source code. Next, right click on the source code for that element. Towards the bottom you will see copy, copy xpath.

![Python](/images/python-automation-with-selenium/2.png)

Do this for both username and password. Then, in your editor write the following code in the login method:

```python
username_input = self.driver.find_element_by_xpath("//input[@name='username']")
username_input.send_keys(username)
password_input = self.driver.find_element_by_xpath("//input[@name='password']")
password_input.send_keys(pw)
```

You will notice that i am sending the variable pw instead of my actual password. This is for security reasons. Make a new file called ```secrets.py``` and inside it, declare your password as such:

```python:secrets.py
pw = 'XXXXXX'
```

Then, at the top of bot.py write

```python:bot.py
from secrets import pw
```

The next step is to click login.

To do this, copy the xpath of the submit button and use the click() method.

```python
submit_btn = self.driver.find_element_by_xpath(“//button[@type=’submit’]”)
submit_btn.click()
```

This should log us in!


You will notice that a popup appears when you log in asking you if you want to turn on notifications.

![Python](/images/python-automation-with-selenium/3.png)

We want to hit not now. Again copy the xpath and use the click() method.

```python
sleep(5)
not_now_btn = self.driver.find_element_by_xpath(‘/html/body/div[4]/div/div/div[3]/button[2]’)
not_now_btn.click()
```

Be sure to add ```sleep(5)```. If you don’t instagram will not be loaded fully and your code will fail!

Your final code should look like such:

```javascript
from selenium import webdriver
from time import sleep
from secrets import pw
from selenium.webdriver.common.keys import Keys
from random import randint
class Bot():
    def __init__(self):
        self.login('benscstutorials')
    
    def login(self, username):
        self.driver = webdriver.Chrome()   
        self.driver.get('https://www.instagram.com/')
        sleep(5)
        username_input = self.driver.find_element_by_xpath(
            "//input[@name='username']")
        username_input.send_keys(username)
        password_input = self.driver.find_element_by_xpath(
            "//input[@name='password']")
        password_input.send_keys(pw)
        submit_btn = self.driver.find_element_by_xpath(
            "//button[@type='submit']")
        submit_btn.click()
        sleep(5)
        not_now_btn = self.driver.find_element_by_xpath(
            '/html/body/div[4]/div/div/div[3]/button[2]')
        not_now_btn.click()
def main():
    my_bot = Bot()
if __name__ == '__main__':
    main()
```

## Conclusion

That’s it! In the next post I will continue this and discuss how to like and comment on posts by hashtag.

> Update: there is no next post but feel free to watch the video tutorial on YouTube!

Create a Python bot to automate following, commenting, and liking on Instagram!

Python Automation With Selenium


## Introduction

React Native is a JavaScript framework for building cross platform mobile apps. In this tutorial, I’ll show you how to quickly set up a React Native project and run your app on your actual device! The code for this tutorial can be found on my GitHub.

## Expo

In this tutorial, we will be using expo 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](/images/react-native-starter/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 App

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.

![react native](/images/react-native-starter/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.

![react native](/images/react-native-starter/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.

## Conclusion

Now go out and start building the app of your dreams! If you want the exact code I used in this tutorial, it can be found on my GitHub and this post and more can be found on my website. Happy coding!

Learn how to create a cross platform android and IOS app with React Native!

Create an IOS and Android app in Under 5 Minutes With React Native!


## Introduction

As a computer science student, I am always looking for another cool side project to keep me busy. These ideas for side projects can come from anywhere; sometimes from the places you least expect.

The other day I was scrolling through TikTok when I can across this video. Basically, it’s about how there are people in this world born on the same day and were in the same hospital are you were. Neat, right? I then looked at the comments and multiple users were saying there should be a website for this. Immediately I knew what I had to do. In this post, I will talk about how I was able to build and deploy this site in only a few hours completely for free by using various popular coding technologies.

### The Idea

Before I talk about the technology, I want to quickly discuss what I am trying to build. Essentially, it is a website where users can create an account and input their information like their name, birthday, hospital name, and snapchat username (for a way to contact). After they do this, they can see a table of every other user who has inputted their information. They can then (hopefully) find others with the same birthday and hospital!

Over time I plan to add new features (because right now this is essentially an Excel spreadsheet clone), but for the moment that is the idea.

### The Technology

Now for the interesting part. Let’s look at the technology I used to build this.

### Next.js

Right off the bat I knew I was going to build this in Next.js. I had just finished uploading a tutorial series on YouTube about it and I built my personal website using it so I was confident I could quickly and easily get this site up and running with Next.js.

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

### Firebase

My next challenge was deciding how and where to store the data. For this, I turned to Google’s Firebase. I had worked with Firebase before in various forms, including with Flutter and Vanilla JavaScript, but not yet with Next.js. No problem though, because Next.js has amazing documentation and example projects. I was able to clone this firebase auth repo and get on my way. As seen by the repo name, Firebase also helped in another way; providing a means of authentication.

> Firebase helps mobile and web app teams succeed

### Bootstrap + react-bootstrap-table-next + HTML/CSS

To quickly build a UI for this site, I turned to Bootstrap, specifically react bootstrap. Using it, I was able to code the Nav bar and the Modals quickly. Then, I used npm package “react-bootstrap-table-next” to build the table for the data. This allowed be to dynamically generate the data and add a search bar easily (see code below). Both of these technologies accounted for 99% of my UI.

I also used HTML and CSS for some basic markup because, let’s face it, you can’t build a website without them.

I got an idea for a weekend coding project from Tik Tok. In this post I'll go over my tech stack.

How TikTok Gave Me the Perfect Coding Side Project


## Introduction

The Rubiks cube is a popular puzzle in which the goal is to solve a 3x3 cube by matching the colors on each side. In order to solve the cube, you first need to scramble it. There are rules for how to do this but in general a scramble consists of 20 random moves performed in sequence. In this post, I will show you how to implement a scramble in JavaScript. The code for this tutorial can be found on my GitHub.

## What's A Scramble?

A scramble is a sequence of 20 moves that are performed on a solved cube. These 20 moves are picked randomly from the following set of moves:

![Scramble moves](/images/using-javascript-to-scramble-cube-1/2.png)

Each of the above letters are rotations of the cube. They stand for:

- F — Front
- R — Right
- U — Upper
- B — Back
- D — Bottom (Down)

A single letter means you rotate that face of the cube clockwise. If there is a ' (single quote) after the letter, you move that face counterclockwise. Likewise, if there is a 2 after the letter, you move that face on the cube twice.

For example, F2 means you turn the front of the cube clockwise 2 times. B’ means you rotate the back of the cube counterclockwise one time.

Here is a great visual I found on ruwix.com to help you understand this better.

![Scramble moves](/images/using-javascript-to-scramble-cube-1/1.png)

## Example Scrambles

Here are some example scrambles of the cube. This is what we will be writing JavaScript to do for us.

![Scramble moves](/images/using-javascript-to-scramble-cube-1/3.png)  

## JavaScript Scrambler

Now let’s start writing JavaScript code to scramble the cube for us.

First, I will declare a function named makeScramble().

```javascript:main.js
function makeScramble() {
    // function code here
}
```

Next, we need to declare 2 arrays. The first array will have all of the options I listed above in it. This array will be where we pick the moves from. The second array will be empty. This is where the scramble will go.

```javascript
var options = ["F", "R", "U", "B", "L", "D", "F2", "R2", "U2", "B2", "L2", "D2", "F'", "R'", "U'", "B'", "L'", "D'"]
var scramble = []
```

Let’s step back and think about how we want to approach this next part. We need to randomly select one element in the first array and put it into the second array. We then need to repeat this 19 more times so we have a scramble with 20 elements.

Let’s tackle the first part. To randomly select an element in the firrst array, we need can generate a random number from 1 to 18 and then put whatever move at that index into the new scramble. Luckily for us, there is a JavaScript Math library that can help us do this.

```javascript
function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}
```

The above code is doing a few things. First, it is declaring a function called getRandomInt. This functions accepts a value max. In our case this value will be 18 because we want to generate a random number from 1 to 18. The inner line of the function is returning that random number for us.

## Push And Pop

Now that we have a way to randomly get an element in the first array, we need to put it into the second array. JavaScript, like other languages, has built in methods for doing common tasks. One of these methods is called push. This method works on arrays and allows us to push one item onto the array. In our case, we will be pushing one string move onto the array.

```javascript
scramble.push(options[getRandomInt(18)])
```

The above code gets a random int from 1 to 18 using the getRandomInt method, gets the corresponding cube rotation at that index in array options, and pushes it onto the new array, scramble.

If you run this code, only one move will be in the new array. To push 20 moves into the array, we can use a for loop.

```javascript
for (var i = 0; i < 20; i++) {
  scramble.push(options[getRandomInt(18)])
}
```

If you run this code, you will see that the array named scramble now has 20 random moves in it.

pop is similar to push except instead of adding an element to the array, it removes the last element. We do not use that here, but I brought it up because it is the opposite of push and is very useful.

## Conclusion

I hope you enjoyed and learned something from this post! To recap, we went over a Basic Rubik’s cube notation and terminology, talked about two JavaScript concepts: functions and arrays, and finally looked at array’s built in methods, push and pop, and implemented push with a for loop.

I am making a web app that required me to make a rubiks cube scramble. I will show you how to implement this algorithm in JavaScript.

Using JavaScript To Scramble A Rubik’s Cube


## Introduction

This is a follow up post to the post I wrote just the other day on scrambling a Rubik’s Cube with JavaScript. If you haven’t read that post yet be sure to check it out here and then come back to this post. In this post, I will improve the JavaScript scrambler. To do that, we will unfortunately have to rewrite most of the code, but the fundamental design stays the same. Let’s get to it!

## What’s a Scramble

You should already know what a Rubik’s cube scramble is (assuming you read the first post), however, here is a quick refresher just in case. A scramble is a sequence of 20 moves that are performed on a solved cube. These 20 moves are picked randomly from the following set of moves:

F, R, U, B, L, D, F2, R2, U2, B2, L2, D2, F', R', U', B', L', D'

Here are some example scrambles:

B2 R F' L2 R B L2 F' D' L2 F L2 R' U B D' F D' U2 R' 

B' D U2 F' L U' R2 L' D B D' R2 B' F' R2 B2 D2 R B D2 

L' R2 U2 F U' B' D2 B D B' F2 U R2 F2 U' L2 B2 R2 L U'

## The Problem

The problem with the last post was that our scrambling algorithm doesn’t account for the possibility of 2 of the same move being next to each other. For example, we might get a scrambles that look like these:

B2 R F' L2 R B L2 F' L' L2 F L2 R' U B D' F D' U2 R' 

B' D U2 F' L U' R2 R2 D B D' R2 B' F' R2 B2 D2 R B D2 

L' R2 U2 F U' B' D2 B D B' F2 U R2 D D L2 B2 R2 L U'

At first these scrambles might not look like an issue, however if you look closer, you will see that the first scramble has a L’ and a L2 directly next to each other. The last scramble has two D moves next to each other. This makes no sense. Take the last scramble for example. It’s the one with two D moves next to each other. That is the same as saying D2. Essentially, that scramble is now 19 moves, not 20. This is a problem, especially when we get 3 or 4 moves like this in our scrambles

Additionally, having a R followed by an R’ makes no sense because they just cancel each other out! All we did was move the cube twice to get to the same spot. When this happens multiple times in a scramble, our scrambles could be 15 or less moves instead of 20!

## The Fix

This may seem like a simple fix but it is not quite that easy. It is hard to check if 2 adjacent moves are the same type. We need to think about solving this in a different way than we did last time. Let’s take a look at the options for each scramble again.

F, R, U, B, L, D, F2, R2, U2, B2, L2, D2, F', R', U', B', L', D'

We can see that there are 6 different moves by letter. There is F, R, U, B, L, and D. Furthermore, there are 3 different moves for each of these. A single clockwise move (F), a double move (F2), and single counter clockwise move (F’). These make up our 18 possible moves (6 x 3 = 18).

We can use numbers to represent the scramble. We will assign F to 0, B to 1, and so on. Then at the end, we can substitute the letters back in and can be sure that no of the same letters will be next to each other.

## Coding the Solution in JavaScript

We can now approach this problem using this knowledge. Let’s start off by giving each of the 6 possibilities a number 0 through 6 and store them in an array. We will call this array numOptions.

```javascript
var numOptions = [0,1,2,3,4,5]
```

Now, we can randomly add these numbers to another array named scramble until we have 20 random letters in the array. Remember, a Rubik’s cube scramble is 20 moves.

```javascript
var scramble = [] // initialize to empty


    for (var i = 0; i < 20; i++ ) {
        scramble.push(numOptions[getRandomInt(6)])
    }

    // random int code from last tutorial
    function getRandomInt(max) {
        // returns up to max - 1
        return Math.floor(Math.random() * Math.floor(max))
    }
```

Now, we have an array of 20 random numbers from 0 to 5! Now, some of you are thinking, we still have the same problem as last time. If that’s you, you’re absolutely right. We still have the possibility for a two 3’s to be next to each other or two 1’s. However, since we are using numbers (as opposed to letters), it is super easy to loop through the array and check this. We can now write code to generate an array of 20 numbers, loop though and check to see if any of the same number are next to each other, and if they are, generate the array again.

```javascript
var bad = true

    while (bad) {
        scramble = []
        for (var i = 0; i < length; i++) {
            scramble.push(numOptions[getRandomInt(6)])
        }
        // check if moves directly next to each other are the same letter
        for (var i = 0; i < length - 1; i++) {
            if (scramble[i] == scramble[i + 1]) {
                bad = true
                break
            } else {
                bad = false
            }
        }
    }
```

To briefly explain the code above: we declare a boolean bad and set it to true. The next block of code we already saw. Then, we check the scramble by looping through the array. It compares the value at index 0 to the value at index 1. If they are not equal it moves on and checks the rest of the array in the same fashion. If at any point two numbers are equal, it breaks, regenerates the scramble, and checks again.

## Adding the Letters

The final step is to substitute letters for the numbers. We will do this by declaring an array of all possible options and then writing a switch statement nested inside a for loop to substitute the right letters for each number.

Ex. If the number is 3, we will place either a B, B2, or B’ (randomly of course).

```javascript
var options = ["F", "F2", "F'", "R", "R2", "R'", "U", "U2", "U'", "B", "B2", "B'", "L", "L2", "L'", "D", "D2", "D'"]
var move

for (var i = 0; i < 20; i++) {
        switch (scramble[i]) {
            case 0:
                move = options[getRandomInt(3)] // 0,1,2
                scrambleMoves.push(move)
                break
            case 1:
                move = options[getRandomIntBetween(3, 6)] // 3,4,5
                scrambleMoves.push(move)
                break
            case 2:
                move = options[getRandomIntBetween(6, 9)] // 6,7,8
                scrambleMoves.push(move)
                break
            case 3:
                move = options[getRandomIntBetween(9, 12)] // 9,10,11
                scrambleMoves.push(move)
                break
            case 4:
                move = options[getRandomIntBetween(12, 15)] // 12,13,14
                scrambleMoves.push(move)
                break
            case 5:
                move = options[getRandomIntBetween(15, 18)] // 15,16,17
                scrambleMoves.push(move)
                break
        }
    }
    
function getRandomIntBetween(min, max) { // return a number from min to max - 1. Ex. 3, 9 returns 3 - 8
    return Math.floor(Math.random() * (max - min) + min)
}
```

You will notice we have another function that gets a random number between 2 numbers called getRandomIntBetween. I added this because we need to be able to get a random number between 2 numbers and our current randNum function only allowed us to get a random number from 0 to a specified number.

## Conclusion

After seeing how I solved this problem, can you solve it better? I would love to see if there is a better solution! If you give it a try, let me know in the comments. You can get the code for this tutorial on my GitHub.

Using JavaScript To Scramble A Rubik’s Cube: An Improved Algorithm


## Introduction

React hooks allow you to perform side effects in function components. In this post, we will take a look at ```useEffect``` and give examples
of how to use in in [next.js](https://nextjs.org/).

## Using useEffect In Next.JS

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!

First, we will import ```useEffect``` from react.

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

Next, call the method:

```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)
    }
```

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.

Blog (8 posts)