DEV Community: Joseph Trettevik

Code with Your Friends

Joseph Trettevik — Mon, 06 Jul 2020 06:47:34 +0000

Song of the Week

Introduction

This week is a much shorter and much less technical post. I participated in a mini hackathon yesterday, and I had such a great time I thought I'd share my experience.

Code Challenge

We were giving a code challenge, a few hours to work on it, and then we all came together to share our solutions. The challenge was to build some UI cards in React. We had the option to use some starter code or to start from scratch. Here's what I came up with:

Takeaways

It had been along time since I had done a hackathon, so I was reminded how great they are. Here are some of the reason you should participate in one:

It can break you out of a coding rut. Sometimes when you're spending a lot of time learning to code on your own, you can get bored and lose your motivation. Meet up online with other people and working on a new problem can be like a shot in the arm. It gets you excited about coding again.
You can learn so much from other people. Problems that you may have been struggling with for a while can suddenly become so clear when you get help on them from other coders.
You don't have to be an expert. Everyone at these events are at different levels, with strengths in different areas. Someone may help you with something your struggling with in CSS, and maybe you help them with a bug in their React files. Everybody wins, learns, and is better for it.
You meet great people and can build a community of other coders that are also trying to learn and grow their skills. And community is what it's all about!

Git and GitHub: Git Revert

Joseph Trettevik — Mon, 29 Jun 2020 03:09:04 +0000

Song of the Week

Introduction

Last week we covered how to do a hard reset of your repository. Though they're sometimes necessary, hard resets are a pretty destructive method of rewinding your repository because they alter the commit history.

Today's post will cover the nondestructive rewind, aka git revert.
We'll go over:

What git revert does and how it is different from git reset.
How to revert a single commit.
How to revert a range of commits.

Git Revert vs Git Reset

The git revert <commit-hash> command will reverse the changes made by the commit hash given, and then create a new commit. This is the preferred method for undoing the changes of a specific commit if that commit has already been push to a shared remote repository because it preserves the commit history.

This is different from a git reset, because a reset will move the HEAD ref to the commit hash given, and drop all the commits after that one. A git revert only reverses the commit that was given and keeps all the following commits and the changes that were made in them. This makes git revert great for removing a bug that was introduced by a single commit without having to redo all the work in the following commits.

How to Revert a Single Commit

To revert a single commit, enter the following git command in the terminal:

git revert <commit-hash>

You can also pass git revert a reference to the commit that is relative the HEAD ref. So, if you entered git revert HEAD~2, the changes from the third most recent commit would be reversed.

Let's look at an example. I created a local repository with some files whose names match the commit in which they were created, which looks like this:

All these files just have the text "added content" in them and each was added with their own commit. The git log looks like this:

Now let's say there was some bug in commit A that we wanted to undo but keep commits B-D. We would enter the following git command:

You can see in the git log that the git revert command automatically created a commit. Also, I used HEAD~3 to reference commit A. Remember that most recent commit is equal to HEAD, which can be written as HEAD~0. So, the fourth most recent commit is HEAD~3.

Now if we look at the working directory you'll see that the "commit-A" has been removed, but the rest remain.

How to Revert a Range of Commits

To revert a range of commits, simply enter the following git command in the terminal:

git revert -n <commit-hash>^..<commit-hash>

Notice the ^ before the two periods. That caret symbol tells git to include that first commit hash given in the range. And the -n option tells git to not create a commit, but to instead stage the changes in the Staging Index and the Working Directory. This way you can do one commit manually to maintain a neat commit history.

In the same example we used above, lets say we want to rewind to commit A and maintain the commit history. You could do that like this:

By running git status, we can see that all files added in the commits B-D have been deleted.

Now we just need to commit those changes.

In the git log we see that commits B-D are still in the commit history even though their changes have been reversed.

If we open the Working Directory, we'll see that it has indeed rewound back to commit A.

Takeaways

git revert <commit-hash> will reverse the changes made by the commit hash given, and then create a new commit.
Unlike git reset, git revert <commit-hash> will not remove the commits after the commit given, thereby preserving the commit history.
git revert will also accept a commit reference based on HEAD, like git reset HEAD~3, for example.
git revert -n <commit-hash>^..<commit-hash> will reverse the changes by the range of commits given(inclusively), and will stash the changes in the Staging Index. The -n option prevents the auto commits, so you will need to do a manual commit.

References

Cover Image - Mt St Helens
Git Revert - atlassian.com
Git Revert - Git Docs
How to revert multiple git commits? - stackoverflow.com

Git and GitHub: How to Hard Reset Local and Remote Repository

Joseph Trettevik — Mon, 22 Jun 2020 05:06:07 +0000

Song of the Week

Introduction

Before we go over how to do this, let's go over when you should and should not do this.

Don't do a hard reset if you've already pushed the commits in question to a shared remote repository. If another developer pulls and starts basing their work on the commits that the reset removes from the commit history, you're going to create huge problems.

A hard reset can be done if you're the only one using the local and remote repository, or if the reset removes commits that have not yet been pushed to a shared remote. In this case, you're the only one affected by the hard reset, so it's relatively safe to do. Just make sure you want drop the commits in question before you do the reset.

Also, just as a quick reminder, git reset --hard <commit-hash> will move the HEAD pointer back to the commit hash that was given, the Stage Index and the Working Directory will be reset back to the way they were at that commit, and all commits after the commit that was given will be dropped from the commit history. This means that any uncommitted work in the Staging Index or Work Directory will be lost.

How to Hard Reset the Local Repository

To simplify the example, I created a repository with a README in it, and for each commit, I added a line that matches the commit message. So, after four commits I ended up with a README that looked like this:

To reset your local repository, first you need to know which commit you want to reset to, and what the hash is for that commit. One way to do this is to run git log.

Let's say that after looking through this commit history you wanted to reset to the "second commit". Then, you would write down or copy the commit hash for that commit and run:

git reset --hard <commit-hash>

Based on the example, that command would look like this:

After running the hard reset command, the Working Directory now looks like this:

You can see from git log and the Working Directory that we have rolled back to the second commit and dropped the third and fourth commits.

How to Hard Reset the Remote Repository

Performing a hard reset of the remote repository is quite easy. After you've reset the local repository, simply do a force push with the follow git command:

git push -f <remote> <branch-name>

