path: root/2023/info/web-after.md

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


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


[[!template new="1" text="""Overview""" video="00:00:00.000" id="subtitle"mainVideo-web]]

[[!template 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="""Background problems""" video="00:00:35.680" id="subtitle"mainVideo-web]]

[[!template 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="""Solutions outside of Emacs""" video="00:05:31.940" id="subtitle"mainVideo-web]]

[[!template 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="""Emacs solutions""" video="00:09:46.480" id="subtitle"mainVideo-web]]

[[!template 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="""Free clients in Emacs""" video="00:09:54.600" id="subtitle"mainVideo-web]]

[[!template 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 in Emacs""" video="00:12:43.021" id="subtitle"mainVideo-web]]

[[!template 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="""emacs-web-server - overview""" video="00:16:52.380" id="subtitle"mainVideo-web]]

[[!template 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="""emacs-web-server - hello emacs!""" video="00:17:30.380" id="subtitle"mainVideo-web]]

[[!template 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="""emacs-web-server - yolo""" video="00:18:17.580" id="subtitle"mainVideo-web]]

[[!template 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="""emacs-web-server - emacs web framework""" video="00:23:07.940" id="subtitle"mainVideo-web]]

[[!template 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="""Firefox with emacs for extensions""" video="00:29:40.420" id="subtitle"mainVideo-web]]

[[!template 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="""Thank you""" video="00:31:25.360" id="subtitle"mainVideo-web]]

[[!template 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 -->