YeeKitChan - Full Stack (Level 2) Pathway

Certificates Summer 2021 Certificates Open Source Ruby Plugin (CA) 2021
,
1

Week 1: 6/7/21 - 6/13/21 [Module 1]

1. Overview of Things Learned

Technical Area:

  • Git and Github version control
  • Open-source software
  • Command line basics
  • Familiarization with the Discourse forum platform
  • HTML and CSS

Tools:

  • Learned to use Github for version control
  • Used Terminal to execute scripts in the command line
  • Project management through Trello boards
  • STEM-Away forum (Discourse) and Discord for effective team communication

Soft skills:

  • Time management for tasks
  • Organization and utilization of my resources
  • Team communication through multiple platforms
  • Debugging

2. Achievement Highlights

  • Practiced navigating through files, directories, and permissions through the command line
  • Learned about GitHub and Git as a version control system in the context of open-source software development
  • Attended kick-off meetings and team meetings

3. Goals for the Upcoming Week

  • Successfully install Discourse after resolving all errors
  • Familiarize myself with Ruby, Ember.js, and the Discourse codebase
  • Ask for technical help from team leads when needed

4. Detailed Statement of Tasks Done

  • I learned and practiced basic use of the command line by interacting with local files and directories. I also learned about the different levels of permissions users can have for files.
  • I learned about the structure of the version control system Git and its complementary application, GitHub. Knowledge of this will be useful later on in the project when we begin to collaborate on our Discourse theme project.
  • My team leads shared a resource document and a Trello project management board with us to help us keep track of our tasks. Using these two sites and my browser’s bookmarking system, I have kept track of my STEM-Away internship-related resources.
  • Met with my team, FS June-1, for the first time!
2

Week 2: 6/14/21 - 6/20/21 [Module 2]

1. Overview of Things Learned

Technical Area:

  • Ember JS - components, routing
  • Discourse codebase
  • Command line
  • SCSS

Tools:

  • Deployed my first Ember JS app
  • Successfully installed Discourse via the command line and hosted a local instance
  • Accessed the Discourse codebase through Visual Studio Code

Soft skills:

  • Asked for help from my team members
  • Organization and utilization of my resources
  • Team communication through multiple platforms

2. Achievement Highlights

  • Resolved several errors with the help of my teammates and successfully installed Discourse
  • Followed Ember JS guides to build and edit my first Ember JS app. Also learned about the basics of Ember JS along the way.
  • Watched recording of week 2 kick-off meeting

3. Goals for the Upcoming Week

  • Finish the SCSS guides
  • Create a remote Discourse theme using DOM inspector

4. Detailed Statement of Tasks Done

  • I worked through problems with my path and permissions to install Discourse, guided through errors by my teammates. Then, I was able to run a local instance of Discourse from the command line and create an admin account. I then took some time to explore Discourse from the admin perspective and read through the Discourse codebase via Visual Studio Code.
  • I read through the Ember JS guides and deployed my first Ember JS app. After learning the basic structure of components and routing, I challenged myself to add additional components and pages to it.
3

Week 3: 6/21/21 - 6/27/21 [Module 3]

1. Overview of Things Learned

Technical Area:

  • Developing simple Discourse themes
  • Using Git and GitHub through the command line
  • Using the DOM Inspector to make specific changes

Tools:

  • Designed my first Discourse theme by following guides on meta.discourse.org
  • Created my first GitHub repository through the command line in Visual Studio Code and practiced committing and pushing to it
  • Used the DOM inspector to find and change specific components of my Discourse theme

Soft skills:

  • Discussed questions with my team leads
  • Navigated schedule complications
  • Team communication through multiple platforms

2. Achievement Highlights

  • Created a remote Discourse theme and installed it on my local instance of Discourse via the link to my GitHub repository
  • Designed specific elements of the Discourse platform with the help of Chrome and Safari’s developer tools, including the Javascript console and the DOM inspector

3. Goals for the Upcoming Week

  • Use the theme creator to test my theme publicly
  • Learn about handlebars syntax
  • Understand how widgets work in Discourse

4. Detailed Statement of Tasks Done

  • I familiarized myself with Visual Studio Code, which was completely new to me - in the past I used a very simple text editor which did not include many of the powerful features that Visual Studio Code has. I explored how to integrate my GitHub account with Visual Studio Code so that I could push my code from Visual Studio Code to specific repositories. I also learned how to switch branches in Visual Studio Code, which took me some time to find. Lastly, I learned how to use commands in Terminal to add files to a commit and then push that commit to my remote repository.
  • After I got more comfortable with my development environment, I created a simple Discourse theme with a custom color scheme by following guides in the readings. I then went on to add more styles and was able to extract the correct class names from the theme using my DOM inspector. I experimented with the developer tools in both Chrome and Safari and also used the Javascript console to view scripts.
4

Week 4: 6/28/21 - 7/4/21 [Module 4]

1. Overview of Things Learned

Technical Area:

  • Plugin outlets in Discourse
  • Handlebars syntax
  • Widgets in Discourse
  • Adding settings to themes

Tools:

  • Handlebars
  • Virtual DOM
  • Discourse
  • Visual Studio Code

