Building Bots Part 1

it's about time we did a toolbox episode on BOTS hi welcome to visual studio toolbox I'm your host Robert green and joining me today is Sam bazoo of progress hey Sam hello welcome to the show welcome to the cozy confines of Studio B and that's nice it's changed but it's nice yeah we're just gonna sit back and chat about BOTS it's about time now so bots is one of these new things that there's a lot of buzz about a lot of cool demos of bots running in Skype or you know BOTS calling and making appointments for you and there's just an amazing amount of stuff that's going on and that's all cool of course but what I want to focus on is you know us as traditional enterprise minded business developers whether we're doing desktop or web or mobile or whatever what does it take to build one of these things because it turns out it's not that hard to get started and then what are some of the uses that we might think about where we would actually take advantage of these in the types of businesses we're currently in mm-hm so we're gonna do that this is a two-parter so obviously this is part one of two so tell us about bots let's jump in yep let's switch to slides so we can talk through so what you see I think over the last couple of years is human-computer interaction is evolving mmm-hmm be it through a RvR be it through any other ways and you see the impact of AI so we are not only interacting differently with computers we're also expecting different things for computers and this is where BOTS come in and BOTS aren't new they're about maybe two three years old now but they're evolving fast so I think it's kind of the next frontier of apps so let's kind of dive in so as Cortana Alexa Syria those bots sort of their agents okay let's dive in all right so Robert already introduced me I'm Sam Basu I'm a telluric developer advocate at progress I kind of focus on the dotnet side of things across web desktop and mobile and BOTS is something that that actually does excite me nowadays so I think one of the fundamental questions we need to ask is what exactly are we talking about because yes BOTS is a very generic term we're not talking about robots we're not talking about like the spider BOTS that Bing or Google used to kind of crawl the web there are different types of BOTS what we are focusing on for enterprise application in particular are chat BOTS more conversational BOTS bots that we can actually have a conversation with be it over voice or be it over text and what can they do for us how smart can they get so actually automate things for us and can actually help us okay yeah one of the fun things that I've actually seen many people do whenever we talk about conversational BOTS back in 2013 I think there was a movie that came out it was called her it right hook in Phoenix in them in it and it got a little weird quickly it was about conversational BOTS but this lonely writer he started having a relationship with his conversational bot because it was so smart and it kind of got him very quickly right so that's kind of the AI aspects of being a bot and how smart it can get so let's kind of break down what exactly is a bot and how we can build it okay okay I think one of the reasons why building conversational BOTS is interesting and challenging and fun in a way is because we're all trying to make a cake we have a lot of ingredients there is no fixed recipe because it really depends on what exactly you want your body to be okay so you have to kind of break down what are my ingredients and how am i exactly going to build it so it suits my needs so let's kind of break down where conversational BOTS stand today and we're possibly looking at a slice of it but bots are apps okay that's fundamentally it I mean these are web-based apps that we can communicate over HTTP and they can be housed in different things but they're fundamentally apps but there are complex apps because they have lots and lots of integrations that's what makes them smart so a bot by itself if it was just talking to you and had no brain will be pretty dumb it was only going to go off if else statement and a bunch of rules and not be able to a whole lot so the real benefit of having a bot is all of these integrations that make it smarter okay so that's what we're talking about so there is a lot of plumbing there is a lot of different things that make up a bot so to your point are the voice assistant spots in a way they are but they are in the front end to the intelligence that's behind so when you talk to Alexa when you talk to Cortana or Google assistant you are firing things off over voice but things that you are firing off beat and as your function wheezed in an Amazon lambda that's what the intelligence lies so those are BOTS okay you're just using an agent to get to the bots yeah and I mean with Cortana you can type it in so I mean essentially is a conversational bar over over text right yeah so these are agents and then we talk about platforms because this is where BOTS can recite and this is kind of a big benefit of having a bot it really is platform agnostic what you're building is very fundamental and there are multiple platforms who can all talk HTTP so you can have your bot house inside of Facebook Messenger or filio or it's slack or team wherever your users are you can have a bot kind of integrated in there so it's easy for them to find it and talk to it okay so these are the platforms and then we have agents so like we said BOTS by themselves don't do much it's what we do behind the scenes with boss that makes it interesting so first up is there's got to be some sort of rules engine that tells you about what to do what questions to ask what path to kind of guide you down as we're having a conversation with your bot next thing is natural language processing if your bot is literally going off a bunch of strings to say find me a flight out of Seattle then that's the only thing it will understand if you say get me out of Seattle it's going to get confused but that's kind of how we naturally speak to each other so this is where natural language processing comes into play and all of the voice agents do it as well so when you say get me out of Seattle they find so it's an utterance intent what exactly are you trying to do like get a flight out of Seattle and then we'll find the parameters like what airport are you flying out of and then it's going to trigger the corresponding contextual thing that's going help you flying the fly so in that way it's it's a step or several steps beyond just voice enabling an app right like you could voice enable an app so that instead of having to pick from a menu choice or click a button you could say open the report open the monthly report right right so at that point there's one thing that the app does it opens the monthly report there is a command and you say open the monthly report but if you went in and said what happened last month then obviously the app has no idea what you mean because you didn't hardwired in a bunch of commands so the the beauty of the bot is that it can be trained to be more natural more cognizant right of what you're saying instead of just expecting if you say these five things I will do these five things if you say anything else I have no idea what you're talking about okay so there is a command there's a thing that the bot knows how do you know it's how you get to it because I think that's that's an important distinction because I think the very first time I saw a bot I was thinking oh well I can voice in and I can voice enable apps and I've been able to do that for a long time what's how is this better right so it's a bunch of things that your bot knows how to do and a bunch of different ways that the user can come to it okay yep so that's a natural language processing then there is some state management there's some logic that you will have obviously behind it what if you told you about order me the pizza that I had last week right now by nature bots are supposed to be stateless like it's one turn-off you saying something and the bots getting back to you but how is it going to remember if you what pizza order last week so you can actually persist some state in your BOTS and that kind of goes back to wherever you want to store your data and how you want to authenticate and authorize the user but it's possible to maintain some state so the bot is more of a conversational and how do humans will interact sure yeah so these are the things that kind of make up the bots intelligence and then they're about frameworks because we don't want to do everything from scratch right difficult so there's Microsoft bought framework which which we'll talk about exclusively today I actually have not played a lot with others but there's there's a lot for sure there's Facebook what AI Amazon makes Lex IBM makes Watson and dialog flow from Google so there are lots of these frameworks they all are about the same and they have their SDKs they have their ways to kind of bring you on so all of this is kind of geared towards helping developers build BOTS ok that's it so let's kind of dive into Microsoft bot framework and then see what it can do for you before we do that to answer your initial question of what what can this do for enterprise apps mm-hmm so yeah all the skype bots are fun but when it comes down to what line of business apps can fit as bots it's a lot of little things that can be automated workflows and I'll give you two classic examples where we actually have customers doing this we have a hospital where people call in and they want to schedule an appointment it's a very basic task and yes somebody has a calendar open every doctors calendar is in sync and at that point you're really just choosing a bunch of things and click and you're done you have an appointment that's something that can be automated and we have in a hospital that actually has it sounds bad but they've been able to cut one human and kind of having two other things but over like six months they were able to train their BOTS enough that is good enough to schedule simple appointments it's all about like what can we automate before you have to talk to a human being right yeah another example is support systems if you have like an IT Help Desk that's trying to help you kind of go through problems and roadblocks maybe the initial things maybe your basic problems can be dealt with with a bot it just knows the basic things that can go wrong and then if you're having more problems than transfer to a human being okay so some some common examples so that's going to talk about the Microsoft side of the world because this is where we live and breathe so this is what such a kind of opened up a couple of years back conversation as a platform this is the next interface this kind of helps AB developers have ways new ways to interact with their system as an end user so it's it's a new frontier for us the benefits are obvious we get to have increased productivity we have to we we are able to reduce the time that a human has to spend over just trivial things things that can be automated and the big benefit is being able to reach customers where they are at so if you are already plugged into messenger or Twilio or slack then we'll meet you there you don't have to install a new app we just kind of have a part that's embedded into what you are that's where we stand that's the benefit of pause okay okay so now let's dive into what we can do with it what benefits we can get and how we can start building it so based on who you ask Microsoft bot framework is a big thing I think it's comprising of two fundamental things one is bought builder this is the SDK this is how you actually build your apps your bots you don't want to do it entirely online unless it's something super simple you want to have it locally and that's how you will have it in your IDE and you code it up and you make it work and you test and then he'll push it out to wherever you want to have it hosted and there is a developer portal which kind of helps you get started it's gets you the SDKs it's a place where you can actually host your apps as well a host your BOTS and then it has all of these little connections which help you get your app into slack into Skype into Facebook those things are really nice and then this is just a bot part of it and then we get into what's called cognitive services which I don't think it's really a part of the bot framework at all it's it's AI suite right but this is what really gives your body intelligence these integrations I think we are about maybe 30 or so restful api is right now you don't have to be a data scientist you don't have no AI you're literally making restful endpoint calls to use cognitive services but these things can be trained if you are into machine learning a little bit and then your bot starts getting smarter and smarter okay okay so that's where we are cognitive services these are Microsoft slides but we we know what they do it's a lot of things it's vision it's speech it's a big part of it is latch language Louis which is learning natural human interactions language and an azure is very very good at this so all of these api's are part of common e-services and this is what helps us make our BOTS smarter okay yep that's what we're going to integrate with I won't go too much in details but just to kind of give you a hint of where things are at and then there is a Shabbat service so you don't have to use this essentially a bot is a restful endpoint you can have it hosted anywhere you want but this comes bundled with a whole bunch of goodness that kind of helps you get started quickly helps you have your bot nice and hosted easily and then have all of these connections so you can put your bar anywhere you want okay yeah so that's the adabot service it has those SDKs that we talked about and it has templates it has integrated ways in which you can test your bot and then you can deploy our bots through the channels and then once you are successful building your bot and having a deployed then you kind of take it to the next level let's do see ICD pipelines let's do as you're functions that trigger other things based on what your bot is doing so all of those extra things can be built in and how you scale your part based remand and so okay so as you're Bob service is a very compelling offering when you have to get them get started with BOTS okay so that's enough slides I'm getting bored of slides altogether so let's let's look at some demo all right so the first place I will point anyone to go to is do a search on bot framework and you will end up land on dev bot framework comm this is the landing page for Microsoft offering work and it has a lot of goodness to it so take a look at to what it can offer and it talks about all of your audiences all of your channels and how you cannot get started with documentation this is actually really really well done this is a Shabbat service that you're looking at but some of it can be local so we're going to walk you walk through some of these things that you can do to get started so notice how right out of the gate you have different ways of getting started you can do bot service which is directly in Azure or you can be local in c-sharp and og okay so before we go in right now the Microsoft bot framework is at v3 mm-hmm we started about 2016 so we are at v3 right now v4 is what's coming next and we have a preview bit of it and v4 is substantially different actually in some ways but we will talk about v3 because that's the present stable production release but v4 is coming sometime this year are already next so in terms of languages and programming IDs and and tools that you can use to build your bot you are looking at C sharp and nodejs right now okay so pick your poison C sharp or JavaScript and then go at it in v4 you will be able to do Python and Java okay but we're not there yet okay so this is the best place to start and this is kind of guide you through let's look at the Azure side of the story so I'm going to go to portal - accom so this is a sure and if I make it a little bigger so we can see if you're going in here and say create a resource what you want to pick is a I in machine learning and then in there is a whole bunch of things but you want to pick web app BOTS mm-hmm once you select this it's gonna ask for a bunch of things what's your bot name where what subscription resource group you can create a new one if you have a whole bunch of bots maybe you kind of group them into one resource where do you want to have this hosted pricing and and so on templates we'll talk about that in a second it does use some address storage maybe the state management in particular does use Azure storage app insights and so on so you kind of set this up and then you here to create and it'll go ahead and create a bot for you so instead of having as you're kind of waiting waiting on Azure to spin this up let's kind of look at what we have so here's a simple bot that I have and I have not changed a word of this it's just purely what the template gives you but this thing is spun up it's called the the Sam echo bot so it's just a simple echo engine but this thing is spun up and it's hosted and hosted in a charade now so this is what you will get when you hit the create button so before we even look at anything else if you go do this test in a web chat so this is a bot that's ready and it's deployed so when you hit that test it's actually gonna bring up this little console it looks like a little web chat engine and this is where you can test so I can write things here like hello and it'll it's gonna come back and said you said hello right so we can say more things hi from Redmond it's gonna come back and say you you said - Redmond so this is literally a echo bot that kind of repeats what you said okay okay but it's a quick and easy way of you being able to deploy this and be able to test this right away so you know exactly how how your app is working so this is what's called the web chat and if you are using this and if you're using this from a web application you can just kind of plant this and embed this as is so this web chat can be taken and embedded in your verification so all of this chats functionality is available from your web app it's just one measure you don't need to know about it it's just a web chat okay okay so when I go into this thing called channels this is what makes apps interesting this is where you get a whole bunch of things that are easy to configure web chat is already running which is what we saw and then Skype this is another channel some of these channels are kind of featured and already configure for you like Cortana Skype they're very easy to get started same with teams if you are going to Facebook Messenger or slack or Twilio there are some extra like authorization and things that you have to do to make sure your app is registered with Facebook you're carrying acts like authentication tokens back and forth but it's not that difficult and when you kind of go through this Wizards they kind of step you through like go register your app bring back nap key and have it set up but essentially this is a restful endpoint that knows how to get an HTTP message from you and then echo back what it just said okay so you notice the Skype thing here which is also the same Bart running in Skype because I already went through this but what it does is let me pull up Skype show essentially that echo bot now becomes a contact in your skype list so this guy here once you configure it and open up skype it's gonna say hey you have a new contact so your bot now becomes a contact so you can talk your bought just like you talk to a human being so in here we can say hola it's gonna come back and say hopefully you said so same exact part that we saw on Azure through a web chat now it's not a venture it's part of Skype now and this is the big benefit that you get with all of these channels because you can deploy your functionality in a platform agnostic way through whatever channel your user is using okay yeah so that's just just a Skype app Skype channel there are other things you can do like obviously Skype for business and slack and Facebook Messenger so this is the nap that's running let's take a look at build and that'll show you what it's doing behind the scenes so it's saying hey we have an app a bot it's running in Azure but you have not made any code changes yet you literally haven't even seen your code you went from a template and you said give me a basic bot and this is what we spun up for you there is some code behind it how do you want to work with it so you can say I want to download the zip file which is your entire solution can download it a zip file you open it up in Visual Studio and then when you're done with your changes you push it back up - that's one way or you can say I actually do want to do continuous deployment engineers bills and deployments so this is where you say no I want to push my code to github or VST s team services and then when every time I do a push and I commit you do a build and even I should treasure so you can do CI city but if you are working with something super simple like this one you can do the online code editor and what that does it just opens up your solution inside of a browser and if you kind of recognize the look and feel of this visual studio code it's actually aware that right it's an electron app so you kind of see that shell you see the same code intellisense and some of the benefits that you get so this is what as you created for you when we said file new project and then create a new bot this is what it did and it's gonna say hey you can change things here when you're done just hit build CMD we can build it and deploy it back for you so there's a whole bunch of things in here that are not important the only thing that's important here is this echo dialogue CS this is literally the one file that's controlling what your bot does so this is going to standard for any Microsoft bought framework bot so there is a message received this is fired when your bot receives a message from the user so the users say something it comes to us and you can actually reset it so you'll notice that we actually have a counter that counts how many times you say it and then if you say reset it's just gonna reset the counter so there's a prompt to make sure you're you're confirming it but otherwise it's just gonna say contacts start post async you said that okay so this is literally the one line of code that's echoing back what you're saying that's it that's the one so just one line that can echoes you back what you're saying so this is a bot that's deployed when you go to a sure and just do file new project give me about service ok so this is a bot because it's built on the bot framework but it's not a bot because it only does one thing yes ok so if this is all you wanted then wrapping it around a bot maybe a little bit of overkill yes but this is a nice template to give you some basic plumbing and then you can build on top of that but I mean this is a good starting point because not only are you creating a bot you're also hosting it in a sure and you already have those channels that are configured so you can put that bot in Skype and slack so again I would point people to the documentation which is really good if you go through the QuickStart here this is what we did creating a bot with the bot service but if you want to get the bot builder SDK then right now you have dotnet and nodejs so if you look at what the dotnet side of the story is you need vs 2017 and then you need the bot template c-sharp I mean it's a template extension that gives you this template simple echo bot mm-hmm so you'll get the bot framework and then you start with that and then it spits out the same code that you just but just in c-sharp and it's it's local to you and then you can test you about right now this simple bot is just web app so you can kind of fire this up now is Express and run it locally and then we'll talk about a different type of way in which you can test your bot that's the emulator so same exact idea you can do it with a dotnet and c-sharp what I like being on a Mac today is the node.js side of things because if you're in JavaScript you can do the exact same things the bot framework is time from agnostic that way so what this expects you to do is have NPM installed and then you get this part builder package essentially so it has all of the bits that bot builder can do for you so let me show you what that looks like so I'm gonna go in here into a folder and bring up my terminal alright hopefully this is big enough so I'm going to go into my folder here this thing is called the node echo bot and if I kind of fire this up if I say node fjs I'm firing up the app you don't see in it anything because it's just a console app but I can say the same exact things mm-hmm so it's just echoing back what I say so same exact idea it's just running locally in a console app so if you look at what this is essentially so I'm going to fire up vs code and look at the same folder essentially this being a node app we did a NPM in it so we have some package JSON we have the node modules in here but this is that one file that's making the bot work so essentially with node.js you have dependencies so we're depending on the bot builder and we're saying we are building a console connector and whenever you kind of fire off the message received thing we're going to take your text and kind of said you said that okay one line so this is no js' this is pure JavaScript running on the server side or wherever you have it hosted but it's it's your bot written in node.js now this is just local this is a console app they kind of step you through there are some extra packages called Resta Phi which kind of helped translate this console app into a end point because the bot has to be reasonable in mind so if I do an NPM install of rs.25 which is what the docs will actually walk you through so this is Resta phi is what we're using it's a very simple package that kind of helps you make restful endpoints out of your node.js code whatever your app is doing so we're using this and then once we have it we can change a little bit of code here this one is requiring Resta phi and same bot builder but we are creating a little server here so we can host it as a restful endpoint and then we can take into the cloud or whatever web endpoint it is that's our our port number and then we are creating a chatbot the app ID and password we'll talk about this so every part that's deployed to that robot service has to have a unique identifier okay and as your create that for you but otherwise it's just gonna say you said that so if we actually go back and run this now instead of app jeaious let's run node restful app dot j s this one said hey I'm not a console app I'm running at this port because you use Resta Phi so I'm running it as a restful service on 439 78 so how do you test this you can go to your browser or you can use this little thing which also comes with the bot framework this is called the bot framework emulator it looks kind of a little bland without having any inputs here but this is a local emulator that will help you test your BOTS locally before you're ready to deploy it to whatever service so in here I can actually go to that same port that we are on again it's going to ask for app ID password you can skip it for now you can test this locally but once you have to go to a show you do need the app ID so this is the exact same app and now you see that working here in the inside the emulator so this is the restful endpoint I don't have it hosted anywhere but I'm able to invoke it and the last thing is this one kinda shows you all of the JSON that's coming back and forth about service and and you so this is a super simple emulator but it does a lot of things and actually the emulator on Windows is a little more sophisticated than the emulator on Mac because one of the things that you get into with bought development is kind of conversations and you have to test your conversations and sometimes you have to kind of start midway in a conversation to start so it's like a little bit of template where you can pick up a conversation as just simple JSON and gonna start Midway and start testing so it'll let you do all of those things right yeah so that's the emulator that's one way of running it so let's let's close this that's just a quick example of doing it locally in no chairs let's kind of go back to Azure and I'll show you the other side of the story here so this was our echo bot so let's go home if I did a new resource again if I did a web app and then you look at these templates so it's not just the basic template which you can do it comes with five or so templates which kind of help you down the right path of building a bot first thing is formed this is one of the most commonly used templates this is where you have to order a pizza or you have to book a flight out and those repetitive things because essentially when you do this on your web applications today you are going through a wizard none of this is new right it's how you want to interact with your computer are you more comfortable doing a more natural conversation rather than just clicking around on your website okay so we can kind of walk you through that wizard in a bot so these are like a series of steps then language understanding this is where we're actually going to call into Louis in cognitive services because this is what actually understands what you mean when you say natural things okay so behind it it's going to be an azure Community Services app which has to have its own app ID and it's needed it needs to be registered and then that's when you're going to have to train your model so when you say booked a flight out of Seattle what are the 20 different ways in which you can say it so they're your bot understands okay and then passes it back to the bot so essentially what we are getting is from the bot framework you are pre-configured to call in to Azure cognitive services and then as your community services makes sense of what you are saying and brings it back to the bot and you can do this from C shop or no js' okay so just a quick example of the form thing which is very easy to look at I do have a form bot here which is called the sandwich bot because that's just a normal example so let's go ahead and look at this thing here we can test this in a web bot or web chat window so here if you notice the little messaging here I can say hi I'm up here and the bot knows that it's a specialized bot and says hey it looks like you're trying to order a sandwich because that's what I know what type of sandwich do you want so these are now Pickers okay so you get to pick what you want I would like a steak and cheese now it's gonna go through a list of things now you're getting two rules right so you said this then that then this then that so and you can kind of back-trace sometimes if your user does not give you the right response you can say oh I didn't understand that I wanted this from you so you can kind of go back and forth a little bit so 6-inch sub what bread you want that and then within breads with in Italian breads you have two types what do you want what type of cheese so these are all Pickers then you get to pick a whole bunch of things so these are like just numbers that you can pick cucumbers what type of sauce do you want let's do honey mustard and that's it so it's essentially said I went through these six steps with you and I made you choose things every step and you gave me this sandwich and once you are ready is this your selection you said yes and then said okay that's your sandwich I'm going to send it off to the shop and they're gonna deliver whatnot okay so just a super simple way of using the form template which actually kind of gets you quite a bit into these like flows okay how to ask the user and if you look at what this does for you I'll give it a second all right so now this one has a little more stuff to it so there's a model which is our sandwich this has all of your options like what type of sandwich what was it what type of bread what type of cheese it's all in here and then you have your dialogues as to how you actually control what you ask the user that's message controller so this is where your tasks and your your your post and you your awaiting the message from the user all of that is going to code it up here and then you kind of let bot kind of drive the conversation as to what exactly it needs to get all the information from the user so we can go about it so all of this is kind of bundled in and it's part of the template that you get it's really easy to call into most cognitive services like and good examples of this are like vision api's if you have to have a bot that knows how to understand or make sense of images from the user you hand it off you take the image you hand it off to the azure Community Services vision API we have another customer of ours who uses the vision API to do quality control on shipping so they have a little camera that's mounted on top of shipping containers mm-hmm and they do quality control as inside going out of their warehouses you can also do sentiment analysis with with common services so as you are talking to your bot you can kind of sense that the user is getting angry right and you can sense his sentiment and say oh maybe we can do other things to make you happy and so on so all of these things are intelligence that you're adding to your bot and this is what makes BOTS smarter and they kind of let you automate workflows so this is this is where we are this is where we start some things that I really like pointing out is the thorough documentation that the bot framework has there are tutorials on how to do just about everything let me show you some things that are really interesting the concepts here let's do Congress services language understanding let me do a how-to I thought it was really nicely done they talk about channels and the thing that I was trying to get to is how you can hook this up to language services that's something we'll do in part two yeah we could so essentially I mean just just start here essentially is what I'm saying okay and they have documentation on how to use vision API and language services all of these things that help you go from your bot to other places that give you about intelligence okay that's it so bots are nothing more than apps you can a restful endpoint but it's platform agnostic so you can put it in whichever channel that your user is using and start automating little things in your workflows that don't need human interaction very cool yeah yeah I mean if you look at some of the most common things that we do on most websites it's a bunch of steps that we follow wizards and this is where BOTS can come in and make it more conversational and more natural right yeah all right that was a good introduction we'll end it for here in this part and we'll come back in part two and and see more about how to build them absolutely so again this was all about BOTS you can find me at SMI div that's my social handle on Twitter and github in everywhere but thanks for watching all right and we will see you next time on visual studio toolbox [Music]

