From d26c100e9d32f70c83e987062920e7af3d1aff81 Mon Sep 17 00:00:00 2001 From: github-actions Date: Sun, 28 Apr 2024 03:05:35 +0000 Subject: [PATCH] Site Update. [skip ci] --- README.html | 2 +- README.page-vue-render.js | 2 +- cs3282-index.html | 2 +- cs3282-index.page-vue-render.js | 4 ++-- index.html | 2 +- index.page-vue-render.js | 2 +- instructions.html | 2 +- instructions.page-vue-render.js | 2 +- students/Arif-Khalid/info.html | 2 +- students/Arif-Khalid/info.page-vue-render.js | 2 +- students/Arif-Khalid/knowledge.html | 2 +- students/Arif-Khalid/knowledge.page-vue-render.js | 2 +- students/Arif-Khalid/progress.html | 2 +- students/Arif-Khalid/progress.page-vue-render.js | 2 +- students/EltonGohJH/info.html | 2 +- students/EltonGohJH/info.page-vue-render.js | 2 +- students/EltonGohJH/knowledge.html | 2 +- students/EltonGohJH/knowledge.page-vue-render.js | 2 +- students/EltonGohJH/observations.html | 2 +- students/EltonGohJH/observations.page-vue-render.js | 2 +- students/EltonGohJH/progress.html | 2 +- students/EltonGohJH/progress.page-vue-render.js | 2 +- students/EuniceSim142/info.html | 2 +- students/EuniceSim142/info.page-vue-render.js | 2 +- students/EuniceSim142/knowledge.html | 2 +- students/EuniceSim142/knowledge.page-vue-render.js | 2 +- students/EuniceSim142/observations.html | 2 +- students/EuniceSim142/observations.page-vue-render.js | 2 +- students/EuniceSim142/progress.html | 2 +- students/EuniceSim142/progress.page-vue-render.js | 2 +- students/FergusMok/info.html | 2 +- students/FergusMok/info.page-vue-render.js | 2 +- students/FergusMok/knowledge.html | 2 +- students/FergusMok/knowledge.page-vue-render.js | 2 +- students/FergusMok/observations.html | 2 +- students/FergusMok/observations.page-vue-render.js | 2 +- students/FergusMok/progress.html | 2 +- students/FergusMok/progress.page-vue-render.js | 2 +- students/KevinEyo1/info.html | 2 +- students/KevinEyo1/info.page-vue-render.js | 2 +- students/KevinEyo1/knowledge.html | 2 +- students/KevinEyo1/knowledge.page-vue-render.js | 2 +- students/KevinEyo1/progress.html | 2 +- students/KevinEyo1/progress.page-vue-render.js | 2 +- students/LamJiuFong/info.html | 2 +- students/LamJiuFong/info.page-vue-render.js | 2 +- students/LamJiuFong/knowledge.html | 2 +- students/LamJiuFong/knowledge.page-vue-render.js | 2 +- students/LamJiuFong/progress.html | 2 +- students/LamJiuFong/progress.page-vue-render.js | 2 +- students/MadLamprey/info.html | 2 +- students/MadLamprey/info.page-vue-render.js | 2 +- students/MadLamprey/knowledge.html | 2 +- students/MadLamprey/knowledge.page-vue-render.js | 2 +- students/MadLamprey/progress.html | 2 +- students/MadLamprey/progress.page-vue-render.js | 2 +- students/MarcusTXK/info.html | 2 +- students/MarcusTXK/info.page-vue-render.js | 2 +- students/MarcusTXK/knowledge.html | 2 +- students/MarcusTXK/knowledge.page-vue-render.js | 2 +- students/MarcusTXK/observations.html | 2 +- students/MarcusTXK/observations.page-vue-render.js | 2 +- students/MarcusTXK/progress.html | 2 +- students/MarcusTXK/progress.page-vue-render.js | 2 +- students/NereusWB922/info.html | 2 +- students/NereusWB922/info.page-vue-render.js | 2 +- students/NereusWB922/knowledge.html | 2 +- students/NereusWB922/knowledge.page-vue-render.js | 2 +- students/NereusWB922/progress.html | 2 +- students/NereusWB922/progress.page-vue-render.js | 2 +- students/Nicolascwy/info.html | 2 +- students/Nicolascwy/info.page-vue-render.js | 2 +- students/Nicolascwy/knowledge.html | 2 +- students/Nicolascwy/knowledge.page-vue-render.js | 2 +- students/Nicolascwy/observations.html | 2 +- students/Nicolascwy/observations.page-vue-render.js | 2 +- students/Nicolascwy/progress.html | 2 +- students/Nicolascwy/progress.page-vue-render.js | 2 +- students/Tim-Siu/info.html | 2 +- students/Tim-Siu/info.page-vue-render.js | 2 +- students/Tim-Siu/knowledge.html | 2 +- students/Tim-Siu/knowledge.page-vue-render.js | 2 +- students/Tim-Siu/progress.html | 2 +- students/Tim-Siu/progress.page-vue-render.js | 2 +- students/asdfghjkxd/info.html | 2 +- students/asdfghjkxd/info.page-vue-render.js | 2 +- students/asdfghjkxd/knowledge.html | 2 +- students/asdfghjkxd/knowledge.page-vue-render.js | 2 +- students/asdfghjkxd/progress.html | 2 +- students/asdfghjkxd/progress.page-vue-render.js | 2 +- students/cedricongjh/info.html | 2 +- students/cedricongjh/info.page-vue-render.js | 2 +- students/cedricongjh/knowledge.html | 2 +- students/cedricongjh/knowledge.page-vue-render.js | 2 +- students/cedricongjh/observations.html | 2 +- students/cedricongjh/observations.page-vue-render.js | 2 +- students/cedricongjh/progress.html | 2 +- students/cedricongjh/progress.page-vue-render.js | 2 +- students/cheehongw/info.html | 2 +- students/cheehongw/info.page-vue-render.js | 2 +- students/cheehongw/knowledge.html | 2 +- students/cheehongw/knowledge.page-vue-render.js | 2 +- students/cheehongw/observations.html | 2 +- students/cheehongw/observations.page-vue-render.js | 2 +- students/cheehongw/progress.html | 2 +- students/cheehongw/progress.page-vue-render.js | 2 +- students/ckcherry23/info.html | 2 +- students/ckcherry23/info.page-vue-render.js | 2 +- students/ckcherry23/knowledge.html | 2 +- students/ckcherry23/knowledge.page-vue-render.js | 2 +- students/ckcherry23/observations.html | 2 +- students/ckcherry23/observations.page-vue-render.js | 2 +- students/ckcherry23/progress.html | 2 +- students/ckcherry23/progress.page-vue-render.js | 2 +- students/dishenggg/info.html | 2 +- students/dishenggg/info.page-vue-render.js | 2 +- students/dishenggg/knowledge.html | 2 +- students/dishenggg/knowledge.page-vue-render.js | 2 +- students/dishenggg/progress.html | 2 +- students/dishenggg/progress.page-vue-render.js | 2 +- students/domlimm/info.html | 2 +- students/domlimm/info.page-vue-render.js | 2 +- students/domlimm/knowledge.html | 2 +- students/domlimm/knowledge.page-vue-render.js | 2 +- students/domlimm/observations.html | 2 +- students/domlimm/observations.page-vue-render.js | 2 +- students/domlimm/progress.html | 3 ++- students/domlimm/progress.page-vue-render.js | 4 ++-- students/domoberzin/info.html | 2 +- students/domoberzin/info.page-vue-render.js | 2 +- students/domoberzin/knowledge.html | 2 +- students/domoberzin/knowledge.page-vue-render.js | 2 +- students/domoberzin/progress.html | 2 +- students/domoberzin/progress.page-vue-render.js | 2 +- students/gok99/info.html | 2 +- students/gok99/info.page-vue-render.js | 2 +- students/gok99/knowledge.html | 2 +- students/gok99/knowledge.page-vue-render.js | 2 +- students/gok99/observations.html | 2 +- students/gok99/observations.page-vue-render.js | 2 +- students/gok99/progress.html | 2 +- students/gok99/progress.page-vue-render.js | 2 +- students/gycgabriel/info.html | 2 +- students/gycgabriel/info.page-vue-render.js | 2 +- students/gycgabriel/knowledge.html | 2 +- students/gycgabriel/knowledge.page-vue-render.js | 2 +- students/gycgabriel/observations.html | 2 +- students/gycgabriel/observations.page-vue-render.js | 2 +- students/gycgabriel/progress.html | 2 +- students/gycgabriel/progress.page-vue-render.js | 2 +- students/itsyme/info.html | 2 +- students/itsyme/info.page-vue-render.js | 2 +- students/itsyme/knowledge.html | 2 +- students/itsyme/knowledge.page-vue-render.js | 2 +- students/itsyme/observations.html | 2 +- students/itsyme/observations.page-vue-render.js | 2 +- students/itsyme/progress.html | 2 +- students/itsyme/progress.page-vue-render.js | 2 +- students/jayasting98/info.html | 2 +- students/jayasting98/info.page-vue-render.js | 2 +- students/jayasting98/knowledge.html | 2 +- students/jayasting98/knowledge.page-vue-render.js | 2 +- students/jayasting98/observations.html | 2 +- students/jayasting98/observations.page-vue-render.js | 2 +- students/jayasting98/progress.html | 2 +- students/jayasting98/progress.page-vue-render.js | 2 +- students/jingting1412/info.html | 2 +- students/jingting1412/info.page-vue-render.js | 2 +- students/jingting1412/knowledge.html | 2 +- students/jingting1412/knowledge.page-vue-render.js | 2 +- students/jingting1412/progress.html | 2 +- students/jingting1412/progress.page-vue-render.js | 2 +- students/jonasongg/info.html | 2 +- students/jonasongg/info.page-vue-render.js | 2 +- students/jonasongg/knowledge.html | 2 +- students/jonasongg/knowledge.page-vue-render.js | 2 +- students/jonasongg/progress.html | 2 +- students/jonasongg/progress.page-vue-render.js | 2 +- students/kaixin-hc/info.html | 2 +- students/kaixin-hc/info.page-vue-render.js | 2 +- students/kaixin-hc/knowledge.html | 2 +- students/kaixin-hc/knowledge.page-vue-render.js | 2 +- students/kaixin-hc/observations.html | 2 +- students/kaixin-hc/observations.page-vue-render.js | 2 +- students/kaixin-hc/progress.html | 2 +- students/kaixin-hc/progress.page-vue-render.js | 2 +- students/kevin9foong/info.html | 2 +- students/kevin9foong/info.page-vue-render.js | 2 +- students/kevin9foong/knowledge.html | 2 +- students/kevin9foong/knowledge.page-vue-render.js | 2 +- students/kevin9foong/observations.html | 2 +- students/kevin9foong/observations.page-vue-render.js | 2 +- students/kevin9foong/progress.html | 2 +- students/kevin9foong/progress.page-vue-render.js | 2 +- students/knowledge.html | 2 +- students/knowledge.page-vue-render.js | 2 +- students/luminousleek/info.html | 2 +- students/luminousleek/info.page-vue-render.js | 2 +- students/luminousleek/knowledge.html | 2 +- students/luminousleek/knowledge.page-vue-render.js | 2 +- students/luminousleek/observations.html | 2 +- students/luminousleek/observations.page-vue-render.js | 2 +- students/luminousleek/progress.html | 2 +- students/luminousleek/progress.page-vue-render.js | 2 +- students/marquestye/info.html | 2 +- students/marquestye/info.page-vue-render.js | 2 +- students/marquestye/knowledge.html | 2 +- students/marquestye/knowledge.page-vue-render.js | 2 +- students/marquestye/progress.html | 2 +- students/marquestye/progress.page-vue-render.js | 2 +- students/mingyuanc/info.html | 2 +- students/mingyuanc/info.page-vue-render.js | 2 +- students/mingyuanc/knowledge.html | 2 +- students/mingyuanc/knowledge.page-vue-render.js | 2 +- students/mingyuanc/progress.html | 2 +- students/mingyuanc/progress.page-vue-render.js | 2 +- students/nknguyenhc/info.html | 2 +- students/nknguyenhc/info.page-vue-render.js | 2 +- students/nknguyenhc/knowledge.html | 2 +- students/nknguyenhc/knowledge.page-vue-render.js | 2 +- students/nknguyenhc/progress.html | 2 +- students/nknguyenhc/progress.page-vue-render.js | 2 +- students/observations.html | 2 +- students/observations.page-vue-render.js | 2 +- students/sample/info.html | 2 +- students/sample/info.page-vue-render.js | 2 +- students/sample/knowledge.html | 2 +- students/sample/knowledge.page-vue-render.js | 2 +- students/sample/observations.html | 2 +- students/sample/observations.page-vue-render.js | 2 +- students/sample/progress.html | 2 +- students/sample/progress.page-vue-render.js | 2 +- students/sample/resume.html | 2 +- students/sample/resume.page-vue-render.js | 2 +- students/sopa301/info.html | 2 +- students/sopa301/info.page-vue-render.js | 2 +- students/sopa301/knowledge.html | 2 +- students/sopa301/knowledge.page-vue-render.js | 2 +- students/sopa301/progress.html | 2 +- students/sopa301/progress.page-vue-render.js | 2 +- students/supermii2/info.html | 2 +- students/supermii2/info.page-vue-render.js | 2 +- students/supermii2/knowledge.html | 2 +- students/supermii2/knowledge.page-vue-render.js | 2 +- students/supermii2/progress.html | 2 +- students/supermii2/progress.page-vue-render.js | 2 +- students/talksSchedule.html | 2 +- students/talksSchedule.page-vue-render.js | 2 +- students/vigneshsankariyer1234567890/info.html | 2 +- students/vigneshsankariyer1234567890/info.page-vue-render.js | 2 +- students/vigneshsankariyer1234567890/knowledge.html | 2 +- .../vigneshsankariyer1234567890/knowledge.page-vue-render.js | 2 +- students/vigneshsankariyer1234567890/observations.html | 2 +- .../observations.page-vue-render.js | 2 +- students/vigneshsankariyer1234567890/progress.html | 2 +- .../vigneshsankariyer1234567890/progress.page-vue-render.js | 2 +- students/vvidday/info.html | 2 +- students/vvidday/info.page-vue-render.js | 2 +- students/vvidday/knowledge.html | 2 +- students/vvidday/knowledge.page-vue-render.js | 2 +- students/vvidday/observations.html | 2 +- students/vvidday/observations.page-vue-render.js | 2 +- students/vvidday/progress.html | 2 +- students/vvidday/progress.page-vue-render.js | 2 +- students/weiquu/info.html | 2 +- students/weiquu/info.page-vue-render.js | 2 +- students/weiquu/knowledge.html | 2 +- students/weiquu/knowledge.page-vue-render.js | 2 +- students/weiquu/observations.html | 2 +- students/weiquu/observations.page-vue-render.js | 2 +- students/weiquu/progress.html | 2 +- students/weiquu/progress.page-vue-render.js | 2 +- students/worksheet.html | 2 +- students/worksheet.page-vue-render.js | 2 +- students/xenosf/info.html | 2 +- students/xenosf/info.page-vue-render.js | 2 +- students/xenosf/knowledge.html | 2 +- students/xenosf/knowledge.page-vue-render.js | 2 +- students/xenosf/progress.html | 2 +- students/xenosf/progress.page-vue-render.js | 2 +- students/yiwen101/info.html | 2 +- students/yiwen101/info.page-vue-render.js | 2 +- students/yiwen101/knowledge.html | 2 +- students/yiwen101/knowledge.page-vue-render.js | 2 +- students/yiwen101/progress.html | 2 +- students/yiwen101/progress.page-vue-render.js | 2 +- students/yuanxi1/info.html | 2 +- students/yuanxi1/info.page-vue-render.js | 2 +- students/yuanxi1/knowledge.html | 2 +- students/yuanxi1/knowledge.page-vue-render.js | 2 +- students/yuanxi1/progress.html | 2 +- students/yuanxi1/progress.page-vue-render.js | 2 +- students/yucheng11122017/info.html | 2 +- students/yucheng11122017/info.page-vue-render.js | 2 +- students/yucheng11122017/knowledge.html | 2 +- students/yucheng11122017/knowledge.page-vue-render.js | 2 +- students/yucheng11122017/observations.html | 2 +- students/yucheng11122017/observations.page-vue-render.js | 2 +- students/yucheng11122017/progress.html | 2 +- students/yucheng11122017/progress.page-vue-render.js | 2 +- students/ziqing26/info.html | 2 +- students/ziqing26/info.page-vue-render.js | 2 +- students/ziqing26/knowledge.html | 2 +- students/ziqing26/knowledge.page-vue-render.js | 2 +- students/ziqing26/observations.html | 2 +- students/ziqing26/observations.page-vue-render.js | 2 +- students/ziqing26/progress.html | 2 +- students/ziqing26/progress.page-vue-render.js | 2 +- 308 files changed, 311 insertions(+), 310 deletions(-) diff --git a/README.html b/README.html index 9c85671f1..2d7cb4209 100644 --- a/README.html +++ b/README.html @@ -15,7 +15,7 @@ const baseUrl = '/2024' -

CS3281&2 student data website

+

CS3281&2 student data website

-

CS3281 - 2024 Batch

CATcher:

MarkBind:

RepoSense:

TEAMMATES:

CATcher

ARIF KHALID

MISRA ADITYA

NEREUS NG WEI BIN

NGUYEN KHOI NGUYEN

MarkBind

EYO KAI WEN, KEVIN

LAM JIU FONG

WANG JINGTING

WANG YIWEN

XU SHUYAO

RepoSense

ALVIS NG

GEORGE TAY QUAN YAO

JONAS ONG SI WEI

POON YIP HANG, RYAN

TEAMMATES

CHING MING YUAN

DOMINIC BERZIN CHUA WAY GIN

TYE JIA JUN, MARQUES

XENOS FIORENZO ANONG

YEO DI SHENG

ZHU YUANXI

+

CS3281 - 2024 Batch

CATcher:

MarkBind:

RepoSense:

TEAMMATES:

CATcher

ARIF KHALID

MISRA ADITYA

NEREUS NG WEI BIN

NGUYEN KHOI NGUYEN

MarkBind

EYO KAI WEN, KEVIN

LAM JIU FONG

WANG JINGTING

WANG YIWEN

XU SHUYAO

RepoSense

ALVIS NG

GEORGE TAY QUAN YAO

JONAS ONG SI WEI

POON YIP HANG, RYAN

TEAMMATES

CHING MING YUAN

DOMINIC BERZIN CHUA WAY GIN

TYE JIA JUN, MARQUES

XENOS FIORENZO ANONG

YEO DI SHENG

ZHU YUANXI

-
+

Key Contributions

Week Achievements
2 Merged PR: Hide 0 issue columns #223
4 Submitted Issue: Refactor filters into its own service #249
4 Submitted Issue: Update Angular version to 11.2.14 #237
5 Merged PR: Remove unused services #238, Merged PR: Remove unused models #253, Merged PR: Remove unused session-fix-confirmation component #250
5 Reviewed PR: Upgrade to angular 11 #252
5 Reviewed PR: Refactor Label model #254
5 Merged PR: Faulty list view when back navigating #1243
6 Reviewed PR: Add shareable repo-specific URL #255
6 Merged PR: Refactor certain filters into its own service #259
6 Merged PR: Refactor sorting #261
6 Merged PR: Refactor milestone filters #264
7 Reviewed PR: Upgrade to angular 12 #267
7 Reviewed PR: Fix zone testing import error #269
7 Reviewed PR: Update test cases for phase service #275
7 Reviewed PR: Three-state labels #282
7 Merged PR: Refactor title filter #265
7 Merged PR: Automatic deployment #272
7 Submitted Issue: Release changelog automation #273
7 Submitted Issue: Save milestones by name #283
8 Submitted Issue: Incorrect numbering in user-workflow #35
8 Submitted Issue: Add tests for filters service #295
8 Reviewed PR: Update Design page #14
8 Reviewed PR: Enable pre push hook for npm run test #288
8 Reviewed PR: Remove sorting by assignees in issue sorter #286
8 Merged PR: Refactor milestones to save by name #289
8 Pending PR: Update user workflow #12
9 Submitted Issue: Label filter bar test case error #305
9 Reviewed PR: Hide redundant column pagination #309
9 Reviewed PR: Status filter checkboxes #310
9 Merged PR: Keep filters when switching repo #281
9 Merged PR: Release changelog automation #285
10 Reviewed PR: Integrate Grouping Service #313
10 Merged PR: Keep milestones when switching repo #311
10 Merged PR: Add filters to url #314
11 Submitted Issue: Default preset view is custom when it should be currently active #333
11 Submitted Issue: Remove quotations from filters in url #340
11 Submitted Issue: Showing of preset views before selecting a repo
11 Merged PR: Fix default preset view #334
11 Merged PR: Remove quotation marks from url #345
11 Reviewed PR: Include groupby params in url #319
11 Reviewed PR: Add preset views #320
11 Reviewed PR: Update repo on back and forward navigation #322
11 Reviewed PR: Reset GroupingContextService only if "keep filter" is selected #324
11 Reviewed PR: Create release 1.2.0 #327, Reviewed PR: Resolve conflicts for 1.2.0 #329, Reviewed PR: Deploy V1.2.0 #331
11 Reviewed PR: Create release V1.2.1 #349, Reviewed PR: Deploy V1.2.1 #350
11 Reviewed PR: Optimise Github API calls #360
12 Submitted Issue: Reset of sort filter after some time #372
12 Merged PR: Show preset view only when repo is set #355
12 Merged PR: Fix top and bottom shadow of columns #357
12 Merged PR: Create release V1.2.2 #364, Merged PR: Deploy V1.2.2 #365
12 Merged PR: Fix reset of filters on label fetch #374
13 Merged PR: Add test cases for filters service #312
+
Week Achievements
2 Merged PR: Hide 0 issue columns #223
4 Submitted Issue: Refactor filters into its own service #249
4 Submitted Issue: Update Angular version to 11.2.14 #237
5 Merged PR: Remove unused services #238, Merged PR: Remove unused models #253, Merged PR: Remove unused session-fix-confirmation component #250
5 Reviewed PR: Upgrade to angular 11 #252
5 Reviewed PR: Refactor Label model #254
5 Merged PR: Faulty list view when back navigating #1243
6 Reviewed PR: Add shareable repo-specific URL #255
6 Merged PR: Refactor certain filters into its own service #259
6 Merged PR: Refactor sorting #261
6 Merged PR: Refactor milestone filters #264
7 Reviewed PR: Upgrade to angular 12 #267
7 Reviewed PR: Fix zone testing import error #269
7 Reviewed PR: Update test cases for phase service #275
7 Reviewed PR: Three-state labels #282
7 Merged PR: Refactor title filter #265
7 Merged PR: Automatic deployment #272
7 Submitted Issue: Release changelog automation #273
7 Submitted Issue: Save milestones by name #283
8 Submitted Issue: Incorrect numbering in user-workflow #35
8 Submitted Issue: Add tests for filters service #295
8 Reviewed PR: Update Design page #14
8 Reviewed PR: Enable pre push hook for npm run test #288
8 Reviewed PR: Remove sorting by assignees in issue sorter #286
8 Merged PR: Refactor milestones to save by name #289
8 Pending PR: Update user workflow #12
9 Submitted Issue: Label filter bar test case error #305
9 Reviewed PR: Hide redundant column pagination #309
9 Reviewed PR: Status filter checkboxes #310
9 Merged PR: Keep filters when switching repo #281
9 Merged PR: Release changelog automation #285
10 Reviewed PR: Integrate Grouping Service #313
10 Merged PR: Keep milestones when switching repo #311
10 Merged PR: Add filters to url #314
11 Submitted Issue: Default preset view is custom when it should be currently active #333
11 Submitted Issue: Remove quotations from filters in url #340
11 Submitted Issue: Showing of preset views before selecting a repo
11 Merged PR: Fix default preset view #334
11 Merged PR: Remove quotation marks from url #345
11 Reviewed PR: Include groupby params in url #319
11 Reviewed PR: Add preset views #320
11 Reviewed PR: Update repo on back and forward navigation #322
11 Reviewed PR: Reset GroupingContextService only if "keep filter" is selected #324
11 Reviewed PR: Create release 1.2.0 #327, Reviewed PR: Resolve conflicts for 1.2.0 #329, Reviewed PR: Deploy V1.2.0 #331
11 Reviewed PR: Create release V1.2.1 #349, Reviewed PR: Deploy V1.2.1 #350
11 Reviewed PR: Optimise Github API calls #360
12 Submitted Issue: Reset of sort filter after some time #372
12 Merged PR: Show preset view only when repo is set #355
12 Merged PR: Fix top and bottom shadow of columns #357
12 Merged PR: Create release V1.2.2 #364, Merged PR: Deploy V1.2.2 #365
12 Merged PR: Fix reset of filters on label fetch #374
13 Merged PR: Add test cases for filters service #312
-
+
-
Week Achievements
1 Helped prepare idea & facilitated Saturday code sprint - MarkBind website making
3 Repo cleaning - Added tags to issues, added items to project road map, added summaries to issues, and cleaned up some issues. Examples: Allow markbind serve to specify custom host #2382, Optimize MarkBind for saving as PDF #2397, UG: images appear in two places #2401
4 Investigated: UG: images appear in two places #2401
4 Investigated and closed: The collapsed page nav appears in the print view #2157
4, 5 Reviewed: MarkBind Template for Software Project Documentation #2400
5 Reviewed: Migrate stylelint to latest version #2292
5 Discussed: Use justified text formatting for tooltips #2420
5, 6 Investigated and reviewed: Fix external styles and script not hoisted #2414
6 Reviewed: Add line-numbers when wrapping is needed for printing #2431
6 Investigated: Tooltip artefact left over for annotation point #2432
6 Reviewed and approved: Disable pop over in a-point if there is no header and content passed by user #2436
6 Investigated and helped fix bug: Utilize GitHub Actions to aid checking of commit message #2429
6 Helped fix bug and merged: Annotation content slot #2427
7 Reviewed and approved: Add horizontal spacing between the icon and text in the custom icon list #2375
8 Reviewed and approved: Add keeping your fork up to date section in DG #2453
8 Reviewed and approved: Add text support for icon #2444
10 Reviewed and approved: Efficient validation for intra-link with hash #2465
11 Reviewed and approved: Fix stray space before popover and tooltip #2486
12 Reviewed and approved: Fix off-positioned close button in imported modal #2487
12 Reviewed: Add note on URLs in includes #2507
13 Reviewed: Set global variables using nunjucks syntax #2474
13 Reviewed: Add Mermaid Plugin #2475
7-13 Part of weekly sync with CS3281 students
+
Week Achievements
1 Helped prepare idea & facilitated Saturday code sprint - MarkBind website making
3 Repo cleaning - Added tags to issues, added items to project road map, added summaries to issues, and cleaned up some issues. Examples: Allow markbind serve to specify custom host #2382, Optimize MarkBind for saving as PDF #2397, UG: images appear in two places #2401
4 Investigated: UG: images appear in two places #2401
4 Investigated and closed: The collapsed page nav appears in the print view #2157
4, 5 Reviewed: MarkBind Template for Software Project Documentation #2400
5 Reviewed: Migrate stylelint to latest version #2292
5 Discussed: Use justified text formatting for tooltips #2420
5, 6 Investigated and reviewed: Fix external styles and script not hoisted #2414
6 Reviewed: Add line-numbers when wrapping is needed for printing #2431
6 Investigated: Tooltip artefact left over for annotation point #2432
6 Reviewed and approved: Disable pop over in a-point if there is no header and content passed by user #2436
6 Investigated and helped fix bug: Utilize GitHub Actions to aid checking of commit message #2429
6 Helped fix bug and merged: Annotation content slot #2427
7 Reviewed and approved: Add horizontal spacing between the icon and text in the custom icon list #2375
8 Reviewed and approved: Add keeping your fork up to date section in DG #2453
8 Reviewed and approved: Add text support for icon #2444
10 Reviewed and approved: Efficient validation for intra-link with hash #2465
11 Reviewed and approved: Fix stray space before popover and tooltip #2486
12 Reviewed and approved: Fix off-positioned close button in imported modal #2487
12 Reviewed: Add note on URLs in includes #2507
13 Reviewed: Set global variables using nunjucks syntax #2474
13 Reviewed: Add Mermaid Plugin #2475
7-13 Part of weekly sync with CS3281 students
-
+
-

Project: stdlib-js

Give an intro to the project here ...

My Contributions

Give a description of your contributions, including links to relevant PRs

My Learning Record

Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

  • make
  • "Sign off and commit suggestion" (cool! allow devs to merge in code directly from )
  • very well-structured pipelines and application structure (easy to set up, clearly defint documentation, )
+

Project: stdlib-js

Give an intro to the project here ...

My Contributions

Give a description of your contributions, including links to relevant PRs

My Learning Record

Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

  • make
  • "Sign off and commit suggestion" (cool! allow devs to merge in code directly from )
  • very well-structured pipelines and application structure (easy to set up, clearly defint documentation, )
-
Week Achievements
2 Reviewed PR: [#12699] Replace ng command in setting-up.md #12701
2 Merged PR: [#12699] Replace ng command in setting-up.md #12701
5 Authored PR: [#12048] Migrate FeedbackSessionClosedRemindersAction #12738
5 Authored PR: [#12048] Migrate FeedbackSessionOpeningRemindersAction #12739
5 Authored PR: [#12048] Migrate FeedbackSessionOpeningSoonRemindersAction #12740
5 Authored PR: [#12048] Migrate feedbackSessionPublishedRemindersAction #12741
5 Authored PR: [#12048] Migrate FeedbackSessionClosingRemindersAction #12743
R In-person discussion / meeting with SQL Injection dev team (CS3282)
R Authored PR: [#12048] Migrate StudentCourseJoinConfirmationPageE2ETest #12815
R Authored PR: [#12048] Migrate account for StudentCourseDetailsPageE2ETest #12818
R Authored PR: [#12048] Move accounts JSON for InstructorStudentRecordsPageE2ETest #12822
R Authored PR: [#12048] Move accounts JSON for InstructorStudentListPageE2ETest #12830
R Authored PR: [#12048] Move accounts JSON for InstructorSessionIndividualExtensionPageE2ETest #12832
R Authored PR: [#12048] Move accounts JSON for InstructorFeedbackSessionsPageE2ETest #12834
R Authored PR (not yet merged): [#12048] SQL injection test for FeedbackQuestionsDbIT #12847
R Authored PR: [#12048] SQL Injection Test for FeedbackResponsesDb #12848
R Authored PR: [#12048] SQL Injection tests for FeedbackResponseCommentsDbIT #12853
R Reviewed PR: [#12048] Resolve merge conflicts #12776
R Reviewed PR: [#12048] SQL injection test for AccountRequestsDbIT #12788
R Reviewed PR: [#12048] Migrate instructor courses page e2e test #12789
R Reviewed PR: [#12048] migrate InstructorCourseJoinConfirmationPageE2ETest #12790
R Reviewed PR: [#12048] migrate AdminHomePageE2ETest #12794
R Reviewed PR: [#12048] Fix incorrect usage of recipient as param for E2E test #12797
R Reviewed PR: [#12048] Move accounts JSON for AdminSessionsPageE2ETest #12802
R Reviewed PR: [#12048] Move accounts JSON for AutomatedSessionRemindersE2ETest #12803
R Reviewed PR: [#12048] Move accounts JSON for FeedbackConstSumOptionQuestionE2ETest #12804
R Reviewed PR: [#12048] Move accounts JSON for FeedbackConstSumRecipientQuestionE2ETest #12805
R Reviewed PR: [#12048] migrate AdminAccountsPageE2ETest #12806
R Reviewed PR: [#12048] migrate StudentHomePageE2ETest #12807
R Reviewed PR: [#12048] Move accounts JSON for FeedbackContributionQuestionE2ETest #12808
R Reviewed PR: [#12048] Move accounts JSON for FeedbackMcqQuestionE2ETest #12809
R Reviewed PR: [#12048] Move accounts JSON for FeedbackMsqQuestionE2ETest #12810
R Reviewed PR: [#12048] Move accounts JSON for FeedbackNumScaleQuestionE2ETest #12812
R Reviewed PR: [#12048] Move accounts JSON for FeedbackRankOptionQuestionE2ETest #12813
R Reviewed PR: [#12048] Move accounts JSON for FeedbackRankRecipientQuestionE2ETest #12814
R Reviewed PR: [#12048] Move accounts JSON for FeedbackResultsPageE2ETest #12816
R Reviewed PR: [#12048] Move accounts JSON for FeedbackRubricQuestionE2ETest #12817
R Reviewed PR: [#12048] Move accounts JSON for FeedbackSubmitPageE2ETest #12819
R Reviewed PR: [#12048] Move accounts JSON for FeedbackTextQuestionE2ETest #12821
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseDetailsPageE2ETest #12823
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseEditPageE2ETest #12825
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseEnrollPageE2ETest #12827
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseStudentDetailsEditPageE2ETest #12829
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseStudentDetailsPageE2ETest #12831
R Reviewed PR: [#12048] Move accounts JSON for InstructorFeedbackReportPageE2ETest #12833
R Reviewed PR: [#12048] Fix failing component tests #12837
R Merged PR: [#12048] Move accounts JSON for AdminSessionsPageE2ETest #12802
R Merged PR: [#12048] Fix incorrect usage of recipient as param for E2E test #12797
R Online meeting with ARF dev team (both CS3281 + CS3282 students): requirements planning 1 (user stories)
7 In-person discussion / meeting with ARF dev team (both CS3281 + CS3282 students): requirements planning 2 (tech design)
7 Merged PR: [#12048] SQL injection test for AccountsDbIT #12800
7 Reviewed PR: [#12048] Add SQL injection tests in FeedbackSessionsDbIT #12857
7 Reviewed PR: [#12048] SQL injection test for AccountsDbIT #12800
7 Reviewed PR: [#12048] SQL injection test for CoursesDbIT #12801
7 Merged PR: [#12048] SQL injection test for AccountRequestsDbIT #12788
+
Week Achievements
2 Reviewed PR: [#12699] Replace ng command in setting-up.md #12701
2 Merged PR: [#12699] Replace ng command in setting-up.md #12701
5 Authored PR: [#12048] Migrate FeedbackSessionClosedRemindersAction #12738
5 Authored PR: [#12048] Migrate FeedbackSessionOpeningRemindersAction #12739
5 Authored PR: [#12048] Migrate FeedbackSessionOpeningSoonRemindersAction #12740
5 Authored PR: [#12048] Migrate feedbackSessionPublishedRemindersAction #12741
5 Authored PR: [#12048] Migrate FeedbackSessionClosingRemindersAction #12743
R In-person discussion / meeting with SQL Injection dev team (CS3282)
R Authored PR: [#12048] Migrate StudentCourseJoinConfirmationPageE2ETest #12815
R Authored PR: [#12048] Migrate account for StudentCourseDetailsPageE2ETest #12818
R Authored PR: [#12048] Move accounts JSON for InstructorStudentRecordsPageE2ETest #12822
R Authored PR: [#12048] Move accounts JSON for InstructorStudentListPageE2ETest #12830
R Authored PR: [#12048] Move accounts JSON for InstructorSessionIndividualExtensionPageE2ETest #12832
R Authored PR: [#12048] Move accounts JSON for InstructorFeedbackSessionsPageE2ETest #12834
R Authored PR (not yet merged): [#12048] SQL injection test for FeedbackQuestionsDbIT #12847
R Authored PR: [#12048] SQL Injection Test for FeedbackResponsesDb #12848
R Authored PR: [#12048] SQL Injection tests for FeedbackResponseCommentsDbIT #12853
R Reviewed PR: [#12048] Resolve merge conflicts #12776
R Reviewed PR: [#12048] SQL injection test for AccountRequestsDbIT #12788
R Reviewed PR: [#12048] Migrate instructor courses page e2e test #12789
R Reviewed PR: [#12048] migrate InstructorCourseJoinConfirmationPageE2ETest #12790
R Reviewed PR: [#12048] migrate AdminHomePageE2ETest #12794
R Reviewed PR: [#12048] Fix incorrect usage of recipient as param for E2E test #12797
R Reviewed PR: [#12048] Move accounts JSON for AdminSessionsPageE2ETest #12802
R Reviewed PR: [#12048] Move accounts JSON for AutomatedSessionRemindersE2ETest #12803
R Reviewed PR: [#12048] Move accounts JSON for FeedbackConstSumOptionQuestionE2ETest #12804
R Reviewed PR: [#12048] Move accounts JSON for FeedbackConstSumRecipientQuestionE2ETest #12805
R Reviewed PR: [#12048] migrate AdminAccountsPageE2ETest #12806
R Reviewed PR: [#12048] migrate StudentHomePageE2ETest #12807
R Reviewed PR: [#12048] Move accounts JSON for FeedbackContributionQuestionE2ETest #12808
R Reviewed PR: [#12048] Move accounts JSON for FeedbackMcqQuestionE2ETest #12809
R Reviewed PR: [#12048] Move accounts JSON for FeedbackMsqQuestionE2ETest #12810
R Reviewed PR: [#12048] Move accounts JSON for FeedbackNumScaleQuestionE2ETest #12812
R Reviewed PR: [#12048] Move accounts JSON for FeedbackRankOptionQuestionE2ETest #12813
R Reviewed PR: [#12048] Move accounts JSON for FeedbackRankRecipientQuestionE2ETest #12814
R Reviewed PR: [#12048] Move accounts JSON for FeedbackResultsPageE2ETest #12816
R Reviewed PR: [#12048] Move accounts JSON for FeedbackRubricQuestionE2ETest #12817
R Reviewed PR: [#12048] Move accounts JSON for FeedbackSubmitPageE2ETest #12819
R Reviewed PR: [#12048] Move accounts JSON for FeedbackTextQuestionE2ETest #12821
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseDetailsPageE2ETest #12823
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseEditPageE2ETest #12825
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseEnrollPageE2ETest #12827
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseStudentDetailsEditPageE2ETest #12829
R Reviewed PR: [#12048] Move accounts JSON for InstructorCourseStudentDetailsPageE2ETest #12831
R Reviewed PR: [#12048] Move accounts JSON for InstructorFeedbackReportPageE2ETest #12833
R Reviewed PR: [#12048] Fix failing component tests #12837
R Merged PR: [#12048] Move accounts JSON for AdminSessionsPageE2ETest #12802
R Merged PR: [#12048] Fix incorrect usage of recipient as param for E2E test #12797
R Online meeting with ARF dev team (both CS3281 + CS3282 students): requirements planning 1 (user stories)
7 In-person discussion / meeting with ARF dev team (both CS3281 + CS3282 students): requirements planning 2 (tech design)
7 Merged PR: [#12048] SQL injection test for AccountsDbIT #12800
7 Reviewed PR: [#12048] Add SQL injection tests in FeedbackSessionsDbIT #12857
7 Reviewed PR: [#12048] SQL injection test for AccountsDbIT #12800
7 Reviewed PR: [#12048] SQL injection test for CoursesDbIT #12801
7 Merged PR: [#12048] SQL injection test for AccountRequestsDbIT #12788
-
+
-

Project: Litestar

Litestar is a powerful, flexible yet opinionated ASGI framework, focused on building APIs, and offers high-performance data validation and parsing, dependency injection, first-class ORM integration, authorization primitives, and much more that's needed to get applications up and running.

My Contributions

  1. Add reload-include and reload-exclude from uvicorn to CLI
  2. Fixing documentation bug
  3. Helped investigate a logging issue

My Learning Record

  1. Project outreach

Litestar's project outreach is one of the best that I've seen in any project. They are transparent about progress, and reach out to both users and contributers to encourage usage and contributions. Because Litestar is an ASGI framework that manages the majority of an application, it requires a large amount of effort and trust by users into the project.

For example, they regularly post updates on the Python subreddit on major milestone and releases. Furthermore, they hold regular office hours live, and recordings are also posted on YouTube. Furthermore, they maintain a very large pool of "Good First Issues" for contributers to start on. As of writing, they have 20 such issues open.

  1. Project management

Because Litestar is relatively new status compared to the very popular FastAPI, the maintainers have sought to prove the project's sustainability to their users.

For example, in the past few years, one of the goals were to increase bus size, to a minimum of 5. They've since achieved this, and their project has been stronger than ever. This is in contrast to FastAPI, which infamously has only a single maintainer, who refuses to take on more maintainers or accept PRs.

+

Project: Litestar

Litestar is a powerful, flexible yet opinionated ASGI framework, focused on building APIs, and offers high-performance data validation and parsing, dependency injection, first-class ORM integration, authorization primitives, and much more that's needed to get applications up and running.

My Contributions

  1. Add reload-include and reload-exclude from uvicorn to CLI
  2. Fixing documentation bug
  3. Helped investigate a logging issue

My Learning Record

  1. Project outreach

Litestar's project outreach is one of the best that I've seen in any project. They are transparent about progress, and reach out to both users and contributers to encourage usage and contributions. Because Litestar is an ASGI framework that manages the majority of an application, it requires a large amount of effort and trust by users into the project.

For example, they regularly post updates on the Python subreddit on major milestone and releases. Furthermore, they hold regular office hours live, and recordings are also posted on YouTube. Furthermore, they maintain a very large pool of "Good First Issues" for contributers to start on. As of writing, they have 20 such issues open.

  1. Project management

Because Litestar is relatively new status compared to the very popular FastAPI, the maintainers have sought to prove the project's sustainability to their users.

For example, in the past few years, one of the goals were to increase bus size, to a minimum of 5. They've since achieved this, and their project has been stronger than ever. This is in contrast to FastAPI, which infamously has only a single maintainer, who refuses to take on more maintainers or accept PRs.

-
Week Achievements
Before Reviewed PR (merged): [#9976] Instructor copying course: Progress bar does not load when no feedback sessions are copied
Before Reviewed PR (merged): [#11639] Create DateTime service and replace time-related magic numbers
Before Reviewed PR (merged): [#11911] Instructor copying course: Progress bar does not load when no feedback sessions are copied
2 - 3 Authored PR (merged): [#12048] Migrate SubmitFeedbackResponseAction's Logic and Db methods
2 - 3 Reviewed PR (merged): [#12048] Migrate GetCourseJoinStatusAction
2 - 3 Authored PR (merged): [#12048] Migrate SubmitFeedbackResponseAction
2 - 3 Authored PR (In Progress): [#12048] Migrate OPTIMIZED_SAVING_POLICY_APPLIED for updateFeedbackResponseComment
2 - 3 Authored PR (In Progress): [#12048] Migrate SubmitFeedbackResponseAction's tests
4 - 5 Authored PR (merged): [#12048] Add DataMigrationEntitiesBaseScriptSql and DataMigrationForAccountSql
4 - 5 Authored PR (merged): [#12048] Add verify to seed db
5 - 6 Reviewed PR (merged): [#12048] Create script to verify row count for non-course entities
5 - 6 Reviewed PR (merged): [#12048] Add checks to notification script
5 - 6 Authored PR (merged): [#12048] Improve base script for verifying migrated attributes
7 Authored PR (merged): [#12048] Improve seeding and migration for non course entities
7 Authored PR (merged): [#12048] V9 Migration: Fix verification pagination, improve logging
7 Reviewed PR (merged): [#12048] Fix seeding for notification
7 Reviewed PR (merged): [#12048] Fix seeding of data for data migration
8 Reviewed PR (merged): [#12048] Add verification migration script
8 Authored PR (merged): [#12048] V9 migration and verification script optimization
8 Reviewed PR (merged): [#12048] V9 migration verification script optimisation - fetch ReadNotifications for account comparison
8 Reviewed PR (merged): [#11843] Create FeedbackSessionLog entity and cron job action
9 Authored PR (merged): [#12048] Add SQL configuration into build.properties and build-dev.properties
9 Authored PR (merged): [#12048] Add SQL description for postgres config
9 Reviewed PR (merged): [#12048] add delay to task queuer for indexing account request
9 Reviewed PR (merged): [#12048] Relax read notif verification for migration verification script
10 Authored PR (merged): [#12048] Config prod settings and convenience scripts for non course migration
10 Reviewed PR (merged): [#11843] Create Logic and Db layer for FeedbackSessionLogs
10 Reviewed PR (merged): [#12048] Rerunnable Account Request Migration Script
10 Reviewed PR (merged): [#12048] Add reverse data migration script for account
11 Authored PR (merged): [#12048] V9 non course migration for accounts not migrating
11 Authored PR (merged): [#12048] V9 non course migration fix to check extra SQL accounts
11 Authored PR (merged): [#12048] Configure connection pool using hikari
11 Reviewed PR (merged): [#12048] configure agroal connection pool
11 Reviewed PR (merged): [#12048] Fix account request indexing
11 Reviewed PR (merged): Add patch data migration script for usage stats
12 Reviewed PR (merged): [#12048] Data migration for feedback session entities
12 Reviewed PR (merged): [#12048] Data migration for section entities
12 Reviewed PR (merged): [#12048] Remove feedbackSession attributes @fetch annotation
13 Reviewed PR (merged): [#11843] Update front end for session activity logs
+
Week Achievements
Before Reviewed PR (merged): [#9976] Instructor copying course: Progress bar does not load when no feedback sessions are copied
Before Reviewed PR (merged): [#11639] Create DateTime service and replace time-related magic numbers
Before Reviewed PR (merged): [#11911] Instructor copying course: Progress bar does not load when no feedback sessions are copied
2 - 3 Authored PR (merged): [#12048] Migrate SubmitFeedbackResponseAction's Logic and Db methods
2 - 3 Reviewed PR (merged): [#12048] Migrate GetCourseJoinStatusAction
2 - 3 Authored PR (merged): [#12048] Migrate SubmitFeedbackResponseAction
2 - 3 Authored PR (In Progress): [#12048] Migrate OPTIMIZED_SAVING_POLICY_APPLIED for updateFeedbackResponseComment
2 - 3 Authored PR (In Progress): [#12048] Migrate SubmitFeedbackResponseAction's tests
4 - 5 Authored PR (merged): [#12048] Add DataMigrationEntitiesBaseScriptSql and DataMigrationForAccountSql
4 - 5 Authored PR (merged): [#12048] Add verify to seed db
5 - 6 Reviewed PR (merged): [#12048] Create script to verify row count for non-course entities
5 - 6 Reviewed PR (merged): [#12048] Add checks to notification script
5 - 6 Authored PR (merged): [#12048] Improve base script for verifying migrated attributes
7 Authored PR (merged): [#12048] Improve seeding and migration for non course entities
7 Authored PR (merged): [#12048] V9 Migration: Fix verification pagination, improve logging
7 Reviewed PR (merged): [#12048] Fix seeding for notification
7 Reviewed PR (merged): [#12048] Fix seeding of data for data migration
8 Reviewed PR (merged): [#12048] Add verification migration script
8 Authored PR (merged): [#12048] V9 migration and verification script optimization
8 Reviewed PR (merged): [#12048] V9 migration verification script optimisation - fetch ReadNotifications for account comparison
8 Reviewed PR (merged): [#11843] Create FeedbackSessionLog entity and cron job action
9 Authored PR (merged): [#12048] Add SQL configuration into build.properties and build-dev.properties
9 Authored PR (merged): [#12048] Add SQL description for postgres config
9 Reviewed PR (merged): [#12048] add delay to task queuer for indexing account request
9 Reviewed PR (merged): [#12048] Relax read notif verification for migration verification script
10 Authored PR (merged): [#12048] Config prod settings and convenience scripts for non course migration
10 Reviewed PR (merged): [#11843] Create Logic and Db layer for FeedbackSessionLogs
10 Reviewed PR (merged): [#12048] Rerunnable Account Request Migration Script
10 Reviewed PR (merged): [#12048] Add reverse data migration script for account
11 Authored PR (merged): [#12048] V9 non course migration for accounts not migrating
11 Authored PR (merged): [#12048] V9 non course migration fix to check extra SQL accounts
11 Authored PR (merged): [#12048] Configure connection pool using hikari
11 Reviewed PR (merged): [#12048] configure agroal connection pool
11 Reviewed PR (merged): [#12048] Fix account request indexing
11 Reviewed PR (merged): Add patch data migration script for usage stats
12 Reviewed PR (merged): [#12048] Data migration for feedback session entities
12 Reviewed PR (merged): [#12048] Data migration for section entities
12 Reviewed PR (merged): [#12048] Remove feedbackSession attributes @fetch annotation
13 Reviewed PR (merged): [#11843] Update front end for session activity logs
-
+
-

MarkBind

Week Achievements
2 Authored PR: MarkBind Template for Software Project Documentation#2400
4 Authored PR: Enhance search performance of algolia plugin #2406
5 Merged PR: Enhance search performance of algolia plugin #2406
6 Authored PR: Utilize GitHub Actions to aid checking of commit message #2429
6 Merged PR: Utilize GitHub Actions to aid checking of commit message #2429
6 Authored PR: Upgrade simple-git version #2439
6 Merged PR: Upgrade simple-git version #2439
6 Authored PR: UG > PagNav: Misleading sentence #2440
7 Merged PR: UG > PagNav: Misleading sentence #2440
7 Submitted Issue: Fancylists to package MarkBind's current and future list features #2458
8 Authored PR: Customizing list icons: give a way to apply to current item only #2454
8 Submitted Issue: Utilize GitHub Actions to check for SEMVER impact label #2464
8 Authored PR: Utilize GitHub Actions to check for SEMVER impact label #2464
8 Researched Issue: Bootstrap migration tracker #2359
9 Reviewed PR: MarkBind Template for Student Portfolio #2398
9 Researched Issue: [Feature request] Tag (keywortd) support #2187
10 Researched Issue: Utilize GitHub Actions to check for SEMVER impact label #2464
10 Merged PR: Utilize GitHub Actions to check for SEMVER impact label #2464
10 Submitted Issue: Reusable workflow repo for all repos under organisation #2479
10 Merged PR: MarkBind Template for Software Project Documentation#2400
10 Authored PR: Add a reminder when contributor is new to ping all contributor bot #2484
11 Submitted Issue: Improve security of GitHub Actions workflows #2488
11 Researched Issue: Improve security of GitHub Actions workflows #2488
11 Researched Issue: Explore using Bun for testing and setup #2448
11 Merged PR: Customizing list icons: give a way to apply to current item only #2454
11 Researched Issue: Utilize GitHub Action to aid PR review #2140
12 Authored PR: Improve security of GitHub Actions workflows #2510
12 Authored PR: UG: images appear in two places #2514
12 Merged PR: Add a reminder when contributor is new to ping all contributor bot #2484
12 Merged PR: Improve security of GitHub Actions workflows #2510
12 Researched Issue: Add github action to automatically unassign issues after a certain period of inactivity #2495
12 Merged PR: UG: images appear in two places #2514
13 Authored PR: Fix workflow file deploy-docs #2521
13 Merged PR: Fix workflow file deploy-docs #2521
13 Researched Issue: Add github action to automatically unassign issues after a certain period of inactivity #2495
13 Authored PR: Using DangerJS to check changes coupling of implementation files to test or documentation files #2523
13 Submitted Issue: Add documentation for workflow security for GitHub Actions #2527
13 Authored PR: Add documentation regarding security practices for github actions #2528
13 Merged PR: Using DangerJS to check changes coupling of implementation files to test or documentation files #2523
13 Merged PR: Add documentation regarding security practices for github actions #2528
+

MarkBind

Week Achievements
2 Authored PR: MarkBind Template for Software Project Documentation#2400
4 Authored PR: Enhance search performance of algolia plugin #2406
5 Merged PR: Enhance search performance of algolia plugin #2406
6 Authored PR: Utilize GitHub Actions to aid checking of commit message #2429
6 Merged PR: Utilize GitHub Actions to aid checking of commit message #2429
6 Authored PR: Upgrade simple-git version #2439
6 Merged PR: Upgrade simple-git version #2439
6 Authored PR: UG > PagNav: Misleading sentence #2440
7 Merged PR: UG > PagNav: Misleading sentence #2440
7 Submitted Issue: Fancylists to package MarkBind's current and future list features #2458
8 Authored PR: Customizing list icons: give a way to apply to current item only #2454
8 Submitted Issue: Utilize GitHub Actions to check for SEMVER impact label #2464
8 Authored PR: Utilize GitHub Actions to check for SEMVER impact label #2464
8 Researched Issue: Bootstrap migration tracker #2359
9 Reviewed PR: MarkBind Template for Student Portfolio #2398
9 Researched Issue: [Feature request] Tag (keywortd) support #2187
10 Researched Issue: Utilize GitHub Actions to check for SEMVER impact label #2464
10 Merged PR: Utilize GitHub Actions to check for SEMVER impact label #2464
10 Submitted Issue: Reusable workflow repo for all repos under organisation #2479
10 Merged PR: MarkBind Template for Software Project Documentation#2400
10 Authored PR: Add a reminder when contributor is new to ping all contributor bot #2484
11 Submitted Issue: Improve security of GitHub Actions workflows #2488
11 Researched Issue: Improve security of GitHub Actions workflows #2488
11 Researched Issue: Explore using Bun for testing and setup #2448
11 Merged PR: Customizing list icons: give a way to apply to current item only #2454
11 Researched Issue: Utilize GitHub Action to aid PR review #2140
12 Authored PR: Improve security of GitHub Actions workflows #2510
12 Authored PR: UG: images appear in two places #2514
12 Merged PR: Add a reminder when contributor is new to ping all contributor bot #2484
12 Merged PR: Improve security of GitHub Actions workflows #2510
12 Researched Issue: Add github action to automatically unassign issues after a certain period of inactivity #2495
12 Merged PR: UG: images appear in two places #2514
13 Authored PR: Fix workflow file deploy-docs #2521
13 Merged PR: Fix workflow file deploy-docs #2521
13 Researched Issue: Add github action to automatically unassign issues after a certain period of inactivity #2495
13 Authored PR: Using DangerJS to check changes coupling of implementation files to test or documentation files #2523
13 Submitted Issue: Add documentation for workflow security for GitHub Actions #2527
13 Authored PR: Add documentation regarding security practices for github actions #2528
13 Merged PR: Using DangerJS to check changes coupling of implementation files to test or documentation files #2523
13 Merged PR: Add documentation regarding security practices for github actions #2528
-
+
-

Node Package Manager (npm)

A default package manager for Node.js.

  1. npm simplifies the process of installing, updating, and managing external libraries or modules in a Node.js project.
  2. npm allows developers to define and run scripts in their project's package.json file, automating common development tasks.

Aspects learnt:

  1. npm CLI - A powerful tool to interact with npm. Learnt the usages of the basic commands like npm install, npm update, npm run <scripts> etc. and how they helped streamline the development process.
  2. package.json - Learnt how to interpret different parts of the json file eg. "scripts", "dependencies" and how to manage them.

Resources:

  1. npm Docs - Documentation for the npm registry, website, and command-line interface

Stylelint

A CSS linter that helps enforce conventions and avoid errors.

  1. Stylelint has over 100 built-in rules for modern CSS syntax and features, but it is customisable and supports plugins/configs.
  2. It can fix problems automatically where possible.
  3. It can extract embedded styles from HTML, Markdown and CSS-in-JS template literals.
  4. It can also parse CSS-like languages like SCSS, Sass, Less and SugarSS.

Aspects learnt:

  1. Configuring the linter using the stylelintrc.js file, a configuration object for Stylelint to suit our own needs.
  2. Integrating Stylelint into our project.

Resources:

  1. Stylelint offical Docs

Commander.js

A JavaScript library that provides a framework for building command-line interfaces (CLIs) in Node.js applications

Aspects learnt:

  1. Define commands, options, and arguments using Commander.js for Markbind.

Resources:

  1. Commander.js README

Github Actions

A CI/CD platform allowing developers to automate workflows directly within their GitHub repository.

  1. It supports customised workflows using YAML files to automate tasks such as building, testing, and deploying code.

Aspects learnt:

  1. Understanding how Github Actions works in a specific repository.
  2. Interpreting .yml files in .github/workflow.
+

Node Package Manager (npm)

A default package manager for Node.js.

  1. npm simplifies the process of installing, updating, and managing external libraries or modules in a Node.js project.
  2. npm allows developers to define and run scripts in their project's package.json file, automating common development tasks.

Aspects learnt:

  1. npm CLI - A powerful tool to interact with npm. Learnt the usages of the basic commands like npm install, npm update, npm run <scripts> etc. and how they helped streamline the development process.
  2. package.json - Learnt how to interpret different parts of the json file eg. "scripts", "dependencies" and how to manage them.

Resources:

  1. npm Docs - Documentation for the npm registry, website, and command-line interface

Stylelint

A CSS linter that helps enforce conventions and avoid errors.

  1. Stylelint has over 100 built-in rules for modern CSS syntax and features, but it is customisable and supports plugins/configs.
  2. It can fix problems automatically where possible.
  3. It can extract embedded styles from HTML, Markdown and CSS-in-JS template literals.
  4. It can also parse CSS-like languages like SCSS, Sass, Less and SugarSS.

Aspects learnt:

  1. Configuring the linter using the stylelintrc.js file, a configuration object for Stylelint to suit our own needs.
  2. Integrating Stylelint into our project.

Resources:

  1. Stylelint offical Docs

Commander.js

A JavaScript library that provides a framework for building command-line interfaces (CLIs) in Node.js applications

Aspects learnt:

  1. Define commands, options, and arguments using Commander.js for Markbind.

Resources:

  1. Commander.js README

Github Actions

A CI/CD platform allowing developers to automate workflows directly within their GitHub repository.

  1. It supports customised workflows using YAML files to automate tasks such as building, testing, and deploying code.

Aspects learnt:

  1. Understanding how Github Actions works in a specific repository.
  2. Interpreting .yml files in .github/workflow.
-
Week Progress
2 Created PR: #2395 Allow markbind serve to specify custom host #2382
4 Created PR: #2425 Migrate stylelint to latest version #2292
5 Merged PR: #2395 Allow markbind serve to specify custom host #2382
6 Merged PR: #2425 Migrate stylelint to latest version #2292
+
Week Progress
2 Created PR: #2395 Allow markbind serve to specify custom host #2382
4 Created PR: #2425 Migrate stylelint to latest version #2292
5 Merged PR: #2395 Allow markbind serve to specify custom host #2382
6 Merged PR: #2425 Migrate stylelint to latest version #2292
-
+
-
+

DevOps

Gradle

Gradle is a build tool designed specifically to meet the requirements of building Java applications. Once it’s set up, building an application is as simple as running a single command on the command line. Gradle performs well and is also useful for managing dependencies via its advanced dependency management system.

Learned about Gradle through a really helpful tutorial.

Bash and Batch Scripting

I learned how to write basic bash scripts via tutorialspoint, and had to implement batch scripts to perform environmental checks for all files tracked by git, to ensure they end with a newline, no prohibited line endings (\r\n) are present and no trailing whitespaces are present.

Some interesting bugs were encountered when attempting to use pipes in batch files, particularly one that prevents delayed expansion of variables from being properly evaluated as per usual. This is due to variables not being evaluated in the batch context, as the lines are executed only in the cmd-line context. A more detailed analysis of the bug is done by a user of stackoverflow.

Codecov

As I explored Codecov to determine why it would intermittently fail for GitHub actions, I developed a greater appreciation for the role of code coverage analysis in ensuring software quality. I found its integration with popular CI/CD platforms to be seamless, making it easier to track and improve code coverage across projects. The visualization tools, such as the sunburst graph and diff coverage reports, were especially helpful in identifying areas that needed more testing attention. Furthermore, learning about Codecov's ability to enforce coverage thresholds and generate pull request comments reinforced the importance of maintaining high-quality test suites.

Frontend

Vue

Vue is a progressive JavaScript framework that simplifies the creation of responsive and efficient web applications. Its reactive data-binding and component-based architecture promote modular programming, resulting in more maintainable and scalable code. Learning about Vue's component-based architecture also expanded my understanding of modular programming and how it can lead to more maintainable and scalable code.

Pug

Pug is a templating engine that integrates well with Vue, allowing for cleaner and more concise HTML code with the use of whitespace and indentation for structure. By removing the need for closing tags, Pug attempts to make code more readable and organized. Its support for variables, mixins, and inheritance facilitates code reusability and modular design, improving the overall structure and readability of templates.

Cypress

Cypress is an end-to-end testing framework that simplifies the process of writing and executing tests for web applications. Its intuitive syntax, real-time reloading, and support for network stubbing improve debugging and development efficiency, emphasizing thorough testing. I found its syntax and API to be intuitive and user-friendly, making the process of writing and executing tests more enjoyable. I was particularly impressed with the real-time reloading feature, which allows for faster debugging and development, simplifying E2E testing.

Backend

Bloch’s Builder Pattern

Bloch’s Builder pattern is a design pattern that simplifies object instantiation in Java, particularly for classes with numerous constructor parameters, as it simplifies the process of object instantiation while maintaining immutability and improving readability. This was a particularly useful design pattern when refactoring the CliArguments.java class, as it had a large number of constructor parameters, and also required flexible construction as some of the fields were optional. The pattern facilitates immutability and reduces the risk of introducing errors in complex Java classes. Read more about here on Oracle's blog.

Polymorphism

Polymorphism is a core object-oriented programming concept in Java that allows objects to adopt multiple forms and behaviors based on their context. It promotes code cleanliness, extensibility, and reduces coupling between components, resulting in more flexible and modular applications that can evolve and scale easily. By leveraging polymorphism, I was able to reduce the amount of logic in the main method of RepoSense.java, by utilizing RunConfigurationDecider to return the appropriate RunConfiguration based on the CliArguments, where the config can be from getRepoConfigurations().

Discrete Event Simulator (DES)

Discrete event simulator (DES) is a method used to model real-world systems that can be decomposed into a set of logically separate processes that autonomously progress through time. This was a design that was well suited for designing a CLI Wizard, as it allows for maintaining of a deque of prompts that to be shown to the user, while also allowing the addition of new prompts into the deque depending on the user's responses.

Misc

Git Commmands/Functionalities

In RepoSense, a variety of git commands are utilized to get information about the repository. Through undertaking DevOps tasks, I was also exposed to other interesting git commands. Here are some of the interesting ones that I was not aware of before.

git shortlog - Summarizes git log output, where each commit will be grouped by author and title. This is used in RepoSense to easily count the commits by the users.

git grep - A powerful tool that looks for specified patterns in the tracked files in the work tree, blobs registered in the index file, or blobs in given tree objects. Patterns are lists of one or more search expressions separated by newline characters. An empty string as search expression matches all lines. Utilized to write Reposense scripts to perform environmental checks for all files tracked by git, to ensure they end with a newline, no prohibited line endings (\r\n) are present and no trailing whitespaces are present. Used git docs to learn how to use git grep properly and what its various flags do.

.mailmap - If the file .mailmap exists at the top-level of the repository, it can be used to map author and committer names and email addresses to canonical real names and email addresses. This is useful to map multiple authors and commenters and provides a way to share the mapping with all other users of the repository. Used git docs to learn how to configure git mailmap properly.

URL Shortening

Researched interesting solutions for free URL shortening, looking into 3 main ways to do it. Read about an in-depth writeup in the -Github issue here.

+Github issue here.

-

Project: Supabase

Overview

Supabase is a prominent open-source alternative to Firebase, aiming to replicate Firebase's features using enterprise-grade open-source tools. It offers a robust platform for developers to build scalable and reliable applications with ease.

Supabase Auth, part of the Supabase ecosystem, is a user management and authentication server written in Go. It facilitates key functionalities such as JWT issuance, Row Level Security with PostgREST, comprehensive user management, and a variety of authentication methods including email/password, magic links, phone numbers, and external providers like Google, Apple, Facebook, and Discord. Originating from Netlify's Auth codebase, it has since evolved significantly in terms of features and capabilities.

My Contributions

Below is a summary of my contributions to Supabase, on both Supabase/supabase and Supabase/gotrue (to be renamed to supabase/auth):

My Learning Record

Through my contributions to Supabase, I've gained significant insights and knowledge:

  • Go Programming: Deepened understanding of Go, navigating and contributing to a sizable codebase.
  • Authentication Flows: Explored and learned various authentication mechanisms and flows.
  • Docker Usage: Enhanced skills in utilizing Docker for development and deployment purposes.

Reflections on Contributing to Supabase

  • Contributing Guide: The Supabase Contributing Guide was instrumental in familiarizing myself with the contribution process.
  • Responsive Community: The responsiveness of the developer community greatly facilitated the contribution experience, as it made discussions for the PR easier
  • Issue Management: My experience on Supabase emphasized the importance of maintaining issues, particularly for first time issues. There weren't many first time issues, and for some of them, they were no longer required even though they were still open. This resulted in wasted work on a no longer relevant issue.
  • First-Come, First-Served Approach: Supabase chose to have a first come first served approach to issue assignment, which avoids the pitfall of issue hoarding or being occuipied by an inactive contributer, by being open to public contribution without explicit assignment.

Suggestions for Improvement

While my experience contributing to Supabase was largely positive, I identified areas for enhancement:

  • Issue Management: There's a need for more active management of issues, especially those labeled for beginners, to prevent contributors from spending time on outdated or resolved issues.

Applying Supabase Practices to NUS-OSS Projects

From my engagement with Supabase, I've identified practices that could benefit NUS-OSS projects, particularly the use of Docker for simplifying project setup and ensuring consistency across development environments. This helped save alot of time by avoiding complicated manual setups, and allowed me to focus on resolving the issues.

+

Project: Supabase

Overview

Supabase is a prominent open-source alternative to Firebase, aiming to replicate Firebase's features using enterprise-grade open-source tools. It offers a robust platform for developers to build scalable and reliable applications with ease.

Supabase Auth, part of the Supabase ecosystem, is a user management and authentication server written in Go. It facilitates key functionalities such as JWT issuance, Row Level Security with PostgREST, comprehensive user management, and a variety of authentication methods including email/password, magic links, phone numbers, and external providers like Google, Apple, Facebook, and Discord. Originating from Netlify's Auth codebase, it has since evolved significantly in terms of features and capabilities.

My Contributions

Below is a summary of my contributions to Supabase, on both Supabase/supabase and Supabase/gotrue (to be renamed to supabase/auth):

My Learning Record

Through my contributions to Supabase, I've gained significant insights and knowledge:

  • Go Programming: Deepened understanding of Go, navigating and contributing to a sizable codebase.
  • Authentication Flows: Explored and learned various authentication mechanisms and flows.
  • Docker Usage: Enhanced skills in utilizing Docker for development and deployment purposes.

Reflections on Contributing to Supabase

  • Contributing Guide: The Supabase Contributing Guide was instrumental in familiarizing myself with the contribution process.
  • Responsive Community: The responsiveness of the developer community greatly facilitated the contribution experience, as it made discussions for the PR easier
  • Issue Management: My experience on Supabase emphasized the importance of maintaining issues, particularly for first time issues. There weren't many first time issues, and for some of them, they were no longer required even though they were still open. This resulted in wasted work on a no longer relevant issue.
  • First-Come, First-Served Approach: Supabase chose to have a first come first served approach to issue assignment, which avoids the pitfall of issue hoarding or being occuipied by an inactive contributer, by being open to public contribution without explicit assignment.

Suggestions for Improvement

While my experience contributing to Supabase was largely positive, I identified areas for enhancement:

  • Issue Management: There's a need for more active management of issues, especially those labeled for beginners, to prevent contributors from spending time on outdated or resolved issues.

Applying Supabase Practices to NUS-OSS Projects

From my engagement with Supabase, I've identified practices that could benefit NUS-OSS projects, particularly the use of Docker for simplifying project setup and ensuring consistency across development environments. This helped save alot of time by avoiding complicated manual setups, and allowed me to focus on resolving the issues.

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

Summary

  • Fix Bugs: Fix uncaught error for invalid link navigation in CATcher and some minor bugs found in WATcher preset view feature.
  • Testing Aspect: Refactored outdated test cases in WATcher and enable automated testing in pre-push hooks and GitHub Actions.
  • New Feature: Implemented an extensible group by feature for WATcher's Issue Viewer. Currently, it supports grouping by assignee and milestone.
  • User Experience: Improved WATcher's Activity Dashboard design. Implemented a dropdown menu for easier repo change in WATcher's Issue Viewer.
  • Managing: Deployed CATcher V1.2.0 in week 10.
Week Achievements
3 Merged PR: Uncaught error when invalid link is clicked #1239
4 Merged PR: Improve activity dashboard design #233
4 Merged PR: Refactor test cases for Login Component, Session Model and Conflict Model #241
4 Merged PR: Remove markdown.css from test env stylesheets #243
4 Merged PR: Refactor test cases for issue paginator #244
4 Merged PR: Refactor test cases for issue sorter #245
4 Merged PR: Refactor github label constants #246
4 Merged PR: Refactor test cases for search filter #247
6 Reviewed PR: Refactor certain filters into its own service #259
6 Merged PR: Remove test cases for permissions service #260
6 Submitted issue: Improve E2E testing #1251
7 Merged PR: Refactor test cases for Issue Model #257
7 Merged PR: Refactor test cases for Label Service #258
7 Merged PR: Remove constants for DataFile and Team model #262
7 Merged PR: Refactor test cases for Phase Service #263
7 Submitted issue: Encounter error for npm run test after upgrading to Angular v11 #268
7 Merged PR: Fix zone testing import error #269
7 Merged PR: Refactor test cases for issue sorter #270
7 Merged PR: Refactor test cases for user service #271
7 Merged PR: Refactor test cases for label filter bar component #274
7 Merged PR: Update test cases for phase service #275
7 Merged PR: Enable pre push hook for npm run test #288
8 Reviewed PR: Create tests for ErrorMessage, ErrorHandling and Milestone services #290
8 Reviewed PR: Create tests for Milestone service #303
9 Submitted issue: GroupBy Feature #306
9 Reviewed PR: Keep filters when switching repos #281
9 Reviewed PR: Add tool tip for hidden users #307
9 Merged PR: Refactor Phase Service and remove Phase #291
9 Merged PR: Setup grouping strategy and service #308
10 Reviewed PR: Keep milestones when switching repo #311
10 Merged PR: Integrate Grouping Service #313
10 Submitted issue: Encode grouping to url #317
10 Reviewed PR: Add preset views #320
10 Merged PR: Implement group by milestone #316
10 Submitted issue: Update IssueViewer's Repo on Back/Forward Navigation #321
10 Merged PR: Include groupby params in url #319
10 Merged PR: Update repo on back and forward navigation #322
10 Merged PR: Refactor MilestoneGroupingStrategy to match the changes in #315 #323
10 Merged PR: Reset GroupingContextService only if "keep filter" is selected #324
10 Reviewed PR: Fix for no milestone case #326
10 Reviewed PR: Add filters to url #314
10 Merged PR: Enable npm run test in GitHub Action #325
10 Merged PR: Deploy V1.2.0 #331
11 Reviewed PR: Fix default preset view #334
11 Reviewed PR: Fix preset view selection appearance #338
11 Submitted issue: Provide preset value for groupby #341
11 Submitted issue: Add filter for assignee #342
11 Merged PR: Show prs without milestone #339
11 Merged PR: Implement dropdown menu for repo change #347
11 Reviewed PR: Remove quotation marks from url #345
11 Reviewed PR: Hide column issue count #346
11 Reviewed PR: Show preset view only when repo is set #355
11 Reviewed PR: Fix top shadow hiding of columns #356
11 Reviewed PR: Fix bottom shadow of columns #357
12 Submitted issue: Milestone without deadline is not considered as currently active #358
12 Reviewed PR: Fix top and bottom shadow of columns #357
12 Reviewed PR: Optimise Github API calls #360
12 Merged PR: Consider open milestone without deadline as currently active #359
+

Summary

  • Fix Bugs: Fix uncaught error for invalid link navigation in CATcher and some minor bugs found in WATcher preset view feature.
  • Testing Aspect: Refactored outdated test cases in WATcher and enable automated testing in pre-push hooks and GitHub Actions.
  • New Feature: Implemented an extensible group by feature for WATcher's Issue Viewer. Currently, it supports grouping by assignee and milestone.
  • User Experience: Improved WATcher's Activity Dashboard design. Implemented a dropdown menu for easier repo change in WATcher's Issue Viewer.
  • Managing: Deployed CATcher V1.2.0 in week 10.
Week Achievements
3 Merged PR: Uncaught error when invalid link is clicked #1239
4 Merged PR: Improve activity dashboard design #233
4 Merged PR: Refactor test cases for Login Component, Session Model and Conflict Model #241
4 Merged PR: Remove markdown.css from test env stylesheets #243
4 Merged PR: Refactor test cases for issue paginator #244
4 Merged PR: Refactor test cases for issue sorter #245
4 Merged PR: Refactor github label constants #246
4 Merged PR: Refactor test cases for search filter #247
6 Reviewed PR: Refactor certain filters into its own service #259
6 Merged PR: Remove test cases for permissions service #260
6 Submitted issue: Improve E2E testing #1251
7 Merged PR: Refactor test cases for Issue Model #257
7 Merged PR: Refactor test cases for Label Service #258
7 Merged PR: Remove constants for DataFile and Team model #262
7 Merged PR: Refactor test cases for Phase Service #263
7 Submitted issue: Encounter error for npm run test after upgrading to Angular v11 #268
7 Merged PR: Fix zone testing import error #269
7 Merged PR: Refactor test cases for issue sorter #270
7 Merged PR: Refactor test cases for user service #271
7 Merged PR: Refactor test cases for label filter bar component #274
7 Merged PR: Update test cases for phase service #275
7 Merged PR: Enable pre push hook for npm run test #288
8 Reviewed PR: Create tests for ErrorMessage, ErrorHandling and Milestone services #290
8 Reviewed PR: Create tests for Milestone service #303
9 Submitted issue: GroupBy Feature #306
9 Reviewed PR: Keep filters when switching repos #281
9 Reviewed PR: Add tool tip for hidden users #307
9 Merged PR: Refactor Phase Service and remove Phase #291
9 Merged PR: Setup grouping strategy and service #308
10 Reviewed PR: Keep milestones when switching repo #311
10 Merged PR: Integrate Grouping Service #313
10 Submitted issue: Encode grouping to url #317
10 Reviewed PR: Add preset views #320
10 Merged PR: Implement group by milestone #316
10 Submitted issue: Update IssueViewer's Repo on Back/Forward Navigation #321
10 Merged PR: Include groupby params in url #319
10 Merged PR: Update repo on back and forward navigation #322
10 Merged PR: Refactor MilestoneGroupingStrategy to match the changes in #315 #323
10 Merged PR: Reset GroupingContextService only if "keep filter" is selected #324
10 Reviewed PR: Fix for no milestone case #326
10 Reviewed PR: Add filters to url #314
10 Merged PR: Enable npm run test in GitHub Action #325
10 Merged PR: Deploy V1.2.0 #331
11 Reviewed PR: Fix default preset view #334
11 Reviewed PR: Fix preset view selection appearance #338
11 Submitted issue: Provide preset value for groupby #341
11 Submitted issue: Add filter for assignee #342
11 Merged PR: Show prs without milestone #339
11 Merged PR: Implement dropdown menu for repo change #347
11 Reviewed PR: Remove quotation marks from url #345
11 Reviewed PR: Hide column issue count #346
11 Reviewed PR: Show preset view only when repo is set #355
11 Reviewed PR: Fix top shadow hiding of columns #356
11 Reviewed PR: Fix bottom shadow of columns #357
12 Submitted issue: Milestone without deadline is not considered as currently active #358
12 Reviewed PR: Fix top and bottom shadow of columns #357
12 Reviewed PR: Optimise Github API calls #360
12 Merged PR: Consider open milestone without deadline as currently active #359
-
+
-

Project: MermaidJS

JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

My Contributions

While setting up the MermaidJS code base I realised that the recommended VSCode extension for Vitest (Community made) was deprecated and was replaced with the updated version maintained by the Vitest team. I had then filed an issue and made a PR to update this(merged).

While understanding the codebase to solve this PR (to be solved) which involved adding additional funcionality to git diagrams, I realised that there was an undocumented feature that was merged a few versions ago. I had then filed an issue an added this to the documentation (merged)

I am in the process of converting gitGraph functions from JS to TS in this PR. This is how Mermaid maintains an internal structure of what should be rendered. This would then be followed up by another PR to change the language parser used from BISON to Langium, which provide nicer features for users.

My Learning Record

BISON/ Langium Parser Generator

I'm still in the midst of learning this, but I've learned that parsers can be generated using programs such as BISON and Langium. Mermaid is built on JIISON a BISON implementation in JS which has been unofficially deprecated and has been trying to make a move to move away from this to a maintained alternative Langium. I would be trying to learn BISON and rewrite some parts of the git graph parser to make it more flexible in allowing me to implement new features.

Resources: GNU BISON Documentation

Observations from contributing process

  • Github Issues from users: Issues are initiated from the ground up from users and are discussed with maintainers
  • Management of PRs: Maintainers will commit directly to the fork for branches if changes required are help push PRs to completion
  • Detailed Issues: Extensive communication in the issues about design decisions and proposals are in the issue allowing new contributors to follow the thought process and pick it up if they are interested.
+

Project: MermaidJS

JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

My Contributions

While setting up the MermaidJS code base I realised that the recommended VSCode extension for Vitest (Community made) was deprecated and was replaced with the updated version maintained by the Vitest team. I had then filed an issue and made a PR to update this(merged).

While understanding the codebase to solve this PR (to be solved) which involved adding additional funcionality to git diagrams, I realised that there was an undocumented feature that was merged a few versions ago. I had then filed an issue an added this to the documentation (merged)

I am in the process of converting gitGraph functions from JS to TS in this PR. This is how Mermaid maintains an internal structure of what should be rendered. This would then be followed up by another PR to change the language parser used from BISON to Langium, which provide nicer features for users.

My Learning Record

BISON/ Langium Parser Generator

I'm still in the midst of learning this, but I've learned that parsers can be generated using programs such as BISON and Langium. Mermaid is built on JIISON a BISON implementation in JS which has been unofficially deprecated and has been trying to make a move to move away from this to a maintained alternative Langium. I would be trying to learn BISON and rewrite some parts of the git graph parser to make it more flexible in allowing me to implement new features.

Resources: GNU BISON Documentation

Observations from contributing process

  • Github Issues from users: Issues are initiated from the ground up from users and are discussed with maintainers
  • Management of PRs: Maintainers will commit directly to the fork for branches if changes required are help push PRs to completion
  • Detailed Issues: Extensive communication in the issues about design decisions and proposals are in the issue allowing new contributors to follow the thought process and pick it up if they are interested.
-
Week Achievements
Pre-3282 Reviewed PR: Update tzdb version to 2022a #11792
Pre-3282 Reviewed PR: Add support for multiples of 5 for team contribution question #11842
Pre-3282 Reviewed PR: Refactor NavigationService to use Angular's dependency injection for services
Pre-3282 Reviewed PR: Differentiate button/dialog for individual/all-question submissions #11856
Pre-3282 Reviewed PR: Warn user before deleting last course #11874
Pre-3282 Reviewed PR: Disable 'Individual Deadline Extensions' link when creating a new session #11877
Pre-3282 Reviewed PR: 'Session closing soon' email: highlight 'No action is required if you have already submitted' #11897
Pre-3282 Reviewed PR: Apply lazy-loading of question responses in session results page #11905
Pre-3282 Reviewed PR: Deleting the last instructor in the course leaves a dangling course object in the database #11930
Pre-3282 Reviewed PR: Fix instructors with custom permissions cannot view student list #11940
Pre-3282 Reviewed PR: InstructorFeedbackEditPage: include question type help in lightbox #11949
Pre-3282 Reviewed PR: Fix bug with overflow of members count in error message #11953
Pre-3282 Reviewed PR: Feedback Rubric Question: Suggestion for Statistics Per Recipient #11984
Pre-3282 Reviewed PR: Add test in student course details page. #11990
Pre-3282 Reviewed PR: Student home page: Make it easier to navigate courses #12493
Pre-3282 Merged PR: Add verification step for Docker instance of Datastore in docs #12465
3 Reviewed PR: Migrate CreateInstructorAction #12706
4 Reviewed PR: Migrate instructor search indexing worker action #12731
4 Reviewed PR: Migrate SubmitFeedbackResponseAction's Logic and Db methods
4 Merged PR: Add SQL email generator unit test #12721
4 Merged PR: Refactor email generator #12723
5 Merged PR: Migrate Session Links Recovery Action #12712
6 Reviewed PR: Migrate UpdateStudentAction #12727
6 Reviewed PR: Add testcases for FeedbackResponseCommentsLogicTest #12769
6 Reviewed PR: Bump up postgresql version #12784
6 Reviewed PR: Add migration script for Usage Statistics #12798
6 Reviewed PR: Add migration script for Account Request #12799
6 Reviewed PR: Add testcases for FeedbackResponseCommentsDbTest #12755
6 Reviewed PR: Add Account and Read Notification #12796
6 Merged PR: Clean up seed script #12768
6 Participated in Teammates hackathon Day 1
Reading Merged PR: Create script to verify row count for non-course entities #12824
Reading Merged PR: Add base script for verifying migrated attributes #12841
Reading Merged PR: Add verification for account and notification #12843
Reading Reviewed PR: Add migration script for Usage Statistics #12798
Reading Reviewed PR: Add migration script for Account Request #12799
Reading Reviewed PR: Revert getFilterQuery for Account Data Migration Script #12796
7 Merged PR: Fix seeding for notification #12866
7 Merged PR: Fix seeding of data for data migration #12873
7 Merged PR: Change title and message field for notification to "TEXT" #12880
8 Reviewed PR: V9 migration and verification script optimization #12896
8 Merged PR: Add verification migration script #12890
8 Migration Standby (10 March 2024)
9 Merged PR: V9 migration verification script optimisation - fetch ReadNotifications for account comparison #12866
9 Reviewed PR: Patch Usage Statistics Migration #12889
9 Reviewed PR: Add SQL configuration into build.properties and build-dev.properties #12917
9 Reviewed PR: Reintroduce AccountRequest search indexing #12923
9 Reviewed PR: :Dev docs (E2E testing): update Chromedriver link #12924
9 Reviewed PR: Add SQL description for postgres config #12931
9 Reviewed PR: Fix AccountRequest migration script #12915
10 Migration Standby (24 March 2024)
10 Merged PR: Create script to migrate noSQL test data to SQL schema format #12922
10 PR (Process of Review ): Update liquibase configuration #12930
10 Merged PR: Relax read notif verification for migration verification script #12937
10 Reviewed PR: Rerunnable Account Request Migration Script #12932
10 Reviewed PR: add delay to task queuer for indexing account request #12936
+
Week Achievements
Pre-3282 Reviewed PR: Update tzdb version to 2022a #11792
Pre-3282 Reviewed PR: Add support for multiples of 5 for team contribution question #11842
Pre-3282 Reviewed PR: Refactor NavigationService to use Angular's dependency injection for services
Pre-3282 Reviewed PR: Differentiate button/dialog for individual/all-question submissions #11856
Pre-3282 Reviewed PR: Warn user before deleting last course #11874
Pre-3282 Reviewed PR: Disable 'Individual Deadline Extensions' link when creating a new session #11877
Pre-3282 Reviewed PR: 'Session closing soon' email: highlight 'No action is required if you have already submitted' #11897
Pre-3282 Reviewed PR: Apply lazy-loading of question responses in session results page #11905
Pre-3282 Reviewed PR: Deleting the last instructor in the course leaves a dangling course object in the database #11930
Pre-3282 Reviewed PR: Fix instructors with custom permissions cannot view student list #11940
Pre-3282 Reviewed PR: InstructorFeedbackEditPage: include question type help in lightbox #11949
Pre-3282 Reviewed PR: Fix bug with overflow of members count in error message #11953
Pre-3282 Reviewed PR: Feedback Rubric Question: Suggestion for Statistics Per Recipient #11984
Pre-3282 Reviewed PR: Add test in student course details page. #11990
Pre-3282 Reviewed PR: Student home page: Make it easier to navigate courses #12493
Pre-3282 Merged PR: Add verification step for Docker instance of Datastore in docs #12465
3 Reviewed PR: Migrate CreateInstructorAction #12706
4 Reviewed PR: Migrate instructor search indexing worker action #12731
4 Reviewed PR: Migrate SubmitFeedbackResponseAction's Logic and Db methods
4 Merged PR: Add SQL email generator unit test #12721
4 Merged PR: Refactor email generator #12723
5 Merged PR: Migrate Session Links Recovery Action #12712
6 Reviewed PR: Migrate UpdateStudentAction #12727
6 Reviewed PR: Add testcases for FeedbackResponseCommentsLogicTest #12769
6 Reviewed PR: Bump up postgresql version #12784
6 Reviewed PR: Add migration script for Usage Statistics #12798
6 Reviewed PR: Add migration script for Account Request #12799
6 Reviewed PR: Add testcases for FeedbackResponseCommentsDbTest #12755
6 Reviewed PR: Add Account and Read Notification #12796
6 Merged PR: Clean up seed script #12768
6 Participated in Teammates hackathon Day 1
Reading Merged PR: Create script to verify row count for non-course entities #12824
Reading Merged PR: Add base script for verifying migrated attributes #12841
Reading Merged PR: Add verification for account and notification #12843
Reading Reviewed PR: Add migration script for Usage Statistics #12798
Reading Reviewed PR: Add migration script for Account Request #12799
Reading Reviewed PR: Revert getFilterQuery for Account Data Migration Script #12796
7 Merged PR: Fix seeding for notification #12866
7 Merged PR: Fix seeding of data for data migration #12873
7 Merged PR: Change title and message field for notification to "TEXT" #12880
8 Reviewed PR: V9 migration and verification script optimization #12896
8 Merged PR: Add verification migration script #12890
8 Migration Standby (10 March 2024)
9 Merged PR: V9 migration verification script optimisation - fetch ReadNotifications for account comparison #12866
9 Reviewed PR: Patch Usage Statistics Migration #12889
9 Reviewed PR: Add SQL configuration into build.properties and build-dev.properties #12917
9 Reviewed PR: Reintroduce AccountRequest search indexing #12923
9 Reviewed PR: :Dev docs (E2E testing): update Chromedriver link #12924
9 Reviewed PR: Add SQL description for postgres config #12931
9 Reviewed PR: Fix AccountRequest migration script #12915
10 Migration Standby (24 March 2024)
10 Merged PR: Create script to migrate noSQL test data to SQL schema format #12922
10 PR (Process of Review ): Update liquibase configuration #12930
10 Merged PR: Relax read notif verification for migration verification script #12937
10 Reviewed PR: Rerunnable Account Request Migration Script #12932
10 Reviewed PR: add delay to task queuer for indexing account request #12936
-
+
+Some of the notable works (finished or in progress) include:

Week Achievements
2 Raised Issue: Broken link for emoticon shortcut in UG
2 Authored PR: Correct broken UG external link
3 Authored PR: Use a more noticeable color for highlight words in fenced code
4 Investigated Printing related issues: Incorrect behavior for minimal panel transition, The collapsed page nav appears in the print view, Lower (white) navbar gets printed on mobile, #728, Support a way to generate table of content
5 Authored PR: Add line-numbers when soft-wrapping
6 Authored PR: Add line-numbers when wrapping is needed for printing
6 Raised Issue: Code highlighting not visible in printing
7 Authored PR: Add SortableTable plugin (work in progress)
7 Reviewed PR: Fix print code highlight
-
+
-

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
6 Reviewed PR: Fix Blurry Favicon #2129
6 Drafted PR: [#2119] Implement Proper Deep Cloning for RepoConfiguration and CliArguments #2124
7 Submitted Issue: Dockerisation of RepoSense #2145
7 Merged PR: [#2117] Refactor CliArguments to conform to RepoConfiguration's Builder Pattern #2118
8 Reviewed PR: [#944] Implement authorship analysis #2140
10 Merged PR: [#2120] Update RepoSense contributors in documentation #2138
10 Submitted Issue: Migrate to Java 11 Syntax and Features #2177
10 Reviewed PR: [#2158] Add More Documentation for Title Component #2159
10 Reviewed PR: [#2151] Update Stylelint #2153
10 Reviewed PR: [#2151] Update LoadingOverlay and Minor Versions of Node Dependencies #2152
12 Reviewed PR: [#2176] Move from Vue CLI to Vite #2178
13 Reviewed PR: [#2001] Extract c-file-type-checkbox from Summary, Authorship and Zoom #2173
13 Allow CI to pass if Codecov fails #2189
Reading Week Merged PR: [#2177] Migrate to Java 11 Syntax and Features #2183
Reading Week Merged PR: [#2184] Fix Inconsistent Line Number Colours #2185
+

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
6 Reviewed PR: Fix Blurry Favicon #2129
6 Drafted PR: [#2119] Implement Proper Deep Cloning for RepoConfiguration and CliArguments #2124
7 Submitted Issue: Dockerisation of RepoSense #2145
7 Merged PR: [#2117] Refactor CliArguments to conform to RepoConfiguration's Builder Pattern #2118
8 Reviewed PR: [#944] Implement authorship analysis #2140
10 Merged PR: [#2120] Update RepoSense contributors in documentation #2138
10 Submitted Issue: Migrate to Java 11 Syntax and Features #2177
10 Reviewed PR: [#2158] Add More Documentation for Title Component #2159
10 Reviewed PR: [#2151] Update Stylelint #2153
10 Reviewed PR: [#2151] Update LoadingOverlay and Minor Versions of Node Dependencies #2152
12 Reviewed PR: [#2176] Move from Vue CLI to Vite #2178
13 Reviewed PR: [#2001] Extract c-file-type-checkbox from Summary, Authorship and Zoom #2173
13 Allow CI to pass if Codecov fails #2189
Reading Week Merged PR: [#2177] Migrate to Java 11 Syntax and Features #2183
Reading Week Merged PR: [#2184] Fix Inconsistent Line Number Colours #2185
-
+
-

Summary

  • Led the migration of the remaining actions for V9.
  • Led the team in ensuring that there were no regressions in V9-beta (dual DB) through automated and manual testing.
  • Led LOGS project.
  • Reviewed workflows for release with the new SQL DB.

CS3282 Pre-Sem Progress

CS3282 Progress

Week Achievements
2 Reviewed PR: Migrate UpdateInstructorAction #12434
2 Reviewed PR: Update Angular to 16 and Node to 18 #12694
2 Reviewed PR: Migrate SearchInstructorsAction #12340
2 Reviewed PR: Migrate FeedbackSession*RemindersAction classes #12711
3 Merged PR: Fix update and create feedbackquestion actions #12716
3 Reviewed PR: Migrate RemoveDataBundle #12709
3 Reviewed PR: Migrate GetOngoingSessionsAction for V9 #12710
3 Reviewed PR: Migrate GetCourseJoinStatusAction #12713
4 Reviewed PR: Migrate CreateInstructorAction #12706
4 Reviewed PR: Migrate join course action #12722
4 Reviewed PR: Support for twin db for search + replace datastore test #12728
4 Reviewed PR: Add SQL email generator unit test #12721
5 Merged PR: Finish partial testcases #12742
5 Reviewed PR: Migrate search students action #12735
5 Merged PR: Move getTypicalEntity functions to BaseTestCase #12744
5 Reviewed PR: Migrate StudentSearchIndexingWorkerAction #12733
5 Reviewed PR: Migrate Session Links Recovery Action #12712
5 Reviewed PR: Add tests for CoursesLogic #12746
5 Reviewed PR: Update restoreDeletedFeedbackSession to save updated entity to db #12751
5 Reviewed PR: Migrate instructor search indexing worker action #12731
5 Merged PR: Remove typical data bundle from feedbackquestionlogic test #12750
5 Reviewed PR: Migrate SubmitFeedbackResponseAction's Logic and Db methods #12732
6 Merged PR: Add test for getUsageStatisticsForTimeRange #12748
6 Reviewed PR: Add testcases for FeedbackResponseCommentsDbTest #12755
6 Reviewed PR: Migrate feedbackSessionPublishedRemindersAction #12741
6 Reviewed PR: Migrate FeedbackSessionOpeningSoonRemindersAction #12740
6 Reviewed PR: Migrate SubmitFeedbackResponseAction #12720
6 Reviewed PR: Migrate FeedbackSessionClosingRemindersAction #12743
6 Reviewed PR: Migrate AccountRequestSearchIndexingWorkerAction #12757
6 Reviewed PR: Add test cases for FeedbackSessionsDb #12752
6 Reviewed PR: Merge in current v9-migration #12771
6 Reviewed PR: Fix GetSessionResponseStatsActionIT #12777
6 Reviewed PR: Migrate instructor notification page e2e test #12792
6 Merged PR: migrate InstructorCourseJoinConfirmationPageE2ETest #12790
6 Merged PR: Migrate instructor courses page e2e test #12789
6 Reviewed PR: Fix incorrect usage of recipient as param for E2E test #12797
6 Merged PR: migrate AdminHomePageE2ETest #12794
6 Reviewed PR: Move accounts JSON for AdminSessionsPageE2ETest #12802
6 Merged PR: Migrate instructor feedback edit page e2e test #12795
6 Merged PR: migrate StudentHomePageE2ETest #12807
6 Merged PR: migrate AdminAccountsPageE2ETest #12806
6 Reviewed PR: Add locale for java datetime formatter #12826
6 Reviewed PR: Move accounts JSON for FeedbackConstSumRecipientQuestionE2ETest #12805
6 Reviewed PR: Move accounts JSON for FeedbackContributionQuestionE2ETest #12808
6 Reviewed PR: Move accounts JSON for FeedbackMcqQuestionE2ETest #12809
6 Reviewed PR: Fix failing component tests #12837
6 Reviewed PR: Move accounts JSON for FeedbackMsqQuestionE2ETest #12810
6 Reviewed PR: Move accounts JSON for FeedbackNumScaleQuestionE2ETest #12812
6 Reviewed PR: Move accounts JSON for FeedbackRankOptionQuestionE2ETest #12813
6 Reviewed PR: Move accounts JSON for FeedbackRankRecipientQuestionE2ETest #12814
6 Reviewed PR: Move accounts JSON for AutomatedSessionRemindersE2ETest #12803
6 Reviewed PR: Migrate Admin Notifications E2E Test #12793
6 Merged PR: Revert createaccountaction #12835
6 Reviewed PR: Move accounts JSON for InstructorFeedbackReportPageE2ETest #12833
6 Reviewed PR: Move accounts JSON for InstructorCourseStudentDetailsEditPageE2ETest #12829
6 Reviewed PR: Move accounts JSON for InstructorCourseStudentDetailsPageE2ETest #12831
6 Reviewed PR: Move accounts JSON for InstructorCourseEnrollPageE2ETest #12827
Recess Reviewed PR: Migrate AdminSearchPageE2ETest #12838
Recess Reviewed PR: Migrate Notification Banner E2E #12840
Recess Merged PR: fix InstructorHomePageE2ETest #12839
Recess Reviewed PR: Migrate GetSessionResultsAction #12719
Recess Merged PR: Fix GitHub actions #12850
Recess Reviewed PR: Add tests for CourseDbIT #12786
Recess Merged PR: SQL injection test for UsersDbIT #12851
Recess Reviewed PR: Add SQL injection tests in NotificationDbIT #12858
Recess Reviewed PR: Migrate GetFeedbackSessionLogsAction #12862
Recess Merged PR: Fix FeedbackResultsPageE2ETest #12855
7 Reviewed PR: Add tests for FeedbackQuestionsDb #12759
7 Reviewed PR: Migrate StudentCourseJoinConfirmationPageE2ETest #12815
7 Merged PR: add check for sql tests in TestNgXml #12870
7 Merged PR: Fix account creation #12871
7 Submitted Issue: Release V9.0.0-beta.0 #12876
7 Reviewed PR: Prepare Patch Data Migration Script for Account #12883
7 Reviewed PR: Patch account and read notification migration #12884
8 Reviewed PR: Add tests for FeedbackQuestionsDbIT #12781
8 Merged PR: Fix get feedback sessions action #12886
8 Reviewed PR: Add integration tests for FeedbackResponseCommentsDb #12849
8 Reviewed PR: Migrate InstructorSearchPageE2ETest #12891
8 Reviewed PR: Docs: Upgrade to latest MarkBind version #12893
9 Reviewed PR: Create FeedbackSessionLog entity and cron job action #12895
9 Reviewed PR: Migrate InstructorNotificationsPageE2E #12906
9 Reviewed PR: Add deep comparison for entities in verifyEquals for E2E #12892
9 Reviewed PR: Migrate FeedbackMsqQuestionE2ETest #12904
9 Reviewed PR: Add SQL configuration into build.properties and build-dev.properties #12917
9 Reviewed PR: Create script to migrate noSQL test data to SQL schema format #12922
10 Merged PR: add delay to task queuer for indexing account request #12936
10 Reviewed PR: Migrate Feedback Rank Option E2E test #12902
10 Submitted Issue: Release V9.0.0-beta.1 #12939
10 Merged PR: fix resetAccountAction #12934
10 Reviewed PR: Migrate FeedbackMcqQuestionE2ETest #12820
10 Reviewed PR: Remove unnecessary loading of datastore entities in InstructorNotificationsPageE2ETest #12911
10 Reviewed PR: Migrate InstructorCourseDetailsPageE2ETest #12908
10 Merged PR: Release V9.0.0-beta.1 #12958
10 Reviewed PR: Create Logic and Db layer for FeedbackSessionLogs #12914
10 Reviewed PR: Migrate AdminSearchPageE2ETest SQL #12811
10 Merged PR: Release V9.0.0-beta.1 #12960
10 Merged PR: Merge pull request #12960 from TEAMMATES/master #12961
10 Merged PR: Fix account request indexing #12967
10 Submitted Issue: Release V9.0.0-beta.2 #12968
10 Merged PR: Merge master to release #12969
10 Merged PR: configure agroal connection pool #12971
11 Submitted Issue: Release V9.0.0-beta.3 #12976
11 Reviewed PR: Configure connection pool using hikari #12978
11 Submitted Issue: Release V9.0.0-beta.4 #12979
11 Reviewed PR: Update GetFeedbackSessionLogsAction to use SQL db #12938
11 Reviewed PR: Create Update Account Request Action #12982
11 Reviewed PR: Update liquibase configuration #12930
11 Reviewed PR: Fix Account Request Update Search Indexing #12984
12 Reviewed PR: Migrate AccountRequestsLogicTest #12780
12 Reviewed PR: Remove feedbackSession attributes @fetch annotation #12992
12 Reviewed PR: Remove unused modal in AdminHomePage #12998
12 Reviewed PR: Convert RejectAccountRequestAction to use transactions #13001
12 Reviewed PR: Update DeleteAccountRequest to reference by ID #12997
12 Reviewed PR: Migrate FeedbackNumScaleQuestionE2ETest #12940
12 Reviewed PR: Update front end for session activity logs #12973
12 Reviewed PR: Add v9.0.0 tag to liquibase changelog #13005
12 Merged PR: Fix flaky component test #13003
12 Merged PR: Get account request by uuid #13007
12 Reviewed PR: Reference account requests by ID in tests #13017
13 Reviewed PR: Fix FeedBackResponsesLogic bug #13024
13 Reviewed PR: Fix getSessionResultAction bugs #13023
13 Reviewed PR: Fix front end bugs #13037
13 Reviewed PR: Remove ref by email and institute #13044
13 Reviewed PR: Account request form #13048
13 Reviewed PR: Migrate committers #13052
13 Reviewed PR: Merge student-activity-logs into master #13041
13 Reviewed PR: Update backend libraries versions, support Java 21 #12885
13 Reviewed PR: Add beta 5 liquibase changelog and developers json #13061
Reading Reviewed PR: Use AccountRequestUpdateRequest as parameter #13068
+

Summary

  • Led the migration of the remaining actions for V9.
  • Led the team in ensuring that there were no regressions in V9-beta (dual DB) through automated and manual testing.
  • Led LOGS project.
  • Reviewed workflows for release with the new SQL DB.

CS3282 Pre-Sem Progress

CS3282 Progress

Week Achievements
2 Reviewed PR: Migrate UpdateInstructorAction #12434
2 Reviewed PR: Update Angular to 16 and Node to 18 #12694
2 Reviewed PR: Migrate SearchInstructorsAction #12340
2 Reviewed PR: Migrate FeedbackSession*RemindersAction classes #12711
3 Merged PR: Fix update and create feedbackquestion actions #12716
3 Reviewed PR: Migrate RemoveDataBundle #12709
3 Reviewed PR: Migrate GetOngoingSessionsAction for V9 #12710
3 Reviewed PR: Migrate GetCourseJoinStatusAction #12713
4 Reviewed PR: Migrate CreateInstructorAction #12706
4 Reviewed PR: Migrate join course action #12722
4 Reviewed PR: Support for twin db for search + replace datastore test #12728
4 Reviewed PR: Add SQL email generator unit test #12721
5 Merged PR: Finish partial testcases #12742
5 Reviewed PR: Migrate search students action #12735
5 Merged PR: Move getTypicalEntity functions to BaseTestCase #12744
5 Reviewed PR: Migrate StudentSearchIndexingWorkerAction #12733
5 Reviewed PR: Migrate Session Links Recovery Action #12712
5 Reviewed PR: Add tests for CoursesLogic #12746
5 Reviewed PR: Update restoreDeletedFeedbackSession to save updated entity to db #12751
5 Reviewed PR: Migrate instructor search indexing worker action #12731
5 Merged PR: Remove typical data bundle from feedbackquestionlogic test #12750
5 Reviewed PR: Migrate SubmitFeedbackResponseAction's Logic and Db methods #12732
6 Merged PR: Add test for getUsageStatisticsForTimeRange #12748
6 Reviewed PR: Add testcases for FeedbackResponseCommentsDbTest #12755
6 Reviewed PR: Migrate feedbackSessionPublishedRemindersAction #12741
6 Reviewed PR: Migrate FeedbackSessionOpeningSoonRemindersAction #12740
6 Reviewed PR: Migrate SubmitFeedbackResponseAction #12720
6 Reviewed PR: Migrate FeedbackSessionClosingRemindersAction #12743
6 Reviewed PR: Migrate AccountRequestSearchIndexingWorkerAction #12757
6 Reviewed PR: Add test cases for FeedbackSessionsDb #12752
6 Reviewed PR: Merge in current v9-migration #12771
6 Reviewed PR: Fix GetSessionResponseStatsActionIT #12777
6 Reviewed PR: Migrate instructor notification page e2e test #12792
6 Merged PR: migrate InstructorCourseJoinConfirmationPageE2ETest #12790
6 Merged PR: Migrate instructor courses page e2e test #12789
6 Reviewed PR: Fix incorrect usage of recipient as param for E2E test #12797
6 Merged PR: migrate AdminHomePageE2ETest #12794
6 Reviewed PR: Move accounts JSON for AdminSessionsPageE2ETest #12802
6 Merged PR: Migrate instructor feedback edit page e2e test #12795
6 Merged PR: migrate StudentHomePageE2ETest #12807
6 Merged PR: migrate AdminAccountsPageE2ETest #12806
6 Reviewed PR: Add locale for java datetime formatter #12826
6 Reviewed PR: Move accounts JSON for FeedbackConstSumRecipientQuestionE2ETest #12805
6 Reviewed PR: Move accounts JSON for FeedbackContributionQuestionE2ETest #12808
6 Reviewed PR: Move accounts JSON for FeedbackMcqQuestionE2ETest #12809
6 Reviewed PR: Fix failing component tests #12837
6 Reviewed PR: Move accounts JSON for FeedbackMsqQuestionE2ETest #12810
6 Reviewed PR: Move accounts JSON for FeedbackNumScaleQuestionE2ETest #12812
6 Reviewed PR: Move accounts JSON for FeedbackRankOptionQuestionE2ETest #12813
6 Reviewed PR: Move accounts JSON for FeedbackRankRecipientQuestionE2ETest #12814
6 Reviewed PR: Move accounts JSON for AutomatedSessionRemindersE2ETest #12803
6 Reviewed PR: Migrate Admin Notifications E2E Test #12793
6 Merged PR: Revert createaccountaction #12835
6 Reviewed PR: Move accounts JSON for InstructorFeedbackReportPageE2ETest #12833
6 Reviewed PR: Move accounts JSON for InstructorCourseStudentDetailsEditPageE2ETest #12829
6 Reviewed PR: Move accounts JSON for InstructorCourseStudentDetailsPageE2ETest #12831
6 Reviewed PR: Move accounts JSON for InstructorCourseEnrollPageE2ETest #12827
Recess Reviewed PR: Migrate AdminSearchPageE2ETest #12838
Recess Reviewed PR: Migrate Notification Banner E2E #12840
Recess Merged PR: fix InstructorHomePageE2ETest #12839
Recess Reviewed PR: Migrate GetSessionResultsAction #12719
Recess Merged PR: Fix GitHub actions #12850
Recess Reviewed PR: Add tests for CourseDbIT #12786
Recess Merged PR: SQL injection test for UsersDbIT #12851
Recess Reviewed PR: Add SQL injection tests in NotificationDbIT #12858
Recess Reviewed PR: Migrate GetFeedbackSessionLogsAction #12862
Recess Merged PR: Fix FeedbackResultsPageE2ETest #12855
7 Reviewed PR: Add tests for FeedbackQuestionsDb #12759
7 Reviewed PR: Migrate StudentCourseJoinConfirmationPageE2ETest #12815
7 Merged PR: add check for sql tests in TestNgXml #12870
7 Merged PR: Fix account creation #12871
7 Submitted Issue: Release V9.0.0-beta.0 #12876
7 Reviewed PR: Prepare Patch Data Migration Script for Account #12883
7 Reviewed PR: Patch account and read notification migration #12884
8 Reviewed PR: Add tests for FeedbackQuestionsDbIT #12781
8 Merged PR: Fix get feedback sessions action #12886
8 Reviewed PR: Add integration tests for FeedbackResponseCommentsDb #12849
8 Reviewed PR: Migrate InstructorSearchPageE2ETest #12891
8 Reviewed PR: Docs: Upgrade to latest MarkBind version #12893
9 Reviewed PR: Create FeedbackSessionLog entity and cron job action #12895
9 Reviewed PR: Migrate InstructorNotificationsPageE2E #12906
9 Reviewed PR: Add deep comparison for entities in verifyEquals for E2E #12892
9 Reviewed PR: Migrate FeedbackMsqQuestionE2ETest #12904
9 Reviewed PR: Add SQL configuration into build.properties and build-dev.properties #12917
9 Reviewed PR: Create script to migrate noSQL test data to SQL schema format #12922
10 Merged PR: add delay to task queuer for indexing account request #12936
10 Reviewed PR: Migrate Feedback Rank Option E2E test #12902
10 Submitted Issue: Release V9.0.0-beta.1 #12939
10 Merged PR: fix resetAccountAction #12934
10 Reviewed PR: Migrate FeedbackMcqQuestionE2ETest #12820
10 Reviewed PR: Remove unnecessary loading of datastore entities in InstructorNotificationsPageE2ETest #12911
10 Reviewed PR: Migrate InstructorCourseDetailsPageE2ETest #12908
10 Merged PR: Release V9.0.0-beta.1 #12958
10 Reviewed PR: Create Logic and Db layer for FeedbackSessionLogs #12914
10 Reviewed PR: Migrate AdminSearchPageE2ETest SQL #12811
10 Merged PR: Release V9.0.0-beta.1 #12960
10 Merged PR: Merge pull request #12960 from TEAMMATES/master #12961
10 Merged PR: Fix account request indexing #12967
10 Submitted Issue: Release V9.0.0-beta.2 #12968
10 Merged PR: Merge master to release #12969
10 Merged PR: configure agroal connection pool #12971
11 Submitted Issue: Release V9.0.0-beta.3 #12976
11 Reviewed PR: Configure connection pool using hikari #12978
11 Submitted Issue: Release V9.0.0-beta.4 #12979
11 Reviewed PR: Update GetFeedbackSessionLogsAction to use SQL db #12938
11 Reviewed PR: Create Update Account Request Action #12982
11 Reviewed PR: Update liquibase configuration #12930
11 Reviewed PR: Fix Account Request Update Search Indexing #12984
12 Reviewed PR: Migrate AccountRequestsLogicTest #12780
12 Reviewed PR: Remove feedbackSession attributes @fetch annotation #12992
12 Reviewed PR: Remove unused modal in AdminHomePage #12998
12 Reviewed PR: Convert RejectAccountRequestAction to use transactions #13001
12 Reviewed PR: Update DeleteAccountRequest to reference by ID #12997
12 Reviewed PR: Migrate FeedbackNumScaleQuestionE2ETest #12940
12 Reviewed PR: Update front end for session activity logs #12973
12 Reviewed PR: Add v9.0.0 tag to liquibase changelog #13005
12 Merged PR: Fix flaky component test #13003
12 Merged PR: Get account request by uuid #13007
12 Reviewed PR: Reference account requests by ID in tests #13017
13 Reviewed PR: Fix FeedBackResponsesLogic bug #13024
13 Reviewed PR: Fix getSessionResultAction bugs #13023
13 Reviewed PR: Fix front end bugs #13037
13 Reviewed PR: Remove ref by email and institute #13044
13 Reviewed PR: Account request form #13048
13 Reviewed PR: Migrate committers #13052
13 Reviewed PR: Merge student-activity-logs into master #13041
13 Reviewed PR: Update backend libraries versions, support Java 21 #12885
13 Reviewed PR: Add beta 5 liquibase changelog and developers json #13061
Reading Reviewed PR: Use AccountRequestUpdateRequest as parameter #13068
-
+

CS3282

This semester, I focused my efforts on trying to upgrade the outdated dependencies in CATcher. This was a challenging task as I had to understand the dependencies of the project. Even though the current state of the repository is not what I have hoped to achieve, I hope future devs reading this might find some insights on how to approach this task.

Node Package Manager (npm) and Yarn

From working with CATcher and SourceAcademy, I have gotten a more solid understanding of how package managers work. Before this, I only saw Node and npm as something we had to install before we can start developing our project. However, the fact is that package managers are a crucial aspect of any project, since they manage the dependencies of the project.

Dependency Management

In CATcher, I focused on identifying the dependencies that needed to be updated. I learned that dependencies are managed in the package.json file, and that the package-lock.json file is used to lock the dependencies to a specific version. This is important as it ensures that the project is reproducible across different machines. Unfortunately, this is not used in CATcher, but i believe CATcher will benefit from using a lockfile in the future.

Upgrading Dependencies

Beyond that, I have learnt how to use npm outdated, npm-check etc to identify outdated dependencies. I also learnt how to use npm ls to print out the dependency tree of a given package. This was useful in identifying the dependencies that needed to be updated.

Resources

ESLint migration

I also assisted with the tslint to eslint migration in CATcher. While initially a PR done by a mentee, I had to stay involved and understand the changes made as well. I had to understand how to configure eslint to work with the project. This was a challenging task, but I am glad that I managed to complete it.

Resources:

i18next

Beyond work done in CATcher, I also worked on SourceAcademy, where I implemented an i18n framework. i18next is a powerful library that allows for easy translation of text in a project. During my implementation of the i18n framework in SourceAcademy, I referenced several implementations of i18n across various established open source repos such as HospitalRun and FreeCodeCamp for any best practices. From these references, I learned how to structure the i18n files and the various translation resources to make it easy for future translators to add on new translations.

Resources:

Angular Essentials

I had contributed to CATcher as part of IWM, but I have never really approached the Angular aspects of the project.

Essentially, the core ideas behind Angular involves:

  • Components, a TypeScript class with @Component decorator, an HTML template and styles. -
    • The decorator accepts parameters that help Angular know which HTML file is the component's template and which css file is the component's styles.
    • The decorator also accepts a parameter that is the component's selector, which is how we can reuse this component as an HTML element in other HTML files.
  • An HTML template that instructs Angular how to render the component
  • An optional set of CSS styles that define the appearance of the template's HTML elements

The other key concepts include event bindings and property binding that link the template to the TypeScript class. Knowing these essentials allowed me to fix WATcher PR#57.

Another key part of Angular is its Dependency Injection system and services. Angular allows us to provide dependencies at different levels of the application, and how the dependencies are instantiated.

  • For example, when you providing a service at the root level, Angular creates a single, shared instance of the service and injects it into any class that asks for it.
  • Also, it seems like most of WATcher and CATcher's services are provided at the root level.

Finally, as part of fixing "Remove label-filter-bar as module export #92", I also learned about how related components are organized and grouped into modules. Each Module are self-contained and provide a certain set of functionality and components related to that module, thereby achieving separation of concerns.

Resources:

E2E Testing with Playwright

After having 2 separate hotfixes pushed in a single semester, I started to look more deeply into ensuring the robustness of our application. During these 2 hotfixes, bugs were only uncovered during manual testing. However, it is time consuming to conduct manual tests, and we need to find a way to automate it. E2E tests simulate user interactions such as clicks and typing and is a useful way to ensure our end-product is performing as expected.

During this semester, one of the high priority issues was to migrate our E2E solution away from Protractor. As such, I have investigated Cypress and Playwright as two potential E2E solutions.

Mocking services

When performing migration from Protractor to Playwright, I learned about the different strategies E2E tests can be conducted. Typically, we would want to conduct E2E tests against our production server, since that is what our end users will be using. However, since CATcher depends alot on GitHub's API for its functionality, we are unable to perform automated tests against GitHub. A second strategy would be to mock the functions that hit GitHub's API, and we would test solely the functionalities and behaviours of the app. This let me realized that there is a test vs production version of CATcher.

I have also looked into whether it is possible to perform E2E testing against the production server, since one of the bugs fixed in the hotfixes can only be caught if we did not adopt a mocking strategy. One of the key feasibility concerns I had with testing against the GitHub API was simulating user authentication. This was because authenticating with GitHub requires multi-factor authentication, something that is difficult to achieve with automated E2E testing. Some potential solutions to bypassing MFA would be to use TOTP, which can be generated programmatically. More research will be needed in this area.

Aspects Learnt

  • Configuring and setting up Playwright for a project.
  • Learned about how Playwright/Cypress/Protractor identifies and interacts with HTML elements using selectors.
  • Learned about how CATcher API calls are mocked during E2E testing

Resources:

Github Actions

I also picked up Github Actions when contributing to the CI/CD pipeline in Enable linting in Github workflow #81. I learned how Github Actions are set up and how they can be triggered upon pushing to main/master and also on pull requests.

Furthermore, I learnt how we can use matrix strategies to run the same job with different parameters, such as different OS and different node versions.

Resources:

RxJS and the Observer Pattern

Part of working with CATcher source code was frequently encountering Observables and Observers. RxJS supports Observers and Observables, allowing updates to some Observable to be received by some Observer that is subscribed to it. With this pattern, we can trigger updates in many dependent objects automatically and asynchronously when some object state changes.

Resources:

+
  • An HTML template that instructs Angular how to render the component
  • An optional set of CSS styles that define the appearance of the template's HTML elements
  • The other key concepts include event bindings and property binding that link the template to the TypeScript class. Knowing these essentials allowed me to fix WATcher PR#57.

    Another key part of Angular is its Dependency Injection system and services. Angular allows us to provide dependencies at different levels of the application, and how the dependencies are instantiated.

    Finally, as part of fixing "Remove label-filter-bar as module export #92", I also learned about how related components are organized and grouped into modules. Each Module are self-contained and provide a certain set of functionality and components related to that module, thereby achieving separation of concerns.

    Resources:

    E2E Testing with Playwright

    After having 2 separate hotfixes pushed in a single semester, I started to look more deeply into ensuring the robustness of our application. During these 2 hotfixes, bugs were only uncovered during manual testing. However, it is time consuming to conduct manual tests, and we need to find a way to automate it. E2E tests simulate user interactions such as clicks and typing and is a useful way to ensure our end-product is performing as expected.

    During this semester, one of the high priority issues was to migrate our E2E solution away from Protractor. As such, I have investigated Cypress and Playwright as two potential E2E solutions.

    Mocking services

    When performing migration from Protractor to Playwright, I learned about the different strategies E2E tests can be conducted. Typically, we would want to conduct E2E tests against our production server, since that is what our end users will be using. However, since CATcher depends alot on GitHub's API for its functionality, we are unable to perform automated tests against GitHub. A second strategy would be to mock the functions that hit GitHub's API, and we would test solely the functionalities and behaviours of the app. This let me realized that there is a test vs production version of CATcher.

    I have also looked into whether it is possible to perform E2E testing against the production server, since one of the bugs fixed in the hotfixes can only be caught if we did not adopt a mocking strategy. One of the key feasibility concerns I had with testing against the GitHub API was simulating user authentication. This was because authenticating with GitHub requires multi-factor authentication, something that is difficult to achieve with automated E2E testing. Some potential solutions to bypassing MFA would be to use TOTP, which can be generated programmatically. More research will be needed in this area.

    Aspects Learnt

    Resources:

    Github Actions

    I also picked up Github Actions when contributing to the CI/CD pipeline in Enable linting in Github workflow #81. I learned how Github Actions are set up and how they can be triggered upon pushing to main/master and also on pull requests.

    Furthermore, I learnt how we can use matrix strategies to run the same job with different parameters, such as different OS and different node versions.

    Resources:

    RxJS and the Observer Pattern

    Part of working with CATcher source code was frequently encountering Observables and Observers. RxJS supports Observers and Observables, allowing updates to some Observable to be received by some Observer that is subscribed to it. With this pattern, we can trigger updates in many dependent objects automatically and asynchronously when some object state changes.

    Resources:

    -

    Project: SourceAcademy Frontend

    Sourceacademy is the an online experiential environment used for teaching students computational thinking and is used by the School of Computing in NUS and Uppsala University in Sweden to teach introductory programming modules. The frontend is built using React and Redux.

    My Contributions

    In this project, I have authored and merged two PRs. They are listed as follows:

    • Fix double window prompt when uploading users #2943

      In this PR, I fixed a long standing bug regarding the UI where two file prompts show up upon clicking a "upload csv" button. To solve this, I first reproduced the issue on my local development environment, and then identified the issue, which happened to be the incorrect use of a <FileInput> react component within a <CSVReader> component. The components were imported from a theming library and a CSV parser library respectively.

    • i18n framework #2946

      In this PR, I laid the groundwork for future internationalization work to be done on SourceAcademy. SourceAcademy started out as a project in NUS but has plans to go international, as seen by its use in Uppsala university in Sweden. As such, adding i18n to the project will be crucial for its future.

      In this PR, I introduced the use of react-i18next library, as well as define data structures to allow future translators to easily add on new translations and languages.

    My Learning Record

    React & Redux

    Sourceacademy is built in React and Redux, and as such, I have had to learn how to work with these two libraries. While I have used React and Redux before, I have not seen how it can be used in a large scale project like Sourceacademy. In Sourceacademy, I have seen how Redux and Redux Toolkit was used to create a typesafe global state that is shared across the entire application and I appreciate how well structured the code was in the repository.

    i18next

    i18next is a library that allows for internationalization in a React project. It is a powerful library that allows for easy translation of text in a project. During my implementation of the i18n framework in Sourceacademy, I referenced several implementations of i18n across various established open source repos such as HospitalRun and FreeCodeCamp for any best practices. From these references, I learned how to structure the i18n files and the various translation resources to make it easy for future translators to add on new translations.

    Furthermore, the i18n framework that I contributed to has strong type safety and only allows keys that are defined in the translation files to be used, making it easier for future developers to see what keys are allowed on what file. I am grateful for the Sourceacademy maintainers for their guidance in this implementation.

    Practices and tools from SourceAcademy that could be adopted by CATcher

    SourceAcademy utilises Yarn as their package manager. From almost all points of view, yarn has the exact same functionality as npm, but it is faster and more reliable. As such, we could consider moving over to using Yarn in CATcher as well.

    Furthermore, I was particularly impressed with the testing framework that they had to ensure any new changes were not breaking. They made use of jest and had an interactive UI test runner that allowed the developer to see which tests were failing and why. This is something that CATcher could consider adopting as well.

    +

    Project: SourceAcademy Frontend

    Sourceacademy is the an online experiential environment used for teaching students computational thinking and is used by the School of Computing in NUS and Uppsala University in Sweden to teach introductory programming modules. The frontend is built using React and Redux.

    My Contributions

    In this project, I have authored and merged two PRs. They are listed as follows:

    • Fix double window prompt when uploading users #2943

      In this PR, I fixed a long standing bug regarding the UI where two file prompts show up upon clicking a "upload csv" button. To solve this, I first reproduced the issue on my local development environment, and then identified the issue, which happened to be the incorrect use of a <FileInput> react component within a <CSVReader> component. The components were imported from a theming library and a CSV parser library respectively.

    • i18n framework #2946

      In this PR, I laid the groundwork for future internationalization work to be done on SourceAcademy. SourceAcademy started out as a project in NUS but has plans to go international, as seen by its use in Uppsala university in Sweden. As such, adding i18n to the project will be crucial for its future.

      In this PR, I introduced the use of react-i18next library, as well as define data structures to allow future translators to easily add on new translations and languages.

    My Learning Record

    React & Redux

    Sourceacademy is built in React and Redux, and as such, I have had to learn how to work with these two libraries. While I have used React and Redux before, I have not seen how it can be used in a large scale project like Sourceacademy. In Sourceacademy, I have seen how Redux and Redux Toolkit was used to create a typesafe global state that is shared across the entire application and I appreciate how well structured the code was in the repository.

    i18next

    i18next is a library that allows for internationalization in a React project. It is a powerful library that allows for easy translation of text in a project. During my implementation of the i18n framework in Sourceacademy, I referenced several implementations of i18n across various established open source repos such as HospitalRun and FreeCodeCamp for any best practices. From these references, I learned how to structure the i18n files and the various translation resources to make it easy for future translators to add on new translations.

    Furthermore, the i18n framework that I contributed to has strong type safety and only allows keys that are defined in the translation files to be used, making it easier for future developers to see what keys are allowed on what file. I am grateful for the Sourceacademy maintainers for their guidance in this implementation.

    Practices and tools from SourceAcademy that could be adopted by CATcher

    SourceAcademy utilises Yarn as their package manager. From almost all points of view, yarn has the exact same functionality as npm, but it is faster and more reliable. As such, we could consider moving over to using Yarn in CATcher as well.

    Furthermore, I was particularly impressed with the testing framework that they had to ensure any new changes were not breaking. They made use of jest and had an interactive UI test runner that allowed the developer to see which tests were failing and why. This is something that CATcher could consider adopting as well.

    -

    CS3282 Progress

    Summary

    • Reviewed PRs of CS3281 students and external contributors in CATcher and WATcher
    • In-person guidance with CS3281 mentees over telegram
    • Maintained and upgraded libraries in CATcher
    • Created two PRs in external project - SourceAcademy

    Before-semester contributions

    CATcher

    Date Role Description Key Achievements
    13 Jun 2023 Mentor Question: @angular/common version to use #1191 Provided guidance on how to resolve the issue
    12 Jun 2023 PR author Fix peer dependencies #1193
    19 Jul 2023 Issue Reporter Documentation for CATcher's parser #1204 Created issue to discuss documentation for CATcher's parser
    19 Sep 2023 PR author Upgrade to Angular 11 #1203

    WATcher

    Date Role Description Key Achievements
    29 Jun 2023 PR Reviewer Detail page detail list #131
    29 Jun 2023 PR Reviewer Add wrap for username in issues-viewer's card-view #147
    29 Jun 2023 PR Reviewer Disable milestone filter if there are no milestones #149
    29 Jun - 18 Jul PR Reviewer Add reset labels feature #150 Mentored PR author to improve code quality and readability
    30 Jun 2023 PR Reviewer Show loading spinner on switch repository #151
    28 Oct 2023 PR Reviewer Option to Limit Repository Access #215

    CATcher

    Date Role Description Key Achievements
    Week 2 PR Reviewer Uncaught error when invalid link is clicked #1239
    Week 4 PR Reviewer Default branch to main #1234
    Week 4 PR Author Angular 12 #1242
    Week 5 PR Reviewer Faulty list view when back navigating #1243
    Week 6 PR Reviewer Fix markdown blockquote preview difference #1245
    Week 6 Issue Reporter Migrate to ESLint #1247
    Week 7 PR Reviewer Assisted in the creation of new CATcher release
    Week 7 - 8 Issue Reporter & PR Author Address neglected depenedencies in CATcher
    Week 11 PR Reviewer Add documentation for CATcher's parser #1240
    Week 13 PR Reviewer Add login redirect #1256
    Reading Week PR Reviewer & Co-author Migrate from TSLint to ESLint #1250 Had to step in to complete the PR
    Reading Week PR Author Upgrade to Angular 13 #1249
    Reading Week PR Author Fix e2e regression caused by changes in AuthService #1275

    WATcher

    Date Role Description Key Achievements
    Week 4 PR Reviewer Show list of hidden users #235
    Week 4 PR Reviewer Build in Github Actions #239
    Week 5 PR Reviewer Remove unused session-fix-confirmation component #250
    Week 5 PR Reviewer Remove unused models #253
    Week 6 PR Reviewer Upgrade to Angular 11 #252
    Recess PR Reviewer Fix zone testing import error #269

    External Project - SourceAcademy

    Date Role Description Key Achievements
    Week 13 PR Author Fix double window prompt when uploading users #2943 Fixed a bug
    Week 13 PR Author i18n framework #2946 Laid the groundwork for internationalization in source academy
    +

    CS3282 Progress

    Summary

    • Reviewed PRs of CS3281 students and external contributors in CATcher and WATcher
    • In-person guidance with CS3281 mentees over telegram
    • Maintained and upgraded libraries in CATcher
    • Created two PRs in external project - SourceAcademy

    Before-semester contributions

    CATcher

    Date Role Description Key Achievements
    13 Jun 2023 Mentor Question: @angular/common version to use #1191 Provided guidance on how to resolve the issue
    12 Jun 2023 PR author Fix peer dependencies #1193
    19 Jul 2023 Issue Reporter Documentation for CATcher's parser #1204 Created issue to discuss documentation for CATcher's parser
    19 Sep 2023 PR author Upgrade to Angular 11 #1203

    WATcher

    Date Role Description Key Achievements
    29 Jun 2023 PR Reviewer Detail page detail list #131
    29 Jun 2023 PR Reviewer Add wrap for username in issues-viewer's card-view #147
    29 Jun 2023 PR Reviewer Disable milestone filter if there are no milestones #149
    29 Jun - 18 Jul PR Reviewer Add reset labels feature #150 Mentored PR author to improve code quality and readability
    30 Jun 2023 PR Reviewer Show loading spinner on switch repository #151
    28 Oct 2023 PR Reviewer Option to Limit Repository Access #215

    CATcher

    Date Role Description Key Achievements
    Week 2 PR Reviewer Uncaught error when invalid link is clicked #1239
    Week 4 PR Reviewer Default branch to main #1234
    Week 4 PR Author Angular 12 #1242
    Week 5 PR Reviewer Faulty list view when back navigating #1243
    Week 6 PR Reviewer Fix markdown blockquote preview difference #1245
    Week 6 Issue Reporter Migrate to ESLint #1247
    Week 7 PR Reviewer Assisted in the creation of new CATcher release
    Week 7 - 8 Issue Reporter & PR Author Address neglected depenedencies in CATcher
    Week 11 PR Reviewer Add documentation for CATcher's parser #1240
    Week 13 PR Reviewer Add login redirect #1256
    Reading Week PR Reviewer & Co-author Migrate from TSLint to ESLint #1250 Had to step in to complete the PR
    Reading Week PR Author Upgrade to Angular 13 #1249
    Reading Week PR Author Fix e2e regression caused by changes in AuthService #1275

    WATcher

    Date Role Description Key Achievements
    Week 4 PR Reviewer Show list of hidden users #235
    Week 4 PR Reviewer Build in Github Actions #239
    Week 5 PR Reviewer Remove unused session-fix-confirmation component #250
    Week 5 PR Reviewer Remove unused models #253
    Week 6 PR Reviewer Upgrade to Angular 11 #252
    Recess PR Reviewer Fix zone testing import error #269

    External Project - SourceAcademy

    Date Role Description Key Achievements
    Week 13 PR Author Fix double window prompt when uploading users #2943 Fixed a bug
    Week 13 PR Author i18n framework #2946 Laid the groundwork for internationalization in source academy
    +date-fns, date-fns.org

    -
    +
    -

    Hibernate

    session.flush()

    EntityManagers do not always immediate execute the underly SQL statement. One such example is when we create and persist a new entity, the createdAt timestamp is not updated in the entity object in our application until we call flush().

    This is because by calling flush() we can ensure that all outstanding SQL statements are executed and that the persistence context and the db is synchronized.

    Persistent entities

    Persistent entities are entities that are known by the persistence provider, Hibernate in this case. An entity(object) can be made persistent by either saving or reading an object from a session. Any changes (e.g., calling a setter) made to persistent entities are automatically persisted into the database.

    We can stop hibernate from tracking and automatically updating the entities by calling detach(Entity) or evict(Entity). This will result in the entity becoming detached. While detached, Hibernate will have no longer track the changes made to the entity. To save the changes to the database or make the entity persistent again, we can use merge(Entity).

    References

    While using the new SQL db, we often find ourselves needing to refer to another related entity for example FeedbackSessionLogs.setStudent(studentEntity). This would often require us to query the db for the object and then call the setter. This is inefficient especially if we already have information like the studentEntity's primary key.

    Hibernate provides a getReference() method which returns a proxy to an entity, that only contains a primary key, and other information are lazily fetched. While creating the proxy, Hibernate does not query the db. Here is an article that goes through different scenarios using reference to see which operations would result in Hibernate performing a SELECT query and which does not. It also includes some information on cached entities in Hibernate.

    It is important to note that, since Hibernate does not check that the entity actually exists in the db on creation of the proxy, the proxy might contain a primary key that does not exist in the db. The application should be designed to handle such scenarios when using references. Here is more information on the difference between getReference() and find().

    Testing

    Mockito

    In unit testing, a single component is isolated and tested by replacing its dependencies with stubs/mocks. This allows us to test only the behaviour of the SUT.

    Mockito provides multiple methods that help to verify the behaviour of the SUT and also determine how the mocked dependencies are supposed to behave.

    • verify() this method allows us to verify that a method of a mocked class is called. It can be combined with other methods like times(x) which allowsus to verify that the method is only called x times.

    • Argument matchers like anyInt(), anyString() and allows us to define a custom matcher using argThat(). These argument matchers can be used to ensure that the correct arguments are being passed to the other dependencies. This is useful if the method you are testing does not return a value useful for determining the correctness of the method.

    • when() and thenReturn() These are methods that allow us to define the behaviour of other dependencies that are not under test.

      For e.g., when(mockLogic.someMethod(args)).thenReturn(value) makes it such that when the SUT invokes someMethod() with args from the mockLogic class, value is will be returned by someMethod(args).

    GCP

    Learnt about how the different features that are provided by GCP and other third parties come together to make Teammates possible.

    Most of the information is from the Platform Guide in the teammates-ops repo.

    • Setting up OAuth 2.0 to allow users to login with their google credentials
    • Google cloud storage
    • Google cloud SQL
    • Debugging using logs from Google Cloud's logging service
    • Setting up a cron job
    • Using email sending services like Mailjet
    • Using DBeaver to insepct and manipulate the SQL database
    +

    Hibernate

    session.flush()

    EntityManagers do not always immediate execute the underly SQL statement. One such example is when we create and persist a new entity, the createdAt timestamp is not updated in the entity object in our application until we call flush().

    This is because by calling flush() we can ensure that all outstanding SQL statements are executed and that the persistence context and the db is synchronized.

    Persistent entities

    Persistent entities are entities that are known by the persistence provider, Hibernate in this case. An entity(object) can be made persistent by either saving or reading an object from a session. Any changes (e.g., calling a setter) made to persistent entities are automatically persisted into the database.

    We can stop hibernate from tracking and automatically updating the entities by calling detach(Entity) or evict(Entity). This will result in the entity becoming detached. While detached, Hibernate will have no longer track the changes made to the entity. To save the changes to the database or make the entity persistent again, we can use merge(Entity).

    References

    While using the new SQL db, we often find ourselves needing to refer to another related entity for example FeedbackSessionLogs.setStudent(studentEntity). This would often require us to query the db for the object and then call the setter. This is inefficient especially if we already have information like the studentEntity's primary key.

    Hibernate provides a getReference() method which returns a proxy to an entity, that only contains a primary key, and other information are lazily fetched. While creating the proxy, Hibernate does not query the db. Here is an article that goes through different scenarios using reference to see which operations would result in Hibernate performing a SELECT query and which does not. It also includes some information on cached entities in Hibernate.

    It is important to note that, since Hibernate does not check that the entity actually exists in the db on creation of the proxy, the proxy might contain a primary key that does not exist in the db. The application should be designed to handle such scenarios when using references. Here is more information on the difference between getReference() and find().

    Testing

    Mockito

    In unit testing, a single component is isolated and tested by replacing its dependencies with stubs/mocks. This allows us to test only the behaviour of the SUT.

    Mockito provides multiple methods that help to verify the behaviour of the SUT and also determine how the mocked dependencies are supposed to behave.

    • verify() this method allows us to verify that a method of a mocked class is called. It can be combined with other methods like times(x) which allowsus to verify that the method is only called x times.

    • Argument matchers like anyInt(), anyString() and allows us to define a custom matcher using argThat(). These argument matchers can be used to ensure that the correct arguments are being passed to the other dependencies. This is useful if the method you are testing does not return a value useful for determining the correctness of the method.

    • when() and thenReturn() These are methods that allow us to define the behaviour of other dependencies that are not under test.

      For e.g., when(mockLogic.someMethod(args)).thenReturn(value) makes it such that when the SUT invokes someMethod() with args from the mockLogic class, value is will be returned by someMethod(args).

    GCP

    Learnt about how the different features that are provided by GCP and other third parties come together to make Teammates possible.

    Most of the information is from the Platform Guide in the teammates-ops repo.

    • Setting up OAuth 2.0 to allow users to login with their google credentials
    • Google cloud storage
    • Google cloud SQL
    • Debugging using logs from Google Cloud's logging service
    • Setting up a cron job
    • Using email sending services like Mailjet
    • Using DBeaver to insepct and manipulate the SQL database
    -

    TEAMMATES

    Overview

    • Assisted in migration of GetCourseJoinStatusAction and PutDataBundleDocumentsAction
    • Created test cases for methods in FeedbackSessionsDb and FeedbackQuestionsDb
    • Migrated several E2E tests to use Sql entities
    • Participated in MTS design discussions
    • Adhoc tasks and E2E test for ARF project
    • Backend(db, logic, cronjob) and frontend work on logs project
    • Set up staging environment for logs project

    Achievements by Week

    Week Achievements
    3 Merged PR: [#12048] Migrate GetCourseJoinStatusAction #12713
    4 Merged PR: [#12048] Migrate PutDataBundleDocumentsAction #12734
    5 Merged PR: [#12048] Update restoreDeletedFeedbackSession to save updated entity to db #12751
    5 Merged PR: [#12048] Add test cases for FeedbackSessionsDb #12752
    R Merged PR: [#12048] Add tests for FeedbackQuestionsDbIT #12781
    R Merged PR: [#12048] Migrate instructor notification page e2e test #12792
    R Merged PR: [#12048] Migrate FeedbackMcqQuestionE2ETest #12820
    8 Merged PR: [#11843] Create FeedbackSessionLog entity and cron job action #12895
    8 Merged PR: [#12048] Migrate FeedbackMsqQuestionE2ETest #12904
    9 Merged PR: [#12048] Remove unnecessary loading of datastore entities in InstructorNotificationsPageE2ETest #12911
    9 Merged PR: [#11843] Create Logic and Db layer for FeedbackSessionLogs #12914
    10 Merged PR: [#11843] Update GetFeedbackSessionLogsAction to use SQL db #12938
    11 Merged PR: [#11843] Update front end for session activity logs #12973
    12 Merged PR: [#11878] Update DeleteAccountRequest to reference by ID #12997
    12 Merged PR: [#11878] Remove unused modal in AdminHomePage #12998
    12 Merged PR: [#11878] Update ResetAccountRequest to reference by ID #13002
    12 Reviewed PR: [#11878] Get account request by uuid #13007
    12 Reviewed PR: [#12048] Migrate StudentCourseJoinConfirmationPageE2ETest #13008
    12 Merged PR: [#11878] Request Page E2E #13015
    12 Reviewed PR: [#11878] Reference account requests by ID in tests #13017
    13 Reviewed PR: [#11878] Add Admin E2E Tests #13020
    13 Merged PR: [#11843] Fix front end bugs #13037
    13 Merged PR: [#11843] Merge student-activity-logs into master #13041
    13 Merged PR: [#11878] Remove ref by email and institute #13044
    +

    TEAMMATES

    Overview

    • Assisted in migration of GetCourseJoinStatusAction and PutDataBundleDocumentsAction
    • Created test cases for methods in FeedbackSessionsDb and FeedbackQuestionsDb
    • Migrated several E2E tests to use Sql entities
    • Participated in MTS design discussions
    • Adhoc tasks and E2E test for ARF project
    • Backend(db, logic, cronjob) and frontend work on logs project
    • Set up staging environment for logs project

    Achievements by Week

    Week Achievements
    3 Merged PR: [#12048] Migrate GetCourseJoinStatusAction #12713
    4 Merged PR: [#12048] Migrate PutDataBundleDocumentsAction #12734
    5 Merged PR: [#12048] Update restoreDeletedFeedbackSession to save updated entity to db #12751
    5 Merged PR: [#12048] Add test cases for FeedbackSessionsDb #12752
    R Merged PR: [#12048] Add tests for FeedbackQuestionsDbIT #12781
    R Merged PR: [#12048] Migrate instructor notification page e2e test #12792
    R Merged PR: [#12048] Migrate FeedbackMcqQuestionE2ETest #12820
    8 Merged PR: [#11843] Create FeedbackSessionLog entity and cron job action #12895
    8 Merged PR: [#12048] Migrate FeedbackMsqQuestionE2ETest #12904
    9 Merged PR: [#12048] Remove unnecessary loading of datastore entities in InstructorNotificationsPageE2ETest #12911
    9 Merged PR: [#11843] Create Logic and Db layer for FeedbackSessionLogs #12914
    10 Merged PR: [#11843] Update GetFeedbackSessionLogsAction to use SQL db #12938
    11 Merged PR: [#11843] Update front end for session activity logs #12973
    12 Merged PR: [#11878] Update DeleteAccountRequest to reference by ID #12997
    12 Merged PR: [#11878] Remove unused modal in AdminHomePage #12998
    12 Merged PR: [#11878] Update ResetAccountRequest to reference by ID #13002
    12 Reviewed PR: [#11878] Get account request by uuid #13007
    12 Reviewed PR: [#12048] Migrate StudentCourseJoinConfirmationPageE2ETest #13008
    12 Merged PR: [#11878] Request Page E2E #13015
    12 Reviewed PR: [#11878] Reference account requests by ID in tests #13017
    13 Reviewed PR: [#11878] Add Admin E2E Tests #13020
    13 Merged PR: [#11843] Fix front end bugs #13037
    13 Merged PR: [#11843] Merge student-activity-logs into master #13041
    13 Merged PR: [#11878] Remove ref by email and institute #13044
    -
    +
    -
    +
    -

    Hibernate

    As part of the v9-migration, I had to familiarise myself with the Hibernate ORM. It is my first time using Hibernate ORM, as I was only familiar with the Eloquent ORM from Laravel, as well as the ORM from Django. ORMs are extremely beneficial as they essentially translate between data representations used in the application and those in the database. It also makes your code more readable as it simplifies complex queries and makes transitioning between various database engines seamless, should the need arise.

    Aspects Learnt:

    • Learnt the fundamentals of Object-Relational Mapping (ORM), enabling the conversion of data between the database and object-oriented programming languages, in particular Java
    • Usage of persist and merge to insert or update an entity respectively
    • Learnt about Hibernate's internal caching mechanisms
    • Managing transactions

    Resources

    Solr

    TEAMMATES uses Solr for full-text search, and is structured to function for both the datastore and SQL databases.

    Aspects Learnt:

    • Gained proficiency in Solr's query syntax to perform powerful searches, including filtering, sorting, and faceting to retrieve relevant documents efficiently
    • Understood how Solr is integrated into the TEAMMATES backend for searching or indexing

    Resources:

    PostgreSQL

    Having only used SQLite and MySQL in the past, I had to familiarise myself with PostgreSQL as it is the SQL database used in TEAMMATES.

    Aspects Learnt:

    • Learnt about PostgreSQL's architecture, including its use of processes for client connections, MVCC (Multiversion Concurrency Control), and its write-ahead logging (WAL) for data integrity
    • Write-Ahead Logging (WAL) involves recording changes to a log before any changes are made to the actual database. This method is crucial for recovery after a crash, as it ensures that all committed transactions are saved.
    • MVCC allows multiple users to access the database concurrently without locking the data. This means readers don't block writers and vice-versa, leading to increased performance and lower waiting times during operations, which is a significant advantage over MySQL's more traditional locking mechanisms
    • Learnt about the differences between the 3 SQL database engines

    Resources:

    Angular

    Having had no experience utilising Angular prior to working on TEAMMATES, I was introduced to several neat features that Angular has to offer.

    Aspects Learnt:

    • Angular's component-based architecture makes it easy to build and maintain large applications. Each component is encapsulated with its own functionality and is responsible for a specific UI element. This modularity allowed me to quickly understand and contribute to the project, as I could focus on individual components without being overwhelmed by the entire codebase.

    • Angular's dependency injection system is a design pattern in which a class receives its dependencies from external sources rather than creating them itself. This approach simplifies the development of large applications by making it easier to manage and test components.

    • Angular offers the trackBy function, which I used in conjunction with the *ngFor directive to manage lists more efficiently. Normally, *ngFor can be inefficient because it re-renders the entire list when the data changes. However, by implementing trackBy, Angular can track each item's identity and only re-render items that have actually changed. This reduces the performance cost, especially in large lists where only a few items change.

    Google Cloud

    When deploying the staging environment for the ARF upgrade, I managed to work with and gain familiarity with the deployment workflow, as well as several GCP tools and the gcloud sdk.

    Aspects Learnt

    • Navigating GCP and the services they have to offer
    • Setting up OAuth 2.0 Client and Gmail API credentials
    • Configuring up a VPC for communication between various services
    • Deployment using gcloud
    • Navigating server logs to investigate issues

    Resources:

    Snapshot Testing

    Snapshot testing with Jest is an effective strategy to ensure that user interfaces remain consistent despite code changes. It's important for developers to maintain updated snapshots and commit these changes as part of their regular development process.

    Snapshot tests are particularly useful for detecting unexpected changes in the UI. By capturing the "snapshot" of an output, developers can compare the current component render against a stored version. If changes occur that aren't captured in a new snapshot, the test will fail, signaling the need for a review.

    Unit Testing with Mockito

    Mockito is a popular Java-based framework used primarily for unit testing. It allows developers to isolate the units of code they are testing, to focus solely on the component of software that is being tested.

    Mockito allows developers to create mock implementations of dependencies for a particular class. This way, developers can isolate the behavior of the class itself without needing the actual dependencies to be active. By using mock objects instead of real ones, tests can be simplified as they don’t have to cater to the complexities of actual dependencies, such as database connections or external services. Mockito also provides tools to verify that certain behaviors happened during the test. For example, it can verify that a method was called with certain parameters or a certain number of times.

    Resources:

    E2E Testing

    E2E Testing allows us to ensure that the application functions as expected from the perspective of the user. This type of testing simulates real user scenarios to validate the complete functionality of the application. Common tools for conducting E2E testing include Selenium, Playwright, and Cypress.

    Throughout the semester, I had to migrate several E2E tests and also create some new ones as part of the ARF project, which exposed me to the Page Object Model, which allows for easier testing and maintenance. It enhances code reusability as the same Page Object Model can be reused across related test cases.

    E2E Tests may be the most complicated type of test to write, as it involves multiple components of the application; testing it as a whole, rather than in isolated components. As such, pinpointing the sources of errors or failures can be difficult. E2E Tests can also be flaky at times, passing in one run, and failing on others, which could occur due to numerous reasons such as timing issues, concurrency problems or subtle bugs that occur under specific circumstances. However, it is still highly useful as it helps to identify issues in the interaction between integrated components, and also simulates real user scenarios.

    Resources:

    +

    Hibernate

    As part of the v9-migration, I had to familiarise myself with the Hibernate ORM. It is my first time using Hibernate ORM, as I was only familiar with the Eloquent ORM from Laravel, as well as the ORM from Django. ORMs are extremely beneficial as they essentially translate between data representations used in the application and those in the database. It also makes your code more readable as it simplifies complex queries and makes transitioning between various database engines seamless, should the need arise.

    Aspects Learnt:

    • Learnt the fundamentals of Object-Relational Mapping (ORM), enabling the conversion of data between the database and object-oriented programming languages, in particular Java
    • Usage of persist and merge to insert or update an entity respectively
    • Learnt about Hibernate's internal caching mechanisms
    • Managing transactions

    Resources

    Solr

    TEAMMATES uses Solr for full-text search, and is structured to function for both the datastore and SQL databases.

    Aspects Learnt:

    • Gained proficiency in Solr's query syntax to perform powerful searches, including filtering, sorting, and faceting to retrieve relevant documents efficiently
    • Understood how Solr is integrated into the TEAMMATES backend for searching or indexing

    Resources:

    PostgreSQL

    Having only used SQLite and MySQL in the past, I had to familiarise myself with PostgreSQL as it is the SQL database used in TEAMMATES.

    Aspects Learnt:

    • Learnt about PostgreSQL's architecture, including its use of processes for client connections, MVCC (Multiversion Concurrency Control), and its write-ahead logging (WAL) for data integrity
    • Write-Ahead Logging (WAL) involves recording changes to a log before any changes are made to the actual database. This method is crucial for recovery after a crash, as it ensures that all committed transactions are saved.
    • MVCC allows multiple users to access the database concurrently without locking the data. This means readers don't block writers and vice-versa, leading to increased performance and lower waiting times during operations, which is a significant advantage over MySQL's more traditional locking mechanisms
    • Learnt about the differences between the 3 SQL database engines

    Resources:

    Angular

    Having had no experience utilising Angular prior to working on TEAMMATES, I was introduced to several neat features that Angular has to offer.

    Aspects Learnt:

    • Angular's component-based architecture makes it easy to build and maintain large applications. Each component is encapsulated with its own functionality and is responsible for a specific UI element. This modularity allowed me to quickly understand and contribute to the project, as I could focus on individual components without being overwhelmed by the entire codebase.

    • Angular's dependency injection system is a design pattern in which a class receives its dependencies from external sources rather than creating them itself. This approach simplifies the development of large applications by making it easier to manage and test components.

    • Angular offers the trackBy function, which I used in conjunction with the *ngFor directive to manage lists more efficiently. Normally, *ngFor can be inefficient because it re-renders the entire list when the data changes. However, by implementing trackBy, Angular can track each item's identity and only re-render items that have actually changed. This reduces the performance cost, especially in large lists where only a few items change.

    Google Cloud

    When deploying the staging environment for the ARF upgrade, I managed to work with and gain familiarity with the deployment workflow, as well as several GCP tools and the gcloud sdk.

    Aspects Learnt

    • Navigating GCP and the services they have to offer
    • Setting up OAuth 2.0 Client and Gmail API credentials
    • Configuring up a VPC for communication between various services
    • Deployment using gcloud
    • Navigating server logs to investigate issues

    Resources:

    Snapshot Testing

    Snapshot testing with Jest is an effective strategy to ensure that user interfaces remain consistent despite code changes. It's important for developers to maintain updated snapshots and commit these changes as part of their regular development process.

    Snapshot tests are particularly useful for detecting unexpected changes in the UI. By capturing the "snapshot" of an output, developers can compare the current component render against a stored version. If changes occur that aren't captured in a new snapshot, the test will fail, signaling the need for a review.

    Unit Testing with Mockito

    Mockito is a popular Java-based framework used primarily for unit testing. It allows developers to isolate the units of code they are testing, to focus solely on the component of software that is being tested.

    Mockito allows developers to create mock implementations of dependencies for a particular class. This way, developers can isolate the behavior of the class itself without needing the actual dependencies to be active. By using mock objects instead of real ones, tests can be simplified as they don’t have to cater to the complexities of actual dependencies, such as database connections or external services. Mockito also provides tools to verify that certain behaviors happened during the test. For example, it can verify that a method was called with certain parameters or a certain number of times.

    Resources:

    E2E Testing

    E2E Testing allows us to ensure that the application functions as expected from the perspective of the user. This type of testing simulates real user scenarios to validate the complete functionality of the application. Common tools for conducting E2E testing include Selenium, Playwright, and Cypress.

    Throughout the semester, I had to migrate several E2E tests and also create some new ones as part of the ARF project, which exposed me to the Page Object Model, which allows for easier testing and maintenance. It enhances code reusability as the same Page Object Model can be reused across related test cases.

    E2E Tests may be the most complicated type of test to write, as it involves multiple components of the application; testing it as a whole, rather than in isolated components. As such, pinpointing the sources of errors or failures can be difficult. E2E Tests can also be flaky at times, passing in one run, and failing on others, which could occur due to numerous reasons such as timing issues, concurrency problems or subtle bugs that occur under specific circumstances. However, it is still highly useful as it helps to identify issues in the interaction between integrated components, and also simulates real user scenarios.

    Resources:

    -

    TEAMMATES

    Overview

    • Assisted in migration of EnrollStudentsAction, SearchAccountRequestsAction, AccountRequestSearchIndexingWorkerAction
    • Created test cases for methods in CoursesLogic
    • Created integration tests for GetFeedbackSessionSubmittedGiverSetAction and CoursesDb
    • Fix issue with GetSessionResponseStatsActionIT
    • Migrated AdminNotificationsE2ETest and AdminSearchPageE2ETest
    • Fix issues with dual search
    • Created wireframes for ARF upgrade
    • Updated Admin Search Page and Home Page UI for Account Requests Display
    • Created Action for Updating Account Requests (i.e. Editing and Approving)
    • Set up staging server for Account Request Form feature
    • Created E2E Tests for new features related to Account Requests
    • Investigated and rectified bugs found on staging server
    • Contributed code reviews for several ARF-related pull requests
    • Create script and workflow for updating account requests id in Solr

    Achievements by Week

    Week Achievements
    2 Submitted Issue: Excess padding on edit course details component #12693
    3 Merged PR: [#12048] Migrate enroll students action #12715
    4 Merged PR: [#12048] Migrate search account requests action #12726
    5 Merged PR: [#12048] Add tests for CoursesLogic #12746
    5 Merged PR: [#12048] Migrate AccountRequestSearchIndexingWorkerAction #12757
    6 Merged PR: [#12048] Fix GetSessionResponseStatsActionIT #12777
    6 Merged PR: [#12048] Create IT for GetFeedbackSessionSubmittedGiverSetAction #12778
    6 Merged PR: [#12048] Add tests for CoursesDbIT #12786
    R Merged PR: [#12048] Migrate Admin Notifications E2E Test #12793
    R Merged PR: [#12048] Migrate AdminSearchPageE2ETest SQL #12811
    R Merged PR: [#12048] Migrate AdminSearchPageE2ETest #12838
    7 Worked on design document for Account Request Form Upgrade
    7 Created wireframes for new Admin UI for Account Request Form Upgrade
    8 Merged PR: [#12048] Migrate InstructorSearchPageE2ETest #12891
    9 Merged PR: [#11878] Update Admin Home Page UI for ARF #12933
    9 Reviewed PR: [#11878] Remove AccountRequest unique constraint #12899
    10 Merged PR: [#11878] Update Admin Search UI for ARF #12941
    10 Reviewed PR: [#11878] Add GetAllPendingAccountRequests API #12927
    10 Reviewed PR: [#11878] Add snapshot tests for instructor request form UI #12942
    11 Reviewed PR: [#11878] Update SearchAccountRequests endpoint #12950
    11 Reviewed PR: [#11878] Merge master into account-request-form #12972
    11 Merged PR: [#11878] Create Update Account Request Action #12982
    11 Reviewed PR: [#11878] Change institute length limit #12974
    11 Reviewed PR: [#11878] Foundation for getting by ID in account request endpoints #12957
    11 Reviewed PR: [#11878] Add AccountRequest Rejection email generator. #12987
    11 Merged PR: [#11878] Add Edit and Approve Account Requests functionality #12975
    11 Merged PR: [#11878] Fix Account Request Update Search Indexing #12984
    12 Merged PR: [#11878] Create Rejection Modal for Account Requests #12989
    12 Merged PR: [#11878] Convert RejectAccountRequestAction to use transactions #13001
    12 Reviewed PR: [#11878] Update ResetAccountRequest to reference by ID #13002
    12 Merged PR: [#11878] Add Error Message for Approving Existing Account #13004
    12 Merged PR: [#11878] Handle Duplicate Approved Account Requests #13009
    12 Reviewed PR: [#11878] Merge master into feature #13011
    12 Reviewed PR: [#11878] Remove unused modal in AdminHomePage #12998
    12 Merged PR: [#11878] Add tests for Account Request Table #12977
    12 Merged PR: [#11878] Add Admin E2E Tests #13020
    12 Set-up the staging environment for testing the new Account Request Form features
    13 Reviewed PR: [#11878] Add sort by created_at for getAllPendingRequests #13038
    13 Reviewed PR: [#11878] Request Page E2E #13015
    13 Reviewed PR: [#11878] Migrate AccountRequestsLogic unit tests #13043
    13 Merged PR: [#11878] Add Toasts #13028
    13 Merged PR: [#11878] Fix Approval Email Bug #13027
    13 Merged PR: [#11878] Fix Overlapping Tooltip #13026
    13 Merged PR: [#11878] Fix Highlighting and Null Statuses #13031
    13 Merged PR: [#11878] Fix Edit #13056
    13 Merged PR: [#11878] Fix Rejection Modal #13059
    13 Merged PR: [#11878] Fix console errors #13058
    Reading Merged PR: [#11878] Account Request Indexing Script #13076
    +

    TEAMMATES

    Overview

    • Assisted in migration of EnrollStudentsAction, SearchAccountRequestsAction, AccountRequestSearchIndexingWorkerAction
    • Created test cases for methods in CoursesLogic
    • Created integration tests for GetFeedbackSessionSubmittedGiverSetAction and CoursesDb
    • Fix issue with GetSessionResponseStatsActionIT
    • Migrated AdminNotificationsE2ETest and AdminSearchPageE2ETest
    • Fix issues with dual search
    • Created wireframes for ARF upgrade
    • Updated Admin Search Page and Home Page UI for Account Requests Display
    • Created Action for Updating Account Requests (i.e. Editing and Approving)
    • Set up staging server for Account Request Form feature
    • Created E2E Tests for new features related to Account Requests
    • Investigated and rectified bugs found on staging server
    • Contributed code reviews for several ARF-related pull requests
    • Create script and workflow for updating account requests id in Solr

    Achievements by Week

    Week Achievements
    2 Submitted Issue: Excess padding on edit course details component #12693
    3 Merged PR: [#12048] Migrate enroll students action #12715
    4 Merged PR: [#12048] Migrate search account requests action #12726
    5 Merged PR: [#12048] Add tests for CoursesLogic #12746
    5 Merged PR: [#12048] Migrate AccountRequestSearchIndexingWorkerAction #12757
    6 Merged PR: [#12048] Fix GetSessionResponseStatsActionIT #12777
    6 Merged PR: [#12048] Create IT for GetFeedbackSessionSubmittedGiverSetAction #12778
    6 Merged PR: [#12048] Add tests for CoursesDbIT #12786
    R Merged PR: [#12048] Migrate Admin Notifications E2E Test #12793
    R Merged PR: [#12048] Migrate AdminSearchPageE2ETest SQL #12811
    R Merged PR: [#12048] Migrate AdminSearchPageE2ETest #12838
    7 Worked on design document for Account Request Form Upgrade
    7 Created wireframes for new Admin UI for Account Request Form Upgrade
    8 Merged PR: [#12048] Migrate InstructorSearchPageE2ETest #12891
    9 Merged PR: [#11878] Update Admin Home Page UI for ARF #12933
    9 Reviewed PR: [#11878] Remove AccountRequest unique constraint #12899
    10 Merged PR: [#11878] Update Admin Search UI for ARF #12941
    10 Reviewed PR: [#11878] Add GetAllPendingAccountRequests API #12927
    10 Reviewed PR: [#11878] Add snapshot tests for instructor request form UI #12942
    11 Reviewed PR: [#11878] Update SearchAccountRequests endpoint #12950
    11 Reviewed PR: [#11878] Merge master into account-request-form #12972
    11 Merged PR: [#11878] Create Update Account Request Action #12982
    11 Reviewed PR: [#11878] Change institute length limit #12974
    11 Reviewed PR: [#11878] Foundation for getting by ID in account request endpoints #12957
    11 Reviewed PR: [#11878] Add AccountRequest Rejection email generator. #12987
    11 Merged PR: [#11878] Add Edit and Approve Account Requests functionality #12975
    11 Merged PR: [#11878] Fix Account Request Update Search Indexing #12984
    12 Merged PR: [#11878] Create Rejection Modal for Account Requests #12989
    12 Merged PR: [#11878] Convert RejectAccountRequestAction to use transactions #13001
    12 Reviewed PR: [#11878] Update ResetAccountRequest to reference by ID #13002
    12 Merged PR: [#11878] Add Error Message for Approving Existing Account #13004
    12 Merged PR: [#11878] Handle Duplicate Approved Account Requests #13009
    12 Reviewed PR: [#11878] Merge master into feature #13011
    12 Reviewed PR: [#11878] Remove unused modal in AdminHomePage #12998
    12 Merged PR: [#11878] Add tests for Account Request Table #12977
    12 Merged PR: [#11878] Add Admin E2E Tests #13020
    12 Set-up the staging environment for testing the new Account Request Form features
    13 Reviewed PR: [#11878] Add sort by created_at for getAllPendingRequests #13038
    13 Reviewed PR: [#11878] Request Page E2E #13015
    13 Reviewed PR: [#11878] Migrate AccountRequestsLogic unit tests #13043
    13 Merged PR: [#11878] Add Toasts #13028
    13 Merged PR: [#11878] Fix Approval Email Bug #13027
    13 Merged PR: [#11878] Fix Overlapping Tooltip #13026
    13 Merged PR: [#11878] Fix Highlighting and Null Statuses #13031
    13 Merged PR: [#11878] Fix Edit #13056
    13 Merged PR: [#11878] Fix Rejection Modal #13059
    13 Merged PR: [#11878] Fix console errors #13058
    Reading Merged PR: [#11878] Account Request Indexing Script #13076
    -
    +
    -

    Gradle

    Gradle is a very flexible build automation tool used for everything from testing and formatting, to builds and deployments. Unlike with other build automation tools like Maven where build scripts written in XML (a widely hated feature of the tool), Gradle build scripts are written in a domain specific language based on Groovy or Kotlin, which are both JVM based languages. This means that it can interact seamlessly with Java libraries.

    Gradle is also much more performant than alternatives like Maven because of its:

    • Build caching: Only reruns tasks whose inputs have been changed.
    • Gradle daemon: A background process that stores information about the project in memory so that startup time can be cut down during builds.

    RepoSense recently added functionality for hot reload on frontend as a Gradle task, which made frontend development a lot more productive. Unfortunately, the feature isn't available on Linux because the package we were using (Apache Ant's condition package) could not specifically check for it. Migrating to Gradle's own platform package recently taken out of incubation, allowed us to support all 3 prominent operating systems.

    References:

    GitHub Actions and API

    Like Gradle, Github Actions help with automation of workflows like CI/CD and project management, and can be triggered by a variety of events (pull requests, issues, releases, forks, etc). It also has a growing library of plugins that make workflows a lot easier to set-up. I was surprised that there is some nice tooling support for GitHub actions on IntelliJ.

    GitHub actions allows users to run CI on a variety of operating systems, such as Ubuntu XX.04, macOS and Windows Server (which is virtually the same as Windows 10/11 but with better hardware support and more stringent security features).

    GitHub also provides a variety of API to interact with these objects. One quirk I came across with the API was that posting single comments on pull requests need to go through the issues endpoint instead of the pulls endpoint (the endpoint for pulls requires code to be referenced). This doesn't cause problems since issues and pulls will never have identical IDs.

    GitHub deployment APIs also returns deployment information in pages, which is a sensible thing to do but can cause slight inconvenience when long running PRs have more deployments than can fit in a page.

    Actions and APIs also have some great documentation:

    Git Remotes

    Git exploded in popularity in large part due to Git hosting providers like GitHub. GitLab and Bitbucket are also commonly used Git hosts. RepoSense has thus far only largely supported GitHub, but there is a clear incentive to support other commonly used remotes. This is made a little challenging due to differences in conventions between the sites:

    base_url Commit View Blame View
    GitHub github.com {base_url}/{org}/{repo_name}/commit/{commit_hash} {base_url}/{org}/{repo_name}/blame/{branch}/{file_path}
    GitLab gitlab.com {base_url}/{org}/{repo_name}/-/commit/{commit_hash} {base_url}/{org}/{repo_name}/-/blame/{branch}/{file_path}
    Bitbucket bitbucket.org {base_url}/{org}/{repo_name}/commits/{commit_hash} {base_url}/{org}/{repo_name}/annotate/{branch}/{file_path}

    For example, Bitbucket uses the term 'annotate' instead of 'blame' because the word 'blame' is insufficiently positive.

    Triangular Git workflows

    In investigating the output of git remote -v, I noticed there were 2 remotes (fetch and push) for each remote name, which I was confused by. The utility of the separation of fetch and push remotes is for triangular workflows.

    We are probably familiar with the common workflow for updating a branch on a forked repo which involves first pulling updates from upstream master, then making changes and pushing to our own fork. This requires remembering to fetch and push to separate repos. With triangular workflows, you can have fetch and push apply to separate repos but with the same remote name, which makes this process much more convenient.

    Cypress Tests

    Cypress is a frontend testing tool for testing applications that run in the browser, with tests that are easy to read and write. It uses browser automation (similar to Selenium) and comes with a browser and relevant dependencies out of the box, so it's very easy to set-up. Cypress also provides a dashboard for convenient monitoring of test runs.

    https://docs.cypress.io/guides/overview/why-cypress#In-a-nutshell

    Bash Scripting

    Bash scripts can be run in a github action workflow, which greatly expands the scope of things you can do with actions. Bash is quite expressive (I hadn't realised just how much it could do). some cool things I learned you could do:

    • {$VAR,,} to lowercase string in $VAR.
    • $* gives parameter values separated by the value in IFS (Internal File Separator).
    • Pipe output into python3 with a -c flag and perform more complex processing with a single line python program.
    • Standard output and error can be redirected separately (e.g. ls 1> out 2> err)

    Vue

    Being relatively new to frontend tools, I found Vue.js to be quite interesting. Vue allows code reusability and abstractions through components. While I didn’t work extensively on the frontend, what I learned from the bits that I did work on was quite cool:

    Vue state: I found it interesting that you could have computed properties that are accessed the same way as properties, but can depend on other properties and can dynamically update when these properties change. This is often more elegant than using a Vue watcher to update a field. You can even have computed setters that update dependent properties when set. A watcher, however, can be more appropriate when responses to changing data are expensive or need to be done asynchronously.

    Vue custom directives: Directives are ways to reuse lower level DOM logic. Directives can define vue life-cycle hooks and later be bound to components (can actually take in any JavaScript object literal). For implementing lazy loads, I needed to use the vue-observe-visibility (external library) directive with slight modification to the hooks to be compatible with Vue3.

    References:

    Pug

    Pug is a templating language that compiles to HTML. It is less verbose and much more maintainable than HTML, and also allows basic presentation logic with conditionals, loops and case statements.

    JavaScript Quirks

    There are a lot of these, and most just remain quirks but some result in actual unintended bugs in production (often in edge cases). It was interesting to see this in our contribution bar logic. A technique sometimes used to extract the integer part of a number is to use parseInt (it's even suggested in a Stack Overflow answer). It turns out we were using this for calculating the number of contribution bars to display for a user. This works for most values, but breaks when numbers become very large or small (less than 10^-7). In this unlikely situation, we'd display anywhere from 1 to 9 extra bars (moral: use Math.floor instead!).

    Browser Engines

    An investigation into string representations in browsers led me down a rabbit hole of JavaScript runtimes and engines, and ultimately improved my understanding of JavaScript in general. Different browsers have different JS engines - Chrome uses V8, Firefox uses SpiderMonkey (the original JS engine written by Brendan Eich), Edge used to use Chakra but now also uses V8, Safari uses WebKit, etc. Engines often differ significantly in terms of the pipeline for code execution, garbage collection, and more.

    The V8 engine as an example, first parses JavaScript into an Abstract Syntax Tree (AST) which is then compiled into bytecode. This bytecode is interpreted by the Ignition interpreter (Ignition also handles compilation of the AST into bytecode). Code that is revisited often during interpretation is marked "hot" and compiled further into highly efficient machine code. This technique of optimising compilation based on run-time profiling (Just-In-Time (JIT) compilation) is also used in other browser engines like SpiderMonkey and the JVM.

    The engine is used for running things that are on the browser stack. JS is run in a single thread, and asynchronous tasks are done through callbacks in a task queue. The main script is first run, with things like promises and timeouts inserting tasks into a task queue. Tasks (and microtasks which are more urgent, lower overhead tasks that can execute when the call stack is empty even while the main script is running) in a task queue wait for the stack to be empty before being executed. Page re-renders are also blocked by running code on the stack (long delays between re-renders are undesirable). Using callbacks and hence not blocking the task queue, allows re-rendering to be done more regularly, improving responsiveness. The precise behaviour of task de-queueing (and lower overhead microtasks) can actually differ between browsers, which causes considerable headache.

    References:

    General Software Engineering/Design Considerations

    Discussions over PRs, issues and generally attempting to solve issues, were a great way to explore design considerations. Here is a non-exhaustive list of interesting points that came up this semester:

    In-house vs External Library

    In implementing new functionality or extending existing functionality (Git interface for example), there is usually a question of whether it would be easier to maintain features in-house, or use external libraries. It might be a good idea to maintain core functionality in-house since we'd want more fine-grained control over these features and new features can be added/fixed quickly as needed. At the same time, external libraries save time and cost of learning about and solving possibly complex problems.

    External libraries can however introduce vulnerabilities (several incidences of dependency sabotage with npm packages like color.js and node-ipc hit fairly close to home over the course of the semester). Hence, selection of libraries should be a well-deliberated process and should include considerations like active-ness of the project and diversity of maintainers.

    Recency vs Ubiquity

    In maintaining versions of dependencies, it is often important to weigh upgrading to a new version to get the newest features against possibly alienating users who don't already have that version. Neither is necessarily better than the other and will likely depend on the nature of the product. A new product for developers would probably have users who want new versions with the bleeding edge of features. On the other hand products that already have a large user base and aimed at less technical users might want to favour ubiquitous versions. Since RepoSense is aimed at users of all skill levels, including novice developers, we often default to the later approach.

    In a similar vein, it might be important to make sure that new features don't break backward compatibility so that the end-user won't face significant hindrances with making upgrades. At the same time, the need to be backwards compatible can be a root of evil, introducing all manners of hacks and fixes. This highlights the importance of foresight in the early stages of development. Also, deciding when to stop backwards compatibility with a significant version bump can be a non-trivial decision. Doing so should come with thorough migration documentation (sparse documentation for Vue2 -> Vue3 migration caused a lot of developer grievances).

    Isolated Testing

    While it's fairly obvious that modularity with tests is important and that components should be tested in isolation with unchanging inputs, it is easy to let slip lapses in the form of hidden dependencies that prevent components from being isolated, or having inputs that are actually non-static. Some of these issues came up over the course of the semester but it struck me just how easy it was for them to slip by unnoticed. There aren't necessarily language-level features that enforce coupling rules for the most part since many of these dependencies can be quite implicit.

    This had me thinking about the importance of being explicit in crucial sections of code, as described below.

    Being Explicit

    It is important that programmers make the behaviour of certain crucial sections of code as explicit as possible. One way of doing this is through good naming of methods and variables, and grouping statements semantically into methods or classes. Large chunks of code is detrimental and allows implicit slips in behaviour that can go unnoticed. So we might even want to make new special classes that do very specific things to make it clear that it is an important subroutine/behaviour that deserves its own abstraction.

    At the same time, high reliance on object orientation can lead to too many classes, each class doing trivial things and with high coupling between the classes leading to spaghetti logic that doesn't do very much to alleviate implicit behaviour. There exists a delicate middle ground characterised by semantically well partitioned code.

    Behavioural Consistency

    The earlier section on Javascript quirks were a result of an overly accommodating feature integration during the early stages of development. It's become a cautionary tale of sorts of the importance of consistency and predictability in behaviour. In adding new features, it was personally very tempting to allow small inconsistencies in behaviour in favour of simplicity of implementation. While simplicity is a desirable outcome, I'd argue that consistency is more important (small inconsistencies can runaway into larger un-fixable differences).

    Consistency can be with respect to various things. For example, we might want that identical inputs behave the same under similar conditions (differing in non-semantic respects) or that similar inputs (differing in non-semantic respects) behave the same under the identical conditions, etc.

    Miscellaneous helpful tools

    • The command line tool GitHub cli provides a very handy way to access GitHub API, and has been useful for checking out PRs, interacting with issues, managing workflows, etc right from the command line.
    • git bisect is a very nice way to find problematic commits. Given a bad commit and a previously good commit, git bisect does a binary search (either automatically with a test or with manual intervention) to find the problematic commit where the issue was introduced.
    • Search through previously run commands (with the first few characters) with ctrl-r in a bash shell.
    • GitHub issues and PRs have advanced search syntax like involves:USER for all items that involve a user. This was very useful for updating progress.md. More features here.
    +

    Gradle

    Gradle is a very flexible build automation tool used for everything from testing and formatting, to builds and deployments. Unlike with other build automation tools like Maven where build scripts written in XML (a widely hated feature of the tool), Gradle build scripts are written in a domain specific language based on Groovy or Kotlin, which are both JVM based languages. This means that it can interact seamlessly with Java libraries.

    Gradle is also much more performant than alternatives like Maven because of its:

    • Build caching: Only reruns tasks whose inputs have been changed.
    • Gradle daemon: A background process that stores information about the project in memory so that startup time can be cut down during builds.

    RepoSense recently added functionality for hot reload on frontend as a Gradle task, which made frontend development a lot more productive. Unfortunately, the feature isn't available on Linux because the package we were using (Apache Ant's condition package) could not specifically check for it. Migrating to Gradle's own platform package recently taken out of incubation, allowed us to support all 3 prominent operating systems.

    References:

    GitHub Actions and API

    Like Gradle, Github Actions help with automation of workflows like CI/CD and project management, and can be triggered by a variety of events (pull requests, issues, releases, forks, etc). It also has a growing library of plugins that make workflows a lot easier to set-up. I was surprised that there is some nice tooling support for GitHub actions on IntelliJ.

    GitHub actions allows users to run CI on a variety of operating systems, such as Ubuntu XX.04, macOS and Windows Server (which is virtually the same as Windows 10/11 but with better hardware support and more stringent security features).

    GitHub also provides a variety of API to interact with these objects. One quirk I came across with the API was that posting single comments on pull requests need to go through the issues endpoint instead of the pulls endpoint (the endpoint for pulls requires code to be referenced). This doesn't cause problems since issues and pulls will never have identical IDs.

    GitHub deployment APIs also returns deployment information in pages, which is a sensible thing to do but can cause slight inconvenience when long running PRs have more deployments than can fit in a page.

    Actions and APIs also have some great documentation:

    Git Remotes

    Git exploded in popularity in large part due to Git hosting providers like GitHub. GitLab and Bitbucket are also commonly used Git hosts. RepoSense has thus far only largely supported GitHub, but there is a clear incentive to support other commonly used remotes. This is made a little challenging due to differences in conventions between the sites:

    base_url Commit View Blame View
    GitHub github.com {base_url}/{org}/{repo_name}/commit/{commit_hash} {base_url}/{org}/{repo_name}/blame/{branch}/{file_path}
    GitLab gitlab.com {base_url}/{org}/{repo_name}/-/commit/{commit_hash} {base_url}/{org}/{repo_name}/-/blame/{branch}/{file_path}
    Bitbucket bitbucket.org {base_url}/{org}/{repo_name}/commits/{commit_hash} {base_url}/{org}/{repo_name}/annotate/{branch}/{file_path}

    For example, Bitbucket uses the term 'annotate' instead of 'blame' because the word 'blame' is insufficiently positive.

    Triangular Git workflows

    In investigating the output of git remote -v, I noticed there were 2 remotes (fetch and push) for each remote name, which I was confused by. The utility of the separation of fetch and push remotes is for triangular workflows.

    We are probably familiar with the common workflow for updating a branch on a forked repo which involves first pulling updates from upstream master, then making changes and pushing to our own fork. This requires remembering to fetch and push to separate repos. With triangular workflows, you can have fetch and push apply to separate repos but with the same remote name, which makes this process much more convenient.

    Cypress Tests

    Cypress is a frontend testing tool for testing applications that run in the browser, with tests that are easy to read and write. It uses browser automation (similar to Selenium) and comes with a browser and relevant dependencies out of the box, so it's very easy to set-up. Cypress also provides a dashboard for convenient monitoring of test runs.

    https://docs.cypress.io/guides/overview/why-cypress#In-a-nutshell

    Bash Scripting

    Bash scripts can be run in a github action workflow, which greatly expands the scope of things you can do with actions. Bash is quite expressive (I hadn't realised just how much it could do). some cool things I learned you could do:

    • {$VAR,,} to lowercase string in $VAR.
    • $* gives parameter values separated by the value in IFS (Internal File Separator).
    • Pipe output into python3 with a -c flag and perform more complex processing with a single line python program.
    • Standard output and error can be redirected separately (e.g. ls 1> out 2> err)

    Vue

    Being relatively new to frontend tools, I found Vue.js to be quite interesting. Vue allows code reusability and abstractions through components. While I didn’t work extensively on the frontend, what I learned from the bits that I did work on was quite cool:

    Vue state: I found it interesting that you could have computed properties that are accessed the same way as properties, but can depend on other properties and can dynamically update when these properties change. This is often more elegant than using a Vue watcher to update a field. You can even have computed setters that update dependent properties when set. A watcher, however, can be more appropriate when responses to changing data are expensive or need to be done asynchronously.

    Vue custom directives: Directives are ways to reuse lower level DOM logic. Directives can define vue life-cycle hooks and later be bound to components (can actually take in any JavaScript object literal). For implementing lazy loads, I needed to use the vue-observe-visibility (external library) directive with slight modification to the hooks to be compatible with Vue3.

    References:

    Pug

    Pug is a templating language that compiles to HTML. It is less verbose and much more maintainable than HTML, and also allows basic presentation logic with conditionals, loops and case statements.

    JavaScript Quirks

    There are a lot of these, and most just remain quirks but some result in actual unintended bugs in production (often in edge cases). It was interesting to see this in our contribution bar logic. A technique sometimes used to extract the integer part of a number is to use parseInt (it's even suggested in a Stack Overflow answer). It turns out we were using this for calculating the number of contribution bars to display for a user. This works for most values, but breaks when numbers become very large or small (less than 10^-7). In this unlikely situation, we'd display anywhere from 1 to 9 extra bars (moral: use Math.floor instead!).

    Browser Engines

    An investigation into string representations in browsers led me down a rabbit hole of JavaScript runtimes and engines, and ultimately improved my understanding of JavaScript in general. Different browsers have different JS engines - Chrome uses V8, Firefox uses SpiderMonkey (the original JS engine written by Brendan Eich), Edge used to use Chakra but now also uses V8, Safari uses WebKit, etc. Engines often differ significantly in terms of the pipeline for code execution, garbage collection, and more.

    The V8 engine as an example, first parses JavaScript into an Abstract Syntax Tree (AST) which is then compiled into bytecode. This bytecode is interpreted by the Ignition interpreter (Ignition also handles compilation of the AST into bytecode). Code that is revisited often during interpretation is marked "hot" and compiled further into highly efficient machine code. This technique of optimising compilation based on run-time profiling (Just-In-Time (JIT) compilation) is also used in other browser engines like SpiderMonkey and the JVM.

    The engine is used for running things that are on the browser stack. JS is run in a single thread, and asynchronous tasks are done through callbacks in a task queue. The main script is first run, with things like promises and timeouts inserting tasks into a task queue. Tasks (and microtasks which are more urgent, lower overhead tasks that can execute when the call stack is empty even while the main script is running) in a task queue wait for the stack to be empty before being executed. Page re-renders are also blocked by running code on the stack (long delays between re-renders are undesirable). Using callbacks and hence not blocking the task queue, allows re-rendering to be done more regularly, improving responsiveness. The precise behaviour of task de-queueing (and lower overhead microtasks) can actually differ between browsers, which causes considerable headache.

    References:

    General Software Engineering/Design Considerations

    Discussions over PRs, issues and generally attempting to solve issues, were a great way to explore design considerations. Here is a non-exhaustive list of interesting points that came up this semester:

    In-house vs External Library

    In implementing new functionality or extending existing functionality (Git interface for example), there is usually a question of whether it would be easier to maintain features in-house, or use external libraries. It might be a good idea to maintain core functionality in-house since we'd want more fine-grained control over these features and new features can be added/fixed quickly as needed. At the same time, external libraries save time and cost of learning about and solving possibly complex problems.

    External libraries can however introduce vulnerabilities (several incidences of dependency sabotage with npm packages like color.js and node-ipc hit fairly close to home over the course of the semester). Hence, selection of libraries should be a well-deliberated process and should include considerations like active-ness of the project and diversity of maintainers.

    Recency vs Ubiquity

    In maintaining versions of dependencies, it is often important to weigh upgrading to a new version to get the newest features against possibly alienating users who don't already have that version. Neither is necessarily better than the other and will likely depend on the nature of the product. A new product for developers would probably have users who want new versions with the bleeding edge of features. On the other hand products that already have a large user base and aimed at less technical users might want to favour ubiquitous versions. Since RepoSense is aimed at users of all skill levels, including novice developers, we often default to the later approach.

    In a similar vein, it might be important to make sure that new features don't break backward compatibility so that the end-user won't face significant hindrances with making upgrades. At the same time, the need to be backwards compatible can be a root of evil, introducing all manners of hacks and fixes. This highlights the importance of foresight in the early stages of development. Also, deciding when to stop backwards compatibility with a significant version bump can be a non-trivial decision. Doing so should come with thorough migration documentation (sparse documentation for Vue2 -> Vue3 migration caused a lot of developer grievances).

    Isolated Testing

    While it's fairly obvious that modularity with tests is important and that components should be tested in isolation with unchanging inputs, it is easy to let slip lapses in the form of hidden dependencies that prevent components from being isolated, or having inputs that are actually non-static. Some of these issues came up over the course of the semester but it struck me just how easy it was for them to slip by unnoticed. There aren't necessarily language-level features that enforce coupling rules for the most part since many of these dependencies can be quite implicit.

    This had me thinking about the importance of being explicit in crucial sections of code, as described below.

    Being Explicit

    It is important that programmers make the behaviour of certain crucial sections of code as explicit as possible. One way of doing this is through good naming of methods and variables, and grouping statements semantically into methods or classes. Large chunks of code is detrimental and allows implicit slips in behaviour that can go unnoticed. So we might even want to make new special classes that do very specific things to make it clear that it is an important subroutine/behaviour that deserves its own abstraction.

    At the same time, high reliance on object orientation can lead to too many classes, each class doing trivial things and with high coupling between the classes leading to spaghetti logic that doesn't do very much to alleviate implicit behaviour. There exists a delicate middle ground characterised by semantically well partitioned code.

    Behavioural Consistency

    The earlier section on Javascript quirks were a result of an overly accommodating feature integration during the early stages of development. It's become a cautionary tale of sorts of the importance of consistency and predictability in behaviour. In adding new features, it was personally very tempting to allow small inconsistencies in behaviour in favour of simplicity of implementation. While simplicity is a desirable outcome, I'd argue that consistency is more important (small inconsistencies can runaway into larger un-fixable differences).

    Consistency can be with respect to various things. For example, we might want that identical inputs behave the same under similar conditions (differing in non-semantic respects) or that similar inputs (differing in non-semantic respects) behave the same under the identical conditions, etc.

    Miscellaneous helpful tools

    • The command line tool GitHub cli provides a very handy way to access GitHub API, and has been useful for checking out PRs, interacting with issues, managing workflows, etc right from the command line.
    • git bisect is a very nice way to find problematic commits. Given a bad commit and a previously good commit, git bisect does a binary search (either automatically with a test or with manual intervention) to find the problematic commit where the issue was introduced.
    • Search through previously run commands (with the first few characters) with ctrl-r in a bash shell.
    • GitHub issues and PRs have advanced search syntax like involves:USER for all items that involve a user. This was very useful for updating progress.md. More features here.
    -

    Project: Pandoc

    Pandoc is a Haskell library and command-line tool for converting between various document formats. It is a powerful tool that can convert between many different formats, including Markdown, LaTeX, HTML, and many others. It is also extensible, allowing for the creation of custom readers and writers for new formats. Pandoc has 31.8k stars on GitHub and is used by many people and organizations for its powerful and flexible document conversion capabilities.

    My Contributions

    • Fixed an issue involving Pandoc's Texinfo Writer: PR #9359

    My Learning Record

    The Haskell tooling ecosystem (GHC, Cabal, Stack, Haskell LSP) makes writing Haskell quite enjoyable. In particular, Haskell's type inferencing and parametric polymorphism makes it easy to understand and modify code in a general and well-abstracted way. The language also allows for strong editor tooling that also helps make development a smooth experience.

    +

    Project: Pandoc

    Pandoc is a Haskell library and command-line tool for converting between various document formats. It is a powerful tool that can convert between many different formats, including Markdown, LaTeX, HTML, and many others. It is also extensible, allowing for the creation of custom readers and writers for new formats. Pandoc has 31.8k stars on GitHub and is used by many people and organizations for its powerful and flexible document conversion capabilities.

    My Contributions

    • Fixed an issue involving Pandoc's Texinfo Writer: PR #9359

    My Learning Record

    The Haskell tooling ecosystem (GHC, Cabal, Stack, Haskell LSP) makes writing Haskell quite enjoyable. In particular, Haskell's type inferencing and parametric polymorphism makes it easy to understand and modify code in a general and well-abstracted way. The language also allows for strong editor tooling that also helps make development a smooth experience.

    -
    Week Contribution
    06/05/22 Opened PR: Increase total character threshold in code view #1773
    07/05/22 Reviewed PR: Docs: fix broken links in about.md #1777
    08/05/22 Reviewed PR: Fix unintended behavior related to --since d1 #1776
    06/05/22 Contributed to discussion in: Code panel collapses files even if there are only a few files #1772
    01/07/22 Contributed to discussion in: Tracking tasks related to supporting other types of remote repo URLs in PR#1644
    17/07/22 Contributed to discussion in: Refactoring processLine in RepoConfigCsvParser class #1753
    17/08/22 Contributed to discussion in: User Guide: Give more info on the File Size Limit #1825
    17/08/22 Reviewed PR: Fix filter glob user input #1827
    20/08/22 Opened PR: Give more info on the File Size Limit in UG #1829
    27/08/22 Reviewed PR: Disable links when they are broken #1830
    30/08/22 Contributed to discussion in: Glob filter is not editable #1831
    06/07/23 Reviewed PR: Migrate build.gradle from Groovy to Kotlin #2008
    05/07/23 Reviewed PR: Fix bugs in UG #2013
    01/08/23 Contributed to discussion in: Implement authorship analysis #2030
    01/10/23 Openend Issue: Broken environment cleanup #2044
    1 Reviewed PR: Refactor RepoConfigCsvParser::processLine method to avoid arrowhead style code #2080
    2 Contributed to discussion in: Suggestions on improvement for memory performance regarding Regex matching #2091
    2 Reviewed PR: Suppress Console Warning #2088
    2 Reviewed PR: Improve memory usage by refactoring Regex compilation #2092
    3 Reviewed PR: Refactor RepoConfiguration to simplify constructor complexity #2078
    3 Reviewed PR: Updating SystemTestUtil::assertJson to compare Json objects instead of line-by-line analysis #2087
    3 Reviewed PR: Refactor parser package for greater organisation of classes #2104
    4 Reviewed PR: Fix broken DevOps Guide link in Learning Basics #2107
    5 Contributed to discussion in: Implement Proper Deep Cloning for RepoConfiguration and CliArguments #2119
    5 Reviewed PR: Minor Enhancements to Existing Regex Code #2115
    6 Reviewed PR: Refactor CliArguments to conform to RepoConfiguration's Builder Pattern #2118
    6 Reviewed PR: Update RepoSense contributors in documentation #2138
    7 Opened Issue: Use optionals for return values that may be null to enforce a client check #2141
    7 Reviewed PR: Improve performance #2108
    7 Reviewed PR: Add originality threshold flag #2122
    7 Reviewed PR: Resolve Merge Conflict #2139
    +
    Week Contribution
    06/05/22 Opened PR: Increase total character threshold in code view #1773
    07/05/22 Reviewed PR: Docs: fix broken links in about.md #1777
    08/05/22 Reviewed PR: Fix unintended behavior related to --since d1 #1776
    06/05/22 Contributed to discussion in: Code panel collapses files even if there are only a few files #1772
    01/07/22 Contributed to discussion in: Tracking tasks related to supporting other types of remote repo URLs in PR#1644
    17/07/22 Contributed to discussion in: Refactoring processLine in RepoConfigCsvParser class #1753
    17/08/22 Contributed to discussion in: User Guide: Give more info on the File Size Limit #1825
    17/08/22 Reviewed PR: Fix filter glob user input #1827
    20/08/22 Opened PR: Give more info on the File Size Limit in UG #1829
    27/08/22 Reviewed PR: Disable links when they are broken #1830
    30/08/22 Contributed to discussion in: Glob filter is not editable #1831
    06/07/23 Reviewed PR: Migrate build.gradle from Groovy to Kotlin #2008
    05/07/23 Reviewed PR: Fix bugs in UG #2013
    01/08/23 Contributed to discussion in: Implement authorship analysis #2030
    01/10/23 Openend Issue: Broken environment cleanup #2044
    1 Reviewed PR: Refactor RepoConfigCsvParser::processLine method to avoid arrowhead style code #2080
    2 Contributed to discussion in: Suggestions on improvement for memory performance regarding Regex matching #2091
    2 Reviewed PR: Suppress Console Warning #2088
    2 Reviewed PR: Improve memory usage by refactoring Regex compilation #2092
    3 Reviewed PR: Refactor RepoConfiguration to simplify constructor complexity #2078
    3 Reviewed PR: Updating SystemTestUtil::assertJson to compare Json objects instead of line-by-line analysis #2087
    3 Reviewed PR: Refactor parser package for greater organisation of classes #2104
    4 Reviewed PR: Fix broken DevOps Guide link in Learning Basics #2107
    5 Contributed to discussion in: Implement Proper Deep Cloning for RepoConfiguration and CliArguments #2119
    5 Reviewed PR: Minor Enhancements to Existing Regex Code #2115
    6 Reviewed PR: Refactor CliArguments to conform to RepoConfiguration's Builder Pattern #2118
    6 Reviewed PR: Update RepoSense contributors in documentation #2138
    7 Opened Issue: Use optionals for return values that may be null to enforce a client check #2141
    7 Reviewed PR: Improve performance #2108
    7 Reviewed PR: Add originality threshold flag #2122
    7 Reviewed PR: Resolve Merge Conflict #2139
    -
    +
    -

    Project: FreeCodeCamp.org

    An open source platform providing free resources to learn coding.

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    Merged fix(curriculum): update instructions for step 110 for rpg project #53564

    Awaiting Review fix(client): Add live image URL validation for portfolio images #53617

    Adding image URL validation for frontend

    Learnt how we can use image() html object to verify if the image URL is live.

    Debugging CI/CD tests

    Learnt that the previous test cases can affect the next test cases, so I should run all test cases in order to check if there's problems with loading and saving state.

    Learnt to check if I forgot to check logic with loading saved states (adding a portfolio section in user settings, and loading that section portfolio)

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    Setting up a GitHub repository with Windows Subsystem for Linux (WSL)

    Learnt to use VSCode to access code on the WSL. Git clone repository on the WSL, not on windows.

    Discord server and forums

    FreeCodeCamp has live Discord server and forums with active and dedicated contributors.

    Setting up was difficult, and while instructions could be clearer separated into Windows and Mac users (for Windows users, for Mac users), it was good they had detailed instructions.

    Wait time for help

    As with all open source projects, getting help or code reviews can take time. I was fortunate my first PR was an easy fix and quickly reviewed within 15 mins, but my second PR is still awaiting review. Nonetheless, the contributors are helpful and helped point out the cause of my CI/CD issues.

    +

    Project: FreeCodeCamp.org

    An open source platform providing free resources to learn coding.

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    Merged fix(curriculum): update instructions for step 110 for rpg project #53564

    Awaiting Review fix(client): Add live image URL validation for portfolio images #53617

    Adding image URL validation for frontend

    Learnt how we can use image() html object to verify if the image URL is live.

    Debugging CI/CD tests

    Learnt that the previous test cases can affect the next test cases, so I should run all test cases in order to check if there's problems with loading and saving state.

    Learnt to check if I forgot to check logic with loading saved states (adding a portfolio section in user settings, and loading that section portfolio)

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    Setting up a GitHub repository with Windows Subsystem for Linux (WSL)

    Learnt to use VSCode to access code on the WSL. Git clone repository on the WSL, not on windows.

    Discord server and forums

    FreeCodeCamp has live Discord server and forums with active and dedicated contributors.

    Setting up was difficult, and while instructions could be clearer separated into Windows and Mac users (for Windows users, for Mac users), it was good they had detailed instructions.

    Wait time for help

    As with all open source projects, getting help or code reviews can take time. I was fortunate my first PR was an easy fix and quickly reviewed within 15 mins, but my second PR is still awaiting review. Nonetheless, the contributors are helpful and helped point out the cause of my CI/CD issues.

    -

    CS3282 Progress

    Issues - WATcher

    PR Reviews - WATcher

    PR Contributed - WATcher

    Week Achievements
    4 Contributed PR: Build in Github Actions #239

    PR Reviews - CATcher

    Week Achievements
    1 Commented on PR: Redirect invalid routes to 404 not found page #1238
    +

    CS3282 Progress

    Issues - WATcher

    PR Reviews - WATcher

    PR Contributed - WATcher

    Week Achievements
    4 Contributed PR: Build in Github Actions #239

    PR Reviews - CATcher

    Week Achievements
    1 Commented on PR: Redirect invalid routes to 404 not found page #1238
    -
    +
    -

    Vue.js

    One of the largest takeaways from working with MarkBind in the last semester has been Vue.js, an open-source front-end framework that MarkBind uses to build it's UI components. Previously, only knowing the React.js framework, Vue.js is a handy addition to my arsenal. The basics of Vue.js was rather simple to pick up. Reading the Vue.js documentation, and referencing examples of already implemented Vue components in MarkBind, I quickly understood the use of <template>, <style> and <script>. Through Markbind's Developer Guide, I learnt how to easily create different kinds of Vue components and implement them in MarkBind.

    As I implemented my first Vue component, Add autogenerated breadcrumbs component #2193, I delved deeper into Vue, exploring the use of data(), to manage the internal state of Vue components, and methods() to define methods to be used within the component. I also learnt more about Vue lifecycle hooks, in which I used the mounted hook to allow the Breadcrumb component to query the SiteNav to figure out the hierarchy of the current page.

    As I continued working on improving MarkBind's frontend, I learnt more about Vue's <transition> component, in particular using transition hooks. While I was working on Fix Quiz expanding between questions #2184, I came realize how useful these hooks were, helping to create seamless transitions for different situations. I relied heavily on Vue.js documentation and StackOverflow Posts as I was researching about Vue's transition hooks.

    Document Object Model (DOM) Manipulation

    When I was working on implementing the new Breadcrumb and Collapse/Expand All Buttons components, I had to extensively use Document.querySelector() and other related methods. I was new to this and had to do some research about how the methods work, what happens if the object cannot be found and handling edge cases. By practicing these while implementing the two components mentioned above, I believe that I have become more proficient in doing this. As a side-effect of this, I have also gained a deeper understanding on how the DOM works.

    Resources:

    Jest/Vue Test Utils

    Jest and Vue Test Utils were something that I was new to coming into MarkBind. MarkBind uses Jest together with Vue Test Utils for its snapshot tests, which test Vue components against their expected snapshots. As I was updating and implementing Vue components, I had to update and create the relevant test suites to ensure that the Vue components that I was updating or creating were working as expected. I explored mounting the components, attaching components to a document to allow another component to interact with them.

    Resources:

    Typescript

    As MarkBind is undergoing a migration to Typescript, I put in some time to learn basic Typescript. This was important as mid-way through the semester, as many of the files were being migrated to Typescript. This has also helped me in reviewing PRs that deals with Typescript migration and PRs which affect the Typscript files in MarkBind.

    Resources:

    UI

    When updating the looks of old components and creating new ones, I had to do some research about what makes a website visually pleasing. My most interesting finds were about the use of golden ratios in design and choosing complementary colours with tools such as Canva's Colour Wheel. I also learnt the different meanings of different icons through exploration and discussions with Update Breadcrumb icons #2265 and Add CollapseExpandButtons component.

    I also internalized how to create transitions and effects that fit with the theme of the project, for MarkBind, had a more minimal theme. This was done when updating designs of components in Tweak sitenav design #2204, Update Question/Quiz component design #2131.

    Project Management

    As I progressed to start managing the project, I started reviewing and merging PRs. Initially as I reviewed smaller PRs, I had little problem understanding the code and understanding where it can be improved. However, as I reviewed more complex PRs, I began having difficulties understanding the changes quickly. I came across a method to understand code in a more simple manner, the Rubber Duck Debugging method. Using this helped me to try and understand the code line by line and handle more complex changes more managably, helping me to understanding them better.

    Upgrading dependencies

    As I worked on bump nunjucks to 3.2.4 #2411, I was initially not confident what to look out for when upgrading dependencies. However, after I worked on this I understood how to look out for breaking changes and to find out how your project is using it in order to confidently upgrade it without breaking things in the project.

    GitHub Actions

    I gained a more in depth understanding about GitHub Actions when I was working on Add install setuptools to ci #2530. Utilizing conditional runs for the macos platform which required a brew install to get the CI to run properly which would throw errors for other platforms which do not use Homebrew.

    Husky

    As I researched on improving code cleanliness in my projects and found that Husky was a tool that could be used to not only maintain the code cleanliness of projects but could be used for things like running tests as well. Husky has become a mainstay in all my JS projects together with ESLint, Prettier and lint-staged. I spent some time understanding how Husky has changed the way it should be used by deprecating the use of Husky within the package.json and rather is now in the .husky folder.

    AWS SageMaker

    As I researched on AWS SageMaker for my lightning talk and used it during my internship, I got to understand more about AWS SageMaker and its benefits for hosting AI models in the cloud. AWS SageMaker is beneficial smaller players, or applications which have a pattern of use that comes in sporadic bursts as it reduces the upfront cost of expensive AI infrastructure. SageMaker also offers many services that helpes to simplify the development and deployment of AI models.

    Micro-frontends

    As I worked on researching on micro-frontends for my internship, I gained a deeper understanding of micro-frontends. Micro-frontends are what micro-services for backends, but for the front-end. Micro-frontends allows the splitting up of the front-end and this brings many benefits. From allowing teams to manage their own vertical stack, by owning their own micro-frontend, to reducing the bundle size, micro-frontends are beneficial to large teams. I also worked on a POC of migrating parts of the application using WebPack 5 Module Federation for Next.js which allowed me to fully appreciate it.

    +

    Vue.js

    One of the largest takeaways from working with MarkBind in the last semester has been Vue.js, an open-source front-end framework that MarkBind uses to build it's UI components. Previously, only knowing the React.js framework, Vue.js is a handy addition to my arsenal. The basics of Vue.js was rather simple to pick up. Reading the Vue.js documentation, and referencing examples of already implemented Vue components in MarkBind, I quickly understood the use of <template>, <style> and <script>. Through Markbind's Developer Guide, I learnt how to easily create different kinds of Vue components and implement them in MarkBind.

    As I implemented my first Vue component, Add autogenerated breadcrumbs component #2193, I delved deeper into Vue, exploring the use of data(), to manage the internal state of Vue components, and methods() to define methods to be used within the component. I also learnt more about Vue lifecycle hooks, in which I used the mounted hook to allow the Breadcrumb component to query the SiteNav to figure out the hierarchy of the current page.

    As I continued working on improving MarkBind's frontend, I learnt more about Vue's <transition> component, in particular using transition hooks. While I was working on Fix Quiz expanding between questions #2184, I came realize how useful these hooks were, helping to create seamless transitions for different situations. I relied heavily on Vue.js documentation and StackOverflow Posts as I was researching about Vue's transition hooks.

    Document Object Model (DOM) Manipulation

    When I was working on implementing the new Breadcrumb and Collapse/Expand All Buttons components, I had to extensively use Document.querySelector() and other related methods. I was new to this and had to do some research about how the methods work, what happens if the object cannot be found and handling edge cases. By practicing these while implementing the two components mentioned above, I believe that I have become more proficient in doing this. As a side-effect of this, I have also gained a deeper understanding on how the DOM works.

    Resources:

    Jest/Vue Test Utils

    Jest and Vue Test Utils were something that I was new to coming into MarkBind. MarkBind uses Jest together with Vue Test Utils for its snapshot tests, which test Vue components against their expected snapshots. As I was updating and implementing Vue components, I had to update and create the relevant test suites to ensure that the Vue components that I was updating or creating were working as expected. I explored mounting the components, attaching components to a document to allow another component to interact with them.

    Resources:

    Typescript

    As MarkBind is undergoing a migration to Typescript, I put in some time to learn basic Typescript. This was important as mid-way through the semester, as many of the files were being migrated to Typescript. This has also helped me in reviewing PRs that deals with Typescript migration and PRs which affect the Typscript files in MarkBind.

    Resources:

    UI

    When updating the looks of old components and creating new ones, I had to do some research about what makes a website visually pleasing. My most interesting finds were about the use of golden ratios in design and choosing complementary colours with tools such as Canva's Colour Wheel. I also learnt the different meanings of different icons through exploration and discussions with Update Breadcrumb icons #2265 and Add CollapseExpandButtons component.

    I also internalized how to create transitions and effects that fit with the theme of the project, for MarkBind, had a more minimal theme. This was done when updating designs of components in Tweak sitenav design #2204, Update Question/Quiz component design #2131.

    Project Management

    As I progressed to start managing the project, I started reviewing and merging PRs. Initially as I reviewed smaller PRs, I had little problem understanding the code and understanding where it can be improved. However, as I reviewed more complex PRs, I began having difficulties understanding the changes quickly. I came across a method to understand code in a more simple manner, the Rubber Duck Debugging method. Using this helped me to try and understand the code line by line and handle more complex changes more managably, helping me to understanding them better.

    Upgrading dependencies

    As I worked on bump nunjucks to 3.2.4 #2411, I was initially not confident what to look out for when upgrading dependencies. However, after I worked on this I understood how to look out for breaking changes and to find out how your project is using it in order to confidently upgrade it without breaking things in the project.

    GitHub Actions

    I gained a more in depth understanding about GitHub Actions when I was working on Add install setuptools to ci #2530. Utilizing conditional runs for the macos platform which required a brew install to get the CI to run properly which would throw errors for other platforms which do not use Homebrew.

    Husky

    As I researched on improving code cleanliness in my projects and found that Husky was a tool that could be used to not only maintain the code cleanliness of projects but could be used for things like running tests as well. Husky has become a mainstay in all my JS projects together with ESLint, Prettier and lint-staged. I spent some time understanding how Husky has changed the way it should be used by deprecating the use of Husky within the package.json and rather is now in the .husky folder.

    AWS SageMaker

    As I researched on AWS SageMaker for my lightning talk and used it during my internship, I got to understand more about AWS SageMaker and its benefits for hosting AI models in the cloud. AWS SageMaker is beneficial smaller players, or applications which have a pattern of use that comes in sporadic bursts as it reduces the upfront cost of expensive AI infrastructure. SageMaker also offers many services that helpes to simplify the development and deployment of AI models.

    Micro-frontends

    As I worked on researching on micro-frontends for my internship, I gained a deeper understanding of micro-frontends. Micro-frontends are what micro-services for backends, but for the front-end. Micro-frontends allows the splitting up of the front-end and this brings many benefits. From allowing teams to manage their own vertical stack, by owning their own micro-frontend, to reducing the bundle size, micro-frontends are beneficial to large teams. I also worked on a POC of migrating parts of the application using WebPack 5 Module Federation for Next.js which allowed me to fully appreciate it.

    -

    Project: Foo

    Give an intro to the project here ...

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    +

    Project: Foo

    Give an intro to the project here ...

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    -
    Week Achievements
    Pre-Sem Authored PR Revert expand collapse all buttons #2303
    1 Worked on slides for Saturday code sprint (as I couldn't make it for the sprint)
    2 Opened issues for templates MarkBind Template for CS2103/Software Documentation #2384, MarkBind Template for Student Portfolio #2385, MarkBind Template for Course Pages #2386
    3 Repo Cleanup: Added relevant issues to GitHub Project
    3 Reviewed PR Allow markbind serve to specify custom host #2382 #2395
    4 Authored PR bump nunjucks to 3.2.4 #2411
    5 Created Issue Validation when specifying custom host #2417
    6 Reviewed PR UG > PagNav: Misleading sentence #2440
    7 Reviewed PR Optimize code printing #2445
    8 Reviewed PR Re-introduce lazy loading #2367 #2450
    8 Reviewed PR Migrate layout to Typescript #2452
    8 Fixed commits in master branch due to use of "Squash and merge" instead of "Rebase and merge"
    8 Authored PR Add keeping fork up to date section in DG #2453
    8 Reviewed PR Modify release documentation to add detailed instructions on permissions #2455
    9 Reviewed PR Test logger calls in tests for NodeProcessor #2463
    10 Created Issue Re-Implement CollapseExpandAllButtons into site-nav #2478
    10 Did Release v5.4.0
    11 Reviewed PR MarkBind Template for Student Portfolio #2398
    11 Reviewed PR Migrate core/index.js to Typescript #2482
    12 Reviewed PR Add a reminder when contributor is new to ping all contributor bot #2484
    12 Reviewed PR Fix imported modal button position off #2487
    12 Reveiwed PR Add warning for including empty segments or files in optional mode #2506
    13 Reviewed PR Add dataTable plugin #2446
    13 Fixed commits in master branch due to use of "Create a merge commit" instead of "Squash and merge"
    7-13 Part of weekly sync with CS3281 students
    R Reviewed PR Move scripts to bottom in page.njk #2522
    R Reviewed PR Add documentation regarding security practices for github actions #2528
    R Investigated issue for CI Document: Node LTS (v20) and python 3.12 does not work on MarkBind install #2496
    R Authored PR Add install setuptools to ci #2530
    R Reviewed PR Add missing documentation for attributes overridden by slots #2526
    R Reviewed PR Add tests for logger output when component attributes are overridden by slots #2525
    +
    Week Achievements
    Pre-Sem Authored PR Revert expand collapse all buttons #2303
    1 Worked on slides for Saturday code sprint (as I couldn't make it for the sprint)
    2 Opened issues for templates MarkBind Template for CS2103/Software Documentation #2384, MarkBind Template for Student Portfolio #2385, MarkBind Template for Course Pages #2386
    3 Repo Cleanup: Added relevant issues to GitHub Project
    3 Reviewed PR Allow markbind serve to specify custom host #2382 #2395
    4 Authored PR bump nunjucks to 3.2.4 #2411
    5 Created Issue Validation when specifying custom host #2417
    6 Reviewed PR UG > PagNav: Misleading sentence #2440
    7 Reviewed PR Optimize code printing #2445
    8 Reviewed PR Re-introduce lazy loading #2367 #2450
    8 Reviewed PR Migrate layout to Typescript #2452
    8 Fixed commits in master branch due to use of "Squash and merge" instead of "Rebase and merge"
    8 Authored PR Add keeping fork up to date section in DG #2453
    8 Reviewed PR Modify release documentation to add detailed instructions on permissions #2455
    9 Reviewed PR Test logger calls in tests for NodeProcessor #2463
    10 Created Issue Re-Implement CollapseExpandAllButtons into site-nav #2478
    10 Did Release v5.4.0
    11 Reviewed PR MarkBind Template for Student Portfolio #2398
    11 Reviewed PR Migrate core/index.js to Typescript #2482
    12 Reviewed PR Add a reminder when contributor is new to ping all contributor bot #2484
    12 Reviewed PR Fix imported modal button position off #2487
    12 Reveiwed PR Add warning for including empty segments or files in optional mode #2506
    13 Reviewed PR Add dataTable plugin #2446
    13 Fixed commits in master branch due to use of "Create a merge commit" instead of "Squash and merge"
    7-13 Part of weekly sync with CS3281 students
    R Reviewed PR Move scripts to bottom in page.njk #2522
    R Reviewed PR Add documentation regarding security practices for github actions #2528
    R Investigated issue for CI Document: Node LTS (v20) and python 3.12 does not work on MarkBind install #2496
    R Authored PR Add install setuptools to ci #2530
    R Reviewed PR Add missing documentation for attributes overridden by slots #2526
    R Reviewed PR Add tests for logger output when component attributes are overridden by slots #2525
    -
    +
    -

    CS3281: Overall, I believe that because I was the least experienced (or at least I felt I was), I was also able to learn a whole lot from this module, especially front-end-wise.

    CS3282: I still feel like I have much more to learn, but at least I do feel a bit more experienced and confident that I know what I am doing, at least somewhat.

    Angular

    While I used Angular to make a PR for TEAMMATES before the semester started, I think I still had a lot more to learn about it, like front-end unit testing (especially this because that initial PR had no tests at that point in time) which I was able to learn when I eventually actually made that PR in the real TEAMMATES repo. Due to the bindings, I had to pay especially close attention to the component testing scenarios of a component with inputs and outputs and a component inside a test host.

    However, that was mostly component and snapshot testing. In order to also learn how to do testing for services, I also did testing for the feedback responses service. Though, I learned that testing services seemed largely similar to and yet much simpler than testing components.

    Beyond testing, I also learned how to create services themselves in this onboarding task commit where I created the service to get feedback response statistics from the backend. I also learned how to integrate this service with the actual page component in order to actually obtain statistics to display using RxJS.

    As for components or their templates, I learned about more about how to use Angular's HTML templates in order to direct inputs to and outputs from a component through property binding and event binding respectively. I also learned about how the custom structural directive tmIsLoading worked in this PR as I was debugging when I initially wrongly caused the loading spinner to always display when I was in fact trying to display something else (eventually found out it was because I used the same boolean variable used to display the spinner, so don't be like me; check the usages of any variable you reuse). I also learned how to use <ng-container> and <ng-template> in that same PR, particularly with structural directives like ngIf.

    Resources:

    RxJS

    In order to integrate Angular services that used asynchronous requests with components, I had to learn about Observables and Subscriptions from RxJS. I also had to learn other things from RxJS like the operators pipe or first for the previously mentioned component testing I did due to the fact that EventEmitter objects used for event binding apparently functioned like RxJS Observable objects.

    Resources:

    HTML/Bootstrap/Web development in general

    While I have taken some online web development courses in my free time before, I have actually never touched web development in a real project, only backend and mobile application development. Thus, doing some front-end work benefitted me a lot. For example, I was able to use my initially largely untested (and back then, slowly fading) knowledge of HTML and/or Bootstrap to some use such as in my onboarding task commits where I (re-)learned how to align everything nicely using the Bootstrap grid system (sorry if this is really basic) or in TEAMMATES PR #11628. Actually, after doing the front-end stuff in the onboarding task, I decided to go into the back-end for the deadline extensions feature so that I could learn TEAMMATES front to back, but perhaps I should have stayed in the front-end for the deadline extensions feature too to learn more. Still, virtually all my non-deadline extensions feature PRs were front-end related so maybe I was still able to learn as much as I could about the front-end.

    Resources:

    Jest/Jasmine

    I learned how to use these to do front-end unit testing in Angular as previously mentioned, particularly things like expect to check values are as expected, spyOn to mock services, beforeEach for common test setup code, and related attributes/functions (toBeTruthy(), etc.).

    Also, I learned about snapshot testing. I initially had no idea this existed before (sorry if this is basic), and yet it seems to be pretty widely used (?) so learning of its existence seemed important.

    Resources:

    D3.js

    I learned how to use D3 to display charts. I used this to create the feedback responses statistics chart.

    Resources:

    Angular Material

    I was looking into the issue Instructor: Edit rubric question: reorder options using drag and drop #8933; I initially wanted to do a PR before my exams started but I unfortunately had no time to do so. Regardless, I was able to look into how I could possibly do it after my exams when I have time.

    I looked through the code base to see how drag and drop is implemented in other question types such as in multiple choice questions and I found out that we use the CDK Drag and Drop module from Angular Material. Angular Material allows Material Design components to be added into Angular. From what I understand, Material Design provides a sort of library or system with customizable front-end components to provide pre-made UI functionality. I have actually used it previously when I did my own side projects for Android, though this is my first time using the drag and drop component (or similar) because it is currently not available on Android. Besides, I have also never used Material Design within Angular at all before.

    The nice thing about Angular Material is it hides all the underlying code away and all that is minimally necessary to add is the cdkDrag Angular directive. Unfortunately, from what I see, it seems that the drag and drop functionality provided by Angular Material does not work very well for table columns, which is the main focus of the issue. In general, it seems that tables are not well supported by Angular Material drag and drop, based on how tables are missing from the official documentation. Fortunately, there are workarounds like from this post from Stack Overflow and its linked StackBlitz project or from this blog post. However, these solutions do not produce satisfactory results, at least to me. When the columns are dragged along rows, the animations and "previews" do not show up for the rest of the rows, only for the row that was clicked on (such as the header). On the other hand, it does work well for dragging rows along columns. I suspect this has to do with how tables work in HTML, which is that they are essentially not really a single element but actually split into multiple table cell elements; this is unlike table rows which are single row elements. This means that Angular Material drag and drop probably works pretty well with rows, adding animations/previews. Unfortunately, this is not the case with columns. I believe that to enable this for table columns, it may be necessary after all to actually implement it from scratch after all, manually checking the location of the mouse and changing the columns appropriately to provide the animations/"previews" while dragging, or other similar implementations.

    Still, this was interesting and I did learn things. I also believe that with this, adding drag and drop for the table rows would be pretty simple, if necessary. I could also look through how drag and drop is currrently done in Angular for inspiration on how to do it for the columns, or maybe it actually is possible to do it without implementing the functionality myself.

    Resources:

    Google Cloud Datastore/Objectify

    I have previously used Firebase Cloud Firestore, an NoSQL database. I remember how when I used Firestore, I also noticed Datastore, but I just told myself to look at it at another time, and it seems like the time was now. Overall, I found out more about Datastore and how it works, like how it is also a NoSQL database, and I found similarities between entities and documents, and between kinds and collections, which was how I was able to understand it quickly.

    For the deadline extensions feature, we had to maintain maps from email addresses to deadlines within the feedback session entities. I learned that this was not a standard Datastore value type so a possible way of storing this would be to store it as a Blob. I also learned that to do this within Objectify, this can be done through the Serialize annotation.

    In order to validate requests to update the deadline maps, we needed to check if the emails in the requests actually existed for the corresponding course. One way would be to load every single CourseStudent entity and every Instructor entity. However, I learned that this costs a certain amount and not only that, the cost scales for every read of every instance. I found out about projection queries, which only scales with the number of queries, not the number of entities read in that query. This was more economical and thus, I chose to do this instead. Strangely, I do not think projection queries are documented in Objectify, so I had to refer to StackOverflow to find out how to do projection queries within Objectify.

    I also learned that projection queries needed indices, and I initially wrongly thought that this was only for the properties that were projected, not other properties within the same query that were, say, filtered for instance. I also previously read that every property of each entity kind already has a built-in index of its own, so I initially wrongly assumed that I did not need to write any more indices for my projection queries. However, Fergus (I believe?) pointed out to me that this was wrong and looking at it again, it does make more sense for all properties used in a query, so both projections and filters, to require a composite index altogether. However, this then came with a downside, as I also found out that indices cost money to maintain too due to their storage costs.

    Resources:

    Google Cloud App Engine

    I have also only previously used Google Cloud Functions or Firebase Cloud Functions. I also remember how when I used either of them, I also noticed App Engine and then also told myself to look at it at another time, so getting to learn it by joining TEAMMATES, like Datastore, was such a great thing.

    I think the main thing I learned was the task queues, though unfortunately, they are already phased out. I am at least hoping that this knowledge is transferable to what I believe is the new equivalent service of Google Cloud, which is Cloud Tasks. Regardless, I had to use task queues in order to run the workers created by Samuel which handle deadline extension entities for the deadline extensions feature.

    Resources:

    Hibernate

    With the migration to SQL, we started to use Hibernate as our object-relational mapping (ORM) tool. While I was familiar with SQL, especially after taking the course CS2102, I was not very familiar with ORMs; I only previously used Django's built-in ORM. I felt Hibernate was extremely verbose compared to Django's ORM. Regardless, I had to use my new Hibernate knowledge to review PRs which used it, while tolerating its verbose syntax. Apparently, this is a popular ORM for Java, so I may need to face this somewhere else, so I guess I need to get used to its syntax.

    Resources:

    Liquibase

    Wilson mentioned Liquibase in our group chat. We also needed to change the database for the account request form (ARF) feature. Thus, I decided to look into this. I never got to dive deep into it because I was not the one who ended up integrating it fully into TEAMMATES (I think it was Nicolas?). Also, the way it was integrated meant that only the release lead generates the Liquibase changelog, so I did not really get to touch it. Still, I did get to learn a bit about Liquibase. From what I saw, it was also quite similar to how Django manages its database migrations, with its changelogs.

    Resources:

    Gradle

    Back when I was doing CS3281, running tests through Gradle involved only one task, which was the one running our integration tests (which were intended to be unit tests). Now that I came back to TEAMMATES for CS3282, running tests through Gradle now involves more than one task, the task for the unit tests, and the task for the integration tests. When either of the tasks fails, the other task no longer runs. I learned how to prevent that by looking at the documentation of Gradle, and I also tried to integrate this into the GitHub Actions in TEAMMATES by submitting an issue for it (#12900). I also learned a lot more about how Gradle works, like how to create tasks, projects, even multi-project builds, settings, build scripts, initialization scripts, etc. It was pretty interesting. I must admit, I previously only used Gradle when all of it was set up for me, so all I needed to do was run commands with Gradle. Now, I think I can set up a Gradle project, and even adjust the settings and build scripts.

    Resources:

    +

    CS3281: Overall, I believe that because I was the least experienced (or at least I felt I was), I was also able to learn a whole lot from this module, especially front-end-wise.

    CS3282: I still feel like I have much more to learn, but at least I do feel a bit more experienced and confident that I know what I am doing, at least somewhat.

    Angular

    While I used Angular to make a PR for TEAMMATES before the semester started, I think I still had a lot more to learn about it, like front-end unit testing (especially this because that initial PR had no tests at that point in time) which I was able to learn when I eventually actually made that PR in the real TEAMMATES repo. Due to the bindings, I had to pay especially close attention to the component testing scenarios of a component with inputs and outputs and a component inside a test host.

    However, that was mostly component and snapshot testing. In order to also learn how to do testing for services, I also did testing for the feedback responses service. Though, I learned that testing services seemed largely similar to and yet much simpler than testing components.

    Beyond testing, I also learned how to create services themselves in this onboarding task commit where I created the service to get feedback response statistics from the backend. I also learned how to integrate this service with the actual page component in order to actually obtain statistics to display using RxJS.

    As for components or their templates, I learned about more about how to use Angular's HTML templates in order to direct inputs to and outputs from a component through property binding and event binding respectively. I also learned about how the custom structural directive tmIsLoading worked in this PR as I was debugging when I initially wrongly caused the loading spinner to always display when I was in fact trying to display something else (eventually found out it was because I used the same boolean variable used to display the spinner, so don't be like me; check the usages of any variable you reuse). I also learned how to use <ng-container> and <ng-template> in that same PR, particularly with structural directives like ngIf.

    Resources:

    RxJS

    In order to integrate Angular services that used asynchronous requests with components, I had to learn about Observables and Subscriptions from RxJS. I also had to learn other things from RxJS like the operators pipe or first for the previously mentioned component testing I did due to the fact that EventEmitter objects used for event binding apparently functioned like RxJS Observable objects.

    Resources:

    HTML/Bootstrap/Web development in general

    While I have taken some online web development courses in my free time before, I have actually never touched web development in a real project, only backend and mobile application development. Thus, doing some front-end work benefitted me a lot. For example, I was able to use my initially largely untested (and back then, slowly fading) knowledge of HTML and/or Bootstrap to some use such as in my onboarding task commits where I (re-)learned how to align everything nicely using the Bootstrap grid system (sorry if this is really basic) or in TEAMMATES PR #11628. Actually, after doing the front-end stuff in the onboarding task, I decided to go into the back-end for the deadline extensions feature so that I could learn TEAMMATES front to back, but perhaps I should have stayed in the front-end for the deadline extensions feature too to learn more. Still, virtually all my non-deadline extensions feature PRs were front-end related so maybe I was still able to learn as much as I could about the front-end.

    Resources:

    Jest/Jasmine

    I learned how to use these to do front-end unit testing in Angular as previously mentioned, particularly things like expect to check values are as expected, spyOn to mock services, beforeEach for common test setup code, and related attributes/functions (toBeTruthy(), etc.).

    Also, I learned about snapshot testing. I initially had no idea this existed before (sorry if this is basic), and yet it seems to be pretty widely used (?) so learning of its existence seemed important.

    Resources:

    D3.js

    I learned how to use D3 to display charts. I used this to create the feedback responses statistics chart.

    Resources:

    Angular Material

    I was looking into the issue Instructor: Edit rubric question: reorder options using drag and drop #8933; I initially wanted to do a PR before my exams started but I unfortunately had no time to do so. Regardless, I was able to look into how I could possibly do it after my exams when I have time.

    I looked through the code base to see how drag and drop is implemented in other question types such as in multiple choice questions and I found out that we use the CDK Drag and Drop module from Angular Material. Angular Material allows Material Design components to be added into Angular. From what I understand, Material Design provides a sort of library or system with customizable front-end components to provide pre-made UI functionality. I have actually used it previously when I did my own side projects for Android, though this is my first time using the drag and drop component (or similar) because it is currently not available on Android. Besides, I have also never used Material Design within Angular at all before.

    The nice thing about Angular Material is it hides all the underlying code away and all that is minimally necessary to add is the cdkDrag Angular directive. Unfortunately, from what I see, it seems that the drag and drop functionality provided by Angular Material does not work very well for table columns, which is the main focus of the issue. In general, it seems that tables are not well supported by Angular Material drag and drop, based on how tables are missing from the official documentation. Fortunately, there are workarounds like from this post from Stack Overflow and its linked StackBlitz project or from this blog post. However, these solutions do not produce satisfactory results, at least to me. When the columns are dragged along rows, the animations and "previews" do not show up for the rest of the rows, only for the row that was clicked on (such as the header). On the other hand, it does work well for dragging rows along columns. I suspect this has to do with how tables work in HTML, which is that they are essentially not really a single element but actually split into multiple table cell elements; this is unlike table rows which are single row elements. This means that Angular Material drag and drop probably works pretty well with rows, adding animations/previews. Unfortunately, this is not the case with columns. I believe that to enable this for table columns, it may be necessary after all to actually implement it from scratch after all, manually checking the location of the mouse and changing the columns appropriately to provide the animations/"previews" while dragging, or other similar implementations.

    Still, this was interesting and I did learn things. I also believe that with this, adding drag and drop for the table rows would be pretty simple, if necessary. I could also look through how drag and drop is currrently done in Angular for inspiration on how to do it for the columns, or maybe it actually is possible to do it without implementing the functionality myself.

    Resources:

    Google Cloud Datastore/Objectify

    I have previously used Firebase Cloud Firestore, an NoSQL database. I remember how when I used Firestore, I also noticed Datastore, but I just told myself to look at it at another time, and it seems like the time was now. Overall, I found out more about Datastore and how it works, like how it is also a NoSQL database, and I found similarities between entities and documents, and between kinds and collections, which was how I was able to understand it quickly.

    For the deadline extensions feature, we had to maintain maps from email addresses to deadlines within the feedback session entities. I learned that this was not a standard Datastore value type so a possible way of storing this would be to store it as a Blob. I also learned that to do this within Objectify, this can be done through the Serialize annotation.

    In order to validate requests to update the deadline maps, we needed to check if the emails in the requests actually existed for the corresponding course. One way would be to load every single CourseStudent entity and every Instructor entity. However, I learned that this costs a certain amount and not only that, the cost scales for every read of every instance. I found out about projection queries, which only scales with the number of queries, not the number of entities read in that query. This was more economical and thus, I chose to do this instead. Strangely, I do not think projection queries are documented in Objectify, so I had to refer to StackOverflow to find out how to do projection queries within Objectify.

    I also learned that projection queries needed indices, and I initially wrongly thought that this was only for the properties that were projected, not other properties within the same query that were, say, filtered for instance. I also previously read that every property of each entity kind already has a built-in index of its own, so I initially wrongly assumed that I did not need to write any more indices for my projection queries. However, Fergus (I believe?) pointed out to me that this was wrong and looking at it again, it does make more sense for all properties used in a query, so both projections and filters, to require a composite index altogether. However, this then came with a downside, as I also found out that indices cost money to maintain too due to their storage costs.

    Resources:

    Google Cloud App Engine

    I have also only previously used Google Cloud Functions or Firebase Cloud Functions. I also remember how when I used either of them, I also noticed App Engine and then also told myself to look at it at another time, so getting to learn it by joining TEAMMATES, like Datastore, was such a great thing.

    I think the main thing I learned was the task queues, though unfortunately, they are already phased out. I am at least hoping that this knowledge is transferable to what I believe is the new equivalent service of Google Cloud, which is Cloud Tasks. Regardless, I had to use task queues in order to run the workers created by Samuel which handle deadline extension entities for the deadline extensions feature.

    Resources:

    Hibernate

    With the migration to SQL, we started to use Hibernate as our object-relational mapping (ORM) tool. While I was familiar with SQL, especially after taking the course CS2102, I was not very familiar with ORMs; I only previously used Django's built-in ORM. I felt Hibernate was extremely verbose compared to Django's ORM. Regardless, I had to use my new Hibernate knowledge to review PRs which used it, while tolerating its verbose syntax. Apparently, this is a popular ORM for Java, so I may need to face this somewhere else, so I guess I need to get used to its syntax.

    Resources:

    Liquibase

    Wilson mentioned Liquibase in our group chat. We also needed to change the database for the account request form (ARF) feature. Thus, I decided to look into this. I never got to dive deep into it because I was not the one who ended up integrating it fully into TEAMMATES (I think it was Nicolas?). Also, the way it was integrated meant that only the release lead generates the Liquibase changelog, so I did not really get to touch it. Still, I did get to learn a bit about Liquibase. From what I saw, it was also quite similar to how Django manages its database migrations, with its changelogs.

    Resources:

    Gradle

    Back when I was doing CS3281, running tests through Gradle involved only one task, which was the one running our integration tests (which were intended to be unit tests). Now that I came back to TEAMMATES for CS3282, running tests through Gradle now involves more than one task, the task for the unit tests, and the task for the integration tests. When either of the tasks fails, the other task no longer runs. I learned how to prevent that by looking at the documentation of Gradle, and I also tried to integrate this into the GitHub Actions in TEAMMATES by submitting an issue for it (#12900). I also learned a lot more about how Gradle works, like how to create tasks, projects, even multi-project builds, settings, build scripts, initialization scripts, etc. It was pretty interesting. I must admit, I previously only used Gradle when all of it was set up for me, so all I needed to do was run commands with Gradle. Now, I think I can set up a Gradle project, and even adjust the settings and build scripts.

    Resources:

    -

    Project: Python (CPython)

    Python is a high-level, general-purpose programming language. CPython is the reference implementation of the Python programming language. Written in C and Python, CPython is the default and most widely used implementation of the Python language.

    My Contributions

    gh-115323: Add meaningful error message for using bytearray.extend with str

    I added a more meaningful error message when bytearray.extend is incorrectly used with a str object input, to tackle the bug highlighted in the GitHub issue, "bytearray.extend: Misleading error message".

    str is a built-in type in Python. str objects are strings of text; strings are immutable sequences of Unicode code points. bytearray is another built-in type in Python; bytearray objects are mutable sequences of single bytes. bytearray.extend can be used to add all the bytes of another sequence of bytes to the end of the bytearray object. This means that bytearray.extend can only be used with inputs that are sequences of individual bytes. In other words, str objects cannot be used as input to bytearray.extend because they are not sequences of single bytes.

    When a str object is passed as input into bytearray.extend, Python correctly raises an error due to the type of the input. However, the error message is misleading, as it states TypeError: 'str' object cannot be interpreted as an integer. The str object mentioned can be interpreted as referring to the input passed, which seems to suggest that integers can be passed as input, which is incorrect because integers are not sequences, much less sequences of bytes. In reality, the str object mentioned is referring to the elements of the sequence represented by the input str object, which are themselves also str objects.

    The error message is not wrong. However, it is just misleading. The PR I contributed fixed this by doing a check when an error is raised for when the input is a str object, before changing the error message to a more meaningful one, which would be TypeError: expected iterable of integers; got: 'str'.

    My Learning Record

    Tools and technologies

    reStructuredText (RST)

    Python uses reStructuredText (RST) to document their project. RST is a lightweight markup language. It is not difficult to use, but it has its own syntax, which is different from the more popular markup languages like Markdown. I had to write a NEWS entry[1] using RST. I used the Python Developer's Guide page on RST to help me figure out how to write using RST.

    Comparisons between the external project and the internal project

    The Python project seems to care a lot more about performance

    My first attempt at fixing the misleading error message was checking the type of the input very early on, even before any error was raised. I believe that in any other project, including in TEAMMATES, my first attempt might be seen as reasonable, and I think it might even be accepted, maybe after only a few minor changes, if any.

    However, this was not the most performant way to fix the bug. Checking the type of the input before an error is raised means that the input would be checked even if the input was valid. The first review wanted me to change this, and so I did.

    The Python project seems to document virtually every change into its changelog and highlights more important ones

    When I made my PR to fix the misleading error message, I was also required to write a NEWS entry, just like almost every other PR made to the project. In the Python project, NEWS entries document contributions so that it can be added into the changelog. They are necessary for any contribution made, except for those that do not affect users of the Python programming language itself, including:

    • documentation changes
    • test changes
    • strictly internal changes with no user-visible effects
    • changes that already have a NEWS entry
    • reverts that have not yet been included in any formal release (including alpha and beta releases)

    From what I understand, changes that are more significant can be highlighted in "What's New in Python" entries.

    In comparison, I do not think this is done in TEAMMATES. I think all the changes are mentioned equally in the releases.

    The Python project has room to be less strict with minor contributions

    If somebody wants to fix a typo in the Python project, they do not need to post a new issue before making a pull request. They can simply make the pull request immediately. From what I know, this is not the case in TEAMMATES. At the very least, it is not explicitly mentioned in the TEAMMATES developer guide.

    The Python project automatically merges bug fixes on all its branches

    When a Python version is released, people will use that version of Python. They may continue to use that version for their projects even when much newer Python versions are released. Thus, the Python team needs to continue to support older versions (up to a limit) by making sure that bug fixes, and security patches are also made to the supported older Python versions.

    Each version is maintained on their own respective Git branch, but all changes are initially made by submitting a PR to the main branch. The PRs are given labels like needs backport to 3.12 which indicate whether the PR needs to be backported to a specific Git branch for a Python version. When a PR is merged into the main branch, a bot (miss-islington-app) backports it to older Python branches according to the labels. It does this by submitting the same PR to the Git branches of the relevant Python versions. A member of the Python project team can then merge the PR into the Git branches of the relevant Python versions.

    In TEAMMATES, we may often have multiple feature branches in addition to the main branch. Fixes may be made to the main branch that are also required on the feature branches. In TEAMMATES, we often integrate these fixes into the feature branches by manually rebasing the feature branch onto the last commit on the main branch or merging the main branch into the feature branch. In other words, unlike in the Python project where changes in the main branch are almost automatically integrated into the other branches, in TEAMMATES, these changes to the main branch are manually integrated into other branches.

    Suggestions for the internal project based on external project observations

    Changelog with highlights

    Instead of displaying all the changes equally, it may be better to highlight some of them, as they be more significant to more users. Users may not notice those changes if they are displayed equally with the rest, even it may be of interest to them.

    Minor contributions should not require GitHub issues

    For minor contributions, it seems like it would be overkill to need to post an issue before a pull request can be made. If it is not already the case, then maybe we should allow minor contributions without their own GitHub issues. We should also make it clear in the developer guide that this is allowed.

    Automation to integrate changes in the main branch into the feature branches

    Instead of manually rebasing onto the main branch or manually merging the main branch into a feature branch, maybe it would be better to do it automatically. Maybe a bot can do this for us. A problem I can foresee with this is if there are merge conflicts. However, it is possible to make a PR for merging branches. The merge conflicts may be resolved manually in the branch created for the PR. While this reintroduces some manual work, the merge conflicts should not occur all the time. If this automation is possible, with some of the changes in the main branch being integrated into the feature branches automatically, this may reduce some of the load on the developers.


    1. In the Python project, NEWS entries document contributions so that it can be added into the changelog.

    +

    Project: Python (CPython)

    Python is a high-level, general-purpose programming language. CPython is the reference implementation of the Python programming language. Written in C and Python, CPython is the default and most widely used implementation of the Python language.

    My Contributions

    gh-115323: Add meaningful error message for using bytearray.extend with str

    I added a more meaningful error message when bytearray.extend is incorrectly used with a str object input, to tackle the bug highlighted in the GitHub issue, "bytearray.extend: Misleading error message".

    str is a built-in type in Python. str objects are strings of text; strings are immutable sequences of Unicode code points. bytearray is another built-in type in Python; bytearray objects are mutable sequences of single bytes. bytearray.extend can be used to add all the bytes of another sequence of bytes to the end of the bytearray object. This means that bytearray.extend can only be used with inputs that are sequences of individual bytes. In other words, str objects cannot be used as input to bytearray.extend because they are not sequences of single bytes.

    When a str object is passed as input into bytearray.extend, Python correctly raises an error due to the type of the input. However, the error message is misleading, as it states TypeError: 'str' object cannot be interpreted as an integer. The str object mentioned can be interpreted as referring to the input passed, which seems to suggest that integers can be passed as input, which is incorrect because integers are not sequences, much less sequences of bytes. In reality, the str object mentioned is referring to the elements of the sequence represented by the input str object, which are themselves also str objects.

    The error message is not wrong. However, it is just misleading. The PR I contributed fixed this by doing a check when an error is raised for when the input is a str object, before changing the error message to a more meaningful one, which would be TypeError: expected iterable of integers; got: 'str'.

    My Learning Record

    Tools and technologies

    reStructuredText (RST)

    Python uses reStructuredText (RST) to document their project. RST is a lightweight markup language. It is not difficult to use, but it has its own syntax, which is different from the more popular markup languages like Markdown. I had to write a NEWS entry[1] using RST. I used the Python Developer's Guide page on RST to help me figure out how to write using RST.

    Comparisons between the external project and the internal project

    The Python project seems to care a lot more about performance

    My first attempt at fixing the misleading error message was checking the type of the input very early on, even before any error was raised. I believe that in any other project, including in TEAMMATES, my first attempt might be seen as reasonable, and I think it might even be accepted, maybe after only a few minor changes, if any.

    However, this was not the most performant way to fix the bug. Checking the type of the input before an error is raised means that the input would be checked even if the input was valid. The first review wanted me to change this, and so I did.

    The Python project seems to document virtually every change into its changelog and highlights more important ones

    When I made my PR to fix the misleading error message, I was also required to write a NEWS entry, just like almost every other PR made to the project. In the Python project, NEWS entries document contributions so that it can be added into the changelog. They are necessary for any contribution made, except for those that do not affect users of the Python programming language itself, including:

    • documentation changes
    • test changes
    • strictly internal changes with no user-visible effects
    • changes that already have a NEWS entry
    • reverts that have not yet been included in any formal release (including alpha and beta releases)

    From what I understand, changes that are more significant can be highlighted in "What's New in Python" entries.

    In comparison, I do not think this is done in TEAMMATES. I think all the changes are mentioned equally in the releases.

    The Python project has room to be less strict with minor contributions

    If somebody wants to fix a typo in the Python project, they do not need to post a new issue before making a pull request. They can simply make the pull request immediately. From what I know, this is not the case in TEAMMATES. At the very least, it is not explicitly mentioned in the TEAMMATES developer guide.

    The Python project automatically merges bug fixes on all its branches

    When a Python version is released, people will use that version of Python. They may continue to use that version for their projects even when much newer Python versions are released. Thus, the Python team needs to continue to support older versions (up to a limit) by making sure that bug fixes, and security patches are also made to the supported older Python versions.

    Each version is maintained on their own respective Git branch, but all changes are initially made by submitting a PR to the main branch. The PRs are given labels like needs backport to 3.12 which indicate whether the PR needs to be backported to a specific Git branch for a Python version. When a PR is merged into the main branch, a bot (miss-islington-app) backports it to older Python branches according to the labels. It does this by submitting the same PR to the Git branches of the relevant Python versions. A member of the Python project team can then merge the PR into the Git branches of the relevant Python versions.

    In TEAMMATES, we may often have multiple feature branches in addition to the main branch. Fixes may be made to the main branch that are also required on the feature branches. In TEAMMATES, we often integrate these fixes into the feature branches by manually rebasing the feature branch onto the last commit on the main branch or merging the main branch into the feature branch. In other words, unlike in the Python project where changes in the main branch are almost automatically integrated into the other branches, in TEAMMATES, these changes to the main branch are manually integrated into other branches.

    Suggestions for the internal project based on external project observations

    Changelog with highlights

    Instead of displaying all the changes equally, it may be better to highlight some of them, as they be more significant to more users. Users may not notice those changes if they are displayed equally with the rest, even it may be of interest to them.

    Minor contributions should not require GitHub issues

    For minor contributions, it seems like it would be overkill to need to post an issue before a pull request can be made. If it is not already the case, then maybe we should allow minor contributions without their own GitHub issues. We should also make it clear in the developer guide that this is allowed.

    Automation to integrate changes in the main branch into the feature branches

    Instead of manually rebasing onto the main branch or manually merging the main branch into a feature branch, maybe it would be better to do it automatically. Maybe a bot can do this for us. A problem I can foresee with this is if there are merge conflicts. However, it is possible to make a PR for merging branches. The merge conflicts may be resolved manually in the branch created for the PR. While this reintroduces some manual work, the merge conflicts should not occur all the time. If this automation is possible, with some of the changes in the main branch being integrated into the feature branches automatically, this may reduce some of the load on the developers.


    1. In the Python project, NEWS entries document contributions so that it can be added into the changelog.

    -
    +

    Vue and Jest/Vue Test Utils

    While working with Vue components this semester, I've learned more about props and script in vue when working on the template for panels through adding a new prop isSeamless and writing new script for the panel component.

    MarkBind uses Jest together with Vue Test Utils for its snapshot tests, which test Vue components against their expected snapshots. While updating the component, I wrote new tests to ensure that the Vue components are working as expected.

    Resources

    ESM/CJS interoperality

    An interesting issue I've encountered this semester while researching on integrating a full search functionality is the issue of importing esm like pagefind into cjs modules. CommonJS uses the require('something') syntax for importing other modules and ESM uses the import {stuff} from './somewhere' syntax for importing.

    Another crucial difference is that CJS imports are synchronous while ESM imports are asynchronous. As such, when importing ES modules into CJS, the normal require('pagefind') syntax would result in an error. Instead, you'll need to use await import('pagefind') to asynchronously import the module. This difference in imports is something that should be taken note of since we use both the ESM import syntax and CJS require syntax in various files in MarkBind.

    Resources

    Nunjucks

    Nunjucks is a rich and powerful templating language for JavaScript. MarkBind supports Nunjucks for templating and I’ve used Nunjucks specifically to create a set of mappings of topics to their pages, and to write macros.

    Aspects

    1. macro

    Nunjucks macro allows one to define reusable chunks of content. A great benefit of macro is the reduction of code duplication due to its ability to encapsulate chunks of code into templates and its ability to accept parameters so that the output can be customised based on the inputs provided.

    1. set and import

    While combining the syntax pages in this commit, I worked on a set that keeps track of the various syntax topics and their information. This was a good exercise to experience how to create a variable using set and import it in other files to access its values using import.

    Resources

    Bootstrap

    MarkBind has Vue.js components built on the popular BootStrap framework. Much of Bootstrap's features are supported in and out of these components as well. While creating the portfolio template, I got to learn more about the various components and layouts of Bootstrap.

    Aspects

    1. grid

    Bootstrap grid built with flexbox and is fully responsive. More specific aspects I've learned

    • When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid goes from container to row to column, which needs to be kept in mind while adding content.
    • There are 12 template columns available per row, which allows for different combinations of elements that span any number of columns. The number 12 is very important when customising the width for each column to prevent unintended layout changes as Bootstrap does column wrapping when more than 12 columns are placed in a single row.
    1. Components offered by Bootstrap -

    Explored various components offered by Bootstrap, such as accordions, cards, carousels

    Resources

    +

    Explored various components offered by Bootstrap, such as accordions, cards, carousels

    Resources

    -

    Summary

    I mostly worked on the frontend of Markbind, improving components and the UI of Markbind, as well as contribute to documentation. Some notable issues I've worked on are:

    +

    Summary

    I mostly worked on the frontend of Markbind, improving components and the UI of Markbind, as well as contribute to documentation. Some notable issues I've worked on are:

    -
    +
    -

    Vue + Pug

    Summary

    Vue is a frontend JavaScript framework to build web user interfaces, while Pug is a preprocessor that speeds up writing HTML. In RepoSense, Vue brings the interactivity in the generated reports and Pug makes it easier to write more concise and readable HTML.

    Aspects Learnt

    Having some experience in frontend libraries/frameworks like React, I did not have too steep a learning curve when learning Vue; however, I still took some time to get used to concepts and the syntax of Vue including state management, the idea of single-file components, conditional rendering, reactive UI elements, and much more. One particular aspect I enjoyed learning and implementing in Vue was the ease of declaring state in a component just within the data() function. This was, to me, contrasted with React where useState and useEffect are more complicated and tricky to use.

    Resources Used

    • Official Vue and Pug documentation
    • Existing codebase and PRs
    • ChatGPT and GitHub Copilot for specific syntax

    Cypress

    Cypress is a testing framework that allows for end-to-end testing of web applications. I used it in RepoSense to write tests for the UI.

    Aspects Learnt

    Cypress was a new tool to me and I had to learn how to write tests using this tool as well as how to set up the test environment. Many Cypress commands are based on natural words like .then, .get, .to.deep, just to name a few, but the concepts of Cypress like asynchonicity, closures, and its inclusion of jQuery make it unfamiliar to me.

    Resources Used

    • Official Cypress documentation
    • Existing codebase and PRs
    • ChatGPT and GitHub Copilot for specific syntax

    ...

    +

    Vue + Pug

    Summary

    Vue is a frontend JavaScript framework to build web user interfaces, while Pug is a preprocessor that speeds up writing HTML. In RepoSense, Vue brings the interactivity in the generated reports and Pug makes it easier to write more concise and readable HTML.

    Aspects Learnt

    Having some experience in frontend libraries/frameworks like React, I did not have too steep a learning curve when learning Vue; however, I still took some time to get used to concepts and the syntax of Vue including state management, the idea of single-file components, conditional rendering, reactive UI elements, and much more. One particular aspect I enjoyed learning and implementing in Vue was the ease of declaring state in a component just within the data() function. This was, to me, contrasted with React where useState and useEffect are more complicated and tricky to use.

    Resources Used

    • Official Vue and Pug documentation
    • Existing codebase and PRs
    • ChatGPT and GitHub Copilot for specific syntax

    Cypress

    Cypress is a testing framework that allows for end-to-end testing of web applications. I used it in RepoSense to write tests for the UI.

    Aspects Learnt

    Cypress was a new tool to me and I had to learn how to write tests using this tool as well as how to set up the test environment. Many Cypress commands are based on natural words like .then, .get, .to.deep, just to name a few, but the concepts of Cypress like asynchonicity, closures, and its inclusion of jQuery make it unfamiliar to me.

    Resources Used

    • Official Cypress documentation
    • Existing codebase and PRs
    • ChatGPT and GitHub Copilot for specific syntax

    ...

    -

    Summary

    • Refactored frontend code
    • Added and fixed frontend Cypress tests
    • Fixed various frontend bugs
    • Added show more button for error messages
    • Added search by tag functionality
    • Added scroll to highlighted group
    • Added show tags on ramp chart
    • Added optimise timeline feature
    Week Achievements
    1 Reviewed PR: Standardise Array Style for TS Files #2084
    1 Authored PR: Remove hash symbol from URL when decoding hash #2086
    1 Authored PR: Remove redundant Segment class #2085
    2 Authored PR: Add show more button for error messages #2105
    2 Reviewed PR: Updating SystemTestUtil::assertJson to compare Json objects instead of line-by-line analysis #2087
    2 Authored PR: Remove redundant User class #2093
    2 Reviewed PR: Update .stylelintrc.json to check for spacing #2094
    3 Reviewed PR: Extract c-authorship-file component from views/c-authorship #2096
    3 Reviewed PR: Use syntax coloring for code blocks in docs #2099
    5 Authored PR: Fix failing zoomFeature cypress test #2114
    5 Authored PR: Add search by tag functionality #2116
    5 Reviewed PR: Move Segment CSS into segment.vue #2113
    6 Created Issue: TypeError when visiting a certain URL #2123
    6 Authored PR: Fix zoom bug if zUser is undefined #2126
    6 Created Issue: Add a way to highlight and scroll a particular repo/author #2130
    6 Reviewed PR: Add explicit return type annotations to TypeScript functions #2125
    6 Authored PR: Add highlight and scroll to group #2131
    7 Reviewed PR: Update RepoSense contributors in documentation #2138
    9 Authored PR: Show tags on the ramp chart #2163
    9 Reviewed PR: Revert "[#2109] Add search by tag functionality" #2165
    9 Authored PR: Add search by tag functionality #2167
    10 Created Issue: Add bin/ to .gitignore #2169
    10 Authored PR: Add bin/ to .gitignore #2179
    11 Created Issue: Fix lint warnings #2181
    11 Reviewed PR: Fix Inconsistent Line Number Colours #2185
    11 Reviewed PR: Add Tests for Segment CSS #2137
    11 Reviewed PR: Update CSS-related Major Dependencies #2154
    11 Reviewed PR: Update Typescript-related Major Dependencies #2166
    11 Authored PR: Add optimise timeline feature #2180
    11 Authored PR: Fix lint warnings #2182
    12 Created Issue: Add more repos for Cypress frontend tests #2187
    12 Authored PR: Add more repos to cypress tests #2188
    13 Created Issue: Add Cypress tests for show tags on ramp chart #2195
    +

    Summary

    • Refactored frontend code
    • Added and fixed frontend Cypress tests
    • Fixed various frontend bugs
    • Added show more button for error messages
    • Added search by tag functionality
    • Added scroll to highlighted group
    • Added show tags on ramp chart
    • Added optimise timeline feature
    Week Achievements
    1 Reviewed PR: Standardise Array Style for TS Files #2084
    1 Authored PR: Remove hash symbol from URL when decoding hash #2086
    1 Authored PR: Remove redundant Segment class #2085
    2 Authored PR: Add show more button for error messages #2105
    2 Reviewed PR: Updating SystemTestUtil::assertJson to compare Json objects instead of line-by-line analysis #2087
    2 Authored PR: Remove redundant User class #2093
    2 Reviewed PR: Update .stylelintrc.json to check for spacing #2094
    3 Reviewed PR: Extract c-authorship-file component from views/c-authorship #2096
    3 Reviewed PR: Use syntax coloring for code blocks in docs #2099
    5 Authored PR: Fix failing zoomFeature cypress test #2114
    5 Authored PR: Add search by tag functionality #2116
    5 Reviewed PR: Move Segment CSS into segment.vue #2113
    6 Created Issue: TypeError when visiting a certain URL #2123
    6 Authored PR: Fix zoom bug if zUser is undefined #2126
    6 Created Issue: Add a way to highlight and scroll a particular repo/author #2130
    6 Reviewed PR: Add explicit return type annotations to TypeScript functions #2125
    6 Authored PR: Add highlight and scroll to group #2131
    7 Reviewed PR: Update RepoSense contributors in documentation #2138
    9 Authored PR: Show tags on the ramp chart #2163
    9 Reviewed PR: Revert "[#2109] Add search by tag functionality" #2165
    9 Authored PR: Add search by tag functionality #2167
    10 Created Issue: Add bin/ to .gitignore #2169
    10 Authored PR: Add bin/ to .gitignore #2179
    11 Created Issue: Fix lint warnings #2181
    11 Reviewed PR: Fix Inconsistent Line Number Colours #2185
    11 Reviewed PR: Add Tests for Segment CSS #2137
    11 Reviewed PR: Update CSS-related Major Dependencies #2154
    11 Reviewed PR: Update Typescript-related Major Dependencies #2166
    11 Authored PR: Add optimise timeline feature #2180
    11 Authored PR: Fix lint warnings #2182
    12 Created Issue: Add more repos for Cypress frontend tests #2187
    12 Authored PR: Add more repos to cypress tests #2188
    13 Created Issue: Add Cypress tests for show tags on ramp chart #2195
    -
    +
    -

    Project: Godot

    Give an intro to the project here ...

    React-Admin

    Sphinx

    HSR Optimizer

    HSR Optimizer is a tool built to help Honkai:Star Rail players figure out how to build their characters by helping to abstract some of the math away in a user friendly interface.

    They are very light on

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    +

    Project: Godot

    Give an intro to the project here ...

    React-Admin

    Sphinx

    HSR Optimizer

    HSR Optimizer is a tool built to help Honkai:Star Rail players figure out how to build their characters by helping to abstract some of the math away in a user friendly interface.

    They are very light on

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    -
    +

    Summary:

    This semester, I was involved in the database migration team, both in migrating the application code and creating the scripts to transport the data from Datastore to CloudSQL. -This involves migrating actions in the backend application code, fixing previously undetected bugs, setting up of a development Google Cloud environment, writing base script files for moving and verifying data and mapping entities from non-sql entities to sql entities, debugging errors such as OutOfMemory exceptions during migration and exploring potential speedups.

    During this journey, I also played the role of a mentor for one of the CS3281 mentees to help provide guidance on migrating of action code. This includes sharing software engineering best practices such as avoiding mutable instances in Constant files, use of inheritance etc to ensure TEAMMATES code is more maintenable and less bug-prone.

    Secondly, I was involved in the SQL Injection testing team as well where I contributed knowledge on common SQL Injection attack inputs and helped formulate the test cases.

    Thirdly, I was involved in the design of Multiple Course Structures feature. I participated in the discussion and helped with the implementation of Hibernate entities to be used for future implementation of this feature. This includes updating existing ER designs to support the existing schema and new schema simultaneously.

    Finally, I was involved in raising and fixing minor documentation errors such as outdated commands on the developer guide to improve the experience of future developers.

    As for external projects, I worked on Scribe-iOS project, a Google Summer of Code and project which is part of Wikimedia foundation to improve code quality of the software. My learning points are further described in "observations.md".


    Key achievements:

    Date Role Description Key Achievement
    24/01/2024 Issue Reporter Found and reported issue #12699 with developer documentation ng command
    24/01/2024 PR Author Fixed documentation bug #12699 in TEAMMATES developer documentation with ng command Fixed documentation bug on key page (TEAMMATES new developer guide)
    07/02/2024 PR Reviewer Review of PR #12706 Migrate CreateInstructorAction
    15/02/2024 PR Author Review of PR #12702 Migrated CreateAccountAction 1. Over 20k LoC 2. Found and fixed previously undetected bugs with HibernateContext and circular toString() errors which cause Stack Overflow crashes 3. migrated 12k LoC of previous json bundle to new SQL bundle format
    20/02/2024 PR Reviewer Review of #PR 12741 Migrate feedbackSessionPublishedRemindersAction
    20/02/2024 PR Reviewer Review of #PR 12759 Add tests for FeedbackQuestionsDb
    20/02/2024 PR Reviewer and mentor Review of #PR 12719 Migrate GetResultsSessionAction Provide guidance on best practices (Avoid shared mutable instances in Const file, only immutable String literals, naming conventions is... for boolean), provide mentorship on using inheritance for NonExistentFeedbackResponse.java instead of instantiating duplicate 'fake' feedback sessions multiple times, aid in explaining code.
    20/02/2024 PR Contributor Create Database migration base scripts
    24/02/2024 PR Author Wrote migration script for UsageStatistics
    25/02/2024 PR Author Wrote verification script for UsageStatistics
    25/02/204 PR Contributor Contributed SQL injection ideas to aid in SQL injection testing Provided SQL injection test cases to be used during SQLi testing
    26/02/2024 PR Author Implementing pagination for SQL migration base script Prevent OutOfMemory errors due to large amount of data loaded and migrated by migrating page by page which can fit into memory
    26/02/2024 PR Co-Author Wrote base script for DB migration verification Debugged issue regarding failure to verify equality of migrated entities due to incorrecly implemented isEqual() method, where instances should use .equals() instead of == to check equality of value
    14/03/2024 Mentor Discussion on Multiple course structure (formerly multiple team structures) Ensure everyone on team understands project requirement, rename to Multiple Course Structure for clarity, since 'Teams' in TEAMMATES means something else, discussed UX flow and UI elements
    28/03/2024 PR Co-Author / Contributor Implement Hibernate entities for Multiple Course Structure Database ERD schema discussion and validation, guidance on many-to-many relationship representation in Hibernate.
    +This involves migrating actions in the backend application code, fixing previously undetected bugs, setting up of a development Google Cloud environment, writing base script files for moving and verifying data and mapping entities from non-sql entities to sql entities, debugging errors such as OutOfMemory exceptions during migration and exploring potential speedups.

    During this journey, I also played the role of a mentor for one of the CS3281 mentees to help provide guidance on migrating of action code. This includes sharing software engineering best practices such as avoiding mutable instances in Constant files, use of inheritance etc to ensure TEAMMATES code is more maintenable and less bug-prone.

    Secondly, I was involved in the SQL Injection testing team as well where I contributed knowledge on common SQL Injection attack inputs and helped formulate the test cases.

    Thirdly, I was involved in the design of Multiple Course Structures feature. I participated in the discussion and helped with the implementation of Hibernate entities to be used for future implementation of this feature. This includes updating existing ER designs to support the existing schema and new schema simultaneously.

    Finally, I was involved in raising and fixing minor documentation errors such as outdated commands on the developer guide to improve the experience of future developers.

    As for external projects, I worked on Scribe-iOS project, a Google Summer of Code and project which is part of Wikimedia foundation to improve code quality of the software. My learning points are further described in "observations.md".


    Key achievements:

    Date Role Description Key Achievement
    24/01/2024 Issue Reporter Found and reported issue #12699 with developer documentation ng command
    24/01/2024 PR Author Fixed documentation bug #12699 in TEAMMATES developer documentation with ng command Fixed documentation bug on key page (TEAMMATES new developer guide)
    07/02/2024 PR Reviewer Review of PR #12706 Migrate CreateInstructorAction
    15/02/2024 PR Author Review of PR #12702 Migrated CreateAccountAction 1. Over 20k LoC 2. Found and fixed previously undetected bugs with HibernateContext and circular toString() errors which cause Stack Overflow crashes 3. migrated 12k LoC of previous json bundle to new SQL bundle format
    20/02/2024 PR Reviewer Review of #PR 12741 Migrate feedbackSessionPublishedRemindersAction
    20/02/2024 PR Reviewer Review of #PR 12759 Add tests for FeedbackQuestionsDb
    20/02/2024 PR Reviewer and mentor Review of #PR 12719 Migrate GetResultsSessionAction Provide guidance on best practices (Avoid shared mutable instances in Const file, only immutable String literals, naming conventions is... for boolean), provide mentorship on using inheritance for NonExistentFeedbackResponse.java instead of instantiating duplicate 'fake' feedback sessions multiple times, aid in explaining code.
    20/02/2024 PR Contributor Create Database migration base scripts
    24/02/2024 PR Author Wrote migration script for UsageStatistics
    25/02/2024 PR Author Wrote verification script for UsageStatistics
    25/02/204 PR Contributor Contributed SQL injection ideas to aid in SQL injection testing Provided SQL injection test cases to be used during SQLi testing
    26/02/2024 PR Author Implementing pagination for SQL migration base script Prevent OutOfMemory errors due to large amount of data loaded and migrated by migrating page by page which can fit into memory
    26/02/2024 PR Co-Author Wrote base script for DB migration verification Debugged issue regarding failure to verify equality of migrated entities due to incorrecly implemented isEqual() method, where instances should use .equals() instead of == to check equality of value
    14/03/2024 Mentor Discussion on Multiple course structure (formerly multiple team structures) Ensure everyone on team understands project requirement, rename to Multiple Course Structure for clarity, since 'Teams' in TEAMMATES means something else, discussed UX flow and UI elements
    28/03/2024 PR Co-Author / Contributor Implement Hibernate entities for Multiple Course Structure Database ERD schema discussion and validation, guidance on many-to-many relationship representation in Hibernate.
    -
    +
    -

    Project: Foo

    Give an intro to the project here ...

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    +

    Project: Foo

    Give an intro to the project here ...

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    -

    CS3282 Progress

    Summary

    • Reviewed PRs of CS3281 mentees as well as a first-time contributor for CATcher and WATcher
    • Provided in-person guidance to CS3281 mentees regularly
    • Explored and implemented methods to test logger output in MarkBind

    PR Reviews - CATcher

    PR Contributions - CATcher

    Week Achievements
    3 Authored PR: Add documentation for CATcher's parser #1240

    PR Reviews - WATcher

    PR Contributions - MarkBind

    Issues Raised - MarkBind

    +

    CS3282 Progress

    Summary

    • Reviewed PRs of CS3281 mentees as well as a first-time contributor for CATcher and WATcher
    • Provided in-person guidance to CS3281 mentees regularly
    • Explored and implemented methods to test logger output in MarkBind

    PR Reviews - CATcher

    PR Contributions - CATcher

    Week Achievements
    3 Authored PR: Add documentation for CATcher's parser #1240

    PR Reviews - WATcher

    PR Contributions - MarkBind

    Issues Raised - MarkBind

    -
    +
    -

    Hibernate

    TEAMMATES uses Hibernate, an Object-Relational Mapping framework which allows us to interact with the database without writing SQL commands. It abstracts these low-level database interactions, enabling developers to work with high-level objects and queries instead. I read up on some Hibernate basics:

    • JPA persistence context / Hibernate session
    • entity states: transient, persistent, detached
    • entity operations: persist, merge, evict

    References:

    Mockito

    Mockito facilitates unit testing by reducing the setup needed to create and define behaviour of mocked objects. The provided mock, when/then and verify methods not only simplify the test writing process, but also enhance their readability and clarity for future developers.

    References:

    Docker

    I was introduced to Docker during the onboarding process. I learnt about containers and the benefits of containerization, such as portability and isolation, and how they enable developers on different infrastructure to work in a consistent environment.

    References:

    +

    Hibernate

    TEAMMATES uses Hibernate, an Object-Relational Mapping framework which allows us to interact with the database without writing SQL commands. It abstracts these low-level database interactions, enabling developers to work with high-level objects and queries instead. I read up on some Hibernate basics:

    • JPA persistence context / Hibernate session
    • entity states: transient, persistent, detached
    • entity operations: persist, merge, evict

    References:

    Mockito

    Mockito facilitates unit testing by reducing the setup needed to create and define behaviour of mocked objects. The provided mock, when/then and verify methods not only simplify the test writing process, but also enhance their readability and clarity for future developers.

    References:

    Docker

    I was introduced to Docker during the onboarding process. I learnt about containers and the benefits of containerization, such as portability and isolation, and how they enable developers on different infrastructure to work in a consistent environment.

    References:

    TEAMMATES

    Overview

    • Assisted in v9-migration: -
      • Migrated UpdateStudentAction
      • Add tests for FeedbackQuestionsDb

    Achievements by Week

    +

    Achievements by Week

    Week Achievements
    4 Merged PR: [#12048] Migrate UpdateStudentAction #12727
    5 Merged PR: [#12048] Add tests for FeedbackQuestionsDb #12759
    6 Created issue: Data Migration: Setter changes are persisted before data verification checks #12779
    -
    +
    -

    Data Migration

    Data migration is critical aspect of software development and system maintenance, it involves moving data efficiently while maintaining data integrity, security, and consistency. Having the chance to be involve in data migration really opened my eyes to its general procedure. We were tasked with migrating NoSQL datastore entity to SQL postgresql.

    • Efficiency, the longer the script, the longer the application is down
    • Validation, what to do if validation fails?
    • Order of migration
    • Batch processing, batching expensive operation would result in higher efficiency
    • Recovery, able to recover after a crash or SIGKILL

    End to End (E2E) testing

    E2E tests are a type of software testing that evaluates the entire workflow of an application from start to finish, simulating real user interactions. The purpose of E2E testing is to ensure that all components of an application, including the user interface, backend services, databases, and external integrations, work together correctly to achieve the desired functionality. Here's an explanation of E2E tests and how they are conducted. As E2E tests are very expensive to run, it is crucial that we identify the important workflows and simulate the actions involved by interacting with the UI. You then assert the expected conditions are present after the interaction. Teammates uses Selenium to locate and interact with the elements in the UI. I have to admit, this is my first time doing tests for Frontend much less the whole application. It was cool to see the browser jump around and simulate the required action. I also saw the value in this as I managed to uncover many bugs that was not caught in earlier tests.

    References:

    Mockito

    Mockito facilitates unit testing by mocking dependencies. Mock objects are used to simulated objects that mimic the behaviors of real objects in a controlled way, allowing developers to isolate and test specific components of their code without relying on actual dependencies or external systems. While I have written Stubs in CS2103T, this is my first time using a dedicated mocking library and it has changed my life. I also have used what I have learnt in many job interviews.

    • mock method to initialise the mock object
    • when/then for you to inject the controlled outcome
    • verify mainly to check number of invocations

    References:

    Hibernate

    TEAMMATES uses Hibernate, an Object-Relational Mapper(ORM). ORM are widely used in software development today as it provides several benefit to developers. While I have used ORMs before, such as Prisma, it is my first time using Hibernate. ORMs simplifies database interactions by allowing developers to work with Java objects directly, abstracting away the complexities of SQL queries. Also, as the name suggest, it allows us to map Java Objects to database table and their relationship. Allowing for easier and seamless operations with the database table. I read up on some Hibernate basics:

    • JPA (Java Persistence API)
    • Criteria API to make database queries
    • Transactions
    • Batch processing to improve performance, especially in Data Migration
    • Lazy loading to improve performance
    • operations such as evict, persist, merge,

    References:

    Google Cloud Compute

    I was required to deploy a staging environment for the course entity migration. It was my first time using GCP so I managed to gain familiarity with the vast tools that GCP offers. The guides provided by the seniors was just very descriptive and encouraged me to explore tweaking settings to better fit my use case.

    References:

    +

    Data Migration

    Data migration is critical aspect of software development and system maintenance, it involves moving data efficiently while maintaining data integrity, security, and consistency. Having the chance to be involve in data migration really opened my eyes to its general procedure. We were tasked with migrating NoSQL datastore entity to SQL postgresql.

    • Efficiency, the longer the script, the longer the application is down
    • Validation, what to do if validation fails?
    • Order of migration
    • Batch processing, batching expensive operation would result in higher efficiency
    • Recovery, able to recover after a crash or SIGKILL

    End to End (E2E) testing

    E2E tests are a type of software testing that evaluates the entire workflow of an application from start to finish, simulating real user interactions. The purpose of E2E testing is to ensure that all components of an application, including the user interface, backend services, databases, and external integrations, work together correctly to achieve the desired functionality. Here's an explanation of E2E tests and how they are conducted. As E2E tests are very expensive to run, it is crucial that we identify the important workflows and simulate the actions involved by interacting with the UI. You then assert the expected conditions are present after the interaction. Teammates uses Selenium to locate and interact with the elements in the UI. I have to admit, this is my first time doing tests for Frontend much less the whole application. It was cool to see the browser jump around and simulate the required action. I also saw the value in this as I managed to uncover many bugs that was not caught in earlier tests.

    References:

    Mockito

    Mockito facilitates unit testing by mocking dependencies. Mock objects are used to simulated objects that mimic the behaviors of real objects in a controlled way, allowing developers to isolate and test specific components of their code without relying on actual dependencies or external systems. While I have written Stubs in CS2103T, this is my first time using a dedicated mocking library and it has changed my life. I also have used what I have learnt in many job interviews.

    • mock method to initialise the mock object
    • when/then for you to inject the controlled outcome
    • verify mainly to check number of invocations

    References:

    Hibernate

    TEAMMATES uses Hibernate, an Object-Relational Mapper(ORM). ORM are widely used in software development today as it provides several benefit to developers. While I have used ORMs before, such as Prisma, it is my first time using Hibernate. ORMs simplifies database interactions by allowing developers to work with Java objects directly, abstracting away the complexities of SQL queries. Also, as the name suggest, it allows us to map Java Objects to database table and their relationship. Allowing for easier and seamless operations with the database table. I read up on some Hibernate basics:

    • JPA (Java Persistence API)
    • Criteria API to make database queries
    • Transactions
    • Batch processing to improve performance, especially in Data Migration
    • Lazy loading to improve performance
    • operations such as evict, persist, merge,

    References:

    Google Cloud Compute

    I was required to deploy a staging environment for the course entity migration. It was my first time using GCP so I managed to gain familiarity with the vast tools that GCP offers. The guides provided by the seniors was just very descriptive and encouraged me to explore tweaking settings to better fit my use case.

    References:

    TEAMMATES

    Overview

    • Assisted in the V9-Migration -
      • Authored migration of CreateInstructorAction and InstructorSearchIndexingWorkerAction.
      • Created test cases for FeedbackResponseCommentDbTest.
      • Work on the design document for Multiple Team Structure.
      • Created mock up for Multiple Team Structure.
      • Migrated FeedbackResultsPageE2ETest and FeedbackRankOptionE2ETest.
      • Authored data migration scripts for Course and Section entity as part of v9-course-migration.
      • Discussed and Authored course-level data migration scripts for Course, Section, Team, Student entity.
      • Fix bugs present in getSessionResultAction and feedbackResponsesLogic
      • Help review PR by contributors

    Achievements by Week

    Week Achievements
    3 Merged PR: [#12048] Migrate Create Instructor action #12706
    4 Merged PR: [#12048] Migrate Instructor Search Indexing Worker action #12731
    5 Merged PR: [#12048] Add tests for Feedback Response Comment database #12755
    6 Worked on design document for Multiple team structure (User flow and Requirements)
    7 Merged PR: [[#12048] Add tests for Feedback Response Comment logic #12769]
    7 Created UI wireframes for Multiple team structure
    8 Merged PR: [#12048] Migrate Feedback Rank Option E2E test #12902
    8 Worked on design document for Multiple team structure (Logic and affected routes)
    9 Reviewed PR: [#12666] Instructor's Student Records Page: Moderate response button (on panel) #12964
    10 Authored PR: [#12048] Migrate Feedback Results Page E2E test #12949
    10 Set-up the staging environment for data migration
    11 Reviewed PR: [#12894] Per-recipient stats are calculated based on student name, not email #12981
    11 Reviewed PR: [#12048] Data migration for feedback session entities #12986
    11 Merged PR: [#12048] Data Migration Script for Course #12980
    12 Reviewed PR: [#12048] Data migration for student entities #12988
    12 Reviewed PR: [#12048] SeedDb code for student entities #12990
    12 Merged PR: [#12048] Data Migration Script for Section #12991
    13 Reviewed PR: [#12048] Data migration for team entities #13010
    13 Reviewed PR: [#12901] Added the check for search service and moved the method to the correct file #13021
    13 Authored PR: [#12048] Data Migration Script for Student Chain, Course #13018
    13 Merged PR: [#12048] Fix getSessionResultAction bugs #13023
    13 Merged PR: [#12048] Fix feedbackResponsesLogic bugs #13024
    13 Authored PR: [#12048] Data Migration Script for Student Chain, Section #13034
    13 Authored PR: [#12048] Data Migration Script for Student Chain, Teams #13035
    13 Merged PR: [#12048] Data Migration Script for Student Chain, Students #13036
    13 Reviewed PR: [#12048] Data migration: ensure consistency when script is stopped and resumed #13046
    13 Reviewed PR: [#12048] Data migration for feedback entities chain #13045
    13 Merged PR: [#12048] Data migration section chain fixs #13042
    R Merged PR: [#12048] migrate instructor deadline ext #13071
    R Merged PR: [#12048] associate account to migrated users #13073
    +

    Achievements by Week

    Week Achievements
    3 Merged PR: [#12048] Migrate Create Instructor action #12706
    4 Merged PR: [#12048] Migrate Instructor Search Indexing Worker action #12731
    5 Merged PR: [#12048] Add tests for Feedback Response Comment database #12755
    6 Worked on design document for Multiple team structure (User flow and Requirements)
    7 Merged PR: [[#12048] Add tests for Feedback Response Comment logic #12769]
    7 Created UI wireframes for Multiple team structure
    8 Merged PR: [#12048] Migrate Feedback Rank Option E2E test #12902
    8 Worked on design document for Multiple team structure (Logic and affected routes)
    9 Reviewed PR: [#12666] Instructor's Student Records Page: Moderate response button (on panel) #12964
    10 Authored PR: [#12048] Migrate Feedback Results Page E2E test #12949
    10 Set-up the staging environment for data migration
    11 Reviewed PR: [#12894] Per-recipient stats are calculated based on student name, not email #12981
    11 Reviewed PR: [#12048] Data migration for feedback session entities #12986
    11 Merged PR: [#12048] Data Migration Script for Course #12980
    12 Reviewed PR: [#12048] Data migration for student entities #12988
    12 Reviewed PR: [#12048] SeedDb code for student entities #12990
    12 Merged PR: [#12048] Data Migration Script for Section #12991
    13 Reviewed PR: [#12048] Data migration for team entities #13010
    13 Reviewed PR: [#12901] Added the check for search service and moved the method to the correct file #13021
    13 Authored PR: [#12048] Data Migration Script for Student Chain, Course #13018
    13 Merged PR: [#12048] Fix getSessionResultAction bugs #13023
    13 Merged PR: [#12048] Fix feedbackResponsesLogic bugs #13024
    13 Authored PR: [#12048] Data Migration Script for Student Chain, Section #13034
    13 Authored PR: [#12048] Data Migration Script for Student Chain, Teams #13035
    13 Merged PR: [#12048] Data Migration Script for Student Chain, Students #13036
    13 Reviewed PR: [#12048] Data migration: ensure consistency when script is stopped and resumed #13046
    13 Reviewed PR: [#12048] Data migration for feedback entities chain #13045
    13 Merged PR: [#12048] Data migration section chain fixs #13042
    R Merged PR: [#12048] migrate instructor deadline ext #13071
    R Merged PR: [#12048] associate account to migrated users #13073
    -
    +
    -

    Summary

    In CATcher, I mainly fixed bugs and made small enhancements in functionalities. In WATcher, I contributed to the enhancement of the issue viewer - the main functionality of WATcher.

    Details

    CATcher

    PRs opened

    Week PR
    <1 #1233 Fix broken duplicate links
    <1 #1234 Default branch to main
    4 #1241 Preserve line breaks in markdown
    6 #1245 Fix markddown blockquote preview difference
    8 #1256 Add login redirect

    PRs reviewed

    Week PR
    5 #1243 Faulty list view when back navigating

    WATcher

    PRs opened

    Week PR
    2 #230 Fix label filter not working
    3 #235 Show list of hidden users
    4 #254 Refactor Label model
    5 #255 Add shareable repo-specific URL
    7 #282 Three-state labels
    9 #309 Hide redundant column pagination
    9 #310 Status filter checkboxes
    10 #320 Add preset views
    10 #326 Fix for no milestone case
    10 #327 Create release 1.2.0
    11 #338 Fix preset view selection appearance
    11 #346 Hide column issue count
    12 #360 Optimise Github API calls

    Issues created

    Week Issue
    2 #229 App filters do not work with some label names
    3 #236 Bypass logging in if viewing public repos only
    3 #240 Hiding labels do not work as expected
    4 #251 Add shareable repo-specific URL
    5 #256 Refactor test cases for Label model
    7 #277 Add current filters to URL
    7 #278 Make URL redirect to work with activity dashboard
    8 #287 Reading property of undefined when switching repo in activity dashboard
    11 #343 Hide column issue count if only one page
    11 #344 Change the repo change form from popup to dropdown
    13 #371 Horizontal scrollbar on an issue card

    PRs reviewed

    Week PR
    6 #261 Refactor sorting
    7 #281 Keep filters when switching repos
    9 #307 Add tooltip for hidden users
    9 #308 Setup grouping strategy and service
    9 #311 Keep milestones when switching repo
    9 #313 Integrate Grouping Service
    10 #314 Add filters to url
    10 #315 Split 'Without a milestone' option
    10 #316 Implement group by milestone
    10 #318 Add sorting by Status
    10 #322 Update repo on back and forth navigation
    10 #323 Refactor MilestoneGroupingStrategy to match changes in #315
    10 #325 Enable npm run test in Github Action
    10 #331 Deploy V1.2.0
    11 #337 Add icon for PRs without milestones
    11 #337 Implement dropdown menu for repo change
    12 #359 Consider open milestone without deadline as currently active
    13 #374 Fix reset of filters on label fetch
    13 #375 fix: word-break issue in issue-pr-card-header.component.css #371
    +

    Summary

    In CATcher, I mainly fixed bugs and made small enhancements in functionalities. In WATcher, I contributed to the enhancement of the issue viewer - the main functionality of WATcher.

    Details

    CATcher

    PRs opened

    Week PR
    <1 #1233 Fix broken duplicate links
    <1 #1234 Default branch to main
    4 #1241 Preserve line breaks in markdown
    6 #1245 Fix markddown blockquote preview difference
    8 #1256 Add login redirect

    PRs reviewed

    Week PR
    5 #1243 Faulty list view when back navigating

    WATcher

    PRs opened

    Week PR
    2 #230 Fix label filter not working
    3 #235 Show list of hidden users
    4 #254 Refactor Label model
    5 #255 Add shareable repo-specific URL
    7 #282 Three-state labels
    9 #309 Hide redundant column pagination
    9 #310 Status filter checkboxes
    10 #320 Add preset views
    10 #326 Fix for no milestone case
    10 #327 Create release 1.2.0
    11 #338 Fix preset view selection appearance
    11 #346 Hide column issue count
    12 #360 Optimise Github API calls

    Issues created

    Week Issue
    2 #229 App filters do not work with some label names
    3 #236 Bypass logging in if viewing public repos only
    3 #240 Hiding labels do not work as expected
    4 #251 Add shareable repo-specific URL
    5 #256 Refactor test cases for Label model
    7 #277 Add current filters to URL
    7 #278 Make URL redirect to work with activity dashboard
    8 #287 Reading property of undefined when switching repo in activity dashboard
    11 #343 Hide column issue count if only one page
    11 #344 Change the repo change form from popup to dropdown
    13 #371 Horizontal scrollbar on an issue card

    PRs reviewed

    Week PR
    6 #261 Refactor sorting
    7 #281 Keep filters when switching repos
    9 #307 Add tooltip for hidden users
    9 #308 Setup grouping strategy and service
    9 #311 Keep milestones when switching repo
    9 #313 Integrate Grouping Service
    10 #314 Add filters to url
    10 #315 Split 'Without a milestone' option
    10 #316 Implement group by milestone
    10 #318 Add sorting by Status
    10 #322 Update repo on back and forth navigation
    10 #323 Refactor MilestoneGroupingStrategy to match changes in #315
    10 #325 Enable npm run test in Github Action
    10 #331 Deploy V1.2.0
    11 #337 Add icon for PRs without milestones
    11 #337 Implement dropdown menu for repo change
    12 #359 Consider open milestone without deadline as currently active
    13 #374 Fix reset of filters on label fetch
    13 #375 fix: word-break issue in issue-pr-card-header.component.css #371
    -
    +
    -

    Tool/Technology 1

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

    Tool/Technology 2

    ...

    +

    Tool/Technology 1

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

    Tool/Technology 2

    ...

    -

    Project: Foo

    Give an intro to the project here ...

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    +

    Project: Foo

    Give an intro to the project here ...

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    -
    +
    -
    +
    -
    +
    -

    Pug

    Summary

    Pug, formerly known as Jade, is a templating language for Node.js and browsers. It simplifies HTML markup by using indentation-based syntax and offers features like variables, includes, mixins, and conditionals, making web development more efficient and readable.

    Aspects Learnt

    I learnt how to create a Pug template and integrate it into a Vue component.

    Resources Used

    StackOverflow, ChatGPT, existing codebase, Pug Website

    Vue

    Summary

    Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It offers a flexible and approachable structure for front-end development, with features like data binding, component-based architecture, and a simple yet powerful syntax.

    Aspects Learnt

    I learnt the rationale behind the Single File Component structure, as well as how to implement it to refactor code. It was very similar to React in that the framework is structured around components, and props are still used for data flow. I also learnt how to access local files from within the framework to dynamically load data.

    Resources Used

    StackOverflow, ChatGPT, existing codebase, Vue Website

    Cypress

    Summary

    Cypress is an end-to-end testing framework used primarily for testing web applications. It provides a comprehensive set of tools and features to automate testing workflows, including real-time testing, automatic waiting, and built-in support for modern JavaScript frameworks.

    Aspects Learnt

    I learnt how to write simple tests with the framework, as well as how to use the E2E live view to debug and design tests.

    Resources Used

    StackOverflow, ChatGPT, existing codebase, Cypress Documentation

    markdown-it

    Summary

    Markdown-it is a popular JavaScript library used for parsing Markdown syntax and converting it into HTML. It provides a simple and flexible way to format text with lightweight markup syntax.

    Aspects Learnt

    I learnt how to integrate markdown-it into a Vue component to allow for dynamic parsing of Markdown code into HTML for display.

    Resources Used

    StackOverflow, ChatGPT, markdown-it Documentation, this guide

    Vite

    Summary

    Vite is a build tool that offers fast development and optimized production builds for web projects, particularly for Vue.js applications.

    Aspects Learnt

    I learnt how to configure a Vite project.

    Resources Used

    StackOverflow, ChatGPT, Vite Documentation, Vue CLI to Vite migration guide

    Eslint and Stylelint

    Summary

    ESLint is a pluggable linting utility for JavaScript and TypeScript that helps identify and fix common coding errors and enforce consistent code style. Stylelint is a linter for CSS and Sass that helps enforce consistent coding conventions and identifies potential errors in stylesheets.

    Aspects Learnt

    I learnt how to implement ESlint and Stylelint rules and modify the config files.

    Resources Used

    StackOverflow, ChatGPT, Documentation

    +

    Pug

    Summary

    Pug, formerly known as Jade, is a templating language for Node.js and browsers. It simplifies HTML markup by using indentation-based syntax and offers features like variables, includes, mixins, and conditionals, making web development more efficient and readable.

    Aspects Learnt

    I learnt how to create a Pug template and integrate it into a Vue component.

    Resources Used

    StackOverflow, ChatGPT, existing codebase, Pug Website

    Vue

    Summary

    Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It offers a flexible and approachable structure for front-end development, with features like data binding, component-based architecture, and a simple yet powerful syntax.

    Aspects Learnt

    I learnt the rationale behind the Single File Component structure, as well as how to implement it to refactor code. It was very similar to React in that the framework is structured around components, and props are still used for data flow. I also learnt how to access local files from within the framework to dynamically load data.

    Resources Used

    StackOverflow, ChatGPT, existing codebase, Vue Website

    Cypress

    Summary

    Cypress is an end-to-end testing framework used primarily for testing web applications. It provides a comprehensive set of tools and features to automate testing workflows, including real-time testing, automatic waiting, and built-in support for modern JavaScript frameworks.

    Aspects Learnt

    I learnt how to write simple tests with the framework, as well as how to use the E2E live view to debug and design tests.

    Resources Used

    StackOverflow, ChatGPT, existing codebase, Cypress Documentation

    markdown-it

    Summary

    Markdown-it is a popular JavaScript library used for parsing Markdown syntax and converting it into HTML. It provides a simple and flexible way to format text with lightweight markup syntax.

    Aspects Learnt

    I learnt how to integrate markdown-it into a Vue component to allow for dynamic parsing of Markdown code into HTML for display.

    Resources Used

    StackOverflow, ChatGPT, markdown-it Documentation, this guide

    Vite

    Summary

    Vite is a build tool that offers fast development and optimized production builds for web projects, particularly for Vue.js applications.

    Aspects Learnt

    I learnt how to configure a Vite project.

    Resources Used

    StackOverflow, ChatGPT, Vite Documentation, Vue CLI to Vite migration guide

    Eslint and Stylelint

    Summary

    ESLint is a pluggable linting utility for JavaScript and TypeScript that helps identify and fix common coding errors and enforce consistent code style. Stylelint is a linter for CSS and Sass that helps enforce consistent coding conventions and identifies potential errors in stylesheets.

    Aspects Learnt

    I learnt how to implement ESlint and Stylelint rules and modify the config files.

    Resources Used

    StackOverflow, ChatGPT, Documentation

    -

    Progress

    Summary

    • Added new Title component and documentation
    • Updated frontend dependencies
    • Refactored frontend code
    • Added style rules
    • Minor bug fixes
    Week Merged PRs
    3 [#1980] Standardise Array Style for Frontend Files #2084
    3 [#2003] Suppress Console Warning #2088
    3 [#1224] Update .stylelintrc.json to check for spacing #2094
    4 [#2001] Extract c-authorship-file component from views/c-authorship #2096
    6 [#2112] Move Segment CSS into segment.vue #2113
    6 [#467] Add Title Component #2102
    7 [#2128] Fix Blurry Favicon #2129
    10 [#2001] Extract c-zoom-commit-message component from views/c-zoom
    10 [#2142] Fix Vulnerabilities
    11 [#2151] Update LoadingOverlay and Minor Versions of Node Dependencies
    13 [#2136] Add Tests for Segment CSS
    13 [#2151] Update Stylelint
    13 [#2151] Update CSS-related Major Dependencies
    13 [#2158] Add More Documentation for Title Component
    Reading [#2184] Fix Inconsistent Line Number Colours
    Reading [#2151] Update Typescript-related Major Dependencies
    Reading [#2001] Extract c-file-type-checkboxes from Summary, Authorship and Zoom
    Week PRs Reviewed
    2 [#2004] Remove redundant Segment class #2085
    2 [#1973] Remove redundant User class #2093
    2 [#2082] Fix typo in command in Setting Up page #2083
    2 [#2091] Improve memory usage by refactoring Regex compilation #2092
    3 [#2016] Remove hash symbol from URL when decoding hash #2086
    3 [#2103] Refactor parser package for greater organisation of classes #2104
    3 [#2098] Add show more button for error messages #2105
    3 [#1933] Fix broken DevOps Guide link in Learning Basics #2107
    4 [#1878] Updating SystemTestUtil::assertJson to compare Json objects instead of line-by-line analysis #2087
    5 [#2091] Minor Enhancements to Existing Regex Code #2115
    5 [#2117] Refactor CliArguments to conform to RepoConfiguration's Builder Pattern #2118
    5 [#2091] Minor Enhancements to Existing Regex Code #2115
    6 [#2109] Add search by tag functionality #2116
    6 [#2123] Fix zoom bug if zUser is undefined #2126
    9 [#2134] Fix broken code highlighting in Code Panel
    10 [#944] Implement authorship analysis
    10 [#2148] Show tags on the ramp chart
    10 [#2179] Add bin/ to .gitignore
    11 [#2109] Add search by tag functionality
    13 Add optimise timeline feature
    13 Allow CI to pass if Codecov fails
    13 Fix lint warnings
    13 Add bin/ to .gitignore
    Week Issues Submitted
    2 Update Style Checker for Pug Templates and Files #2097
    5 Support author-config.csv advanced syntax on CLI #2110
    5 Move CSS for Segment component into c-segment.vue #2112
    7 Fix Vulnerabilities in Code Base #2142
    8 Frontend DevOps: Update Node.js dependencies
    9 Add More Documentation for Title Component
    9 One-Stop Config File for Code Portfolio
    10 Add Blurbs for Repos
    10 Enforce No Spacing Between Methods in Vue Files
    10 Replace Vue CLI with Vite
    +

    Progress

    Summary

    • Added new Title component and documentation
    • Updated frontend dependencies
    • Refactored frontend code
    • Added style rules
    • Minor bug fixes
    Week Merged PRs
    3 [#1980] Standardise Array Style for Frontend Files #2084
    3 [#2003] Suppress Console Warning #2088
    3 [#1224] Update .stylelintrc.json to check for spacing #2094
    4 [#2001] Extract c-authorship-file component from views/c-authorship #2096
    6 [#2112] Move Segment CSS into segment.vue #2113
    6 [#467] Add Title Component #2102
    7 [#2128] Fix Blurry Favicon #2129
    10 [#2001] Extract c-zoom-commit-message component from views/c-zoom
    10 [#2142] Fix Vulnerabilities
    11 [#2151] Update LoadingOverlay and Minor Versions of Node Dependencies
    13 [#2136] Add Tests for Segment CSS
    13 [#2151] Update Stylelint
    13 [#2151] Update CSS-related Major Dependencies
    13 [#2158] Add More Documentation for Title Component
    Reading [#2184] Fix Inconsistent Line Number Colours
    Reading [#2151] Update Typescript-related Major Dependencies
    Reading [#2001] Extract c-file-type-checkboxes from Summary, Authorship and Zoom
    Week PRs Reviewed
    2 [#2004] Remove redundant Segment class #2085
    2 [#1973] Remove redundant User class #2093
    2 [#2082] Fix typo in command in Setting Up page #2083
    2 [#2091] Improve memory usage by refactoring Regex compilation #2092
    3 [#2016] Remove hash symbol from URL when decoding hash #2086
    3 [#2103] Refactor parser package for greater organisation of classes #2104
    3 [#2098] Add show more button for error messages #2105
    3 [#1933] Fix broken DevOps Guide link in Learning Basics #2107
    4 [#1878] Updating SystemTestUtil::assertJson to compare Json objects instead of line-by-line analysis #2087
    5 [#2091] Minor Enhancements to Existing Regex Code #2115
    5 [#2117] Refactor CliArguments to conform to RepoConfiguration's Builder Pattern #2118
    5 [#2091] Minor Enhancements to Existing Regex Code #2115
    6 [#2109] Add search by tag functionality #2116
    6 [#2123] Fix zoom bug if zUser is undefined #2126
    9 [#2134] Fix broken code highlighting in Code Panel
    10 [#944] Implement authorship analysis
    10 [#2148] Show tags on the ramp chart
    10 [#2179] Add bin/ to .gitignore
    11 [#2109] Add search by tag functionality
    13 Add optimise timeline feature
    13 Allow CI to pass if Codecov fails
    13 Fix lint warnings
    13 Add bin/ to .gitignore
    Week Issues Submitted
    2 Update Style Checker for Pug Templates and Files #2097
    5 Support author-config.csv advanced syntax on CLI #2110
    5 Move CSS for Segment component into c-segment.vue #2112
    7 Fix Vulnerabilities in Code Base #2142
    8 Frontend DevOps: Update Node.js dependencies
    9 Add More Documentation for Title Component
    9 One-Stop Config File for Code Portfolio
    10 Add Blurbs for Repos
    10 Enforce No Spacing Between Methods in Vue Files
    10 Replace Vue CLI with Vite
    -
    +
    -

    Vue.js and Typescript

    Helped out with migration from JavaScript to TypeScript and currently pending a feature to compare all repos at once.

    DevOps

    Planning to focus on DevOps for the remainder of the semester.

    +

    Vue.js and Typescript

    Helped out with migration from JavaScript to TypeScript and currently pending a feature to compare all repos at once.

    DevOps

    Planning to focus on DevOps for the remainder of the semester.

    -

    Progress

    Week Merged PRs
    3 [#2082] Fix typo in command in Setting Up page
    4 [#1933] Fix broken DevOps Guide link in Learning Basics #2107
    6 [#2002] Add explicit return type annotations to TypeScript functions
    Week Issues Submitted
    3 Fix typo in command in Setting Up page #2082
    +

    Progress

    Week Merged PRs
    3 [#2082] Fix typo in command in Setting Up page
    4 [#1933] Fix broken DevOps Guide link in Learning Basics #2107
    6 [#2002] Add explicit return type annotations to TypeScript functions
    Week Issues Submitted
    3 Fix typo in command in Setting Up page #2082

    Angular

    Having had experience in mainly React and NodeJS projects earlier, I was overall more used to creating projects with Functional Components, rather than Class Components as with Angular. However, I realised that one of the key aspects of frontend frameworks, namely reactivity, was in fact the main drivers of development of such frameworks in the first place!

    In fact, even React were originally championing the idea of Class Components in order to isolate various web components into areas or responsibility, following rule number 1 of Software Engineering: Single Responsibility. However, while React is largely unopinionated in how you structure your code with regards to the coupling of business logic and HTML, Angular differs by dictating where and how you structure your components.

    Angular separates components into modules which comprise of 3 to 4 files:

    • Components, which are necessarily TypeScript classes which have the @Component decorator;
    • Templates, which dictate the HTML that is produced and rendered by the component;
    • Styles, which dictate the type of styling to apply to the component.
    • Module, which indicate the modules or services that are to be imported by the component. Interestingly,

    On the other hand, React only dictates that class components should produce some sort of HTML using the render function. Even this is removed with the introduction of Functional Components that are simply functions which render and produce some HTML. React introduces hooks which are often used by developers to manage some state at the component level, using functions with side effects.

    Each method has its positives and negatives. Because of its opinionated nature, Angular makes it easy to standardize frontend coding standards and pattern across an entire enterprise, making it an apt choice to use as a tool for OSS development. On the other hand, React allows you to develop code more quickly, with more attention needed to be paid at the rendering lifecycles in order to let the Virtual DOM know when a particular component needs to be rendered again. On top of this, Angular wholely separates business logic from rendered HTML, whereas React takes the does not make this distinction.

    Another key point is how React and Angular differentiate in providing context (sharing or passing down state between different branches of the DOM tree). React has its own Context API that is used to share some sort of state between different components, whereas Angular does this by the providers declaration in the module folder, which results in a set of singletons that are shared by components that exist below it in the tree.

    RxJS

    I also picked up RxJS along the way, which was Angular's answer to creating reactive components. RxJS essentially deals with asynchronous pipe/filter, publisher/subscriber behavior which allows values to change and other components or functions to subscribe to these changes. This works considering Angular's Change Detection strategy which I will explain later.

    In comparison, React introduced and adopted hooks to encapsulate the behavior of having to rerender. React does this by operating on a Virtual DOM, and appropriately rerendering components and their children in patches when a change was detected. On the other hand, Angular does not have any abstraction to operate and rerender components whose state have changed. Instead, Angular uses a Change Detection Strategy which can be configured by the user (either onPush or Default). Angular Change Detection works by using Zone.js and activating after every async action performed. CD traversal starts at the root component (usually App) and works its way down the component tree updating the DOM as needed. What's happening under the hood is that browser events are registered into Zone.js - Angular's mechanism for orchestrating async events - which emits changes after initial template bindings are created. -...

    +...

    -

    Project: Zitadel

    Zitadel is an open source user management tool that aims to provide easy identity infrastructure, with out-of-the-box features such as

    • Multi-tenancy with team management
    • Secure Login
    • Self-service
    • OpenID Connect
    • SAML2
    • LDAP

    and more solutions. It provides easy integration with oAuth providers such as GitHub, Facebook, O365 and serves as an easy way for enterprises to set up multi-tenancy identity providers with clear separation of identities. Zitadel is written in Go and consists of an interesting mix of server-side rendered authentication (using Go and HTML templates), along with a client side application written in Angular, as well as modularised Core library that uses Event-driven architecture to ensure that all events are not only captured but also traceable.

    The team favours transaction safety, with high availability, and have employed and implemented it's own message queue system. It works by placing events into an in-memory queue for subscribers, under the pub-sub model.

    Zitadel has 7.1k stars and is used by many organisations as an alternative to other identity infrastructure platforms, due to it's heavy customisability in terms of branding and deployment options.

    My Contributions

    • Fixed button positioning issues on email verification screen within the Login page PR #7579
    • Fixed navigation issues where users would be directed incorrectly to another page when clicking on "Back" PR #7683

    My Learning Record

    Deploying both an Angular console application, which is a management interface, as well as Server side pages for authentication (Login, Register and Password Reset pages) were important. Particularly, Zitadel uses HTML templates heavily along with a flexible component system that enables easy internationalisation, which is important for a tool like Zitadel that everyone can use.

    Also, learning about gRPC through interactions with the backend was also enlightening as I was more familiar with GraphQL and traditional HTTP endpoints through my experience with CATcher/WATcher and personal projects and internships.

    gRPC uses Protocol Buffers (protobufs) by default, which is a lightweight, highly efficient serialization tool; which serves it's purpose when building a distributed application like Zitadel. It also allows for server-side and client-side streaming, both of which are used (particularly for event logging) in Zitadel.

    Project: Templ

    Templ is a HTML templating language for Go that has great developer tooling, including an LSP (Language Server Protocol) for Vim users and extension for VSCode users. With Templ, we can create components that render fragments of HTML and then compose them to create screens, pages, documents or apps.

    This allows for

    • Server-side rendering (deployed as a serverless function or standard Go program)
    • Static rendering (create static HTML files to deploy how you choose)
    • Compiled code (components compiled to performant Go code)
    • Ability to move away from JavaScript in client-side and server-side contexts

    Templ borrows heavily from the Component model in React and Angular, and as such models it's own components as mark up and code that is compiled into functions that return a templ.Component interface.

    This allows for Templ to be used in tandem with htmx, to selectively replace content within a webpage instead of replacing the whole web page within the browser.

    My Contributions

    My Learning Record

    I learnt how to build an SSR application using Go, HTMX and Templ by building an example application to provide documentation for i18n support. I also used Server-side Events which enabled minified HTMX runtime to add elements based on the component that was received on the stream endpoint. I also understood how i18n was generally implemented on products with a need to support a variety of languages, as well as building generalised components that decoupled the actual components from the textual UI.

    Project: FerretDB

    FerretDB was founded to become the de-facto open-source substitute to MongoDB. FerretDB is an open-source proxy, converting the MongoDB 5.0+ wire protocol queries to SQL - using PostgreSQL or SQLite as a database engine.

    MongoDB was originally the eye-opening technology for developers that allowed developers to build applications faster than using relational databases. However, with MongoDB abandoning its open-source roots, there was a need for an easy-to-use open-source document database solution, which is what FerretDB aims to fill.

    My Contributions

    • Add local changelog generation that uses a milestone title to generate the batch of changes for the milestone PR #4219

    My Learning Record

    While I did not learn much about the database design in itself, I learnt about Conventional Commits: a standardised format that dictates how developers should write their commit messages. Conventional commits allowed for projects with a large developer base to have visibility and transparency over who did what, when. Furthermore, the standardisation allows for easy automatic changelog generation, important for when products are shipped out to actual users; as well as making it easier for people to contribute to projects.

    FerretDB suffered from the lack of implementation of Conventional Commits: without it, it was dependent on the platform (GitHub) the repository was hosted on to actually generate meaningful Changelogs. This added additional dependencies that tied the project with GitHub unnecessarily, instead of allowing the project to be independent of the Git versioning platform it was hosted on (GitLab, BitBucket are suitable alternatives).

    As such, Changelog generation was originally done by using the GitHub workflow directly, which overly complicated the release process, necessitating for another way to locally generate the Changelog.

    +

    Project: Zitadel

    Zitadel is an open source user management tool that aims to provide easy identity infrastructure, with out-of-the-box features such as

    • Multi-tenancy with team management
    • Secure Login
    • Self-service
    • OpenID Connect
    • SAML2
    • LDAP

    and more solutions. It provides easy integration with oAuth providers such as GitHub, Facebook, O365 and serves as an easy way for enterprises to set up multi-tenancy identity providers with clear separation of identities. Zitadel is written in Go and consists of an interesting mix of server-side rendered authentication (using Go and HTML templates), along with a client side application written in Angular, as well as modularised Core library that uses Event-driven architecture to ensure that all events are not only captured but also traceable.

    The team favours transaction safety, with high availability, and have employed and implemented it's own message queue system. It works by placing events into an in-memory queue for subscribers, under the pub-sub model.

    Zitadel has 7.1k stars and is used by many organisations as an alternative to other identity infrastructure platforms, due to it's heavy customisability in terms of branding and deployment options.

    My Contributions

    • Fixed button positioning issues on email verification screen within the Login page PR #7579
    • Fixed navigation issues where users would be directed incorrectly to another page when clicking on "Back" PR #7683

    My Learning Record

    Deploying both an Angular console application, which is a management interface, as well as Server side pages for authentication (Login, Register and Password Reset pages) were important. Particularly, Zitadel uses HTML templates heavily along with a flexible component system that enables easy internationalisation, which is important for a tool like Zitadel that everyone can use.

    Also, learning about gRPC through interactions with the backend was also enlightening as I was more familiar with GraphQL and traditional HTTP endpoints through my experience with CATcher/WATcher and personal projects and internships.

    gRPC uses Protocol Buffers (protobufs) by default, which is a lightweight, highly efficient serialization tool; which serves it's purpose when building a distributed application like Zitadel. It also allows for server-side and client-side streaming, both of which are used (particularly for event logging) in Zitadel.

    Project: Templ

    Templ is a HTML templating language for Go that has great developer tooling, including an LSP (Language Server Protocol) for Vim users and extension for VSCode users. With Templ, we can create components that render fragments of HTML and then compose them to create screens, pages, documents or apps.

    This allows for

    • Server-side rendering (deployed as a serverless function or standard Go program)
    • Static rendering (create static HTML files to deploy how you choose)
    • Compiled code (components compiled to performant Go code)
    • Ability to move away from JavaScript in client-side and server-side contexts

    Templ borrows heavily from the Component model in React and Angular, and as such models it's own components as mark up and code that is compiled into functions that return a templ.Component interface.

    This allows for Templ to be used in tandem with htmx, to selectively replace content within a webpage instead of replacing the whole web page within the browser.

    My Contributions

    My Learning Record

    I learnt how to build an SSR application using Go, HTMX and Templ by building an example application to provide documentation for i18n support. I also used Server-side Events which enabled minified HTMX runtime to add elements based on the component that was received on the stream endpoint. I also understood how i18n was generally implemented on products with a need to support a variety of languages, as well as building generalised components that decoupled the actual components from the textual UI.

    Project: FerretDB

    FerretDB was founded to become the de-facto open-source substitute to MongoDB. FerretDB is an open-source proxy, converting the MongoDB 5.0+ wire protocol queries to SQL - using PostgreSQL or SQLite as a database engine.

    MongoDB was originally the eye-opening technology for developers that allowed developers to build applications faster than using relational databases. However, with MongoDB abandoning its open-source roots, there was a need for an easy-to-use open-source document database solution, which is what FerretDB aims to fill.

    My Contributions

    • Add local changelog generation that uses a milestone title to generate the batch of changes for the milestone PR #4219

    My Learning Record

    While I did not learn much about the database design in itself, I learnt about Conventional Commits: a standardised format that dictates how developers should write their commit messages. Conventional commits allowed for projects with a large developer base to have visibility and transparency over who did what, when. Furthermore, the standardisation allows for easy automatic changelog generation, important for when products are shipped out to actual users; as well as making it easier for people to contribute to projects.

    FerretDB suffered from the lack of implementation of Conventional Commits: without it, it was dependent on the platform (GitHub) the repository was hosted on to actually generate meaningful Changelogs. This added additional dependencies that tied the project with GitHub unnecessarily, instead of allowing the project to be independent of the Git versioning platform it was hosted on (GitLab, BitBucket are suitable alternatives).

    As such, Changelog generation was originally done by using the GitHub workflow directly, which overly complicated the release process, necessitating for another way to locally generate the Changelog.

    CS3282 Progress

    Summary

    CATcher

    Date Role Description Key Achievements
    4 July 2023 PR Reviewer Specify node version in package.json
    12 Oct 2023 PR Reviewer Fetch settings json directly without api
    14 Oct 2023 Version Release v3.5.1
    4 Mar 2024 Version Release v3.5.3
    4 Mar 2024 PR Reviewer Upgrade to Angular 13

    WATcher

    Date Role Description Key Achievements
    19 Sep 2023 PR Reviewer Improve efficiency of saving and deleting issue models
    28 Oct 2023 PR Reviewer Add Issues Dashboard access by URL
    20 Feb 2024 Issue Contributor Refactor filters into own service
    20 Feb 2024 PR Reviewer Refactor certain filters into its own service #259
    22 Feb 2024 PR Reviewer Refactor sorting
    28 Feb 2024 PR Reviewer Refactor milestone filters
    4 March 2024 PR Reviewer Refactor title filter
    14 March 2024 Version Release Create version for v1.1.1
    18 March 2024 PR Reviewer Release changelog automation

    Zitadel

    Date Role Description Key Achievements
    15 Mar 2024 PR Author fix: Incorrect button positioning on email verification Fixed template HTML template issue
    3 Apr 2024 PR Author fix: Update url to redirect to name change url

    Templ

    Date Role Description Key Achievements
    4 Apr 2024 PR Author docs: Create documentation and examples for Internationalization Created SSR page with simple Go server using Templ, Echo, HTMX

    FerretDB

    Date Role Description Key Achievements
    3 Apr 2024 PR Author Add local Changelog generation based on PR titles and labels Created customised Changelog that queries GitHub API, loads a Changelog template based on GitHub's own Changelog template, groups PRs by labels and renders to stdout

    Facebook Demucs

    Date Role Description Key Achievements
    13 Mar 2024 Issue Contributor Enhancement: Ensure image runs without dropping into a shell to run the demucs command

    ffmpeg-go

    Date Role Description Key Achievements
    13 Mar 2024 Issue Contributor [Enhancement] Migrate to aws-sdk-go-v2
    +

    CATcher

    Date Role Description Key Achievements
    4 July 2023 PR Reviewer Specify node version in package.json
    12 Oct 2023 PR Reviewer Fetch settings json directly without api
    14 Oct 2023 Version Release v3.5.1
    4 Mar 2024 Version Release v3.5.3
    4 Mar 2024 PR Reviewer Upgrade to Angular 13

    WATcher

    Date Role Description Key Achievements
    19 Sep 2023 PR Reviewer Improve efficiency of saving and deleting issue models
    28 Oct 2023 PR Reviewer Add Issues Dashboard access by URL
    20 Feb 2024 Issue Contributor Refactor filters into own service
    20 Feb 2024 PR Reviewer Refactor certain filters into its own service #259
    22 Feb 2024 PR Reviewer Refactor sorting
    28 Feb 2024 PR Reviewer Refactor milestone filters
    4 March 2024 PR Reviewer Refactor title filter
    14 March 2024 Version Release Create version for v1.1.1
    18 March 2024 PR Reviewer Release changelog automation

    Zitadel

    Date Role Description Key Achievements
    15 Mar 2024 PR Author fix: Incorrect button positioning on email verification Fixed template HTML template issue
    3 Apr 2024 PR Author fix: Update url to redirect to name change url

    Templ

    Date Role Description Key Achievements
    4 Apr 2024 PR Author docs: Create documentation and examples for Internationalization Created SSR page with simple Go server using Templ, Echo, HTMX

    FerretDB

    Date Role Description Key Achievements
    3 Apr 2024 PR Author Add local Changelog generation based on PR titles and labels Created customised Changelog that queries GitHub API, loads a Changelog template based on GitHub's own Changelog template, groups PRs by labels and renders to stdout

    Facebook Demucs

    Date Role Description Key Achievements
    13 Mar 2024 Issue Contributor Enhancement: Ensure image runs without dropping into a shell to run the demucs command

    ffmpeg-go

    Date Role Description Key Achievements
    13 Mar 2024 Issue Contributor [Enhancement] Migrate to aws-sdk-go-v2
    -
    +
    -

    Project: Recharts

    Recharts is a React library that provides an easy way to write & render charts in React applications.

    My Contributions

    My first contribution was updating the Storybook page of the project. Storybook is a frontend workshop that allows users to render UI components and/or pages in isolation, and is often used for interactive documentation of each component in UI libraries. Within Recharts, in addition to the standard markdown-based documentation of its components, it maintains a Storybook page that documents each component interactively, as well as providing examples of how to achieve common use-cases with the components it provides.

    In docs: add storybook example for line trailing icon in LineChart, I added an example of how to add a custom trailing icon to a line within a line chart, which was a common usecase that required a workaround.

    My Learning Record

    The observed workflow/process of this external project has a couple of extremely important differences to our internal project (RepoSense in particular), which I feel we can learn from to improve developer experience, reduce the likelihood of regressions, and speed up turnaround time.

    Usage of git hooks

    The project has set up automatic hooks (using Husky) that run before every commit and push. These hooks run the linter and automated tests, and prevent any user from pushing if the linter and/or tests fail. What this does is guarantee that by the time a pull request is open, there won't exist any lint or test errors. It is a very common occurence in RepoSense that a contributor will open a pull request, and only then be notified that their code has a bunch of lint errors (this is even more common in frontend PRs). The most likely reason for this is that the linter script in the frontend folder (npm run lint) is never run during self testing, resulting in newer contributors almost always not being aware of the presence of the lint checks until the first time they open a PR and the CI runs. We can potentially save a lot of headache by implementing automatic git hooks into RepoSense, at least for linting the frontend codebase at a minimum. This would also probably speed up turnaround/development time, since there usually is quite a lot of time wasted when reviewers have to ask contributors to fix their linting errors.

    Snapshot testing

    The project also utilizes snapshot testing in their automated tests. They use Vitest to run snapshot tests, which is a library that we're considering in RepoSense as well. Snapshot testing involves the automatic creation of snapshot files that stores the output at the time the tests were run, and compares future outputs to these refefrence values. The snapshot files are usually checked into version control, and can be examined alongside code changes. Here's an example of a snapshot file and snapshot check in the external project's codebase. This is definitely something that we can consider implementing within RepoSense, with the intention of preventing regressions.

    Importance of good first issues

    The project makes a great effort to properly tag & maintain a list of good first issues for newer contributors, which usually consist of smaller and easier issues that don't require deep knowledge of large portions of the codebase to tackle. This was crucial in enabling my experience of contributing, and we should look to paying more attention to this in RepoSense, especially for each new batch.

    +

    Project: Recharts

    Recharts is a React library that provides an easy way to write & render charts in React applications.

    My Contributions

    My first contribution was updating the Storybook page of the project. Storybook is a frontend workshop that allows users to render UI components and/or pages in isolation, and is often used for interactive documentation of each component in UI libraries. Within Recharts, in addition to the standard markdown-based documentation of its components, it maintains a Storybook page that documents each component interactively, as well as providing examples of how to achieve common use-cases with the components it provides.

    In docs: add storybook example for line trailing icon in LineChart, I added an example of how to add a custom trailing icon to a line within a line chart, which was a common usecase that required a workaround.

    My Learning Record

    The observed workflow/process of this external project has a couple of extremely important differences to our internal project (RepoSense in particular), which I feel we can learn from to improve developer experience, reduce the likelihood of regressions, and speed up turnaround time.

    Usage of git hooks

    The project has set up automatic hooks (using Husky) that run before every commit and push. These hooks run the linter and automated tests, and prevent any user from pushing if the linter and/or tests fail. What this does is guarantee that by the time a pull request is open, there won't exist any lint or test errors. It is a very common occurence in RepoSense that a contributor will open a pull request, and only then be notified that their code has a bunch of lint errors (this is even more common in frontend PRs). The most likely reason for this is that the linter script in the frontend folder (npm run lint) is never run during self testing, resulting in newer contributors almost always not being aware of the presence of the lint checks until the first time they open a PR and the CI runs. We can potentially save a lot of headache by implementing automatic git hooks into RepoSense, at least for linting the frontend codebase at a minimum. This would also probably speed up turnaround/development time, since there usually is quite a lot of time wasted when reviewers have to ask contributors to fix their linting errors.

    Snapshot testing

    The project also utilizes snapshot testing in their automated tests. They use Vitest to run snapshot tests, which is a library that we're considering in RepoSense as well. Snapshot testing involves the automatic creation of snapshot files that stores the output at the time the tests were run, and compares future outputs to these refefrence values. The snapshot files are usually checked into version control, and can be examined alongside code changes. Here's an example of a snapshot file and snapshot check in the external project's codebase. This is definitely something that we can consider implementing within RepoSense, with the intention of preventing regressions.

    Importance of good first issues

    The project makes a great effort to properly tag & maintain a list of good first issues for newer contributors, which usually consist of smaller and easier issues that don't require deep knowledge of large portions of the codebase to tackle. This was crucial in enabling my experience of contributing, and we should look to paying more attention to this in RepoSense, especially for each new batch.

    -
    Week Achievements
    Before Reviewed PR: [#1968] Incorrect dropdown box for config in UG: Customizing Report
    Before Reviewed PR: [#1899] Add graphic for commit diffstat
    Before Reviewed PR: [#1931] Update frontend integration tests for summary and zoom view
    Before Reviewed PR: [#1998] Fix hard to read text in dark labels
    Before Reviewed PR: [#2027] Fix date range bug
    Before Reviewed PR: [#1936] Migrate c-segment.vue to typescript
    Before Reviewed PR: [#1936] Migrate c-segment-collection.vue to typescript
    Before Reviewed PR: [#1936] Migrate c-resizer.vue to typescript
    Before Reviewed PR: [#1936] Migrate load-font-awesome-icons.js to typescript
    Before Reviewed PR: [#1936] Migrate c-ramp.vue to typescript
    Before Reviewed PR: [#2039] Update cypress minimum requirement to 12.15.0
    2 Reviewed PR: [#2003] Suppress Console Warning
    2 Reviewed PR: [#2004] Remove redundant Segment class
    2 Reviewed PR: [#2082] Fix typo in command in Setting Up page
    3 Reviewed PR: [#1224] Update .stylelintrc.json to check for spacing
    3 Reviewed PR: [#1980] Standardise Array Style for Frontend Files
    3 Reviewed PR: [#1958] Use syntax coloring for code blocks in docs
    4 Reviewed PR: [#2001] Extract c-authorship-file component from views/c-authorship
    5 Reviewed PR: [#467] Add Title Component
    5 Reviewed PR: [#2098] Add show more button for error messages
    5 Reviewed PR: [#2112] Move Segment CSS into segment.vue
    6 Reviewed PR: [#2134] Fix broken code highlighting in Code Panel
    7 Reviewed PR: Add explicit return type annotations to TypeScript functions
    8 Reviewed PR: [#2123] Fix zoom bug if zUser is undefined
    8 Reviewed PR: [#2109] Add search by tag functionality
    8 Filed Issue: Update lint rules to enforce explicit return type annotations
    8 Reviewed PR: [#1872] Update Node version to 18
    10 Reviewed PR: [#2109] Add search by tag functionality
    10 Reviewed PR: [#2151] Update Stylelint
    10 Reviewed PR: [#2136] Add Tests for Segment CSS
    11 Reviewed PR: [#2158] Add More Documentation for Title Component
    11 Reviewed PR: Add bin/ to .gitignore
    11 Reviewed PR: [#2148] Show tags on the ramp chart
    11 Reviewed & Amended PR: [#2002] Add explicit return type annotations to TypeScript functions in *.vue files
    12 Reviewed PR: Add more repos to cypress tests
    13 Reviewed PR: Allow CI to pass if Codecov fails
    13 Reviewed PR: [#2001] Extract c-file-type-checkboxes from Summary, Authorship and Zoom
    R Reviewed PR: [#2184] Fix Inconsistent Line Number Colours
    R Reviewed PR: [#2151] Update Typescript-related Major Dependencies
    +
    Week Achievements
    Before Reviewed PR: [#1968] Incorrect dropdown box for config in UG: Customizing Report
    Before Reviewed PR: [#1899] Add graphic for commit diffstat
    Before Reviewed PR: [#1931] Update frontend integration tests for summary and zoom view
    Before Reviewed PR: [#1998] Fix hard to read text in dark labels
    Before Reviewed PR: [#2027] Fix date range bug
    Before Reviewed PR: [#1936] Migrate c-segment.vue to typescript
    Before Reviewed PR: [#1936] Migrate c-segment-collection.vue to typescript
    Before Reviewed PR: [#1936] Migrate c-resizer.vue to typescript
    Before Reviewed PR: [#1936] Migrate load-font-awesome-icons.js to typescript
    Before Reviewed PR: [#1936] Migrate c-ramp.vue to typescript
    Before Reviewed PR: [#2039] Update cypress minimum requirement to 12.15.0
    2 Reviewed PR: [#2003] Suppress Console Warning
    2 Reviewed PR: [#2004] Remove redundant Segment class
    2 Reviewed PR: [#2082] Fix typo in command in Setting Up page
    3 Reviewed PR: [#1224] Update .stylelintrc.json to check for spacing
    3 Reviewed PR: [#1980] Standardise Array Style for Frontend Files
    3 Reviewed PR: [#1958] Use syntax coloring for code blocks in docs
    4 Reviewed PR: [#2001] Extract c-authorship-file component from views/c-authorship
    5 Reviewed PR: [#467] Add Title Component
    5 Reviewed PR: [#2098] Add show more button for error messages
    5 Reviewed PR: [#2112] Move Segment CSS into segment.vue
    6 Reviewed PR: [#2134] Fix broken code highlighting in Code Panel
    7 Reviewed PR: Add explicit return type annotations to TypeScript functions
    8 Reviewed PR: [#2123] Fix zoom bug if zUser is undefined
    8 Reviewed PR: [#2109] Add search by tag functionality
    8 Filed Issue: Update lint rules to enforce explicit return type annotations
    8 Reviewed PR: [#1872] Update Node version to 18
    10 Reviewed PR: [#2109] Add search by tag functionality
    10 Reviewed PR: [#2151] Update Stylelint
    10 Reviewed PR: [#2136] Add Tests for Segment CSS
    11 Reviewed PR: [#2158] Add More Documentation for Title Component
    11 Reviewed PR: Add bin/ to .gitignore
    11 Reviewed PR: [#2148] Show tags on the ramp chart
    11 Reviewed & Amended PR: [#2002] Add explicit return type annotations to TypeScript functions in *.vue files
    12 Reviewed PR: Add more repos to cypress tests
    13 Reviewed PR: Allow CI to pass if Codecov fails
    13 Reviewed PR: [#2001] Extract c-file-type-checkboxes from Summary, Authorship and Zoom
    R Reviewed PR: [#2184] Fix Inconsistent Line Number Colours
    R Reviewed PR: [#2151] Update Typescript-related Major Dependencies
    -
    +
    -

    Project: AncientBeast

    AncientBeast is a turn-based strategy game that has been around for 13 years, with a small but active developer base and player community. It is played directly on the browser and supports various game modes including online multiplayer. The current version being worked on is v0.5.

    My Contributions

    I have mainly worked on the improvement of visuals, adding some information on the hexagon grid upon some user action.

    My first issue was to show a 'Skip turn' icon when the user hovers over an active unit. To solve this issue (PR here), I added some assets to the assets loaded as well as an additional hint type. Then, I added the 'Skip turn' icon if the new hint type was called.

    My second issue was to show the selected ability above the hovered hexagon when targeting the ability. This issue presented a different challenge, since the hint types above are only used for units. To solve this issue (PR here and still ongoing), I had to add the unit abilities to the assets, and then add an 'ability' class to the hovered hex's overlay visual state, removing the class as necessary. Then, I checked if the 'ability' class was present, got the appropriate ability asset, and set it to be shown above the hexagon.

    I plan to take on this third issue after the PR above is merged, as it is makes use of the changes made in the above 2 PRs.

    My Learning Record

    AncientBeast makes use of Phaser as its game engine (which is also open source). Having had not much experience with game development, I found using Phaser quite challenging, and had to rely a lot on community help. I mainly learnt about how to manipulate GameObjects, such as Sprites, in Phaser as well as how they are animated and rendered.

    Another thing I learnt about was testing a game's UI using Jest. The approach AncientBeast took relied mostly on getting game objects at certain x and y positions, as well as checking what existed at certain coordinates to ensure that actions were correctly handled. Some of the difficulties faced were in trying not to have tests depend too much on implementation (e.g. of Creatures in the game), and so tests had to be a bit more general.

    More broadly, I learnt about game development in general. There is a lot more attention paid to anything that the user might try to do, including just hovering over something. I think this level of detail to user actions (and how it can be handled neatly in the codebase) is quite unique to game development.

    Observations from AncientBeast

    Unfortunately, I think AncientBeast's code is quite messy. The files are long, variables are sometimes inappropriately named (e.g. some are just named o), and basically a lot of functionality is packed together in one place, reducing readability. There are deprecated calls as well, which I think should be fixed together with the deprecation. Furthermore, there is a lack of developer documentation, which further poses a challenge to new contributors. For example, I think I would have greatly benefitted from some flows of standard actions, or generally how classes interact with each other. Better documentation might also lead to better structuring of code, which AncientBeast needs. Another point of improvement would be type safety, since I found that quite a few variables are just typed as any.

    That being said, I think AncientBeast does well in contributor management. Once someone expresses an interest in an issue, they will be assigned it and given a soft deadline, usually of 2 weeks. If they cannot complete it and/or are unresponsive, then the issue will usually be assigned to someone else, or just left without an assignee, indicating that it is available. I think we could benefit from implementing a similar approach, else our issues get inundated with "is this issue still available?" comments and waiting for people to say whether or not they are still working on it. The soft deadline also helps to push progress along.

    Another thing we could adopt is having a standardised code format. I've noticed many discrepancies in coding style throughout our codebase, and I think having a standardised coding style (with non-controversial rules) would make our code neater and in some cases more readable.

    +

    Project: AncientBeast

    AncientBeast is a turn-based strategy game that has been around for 13 years, with a small but active developer base and player community. It is played directly on the browser and supports various game modes including online multiplayer. The current version being worked on is v0.5.

    My Contributions

    I have mainly worked on the improvement of visuals, adding some information on the hexagon grid upon some user action.

    My first issue was to show a 'Skip turn' icon when the user hovers over an active unit. To solve this issue (PR here), I added some assets to the assets loaded as well as an additional hint type. Then, I added the 'Skip turn' icon if the new hint type was called.

    My second issue was to show the selected ability above the hovered hexagon when targeting the ability. This issue presented a different challenge, since the hint types above are only used for units. To solve this issue (PR here and still ongoing), I had to add the unit abilities to the assets, and then add an 'ability' class to the hovered hex's overlay visual state, removing the class as necessary. Then, I checked if the 'ability' class was present, got the appropriate ability asset, and set it to be shown above the hexagon.

    I plan to take on this third issue after the PR above is merged, as it is makes use of the changes made in the above 2 PRs.

    My Learning Record

    AncientBeast makes use of Phaser as its game engine (which is also open source). Having had not much experience with game development, I found using Phaser quite challenging, and had to rely a lot on community help. I mainly learnt about how to manipulate GameObjects, such as Sprites, in Phaser as well as how they are animated and rendered.

    Another thing I learnt about was testing a game's UI using Jest. The approach AncientBeast took relied mostly on getting game objects at certain x and y positions, as well as checking what existed at certain coordinates to ensure that actions were correctly handled. Some of the difficulties faced were in trying not to have tests depend too much on implementation (e.g. of Creatures in the game), and so tests had to be a bit more general.

    More broadly, I learnt about game development in general. There is a lot more attention paid to anything that the user might try to do, including just hovering over something. I think this level of detail to user actions (and how it can be handled neatly in the codebase) is quite unique to game development.

    Observations from AncientBeast

    Unfortunately, I think AncientBeast's code is quite messy. The files are long, variables are sometimes inappropriately named (e.g. some are just named o), and basically a lot of functionality is packed together in one place, reducing readability. There are deprecated calls as well, which I think should be fixed together with the deprecation. Furthermore, there is a lack of developer documentation, which further poses a challenge to new contributors. For example, I think I would have greatly benefitted from some flows of standard actions, or generally how classes interact with each other. Better documentation might also lead to better structuring of code, which AncientBeast needs. Another point of improvement would be type safety, since I found that quite a few variables are just typed as any.

    That being said, I think AncientBeast does well in contributor management. Once someone expresses an interest in an issue, they will be assigned it and given a soft deadline, usually of 2 weeks. If they cannot complete it and/or are unresponsive, then the issue will usually be assigned to someone else, or just left without an assignee, indicating that it is available. I think we could benefit from implementing a similar approach, else our issues get inundated with "is this issue still available?" comments and waiting for people to say whether or not they are still working on it. The soft deadline also helps to push progress along.

    Another thing we could adopt is having a standardised code format. I've noticed many discrepancies in coding style throughout our codebase, and I think having a standardised coding style (with non-controversial rules) would make our code neater and in some cases more readable.

    -
    Week Achievements
    1 Reviewed PR: [#12657] Instructor Home Page: Students dropdown buttons of the wrong colour . #12691
    2 Reviewed PR: [#12697] Create generic builder #12698
    2 Completed and Merged PR: [#12048] Migrate SearchInstructorsAction #12340
    3 Reviewed PR: [#12048] Migrate enroll students action #12715
    4 Reviewed PR: [#12048] Migrate join course action #12722
    4 Reviewed PR: [#12048] Refactor email generator #12723
    4 Merged PR: [#12048] Support for twin db for search + replace datastore test #12728
    4 Reviewed PR: [#12048] Migrate search account requests action #12726
    4 Reviewed PR: [#12693] Excess padding on edit course details component #12737
    4 Reviewed PR: [#12048] Migrate PutDataBundleDocumentsAction #12734
    5 Reviewed PR: [#12048] Migrate Session Links Recovery Action #12712
    5 Reviewed PR: [#12048] Move getTypicalEntity functions to BaseTestCase #12744
    5 Reviewed PR: [#12048] Migrate search students action #12735
    5 Reviewed PR: [#12048] Migrate StudentSearchIndexingWorkerAction #12733
    5 Reviewed PR: [#12048] Migrate create account action #12702
    5 Reviewed PR: [#12048] Add test for getUsageStatisticsForTimeRange #12748
    5 Reviewed PR: [#12588] Add tests to question constraint #12747
    5 Reviewed PR: [#12048] Update restoreDeletedFeedbackSession to save updated entity to db #12751
    6 Reviewed PR: [#12048] Migrate AccountRequestSearchIndexingWorkerAction #12757
    6 Reviewed PR: [#12048] Migrate FeedbackSessionClosedRemindersAction #12738
    6 Reviewed PR: [#12048] E2E test migration #12763
    6 Reviewed PR: [#12048] Add test cases for FeedbackSessionsDb #12752
    6 Merged PR: [#12048] Merge in current v9-migration #12771
    6 Reviewed PR: [#12048] Migrate FeedbackSessionOpeningRemindersAction #12739
    6 Reviewed PR: [#12048] Migrate student notification page e2e test #12773
    6 Merged PR: [#12048] Resolve merge conflicts #12776
    6 Created Issue: Data Migration: Fix Accessibility Tests #12782
    6 Created Issue: Data Migration: Fix L&P Tests #12783
    6 Merged PR: [#12048] Bump up postgresql version #12784
    6 Reviewed PR: [#12048] Migrate feedbacktextquestion e2e test #12775
    6 Created Issue: Data Migration: Update Developer Docs #12787
    6 Reviewed PR: [#12048] Migrate instructor courses page e2e test #12789
    6 Reviewed PR: [#12048] Create IT for GetFeedbackSessionSubmittedGiverSetAction #12778
    6 Reviewed PR: [#12048] Migrate instructor feedback edit page e2e test #12795
    6 Reviewed PR: [#12048] migrate AdminAccountsPageE2ETest #12806
    6 Reviewed PR: [#12048] migrate StudentHomePageE2ETest #12807
    6 Merged PR: [#12048] Fix failing component tests #12837
    6 - Migrate E2E data Combining all merged PRs into 1 row (only PR number) to avoid cluttering the table: #12802, #12803, #12804, #12805, #12808, #12809, #12810, #12812, #12813, #12814, #12816, #12817, #12819, #12821, #12823, #12825, #12827, #12829, #12831, #12833
    6 - Migrate E2E data Combining all reviewed PRs into 1 row (only PR number) to avoid cluttering the table: #12815, #12818, #12822, #12828, #12830, #12832, #12834
    R Reviewed PR: [#12048] Migrate AdminSearchPageE2ETest #12838
    R Reviewed PR: [#12048] fix InstructorHomePageE2ETest #12839
    R Reviewed PR: [#12783] Fix GitHub actions #12850
    R Reviewed PR: [#12048] SQL injection test for UsersDbIT #12851
    R Reviewed PR: [#12048] Add SQL injection tests in NotificationDbIT #12858
    R Reviewed PR: [#12588] Add tests for student list component #12854
    R Reviewed PR: [#12048] Fix FeedbackResultsPageE2ETest #12855
    R Reviewed PR: [#12859] create utility to test event emitters #12860
    7 Merged PR: [#12048] SQL injection test for AccountRequestsDbIT #12788
    7 Merged PR: [#12048] SQL injection test for AccountsDbIT #12800
    7 Reviewed PR: [#12588] Add unit tests for sessions table #12863
    7 Merged PR: [#12048] SQL injection test for CoursesDbIT #12801
    7 Reviewed PR: [#12048] SQL Injection Test for FeedbackResponsesDb #12848
    7 Reviewed PR: [#12048] SQL Injection tests for FeedbackResponseCommentsDbIT #12853
    7 Merged PR: [#12048] Migrate GetFeedbackSessionLogsAction #12862
    7 Reviewed PR: [#12048] Migrate StudentCourseJoinConfirmationPageE2ETest #12815
    +
    Week Achievements
    1 Reviewed PR: [#12657] Instructor Home Page: Students dropdown buttons of the wrong colour . #12691
    2 Reviewed PR: [#12697] Create generic builder #12698
    2 Completed and Merged PR: [#12048] Migrate SearchInstructorsAction #12340
    3 Reviewed PR: [#12048] Migrate enroll students action #12715
    4 Reviewed PR: [#12048] Migrate join course action #12722
    4 Reviewed PR: [#12048] Refactor email generator #12723
    4 Merged PR: [#12048] Support for twin db for search + replace datastore test #12728
    4 Reviewed PR: [#12048] Migrate search account requests action #12726
    4 Reviewed PR: [#12693] Excess padding on edit course details component #12737
    4 Reviewed PR: [#12048] Migrate PutDataBundleDocumentsAction #12734
    5 Reviewed PR: [#12048] Migrate Session Links Recovery Action #12712
    5 Reviewed PR: [#12048] Move getTypicalEntity functions to BaseTestCase #12744
    5 Reviewed PR: [#12048] Migrate search students action #12735
    5 Reviewed PR: [#12048] Migrate StudentSearchIndexingWorkerAction #12733
    5 Reviewed PR: [#12048] Migrate create account action #12702
    5 Reviewed PR: [#12048] Add test for getUsageStatisticsForTimeRange #12748
    5 Reviewed PR: [#12588] Add tests to question constraint #12747
    5 Reviewed PR: [#12048] Update restoreDeletedFeedbackSession to save updated entity to db #12751
    6 Reviewed PR: [#12048] Migrate AccountRequestSearchIndexingWorkerAction #12757
    6 Reviewed PR: [#12048] Migrate FeedbackSessionClosedRemindersAction #12738
    6 Reviewed PR: [#12048] E2E test migration #12763
    6 Reviewed PR: [#12048] Add test cases for FeedbackSessionsDb #12752
    6 Merged PR: [#12048] Merge in current v9-migration #12771
    6 Reviewed PR: [#12048] Migrate FeedbackSessionOpeningRemindersAction #12739
    6 Reviewed PR: [#12048] Migrate student notification page e2e test #12773
    6 Merged PR: [#12048] Resolve merge conflicts #12776
    6 Created Issue: Data Migration: Fix Accessibility Tests #12782
    6 Created Issue: Data Migration: Fix L&P Tests #12783
    6 Merged PR: [#12048] Bump up postgresql version #12784
    6 Reviewed PR: [#12048] Migrate feedbacktextquestion e2e test #12775
    6 Created Issue: Data Migration: Update Developer Docs #12787
    6 Reviewed PR: [#12048] Migrate instructor courses page e2e test #12789
    6 Reviewed PR: [#12048] Create IT for GetFeedbackSessionSubmittedGiverSetAction #12778
    6 Reviewed PR: [#12048] Migrate instructor feedback edit page e2e test #12795
    6 Reviewed PR: [#12048] migrate AdminAccountsPageE2ETest #12806
    6 Reviewed PR: [#12048] migrate StudentHomePageE2ETest #12807
    6 Merged PR: [#12048] Fix failing component tests #12837
    6 - Migrate E2E data Combining all merged PRs into 1 row (only PR number) to avoid cluttering the table: #12802, #12803, #12804, #12805, #12808, #12809, #12810, #12812, #12813, #12814, #12816, #12817, #12819, #12821, #12823, #12825, #12827, #12829, #12831, #12833
    6 - Migrate E2E data Combining all reviewed PRs into 1 row (only PR number) to avoid cluttering the table: #12815, #12818, #12822, #12828, #12830, #12832, #12834
    R Reviewed PR: [#12048] Migrate AdminSearchPageE2ETest #12838
    R Reviewed PR: [#12048] fix InstructorHomePageE2ETest #12839
    R Reviewed PR: [#12783] Fix GitHub actions #12850
    R Reviewed PR: [#12048] SQL injection test for UsersDbIT #12851
    R Reviewed PR: [#12048] Add SQL injection tests in NotificationDbIT #12858
    R Reviewed PR: [#12588] Add tests for student list component #12854
    R Reviewed PR: [#12048] Fix FeedbackResultsPageE2ETest #12855
    R Reviewed PR: [#12859] create utility to test event emitters #12860
    7 Merged PR: [#12048] SQL injection test for AccountRequestsDbIT #12788
    7 Merged PR: [#12048] SQL injection test for AccountsDbIT #12800
    7 Reviewed PR: [#12588] Add unit tests for sessions table #12863
    7 Merged PR: [#12048] SQL injection test for CoursesDbIT #12801
    7 Reviewed PR: [#12048] SQL Injection Test for FeedbackResponsesDb #12848
    7 Reviewed PR: [#12048] SQL Injection tests for FeedbackResponseCommentsDbIT #12853
    7 Merged PR: [#12048] Migrate GetFeedbackSessionLogsAction #12862
    7 Reviewed PR: [#12048] Migrate StudentCourseJoinConfirmationPageE2ETest #12815
    -
    +

    Hibernate

    As part of the V9 migration, I had to rewrite the logic to query from the SQL database using Hibernate ORM API instead of from Datastore.

    ORM

    TEAMMATES' back-end code follows the Object-Oriented (OO) paradigm. The code works with objects. This allows easy mapping of objects in the problem domain (e.g. app user) to objects in code (e.g. User).

    For the data to persist beyond a single session, it must be stored/persisted into a database. V9 uses PostgreSQL, a relational database management system (RDBMS) to store data.

    It is difficult to translate data from a relational model to an object models, resulting in the object-relational impedance mismatch.

    A Object/Relational Mapping (ORM) framework helps bridge the object-relational impedance mismatch, allowing us to work with data from an RDBMS in a familiar OO fashion.

    JPA

    Jakarta Persistence, formerly known as Java Persistence API (JPA) is an API for persistence and ORM. -Hibernate implements this specification.

    Criteria API

    The Criteria API allows us to make database queries using objects in code rather than using query strings. The queries can be built based on certain criteria (e.g. matching field).

    Using Join<X, Y>, we can navigate to related entities in a query, allowing us to access fields of a related class. For example, when querying a User, we can access its associated Account.

    Persistence Operations

    Hibernate maintains a persistence context, which serves as a cache of objects. This context allows for in-code objects to be synced with the data in the database.

    Using persist(), merge(), and remove(), we can create, update, and remove an object's data from the database. These methods schedule SQL statements according to the current state of the Java object.

    clear() clears the cached state and stops syncing existing Java objects with their corresponding database data. flush() synchronises the cached state with the database state. When writing integration tests, I found it helpful to clear() and flush() the persistence contexts before every test, to ensure that operations done in one test do not affect the others in unexpected ways.

    Mockito

    To isolate units in unit testing, it is useful to create mocks or stubs of other components that are used by the unit.

    Verify

    We can create a mock of a class using mock(). We can then use this mocked object as we would a normal object (e.g. calling methods). Afterwards, we can verify several things, such as whether a particular method was called with particular parameters, and how many times a particular method call was performed.

    Stub

    If a method needs to return a value when called, the return value can be stubbed before the method of the mocked object is called. The same method can be stubbed with different outputs for different parameters. Exceptions can also be stubbed in a similar way.

    Angular forms

    As part of the instructor account request form (ARF) project, I had to create an Angular form.

    Overview

    Angular has 2 form types: template-driven, and reactive.

    Template-driven forms have implicit data models which are determined by the form view itself. Template-driven forms are simpler to add, but are more complicated to test and scale.

    Reactive forms require an explicitly-defined data model that is then bound to the view. The explicit definition of the model in reactive forms makes it easier to scale and test, particularly for more complex forms.

    Accessibility

    Standard HTML attributes may still need to be set on Angular form inputs to ensure accessibility. For instance, Angular's Required validator does not set the required attribute on the element, which is used by screen readers, so we need to set it also. Another example would be setting the aria-invalid attribute when validation fails.

    To make inline validation messages accessible, use aria-describedby to make it clear which input the error is associated with.

    Validation

    Angular has some built-in validator functions that can be used to validate form inputs, and allows for custom validators to be created. Validators can be synchronous or asynchronous.

    By default, all validators run when the input values change. When there are many validators, the form may lag if validation is done this frequently. To improve performance, the form or input's updateOn option can be set to submit or blur to only run the validators on submit or blur.

    Git

    git rebase can be used to keep branch commit history readable and remove clutter from frequent merge commits.

    In particular, the --onto option allows the root to be changed, which is useful when rebasing onto a branch that has itself been modified or rebased.

    Each Git commit has a committer date and an author date. When rebasing, the committer date is altered. To prevent this, use --committer-date-is-author-date.

    +Hibernate implements this specification.

    Criteria API

    The Criteria API allows us to make database queries using objects in code rather than using query strings. The queries can be built based on certain criteria (e.g. matching field).

    Using Join<X, Y>, we can navigate to related entities in a query, allowing us to access fields of a related class. For example, when querying a User, we can access its associated Account.

    Persistence Operations

    Hibernate maintains a persistence context, which serves as a cache of objects. This context allows for in-code objects to be synced with the data in the database.

    Using persist(), merge(), and remove(), we can create, update, and remove an object's data from the database. These methods schedule SQL statements according to the current state of the Java object.

    clear() clears the cached state and stops syncing existing Java objects with their corresponding database data. flush() synchronises the cached state with the database state. When writing integration tests, I found it helpful to clear() and flush() the persistence contexts before every test, to ensure that operations done in one test do not affect the others in unexpected ways.

    Mockito

    To isolate units in unit testing, it is useful to create mocks or stubs of other components that are used by the unit.

    Verify

    We can create a mock of a class using mock(). We can then use this mocked object as we would a normal object (e.g. calling methods). Afterwards, we can verify several things, such as whether a particular method was called with particular parameters, and how many times a particular method call was performed.

    Stub

    If a method needs to return a value when called, the return value can be stubbed before the method of the mocked object is called. The same method can be stubbed with different outputs for different parameters. Exceptions can also be stubbed in a similar way.

    Angular forms

    As part of the instructor account request form (ARF) project, I had to create an Angular form.

    Overview

    Angular has 2 form types: template-driven, and reactive.

    Template-driven forms have implicit data models which are determined by the form view itself. Template-driven forms are simpler to add, but are more complicated to test and scale.

    Reactive forms require an explicitly-defined data model that is then bound to the view. The explicit definition of the model in reactive forms makes it easier to scale and test, particularly for more complex forms.

    Accessibility

    Standard HTML attributes may still need to be set on Angular form inputs to ensure accessibility. For instance, Angular's Required validator does not set the required attribute on the element, which is used by screen readers, so we need to set it also. Another example would be setting the aria-invalid attribute when validation fails.

    To make inline validation messages accessible, use aria-describedby to make it clear which input the error is associated with.

    Validation

    Angular has some built-in validator functions that can be used to validate form inputs, and allows for custom validators to be created. Validators can be synchronous or asynchronous.

    By default, all validators run when the input values change. When there are many validators, the form may lag if validation is done this frequently. To improve performance, the form or input's updateOn option can be set to submit or blur to only run the validators on submit or blur.

    Git

    git rebase can be used to keep branch commit history readable and remove clutter from frequent merge commits.

    In particular, the --onto option allows the root to be changed, which is useful when rebasing onto a branch that has itself been modified or rebased.

    Each Git commit has a committer date and an author date. When rebasing, the committer date is altered. To prevent this, use --committer-date-is-author-date.

    -
    +
    -
    Week Achievements
    3 Authored PR: Update Documentation on Markdown in Presentation Components #2399
    5 Authored PR: Fix external styles and script not hoisted #2414
    5 Raised issue: Decouple External and ExternalManager components #2423
    6 Raised issue: Footnote numbered wrongly when importing footnote with include #2430
    7 Authored PR: Debug cannot import footnote from hash #2441
    7 Reviewed PR: Add pageNav to Reader-Facing Features #2443
    7 Authored PR: Migrate layout to Typescript #2447
    8 Authored PR: Efficient validation for intra-link with hash #2465
    9 Investigate Fix to Add optional mermaid plugin for alternative diagram & chart support #2052
    10 Authored PR: Fix imported modal button position off #2487
    10 Authored PR: Fix stray space before popover and tooltip #2486
    10 Authored PR: Migrate core/index.js to Typescript #2482
    10 Authored PR: Migrate Site.test to Typescript #2481
    10 Authored PR: Migrate Markdown_it_icons.test to TypeScript #2480
    11 Discussed Issue: Vue hydration issues caused by invalid HTML make page unscrollable after clicking on modal #2025
    11 Raised issue: Refactor to improve the efficiency of markbind with parallelism #2503
    11 Raised issue: Inbuilt support for form #2504
    11 Authored PR: Rule based html validation against hydration #2493
    11 Authored PR: Support Bootstrap icons #2494
    12 Raised issue: PR2492 causes regression to Modal #2508
    13 Authored PR: Support text-icons of lists #2520
    13 Merged PR: Enable seamless panels to inherit any parent's colours #2501
    13 Merged PR: Rule based html validation against hydration #2493
    +
    Week Achievements
    3 Authored PR: Update Documentation on Markdown in Presentation Components #2399
    5 Authored PR: Fix external styles and script not hoisted #2414
    5 Raised issue: Decouple External and ExternalManager components #2423
    6 Raised issue: Footnote numbered wrongly when importing footnote with include #2430
    7 Authored PR: Debug cannot import footnote from hash #2441
    7 Reviewed PR: Add pageNav to Reader-Facing Features #2443
    7 Authored PR: Migrate layout to Typescript #2447
    8 Authored PR: Efficient validation for intra-link with hash #2465
    9 Investigate Fix to Add optional mermaid plugin for alternative diagram & chart support #2052
    10 Authored PR: Fix imported modal button position off #2487
    10 Authored PR: Fix stray space before popover and tooltip #2486
    10 Authored PR: Migrate core/index.js to Typescript #2482
    10 Authored PR: Migrate Site.test to Typescript #2481
    10 Authored PR: Migrate Markdown_it_icons.test to TypeScript #2480
    11 Discussed Issue: Vue hydration issues caused by invalid HTML make page unscrollable after clicking on modal #2025
    11 Raised issue: Refactor to improve the efficiency of markbind with parallelism #2503
    11 Raised issue: Inbuilt support for form #2504
    11 Authored PR: Rule based html validation against hydration #2493
    11 Authored PR: Support Bootstrap icons #2494
    12 Raised issue: PR2492 causes regression to Modal #2508
    13 Authored PR: Support text-icons of lists #2520
    13 Merged PR: Enable seamless panels to inherit any parent's colours #2501
    13 Merged PR: Rule based html validation against hydration #2493
    -
    +
    -
    Week Achievements
    3 Merged PR: Migrate join course action #12722
    4 Merged PR: Migrate search students action #12735
    5 Submitted PR: Add test cases for Feedback response Db
    6 Merged PR: Add locale for java datetime formatter
    6 Merged PR: Migrate Notification Banner E2E
    7 Multiple section/team structure tech design (User flow and Requirements)
    8 Multiple section/team structure tech design (Created UI wireframes)
    +
    Week Achievements
    3 Merged PR: Migrate join course action #12722
    4 Merged PR: Migrate search students action #12735
    5 Submitted PR: Add test cases for Feedback response Db
    6 Merged PR: Add locale for java datetime formatter
    6 Merged PR: Migrate Notification Banner E2E
    7 Multiple section/team structure tech design (User flow and Requirements)
    8 Multiple section/team structure tech design (Created UI wireframes)
    -
    +
    -

    Project: Foo

    Give an intro to the project here ...

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    +

    Project: Foo

    Give an intro to the project here ...

    My Contributions

    Give a description of your contributions, including links to relevant PRs

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    -
    +
    -

    Project: Refine

    Refine is a React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. It uses TypeScript. It simplifies the development process and eliminate repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including authentication, access control, routing, networking, state management, and i18n.

    My Contributions

    PR 1: docs(core): add DataProvider interface definition #5653

    Initially I thought contributing to documentation is easy, but I realize that contributing to documentation requires good understanding of the codebase structure and the workflow.

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    Refine Contributing Guide

    The PR review process in Refine is surprisingly fast. My PR is reviewed within one week.

    Observations of contributing process:

    Issues that are labelled good-first-issues often have comments that ask to be assigned the tasks. But the maintainers tend to take long to reply them. At the time they got back to potential contributers, contributers might already not be interested in it.

    Refine has a Changeset system where contributors need to label the impact on packages such as whether it requires a major version bump in any packages, as Refine uses a monorepo structure.

    Refine is well-documented and its core team is quite active in issues, which is a hugh advantage for first time contributers because their questions got answered immediately. However, their good-first-issues still have high barriers to entry because of the complicated code structure. That being said, their maintainers make a good effort to explain what might need to be done to submit a PR in the issues, making it easier to understand.

    +

    Project: Refine

    Refine is a React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. It uses TypeScript. It simplifies the development process and eliminate repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including authentication, access control, routing, networking, state management, and i18n.

    My Contributions

    PR 1: docs(core): add DataProvider interface definition #5653

    Initially I thought contributing to documentation is easy, but I realize that contributing to documentation requires good understanding of the codebase structure and the workflow.

    My Learning Record

    Give tools/technologies you learned here. Include resources you used, and a brief summary of the resource.

    Refine Contributing Guide

    The PR review process in Refine is surprisingly fast. My PR is reviewed within one week.

    Observations of contributing process:

    Issues that are labelled good-first-issues often have comments that ask to be assigned the tasks. But the maintainers tend to take long to reply them. At the time they got back to potential contributers, contributers might already not be interested in it.

    Refine has a Changeset system where contributors need to label the impact on packages such as whether it requires a major version bump in any packages, as Refine uses a monorepo structure.

    Refine is well-documented and its core team is quite active in issues, which is a hugh advantage for first time contributers because their questions got answered immediately. However, their good-first-issues still have high barriers to entry because of the complicated code structure. That being said, their maintainers make a good effort to explain what might need to be done to submit a PR in the issues, making it easier to understand.

    -

    TEAMMATES

    Overview

    • Facilitated CS3281 TEAMMATES onboarding.
    • Led initial V9 non-course data migration.
    • Facilitated E2E and unit test migration.
    • Led Instructor Account Request Form (ARF) project.
    • Contributed to V9 related documentations in maintainer guide.

    Achievements by Week

    Week Achievements
    1 Prepared set up guide for SQL database in TEAMMATES
    1 Prepared onboarding tasks and amended slides for Saturday code sprint
    2 Reviewed PR: [#12697] Create generic builder #12698
    2 Reviewed PR: [#12695] implement createSpyFromClass test-helper #12696
    2 Reviewed PR: [#12048] Migrate SearchInstructorsAction #12340
    2 Match CS3282 mentors with CS3281 students to facilitate their onboarding tasks.
    3 Reviewed PR: [#12048] Migrate GetOngoingSessionsAction for V9 #12710
    4 Reviewed PR: [#12048] Fix update and create feedbackquestion actions #12716
    5 Reviewed PR: [#12048] Migrate create account action #12702
    5 Reviewed PR: [#12048] Migrate instructor search indexing worker action #12731
    5 Reviewed PR: [#12048] Migrate PutDataBundleDocumentsAction #12734
    5 Reviewed PR: [#12048] Finish partial testcases #12742
    5 Reviewed PR: [#12048] Move getTypicalEntity functions to BaseTestCase #12744
    5 Reviewed PR: [#12048] Add test for getUsageStatisticsForTimeRange #12748
    6 Reviewed PR: [#12048] Remove typical data bundle from feedbackquestionlogic test #12750
    6 Reviewed PR: [#12048] Migrate SubmitFeedbackResponseAction #12720
    6 Reviewed PR: [#12048] Migrate FeedbackSessionOpeningSoonRemindersAction #12740
    6 Reviewed PR: [#12048] Migrate feedbackSessionPublishedRemindersAction #12741
    6 Reviewed PR: [#12048] Migrate FeedbackSessionClosingRemindersAction #12743
    6 Contributed to Data Migration Scripts: #12766, #12767
    6 Reviewed PR: [#12048] E2E test migration #12763
    6 Contributed PR: [#12048] Add verify to seed db #12767
    6 Reviewed PR: [#12048] Merge in current v9-migration #12771
    6 Reviewed PR: [#12048] Migrate student notification page e2e test #12773
    6 Reviewed PR: [#12048] Migrate feedbacktextquestion e2e test #12775
    6 Reviewed PR: [#12048] Resolve merge conflicts #12776
    6 Contributed and reviewed PR: [#12048] Fix GetSessionResponseStatsActionIT #12777
    6 Reviewed PR: [#12048] Create IT for GetFeedbackSessionSubmittedGiverSetAction #12778
    6 Reviewed PR: [#12048] Add migration script for Usage Statistics #12798
    6 Reviewed PR: Create script to verify row count for non-course entities #12824
    6 Reviewed PR: [#12048] Revert createaccountaction #12835
    6 Reviewed PR: [#12783] Fix GitHub actions #12850
    6 V9: Hosted two-day hackathon for TEAMMATEs team
    7 Project management: Started design for Account Request Form (ARF) project
    7 Reviewed PR: [#12588] Add unit tests for sessions table #12863
    7 Reviewed PR: [#12048] Migrate GetFeedbackSessionLogsAction #12862
    7 Contributed PR: [#12048] Remove Non Course Data From Datastore (for testing) #12865
    7 Reviewed PR: [#12048] add check for sql tests in TestNgXml #12870
    7 Reviewed PR: [#12048] Fix account creation #12871
    7 Reviewed PR: [#12782] Fix Axe tests, remove e2e-cross #12878
    7 Reviewed PR: [#12048] Fix get feedback sessions action #12886
    7 Reviewed PR: [#12048] Add verification migration script #12890
    7 Reviewed PR: [#12588] Add unit tests for sessions table #12863
    7 Release TEAMMATES V9.0.0-beta.0
    7-8 Optimize and fix non-course data migration scripts: Reviewed: V9 Migration: Fix verification pagination, improve logging #12874, Fix seeding for notification #12866, [#12048] V9 migration and verification script optimization #12896
    7-8 Optimize and fix non-course data migration scripts: Contributed: [#12048] Revert column type for notification title #12881, [#12048] Prepare Patch Data Migration Script for Account #12883, [#12048] Patch account and read notification migration #12884, [#12048] Revert getFilterQuery for Account Data Migration Script #12887
    8 Project Management: Started ARF feature branch: [#11878] Enable CI on account request form branch #12888
    9 Project Management: ARF team finished Milestone 1, started on milestone 2. Get CS3281 students in ARF to start to review PRs.
    9 V9-beta: Facilitated pre-release deployment on Sunday. Helped with coming up the pre-release manual testing guideline. Discussed about bugs found in the beta release.
    9 Reviewed PR: [#12588] Add unit test to rubric-question-edit-details-form #12907
    9 Reviewed PR: [#12921] Reintroduce AccountRequest search indexing #12923
    9 Reviewed PR: [#11878] Add new account request alert email for admins #12926
    9 Reviewed PR: [#12048] Add SQL configuration into build.properties and build-dev.properties #12917
    9 Reviewed PR: [#12048] Add SQL description for postgres config #12931
    10 Project Management: Led and standby V9-beta.3 release, minimizing the impact of data migration to the availability of production server. It is the first online version with duo-database. Prepared rollback scripts and created patch scripts to ensure data sanity.
    10 Authored PR: [#12048] Rerunnable Account Request Migration Script #12932
    10 Authored PR: [#12048] Add reverse data migration script for account #12962
    10 Reviewed PR: [#11878] Add GetAllPendingAccountRequests API #12927
    10 Reviewed PR: [#11878] Upgrade instructor request form UI #12929
    10 Reviewed PR: [#11878] Update Admin Home Page UI for ARF #12933
    10 Reviewed PR: [#12048] fix resetAccountAction #12934
    10 Reviewed PR: [#12588] Add unit tests to question edit answer form #12935
    10 Reviewed PR: [#12048] add delay to task queuer for indexing account request #12936
    10 Reviewed PR: [#12048] Relax read notif verification for migration verification script #12937
    10 Reviewed PR: [#11878] Add methods to get an account request by ID #12953
    10 Reviewed PR: [#11878] Get account requests by ID in storage update method #12955
    10 Reviewed PR: [#11878] Get by account request ID in SQL injection tests #12956
    10 Reviewed PR: [#11878] Foundation for getting by ID in account request endpoints #12957
    10 Reviewed PR: [#12939] Release V9.0.0-beta.1 #12958
    10 DevOps: Reviewed PR: [#12048] Config prod settings and convenience scripts for non course migration #12959
    11 Project Management: ARF finished Milestone 2, starting on milestone 3. CS3281 students are able to provide constructive feedback on PRs. Get LOGS project people onboard ARF.
    11 Authored PR: Add patch data migration script for usage stats #12970
    11 Authored PR: [#11878] Merge master into account-request-form #12972
    11 DevOps: Reviewed PR: [#12048] Update liquibase configuration #12930
    11 Reviewed PR: [#11878] Integrate instructor request form with API #12943
    11 Reviewed PR: [#11878] Update SearchAccountRequests endpoint #12950
    11 Reviewed PR: [#11878] Create Update Account Request Action #12982
    11 Reviewed PR: [#11878] Fix Account Request Update Search Indexing #12984
    12 Project Management: ARF completed BE / FE integration and moved to testing phase. (E2E test and staging test).
    12 DevOps: Reviewed PR: [#36] V9 Migration Schema Migration Tool (Liquibase) Documentation #37
    12 Reviewed PR: [#11878] Create reject account request endpoint #12985
    12 Reviewed PR: [#12995] Create documentation for unit tests #12996
    12 Reviewed PR: [#11878] Convert RejectAccountRequestAction to use transactions #13001
    12 Reviewed PR: [#11878] Add Error Message for Approving Existing Account #13004
    12 Reviewed PR: [#11878] Handle Duplicate Approved Account Requests #13009
    12 DevOps: Reviewed PR: Add note on Liquibase #38
    12 DevOps: Authored PR: [#11878] Merge master into feature #13011
    13 Project Management: ARF completed staging test and moved to bug fixing and admin testing phase. Communicated with LOG project and course migration lead to prepare for beta.5 release.
    13 DevOps: Authored: Update release procedure for schema change #39
    13 DevOps: Authored: [#12048] Migrate committers #13052
    13 DevOps: Reviewed: Update schema migration docs #40
    13 DevOps: Add documentation for v9 SQL creation and connection #35
    13 Reviewed PR: [#12048] Migrate InstructorStudentListPageE2ETest #13014
    13 Reviewed PR: [#12048] Migrate instructor home page e2e test #13016
    13 Reviewed PR: [#11878] Add Admin E2E Tests #13020
    13 Reviewed PR: [#11878] Fix Overlapping Tooltip #13026
    13 Reviewed PR: [#11878] Fix Approval Email Bug #13027
    13 Reviewed PR: [#11878] Add Toasts #13028
    13 Reviewed PR: [#11878] Remove mention of home page URL in email #13030
    13 Reviewed PR: [#11878] Fix Highlighting and Null Statuses #13031
    13 Reviewed PR: [#11878] Check if account request is not created by admin before sending email #13032
    13 Reviewed PR: [#11878] Add SQL injection tests for AccountRequestsDb #13047
    13 Reviewed PR: [#12048] Update changelog docs and changelog name #13062
    13 Authored PR: [#13060] Add beta 5 liquibase changelog and developers json #13061
    13 Authored PR: [#11878] Fix reject email content #13029
    13 Authored PR: [#11878] Revert "Enable CI on account request form branch" #13049
    13 Authored PR: [#11878] Account request form #13051
    13 Authored PR: Add note to check liquibase command run correctly #41
    13 Created Release: V9.0.0-beta.5
    13 Submitted Issue: Use AccountRequestUpdateRequest as parameter #13064
    13 Submitted Issue: Combine Admin Add Account Request Flow into Instructor Account Request Flow #13066
    +

    TEAMMATES

    Overview

    • Facilitated CS3281 TEAMMATES onboarding.
    • Led initial V9 non-course data migration.
    • Facilitated E2E and unit test migration.
    • Led Instructor Account Request Form (ARF) project.
    • Contributed to V9 related documentations in maintainer guide.

    Achievements by Week

    Week Achievements
    1 Prepared set up guide for SQL database in TEAMMATES
    1 Prepared onboarding tasks and amended slides for Saturday code sprint
    2 Reviewed PR: [#12697] Create generic builder #12698
    2 Reviewed PR: [#12695] implement createSpyFromClass test-helper #12696
    2 Reviewed PR: [#12048] Migrate SearchInstructorsAction #12340
    2 Match CS3282 mentors with CS3281 students to facilitate their onboarding tasks.
    3 Reviewed PR: [#12048] Migrate GetOngoingSessionsAction for V9 #12710
    4 Reviewed PR: [#12048] Fix update and create feedbackquestion actions #12716
    5 Reviewed PR: [#12048] Migrate create account action #12702
    5 Reviewed PR: [#12048] Migrate instructor search indexing worker action #12731
    5 Reviewed PR: [#12048] Migrate PutDataBundleDocumentsAction #12734
    5 Reviewed PR: [#12048] Finish partial testcases #12742
    5 Reviewed PR: [#12048] Move getTypicalEntity functions to BaseTestCase #12744
    5 Reviewed PR: [#12048] Add test for getUsageStatisticsForTimeRange #12748
    6 Reviewed PR: [#12048] Remove typical data bundle from feedbackquestionlogic test #12750
    6 Reviewed PR: [#12048] Migrate SubmitFeedbackResponseAction #12720
    6 Reviewed PR: [#12048] Migrate FeedbackSessionOpeningSoonRemindersAction #12740
    6 Reviewed PR: [#12048] Migrate feedbackSessionPublishedRemindersAction #12741
    6 Reviewed PR: [#12048] Migrate FeedbackSessionClosingRemindersAction #12743
    6 Contributed to Data Migration Scripts: #12766, #12767
    6 Reviewed PR: [#12048] E2E test migration #12763
    6 Contributed PR: [#12048] Add verify to seed db #12767
    6 Reviewed PR: [#12048] Merge in current v9-migration #12771
    6 Reviewed PR: [#12048] Migrate student notification page e2e test #12773
    6 Reviewed PR: [#12048] Migrate feedbacktextquestion e2e test #12775
    6 Reviewed PR: [#12048] Resolve merge conflicts #12776
    6 Contributed and reviewed PR: [#12048] Fix GetSessionResponseStatsActionIT #12777
    6 Reviewed PR: [#12048] Create IT for GetFeedbackSessionSubmittedGiverSetAction #12778
    6 Reviewed PR: [#12048] Add migration script for Usage Statistics #12798
    6 Reviewed PR: Create script to verify row count for non-course entities #12824
    6 Reviewed PR: [#12048] Revert createaccountaction #12835
    6 Reviewed PR: [#12783] Fix GitHub actions #12850
    6 V9: Hosted two-day hackathon for TEAMMATEs team
    7 Project management: Started design for Account Request Form (ARF) project
    7 Reviewed PR: [#12588] Add unit tests for sessions table #12863
    7 Reviewed PR: [#12048] Migrate GetFeedbackSessionLogsAction #12862
    7 Contributed PR: [#12048] Remove Non Course Data From Datastore (for testing) #12865
    7 Reviewed PR: [#12048] add check for sql tests in TestNgXml #12870
    7 Reviewed PR: [#12048] Fix account creation #12871
    7 Reviewed PR: [#12782] Fix Axe tests, remove e2e-cross #12878
    7 Reviewed PR: [#12048] Fix get feedback sessions action #12886
    7 Reviewed PR: [#12048] Add verification migration script #12890
    7 Reviewed PR: [#12588] Add unit tests for sessions table #12863
    7 Release TEAMMATES V9.0.0-beta.0
    7-8 Optimize and fix non-course data migration scripts: Reviewed: V9 Migration: Fix verification pagination, improve logging #12874, Fix seeding for notification #12866, [#12048] V9 migration and verification script optimization #12896
    7-8 Optimize and fix non-course data migration scripts: Contributed: [#12048] Revert column type for notification title #12881, [#12048] Prepare Patch Data Migration Script for Account #12883, [#12048] Patch account and read notification migration #12884, [#12048] Revert getFilterQuery for Account Data Migration Script #12887
    8 Project Management: Started ARF feature branch: [#11878] Enable CI on account request form branch #12888
    9 Project Management: ARF team finished Milestone 1, started on milestone 2. Get CS3281 students in ARF to start to review PRs.
    9 V9-beta: Facilitated pre-release deployment on Sunday. Helped with coming up the pre-release manual testing guideline. Discussed about bugs found in the beta release.
    9 Reviewed PR: [#12588] Add unit test to rubric-question-edit-details-form #12907
    9 Reviewed PR: [#12921] Reintroduce AccountRequest search indexing #12923
    9 Reviewed PR: [#11878] Add new account request alert email for admins #12926
    9 Reviewed PR: [#12048] Add SQL configuration into build.properties and build-dev.properties #12917
    9 Reviewed PR: [#12048] Add SQL description for postgres config #12931
    10 Project Management: Led and standby V9-beta.3 release, minimizing the impact of data migration to the availability of production server. It is the first online version with duo-database. Prepared rollback scripts and created patch scripts to ensure data sanity.
    10 Authored PR: [#12048] Rerunnable Account Request Migration Script #12932
    10 Authored PR: [#12048] Add reverse data migration script for account #12962
    10 Reviewed PR: [#11878] Add GetAllPendingAccountRequests API #12927
    10 Reviewed PR: [#11878] Upgrade instructor request form UI #12929
    10 Reviewed PR: [#11878] Update Admin Home Page UI for ARF #12933
    10 Reviewed PR: [#12048] fix resetAccountAction #12934
    10 Reviewed PR: [#12588] Add unit tests to question edit answer form #12935
    10 Reviewed PR: [#12048] add delay to task queuer for indexing account request #12936
    10 Reviewed PR: [#12048] Relax read notif verification for migration verification script #12937
    10 Reviewed PR: [#11878] Add methods to get an account request by ID #12953
    10 Reviewed PR: [#11878] Get account requests by ID in storage update method #12955
    10 Reviewed PR: [#11878] Get by account request ID in SQL injection tests #12956
    10 Reviewed PR: [#11878] Foundation for getting by ID in account request endpoints #12957
    10 Reviewed PR: [#12939] Release V9.0.0-beta.1 #12958
    10 DevOps: Reviewed PR: [#12048] Config prod settings and convenience scripts for non course migration #12959
    11 Project Management: ARF finished Milestone 2, starting on milestone 3. CS3281 students are able to provide constructive feedback on PRs. Get LOGS project people onboard ARF.
    11 Authored PR: Add patch data migration script for usage stats #12970
    11 Authored PR: [#11878] Merge master into account-request-form #12972
    11 DevOps: Reviewed PR: [#12048] Update liquibase configuration #12930
    11 Reviewed PR: [#11878] Integrate instructor request form with API #12943
    11 Reviewed PR: [#11878] Update SearchAccountRequests endpoint #12950
    11 Reviewed PR: [#11878] Create Update Account Request Action #12982
    11 Reviewed PR: [#11878] Fix Account Request Update Search Indexing #12984
    12 Project Management: ARF completed BE / FE integration and moved to testing phase. (E2E test and staging test).
    12 DevOps: Reviewed PR: [#36] V9 Migration Schema Migration Tool (Liquibase) Documentation #37
    12 Reviewed PR: [#11878] Create reject account request endpoint #12985
    12 Reviewed PR: [#12995] Create documentation for unit tests #12996
    12 Reviewed PR: [#11878] Convert RejectAccountRequestAction to use transactions #13001
    12 Reviewed PR: [#11878] Add Error Message for Approving Existing Account #13004
    12 Reviewed PR: [#11878] Handle Duplicate Approved Account Requests #13009
    12 DevOps: Reviewed PR: Add note on Liquibase #38
    12 DevOps: Authored PR: [#11878] Merge master into feature #13011
    13 Project Management: ARF completed staging test and moved to bug fixing and admin testing phase. Communicated with LOG project and course migration lead to prepare for beta.5 release.
    13 DevOps: Authored: Update release procedure for schema change #39
    13 DevOps: Authored: [#12048] Migrate committers #13052
    13 DevOps: Reviewed: Update schema migration docs #40
    13 DevOps: Add documentation for v9 SQL creation and connection #35
    13 Reviewed PR: [#12048] Migrate InstructorStudentListPageE2ETest #13014
    13 Reviewed PR: [#12048] Migrate instructor home page e2e test #13016
    13 Reviewed PR: [#11878] Add Admin E2E Tests #13020
    13 Reviewed PR: [#11878] Fix Overlapping Tooltip #13026
    13 Reviewed PR: [#11878] Fix Approval Email Bug #13027
    13 Reviewed PR: [#11878] Add Toasts #13028
    13 Reviewed PR: [#11878] Remove mention of home page URL in email #13030
    13 Reviewed PR: [#11878] Fix Highlighting and Null Statuses #13031
    13 Reviewed PR: [#11878] Check if account request is not created by admin before sending email #13032
    13 Reviewed PR: [#11878] Add SQL injection tests for AccountRequestsDb #13047
    13 Reviewed PR: [#12048] Update changelog docs and changelog name #13062
    13 Authored PR: [#13060] Add beta 5 liquibase changelog and developers json #13061
    13 Authored PR: [#11878] Fix reject email content #13029
    13 Authored PR: [#11878] Revert "Enable CI on account request form branch" #13049
    13 Authored PR: [#11878] Account request form #13051
    13 Authored PR: Add note to check liquibase command run correctly #41
    13 Created Release: V9.0.0-beta.5
    13 Submitted Issue: Use AccountRequestUpdateRequest as parameter #13064
    13 Submitted Issue: Combine Admin Add Account Request Flow into Instructor Account Request Flow #13066