Git commands: cloning a GitHub repo, creating a branch, staging, committing, and pushing changes
Tools
Ubuntu
Discourse
Git, GitHub
VS Code
Youtube
Soft Skills
Self-learning, self-discipline
Improved problem-solving, debugging skills
Practiced efficient and effective note-taking
Team communication through Zoom meetings, Discord, Trello
2. Achievement Highlights
Installed Discourse on my local machine
Practiced coding in Ruby
Familiarized myself with Git commands
3. Statement of Tasks Completed
Installed Discourse on my local machine and successfully connected to the discourse app
Discovered that installation issues could usually be resolved through a quick online search
Completed practice Ruby assignments in the STEM-Away repository
Since I already understand object-oriented concepts, it was easy to familiarize myself with a new language, Ruby
Pushed files to my own branch on GitHub
At first, I was modifying the Ruby files on the master branch. Since I realized my mistake before staging my changes, I was able to undo everything by running git checkout .
Used various pluginAPI methods: getCurrentUser(), replaceIcon(), modifyClass(), reopenWidget(), decorateWidget(), createWidget(), changeWidgetSetting(), addNavigationBarItem(), addUserMenuGlyph(), decorateCooked(), onToolbarCreate()
Added settings to my Discourse theme: integer, float, string, bool, list, enum
Learned how to access those settings in JS/CSS/Handlebars
Challenges: This week was especially difficult since there were many new, advanced topics. Specifically, I had difficulty understanding and using localizable strings, theme modifiers, and SVG icons.
Module 5: Discourse Plugin Development 1. Overview
Technical Area
File structure for plugins
Ruby, Javascript
Adding site settings to plugins
Adding localizable strings to plugins
Defining client-side routes, server-side routes
Discourse Handlebars templates
Connecting to plugin outlets to add Handlebars
Tools
Discourse admin
Rails plugin generator
VS Code
GitHub
Soft Skills
Debugging
Reverse engineering
2. Achievement Highlights
Created a notebook plugin that stores notes
Learned how to define client-side route and server-side route
Learned how to use localizable strings
3. Statement of Tasks Completed
Followed the guide “How to Create a Discourse Plugin” to create a notebook plugin
Learned how to add site settings
Learned how to add localizable strings
Created client-side route and server-side route for the path /notebook
Challenges: Some code blocks in the guide were not entirely accurate or were deprecated, so I had trouble following the guide. I resolved this issue by reverse engineering the final code on GitHub and identifying the discrepancies between the guide and the GitHub code.
Completed “Beginner’s Guide to Creating Discourse Plugins Part 1: Creating a Basic Plugin”
Added an alert when Discourse loads
Completed “Beginner’s Guide to Creating Discourse Plugins Part 2: Plugin Outlets”
Final Project Week 1: Personal Notes Plugin 1. Overview
Technical Area
HTML/CSS/JavaScript
pluginAPI methods
Leveraging plugin outlets
Front end development
Tools
Discourse
VS Code
Git/GitHub
Trello for project management
Soft Skills
Problem solving, reverse engineering, debugging
Applied learning
Active participation
Leadership, project management
Team communication
Performing under time constraints
2. Achievement Highlights
This was my first time coding in HTML/CSS/JavaScript, but I was still able to quickly produce deliverables to present to my team leads!
Assisted with leading/managing front end development
Reviewed team members’ code to provide feedback and find bugs
3. Statement of Tasks Completed
Started front end development for the final project
Worked with technical lead to create note popup
Individually worked on the quick access notes dropdown
Proposed additional tasks and ideas for the front end team
Came up with quick access notes dropdown idea
Reviewed team members’ code and helped with debugging
Identified routing error with plugin skeleton code and assisted project lead with resolving the issue
Cleaned up technical lead’s code and fixed note button bug
Reviewed team member’s implementation for the note popup
Found header bug as a result of the additional decorateWidget() method
Text box disappears when scrolling through a post
Challenges: Since this was my first time coding in HTML/CSS/JavaScript, there was a learning curve when starting the project. The tasks were more time consuming than I expected, but eventually I was able to understand the code better and even review my peers’ code!
4. Goals for the Upcoming Week
Finalize the project as much as possible!
Continue maintaining team communication and leading team effort
Final Project Week 2: Personal Notes Plugin 1. Overview
Technical Area
Front-end development
HTML/CSS/JavaScript
Widgets
pluginAPI methods
Tools
Discourse
Discourse Meta
DOM inspector, CSS editor
VS Code
Git/GitHub
Soft Skills
Applied learning
Reverse engineering, debugging
Active participation
Team communication
Finishing tasks within a deadline
Creativity, brainstorming ideas
2. Achievement Highlights
Implemented Discourse’s menu panel style for the quick access notes dropdown
Proposed additional features: quick access notes dropdown, background color options, additional text formatting options
Made design revisions to team members’ work
3. Statement of Tasks Completed
Implemented Discourse’s menu panel style for the quick access notes dropdown
Altered code from a Discourse Meta post, inserted custom HTML
Added additional text formatting options: font style, font size
Reviewed every commit and ensured that I understood the changes and how it was implemented
Made design revisions to team members’ work
Changed the background color options design from circles to tabs in order to fit the square-shaped sticky note interface better
Displayed the text formatting options in separate rows instead of in the same row
Moved the sticky note button to the top left corner to allow for resizing in both the vertical and horizontal directions
Listened to team members’ feedback and changed designs accordingly
Reduced background color options to five
Removed transparent background option
Proposed a show/hide button for the text formatting options to keep the interface simple
Challenges: I still have difficulty understanding how widgets work.
Final Statement: I am extremely proud of all my accomplishments! I went from a complete beginner to HTML/CSS/JavaScript to being able to make meaningful contributions to this project. As a beginner, I faced many learning curves, but I was able to overcome them with persistent effort and a desire to learn.