Skip to content

05_Developer training

Jump to bottom
mrhoyle2 edited this page Aug 26, 2025 · 1 revision

General

  • This is broken up into 30 minute sessions done during the second half of the first meetings untill completed. The first half of the meeting was spent talking through issues the developers had in the past week.
  • The Style Guide as a training document because it has all components, what they should look like, how to use them, and template code.
  • Training sessions were documented by the manager during the sessions ran by the tech lead.

Training sessions

Session 1

  • Troubleshooting page
    • Currently what is here, if you think of more things that could go here, please bring it up in the weekly meeting
  • Style guide page
    • This is here to provide guidenceon the style of pages, and serve as documentation for how to use components
    • General order of the page
      • Things to know before creating a page
      • General format
      • Paragraph and font options
      • General order of components on a page
  • Components
    • Components are for batch changing different aspects of the a page and to streamline the creating/editing process of pages
    • For TAM 2XX pages, please use our components so the language is consistent between them
    • Component options are at src/components/__.astro (each file is a component)
    • Make sure components are imported at the top of the page before using the component. The most commonly used components are on the template page.
  • Images (use this as an example of a component)
    • Self-closing vs regular closing
    • ID tag: what is it, how to use it, must be unique to page, like the name of the image
    • Images are in proportion of 8
    • Images are in public/xxx/CoursePage
    • Name image something that makes it clear what it is (ie; if it is a baseball example image, name the image baseball)
    • Must be our own image or an open-source image. The source needs to be listed in the caption.
  • Branding
    • Please follow the hex codes listed here. Images we create should look like the examples included.
  • Paragraph and font options
    • Show where they are on the page
    • p elements for starting a new paragraph
    • Span elements for any other changes
    • Walk through UofI colors
  • Equations
    • Review Latex if they are not familiar with using it
    • Walk through equation subsections highlighting the differences
  • Links
    • Walk through each subsections
    • Embedded videos must be YouTube for safety purposes
  • Developer goals for the week
    • Become comfortable with running tasks/maintenance changes
    • Can play around with other components on an experimental branch if wanted

Session 2

  • Nav tree
    • Walk through how it works and how to edit it, developers should not have to create them from scratch
  • Callout cards
    • One container per section, put all cards for that section in the container
    • Three main templates. If the content fits one of the templates, please use it. More templates can be created as needed if there is another popular card used.
      • Review: connect back to earlier in the course or previously taken course
      • Supplemental: other resources describing material discussed
      • Extra info: content that is outside of the scope of this course, but could be helpful or interesting to know. This often is in the form of other courses that build on this one (use general course title not UofI specific course code – ie; use solid mechanics instead of TAM 251)
      • Application alert: this is to highlight a real world application that connects to the course content
    • Did you know? is the default header for callout cards
  • Tables
    • Walk through how it works
    • We created our own code format? (I lost track of the convo at this point)
    • Follow the HTML format

Session 3

  • Examples
    • Work the same way as display equation
    • Different options: example and example problem (has solution, must have div slot=”solution”)
    • Must have title and ID
  • Notes
    • Not acomponent, but a standard format to use
  • Warnings
  • Button vs no button for expanding the box
  • Must have an ID
  • Code box
    • Likely won’t need to use it
    • Backticks vs quotes
    • Options at the end
    • Pointer changed to indicate it is copied to clipboard if you click on it

Clone this wiki locally