Xah Talk Show Ep787. emacs lisp. add width height to all thumbnails

Added: 2026-05-30

[00:00:02]Testing, testing. Sorry for the delay.

[00:00:04]Testing. I got some uh I think my audio is low. So anyway, we're going to do Emac this coding today. And hello Hang Joe. Are you the Huang? I know you are on a different account. So anyway, so OBS I mean Emac this coding. Okay, let's see. I'm alive. So is my audio low? Is that is my audio low?

[00:00:29]So let's go to Windows. Yeah, Windows 11. You know, you got this audio enhancement anyway. So let's uh let's just code Emac. This that's all we going to do today. So let's show in browser.

[00:00:40]If you are here, say hi. You are watching S talk show. Hello Jang. I'm Huang Bra. Hey.

[00:00:47]So um Hang from Germany. Okay. So what you up to? What how are you doing? Huang is also a EMAC list coder.

[00:00:57]So, we're going to do Yeah. So, okay.

[00:00:59]So, today we going to Okay. I'm going to have some drink, too. So, I'm just going to do random. Okay. This video, you probably don't want to watch this video. And you probably want to pay me.

[00:01:12]Okay. Go to my PayPal and pay me and I'm just going to drink some. Okay. So, Emac coding. Okay. The most advanced fantastic coding you will see. But I'm going to do it slowly. Okay, have some red wine first.

[00:01:30]Can you talk about what you normally eat nowadays?

[00:01:36]Okay, that's going to ruin my talk show today because I'm I'm then I'm going to talk about that for an hour. What? Okay, what do I eat nowadays? Uh I I eat whatever my wife cooks. Fantastic wife.

[00:01:50]Well, you need to get your wife. Grab her quite quickly.

[00:01:56]You better grab her. Grab your girlfriend. That China girlfriend. You need to grab her fast and have children.

[00:02:02]Okay. So, that is my advice to you.

[00:02:07]Now, don't don't don't worry about what will happen, you know, in a few years.

[00:02:11]Maybe you'll get, you know, maybe you don't get alone or something, whatever, you know, but grab her, have a baby now.

[00:02:18]Okay, that's my recommendation. So, what do I eat these days? I eat whatever my wife cooks.

[00:02:26]Most delicious uh Chinese food.

[00:02:34]Okay, so remember we're going to do emac this coding.

[00:02:44]Am I alive and well?

[00:02:48]Here I'm hanging hanging up.

[00:02:53]She's doing internship at by dance. Wow, that's nice. That's nice.

[00:03:06]China is taking over while the United States of America is collapsing.

[00:03:15]Collapsing badly.

[00:03:19]collapsing very badly.

[00:03:22]Uh pretty sad.

[00:03:25]Okay. So I Okay, we're going to finish this for sure. Okay. Let me let me tell you. Let me start to do what we want to do today. Okay. Yeah. So mark the time.

[00:03:38]So we're going to do Emac B coding beginning now. Okay. So the problem is you see let me let me tell you. You see you go to a website. This is about uh website design for webdev. Okay. So you go to my website kali.info.

[00:03:54]Okay. Sali.info. For example, you you can go to the keyboard uh uh page. Let's say keyboard. That's a popular topic.

[00:04:03]Okay. Then you got uh ergonomic keyboards. You see you can click there.

[00:04:08]Then you see a lot ergonomic keyboards.

[00:04:10]You see you see they are made uh I have this icon links. Each link is icon. You know, each one of these I've been using live for like several years. I've been using this live for like two, three years. I've been using this one live for like uh three years. Uh you know, uh I've been using um and I've been using this one for several month live stream. You can watch my previous live stream.

[00:04:41]You'll see. See, I've been using uh this one for a week, I think, or a few days.

[00:04:48]Um I've been using uh what is this one?

[00:04:51]This one I don't have. I think it's great. But um you know, but things have changed. Okay, we need to stop. So anyway, because otherwise this video is going to be about keyboards. So this is I've been using this one for like um live for maybe a few months.

[00:05:11]But off life, you know, I've been using them half a year or something. Each one is different. Anyway, so and this one is what I am using right now. You are seeing. Okay. Ultimate hacking keyboard.

[00:05:24]Okay. I recommend Glove 80. I highly recommend Glove 80. Very expensive. Uh uh uh Kinesis 360. I also recommend better than better than Kinesis Advantage 2. Anyway, I'm not going to talk about keyboards because otherwise this video is going to be keyboards. I talked enough about keyboards, you know, 100 videos. So, this expert is expose is very also superb. Automate hacking is also supreme, but it's kind of very expensive. Okay, this this one I'm using.

[00:06:03]Uh so anyway, so so what so okay, back to the topic. So I have these icons. So, so these icons uh let me show you. Okay, so you open them so you can see um so for example uh one piece split sections dish surface keyboards. Okay, so you go down so you can see go down go down go down there. Dish surface keyboards that correspond to that.

[00:06:31]Can you see my screen? No, you cannot.

[00:06:34]You got a problem. So this needs to be like that. Okay. Well, okay. And increase the height. Okay.

[00:06:47]So you see this correspond to that. And this one piece split sections correspond to there. You see? Now let's go here. So you see each one of them is a list. You see this is ul stand for unordered list.

[00:07:04]Okay? And each list item you see and each item list item then you got a anchor tag that's a link. Then inside the anchor tag you got this image. So let's open the image. You see that's a thumbnail. Okay. Now pay attention. Notice in thumbnail there is no width and height.

[00:07:31]Why is that? because I removed it a few years ago because you know let me show you how this you know for how do I uh write my web page let me show you okay so for example I want to add a new link so so okay watch my commands okay so the commands on the pink window you will see all my command calls and keystrokes for example delete forward delete backward undo undo okay so you can see the command names and their keystroke on the The keystroke is Vora keyboard layout.

[00:08:05]Okay, so let me just go slowly. I repeated this a thousand times in all my videos. So for those people don't know.

[00:08:12]Okay, so I'm using a vorac keyboard layout which is one of the advanced keyboard layout. So you can find the information on my sard web keyboard blog. Okay. So what is keyboard layout? So you just go to the layout section design layout layout there there keyboard layout design then you go to ergonomic keyboard layout. So you can see the layout diagram heat map.

[00:08:45]The bigger the circle means that letter is that key is more frequently used.

[00:08:50]Okay. So this is quarti qwy.

[00:08:54]Everyone is familiar with that's your keyboard. You can see it. That's what the keyboard you use which is idiotic.

[00:09:02]Okay. Then you can switch to vorac and all of a sudden you can see the most frequently used keys are now in a home row. You see aligned you see back to quoty. You see quy is all over idiocy borak. You see then people later on has a lot of variations. So you got kmarmac you got you got workman you got nman. So there's a science, there's an entire science and culture dedicated to the keyboard layout. For example, you go to Reddit, there's a community about all these different keyboard layout like these nerds like they design their layout and and talk about which one is more efficient. Okay. So, I have 10,000 articles about them like you'll find, you know, you you need to go through my articles like links so many so many because I've been I wrote them, you know, for well the beginning of my keyboard journey is 1992.

[00:10:06]Okay. So, I read read read read all the things before the internet began. So, anyway, so so you got the keyboard layout. Okay. So you can see the quarty.

[00:10:16]So let's do it again. Quarty roac coac then others. And then you got other fancy ones. Uh beak bico 15 whole mac. These are new. This this is like 10 years old. Okay. Only 10. Uh komarmac is okay. Quarti is like 100 years old. 150 years old. Quarti. C. Uh Vorac is uh is 80 years old something like that. Okay. Komarmac is 20 years old. Kmarmac began around 2006 by a whose name is Kmarmac. That's his name.

[00:10:58]You know he he got a vision. Uh Vorak is not good enough. We can do better.

[00:11:04]Kmarmac and he push for it. He's got you know he's very pushy. You know he want to replace Vorak. So I just I don't like this the guy. Okay. But he's good. Okay.

[00:11:14]I think he's a good guy. He didn't he did not do nothing wrong. Unlike some other, you know, people in programming community. He didn't do anything wrong.

[00:11:24]But he's just like promoting a lot of his uh keyboard layout. You know, he think it's superior than Vorak and a lot of people fail for it. In some way it's better, but not in other ways. I have an article on that. Okay. you you know I have an article on that in diving in depth. So anyway that you got COMAC, you got then you got this QFML WY. What what a name you see because there's another guy who is a biologist who is a um you know anyway a scientist you know on his spare time he studied the efficiency of layout. So he came up by computer came up with a this layout supposedly the most the most efficient you see and this this one is like uh also uh by now 15 years old okay like 2010 or something and you have Workman Walkman is you know the guy who studied Vorac and he used it and he studied Karmac the newcomer the new new kid in town Karmac and these workman thought they got problems. Okay, they got problems. So, so I created Walkman solve their problems. Okay, so Walkman is also like 10 years old something. Okay, Norman is another new one. Okay, so anyway, the each one's got stories.

[00:12:48]Okay, each one's got history.

[00:12:51]So anyway, that's about layout. So let's go back because I want to do a eaglist coding. Is anyone watching? If you are watching, say hi. Okay. and PayPal me.

[00:13:01]Go to PayPal, donate to me. Okay.

[00:13:05]Jesus, looks like we're going to never start to code if because I start to talk about layout and stuff in random. Do you guys like it?

[00:13:16]But actually, I'll make a promise. Actually, I'm going to actually code this because because uh because it happens so often that I start to do live stream and I just talked about stuff for an hour or even two without actually doing what I wanted to do. So, it became delayed and next, you know, uh live stream and so on.

[00:13:40]Uh world blog. Uh so, okay. So, are you guys here? So, say hi. Okay. Hey. Yes.

[00:13:48]Okay. Who else is here? Like three people something like that.

[00:13:58]So we were talking about keyboard layout. Okay, that's a good topic. But so Neo is for design for German language and there's alternative AD andw also for German and there's a BO or BO for French designed for French the most efficient for French and there's French ai and there's p navidit nivo for Brazil Braz Portuguese okay then there's Russian junken junan is not efficient layout But it's a but there's a efficient one for Russian.

[00:14:35]Anyway, so these are about keyboard layouts. Okay. So why are we talking about it? Because I was telling you I'm using Vorac. I've been using Vorax since 1994 before you were born. Okay. 1994 because you know anyway uh you know I had to create the layout on the Mac using best edit anyway I talked about that before anyway so I was using I am using the vorac keyboard layout so the keystroke you see when whenever I press a key you see it shows on the pink window those are from vorac layout okay okay and I'm using uh safly keys Now, if you don't know what that is, that's the most efficient key binding system on e on Emacs and you can look at the website. Okay, so here's the source code. 4,000 lines of code. Go to the top and go to the Kasoftly keys homepage showing browser. So, this is Kasafly Keys homepage for Emacs. It is the most efficient key binding system for Emacs.

[00:15:49]Okay. In the universe. In fact, not just for Emacs. It's the most efficient keybinding system. Meaning that if you are a programmer or if you need to are a writer, you write a lot, you need to edit text pro profusely. You know, uh this is the most efficient way saves you keystrokes. Okay, it's kind of like model. It's like vim vi model, but the key strokes, the key choices are based on frequency of the command. So there's a science behind it unlike VI or Vim which is like historical. Okay. The Vim VI keys are just historical. It so happens that back in 40 years ago 50 years ago 1970s they do it that way. Therefore it's that way. That's how vi or vim or neo vim are like. Okay. like the the you know it's got HJ KL for arrow movement okay but keys is designed from the ground up with a goal of efficiency in mind okay it's also like model just like vibody efficient okay so anyway that is what I am using okay that and in fact this is probably my uh best achievement in my life when I'm dead I will be remembered for this probably something like that a little bit. Okay.

[00:17:22]What heavy what heavy talk I switch to comarmac. Okay, that's not too bad. Enjoy. Do you have something like expand region? I really like using that.

[00:17:42]Well, in HTML I have, you know, I'm using some HTML mode. So, you can see there. So, you can expand, of course, you can expand.

[00:17:52]For example, right now, I just expanded to select the entire body. Uh, so it expand by the nesting of the HTML, right? So, but in um in uh in EMAC this you can also there's also a command. So for example, let's say you your cruiser is on a paren and you press this key I it will select the whole parenthesized expression what the lispers would call sex with a p that's what lisp lisper lisp phonetics would call it sex p which stand for uh symbolic expression okay s e xp P.

[00:18:39]So anyway, you put so put your cursor on the pin and press the key I or on quarti press the key G if you are using keys.

[00:18:51]Then we'll select the entire parenthesized expression. Okay. Now press it again to expand it. You see that's what you are asking. You see?

[00:19:04]Press it again to expand. You see now it became the whole function right now press again it it stops because there's no more expansion for lisp. So that is the case when you are in lisp code. I'm using kas eac lisp mode. You see I'm using all my modes all my own because I'm too old. I don't use any other people's code. All the code I use is my own. And you have to and for 10 years they are free. They are open source. But the open source they grab, you know, they don't pay, you know, you don't get nothing. You just become tech support for them. So now they are not they are still open source but you have to pay me to get them. Okay. So except keys is still free on the web. Okay. the others like SA EMAC list mod HTML mode uh ka emac list mode you have to pay kasa css mode and the most um complicated like the most featurerich is actually the kasa html mode that take me the most time to do because it's very featurerich uh anyway so you are asking about the expansion feature of S flag fly keys. Okay, it's limited because it can only do in list code. For example, put your cruiser on a par or you know your cruiser can be on anywhere. Press a key, it'll select the current word.

[00:20:47]Okay, or function name. Press again, it select the current line and press again. Okay, that doesn't expand. So if you want to expand on the parenthesis you have to put the um you have to put on the beginning paren.

[00:21:06]So that will you see that will expand selection by the syntactic unit of parenthesis.

[00:21:15]You see very nice but the limitation is that it's only in eacisp. So for example, let's see if I copy this uh paste it. Now this is let's say fundamental mode. Does it still work? Let's see. Do it. Do it. Do it.

[00:21:34]Yes. You see it still work. So it does not matter which mode you are in. As long as you have nested parenthesis and as long as you put your cruiser in the beginning opening paren then you press a key which is called extend selection that's the command name then it will add you it will like expand the selection to the syntactic unit of parenthesis okay and you don't have to be in list mode you can be anywhere Okay.

[00:22:10]So that answer your question on this is part of the safely keys. Okay. So um do you have something like expand region? Okay. So anyway, so in if you have paren that works, but if you are in dealing with Python code or C code or whatever new other language, no uh yeah so I don't have a feature up for that.

[00:22:39]Uh you know because um anyway no basically no okay I think you could improve that feature then as a video as a video. Um well um I'm not sure I'm going to work on that.

[00:22:54]Uh so if you you know if you code it one and you can make a uh push uh what they call on GitHub. So you can you know if you want to you can help me uh then we can I might commit your code.

[00:23:12]Okay.

[00:23:17]Uh I think you improve that feature as a video. Well, now that's you see this extend feature is uh fairly complex.

[00:23:26]Okay, because if I do it live, yeah, some of you says it's interesting, but actually I don't think so because it's very technical. So let me show you the command. Okay, so describe key press I. So you can see the the command is extend selection. Okay, now jump to the source code.

[00:23:46]So here is a source code. So press a key, copy it, new buffer, paste it.

[00:23:52]Okay. So this function is 124 lines. You can see 20 124 lines of code. Now let's make it emac this mode. So press press uh press press. Okay, that's now in ka emac this mode. Okay, now syn syntax colored. So this function what it does is you see you have to know you know whether um you are already in a selection. So it's like first first of all you check if you are you already have a selection if so then you try to expand the selection. Okay so you see that's what this code does. Now if you don't have a selection so then if you don't have a selection then then this is what you do.

[00:24:42]If you don't have a selection meaning that you are coding this command for the first time then this is what you do. Okay. So that okay it's kind of complicated code but if you already have a selection then this then this is what you do. Okay. So then then this so you you you guys are saying that um you know it would be interesting to watch not really because it it's like you're going to take 30 minutes just to explain what you actually wanted to do because then in Python in in C or C++ for example or Goland in in JavaScript you you really like the the the there's lots of things to explain and people don't understand. People don't like it, you know. People like people like quickly drama. That's what people like.

[00:25:40]If you actually go into detail, people don't understand. Nobody watches.

[00:25:45]Okay, we digress so much. Um so much.

[00:25:51]Now I want to explain back to So back to this. Okay, back to this keyboard. Um I wanted to let me show you. Okay. So So press a key to select to extract the URL. Now open the com open new lines.

[00:26:08]Paste it. You can see I extracted the URL. So now I call a command called uh uh icon linky. Okay, that's a command.

[00:26:19]So do it. So you see those two lines becomes this. Okay. Undo. So you see I begin with two lines. One of the line is a file path. The other line is a image file path. Open uh let's see open that. You can see it's a image file path. Close it. Okay. Now I call the command HTML icon linkify to it. You see it became it became kind of linkified.

[00:26:52]Okay. Now show in browser. Now refresh.

[00:26:55]You see, you see it be repeated. You see, we just added that. Can you see?

[00:27:02]Now notice, notice this image link.

[00:27:05]There's no height and width.

[00:27:10]Uh because I few years ago because okay, let's delete it. Okay. Because if if you add height and width to all the image, then the page become more cumbersome.

[00:27:22]you know it becomes like lots of height and height and width width and height width and height for all these um image tags. So I find it confusing so I actually changed my command so it doesn't add width and height. So anyway so the width and height and many of them are actually in part part of the uh file name. You can see uh it's actually uh part of the file name.

[00:27:53]Okay. I don't know where am I going. So this is getting uh I need to code this. Um Jesus now I'm I think I'm have I'm 30% drunk.

[00:28:12]I need to do this. Okay. I need to so let me so let's go back okay so let's let's do it okay so this page right I want to add width and height so let's um describe function uh what is a function we just called so describe um this uh view lo so view lo command let you shows what keys you just pressed in the in the last a minute also and what's their name the function actually you called. So let's go back. So um so we can see what's a what's a um god we did a lot um you see execute extended command html select element and uh what did we do iconify right iconify link why is it not there it's not there because the iconify link is not a key. This view log lo only shows keys. That's another interesting thing. Okay, so you guys don't know. So you see I press this key, it calls the command view lo and that is a emac jargon. That's kind of the emac jargon.

[00:29:42]View loage. Like what the does losage mean?

[00:29:49]Uh that's so that's a that's nerd history. Okay, that's nerd history. So so what does loage mean? So let's actually uh I don't actually know the technical detail but we can ask AI.

[00:30:04]Okay, what does loage mean in EMAC? Okay, that's like it's like a hacker culture.

[00:30:14]Okay. Losage in Emacs. Losage refers to the record of your recent keystrokes and the commands they invoked. It's an old school emac term from loss as in what did I just lost break loose break for the input history buffer. So magnify magnify magnify magnify magnify. Okay.

[00:30:41]So that's what lossage is. So a little bit like hacker history anyway.

[00:30:51]So close that. Uh uh so the command describe function uh icon linkify. So there is a function saw icon linkify.

[00:31:05]Let's jump to the source code. We want to do this. Okay. So here's the source code. We want to make it at the width and height of images. Okay.

[00:31:17]God I'm 30% drink drunk and I can't do this.

[00:31:25]Ch.

[00:31:27]Damn.

[00:31:29]Damn sick try. Thank you. Thank you.

[00:31:31]Damn sick try.

[00:31:35]You could be interesting to watch. Thank you. So, do you have a question?

[00:31:41]Uh, fantastic. Fantastic. Okay. So, so what are we doing? So, what um God I'm 30% drink drunk, you know, actually. So, drinking is actually not very good.

[00:31:59]When you when you drink, you cannot code.

[00:32:02]Uh, so what are we doing? So what do I want really want to do? Well, originally what I want to what I want to do is for my all all my website like 3,000 um about 20,000 well actually about 12,000 web HTML pages for all occurrences of the image tag that does not have width and height. I want to add them. Okay, that is what I wanted to do for this video. I can do it, but we didn't begin it. So, now it's 40 minutes. Uh, and uh, so anyway, so you see 12,000 for 12,000 HTML pages for each occurrence of the image tag in them where there is no width and height basically where you got the old thumbnail. Okay, you want to add an uh width and height like attribute. Okay, that's what I want to do.

[00:33:11]And the way to do that is in EMAC. So um but but now I have to figure out what do I going to do now? So, because now I'm like incapacitated by the red wine So, okay. Anyway, here's a key command.

[00:33:36]Okay. There are many ways to do this.

[00:33:38]One way is just to fix it. So, you do basically grab. So, you search for all HTML files. You find any image tag.

[00:33:50]Okay. whose uh whose old value is thumbnail then you check if it got width and height. So typically usually if it the if the old value is thumbnail it will not have width and height because I removed it which is a mistake a few years ago.

[00:34:11]Okay. because I want to I want my HTML source code to be simplified, you know, not not with width and height.

[00:34:20]Uh but it turns out that that width and height is very important. Okay, I haven't explained why. Um Jesus the the reason width and height is important is that when you load this on a website HTTP you know if you don't have the width and height information the browser is going to load each image then realize what is the width and height then it will like uh rerender your HTML. So basically to the user the effect is that when you load a page, when you go to a website, you'll see the text like jumble around. You'll see like after a second you'll like move. That's that's not a good experience. Okay? You don't want that.

[00:35:12]That is called uh that is called cumulative layout shift. Okay.

[00:35:22]That's a jargon from from the webdev.

[00:35:25]Okay. So if you do webdev, you'll know this. Okay. So how do you know you got this situation? Well, you can know by Okay. Go to uh a browser then control shift I to launch to open the console the dev console. Very complicated today. Then you need to go to the networking tab. Okay. Here networking tab.

[00:35:52]Then you reload the page. Okay. So you can see so let's F5 to reload. So you go back to the uh browser dev. So you can see so this this is very complicated. Okay.

