Build productive Python web applications with Visual Studio Code, Azure and Azure DevOps

hey everyone welcome to Microsoft Connect my name is Nina Zakharchenko I'm a senior cloud developer advocate at Microsoft focusing on Python and today I'm going to show you how to build productive Python web applications with Visual Studio code Azure and as your DevOps let's get started I've set up a repository that has all the code and the steps that you need to follow along just grab it from the URL get do slash connect appear I'm I've already set up my local development environment I've cloned this repository I've also set up a virtual environment by running Python 3 - M the end and then activating that virtual environment by running source and have been activate if I do a pip freeze we'll see that I've already installed all the packages from requirements txt in this environment let's take a look at this project in Visual Studio code code has an amazing and easy shortcut that lets us open up a whole workspace at once all we need to do is type code dot in the directory we'll see I have all my files here if I look here at the bottom I'll notice something interesting yes code has automatically picked up my Python virtual environment I didn't have to do anything to get this app running locally you're gonna have to set up a few secrets the guidelines for that live in the em-dash sample file here you'll see everything that you need to setup in order to get this pop working in production I've already set up a Postgres database I've run my migrations on it I've loaded in a little bit of fixture data let's make sure that our app runs locally to do that hit ctrl and backtick to open up the python terminal we'll see that V s code automatically activates the virtual environment for us we don't have to do anything to check out our app locally we'll need to run Python manage py run server to bring up the django web server and that's kicking off now let's take a look Oh we'll see we have a local Twitter application have our tweets we can even say a new tweet if we'd like hello connect everything is working as expected now if we run into issues how do we debug our jingo app going back to vs code let's kill our development server for now let's take a look and see what our request looks like by setting a breakpoint tap to the left of the line number two create a red breakpoint dot in the gutter next open the debug panel we'll see that we have no configurations here all we need to do is click add configuration and yes code knows that we have a Python project open it creates a new Python configuration for us super easy if we want to debug our Django what we need to do now is select the Python Django debug configuration and then hit this green button right here as our debugger starts we'll see that the bottom bar has turned orange instead of blue now if we hit our URL again we'll see that the debugger has stopped at the breakpoint we have a few options here we can continue we can step over we can step into or step out but I want to show you one of my favorite features and that's the debug console if we click here to the left of the terminal we'll see this little window pop open and I have a fully featured debug environment here I have autocomplete if I wanted to take a look at the request I can just type that in there I can also interactively work with this object I can click on the arrow here I can take a look at the body any of the content parameters examine anything that I want to about the request I can also take a look at our user Bob and check out any attributes about him I'm going to continue here that's great but what about debugging Django templates our templates can get really complex and hard to navigate thankfully the s code provides that too let's open up our index.html we'll see some template code here all I have to do is click to the left of that and that our debugger breakpoint triggered here I can look at the user in the debug console like I did before I can also setup watched variables here so every time a breakpoint stops these watched variables will populate I don't have to do anything I always want to see what user is coming up on my index view I can set up the user ID or the user in the watch here super-easy it makes debugging Python web applications a complete breeze now we've got everything working locally what if we want to deploy our application to the cloud well thankfully yes code has an answer for that too check out the extensions tab here on the left hand side in order to kick this off you'll need to install a handful of them the Python extension of course along with as your account to sign into your azor account and as your app service to do the deployment once you have these extensions installed you'll see on the left-hand side here a new icon that as your icon if you click into that you'll see your app service subscription all I need to do to set up a new deploy is hit this plus button right here I need to enter a globally unique name and I'm going to select an operating system Linux along with the Python 3 7 runtime see in the corner here that the web app is being created if an resource group isn't found it'll create one along with an app service plan let's just give this a few minutes to run here I have a pre-existing deployment what did I need to do to get this going I needed to configure our application settings so our production environment needs to know how to connect to this database you you can set these application settings straight from vs code here I click here you'll see all the ones that I've set you can even right click on an individual setting and hit edit rename delete it or you can do it from the portal to easily access the portal component of this application all we need to do is right click and hit open in portal and that will pop open the portal for us and open up the specific app service if I'm once my deployment is completed to set up that deployment I would want to right-click and configure the deployment source I would want the deployment source to be local get all I would need to do is right click again and hit deploy to web app that's it just a few clicks and you have an application running let's take a look at my existing app okay right click and hit browse website and it will go straight to that URL for me here we'll see our tweet our application running in the cloud on as your website's net this is great for smaller applications smaller uses maybe you're doing a little bit of work in development or QA what if we wanted to set up a CI NCD pipeline for our application we can do that with Azure DevOps pipelines to set those up go to dev azure calm here I have an existing as your DevOps project with a few pipelines set up I have two individual pipelines one for my continuous integration one for my continuous deployment let's take a look at the continuous integration one if I edit it here we'll see that there's a yamo file path as your - CI - pipeline Dhamma that exists in or git repository we can take a quick look at that here so the siamo file describes everything that we need to do we're going to be using in a bun - image we're going to be using Python 37 we're going to install all of our requirements and then we're going to run our tests and make sure that those paths before continuing onwards with a deploy going back to our pipelines let's take a look at the continuous deployment pipeline this is also configured with another llamo file this one is also in the repository right here the deploy pipeline we're using Ubuntu again Python setting up our Python version and then setting up a few environment variables our deployment URL our deployment username and a deployment password we set those up in the portal going back to our project here opening it in the portal going to our deployment center and grabbing those environment variables from here we're going to grab does get clone URL and then we're also going to make a set of user deployment credentials setting a username and password that were then going to configure in our pipeline another important thing about this pipeline is the triggers here we'll see that we're disabling continuous integration for our deployment pipeline but we're depending on the build completion step of our CI task having set this up once I deploy to master my CI build kicks off if it goes successfully I get a deployment super quick easy and really understandable that's all I have to show you today if you want to learn more about Python as your check out this URL you can also take a look at the Django on visual studio code tutorial or take a look at the demo repo all the steps that you need are right there all laid out and I hope you all have an excellent connect it was great talking TTA bye

Browser Mechanics for ASP NET Developers

