Session recording
Let’s meet JavaScript
We’ll spend the first half of class today getting acquainted with JS:
And an addendum to our previous discussion on DevTools, The Console:
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:
-
Briefly talk JSON, for JavaScript Object Notation
- The demo uses our example channel—which you can see as JSON here
- Changes made in Are.na will show up in the JSON pretty quickly
-
Simple
index.html- There’s almost nothing there! All of our content will come from the JSON
- These are just the containers where we will insert our content
- “IRL” you would want more content in the file itself, for search indexing
-
On to
arena.js- Talk about these arrow functions!
- Using
if/elseconditional logic to sift our block types - And template literals/strings, combining JS and text
- Call out
audioandvideoexamples, show in Chrome/Safari - For the adventurous, more info on the fetch API
-
Let’s “roll our own”
console.log()the JSON response, walk the object- Rough out a new block/content type from the data
- Inspect a rendered page, connecting the dots
- If we have time, add another insertion point for a “filtered” list
For next week
-
Make sure your channel covers all the Are.na block types (other than ePUBs), if it doesn’t already. This is a multimedia project!
-
Pull down the template repo. Play around with it, study it, then incorporate/adapt it into your own project.
-
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:
-
We will be reviewing your work in class next week—so make sure everything is working and be prepared to discuss your concept!