WEBVTT captioned by sachac
NOTE Introduction
00:00:00.000 --> 00:00:03.839
Hi, my name is Blaine Mooers.
00:00:03.840 --> 00:00:05.399
I'm an associate professor of biochemistry
00:00:05.400 --> 00:00:08.199
at the University of Oklahoma Health Sciences Center
00:00:08.200 --> 00:00:09.759
in Oklahoma City.
00:00:09.760 --> 00:00:11.999
I'm going to talk about the use of Emacs
00:00:12.000 --> 00:00:16.239
to edit live Jupyter notebook cells
00:00:16.240 --> 00:00:20.519
as well as text areas on web pages.
00:00:20.520 --> 00:00:22.519
So like a lot of technical workers,
00:00:22.520 --> 00:00:24.879
I find myself having to write prose
00:00:24.880 --> 00:00:28.679
in text areas on web pages,
00:00:28.680 --> 00:00:31.719
as well as working with code
00:00:31.720 --> 00:00:36.999
in Jupyter notebooks and Colab notebooks,
00:00:37.000 --> 00:00:39.319
and often I have wished for
00:00:39.320 --> 00:00:43.479
the full power of Emacs while doing so.
NOTE GhostText and Atomic Chrome
00:00:43.480 --> 00:00:45.319
Well, now that is possible.
00:00:45.320 --> 00:00:46.799
Actually, there are several solutions
00:00:46.800 --> 00:00:49.039
that have been available for some time.
00:00:49.040 --> 00:00:50.399
I'm going to talk about one solution
00:00:50.400 --> 00:00:55.319
that I'm familiar with and has worked out for me.
00:00:55.320 --> 00:00:58.119
So this requires the use of two software packages,
00:00:58.120 --> 00:01:01.599
GhostText and Atomic Chrome.
00:01:01.600 --> 00:01:04.239
GhostText is an extension for the web browser,
00:01:04.240 --> 00:01:07.279
whereas Atomic Chrome is a package for Emacs.
00:01:07.280 --> 00:01:10.879
You have to have both of these.
00:01:10.880 --> 00:01:13.399
So Chrome is for the editor side
00:01:13.400 --> 00:01:18.919
and GhostText handles the browser side.
NOTE GhostText
00:01:18.920 --> 00:01:22.479
The GhostText extension is available
00:01:22.480 --> 00:01:26.799
in the Chrome web store.
00:01:26.800 --> 00:01:29.519
And GhostText is represented by this icon,
00:01:29.520 --> 00:01:31.519
which has a ghost in front of the capital letter T.
00:01:31.520 --> 00:01:36.399
It is being developed by Federico Brigante.
00:01:36.400 --> 00:01:41.239
He is a very prolific JavaScript developer.
00:01:41.240 --> 00:01:44.279
He has a web page committed to GhostText,
00:01:44.280 --> 00:01:47.199
as well as a GitHub site.
00:01:47.200 --> 00:01:50.159
So here's an example of GhostText.
00:01:50.160 --> 00:01:54.839
This is a snapshot from a session
00:01:54.840 --> 00:02:01.279
that I had while editing LaTeX on the Overleaf website.
00:02:01.280 --> 00:02:03.759
Overleaf is this web service
00:02:03.760 --> 00:02:09.719
that empowers the editing of LaTeX documents on the web.
00:02:09.720 --> 00:02:14.039
So I have clicked on this GhostText icon in the toolbar.
00:02:14.040 --> 00:02:17.039
I had already opened up Emacs,
00:02:17.040 --> 00:02:19.879
and I had the Atomic Chrome server running.
00:02:19.880 --> 00:02:21.799
So a connection was established,
00:02:21.800 --> 00:02:28.599
as indicated by this blue border around this text area.
00:02:28.600 --> 00:02:30.519
And as soon as that appeared,
00:02:30.520 --> 00:02:35.319
the text appeared in a buffer inside of Emacs.
00:02:35.320 --> 00:02:40.159
So I have overlaid the area where normally the compiled PDF
00:02:40.160 --> 00:02:43.919
would appear in an Overleaf session.
00:02:43.920 --> 00:02:47.679
So I'm using a configuration for LaTeX that I developed,
00:02:47.680 --> 00:02:52.159
which is available through the MooersLab GitHub site.
00:02:52.160 --> 00:02:55.919
I also gave a talk about how I use LaTeX in Emacs
00:02:55.920 --> 00:02:58.839
at the Berlin Emacs meetup in August.
00:02:58.840 --> 00:03:00.039
This talk was not recorded,
00:03:00.040 --> 00:03:05.119
but the slides are available on this website.
NOTE Live coding demo
00:03:05.120 --> 00:03:09.519
So I would like to now switch to a little live coding
00:03:09.520 --> 00:03:12.359
to make this a little more interesting.
00:03:12.360 --> 00:03:22.439
So I start my day at this other website called 750Words.
00:03:22.440 --> 00:03:25.279
This site just takes plain text,
00:03:25.280 --> 00:03:28.559
but I like to write in LaTeX.
00:03:28.560 --> 00:03:31.519
So GhostText came to my rescue
00:03:31.520 --> 00:03:34.479
when I started using this everyday last May.
00:03:34.480 --> 00:03:37.239
So I clicked on the GhostText icon.
00:03:37.240 --> 00:03:39.759
It highlighted that area in blue.
00:03:39.760 --> 00:03:41.839
There's some boilerplate
00:03:41.840 --> 00:03:45.919
that I like to start my day with.
00:03:45.920 --> 00:03:50.599
I like to get a list of my deadlines
00:03:50.600 --> 00:03:54.239
that are coming up, as shown here,
00:03:54.240 --> 00:03:55.839
for the next several months.
00:03:55.840 --> 00:03:59.399
And then I have landed at this tab stop.
00:03:59.400 --> 00:04:04.239
And so I had issued a tab trigger
00:04:04.240 --> 00:04:09.519
which inserted this almost 50 lines of text
00:04:09.520 --> 00:04:13.639
from a snippet through Yasnippet.
00:04:13.640 --> 00:04:17.479
And then I'll change this text to whatever.
00:04:17.480 --> 00:04:29.279
And then I can hit TAB to move to the next site.
00:04:29.280 --> 00:04:38.439
I was dead tired last night, so I fell asleep at my desk,
00:04:38.440 --> 00:04:42.439
and whatever. So I just keep on going
00:04:42.440 --> 00:04:47.319
and then hit TAB again and enter my "To Be Done" items.
00:04:47.320 --> 00:04:50.239
And then what I love about Emacs is that
00:04:50.240 --> 00:04:56.119
you can hit C-c C-j to insert a new item and so forth,
00:04:56.120 --> 00:05:03.239
so you can extend the list.
00:05:03.240 --> 00:05:05.079
Initially, I just have 10 items.
00:05:05.080 --> 00:05:08.839
I'm going to have more. And on I go,
00:05:08.840 --> 00:05:12.359
using the full power of LaTeX.
00:05:12.360 --> 00:05:16.119
So I have configured Atomic Chrome
00:05:16.120 --> 00:05:19.999
so it will recognize this website as a –
00:05:20.000 --> 00:05:21.399
it will open up this website –
00:05:21.400 --> 00:05:26.159
the connection to this website with this buffer
00:05:26.160 --> 00:05:36.559
in the LaTeX major mode. To turn this off,
00:05:36.560 --> 00:05:40.319
we can close – simply just close the buffer
00:05:40.320 --> 00:05:42.959
and that will shut things down.
00:05:42.960 --> 00:05:46.399
On the browser side, you can right-click on the icon
00:05:46.400 --> 00:05:49.039
and disconnect GhostText on this page.
NOTE Editing code cells
00:05:49.040 --> 00:05:53.639
Okay, let's go to a different situation.
00:05:53.640 --> 00:05:57.359
This is not a feature that's advertised by the developer,
00:05:57.360 --> 00:06:00.119
but I discovered that you can edit code cells
00:06:00.120 --> 00:06:02.799
(or any kind of cell for that matter)
00:06:02.800 --> 00:06:04.439
in a Jupyter Notebook.
00:06:04.440 --> 00:06:05.719
However, we have a challenge here.
00:06:05.720 --> 00:06:09.319
We have three text areas open – three code cells.
00:06:09.320 --> 00:06:14.759
So if we click on the GhostText icon,
00:06:14.760 --> 00:06:17.479
these three areas will show up in green
00:06:17.480 --> 00:06:19.119
and we'll be prompted to select the one
00:06:19.120 --> 00:06:20.279
that we want to activate.
00:06:20.280 --> 00:06:22.359
We want to activate the one with text.
00:06:22.360 --> 00:06:31.399
So then we can go in here and make edits, of course,
00:06:31.400 --> 00:06:33.359
and you can do this in Emacs
00:06:33.360 --> 00:06:35.639
or we can do it in the browser. It doesn't matter.
00:06:35.640 --> 00:06:38.359
You saw me editing in Emacs,
00:06:38.360 --> 00:06:40.359
but we can also make the edits
00:06:40.360 --> 00:06:44.879
in the text area of the browser
00:06:44.880 --> 00:06:47.519
and they will show up immediately in Emacs.
00:06:47.520 --> 00:06:54.439
So we could change the case of that M and that's going to –
00:06:54.440 --> 00:06:59.279
shows up over here. Okay, we can run this code.
00:06:59.280 --> 00:07:03.439
So this is R, one of the three major
00:07:03.440 --> 00:07:05.159
programming languages for data science.
00:07:05.160 --> 00:07:07.319
At least, Jupyter is supposed to be
00:07:07.320 --> 00:07:13.479
a combination of Julia, Python, and R.
00:07:13.480 --> 00:07:17.559
So we're running mcmc to get the posterior distribution
00:07:17.560 --> 00:07:21.119
and we're going to plot those out with this pyplots package,
00:07:21.120 --> 00:07:24.079
and we have these beautiful plots showing the median
00:07:24.080 --> 00:07:27.039
of the posterior distribution for four variables in –
00:07:27.040 --> 00:07:31.559
four parameters in the CARS data set,
00:07:31.560 --> 00:07:38.039
which is available – built into the R package.
00:07:38.040 --> 00:07:45.559
And then these shaded areas are the 80% interval.
00:07:45.560 --> 00:07:49.159
Okay. Oops.
NOTE Python
00:07:49.160 --> 00:08:07.639
So now for the Python side,
00:08:07.640 --> 00:08:13.359
here's an example in which I'm going to actually
00:08:13.360 --> 00:08:18.679
insert a snippet of that cell
00:08:18.680 --> 00:08:27.279
and then I'm going to enter nvlig for nglview ligand,
00:08:27.280 --> 00:08:43.319
and just hit enter. Oops. Hit TAB, excuse me,
00:08:43.320 --> 00:08:47.999
and we don't need this line of code, so delete that.
00:08:48.000 --> 00:08:52.199
Yep, we want to load up this pdb file
00:08:52.200 --> 00:08:54.279
that's in this subdirectory.
00:08:54.280 --> 00:08:56.919
So the pdb file is a plain text file
00:08:56.920 --> 00:08:58.839
that contains atomic coordinates
00:08:58.840 --> 00:09:00.159
of protein crystal structure.
00:09:00.160 --> 00:09:02.999
This protein happens to be important in cancer
00:09:03.000 --> 00:09:09.079
and we have – we screened by docking 55,000 compounds
00:09:09.080 --> 00:09:10.679
on a supercomputer
00:09:10.680 --> 00:09:12.743
and then we did MD [molecular dynamics] simulations
00:09:12.744 --> 00:09:14.159
of the top 10 [actually 20] leads.
00:09:14.160 --> 00:09:18.319
Twelve of them had the compound remain bound
00:09:18.320 --> 00:09:19.679
during the period of the simulation,
00:09:19.680 --> 00:09:22.559
so those have some potential for –
00:09:22.560 --> 00:09:25.159
and require experimental validation.
00:09:25.160 --> 00:09:28.639
So we'll run this chunk of code,
00:09:28.640 --> 00:09:30.839
and this will give a view of the molecule
00:09:30.840 --> 00:09:36.479
that we can interact with by using the mouse.
00:09:36.480 --> 00:09:39.879
But I want to share this with my colleague.
00:09:39.880 --> 00:09:42.919
My colleague is not set up to use Jupyter,
00:09:42.920 --> 00:09:46.959
but instead we can write this out to a HTML file,
00:09:46.960 --> 00:09:48.319
which I have loaded up already.
00:09:48.320 --> 00:09:55.319
And so we can actually – perhaps.
00:09:55.320 --> 00:10:01.679
We click on these two arrows pointing at each other,
00:10:01.680 --> 00:10:05.159
and we can get a full screen view of this molecule
00:10:05.160 --> 00:10:10.439
and he can identify each atom in this structure.
00:10:10.440 --> 00:10:12.719
Over a thousand atoms present.
00:10:12.720 --> 00:10:14.959
We're just hovering over a specific atom.
00:10:14.960 --> 00:10:27.759
So shown in gray is the ligand that is bound. Okay.
00:10:27.760 --> 00:10:32.079
So we still have this box selected
00:10:32.080 --> 00:10:36.559
and we still have these two different –
00:10:36.560 --> 00:10:40.519
so for each of the – our selected text areas
00:10:40.520 --> 00:11:03.839
we have a separate – we have a separate buffer open. Okay.
NOTE Julia
00:11:03.840 --> 00:11:06.839
To wrap things up here, here's an example of using –
00:11:06.840 --> 00:11:08.919
with evolving Julia code.
00:11:08.920 --> 00:11:12.919
And so this Julia code in this cell is in a Emacs buffer.
00:11:12.920 --> 00:11:19.279
So you've got an idea now, I think.
00:11:19.280 --> 00:11:23.759
So in terms of plain text areas like in Overleaf
00:11:23.760 --> 00:11:27.519
and then these cells in Jupyter Notebooks,
00:11:27.520 --> 00:11:30.959
these are other areas that can be edited
00:11:30.960 --> 00:11:37.919
like in the text areas within Outlook Webmail and Gmail.
00:11:37.920 --> 00:11:42.639
Instead of having to point with the mouse
00:11:42.640 --> 00:11:43.519
or click with the mouse,
00:11:43.520 --> 00:11:48.079
one can also use keybindings or keyboard shortcuts.
00:11:48.080 --> 00:11:51.599
So here are the ones for three major operating systems.
NOTE How does GhostText work?
00:11:51.600 --> 00:11:54.639
So how does GhostText work?
00:11:54.640 --> 00:11:57.199
Main thing is you have to open up Emacs
00:11:57.200 --> 00:11:59.679
and get this Atomic Chrome server running.
00:11:59.680 --> 00:12:03.119
And then with it up and going,
00:12:03.120 --> 00:12:06.679
GhostText will be able to – has to be activated
00:12:06.680 --> 00:12:09.639
and it will find the GhostText server
00:12:09.640 --> 00:12:15.079
through the localhost port 4001.
00:12:15.080 --> 00:12:19.039
Put that into the web browser.
00:12:19.040 --> 00:12:21.639
If you navigate to that port,
00:12:21.640 --> 00:12:23.719
you'll get output that looks like this
00:12:23.720 --> 00:12:25.639
if everything's working well.
00:12:25.640 --> 00:12:27.919
Otherwise, you'll get a error message
00:12:27.920 --> 00:12:30.519
and it should have a port socket –
00:12:30.520 --> 00:12:34.319
a web socket port number.
00:12:34.320 --> 00:12:36.319
It will not be the same every time.
NOTE Supported web browsers
00:12:36.320 --> 00:12:42.319
So these are the supported web browsers
00:12:42.320 --> 00:12:45.359
in addition to Chrome. These are supported
00:12:45.360 --> 00:12:47.279
and likewise anything in these –
00:12:47.280 --> 00:12:49.879
any browser related to these
00:12:49.880 --> 00:12:53.079
can probably use these extensions.
00:12:53.080 --> 00:12:56.359
For example, the Brave browser will use Chrome extension
00:12:56.360 --> 00:13:01.679
and the Firefox browser extension works with WaterFox.
00:13:01.680 --> 00:13:05.239
These are the supported editors.
00:13:05.240 --> 00:13:10.199
Each editor has its own extension
00:13:10.200 --> 00:13:15.719
and this GhostText was initially developed for SublimeText.
00:13:15.720 --> 00:13:17.919
So if you have SublimeText,
00:13:17.920 --> 00:13:21.959
then you can use its smooth operation as positive control
00:13:21.960 --> 00:13:24.999
when things go wrong with Emacs.
NOTE Atomic Chrome configuration
00:13:25.000 --> 00:13:29.479
This is Atomic. This is a GitHub site for Atomic Chrome.
00:13:29.480 --> 00:13:33.159
Atomic Chrome is available for installation through Melpa.
00:13:33.160 --> 00:13:40.319
This is my configuration for Atomic Chrome.
00:13:40.320 --> 00:13:45.519
So I have this setup so the server starts whenever I log in,
00:13:45.520 --> 00:13:50.319
and I have it set up so that default major mode is Python
00:13:50.320 --> 00:13:55.559
to deal with the Jupyter notebooks and Colab notebooks.
00:13:55.560 --> 00:13:57.719
And then I have major modes
00:13:57.720 --> 00:13:59.839
for these other websites defined below.
00:13:59.840 --> 00:14:06.079
This is a testing site so the developer has made
00:14:06.080 --> 00:14:08.119
to help with troubleshooting.
00:14:08.120 --> 00:14:11.159
He also has a protocol on his website
00:14:11.160 --> 00:14:13.559
to follow during troubleshooting.
NOTE Precautions
00:14:13.560 --> 00:14:16.639
So here are some precautions.
00:14:16.640 --> 00:14:19.079
You'll find that GhostText doesn't work with Pluto.
00:14:19.080 --> 00:14:21.239
Pluto is a new computational notebook
00:14:21.240 --> 00:14:23.479
for working with Julia.
00:14:23.480 --> 00:14:27.039
My suggestion would be just to run IJulia in Jupyter.
00:14:27.040 --> 00:14:31.999
It also doesn't work, of course, with RStudio.
00:14:32.000 --> 00:14:35.199
Even though RStudio sort of resembles
00:14:35.200 --> 00:14:38.999
a web page, web browser, it's not.
00:14:39.000 --> 00:14:41.359
Of course, you can always run R,
00:14:41.360 --> 00:14:48.239
as you've just seen, using the IPy kernel.
00:14:48.240 --> 00:14:52.239
I will also caution you that if you use the Emacs server,
00:14:52.240 --> 00:14:53.519
you may run into issues
00:14:53.520 --> 00:14:57.999
with the server competing with the port 4001.
00:14:58.000 --> 00:15:01.919
So instead, you should probably configure the Emacs server
00:15:01.920 --> 00:15:04.999
to use a specific port.
00:15:05.000 --> 00:15:07.639
So far – although I haven't done that myself –
00:15:07.640 --> 00:15:10.999
so far, I haven't found any conflicts
00:15:11.000 --> 00:15:13.479
with the Org Roam user interface.
NOTE Conclusions
00:15:13.480 --> 00:15:20.919
So my conclusions are: GhostText allows you to edit prose
00:15:20.920 --> 00:15:24.439
with your favorite major mode
00:15:24.440 --> 00:15:28.119
in the text areas of web pages
00:15:28.120 --> 00:15:31.079
and in the cells of Jupyter notebooks.
00:15:31.080 --> 00:15:34.359
This allows you to tap into snippets
00:15:34.360 --> 00:15:37.519
and thereby save time as you have – probably have –
00:15:37.520 --> 00:15:39.719
hopefully got an idea of.
NOTE Thanks
00:15:39.720 --> 00:15:44.039
I'd like to thank my friends and mentors
00:15:44.040 --> 00:15:46.599
who've helped me out during my second year
00:15:46.600 --> 00:15:49.359
in my Emacs learning spiral.
00:15:49.360 --> 00:15:55.839
These include my local colleagues.
00:15:55.840 --> 00:15:58.679
We meet once a month in the Oklahoma Data Science Workshop.
00:15:58.680 --> 00:16:01.719
Last July, I gave a presentation about GhostText.
00:16:01.720 --> 00:16:08.359
And then also my friends at Berlin and Austin Emacs meetups
00:16:08.360 --> 00:16:12.959
and in the UK research software engineer
00:16:12.960 --> 00:16:17.599
Emacs research Slack channel.
00:16:17.600 --> 00:16:18.919
So I don't attend these every month,
00:16:18.920 --> 00:16:21.439
but I try to make the meetings as often as I can.
00:16:21.440 --> 00:16:25.399
Then I'm supported by the following grants,
00:16:25.400 --> 00:16:28.359
which allow me to spend
00:16:28.360 --> 00:16:30.679
at least some time each day in Emacs.
00:16:30.680 --> 00:16:34.960
I'll be happy to take any questions.
