Skip to content

Commit 803a72b

Browse files
author
R. S. Doiel
committed
commiting to main
1 parent f265ba1 commit 803a72b

10 files changed

+157
-134
lines changed

Makefile

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ SLIDE_FORMAT = slidy
77

88
build: clean html website
99

10-
html: .FORCE
11-
pandoc -V lang=en -s -t $(SLIDE_FORMAT) presentation1.md -o presentation1.html
12-
git add presentation1.html index.html
13-
1410
CITATION.cff: codemeta.json
1511
cmt codemeta.json CITATION.cff
1612

@@ -23,6 +19,10 @@ website: CITATION.cff about.md .FORCE
2319
cleanweb: .FORCE
2420
rm $(HTML_PAGES)
2521

22+
html: .FORCE
23+
pandoc -V lang=en -s -t $(SLIDE_FORMAT) presentation1.md -o presentation1.html
24+
git add presentation1.html index.html
25+
2626
pdf: .FORCE
2727
pandoc -V lang=en -s -t beamer presentation1.md -o presentation1.pdf
2828

4.79 KB
Binary file not shown.
4.79 KB
Binary file not shown.

pagefind/index/en-US_59cb5a1.pf_index

7.51 KB
Binary file not shown.

pagefind/index/en-US_97b4e97.pf_index

7.51 KB
Binary file not shown.

pagefind/pagefind-entry.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"version":"1.3.0","languages":{"en-US":{"hash":"en-US_645a354b52e9c","wasm":"en-US","page_count":3}}}
1+
{"version":"1.3.0","languages":{"en-US":{"hash":"en-US_16b017aa6e5cc","wasm":"en-US","page_count":3}}}
107 Bytes
Binary file not shown.
108 Bytes
Binary file not shown.

presentation1.html

Lines changed: 100 additions & 86 deletions
Large diffs are not rendered by default.

presentation1.md

Lines changed: 52 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ keywords: [ "microservices", "SQLite3", "Deno", "TypeScript", "Dataset" ]
2020
url: "https://caltechlibrary.github.io/t2t3_dataset_web_app/presentation1.html"
2121
---
2222

23-
# Dataset and a Web Components
23+
# Welcome to Dataset and a Web Components
24+
25+
- Dataset provides a turn key web static service and JSON API
26+
- Extending HTML elements using Web Components
2427

2528
## What we'll do
2629

@@ -34,7 +37,7 @@ url: "https://caltechlibrary.github.io/t2t3_dataset_web_app/presentation1.html"
3437

3538
Follow along at <https://caltechlibrary.github.io/t2t3_dataset_web_apps/presentation1.html>
3639

37-
You can download the presentation in a zip fil at <https://github.com/caltechlibrary/t2t3_dataset_web_apps/releases>
40+
You can download the presentation in a zip file at <https://github.com/caltechlibrary/t2t3_dataset_web_apps/releases>
3841

3942
# Getting started, requirements
4043

@@ -61,63 +64,63 @@ We can start our first iteration of our application once you have these availabl
6164

6265
GOAL: A simple web application that lets us curate a list of recipes.
6366

64-
# Part 1: What are the parts of our application?
67+
# Part 1.1: What are the parts of our application?
6568

6669
1. A web service for managing the recipe collection
6770
2. A way to browse recipes by name
6871
3. A page to display a recipe
6972
4. A web form for adding or edit our recipes
7073

71-
# Part 1: What is a recipe?
74+
# Part 1.1: What is a recipe?
7275

7376
- A "key", the unique identifier of a recipe
7477
- A name
7578
- A list of ingredients and measures (CSV data)
7679
- A procedure describing the preparation process (text)
7780

78-
# Part 1: Strategy.
81+
# Part 1.1: Strategy.
7982

8083
1. Setting up our web service
81-
2. Mock up using HTML
84+
2. Sketch your app using HTML
8285
3. Wire up and test
8386

84-
# Part 2: Setting up our web service
87+
# Part 1.2: Setting up our web service
8588

