All right. Let's do this. All good. Perfect. So, hi everyone for this last session before the evening. It's going to be a workshop. It's a one-hour workshop, so it might be hard to, like, we cannot afford to go through the tables, etc. We will need to move on. So, that's why we did a repo and you can basically follow step by step if you need to. But we're here to, like, present you, guide you through the steps to show you how to build your first VS Code extension. My name is Nicholas. I'm a web developer working at the company named BuzzBud here in Montreal. We're developing a web application which is like the Expedia, but for buses. So, if you want to take a bus to go from Montreal to Ottawa, you can go on BuzzBud. You will compare all the operators and you can do that not only in Canada, but in 80 countries in the world and still paying Canadian dollars, for example. That's what we do. And I'm Floran. I've been working with Nicholas in the past year and now I'm a senior engineer at Shurestock. Shurestock has an office in Montreal where we build most of our product, footage, and premium bits. So, if you need cool images for your project, awesome sound tracks, or 3D effects, go to Shurestock.com or PremierBit.com and we'll find something good for your next YouTube video or Instagram story. Quick question to start with. Who here is using VS Code at work or personally? Yeah. And among you, who is using JavaScript or TypeScript? Most of you. So, that's perfect. You're in the right room and even if you're not doing JavaScript TypeScript, what you will learn today, it's going to be helpful. So, I'm not going to present VS Code. You know that. I'm going to insist on the fact that VS Code is a text editor with a marketplace where you can find a bunch of different extensions that allows you to configure your editor to the project you are working on. So, if you want to work with Vue, you will have some nice extension to improve your tooling to work with Vue projects. And if you want to move to Elixir, well, you can install extensions to work with Elixir. But not only you can install different extensions, you could actually build your own extension. It's not that hard and that's what we're going to do today. The extension we're going to build is going to do automated refactorings for you. When I said refactoring, I mean a transformation of the code that doesn't change the behavior of the code. That's important because we tend to use refactoring for almost every time we change the code without a business need for it. Here, we really mean that transformation of the code to redesign it in a different way, but the behavior doesn't change. That's what we're going to do. So, let's dive in directly and have a look at what we want to achieve. This is called the Gilded Rose Refactoring Cata. Who knows that cata? I'm going to teach you something today. This cata is a coding exercise. The goal is for you to implement a feature in that code base and, as you can see, it's not a very nicely written code. It's quite dirty. So, the goal of this exercise is for you to practice refactoring so you are cleaning the code first and then you can implement the feature.  Usually, the first step is to change that imperative for loop to a more declarative forage on the items. Then, yes, you copy paste the rest of the code. You replace this. I'm going to do it. So, I do that. Then, I need to replace all of this for the item. Then, maybe I want to extract this. Yeah, this is a magic string. I want to put that in a variable, hbree. And then, I replace that and this one, too, to the same reference, etc., etc. So, you do that kind of operation. And, as you can see, it takes me some time to do it manually. Let's rewind a bit. Actually, I'm going to rewind with git. Okay, let's restart that. What if I could do that? So, see, the difference of doing that because of the tooling allow me to just do it automatically. In terms of productivity, this is awesome. So, this is the kind of tooling that we're going to build today together. Unfortunately, one hour, we won't have the time to do the convert for loop to the forage or the extract variable. There are too many edge cases inside. But, what we're going to do is convert that kind of function. So, imagine you have an asynchronous get function that takes a new array and a query and that, you know, fetch some data. So, let's say for some reason, instead of having a function declaration like that, you would like to convert that to a variable declaration of a narrow function expression. So, you want to have something like that instead. What we're going to build today is this automatic transformation. Okay? So, we need to build a VS Code extension. To do that, you need to create a new project, a not project. You need to compile your project so you are exposing to VS Code an API it can use to trigger operation in the editor. And, fortunately for us, we don't have to do that by hand for every time we want to do that. Microsoft, well, the team developing VS Code, they are providing a generator for us. So, we don't have to do the boilerplate code every single time. Kind of like create react app, if you will. This is based on something called Yo-man. Yo-man, it's an old tool. You can actually use it. With Yo-man, you can create code generators and Yo-man will ask you some questions. You will fill the blanks and it will bootstrap, like scaffold the application, the basic application for you. So, you don't have to do the boilerplate by hand. So, we're going to do that. What you need, is it big enough? Yeah. So, you need to install globally on your machine Yo-man, which is Yo. And then, the generator you want to use, which in this case is generator code. I already did that. When you have that, you can say Yo-code and here is Yo-man in action. So, here you can see the different options that you can have. You can create a new extension or other things that we're not going to get into. And you can even select if you want to do that in TypeScript or in JavaScript. So, in our case, it will be TypeScript. Then you give it a name and then you select if you want to use npm or yarn. And at the end, what you end up with is the code I made you clone at the beginning of this session. So, when you have cloned that repository, this has been generated by Yo-man. We're starting from here. I don't like when code has been created and I don't know what's inside. So, let's make a tour of the created files. The first thing you have here is a VS code giving you some useful links and resources to know how to build an extension. Fortunately, for us, we're doing that today. So, we don't need this. I choose to use a TypeScript project. So, we have a TS lint and a TS configuration. So, everything is already ready to compile the code, etc. for you. A readme. The readme is important because when you are done with coding your extension and you want to package it and publish that online, that will be the front page of your extension. That will be what the people will see when they want to install your extension. Then you have a package JSON. It's a regular one. We're going to get back to the VS code custom elements which are inside. You have a change log. You're encouraged to maintain a change log. You have a git ignore. You know a git ignore. And you also have a VS code ignore, which is serving the same purpose. But again, when you're packaging your application and serving that to everyone, you don't want to include the test file, the source code. You don't want to include the VS code extension, quick stock markdown that we deleted, all of that. So, you only want to get what's packaged and ignore the rest. Then you have the source code. Inside you have the test folder. So, you already have an environment where you can test code against the VS code API. So, if you want to do integration tests with VS code API, you will write tests in there. And finally, you have the entry point of your extension. So, I'm going to present that.  So, let's get rid of that and see what we have inside. So, an extension really is two X public functions for VS code. An activate function that VS code will call whenever your extension is activated. And a deactivate function. In case the user deactivate your extension, for example, this is a moment where you clean the things that you're maybe storing in the global state or anything. Let's link into the activate function. So, you receive the current context of execution. You can start doing things like logging, and you will see that in the console, the output of your extension. But we don't need that for the moment. And then, what do we have here? Here, we are registering a comment. And a comment is the thing that the user will trigger to make your extension do some work. In our case, convert to a narrow function expression. And we make the context subscribe to that new comment. This is the comment ID. Comment IDs are shared. So, usually you prefix that with the name of your extension. And then, this is usually the name of your command. But it's a convention. You can come up with any unique string. What's important is, in the package json, you're telling VS code that this comment needs to be activated. And you're even giving it a name to be displayed. I'm going to see that in a moment. Okay. What this comment is doing? It's using VS code API to show an information message. Now, when you are here, you can debug your extension in a sandbox environment. To do so, you can use a shortcut of VS code to launch debugging, which is F5. So, you can do that, press F5. And what this will do? Yeah. It will open a new VS code window. Close my VS code window. Oh, sorry. I run the test. I want to run the extension. So, it opens a VS code window, a new one. It's a bit tiny to see, but you can see on top of the window title, you have an extension development host prefix. This is telling you you are in a sandbox. And in this specific VS code, you have your regular VS code, but it compiled your extension and it made it available in this sandbox. So, you can test your extension as if it was published and you installed it. So, if I open the command palette and I look for hello world, I can see the command that has been generated from human. And I can execute that. When I execute that, I can see it show me an information message here. And if I try to change that message and that I recompile and run that again, it works. So, so far, we have followed the getting started of the VS code tutorial. You could have done that at home. Now, we are getting into the interesting part, which is like doing something from this extension. So, I told you we're going to do an automated refactoring. The first thing I want to do is to change that hello world to something more meaningful. So, convert to arrow function. And I will change that also in the package.json. And I will change that text to, now we're not going to show an information message. And this is my first question to you. What is the first step we will need to do if you want to transform the existing code to our new code? First step. Yeah, so, yeah, read the existing code. Is it your input? No, that's the next step. So, yes, the first step is to retrieve the existing code. I want to read the code from the editor. Then, yes, I want to transform that code. So, I'm writing high level implementation for the moment. And finally, what do I need to do? Write this transform code back. Okay. So, let's implement these three functions. So, read code, text nothing and it should return me a string containing the code of the editor. So, this is a part where I'm giving you information about the VS Code API. But all of this you can find on the VS Code documentation. And that's also why I choose TypeScript because you will see that the auto completion help you discover what's available in the API. So, in VS Code you can access the window and inside the window you have the active text editor. The active text editor, for example now, it's this very file extension.ts. TypeScript is telling me that either you receive a text editor, either you receive nothing because maybe you don't have an active text editor open when you run that command. So, I retrieve that editor and if there is no editor, well too bad, so sad, I'm going to just throw a new error for the moment. No active editor. So, yeah, there is nothing I can do from there. But once I got the editor I can access the document and this has a method getText and this getText is returning me the content of the file. That's it. Then let's implement the transform function. So, the transform function takes some code and returns some transform code. For the moment we're just going to show that it works and I will append to a new line like a dumb comment just to see that it works when I run the code. So, transform from extension. Finally, I need to cannot see what. Unplug and re-plug again. So, I'm going to implement the write function. The write function takes some code and returns nothing. It will write to the editor again. I'm not calling, I'm waiting for you. No problem. So, the write function, you don't have a VS code method to write directly. This is a part where you're, when you're building an extension you need to go into the documentation, see what's available. You have lower level methods and you need to come up with your own write function. The good news is once you have done that you don't have to do it anymore. And that could probably be published in some package to give you more high level functions to manipulate VS code API. You need me to do anything? What can I say? Thank you very much. Nice. Thank you. We're back. Thank you. So, how do we write into VS code? In VS code you have that concept of workspace that you probably have encountered when you open a new folder. You're creating a workspace to work on. And on this workspace you can apply modifications. So, apply edit is expecting me to provide a workspace edit. So, let's provide that. I'm going to create a workspace edit. And what's available in the workspace edit? Well, I can do a bunch of things. I can create files, delete files, etc., etc. What I'm interested into is to update the content of a file. To update the content of a file, I need to provide the identifier of that file. So, that will be my document URI and a list of text editions. How do I retrieve the documents? Well, I had that in the editor. So, I need to get the active text editor again and then I can have my document. Okay. I need to do some updates. There is only one update I want to do. So, I'm going to call that update code. This should be a text edit based on the signature. So, I'm going to create a text edit. So, see I'm leaning on the types and documentation to know what the next step is. Okay. A text edit is taking two things. A range and the text to insert. The range, that's because I could select some text in a partial selection in my document. But in our case, we want to select the whole document. So, let's pretend it exists and the text I want to put, it's the code I received as an input. Okay. So, I need to create that whole document range, creating that, and it takes two positions. The first position, what do you think it will be? Zero. Yes. I'm going to start from the very top of the file, zero, zero. And I want to go to the very end of the file. Hope VS got worked when it creates range. If you provide a very big number, it will cap yourself to the end of the file. So, I could do that. I could provide a very big number and hope you never get past that. I have a less hacky solution, though, which is to use the document that we have. We can access the line count. And the position is zero indexed. So, pretty much like an array, the line count will always be the index of the line after the last line. So, I can get there and I know that I will always be at the end of the document. You do that once and then you never think about it again. So, we're done. Looks that there is no more red. Let's recompile and try that. So, let's get rid of this. If I look for convert to our function, I execute and it works. It transforms my code and adds my comment. That's cool. Now, we need to think about this transform function. So, we're done with the VS Code API. When you have done that, basically, you can forget about VS Code API. You have done that. You're good. And then, the core of our logic of our extension or domain, if I may, will be the transform function. And this doesn't depend on VS Code. This, I could extract and you need test. How would you transform the code? Yes. That's a very good first answer. Transformation of, you receive a string. You want another string. Regular expression usually works until some point. Because it will be very hard to handle, like, you only get a primitive string. So, it will be hard for you to get all of the nuances and the more you are getting into edge cases, and that can come very quickly, the more it will be difficult to create and maintain regular expression transformation. Now, instead, yeah, we need to have a better data structure. Is that your answer, too? Yeah. Abstract syntax tree. Yes. Who here have never heard about abstract syntax tree, AST? Okay. Who knows a lot about AST? So, sorry for you, because we're going to explain what you already know. But knowing what's an abstract syntax tree, AST, I'm going to say AST, is important. And this is exactly what Flora is going to present to you. Thank you. Back to the presentation. So, I guess there were a few issues with launching the configuration. I guess there is a fight that wasn't committed, like the launch.json. And, you know, if the fight didn't work, is everybody okay with that now? Or, yeah, I could show the launch.json. Or, if we can take a minute, so this way you've got it up and running. Oh, it was ignored. Yes, sorry. It was generated by Yeoman, but my default configuration made it in yours, so I didn't push the VS Code config. But you need that to launch the debugger. Otherwise, you can write it. All right. So, what do you have here? So, run extension, runtime executable, exact path, outfile, et cetera. And as a pre-launch, it does an NPM watch because I guess, yeah, building TSC, et cetera. I would recommend you to use the Yeoman. I will update the report to push that so you get the files. I didn't write them. These are files you can write, not just in extension code. Like, if you want to automate things that happen when you press F5, this is in VS Code. You configure that and it runs it for you. It's just a convenient way to, you know, open the debugger mode. So, you have the proper debugger. You can add break points, et cetera. That's it. So, yeah, Yeoman, your code, and then grab those files, put them in the folder, and it's going to be all good. All right. So, ASTs.  It's a string and the computer cannot really reason about it, besides being a string and we cannot do much. There is a nifty data structure, which is called a syntax real and abstract syntax tree. There is different flavors of syntax trees. The one that we care about is AST. To produce an AST, we'll use a parser. You may have heard this term parser. Who uses a parser every day? Who uses Babel? Who uses... Okay. So, everybody pretty much, right? Who uses Webpack? Yeah, everybody. So, underneath, you use a parser, because in order to make sense of your code, Webpack and Babel use a parser. There is a lot of flavors of ASTs. They are all the same, but all a bit different. It's kind of all the same cousins. They talk the same language, but with different words. The AST is lossy. It doesn't really care whether or not you put the semicolons at the end of your lines, right? It doesn't really care if you put extra parenthesis around your binary statements. It only cares about your program. It represents your program. So, many different source code can produce the same AST, because there is this representation that gets lost in the middle. But that's okay for us, because we want to understand our program and write it out again. It doesn't really matter what's written exactly, because we're going to transform it. You may have heard of Esprima, Acorn, or Babylon, which is the Babel parser. Those are all parsers. So, depending your project, depending your company, depending where you live, you may use Esprima instead of Babel parser. There is not one that is better than the other, in my opinion. It's just a matter of preference, personal preference. In our case, we will use Babel because it's widespread and it makes for a nice use case in our demonstration. I mentioned Recast and JS Code Shift. You may have heard of them. They are both tools that help you transform your code and automate refactoring, but at the last case. So, basically, there are tools that do what we want to achieve today, but for your whole code base, they're not part of just a nifty VS Code extension. You could actually build a VS Code extension based on Recast with some transformation of Recast or JS Code Shift. That would be totally feasible. So, yeah, yes, T. So, what is that? Who knows what's the name of that data structure? A tree. A green tree. All right. And the tree is composed of nodes. Each node has a class and it has children, which are the node's properties, right? Nothing really crazy so far. Each node, as I mentioned, is a certain type. Each parser will implement a different kind of type. So, the transformation that you implement for Esprimo are not working with Babel, right? These are not the same objects. They are very similar. They are named similarly, but these are not the same objects. So, if you try to use Babel types to transform something that has been processed with Esprimo, it's not going to work as expected. Let's take this small example. Console.log.l will likely be the first line of code you have ever written in JavaScript. Let's go through it and see it as the AST is. So, the first thing that you see is that it's an expression statement. So, this is the whole line as an expression statement. This expression statement is connected as a child, a single child, which is the expression itself. The expression in blue is really a call expression. And it's really just those parentheses. If you want to think about what kind of expression it is, the expression is putting two things together. A callee on the left and a call argument, a list of arguments on the right. So, this call expression is really just the parentheses. The callee, who guesses what the callee is? Is it console.log? Is it log? Is it .log? What is the callee? Console.log, yes. And on the right, the argument's quite easy. There is a single argument, so let's not spend too much time on that. This console.log is actually broken down even more as a member expression. It's made of two things because you're calling a member on A to get the left part, which is the object. And on the right, the property that is getting called on the object. So, every time you see something that A dot B, it is going to be a member expression. If you consider A dot B dot C, it's going to be a member expression made of another member expression. This member expression is that you got the object and the property, and then the string literal. String literal is a final node. There is nothing much more we can do to it. It's just a string. And this member expression is made of two parts, the object, which is an identifier, and the property, which is also an identifier. Identifiers are also final nodes in the AST. When you see identifier, it's ever something that you've written yourself, not as a string, but as, you know, like an identifier in the code. Let's write this one. So, the previous one was six elements, right? It's a tree of six elements. This one, how many elements? You want to make the price one? And, and, and, and, and, and I got shirtless socks from shirtless socks for the one who's got the right answer. Guesses. Three, four. So, it's going to be less than the console log, right? Five. Three, four, five. I guess I will keep my socks. Okay, why six? Can you go with me? I come here. Okay, let's go together. All right, six. All right. So, what is the first thing you think? How do you call that? The first thing? The first node in the tree. What would it be? Yeah. Yeah. And what would we call that? It's a declaration. Can you, can you step, step from the light? So, the first thing is the declaration, really. It's, we have the const. So, you have const declaration, you have let declaration, and the kind of the declaration is a const declaration. If we had let t equal object dot t, it would be a let. If you used var, just replace kind by var, and you got yourself a var declaration. We see where we can go with this AST. You know, we can reason about our code and we can start, you know, thinking on the hot sheet things. What is the next thing you think we do in there? After declaring our const key, object key. What is the next thing? There is a declarator, which is, yeah, technically the assignment part. So, it has two parts. On the left, the identifier that we assign, and on the right, the initialization expression for your thing. Then the identifier, what is the identifier thing? It's key, definitely. And on the right, what, what kind of thing we got on the right? The volume, but what kind we've just seen it? A member expression, but a computed member expression, right? So, there is a slight difference. But for the computer, whether you call something dot something or something braces quotes, it's exactly the same. It's represented the same for your compiler. Just with this computed true that is different. If we remove computed true and reprint the code, it's going to just write console.t. And then we've got an identifier and a string literal. Awesome. Which is six. Thank you. So, let's check it out. As you can see, even a small thing like that can be really hard to get our head around. You know, like a simple console log is six, six members. This, this member is six things as well. So, here I've opened up. Oh, wait. So, this website, who knows asexper.net? You know it. Cool. So, this website works with JavaScript, but it works also with a bunch of other languages. It helps you print the first representation of your programs. So, you can walk around it and go around it. So, let's go back to our console.log. We've got our expression statement. There are call expression. We've got the call leader is the member, identifier, et cetera. So, when you're actually in AST world, don't spend your time trying to print stuff out to your console, because it's always going to be ugly and impossible, and you will explode the console buffer. Just go there, paste your program, and try to understand what's going on. This is an amazing website. If you're interested in understanding more of the AST, I would recommend that you just go there and have fun with, you know, some lines of code that you know or that you want to play with. All right. So, now I want to talk about transformations, right? What we want to do is take this function and transform it into a narrow function. So, how are we going to do that is just by transforming the program representation in memory. So, we're going to take this syntax tree and we're going to transform it into something different by creating new nodes and removing nodes and removing elements from that tree. But it's just that, and because it's all represented with a grammar and some objects that we can manipulate and understand what they are, is it a call expression or is it a function declaration? Like, we can make the difference and we can really find what matters. As I mentioned, many libraries can offer transformation, but we're going to focus on Babel for today. So, Babel, how does it work? It's a compiler, right? It takes a blob of string, which is JavaScript or TypeScript or anything actually, puts it into a parser with some syntax plugin. If you're using TypeScript, you're using a syntax plugin because a TypeScript syntax is actually not understood by your JavaScript parser, right? It's not the same language. So, you've got plugins, this parser, the parser, we spit out an AST, then Babel will run a bunch of plugins like, hey, make it compatible with ES5 because I'm targeting browsers and boom, you got yourself new JavaScript in the end. But you can imagine plugins that transform your JavaScript code into PHP code. Like, why not? No problem. You can do whatever you want. Babel plugins are abstract syntax-free transformers. The thing they do, once they got the AST in memory, is that they take it, they try to figure it out, and they transform it into something different, something that is compatible with an older version of JavaScript. I don't have any big example in mind, but let's say we want to remove all snake keys from our code. We'll write a Babel plugin that for each identifier that we find in our code, we'll replace its name. So, here, we are back in ASC Explorer, and it's really practical because they got this transform element here, where you can say, okay, I want Babel as a transformer, and here we see this visitor, and what it says is that each time you encounter something that isn't an identifier, run this function. And in this function, we're going to take the node name and replace it with the camelCase version. So, this is a very simple transformation, but this is what we want to do in the end. We want to take our function declaration and transform it into a narrow function. So, we know how to do that now, and as you can see, we started with the code on the top left with the user underscore name John Smith, and at once we've replaced all the occurrences of the underscore username by a camelCase username, but it works also with any other key, if, oh yeah, you've got a weird keyboard, you've got a name. All right, yes. So, if I do that, and I call it not age because there is no underscore, but birthday, you see that birthday is not also automatically converted because I've not used the regex, I've used something that for each identifier will transform the contents of my code. So, it's a bit smarter. Next, we want to replace the function declaration. So, what we'll do is that we'll implement something very similar through the same visitor pattern. So, for each function declaration, we'll replace it with a narrow function, and we'll write this to a row function together that takes the node and replaces it. All right, so let's start with that. We've got the get function as we've written, as Nicolas has written on the on the screen with this body that is empty. So, this is a function declaration as an identifier get. It has the parameters, the list of parameters that are passed to the function as the list of identifiers. It has the body, and it has a sync flag. It's got more properties, but these are the ones that we really care about today. So, it's very simple, only one node in the ASC is needed to declare this function, right? So, now, if we go for this one, how many nodes do you think we need to do this counts get equal as sync URL query with the body? How many? I've got a bag. I've got a bag of sort of goodies. It doesn't. So, the question is, how many nodes in the tree do we need to have, or how many nodes does this second implementation, the counts get equal, we'll represent in the syntax tree, given that we left the body out. But the body is a single, you know, entry point as we can see in the function. It's a block statement. And we can assume that it's going to be the same on the other side. Six or seven, five. Okay. Let's go through it. I don't remember the answer. All right. So, first, we got a variable declaration the same way before we declare a variable and it's a count variable, right? We'll have a variable declarator the same way we have before. So, that's two. There is an identifier, three, the get, and then the arrow function expression. Four. Four. Who said four? Nobody. I will keep my shirt good. All right. So, now that we have our identifier, we see that we can map one on one everything. So, let's go backwards. We're going to stop. So, here I'm going to stop by the end. When you code, you may find yourself in a situation where you prefer starting by the end, starting by the beginning, inside out, outside in. Nicholas and I have different ways of thinking about it. It's find your own way. You have to practice a bit to transform the trees, et cetera, and you'll find a way where you're comfortable. So, here we're going to start with the arrow function expression, which is the deepest element of the tree where we pass the params and the body. Then we'll copy the identifier and next put it into a declarator and then finally return our variable declaration. This is exactly what we want to do in our extension, right? We take a function in and we transform it as an arrow function. And this is what Nico will show you right away and that will implement in the extension. Nice. So, let's do this for real. So, back in our transform function, let's move that to a new file so we can start working on it. So, we need to install a bunch of stuff from the internet because we need Babel. I'm going to do that.  So, again, this is the thing you discover progressively. I'm guiding you through it. We need to install four packages. All of them are from Babel. I'm going to use the short end syntax. The first one is the parser because we receive that code string. We need to parse that code string to get our AST. Once we get our AST, we will need to traverse that AST so we can transform with the visitor pattern. Finally, we want to generate from that transform AST. We want to get back to the code that we return to the editor. And in the middle, we also need Babel types so we are able to generate new nodes in our AST. Installing the internet, yeah, it works. Okay, so let's do that. Oh, sorry. So, Babel generator, Babel parser, Babel types, and Babel traverse alphabetically. You can also install Babel and it will come with everything. I like to grow granular. So, first step, I parse the code. Okay, I need to import pars from Babel parser, yes. By the way, this is a moment where I can provide parser options. So, if I want to tap into Babel plugins, for example, hey, Babel, can you handle typescript files for me? I will just ask it, like, to use that plugin. Typescript, yes. And yay, now it works with Typescript too. And all the kind of, you know, the new syntax that doesn't is not yet existing, but you want to handle. So, you provide plugins and Babel will be able to parse the code for you and generate a valid AST behind. So, in the case of Typescript, I think it's because I think it's the only one with different file extension. Yes, I think it will look at the file extension to determine that it's Typescript code. For the rest, I guess it's a matter of I can convert that syntax to a valid AST or I can't. And it depends on the grammar you are giving to me.  So, when you encounter that syntax, you know how to translate that. If I don't provide, when it encounters, the syntax is invalid and it will throw an error saying I cannot, the code is invalid, I cannot parse that. That's how it works. In our case, I'm going to keep that simple, we only need basic JavaScript code so let's parse it. We got our AST. Oh yeah, auto import, nice. So, I want to traverse that AST and I will provide, you know, the visitor pattern, a handler, to transform that AST every time I visit a node. That will mutate my AST and from that, I want to regenerate, no, it doesn't understand this one. I want to regenerate the code. So, I need to import here and I'm doing it for real so you see what's behind the curtain. Turns out, you cannot find the type declaration for this module because I'm in TypeScript and for Babel parser or Babel types, they provide me with type declarations, not Babel Generator. So, when you're in that situation and that's why I wanted to show you, you need to install them from the types packages which contains like types for a bunch of libraries that doesn't provide you the packages. So, in that case, Babel Generator and actually Babel, yeah, the Babel Traverse was wrong. Babel Traverse too needs some love. So, I'm going to install from types, Babel Generator and Babel Traverse. Yes, now it understands what's behind this. Okay, it complains again, that's because Generate doesn't return me a code string, it returns me a result which contains the code string and the source map. In case you need that, we don't. All right, almost there. So, we're traveling that AST now. We want to do exactly what Ferrand teaches you. So, when we encounter a function declaration, we want to replace that pass with a new arrow function that will create from the current pass node. I need to create that function now to arrow function. So, it takes a node which is, and this is where I will need the Babel types. So, I'm going to import all of them. This is a nice convention so I can access all of the little helpers of Babel. This is a function declaration, right? And it will return me actually not a narrow function but a variable declaration because this is what we have decided to do. All right, I need to implement that because for the moment I return nothing. So, personally, I start from the end. That's why Flo mentioned that we're not going the same way but at the end it works the same. So, I'm starting from the very end. Okay, you need a variable declaration. I'm giving you a variable declaration. Okay, to create a variable declaration you need to provide me what kind of a declaration is it. So, in our case it's a const and a bunch of declarators. So, I'm giving you an empty list. Let me give you a first declarator. So, I need to create that again, a declarator. Can you create a variable declarator for me? Yes, but you need to provide me an identifier. Okay, I will give you an identifier. And what's, so, identifier on the left, what's on the right? The arrow function expression, yes. Thank you. Oh, yeah. So, traverse, yeah, it's not super easy to read but the first argument is the AST. The second argument is an object which is, like, it's the implementation of the visitor pattern. So, it will take as methods, the methods will be named as the node name. So, for example, I could provide an enter method that will work for every single node. In our case we want to target only the function declaration nodes. So, I'm providing function declaration. The key is actually the function declaration. Yeah, so basically in the visitor pattern you provide the names of the nodes, the type of the node that you want to mutate. So, if we put identifier, let's say, instead of function, as well as function declaration, every time there is an identifier encountered in the AST while traversing, this method is going to be executed. Right? Does that make sense? So, that's why. So, traversing the AST can be also expensive as you may think.  So, you have to also be careful when you write those kind of kind of transformations that it doesn't take forever. Yes. Let's finish this. Identifier. What is this? Well, I'm creating a new identifier and I need to provide it a name. What's the name of this identifier? Yeah, at some point I will reach the input. So, that will be the node as an ID. And this as a name, maybe not what it, why is it telling me no? That's because TypeScript is telling me, oh, okay, it can be an identifier or it can be null also. It can be in a certain area where you don't have any identifier. So, thank you TypeScript for this. So, in that case, there is an identifier. I want to use the name. Otherwise, well, I will need to give up a fallback name. So, converted, maybe. So, it forces you to, this is more TypeScript-related stuff, but it forces you to, like, have a strategy for all the cases, hopefully. And finally, that arrow function expression, I'm going to build arrow function expression. And here, I will just pipe the parameters from the function declaration node to create my arrow function expression. So, it takes the params, then it takes the body, good news, I got the body, and I will also provide it the async boolean value. So, this is, in the end, the code that Florent showed you. And this should work. So, let's compile that and run this. So, convert to arrow function. Oh, yeah, I was too fast. Convert to arrow function. No, it didn't work. I need to reopen the debugger. So, recompile, convert to arrow function. Oh, thank you. Thank you. Yeah, I inserted, I told you it's an actual debugger, so I inserted the breakpoint and I exited, and because it's live coding, I wasn't concentrated. Yeah, it executed, it worked, but I want to, I want to see that again. Sorry, I'm redoing it. Okay. So, no more breakpoints. Yes, it works. So, here we are. At the end of the session, we did this together. Today, you learn to create a new VS Code extension, use the VS Code API to read the code, then you learn a bunch of AST stuff so you are able now to transform any kind of code, and this doesn't apply just to JavaScript. This concept of AST existed before. It applies to any kind of languages, so that's knowledge that can be useful to leverage. And then we use the VS Code API to write back the code, and we make that a VS Code extension. The next step will be to package and publish that. So, for this, you can just follow the official documentation. It's very good. They give you advices on the, you know, the readme, the images, the colors, the things like that, if you want to pimp your extension page. And next steps will be to do cover more things that we didn't have time to cover. First, you can see that I coded, and then after some time, I recompiled, and I tested that manually. That's fine because it's a workshop. Honestly, when you're really working to a project, don't do that.  So, I showed you. You can have an integration test using the VS Code API. Honestly, the transform function, I will usually unit test that because I don't need the VS Code API. So, just saying. Also, so far, we have created an extension. It will execute on all the function declaration of your file and convert all of them. Maybe that's what you want to do. Maybe what you want to do is what I demode before. I want to only convert the selected function declaration. That's probably more like it. Also, and this is where the existing refactorings you have in VS Code or in the existing extensions stop, but we could also handle partial selection. We have the AST, so we know the location of the nodes. With VS Code, you know also where your cursor is, so you could say, when my cursor is inside that node, I consider it's working on that node. Finally, you could explore that refactoring as a quick fix. You know the little light bulb that sometimes appear. That's a code action or a quick fix. You could explore it like that, so your extension is telling the user, A, on this code, you can actually convert that function to a narrow function if that's what you want to do. If you like what you've learned here, I've got good news for you. We have made an extension that is doing automated refactorings like that, like intuitive automated refactorings. If you're doing JavaScript or TypeScript with VS Code, I will encourage you to install it and use it to see how it goes. It can help you do exactly the things that I've done at the beginning of the session. It's open source, so if you want to contribute, you are very welcome. You have the knowledge now. You know how ASTExplorer.com. There are good first issues in the repository, so you're very welcome to help us build more. That's it. Thank you very much. We have some time for questions. Maybe if you have some final question. Yeah, we've got 10 minutes for questions, so do we? Yeah. Yeah, so this is the launch.json problem. So what you can do is do your code to generate a new project and then copy-paste the .vscode folder into it. That's our mistake. I didn't double check what I pushed. I didn't version the .vscode file that we're generated, so you don't have that launch.json. But if you run your code, it will generate it for you. Nice. More issues. Yeah. Another question? Global question? Yeah. Yeah. Oh, wow. So the whole code actions work, the quick fixes.  I think every time the user is changing the selection, for example, or the code, it will call your function and tell you, okay, tell me if there is a light bulb I need to show with something. What you do in that case when you are called, you take the current code, you take your current position, and you try to determine if you are in a node where it will be relevant to execute some refactorings. And if so, you get that list and you send it back to .vscode. And if you send a list back, it will display to the user. So that will be for them a shortcut to run that comment. You're welcome. Yes. Yes. Exactly. So if you use Babel Generate, it won't care about what you had before as an indentation, for example. So you can configure four or two spaces. But for example, if you add like at some point a custom indentation, it won't preserve that. It will regenerate everything. So that's exactly what Recast is for. Recast was built on top. And Recast is trying to solve that problem by preserving this missing information, like the spaces, the breaks. They do a better job with comments also to preserve that when you transform the code. Another way is not to rewrite in like the whole file only the parts that you need. That's also another way to limit the risk. And that's a personal preference, but I know that we've standardized pretty much all our code bases now, and that the style is enforced on us more than it's on us. So it makes very good workflows with that, because this way you can really focus your transformations, etc., on actually the code and not really the aspect of it. When you start adding all these extra information, like in Recast, it gets very noisy in terms of what you want to output and what kind of code you need to generate. So I think enforcing Predeer is also a good practice. I know that we are at it. And if you think about it, Predeer is also an ASC transformer. It takes an ASD and produce code out of it. All right, you can all go home. Thank you very much.


