Week 1 Focus and Habits Hack

Video Notes (includes 10 insights)

Origins

Class Content: 10 insights

  1. Happiness is controllable and can be improved (some is controlled by heritability, but not all)
  2. Location of residence, salary, and other life circumstances matter less than we think (positive and negative events have a temporary impact on happiness). Therefore, removing the “bad stuff” isn’t the way to maximize happiness.
  3. It is challenging (but possible) to become happier. This requires building daily habits that happy people have. The agile methodology, like the “Good Life” course, requires that habits be built. These habits will include having a daily standup meeting for planning and task delegation, maintaining issues for short-term tasks and the scrum board for organizing those tasks. This ensures that tasks are completed at a consistent pace in accordance with the agile methodology (Principle 8).
    • GI Joe Fallacy: A cartoon claimed knowing a concept/skill is half the work, and that is false. The skill must also be put into practice, and that’s the majority of the work.
  4. Intuitions about happiness can be inaccurate. The mind forecasts about what makes us happy (ex: salary, possessions), but increases in these things do not correlate with significant increases in happiness.
  5. Happy people make time for social connections (spend more time with others). The agile framework would require working and with other people on computer projects. Communication in the agile framework requires in-person, face-to-face conversation (principle 6). This teamwork makes potential for social connections between effective group members, and this in turn may enhance happiness.
  6. Helping others helps us (more than we expect) by making us happy. Helping others is integrated into the agile framework as when a student is having trouble with code, other group members can work with that student and teach how to fix the issue (this is also part of leadership skills) to help the group move along (Principle 4). This willingness to share help will ultimately lead to a better project and help with learning programming… along with the happiness along the way that comes with being helpful.
  7. Make time for gratitude… daily. Happy people think/talk about the better people (rather than the annoying people). Writing down a list of good events daily increases happiness. It is also good to write a letter of gratitude and read it in-person to the person you are thanking. This reading of the letter connects the most with Agile Principle 6 (face-to-face conversation is the most effective mode of communication)
  8. Healthy practice matter more than we think (exercise, sleep, etc.) Workouts has been shown to boost happiness for the day, while sleep deprivation significantly decreased happiness, some to depression levels.
  9. Mindfulness (be in the present). Mindfulness is being aware of present sensory input (ex: how your feet feel when you stand, the room temperature, any sounds perceived, the color of your dish, etc.). More time spend in mindfulness is correlated with greater happiness, even compared to thinking about pleasant but non-present things.
  10. Become wealthy… in terms of time. Time famine is being too busy… and time affluence is the opposite. People maximizing time affluence are happier.

Gratitude Note Experience

Letter to someone on campus

I wrote my letter to my teacher, Mr. Yeung. I was having a problem working with a group member, as I was helping him along every step of the way through setup. This left me with no time to do my own work in class. So I emailed him about the issue, and he told me to tell my partner three things:

  1. Consult the blog/guide and read through the steps
  2. If confused, ask me for help. Ask after 5 minutes of attempts to resolve the issue.
  3. If I was too busy or didn’t know how to help, ask Mr. Yeung for help.

This allowed me to spend time during class working on my computer projects, and it also helped my partner gain some degree of independence during the learning process. I especially saw value in having group members consult a guide. This was very reassuring for me, especially since I tend to have anxiety during the early parts of a class (due to familiarization with class format and the like). So to thank him, I wrote him my letter. I already gave the letter to him at the time of writing, so I can’t copy the contents… but I can paraphrase from memory

In the letter, I thanked him for replying to the email, and told him all the good things that stemmed from this reply: having more time to work on the project, my partner being able to learn with a degree of independence (that is, not fully relying on my help), an understanding that I can refer confused group members to guides so I can continue to help in other ways, and a boost in my collaboration skills which will be important for college and the workforce. I also admitted that working in groups has been a challenge for me, and afterwards thanked him for helping me address it.