hey Jack John good to see you how are you right we're doing one yep let me bring it properly caffeinated yes haha one second my speak is seem to be hold on they're coming out in the wrong place why is it always the audio settings on these things never remain the default there we go now it's working hey guys sounds you sound good can you share your screen I sure can one sec for just a little bit the guy and we have screen sharing can you will see that yes there we go - fantastic and I let me just move that out of the way the screen is Jimmy there we go alright well welcome everybody who's watching who's watching Donna come wherever you are and well good morning from the UK my name is Benjamin haloth I'm an ASP insider and an independent asp.net consultant and today I'm going to be discussing browser Mechanics for asp.net developers now normally this is a longer talk that I give at various meetups and conferences regarding non dotnet tools for measuring website and web app performance and in fact Jeff's being kind enough to host me on his twitch stream before to discuss various of these tools so we're gonna dive straight in to some specifics and we're going to discuss firstly what web performance really is which I think can be grouped into about three different distinct buckets which are the HTTP request itself how frequently they are and what sort of size they are things like network latency and then we also have how long it takes the server to render something whether that's a JSON API endpoint or whether it's HTML or CSS and the browser load and pain how long it takes for your web browser be there on a tablet or a mobile to be able to draw what's on what's you know what's being delivered and be able to present a working app or site to your user so there are a number of different tools that exist within this space and we'll get straight into how we going measure performance on the front end we have we're going to briefly touch on a project called lighthouse in google crime and a great host service initially started by Google but now an open-source project it's called webpagetest and on the server side we're going to discuss jmeter and mini profiler in the asp.net sphere so without further ado let's get right to it I am gonna jump straight into an old project that I've got now this is a website I used to look after called Verbier comm it got taken offline last year it runs on Umbraco it runs using old web forms technology and it really hasn't been optimized for mobile at all and I'd like to use this as a great example of what lighthouse can do now if we use f12 dev tools we'll find all the usual bits of elements console let me just maximize us elements console sources Network and over the last few months and years there's this new tab that showed up which is called audits and this is Google Chrome's project lighthouse this will run a number of different tests on your site or your app you can choose whether you want performance progressive web app best practices accessibility and SEO you can also apply throttling so if your users if you're expecting your users to be working on three or four G networks you can actually simulate a network slow down to then see what your users are experiencing out in the wild you can also choose between desktop or mobile emulation and what we're gonna do here is we're gonna run this test now and I'm just going to move this over to the side so you can see what it looks like and as you can see it's now actually using a mobile render to then try and load the page and then gather some metrics about it so and interestingly all the tools that I'm going to demonstrate well the majority of them with the exception of mini profiler can also be run in an automated environment because performance testing is nice but at the same time automated performance testing alongside your core unit testing and integration testing should be something that you should be considering as part of your application build so we'll notice that this scores a 40 out of a hundred which isn't particularly good but it does give us some places to actually improve on things so for example we have let's see stove serves static assets with an efficient cache policy so these are items that are being served up be they pictures ESS or JavaScript and basically they're not being served with an expiry header or a cache control header what this means is that your browser doesn't understand it does not understand that it should be trying to hold on to these resources between page navigations and as a result it's gonna try and load them every single time and that's going to just increase more and more bandwidth being used for example this 340 kilobyte CSS file is going to be loaded on every single separate page load as you navigate around the site so that's a pretty big overhead that we're looking at there we've also got some other bits like removing uh new CSS turns out we can actually save 328 kilobytes there's a large amount that can actually be removed from that CSS file and let's see eliminate render blocking resources so this will be a lot of CSS that needs to be modified to avoid interfering with the paint of the page what else do we have let's see reduce the JavaScript execution time now because we're using things like jQuery and in fact I think this website's a really great example of something done badly it's got both jQuery and a legacy UI library called mootools in there and both of those are creating UI overheads too which shouldn't necessarily be there so and then it will also give you a list of things that have passed as well so properly sized images minute minify CSS and JavaScript and so on and so forth now this is built into Chrome but can also be run as I mentioned as part of a CIN CD pipeline and it's something I highly recommend so that's lighthouse the next thing we're going to look at is we're looking at web page test and if we quickly just nip back here this is web page test it's a free online hosted service as I mentioned it was originally started by Google and what it allows you to do is put in a URL and then it allows you to choose a location from where you want to test including lots of different profile so you can choose Android desktop and iOS you can choose Chrome Firefox age and ie 11 you can choose different locations in fact if you want to target users in a specific location you can notice that there are end points all around the world so Africa Middle East Asia Oceania let's just go with London UK and let's with that one and this is a website I used to work on for the formula e motorsport championship so we're now gonna run start test oh and now you want to do the capture verify there we go and let's run this so what this will be doing is this will be running three separate instances of a test and then it will be measuring all sorts of performance issues such as large images using a CDN minification all the things that lighthouse individually tests for but there's a great feature that's part of webpagetest which is something that a lot of sites and projects don't necessarily think about and that is the actual bandwidth cost to the user and this is a very very important metric which we'll come to in just a second because the average webpage are over the last few years has just grown and grown and ballooned in size we're now looking at the average site now constitutes I think it's 3 megabytes of code and that's JavaScript and CSS and assets and that is larger than the original doom game on floppy disk in fact Jeff and I coined the expression how many dooms is a webpage how heavy is it in a number of Doom's in terms of bandwidth size so as this goes now we get the waterfall breakdown here which is the same as you get in dev tools when you're looking at the network operations it tells you what's blocking what's not how long this is taking and yeah first view in 6.9 seconds that's particularly slow and we just wait for this to finish running through and let's see what that second view looks like oh that does not look like it's improved much either 6.91 and hopefully we should get our third result coming through just now now I picked this site as a particular example because the foreman area championship it's a motorsport championship it's designed to be serving up big images you know very high resolution fast pace action images for media press and fans so here we go yes if you look at the actual cut sort of breakdown in terms of bytes 70% of the entire home page is just image and that's 2 Meg now the feature I want to talk about is I mentioned the cost here we go and this opens a little project called what does my site cost and this is a great feature because this actually demonstrates how your site costs to an average consumer on a data plan in various different countries around the world so for example on a postpaid plan in Canada that page would potentially cost 40 cents to a user and that's pretty expensive if you haven't got a good caching policy within three or four pages you've already racked up a Starbucks coffee so this is a fantastic feature and webpagetest again also has a node wrapper around it so you can again integrate it with your CI CD testing and we'll come to that a little later on but this is an important metric that a lot of people do not consider when they're building their sites is the actual cost of the consumer especially if you look at places like sub-saharan Africa and the Indian subcontinent you'll find that 75% of mobile users are still only on 2 or 3 G data plans and as a result they may not necessarily have the sort of data plan that you or I do in the Western world so if you are looking to target those sorts of audiences tools like this really put a fresh perspective on what that performance and what what those sort of that byte overhead is actually costing your consumers for using your website and it's an important one to bear in mind it just offers a fresh perspective as to how much it's really costing you in terms of development in terms of potential user traction if you're losing out to users because your site is quite literally too expensive for them to access I believe youtube I hope did an experiment with an app called YouTube Lite and they noticed that once it had been deployed they noticed that the average load times had gone up now the reason was is not that the service had gotten slower but that people who previously couldn't access the service were now prepared to wait a few extra seconds waiting for their videos to load with it with lower quality advertising and that's a very important thing the response the average response time may have gone up but the number of users they got increased exponentially so this is an important thing to take away from this all right so we've covered sort of some front-end tools here and you know discussed things like minifying or CSS and some basics like header management cache control and the actual overall cost to your users what about on the server side well first thing we're going to talk about is another little tool that I have where I wait called Jamie - now jmeter is a project from the Apache Software Foundation it's mainly used as a load testing tool but it has so many versatile uses it's quite remarkable at what it can achieve so we're going to quickly pop this open alright so what we do is we set up a test plan and this is basically stored as an XML file and what we can do is set up here there's a number of threads or users so we can simulate anything from 10 to 100 even potentially speaking we could simulate a hundred thousand users what's great is that this - these plot this test plan does not just have to run on a single machine or a single server you can effectively set up slave agents to run tests so you can run a test let's say you want to run a hundred users on each machine you could set up ten virtual machines in the cloud and suddenly you've got a thousand users each looping over a single request a hundred times that gives you a million requests to your website with some very very low overheads and what you can do is simply set up an HTTP request and we've got the name of our website in here in the path we want to test interestingly the number of tests that we can actually conduct is quite substantial and if you look there is a samplers here we go so the common ones HTTP requests you also have FTP requests JDBC requests LDAP requests SMTP and TCP samplers if you really want to go down to low-level traffic and test your infrastructure the amount of information that jmeter will allow you to connect collect from all across your infrastructure whether it's API endpoints whether it's testing that your load balancers are correctly spinning up extra instances in the cloud whether your services are correctly serving even the right byte code you can test just about everything you want using jmeter i've yet to meet an example where jmeter could not do a successful it could not successfully monitor some sort of web traffic it's very very low level very powerful and completely open-source and extensible so it also allows you things like conditional controllers so you can go if or loop or while or a 4-inch there's lots and lots of different ways you can run very very customizing very extensive testing so we'll just quickly have a quick look at the graph result and we'll just quickly run this here and let's have a look to start with no pauses and over here in the top right we can see that the number of running thread is a hundred and we start to get some graph results in and we can now start to see how quickly the responses are coming back from that Forman area websites so we've got the average and median and the deviation and that seems to be doing pretty good in terms of performance that seems to be doing very well the average response time is about two seconds given the amount of traffic that we're generating that's quite impressive we'll just go ahead and terminate that and then we will kill this because that normally ends up with a thread lock now Jamie tis fantastically powerful and you can save this file as an XML file as you can seen by the file extension up here it's a JMX it's a custom XML file that you can include within most of your CI TD setups and in fact most common cloud providers have some sort of jmeter agent set up so you can have a master server that runs the report and coordinates with these slaves and it sends the test runner over to the slave and then the slave will run your test accordingly so as I say if you want to be able to successfully test that your app can handle a million two million five million people when they're set period you can do that and more importantly it's not just limited to web pages you've got every single option for every single HTTP verb within the request so you can test API endpoints you can test maybe you want to test that your API can handle you know a hundred thousand inserts let's say you're expecting a rush of signups if your new startup you can go ahead and extensively test that so that gives you je Mena and lastly we're going to quickly go over to mini profiler now many profiles are fantastic - all built by the guys over at Stack Overflow and you can see it in action over here on the Left what it does is yet some CSS and JavaScript if you're running in debug mode and it will then tell you view by view in MVC view which how long those views are taking to actually request and it will do that for every single request that's been run over time so these are all individual requests and it's telling me how long each one Terk and then it will also tell me how long the entire overall page took as well so if I reload this now this will probably take a while cuz I suspect the app pool has just fallen asleep ah there we go and suddenly that's a lot slower here we go and we can start to see even things like duplicate queries we can start looking at query execution time there's a lot here that we can look at now this is a site based on Umbraco which is why a lot of this I kind of don't look at in too much detail because a lot of the duplicate queries have good indexing on them but if you're building your own custom site with your own custom things like entity framework there's also support for things like raven DB and various other providers but yeah this is one of my favorite tools for diagnosing if there's any problems within a site this tells you where it's taking certain milliseconds to render certain partials or certain views and then you can go in into Visual Studio and take a look in some extensive detail as to what might be causing those slowdowns there is another tool like what a given honorable mention to here which is called glimpse no glimpse provide to you a bit like Elmer does for asp.net logging it provides me the dashboard unfortunately doesn't appear to be updated in the last couple of years it does have a node.js plugin it does have an asp.net plug-in I'm not sure if that means it's just stale from lack of lack of contributions from the community but I'm not sure if it's still out there so if if anyone doesn't anything about plans please leave something in the comments that would be great now I mentioned about you know how do we measure all these things and so we've got loads of different metrics from lighthouse from webpagetest and from jmeter and from mini profiler so I will cursorily go over a few bits and pieces which are some easy things which should just be straightforward to do to improve your overall website in that performance so firstly make your requests as small and as infrequent as possible used like cookie free demands move your stuff over to blob and CDN storage it's cheaper than a coffee per month gzip and deflate static resources if you can it will save you probably between 20 and 40 percent on your resources if you can gzip or deflate things and in fact as you'll see own CDN supports this out of the box if you want to gzip or deflate dynamic resources there's a couple of security risks involved in that so it's Germany not recommended I also wanna briefly touched upon HTTP 2 which is a brand new extent it's a effectively the upgrade to http 1 and 1.1 it supports single connection but multi casting multiple resources over a single connection now whilst I think that's great as a concept it's only available on later versions of Windows Server 2016 and Windows 10 so on older platforms it's not available and won't be available so it does not necessarily solve everything because you're also having to rely not only does your server have to support delivering content over HTTP 2 but then so does your client and if you're looking at devices that have got older browsers older versions of Android maybe aren't being updated again I refer back to 75% of people still and only being on 2 or 3 G and the chances are they probably got feature phones rather than smart rather than what we expect to be modern smartphones so whilst HTTP 2 is a great step in the right direction you can't necessarily rely on it to solve everything that you need caching on static resources is straightforward you can use e tanks which are generally a hash representation of your file so that if the hash changes your server can then go oh I need to re-request that resource cache control requires a little bit of configuration if you want to use that header private versus public can catch you out especially if you're in an enterprise environment and you're using a proxy in the middle which could accidentally cache things without you knowing about it and the expiry expires headers is one which then falls back on cache control right and reducing asset size this should be a given these days let's have a look so we want to minify your CSS and JavaScript if you're building single page apps my suggestion would be don't lower as you load unless you it will work reliably a good example is using an app let's say on the London metro or the New York metro if you've got Wi-Fi in the station that's great but you've only got it for two minutes if you lazy load your views in then you go through a tunnel there's no Wi-Fi the app ends up being a broken experience using an in-memory cache to boost speed if you need to use a cache to store data in temporary places whether that's Raven T being reduce or memcached use it and send 304 ever possible which is simply a 304 not modified so but again I refer back to the method of etags and I think the latest version of Windows iOS 10 supports this out of the box in terms of server render we've discussed J meter and we've discussed many profiler in terms of isolating potential issues within your load balancing infrastructure your server response times and mini profiler for isolating those instances down within your razor view one of the word of caution based on experience is that using the dynamic keyword whilst it might be popular for handling JSON objects it can cause a massive memory overhead I've worked on projects where a home page has used dynamic to cast content out of a database into what was basically a five page carousel and because it was using coarse to dynamic it was taking roughly three and a half thousand milliseconds just to produce the HTML once we'd remove that replace the dynamic calls with calls to static types the total size for the entire page was reduced to about a hundred and forty two milliseconds which was about in 97 96 percent improvement dynamics can have its uses if you don't know what the contract is for example social media API is but generally speaking they should really be avoided from a performance perspective all right and lastly ongoing monitoring as much as it's great to be able to measure your performance on an ongoing basis and make sure that you have targets that you want to hit as part of your CI NCT you also want to want to have some ongoing monitoring so there are application monitoring tools such as New Relic which I've used on a number of projects and personally quite like you brought us off loop is a fantastic project which builds off post Sharps AOP framework and it's mainly designed more for desktop environments or environments that don't have a o P so non MVC environments but it allows you to log up to the cloud I believe they also have a free tier and of course this wouldn't be done at comp without mentioning as yours own application insights which I believe also has various free tiers as well in terms of automating your performance testing I have discussed lighthouse and webpagetest and J meter and I'll briefly just go over to nudge it to the NPM package repository to show you that lighthouse can actually be run as a node module so if you take a look at the node CLI down here you can install it as a global tool and then run it against one or multiple URLs there's lots of different options for what you want to do in terms of whether you want to save those logs whether you want any particular chrome flags to be run let's see audit audit mode which will process save artifacts you can then put an output path so you can then specify JSON HTML or CSV ampere and I believe most modern CI CD environments support reading the JSON output for this and of course webpage tests as well has an NPM package that wraps it so you can then create a web pair or tomato web page tests from options all around the world whether you want to test in multiple locations depending on what sort of what sort of excuse me what sort of information how frequently you want to run tests for this you do need to request an API linking and generally speaking they will let you use the sort of global service with an API key however if you're performing an extensive number of tests it's recommended that you download web page tests from github yourself and running around private instance to be able to do your own automated testing so a plenty of options you can specify an individual server you can specify an out file as well and different locations sort of connectivity profiles as you see 3G slow 3G 3G fast 4G LTE edge and so on and so on and so forth number of runs you want to run number of late if you wish to label your test lots and different extensive options heads for you to really put your web app on your website through its paces so unfortunately in the words of Jamie Carroll apologies to Matt Damon we ran out of time I do have this in a docker image that's not quite ready yet but if you want to basically follow me on my where do we go if you want to follow me on my github at some point I will make sure that that's released later on today alright that was a quick blast around the various tools of a at the open source arena in terms of what you can do in terms of performance measuring I really hope that was informative for everybody and if you want to find out more as I say follow me on github and follow me on Twitter oh my gosh Benjamin that was great you know we we got a number of comments in the chat room as you're showing the tools hey how does this work with blazer and folks we're following along with you in trying ah with the web assembly stuff so certainly see how things you're saying about JavaScript and CSS yes they definitely apply going forward as we look at web assembly oh absolutely in fact one of the things I've chatted and so Steve Sanderson's working on web assembly and one of the things I haven't had a chance to get into the performance side of webassembly yet but one of the things I have noticed is that there is some issues with things around lazy loading and about selective assembly loading and there's a lack of bundling and stuff in there at the moment and I do I do actually want to try and contribute to that at some point so I'm not a hundred percent how this is I mean as much as those these tools will be relevant for Blaser what I want to do is I want to get into some of the detail to find out when you do actually do a full deployment what sort of build mechanisms can be tied up with this stuff to make sure that your bundles are as small as possible cuz obviously we are going to want to start delivering Blaser applications in the same sort of way and we're going to want to measure that sort of performance as well using tools like lighthouse so so yeah there is something to be said there the answer is I don't know yet how blazar handles that but the answer is I want to find out and if you want to follow me as I say if you want to follow me on Twitter or github I'm fairly certain I'll be digging into what what are those at some point once right under in fantastic samples I love the real-world application I mean that's that's great thank you no hey no worries I mean you know one of my specialties is basically I've been working for the last I'd say five years or so on high traffic right you know high performance asp.net sites going from let's say 10,000 users up to five six seven ten million and it's something that really is missing you know we we have all these fantastic tools to build all these amazing things and then we go wait hang on how do we actually you know get the scaling right and still manage to keep our hardware cost low I mean as much as the cloud is great in terms of our scalability you still need to be able to actually think about what you're you you know the balance between what your budget allows for what you're running along with the budget of your consumers but you know if your consumer is accessing your site on a slow phone and it's fast it'll be fast on a fast phone basically that's that's sort of the rule and that's why I keep I keep somebody knocking around here I keep a really old feature phone that's got like Android 3 on it and I only supports 3G and I keep that around and just go right guys if it works fast on here it'll work fast anywhere else sorry bug well thanks so much Benjamin and I we're so glad you could join us for dotnet con for 2019 it's time for a code party it's time for a code party we'll catch you later Ben fantastic thanks guys real pleasure all right

