arrow Go Home, friend!

Development &
Version Control

"You explore front-end development languages, you write code and document in a version control environment."

Description:

For the development project, I oversaw coding the homepage of BELCO Education. As I have worked in a team for this project, I utilized a separate CSS and JS file to avoid merge conflicts, as well as a shared CSS for elements that would be shared across all pages, where I also added my code for the header and footer of the website.
This project was coordinated through GitLab, where I could show my progress with helpful commit messaging, and test my group member’s code from their commits.

Feelings:

I was pleasantly surprised with how smoothly everything went this project. This was due to good communication throughout my team, clear task division, and each member taking their roles seriously that led to a successful product in the end.

Evaluation:

The task division being fair and manageable carried this project. Even when working on assets that I have never attempted building anything similar to (a marquee and slideshow for example), I never felt overwhelmed or overworked in this group, as I felt I was getting an equitable share of work, with a member that was not as proficient in coding as me, getting an easier page to complete, and another member that slightly surpasses my level having the time to complete two pages of varying difficulty.
In the end, I never had to deal with a merge conflict, however, as we were all working on main, my group received feedback at the end of this project that this was not good practice, and that going forward, each member working on a separate branch, before only merging stable code to main would-be better practice.

Reflection:

I am impressed by mine and my group’s efforts to divide tasks well enough, to not once experience a merge conflict. I now understand however, why branching would have been better practice, as, as it stands, a lot of commented out code is currently in the main branch, and it would have been better to clean up the code for the deployment of the project.

Link to BELCO GitLab
Link to BELCO Website
screenshot of frontpage of belco

Action Plan/Feedforward:

I would like to keep up the good project planning and communication that I had in this team, for all my future projects. Of course, upon the feedback from teachers, I also now understand the importance of using branches, especially in a collaborative project, and will be avoiding working on the main branch as much as possible unless to merge finished assets onto main for deployment.

Next Learning Outcome

Description:

When I code, I try to do my due diligence of making it as understandable as possible. The way I do this, besides having consistent naming conventions and a consistent layout, is to comment my code as best as often and descriptive as I can. This beneficial for anyone reading my code, be it assessors or collaborators, but also for myself.

Feelings:

Especially with the example above, where I am writing the JavaScript for a slideshow, these comments, while meant for others to read, was also useful for myself. I will admit that I am not familiarized with JavaScript as much as I am with HTML or CSS, so here, nearly every line of code is commented, for me to be able to remember exactly what each line does. These comments were written as I was actively learning how to write these

Evaluation:

Some of my code is not nearly as commented on as the example above. I believe this is fine, as the rest is indeed still commented upon, just not to this extent, as step-by-step commenting is not as necessary for these. The level of commenting on my JavaScript, is indeed mostly for my own benefit at this moment. Without the commenting on my JavaScript, I doubt I would be able to explain how it comes together to work in the end, and with the comments, I believe I could build similar elements elsewhere with far less hiccups.

Reflection:

As I continue expanding my JavaScript skills, my comments may look closer to the comments on my CSS and HTML; fewer in quantity but retaining their quality for aiding the readability and transferability.

Screenshot of heavily commented js

Action Plan/Feedforward:

I will continue to write thoughtful commit messages and use them as a means of explaining my work in my own words, so that it is easy for me to pick back up a project, or for other potential collaborators/assessors to do the same. I would like to condense my JavaScript comments to something more concise as I improve my skills.

Next Learning Outcome

Description:

For the BELCO Development project, the page I needed to code included a slideshow. To create this, and function how it needed to, I needed to utilise JavaScript. This was a learning experience for me, as it was my first real attempt at exploring and utilising JavaScript in a project.

Feelings:

Throughout much of the time I spent working on this feature, I found myself in deep confusion. It was only after working on this feature for roughly 2 hours, thoroughly commenting each line, scouring tutorials/forums, and finally utilising AI after exhausting those options, that I can finally say that I built and documented this feature for the BELCO project.

Evaluation:

I tried finding tutorials or blogs that would help me with the exact effect I wanted, but to no avail. I instead, turned to a W3Schools tutorial on creating a basic slideshow, and did my best to replicate this tutorial. As far as I saw, I did not see an explanation on how this code worked however, so I used ChatGPT to give a line-by-line explanation of each of the lines of code for the tutorial, so that I knew what I was building. This helped me to realize that to have a looping slideshow I would need to duplicate slides to have a clean rotation effect, and event listeners so that the JS could recognize when the slideshow needed looping. This got me started; however, the slideshow still did not look as intended. Thus, leading me to go back and forth from StackOverflow, W3Schools, and ChatGPT to troubleshoot errors, and help me create my vision, without sacrificing my control over the code.

Reflection:

I do my absolute best to avoid the use of ChatGPT when writing code. I place great importance on my integrity, and making sure my work is human made, even if it ends up being harder to build, is necessary for me to learn and retain that information. That being said, it is a tool, and if I cannot find other means of learning what I am trying to create, AI is a platform for me to use, so long as I keep my intentions and prompts clear that I am utilizing it for learning and not taking over my work. For this project, it helped to break down the code for me, line by line, with simple explanation for every piece, for me to understand the logic of what I was creating.

screenshots of help I recieved from chatgpt

Action Plan/Feedforward:

