Sketch/code review
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:
- Talk briefly about JSON, for JavaScript Object Notation
- 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
-
…glance at
arena.js- 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
<template>elements - We use
classfor insertion points, andidfor 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
arena.jslocally - Add it to the
<head> - Connect to someone’s channel with the special link
- Build out a couple
<template>elements - Add the insertion point classes for where they render
- Bask in templated glory
-
And if we have time, we’ll enliven it with JSCreate a new JS file and add it to the<head>Add another image to a<template>, and hide it with CSSWatch for clicks on images, adding a class on their<figure>Use this class to show the other image, as an overlay
This repo is intended to provide you the Are.na JavaScript and show/
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: