Subtitles section Play video Print subtitles What I want to talk about today is how you can Become a super programmer like myself how you can write code like a real hacker using this one simple trick So I'm gonna start with telling two stories There's basically two stories of how I became a software programmer One of them was really cool. And the other one is true They're both kind of true I'm not I'm not just coming up with this um So I was about 13. I horribly broke my leg in a sporting accident because I was a very sporty youth as you can tell and You know, I just I didn't have anything to do I was like, you know, it was summer Everybody else was just like chasing ball chasing tail, you know, whatever they were doing. I was at home I didn't have any friends, but I had this one friend and the friend was called IRC But problem was that on IRC I didn't have any friends because nobody liked me So I figured if I would start a channel then people would come and you know They would have friends But the way to have an IRC channel and many of you are too young to remember this is you need a boss To keep the channel when you're you know offline So I started to make a boss and I didn't really know what programming was but I heard that you make BOTS in this programming language called Perl So it's like I learned that and that was pretty chill And then I wanted to share that with everybody because nobody came to my channel But I figured if I share this bot that maybe then we people will come So I made a website for it because you know that wasn't github back in the day so I learned HTML and CSS and eventually JavaScript and that's like a really cool story, but Because you know involves all the things like open source and you know being hacker and you know, like I don't know I don't know SSH into Linux be pcs, you know, it's all kind of cool stuff but in actuality I didn't do anything with that. I you know my leg healed. I went back to school. I went to university. I studied comparative literature philosophy major, whoo and You know that there's one side effect of studying comparative literature is that you're constantly broke You have absolutely no money. You have absolutely no skills that you can use to make money So so so, you know, you have no basically ignore no survival So I was mooching off this girl Who I was living with at the time and she was like you got to get a job So I went you know, and I I got a job in an office. I wore like a suit I got like a cheapest suit that you could And I went the and they give me this massive Excel spreadsheet and they said this is your job like, okay and For like about a day I tried, you know working with the Excel spreadsheet, but then I was like alright well, that's probably a way to like automate myself out of this job and and so I did I I basically I I learned how to write VBA macros which is the only language that is worse than Perl is VBA but but basically that worked and what I learned from that experience is two things one that Automating your tooling is like a fucking fantastic you know ability and then What I also learned is this concept of macros So I want to talk to you today about Visual Studio code how many people here know Visual Studio code everybody more or less? It's kind of like if you use sublime text or atom. It's basically like a text editor or slash IDE, but it's made by Microsoft And what's cool about vs. Code is similar to atom is that you can actually write x tensions for it So you can basically write your own tools and I've written some tools that have made me a lot better programmer and I'm gonna demonstrate To you today by doing some live coding for approximately many minutes Yeah, that's gonna be like this it's not gonna go well I'm this is like my fourth beer Alright let's do this so the first thing that you need to do in order to Can you see this cool the first thing you need to do in order to create a visual studio? Plug-in you say yo code. This is not a joke Yeah, there's this tool called yeoman generator and you can install generators for it in this case It's the code vs code generator and now if you know This is where you kind of decided. You want to be a real hacker If I was the kind of hacker that had actually like gone do with a kind of pearl and SSH and whatever route I would Choose JavaScript, but I'm the Microsoft guy. So I chose subscript We can get a give this thing a name It's gonna call AVS code hacker macros And I'm just gonna say yes to everything I don't know what that is then we're gonna pray that NPM install works cool And then what's gonna open vs code, all right do we see this I'll be bigger maybe Yep cool So I'm just gonna like quickly show what's here. So we have a package.json This is like an a standard type script nord project. We have some activation events We have some commands that we can you know use to Kind of you know give you know, basically start our program and then we have this photo extension - yes I've treated a little bit I made this buffers and storage files that we're gonna like store some of these macros in but they're not Very important and we don't need to really look at them right now But essentially to start kind of doing this, I think what real hackers do is first thing we use multi cursors I don't know if you know this you can do a command D and you can multi cares of course your selection like this and then you can just delete it because real hackers don't use comments so we can Delete those Real hackers. Also don't log anything so we can delete those. So that's fine. Now we have basically the simplest possible vyas code like, you know like extension that you can have So what I'm going to do is I want to write an extension Live right now that enables you to record macros that you can use to act like sort of automate your workflows So I think the first thing we're going to do is we're gonna just look modify this Thing this default one, we're gonna make it a recorder. I'm gonna implement this in a minute. Don't worry And then we're gonna copy that and make that a play and then we need one more This is kind of boring plumbing. When we need to over overwrite the type command in the standard thing and then what you need to Put those in the subscriptions, so we're gonna cleaning up the thing. It's we're not actually going to clean up anything There's the activate method you're supposed to do something here, but we're not gonna go to real hackers don't actually free resources. So That's one thing Now the next thing we're gonna do is going to implement this recorder real quick. It's relatively simple All related to do is we're going to need to create basically like your storage class And then we're gonna create We're gonna need to put that in disposable we can I need to put some some handlers It's pretty simple Let me just see if we can tune this up a little bit Bad on all right It's so this bit is a bit tricky where we need to basically we need to kind of like register some of that So and if you can see that but it's like Yeah, it's like boring plumbing. I think this is the thing about typescript It's like, you know, you need to write this all this bullshit code that you normally like wouldn't have to Anyway, so that's the way that works Anyway, I ran out of beer I'm gonna need somebody to help me Any volunteers, can I have them? Oh, no. No no Richard you you misunderstood me. Come here All right, Richard, is this mic on? Yes. Yeah, can you tell me what is your name? All right, Richard, I'm gonna go get a beer if you finish this program for me So it's very simple just implement like a replay class and you know the things just whatever you do Do not press backspace or Harrow keys because that will fuck everything up So, uh, yeah that was that was that Basically what this thing does Has anybody see this website called hacker typer? Yeah, so this is hacker typer, but you record your own own hacker typer kind of thing So what I'm actually doing here right now is implementing this thing And then we can just go into the debug mode. We can start debugging we can open a new instance of Visual Studio code And then within here we can We can basically just say record macro and then now I can say hello reactivate Ten, except ah, no not ten. I'm just gonna do X instead and I can save that macro I'm gonna give a name react want to call it one reactivate. So it sorts and then hopefully I should be able to oh It doesn't sort Cool so now I should be able to just play what I just recorded including things like selections and multi cursors and you know whatnot So this thing is called vs code hacker typer It is in the in the visual studio code extension marketplace. It's absolutely free. I don't know why they call it marketplace I don't think you can make any money on this But you know Microsoft's I guess at anyway so so this is what I made thank you So I have a couple of real quick things So V escort hacker typer is there you can use it But you might you know when I good why would anybody make something like this? But also mostly importantly, why would you want to use this? And I think I don't remember what my slides are. Okay so Why did I make this one of them is? One of them is that I've always really wanted to be like the one of the people who can do live coding But I just can't I'm like like really slow typer and it makes such typing mistakes and I get very very nervous but at the same time I would like to you know have you know this tool that I can use to actually like Communicate really really complex ideas to people and sometimes the best way to communicate about code is to show the code But you can't just show the massive amounts of code and all those things that Claire showed You know the tools that we can have in presentation that ITER's and things are great But the best way to understand code is be able to jump around it, you know, like look at things explain explain them I believe here I might have I already broke this I can't show you but you can go you can kind of like go and and mix things up and you know Like highlight things and then just keep continue typing and it kind of kind of works The other thing is I wanted to explore like and truly this story about Excel wasn't like hokey Kitsch it's it's really like where I started really programming and now that you know, like we have you know These tools that are automatable in the programming languages that we all know or obvious code type script or JavaScript What are they kind of see? Like, how can we do this and V escort accessibility is really really great What I I'm not a big fan of typescript as a programming language I like if you have a language that has the word type in it It should probably do type checking but it doesn't actually work like there's so many it's horrible so many broken things in it that doesn't actually You know like correctly. It's validate, you know the types of your code, but that said You know this experience of learning how a BS code accessibility works couldn't have been easier I did not read any documentation. All I went is like, okay Well, let's see what this automated generator gives me and explore the you know, the API via the auto completions and all that. So I thought that was like a really really great experience Now I'm gonna leave you with this Really topical we are ever there's another quote from ray tracing our friends a formidable homemade victory So we are basically a software consultancy that you know, that's a lot of open source stuff So a victory that Richard mention is something that we made Spectacle that Claire used I something that we made and a bunch of other things as well And you know, we are hiring. So if you want to work, you know on this kind of like cool oppressor space please do talk to us and the most important thing about this is why did I really make this is Recently formidable started to pay people for any open source contributions. They do on their free time, which means I got paid for this shit Which is, you know, pretty incredible, so That's it. Thank you very much
B1 hacker basically kind visual studio extension studio Writing Code like a Real Hacker (VS Code Macro Extension) 6 1 林宜悉 posted on 2020/03/28 More Share Save Report Video vocabulary