path: root/2023/captions/emacsconf-2023-flat--a-modern-emacs-lookandfeel-without-pain--pedro-a-aranda--main.vtt

WEBVTT


00:00:01.880 --> 00:00:02.380
That's how I came into this.

00:00:10.120 --> 00:00:10.480
Finally, the next big thing was starting

00:00:16.100 --> 00:00:16.600
2005, I went fully Linux and then for Mac OS,

00:00:19.540 --> 00:00:20.040
and I switched to vanilla self-compiled

00:00:25.279 --> 00:00:25.779
versions of Emacs. So what do I want to show?

00:00:30.540 --> 00:00:30.920
Couple of time ago in the development list

00:00:34.540 --> 00:00:34.760
there was a short exchange about the nil and

00:00:38.400 --> 00:00:38.900
the flood button, flood button button styles,

00:00:42.480 --> 00:00:42.700
saying that it was equivalent and they are

00:00:45.480 --> 00:00:45.980
not. So instead of starting a Flame Wars,

00:00:49.220 --> 00:00:49.720
I thought it was better to go and publicize

00:00:54.520 --> 00:00:55.020
the goodies you get with Flood Button.

00:00:57.260 --> 00:00:57.440
And this is what I'm going to be showing you

00:01:00.140 --> 00:01:00.640
practically. Why Flood Button?

00:01:06.020 --> 00:01:06.500
2005, more or less, I came across DOOM Emacs,

00:01:07.660 --> 00:01:08.160
which was nice. And I,

00:01:12.180 --> 00:01:12.600
especially I liked the DOOM mode line,

00:01:13.740 --> 00:01:14.040
which was, I think it is,

00:01:15.560 --> 00:01:16.060
it is, and it was cool at that time.

00:01:20.280 --> 00:01:20.500
I was using other themes and it was not that

00:01:23.760 --> 00:01:24.020
easy to adapt for these other themes and even

00:01:26.080 --> 00:01:26.280
less when you are in an environment with

00:01:30.060 --> 00:01:30.560
dynamic themes like mine because I tend to

00:01:36.500 --> 00:01:36.680
adapt the theme to the light conditions in my

00:01:40.520 --> 00:01:40.760
working place. So what I did at the end was

00:01:44.540 --> 00:01:44.820
coming up with a style for faces called flood

00:01:49.020 --> 00:01:49.140
button for boxes, called flood button as a

00:01:52.640 --> 00:01:53.140
simple way to get modern looking buttons and

00:01:59.160 --> 00:01:59.380
bars. So flood button is a face style for

00:02:02.380 --> 00:02:02.740
boxes within buttons that automatically sets

00:02:05.240 --> 00:02:05.440
the border color to the background of the

00:02:08.440 --> 00:02:08.880
face, as opposed to nil,

00:02:10.440 --> 00:02:10.940
which uses the foreground.

00:02:14.380 --> 00:02:14.880
And this produces a very doom mode line-ish

00:02:18.400 --> 00:02:18.640
look and feel. And if you want to know where

00:02:21.580 --> 00:02:21.780
I use it, basically for the mode line and I'm

00:02:24.720 --> 00:02:25.200
using tab line for a long time now.

00:02:28.480 --> 00:02:28.680
So for the mode line and for tab line to

00:02:35.080 --> 00:02:35.280
organize my windows. And since an image is

00:02:37.160 --> 00:02:37.660
worth more than a thousand words,

00:02:40.860 --> 00:02:41.160
I'm just going to stop this and start sharing

00:02:44.120 --> 00:02:44.360
a small Emacs environment I have ready for

00:02:47.020 --> 00:02:47.220
this talk where I'm going to show you a flat

00:02:50.220 --> 00:02:50.720
button in real life. So if you hold with me,

00:02:56.100 --> 00:02:56.600
I'm going to share a window.

00:02:58.840 --> 00:02:59.340
It's going to be this 1.

00:03:01.386 --> 00:03:01.430
Share and share. Here we are.

00:03:01.780 --> 00:03:02.280
And share. Here we are.

00:03:08.040 --> 00:03:08.540
So this is an Emacs which is recent,

00:03:13.460 --> 00:03:13.740
reasonably recent. Nothing especially it was

00:03:14.900 --> 00:03:15.400
compiled, it's Emacs 30.

00:03:18.480 --> 00:03:18.780
And I think what I have here is something

00:03:19.900 --> 00:03:20.400
that I compiled last weekend.

00:03:24.940 --> 00:03:25.140
I was tempted to use something compiled this

00:03:28.080 --> 00:03:28.580
morning, but I saw a patch by Ellie regarding

00:03:30.640 --> 00:03:31.140
something in the faces and I didn't want to

00:03:34.160 --> 00:03:34.440
live a too risky life here,

00:03:36.220 --> 00:03:36.720
so I'm going to use this.

00:03:40.740 --> 00:03:41.240
I'm not starting the ZMAC from the normal

00:03:44.160 --> 00:03:44.660
Emacs directory. I have my own,

00:03:49.440 --> 00:03:49.840
I have a special customization directory for

00:03:51.560 --> 00:03:52.060
Emacs, and this is this 1.

00:03:57.760 --> 00:03:58.100
And here what I have is basically an early

00:04:01.880 --> 00:04:02.220
init and an init. So the early init,

00:04:03.680 --> 00:04:03.900
which is quite stupid as you see,

00:04:07.800 --> 00:04:08.300
the only thing that it does is getting rid of

00:04:10.640 --> 00:04:10.800
most of the things that I'm not going to be

00:04:12.740 --> 00:04:13.240
using here. So I have no toolbar,

00:04:15.700 --> 00:04:16.200
no scroll bar, no tool tips.

00:04:20.560 --> 00:04:20.760
I don't like global highlighting my line art,

00:04:21.720 --> 00:04:22.040
so I'm not using that.

00:04:22.800 --> 00:04:23.300
I'm not using dialogues.

00:04:25.560 --> 00:04:26.060
And to start up easier,

00:04:29.440 --> 00:04:29.940
I don't inhibit, I don't use any startups

00:04:34.540 --> 00:04:35.020
screen. So just to make sure that everything

00:04:41.360 --> 00:04:41.860
is correct, that everything is as I want,

00:04:44.840 --> 00:04:45.340
just to show you my Emacs.

00:04:49.240 --> 00:04:49.740
As you see the Emacs 30,

00:04:53.900 --> 00:04:54.100
which was built on the 26th of November which

00:04:55.520 --> 00:04:56.020
was not very long ago.

00:04:57.880 --> 00:04:58.380
And now here comes the real magic.

00:05:00.540 --> 00:05:01.040
My init and my init file.

00:05:04.020 --> 00:05:04.520
Maybe I go to my init file here.

00:05:11.880 --> 00:05:12.040
What I have is just a variable saying that I

00:05:15.880 --> 00:05:16.380
want an extra 8 pixels for my mode line.

00:05:18.240 --> 00:05:18.740
And I have 2 functions.

00:05:23.800 --> 00:05:24.300
1 is modifying the mode line,

00:05:25.920 --> 00:05:26.420
both the active and the inactive,

00:05:32.180 --> 00:05:32.680
using the nil style with this line width of 8

00:05:36.380 --> 00:05:36.600
pixels and to compare with it what I have

00:05:39.140 --> 00:05:39.640
here is another function which will customize

00:05:42.400 --> 00:05:42.780
the face for mode line and instead of using

00:05:44.960 --> 00:05:45.460
nil I'm using here flat button.

00:05:49.440 --> 00:05:49.940
So this is my all the magic that I need.

00:05:53.240 --> 00:05:53.500
I'm going to copy that and I'm going to go to

00:05:57.340 --> 00:05:57.520
the scratch buffer which is always the best

00:05:58.780 --> 00:05:59.280
way of checking these things.

00:06:05.660 --> 00:06:06.100
When I normally work with themes,

00:06:09.320 --> 00:06:09.520
what I do is if I want to further modify the

