This semester-long Harvard Extension School course introduces computing as an expressive medium. We prototype, exhibit, and critique interactive, computational stories, art, and games presented as web applications and physical prototypes. We use JavaScript as a unifying language for programmatically controlling and combining audio, video, graphics, text, sensors, and actuators in these projects. Libraries like Processing.js, D3.js, and Snap.svg help us create data-rich, interactive visualizations, and Tessel serves as the microcontroller platform for our physical computing work.
Session Descriptions (and slides )
- Farewell!
- Prepping a final presentation
- Objects, data, & circles
- Final presentations, stories, & slides
- Inputs, outputs, & Arduinos
- Inputs, outputs, & black boxes
- Workshopping your project
- Pairing, JavaScript, and CSS animations
- APIs, pomes, & pair programming
- Mock-ups, more pomes, and an intro
- Intro to pomes & personal projects
- Journals, code snippets, & /people cards
- The first session
13: Farewell!
Farewell!
For next session
- Please keep in touch!! 💌 And never hesitate to ask to meet up or chat…
12: Prepping a final presentation
sharing out your presentation in small groups • our last studio time!
For next session
- Email us a link to your presentation by midnight Tuesday.
- Email us up-to-date links to your journal and your
/people
card, if we haven't received them from you yet (we'll be in touch). - If you aren't presenting to the group Wednesday, email us to schedule a time to sit down and present to us as a small group.
- Email us to find a time to sit down and debug, brainstorm your presentation, or work through any other, remaining questions.
11: Objects, data, & circles
drawing circles • different ways of representing circles • pair programming infographics • studio time
For next session
- Come in with some version of a functional demo/presentation on Monday to share-out/test with a partner.
- Make sure we have up-to-date links to your journal and your /people card, if we haven't received them from you yet.
- Answer the usual questions for your project in your journal:
- What did you accomplish today?
- What do you aim to have done by next session?
- What can we (the teaching team) do to help?
- If you get stuck, submit a Code Snippet Request or get in touch on Slack if you have any trouble!
10: Final presentations, stories, & slides
exemplar final presentations • stories vs. demos • reveal.js • studio time
For next session
- Make sure the current state of your project(s) is posted online somewhere (e.g. using GitHub Pages) and make sure a link to it is posted on your journal. (Of course, we know the project isn't yet done! We want to make sure you have a workflow set up that will allow you to go live when you need to!)
- Post a first draft outline for your final presentation — in words, sketches, or skeletal slides. (Of course, we know the slides aren't yet done either!)
- Answer the usual questions for your project in your journal:
- What did you accomplish today?
- What do you aim to have done by next session?
- What can we (the teaching team) do to help?
- If you get stuck, submit a Code Snippet Request or get in touch on Slack if you have any trouble!
9: Inputs, outputs, & Arduinos
inputs & outputs • Arduino <> HTML • studio time
For next session
- Let us know if you'd like to meet up about your project! We want to make sure you feel good about where you end up in four weeks 🎉🎉🎉
- Post your code to your journal along with your black box diagram and any other notes or materials you used.
- Answer the usual questions in your journal:
- What did you accomplish today?
- What do you aim to have done by next session?
- What can we (the teaching team) do to help?
- If you get stuck, submit a Code Snippet Request or get in touch on Slack if you have any trouble!
8: Inputs, outputs, & black boxes
inputs & outputs • black boxes & flow-charts • an intro to physical computing • studio time
For next session
- Post your code to your journal along with your black box diagram and any other notes or materials you used.
- In addition, post some physical inputs you think might make for an interesting visualization using one of the sketches we looked at today.
- Also answer the usual questions in your journal:
- What did you accomplish today?
- What do you aim to have done by next session?
- What can we (the teaching team) do to help?
- If you get stuck, submit a Code Snippet Request or get in touch on Slack if you have any trouble!
7: Workshopping your project
brainstorming next questions • small-group workshopping • studio time
For next session
- Share out notes and next steps from your brainstorm today in your journal
- Also in your journal, answer:
- What did you accomplish today?
- What do you aim to have done by next session?
- What can we (the teaching team) do to help?
- If you get stuck, submit a Code Snippet Request or get in touch on Slack if you have any trouble!
6: Pairing, JavaScript, and CSS animations
small projects • a couple, HTML/CSS/JS effects • time for pair programming • studio time
For next session
- In your journal, answer these questions:
- What did you accomplish today?
- What do you aim to have done by next session?
- What can we (the teaching team) do to help
- Work to actually accomplish the goal you set for yourself.
- If you get stuck, submit a Code Snippet Request or get in touch on Slack if you have any trouble!
5: APIs, pomes, & pair programming
using the Flickr API, a technical walkthrough • sharing our project mock-ups • time for pair programming • studio time
For next session
- In your journal, answer these questions:
- What did you accomplish today?
- What do you aim to have done by next session?
- What can we (the teaching team) do to help
- Work to actually accomplish the goal you set for yourself.
- If you get stuck, submit a Code Snippet Request or get in touch on Slack if you have any trouble!
- Please read these pair programming articles before next session. Often people think pair programming will go more slowly than "just" doing it yourself. Often this is not true. We encourage you to reach out to friends and acquaintences in the class, through Slack if you'd like, to pair program over the break and weekend.
4: Mock-ups, more pomes, and an intro
talking about mock-ups, story maps, & specs • an intro to HTML, CSS, and JavaScript • setting up the pomes
project locally, and poking around in it • studio time for coding & spec-ing
For next session
- Post a mock-up (or story map or spec) and description of your personal project to your journal. If you aren't yet feeling generative, please get in touch with us to brainstorm! (We don't want you to work on something you think is lame!)
- Take a go at messing around with the
pomes
project, whether with the extensions we've suggested or by making it your own in your own way. - Submit a Code Snippet Request or get in touch on Slack if you have any trouble!
- If you want to get started with HTML, CSS, and JavaScript, you might check out the Tools & Materials page. We suggest starting with our own intro to and demo of the basics of HTML/CSS/JS. Then, we recommend Shay Howe's Learn to Code HTML & CSS and the online book series You Don't Know JS.
If you just want some more stuff to explore...
3: Intro to pomes & personal projects
looking at cool digital stuff • mocking up the pomes
project • thinking about design constraints and specifications • personal projects & mock-ups
For next session
- If you haven't already: Make sure your journal is live on GitHub pages, your
/people
card is posted there, and your machine has the course dependencies installed. - Before Wednesday's session: Begin thinking about the many different ways you can sketch and specify a project:
- James Buckhouse's "Story Map"
- Jason Fried's "Sketching with a Sharpie"
- Joel Spolsky's "Painless Functional Specifications" series
- Francis Cortez's "Personal Design Sprint #1", #2, and #3
- Alexander Cowan's "Your Best Agile User Story"
- Submit a Code Snippet Request or get in touch on Slack if you have any trouble!
- If you want to get started with HTML, CSS, and JavaScript, you might check out the Tools & Materials page. We suggest starting with our own intro to and demo of the basics of HTML/CSS/JS. Then, we recommend Shay Howe's Learn to Code HTML & CSS and the online book series You Don't Know JS.
If you just want some more stuff to explore...
2: Journals, code snippets, & /people cards
setting up our GitHub Pages journals • a little about git and GitHub • what are code snippets and how can you request them? • studio time for building our /people cards
For next session
- By Sunday evening: Post a link to a digital thing you love to your journal. Whether you think it's beautiful, clever, powerful, hilarious, etc.
- By Monday's session: Finish setting up a DGMD S-15 journal using GitHub pages. You can style them as little or much as you'd like. Here are some journals by last semester's participants.
- By Monday's session: Finish a first draft of your partner's /people card including at least their name, a new picture, and their GitHub username. Post it to your journal! You should also take a go at implementing the effect to represent them, looking at the people page on last semester's class site for some ideas or this library of basic effects for inspiration.
- By Monday's session: Finish setting up your local development environment by following these steps. If you run into trouble, don't stress (or stay up all night). We'll be available to make sure you're set up. We'll be using many of these tools Monday, so please reach out before then if you are having any trouble!
- Submit a Code Snippet Request or get in touch on Slack if you are having trouble with any of these steps!
- If you want to get started with HTML, CSS, and JavaScript, you might check out the Tools & Materials page and Shay Howe's Learn to Code HTML & CSS. We'll also be digging into our own intro to and demo of the basics of HTML/CSS/JS, which might be of particular use. </ol>
If you just want some more stuff to explore...
1: The first session
why do we code? • getting to know someone in the course • designing digital effects to representthem in a digital card in Codepen to live on the people page of our course site
For next session
- Make at least three sketches representing effects you'd like to add to your partner's card and have them choose one to represent them on the course website. We'll be posting them to a personal journal hosted on GitHub, which we'll ask you to use as your central place for keeping materials. If you'd like to get a headstart, check out these directions.
- We'll be using Slack (tour here) as our course chat room, which you can join here.
- Take a go at setting up up your local development environment by following these steps. If you run into trouble, don't stress (or stay up all night). We'll be available to make sure you're set up.
- Check out our /people card template and start transforming it to represent your partner. Make your own account,
fork
our sketch, and replace Kanye with your partner, adding a CSS or Javascript effect of your own. You can look at the people page on last semester's class site for some ideas or use this library of basic effects for inspiration. - If you want to get started with HTML, CSS, and JavaScript, you might check out the Tools & Materials page and Shay Howe's Learn to Code HTML & CSS. We'll also be digging into our own intro to and demo of the basics of HTML/CSS/JS, which might be of particular use.