IST 402 week 1 blog post

Important note: I use a Windows 10 computer, and as a result, the below instructions are designed and tailored for Windows 10, and may not work on any other operating system.

Also, the website and YouTube video below provided by Professor Ollendyke also really helped, and as a result there is definitely some overlap in this current article with these resources:

https://github.com/elmsln/edtechjoker/tree/master/sp-22/week-1

https://www.youtube.com/watch?v=r_mio0e6v1g

First, install NodeJS. Go to nodejs.org, and install the LTS version. Follow the instructions of the pop-up. Npm, something else that you need, should come by default with NodeJS. It may also be advantageous to install Yarn, however, many in the class had issues installing this, so it isn’t necessary, and I personally do not have it installed. Next, install Git Bash if it is not already on your computer, by going to gitforwindows.org.

Afterwards, optionally, you can install Oh My Zsh, which is definitely helpful for this class, but also difficult to install for Windows users. The process for windows users is much more complicated than for Linux or Mac users, and I attempted to install it following this website (https://dev.to/vsalbuq/how-to-install-oh-my-zsh-on-windows-10-home-edition-49g2). I gave up partway through, around step 6 on the page I linked.

To recap, here is a list of everything that needs to be installed:

NodeJS; go to nodejs.org, install LTS version

npm; although this comes with NodeJS so it kind of doesn’t count

Yarn; this is optional

Git Bash; gitforwindows.org

Oh My Zsh; this is optional, https://dev.to/vsalbuq/how-to-install-oh-my-zsh-on-windows-10-home-edition-49g2

From here, create a GitHub account if you don’t have one already, and create a repository. From there, create a secure connection between your computer and GitHub. To do this, follow the instructions here: https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent. A few things to note from my experience. First, make sure that the selector bar at the top that toggles between Windows/Mac/Linux is properly set to “Windows”; during my experience, mine glitched out and displayed the instructions for both Windows/Mac or Windows/Linux simultaneously on the same page in some weird, smashed together format. Also, make sure you are on Git Bash and not the vanilla terminal/command prompt; otherwise at least one of the steps will not work; I think it’s the step where you type in “ $ eval "$(ssh-agent -s)" ” under “Generate New SSH Key”.

After creating this secure connection, return to the standard terminal/command prompt for the remaining steps. You might be able to do this in Git Bash, but I used command prompt and it worked out for me. From here, run the command “git clone [e-mail]:YOURUSERNAME/YOURREPO.git”, followed by “cd YOURREPO” and then “npm init @open-wc”.

From here, follow the prompts on the screen, with the following selections:

1. Select “Scaffold a new Project”
2. When asked what to scaffold, select “Web Component”
3. When asked what to add, select all three options
4. When asked about typescript, select “No”
5. I named my web component “hello-world”.
6. When asked about writing the file structure to disk, select “yes”
7. Select “yes with Yarn” if you have installed Yarn, and “yes with NPM” if you have not installed Yarn
8. Type in “cd (name of web component)” and “npm run start”. If you have yarn installed, you can type in “yarn start” in place of “npm run start”

From here, I admit I get a little uncertain, I tried following the video listed above to the best of my ability, but these next few steps might be a little fuzzy.

1. You might need to press ctrl+c to stop the program, but I’m not completely sure on this one.
2. Type in “cd ..” to return from just the web component back to the entire repository
3. Enter in “git status” to check your status, then “git add –A”, then “git commit –m “starting point” ”
4. Finally, enter in “git push origin main”

Here are some miscellaneous sources that helped me along the way, and helped me understand some of the above better:

https://www.computerhope.com/mdhlp.htm

https://www.geeksforgeeks.org/cd-cmd-command/

https://www.datacamp.com/community/tutorials/git-push-pull

https://askubuntu.com/questions/704600/why-does-c-v-etc-appear-in-the-terminal-when-i-use-the-ctrlcharacter-keyboa

https://stackoverflow.com/questions/58246025/what-does-cd-mean-in-powershell

https://genrocket.freshdesk.com/support/solutions/articles/19000087308-terminate-batch-job-y-n-

https://tech.forums.softwareag.com/t/terminate-batch-job-y-n-means/174765

https://stackoverflow.com/questions/5834014/lf-will-be-replaced-by-crlf-in-git-what-is-that-and-is-it-important

https://devconnected.com/how-to-git-add-all-files/#:~:text=The%20easiest%20way%20to%20add,%E2%80%9D%20option%20for%20%E2%80%9Call%E2%80%9D.&text=In%20this%20case%2C%20the%20new,to%20your%20Git%20staging%20area.

https://stackoverflow.com/questions/8283915/git-author-unknown

After these steps, go to GitHub, and check the repository that you used. The code for this basic program should be in your GitHub. This is my repository (what I got after completing the entire above process), yours should be similar if not the same. I should also clarify that I have added comments as to what I feel the blocks of code mean:

https://github.com/ericliu171/IST402-lab0

https://github.com/ericliu171/IST402-lab0/blob/main/hello-world/src/HelloWorld.js