 All right, why don't you introduce yourself? Tell us who you are and what you're doing. I am Mike Haggiseth. I'm a web developer I've been working on the already project for the last couple of weeks I also participated in a codathon for already back back this summer and in Wisconsin and Right now I'm working on I worked on adding descriptions to skills and also showing those descriptions with a nice little tool tip wherever they are referenced Well, why don't we start off with looking at What the output is and then we can dive into how you did it cool. All right, okay, so let's let's go into some User admin, okay, so this is one of the places where you can associate a skill so you can associate skills with users and for any skill if it has a description associated with it, there's this nice little icon and I See so when a user say I'm gonna be a participant I'm gonna be a volunteer and already yep when I create an account I can also say these are my skills. Yep, that actually happens on a different page, but That happens on this page, but it's the same same principle same note Okay, so yeah, so if you're about to associate a skill with yourself you can say oh well hold on Surgeon what exactly does that mean? Oh cut open so shut play 18 holes nice So this is just you worked on sort of the functionality to help users sort of understand The kind of skills that they might be called on to use in an already situation correct So administrators would to help clarify what exactly a skill means or to disambiguate it from another skill They would use the description and then this is just a nice Unobtrusive way for a user to figure out whether that skill actually applies to them awesome So how did you build it? So I built it primarily with knockout knockouts kind of my JavaScript tool of choice I like it because it it's unopinionated It kind of stays out of your way plays really nicely with MVC cool So in order to in order to get the MVC stuff into JavaScript I basically just Jason serialized a model object into into JavaScript and That I can load that into a knockout view model. Oh interesting So what's happening is as the controller returns the model you take that model on the server side It's serialized it into the JavaScript stuff Yep So I write out a part of the model directly into the page and then that it is actually written as a parameter to this Immediately invoked Oh makes sense execution that makes sense. So that's a way of that's not you're like gluing the server side with the client side stuff Yeah, okay. Yeah, and so this is a this is a nice way of doing that in MVC without incurring the extra Round trip of doing an Ajax because then you're doing an X HR request on on the combo switch every time right right? And that that would also involve having either a separate API controller or another action on your same controller Whereas you can just have the one action and just inject it right on saving time. I mean just burning it right in that's awesome Yeah, so now that you've got that in there. What is it that this code is doing? So what this code is doing is so this is an immediately invoked function So what we're passing in and this the reason why we do this is so that stuff that we're creating stays scoped within this function It's not on the global namespace. So we're staying nice and tidy So we're we're taking in a dependency on knockout and JQuery although we're not using jQuery right here But we just take in the skills that are associated with a particular user and then a list of all of the available skills Which are getting they're passed in from the model correct So those would then just be bound to a drop-down actually one of the things that is super cool about the available skills that we are Putting into the knockout view model here is that they are coming from this Select list service and this is using this is using some of the cool dependency injection stuff from ASP. I'm right That's an ASP.net 5 so you can see at the top of this view. We just have this at inject You know this whatever interface select list service and then the select list service is you know Define in some other place in the startup configuration We say okay when somebody asks for an I select list service use you give them and that's interesting because traditionally Well ASP.net 5 obviously goes to the next level because I'm used to having dependency injection happening on constructors or the controllers But you're saying now you can put that in the views themselves, right? That's cool. Yeah, you can put it into the views and so this helps keep your view models You're this helps keep your MVC view models nice and tidy and it also like so Let's say this you know the the list of available skills This is something that I need on all kinds of you know different views So instead of having to have that be a new model property on each of the view models that I have for All of that stuff. I just inject this service and it pulls it right up Serializes it to to Jason and then I just take the available skills and I put them into an observable array of available skills And then you bind it with knockout probably above in the combo box, right? Yeah, so one of the things that I really like about knockout is that So here let me split this So this is where the this is where the knockout stuff is happening. This is where the drop-down is So I'm saying okay pick from available skills Once you've picked something bind that to a skill ID, you know, these are the associated skills So it's going to generate one of these for each associated skill What you'll notice there is not any of in this view is What JavaScript should happen when I change a selection? Yeah, it's all right. Yeah, you know There's there's no JavaScript that I have written to also or to facilitate the tooltip or anything like that a library that I found and I'm using for this which is actually kind of cool is something that Marry's bootstrap and knockout so all of the bootstrap JavaScript components become available as knockout bindings That's interesting. So they're little like swatches of HTML that are automatically bound at the same time Yeah, I wouldn't call it HTML though. It's essentially just JavaScript. It's JavaScript behavior Oh, it's like you want to attach to an element and it just retters it to the top then It's more like just attaching behavior to a pre and already existing DOM element. Okay, that's really what is happening here So this you know data bind tooltip here is using the knockout bootstrap Tooltip binding which is essentially just a thin wrapper around the bootstrap tooltip function. Okay But what's great about this is that I don't I don't have to write the JavaScript code that says okay Now do the bootstrap tooltip thing and then make sure it gets destroyed properly and all of that stuff the binding just takes care of it For me the other thing that's pretty awesome about this is that so I bind a description to this and a description isn't observable So it's it's liable to change to change And so the tooltip will then get automatically updated whenever description changes, which is going to happen every single time I select something different from the drop down So you're not handling like on chains on the drop down or anything It's just sort of the binding just magically happen no very very little ceremony and so that's that's really nice And so it makes it makes the JavaScript that is in the view Really nice and expressive so it's it's really easy to understand What the description is where it's actually coming from so I'm just saying okay? Well, you know this ID is represents my The idea of my selected skill And so whenever that changes, I'm using this computed observable to get the description of that based on what the available skills are And then once you once you were observable changes on the tooltip. It's just automatically bound up. Yeah, so question How did the IDE sort of help you write this JavaScript? Did it do anything to help? Well for one thing the JavaScript IntelliSense in Visual Studio 2015 is actually quite good It's significantly better than 2013 I use 2013 for work and I'm struggling with JavaScript IntelliSense For it all the time and so it's helping a little bit with the IntelliSense because we're used to it as visual studio developers So but JavaScript is not like C sharp, right? It's a dynamic language, right? And so that's that's why IntelliSense with it is is really hard So the fact that the fact that visual studio 2015 is so much better at it just makes it makes it a lot harder to Make typos, which is basically what? So there was another interesting thing and I'm looking at your setup here and off to the left There's like this interesting tab thing that I've never seen. What is that? Yeah, so you're so by default visual studio puts tabs across the top But like any good developer I have dozens of files open at a time because I'm I'm doing I'm doing go to definition I'm doing find all references. I'm doing all of this stuff. So One of the things that I don't know if I don't remember if this is baked into 2015 Or it comes with an extension called productivity power tools But it allows you to change your document what's called your document well from being horizontal to vertical I see so so this isn't a new thing It's like this has all the files that are open and you can sort of look at the file So sometimes it'll truncate it at the top of the tab if you have too many tabs open at the top, right? Right And so that's so if you're doing a horizontal tab layout You really only have to have even on a widescreen. You only have to have six or seven files open at one time Before you have to scroll and you have to use that little drop-down picker that right and you're doing control tab all over the place And so this makes it easier for you to look at yeah And the other thing which is the other thing that this does which is nice It's but it's not really it's it's hard to feature in this project because we just have one big project Is that it will actually color them depending on what project they come from. Oh nice So if you so let's say let's say in the future we do a little bit of code refactoring and so We actually already have this like models Project here. So actually if I go you can see if I open something for our models project That's that's blue. So that helps me distinguish between okay Well, this this can these things come from different projects And I think the cool thing is that whether it's an extension or it's in part of it's part of visual studio It all feels the same right and that's cool. Yeah, and so there's like everybody knows there are lots of High-quality extensions out there. So I'm pretty sure that I'm pretty sure that this one came with Productivity power tools. Yeah custom document well in productivity power tools. So play some place tabs on the left You could do left top. I don't know why anyone would want right or bottom You know actually if you're if you're a right-to-left reader that might actually work for you really well because it's equivalent Right, I mean the other thing that could be kind of nice about right is that it puts your tabs right next to it's solution Awesome, well, thanks for spending some time with us buddy. Yeah, thanks. All right