Chris Nunes

Beginner Series: Git and Github

2021-03-09T16:15:00-06:00

Introduction

Welcome to the Beginner Series! This is a series of posts designed to introduce people to different concepts and technologies that I think are cool or useful.

This tutorial will give you a brief overview of how to get started with Git. Git is a tool that is used for version control and collaboration, and it is an essential part of working on any large coding project.

In this guide, we will be going over how to do some basic operations:

Creating a new “repository”
Downloading your repository to your local machine
Making changes to the repository
“Pushing” your local changes
“Pulling” any remote changes

There are a lot of features that Git provides, but these are the most basic ones, and are all that you need to get started!

You can use these links to skip around between different sections in the tutorial.

Prerequisite: Install Git and create a Github Account
Creating a Repository on Github
Cloning Your Repository
Finding Your Files
Editing Your Files
Pushing Your Local Changes to Git
Pulling Remote Changes to Your Local Machine
- Creating a Remote Change
- Pulling a Remote Change

Prerequisite: Install Git and create a Github Account

Before we can start working with Git, we need to actually install it on our computer! You can go to this link to learn how to install Git on your specific operating system.

Once you’ve done that step, you should be able to use Git on your computer. You can confirm that this works by typing git --version in your terminal.

You should see output like git version 2.24.1 (Apple Git-126). If you see something like command not found: git, then the installation probably did not work and you should try again.

After this step, we want to create a Github account. Github is a website that lets you host your code and collaborate on projects with others. You can think of it as something like Google Drive, where you can upload your projects, download them, and share projects with others.

Step 1: Creating a Repository on Github

Each Git project is called a “repository”. A repository tracks all the changes that you make to your code, and allows you to use Git features like “pushing” and “pulling”. To create a new repository, go to github.com/new/.

Once on that page, you should see this view:

These are the steps to create a new repository

You have to fill out this form to create a new Git repository. You can fill out most of these fields with whatever you want, such as Repository name and Description. However, when creating this first repository, make sure that the “Add a README file” box is checked.

Select the "Add a README file" option

This will create a single file called README.md in your repository, instead of creating a new empty repository. The README.md is the first thing people see when they view your repository on Github, so it is a great place to put a description of your project, or instructions on how to use it.

Step 2: Cloning Your Repository

Now that our repository is created on Github, we are in an interesting situation. Our repository exists remotely on Github, but it doesn’t exist locally on our personal computer. Imagine a file that exists on Google Drive, but you don’t have on your computer. So, our next step is to download our repository to our local computer.

When working with Git, downloading/copying a repository to our computer is referred to as “cloning” the repository. From here on out, that is how I will be referring to it.

To clone our repository from Github, we need to view the repository online. It should already be pulled up in your browser after creating the repository, but if it isn’t, you can go to https://github.com/<your_username>?tab=repositories and click on a specific repository.

When you have a specific repository open, you should see this view (with a different repository name and username):

Your empty repository!

This shows you all the files that are in your repository, as well as other information such as the repository name, the description, and other useful things. This is a nice page to go to find any information you need about a repository.

To clone our repository, all we care about is the green button that says Code. If you click on it, it will open a little window showing you different ways to clone your repository.

You want the url that starts off "https://github.com/your_username/...."

These options (HTTPS, SSH, and Github CLI) all have different uses, but for this tutorial, we will use HTTPS. To clone your repository, first copy the URL that it shows you in the dialogue box.

Then, open up a terminal window on your computer and navigate to the directory where you want to clone the repository. For instance, you could navigate to your desktop directory.

Then, enter the command git clone <github_url>, where <github_url> is the HTTPS url that you copied a moment ago. If everything is set up correctly, the repository will be cloned, and you will see the following:

Cloning Git repository from the terminal

Once that command successfully executes, the repository will be on your computer, and there will be a folder on your computer with all the repository files on it.

If you know where this repository is located on your computer, you can skip to Step 4. If not, Step 3 will tell you how to find your repository!

Step 3: Finding Your Files

If you’re not familiar with Git or using your terminal, your first question will probably be something like “Where did the files get downloaded? How do I find them?”. These are fair questions that we need to resolve before moving on.

Rather than doing a scavenger hunt to find the files, we’re going to run a command to find where the repository was downloaded. In your terminal where you just cloned the repository, run the command that matches your computer:

MacOS/Linux: pwd
Windows: cd

These commands will both output one line containing the current directory. The current directory also happens to be the directory where we just cloned our repository! We can use this info to find where our repository is in our file system.

So for example, if pwd or cd tell you that you’re in the directory Users/Chris/Desktop, and the name of your repository is test-repo, then the path to the repository will be Users/Chris/Desktop/test-repo.

Once our files are located, we can go to the next step, which is opening our files to edit them.

Step 4: Editing Your Files

If you’re following this tutorial, you’re probably at least somewhat familiar with writing code. At the very least, you’ve edited a file before. All that we’re doing in this step is editing our README.md file so that we have some changes to push to Git.

To begin, open the recently cloned README.md file in any kind of text editor. Change your file so that it looks something like this:

