219 lines
14 KiB
Plaintext
219 lines
14 KiB
Plaintext
<!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>
|
||
<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 "ace-jump" 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>
|
||
<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 watch our hosted link below:</p>
|
||
<video controls>
|
||
<source src="../static/video/emacs-with-nyxt.webm" type="video/webm">
|
||
Emacsconf Nyxt Presentation
|
||
</video>
|
||
|
||
<p>Also, don't forget to check out <a href="https://github.com/ag91/emacs-with-nyxt">Andrea's work</a> on GitHub.</p>
|
||
<h2 id="transcript">Transcript</h2>
|
||
<p>WEBVTT</p>
|
||
<p>00:00.000 –> 00:01.783 Welcome to my talk "Emacs with Nyxt:</p>
|
||
<p>00:01.783 –> 00:02.823 extend your editor with</p>
|
||
<p>00:02.823 –> 00:04.623 the power of a Lisp browser".</p>
|
||
<p>00:04.623 –> 00:06.583 Who am I? I'm Andrea. I work as</p>
|
||
<p>00:06.583 –> 00:08.303 a Clojure software engineer somewhere</p>
|
||
<p>00:08.303 –> 00:09.743 in the middle of the UK.</p>
|
||
<p>00:09.743 –> 00:11.743 And I inherited my passion for Emacs</p>
|
||
<p>00:11.743 –> 00:13.703 from my Ph.D. supervisor, and from that</p>
|
||
<p>00:13.703 –> 00:15.943 moment on Emacs became a core tool</p>
|
||
<p>00:15.943 –> 00:17.863 of my daily routine.</p>
|
||
<p>00:17.863 –> 00:20.863 You can find more about me and my interests</p>
|
||
<p>00:20.863 –> 00:23.983 at ag91.github.io, that is my blog.</p>
|
||
<p>00:23.983 –> 00:25.183 Let's get into the talk.</p>
|
||
<p>00:25.183 –> 00:28.183 So, why Nyxt? Nyxt is an extensible</p>
|
||
<p>00:28.183 –> 00:29.543 Common Lisp browser.</p>
|
||
<p>00:29.543 –> 00:31.903 Fundamentally, it's Emacs for web browsing.</p>
|
||
<p>00:31.903 –> 00:34.063 And why do I say that? I say that</p>
|
||
<p>00:34.063 –> 00:36.063 because is a…, this is Nyxt.</p>
|
||
<p>00:36.063 –> 00:40.223 You can see that is organized with buffers,</p>
|
||
<p>00:40.223 –> 00:44.063 and you can see that I can invoke command,</p>
|
||
<p>00:44.063 –> 00:47.183 like, I was in Emacs with this.</p>
|
||
<p>00:47.183 –> 00:48.983 So, I'm using even the same keybindings,</p>
|
||
<p>00:48.983 –> 00:52.783 so, for that I used M-x.</p>
|
||
<p>00:52.783 –> 00:55.983 And some of the features of Nyxt</p>
|
||
<p>00:55.983 –> 01:00.103 are just amazing. For example, say that</p>
|
||
<p>01:00.103 –> 01:03.823 you want to mark some text, this is the way,</p>
|
||
<p>01:03.823 –> 01:08.703 so, I just pressed Control space (C-SPC),</p>
|
||
<p>01:08.703 –> 01:10.423 and now I will start the marker,</p>
|
||
<p>01:10.423 –> 01:13.223 and now I can copy the text, and when</p>
|
||
<p>01:13.223 –> 01:15.663 I'm done, I can finish to use visual mode.</p>
|
||
<p>01:15.663 –> 01:18.023 Or, for example, what about…,</p>
|
||
<p>01:18.023 –> 01:21.183 I want to navigate without using my mouse.</p>
|
||
<p>01:21.183 –> 01:25.183 I can do something like follow-hint,</p>
|
||
<p>01:25.183 –> 01:28.023 and this opens the possibility to press</p>
|
||
<p>01:28.023 –> 01:29.903 AC to jump on the Articles,</p>
|
||
<p>01:29.903 –> 01:33.063 and all of a sudden I'm on the page</p>
|
||
<p>01:33.063 –> 01:36.023 with the blog posts of the Atlas team.</p>
|
||
<p>01:36.023 –> 01:39.383 Or, for example, I can extend my browser</p>
|
||
<p>01:39.383 –> 01:40.783 from within the browser.</p>
|
||
<p>01:40.783 –> 01:43.223 So, you can see I can evaluate a command,</p>
|
||
<p>01:43.223 –> 01:48.663 a Common Lisp code,</p>
|
||
<p>01:48.663 –> 01:50.903 and it produces the result.</p>
|
||
<p>01:50.903 –> 01:56.183 And then, for example, I can also auto….</p>
|
||
<p>01:56.183 –> 01:58.663 This browser comes by default with an</p>
|
||
<p>01:58.663 –> 02:01.143 integration with your password manager,</p>
|
||
<p>02:01.143 –> 02:04.223 in my case it's pass, and I can copy</p>
|
||
<p>02:04.223 –> 02:08.783 a password. This is just as easy as is,</p>
|
||
<p>02:08.783 –> 02:10.543 it comes by default.</p>
|
||
<p>02:10.543 –> 02:13.583 Another incredibly useful feature</p>
|
||
<p>02:13.583 –> 02:18.023 that I didn't find in other browsers is</p>
|
||
<p>02:18.023 –> 02:20.503 searching between multiple buffers.</p>
|
||
<p>02:20.503 –> 02:23.503 So, this function search-buffers,</p>
|
||
<p>02:23.503 –> 02:25.823 this command lets me select</p>
|
||
<p>02:25.823 –> 02:29.503 some of my open buffers,</p>
|
||
<p>02:29.503 –> 02:32.503 and I can look for a string in there.</p>
|
||
<p>02:32.503 –> 02:34.623 And you would see that the hits are</p>
|
||
<p>02:34.623 –> 02:37.423 from the buffers that I have open,</p>
|
||
<p>02:37.423 –> 02:42.583 for example, Clojure or</p>
|
||
<p>02:42.583 –> 02:46.103 the YouTube video about Clojure.</p>
|
||
<p>02:46.103 –> 02:49.623 Let me get into something very interesting.</p>
|
||
<p>02:49.623 –> 02:52.783 How can I make Emacs speak to Nyxt.</p>
|
||
<p>02:52.783 –> 02:55.103 And for that, let me show you something</p>
|
||
<p>02:55.103 –> 02:57.143 in the literate programming approach.</p>
|
||
<p>02:57.143 –> 03:00.183 So, this Org mode source block is</p>
|
||
<p>03:00.183 –> 03:04.423 linked to this Nyxt REPL.</p>
|
||
<p>03:04.423 –> 03:06.983 I can define a new command,</p>
|
||
<p>03:06.983 –> 03:09.343 and when I go in Nyxt,</p>
|
||
<p>03:09.343 –> 03:10.863 I can find this new command,</p>
|
||
<p>03:10.863 –> 03:12.503 and I can invoke it, and you can see</p>
|
||
<p>03:12.503 –> 03:16.943 there is something in the minibuffer.</p>
|
||
<p>03:16.943 –> 03:21.543 I can use it from Nyxt, but I can do it here.</p>
|
||
<p>03:21.543 –> 03:24.703 I can also use it directly from the REPL.</p>
|
||
<p>03:24.703 –> 03:27.743 You can see that the same thing is logged</p>
|
||
<p>03:27.743 –> 03:30.423 in the REPL.</p>
|
||
<p>03:30.423 –> 03:32.663 And then with something that I would speak</p>
|
||
<p>03:32.663 –> 03:36.423 about in another talk in the conference</p>
|
||
<p>03:36.423 –> 03:39.143 — Moldable Emacs. I can also just</p>
|
||
<p>03:39.143 –> 03:42.823 evaluate JavaScript outside. Let's create</p>
|
||
<p>03:42.823 –> 03:46.703 a playground that allows me to write some</p>
|
||
<p>03:46.703 –> 03:49.903 JavaScript code. And if I evaluate this code,</p>
|
||
<p>03:49.903 –> 03:52.023 I get the title of the webpage</p>
|
||
<p>03:52.023 –> 03:54.583 that is currently open in Nyxt.</p>
|
||
<p>03:54.583 –> 03:58.343 The cool thing is that I can do it also</p>
|
||
<p>03:58.343 –> 04:02.263 directly in Lisp, this is Parenscript</p>
|
||
<p>04:02.263 –> 04:05.223 that evaluates to the same thing,</p>
|
||
<p>04:05.223 –> 04:07.823 (it) is just the same, just document.title,</p>
|
||
<p>04:07.823 –> 04:10.743 only that is in Common Lisp.</p>
|
||
<p>04:10.743 –> 04:14.343 You see that Emacs can speak to Nyxt,</p>
|
||
<p>04:14.343 –> 04:16.103 but also the reverse is true.</p>
|
||
<p>04:16.103 –> 04:19.023 Nyxt can speak to Emacs. So, for example,</p>
|
||
<p>04:19.023 –> 04:21.943 if I'm in Nyxt, and for example,</p>
|
||
<p>04:21.943 –> 04:26.623 let me go to my blog, if I press here,</p>
|
||
<p>04:26.623 –> 04:30.863 this is an email link, automatically in Emacs</p>
|
||
<p>04:30.863 –> 04:33.943 it will let me compone a message</p>
|
||
<p>04:33.943 –> 04:35.943 using my email manager.</p>
|
||
<p>04:35.943 –> 04:39.823 Or, say that always in my blog I want</p>
|
||
<p>04:39.823 –> 04:43.543 to write something here in the searchbar,</p>
|
||
<p>04:43.543 –> 04:46.303 I think that I don't want to write it in</p>
|
||
<p>04:46.303 –> 04:50.623 the browser but in my Emacs because</p>
|
||
<p>04:50.623 –> 04:52.903 I have some template for search.</p>
|
||
<p>04:52.903 –> 04:55.503 If I do this, all of a sudden</p>
|
||
<p>04:55.503 –> 04:59.103 the text is added.</p>
|
||
<p>04:59.103 –> 05:03.423 Or say I'm watching that Clojure video,</p>
|
||
<p>05:03.423 –> 05:06.343 and I get to this point, and then I say</p>
|
||
<p>05:06.343 –> 05:09.703 "Yuu! This is a very interesting thing,</p>
|
||
<p>05:09.703 –> 05:12.783 let me take a note". So, I take some note</p>
|
||
<p>05:12.783 –> 05:16.903 with some text, and if I go back in Emacs,</p>
|
||
<p>05:16.903 –> 05:19.023 tadam! I found the note,</p>
|
||
<p>05:19.023 –> 05:21.903 and I found it with the duration,</p>
|
||
<p>05:21.903 –> 05:25.063 so I can just jump to the same point.</p>
|
||
<p>05:25.063 –> 05:28.743 And what else?</p>
|
||
<p>05:28.743 –> 05:31.903 There is something even bigger</p>
|
||
<p>05:31.903 –> 05:32.663 that we can do,</p>
|
||
<p>05:32.663 –> 05:34.063 this is a bit more advanced,</p>
|
||
<p>05:34.063 –> 05:35.823 and this is something that I do</p>
|
||
<p>05:35.823 –> 05:39.023 again with my Moldable Emacs.</p>
|
||
<p>05:39.023 –> 05:41.183 Say that you want to do some</p>
|
||
<p>05:41.183 –> 05:43.223 data visualization.</p>
|
||
<p>05:43.223 –> 05:44.863 If we use Vega-Lite…, for example,</p>
|
||
<p>05:44.863 –> 05:47.823 we want to visualize a scatter plot.</p>
|
||
<p>05:47.823 –> 05:49.623 Let me take some example data</p>
|
||
<p>05:49.623 –> 05:52.423 that could be interesting also to you.</p>
|
||
<p>05:52.423 –> 05:55.063 So, say that I have this playground</p>
|
||
<p>05:55.063 –> 05:57.263 that lets me evaluate</p>
|
||
<p>05:57.263 –> 06:01.703 some query on my Org-roam database.</p>
|
||
<p>06:01.703 –> 06:03.663 What I'm doing here is I'm gonna</p>
|
||
<p>06:03.663 –> 06:05.703 go through my first 100 notes</p>
|
||
<p>06:05.703 –> 06:09.823 and collect their backlinks,</p>
|
||
<p>06:09.823 –> 06:13.183 so some information that I find interesting.</p>
|
||
<p>06:13.183 –> 06:16.343 If I convert this to JSON,</p>
|
||
<p>06:16.343 –> 06:18.903 now, all of a sudden this is something</p>
|
||
<p>06:18.903 –> 06:22.623 that I can put in that Vega-Lite template</p>
|
||
<p>06:22.623 –> 06:26.183 that I showed you a moment ago.</p>
|
||
<p>06:26.183 –> 06:28.343 So, I'm gonna find out that file,</p>
|
||
<p>06:28.343 –> 06:30.463 you see that I left a question mark,</p>
|
||
<p>06:30.463 –> 06:31.703 (this is) something that I still</p>
|
||
<p>06:31.703 –> 06:33.783 didn't automate completely.</p>
|
||
<p>06:33.783 –> 06:37.983 By saving this file and opening it with Nyxt,</p>
|
||
<p>06:37.983 –> 06:41.183 you can see that now I have a scatter plot.</p>
|
||
<p>06:41.183 –> 06:43.943 And these are my actual notes,</p>
|
||
<p>06:43.943 –> 06:48.343 so you can see that if I stay on it,</p>
|
||
<p>06:48.343 –> 06:53.063 these are actually my notes.</p>
|
||
<p>06:53.063 –> 06:55.343 When I'm in Emacs, what I can do is</p>
|
||
<p>06:55.343 –> 06:58.303 I click here, and now in the background</p>
|
||
<p>06:58.303 –> 07:00.903 it opened my note,</p>
|
||
<p>07:00.903 –> 07:04.303 and it opened with all my backlinks.</p>
|
||
<p>07:04.303 –> 07:07.703 You can see that I have embedded in my</p>
|
||
<p>07:07.703 –> 07:11.303 browser some functionality of Emacs.</p>
|
||
<p>07:11.303 –> 07:13.463 You understand that this is the power of</p>
|
||
<p>07:13.463 –> 07:16.983 unifying, integrating these two experiences,</p>
|
||
<p>07:16.983 –> 07:18.943 and it opens the doors for</p>
|
||
<p>07:18.943 –> 07:22.223 a lot of interesting interactivity.</p>
|
||
<p>07:22.223 –> 07:24.743 Anyway, what is next?</p>
|
||
<p>07:24.743 –> 07:29.023 This was my talk, what is next is</p>
|
||
<p>07:29.023 –> 07:32.143 continue merging it with Moldable Emacs.</p>
|
||
<p>07:32.143 –> 07:34.023 (This) is something I will present in</p>
|
||
<p>07:34.023 –> 07:37.463 another talk in this conference with web,</p>
|
||
<p>07:37.463 –> 07:39.263 so that we can extract meaning from</p>
|
||
<p>07:39.263 –> 07:41.103 the web, and we can bring it in Emacs.</p>
|
||
<p>07:41.103 –> 07:43.583 And from Emacs bringing back stuff</p>
|
||
<p>07:43.583 –> 07:46.543 like a picture into a web page,</p>
|
||
<p>07:46.543 –> 07:48.903 so that we can do fancy visualization.</p>
|
||
<p>07:48.903 –> 07:51.063 Another thing I want to do is to</p>
|
||
<p>07:51.063 –> 07:54.263 automate the boring browser flows</p>
|
||
<p>07:54.263 –> 07:55.543 that I do, like, for example,</p>
|
||
<p>07:55.543 –> 07:58.263 if I periodically buy something,</p>
|
||
<p>07:58.263 –> 08:00.863 I could do it from within Emacs</p>
|
||
<p>08:00.863 –> 08:05.263 instead of always clicking around.</p>
|
||
<p>08:05.263 –> 08:08.383 And then I'm just gonna cross fingers,</p>
|
||
<p>08:08.383 –> 08:10.023 I hope that this browser will</p>
|
||
<p>08:10.023 –> 08:11.783 become mainstream.</p>
|
||
<p>08:11.783 –> 08:13.263 So, this was my talk,</p>
|
||
<p>08:13.263 –> 08:14.663 thank you for listening,</p>
|
||
<p>08:14.663 –> 08:17.343 and you can find more about it at</p>
|
||
<p>08:17.343 –> 08:19.823 ag91.github.io, my blog,</p>
|
||
<p>08:19.823 –> 08:22.680 and enjoy the rest of the conference, bye!</p>
|
||
<p>08:22.680 –> 08:25.520 [captions: bhavin192 (Bhavin Gandhi)]</p>
|
||
</body>
|
||
</html>
|