<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Art, Science and Technology</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<template class="header"> <h1>Program, or be Programmed</h1></template>
<h2>Description</h2>
<p>While in theory, you could hardcode everything in HTML this becomes
cumbersome quite rapidly. Computers are made to automate boring, difficult,
error-prone, and repetitive tasks, so let's use that potential to the
fullest.</p>
<h2>Tasks</h2>
<h3>Climb Trees</h3>
<p>The paperless office is an eternal promise that the computer has yet to
fulfill. Still, it has managed to save the forests in a different way. In
fact, tree-like structures are everywhere in programming. For instance, in
the form of ASTs (Abstract Syntax Trees) and the branches you use in git
.</p>
<p>When dealing with the web in general, and browsers in particular, the
DOM (Document Object Model) is probably the most important tree that you
will encounter. It is the underlying structure of all the different
elements and properties that a webpage consists of.</p>
<p>The easiest way to explore the DOM is through the developer console in
your browser. The console is also an invaluable tool while testing and
debugging your code, so take your time to familiarize yourself with it.</p>
<h4>Resources</h4>
<ul>
<li>
<a href="http://eloquentjavascript.net/13_dom.html">
Haverbeke, Marijn. 'Chapter 13. The Document-Object-Model' in
Eloquent JavaScript.
</a>
</li>
<li>
<a href="https://www.upress.umn.edu/book-division/books/a-thousand-plateaus">
Deleuze, Gilles and Felix Guattari. 'Rhizome' in A Thousand Plateaus
</a>
</li>
<li>
<a href="http://discover-devtools.codeschool.com/">
Discover Devtools on Codeschool (chapter 1 - 3)
</a>
</li>
<li>
<a href="http://www.html5rocks.com/en/tutorials/developertools/part1/">
Ladd, Seth. Introduction to Chrome Developer Tools, Part One.
</a>
</li>
<li>
<a href="http://en.wikipedia.org/wiki/Chomsky_hierarchy">
Wikipedia - Chomsky Hierarchy
</a>
</li>
</ul>
<h3>Manipulate Documents</h3>
<p>CSS not only offers us a convenient way to style our documents, it
also provides us with some great abstractions to query them. It is
therefore not a coincident that we use many of the same abstractions when
we want to deal with documents programmatically.</p>
<p>While JavaScript has always offered interfaces to query and manipulate
the DOM, dealing with incompatibilities between browsers used to be a
huge pain. So much so actually, that jQuery - a library that abstracts a
lot of the differences between browsers behind a common interface - became
the de facto standard to deal with HTML documents programmatically.</p>
<p>With the introduction of evergreen browsers, however, traversing
and manipulating the DOM with plain javascript has actually become very
simple. So let's go native!</p>
<h4>Resources</h4>
<ul>
<li>
<a href="http://eisenbergeffect.bluespire.com/evergreen-browsers/">
Eisenberg, Rob. Evergreen Browsers.
</a>
</li>
<li>
<a href="http://eloquentjavascript.net/13_dom.html">
Haverbeke, Marijn. 'Chapter 13. The Document-Object-Model' in
Eloquent JavaScript.
</a>
</li>
<li>
<a href="http://code.tutsplus.com/tutorials/javascript-and-the-dom-series-lesson-1--net-3134">
JavaScript and the DOM (older, but basic still apply)
</a>
</li>
<li>
<a href="http://callmenick.com/2014/03/27/basics-javascript-dom-manipulation/">
The Basics of JavaScript DOM Manipulation
</a>
</li>
</ul>
<h3>Make Templates</h3>
<p>Templating is another, and arguably better, way to solve the problem of
writing the same markup over and over again. Since the template contains
all the elements that stay the same from document from document, it allows
you to focus on the parts that change. These so-called variables then
need to be injected into the templates.</p>
<p>Also, while you may appreciate this right now, t is important to
notice that templates make it possible not tomanipulate the DOM directly.
This greatly reduces the chance that you run into bugs - either your own,
or those of others - and ensure a clearer separation of concerns</p>
<p>There are many different solutions for templating available (erb, jade,
handlebars, etc.) partly due to the fact that - until recently - this was
not possible to do natively in HTML.
<p>In the latest versions of the HTML specification, this has changed
though. And the most recent iterations of browsers now all support
templates. So, again, let's not use a proprietary solution but use a native
alternative instead.</p>
<h4>Resources</h4>
<ul>
<li>
<a href="http://www.html5rocks.com/en/tutorials/webcomponents/template/">
Bidelman, Eric. HTML's New Template Tag. Standardizing Client-Side
Templating
</a>
</li>
<li>
<a href="http://www.pluralsight.com/courses/web-components-shadow-dom">
House, Cory. HTML5 Web Component Fundamentals (chapter 2, templates)
</a>
</li>
<li>
<a href="https://www.goodreads.com/book/show/440463.The_Gutenberg_Galaxy">
McLuhan, Marshal. The Gutenberg Galaxy: The Making of Typographic Man
</a>
</li>
<li>
<a href="http://garann.github.io/template-chooser/">
So you need a Template Engine
</a>
</li>
</ul>
<h3>Digging into Data</h3>
<p>A template without data is not worth much. Information, however, comes
in many shapes and forms: texts, numbers, sounds, images, etc. In order to
store, manipulate, and transmit this plethora of data, computer languages
differentiate between basic types. These types are called data structures.
</p>
<p>Familiarize yourself with the basic data structures in JavaScript:
strings, booleans, numbers. If you are curious about more complex and
exotic data structures have a look at the wikipedia list or go straight
to haskell...</p>
<h4>Resources</h4>
<ul>
<li>
<a href="http://en.wikipedia.org/wiki/List_of_data_structures">
Wikipedia - List of Data Structures
</a>
</li>
<li>
<a href="http://tryhaskell.org/">
Try Haskell
</a>
</li>
<li>
<a href="https://www.codeschool.com/courses/javascript-road-trip-part-1">
Codeschool - JavaScript Road Trip Part 1
</a>
</li>
<li>
<a href="http://eloquentjavascript.net/01_values.html">
Haverbeke, Marijn. 'Chapter 1. Values, Types, and Operators.' in
Eloquent JavaScript.
</a>
</li>
</ul>
<h3>Repeat Yourself</h3>
<p>The final task for this section, is that you make a fork of this
document. You can structure and style your document whichever way you like
to. There are two restrictions, however.
<ol>
<li>
Your fork describes the next session - with the title <em>Practice
Best Practices</em>
</li>
<li>
Don't hardcode your data, use a template instead.
</li>
</ol>
The deadline is <strong>February 13</strong>.
<p>Post the link to your fork in the
<a href="https://ast2015.slack.com/messages/assignments/">assignments
slack channel</a>. The deadline is <strong>February 14</strong></p>
<p>If you need inspiration for tasks and/or resources. You can have
a look at the <a href="http://ast.codingthehumanities.com/">syllabus</a>
of last year's of this course, or at the
<a href="http://coding-the-humanities.github.io/unacademic_static/">
website</a> of its Ba-Level counterpart.</p>
<h4>Resources</h4>
<ul>
<li>
<a href="http://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/">
Coyer, Chris. Loop Over querySelectorAll Matches
</a>
</li>
<li>
<a href="http://monoskop.org/File:Kittler_Friedrich_2008_Code_or_How_You_Can_Write_Something_Differently.pdf">
Kittler, Friedrich. "Code, or How You can Write Something Differently"
</a>
</li>
</ul>
</body>
</template>
</html>
function change() {
var header = document.getElementsByTagName("h1").innerHTML;
header.firstChild.data = "Practice best practices";
}
{
var firstSection = document.createElement('section');
var firstArticle = document.createElement('article');
}
var main = function(){
};
$(document).ready(main);
/* Styles go here */
.header {
color: red;
font-family: Helvetica;
font-size: 3em;
}