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

...

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

...

GitHub Copilot

GitHub Copilot is an AI-powered coding assistant built by GitHub and OpenAI that helps programmers write code faster and with less effort.

Learning points:

• Give examples of existing code with similar functionality, to avoid hallucination and ensure the code quality is consistent across the codebase
• Properly describe the expected usage of the product which is not always obvious when implementing libraries and dependencies. This can affect the implementation method chosen.
• Ask for many possible solutions (ie. planning) and evaluate them yourself before deciding on one and guiding the AI tool to implement it.

Resources:

• GitHub website
• Agentic AI prompting: https://www.ranthebuilder.cloud/post/agentic-ai-prompting-best-practices-for-smarter-vibe-coding

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

...

GitHub Copilot

GitHub Copilot is a code completion and programming AI-assistant that assist users in their IDE. It uses LLMs can assist with code generation, debugging or refactoring through either real-time suggestions or language prompts

Key Learning Points:

• Context is King! Providing all relevant files immediately leads to faster, more accurate fixes. The AI performs best when it "sees" the full scope of the bug.

• Don't stop at the first working fix. Specifically, we can try asking the AI to improve code quality and clarity after the initial generation helps eliminate "AI-style" clutter and technical debt.

• Initial AI suggestions often prioritize the simplest fix. It still requires manually prompts & investigation for edge cases to ensure the solution is robust.

• We should treat AI as a collaborator, and not an automated system. Reviewing proposed changes and selectively implementing only what fits the project context prevents the introduction of unnecessary or incorrect logic.

Agent Skills

Agent Skills are folders of instructions, scripts, and resources that agents can discover and use to do things more accurately and efficiently. These skills are designed to be automatically founded and used by AI agents, providing them user-specific context they can load on demand hence extending their capabilities based on the task they’re working on.

Key Learning Points:

• Moving instructions from a giant system prompt into a SKILL.md file allows for "progressive disclosure," where the agent only loads the knowledge it needs for the specific task at hand.

• Provide a strict directory layout (Instructions in SKILL.md, automation in scripts/, and context in references/) to ensure the agent can reliably find and execute tools.

• Include specific trigger phrases & tags, as well as clear and well defined steps. This prevents the agent from guessing, thus ensuring it follows the exact logic required for the most effective application.

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

...

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

...

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 Knowledge

RepoSense

Vue.js

resources Used:

• Vue mastery: complete 11 lessons to create a basic shopping cart frontend.
• Vue.js documentation

.zoom__day(v-for="day in selectedCommits", :key="day.date")

the :key attribute is a special directive used by Vue.js (which is being rendered by Pug) to uniquely identify each element in a looped list. It tells Vue which elements have changed, been added, or removed, allowing it to accurately update the DOM.

In Vue, custom events emitted with emit() from a child component can be listened to in the parent component using the @event-name syntax.

But they are only received by the immediate parent component.

Pug

Pug's parser is misinterpreting where the attribute value ends when you split it across lines. e.g.

:class="{warn: user.name === '-',
    'active-text': ...}"

The parser gets confused by the line break and the quote positioning. It's a quirk of how Pug tokenizes/parses attributes across multiple lines.

In pug, indentation defines parent-child relationships:

tooltip
  a.message-title        // child of tooltip
    .within-border       // child of a
  span.tooltip-text      // child of tooltip (sibling of a)

How does tooltip component know about tooltip-text? In style.css, we have:

  &:hover {
    .tooltip-text {
      opacity: 1;
      visibility: visible;
    }
  }

HTML

ESLint

Need cd into the frontend folder to run eslint commands.

cd frontend
npm run lint -- --fix

DevOps

GitHub Action workflow

Can set condition to only runs if:

• Push to master branch, OR
• Scheduled trigger (if enabled)

Does NOT run on pull requests (prevents deploying unreviewed changes)