When I finished reading the letter to him, he told me he was glad to help with my issue. As far as I remember, the happiness I experienced was not a rush… but more deep inside, like a calm. This could have been my anxiety/stress dissipating.

During the next class, I thought of an application of his advice in a context outside of school. I know that the practice in groups I will get in this class will be invaluable in the future.

Letter to someone at home

I wrote my letter to my mother. I thanked her for helping me with an extracurricular activity last week, and I thanked her for helping me write an email about a concern with work in this class. She proceeded to give me all the credit for writing the email. I also thanked her for giving me good food and transporting me to school and other activities so that I can work with a clear mind, work in groups, and ask students and teachers for help with my work. I also thanked her for lending me her phone to ask my sister for help in AP Calculus BC, a tough course. I finally thanked her for her support in my efforts, especially any support that I haven’t given enough attention to.

My mother smiled and hugged me, and she asked why I was thanking her. When she asked if it was due to her help with improving my anxiety about this class (and other things), I nodded.

I felt it was nice that I made her happy by giving attention to everything she does to support me. Perhaps I can do this with other people as well.

NEW: Personal Goals (these are long-term)

Gratitude List

Week 1 Python Vocab

Term Definition
Variable An abstraction in a program that can hold one value/string at a time
Command A procedure executed by a computer/program
Static text Text within a program which does not change
Dynamic text Text within a program that does change, often due to inputs/outputs of various commands. Can be different depending on how a program is executed
Output The resulting text/values after a command is executed. This can be printed to a terminal using the print() command
Input A user answers a prompt with a string or other value. This is then often stored in a variable to be re-used later.
Sequence of Code Any code in which two or more lines are involved (ie, any code more complex than a single command)
String A sequence of characters/words, often enclosed in quotation marks
Parameter A variable which serves as input for a command/program
function Similar to a variable, but for commands. A function is defined with the def command (or other defining command), and afterwards the name of the function. The commands after the function name are then associated with the function throughout the entire script
Procedural abstraction Grouping a series of repeatedly-used commands
library a collection of code/functions that a program uses to optimize code execution. The program can refer to many parts of the library using importation commands to call certain functions/commands.
String concatenation When a string is printed to the terminal

Python commands

Command Result
print(TEXT) prints TEXT to the terminal
def definition_name(commands here) defines a function, which is a group of commands defined under a name
definition_name(commands here) execution of the function
var_name = (input) defines a variable based on input or as a predetermined value/string
import imports functions from a running environment
if if a specified condition is satisfied, the associated command(s) are run
else if the if condition is not satisfied, the command(s) associated with this are run instead
list_name = [item1, item2, item3…] Makes a list. Very useful if you are executing the same commands over and over and just want to modify an input.
for Does two things: cycles through a list, and executes a set of commands once for every item in that list. Each item in the list will be set equal to a variable (most commonly i) for input.
iteration_name = iter(list_name) Takes a list and turns it into an iteration (defining it as a variable). Required to run next.
next(iteration) Cycles to the next item in an iteration when executed… without re-executing any commands.

Week 2 Python Terms Notes

Term Definition
Type A form/variant of variable, being either a string (Ex: var = “john walked”), integer (ex: int = 18), float (ex: num = 100.0, notice the decimal), list (ex: cars = [SUV, sports car, sedan], notice square brackets), or a dictionary (includes curly brackets and several variables)
Key Another word for variable
index essentially the function of the common i variable in a for loop (cycles through entries in a list)
Procedural Abstraction Multiple HTML fragments <html></html> used, which are put together into a website

Week 2 HTML Notes

Importing a Theme

Pictures say a thousand words. Therefore, I’ve integrated pictures to explain what’s going on with my site.

I attempted to integrate the midnight theme into my fastpages (at _config.yml). It looks like this:

Upon uploading the modified _config.yml theme to my FastPage repository, I found out that there was no changes occurring. It was only some time later that I found that the CI task was consistently failing due to syntax errors in my _config.yml file.

