CATcher:
MarkBind:
RepoSense:
TEAMMATES:
FreeCodeCamp is a friendly community where you can learn to code for free.
The organisation houses a number of open source projects such as its online learning platform, mobile app, developer news publication, vscode extension, and more.
All of its open source solutions work towards the noble goal of providing high quality technical education for free.
I have focused my contributions to its curriculum and web application codebase which allows users to complete incremental tasks and build lightly guided projects, giving them confidence in tackling their own projects and easing them out of tutorial hell.
ID | Status | Description |
---|---|---|
1 | Merged | fix(curriculum): Update Instruction Verbiage |
2 | Merged | fix(client): Fix Backend code source submission |
3 | Pending follow-up | feat(client): Persist editor open tabs |
4 | Pending initial review | feat(client): Editor file visual indication |
5 | Merged | fix(curriculum): Improve instruction clarity |
Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.
scope: curriculum
status: waiting review
is added to allow other maintainers to indicate its suitability for another maintainer to review. I.e, all tests pass and the first reviewer approves or is not familliar enough with that part to review the changestatus: waiting update
is added to indicate a review has been given and it is waiting for the contributor to make the required changesstatus: waiting review
label and only leave comments on necessary fixes to failing CI/CD testsVSCode is an open-source project by Microsoft. It is a code editor that is used by almost every coder.
VSCode runs on Electron for Desktop version, and runs on Javascript (compiled from Typescript) on the web. It does not make use of any javascript framework, because it is older than most of the javascript framework.
I focused mainly on the functionality side of VSCode. I started out with fixing a small bug, and then moved on to contribute features to VSCode.
ID | Status | Description |
---|---|---|
#240134 | Merged | Extension detail content escapes container |
#244074 | Pending | Goto definition for built-in symbols in HTML script |
VSCode code base heavily makes use of this pattern, where an interface is declared to determine how the clients can interact with a given class. For example, if Panel
is a part of the code editor, then IPanel
declares the methods that other classes can call on a panel. Other classes then only references the methods declared in the interface, while different types of panels implement IPanel
then determines the actual behaviour.
This design makes it easier to develop tests, as test cases can provide stubs to the actual implementations, reducing coupling of components especially in tests. However, this design makes it more difficult for new contributors to trace code 😅, especially when I am not sure which implementation it is supposed to be.
VSCode actually has quite a number of default extensions, most of which only activates when you open files of the corresponding languages. My second pull request necessitated me to look at VSCode extension API.
package.json
specifies the behaviour of each extension. For html-language-features
and typescript-language-features
, the file also specifies when the extension is activated.extension.ts
declares the functions to be called when the extension is activated and deactivated. In particular, typescript-language-features
adds VSCode disposibles, which contribute features to VSCode, such as syntax highlighting, hover text, definition content, implementations, references, etc. In contrast, html-language-features
starts a client that interacts with a server to provide features to VSCode.My second pull requests touches mainly on html-language-features
. In the extension, the responsibility of implementing the features lies within the server.
This is consistent with many modern Javascript framework. In VSCode, each component is declared with a class. The actual DOM element is declared as an instance field. Operations that alter the DOM then references this field.
In VSCode, approximately 100 pull requests are merged everyday. VSCode has a dedicated bot to assign a human reviewer to a PR from an external contributor. From my observation, the reviewer assigned is usually the one that has experience in the field, usually the person has commented on or is the creator of the original issue that the PR is addressing.
I believe this bot can be quite useful for the CATcher - WATcher. During off-season time, PRs tend to be ignored, because students do not check the repository regularly for external contributions, and PR creators do not request for review. While it can be an issue where the assigned person already graduated or is MIA, there are possible fixes:
Before the VSCode Engineering bot even assign the PR to a person, new contributors need to sign an agreement. The agreement is raised by another bot via a comment, below which I could just reply to agree. The gist of the agreement was that I would authorise VSCode to use my code, and that I grant them full patent rights.
Source Academy is an open source, web-based learning environment for programming developed at NUS. The platform is mainly used to teach CS1101S: Programming Methodology I within NUS, but is also used by overseas universities, such as MIT and Uppsala University.
I have been part of the Source Academy development team for some time; I started as a contributor in terms of the game design and story in AY20/21 Sem 2, and implemented non-trivial features for the game engine directly in AY21/22 Sem 2. However, since then, I have not been able to take a closer look again at the game engine -related codes.
As part of CS3282, over AY23/24 Sem 2 (and the summer break), I have decided to tackle the code quality and issues surrounding the frontend-facing portion of the game engine: the game simulator.
The contribution I have made are as follows:
ID | Status | Pull Request |
---|---|---|
#2805 | Merged | Game: Rename Story Simulator references to Game Simulator (#2805) |
#2810 | Merged | Game: Remove Object Placement feature from Game Simulator (#2810) |
#2836 | Merged | Game: Refactor Game Simulator (#2836) |
#3013 | Merged | Game: Save game state for staff and admin (#3013) |
#3018 | Merged | Game: Fix a bug with displaying published chapter data (#3018) |
Game: Rename Story Simulator references to Game Simulator (#2805): This was the first issue I tackled - it had been nearly 2 years since I took a last look at the codebase, and frankly, it took me quite a while to understand the flow of the codebase once again. This was a low hanging fruit -type issue, and it gave me the chance to warm up to the codebase once again.
Game: Remove Object Placement feature from Game Simulator (#2810): This was the first non-trivial PR. After the first PR #2805 was merged, I opened the issue "Game: Refactor and Updates to the Game Simulator (#2806)". This served as the ongoing tracker issue on how we can refactor and polish the game simulator, filled with problems found in the current game simulator code that I noticed while working on PR #2805. In order to remove the Object Placement feature, which had not been used by the game storywriting team for years (a fact I knew, as the sole member of the game storywriting team for years), I had to do a deeper dive into the current architecture of the game simulator. I was able to refactor and remove the portions of code that were necessary for doing this, and this led me to also do a deeper dive on how Phaser 3 engine worked - but I also managed to find even more problems while working on this PR, and that formed the bulk of the problems tackled for the next PR.
Game: Refactor Game Simulator (#2836): This was the major PR I worked on; following #2805 and #2810, I decided to refactor the entire game simulator. This not only included dependency updates and rewording of text, but also re-organizing the code to make it more modular. This was also in part influenced by the earlier work in PR #2810; with this PR #2836, removing or adding a module to the game simulator should now be much easier. The UI of the game simulator was also changed to (1) remove issues with browser window sizing, and (2) use more modern UI components.
Game: Save game state for staff and admin (#3013): After #2836, I took a bit of a break from the coding work to instead focus on planning for a major overwrite of the game engine itself with the rest of the game team. As we did not manage to complete the planning in time for the next semester, I decided to end off the summer break with a trivial feature that was in demand for some time, in time for the upcoming semester. That was this PR.
Game: Fix a bug with displaying published chapter data (#3018): This was another PR to fix a bug right before the start of the upcoming semester.
As mentioned, between the gap from #2836 and #3013, we had been planning for a massive game engine overwrite that aims to remove poor coding standards / practices that accumulated over the years, and instead incorporate interesting approaches to game development by making use of functional programming to declare scenes in phaser. However, we did not manage to complete the planning in time for the next semester, and are instead aiming to complete this work after AY24/25 Sem 2 (i.e. after graduation).
Widely-used JavaScript testing framework.
Committed a change that was mentioned in a bug report regarding a test's flaky behaviour: https://github.com/jestjs/jest/pull/15517
The bug fix itself was simple, but when it came to adding a test to cover the fix, things became more complicated. Eventually, a maintainer and I agreed that the fix was too inconsistent to cover with a test, but I still learnt some things while investigating! Unsurprisingly, Jest uses Jest to test itself - and I became more familiar with this testing framework (that is being proposed to be added to RepoSense!).
The contribution workflow to Jest itself was slightly different to RepoSense as well - there is no custom commit message; rather, the name of the PR is the commit message. Additionally, all changes are logged in a separate changelog file that is included with new Jest releases. This progressive workflow where each change is logged as it is committed could be useful to RepoSense as compared to what we currently do.
Node.js based web framework focused on speed.
Documentation change: https://github.com/fastify/fastify/pull/5988
This was an interesting change because what the user thought was a bug was actually intended behaviour - which is why they wanted a documentation change to clarify this. When investigating the code that causes this behaviour, I agreed that it could be easily mistaken for buggy behaviour, highlighting the importance of good documentation!
One contribution workflow we could adopt is adding a PR checklist to make sure most bases are covered by contributors before they submit a PR.
Monorepo for the tooling that enables ESLint and Prettier to support TypeScript
Fixed a bug where declare
variables in definition files were incorrectly flagged as shadowing global variables.
Learnt more about the no-shadow
rule of the typescript-eslint ruleset via the documentation.
Comparisons to internal project RepoSense: typescript-eslint:
Recommendations for internal project:
accepting-prs
or help-wanted
label for our issues. Currently, a lot of our issues are suggestions/ongoing discussions, and it is difficult for contributors to determine which issue should be worked on. Having a label would make these issues easier to find and more clearly conveys its status.Assimp stands for Asset Importer Library, which handles geometric scenes from various 3D-data formats, for example animations or texture data, and also supports CAD/3D printing formats.
Through my FYP, which uses an AI Agent to automatically remediate security vulnerabilities, a PR for a vulnerability detected by OSS-Fuzz was merged in, the pre-print is in the PR description.
TLDR is a community-driven summary page of various popular command-line utilities, across various devices and languages, so you don't need to Google/ChatGPT various commands or run an entire --help
/man
command
Added a page for aws s3 sync
, a tool I was conveniently using on another project
react.dev is the official documentation website for React.
Week | Project | Contributions |
---|---|---|
2 | reactjs/zh-hans.react.dev | Raised issue: Typo in Tutorial: Tic-Tac-Toe #1655 |
2 | reactjs/zh-hans.react.dev | Merged PR: Improve translation #1656 |
5 | reactjs/react.dev | Discussed issue: link to createClass is broken #7476 |
5 | reactjs/react.dev | Raised issue: [Typo]: Misspelling on Setup Page #7606 |
5 | reactjs/react.dev | Merged PR: Fix setup page #7607 |