# My first Github Repository!

I am learning how to use Git and Github, and this is my first repository!

The specifics don’t matter, we just want to make sure it’s different than it was before. Save your changes, and we’re ready for the next step!

Step 5: Pushing Your Local Changes to Git

Right now, we have local changes on our computer, but our remote repository doesn’t have the changes. This is consistent with our Google Drive Analogy. If you download a file from Google Drive and edit it, the version of the file on Google Drive won’t be changed until you re-upload the file.

So logically, once we’ve made our local changes, the next step is to “push” the changes to the remote version. However, first we need to learn about Git commits. A Git commit is like a milestone or checkpoint along the timeline of a Git project. When you make a commit, you are encapsulating all the changes that have been made since the previous commit.

Another important Git concept is adding files to Git. While Git automatically tracks all the changes you make to your files, it won’t actually care about the changes unless you use the git add command. Using git add <filename> tells Git that you want to include the <filename> file in the next commit.

With those two concepts in mind, here is how the process of pushing local changes to Github works:

Tell Git which changes you want to add, using the git add <filename> command
Create a single commit to summarize the changes you have made using the git commit -m "<message>"
Finally, push our new commit (and all the changes it contains) to our remote repository using git push

Example Add/Commit/Push

We’ll use our changes to README.md to demonstrate how this works. At this point, your README.md file should be updated with more text, like this:

# My first Github Repository!

I am learning how to use Git and Github, and this is my first repository!

Now that the change is done, we should make sure that Git has noticed. In your terminal window, navigate into the git repository. Once there, run git status. You should see something like this:

The modified file is highlighted in red

As we can see, Git sees that README.md has been modified. We can also see that Git says that there are “no changes added to commit”. We can fix this by using the command git add README.md. This command should give back no output (if all goes well).

Once you have added the README.md file, re-run git status to see what has changed.

Now that we have used 'git add', the file is green

Now, our modified README.md is now ready to be committed! To commit the change, we use the git commit -m "<message>" command, where <message> is an informative message describing what changes were made.

To commit the README.md changes, I would use the command git commit -m "updated README with repo description". As you can see, the message doesn’t have to be particularly formal or long, it only has to describe the changes made.

Using 'git commit' with a commit message

Once you have run the git commit command, we are ready to push our code to the remote repository. This command is simple: git push. Running this command should give the following output:

A lot of nonsense, but no errors!

If all goes well, our change should be pushed to the remote repository! We can easily verify that the changes are present by opening/refreshing the repository page on Github. Now that the README.md is changed, so has the repository web page!

Our repository shows our changes!

Woohoo! Let’s review what we’ve done.

Created a repository on Github
Cloned the repository to our local machine
Edited one of the files in the repository
Added the changed file to our next commit using git add
Created a new commit of our changes using git commit
Pushed our local changes to Github using git push

On top of all of this, there is one more important skill that we need to learn in order to collaborate using Git. We have learned how to add our local changes and push them to the remote repository, but we don’t know how to pull remote changes onto our local machine.

We could do this by re-cloning the repository every time we wanted new changes, but this would cause us to lose any local changes that we hadn’t saved, and it would be very overkill. As it turns out, there is a way to pull only the changed files from the remote repository, instead of re-cloning the entire repository.

Step 6: Pulling Remote Changes to Your Local Machine

We can pull changed files onto our local machine by using the git pull command. This command will download all the changed files in the remote repository to your local repository.

This command is very useful when working on projects with other people! For example, if you are working on a project with a friend, you can both just push your own code and pull the other’s code easily.

Fun fact: before I knew how to use Git, my friends and I would always send code back and forth through email or Facebook chat. Git has made collaboration much faster and better!

Creating a Remote Change

In order to actually demonstrate the git pull command, we need changes in our remote repository that do not exist locally. So, we need to edit our remote repository using the Github web interface.

To do this, view your repository on Github and find the “Edit README” button on the main page (circled in red).

Click on the pen icon circled in red

Click on this button, and it will take you to a screen where you can edit your README.md file. For the sake of this example, just change your README.md file in some noticeable way.

For example, I edited my file to look like this:

# My first Github Repository!

I am learning how to use Git and Github, and this is my first repository!

I made this change from Github.com! :0

Once you’ve edited the text to something you like, scroll down until you find the “Commit Changes” section of the page.

Add your commit message here

Just like we had to provide a commit message when using git commit -m "<message>", we will also need to provide a message when we make changes online. Once again, the message can be something simple, like "Changed README from Github".

Once you add your message, click the “Commit Changes” button and your changes will be saved.

Now that we have a new change on our remote branch, we need to figure out how to get that change on our local branch as well!

Pulling a Remote Change

Now that we have a change in the remote repository, we need to download, or pull, the change to our local repository.

To do this, navigate using your terminal to the git repository that we were working in before. This will be the same folder where we ran the git clone, git add and git push commands earlier.

Once there, we just need to run one command: git pull. This will download all the changes from the remote repository that we do not currently have on our local machine.

