Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 83 additions & 0 deletions common-content/en/blocks/developer-specs/index.md
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's rename this directory to using-github-workshop or similar?

Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
+++
title="Using GitHub"
emoji="🔍"
time=60
[tasks]
1="Identify the purpose of a repo by reading its README file."
2="Find the issues view, the pull request view, and the file tree view on any GitHub repo."
3="Make sense of an issue, pull request, and file tree view."
4="Create an issue and attach labels to it."
5="Discover hidden information available in the GitHub interface."
6="Bring up the search on a GitHub page."
[build]
render = 'never'
list = 'local'
publishResources = false

+++

Welcome, everyone. This workshop is your first set of technical "glasses". You're going to learn to see a website like a developer. This means you will use a system of inquiry to help you find information in complex interfaces.

_Caution: Once you start seeing like a developer, you can't unsee it! You might find it harder to view interfaces as a regular user would - which is ironically who we design them for._

## Requirements

This workshop is designed to be completed on GitHub. You will need to have a GitHub account and access to the internet. Other than that it's for newbies!

Before you start, make sure you can access [the repository we will use for this exercise](https://github.com/CodeYourFuture/github_issues_prs_practice).

There are three activities. Split into groups of no more than 5 and set a timer so you don't lose track of time.


> [!NOTE]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're in a bit of a transitionary state with note-shaped things...

We have our own custom tag for this: {{<note type="exercise">}} where we can attach different titles and emoji to the title of the note.

GitHub recently added [!NOTE] and a few other directives, but they don't allow any customisation of the title. This styles exactly the same as a {{<note>}} without a type. We generally use the GitHub ones ([!NOTE], [!WARNING], etc) when we want exactly that heading, and our own when we want a different one.

I'd suggest here we want to do one of three things:

  1. Switch to a {{<note type="exercise">}} so we get an "exercise" heading instead of a "Note" one.
  2. Switch to a {{<note type="exercise" title="Exercise 1: Eat Me, Drink Me 📚 (10 minutes)">}} and drop the ## title, so the title appears as a naturally styled title in the block.
  3. Make {{<note>}} without a type attribute just do the box-styling without adding a title, and leave the ## title as-is.

I think I have a preference for 2 or 3, because I don't think the duplicate "exercise" title and "Exercise 1: ..." title are valuable

> ## Exercise 1: Eat Me, Drink Me 📚 (10 minutes)
> The first thing you should always do is find and read the README
>
> - Find the README file in this repository
> - What's its purpose? How can you tell?

Key takeaway: don't skip over text. Read it.

> [!NOTE]
> ## Exercise 2: You've Got Issues 🔍 (20 minutes)
>
> All your coursework is assigned as issues, so you definitely need to understand them.
>
> - Can you find where issues are listed?
> - Look at the labels - what story do they tell about how work is organized? Hover over them - what else can you find out?
> - Create an issue yourself. What options do you discover? You can look at [the deployed site](https://codeyourfuture.github.io/github_issues_prs_practice/) and the `requirements.md` file in the repository to help you identify what's wrong with the page.
> - Challenge: Can you find out who decides what labels mean?

Popcorn round your group and share one key takeaway

> [!NOTE]
> ## Exercise 3: Pull the Other One 🕵️ (20 minutes)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I've run this workshop in the past, people have generally gotten confused by this heading and asked about :)

Suggested change
> ## Exercise 3: Pull the Other One 🕵️ (20 minutes)
> ## Exercise 3: Pull Requests 🕵️ (20 minutes)

>
> Time to explore how code changes are tracked and discussed. You're going to need to slow way way down here. Instead of jumping around, skipping over all the details, you're going to read this page view from top to bottom. Really look at it. Ask each other: what does this button mean? Where does this link go?
>
> - Where can you see all the pull requests on this repo?
> - Find a pull request (PR) and "step through" the interface reading it line by line.
> - What's the story being told in the PR?
> - Can you piece together what changed and why?
> - Where can you find the file changes in this PR?
> - How can you filter the changes in the file view?
> - Where is the conversation happening?

Write your key takeaway down in your notebook.

## Solo Challenge: Hidden Powers 🔮 (5 minutes)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be styled as an exercise?


Take 5 minutes to click around and try things:

- What happens when you press '/' or 't'?
- Can you find other keyboard shortcuts?
- What search tools can you discover?
- How could you find a word on this page instantly?

Share your most surprising discovery with the group as you wrap up

Remember: There's no "correct" path through this workshop. The goal is to develop your own way of exploring and understanding interfaces.

## Acceptance Criteria

Check the Learning Objectives list at the top of this workshop. Make sure you're achieved them all.
2 changes: 1 addition & 1 deletion org-cyf-itp/content/onboarding/sprints/1/day-plan/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ name="Morning break"
src="blocks/morning-break"
[[blocks]]
name="Workshop: Using GitHub"
src="https://github.com/CodeYourFuture/Developer-Specs"
src="blocks/developer-specs"
time=60
[[blocks]]
name="lunch"
Expand Down
Loading