 Hello. Welcome to learning more about notebooks in Visual Studio Code. My name is Tana and I am a Program Manager on the VS Code team. Today, I'll walk you through what notebooks are and what they look like in VS Code, as well as some custom notebooks that we have that are exclusive to VS Code. Let's get started. And the first question to ask is, what is a notebook? What makes a notebook? So, a notebook consists of three types of items. One is a markdown cell and these are rich markdown cells that can contain headers, bullets, images, whatever you would normally expect to be able to be rendered in a markdown cell. Code, right in this example, is Python, but it could be any other major language, like JavaScript, Java, R, Julia, many other languages. And then finally, output cells that correspond to code cells. And these outputs can be complex, like this data frame here, which is essentially just a CSV view of data, as well as they can be interactive, so it could be a plot or it could just be plain text, so just like your system print lines or your console logs. So, notebooks are pretty interesting and they've definitely become really popular in recent years, but they're actually not that new of a concept. So, notebooks were first coined as Literate Programming by Donald Nuth from Stanford University in 1984. So, he was working on his thesis on various algorithms and programs that he was working on, and he wanted to be able to share his code to someone else and be completely human-readable. He didn't want to have to explain what was happening and have to guide a user through what's happening with a separate piece of documentation. So, he wanted all in one document. So, he came up with this idea of having these code macros inserted within rich text, so he can explain what's happening and then have some code that shows how to do whatever he's explaining, and then have some possible outputs in relation with that code. And this is how he did his thesis in the 80s, and he actually created a book from the concept of Literate Programming over here that you can see, and this is actually available online if you want to get it today. So, that's what he did first, and then in 1988, Wolfram Mathematica came around and thought, hey, you know, notebook interface is really great and would be good for our platform. So, it works really well with math as well. So, you can do some explanation of what's happening below in the formula, and then you can have some code formulas, and you can have some possible outputs for that. So, this could be graphs, plots, whatever that's related to the math formula that you have above. So, that was in 1988, and then it was a bit quiet after that. There wasn't too much going on in the notebook space until 2015, when the Jupyter notebooks were launched and the Jupyter community was born. And Jupyter notebooks have been a huge success since then, especially in the data science community, where a lot of data scientists use notebooks to do various analysis on data, to explain different processes and explain some machine learning concepts, and have a really cool form of both playing around with code, as well as sharing code with others and sharing concepts with others. So, in the last decade, it's been really big and you can play with Jupyter notebooks in many different platforms, including VS Code. So, what do Jupyter notebooks and other kinds of notebooks look like in VS Code? Let's jump into a demo. So, I have VS Code insiders, and the insiders version, you always get the latest up-to-date features that the VS Code team is working on, and it's actually the version that the VS Code team uses to work on VS Code daily. So, this is what it looks like, and I have a bunch of example notebooks over here. So, let's start with looking at what Jupyter notebooks look like in VS Code. They're currently the most popular kind of notebook. So, what does the hello world of Jupyter look like? Well, we start off with a notebook file. So, they end in ipynb. So, let's create a new one, new file, and let's call this hello, ipynb. And so, with that, VS Code knows it's a notebook. You can see that icon change, and let's hit enter, and cool. And we're introduced with a brand new cell. It's already set to Python, and it will be running Python. And you can click here and choose different types of languages you want to run. I'm just going to run Python of this version for today. And you can add whatever code you'd want to here. So, let's start with print, and I actually get all the intelligence and everything that I would expect from normal VS Code editors all within the notebook. So, print, I see a lot of helpful information, but I'm just going to go ahead and enter, and then I'm going to type in this string hello world, and then I can run this. It's taking a second to connect, and there we go. And so, we have a code cell and an output cell. And as you can see, we have options to add more code cells or more markdown cells. So, let's look at what a markdown cell looks like. So, when we have an empty markdown cell, it looks like this. We can double click to edit, and we get the markdown editor that you're used to in VS Code. So, we can do hello world, we can even do some bullet points, let's say 1, 2, 3, space for that, and cool. And as you can see, so we get rich markdown cells here. We can do bullet points, you can do images, links, whatever you'd expect to do in rich markdown cells. And we can have as many code cells, as many markdown cells, it'd be like unlimited opportunities here. And this is a cool hello world view of what a Jupyter Notebook looks like, or notebooks in general looks like. But let's look at what a more realistic real world view looks like. So, I'm going to close this for a second and open up this other notebook that I have. So, this notebook is trying to analyze Washington state COVID data. So, a lot of communities around the world, they are publishing their COVID data for people to analyze, use, and you know, you can create many models off of them to see any trends. And so, this notebook, we're just doing some exploratory analysis on the Washington state COVID data that's available to us. So, I had the COVID data downloaded, and I downloaded and kept it in this folder with the CSV file. And I can explain to whoever's using my notebook how to get started. So, I can explain what packages they need and packages are the same as like npm, like node dependencies. So, you install them in your machine and then you can use them. So, in this cell, what it's doing is it's going through and installing this pandas package, which I'll be using to read the CSV. I already ran this, so I don't need to run this, but I can add as many installations as I need. And then I can import that library and that package that I just got. So, let's run this. It's connected to that Python runtime. Cool. So, it looks like we have pandas successfully imported. So, let's actually check. So, we are going to now use this library to read a CSV. And then this head function just shows us the first five lines of the CSV. So, let's run that. Very cool. We can see this is from the CSV. We see a couple of counties, some information related to when the case is started, how many cases, and some ages. So, the edge part is actually pretty cool. And it would be very cool to plot what this looks like. So, let's actually try to do that. So, let's start with... Let's remove some of the columns that we don't need. So, we don't need unknown age. I don't think that's the column we need. So, let's try removing that. So, start COVID data. And this is available across cells. So, it holds states. So, let's start with COVID data. And let's try dropping unknown... Unknown age with the axis of 1. And let's run it. Okay, cool. That looks about right. So, we dropped unknown age. Let's also drop total cases. So, notebooks actually hold states. So, right now... Actually, I didn't actually set the variable to be this. So, let's actually update this variable. So, now it's the original minus unknown age. Let's run that again. Okay, cool. And let's make another cell. So, we can actually see what that looks like to verify. So, this once again, we'll just return the first couple. So, we see that unknown age is gone. That's great. Okay, and then now let's update this variable to remove some of the other columns. So, I also don't want probable cases. So, let's get rid of that one. So, let's run this cell. And then let's run this cell. Great, that's gone. Let's also remove confirmed cases. So, let's run this cell. Run this cell. Great. And then let's also remove total cases. Run this cell. Okay, I think that should work. I think I should be able to plot it. So, let's look at what that looks like. So, I have my COVID data that I imported. And then I can just run the plot function on it. I don't have any argument. So, let's see what that looks like. Great. So, this is kind of cool. I get to see a plot, like a histogram of the frequency of the number of cases according to their age. So, that's pretty cool. And so, these are some of the examples of the kind of outputs that you can get. And you can install many more libraries and dependencies to get many more kinds of outputs. So, one of the standard data signs flow that you do, you can even actually inspect. So, right now it's not very clear what the state of this COVID variable is. So, I can use the variable explorer and I can actually see that I have this COVID variable and I can actually open it up in a full screen. And I get a full, like, CSV view of it. So, this is helpful just to make sure that it's in different orders. So, it's hard to tell sometimes, you know, what the state of a certain variable is. So, I can use this variable explorer to just verify that it's in the state that I'd like. So, that is a standard data science example of using Jupyter Notebooks to clean, analyze, and view some data. But what does Jupyter Notebooks look like from a playground Ripple example? There's another notebook here which is a TypeScript notebook. So, as you can see, it's using TypeScript as its runtime and has a language of TypeScript selected. And I'm using this notebook to play around with this Express server that I have. And specifically also to play around the Axios library. Because I don't 100% know, you know, how it works and I want to make sure that it works in the way that I expect before I'm adding it into my code base. So, let's start by running this server. So, I'm going to go into the package.json and I'm going to hit run script over here. Cool, that it looks like it's running. So, let's go back into our notebook and I already NPM installed Axios so I can just run this. This will start TypeScript and start this base request instance. And now I can use that request instance across many different cells. So, I can start off with just running to get the home page, which is just the default Express home page at the moment. I also created an endpoint called api so I can call that and I can see oh, very cool, I can grab that. I can copy and paste this cell and change this to okay, I want to actually grab users. So, let me type this users instead, run that. Cool, I get three names and I can use this to play around with Axios, get it to how I like, play around with how my Express server is reacting to different calls and work on my code at the same time. So, this is pretty helpful when you're working on both the back end of the front end, but you don't really want to go in and set up this large project or inject all of this into a project that you already have. So, you can take a notebook and work on it independently in isolated space and then when you're happy like, oh yeah, I'm kind of happy with how this Axios work is working then I might copy and paste over the code into my client side app. So, this is helpful and it was cool to use, but you know it's a lot of code and sometimes I'm only working on my Express server and I'm not really working on the client side. So, I want to create a notebook that will help me just do REST calls and not deal with any of the code that's associated with it. But I want to do this all from VS Code because I want to be as close to me developing my server. So, I, at the beginning of working on the VS Code team decided it would be very cool to create a notebook that will run REST calls. And so, this is a custom notebook which is why it doesn't have the IPYNB ending. It's not part of the Jupyter ecosystem, but it's instead a special notebook that can only be run on VS Code. And so, let's look at what that looks like. So, it has the name REST Book and if I click into it I see that I don't have a running. Let's start running it. So, I have the same markdown cells, but I have a special REST Book language and this language introduces all these syntax highlighting and such. So, let's start by running one and see what it looks like. So, let's run the basics. Cool. So, I get this cool view which is different from the other this view over here. It looks a bit nicer in my opinion and I can go through the different areas of information. I can see what I sent. I can see the headers that I get back and I can see the data. I can even switch to a different kind of output. So, there's a built-in HTML view and I can actually see what that looks like. So, yeah, that looks like the HTML that I expect from my Express app. I can go back to this view. I can make sure that certain things exist. So, let's say I want to make sure that Express exists. I can enter search and I can see, okay, yeah, cool. This is exactly what I expect. And, like other notebooks, I can keep running in other cells. So, this one doesn't show that much data across cells. It's a lot of just querying. So, I can grab users and then I can grab all the users and then I can grab the information for a specific user and that's all very cool. But, you know, when I was working on this notebook and when I gave previous presentations, someone gave a really cool feature request idea of actually utilizing the state part of notebooks and actually using the information from one notebook in another. So, to do that, I implemented that in my custom language where I can declare something to belong to certain variable. So, let's say let's foo equals this. Now, when I run it, foo has the value of the return from this call. So, now I can actually use foo over here instead of the hardcore name sana. So, I can do dollar sign foo and let's grab from the data that we got back and it was the first item. And now, if I run it, I get the same call again with sana and I can get all of the information and now I can, you know, dynamically choose a second user and so on and so on. So, that's helpful if I just want to have almost like a test class in my notebook where this is kind of my testing but not an official testing suite but just a side testing suite which I use to just mess around with my server and make sure that it works in the way expect. I can also do sorry, I have a lot of little gnats in my house. I can also do post request so I can send to my server, hello world I can see that my server says it's received this and that looks good. And then this is all useful but what's even more useful is to also have API keys because we don't always want to be saving our sensitive information just purely in data like this. So, the other very cool part about doing custom notebooks and using VS Code APIs to make notebooks is that you also get access to all of the other APIs that VS Code already supports. So I get access to all the language APIs and that's what I can use to make a very rich language so I can get auto completions like this user agent and I can say, you know the user agent is me for example and I can get like all the syntax highlighting everything that you would expect from language APIs but I can also get access to the secrets API which is an API that allows you to save sensitive information to your VS Code that's not available that you can use later in your various extensions. So what does that actually look like? So let's start with I have this command called secrets so command shift P you open up the command palette and you can search for restbook secrets so enter that and let's add a new secret so let's call it my secret secret key cool and then let's make my secret key be open js is the value. Alright so it looks like we successfully saved that. Alright I took a quick pause to deal with this bothering me but alright so we have our secrets saved so let's look at how to use it so we can add a code cell and let's start another quest local host and let me just check yes so I have this endpoint called secret so let's use this I'll just copy this over and we can use that and then and then I can actually access my secrets like this so I can do secrets and then I've got my secret key and if I send it I can see that I respond with I have a secret and if I look at the actual logs of my server I see that I've actually received that same secret that says open js and if I look at the information about the request that I sent I actually hide the secret so this is super useful for if you want to share this notebook with others but you don't want to send them the sensitive information all the sensitive information is hidden but you can still use it to make those calls and the cool useful part of this is you can have your co-worker or your friend have a secret or the API key saved in their secrets as hopefully the same name and then they can run the notebook and get the exact same result but you're not ever risking the risk of actually sharing your secret API keys anywhere and just to make sure this work let's try changing this API key so let's go back to our secrets and we see this my secret API key let's view the secret and let's just change it so let's call it hello instead enter and so now I see that I've saved it and let's run it one more time alright so from this view it looks the exact same because for the encryption part you don't really see anything but as you can see that I have a different response so I can use as many API keys as I want I can save as many secrets, I can change them as I need and that's super helpful for actually doing REST calls so this is one example of a custom notebook that's solely in VSCode that's using the VSCode APIs to create the notebook and as well as integrate with the rest of the extensibility and functionality that VSCode offers extensions we have another example and I'll close these for now we have another example called the github issues notebook so the github issues notebook started from a need from our team that where we live on github all of our issues are there, our road map is there iteration plans are there literally everything is on github including all of our bugs and we get several hundreds of bugs every day we get a lot a lot of bugs I think if you look in the repo now there's probably about 5,000 issues there's a lot going on all the time and it's pretty annoying to have to open up a browser every single time and go on to the repo and then search for the specific kind of like issues that you want like specific labels and such and you have to do this for each individual repo and also the VSCode team a lot of our work is spread across several different repos because we like to separate the work out into smaller extensions so a lot of times people on the VSCode team are managing multiple sections all at the same time and so it's extra annoying to have to open up different repos and check different repos for the same same values of this is I'm the author and these are bugs assigned to me or open to me or whatever so to help us with that experience we made the GitHub issues notebook and so this helps us triage and work through all those github issues all within VSCode all within one notebook so it follows the same github language where we have repos like repo and we have is open, assignee, etc but we also added a couple extra things variables so dollar sign repo referring to this is now a variable of repo there's another variable of who I am which is my github handle tannic beer so if I run it it actually ends up running all of our notebook cells and you can see that it's going for this one it's going through these three different repos all at once so the repo, the github pull request extension and the remote extension and looking for all the issues that I've created as this is really helpful to see everything in one view and I can even open all these issues and if I click this button it will open 14 tabs all each with each individual issue so that's a really easy way to just go through all of your issues let's look at specifically are my repo that I want to see so all the open issues that I'm assigned to in my repo so I see these so I need to add these three features to my restbook and we actually use this extension on the vs code team so if you clone vs code which I have right here you'll see this folder notebooks and we have a bunch of different notebooks that we use to go through all the different issues we have endgame related things which are when we're releasing we have some extra issues and work that we have to do around we keep track of paper cuts here we keep track of everything and this is what our team uses and we add a lot of information of how to do the different roles if you're on inbox tracking which really means just going through all the open issues on our repo for that week you get a lot of information on how to do that and then you also get already sorry you get code cells that show you what to run all that information and we use this heavily in the vs code team to iterate through all of our issues so that's a second example of a custom notebook that is useful on the vs code and we have one more example so last example is we have a kusto notebook so kusto is a language that we use in our team to create through all of our data it's an open language and we use kusto to just go through all the telemetry data that we have so kusto offers some playground data so these are store events and this notebook is connecting to that kusto cluster and you can use the kusto language so I can run this and I get the outputs of what they would look like in kusto a couple bugs here and there with the rendering but this is pretty much exactly what it looks like in kusto and so I can do some more fancy stuff so kusto allows us to do some graphing so I can put all this data on a chart so I can see by state which ones are the more popular states for storms so running this I see okay texas is pretty popular and these are quite these are also like interactive charts as you can see when I hover over I get some exact numbers so I see that texas is quite popular and then kansas is second popular and you know that was cool but I want to see pie chart versions I can run the same query but just finish it off with a pie chart and then I get an interactive pie chart like this and so in this notebook it's a really quick and easy way to play around the data that we have and see what we get and then I can share this notebook with my co-workers to see you know oh hey look at this pie chart of data so yeah this is one other way of interacting and normally I use azure data azure data explorer which is a website where we run kusa queries on but this is all within VS code all in one spot and I can run multiple queries on the same page and then send someone hey this is my analysis this is what I see so this is like data science but it's not using any standard language it's using kusa language which is a specialized language within Microsoft so these are some customer books and going back to my power point so at first I showed you Jupyter notebooks and that is a standard experience outside of VS code and within VS code except VS code has a couple extra extensive features but then I also showed you custom notebooks not Jupyter custom notebooks and these are notebooks that are made specially for VS code that's using VS code APIs to create the notebook and it only works within VS code so this was the rest book this was the github issues notebook and this was also the kusto notebook and the cool part is anyone can make a custom notebook we have our API open you can use it today you can make your custom notebook to do whatever you'd like and you get the full engineering support from us so you'll get all the security and performance from us the notebooks will have access to all the key bindings the editors have access to the themes you get everything that you would expect from normal editor but you can make your own notebook you can use a rich API that already exists for other parts like I showed you with the language API you can use the secrets API you can use all of the other APIs that VS code offers for extensions and you can be discoverable through the marketplace and this is really exciting because we're excited to see what kind of domains come out of this come out of notebooks we just showed you a couple but we're very excited to see what you guys will come up with with this API and what kind of cool notebooks that are outside of experiences that we already have today so thank you for attending this talk and getting a deep dive into notebooks some next steps you can do to explore notebooks further one is you can install insiders so that way you get the latest experience with notebooks and any other features that VS code is working on and if you want to create your own notebook I did a live stream two months ago on VS code about how to actually create a notebook and I did I coded up a notebook within the live stream so you can see how easy it is to do it takes about 30 minutes in that live stream and it's really easy to get started so there's a link that you'll have access to for this YouTube link but yeah and thank you so much for joining hopefully you get creative and we're very excited to see what kind of notebooks show up in the marketplace from you guys thank you guys see ya