recode-fa23

An Apple II computer with external disk drives is set among a glowing-pink cat, who is lying down on the left, and a multi-colored succulent in a black pot on the right. There is a neon pink grid of perspective squares comprising the floor beneath and low-poly digitized mountain ranges in the background with neon blue trim lines. The words Re:Code are centered at the top in a large white font that is in a stylized digital form.

Course Outline

Fall 2023

Introduction - Whuuuut(s)?
Module 1 - Foundations (HTML / CSS)
Module 2 - Vanilla & Asynchronous Javascript
Module 3 - Working with External Libraries*
Module 4 - Working with Graphics & Pixels*
Module 5 - Coding with Generative AI
Module 6 - Developing Locally
Module 7 - Servers
Module 8 - Getting Connected with Sockets
Module 9 - Progressive Web Apps
Module 10 - Git and Github

Note: * indicates a module that last two weeks.

Introduction

Welcome, everyone, to the class! Let’s first introduce ourselves and talk about our interests. Then we will go over the syllabus, course outline, how to use the class website, how to contact me and Lucia, how to book drop-in hours, etc. We’ll also discuss the ITP/IMA Code of Conduct.

📕 Reading - due before class on Thu Sep 7th: -

1) Please fill out this short questionnaire so we can get to know you a little better.
⏱ Approx. time to complete: 5 minutes

2) Read the Wikipedia page on net.art and share anything you find interesting, inspiring, offensive, or otherwise thought-provoking or worthy of discussion among the class. Put your thoughts in this Google Doc.
⏱ Approx. time to complete: 40 minutes

✅ Total time: 45 minutes

Module 1 - Foundations (HTML / CSS)

CLASS NOTES have moved!

Discussion topics:

HTML

HTML stands for Hyper Text Markup Langauge and it is composed of:

In-class exercise:

1) Download a text editor like VS Code.

2) Using the HTML boilerplate page as a starting point, quickly work up an About Me page. The page should include: - Your name (your name perhaps or a pithy quip about yourself - Gen Z introvert on the verge of complete public meltdown🍦🤸🏼‍♂️✌️) - Hometown(s) - Educational background - A short story about what you did this summer, or perhaps a trip you recently took - Previous Occupation(s) - Hobbies - Interests - Pictures
- Videos 3) Do not worry about making the page “look good”. We are just making a list right now. We will use CSS to change the style later.

📕 Reading - due before class on Tue Sep 12th Thu Sep 14th:

Read Emma Rae Norton’s hand coding round robin workshop guide for inspiration. There is also some interesting ‘not required’ reading. The HTML code for the workshop page can be found here.

It’s ok if there are things you don’t understand on the page. Try to Google them, reference the W3 Schools site, or just make a note of your questions and book a drop-in appointment or pop up a hand in class!

The code is written in such a way as to be more easily understood and read by humans. There is a intentional connection left bare between the code and the output, as if the author is letting you into the art studio to watch them paint - quite a different feeling from when you inspect the source of any modern-day sites which obscure much of the code, often by design.

Lastly, if you’re not familiar with School For Poetic Computation (SFPC), check them out! They regularly do shows of student work which are always inspiring and thought-provoking. Lots of ITP/IMA alums are involved there as well.

⏱ Approx. time to complete: 45 minutes to 1 hour

CSS

CSS stands for Cascading Style Sheets.

An image of the CSS Box Model as seen in the Chrome browser's inspector window - a number of concentric rectangles of varying colors, labeled from the outside moving inwards: margin, border, padding, content.

✔️ In-Class Exercise

  1. Go to Neocities.org and create an account.
  2. Using the interface, create a new folder called “01-foundations” and navigate to it. This is where you will upload Assignment 1.
  3. Upload your about-me.html page inside of this folder or whatever you have called your file. You can also experiment uploading other pages and file types as well.

    This is how you will turn in your assignment link so get familiar with how to navigate these pages. Later, we will move to using Github Desktop and Github Pages.

📌 Assignment 1 📌 - due before class on Tue Sep 19th:

