Informal Report

Summary of Research

To learn the knowledge necessary to build the tech demo, I researched and learned from the following sources:

• freeCodeCamp HTML/CSS Tutorial: I initially used this site to learn the basics of HTML and CSS.
• freeCodeCamp JavaScript Tutorial: I used this website to learn the basics of JavaScript.
• MDN HTML Documentation: I read this documentation for almost every HTML element and attribute used except the extremely common ones.
• MDN CSS Documentation: I read this documentation for almost every CSS selector and property used except the extremely common ones.
• MDN JavaScript Documentation: I read this documentation for almost every JavaScript method, object, class, and expression used except the extremely common ones.
• MDN Web API Documentation: I read this for all the web APIs that I have utilized, such as DOM API, Canvas API, FileReader API, Web Storage API, Fetch API, Mutation Observer API, Web Components API, and URL API.
• JS Deliver: I used this to interact with external APIs, including PrismJS and Pyodide.
• JSDoc: I learned how to write JavaScript function documentation with this resource.
• Microsoft Learn: I used this to learn more about the basics of GitHub and Git.
• GitHub Skills: I utilized this to learn more about how GitHub works.
• GitHub Documentation: I used this to learn more about how GitHub repos work, including commits, branches, pull requests, merges, actions (for CI), pages (for CD), forks, clones, security, GPG keys....
• Render Documentation: I used this to help me deploy this repository onto Render with the link https://website-projects-2u95.onrender.com. This uses the continuous deployment (CD) strategy to automatically deploy new commits to the main branch of the GitHub repository.
• Contrast Checker: I used this to ensure that the vast majority of content on my site follows WCAG AAA contrast guidelines.
• BFS Algorithm: I used this to see how the BFS algorithm works.

Structure of Tech Demo

The tech demo involves sample-bfs code for both undirected graphs and rectangular grids with walls in between the cells:

• sample-bfs.py: This is the main file demonstrating the BFS algorithm.
  • Lines 1-20: Comments, importing modules for the usage of deques, and a sample adjacency list representing undirected graphs and walls with frozensets since a wall blocks motion from one grid to another, and vice versa.
  • Lines 21-39: Converts a grid with walls to an adjacency list by iterating through all cells and finding all reachable neighbours.
  • Lines 40-66: The actual standard BFS algorithm on the adjacency list. It uses rare Python objects like sets to check whether a node was already explored in O(1) time and deques to remove and return the first element of a linear collection. The main steps of the algorithm are as follows:
    1. Remove and return the first list of the queue.
    2. If the last node of the list was explored before, start a new loop (i.e., equivalent of the keyword "continue").
    3. For each neighbour of the last node, add it to the last node to form a new list that gets added to the queue.
    4. If the neighbour is the target node, return the new path immediately.
    5. Add the last node to the explored set.
    6. Repeat steps 1 to 5 until the queue is empty. If so, return None to indicate that it is impossible to reach the target node.
  • Lines 67-84: Verifies the validity of the algorithms by testing them on sample graphs and grids.

The tech demo also involves the image extractor that takes the user's uploaded image and displays it onto the web page with the additional steps of extracting byte arrays and reconstructing the image from them.

• index.html: This is the landing page for the image extractor that utilizes many other scripts and stylesheets to present a functioning page.
  • Lines 1-17: Comments and standard HTML template for all .html pages in this repository to link global scripts and stylesheets.
  • Lines 18-26: Contains a title, image input, button to extract image (initially disabled to switch on later with script.js), and a div element for future image output.
• styles.css: This styles the web page.
  • Lines 1-12: Styling of the main container to prevent elements from stretching to awkward levels and center everything. It also provides styling for the error message with a red colour and slightly bolded font.
  • Lines 13-25: Styling of the image input container. Several properties have been overridden compared to the global-styles.css to create shorter vertical padding, semi-transparent background colour, etc.
  • Lines 26-45: Uses pseudo-elements to select the "Choose File" button. Since the global CSS does not account for this kind of pseudo-buttons, I have to apply a few properties to make the button look modern, including a lighter background due to the two semi-transparent backgrounds combining in opacity, smooth transitions, transformations when hovered over or active, and many others.
  • Lines 46-58: Styles the image output placeholder as a centred flexbox with semi-transparent grey background, standard round border styling, top margin, and padding all around.
  • Lines 59-64: Styling for images inside the image output placeholder, notably the restricted width or height and the depth effect created by the box-shadow property.
  • Lines 65-72: Adds custom fadeIn animation when an image first appears.
  • Lines 73-76: Responsive design that shrinks the top/down margin slightly when the viewport width is low.
• script.js: This script handles the interactions with the user with several event listeners.
  • Lines 1-15: Enables the "Extract Image" button only when the uploaded file type is an image; otherwise, displays an error message.
  • Lines 16-30: Obtains image bytearray through FileReader and Canvas API.
  • Lines 31-55: Reconstructs canvas and then the original image from the byte array, and adds a small message commenting on how many raw bytes there are.
  • Lines 56-58: Note the combination of event listeners monitoring "load" and then data reading. This is to only start the next steps after the loading is completely done.
  • Lines 59-63: Catches a fun edge case that should not happen at all due to how the button is controlled in lines 5-14.