At the urban age it is my first time and I thank all the sponsors and organizations. I will be talking about Seoul, the way that it had developed in a very short span of time and the transition from the early developmental models that made Seoul what it is. And so I set the title as Between Plan and Project, but this is from the point primarily of governance. But since our, I think, section is titled Planning Fundamentals, I would just say that planning is a culture. And as a culture it is created through history, it changes even as we speak at this very moment. And so Korea is a society that is very used to planning culture and that we need to understand the very complex historical and cultural conditions in which the way that planning and governance intervenes. And so we have a map of Seoul, the yellow line indicates the administrative boundaries. About 10 million people reside within the boundaries. The larger metropolitan area is about 25 million. Roughly half of the population of South Korea resides in the Seoul metropolitan government, in the Seoul metropolitan area. Planning was for a long time part of the culture because Seoul when it was first established in 1394 as the capital of the Joseon Dynasty was planned, was a planned city. It was based on confusion, ritual principles, and on principles of Geomancy. And so it was a beautifully organized city. It is the seat of governments. It was a political city planned to govern the dynasty. And so you have wonderful, beautiful, palatial complexes. But within this confusion system, the primary system of governance was a bureaucracy. And it was based on confusion, meritocracy. And so for taking the long historical view, the system of working through documents, through writing, through administrative systems has been with us for centuries. This culture, you could say, was transformed into a rather authoritarian culture during the Japanese colonial period that extended from the 1910 to 1945, but it had a bit of a wider historical period. And so it transformed into a rather militaristic culture. And that culture extended after independence is 1945. And then it continued on to a long period of dictatorships that extended until the 1990s. So if we want to understand the history of Seoul in terms of planning and governance, you can see that there's a great period of expansion in population. And it's now, the population has now plateaued to around 10 million. And you see in the urban age booklet that Seoul as a city of, as a megalopolis that's larger than 10 million, it is now a city that is in real crisis because the population is shrinking, is growing old, and that is part of the overall nature of Korea, of South Korea. But you can see that particularly after 1961, when the military government of Park Jung-hee comes to power, that South Korea and Seoul as a kind of machine for governance for a capitalist country has a series of plans. So a series of five-year plans and that national level planning extends into the city. And so until 1994 when local governance is reinstated, the mayor of Seoul is really appointed by the Ministry of Internal Affairs and it is in de facto appointed by the President. And so the governance and planning of Seoul is really a kind of system of national governance. And so within this bureaucratic system and culture, a very rigid system of regulation is instated and you have zoning plans that conform. And so you have even now with our very progressive mayor, we have a system of bureaucracy. But when you look back at the decades of planning, what actually drove the development of Seoul was really the projects. The big projects and bureaucracies really are a system of maintenance and so they are very rigid vertical structures. But when you want to implement a large plan, for example the subdivisions of large areas that supported the big development, really these are large scale projects. And when you want to implement a plan, you crisscross these bureaucratic systems through political will. And so when you look at all these plans, they are in fact de facto after the fact ideas that were after the big projects. And so the subdivisions that allowed the great expansion of the city towards the south, the highways that were built, urban infrastructure projects, and then the renovation into more sustainable things were all big projects that crossed the hierarchical bureaucratic system. And so now we are in a period of transition towards smaller projects, but they are still projects that are created and pushed through political will. And so we are in a state of transition, globally the relation between North Korea will change the status of Seoul and the kind of crisis of stagnancy within the society may have a different kind of vision for the future with this opening up of the North Korean relations. And then though the projects have become smaller, they do work still within this kind of planning culture that extends to the present and the foreseeable future. Thank you. Thank you so much for a very clear and very fascinating presentation and highlighting that tension where even when there is a big plan and the capacity to implement the plan that there is this kind of pushback, micro tension and time erodes and we come back as we did in Paris context.