Bridging C++ and Rust

hey everyone welcome to my lightning talk bridging C plus plus and rust my name is Yash um I work as a rest developer Advocate at Microsoft um and today I'll be walking you through three different ways of Bridging the rust and C plus plus languages um just as a heads up I am very much a Sleepless novice I have been programming C plus plus for about a week now um so forgive me if anything's unergonomic unclear not the best uh I haven't been doing this for very long my expertise is more uh rust which I have been doing for half a decade now longer um I'm also involved in the development of rust so that that's where my strengths lie um C plus plus not so much but still it's important to make the two work together so let's dive in all right so in this talk we'll briefly cover what rust is why it is then cover some of the syntax and semantics and then talk about bridging C plus plus and rust I will be assuming you're familiar here with C plus plus but maybe less so with rust so Russ is at this point nearly 20 years old um but it's only been stable for since 2018 which makes it about eight years now so it's it's a pretty recent language about 10 years or 20 years younger than C plus plus and 30 or so years younger than c um it was incubated at Mozilla research in order to help make the Firefox browser parallel because they were trying to do that and it turned out to be very difficult um and they decided a programming language might be a good solution for that so rust in a nutshell is a programming language with a very high level type system similar to Haskell or ocamel it's a henley Milner type system which means that pipe safety is is a big thing but unlike ocam on Haskell it uses a c like interface so C like syntax which you know if you've written Java JavaScript C C plus plus Etc it should be a lot more familiar to you it's sort of Hallmark feature is it provides memory safety without runtime overhead so it checks uh memory like moves and borrows and landings and all these things completely at compile time and it compiles it away and it leaves you with code that is as fast SC or C plus plus um it also has native C interop so you can piecemeal replace components that have been written in C today that may be difficult for numerous reasons say memory sensitive or a safety safety critical sensitive to bugs perhaps very old you know all these things uh rust can help you with and you can replace it you can interop it that's one of its strengths so it doesn't try and reinvent the entire world instead it fits into the existing ecosystems and and systems that people build it also has a very modern like async IO facilities it has async await notation um this is the the thing that I help work with so it makes parallelism easy it makes concurrent systems easy to write and it prevents data races uh which which is great when you're dealing with multi-threading um so who's using rust many places including us here at Microsoft but also it's being used all throughout AWS cloudflare uh evening kernels uh since this week it is in the windows 11 Insider build uh inside of the kernel but it's also being introduced inside of Linux I believe Android has components such as their Bluetooth stack which they have uh Rewritten and rest um for its its performance and safety safety aspects so that's it for what rust is now let's take a look at rust itself um here's a little cheat sheet for syntax we use the FN keyword for functions we use a little little arrow to return types A Name colon type notation for for names and types uh kind of like um I believe typescript does it this way and then you can declare um methods on struct using impul blocks um that's that's the syntax um the semantics are maybe a bit more interesting here where by default all rust values are by move which is move semantics and C plus although we don't support move Constructors but that's a whole thing um and we we have uh two types of references as well which is uh unique and shared references um unique reference can be mutated a shared reference can only be read and you can only either have a single unique reference or multiple shared references but but never both at the same time and this is compile time and force and this is what allows rust to be Memory safe um with without runtime overhead so here here's the way you define a struct and rust which is a struct with a name and then members inside of it so key like name type pairs um here's how you define functions in rusts in this case uh it returns a zero size unit type rust is also entirely expression based so you know it evaluates the unit expression here um and this this just prints me out to standard out and then here's how you implement methods first we have a getter for the the type name which takes self by reference it's a shared reference and returns a string slice and then we have a Setter which takes a new string and that mute itself so you can see that the cell parameter we're just like C plus plus is this but inside of the argument list it says hey we need a mutable reference to self because we're going to update value here okay so to dive into binding C plus plus and rust entirely by hand the the first one is we're gonna uh take rust and C plus plus make them both talk uh c a b i to each other and then link them together and that just works that is maximally flexible but it is kind of inconvenient because both rust and C plus plus we like are smart pointers we like our abstractions and if you're going to see ABI um you don't get access to all of that so you you need to oftentimes wrap it in code which is a bit difficult but you know it works and that is pretty great so let's take a look at that here we have our cats HPP file which is a struct cat it has a name and it has a bowl whether it's hungry or not then we can construct our cat we can get the cat name we can feed our cat and we can make our cat meow now here's the implementation uh if our cat has not been fed it will meow I'm hungry and if it has been fed it will meow I'm sleepy so yep then on the Rough Side of this that was our C plus plus code on Rough Side of this we'll be reusing this example everywhere so you know we just go through it like once um on on the Rough Side of this we have a bill arrest file which is like a make file but native to the rust tool chain um where we invoke the the cmake file uh or this sorry the cmake library to to use cmake to build the the C plus code then we say hey please build the C plus code and it builds it and then I haven't printed the invocations here but there's ways of saying like Okay and then please also link it as part of the build um the full example which I'll link at the end includes all of this so you can like go through and browse it yourself then the rust code itself it redeclares the same struct it says hey this struct is not rep or rust it is wrapper C so please use C ABI and then we create ffi bindings for all of the methods inside of an extern C block um and that gives us access and then we can invoke this using all of this which is just C methods and raw pointers these are not compiler checked by the way so unsafe blocks mean uh you're on the hook for validating that the semantics hold but you still need to uphold the exact same rust semantics you don't get to not uphold them it's just sometimes you you like with ffi the compiler cannot check it for you so you have to check it yourself this is pretty rare it's only at the ffi boundaries and for some Primitives that this needs to be done um but yeah here we're doing ffi stuff so uh we take our cat we create our cat and then we call meow then we call feed and we go meow again and that just works um okay intermediate level rather than needing to like we saw here uh redeclare destruct and also here you know earlier have the multiple definitions um what we can do instead is use a tool called bindgen which will read the header files from C plus plus and auto generate rust bindings we can then use that to call things and it will just be less work so here is again our cats.hp file in this case we no longer need to use struct because we're not using extern C anymore we are just using negative C plus plus classes so here's our class with all the methods like earlier but in class form and then we create the implementation there still same logic but then in the rust build file we do something different namely we call it bindgen tool to generate our bindings and then we build a c plus code and then it gets Linked In the bindings get generated and then in our main file we can take those bindings and just use those so rather than doing the free functions like we saw earlier we can now see that our cat has methods on it so we can call meow and cat.feed which is a lot more convenient so buying chain is great when you can use it I highly recommend using it there's also the inverse tool called C by engine if you want to create rust take rust and like create C binding C headers for it um yes okay so for the final example what if we wanted to go like all the way through so far we've been seeing uh things like Carstar Char star strings but rust and C plus plus both have access to Native strings like high level string representations which are nicer to use other types such as smart pointers and the cxx library allows you to to create a bridge between the two using these high level types so it is aware of rest and C plus plus libraries and it makes sure that those like like ergonomic you can create ergonomic like bridging between the two so uh in this example what we'll be doing is we'll be round tripping so we created definition and rest call that from C plus plus and then export a function again from uh to rust which we then invoke so our header now is just the void function test we just gave it a something name doesn't matter because this is what we'll be using from Russ then in our implementation tests calls or rust types here we say hey please uh create a cat and then call meow and feed again unfortunately cxx is not yet aware of how Constructors work so this is a free function to create our our struct or a class um but then from there it's it's you know the methods do work in order to build it what we can do is we can use the cxx build um Library we can give it some flags and that just works now on the right side rather than defining the the types on the C side or sorry on the C plus plus side um we're now doing it on the rough side and we say hey extern rust within this like cxx Bridge construction we say hey here's an extern rust block with all the methods and a shared struct named cat with um a name and is hungry and then importing from C plus plus we say hey there's a function called test that we would like to have access to and then the actual implementation so those were the headers the actual implementation here is like we have neocat which implements all logic and it's it's pretty much the same logic rest in C plus plus look look pretty similar in in many cases um so yeah the the only thing that probably stands out here is that fee takes a mutable reference to self because it mutates it updates that is hunger field everything else takes a shared reference and then here we call ffi test which invokes the C plus plus code and that works um okay just the the final bits here um there are more options that you can investigate if you're interested uh cxx can be combined with buying gen to make things more convenient unfortunately uh ran out of time to try it as well as I said they've only been doing this for a week um the Google auto cxx project which is an unofficial project um takes both libraries and is intended to make that more convenient I have also not tried it but I I really like the premise of that because I've found myself needing when using cxx which is what you would want to be using if you could um there's some repetition involved but Auto cxx removes that repetition which seems very promising there's also cxx async which adds support for async types and finally C by engine as mentioned earlier if you want to create um like wrap rust code into like uh C headers and make that like automate that project um yes so in conclusion rust is a memory safe programming language it has native interrupt with c and with with some use of tooling you can also make it interrupt with C plus those tools are being actively developed and they're improving um all the time so hopefully this will become easier over time and I'm very excited for where this is going I hope this was useful um if you're interested in seeing these examples trying them out building them yourself you can go to this URL on GitHub where you can find all three examples checked in and my slides as well so you can read those over if you want to thank you so much

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]