00:06:13.620 --> 00:06:14.120
themes, I add an advice to load a theme after

00:06:17.800 --> 00:06:18.040
the theme is loaded. In this first case,

00:06:21.280 --> 00:06:21.540
what I'm going to be doing is adding the nil

00:06:22.680 --> 00:06:23.180
sign so that you can see it.

00:06:30.240 --> 00:06:30.740
And once this is done,

00:06:33.000 --> 00:06:33.500
I'm going to load 1 of the Modo Soprandi

00:06:42.600 --> 00:06:43.100
themes, the tinted 1. Here we are.

00:06:56.400 --> 00:06:56.900
And as you can see, when I loaded the theme,

00:07:01.880 --> 00:07:02.160
what I see here is my mode line with the

00:07:05.320 --> 00:07:05.580
x-ray pixels using since I'm using the nil

00:07:09.520 --> 00:07:09.720
style it's using the background color and

00:07:12.620 --> 00:07:13.120
this gives you this thick black line there

00:07:17.080 --> 00:07:17.240
furthermore if you have the inactive line you

00:07:20.660 --> 00:07:21.040
see that it is grayed out so it's always

00:07:22.800 --> 00:07:23.300
using the foreground color.

00:07:33.300 --> 00:07:33.480
So now what I'm going to do is to load the

00:07:35.200 --> 00:07:35.700
models we have any which is the dark theme

00:07:40.080 --> 00:07:40.400
and this case what you see is the love deal

00:07:43.220 --> 00:07:43.720
the lines always using the foreground color

00:07:49.200 --> 00:07:49.700
use the Give you an extra 8 pixels of a white

00:07:53.000 --> 00:07:53.500
color here, which is not what we really want.

00:07:58.900 --> 00:07:59.240
At least not what I wanted to have.

00:08:01.560 --> 00:08:02.060
So what I'm going to do now is I'm going to

00:08:08.940 --> 00:08:09.440
remove this advice and add the flat style

00:08:12.800 --> 00:08:13.260
thing, flat style function,

00:08:15.480 --> 00:08:15.920
so that we're going to do the same.

00:08:18.380 --> 00:08:18.540
But now when I load the themes I'm going to

00:08:20.760 --> 00:08:21.040
have a flat button style for the mode line

00:08:21.880 --> 00:08:22.380
and you'll see the difference.

00:08:29.480 --> 00:08:29.980
So if I now load Modo Software Andy theme,

00:08:35.380 --> 00:08:35.640
tint it, what I get here is as you see I get

00:08:40.520 --> 00:08:40.760
a solid mode line which is a bit more which

00:08:49.240 --> 00:08:49.400
is wider than the normal mode line And if I

00:08:53.140 --> 00:08:53.480
go to the dark theme, I am going to see,

00:08:55.440 --> 00:08:55.920
you're going to see that now the theme

00:08:59.860 --> 00:09:00.360
changes and I have a mode line which is,

00:09:02.700 --> 00:09:03.080
if not the doom mode line,

00:09:08.260 --> 00:09:08.760
quite close to the Doom mode line.

00:09:11.200 --> 00:09:11.700
Where do I use this? Personally,

00:09:15.280 --> 00:09:15.580
I use it for the mode line and for the tab

00:09:18.960 --> 00:09:19.460
line, as I've said. And it gives me this

00:09:27.040 --> 00:09:27.340
clean themes with thicker mode line and tab

00:09:33.620 --> 00:09:34.120
lines which at least in my personal feeling

00:09:40.160 --> 00:09:40.660
look quite modern. And this will be my

00:09:43.820 --> 00:09:44.200
demonstration. So I'm going to stop sharing

00:09:46.820 --> 00:09:46.960
the screen and I'm going to try and see if

00:09:49.400 --> 00:09:49.900
there's anything on the on the chat.

00:09:57.040 --> 00:09:57.360
And I just wanted to know if there are any

00:10:01.240 --> 00:10:01.740
questions. Thank you Pedro.

00:10:05.000 --> 00:10:05.180
Yeah We are now into the Q&A portion of the

