Elizabeth7 - Full Stack (Level 2) Pathway

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

Module 1: Getting Started

Tools:

  • Discourse
  • Ubuntu
  • STEM-AWAY Forum
  • Windows PowerShell
  • Git
  • Visual Studio

Technical Area:

  • Familiarized myself with Git, Github, command lines, and Discourse
  • Researched about theme components and plugin APIs to learn what they are and what some examples of each are

Soft Skills:

  • Problem solving skills were practiced by figuring out where the problem in my Discourse installation occurred and how to fix it

3 Achievements:

  • Fixed/re-did my Discourse installation so that I can successfully access it again
  • Learned/reviewed the basics of Git/Github and command lines
  • Thought of a couple of possible theme component and plugin API ideas

Tasks Completed:

  • Checked that I could still access Discourse. I had errors although it worked last week, so I had to look at the installation instructions again. I re-installed Discourse dependencies and found that there was an update for npm. After doing that and re-doing the following steps in the Discourse for Ubuntu installation guide, I was able to access Discourse again
  • Looked through Discourse Themes Components to brainstorm ideas for a theme component
  • Looked through Google Chrome extensions to help brainstorm ideas for plugin APIs
  • Installed Git and Visual Studios onto the Windows partition of my Mac, since my Windows partition is where I was able to install Discourse
  • Watched main sections of the Complete Guide to Open Source - How to Contribute video to learn how open source projects work in Github
  • Read the command line and Git/Github required readings and watched the fundamental parts of the overview/shell lecture video
  • Skimmed through the What is Discourse supplemental reading

Goals for next week:

  • Check that I can still access Discourse, since an update or issue may appear again
  • Study the Discourse codebase and attempt the SCSS guides and Ember guides
  • Look through some supplemental material, such as the Building stuff on Discourse thread
2

Module 2: Dev Environment Setup

Tools:

  • Ubuntu
  • Windows PowerShell
  • Discourse
  • STEM-AWAY Forum
  • Github
  • Atom 2
  • Udemy

Technical Area:

  • Looked through Discourse codebase/Github/documentation
  • Studied more about theme components and how they work in Discourse
  • Studied the Ember and SCSS guides
  • Starting to use my browser’s developer console

Soft Skills:

  • Independent studying - going through a Udemy full-stack web developer course
  • Documentation reading - Ember/SCSS guides, Discourse

3 Achievements:

  • Installed Discourse Theme CLI
  • Learned how to setup Discourse Theme CLI and create a new theme
  • Learned about inspecting UI and how to apply and edit elements

Tasks Completed:

  • Checked that I could still access Discourse, as I had unexpected errors last week. No errors were encountered this time.
  • Continued brainstorming theme component ideas by observing other sites and looking through the available Discourse Theme Components
  • Looked through Discourse codebase and watched the video on the Discourse tech stack
  • Studied the Ember and SCSS guides
  • Installed Discourse Theme CLI
  • Reviewed HTML and CSS through a Udemy course, will review Javascript soon
  • Took notes during this week’s kick-off meeting to learn how to setup the Discourse Theme CLI, create a new theme, and use the DOM inspector to inspect Discourse UI

Goals for next week:

  • Looked through examples of themes by other developers (supplemental resource) and decide on a theme
  • Will have read/gone through the required readings
  • Will have set up/created and and pushed a theme onto GitHub
3

Module 3: Developing Discourse Themes

Tools:

  • Ubuntu
  • Discourse
  • STEM-AWAY Forum
  • Github
  • Atom 2
  • Udemy

Technical Area:

  • Utilized CSS classes and HTML
  • Learned about and used Discourse’s Theme customization section
  • Utilized Github to practice uploading a remote theme and how to edit and view the updated version through changes in Github

Soft Skills:

  • Practiced following instructions by following the Developer’s Guide to Discourse Themes

3 Achievements:

  • Learned about Discourse’s admin panel and its functionalities, such as customization, color themes, and more
  • Learned how to create a new theme in Discourse and implemented a basic one
  • Learned about inspecting UI and used it to observe elements

Tasks Completed:

  • Attempted to follow the previous week’s kickoff meeting tutorial on setting up the Discourse Theme CLI to create a new theme
  • Created a new simple theme with a header banner and a footer banner including links to the ToS and other Discourse documents
  • Continued brainstorming theme component and plugin ideas by observing other sites and looking through the available Discourse Theme Components and Plugins

Goals for next week:

  • Will have looked through the Style-guide Route more deeply
  • I’ve used the developer tools’ DOM inspector to identify elements but aim to use that to make additional changes to my basic theme
  • Will have gone through the advanced portion of the Developer’s Guide to Discourse Themes
  • Will have read/gone through the required readings
  • Have a few solid ideas for theme components and/or plugins