If the command is executed successfully, you will see an output similar to the output from git push or git clone.

We can see the new changes highlighted in green

Now if you open your README.md file in a text editor, you’ll see that the file has the new edit that you made on Github!

Conclusion

Now you know the basics of Git! In your everyday use, you will mainly use git add, git commit, and git push. However, there is a massive world of Git uses that we didn’t cover in this tutorial, and you’ll likely run into them in the future when you start collaborating with Git.

To continue learning, I would recommend putting all of your projects into a Git repository and hosting them on Github! This is a useful way to back up your projects, and also a good way to flex your projects to your friends (and recruiters!)

On an unrelated note, below is a link to my Github account! Feel free to go follow me and star all of my cool projects 👀.

My Github

Super Speedy Blog Post Workflow

2021-01-31T10:21:00-06:00

Introduction

Like the archetypal tech nerd, I like to script literally anything that can be done programmatically. I have scripts on my computer to deploy websites, text friends, and show/hide my desktop icons. I even built a system with a servo motor and a reed switch to turn off my light when I left my room.

All this to say, I like to save time. In this post I’ll be sharing some shortcuts I use to make writing blog posts much faster. This post will be short and sweet, just like my blog post workflow.

The Problem

This blog is created using https://jekyllrb.com/, which means that each blog post is written in markdown. So, whenever I want to create a new post, I have to create a new markdown file in a Jekyll-specific format. For example, this is a boilerplate markdown file that I used for posting Leetcode solutions.

---
layout: post
title: 
date: yyyy-mm-dd 12:34
description: Solving Leetcode problem ""
tag:
  - leetcode
  - easy
  - arrays
link: 
---

** Problem goes here **

##### [Try it on Leetcode](/){:target="_blank"}

All the data at the top within the two “---” lines is post metadata, while the bottom part of the file is where the actual post content goes.

This would be annoying to type out for each new post, and copying and pasting it from an existing file would take FAR too long.

The Solution

My goal was to create one terminal command that would create a new markdown file with Jekyll post metadata already in place. In the end, I didn’t accomplish this exact goal, but I got close enough to make it equally seamless.

The end result I achieved was this: whenever I enter the command post on my terminal, it will open a new markdown in Typora, a markdown editor that I like. Then, the markdown template will be automatically copied to my keyboard, so I just have to paste it into the document to get started.

In the end, the entire process only takes a few seconds from beginning to end:

How it Works

The actual programming for this is really short, but it can be confusing if you are new to working with scripts. First, I created a file in my home directory called post_template.md. This is the file that will contain the post template that we want to use. I use a slightly more generic template than the one I showed above, so the contents of my post-template.md file are:

---
layout: post
title: 
date: yyyy-mm-dd 12:34
description: 
tag:
  - 
  - 
  - 
link: 
---

##### [Try it out](/){:target="_blank"}

I save this file in my home directory, but you can save it wherever you want.

Next, we need to copy the contents of this file to the keyboard. Doing this programmatically is a two-step operation:

Use the cat command to output the contents of the file
Use piping to redirect the output into our clipboard

To accomplish this on a MacOS terminal, you would run this code: cat ~/post-template.md | pbcopy.

The cat ~/post-template.md command on its own simply prints out the contents of the file to the terminal. When | pbcopy is appended, it sends the contents of the file to the user’s clipboard, as if they had copied it themselves.

Note that this command assumes that the post-template.md file is in the home directory. If the file was in a different location, the command would have to be updated to reflect the new file path.

Once this is done, we need to open up the Typora application. This is much simpler, and the command is just open -a Typora.

Now, we can condense these commands and run both of them in just one line of input. To combine these commands so that they can both be entered on the same line, we simply join them together with a semicolon. So, our new (longer) command is cat ~/post-template.md | pbcopy; open -a Typora.

Now if we input that command into a terminal, we will have the template copied to our keyboard and Typora will open. However, this isn’t enough! We don’t want to type out that whole thing every time we want to create a new blog post. Instead, we just want to enter post and have the terminal know what we mean.

We can accomplish this using an alias. An alias does what the name implies: it takes a command and gives it a different name. This allows us to give simple names to longer or more complicated commands.

In our case, we want to run cat ~/post-template.md | pbcopy; open -a Typora whenever we enter the command post. We are aliasing the longer command and giving it a shorter name.

To add an alias to your system, you need to modify the ~/.zshrc or ~/.bashrc file on your system, whichever one it uses. I have a newer Macbook, so I use a zsh shell. Inside of my ~/.zshrc file, I added the line alias post='cat ~/post_template.md | pbcopy; open -a Typora'. This line is long, so we can break it down.

An alias always starts with the keywords alias <alias_name>. The placeholder <alias_name> is the alias that you are giving the longer command. Then, we have the second part of the line: alias <alias_name>='<long_command_1234>'. The placeholder <long_command_1234> represents the longer command that you are aliasing.

In the end, we create an alias named post for our longer command. After reloading our zsh session, we can run post and it will copy the template to the keyboard and open typora!

Recap