Be an A11Y Build Accessible Web Sites for Everyone

hey guys sorry about that it was a little bit of Internet connectivity issues on our end apologize don't but we're here with Rachel are you doing I'm doing well alright Rachel sees from jetbrains and you're gonna actually save the best for last I think personally yeah so you're gonna talk about how to design and develop like excessively yes s ability wait yes yes okay oh that's good cool very cool um so why don't you just take it away all right sure so this talk title is be an ally and with Ally it is often abbreviated as a 11y for accessibility and you'll see this in a few different areas so that's a popular nomenclature in accessibility design so what we're gonna do is talk about a few things since we only have 30 minutes that you can do that are pretty easy to be able to make your site accessible for many many users out there and I'll let you know why and how as we go on so first off why should we care about accessibility because it is much more than a disabled parking spot right and a little sticker in the car window that's the first thing everyone thinks about accessibility well we have a parking spot out front aren't we good nobody thinks about it on the web and it is actually very very important think about it on the web and in apps as well a lot of this applies in both lands web and in so it is the right thing to do and you know it right don't pretend you don't you do right it's the right thing to do you are able to reach all the people you need to reach even the people that it might be difficult to reach if you're not convinced about that you or a loved one absolutely will in your life have an accessible need many people do now as staggering number of people but at some point it's gonna be you everybody dies and if you think you're not going to you're probably delusional enough that maybe software also isn't for you right that's that's we're going to die I hate to tell you about that and end-of-life is going to be a time when you really really really need accessibility along with illness accidents and lots of other things that happen in life including aging as well so if you live a nice long not life to 90 that's awesome but you're gonna need a little help still not convinced how's this alright there's money in this so you're doing the right thing and you could end up with a pile of cash how's that because over a billion people with 1.2 trillion dollars of disposable income have accessible needs and when you incorporate in their loved ones that goes up to 8 trillion so is that good enough for you if you're all like hey you're being all PC with this right thing to do and blah blah blah well how about the money then right do it for the money at least alright so there's a good reason and this is from Forrester in the US there's 60 2.8 million Americans that require assistive technology so even if you're like well I don't do stuff worldwide you only need to do stuff for the USA well great but that's still a lot of people right if that's a dollar a person of revenue you have that's a lot of money there's very many different categories of things that people need for accessibility needs 25% have a vision difficulty order also have dexterity difficulties and we have hearing difficulties 35% of entrepreneurs are dyslexic and 20 in the UK so that's a few stats mostly from the American side of things that translates out to a lot of cash as well and of course those baby boomers right and then following them what is a Gen X after that or something they have over 65 they're rising medicines getting better so even though we are still going to die we're you know you're gonna get pretty old and what happens when you get old you're gonna have to face this you may lose short-term memory vision hearing fine motor function things that today's technology rehire all right so those things gets a little bit harder when you get older and I can vouch for this myself you know I'm up getting there an old person territory and I noticed it's harder to you know fine-tune stop laughing at me better so like I noticed it's harder to fine-tune click on you know an exact pixel with the mouse or even a trackpad and things you know I I need to do the thing with the glasses where you have to take them off to read something in front of your nose or you have to stretch your hand out really to see something on your phone so those guys you know I actually had the talk about progressive lenses with the ophthalmologist is like that milestone that you're gonna get there and it might not be vision but it will be so so okay you say well you know but that's that's the thing there's better glasses out there and whatnot but look at here's what customers want as far as accessibility goes right what they want is not better glasses per se and have you looked at prices of glasses in the US these things are expensive but what they want isn't necessarily newfangled accessibility technology but they want you to write better software imagine this as software developers you may have heard this before right people want better saw we're and accessibility is a big part of what they want so and in this case the last this might not be the most recent poll but it's just you know going in that direction still over 80 percent wanted more accessible websites because developers like flashy things are more interested in clean code and that is a great thing to do but then you do it at the expense of people actually being able to use your software and it's been said shipping as a feature shipping for everybody should also be a feature so the types of accessible needs there's four general categories visual auditory motor and cognitive the bulk of your work if you're a developer is going to be in the visual area because the web is very largely visual but there are a few things you can consider maybe not so much coding practices but consider for the other three there will be some coding practices the first thing we'll take a look at is that access assistive technology so there is a picture of me on the Left where somebody else took a picture of me highlighting the menu with the phone because the old person can't see it it was dark how many times did somebody do this out at dinner right you have to highlight the menu or even trackpads guess why there even a thing oh sure it wasn't just a cool thing it was for accessible needs and of course glasses a lot of people say but but I'm really young and I don't need them and they're wearing glasses and I'm like but you're actually wearing the assistive technology now right as I am glasses and all I still can't see the menu so sometimes you're already using the assistive technology and you don't even know it did you use an escalator today guess what that's technically an assistive technology it's not always high tech it's not always a spaceship the ones that we tend to think of and we think of like a disability or something about accessibility or things like the screen readers Braille readers those kind of things maybe a like a Braille reader sip and puff switch single access switches eye tracking eyeglasses or adaptive keyboards so there's a few examples of the technology that many people are using to access your software and you might not even know it all right we do have these people and they may be struggling to use your software and in many many cases they end up being so frustrated that they just abandoned popular sites and I remember looking into some data with mobile app development a while back when smartphones were becoming kind of a thing and they said like look if the page takes more than two seconds to load like 70 some percent of the users just dump it and they're like and they just go somewhere else they won't download the page they won't surf they're there they're dumb even on a regular computer how many times it takes more than two seconds to load right so people get frustrated quickly with technology especially people who may not have wanted to use it in the first place and they have you and if you don't perform well they're not going to use it right so these are things we have to consider these people are your users whether or not you planned for it they are or at least they're trying to be but you might be losing them and with that a lot of money Xbox knows this so that's one of the adaptive controllers for Xbox right for accessibility needs and one of the designers talking about it and there's the tweet DEP that goes - let's take a look specifically now at these categories will start with visual which there's four kind of areas inside of their low vision so that would be me a standard you know I'm getting all their Gansey stuff then blindness color blindness and color contrast sensitivity now you could consider yourself perfectly not disabled what so but color contrast is something that tends to hit everybody if you have bad contrast nobody can read your stuff or they can but it's it's literally painful for some people so one thing that we have is screen narrators so I have my Mac here so I have voiceover which works pretty well but also there's NVDA very popular web anywhere also a couple of browser specific ones voiceover not browser specific that little point just got tabbed in a bit so we do have these various screen readers these are generally free there's also some experimental ones and some that you can pay for as well but if you want to test and just get a feel for what it's like I highly suggest people do this download like NVDA or web anywhere or if you have a Mac use Apple voiceover go browse the web with your eyes closed and see how far you get see if you can understand even a simple page that you use every day and what's going on if you lost your site tomorrow would you be able to use their sites and you're gonna find out that the answer to this is no in many many instances so we will work with them at some point or you should have people that test with them at some point and if possible visually impaired people so the first thing that we can do to help screen narrators is this thing called a skip link now what could be more annoying if you cannot see a page and you know pages are full of things nowadays they're not a tiny little page with just four or five blinking elements like they were decades ago there's just all kind of content things popping up ads here and there you know even if you have an ad blocker sometimes things squeak through and there's a lot of links and what happens is when the user enters a page the narrator not all narrators they don't all work exactly the same but many of them will read off the top bar of links or the side bar of links and when they do that it'll read it off and then they click on a link and go to that page and then they have to read those links again before it gets to the content and then if they go somewhere else it rates the links again and this gets to be annoying pretty quickly so something you might consider is skip links now some of the assistive technologies getting a little bit better in that they are able to figure out with semantic hTML that there is a section of links and they just skip over it but just like with accessibility you do have to support older browsers as well so if you're still supporting IE 8 and some of those older browsers you might need to have skip links for those newer stuff and newer designs you know using html5 semantic web that sort of thing is generally a little bit better in this category but we still got to support the old stuff and it's easy enough here's what you do the first thing that shows up in a page is going to be an anchor and it's gonna have its href set to a named area or named link then somewhere in the page where if somebody would be able to skip over the navigation bar and go to you have that named area or link in the page so here in the sample you know I just have a class that's a skip to main content and then the main content which is either a named link or a semantic main tag either one works so this when this happens then the screen narrow reader can sit on the skip link and then that person that is not cited well can then hit the tab key and then just skip down to the content just go right past all of the links now a few things you could do with this one is if you have the links present and visible fine that's great but sometimes people have links not necessarily as the first set of things in the page because it does have to be right up there in the beginning so what we might want to do is a little bit of a small hack and that is to put the links in the beginning but to make them hidden now when you make them hidden you just make them a one pixel wide one pixel high and set the left way out into left field so there it's like minus ten thousand then this way it'll just push the links out but still in the Dom because if you set visibility to hidden then it won't screen narrators won't pick it up if you said you know any kind of the visible properties it won't if you set the width and height to zero it won't pick it up so you want screen narrators to pick it up so if you set CSS for those links then you can just shove them out in left field they're out of sight but the screen narrarator can read it and then people could skip over it now if you're using something like bootstrap and if you're using if you're a dotnet person which you probably are if you're here at dotnet conf then with bootstrap they have an SR - only class and with that you could just set your nav portion like the whole div that contains your links to that and that will hide it if you need to there's also some landmarks that you can use if there's no semantic HTML and you have a very very old site with mostly old browsers to use so skip links are pretty easy you can just do an SR only in there so that's just a little bit of HTML if I go and I take a look at say a razor pages sample like a small braid your razor pages website and they go into the layout page here's where you can actually put something like that I might have my div with a couple of links inside of it and I could class that as s are only because this uses bootstrap right so then that would pick that up if I didn't want to do that that's fine here we're using nav anyway so nav is semantic HTML so that should work just fine so here I have my different links and bootstrap and pick that up and decide if it needs to display or skip or whatever so that'll be good for the screen readers also you notice things like main and other you know footer header those semantic elements having nose helps with the screen narrators there's also an accessibility plug-in for bootstrap so that will help you along with that past screen narrators there is much more you could do but we only have 30 minutes so we'll take a look at these other factors here like color blindness here's a really easy low-hanging fruit thing you could do download this thing called color Oracle and when you do that I could come over and take whatever sample webpage that I want and let me run this and then what you could do with color Oracle and I think I'm gonna have to go maybe launch my color Oracle and now I can't find it oh here it is there it is so it should show in windows in your tray and Mac it'll show up in in the Little Mac area here and what you could do is here I have several colors right your classic red blue green yellow right right out of the rainbow and once I have that page up I can just click on color Oracle and then I could pick one of the different color blindness ha's that are available and it'll show me what it looks like to those people so something we could see here just by kind of scanning through the different colorblindness --is that we have right lacking red black and blue lacking green etc is that a lot of people on a lot of websites we use a green button for okay and a red button for cancel but if you do that they don't look at all like this or maybe up to five percent of the population and if you take say the US has 330 million people so that's a lot of people that's several million people that don't see hunter green and it looks like these colors here so you might want to consider not using color as the primary indicator of what something does use you can have color in your buttons or whatever but also use text or something else to denote what it does so you can get this nice little tool and then you can run this through any web page to see what it's like as a matter of fact Facebook is blue the color about it is because Mark Zuckerberg has one of the colorblindness is there's also a cool accessibility color wheel tool so designers and developers can work together on this one and you just pick out your foreground and background and it'll tell you if it's good or not and you can pick out different contrasts and in it you know adheres to WCAG and all that good stuff so that's a nice easy tool to use and there's also a colorblindness simulator so you can go to the simulator and it does something similar to what the color Oracle does but here you can take a sample photo and you can just click around in it and see what it looks like you could upload your own photos so if you have a photo heavy site that will give you the view of somebody who has a color blindness so you can help design much better now color contrast is something that affects nearly everybody so we want to consider what's good contrast and bad usually nice and light on dark or nice and dark on light but also sometimes the colors themselves so here's bad contrast a lot of people won't even be able to see this that's just crap here's good contrast alright you can see that here's like yeah it's not great really that could be way better this is very good right black on a nice light blue now this is horrible actually looking at the monitor I could see it on my laptop but I literally cannot see any text on the screen in this studio so that's terrible contrast there were some good contrast right and then again this is just so bad your eyes are bleeding at this point like this and I see this everywhere if you do this you're a terrible person I'm sorry that is just awful here's good contrast hmm and then just another man that's it like light gray on white I know that's popular it's not the greatest though these red on white is good but if you look at some of them like that red on the green it actually hurts your eyes when you look at it look if your software is physically hurting people you're a jerk like stop it that is just not cool alright so look at these things and use say the color contrast contrast tool from webaim and that will help you sort out your colors and if your designer did that go give them a slap that's not right they shouldn't be doing that as far as screen readers go so you can take any screen reader and kind of practice with it so if we are using things like semantic HTML this helps now if we're using dotnet also not only do the templates for the asp net core and asp net projects have semantic HTML but when you use data annotations that produces the correct HTML and javascript so the screen that narrow readers can pick that up so if I were to run something like that and just launch my site somewhere where I can maybe enter some data and once I get to here if I go ahead and open say voiceover okay so we severed those cool things oh I forgot to actually there we go I keep forgetting now it doesn't it these these are pretty robotic touch to enter passion in this field type so this one goes fast because if it went slow people would be on the page all day but as you tabbed enrollment age dev RTD month enrollment to take stepper hmmm so you'll see it does the oldest ever inside added text to begin interacting with the sever press control option shift down arrow to exit this date field press control option shift up arrow okay so as you can see as I go through and I tab through it starts to tell you what you're doing and where you're at and again if you're using like scaffolding to scaffold your pages like I did with this one and data annotations this is gonna pick all of that up and it's going to be able to effectively read what's on the screen and as you can see even though it's for folks with sighted disabilities it does give you a little blurb at the bottom in text as well and so if I look at my data annotations tell that's much wider project system preferences except okay we don't need it to narrate inside of writer or anything we're good so here right in my model all right I can come in here and just set the datatypes correctly so I have dates and it knows it's just a date not the time as well and the display name so it the screen reader can pick that up and in annotations that just gives us all of the information when it produces the rendered output screen narrators are very happy about that so there I have those so that works out really good for accessible forms so you could see we'll take a look at the form here if you have things like the checkboxes and lists and grouped items you could use the field set and legend but in this case I didn't have any I just had a just plain form and a couple of divs that were grouped here so there's one grouping for the name one for the enrollment date one for the expected graduation date for these students and something that I did here on purpose so we could see how it works if you notice all of these except the last one have the label right so that's a semantic HTML element and the label tells a screen narrator what this is about so previous days we would just use a span or some other kind of little tag to be able to kind of label our input elements but now what we could do see input and then use our s before and then go ahead and say label ASP four and point that to our input right we're actually the same actual model item right so a little object right out of the model and then that's all gonna work seamlessly together for us and I really I didn't have to do anything this was all created when I ran scaffolding actually really you'd get free stuff here it's a boatload of free stuff now I came in here and I removed this label so what would happen if I remove this label and I get to that element so if I come back here and turn on boom - voiceover back on recipe voiced over us in Chrome and attacks blank that's it we're currently on a text field thank you and you're touched in this field type thanks yeah very a text field what textfield I don't know it's not labeled I took the label out so even if there's some text ahead of there the narrator might not pick that up or know it might see the text but it won't know that it belongs to this textbox so it just goes at a text field you're on a text field yeah thanks thanks for that that's not helpful whatsoever so you want to use the labels and appropriate scaffolding yeah and you can see how annoying this can get if you are somebody with sighted needs right so there we have the label again and also some things that we tend to do people tend to put a tiny little star and that's all - Dino required and they'll make it read which is to bad things right the read Because are color blind folks can't see it also it's tiny a tiny star that sometimes looks like a speck of dust on the screen so you know other sighted needs can't see it so what we might want to do if you're actually gonna use the word required or if you're gonna actually denote that something is required instead of waiting for them to get to the end and then popping up the messages then you could actually just put the word required or something that's a little bit more clear than the star so that tends to be much more helpful there's also a little tool tip that you can create and the O AAA accessibility project has that available so you could go there and they have some sample HTML to pop up a tooltip and then of course the folks in the accessibility circles argue our tooltips really accessible but these are built pretty well so they don't get in the way the other thing with accessible forms you will see something called Aria now area was more needed in the past you will need it today once in a while when semantic hTML is not really relevant for what you're doing or if you have to support some of the older browsers or browsers that don't support html5 right so if that happens you may need some of these Aria tags as technology is evolving these tend to be going away a little bit so you can set an aria required if you needed to do that and that would give the screen narrator a little assist and would say oh yeah yeah I see that's required I can tell the user that and there's a full set of Aria attributes that you can apply to any HTML tag and of course that also works for any raiser markup as well and they have roles States properties as well so you can say if things are disabled or if it's supposed to be navigation versus content required etc so it just helps the narrator's you will the narration so you'll see a few of these in the templates or asp net court projects with Razer pages now there's more things you can do for sighted people or people with sighted issues that's just a few of the big bangs for the buck it's not a lot of coding to do but it helps tremendously so we'll go into auditory and the next three categories are a lot less coding but just being aware of what's happening out there and who is accessing your software so auditory is mild hearing loss to total deafness so that's generally what that is now some things just to take note of don't rely only on sounds for feedback that does happen sometimes it happens in games or more an app development desktop kind of stuff use transcripts and closed captioning wherever possible because not everybody could hear actually I'm seeing many many more people who can hear perfectly well and they say I actually prefer to just not blast the TV and I like to have closed captioning on or folks who are learning languages just like to run captions as well and it helps out a little bit to hear it and to read it at the same time know about Deaf culture there it is such a thing right sign language is there in snot sign language it's sign languages there are dialects and sign languages and people do have accents in sign language so if you do get interpreters that do signing that's just something to consider right that it that's out there so you might have a signer for one of your videos or something like that but they may have an accent or something and if they're not from your area and you're localized some people might notice that so just so you know it's available out there the motor and dexterity issues all right so this is generally illness injury disease there's many if you think about it things like epilepsy and seizure disorders right a lot of websites have like a loud you know pulsating weird like psychedelic stuff going on and it just like kind of goes all over the place and people actually have seizures I know the Simpsons did an episode and they kind of like made a big joke about it but it seriously actually happens they're also motor dexterity as you get older if you look at many of us have you know very aging parents and they have tremors essential tremor or something anybody of any age can have plus actual diseases like Parkinson's and whatnot you can have dexterity issues and something I see this drives me up the wall and I'm not the only one you'll go to a popular website and they'll pop up an ad well first of all the fact that it's an ad raise it just right there it's so annoying but then they'll make the close button like to a two pixel by two pixel button and you basically have to be a surgeon to be able to click on that button and it is really annoying and then people just go forget this and they just don't come back to your site so where you think you're being clever and you're trapping them in there they're just going like f you and they're going to another site because you've just made them very very angry so so all these things can you all these kind of people are using your software arthritis how arthritis is super common lots of people have arthritis and it actually sometimes painful to try to click on that little square or to try to use just the mouse so make sure there's always alternative keyboard input right so that's something and that the tab order is not ridiculous that it goes in a logical fashion people forget to check the tab borders on forms also temporarily like I said in the beginning you will at some point or a loved one will have these needs you break a bone that's very common people that happens you break a bone that can cause an impact on your technology use also sprains and lots of other stuff right people even just get you know frozen shoulders or lots of joint problems and it's just part of Aging or injury and then from that just makes it a little harder to use devices alright so phones computers or anything so make sure also alt right so alternate keyboard and alt in images as well so lots of things avoid pop-ups and modal dialogs unless they're easy to get out of nice big closed buttons or where somebody can just click away or move away and it easily goes away cognitive impairments as well are very common everything from just you know memories not so good anymore it's you know also an aging issue remember the millions of people in the u.s. autism seizures just comprehension and learning disabilities dyslexia ad D that's very very common so these are all users all right so if you look at this this is a significant portion of the population between visual auditory dexterity and cognitive right you're talking like a quarter of the population at any given time all the way up to almost 40% in some areas so that was a huge chunk that has something going on or multiple things from these areas going on so that's something so there's no tools to help people with the cognitive disability for you to write code to make it easier for them what you need to do though is just keep things clear and simple right which as a programmer you are supposed to be doing right there is a kiss principle and you're supposed to be doing it in your code and it should be in your product as well but also programmers tend to you know poopoo the UX all right like it's not my job and stuff like that but it kind of is you're building the product and people are using it and if they can't you are partly responsible so you need to make sure that comprehensive UX testing gets done and not just with two people who you think are the average user you need to get a nice variety of users in there because of these massive percentages of people with various disabilities right so no tools per se to help just that you need to keep things in order keep it clear and simple keep it easy to use listen to your users when they say this is not easy to use something that's not usually categorized as a disability but it is an interesting thing that researchers have found as part of the human spectrum of being and living and that is the thing called synesthesia so there are these number of synesthetes out there with these various ways that they experience the world that is different from what you would use or call in quotes normal one of them is the grapheme-color synesthesia which is the picture that colored picture and when whenever somebody talks about numbers if they said picture 1 to 100 that is what would show up in their head the one also to the right is the spatial signal sequence synesthesia and I actually have that right so when I see numbers I see them in a certain knot with the cool colors though but I do see them in certain patterns or ladders and time dates and times I see in like circular patterns when that's how I experience time so people experience things differently other ones like when they hear sounds they experience a color or taste and often letters like I have the word synesthesia somebody might see every s is read every you know H is purple and it'll be consistent right so every time they will so you might be reading black on white text somebody else might see a pretty big rainbow going through a page of a book so there's all these different ways that people just simply experience the world not a disability is just a different way to experience which is also how I see autism just a different way to experience the world right so a lot of these things also when people sometimes when they touch things different textures they will feel a taste or feel a taste they will taste something when they feel a texture or you know when they hear certain sounds they might have a taste like so all kind of these weird and different kind of crossed perceptions so those are those four main categories and some things you can do as a programmer as far as some general tools to help us out web aim is where you want to go this is a good one-stop place to go so if you go to web aim they have this cool thing called a wave scanner so you could go plunk in a URL you can even download this as a toolkit and it will just go through and tell you all the things that are you know that you can change to make it more accessible looks for alt tags and all kind of interesting and cool stuff all right so you can just pop in a website and see what it says so I could even like pop in my own blog here and then give it a second and it'll parse it and then come up with some ideas so here it'll actually give you errors alerts tells you where you're using Aria and not and some things that you can do better all rights that you have in here so that's a very handy tool there's also the web content accessibility guidelines they have a checklist so when you go to publish you can go through the checklist see what's out there also depending on where you live and what sector you're in if you're in government most certainly you have to do this so it just depends there's section 508 for the US and Europe has some rules about this too and also the wk2 checklist so there's two of them is that you can use in there the bottom one is a little bit newer but these are checklists that just allow you to go through and make sure that you have everything that you shoe it and get all your ducks in a row you can actually say Oh make sure I have alternative text make sure everything is clear I have my alt attributes and here's inputs have labels deform buttons have a descriptive value so all these cool little things so you don't forget right so that's very very handy as well so I like that quite a bit so web aim in general is just a really good place to go there's also the ally project so if you just look for a 11y project the first thing that pops up and they have all kind of cool samples and things like that and places you could go to to do a little bit more coding and much more than we could possibly talk about here and a half an hour which I'm probably okay so some final thoughts on this also right and this is right from web content accessibility for the love of God and all that is holy get over yourself stop dragging your heels and make the hit you create accessible bleep and seriously actually freaking care about it as well yeah it's gonna get played okay so really this is what WK finally got fed up with all your BS developers because you don't do any of this for any people just let this you know to the last thing if they even get around to it but a lot of people simply can't even use your software at all so like I said if you don't care about the right thing to do or that it might even affect you if you think it won't how about the money go after the money alright and W CAG wants you to do it as well so it's right up there on their on their check or on their wish list and their actual traffic specs which i think is kind of hilarious but sad that it needed to be said right in here I gave you just a few simple things you can do that will really enhance accessibility in your projects and there's of course a lot more you can do if you go to webaim you'll find that out I think I'm pretty much done there wait we do have a couple questions yep let's go it's just a couple here one here actually is bringing the chat window they are question the Google live transcribe app is awesome are there any other available to be used in Windows or the browser extension the Google live transcript app transcribed o transcribe app I'm not sure if there's a comparable piece of software out there for that particular okay another one I got in a whisper was was a bear I'm gonna ask you to verify a link I guess for they were asking about an accessibility for Windows apps okay because you talked a lot about web apps off yeah all about web apps and I was wondering if you know was there a more up-to-date piece of software the I mean piece of dock patient than the one here that looks fairly old to me to helix a lot of these design concepts are sort of they sort of like live longer than the operators that's what I was gonna say yes it's a design concept yep so I was actually gonna when you started talking about windows point it to the actual windows [Laughter] just making sure I didn't mess this all up I guess II know number three so yeah so sounds like that was anyway yeah like give them everything that they need because a lot of that does have to do with design and look and whatnot sorry that should help awesome all right that's about it so I want before we wrap it up first of all I say thank you very much for me wrap this whole show up I gave what I say thank you so much to all of the people who have stuck through the whole show all the way the end even a half an hour late okay we actually have a couple awesome people like literally the average like duration of time watch I have a couple stats here of the whole entire show two hundred and sixty five minutes and TriNet a Trinidad and Tobago like they all like all three people watch the show like days oh and I wanted to thank you the second Cabo Verde and the third Isle of Man fourth Kenya at a hundred and twenty two minutes straight watch so those were long you know one full session to be fair though Isle of Man yes it's probably one mile yeah I don't know literally a just a man that's it yeah just next to England everybody else is on the main England I'm hoping I'm so anyways great show everybody and resue / appreciated ha BR get into the shot here you've been the man man run in this hole twitch thing to you and Jeff yes to twitchcon right yeah Jeff dumped up yeah you know he totally dumped us for twitchcon but that's cool because we need him to create some more mods for our awesome twitch stream for you right so huge thanks to everybody who tuned in on all three days thank you so much for making this fun this is year number six for does right so yeah so this is your number nine for the virtual ones so next year we got our big number ten come over here mister big party next year yes yes starting the year nine years so and thank you for actually building a product this year we had a launch event so thank you so much for coming you made it successful that's the best one yet Thanks thank so much so yeah I gotta push the camera [Laughter] [Music]