00:10:06.420 --> 00:10:06.920
talk. So if folks have questions,

00:10:10.080 --> 00:10:10.240
please post them on IRC or on the pad and

00:10:11.040 --> 00:10:11.540
we'll take them up here.

00:10:25.400 --> 00:10:25.900
Okay, I see a question here saying,

00:10:28.520 --> 00:10:28.860
do you plan to upstream the style into

00:10:32.580 --> 00:10:32.900
core-remix? It's part of core-remix since

00:10:35.800 --> 00:10:36.300
Emacs 29, so you have it.

00:10:49.060 --> 00:10:49.540
How difficult to...I mean,

00:10:54.320 --> 00:10:54.620
you already have the flat button style in

00:10:57.660 --> 00:10:57.940
Core Remax. And you've seen that the main

00:11:00.740 --> 00:11:00.980
thing is, if you want to have a thing like

00:11:06.660 --> 00:11:06.940
that, you just have to customize the face.

00:11:10.920 --> 00:11:11.420
I don't think it's too difficult to do.

00:11:13.380 --> 00:11:13.880
It's adding the style that you want.

00:11:17.360 --> 00:11:17.860
So if you want to see it again,

00:11:20.860 --> 00:11:21.160
I'm going to go and share the screen once

00:11:23.980 --> 00:11:24.160
again and show you the only thing that you

00:11:31.740 --> 00:11:32.240
really need to do. And control X 1,

00:11:34.680 --> 00:11:35.180
control X buffer to init.

00:11:41.040 --> 00:11:41.320
So this is what you would have to do to get

00:11:48.880 --> 00:11:49.020
your mode line or mode line inactive with a

00:11:52.360 --> 00:11:52.660
flat button style. So what you do is you get

00:11:56.120 --> 00:11:56.280
your face like this, the face that you want

00:11:59.640 --> 00:12:00.060
to modify. You say that you inherit from the

00:12:02.920 --> 00:12:03.200
original face and what you do is that you add

00:12:06.820 --> 00:12:07.000
a box with the line width that you want and

00:12:08.040 --> 00:12:08.540
the style plug button.

00:12:10.900 --> 00:12:11.400
I don't think it's too difficult to do.

00:12:23.100 --> 00:12:23.600
How much work was involved in implementing

00:12:27.360 --> 00:12:27.780
this style? It is not 1 of the biggest

00:12:28.940 --> 00:12:29.440
patches you have in Emacs.

00:12:32.260 --> 00:12:32.640
It was my first patch,

00:12:34.500 --> 00:12:34.960
so it was like 20 liners.

00:12:40.280 --> 00:12:40.780
It's not too much. Yes,

00:12:44.540 --> 00:12:45.040
I am going to go and...

00:12:54.733 --> 00:12:54.800
Oops. SKB and... There you are.

00:12:58.660 --> 00:12:58.900
And there you are. I've checked it for copy

00:13:05.440 --> 00:13:05.580
and paste. Of course, then what you have to

00:13:09.440 --> 00:13:09.760
do is to add an advice and add this thing

00:13:16.680 --> 00:13:16.980
after the add this code after the well after

00:13:17.760 --> 00:13:18.260
you've loaded the theme.

00:13:22.420 --> 00:13:22.920
It says, ModeLine and ModeLineInactive.

00:13:27.400 --> 00:13:27.720
I'm also using it for TabLine and

00:13:29.820 --> 00:13:30.060
TabLineInactive and all this kind of things.

00:13:30.060 --> 00:13:30.560
Thanks.

00:14:00.660 --> 00:14:01.160
Thanks. Any other questions?

00:14:35.020 --> 00:14:35.520
Reactions? Thank you. Thank you.

00:15:04.160 --> 00:15:04.340
Okay, I think we still have about 6 or 7 more

00:15:05.840 --> 00:15:06.220
minutes of live Q&A on stream,

00:15:07.400 --> 00:15:07.900
so if folks have any more questions,

00:15:09.940 --> 00:15:10.440
please do feel free to post them on the pad.

