Shaking Up The Christmas Greetings With A-Frame...

Christa Bridges — Sat, 25 Dec 2021 13:52:51 +0000

Let me try to sell an idea here. The price? Absolutely free. Well, besides perhaps some learning, which can be free, and comes with the guarantee of lots of fun... I promise!

So, this idea...

You know how every year, people are writing Christmas cards, you may be receiving some as well...

Wouldn't it be cool to gift someone some novelty as well as the Christmas greeting?

What I'm suggesting here can be described in 3 words:

"Christmas VR Scene"

So, why am I suggesting this idea?

Well, last year, I made a VR scene as part of a Christmas arts and crafts competition, and it's not like there was a rule against making anything digital, so 🤷‍♀️

It was a lot of fun, especially when I won and bought myself a clipboard from Etsy (the last one got a bit worn from the ctrl+C and ctrl+Ving) 😎

Not only was making the VR scene fun, but I got to practice my A-Frame skills!

If you've not heard of A-Frame before, it's essentially an open source framework that you can use to make VR scenes in the browser, meaning you can still enjoy these VR scenes even if you don't have a VR headset!

All you have to do is import it just like you would any other library or framework (such as via CDN or npm), and then you can use the elements that A-Frame has inside a HTML file to make your own VR scene!

Using my skills makes me happy, and I'm even happier when what I make makes other people happy!

On that note, I'd love to show you the Christmas VR scene I've made for this year!

I recently completed the A-Frame course on Codecademy, and one of the projects on this course was a solar system...

So I decided to Christmasify it a bit 😉!

Anyhoo, I hope you enjoy! If you would like to have more of a gander at the code, feel free to check out its repository! You are most welcome to use this or last year's VR scene yourself if you wish!

If you do, do let me know, make a developer's day 😄!

I also hope to make a new VR scene every year, so keep watching this space! I'll try to get better and better each year!

Finally, if you've made it alllll the way down to the bottom of this post, then I thank you ❤️!

I wish you all a very Merry Christmas and a prosperous New Year 😁!

Christa’s Beginners’ Guide to Using Git for Your Projects

Christa Bridges — Mon, 05 Apr 2021 14:27:09 +0000

Introduction

If you’re pretty new to programming, you may be used to saving all your code on your local device and that’s it if you’re doing a project on your own. Have you ever faced any problems with this though? Have you coded something which you changed your mind about and had to do a fair bit of undoing? Or have you worked on a project with someone else and you had to exchange files via emails or USB sticks? What challenges did you have with that, were you able to work on the same file at the same time on your own computers, and how did you handle combining your work together?

You may have heard of Git, and this was one of the first things I learnt about on my degree apprenticeship. I use it nearly every day to help me to collaborate with others easily on projects and keep track of the changes we have made! I strongly recommend looking into Git if you're hoping to get into the software engineering industry, because it's likely you'll be using this a lot! Even though there are quite a few guides out there about Git, I fancied writing one of my own to explain it in my own way!

Have These Things Ready!

