Skip to content

Commit

Permalink
Merge remote-tracking branch 'refs/remotes/origin/master'
Browse files Browse the repository at this point in the history
  • Loading branch information
jonasongg committed Feb 19, 2024
2 parents 9bd7513 + 35a0686 commit 2ec8035
Show file tree
Hide file tree
Showing 26 changed files with 420 additions and 24 deletions.
46 changes: 42 additions & 4 deletions students/Arif-Khalid/knowledge.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,45 @@
### Tool/Technology 1
### Angular
In order to work on CATcher and WATcher, I had to learn how to use Angular. With a background in react, it was a difficult transition due to the added checks and strict nature of Angular.
Below are a few of my learning points:
* Components:
* Each component consists of 4 different files, each of them critical to know. Logic can be contained in either typescript of html component files and you initialise other components through the HTML rather than the typescript file
* Components also have a module file which is where its dependencies are stated, i.e., the other components, services, modules it depends on
* Services:
* Each service is like a component but without anything to display. They perform functions that could be contained within components but are extracted out to increase modularity and reusability
* Like components, services can depend on other services and are often injected into components as dependencies
* Modules:
* Modules are containers for a dedicated group of files consisting of components, services or other modules
* Each module conventionally contains all the code pertaining to a certain feature
* The root module thus contains all code in the code base, child modules under the root module contain more feature-specific code in a hierarchial structure
* Modules are critical to understand in order to understand the code base and create new features
* RxJS
* While not exactly part of angular, it is important in learning angular as they are often if not always used in tandem
* RxJS is a library that allows reactive programming, i.e., the ability to subscribe to changes instead of polling for a change
* This makes it easier to compose asynchronous and cleaner, more optimized code using observer pattern
* Observers are a very useful tool that allows me to react to changes by subscribing to an event. This contributes to cleaner, more optimised and reusable code.
* Pipes allow you to consevutively call functions on the prior function's output, similar to function chaining. This allows us to have cleaner and reusable and more understandable code since you don't need to call functions separately and you can create functions out of a chain of other functions easily.
* Not to be confused with angular pipes which run via the "|" symbol in the html file, allowing you to transform data before it is displayed to the user.

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.
I learned Angular through various Youtube tutorials, Udemy tutorials, reading the documentation and trying out different things through personal test projects venturing into Angular.
* Youtube taught me basic fundamentals of Angular.
* Udemy taught me more in depth and guided me through small personal projects.
* The documentation gave me deeper understanding and insight into details not covered in tutorials

### Tool/Technology 2

...
### TypeScript
Angular uses TypeScript, so I needed to learn TypeScript. I had only a background in JavaScript while working with React and learning TypeScript had its own difficulties.
Below are a few of my learning points:
* What and Why TypeScript:
* TypeScript acts as a wrapper over JavaScript, compiling into JavaScript code behind the scenes when you build your project
* The reason people use TypeScript is because of the increased strictness where things have to be statically typed. This reduces the occurences of bugs and makes bugs easier to find when they do occur
* This makes TypeScript an extremely useful language to pick up and is used widely in industry
* Types:
* As in the name, typescript has types and almost everything is required to by statically typed
* The "any" type bypassed this requirement but is generally regarded as a bad practice as you have made TypeScript into JavaScript
* You can define your own types and use those types, similar to a typedef in other languages. This is often how objects are passed in TypeScript

I learned TypeScript through Youtube tutorials
* Youtube taught me the fundamentals as well as understanding the why and underlying implementation of typescript