00:15:30.060 --> 00:15:30.560
Silence. Silence. Silence.

00:16:02.280 --> 00:16:02.780
Well, do you teach eMAX to any of your

00:16:04.700 --> 00:16:05.200
university students? As such,

00:16:08.080 --> 00:16:08.580
there's no course that we teach,

00:16:12.800 --> 00:16:13.300
but in tutorships and in tutoring sessions,

00:16:15.460 --> 00:16:15.800
when we do practical things,

00:16:21.100 --> 00:16:21.300
and I do a lot, I tend to use Emacs for all

00:16:24.480 --> 00:16:24.960
the tasks so that the students get involved

00:16:28.220 --> 00:16:28.380
in it. I also have a small introduction to

00:16:29.640 --> 00:16:30.110
Emacs that I share with my students.

00:16:33.400 --> 00:16:33.900
So So every year I have 2 or 3 new adepts.

00:17:43.900 --> 00:17:44.400
We have a question on IRC.

00:17:46.920 --> 00:17:47.080
Someone asking can you please show what the

00:17:53.160 --> 00:17:53.660
tab line looks like? Just a second.

00:17:56.880 --> 00:17:57.380
This would be like this.

00:18:03.096 --> 00:18:03.193
For that I'm going to use my regular Emacs.

00:18:06.220 --> 00:18:06.560
Just my my regular emacs so just let me fire

00:18:09.220 --> 00:18:09.720
it up. Sure.

00:18:23.540 --> 00:18:24.040
And

00:18:39.760 --> 00:18:40.120
That's my current situation with the tab

00:18:42.660 --> 00:18:43.140
line. I do have a couple of functions.

00:18:44.680 --> 00:18:45.180
So this is 1 of the things that I use.

00:18:51.500 --> 00:18:51.600
As you see, both the tab line here and the

00:18:57.040 --> 00:18:57.340
mode line change. And the other thing is I

00:19:00.520 --> 00:19:01.020
can, this is for some situations,

00:19:03.600 --> 00:19:03.940
not currently because it's just later,

00:19:06.420 --> 00:19:06.680
it's a bit too dark. But this is for light

00:19:10.260 --> 00:19:10.760
days. I have like 3 or 4 themes that I can

00:19:15.020 --> 00:19:15.140
switch to these are the themes that I

00:19:18.120 --> 00:19:18.620
normally use This is how the tab line looks.

00:19:22.660 --> 00:19:23.160
This is how the tab line here looks with the

00:19:28.280 --> 00:19:28.780
with a flat button style.

00:19:35.640 --> 00:19:36.140
Looks great, Thank you for sharing.

00:19:37.200 --> 00:19:37.700
You're welcome.

00:19:50.720 --> 00:19:51.220
Okay, I think we have 2 or 3 more minutes.

00:19:53.600 --> 00:19:54.100
So if folks, if you have any final questions

00:19:55.480 --> 00:19:55.980
for Pedro, please post them in.

00:20:37.360 --> 00:20:37.860
Okay. Okay.

00:20:54.260 --> 00:20:54.760
Okay.

00:21:34.540 --> 00:21:34.700
No further questions. Yeah,

00:21:36.380 --> 00:21:36.880
it seems we don't have any further questions.

00:21:39.100 --> 00:21:39.480
Just another audience member also thanking

00:21:44.060 --> 00:21:44.200
you on the chat. So with that,

00:21:45.320 --> 00:21:45.480
I'll say Thank you very much,

00:21:47.080 --> 00:21:47.580
Pedro, for your great talk and for the Q&A,

00:21:50.220 --> 00:21:50.320
for your work and for helping spreading the

00:21:52.360 --> 00:21:52.860
joy of Emacs. Okay, thanks.

00:21:56.140 --> 00:21:56.640
Thank you. Bye-bye. It was a nice experience

00:21:59.200 --> 00:21:59.700
here. Very nice tool. Cheers.

00:22:01.640 --> 00:22:01.920
Awesome. Take care. Bye.

00:22:02.720 --> 00:22:03.220
Bye. Bye.