To recap, here were the steps I took to set up this workflow:

Create a markdown file with the template we want to use for posts.
Create a script to copy the template file to our clipboard and open Typora
- cat ~/post-template.md | pbcopy; open -a Typora
Add an alias to our ~/.zshrc directory
- alias post='cat ~/post_template.md | pbcopy; open -a Typora'
Gain ability to write start a new blog post by running post in terminal
Profit???

As far as scripts go, this one is tiny, and it really only saves me about 20 seconds of typing every time I start a blog post (which is not often). BUT — I made it, and using it makes me feel like a terminal master.

Hopefully this gives you great inspiration for your own productivity scripts, or serves as a nice little guide if you’ve never done anything like this before. Either way, I hope you enjoyed, and if you haven’t yet, read my most recent post about how I created an interactive, real-time chess game!

How I Created my Interactive, Real-Time Chess Game

2021-01-28T17:12:00-06:00

If you haven’t noticed, if you go to chrisnun.es on a desktop computer, there is a big chess board floating up and down. If you click on the board, you have the option to challenge me to a chess game, which can be played out in real time!

Conveniently, if you don’t have the time to sit down and play a full game of chess, the website will save your progress and we can resume the game later. At the time of writing this, I have received a few anonymous challenges through the website, but not one person has followed up and played a game 😔.

This post will give a high-level breakdown of how I created this real-time chess game, in case any chess fans are inspired (😩) and want to do something like this on their own.

Background

I have always been pretty into chess! I learned how to play in high school and ended up founding a chess club in my senior year. I took a multi-year break from the game in college, until my passion was re-ignited by The Queen’s Gambit.

Around the same time, I was redesigning this website and I was in search of something cool/fun/quirky that I could feature on the homepage. This redesign happened to coincide with my rediscovery of chess, so the chessboard seemed like a natural thing to feature on the site.

From there, it was a natural move to have the game be interactive between myself and website users. After dismissing the idea of a chess A.I. that played at my level (because that is hard), I settled on having the website create a game that I could respond to on my phone.

The Idea

I wanted this interactive chess game to function the same way that a normal online chess game would. If you have ever used Chess.com, Lichess, or any other chess website or app, you are probably pretty familiar with the flow of events.

Generally, the first player sends a challenge to the second player, who has the option to accept or decline the challenge. If the second player accepts the challenge, then the game is created and they begin to play. If the second player declines the challenge, then no game is created and the first player has to send a new challenge to try again.

In this scenario, the website visitor acts as the first player and sends a game challenge to my phone. As the second player, I accept the games and play them on my phone, while the first player plays through the chessboard on the website.

Tech Stack

There were a few different libraries/tools that I used in creating the game, mainly:

chessboard.js — Provided the chessboard UI
chess.js — Handled chess logic, mainly determining legal/illegal moves
Lichess Board API — The big one. Was used to communicate game state between my phone and the website
NodeJS w/ Express — Used as a medium between the Lichess API and the frontend client

The most important one of these was the Lichess API, as it allowed me to communicate moves back and forth between the web client and my phone. The chess games are played through the Lichess service, and the Lichess API is what sends game updates to the frontend.

The actual structure of the program is bigger than it would seem, so I’m going to devote an entire mini section to it.

Structure and Flow

Here is a cheesy clip-art diagram of how the game is structured and how the data is passed around:

In case that diagram was horribly uninstructive, here is a more detailed breakdown of each component of this system.

My Phone

This part is pretty simple. I have an account on Lichess.org, and whenever someone goes to my website and creates a new game, I get a notification from the Lichess app that says "chrisnunes_website has challenged you to a game".

From there, I just play the game out through that app just as I would any other game. From my perspective, it is as if I am playing a Lichess user named chrisnunes_website.

The Lichess API

The Lichess Board API is what allows me to create the abstraction of a simple chess game for both myself and the client. To the client, it seems like they are simply playing chess against some online opponent, and for me, it seems like I am just playing a normal chess game on my phone. Thanks to the Lichess Board API, both of these can be true.

The Lichess Board API allows you to programmatically control the actions of a Lichess user, such as creating challenges, sending chat messages, and making moves in a game. To take advantage of this, I created a Lichess user named chrisnunes_website that acts as a proxy for the user playing through the website.

This means that whenever a user sends me a challenge through the website, the chrisnunes_website user on Lichess is really sending me a challenge. And whenever the user is making moves in the game, it is really chrisnunes_website sending me moves under the hood.

In essence, each game played on this site is actually a Lichess match between the users chrisnunes_website (the web user) and chrisnunes (me). I control the chrisnunes user through my phone, while the web client and the game server combine to allow the web user to control the chrisnunes_website user.

The Game Server

This is the messenger between the client and the Lichess API. All of the requests to the Lichess API require an authorization token, which I didn’t want exposed on the frontend. So, I created a game server to act as a go-between and make the authorized requests in private.

This server sends and receives data with both the client and the Lichess API. From the client, the game server receives requests to create new challenges, as well as moves the user makes in existing games. Whenever the game server receives these messages from the client, it passes them along to the Lichess API with the proper authorization.

