From Zero to Hero with Notebooks in VS Code

Hey listen both of y'all welcome to the live stream uh what are we doing today uh we are talking about one of my favorite things uh Jupiter notebooks um I they are basically my daily driver they have been since basically I started programming uh just because I really like being able to put pictures and stuff a wide variety of reasons but notebooks are the best F me yes as I'm not a no out of myself but I understand they're quite popular and actually I'm gonna turn it over to you as Sarah and let you go ahead and get in the driver's seat uh y'all chat y'all say hello to Sarah and Michael thank them for being here and uh yeah let's do it Zero to Hero here we go yeah um and I want to encourage folks please put questions at any point in the chat I'm watching uh so I will hopefully be able to ask ask them um or answer them uh as soon as we can but yeah so my name is Sarah Kaiser I'm A Cloud developer Advocate at Microsoft here um my background is mainly in doing scientific research with python and so Jupiter notebooks were kind of my go-to you set up a lab experiment that way you do data analysis that way um so yeah like I said they're kind of my favorite thing and uh Michael do you want to introduce yourself yeah yeah so uh my name is Michael as Burke pointed out last name is Lively um I'm an engineer on the vs code team um right now most of my work is focused throughout notebook so they've been really fun to use um I graduated recently actually at the end of 22 um from Wisconsin Madison so moved out to Seattle from the Midwest and now I'm working on notebooks they were they were great to use in school throughout some of the AI classes I was working on and it's it's fun to be a part of the team that works on works on them for real um but yeah no it's been really fun Sarah and I are looking forward to showing you some of the features yeah um and last really quick question because I always ask this when I'm streaming uh with folks what is your favorite extension color theme and also please chat chime in I'm gonna have to go for the extension I'm GNA have to go better comments because I don't think I've ever written the right code in the first run through so I'm littering my files with to-dos and exclamation marks and better comments is one of those that makes them really bright and hard to miss that way I at least try to forget forget about them less before I'm pushing the final product um theme wise oh god um I think it's a new theme every week I I get bored and then I have to I have to recolor everything in my entire workspace so um right now I've been using just the standard dark plus that ships with vs code it's a great theme and it supports all the new stuff we're working on so it's it's great to test on especially as we're developing new UI elements um but otherwise I have been a sucker for monai um that's always been a good one Dracula Classics but yeah nice uh yeah my mine are the python environment extension uh that allows you to see all your python environments on the side um and fairy floss it's kind of my go-to uh color theme just because I like my pastels nice um all right one second I'm G get a drink it's already reaching for my water it's early it's it's on the west coast it's barely 8: a.m. yeah we're both in Seattle so we're like caffeine is percolating just like it did through the machine through my brain um uh Jabar in chat says yeah I find it hard to find the best fitting theme extension TBH sometimes I actually choose like one that feels right for the project so sometimes that's a really aggressive theme when I don't really know like what's going on sometimes it's very chill um okay so let's look at some notebook books because that's what we're here to to chat about um so uh we have um Michael is going to be our our both demo demo here for today um and kind of how I wanted to get started here Michael is like I I do like I said I do a lot of my work in notebooks and you can see uh he has one open right now that I called sad notebook and so this is kind of like usually what I I don't know if this is kind of what other people's notebooks commonly look like but like as I'm working and developing this is kind of my scratch Pad so like there's all kinds of like duplicated code and just giant code blocks that really should probably you know if I really want to Leverage What a notebook is um which uh maybe I should very briefly explain what that is if you're not familiar I figure most folks here are but basically Jupiter notebooks are a type of um document that can display both kind of like text or usually in markdown often also supports math Jacks and formulas um but you can basically it's a cell-based sort of structure you so you can have like cells of text and cells of code um and jupyter notebooks also don't have to be exclusively python that's primarily the language I work with but there's all kinds of there's like net uh kernels there's um I've seen some wacky stuff with C++ Cel so like there are a lot of different options even polygot notebooks where you can actually use multiple languages in the same notebook which is kind of like o r yep Jupiter actually stands for Julia Python and R that's kind of the um was the originally supported kind of backend kernels for so there's kind of the two elements the kind of document front end that we're looking at here and uh probably the first thing I want to indicate there Michael can you open the kernel selector of course we do have to tell uh just like whether you edit uh Jupiter notebooks in like there's lots of different places a lot of folks use them in collab or in code spaces or just locally um but you always got to tell the notebook where you want to actually run your code so uh here uh can you select demo of course so yeah you can see we've got a couple different environments uh that it's picked up uh for where we could run the python code here in these notebooks because it is python um but this yeah basically you know like I did one of those things where like you go through a sample you know I at least put the link for where the original source is and then um just data stuff this isn't super great so like um what would be speak speaking to Michael here uh we have a couple different ways to interact with the notebook um there is a bar at the top uh what is that yeah of course I'll go ahead and I'll go ahead and just take you on a little UI tour of notebooks so um really obviously the biggest thing you're going to notice is this isn't just one big text file we've got a bunch of cells so uh the best way to interact with them you have this Global toolbar at the top so that's going to have all your buttons you're going to have inserting cell buttons you're going to have all your execution related stuff and then you're also going to have some variable and data related stuff here on the side um and anytime you want you can always right click and you can hide a data view um and then you can pull it right back um there's a couple other toolbars that are fun to look at um each cell they're actually going to have this little guy up here um this is going to be your cell toolbar um and then you've also got your run button um and besides that if you're working and you're at the bottom of sell and you really want to sell right here you've also got this insert toolbar that'll show up when you hover between some cells so that is a a nice little view of all the parts of a notebook and then you also have um the outline view down here which is going to help you navigate around a bit um and can also blend a bit of a hand which because this is not a nice polish notebook uh it probably doesn't look doesn't uh end up being super helpful um folks in chat were asking if there's this is in a Dev container and uh it totally is oh yeah thank you for this is the link if you want to look at uh both the sad notebook here and what we will take out of the oven later which is a much nicer looking version of this notebook uh you can go to the repo at aka.ms notebook DH hero um thank you for the reminder producer um so yeah like this obviously this isn't exactly a notebook that I'm ready to share with folks so probably the first thing thing I'd want to do is like maybe move around some of these cells break some of them up uh what would be the best way to do that yeah yeah so we've actually got a lot of tools for you in that situation so I'm going to go ahead and pull up um some key maps that we have because everyone loves being a bit more productive just on their keyboard so I'm going to pull up one of our extensions and this is one of the great things about vs code is that you've got all your extensions to choose from so right now if I go to the contributions you can see that we have a lot of a lot of key commands that are contributed by this jupyter keymap extension so things like executing cells uh cutting and pasting them and all of that can be done right from your keyboard so if I let's say okay the first thing we might want to look at we've got this one cell and I'm I'm looking down this is this is a 52 line cell Sarah I don't know if we can I don't know if we can call this a notebook we're getting closer to a python file but yeah go ahead go ahead maybe we can split it right uh before I start at least split off the plotting so I think if you go scroll down uh to the bottom of the cell yep we'll we'll do the easy thing of pairing it off from the bottom so line 45 uh 4 Y Cool sweet so yeah so if we're still learning we can always go ahead and refer back to the keyboard shortcuts um I know I'm looking for Notebook cell split and that's going to be control shift minus so I think I should have screencasting mode on so we control shift minus and now the cell has been chunked right off so now we've got um all of our data data work and then we have our plotting right here at the bottom um so that goes ahead and splits the cells nicely yeah um cool so it also looks like I had an error maybe down in the cell below that let let's see let's see what I so we got some nice colorcoded error messages here um uh oh it looks like I probably ran those out of order uh since something wasn't defined um what how can I like what are my run options here yeah this happens a lot when I'm doing notebook stuff yeah so right now um we've got we've got a couple options so we've always got this handy dandy run all button which I click way too much in the toolbar um and what that's going to do is that's just going to execute everything top to bottom in your notebook um you've also got your run button on the cell and that'll just execute this cell and then you've also got executing everything above and below so these two will be really fun because part of the beauty of notebooks is that you can sort of decouple your code right so we've we've pulled this cell and it's now below all the others so say say there was something we wanted to change in the feature names we could change the feature names and then run only the cells below and still have all of the all of the info from the top cells and we still have all our variables stored and everything will execute properly so yeah that is probably what I would use if I wanted to run these back in order so I can go ahead I'll go ahead and give us a fresh Bas to run from why don't we go ahead and run all sounds good exactly which order we were missing so wait for it to execute and you'll see cell status is running so we are there we go nice so all right there wasn't a huge error with the code um nothing big nothing big yeah yeah and uh for context kind of what I was messing around with here is uh there's a great sample from the psyit learn project uh which is a machine learning package um that kind of shows a really neat example of it's synthetic data so it kind of that first chunk uh that probably need some comments and some better documentation uh but basically generates uh some fake like hourly wage data based on a couple input parameters things like the person's experience the parental hourly wage college degree and ability um they're it's totally fabricated and just sampled from a bunch of different normal and beta distributions but the whole point of the code that we're looking at here um is basically to show that if you do uh linear regression and don't like if you don't know all of the parameters going into the data that you're analyzing um that's going to impact your uh regression or analysis seems pretty obvious but sometimes it's hard to detect the effects of if you you know don't have someone hand you the solution key to a real life problem and like these are all the factors that influence it um so someone said they needed to run quick but was going to ask if I'm working with scyon how can the vs code notebooks help me and is Anaconda required in these cases um I how however you want like however you have a like python or scyon install on your machine the kernel selector should pick up so if you have a working environment where you're working on that sort of code you should just be able to select it here so there's normally when I open this on my machine there's a bajillion options because I have python installed 800 times on my machine um but yeah that was great Michael if you can click on the so there's a few options here because we are working in a Dev container um which is really nice it's kind of like a dockerized isolated way to only see then python related to what's inside this basically base muntu image and then one cond environment but if we do the select another kernel um one of the really nice things about working with jupyter notebooks and vs code is you don't like VSS code doesn't have to own the kernel um so the kernel could be running on a server at your school or you know on your machine at home or something something like that and you can as long as you have the connection string for it you can connect to it uh or you can connect to like have code spaces spin up a kernel for you and then that just kind of keeps going in the cloud and you know if your laptop on the train loses Wi-Fi you're you're fine yeah um so yeah that there's lots of nice options there for finding the right kernels uh to actually run your code oh yeah someone also explore test says their kernels are running in WSM yeah so if you want that's that's another awesome Choice uh okay cool um great questions so H what were some of the next things that we wanted to talk about um yeah you use some code shortcuts um oh I did I think I see something misspelled here um yeah college degrees I think I I just noticed this uh yep oops good so how would I go what's the easiest way to go about fixing I mean like I could controll F and then replace all of them but I don't know so I think starting from the bottom what we can do if we look at it so what even just highlighting this word we're going to get symbol highlighting all throughout the notebook so actually if we go ahead and highlight this we'll see it's used here here here and then I don't I don't actually know if it's used anywhere else so this it feels like if we're going to try and do this manually we might miss something so one of the really cool things we can do is in BS code we've got a refactor button so if I hit F2 I've got this really handy dandy refactor menu and what this will actually do is it'll rename all the way throughout the entire notebook so if I just say let's toss that extra e in there um or actually let me let me show people the preview so I'll go shift enter I Disappeared um again I did and that is that is a conflicting key map so it'll go ahead and it'll usually it'll show up you a little reference menu and it'll show you all of the things that you are going to rename but now we have it all renamed to college degrees properly so we don't have to worry about that um the other cool thing just to make sure you're not missing anything is we have the really cool thing called find all references so if you select the variable you're trying to click on and then find all references you'll see this nice little references panel pop up in your sidebar View and then you can click through and it'll focus all of the different instances of the college degrees got it yeah I I um a lot of I'm very wishy-washy sometimes when I name my variables so uh I that can be that can be very helpful at especially finding you know because if I control F and I like do something where I'm naming something d DF and then DF underscore other things I might accidentally if I just do a control F replace all yeah exactly so I think if you're cool with it we can probably pop over to the um we spend some time making a nicer version of this notebook uh yeah just so uh yeah we can let me go ahead pull up the the other one and with the magic of editing we now have this so now this is this is a notebook that i' I'd feel a bit happier handing off to handing off to a cooworker so oh yeah and actually now that I've started scrolling we've got another UI element to show off um and actually this is one that I'm I'm a bit more personally involved and we've got sticky scroll so I'm sure a lot of you guys have seen this um for nor normal code editors um you'll see sort of the the header of your function or your class sort of stuck at the top of your screen so it's recently a fact or a feature that's gotten a lot of Polish and has been something that I've I've sort of spearheaded the design on so up here from right below the global toolbar you've got um these little header lines so if you're using markdown headers which we should all be using markdown headers it makes notebooks easier to follow you can scroll past them and now that'll be a great way to can sort of contextualize the data and the cells you're looking at and you'll see that floating right there at the top Sarah your your pretty notebook has a has a lot of really good not of really good formatting I like um it's not only is it more helpful for other folks it also helps me remember when I'm coming back to a project like what did this mean or do again yeah um yeah so someone asked what does it mean to name a variable correctly I mean I guess what I mean there is like usually as you're working through a project you maybe don't know like there are scope or aspects that you kind of haven't thought of or you know realize oh I have two things that kind of are similar and related maybe I want them actually to have similar names and they didn't originally and so yeah that's it's more of kind of like a polishing Cod like there is I guess there's never exactly a wrong variable name certainly they're not going to defend that but um yeah uh something I run into is like if I I'll name a variable just index and then say I'm running a nested Loop and then I have index one and index two and suddenly you're trying to index your way into an array or something and you're like wait is it index one is it index two is it temporary index is it previous index and you sort of it's nice to contextualize the the things you're uh referring to in your code it'll make it a lot easier and'll save you time as you troubleshoot some silly mistakes um yeah so a lot of these are basically examples of some of the code and text editing that you would see normally in vs code um but that are actually fully available in notebooks which is really nice because even um I use often the like keyboard shortcuts for moving around lines or multic cursor um which is it's really nice to then just straight straight up be able to use those in in cells um yeah yeah looks like the question about naming variables is is spicy for chat which is great got some opinions about our variable Nam yep um so someone did ask though how do you get uh the Jupiter notebook support extensions uh in vs code so yeah yeah so vs code has um that's sort of one of the most beautiful Parts about vs code is the extension ecosystem so in this Dev container we've got a lot of extensions and stuff or maybe not too many I'm sure sure my extension list gets a lot bigger but um right now this is this is the best way you're going to be able to install just the Jupiter extension and this will come with a nice little pack of four it'll give you the keymaps it'll give you renderers um cell tags and some other features and this is what's going to give you um support for all those Jupiter kernels Jupiter servers um and we'll help you get that uh notebook set up out of the box but the beauty of it is actually when we are in vs code we actually have a very native out of thebox notebook experience so execution will be limited because that's a lot of what Jupiter contributes but if I had Jupiter disabled I would still be able to view this notebook all of its outputs um and see what I'm working with here so to view a notebook we have all of that native within just the base product of es code but if you want um a lot of the Jupiter related features then then you'll go ahead and you'll install this extension and it should be able to walk you through quite a bit of it um and then one other thing to call out is I know I know some people are collab users and they might have their own key maps that they're that they're enjoying so we also have support so if someone made a Google collab keymap so they can use the keyboard shortcuts they're useful so really if there's something you want to do an extension has probably done it yeah I if I'm working on something especially in like a new or different language or framework I just I search in the extension bar and then pretty much always there's an extension exactly ready to go um yeah so I can think of a few more things that might be nice to look at um can you let's look at notebook diffing because this is one of the big drawbacks or kind of it's a little bit more Awkward to diff a notebook than just a regular code file because uh technically it's encoded in Json and looking at diffs on Json f files is not nice so um yeah we could we could even look at the diff for um like open the git panel we can actually look at the diff for the sad notebook that we just opened or we're just editing yeah so let's let's take a look at some of the stuff we were doing with the sad notebook um so me scroll down to get some diffs yeah so as we split cells um you'll see sort of the left hand side of the right hand side and this will be the diff between sort of the the initial the initial commit and the current working tree so um you'll notice that we split off this cell so now the cell has popped down into its own own little area um and if if we removed any inputs or outputs they'll also be showing here so it's a great way to side by side see and if you're if you're committing early and committing often um which is something a lot of people will tell you to do um you'll be able to actually see like okay if something broke right now and we are we have no clue what happened we we swear we didn't change anything it should be working normally um usually a diff you can help you find sort of what you're missing so um in the case that let's say in the sad notebook um let's see I had misspelled RNG and didn't have any any intell sense to tell me I did I know right now we have some good language features so pance would call it out for us but let's say let's say we didn't have pyland and if I scrolled up we or down it's probably bued in here yeah so right here we'll see that oh I accidentally dropped a g um and then we will know to pull that back so yeah very useful uh in that split view if you can look one more time there was something that I actually learned recently from someone uh who I was working with uh on working with on a notebook and if you go to the triple dots way up in the top right yep so sometimes times I don't really care about the output changes or I don't care about metadata changes because maybe I'm running it on a different machine but you know it it doesn't really matter um it's really nice to just you know on a oneoff basis turn off diffing on those sorts of things so I can just see the code changes um which are rendering a little bit funky here but it is AIT there's that huge black space but yeah normally it expands the whole cell but uh We call we are working we are working in insiders for this uh just because we wanted to show off some of the cool notebook features that Michael is working on so um I'm I'm guessing that uh because when I tested this in normal it was working so this is in insiders that's my that's my insiders always has some quirks to it but it's always fun and this is a this a segue to giving some feedback so if if this was something that we wanted to file a bug for we could always say go to the H menu and then we could report an issue and that's the best way because all of those issues they get looked over directly by me it'll through them all no we we triage them sort of be between the entire team so uh they'll they'll get they'll always get looked at and you'll always get a nice response from one of the members of the team if not if not me myself um I wonder if diffing the two the other way to diff um is so if you're working only only on one file um that Source control tabs great but say you want to actually diff between this really nicely polished notebook and our sad notebook we could compare selected as I find it um and then you'll see a bit more of the uh in-depth diffing and you'll see a lot more things highlighted so as we have a lot more cells these ones are actually rendering full size um but you can see that they would all show up here compared to this ad notebook which is over here on the right Allin one cell uh sweet yeah explore explorist uh also pointed out that vs code has intellisense uh over just kind of a yeah has that support your general Jupiter notebook doesn't necessarily have um it has some syntax highlighting some language server features but uh certainly not anywhere as extensive as um the Intel sense available here from py pance is that the correct backing thing so can you like put your cursor in and show us some of the cool poy upy things technical term for it those are my favorite things so in this first cell so if I just typ date DF right now we've already got some things popping up and then let's go ahead and I know df's a a nice little data frame so I can click dot um and now we already have a lot of suggestions so um we'll just go ahead and do let's see let's let's do we'll do a line or head so we'll toss an h and then already in h we'll Auto populate a couple things we can do and we can just enter and we have DF doad so a lot of different Auto complet we can do which is different than someone was asking if we're using co-pilot um we don't actually have co-pilot installed right now uh just because I wanted to be able to isolate and show you like this intellisense stuff is purely based on your code analysis so there's no machine learning to that at all actually it's just everything that it can derive from what it sees in your code and what uh packages and things are installed in your kernel so if you're having problems with uh you know intellisense throwing a bunch of red squigglies in your code being like this doesn't exist whatever double check what your kernel is because uh that is usually the whenever I have problems there I'm like I didn't select a kernel yet or I'm on the wrong kernel um that's usually the best way to to fix those sorts of issues these language features are really really I think what what sets V code apart from from a lot of other editors just because like you have all of the all of the feature Suite that comes from pance and you've got all of those language features really just embedded in this cell um and there's also there's also extensions like rough is one that I can call out that is working on things like code actions for the entire scope of a notebook um so things like organizing Imports you can just run it against your entire notebook and then it'll it'll just take care of itself and that's all B B on sort of that language plugin and all of the language server protocols that we've set up to to run all of this in the back end and certainly co-pilot does work great in notebooks honestly I found co-pilot Works some of the best co-pilot responses uh come in Jupiter notebooks and python code just because that is a huge uh kind of majority of the source that it's being trained on so like any pandas manipulation Matt plot lib you're covered yeah exactly um it knows a shocking amount um a lot of the time I I I mean a lot of the code I read is is driven by co-pilot it's it's a very very useful thing to help um Drive productivity um I was going to so there's a couple images in the notebook here do you want to talk about uh because like if I was running you know before I used VSS code uh to host my jupyter notebooks I would have like have lines to basically export my images and save them out to files so i' have like it was boiler plate sorts of things that I didn't like having there so what can I do here that's maybe easier yeah so um right now right off the bat um I mean you can see all of your images just right within the notebook and that's already a really big perk of notebooks is you get all of these rich outputs so if you wanted to um use any of these extensions like here we're using Seaborn um and we have a couple great plots here and then this is just all embedded in the notebook so you can toss this notebook to a friend just copy the file and send it to them over email I don't know why I chose email there but they'll have all these they'll have all these images when they open it up um you can also see if we hover we've got sort of these copy and save icons so if I save as then we're gonna we're already going to get our little uh saving and we can we can show you all the ins and outs my local machine but um these are a couple of ways we can save we can also so I haven't played around with this paste button but is this wonder what it saves that in um but yeah so there's also these little plugins you can always screenshot too so if I I'm not sure if you guys can see me screenshotting I don't think you can see it but I have taken a screenshot it's probably why my screen froze a little bit and then if I paste it in um I probably have a setting I didn't need to do um paste as I find B so there's some settings you can enable and then you'll get really nice inline pasting and then it'll all be stored in the like Json behind the notebook um maybe trying a markdown cell oh good good call I'm not I'm not sure I know what it would mean to paste into a code cell there you go yeah so that's exactly what it was um and then yeah and then you've got see right now we have Pace as attachment so you'll see um that it is stored here so this is the screenshot I took um you can clearly see it's just part of the screen that it already was that I it's a potato version exactly so if you ever want to toss around just pure base 60 Co base 64 encoded images notbook um yeah so it makes them really portable right because a lot of the times I've sent files to a friend and I've sent a workspace um I've spent the workspace to a friend and I've deleted all of the imager data files um and now it's just stored within the notebook so it's one file to keep track of I don't have to think about all the other things I'm sending um so someone asked uh they were commenting on Native image support uh for the notebooks uh they're definitely like if you have images and stuff alongside or put the path just like you would normal normally you can you don't have to have the image embedded in Bas 64 in the notebook so oh yeah 100% that totally works too that's a I I think that's I've used that trick a lot uh if I don't want to have like if I just want to share the notebook and I don't want to have to share like a folder of auxiliary files um that can be a nice way to uh you know it's it's just as a part of the notebook and I don't have to and then if I change it I can turn off look at I can adjust my diff accordingly um someone also asked can you save it as a web app or do you need dash plotly for it um um there are actually a couple different ways that if you want to kind of promote it or change it from the current uh oh Chris who had made the comment about image support said they were joking paste into code as opposed to markdown yeah that was that was definitely me having a morning moment uh no that's that's cool um so I wanted to talk briefly or speak briefly to the how you can like export or change the format here of the notebook um yeah if you go to the triple dots uh up next to the variable by the kernels yeah there you go uh the export menu there um this is really neat that you can basically export your notebook like say you want to actually just you're you're done kind of messing around a notebook and you just want to turn it into a script this will basically extract uh all of the code into a piie file and leave the markdown stuff as comments um which uh and interest interestingly it's still it it uses some syntax to kind of indicate cells so you can actually like run Jupiter notebook cells like there there isn't anything special about this file like it's just the fact that there are these the syntax of uh the comment and then percent percent that's just a special secret incantation that indicates this is a cell and so you have the choice of running it like that or you can just get rid of all of them and then you have your your python script yeah um but also the other options there were like PDF or HTML so if you wanted to embed it on a site or something like that that would be your standard like export options that you would have from BS or from like any Jupiter post I'm curious I've never exported a notebook as a PDF yeah I uh I don't generally do that because usually the person I'm sharing it with will want to play around with it or edit it but if you needed to put it in a report or something like that or um someone I think had earlier asked about um how do the tools in BS code help with productionizing notebooks um that is definitely a huge its own topic and there are definitely um uh some good extensions for like if you're doing that with like Azure pipelines or things like that uh there are absolutely tools to to do that um I'm gonna I'm going to claim scope here and try to keep it on point but uh that's a good idea we should maybe make that a future stream to go into all of the because like yeah goodness and there's also the like should you use notebooks in production uh I feel like you should use what works there I don't think there needs to be a war between notebooks and you know traditional script files uh so uh let's see I'm just checking to see if there's any other comments real quick um I think that's the the most I can um oh someone was asking how this is set up to run in a container can you uh just look at the Json uh contain yeah I I can pop over there um so right now Sarah did all the magic for this and I just sort of piggybacked it but we've got Docker files we've got Dev containers um and a lot of this is being driven through um one of the extensions that I have installed locally um it will be the remote development pack um and this is a good one if you want to to work with like Dev containers and stuff like that this will give you um away from like I'm working locally in BS code I know Sarah does a lot of stuff from just a browser in a code space but um if you're working local you can get the remote development pack and that'll that'll drive a lot of this stuff um and then you get this handy dandy window over here um and off of the dev container um it's got a Docker file and then I've got Docker running in the background so it was really easy to just open up Docker and then I open it up I forgot about it just let it run in the background and then from your uh remote Explorer view um I was able to just connect to my open container um or it also lets you spin open a container and there's always a lot of really good welcome text that'll uh get you pointed in the right direction if you don't know exactly where you're going um and if you want to learn more about that uh that's something I obviously also often talk about uh we have a AA um or a a link to a talk that I gave with another nice repo for samples at uh slpy Cascades Dev containers um uh thank you producer um so you can check that out uh if you want to learn more about that I it's the best thing since sliced cheese I always like pretty much anytime I get to a really gnarly like there's something weird on my machine uh it usually is coming from leaking things between different environments or not using the one that I think I am because their name the same but somehow like I don't know um it's really nice to have you know using you should always pretty much use environments for your python projects but sometimes there's things outside your python project that also kind of need isolation so um yeah I've definitely gotten myself into trouble of just installing you know random packages globally across my entire computer willy-nilly so yeah and one nice thing about the dev containers uh is that you can also specify because part of it it's like while it's a you can use Docker files you can just start with an image but you can specify all your vs code settings too so which is really helpful like if I want to share a project with somebody and they don't have like the Jupiter extension installed or they don't have the keymaps installed um or co-pilot or something you know anything I want I want them to have when they're interacting with my code I can basically curate the entire front end for them as well um so that that makes it a lot easier you know I don't hand someone a notebook and then it's like oh that doesn't work on my machine because the setting you know there's some different you know UI elements that I hid that they don't have anyway uh which does remind me a lot of the you kind of showed this already Michael but a lot of the uh UI elements notebooks and stuff are it's really highly customizable so like if yeah you know you don't like having the toolbar uh on the cell or something like that or the popup uh menu in between there's lots of ways to customize those turn them off turn them on um change them so definitely uh explore and take a look at if uh if you're using this and want things to look a little bit different uh take a look at all those settings yeah got things like consolidating the Run button you can turn off sort of the the floating floating toolbar so now like our run button has debug execute above and below so we've trimmed up here and there's a lot of other things that that are tagging along so you can really make the notebook experience exactly what you want it um I think someone in the chat mentioned uh data Wrangler for Microsoft yeah that's another good thing because a lot of the a lot of the point of using notebooks is a lot of them are used for data you're not always just someone writing uh really simple code sometimes you want to visualize a lot of the data um so we've got this handy dandy view data button up here and say say we wanted to look at um a data frame and then it'll it'll open up this this View and then you can see ton of your data um there's a ton of things to do with it I haven't played around a ton with this data set or what we're looking at here so um I know this is a great tool I know Sarah Sarah has used it before um but this is actually one of the teams we're working with that a lot lot of this is actively under development so things you see may change and there's a lot of moving Parts going on I think one of the coolest things um about the data Wrangler extension sort of concept here not only can you kind of like View and see like some of these initial distributions like we can see the ability distribution there uh is probably sampled from a normal it is um but uh as you like if you want to edit your data um like say maybe there's text data that you want to be that should be numeric or something changing the type on a column um you can just do that and then data Wrangler will basically write the code that represents those actions so um you can see in the bottom left there there's a panel that's like the cleaning steps um and so as you go through and do things um uh it will just kind of track that and uh mostly write the pandas code for for it so um but yeah it's as Michael said it's definitely still under development you can try out the this is the preview install of it um but definitely check it out and uh yeah I'm sure sure folks will you can see there's even a reporting issue specific report and issue button at the top of the window there just for for quick access but uh I the team's always love you know kind of feedback even if it isn't like this isn't a bug but you know I couldn't find this ort of thing also bananas code asked does r have support in Visual Studio code or only python um whatever your backend kernel is H you can select it like you can select net kernel kernels I've also I'm uh my background is in Quantum Computing so I've actually used Q sharp which is a Quantum programming language that has jupyter kernel support so I've done that in vs code um in terms of what like sort of editor featur you'll see in the notebook itself just basically depends on what um vs code would know about that language so if there's an extension for the language you know like here there is an extension for Python and pylance to give you all of the nice syntax highlighting and the language kernel stuff in the back end so there's absolutely are extensions so you would have a very similar sort of experience if you were using an R kernel um as compared to python yeah um yeah uh do you want to just show the the variable panel as well yeah yeah let's see what we got here so um one of the things Jupiter also right now we're we're doing a couple things so we've got this variable U down here and this is a a bit less feature Rich but a bit easier to take like a quick look at something in your data um so this is one thing that we have right now but then we are actually doing a bit of a redesign so um if I go to my settings oh actually I did just typo and pull up another good thing but we'll save that for just a second if we go Variable View um we have this experimental variables view which is currently under very active development that'll end up putting a view here um in this sort of run and debug panel so uh the the goal is to make it a little bit lighter um a little bit more performant and give you another good good view over here and sort of your run and debug that'll let you view all of your notebook variables in that same way that is very much under active development so there's going to be a lot coming to that in the coming months and we still have to figure out exactly what shape we want that to take but it's good stuff that's a good Segway though to one of the things I wanted to ask you Michael what are you kind of like what's on your team's road map like what are you excited about to kind of be working on coming up uh because I don't know I don't know about chat but I'm I always am I read all of the release notes I don't know maybe I'm too much of a nerd there but I always enjoy looking at all the cool stuff that's changed so what's on Deck yeah so um for me as I said I work a lot in notebooks so a couple of things I've done in the past like I I made the sticky scroll I did a big rewrite for our toolbar so that we now we can hide items and we get the viewing and sort of the next thing I want to tackle is this outline view down here so right now you'll see um you'll see a lot of cells and they've all got this little markdown icon next to them so these are all your markdown cells um but you'll notice that like this cell right here now let's take a look um that is yeah right here um that was a weird Focus but it's not actually a markdown header right um and ideally if I was thinking about an outline we might not we might not have it in there so we're going to bring a bit more features and a bit more customizability to the outline view um some things that I've been thinking about are maybe putting little run run cell hooks in a couple different places so you you could execute sections of cells in different ways um and that's going to be good there's also things like sticky scroll I think this could be a lot more useful than it already is um right now it's great for sort of contextualizing your data and the steps you're looking at but um things like right now I just added folding so we can fold cells um right from within there and make sure your notebook's clean and you only see what you're looking at or see what you care to look at um and yeah there's a lot of navigation there um I know there's more like co-pilot tooling we've been thinking about there's uh the Variable View being redone um one of our team members is working on improving remote support so um for remote kernels there's always feel like that's always a scary land of uh can you get your remote kernel set up and we're we're trying to make that as experience as seamless as possible so there's always always good improvements coming sort of on every side of the of the table there but yeah that's that's the big stuff that I'm working on right now I know the outline view is going to take a lot of my time and if you want to get into like the nitty-gritty we have like the outline view is almost what powers the sticky Scrolls so right now there's like two instances of the outline view whereas that could be probably refactored and brought down to one and then maybe we've got some more performance for our end users and stuff like that so some of the more algorithm based work is is sometimes been more fun to syn a couple hours into wait do you work on vs code in vs code of course I mean there's no other why would I why would I use a different editor of course I use G no I don't know why that question just occurred to me I'm like no yeah so obviously the answer is yes but then I just it's funny that you're making the tool in the tool so that's like a weird meta tool well it's the best it's the best way to do it because for us we always want to make sure by the time a feature gets to our end User it's been tested rigorously so um we try to minimize if if bugs make it into stable we're we're trying to patch them as quick as possible but the the way we do that is right now my vs code icon is a bit more green than the Blu is usually um so that's insiders and every day you're going to have a new insiders so every day the vs code team we're always we're always committing and we're improving the product and every day you're going to get a new build and that's going to bring every feature as it's being actively developed so um that way all of us developers as we build a feature we then start using it in our day-to-day um and we try and dog food all of our new features because that's really what's going to give us the best experience possible and make sure like I know what I like in a code editor so part of this is we are building we are building an editor while using an editor so we feel like we're we're some pretty qualified people to know oh that that really doesn't feel good when it behaves like that so sometimes we get to cash things before they make it out yeah that's uh honestly I I work a lot with the notebook team and a bunch of other teams and I'm basically the guinea pig for a lot of the features so uh I'm the first to maybe file bugs Andor call Michael up and complain about things I know I've got a couple issues that I need to take care of for Sarah gotta get them off the backlog anyway um if there are any other questions in chat please drop them I'm GNA look real quick um oh someone said it'd be interesting to have an indicator of GPU CPU load while running heavy models um I think there's an ex I if you're Runing locally I know there's an extension that puts CPU and other like machine stats in the bottom bar um but that's actually an interesting idea especially if you're connected to a remote kernel so you can't like feel how hot your machine is getting or how fast the fans are going you're going takeoff mode yeah yeah as my my laptop and desktop commonly do uh let's see uh yeah so that'd be a great one to uh file an issue and make a suggestion on um yeah or make your own like what I think is really cool is there's some great uh templates tooling stuff uh set up for making your own extensions for VSS code not like truly most of the you know Microsoft has a lot of folks who are working on the core like vs code and kind of Jupiter extensions but obviously you can make your own and so like that can be a a fun thing to play around with like if you um have access to like those parameters from wherever you're running uh running your code um explor test was also commenting that WSL kernels are working great for them um that is totally true so that stands for Windows subsystem for Linux and that basically is a way of it's a full like Linux umuntu or whatever Dro install on your Windows machine so if you want to like I my work machine daily driver is a Windows machine actually the only person on my team who has a Windows machine so I generally am the person doing the testing on Windows but I do most of my work on Linux machines whether that's through Dev containers and Docker or on WSL so um yeah yeah uh and so you can do Blazer and python notebooks now I there are through polyglot I think you can do umet and python in the same notebook so yeah try it out we should do another stream on polyglot too because that's really neat yeah yeah um yeah let's see well I think we're getting pretty close to time [Music] um I again the the repo if you want to see some of the stuff that we were poking around with here um is aka.ms notebook DH hero um and uh yeah certainly I'm on um Macedon and [Music] um on YouTube and other places so um usually my handle is crazy4 pi 314 I'll put it in chat uh Michael do you have a social or uh I'm less socially inclined but you can always you can always find me on GitHub I'll be I'll be handling issues on there and I think everything should be tagged in some way or another but I am yoyo crazy with a k then my username since fifth grade and it is not going away mine is also my first I was in high school when there was internet so yeah um I'm just gonna put mine cool um yeah thanks everybody for for joining I think we're pretty much this is like the first stream I may have uh oh yeah vs code the producer also reminds us that socials are in the the information stuff below um uh but yeah thank you so much for joining and uh yeah if you have any like uh yeah and uh we we should do this again soon Michael yeah it'll happen it'll happen you you definitely help make make uh The Notebook much more um presentable I try I try so yeah uh cheers everybody yeah see you everyone than thanks for [Music] joining

Channel: Visual Studio Code

Views: 25,369

Keywords: vscode, code, python, notebooks, livedemo, zerotohero

Id: cKFp8DBF75Y

Length: 55min 38sec (3338 seconds)

Published: Fri Jan 26 2024