Basics of Debugging

[Music] hey everyone welcome to another episode of Visual Studio toolbox I'm your host Leslie Richardson and today I'm excited because we're talking about one of my favorite topics good old debugging you know the the topic that everyone dreads but we're all having to do as developers but uh yeah we're going to start from square one today talking to all about how to get started debugging for the first time in visual studio and joining me to do that today is Nick hey Nick hi Leslie nice to see you nice to see you too so before we uh jump into debugging do you want to tell us a little bit about yourself yeah sure so um my name is Nick I'm a software developer from the UK uh near Manchester uh I'm currently working as a director of software engineering for a uh robotic process automation company we use a lot of net in our stack um and yeah just excited to talk about uh debu B okay awesome I'm excited too I used to work on the visual studio debugger so yeah debugging is near and dear to my heart yeah definitely yeah so for those who don't know what that is or maybe are getting started in their coding Journey what is debugging and why are we stuck doing it yeah yeah so unfortunately like it will be like a really common practice for you you know so many times people say what you working on I'm just debugging this I'm bugging that um and it's it's kind of quite a negative connotation to it but it's actually it's essential and um it the the simplest way I could describe it is you're tracking down that pesky buug you know you're trying to find the root cause of a behavior that's um happening that's unexpected uh and so using visual studio we can um rather than let the code just run through in its normal State we can actually pause the code and inspect it to see what the current state is and how that might be contributing to the issue that you see awesome yeah I think that's a great definition so yeah should we hop into visual studio and see how to get started yeah let's go for [Music] it so I've just created uh a typical console application so whenever I do a demo I find it really easy to just build a a normal C console application with a main method uh and then to to jump right into it and so the first thing that I want to talk about is um the compilation modes that you can see in visual studio uh so you've probably seen already that you've got this debug drop down and you get the debug or release options in there and now for the purposes of what we're doing we obviously want to be in debug but it's not obvious what the reason for that is um so there's different modes of compilation for uh for C in particular um in visual studio and the difference being that when you're in debug mode which will be your um default mode there's a there's a little bit of a difference in terms of the way things are compiled we have things called symbols uh that allow the application will allow Visual Studio to know where you are in the code uh and it's less optimized it's quite I mean as you know Leslie it's quite a complicated subject I won't go too deep on that but just so you're aware of its existence the default mode will be debug uh and then on the flip side of that release mode is it's kind of the opposite of that there's less optimiz there's sorry more optimization uh you don't have those symbols uh that are telling you where you are in the code simply because you aren't expected to be debugging in release mode uh so so that's the difference between the two um and the reason I talk about this is because one of the uh debugging aspects that you can take advantage of in Visual Studio is something called uh pre-processor directives uh so these are the lines you see here where we've got this little hashtag symbol um and this is where you're adding a condition into the way the application is being compiled so it's not the same as like a conventional if statement uh it's something that sort of sits outside of the code it's more for visual studios's benefit uh so for here for example we're simply saying that if the current mode is debug then we want to execute some spefic specific code uh otherwise it's going to be in release mode and we can execute this code so I can demonstrate that and it will also demonstrate a break point so we're kind of killing two birds with one stone there hopefully great so I'm currently in debug so I would expect to uh put a breakpoint in here um a breakpoint is what we were saying before about pausing your code it say um it's a point in the code where you can say I don't want you to run further than this point I want you to stop at that point so I can take a look around and see what's happening in the application now obviously if your breakpoint is inside an if statement and that if statement uh doesn't evaluate to true you won't hit your breakpoint so we're kind of testing the if debug scenario by saying we're expecting this to hit that break point because we're in debug Y and so in Visual Studio to kick the program off uh and start debugging we can go to the top here and click the play button and let the application fire up and then as you can see we've hit our break point and as we said the reason we've hit that is because we're saying only go to that break point sorry only write out this line to the console if we're in debug and we are and we've also put a break point there so we're now paused great pretty simple also I gotta say shout out to the debugger team for uh make for adding the ability to see that you can actually add a breakpoint in the first place by hovering over the gutter where you just added that break point that used to not exist and I can imagine if you're like brand new because a lot of schools and a lot of uh classes that you take don't always teach debugging so if you're just trying to figure this out on your own it's like not very intuitive maybe to to know that oh a breakpoint is here so yeah yeah absolutely Echo that and you know you guys uh if you're picking up visual studio for the first time you know you got kind of spoiled to be honest the featur feature sets amazing I was writing uh VB6 in the old Visual Basic and it was a fantastic tool but it's come so far the debugging experience has since then so oh yeah yeah it's super powerful uh and obviously if um we want to test our theory around um whether the release uh breakpoint would hit we can add another break point here uh and then change the mode over to release so now this pre-process cessor uh for if debug it should evaluate to false so we shouldn't see it hit that break point so I'll just click play there and there we go we've hit the other break point instead because we're now in release mode so you can see the way that break points can be affected by the position you you put them in if they're inside some logic which wouldn't normally be hit in the code you can guarantee the break point won't be hit either Okay so we've talked a lot about break point um so along this part of Visual Studio you can tap those in and they'll uh appear and disappear um you can also um this quite a handy function that you can use in the debug um part of the ribbon where you can say I just want to turn off my break points I don't want to delete them uh but I just want to disable them and I find that quite useful if I've been uh debugging something um for a specific change because there's a common um misconcep ception around debugging in my opinion that it's always to do with bugs it's actually sometimes around testing as well you've got a a feature that you're adding you want to make sure that the codes running the way you want it to um and I find that using break points for that is a fantastic way to to verify what I'm doing and so when I've made that change I want to see that it carries on through without um me stopping it all the time so being able to disable things in one place and then reenable them is really really useful so I want to talk about uh steps so there's lots of different ways uh you can perform these steps and steps for me um essentially are ways that you can move around uh the code once you've break pointed so once you paused the execution of your overall application you've got lots of different options you can either step into something you can step over something and you can step out of something when I say step into something it has to be something that you're capable of stepping into so if it's a variable if it's just a uh a variable like this where we're specifying or defining an integer um you're not going to be able to step into that because there's nothing inside to uh step into as far as debugging goes but for a method or a function you've got code inside that so you can choose to either step over it and Skip uh going through every single bit of code inside that method or you can step into it but don't forget that the code inside it if you go over it it will still run it will it's not saying we're not going to run this code we're just not going to follow it through for the purposes of debugging so I've got a method here called step into method and if I go to the definition of that everything I'm doing here is really super simple I'm just writing things out to the console uh but if I'm debugging I can choose whether I want to see uh the code go into this method or if I want to just step over it so I'm going to set a breakpoint here and then I'm going to run the application and let it just breakpoint onto that method and then up on the top left here are your step actions uh and as you get really good at debugging um and it becomes second nature I'm sure Leslie this is you you're just tapping the key combination F10 F10 F10 f11 step in it just becomes like muscle memory right it's just it's amazing how quickly that can just become uh done without thinking oh yeah and plus I mean again you're probably gonna be de debugging a lot in your coding career coding Journey so yeah you're probably gonna learn those keyboard shortcuts very quickly as somebody who does not usually remember keyboard shortcuts f 10 F 11 yeah yeah because I was thinking about the um disable all break points and delete all break points all that sort of stuff and I was like what is the keyboard but yeah stepping in stepping around is that is like just one tap it's and it's sometimes you can go a little bit too fast as well I can just step through things and go oh I've gone past it and yeah luckily there are additional Advanced debugging Tools in VSS that can help you backtrack if you do that but we won't get into it that's thinking of everything [Laughter] great so for this one um I want to step into it so I want to actually go in and see the code that's going to execute so um I'm going to hit this step into button or I can press f11 and you can see we've actually gone into that method and then we can do the same thing for the lines of code that are inside the method so you may have a method within a method and so you step into the first method and then you decide actually I want to look inside that method as well or you might think no I I know that one's good I've tested that one I'm going to step over it in which case you can just do the step over here so you can see these arrows handy little arrows that just explain uh what kind of Step we're doing and there you go we've come out of that now because it was the last line of code for that method and we're on to our next one so I I'm sure you can guess what I'm going to do next for step over method uh I'm going to decide that I don't want to look inside this so I'm just going to click step over and the last one is one that I I think a lot of developers in my opinion I don't know what what you think Leslie but they potentially use the least yeah yeah it scared me a little bit when I first uh when I first got into into code because I was I wasn't sure where it was going to go even though now it's more obvious to me with experience but um I don't know I think there's a tendency to rather than stepping out once you've decided that your code is good um that I you just keep going through is that the same for you yeah I kind of feel the same way I I Rely you step out and Par because I get worried I'm like I mean I think I'm pretty sure I know where it's gonna go but let's just go through the rest of this method anyway exactly it's just safer to keep going yeah that 2% un uncertainty is like yeah but that's really interesting because it it shows that there's people have their own debugging habits there's different debugging Styles and um you will get that person who will be stepp to everything and that's fine you know that's absolutely fine uh because if that's going to give you the the information you need that's that's the way but just to explain step out essentially it's whichever um method or function you stepped into uh by pressing step out you can essentially go back up into the um the next uh level up basically so like with um if I look at at step into so another handy thing you can do just press the method and then press F12 and you can go to its definition we stepped into this but say this had a a long um block of code and we got halfway down um and thought you know I'm I'm okay I don't need to look at this anymore you can press step out and it would go back up to the point you were in the next level up uh obviously not me and Leslie because we want to play it safe yeah but it's cool something I do want to point out is that um breakpoints and the stepping tools those are pretty commonplace in the IDE world so yeah if for whatever reason you're deciding to use something other than visual cudio whether that's vs code or uh another IDE or Advanced editor experience like BS code those tools will at the very least be there in some Capac capacity so you'll always have break points you'll always have ways to step through to see what you want to see yeah and in the in the browser as well that's a that's one that a lot of um I find that a lot of developers that I I bring in who are fairly new um they're less exposed to the browser debugging experience but the concept is the same essentially a lot of the same tools too cool right this is one of my favorite features because it helps is so good it helps you to debug very very specific uh edge cases you might be trying to figure out what would be causing a bug but you know that it's only in a very specific situation and this is the conditional breakpoints um and this is a breakpoint where it starts off as a normal breakpoint um but then once you've created it you can then specify that it is conditional so I'm just going to get rid of this one here and I'm going to put a a conditional break point inside this for Loop uh so this is a loop where we're going to be iterating until we've reached uh our top index and inside the body of this loop we're going to be multiplying a variable by two um but what I want to do is say I don't want to be hitting this breake point for every single iteration I only want to hit the breake point if a certain condition is true uh and that condition for me could be uh that the variable condition demo value is greater than five because for some reason I've got a theory that something breaks when it gets to that that value essentially so the way we can do this is once you've already set your uh break point you can hover over it and you'll see there's a settings button uh and if you click that settings button you get some uh really cool features that you can uh take advantage of so in here we want to first look at conditions so I can check this conditions box and it will give you lots of different options for the condition but I think the most common one is going to be conditional expression so this is a condition Builder that you can use to say if this condition is true that's the only time I expect you to hit the break point you can also do it based on how many times it it's already hit that line of code so that's a similar sort of sort of deal you could say if this line of code gets hit x times then stop the flow of the application I want to debug it um filter this is one I I don't think I've ever used it Leslie do you want to share some insights into this one oh goodness oh filter I because I barely demo that one either so um I'm blinking out I feel like it's a slightly it's it's kind of like hit count and that it's a slightly different variation of a conditional expression last time I I checked except okay it it looks like it's like um a com just hit my mic sorry it looks like it's a combination of conditional Expressions yeah based on because the debugging team put a handy example in there so there you go pretty great and uh I do want to point out you can add multiple conditions if you want so like there is the add condition uh yeah the add condition button right below it where you can add more than one condition for whatever reason that is an option as well I think I need to I think I need to put one in before I can do that don't I so if I did I think so yeah so if I said so it's kind of like a Boolean expression isn't it so it would be condition demo value is greater than five and then press enter and then I should be able to add another one and the hit count is two um which it would be or at least one yeah math is is failing on me today it's nearly nearly night time in the UK but but yeah for this one we're essentially saying the condition is I only want you to hit that break point if my variable condition demo value is greater than five um so for that uh we can test that out you can see oh I've just deleted it that's always good put that in again okay Enter and then close there we go and you can see when you've got a conditional break point because you'll have a little cross in the middle of it uh so from that you'll always be able to see uh that it's slightly different and also hovering over it gives you uh the conditions that you set up as well uh so I'm going to let this continue to run so because we're already breakpoint um the play button says that we want to gives you the option to continue um and then you might be thinking how do we know that it's actually a above five at this point sure could it not just be highlighting it uh on its first iteration and this brings us to inspecting variables so what we can do to verify that it is actually hitting that condition is we can hover over a variable while we're break pointed uh and you can see here that it shows a little tool tip telling you what the current value of that variable is so we have indeed met that condition that variable is 10 so it's greater than five and it hasn't breakpoint did before that so our conditional breakpoint was successful okay so I'm going to stop the application otherwise we're going to be constantly shifting down also before you uh go on as we pivot away from break points those aren't the only break points fun fact so the lesson here is to definitely take a minute to explore the visual studio debugger because there's tons of additional break points yeah we got like Trace points uh which is what Nick just highlighted there's dependent break points there's uh function breakpoints data breakpoints so many to explore that can help you be a lot more productive in your debugging Journey that are worth checking out absolutely absolutely it's um it's so important isn't it you know it's all very well and good being good at of solving problems through your design of code but if you don't know how to use the debugging features you're going to be a a little bit of a disadvantage um but um the the sort of the very there's so many Advanced features like you said yeah like I can't speak for every IDE but Visual Studio I mean the debugger is a lot of what makes Visual Studio really cool if you take the the time to check out some of its more advanced features it's awesome yeah it it blows my mind because it it's the team has has built something that's working on a running application that's like next level for me um how how do you interrupt the flow of the comp of the application I I wouldn't even know where to start uh so another really cool feature um is uh the watch feature and a watch is essentially where you've got uh a variable of some sort um and you want to know while the application is running uh what its value is so it's the it's similar to where we hovered over that variable and said you know what's the value U but we were only doing it for that specific point that break point we were on um but if you're break pointing something else or you're debugging something else in the application and you want to keep one eye on another value to see if something's changing it and a watch is often a good shout um so for example if if I wanted to just keep an eye on this variable and make sure that it's definitely just 10 uh while things are running I can rightclick it and then I can go over to I may need to be debugging to actually see this so I'll just put a break point on it um there's several ways of doing it as is always the case with visual studio um but if I get to I'm in release now that's probably why there we go so I can actually see it in this watch window here but I'll just demonstrate here if you right click while you're break pointed you can see there's an add watch uh option if you just click that it will take you to the watch screen I already had it in there by the looks of it so I think I can rightclick it and delete Watch there we go um but essentially that's a screen that gives you all your watches so it's everything you've flagged as I want to keep an eye on that basically uh so we've got the the the variable name the current value and its type um now obviously we've set that to 10 and we're break pointed on it and this is really uh interesting the value here is zero which is not the same as what the value is in the code uh and the reason for this is that because when we hit a break point we're on that line of code but the code hasn't actually executed yet so we have a watch demo value but because uh we haven't executed we haven't initialized it with a value it's got its default value which is zero for the integer so if I then step over this and go to the next line that code has then executed the variable has been initialized to its value and we can see here the value in the watches screen has also changed so you can see how this would be really useful if you had other code which could potentially affect that variable uh I find this really useful when I'm iterating through uh lots of different data structures um I think recently I had uh a big array of Json objects and I was going through it U and there was an external variable that got set based on a very particular uh field inside these Json objects uh and I wanted to see the point at which that variable changed uh and so I could just put a watch against that variable run through the iteration and then I could see ah okay it changed at that point that's the bit that's setting it [Music] basically okay so immediates um so these are probably after the sort of usual break pointing aspects this is probably one of the things I use the most uh I don't know whether it's because uh I'm more of a backend engineer um but uh I don't know whether that that affects it or not but essentially immediates are kind of like um for the web developers they're kind of like the console in the browser it's kind of like where you can interact with the uh the code base while it's paused uh so by that I mean if I was to type um a variable which is in the code that has gone past the execution point so say watch demo value we're past that point now say I type that into here I get intell sense for that as well because the compiler knows that it's part of the uh the code base and I can say watch demo value press enter if I want to and it will give me the value of that um but I can so that is essentially me interacting with the code base um while it's in a paused State uh and this is uh valuable for lots of different different reasons it allows you to test different theories uh while the the code is paused so for example uh if you haven't got a watch on uh the watch demo value and you think oh I need to make sure that that is equal to 10 and um maybe it's not in view so you can't just hover over it and see it from there I'm just trying to find an example of why you would use this um in such a small application what you could do is say watch demo value and then similar to that conditional expression we used in the uh conditional break points you can use a Boolean expression so you can say watch demo value demo value is equal to 10 and that will return a true or false so we can see here that's returned true so it's really useful I use this all the time when I'm looking to just check in on something that's still uh available to me as part of the code it's still in scope to some point uh but I'm probably halfway down the screen it's out of view I don't want to scroll back up to it I just want to quickly use the immediates to have more of a console experience you should also be able to set the value of things so you can start to um mess around with the state uh of the application while you're debugging it so if I did watch demo value equals 4 it will just return the value that I've set but then if I hover over it you can see we've just set that to four so we've intervened in the state of the application while it's paused it's so powerful uh and and that allows you to test lots of different scenarios uh so very often you could say uh you might have an application which is um running only if an invoice value is over say $10,000 but the data you've got is all just below that and you want to try and test that other scenario well you could quite easily take a variable like invoice total and then change it inside the immediates window to test that um flow of code you can also do that from the variable itself uh in most cases so you can say change it from here and then if I go back and type this in again and you can press up as well just like you can in the command line to get what you've recently typed in I can see it's six because I've just set it from elsewhere in the code base so it's again this is where debugging gets a little bit um it's not just looking for bugs you might also be using it to influence uh State mhm yeah the immediate window is pretty powerful in its own right there there are lots of people who really kind of do all of their debugging in the immediate window a lot of the time I I'm personally one of those who doesn't really use it that much but yeah again whatever floats your boat there's lots of options in Visual Studio yeah yeah I mean if you if you were looking at say again I'll use the example of Json or or XML it might be just too much to look at in the debugger but there's nothing stopping you from doing a file. write all text in the immediate window and just then dumping all that information into a text file or or XML or Json file so that you can then look at it all the same time the application is still paused just giving yourself a bit more of a an opportunity to view it in something like Visual Studio code for example so it's just for me it's just super flexible that's I've got options all the time when I'm debugging in visual studio uh so inspecting variables we' we've pretty much covered uh that is where you can just hover over them you can see as we said this is still zero until uh we actually execute it and then we get on to something that has thrown me before honestly um because they I feel like they're quite similar I don't know where you are on this Lesly gosh I still struggle with it too sometimes um honestly I I think in most cases it's okay to lump autos and locals window together but if the watch window is like your inspection window for being a but you have to manually select which variables do you want to have persist and take a look at as you're going through your code the locals and Autos Windows automatically give you the variables that are currently in the scope of where you're at so if you swapped over to the locals or AOS window right now then you'd be getting a lot of the variables that are both within a scope or in proximity and I think the Autos window is really just more proximity focused more so than so it takes the nearby variables not necessarily all the the variables that are currently relevant so yeah I sorry Leslie you go no go ahead I was just gonna say I thought that was a really good explanation um I I think I looked for a definition before the show because I like to be prepared um but you know Autos it was It was kind of defined as um a a reference to any code which is relevant to the current line but that's a really vague definition isn't it it's really hard to to make that accessible I I agree so that is my best interpretation of it anyway just through observation but I think at the end of the day a lot of the time the autos and locals are windows are pretty much one and the same I I prefer the locals window because again you usually get more uh info that you'll probably need but yeah both are giving you the most relevant variables in some capacity in addition to other default Expressions that might come about which I talk about in uh other demos that I've done that are really cool stuff like return value uh which can tell you the the value of u a return statement in your method without having to necessarily set an arbitrary variable like the locals window and the Autos window can tell you that automatically the moment you step over that line which is really nice super cool it's really nice one thing I do really love as well that you guys have put in is this idea that um you can't get away with changing something and not being found out so here if you remember I've changed these values while the application was um paused uh and visual studio is flagging those in red to say hey these were changed uh which again is it's super important I think this this idea of traceability in debugging um it's it's got to be forensic hasn't it you've got to know absolutely every single thing that's happened and has changed so just that simple feature of coloring those in red I I love that feature I think it's really Co I agree so I think we've agreed most of the time we're going to use locals but again totally your choice but you know it's just about having as much visibility as possible and um I know that when I go to I'm always going to see things that are in scope which is most of the time what I'm concerned with so this brings me on to my my last example which is um one that definitely tripped me up when I was a junior developer I hated looking at it not because it was a visual studio thing but it was just a programming thing it just a wall of text but um it becomes less scary over time but and that's the call stack uh and actually Visual Studio does a really good job of visualizing it whereas the traditional call stack is just like a big line of text um block of text sorry but the the idea on the call stack is simply um the everything that's happened up until this current point and a representation of that so you'll often see these in exceptions so when you do a try catch uh and you hit that that catch there's going to be some kind of exception object and that exception object will have a call stack in it uh and that will say that the exception threw at uh a certain point in the code but before that lots of other things happened and those things could be other threads they could be parent functions but the the common denominator there is that it's before the current Point yeah I think timeline of yeah events that are going on in your code in a lot of ways a much nicer way of referring to a timeline um so what I've done here is uh just created uh a means of viewing the call stack so we've got a method here called call stack demo and I'm going to step into it so I want to go into the actual method I pressed f11 for that uh and then I'm going to let these uh pieces of code run so I'm going to press F10 to step over I'm going to step over again to get to this method so we've got method inside a method and then I'm going to step into that and we're going to run that method and then I'm going to pause it there for a second if I wanted to see the timeline as Leslie said uh which is the the call stack uh I can go again into debug and we've got a really uh useful Windows section here which gives us loads of different features some things that are more advanced uh than than this in the scope of this uh video I think uh but uh the one we're interested in is call stack and you can see here you can select it and it will open up the call stack window uh so I'm just going to move this I'm going to try and dock it up here there we go and just bring that across and so this gives us our timeline this is the stack of events that have happened to bring us to this point and at the top you'll have the method that you currently in or the break point that you're currently on so you can see here we're in call stack sub method at line 73 but before that to get there we'd hit line 67 and if I double click it will take me to that line and again we can see at the bottom of the call stack that is going to be the first point of entry our entry point uh because it's the first thing we went into uh and that's main as it would be for our uh console application uh I think it just hasn't there we go oh sorry it's uh I am in main yes of course so it's highlighting call stack demo but that is in the scope of main so you can use this to trace back what's happened to that point uh so I often find it's a useful refreshing Tool uh if I'm doing a very long debugging session so and if I'm doing a long debugging session it's probably a pretty complicated bug um but what I mean by that is if you've spent a lot of time going through lots of different break points it's quite easy to sometimes forget what's happened up until that point and that might be really important because uh you might not be seeing any exceptions throwing but the data that you've passed through up to that point might be critical to understanding why something isn't running uh the way it should be so if you're in that really annoying situation where you know there's a bug but everything looks good uh the call Stack's really useful because you can say okay I'm going to retrace my steps uh and I guess that that's the main use case for me uh I don't know Leslie any other sort of go-to use cases for the call stack that from from your side yeah a kind of Niche one that I use it for is in the event you've got a variable that's being changed in a spot that you did not expect it to change but you act but you also don't really know where that change could be coming from there one of the breakpoints I hinted at earlier there's one called the data breakpoint that lets you break your uh at your or it lets you pause your application when a specified variable changes at any time so it's really nice because it'll take you to that exact place where that break where that variable was changed but there um there's a speci specific instance where in the event that variable is actually like a property in a class or something it's usually going to take you to like the setter that you probably set up for it but that's when you can use the call stack to figure out who you can really blame figure out what method just incremented that uh variable without your permission and navigate to it that way which is very helpful so in some ways the call stack is like the git blame equivalent of um debugging where it's like okay what what happened through my code and could there be a spot where I I didn't want that to happen or method to be called in a place that I did not expect it to be called so there you go so this no there's no escaping in Visual Studio forensic data everywhere you go everything's traceable yeah and you did mention also threads and stuff I I think the call stack is really useful for if you're dealing with multi-threaded or asynchronous applications there's lots of instances where you just want to be able to break down what is happening on a specific thread or across multiple threads uh having a call stack window for that is extremely important I think absolutely and and debugging multiple or parallel execution or concurrency is that's probably a video in itself isn't it that that's a oh yeah it's pretty Advanced but it's uh and it still hurts my brain but um you know there's a million different tools that I disposal here so it always makes it just that bit easier uh so I mean that's that's my My overall set of examples for um an introduction to debugging um but um I think key takeaways there are that uh the emphasis is as I said on being as forensic as possible and making um the state of any application available to you uh at that point in time and and I would my advice to any new developers or any uh people using uh visual studio for the first time would be to just start with breakpoints and and work your way up through these examples we've we've locked up um I'd say you know m around with the immediates figure out how you can influence the state of the application uh and break it essentially uh and maybe create some weird edge cases and I think once you've had that hands-on experience you become so much better at debugging in general um and uh and it's often a a process of elimination as well uh so you know you test your theories you you think I've got a bug I think it might be this let's try and disprove that uh and hopefully you're right and you don't have to disprove it so you can just put the fix in yeah I think something that helps me with debugging is just the whole expectations versus reality so like you're thinking about the meme like that's kind of the thought process with a lot of debugging it's like okay what did you expect to happen but what did you actually end up getting and that gives you a good starting where okay how do we get to that cake looking like what it was supposed to look like instead of my mess kind of looks like a tennis court but really it just looks like a blob that's yes definitely when I'm baking cakes for sure oh yeah yeah awesome well Nick that I thought that was a great introduction to debugging I think that's something that everyone needs like whether you're being formally taught it or not like I I was never formally taught how to use the debugger and then like I joined a debugger team fresh out of college and I was freaking out because I was like um yeah I just statements when I was debugging in school so like I don't know um yeah but I I think these are really useful tools that really you can take anywhere um whether you're in BS or in another IDE but you should totally use vs because the debugger is amazing um but yeah that's awesome so where can people go to learn even more about debugging Nick um well of course you can go over to to Microsoft learn um you've got lots of different videos there and documentation um and um I mean I think I've got a few videos on on debugging you want to head over to Nick proud programmer Shameless plug um but uh yeah the documentation for visual studio in general is is fantastic um you know I'm using Microsoft learn a lot myself uh spe specifically for the AO stuff as well um and you can you know there's nothing worse than poor documentation and I've just never had that issue uh with visual studio uh so um and obviously the help function in Visual Studio itself you can get through to all the documentation you need from the application uh in a lot of cases as well uh I've noticed in recently there's been um links to GitHub repos for specific uh items as well which is just so cool you know if you if you want to get some information on a specific element of net for example which is largely open source you can get straight through to the repo from visual studio so um you can't really go wrong with with the with the official docs and then um obviously resources on YouTube and uh places like that are probably an expert yeah awesome and then also more Shameless plugs on my end I know uh it's been a minute but this show the visual studio toolbox show actually we did do a couple episodes way back when about debugging so if you uh if you're on YouTube right now and you do vs toolbox debugging then there should be several videos that pop up including one that I did on more of those Advanced tips and tricks that we talked about most of them I I haven't done that talk on the show since BS 2019 but a lot of those tools are still very relevant uh for VSS 2022 and also if you're on Twitter go to uh make sure you subscribe to vsor debugger that is a great Twitter channel that um that's run by the debugger team on visual studio and they drop just cool tips and tricks at random or sometimes not at random sometimes they're talking about new features because we're always working on new stuff too that are worth checking out so make sure you subscribe to that and yeah I think that's all of our resources for now hopefully that gets people started so yeah Nick thank you yeah but Nick thank you so much for coming on the show super informative very important stuff absolute pleasure thank you so much awesome and thanks to everyone who's been watching this and is ready to Kickstart their debugger journey and until next time happy coding [Music] y'all