Async Debugging Part 3

>> We talked about why debugging asynchronous code is hard, we've also talked about asynchronous call stacks, and now we have reached the main event and we're actually going to talk about all the cool tools that you can use in Visual Studio to debug your asynchronous applications on this episode of Visual Studio Toolbox. [MUSIC] >> Hey everyone, welcome to another episode of Visual Studio Toolbox. I'm your host, Leslie Richardson, and we are closing out our mini-series on asynchronous debugging by talking about how to actually debug your async code in Visual Studio. Joining me once again is Isadora Rodopoulos on Visual Studio Debugging Team. Welcome back. >> Hello Leslie, nice to be back. >> Sweet. In part 1, we talked about why asynchronous code is hard to bug, in part 2, we introduced the different kinds of call stacks that you need to consider in regards to workflow with asynchronous code. This time we're actually going to demo some stuff in Visual Studio, which I'm really excited to see. >> Yeah. We finally have some hands-on experience on what it actually looks like debugging our async call with Visual Studio. >> That is great. >> Yeah. Here I have so the famous app, an example that I have been talking about in the previous sessions, I have it here. It's an actual app and it's basically My Song Finder. It's basically able to find a particular song in my Spotify account according to the lyrics. I just want to walk you through that. As you can see here, I have something very similar to the code that we have seen before, which is basically the playlist. It's trying to find the song asynchronously, and then I have effects, and then for each task, I'm getting the lyrics. This is everything we have seen before. I just want you to do some hands-on experience. We can actually see the famous, furloughs specs fast enough. I will try here, I have a playlist which is called Monday Morning. This is just my Monday Morning songs. Then I can just prepare the lyrics for something which is like try again. It's just the song that I love and I want to know which song it is because I forgot the name, I just know how to sing it. >> I never remember the names of the songs. >> Yeah. The first thing I just need to login to my account so I can be sure that I can actually look it up. That just takes some time. Then I'm just going to login to my account sooner than later. It also authenticates with Genius and Spotify. You can see here that I'm now logged in. Then now I am actually able to search for it so I can just click "Search", and then as you've seen before, it's looking up song. It's trying to look up this particular song. Then we have a responsive UI that unfortunately is not working. What could I do? I could do a break call and just try to understand why that is the case. Why exactly I couldn't find any song and I was just stuck there awaiting for something. >> Your screen is ever helpful. >> You have a very classical, not helpful, but the application is in break modes, but we're not exactly sure why or how. All of we have is just this. Then I can try looking for the call stack. I don't have anything very helpful either. Each one has their own workflow, but you can try looking from the trends here. Let's see the main front, maybe that'll help. Then it's not helping. There's a WPF app, so I just have WPF stuff. It's just running. It's just nothing that I'm interested in looking. An option here would be maybe I can try opening the specs window just looking for the effects because I'm using async debugging. I can go here and debug. Then I can go to Windows and then barrel specs and then I can go here for effects. Then basically what I'll see it's just the effects that are currently executing. I don't really care for any of the code. This is nothing that I'm looking at. If I just miss any external code, I can see that any of these code, it's not any of the code that I wrote. >> Yeah, it's not helping. >> Yeah. It's basically not helpful at all as we have seen before, which is basically just the mainframe pooling UI operations. That's it. I don't have anything here that might help. I don't know what I'm doing, what I'm waiting on. I would just be doomed if I didn't know any other async debugging tools. I don't know. >> It could work. >> Ecxept that we know we can go here and then switch to tasks. Then suddenly we have all this information and we have code that is ours and we can actually recognize. Here it's quite small, but one of the things that I really enjoy about this, is just being able to search for stuff. For example, I know that we have playlist. It's the name of the class, so I can just search for that, then it'll look for any of the frames with the playlist. That's one way that if you were just seeing a lot of tasks and you just want to start, you just to do Control F, I do it all the time and I always iterate back and forth with tasks and friends. >> Yeah, that's so useful. The parallel stacks window have so many different task continuation blocks, and it's just like, where do you start with that? That's a lot going on. >> Yeah, especially because this is a simple app. It has a small scope, but if you're dealing with huge dumps, which usually are every day. Oh, my God, it's so much. I do enjoy filtering as much as I can and contracts so great for that. >> [inaudible] >> Here, we have what we call the async logical sense. See what I mentioned before each of these mocks are real frame. For example, if I go here to playlists and try and find song, suddenly I'm on the actual code. I'm here at the try find song async, and I have this nice constant here,. >> You have async in brackets, so for. >> Yeah. >> Calls back. >> What we can see here it's that waiting for a multiple tasks because it went, Oh. This is actually a graph. If you look here, we have one task, which is the one for try find song async, because that's async. Then here we actually have four different tasks because we have four songs in that playlist and for each song we are looking for the lyrics. We have some graph here that they are all continuing inside that same method. Here, this is Async. If you look here for the Fred for example, it's not a real friend, is async call stack. That's a virtual friends. It's not real like it's fake. It's made up. It's all because we are in state machine. Yeah. We can see all the fields here. Let's say that I want to look for some of the songs and tried to figure out because we do know that we are hanging, but we get to the point where you fetch the songs and we are fetching the lyric now. Let's say we are fetching the lyrics here. Then I can basically select which one I want to look at. Let's say I want to the first task. I can go for a here and then suddenly I can even pin this. Then I have the artists. >> Frequently in the [inaudible] >> Yeah I love how this. >> Was anymore companies. >> I love it. >> You have here the artists and the name and if you just look for all their tasks, you can see that they change. Suddenly, I have all of these other songs and they are all just fetching their lyrics, and this is a very nice way to just differentiate them. You can also see here that we have the cost right here. You have the try find song async, so for each of these tasks that's if they are existing on each of their own front. Even though they're actually all state machine so it's technically alive but's marking. >> But just make it more understandable. >> Yes. So we can actually go and actually debug this code because we know we're hanging, so I can just use here the Tasks View and then Fetch Lyrics Async and then this is the top of the stack, so I know this is something that it's been waiting on something, and here it looks like I'm awaiting for this reach your async, so it's basically waiting for the web request operation. Because I did implement my own service for just acquiring the lyrics and caching them that database and blah blah blah with Genius and that has been provided here by the local host. Then I basically have this endpoint here, and what's happening is that for some reason that requests does never seem to be returned. We are all forever waiting for the get response. Since, I already know how this thing works, I can just take a closer look at this particular method and notice that here I should not be parsing the song id, but rather I should be parsing the song path because song also has the path variable. That's one looks like a chart. >> Poor little things. >> Yeah. That's actually what it looks like for the Genius, so I could just stop debugging this and then I can just see if that actually fix this or if I can actually get something. Again, I'm just reviewing and restarting my WPFF >> That's so great because the parallel stacks for tasks tool did exist, it has existed for a while, but it was never that buffed up as much as it is now. >> Yes. Essentially, because we have worked so hard with augmenting into integrating and making sure things work for different scenarios so for as log for WPF. >> So exciting to say this in trial and error. So it means if I find the one little property that you got wrong. >> Yes. It has so many tricky scenarios, so we are always welcoming if a new users have tricky scenarios like, "Oh, I can not figure this out." It's always interesting maybe, it's something that we need to implement to cover it as well. Any feedback is always so very welcome, we do use it and it's very useful for us. >> Sweet. We actually read your feedback. >> Yeah. We do read them all, developer community I'm always there. >> Once every other week I'm on browsing spree. >> Yes. >> Sweet. >> I think you are a back. See if we can built. >> Now I have my fix in place, so I'm very hopeful for my Monday morning, and then just try again, and I'm already logging because I cashed my previous logging. >> Awesome. >> Then if I just search, then we would just be anxious for a couple of seconds and wait if that's going to work or not, and then it's just fetching from within all the songs in my playlist is trying to find the song that I'm looking at. >> Fingers crossed. >> Then we go. It's the Hunter and Hunter opening. >> I was [inaudible] >> Yes. You just try again and that's the song and then it's called Departure and I just know it's Hunter Hunter opening, so now I know there is Departure. >> Most of my playlist on Spotify are just video games, movie soundtracks like animated soundtracks. >> Just one last thing that I want to go over here is that, just something that I like about this feature though, is if I add a breakpoint here, what we're zooming is that next time that we hit this particular path here, it's actually going to be running on a friend. Why? Because it's a breakpoint. We just hit right in the spot and say you're executing. You can see that it also changes the wise likely, because suddenly we have this icon here basically saying that it's currently being executed and we also have some functionality so we can actually go to the front, and then it's just going to switch to the front view as well. >> That's convenient. >> Yes. >> When Visual Studio response is convenient. No worries it happens. Demo shy, but I think having that ability to swap between the task view versus the front view is really helpful. >> Really? >> Yeah. The breakpoint is great, it definitely gives slightly different experience, but it's hard when you don't even know where to put the breakpoint to begin with, so having those easy tools like the parallel stacks tool in place is really nifty. >> Yes. I do love all the helpers such as the Control F or just there's some other things as well where you're actually able to save the parallel task view as an image, so you can actually just look it through and just share it if it's a huge one with your coworkers. So we can actually try to debug it together with someone else. >> That's awesome. Sweet. That was really great, and this was such a cool start to finish to look at how asynchronous debugging works and how async code works in general. I feel more comfortable and confident about being able to diagnose my asynchronous related problems. Hopefully at least you too. But if they want to learn more, where should they go? >> If they want to learn more, I have some resources that I share so they can actually look through them. There's a lot of talks and some talks very lively that they can also check it out and just walk through all of that or just a communication or there is things that they can find out about async and I recommend going through all of them, they are very useful. >> Awesome. Thank you so much Isa for the very thorough breakdown of how asynchronous code works and how to debug it. I think a lot of people will find this to be a lifesaver. >> Oh yeah. [inaudible] we now have a debugger Tweeter account. >> Oh yeah. >> Yeah. You should go there and give us- >> We will post that below because I can't remember the tag right now, but I'm so glad that that got revived. >> No [inaudible]. >> Sweet. Thank you once again, everybody. Thank you Isa, for joining us, this was really informative and I hope everyone has a better experience debugging their asynchronous code from here on out. Until next time, happy coding. [MUSIC]

