Category: Week 2: How it Works (Front End)

Posted on

2B: JavaScript 101

JavaScript logo

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!

In Class: Hacking with jsBin

To get the hang of how these three languages fit together we are going to explore some examples I set up in jsBin.  This code sharing site is a fantastic tool in the hacker’s toolbox, since it lets you copy and edit code in the cloud without having to invest in your own setup or FTP files to a server, view the output live, and then share all of it with others really easily.  We’ll be making a lot of use of jsBin in this class, so get used to the interface.

The first example is basic, and will let you test out what each of our three major client side languages does, and hack away to make modifications.

Go to http://jsbin.com/busimo/edit?output, follow the instructions, and start hacking.

The next example illustrates the power of the useful and ubiquitous jQuery library, which lets us do fancy things like extract data from structured markup, with a lot less code than straight JavaScript.  For this example, we’re trying to take the Carleton timeline information from this website and put it into a JS object (for a full description of this method see Dave Ward’s post).

Go to http://jsbin.com/zohawafinu/edit?html,js,output read the comments and try to figure out what’s going on.

 

Assignment

The assignment for this week is twofold:

First, make sure you have registered your domain and installed WordPress, and then spend some time setting up your personal website on your newly installed server. These are the most basic steps you should take to get your site looking like personalized rather than a generic WordPress blog.

  • Create an “About” page (not Post) to let the world know who you are
    • Write a brief bio paragraph about your background, what you are studying, your goals, etc. and post it to the site.  See mine at meDHieval.com for an example.
  • Get an API key for the Akismet plugin and activate it to block comment spam.
  • Choose a new theme to install and activate it
  • Add the Simple Custom CSS plugin and use your DevTools skills to change at least one element of your site’s design via CSS code

Secondly, continue your self-directed journey of discovery by taking at least one JavaScript course at Codecademy, so that you can include that experience in your blog post detailed below.

Blog Post

Your course blog post assignment for this week is to reflect on your experience with coding so far, and engage in the debate within the DH community over whether or not humanities students should learn to code.  Your post should include the following:

  • A clear statement in the first paragraph stating your position either for or against.
  • A discussion of your coding experience, including a link to your profile page on Codecademy
    • This link is in the format www.codecademy.com/<username> and can be accessed by clicking your avatar icon in the top right corner of the page
    • The profile should show at least one lesson each in HTML, CSS, and JavaScript
  • At least one quotation from each assigned reading: Kirschenbaum for, or Donahue against.
  • At least one example from your own experience coding, either this week or earlier, that supports your position.

References and links to other articles/blog posts on the issue or not required, but will be looked upon kindly.

 

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.

 

Posted on

2A: HTML/CSS 101

HTML and CSS are the bedrock foundations on which the world wide web (and therefore most digital humanities projects) are based.  HTML provides the basic structural markup that tells your browser what to do with the information on your page.  In the early days, HTML offered rudimentary styling and layout support as well, but CSS (Cascading Style Sheets) offers a much superior method of making all the different elements of your pages look exactly how you want them to look, and go exactly where you want them to go.  The biggest benefit of style sheets is that one sheet can influence the appearance of an infinite number of pages, allowing you to update code in only one place to change anything from the color of text to the positioning of an element.

Assignment 1

Your task for next time is to write your first true blog post.

Having watched Miriam Posner’s video and read Johanna Drucker’s article on the components of a DH project, explore one of the sites below and write a post trying to reverse engineer one of these DH projects.

Make sure your post does the following:

  • Introduces and links to the project you explored.
  • Contains an image of the project that links directly to it.
  • Breaks down the black box of your digital project by indentifying its
    • Sources (assets)
    • Processes (services)
    • Presentations (display)

You may need to poke around the About or FAQ sections of the page to figure out this information, but see how far you can get.

As you write, remember that blog writing is a different beast that lies somewhere between formal academic writing and casual social media or email style.  Try for a tone that is scholarly and informed but neither too stiff nor too sloppy.  It can be a tough balance to strike, but think of your intended audience and try to find a voice that works for you.

Assignment 2

There are many excellent resources for learning the fundamentals of HTML and CSS on the web.  If you want to build pages from scratch from the ground up, pick your favorite code school or tutorial series from the resources section below and go crazy.  In this course, however, we are primarily hacking and modifying other people’s code for our own purposes, rather than building from scratch, so we will keep it simple.

  1. Your assignment is to create an account at Codecademy, if you don’t already have one,
  2. Take at least two courses (one on HTML and one on CSS).
    • Many of you already have some HTML experience, and a few already have CSS experience, so if you’re an experienced user, chose a lesson further down the list and challenge yourself.  If you’re new to web development start near the top with the basics.
  3. After you’ve successfully completed your short courses, Codecademy will give you badges. Save the URL of your profile page, since we’ll link to it once we get up and running next time.

Make sure you remember to comment on at least two fellow classmates posts before next class.

And bring your credit card! We’ll be setting up our own servers next time.

Resources

Here are some places to go for more information If you need a refresher on the tools we used in class

  • An Introduction to DevTools for Chrome, and a more detailed discussion (with nifty GIF examples!) of using them to edit CSS styles
    • If you regularly use a different browser you can also checkout the comparable tools for Firefox and Apple’s Safari, but I would recommend reducing confusion by sticking with Chrome’s until you get the hang of it before figuring out how others differ.
  • A quick rundown on the basics of the fantastically useful Digital Color Meter for Mac OS X, which lets you grab precise colors from images to use in your CSS.

Codecademy is a great place to start, but there are tons of other places to learn coding on the web for free.  Here are a few further HTML/CSS resources:

  • w3schools.com is one of the most comprehensive sites around, with many excellent lessons and a handy “TryIt” tool that lets you see your code in action.
  • HTML Dog offers a solid series of tutorials with beginning, intermediate, and advanced tracks on the three major client-side languages you need to know: HTML, CSS and JavaScript.  They also have several minimal example pages for specific effects you might want to achieve.
  • A straightforward HTML assignment of constructing your first page from the ground up from the folks at UCLA’s Digital Humanities 101 course.
  • A handy list of the most common HTML elements to familiarize yourself with at ReWritables.net.
  • Since Carleton has an institutional subscription, you can also check out the HTML and CSS video tutorials on Lynda.com if you’re hungry for more.

If you find another that’s helpful, pass it along on your blog.

Happy coding!

css.php