DEV Community: CDPhu

Update

CDPhu — Thu, 29 Feb 2024 19:05:55 +0000

Hey there, haven't been on here a while, but I just wanted to update you all on what's been happening. I've graduated from college a while back and am job searching.

But in the time that I have not been sitting idly, because I have been working on certifications from IBM as well as Oracle. So far its been a slow process but I will update again, hopefully sooner rather than later.

But here you can find my badges so far. Thanks for reading.

Release 0.4 - Finale

CDPhu — Sat, 10 Dec 2022 20:03:36 +0000

We have reached the finishing point of the semester as well as Release 0.4.

I managed to finish the implementations themselves, it took a bit of time finishing the react but it was well worth the time.

For the Continuous integration, I managed to get the CI to run properly and also run the authors version of lint. I should have expected it to fail because there were several issues when running lint locally but it was the difference between. CRLF and LF, which is only the difference in line feed in different operating systems. So I assumed GitHub would ignore that and it did. though the Authors code did have some issues that I did not find. So I can safely say that I managed to integrate ESLint in the continuous integration properly.

For the timer I managed to finish the class for it to countdown till it reached zero. The timer has a constructor that would store the time and in the tick function it would do the math for the countdown. Then there would be a function to start the countdown and it would set the countdown as it kept ticking. Finally the render would be sent within contained between <span></span>. The index file would take the class and set the amount of seconds and send it to the main app.

But as the author requested, instead of making a class, it would be better if I could export it as a function. So I decided to revamp my code as a whole, and changed it to a much more simple function, instead of setting it up similar to the class before with multiple functions, it is one function that does everything.

NOTE: I am now a collaborator for this repository.

As for why they are not merged yet, I am still awaiting a review from both Repositories. For scrambled, I basically have evrything done as per the authors request, and changing it to a function. As for github-writter I have not heard from them.

Release 0.4 - Progress

CDPhu — Fri, 02 Dec 2022 01:51:17 +0000

So far, I have made some progress on both the newer repositories.

For github-writer I figured out the basis of how to run the commands during the workflow. Currently I'm sure that it relies on Node version 16, I have tried running the integration with different versions but they will fail. Not only that but the versions of the CDK editor are also very specific.

So now that I know that, It HAS to stay the same, so there isn't much I can modify within the package.json . Even upgrading it to a more recent version would break the continuous integration workflow.

What I'm going to focus on next is trying to properly run lint within this workflow. From my previous implementation of lint was not correct, so I will have to somehow find a way to properly run the command in order to get the correct result. I would also have to figure out

As for scrambled So far, I have the layout of how it should be displayed somewhat finished. I even included it within the App.js file so I could test it locally to see that it does convert it to minutes and seconds from a parent.

For now it does take from a parent and display it, so from now I will be focusing on creating a tick that would set it as a countdown. The hard part would be trying to set up the speed at which it would tick down, and set it to stop at 00:00.

That is what I will be focusing on up until the finished product.

NOTE: The wedding repository has been either privated or removed from githu

Release 0.4 - Planning Rework

CDPhu — Wed, 30 Nov 2022 23:36:33 +0000

Due to some unexpected circumstances that in my previous post for Release 0.4, the author of the repository no longer wanted the test dummy gallery.

It was quite unfortunate because, when he said this, I had just finished the react component of the code and all it needed was a review from him. But I didn't commit on time and I saw that he had closed the issue stating that it was no longer needed. So I just have one semi-finished product without the review.

So I opted for a different repo, or rather, two in particular:

One was to create Continuous Integration for a repository called github-writer.

This one is what we have done in a previous lab, but instead of relying on node and npm, this time it also relies on the use of yarn. So somehow I would have to integrate yarn instead of npm like in my previous lab to create this integration.

The second one is to create a timer that would take set amount of seconds from a parent state and displays those seconds as minutes and seconds. It will then start counting down to zero in the repository called scrambled. (It is a relatively new project)

