hacking VSCode - fun side projects that boost productivity - @jevakallio

[Music] so yo hey everyone uh welcome to another live streaming session today we will be discussing about hacking vs code creating extensions why extensions are playing a really important role on our productivity and how you can increase or boost your daily productivity by using vs code extensions in general uh today i have a special guest it's a it's a friend of mine his name is jani so hi annie thanks a lot for accepting the invitation and coming to this live show hey man good to see you like when did we last see each other it was like react day berlin 2019 or something yeah exactly it was before the pandemic situation or the kovid yeah yeah i remember all good times man it was like really nice to see you there uh i mean we we first met each other i think at reactive conf in 2015 or something like that it was like i i remember that i was staying with you outside like smoking a cigarette talking about you know back then i think you you're working for formidables uh and and i was using the victory charts yeah it was like really nice uh so i'm really happy to to have you here uh i'm really happy to see you again on this on this ecosystem because you went offline for a while now so so first let's why do you uh introduce yourself uh maybe talk about more about who you are what you do and all that good stuff yeah sure thing so um i don't really know because like you have like a fancy job at microsoft then like everybody in this industry always defines themselves via their like work like oh i work in netlify or work at gatsby or whatever and like i did that for a while i was a formidable and like it's high status you know you you kind of like you fly to conferences like react day berlin i bought a ticket that morning to fly to berlin just to see you guys like fly out um but like right now i'm just doing my own thing so i'm i'm i'm contracting for a couple of startups i'm building open source which we'll talk more about and i'm kind of working on some startup ideas and you know just taking this kind of pandemic moment to kind of like not just do the daily grind and just have some fun so i'm just me i build react stuff i build graphql stuff i build vs code stuff um and yeah i don't have any credentials beyond that just me and my you know fingers yeah that's that's really cool yeah i i saw your face like since the beginning uh especially in react and react native ecosystem uh you also have a really nice presence on twitter i'll say if you i kind of missed your juicy tweets uh i i remember that i get i i had this joke also on the stage on react day berlin uh uh talking about the micro interaction and always liking the tweets that yani ian is posting so he's like uh yeah it's i'm really blessed to have you he's like thank you so much it's like and thank you for everything that you did uh for react and react native ecosystem in javascript in general because you also gave uh tons of good talks uh around developers and all that good stuff man you're talking about me like i'm dead or something or dying oh yeah thank you for everything that you did my man i'm still here you know goat goat cool so yeah yeah so whoever like you you've built a couple of vs code extensions in the past uh i remember um hacker typer uh why don't you just give us like a round of introduction about the previous extensions that you've built why do you think those are like nice or how how they can uh improve uh shall i shall i share the screen or just yeah yeah yeah let's do that let me just click around a little bit and uh show you show you some stuff i've done okay i'll just move this cool sweet yeah so i mean like basically i've done a lot of different open source projects and i want to talk more about like beyond vs code as well like dev tooling and all that but for now uh my first vs code extension i built is this thing called vs code hacker typer and it's like it's basically a joke as an open source library like if you know the website hacker typer where you just mash the keyboard like crazy and then code comes out i built that for vs code except that like you can put in the code that it will type so like it will look like you're like a super fast super accurate typer and i built it because i wanted to do some live code presentations at conferences but i'm like absolute the worst at live coding like i make so many typos and whatnot so i built this um and i gave this talk um about it um and it was like completely unprepared it was my friend ellie's meetup the slides are made with spectacle in like two minutes and it's got like almost 400 000 views now and it's the thing that i regret the most in the world is like 400 000 people think that i'm this drunk guy with bad slides on the internet anyway but that's just like a fun um little thing that i built um but the next thing is is what i'm actually kind of excited about um i built something called foam um and foam is essentially if you've ever used like rome or any kind of like network note-taking tools um they're essentially a way of kind of like visualizing your notes and you're sort of like thinking as a kind of graph and then like creating more sort of like relationships between ideas in your head and like i spent all my day in vs code anyway and i didn't want to like have like somebody's half-assed web browser-based text editor i wanted to have like full on vs code text editor so i built this thing and i can show this later how this how this actually works and whatnot but this is actually like it's gotten some real traction like the initial version of this that i built it was 80 lines of code eight zero um it was the most minimal thing that you could do and i put it out there it took me about a week to write those and it didn't take me a week to write the 80 lines of code it took me a week to write the documentation so i built this doc site which itself is a foam repo so the whole idea of foam is that when you write notes and mark down on your own computer um not only do you get to have your knowledge craft but you also get to share your knowledge graph with everyone so i put this out weeks work you know just fart out there and it became this massive thing and like you know venture capitalists started knocking on my door going like would you like to build this into a business and i was like no i'm gonna do some open source um so yeah this is kind of like you know my favorite thing that i've built for vs code and we can look at this later but then i guess you know one thing you kind of wanted to also touch on today is the latest thing that i built which is this thing called live frame um and i don't know do we want to just jump into this and like look at it and see what it is and then maybe you can ask me questions and all that good stuff yeah before jumping into this definitely we will go uh deeper into this life frame uh extension i i would like to ask you why why vs code in the first place why why this code that's a really great question and i think it comes down to like my personal path to programming and also my uh extremely short attention span so like when you start like building a project um you go like okay so so what is the first requirement of a project to add any value to people it needs to exist and you need to be able to ship it now my brain is not really good at like working at something like for years on end you know making something perfect and like building a real project like a sas product or or a framework it takes a lot of time and effort to actually get it good but what vs code has is an environment in which you know your users already exist probably like i don't know something carries like 10 million people use it every day and all the building blocks are there so all you need to figure out is like what workflow issues people might be having whether it's note-taking or or live coding as i'm gonna show next um and like you know just just plug into that it's so easy um so that's one thing and then the second thing is i came to programming via uh vba macros so i i don't know if you know this but like there's this product called microsoft excel it's kind of like the desktop version of google sheets um and uh and there you could write these macros which are essentially just like ways for your automating your workflow and i love that because excel itself is like a ui you get 65 000 whatever at the time it was 65 000 rows of or columns of cells and those cells can form a ui you can put inputs you can put you know calculations you can do whatever but you don't need to build the infrastructure for deploying and running your app um and that's the same thing for vs code it's like a canvas for you to just like put in the minimal amount of things to create value rather than build the infrastructure for for getting people to use it in the first place wow that that's really good and i i remember my my uh the previous company where i was i used to work the team lead back then it was kidding uh it's the creator of fria cosmos if you heard about it it's like story uh story blog but anyhow so he was mentioning hey i just built the logger in uh excel and i've built this tiny script that's taking some data from whatever and everything it's in excel i don't have to maintain any back end or any sort of things and it was like insanely good so yeah i actually started with i think it was dreamweaver back then uh and after that i moved to notepad plus plus so but vs code is like really good uh atom was also good but vs code is on a different level uh so before before jumping the live frame you mentioned that hell no i'll go open source so why why why do you think open source is a good thing to do oh my god um so so for one thing i don't think people should be working for free if they can make money and they need to make money i think open source is also a massive bracket that essentially ex like exploits the labor of you know passionate people uh for for you know business gain so i'm not saying open source is a thing that you should do instead of starting a business or making money but for me like i'm just not really good at the kind of long you know working really hard and one problem for a long time and like i was almost i was this close to like taking a few million from like a vc firm and like building it out as like a service and then i visualized my next five years and go like do i actually want to spend the rest of my 30s you know like married to this one product and like you know the money and the team and all that stress and and for me personally the calculations didn't add up i'd rather do a bit of contracting on the side to make the ends meet and uh you know hack on something fun when i can um but sorry why open source is good um because here's the thing right like like open source has almost become like in this industry where like either you're established like me or like you're becoming very strongly established like you don't need to worry about jobs you you get jobs but on the on the you know sort of like a entrance and end of the industry you have all these people who are learning to code you know they want to sort of like get you know either their foot in the door or get promotions get recognition and like open sources almost become like this this vehicle or this requirement necessity that you need to have a big github profile with like green you know bathroom tile wall in order for you to do that seriously and like that is the absolute worst incentive to do anything um like people ask me is like oh how do you come up with ideas for open source projects and like that's the entirely the wrong question to ask like an open source project is such a just a product and what a product needs to do is it solves somebody's problem so go build some software um when you find a problem see if there's a solution for it if that solution work don't replicate it don't go build something new just use it and merely move along your day building software and then when you find the problem that doesn't yet have a solution now you have uh something that has like potential for for you know improving the programmer ecosystem but also like actually being successful and getting you the kind of recognition that you you crave so open source absolutely is a thing that will help you on your career but like just doing it for the content or doing it for the cv is like the you know the worst yeah it's i i i'll just recommend the same because i i started using for example react native since the beginning i also had access to that private repository that everyone is talking about but everything that i've built i built it openly open because first i i was learning uh that's why i also created the learning by doing series just for me to learn but also to give to others right and i kept improving it but i didn't do it in the first place just to have a cv or to to make a name uh somehow just just because i wanted to share my knowledge with others but definitely nowadays i can see that everyone is referring to my previous work out of sudden i don't know i i'm not pushing uh to it but yeah totally is like open source is really good and yeah thanks for adding some some phrases around that so let's let's build the let's let's talk about this live uh life frame extension uh what it is what's all about what do you think it's good right okay so i mean i was so the story of this is that i didn't want to build this i was actually working on a new different vs code extension um and i needed it to you know like as i as i'm working on the vs code like the extension code i wanted to see what i'm working on like live inside vs code because you know otherwise there's the whole problem of with vs code development which i can show later is that you need to always like stop the extension host process restart it you know like go open open up your screen like it's like a really broken feedback loop you know sort of in most cases um so what i wanted to do is just have like for my vs code extension which is essentially just a web view with a web app in it have live hot reloading thing in it um but vs code makes it kind of difficult because there's all kinds of security requirements around you know like you can't just load assets from the internet you need to like make an asset manifest that um you know contains all the things that you can ship so it wasn't easy and then i came up with this hack and then as soon as i put in the hack and it started working i was like holy like i shouldn't be building the extension i should i thought i was building i should just build this because this is so applicable for like everyday developers life um and what it is is essentially a very simple thing that allows you to run your uh web app any web app any framework any library any stack inside vs code using this one clever hack which i came up with which is uh embarrassingly stupid and i'll show it to you in a minute um so this is what it is um and i could maybe demonstrate really quickly like how to use it what it is and like what problem it it solves if that's okay with you yeah sure sure the scene it's yours just just go ahead and do whatever you think it's nice yeah so i've already kind of prepared here i've um i've you know opened vs code there's nothing you know nothing open here um it's gonna prove to you that all of this is sort of you know we don't need to do any magic here um so just make a new thing and i'm going to um create a new web app in this case i'm going to use bytes which is you know this new sort of build tool from avenue the the view creator um and it's using es build underneath which is just super fast so i just like it um so we can use it for like view or react or pre-act or even web components but i'm going to do typescript react for now um and then what did i call it call it this and then i'll need to install the dependencies in it um and this is you know this is not something you need to do this is just me you know creating a random um web project um and now we have this app running so if i go to this website we see that a react app is indeed running by a byte uh and now i want to make modifications to this so i'm gonna go vs code i'm gonna open the am i even in the right directory here i'm not sorry folks um there we go so now if i want to make modifications to this um you know i can i can change anything about this app so if i go to my source and my app tsx and let's say i say hello uh catalin and now i need to go back to this browser and like wait for it to reload and the reason it's not reloading is because i just killed my uh uh guilt my terminal devices when i uh opened that so sorry about that um this is what it means i suck at live coding it's like i just realized man yeah so when we have this thing running and now the thing will live reload so i have hello catalin and then i say and friends and i save and it like you know it updates and that's really great but like it's really annoying to have to jump between these windows like you just said you don't have an external monitor where you are i don't often have an external monitor where i am so then you get to this like point where you're like you know so like dragging windows and like doing all kinds of like you know funky stuff to you know make your dev workflow work um so i thought like why not just given that we have this like you know web-based interface here um why not just build it inside here so i have this live frame thing um and the first time you open it it really just tells you that you need to tell it where your web app is running because it works with any web app and you know different dev setups webpack what not have different ports and and so forth so it's going to create this suggested configuration and i'm going to edit my workspace settings put that in there and boom now we have the um web app running live inside our editor so anything that we do here will automatically update in inside vs code um and my favorite thing is to do with these settings is to also just say editor um oh is it auto save no what is it called the files auto save after delay and say um auto save delay to for example i don't know something creates like 20 milliseconds and then you really get a live you know refresh where you can just actually you know work on your app and see it you know exactly live as you're editing it you don't need to save or nothing so that's kind of like what i built and it took me about like three hours to build it and i've been using it every day for the last week since i built it um and like i don't care if anybody else uses it i've made my life a lot better with three hours worth of you know work and i hope other people enjoy it but that's not why i did it yeah it's it's i remember that we we uh previously at hootsuite in bucharest where i used to work uh we we had this idea of building a webview but also like a frame for running tests so everything should happen inside vs code without you leaving the the window and and this one is like the uh the first step in that direction and i think that it's going to if you'll have another split view underneath with we test that will be like incredible because yeah well that's the cool thing like in this project i don't have any kind of like web-based test runner running right now but if you had like a storybook for example in this project then you just put the storybook port in here and then if you have something running at that port it will load here so you don't even need a separate extension for it you just need to configure it to run a different web app wow that's great yeah so it could you like uh walk us through maybe the code you you're mentioning about the heck that you did uh maybe it is going to be like really uh like uh open or maybe it will open the eyes of other developers and they will hopefully create something yeah let's do that so let me just open the actual extension code which is um so basically um well actually before we even do that let's just i wasn't thinking like should we just show how to actually create a new vs code extension to begin with yeah that that will actually work out uh yeah yeah i think it's better yet i'm not gonna actually live code it but i'll just show you how it how it kind of works right so yeah just just give us here the picture thing so um so if we we're in we don't need to be in vs code for this part by the way like you can be um anywhere so i'll just say um you can say npx so run any npm global module yo is the yeoman generator um and then you just tell them yo code that's all you have to tell it um and now what this does is that npx runs yeoman yeoman runs the code template and then this one will ask you a bunch of uncomfortable questions about your life such as are you more of a typescript person or a javascript person um and the correct answer not in life but in vs code development is definitely typescript because then that way you get the auto completions for all the api so you don't ever need to read the documentation because you can just explore the the intellisense and whatnot um so what's the name of the extension say catalin's first extension i don't know have you built one before not really no yeah so i've said a bunch of like yes um stuff there and it will run an npm install should have picked yarn so it would be faster i don't still understand why npm is so slow after all these years um i think v7 is going to be faster although yeah i would hope so and then if we now look at this extension code um i can't have another one project here we go catalyst first extension then a vs code extension is essentially just a couple of things it's a single file that um exposes this activate method and then inside this activate method you can register different kinds of commands and then those connections sorry sorry just just one sec if you can just uh uh increase the font size i think yeah yeah cool a vs code boilerplate let me actually just remove all these comments because you know we don't really read comments or programmers um so like this is the boilerplate for foreign foreign extension it's um you know you get this activate method inside you can register any amount of commands commands are things that become available in the command palette so you can say for example open whiteframe or whatnot and then here you can interface with any vs code apis you can create new ui panes you can create new syntax highlighting you can um you know there's like the sky's the limit of what you can actually do with it but this is kind of like the basic uh structure of a of a vs code extension um and so all i have to do for this and this is uh the most ridiculous part of this whole thing is inside here i create a new web view panel um and then i give that webview panels on html and then that's it everything else here um this bit is just me reading the configuration from configuration so we could for the purposes of this deleted and this is updating it when it changes so it's uh this much code to create the whole extension that i know created um now you're gonna ask what there must be something really genius in this um in this host a render host that you do like you you must be some kind of genius level programmer and you must be doing some kind of you know like magic here uh but no it's literally just an iframe it i realized that vs code extension does not allow you to load a remote website but it does allow you to put an iframe on your local html website and then you know do whatever you want there so wait wait wait wait because this is kind of like inception style because it's in seconds so exploration yeah yeah so okay check this out so we are running a vs code which is an electron app so it runs a v8 chrome like but not chrome process inside we create a webview which is an electron webview which is kind of like a v8 style like v8 based but like not a full-on you know sort of uh chrome process inside it we put an iframe and inside you like run your web app which has some kind of hot reloading you know that talk to the server and like at no point here are we actually writing any code that knows anything about your application other than the url where it lives wow so it's basically an iframe inside an iframe right of yeah it's an iframe inside a webview inside uh electron app uh yeah and i'm sure that native mac developer is really angry right now like you can't do that it's like yeah we just did yeah it's working it's like have you tasted it now have you yeah it's okay yeah as long as it's working and and this render render host it's uh i cannot see the like but the render host is something built in no render host is just oh okay yeah a string of html yeah so this could really just be like give me some dumbass html that's you know that's all it does exactly cool that yeah now now it kind of makes sense and the placeholder is just the configuration maybe you you're going to like inject there the configuration needed right for yeah yeah yeah so this just shows the instructions on how to configure it um this is the example config so this was the screen that you saw when you go open live frame and you see this screen yeah yeah yeah because because i thought in the first place that you're actually looking for open ports and based on them you're going to populate what what local host and the port number should be uh but it's just a hardcoded string kind of makes sense right yeah i mean like you know i could also just like ping like your your typical port see where i get an html response and then put it here but that would have been way too much effort for my sunday like you know i'm not going to like that many lines of code for this so anyway um this is you know just like a fun thing but i think this illustrates like the point that i was trying to get to earlier which is like the first requirement for a tool to create value to somebody that needs to exist and the thing that you know like people have lives of course with coal with less lives but you know that you know it's now like families and obligations and whatnot so like you know visualizing yourself as being like an evan you or like you know a rich harris or or one of these people who is just like diligently working on like the next rocket engine it's like it's great but you're never gonna i mean hopefully you will do it but like likelihood is that you're never gonna do it now this if i may say uh you will do because you know it's easier to do it than to think about it um and that that's kind of why i want to have more people in open source to have this like this ethos of like shipping product rather than tinkering on some kind of clever like algorithm because like yeah we need both people but we need more product right now that we need like more people trying to solve the same problem yeah it totally makes sense so yeah i don't know if you can like if if you have any any other things to to present or walk us through i don't know what yeah um well i don't know i i don't really have anything to sell you right now um but i'm happy to uh happy to talk about um anything you want what what interests you do you want to hear more about foam or should we talk about you know just general abstract stuff or what's what's your speed yeah i'm i'm i'm i'm really interested also in foam uh i i saw it i have never used it uh but maybe you can you can give us yeah yeah absolutely so so form is something that i i built um last summer um and you know this is the project that started with 80 lines of code and has now become more of a like a thing i i think the community discord i saw on the github i think they have like a badge that says like 200 um sorry where do i even find a thing yeah i don't even know how to find my own project anymore um so i think it has something like yeah 200 people online at the discord chat um 63 contributors currently it's like a big ass mono repo with lots of different you know code and functionality um and this is something that i also like to do before i get to what exactly it is that like for the longest time i had this guilt of like creating open source and then not like really maintaining it um i i see all these people you have your you know your jamie kyles or your set mckenzie's whatever create these big massive projects and then you know sort of like you know really work hard you know with the community and whatnot um and like i just really struggled with that whole kind of commitment bit so i i've just you know like really landed on this like definition of myself as a creator and then if something is sticky enough for people to actually continue to use it then you know they will continue to maintain it and if they don't continue to maintain it then nothing's lost because it didn't have enough like product market fit anyway right so foam is something i'm not very actively involved in anymore but it's a very cool thing that i use on a daily basis so um we were earlier in vs code um let me bring that back up um and i think i have a couple of instances this office let me go to this this one um and if i again load a new vs code instance i have for example the foam dock side is here at home docs i open this and suddenly we see a very different kind of environment open up so if we're still in vs code we're still doing exactly the same things as we were before um but in now instead of being in the world of code we're in the world of um world of markdown so um this is a documentation repo for foam but you could use this for your personal notes your team notes your shared collaboration surface um and you know markdown is great for writing and then because markdown preview already exists and i didn't need to build that either we can also render it here and uh you know inside vs code but the one thing that was really missing from this is um the ability to really like explore you know sort of like your your your thoughts um in a way that some of the other power tools like rom research gives you so i figured why not just build that so there's a few different features that foam has but i think the best way to understand all of them is via like this this graph idea so when you're um you know you have a whole bunch of marks down in directory and one file links to another file um you can easily see that that's a directed graph and you can render it here um you know in in whatever shape form you know you have but when you start thinking about ideas you realize the ideas don't actually only connect in one way like when you link from a hypertext document like markdown file or html file to a different website you're creating a link but realistically you're creating a two-way direction between these ideas in your head um and sometimes you don't realize it sometimes you don't actually think about like you know if if a follows if b follows a then therefore maybe you know has some implications for a i'm getting very abstract here but the basic idea is that like foam has the ability to give you kind of like backlinking support for um for for vs code so for every markdown document inside of repo we generated this um list of like other documents that list link to it and then that way we can essentially like view of our thoughts our our our notes our research whatever as a kind of like two bi-directional graph and like that way really sort of get like i don't know all the benefits of like the way your brain models data but inside your power tool which is which is vs code um and like this is the bit that i built initially um just generating this set of link references so we gotta buy a bi-directional thing going 80 lines of code had about 80 bucks in it uh which is a pretty standard rate for me i think one one buck to line of code is pretty average uh and but what other people had already built with stuff like this phone graph right now i think this might actually be coming from foam i think it's been inlined into the project but like initially there was just this polish guy um thomas who had written this extension already so when i added the bi-directional linking to it then this stuff just worked and and this is what i mean by like the vs code being such an incredible opportunity to create a lot of value with little is that because it already integrates with everything else everybody is doing um markdown in this case is just an interoperability surface for different extensions to play on the same document um and vs code is an interoperability surface for different code to coexist in the same screen but like we did very little i did very little for this and now of course the project has grown massive it has all kinds of cool things you can explore for example tags around your you know your your your repo to find out like where are where are you referencing similar ideas um there's all kinds of cool tooling in here uh but i'm not here to pitch for i'm just saying that like this is just an example again of like how small contributions um that you put out there are more powerful than me looking at this and seeing like oh how do i build all of this functionality before i release it um that that's looking really good and i i was thinking about so you you're going to write something right how am i going to publish it or do do you have something built in or do i need to export all the pages and everything no so because it's just markdown right then you know you we have like a different level of of tooling um so for example for this github repo which is the doctory pro um i i know i think most people know this but for any github repo you can actually generate a doc site so you just go to the settings of the repo um and you say um can't remember where anybody is here there's a github pages link right and you just say oh from master branch of docs please publish a website for me with this theme and auto open source project use this kind of easy way to get docs in um but we're using it as a way of like publishing your own documentation so when you so i for example have the secret repo that is not uh public at all it's called notes and you know i hope that i don't show you anything embarrassing here but this is a private repo that i keep just for myself all of my own notes um but then i also publish from this so if i go to uh java callio github.io slash notes um then there's a few selected pieces that are published here um you know from directly from my phone chart so these aren't like different pages or whatever i've just created an index page that links to these and okay currently i'm relying on on my version of this i'm relying on security by obscurity so if you do happen to know a name of the document inside this repo you can actually type it here and get to it but i think the phone project uh the latest version already has like a way of not publishing private documents um i just haven't upgraded the latest version of my own project because that's how i like to roll um this this looks really good yeah i i i heard about mdx for example which is really good for markdown pages that you can export them and that's absolutely true so the basically um you know form um if i look at mdx preview here um and open preview for this particular page then um i don't have any mdx react components in this repo but i can just write um you know react code here so these aren't actually this is an html it doesn't say uh hello so if i do react things like class name you know that'll actually well we don't have a class named red but we could do style then give it color red um so we can write react code inside a markdown document and now like this stuff would actually break on github pages because github page doesn't know mdx but because it is just markdown then you can use neck.js or or gatsby or any other tool that um that understands mdx out of the box and then you can actually add rich components here so let's say um you wanted to somewhere here drop like a twitter link all you need to do is like make a component um in your own repo that is called twitter and then you say id and you know the the id of the tweet and then your mbx site will render embedded tweets in here so it works as a kind of rich publishing platform without any kind of additional um fancy tooling wow cool we we have a question so do you know if it's possible to use this iframe hack to build an extension that loads for example a full external hosted application and if this approach will have some limitations yes really good question let me show you um what the limitations are so if i uh how many how many of these processes do i have open right now this is crazy vs code on top of escort and vs code let me close all of these up and actually just so i don't confuse myself of um where are we now uh where were we i was in open and then i was in catalin right yeah there i created inside bike project decorated okay so if i do open uh live frame oh it wasn't here anyway i will create this again sorry um right so if i now have this here we go okay so i now have this and i you know i don't have anything running here because my dev server isn't running so let's say if i can do for example https um [Music] co dot news.bbc.co.uk um for some reason that doesn't seem to work i don't know why that is let's try to finish newspaper um hs on maybe there we go so now i have the hs the helsing and sonoma newspaper running inside here so let's say that you were using jira or you were using like linear or one of those issue trackers and you wanted to have it here it would work but a lot of websites actually set headers um specifically content content security policies and x frame options uh to prevent themselves from being loaded in um in an iframe because for security you don't want somebody to create a fake twitter website load fullscreen twitter in it and then capture your clicks or or whatnot um so it's only irresponsible people like the main newspaper of finland who clearly doesn't know how to uh web program um and and if you think that that's cruel and if you think that i'm punching down to people it's my former consulting company futurist that built i think this website so i think i i probably own uh part of the responsibility uh here um but anywho um so so yeah so so this is the limitation you can load any web content in here as long as you can render it in an iframe um okay uh and and i actually have a follow-up question uh can can you open up multiple live frames like for example i would i i'm let's let's let's assume that i'm on a huge uh monitor and i'd like to uh write some code uh like uh for small devices also for big ones let's say i'm using tailwind and i like to also target mobile plus desktop sizes is it possible i mean it would be absolutely trivially possible to do that the only limitation is that i've currently exposed only a single url as the parameter so there isn't an easy way for you to configure this in a way that you get a single vs code is like window with multiple urls and i did that as an intentional thing because i figured like if you're gonna do multiple windows then you might as well just open multiple browser windows um you know so so i took the simplistic approach full well knowing that it's going to limit that use case but if you want to fork this extension or if you want to contribute a pr that like adds a uh live frame um i don't know name like this is the way i was gonna do it i was gonna do like others or something and then you could give them names so instead of saying open live frame you could say open live frame and then it would give you a menu of all the name projects um then you could do it there's no limitation to it i just didn't support it cool let's take a look at this guy now who other doesn't uh who doesn't all right let's find some you know i don't know do you know any uh good websites what's your website uh batman.codes yeah just bunch of links that's it no but you know like apparently you don't care about the security and safety of your users enough to prevent this from loading in an iframe i'm just curious can you can you type their javascript.xyz like the website uh i think that you can you can press on it directly right right just going to follow up i think that you you could just press directly oh yeah so this one is kind of yeah nice yeah because he this one is also responsive so that's why i was asking in the first place because if you i i'm not sure maybe kitse have built this really nice sizzle i think it's colors uh it's a tool that basically you have multiple uh devices kind of for testing purposes and you can write once and test everywhere this this could be the same approach right where you have different windows like a window with i don't know 300 pixels another one with 600 pixels and basically you are going to test it out the breakpoints or the uh so yeah this one is going to break sorry uh yeah you cannot go more than you i guess like i would ask them is like does it make sense to do it in a vs code anymore like you know if you open a couple of these you can have very little space to see your code um you could do it absolutely and by the way like all i'm like saying is that like i made this choice uh last weekend when i just gonna be bothered to you know add another configuration key that doesn't mean that you can't build it yourself or contribute to this extension one more thing so in on my on on my channel i have never uh went uh across react native so everything gets react native uh but i'll i'll start doing like next js uh maybe 3gs uh reactory fiber and stuff like that so web related um and and a use case for this i'll definitely be using live frame because it's it's pretty hard to just as you said in the first place to just uh see the vs code maybe the the browser and stuff like that so he's like uh i don't know uh having everything on the same place is really good the only the only downside which i see for the moment is the url so for example if i'm using next.js and i have uh i have the routing system in place and i like to navigate to a particular page how can i go back it's like how can i see the url that's not the only that's a really good question so um there is this other extension uh called vs code browser preview which is a bit more involved um it actually loads a full so so what it does is that it runs chrome headless but then in a graphical mode and embeds that into this um screen and then you get a more full-fledged browser view um the reason i rebuild this in a simpler way is that this keeps crashing my vs code because i don't know i guess it doesn't like the chrome process virtualization somehow um so i couldn't use it and it's also like very heavyweight solution but like i think you might actually look into this when it comes to like the url thing um and the other alternative is that you know this host app right which i do i still have it open here um no of course i don't um so i mean the host app like you saw the index html file right like you could just make a you could make a browser like chrome toolbar in it you know that displays above the content and then when um you know when you type into it then it will update the iframe content so absolutely you can you can do that just uh more code than my seven lines yeah this project looks really good i mean for for just having something up and running immediately without you uh command tabbing or all tabbing through through your windows is like yeah it's it's it's really good it's really good i would also imagine for somebody like a live streamer like yourself like if you want to be hacking on some like 3js model for example then like having it just running in there and then also set the auto save on vs code on so that like you're literally just typing and the thing keeps morphing i think that could like you know blow some minds yeah i i actually thought about having the ios simulator uh but uh it is going to be tough i think it's i'm not going to say if that that will be impossible but it's going to be a tough job to do because i usually have this issue like i'm running into this problem right now i'm in romania so i don't i have just a 16 inches macbook but it's pretty small and i cannot just move the the the panes around uh but yeah that will be really helpful to have the ps code maybe just a small portion of the ios simulator and then i don't know something else or just having everything going on on a single on a single frame it's powerful yeah i i find like for the ios simulator you probably have better bang for your buck just like resizing your window a little bit and showing it there um i i think like trying to virtualize it in a web technology inside uh electron app is probably going to be more effort uh then you gotta get out of it um and that's that's you know like i find myself doing that as well i build things that don't need to exist and now i'm just trying to build things that need to exist because i feel the need personally and i have no solution for it so yeah so i don't know i hope that others will build uh fun vs code extensions that's it i think uh it's how much we have i think we're almost out of time right uh yeah yeah i mean you know i i think there's only so much that people can listen to us talk about vs code extensions without just getting better use of their time or just going and building it themselves so maybe uh you know that's what we should do in a minute is like let people go and uh you know build some i just before before closing up this where can people find you uh find your like maybe process maybe you'll give us more extensions in the future where people can find you and see what are you working on yeah um i think the best place probably to um to track me down is on on twitter um i've actually you know i used to be addicted to browsing twitter but now i'm almost rights only so i don't really read it as much as i used to but i do post um quite a lot of sort of quote-unquote content um like you said you know it's a mixture of uh of you know new project releases and just absolute posting um like there was a tweet that just i found like i was just like eating breakfast and i was looking at this gross ass um clang um you know stack trace for like not building some kind of grpc uh library so i figured like well why don't we have like developer instagram where we just like take our stupid errors and like make them you know more palatable for for people um and my like if i don't solve the bug today i will just take this photo and open it as an issue on the grpc repo and go like yeah i have this problem and see what happens um the breakfast looks amazing by the way thanks man um and so okay so i am you know of course magnificently interesting to follow but i think i wanted to also um just share a couple of other things which um you know some of the stuff that i've spoken about is actually you know from um so i recommend two books and i know who reads books right but you can also get them as kindle books or audiobooks or whatever so um figure it out so the first one is um this book uh called working in public by nadia eggball um it's an incredible book it's like an oral history of open source in the kind of like going all the way from like the stallman raymond wars of like you know like what should open source really be and then like interviewing people who you i guarantee you will know like it's it's so crazy to be reading a book and going i know that guy oh yeah i use code written by that you know you know that girl and like it has this like you know sort of like a feel of like your own lived history if you're in the open source ecosystem at all but then it also gives this like really brilliant classification of like different types of open source projects and contributions and it's really helped me to kind of understand like my place in the kind of like the great production of industry of open source so working in public um by nadia highly recommend it um and then another book which is a little bit more abstract um but has been very influential for me is is this book called uh where good ideas come from um it has two different versions top levels one of them is called the natural history of innovation and the other one is called some like seven good ideas or i can't remember what it is uh but this is the newer edition um and it's basically an exploration of like like what actually is innovation in companies like apple or companies you know or like creative sort of industries and like how do we actually create sort of environment and personal thinking habits that help us i don't know like be more creative so so for example one of the ideas here you know the the what i've been talking about is you know building for vs code is great because your users are already there and it's an interoperability surface for other things and you know markdown adds like this sort of like thing that spans not only vs code but all the way to the web and and everything and that's just one chapter in this book it's called platforms and there's like six other chapters with you know similar kind of like great ideas so i would recommend this book as well well cool i'll maybe i'll link them after after this live streaming right i'll link them in the description yeah so people can go go ahead and follow them up and uh one more thing if you haven't yet gotten enough of my uh so this talk which i say i'm ashamed of i'm not really ashamed of i'm four beers drunk and uh and the slice looks like dog um but it's like a comedy life coding talk um called writing code like real hacker and i think it'd be funny so you can find it on uh on the free code camp channel in uh in youtube cool thank you so much yani for i'll switch only for us too now uh thank you so much for first first of all accepting this uh this invitation uh second of all i i haven't seen you for a while so i'm also really excited to have you like uh face to face and discuss just a little bit because we couldn't travel uh so yeah but i think that after react day berlin we had to met at abgas i think you had some issues with the traveling thing or something like that in poland uh eventually this this conference didn't take place because of the covet situation but hopefully we i i'm really i was like when you say that oh yeah man let's let's do a live streaming session i was like really exciting uh really excited hopefully everyone else from this channel will be uh because as i said is like everything on my channel is related to react native but i i just wanna uh i just wanna go uh beyond that and and other things because yeah if it's fun it's really good uh if it's good for your health mental health and i don't know do some fun projects outside of your regular schedule it's always good so thank you so much jenny for no no thank you for inviting me it's been such a pleasure to see you and like i remember your micro interactions talk from uh from react day berlin and like the way that you know like you know your streams and you know sort of like everything that you do right now i can see like you know the connection from those thoughts like years ago and just like the evolution of a body of work like you and i one thing that i think i first started to follow you for was your work on um on like coordinated animations in vs code or like shared element transitions and like i was really into that for a while um and so like you've been just like killing it in like teaching people how to build react native apps that actually look and feel good so i think like you know you're doing incredible service for not only the react native community but like the app user community outside of the whole technology thing so you know thanks so much for all your work and thanks for having me thank you so much jenny thanks thanks a lot i'm still in the learning process uh like improving my english for example improving my way of communicating or teaching is something but yeah i'll fail completely fail uh but this is the way to succeed you know eventually but and also by the way the the internet like even though it's you know our internet that we experience is largely english language but like we shouldn't all sound like some kind of california douchebag you know kind of thing like i think having sort of like a regional accent and being part of it and like really presenting from the point of view that that that you know you have in life i think that's exactly what we need more of um so you know don't don't think that you know like improving your english is higher on your priorities you're perfect already i was just saying just because i don't know but i'll continue doing it anyhow so it's just because every day i'm i'm just thinking how can i can i deliver value how can i deliver value because i know how to build things right but the main idea is how can i uh be good at delivering the value to others so they they will start building things so lately i i saw lots of tweets uh c seeing me saying thank you miran catalin for helping me out and i i'm just sharing the knowledge i don't know if you if we are on the same track yeah i i i'm i'm i don't know otherwise i'll just die like die i don't know it's i cannot survive i was thinking about that the other day like i had that one of those moments where like i'm very happy with what i'm doing right but i saw one of my peers like somebody who i used to work with getting a lot of recognition for the help that they do in community like somebody was exactly thanking them and i was like oh why aren't people thanking me for all the help i do in the community and then i realized i'm not helping anyone uh so i think that's like that come on man is like i i think yeah it's can for example can you feel for example it is like now and uh i mean so many good tools uh i'm not sure if anyone is aware of them but spectacle uh victory charts oracle it's like no man it's uh it's incredible it's it's like this is uh you you'll always have uh the recognition anyhow if you're still actively working on them or not yeah it's like i guess the point i'm trying to make is like i feel like i get more than appropriate recognition for the work like if i spend three hours making a vs code extension and then you talk to me about it for an hour i think that's an appropriate level of recognition like i don't really deserve much more but we always crave what other people have and like if somebody gets a compliment for being helpful then that doesn't mean that that's what i should be chasing for like yeah hopefully the things that i do help but i'm not particularly helpful hopefully the things that i do are useful but i'm not out there you know like bending my back trying to get you to you know sort of solving your problem today i'm just building tools and hoping that you know in the grand scheme of things they'll have some kind of impact so i guess like the lesson that i learned from that that like things of jealousy it's like stop playing other people's games and just play your own game i think you know yeah exactly yeah i i used to have this imposter syndrome but nowadays it's like everything is gone because it was like blocking me every time whenever i was trying to do something so yeah i'm not ashamed or uh i'm i may be shy on on the camera but nowadays it's like i i just want to build things and and just share the knowledge because otherwise i'll die alone and no i no one will know why why why catalin died so the reason why while dice i'll i'll be dead at some point is because i couldn't deliver everything that i have in my head so it's it's it's a thing that i i'm thinking about on a daily basis so i have so many projects to to to share but i don't have time to record them for example that's why for me uh live streaming it's it's a way to to share faster uh and and i don't know uh it's maybe hard to follow up uh follow up uh follow it but it's it's yeah yeah it's i mean i i know that you're trying to you know close this stream so we can we can close it in a minute but like i think you make a really good point is like i'm only now starting to appreciate live streaming as a consumer like actually starting to watch other people's people stream because first i was like why would i watch them you know ramble like i'd rather just them spend you know 10 hours making something that i can read in five minutes and like not waste my time but i think there's just you know something wrong in the process of like like somebody i hope watch this live stream and like some senses that i said that i didn't even focus on gave them a new idea that i would have never ended up in the final product of me trying to whittle this down into a tweet or like you know a blog post so yeah the signal and noise ratio is questionable but are you optimizing for your time like are you really watching us right now or are you second screening us while doing something else like like the whole idea of like consuming content is just changing faster than me as an old person can really like keep up with it uh and i like this live streaming thing is actually really cool i i hated it a year ago but now i'm i'm all for it yeah i saw you i saw you while you're trying to do some live coding sessions oh my god yeah html css oh my god i was just laughing i think that i actually record a snippet uh from the introduction where you're saying and stuff like that with with some uh blinking uh but yeah it's it's yeah it it's the way it is i mean i i really like live streaming uh i used to do it in the past while i was building applications and stuff like that i stopped for a reason i don't know exactly why i mean i know but i cannot tell i was just too lazy but after after that yeah i said to myself i i should do something with with it and and i should start it again even though it's it's not react native oriented uh i truly missed webb for a while now and um yeah i i have so many thoughts uh that i would like to make something happen in in the future yeah i mean like you know it kind of like when you say that oh you were just too lazy like were you really or were you just not prioritizing like you know people yeah like people procrastinate for very different reasons it's oftentimes i find at least me it's not because i'm lazy i'm actually incredibly hard working when i choose to be um the reasons we procrastinate is that we protect ourselves from something from failure like if i put that video out there and it doesn't get the views or you know it doesn't get the likes then that will invalidate myself as a person and like my world view um and like that's why there's so many cool open source projects that are private or like not um open source actually are public because people are just like afraid to to to put them out there or sometimes even afraid to do the work afraid to even start because when you start you're actually faced with a great mortal question of like am i able to do this uh and the answer is that more often yes if you just choose to focus on like uh what is possible and not just visualizing like oh one day i want to be a heaven you or one day i want to be said mackenzie and like whatever but just like you know just ship this one piece of turret and then you know move on the next thing um yeah yeah that totally makes sense because usually people are are only doing the like you you could only see the result but not the whole uh timeline so yeah i remember that i was live streaming while i was having i don't know i i had 100 subscribers uh i basically uh i i was talking with myself no one was actually listening except i think amman which is with me since the beginning and to other folks but it was like really fun for me to do it is something that is going to stay or remain on youtube so you can check it out eventually later but it was fun to just for me it was a release to just uh put something on youtube that i was working on even though it was shitty uh my code styling sucked it was just me uh shooting things i think that's like the better way to to start also like i think most people aren't ready for prime time success when they start like that's why i like you know you said earlier like hey nice to see you back and you know i've been out of the community for a while one of the reasons i went out of the community because like i felt like some of the things that i did including foam just got so big so quickly and i just wasn't like you know ready to really handle i don't want to handle the fame but like it wasn't really handled the responsibility of communities to worship and like delivering to what i imagined was thousands of people screaming you know like expectations but what in reality was probably all in my head and just took me like a a bit of a readjustment period to kind of get back to the joy of creating for creating rather than like maintaining for others you know to to benefit from so yeah there is a saying that uh yeah just just stop thinking about others thinking about you because you're not the only one on this planet so it's not everything it's related to you or i don't know uh just stop thinking about it and do your thing no matter what and yeah for example i started this youtube channel not because of the fame success and whatever just because i wanted to give people because i i was doing this maybe you know i you definitely know but i was doing this uh github open source for a while before the youtube right so it was another way of sharing the knowledge not only through open source repositories but also maybe i could work developers through my code because in some cases it was like really hard to digest or go through so i said to myself i should at least walk through other developers maybe they will understand better right so it's it's another way of it's it's a different communication channel right well no i mean and you know i'm not just like sucking up to you because it's your stream but like when i think about like what is a kind of good code streamer like you're one of the people that i actually think about because you you you you come up like not come up but you bring actual content expertise um like i'm not gonna name drop i'm not gonna get you into feuds with other streamers right now so i'm not gonna name drop some of the others who i feel like are doing it like i imagine them like sitting down in the morning and just writing like 10 ideas for content and then doing like minimal research for that and then pushing some crap out there and then wasting everybody's time in the process so like if there is like a pyramid or like a stack of like value that you can create like you have your core scientists you know the people who create like you know the platforms and algorithms and the systems then you have kind of like the application developers who are like you know people like you and me i think mainly um you know who kind of like build on top of that and then there's the communicators or the popularizers of science whose job it is to actually translate that to other people and like what you're doing is that you're working i think like very thoroughly through the stack of of like you know doing independent research of how do we squeeze more you know sort of jews out of this like react native thing and then write in the code for it and then popularizing it so like nobody can call you like uh you know like like a streamer sort of you know only like you know you are truly one of the makers and the doers um but then you know some of the others uh i don't know man he's like it's it's like my day looks like this is like i'm always on pinterest nowadays uh dribble it's like really shitty because dribble closed all the apis and uh all the websites or apps that were using something from dribble were closed uh they had some lawyers that were running out of yeah it's it's really shitty so uh but usually i'm using nowadays pinterest just to browse and see what's out there what i can build and what i can take and rebuild that's not been done previously or i would like to use the technique uh and i'm i'm just looking through like good ui motion good ui designs because i i hate bad ui he's like god damn it i i started as a web designer in the first place and yeah it no i cannot i cannot look at like for example i always post the thumbnail that it's related to what we're going to build right i'm not posting a fake thumbnail but just for all youtubers stop stop doing shitty things like shitty ui is like focus on ui because users are what uh are the most important piece of this puzzle it's like yeah i i don't i mean you can't tell that the youtubers but more importantly i think you should tell that to work in front-end engineers and work in mobile engineers like it's like like i i'm not you know trying to say that there's like one one way to do the job but i do see a lot of people who call themselves front-end engineers and all they want to do is like like refactor a redux store all day long and type the same you know sort of like series of code whereas like you um know very well is that like it it is a user-facing art form rather than a you know sort of like this this industrial production thing and like you obviously need you know structure you need architecture you need tools you need frameworks you you know you need all of those things um but i don't think just having that like that's like under the the water and then if you don't see the tip of the iceberg which is what the user sees then like what's the benefit like it's just gonna sink your ship when you run into it um yeah but i i received a couple of tweets uh lately saying that hey you should implement this and that and if i don't feel that it's it's right i i'll not do it anyhow so it's not about the process of doing it it's also about the output right it's it does it worth your time to watch me coding it it's like and ultimately it's are you going to uh build it for some users it's it's going to be like important for you it's uh and if i don't feel that way i'll not do it uh yeah i'll take all the blame instead of just posting some shitty uh video talking about something that is not going to arrive to users or eventually meet some some users it's that that's actually about micro interactions in the first place that's why i gave the talk at react day berlin so yeah users are like oh man you you need to satisfy the users yeah but also like learn it yeah yeah one thing that one thing that like you know we could i could be mad at you about is that you're setting the standard very high like i i wonder how many developers days have been ruined by some like product manager sending a link to one of those youtube videos and going like well why don't you just do what this guy does and you go like we're building a card app for insurance like you know like like who the hell cares um yeah i remember that i was actually discussing with evan bacon about it so he was saying that hey dude you should you should discuss with my bank uh application like uh well you you should build it uh because i will use it more often so it's the same thing yeah you we we should start building nice ui because it is the way it is right uh i'm pretty sure that uh you'll be using it i'll be using it if it if it has a great interaction ui and it re it also like it's a different part as you said like what are you going to use as a backhand or the inner communication the state if you're using a state machine x state i don't know redux you name it it doesn't matter right for users for you definitely uh but for the users if it's not uh if it's not dropping frames or if they will achieve their final goal really fast that's what matters right well i i think this is a conversation that we had a couple of years ago at like a conference where like so my my grand theory of like the developer experience is that it should only exist in server user like serve user experience like developer experience matters because you can produce less bugs which means that you know users suffer less from them you can write code faster which means that you can focus more on delivering actual features for your product and you know you can make them you know perform smoother and whatever so you don't need to spend so much time you know sort of like optimizing on things which again will give the user a direct benefit of more features more considered sort of functionality so like developer experience i think should um you know it should be a priority for teams i think you know it's super important but i i just by calling a developer experience the laws are like uh like what is the poor developer experiencing right now we don't care about the feelings of the developer we care what they're able to do for the for the end user um yeah but i think i think i i i mentioned that as well uh in that talk here yeah that's cool cool man thank you so much once again nanny uh hope to see you like in person uh soon i think i don't know about this pandemic situation hopefully it will end up pretty soon yeah i'm just writing out the wave here uh i'm not gonna i'm not gonna start traveling before everything's safe and i'm vaccinated i've made it this far i'm not going to uh taking a risk right now so yeah totally totally it's like maybe in one year or so but yeah cool thank you so much once again and i don't know enjoy the rest of the day and thanks for spending almost two hours with me here uh it's been an absolute pleasure it's like it's like a performative conversation you know like i would have just spoken to you for two hours but now we did it with other people watching it's like i don't know that's cool that's cool man cool thank you so much jenny all right thanks peace out see ya bye

Channel: Catalin Miron

Views: 3,365

Keywords: hacking vscode, vscode extension development tutorial, vscode productivity, vs code, vscode tutorial, vscode extensions, vscode tricks, vscode overview, vscode extension development, vscode extensions for web developers, vscode extension tutorial, visual studio code extensions, visual studio code, vscode live server, vscode live server javascript, vscode productivity tips, vscode live server extension, visual studio code productivity tips, Vscode best extensions, Live hack

Id: XY9MaaR1dRI

Length: 76min 32sec (4592 seconds)

Published: Fri Feb 12 2021

Reddit Comments

[u/nostril_spiders]

I was hoping for bullet points with maybe one or two things I could take a look at that might make me more effective in Code. Was actually a podcast. I think it's just showcasing one extension, but I don't know because it's over an hour long and appears to be unstructured.

[u/LaSalsiccione]

hAckINg