trying to fix

This commit is contained in:
Chris Cochrun 2022-01-03 12:41:35 -06:00
parent fa407dfeb6
commit e013d7569e
22945 changed files with 447936 additions and 0 deletions

View file

@ -0,0 +1,213 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="author" content="By John Mercouris" />
<title>Emacs with Nyxt: extend your editor with the power of a Lisp browser</title>
<style type="text/css">
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1 class="title">Emacs with Nyxt: extend your editor with the power of a Lisp browser</h1>
<p class="author">By John Mercouris</p>
</header>
<p>We recently came across a fantastic (EmacsConf) demonstration by Andrea. An absolute must-watch for any serious hacker!</p>
<p>You can see the video here: <a href="https://emacsconf.org/2021/talks/nyxt/" class="uri">https://emacsconf.org/2021/talks/nyxt/</a></p>
<p>or click on our hosted link here: <a href="../static/video/emacs-with-nyxt.webm">Emacs with Nyxt</a></p>
<p>Also, don't forget to check out <a href="https://github.com/ag91/emacs-with-nyxt">Andrea's work</a> on GitHub.</p>
<blockquote>
<p>In 2021 browsers are essential if you use a computer. Even if Emacs users love text as a format, they may need to shop and video call from time to time (even more so in a pandemic!). Some of us modified their browsers to at least have the same keybindings as our editor of choice. What if I told you there is an Emacsy browser in the making? What if you could &quot;ace-jump&quot; within a web page? What if you could run a REPL to extend your browser while browsing? What if you could record macros?! The browser exists: its name is Nyxt!</p>
<p>In this talk I will share why it has great potential, how you can integrate it with Emacs, and how you can migrate your Emacs mastery to the web!</p>
<p>If you were wishing for a Lispy and Emacsy browser, you should not miss this talk!</p>
</blockquote>
<h2 id="transcript">Transcript</h2>
<p>WEBVTT</p>
<p>00:00.000 &gt; 00:01.783 Welcome to my talk &quot;Emacs with Nyxt:</p>
<p>00:01.783 &gt; 00:02.823 extend your editor with</p>
<p>00:02.823 &gt; 00:04.623 the power of a Lisp browser&quot;.</p>
<p>00:04.623 &gt; 00:06.583 Who am I? I'm Andrea. I work as</p>
<p>00:06.583 &gt; 00:08.303 a Clojure software engineer somewhere</p>
<p>00:08.303 &gt; 00:09.743 in the middle of the UK.</p>
<p>00:09.743 &gt; 00:11.743 And I inherited my passion for Emacs</p>
<p>00:11.743 &gt; 00:13.703 from my Ph.D. supervisor, and from that</p>
<p>00:13.703 &gt; 00:15.943 moment on Emacs became a core tool</p>
<p>00:15.943 &gt; 00:17.863 of my daily routine.</p>
<p>00:17.863 &gt; 00:20.863 You can find more about me and my interests</p>
<p>00:20.863 &gt; 00:23.983 at ag91.github.io, that is my blog.</p>
<p>00:23.983 &gt; 00:25.183 Let's get into the talk.</p>
<p>00:25.183 &gt; 00:28.183 So, why Nyxt? Nyxt is an extensible</p>
<p>00:28.183 &gt; 00:29.543 Common Lisp browser.</p>
<p>00:29.543 &gt; 00:31.903 Fundamentally, it's Emacs for web browsing.</p>
<p>00:31.903 &gt; 00:34.063 And why do I say that? I say that</p>
<p>00:34.063 &gt; 00:36.063 because is a…, this is Nyxt.</p>
<p>00:36.063 &gt; 00:40.223 You can see that is organized with buffers,</p>
<p>00:40.223 &gt; 00:44.063 and you can see that I can invoke command,</p>
<p>00:44.063 &gt; 00:47.183 like, I was in Emacs with this.</p>
<p>00:47.183 &gt; 00:48.983 So, I'm using even the same keybindings,</p>
<p>00:48.983 &gt; 00:52.783 so, for that I used M-x.</p>
<p>00:52.783 &gt; 00:55.983 And some of the features of Nyxt</p>
<p>00:55.983 &gt; 01:00.103 are just amazing. For example, say that</p>
<p>01:00.103 &gt; 01:03.823 you want to mark some text, this is the way,</p>
<p>01:03.823 &gt; 01:08.703 so, I just pressed Control space (C-SPC),</p>
<p>01:08.703 &gt; 01:10.423 and now I will start the marker,</p>
<p>01:10.423 &gt; 01:13.223 and now I can copy the text, and when</p>
<p>01:13.223 &gt; 01:15.663 I'm done, I can finish to use visual mode.</p>
<p>01:15.663 &gt; 01:18.023 Or, for example, what about…,</p>
<p>01:18.023 &gt; 01:21.183 I want to navigate without using my mouse.</p>
<p>01:21.183 &gt; 01:25.183 I can do something like follow-hint,</p>
<p>01:25.183 &gt; 01:28.023 and this opens the possibility to press</p>
<p>01:28.023 &gt; 01:29.903 AC to jump on the Articles,</p>
<p>01:29.903 &gt; 01:33.063 and all of a sudden I'm on the page</p>
<p>01:33.063 &gt; 01:36.023 with the blog posts of the Atlas team.</p>
<p>01:36.023 &gt; 01:39.383 Or, for example, I can extend my browser</p>
<p>01:39.383 &gt; 01:40.783 from within the browser.</p>
<p>01:40.783 &gt; 01:43.223 So, you can see I can evaluate a command,</p>
<p>01:43.223 &gt; 01:48.663 a Common Lisp code,</p>
<p>01:48.663 &gt; 01:50.903 and it produces the result.</p>
<p>01:50.903 &gt; 01:56.183 And then, for example, I can also auto….</p>
<p>01:56.183 &gt; 01:58.663 This browser comes by default with an</p>
<p>01:58.663 &gt; 02:01.143 integration with your password manager,</p>
<p>02:01.143 &gt; 02:04.223 in my case it's pass, and I can copy</p>
<p>02:04.223 &gt; 02:08.783 a password. This is just as easy as is,</p>
<p>02:08.783 &gt; 02:10.543 it comes by default.</p>
<p>02:10.543 &gt; 02:13.583 Another incredibly useful feature</p>
<p>02:13.583 &gt; 02:18.023 that I didn't find in other browsers is</p>
<p>02:18.023 &gt; 02:20.503 searching between multiple buffers.</p>
<p>02:20.503 &gt; 02:23.503 So, this function search-buffers,</p>
<p>02:23.503 &gt; 02:25.823 this command lets me select</p>
<p>02:25.823 &gt; 02:29.503 some of my open buffers,</p>
<p>02:29.503 &gt; 02:32.503 and I can look for a string in there.</p>
<p>02:32.503 &gt; 02:34.623 And you would see that the hits are</p>
<p>02:34.623 &gt; 02:37.423 from the buffers that I have open,</p>
<p>02:37.423 &gt; 02:42.583 for example, Clojure or</p>
<p>02:42.583 &gt; 02:46.103 the YouTube video about Clojure.</p>
<p>02:46.103 &gt; 02:49.623 Let me get into something very interesting.</p>
<p>02:49.623 &gt; 02:52.783 How can I make Emacs speak to Nyxt.</p>
<p>02:52.783 &gt; 02:55.103 And for that, let me show you something</p>
<p>02:55.103 &gt; 02:57.143 in the literate programming approach.</p>
<p>02:57.143 &gt; 03:00.183 So, this Org mode source block is</p>
<p>03:00.183 &gt; 03:04.423 linked to this Nyxt REPL.</p>
<p>03:04.423 &gt; 03:06.983 I can define a new command,</p>
<p>03:06.983 &gt; 03:09.343 and when I go in Nyxt,</p>
<p>03:09.343 &gt; 03:10.863 I can find this new command,</p>
<p>03:10.863 &gt; 03:12.503 and I can invoke it, and you can see</p>
<p>03:12.503 &gt; 03:16.943 there is something in the minibuffer.</p>
<p>03:16.943 &gt; 03:21.543 I can use it from Nyxt, but I can do it here.</p>
<p>03:21.543 &gt; 03:24.703 I can also use it directly from the REPL.</p>
<p>03:24.703 &gt; 03:27.743 You can see that the same thing is logged</p>
<p>03:27.743 &gt; 03:30.423 in the REPL.</p>
<p>03:30.423 &gt; 03:32.663 And then with something that I would speak</p>
<p>03:32.663 &gt; 03:36.423 about in another talk in the conference</p>
<p>03:36.423 &gt; 03:39.143 — Moldable Emacs. I can also just</p>
<p>03:39.143 &gt; 03:42.823 evaluate JavaScript outside. Let's create</p>
<p>03:42.823 &gt; 03:46.703 a playground that allows me to write some</p>
<p>03:46.703 &gt; 03:49.903 JavaScript code. And if I evaluate this code,</p>
<p>03:49.903 &gt; 03:52.023 I get the title of the webpage</p>
<p>03:52.023 &gt; 03:54.583 that is currently open in Nyxt.</p>
<p>03:54.583 &gt; 03:58.343 The cool thing is that I can do it also</p>
<p>03:58.343 &gt; 04:02.263 directly in Lisp, this is Parenscript</p>
<p>04:02.263 &gt; 04:05.223 that evaluates to the same thing,</p>
<p>04:05.223 &gt; 04:07.823 (it) is just the same, just document.title,</p>
<p>04:07.823 &gt; 04:10.743 only that is in Common Lisp.</p>
<p>04:10.743 &gt; 04:14.343 You see that Emacs can speak to Nyxt,</p>
<p>04:14.343 &gt; 04:16.103 but also the reverse is true.</p>
<p>04:16.103 &gt; 04:19.023 Nyxt can speak to Emacs. So, for example,</p>
<p>04:19.023 &gt; 04:21.943 if I'm in Nyxt, and for example,</p>
<p>04:21.943 &gt; 04:26.623 let me go to my blog, if I press here,</p>
<p>04:26.623 &gt; 04:30.863 this is an email link, automatically in Emacs</p>
<p>04:30.863 &gt; 04:33.943 it will let me compone a message</p>
<p>04:33.943 &gt; 04:35.943 using my email manager.</p>
<p>04:35.943 &gt; 04:39.823 Or, say that always in my blog I want</p>
<p>04:39.823 &gt; 04:43.543 to write something here in the searchbar,</p>
<p>04:43.543 &gt; 04:46.303 I think that I don't want to write it in</p>
<p>04:46.303 &gt; 04:50.623 the browser but in my Emacs because</p>
<p>04:50.623 &gt; 04:52.903 I have some template for search.</p>
<p>04:52.903 &gt; 04:55.503 If I do this, all of a sudden</p>
<p>04:55.503 &gt; 04:59.103 the text is added.</p>
<p>04:59.103 &gt; 05:03.423 Or say I'm watching that Clojure video,</p>
<p>05:03.423 &gt; 05:06.343 and I get to this point, and then I say</p>
<p>05:06.343 &gt; 05:09.703 &quot;Yuu! This is a very interesting thing,</p>
<p>05:09.703 &gt; 05:12.783 let me take a note&quot;. So, I take some note</p>
<p>05:12.783 &gt; 05:16.903 with some text, and if I go back in Emacs,</p>
<p>05:16.903 &gt; 05:19.023 tadam! I found the note,</p>
<p>05:19.023 &gt; 05:21.903 and I found it with the duration,</p>
<p>05:21.903 &gt; 05:25.063 so I can just jump to the same point.</p>
<p>05:25.063 &gt; 05:28.743 And what else?</p>
<p>05:28.743 &gt; 05:31.903 There is something even bigger</p>
<p>05:31.903 &gt; 05:32.663 that we can do,</p>
<p>05:32.663 &gt; 05:34.063 this is a bit more advanced,</p>
<p>05:34.063 &gt; 05:35.823 and this is something that I do</p>
<p>05:35.823 &gt; 05:39.023 again with my Moldable Emacs.</p>
<p>05:39.023 &gt; 05:41.183 Say that you want to do some</p>
<p>05:41.183 &gt; 05:43.223 data visualization.</p>
<p>05:43.223 &gt; 05:44.863 If we use Vega-Lite…, for example,</p>
<p>05:44.863 &gt; 05:47.823 we want to visualize a scatter plot.</p>
<p>05:47.823 &gt; 05:49.623 Let me take some example data</p>
<p>05:49.623 &gt; 05:52.423 that could be interesting also to you.</p>
<p>05:52.423 &gt; 05:55.063 So, say that I have this playground</p>
<p>05:55.063 &gt; 05:57.263 that lets me evaluate</p>
<p>05:57.263 &gt; 06:01.703 some query on my Org-roam database.</p>
<p>06:01.703 &gt; 06:03.663 What I'm doing here is I'm gonna</p>
<p>06:03.663 &gt; 06:05.703 go through my first 100 notes</p>
<p>06:05.703 &gt; 06:09.823 and collect their backlinks,</p>
<p>06:09.823 &gt; 06:13.183 so some information that I find interesting.</p>
<p>06:13.183 &gt; 06:16.343 If I convert this to JSON,</p>
<p>06:16.343 &gt; 06:18.903 now, all of a sudden this is something</p>
<p>06:18.903 &gt; 06:22.623 that I can put in that Vega-Lite template</p>
<p>06:22.623 &gt; 06:26.183 that I showed you a moment ago.</p>
<p>06:26.183 &gt; 06:28.343 So, I'm gonna find out that file,</p>
<p>06:28.343 &gt; 06:30.463 you see that I left a question mark,</p>
<p>06:30.463 &gt; 06:31.703 (this is) something that I still</p>
<p>06:31.703 &gt; 06:33.783 didn't automate completely.</p>
<p>06:33.783 &gt; 06:37.983 By saving this file and opening it with Nyxt,</p>
<p>06:37.983 &gt; 06:41.183 you can see that now I have a scatter plot.</p>
<p>06:41.183 &gt; 06:43.943 And these are my actual notes,</p>
<p>06:43.943 &gt; 06:48.343 so you can see that if I stay on it,</p>
<p>06:48.343 &gt; 06:53.063 these are actually my notes.</p>
<p>06:53.063 &gt; 06:55.343 When I'm in Emacs, what I can do is</p>
<p>06:55.343 &gt; 06:58.303 I click here, and now in the background</p>
<p>06:58.303 &gt; 07:00.903 it opened my note,</p>
<p>07:00.903 &gt; 07:04.303 and it opened with all my backlinks.</p>
<p>07:04.303 &gt; 07:07.703 You can see that I have embedded in my</p>
<p>07:07.703 &gt; 07:11.303 browser some functionality of Emacs.</p>
<p>07:11.303 &gt; 07:13.463 You understand that this is the power of</p>
<p>07:13.463 &gt; 07:16.983 unifying, integrating these two experiences,</p>
<p>07:16.983 &gt; 07:18.943 and it opens the doors for</p>
<p>07:18.943 &gt; 07:22.223 a lot of interesting interactivity.</p>
<p>07:22.223 &gt; 07:24.743 Anyway, what is next?</p>
<p>07:24.743 &gt; 07:29.023 This was my talk, what is next is</p>
<p>07:29.023 &gt; 07:32.143 continue merging it with Moldable Emacs.</p>
<p>07:32.143 &gt; 07:34.023 (This) is something I will present in</p>
<p>07:34.023 &gt; 07:37.463 another talk in this conference with web,</p>
<p>07:37.463 &gt; 07:39.263 so that we can extract meaning from</p>
<p>07:39.263 &gt; 07:41.103 the web, and we can bring it in Emacs.</p>
<p>07:41.103 &gt; 07:43.583 And from Emacs bringing back stuff</p>
<p>07:43.583 &gt; 07:46.543 like a picture into a web page,</p>
<p>07:46.543 &gt; 07:48.903 so that we can do fancy visualization.</p>
<p>07:48.903 &gt; 07:51.063 Another thing I want to do is to</p>
<p>07:51.063 &gt; 07:54.263 automate the boring browser flows</p>
<p>07:54.263 &gt; 07:55.543 that I do, like, for example,</p>
<p>07:55.543 &gt; 07:58.263 if I periodically buy something,</p>
<p>07:58.263 &gt; 08:00.863 I could do it from within Emacs</p>
<p>08:00.863 &gt; 08:05.263 instead of always clicking around.</p>
<p>08:05.263 &gt; 08:08.383 And then I'm just gonna cross fingers,</p>
<p>08:08.383 &gt; 08:10.023 I hope that this browser will</p>
<p>08:10.023 &gt; 08:11.783 become mainstream.</p>
<p>08:11.783 &gt; 08:13.263 So, this was my talk,</p>
<p>08:13.263 &gt; 08:14.663 thank you for listening,</p>
<p>08:14.663 &gt; 08:17.343 and you can find more about it at</p>
<p>08:17.343 &gt; 08:19.823 ag91.github.io, my blog,</p>
<p>08:19.823 &gt; 08:22.680 and enjoy the rest of the conference, bye!</p>
<p>08:22.680 &gt; 08:25.520 [captions: bhavin192 (Bhavin Gandhi)]</p>
</body>
</html>