presi-slides 1.0.11 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/includes/slides.css +9 -1
- package/package.json +1 -1
- package/public/slides.css +9 -1
- package/slide-decks/Sample Presi.textbundle/assets/image 6.png +0 -0
- package/slide-decks/Sample Presi.textbundle/assets/image 7.png +0 -0
- package/slide-decks/Sample Presi.textbundle/info.json +1 -1
- package/slide-decks/Sample Presi.textbundle/text.md +66 -277
- package/slide-decks/Sample Presi.textbundle/assets/image 4.png +0 -0
- package/slide-decks/Sample Presi.textbundle/assets/image.png +0 -0
package/includes/slides.css
CHANGED
|
@@ -917,6 +917,7 @@ slide-view:not(:has(h1[layout])) {
|
|
|
917
917
|
var(--slide-image-template);
|
|
918
918
|
--grid-content-rows: min-content minmax(20%, 1fr);
|
|
919
919
|
|
|
920
|
+
|
|
920
921
|
&:has(
|
|
921
922
|
> h3 + p > img:only-child:not(.full),
|
|
922
923
|
> h3 + :not(h3) + p > img:only-child:not(.full),
|
|
@@ -986,8 +987,13 @@ slide-view:not(:has(h1[layout])) {
|
|
|
986
987
|
|
|
987
988
|
/* code + side-by-side */
|
|
988
989
|
|
|
989
|
-
&:has(> :is(pre:first-child, h1:first-child + pre) + h3) {
|
|
990
|
+
&:has(> :is(pre:first-child, h1:first-child + pre) + h3:first-of-type) {
|
|
990
991
|
--slide-code-template: "c c c c c c c c c c c c";
|
|
992
|
+
--slide-body-template:
|
|
993
|
+
var(--slide-code-template)
|
|
994
|
+
var(--slide-titles-template)
|
|
995
|
+
var(--slide-list-template)
|
|
996
|
+
var(--slide-image-template);
|
|
991
997
|
--grid-content-rows: min-content min-content minmax(50%, 1fr);
|
|
992
998
|
}
|
|
993
999
|
|
|
@@ -998,6 +1004,8 @@ slide-view:not(:has(h1[layout])) {
|
|
|
998
1004
|
> img:only-child
|
|
999
1005
|
) {
|
|
1000
1006
|
--slide-header-template: "h h h h i i i i i i i i";
|
|
1007
|
+
--slide-body-template: var(--slide-titles-template)
|
|
1008
|
+
var(--slide-code-template) var(--slide-list-template);
|
|
1001
1009
|
}
|
|
1002
1010
|
|
|
1003
1011
|
/* extra stuff after side-by-side */
|
package/package.json
CHANGED
package/public/slides.css
CHANGED
|
@@ -917,6 +917,7 @@ slide-view:not(:has(h1[layout])) {
|
|
|
917
917
|
var(--slide-image-template);
|
|
918
918
|
--grid-content-rows: min-content minmax(20%, 1fr);
|
|
919
919
|
|
|
920
|
+
|
|
920
921
|
&:has(
|
|
921
922
|
> h3 + p > img:only-child:not(.full),
|
|
922
923
|
> h3 + :not(h3) + p > img:only-child:not(.full),
|
|
@@ -986,8 +987,13 @@ slide-view:not(:has(h1[layout])) {
|
|
|
986
987
|
|
|
987
988
|
/* code + side-by-side */
|
|
988
989
|
|
|
989
|
-
&:has(> :is(pre:first-child, h1:first-child + pre) + h3) {
|
|
990
|
+
&:has(> :is(pre:first-child, h1:first-child + pre) + h3:first-of-type) {
|
|
990
991
|
--slide-code-template: "c c c c c c c c c c c c";
|
|
992
|
+
--slide-body-template:
|
|
993
|
+
var(--slide-code-template)
|
|
994
|
+
var(--slide-titles-template)
|
|
995
|
+
var(--slide-list-template)
|
|
996
|
+
var(--slide-image-template);
|
|
991
997
|
--grid-content-rows: min-content min-content minmax(50%, 1fr);
|
|
992
998
|
}
|
|
993
999
|
|
|
@@ -998,6 +1004,8 @@ slide-view:not(:has(h1[layout])) {
|
|
|
998
1004
|
> img:only-child
|
|
999
1005
|
) {
|
|
1000
1006
|
--slide-header-template: "h h h h i i i i i i i i";
|
|
1007
|
+
--slide-body-template: var(--slide-titles-template)
|
|
1008
|
+
var(--slide-code-template) var(--slide-list-template);
|
|
1001
1009
|
}
|
|
1002
1010
|
|
|
1003
1011
|
/* extra stuff after side-by-side */
|
|
Binary file
|
|
Binary file
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"creatorIdentifier" : "net.shinyfrog.bear",
|
|
3
3
|
"net.shinyfrog.bear" : {
|
|
4
|
-
"bear-note-unique-identifier" : "
|
|
4
|
+
"bear-note-unique-identifier" : "F0C44A09-49A8-4C1D-8255-7B75118A4153",
|
|
5
5
|
"version" : "2.0"
|
|
6
6
|
},
|
|
7
7
|
"transient" : false,
|
|
@@ -1,168 +1,73 @@
|
|
|
1
1
|
---
|
|
2
|
-
title:
|
|
2
|
+
title: Sample Presi
|
|
3
3
|
---
|
|
4
|
-
# Application Layer {layout="title"}
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
# Sample Presi {layout="title"}
|
|
7
6
|
|
|
8
7
|
---
|
|
9
8
|
|
|
10
|
-
#
|
|
9
|
+
# Slide One
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
- Port numbers
|
|
17
|
-
- Connections (sessions)
|
|
18
|
-
- Read/write byte streams
|
|
19
|
-
* Messages (request and response)
|
|
20
|
-
|
|
21
|
-
### Challenges
|
|
22
|
-
- Unlimited number of possible applications
|
|
23
|
-
- → lots of protocols
|
|
24
|
-
- Highly application-dependent
|
|
25
|
-
- Standards evolve
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
---
|
|
30
|
-
# Internet Protocols
|
|
31
|
-
|
|
32
|
-
- Standard protocols for common Internet applications
|
|
33
|
-
- Implemented as messages over TCP (sockets)
|
|
34
|
-
- Message structure defined at application layer
|
|
35
|
-
- Open architecture: compatibility across many implementations
|
|
36
|
-
- as opposed to proprietary APIs
|
|
37
|
-
- Servers listen on registered TCP ports (<1024)
|
|
38
|
-
- Most protocols use text-based "commands"
|
|
39
|
-
- easier to debug
|
|
40
|
-
- commands are relatively short
|
|
11
|
+
- This is a simple slide
|
|
12
|
+
- It just has bullets
|
|
13
|
+
- It's boring, but it works.
|
|
14
|
+
- Time for more fun
|
|
41
15
|
|
|
42
16
|
---
|
|
43
17
|
|
|
44
|
-
#
|
|
45
|
-
| Protocol | Application | Registered Port |
|
|
46
|
-
|----------|--------------------------------------------------------------|-----------------|
|
|
47
|
-
| FTP | **F**ile **T**ransfer **P**rotocol | 21 |
|
|
48
|
-
| SSH | **S**ecure **Sh**ell (remote login) | 22 |
|
|
49
|
-
| Telnet | (Obsolete) remote terminal | 23 |
|
|
50
|
-
| SMTP | **S**imple **M**ail **T**ransfer **P**rotocol (sending email) | 25 |
|
|
51
|
-
| HTTP | **H**yper**t**ext **T**ransfer **P**rotocol (WWW) | 80 |
|
|
52
|
-
| NTP | **N**etwork **T**ime **P**rotocol | 123 |
|
|
53
|
-
| IMAP | **I**nternet **M**essage **A**ccess **P**rotocol (reading email) | 143 |
|
|
54
|
-
| HTTPS | Secure HTTP | 443 |
|
|
18
|
+
# Slide Two
|
|
55
19
|
|
|
56
|
-
---
|
|
57
|
-
# Telnet: a generic protocol client
|
|
58
|
-
|
|
59
|
-
- One of the earliest protocols
|
|
60
|
-
- Originally an application to open a terminal on a remote machine
|
|
61
|
-
- opens a socket and transmits everything you type
|
|
62
|
-
- not secure
|
|
63
|
-
- uses CR-LF (two control characters) for newline
|
|
64
|
-
- Works as a generic client
|
|
65
|
-
- open a socket to a TCP port on any IP host
|
|
66
|
-
- enter protocol commands manually
|
|
67
|
-
|
|
68
|
-
```shell {.compact}
|
|
69
|
-
=> telnet 127.0.0.1 21
|
|
70
|
-
Trying 127.0.0.1...
|
|
71
|
-
Connected to localhost.
|
|
72
|
-
Escape character is '^]'.
|
|
73
|
-
220-FileZilla Server 1.12.6
|
|
74
|
-
220 Please visit https://filezilla-project.org/
|
|
75
|
-
USER anonymous
|
|
76
|
-
331 Please, specify the password.
|
|
77
|
-
PASS xxx
|
|
78
|
-
230 Login successful.
|
|
79
|
-
PASV /
|
|
80
|
-
227 Entering Passive Mode (127,0,0,1,236,35)
|
|
81
|
-
LIST
|
|
82
|
-
150 Starting data transfer.
|
|
83
|
-
226 Operation successful
|
|
84
|
-
421 Activity timeout.
|
|
85
|
-
Connection closed by foreign host.
|
|
86
|
-
```
|
|
87
20
|
|
|
88
|
-
---
|
|
89
21
|
|
|
90
|
-
|
|
22
|
+

|
|
91
23
|
|
|
92
|
-
-
|
|
93
|
-
-
|
|
94
|
-
|
|
95
|
-
- query results
|
|
96
|
-
- dynamically generated content
|
|
24
|
+
- This slide has a picture
|
|
25
|
+
- There are also bullets
|
|
26
|
+
- They should be side by side
|
|
97
27
|
|
|
98
|
-

|
|
99
|
-
|
|
100
|
-
---
|
|
101
|
-
# How HTTP Works
|
|
102
|
-
|
|
103
|
-
### TCP for transport
|
|
104
|
-
- Server listens on socket
|
|
105
|
-
- Client initiates socket connection and sends a _request_
|
|
106
|
-
- Server sends back a _response_
|
|
107
|
-
- Socket is disconnected
|
|
108
|
-
- Server keeps listening
|
|
109
|
-
|
|
110
|
-
### Protocol defines
|
|
111
|
-
- Request Methods:
|
|
112
|
-
- `GET`
|
|
113
|
-
- `POST`
|
|
114
|
-
- ...
|
|
115
|
-
- Resource Identifier syntax: URL
|
|
116
|
-
- Request/Response Headers
|
|
117
|
-
- Response Status Codes
|
|
118
|
-
|
|
119
|
-
### Stateless (Ideally)
|
|
120
|
-
- Server does not maintain state between requests
|
|
121
|
-
- (If required, client "sessions" are managed by the application)
|
|
122
|
-
|
|
123
|
-
<!--
|
|
124
|
-
There are lots of ways to manage session state.
|
|
125
|
-
You may have heard of cookies, but there are others.
|
|
126
|
-
We'll talk about this more when we do Web Dev
|
|
127
|
-
-->
|
|
128
28
|
---
|
|
129
29
|
|
|
130
|
-
#
|
|
30
|
+
# Slide 3
|
|
131
31
|
|
|
132
|
-
|
|
32
|
+
### Some Bullets
|
|
133
33
|
|
|
134
|
-
|
|
34
|
+
- Thing 1
|
|
35
|
+
- Thing 2
|
|
36
|
+
- Thing 3
|
|
135
37
|
|
|
136
|
-
|
|
137
|
-
>
|
|
138
|
-
> —Tim Berners-Lee {.attribution}
|
|
38
|
+
### A Table
|
|
139
39
|
|
|
140
|
-
|
|
40
|
+
| Row Number | Thing |
|
|
41
|
+
|------------|----------|
|
|
42
|
+
| 1 | Parsley |
|
|
43
|
+
| 2 | Sage |
|
|
44
|
+
| 3 | Rosemary |
|
|
45
|
+
| 4 | Thyme |
|
|
141
46
|
|
|
142
|
-
|
|
47
|
+
---
|
|
143
48
|
|
|
144
|
-
|
|
145
|
-
- Resource itself may change
|
|
146
|
-
- Physical storage location may change
|
|
147
|
-
- Client shouldn't care
|
|
49
|
+
# Slide 4
|
|
148
50
|
|
|
149
|
-
|
|
51
|
+
### Revealed Section
|
|
150
52
|
|
|
53
|
+
- Secret {.reveal}
|
|
54
|
+
- Top Secret
|
|
55
|
+
- Super Top Secret
|
|
151
56
|
|
|
57
|
+
### Static Section
|
|
152
58
|
|
|
59
|
+
- You can see this
|
|
60
|
+
- if you want
|
|
61
|
+
- nothing special here
|
|
153
62
|
|
|
154
63
|
---
|
|
155
|
-
#
|
|
156
|
-
|
|
157
|
-

|
|
64
|
+
# Slide 5
|
|
158
65
|
|
|
159
|
-
|
|
160
|
-
Path and query are interpreted by server
|
|
161
|
-
e.g, Common to put identifiers in path, instead query
|
|
162
|
-
-->
|
|
66
|
+
 {.full}
|
|
163
67
|
|
|
164
68
|
---
|
|
165
|
-
#
|
|
69
|
+
# Slide 6
|
|
70
|
+
|
|
166
71
|
|
|
167
72
|
{.full}
|
|
168
73
|
|
|
@@ -174,163 +79,47 @@ e.g, Common to put identifiers in path, instead query
|
|
|
174
79
|
| Headers | `User-Agent: Mozilla/5.0…` | `Content-Type: application/json` |
|
|
175
80
|
| Body | `<!DOCTYPE html> <html lang="en"> … </html>` | `{"squadName": "SuperHeroSquad", …}` |
|
|
176
81
|
|
|
177
|
-
---
|
|
178
|
-
# Start Line of Request
|
|
179
|
-
|
|
180
|
-
``` {.full}
|
|
181
|
-
GET /en-US/docs/Web/HTTP/Messages HTTP/1.1
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
| **Part** | **Description** | **Examples** |
|
|
185
|
-
|------------------|--------------------------------------------------------------|--------------------------------------------------------------|
|
|
186
|
-
| **Method** | A verb that describes the action being requested | `GET`, `POST`, `PUT`, `PATCH`, `DELETE` |
|
|
187
|
-
| **Path** | Path (`/`-delimited) from the root of the server to the resource on which the action is to be applied. | `/`<br>`/app/page.html`<br>`/styles/tokens.css`<br>`/api/destination/1234`<br> |
|
|
188
|
-
| **Query String** | Optional key/value pairs specified in the URL which modify the action requested | `?query=calpoly`<br>`?prd=12&size=xl&color=blue` |
|
|
189
|
-
| **Version** | Version of the HTTP Protocol | `HTTP/1.1`, `HTTP/2` |
|
|
190
|
-
|
|
191
|
-
---
|
|
192
|
-
# HTTP Methods
|
|
193
|
-
|
|
194
|
-
`GET`
|
|
195
|
-
: return the _resource_
|
|
196
|
-
|
|
197
|
-
`POST`
|
|
198
|
-
: create a new _resource_
|
|
199
|
-
|
|
200
|
-
`PUT`
|
|
201
|
-
: replace the full contents of the _resource_
|
|
202
|
-
|
|
203
|
-
`DELETE`
|
|
204
|
-
: remove the _resource_
|
|
205
|
-
|
|
206
|
-
`PATCH`
|
|
207
|
-
: update/modify the _resource_
|
|
208
|
-
|
|
209
|
-
Originally, all resources were web pages {.note}
|
|
210
|
-
|
|
211
|
-
<!--
|
|
212
|
-
Use case: a blogger has a site and wants to make posts.
|
|
213
|
-
They should not need access to the server's file system.
|
|
214
|
-
HTTP should do this.
|
|
215
|
-
-->
|
|
216
|
-
|
|
217
82
|
---
|
|
218
83
|
|
|
219
|
-
#
|
|
84
|
+
# Slide 7
|
|
220
85
|
|
|
221
|
-
|
|
222
|
-
|------------------|----------------------------------------------|--------------------------------------------|
|
|
223
|
-
| **Host** | Hostname and port used to contact server | `localhost:8080` |
|
|
224
|
-
| **Referer** | URL the request originated from | `Referer: https://canvas.calpoly.edu/`<br> |
|
|
225
|
-
| **Accept** | Types of response client will accept | `Accept: application/json`<br> |
|
|
226
|
-
| **Content-Type** | Type of content (if any) being sent in body. | `Content-Type: application/json` |
|
|
227
|
-
|
|
228
|
-
---
|
|
229
|
-
|
|
230
|
-
# Request Body
|
|
231
|
-
|
|
232
|
-
- Separated from headers by blank line (two CR-LFs)
|
|
233
|
-
- Only used for `POST`, `PUT`, and `PATCH`
|
|
234
|
-
- not `GET`!
|
|
235
|
-
- Often derived from form inputs in web pages
|
|
236
|
-
- May be binary
|
|
237
|
-
- example: uploading images to the server
|
|
238
|
-
- Socket disconnected at end of body
|
|
239
|
-
- newer versions of protocol allow the socket to stay open as an optimization
|
|
240
|
-
|
|
241
|
-
- ---
|
|
242
|
-
|
|
243
|
-
# Start Line of an HTTP Response
|
|
244
|
-
``` {.full .center}
|
|
245
|
-
HTTP/1.1 404 Not Found
|
|
246
|
-
```
|
|
247
|
-
|
|
248
|
-
| **Part** | **Description** | **Examples** |
|
|
249
|
-
|-----------------|--------------------------------------------------------------|--------------------------------------------------------------|
|
|
250
|
-
| **Version** | Version of the HTTP Protocol (confirmation) | `HTTP/1.1`, `HTTP/2.0` |
|
|
251
|
-
| **Status Code** | A numeric code indicating success or failure. Must be one of the codes listed in the HTTP standard | `200`, `301`, `404`, `500` |
|
|
252
|
-
| **Status Text** | A brief, human-readable description of the Status Code. Usually, the standard text. | `Success`, `Unauthorized`, `Not Found`, `Internal Server Error` |
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
---
|
|
256
|
-
|
|
257
|
-
# HTTP Response Status Codes
|
|
86
|
+
<aside>
|
|
258
87
|
|
|
88
|
+

|
|
259
89
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
| Success | `200 OK` `201 Created` | `204 No Content` |
|
|
264
|
-
| Redirection | `301 Moved Permanently` | |
|
|
265
|
-
| Client Error | `400 Bad Request` | `401 Unauthorized` |
|
|
266
|
-
| | `403 Forbidden` | `404 Not Found` |
|
|
267
|
-
| Server Error | `500 Internal Server Error` | `502 Bad Gateway` |
|
|
90
|
+
> Cool URIs don't change {.full}
|
|
91
|
+
>
|
|
92
|
+
> —Tim Berners-Lee {.attribution}
|
|
268
93
|
|
|
269
|
-
<!-- We will talk a lot more about this in Web Dev unit -->
|
|
270
94
|
|
|
271
|
-
---
|
|
272
|
-
# Response Headers
|
|
273
95
|
|
|
96
|
+
</aside>
|
|
274
97
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
| **Content-Type** | Type of content (if any) being sent in body. Also known as a MIME-Type. | `Content-Type: application/json` |
|
|
280
|
-
| **Content-Length** | Length (in bytes) of the body content (Optional) | `Content-Length: 12693` |
|
|
98
|
+
- A resource's URL should never change
|
|
99
|
+
- Resource itself may change
|
|
100
|
+
- Physical storage location may change
|
|
101
|
+
- Client shouldn't care
|
|
281
102
|
|
|
282
103
|
---
|
|
283
104
|
|
|
284
|
-
# Response Body
|
|
285
105
|
|
|
286
|
-
|
|
106
|
+
# Slide 7
|
|
287
107
|
|
|
288
|
-
```
|
|
289
|
-
|
|
290
|
-
<html lang="en">
|
|
291
|
-
<head>
|
|
292
|
-
<meta charset="utf-8">
|
|
293
|
-
…
|
|
108
|
+
```HTML {.full}
|
|
109
|
+
<a href="http://example.com/other.html"/>Some other page</a>`
|
|
294
110
|
```
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
###
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
{ "name": "Molecule Man", … },
|
|
308
|
-
…
|
|
309
|
-
]
|
|
310
|
-
}
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
- Content-Type: `application/json`
|
|
314
|
-
|
|
315
|
-
Response body can also be binary data, e.g. `image/jpeg` {.note}
|
|
316
|
-
|
|
317
|
-
---
|
|
318
|
-
|
|
319
|
-
# Summary
|
|
320
|
-
|
|
321
|
-
- The application layer provides specific services for different applications
|
|
322
|
-
- Application Protocols define
|
|
323
|
-
- types of messages which are recognized by hosts
|
|
324
|
-
- expected behavior
|
|
325
|
-
- possible responses for each message type
|
|
326
|
-
- HTTP is the application-layer protocol of the World Wide Web
|
|
327
|
-
- Web browsers make HTTP requests
|
|
328
|
-
- Web servers respond
|
|
329
|
-
- Uses TCP sockets for transport
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
### Syntax
|
|
114
|
+
- `a` is for **A**nchor
|
|
115
|
+
- `href` attribute
|
|
116
|
+
- value is a URL (as defined by HTTP)
|
|
117
|
+
- Content model: mixed content
|
|
118
|
+
|
|
119
|
+
### Semantics
|
|
120
|
+
- creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address
|
|
121
|
+
- Default behavior:
|
|
122
|
+
- load the referenced resource
|
|
330
123
|
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
124
|
+
---
|
|
125
|
+
tags: #slides
|
|
Binary file
|
|
Binary file
|