86-
1. create our recipes.ds collection
87-
2. load sample data into our recipes.ds collection
89+
1. create our `recipes.ds` collection
90+
2. load sample data into our `recipes.ds` collection
8891
3. Configure and run our collection as a web service
8992

90-
# Part 2: creating our collection
93+
# Part 1.2: creating our collection
9194

9295
We use the `dataset` command line program to initialize a dataset collection.
9396

9497
~~~shell
9598
dataset init recipes.ds
9699
~~~
97100

98-
# Part 2: Loading some sample data
101+
# Part 1.2: Loading some sample data
99102

100103
We can now load some sample data, see [recipes.jsonl](recipes.jsonl).
101104

102105
~~~shell
103106
dataset load recipes.ds <recipes.jsonl
104107
~~~
105108

106-
# Part 2: create an static content directory directory
109+
# Part 1.2: create an static content directory directory
107110

108111
~~~shell
109112
mkdir htdocs
110113
mkdir htdocs/modules
111114
mkdir htdocs/css
112115
~~~
113116

114-
# Part 2: Setting up our web service, configuring the web service
117+
# Part 1.2: Setting up our web service, configuring the web service
115118

116119
`datasetd` provides a turn key web service defined by a simple YAML file. It can host
117120
one or more dataset collections. It provides a static file service as well as a JSON API
118121
for each collection. Let's call this [recipes_api.yaml](recipes_api.yaml).
119122

120-
# Part 2: Setting up our web service, configuring the web service
123+
# Part 1.2: Setting up our web service, configuring the web service
121124

122125
~~~yaml
123126
#!/usr/bin/env -S datasetd -debug
@@ -137,7 +140,7 @@ collections:
137140
order by src->>'name'
138141
~~~
139142

140-
# Part 2: Starting and stopping the web service
143+
# Part 1.2: Starting and stopping the web service
141144

142145
Starting the web service.
143146

@@ -149,11 +152,11 @@ datasetd recipes_api.yaml
149152
- Look at the terminal window, do you see the log message for the request?
150153
- You can shutdown the service by press control and C (Ctrl-C) in the terminal session
151154

152-
# Part 3: Creating our static content
155+
# Part 1.3: Creating our static content
153156

154157
The web service is running but if you go to the root URL, <http://localhost:8001/>, you'll get a 404 page. We need to create HTML pages to hold the content that will be curated in our recipes application. We'll be create three HTML documents and four JavaScript modules to help with that. But before we proceed with coding let's think about what we're curating.
155158

156-
# Part 3: What should our recipe metadata look like?
159+
# Part 1.3: What should our recipe metadata look like?
157160

158161
name
159162
: A line of text. Held by an`input` element
@@ -166,7 +169,7 @@ procedure
166169

167170
We'll need a submit button to save a new or edited recipe.
168171

169-
# Part 3: What are our web pages?
172+
# Part 1.3: What are our web pages?
170173