Structure of Supplementary Code

Files involved in this section are technically not part of the tech demo. However, since they affect the tech demo web pages, I have provided basic overviews of these scripts and styles. Note that these links below are permalinks at the end of April 13th, 2026, so the code may not represent the code in the current repository.

The tech demo uses the components folder below that contains JavaScript code used on every page of the website to reduce code redundancy:

• developer-mode.js: Defines the developer-mode HTML element. When the developer mode is enabled, users can directly view the source code of the web page below its normal content with highlighting satisfying WCAG AAA standards.
• project-files-map.js: This contains a JavaScript object (very similar to Python dictionaries) that maps the web page location to the files that need to be displayed in developer mode.
• global-header.js: This is the HTML element present on all web pages because it shows the global heading for users to navigate around the site. It also utilizes the developer-mode.js file to conditionally show developer mode depending on user choice.
• theme-loader.js: To prevent flashing when switching between pages, this script is present at the very beginning of all HTML elements to apply the correct light or dark mode depending on user choice.

The tech demo also utilizes the global-styles.css to group common global stylings together to reduce code redundancy and ensure a consistent experience.

Specifically, the sample-bfs page uses the following code to display the Python code and output on the web page:

• index.html: This is the actual landing page of the sample-bfs site. It brings everything together by linking many other elements, stylesheets, and scripts.
• styles.css: This styles the web page to make it look more modern and aesthetically pleasing.
• script.js: This dynamically loads the Python code and output onto the website.

Summary of Research

To learn the knowledge necessary to build the tech demo, I researched and learned from the following sources:

• freeCodeCamp HTML/CSS Tutorial: To learn the basics of HTML, CSS, and JavaScript.
• MDN Web Docs: To read for almost every HTML/CSS/JavaScript used except the extremely common ones and all the web APIs that I have utilized, such as DOM API, Canvas API, FileReader API, Web Storage API, Fetch API, Mutation Observer API, Web Components API, and URL API.
• JS Deliver: To interact with external APIs, including PrismJS and Pyodide.
• JSDoc: To learn how to write JavaScript function documentation with this resource.
• Microsoft Learn: To learn more about the basics of GitHub and Git.
• GitHub Skills: To learn more about how GitHub works.
• GitHub Documentation: To learn more about how GitHub repos work, including commits, branches, pull requests, merges, actions (for CI), pages (for CD), forks, clones, security, GPG keys....
• Render Documentation: To help deploy this repository onto Render with the link https://website-projects-2u95.onrender.com. This uses the continuous deployment (CD) strategy to automatically deploy new commits to the main branch of the GitHub repository.
• Contrast Checker: To ensure that the vast majority of content on my site follows WCAG AAA contrast guidelines.
• BFS Algorithm: To see how the BFS algorithm works.

Structure of Tech Demo

The tech demo involves sample-bfs code for both undirected graphs and rectangular grids with walls in between the cells:

• sample-bfs.py: Main BFS algorithm demonstration.
  • Lines 1-20: Imports and graph representation using frozensets for walls.
  • Lines 21-39: Converts grid systems into adjacency lists by looking at each cell and checking its neighbors.
  • Lines 40-66: Standard BFS implementation using sets for O(1) lookups and deques for O(1) popleft. The key steps:
    1. Dequeue the next path. The node of interest is the last one of the path.
    2. Skip if node was already explored.
    3. Append neighbors to create new paths and enqueue them.
    4. Return path if target is reached.
    5. Mark node as explored.
    6. Repeat until empty; return None if unreachable.
  • Lines 67-84: Test cases for algorithm verification.

The image extractor processes uploads by converting images to byte arrays and reconstructing them for display.

• index.html: Landing page utilizing global stylesheets and scripts.
  • Lines 1-17: Standard HTML boilerplate and asset linking.
  • Lines 18-26: Title, input, extraction button, and output container.
• styles.css: Page-specific styling.
  • Lines 1-12: Main container center alignment and error message formatting.
  • Lines 13-25: Overrides for input container padding and backgrounds.
  • Lines 26-45: Custom pseudo-element styling for modern "Choose File" buttons with transitions.
  • Lines 46-58: Centered flexbox placeholder for image results.
  • Lines 59-64: Image size constraints and box-shadow depth effects.
  • Lines 65-72: Custom fadeIn animation.
  • Lines 73-76: Responsive margin adjustments for low viewport width.
• script.js: Interaction logic with users.
  • Lines 1-15: Toggle button and errors based on image file type validation.
  • Lines 16-30: Byte extraction via FileReader and Canvas API.
  • Lines 31-55: Image reconstruction from the byte array and byte count display.
  • Lines 56-58: Event sequence management for async loading with "load" event listeners and data reading at the end
  • Lines 59-63: Fun edge case error handling.