Merge branch 'main' of https://github.com/cis1951/website

cis1951 · Feb 22, 2024 · 65d78ff · 65d78ff
2 parents 9c07675 + f652609
commit 65d78ff
Show file tree

Hide file tree

Showing 26 changed files with 1,080 additions and 52 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -22,12 +22,12 @@ export default function RootLayout({
         <html lang="en">
             <body>
                 <MenuContextProvider>
-                    <div className="md:container mx-auto md:px-8 md:py-16">
-                        <h1 className="hidden md:block md:text-8xl w-fit font-bold text-transparent bg-clip-text bg-gradient-to-br from-cyan-600 to-purple-600 dark:from-cyan-500 dark:to-purple-500">
+                    <div className="md:container mx-auto md:px-8 md:py-16 print:md:py-8">
+                        <h1 className="hidden md:block print:block md:text-8xl print:text-4xl w-fit font-bold text-transparent bg-clip-text bg-gradient-to-br from-cyan-600 to-purple-600 dark:from-cyan-500 dark:to-purple-500">
                             <Link href="/">CIS 1951</Link>
                         </h1>
                         <div className="md:mt-8 md:flex flex-nowrap gap-4">
-                            <div className="flex flex-col items-center bg-neutral-50 dark:bg-neutral-800 md:bg-transparent dark:md:bg-transparent pt-4 md:pt-0">
+                            <div className="flex flex-col items-center bg-neutral-50 dark:bg-neutral-800 md:bg-transparent dark:md:bg-transparent pt-4 md:pt-0 print:hidden">
                                 <h1 className="text-center mb-3 md:hidden text-3xl w-fit font-bold text-transparent bg-clip-text bg-gradient-to-br from-cyan-700 to-purple-700 dark:from-cyan-400 dark:to-purple-400">CIS 1951</h1>
                                 <div className="px-4 md:px-0 w-full"><Menu /></div>
                                 <div className="w-full rounded-t-2xl h-4 bg-white dark:bg-black mt-4 border-t border-neutral-200 dark:border-neutral-700 md:hidden" />

diff --git a/components/Card.tsx b/components/Card.tsx
@@ -7,7 +7,7 @@ export type CardProps = {
 }
 
 export function Card({ title, children, margin = false }: CardProps) {
-    let className = "rounded-xl p-4 bg-neutral-50 border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"
+    let className = "rounded-xl p-4 bg-neutral-50 border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 print:p-0 print:border-0 print:bg-transparent"
     if (margin) className += " mb-4"
 
     return <div className={className}>

diff --git a/components/Prose.tsx b/components/Prose.tsx
@@ -5,7 +5,7 @@ export type ProseProps = {
 }
 
 export function Prose({ children }: ProseProps) {
-    return <div className="prose prose-neutral dark:prose-invert max-w-none prose-h1:mb-4 prose-h2:mt-6 prose-h2:mb-2 prose-p:my-2 prose-pre:my-2 prose-pre:border prose-pre:border-transparent prose-pre:dark:border-white/10 prose-blockquote:my-2">
+    return <div className="prose prose-neutral dark:prose-invert max-w-none prose-h1:mb-4 prose-h2:mt-6 prose-h2:mb-2 prose-p:my-2 prose-pre:my-2 prose-pre:border prose-pre:border-transparent prose-pre:max-w-full prose-pre:dark:border-white/10 prose-blockquote:my-2 prose-ul:my-2">
         {children}
     </div>
 }
diff --git a/components/StaffGrid.tsx b/components/StaffGrid.tsx
@@ -8,6 +8,7 @@ export type StaffMemberProps = {
     github?: string
     website?: string
     avatar?: string
+    oh?: string
 }
 
 function StaffMember({
@@ -20,6 +21,7 @@ function StaffMember({
     github,
     website,
     avatar,
+    oh,
 }: StaffMemberProps) {
     const links = [
         github && {
@@ -44,6 +46,7 @@ function StaffMember({
             {flavorText && <div className="italic opacity-60 text-sm">{flavorText}</div>}
             <div className="text-sm mt-2"><span className="font-medium">Email</span>: <span className="font-mono">{pennkey}@{school}</span></div>
             <div className="text-sm"><span className="font-medium">Pronouns</span>: {pronouns}</div>
+            {oh && <div className="text-sm"><span className="font-medium">OH</span>: {oh}</div>}
             {links.length > 0 && <div className="text-sm flex gap-2">
                 {links.map(({ text, href }, index) => <a key={index} href={href} className="link" target="_blank" rel="noopener noreferrer">{text}</a>)}
             </div>}

diff --git a/components/UpcomingAssignments.tsx b/components/UpcomingAssignments.tsx
@@ -3,8 +3,8 @@
 import { useState } from "react"
 import { ScheduleTable, getSchedule } from "./Schedule"
 
-const threshold = 3 * 7 * 24 * 60 * 60 * 1000 // 3 weeks
-const thresholdText = "3 weeks"
+const threshold = 32 * 24 * 60 * 60 * 1000 - 1 // 31 days
+const thresholdText = "31 days"
 
 const schedule = getSchedule(null)
 
@@ -23,4 +23,4 @@ export function UpcomingAssignments() {
         <div className="mb-4">{upcoming.length} {upcoming.length === 1 ? "assignment is" : "assignments are"} due in the next {thresholdText}:</div>
         <ScheduleTable items={upcoming} />
     </>
-}
+}
diff --git a/components/mdx.tsx b/components/mdx.tsx
@@ -4,6 +4,7 @@ import { Card } from "./Card";
 import { Prose } from "./Prose";
 import { StaffGrid } from "./StaffGrid";
 import { UpcomingAssignments } from "./UpcomingAssignments";
+import { FormattedDate } from "./FormattedDate";
 
 export const mdxComponents: MDXComponents = {
     a: ({ href, ...props }) => {
@@ -17,6 +18,7 @@ export const mdxComponents: MDXComponents = {
         }
     },
     Card: Card,
+    FormattedDate: FormattedDate,
     Prose: Prose,
     StaffGrid: StaffGrid,
     UpcomingAssignments: UpcomingAssignments,

diff --git a/content/homework/hw0.mdx b/content/homework/hw0.mdx
@@ -1,8 +1,121 @@
 ---
-title: "HW0: Xcode Setup"
-isReleased: false
-releaseDate: 2024-01-18T19:00:00-05:00
+title: "HW0: Environment Setup"
+isReleased: true
 dueDate: 2024-01-29T23:59:00-05:00
 ---
 
-Just send us a screenshot of Xcode working
+[Submit this assignment on Canvas.](https://canvas.upenn.edu/courses/1774063/assignments/12057154)
+
+Authors: [Jerry Ye](https://github.com/jerry1ye10), [Yuying Fan](https://github.com/fyy26)
+
+Reviewers: [Anthony Li](https://github.com/anli5005), [Jordan Hochman](https://github.com/jhawk0224)
+
+Please leave feedback by posting on Ed or contacting the [course staff](/).
+
+**Expected Duration:** 10-15 minutes of engagement. 1+ hours of installing & updating software if required.
+
+**Deadline:** <FormattedDate date={new Date("2024-01-29T23:59:00-05:00")} format="EEEE, M/d @ p" />
+
+- - - -
+
+## Objectives
+
+* Learn some vocabulary.
+* Ensure your Xcode is set up correctly.
+* Make sure you can run apps using the virtual iPhone simulator.
+* Meet the _Playground_ — a “scratch pad“ to quickly experiment with Swift
+
+## Vocabs
+
+* **iPhone** — a smartphone produced by Apple that runs the **iOS operating system**.
+* **iOS** — the operating system that runs all iPhones and iPads. It’s responsible for downloading and running apps,
+  making calls, taking photos, and pretty much everything else.
+* **Swift** — Apple’s modern programming language. It is the language used to make apps for iOS, watchOS, MacOS, and all
+  other Apple platforms. The language is relatively new, so new versions (with different syntax!) come out frequently.
+  For this reason, you should search **Swift 5** (the current version) whenever searching StackOverflow or Google.
+* **Swift 5** — the newest version of Swift, which we’ll use in this class.
+* **UIKit** — Apple’s original user interface development kit, used on Apple platforms like iOS. UI development kits are
+  how you **interact** on the code level with iOS. We won't focus on UIKit in this class, but we'll cover it briefly
+  later in the semester.
+* **SwiftUI** — Apple's new user interface toolkit. It uses a declarative syntax, allowing developers to describe UI
+  elements and behavior succinctly. SwiftUI is known for its simplicity and efficiency compared to UIKit, with live
+  preview features in Xcode. We’ll spend most of this class learning SwiftUI development.
+* **Xcode** — an IDE (integrated development environment) provided by Apple. This is the iOS equivalent of Java’s
+  Eclipse/IntelliJ editor. It allows you to write and compile Swift, and also provides a lot of niceties
+  (autocompletion! type checking!).
+* **Xcode Simulator** — a full iPhone simulator built into Xcode. We’ll use this to quickly test iOS apps without
+  needing an actual iPhone (although if you have an iPhone, you can use that too!).
+
+## Install Xcode and Simulators
+
+1. Make sure you are running **macOS Ventura 13.5 or higher.** If you are not, update your OS first. This version is
+   required for the version of Xcode we use.
+2. Make sure you have at least **30-40 GB free** on the disk. This is the typical space taken up by Xcode with its dev
+   dependencies.
+3. Go to the Mac App Store and install the latest version of Xcode available. If you have Xcode already, make sure it is
+   at least updated to one of the version 15's.
+4. Launch Xcode and accept any permission dialogues. You may need to enter your computer password.
+5. When you are asked to "Select the platforms you would like to develop for," select "iOS". The others are optional for
+   this class, and you can always download them
+   later when needed. Again, make sure you have sufficient storage for the additional components.
+
+Here is a [video](https://www.youtube.com/watch?v=LBYj-xVvM1k) walk-through of the installation. It also covers topics
+including connecting your iPhone with Xcode and running apps from Xcode. App 0 only requires the steps listed above.
+
+Note: If you run into any issues throughout the installation step, make sure
+you've [updated your OS](https://support.apple.com/guide/mac-help/get-macos-updates-mchlpx1065/mac) and have enough
+storage available to download XCode. The installation takes a long time, so let it sit for at least a few hours before
+asking for help.
+
+If you made it this far, your environment should be set up for the semester. Next, we’ll get started with Xcode
+playgrounds.
+
+## Xcode Playgrounds
+
+> “Playground - noun: a place where people can play”
+
+Playgrounds are miniature testing environments for the Swift language. They allow you to quickly try out code and see
+results — without making a full app! Some of our tutorials will use Playgrounds.
+
+#### Do the following:
+
+- Make a new folder for this course. Make sub-folders named `tutorials` and `apps`.
+- Launch Xcode.
+- Click on File > New > Playground.
+- Pick "iOS" and "Blank" for the template.
+- Name the new playground `app0_lastname_firstname` and save it in your new `apps` folder.
+
+Great! You should now see a Playgrounds file with some boilerplate code:
+
+<img src="/~cis1951/images/playground_parts.png" alt="labeled playground parts"/>
+
+1. This is the code editor. Code goes here!
+2. This is a “status panel” — a feature unique to Playgrounds. When you initialize a variable, it will show you the
+   value of that variable. This will also show you useful debugging info, like how many times each line of code is run.
+   This is a feature of Playgrounds that we won't have when developing full apps.
+3. This is the **play** button to compile and run code.
+4. This is the output console — errors and print statements are sent here.
+
+#### Do the following:
+
+- Erase the line beginning with `var greeting = "Hello...`
+- Write a comment: `// App 0`
+- Make constants for your name, penn id (number), and favorite emoji (replace the \<...\>):
+
+```swift
+let name = "<YOUR NAME>"
+let pennId = <PENNID>
+let emoji = "<YOUR EMOJI>"
+```
+
+- Add a line to print out your constants:
+
+```swift
+print("Hello World! My name is \(name) and my pennId is \(pennId) \(emoji)")
+```
+
+- Click the play button to compile and run.
+
+Congrats! You just ran your first line of Swift 🎉🎉🎉
+
+**DON’T FORGET:** [Submit `app0_lastname_firstname.playground` on Canvas](https://canvas.upenn.edu/courses/1774063/assignments/12057154) by **Monday, 1/29 @11:59 PM**.