Software Developer Blog

In this release, I contributed in the  binari project, creating unit test cases for React components. These test cases are testing the components from the user's point of view, instead of internal implementation details. For example, I have tests to ensure that some action happens when a user clicks on a button. Here is the command to execute the test cases npm run test The test cases test the components as the users commonly interact with them. I create test suit for each component. This project taught me how to write effective test cases. I also learned to look from the user's perspective when testing the application, ensuring that the components are working as expected. If they do not, I know where the problem is, thanks to the test cases. I created a PR for the test cases. At the moment I am still waiting for some feedback for my PR.  Issue: https://github.com/BrandonArmand/Binari/issues/77 PR: https://github.com/BrandonArmand/Binari/pull/78

In this project, I have started creating test cases for react components. I have test cases for react components called rending snapshots and test cases for react components called clearfix. I am stuck on expanding the test cases to cover the whole function. I have managed how test cases work in react components. I am planning a different approach to looking at examples of test cases for react components. This way, I can see how it can be done. From there, I can figure out how I want the test cases to be done. This is done using test suites, and then I use it or test for each test case.

In this project, I used npm to publish my site by following the npm guide. npm guide  I created onLoad.js that prints the demo message. I installed my project using the command npm install text-ssg-tool Then I updated my package.json file to version 1.0.0 for the initial version release. Then I ran the command  npm publish  to publish the site to  npm.  Then I added the changes in git. Then commited the changes on git.   Then I pushed the changes on git. Then I followed the steps in my README.md file to simulate someone else running and testing my program. I noticed a few mistakes in my  README.md file. I made the corrections  in my  README.md file. Then I reran the command  npm publish to republish the site to npm.  Then I added the changes in git. Then commited the changes on git.   Then I pushed the changes on git. Then I got a classmate to run and test my program. There was no issues. My partner had no issues at all wit...

 For this project, I will be working on the Binari  open source project. In the  Binari  open source project, I will be working on adding test cases for react components. At the moment there is no effective way to test the code. Testing by a human is not effective and is time consuming and is error prone. JavaScript files with react components will have there own unit test cases testing for different scenarios.

In this project, I created my GitHub Actions Workflow by going under the actions tab and selecting Webpack for my workflow. Then I committed the webpack.yml file with the default value without changing anything. Then my workflow got executed, and everything was successful. I got the green checkmark for all builds. Then I created a bug. Then I added the changes in git. Then commit the changes on git. Then I pushed the changes. Then my workflow got executed, and the workflow failed on the build. Then I fixed the bug. Then I added the changes in git. Then commit the changes on git. Then I pushed the changes. Then my workflow got executed, and everything was successful.  My partner's testing setup had lint running right after any commit. Writing test cases for a project I did not create required time to understand how the code was working and why my test case was failing before making the modifications in the code to have the test case I created to be successful. PR: https://github.com...

 I did a code review in the telescope  project having a Russian Speaker review the Russian language.   issue: https://github.com/Seneca-CDOT/telescope/pull/3765 I did a code review in the  telescope  project checking button text on youtube and twitch form to check if text is displayed correctly.  issue: https://github.com/Seneca-CDOT/telescope/pull/3760

For my internal project, I worked in the open source vscode-seneca-college project. I found that README.md file was not descriptive enough. There was also no CONTRIBUTING.md file. This would be a problem for new contributers. There is nothing to tell them how to contribute to the project and how to install the required dependancies and how to test the project to see how it is working. Issue 8 I created my own fork. Then I cloned from my fork. I created a new branch using the command  git checkout -b issue-8 Then I ran the command  npm i to install the required dependancies into my project repo. Then I typed F5 to test the project. I tested to make sure I was getting the hello message as a prompt in a new vs-code window. A new window will pop up with a hello message. I am now in debugging mode. I can debug the code to find out what it is doing with the step forward step inward step out of buttons. Or I can press the red square to exit debugging mode. Then I added instructions...

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 ...