how to wear a statement suit, part five of five, own it.  So if you're wearing a statement suit, you need to own it. If there is any crack in your sartorial armor, meaning you're not 100% sure about whether this works or not, or if you feel even just the least bit self-conscious, it's gonna show and that is the last thing you want because everyone is going to feel that coming from you. So if you're going bold, own it and be confident in yourself. And if you can't get there, maybe it's not the best style move for you and that is totally fine.


Hi everybody. Hi. My name is Denea and I'm from the Billy Qing Qing Library. And I'm Ms. Chenna from the Bok Library and welcome to Picture This. Welcome to Picture This, our monthly conversation sharing great books from our picture book collections airing the second Wednesday of every month. Denea, what do you have to share today? All right, so for my first two books I have, my first book, it's The Alphabet's Alphabet. And it's written by Chris Harris and illustrated by Dan Santat, who is a very awesome illustrator. So this book is a totally twisted take on 26 letters. And after reading this book, you'll see the letters in a whole new way. So the author and illustrator really outdone themselves in coming up with ways on how to make one letter look like another. So for example, an L is an X waving help in quicksand.  And then as he's walking towards you starting to sink and then you start missing the bottom and then what does he turn into? L. And another good example that I found is over here, you see the letter V, but a V is an M that just cut its long hair. So if you look over in this picture, what do you see? You see an M and he got his hair cut and then he turned into a V. But there's also, there's one letter in this book that just stays the same. So you just have to like really check this one out to find it.  I don't know. And my next book is, it's the Kevin the Unicorn series and so why can't we be bestie corns? So, and this is written by Jessica Vaughn inner redner and Kevin has a new neighbor and his name is Eric. And Kevin is very sure that Eric is gonna be his best friend, but then as things start to progress and they start doing things and Kevin realizes like, no, that they both really like some different things and they try doing things that each other has like or likes but they don't get along with that. They don't really like it and it's okay because it comes to a point where instead of trying to force a friendship, Eric and Kevin decide just to be friendly and I really love illustrations in this book and they have a lot of fun things that they do together and it's really silly how some of the things that they do and like over in this picture, Eric suggested that they try something outdoorsy but Kevin didn't catch the camping bug and you can see he got stung by a lot of mosquitoes. So it's a great book showing kids that they don't have to be best friends with everyone and having a friend is just awesome and that's okay. So this is a really good book and if you love the unicorns and these are the ones. How about you, Tender? Wow, I like that. Kevin, the unicorn. So it is really hard sometimes to have a best friend but it's nice to just be friends too. So you can do different things with different people. The first book I'm gonna share is Second Banana, Words by Blair Thornbow and Pictures by Kate Vorobi. So you see the picture is winning with this one because the illustration is so on point with the expression of the bananas.   She's bruised and the reason why she's bruised is because every year the 15 kids in Mrs. Millet's class put on the famous food is fun, healthy eating, good nutrition pageant and every kid is opposed to get their own unique costume and she cannot wait. But then look, all the costume of the healthy food. It's so wonderful except somebody ended up having to share being the banana. And she became the second banana. You have to ask mom and dad what the second banana means. Oh, look at the picture and expression of disappointment and just anger and just more crying and tantrum and all the flat banana until she realized, she can be a good friend to the first banana to the other banana when she realized that she needed a friend and that's what happened. So it was a wonderful story about putting aside your disappointment and being a friend to another person who may be the first banana and that's it. I hope you give this book a chance because it's a really good story. It's just a fun read also. And then this one, so they became friends but this one is about Besties which is this Max and Marla series. There's four of them by Alexandra Boyger. She is a lovely illustrator and author. One of my favorite, this is Max and Marla are flying together where Max is actually very excited about flying the kite and trying to convince Marla the white owl to fly. But surprisingly Marla doesn't want to fly and they have to find a compromise. Then Max and Marla are having a picnic. But this one is one of my favorite because Max and Marla are going on a trip and the trip happens to be in Australia. And Max is so concerned, like some of us sometimes when we're going on a trip, so concerned about taking pictures that's missing out on the experience. So finally something happens and the camera, oh no. My camera and lost the camera. But then instead of being disappointed, they walk through the woods with their eyes wide open and actually was present during the whole trip. So it's a wonderful book about best friends on a trip together and just capturing every moment by being present. It's a really good book. There you go. What do you have Danea? All right, let me unmute myself. So in honor of National Poetry Month, I chose two books to talk about. National Poetry Month is To Salute Poetry in All Forms. So I chose two books. The first one is I Am Loved by Nikki Giovanni. She is a recipient of seven NAACP Image Awards, the Maya Angelou Lifetime Achievement Award and the very first Rosa L. Parks, Woman of Courage Award. The excerpt in the book, if you read in the inside, it'll tell you about why, who actually these verses were hand selected by Newberry Honorary Ashley Bryant. And it says, there is nothing more important to a child than to feel love and these gorgeous gathering of poems that are written by Nikki Giovanni. So if you go through the pages, you'll see different, very colorful illustrations and beautiful poems that are very simple to read. And there's one poem that really stood out for me because of course it's about a cat. And this is Paula the Cat. And in this, I will read, I hope it's out of, I'm gonna just let you read this poem. And it's Paula the Cat, Not Thin Nor Fat. Is as happy as house cats can be. She reads and she writes with all the delights of intelligent cats of a tree. Tired of the view, she chose to pursue a fate unbeknownst to the crowd. Finding a boat locked up in a moat, she boarded and shouted out loud. I'm Paula the Cat, Not Thin Nor Fat. As happy as house cats can be. But now I've urged for the spirit to surge and I shall go off to sea.  And you can talk about, well, where do you think she'd wanna go, you know? And it's just like, we can talk about the color, the illustrations and I love it. And the last one I really liked, there's one poem where it's actually a mirror and we can see, hi Jen down there. So this is a really wonderful book and I really enjoyed reading some of the poems or actually all of them. Okay, and so my next book is I Got the Spirit. And this is written by Connie Schofield Morrison and illustrated actually by her husband, Frank Morrison. So it's a really cute purple book, I guess. Here we have a nice, it's like very, very beautiful book. I love how the colorful font inside the book, sorry, the colorful font, if you see. I pass the spirit over to a friend and it was Crunch Munch Sip. And then these really, I loved how it lets you either emphasize the words or even ensure like to do a movement. And as the illustrations done by Frank Morrison, fill the page with colors and I loved how diverse the characters are in this book. Now, and it's very colorful, the tones and everything. So reading your book is like reading rhyming poetry. So if you read the book, you can kind of tell like a lot of the, it's just like, oh, the page is like, it's just, when you're reading it, it really comes off the tongue really easily and so rhyming books teach children how language works and how it helps them notice and notice and work with the sounds within words. And it also helps children experience the rhythm of language. So there's a reason behind the poetry. Okay, and those are right to what about you, Chanda? Well, that's a really nice one.  So the Paula the cat reminds me of my cat. This book is written by Sarah Howden, illustrated by Carmen Mock, cone cat. So if you've ever had a dog or a cat, sometimes they need to have a cone around their head when they injured or they need to have a medical procedure and one day Jeremy woke up at the vet. Oh, and there was the cone. So he does not look too happy and he tries to do everything that he can to get it off. And it was not having a good time.  And I love his expression and throughout he's thinking of, you know, what he used to do without the cone. But then, you know what? He figure out like with the cone, there are some advantages. Like when the kids start having a party and he realized, oh, he can actually get a scoop of ice cream in his cone and enjoy it. And you can do so many more things that are just fun with a cone until suddenly it was off his head. He, his head was free again. Oh no, goodbye forever cone. He actually grew to love wearing the cone. But as soon as possible, he remember what he used to do without the cone being a very naughty cat. But that is a very, very funny cat cone. So I hope cone cat, so I hope you give that a try. I love the illustration. I'm very short story, but a very, very funny story to share with cat lovers or even dog lovers who had to put their pet in a cone. And I just wanted to share that one because it reminded me of when my cat Annie had to wear a cone. He wore it for about a day because he was just so miserable and he would just sit there and not move at all. So we just end up holding him most of the time without the cone to prevent him from scratching at his area. He was a cat that was allergic to fleas. I love those. They're so cute. So that's my Annie. And my Annie love to look at birds. So this book is a counting book, 10 on a Twig by Low Cole. And it's a wonderful book to share with toddlers and they're probably gonna wanna do it time after time once you start reading it because it's one of those, the flap book I want you to start. So if you're buying this for your own collection, what happens would repeat at use. You might wanna put a tape in the center of the bind just to keep it, you know, just kind of like reinforce it. But anyway, so it starts up with 10 on a Twig just passing time and then snap. And if they keep falling off until of course they reach one, one take a dive and then there are two. So it keeps going. It's a great counting book, but besides counting the birds, you can point out the birds are very individualized with colors and characters. So even their feathers are very different and their eyes. So you can just, you know, look again and again as you keep reading the details of the bird are very wonderful to share as they insist probably on reading it over and over. And I love this book so much that I hope to do a flannel story with it. So if you look in the video, in the video today, you'll see that I have my flannel somewhere up there. Okay, Denea. Okay, all right. So also there's so many things that are happening this month. We also have Earth Day. Yes, I have like the Earth on Earth Day was actually gonna be on April 22nd in this month. And I picked two books. And the first one is Dear Earth From Your Friends in Room 5. It's a beautiful book where children from Room 5 write letters to the Earth each month. And so you can see each spreadsheet they have, it starts off with them, oops. Whoa, it's showing up in there. And it shows the Earth, I'm sorry. It shows this kid's writing to the, there's a letter writing to the Earth and then this is them and it actually shows them what they're doing. So for on this spread it's for, they write a letter each month. So this is February. So those Dear Earth, we unplugged our chargers and turned off the light. Some of us even saw stars. This month, we're charting how much we use plastic. Oh my, plastic trash travels so far. Sincerely Room 5, yes. Check out our reusable water bottles. No more single use bottles or straws for us. And then the Earth writes back and sends them a letter and then goes Dear Room 5, the stars in the universe, thank you. Our friends in the ocean will too. Some turtles and fish mistake plastic for dinner. Does that sound nutritious to you? So this is a really great book and this is a great way to actually give you ideas on what you wanna do. Like if you wanna do this every month and to give you ideas how to save the Earth. This one is really, really beautiful. Like I love illustrations too, of course. And my last book is This Pretty Planet and it's a lyrical book and I always end up finding lyrical books to show. So this is This Pretty Planet by Tom Trappin and John Forster. So if you look at the book, you can actually see the notes if you ever wanna play it on the piano and see it on the back. In this book, the songwriters take us on a journey to discover the gorgeous wonders of the pretty planet we call home. So they take us all around and things are really huge. Or even take us on a voyage in the sea. And with the help of the illustrator, Lee White, we can see our taking, we are taking away, not only by words, but by pictures and you will always wanna keep coming back to this adventure. And it was really in the list or the lyrics are very simple. And so it's a really fun thing.  All right, that's my last book. What about you, Chanda? Well, in celebration, in honor of Earth Day. Every day is Earth Day, of course. I want to share Melanie Walsh, 10 things I can do to help my world. It's one of those picture book that's nonfiction because it's informational. But it's a really very simple book to just share with elementary school kids but also at all levels because it's really wonderful.  And it goes on to list very simple things that kids can do. I enjoy making toys from things around the house and all that stuff. And then you can walk to school or walk to places and I can plant seeds and help them grow. So those are a few of the very simple things that kids and adults can do to help or do things together because all because you love, I love my world. And it's our world to care for because a healthy Earth is a healthy brain. It's healthy for us because we live on it. And the other two books that's in celebration of Earth is the Earth Book by Todd Parle also a very preschool level. But I like it because one of the things I try to eat every bite on my plate and save my leftovers because and I like some of the saying because you just leave, he just leave it with because and then we can have a discussion with the kids to see like what do you think? Why do you think we need to save our leftover? And then they just pretty much have some of the same things why we want to say thank you to that Earth. And then there are 10 ways also I can help the Earth turn off the lights, recycle, save my leftover, be nice. Sharing a book, that's a great way of helping too because when you reuse, you reduce waste and that's a great way. You know, especially if you go to a library and check books out, that's a way of sharing with the community. And that also, you know, we don't have to always buy books and then save water and, this is a funny one. I don't know if we should do this but put my underwear in the freezer when it's hot and then you can take it out and wear it and be cool. I didn't know about that one. That one's funny. Every one of us can help protect the Earth and make it feel good. Remember, if we take care of it, it will take care of us. Love Todd. Todd Parr is one of the best preschool illustrator, author. There is another one that has, you know, just love the world and that was just more about, you know, giving and loving everyone that's around us and all the nature that we have around us and all the people that we have around us all. And I love his drawings the best because it's very colorful. It's not restricted to what, you know, sometimes tree doesn't always have to be green and just different, just very vibrant and it just let kids and adults kind of like have a go at just coloring the world as they want and feel and loving the world for that. So that's by Todd Parr and he has many, many more books for preschoolers. So, and that's pretty much what we have for today. And though if you're interested in any of the books that we've mentioned, today type in picture this 0421 in the search bar of the Long Beach Public Library catalog and the list of books that we've shared will appear. So this is Chenda. All right, goodbye. And thank you for sharing picture this. Bye. Bye.