Every CI task was failing when I did the commit. The syntax error in _config.yml effectively made it impossible to update my website. It was then that I was told that I was not supposed to put midnight, but rather pages-themes/midnight@v0.2.0 in the remote theme configuration of _config.yml. Upon adding the fix, the CI tasks worked again.

This fix was a success. The midnight theme was applied. I have some before/after images.

There is a very noteworthy change that comes with implementation of the midnight theme: the top bar of the website is removed. This top bar includes my most crucial pages (the search page, the tags page, this page, and my about me). Removal of easy access to the tags page is a special concern, since this serves as the backbone of organization for my website. As a result, the theme change is temporary.

Modifying dark mode

This one was interesting. I imported all the sample code, then had to modify it. The default code made the background of the website all-black, but something just wasn’t right. The top bar had the same color as the rest of the page. Therefore, I had two goals:

  1. Make the color of the top bar different from the body
  2. Define a second color to use.

Now of course the file in question was /sass/minima/dark-mode.scss. Now of course I had to define the second color first. I thought navy blue would fit, so I made a new color named navy-blue. Now the nice thing is that if you mouse-over the square of the color, a color picker opens up. That made changing the color very easy.

Then I had to figure out how to make the top bar a different color. Since I wanted navy-blue to be my main color, I replaced all instances in the code where the background was dark-grey (the default color) with navy-blue.

The last thing I had to do was figure out which parts of the page constituted the top bar. A little use of inspect element on my own page helped a lot.

Using this, I found out that the site-header and site-nav parts of the site were in the top bar. So I set their background color to dark-grey.

Tables in Liquid

I will not lie to you. This portion of the HTML hacks… with little sample code… was extremely difficult for me. It took me around 6 hours, searching through many websites… many reuploads of the page in question (which was index.html)… but onto the code…

Now, what’s going on here? This is meant for the table on my front page index.html.

The first few lines are a bunch of HTML tags. The funny thing is, every time you make a tag (ex: <table>), you have to close it later (</table>). So you got <table>, <tr> (which probably stands for “table row”), and <th> (likely “table heading,” appropriately named since the first row is bolded and has its own background color). Then we close everything.

This is where the liquid starts. It took forever for me to get this right… mostly because I tried many things. But so you don’t have to go through all that, I’ll just explain what’s in front of you.

In liquid, your commands must go in percents and curly braces. That’s how it was made. Now the reason why I’m not going to actually type out any percents and curly braces is because the website will immediately think I’m running actual code and return errors when I take my liberties. This would effectively make it impossible to update this page… so whenever you see a command assume they are in curly braces and percents.

assign = var_name makes a variable. But then you see assign Trimester = "1; 1; 1" | split: ';' Liquid has this funny thing about arrays, so in order to make one you have to put the whole thing in quotes, with each entry separated by a certain character… then you have to pipe it to a split command to tell liquid what character separates each entry (in this case, it was semicolon). I defined the other lists in a similar manner..

Next is the for loop, which as a reminder executes all associated commands for each iteration. In this case, we get for i in (0..2). Conceptually, it’s not much different than the python for loops. It cycles through three values (0, 1, and 2), and executes the commands for each. It’s mostly the syntax that was a bother. You have to put the numbers in parenthesis, otherwise it just doesn’t work. You also separate the numbers with two periods.

We’ll then take a look at one of the associated commands.

<tr>
        <td></td>

This simply says that for each iteration (or cycle, the word I’ve used in my other posts so far), the item in the array associated with the value of the index variable will be used. Remember, the first item is associated with 0, the second item with 1, etc… in the Trimester list, the items are all 1. The other commands are similar to this one, except for the Week and Description lists instead.

Unlike python, we have to tell liquid where the for loop is going to end. Because apparently the tabbing scheme doesn’t cut it. That’s what endfor is for.

I guess there’s one last thing… I need to tell you where I got all this info from.

