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
- 4 people up on the randomiser
- show the websites and talk about interacting with the browser console
- talk about the readings
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.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> </body> <script src="main.js"></script> </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.
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.
complete list of html tags
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.
writing html in html
pure html are.na channel
kill styles results page
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
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
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:
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.
objects (we’ll revisit these in week 7)
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.
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.
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…)
oo, strict mode
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
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.
Deal out the whole deck, sorting into red and black.
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.
Deal 5 cards each to 4 players, without dealing any spades.
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.
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.
make a website that shuffles a deck of cards using (at least) 2 different approaches
- conservation of matter: once a card has been dealt, it can’t be dealt again (unless it gets shuffled into the pack)
- ‘2 different approaches’ means significantly different approaches to the task, not just the same functions dealing 2 decks of cards.
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.
magic the gathering
poker game variants
resources for this week
complete list of html tags
CSS dinner (practice selectors and combinators)
functions and loops in JS
resources from last week
simple git commands
Alex Galloway, Jodi’s Infrastructure
Ted Nelson (in Software p16), The Crafting of Media