DEV Community: Katelyn

Git Commands That Could Save your Project

Katelyn — Tue, 04 Jan 2022 22:51:18 +0000

If you haven't had a chance to utilize Github with your projects, now is a good time to consider it. Github is a distributed version control system that is intended to help you keep track of changes you've made to files in your project as well as make collaboration among developers more streamlined. On top of these, Github's will also let you revert to a previous version of your project if something goes awry because of the change history it stores on your local machine.

Below are some easy to use commands that may help you survive possible project disasters.

Configuring your Project

$ git config --global user.name "Your Name"
Set the name that will be attached to your commits and tags.

$ git config --global user.email "you@example.com"
Set the email address that will be attached to your commits and tags.

$ git config --global color.ui auto
Enable some colorization of Git output.

Starting a Project

$ git init [project name]
Create a new local repository. If [project name] is provided, Git will create a new directory name [project name] and will initialize a repository inside it. If [project name] is not provided, then a new repository is initialized in the current directory.

$ git clone [project url]
Downloads a project with the entire history from the remote repository.

Daily Necessities

$ git status
Displays the status of your working directory. Options include new, staged, and modified files. It will retrieve branch name, current commit identifier, and changes pending commit.

$ git add [file]
Add a file to the staging area. Use in place of the full file path to add all changed files from the current directory down in the directory tree.

$ git diff [file]
Shows changes between working directory and staging area.

$ git diff --staged [file]
Shows any changes between the staging area and the repository.

$ git checkout -- [file]
Discard changes in working directory. This operation is unrecoverable.

$ git reset [file]
Revert your repository to a previous known working state.

$ git commit
Create a new commit from changes added to the staging area. The commit must have a message (ex. git commit -m [message here]).

git rm [file]
Remove file from working directory and staging area.

$ git stash
Put current changes in your working directory into stash for later use.

$ git stash pop
Apply stored stash content into working directory, and clear stash.

$ git stash drop
Delete a specific stash from all your previous stashes.

Branching

$ git branch [-a]
List all local branches in repository. With -a: show all branches (with remote).

$ git branch [branch name]
Create new branch, referencing the current main.

$ git checkout [-b][branch_name]
Switch working directory to a specified branch. With -b: Git will create specified branch if it does not exist.

$ git merge [from name]
Join specified [from name] branch into your current branch (the one you are currently on).

$ git branch -d [name]
Remove selected branch , if it is already merged into any other. -D instead of -d forces deletion.

Review & Revert work

$ git log [-n count]
List commit history of current branch. -n count limits list to last n commits.

$ git log --oneline --graph --decorate
An overview with reference labels and history graph. One commit per line.

$ git log ref..
List commits that are present on the current branch and not merged into ref. A ref can be a branch name or a tag name.

$ git log ..reg
List commit that are present on reg and not merged into current branch.

$ git reflog
List operations (ex. checkouts or commits) made on local repository.

$ git reset [--hard] [target reference]
Switches the current branch to the target reference, leaving a difference as an uncommitted change. When --hard is used, all changes are discarded.

$ git revert [commit sha]
Create a new commit, reverting changed from the specified commit. It generates an inversion of changes.

Repository syncing

$ git fetch [remote]
Fetch changes from the remote, but not update tracking branches.

$ git fetch --prune [remote]
Delete remote Refs that were removed from the remote repository.

$ git pull [remote]
Fetch changes from the remote and merge current branch with its upstream.

$ git push -u [remote] [branch]
Push local branch to remote repository. Set its copy as an upstream.

TL;DR

You should really consider a secondary back up as you work on projects in case something goes wrong. Github is a great option that also allows collaboration amongst groups.

Let's Talk Logical Operators

Katelyn — Thu, 09 Dec 2021 21:26:31 +0000

We're going to go over three of the logical operators that Javascript uses:

Why use a logical operator?

The benefit of a logical operator is to connect two (or more!) expressions so that the value of the total (all of the expressions you just connected) is dependent on those expressions.

These operators are used within code to compare variables and values when creating various logic methods, often using their boolean values. When used within functions it gives more logic options for the code to use and change based on user behavior. This can also help DRY up code in condensing functions.

! (NOT)

The NOT ! operator is generally used as a boolean. Logical NOT will have truthy value if the operator it's called on (like !(6 === 3) is false and vice-versa (like !(6 === 6) is considered a false value. Here's a different way of wording the NOT operator with the previous examples: Return true if x is not strictly equal to y, otherwise return false.

&& (AND)