Yes, the second one is someone else’s submission. I personally think looking at someone else’s code is a bit of a grey area in terms of academic honesty, and straight up copying it is prohibited. But then again the syntax is a bit rigid, so there’s not an easy way to make code without the syntax matching up. So to make myself feel a bit better about using someone’s submission as a reference, you can see there are a few differences (this student referenced some variables placed in _config.yml… which I don’t see as a suitable place to store variables, so I placed them in the related code instead). Gotta give credit where credit is due. Because honestly, this is all the example code I got. Mr. Yeung told me the more important part of the class is understanding how the code works, so if you think the explanation above was fair, then I guess I might be doing this right.

Week 4 Collaboration Notes

Video 1: Why collaborate?

Facebook

Facebook Visit: a coworker’s son got the instructor in, and there are many meeting rooms and space to get together and collaborate.

Facebook owns social media entities, which requires collaboration

Main Point: Collaboration –> computing innovation reflecting diversity of talents of designers

Video Games

Super Mario Brothers (2 and 3)

SMB2 was a reskin of SMB.

Kensuke Tanabe made a vertical game with a collaborative element to the level design. Shigeru Miyamoto wanted horizontal game. They had a conflict.

Main point: Collaboration with diverse perspectives avoids bias

Practice

What are the benefits of collaborating with peers?

Answer: Effective collaboration produces computing innovations reflecting diversity of talents/perspectives of the designers

Key takeaways

Collaboration skills

Video 2: How to collaborate

Pair Programming
Think-Pair-Share
  1. Student attempts problem individually
  2. Student shares ideas with a partner
  3. Students share results with class (or with a larger group)

Analogy: Play charades

Leaving Comments in the Code
  1. Allows to communicate to other people what the code does
  2. Makes sure you don’t forget what your code does
  3. Allows to cite code segments from other sources
  4. Cite media (audio/video) used from other sources
  5. Mark which partner did what code
  6. Clarify how the code works

If comments are not possible in the programming language, use a PDF or word editor

Tools for Collaboration

DISCLAIMER: Only collaborate with a partner for the Create Performance Task (not anyone else)

Key Takeaways

Consulting with other people is important for diverse perspectives

Use online tools

Proof I did the MCQ

Week 5 JavaScript Notes

there are “number” instead of integer

There are still functions and such, though they are defined with function instead

JSON (JavaScript Object Notation) allows for transmission of data (similar to Python lists and dictionaries) between files. A function can be used to put input into the data. The JSON makes the data a string

function Person(name, ghID, classOf) {
    this.name = name;
    this.ghID = ghID;
    this.classOf = classOf;
    this.role = "";
}

Can make an array using a variable like in Python, though making an array is significantly easier:

var var_name = [
        new OBJECT("Param1", "Param2", "Param3", "2022")
]

Output may not always be need, so use _toHTML. Use

var style = (
        :display:inline-block;" +
        "border: 2 px solid grey;" +

)

In for loops, the iteration variable must be defined with var

for (var row of compsci.classroom) {
        associated commands
        }

Week 5 Program Purpose/Function Notes

Video 1: Purpose of Computing Innovations

Computing Innovations Ex: apps (games, social media), devices (computers, smart phones), systems (E-mail, cloud services)

Guiding Questions
Practice: Social media
Practice: E-commerce
Practice: Digital Assistant Device

Video 2: Input/Output

Programs accept many forms of input

  1. Tactile (touch using keyboard, touchpads, mice)
  2. audio (voice-controlled for digital assistant devices)
  3. Visual
  4. text (including numerical values)
Types of input devices accept
How do programs receive input:
What input accomplishes
How program knows what to do by events

Program code not necessarily executed in order, they are executed as called

Video 3: Program/Code Function

Programs
Example code
min <-- aList[1]
FOR EACH item IN aList
{
        IF (item < min)
        {
                min <-- item
        }
}
DISPLAY ("The minimum number is in the list is")
DISPLAY (min)

Arrow is an assignment, value of aList[1] assigned to min list groups together data

FOR EACH item IN aList: looks through each number, repeat associated commands