Brought to you by Chesterfield America's most popular two-way cigarette. What a pair Chesterfield King size at the new low price Chesterfield regular Around God City and in the territory on west there's just one way to handle the killers in the spoilers And that's where the US Marshal and the smell of gun smoke starring William Conrad transcrud story of the violence that moved west with young America and And the story of a man who moved with it I'm that man Matt Dillon United States Marshal The first man they look for and the last they want to meet It's a chancey job, and it makes a man watchful and a little Lonely the house he's got here quid fellow with all his money can afford a nice house Mitch Hey Coming out of bond Let's go have a little talk with it You need a very big fellow. We shouldn't have much trouble now Get on rest a while man. I'll get down You stay milded Mitch right quick. Why don't you both get down?  Well, you did. Well, why didn't you ride in? I could have slept you in the barn. I Don't get much company out here. I know we've been watching the place You're alone here ain't you? I've always been all Obie tater, huh? Obie tater. That's right, mister but How come you know my name? Everybody's heard of you will be Man who spends money way you do get kind of famous life. Oh, I don't spend money no more That was when I first come here I'm broke now. Why don't the way we heard it OB?  Oh, that ain't so a $1,000 is all the gold I scratched out of California and I spent it building this ranch Sure, I don't know why people keep talking about how rich I am they'll quit talking soon enough OB All right, you ain't gonna be rich no more and are you sure? What are you talking about? I'm gonna ask you real nice, obie Where you got that gold head? No, wait a minute. What are you fellas up to you gonna tell us? You come here to rob me. Didn't you? Well, it ain't no use. There's nothing to rob. I told you wouldn't softwaid We'll have to bounce it out of go ahead Mitch.  Oh Ain't even on You can't hang me.   No, you put that rope away.  Yes, we are Well, look it there it's obi tater Chester How are you obie? Now what brings you into dodge? Well, I had to see doc Adams marshal You are kind of peeking looking obie. You've been sick.  Well, what happened obie? Three weeks ago marshal. I like to died. What'd you do? Did you fall off a horse or something? Oh, I didn't I got drug what? Well, two fellas they come by my place and they throw the rope on me and they drug me across the prairie Oh, who did what for? I never seen them before marshal, but One was called mitch and the other quade That's all I know about Well, I never heard of no Mitch near quade around here. Oh, why did they do it obie? Well marshal, you know how everybody thinks I come back from, California with a lot of gold doubly goods May Sam rich Oh, it ain't true, of course, but that don't stop them. They just go right on saying yeah, I've heard the talk So these two fellas they want to drop me. I told them and I told them I don't have no gold money, but they wouldn't believe me. That's the one or they didn't kill you Well, they put in there did marshal I felt awful when they got through you think they'll come back They said they wasn't done with me yet. They said They'd find a way to open me up It's a terrible thing marshal being treated like that for no reason at all and especially when you ain't even Got no gold money. That's too bad the room. I got started in the first place. I'll be I've tried to stop it, but You know how I am. I ain't very smart. I can't hardly sign my name marshal This is why I've always got job by any fast talker. It comes long All my life it's been like that. Well, we can't stop what people think of me, but maybe we can find those two men You think you'd recognize them? Yes. I sure would marshal. Okay. They just might be hanging around dodge Let's go look the town over of it Almost 100 years ago Charles Kingsley wrote that tobacco is a lone man's companion of bachelors friend a Hungry man's food a sad man's cordial a wakeful man's sleep and a chilly man's fire These words describe what Chesterfield means to millions of smokers today All of us smoke for relaxation for comfort for satisfaction and in the whole wide world No, cigarette satisfies like a Chesterfield Only Chesterfield has the right combination of the world's best tobaccos highest in quality low in nicotine best for you Buy them king size at the new low price or regular Get a carton of Chesterfield today Marshall Dillon we must have been in every soon and gambling house and dodge. I'm getting foot so they're only a couple more Oh, they will try the Texas trail here. Well, what are you gonna do if we find a marshal coming to you? Well, if there's enough left of them when I get through okay, take a good look around Ain't at the bar and They ain't at the tables back there. Couldn't we sit down a minute marshal? I'm off. I'm tired I guess ain't got my full strength back. Sure. I'll be we can sit on Let's go over there with kitty on whoever that other girl is. Oh, I'd like that marshal. I ain't heard a woman's voice over a half a year Hello kitty. Oh kitty. This is a obi tater. Well, I didn't know you obi ma'am Miss obi and the same with Ella Mellis here and this is Marshall Dillon. How do you do? How do you do my good? Sit on sit on thank you Uh That's an awful pretty name Ella Mellis Thank you obi. Ella's new here. She don't have been in Dodd's about a week. I like it though. I Might even stay a while. Oh Well, that'd be nice. Sure. Hope you do well. Well It depends Depends on what oh People I suppose if I meet somebody I like I'll stay You will sure Why not?  How you feeling now? Oh I'm fine. Dark Adams couldn't find nothing real wrong. He just said to take it easy for a while What's the trouble over you've been sick? No, it's it's not that couple of Couple of fellas come by my place and treat me kind of rough. I'm okay now You look fine. Oh, but you can't hit a young man like you anyway. Oh I ain't I ain't very young no more not pushing 60. I Think oh, I don't believe it. Well, you look more like 35 to me. I do Of course you do Ella yeah I'd be proud to take you over to the bar and buy you a drink any kind of a drink you want Wait a minute. I'll be we got a couple of more places to look at that can wait marshal it ain't important We'll do that tomorrow sometime. Oh, yeah, come on. We come. I'd love to Loby And maybe you'll tell me about yourself not in California. No, that ain't nothing. I'd rather hear about you now You come to dog That sure didn't take a long. I love mellish What do you know about her kitty? I don't know anything that not really Was a good talker, but you didn't say much about yourself that you come here alone Well, I know she did She have any friends here. I mean, have you seen her with anyone in particular? No, I don't pay much attention to her Why Matt something wrong? No, not yet kitty but Sure gonna be Oh Thank you You found obi tater yet. Not yet doc with Chester's out looking for him. Well, maybe haven't tried the right places, man Oh, we've looked everywhere doc. He and that Ella mellish just plain disappeared both of them. Well, I wouldn't worry about it They'll be back. I hope so. This is the second day. They've been gone. I Tried to talk to obi that first night, but he was acting like a man in a dream Loves dream that love sweet young dream doc obi tater will never see 60 again Oh age has nothing to do with him. I'm surprised that you don't understand these matters Oh, why should I can always come ask you about him anytime that anytime be glad to advise you There's many a pitfall I might save you from to if you come to me in time And you may consider me like a father Like a father, huh? Certainly. Well, that's mighty nice of you, doc. There's a benefit of my experience is yours, man Just any time good good Tell me doc. How does a man get out of New Orleans with two different husbands gunning for him true husband's gunning for him? Why it's about a new or two. Oh my goodness. I must have been drunk When did I tell you about that same night?  Yeah, I did Oh, well that happened long. Oh a long time ago. I I don't appreciate you remembering that you there Come on in obi obi tater. Well, it's about time you showed up again What's all the fuss about you think I was a criminal or something? We've been worried about you'll be where you've been What honey moonin at the dodge house I paid the clerk $10 not to tell nobody We was there. I need to pull up old you mean you're married Ella Mellish It was love at first sight Marshal. I Proposed to make her my wife and I am proud to say she accepted me right off I never thought you'd go that far. She's a fine girl Marshal off fine girl Is she obi Well, I hate to say anything against your wife But there's something I gotta tell your jealous Marshal that's what you are your shame on you I'll be if I'd known you were gonna do this at a major listen to me the other night Say it out Marshal. I gotta get back to my bride. We're leaving for the ranch today I'm half tempted to let you find out for yourself. I'll find out what what? Don't you remember the other night when you first met Ella Mellish? How she asked you if you were feeling okay again now ain't that just like Ella always considering other people me in particular I'm happy to say. Oh, well your feelings are happy. Tell me something. How come she knew you'd been hurt? You came here straight from Docs that day and nobody knew anything about what had happened to you except Doc and Chester and me now Who told Ella Mellish? I don't know what differences make. Oh, well, they listen to me. There's there's something wrong with Ella I don't know for sure. She's in with those fellas Mitch and Quaid, but if she isn't she's got explaining to do Marshal Dylan Ella Mellish is now mrs. OB Tater She don't have to explain nothing to nobody I give up. She's a fine woman Marshal and I won't stand for no talk again. I love sweet young dream And it's like being a local mad he can't hear you or anybody else except that girl now That's no way to talk about me. I thought you were my friend. We are your friends not anymore. You're not You were darker Chester nobody Well, I got me a wife now and I don't need you You'll see yeah, we'll see but I hope it isn't too late when we do I hope you're still alive to see too. I didn't know how Ella Mellish planned to do it But she was a clever girl And I was sure she had some way in mind the handle will be tater What she didn't know of course was that he didn't have any money and that she was wasting her talents on him And I was afraid that when she failed Mitch and Quaid had come back and a list I make kill obi He was still alive about a week later However when Chester and I happened to be in the country not far from his ranch And rode over to have a look There at home all right, mr. Dylan My gracious they must be roasting the calf with all that smoke coming out of the chimney. Wait a minute Chester What's that smoke a minute? Just watch now there there you see Why it's perfect It's starting and stopping every now and again Yeah Maybe Jimmy's got something stuffed up in it Maybe You know if you couldn't see the house you'd think it was Indian signal You stop now Let's leave our horses here, huh Chester Chester when we get in sight don't say anything about how that smoke looked You mean you think it was a signal mr. Dylan. Oh, we'll see. How's that you Ella? So Dylan What are you doing out here? Oh, we were nearby so we thought we'd stop and say hello. Well, that's fine Marshall But I can't ask you and I'm busy cleaning out Oh, you'd better come back some other time. I'd love to see you then sure sure Um Where's Obi Obi oh He went off somewhere this morning. I don't expect him back till late next time Marshall You come see us next time. I'll cook you dinner or something. That's okay. Well, we'll see you another time sure You do that Marshall. Goodbye Goodbye I declare mr. Dylan. I never got treated like that in my whole life not by nobody She wasn't expecting us Chester had her upset. I don't care That's no excuse for not even offering a man a cup of coffee. She didn't want us in the house In fact, I don't think she wants us anywhere around here Hey, where are we going? I want to take a look in the barn And if Obi isn't out here, we're going back to the house Well, but Ella said he took off for some words this morning. Hello. It's kind of nervous Chester Maybe she didn't mean it Obi I'll be tater. Hey, he's got a shotgun. It's Marshall Dylan. Obi and Chester.  That's all right. I'll be but what are you doing in here? Tell her told us you weren't around Ella told me Well, it does a lot of talking these days Well, what is it over something wrong between you two Something wrong Marshall Dylan I owe you an apology what for for not listening to you back in Dodge He was right about the whole thing All that woman married me fur was my gold money And I've told her and I told her I ain't got none, but she won't listen all her talk won't hurt you'll be But there's something else that might she does more than talk The woman's a devil. That's what she is. Oh, what do you mean? What's she been doing? She won't feed me for one thing. She won't even boil my coffee It started the first night we got here Marshall as soon as I show her my gold money She says she'll be a good wife. I Tried to tell her the place is hers what she need money for even if I had it For landscape I never heard of a wife that wouldn't cook her man. Oh, that ain't all Chester Where do you think I've been sleeping out here in the barn? That's where I can't even sleep in my own house She says she'll run off into the prairie if I come anywhere isn't here. Well of all the Obie if a woman doesn't matter in Texas, you'd have a right to give her back. I Don't want to give her back She's done pretty And besides there's something else She ain't going to the devil me no more what after tonight. She said she said after tonight It's all over. She said she won't give me no more trouble after tonight. That's what she said Chester. Yes, sir. Go get our horses and bring them into the barn where they can't be seen And when you get back You and Obi and I are gonna go into the house and sit on and wait For the night There are more than 60 million cigarette smokers in America who smoke many brands in choosing your cigarette be sure to remember this You'll like Chesterfield best because only Chesterfield has the right combination of the world's best tobaccos highest in quality low in nicotine best for you All of us smoke for relaxation for comfort for satisfaction and in the whole wide world No cigarette satisfies like a Chesterfield Yes, you'll get the greatest possible pleasure from a cigarette when you choose Chesterfield The right combination of the world's best tobaccos highest in quality low in nicotine therefore best for you Buy them king size at the new low price or regular get a carton of Chesterfields today Might as well sit down. How are you just wear yourself out walking around that way? I got nothing to do with it. I tell you I never heard of Mitch McQuade and you shouldn't worry about it I love we'll find out if you know them when they get here You're awful smart aren't you Marshall? I wasn't signaling that nobody neither He's just trying to put the fire out Sure There's some horses coming up outside, Mr. Dylan It's too dark to tell but I think there's two of them. You're not waiting the kitchen I sure wish I had my gun Marshall. No, I'll be not over the scene to it You weren't armed and we'll have them covered. So don't worry You make it a big mistake. Never mind that Ella.  Thank you, Mr. Dylan. Well, I hope so Chester. We'd better get back out of the light There they come Mr. Dylan Even OB Mitch you remember OB Tater. Sure.   Don't do it Quaid. All right Mitch. You're next. I got my hands on Marshall. I ain't wrong.  Chester Get Mitch's gun. Yes, sir Come on. Give it to me get your hand away Who'd think any man could be low enough to Shoot a woman. She double-crossed him. That's why he did it. No Mitch Ella had nothing to do with the Marshall being here. She signaled us to ride in tonight That meant she'd given up and she was going away with us. Given up if Ella couldn't find his money Nobody could You're nothing but an old liar OB Tater.  A liar I told everybody a thousand times. I ain't got no money. It doesn't matter now. We'll be Chester take Mitch outside and tie him up He's dead and I'm sorry. You'll be it. It just wasn't fast enough Wasn't your fault Marshall. You know something? I was awful fun.  Any mother fuzz could have killed me before I'd have told them I'd have told Ella What are you talking about, OB? You'd have told Ella what?  Sure, it's true But uh You you won't tell nobody William Marshall No, OB I am like I'm filtered Like I'm king size Then for you, this is it King size l and m filters at the same low price As l and m regular Both have the miracle tip for the effective filtration you need Yes, it's the filter that counts and l and m has the best You get much more flavor much less nicotine a light and mild smoke By l and m filters Just what the doctor ordered. It's america's highest quality and best filter tips cigarette Biocotton king size or regular both at the same low price Houston directed by norman mcdonnell stars william conrad as math dillon u.s. Marshall The night story was specially written for gun smoke by john meslin with music composed and conducted by rex corrigan featured in the cast were joseph curin virginia greg vicks heron and barney phillips Harley bare is chester howard mcnear is doc and georgia ellis is kidding Join us again next week at matt dillon u.s. Marshall Fights to bring law and order out of the wild violence of the west in gun smoke Nine out of ten forest fires are started by carelessness Obey the forest rules build fires only in approved locations after securing a permit Be sure all cigarettes and matches are dead out. Remember only you can prevent forest fires And remember to next week at this same time Chesterfield will bring you another transcribed story of the western frontier on gun smoke This is the cbs radio network


