Similar to my How Do I Get My Create-React-App Portfolio on Github Working, the documentation on how to edit it on the Github Platform and on my local machine and get the changes/edits to show up on the live version didn't exist. Brian Mock (@wavebeem on twitter) took the time to work with me to figure out how to get my edits to show up.

It took a lot of time to figure out the right commands - it was a joint effort trying to figure them out as we both read through git documentation and create-react-app documentation to try and piece together this puzzle and I wanted to write it out because I don't want anyone to struggle like I did and contemplate chucking their laptop out a window.

There are two sections - jump to which one you need!

Making Your Changes/Edits on the Github Platform
Making Your Changes/Edits on Your Local Machine

_____

Making Your Changes/Edits on the Github Platform

*after making your edits*

Step 1: Open up your project folder that's on Github on your local machine in terminal

The path to my folder: documents -> Github -> saharafathelbab.github.io

The commands to get to my directory:

cd documents
cd Github
cd my-repository-folder-name-here.

Now you should be in your project folder

Step 2: Check you are in the right branch

Automatically, you should be on the branch that includes package-lock.json, package.json, public folder, README.md, src folder.

How do you check what branch you are in?

On mac - click your finder icon on your dock, and go through the path to get to your project folder. As I mentioned above, the path to my project folder is: documents -> Github -> saharafathelbab.github.io.

In your project folder, if you do not see package-lock.json, package.json, public folder, README.md, src folder then you are on the wrong branch. [You may see asset-manifest.json, favicon.ico, index.html, logo192.png, logo512, manifest.json, robots.txt, static folder instead)

How to change the branch you're on:

In terminal the command you type is:

git checkout latest*

*latest: the name of my branch that includes package-lock.json, package.json, public folder, README.md, src folder. To learn more of why that is: How Do I Get My Create-React-App Portfolio on Github Working

After you run that command, click back to your folder you got to via finder - it should now show package-lock.json, package.json, public folder, README.md, src folder signifying that is the branch you are currently on.

Step 3: We need to pull our edits we made on GitHub to our local machine

In terminal the command is:

git pull

After you run this command, you will see a mini summary of what file you edited.

You may see an Untracked file warning with .DS_Store however that's okay! It is there! Git is playing games (on a real note - check your .gitignore file and you should see .DS_Store under #misc in the event Git is in fact not playing games).

Step 4:  We need to install gh-pages packages.

We only need to do this once - this installs the gh-pages packages.

In terminal, the command is:

npm install -D gh-pages

Step 5: We need to run npm install

In terminal, the command is:

npm install

You may remember doing this over on your local machine to view your project on localhost.

After this you may notice a few new additions in your folder via finder, what should be in there now: build folder, node_modules folder, package-lock.json, package.json, public folder, README.md, src folder.

Step 6: Run a command to check the status of the branch

As I mentioned above, your folder got some new additions! Now we have to commit all of that stuff to our actual GitHub folder online

In terminal the commands you type is:

git status
git add -A
git commit -m "some message"

git status
Shows you the status of your branch - if you've made any changes this is where git will show that you have some edits/file changes.

git add -A
Adds all new and updated files to the staging area

If I bring my analogy from my previous post - How Do I Get My Create-React-App Portfolio on Github Working-  to explain this:

You have a dozen packages you're delivering to this one house, and when you get to the house, you take the packages out of the truck and add all of them to the patio area i.e. the staging area

git commit -m "some message"
Commits the change with a short message on the change you made

Keeping up with the story above, you ring the door bell and someone answers the door. They need to sign their name on a device before you can hand them their packages they ordered.

the -m means message and in quotations is the message relating to what you're planning to push onto GitHub.

When you run the last command, you should see something along the lines appear in terminal:

1 file changed, 1 insertion (+), 1 deletion (-)

Now let's push our edits (i.e our additions via running npm install)  to our actual GitHub folder online

The terminal command is:

git push

Keeping up with the story above: The person signs their name and finally you can give them their packages to take in their home.

The "message" that you're typing shows up like this on Github:

Step 7: Run the commands to run build + send all changes from 'latest' branch into 'master'

As I mentioned before, the branch latest for me is the one that has build folder, node_modules folder, package-lock.json, package.json, public folder, README.md, src folder.

In terminal, the command you type is:

npm run build
npx gh-pages -- branch master -d build