### Testing
Still in the process of learning. To be updated.
7 changes: 7 additions & 0 deletions students/Arif-Khalid/progress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
| Week | Achievements |
| ---- | ------------ |
| 2 | Merged PR: [Hide 0 issue columns #223](https://github.com/CATcher-org/WATcher/pull/223) |
| 4 | Submitted Issue: [Refactor filters into its own service #249](https://github.com/CATcher-org/WATcher/issues/249) |
| 4 | Submitted Issue: [Update Angular version to 11.2.14 #237](https://github.com/CATcher-org/WATcher/issues/237) |
| 5 | Merged PR: [Remove unused services #238](https://github.com/CATcher-org/WATcher/pull/238), Merged PR: [Remove unused models #253](https://github.com/CATcher-org/WATcher/pull/253), Merged PR: [Remove unused session-fix-confirmation component #250](https://github.com/CATcher-org/WATcher/pull/250) |
| 5 | Reviewed PR: [Upgrade to angular 11 #252](https://github.com/CATcher-org/WATcher/pull/252) |
10 changes: 8 additions & 2 deletions students/KevinEyo1/knowledge.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

### Tool/Technology 2
### GitHub Actions

...
Learned how GitHub Actions fits into the development workflow, and how to use it to automate tasks. I used the GitHub Actions documentation to learn about the different types of workflows, how to create and configure workflows, and how to use the different actions available.

- **Resource**: [GitHub Actions Documentation](https://docs.github.com/en/actions)
- **Summary**: GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

- **Resource**: [GitHub Actions Workflow Syntax](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions)
- **Summary**: GitHub Actions uses YAML syntax to define the events, jobs, and steps that make up your workflow. You can create a custom workflow or use a starter workflow template to get started.
6 changes: 6 additions & 0 deletions students/KevinEyo1/progress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
### MarkBind


| Week | Achievements |
| ---- | ------------ |
| 5 | Merged PR: [Enhance search performance of algolia plugin #2406]() |
30 changes: 30 additions & 0 deletions students/MarcusTXK/progress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
| Week | Achievements |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 13/05/2023 | Reviewed PR: [Fix non-rendering PlantUML diagram #2005](https://github.com/reposense/RepoSense/pull/2005) |
| 28/06/2023 | Reviewed PR: [Incorrect dropdown box for config in UG: Customizing Report #2009](https://github.com/reposense/RepoSense/pull/2009) |
| 17/08/2023 | Reviewed PR: [Increase minimum version required for Git #2028](https://github.com/reposense/RepoSense/pull/2028) |
| 01/10/2023 | Reviewed PR: [Migrate build.gradle from Groovy to Kotlin #2008](https://github.com/reposense/RepoSense/pull/2008) |
| 01/10/2023 | Reviewed PR: [Migrate c-resizer.vue to typescript #2038](https://github.com/reposense/RepoSense/pull/2038) |
| 01/10/2023 | Reviewed PR: [Migrate random-color-gen.js to typescript #2043](https://github.com/reposense/RepoSense/pull/2043) |
| 30/10/2023 | Reviewed PR: [Update GitHub-specific references in codebase and docs #2050](https://github.com/reposense/RepoSense/pull/2050) |
| 30/10/2023 | Reviewed PR: [Add dynamic positioning support for tooltips #2056](https://github.com/reposense/RepoSense/pull/2056) |
| 30/10/2023 | Reviewed PR: [Fix tooltip zIndex such that it doesn't occlude next file title #2057](https://github.com/reposense/RepoSense/pull/2057) |
| 30/10/2023 | Reviewed PR: [Add contributors section to the README #2062](https://github.com/reposense/RepoSense/pull/2062) |
| 31/10/2023 | Reviewed PR: [Fix: Added contributors to the README.md #2064](https://github.com/reposense/RepoSense/pull/2064) |
| 02/11/2023 | Reviewed PR: [Created CONTRIBUTING.md #2065](https://github.com/reposense/RepoSense/pull/2065) |
| 23/12/2023 | Reviewed PR: [Reduce scope of try-catch block in ArgsParser::parse #2074](https://github.com/reposense/RepoSense/pull/2074) |
| 23/12/2023 | Reviewed PR: [Move TimeUtil ParseException throwing to ArgsParser::parse method #2075](https://github.com/reposense/RepoSense/pull/2075) |
| 23/12/2023 | Commented on Issue: [Reduce the scope of the try-catch block in ArgsParser::parse #1989](https://github.com/reposense/RepoSense/issues/1989) |
| 23/12/2023 | Created Issue: [Refactor RepoConfigCsvParser::processLine method to avoid arrowhead style code #2073](https://github.com/reposense/RepoSense/issues/2073) |
| 23/12/2023 | Created Issue: [Refactor RepoConfiguration to simplify constructor complexity #2076](https://github.com/reposense/RepoSense/issues/2076) |
| 1 | Reviewed PR: [Bump follow-redirects from 1.15.2 to 1.15.4 in /frontend #2079](https://github.com/reposense/RepoSense/pull/2079) |
| 1 | Reviewed PR: [Refactor RepoConfigCsvParser::processLine method to avoid arrowhead style code #2080](https://github.com/reposense/RepoSense/pull/2080) |
| 2 | Reviewed PR: [Remove hash symbol from URL when decoding hash #2086](https://github.com/reposense/RepoSense/pull/2086) |
| 2 | Reviewed PR: [Remove redundant User class #2093](https://github.com/reposense/RepoSense/pull/2093) |
| 2 | Reviewed PR: [Add cypress tests for renderFilterHash #2017](https://github.com/reposense/RepoSense/pull/2017) |
| 2 | Reviewed PR: [Improve memory usage by refactoring Regex compilation #2092](https://github.com/reposense/RepoSense/pull/2092) |
| 3 | Reviewed PR: [Use syntax coloring for code blocks in docs #2099](https://github.com/reposense/RepoSense/pull/2099) |
| 3 | Closed Issue: [Forward/Backward Navigation Using Browser Buttons #2090](https://github.com/reposense/RepoSense/issues/2090) |
| 4 | Reviewed PR: [Updating SystemTestUtil::assertJson to compare Json objects instead of line-by-line analysis #2087](https://github.com/reposense/RepoSense/pull/2087) |
| 4 | Reviewed PR: [Refactor RepoConfiguration to simplify constructor complexity #2078](https://github.com/reposense/RepoSense/pull/2078) |
| 5 | Created Issue: [Fix failing cypress test for range changes in chartview #2111](https://github.com/reposense/RepoSense/issues/2111) |
30 changes: 26 additions & 4 deletions students/NereusWB922/knowledge.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,29 @@
### Tool/Technology 1
### Angular

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.
#### **Attribute Directive**:
- **Summary**: Attribute directives can change the appearance or behavior of DOM elements and Angular components.
- **Resources**:
- [Angular Documentation](https://angular.io/guide/attribute-directives): Provides guidelines on creating and applying attribute directive, covering user events handling and passing values to attribute directive.
- **Practice**:
- [PR #1239](https://github.com/CATcher-org/CATcher/pull/1239): Created an attribute directive that listen to click event and will open error snackbar if the target link is an internal link.

### Tool/Technology 2
#### **Components**:
- **Summary**: Components are the main building blocks for Angular. Each components consists of 3 files:
- HTML: Defines the layout of the component's view.
- CSS: Defines the component-specific styles.
- Typescript: Implements the component's logic and behavior.
- **Resources**:
- [Angular Documentation](https://angular.io/guide/component-overview): Provides guidelines on creating components.
- Previous code by other developers: Learned from existing component implementations in the codebase.
- **Practice**:
- [PR #233](https://github.com/CATcher-org/WATcher/pull/233): Edited exsiting component and created new component to improve WATcher activity dashboard.

...
### Jasmine
Jasmine is a behavior-driven development framewrok specific for JavaScript unit testing.

I primarily learned how to use Jasmine from its [documentation](https://jasmine.github.io/api/edge/global). I utilized it extensively while working on WATcher test case refactoring. Some relevant PRs include: [PR #241](https://github.com/CATcher-org/WATcher/pull/241), [PR #244](https://github.com/CATcher-org/WATcher/pull/244), [PR #245](https://github.com/CATcher-org/WATcher/pull/245), [PR #246](https://github.com/CATcher-org/WATcher/pull/246), [PR #247](https://github.com/CATcher-org/WATcher/pull/247)

- **`describe`**: Define a group of spec (suite)
- **`it`**: Define a single spec.
- **`expect`**: Create an expectation for a spec.
- **Class `Spy`**: Mock functions (spies) that can be used to track function calls.
10 changes: 10 additions & 0 deletions students/NereusWB922/progress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
| Week | Achievements |
| ---- | ------------ |
| 3 | Merged PR: [Uncaught error when invalid link is clicked #1239](https://github.com/CATcher-org/CATcher/pull/1239) |
| 4 | Merged PR: [Improve activity dashboard design #233](https://github.com/CATcher-org/WATcher/pull/233) |
| 4 | Merged PR: [Refactor test cases for Login Component, Session Model and Conflict Model #241](https://github.com/CATcher-org/WATcher/pull/241) |
| 4 | Merged PR: [Remove markdown.css from test env stylesheets #243](https://github.com/CATcher-org/WATcher/pull/243) |
| 4 | Merged PR: [Refactor test cases for issue paginator #244](https://github.com/CATcher-org/WATcher/pull/244) |
| 4 | Merged PR: [Refactor test cases for issue sorter #245](https://github.com/CATcher-org/WATcher/pull/245) |
| 4 | Merged PR: [Refactor github label constants #246](https://github.com/CATcher-org/WATcher/pull/246) |
| 4 | Merged PR: [PRefactor test cases for search filter #247](https://github.com/CATcher-org/WATcher/pull/247) |
46 changes: 43 additions & 3 deletions students/Tim-Siu/knowledge.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,47 @@
### Tool/Technology 1
## markdown-it

MarkBind uses `markdown-it` for rendering html from markdown files. `markdown-it` is a fast markdown parser and has very extensive plugins support and great extensibility.

### Adding custom rules to `markdown-it` through adding a rule to `markdown-it`'s attribute

Adding custom rules to `markdown-it` can be done easily by adding a rule to the attribute.
For example, if we want to add our rules for rendering fenced code blocks, we can do so by adding a rule to the `markdown-it`'s attribute.

```javascript
markdownIt.renderer.rules.fence = (tokens: Token[],
idx: number, options: Options, env: any, slf: Renderer) => {}
```

**Parameters**

* **tokens (Token[]):** An array of Token objects. Each token represents a segment of the parsed Markdown content. Tokens of particular interest for the fence rule include:
- `token.type`: The type of the token (e.g., 'fence', 'code', 'paragraph').
- `token.info`: Contains the language specified after the opening set of backticks, if any, plus additional options.
- `token.content`: The text content within the fenced code block.
* **idx (number):** The index of the current `fence` token within the `tokens` array. This lets us find tokens before and after the fence if needed.
* **options (Options):** This object contains global options passed to the Markdown-it parser. This could include settings specific to our setup.
* **env (any):** An object containing environment variables and potentially additional data derived from the parsed Markdown. This can be useful for accessing context when defining rendering logic.
* **slf (Renderer):** A reference to the Markdown-it Renderer object itself. This is primarily used when we need to call other rendering rules to process nested Markdown code within the fenced block.

**Purpose of the fence renderer rule**

The `markdownIt.renderer.rules.fence` function is responsible for taking a `fence` token (representing a fenced code block) and converting it into the appropriate HTML output. This could include syntax highlighting, if our setup supports it.

**How it Works**

Inside the function, we have access to all the information in the tokens, options, and the environment. We can craft custom logic to generate the desired HTML structure for our fenced code blocks. Here's a very basic example:

```javascript
markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
const token = tokens[idx];
const content = token.content;
const language = token.info.trim(); // Language after the opening backticks

return `<pre><code class="language-${language}">${content}</code></pre>`;
};
```

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

### Tool/Technology 2

...
...
16 changes: 16 additions & 0 deletions students/asdfghjkxd/progress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# Progress

| Week | Achievements |
| --- | --- |
| 1 | Merged PR: [#2073] Refactor `RepoConfigCsvParser::processLine` method to avoid arrowhead style code #2080 |
| 2 | Reviewed PR: [#2003] Suppress Console Warning #2088 |
| 2 | Reviewed PR: [#1224] Update .stylelintrc.json to check for spacing #2094|
| 2 | Submitted Issue: Suggestions on improvement for memory performance regarding Regex matching #2091 |
| 2 | Submitted Issue: Suggestions for reducing runtime and memory usage for `StreamGobbler` #2095 |
| 3 | Submitted Issue: Refactor `parser` package for greater organisation of classes #2103|
| 3 | Merged PR: [#1958] Use syntax coloring for code blocks in docs #2099 |
| 4 | Merged PR: [#2103] Refactor parser package for greater organisation of classes #2104 |
| 5 | Merged PR: [#2076] Refactor RepoConfiguration to simplify constructor complexity #2078 |
| 5 | Submitted Issue: Refactor `CliArguments` to conform to `RepoConfiguration`'s Builder Pattern #2117 |
| 5 | Submitted Issue: Implement Proper Deep Cloning for `RepoConfiguration` and `CliArguments` #2119 |
| 5 | Submitted Issue: Parameter Verification for `RepoConfiguration` and `CliArguments` #2121 |
15 changes: 15 additions & 0 deletions students/dishenggg/progress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
### TEAMMATES

#### Overview

* Assisted in migration of `GetCourseJoinStatusAction` and `PutDataBundleDocumentsAction`
* Created test cases for methods in `FeedbackSessionsDb`

#### Achievements by Week

| Week | Achievements |
| ---- | ------------ |
| 3 | Merged PR: [[#12048] Migrate GetCourseJoinStatusAction #12713](https://github.com/TEAMMATES/teammates/pull/12713) |
| 4 | Merged PR: [[#12048] Migrate PutDataBundleDocumentsAction #12734](https://github.com/TEAMMATES/teammates/pull/12734) |
| 5 | Merged PR: [[#12048] Update restoreDeletedFeedbackSession to save updated entity to db #12751](https://github.com/TEAMMATES/teammates/pull/12751) |
| 5 | Merged PR: [[#12048] Add test cases for FeedbackSessionsDb #12752](https://github.com/TEAMMATES/teammates/pull/12752) |
Loading

0 comments on commit 2ec8035

Please sign in to comment.