Hi, my name is Paul Bacaus and I'm a developer advocate working on at Google and I work on the open web and especially Chrome DevTools and Later on stage with me will be Paul Irish and Seth Thompson together. We're going to talk about three things authoring application and JavaScript all those three things are categories that we cater to in DevTools and We have a lot of improvements coming in 2016 and some of the ones that we added in the last couple months So I'm going to kick off this First of all by saying that we're going to talk about the weather wonder app This is an app that we've built, but it's not completely finished. It's a mobile first responsive progressive web app And we want to do a few touches to it and we have a few errors that we want to fix So first off there are a couple new things that we're showing that are not yet in beta and in stable so please use Chrome canary for the very brand new features and enable the DevTools experiments in Chrome Flags and I had to the settings and Click on experiments to enable any experiment that was showing All right, let's start with authoring So when I talk about all thing I talk about the actual crafting of a website Not just debugging or front-end apps or performance optimizations, but actually building the website Now the first thing that I want to talk about is the device mode We've added the device mode more than a year ago, but we did some heavy improvements recently Because of the mobile first story that becomes ever more popular With responsive design we felt that it was kind of backwards that we were building a page first in desktop With the Chrome DevTools and then had to enable mode that is pretty overwhelming at times So you want to disable it again sometimes And so instead of going desktop first We wanted you to go mobile first and actually have that mode enabled and feel that it's fine to have it enabled So how does it look like? Well same thing device mode toggle is in the site by here next to expect and if you talk about it You see a very streamlined UI that focuses on responsive design So resize freely, but you also have shortcuts that give you the most common mobile resolutions right there Under the actual line that extends Now you can also just manually change it And so that's the responsive story. That's relatively easy to use and just figure out on the fly If you want to go more advanced, you can also emulate a certain device So for instance in this case, I'm going to switch to the Nexus 5x yes, and as you can see there's some chrome that we emulate But it also shrinks our viewport to fit in everything on our device On our screen. I'm going to show you what that means and why that's useful in a bit You can also trigger certain chrome UI. So for instance the keyboards light up We can go to landscape and now it switches back to 100% because it realizes that the viewport has enough space to display It is displayed as at 100% So that's device emulation, but you can go even one step further and this is something we just added recently You can immerse yourself with actual device art so you can go to the settings and show the device frame of that device to Actually give you a real impression of the actual device not on dot not only that you can capture a screenshot and that screenshot Includes the actual device frame so you can share it with your with your co-workers And with the designers Thank you Now you can also customize that mode It's pretty bare-boned in the first place, but you can edit the device list We ship with a lot of configurations for all sorts of popular devices But we can also add a new one and just add a user agent string some values in there and If you want to customize more you can add you can click the three little odds and in for instance If you want to debug images you go to the device pixel ratio If you want to simulate network thought link you can do that in the network panel too But sometimes you want to look at it in device mode And so if you want to go offline test offering functionality or just a slow connection you can do that right there So that's customization and there's more stuff Now I talked about mobile first and that I want you to have that mode enabled But some people have been asking well, what about desktop? I mean, I still want to build desktop sites well there's a very good story here too and Something that's actually even in my opinion better than what we had before Because of the zoom that I showed you before We can now change the zoom level to something that's much smaller than the actual resolution and the page still functions as before But we can switch to a resolution that we don't even have on this device on this actual laptop Now we can enable the device type as you can see it's now a touch device by default But we can switch it back to desktop and now everything becomes selectable again It's just a normal desktop You know viewport again, but it has the whole responsive story So now we're going to use that. We are also going to show media queries And it turns out that my weather wonder app looks pretty crappy On that resolution and if I resize it well, yes, it doesn't look exactly good. We are missing a media query So let's add one I'm gonna add a media query at Approximately right right point is all gonna use flex box. I want to have the boxes next to each other And if I switch back to chrome here, I can see that I worked I can resize my viewport again with the responsive handles and And as you can see the actual media creed that's not used at the top fades out So only the ones that are currently used Highlighted and if you don't want to see it in the dev tools what I just did I can right-click reveal in source code and go to exactly the thing that I've written right there So the really nice way to iterate on media queries And that's the new device mode now moving on Let's talk about colors Now we've added we did a lot of improvements to color picker recently So if we're looking at the header right here, I can click on the color picker and what's built in now are color palettes The first one are the page colors the page colors are generated from your CSS on the fly To just give you all options that you have in your actual CSS But if I want to do custom colors I can do that too and any kind of color to the custom palette and that's available across all of my tabs But then to me my my personal favorite is the material design palette Because those have really nice colors out of the box that I can choose for the header and most of them will just look pretty good So that's the color picker, but I actually think we can do a bit better than that Because this is 2016 and we have a new feature called CSS variables that's a emerging standard that we actually support in DevTools So let's see how we can use that to add a dark theme to The night theme to our weather on the app. So first I'm gonna paste some to speed this up I'm gonna paste some variables into the HTML Those are all CSS variables as you can see it actually is smart enough to realize that that's a color that I have in there It could be anything right, but it's parsing it as a color. I can use the color picker I'm gonna change the variables of where they need to be changed. So in this case on the header I'm gonna change to the header color. I'm just gonna speed it up a little and Gonna use background color here Cart background color on the actual card And then let's see. Yes, that's missing. It's a faded color on the text and I think we have final one and Yeah, actually coming back to the card as you can see there's no text color defined on the card But we do have quick actions in the bottom now that are actually pretty nice to add a color to a class Right there. So you don't have to type in color or background anymore and just can add it right there So that's nice. I'm gonna use it to just add the card text color here Okay, and now I'm gonna switch back to the hml tag To actually create our dark theme. We just have that's just our preparation. We've done So I'm gonna copy the block of CSS variables here And I'm gonna use another new feature in the actions the quick actions below and the little plus that actually adds a new Style rule right in that file Below the side rule at top and I'm gonna call it dark gonna paste it And now I'm not gonna use another new feature Which is the class toggle in the side panel if I do that I can insert a new class on that element It applies directly and I can even toggle that I'm gonna use that right right a bit So now I'm gonna bring up the color pick again, and now if I long press on one of those colors First of all, yeah, I'm gonna choose. Yeah, let's do that blue is good But if I long press on one of those colors, I can come come to all of the shades of that color Which is a really nice way to just pick a palette that works nicely So I'm gonna use all sorts of shades of that same color to drive our theme here Which which makes things so much easier for me And finally the faded color and There we go. I think we have a pretty good dark theme and now I can use that toggle right there To toggle the class on and off very easily and this works for pre-existing classes as well on any element To preview what we have so that's the color picker and the building actions. Thank you Now let's talk about animations Now in the best sense animations are not just flashy things, but they will add They will for instance visualize a state transition in a in a really nice way And if you like most of most of you and and me You don't usually if you create a complex animation. It's not just one dumb element, but it's a set of dumb elements So we thought long and hard what we can do here and how we can develop a solution that Works well for an animation workflow Now I'm gonna switch to a different demo here for a moment because we don't have a lot of animations on the weather on the app This is actually a pretty cool demo because this is a a web prototype that actually is built from the chrome team by the chrome team and and Is a UI prototype for the actual system UI so we actually used that to build our system UI in Chrome So let's take a look first first thing I'm gonna take take a look at the earl bar and it's gonna bring up the keyboard But the keyboard doesn't ease really nicely I think the easing is pretty off. So I'm gonna click on the keyboard I'm gonna bring up the new bezier curve editor So the better bezier curve editor allows you to quickly switch to any kind of easing curve that works So you can see we just improved it quite a lot by choosing a different easing curve But again, this is a complex animation that consists of a group of elements So I'm gonna use the new animation inspector to capture those groups of animations It's actually smart enough to figure out that what you're looking at is a complex animation that consists of various DOM elements So now we can scrub in that animation And go back and forth and look exactly at what I'm look check out exactly how it looks like I can slow it down to give a give me an even better preview But only in that this is not just a preview. I can shift things around I can add a delay to the keyboard and Make it appear later Here we go And now this there's a bunch of other animations in here back to full speed I'm just gonna click around a little and this there's even more here as you can see all of that is captured in groups Those groups even have screenshots that are animated little gifts that we capture and and so you can go to any of them and then click on it and just Check out what I just recorded and scrub back and forth So we think that's a really nice improvement on working with animations and that's animations All right, so I already showed you quite a bit in a relative short time But when you want to feature when you want to find a new feature in deaf to us And I didn't detail every step to enable those features If you're like me you sometimes lost and you you kind of search in the settings you showed someone else the deaf to is our fairly complex product and Sometimes it's just not super easy to find something so we have a solution to that too we think and we were inspired by the blind text here and A few other editors and what we added is command shift P to bring up a command menu So that command menu can really easily allow you to switch to any action any panel right on the fly Just on your keyboard for instance here showing the dark theme or I could go offline right in the command menu without actually clicking anything and I can also just for instance Yeah, go back online or Show media queries in a device mode. So almost every category within deaf tools is supported here and It includes over 60 actions more coming And we think it's a really nice way to to jump around things and discover things Now I'm going to call up Paul. I wish to talk about something. That's brand new so new that we need his computer to demo it Thank you, right so we We were hearing Well, yeah first. My name is Paul. I work on the Chrome DevTools Gonna show you it's a little bit more stuff Paul was showing you a bit about how we work with styles and some of the new tools to manipulate them And I want to dive into that a little bit more because there's this gap between Kind of the styles that we see in the dev tools and then kind of like how we write them And we always have to kind of mentally map between things and kind of work it out And it's always a little bit rough. We've been thinking about how to kind of smooth that over All right, so I'm gonna switch screens over here bring this up. So I'm looking at the weather wonder app Now I'm gonna make a change to my styles here I'm looking at just this header across the top and it looks like we got this color Which looks Pretty nice. I'm gonna make a change We'll switch it over to golden rod because I am like totally into golden rod these days That looks good now one thing that we've always actually done is Being able to map what you're doing here in elements panel and then show you over in sources kind of what it maps to so if I click over here We actually have the golden rod kind of just carrying over right here So it kind of it already keeps track of things, but let's say I want to make a few more changes I'm gonna get rid of this z-index And I'm gonna tweak the font size just a tad and I think that looks good Now one thing I want to make sure is just make sure that over here in my settings I got everything I need to make this look as sharp as it should All right without out of the way We should be able to click in and make just a few more Modifications that seems nice. Yeah. Yeah. All right. We'll tweak that back again. I'm feeling good about this feeling good Yeah, all right so Things are looking good to me so far Any more things? Yeah, bottom border border bottom one pixel solid any color recommendations? Papaya whip is that a coral coral? Is that a coral? Oh, that is nice. Yeah Wow, yeah, we'll give that yeah, so nice. All right. I'm into that All right So I'm a drop over here and one thing that you'll notice not only are the changes there But we're also making sure that we've annotated alongside the changes to show you a little diff you of what is new Down here and what has been changed? So this just keeps track of all the changes that you've done and even if I wanted to say for instance get rid of something I'm gonna add a little bit of space up there and turns out. I actually don't need a background No, I don't need these guys at all like we'll just wipe them out We keep track of deletions modifications additions. So this is the nice way that we can kind of Keep accounting for all the things that have happened in the page All right, so got those changes underway But it is true that I'm like switching back and forth between these you see it kind of mess me up a little bit You kind of want to have that understanding be here without switching contexts So we're like maybe we could just bring that information over into this view I'll show you a new new panel very very new And it's down here near the console now you can click these little dots To reveal it, but I'm gonna use a command menu because I'm just feeling it So I type in quick source so quick source is just like the sources panel but with a little bit less and Now I have the exact same thing over there just in line here the nice thing about having this here is that as I click around in my positions in the styles and It's also going to make sure that it's jumping to those locations Down in this area. So as I move around I can kind of keep track of My position between the two files So this is giving me a lot more context for how what I'm doing in the elements pane matches with my original source file and so that I can like take these changes and then carry them back very easily To what the work that I was doing. So I feel good about this stuff. I like it but There's another thing that I want to show off Because like I'm showing this with CSS right There's a lot of great tooling in here for CSS But what we're authoring in and our projects is not necessarily CSS It's usually something that compiles down to CSS right and so that's another kind of mapping that we have to make in Our heads of like, okay, I made this over here But I'm gonna copy paste and then I need to put it here and here and and it's a little bit of work And so this has always been something that we wanted to kind of ease the transition for so that we can keep things a little bit in sync So you might have say for instance Used CSS source maps before so I'm gonna flip those on because I had just turned them off for this part I'm just gonna reload the page make sure that I'm Looking good That is nice, that is a nice, but I'm gonna get rid of those golden rod changes just for the moment Okay, so We'll bring this back and Good, so I've turned on CSS source maps right and if you've done this before you might have noticed that over here on the side It says loader CSS looks that CSS right and so that's good because I can Click over and see like where is this selector? Where is this rule over in the source and so yeah Okay, I guess it's over there and this is my sass file like I have variables and mix-ins Okay, so this has been something that is that we've had for a little while Now just to ease things. I'll bring back quick source. I'm gonna go a little bit quicker here now Okay, so I'm making some changes and Let's see. Yeah, so One new thing is that now that I have quick source and My map in place not only can I Just follow around the position of yes background is there and position is there But you can see as I click on the value for this color it jumps up immediately here So I get instantly get the feedback that these are actually coming from variables Whereas these are properties in this rule. I Like this a lot because it gives me the context for like what what am I looking at here? Is this from a mix-in these guys are from a mix-in? Okay. Good. Okay. Good now This is all right. This is okay But like our job is not just to look at the relationship between these things like we got to do work We got to like, you know change how it looks get some more golden rod in there, you know, so Let's change something. I'm gonna go in and this background color again Tweak it needs to be a bit more green open up my color picker switch it over So what we just did right here is this color Green we actually didn't just change it for the header We changed the original color value here and switched to red to make that a little bit more clear check this out So not only did we change it for the variable value? But you can see we update all the places that are using that color So not only the header, but you see that the footer too is using a Variable for the same thing so we're keeping it all in sync and we think this is really really cool What do you think you like it? I'm gonna show you a few more things here. So Now that it's okay red is red is a bit too much. I think the green was a better choice Yeah, like a there. That's good. All right so So we got the We got our changes on variables and that's working out nice I'm gonna make a little bit more of a complicated change we're gonna go in here and it looks like this These icons right? These icons we have with height 32 pixels and it looks like I left a comment for myself I really wanted to update those to use a proper variable as well just like this larger one So I'm gonna go in and I'm just gonna make the changes directly in here because it's not really something that I can do up in the styles So we'll just update those this becomes 32 and we drop in those guys right there, right?  I want to make sure that we can bring it into the project now what I Could do is I could kind of copy it out of the page I could also right-click and just save this to disk But I have set up the workspace functionality already so I can just hit command s Now before I do that I want to point out I just have a gulp task sitting behind the browser window just like a typical gulp task It's just compiling when I save to disk. So when I save this file, it should kick in And we should be good. So command s Yeah, cool. Okay, so no visual changes so far, but let me just check one thing when I click in back on to the icon and We're looking like 32 up here Yeah, okay, so as I click on the 32 up here. It is mapping to this variable value So does that mean that I can just update this guy? We'll go like to 60 pixels and you see not only does it update this but also that all uses so we're keeping it all in sync All right. Yeah One other thing because we have not only the bidirectionality between CSS and the originally authored Styles we also have this direct bidirectionality between my dev tools here and my editor so I'm gonna come over here and look for that icon size and Looks like it's here. Everything looks to be in place and I'll tweak that and bring it back down to let's see Shrink it down a lot 10 pixels. Now as it's hit save the sass should kick in and there we go So this is nice. I can edit up in this up in that styles pane up here I can make changes in here or just come back in my editor. We're gonna keep it all in sync All right Just so you guys know that this is real. This is the repository for my project and I was gonna hit get diff and we're looking here at The diff of my sass with my green and I wiped out that thing and so all these changes are now in my project looking good Cool, so there's a bit of magic to pull this off like we're kind of keeping track of things in different places, right? To make this work What's actually happening? I just want to kind of explain it's gonna get a little nerdy This right here is a visualization of a source map now source maps is the same thing from JavaScript and CSS now So what I have on the left is CSS and on the right is a sass file So this border color for instance, you see these margin border color It's just highlighting on the right-hand side what that maps to what the source map knows about it But you can see that the variable value over here is Actually mapping whoops, excuse me Is mapping right there So here you can kind of see what's happening the mapping already kind of Helps us identify the different strings and how they they fit to the other file And so we're in the dev tools just using these this information to allow us to kind of update What would make sense? All right So I should put out a disclaimer or two This is really cool functionality and we're working on it still It works great with sass with all the things that you would expect it to and variables and mix-ins and nesting and things like this We're talking with the teams behind auto pre fixer post CSS and sass. I'm sorry and less To make sure that things are working great with them because we want we want to make sure that everybody has this kind of best-in-class Styles editing experience So you can play with this now, and we're making sure that it's going to be even more robust regardless of how complex your your style tool toolchain becomes cool All right, so with that out of the way I'm gonna switch back here because I'm gonna move on and kind of shift gears I'm gonna talk a little bit about application development and specifically progressive web app development I mean we're working hard in the DevTools to kind of bring some new Functionality that makes things a little bit more clear because these things can get hairy Now one of the things that we like to do in the DevTools is change things like just change things You thought it was over there. We moved it down there like that's like what we're going for right? And we thought you know it might be nice if we Just you like change like kind of remove one of the panels that you've been using just it make it disappear completely Well, all right. We didn't totally remove it But you'll notice there's no Resources panel up at the top resources panel is now application. Okay, so let me give you a quick preview of what application Looks like so there's still everything that we didn't move anything everything still here Storage and your application cache and cache storage and frames so you can still navigate that but up at the top We've done some new things so this right here is a visual representation of your manifest of your web app manifest So everything this is the actual JSON as it was received But we kind of parsed it out visually to make it a little bit more clear so you can see your colors your icons and If you want to test what it looks like when chrome prompts the user to see if they want to add this to their home screen You can do that here So it just would trigger the same thing that chrome would be doing and it looks like actually this one's not gonna work because Something about the display property and my manifest Isn't what it needs to be so I'm getting that feedback Here about any errors and warnings that we're discovering far before I realized it just doesn't work on my phone All right, so that's what it looks like for manifest But when it comes to service workers, we want to make sure that you're getting the information that you want So there's been some functionality in here before but it's been a little bit confusing So we want to make sure that it's very clear how things work. So here. I'm investigating my service workers and I Want to make a Few changes, but I also just want to see what's happening so I we have here a listing of The service worker that is attached to the page looks like it's up and running I'm really attracted this checkbox around offline at the top. I'm gonna click it now. I'm gonna reload the page and Looks like it it went offline that makes sense, but I thought I had a I thought I would like was it was Everything was offline everything was cached. I'm really sure let me make sure that things are up and running Yeah, seems good Pretty good. I mean roughly good now I'm gonna check that offline again reload Yes, okay. We'll just ignore this down there So the I reloaded the page the page is still up This is what I expect because this is a progressive web app without errors and it is supposed to work offline, right? but if I On the right hand side if I unregister the service worker and I reload the page, I would expect to see our dinosaur friend Yes, good offline. No service worker. We're done So this offline checkbox is the exact same thing that you're used to over here With the network throttling and it's just here conveniently for offline development. So I'm gonna try out some more things so I'm gonna switch over in my editor to my service worker and It looks like I have some logs coming in for my service worker in a nice golden rod Yellow. Mmm. It's so good. So what I've done is use some styled console logs some quality quality stuff And I want to change the color. So I'm gonna change it to blue and a reload and I See a little bit of it. I see Some blue and actually so I have the the one with the blue text is here It's waiting to activate but the golden rod is still there and I'm like, okay, cool, but I want blue It's important. So I'm gonna skip waiting. I mean I force it to be the active one And so that's all good, but maybe I wanted to make another change and so as I'm iterating on my service worker It works, but then there's continuing to be waiting to activate because this is kind of the workflow in the lifecycle of how they work Because this gets a little annoying the update on reload checkbox Allows me to basically always update the service worker definition whenever I reload the page So that way I don't have to go through and click this skip waiting every single time. So as I change this And save it and reload. It's just instantly pulling that one in and I'm running the latest So this is great for doing service worker development for literally editing the service worker code but there's other times when you have a page and you're Playing around with the plate pages styles or its functionality and you kind of want to just pretend like it's not being cached So that is what this bypass for network checkbox is. It's pretty much the disable cache of The service worker generation. It's like just service worker Don't attempt to like overtake these these requests and like provide one from the cache Just ignore the service worker for all the network requests and this allows me to make any changes For the page and just see it directly all right sometimes you get in kind of interesting situations and You just want to you know clear it all away. So the brand new clear storage Pain allows you to just take all of the service workers the storage the cache and just wipe it It wipes it just for this one domain So you're pretty good. You're able to clear it out and kind of like start from fresh All right, so Feels good Some I wanted to show you one other thing While you have this information available to you kind of real-time in manual debugging you sometimes want a Little bit more information to help you guide you and make sure that you're hitting all the things that you need to and we've been thinking about how to bring this functionality and we started a Project that allows you to investigate kind of what is the checklist of items that you need to build a successful progressive web app And so So this is a project that we're calling lighthouse So lighthouse is a standalone validator that allows you to identify what is necessary to build a progressive web app And so what it does is it investigates all the things in the page looks at your service worker and your manifest and all sorts of things To identify one of the things that you haven't yet done so I'm gonna show you a quick demo and I just have up this page. This is a fire fox's page where they communicate about what they what features that they have But it's a progressive web app and so I get to try it out So I'm gonna kick off the lighthouse chrome extension and Generator a port so what this is doing is it is? Emulating a mobile device. It's actually throttling the network condition because it so it can get more accurate network performance data it is Reloading the page and doing a lot of tests to understand About the how secure the page is What is cached if it redirects from HTTP to HTTPS kind of all these things It's running kind of a battery of test and it takes a few page loads to really get it right, but when it's done Okay, good. Yes. All right. So this is the report that you get so this report gives you an idea of Where you're hitting the mark and some places where there's opportunities So it gives you information on If the page is successfully cashed offline if it has everything that it needs so that chrome can prompt Repeat users to add it to their home screen is it gonna launch off the home screen with a splash screen things like that and even gets into things like Accessibility security other UX issues. So it kind of tests a whole battery of things Now this is available here. We've prototyped Exposing this functionality through a Chrome extension But it's also available on the command line. So over here This is just a command line module written in Node.js and you can see this is the same kind of report just Here so this is nice We can also out port as Jason in case you want to run this in a continuous integration environment and make sure that There's no regressions across any of these variables So this is a really exciting thing and we're happy to kind of move it forward It's still early days and you can imagine have seen this thing and all sorts of different places in your development life cycle Whether you want to see it in the Chrome dev tools or available in in continuous integration So we're working hard to find out the right places for it to live So if this is of interest to you, it's just on github and feel free to come by get involved in the community We're looking to expand the coverage start getting into more testing in security and success ability gathering performance metrics So I encourage you to drop by and check it out. All right. I was a lot, but Seth is gonna help us out and took over the next part And I think he's gonna tell us a little bit about JavaScript debugging good stuff like that Cool Okay, hi everybody Let's see I think we're all set up here Okay, my name is Seth Thompson and I'm a product manager on Chrome I work on the DevTools team, but I also work on the V8 team now V8 is Chrome's JavaScript engine And today I'm gonna tell you about a project which spans both of these teams So Chrome DevTools is great for debugging your application But normally when we talk about using Chrome DevTools, we're talking about debugging the front end of your application But many of you are web developers that are full-stack engineers And you're not just debugging a front end, you know You're also interacting with the back end which maybe exposes API is that the app interacts with So how many of you have seen this? This is so so so much of a hassle to get when you're in DevTools on the front end It's a status code that shows that there's an error in the back end which is returning a request to Chrome and the front end and What's tough about this is When you see something like this you often have to completely change mental context in your workflow You have to leave Chrome DevTools working on the front end You have to often go over to another code base where your back end is running. You've probably got to kill your app Start up a debugger for the back end Make some changes there try to identify what the problem is Restart your back-end service and then switch back to Chrome DevTools to continue working from the front end with a fixed API call But let me ask you another question. How many of you guys are Node.js developers? Okay, maybe have worked on some Node.js applications. Well on Chrome We love Node.js and so many web developers use both of these technologies together so, you know Node.js is powered by the v8 JavaScript engine and DevTools can introspect and debug v8 when it's running in Chrome So we thought why isn't it easier for DevTools to debug v8 in a JavaScript context and note? Well, I'm really happy to announce that the As of this week, we've submitted a pull request to node core to integrate proper Out-of-the-box DevTools debugging of Node.js So this is a this is a big deal and it's been a collaboration of the Google cloud platform node.js team The Chrome DevTools team and the Chrome v8 team Allowing you to use the binary that you're using to run your Node.js app and hook it up to Chrome DevTools So the reason this is different. Yes, it's a it's a really big it's gonna be cool Now you may have you may be familiar with other similar tools There do exist UI tools for debugging Node.js some of them even based on on on parts of DevTools But the difference about this is when this if and hopefully if this pull request is submitted into node core You will be able to use the exact same node binary that you're using to run your app already And you'll also be able to use DevTools in any Chrome window So This allows you to it takes away all of the machinery between the node server and DevTools And allows you to pick up immediately when either node or DevTools adds new features New debugging context new ways to introspect your app. So enough talk. Let me give you a quick demo here I'm gonna switch over to the same screen. You've been looking at before and And I'm also working on some changes to the weather wonder app. It's actually a it's a pretty complex app And we need three three people working on it with a bunch of different branches. It's gonna be good when it's done But you can see here. I'm actually Working on adding a feature that humanizes the date I think in the version Paul was working on you've got this long time stamp there So I want to humanize that and say put relative time Now weather wonder is architected right now as a progressive web app on the front end that makes An API call to the back end to query for the updated weather content and that back end is a node.js app So let me quickly show you that Right here on the left side. I've got a gulp task running the front-end progressive web app And on the right side, I've just got this simple node service running a quick back end that You know requests the forecast data and and responds with it so What I want to do though is is I notice that there's an error here And it says that my app was most recently updated 46 years ago, which is definitely not the case None of these technologies were around 46 years ago so there's definitely an error and When I would when I would be using dev tools normally in the past and and highlighting this trying to figure out Where that number is coming from I Would hit run into this this place where you know I query for the query for the response here and actually I'm going to make one One mention of something that came up earlier here because I'm debugging the back end and the front end I don't care as much about the caching behavior of the progressive web app So I'm going to come into the application panel and toggle bypass for network This means that every time I refresh the page it should hit the back end again with a new response and request So now when I come to the network panel I can come in and see my new york.json on Let's see. This was a request to local host. That's where my node application is running and I noticed in the preview here that the time is actually responding with the improper relative time from the back end and Previously this would be the point where I've reached the boundary of dev tools I have to switch into this other code base this other job this other JavaScript debugging context different tools To try to track that down But with this change with this pull request and I have a specially built Version of that pull request, but hopefully if it's accepted it would be the same binary you're using normally My special build is called node 2. I just pass a command line flag. That's it inspect and After I do that the exact same app Gives me back a simple URL paste this in to dev tools or excuse me to any chrome window It's just a new window here and Now I have a context which is showing me my node application. This is so cool This is totally new and it's right available in Chrome right now Yes, it's it's great and Just to prove it to you so I'll quickly show you what we've got here We've got all of the features you usually use in DevTools You've got a console to prove that this is actually node.js I've got my global node object and on it and you might have done this to feature test what version of node you're using and go to process environment and Version oh, no, I think that's I guess we can test the v8 version What's on here? Well, this is the other fun part you get to see what this object has Where is it? version, that's it V 7.0.0 that is the most recent version of node. So this is really cool It's actually a node environment that you're debugging here. It says node.js main context We've also got the sources panel so the sources panel is where you're probably used to debugging front-end JavaScript and DevTools has added a bunch of new features to this recently You have things like async call stacks to be able to traverse the control flow of your application across Asynchronous boundaries like a set timeout You've got proper support for ES6. I think I've got an arrow function in here somewhere Maybe not We also add inline values. You'll see that a second when we step over things. So all of these features I just want to reiterate all of these features that we add to DevTools on the front-end Immediately work out of the box with node.js when you're debugging on the back end So as you can see here, I've set a break point for Actually, let me let me go back up one more time That Java the JSON I showed you was coming from this route here And I've added a break point on my back end where I have the logic for that route city.json and just that I actually it already happened when I tried to request that JSON object it hit my break point that I set earlier and You can see here that what I really want to figure out is why my Moment.js conversion isn't working So stepping works like normal. You see that data dot currently dot time which is coming from this forecast API that does have a timestamp and I pass it through this conversion using the moment node library to turn it into a relative time But something's messing up there Well, you know what I really need here because this data object that's coming back from the forecast API Has so much stuff on it. I really want an interactive environment to see what's on that object and the The console here actually updates and gives me the context of where my break point is set So if I type in moment, I've got my moment library and if I type in data I've got the response that was came back from the forecast API on my back end here So let's quickly figure out. What was the issue here? Data dot currently dot time does indeed give me the wrong thing Actually, that's because it already went through the step here Let me set the break point one more time and hit it before I Reach the conversion Okay I'll let me set it a little bit earlier here. How about up there? great continue that one and Reload my response Okay, did that go? Nope Great, so hit this break point here I'm gonna continue or just gonna step over that error and now I've this is the data object as it was returned by the forecast API data dot currently dot time has Nope currently I spelled wrong Has a time stamp. Okay. Now here's example of something that's usually really difficult to debug I think the issue here is something around the fact that the time stamp coming back from my back end is different than a time stamp that the moment JavaScript library expects Normally if I had to figure this out, you know, why is my back end time stamp different than my front end time stamp? It would be so hard, but because this is the same dev tools JavaScript counsel I can just check and say okay. Well date dot now returns It's under Returns a slightly longer time stamp I think what's going on here is the back end is returning a Unix time stamp Which is in seconds and the front end is returning a JavaScript time stamp, which is in milliseconds That makes sense. That would mean that the relative time is older than expected. The fix is actually pretty easy It's just multiplying the time stamp the Unix time stamp by a thousand to convert it from seconds to milliseconds Now you'll see I did one other thing here DevTools has live edit this thing updates on the fly and it actually hot reloads the function that I'm editing in DevTools Into the node process.  I think that should do it. I'm just gonna hit save I'm gonna remove my breakpoint continue that execution and I'm gonna move back over to my front end Hit refresh cross our fingers. It fixed it a few seconds ago. Yeah So As you can see it's just it's just so much faster to debug both of these environments with this combined and Integrated support so I'd like to thank all the teams who help work on this You can get access to it on a special build if you choose now But we're crossing our fingers that the pull request is accepted by node and this works out of the box And now I'll invite Paul Bacchus back up at the stage to give it outro. Thank you Very brief wrap up so we talk about offering application and JavaScript and To make this really quick device mode command shift P colors or variables real-time sass and authoring Take a photo if you want to All right Yeah, we need to move on sorry manifest service workers in storage and And we hopefully you can see the recording afterwards and also node and inline various ES6 black boxing There's a couple things we haven't shown but that's about it What's next check out our documentation follow us on Twitter on chrome dev tools and enjoy the show. Thank you


