Week 19

Session recording

Project reviews

We’ll be spending our first half today looking at your progress using Are.na as an API. Here are our groups:

1. Angelica, Dhruvil, Hannah, Kritika, Sabrina, Sachi

2. Bhroovi, Emily, Hao, JC, Wenny, Zil

3. Alexis, Kirsten, Rodrigo, Shaoran, Shaurya, Vicky

4. Cristina, Hana, Lucy, Rebecca, Vera, Xinyi, Sarah

Show us where things are at! As a reminder, when we are not at your table—use the time with your classmates. Go through your concept, design, and questions with each other! Work together on this; we don’t want to hear… silence.

You’ll see one of us each today—this will give us about 5 minutes with you each, all told. Let’s be efficient!

Demo time!

For the next part of your project, you’ll be Adding interactivity. We’ll be doing a run-through of some techniques you might use to do this. Here’s an agenda:

• Show more block information

  • Let’s use a new channel
  • Add a button to a block template
  • Create a function that listens for events on each of these buttons
  • When the button is pressed, add a class to its block
  • Use this class to show more information (description, lightbox, etc.)
  • Add an event listener on this new element to close/hide it

• Transition blocks in

  • Use Intersection Observer to fade in blocks as they enter the viewport
  • Adjust the rootMargin property, shifting when the block starts to fade in
  • Talk about prefers-reduced-motion in this context

• Filter blocks by type

  • We’ll probably run out of time, so let’s discuss this at a high-level
  • Could have buttons that add/remove classes that show/hide per-type
  • Also could separate pages with their own insertion points—either via separate arena.js, or conditionals around the insertion points

For next week

• As we said, we’re on to the next phase of your projects—Adding interactivity. First think about how you want someone to understand, navigate, and interact with your collection—and then interpret that through the tools JavaScript avails us.

  Update us with your progress—the form should work now, I swear:

  Assignment submission

• We’ll use the entirety of next week for reviews, and you’ll hear from both of us.

  So we expect a lot of progress between now and then! The following week is for refinement, not your catching up on your core functionality—get that in before we see you next, so we can respond to it.