The server is also constantly listening for new game events or updates from the Lichess API. For example, the Lichess API will send moves from my phone to the game server, or send updates about challenges being accepted or declined. In both of these cases, the game server will once again just forward the messages to the client.

The Client

Finally, the client. In this game, the client is synonymous with the website, or the web browser that the user is using. The client is responsible for communicating game moves with the game server and updating the chess interface for the user.

The client will always be listening for the game server to send it information about new moves, and it will send the game server messages of its own whenever the user makes a move or creates a challenge. The client also utilizes the browser local storage to track any ongoing games the user has. That way, when a user opens the page, the client can immediately know whether there is an existing game for this user or not.

The second function of the client is to update the graphical interface that the user sees. The board is rendered using chessboard.js, and whenever the game server sends the client a new move, the client updates the chessboard accordingly.

The third function of the client is to provide the user a way to interact with the game. However, the drag-and-drop chessboard provided by chessboard.js does not have chess logic included with it by default. So, we use chess.js to validate moves that the user makes and ensure that they are legal. If the user makes a legal move, the client will send it to the game server, which will in turn use the Lichess API to send it to my phone.

Recap

To put it in simple terms: we have a client that the user can interact with to play the chess game. The client sends and receives messages from the game server, which in turn uses the Lichess API to send and receive messages from me, playing on my phone.

These four components all work together to create a simple effect: a user and I can both be playing the same chess game, at the same time, through two unrelated mediums.

Something Cool: ndjson

Whenever I have worked with realtime applications in the past, I have used tools like Google’s Firebase Realtime Database and React to handle the realtime updating for me. This was the first project I have done that used neither of these tools, so I had to learn how to create this realtime effect on my own.

In the end, my solution was to stream ndjson, or “Newline delimited JSON”. From a server/sender perspective, this was pretty similar to how you normally send responses. The difference is, with streaming data you can send multiple responses to the same request.

For example, in Express, this code would stream an infinite amount of numbers in response to a request:

app.get('/numbers', (req, res) => {

  res.setHeader('Content-Type', 'application/json')
  let num = 1;
  
  setInterval(function () {
    num++;
    res.write( num + "\n");
  }, 100)
})

This is similar to how you would send a normal response, but in this case we use res.write() to send multiple responses. Normally, you would use res.send() to send a single response.

However, from the client/receiver’s point of view, it is significantly different. For static data, getting data from an API request and accessing it could be as simple as:

const response = await fetch("chrisnun.es/numbers");
const data = await response.json();

console.log(data);

However, with streaming, you have to worry about constantly listening for new data and processing it. The basic structure is to set up a reader for the endpoint that will always be listening for new data to be sent, like so:

const response = await fetch("chrisnun.es/numbers");
const reader = response.body.getReader();

let result;
while (!result || !result.done) {
    // listen for more data
    result = await reader.read();
    // data is sent as a Buffer, so we must convert to text
    let content = new TextDecoder("utf-8").decode(result.value).trim();
    if (content)
        console.log(JSON.parse(content));
}

Even though it made my code more complicated to write, it was really rewarding to figure out a new way of streaming data that is honestly really easy to use. I think in the future I will definitely use streaming to reduce the size of my API calls and implement real-time applications.

Conclusion

This chess game was really fun to build, and I honestly learned a lot from going through the whole development process. Unfortunately, the game is still pretty untested, and there are probably a lot of bugs to clean up in the gameplay. For instance, I have no idea what will happen if the computer user tries to promote a pawn. I don’t even know if they can. The thought keeps me up at night.

But all in all, I am really happy with how this project turned out, and I think that it was a smashing success. Shoutout again to the Lichess team for putting out great APIs and developer tools, I hope that one day the Chess.com team can do the same! (😳)

If you want to test out the game, follow the link below and start a game from the homepage! If I don’t respond, I am likely either busy or asleep. BUT, you can come back and check periodically to see if the challenge has been accepted!

That’s all for now, be prepared for more great content in the future!

Test out the game

17. Letter Combinations of a Phone Number

2020-07-24T21:17:00-05:00

Given a string containing digits from 2-9 inclusive, return all possible letter combinations that the number could represent.

A mapping of digit to letters (just like on the telephone buttons) is given below. Note that 1 does not map to any letters.

Example:

Input: "23"
Output: ["ad", "ae", "af", "bd", "be", "bf", "cd", "ce", "cf"].

Note:

Although the above answer is in lexicographical order, your answer could be in any order you want.

Solution

class Solution:
    def letterCombinations(self, digits: str) -> List[str]:
        output = []
        mapping = {
            '2': ['a', 'b', 'c'],
            '3': ['d', 'e', 'f'],
            '4': ['g', 'h', 'i'],
            '5': ['j', 'k', 'l'],
            '6': ['m', 'n', 'o'],
            '7': ['p', 'q', 'r', 's'],
            '8': ['t', 'u', 'v'],
            '9': ['w', 'x', 'y', 'z']
        }
        
        def generate(combination, next_digits):
            
            # check to see if we have more digits to process
            if len(next_digits) == 0:
                output.append(combination)
            else:
                # we have more numzz
                for c in mapping[next_digits[0]]:
                    generate(combination + c, next_digits[1:])
        
        if digits:
            generate("", digits)
            
        return output