As I deepen my knowledge with JavaScript, I wish to not utilize AI as much as I did for this project. I will continue to utilize it as a mentor if I struggle to find human-made advice, as I did for this section. As stated in the reflection before, I will keep my code properly commented and documented, so that I can also use my own work to help me understand handling different tasks that may make use of similar code. My goal is to reach a point where I rarely need to utilize outside sources to build the programs I need.

Next Learning Outcome

Description:

In this document, I detail issues I come across during coding, and the fixes I found to these issues. I of course, also link the sources from where the results come from. This serves as a form of documenting, as well as a point of reference, in case I cannot remember something that I found the answer to previously. I incorporate this into my workflow by immediately writing down the issue, and the source that helped me, the moment I find the working solution, to make sure I do not forget to do so.

Feelings:

This document, I have found, has been incredibly helpful for me. While simply looking up an answer to a question is useful, rewriting the answer in my own words, helps to make the knowledge gained stick.

Evaluation:

Creating this document has served as a catalogue of reference points for various information on problems I have had in the past. In terms of documenting, it allows me to go back and see what done things that I had issues on and lets me see how I have improved over the semester. It also allows me to quickly find an answer to an issue that might arise repeatedly, or a question I’ve already have, if I am returning to a project after a hiatus.
The format of this document is simply a list, so there is room to improve with the organization of this document. I am considering migrating the list into another tool, or simply doing a better job at labelling and categorizing sections.

Reflection:

I wish I had started this document sooner, to get an even better reference of where I was at the beginning of the semester. That being said, I think I started this early enough in my coding journey, to have hit most of the important issues that I have faced over the semester.

screenshot of the coding issues document \

Action Plan/Feedforward:

Going forward, I will continue utilizing a document such as this, both to track my progress, keep reference, and site my sources. In future semesters I will likely separate this into a new document to have a fresh slate, to prevent this from becoming too long and convoluted, as the goal at the end of the day is for usability. Though I will keep all former documents as an archive that still hold valuable information.

Next Learning Outcome

Description:

I have utilized a GitLab repository to host my files for my portfolio, dividing the work into commits and larger features into branches. This was used for backing up my work, as well as keeping track of the progress of my code.

Feelings:

In the beginning, I found it somewhat of a nuisance creating a GitLab for a project only I would be working on, as I understood it only to be a tool for collaboration. However, now that I’ve been using GitLab for my own work, it makes me feel a bit more secure about the safety of my work, that I will not lose code. Especially when I work from home, and I have had close calls with my cats trampling my keyboard.

Evaluation:

My commits should be more frequent, so that their messages can represent fully what was done, without missing any pieces. At the moment, what is missing the most is a personal README at this stage for project startup.
My branches have helped me to keep organization in my mind and ensures that I could look back to previous versions if I reached an impasse. For example, inserting the drawing on the main page, that uses absolute positioning, and I was unsure at the time to position this properly, so I created a new branch for testing this feature.

Reflection:

While I believe my commit messages are helpful, I know they could be better if I were to commit more regularly. This is a habit I have gotten better at, since working collaboratively for the BELCO project, where frequent commits were of an even higher necessity. So, as I spend my time continuing and finalising my portfolio, these regular and consistent commit messages will be of higher quality.

Screenshot of my git tree

Action Plan/Feedforward:

For completing my portfolio, as well as other coding projects, I need to remind myself to get into the habit of committing my code more often, which, with more experience under my belt, I don’t believe will be as big of an issue as before. A README will also help make my code even easier to understand and let it be transferrable, so this will also be included before the final assessment.

Next Learning Outcome

Description:

During most of the semester, I had displayed these reflections within PDF documents, that I simply just inserted into my learning outcome pages without any intuitive way to display my reflections. This made my work incredibly difficult for assessors (and even myself) to navigate. To remedy this, I decided to separate my work in a way that the reflections relating to one learning outcome were in the same page, also with a side bar to navigate through each reflection, without having a ridiculously long page to scroll through.

Feelings:

To create this effect, I knew since the beginning of the semester that I needed to utilize JavaScript, something I have a lot of self-doubt in my capabilities. Due to this, I left this issue to be fixed close to the end of the semester, instead focusing my attention on projects and documentation instead. This led me to stress when I finally began to tackle my Learning Outcome pages, as I worried that I had left this too close to the end, and that it would prove to be too difficult. Luckily for me, it only took me a few hours to style the page and set up the JavaScript, which was far less than I anticipated, which led me with a shockingly digestible amount of JavaScript that I feel I learned a lot from. felt both proud that I managed to make my page finally look close to the original design I had in mind, as well as frustrated in myself for putting this task off for as long as I had.

Evaluation:

The way my learning outcomes are organized now, matches the visual design I had intended to portray. The design also allows me to intuitively display my learning outcomes in a way where all the topics can easily be selected and read through quickly. If I had more time, or more like, if I had started sooner, I would try to add some transition effects to make the design more dynamic, but at this point, when focusing on basic functionality was the main goal, this became unrealistic to achieve due to time constraints and conflicting priorities.

Reflection:

Of course, I wish I started sooner, so that I could have expanded on my ideas a bit more, and trust my ability to learn new skills. I only started this after the third reflection, leaving not much time at all to finish all that I needed to do.

Sketch vs final model

Action Plan/Feedforward:

Going forward, as I have written about extensively in other reflections, starting sooner on my work, and especially on work that intimidates me, is a priority for me to learn for my development as a professional, and simply as an independent as well.

Next Learning Outcome