---https://hackmd.io/
tags: mstu5003, tinker, technical, tools
---

# Tinker: Technical

This Tinker is for your to practice and get familiar with some of the technologies we will be using this semester. Some of the tinker tasks (i.e. the Codepen) might look a little intimidating.

> That's okay! We will get there soon.

Partly, Tinkers _are_ about exploration, challenging oneself, and identifying what we don't understand.

## Slack *(try to reply a testing thread in Slack)*

We've already started playing with Slack and I have provided a guide. If you haven't completed all the tasks in the [Slack Orientation](https://hackmd.io/s/SyWo-ivAM), please do so.

NEW CODE STARTS HERE..

## HackMD *(Save this documnet as a template)*

We've started playing with HackMD.io in class. Many of the Tinkers you'll be doing ask questions that I'd like responses for from _your group._ Including this one.

> I expect all your group Tinker submissions to be written using Markdown and shared/submitted with HackMD.io.

Remember, HackMD is is a collaborative real-time tool that should help your group develop the written Tinker response. It will be your responsibility to use all the syntax features available to you in HackMD.io to create a well organized, readable, response format to the Tinker questions I ask. If it's really hard for me to read and understand, it's not good for you.

So take advantage of the formatting features. If you are using code in your response you might want to `use a code block`. Or if you have extensive code,

You might use
a multiline

var x = "syntax highlighted";

codeblock.
UNI:RNW2118
UNI:IW2254
UNI:MP4155
<!--UNI:YW3857-->
uni：yz4432
Or if you're quoting people:
<!--UNI:JX2517--> 

> Use a block quote.

Or to make certain parts more clear:

:::info
Use an information alert to distinguish it from the rest.
:::

You get the point. There is no rule to HOW you organize your work, but there are many tools available so you should make appropriate decisions with your group. {[UNI: qd2160]}

> If you want me to provide **you** with cleanly formatted examples, you should be providing **me** with cleanly formatted work. :wink:

:::info
My UNI is KZ2430
uni:aw3333
:::

## CodePen

Follow [this link](https://codepen.io/mstu5003/pen/XeJNjz) to the exercise on CodePen that you will be using. Before you you begin the steps ahead, take a look around the page, read the headings for the different sections. What elements do you recognize? Which ones are unfamiliar?

- Notice that you can edit the text in the panes. This will not save the changes, since I have **shared** the link with you but have **not** given you access to **collaborate**.
- To save a **copy** of this **Pen** (this is the name given to **files** on CodePen) to your own **Dashboard**, click on **Fork** in the navigation bar. Once you click here, the Pen you should be working on will be **your version** of the Pen that I shared. Confirm this by going to your Dashboard and making sure that the file is saved here.
- **Forking** will be an important concept to understand once we begin to use **Github**.
- Once you have your own copy of the Pen, you can begin to manipulate it and save the changes. First, observe the **HTML panel** (far left). Some of the tag names should seem familiar to you, but don't worry about the specifics yet.
- Look at the **structure** of the code. Does it seem organized or well-structured? A *very* important part of writing code is to keep your code as **clean** as possible. This serves not only you as you read through and de-bug your code, but others as well, especially when you start to peer-assess and pair-program.
- On the top right of the HTML panel, click on the dropdown arrow and then on **"Format HTML"**. Notice what this does to the code. Scroll through and try to guess why **Format** organizes the code this way... what is the purpose of **indenting** things the way it does?

### COLLAB / PROFESSOR MODES:
For the following sections, you will need to work with one or two peers.
- Choose one person to be the **owner**. That person should go to **Change View** at the top right, and choose **Collab Mode**. They can then share their url with the other(s).
- Have each member make different edits and notice how CodePen updates in **real-time**.
- Notice that in **Collab Mode**, only the owner can save changes.
- Have the owner **change view** to **Professor Mode**. Again, share the url with the other(s).
- What is the biggest difference between the two modes?
- Test out the **Chat** and the **Pause and Play** features in Professor Mode.
- Go back to **Collab Mode** for the rest of the tasks.

### SHORTCUTS
- There are some shortcuts that will be *very* useful when using CodePen (and many other text editors). Test the following one at a time:
- Tab Autocomplete:
- In the HTML panel, type "p" and then **tab**.
- Now try the same with "a" and "img". What is the same? What is different?
- Now try the same with "f". What happens?
- `<f></f>` is not an accepted tag in HTML. What does this say about autocomplete?
- Multiple cursors:
- Click anywhere in the HTML panel, hold down **command** (Mac) or **CTRL** (PC), and click somewhere else. What does this allow you to do?
- Go to the **list** in the code. Set your cursor between the `>` of the first `<li>` tag and the "E" of its description. Now, holding down the **alt**/**option** key, scroll down to the last description. How is this useful?
- Click anywhere in the HTML panel. Hold down **shift** and press on the **right arrow key** multiple times. Now try the same by holding down **shift** *and* **alt**/**option**, as well as the **right arrow**. Notice the difference.

<!--mem2408-->
### CODE:
- Look at the code for the images on the page.
- What do you notice about the way it is structured?
- What does the `a` part do? What about the `img` part?
- What similarities / differences do you see between the `a` and the `img` tags?
- How would you change the word "Descriptions" into a **fourth heading**?
- How would you turn the list of descriptions into an **unordered list**?
- Take your attention to the **CSS** panel (middle).
- What is your first guess as to what CSS does?
- Delete line 2 (`font-family: Arial;`). What does this tell you about what **body** is?
- Delete line 7 (`color: #e24c31`). What hint does this give you about the structure of CSS?
- Replace the **hex code** in line 7 with `#000000`. Then try `#FFFFFF`.
- How could we achieve a grey color using hex codes?
- Change the **margin** in line 12 (under `img`) to something very small, and then something very big. Describe what happens.
- Test out the **button** at the bottom of the page.
- Where in the code are we telling it to create the **alert**?
- How does the computer know __*when*__ to create the **alert**? I.e., what is the **link** between the **button itself** and its **functionality**?

dd3142
<!-- yc2216 -->
<!--
## OBS/Youtube
HIII

Throughout the semester, you all will be creating a few videos of your code, articulation of the code, and a reflection of the process and of yourself. Something like this:
az2725
HI Zl3252

Your videos will be screencasts that present:

- Yourself and/or team...
- Your/Group's actual code

Create a small, 1-2 minute screencast of yourself, coding or fiddling with code in CodePen.

**BONUS points if you create a screencast of yourself AND some collaborative partners all interacting (e.g. chat, collaborative coding, discussion, etc.) in a single screencast.**

- Using OBS: Explain what you're doing, whether you understand it or not.
- Reflect on what you're learning about code, tools, the process, and/or yourself and articulate it to your audience (the class.)
- Publish it to Youtube as a UNLISTED
- Submit the Video URL to Canvas and Slack

:::info
NOTE: If you already have a different preferred screencasting software, please feel free to use that instead of OBS if you prefer.
:::

UNI: yc2216
### OBS Interface / Options

<!--
[](https://i.imgur.com/OJ5UWN0.png)

### OBS PROCESS:

1. Add a new SCENE.
2. Add your DISPLAY as one of the SOURCES.
3. Add your CAMERA as one of the SOURCES.
4. Move the camera source to one of the corners of the video screencast.
5. START RECORDING to create the video.
6. STOP RECORDING to end the recording.

You should now be able to not only talk to the audience, but show the audience your code / project creations in order to explain it.

### OBS SETTINGS:

Thing with video is you'll have to tweak the adjustments to match the capabilities of your computer. You can keep most of your settings to default and in simple mode. But there are two things you might want to adjust.

#### VIDEO SETTINGS:

Keep FPS values to 30, no higher. We need to be able to see your code but the motion doesn't have to be smooth. We can get better recording performance by keeping this at 30.

Base Resolution: Is the resolution of your monitor.
Output Resolution: Is the resolution of your video.

You might want to reduce output, especially if you have a high resolution monitor. That's a lot of pixels to record. In general, text can still be crisp at regular 1080p HD resolution, that's 1920x1080.

#### OUTPUT SETTINGS:

Most of these settings, I have no idea what they actually do. But start with the default and you can test settings by increasing/decreasing the settings incrementally with each test until you find a setting that is both clear to view/read and doesn't overload your CPU.

Encoder Preset: The slower the encoder preset, the higher the quality. The faster the encoder preset, the lower the quality, but it's less strain on your computer.
Recording Quality: High Quality (is probably fine)
-->