If the item is less than the minimum, then the item is the new minimum. After done for all elements, print the text

This program finds the minimum value in a list

Describing code segments

Week 5 Agile Methodology Notes

Vocabulary:

Term Definition
Standup Meeting Weekly planning meeting where the scrum team plans and assigns tasks, sets pacing, and sets priorities
Scrum Master Essentially a team manager. Responsible for managing the Scrum Board and assigning tasks
Scrum Board An organization table in GitHub Projects containing a list of tasks to be completed, common to-dos, and completed tasks. Helps with team organization
DevOps The main student responsible for deploying finished code to AWS, making sure that the team doesn’t push to GitHub at the same time, etc.
Frontend Developer Student that works with applications that users see; for example, the FastPages server or the group Flask server
Backend Developer Student working with code and server-side functions (including Python) which are not visible in a web browser
Sprint The period of time a team plans, completes, and deploys a project. Usually 2 weeks.
7 Important Skills
  1. Creativity: Problem-Solving skills (including improvising, using skills outside the usual curriculum). Making connections/inferences
  2. Critical thinking: thinking of ways to improve projects or thinking of potential pitfalls ahead of time. Aggressive problem-solving methodology
  3. Communication: Addressing people with appropriate levels of vocabulary and taking feedback without offense
  4. Leadership: Leaders do task delegation, teach group members about important concepts, and are always the ones to resolve conflict.
  5. Teamwork: The primary component is trust in the other individuals. Also includes completing tasks while meeting checkpoints, all while exercising time management skills
  6. Research: Does include searching the Internet, but also asking for help from team members or teachers
  7. Technical understanding: Includes being knowledgeable about the software, and also being willing to learn about coding and troubleshooting.

Week 6 Program Design/Development Notes

Video 1

Program Development

Video 2

##### Practice

Video 3: Documentation

How to document while programs

Examples
# this is a comment

// this is a comment
/* this is also a comment */
/** this is documentation comment */

<!--This is a comment-->

(* THIS IS A COMMENT *)

Week 7 Troubleshooting Video Notes

Video 1: Identifying errors

4 types

  1. Logic error: mistake in algorithm causing unexpected behavior
  2. Syntax error: rules of language not followed
  3. Run-Time: Occurs during execution, special to each program languages
  4. Overflow: Comptuer handles a number outside defined range of values

Errors are common enough to be part of the process. Programmers identify the type of errors.

grade ← INPUT("Enter a grade")
IF (grade > 89) {
        DISPLAY ("A")}
IF (grade > 79) {
        DISPLAY ("B")}
IF (grade > 69) {
        DISPLAY ("C")}
IF (grade > 59) {
        DISPLAY ("D")}
ELSE {
        DISPLAY ("F")}

