From 11406d76e51cc40c860e945633820a1fa4b6c6d1 Mon Sep 17 00:00:00 2001 From: Charisma Kausar Date: Mon, 29 Apr 2024 07:35:05 +0800 Subject: [PATCH] Update knowledge for ckcherry23 --- students/ckcherry23/knowledge.md | 84 +++++++++++++++++++++++++++++ students/ckcherry23/observations.md | 35 ++++++------ students/ckcherry23/progress.md | 9 ++++ 3 files changed, 111 insertions(+), 17 deletions(-) diff --git a/students/ckcherry23/knowledge.md b/students/ckcherry23/knowledge.md index cebc9ea9e..964a2cca9 100644 --- a/students/ckcherry23/knowledge.md +++ b/students/ckcherry23/knowledge.md @@ -1,3 +1,87 @@ +## CS3282 + +### 1. Expertise Area: Frontend Engineering + +In CS3282, I've chosen frontend engineering as my "expertise" area. Given its breadth, I've narrowed my focus to the most popular frontend technology stack today: Next.js, TypeScript, React, and Tailwind CSS. The majority of my recent projects, as showcased in [my project archive](https://ckcherry23.github.io/archive/), have been built using these technologies. As a UI/UX enthusiast, I am also interested in the usability and accessibility aspects of frontend development. + +#### 1.1 Open Source Contributions + +My involvement as a RepoSense mentor primarily centers around the frontend in Vue.js and TypeScript. I've been actively reviewing frontend PRs, mentoring new contributors, and working on process improvements as a team. + +Additionally, I've chosen to contribute to an external project that uses TypeScript and React: [date-fns](https://date-fns.org/). Having utilized date-fns in my own projects extensively, I've found it to be an efficient solution for handling dates in JavaScript. My contributions to date-fns include fixing issues and reviewing PRs. I've detailed my insights from working with date-fns [here](/students/ckcherry23/observations.md). + +#### 1.2 Lightning Talks + +I also delivered one of my lightning talks on [Tailwind CSS](https://tailwindcss.com/), to evangelize it to the class. I have been using Tailwind CSS for a while now, and I find it to be a very efficient way to style web applications. In fact, one of my projects, [artisan.land](https://www.artisan.land/), depends on the atomic classes of Tailwind to [dynamically style components](https://www.artisan.land/components) with user-selected options and generate React code for them. Such a project would not have been possible without the ease of use and flexibility of Tailwind CSS. + +Driven by my interest in frontend technologies, I took up the role of Frontend Lead in Google Developer Student Clubs NUS. Leading a team of frontend developers, I initiated the development of a website for an NGO using Next.js, TypeScript, and Tailwind CSS. This experience provided valuable insights into frontend development best practices while allowing me to mentor junior developers. Additionally, I implemented quality-of-life enhancements such as setting up ESLint, Prettier, and refining the CI/CD pipeline. Subsequently, I delivered a lightning talk on improving DevEx, which would benefit NUS-OSS mentors as well. In fact, we've begun slowly integrating these practices into RepoSense, adopting tools like [Vite](https://github.com/reposense/RepoSense/pull/2178) and [Vitest](https://github.com/reposense/RepoSense/pull/2102#issuecomment-1950123596) for faster development and testing, and enhancing CI runs for [improved accuracy](https://github.com/reposense/RepoSense/pull/2189). + +#### 1.3 Q/A Community + +I tried contributing to Stack Overflow by providing answers to questions related to frontend technologies such as Next.js, React, and component libraries. Some of my answers can be found [here](https://stackoverflow.com/users/15226661/charisma-kausar?tab=answers&sort=activity). + +Engaging with the Stack Overflow community was a good way to reinforce my understanding of these technologies while enabling me to assist others effectively. This experience has helped me improve my communication skills and ability to explain complex concepts in a simple manner. Yet, looking back, I realize that contributing more frequently is difficult as it may seem forced and inauthentic. I believe that contributing organically when I encounter a question that I can answer is more beneficial in the long run. + +### 2. Tools and Technologies + +#### 2.1 Vue.js + +**2.1.1 Single-File Components (SFCs)** + +I have been working with Vue.js for a while now, and I find Single-File Components (SFCs) to be a very efficient way to organize Vue components. SFCs allow you to define the template, script, and styles of a component within a single file, making it easier to maintain the component. + +When componentizing our frontend, one of the proposed approches was to split the template, script, and styles into separate files. While this approach does break down the huge file into smaller chunks, it creates multiple files that are highly interrelated instead of multiple loosely coupled components with good separation of concerns. + +We decided it was better if we do our modularization by continuing to follow the Single-File Component pattern of Vue. The separation of concerns in SFCs also helps in keeping the codebase clean and reduces context switching when working on a single component, enhancing overall code quality. + +#### 2.2 YAML + +For our title component, we decided to migrate from a JSON format `report-config.json` to a YAML format `report-config.yaml`. This choice was because of YAML's superior readability and compact syntax for defining configuratons compared to JSON or XML. + +**2.2.1 YAML Frontmatter** + +YAML Frontmatter is a YAML block that is placed at the beginning of a file and is used to store metadata about the file. This metadata can be accessed to provide additional information or functionality based on the metadata. + +I explored the usage of [frontmatter for a custom navbar](https://github.com/reposense/RepoSense/pull/2102#issuecomment-1919095515) for the RepoSense report. We proposed integrating YAML frontmatter into the user-provided markdown files. The frontmatter obtained (for example, a list of links and the header color) using a tool such as [gray-matter](https://github.com/jonschlinkert/gray-matter) could be injected into a template header component as props, dynamically rendering the RepoSense HTML report. + +#### 2.3 Quality Assurance + +**2.3.1 Frontend Testing Methodologies** + +In addressing a bug within the RepoSense report where all charts were erroneously grouped under one team, we realised that our end-to-end tests mainly focus on testing features rather than data representation. To avoid this in the future, we decided we needed any of the following: + +* Data-driven testing: Add tests to check if the actual JSON data is being represented in the expected manner. +* Snapshot testing: Implement snapshot testing to ensure there are no visual regressions. + +We added more repositories to the Cypress testing data to ensure that the tests cover a wider range of scenarios. This will help us in identifying more bugs and ensuring that the report is accurate and reliable in the future. + +**2.3.2 Frontend Security Best Practices** + +When working with mentees for the [Add title component PR](https://github.com/reposense/RepoSense/pull/2102), I realized that we need to be more cautious about the security of our frontend code. So I researched about the library we were using for markdown parsing, `markdown-init`, which had no security vulnerabilities and was also being used extensively by MarkBind. I also learned about the importance of sanitizing user input to prevent XSS attacks. However, since we were using a self-defined title component, we did not need to sanitize the input as we assumed good intentions from the user on their own report. + +### 3. Project Management + +#### 3.1 Guiding New Contributors + +Guiding contributors through a project was definitely a new challenge as a mentor. Each mentee had different working styles and areas of expertise, so I had to adapt my guidance to suit their needs. + +At the beginning, my focus was on recommending issues that were suitable for the mentees' skill levels and expertise. Then, it was about communicating project needs and expectations clearly. + +The biggest challenge was pushing the mentees to partake in more managerial responsibilities within the project. I had to learn how to provide clear instructions and set expectations for the mentees to take on more substantial roles. + +#### 3.2 Reviewing PRs + +While exploring topics for my lightning talk, I came across a [YouTube video](https://www.youtube.com/watch?v=Y9sp8gONv9M) where a Staff Software Engineer discusses the best practices for reviewing PRs. I also found another [article](https://mtlynch.io/human-code-reviews-2/#aim-to-bring-the-code-up-a-letter-grade-or-two) by an ex-Google engineer that talks about reviewing PRs like a human. These resources gave me a good understanding of how to review PRs constructively. + +Sometimes we got some pretty big PRs, and it was difficult to review them in one go. I learned how to break down the review into smaller chunks, focusing on specific aspects of the code, and providing detailed feedback for improvement at various levels of abstraction. The [GitHub Pull Requests](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github) extension for VS Code was also very helpful in reviewing PRs. + +We should also be generous with code examples for clear, uncontroversial improvements. This can help the contributor understand how to make the necessary changes much faster without having to research it themselves. + +Lastly, I learned that a good rule to follow is to aim to bring the code up by a letter grade or two. This means that the reviewer should aim to improve the code quality by a small amount with each review, rather than trying to make it perfect in one go. + +--- + +## CS3281 ### 1. Tools and Technologies The RepoSense frontend is built with Vue.js and Pug, with most of the JavaScript files being migrated to TypeScript over the semester. Node.js is used to manage the packages, while static code analysis is performed with ESLint. diff --git a/students/ckcherry23/observations.md b/students/ckcherry23/observations.md index b0c42d73c..baffd9d26 100644 --- a/students/ckcherry23/observations.md +++ b/students/ckcherry23/observations.md @@ -20,17 +20,18 @@ He suggested that I work on the documentation website, [date-fns.org](https://gi Next, as per the project's current needs shared by the maintainer, I focussed on improving Duration support in date-fns. I submitted a [proposal to improve Duration support](https://gist.github.com/ckcherry23/e7641d65122259c699b2e1437f33d4c9) to the project maintainer and got started with reviewing issues and PRs related to Duration support. Since one of the PR authors was unresponsive, I took over the PR, fixed the issues, added extensive tests and updated the documentation in [PR#3768](https://github.com/date-fns/date-fns/pull/3768) for `parseISODuration`. -| Date | Contribution | Links | -|------------|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| 08 Jan 24 | Authored PR #1 | [Add alias formatDate for format function #3653](https://github.com/date-fns/date-fns/pull/3653) | -| 11 Jan 24 | Authored PR #2 | [Add aliases to functions in typedoc #216](https://github.com/date-fns/date-fns.org/pull/216) | -| 11 Jan 24 | Created issue | [Blockstyle quotes not readable in light mode #217](https://github.com/date-fns/date-fns.org/issues/217) | -| Week 2 | Reviewed PR | [Add alias isExisting for isExists #3673](https://github.com/date-fns/date-fns/pull/3673) | + +| Date | Contribution | Links | +|------------|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| 08 Jan 24 | Authored PR #1 | [Add alias formatDate for format function #3653](https://github.com/date-fns/date-fns/pull/3653) | +| 11 Jan 24 | Authored PR #2 | [Add aliases to functions in typedoc #216](https://github.com/date-fns/date-fns.org/pull/216) | +| 11 Jan 24 | Created issue | [Blockstyle quotes not readable in light mode #217](https://github.com/date-fns/date-fns.org/issues/217) | +| Week 2 | Reviewed PR | [Add alias isExisting for isExists #3673](https://github.com/date-fns/date-fns/pull/3673) | | Week 2 | Submitted proposal | [Proposal to improve Duration support](https://gist.github.com/ckcherry23/e7641d65122259c699b2e1437f33d4c9), [Discussion comment](https://github.com/orgs/date-fns/discussions/3666#discussioncomment-8341732) | -| Week 3 | Contributed to discussion | [Formatting duration options #3693](https://github.com/orgs/date-fns/discussions/3693) | -| Week 3-5 | Reviewed PR | [feat: add parseISODuration #3151](https://github.com/date-fns/date-fns/pull/3151) | -| Week 6-8 | Suggested improvements | ExtendedDuration and [Temporal proposal](https://tc39.es/proposal-temporal/docs/duration.html) | -| Week 12-13 | Authored PR #3 | [Add parseISODuration function #3768](https://github.com/date-fns/date-fns/pull/3768) | +| Week 3 | Contributed to discussion | [Formatting duration options #3693](https://github.com/orgs/date-fns/discussions/3693) | +| Week 3-5 | Reviewed PR | [feat: add parseISODuration #3151](https://github.com/date-fns/date-fns/pull/3151) | +| Week 6-8 | Suggested improvements | ExtendedDuration and [Temporal proposal](https://tc39.es/proposal-temporal/docs/duration.html) | +| Week 12-13 | Authored PR #3 | [Add parseISODuration function #3768](https://github.com/date-fns/date-fns/pull/3768) | #### Other Projects @@ -54,7 +55,7 @@ Then I tried my hand at [checkstyle](https://github.com/checkstyle/checkstyle), **1.1 Learning why date-fns over others** -Working with a popular npm package, I learned extensively about the library's perks from the documentation itself. I discovered that date-fns utilizes tree-shaking to reduce the size of the final bundle and delved into the [webpack documentation](https://webpack.js.org/guides/tree-shaking/) to understand its functionality. Tree shaking involves dead code elimination to ensure production-ready code with minimal file size, allowing compatibility with tools like webpack, Rollup, etc. +Working with a popular npm package, I learned extensively about the library's perks from the documentation itself. I discovered that date-fns utilizes tree-shaking to reduce the size of the final bundle and read the [webpack documentation](https://webpack.js.org/guides/tree-shaking/) to understand its functionality. Tree shaking involves dead code elimination to ensure production-ready code with minimal file size, allowing compatibility with tools like webpack, Rollup, etc. The project also employs a function-based API where each function is a pure function, enabling better immutability and testability. Moreover, it allows for importing only the necessary functions, enhancing performance. Additionally, the project offers a functional-programming submodule facilitating improved function composition, which allowed revisiting concepts taught in CS1101S. It also leverages native dates for better performance and compatibility with other libraries. @@ -77,25 +78,25 @@ Additionally, considering date-fns aims to improve Duration support, I explored date-fns has a [Contributing Guide](https://date-fns.org/docs/Contributing) detailing how to contribute to the project. -**2.1 No more "Move fast and break things"** +**2.1 Good: No more "Move fast and break things"** -Having worked in fast-paced environments before, I generally embrace the "move fast and break things" mentality (maybe a bit too much :3 -> RepoSense issues [#2164](https://github.com/reposense/RepoSense/issues/2164) and [#2184](https://github.com/reposense/RepoSense/issues/2184)). However, you do not have that "freedom" when working on an npm package with 20 million weekly downloads. date-fns has a very high bar for code quality. This was a good learning experience for me as even a simple function such as `parseISODuration` required extensive discussions regarding design decisions, for example, whether undefined values should be preserved, what rules should be followed for parsing, etc., and all these should be done based on the standard proposals, the competitior libraries' features, and the community's feedback. +Having worked in fast-paced environments before, I generally embrace the "move fast and break things" mentality (maybe a bit too much :3 -> RepoSense issues [#2164](https://github.com/reposense/RepoSense/issues/2164) and [#2184](https://github.com/reposense/RepoSense/issues/2184)). However, you do not have that "freedom" when working on an npm package with 20 million weekly downloads. This was a good learning experience for me as even a simple function such as `parseISODuration` required extensive discussions regarding design decisions, for example, whether undefined values should be preserved, what rules should be followed for parsing, etc., and all these should be done based on the standard proposals, the competitior libraries' features, and the community's feedback. -**2.2 Making a difference** +**2.2 Good: Making a difference** While many other OSS projects I contributed to involved fixing bugs or adding small features, date-fns was more about making a difference. Since date-fns is a modular library with pure functions, contributors get to work on actual features that can be used by millions of developers worldwide. This was a great motivation for me to contribute to date-fns. -**2.3 Targeted mentorship** +**2.3 Good: Targeted mentorship** I reached out to the maintainers of date-fns and they were very helpful in guiding me on how to contribute to the project. This helped me work on the project for a longer period of time and make more meaningful contributions based on the project's needs instead of randomly picking issues to work on. -**2.4 Difficult community management** +**2.4 To improve: Community management** date-fns has a large community and a lot of issues are opened every day. However, the 3-5 maintainers of the project do not have the bandwidth to manage all the issues. This makes it difficult for new contributors to find issues to work on. Moreover, repetitive issues are opened multiple times, leading to duplicated efforts in PRs. This is something that can be improved in date-fns. Also, since there are too many PRs opened, the maintainers have decided to focus on those PRs that contribute towards the project's immediate needs, which is a good strategy to ensure that the project is moving in the right direction. Sometimes, contributors are not responsive to maintainers' feedback and this leads to abandoned PRs. Instead of starting from scratch, I learned how to handle abandoned PRs by taking over an abandoned PR and getting it merged. -**2.5 Documentation contrasts** +**2.5 To improve: Documentation contrasts** While date-fns has a very comprehensive documentation website, the documentation website repository did not have any contribution guidelines, because it was mainly handled by the core team. This made it difficult for me to understand how to contribute to the custom documentation website generator, and I had to reach out to the maintainers for guidance. This is understandable as the documentation site generator does not expect much community contributions, but is still something that can be improved in date-fns. diff --git a/students/ckcherry23/progress.md b/students/ckcherry23/progress.md index d3e1769d1..50eb290a9 100644 --- a/students/ckcherry23/progress.md +++ b/students/ckcherry23/progress.md @@ -103,3 +103,12 @@ During the semester, I was actively involved in mentoring the CS3281 students an | 13 - Recess | Reviewed PR | [Add optimise timeline feature #2180](https://github.com/reposense/RepoSense/pull/2180) | | Recess | Created issue | [Surge preview deployments for many of our latest PRs are not working #2194](https://github.com/reposense/RepoSense/issues/2194) | | Recess | Reviewed PR | [[#2148] Show tags on the ramp chart #2163](https://github.com/reposense/RepoSense/pull/2163) | + +### Other Internal Project Contributions + +I also contributed to some of the internal projects by reviewing PRs and creating issues. + +| Week | Contribution | Links | Notes | +|------|----------------------------|--------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| +| 5 | Created issue in TEAMMATES | [Autosave and restore progress if user navigates away #12749](https://github.com/TEAMMATES/teammates/issues/12749) | Requested for periodic autosave and default restore progress feature to be implemented in TEAMMATES. | +| 8 | Reviewed PR in MarkBind | [MarkBind Template for Student Portfolio #2398](https://github.com/MarkBind/markbind/pull/2398) | Reviewed portfolio design and requested for more documentation. Got RepoSense widget to be included in the portfolio to showcase code projects. | \ No newline at end of file