Command line usage: Used in the various frameworks (Ember, Rails, SCSS) and in the installation of Discourse
Framework usage: Completed guides/tutorials for the various frameworks to understand how they work
Reading code/understanding a code base: Looked through the Discourse code and watched video on the Discourse stack to understand the technical capabilities.
Tools:
EmberJS
SASS/SCSS
Ruby/Rails
Discourse Development
WSL2 (Ubuntu)
Soft Skills
Google Search: Used searches to look up problems that occurred during installation of Discourse, and to look for guides to Ember.
Reading Guides: Learned to patiently look through and follow guides for installation and understanding the Ember/SASS frameworks.
Scheduling: Figured out how to schedule my calendar with meeting times for the internship.
Achievement Highlights:
Installed and set up Discourse for Development
Set up WSL2 for command line use with Ember, SCSS, Discourse and Ruby on Rails
Read through guides for the Ember and SCSS frameworks, started reading on developing with Discourse
Tasks done:
Installed EmberJS and completed the Ember guide to better understand the framework.
Installed personal Discourse instance on my computer. Difficulties: using WSL2 for the installation of Ruby and Discourse, WSL2 requires extra steps to be taken and the installation required navigation through Ubuntu and accessing Windows files, which was somewhat confusing. Solved the problem by looking at Google and Stack Overflow
Began looking at the Discourse development guides
Read through SCSS guide to understand the framework and created a personal project to work on styling with the framework
Goals:
Work more in-depth with Discourse in development, starting to create the theme project and looking at the development guides.
Use GitHub to keep track of and manage the code that has been written.
Framework usage: Used HTML/JavaScript and Sass to add customization to a personal Discourse theme
Git/Github Repository: Used Discourse Theme CLI with VS Code for local code editing and pushed changes onto a Github repository with the help of the Git and the command line
Developer Tools: Used Chrome developer tools to review the different class and ID attributes of various HTML elements in Discourse
Tools:
HTML/JS
SASS/SCSS
Git/Github
VS Code
Chrome developer tools
Discourse Theme CLI
WSL2 (Ubuntu)
Soft Skills
Usage of Product: Became familiar with Discourse for by using and exploring its different facets to improve development.
Reading Guides: Followed guides on theme development, developer tools, and style-guide routes for Discourse.
Asking for help: Contacted lead Keegan for help troubleshooting the Discourse installation.
Achievement Highlights:
Used Discourse Theme CLI to create and locally edit an original Discourse theme.
Uploaded work to Github to allow remote usage of the Discourse theme by the general public.
Used SCSS on a project successfully without having prior knowledge of the framework.
Tasks done:
Created theme in the Discourse Admin UI, used HTML, JavaScript and Sass to add modifications to a custom Discourse theme. Difficulties: Unfamiliar with Sass but used the guide to understand the framework
Used Discourse Theme CLI to locally edit the theme in VS Code
Uploaded the theme to Github using the WSL2 command line and Git. Difficulties: Git confusion with creating a repository, and uploading. Solved by consulting the Git guide and Github’s guides to uploading to a repository.
Read guide to using developer tools
Used the developer tools to examine Discourse
Goals:
Add animations and fancy CSS to the themes to create a nicer user interface.
Work on theme components along with theme
Practice using the developer tools to better understand the tools.
Implemented Handlebars templates to add a marquee banner Widget to the header of the personal theme.
Called the discourse plugin API within the custom theme Widget to send a friendly message to the session user.
Used YAML markup language to add settings and add localized message to the Widgets added at the Handlebars outlets.
SVG icons/Theme Modifiers: Added the icons to the message with the Font Awesome library
Tools:
HTML
JavaScript
Handlebars
YAML
VS Code
Discourse Theme CLI
WSL2 (Ubuntu)
Soft Skills
Reading Guides: Followed guides on advanced theme development, Discourse plugin API, adding settings, widgets, localized strings and Handlebars templates to Discourse theme.
Team Coordination: As a part of the side project, I learned to communicate with other team members and hold meetings in order to make decisions on our side project. Distributed work to each team member, and decided upon the changes we will be adding with our Discourse theme.
Compromise: Appealed to each team member’s own personal desires while also leading towards completion of the project, which meant a lot of compromise to get work done while keeping people interested and adding the changes they wanted.
Achievement Highlights:
Spearheaded efforts to collaborate on a theme side project with a team of 4 members, coordinating the ideas and dividing the work amongst members to successfully complete the task.
Created pull requests to combine work with other team members and released work on Github to allow usage of the side project Discourse theme by the general public.
Implemented several previously unknown web technologies like Handlebars, SCSS, and YAML together to create dynamic and visually pleasing Discourse themes.
Tasks done:
Read through all the guides for the different web technologies and options available to customize Discourse themes. Difficulties: Lots of reading, hard to stay focused, but the issue was resolved by a little bit of perseverance and by breaking down work into small chunks.
Created custom templates to insert HTML in Discourse plugin outlet locations, used the API to add a friendly message with the getCurrentUser() function near the topic button. Difficulties: Using adding the proper output to the HTML object being modified by the plugin API. Solved the problem by reading slowly and thoroughly through the documentation.
Added SVG icons to the message with the Font Awesome library and theme modifiers.
Added a setting for the marquee banner custom HTML theme addition to control whether the banner begins moving or whether the user initiations the animation.
Created a localized string for the custom template to provide a different version of the message for English audiences.
Started pull request to upload work to the collaborative Github repository, and implemented the changes done by the group to the side project.
Goals:
Figure out how to add local assets to the marquee banner instead of grabbing images off the internet through a script.
Continue to follow through with the internship, learning to develop plugins which add more dynamic capabilities to Discourse.
Practice using YAML and markup language to add more settings and capabilities for customization to the users.
Play around with making custom widgets and implementing the virtual dom.
Ember/Ruby routing: Added routes to Discourse application utilizing a Ruby backend, and used the Ember routes to enable interactivity between frontend and backend.
Discourse Plugin CLI: Used command line interface to create a template and files for custom Discourse plugin.
Discourse Plugin Outlets: used handlebars templating, Ember and HTML/CSS to create custom widgets that interact with custom plugin.
Tools:
Ember
Handlebars
YAML
VS Code
Ruby/Rails
Discourse Plugin CLI
WSL2 (Ubuntu)
Soft Skills
Active learning: Read through guides for Ruby on Rails and Ember JS to better understand plugins and syntax.
Planning: Planned the functionality and objectives to be completed for the final project.
Achievement Highlights:
Completed the first two modules of the Discourse plugin development guide, following along with the tutorial.
Brainstormed objectives to be completed for the final project plugin.
Tasks done:
Read through and completed the first two parts of the Discourse Plugin Development tutorial.
Completed the notebook tutorial to get a better understanding of the working parts of a fully functional Discourse plugin.
Utilized Discourse plugin generator to create a test plugin, and created a small plugin with its own route, that displays the user’s current time spent on the page. Difficulties: Creating a controller that interacts with Ruby and Ember to get the proper output to the view. Solved by reading through Rails/Ember guides, and learning the methodology both frameworks use to accomplish this task.
Goals:
Complete rest of the tutorial parts to get a better understanding of the capabilities of plugin development for Discourse.
Look through the Github repositories of other projects, and understand how they function.
YAML Templating: Used the YAML templating language to create settings for the plugin, created the translations for the settings and implemented the settings with JavaScript.
Git/Github usage: Set up a public repository and used a local repository with Git to push changes to Github.
Ember/Ruby: Used Ruby/Ember routing to create an admin page interface for the plugin, added Handlebars templates to display the information about the user’s log-in time.
Tools:
Git/Github
Ember
Handlebars
YAML
VS Code
Ruby/Rails
WSL2 (Ubuntu)
Soft Skills
Problem Solving: Finding solutions to connecting the plugin settings to the functionality of the plugin brought difficulties in transferring the variables provided by settings, but was solved through perseverance.
Guide Reading: Read through multiple guides to figure out the workings of the Discourse plugin and development.
Achievement Highlights:
Created a Github repository to keep track of the development and publish plugin.
Added an admin interface and settings to the plugin using Ruby/Ember and YAML.
Tasks done:
Utilized YAML to add settings and their translations to the custom plugin.
Set up a Github repository to keep track of the changes made to the plugin, and used git to locally push changes to the repository.
Created an admin interface using Ember/Rails which brings settings to the plugin.
Read the guides for creating a Discourse plugin, from parts 3-7, and completed the tutorials.
Goals:
Complete work on the group project for plugin development.
Coordinate group effort and divide tasks for the project.