JiangfengLi_SW_21 - Full Stack (Level 2) Pathway

Module 1

1. An Overview of Things Learned

Technical Area:

  • Learned how to edit Discourse Theme and preview locally.
  • Learned basic command of the shell command line.
  • Learned how to use git and GitHub.
  • Learned how to write ruby program basically.

Tools:

  • VS Code.
  • STEM-Away forum
  • Git
  • GitHub
  • Discourse
  • YouTube
  • Missing Semester from MIT

Soft Skills:

  • Learned how to practices the new languages and tools.
  • Attending the kick-off meeting and team meeting.
  • Introduce myself to the teammate of FS June-1 team

2. Achievement Highlights

  • Successfully learned the basic of the command line, GitHub, and ruby
  • Attended kick-off meetings and team meetings to get more information about the internship.
  • Introduced myself to teammates and get to know other teammates.

3. Goals for the upcoming week

  1. Look through the Discourse codebase and take note of where things are, how things generally work, and what languages are used.
  2. Complete the Ember guides to understand how Ember JS works
  3. Start the SCSS guide

4. Challenges faced

  • When I learned how to use the command line from “The Missing Semester of Your CS Education”, I was really confused about which lectures to take since there are 11 1-hour courses. After posting my question on the discord, the team lead recommended I take at least the first lecture. Therefore, I tried my best to finished the first three lectures.
1 Like

Module 2

1. An Overview of Things Learned

Technical Area:

  • Read the Ember guides briefly to part 1 of the Tutorial.

  • Learned basic of the SCSS.

Tools:

  • VS Code.

  • STEM-Away forum

  • Discourse

  • Ember Guides

  • SCSS Guides

Soft Skills:

  • Learned how to practices the new frameworks and tools.

  • Attending the kick-off meeting and team meeting.

2. Achievement Highlights

  • Successfully learned the basic introduction of how to create templates, component and automation test in Ember.js

  • Successfully learned the basic variables and preprocessing concept of SCSS.

3. Goals for the upcoming week

  1. Create a simple theme in the Admin Settings UI and add some custom CSS, HTML and/or JavaScript to the theme.

  2. Use the DOM inspector in the dev tools to inspect Discourse’s UI. Identify what classes and styles are applied to certain elements

  3. Update your theme to apply changes based on inspecting components in the /styleguide route using the DOM inspector

4. Challenges faced

  • When I learned how to use Ember.js, I was really confused about which chapters to start since there are lots of contents and chapters in the guide. After talking this to mentor Keegan on the weekly Kick-Off Meeting, he recommended I skim at least the introduction and core concepts of Ember.js. Therefore, I tried my best to finish the “getting started” and the first part of “Tutorial”.

Module 3

1. An Overview of Things Learned

Technical Area:

  • Installed and used Discourse Theme CLI.

  • Created a simple theme by Discourse Theme CLI.

  • Use the theme creator to test the theme publicly.

  • Learned how to use browser’s developer console.

  • Learned How to leverage the DOM inspector to supercharge your theme development process.

  • Briefly review what available components there are in the Style-guide Route.

Tools:

  • Discourse

  • Discourse Theme CLI

  • Discourse forum

  • MDN Web Docs

  • STEM-Away forum

  • Style-guide Route

  • VS Code.

  • WSL

Soft Skills:

  • Learned how to create new themes and components in a fast-paced environment.

  • Attended the kick-off meeting and team meeting.

  • Reported any issues while coding.

2. Achievement Highlights

  • Created a simple theme in the Admin Settings UI and add some custom CSS, HTML and/or JavaScript to the theme.

  • Read about how to use the browser’s developer tools.

  • Setup the Discourse Theme CLI and created a new remote Discourse theme.

  • Shared GitHub account.

  • Used the DOM inspector in the dev tools to inspect Discourse’s UI. Identify what classes and styles are applied to certain elements.

3. Goals for the upcoming week

  1. Update theme to make use of the plugin API

  2. Identify plugin outlet locations in Discourse and add custom code in your theme below or above a plugin outlet location.

  3. Read about and try to implement the Virtual DOM

  4. Add a setting to your Discourse theme

  5. Add a localizable string to the theme

  6. Use theme modifiers to add Font Awesome icon dependencies

4. Challenges faced

  • When I tried to create a new remote Discourse theme by Discourse Theme CLI, changed my color schemes according to “Changing BG Color + Primary Text Color” of “Designer’s Guide to Theme Development” and preview the theme on theme creator the color scheme of the theme didn’t change at all. I posed my question on the discord “quick-help” channel and the technical lead Diwei helped and prompted me to try to check the theme in setting and either select my theme as default or select the correct color scheme in my theme. Under his direction, I set the color scheme of my theme to “Default” and then the colors of the component in my remote theme changed appropriately.

Module 4

1. An Overview of Things Learned

Technical Area:

  • Completed Developer’s Guide to Discourse Themes.
  • Looked at instances where AJAX Requests are made in Discourse’s codebase.
  • Learned how the Widget (Virtual DOM) code in Discourse works.
  • Learned how to add settings to Discourse theme.
  • Learned how to add a localizable string to the theme.
  • Learned how to add font awesome icon.