Agile with Visual Studio Team Services

agile development is all about getting your priorities in order so your projects can take off to put it simply visual studio team services helps teams build amazing software if your team like most teams has a backlog Visual Studio Team Services has tools to help you get things in the right order and work at the right level of detail attach storyboards define acceptance criteria and make sure every item on your backlog is ready for your team to tackle backlogs have boards that keep track of your progress and show you new work as it materializes if you're practicing Kanban you can tailor the board with lanes work item limits and rich formatting options so you can highlight important data and remove bottlenecks keep up-to-date on the ins and outs of a project with drill downs that are just one click away anytime you want to see the big picture just jump up a level and see how items from your backlog are coming together for scrum teams visual studio team services has built in sprint planning tools to help you break down your work plan capacity at the team level and make sure you're set up to deliver what's important see the big picture and know the whole story with task boards different pivot options help everyone see what they've signed up to complete and live burn down charts show everyone what's really getting done and when you're ready to start writing code team services enables full integration between code changes and items on your backlog create branches directly from your work items and track progress without losing context no more wondering who changed what when or why plus drill into code changes at any time to stay on top of how your application is evolving and use the power of the query editor to build views of the data that matter most to your team turn those views into charts to give real-time visibility and then pin the most important views to your dashboard so everyone's on the same page but it doesn't stop there every dashboard and visual studio team services is 100% configurable giving you the flexibility to create tailored views for your environment no matter your environment move trying out your free account to the top of your backlog today at Visual Studio com