AND TADA - you should be met with one single word in terminal: Published. You may need to go into chrome incognitio to see your changes immediately - takes a bit to show up on just regular!

Also, when you run npm run build it may take a while!!! The same goes for npx gh-pages -- branch master -d build it'll take a good few seconds!

Let's talk about that second command if you're wondering where it came from:

npx gh-pages -- branch master -d build sends all your changes from 'latest' into 'master'.

Now let's break it down further:

npx gh-pages - If you remember earlier, we ran the npm install -D gh-pages to install gh-pages packages. So that's us using gh-pages package.

branch master - The branch we are sending all our changes to is master.

-d build - directory, build folder. Remember earlier when we ran npm install we had a new addition of a build folder.

A mini tangent if you're curious by the phrasing "send all changes from 'latest' branch into 'master'":

As Brian was mentioning to me when I asked about sending all changes from 'latest' branch into 'master' - you can imagine "master" branch as having everything from "latest" branch public folder but on this top tier special level. The way I kept thinking of it was that if the public folder in latest should also be included in the master branch that would mean that there will be duplicates of index.html and logos as well but that is not the case! It is in it's own special league!

After this first-time-editing on your Github Platform, the next time you make an edit on the GitHub Platform and would like for it to show up live you just need to go through the following commands after you've made your edits:

Step 1: Open up your project folder that's on Github on your local machine in terminal

The path to my folder: documents -> Github -> saharafathelbab.github.io

The commands to get to my directory:

cd documents
cd Github
cd my-repository-folder-name-here

Now you should be in your project folder

Step 2: Pull your edits you made on GitHub onto your local machine

git pull

Step 3: Run the commands to run build + send all changes from 'latest' branch into 'master'

npm run build
npx gh-pages -- branch master -d build

AND TADA - you should be met with one single word in terminal: Published.
____________________________________

Making Your Changes/Edits on Your Local Machine

Step 1: Open up your project folder that's on Github on your local machine in terminal

The path to my folder: documents -> Github -> saharafathelbab.github.io

The commands to get to my directory:

cd documents
cd Github
cd my-repository-folder-name-here

Now you should be in your project folder

Step 2: Check you are in the right branch

Automatically, you should be on the branch that includes package-lock.json, package.json, public folder, README.md, src folder.

How do you check what branch you are in?

On mac - click your finder icon on your dock, and go through the path to get to your project folder. As I mentioned above, the path to my project folder is: documents -> Github -> saharafathelbab.github.io.

In your project folder, if you do not see package-lock.json, package.json, public folder, README.md, src folder then you are on the wrong branch. [You may see asset-manifest.json, favicon.ico, index.html, logo192.png, logo512, manifest.json, robots.txt, static folder instead)

How to change the branch you're on:

In terminal the command you type is:

git checkout latest*

latest*: the name of my branch that includes package-lock.json, package.json, public folder, README.md, src folder. To learn more of why that is: How Do I Get My Create-React-App Portfolio on Github Working

After you run that command, click back to your folder you got to via finder - it should now show package-lock.json, package.json, public folder, README.md, src folder signifying that is the branch you are currently on.

Step 3: We need to install gh-pages packages.

We only need to do this once - this installs the gh-pages packages.

In terminal, the command is:

npm install -D gh-pages

Step 4: We need to run npm install

In terminal, the command is:

npm install

You may remember doing this over on your local machine to view your project on localhost.

After this you may notice a few new additions in your folder via finder, what should be in there now: build folder, node_modules folder, package-lock.json, package.json, public folder, README.md, src folder.

Step 5: Minimize your terminal window and Open your editor up (Atom, VSCode, whatever you coded in!) and open up your project folder that is currently in your Github folder

When you open your editor, click File -> Open and go through the path to get to your project folder. The path to my project folder is: documents -> Github -> my-project-folder

open my-project-folder in your editor and make your edits AND SAVE YOUR EDITS.

On mac:  CMD + S

If you are trying to locate your react components + Main.js file: click the src folder and you'll see a list of all your react components and your Main.js file.

Step 6: Bring back your terminal window your minimized and check the status of your branch to see if git saw a change has been made

Once I saved my changes, in terminal I first ran the command:

git status

I use this as a double-check: This command shows you the status of your branch. If you've made any changes this is where git will show that you have some edits/file changes. I wanted to see if git saw an edit has been made; it did! 🎉

Step 7: Add all new and updated files to the staging area