Tools:

  • Discourse
  • Discourse Theme CLI
  • Discourse forum
  • STEM-Away forum
  • VS Code.
  • WSL
  • GitHub
  • Virtual DOM
  • Font Awesome Icons

Soft Skills:

  • Learned how to create new plugins in a fast-paced environment.
  • Attended the kick-off meeting and team meeting.
  • Reported any issues while coding.
  • Brainstormed ideas for the team’s final project.

2. Achievement Highlights

  • Updated theme to make use of the plugin API.
  • Identified plugin outlet locations in Discourse and add in custom code in the theme below or above a plugin outlet location.
  • Tried to implement the Virtual DOM
  • Added a setting to your Discourse theme
  • Added a localizable string to your theme.
  • Shared brainstormed ideas with the rest of the team.
  • Learned how to add font awesome icon.

3. Goals for the upcoming week

  1. Create a custom route for the admin interface and add some custom settings
  2. Finalized team project with a teammate

4. Challenges faced

  • When I tried to implement FontAwesome Icon, I was really confused at first. Then I ask my question on the Weekly Kick-Off Meeting and Keegan answer my question by showing some examples.

Module 5

1. An Overview of Things Learned

Technical Area:

  • Learned how to create a Discourse plugin.
  • Learned how to use the plugin generator to set up a new plugin.
  • Learned how to leverage plugin outlets.

Tools:

  • Discourse
  • Discourse Theme CLI
  • Discourse forum
  • STEM-Away forum
  • VS Code.
  • WSL

Soft Skills:

  • Learned how to create new plugins in a fast-paced environment.
  • Attended the kick-off meeting and team meeting.
  • Reported any issues to technical leaders.

2. Achievement Highlights

  • Created a Discourse plugin.
  • Completed reading Creating a Plugin Part 1 and 2.
  • Completed reading Rails Plugin Generator.

3. Goals for the upcoming week

  • Add some settings to the plugin
  • Setup git for the plugin
  • Read about how to publish the plugin

4. Challenges faced

  • When I tried to run discourse on Thursday, I encountered weird NoMethodError saying “undefined method highest_seen_post_number for…”. Then I ask my question on both slack and discord. Keegan guessed the reason why this kind of error occurs maybe that I modified the Discourse codebase. He suggested I do a “git pull” in my Discourse folder, and then a “./bin/rake db:migrate”. After playing with discourse local install a little bit according to his instruction, I eventually troubleshoot the issues.

Module 6

1. An Overview of Things Learned

Technical Area:

  • Learned how to add some settings to the plugin.

  • Learned how to set up git for the plugin.

  • Learned how to publish the plugin.

Tools:

  • Discourse

  • Discourse Theme CLI

  • Discourse forum

  • STEM-Away forum

  • VS Code.

  • WSL

  • GitHub

  • Git

Soft Skills:

  • Learned how to create new plugins in a fast-paced environment.

  • Attended the kick-off meeting and team meeting.

  • Reported any issues to technical leaders.

  • Determined ideas for the final project with teammates.

2. Achievement Highlights

  • Added some settings to the plugin.

  • Setup git for the plugin.

  • Read about how to publish the plugin.

3. Goals for the upcoming week

  • Delete count from the database (upvote and downvote)

  • Set up routes for back-end for getting count, deleting, adding (controller)

4. Challenges faced

  • When I tried to create my custom routes for reply voting, I encountered a “No template for interactive request” error saying “ReplyVotingController#index is missing a template for request formats: text/html”. Then I asked my question on discord, and I didn’t get responses for a long time. So I chose to refactor the name of my routes, functions and classes. Eventually, the routes worked as expected and the template can be rendered correctly.

Module 7

1. An Overview of Things Learned

Technical Area:

  • Learned how to set up routes for the back-end to get count, deleting, and add (controller).

  • Learned how to delete count from the database (upvote and downvote).

Tools:

  • Discourse

  • Discord

  • Discourse forum

  • STEM-Away forum

  • VS Code.

  • WSL

  • GitHub

  • Git

  • Google docs

  • slack

Soft Skills:

  • Attended the kick-off meeting and team meeting.

  • Reported any issues to technical leaders.

  • Discussed with frontend end team and backend database team about how to set up routes.

2. Achievement Highlights

  • Added controllers to the plugin to delete count from the database.

  • Integrated codes of teammates from both frontend and backend.

3. Goals for the upcoming week

  • Collaborated with teammates to complete the implementation of backend codes and make sure the backend codes work.

  • Prepare for the presentation about the task I have completed

4. Challenges faced

  • When I tried to test the “discourse-voting” plugin to see how I can use the features of that plugin in my codes, I failed to load the voting plugin in my topic. I post my questions on the discord but no one gave effective solutions. Then I realized that I need to look on the settings tab for the “Allow users to vote on topics in this category” checkbox to enable it. After that, I can see the voting features worked in my discourse topics