to class -- to about -- to syllabus -- to people -- to the library

the vanilla web

“Unicode is big. But the web is infinitely big. Like a fractal with its endless regress of complexity, a new web page can always be inserted between two existing ones, creating an infinitely large system.”

– Alex Galloway, JODI’s Infrastructure

you’ve been there! you’ve seen it! you’ve done that! (or have you?). here we’ll revisit the basic tools that we use to make work for the web, and talk about some higher level concepts and tools to improve the quality of code. We’ll discuss web standards, net art, and the power of pure html.

review: homework + check in

general: how does everyone feel about pace/assignments etc? any concerns or questions?

lecture: JS, HTML, CSS revisited

Playing along with the lecture: optionally setup a blank html webpage, linked to a JS and a CSS page.

like this:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

</body>
	<script src="main.js"></script>
</html>

HTML
Why is writing HTML like building a house? Structure is important: you have to lay the foundations before you start decorating, and be careful when you want to add an extension! A little HTML can go a long way, and getting it right can save you hassle later on.

HTML is a markup language – a term that has roots in the time where graphic designers would ‘mark up’ a typewritten or handwritten document with instructions to the people that would typeset it.

One of the more important concepts in HTML is page structure: the idea that elements on the page follow a nested hierarchy.
  page structure
  DOM tree more detail

In HTML, elements refer to the different tags that can be used to house information on the page. Some tags contain text (these require an ‘open’ and a ‘close’ tag), others are ‘empty’, and instead have their contents set as an attribute (img tags work like this).

Inline elements do not generally force a new line to begin (and are therefore useful elements to feature within a block of text). By contrast, block elements are elements that start a newline within their parent container.

The ‘normal flow’ describes the relationship between inline and block elements on a page. The display property can be set in CSS to change between block elements and inline elements.

other:
    form elements
    RIP
  complete list of html tags

pure HTML
It’s possible to make a totally functional website using HTML only, and this can be a really useful exercise to re-visit ideas like hierarchy and page structure. A nice recent example is special.fish.

  /r/spartanweb
  links.net
  writing html in html
  pure html are.na channel
  kill styles results page

CSS
CSS is what you use to tell a web browser how to display a webpage. ‘CSS’ stands for ‘Cascading Style Sheets’: they define rules of presentation that are applied in stages, as the browser composes the Document Object Model. The DOM is how the webpage gets represented in the memory of the computer that loaded it: it’s the document that gets referenced when we write Javascript to manipulate it (more on this later).

As we saw in the last link, CSS is always defined relative to an HTML structure. In particular, to get CSS rules to apply to particular parts of the DOM, we use selectors and combinators. These can be pretty powerful but! there are some limitations. For lots of practice, CSS dinner is a pretty good tutorial.

Important concepts in CSS:
  the box model
  colours randomcolour.com
  fonts
  shapes
  animations

Responsiveness: This is something that’s really important to designing websites that you expect people to use across a number of different screens. We’ll touch on this at other points, but in general responsiveness can be achieved in HTML and in CSS.

Features, features, features:
  bud uglly

A warning: CSS functions essentially as a set of instructions for a web browser to interpret. Aaaaand – not all browsers interpret things the same. Standards set by the w3c consortium are meant to regulate this, but if you’re making a site you know needs to work cross-browser, caniuse can be really useful.

JS
Javascript is the only programming language that natively runs in the browser. There are lots of ways of taking other languages and turning them into JS (things like Typescript, or Python’s Flask are good examples), but: if you’re writing code for the web, it’s likely in JS.

On a regular webpage, Javascript code needs to interact with the document in order to be visible to the person using the page. It also needs to be included in the document, or the browser won’t know to run it: loose JS won’t run by itself. Some of the most basic uses of JS on the web are in DOM manipulation and events.

Javascript is also a programming language in its own right, and frameworks like Node allow you to run it without needing a webpage. All of the following features apply both to the Javascript you’ll run on the web and locally.
  variables
  arrays
  objects (we’ll revisit these in week 7)

Loops and iteration are some of the most common forms of algorithm in Javascript, and some of the most useful for the web. They allow us to perform an action multiple times, with only a few lines of code.

Common loop forms:
    for do…while while for…in for…of