In the example we used above, that git command would look like this:

Takeaways

Only do a hard reset if you are the only using the remote repository, or if you haven't yet pushed the commits you're going to drop.
Find the commit hash of the commit you want to reset to with git log.
Perform the local hard reset by running git reset --hard <commit-hash>.
To hard reset the remote repository, first hard reset the local and then run git push -f <remote> <branch-name>

References

Cover Image
Reverting to Specifi Commit Based on Commit ID with Git - stackoverflow.com
Resetting Remote to a Certain Commit - stackoverflow.com
Git Reset - Atlassian.com
Resetting, Checking Out, and Reverting - Atlassian.com

Git and Github: git log

Joseph Trettevik — Mon, 08 Jun 2020 06:21:11 +0000

Song of the Week

Introduction

One of the first things you'll find a need for once you begin creating a commit history is the ability to view that history. This where git log comes in handy. There numerous options you can use with git log to display the commit history in different ways, but in post I'll cover some of the more useful options.

Display Options

git log

The basic option, is no options. If you enter git log with any options it will print out the commit history for the current repository. The numbers and letter you see on the left are the first 7 digits of the 40 characters commit ID. Next to that is the message associated with that commit, and on the right you can see the author and relative date. You can tell from the relative dates that the commits are listed in reverse chronological order. So the most recent commit is printed first and the commits get older and you move down.

// ♥ git log
067a4ee correct linting errors (Joseph Trettevik, 2 days ago)
b48fdd7 create ScrollContainer component (Joseph Trettevik, 2 days ago)
366b9c1 Merge pull request #85 from FoodIsLifeBGP/client-and-donor-validations (Edgar Martinez, 4 days ago)
d845da0 newline for linting (bastion6429, 4 days ago)
f76b0ce made changes to reflect pre-alpha requirements (bastion6429, 4 days ago)

git log --stat

If you'd like to see an overview of what was modified in each commit you can us the --stat option. This will list the files that were modified, how many lines of code were deleted or added in those files, and summary of that information for each commit.

// ♥ git log --stat
067a4ee correct linting errors (Joseph Trettevik, 2 days ago)

 src/elements/ScrollContainer/ScrollContainer.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)
b48fdd7 create ScrollContainer component (Joseph Trettevik, 2 days ago)

 src/elements/ScrollContainer/ScrollContainer.tsx | 51 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
366b9c1 Merge pull request #85 from FoodIsLifeBGP/client-and-donor-validations (Edgar Martinez, 4 days ago)
d845da0 newline for linting (bastion6429, 4 days ago)

 src/util/constraints/donorRegistration.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

git log --graph

If you'd like to see a graphical representation of the commit history you can use the --graph option. This use simple graphics to display the branches and merges in the commit history in a visual way.

// ♥ git log --graph
* 067a4ee correct linting errors (Joseph Trettevik, 2 days ago)
* b48fdd7 create ScrollContainer component (Joseph Trettevik, 2 days ago)
*   366b9c1 Merge pull request #85 from FoodIsLifeBGP/client-and-donor-validations (Edgar Martinez, 4 days ago)
|\  
| * d845da0 newline for linting (bastion6429, 4 days ago)
| * f76b0ce made changes to reflect pre-alpha requirements (bastion6429, 4 days ago)
| * 783ffb5 made business license field not mandatory (bastion6429, 4 days ago)
| * 39c7f08 added image in donor registration and donation (bastion6429, 6 days ago)

git log --all

To see all commits in the history, even the ones that are not associated with the current branch, you can use the --all option. In the example below we see that the third commit listed is new compared to that last example. This commit is on a branch off the the master that is no associated with this current branch, but it shows up because we used the --all option.

// ♥ git log --all
067a4ee correct linting errors (Joseph Trettevik, 2 days ago)
b48fdd7 create ScrollContainer component (Joseph Trettevik, 2 days ago)
3e68f7c refactored register to also return formErrors (bastion6429, 3 days ago)
366b9c1 Merge pull request #85 from FoodIsLifeBGP/client-and-donor-validations (Edgar Martinez, 4 days ago)
d845da0 newline for linting (bastion6429, 4 days ago)
f76b0ce made changes to reflect pre-alpha requirements (bastion6429, 4 days ago)

Limiting and Search Options

git log --before

The --before option will allow you to what to print all the commits that were created before a given date. You can specify a specific date or a relative date like I did in the example below.

// ♥ git log --before='3 days ago'
366b9c1 Merge pull request #85 from FoodIsLifeBGP/client-and-donor-validations (Edgar Martinez, 4 days ago)
d845da0 newline for linting (bastion6429, 4 days ago)
f76b0ce made changes to reflect pre-alpha requirements (bastion6429, 4 days ago)
783ffb5 made business license field not mandatory (bastion6429, 4 days ago)
39c7f08 added image in donor registration and donation (bastion6429, 6 days ago)

git log --after

You can allows limit the log output to commits that were created after a certain date with the --after option.

// ♥ git log --after='3 days ago'
067a4ee correct linting errors (Joseph Trettevik, 2 days ago)
b48fdd7 create ScrollContainer component (Joseph Trettevik, 2 days ago)

git log --before --after

One of the coolest things about git log is that you can use multiple options to get exactly the output that you want. This allows use to print out the commits that created in a certain range by use both the --before and the --after option.

// ♥ git log --before='5 days ago' --after='8 days ago'
39c7f08 added image in donor registration and donation (bastion6429, 6 days ago)
803f9f1 added donation validation constraint (bastion6429, 7 days ago)

git log --author='name'

Another useful search option is the --author option. This allows you to print out only the commits that were created by a given author.

// ♥ git log --author='Joseph Trettevik'
067a4ee correct linting errors (Joseph Trettevik, 2 days ago)
b48fdd7 create ScrollContainer component (Joseph Trettevik, 2 days ago)
e066704 rename scroll component to EndOfScrollWrapper (Joseph Trettevik, 2 weeks ago)
ae18eaf add ScrollContainer to index (Joseph Trettevik, 2 weeks ago)
9bfb1b6 create scroll container component (Joseph Trettevik, 2 weeks ago)
b3a6295 add ScrollContainer to index (Joseph Trettevik, 2 weeks ago)
a1d7bc0 create scroll container component (Joseph Trettevik, 2 weeks ago)
d3f1ab0 make typechecking corrections (Joseph Trettevik, 4 weeks ago)
883382d optimize Checkbox component (Joseph Trettevik, 4 weeks ago)
bf74c33 make lint and typechecking corrections (Joseph Trettevik, 4 weeks ago)
1269f2f create functional Checkbox component (Joseph Trettevik, 4 weeks ago)