Scrambled is based of the use of react and since I previously tried to do something in react but couldn't (rather they canceled on me). So this would be another chance for me to give it another go at using React. I'd have to somehow figure out how to get the system to take a parent amount and then figure out how to convert the numbers into minutes and seconds. After that somehow set a loop for it to countdown until it reaches and stops at zero.

Release 0.4 - Week 1

CDPhu — Sun, 27 Nov 2022 00:28:43 +0000

For this release, I plan to work on a repository called wedding. The objective itself was to create a test gallery that would fit with the authors objective.

The thing is when the author first created the issue there was not that many details about how he wanted. So I just went off and created a test gallery that I thought he would like.

That was before, he told me what kind of requirements he would like. After finding out his requirements, I had to change up my approach completely, which is honestly a blessing in disguise.

I have not worked much with react, only during school so that means working on this would allow me to hone my skills in react, which I have not done much of compared to others. I haven't even used react for a long while, so I need to relearn how the system works. I have to follow what the author already laid for me and build from there.

This is new because as of now, I am building a part of a web app without using html files whatsoever.

I'm hoping to be able to relearn how react works and build properly what the author is asking.

Software Release Via NPM

CDPhu — Sat, 26 Nov 2022 00:31:03 +0000

For this lab, I have chosen to release my tool via the use of NPM.

Preparation before publishing

Create a package.json file if you don't have in the root directory.
Use this npm init to create the new package.json file.

A package.json file:

Lists the packages your project depends on
Specifies versions of a package that your project can use using semantic versioning rules
Makes your build reproducible, and therefore easier to share with other developers
Make sure to add the name, version and author in your package.json file.

ADD a README.md file to a package:

In a text editor, in your package root directory, create a file called README.md.
In the README.md file, add useful information about your package.
Save the README.md file.

Publish your release:
-Make sure you have created the account npm and verified it.

Use the npm login on your terminal. Login with your username and password.
Use npm publish --access public to create and publish scoped public packages.

Note: Update types
Each digit in the version has it's own meaning:
1) First digit means major release.(resetting two later digit to zero)
2) Second digit means minor change in the software(resetting last digit to zero)
3) Last digit means a patch release.

Installing

After releasing my static site to install it locally on your device you can use npm i button-ssg to download my program.

Feedback

It's important to avoid taking feedback as personal criticism. When people provide us with feedback, we should be grateful because they are actually pointing out areas in which we need to improve.

Thoughts

This lab was a welcome one, that allowed us to contribute more to the community if anything. It was a first for me when publishing to npm, but this is useful information. I have always wondered how people were publishing their programs and now here I am, doing just that.

Release 0.3 - Internal

CDPhu — Fri, 18 Nov 2022 21:05:56 +0000

This was the first commit for this release I contributed to, but it took a while to finish since me and some others were building a completely new website from scratch. Safe to say we can expect much more in the future. The website is called My Photohub.

Steps

No. 1:
I first started by creating a base line of what the website should look like, any form of padding needed. I then started researching for any open source or node_modules that could be used. the first one I cam across that took my interest was called Fancybox. It was relatively simple to use. Though what I did not check was when it was last updated. Turns out, Fancybox has not been updated for four years, and I was recommended to take a more modern version.

No. 2:
After doing some research on what was recommended I decided to use PhotoSwipe as a base for the gallery view. It took a bit of time for me to understand how the syntax worked, but eventually I understood. It was that the dimensions of the photos has to be inputted a certain way for them to fully fit within the gallery pop-up.

I then deployed it statically, which took a lot of time because I didn't understand the concept of a static page fully. So it took a while, and a lot of questions to understand how to let parcel bundle it properly to be deployed.

I was then requested to change to allow for complete fullscreen capabilities. This is due to the fact that using a mobile IOs device would cause double image. It took a bit of time but this is the result of the work:
Test Gallery

No. 3:
It was at this point where I had to start communicating with the other contributors to the repository. It was due to the fact that three of us previously had a package.json, package-lock.json each and that would cause conflicts around each other.

So what we had to confirm was to create a separate pull request with only those package.json and package-lock.json. And then remove the package.json from the rest of our files before we fully committed.
Initial Package Implimentation