4

Module 4: Advanced Discourse Themes

Tools:

  • Ubuntu
  • Discourse
  • STEM-AWAY Forum
  • Atom 2
  • Discourse Theme CLI
  • Command Line Tool
  • DOM Inspector
  • Style-guide
  • Font Awesome Icons

Technical Area:

  • Utilized slightly more advanced CSS and HTML
  • Learned how to create themes using Discourse’s Theme CLI, the DOM inspector, and Atom

Soft Skills:

  • Independent research on possible plugin ideas
  • Communication through office hours and group meetings

3 Achievements:

  • Updated my theme using the CLI and DOM inspector
  • Learned about plugin APIs, handlebars, and AJAX
  • With the team, we decided on what plugin API we want to make

Tasks Completed:

  • Was previously somewhat confused on how to create a new theme through the CLI, but had office hours with Keegan and learned how to use it and edit themes through Atom
  • Used the DOM inspector and Atom to reformat past parts of my theme and then add slightly more complex parts, such as rounding buttons and changing fonts for certain sections
  • Brainstormed a few plugin ideas by observing other sites and looking through the available Discourse Theme Components and Plugins

Goals for next week:

  • Have finished studying all of the required readings
  • Will have went through and studied Keegan’s Advanced Theming Example
  • Finished planning stages for our plugin
  • Read up more on Github/pull requests/etc to prepare for the actual coding stages
5

Module 5: Discourse Plugin Development

Tools:

  • Ubuntu
  • Discourse
  • STEM-AWAY Forum
  • Atom 2
  • Discourse Theme CLI
  • DOM Inspector
  • Git
  • Github

Technical Area:

  • Plugin APIs, AJAX requests, and handlebars
  • Navigated through more of Discourse’s codebase
  • Brainstorming/designing what our widget should look like and where it should be placed
  • Learned more about github and git commands

Soft Skills:

  • Independent additional research on plugins and widgets
  • Drew ideas for widget icon designs

3 Achievements:

  • Learned the basics of how to create a plugin
  • Learned how to use git commands and the plugin generator
  • Learned about AJAX requests and handlebars

Tasks Completed:

  • Went through required readings with particular attention to the sections regarding how to create plugins and widgets, since we’re trying to add one rather than edit one
  • Came up with a couple widget designs and locations, along with a general idea of how to approach each of those ideas

Goals for next week:

  • Have finished studying all of the required readings
  • Will have a solid grasp on how and where to create our desired widget and have some code done for it
  • Have looked through the supplemental resources
6

Module 6: Plugin Development Continued

Tools:

  • Ubuntu
  • Discourse
  • STEM-AWAY Forum
  • Visual Studio
  • Discourse Theme CLI
  • DOM Inspector
  • Git
  • Github

Technical Area:

  • Understood the Git/Github flow stage and the potential benefits of using Git commands instead of the Github interface
  • Read more into Ember, Rails, and Ruby,

Soft Skills:

  • Independent additional research on plugins and widgets
  • Presentation/communication by showing the team 4 potential locations for the widget. We all voted on where we’d like to place it and decided on the spot on the left of the Like icon at the bottom of posts

3 Achievements:

  • Finalized 4 reasonable locations for our widget and decided on 1 location with the team
  • Used the DOM to try to more accurately understand how Discourse code/classes are named and organized
  • Gained more knowledge in Rails and MVC by reading more into its guide. Particularly learned more about controllers and their role

Tasks Completed:

  • Switched over from Atom to Visual Studio to match my team’s IDE and be able to use VS’s built-in Git features
  • Decided on where to place the widget
  • Scheduled office hours, reviewed what I know, and determined what questions I want to ask Keegan regarding my task

Goals for next week:

  • Will have a deep/clear understanding of my task and have started making progress
7

Module 7: Putting it All Together

Tools:

  • Discourse
  • STEM-AWAY Forum
  • Visual Studio
  • Discourse Theme CLI
  • DOM Inspector
  • Git
  • Github
  • Font Awesome Icons

Technical Area:

  • Learned more about and implemented widget methods, such as decorateWidget
  • Became more familiar using DOM to figure out placements and css, such as hover selectors

Soft Skills:

  • Additional study on plugins, widgets, and various codebases of other projects implementing a similar feature

Achievements / Tasks Completed:

  • Created 2 widgets, one for upvotes and one for downvotes in the general desired location of replies
  • Added basic css to have the widget display in the desired location more specifically, and match the color of nearby widgets

Goals:

  • Edit widgets to be able to take send a request to the backend and update the count of up/downvotes, then receive the updated number and display it