git log -S

Finally, the -S option lets you search all commits that contain changes the occurrences of that given string. This is great for the situations where you want to see every commit that changes an certain block of code. In the example between I given the name of a component and all the commits that modify that component are printed.

// ♥ git log -S 'FormTextInput'
a2ec4fa add contributionGuide for hackathon and following development (duskcloudxu, 6 weeks ago)
bea4470 Revamp Login Screen UI and form interaction (#40) (Ernest Bruno, 6 weeks ago)
bb988f4 Decouple Donations from DonationOrClaim (rahulrajaram, 6 weeks ago)
f7cad70 Client registration screen, absolute imports fixed, made register bidirectional (Abe Dolinger, 5 months ago)
877430c Added use-global-hook state management (Abe Dolinger, 5 months ago)
566cd53 Donations screen loads existing donations, create new donation posts to backend (Abe Dolinger, 7 months ago)
e6d506b Registration, login, approval, dashboard (Abe Dolinger, 7 months ago)
3e7eb9a Added Terms, Header, Icon, Back, Menu (Abe Dolinger, 7 months ago)
c0095b7 Registration UI (Abe Dolinger, 7 months ago)

Takeaways

git log - will print out the commit history for the current repository in reverse order (most recent commit at the top of list).
git log --stat - will list the files that were modified, how many lines of code were deleted or added in those files, and summary of that information for each commit.
git log --graph - will use simple graphics to display the branches and merges in the commit history in a visual way.
git log --all - will print all commits in the history, even the ones that are not associated with the current branch.
git log --before='date' - will print all the commits that were created before a given date.
git log --after='date' - will print all the commits that were created after a given date.
git log --author='name' - will only print the commits that were created by a given author.
git log -S <string> - will print all commits that contain changes to the occurrences of that given string.

References

Viewing the Commit History - Git Docs
Git Log - Git Docs

Git and GitHub: Merge

Joseph Trettevik — Mon, 01 Jun 2020 02:52:51 +0000

Song of the Week

Introduction

Last week I briefly covered git merge as part of a general overview of common git commands. This week I wanted to go into more depth on merge since it can be a little tricky. Hopefully I can help you avoid some of the confusion I've experienced in the past.

Topics Covered:

Preparing for the Merge
Fast-Forward
3-way Merge
Merge Conflicts
Deleting Branches

Preparing for the Merge

Before you execute a merge it's important to take a few steps to prepare.

Step 1: Make sure your on the branch you want to merge into. If you're not sure which branch you're on, run git status. If you're on the wrong branch, run git checkout <branch-name> to switch to the correct branch.
Step 2: Make sure the branches you're merging are up-to-date with the latest remote commits. To do this, run git pull once you're on the branch you want to update. This is especially important if you're merging into a branch that you share with other developers.

Fast-Forward

There are two types of merges that Git will execute depending on the situation. The simplest is called “fast-forward.” A fast-forward is when Git just moves the tip of the receiving branch to point to the same commit as the tip of the merging branch. This happens when the tip of the branch you're merging into is a direct ancestor of the branch you're merging in. Let’s look at an example!

Diagram 1: Commit history before the fast-forward.

Let’s say we’re working with a simply git history like the one in the diagram above. In this example you have a master branch, and a feature branch that branched off at commit #3. We can see that even thought we’ve made two commits on our feature branch, no new commits have been made to the master branch. This means that the tip of the master branch is a direct ancestor of our feature branch. So, when we run git merge feature, the commit history will look like this:

Diagram 2: Commit history after the fast-forward.

Notice that the tip of the master branch now points to the same commit as the feature branch. The fast-forward just moved the tip of the master branch up the linear commit history to point to the most recent commit.

3-way Merge

Often the commit history is not simple enough for Git to do a fast-forward. This is especially true when you are work on the same code base with multiple developers.

This is where the 3-way merge comes into play. Git performs a 3-way merge when the tip of the branch you’re merging into is not a direct ancestor of the branch you’re merging in. A 3-way merge is when Git creates a new snapshot of the code using the commits that the two branch tips point to and the common ancestor commit, and then creates a merge commit with the result. Again let’s look at an example to better understand what’s happening.

Diagram 3: Commit history before the 3-way merge.

In this example, the feature branch also branches off at commit #3, but this time the master branch tip is not pointing to a commit that is a direct ancestor of the feature branch. This can happen if you or someone else merged a commit into master after your feature branch was created.

To merge these branches we should have already switched to the master branch in the prepare step, so we can just run git merge feature. Notice that is the same Git command, but this time a 3-way merge will result. Git will automatically perform a fast-forward or a 3-way merge depending on the state of the commit history.

After the 3-way merge the commit history will look like this:

Diagram 4: Commit history after the 3-way merge.

Take note of the fact that unlike a fast-forward, the master and feature branch tips do not point to the same commit after a 3-way merge. Master is now pointing to a merge commit that is a combination of the two branch tips and the common ancestor.

One last thing that should be said if it wasn’t clear. Merges don’t always have to go from a feature branch into the master branch. You can merge any branch into another other branch. So you could merge master into your feature branch, or feature_1 branch into feature_2. branch.

Merge Conflicts

Usually Git will automatically merge the files from both branches together. However, if the same part of a file has been changed in different ways on the two branches being merged, Git won't be able to merge them. In this case, Git will label the trouble spot as a conflict and will wait for you to resolve it. To see which files have conflicts you can run git status. Then open those files in VS Code or whichever text editor you prefer. In the files you will see something like this:

<<<<<<<<HEAD:app.js
if (a < 0) {
  b = 5;
}
==============
if (a < 0) {
  c = 5;
}
>>>>>>>>feature:app.js

Above I created a hypothetical conflict that may have come up in the 3-way merge example we looked at before. The less than signs (<<<<<<<<) mean that everything between them and the equal signs (=========) is the code from the current branch (aka the branch you're merging into). On the bottom, the greater than signs (>>>>>>>>) mean that the code between them and the equal signs (========) is from the branch that you're merging in.

Once you decide which version to keep, or create a mix of the two, save the file. Once all the conflicts are resolved and saved, run git add <file-name> on each file with a conflict. Or you can run git add ., which will git add all the modified files at once. Then just run git commit -m <type a message here> with your commit message and your merge is done.

Deleting Branches

Now that your feature branch is merged into master you can delete it since it's changes have been incorporated into master. To delete a branch run git branch -d <branch-name>.

So in the case of our examples, after the merge we would run git branch -d feature.

Takeaways

Prepare for the Merge
- Make sure you're on the branch you want to merge into by running git status and running git checkout <branch-name> if you need to switch to the correct branch.
- Make sure the branches you're merging are up-to-date with the latest remote commits. To do this, run git pull.
Two Types of Merges can result from git merge <branch-name>
- Fast-Forward: When Git just moves the tip of the receiving branch forward to point to the tip of the merging branch. This happens when the the tip of receiving branch is a direct ancestor of the merging branch.
- 3-way Merge: When the tip of the receiving branch is not a direct ancestor of the merging branch Git creates a new snapshot of the code using the commits that the two branch tips point to, and the common ancestor commit, and then creates a merge commit with the result.
Merge Conflicts
- If the same part of a file has been changed in different ways on the two branches being merged, Git won't be able to merge them and will label them as a conflict.
- <<<<<<<<: Everything between these less than signs and the equal signs (=========) is the code from the current branch (aka the branch you're merging into)
- =========: Separates the code from the receiving and the merging branches that is in conflict.
- >>>>>>>>: Everything between these greater than signs and the equal signs (========) is the code from the branch that you're merging in.
- Once the conflicts are resolved in a text editor, run git add . and git commit -m <type a message here>.
Delete Branch
- To delete a branch run git branch -d <branch-name>.

References

Basic Branching and Merging - Git Docs
Git Merge - Git Docs
Git Merge - Atlassian Git Tutorial
Git Pull - Atlassian Git Tutorial
Git Branch - Git Docs

Git and GitHub: The Basics

Joseph Trettevik — Mon, 25 May 2020 06:23:14 +0000

Song of the Week

Introduction

Since I've started contributing to open source projects in the last few months, I've learned that I could benefit from a deeper understanding of Git, and GitHub flow. So, this week I'm starting a series of posts about the things I'm learning on my quest to become a Git and GitHub pro.

Today I'm covering the basics of creating a git repository, branches, commits, push, pull, and merge.

Before we begin, if you don't have Git installed on your computer you can click the link to find information about Git Installation. And if you haven't already, you can create an account at GitHub.com.

Create a Git Repository

There are a two different situations in which you would want to create a git repository. Let's go over how to do this in the command line for each situation.
Existing Local Directory:

cd path/to/directory
git init

First you change directories to the one you want to create a git repository for and then you enter git init. This creates the git repository for the directory that you are in.
Cloning an Existing Repository

cd path/to/directory
git clone <url/to/remote/repository>

Cloning is used when you want to copy an existing repository to a directory on your local machine. Again you want to switch to the directory where you want to copy the repository. Then you enter git clone followed by the URL of the remote repository you want to clone.

Adding a Remote

In the case of git clone, your directory is automatically connected to to remote that you copied it from. But what about git init? In that case you need to manually add a remote.

git remote add origin <url/to/remote/repository>

The command git remote add accepts two arguments, whatever you want to name the remote, and the URL to the remote repository. Origin is a typically used for the name but you could choose anything. The remote is an online copy of your repository, hence the URL. IF you don't know how to create repository on GitHub and find the associated URL, click this here.

Creating a Branch

It's generally considered bad form to work directly off you master branch, so the first thing you want to do is create a feature branch.
Option 1:

git branch [branch-name]
git checkout [branch-name]

Option 2:

git checkout -b [branch-name]

Option 1 tells Git to create a branch called branch-name, then git checkout tells Git to switch to the branch called branch-name. Option 2 does both of those things in one command.

Committing Changes

So you have your repository initialized, you're connected to a remote repository, and you're on a new branch. Now you're ready to make changes and commit those changes.

git add .
git commit -m "commit message"

Before you can commit your changes you need to tell Git what you want to be in the commit. The command git add . stages all the files that have been changed since your last commit and tells Git they should be added to the next commit. The git commit command takes a snapshot of the code as it stands at that moment. It's important to add a descriptive commit message so other developers can get an idea of what was updated in that commit, which you do with the -m option.

Pushing Changes to Remote

To sync the remote with the local repository we use the git push command.
If it's your first push:

git push -u [remote-name] [branch-name]

Any other push:

git push [remote-name] [branch-name]

The git push accepts two arguments, the name of the remote you want to push to, and the branch you want to push. The first time you push to your remote repository, you should use the -u option with tells git to add upstream tracking references. The git push command will add the local commits to the remote copy of the branch.

Pulling Changes from Remote

What if our working with someone else on the same repository and you need to update your local copy with changes that someone else added to the remote copy. You can do this with git pull.

git pull [remote-name]

This will update your local directory with all of the new commits that are on the remote repository.

Merging

Once you have some new feature or change made on your branch, it's time to merge those changes into master.

git checkout master
git merge [feature-branch-name]

First you want to switch to the branch you want to merge your feature branch into, in this case 'master'. Then you pass the git merge the name of the branch you want to merge into the current branch.

Takeaways

And that's it! Well not quite. That's the tip of the iceberg, but it's what you need to know to get started. In the weeks to come I'll be going into more depth on these topics and as well as more advanced Git commands. But for now, let's review:

git init: Creates the git repository for the directory that you're in.
git clone <url/to/remote/repository>: Copies a remote git repository to the current directory on your local machine.
git remote add [remote-name] <url/to/remote/repository>: Connects the git repository of the directory your currently into the remote at the URL given. It also assigns this remote repository the name given([remote-name]).
git branch [branch-name]: Creates a new branch with the name given.
git checkout [branch-name]: Switches to the branch that matches the name given.
git checkout -b [branch-name]: Create a new branch with the name given and switches to that branch.
git add .: Prepares all changed files on this branch to be added to the next commit.
git commit -m "commit message": Creates a commit and adds a descriptive message to that commit. A commit is a snapshot of the code as it currently stands.
git push -u [remote-name] [branch-name]: Adds new local commits to the remote repository. The -u option adds remote tracking on your first push, though it can be omitted on all pushes after that.
git pull [remote-name]: Updates your local directory with all of the new commits that are on the remote repository.
git merge [branch-name]: Merges the commits from the branch listed into the branch that you are currently on.

References

Cover Image
Setting Up a Repository - atlassian.com
Git Clone - atlassian.com
Git Clone - git docs
Adding a Remote - GitHub.com
Git Cheatsheet - GitHub.com
Saving Changes - atlassian.com
Git Commit - atlassian.com
Git Push - atlassian.com
Git Pull - atlassian.com
Git Merge - atlassian.com

HTML5 Form Validation Using Input Types

Joseph Trettevik — Mon, 18 May 2020 04:30:40 +0000

Song of the Week

Last week I wrote a post about how to use input tag attributes to implement form validation without JavaScript. This week I wanted to cover go over how you can use input tag types to implement form validation, again without JavaScript.

The great thing about using input tag types for form validation is that while some will generate an alert to tell the user they made a bad entry, many others will simply not allow the user to make an invalid entry in the first place.

Now there are quite a few input tag types, but I chose to show you the 6 types that I thought would be the most useful in restricting form inputs. And just like last week, at the end of this post I embedded a CodePen so you experiment with examples of all the types covered.

Date

The date input type creates a field in which the user can only enter a date in the format "mm/dd/yyyy". This is an example of one of the input types that doesn't allow the user to enter an invalid input, rather than creating an alert on submit. If the browser supports it, this field will have a date picker to assist when entering a date. Also, the date input type is not supported by Safari or Internet Explorer 11(or earlier). Here's an example:

<form id='form'>
  <label for='date-example'>Date:</label>
  <input 
    type='date' 
    id='date-example'
  /><br>
  <button type="submit">Submit</button>
</form>

Time

The time input type creates a field in which the user can only enter a time in the format "00:00 AM/PM". Be aware that this input type is not supported by Safari or Internet Explorer 12(or earlier). Here's an example:

<form id='form'>
  <label for='time-example'>Time:</label>
  <input 
    type='time' 
    id='time-example'
  /><br>
  <button type="submit">Submit</button>
</form>

Email

The email input type creates a field which will create an alert if the user does not enter an email address. Another cool feature of this field is that some smartphones will recognize it and add a ".com" to the keyboard. Here's an example.

<form id='form'>
  <label for='email-example'>Email:</label>
  <input 
    type='email' 
    id='email-example' 
    placeholder='example@example.com'
  /><br>
  <button type="submit">Submit</button>
</form>

URL

The url input type creates a field which will create an alert if the user does not enter a url. Like this email type, some smartphones will also recognize it and add a ".com" to the keyboard. Here's an example:

<form id='form'>
  <label for='url-example'>URL:</label>
  <input 
    type='url' 
    id='url-example' 
  /><br>
  <button type="submit">Submit</button>
</form>

Number

The number input type creates a field in which the user can only enter a number. In addition to preventing the user from entering letters or symbols with this input type, you can also use the 'min', 'max', and 'step' attributes we covered last week to further restrict the user's entries. Here's an example:

<form id='form'>
  <label for='number-example'>Number:</label>
  <input 
    type='number' 
    id='number-example'
  /><br>
  <button type="submit">Submit</button>
</form>

Range

The range input type creates a field in which the user can only operate a slide bar. The default range of the slide bar is 0 to 100, but you can use the min and max attributes to set a custom range. You can also set how the slide bar increments between the min and max with the step attribute. Here's an example:

<form id='form'>
  <label for='range-example'>Range (0-30):</label>
  <input 
    type='range' 
    id='range-example'
    min="0"
    max="30"
    step="5"
  /><br>
  <button type="submit">Submit</button>
</form>

Interactive Example

As you try entering invalid values in each field, be aware that only the email and url input fields will create an alert if you enter an invalid entry. The other field will simply prevent you from making an invalid entry.

Takeaways

The date input type creates a field in which the user can only enter a date in the format "mm/dd/yyyy".
The time input type creates a field in which the user can only enter a time in the format "00:00 AM/PM".
The email input type creates a field which will create an alert if the user does not enter an email address.
The url input type creates a field which will create an alert if the user does not enter a url.
The number input type creates a field in which the user can only enter a number.
The range input type creates a field in which the user can only operate a slide bar. The default range of the slide bar is 0 to 100, but you can use the min and max attributes to set a new range.

If you want to read more about these and all the other input types in HTML5, click the w3shools link under references.

References

Cover Image
HTML Input Types - w3schools.com
Input Type Examples - codepen.io/lofiandcode

HTML5 Form Validation

Joseph Trettevik — Mon, 11 May 2020 04:00:33 +0000

Song of the Week

This week I've been learning about all the different input tag types and attributes in HTML5, and I discovered that HTML5 has some built in form validation. That means you can produce warning messages to notify the user of an invalid entry, all without any JavaScript.

Let's go over four the input tag attributes that I felt were some of the most useful when implementing form validation. Then at the end, you can see how all these attributes work in the embedded CodePen.

Required

The most basic and widely applicable form validation attribute is required. By simply adding this attribute to the input tag, HTML5 will generate an alert message if the user tries to submit that form without entering a value in that field. Here's an example:

<form>
  <label for='name-field'>Name:</label><br>
  <input type='text' id='name-field' required/><br>
  <button type="submit">Submit</button>
</form>

Min and Max

The min and max attribute allow you to define a range of valid entries to the following input tag types: number, range, date, datetime-local, month, time and week. This can be very useful if you want the user to enter a rating from 1-10, or to choose a day after a certain date. Here's an example:

<form>
  <label for='rate-field'>Rating(1-10):</label><br>
  <input type='number' id='rate-field' min='1' max='10' required/><br>
  <button type="submit">Submit</button>
</form>

Step

The step attribute sets an amount by which the value in the field can increase or decrease. So for example, if the input tag is a number type and step equals 5, then the number entered much be divisible by 5. The step attribute works with all of the following input tag types: number, range, date, datetime-local, month, time and week. Here's an example:

<form>
  <label for='donation-field'>
    Would you like to donate to charity?<br>
    Enter a dollar amount in multiples of $5:
  </label><br>
  <input type='number' id='donation-field' step='5'/><br>
  <button type="submit">Submit</button>
</form>

Pattern

The pattern attribute allows you to use a regular expressions to validate the input. This makes pattern extremely powerful and allows you to customize the input requirements to that input's specific needs. This could be useful if the input was for 3 letter airport codes or license plate numbers. The pattern attribute can be used with the following input tag types: text, date, search, url, tel, email, and password. Here's an example:

<form>
  <label for='airport-field'>Airport Code:</label><br>
  <input 
    type='text' 
    id='airport-field' 
    pattern=[A-Z]{3} 
    placeholder='Enter the 3 capitolized letter code.' 
    required
  /><br>
  <button type="submit">Submit</button>
</form>

Interactive Example

To give you a chance to see all these in action I created a simple Airport survey that a hypothetical passenger might fill out. As you try entering invalid values in each field, be aware the HTML5 will always produce an alert on the first field in the form that has an invalid entry. So if you want to see the alerts for an input farther down, you need to enter valid entries in the input fields above.

Takeaways

The required attribute will require the user to entry a value in the field before the form can be submitted.
The min attribute sets a minimum value that is valid for the input field.
The max attribute sets a maximum value that is valid for the input field.
The step attribute sets an amount by which the value in the field can increase or decrease.
The pattern attribute allows you to use a regular expressions to validate the input.

References

Cover Image
HTML Input Attributes - w3schools.com
Airport Survey Form - codepen/lofiandcode

React Native Elements: Disabling the Checkbox Component

Joseph Trettevik — Mon, 04 May 2020 01:43:47 +0000

Song of the Week

While working on a React Native app this week I ran into a problem. How do I make a checkbox component that accepted four specific properties? Those properties were checked, onChange, disable, and size or style. The first place I looked was React Native's core components and was surprised to discover that they didn't have a checkbox component. I could have used the button component, but that would have involved a lot of customizing and I thought, "Surely someone else has made a checkbox component, so why reinvent the wheel?"

Then I found the Native Base checkbox component that works on both iSO and Android. I got excited only to learn from the documentation that it didn't have a disable or style property, again adding to the amount of customization needed.

React Native Elements CheckBox

Finally, I found the CheckBox component from React Native Elements! It had everything; checked, onPress, size, containerStyle, checkedIcon, uncheckedIcon...the list went on. I was particularly excited by those last two properties because I was eventually going to have to add a custom checkbox icon. But wait, no disabled property? Really? Yeah, not ideal, but it was the best I could find. So it was time to customize.

Setting Up Your Environment

Online Development Environment

To play around with this code in an online development environment, go to Expo Snack.

Local Development Environment

If you already have your local environment set up to run React Native apps, then you can just install React Native Elements and skip the rest. Otherwise, follow the installation directions below.

To run locally, this is what you'll need to have installed:

Node and npm
- Click to learn how to install Node and npm.
React JS
- npm install react
React Native
- npm install react-native
React Native Elements
- npm install react-native-elements

Adding Disable Functionality

import React, { Fragment, Component } from 'react';
import { TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import { CheckBox } from 'react-native-elements';

class Checkbox extends Component {
  constructor(props) {
      super(props)
      this.state = {
          checked: this.props.checked
      }
  }

  handleOnPress = () => this.setState({checked: !this.state.checked})

  // Returns an enabled or disabled Checkbox depending on the value of this.props.disabled
  isDisabled = () => {
    if (this.props.disabled) {
      return (
        <CheckBox 
          Component={TouchableWithoutFeedback}
          size={this.props.size}
          title={"I'm a Checkbox"}
          iconRight={true}
        />
      )
    }
    return (
      <CheckBox 
        Component={TouchableOpacity}
        size={this.props.size}
        checked={this.state.checked} 
        onPress={this.handleOnPress}
        title={"I'm a Checkbox"}
        iconRight={true}
      />
    )
  }

  render() {
      return (
          <Fragment>
              {this.isDisabled()}
          </Fragment>
      )
  } 
}
export default Checkbox;

Since the React Native Elements CheckBox component didn't have a disabled property, I added one in my custom component by writing a class component function called isDisabled. The function returns either an enabled or a disabled version of the CheckBox component based on the value of this.props.disabled. So when the function is called within the render() function, only the desired version of the <CheckBox /> is rendered.

If you'd like to see how this code works you can click these two clicks to my Expo Snack account.

Checkbox Example: disabled = false
Checkbox Example: disabled = true

Takeaways

If you're new to React or React Native, remember this trick. I've found that executing a function in render() is a really powerful way to implement all kinds of behaviors. Maybe, like the example above, you want to conditionally render certain components. Or maybe you want to loop through an array of components and display all or some of the components in that array. There are lots of possibilities.

And finally, like many of you I'm always looking for the best ways of tackling these problems. So if you know of a better way to implement this checkbox example, please leave comment and share you're approach.

References

Cover Image
React Native - Button
Native Base - CheckBox
React Native Elements - CheckBox
freeCodeCamp.org - how to install Node and npm.
stackoverflow - How to disable react-native-element's checkbox touchable opacity?

Vanilla CSS - Icon Animation

Joseph Trettevik — Mon, 27 Apr 2020 04:13:14 +0000

Song of the Week

In my last post I covered how to create animations with vanilla CSS, and this week I wanted to build on that by showing you how use animations in a practical way. When building a web page it's very common to add clickable icons on the page that link to other sites, like a related social media account. Giving that icon an animation improves the user experience by indicating that the icon is clickable.

Pseudo-class `:hover`

A quick and easy way to make an icon interactive is to increase its size when the mouse hovers over it. We can do that with the :hover pseudo-class. This pseudo-class allows us to change the styling of the icon based on the state it's in. So in this case, we are changing the styling whenever the mouse hovers over the icon.

If you click on the CSS tab in the codepen above, you can see that following code towards the bottom.

#linkedin:hover {
  transform: scale(1.1);
}

This selector identifies the element with id="linkedin" and indicates that the following styling should be applied when the mouse hovers over that element. The styling being applied is the transform property with a value of scale(1.1). This causes the element to increase in size by a factor of 1.1. You can decrease the size of the element if you enter a number below 1 into the scale function.

Color Transition

Increasing the size of the icon is cool, but what if we wanted to change the color of the icon as well. For this we'll need to create an animation in CSS similar to the ones we created last week.

To create this affect, the following code was added to the CSS.

#linkedin:hover {
  transform: scale(1.1);
  animation-name: linkedin-icon;
  animation-duration: 500ms;
}

@keyframes linkedin-icon {
  100% {
    background-color: #0077B5;
    color: white;
  }
}

The animation-name property links the animation in the @keyframes block below to the #linkedin:hover block, so when the mouse hovers over the icon it will trigger the animation. Notice that @keyframes block only has a 100% style block. Normally there is a 0% style block which specifies starting the properties. Without it, the element will start at it's default properties and then transition to the properties in the 100% over the animation-duration.

Animation Fill Mode

You may have noticed that the icon did not stay blue after the animation was complete. That's because the default behavior is for the element to return to the styling before the animation was applied. If the you want the icon to retain the properties it had at the end of the animation, you need to specify that with the animation-fill-mode property.

The final change to the CSS can be seen below.

#linkedin:hover {
  transform: scale(1.1);
  animation-name: linkedin-icon;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

@keyframes linkedin-icon {
  100% {
    background-color: #0077B5;
    color: white;
  }
}

In the #linkedin:hover block animation-fill-mode is set to forwards. This tells the web browser that you want the styling at the end of the animation to continue to be applied to the element even after the animation is complete.

Takeaways

And that's it. Now you have some simple tools to make links or buttons on your web pages more interaction. Let's quickly review the tools we used.

Pseudo-class :hover - When added immediately after the CSS selector it will apply the styling in the block when the mouse hovers over the element.
transform: scale(1.1); - Increases the size of the element by a factor of 1.1. Entering a number less than 1 will decrease the element's size.
animation-name: animation_name; - Tells the web browser which @keyframes it should apply during the element's animation.
@keyframes animation_name {0%{/*css styling*/} 100%{/*css styling*/}} - Describes the states that the element should transition through to create the animation (0% = starting state and 100% = ending state). The "animation_name" should match the one used for the animation-name of the appropriate element.
animation-duration: /*time in seconds*/; - Tells the web browser how long it should take to complete the animation.
animation-fill-mode: forwards; - Tells the web browser to continue applying the styling that was applied at the end of the animation.

If you'd like to learn more about this topic, click the links under References.

References

Icons Cover Image - freevector.com
FreeCodeCamp.org - Responsive Web Design/Applied Visual Design
CSS Pseudo-classes - w3schools.com
CSS Styling Links - w3schools.com
CSS @keyframes Rules - w3schools.com
CSS animation-fill-mode Property - w3schools.com
Scale Icon on Hover CodePen
Icon Animation without Animation Fill Mode CodePen
Complete Icon Animation CodePen

Vanilla CSS - Animation Timing Functions

Joseph Trettevik — Sun, 19 Apr 2020 01:44:11 +0000

Song of the Week

I've been working on improving my vanilla CSS skills, and I'm learning some pretty cool stuff. So, this week I thought I'd share what I've learned about basic animation and animation timing functions.

Declaring an Animation

Before you can add a timing function to your animation, you need to know the syntax for adding an animation to an element.

element {
  /*Name of the animation to assign to the element*/
  animation-name: cool_animation;
  /*How long you want the animation to take to complete its action*/
  animation-duration: 2s;
}

@keyframes cool_animation {
  0% {
    /*Characteristics/location of the element at the start of animation*/
  }
  /*You can add multiple percentage point blocks here. The element will transition through each.*/
  100% {
    /*Characteristics/location of the element at the end of animation*/
  }
}

To add an animation to an element you simply declare an animation name and duration inside the selector block for that element. You can also declare these inside the class selector block and the animation will be added to all elements in that class.

You also need specific instructions on what animation is supposed do to over that animation-duration. This is done by creating a @keyframes block with the same name as the one declared in the selector block. In the @keyframes block you can specify positions, colors, size or anything else that the element should have at an exact movement in the animation. Start of the animation is represented by a 0% block and the end is represented by a 100% block. If you only set a 0% and a 100% block, the element with transition between the two over the animation-duration. However, you can also add other percentage blocks between 0% and 100%, the element will transition through each one.

Timing Functions

To fine tune the variation of the element's speed as it moves through the animation, you can add a property called animation-timing-function. This is declared in the selector block and would look like this,

element {
  /*Name of the animation to assign to the element*/
  animation-name: cool_animation;
  /*How long you want the animation to take to complete its action*/
  animation-duration: 2s;
  /*Defines the speed at which the element transitions through different parts of the animation.
  Basic values include linear, ease, ease-in, ease-out.*/
  animation-timing-function: ease;
}

There are four basic timing function values:

linear: even speed over the whole animation.
ease: slow in the beginning, fast in the middle, and slow at the end.
ease-in: starts slow and then speeds up as it moves to the end.
ease-out: starts fast and then slows down as it moves to the end. If you don't set any timing function, the default is ease.

Above we can see examples of all four basic timing functions. The red, green, blue, and purple balls are set to linear, ease, ease-in, and ease-out, respectively.

Notice that,

All the balls start and stop their animations at exactly the same time but how they get there in between is different.
This is the difference between the animation-duration and animation-timing-function properties.
In the .ball selector block, a property called animation-iteration-count is set to 'infinite'. This causes the animation to execute continuously. If it was set to say 3, for example, the animation when execute 3 times and then stop.

Cubic-Bezier

Maybe you're thinking, "Sure those timing functions are great, but none of them are giving me exactly the behavior I want." Not to worry! Vanilla CSS has got you covered with the cubic-bezier function.

Cubic-bezier allows you to create a custom timing function by passing in 2 points on an x-y axis with the following syntax:

element {
  /*Other properties*/

  /*The points (x1, y1) and (x2, y2) can be any decimal point value, usually between 0 and 1, but they can also be values about 1.*/
  animation-timing-function: cubic-bezier(x1, y1, x2, y2);
}

Here are the basic points to understand:

cubic-bezier(x1, y1, x2, y2)

The default starting and end points are (0, 0) and (1, 1), respectively.
The points you pass in can be any decimal point values, usually between 0 and 1, but they can also be values above 1.
The same amount of time is allocated to go from (0, 0) to (x1, y1), (x1, y1) to (x2, y2), and finally (x2, y2) to (1, 1).
Since speed = distance/time, as the points get farther apart the speed of the animation increases at that stage, and as the points get closer together the speed of the animation decrease at that stage.

As an example, if point (x1, y1) is close to (0, 0) and point (x2, y2) is close to (1, 1), the cubic-bezier function will create a timing that makes the element's animation start slow, go really fast in the middle, and then go slow at the end.

Bouncing Balls Animation

Let's say we wanted to create a natural motion like that of a bouncing ball. We can accomplish that with the cubic-bezier function and the animation-direction property.

If you click on the CSS tab on the CodePen above you'll see that I passed (0.5, 0.05) and (1, 0.5) into the cubic-bezier funcion. This creates a motion that closely approximates how a ball accelerates as it falls to the grown. To get the bounce back up effect, I set the animation-direction to "alternate." This causes the animation to alternate between going forwards and backwards through the animation.

Bouncing Balls with Varied Speeds Animation

It's great that we have a natural bouncing ball animation now, but wouldn't it look cooler if the balls were bouncing at different rates?

Remember when we talked about how the animation-duration and animation-timing-function properties were different? In the basic timing function example, we saw that all four balls had the same animation-duration but different animation-timing-function values. This caused them to motive out of sync. Well now we have three balls with the same animation-timing-function values, but each with a slightly different animation-duration. This causes them to move out of sync because they have different amounts of time to complete that same animation.

Takeaways

animation-name: keyframe_name;
- Tells the element which @keyframes it should follow during animation.
@keyframes keyframe_name {0%{/Some properties/} 100%{/Some properties/}}
- Describes the states that the element should transition through to create the animation (0% = starting state and 100% = ending state). The "keyframe_name" should match the one used for the animation-name of the appropriate element.
animation-duration: /time in seconds/;
- Tells the element how long it should take to complete the animation.
animation-iteration-count: /integer/;
- tells the element how many times to complete the animation. Setting this to "infinite" will cause the animation to run continuously.
animation-timing-function: /specify timing function/; *defines any variation in the speed of the animation.
- Possible values:
- linear: even speed over the whole animation.
- ease: slow in the beginning, fast in the middle, and slow at the end.
- ease-in: starts slow and then speeds up as it moves to the end.
- ease-out: starts fast and then slows down as it moves to the end.
- cubic-bezier(x1, y1, x2, y2) - sets custom timing function based the two points passed in.
Setting different animation-durations or animation-timing-functions for two elements with the same @keyframes block will make them perform the same animation at different rates.
animation-direction: alternate;
- Causes the element to perform the animation in reverse after it has performed it in the forward direction.

Most of what is covered in this post I learned on freeCodeCamp.org. Definitely check it out. It's an amazing free resource if you want to learn frontend development, or if like me, you want to expand on what you already know.

References

Cover Image
FreeCodeCamp.org - Responsive Web Design/Applied Visual Design
Animation Timing Functions CodePen
Bouncing Balls CodePen
Bouncing Balls with Varied Speed CodePen
Making a Bouncing Ball Entirely with CSS

Big O Notation: O(N!)

Joseph Trettevik — Mon, 13 Apr 2020 02:14:45 +0000

Song of The Week

Haha, this isn't really the song of the week, but I couldn't have a Top Gun themed post and NOT embed Danger Zone by the great Kenny Loggins! I put the real song of the week at the bottom.

Danger Zone!

Okay technically we were in the Danger Zone with O(2^N), O(n²), and even O(N log N) to certain extent. But O(N!) is really bad. You should definitely avoid writing code that has a time complexity of O(N!).

Now you may be thinking, "How bad can it be?" It's pretty bad. Let's take a look at why.

Suppose you passed an array of length 5 to a function with a time complexity of O(2^N). In that case, the number of iterations of the code would be:

2 * 2 * 2 * 2 * 2 = 32

Now suppose you passed that same array to a function with a time complexity of O(N!). The number of iterations would then be:

1 * 2 * 3 * 4 * 5 = 120

In this example, the O(N!) function performed almost 4 times as many iterations as the O(2^N). However, it gets worst as N increases. Watch what happens to the number of iterations required for both functions as N increases.

O(2^N) :

N	Number of Iterations
6	2 * 2 * 2 * 2 * 2 * 2 = 64
7	2 * 2 * 2 * 2 * 2 * 2 * 2 = 128
8	2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 25
9	2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 512

O(N!) :

N	Number of Iterations
6	1 * 2 * 3 * 4 * 5 * 6 = 720
7	1 * 2 * 3 * 4 * 5 * 6 * 7 = 5,040
8	1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 = 40,320
9	1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 = 362,880

After only increasing N to 9, the O(N!) function now performs 709 times as many iterations as the O(2^N) function! That's crazy, right?! Imagine if N equaled 100, or 1000?

The reason the factoral is increasing at such a faster rate is because while the total is multipled by 2 each time in 2^N, the total is multiplied by a number that continues to increase each time in the case of N!.

Basic Example

const nFacRuntimeFunc = (n) => {
  for(let i=0; i<n; i++) {
    nFacRuntimeFunc(n-1);
  }
}

This example function doesn't do any thing other than execute N! times, but that makes it ideal for helping us understand what to look for. If n = 3, then the for loop will make 3 recursive calls and pass in n = 2. Then those calls will make 2 recusive calls, which will both make 1 recusive call.

So,

If N = 4, then the function would create that same tree 4 times and complete 24 iterations of the code. Easy, right? We got this!

If you'd like to see a non-trivial example of an algorithm with a time complexity of O(N!), checkout the brute force solution to the Traveling Salesman Problem. There's a link to this solution under references below.

Takeaways

Stay off the highway to the Danger Zone.
Watch for algorithms that make recursive calls from inside a loop that increases it's number of iterations as N increases.
Checkout the brute force solution to the Traveling Salesman Problem, as well as the best solution. It's pretty interesting.

Real Song of The Week

Sorry, I know the intro to this week's song is a little emo, but it's so good! Hope you like it! :)

References

Images and Gifs:
Cover Image
Archer - Top Gun motorcycle scene gif
Archer - Top Gun classroom scene gif
Archer - Top Gun High Five gif

Technical:
How to Calculate N!
Basic Example of O(N!) function - Stackoverflow
Traveling Salesman Problem - Brute Force Solution
Traveling Salesman Problem - Best Solution