Good morning. I'm here to orient you a little bit to the CSER program, and in particular I was asked to talk about the top five consortium-wide products, but before I do that I'm going to give you a couple announcements. One is that when we break at 11.25 for the first set of breakout rooms, neither of those is in this room, and you have to take your stuff out of this room because they're resetting this room. So a lot of times we leave our stuff behind but not this time. And then at the second session group of breakouts, LC and genomics will be switching rooms because of the size of the rooms. So just be aware there'll be people to direct you, but LC and genomics are switching rooms. All right. So CSER, as most of you know, is just winding down its first project years, and it has had this mission of getting the genome to the clinic fundamentally. And it is different than a lot of NIH programs in that it has a very high clinical involvement over 200 clinicians of all types involved. And we have had a really interesting time, and hopefully CSER and Emerge can share lessons. As I talk about the top five projects, I'm not going to talk about these two because I hope everyone knows about them. These are the two joint CSER, Emerge, two papers that were published a couple years ago. It will start with this paper, which was an Actionability and Return of Results Work Group paper. And all the products I'm talking about today were network-wide products. This paper is one in which we took 6,500 and three people from the exome variant server and decided to not only estimate the rate of actionable incidental findings in those persons, but also get classifications to be submitted to ClinVar for those. And the idea was that these would be variants we'd probably come up with again. And if we were concerned that they were pathogenic or misclassified, this would be a way to get ahead of those variants. And so this is one of the tables from the paper. It summarizes that we found several percent variants in European, and it depends on how you want to count the likely pathogenics, since some people don't return those, and a lesser number in African ancestry people. And this has been a highly cited paper, and I was actually participating in a bioethics symposium about six months ago, and a speaker who was from Continental Africa showed a version of this slide from this work to talk about the challenges in African ancestry populations and health care disparities in that population, and he noticed me smiling in the front row, and he said, oh, Gail's smiling, but he didn't realize it was my slide. But I was really pleased it had made all the way to Africa, so that was good. The next paper that was also an actionability return of results workgroup paper, we called the variant bake-off, and we worked on it for a long time. And what we did here is take 99 variants and classify them, each one in at least three different of the nine CSER clinical laboratories, CLIA-certified laboratories, and look for concordance across those variants. And what we found, and we found this whether we were using our own lab classification status or what were relatively the new ACMG classification categories at the time, was only about 34% concordance. And so we moved forward and spent a lot of time trying to figure out where we were discordant and why. And this led to discussion and rule clarification of the ACMG rules in ways that sites were interpreting the same rule differently. We could come up with a consensus interpretation for that ruling. And to be honest, sometimes that consensus interpretation was pretty clearly in the original ACMG paper, but not read the same way by everyone. And we were helped by having people who were involved in that paper on our committee. And we were able to get the consensus up to 71%, but still not achieve perfect consensus, although most of the disagreement was by one category. This led to several spin-off papers. The pathogenicity calculator. So one of the things we found is that some of our discordance were because one site or another had misadded all those classification criteria that you use under ACMG to come up with a final classification and put it in the wrong class even though they had characterized the classifications the same way. And so one of the groups developed a calculator where you just put those classification codes in and it will tell you the correct pathogenicity classification, and that's been very useful to avoid simple errors. Another was the general lack of consensus around what qualified as co-segregation evidence. And so that was a follow-up paper on proposed co-segregation criteria to standardize that. And then the last, which I'll talk about in a little bit more detail, was a survey of the current practices for genomic sequencing across, I think it was 21 labs, yes, 21 labs looking for best practices. And they came up with some recommendations that are listed here, things that should be in the reports, lists of genes, minimum thresholds for coverage, and making sure people understand when a target has below the expected coverage. And in particular, if there's no pathogenic variation in regions with below expected or desirable coverage, the idea that having a diverse group of people in case review, especially having clinicians in case review, was useful. The orthogonal validation of some variants as necessary and analysis guidelines and then questions about reanalysis are all addressed in this paper. And I think it's a very useful paper for clinical labs. The third topic I wanted to cover today, also a consortium-wide product, was to look at informed consent for genomic sequencing. And what was done by this group was evaluation of all the nine U01 CSER consent forms, interviews with the genetic counselors and coordinators who were obtaining consent. And then they tried to summarize what were the questions that came up in these conversations, what misconceptions did the participants have, and what content did the people who were doing the consenting feel was most important to cover. And I'm not going to go through this table here, but some of these things are things to think about a little bit more. Of course, patients often ask us about privacy, the impact on insurance. But it's really important to also cover some things that they may not ask about, such as their misconception that a negative result means that they're completely genetically normal or that no future changes will be seen. Or sometimes people believe that their genome will change over time. While it's true that our interpretation can change over time, it's not usually the case that the genome does. So this is a very helpful paper in preparing to consent people who are having genomic results, both in the research and in the clinical setting. The next thing I wanted to highlight was a product of the pediatrics work group. And that was a discussion of sequencing results for the pediatric population. And of course, they followed very standard ethical guidelines of what's in the best interest of the child. How do we work with parents as surrogates for their children? And when do you need to obtain pediatric assent? And I can't go into the many details of this paper, but for those working in pediatric populations I highly encourage you to look at it more closely. The fifth thing that I wanted to highlight today is a product from the practitioner education work group, not the physician education work group, but the practitioner education work group because it's a much more general targeted audience. And the idea was to provide healthcare providers just in time information on how to understand genetic lab report tests. And this was a very collaborative, cross-site product, and we were trying to target short, you know, things that can capture practitioners, you know, busy practitioners' attention with visuals and get to the message as quickly as possible, not have it be related to any particular lab but useful for anyone reading a genetic test. And now this has just as of yesterday gone live in a collaboration with the American Society of Human Genetics on their website, and this is just a screenshot below, but there's the link above. But if you go to ashg.org and follow the education and practitioner tabs, you will find this toolkit and you can work your way through it. And so the next step with this will be to, you know, beta test it a little because it just went live yesterday but then to do some marketing to make people aware that this tool exists. So this may be a very good tool as emerge sites are starting to release results to their practitioners who are not specialists to be aware of. And we'll hear more about it today at the physician education breakout this afternoon for those of you attending that. Of course, in this short amount of time I couldn't summarize all of the important work. Robert Green headlined a summary paper which we call a marker paper of consortium products a little while ago and I recommend that paper and then this is us all dressed up and looking fine. So with that I'll turn it over to Rex who's going to tell you about emerge.


