Barely mentioned aptitude and synaptic, which is some stuff that I want to cover tonight.
Okay. Linux Mint has a thing called software manager.
And it's essentially like a lot of distros.
They have what's called a software store. This one.
Is specific to Linux, mint, but similar tools exist on other distros, and it's python, script and Ascii and blah blah blah and it's all magic I don't know how they make it work but in a like a typical software store.
It's got a editors, picks and categories and flat packed offerings, and Linux meant does not do snaps, and if anybody's interested they can go to the Linux meant homepage I'm gonna show well, first I'm gonna show they I mean jump back
I'm gonna show on my screen here popping up.
There is a software manager in their menu on that comes up should take a minute get that up
I had it working earlier. Come on machine
Come on!
There it is where to go. It was there for a second.
There it is. Okay. Here's a software manager and Linux mint software: store kind of thing.
Scott the top. Here they usually had. It presented one primary editors pick bunch of the editor picks, and then they have categories like accessories, fonts, games, etc.
Sound and video all applications flat packs that kind of stuff.
If you go looking through through the issue, you pick this, go, look at it all!
Well, let's just see. Pick the sound and video. For example, it's gonna list a bunch of sound and video it'll give some different categories and and lists everything all of them or in this case they break it down in categories like sound these these particular applications are covered focus on sound this other category
For focuses on video stuff stuff like recording and playing that kind of stuff in the Linux M.
Software manager it. It'll mark the stuff for the little check mark showing stuff that's already installed.
No, it's not installed. It doesn't have that little checkmark.
If you click on something they like say, take, for example, the top one area, open video.
He'll give a layout often. They give you the reference.
The home page for the organization that has it. They give some details, maybe a screenshot and so on.
Deep chaos. What kind of version is in the 8?
The repositories, then some there are some reviews, etc., etc., 5 star reviews.
So so so forth. If you do click on install it'll go through the install process.
Let me go back here and I'll pick one that I've got.
It's already installed. Little check Mark. Same kind of information.
Once it's installed. These buttons will appear, launch or remove.
Okay, that's just descriptions and reviews, so forth.
That's the software. Manager. Okay. It also has references to flat packs which are separate in the in Linux mint uses a debian packages that this is the flat packs that are different kind.
Of everything bundled in and supposedly. We'll we'll run across different distros
Enough about that. That's the flat pack software manager.
Aptitude Linux can also use aptitude.
It's a terminal base package thing. It uses and curses a lot of people here the whole primers are understand and curses, and but it's a package manager a little bit different I like using some of its features from the command line let me see if I can
Demonstrate it here real quickly. Where am I? Here?
Let me jump. Boom! Yeah, we go to
Let me see here.
Get a little bit bigger
Little bit bigger
Yeah, it's close enough. Aptitude
You just run it from there. It it's
Uses and curses. It's kind of, and then you it's got the menu thing up at the top and it's gotta you know.
If you do a control, T. It brings it up a menu system and you right arrow left arrow
Goes to different options. Okay, it goes through and
Very good. Let me for one. Let's see here actions I want to
I won't go into the great detail with that. But that's something that individual should should try out on your own.
What I like to do is from the command line port portion.
Do show stuff on
Different packages, and it'll go and and list the status and pull stuff from that database.
The same kind of stuff as you would see if you're in that menu.
I find it for myself. What I generally use to see whether I've got something installed, whether something has conflicts, whether there's a other things that are suggested for the insulation and sometimes it I find others things it that in the remarks that are worthwhile exploring
Great and that's but I wanted to show about aptitude.
Alright. Let me go back!
Dip.
Where? Where did I put that
That's the wrong one
Who am I looking for
That I lose, I lose my presentation
No, yes, I did.
Let me close this.
Boom.
Back to my slides.
Okay, that was aptitude. There's another package call.
So nowaptic. It's also listed in the menu system at least maintenance, and it is the aptitude and synaptic are available in the Umbu.
2 repositories to the best of my knowledge, because they are debian packages.
It's a graphical, more graphical package that uses the Jdk.
And other things of app, and it it's more responsive with with the mouse and so forth, and it has a lot of features to it.
And it one nice thing about it is it will fix help you fix broken package, dependencies if you run across that.
That's the only tool I've seen that that actually helps you do that
And there's save Home Page for that. I'm going to bring it up and demonstrate that it's a little more sophisticated than the software well.
Yeah, I should say sophisticated little more old school.
Let me bring this up
Like. Remember what machine I'm on
Now this is the synaptic, and it's got some categories over here right now.
It's listing all the packages that are in available in the repositories.
It's got a little block right here to indicate whether it's installed.
Or we got some menu options here down to bottom is is you? Can.
It's you can select to display stuff by sections.
It'll if I do that it shows stuff you're broken out in amateur radio communications, cross platform stuff databases, debugging documentation editors, etc., etc.
Kind of useful with you, looking for a particular category. Things
Libraries and math packages, multimedia, pearl science stuff, shells.
This admin stuff, etc. Those are the section categories going back to the status thing.
It knows how it changed everything. This list all which includes everything that's that's available, plus everything that's installed.
You just want to look at the installed shelf.
It shows little green box here, and little colored circle indicates that it's supported by on boot, too.
Okay, if you click on a particular okay, item. Then click on, add user down below.
It shows the description. Okay, yeah, which is kind of extensive.
Sometimes, and it'll show different categories, sometimes relative settings and so forth.
It'll show dependencies. Installed files and even versions.
Okay. And this is
Difference difference across the different applications. Some show more extensive than others.
Okay, what I like about it well, it does another thing to show some local and obsolete stuff.
This is stuff is not in the the standard, repository, and some of them are installed.
They still run. But they're not available in repositories.
For example, I've got Vera crypt on there one out and pull that in.
That thing called multi system. It's it's it's so.
It's kind of difficult, because all the documentation that comes with it is in French, and I know.
Remember any my high school French a little bit of at a loss.
There, but and I don't use it in in your more.
I've I've gone on to using ventili.
Instead, I find ventili to be better than multi-system.
This, there's the Gc: electron app: that's loaded.
Couple of other things. Fs lint is deprecated.
I believe it, but it's very good for finding duplicated files, and it still runs on the Linux Mint version 20 long terms system.
Anyway, what I really like about this is if you go on searching through stuff sometimes you find references, and it's got weird names that the description side here I've I've run across a number of things just by wandering around looking for things and I've I've looked and
Oh, 2 lines down and it'll have something else. Okay.
Another fine thing over here in the right hand corner you can do a search, and it searches for things.
Say you're looking for fonts. Boom, it'll list.
A lot of things that are that are relative to fonts.
These and they aren't all specifically just false.
Some of these things are tools for dealing with fonts.
Okay, if you go down here font viewer, you know there's little package when I first got into Linux years ago.
At one time I had over 30,000. No, let's see.
I I keep saying 30,000. I had at least 3,000 different fonts, and each of them were made up of different libraries.
So each of them had 4 or 5 packages to it.
This not only lists the foster available
But it also lists a lot of tools that are related to fonts.
So if I was in the building and controlling fonts these tools, will be very handy, and it even there are tools for creating your own phones.
So that's just an example. False, they say. Just look for something else.
Let's say oh, browser
You know, go through the everything, in a list of references that are that are dealing with browsers, and you know there's few things here.
They're browser. I've got the brave browser installed now, and it deal.
It uses a thing called the key ring, and it deals with the Ca certificates that are related to browsers and the kasha wallpaper that Kaja is the file manager that's this specific to Linux Mint Mattee version I think the
Linux meant cinnamon version uses.
I think, Nemo, I think whatever. But this is listed all the other kind of browsers, and it's it's chromium chromium examples kind of thing web browsers then there's a thing you know cockpit i've heard that name before what does that
Do it's a web console it's kinda like that webin thing.
I think that the Lee's kind of prone to using and kind of cups, browsers, debian goodies. Gee!
What does that do? Yes, it's supported by Umbu 2, but it's not installed.
It's a small 2 box utility. This is a good description of some of the things in there.
It's a good way to discover other kind of applications down here at the bottom.
Is this particular listing shows 1,130 packages.
And far, far foxes, there's a bunch of these are the language packages that I do not have installed.
I've got the English one installed which comes in handy for me
Okay, and some other 2 type version stuff. I don't.
You know lot of the stuff I I really don't know what it is, and if I wanna go down that rabbit hole, I'll learn more about what it?
Is and new case docs. I've got the new cash installed.
I didn't, don't know how that relates to the browser concept the phrase Browser is some some are in this narrative.
Description of the word browser usually shows up. Sometimes it'll find stuff that doesn't display in this description area.
Which is fine, it just cross-references stuff.
But there's a lot of ways. You can go through and find this stuff.
And besides the sections and the status, there's the origin thing right here.
Kind, of you that sort stuff by the archives. Then you can create a custom filter.
I don't necessarily create one. They have created ones.
If you can do this one, it'll show you any broken packages.
This one down here shows stuff that needs to be upgraded up the upstream, or whatever or it's upgradable.
I can do to install it's and stuff that is.
This is missing recommend things in in the you're familiar with the recommends in debian package, and then some other custom filters that they've created and there, you got search research result.
Architectures. You can search for a specific architectures, Amd.
64, I 30, eight-six, etc.
Anyway. That's what I wanted to show about the synaptic server.
Okay, beyond that. Other resource searches, you know you can rely on the search box in your browser, brave and Firefox, and they generally go back to one of the other search engines and as a matter of last resort.
If you can't find something with a search engine, I always call Phil and ask him, and he can find stuff because he's got better.
Search your abilities with the search engine, or what they call it.
Kung Fu, or whatever. There is a special search site that is using
As an Internet resource is called alternative to.net.
If you are familiar with a program, and you say I want something that does something similar to that.
For example, I used to run some. I hate to say and I used to run some stuff on windows da da da, but you go here.
Yeah you go in there, you pull that up that website. Come on right there you plug in what you're looking for.
We'll want to find an alternative to
Yeah, the access office database. There's 79 intern alternatives listed on here.
Microsoft Access of Colonel, that's that's a commercial proprietary package.
You have to pay money for
And
I want to look at the Linux alternatives boom
Is there 24 of them? There's Labor office base.
Oh, I'm very familiar with that. I've been using that for the last 15 years, because it's free.
I love it and it. There are portions of it. When you're building some stuff it pretty much looks like Microsoft access to the extent that in order for me to learn how to use labor office base
I went to the library and got a graphical book that described how to use Microsoft access and Page for Page.
Virtually everything in that book matched up with Lever office base except for there were like 5 terms that that were different.
So that's a
A big plus on base yeah. Okay, then there's a couple.
It lists some other databases that are Linux beaver, open source, aggress, or whatever.
Some of these I've never heard of Apache open office space.
Well. Okay.
Open office was forks became Lieber office and Lieber office is done.
A lot more changes to it, anyway, that
Is what I wanted to show about. Yeah, I don't wanna do that.
I wanna do? How do I want to get back on? I lost my place again.
Folks sorry. How did I lose that
Oh, I know it's
Is this it
Yeah, that's it okay.
Part of it, where
There we are okay, that's page: 9
Okay. As for resources, there's go to St. Louis, unix users.
Group. We've got an archive page. It's so it's a our recordings on our presentations.
We've got a calendar that points to other groups.
We've got our mailing list. Then got announced mailing list, and to discuss where you can ask questions.
We've got a wiki. We do have an Irc.
That's kind of dormant cause. I never use it.
Nobody else uses that I know of. Yeah, other groups.
You've got your sponsored by St. Louis, unix user group are the St.
Louis Linux group The slack group which is St.
Louis Area Computer Club. That's the longest, oldest Peter club that's that's still around here in St. Louis.
And then there's a new Linux Users group that I run on the fourth Tuesday of the month, and I'm done with Eric, except answering any questions anybody might have of what I've shown so far
Is anybody still out there
Am I talking to the wall
I can hear you
Any questions about what I presented
Okay. In that case, hearing none, I'm finished folks. I'm done.
This presentation will be up on our archives tomorrow
Good job. Stan
And I'm in under the wire
Certainly on.
Okay, I'm gonna stop sharing my screen. If I can figure out where the buttons are
On the screen
Yeah. Yeah. Yeah. Yeah. Yeah. Yeah.
Okay.
Where's the
There's a comment and chat. It's not so much about your presentation, Bob Hansen saying that no one can hear him when he talks.
And
Have any ideas? Yes.
Say something, Bob, let's see if you're if anything lights up on your icon
I got nothing
I hear nothing.
And I I don't see the light. Come on on the
Hey, Bob? Hansen doesn't have a microphone connected
There's no microphone symbol on the list
Oh, okay.
That would explain it.
I was looking at
Now he is possible he may, if he's on a laptop.
Sometimes those labels or wind up coming on muted, and if you don't, there's like 3 or 4 different buttons to push you, there's the the yeah, function key buttons for for your sound sometimes that's screwed up then depending on what vistro
You've got. You can control the sound there with pulse, audio, or 2 or 3 other things I don't know.
Okay. We got more information. There's no way to to know what what's going on there.
You'd have to throw provide us with. Can you share your screen?
You can run something like in X. Yeah, we give us an idea what kind of hardware he's got?
Maybe not a hardware issue, you know.
Lead to your to your point, the the microphone only appears.
If it's muted
Give me. You're not muted. You mean
Okay.
For instance, right now you look at me, and if you look at Stan it doesn't show a microphone on our Rightcon.
But if I mute
The yeah, lovely
No on mute. Yeah, the the icons there it's got a it's red with a slash if it's muted, if it's not, it's great
Hmm.
Bobby, if you can. If you can hear, is go to your audio settings and try a different mic.
Try selecting a different microphone
Okay.
Also, when he comes up he has zoom, will ask him if he wants to share his microphone.
Yeah. True.
And the my experience, my experience is zoom will will take your settings and then save them forever.
Until you change them. You could change in that healthy
Until you change it. But it doesn't. It doesn't easily show you how to change the darn things
Go into audio and then select a different microphone
Going into a audio with with where
You go to God as you go to carrot goes zoom settings audio top top, section speaker, second second microphone.
Whatever microphones are in a system will show in the list.
Sometimes you have to pick a different one
As well as when the microphone's working. You'll see the input.
Level in the bar, and you can also set your volume below that all, as I told, as I've mentioned before.
If you want to change the base level free microphone, you turn off the automatic set the bill to where you want, and then turn automatic.
Back, on.
We may be we need to move along good bed air here, folks move along, move along.
Yeah.
If we can't help Bob immediately. If he can't provide us with more information, we can't help him
Okay. Alright. Well, moving on announcements.
By the way, this is the usual structure of our meeting, for anyone who hasn't been here for a while is we do what we call the Arial Cookie version so we put our announcements and general Q.
A here in the middle of the meeting, have the the basic tutorial presentation that so.
It's saying, just finish, that's on the front.
And then we have our main topic on the back. So announcements.
Let's see. Next week. Next Thursday is the St.
Louis log meeting Linux User group meeting, and our topic is Lee
Butterfs in the real world
Better off also in real world this is, gonna be a talk about
What what's what's water Fs
I'm ignorant what's butter Fs.
It's a file system
Oh, okay. You know something like ext 2, 3, 4, or Z.
Nope, Nope, Nope.
Well, so that's a file system, same kind of thing.
In general.
It's a
It's a file system, but better Fs. Has capabilities are, for far beyond any of those primitive models
Oh, so they call it better fse, sometimes right
True.
My name is Stan. I'm a shell
We hear you, Stan.
So that will be next Thursday as similar to this, so you can find it listed on the home page for the log or on our announced email or on the discuss list.
Oh, on our calendar! Certainly other announcements, any changes in our usual schedule, anything else coming up that anyone wants to mention
Okay. Oh.
On the fifteenth Sue Hirsch is gonna be doing a a database presentation, for at Semi.
Semi-lug, I think up in up in South Iowa.
It's on our our calendar. On the fifteenth
Sue. Hers has been a long time member. She's very knowledgeable about databases, and then I think at one time that was her primary job.
But she knows quite a bit about them it'll be worthwhile going to that presentation and it's a remote presentation, so you can.
I do believe they use gypsy instead of you.
The zoom, but the we have all the the pertinent information up on our calendar
Next
Okay. Let's see anybody else have any interesting things on the we should know about
I'm seeing Bob Hansen's displaying a a microphone now all over. It's showing as muted
Hey? Good point, Bob, if you unmute you might have a microphone
Oh, it's live now. Say something, Bob.
We're supposed to be live
Oh, where do you go? Oh, he's up there. Yeah.
Now it's muted
It's muted now
Mike
N. Needs to adjust the volume. I guess
Yeah, should I try try the volume in the audio setting here
Currently still showing muted.
Currently unmuted
But I don't hear anything
Well, I just unmuted
Obviously
Yeah, Bob. We can see a talk, and but apparently the microphone.
You're selected isn't isn't working for some reason
Is that headset, plugged in. That's a good question.
Phil would always ask, that, where's the wire?
Go!
Make make sure the you select the one on your headset there, if you had a might give you one on a headset
Moving right along.
Hello!
Okay. Cool. He struggles with that other questions. These can be questions.
Just general questions about anything has a whole lot better chance of getting answered?
If has something to do with computers, but doesn't that be about our topics this evening?
But just or something about Unix Linux. That's that intriguing.
You wouldn't want somebody else to comment on
Okay. I do not see our main speaker here tonight yet.
But I do see some names I have not seen before. There's somebody named Internet
And Dave lines I've seen his name before. There's a I one, I think I think I may have seen that name before, and Aaron Mahoney those people that are new to this group is this your first first time.
We'd like to hear from you. It to know what it's your first time here.
If how you discovered our group and any questions that you might have about the groups that we have, we generally have 4 meetings a month. H.
Month. This is the St. Louis Unix users group.
It's the general meeting that is, on the second Wednesday of the month the St.
Louis Area Computer Club is free format. What is just?
Its goal is to try to help people with hardware problems and configuration problems and it's not necessarily restricted to Linux.
It can be with that other prime, the other primary vendors they, Microsoft People, and the apple people.
The we have had success in helping them with their problems and configuration and hardware.
That's the first Thursday of every month.
This is general meeting is the second Wednesday of every month.
Then on this they either third or fourth Thursday. It's usually what 9 days after this meeting is the St.
Louis Linux Users group and it bounces out like that because the way the calendars happens to fall.
And then the following week. On the fourth Tuesday of every month, is the Linux New New Linux Users group.
For it's also is free format
The St. Louis Linux Users group is generally a presentation.
The new Linux Users group is free format.
Yes. Yeah.
I've got a lot of presentations, but generally it's the questions that are from the from the gallery of people that they that have joined, and the newest person the newest Linux user in the room gets to ask all a questions
Let's move along. Move along, Gary. Have you called our our primary speaker to see where he is?
Hi. Norm Norman Miller is in the room. There is yeah.
Oh, Scott's on! He's he's signed on is James Cartons. He
Oh, darn it, I'm sorry
I was logged in as Jans, for earlier today.
It's a long story
Hello!
Gary, are we ready to to go? You want to introduce our speaker
Hello! Gary!
It would help if I took myself off mute. There we go.
Here we go.
Okay. Our our main speaker this evening is Scott Granman.
Scott's former vice president of our group.
He's a principal at web sanity, consulting.
And the as I say, a frequent speaker for us.
He's also a frequent adjunct professor at a number of universities around St. Louis.
You teaching anything that's Semester Scott.
Introduction to interactive digital media Info to Javascript and back in web development
Wow, yeah, that's it. Which university
St. Charles Community College and Webster.
Right
And Scott's going to talk to us tonight about visual studio code.
That is correct.
Yeah. So we're looking forward to this. I'm gonna turn it over to Scott.
Okay.
Let me get my clicker. Sorry I forgot to get my security blanket
I I will reference that back in 2019. Scott did a presentation for us on visual studio, and everybody looks oh.
No, I don't. Visual studio is an entirely different animal, which I'll which I'll explain
Right right
So alright, let me make sure you guys don't.
Okay. So let me my my computers is a complete mess.
So I apologize for that. I'm gonna show you.
Share my screeny. There we go, so right here
Good. So I'm gonna show you guys my personal website at graniman.com, which I'm redoing, and if you go to presentations you'll notice there's all presentations and if you click on all presentations you get this long table of contents, and these are
24 presentations that Jansen or I use for web development teaching and talks and all sorts of stuff.
Web, design a presentation on Max, and there's the one I did about brave for you guys.
It's now on here, but number 3 is installing, configuring, and using using visual studio code.
Now I would not download that tonight, because I have added so much new stuff in here that once I'm done with you all I'm going to export a new Pdf.
And notes and upload it and and indicate that the version numbers changed, and so on.
So if you want to download it, that's great.
But if you're doing it to follow along with me now, there's gonna be lots of differences and changes.
So I'm just keeping that in mind afterward. It'll be here on my site, and I'll send the links on to you guys to to Stan and Gary so they can put it on the website but this is where it will permanently.
Live right here.
Alright. I'm gonna make this nice and big, so you guys can see it.
Alright. Everybody can see my screen right
Yup! Hi! Kate!
Yeah, yes, yes, we see it.
Oh, that's fine!
Yeah looks good.
Yes. Okay. Okay. Just making. Sure. Okay. Okay. So I'm gonna talk about visual studio code.
Alright.
Now I'm gonna skip the first 70 slides, because when I teach this class to my college students a lot of them have never coded in their lives and a lot of it well, here's my opinion you know we're all many of us are middle aged our little older and I
Would I would say most of the people I'm talking to are computer nerds like myself, and we know a lot of stuff, and it really kinda hacks me off when people are like oh, that younger generation they just don't understand technology no, they don't they barely know how to use
Their computers, I'm the one that has to sit there because I am.
I meet with every student to go over their code and go over their assignments.
So I end up sitting there watching them fumble and do the most, you know.
Time-filled thing, they can do. They don't know.
Key commands. They're going to the menu and clicking edit copy they don't know what cut means, so they'll copy, and paste and go back and highlight. Delete.
I'm just well. Whatever hair I have left I'm tearing out so these kids don't know Jack I mean.
Yes.
Sure they can use Snapchat. But who cares so?
I have to put up 70 slides of information for them that I'm not gonna show you guys about what are the Meta keys on Mac OS?
What should you do about the trackpad on your Mac?
This is a good one. You guys will love. What's during between a slash and a backslash.
How do you unzip files on windows because windows makes it really complicated and difficult.
How do you search for files on your computer because they all use this thing on Mac and on windows.
That just shows you the most recent files. They have no idea.
What if how do use the file system let's turn on file extensions.
So we know the difference between the files by the extensions, and lastly, I always had them create a folder in documents called web, dev projects.
That we put all our projects in. So again I'm not gonna go over that with you.
Guys because you already know almost all of that when you download the slides you're gonna want to skip like I said the first time slides in initial infrastructure info, because unless you just want to check out what young people don't know so that brings me to why
Vs. Code, so I've been teaching web development since the late nineties, and throughout that time we've used a whole variety of different tools and the thing I've always been looking for with my students was number one I wanted free because students.
Pay enough I never made them buy a book everything they need.
I create, or it's on the web, so I never had them buy stuff, and I was like I don't want them to buy an editor, you know the kind of feels dirty to me to have to do that and then the other thing I wanted was powerful I wanted the tool to be a good
Editor for code, and maybe other things too. That'd be great.
And then, lastly, you know in my life I've written books on Linux.
I manage linux. Servers. I use windows to play games.
I ran windows is my main desktop for 2 years.
Let's not talk about that I use. Mac OS is my daily desktop, so i' all 3 platforms very, very well, and I think about my students in that regard I'm not one of these drives me crazy when these professors.
Assume everybody has windows, you know, or assume everybody has a Mac right, and assume nobody uses Linux so in, I barely I'm rarely have students that use Linux but I always include that because I may have that one that semester and I want them to feel
Included and I don't want to leave them out in the call.
So I've always been looking for an editor that worked on Mac windows.
Linux, and if it was web-based 2, that's a big bonus.
That's a really big bonus. So that's why I chose visual studio code, because all 3 legs of that stool are met with visual studio code.
It does everything I want and that's fantastic. So that's why I've chosen it.
Well, it's not just me, because every year Stack overflow has polls for the people on those platforms, and they one of the questions they ask is is, What Ide Do you use and visual studio code has only been out 7 8 years if that but it's already over 50% because that's
How good it is, you know I I've used a variety of tools.
I still use some tools for different things, but once I really sat down and started using visual studio code I was like, Oh, my gosh!
This does so many things the right way, and that's awesome.
It's free. It's powerful. It's cross-platform.
It runs on Mac windows, Linux, because it's no electron app which it is.
Probably I would work, and other people have said this too. It is probably the best electron app out there as an example of the best of an electron App that is Vs Code and we've talked about electron apps before just to refresh people's memory electron basically is the chromium
Javascript, and and HTML and Css.
Engine pulled out so you can build apps on top of that.
So it's basically like having apps built on top of chromium that act like apps.
And the beautiful thing about that is, if you don't decide to write a chromium app, then it's automatically cross platform because chromium, those engines work on all the major platforms.
So that's why more and more people are releasing programs as chromium based apps.
Well one of the common criticisms available to chromium.
They excuse me at electron apps is that they can be slow because you're waiting for all this stuff to open up and javascripts.
What's managing on much of it. What Microsoft is managed to do and and contributors.
It is an open source project. I'm going to talk about that in a second, but what they've managed to do is really tune it to the point where it's as I said is most people would agree with me that have looked into this the best.
Performing electron app out there. So visual studio code, as I said, is a powerful source code editor and a powerful ide.
It's got debugging built, in. It's got embedded.
Get, so get is built into this tool. It's got syntax highlighting for 80 if not more languages.
It has extremely intelligent code, completion that I'm going to show you.
It supports snippets, so you can type a small item and an expands into something much bigger and programmatically.
You can refactor your code easily. It has highly customizable theme, keyboard, shortcuts, and preferences, and finally, besides it being open source, it's updated every month.
I mean every month they release a slew of updates.
This is not one of these apps where they you know kind of trickle out things, and they's hardly anything new for month to month the the famous.
You know bug fixes, and improvements crap that you see so often with modern apps?
No! These guys are releasing extensive release notes every month, detailing all the new features, and there are a lot every month.
So this is very much already excellent, and it's getting better every single month.
So that's another reason. I'm really excited about this, because I don't feel like it's sitting on its laurels.
It's getting better and better and better. So how do we install it?
I'm gonna very quickly through this because again, you guys can figure that out on your own.
I'm not worried about that, so I do talk about how to install it on windows.
Mac and Linux Vs. Code is available at code visual studio.
Com. Okay. So if you want to go there right now feel free to do that.
We move this over here so I can see what's coming up lovely.
So if you go to code dot visual studio com you can download it.
There. Now this is the confusing part that I want to clarify with people because you, Gary just made the mistake.
That's very common. Microsoft also makes a developer's ide called visual studio, and you can code in a lot of languages.
But it's really focused on.net and C.
It's been around since 1997. Okay, it is completely different from visual studio code, visual studio is not to the best of my knowledge and electron app visual studio code is visual studio costs.
Much visual studio code is free. Visual studio code is much more lean and mean and focused than visual studio, which is, you know, a huge multi gigabyte download and running app so I know it's confusing.
But we're talking about visual studio code, not visual studio.
So if you're if you go to the homepage, you should see something like this.
Your green button will be different, depending on the operating system that you're using
You click on it you download it I'll walk through Mac.
Installation. Super quick! You're an end up with a file called Vs Code Zip, double click on the zip file.
You'll have a file name, visual studio code dot, drag that into the applications folder you are done.
Yes, that is how easy it is to install stuff on a Mac, and then toss the zip file in the trash windows.
You're gonna download an Exc. Vs: code setup dot Xe double click on it.
Do, the next you know the yes, I want to allow the next next next next next next finish, and eventually it will complete its installation.
At that point you can toss the Exe in the trash in the recycle bin.
By the way, one of the reasons I'm telling this telling this to my students is, if you look at their downloads folder, you would be shocked.
How many copies of download sought downloadable, software installs.
They will have in their downloads folder they'll have like adobe install or adobe installer one adobe and installer, one adobe, installer 2 adobe, installer 3 adobe up to like 7 or 8 I don't
Know they've realized they've downloaded it and installed it.
So they keep downloading it over and over again. So that's why I'm telling them.
Throw these away. Linux people. You're gonna download a file.
That's a Deb, and you can use Debbie and a boon to su do apt install to install it.
That will automatically install the apt repository and signing key.
So you can. Now auto update using your package manager.
They have snaps available for a boot to red hat.
Fedora sentos have those available open Suza arch nicks.
So they've they've got it many, many, many, you know, pretty much all the major installation methods on Linux Company.
Now this is something that is freaking, awesome and cool, so I know many of you have used Github use Git and Github store your projects.
App so turns out there's this one neat trick not to lose weight, or not to reduce your mortgage.
But there's this one neat trick that will make using Github a whole new experience for you. Guys.
So basically what you do is you go to a Github Repo in your browser.
You press a period on your keyboard and boom. A couple of seconds later you so you go here and I now hit this is gonna be a video showing you what happens.
So I am at this righto that I haven't worked on a long time because it was a little bitty thing. So I'm at this repo at Github and I'm gonna hit period and watch what happens this is really cool and while That's happening i'm gonna go
Boom. I hit period and watch what happens when I get water
So you guys, see that visual studio code opens in the browser so I can edit my repo from within my browser.
Now this is a simplified version. It doesn't run all your extensions, you know.
It'll run some, but not all you'll notice.
There's a bug here where I can't look at images in there.
It says: a service workers not loading. But and there's my extensions right those are not any of the ones I haven't.
Some of those are yeah, those are ones. I have installed.
So it is connected my account and there notice there was gift integration.
If I make a change in here, it puts it instantly into the get account.
So into the repo. So this is really cool. If you need to make a quick edit, it doesn't matter where you are.
You log into Github. You go to the repo.
All you do is hit a period, and you saw it not much longer.
Very quickly. Vs code opens in the browser.
So you can do quick updates to these files right here in the browser at the repo you were just in.
That is really really cool. But there's some more so I showed you one way to invoke visual studio code by going to Github, but there are others so, and these are all browser based and I always have one student that doesn't have a normal laptop like every semester not every
semester. But once you're year all of the kid that decided to base his entire college career on a chromebook.
And I'm like that's not gonna work for everything, especially if you want to be a professional developer.
You can do some stuff on it, but if you're trying a lot of classes they're going to want you to run, software and that's not going to work well for visual studio code that kid can if they want and i've had kids that want to use ipads as their
Main computer. And I'm like I love my ipad.
But that's gonna be really frustrating for you with other tools with visual studio code they can do it.
So what am I talking about? Well, back in late 21 they rule rolled out Vs code dev.
So if you open your browser and you go to Vs code. Dev.
When you look when you get in that guess what visual studio code loads in your browser.
That's what it looks like. Okay, and it's not, you know.
If you do it a github, it knows. You obviously want to open that repo.
If you're doing it at Vs Code dot Vs code. Dev.
It doesn't know that. So you'll notice here.
This is the visual studio code interface. If I click on extensions and I'm gonna explain how I'm getting to that in just a minute. Notice.
None of my extensions are here. Okay. I have a logged in as me.
This is like generic login right now, and however, if I go to that little action menu in the bottom left and click on it, notice it says, Turn on setting Sync.
Well on my desktop version of Bs code.
I have settings sync enabled, and so when I turn on settings sync here and I log in okay, boom.
A few moments later. There are my extensions that I have on the desktop now loaded at Bs code, dev.
Just like they loaded at Github when I had logged in.
There, now again! This is only a fraction of bi extensions, because extensions that do you know lots of node-based things they don't allow to work in here, maybe yet and extensions that do more complex things don't work in here, so it's not every extension but
It's several of them, and you know it's enough to do work.
And now, in fact, now that I have logged in through that setting sync, if I go to the settings for the app on the right there, those are my settings.
Those are the settings that I configured in my laptop version of Vs.
Code that have now synced, so I can use them at Vs code dev.
And this is completely free. Okay, this is completely free. Now, one of the things I didn't get to show you.
I was madly taking screenshots before was, if you click on open folder.
In fact, I'm just gonna show you guys the screenshots and I'll drag them into my presentation later tonight, so that'll be in there.
But for now I just want to show you these. So go up there, let me see.
Find it. Here you go. If you click on open folder in the browser, it's gonna say, hey, we don't support opening local folders.
On your machine. Okay. You can either open single files or open remote repositories. Okay.
So if I click open files a normal dialog box will open up and say, What file do you want to load from your computer into Vs code dot dev.
That kind of defeats, the purpose right, I mean, unless I don't have you know I'm on some.
I'm on I don't want to run the program on my computer.
I want to use the web browser for something quick.
But the open remote is where it gets really interesting, because if you click on open remote, let me see if I can find it
It will say, Hold on 1 s. Let me see if I can find it is that it
Yes, you will see that what you see in this screenshot right here.
It's gonna say, okay, do you? Wanna connect to a tunnel?
Or do you want to open a remote repository?
Now, if you click open, remote repository, and again I apologize for these being all Caddy Wampas.
If you do that, it shows you this. Do you want to open a repo from Github?
Do you want to open a pull request from Github?
Or do you want to open a repo from azure repos?
Now I don't know if they're planning on adding other sources or not.
I don't know. Hopefully they will. So in the case if you click open repository from Github, then then, after you sign in to Github A Github authorization pops up then it shows you, all of your reaches at Github when you click on one and choose it there you
go. It is now loaded inside the browser, and I'm ready to go.
So in the same way I went to Github and can load it from there.
I can go to Vs code dev. And load Repos that way as well.
But what if I had chosen the tunnel?
Well, it turns out that if you do that we find it
Yes, sir.
Hey, Scott! On some of these the the type font is getting pretty small
Alright. I can make it bigger. Give me one sec.
Please let me find it one moment, and I will find it for you.
Yes, if you give give me 1 s me. I took a screenshot like I said I need to.
Didn't get a chance to put him in order. Give me one moment
Okay. If you choose connect to tunnel, then you can go to this web page right?
Where's the tunnel page? I just headed up.
I want to read that to you, and I'll make sure it's nice and big for you guys this one okay.
So I assume that's big enough. So if you do, the tunnel, it turns out that you can install and run visual studio codes server, and it's available.
For Mac Windows and Linux. You could install it on a remote development machine like a desktop, PC.
Or a virtual machine, and as you notice here it allows you to securely connect to that remote machine from anywhere through a Vs code.
Dev URL without the requirement of SMS. So if you wanted to be like, if you're traveling, and you want to be able to connect back to your computer at home or on a virtual machine somewhere, you could open Vs code dev in your browser say I want to use the topology and assuming you
Had all this correctly installed, you could then connect to your remote machine at home and be editing code in your browser, using visual studio code remotely.
That also is very, very cool. So I wanted to show you guys that too, and I apologize for not having it in there.
As I said, it will be in there later. But there's another thing you can do in a browser that they make available called code spaces, and this is a service.
1 one question.
Yes.
Can you show where you pulled that up?
You you when you clicked on that to get into tunneling.
That was a really small font, and it was difficult to read what file you were clicking on
Well, this way and it'll be in the slides later.
And you'll be able to see everything much bigger. Okay.
So again. That's vs code dot dev. If you go to Vs code dev.
And click on open folder. You'll see what I'm talking about, and it'll prompt you to do all that and you'll get it.
The other thing that get this is a service, Github.
Offers, it's called code spaces. Okay? And this is an actual deb environment in the cloud.
So this is not just the ide running in the cloud. This is an actual dev environment running in the cloud that's integrated with all the other stuff that Github has to all.
Okay. And so these are some of the features code spaces has to offer.
So for instance, you can spin up code spaces basically from any device with Internet access, because even even even even an ipad.
You could code on an ipad with, you know a mouse, and a keyboard that probably make it easier, but because your ipad is acting basically like a dumb Terminal back to github servers and you're running vs code locally but again, all the all the back end back at github is doing all
The work also it fires up in immediately, so you don't have to wait around your development.
Environment instantly comes up. I want you. I noticed we've had talkers in the last several months about Jupiter.
Nope, well, look in the bottom left there! Run Jupiter notebooks right from code spaces, data, scientists and developers can code develop models and collaborate in these environments.
You can fix bugs, our security issues right from here.
It you also get your personalized instance. So you set up the config files the way you want them set up, so that when you fire open code spaces, everything is exactly the way you like it
And I thought this was pretty cool, and you guys would appreciate this.
You can preview your changes in the browser with instant reloads, and I'm gonna show you how you can do that, using it on the desktop, and you can share both private and public ports with your teammates so they can check out the work you're doing as well and
collaborate on it, and of course security is baked in it's hardened by default, lives inside its own ephemeral vm in an isolated virtual network that's good and here's the exciting part code spaces is available for free for individual use for up
To 60 h a month, comes with simple pay as you go pricing afterwards.
So you get all that for free for 60 h a month and you pay for things after that as well as storage.
So here's the pricing. If you go with 2 cores for the back end, that you get 60 h free, you pay 18 cents for every additional hour.
After that, if you go with you know the really beefy machine with 8 cores.
That's 15 h free, and then see 72 cents for every out.
Now I know some of you are going. Oh, my God, that's ridiculous!
Yeah, but this would be for people that need this. Those people are gonna have the money to spend on this tool.
Okay, not to mention this isn't what something corporations will be paying for as well.
So you know frankly for me to cores would be more than enough for my needs.
60 h free a month would probably cover me just fine and dandy.
The storage. You get 15 gigs free a month, 7 cents per gigabyte.
If you go over that, and they have a nice little calculator there that you can click on and use.
So I said: Okay, 2 cores, 4 giga RAM, 18 cents an hour.
I'm a single developer. Let's say I code 20 h a week.
Let's say I have 5 separate code spaces and an average project size a one gig I'd be looking at $15 and 95 cents a month.
That's nothing, you know. If you're a working coder and making money, that's nothing to be able to work from anywhere inside a web browser.
You know I thought it would be a long time before we got to that process, and we're here now.
Lots of companies are doing this. Lots of developers are doing this.
It's working. So it is now, we are here now?
Okay. So I then I might do. That's how to install.
And that's every place you can run it now let's open it.
So when we open visual studio code we're gonna have extent.
I now, after having my students install visual studio code.
It is now time for them to install extensions.
Now one of the nice things about Vs code is, it comes with a lot of features built in and like I said, they're adding new features all the time.
However, it doesn't do everything, and so they have made it really easy for developers to write extensions for Vs code using HTML.
Css. And Javascript okay, and people have written thousands of extensions at this point to do almost anything.
Okay. So you can easily individuals. Studio code on the far left.
You're gonna see these buttons in that bar right?
There, the fifth one down that looks like a 3 squares with another square escaping away from it is how you get to the extensions view, so you can install and work with your extensions so if you click on that button over there or use the view menu and extensions or
use a key, command you then get an extensions view, and you can search for extensions and install them, and they're now installed.
Here's the deal I used to have my students installed these one at a time, and it took for ever to do.
Wanted a time, and I would you know, type it on the screen.
And then students would miss type it, or they get confused, and they have to run over and help these 2 get the extension installed, and then I go back on the board.
And I go. Okay. So everybody got that installed okay, let's do the next one.
And it does a nightmare. It was an absolute nightmare, and then Vs.
Code came out with support for what they call extension packs and basically an extension pack.
You have them installed the extension pack and it installs the extensions that are part of the extension.
Pack the clouds parted. I was so happy and so I have created 4 extension packs for my students.
They're all called Granite pack granite Packet granite packed Css.
Grain of peck, HTML, and grand a pack markdown.
I have my students install granite pack, Css.
And granite. Peck HTML at this point that way it's being installed in the background while we continue learning about visual studio code.
If you do get related stuff to get a granite pack, get has some nice extra features beyond the ones that Microsoft includes in visual studio code.
And if you're a Markdown writer, and I hope many of you are at this point.
Then grant a pack, mart down has some really useful extensions, just a couple that make writing Markdown in visual studio code and even better, and side note.
Let me mention. It is an excellent Markdown editor.
Okay. Alrighty.
It's built in has built in support for Markdown out of the box, so I often use it to do all my Markdown writing in because of the features it has in the beautiful support it has for that I use other tools as well, but visual studio code is excellent when it comes to so we've
Well.
Got it installed. We've got my extensions installed.
How do we use visual studio code? Well, let's take a tour of the user interface and learn what it is we've got here now I've gone ahead and opened a project in visual studio code.
I'm going to be explaining what that means. If you have just now downloaded visual studio code and opened it, you're not gonna see everything I'm doing because you haven't opened any code yet or any projects.
So you'll get there. But go ahead and look at what I've got up here.
So I went ahead and opened up a project, and if you look over on the left there, it says Herbert west landscape right.
That's Herbert West landscaping. Okay. And that's a project, a.
Website that I have my students build to get together with me in my web development classes, and so I have that project at an early stage open individual studio code.
And I'm now gonna walk. You through it and show how to do it.
Now I want to say one thing about this. I might have stuff later. Great.
I'm gonna go ahead and say something. Now about this
Visual studio code really doesn't want you opening up single pages.
You can but like if you're in the middle of editing a project which is a collection of files, you don't want to open up a random file from somewhere else into that because the a that could be very confusing to you and it could be very confusing to visual studio, code visual
Studio code wants you to work in projects, and a project is the same as a folder.
Okay. So I have opened up the harbor west landscaping project, which is an actuality.
The Herbert West, landscaping folder. Okay, and so what you're seeing on the left there under Herbert West, landscaping.
Those are the files and folders in the Herbert West landscaping, fold so that's what visual studio code really wants you to.
Do you need to open folders which are equivalent to projects?
What you don't want to do is every semester I have a kid.
Do this they'll go well, you know the web dev projects folder has all the different projects we've been working on I'll just open that.
And when you do that yes, you now see, all 10 projects.
We've been working on in there. The problem is Vs.
Code is hopelessly confused when it comes to addressing files like if you're trying to put in links to other files, you've got an idea.
You've told it that the root of your project is web dev.
Main projects, not the actual project itself, and weird stuff's gonna happen.
So open individual projects, in visual studio code try to avoid opening single files, and certainly don't open, containing folders that have all your projects in them that way lies mattness.
So
Got it it's just when you're beginning this section.
I'm sorry. What is it?
There was a question in chat about packages. Hey? There's a question in chat about packets saying is a package like a python.
Requirements, file
Is a package like every Pentathon request file.
You mean the extension pack is that what you're talking about?
Not the pat. I don't know what I said. Extension pack so an extension pack is more like if you've ever done Node, and you need to put the requirements file in your node project.
That's what it is it's just a list of extensions, and when they load the extension pack they it goes through the list and says, Oh, I need to go grab that one and that one of that one that one that one installed does that answer the question.
Okay, so to start with this is the editor. This area on the screen is called the editor.
That's where you do your time. Okay. So obviously, you're gonna spend the vast majority of your time in the editor where you're coding your stuff?
There is a breadcrumb trail above the editor, and that shows where you are in the code.
It's really not concerned about what file you're in I mean.
That's on there but it's not concerned about where the file is located in the structure of the project.
It's more focused on. Where is the where are you in your code?
So you'll notice on line 34 there, that's where my carriage is next to the killp.
Right. Well, if you look up at the breadcrumb, it says, Hey, your cursor is next to a P.
Which is correct. The piece starts in 32 and ends on 34.
That is inside a block. Quote that's correct if you look on line 31, that blockch quotes inside the main element.
That is correct main is inside body body is inside. HTML, and this is inside the file named index HTML.
So as I click around in the file that bread crum trail will change.
But the really cool thing I can do is I can click on those other things and it'll jump to those.
So if I clicked on main it would now go to that.
So as you see here, there's the Killp pointing at the P.
It does this in Css. As well. So my cursor is online 12.
It is inside the nav selector. If you look at the breadcrumb trail, it says, Okay, your cursor is currently in the nas selector which is inside main Css.
Which is inside the Css. Folder again, knowing where the file and folder is, isn't nearly as important as knowing where the cursor is in the file.
And it will do the same thing for Javascript and other languages as well.
Over on the right you have what's called the mini-map.
This is a 30,000 foot view of your code, so you can see.
You know the structure of your code, you can also click in that to jump to that area in the code.
If you want some people like to turn this off. Some people like keep it on totally up to you as to what you want to do over on the far left is what's called the activity bar and there is a row of buttons, going down that and those buttons change what you see in the sidebar so you'll notice the
Very top button has been pressed in the activity bar, and you'll notice that the sidebar now, says explorer, across the top, because I'm now in the explorer view, which is by the way the view you will be in 90 plus percent of the time because that's the view that shows
You, your project your files, your folders, and so okay.
But, as I said, if you click other buttons in the activity bar like search then you're now in the search view, and this is what you would use to find and replace in the entire project.
So if you want to change something in every file potentially in your project, this is where you would do it.
Note that is different than hitting command or control f in a file are option, command app control H.
To find and replace. That's only in this page.
So the search view searches. The entire project. Command F, are its equivalence for find and replace only are searching on the page likewise.
Earlier. I showed you that if you click on the extensions button in the activity bar you now get the extensions via.
And so here you go, and that would allow you, at the very top you can see.
Search extensions so you could search, to find new extensions.
These are all the ones I have installed at this point from here I can re more information about them I can disable them for certain projects.
I can also completely remove them if I wanted or update them
Now let's talk about that project so, and I I know it's cut off there. Cause, I said.
It's Herbert hyphen West type and landscaping.
That is the name of the project. Okay? Well, remember, a project is a folder.
Okay, that's the same thing. So there is a folder on my computer named Herbert Hyphen West hyphen landscaping.
And I have opened that folder that project in Vs code.
And that's now what I'm currently working on.
Now one thing I want to say about this is, I do not type my folder names in all caps.
I use all small, letters which is correct web convention, so the name of that folder is actually all lowercase.
Herbert Hyphen West type in landscaping.
First stylistic reasons: Vs. Code all caps. It.
Okay. Fine. So just be aware of that. If you look at that under are as part of that that shows all the files and folders in the current project.
Okay. So there they are. I can prove that to you, because if I open my file manager and go to the Herbert hyphen West type and landscaping folder, and you can see the name at the top there right these are the exact same files, and folders, okay, so it's
The same thing, in other words, there's my project in Vs code.
There's the same files in a folder in my file. Manager.
It's the same exact thing. What's that mean?
That means if I delete a file in Vs code, it's deleted in the file.
Manager. If I rename it in the file manager, it's renamed.
In Vs code. If I create a new file in one, it'll show up in the other.
Okay. So there you go. That's the connection between those, and I know some of your guys.
Are going. I know this. You'd be shocked. How many people are like, Whoa!
Am I do. I have 2 copies. I'm like no, it's the same files. Man.
Okay. Above the project name. It shows the currently open editors, which are the same thing as files in essence.
So you'll notice that it says I have index HTML.
The settings screen and main Css open. Okay, well notice those are the same files that are in my project.
Okay. So main Css. In open editors is the same exact file that's part of the Herbert West landscaping Project.
It's just I have that one open right now in the HTML is the exact same file that's in Herbert West landscaping. It's just that.
I have an open, now. Okay. So they're the same files.
They're just ones that are currently open. Well, again, notice, I have index HTML.
Settings and main Css open. Well, guess what if you instead prefer to work with tabs?
You can use tabs, and there's the exact same files and and settings open at the top.
If I close a tab, it closes it, and open editors.
If I double click on a file in the project and it opens in open editors, there will now be a tab, for it's all connected
Now let's talk about some of these icons on the far right.
The first one there is live preview. That is an extension.
So you either have to install the live preview extension, or much easier, for you would be to install granite, pack HTML, because that is included among many other I think important and essential extensions, for HTML development and Css.
Development next to that is split editor. So yes, that allows you to split the window, and you can have as many as you want, and so you could have multiple views of the same file.
Or you could have 2 files open, each in their own pane for comparison, purposes, or whatever you'd want.
So by having the same file open, you could have the top of one file of a file open on the left, and the bottom of that same file open on the right.
Whatever you want to do, very easy to work with these editors and of course there's all key key commands as well.
Next to that is, the more actions. Button. When you click that you can do some other further stuff, let's move down to the border under editors.
That's where the status bar is that goes all the way across the bottom it's the blue bar there, and that has not only information you want to pay attention to but it also lets you access certain features that are pretty important which I'm going to discuss in just a moment, so for those you know you
Can see in the bottom. There I have it set so that a tab is equivalent to 2 spaces, not tabs.
I'm obviously using utf 8 from my file encoding.
I'm using a line feature for my line endings and things like that.
Now, this is really nice. I want to go between these 2 screens.
Notice here what we've got? And then in this new screen we have panels, panels slide up from the bottom of the editor, so you'll notice my editor now is only showing this much where before it was showing this much because the panel area slit up from the bottom normally it's
Hidden. Okay. And there are 4 panels that you can use and go to terminal problems output and debug.
Okay. So let's talk about what these are. So problems.
Well visual studio code is constantly linting your code and looking for errors, and you know show stoppers and things.
You probably should fix, and so on, and you can access that list in the problems panel.
So you could open that panel with a key command. But I find it's far, far easier to click, and so this is where I was telling you you can access certain features in the status bar so if you look, in the bottom left there right you can see that i've got a a one and then 15 and then another
one so that first one. That's a show. Stopper.
You've got to fix that you're gonna you're gonna have massive problems.
The 15 are errors, things you should fix, but it's on a show stopper, and then one is information.
Things you should know. Okay. So if you click that that opens the problems panel.
So that's what I always do. Obviously, if I see Zeros down there.
Yay, me, I don't need to open the problems panel, so I don't click on it.
But the second I see there's a problem. I click on it and open it up and take care of the problem.
However, you can also click on any of the numbers that you see in visual studio code, and those correspond.
So you'll notice that it's saying index HTML.
Has over 9 problems. You'll notice. It shows that in open editors and in the project files you'll notice it.
Says Main Css. Has 2 problems. You will see that on in open editors and in the project list, and then down at the bottom, right you bottom left you have it.
Also there's a 17 next to problems, and it tells me Main Css.
As to an index. HTML has 15. So at this point I can start taking care of that.
But here's something that's really cool. You'll notice that I'm currently in index.
HTML. That's the file that selected, and the tab that selected.
You'll notice. I have a problem in line 26 of Main Css.
That's the very first problem detected. If I double clicked on that, it would take me to line 26 of main Css.
So I can instantly jump to the file, and the line where the reported problem is, makes it much easier to find and work
Well, the phone panel is an integrated terminal, and when you open it it opens to the folder the project that you're currently working in because of course that makes sense why open it root or my home folder it should have open directly to the project i'm in so I can start
running commands in this project to do what I need to do, and I end up using this all the time.
I mean I have a terminal open all the time, anyway.
But if I'm already in visual studio code, why not just open the terminal?
If I need to run commands against these files. So here you go, makes it much much easier.
And, by the way, you can also open that with a key command.
If you want. There's also output which is output for certain things and a debug console for javascript.
So if you're Javascript, those are available to you as well, or or other languages as well, not just conf script.
Okay, let's talk about settings. So now we're gonna edit Vs code settings on a Mac.
You would go to code preferences, settings, or just do what I do, and every single app on the Mac, if you press command coma, it opens up settings, slash preferences every single app on the entire Mac on windows or linux you need to go to file preferences
Settings. And when you do this is gonna open up these settings.
Now I always tell my students. Let's close the sidebar.
So we have the entire window devoted to settings.
How do you do that? Well, you'll notice the explorer view is open now, if you click on the explorer button in the activity bargain it collapses, it toggles open and closed, so I would have them click on the explorer button in the in the activity bar to
Collapse, explore. And here we are. Now I always explain this.
I think this is something many of you would understand completely when visual studio code first came out.
The only settings were a Json text file. That was the only way to edit the settings.
And then after a long time they added: This Gui, you see here this Gui is just an interface for the settings Dot Json: text: Okay, that's all.
It is well I prefer to use the text file 99% of the time, and I explain to my students why?
Because the settings dot Json file has all my settings, and it's a text file.
I can use get to put it in a repo with my settings, and manage it that way.
If I have a new machine I can copy the settings dot Json, for one machine and put it on the other, and I've instantly got my settings installed, and I can provide my students with settings that they can simply copy and paste.
In and we are done, and I've got probably 50 60 settings that I have.
My students. Do can you imagine the hell that would be trying to do that with a Gui trying to get, you know, 15 people of varying skill levels to change 50 to 60 settings in a Gui be awful so again the fact that I can point my students on the web and say copy this paste
This we're done makes my life and my students lives a lot easier.
So to. Oh, and one more thing by the way, as you try to use this, Gui, you will frequently run up against things where it says sorry you can edit that, in the Gui you have to do it in the Settings dot Json file so I'm like well, I might as well, use it.
Anyway, so if you click that little button there which is a page with an arrow on it, I don't know why that will open up the settings.
Dot Json file, now by default that opens in a single view, not split like this one.
Of the settings I have. My students do in the settings file.
You see, on the right is when you open up settings, Json, open it in a split view with the defaults on the left and yours on the right, so if I if there's a setting I wanna make I can search the settings on the left that has every possible.
Setting in a read own file, and then copy it, paste it on to the right, and make my change there and save it.
Okay. So once you do that and you come back to the settings.
Json file. You'll now see it in this split view, which, in my opinion, is far, far easier to work with.
So, as I said, Vs code stores, its settings in a file called Settings Dot Json Json stands for Javascript object notation.
It is an open standard file format, and it's designed to store data in key value pairs and arrays.
Now normally, I go through about 5 or 6 slides, where I explain.
Json files to my students. Would anybody like me to do that?
Or can I keep going? It's up to you guys. I I can go either way
Okay. I'm not hearing anything
This this is Stan. I'd like you to go through that, please
Okay. No. Problem. Okay. So
So that's a sample very simplified. Json file.
Okay, let's walk through it. Number one: you'll notice all Json files.
Begin an end with the curly brakes. That is one of the number.
One reasons that people have errors in Json files.
They leave off the curly braces at the end they forget to put them there are they override it, and forget to put it back, and so on, so whenever I have my students update the settings dot Json file and somebody goes it's not working or that's the first thing i've said would you score to the
bottom please. You you forgot to copy the curly brace at the end.
That's one of the main things. Now you'll notice that the Json file is made up of key value pairs.
Okay, the keys always have quotes around them. The value may or may not, depending on what type it is.
So, if it's a boolean like true or false then you don't need to put quotes around it.
If it's a number like 16, you don't need to put quotes around it.
However, if it's a string, then you need to have quotes around it.
So you'll notice the last 2 entries here, editor, word rep is a key.
So it has quotes around it. Colon word rap, column is a string, so it has quotes around it as well.
Same thing with Seti Monica in an array as you can see here, I've got my key, and then the square brackets indicate the array, and those because those are strings in my array I have quotes around them if those were numbers are Booleans I
Wouldn't now
The guy, that I can't remember his name right now.
I think it's Douglas Crockford, but that could be wrong.
The guy that invented Json does not want to put comments in, and he has.
He has decent reasons, but he refuses to put comments in Json, so it's not in the stand, and people have asked and ask and ask and ask and ask, and ask for that and his he says no, and if you want, to know why you can go read about it on the Web well.
Microsoft is like. Well, we think that's a dumb idea.
So we're gonna support comments. So in Json files for settings and Kate settings Dot Json and other Json files for settings used to out Vs code you can use comments.
They are preface with 2 slashes like that. So thank you, Microsoft.
I like having comments in my settings, Json File and elsewhere, so I make liberal use of that.
I'm glad you can do that. However, if you took the same case on file and put it in other editors that are using the more strict parsers for Json.
They're gonna throw up errors and say Whoa!
Not allowed. So I'm just warning you about that. Now.
Notice and this is the other thing that screws people up every line of a every key value.
Pair of a Json file has to end with a comma, except the last one and that's what screws up my students.
A lot is they'll be cutting and pasting things, and they'll move something like they'll go.
Oh, I want to move that last line here, for whatever reason, and they'll copy and paste it, forgetting that it did not have a comma.
So they don't have a comma after that line and then.
Now the last line editor, word rep has a comment. At the end, so I always want them.
You have to really remember if you're moving lines around in your Json configur file that you need to pay very close attention to where you're commas are and where they are not and notice in an array you do the same thing you have commas after every value in an array except the
Last one. Okay. So what I have my students do, and obviously you do not have to do this but I'm just telling you what they are.
And you might want to look at my settings file to get an idea about it.
But I have my students replace the default settings, which usually consist of one or 2 lines with some I've created.
These are ones I use and I want my students to use, and so I have them go to that address.
That's a short URL man, a URL that I own, and maintain.
That's something I have for myself. Chainsaws, and so I have my students go to chainsaws, slash one C.
7 that is it, Github. That is a github gist file.
Let me show you what I'm talking about. So if I click on it, you end up at Github Gist, and by the way, notice Github's going, hey?
Red error. This is not allowed in Json. That's what I was talking about earlier.
Well, what you want to do is you want to click raw so you don't have anything else on the page at that point.
Controller, command a to select all at that point. Controller command C.
To copy, and then I have them go back to visual studio code and in the user settings file they hit Controller Command A.
To select all, and then they paste over it with the settings they just copied from Github Gist.
Then save it, and then close the window, and they've now adopted my settings for Vs code into theirs.
So now we're all looking at the same thing, and I've done stuff to make things easier on them and easier on me.
And things that go with some of the extensions they've downloaded, and things like that.
So again. I'm not saying you need to copy and paste it.
But you might want to look at it. Get some ideas. Okay.
So we are now done setting up Vs code. Now it's time to learn about some of the features of this thing.
Why is it so great to use, and so let's start with the command.
Palette now increasingly a lot of other apps are adopting this idea to my knowledge.
Sublime text, which is an excellent text editor, for I know Mac, Windows, I think it may run on Linux.
I could be wrong was the first one to offer this command.
Palette feature. And so the idea of the command Palette, is you press a key combination, and the command palette opens and you can type commands.
You want to run in there. So you know one of the problems with complex modern software tools is, you have so many commands available to you to run in the menus and elsewhere that it's easy to forget where the so the idea behind the command palette is I know what I want to run I
don't want to have to screw around with trying to find it so.
You would invoke the command, palette and type, the name of the command in and hit enter, and it would then run that command.
Whatever it is so in Vs code you would press, command, Shift P.
On a Mac or controll shift P. On windows or Linux that will open the command panel so, for instance, in this case I did that I've hit command Shift piece the command palette opens you can see that at the top and every possible command I can run having to do with
These editor is now available to me along with. You'll notice on the right the key commands if they're available, which is nice and that's how I learned the key commands.
Now, how do you find the one you want? Well, you start typing, and as you start typing it filters the list down to the ones that match.
What you're typing, and yes, it does support Fuzzy matching.
So you'll see that as well. So. And then once you can.
Then arrow down to the one you want or keep typing until just that one's filtered, or you take your hand on the mouse and click on it like a barbarian, and at that point the command will run what's cool is the next time you invoke the command palette the most recent
Commands you ran, or at the top the one you last ran is the very first one, and it's pre-selected for you, so you can just sit in.
So, if you're running a command over and over and over again invoke the command, palette, filter! Hit!
Enter, run, it, go to the next place, invoke the command palette, and just hit in, because that command you can just rain is already pretty selected and ready to go for you, so that's really a nice feature get used to using the command palette it really makes things more efficient okay, the
next big feature, and this is fantastic intelligence. Intelligence is actually a several features.
I'm only gonna focus on 2 with you and my students and that is code completion and quick info.
So code completion means that as you type intelligence is going to list suggestions for completing your code in a little small pop up.
There. Okay. And it's smart if you're in Css.
It'll recommend Css. Completions if you're an HTML, or recommend HTML.
If you're in Javascript, it'll do Javascript.
If you were in c plus. By the way, I think I mentioned visual studio code sports, a huge variety of languages.
So you know it. It knows what languages you're in, and the code completions are appropriate for those languages.
If you keep typing, the list will filter down at that point, you can press, tab or enter to insert the selected one, and there you go so here's an example.
So I here have beened the letter P. And it's telling me right.
I've sorry I typed Angle bracket.
P. So on line 16 there I typed angle, bracket, P, and you'll see that it's got peace selected along with other HTML elements that have p in them to start with P.
And also you'll notice that info on the right.
I'll talk about that in just a set. Well, if I go ahead, there's my cursor.
And now, if I type a right angle bracket to complete that tag, it goes ahead and puts Killp in there for me.
So. It not only shows me to help me confuse the tag I want, but then after I complete it it auto completes the closing time that's really handy.
Okay. And it. But the problem is I don't like my seat.
My HTML format at like that. I like to do it where I have to hit.
Enter every single time, because I want it on 3 lines. I want P.
Kill P. With the content nested in inside of it.
That's always the way I code. That's the way many, many other people code right?
So that means every single time I have to type an angle bracket, then A.
P. Then an angle, bracket, then it puts in Killp for me.
It, puts the cursor between the 2, which is nice, but I then have to hit.
Enter and look one of the things I tell my students is, and again, these are kids that don't know a lot about computers, mostly.
I always tell them. Look when it comes to computers. Lazy is good.
Okay. Lazy. Is good automate as much as you can learn to be efficient computers are good at the stupid, repetitive boring stuff.
If you let the computer do as much of that as possible that frees you.
The human with a brain to do the fun. Creative interesting stuff.
And so for me, you know, having to type all that and hit enter to get to that man.
I want to automate that so you'll see you'll find out how to do that in just a minute.
By the way, if for some reason you don't see the code completion pop up control space will pop it up for you now.
I also said, another features called Quick info. That is short documentation.
Explaining the purpose of the HTML. The Css.
The Job Script Method of a variable and much much much more so.
Let me give an example of that. So again, back on that previous screen I had typed angle bracket, and that showed me P.
Param picture. Well, you'll notice P. Is chosen on the right.
It says the P. Element represents a p paragraph, so it's telling me what it is.
But it also has a link to Md. And reference and it's clickable and if you click that link, it opens in your web browser to Mdn Web Docs the documentation about the P.
Element and again, this is true, for Css. Javascript.
Other languages. Okay. You will go to wherever the primary documentation for that language is now to those you don't know.
Mdn. Web Docs used to be called Mozilla Developer network.
Then it's been shortened to Mdn because it's not just Mozilla.
This is. I always tell my students, and this is correct. This is the place to go to learn about HTML.
Css. And Javascript, not W. 3 schools, not random pages on the Internet.
This is where you go, and in fact, why is that? Because Mdn is backed by Mozilla, Google, Microsoft and and Samsung.
So they are all paying people to edit this documentation and maintain it, and they all point to it. So again.
This is got the best documentation for web technologies this is where you should usually go first and then branch out from there.
So back to this. I'm typing Nav, and there's my quick info the nab element represents a section of a page like the links to other pages, or to parts within the page a section with navigation.
Links, and there's the Mdn reference. Link.
Here's another example in Css. I've started typing font hyphen.
S and font size is currently chosen and over on the right.
Not only does it explain it, but it gives me the sense as well.
If I want to do that and provides a link to Mdn.
Likewise, if I start typing Dis display comes up I've chosen that one.
It gives me a little definition of that on the right, along with the syntax, along with the link.
And remember, I said, it does Fuzzy, matching, and you can see that right there.
Dis also happens to match text decoration, skip, and so you could actually use that if you wanted to get to stuff like that to get the elements and and code, like that.
Now by default. You don't see quick! Info you have to enable it super easy.
You type, a angle bracket, P. And then you hover your mouse cursor over the far right of P.
And you're gonna see that curly bricks.
If you click that it will open up the quick info, and that will now appear from then on for that language likewise, if you wanna toggle it off, you hover over you click that and it will disappear by default for that language now again, if you don't see it show up control space.
Okay. Man. I love Emmett. I have been coding web pages for 27 years, and I so wish I had had Emmett available to me and as usable a format as it is in Vs code I played around with them and over the years but the problem was it was kind of
A pain to use, so I never used it. But since it is tightly integrated into visual studio code, I use it all the freaking time I show it to my students.
They love it for good reason, so it's fantastic.
So what is Emmett? Hey? It is a set of plugins for text editors because you can install emit in virtually any text editor out there. An Id.
Then make it very fast to code and edit HTML. Css.
Xml. And other structured code formats, it's been around 14 years, but like I said, Vs code has it built in you don't have to add it on so what can you do with eminent oh, boy?
So if you're in your Vs code editor, and you type and you're in an HTML file and you type P.
Star 3 and hit, enter. It's going to output 3 parameters boom!
Boom! Boom with the cursor in between the first one.
If you hit Tab it will jump between the second one if you would tab again it will jump to the phone.
So right there. I once had an assignment for students back at their very first assignment.
They had to do 25 paragraphs on a page I was kind of being like I was kinda being having them do something really tedious, so then we got to more automated stuff later they would worship me like a God but we didn't have em it back then now I don't even bother
With that. I'm like guys type P. Star 25 hit enter.
You're done now. Put the content in. It's that easy.
So the star means make this number of the element that I touch.
Okay. So here's an example. I type P. Star: 3: notice quick info shows me what Emma is going to create for me.
So I can make sure that's what I want, and then I hit enter right there.
That's what I typed I hit enter. It shows me code completion and quick info boom.
Now here's another one I type ul greater than Li times 3.
What's that doing? Well? Allies in HTML go inside uls and OS Li means list.
Item allies must go inside an ol ordered list or a Ul unordered or bulleted list.
So that's where they always go. If you type ul greater than I times 3 you will see the output.
There, it will create a ul, and then inside it that's what the greater than means inside of it.
It will create 3 a lot. So again, if you're coding a list right you know it can be a real tedious pain to have to code all that out by hand.
But with Emmett it's just a few characters enter and you can immediately start typing or cutting and pasting stuff into that list so again.
There's what I'm typing. You can see quick info is showing me what's gonna happen.
You'll notice. It's also showing me where all the tab stops are going to be with the pipe symbol.
And they're you go. I'm gonna teach you.
I think one or 2 more pieces of it, so the plus so you now know what the star does.
You know what the greater than does. What about the plus? So if I type p plus ul greater than Li times 3 plus means create a P.
And then at the same level as a sibling, create a non-ordered list inside that unordered list.
Put 3 L. So you might have in a web page. You know, a a a block quote and then a paragraph and then a list and they're all at the same level.
They're all siblings of each other. So with the plus you could easily create that so that's a wonderful one to know also and having your toolbox again.
You can see on typing it right there, and you can see that quick info is showing me what I'm gonna get.
So if I go oops, that's not what I want, I can change it as I'm typing.
Okay. So you've gotten those. Let's learn one more.
So you type DVD container greater than Dib dot row greater than article greater than H.
2 curly brace article, title, Carly Brace, Carrot aside greater than H.
2 curly brace, the side title, Curly Brace plus p times 2 greater than one.
Have I got that okay? Are you all typing it? As I'm saying so you're ready.
And what is that output? Well, as I'm typing it, I can see what it's gonna output right there in quick info.
Okay, what does it, in fact, do? It outputs that.
So that thing I typed and I hit enter it spits out all that for me.
Now what I tell my students is, I'm able to do that in my head because I've been doing this long enough.
I can see the structure in my head right, and if I make a boo boo!
Quick info! Lets me know that so I can correct it right.
I always tell my students. Don't try to do this right away.
Do it in chunks, you know, and as you get more used to this and understand it better, then you can start trying to make longer and longer emit statements to really shorten the amount of coding you have to do and type it.
Let me break this down for you. So this is really clever.
Div dot container will expand into a div with a class of inside that I want a div with a class of rope inside that I want an article inside the article.
I want an H 2 and the curly braces are the text that will go inside H.
2 kh, 2, then there's a new symbol, because by this point we're in inside the article, right the 8 2 is inside the article I want aside to be a sibling of article so we need to go a level up and that's what the carrot means the
Carrot means go, the carrot means go up a level and then do an aside.
So now the aside and the article, as you can see on the rider siblings and then inside the aside create an H.
2, give it a title text on the side title, and then inside and sorry, and then next to the H.
2 as siblings do 2 paragraphs inside each one put a sentence of laurum ipsum.
So all you got to do is type. The word laurum, and this Greeking text, Laura Mipsum automatically appears a full sentence of so again, do I expect people to do that right away absolutely not but the fact is you can and once you understand?
How to do it. It will save you so much typing and Vs code enables emit expansion by default.
In all these languages, and any other language it inherits from them like Php.
For those you the code in that. But here's the thing I've only scratched the surface with them.
Okay. And it does a lot more than just expanding abbreviations.
It has a lot of awesome cool features, and so what I urge people to do is use the command, palette type emit and start looking through the list.
Try them out, or also in not door, and go to Emmett, I/O, and look through the documentation.
Certainly look through the documentation, the abbreviations.
I didn't even go through all those with you, but read the rest of the documentation.
You will find you will be amazed. I'm currently working on a presentation about it that will be available on my website someday.
Okay. Next, cool feature about Ds code snippets.
So remember a few minutes ago, when Vs code was auto-completing my paragraph, and I was like Yeah, I wish it didn't do that. So remember.
I typed angle, bracket, P. And then I type the other angle bracket, and it put the killp on the same line, and I had to manually hit enter I don't want that.
I want that by default I want it when I do it.
I want it to be Pkp. Indented, ready to go.
I don't want to have to type all that extra stuff.
Well, and again this falls under be lazy snippets.
Allow me to define a small pattern of text or code that when I type it, and hit enter that triggers and a much larger or different piece of text goes in. There.
So let me explain what that means. So let's say that you want paragraphs when you do.
P. To be formatted as P. Killp. Indented, ready to type.
Well, in my case you simply type the snippet like the letter P.
You decide what the snip it's gonna be code completion and quick info will show you what's gonna happen.
You press, enter, and boom. So in my case I type a. P.
Just a P. No angle brackets just p, and up pops up paragraph comma indented user snippet, and then notice P Killp.
Okay, and also notice that it's sorry the user snippet means, hey?
Somebody else did this it's not built in. That's me.
I'm the user that made that snippet. So I am so lazy.
I don't even want to have to type the angle bracket.
Okay. I just want to type P. And if I type P.
And hit enter. I want it to go ahead and put P.
Killp and have the cursor ready to go, nested inside of it, ready to have text pasted or ready for typing to begin that's how lazy I am.
Okay. So there you go. There's the code preview on the right.
There's the icon that tells me it's a snippet or Emmett, and yes, earlier, when we typed angle, bracket, p angle, bracket that was Emmett doing that and there you go, if I type the letter p and hit enter boom p killp indented ready for me to
type and after I'm done typing, if I hit enter again it will put the cursor after kill piece so I can go from there.
So there's my insertion. Point press, Tab to jump to the second position.
Here's another example. If I want to type an ordered list.
I don't want to have to type. Oh, well, right, and then hit enter.
I just type the letters. Oh, well, and what I do. You can see what's gonna happen there.
It's gonna put. Oh, l killo! L. With the cursor in between.
But here's the thing you never just type an ol, because you always need list items inside it.
So every time I type in a L. I'm gonna have allies inside of it.
So what did I do? Being lazy, I made a snippet called ol, plus and if I type ol plus you can see what it's gonna do it's gonna make oh, well kill ol and nest inside of it 3 allies.
Ready for me to go, and of course, if I get done and I need a fourth or fifth ally I could have just used Denver instead of my snippet.
I could have typed oh, well, greater than Li times 6 enter, and it would have done you.
L. Sorry oh, L. By 6 lis, and then kill ol, so I can use my snippets for quick stuff I can use.
Emit, I don't have to type out lots of stuff, and there you go and notice I have 5 tab stops that I defined in there, so you can create snippets for different languages, each language that you want to work in you can have a different snippets file so in vs code you go
to code on a Mac preferring user snippets on windows or Linux.
You go to file preferences, user snippets, this menu pops up you choose the language, hit, enter, and A.
Json file is going to open, named for the language. So let me show you what I mean.
So I have invoked the command to edit snippets.
This menu pops up, now you'll see I've used 4 before right?
So you start typing. So in my case, or use your arrow keys so I've chosen HTML.
That case on at this point I hit enter, I could have typed the filter also, and what I do.
HTML Dot Json opens up and you can see it there, and so it's a giant.
Jason file, and you can see what you have to do.
You give it a name you define the prefix.
You define what's gonna be created from that prefix, and then you type out the description that's going to appear in quick info.
Alright, and so you can see lines 254 through 2 56 are going to become what I have in that little call out there after I type the P.
Defined into feature likewise my ol plus. I define that prefix online 200, and 38.
I define what's going to be spit out on lines 244.
You see what it would look like once I'm done there on the right, and then my description is in lines 200. 4,948.
No, to make life easy for people doing HTML and myself.
I've made an HTML dot Json file ready to be used by anybody.
It is 416 lines as of last March, so to install it you open up user snippets, you type.
HTML. So you're opening up the HTML snippets HTML Json file you go to that.
You URL, which is also at Github Gist.
Click, raw, select, all copy, come back, select all the content.
And HTML. Json, but there should hardly be anything in there except instructions and Press commander control V to paste over it, save it.
Close it and bam you now can type a P. And have it formatted.
You can type ol plus, and have that appear pretty much.
Every single HTML element you can type just the name of the element itself.
No angle bracket required, and it will spit it out for you nicely formatted, ready to go.
I've also done the same thing for Csm: so we always do Css.
As well I prepared a Css. Case on file. That's only 61 lines, but still very useful.
You go through the same process. You open up Css. Dot Json, go to Github Json copy, select all copy, go back, select, all paste, save and you're now good, to go and you've got those snippets as well I would look through the snippets.
File. I'm providing so you can understand what it is.
I've given. Okay, that brings us to keyboard.
Shortcuts, and I know a lot of you guys are going.
What's the big deal with that like every program has keyboard shortcuts what's he gonna say about this?
Oh, you have no idea. Okay. So shut up and just listen cause you're gonna be amazed.
Okay. Keyboard. Shortcuts and Vs code are so cool.
Wait 1 s. I got a drink
Okay, so many commands in Bs code have a key of command.
Shortcut, for example, on my Mac. If I invoke the command, palette and search for join lines which occasionally I'll copy text out of a Pdf.
I agree. I agree.
And the dang thing, every soft line break. It puts a hard line break in there, so I end up with what should be a single line paragraph.
It's now 9 lines because it did a hard break at the end of each line.
So I wanna join all those lines together. So I invoke the command palette, choose join lines, select the lines in both the command belt choose join lines, boom! It's now.
All one line when I do that I see that I can use a key command control. J.
Great, but it turns out my windows, and Linux, using.
Brethren, do not have that key command that is not available for join lines right well, that kind of blows.
Well. Fortunately Vs code includes the ability to set or change key commands for everything so if you don't like a key command and you're used to it from another editor, you can change it are you stuck with a command that has no key command you can add one and so on, so how do you
Do it on a Mac. You go to code preferences, keyboard shortcuts on windows or Linux file preferences, keyboard shortcuts, and then you're gonna see a list.
There is a search box the top. You will see that in just a moment.
So if you are gonna add a key command for join lines, you would type join. You.
Don't need to press, enter, because it's filtering for you and you're gonna see, join lines.
Now again, as a Mac user. I have control. J: you don't get nothing like that.
Let's add that for you. So here I am, on windows.
I typed join it is filtered down. There's join lines, no notice.
There's no key binding for join lines on windows let's add that.
How do you do it? You simply double click anywhere on that line, and that little window pops up there, you type the key combination you want and hit enter and boom, you just assign it.
By the way, I've had kids typed the wrong thing, and then they hit the backspace.
And now it's like, Oh, you need to hit something backspace.
I'm like just to escape. Just hit escape. Okay. They always freak out so here's the deal I type control J in there.
I mean I literally type control. J: I don't type out control.
You could do that, but you don't need to. I take control and type.
K. And it comes back and says one existing command has this keyboard.
Now I like the fact. Then it tells me that, but even more so.
I like the fact that if I click on that it shows me the command.
I have seen that before where they're like. There's a conflict where you figure it out.
No I don't wanna figure it out. So this shows me exactly where the problem is.
So in this case, on windows and Linux control, J.
Has been bound to toggle panel visibility. Okay?
Well, here's the deal I showed you the panel earlier.
If you want to see the panel for problems, you click on the numbers and it opens.
If you want to open it for a terminal, you can hit a key command to open it for a terminal.
If you're debugging, there's key commands for that I don't see the point of just saying open the panel.
If I'm opening the panel it's because I want to do one of those 4 things, and I want to open to that I don't just want to open the panel, for no reason.
So I'm like I would get rid of control case for toggle panel.
Visibility. Because, like I said, I don't think it's that useful.
And so what you do is you double click on it? And I said, Why don't you assign control all J to it?
That way. If you really still want to toggle the panel you can do it with control.
J. We'll notice when I press that in there. There's no conflict, so it's safe to use.
So at this point I hit enter, and it goes away. There's nothing to show up now, because the the commands gone.
There is nothing there. So I type. Join again, and there's join lines this time.
I double click on it. I press control. J. I hit enter and boom.
I now have a new key command that I can use to join lines in visual studio code.
Now, here's a suggestion. I want to show you guys.
If any of you guys have coded HTML: you are about to thank me.
Okay. Be. I I thanked myself when I figured this out.
Okay. So anybody that's ever coded HTML: you've done this.
Let me show you. Let me open up Vs code here, and let me open up this phone over here, and here we go.
So let's say that I want to make hills bold.
So you had to do this. You went control, B. I'm sorry.
Angle, bracket, b angle, bracket, and it.
In this case it generated the kill B. Now I have to select the kill.
B. And I have to go after, and I paste. That is so tedious.
If I had a dollar every time I've had to do that since 995, I wouldn't be talking to you.
Guys. Okay. That is so teedious every single time I have to type it cut paste.
Yuck! Well, fortunately visuals, studio code has the ability to set key commands.
Well, guess what one of the things em: it supports is called wrap with abbreviation.
Okay. So M. Another awesome thing about Emmett. So here's where I tell my students in the key bindings.
Search for rap, wra-p! This you're gonna see this immediately, editor.org with abbreviation. We're gonna change the key.
Commit for that and I'll show you what it does in just a minute.
2 command E. Command W, or control control. W. So because you can do courting like that, you can say to invoke this command, Do this, then do this so why am I doing command or control?
Leave first because I do that with any committee key command I create having to do with Emmett.
Command e means I'm about to do a key combination for emit, and then, commit. W.
Is short for rap. So if you set that up in your keyboard shortcuts file, you will be able to do this.
Okay. Watch this: I have selected the word nearer I am going to hit. Control it.
Commandi command w and see that little thing at the top that just appeared that says, Enter abbreviation.
I'm gonna type B for Bold, that's all I type B: well, if you notice down below it now has put b kilb after the word near.
But I have to hit enter for it to do it. Actually.
So I hit enter, and I just put B kill B around the text.
I didn't have to cut, kill B and manually put it at the end.
Oh no! No! No! No! All I had to do is highlight.
Commandi command W. B. Enter done, and that now works with everything.
So if I want to put this out this ul inside a div.
I have highlighted. I hit command d command W. I.
Type, div enter and boom. I just put div kill div around that.
So sometimes you've got a 150 lines of code that you want to put a div or some other element around pain in the ass now you highlight it.
And, by the way, Vs code supports coding.
So, if it's a if it's all the way up to here, body.
Well, I don't want to do body, but form here.
I could click that highlighted commandi command W, and surround that.
So if I had an element that had 200 lines to get to the kill, and I want to wrap something around it.
I can do code folding, highlighted in vogue, emits rapid abbreviation type.
The element I want hit, enter and boom. I am done.
It is that easy once you do it, you will never, ever ever want to go back to before
There you go. So if you code HTML, or any other language image supports, and you need to wrap things, set that up immediately.
There's another one I like, and this is also in it.
This is another feature in it has, and that's called balance.
Okay and again search for balance outward and make that commander control. E.
Commander, control up, arrow, and then do balance inward and do Commander control, E.
Commander, control down, arrow. What does it do? Check this?
Okay, so I'm back in Vs code. And I am going to do it.
I'll start with this so notice my cursor is inside the word action. Alright.
I am now going to invoke that command. Command, command up, arrow!
Command command up! Do you see what it did? It now selected the all the text up to the next containing element?
Now I'm going to do it again. Command command up!
Oh, now it's selected the elements that contain that text.
I'm gonna do it again. Command E. Commend up now.
It's selected all the elements inside the next containing element I'm going to do it again, command D.
Command up! Now it's selected the containing elements. Now I'm going to do it again.
Command, D command up! Now it's selected everything inside body I'm going to do it again, command d command up!
Out. Selected. By okay. But I've gone too far.
I wanna go back, commandi command down, Arrow commandee, come in! Down! Command E command down!
Let me scroll down! Commandi! Command down! Command d command, down watch this command!
E. Command, down, watch one more time, commandee! Command down, and puts the cursor right backward.
Originally once it remembered where the cursor was.
That is bad ass. Okay, so there you go. I've got one more to show you one more key command.
I recommend, it also is Emmett cause, Emin. Is that awesome?
I'm gonna insert an image, and I got some images over here right my web.
Sanity, logo! Actually, that's a horrible example, because I need let me do something else.
Let's do this. Okay. So actually I may do a different one.
I'll do this one Nope, that's a bad one, too.
Give me one sec. Let me find this was a good one.
This is a good one, so there's my images. I've got a bunch of images right here, so I've got this image right here fertilizers, full so I want to insert that image in my code so watch this I type img notice there's the user snippet I
Made, so I hit enter it goes. Where is the image? Oh, wise one, and I'm gonna type a slash and notice what to does it says.
Oh, here's everything in your root folder. I go great.
I want to go to images I hit, enter it now, says this is everything in the images folder great.
I go to products I hit enter in NASA. This is everything inside that boulder great.
I want to do fertilizers, or I'm sorry fertilizers dot webp, so I hit enter.
And now I've done the path to the file that works anytime you're linking to files inside your project, and that's why I said.
You don't want to open up a whole bunch of projects inside the containing folder.
It'll get confused. Okay. So I need to add a alt for people with visual disabilities.
So I'm gonna type fertilizers. And now here comes the pain in the ass.
I got insert the height in the width.
Well, if you've ever done this before, you know what you gotta do you either gotta go back out to your file, manager or your image editor and figure out what the heightened with is or you gotta go, okay, fertilizers web p and you click on it and it shows it down here in the
Scott.
footer right, but no, we don't need to do that.
I want you to notice where my cursor is my cursor is inside the word fertilizers.
I am now going to invoke the Emmett command called update image size, and that is Commander Controll Lee, Commander Control.
I and I want you to pay attention to width and height.
Are you ready? Command e. Command I. It filled in the width and height.
My cursor was not even in those. My cursor was inside the alt text.
It was smart enough to go to the image, find the width and height nowhere.
Width was nowhere. Height was, and put the appropriate numbers in their form.
Be lazy automate, automate everything you can and Vs code allows you to do that.
I'm gonna get rid of this because I don't want it
I'm now gonna go back to my presentation and that's the command you want.
You want to search for update image size, and that I would make it commander control, lead, commander control.
I there's others, but that's the only ones I have time to go over with.
Okay, that brings me to extensions and themes.
I'm not gonna have a time to go over but I'm gonna go over a few.
So as our remote showed you guys earlier, there's granite pack Css.
Get HTML and Css. So I have my students right away.
Install, granite pack HTML, which can includes all these extensions.
Okay, that are useful. So I'm gonna walk through some of these again.
I don't time to walk through all of them with you guys, but I wanted to show you a couple, so you get the idea.
So let's focus on the basics first
I love this extension, it makes my life a lot easier.
And again, this is not just for web dev any programming language you can use this extension anytime.
You find yourself having templates that you need to repeat over and over and over again file, templates.
Manager makes that much much easier, okay, because why use templates?
Because it makes it easy and quick to create new HTML.
Css. Javascript, Php. Best shell, scripts, you know, whatever your your jam is, if you have a template, you can get up and running much more quickly so you've already installed it I have my students create our work with 2 templates a template
for HTML, and a template for Bootstrap, which is a framework for creating responsive websites that we use so file templates, manager comes with a template for HTML 5 but I don't like it I didn't think it was very good so I made
my own, and I have my students replace it with the one that I made.
So go to that address in your browser that's a one followed by bee followed by one, and you're going to end up here on this web page.
Click, raw, press, command a to select all or control a copy.
It all. Now go back to visual studio code. Go back to the explorer. View.
Click on that explorer, Icon in the activity bar.
Now look at the bottom of that view, and you'll see templates.
That is there because of the file templates extension.
So you click on it and it opens up, and it already comes pre-installed with a bunch of templates.
Now I actually went through and deleted some that I never use.
I'm never gonna code and see your C. I'm never gonna code in lots of things that don't interest me or you know as way above my pay grade.
So I was like. I'll just get rid of those templates.
I can always add others later, if I really want, so that's why your list of templates might be different than my list, because I deleted a bunch so these are the templates.
Now you might notice those buttons to the right of bash.sh!
Okay, or hover over HTML: you'll see the same buttons.
Here's the breakdown of those buttons.
The first button lets you rename the template, the second button lets you edit the template the third button lets you clone it.
So you can change something and have a different name for something different, and you can also delete it.
Okay, so click on the edit button on the HTML row.
And that's the HTML in the default template, which I don't want.
So instead I have my students, press controller, command a to select all, and remember, we copy it a minute ago from the gist to Github, so paste over it, save it close it.
You're good to go. You've now got em my opinion a much better HTML template ready to go.
Now we're that one editing an existing template.
Now we're gonna create a template for Bootstrap 5.
So go to that address in the browser once there, you know the drill by now.
Click on raw. Select all copy, go back to visual studio code, hover.
Now this is new. Hover over the Templates view title Bar and you'll see 2 buttons.
The first button creates a template, the second button refreshes the list.
So you want to click on, create a new template immediately.
You're asked what the title is going to be, and I asked my students name it exactly.
Bootstrap, 5 Cdn dot HTML.
So we all have the same thing so it should now look like that.
Now press, enter, to create the new template, and there you go.
It's empty paste in the code I had them copy from Github Gist save it right
That's the question. Perfect. Thanks, Scott.
I think my clicker. Oh, hold on! See if that works!
Yup, and there you go. You now have a new template ready to go, for when we get to Bootstrap, close the tab, and now at that point you can close the templates. View.
Why? Because you that's not where you go to work with templates.
That's where you go to edit. Create a delete, templates.
You can close it, you will never need to go there again unless you are editing deleting, changing, renaming, and so on a template so I give other ones.
There there's where it's backed up. So now it's installed.
How do we use this and remember this works with any language.
Okay. There are 2 ways to invoke it. You can use the command palette, which is what I usually do or you can right click in the explorer view where you see files and folders and it will be one of the commands in the context men so let's walk through this with the
Command, palette, so a notice I'm in a project called Colors Hype and 2 for Tuesday, and I invoke the command.
Palette command, Shift P. In my case, and I start typing in new file, Fra.
And it filters down to new files from template.
Once that appears I hit, enter. Then it's gonna ask me which template I want to use.
I will come back to that in just a minute, because the other method is right clicking in the explorer view.
So you right click to bring up the context menu. Notice the very top one.
There is new file from template. You choose that. And now, no matter.
If you use the command. Palette, or if you use right clicking, you are add, to choose which template you want to use, so you can filter it by typing.
You can arrow key down to it, you can click on it like a barbarian.
In this case we want HTML HTML.
You've typed that until it's selected or use your arrow key.
And then it says, Okay, what's the name of the file?
You want me to create using that template well, I'm gonna create an index file.
So I simply type index. I do not type the extension dot HTML.
Do not type the extensions. If you are doing a web page, do not type dot HTML: if you're doing Css.
Do not type dot, Css. If you're doing Javascript, do not type Js: if you're doing a shell script, do not type.sh!
Do not? Why? Because it puts it on there for you.
All you need to do is give the file name. It knows what extension goes on there, because it knows the template you chosen so it puts the correct extension on there for you okay, don't do the file.
Extension. Okay. Oh, here I am. Oh, no! You're starting to type.
The file extension. I told you not to, but you're doing it anyway.
Oh, well, what happens you now? Have file created called index dot HTML dot HTML.
So at that point you got 2 choices. You can right click on it, neither.
Delete the file and recreate it, or rename the file which is what I would do.
And there now. Oh, thank goodness, we're back to index on HTML yay!
Now this is something important about this
Very important tip about this whatever is selected in explorer view will become the parent to the new file.
You create, you know, in other words, before you create a new file.
Using this extension, pay attention to what's selected in the explorer view let me give you 3 quick examples.
Explaining this, so here's how to create a new file in the root to your project.
So notice I. Nothing is selected, the the the project is selected, and you can tell because of the blue border around it.
I clicked in an empty area, and so nothing is currently selected except the project itself.
Alright at this point I invoke the command, Palette!
I create a new file, and I in this case I right click.
Sorry I right click. I choose new file from template.
Notice where my pointer was when I right clicked.
I click on new file from Template I could choose HTML I type the name Foo.
I hit enter and food HTML is now in the root of the project because I didn't select anything.
Okay. Now, what if I want to create a file inside another folder?
Well, I want to create a file inside products called product hyphen.
One dot HTML: okay. So notice at this point nothing is selected.
Okay, I right click on the products folder that brings up the context menu. Right?
Notice my pointer is on products. When I do this, so that is the context.
I choose new file from template. I choose HTML I type product type in one no external.
I hit enter, and it created that file inside the products folder. Because that's what I clicked
Now let me show you how to create a file inside the wrong folder.
In this case I want to create another file and say products called products 2.
Well I'm not paying attention to what I'm doing, and I should have right clicked on the products folder.
But instead I right clicked on Foo, or maybe just the empty area where nothing's chosen, and I wasn't paying attention.
I did new file from Template. I chose HTML: I.
Type product: I and 2, and that files not where I wanted to go.
Well, yes, what super duper easy to fix this! You drag and drop the file.
I click on the file, and I drag it onto products, and I let go and want I do.
Vs code says: Do you want to move this file or not?
In this case. I click on. Move. Yes, I want to move it, and it's now the right place.
It should have been. Okay, think I'll see you. Maybe one more, maybe 2, depending on your interest
But I gotta show you this because it rocks. This is an extension made by Microsoft.
In my opinion, just how to build it in. I hope eventually they do, because there's no reason it shouldn't just be built in, and that's called live preview.
Okay. This allows. You see, I've talked. I've 200 people in web development all over the Us.
Canada, Israel. I've taught students. I have learned how people teach web development all over the place, and a lot of them do it wrong, because a lot of them say, after you code your page just drag it into the browser no that is horrible advice because if you do that a lot of things aren't gonna
Work, because if you just drag it into the browser, you're loading that page locally.
So instead of Http, Colon slash! Slash!
It's gonna say, file call and slash, slash, slash, and because it's running off your local file system, it's not running from a web server.
So a lot of things aren't gonna work. So that's terrible advice.
However, if you use the live preview extension with visual studio code, it will actually open up a web browser and show you your web page running in a mini mini-Ni mini mini web server as you make changes in your code and say that will update the web, page
In the browser in real time. Okay, you make a change.
You save the web page now updates, and that is incredibly useful.
And I said it blew my mind that we can do this.
This is so nice, now, if you've ever used grunt and task runners like that, you know you could do it with this with that rather that tool, but the fact that it's now built in makes it so much easier so basically what's happening is live preview is starting a mini web server on your
Computer and it lets you interact with your website just like a real one.
Like Apache, or N. Connects. R. Is now, of course it doesn't do everything those do, which is why I called it a mini web server.
So, if you are on an HTML page, if you look up in the top right of vs codes, window, you will see an icon that looks like a book with the magnifying glass right next to the same Icon without the magnifying glass that means split the wind I don't know why they
Couldn't think of a better one. Okay, if you click on that it will start your local server, which immediately the terminal panel opens up showing you the process of the live server which you can close and the current web page you're working on will open in your default browser okay, so
here's a little short video that will make it very clear.
On the left. I have my browser, brave on the right.
I have the code that I'm working on and up in the top right?
You can see the icon for the live preview.
So let's watch what happens. So I click that live. Preview: icon.
Boom, the web, page loads in my browser.
Notice it says tips on the right. I am typing tips for you.
I hit save and boom it just uploaded a live in the browser.
Now on the right. I get rid of for you. I hit save, and we're back to just tips.
That's what I'm talking about as you update your Css.
As you update your Javascript as you update your HTML and save the resulting browser.
The results show up in your default, Browser. This makes like so much easier if you want to close it.
Simply close your browser tab, or in the terminal press control C, and that will close it.
However, this drives me. Nuts, I will sit down to look at a students.
Call, and I will say, Well, let's look at that.
Live preview. So they click and open live preview. And I'm like well, we need to change some stuff in your code.
What do they do? They close life preview, they type a few changes, save it, and then it'll open live preview again.
Then they look at it. I'm like: Okay, now, let's make some more changes.
They close it, they make a change, they open it at that point.
I'm like: What are you doing? Okay, it's called live preview.
It's not called live kill, resurrect, kill, resurrect, kill, resurrect, kill preview!
So once it's running, leave it running, don't close it every once in a while.
You'll you'll click, save, and it doesn't update.
Make sure. You, in fact, hit save and every once in a while it gets confused and the connections broken.
In that case, sure. Close the tab, reopen it, and if it's still got a problem, then it's you.
It's not like preview, it's you. But point is, leave live preview running.
Don't keep opening it over and over and over and over and over again.
All right.
9, 11,
I've mostly got a couple of others. You guys can read about those.
Let me just address things really quickly, because everybody likes themes
So Vs. Code, like almost every other editor in the world, allows you to personalize the app with a color theme which changes the colors.
So, for instance, that's a theme I'm normally using in mind when I'm coding stuff when I'm presenting I use a light theme, because it's easy for you to see but if I'm coding.
By myself. I often use a dark theme. Vs code comes with several color, themes pre-installed.
They're pretty good they really excuse me. They're pretty darn good, but you can install others.
So, for instance, in granite pack, HTML.
I include the monochide dark soda theme, which is one I use so you can search for themes just like you search for extensions.
In fact, it's the same place so you could click on the extension view.
That's an older icon there. I need to update this, and you would see you could type the name of the theme and there's your information about it.
Really what you can do is just search for color theme, and then you'll see a huge list of them ideally.
You click on them, and you should see a screenshot if they do not have a screenshot of what their theme looks like.
I I leave instantly, because if you don't even care enough to put a screenshot to show me what your theme looks like.
Then heck with it. So, for instance, I like the name of this.
One the neon vomit, with 2 Ms. Color theme and notice it shows you for Js.
If you scroll down it shows you HTML Css.
Other languages. I recommend my students start with these, because these are well supported among most editors, so if they leave Vs code, or if they want to use Vs code along with something else, if they choose one of these themes, their pro those themes tend to be supported in every single editor out
There, so they can carry the theme with them. Okay. So again, I like Monochi, dark soda.
Dracula is used by a lot of people. Github has a theme that looks like Github, and so on.
When you find a theme you can simply click the green and install button after installs click the reload button, and that point you have to choose the theme just installing it doesn't do it so you have to go to code per second color theme or file
preferences color theme the command palette opens, showing you a list of all your themes, select the one you want, and hit enter and boom and vs code also supports file Icon themes and these put little icons to the left of your files so those are that is a
file, icon theme right there you see on the left you can turn that off if you don't want it.
You can change the theme I pre-installed the material icon theme because I think it's a nice theme.
But again you can disable it. You can turn it off.
You can remove it, whatever you want. Again you can see there's the material icon theme, and that shows you what's in what icons are supported, in there and file types it covers like everything you can also search for Icon themes if you want and choose your own Icon
Theme again Vs. Code has some really nice ones. These others fit in with it very, very well.
I like the material icon theme, as I, as I mentioned you, install it, reload it, choose it again.
You have to choose code preferences, file icon theme.
It'll show a list. Choose the one you want. You're now good to go.
If you want to look for more great apex Cs.
I also installed extensions. Again I'm not gonna go through that because I want to leave plenty of time for questions, and so I have more in here we don't have time.
For, but I go through other extensions. I install and recommend I go through Css.
Extensions I install and recommend, and I go through some other features that Vs.
Code supports, and, like my bonus section here debugging code folding which I did mentioned to you guys language.
Support and get integration, which is all built in, and works really well.
I rarely need to use a third-party tool.
You can either use the get in integration that's built in to the Gui.
Okay. So it's actually built in. If you click on that button.
Yeah, if you click on the third button down on the activity bar that opens get and you can do all the things you would want to do with. Git.
You can stage changes, you can commit them. You can see there you can pull you can push, you can rebase, you can stash whatever you want to do I rarely have to go to a third party tool to use get now but remember if you're a command line person you can open the terminal and run all your
Git commands from the built-in terminal as well.
So that's visual studio code at least. What I'm gonna cover tonight.
I am now quite open for questions. I can't wait to hear what you guys found interesting are useful which I'll ask in a minute.
But for now, does anybody have any questions
What would you say? The learning curve is to get proficient
Pretty easy. It's not hard it's one of those you can open and start using right, away but it's one of those you can also learn more and more and more.
About you know I've kind of given you a big jump.
Start tonight with it, but it's not hard to learn at all.
It's not emacs
This is Stan. Oh yeah, really like the fact that it would do the folding of.
Oh, yeah.
And you say that it's not emacs it.
Does it use key strokes like them, or do? You is it all
Oh, I think there's a vim mode. I think there's a Bim mode built in or an extension for it.
So yeah, I'm sure you could do that, because vim mode gets built into everything.
Yeah. Okay.
I don't know how good it is, you know, but I'm almost positive there is, in fact.
I've I've gotten to the point. If I can't use film, I can't edit anything
Yeah.
Sure once you try it, though I think you would find it.
I
Let me put this one yeah, here we go. I'm gonna share my screen again.
So you guys can see it
There we go. So I search for vim and the extensions.
There's vim emulation, vim language, server.
Okay.
Then theme. There's another vim extension open kernel in front, current current file in vim, so there's a lot of vim stuff that you could check out and play around with with this
Who else?
I I really did like the the introduction to the quick info and the emit stuff.
Good.
It's really interesting.
Yeah, I mean Stan, for somebody like you that has to use HTML.
And Css. But it's not your like thing you do all the time. Vs.
Alright.
Code would really help you really would, because it it makes so many things easier for you for a person that's not like doing it every single day, you know, and even as a person that uses does it every single day I still find it.
Helpful, so you know, kinda goes either way. Anybody else
I'll preface my comments by saying, my head hurts. Thank you.
I'm sorry.
Thank you. Let's see, I I realize that Bash is one of the templates built in any of the other shells.
Let me look
Well remember I might have removed them
You know, and back. Let me look at the template here so it's a template I made I'll show you what it looks like.
It's nothing special, but that's the template I made to use in bash the vast template by default empty, so it's a shell script one you know.
So that's one I use over any time. I'm starting a script.
I do I use this and notice it'll insert the date automatically.
Right there for me. So you know again, if you go to the explorer extension view and look up shell, I mean you've got tons of stuff.
See she
In fact, the mighty shell check is built in which, if you do shell scripting is tremendously helpful.
Can you increase the font size on that? Hmm!
On this sure Nope, how do I increase the phone size?
Appearance zoom in
In the right direction
Appearance zoom in
There we go!
There you go. That's my that's mine.
Oh, no! And the part to the part on the left too.
Oh!
The selection
Yeah, so I think he had bash.sh! And it was just empty.
Okay.
So let me make this wider, so you can see it.
There you go. So that was something I found years ago, and I just always use it
Sure I would throw a here document in there myself.
Well, that wouldn't be a template. That would be a snippet
Well, I mean you know a space for it.
Okay.
Well, sure! But again, that's a snippet, right?
So you would in fact, I might have that as a snippet.
Let me see I might I might not. I don't know.
Code preferences, configure, user snippets, shell, script.
No, that's the only one I've got here.
Nope that's in there. I don't even have a snippet for it.
Hmm.
But again that would be a snippet that you would do, because that's not a template.
That's a piece of code you do over and over.
And over again, right so
See, here's all the ones that comes with that. You could do so.
There's Pearl, you know. These are snippets again.
So any of these you could make snippets for
Okay, this is answering another question. I just saw rust
I'm guessing. Probably see?
Well, okay. So here's the deal. Vs code comes with a bunch of languages supported. Okay.
But so I'm gonna go here and go to snippets, and there's c closure copy, script.
C. C. Sharp, Diff. Dark docker trial, F. Sharp.
There's get stuff. Go handle bars, ignore files.
Any kava javascript Javascript.
React case on Julia late tech less lua make files.
Media wiki. Objective C. Object to C per pearl perl. Page.
Php. Powershell, Python, r ruby, rust.
There was an R.
Yeah, right? There.
Okay.
But again, remember, if I click on that and open it, there's nothing in it.
I need to add the snippets. You see what I mean
Now here's what you can do, though let's say you use our you would go here, and you type R.
And start looking so maybe visual studio code doesn't come with our support built in.
Yes.
I don't know, but you see right here the are extension for visual, which has been downloaded 738,000 times right well, if you click on it you can read about it and it says it's supports the r programming language including features such as syntax highlighting our
Language service interacting with our terminals, viewing data plots, workspace variables, and so on.
All you gotta do is install it. And now there's all these additional features for R.
That if they weren't there before are now there
So yeah, go ahead.
That's perfect. Perfect
So so it's not so. It's not just for web pages.
It's for. Gosh.
Oh God! No oh, no! No! No! No! In fact.
That's what it supports out of the box as well as a bunch of others.
But that's what it comes with support out of the box.
Right
Okay. Then you can install lent extensions that add support for all these other languages, and that support can be syntax.
Highlighting templates, snippets. So I lied when I said, you have to come up with the snippets.
If you install certain extensions, they'll put snippets in for you as well
You know.
Can we take a look at Rust while you're there?
Sure.
So there's rust
Why is that crossed up
I have no idea why it's crossed out. I don't know but this support, wait, this is our there's rust.
This extension is deprecated. Use the rust and analyzer extension which has a 1 million downloads.
So this provides support for rough features. Code completion.
Go to definition implementation types, find all references, symbols.
So on types and documentation, so it has that little documentation on hover right inlay hints, syntax, highlighting code actions, and much much more so if you were doing rust, then you would install that extension and now you would get full rust support in vs code.
Now here's an extent impact somebody made that includes the rust analyzer.
It has better tunnel rust, analyzer, and Chris.
If you install that it installs those 3 for you
As opposed to you. Installing each of those manually which you may not want to do.
But here's a bunch of other stuff people have done.
Here's a rust, Doc Viewer. This takes your locally generated project docs and displays them in a new window
So there you go! So this is! Look at all the rust stuff there you go!
Oh, there's a rough snippets, and there there are probably other rust snippets, but there you go.
See what I mean. So if you typed in Russ rust snippet right Russ snippets, snippets for extension programming code rust, analyze.
That's the one they recommended. It has snippets in it, and so so that's my point.
As you, and you know, as you try to use different languages in it.
Go, install an extension or extensions, and all of a sudden you've got all this support built in for all the features I've been talking about tonight.
Yeah. So yeah, out of the box it's an excellent web development.
Tool and mark down, but you can use it to do lots more.
You know. Can somebody think of a obscure language that's super obscure but obscure
Hello!
That's cool
Not a traditional, fortran
Alright. Well, here's Haskell
I mean, you know here's one that sports Haskell.
This had support, for Haskell. You know all this different stuff.
Come to definition symbols, code completion documented blah blah blah you, said Fortran.
There you go, supports Fortran, snippet syntax, highlighting code snippets.
Cobalt.
Go ball.
Provides.
Syntax, highlighting intelligence support, highlighting snippets and browsing for cobalt.
And there's more than one as you can see.
Hey? Bye, one! Try another one
Try a fourth.
Okay.
There you go!
Huh! I'm impressed.
Syntax highlighting. This is the Syntax island, but there may be others.
There's another one. This adds syntax, highlighting a language server which offers all these additional features a debugger
And this one sports back and forth.
So you guys getting the idea
Somebody had already typed into chat pearl.
Oh, well, I showed you guys
I'll also just looking for if you have any experience with parole in this
No
There you go!
Syntax, checking symbols go to definition, references, signatures.
There's a debugger. Boom, boom, boom, boom, boom!
You know. Here's a here's one that provides code intelligence
Here's another one. Here's another one, you know.
You just look through them. I always pay attention to the number of downloads, but that doesn't always mean stuff I've downloaded stuff that a 100 people have downloaded and that's it because I was like wow!
This is really well done, you know, and it worked. And by the way, notice virtually all of these have a Github repo or a repo on another version control server out there that you can go browse the code leave tickets you know certainly offer a code suggestions and and things
Like that. So there's plenty out there you can.
You can do.
Cool huh!
Nice
Any other questions. Before I ask guys
Scott: just Yeah, this is Robert. Quick, quick question. I didn't.
Well, surely I'll start with slash, slash.
Yeah.
I didn't see your code for when you were talking about the comments in Json, is that some are those comments something that are easily removable with like a grap or a set or something like that simple regular and and at the beginning of the line okay, so it's an entire line
That's being commented. There's not inlined
Yup. No, it's it's line by line comments
Beautiful, cool, thanks.
Yeah, Yup, I was wondering if somebody was gonna ask about that
Cause. Yeah, you can't just take it and pop it in other places.
Okay. I'm gonna go around and ask you guys what you found most interesting like.
I always do
There you go. Okay. Man. Got a couple more questions for you.
Oh, I'm sorry. Go ahead
Scott! Oh, alternatives to a visual studio code.
What what are the competition? What would people use instead of the F code
Nothing
Well, I mean visual studio, or some of those other more heavyweight languages.
There's a well. God! There's I mean.
There's tons out there. Sublime text can be used.
People I mean people that do different languages. I know python people.
They have certain things they like to use, and you know different languages support have different tools that they find best for that language.
You know we just got to research it and see what what you find out there as far as web development goes.
There's been a bunch. There was one called Brackets.
That was pretty good. That was made was open source made by adobe.
But it's dead adobe dropped. It is now community sported.
But Vs code pulled way ahead of it. I used to use brackets with my students and I moved on to Vs code.
I mean I mean there's there's there's always competition for tools like this, you know.
You just gotta look around and see what's out there.
But there's a I mean get brains.
The jet brains. Ides are really popular with some people they really like those a lot.
Those are high quality, you know. We just gotta ask around.
But there's a reason so many people have started moving over to Vsk.
Because it's so extensible. It has such good features.
It's definitely maintained and updated constantly. And it's got a really large community at this point, really really large.
So hope that
You just use the you just use the term ide right?
Integrated development environment. So a text editor is just a text editor.
An Ide adds all sorts of other features that work together to make coding, maintaining your code, working with it much easier to do, and if somebody else has a better explanation that go for it
Anybody. Okay.
That's also a good week of Pd. Article
Anybody else
Anybody. Okay. So Jonathan Cruz, what do you find?
Most useful, interesting.
Scott. There was an excellent presentation. I have just one question.
Yes.
Is there a way to run Vs code without a Gui
No, that would that's not what it's for.
That's
It's very much a Gui tool
Okay. So I'm I'm hate to say this.
But I'm an emacs, guy. I'm gonna stick with emacs
Oh, yeah, stick with what you know best and like absolutely, you know some of you guys know, Bill Edney, Bill Edney has used vim religiously for 20 years.
He now uses. Vs code, when that happened. I was like, like, you know, are the angels appearing?
My business partner, Jan, who some of you guys know, used Bb.
Edit for 20 years, and then one day I walk into the office and he's using visual studio code, and I was like, Are you screwing with me like and he was like no no i'm.
Using it now, and I'm like. Are you screwing with me like what for 20 years you've been using that?
He's like I like thes go better. It does some things better.
So you know I know and again I'm not saying it's if you don't.
Emacs. And you love emacs, and you got emacs memorized in your muscles at your fingertips, using Max.
Okay.
You want to try something new. This tool is a good thing to the good thing. To try
Okay. I'm impressed that it can do. Haskell.
There you go, Gary, how about you? What you find? Most interesting or useful
Oh, wow! Boy! Good
Yeah, I I've been listening as we built up to this to folks who were, as you were just describing.
You know saying, Hey, I've been doing this for for 20 years, like I finger muscle, memory.
I my fingers just do this automatically. And but yeah, as you were going through some of the demonstrations, a as much as I was thinking well, Heck, I know them I I can this.
Sure.
All happens. But you know, watching the demonstrations and okay, yeah, it is kinda nice to just have that snippet like that.
And yeah, there is going to be times when that's just better than depending on my fingers doing this without conscious effort.
Yeah, Yup.
Yeah, so yeah. The actual demonstrations may well.
Yeah. Good. Yeah, absolutely. And remember, it's open source people.
Now, it does have a little bit so it's just like chromium and chrome.
There's Vs Codeium and Vs code Vs code has some Microsoft crap in it.
I find it pretty minor, not a big deal, but if you were like Nope don't want any of that.
Then there's Vs codeium for you, and that doesn't have any Microsoft stuff in it at all.
It doesn't support all the stuff I've been showing you like some of the neater stuff doesn't work in Vs codium.
But if you want a lot of the features, but end extensions, but don't want the Microsoft stuff in there.
Then there you go, so you could do that, too, Lee Lambert, how about you?
That's okay.
How to give me a second term microphone on lots of stuff.
Scott, nothing specific
Okay. It's fair enough. Nothing. Nothing sticks out
I'll ask you if it did flash, but I don't think so.
No lean, nothing does flash, thank God.
That's why I gotta find something to convert to
Huh! You want to keep doing. Flash.
No, I need to take the stuff I got and move with HTML 5
Oh, well, if you wanna if you wanna you know a coding tool you know you're obviously very technically sophisticated.
I would be very curious to see what you thought of this if you tried
Who this is, Stan. I'm wondering if that alternatives to.net would show anything for the convention
I don't know
Is that a question conversion? I need to move it to a new platform
And
Yeah, yeah, you need to move it to canvas.
Well, that's I can't find anything that does canvas
Okay. People are good.
Oh, there's tools to do canvas. Yeah, yeah, shoot me an email okay, shoot me an email I'll send you a list.
Okay. I'll send you a list. Steve Stegman.
What do you find most interesting or helpful?
Yes.
Got Scott got let me interrupt Bob Hansen's microphone still does not work, so add Bob Hansen.
Your question so that Bob can formulate his answer and type it out and chat for you
Alright. So, Bob, what did you find? Most useful? Interesting? I've now got the chat open, so I'll see when it comes up
Hmm.
Alright. Steve Stegman, what do you find? Most interesting or useful
Steve, Segment going once, going to twice rich. What did you find?
Most useful, interesting.
That's okay.
I'd turn a microphone, too. I taught C on visual studio for many, many years, so I was kind of curious.
How how close studio code look to! The one I'm used to close enough, especially when you got the tabs up.
That looked very much like the visual studio
Cool. I've never used visual studio because it wasn't something I needed.
So that's actually very interesting here for me
Yeah, and I suspect the extensions would do things like debugging for most languages as well
Well, guess what Steve, let me share my screen with you.
You're gonna be very happy. The number one extension for C and c plus is made by Microsoft and spend downloaded 38 and a half 1 million times
Alright.
So I'd say you'd be pretty safe using it for that
Yeah.
I would think so too. I, did lately. I've been teaching a lot of python, or I was till I retired, but did this
Oh, yeah, there's pot. There's so much python stuff for this.
It's
Yeah, there is now. But you know it even before that visual studio, just very only towards about 2, the 2016, I think, was before, and even had Python
Right? Yeah, that doesn't surprise me.
Yeah, well, good. I'm glad you. I'm glad you found it helpful.
That's awesome. Robert. Satek. How about you, Buddy?
I'm gonna preface mine by saying number one: fantastic jobs.
Well, thank you.
Scott, this is. This was very informative and well presented.
One of the things that I'm interested in, of course is, you know, automating the installations in the configurations I've got on my chromebook.
Hmm.
I actually have Vs code installed, but I rarely use it just because Vi works for what I needed and everything else I do within within a Jupiter notebook.
Sure.
But what interest! What I would love to do is and tell me if this process is possible, right now I've got.
You know, one I fire up my chromebook basically in and enable the Linux development environment.
Right
I've got basically a setup script. The configuration file that goes and says Okay, great install this.
Right
Install this put this here, put this there that kind of stuff, including visual studio code, all the extensions and stuff in the snippets.
Are those also basically files. I simply can download and install.
Is there a equivalent like an you know, an app get install or a yum, and or you know, Npm: all that kind of fun stuff
Well, that's what the extension pack is. So if you had extensions, you wanted to use every time right?
You create one extension back right? And I don't know of a way to automatically run it.
But that doesn't mean there's not it's just.
I don't know you know what I mean. There probably is.
Cool. Well, I'm thinking of not automatically. Well, I don't know.
Well.
Maybe I do mean run it. But I'm thinking of you know.
I download Vs code and it automatic. And then I have another couple of lines or so that say, Okay, great.
Right
Now get this extension back. Now install the extension, pack, and then, whenever I start a Vs code boom, everything is up and running and ready to rock and roll
Right, I presume that would be possible. Give me one sec.
Where does Vs Code store these? There's a Oh, wait.
I think I'm being a dummy
Of course, the reason I'm asking is because, just like you.
I am lazy is all can get out.
Oh, I know you are very lazy, Robert.
Of course.
If if I can put it in a if I can put it in a in a in a shell script, or whatever you know the configuration file. And I don't have to type, that's one way I want to do
One sec. Where is it? There's a folder in the library where all of the extensions are, and all that.
So you know you on a Mac, at least, I know that's the only environment I know about.
It's very easy to move that stuff around and back it up and stuff like that, plus you got the if don't forget you also have the syncing service.
So if you set up the syncing service, then all you'd have to do is use your shell, script, or whatever to install it, and then, start the syncing server and everything would get pulled, down for you extension settings themes everything you know
Okay, I guess I guess I missed that part of the talk I was.
Right
I was mobile in in the beginning part so I I missed a few things interesting, so sinking service.
Th this is where on Github, or something
Well, there's 2 ways. You can do it. There is an extension that uses Github that you have more control over.
But Microsoft, smartly built in support for it and it yes, it uses Github as the back end is my understanding right there.
Okay. Cool.
See, see where it says setting sync is on
I don't see where your mouse cursor is.
Over here.
Oh, so see right here, this right here and then right there. What's highlighted now, setting sync is on
And and it is that setting that I can literally like I said, install Vs code go in, you know, modify some Json file, enable it.
Boom. Okay.
But
I don't know. I have no idea about that. My advice would be to go to, and one thing Microsoft has always been pretty good about is documentation, and the docs for Vs code are really good. So if you go to code.
Visual studiocom. Slash docs. A lot of what you're we're talking about here may be answered in here
You know. Yeah, absolutely. Here you go setting sync. And this tells you all about it, and what it does, and so on through might you sign up with Microsoft or
So there you go.
Hope that helped Bob Hansen
The whole talk in general Smith concepts very good, very good. Thanks.
A lot. Jay, how about you?
Well, it's interesting learning. Did it exists, and it can be used in a lot of environment.
So that was kind of eye opening. We may have to dive that dive into that and check it out
Yeah, good. Hope you find it useful. That's cool. I hope I don't mispronounce your name, Ewan
You on Sanja, but not mispronouncing that, are you there? Not? There?
Okay, David, how about you?
I've been using Vs code for a while.
Oh, good!
But this is excited me to getting deeper with it, as a lot of things I would like to explore better.
Good.
Sure.
Yeah, hmm.
I'm was interested in your get auto push information which I need to explore better, because I just go to the terminal and do my pushes and commits and things like that, and the snippets I like the idea of the problem is I don't know if you know auto hot
Key which
Oh, I know how I I use another program on my Mac called keyboard.
Good.
Maestro. That's similar. And yeah, I fully understand why you want to use auto hot key for that stuff
That's going to take the keys before it gets to Vs code right
Oh, yeah. Oh, yeah. Oh, yeah. So here's why I do the snippet so much, though so couple of things number one.
My students, I'm not going to have them install auto, hot key or keyboard.
Right
Myestro, or anything like that, and just getting them used to the idea of snippets in there in this editor is like hopefully opening up the world to them so they can understand that right I'm trying to make it easier for them to code and then the other thing is you'll notice in vigil studio code I type
A P. To do paragraph. I obviously do not want to make that.
Right
A system-wide snippet, right? Because that'd be nuts.
So I definitely use my macros to do all sorts of stuff.
But when I'm in Vs code I use those cause I've already got them set up.
I had the students use them and they're kind of customized for that.
But that's that's cool. That's cool.
Makes sense.
You're using that. I just recommended auto hot key to a student the other day.
I'm told. Oh, yeah, it's it's pretty awesome.
Oh, yeah, it's fun thing. I like it. Nothing to get more information on.
Thank you.
Oh, yeah, good Stan, how about you?
I'd already mentioned some of the things that I was impressed with the quick, and Po.
Oh, yeah.
Am it, and call forwarding. I just have one remaining question.
Slides.
You said the first 70 pages of there are so slides of of the things that you present to news new students that don't really know that much that's still available right
Oh yeah. No, that'll be at the beginning of the presentation.
Okay.
That's why I was warning. You guys slides 2 through 73, you know.
You might want to flip past to get to the Vs code because the thing is the reason I do that in this is when we get to this presentation it's finally time to actually start coding on our computers.
Right
And that's why I'm like okay. Let's talk about some basic things when it comes to setting up your environment and some basic knowledge of a slash and a backslash and things.
Like that. So that's why I stick it in here.
I could take it out, but
No, I I I really like reading that kind of stuff. Okay, understanding what new people don't know.
Good, good.
I've I've forgotten so much, and I'm forgetting so much.
Cool, alright, cool. I'll have a look
It's a problem
Oh, yeah oh, yeah same. Here. Oh, yeah, well, I think I got everybody right.
Hey, Scott! This is Robert again. Scott, can I ask you a quick question
Go ahead. Yeah.
Another thing I didn't see is you? And I heard you mentioned.
It is that you can bring up a terminal within Vs code.
Is that an actual, you know? Bash shell Linux thing?
Or is that something else
Yup! And in fact, you can change the shell, so I'll show you.
So there you go, the key command for doing that is control. Back, tick!
There you go! I mean it even grabbed my fortune.
See right here Robert works. His Bash
Hmm.
This is well, that's my only one right, but it will recognize others you can.
Oh, there you go bash z shell Javascript debug Terminal.
Those are ones that are built into apple right? So that's why.
If I had others installed it would recognize those as well
So I guess my question is is, if if this was on running on a on a windows machine does that mean there's actually a bash.
Shell brought up in Vs code
Well, if you were on windows, and you had installed power, shell and bash, and those windows subsystem for Linux, those would all appear. Yes.
Oh, Gotcha, but you know it's it's you have to have Wsl, too, in order to actually use that
Yeah, he uses what's inside in the system. It doesn't provide its own shell
Yeah. Yeah. So this is my shell. I mean this is using all of mine.
Bash, Rc. And all that stuff. It's the it's just like I opened.
Got it. Okay, cool. That's what I was wondering makes sense
I term, and started a shell. You know it's the same exact thing
That makes sense. So if someone doesn't have Wsl 2 installed on their windows box, it would probably open up Powershell or something like that.
Got it okay. Cool. Thanks.
Right. Right. Exactly. Exactly. Yup. You got it. That's exactly correct.
Yup, like, I said I I use. I use it all the time because it's there.
And it's all I'm already in the folder.
I mean you'll notice I'm already in the folder for Herbert West landscaping, so you know, if I need to run I use Hugo for this site.
So if I need to run a Hugo command there it is.
I'm ready to go
It's pretty nice
Scott.
Yeah, well, good. I'm glad you guys enjoyed it. What
Why not that you would excuse me, E. One or I one or a bit for slaughter, in renunciation?
There, got a frog in my throat. Excuse me!
Oh, he! He did respond to you in chat so
Oh, there he is! Oh, I see. You. Okay. Thanks. Thanks. I hope I got your name right I apologize.
Yeah.
If I did not. I tried my best
And he had asked a question earlier about Pearl, and I I don't know anybody in this group tonight has experience in Pearl, but next month most likely either December or January.
We're gonna have our speaker, Stephen Lombard.
Oh, and Stephen is the head of the pro Mongers group here in St.
Louis, a long time. Pearl expert, I think it's his favorite language, and I am betting.
If anybody has experience using Vs code on pearl.
I bet it's Steven, so look forward to coming probably next month.
Maybe January. And yeah, we'll ask even that question.
Get his opinion.
Good. Very good. Well, guys. Had a great time again. Thank you.
As I said, I'll be updating this to put a couple of more things in there and updated a bit, and I'll let Stan and Gary know and then you'll be able to download it on my site, or they'll link to it from the sloop side.
Please post it on discuss. When you hit, have that completed, I would appreciate
Okay. I can do that absolutely well. Thanks, for let me talk about it. I appreciate it
Oh, hey? Thank you very much for doing it like I said.
My brain hurts.
I know. Sorry, but alright, y'all have a good one
Thanks, Scott!
Everybody.
Thank you.
Impressive is all. Thank you. Thank you. Impressive as always.
Thank you. I appreciate that
Will be posting the the video recording of this on our archive
And let's see. Oh, coming up in January or December that talk by Stephen.
Lumber is likely to be on S. Trace and using S.
Trace to find a security problem, how you can use it to to trace the security problem
This is Stan. I recommend that we shut off the recording
Okay. Dokey. This is the Wednesday, November, the ninth, 2022 general.
Salute meeting our speakers tonight than Scott Brandman, on Vs code and Stan Reichert did the searching for applications as the basic tutorial on the front. Thank you.
Well.