Thoughts

This was extremely time consuming, but otherwise puts into perspective how long it would takes to merge into a single repository. But that only means this is more experience for those of us participating. I as a contributor have also to take account for the other programmers codes. Other times, I was given their code and had to build around it, this time, we had to build around each others code, at the same time.

Internal Code Review -2 & 3

CDPhu — Fri, 18 Nov 2022 21:05:42 +0000

Continuing my code reviewing, in the same repository as before I another issue popped up and being the person that I am, I took a shot at it.

Review

No. 2:
I will be honest, I had quite the issue with this one, because there was not much that I could see wrong with the code. Even when running ESLint through I couldn't see much. I had a couple issues when trying to run the server because I thought be had to build a template, but that wasn't the case.

After consulting with the author, apparently all I had to do was npm install and npm run start. So after doing that the server runs successfully. What I initially saw was that the list of data types within the drop in box was being cut off. But there was no documentation on how to modify the values of the box. Even trying to modify his css file did not work, so there was no real way of making the box bigger or modifying the dimensions of the text.

No. 3:
My Final code review was also in the same repository. There was not much code, but it from what I saw there was an issue that was pointed out in my code, so I thought I would recommend to them as well. Instead of importing from a CDN, they would import it from node_modules instead. because importing from an HTTP is still considered experimental according to the node.js documentation.
You can read more on it here.

Thoughts

Overall, I enjoyed this part of the assignment because it allowed me to review and check other students' code while also providing me with real-world experience with reviewing pull requests. The process of reviewing a pull request is critical because it ensures that only the best code is pushed into the main branch.

Internal Code Review - 1

CDPhu — Fri, 18 Nov 2022 21:05:26 +0000

Reviewing code is not really my strong suit. It takes a lot of time and effort, something I lack. But I knew it was an essential tool to programmers, taking in and considering better alternatives for code, as well as optimizing it. So I had to push through, and eventually I found several errors within my first review:

Review

My first ever code review, I decided to do within my-photohub. I reviewed a fellow students code that being SerpentBytes. I tried nitpicking at the small details.

After that, I then decided to clone his code locally via the use of the HTTPS cloning and I couldn't really find anything that caught my eye. So I decided to use ESlint for any syntax. ESLint found several, one of which was an Unused import.

After I submitted what I found the author of the pull request contacted me to help him test out the new version after he had made the changes. He walked me through getting my personal access tokens. It took a while because I did not have gh_ before my token name. Which then caused me to have an error 400 being that it was an invalid request.

So after getting that sorted out, when I added the proper credentials with an access token that does begin with gh_, I finally got a passing message 200. He then asked me to check my GitHub if a repository has been created or not. When I checked, a new repository had been created in my account.

He then asked me to re-input the access token so I did as he told. It was to check whether you can use the same access token twice. Tested it out, and a new repository had been created. So it was working completely as intended.

Thoughts

It was great to work collaboratively on these issues as an open source community. I learned a lot from reviewing other people's code, and it was interesting to see how everyone tried to approach similar tasks in different ways. Overall, I hope that these reviews will help to improve the code quality in the future.

Adding Continuous Integration

CDPhu — Thu, 17 Nov 2022 13:57:19 +0000

This week, we are going to have out Lab 9 in OSD600. Similar to the Lab 8, Lab 9 is about to improve our SSG within GitHub. We are doing so by implementing Continuous Integration or CI.
Continuous integration (CI) is the practice of automating the integration of code changes from multiple contributors into a single project. It's a key practice, allowing developers to frequently merge code changes into a central repository, where builds and tests are then run.

Procedure

Part 1
I have had practice using CI doe to one of my other classes that being CCP555. So I understood what I was doing for the most part. It didn't take long in all honesty, due to it being that GitHub does the majority of the work for you.