Hand-code your own HTML web page and publish it Neocities. Here are some types of pages that you could choose for inspiration:

Feel free to experiment and try some different things out. I’d like to see that you took the time to explore. Also, take a look at some of the student work from the Emma Rae Norton’s hand-coding-round-robin archive and see what kinds of things might be fun to try like, for example, the <marquee> tag, playing with transform, or getting completely wacky with animation: rotate 1s alternate infinite; 😅…

Here’s a handy HTML / CSS Cheat Sheet.

⏱ Approx. time to complete: 3 hours
⏩ Submit the Neocities link to your assignment on this form.

Module 2 - 🍦 Vanilla & Asynchronous Javascript

CLASS NOTES

If HTML & CSS are the body and the clothing, Javascript makes us dance mmmmk 🤸🏼‍♂️

Some relevant Coding Train Videos:

📕 Reading #2 - TO DO before class on Thu Sep 28th:

We will be setting up Github accounts to turn in our classwork from here on out. Assignment 2 will be turned in and published as a Github Pages site. We will also be able to easily include Assignment 1 into this platform as well.

  1. Create a Github account. If you already have one, great.
  2. Download and install Github Desktop. If you are already familiar (and adept?) with Git, that’s fine too. Better yet, let me know!
  3. Post the link to your Github account page to this Google form under Reading 2. The format will be https://github.com/yourusername where yourusername is the user name you chose when you just signed up. For example, my link is https://github.com/billythemusical.

📌 Assignment 2 - API APP📌 - due before class on Thu Oct 5th:

Build your own interactive API app! You can pick from the list of app ideas below and make an interactive app that does the following:

  1. Takes user input of some kind - a button press, some text, location data, anything - be creative if you like!
  2. Sends that user input to the chosen API.
  3. Displays the results of the API to your user in a visually compelling manner.

Kudos/bonus points for sleek UI/UX or totally retro/expertly awkward designs. ◻️ // 👹

⏩ Once you’re done, commit your changes in Github Desktop and push your changes to Github. Then share the link to your private repo this form.

For now, this repo will be set to private so that your API keys are not exposed to the wider web. We will have set up your repositories to be shared with us instructors in the initial setup. Later work will be possible to use public repos and Github Pages.

⏱ Approx. time to complete: 4-6 hours

Module 3 - Working with External Libraries

Check in on Assignment 2

CLASS NOTES

Fun external libraries

Group Assignments

…for Reading 3 & Assignment 3

📕 Reading 3 📕 - due before EOD Fri Oct 13th at 11:59pm:

We will be working in randomly chosen groups for these Assignments. Pick an an open source library that you would like to use for Assignment 3 below and share the name of the library and CDN link in the “link to assignment” space on this Google form. As long as one of you turns in the form, it will count for all in the group.

For example, if I was using the Green Sock library, my answer would be “Green Sock Animation Library https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js”

Here are some you can choose from, but don’t feel limited to these!

📌 Assignment 3 - Working With External Libraries 📌 - due before class on Tue Oct 17th:

Now to spread your wings and fly out into the world of open source on your own! Only one person in your group needs to create the repo to turn in the assignment, but all should contribute to the work:

  1. Create a new repo called 03-external-libraries.
  2. Demonstrate your chosen library in action on a web page of your own creation.
  3. You must use at least three (3) separate methods from the documentation.
  4. Use the README.md section of your new repo to provide documentation as to why your group chose this library, what you like about it, why you find it useful, what problems you ran into. Screenshots of console errors are helpful!

Style this special page using this Markdown cheatsheet. We’ll be using the README page more now to document our work and process.

Submitting your work

When your group is done, remember to:
- save your work
- commit it
- and push the changes to Github using Github Desktop!

Turn in your group’s final repo link (or Github Pages link) on this Google form before class on Tuesday. Again, only one person in the group is required to do this. You will all receive the same grade for the assignment.

Module 4 - Working with Graphics & Pixels

📕 Reading 4 📕 - due before class Thu Oct 19th:

Watch this Zach Lieberman talk on his creative coding and art practice and write your response on this Google Doc.

⏱ Approx. time to complete: 40-45 minutes

