Week 18, February 5

Let’s Meet JavaScript #

We’ll spend the first half of class today getting acquainted with JS:

An Intro to JavaScript

And an addendum to our previous discussion on DevTools, The Console:

DevTools (Web Inspector)

The Are.na API #

For our “back nine” today, we’re going to be doing a demo/workshop to get us plugged into Are.na. We’ve put together a demo repository with our example code, for today:

links

Here is our agenda to go through it:

1. Briefly talk JSON (for JavaScript Object Notation)

   • The demo uses our example channel we showed last week
   • You can see it in JSON form here, from the Are.na API
   • Browsers don’t display JSON nicely by default, but there are extensions ( Chrome / Safari / Firefox ) to make it easier to read
   • Changes made in Are.na will show up in the JSON in a few minutes

2. Simple, static index.html

   • There’s almost nothing there! All of our content will come from the JSON, turned into HTML
   • These are just the containers where we will insert our content
   • You’ll have your statically-coded text and example blocks
   • “IRL” you would want much more content in the file itself, for search indexing and faster performance

3. On to arena.js

   • Talk about these arrow functions!
   • Using if/else conditional logic to sift our block types
   • And template literals/strings, making DOM from your data
   • Call out audio and video examples, show in Chrome/Safari
   • For the adventurous, more info on the fetch API

4. Let’s “roll our own”

   • console.log() the whole JSON response, “walk” the object
   • Rough out a new block/content type (like images) 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, if it doesn’t already. This is a multi media project! The more, varied, and balanced blocks you have, the better it will be.

• Pull down the template repo. Play around with it, study it, then incorporate/adapt the arena.js into your own project.

• You will use this to complete the next phase of your project:

  Project 4 Are.na as an API

  Update your in-progress repo based on the example code and demo we went through today. Remove the static/hard-coded blocks from your project—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:

  Submission Form

• We will be reviewing your work in class next week—so make sure everything is working and be prepared to discuss your concept/design!