It's therefore time for our member's statements. The member from Huron, Bruce. Thank you very much, Mr. Speaker. One of the greatest things about the holiday season is how people connect with their community and get to take part in extra special events that only happen once a year. It has become a tradition for citizens and community members to gather at the Formosa Lions Park, as well as the nativity scene, to enjoy the grand opening of a gorgeous, gorgeous, handmade nativity scene. Last Friday, families came out and enjoyed many festivities to mark this event. People sampled traditional Christmas treats such as sweet bannock, viewed the nativity scene from a horse-drawn wagon, made festive crafts, sang Christmas carols, and the kids even had a visit from Santa himself. Whatever the holiday people celebrate, events like these always connect people to their communities and provide an opportunity to marvel in the holiday spirit and community pride. Congratulations to the Formosa Lions, and thank you to the generous sponsors and hard-working organizers of the Formosa nativity scene, and for those across Ontario who are putting on similar events that bring people together this holiday season. And by all means, if you're traveling along County Road 12, either in Huron County or Bruce County, make sure you take the time to go through Formosa and check out the amazing work of this local community. Thank you very much. Thank you, Speaker. I want to commend the town of Pellum Mayor Dave Augustine and Town Council, whose reputations have been under attack by a group of regional politicians. Throughout Mayor Augustine has been honest, transparent, and displayed the very best of what we ask of our public servants. KPMG recently released an audit clearing the town, council, and mayor of any wrongdoing. Despite this, Grimsby Councillor Tony Quirk, the mayor of the Niagara Region's Audit Committee, questions the accounting expertise and said he will continue to pursue his concerns. Now, Mr. Quirk is also on the NPCA board, who I talk about quite often, and recently launched a verbal attack against a superior court judge who dismissed the Conservation Authority's lawsuit against a decorated military veteran Ed Smith. As the justice noted, there are many places in the world one might expect such a crackdown on free speech and criticism to happen, but not in our beloved dominion of Canada. Thus, Mr. Quirk's attacks on Pellum are highly hypocritical. He should release the legal costs for the NPCA's suing of a private citizen if he's on a mission of transparency and accountability.  The All-Party Provincial Public Accounts Committee has appointed the Auditor General. Port Cobrin is now calling for a supervisor, and I will continue to work on this file and encourage other municipalities in the NPCA watershed paying millions of tax dollars to do the same, because that is how democracy works. Thank you. Thank you, Mr. Minister. Thank you, Mr. Speaker. My writing of Miss Saga Arendelle is home to the University of Toronto, Miss Saga campus. It is a matter of great pride to have such a word renowned post-secondary institution educating our students right in our back yard. The UTM campus has expanded over the years thanks to the investments made by the Government of Ontario, the city, and the community. Another important factor is the leadership and vision of the administrators and the hard work of the professors who make UTM such a desirable destination for higher learning. On December 16th, I had the privilege of attending the installation of Professor Ulrich Crowe as the ninth principal of UTM. It was a well-deserved occasion to celebrate the success and contribution of Professor Crowe as he took over the important and key leadership position at UTM. I would also like to congratulate Deep Sani, the outgoing UTM principal for his hard work and dedication. It has been a privilege to get to know him personally and work with him over the years. He's on to Australia. He's the Chancellor in one of the universities in Australia right now and I want to wish him all the best. I have the utmost confidence that with Professor Crowe's dedication, leadership, and vision, UTM will continue on a successful path. His passion for academia, research, and more importantly for the students and the school will be unrivaled and I wish him all the best going forward. Thank you, Mr. Speaker. Thank you for the number of students, the number from Leeds Grandville. Last Thursday I attended the official opening of Oxford-on-Reedo Public Schools Tech Education Program. It was an incredible night to celebrate how a dedicated group of parents brought a leading edge coding, computer science, and robotics program to this small rural school. To see those young students so enthused about what they were doing was truly inspiring. I wasn't there more than a few minutes, Speaker, before student Liam Steadman invited me to sit at a computer to try my hand at coding. Throughout the gym, small robots programmed by the students zipped about to the amazement of parents, grandparents, and special guests. Talking to the students and teachers, you could hear how Oxford-on-Reedo Tech is doing more than teaching students to succeed in a world where coding is the new literacy. Even if a career in robotics isn't in their future, the program is sharpening essential problem-solving and analytical reasoning skills. The driving force behind Oxford-on-Reedo Tech is the Lex Tonio family, Brent, his wife Katie, and daughters Addison and Taylor. Brent actually presented the idea to the Upper Canada Board Trustees during an accommodation review meeting in March. And despite the heartbreaking outcome of that process for their school, Brent persevered. Just nine short months later, it's amazing how far that they have come. Speaker, Oxford-on-Reedo Tech is proof that high-tech programs can be delivered in any school, regardless of size or location. It just takes a dedicated group of parents and educators working together to make it happen. Thank you, Speaker. Member for Tameka Mikako. Thank you. Last week, the government announced increased bus services for the North through ONTC. And while we appreciate that they're loosening the choke hold a little bit on the ONTC, this certainly isn't the enhanced bus service that we were promised when this government killed our passenger rail. And since that killing of the passenger rail, we've seen bus stations close, seniors have to wait in mall parking lots for the bus, and that is not changing with this announcement. That's why we, the NDP, under Andrea Horvath, one of our priorities is to bring passenger rail back to the North and have passenger rail work with the bus service to actually provide a coordinated passenger transportation system. And how we're going to do that is we're going to talk to the people who use that system, talk to Northerners, give Northerners the tools so they can make the decisions to make a system that is not only going to benefit the North, but is going to benefit the whole province because the North is one of the engines of this province. And that's why it's so crucial that we have equitable service along with our neighbors and our co-ontarians to the south. And this might be my last time to speak in the house before Christmas, so I would like to wish my friends at home and my friends here a very merry Christmas. Thank you. So we'll send us the member from Durham. Thank you, Speaker. Today we commemorate the first anniversary of the new Lakeridge Health, which include Bowmanville and Port Perry hospitals. On December 1, 2016, Lakeridge Health, a five-hospital health system was created to serve residents across Durham region. Lakeridge Health is comprised of five community hospitals located in Ajax, Bowmanville, Oshawa, Port Perry, and Whitby, and 16 community locations across Durham region. With a talented team of more than 5,000 dedicated doctors, nurses, healthcare workers, and more than 1,500 volunteers, Mr. Speaker, Lakeridge Health cares for more than 1,600 people each and every day. Lakeridge Health has evolved into a regional system to offer better access to care to provide better, more coordinated care close to home. Lakeridge Health and its healthcare partners provide safe, high-quality care to people across the Durham region. Speaker, I congratulate everyone at Lakeridge Health for their dedication and commitment to the delivery of safe quality care for the people we, they collectively serve. This is a historic day, Mr. Speaker, and one that I'm very proud of. And I was there when we made the decision to have a Lakeridge Health system. Thank you, Speaker. Thank you for the members. David's the member for my team, Kent Middlesex. Thank you very much, Mr. Speaker. It gives me great pleasure to inform the House in all of Ontario that for the first time in history, a Canadian crew chief has won the NASCAR Cup Series Championship. Wow. Cole Perron from Mount Bridges and his Furniture Row Racing Team clinched the title at the Homestead Miami Speedway on November 19th after winning seven other races during the 2017 season. Cole began his racing career at Delaware Speedway when he was only six years old. As a driver, he was a three-time Canadian National Kart Racing Champion and raced in the Cascar Super Series. He eventually made the move to the U.S. and used his University of Waterloo Education to transition from being a driver to working on racing crews as an engineer. He became crew chief for the Furniture Row Team in 2015, a leadership role that really shows how respected and trusted Cole is in the sport. Their Cup Series victory came after a year marked by professional victories and personal tragedies for Cole and his racing team. Long pegged his underdogs, their success this season is a testament to their skill, talent and perseverance.  And I also want to thank Cole for bringing a new level of excitement and pride to the Canadian racing community and especially to Lampton Kent Middlesex. Thank you. Thank you for the member of status, the member from Davenport. Thank you, Speaker. I rise today to inform the House of the completion of a critical project in my riding of Davenport. Last Thursday I was at the Abrigo Center to announce and open the construction of a new elevator to allow seniors and other people with mobility issues to access more of the fantastic programming that the Abrigo Center offers. I've been privileged to represent Davenport because organizations that are as great as the Abrigo are few and far between in this province and few have been serving their communities for so long. For over 25 years the doors of the Abrigo Center have been open to selflessly serve our neighbors and to make Davenport the best community it can be. But there was one thing that stood in the way of it serving even more community members and that was the lack of an elevator. And every time I visited Abrigo the seniors would always tell me of their need to have an elevator. That's why when I announced that the Abrigo Center would be receiving $136,000 from the Ontario Trillium Foundation for this project last February I was very excited. I knew that this project would be one that made lives better for seniors in Davenport. I knew because the Abrigo Center has already empowered our seniors community to lead active and engaged lives and this elevator ensures that more seniors can participate in the Abrigo Center's programming. I also want to thank Leona, Local 183 for their generous donation to ensure that this project had the needed funding. Leona have always been an organization that gives back to the community and this project truly could not have been possible without their support. Projects like this often make the most difference in our communities. And I'm glad to report the completion of this elevator to the House. Thank you. Thank you very much Mr. Speaker. Before we talk about the Gala I was at this past Sunday December 3rd for the International Center of Human Rights their annual award ceremony. It's an independent nongovernmental organization and their objective is to develop the means and methodology for establishing democracy and human rights protections. The president is Dr. Buzari and the director is Mr. Adeshir Zarizeda and Dr. Kamilia Mirdami a really really bright young woman was the emcee the minister of research innovation and science was there. Ari Moghini who is one of my volunteers taught me to greet everybody with Darudbaar Shaba which is greetings to all in Farsi and they celebrated Professor Payam Arkavan who's from the Baha'i and the Human Rights Award went to MP James Bazan and Tony Clement was there to speak as well Mr. Speaker and I just want to say that Shivaloi Majundar from the Institute said and I quote real leadership means doing what we say and ensuring what we say is heard in the deepest recesses of the darkest prisons it means a line with those who dare to confront the terror of Hezbollah and Hamas it means acting and acting now on behalf of the voiceless whose hope hinges on our capacity for moral clarity and not the cowardice of moral equivalence and I was very proud to be there to represent Thornhill I was happy to see Councillor James from Toronto City Council there as well and I was glad to speak on behalf of the Yazidis and other persecuted minorities thank you Mr. Speaker I thank all members for their statements it's there