Functions give us a way of abstracting processes into discrete blocks, which we can call at different points in the code.

randomness is also important! We’ll use this a lot this week.

writing nicer javascript
Javascript can be a great programming langauge for beginners because it’s very forgiving: you can make lots of mistakes and the code won’t break. However, as you get more advanced, that lack of strictness that made it easy also mean that a lot of JS that gets written is a hot hot mess. One thing that can help improve your code a lot is to look at patterns and antipatterns: these are ‘good’ and ‘bad’ conventions for solving particular problems. While they all work, the patterns are generally simpler, more efficient, easier to read, and less likely to cause bugs.

Scope is a pretty central idea to writing effective code in any language, and JS is no different. It can also be one of the most confusing concepts, and the source of many errors in more complex projects. The scope of a variable defines the parts of a program that can access it. A variable declared within a function is scoped to that function, while a variable set at the start of a file is scoped to the whole document. The principal of least scope is a good one to apply.

Javascript is less well-known as ECMAScript You don’t need to include any of these ideas for your code to work, but they can improve the structure and understanding of your code. We’ll cover these in greater detail throughout the semester. Every so often, a new version is released that improves on the old versions (this is also true for HTML and CSS!). People got quite excited about ES6 because it introduced a lot of new features that meant it was easier to write good Javascript. How do I install it, you ask? It’s installed already…

Cool ES6 features:
  let vs const: instead of using var to declare a new variable, you can now use let and const. In short: ‘const’ is a variable you don’t plan to change, and ‘var’ is one that you do. Can you use var, let and const in the same file? yes. should you? no! (consistency is key here…)
  array.find()
  oo, strict mode

browsers
  how browsers work rolling your own
  the web stalker

but surely it can’t be this simple??
Your readings this week should have touched on this too, but it’s worth noting that almost every website you would want to make, can be made with these basic tools. Here are some gems:
  a useful reminder
  making as thinking
  my boyfriend came back from the war
  jodi.org
  html energy
  form art

in class tutorial:

shuffling the class! arrays, loops and basic DOM manipulation

in class assignment:

Every group gets a different pack of cards. Together, come up with algorithms for sorting, dealing and arranging them, and act them out. Write the algorithm down and give it to another group.

These algorithms must be written in pseudocode: you could concievably adapt this to write for a computer without much effort. If you want to ‘remember’ things, they must get stored somewhere (you can use a piece of paper…) In all situations, you should seek to perform the ‘algorithm’ in the fewest possible moves. Ace is high.

first task
Deal out the whole deck, sorting into red and black.

second task
Perform a faro shuffle on the deck. This is a shuffling technique where the deck is split exactly in half, and the cards are then alternated perfectly.

third task
Deal 5 cards each to 4 players, without dealing any spades.

fourth task
Deal two hands of 5 cards each: one hand will have only cards lower than the first card dealt to that hand. The other will have only cards higher than the first card to that hand.

fifth task
Deal out four hands of 5 cards each. Each hand should contain at least one pair. Try and do this in the minimum number of cards.

assignment:

due 02/09
make a website that shuffles a deck of cards using (at least) 2 different approaches

Criteria:

Once you’ve got the basics down, try something a bit more exciting. Make it deal Texas hold’em! Add some graphics! What happens when a card is dealt? Can you stack the deck in your favour? Try a sorting algorithm! Can you make something really weird? How the cards are shuffled, dealt, and displayed, and what kind of cards they are is up to you. Write about your experience in this week’s documentation.

Use this assignment to practice something you’re unsure of, or to gain a new skill: so, if you’re looking to revisit some CSS, try displaying the cards on screen (you could even draw them out with CSS shapes). Alternately, this could be a great opportunity to play with some functions.

other decks
  hwa-tu/hanafuda
  spanish deck
  tarot
  pokemon
  magic the gathering

dealing
  poker game variants
  solitaire
  box kite

resources for this week

HTML refs
  complete list of html tags

CSS refs
  CSS dinner (practice selectors and combinators)
  flexbox froggy
  grid garden

functions and loops in JS
  loops guide

resources from last week
  terminal commands
  simple git commands

readings:

Alex Galloway, Jodi’s Infrastructure
Ted Nelson (in Software p16), The Crafting of Media