grade ← INPUT("Enter a grade")
IF (grade > 89 {  # needs closed parenthesis after 89
        DISPLAY ("A")}
IF (grade > 79) {
        DISPLAY ("B") #needs closed curly brace
IF (grade > 69) {
        DISPLAY ("C)} #needs close quotes after C
IF (grade > 59) {
        DISPLAY ("D")}
ELSE #needs open curly brace
        DISPLAY ("F")}

grade ← INPUT("Enter a grade")
IF (grade > 89) {
        DISPLAY ("A")}
IF (grade > 79) {
        DISPLAY ("B")}
IF (grade > 69) {
        DISPLAY ("C")}
IF (grade > 59) {
        DISPLAY ("D")}
ELSE {
        DISPLAY ("F")}

Video 2: Correcting Errors

Effective ways to correct errors:

Correcting syntax errors: Most Integrated Development Environments display info about syntax error (the line with the syntax error)

Correcting logic errors (program runs but not as intended)

grade ← INPUT("Enter a grade")
IF (grade > 89) {
        DISPLAY ("A")}
IF (grade > 79) {
        DISPLAY ("B")}
IF (grade > 69) {
        DISPLAY ("C")}
IF (grade > 59) {
        DISPLAY ("D")}
ELSE {
        DISPLAY ("F")}

grade ← INPUT("Enter a grade")
IF (grade ≥ 89.5) {
        DISPLAY ("A")}
ELSE {
        IF (grade ≥ 79.5) {
                DISPLAY ("B")}
        ELSE {
                IF (grade ≥ 69.5) {
                       DISPLAY ("C")}
                ELSE {
                        IF (grade ≥ 59.5) {
                                DISPLAY ("D")}   
                        ELSE {
                                DISPLAY ("F")}
} } }

list ← [2, -3, 5, 1, 10, 8]
min ← list[1]
index ← 1
REPEAT (LENGTH(list) - 1) TIMES{
        IF (list[index] < list[index + 1]) {
                min ← list[index]
        }
        index ← index + 1
}
DISPLAY(min)

Table copied from video

min Index list[index] list[index + 1]
2 1 2 -3
2 2 -3 5
-3 3 5 1
-3 4 1 10
1 5 10 8
1      
Video 3: Identifying inputs and expected outputs

Example

list ← ?
min ← list[1]
index ← 1
REPEAT (LENGTH(list) - 1) TIMES {
        IF (list[index] < list[index + 1]) {
                min ← list[index]
        }
        index ← index + 1
}
DISPLAY(min)

The following lists will show the algorithm doesn’t work as intended:

temp ← INPUT("Enter the temperature")
IF (temp < 32) {
        DISPLAY ("Watch out for snow!")}
ELSE {
        IF (temp > 90) {
                DISPLAY ("Turn on AC!")}
        ELSE {
                DISPLAY ("Enjoy the weather.")}
                }

Influence of errors on program development

MyAP MCQ 1.4

This will be published the day of review to prevent compromise of integrity. If this is published beforehand, this is unintentional.

1) score and penalty are positive integers. penalty is supposed to subtract from score, but score can’t be negative.

IF(score - penalty < 0)
{
        score ← score - penalty
}
ELSE
{
        score ← 0
}

What change can be made so the code segment works?

2) The procedure needs to return true if a list has only positive numbers, or else it returns false.

PROCEDURE allPositive(mylist)
{
        index ← 1
        len ← LENGTH(myList)
        REPEAT len TIMES
        {
                IF(myList[index] > 0)
                {
                        RETURN(true)
                }
                index ← index + 1
        }
        RETURN(false)
}

For which contents of myList doesthe procedure not return the result as intended?

3) Homework assignment has 10 questions

Number answers correct Grade
At least 9 Check Plus
7-8 Check
Less than 7 Check minus

numCorrect is the number of correct answers. The code is supposed to display the grade

Which values of numCorrect makes the code fail to display intended grade?

Week 8 Topic 4.1: The Internet

Video 1: How computing devices interact

Vocabulary

Term Definition
Path sequence of directly connected computing devices beginning at sender and ending at receiver
Route Process of finding a path from sender to receiver
Computer System Group of computing devices/programs working towards common purpose
Computer Device A physical artifact that can run a program (ex: computers, tablets, servers, routers, smart sensors)
Bandwidth Maximum amount of data that can be sent in a fixed amount of time
Computer Network Group of interconnected computing devices capable of sending/receiving data

Video 2: Internet VS World Wide Web, Protocols, etc.

Packet Review

Protocols written by Internet Engineering Task Force (IETF)

TCP/IP Model

Scalability

The Process

Quiz!!!

3.14-3.15 Notes

3.14: Libraries
Topic 3.15 Video 1: Random Values

Example 1: What is the possible range of results?

answ1 ← RANDOM(0, 2)
answ2 ← RANDOM(1, 5)
answ3 ← answ1 + answ2

answ1 has minimum value 0; answ2 has minimum value of 1. Therefore the bottom of the range will be 1.

answ2 has maximum value 2; answ2 has maximum value of 5. Therefore the top of the range will be 5 + 2 = 7.

Therefore, the range of results is all integers in [1, 7]