Welcome. It's the 8th of September 2023. This is Jenkins documentation office hours. Topics I've got on the list for today. Google summer of code. Plug in bill of materials version selection, Java and Jenkins. And existing requirements support policy and DevOps world tour. This one's actually done in terms of a blog post anything else Chris that you want to add to the list. Nope. Okay. All right. Well, so then let's look at dog at Google summer of code first. So Docker compose as far as I can tell. This will need to this will be. It's complete. As a project needs more work to do. And include in the documentation because we need container images. Yep. And a report containers and a repository to host those containers. And jobs to maintain them. Right Jenkins jobs to maintain them. And those need the infra team and we can hope during Hacktoberfest. I don't think we're going to get them in September because we've got so many other things in for in for is doing. The vision documentation this one is still in progress right still developing. Yep. So we simplify the twin for the block. So to use just check gas be Okay, say that again. So, before we're considering using a strappy back end for all right. But we've given with abandon that fine. So we now we're just going to use gas be. And good. Okay. Yeah, and get up for review. Very good. Okay. So I'm just going to say it that way use gas using gas be as the front end and get up for review. Good. Okay. Anything else that I had seen a pull request coming through pull requests are still arriving. Yep. I saw one with the blog post layout. Yeah, this morning. So we do it. I added it. I had the commits to it to update the columns further further layout. And I think we are on track to complete and who reads. Very good. Any other things that you want to highlight or should is it something you want to we would like to show us we want to show it on screen or anything like that. No, because we're we're still developing it. Okay. All right. Good. All right. Anything else on version documentation. I'm also didn't toys. I on it was I like, I think, I think from what they told me, I didn't check he said he has like fixed most of the book and things. Also for for for the drop down menu above. I can check now if you still like that. That's great. And I'm happy to happy to check we can do a test drive. Is it available on a on a site that we could go look at it from here and if not I'm okay if we if we say no we're not going to do it. It's the same link we we have before. So if you stick it in a document somewhere so you should be right so now I just need to scroll a little bit and let's go find it. Oh, it's in my it's in an archive. Hang on. I think we have to go back one. Okay. demo site. There it is. Okay, good. We'll just put that right into the page that we've currently got. Okay. Okay. And so some examples of first things first let's switch to a. I remember right. Previously he had versioning. Yes, there we go for a 2.401.3. Okay, so here we see version and now in terms of broken links. Do you have a recollection where they were there's certainly plenty of links this one. There was some booking links before so most of the menu menu items are broken top navigation so. So this one for instance. Working. Okay, still working. Okay, I need to push a little bit more. Because he told me that they're fixed. Well, and maybe they're fixed and just not deployed to the to the GitHub, the GitHub pages site. Yeah, maybe. Because from what he told me is like except for a few pages that has that I have not been developed yet. Maybe it's these that I don't know. Yeah, maybe maybe they're not done yet because they're part of the website. But the navigation so the things that were broken were from the top level here not from inside the pages. The in page navigation links seem to work just fine. Yeah, some like some of links were broken before. Left hand side. But they should be working now. Yeah, so and in in page navigation so the the chapter to chapter navigation seems to be working. Yeah, I think it's okay. Okay, so that's an internal one that's not working. All right, so. All right, because that was a link to the security pages which are over here and securities a different thing right. That one is not a version site at all that'd be a Gatsby thing. Nice. I find the layout very pleasant. This is this is looking really really good. Yeah. And it feels quite responsive coming from GitHub pages so I don't don't feel like there's any any. There's certainly no content generation when I'm when I'm viewing the page right these are just static pages. Yeah. Well, we may we may still need to fix the defense page because like the the event item. So that would be a maybe lower left hand corner. So, so which one this one events events. Ah, here we go this one. I mean it's done yet the major events. So we have to work on the calendar. So this one. Got it. But but the Google calendar is embedded as expected. Okay. Yeah. Yeah, so this card based layout isn't there yet. Hmm. That things like that for now is high coded the data, but we have to fetch us somehow from the database or from the like. Okay. Yeah. And it looks like the books layout looks quite good. Nice. Yeah. Okay this one. So should we we do it should we do it so it's like it as follows what we have right now because I I'm not sure we should do it this way. See I like I like the layout of the current page better for that one personally now. I'm I'm opened other people's feedback but for me this one. I find more readable. I think so too. Yeah. Then the house can to reverse the change. Now is the artwork page. Okay, so the artwork pages and isn't working yet either. No. Infection. This this looks like great progress though Chris really impressive. See about artwork. Yeah, and that's. Let's do it this way. Okay. Not yet. So that that artwork is definitely not there yet. Yeah, so I have to ask you. Great. Yeah. This is the one he was working on. And so is it is it under the same locations they'll know. I think we're going to move it to the block. So like he can just direct it to block. Like Jenkins style maybe. Okay. Very good. And success stories still should navigate there. And that one. Yeah, we're 404. Okay. So we're going to move it to the spot where it's here. No. Okay. There we are. Nice. Anything else you'd like to highlight here. I think we still need to. To work on like perfecting it. So it takes the thing is I'm kind of worried about like we may take. A bit longer. Oh, I am. I am confident we will because we certainly can't. Right. Without having the top menus working without security there, et cetera. I mean, we've got, we, there are lots of more things to do, but this is really amazing progress in terms of what we see. Right. I mean, the navigation is so much better than this. Right. I don't, Vandy did a great job on this navigation as well, but I find this much more pleasant. Yeah, me too. And it's not introducing. Okay. So on the large ones, it does give us a scroll bar. And we get. The version choices. Nice. Yep. Very good. Anything else that we should show there. Nope. Okay. Good. All right. Then the next one was get lab plugin modernization. I still need to need to do the testing. Next week I'm at DevOps world. So there's a risk that I won't get to it until the following week. Let's make a note here of that meeting canceled for next week. DevOps world tour. In New York. Great. Yep. Anything else on Google summer of code. Oh, final presentation September 14, right? Yeah. Next Thursday. Great. Okay. How about a plugin have school project? Should we talk a bit about it? Sure. Yeah. Let's, we can. So are there things that you'd like to highlight there? So we got two blog posts. Pios. So. And one was merged, even though like some updates, it's necessary because like, we got some reviews after it was merged. Okay. So the merged pull request. Does it need changes based on the feedback? Yep. Because the feedback camera bit late. Okay. Great. All right. Yep. Anything else you want to highlight there? Not much. It seems like they are doing all right. So. Because like agents just came back to the holidays. Yeah. Good. Yep. Yep. Anything else? Nope. Okay. So choosing a plugin bill of materials version. I don't have any progress from last week and a none expected. For two to four weeks. Due to other priorities, right? I'd rather test the get lab plugin first and other things are higher priority than that. Okay. Now I've got this topic here that if you're willing to go through it with me, I'd love to, to bring up a, a diagram with you and talk about the diagram.  Yeah. Sure. Okay. So here's this diagram that I've created. Trying to help me visualize. Java support in Jenkins. Yep. So let's go bigger on this so that it's more readable. So the, the concept here is that. We want to get to a model where we do. Two years, so Java releases are now coming out every two years. And they have a support lifespan of six years. So the proposal I'm, I'm suggesting here, and I'll be discussing it with the Jenkins board, Jenkins officers, and then with the developers list and the developers list. So what we want to do is that we switch, we work towards a model of two plus two plus two. Where the first two is two years of. Two years of support. The Java version, but not make it the minimum Java version required. So let's see, I need to change this wording. Daniel Beck suggested different wording. All right, right. Java 11 or newer. Or let's do it this way. Java 17 required. Okay. And this one is Java 17 or Java 21. Required. And this one is. Java 21 or Java 25. Required. And this one is Java 25 or Java 29 required. So do you see the pattern there? It's two years supported, but not required, not mandatory. Then two years when it becomes the mandatory version. And 233 required. There we go. And then two years where it's not supported.  We would have dropped support like we did with Java eight. Even before it reached end of end of support for Java itself. Because we don't want to carry the burden of always supporting three Java versions. There will be transition periods on these edges where we will probably support three Java versions for a period. But in general. Keep it simple with. A primary Java version and its next version getting ready and rotate that every two years. Does now the idea then is. One year before we make it required. We announced with an administrative monitor that, hey. We're going to make it required. Okay. Makes sense. Does. And now the other complexity here is we've got to do a transition period. So right now we're in. September of 2023, right? Where here we are in this six month window. And. In that six month window. We will in October. Turn switch on the administrative monitor warning about the end of life of Java 11. Then the proposal is we will in one year from then. In October of 2024. We will switch over and require up 17. And support Java 21. Okay. And then now the 17 life span. We will limit to one year. Rather than two years so that we can make the transition. Towards this two to two model. So with Java 17, it'll only be required for 12 months. Java 21, it'll be required for 18 months. And then when we finally get to 25, whoops. 25, it will be required for 24 months. Okay. Makes sense. And now we're on cadence 24 months, 24 months, et cetera. Any, any concerns or worries about, hey, that idea. Yeah, I'm, I'm just kind of concerned about like a four Java 17 and Java 21. Like the blue period, the job requires a bit of short on that. That's okay. And I agree this one, this one, one of the things that had been suggested by who Lee Hoffner was he suggested. Why, why don't we just skip Java 17 and jump right to Java 21. The answer is, I need to have this Java 17 transition period because enterprise customers need to transition through Java 17, particularly with enterprise customers of my employer cloud bees. So because we contribute a bunch of developers, I need that help. Okay. I think, I think we should keep Java 17 too. Good. All right. Any other, any other comments or concerns? No, just, just that, that was my concern. Great. Okay. All right. Well, that one, and I'll be bringing the topic to others for further discussion to see, okay, what, what, what other concerns are there about this idea? That's all that I had for today. Anything else from you, Chris? Not much. Okay. Then I'd propose, let's call it done. I've got some diagnosis I need to do. I'll show you the diagnosis problem. I've got to start diagnosing. But it doesn't need to be done during our time here. James Norard opened a help desk request. Back at the end of June. And he re, he opened a new one saying the same thing. But hey, this, the extensions index here. Is missing many, many extension points. And it's, it's, this is Jenkins core and Jenkins plugins providing these extension points. And the problem is tied to this tool. The back end extension indexer. Whose CI job is currently broken. Oh, okay. And not only is it CI job broken, but it's there's something even before the job was broken. That was not generating correctly. So, so there's research that needs to be done here to understand when did this break? Why did it break? What do we need to do to fix it? We had a similar problem with the pipeline steps doc generator and ended up writing some tests that found the problem and safeguarded us until we could fix it. Okay. I remember that one. Right. Exactly. And, and actually that was one that I think Vandit helped us with. No, no, no, it wasn't Vandit. It was last year's GSOC student that helped us with it. Right. Right. It was V Hanthora. Thank you. Yes. Yeah. All right. So any other topics for today? Nope. Okay. Let's call ourselves done then. Thanks very much. Okay. Thank you.