This solution isn’t super complex to code, but if you’re not familiar with recursion, it’ll be complex to understand. I’m not great with recursion myself, but I’ll try to explain (for my own sake). At a basic level, this program goes through every digit provided in the list and iterates through all of their letters.

This function tracks two things: a current combination of letters that we’re building, and a list next_digits, which tracks all of the digits in the given string that we’re yet to add to our current combination. We also have a dictionary mapping, which provides a mapping between each digit and the letters associated with it.

We start off the same way that every recursive method does: the base case, where we stop recursing if a condition is met. In this case, we stop calling the method when we have run out of digits to add to the current combination.

If there are still digits remaining to test, we loop through each letter that the digit is associated with. Then, for each letter, we first remove the current digit from the next_digits list and then add the current letter to the combination variable. Using these updated values, we recur and the same process happens again.

When the program runs out of digits and letters to process, it adds the current combination to a list of combinations. In the end, we return this list of combinations as our final answer.

Notes

Was asked a variation of this question on a Whole Foods HackerRank!

Try it on Leetcode

1. Two Sum

2020-07-10T15:54:00-05:00

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example:

Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

Solution 1: Brute Force (Slow)

class Solution:
    def twoSum(self, nums: List[int], target: int) -> List[int]:
        
        for i, n1 in enumerate(nums):
            for j, n2 in enumerate(nums[i+1:], i + 1):
                if n1 + n2 == target:
                    return [i, j]
                
        return [-1, -1]

This is the most naïve solution that I could think of. We iterate over every number in the given list, and for each number, we combine it with every other value in the list to see if we have a match.

This solution is both functional and simple to understand, but it isn’t efficient enough for our purposes. It works in order O(n * n) time, when there is an O(n) solution out there.

Notes

The return statement at the end, return(-1, -1), is just there as a placeholder, as the problem tells us that we will always have a solution.

Also, this monstrosity (enumerate(nums[i+1:], i + 1)) simply calls the enumerate method with the portion of the list that is after index i (nums[i+1:]) and tells it to start counting at an index i + 1.

Solution 2: One pass, Linear

class Solution:
    def twoSum(self, nums: List[int], target: int) -> List[int]:
        
        seen = {}
        
        for i, n in enumerate(nums):
            diff = target - n
            if (diff) in seen:
                return [i, seen[diff]]
            
            seen[n] = i
                
        return [-1, -1]

This solution is roughly the same amount of code, but much more efficient. This solution works by keeping track of the values that we have already seen, as well as their indices. The seen variable maps each value to its index in the list.

To begin, we loop through the list like normal. For each value, we calculate the complementary value that is would need to reach the target. For example, if the target value is 9, and the current n value is 5, then the compliment of n is target - n = 4.

Once we have calculated this complimentary value, we check to see if we have already seen it in the list. If we have, then we return the index associated it with our current index. If not, then we add the current value to the list and continue with our iteration.

Try it on Leetcode

1290. Convert Binary Number in a Linked List to Integer

2020-07-09T14:02:00-05:00

Given head which is a reference node to a singly-linked list. The value of each node in the linked list is either 0 or 1. The linked list holds the binary representation of a number.

Return the decimal value of the number in the linked list.

Example 1:

Input: head = [1,0,1]
Output: 5
Explanation: (101) in base 2 = (5) in base 10

Example 2:

Input: head = [0]
Output: 0

Example 3:

Input: head = [1]
Output: 1

Example 4:

Input: head = [1,0,0,1,0,0,1,1,1,0,0,0,0,0,0]
Output: 18880

Example 5:

Input: head = [0,0]
Output: 0

Constraints:

The Linked List is not empty.
Number of nodes will not exceed 30.
Each node’s value is either 0 or 1.

Solution

class Solution:
    def getDecimalValue(self, head: ListNode) -> int:
        
        result = 0
        
        while head:
            result = (result << 1) | head.val
            head = head.next
        
        return result

In this solution we have an integer, result, in which we store our current result. As we loop through each node in the linked list, we take the bit value at each node and update our result accordingly.

The algorithm goes like this:

For each node in the list
- Left Shift result by 1 bit to make space for the new bit value
- Set result equal to result OR new_bit
- Update our current node and move to the next one
When we’re finished, return our result.

Notes

Blog is back! Going to be posting more.

Try it on Leetcode

1137. N-th Tribonacci Number

2020-06-09T22:24:00-05:00

The Tribonacci sequence Tn is defined as follows:

T0 = 0, T1 = 1, T2 = 1, and Tn+3 = Tn + Tn+1 + Tn+2 for n >= 0.

Given n, return the value of Tn.

Example 1:

Input: n = 4
Output: 4
Explanation:
T_3 = 0 + 1 + 1 = 2
T_4 = 1 + 1 + 2 = 4