The AND && operator will return true if both sides of the operator or boolean values are true ((x < 10 && y > 1) is true) otherwise, it returns false. In other words, when using the AND operator, if both x and y are true, then the logic as a whole is true. If one part of the logic is false, the whole problem returns false. It's also important to not that you can chain on the AND operator more than once.

|| (OR)

As with the other operators, the OR || operator is usually used within a boolean context. A problem using the OR operator will return true if either side of the values are true. If either/both x or y are true, return true. If both are false, return false. It's also important to not that you can chain on the OR operator more than once.

What if you mix operators?

Operators can be mixed within one expression. However, logical operators use an order of precedence, called logical operator precedence if that occurs. The order is as follows: logical NOT (!), logical AND (&&), then logical OR (||)

TL;DR

NOT ! - this will negate a boolean value (!is = is not)
AND && - can be used with two (or more) values and will return true if all values are also true, will return false otherwise
OR || - can also be used with two (or more) values and will return if any of the values are true, will return false if all of the values are false
if you use these operators in the same expression, keep in mind the order in which Javascript will go through them.

Controlled vs Uncontrolled Components

Katelyn — Tue, 23 Nov 2021 23:49:22 +0000

What is the difference between controlled and uncontrolled components in react?

To put simply, controlled components have their data being handled with a react component whereas an uncontrolled component's data is being handled with the DOM itself. Let's dig into this answer a bit more though starting at the basics and including a few visual examples.

What are controlled and uncontrolled components?

Form elements are rendered with HTML within React components where data is being accessed and manipulate. When we are discussing uncontrolled and controlled components these are terms that are specifically discussing the way in which the form created is handling and accessing that said data. The data handling can be done a few different ways but is commonly seen using typed elements like, <input> and <textarea> or selected elements such as: <checkbox>, <select>, <radiobutton>.

Controlled Components

As we stated earlier controlled components handle their updated data using use state. This would look like setting the value for the input form element to this.state.value or to a use state. When setting these element's value to use state, we have wrapped up the control for both the rendering of the form as well as future input of the form into the same React component. Another way to think of is is that the React state will always act as "the source of truth". As users interact with the form, handleChange will run on every keystroke or interaction - which then updates the React state.

The React documentation acknowledges that writing out controlled components can feel banal since you do need to create an event handler for each way the data can change while also containing that in the React component use state.

Uncontrolled Components

A helpful tidbit to remember about uncontrolled components is that the part of the reason it's uncontrolled is because the value is set by the user and not by the program. With this in mind the input: <input type="file" /> will always be uncontrolled without the value being set. This will render the for element's, where the form element's data is handled by the DOM. In this way it functions similarly to traditional HTML code.

Due to uncontrolled components keeping their "source of truth" in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components.

TL;DR

The primary difference between a controlled component vs an uncontrolled component is related to how they handle their value. Uncontrolled components pass down the value through props. In contrast, controlled components use state to handle the value internally. For most use cases, controlled components are the best option in code.

Algorithmic Problem Solving - Step by Step

Katelyn — Thu, 18 Nov 2021 15:16:36 +0000

Let's be real - in the current job market most employers want to know that you can not only learn a coding language, but also apply it while actively problem solving. In walks algorithm problems (or also fondly know as algos) which are often used as a tool for employers to filter for exactly what they're looking for. At first glance, algorithm problems can be intimidating! The secret to tackling these is going step by step.

Steps to algorithmic problem solving

Google often has a lot to tell us. One of the many things is how to go about solving a problem. There are four recommended steps: analyze, implement, experiment, design. Lets go through these four steps and talk through what exactly is being recommended.

Analyze

Read through the problem presented. What is the problem being presented? Are there any specifications being listed/stated? If it's easier to separate the problem into sections, do that! Try stating the problem in your own words to solidify that you understand the problem.

Implement

We have a firm grasp of the problem at hand. Now, how would we go about solving this problem? What steps do we need to take to solve the problem? Write line by line (similar to how you would write out your code) what exactly you need to do to get the desired outcome.

Experiment

This is the fun part - write out your own test cases for the code you'll eventually write. Include what you expect the return to be as well. Think through what you have written out so far, is there a test that would break your code? Include that too. Coding can be fun - embrace the unknown.

Design

Thus far, we've read through the problem and grasped what is being presented to us. Then we've written out what we expect to code out in JavaScript as well as made test cases. Now begin to actually code out the solution. Remember that the code may fail the test cases, try experimenting with the code and tests to see where the issue may be.

Our own algorithmic problem to solve

Here's our problem:

Confirm whether or not a word is a palindrome.