deploy:
    needs: build
    if: (github.event_name == 'push' && github.ref == 'refs/heads/master') || github.event_name == 'schedule'

Summary of current github workflow:

• Push to master → Build report → Upload artifacts → Deploy to gh-pages → Live at GitHub Pages
• Pull request → Build report → Upload artifacts → (stop, don't deploy)

Gradle

Resources:

• DPE

Hot Reloading

Can make changes to frontend code and see the updates in the browser without needing to manually refresh the page.

AI in Development

Gemini integration for Java

resources Used:

• Gemini workshop for Java developers
• Offical Documentation: Gemini in Java with Vertex AI and LangChain4j
• Google Cloud

Copilot

In-line chat: use ctrl + shift + I to open copilot chat window.

Claude

Claude has this Claude Code, which can load folders from your local machine to its interface for code understanding and generation.

It also has a CLI tool.

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

...

Github Copilot

Learning points:

• Provide as much context as possible, using extensions (@), commands (/), and file context (#)
• Keep each chat focused on a relatively small objective
• Agent mode is powerful for complex tasks, and also good as an investigative tool compared to ask mode with findings given as a rich document
• Treat is as a pair programmer, explain and ask things as you would to a human partner
• It is easy to get lost changing codes since Copilot makes it much easier to debug and try things out quickly that it is worth the time to ask yourself if any changes should be part of another PR

Resources used:

• Github website
• Gemini and ChatGPT for additional help List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

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

...

GitHub Copilot

• Effective for understanding a large codebase using #codebase, helping me to identify relevant directories and files for E2E test migrations

• Useful for generating repetitive or boilerplate files (e.g. SQL-specific E2E test JSON) when similar examples already exist

• Less effective at identifying logical errors, often fixing symptoms (modifying test data) instead of root causes (updating test logic)

• Struggles with browser-based E2E tests due to lack of awareness of actual UI state and rendered content

• May ignore constraints in prompts and go off-tangent, requiring careful supervision and iteration

• Different modes can serve different purposes: Ask/Plan for exploration, Edit/Agent for code generation

• Undo functionality is useful for restarting cleanly.

• Output quality can be inconsistent even with similar prompts, requiring manual verification (especially for strict JSON formats).

Data Migration

• Data migration can be approached either top-down (front to back) or bottom-up (back to front), depending on the situation.

  • Example dependency chain: DeleteInstructorActionTest → InstructorLogic → Logic → InstructorsDb.

  • Top-down approach (front to back): Starts from endpoints of dependency

    • Changes are usually non-breaking initially.
    • Risk of missing dependent components if the call chain is not fully traced.

  • Bottom-up approach (back to front): Starts from database or low-level components.

    • Changes are often breaking during migration and require iterative fixes.
    • Immediately reveals all affected files and dependencies.

  • The choice of approach should be made based on the scope, risk, and complexity of the migration task.

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

...

General Knowledge

Testing

• Additional logic in test case may introduce issues:
  • More logic to maintain & might diverge.
  • Depending on the frontend may cause tests to pass if the frontend code is buggy (false-positive).
  • Depending on the local test case external logic may mismatch with what the front-end expects.
• Be very particular about test cases (we want them to fail to spot bugs).
• Hard-coded test inputs allow full control of the desired outcome.
• UUID has a different format than long.
• The server depends on the docker status, so I need to run docker first.

Tools

Github Copilot

• Copilot is able to automatically scan similar files and all scripts related to them before writing the json file I need.
• Non-agentic AI like ChatGPT on browsers can be more useful in catching mistakes in scripts and less prone to hallucinations compared to agentic AI that have to deal with a large context frame.

VSCode

• To run the debugger on E2E tests (add –debug-jvm to the gradle command).
• To print statements when running tests using gradle (add –info to the gradle command).
• Possible to run “Convert Indentation to Spaces” in the command line in VSCode.
• Possible to run “Trim Trailing Whitespaces” in the command line in VSCode.