171174
[htdocs/index.html](https://github.com/caltechlibrary/t2t3_dataset_web_apps/blob/main/htdocs/index.html)
172175
: Display a list of our recipes
@@ -177,7 +180,7 @@ We'll need a submit button to save a new or edited recipe.
177180
[htdocs/edit_recipe.html](https://github.com/caltechlibrary/t2t3_dataset_web_apps/blob/main/htdocs/edit_recipe.html)
178181
: A page used to add and edit recipes we've collected
179182

180-
# Part 3: populating our pages
183+
# Part 1.3: populating our pages
181184

182185
We'll create four modules, one specific to each HTML page and one utility module
183186

@@ -193,22 +196,22 @@ We'll create four modules, one specific to each HTML page and one utility module
193196
[htdocs/modules/utils.js](https://github.com/caltechlibrary/t2t3_dataset_web_apps/blob/main/htdocs/modules/utils.js)
194197
: This module handles retrieving data from the JSON API and finding the object's key
195198

196-
# Part 3: Fire up our web service
199+
# Part 1.3: Fire up our web service
197200

198201
In a terminal run our startup command
199202

200203
~~~shell
201204
datasetd recipe_api.yaml
202205
~~~
203206

204-
# Part 3: Test using your web browser
207+
# Part 1.3: Test using your web browser
205208

206209
1. Go to <http://localhost:8001>
207210
2. In your browser open your "developer tools"
208211
3. Reload the page and monitor the loads
209212
4. Click through the sites
210213

211-
# Part 3: Debugging and improving
214+
# Part 1.3: Debugging and improving
212215

213216
1. There will be issues you need to debug
214217
2. What happens when you add a recipe?
@@ -219,19 +222,19 @@ datasetd recipe_api.yaml
219222

220223
Let's take a short break then we'll comeback and iterate. I'm available to answer questions.
221224

222-
# Part 1, version 2
225+
# Part 2
223226

224227
We're going to set aside the prototype noting what worked and what didn't work.
225228

226-
# Part 1, version 2: Setting up
229+
# Part 2.1: Setting up
227230

228231
What we are doing next
229232

230233
- Creating a new dataset collection called, `recipes2.ds`
231234
- Creating a new, `recipes_api2.yaml`
232235
- Creating a new directory structure for our static content called, `htdocs2`
233236

234-
# Part 1, version 2: Setting up
237+
# Part 2.2: Setting up
235238

236239
On macOS and Linux
237240

@@ -251,15 +254,15 @@ copy -Recurse htdocs htdocs2
251254

252255
(NOTE: The first line should look familiar, the others are just time savers)
253256

254-
# Part 1, version 2: Updating our YAML configuration
257+
# Part 2.2: Updating our YAML configuration
255258

256259
- edit our [recipes_api2.yaml](https://github.com/caltechlibrary/t2t3_dataset_web_apps/blob/main/recipes_api2.yaml)
257260
- update the `htdocs` reference
258261
- update the port number in hosts to 8002
259262
- update the dataset to `recipes2.ds`
260263
- Are their other files that need to be edited?
261264

262-
# Part 1, version 2: Testing a new instance
265+
# Part 2.2: Testing a new instance
263266

264267
1. Test our new instance
265268
a. what is broken?
@@ -270,20 +273,20 @@ copy -Recurse htdocs htdocs2
270273
dataset recipes_api2.yaml
271274
~~~
272275

273-
# Part 2, version 2: Introducing Web Components
276+
# Part 2.2: Introducing Web Components
274277

275278
1. A means of extending HTML elements supported in your web browser
276279
2. Implemented as JavaScript Modules
277280

278-
# Part 2, version 2: CL-web-components
281+
# Part 2.2: CL-web-components
279282

280283
- CL-web-components, a collection of web components designed for Caltech Library
281284
- Using your web browser retrieve the latest versions
282285

283286
<https://github.com/caltechlibrary/CL-web-components/releases>
284287

285288

286-
# Part 2, version 2: Copy the web components to the modules directory (macOS, Linux)
289+
# Part 2.2: Copy the web components to the modules directory (macOS, Linux)
287290

288291
- Unzip just the JavaScript files
289292
- Copy the JavaScript files in the zip file to `htdocs2/modules/`.
@@ -295,7 +298,7 @@ unzip $HOME/Downloads/cl-web-components-0.0.6.zip *.js
295298
mv -v *.js htdocs2/models/
296299
~~~
297300

298-
# Part 2, version 2: Copy the web components to the modules directory (Windows)
301+
# Part 2.2: Copy the web components to the modules directory (Windows)
299302

300303
- Unzip just the JavaScript files
301304
- Copy the JavaScript files in the zip file to `htdocs2/modules/`.
@@ -307,7 +310,7 @@ unzip $HOME\Downloads\cl-web-components-0.0.6.zip *.js
307310
move *.js htdocs2\models\
308311
~~~
309312

310-
# Part 2, version 2: Web Components, CL-web-components
313+
# Part 2.2: Web Components, CL-web-components
311314

312315
[CSVTextarea](https://github.com/caltechlibrary/CL-web-components/blob/main/csvtextarea.js)
313316
: Wraps a textarea element and presents a editable table of cells
@@ -318,13 +321,13 @@ move *.js htdocs2\models\
318321
[SortableTable](https://github.com/caltechlibrary/CL-web-components/blob/main/sortable_table.js)
319322
: Wraps an HTML table making it sort-able and filterable on a column
320323

321-
# Part 2, version 2: Adding CSVTextarea to edit_recipe.html
324+
# Part 2.2: Adding CSVTextarea to edit_recipe.html
322325

323326
- copy `csvtextarea.js` to the modules directory under htdocs2
324327
- edit [htdocs2/edit_recipe.html]() to include the CSVTextarea module in the document head
325328
- edit `htdocs2/edit_recipe.html` wrapping the ingredients textarea with our csvtextarea
326329

327-
# Part 2, version 2: Restart recipes_api2.yaml and test
330+
# Part 2.2: Restart recipes_api2.yaml and test
328331

329332
Start up our web service
330333

@@ -336,44 +339,47 @@ dataset recipes_api2.yaml
336339
2. Turn on your developer tools
337340
3. Test the web component
338341

339-
# Part 3, version 2: solving the missing redirect from submit status
342+
# Part 2.3: solving the missing redirect from submit status
340343

341344
- In version 1 when we created or updated and element we were taken to a status page
342345
- What we want to do is go to a more logical place
343346
- We can use JavaScript to handle the form submission and then redirect to the right place
344347

345-
# Part 3, version 2: Adding a listener for form submission
348+
# Part 2.3: Adding a listener for form submission
346349

347350
1. Add a script element in `edit_recipe.html`
348351
2. Add an event listener for the form that uses `saveRecipe` function from `utils.js`
349352
3. Reload page and test our revision
350353

351-
# Part 3, version 2: Anatomy of our saveRecipe
354+
# Part 2.3: Anatomy of our saveRecipe
352355

353356
1. Retrieve the data from the web form
354357
2. Use fetch to send the data and receive a response
355358
3. Based on the response decide where to go
356359

357-
# Part 3, version 3: Exploring further
360+
# Part 3: Exploring further
358361

359362
- [MDN](https://developer.mozilla.org/en-US)
360363
- LLMs, including ones you can run locally via Ollama
361364

362-
# What we've covered and some questions
365+
# Part 3: What we've covered and some questions
363366

364367
- The server side can be turn key using a JavaScript web page
365368
- What is it a good idea?
366369
- When is be an bad idea?
370+
- Moving from a single layer stack to a two or three layer stack
371+
- Dataset behind a front end web server
372+
- Dataset behind middle ware
367373

368-
# What we've covered and some questions
374+
# Part 3: What we've covered and some questions
369375

370376
- The traditional division of responsibilities in the browser is
371377
- HTML for structured data markup
372378
- CSS for visual design and layout
373379
- JavaScript to orchestrate behaviors
374380
- Why bother with Web Components?
375381

376-
# Misc thoughts
382+
# Part 3: Misc thoughts
377383

378384
- Progressive enhancement is still relevant in 2025
379385
- Web Components offer the possibility of consistent rich behaviors across
@@ -384,8 +390,11 @@ dataset recipes_api2.yaml
384390

385391
- Build with the grain of the web
386392
- the building blocks are HTML, CSS and JavaScript
387-
- localhost services versus internet services
388-
- security concerns
393+
- take advantage of running software on localhost
394+
- Production, build in layers
395+
- access control with front end web service (Apache+Shibboleth, NginX+Shibboleth)
396+
- data validation with middle ware (localhost: TypeScript or Python)
397+
- object storage with Dataset (localhost)
389398

390399
# Reference: Dataset
391400

0 commit comments

Comments
 (0)