Though I was stuck on what to use for a while. Did I want to hardcode it automatically for the default branch using $default-branch or did I want it to run in my main branch (which is also my default). So I just opted to just usemain` as the branch within the CI.

In order to check whether this had worked or not, I decided to push split of my mdFileConverter() function into its own file. From there, I created several tests for it as well. I then pushed the new test files to see whether it would pass the CI lo and behold they passed without issue.

Part 2
Moreover, for this Lab 9 we need to test other people's CI as well. I found my partner Neil via Slack. Personally I didn't do much, I just created a test to test whether an parse was undefined or not, and one to see if her config file could parse one specific file and not a folder of files. I also used experience from a previous commit during release 0.3 where the owner was asking to create tests.

Thoughts

This lab overall, is a simple lab, though I would not call it a bad thing. With this lab it can be extremely useful, and an extremely powerful tool that can apply to a variety of situations. This allows programmers to build on one project simultaneously on a project while checking for any errors. An extremely versatile and useful tool to any programmers

Release 0.3-External

CDPhu — Mon, 14 Nov 2022 20:25:22 +0000

For release 0.3, we had a few parts that we needed to accomplish in the assignment. This blog post will discuss my experience with contributing to an external repository. The repository of choice was front.

front is the repository for the frontend to the website of the BVPK e.V. In simple terms, it's a static website with some forms for new members and donation functionality. The front- and backend of the application run on Next.js. The project is deployed with docker-compose on a Debian server.

Issue

Issue #3
Part 1:
The author wanted testing for his repository so I tried it out with jest. I wasn't sure what they wanted as they only specified tests. Though I wasn't sure about the tests so I was using the tests to see if they would match the snapshot when being run. I did this for multiple pages. Though I was trying a new method. Instead of just testing the file out right, I had the test file create a snapshot of what was the expected output. It would then compare what it was receiving and compare it with the snapshot. If it did not match then the test would fail.to run the code the user has to use npm run test.

Part 2:
I also decided to also implement end to end tests using playwright. Though this kind of testing was completely new to me. So I had to read the documentation on how playwright is implemented, and how to test e2e. It took a bit of time to understand but, eventually I understood.

So I created basic tests for routing within the home page. So I fired up the server locally using npm run start and looked through some of the routes used on the home page. I've written the test in a way that it would only work once localhost:3001 is being used, otherwise it would fail. to run the code the user has to use npm run test:e2e.

Thoughts

The author never really conveyed how the code should be tested so I had to make due with what I did know how to do. Though straying out of my comfort zone when it came to creating these tests. Using snapshots was completely new to me, had to do a lot of reading using this link. Learning playwright was also an interesting experience, though a welcome one. I now have some experience using a different kind of testing tool.

Javascript Testing

CDPhu — Thu, 10 Nov 2022 21:18:06 +0000

This week we are going to have Lab 8 and along with the lab
it is also introducing a new tool to our SSG project. In lab 8, we are going to add testing functions for several functions that we have in our SSG. I somewhat have experience with this because one of my other course CCP555 has a lot of testing involved. The testing framework that was used in the program was Jest.

Procedure

After watching the videos and reading through the lab instruction. I just chose the testing framework that I'm going to use in this Lab 8, which is Jest. And then I just install the Jest to my program by using the command npm install jest. I updated the "test" command in the package.json file in order for it to run correctly.

I then extracted the htmlGen function and placed is into its own file that being htmlGen.js, and modified my-button.js to import htmlGen as an external function.

I then started coding the testing functions. At first all I coded was the html good value functions. So I set up a total of 7 tests where for htmlGen():

test would generate a html result with a string html argument
test where it generates a html result with a string html argument
test the htmlGen() function with bad or empty value types (lang, title, html, string, footer)

In CCP555, I have already learned about coverage using npm run coverage. But what was new was setting it up so that coverage would print out a report.

Thought

There were several things I was already aware of since I have done some of this in previous labs in a different course. Though what was new to me was the capability of being able to print coverage
files into a report. I will probably make more use of this on different projects.

NOTE: I didn't squash it correctly therefor having several commits.

Test Function
htmlGen file
Adding Jest
Updatting my-button.js
Coverage Files