We are going to start today off again with Project 4: Links reviews—looking both at your revised/continued sketching and your initial coding. We’ll break up into (new) per-table groups:
Group 1: Azra, Shanshan, Caroline, Amaya
Group 2: Abhishek, Kinjal, Kendall, Tanvi
Group 3: Fahila, Sarah, Hamza, Ina
Group 4: Vasu, Madhura, Sushanto, Lucine
Group 5: Vidushi, Shivi, Bobby, Chi
Group 6: Sanjana, Dusha, Andre, Myriam
Group 7: Dhruv, Dayna, Mariia, Giselle
Group 8: Sandra, Jocelyn, Keren
Present your work to each other, as is custom. Use Slack’s huddles to share your screen, so you can present your Sketches and in-progress code. You will again have about 40 minutes with just your group, and each group will have about 10 minutes with us.
We want to emphasize (again) that this should be productive time going through your project with your peers. We expect everyone to be following along with each other’s work, not off in their own (or something else).
Let’s see if we can actually get around to everyone by 10:15ish.
We will take our 10 minutes or so here, when we’ve made the rounds.
The Are.na API
For our “back nine” today, we’re going to be doing a demo/
Here is our agenda to go through it:
- The project uses our demo channel—which you can see as JSON here
- Changes in Are.na will show up in the JSON… pretty quickly
By default, browsers don’t “speak” JSON—install an extension for readability
- Look, modern arrow functions!
- And template literals/strings, combining JS and text
showRelativeDateas an example of munging data
- For the adventurous, the fetch API
Go through the HTML
- It is heavily commented—read these when you look at the example
- Check out all those
- We use
classfor insertion points, and
idfor our template targeting
- You don’t have to use all the example data! Shape it to your design
- Inspect a rendered page, connecting the dots
Let’s “roll our own”
- Start a blank repo (you will use your in-progress code)
- Pull in
- Add it to the
- Connect to someone’s channel with the special link
- Build out a couple
- Add the insertion point classes for where they render
- Bask in templated glory
And if we have time, we’ll enliven it with JS Create a new JS file and add it to the
Add another image to a
<template>, and hide it with CSS
Watch for clicks on images, adding a class on their
Use this class to show the other image, as an overlay
document examples of using it. However you should not start your project from this repo—instead pull in just the code you need, referencing this work. We will know.
For next week
Again, refine your design (and now code) with the feedback from your group and from us. We expect to see continued evolution!
Pull down the template repo. Play around with it, study it, then incorporate it.
You will use this to complete the next phase of your project, Are.na as an API—based on the example code and demo we went through today. Remove the static/hard-coded blocks from your repo—all the content should now be coming from the Are.na channel. Continue iterating on your design, accommodating and adjusting to the live data.
Make sure we have the link to your live project, in-progress: