“Live” vim editing session

This is a live Vim session where I'm going to use Vim to edit an HTML page and write a new page about translating advertisements from German into English. Whether it's easy, difficult, or next to impossible. I'm going to be doing all my Vim work here in the console window. I have a browser open here so that I can look at my file as it is being created. And down here in the lower left, I have a window that shows every key that I'm pressing. When I'm doing a lot of typing, I'm going to hide this window a little bit so we don't have to be bothered with it. But I'll bring it back here when I have commands in Vim that I want you to see what I typed. Okay, let's start Vim. And we have an empty file. And what I'm going to do is go to last line mode and read my template.html file. This is a file that has all the boilerplate, all the common stuff that I'm going to need when I write a web page. I want to delete this empty first line. So I go up to the first line and I press the lowercase D twice to delete that line. And then let's write the file. I didn't give it a file name. All right, let's try this. Let's write it to something called adverts.html. There we go. Now, for those of you who have not used HTML before, the idea behind HTML is that we have text that is content like this um set of words here or this set of words here. And surrounding the content, we have tags. This is an opening tag that says level one heading. And this is a closing tag that says that's the end of the heading. Here I'm starting a paragraph. I have the content of the paragraph. And then I have the closing paragraph tag. Closing tags always begin with a less than slash. And this whole combination of opening tag content and closing tag is called an element. So, that's the world's quickest introduction to HTML. And first thing I want to do is I want to go here where it says level one heading. So, let's do a search for level. And then I'm going to get rid of three words by typing 3DW. And there go my three words. Now I can type I to insert. And let's insert a title for this um page. And for lack of anything better at the moment, I'm going to call it lost in translation. That's an or awful awful cliche, but I'm going to go with it. Um let's go to line six. I can type six capital G and that will take me there. Another way that I could go there is in last line mode, I could say line number and press enter and that will also get me there. I'm a last line mode kind of guy, so that's the one I'm going to normally use. Okay, let's go here and let's delete four words. 4DW. And I'll repeat the title there. Lost in translation. And I press escape to get out of insert mode. And now let's write the file. Let's come here to the browser and see what we have so far. or let me refresh the screen. I have adverts.html and also this file called.adverts.html.swp. That is a file that Vim uses internally for temporary storage. And once we exit Vim, this file will go away. But in case you ever see some of this, excuse me, if you ever see this file on a listing, you'll know what it is. And let's look at adverts.html. And I've got my title, which is lost in translation, my level one heading, and my content. So things are going great. Um, let me hide this so you don't have to see absolutely everything that I am typing, and it won't be too much of a distraction. And let's go to where it says content goes here. Um, to get to the beginning of the line, I can press the up arrow. Let me do that again. I do I do want you to see want you to see this. Um I'm trying to think. There's there's the problem is with Vim there's a lot of ways to do things. I wonder what happened if I typed zero. Zero gets me all the way to the beginning of the line and I can use W to go one word at a time. So let me show you that again. zero gets me to the beginning. And then W and W and W and right arrow. And then let's get rid of three words here. And I'm going to start typing. Um, okay. What am I going to say here? Okay. Lots of things. And this I'm just typing here the sort of um stream of consciousness. I'll go back and edit it later. And you'll notice I'm in insert mode because I typed I and it says I'm inserting down here. So lots of things um need to be translated from one lang one language to another. And I'll say I'll say books, movies, songs, etc. Okay, perhaps the most difficult of all things to translate, believe it or not advertisements, because the cleverest advertisements or ads um use word play, which often does not translate at all. So that's my first paragraph. Oh, I notice I have om instead of yeah, instead of the word one here. So what I'm going to do is to fix that. Well, first thing I'm going to do is I'm going to exit insert mode. And then I'm going to say on line 14, let's substitute, excuse me, ome to one. There we go. That fixed that. And now I want to add another paragraph. Now it turns out that on the keyboard I'm using, which is a German keyboard, typing these things like less than signs and greater than signs is a real pain. So what I'm going to do is every time I need a new paragraph, I'm going to put three hyphens in a row. Let's insert and then put three hyphens. And eventually I will do a search and replace to replace it with a end paragraph and a new paragraph tag for me. So now I'm in my new paragraph and let's see what I'm going to say here. Okay. Yes. Um here are two advertisements. And by the way, I'm not going to read what I'm saying here because you all can read. So it'll make things a little bit easier if I um just type and you read it along with me. God, that's a horrible, horrible sentence. You know what? I'm going to worry about it later. I'll edit that out later. Again, I'm just typing this as I go along. Okay. Now, let's do a level two heading. So, we're going to go to H2. And the name of this um subhead for the moment, let's just call it advertisement number one. And here's my ending tag. Okay. And let's escape from input mode. And I want to show you this here. So you can see that I have the pictures in the pictures file. And this is the one that I'm going to be using. So I'm going to have to insert this image. And I'm also going to have to describe it. And the thing that's important about it is is this word here from let's put in a paragraph here and we say okay here is an advertisement. Yeah. Now I need to put in quote marks that are correct quote marks for Germany and Austria. And typing these is a real pain. Um to show you what I have to do here to make this work. I have to type alt f and then an x and then uh from And then to get the correct closing quote mark in German, I have to do the alt f and um v in the lower right. And I'm going to do my three dashes in a row here for a new paragraph. You know what? This is a good place to put the image. Actually, the best place to put the image would be right here. Let's make a new paragraph here. Oh, I see that I have the word had instead of add. So, let me press X to get rid of the Hello. I'm still in insert mode. This happens to me all the time. Escape. Now that I'm in move mode, command mode, I can press X twice. And now this ad has the German word in the lower right hand corner. Now, it turns out I luckily happen to have here a um template for the image, a template for putting images into a web page. I'm going to press yank y twice to yank that into a buffer. And then I will paste it after this line. I'm also going to insert a tab so that it lines up nicely. And now here I'm going to delete that word and insert the name of the picture which is pix slash uh let me take a look and check what that is. framto.jpg. Now, the alternate text is very important for HTML. If somebody's visually impaired or if the image doesn't exist, this gives text for screen readers and it also gives text for people to get an idea of okay, what's in this in this picture? Let's take another quick look at it so we can describe it. Okay. And delete word twice. And here I'm going to say um German text save up to 50% and from the lower right. There's some text up here, but I'm not going to put it in to my alt text here because I'm going to be talking about it in the main text. Okay, lovely. And then let's go into I'm insert mode. Great. And so I want another paragraph here. And let me write this to the file. Let's come back here. And let's take a look at what it looks like. Okay, not bad. It's doing it's doing pretty much what I want. So again, word doesn't exist. What is it? Let's insert. Press tab a couple of times. Okay, if you look at And now since this is American English, I have to use the American English correct quotes um for September. Move this aside so I can see the end. And Okay. So the German word Okay. I'm going to stop a moment here. These quote marks here, these are just an absolute pain to type. So, I'm going to shortcut this. What I'm going to do is I'm going to use a percent sign um for the left hand quote and I'm going to use a plus sign for the right hand quote. And I'm going to do a substitute later on. And the German word for Saturday And let's put a few dashes here. And for our next paragraph. Okay. and let's write. I like to periodically write to my file so I don't lose all this wonderful work. And if I come back here and I reload the file, you'll see that great, we've got this stuff here, but now it still looks pretty ugly because we don't have paragraphs and this percent sign and plus doesn't do what I want. Okay, so how am I going to fix that? Well, let's do some replacements. First thing I'm going to do is get my quote marks. I'm going to say in last line mode percent sign which means on excuse me I'd better be in my console window when I do this. There we go. I'm going to percent sign which means for all lines I want to substitute a percent sign with this under quote and I want to replace all occurrences of it and you'll notice I now have fried and zamstag and frmstag and then I'm going to go with a colon to get back to last line mode. I'll press the up arrow to bring back that command. And this time I want a plus sign to be replaced with that quote mark. And that looks pretty good. Let's write it. Come back here and reload. And now I have my quote marks the way I want them. Now comes the interesting part. What I want to do is I want to replace these three dashes with a closing paragraph tag, a new line, and an opening paragraph tag. So the question is, how do I put in three lines with the replacement? And this is an advanced part of Vim. I don't know where I learned it, but it's something that's interesting to know. It's useful to know. So, here's what I'm going to do. I'm going to again on all of my lines, I'm going to replace three dashes. Oop, excuse me. Slash. And now what I'm going to do is I'm going to put in an less than p greater than. I'm excuse me. I need to put the ending tag first. So, I'm going to put in the ending tag. And this is going to bring me into yet another problem. problem is if I put a slash here that ends my replacement and that's not what I want. So I want to say this slash is really not part of what I'm doing the replacement on. The way I do this is I protect it by saying let's do an backslash and then say this slash here that I'm going to type is no longer the slash that ends my substitution. treat it as though we're an actual slash and then the letter P and then a greater than sign. Now I need to do a new line. To put in a new line, I press CtrlV and then I say what character do I want to put in instead? That's a control character. Okay, let me go back and explain that again. Let me back up over this. Yeah, I need to put in a return. If I press return right now, that ends my command. I don't want that. Just as I had the backslash to say treat the slash as a normal character, I need some way to say treat the return key as though it were not a command type character. And the way I do that is with controlv. Now when I press u return or enter it says okay that's the control key that you want to enter instead of ending the command and now I can start a an opening paragraph and let's replace all occurrences on all lines. And you'll notice with all these slashes and backslashes, things are getting a little bit messy. But let's see if it works. And sure enough, it does. Now, I need to go back here and I need to um delete this one. I don't need it. Oh, I do need it. I'm sorry. If I need to undo that, I press colonu to undo my last change. Let's insert a new line and that'll indent it for me. Let's go here and insert a new line and the indentation will work fine. And we could do this for all of the rest of them. So, now that I see that it's not doing quite what I want, um, let's do this a little bit differently. Let's make it work a little bit better. So let me start colon you here. Undo. And let's undo that. And let's undo that. Perfect. Now we're back to where we were. So now let's find an easier way to do this so we don't have all those slashes and backslashes. Turns out when you do a substitute on all lines or on any lines, instead of putting a slash, you can use just about any other punctuation character. So I'm going to use an exclamation point as my delimiter instead of a slash. Now it'll be a lot easier to read. I'm going to say, okay, let's put in a closing paragraph tag. I'm sorry, I'm thinking here closing paragraph. And notice I did not need to say backslash before the slash because slash is no longer my delimiter. Then I'm going to say let's put in a controlV enter and another enter. Let's put in two enters in a row and then begin my next paragraph and I want global. Now that's the replacement string. I forgot to bring give my original. Duh. Okay. So let's say I want to replace d- dash. There we go. So now this is the command I want. This happens all the time, by the way, when you're using Vim. You sort of lose track of where you are and you have to explain things to yourself. So on all lines, I'm going to substitute dash dash dash with a closing paragraph, two new lines, and an opening paragraph. And do that for any occurrence, any number of occurrences of dash dash on any line. There we go. Still not intented quite the way I want, but I'm going to leave it the way it is. And let's write this. Come back here and reload. And now I have my paragraphs. And I also have my um quotes that I that I want. At this point, I want to put in the pronunciation of the words. And it turns out that back here, I happen to have some sound files, one for frmstag and one for fry zamstag. So, I'm going to put in an audio command here. And I'm going to go to line 27. So, I can use 27. Go to line 27. Well, that was interesting. Oh, am I in here? Let's try that again here. 27 capital G. Ah, there we go. I am there. And what I'm going to do is I'm going to insert on a new line a tag called audio. And the source for that is going to equal the name of a file that I want to read in and display. So audio source equals um from dog. Well, it's in the sounds folder. Hello. Is it like sound or sounds? Sound. Okay. / slashfromst.gg. And this is an opening and closing tag all wrapped up into one. Let's save the file with colon w. And let's go back here and reload it and see what it looks like. Oh, it didn't show up any that didn't show up the way I wanted to. Okay, since this is a real live session, I've screwed up using the audio command. So, what I'm going to look at is Mosilla Developer Network. And I'm going to look up audio. And here we go. Web audio API embed audio element. I think that's the one I want. And it has source, which is good. Oh, I forgot to put controls in there. Aha. Very good. So, I'm going to go in here, press I for insert, and type controls and get out of insert mode. I'm back in command mode. Write the file. Come back here and reload. And I can play that from. And I'm not sure if that got recorded, but I definitely could hear that. And then I also want for the German words for Friday and Saturday. And so that's another audio file here. And that's going to be another audio source is going to equal sound fry_zamto.g GG. And I want controls on that also. And that is a beginning and ending tag all wrapped up into one. Okay, my audio control is not where I want it. Okay, I'm going to worry about that later. I'm going to fix it in a moment. First of all, let's just see if I got this correct. Let's reload this. And now I have this. If I play this fry zag, let me turn up my volume here. I don't know if that will help any. And let's play it again. Zag. Okay. Again, I'm not sure if I'm monitoring the output, so it may show up in the video. It might not. Okay. Um actually um h okay yeah man I I screwed up this explanation completely didn't I? Okay so first thing I do not want let's go to line 28 and let's delete that line. Yeah. So the German word samto they wrote the ad they combine the words for Friday into one word from this is where I want it. I want it after the word from stock. Perfect. So since I had it in my um when I deleted it, it went into my buffer and I can type P to paste. Okay, that's not what I wanted. Let's undo that and let's do capital P to paste before that. Perfect. And then by the way, this colon W, I must have been in insert mode, so I got rid of that. How did I do that? Let me undo. So you can see that again. I pressed X twice to delete those two letters. Okay, let's write this. Come back here and reload. Well, this is interesting. What's going on here? It looks when I say here, the people who wrote this ad combined the words for Friday and Saturday into one word. So, the question is, how come I don't see that here? There's something wrong with my HTML here. It would look like now I have to do some checking here. I know that I have my beginning tag. Oh, let's go back here and let's take a quick look and see what this is. I need a closing audio tag. It's not a beginning and ending tag wrapped up into one. Well, what a surprise. I'm going to use X to get rid of those. And then I'm going to insert slash audio here. And then here, instead of having a beginning and ending tag wrapped up into one, I really do need a closing tag. So, I shall provide it. There we go. Now let's write. Come back here and reload. Ah, perfect. So now I should have fry and zamstto. Zamstag. And this should be frmstag. Perfect. Oh, by the way, pardon my incredibly thick American accent when I speak German. Okay, at this point I could go on with the second advertisement. Uh, but I think you're getting the point of what's going on here. Um, let me just wrap a few things up here. For example, this lost in translation is a terrible name. So, let me get um 3DW to get rid of those three words. And I'm going to instead say clever doesn't translate. Let me go back a word here and let me replace this D with a capital D. There we go. That's much better. And that should really be my H1. So, what I'm going to do is I'm going to yank this line into my copy buffer by typing y. I'm going to come down here to line 13 and I'm going to paste it. Uh, I wanted to paste before. So, let's undo colon u. And let's do a capital P for paste before. Excellent. Now let me delete this line. And in last line mode on line 12, I'm going to substitute title with H1. And I want all occurrences of title to be replaced with H1. There. That looks great. Again, let me write the file. I love to do that periodically so I don't lose my work. And what else did I need to do? Oh yes, this text here, which is just really awful. Okay. Now, I don't Okay, this is something that is as an editor, as a writer, and while you're editing, don't get rid of stuff and then start new and put something new in. That's not a good idea. Keep the old stuff around so you can refer to it and then get rid of it later. So, I'm going to press shifted O to open up a new line before that line. And now I'm in insert mode again. I'll press tab here and say um so we go. So here are two examples from advertisements um that I saw in that's really not a newspaper but it's close enough for government works. Um these are advertising flyers. So how am I going to say that? Now this has nothing to do with the VI. It has an absolute nothing to do with vim. This is purely okay, how do I how do I phrase this properly in English and that's one of the tougher parts of writing. Um, okay. So, every week I receive um flyers from the local grocery stores. Um that list two examples of clever word play and they point out the difficulties of translating cleverness from one language to another. I'm still not thrilled with that paragraph, but it certainly is better than it was before. Now, I'm going to come here and I'm going to delete three lines. And I can do it from last line mode or I can use it in command mode. I'll go to last line mode and I'll say lines 25 through 28. Delete. And they're gone. And let me open up a new line just so that I have some extra space there. Oh, I need to end this paragraph. don't I? Fine. There we go. That looks a lot nicer. Um, should I align all these closing paragraphs and ending beginning paragraphs? You know, I think I should. So, let me insert and tab to here. Let's go here and remove four spaces. And that lines that up. Let's insert that. And remove four spaces there. Insert that. This is just clean up at the moment. Um, HTML does not care about how I have spaced all my tags and all my text. HTML doesn't care, but I personally care that it looks sort of nice. And that's why I'm going through all of this stuff. 4X gets rid of those four characters. And then here, I'm going to tab and get rid of those. Oops, wrong mode. And then four more X. Insert this tab. And now I have this other image that is not being used. So I'm going to put in what's called an HTML comment. I'm going to use a less than exclamation point dash dash. And now I'm going to append to the end of this line by pressing capital A. And I put a dash dash greater than. And that means ignore lines 56 through 60. Don't put them on the screen. I'm still in insert mode. I don't want the colon there. Press escape to get back to command mode. And now colon W. Come back here and reload. Oh, this advertisement one definitely not what I wanted. So, let's go back up here. Instead of saying advertisement one, let's delete two words. 2DW And I'm going to insert percent sign from stock and plus sign. And now what I need to do is I need to redo that substitution. Okay, no problem. I can go to last line mode and then I can use the up arrow to bring back all my previous commands. And that's one of them. And in fact, I'm going to do that only on line 27. Oh, right. There is no percent sign 27. Hello, Earth to Eisenberg. Let's try that again here. On line 27, I want to substitute that for that. There we go. Perfect. And then I'm going to go to last line mode and use my up arrow to bring back a history of all the stuff I've done. And this one instead of on all lines I'm going to use only on line 27 and write that. And let's come back here. Reload. Perfect. Now I'm not going to go through the second example. Tell you what I'm going to do. Um, I may do the second example and just to write it up so that you have a complete page and I'll um upload it to the server so you can see the final result if you really want to. Um, the main idea here is that this is an actual live Vim session. This is what I would just normally do to edit files. And I haven't used a lot of the capabilities of Vim. I haven't used all this really sneaky stuff except perhaps um this business here to put in the enter elements ent to put in the enter um keys. That was a little bit sneaky. That's something you don't see every day. But the rest of it is pretty much plain vanilla Vim. And plain vanilla Vim can get you a long way. And that's the session. Let me know what you think of the my first attempt at doing a live coding session. Oh yeah, there's a big pause there. Um, it's not a coding session. First of all, it's an editing session. And I forgot to write and then quit. There we go. Now everything's saved and I'm back to my console. And now it's the end of the video.