Soft skills:

  • Communicated with my team leads about technical problems
  • Team communication through multiple platforms

2. Achievement Highlights

  • I learned about AJAX requests, Handlebars as applied in widgets, and how Discourse uses plugin outlets.
  • Using the knowledge from the readings, I was able to add an icon to my theme using the decorateWidget() plugin.

3. Goals for the Upcoming Week

  • Understand AJAX requests more thoroughly
  • Brainstorm more team project ideas!

4. Detailed Statement of Tasks Done

  • I explored the front-end code of Discourse more and added a banner to the main page of the platform in my theme. I also changed the fonts and colors and installed some plugins developed by other teams so that I could dissect and understand how they used plugin outlets to change specific areas of Discourse.
  • I found a theme that labels the various plugin outlets, which made finding the correct plugin outlets for my simple plugin easier. I tried to implement a plugin called decorateWidget() which added a heart icon to categories, but I had some trouble styling the icon with CSS. I checked in with my team lead and they provided me with some resources that helped me learn how to style SVG icons with CSS.
5

*For Weeks 5 and 6, I had to deal with computer issues which eventually forced me to order a new laptop. During this time I was not able to complete readings or do development tasks on the Discourse platform.

Week 7: 7/19/21 - 7/25/21 [Module 5]

1. Overview of Things Learned

Technical Area:

  • Creating a plugin
  • Using theme modifiers
  • Adding Font Awesome icons to themes

Tools:

  • Handlebars
  • Virtual DOM
  • Discourse
  • Visual Studio Code

Soft skills:

  • Communicated with my team leads about technical problems
  • Working with team members to complete closely related tasks
  • Asking questions about installation issues
  • Team communication through multiple platforms

2. Achievement Highlights

  • Installed a local instance of Discourse on M1 chip Mac
  • Learned about the proper file structure for plugins and their local installations
  • Learned how to add modifiers to themes in order to add Font Awesome icon dependencies

3. Goals for the Upcoming Week

  • Begin work on my task, toggling button styles upon voting, in our final project!

4. Detailed Statement of Tasks Done

  • Due to technical issues which ultimately led to my having to purchase a new computer, I had to reinstall Discourse on my new machine. Since I got a MacBook which ran a M1 chip, the setup and installation was different than my previous installation. I followed the guide for Discourse developers working on Apple Silicon by the Discourse team, but I ran into some issues when executing the installation commands for certain gems. I asked for help from my team and after extensive debugging, my team lead, Sean, helped me resolve all errors.
  • From the resources and readings, I learned how to create a plugin with the correct file structure and how to install that plugin locally. I also learned how to use theme modifiers to add Font Awesome icons.
  • This week, Full Stack Teams 1 and 2 combined to work on our final project together. We decided to collaborate on a voting plugin and our team leads defined tasks and responsibilities for us. I chose to work on toggling the button styles upon a user’s vote. For this task, I will work closely with the team in charge of implementing the button widget.
6

Week 8 and 9: 7/26/21 - 8/8/21 [Final Project]

1. Overview of Things Learned

Technical Area:

  • Styling widgets in Discourse
  • Using the DOM inspector to extract class names and HTML elements
  • Using Javascript to add and remove classes

Tools:

  • DOM Inspector
  • Discourse
  • Visual Studio Code

Soft skills:

  • Collaboration on tasks
  • Asking for guidance from department leads and team leads
  • Team communication through multiple platforms

2. Achievement Highlights

  • I was able to reach out for help from my teammates and team leads. Since I didn’t have a formal foundation in Javascript, it was really helpful to consult with my team leads on areas that I was unsure about. I was able to build on the pointers that Sean and Keegan gave to structure my code and accomplish my task.
  • I collaborated with Elizabeth and Nhien, who were in charge of creating the voting buttons, to lay the groundwork for my task.
  • I used Javascript and CSS to toggle shading and de-shading of arrow icons by adding and removing the “voted” class to the classList.

3. Goals for the Upcoming Week

  • Present our plugin and my individual contributions!

4. Detailed Statement of Tasks Done

  • Since posts with many replies take a while to catch up on, our team decided to develop a voting plugin so that users can easily find replies that are most helpful. We were inspired by the Reddit voting system and decided to implement a similar function with upvotes, downvotes, and a displayed total.
  • I used Javascript and CSS to toggle shading and de-shading of arrow icons by adding and removing the “voted” class to the classList. The voted class is tied to CSS styles that control the color property of the upvote or downvote button’s arrow icon, which was taken from Font Awesome. Thus, when the “voted” class is added or removed, I am able to change the color of the arrow. I also added the same color styling for hovering.
  • Since users may change or undo their votes, I used .classList.toggle to add the voted class if it did not already exist in the list and remove it if it did exist. I paired this with .classList.remove to remove opposite votes, if there were any.
  • I initially took a more complicated approach with if-statements and adding and removing classes, but then later I realized I could use the toggle method for the classList and it simplified my code a lot. I have very little experience with Javascript, so I learned its syntax and methods along the way.
  • There was also an issue distinguishing between replies to style each set of vote buttons; at first the styles were applying universally to all sets. However, Nhien was able to fix this using the reply indexes.