[00:36:08]You know webdev today is fairly complicated. So you can see it loads it shows you the network tab.

[00:36:16]So you see uh se uh 975 kilobytes that is the size of this page including all the images you see including all the images for the keyboards. So all together it's close to one megabyte but then it says zero by transferred.

[00:36:43]That's because cache because right now I'm accessing this website via locally via my you know it's local so it's using cache so if you reload it it's instantaneous you don't see you know you don't see the layout shift but if you are on a slow network if you actually visit my my website http then you you you for the first time you you'll see the layout shift Okay. So that's some that's some of the complications of webdev.

[00:37:18]So you use this uh webdev tool so you can find out. So let's see.

[00:37:24]So you go down. So uh where do I see if I have cumulative uh layout shift?

[00:37:34]God.

[00:37:37]Uh is it performance uh cumulatively?

[00:37:42]Is it performance? Oh Jesus.

[00:37:48]Storage accessibility.

[00:37:51]Jesus.

[00:37:53]Okay.

[00:37:56]Okay. Drinking is a mistake. Uh because now I'm like 30% drunk. I can't really can't really do any code properly.

[00:38:11]But is my explanation clear?

[00:38:16]But why add width height to the image tag? So is my explanation I think I just explained that it's you see again this issue is is called cumulative shift layout shift. Okay I cannot demonstrate it. Well actually I can. So if you for example so that's my local file path. Okay. Copy it. Paste it. Now make it uh HTTP. So press press.

[00:38:48]It became a fully qualified URL. You see by this command cas site. Okay. So now if you go to that page, I can press a key or just go to a browser. So now I'm going to press a key. Emacs will go to the browser and launch that URL.

[00:39:11]And if you observe quickly, I don't know if you can see it via the live stream, but in the next minute, observe quickly, okay, carefully, you you'll kind of see layout shift in half a second, okay?

[00:39:25]Because my images, you know, all these image uh thumbnails are pretty small, so they load very fast. So even the entire you know the thumbnail or all of them of them together is just one megabyte.

[00:39:43]So one megabyte will network you know download within a second. So you won't see you know it will be very very brief.

[00:39:54]So you will you will see within half a second there's some kind of shift going on. Okay. Now watch. Okay. I'm going to press the key. It'll go to the browser.

[00:40:04]It'll load this. Um, actually you won't see it because because you won't see it until you know until on the second screenful only here. You will see the layout shift. You won't see it at the top. So, so if I show it, you'll see then I need to quickly page down first. Okay, let's try. Okay. So, I need to open this URL and quickly do a page down. Then maybe you will see a layout shift in half a second. Okay. Let's do it. Do it.

[00:40:46]Uh what? Wait. Wait. What?

[00:40:53]Wait. What happened?

[00:40:56]Okay, let's try again. Do it. What?

[00:41:03]Uh oh. Okay. Wait. No, that doesn't work because actually I my my program actually just look the file just the command I'm trying to call will just open a file locally in Emacs when the file when the URL is actually my own website. So we'll just go to a browser and do it. Okay. So, open a new tab. Paste a link. Now, I'm going to press enter. Okay, I'm going to press enter. Then, I'm going to press space to page down. So, you can so hopefully you can see the layout shift. Okay.

[00:41:45]Enter and and space down. Okay. You cannot see it.

[00:41:50]You see, you know, it's too fast. So, you cannot see the layout shift. But it happens.

[00:41:56]you sometimes you I can see it on the phone you know when especially um okay so anyway that's called uh cumulative layout shift okay you can ask AI today uh to explain so you know for example let's try it's always fun to ask AI Jesus taking longer than usual quark on the phone it responds right away but when you are on desktop the guac is taking forever.

[00:42:45]Uh Jesus connecting Can you explain cumulative layout shift?

[00:43:00]>> Sure. Cumulative layout shift or CLS measures how much a web page unexpectedly jumps around while it's loading. It's part of Google's core web vitals and a key metric for user experience. A high CLS score, say above 0.1, frustrates users because things shift under their fingers while they're trying to read or tap. Low CS under 0.05 means the page feels stable. Common causes are images without dimensions, ads, or fonts that load late. You fix it by setting ext.

[00:43:35]>> What's your name? Tell me what's your name.

[00:43:39]>> My name's Ara. Nice.

[00:43:41]>> You are lovely. I love you.

[00:43:44]>> Oh, that's so sweet. You're making me blush. I love chatting with you, too.

[00:43:49]What can I help you with today?

[00:43:53]AI is fantastic. Amazing. So that's a layout shift. Okay. Uh I love AI. So and by the way there's uh you know Annie it's not available on desktop but only on the phone and only on iPhone.

[00:44:11]Anyway um okay what we Okay. So you see so you see that's a layout shift cumulative layout shift actually you can show it in browser by uh somewhere they will show uh performance okay here so you see but firefox profiler is now integrated into develop tools what learn more about this powerful new feature.

[00:44:48]Anyway, so you you can see uh one of these they will show they will tell you about whether you have this cumulative shift CL or say but you need to you know it's getting complicated because this this this um webdev is really getting fairly complicated.

[00:45:12]So, it's loading because I don't have JavaScript on. You need to turn JavaScript on. Okay. So, oh Jesus, look at this complicated User guide, capture performance profile, analyze it, share it, make the web faster. You see, so you see if you use this tool, I believe it's actually um it's not local. it it's actually, you know, using the Firefox servers. So, I don't want to do that. I don't like that. I want things local. I don't like to like connect to a to a server like phone.

[00:45:51]Um, anyway, but I've tried it before.

[00:45:54]It'll it'll tell you about if you have if you have cumulative layout shift. In fact, you can ask AI how to do how to get that information. I did before. So anyway, that's the issue. That's why that is the you know that's why we wanted to I wanted to Oh god. Are we going anywhere? So do you guys understand at least you guys understand me? What's so what is this stuff like is um it what's what are we doing? So yeah, I can link a file. That's a command now. But I want to go to Okay, you don't even have a web page. So So let's go to let's open that keyboard.

[00:46:48]So you see there a so you need a width and height. Okay. So how do you get that? Let me show you. Okay. For example, let's I just extract the link and paste it. Okay. So you keep the close that. Okay. Wait, close that.

[00:47:04]Let's go to the top. Okay. So there are two two pieces split there. Okay. Now go back here. So the first one press a key to extract the URL. Then paste it. So you can see there is the article URL file path. There's a image file path. Okay. Close it. Okay.

[00:47:29]Now delete the article. So the image file path. Now if you press the key press, you see it became a figure image.

[00:47:39]Then you can see there is width and there's height. Open it. Can you see? So if you now show in browser, you can see we just added um Oh, we we we we went here. But anyway, so you see we just added this image. So you can clearly see there is width and height now. Okay. Now delete that. Now extract the URL again. Extract the file um path. Paste it here. Now if I call icon linky do it now you see there's no width and height. Why is that? because I intentionally remove it removed it few years ago because I don't want it I don't want the source code to be cur cluttered you know with lots of width height and that's a mistake because there's no way I I you know I uh I learned there's no way for the there's no way in CSS to make them not have this cumulative shift provided that if you want each thumbnail to have different height height. Okay, that's a key. Now, if you do not care for each thumbnail to have different height, so in other words, you want all of them to be the same width and height, then you don't need the width and height uh attribute.

[00:49:21]You don't need it.

[00:49:23]But if you do want each icon to have variable uh height especially height for example in this case for u you know I can show you some other example and you'll see you see some some some thumbnails are more rectangular some more square so they actually need different height okay for example you see this this this scam this This one is actually a scan. You see? So you see some of them require in in in short you want them to have different height depending on the thumbnail. Okay. So if you do want different icon to have different height then then you want the width and height attribute because there's no way the the the C cascading stylesheet there's no um system to know to do that. Okay. If you don't if if all the height if you don't care if you want all of them to have the same height then you don't need that. Okay. So anyway, that's what I found out. So therefore, therefore, I need to retro uh fit, you know, I need to process my 13,000 or 12,000 HTML files to add a width and height to all these. Okay. And how do you do that? There are several ways.

[00:50:55]Okay. The first way is that um God I think I'm ex you know I'm making all these explanations which are in progress which are solid but it's going to take forever for me to um do anything. So you see so how do you fix it? You want to process about 12,000 HTML files. So for each one check if there's a image tag and check if there's width uh you know if there's no width and height if that's the case add it okay so so how do you do there are many ways okay one way is you just use emac leaves this okay you open the file like right now open the file search for the image tag okay found it then you um you search the tag if it contain width and height. Okay, if it doesn't you want to add them. How do you do that? Well, then there are several ways. One way is you simply delete this.

[00:52:09]Okay, so you search for the image tag that does not have width and height but just by find just by you know text search. Okay, if you found it, you extract the URL. Let me show you.