More creative coding links if you like:
Takawo - Daily Coding Live Sessions #05 [ARTSCLOUD] (Closed Captions can be set to English in the Settings ⚙)

📌 Assignment 4 📌 - due before class on Tue Oct 24th:

📝 Print & Annotate Code Exercise

Submitting your work

Take a photo(s) of your printed and hand-annotated pages and upload them to new Github repo called 04-pixels and document your process in the README file. This can be a brief write up about:

Upload the link to your repo to this Google form before class on Tuesday.

Module 5 - Coding with Generative AI

Hello LLM’s, goodbye homework!

Issues

Basic Terms/Parameters

Strategies for Prompting

Best Practices

Share your own LLM or AI tips, tricks, and resources here.

📕 Reading 5 📕 - Intro Command Line due on Thursday, Oct 26th

Here is a helpful list of Basic Linux Commands for your reference as well.

Submitting your work

⏱ Approx. time to complete: 1.5 hours

Module 6 - Developing Locally

Node.js

📕 Reading 6 📕 - Due before class on Thu Nov 2nd

Create a Digital Ocean account - Referral Link. I’ll be loose on this one due to late notice.

Node.js (cont)

Setting up a remote computer, aka a “droplet”, with Digital Ocean - INSTRUCTIONS HERE

Tired of the look of Git Bash? Take a crack at customizing it!

📌 Assignment 6 📌, due before class on Thu Nov 9th Tue Nov 14th:

Get the Notify App that we built in class running on your Digital Ocean Droplet using pm2. Again, the instructions are all located here.

Let the app run in the background throughout your week and experiment with different scenarios like the following:

Submitting your work

⏱ Approx. time to complete: 5 hours

Here is some great work from last year’s class for inspiration:

Module 7 - Simple Web Servers

Servers

Day 2

Working with data

Day 3

📕 Reading 7 📕 - Due before class on Thu Nov 9th:

Read this MIT Tech Review Article on China limiting screen time for it’s youth and write your response on this Google Doc. Pay particular attention to the following topics and please share your thoughts generally:

📌 Assignment 7 📌 - Due before class on Tue Nov 21st:

Normal Business Hours Assignment

INSTRUCTIONS ARE HERE

Upload the link to your repo to this Google form

Module 8 - Getting Connected with Sockets

Real-time communication

Module 9 - Progressive Web Apps

CLASS NOTES
LINK TO CLASS RECORDING

Reference

📕 Reading 9 📕 - Due before class on Thu Dec 7th:

Begin the design process for your own Progressive Web App.

This reading assignment will be the first step for Assignment 9. You can turn anything you’ve worked on this term into an installable PWA. Or you can design something new you’ve been wanting to make.

Submit your idea on this form. You can indicate if you would like to work in a group and find a partner. Please let me know if you intend to work in a group.

📌 Assignment 9 📌 - Due before class on Thu Dec 14th:

Design your own PWA based on your ideas in the reading.

You can take a project you have done earlier in the semester and convert it to a PWA. Or you could design a new app! This could be a Weather App, a Timer App, a Socket Chat or ChatBot App, a Daily NASA Photos App, etc. You will want to document and reflect on your design process in the README file, including how your initial ideas from the reading assignment may have evolved over the course of the project.

If your app is just a front-end app, make sure the Github repo is set to “public.” This way a user can install the app just by visiting your repo’s Github pages site. If your app includes a backend component, make sure to include a link to the hosted app in your README, i.e. http://XX.XX.XX.XX:3000

In addition to the UI/UX design details you would like to include, the app must be satisfy the following technical criteria:

  1. The app must be installable on desktop and mobile.
  2. The app must have icons for desktop and mobile.

Here is some work from past semesters for inspiration:

Submitting your work

Upload your code to a new public repo on Github called “09-pwa” and share this link in this Google form. If you’re using both backend and front end code, make sure both are included in your repo with a link in the README to the hosted app on Digital Ocean (or wherever it is hosted).

Module 10 - Git and Github

CLASS NOTES

Basic Git commands

Remote-SSH in VS Code