The terminal command is:

git add -A

If I bring my analogy from my previous post - How Do I Get My Create-React-App Portfolio on Github Working-  to explain this:

You have a dozen packages you're delivering to this one house, and when you get to the house, you take the packages out of the truck and add all of them to the patio area i.e. the staging area

Step 7: Commit the change with a short message on the change you made

The terminal command is:

git commit -m "some message"

Keeping up with the story above, you ring the door bell and someone answers the door. They need to sign their name on a device before you can hand them their packages they ordered.

the -m means message and in quotations is the message relating to what you're planning to push onto GitHub.

Step 8: Push all of our edits with the commit message onto Github

The terminal command is:

git push

Keeping up with the story above: The person signs their name and finally you can give them their packages to take in their home.

The "message" that you're typing shows up like this on Github:

Step 9: Run the commands to run build + send all changes from 'latest' branch into 'master'

In terminal, the command you type is:

npm run build
npx gh-pages -- branch master -d build

AND TADA - you should be met with one single word in terminal: Published. You may need to go into chrome incognitio to see your changes immediately - takes a bit to show up on just regular!

Also, when you run npm run build it may take a while!!! The same goes for npx gh-pages -- branch master -d build it'll take a good few seconds!

Let's talk about that second command if you're wondering where it came from:

npx gh-pages -- branch master -d build sends all your changes from 'latest' into 'master'.

npx gh-pages - If you remember earlier, we ran the npm install -D gh-pages to install gh-pages packages. So that's us using gh-pages package.

branch master - The branch we are sending all our changes to is master.

-d build - directory, build folder. Remember earlier when we ran npm install we had a new addition of a build folder.

A mini tangent if you're curious by the phrasing "send all changes from 'latest' branch into 'master'":

As Brian was mentioning to me when I asked about sending all changes from 'latest' branch into 'master' - you can imagine "master" branch as having everything from "latest" branch public folder but on this top tier special level. The way I kept thinking of it was that if the public folder in latest should also be included in the master branch that would mean that there will be duplicates of index.html and logos as well but that is not the case! It is in it's own special league!

After this first-time-editing on your local machine, the next time you make an edit on your local machine and would like for it to show up live you just need to go through the following commands after you've made your edits:

Step 1: Open up your project folder that's on Github on your local machine in terminal

The path to my folder: documents -> Github -> saharafathelbab.github.io

The commands to get to my directory:

cd documents
cd Github
cd my-repository-folder-name-here

Now you should be in your project folder.

Step 2: Check the status of your branch to see if git saw a change has been made

git status

Step 3: Add all new and updated files to the staging area

git add -A

Step 4: Commit the change with a short message on the change you made

git commit -m "some message"

Step 5: Push all of our edits with the commit message onto Github

git push

Step 6: Run the commands to run build + send all changes from 'latest' branch into 'master'

npm run build
npx gh-pages -- branch master -d build

AND TADA - you should be met with one single word in terminal: Published.

I hope this documentation was helpful to anyone who is out there googling how to make edits to your react.js portfolio - this is only my second documentation post so I hope I explained everything well!

TWITTER | INSTAGRAM | YOUTUBE | PINTEREST | GOODREADS

A little while ago I mentioned I bought new sneakers in my When to Get New Running Sneakers post, but I didn't mention which sneaker company I went with. So, here we are, finally 3 Months of running with this shoe to give you a full rundown on the Pros and Cons of my new running sneaker.

Say hello to On Running's Cloudswift.

And as the name suggests, you will feel like you're running on clouds. I came across the brand On Running after seeing USA Heptathlete Chair Hawkins being sponsored by them and her wearing the Cloudswift. If you're new here, there are 2 Olympians I am very up-to-date with on on social media and that's Chari Hawkins and Georganne Moline, 400M Hurdler - they're a great instagram follow for inspiration and motivation! Anyways, before this ends up a post of me listing all the reasons why you should follow them, let's talk about Cloudswift!

Are the Cloudswift a Neutral or Stability Support Sneaker?

They are a Stability Support sneaker. I have a flat foot - as in quite literally there is no arch in my foot at all. So, I need all the support to makes sure my foot is protected - as running is a high impact support, getting the right shoe for your feet is super important.

Did they take a while to break in?

Before running in them, I walked in them for 3 days - to the library, to my house, everywhere. When I went running with them I had no issues with blisters in the back or any type of pain while running. This type of On Running shoe is not narrow at all.

