This workshop is relevant to developers because:
Just how a race-car driver should understand how their car runs, web developers should have clear mental models of the Internet when building web applications. Knowledge of internet fundamentals will help place new concepts in a more complete context.
After this workshop, developers will be able to:
- Explain at a high level how the Internet transmits data
- Distinguish between the Internet and the World Wide Web
- Explain how HTML CSS and JavaScript work together
- Identify the relationship between servers and clients
- Articulate what an API is
Before this workshop, developers should already be able to:
- Use the Internet
How did the Internet begin?
"Lo" and behold, the first Internet communication was sent over a network of computers called the ARPANET from UCLA to Stanford.
How does data travel through the internet?
Any data you send over the Internet is split up into data packets. Each packet is routed to the destination eventually, but may all take different paths to get there.
How is the network structured?
The Internet is a global network of networks connected through a set of Internet exchange points
What does a connection look like?
All data transmitted across the Internet is eventually communicated through a fiber optic cable as flashes of light.
How does all that data flow through one cable?
Multiplexing allows multiple data streams to share one wire by splitting each stream into a separate channel with a different bandwidth.
What are the distinct layers of the Internet protocol suite?
The suite is a set of communication protocols used in tandem on the Internet. These protocols work together to facilitate a variety of networked communications.
What does TCP/IP mean?
TCP/IP stands for Transmission Control Protocol/Internet Protocol. TCP lives on the transport layer and is the protocol that ensures the data sent is reliable, ordered, and error-checked. IP lives on the Internet (or Internetwork) layer and the is the protocol concerned with routing data grams through the network efficiently.
What is the DNS and why is it useful?
The DNS is an Application layer protocol for translating "human-friendly" computer hostnames into IP addresses. Think of it like a contact list as it allows one to lookup a phone number based on a memorable name.
How does the World Wide Web compare to the Internet?
The Internet is the actual network that connects computers together and encompasses a wide range of protocols. The World Wide Web only represents a specific protocol on the Application layer of the Internet Protocol Suite.
What protocol does the WWW use to communicate?
HTTP is a protocol on the application layer that the World Wide Web uses to communicate. It is responsible for delivering HyperText files and applications. More specifically, browsers rendering HTML files will use the WWW.
Who invented the World Wide Web?
Tim devised a system for sharing HyperText documents while at CERN. During the late 80s and early 90s he specified the first versions of HTML and HTTP that ended up birthing the World Wide Web and changing the usability of the Internet forever.
What is HyperText?
In the '60s Douglas Engelbart [demonstrated](https://www.youtube.com/watch?v=yJDv-zdhzMY) a machine that was capable of rich media, collaborative text editing, and teleconferencing. Now HTML, aka HyperText Markup Language, enables anyone to design rich media documents that are literally "beyond" (hyper) text.
Who is in charge of the WWW?
The Technical Architecture Group meets regularly to discuss, document, and build Web standards. This group consists of 9 participants, some from outside organizations like Microsoft, Google, and Mozilla. They are known as the World Wide Web Consortium or W3C.
So how does HTML relate to CSS and Javascript?
You can think of HTML CSS and JS as the three major parts of speech in human language: nouns, adjectives, and verbs. HTML is the noun as it is in charge of organizing content (text, photos, videos, audio, links, etc) into a file. CSS is the adjective as it is entirely concerned with the visualization of the content. JavaScript is the verb as it can add behavior and dynamism to the content.
What are the distinct parts of a URL?
http://www.kittengifs.com:80/popular-gifs#results?term=cute&page=2
|-----|-----------------|---|-----------|--------|----------------|
| | | | | |
protocol host port path fragment query-string
- Protocol: a set of conventions regarding how information will be communicated
- Host - the server that is connected to
- Port (optional) - the target port on that server
- Path - the specific file or data that is accessed on the server
- Fragment (optional) - used to jump to a specific `id` of the page
- Query String (optional) - used to include additional information about what we're requesting
What is the definition of an API?
An API is simply the interface for how one interacts with a piece of software. In programming a string of characters, such as `"hello"`, is refered to as a String. From the above example, we see that `.upcase` is part of a String's API.
Can you give me a real world example of one?
The purpose of a restaurant is to abstract the effort of making food away from the client. A restaurant's menu represents their API. The server waits on a client for a request. When ordering, the client references the restaurant's API, the menu, to send a specific, predefined request to the server. When the server delivers the dish back to the client's table, the request is completed with a response (more on the request/response cycle later).
When we talk about Twitter's API, what does that mean?
Developers may want a way to access Twitter's data, so Twitter exposes an interface for them to do so. Big companies exposing their data over the internet is an extremely simplified idea of what an API is. Litterally every piece of software, at some level, has an interface to access it!
How could we interact with a third party's web API?
Every time you visit a webpage your computer is acting as a client that will send a request to a URL. This URL maps to a specific server somewhere else in the world. That server is tasked with responding back to you with the information you have requested. Each request must contain two things: **a URL**, which represents the location, and an **HTTP Verb**, which represents the intent. The verb options are: POST, GET, PUT, and DELETE, which mean you want to respectively Create, Read, Update, or Delete (CRUD) data located at a specific location.
There's tons of technical acronyms and jargon in the world. Understanding the basic building blocks of internet and web technologies will help you communicate, grasp new concepts independently, and demystify your learning journey to become a better web developer.