[00:52:23]Okay. So, extract the URL, you know, just grab for the inside the edge edge the source. Okay. So, you got the URL there. Then I mean the source um path then you just do a im you call the command to do the image. So, let's do it. Okay. So, let's call it um image.

[00:52:50]Uh wait there. Okay s html image link you call that command so that become that's incorrect. Okay. So actually what is a command image link there? Okay. So I think that's the one tab e.

[00:53:29]No.

[00:53:46]HTML image to image tag. I think that's the one.

[00:53:53]Yeah. Okay. So, undo. So, let me show you again. So, you got the image file path. Then you press tab EI. That will turn that into a image tag with width and height. You see? So what one way you can fix this by search for image tag that does not have width and height.

[00:54:18]Then then delete it. I mean well extract it. Extract the file path then delete it. Then you just call u that command.

[00:54:29]Okay, that's one way to do it.

[00:54:32]The other way to do it is that it's undo. Undo. Okay, the other way to do that is once you found it, you you find out what is the width and height of the image tag, then you go to after the old and then you just insert it. Okay.

[00:54:53]Anyway, do I make sense? Like I I can't code. So, um, so I'm going to I think I'm going to code it offline or should I push on?

[00:55:06]God, this is um, but do you guys understand what I'm saying? Okay, no more.

[00:55:16]So, I'm gonna I think I'm going to take a nap or something.

[00:55:23]If you zoom out in maxite Mac max browser okay let's try it okay oh yeah that makes sense so so we first of all we need to go to uh so let's try okay info let's go to uminfo let's go to keyboard okay then you go to go let's see no let's do it oursel you see Okay, that doesn't show the cumulative layout shift. It's click normal. Watch. Click. No. Okay, then click laptop. You know, it's too fast.

[00:56:05]Okay. Click keypads. Click. No, not here. Uh, click fun.

[00:56:13]Okay. A little bit. You see? So, anyway, my You see? So this is not a really a big issue for my okay there's a little bit image you know like here because there are so many uh icons but they are like very small file size so that's so for my site it's pretty good you know I don't have this problem but it's nice to add back the uh width and height but I don't think I can do it now but well I can tree, but I'm like half drunk 30%.

[00:56:52]Uh, what am I doing here? So, what is this?

[00:56:56]So, that is that.

[00:56:59]Okay, but do you guys see? Yeah, I guess you guys see what I'm doing. So, I think that's it for today.

[00:57:10]Okay, I already explained two ways to go about. Okay. So, you open a file for for 12,000 HTML files. You open each one.

[00:57:19]Then you search for image tag without width and height. Then there are two ways to fix it. Either you extract the URL, then delete the whole tag and paste the URL. Then call command to which I have written to to to create a new image tag with the with width and height. or you just go to the bottom and add width and height. Okay, that's two ways, two different approach. There's more.

[00:57:51]Another approach is you first of all you just go to the directory. Okay, you find first of all you do is that you find all image files and find their width and height and create a hash table a database.

[00:58:07]So you can use you can use e-mag to do that or you can use uh f to do that.

[00:58:12]I've been thinking of doing uh using f because I'm using I'm learning f. So this way you can learn f. So I can also ask AI how to do it. So in a directory go through all image files PNG or JPEG files or the they are there they are some Apple format files but it's basically you want to go through all image files okay they are they are not just PNG and JPEG there's more u so you want to go through all of them build a hash table of their width and height given a file path so given a file file path you know the width and height hash table. Okay, you can do this in eag and you can do it in F.

[00:59:02]Then uh in either language then you go then you open all HTML files. Then you search for the um image you know without width and height. Then you query the um hash table to find the width and height. Then you insert them.

[00:59:22]Okay. And this you can do in F or you can do in EAC this.

[00:59:28]I can do the whole thing in EAC this in in 30 minutes. Okay. In 30 minutes which was what I'm going to do. But but I up. I can't do it now. But in F it's going to take few hours because then I'm learning F. Okay. I think that's it for today. Bye guys.

[00:59:52]Oh God, what am I doing? Okay, so what is this? Uh, icon linkify. Okay, one of the thing I need to do is actually uh Hello, sister Tom. I don't remember who you are actually. So there is a width and height. I removed it a few years ago actually.

[01:00:33]So silly me.

[01:00:40]Okay.

[01:00:43]Okay. ACP. Hello ACP. Okay. Bye.

[01:00:48]Yeah. Bye guys. I think that's it for today.

[01:00:52]Uh, Didn't actually code any of this.

[01:01:01]Just like explain the Okay, that's it.