“Not everyone on the web is looking for practical information. Some look to remove the fork from the dinner table and set it into a frame of their own devising. Some pay homage to the fork as it is. Some treat the web not as a shopping mall, but as a spiritual realm.”
– Kevin Bewersdorf, Spirit Surfing
By now the word “hypertext” has become generally accepted for branching and responding text, but the corresponding word “hypermedia”, meaning complexes of branching and responding graphics, movies and sound – as well as text – is much less used. Instead they use the strange term “interactive multimedia”: this is four syllables longer, and does not express the idea of extending hypertext.
– Ted Nelson, Literary Machines
go through some card sorting solutions. what worked and what didn’t? what was hard and what wasn’t? Is there a solution you’re excited to show us? is there anything that we should revise or that you’d like clearing up?
lecture: get a load of this api
HTTP (the HyperText Transfer Protocol) is how we get files from one place to another on the internet. It’s the foundation for internet data exchange, and functions according to requests made
The phrase ‘hypertext’ was coined by ted nelson. The word ‘hyperlink’ also comes from the same root. Importantly, unlike Nelson’s original vision, hyperlinks go only one way, rather than two.
Ted is deeply unhappy with the way the internet has gone, and for a (very) long time has been working on a piece of software called xanadu, which he intends to realise the ‘two way, visible connections’ he originally envisioned in describing hypertext.
I almost got you all to read computer lib and still really heavily recommend it. are.na list Ted’s work as a big inspiration behind their platform, and talk about his influence in this interview. Here’s Ted talking to Cab Broskoski (founder of are.na) at the Decentralised Web Summit in 2018! Other characters that will make an appearence later this semester, like Bret Victor, also draw inspiration from his work.
HTTP requests function on the basis of the ‘client-server’ model: you have a computer, a ‘client’, that makes a request to a ‘server’. The server has something you want (a website, pictures of frogs, tweets, etc), and you have to make a HTTP request to get it. You’re actually making this request to a URL – a Uniform Resource Locator.
Net artists JODI have made some nice works playing with URLs as a medium. Check out IDN, and you-talking-to-me.
When you make a request, it’s normally formatted as one of these four types (normally really just the top two):
This presentation gives a good breakdown of what goes on under the hood of a HTTP request.
HTTP status codes are how a web resource reports on how a HTTP request went. These are really useful when it comes to debugging issues, as different returned numbers mean different things. These are managed by a body called IANA, the Internet Assigned Numbers authority.
Here are a few common ones:
2xx success 200 🎉 201 204
3xx redirection 304
4xx client error 400 401 403 404
5xx server error 500 502
requesting from the command line
When we want to make a HTTP request just from our terminal, there’s a really useful tool called cURL. It can be a bit daunting the first time you try it, so we’re going to use it a bunch in class. There’s not a ton of accessible curl tutorials, but this one can be a helpful guide. Here’s a cheat sheet for a reminder, you can also type
curl --help into the command line.
requesting from code
Testing these on localhost isn’t always so straightforward though: this is because of a security feature attached to CORS – cross-origin resource sharing. It’s to protect you from evil sites trying to steal information from your cookies (good), but it also means that friendly sites get blocked too. You get an error like ` No ‘Access-Control-Allow-Origin’ header is present on the requested resource.` This article gives a good breakdown of why these errors occur. There are two ways to get around this:
- if you’re comfortable using node.js (or a framework like React or Angular), then use node to run your app. include the line
const fetch = require("node-fetch")at the top of the file, and run
npm install -g node-fetchon your computer. This software will run a small server, which will handle the request before it gets passed to the client. This solution is known as a proxy.
- use CORS-anywhere: just put
https://cors-anywhere.herokuapp.com/on the beginning of your url: this will act as a ‘proxy’ for the request, and add in a header that will stop the browser from freaking out. It’s a really convenient solution if you don’t want to run your own proxy.
Some URLs are intended not to contain a webpage at the other end, but instead some kind of data. These are called ‘endpoints’, and the way you access them is called an API. This means that, when you send a request to that endpoint, rather than getting a lump of HTML back, you’ll instead get something you want (normally some kind of object!).
Many APIs require keys or tokens to access them. It’s rare you have to pay for a key for basic usage: they’re normally there so if you use the service a lot they can ask you to pay for it. Google Cloud has a guide as to why they get used. Keys should be private! Be careful with them. As a rule of thumb, if a key is not linked to your credit card the worst that can happen is that you get banned from a service if someone takes your key and over-uses it. However, keys for things like AWS can have wayyyyy more serious consequences if they get leaked.
warning: don’t commit your key/secret to github
Oh my god i just did a request and got this huge pile of crap from the internet, how on earth do i read this? => ‘pretty printing’.
Thus, if parts of your code depend on a HTTP request being made before they run, then you need to wait for the result of the request. We can do this in a couple of ways:
Error handling: (or – ‘I wanna write some nice JS’)
public key encryption (cool diversion, we could be here for ages…)
what can i ask for?
darksky aeris weather
lovely weather we’re having
wind around the world
google places api
the artist is present
bots bots bots
cheap bots, done quick
tweetfeels (involves a little bit of python)
community garden plants
youtube next youtube recommendation
default filename TV
astrology-api ($$$ but free 14-day trial)
dominos 3 Degrees of Separation from the Military-Industrial-Prison-Data-Surveillance State apilist
the steps for authenticating to google api can be surprisingly tricky and poorly documented… if you’re wanting to play with a google project, let me know and I can walk you through it!
pick an api and make a http request from the command line!
make a website that interfaces to a remote API, and displays the information in a novel form.
Your webpage should experiment with how the data from the API is displayed. How are you expected to use this information? How does your page change when the data from the API changes? What kind of experience do you want to engender in the person seeing this webpage?
Everest Pipkin, It was raining in the data center
Julian Oliver, Stealth Infrastructure