A computer.
Git installed (https://git-scm.com/download/win).
A GitHub account.

Key Terms

Repository – where your work will be kept. This could contain files and folders.
Local repository – where your work is kept on your local computer.
Remote repository – where your work is kept online, using sites such as GitHub.
Private repository – a repository which only you and anyone you add as a contributor can see and use.
Public repository – a repository which anyone can see, put a star on, add an issue, create a pull request, or fork.
Fork – taking a copy of someone else’s repository and having a version on your own account. Forking isn’t deeply covered in this article because this is more so focusing on using Git for your own projects.
Cloning – getting a copy of a remote repository onto your local computer.

Walkthrough

I could simply tell you the commands and expect you to just use them, but I would much prefer to show you an example!

Here's a visual summary of the process of using Git in a project before we get started!

1. Setting up the Remote Repository

Your code will be kept in two places – a repository on your local computer and a repository online. In terms of where your online repository will be located, the one I will be demonstrating will be on GitHub, but there are alternatives such as Azure DevOps and Bitbucket, and most of what I will demonstrate can be applied to them too! You will need to set these repositories up!

If this is a new project, you will need to create a new repository. If this is a project you already have on your profile, then you can skip this step.

There are a few ways you can create a remote repository via GitHub’s interface, but in this example, I went to my profile, went to the repositories tab, and clicked on the “new” button.

I then filled in the form that came up with the necessary details and created a public repository.

2. Connecting the Remote and Local Repository

In the repository, you should see a bright green button that says “Code”.

When you press it, you should see this menu:

There are clearly a few ways you can clone the repository onto your computer, but to get you started I’ll show you HTTPS, so you can copy the contents of the box (the URL). I’ll leave some other sources of information at the bottom of the article if you wish to investigate SSH, GitHub CLI, GitHub Desktop, or Visual Studio.

Method 1: git clone

Open the Git Bash terminal and use cd to get to your desired location (e.g., cd Documents, cd “New Folder”) or go to the location via the file explorer, right click and select “Git Bash here”. Then type git clone <repository's URL> and press enter.

Method 2: Initialising and Adding the Remote

Alternatively…

Type git init and press enter (this is essentially saying that you want to set up Git there, and it's where you'll keep the local version of the project). You should see a “master” or “main” next to your file path.

You now need to connect your local repository to the remote one. Type git remote add origin and then paste the URL you copied from GitHub and press enter.

When you do git remote -v, you should see the remote repository. If you wanted to remove the remote repository connection from your local, you can do git remote remove origin.

If there are already files on the remote repository, you will need to do git pull origin <branch-name> to get them.

3. Getting Into The Folder

Now you've got the local and remote repositories connected together, navigate to the folder which is connected to the remote repository, and you could do this via the file explorer and right-clicking on the folder or inside it, as shown below.

Alternatively, you can navigate to the folder via your terminal (e.g. Git Bash) using cd <directory name>, and then you can see the contents of the directory by typing in ls, as shown below.

4. Creating Branches

Next to the file path, you should be able to see "(master)" or "(main)". This is a branch, an independent version of the project. Specifically, the master or main branch is the one that would be delivered to the end-users.

Now, if you were making a feature, you wouldn't want to put the changes you were making straight here, would you? If the product was live, they would get unfinished features while you're working on it, you only want to deliver the new feature when it is complete! That is why we create other branches, which are independent from each other.

In the case of our walkthrough, I want to make a HTML page. I don't want it to go straight onto the master branch, so I'll be creating a new branch so I can work on it without impacting the master and it'll allow me to get feedback before I merge it later on.

To create a new branch, you can use the commands:

git branch <branch-name> to create it

then

git checkout <branch-name> to go onto it

In this case, I’ll be creating a branch called first-html-page.

NOTE: want to create a branch and go onto it in one command? You can by typing git checkout -b <branch-name>!

5. Create and Change Files

We can now get down to business with the changes we want to make that will eventually go to master/main! All I’m going to do here is just create a .html file, but you can make whatever type of file you want. You can make files by going into any application that allows you to create files and save them into the local repository. You can also use the “touch” command to create files, and then edit them after.

6. Staging

In this, you’re effectively saying “I want to record the fact that I changed this/these file(s)”. Imagine you’re putting the files into a box. If you want to stage everything in the local repository, you can do git add *.

To say, “I want to record the fact that I created index.html”, I’m going to type git add index.html into the terminal.

To check what you have staged, you can type git status into the terminal.

7. Committing Changes

I think of this as like putting a label on the box because you’re essentially saying what changes you have made. Remember the fact that you and other people could be reading these later, so make sure you are clear in how you communicate the changes you made. I like starting the message with the branch name that I’m on and giving a summary of the changes I’ve made. If necessary, I may also put why I made those changes. To effectively put a label on the changes we’ve made, I’m going to use the git commit command as shown:

Before I move onto the next step, I could make some more changes and carry out stages 5, 6 and 7 again for each change. You don’t have to make commits for every character you change though! I tend to make commits for each chunk of work I’ve done if I can and before I finish coding before doing something else.

Experiment: so you've made some changes on this branch, go back onto the master or main branch by typing in git checkout master or git checkout main depending on what it's called for you, then create a new branch. Do you see this work you did on the other branch there? If you've done this correctly, you'll find these changes are not there because they are not in master/main, so the new branch you've created aren't able to inherit them.

8. Pushing

This is where a copy of the work you have staged and committed is saved onto the remote repository – the changes you make on your computer are not automatically sent to the remote repository, hence why you must send it!

When your work has been saved onto a branch on the remote repository, you can then create a pull request so you (and contributors, if you have any) can review the code and approve the changes being merged into another branch!

When you’re ready for your changes to go onto GitHub, just do the git push origin <branch-name> command!

9. Creating a Pull Request

Go to the repository on GitHub. You should see a button that says, “Compare and pull request”. Click on it!

Input a description into the pull request to let others know of the changes you have made. This description could include why changes have been made as well as what, the technologies that have been used, and screenshots of any changes to UI if applicable. Hit "Create Pull Request" when you are done!

When the pull request has been created, you can require reviewers, add assignees, labels, projects, milestones, and linked issues. When everyone who is part of the project is happy and approved (bear in mind you may have to respond to feedback), you can then merge the pull request into the specified branch, which in our case is master!

10. Voilà!

When you press “Merge pull request”, a confirm merge button should be displayed, and it should say the pull request has been successfully merged and closed.

When you look at the code tab and select the master branch, you should see the changes you made there! In our case, index.html is now present in master!

Useful Resources
SSH Keys:

https://docs.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

https://docs.microsoft.com/en-us/azure/devops/repos/git/use-ssh-keys-to-authenticate?view=azure-devops

Manual for GitHub CLI:

https://cli.github.com/manual/

https://www.digitalocean.com/community/tutorials/workflow-github-cli

GitHub Desktop:

https://docs.github.com/en/desktop

GitHub and Visual Studio:

https://visualstudio.github.com/

Open Source Contributing:

https://www.digitalocean.com/community/tech_talks/tips-for-contributing-to-open-source-with-github

Conclusion

I hope you enjoyed reading and using this article to allow you to use Git for your projects, how it works, and why it can be beneficial to use! If you have any questions, feel free to leave a comment and/or connect on LinkedIn (https://www.linkedin.com/in/christa-bridges/) or on the DEV Community. Feel free to check out the my projects on GitHub also (https://github.com/cBridges851), and I'm open to suggestions for future articles! Take care 😊

DEV Community: Christa Bridges