Falling in love can be a wonderful experience, spending time with that person can feel even better, but what happens when you can't bring yourself to spend a waking moment without them? In a Nicholas Sparks romance novel, this might be the ideal partner, but not in real life. In real life relationships, we can create insecure attachments. Defined by the APA dictionary of psychology, insecure attachments are patterns of a generally negative parent-child relationship which show the child's lack of confidence and or affection towards their parents. Even though it may feel good in the moment, being too attached to your partner is one of these insecure attachments which can lead to major problems in the relationship. Let's jump into some signs that you're getting too attached to someone. Two is better than one. How do you feel when your friend or partner isn't around all the time? Do you feel a deep sadness or maybe a growing anger when you can't be around them? This intense discomfort can be a sign of you getting too attached. Think about Bonnie Gilbert's mother and what's eating Gilbert grape. She is too attached to Gilbert to the point where she doesn't let him do anything without her, according to Talkspace. Codependency happens when you need the person with you in order to be content. When they're not by your side, you feel unhappy and unfulfilled. But with interdependence, your friend or partner adds great value to your life and you like being with them. At the same time, you can also get by just fine if you're not with them 24-7. Basically, interdependence is a balance between total dependence and total independence. Michael and Jacob are best friends. They share their deepest secrets with one another and hang out almost every day. But there's a huge difference between their attachment styles. When Michael isn't around Jacob, he is constantly sad and feels like he can't enjoy anything on his own. Jacob, on the other hand, feels fine when he's not with Michael. He has a great time when he hangs out with Michael, but he's still able to have fun when he's on his own or hanging out with other people. Can you guess who is codependent and who is interdependent? That's right, Michael is codependent and Jacob is interdependent. 0-100 in 0.5 seconds. Okay, we all know you've scrolled through petty TikTok. Yeah, it's pretty entertaining to watch the creative ways people get their dose of petty revenge. But is this the healthiest reaction to conflict? How you react when you get into an argument with someone can be an indicator of how attached you are to them. According to a 2015 study published in Frontiers in Psychology, if you are overly attached to someone to the point where you feel anxious, you may have intense negative reactions when there's a conflict in your relationship. Now, this isn't just getting angry when someone is mad at you. An example would be someone getting mad at you and you immediately assuming that they're rejecting you or don't like you anymore. If you notice this pattern of behaviors with the person you're thinking of, this could be a sign that you're getting too attached to them. Monkey see, monkey be you. It's natural to gravitate towards people who show the same interest as you, but if you find yourself changing your behaviors and interests to match somebody else's whenever you're around them, this could be an indicator that you're starting to get too attached to them. According to licensed therapist Sasha Jackson, being overly attached can cause us to lose sight of our individuality and who we are. Rather than seeing yourself as your own person, your self-image changes and you can only view yourself within the context of the relationship. Outside of that, you may not know who you are or feel as if you're nothing. If you find yourself feeling this way remember that you are awesome just as you are.  Taking time to explore your own individual interests and hobbies outside of your friendship or relationship can help you find yourself again. If it helps, please reach out to a mental health provider to help create healthy attachments again. If you think you're getting too attached to someone after watching this video, don't feel down about it. Now you can be more aware of these signs moving forward and take steps to make your relationship more healthy and fulfilling for you. Are there any others that we didn't mention? Share in the comments below. If you learned something new on this video, make sure to like, subscribe and share. Thanks for watching and we'll see you in the next one.


The study of extracellular vesicles, EVs, released by bacterial cells during infection, their biological functions, immune interaction mechanism with host cells, and potential as new vaccines is a growing field in recent years. This article was authored by Iji Peng, Xinyin, and Minit Wang.