Adobe and Microsoft partner on Azure

SCOTT GUTHRIE: Let's talk about one more company that's using technology to transform their products. Which is Adobe. Adobe is one of the largest and most innovative software companies in the world. And over the last 3 years, they have been working hard to transform all of their products to deeply use and take advantage of the cloud. And I'm really excited to announce today that Adobe is announcing that they are adopting Microsoft Azure as their preferred cloud platform going forward and will be running all of their Adobe SAS-based solutions using Azure. And I'm really pleased to invite up here to talk more about today's announcement the CEO of Adobe, Shantanu Narayen, as well as the CEO of Microsoft, Satya Nadella. Here they are. (Applause.) SATYA NADELLA: Good morning. It's fantastic to be here in Atlanta at Ignite. And welcome my friend, Shantanu, to Ignite and Atlanta. SHANTANU NARAYEN: Thanks, Satya. It's absolutely phenomenal to be here. NADELLA: Adobe and Microsoft have had a great partnership. We have innovated together, we have partnered, to really drive the success of our customers over a variety of different technology platforms. In fact, just two years ago I was even at your conference talking about some of the things we were doing on Windows and the devices front with Adobe. This conference today marks a big milestone today in our partnership. With the leading SAS services from Adobe, your document cloud, marketing cloud as well as your marketing cloud coming to Azure is a massive massive milestone. And to me it marks, I think, at the core of it, the product transformation and business transformation that you're leading. So maybe, Shantanu, you want to share a little bit about what drove this decision. NARAYEN: Happy to, Satya. And again, it's so wonderful to be here today. What an incredible community here for Ignite and here in Atlanta. And as you pointed out, it's absolutely the next phase in the partnership journey. All of the innovation we've already delivered across Surface Pro and Touch and embracing Windows 10 as the platform of the future on the desktop. We've been on this incredible journey at Adobe in the cloud-first, mobile-first environment that you talk about in terms of how we reinvent the company. I think most people here still know Adobe for everything we have done with Photoshop and PDF. We have completely rethought how, in the cloud, we can reimagine the creative process as well as document. So the entire content workflow with our Creative Cloud and Document Cloud. But a few years ago, we started to think about business transformation and digital disruption and we felt there was an incredible opportunity to also target marketers in terms of being the last bastion of people for whom technology was not brought to bear. Sort of combining the art and science of that. And in that journey, we created the Adobe Marketing Cloud which is now the leader in its category with respect to enabling all of these enterprises to deliver a phenomenal digital experience. And as we thought about how we needed to evolve all of our clouds and we thought about the next phase of innovation for this. I think was critical to us that we had to think about things like global scale and what we were doing with global scale or trust and compliance. But perhaps most important, things you have talked about. Machine learning and intelligence. And so we're thrilled and excited to be announcing that we are going to be delivering all of our clouds - the Adobe Document Cloud, the Marketing Cloud, and the Creative Cloud on Azure and it's going to be our preferred way of bringing all of this innovation to market. And I think together hopefully we will be able to leverage this entire IT ecosystem and developers and hopefully even make a tremendous spark for all of the partner ecosystems, systems integrators and digital agencies as they embark on digital transformation between the two companies. NADELLA: That's fantastic to hear. Because this coming together of the intelligent cloud with the transformative SAS applications across Document, Creativity and Marketing I think is a massive milestone. One of the things that is really exciting about our partnership today is that we go beyond that. We go beyond that to bring, in fact, our respective SAS applications around business process together. Again in support of our customer's digital transformation. Specifically the integration between Dynamics 365 and CRM and the Marketing Cloud which I think is at the core of what we together can achieve for our customers as they look to engage customers in a very different way going forward. And I know you have talked to a lot of customers and what they are trying to get done as far as their marketing and customer engagement goes. And maybe you want to share a little of that. NARAYEN: Absolutely, Satya. You're right. I think we both would say that SAS has completely disrupted how enterprises are thinking about software, but as it relates to the entire customer journey, end to end, and building this connected enterprise, we think it's absolutely critical that we provide this integration that we can between sales and marketing and visualization. And so, from our point of view as we think about what you've done with Dynamics 365 and the intelligent business workflows that you are talking about and how you made it modular so we can integrate that within the Marketing Cloud. We just think that there is an opportunity to, out of the box, provide integration for all of our joint customers in terms of having one unified and integrated sales and marketing service. I think perhaps even more important is what we have talked about which is, we process 23 trillion transactions a quarter as people are moving their businesses online. But to put that power in the hands of practitioners and users, if we can integrate with Power BI, then you know the power of all of this data is actually now in the hands of our customers. So we're very excited about this out of box integration between our joint solutions. NADELLA: Yeah, in fact, that richness of things like Power BI, power apps, some of the other new app platform tools we have like Flow and Functions, brought together with Adobe and Dynamics 365 is what customers can then tailor their specific business process. But I know one of the things that's grounded us as we've talked about this partnership, and where we've drawn inspiration, is actually from customers who are already using our products. And that's really what has given us the inspiration to say what exactly is that out of the box integration, how should we even think about extensibility, the data models. Maybe you want to talk about some of these customers. NARAYEN: Yeah, you know, I think there are a number of announcements that get made. But we have demonstrated that the deepness of the partnership only happens when we actually deliver product integration and I think that's what we're most excited about. You're right, when we talk about this customer journey, understanding the definition of how we jointly look at customers and lifetime value and promotions and campaigns. If we can standardize on the semantic data model between our respective offerings, that again I think enables people to out of the box start to use these solutions to solve their business problems and the use cases that they have. And as you point out, customer interest. Already companies like Virgin Atlantic and US Bank and VW are telling us that they want these solutions to work well together. And I think, ultimately, it's about delighting these customers through this partnership. NADELLA: Thank you so much, Shantanu. We're really looking forward to bringing the best in class SAS applications from Adobe with both our intelligent cloud in Azure as well as Dynamics 365 and ultimately really helping everyone in the room with their digital transformation agenda. Thank you all very very much, and thank you Shantanu. NARAYEN: Thanks for having us. (Applause.) END