summaryrefslogblamecommitdiffstats
path: root/2023/captions/emacsconf-2023-flat--a-modern-emacs-lookandfeel-without-pain--pedro-a-aranda--main.vtt
blob: 5d17e1decd087d970a5637e24d6eff62f9ffb018 (plain) (tree)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755


















































































































































































































































































































































































































































































































































































































































































































































































                                             
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.