JavaScript is the lingua franca of the modern responsive web, and almost all the pages you interact with online use it in some form or other.  As with the other things we’re learning in this class, our aim is not to memorize every aspect of the language and become experts overnight, but to gain enough understanding of what it is and how it works so that we can ask the right questions when conceiving our own projects and can intelligently leverage the hard work of people who know these things much better than we do.  Thank heavens for JavaScript libraries!

We spent some time in class viewing some basic JavaScript examples in jsBin, and talked about using functions in the very useful and ubiquitous jQuery library to do fancy things like extract data from structured markup, even straight HTML. You can review those examples and play around with the code, and even save your own instances if you want to register and login at jsBin

 

---

Assignment

But we’re not just learning how to program here, we’re practicing Digital Humanities.  So let’s build something!

This week, we are going to use the beautiful TimelineJS framework to give the college archive’s Timeline of Carleton History a web 2.0 overhaul.  This timeline was created in 1991 for the college’s 125th anniversary celebration, and while the content is still great, the presentation could use an update as we near the 150th anniversary in 2016.  Archivist Tom Lamb has given us permission to use the timeline as our dataset, and we are going to build a new, dynamic JSified instance of it as our first group project.

The timeline is broken into five date ranges between 1866 and 2002.  I have set up the first one as an example, and it is each group’s task to replicate this work for your own date range by doing the following:

1. Go to the TimelineJS page and follow the 4 step instructions to Make a New Timeline
   • In Step 2, whoever downloads the Google template should share it with the other group members so that all may edit
   • In Step 4, copy the embed code and paste it into a new jsBin.  This is where you will work on your own date ranges for now, and we will combine them all together next week.
2. Once you are setup, delete the template data and move over your group’s data from the Timeline of Carleton History. The dates and captions should come over with an easy copy/paste, but then you’ll probably need to finesse the rest of the data a bit.
   • You might need to change the number format of the Date columns to a different date display or even Number > Plain Text to get them to display and order properly
   • All entries should have a brief headline that summarizes the text on that date’s card, which you’ll need to write
   • Where there are images on your page, click them to bring up the full resolution version in the fancybox viewer, then use your DevTools knowledge to find the image URL to paste in the appropriate Media column in the sheet
   • Where there are no images, see if you can insert a Google Map if appropriate.  Or search the Carleton Archives Digital Collections to find other appropriate photos or scanned documents
     • NB: All Media should have a Media Credit, which will usually be “Archives, Carleton College Gould Library“
   • Finally, explore what happens to the timeline when you use tags to categorize events.  I used buildings and people as two basic categories on my example

If you’re in doubt or stuck, post a comment, ask a question on your blog or (as a last resort) send an email and we’ll try to help each other out.

---

Resources

JavaScript

Julie Meloni has written several how-to guides for programming, and has very helpfully posted two gentle introductory lectures pitched at Digital Humanists on Slide Share.  We covered some of this material in class, but here are the full lectures to peruse at your leisure.

You can also continue your self-directed journey of discovery by taking some JavaScript courses at Codecademy and earning more badges for your profile.

TimelineJS

Beyond their own help docs, there are many video tutorials out there and walkthroughs of how to get your data up and running.  Google and explore.

One of the more useful step-by-step guides I’ve seen is this one by Lindsey Cook at Digitize Me, Captain.

If you find some good resources, share them in the comments or on your blog!