any requests?
“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
review
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
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.
Addresses
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.
requests
When you make a request, it’s normally formatted as one of these four types (normally really just the top two):
GET
POST
HEAD
PUT
This presentation gives a good breakdown of what goes on under the hood of a HTTP request.
status codes
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:
1xx information
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
When we want to make a HTTP request as part of a website, we do this using a Javascript module. There are a few different ways to do this: this guide has a comparison between ajax, axios and fetch . Fetch is the most modern of these, and the one I tend to recommend. It’s not supported by internet explorer (NB this is a theme you’ll notice as we go along…)
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 runnpm 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.
API
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
formatting
We get requests back in all sorts of different ways, but the most common one is JSON. This is ‘Javascript Object Notation’, and we met it last week when we made some objects. Other forms of data we can get are XMLand YAML, which are worth knowing about (though less frequent from APIs).
waiting
To understand how to make a request in Javascript, you need to understand a little about how asynchronous code works. Why is this? HTTP requests require your code to wait until a resource responds with a particular value. This is often fast, but it’s not instantaneous! We can’t just treat it like adding numbers together.
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:
promises
async/await
Error handling: (or – ‘I wanna write some nice JS’)
try/catch
HTTPS
TLS
public key encryption (cool diversion, we could be here for ages…)
HTTPSEverywhere
what can i ask for?
weather
darksky aeris weather
lovely weather we’re having
weather gradient
wind around the world
opening times
google places api
istheapplebeesondelcoparkdriveinthesuburbsofdaytonopenrightnow.com
the artist is present
twitter
twitter api
bots bots bots
cheap bots, done quick
pentametron
other orders
emoji tracker
tweetfeels (involves a little bit of python)
chatbots
dialogflow
are.na
are.na api
mac.are.na
community garden plants
video
youtube next youtube recommendation
default filename TV
astrology
horoscope-api (free)
astrology-api ($$$ but free 14-day trial)
other
dominos 3 Degrees of Separation from the Military-Industrial-Prison-Data-Surveillance State
apilist
venmo
notes:
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!
class exercise:
pick an api and make a http request from the command line!
assignment
due 02/23
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?
readings
Everest Pipkin, It was raining in the data center
Julian Oliver, Stealth Infrastructure