St3593 - Full Stack (Level 2) Pathway

Module 1: Getting Started
1. Overview

  • Technical Area
    • Linux commands
    • Discourse
    • Basic Ruby syntax, classes, objects, functions
    • 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 .

4. Goals for the Upcoming Week

  • Complete the Ember, SCSS guides
  • Look through the Discourse codebase

Module 2: Dev Environment Setup
1. Overview

  • Technical Area
    • Structure of Discourse’s codebase
    • Ember (JavaScript web framework) features: Ember CLI, components, routing
    • Sass syntaxes (Sass, SCSS): variables, nesting, mixins, inheritance, etc
  • Tools
    • Ubuntu, Windows PowerShell
    • GitHub
    • Ember CLI
    • Sass (CSS preprocessor)
  • Soft Skills
    • Reading documentation
    • Independent studying
    • Accelerated learning
    • Continued team communication through daily scrum meetings

2. Achievement Highlights

  • Familiarized myself with Ember.js
  • Learned Sass syntax and its purpose
  • Learned basic HTML/CSS/JavaScript syntax

3. Statement of Tasks Completed

  • Looked through the Discourse codebase and watched the video on the Discourse Tech Stack
  • Read some of the Ember guides
    • Built a simple web app and deployed it to Netlify
    • Challenges: I had to familiarize myself with HTML, JavaScript before starting the guide.
  • Read the Sass guide to understand how Sass adds additional functionality to CSS
    • Challenges: I had to familiarize myself with CSS before starting the guide.
  • Learned basic syntax of HTML/CSS/JavaScript through Codecademy

4. Goals for the Upcoming Week

  • Start developing Discourse themes and complete the readings for theme development
  • Research project ideas for themes and plugins
  • Refer back to the Ember guides to understand the concepts better
  • Continue learning HTML/CSS/JavaScript

Module 3: Developing Discourse Themes
1. Overview

  • Technical Area
    • Introduction to developing/designing themes
    • Previewing themes
    • Theme files and folders
  • Tools
    • Discourse admin interface
    • Discourse Theme CLI: new, watch, download functions
    • Theme Creator (alternative to Discourse installation)
    • Git/GitHub
    • VS Code
    • Browser developer tools: DOM inspector, CSS editor, JavaScript debugger, JavaScript console
  • Soft Skills
    • Flexibility with various tools
    • Communicating ideas to a team
    • Active participation

2. Achievement Highlights

  • Created a basic theme
  • Explored various tools for theme development: Discourse admin interface, Discourse Theme CLI, Theme Creator, DOM inspector, styleguide route
  • Shared project ideas for a theme component and plugin with team

3. Statement of Tasks Completed

  • Explored Discourse admin interface: theme editor interface, setting themes as default active/user-selectable, creating/importing new themes/theme components, creating/modifying color schemes, changing theme settings, previewing themes
  • Followed the “Developer’s Guide to Discourse Themes” to create my first local and remote theme
    • Used HTML/CSS to add a banner below the Discourse header
    • Used JavaScript to create an alert
  • Completed the “Designer’s Guide to Discourse Themes”
    • modified Discourse’s color scheme, header, navigation container (category/tag filter dropdowns, navigation links, buttons)
  • Explored existing themes, theme components, and plugins on meta.discourse.org

4. Goals for the Upcoming Week

  • Complete the “Advanced Discourse Themes” section of the developer’s guide
  • Learn Handlebars syntax
  • Learn how widgets work in Discourse
  • Adding a setting to my theme
  • Add a localizable string to my theme
  • Use theme modifiers to add Font Awesome icon dependencies

Module 4: Advanced Discourse Themes
1. Overview

  • Technical Area
    • Handlebars templates
    • Virtual DOM, widgets
    • pluginAPI methods
    • Adding settings
    • YAML language
    • Adding localizable strings for custom languages and translations
    • Theme modifiers: way for themes to manipulate core server-side behavior
    • Font Awesome 5
    • SVG icons
  • Tools
    • Discourse
    • Discourse Theme CLI: watch function for automatic updates
    • VS Code
    • Git/GitHub
  • Soft Skills
    • Independent learning
    • Studying/following various guides
    • Time management

2. Achievement Highlights

  • Practiced using various pluginAPI methods
  • Practiced modifying/overriding Handlebars templates
  • Practiced mounting widgets

3. Statement of Tasks Completed

  • Learned how to modify Handlebars templates
    • Inserted HTML at plugin-outlets
  • Learned how to override Handlebars templates
    • Added sidebar next to the latest topic list
  • Learned how to mount widgets
    • Added site logo to footer
  • 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.

4. Goals for the Upcoming Week

  • Continue learning advanced Discourse theme topics
  • Read more about Discourse core variables
  • Start team project: light theme

Side Project: Creating a Light Theme
1. Overview

  • Technical Area
    • Creating a theme
    • Color scheme, color scheme variables
    • SCSS, SCSS separation
  • Tools
    • Discourse
    • Discourse Theme CLI
    • Theme Creator
    • VS Code
    • Git/GitHub
    • Browser developer tools: DOM inspector, CSS editor
  • Soft Skills
    • Applied learning
    • Quick/effective team communication
    • Team collaboration
    • Time management
    • Problem solving, debugging

2. Achievement Highlights

  • Collaborated with my team to create a light theme in the span of a week
  • Created my very first custom theme!
  • Effectively communicated with team throughout the process

3. Statement of Tasks Completed

  • Created a light theme with a purple/magenta/light blue color scheme
    • Styled menu panels, category/tag dropdown, buttons
    • Rounded corners, added shadows to text/frames/icons, added hover effects
  • Proposed various color scheme ideas with visual examples to facilitate discussion
  • Attended team meetings to maintain communication and provide progress updates
  • Overlooked team members’ work and provided feedback
  • Familiarized myself with Git: branches, pushing/pulling changes
  • Challenges:
    • Checking for unexpected bugs was meticulous and time consuming
    • It was more time consuming than expected for the team to collectively settle on a color scheme
    • Had to quickly resolve Discourse build problems

4. Goals for the Upcoming Week

  • Return my focus back to the modules:
    • Continue learning advanced Discourse theme development
    • Start learning Discourse plugin development
  • Start thinking about the final project

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”
    • Learned how to find and connect to plugin outlets

4. Goals for the Upcoming Week

  • Begin the final project
  • Continue learning plugin development: site settings, git setup, admin interfaces, publishing plugins

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.