artware

The material covered in the previous parts of the narrative can easily take the entire first half of the semester for many of us to complete. Some of us, however, might be entering this course with a bit more experience and prior programming knowledge and thus may have worked through these lessons and assignments at a faster pace (or skipped them all together). For these students I've put together a few more lessons related to "Artware" (or Software Art). Generally speaking, software applications (aka programs or apps) are traditionally designed to serve a functional or utilitarian purpose, where as artware is created to serve a more creative (or critical, social, and/or experimental) purpose. These are concepts we'll be discussing together as a class towards the middle of the semester when we begin working on a collaborative class project. The tutorials below will prepare you to make more ambitious/advacned contributions to this project.


Video Tutorials



client side

the DOM API

The DOM (document object model) API is the most fundamental browser API, it's how we manipulate our page's HTML/CSS through JavaScript and forms the foundation of any web application.

setting up the repo
the document object
referencing HTML elements
changing/mutating HTML elements
changing/mutating CSS (style) of an HTML element
random style/color function (an example)

DOM Events

"event-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions, sensor outputs, or message passing from other programs or threads", the DOM provides us with an API for doing just that in the browser.

script tags (code structure/patterns)
Event Based Programming (programming paradigms)
creating mouse Event Listeners
callback function syntax (code structure/patterns)
event objects
creating keyboard Event Listeners
modular callback functions (code structure/patterns)
creating new HTML elements w/the DOM API
Interface Painter (an example)





the Fetch API

intro to AJAX (Asynchronous JavaScript)

When we visit a website our browser makes an HTTP request for that HTML as well as an subsequent HTTP requests for loading any assets (fonts, images, videos, etc). The difference between a web "page" and a web "app" is the ability to dynamically change the content of our site through user interaction and other events, which often requires the ability to make our own HTTP requests.

synchronous vs asynchronous (code structure/patterns)
AJAX: when web pages became web apps
XMLHttpRequest API
running a local server
Fetch API

the Fetch API

accessing 3rd Party REST APIs

The most common use case of the Fetch API is making HTTP requests to servers on the Internet running "REST APIs", which enable us to integrate third party data or services into our own web applications. You can find the finished example from this tutorial on the class GitHub

Fetch API(review + more "types")
JSON
third party REST APIs
API Keys
Dogs && Forecasts (an example)
adding a new branch to my repo

server side

There are a few different examples of custom servers produced in the tutorials below, you can find the completed code for these on GitHub, specifically the basic custom-server, the evil-server, the custom-rest-api and finally the socket-api-chat-room.



custom server

In this tutorial we'll learn how to create our own custom server from scratch using nodejs, as well as learn how to import JS modules (libraries and frameworks) from npm before learning how to create a server with express.js, the most popular framework for creating servers in JavaScript today.

writing a server from scratch(in node.js)
downloading 3rd party node.js libraries (aka "modules")
package.json (code structure/patterns)
using Express.js framework/module
updating my repo

anonymity

online surveillance (part I)

We hear a lot about online "privacy" in our present age of social media, big data and surveillance capitalism. Things like "cookies", "IP Addresses" and "location data" are often discussed in conversations about "online tracking" but we rarely ever understanding exactly what any of that means at the level of code. In this tutorial we'll exactly how all that works.

Cookies
IP Addresses && location data
making HTTP requests from the server
Proxy Servers (VPNs, TOR, etc)





tracking

online surveillance (part II) / custom REST API (part I)

In this tutorial we'll build on some of the concepts we learned in the last one to explore one of the more contemporary methods used to track users online. We'll also start learning some of the concepts necessary for creating our own custom REST APIs which we will build on in the next tutorial.

POST-ing data to our server (custom REST API)
creating the fingerprint (hashing the data)
storing data on our server
how to prevent browser fingerprinting

custom REST API

(part II)

In this tutorial we'll build on some of the concepts covered in the last tutorial where we started discussing how to create our own custom REST APIs. This enables our client side code to send and receive data to/from our server, where we can store that data.

modularizing our REST API code (code structure/patterns)
serving all our static files (HTML, CSS, images, etc)
creating another REST API endpoint





socket API

part I: client side code

In the next couple of tutorials we'll learn how to use the socket.io library to create a chat, a web app where multiple users can send messages to each other in real-time. In this first video we'll setup the "client side view" or the front-end UI (user interface).

setting up our "view" or UI (user interface) (code structure/patterns)
structuring + styling our UI (HTML/CSS)
dynamically creating UI elements (JavaScript + the DOM) (code structure/patterns)
Imperative vs Declarative (programming paradigms)
finishing up dynamically created UI

socket API

part II: server side code

In this next tutorial we'll build on the front end code we wrote in the last tutorial by adding the back end or "server side" logic.

cleaning up the front end (code structure/patterns)
REST API vs Socktes (code structure/patterns)
setting up sockets.io library/module
setting up the event listeners
sending messages to/from server
modularizing our sockets code (code structure/patterns)
a tangent note on privacy