Example 2:

Input: n = 25
Output: 1389537

Constraints:

0 <= n <= 37
The answer is guaranteed to fit within a 32-bit integer, ie. answer <= 2^31 - 1.

Solution 1: Recursion with Memoization

class Solution:
    
    cache = {
        0: 0,
        1: 1,
        2: 1
    }
    
    def tribonacci(self, n: int) -> int:
        
        if n not in self.cache:
            self.cache[n] = self.tribonacci(n - 1) + self.tribonacci(n - 2) + self.tribonacci(n - 3)
        
        return self.cache[n]

This solution is similar to the recursive solution to solving the regular fibonacci sequence. The only difference is that instead of calculating the previous two values, we calculate the previous three.

Solution 2: Cheese 🧀

There is actually a way to solve this method in order O(1) time and O(n) space. We do this by manually calculating the first 37 tribonacci numbers and hard-coding them into our solution.

Note: we use the first 37 values because Leetcode only tests for values in the range of 0 <= n <= 37.

class Solution:
    
    def tribonacci(self, n: int) -> int:
        
        nums = [0,1,1,2,4,7,13,24,44,81,149,274,504,927,1705,3136,5768,10609,19513,35890,66012,121415,223317,410744,755476,1389537,2555757,4700770,8646064,15902591,29249425,53798080,98950096,181997601,334745777,615693474,1132436852,2082876103]
        
        return nums[n]

Try it on Leetcode

509. Fibonacci Number

2020-06-09T22:15:00-05:00

The Fibonacci numbers, commonly denoted F(n) form a sequence, called the Fibonacci sequence, such that each number is the sum of the two preceding ones, starting from 0 and 1. That is,

F(0) = 0,   F(1) = 1
F(N) = F(N - 1) + F(N - 2), for N > 1.

Given N, calculate F(N).

Example 1:

Input: 2
Output: 1
Explanation: F(2) = F(1) + F(0) = 1 + 0 = 1.

Example 2:

Input: 3
Output: 2
Explanation: F(3) = F(2) + F(1) = 1 + 1 = 2.

Example 3:

Input: 4
Output: 3
Explanation: F(4) = F(3) + F(2) = 2 + 1 = 3.

Note:

0 ≤ N ≤ 30.

Solution 1: Basic Recursion

class Solution:
    def fib(self, N: int) -> int:
        
        if N == 0:
            return 0
        
        if N == 1:
            return 1
        
        return self.fib(N - 1) + self.fib(N - 2)

This is the simplest possible solution, which uses recursion. The two base cases are if N == 0 and if N == 1. These are the situations in which we have no more work to do, and we can just return the value of N.

If N is greater that 0 or 1, then we have some extra work to do. We know that fib(N) == fib(N - 1) + fib(N - 2), so we return those numbers in our solution.

This solution works fine and is easy to understand, but if you dig deeper, its inefficiency becomes clear. It’s easier to spot with a visual: here is an image showing the chain of method calls if we try to calculate fib(6).

If we look at the general shape of the graph, we can see that each method call creates two more method calls beneath it. This leads to an exponential growth as we move down the tree, and an exponential time complexity of O(2 ^ n).

You can also see that many method calls are calculated multiple times. For instance, we calculate fib(3) three times, and each one creates 4 more methods. If we could simply store the value of fib(3), we could save ourselves a lot of additional computations.

As slow as this solution may be, it is still good enough to pass the Leetcode test cases. However, that is because they only test our code with 0 <= N <= 30. If we even barely increase N to 40, our solution is too slow. So, we look for a faster way.

Solution 2: Memoization

class Solution:
    
    cache = {
        0: 0,
        1: 1
    }
    
    def fib(self, N: int) -> int:
        
        if N not in self.cache:
            self.cache[N] = self.fib(N - 1) + self.fib(N - 2)
        
        return self.cache[N]

Memoization is basically a fancy word for storing the result of a method call so that we don’t have to re-calculate it later. In this solution, we create a cache to store the result from each fib call.

This brings our time complexity down to something reasonable, and runs much faster.

Solution 3: Bottom-Up DP

class Solution:
    
    def fib(self, N: int) -> int:
        
        if N < 2:
            return N
        
        dp = [0] * (N + 1)
        
        dp[0] = 0
        dp[1] = 1
        
        for i in range(2, N + 1):
            dp[i] = dp[i - 1] + dp[i - 2]
            
        return dp[N]

“Bottom-Up” in this case means that, unlike with our recursive solution, we start with the lowest values, 1 and 0. We then build our way up to the desired value of N, which is our final solution.

This is the most efficient solution we’ve seen so far. It has time complexity of O(n), as well as space efficiency of O(n). However, there is one more solution that works in O(1) time AND space.

Solution 4: Massive Brain 🤯

# Contributed by LeetCode user mereck.
class Solution:
  def fib(self, N):
  	golden_ratio = (1 + 5 ** 0.5) / 2
  	return int((golden_ratio ** N + 1) / 5 ** 0.5)