Did you size up?

I normally get my running sneakers in a size 9 US while my normal-walking-sneakers are a size 8 1/2. I went in store to try them on in a size 9 and they had a comfortable amount of room for my toes and around my foot. I would recommend trying them in store first though before purchasing online.

They have a lot of third party sellers rather than an actual On Running store, so you can check near you if local sneaker stores have them for you to try on before purchasing online from the actual On Running website. Depending on the type of On Running sneaker, you may have to size up. For example, the Cloud X cuts a bit smaller than the Cloudswift, so I would have to try them in person to see if I'd need to go up a half size.

Do they feel light while you're running?

No. In the beginning, I was hyper aware of how heavy the Cloudswift were compared to my Nike's. Though I should note that my Nike sneakers support was non-existent at this point so really any shoe would feel heavy when I made the switch to a new one. The first time I went running with them they felt  heavy and I felt I was running slower because I still had to adapt to the support of the sneaker.

Three months of running, and I would best summarize them as 'chunky' but comfortable. They take a while to get used in terms of support, and I'm only aware of their "weight" when my running form is a bit off. Like if I'm not landing mid foot with a forward lean then I'm hyper aware of their weight if that makes sense?

Are the Cloudswift comfortable?

Yes. Yes. Yes. Nothing compares to the comfort level of these shoes. You'll really feel like you're walking/running on clouds. No shoe can compare at all. If it helps at all: I bought my mom the Cloud 50 | 50 for her birthday and she loved how comfortable they were as she walked. My sister (that same day they arrived to my house) happened to notice them, tried them on and later that week went to buy herself a pair.

So, in terms of comfort they are mama and sister approved™.

How do they feel during track workouts?

I love them on the track, the support, although took a while for me to get used to in terms of heavy-ness, is amazing. As I'm sprinting, I'm not aware of their weight though- as I mentioned, if I have the right form, they don't feel heavy at all. It's all in your form for these shoes! So anytime I feel them heavy, I know that my form needs some minor adjustments.

How do they feel during hill sprints?

Okay, this is the section I was waiting to tell you all about! The first time I went hill sprinting with them, one of my intervals was a 4'38 pacing/mile. I've never seen those numbers before. I've never seen a 4 minute mile ever as an interval. If you couldn't tell, they are amazing for hill sprints, the support is really just what I needed.

I mentioned the interval to a friend of mine, and she mentioned that I probably had that speed in me all this time, I just wasn't wearing the right shoes. And she's not wrong now that I think of it!

How are they in the rain?

So, they aren't waterproof but I did run with them (because do I look like I have multiple running sneakers for different weathers no no no) and they didn't feel weighed down at all. They felt the same as they would when it was sunny outside. They have a good grip on the bottom, so from my experience I did not feel ~slippy~.

I really tried to take an artsy photo of the bottom and this is what I ended up with...

What are the laces on the them like?

So up until yesterday, I didn't have any issues with the laces. They are a bit on the thin side, so I really recommend double knotting them to make sure they don't become undone. Yesterday, while I was running they became undone even though they were double tied - I mainly think this is because I didn't tighten them enough though not so much fault with the thinness of the lace, however I wanted to be as transparent as possible.

I really wanted to take a jumprope photo but uh wow that's hard to do..

One thing the above photo shows really well is that the middle section of the shoe isn't separate from the sides like most running sneakers which is great because I never have to keep moving the middle section to it's proper center position. Just so you all know what I'm talking about below is a red circle on the "middle and side" being connected:

Jumping wise, how are the Cloudswift?

You may be scratching your head wondering what I mean here - I'm talking about Box Jumps and jump rope. Now, these shoes are magical for jumping. Box Jumps? You'd think I had springs attached to my feet, I! can! jump! high! Jump Rope? I don't think I'll every get over the fact that I can do double-unders - bringing the rope twice under you in one go before your feet hit the ground.

So, 10/10 in the jumping department. One thing I love is that the support is so great with the Cloudswift, and I don't feel like I'm touching the literal ground (as was the case with my previous sneakers).

The funny thing is you don't realize the lack of support your sneakers have until you get new ones, I felt like a new runner once I got these because the Nike's I was running with had non-existent support (they had a long life of 400+ miles run in them).

Last Thoughts