For this week, I worked in the Telescope project from Seneca. I added support for bulgarian language to the about page for Bulgarian speakers to being able to get a breaf understand of the Telescope project and how everything works. I open a new issue for supporting bulgarian language on the overview page. I had to first fork the project. I cloned the project. I created a new branch using the command  git checkout -b issue-3697   Then in the directory src/web/docusaurus/ I ran the command  mnpm i to install the required dependancies into my project repo. Then  I ran  npm run start and opened URL 'http://localhost:4631/docs/overview' to explore the about page and see how it looks. Then I created a new directory with subdirectories  bg/docusaurus-plugin-content-docs   with the overview.md. I translated the overview page content in Bulgarian. I also added the bg option in the docusaurus.config.js file located in  src/web/docusaurus/docusaurus.co...

I noticed that Denes' code is clean and well structured. I forked Denes' repository. Then cloned the repository. Then I used the command  git checkout -b issue-10 to  create a new branch. I added the option c. When the user types in  `node ./ssg.js --config ./src/config/default_config.json` a new output file will be generated in the directory out with the specific configuration that are provided in the file default_config.json. After completing the implentation. I used the command  git add  to add the files I made changes to. Then I use the command  git commit -m "" to commit the changes. Then I used the command  git push --set-upstream origin issue-10 to push the changes. Then I added a pull request with the message " I Added support for configuration file (-c --config)." Then I used the command  " git remote add  dadolhay https://github.com/dadolhay/IG-text-ssg-tool.git" to get the forked repo. Then I used the command  g...

I opened a new request issue to Add language support for Multi language. Issue#5 I also open a new request issue to add support for a horizontal rule in Markdown. Issue#6 Issue-5: When the user gives the option -l and the language and country. The language and country will be used in the string start part of html. I added a variable language for the language provided to my string start part of html. I added a condition to check if language is provided by the -l parameter if it is not provided I am using default language en-CA. If it is then I will add it as the language to be used. I added to the console log the language to be display to the user in the success message. I added a parameter in the processFile function to be used as the language in the object generateHtml. I also added a parameter in the processDir function to be used as the language when calling the function processFile if the full path is a file. I also added language in the generateHtml function when calling getSt...

I have added support to run the program on Linux and Mac OS, as previously, the program would only run on Windows OS. I have also added support for italicized and bold text. In the program, the text inside will get italicized if there is 1 star or one underscore. The text inside will get bolded if there are two stars or two underscores. The problem I faced was getting a text that spanned multiple lines to be italicized or bolded. It would previously work only until the end of the line. I worked until the next key character would close, either italicizing or bolding. I also faced an issue where the program would not work on my Mac. I was getting the error message no such file or directory. This is because Mac os does not support backslashes when reading through directories. I learned to use path.join() instead of backslashes in the path name to give support for Mac OS and Linux OS. I also learned that creating the implementation for bolding the text or italicizing the text only works on...

I reached out to students on Slack and found a student ready to peer evaluate my work. Stefan responded, and we both decided that working together would be beneficial. Python was a fascinating pick for him regarding a language to work in. It was unclear to me how to use his software. I am thankful that he assisted me with it. Incredibly, other people can detect issues in my code, mainly because there are certain bugs that I cannot see since they do not appear evident to me. I appreciate having people peer review. It makes me feel as if there is either something that might be improved upon or something that I was unaware of that was a bug. I discovered this when I was testing and assessing Stefan's application. I generated an input file in a directory on my own. The text contained inside a txt file would be read and then converted into an HTML file using this. I also discovered that encoding did not conform to the requirements for the function.  Issues I filled: https://github.com/s...

I have a strong interest in web development. I have expiriance from co-op last term working for Zenith. It was a great expiriance. I took this course expand my skill in open source developing by contribute to open source projects that are outside my confort zone throughout this course. I also want to learn new skills and connect with new people working with open source projects. What inspires me to take open source is having the ability to make changes without asking others and being creative and being unrestricted and open to implementing new ideas that others have not come up with. I plan to help contribute with large projects, being able to help with bugs and expanding the code, and having good connections with people developing open source projects all around the world, and learning from senior developers with more expiriance. I would like to work on Graphical user interface and web based applications that would help businesses and clients. The github repo I choose is  lapce. h...