summaryrefslogblamecommitdiffstats
path: root/2023/info/web-after.md
blob: 1feb1dc4ce51488701046ba4227ff598a5243631 (plain) (tree)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547


                                                                































































































































































































































































































































































































































































































































































                                                                                                                                                    
                                                                                                                                                                  


                                            
<!-- Automatically generated by emacsconf-publish-after-page -->


<a name="web-mainVideo-transcript"></a>
# Transcript

[[!template new="1" text="""Hello, I am Yuchen, and I will be talking about""" start="00:00:00.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""how Emacs may be used to save user freedom on the web.""" start="00:00:03.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""I will begin by describing the background issues,""" start="00:00:06.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""followed by solutions outside of Emacs.""" start="00:00:09.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""Then I will move into the main business of describing""" start="00:00:12.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""several ways to address the issues using Emacs,""" start="00:00:14.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""including free clients in Emacs, web browsers,""" start="00:00:17.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""also known as universal clients in Emacs,""" start="00:00:20.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""approaches using Emacs web server and Emacs web framework,""" start="00:00:23.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""which allows one to write an Emacs package""" start="00:00:27.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""and get a web app for free,""" start="00:00:29.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""as well as using Emacs as a Firefox extension.""" start="00:00:30.760" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""OK, let's now move on to""" start="00:00:35.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""the background issues for this topic.""" start="00:00:37.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""Many of you probably already know what is free software.""" start="00:00:39.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""It is software that respects four user freedoms,""" start="00:00:42.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""including freedom 0, which is the freedom to use,""" start="00:00:45.481" video="mainVideo-web" id="subtitle"]]
[[!template text="""freedom 1 is the freedom to study and modify a program,""" start="00:00:49.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""freedom 2 is the freedom to""" start="00:00:52.279" video="mainVideo-web" id="subtitle"]]
[[!template text="""distribute exact copies of a program,""" start="00:00:54.488" video="mainVideo-web" id="subtitle"]]
[[!template text="""and freedom 3 is the freedom to distribute modified copies.""" start="00:00:57.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""Different environments have different norms""" start="00:01:01.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""with regards to user freedom.""" start="00:01:04.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, GNU/Linux distributions""" start="00:01:06.820" video="mainVideo-web" id="subtitle"]]
[[!template text="""default to free software,""" start="00:01:11.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""even though the official kernel Linux""" start="00:01:13.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""contains non-free code, like non-free firmware.""" start="00:01:15.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""What I mean is, people generally expect free software""" start="00:01:18.420" video="mainVideo-web" id="subtitle"]]
[[!template text="""in these environments.""" start="00:01:23.060" video="mainVideo-web" id="subtitle"]]
[[!template text="""There's plenty of free software""" start="00:01:25.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""built on other free software,""" start="00:01:27.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""so generally people can accomplish tasks""" start="00:01:29.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""using free software only.""" start="00:01:31.220" video="mainVideo-web" id="subtitle"]]
[[!template text="""Emacs, by comparison, is even better.""" start="00:01:33.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""It has freedom built-in, as it is highly customizable""" start="00:01:37.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""with self-documenting configurations.""" start="00:01:41.220" video="mainVideo-web" id="subtitle"]]
[[!template text="""When a Lisp form is evaluated by the user in Emacs,""" start="00:01:44.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""the change is instantly reflected in the environment.""" start="00:01:49.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""Thus, it converts users to hackers effortlessly.""" start="00:01:53.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""From writing setq statements,""" start="00:01:56.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is similar to configurations""" start="00:01:58.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""in the majority of other programs,""" start="00:02:00.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""to writing functions,""" start="00:02:01.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""which are building blocks of Elisp features,""" start="00:02:03.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""to writing features and publishing packages,""" start="00:02:05.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""it is a natural progression.""" start="00:02:08.140" video="mainVideo-web" id="subtitle"]]
[[!template text="""In this sense, Emacs perhaps has""" start="00:02:10.099" video="mainVideo-web" id="subtitle"]]
[[!template text="""the most gentle learning curve for hackers.""" start="00:02:15.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""On the other hand, the default license""" start="00:02:18.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""in the Emacs community""" start="00:02:21.100" video="mainVideo-web" id="subtitle"]]
[[!template text="""is GNU General Public License version 3 or later,""" start="00:02:22.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is the best free software license""" start="00:02:26.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""apart from the Affero license.""" start="00:02:29.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""Now let's move on to web browsers,""" start="00:02:32.300" video="mainVideo-web" id="subtitle"]]
[[!template text="""which by contrast does not default to freedom.""" start="00:02:35.020" video="mainVideo-web" id="subtitle"]]
[[!template text="""For one thing, free software JavaScript projects""" start="00:02:39.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""default to Expat license,""" start="00:02:42.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is also commonly known as the MIT license,""" start="00:02:45.780" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is a lax permissive license that could be exploited""" start="00:02:49.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""as developers could write non-free derivatives""" start="00:02:53.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""and subjugate user freedom.""" start="00:02:55.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""This also contributes to the JavaScript trap.""" start="00:02:59.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""Most popular web browsers nowadays simply download and run""" start="00:03:03.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""any JavaScript code requested by the web page.""" start="00:03:06.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""Generally speaking, there are two camps on this issue.""" start="00:03:10.820" video="mainVideo-web" id="subtitle"]]
[[!template text="""One side would say JavaScript is simply part of life,""" start="00:03:15.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""and an integral part of the so-called modern web.""" start="00:03:19.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""Just accept it, and there is no point in fighting it.""" start="00:03:22.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""Indeed, it can be frustrating when greeted by""" start="00:03:25.300" video="mainVideo-web" id="subtitle"]]
[[!template text="""&quot;This page requires JavaScript and cookies to continue,&quot;""" start="00:03:28.388" video="mainVideo-web" id="subtitle"]]
[[!template text="""or even a blank page when opening a web page""" start="00:03:31.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""while disabling JavaScript.""" start="00:03:34.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""The other camp takes a more principled position""" start="00:03:38.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""and says JavaScript is unnecessary.""" start="00:03:42.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""I mean, people use the web mainly for""" start="00:03:44.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""database-like operations""" start="00:03:47.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""to interact with data stored on other people's computers,""" start="00:03:48.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""like querying, creating, updating, deleting.""" start="00:03:51.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""I mean, 99% of the things happen in getting data,""" start="00:03:55.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""including reading news, watching videos,""" start="00:03:58.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""downloading images, etc.,""" start="00:04:01.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""and posting data, including publishing""" start="00:04:03.340" video="mainVideo-web" id="subtitle"]]
[[!template text="""this sort of materials, publishing news comments, videos.""" start="00:04:06.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""Why does this need any programs""" start="00:04:10.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""to do funny computations, right?""" start="00:04:12.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""Modern web browsers are also a pain to use.""" start="00:04:16.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""They are the opposite to Emacs""" start="00:04:19.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""in terms of customization capabilities.""" start="00:04:21.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""Such problems on the client side""" start="00:04:26.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""is the main focus of this talk.""" start="00:04:29.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""On the server side, the issue is known as SaaSS,""" start="00:04:31.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""service as a software substitute.""" start="00:04:34.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""It is about doing computing for users""" start="00:04:38.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""on other people's computers,""" start="00:04:42.421" video="mainVideo-web" id="subtitle"]]
[[!template text="""which the user has no visibility, let alone control.""" start="00:04:44.541" video="mainVideo-web" id="subtitle"]]
[[!template text="""Examples include translation or photo editing""" start="00:04:48.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""in so-called web applications.""" start="00:04:51.941" video="mainVideo-web" id="subtitle"]]
[[!template text="""Another example would be web applications""" start="00:04:55.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""make recommendations based on user data""" start="00:04:59.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""and suggest what the users read or watch next.""" start="00:05:02.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""On the one hand, SaaSS is an intractable problem""" start="00:05:05.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""because free software is all about user freedom""" start="00:05:09.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""on one's own computer,""" start="00:05:11.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""not someone else's computer.""" start="00:05:13.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""On the other hand, this is also a lesser problem""" start="00:05:16.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""because it has trivial solutions,""" start="00:05:18.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is self-hosting and keeping computations local.""" start="00:05:21.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""Wouldn't it be nice to use a photo editing web application,""" start="00:05:25.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""but without the web?""" start="00:05:28.680" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""Right, now let's move on to solutions outside of Emacs""" start="00:05:31.940" video="mainVideo-web" id="subtitle"]]
[[!template text="""that tackle these problems.""" start="00:05:36.401" video="mainVideo-web" id="subtitle"]]
[[!template text="""There are generally two ways to fix this issue.""" start="00:05:39.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""One is blocking non-free JavaScript,""" start="00:05:42.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""and the other is substituting with free programs.""" start="00:05:45.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""Let's start with blocking.""" start="00:05:48.980" video="mainVideo-web" id="subtitle"]]
[[!template text="""LibreJS, for example, is a Firefox extension""" start="00:05:50.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""blocking non-free, non-trivial JavaScript.""" start="00:05:54.860" video="mainVideo-web" id="subtitle"]]
[[!template text="""It works by intercepting, filtering""" start="00:05:56.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""all requests for JavaScript,""" start="00:05:59.821" video="mainVideo-web" id="subtitle"]]
[[!template text="""recognizing the ones that are trivial or free,""" start="00:06:01.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""and blocking the execution of the others.""" start="00:06:05.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""As an experiment, I logged the LibreJS output""" start="00:06:11.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""for about two weeks,""" start="00:06:13.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""and during which, of all the web pages I loaded,""" start="00:06:15.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""23 domains have at least some LibreJS-compliant scripts.""" start="00:06:19.740" video="mainVideo-web" id="subtitle"]]
[[!template text="""That is not much, though I did use other means""" start="00:06:25.001" video="mainVideo-web" id="subtitle"]]
[[!template text="""to reduce the scenarios""" start="00:06:28.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""where I need to load web pages with JavaScript in Firefox,""" start="00:06:30.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""like using a text browser like Lynx.""" start="00:06:35.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""Then there's also NoScript, which is like LibreJS,""" start="00:06:40.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""but it blocks all scripts, whether free or non-free,
trivial or non-trivial.""" start="00:06:44.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""So the problem with blocking is that""" start="00:06:49.500" video="mainVideo-web" id="subtitle"]]
[[!template text="""blocking with certain scripts and accepting others,""" start="00:06:54.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""there are like... I can think of two problems.""" start="00:06:57.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""One is that it does not help with Freedom 1,""" start="00:07:00.679" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is the freedom to allow users to modify a program""" start="00:07:02.879" video="mainVideo-web" id="subtitle"]]
[[!template text="""and use it in place of the original program.""" start="00:07:07.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""And also it does not help""" start="00:07:13.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""when the non-free JavaScript is mandatory""" start="00:07:15.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""for the functioning of the web page.""" start="00:07:18.860" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, some pages are blank""" start="00:07:20.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""when non-free JavaScript is not executed.""" start="00:07:22.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""So now let's move on to the substitution, the other method.""" start="00:07:27.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""Let's start with userscript.""" start="00:07:36.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""It is a script, it is a user-specified JavaScript""" start="00:07:38.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""injected to a web page.""" start="00:07:41.761" video="mainVideo-web" id="subtitle"]]
[[!template text="""A typical example of userscript tool is GreaseMonkey.""" start="00:07:43.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""Another idea is a proxy that replaces scripts in place,""" start="00:07:48.481" video="mainVideo-web" id="subtitle"]]
[[!template text="""that is, sending user-specified scripts""" start="00:07:53.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""as a response to requests for such scripts.""" start="00:07:55.919" video="mainVideo-web" id="subtitle"]]
[[!template text="""So one example would be Haketilo, however you pronounce it.""" start="00:08:00.900" video="mainVideo-web" id="subtitle"]]
[[!template text="""It's a tool that's built on top of mitmproxy.""" start="00:08:04.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""It is supposed to do this.""" start="00:08:09.620" video="mainVideo-web" id="subtitle"]]
[[!template text="""I haven't used GreaseMonkey nor Haketilo""" start="00:08:11.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""for these purposes yet,""" start="00:08:14.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""so I can't say much about these options.""" start="00:08:16.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""So then there are also free clients""" start="00:08:20.780" video="mainVideo-web" id="subtitle"]]
[[!template text="""which replace the whole frontend,""" start="00:08:24.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""instead of a script requested by web pages""" start="00:08:26.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""from the official web clients.""" start="00:08:30.661" video="mainVideo-web" id="subtitle"]]
[[!template text="""People often refer to them as alternative frontend.""" start="00:08:32.500" video="mainVideo-web" id="subtitle"]]
[[!template text="""YouTube is perhaps the best example""" start="00:08:37.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""as there are so many free clients,""" start="00:08:39.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""including Invidious for the web,""" start="00:08:41.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""youtube-dl and yt-dlp on the command line,""" start="00:08:43.622" video="mainVideo-web" id="subtitle"]]
[[!template text="""MPV and VLC as GUI desktop, LibreTube""" start="00:08:46.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""and NewPipe for Android and so on.""" start="00:08:50.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""Youtube-dl and yt-dlp are especially versatile""" start="00:08:53.260" video="mainVideo-web" id="subtitle"]]
[[!template text="""as they work with many video and audio sites""" start="00:08:56.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""with extractors written in Python,""" start="00:08:59.460" video="mainVideo-web" id="subtitle"]]
[[!template text="""so people can add extractors like extensions.""" start="00:09:02.620" video="mainVideo-web" id="subtitle"]]
[[!template text="""A similar tool would be woob,""" start="00:09:06.300" video="mainVideo-web" id="subtitle"]]
[[!template text="""short for web outside of the browsers.""" start="00:09:09.422" video="mainVideo-web" id="subtitle"]]
[[!template text="""It is a command-line and GUI program""" start="00:09:12.740" video="mainVideo-web" id="subtitle"]]
[[!template text="""that interacts with many web services, even banks.""" start="00:09:16.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""And there are browser extensions""" start="00:09:23.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""that automatically redirect to these clients.""" start="00:09:25.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, Redirector and Libredirect""" start="00:09:28.860" video="mainVideo-web" id="subtitle"]]
[[!template text="""redirect to the free web clients.""" start="00:09:31.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""One could use OpenWith, another extension,""" start="00:09:35.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""to redirect to free non-web clients,""" start="00:09:39.700" video="mainVideo-web" id="subtitle"]]
[[!template text="""for example by opening YouTube links with MPV.""" start="00:09:42.160" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""Now let us move to Emacs-based solutions.""" start="00:09:46.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""They are based on the same ideas but using Emacs.""" start="00:09:51.000" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""First, free clients in Emacs.""" start="00:09:54.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""Basically alternative frontends written in Elisp.""" start="00:09:57.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""There are several advantages.""" start="00:10:00.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, integration with other Emacs tools,""" start="00:10:03.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""good for archiving, making use of Emacs libraries,""" start="00:10:06.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""extensibility, thanks to Emacs' own""" start="00:10:09.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""extensibility and customizability.""" start="00:10:12.489" video="mainVideo-web" id="subtitle"]]
[[!template text="""Examples include mastodon.el for mastodon,""" start="00:10:15.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""or mastorg for viewing and archiving toots with org,""" start="00:10:18.620" video="mainVideo-web" id="subtitle"]]
[[!template text="""sx for Stack Exchange, buildbot.el for buildbot, etc.""" start="00:10:22.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""Here's an example of mastorg displaying""" start="00:10:28.900" video="mainVideo-web" id="subtitle"]]
[[!template text="""the hierarchy of a toot in org.""" start="00:10:31.901" video="mainVideo-web" id="subtitle"]]
[[!template text="""Just wait. Right.""" start="00:10:34.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""So this is the toot itself, this is a first reply,""" start="00:10:39.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""this is a reply to the reply, and so on.""" start="00:10:44.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""And here is an example of""" start="00:10:48.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""opening a Stack Exchange link using sx.""" start="00:10:53.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""Let's check out the tag.""" start="00:11:05.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""So we can browse the Stack Exchange Emacs site
with ease.""" start="00:11:11.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""The idea is quite simple.""" start="00:11:28.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""Just use APIs to get data and display it in Emacs,""" start="00:11:31.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""or just to scrape, like requesting HTML and processing it.""" start="00:11:35.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""An example of scraping is hnreader,""" start="00:11:40.820" video="mainVideo-web" id="subtitle"]]
[[!template text="""which scrapes Hacker News web pages""" start="00:11:44.180" video="mainVideo-web" id="subtitle"]]
[[!template text="""and renders them in Org buffers.""" start="00:11:47.299" video="mainVideo-web" id="subtitle"]]
[[!template text="""Here's how hnreader fetches""" start="00:11:49.780" video="mainVideo-web" id="subtitle"]]
[[!template text="""and displays the Hacker News front page.""" start="00:11:52.380" video="mainVideo-web" id="subtitle"]]
[[!template text="""And one could go into the comments,""" start="00:11:58.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""which shows a similar hierarchy to mastorg's output.""" start="00:12:04.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""And of course, there are limitations for this method,""" start="00:12:14.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is not limited to Emacs.""" start="00:12:19.001" video="mainVideo-web" id="subtitle"]]
[[!template text="""There are basically limitations""" start="00:12:22.540" video="mainVideo-web" id="subtitle"]]
[[!template text="""to any ad hoc bespoke clients,""" start="00:12:24.522" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is catch-up games with remote server,""" start="00:12:28.420" video="mainVideo-web" id="subtitle"]]
[[!template text="""which may change the API interface endpoints""" start="00:12:31.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""or even structure of the responses.""" start="00:12:34.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""This brings us to web browsers in Emacs.""" start="00:12:37.540" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""Web browsers are universal clients""" start="00:12:43.021" video="mainVideo-web" id="subtitle"]]
[[!template text="""because all sites support browsers.""" start="00:12:45.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""So in a world of no JavaScript,""" start="00:12:47.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""there will be no need to write bespoke clients.""" start="00:12:48.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""In such a world,""" start="00:12:52.740" video="mainVideo-web" id="subtitle"]]
[[!template text="""instead of using JavaScript code to fetch JSON,""" start="00:12:53.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""web developers make server do the heavy lifting""" start="00:12:56.740" video="mainVideo-web" id="subtitle"]]
[[!template text="""and just send the complete HTML over.""" start="00:13:00.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""Okay, back to reality.""" start="00:13:02.860" video="mainVideo-web" id="subtitle"]]
[[!template text="""EWW, the default Emacs browser,""" start="00:13:05.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""is what people refer to as a text browser,""" start="00:13:07.660" video="mainVideo-web" id="subtitle"]]
[[!template text="""even though it is not text only and it supports images too.""" start="00:13:11.380" video="mainVideo-web" id="subtitle"]]
[[!template text="""It is a good solid browser that supports forms, etc.""" start="00:13:16.900" video="mainVideo-web" id="subtitle"]]
[[!template text="""The downside is that it does not support CSS,""" start="00:13:20.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""so the formatting could be a bit ugly sometimes.""" start="00:13:24.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""There are some other browsers in Emacs too,""" start="00:13:28.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""like emacs-w3m, which is backed by w3m,""" start="00:13:30.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""and Luwak, which is backed by Lynx.""" start="00:13:34.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""Sorry for the naming, by the way.""" start="00:13:36.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""They often consist of a backend""" start="00:13:39.100" video="mainVideo-web" id="subtitle"]]
[[!template text="""that fetches URL and parses HTML.""" start="00:13:41.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, the built-in URL package""" start="00:13:44.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""and the libxml2 binding in Emacs are decent enough.""" start="00:13:47.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""And the frontend that renders the HTML,""" start="00:13:50.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""like shr or lynx, etc.""" start="00:13:53.189" video="mainVideo-web" id="subtitle"]]
[[!template text="""There is also an xwidget-webkit,""" start="00:13:56.699" video="mainVideo-web" id="subtitle"]]
[[!template text="""but this browser executes JavaScript,""" start="00:14:04.740" video="mainVideo-web" id="subtitle"]]
[[!template text="""so it does not really help in this case.""" start="00:14:07.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""Browser extensions on Emacs are effortless,""" start="00:14:10.540" video="mainVideo-web" id="subtitle"]]
[[!template text="""as they can be written as Emacs packages.""" start="00:14:14.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, one could easily write""" start="00:14:17.460" video="mainVideo-web" id="subtitle"]]
[[!template text="""Elisp scripts with similar functionalities""" start="00:14:19.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""to libredirect and openwith""" start="00:14:21.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""to redirect links, to rewrite URLs,""" start="00:14:24.922" video="mainVideo-web" id="subtitle"]]
[[!template text="""or to open, say, a YouTube URL with MPV,""" start="00:14:30.181" video="mainVideo-web" id="subtitle"]]
[[!template text="""but with even more flexibility.""" start="00:14:37.061" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, here's how one could""" start="00:14:39.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""transform a Zoom link to a dial-in number""" start="00:14:41.780" video="mainVideo-web" id="subtitle"]]
[[!template text="""so that it is easier to join a Zoom meeting""" start="00:14:44.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""without running non-free JavaScript.""" start="00:14:47.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""This might still be bad for privacy,""" start="00:14:50.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""but at least it's good for freedom.""" start="00:14:53.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""As mentioned before,""" start="00:14:58.699" video="mainVideo-web" id="subtitle"]]
[[!template text="""one shortcoming of these Emacs-based browsers,""" start="00:15:00.379" video="mainVideo-web" id="subtitle"]]
[[!template text="""Emacs web browsers, is no support for CSS,""" start="00:15:03.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""so the formatting could leave a lot to be desired.""" start="00:15:08.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""Maybe someone would write""" start="00:15:11.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""an Emacs browser package backed by wkhtmltopdf,""" start="00:15:12.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""which, when opening a URL,""" start="00:15:17.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""it calls wkhtmltopdf to convert the web page to PDF""" start="00:15:20.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""and opens in, say, pdf-view-mode of the pdf-tools,""" start="00:15:26.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""thus containing formatting,""" start="00:15:29.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""and all the URL clicks resolve to the same actions.""" start="00:15:31.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""Also, wkhtmltopdf contains a flag that disables JavaScript.""" start="00:15:34.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""Another idea would be to use Firefox""" start="00:15:43.300" video="mainVideo-web" id="subtitle"]]
[[!template text="""as a processor to fetch URLs.""" start="00:15:45.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""Maybe it can be used to pass back the HTML""" start="00:15:50.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""after executing free JavaScript,""" start="00:15:54.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""say, if Firefox has LibreJS installed.""" start="00:15:56.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""This requires Firefox to send back the DOM,""" start="00:16:01.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""which could be achieved using native messaging.""" start="00:16:05.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""More on that later.""" start="00:16:08.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""Alternatively, one could also write a Firefox extension""" start="00:16:09.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""that sends the DOM in an existing tab back to Emacs.""" start="00:16:14.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""But thinking more about it,""" start="00:16:17.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""I don't think this is actually a useful idea,""" start="00:16:20.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""because most of the sites that work under LibreJS""" start="00:16:23.059" video="mainVideo-web" id="subtitle"]]
[[!template text="""also are useful when all JavaScript is blocked.""" start="00:16:27.139" video="mainVideo-web" id="subtitle"]]
[[!template text="""So, this means these sites are viewable""" start="00:16:34.420" video="mainVideo-web" id="subtitle"]]
[[!template text="""under EWW, Luwak, etc.""" start="00:16:37.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""And another issue is that""" start="00:16:42.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""this could also make running non-free JavaScript easier,""" start="00:16:43.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is harmful to user freedom.""" start="00:16:46.560" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""OK, let's move on to the idea""" start="00:16:52.380" video="mainVideo-web" id="subtitle"]]
[[!template text="""of running Emacs as a web server,""" start="00:16:54.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""so that Emacs client packages are web apps""" start="00:16:55.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""serving as alternative frontends.""" start="00:16:58.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""Why would we want to do this?""" start="00:17:00.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""Well, as much as one wants to be always in Emacs,""" start="00:17:02.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""it is not always feasible.""" start="00:17:06.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, one may be on the go""" start="00:17:08.340" video="mainVideo-web" id="subtitle"]]
[[!template text="""and needs to look up something on the phone.""" start="00:17:10.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""On the other hand, Emacs client packages""" start="00:17:12.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""are just alternative frontends""" start="00:17:14.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""but written in Elisp and run in Emacs.""" start="00:17:16.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""With the help of emacs-web-server package,""" start="00:17:18.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""we can access Emacs packages on the web.""" start="00:17:20.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""emacs-web-server package is not something new,""" start="00:17:23.580" video="mainVideo-web" id="subtitle"]]
[[!template text="""but seems to be underused in the community somehow.""" start="00:17:26.440" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""OK, let's start with a simple example called hello-emacs.""" start="00:17:30.380" video="mainVideo-web" id="subtitle"]]
[[!template text="""It is pretty straightforward.""" start="00:17:33.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""Just require the web server feature""" start="00:17:35.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""and run ws-start to start a server process""" start="00:17:38.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""and send the string &quot;hello emacs&quot;""" start="00:17:41.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""to the process regardless of the request.""" start="00:17:43.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""As you can see, it is going to be available""" start="00:17:45.540" video="mainVideo-web" id="subtitle"]]
[[!template text="""at port 9000 of localhost.""" start="00:17:48.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""Let's try it out.""" start="00:17:51.319" video="mainVideo-web" id="subtitle"]]
[[!template text="""We need to first evaluate this code block.""" start="00:17:53.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""And it works.""" start="00:18:01.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""To stop a server, just run ws-stop on the web server object.""" start="00:18:03.940" video="mainVideo-web" id="subtitle"]]
[[!template text="""Let's evaluate.""" start="00:18:10.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""Yep, it stopped.""" start="00:18:14.960" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""OK, now let's move on to something funny""" start="00:18:17.580" video="mainVideo-web" id="subtitle"]]
[[!template text="""that you should never run on the public web.""" start="00:18:20.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""I call it yolo.el.""" start="00:18:22.220" video="mainVideo-web" id="subtitle"]]
[[!template text="""It uses htmlize""" start="00:18:23.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""to make any Emacs buffer available on the web.""" start="00:18:25.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""Let's try it out.""" start="00:18:28.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""Just require the thing and start the server by yolo-start.""" start="00:18:29.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""And it's available at port 9999.""" start="00:18:33.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""By default, the root domain shows the splash screen""" start="00:18:38.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""which needs to be available.""" start="00:18:41.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""Running display-splash-screen ensures that,""" start="00:18:42.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""but here I've already run it.""" start="00:18:47.219" video="mainVideo-web" id="subtitle"]]
[[!template text="""So let's have a look.""" start="00:18:48.939" video="mainVideo-web" id="subtitle"]]
[[!template text="""And here we have the splash screen.""" start="00:18:54.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""Emacs tutorial and such.""" start="00:18:56.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""Unfortunately, none of these links work,""" start="00:19:00.240" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is something we will revisit later.""" start="00:19:05.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""So, to show an arbitrary buffer,""" start="00:19:10.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""just use the buffer name as a path.""" start="00:19:15.481" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, the slide has the buffer named web.org,""" start="00:19:20.081" video="mainVideo-web" id="subtitle"]]
[[!template text="""so we can display it.""" start="00:19:24.861" video="mainVideo-web" id="subtitle"]]
[[!template text="""Let's try something fancier,""" start="00:19:34.581" video="mainVideo-web" id="subtitle"]]
[[!template text="""like the man page of ffmpeg.""" start="00:19:36.941" video="mainVideo-web" id="subtitle"]]
[[!template text="""So this is the man page of ffmpeg.""" start="00:19:40.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""And the buffer name is a bit more complicated.""" start="00:19:45.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""I have the URL available here.""" start="00:19:48.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""It's missing a star.""" start="00:19:59.140" video="mainVideo-web" id="subtitle"]]
[[!template text="""It's pretty neat if you ask me.""" start="00:20:05.980" video="mainVideo-web" id="subtitle"]]
[[!template text="""And, yeah, what else?""" start="00:20:12.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""Well, we can also browse EWW in Firefox.""" start="00:20:14.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, let's check out gnu.org,""" start="00:20:22.700" video="mainVideo-web" id="subtitle"]]
[[!template text="""and note that the buffer name is EWW with stars.""" start="00:20:30.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""So, ah, it works.""" start="00:20:39.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""And it has all the graphics even.""" start="00:20:41.979" video="mainVideo-web" id="subtitle"]]
[[!template text="""Now, how about we do it the other way around?""" start="00:20:50.900" video="mainVideo-web" id="subtitle"]]
[[!template text="""So we load the current slide web.org using this funny thing.""" start="00:20:55.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""And it works.""" start="00:21:10.780" video="mainVideo-web" id="subtitle"]]
[[!template text="""Not as nice as the Org buffer, though.""" start="00:21:14.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""Right, and now that gives me some funny idea.""" start="00:21:19.940" video="mainVideo-web" id="subtitle"]]
[[!template text="""So I'm a firm believer that memes are meant to be enjoyed""" start="00:21:27.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""in silence rather than read out loud.""" start="00:21:31.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""So I will jump straight to trying this idea,""" start="00:21:33.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is loading the EWW buffer URL with EWW itself.""" start="00:21:38.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""Loading, loading, loading.""" start="00:21:49.860" video="mainVideo-web" id="subtitle"]]
[[!template text="""Spoiler alert, it never loads.""" start="00:21:53.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""So that concludes the demo.""" start="00:21:59.100" video="mainVideo-web" id="subtitle"]]
[[!template text="""And so we can stop the server, web server, with `yolo-stop`.""" start="00:22:03.220" video="mainVideo-web" id="subtitle"]]
[[!template text="""So one could extend yolo to serve arbitrary Emacs commands,""" start="00:22:06.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""making it even more dangerous.""" start="00:22:13.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""That is, for example, `localhost:9000/m-x/magit-status`""" start="00:22:15.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""would run `magit-status`""" start="00:22:26.119" video="mainVideo-web" id="subtitle"]]
[[!template text="""and show the magit-status buffer in the web browser.""" start="00:22:27.820" video="mainVideo-web" id="subtitle"]]
[[!template text="""Or localhost:9000/m-x/eww/""" start="00:22:34.500" video="mainVideo-web" id="subtitle"]]
[[!template text="""any arbitrary URL to browse arbitrary URL""" start="00:22:43.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""with EWW inside of Firefox.""" start="00:22:46.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""It can serve as a way to block all JavaScript,""" start="00:22:50.820" video="mainVideo-web" id="subtitle"]]
[[!template text="""because EWW does not support JavaScript.""" start="00:22:53.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""And enforce preferred colorscheme in Firefox,""" start="00:22:56.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""since htmlize, as you have noticed,""" start="00:23:00.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""faithfully reflects the theme used in Emacs.""" start="00:23:02.840" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""Okay, so we know that yolo is unsafe""" start="00:23:07.940" video="mainVideo-web" id="subtitle"]]
[[!template text="""and needs to be refined.""" start="00:23:10.339" video="mainVideo-web" id="subtitle"]]
[[!template text="""In fact, we don't necessarily want""" start="00:23:11.540" video="mainVideo-web" id="subtitle"]]
[[!template text="""to run Emacs on a web browser.""" start="00:23:13.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""After all, a modern web browser is""" start="00:23:15.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""something one has to fight all the time""" start="00:23:17.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""and should be avoided whenever possible.""" start="00:23:19.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""We want to instead be able to access things""" start="00:23:21.601" video="mainVideo-web" id="subtitle"]]
[[!template text="""when forced to be in a web browser,""" start="00:23:24.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""in which case only the motivations""" start="00:23:26.460" video="mainVideo-web" id="subtitle"]]
[[!template text="""of an alternative frontend apply.""" start="00:23:28.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""Moreover, the ideal situation is an Emacs web framework,""" start="00:23:31.300" video="mainVideo-web" id="subtitle"]]
[[!template text="""a tool that automatically""" start="00:23:35.460" video="mainVideo-web" id="subtitle"]]
[[!template text="""transforms Emacs packages to web apps,""" start="00:23:36.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""so that one does not need to write extra code""" start="00:23:39.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""to get a web app that does the same thing as the package.""" start="00:23:41.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""We also need all links in the web pages to work.""" start="00:23:45.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""As noted before, the links on the yolo Emacs splash screen""" start="00:23:49.100" video="mainVideo-web" id="subtitle"]]
[[!template text="""do not work.""" start="00:23:52.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""So here's a proof-of-concept example. It's called bom.el.""" start="00:23:53.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""It gets some weather forecast data""" start="00:23:58.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""from the Australian Bureau of Meteorology""" start="00:24:00.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""and displays it in an org buffer.""" start="00:24:03.080" video="mainVideo-web" id="subtitle"]]
[[!template text="""So let's try it out. One could do `M-x bom`,""" start="00:24:05.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""which shows an org buffer with links to each state.""" start="00:24:09.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""So based in Melbourne, naturally,""" start="00:24:15.220" video="mainVideo-web" id="subtitle"]]
[[!template text="""I would like to find out the weather of Victoria.""" start="00:24:17.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""And yes, to execute this command. Wait, wait, wait. Right.""" start="00:24:21.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""And we are at a buffer that shows""" start="00:24:27.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""the weather forecast of the whole of Victoria""" start="00:24:33.460" video="mainVideo-web" id="subtitle"]]
[[!template text="""in the hierarchy. Note that this back button""" start="00:24:36.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""takes you to the previous page.""" start="00:24:39.479" video="mainVideo-web" id="subtitle"]]
[[!template text="""So here are the regions of Victoria.""" start="00:24:46.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""I think Melbourne is in Central.""" start="00:24:47.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""And yeah, it shows""" start="00:24:53.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""the seven-day weather forecast of Melbourne.""" start="00:24:54.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""You can also reach this page by running,""" start="00:24:57.260" video="mainVideo-web" id="subtitle"]]
[[!template text="""let's see, directly `M-x bom-state`.""" start="00:25:00.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""Vic.""" start="00:25:08.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""OK. So this works.""" start="00:25:13.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""And this is bom as an Emacs package.""" start="00:25:18.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""Now let's check out bom as a web app""" start="00:25:21.380" video="mainVideo-web" id="subtitle"]]
[[!template text="""transformed by Emacs web framework.""" start="00:25:23.981" video="mainVideo-web" id="subtitle"]]
[[!template text="""So start the web server with bom-start.""" start="00:25:28.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""And let's try it out. It's at 9000 again.""" start="00:25:33.020" video="mainVideo-web" id="subtitle"]]
[[!template text="""Oops. Invalid path. Oh, that's because""" start="00:25:39.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""it makes exactly one command to one path.""" start="00:25:42.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""So remember that we used the bom command""" start="00:25:46.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""to show the landing page.""" start="00:25:49.301" video="mainVideo-web" id="subtitle"]]
[[!template text="""So here we need the bom in the path as well.""" start="00:25:50.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""And it shows the same landing page, except in HTML.""" start="00:25:54.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""Let's check out Victoria weather forecast as before.""" start="00:26:00.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""And it shows an HTML converted from the org buffer""" start="00:26:07.260" video="mainVideo-web" id="subtitle"]]
[[!template text="""using ox export HTML, whatever.""" start="00:26:12.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""And you can see even the back button is here.""" start="00:26:17.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""That takes you to /bom.""" start="00:26:20.359" video="mainVideo-web" id="subtitle"]]
[[!template text="""So let's have a look at Melbourne. Here it is.""" start="00:26:26.220" video="mainVideo-web" id="subtitle"]]
[[!template text="""Hooray, it works.""" start="00:26:29.140" video="mainVideo-web" id="subtitle"]]
[[!template text="""So, yeah, as usual,""" start="00:26:31.380" video="mainVideo-web" id="subtitle"]]
[[!template text="""you can stop the web server with `M-x bom-stop`.""" start="00:26:33.960" video="mainVideo-web" id="subtitle"]]
[[!template text="""Right. And alternatively,""" start="00:26:40.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""it can also be deployed directly in terminal""" start="00:26:43.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""in a dedicated Emacs daemon.""" start="00:26:48.500" video="mainVideo-web" id="subtitle"]]
[[!template text="""So you can see that there's a one-one correspondence""" start="00:26:56.100" video="mainVideo-web" id="subtitle"]]
[[!template text="""between the Emacs package interface and the web interface.""" start="00:26:58.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""And that implies some restrictions to the Emacs package""" start="00:27:03.100" video="mainVideo-web" id="subtitle"]]
[[!template text="""for the Emacs web framework to be able to do its job. Right.""" start="00:27:06.040" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, the package needs to have an Org interface""" start="00:27:09.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""and the links that trigger other commands""" start="00:27:13.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""need to be in Elisp links""" start="00:27:15.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""so that the Emacs web framework""" start="00:27:17.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""can translate it to web server URL path.""" start="00:27:20.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""Note that Emacs web server framework is not a real package.""" start="00:27:24.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""I wrote some functions in bom.el serving the purpose,""" start="00:27:28.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""and they should be separated out eventually""" start="00:27:33.340" video="mainVideo-web" id="subtitle"]]
[[!template text="""without much trouble.""" start="00:27:35.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""One could get weather forecast""" start="00:27:37.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""without running JavaScript anyway,""" start="00:27:40.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""which makes bom.el less important""" start="00:27:42.220" video="mainVideo-web" id="subtitle"]]
[[!template text="""as an alternative web client.""" start="00:27:45.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""Though it does provide, dare I say,""" start="00:27:48.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""a clean and minimal interface""" start="00:27:50.520" video="mainVideo-web" id="subtitle"]]
[[!template text="""compared to common weather forecast web pages.""" start="00:27:52.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""Other more relevant use cases could be Mastodon,""" start="00:27:55.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""whose official web client requires JavaScript""" start="00:27:58.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""to display a post.""" start="00:28:01.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""The mastorg package that shows an Org hierarchy of toots""" start="00:28:03.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""rooted as a given toot could be a low-hanging fruit.""" start="00:28:08.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""The limitation of Org interface requirements""" start="00:28:12.179" video="mainVideo-web" id="subtitle"]]
[[!template text="""can also be relaxed in further work,""" start="00:28:15.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""if one could extend Emacs web framework""" start="00:28:17.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""to translate back and forth between Emacs widgets,""" start="00:28:21.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""say, including buttons and web page widgets,""" start="00:28:24.200" video="mainVideo-web" id="subtitle"]]
[[!template text="""including links.""" start="00:28:28.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""Another more far-fetched idea would be""" start="00:28:30.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""to translate to other types of interfaces,""" start="00:28:32.600" video="mainVideo-web" id="subtitle"]]
[[!template text="""like GNU/Linux or Android GUI.""" start="00:28:35.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""How about animations? Say, M-x butterfly,""" start="00:28:44.020" video="mainVideo-web" id="subtitle"]]
[[!template text="""or even web games from Emacs games?""" start="00:28:47.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""Possibilities are unlimited in this, as always, in Emacs.""" start="00:28:54.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""I also noticed some limitations""" start="00:29:00.100" video="mainVideo-web" id="subtitle"]]
[[!template text="""when trying to actually host bom.el on the public web.""" start="00:29:03.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""Given the limited access to the Emacs server,""" start="00:29:07.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""I was comfortable enough to give bom.el a go""" start="00:29:13.540" video="mainVideo-web" id="subtitle"]]
[[!template text="""to serve it on the public web.""" start="00:29:16.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""However, I immediately stopped""" start="00:29:18.800" video="mainVideo-web" id="subtitle"]]
[[!template text="""after noticing how slow it is.""" start="00:29:20.560" video="mainVideo-web" id="subtitle"]]
[[!template text="""It can take more than 30 seconds""" start="00:29:22.880" video="mainVideo-web" id="subtitle"]]
[[!template text="""to load a page of weather forecast for a state.""" start="00:29:24.720" video="mainVideo-web" id="subtitle"]]
[[!template text="""I am also not sure how many simultaneous connections""" start="00:29:27.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""it can handle.""" start="00:29:31.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""In any case, I think the package emacs-web-server""" start="00:29:32.380" video="mainVideo-web" id="subtitle"]]
[[!template text="""could do with some performance enhancement.""" start="00:29:36.440" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""Right. Because of the time constraints,""" start="00:29:40.420" video="mainVideo-web" id="subtitle"]]
[[!template text="""I will briefly touch one final idea,""" start="00:29:44.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""which is to use Emacs as a Firefox browser extension.""" start="00:29:45.760" video="mainVideo-web" id="subtitle"]]
[[!template text="""We already have org-protocol,""" start="00:29:50.420" video="mainVideo-web" id="subtitle"]]
[[!template text="""which allows Firefox to communicate""" start="00:29:52.900" video="mainVideo-web" id="subtitle"]]
[[!template text="""with a running Emacs server""" start="00:29:54.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""by sending an org-protocol URL to the latter.""" start="00:29:55.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""It can be used not just for capturing or storing links,""" start="00:29:59.780" video="mainVideo-web" id="subtitle"]]
[[!template text="""but to execute arbitrary code on any component of the URL.""" start="00:30:03.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""However, it is fire and forget,""" start="00:30:10.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""and Emacs cannot tell Firefox what to do.""" start="00:30:11.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""There may be a length restriction, too.""" start="00:30:16.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""For example, Firefox may not be able to send back""" start="00:30:17.920" video="mainVideo-web" id="subtitle"]]
[[!template text="""the whole DOM.""" start="00:30:20.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""This claim needs to be verified, though.""" start="00:30:22.420" video="mainVideo-web" id="subtitle"]]
[[!template text="""Native messaging is one solution to this problem.""" start="00:30:26.220" video="mainVideo-web" id="subtitle"]]
[[!template text="""It is a two-way communication channel""" start="00:30:30.020" video="mainVideo-web" id="subtitle"]]
[[!template text="""between a Firefox web extension and a local system process""" start="00:30:31.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""started by the web extension.""" start="00:30:35.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""The process could be an Emacs server,""" start="00:30:37.840" video="mainVideo-web" id="subtitle"]]
[[!template text="""which would make Emacs effectively""" start="00:30:40.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""a Firefox web browser extension.""" start="00:30:42.400" video="mainVideo-web" id="subtitle"]]
[[!template text="""In this case, Elisp would be the main extension language,""" start="00:30:48.680" video="mainVideo-web" id="subtitle"]]
[[!template text="""rather than JavaScript.""" start="00:30:52.000" video="mainVideo-web" id="subtitle"]]
[[!template text="""However, JavaScript is still needed at the Firefox end""" start="00:30:53.620" video="mainVideo-web" id="subtitle"]]
[[!template text="""of the communication channel.""" start="00:30:56.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""As a simple example of this idea,""" start="00:30:59.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""Firefox could ask Emacs to redirect a URL""" start="00:31:01.160" video="mainVideo-web" id="subtitle"]]
[[!template text="""by removing tracking and using alternative frontend, etc.""" start="00:31:04.440" video="mainVideo-web" id="subtitle"]]
[[!template text="""However, I was not able to implement this""" start="00:31:08.320" video="mainVideo-web" id="subtitle"]]
[[!template text="""due to some tricky business""" start="00:31:12.480" video="mainVideo-web" id="subtitle"]]
[[!template text="""with enforcing synchronicity""" start="00:31:14.280" video="mainVideo-web" id="subtitle"]]
[[!template text="""that allows the web extension""" start="00:31:15.640" video="mainVideo-web" id="subtitle"]]
[[!template text="""to wait for responses from Emacs.""" start="00:31:17.120" video="mainVideo-web" id="subtitle"]]
[[!template text="""Some further work, I suppose.""" start="00:31:20.200" video="mainVideo-web" id="subtitle"]]
[[!template new="1" text="""That concludes my talk.""" start="00:31:25.360" video="mainVideo-web" id="subtitle"]]
[[!template text="""Thank you for your attention.""" start="00:31:28.254" video="mainVideo-web" id="subtitle"]]



Captioner: ken

Questions or comments? Please e-mail [id@ypei.org](mailto:id@ypei.org?subject=Comment%20for%20EmacsConf%202023%20web%3A%20Emacs%20saves%20the%20Web%20%28maybe%29)


<!-- End of emacsconf-publish-after-page -->