I went to a third party seller with my sister when she went to try them on in person, and when I mentioned the heavy-ness of the Cloudswift she recommended the Cloudsurfer - they're better for training and racing, have great support, feel lighter while running.

The Cloud X are the ONES for racing (and for daily wear too!) - they have good support and they're nice and lightweight. The representative I was chatting to in store was letting me know when I asked for her opinion on the best racing shoe. So, once I run 400 miles I'll most likely be upgrading to the Cloudsurfer and (if my wallet won't cry about it) possibly get the Cloud X for racing.

MY VERDICT on Cloudswift: They're extremely comfortable but also a bit on the heavy side rather than lightweight. For that reason, I'd give them 4/5 stars. They really are great, have amazing support (my flat foot is having a happy running life now) but it would have been nice to have the best of both worlds: support + lightweight.

List of Pros and Cons:

Pros
- extremely comfortable
- great support
- Jump-rope/Box-Jumps approved™

Cons
- they feel heavy when you're running in the beginning; as you keep running with them they only "feel heavy" when your form isn't 100%.

p.s. I wasn't paid to write this, I just felt like doing a review on my new running sneakers, they really are my favorite sneakers I've ever run in!

Have you heard of On Running? Will you be giving them a try?

TWITTER | INSTAGRAM | YOUTUBE | PINTEREST | GOODREADS

After following this documentation Deploying a React App* to Github Pages specifically and then having to seek other documentation such as: 8 Steps to publishing your portfolio on GitHub, Create Your Developer Landing Page with GitHub Pages, Deploying  React Applications to Github Pages, How to Deploy React App to Github Pages, Publish Your Web Portfolio For Free with Github Pages - In 5 Minutes and about 20 other tabs of documentation that if I kept open for the duration of the 2 days it took to solve my issue my laptop would be functioning slower than a snail, my portfolio site would not work/show up on Github.

The main issue with all documentation is that, as someone who was a beginner to pushing my react-app onto Github, none of it was catered to me. It assumed I knew everything. And as this 48 hours of 40+ tabs showed me, I have a lot more to learn (which is great!) and that the documentation I needed didn't exist.

I asked on twitter for some help after trying to solve it on my own after spending a handful of hours reading endless documentation that had me looking like I was trying to invent a literal lightbulb. Brian Mock (@wavebeem over on twitter!) happened to come across my tweet asking for help and in the end we managed to get my portfolio up and running and I learned how to edit it on both GitHub Platform and locally. Quite literally, if he hadn't offered to help I would probably still be trying to figure out how to get it to work because the documentation I needed didn't exist.

So, in the event that anyone else finds themselves in the same scenario as I did, here's the documentation of how I got my react-app portfolio onto github and how we got my portfolio to actually appear on the link.

What are we trying to do: Get the portfolio on the landing page - so it looks like this saharafathelbab.github.io and be able to make changes when needed.

Step 1: Create Your Repository on Github

Your repository will be named the same as your exact url. When you create your repository, click Open in Desktop.

Step 2: Open Terminal

You will need to get to where your project is from here as in type in the path to get to your file.

cd = Change Directory

It allows you to get to the directory where your project currently is in - essentially typing the path to get to your project.

So if your create-react-app is in your home directory as was the case with me you would just type:

cd [your react app name here] <- just to note there is a space between cd and your react-app-name

If your react-app is in your documents:

cd documents
cd [your react app name here]

Once you type in your react app name, your command line should read:
[your react app name] your-username-for-your-computer-itself $

At this point I was following Deploying a React App* to Github Pages so as per their documentation, your next step will be to install gh-pages as a dev-dependency of your app:

The command is:

npm install gh-pages --save-dev

You will be writing this right where you are in your terminal so here's what mine looked like following up from the above screenshot of me getting to my folder:

After you do this you may get a few warnings you may not - but you should not be getting any errors at all.

Step 3: Open your react-app in your code editor

Granted, I'm pretty sure you never closed it. You will be going to your package.json file, and be adding a few lines.

In the first { } section you will be adding

"homepage": "http://[your-github-name].github.io/your-repository"  above "name": "your-project-name" which is there.

so format: 

"homepage": "http://[your-github-name].github.io/your-repository",

"name": "your-project-name",

If this is your portfolio, and you named your repository the same as your exact url without any forward slashing it will look like this format:

"homepage": "http://[your-github-name].github.io",

"name": "your-project-name",

here's what mine looked like!

PLEASE REMEMBER AFTER TO PUT A COMMA AFTER YOU WRITE YOUR HOMEPAGE THING, I DIDN'T DO THIS AND WAS STUCK FOR AN HOUR NOT REALIZING I FORGOT TO ADD A COMMA AFTER

You will also need to go into "scripts" section of the package.json and add

"predeploy":"npm run build",

"deploy": "gh-pages -d build"

So it will look like this:

Step 4: You will now create a git repository in your current project folder

The command is:

git init

When I ran that exact command, I was met with an error that looked like this:

I came across a StackOverFlow Post  with this same exact error. The next step you need to do is open a new window of terminal, do not X out the one you have up!! Just open a new window of terminal. On mac, you have to tap the terminal icon in your doc area with two fingers and you'll see something like this come up:

Click New Window.

You will then run the command:

xcode-select --install

this line installs the x-code Command Line tools, you do not need X-Code itself, just the command Line tools to fix the error. After you type in the command, you will get pop up asking for your permission to install the Command Line tools and also see a prompt appear after that pop up in the terminal.

Now, let's go back to our original terminal window with our react-project. Run this command again in terminal:

git init

You should be seeing something similar to this in your command line:

Step 5: You will now add the Github repository (the one you created way back in step 1) as a remote in your local (your literal machine/laptop) git

This allows the gh-pages to know where the app will be pushed onto.

The command you would be typing is:

git remote add origin https://github.com/your-username/your-repository.git

For my scenario, I was adding it to my Github landing page saharafathelbab.github.io  and this is what my command looked like:

Step 6: The built app code gets to be deployed to your github

You will then run the command:

npm run deploy

You will be prompted to put your github username and password in terminal.

If you look at your Github repository you'll notice that a master branch doesn't exist but gh-pages does. The gh-pages is what we just deployed over.

Your Build-App code is similar to your 'public' folder contents in your create-react-app project.

But we actually need our Master branch, so the tutorial doesn't stop here.

Step 7: You will then commit your source code to the master branch and push it onto Github.

As I mentioned before your master branch doesn't even look like it exists on your Github. So we've got to bring it to life.

You will now run the following commands:

git add .
git commit -m " insert message here along the lines of what we're doing, in this instance we are creating a react app"
git push origin master

So let's break down what each of these commands do:
- git add .
 Yes that is a period at the end there. You need that, it's git add SPACE period. This selects all files in your current directory and puts them in the staging area. If it helps, think of it like this scenario:

You have a dozen packages you're delivering to this one house, and when you get to the house, you take the packages out of the truck and add all of them to the patio area i.e. the staging area

- git commit -m "creating my react app"
Keeping up with the story above, you ring the door bell and someone answers the door. They need to sign their name on a device before you can hand them their packages they ordered.

the -m means message and in quotations is the message relating to what you're planning to push onto GitHub.

-git push origin master
The person signs their name and finally you can give them their packages to take in their home.

Now that you have the message of what you're committing, you can push your source code to master branch.

The "message" that you're typing shows up like this on Github:

Step 8: Right now your source code is in the master branch and the gh-pages branch has the built app code. We need to switch that around and rename it so the content of gh-pages is in a branch called master.

master branch -> new branch (you can name it whatever you want! In my case I named it latest!)
gh-pages branch -> master branch

latest branch (our new branch) -> set as the default branch

Here's the full process via Brian Mock's screenshot of if you want to rename branch b1 to branch b2

That's a lot to take in, but we're going to do it one step at a time.

8.1 We need to open a new terminal window

At this point, we no longer need the one with all of our previous work. So you can open a new terminal window.

8.2. In terminal, get to your create-react-app on GitHub

The commands to do that are similar to beginning steps except now we're going to our GitHub folder on our computer.

For me, to get to my repository on my computer the path is Documents -> GitHub -> My Repository name

Converting that into commands:

cd documents
cd Github
cd your-repository-name

these are the exact commands I did - remember: my github repository name is saharafathelbab.github.io

8.3 The first switch we will be doing is master  content -> goes to a new branch name

8.3.1 We need to first checkout out Master branch - kind of like checking out something at the supermarket

The command you type is:

git checkout master

8.3.2 We need to move the master branch to a new name

git branch -m NEW-NAME-OF-BRACH-HERE 

To translate what you're doing in git: You are currently on the master branch, and with the command above, everything from the master branch is being renamed to your new branch you are creating!

I personally named my new branch 'latest'. 

So my command looked like:

git branch -m latest

So, now your local GitHub repository has this newly named branch called latest, but your remote one (Github Platform) needs to catch up.

8.3.3 Now we push the newly created branch onto GitHub Platform

The command you use is

git push -u origin latest

The u is short for --set-upstream.

So now we are pushing our source code to  our newly named branch, latest.

8.3.4 We need to delete the remote branch 'master'.

We do need the branch name master for our next step but we essentially need a clean-slate-master-branch i.e. a new one!

The command you use is:

git push origin :master

This deletes your remote branch Master so it's not chilling around - we already have our new-branch-name with all the info! - and we can then reuse the name master for a branch.

8.3.5 We need to delete the local version of master

Right now the branch name 'master' is still floating around - kind of like you know when you delete a document and it goes to trash but then you have to delete it from the trash? Yeah, so this is like that!

To delete the local version of master, run this command:

git branch -d master

8.4 gh-pages content -> goes to master branch

We need to first checkout out gh-pages branch - so we're back to checking things out of our git supermarket again

The command you type is:

git checkout gh-pages

8.4.1 We need to move the gh-pages branch to a new branch name master

The command is:

git branch -m master

So,  as with the other branch, now your local GitHub repository has this newly named master branch, but your remote one (Github Platform) needs to catch up.

8.4.2 Now we push the newly created master branch onto GitHub Platform

The command you use is:

git push -u origin master

Unlike last time where we deleted both remote and local version of our old master branch, we DO NOT NEED to delete gh-pages. 

8.5 New branch name -> Set as the default branch 

Now let's go to our GitHub platform!

Go to your repository and click Settings:

Once we're in Settings, on the sidebar click Branches:

When we're on branches we will then click the little down arrow toggle and select our new-branch-name (not master, the first one you did!) As I mentioned above, I named my new-branch latest:

And TADA - Your Portfolio/Project is now LIVE!

I would also like to mention again that I really wouldn't have figured out how to get my portfolio up and running if it wasn't for Brian Mock (@wavebeem over on twitter!) so if you're in need of an Engineer to follow on there, head over and give him a follow!

He also helped me figure out how to edit my react app as well, so I'll be writing that documentation to go up next week if you're also lost on that like I was!

I've never really written tech documentation per se, so I hope I explained everything properly and with that I'll see you in the next part of the documentation!

TWITTER | INSTAGRAM | YOUTUBE | PINTEREST | GOODREADS

Races are all fun and games until you're at the last mile wondering why you've picked running as your sport. Okay, jokes aside, it's been a while since I've been at a starting line, and this past weekend I was off in a 5K USATF race. Usually the days before a race I'm pretty nervous and get worried over what my time will be but this time was a little bit different. The day before, I was in one word chill. Based on my speed workouts and pacing in my long runs a 7'21 per mile was all but secured™.  The day of on the other hand at 7AM my legs were shaking because ohmgod it's race day and can I really get a 21 min 5K? My all time PR is actually a 21 minute 5K, I just haven't raced that time in a while!

What did I eat the day before the race

I usually carb load with some sort of pasta but this time around I opted for a steak and that was about it. I know, fellow racers may be reading this like excuse me what are you doing not eating pasta or some other carb loading food, but I decided to go with a different outlook just to see how it'd effect my energy while running. I really am my own trial and error test person, technically speaking.

What did I eat | drink the morning of the race

My usual breakfast tends to be a toss up between oatmeal or sunny side up eggs. Oatmeal personally feels a bit heavy in my stomach as I run. So my go to race-day breakfast that's light but also a little bit filling was sunny side up eggs. A couple of weeks ago, I met up with a run club and this one woman said that before a race definitely drink 16oz of water and that's it, you're good to go. So, I decided to give this a try.

If you have been here long enough, you'll probably remember me once drinking 3 massive cups of water and my bladder alerting me of its existence while I was on my way driving to the race location. Trying to learn from the past, I filled one massive cup of water and only drank that. But here's the funny part. I don't know if it's just race nerves but before I left the house I practically went to the bathroom a handful of times and when I got to the race location I also went to the bathroom - and funnily enough I overheard a few girls saying that this was practically their 10th time to the bathroom so I'm assuming race nerves bathroom dashes is a thing?

gotta love my nike hijab slipping to cover my forehead! always have to push it back!

How was the race mile by mile

Before I get into this I wanted to mention that I did my 20 minute stretch routine and jogged a bit when I got there which was different for me. Usually I do my 20 minute stretch at home and don't jog but from my speed workouts I've learned a good 5 minute warm up jog is definitely needed. Okay, now let's get to the race. I have raced this course before, so I knew that it wasn't hilly and generally a flat course if we don't count this one hill sprinkled in between. 

Mile 1: There were people at the front holding signs on the pace you were planning to go for you to get into position. There wasn't a pacer which I was sort of disappointed in as in someways following someone can be easier to keep pace. It was fun and speedy clocking in at 7'36 - although not on target of my 7'21 pace I was pretty happy with how I was going. 

Mile 2: During this second mile my armband for my phone that uses velcro to wrap around my arm securely kept becoming undone, so it was a little bit frustrating. I use my phone to track my pace and for my phone to tell me my pace from time to time. By Mile 1.5 this is where the hill made it's appearance. I came and I conquered. I clocked in at 8'03. I was slipping from my 7 target and I was aware I needed to pick things up for Mile 3.

Mile 3: Now, the goal was to push and accelerate ahead at a high speed. That was the theory but did that happen? Sort of. This is where the flat course wasn't so flat. There were mini inclines so not a full hill but more or less a zig zag. One thing I am working on is running inclines in my runs rather than just on Hill Sprint days. This slowed my pace to 8'27.

Last 0.2: Okay so my phone was telling me congratulations your time is 24:XX but the race itself wasn't over. So by the time I actually completed it, I clocked in this last 0.2 at 7'54.

What was my ending time

I ended with a time of 25:44. I secured 2nd place in my age group and won a gift certificate! This was the first time I ever won a gift certificate so this was actually so surprising I was actually in shock.When I first crossed the finish line I was on the verge of tears - this was not the time I wanted. It took me a second to remind myself that crossing the finish line is an accomplishment even if inner me begs to differ.

I try not to get hung up on my time but it's hard not to be at times and I don't want to be a debbie downer that's never satisfied but I think with sport, we always know we can be/do better. I am getting better at appreciating my journey in running as much as I will appreciate getting my sub 20 5K when the time comes; it's a journey on being kind to myself no matter the outcome of any race or run or workout I do. 

right so I'm not sure why it looks like I have highlighter on but just to confirm the only highlighter here is the sun and my sweaty face - also one piece of hair was poking its way out hence the lil grey line drawn!!

What I Learned

My speed workouts where they called for different paces - Mile, 5K and 10K -  as well as my tempo workouts all had my 5K pace at 7'21 - they were all done on a track. And here's where I recognized my error. The track is flat and there are no inclines so it's almost as if training for a utopia of a road race. Although the track itself is great for 400M/800M repeats, I do think moving longer track workouts to the road to be more prepared on inclines and different paths is the right way forward even if it does mean the existence of stop lights will unbless my speed life. 

One thing I am also looking forward to adding in my schedule are long runs  +  tempo runs that include running on hills and inclines. For the most part, my running route has a few inclines and I save hill sprints for their own day. Now, I'm going to try to find a route that has a few hills sprinkled in.

There's also something else I learned in terms of 'mental strength in running'.  So, as I was racing in Mile 2, there was a boy with his dad running - we just finished coming up the hill and we had a few inclines lined up ahead. The boy, frustrated with himself, stopped and ripped his bib off because he felt he wasn't doing the best he could. The father helped calm him down to complete the race but it did make me think of how much pressure we put on ourselves to the point where the sport we love becomes a sport we hate to think of.

If anything, this reminded me that at the end of the day regardless of when you finish a race, the time aside each day to reach your fitness/or other related goals is an accomplishment because not everyone sticks to something and makes a habit of it, but you did. It's important to remember where you started, not just where you are right now. See the whole picture, not just the chapter you're on.

I have my eye on a USATF Championship Race in the 8K distance and though I've never raced the distance before, I look forward to conquering it. And conquering it doesn't have to mean a 30 min 8K, rather just getting to the finish line and learning more about myself as a runner is enough for the race to be conquered™.

Have you been racing lately or working towards making a dream a reality? What's one thing you're making a habit of right now?

TWITTER | INSTAGRAM | YOUTUBE | PINTEREST | GOODREADS