Software Developer Blog

For my external project, I worked in the open source Binari project. I found that useEffect function should be in it's own custom hook with the implementation for getting contributors to make code more readable and possibly reusable. I implemented a custom hook, useGetContributors to extract implementation related to get contributors into the custom hook. Issue 25 I created my own fork. Then I cloned from my fork. I created a new branch using the command  git checkout -b issue-25 Then I ran the command  npm i to install the required dependancies into my project repo. Then I ran  npm run start to test the project. I tested to make sure the project was getting all the contributors on the about page. I created a custom hook and extracted implementation related to get contributors into the custom hook. The custom hook receives a URL as a parameter and fetches the data with url and reqOptions. Then useEffect will executed everytime when the URL change. The fetch data async ar...

In this project, I used jest as a unit testing framework, which Facebook created. It makes it easier to test UIs and javascript functions. It has features like a built-in assertion library, code coverage, and mocking. It is now a full set of tools that can be used for my JavaScript project. By running multiple test suites at the same time, Jest can speed up the testing process as a whole. I choose Jest as my testing framework because using mocking in test cases was important to me when testing functions, as it helped me to test values that are not real. To set up my project. First I ran the command  npm install to install all module dependancies.  Then I ran the command  npm install --save-dev jest to install the jest module as dev dependancies. Then I added the script "scripts": {  "test": "jest"  } I learned while writing my test cases that making test cases for each function was unnecessary. Some of my functions were calling other functions. Also, I rea...

For this week, I worked in the open source Binari project. I implemented the ability to adjust the size of the console, however the console is still fixed but can now be mover up and down with the mouse. Issue 69 I cloned the fork. I created a new branch using the command  git checkout -b issue-69 Then I ran the command  npm i to install the required dependancies into my project repo. Then I ran  npm run start to test the project. I found that the console was a fixed size and was not adjustable. I added a property hight to the gridContainer. I added splitLayout to the second gridItem. Then I ran npm run test to test the project. Then I added the changes in git. Then commited the changes on git. Then I pushed the changes. I created a new PR.  issue: https://github.com/BrandonArmand/Binari/issues/69 PR: https://github.com/BrandonArmand/Binari/pull/75

Docusaurus is an open source project to manage documentation websites. This means anyone who creates a github account can contribute to the project. To create a docusaurus project I ran the command  npx create-docusaurus@latest text-ssg-tool-docs classic Then I navigated to the project directory using the command cd text-ssg-tool-docs Then I ran the application using the command npx docusaurus start The feature I choose for my ssg project is full markdown support. I decided to choose this one, since I found out there are so many other character symbols that I was not supporting with my own implementation. I decided to use the library since it is there instead of reinventing the wheel. I came up with the initial plan of creating 2 new functions. They are processMDFile , and processTextFile , and only have the condition in the processFile checking if the file is either a markdown and call the corresponding function which is processMDFile , otherwise it will call the processTextFile...

For this week, I worked in the Telescope project from Seneca. I improved accessibly score on the homepage to 100% by making colour darker shade of grey to be visible for visually impaired people.  3734 I opened a new issue for improving google Lighthouse accessibly score. I had to first fork the project. I cloned the project. I created a new branch using the command  git checkout -b issue-3734   Then in the app directory  I ran the command  mnpm i to install the required dependancies into my project repo. Then  I ran  pnpm run dev and opened URL 'http://localhost:8000/' to run google lighthouse chrome browser plugin to get the accessibility score. Then I added the changes in git. Then commited the changes on git. Then I pushed the changes. I created a new PR.  https://github.com/Seneca-CDOT/telescope/issues/3734 https://github.com/Seneca-CDOT/telescope/pull/3735

For this week, I worked in the open source md-page  project.  I fixed a bug where npm run test fails: 18 snapshots failed.  issue 60 I open a new issue npm run test fails: 18 snapshots failed. I had to first fork the project. I cloned the fork. I created a new branch using the command  git checkout -b issue-60   Then I ran the command   npm i to install the required dependancies into my project repo. Then  I ran  npm run test to test the project. I found that the command was giving me errors because test snapshots were not updated. I then ran the command  npm run test -- -u to update the test snapshots. Then I ran npm run test to test the project.   Then I added the changes in git. Then commited the changes on git. Then I pushed the changes. I created a new PR.  issue:  https://github.com/oscarmorrison/md-page/issues/60 PR:  https://github.com/oscarmorrison/md-page/pull/61

For this week. I created a refactoring branch using the command git branch -b refactoring Then I added prittier to help take care of code formatting and eslint to take care of styling. Then I tested my code. Then I added the changes using the command git add <name of files> Then I commited the changes using the command git commit -m "added prittier to help take care of code formatting and eslint to take care of styling" Then I pushed the changes using the command git push Then I removed http-server package. Then I tested my code. Then I added the changes using the command git add <name of files> Then I commited the changes using the command git commit -m "removed http server" Then I pushed the changes using the command git push Then I applied prettier formating to all js files. Then I tested my code. Then I added the changes using the command git add <name of files> Then I commited the changes using the command git commit -m "applied prettier ...