For example:



> isPalindrome('kayak')
= true

> isPalindrome('cheetah')
= false

> isPalindrome('tenet')
= true

Analyze
The current problem is asking for a function that will confirm whether or not a string is the same both backwards and forwards. The example it gave is true or false which also implies that this will involve comparing the string at some point in my code. For our use, let's assume that it will only give single word strings and that case doesn't matter or all strings are lowercase.

Implement
Based on the problem's expected answer I'll probably attempt to solve the algorithm like so:

Create a function that takes a string as an argument
Reverse the string (using built-in javascript methods like .split() and .reverse() could make this quicker but we're going to go the long way this time) so we'll need to run a for loop that iterates through the string
Compare the initial string to the same string that is reversed using an if statement

Experiment
Let's make test cases with expected results! For now, I'll only list the test cases, but think through what you think will work. There's a couple palindromes that are actually two words instead of one, something that isn't accounted for in the hard code. Let's find out what the code does.



> isPalindrome("madam")
> isPalindrome("tacos")
> isPalindrome("trees")
> isPalindrome("race car")
> isPalindrome("racecar")
> isPalindrome("taco cat")
> isPalindrome("tacocat")

Design
After rereading the problem and how it could be solved this is what should work:



function isPalindrome(str){
  let long = str.length;
  for(i = 0; i < long/2; i++){
    if (str[i] !== str[long -1 -i])
       return false;
  }
  return true;
}

Here's our results:



> isPalindrome("madam")
  // expect true
= true

> isPalindrome("tacos")
  // expect false
= false

> isPalindrome("trees")
  // expect false
= false

> isPalindrome("racecar")
  // expect true
= true

> isPalindrome("taco cat")
  // expect false
= false

> isPalindrome("race car")
  // expect false
= false

> isPalindrome("tacocat")
  // expect true
= true

It works!

If using the built in methods from javascript we could do something shorter:



function isPalindrom(str) {
    return str == str.split('').reverse().join('');
}

That's an algorithm problem from start to finish. Though intimidating, they are definitely possible to tackle. Remember - analyze, implement, experiment, and design make breaking down the problem into bite size pieces easier.

Good luck!

What Made You Decide to do a Coding Bootcamp?

Katelyn — Thu, 28 Oct 2021 18:43:31 +0000

"What made you decide to do a coding bootcamp?"

For those that have made a big career shift of any kind but particularly into the tech field this question is probably familiar. Changing careers from Social Work to Software Engineering has had many people asking this question, sometimes multiple times. At this point, I have most of my answer rehearsed.

It's a field that is constantly changing
Working remotely is more often an option - thus making it more possible to travel while working
The emotional toll is a lot less than social work
Opportunities are endless - jobs are available in almost every field of interest
There's still opportunity for helping others in this line of work

This list is just a start too. Some of these are particular to my experiences and preferences. However there are plenty of shared reasons that draw people to make the change. After taking time to do some research on the job field at large, I was easily convinced this was a good decision for me. Here are three reasons that might convince you too:

Development is a growing field

In 2020, during a time that many job fields declined due to COVID, software development continued to grow. It's expected that in the next 10 years alone, the job market will grow by 20%. The US Bureau of Labor Statistics estimates around 150,000 open positions a year. As the daughter of someone from the boomer generation, the phrase "job security" has been hammered in as an important attribute of any job decision. As far as security goes - a growth rate of 20% isn't bad.

Development is inherently a team based role

Due to the nature of projects - collaboration is an expectation in this field. The need for diversity within teams becomes more necessary due to this as well. A solid team will be communicative, diverse, and goal oriented. (This is not a complete list, but for our purposes it's enough.) For those who are like me and enjoy working with people - this is a huge draw. The initial stereotype is working on a computer by yourself. Thankfully, only half of that is true.

Software Development is a lot like puzzling

Often you'll hear that HTML is like the skeleton, CSS is like the skin, and Javascript is like the brain. Another way to look at it is that HTML and CSS are the edges and corners of a puzzle with Javascript as the the all the middle pieces. There's a lot of time figuring out how individual pieces work together, you have an idea of what the ending result will look like, and sometimes you'll want to make pieces fit that don't. Finally, both have that euphoric feeling of accomplishment when you figure out a section that was proving to be particularly difficult.

Overall, changing careers is equally terrifying and exhilarating. For me, a list makes the decision process (as well as the reminder of why I made said decision) that much easier. Whatever has lead you down this path, preparing for what's ahead, and remembering why you started down this road helps with the ups and downs.