I have no clue how this math actually works, I actually just ripped this solution off of Leetcode. It uses math, so I don’t really understand it. But you can use the Golden Ratio (math thing) to solve this instantly.

Try it on Leetcode

20. Valid Parentheses

2020-05-31T10:44:00-05:00

Given a string containing just the characters '(', ')', '{', '}', '[', and ']', determine if the input string is valid.

An input string is valid if:

Open brackets must be closed by the same type of brackets.
Open brackets must be closed in the correct order.

Note that an empty string is also considered valid.

Example 1:

Input: "()"
Output: true

Example 2:

Input: "()[]{}"
Output: true

Example 3:

Input: "(]"
Output: false

Example 4:

Input: "([)]"
Output: false

Example 5:

Input: "{[]}"
Output: true

Solution

class Solution:
    def isValid(self, s: str) -> bool:
        
        mapping = {
            ")": "(",
            "}": "{",
            "]": "["
        }
        stack = []
        
        for c in s:
            if c not in mapping:
                # we're at an opening bracket
                stack.append(c)
            else:
                # we're at closing bracket
                if len(stack) > 0 and mapping[c] == stack[-1]:
                    stack.pop()
                else:
                    return False
                
        if len(stack):
            return False
        
        return True

This solution works in ordern O(n) time using one loop and a stack.

We go through this string one character at a time. If we’re at an opening bracket, there is nothing that we need to do right now, because we’ll come back to it and process it later. So, we add it to the stack and carry on.

If we arrive at a closing bracket, however, we have to do some checking. We have to make sure that the most recent bracket that we processed matches the current bracket. For example, if we arrive at a closing square bracket ], then we want to make sure that the last thing we added to the stack is a matching [. If the last bracket doesn’t match, or if there is nothing else in the stack, we know that we have an invalid expression and return False.

Once we’ve processed the whole string, we make sure there is nothing left in the stack. If the stack is not empty, then that means we had brackets that were unmatched, and we return False.

Try it on Leetcode

65. Valid Number

2020-05-28T19:39:00-05:00

Validate if a given string can be interpreted as a decimal number.

Some examples:

"0" => true
" 0.1 " => true
"abc" => false
"1 a" => false
"2e10" => true
" -90e3 " => true
" 1e" => false
"e3" => false
" 6e-1" => true
" 99e2.5 " => false
"53.5e93" => true
" --6 " => false
"-+3" => false
"95a54e53" => false

Note: It is intended for the problem statement to be ambiguous. You should gather all requirements up front before implementing one. However, here is a list of characters that can be in a valid decimal number:

Numbers 0-9
Exponent - “e”
Positive/negative sign - “+”/”-“
Decimal point - “.”

Of course, the context of these characters also matters in the input.

Solution 1: Regex

import re

class Solution:
    def isNumber(self, s: str) -> bool:
        
        pattern = "^\s*[+-]?(\d+\.?|\.\d+)\d*(e[+-]?\d+)?\s*$"
        
        return re.match(pattern, s) is not None

For this problem, it seemed like you can go in one of two directions. You could either solve this by looping through the string and keeping track of state and edge cases, or you could use Regex to match a pattern.

If you don’t know how Regex works, or need to refresh your memory, this website is a great resource. You can view the solution and test cases for the above Regex at this site.

Solution 2: Literally anything other than Regex

I did not want to take the brainpower to figure out how to actually do this problem, so Regex is as advanced as I’ll get for this one. Maybe if I’m feeling brave one day I’ll finish the problem in a different way.

Chris Nunes

Beginner Series: Git and Github

Introduction

Table of Contents

Prerequisite: Install Git and create a Github Account

Step 1: Creating a Repository on Github

Step 2: Cloning Your Repository

Step 3: Finding Your Files

Step 4: Editing Your Files

Step 5: Pushing Your Local Changes to Git

Example Add/Commit/Push

Step 6: Pulling Remote Changes to Your Local Machine

Creating a Remote Change

Pulling a Remote Change

Conclusion

Super Speedy Blog Post Workflow

Introduction

The Problem

The Solution

How it Works

Note: If you just want the code, skip to the bottom for a recap.

Recap

How I Created my Interactive, Real-Time Chess Game

Background

The Idea

Tech Stack

Structure and Flow

My Phone

The Lichess API

The Game Server

The Client

Recap

Something Cool: ndjson

Conclusion

17. Letter Combinations of a Phone Number

Solution

Notes

1. Two Sum

Solution 1: Brute Force (Slow)

Notes

Solution 2: One pass, Linear

1290. Convert Binary Number in a Linked List to Integer

Solution

Notes

1137. N-th Tribonacci Number

Solution 1: Recursion with Memoization

Solution 2: Cheese 🧀

509. Fibonacci Number

Solution 1: Basic Recursion

Solution 2: Memoization

Solution 3: Bottom-Up DP

Solution 4: Massive Brain 🤯

20. Valid Parentheses

Solution

65. Valid Number

Solution 1: Regex

Solution 2: Literally anything other than Regex