1 00:00:00,000 --> 00:00:02,200 2 00:00:02,200 --> 00:00:04,900 BERNIE LONGBOY: Good afternoon from Cambridge, Massachusetts. 3 00:00:04,900 --> 00:00:09,770 I'm Bernie Longboy, CS50 staff member and your moderator for today. 4 00:00:09,770 --> 00:00:14,020 Welcome, Harvard and Yale students, and welcome and hello to our CS50 students 5 00:00:14,020 --> 00:00:16,000 and friends from around the world. 6 00:00:16,000 --> 00:00:18,760 Today, we have the first of our tech seminars 7 00:00:18,760 --> 00:00:23,860 from our friends at Microsoft on foldable dual-screen form factors. 8 00:00:23,860 --> 00:00:28,570 I'd like to welcome Craig Dunn, software engineer on the Surface Dual team, 9 00:00:28,570 --> 00:00:33,160 and Justin Willis, software engineer, Microsoft Edge team. 10 00:00:33,160 --> 00:00:34,510 Thank you, gentlemen. 11 00:00:34,510 --> 00:00:37,540 And just one quick housekeeping note-- 12 00:00:37,540 --> 00:00:41,140 I will be moderating and taking questions in the chat room. 13 00:00:41,140 --> 00:00:42,760 All right, thank you. 14 00:00:42,760 --> 00:00:43,510 CRAIG DUNN: Great. 15 00:00:43,510 --> 00:00:44,350 Thanks, Bernie. 16 00:00:44,350 --> 00:00:45,292 Hi, everyone. 17 00:00:45,292 --> 00:00:46,750 As you said, my name is Craig Dunn. 18 00:00:46,750 --> 00:00:50,830 I'm on the Surface Duo developer experience team here at Microsoft, 19 00:00:50,830 --> 00:00:54,650 and we like to go out and talk to developers all around the world 20 00:00:54,650 --> 00:00:58,030 and get them excited about foldable devices and form factors 21 00:00:58,030 --> 00:01:02,530 and thinking about how you can get your apps into that form factor 22 00:01:02,530 --> 00:01:06,610 and deployed onto all of the different types of devices 23 00:01:06,610 --> 00:01:08,210 that are available around the world. 24 00:01:08,210 --> 00:01:09,473 And I'm joined by Justin. 25 00:01:09,473 --> 00:01:11,140 JUSTIN WILLIS: Hello, I'm Justin Willis. 26 00:01:11,140 --> 00:01:15,160 So I'm a software engineer here at Microsoft working on PWAs, 27 00:01:15,160 --> 00:01:17,830 and yeah, that's about it. 28 00:01:17,830 --> 00:01:18,580 CRAIG DUNN: Great. 29 00:01:18,580 --> 00:01:19,300 Thanks, Justin. 30 00:01:19,300 --> 00:01:24,490 Well, let me share my screen and start our presentation for the day. 31 00:01:24,490 --> 00:01:27,340 So the reason why I'm here today in part is to tell you 32 00:01:27,340 --> 00:01:29,680 about the Microsoft Surface Duo 2. 33 00:01:29,680 --> 00:01:31,720 So here it is on the screen, and also, here 34 00:01:31,720 --> 00:01:36,100 is my foldable bendy device in real life. 35 00:01:36,100 --> 00:01:41,500 Surface Duo 2 is an Android device that Microsoft makes and sells, 36 00:01:41,500 --> 00:01:45,070 and it's one of the new category of foldable devices 37 00:01:45,070 --> 00:01:50,350 that lets you fit something in your pocket that also opens up 38 00:01:50,350 --> 00:01:54,610 to provide a tablet experience for times where you want the additional screen 39 00:01:54,610 --> 00:01:59,320 real estate for productivity or multitasking or social media 40 00:01:59,320 --> 00:02:00,910 or whatever. 41 00:02:00,910 --> 00:02:04,120 But I'm not here today to sell you a Surface Duo. 42 00:02:04,120 --> 00:02:08,590 I want to tell you about how you can work on your final project apps 43 00:02:08,590 --> 00:02:11,620 and take advantage of foldable devices, like the Surface 44 00:02:11,620 --> 00:02:14,440 Duo and foldable devices from other manufacturers, 45 00:02:14,440 --> 00:02:19,030 to create an interesting user experience for whatever your final project might 46 00:02:19,030 --> 00:02:24,430 be, building on the skills that you've learned throughout CS50. 47 00:02:24,430 --> 00:02:28,210 So an overall agenda-- foldable agenda, if you will-- 48 00:02:28,210 --> 00:02:32,290 is I want to tell a little bit of a story about responsive design 49 00:02:32,290 --> 00:02:34,600 because it's the principles of responsive design 50 00:02:34,600 --> 00:02:38,650 that we're going to grow from how you would currently 51 00:02:38,650 --> 00:02:41,740 support different screen sizes and different devices 52 00:02:41,740 --> 00:02:44,920 and bring that over to foldables, whether you're 53 00:02:44,920 --> 00:02:47,670 using CSS and HTML or JavaScript. 54 00:02:47,670 --> 00:02:49,420 I'm going to tell you about how you can do 55 00:02:49,420 --> 00:02:53,390 this just in the browser on your computer that you already have, 56 00:02:53,390 --> 00:02:55,930 whether it's Mac or Windows or Linux. 57 00:02:55,930 --> 00:03:00,850 Justin's going to tell us about how you can actually take web apps and the web 58 00:03:00,850 --> 00:03:05,470 skills that you've been learning and actually build an app that you can put 59 00:03:05,470 --> 00:03:07,210 on iOS, that you can put on Android. 60 00:03:07,210 --> 00:03:09,880 You can actually make an app that goes in the App Store. 61 00:03:09,880 --> 00:03:10,510 It can be free. 62 00:03:10,510 --> 00:03:12,520 You could charge $0.99 for it. 63 00:03:12,520 --> 00:03:16,810 But it's a way to leverage the skills that you've learned this semester 64 00:03:16,810 --> 00:03:20,710 and get reach not only from people on their browsers, 65 00:03:20,710 --> 00:03:23,330 but people on their phones as well. 66 00:03:23,330 --> 00:03:26,830 And I'll finish up with a pile of links that you can take away and work 67 00:03:26,830 --> 00:03:32,590 on later, guidance for how to design apps for foldable devices, 68 00:03:32,590 --> 00:03:37,270 docs that Microsoft provides on how to do this all with web technology, 69 00:03:37,270 --> 00:03:40,510 and I'll also mention just briefly the fact that, 70 00:03:40,510 --> 00:03:45,550 if you're not down with HTML and CSS and JavaScript-- like you're into Kotlin, 71 00:03:45,550 --> 00:03:47,630 or you're into one of the other languages-- 72 00:03:47,630 --> 00:03:51,490 we also have support for you to pick up on those languages 73 00:03:51,490 --> 00:03:56,720 and take advantage of foldable devices with them as well. 74 00:03:56,720 --> 00:03:58,250 So let me get started. 75 00:03:58,250 --> 00:04:01,540 This is the complete set of tooling, like I just mentioned, 76 00:04:01,540 --> 00:04:03,010 that we've got covered. 77 00:04:03,010 --> 00:04:06,460 So no matter what language is your favorite, 78 00:04:06,460 --> 00:04:09,760 we can help you get your app onto foldable devices. 79 00:04:09,760 --> 00:04:12,460 But highlighted there, the web chunk-- 80 00:04:12,460 --> 00:04:14,899 that's really what I'm going to focus on today. 81 00:04:14,899 --> 00:04:16,899 You can see the URL at the bottom of the screen, 82 00:04:16,899 --> 00:04:19,190 but don't feel like you need to grab that and type it in now, 83 00:04:19,190 --> 00:04:21,357 because there'll be heaps of opportunities and links 84 00:04:21,357 --> 00:04:25,850 I'll share throughout the presentation and summary at the end. 85 00:04:25,850 --> 00:04:31,780 So let me start on my story about responsive design. 86 00:04:31,780 --> 00:04:34,150 Many folks, when they start building an app-- 87 00:04:34,150 --> 00:04:37,903 it makes sense that you're building and testing and optimizing 88 00:04:37,903 --> 00:04:39,820 for the computer that's right in front of you, 89 00:04:39,820 --> 00:04:42,910 and for many of us that's a laptop much like this. 90 00:04:42,910 --> 00:04:47,140 And back when the web first started in the '90s, 91 00:04:47,140 --> 00:04:51,490 that was the common form factor, and it was only 1,024 pixels wide. 92 00:04:51,490 --> 00:04:53,630 And a lot of websites looked exactly the same, 93 00:04:53,630 --> 00:04:57,850 and people didn't really think too much about a bigger or smaller screen. 94 00:04:57,850 --> 00:04:59,920 Of course, that changed. 95 00:04:59,920 --> 00:05:05,180 Particularly in the early 2000s, bigger screens, 96 00:05:05,180 --> 00:05:09,410 multiple screens came out, as well as smaller screens, so phone devices. 97 00:05:09,410 --> 00:05:12,440 And initially, folks were like, oh, shoot, 98 00:05:12,440 --> 00:05:14,810 I need to build three versions of my website. 99 00:05:14,810 --> 00:05:17,630 So there's this huge one that acts like a poster, 100 00:05:17,630 --> 00:05:20,780 the one that works on the laptop, and then this mini version that 101 00:05:20,780 --> 00:05:25,070 works on a phone, and a lot of effort went into projecting and writing 102 00:05:25,070 --> 00:05:30,660 HTML and all of this stuff two or three different times to make this work. 103 00:05:30,660 --> 00:05:33,930 Of course, while people are doing that, the web was growing rapidly, 104 00:05:33,930 --> 00:05:35,990 and the number of devices was increasing. 105 00:05:35,990 --> 00:05:38,780 Nowadays, you can look at the web on your TV. 106 00:05:38,780 --> 00:05:41,210 You can look it through your game console. 107 00:05:41,210 --> 00:05:45,020 And while I haven't seen the web projected in a lot of cars, 108 00:05:45,020 --> 00:05:47,180 except for maybe the Tesla, there's a lot 109 00:05:47,180 --> 00:05:49,070 of apps that even appear on car dashboards. 110 00:05:49,070 --> 00:05:51,170 So there's a lot of different screen sizes 111 00:05:51,170 --> 00:05:54,740 that you want to start thinking about to design your app, 112 00:05:54,740 --> 00:05:57,350 but all of those screen sizes also present 113 00:05:57,350 --> 00:06:00,020 opportunities for cool app ideas. 114 00:06:00,020 --> 00:06:02,270 So when you're thinking about your final project, 115 00:06:02,270 --> 00:06:05,805 maybe you can come up with an app idea that's focused on one of those screens. 116 00:06:05,805 --> 00:06:08,930 Maybe something that works just for dashboards, something that works really 117 00:06:08,930 --> 00:06:11,540 well for mobile phones, something that works 118 00:06:11,540 --> 00:06:15,630 great in the TV and the entertainment system in people's houses. 119 00:06:15,630 --> 00:06:20,750 So all of these screens presented a great opportunity, 120 00:06:20,750 --> 00:06:23,990 but when you were building your website for each screen, 121 00:06:23,990 --> 00:06:27,060 it became a lot of work. 122 00:06:27,060 --> 00:06:28,230 So here's a video. 123 00:06:28,230 --> 00:06:29,990 I hope it comes out OK, but I'll do a demo 124 00:06:29,990 --> 00:06:36,890 in a bit that shows you how one of our sites, so the documentation site, 125 00:06:36,890 --> 00:06:40,140 is responsive to different sizes. 126 00:06:40,140 --> 00:06:46,760 So the animation is a bit janky, but as the window gets narrower and then wider 127 00:06:46,760 --> 00:06:49,940 again, parts of the interface disappear. 128 00:06:49,940 --> 00:06:53,390 They get hidden behind a button, or they just disappear completely. 129 00:06:53,390 --> 00:06:58,070 And they should still be accessible when the window is narrow, 130 00:06:58,070 --> 00:07:00,290 which is effectively what it will look like 131 00:07:00,290 --> 00:07:03,450 as well when it's on a mobile device. 132 00:07:03,450 --> 00:07:07,340 But as it gets bigger, you'll see that elements reappear 133 00:07:07,340 --> 00:07:09,140 and take up the additional space. 134 00:07:09,140 --> 00:07:12,770 So the content, which is the raison d'etre of this slide, 135 00:07:12,770 --> 00:07:17,360 is a middle column that's always there, but all the extras around the edge 136 00:07:17,360 --> 00:07:21,260 can start to be hidden or made smaller or disappear completely 137 00:07:21,260 --> 00:07:23,820 to adapt to that change. 138 00:07:23,820 --> 00:07:28,070 So this is, at a high level, what I mean by responsive design. 139 00:07:28,070 --> 00:07:31,850 The design is responding to changes in the device or in the window 140 00:07:31,850 --> 00:07:35,480 that it's being presented in. 141 00:07:35,480 --> 00:07:41,310 But what about this new class of devices? 142 00:07:41,310 --> 00:07:45,650 So here's a device that is a different shape to any of the others 143 00:07:45,650 --> 00:07:49,310 that we've had before because it folds in the middle. 144 00:07:49,310 --> 00:07:52,760 So it can be a small screen. 145 00:07:52,760 --> 00:07:57,000 It can be a big screen in both directions. 146 00:07:57,000 --> 00:08:00,200 But also, it has this fold in the middle that can interfere 147 00:08:00,200 --> 00:08:02,450 a little bit with what you can see. 148 00:08:02,450 --> 00:08:09,150 So how would we respond to these changes in this type of device? 149 00:08:09,150 --> 00:08:14,120 And in particular, how would we deal with the hinge and the fact 150 00:08:14,120 --> 00:08:21,170 that it's folding, and we have this new thing that hasn't existed before? 151 00:08:21,170 --> 00:08:23,660 We're going to talk about media queries because that 152 00:08:23,660 --> 00:08:26,690 is the way that we chose for web developers 153 00:08:26,690 --> 00:08:31,685 to represent this and make it available to you in your HTML and CSS, 154 00:08:31,685 --> 00:08:33,740 in the web apps that you're building. 155 00:08:33,740 --> 00:08:38,090 So I know you all have done CSS as part of the course. 156 00:08:38,090 --> 00:08:43,940 Cascading Style Sheets are a nice way to separate your presentation logic-- 157 00:08:43,940 --> 00:08:46,310 fonts and colors and all sorts of things-- 158 00:08:46,310 --> 00:08:48,600 from your HTML and your code. 159 00:08:48,600 --> 00:08:54,650 So CSS is a really nice way of building that stuff and making it easy to change 160 00:08:54,650 --> 00:08:56,150 and easy to test. 161 00:08:56,150 --> 00:09:00,265 Media queries are something-- and apologies for those of you 162 00:09:00,265 --> 00:09:01,640 that are already way ahead of me. 163 00:09:01,640 --> 00:09:05,145 I'm just going to quickly cover the background of media queries-- 164 00:09:05,145 --> 00:09:08,780 are a way that you can create or apply style sheets, 165 00:09:08,780 --> 00:09:12,200 so apply the colors and fonts and whatever, but only 166 00:09:12,200 --> 00:09:15,000 for a specific type of presentation. 167 00:09:15,000 --> 00:09:18,620 So the media, I think came from originally, is it screen media, 168 00:09:18,620 --> 00:09:19,820 or is it print-- 169 00:09:19,820 --> 00:09:21,110 IE, paper? 170 00:09:21,110 --> 00:09:23,540 Back when people printed stuff, they wanted 171 00:09:23,540 --> 00:09:27,120 to have it look different to what it looked like on the screen. 172 00:09:27,120 --> 00:09:30,830 So some examples are, you might have made a really pretty 173 00:09:30,830 --> 00:09:34,830 looking web page with colors and all sorts of stuff, 174 00:09:34,830 --> 00:09:38,600 but you didn't want to use up your blue ink when you printed it out. 175 00:09:38,600 --> 00:09:41,840 So the print media query lets you take care of that 176 00:09:41,840 --> 00:09:46,700 by removing that color only when you're print previewing or printing. 177 00:09:46,700 --> 00:09:52,520 And that concept of, we're changing what we're presenting to-- is it the screen, 178 00:09:52,520 --> 00:09:54,080 or is it a Print Preview-- 179 00:09:54,080 --> 00:09:59,690 to also be able to detect many other attributes of the display device. 180 00:09:59,690 --> 00:10:03,150 So that includes things like the width of the device, 181 00:10:03,150 --> 00:10:06,200 and that's one of the key parameters that we 182 00:10:06,200 --> 00:10:10,670 can use to create responsive views because we 183 00:10:10,670 --> 00:10:12,890 can have different things happen at different widths. 184 00:10:12,890 --> 00:10:19,040 And so the janky video you just saw was multiple different chunks 185 00:10:19,040 --> 00:10:23,570 of CSS being applied at each width so that you can make cool things happen. 186 00:10:23,570 --> 00:10:26,600 You can hide and show stuff when it's on a narrow phone 187 00:10:26,600 --> 00:10:29,840 or whether it's on a super large TV. 188 00:10:29,840 --> 00:10:35,540 So media queries are these optional chunks of styles that you can apply, 189 00:10:35,540 --> 00:10:38,330 and you can give them labels, and then they only 190 00:10:38,330 --> 00:10:40,500 apply in those certain circumstances. 191 00:10:40,500 --> 00:10:45,020 So there's two examples of the syntax here at the top. 192 00:10:45,020 --> 00:10:49,940 That's what you would put inside of a CSS file. 193 00:10:49,940 --> 00:10:51,980 In whatever CSS file you already have, you 194 00:10:51,980 --> 00:10:56,600 can create a media query chunk, which is just going to apply to print view, 195 00:10:56,600 --> 00:11:02,780 and a media chunk which is just going to apply to 600 or less views. 196 00:11:02,780 --> 00:11:05,240 And down at the bottom, I've shown kind of a throwback. 197 00:11:05,240 --> 00:11:10,640 You can also make a whole CSS file only apply via this media equals print. 198 00:11:10,640 --> 00:11:14,810 And I'm not going to really focus on that because the top way is 199 00:11:14,810 --> 00:11:17,510 more flexible, but I'm just throwing it in there for people 200 00:11:17,510 --> 00:11:18,900 to be familiar with. 201 00:11:18,900 --> 00:11:24,360 You can bring in a whole file or not based on that media parameter. 202 00:11:24,360 --> 00:11:28,130 So here's an example of a really simple print media 203 00:11:28,130 --> 00:11:31,870 query that I might have written for the HTML tag. 204 00:11:31,870 --> 00:11:33,620 It's just setting the background to white, 205 00:11:33,620 --> 00:11:39,320 so whatever styling I'd done elsewhere in my CSS, when I want to print it, 206 00:11:39,320 --> 00:11:40,220 just white. 207 00:11:40,220 --> 00:11:41,960 Don't waste my ink. 208 00:11:41,960 --> 00:11:47,180 And similarly, I've got a nav div or something, 209 00:11:47,180 --> 00:11:49,970 and I don't want to print that out because it just wastes space. 210 00:11:49,970 --> 00:11:51,650 So I'm setting the display for none. 211 00:11:51,650 --> 00:11:56,000 So this really simple print media query chunk of styles 212 00:11:56,000 --> 00:12:01,110 is going to make my output nicer for folks that want to print it. 213 00:12:01,110 --> 00:12:06,050 So here's that same website I just showed, just a regular screenshot. 214 00:12:06,050 --> 00:12:11,960 I'm using it in Edge on my laptop, and I've just 215 00:12:11,960 --> 00:12:16,760 blued out all of those elements-- the nav, the top nav, the article, 216 00:12:16,760 --> 00:12:18,740 and the "is this page helpful" stuff. 217 00:12:18,740 --> 00:12:24,140 All of those elements are inside of styles or inside of divs 218 00:12:24,140 --> 00:12:27,450 that we can just wipe away in the print media query. 219 00:12:27,450 --> 00:12:30,410 So on the right, you can see, when I do Print Preview, 220 00:12:30,410 --> 00:12:32,730 all I get is the content. 221 00:12:32,730 --> 00:12:35,510 So it's a neat way to provide functionality. 222 00:12:35,510 --> 00:12:38,450 If you know your final project is something 223 00:12:38,450 --> 00:12:42,920 that is a storefront, is helping people order food, 224 00:12:42,920 --> 00:12:46,505 and you want to do an invoice or a receipt or something, 225 00:12:46,505 --> 00:12:50,660 you just have that same view that you're showing them and hide the extra bits, 226 00:12:50,660 --> 00:12:55,020 and you've created a nice Print Preview that folks can use. 227 00:12:55,020 --> 00:12:58,700 So let's look at the next level of complexity-- 228 00:12:58,700 --> 00:13:01,130 media queries that are based on screen width. 229 00:13:01,130 --> 00:13:05,060 So Print Preview-- print media queries are an on and off kind of thing. 230 00:13:05,060 --> 00:13:08,070 You're either printing or you're not. 231 00:13:08,070 --> 00:13:10,040 But the media queries related to the width 232 00:13:10,040 --> 00:13:15,020 of the viewport are dynamic because as the screen is changing, 233 00:13:15,020 --> 00:13:20,580 or as the device is folding and unfolding, the width that is being used 234 00:13:20,580 --> 00:13:21,640 is going to change. 235 00:13:21,640 --> 00:13:26,280 So the browser is going to dynamically redraw and show and hide elements 236 00:13:26,280 --> 00:13:30,850 all based on the different styles that you put in those media queries. 237 00:13:30,850 --> 00:13:33,180 So a few examples I've thrown in here-- 238 00:13:33,180 --> 00:13:38,580 a max width of 600, you would put styles that are only for mobile. 239 00:13:38,580 --> 00:13:41,670 A min width of 768 would be styles that are 240 00:13:41,670 --> 00:13:44,250 going to be applied for a really wide-- 241 00:13:44,250 --> 00:13:48,450 laptops or desktops or whiteboards. 242 00:13:48,450 --> 00:13:51,990 And also, the third example is, well, if you don't really 243 00:13:51,990 --> 00:13:54,490 want to specify screen, that's kind of optional. 244 00:13:54,490 --> 00:13:59,380 You can just focus on, this is the width that this media query is going to use. 245 00:13:59,380 --> 00:14:04,050 So I'm just throwing out syntax there that builds on top of your existing CSS 246 00:14:04,050 --> 00:14:08,790 knowledge and, optionally, applies these classes only 247 00:14:08,790 --> 00:14:13,240 when the display meets the criteria that we have. 248 00:14:13,240 --> 00:14:16,800 So here's two views of that animation I just showed. 249 00:14:16,800 --> 00:14:20,220 I just made the browser really narrow, and that's effectively 250 00:14:20,220 --> 00:14:22,500 what a mobile user will see. 251 00:14:22,500 --> 00:14:25,080 Made the browser really wide, and that's effectively 252 00:14:25,080 --> 00:14:28,030 what you'll see on a desktop or a larger computer. 253 00:14:28,030 --> 00:14:30,840 And you'll see there's a lot more white space and elements 254 00:14:30,840 --> 00:14:35,040 on the right than on the left, and it's all controlled by media queries 255 00:14:35,040 --> 00:14:39,920 and managing and detecting the device size. 256 00:14:39,920 --> 00:14:43,280 But neither of those works exactly for foldable devices 257 00:14:43,280 --> 00:14:45,080 because we have this new thing. 258 00:14:45,080 --> 00:14:49,920 We have the hinge, and we don't have a way to express or to describe that. 259 00:14:49,920 --> 00:14:56,450 So basically, companies working on foldable devices group 260 00:14:56,450 --> 00:15:03,770 together and go to the W3C, which is the World Wide Web Consortium. 261 00:15:03,770 --> 00:15:06,380 I guarantee no one on the call has probably ever said 262 00:15:06,380 --> 00:15:07,940 the words "World Wide Web" together. 263 00:15:07,940 --> 00:15:10,990 We just don't say that anymore, but that's what it is. 264 00:15:10,990 --> 00:15:16,520 And we work through proposals of how this could work across companies that 265 00:15:16,520 --> 00:15:20,780 implement browsers, and this process has been going on for over a year 266 00:15:20,780 --> 00:15:24,230 as these foldable devices have started to be on sale. 267 00:15:24,230 --> 00:15:28,820 And we currently have availability of these APIs in Microsoft Edge 268 00:15:28,820 --> 00:15:31,640 and in Google Chrome, and there's other browsers obviously, 269 00:15:31,640 --> 00:15:34,220 like Firefox and Safari and whomever. 270 00:15:34,220 --> 00:15:36,980 These are standards that are in the open web 271 00:15:36,980 --> 00:15:41,220 that they will be able to adopt as well if they see fit. 272 00:15:41,220 --> 00:15:47,100 But you all, using Edge and Chrome, will be able to work with these standards. 273 00:15:47,100 --> 00:15:50,780 So what do these new standards look like? 274 00:15:50,780 --> 00:15:54,470 I'm going to quickly show some of the original proposal 275 00:15:54,470 --> 00:15:58,820 because, spoiler alert, we changed the proposal halfway through, 276 00:15:58,820 --> 00:16:01,790 but it's cool to see where it came from. 277 00:16:01,790 --> 00:16:07,160 We created this new media query that would only apply on foldable devices 278 00:16:07,160 --> 00:16:09,530 when there was a fault. 279 00:16:09,530 --> 00:16:15,080 So when your website is on this phone, on both screens, 280 00:16:15,080 --> 00:16:17,402 you can make these styles apply. 281 00:16:17,402 --> 00:16:20,610 So you could change the font color, or you could change the background color. 282 00:16:20,610 --> 00:16:23,000 But more importantly, you can change the layout 283 00:16:23,000 --> 00:16:25,280 to move stuff to either side of the hinge 284 00:16:25,280 --> 00:16:31,410 or do some other neat transformations for when you're on a foldable device. 285 00:16:31,410 --> 00:16:35,750 And you'll know if it's horizontal or vertical. 286 00:16:35,750 --> 00:16:39,800 So really simple addition to the API that lets people 287 00:16:39,800 --> 00:16:42,710 take advantage of foldable devices. 288 00:16:42,710 --> 00:16:45,950 We also added environment variables, and this 289 00:16:45,950 --> 00:16:51,590 is part of CSS that lets you get specific values for the device. 290 00:16:51,590 --> 00:16:54,560 So common ones would be just the width and height of the screen, things 291 00:16:54,560 --> 00:16:55,650 that you want to get. 292 00:16:55,650 --> 00:17:00,150 But we provided the way to find out the coordinates of the hinge 293 00:17:00,150 --> 00:17:04,700 so that you can do specific layouts that care about where the hinge is 294 00:17:04,700 --> 00:17:07,560 and where it sits in relation to your content. 295 00:17:07,560 --> 00:17:10,460 So we created these fold left, top, width, height, 296 00:17:10,460 --> 00:17:16,160 and you can combine those with the media queries to create interesting layouts. 297 00:17:16,160 --> 00:17:17,540 And we didn't forget JavaScript. 298 00:17:17,540 --> 00:17:20,900 We added just one new method, which will return when you're 299 00:17:20,900 --> 00:17:23,910 in JavaScript, the shape of the screen. 300 00:17:23,910 --> 00:17:27,380 So if there's two rectangles with a hinge in the middle, 301 00:17:27,380 --> 00:17:30,350 it'll give you those two rectangles, give you the coordinates. 302 00:17:30,350 --> 00:17:33,620 So you can easily extend any JavaScript layout 303 00:17:33,620 --> 00:17:37,950 you're doing by using this function. 304 00:17:37,950 --> 00:17:41,370 So here's a quick example. 305 00:17:41,370 --> 00:17:45,050 You can see the colorful boxes in the left. 306 00:17:45,050 --> 00:17:49,100 That's a screenshot of a dual screen web browser, 307 00:17:49,100 --> 00:17:52,820 and you can see the yellow box sits across the screen 308 00:17:52,820 --> 00:17:56,210 and goes up against the edge and against the hinge. 309 00:17:56,210 --> 00:17:58,970 And you can see the CSS that I've snipped out, 310 00:17:58,970 --> 00:18:02,630 the width and the left properties both use 311 00:18:02,630 --> 00:18:06,800 those environment values and the calc method 312 00:18:06,800 --> 00:18:12,440 to say, the width is going to be 1/100 of the view, which is that 100 VW, 313 00:18:12,440 --> 00:18:16,340 minus the fold and the position of the fold. 314 00:18:16,340 --> 00:18:18,000 And you get a nice position. 315 00:18:18,000 --> 00:18:20,990 So each of these boxes is positioned using 316 00:18:20,990 --> 00:18:24,150 those two things we just talked about. 317 00:18:24,150 --> 00:18:28,120 So great, you think we're probably done. 318 00:18:28,120 --> 00:18:31,840 What about three folds or three screens? 319 00:18:31,840 --> 00:18:37,690 So the Surface Duo and the other devices that are on the market at the moment 320 00:18:37,690 --> 00:18:39,820 generally look like this. 321 00:18:39,820 --> 00:18:42,400 They generally have one fold. 322 00:18:42,400 --> 00:18:47,230 But as we work through this with W3C and the standards bodies, 323 00:18:47,230 --> 00:18:49,780 people started to say, well, what about when there's more 324 00:18:49,780 --> 00:18:50,980 fold what about three? 325 00:18:50,980 --> 00:18:52,357 What about four? 326 00:18:52,357 --> 00:18:54,940 What you've written, the standard that we originally proposed, 327 00:18:54,940 --> 00:18:58,670 is very limited to a single fold being described. 328 00:18:58,670 --> 00:19:03,880 So we went back to the drawing board and created this new standard. 329 00:19:03,880 --> 00:19:07,330 It's also a media query, but it is extensible. 330 00:19:07,330 --> 00:19:11,500 So you specify the number of views that you expect, and it can be two. 331 00:19:11,500 --> 00:19:12,250 It can be three. 332 00:19:12,250 --> 00:19:16,700 It can be as many as complex devices can be made. 333 00:19:16,700 --> 00:19:20,710 So now, we can describe the case of a triple screen 334 00:19:20,710 --> 00:19:22,840 device or a quadruple screen device. 335 00:19:22,840 --> 00:19:28,240 But for now, we're really just focused on Surface Duo and the other foldables 336 00:19:28,240 --> 00:19:31,260 that are going to use number two. 337 00:19:31,260 --> 00:19:32,790 So we updated the media query. 338 00:19:32,790 --> 00:19:34,930 We updated the environment variables. 339 00:19:34,930 --> 00:19:38,160 So the environment variables, now, rather than being a single value, 340 00:19:38,160 --> 00:19:41,170 are also index with an x and y-coordinate 341 00:19:41,170 --> 00:19:44,700 so that you can tell it which screen you're looking at. 342 00:19:44,700 --> 00:19:50,610 And I've just listed out the ones that we care about here, 00-10, 00-01, 343 00:19:50,610 --> 00:19:54,258 and you can now query for any of the values on the screen, 344 00:19:54,258 --> 00:19:56,550 like the points and the coordinates that you might need 345 00:19:56,550 --> 00:19:59,430 to do a nice layout using these values. 346 00:19:59,430 --> 00:20:02,520 And even though we don't care about it right now, 347 00:20:02,520 --> 00:20:04,950 that can be extended for many, many screens-- 348 00:20:04,950 --> 00:20:08,010 devices in the future. 349 00:20:08,010 --> 00:20:10,890 And we didn't change the JavaScript much because it already 350 00:20:10,890 --> 00:20:12,450 returned a collection of rectangles. 351 00:20:12,450 --> 00:20:17,200 But we did change the name of it in response to developer feedback as well. 352 00:20:17,200 --> 00:20:21,150 So we quickly just looked at our first guess 353 00:20:21,150 --> 00:20:26,580 of what a good API would look like, and then just now, the results of a year 354 00:20:26,580 --> 00:20:31,320 of being in beta and receiving customer feedback and developer feedback 355 00:20:31,320 --> 00:20:33,900 and settling on these APIs, which are ultimately 356 00:20:33,900 --> 00:20:37,380 going to be stable and available in Edge and Chrome 357 00:20:37,380 --> 00:20:43,110 and whatever other browsers choose to support it. 358 00:20:43,110 --> 00:20:46,560 BERNIE LONGBOY: Craig, can I go ahead and read a couple of questions? 359 00:20:46,560 --> 00:20:48,040 CRAIG DUNN: Yeah, please. 360 00:20:48,040 --> 00:20:52,230 BERNIE LONGBOY: So the first one is, if I have an old phone, 361 00:20:52,230 --> 00:20:57,240 like an iPhone 4 and the like, could the programmer optimize it? 362 00:20:57,240 --> 00:20:58,650 CRAIG DUNN: Yeah, for sure. 363 00:20:58,650 --> 00:21:03,090 So one of the beauties of the media queries and the way they work 364 00:21:03,090 --> 00:21:09,720 is you can specify the width values that you care about to a very fine degree. 365 00:21:09,720 --> 00:21:11,550 So the original iPhone 4-- 366 00:21:11,550 --> 00:21:15,180 I can't remember off the top of my head how many pixels wide that screen is. 367 00:21:15,180 --> 00:21:19,740 But you could absolutely create a view, a set of styles, 368 00:21:19,740 --> 00:21:23,435 that would apply for that old and narrower phone, which is maybe-- 369 00:21:23,435 --> 00:21:26,237 370 00:21:26,237 --> 00:21:27,570 oh, gosh, I can't even remember. 371 00:21:27,570 --> 00:21:32,460 But it's relatively narrow compared to modern phones like the Surface Duo, 372 00:21:32,460 --> 00:21:37,380 but also the big Samsung flagship models and even the iPhone 13 Pro. 373 00:21:37,380 --> 00:21:39,130 Those are big phones now. 374 00:21:39,130 --> 00:21:43,170 So you can absolutely use media queries to target the smaller one 375 00:21:43,170 --> 00:21:46,680 and make a really nice layout that works for those phones 376 00:21:46,680 --> 00:21:49,140 and then allow the works for the slightly bigger phones, 377 00:21:49,140 --> 00:21:52,660 and then obviously, the layout that works for desktop and so on. 378 00:21:52,660 --> 00:21:54,300 But you can choose-- 379 00:21:54,300 --> 00:21:58,350 they're very flexible in terms of how many media queries you write 380 00:21:58,350 --> 00:22:01,742 and how you adapt your layout according to the device. 381 00:22:01,742 --> 00:22:04,200 BERNIE LONGBOY: And that question was from-- and I'm sorry. 382 00:22:04,200 --> 00:22:07,330 I'm going to do my best to pronounce names-- 383 00:22:07,330 --> 00:22:10,420 [INAUDIBLE] 384 00:22:10,420 --> 00:22:13,240 This next question is from [INAUDIBLE]. 385 00:22:13,240 --> 00:22:16,270 386 00:22:16,270 --> 00:22:20,860 Again, please, I apologize already for my mispronunciation. 387 00:22:20,860 --> 00:22:25,430 Does a programming for folding devices work for the normal devices? 388 00:22:25,430 --> 00:22:26,590 Thank you. 389 00:22:26,590 --> 00:22:30,640 CRAIG DUNN: Yeah, so that really comes back to the way 390 00:22:30,640 --> 00:22:33,160 that media queries work, is that they only 391 00:22:33,160 --> 00:22:36,250 apply when the device supports them. 392 00:22:36,250 --> 00:22:39,770 And when the device doesn't support them, they just get ignored. 393 00:22:39,770 --> 00:22:45,670 So you can add these media queries to your web page and on a desktop, 394 00:22:45,670 --> 00:22:46,368 on that iPhone. 395 00:22:46,368 --> 00:22:48,910 Pretty much anywhere else, they're just going to get ignored. 396 00:22:48,910 --> 00:22:50,210 They just get skipped over. 397 00:22:50,210 --> 00:22:52,810 So basically, you create a default layout, 398 00:22:52,810 --> 00:22:55,450 which is what most of your customers will see, 399 00:22:55,450 --> 00:22:58,900 and then you add the media queries that you want to address, 400 00:22:58,900 --> 00:23:01,480 whether it's for foldable devices, or whether it's 401 00:23:01,480 --> 00:23:03,490 super narrow or super wide screens. 402 00:23:03,490 --> 00:23:05,440 And you tweak the styles. 403 00:23:05,440 --> 00:23:08,890 You make changes to your default that adapt 404 00:23:08,890 --> 00:23:12,220 to that particular device or that particular change 405 00:23:12,220 --> 00:23:13,190 that you want to make. 406 00:23:13,190 --> 00:23:18,580 So yeah, you can absolutely add these media queries, and Safari, for example, 407 00:23:18,580 --> 00:23:21,400 I don't think it supports them right now because Apple 408 00:23:21,400 --> 00:23:23,470 doesn't have a foldable device. 409 00:23:23,470 --> 00:23:25,750 But it's not going to screw it up at all. 410 00:23:25,750 --> 00:23:28,480 There'll be other media queries that it's skipping over 411 00:23:28,480 --> 00:23:30,882 as well, like the print media query. 412 00:23:30,882 --> 00:23:32,590 The iPhone doesn't care about that either 413 00:23:32,590 --> 00:23:34,610 unless you're doing a PDF generation. 414 00:23:34,610 --> 00:23:41,440 So it falls back to that underlying way that CSS works, but it's very low risk. 415 00:23:41,440 --> 00:23:43,430 You can add this stuff in. 416 00:23:43,430 --> 00:23:46,300 BERNIE LONGBOY: And this is just a comment from Ahmed Hafez. 417 00:23:46,300 --> 00:23:49,000 It's possible, but no one would care for old stuff, 418 00:23:49,000 --> 00:23:51,550 so just companies or programmers stop supporting 419 00:23:51,550 --> 00:23:57,130 that version of phones or software and concentrate more on the new versions. 420 00:23:57,130 --> 00:23:59,150 CRAIG DUNN: Yeah, people do tend to do that, 421 00:23:59,150 --> 00:24:01,390 but again, the benefit of this media stuff 422 00:24:01,390 --> 00:24:05,890 and the way it can fall back gracefully means that it probably is still 423 00:24:05,890 --> 00:24:07,990 going to work on that older phone. 424 00:24:07,990 --> 00:24:11,590 If you thought about the width layout stuff, it'll still work, 425 00:24:11,590 --> 00:24:14,220 and when you add this new bits, it'll work on the new phones, 426 00:24:14,220 --> 00:24:15,970 but it's not going to hurt your old stuff. 427 00:24:15,970 --> 00:24:21,790 So the W3C generally puts so much thought into the way 428 00:24:21,790 --> 00:24:24,550 that web standards evolve to make sure that they're generally 429 00:24:24,550 --> 00:24:27,310 backwards compatible. 430 00:24:27,310 --> 00:24:31,270 For us, it was a real pain because we've had a year long process of working 431 00:24:31,270 --> 00:24:33,670 through this standard building, but the result 432 00:24:33,670 --> 00:24:37,990 is something that's both future proof in terms of it works for multiple screens, 433 00:24:37,990 --> 00:24:41,140 but also backwards compatible in that it doesn't break anyone else 434 00:24:41,140 --> 00:24:43,090 when you add it. 435 00:24:43,090 --> 00:24:47,110 JUSTIN WILLIS: I would also like to add that it's-- 436 00:24:47,110 --> 00:24:49,707 so one of the biggest things about the web-- and I'll 437 00:24:49,707 --> 00:24:52,540 argue that I don't think there's another app platform out there that 438 00:24:52,540 --> 00:24:53,980 lets you do this. 439 00:24:53,980 --> 00:24:58,210 But yeah, not only can you support all different kinds of devices, including 440 00:24:58,210 --> 00:25:00,220 foldable devices and stuff, with just some 441 00:25:00,220 --> 00:25:05,680 CSS, but it also totally spans an iPhone 4, for example. 442 00:25:05,680 --> 00:25:10,480 You don't need any specific power of device, 443 00:25:10,480 --> 00:25:12,070 or it has to be a modern device. 444 00:25:12,070 --> 00:25:15,700 The coolest thing is the HTML and, just like Craig said, 445 00:25:15,700 --> 00:25:18,370 web standards, even the CSS and JavaScript 446 00:25:18,370 --> 00:25:21,880 stuff-- it's all very, very crucial to make sure 447 00:25:21,880 --> 00:25:24,850 that it keeps working on any device. 448 00:25:24,850 --> 00:25:27,560 Basically, you just need a device that has a web browser, 449 00:25:27,560 --> 00:25:31,480 and if you have a web browser, that web app or that PWA or even 450 00:25:31,480 --> 00:25:34,390 just that website will run. 451 00:25:34,390 --> 00:25:36,715 Which again, I don't-- 452 00:25:36,715 --> 00:25:40,300 with native apps, sure, they can run on older devices, 453 00:25:40,300 --> 00:25:43,690 but I will say that I think the web has the best-- 454 00:25:43,690 --> 00:25:50,470 you can really even customize your experience for older devices to make-- 455 00:25:50,470 --> 00:25:52,780 let's say it's an older screen, like an iPhone 4. 456 00:25:52,780 --> 00:25:57,850 You can do media queries all the way down to a tiny little-- 457 00:25:57,850 --> 00:26:01,930 there's a phone called the GIO phone that is basically just a flip phone, 458 00:26:01,930 --> 00:26:04,720 like we may have all had in middle school or high school, that has 459 00:26:04,720 --> 00:26:06,262 just a tiny little screen at the top. 460 00:26:06,262 --> 00:26:09,760 And you can even go all the way down to that size in media queries. 461 00:26:09,760 --> 00:26:13,360 So yeah, it's really cool that it's so extensible. 462 00:26:13,360 --> 00:26:16,570 CRAIG DUNN: So I'm just going to switch over and talk about how-- 463 00:26:16,570 --> 00:26:20,650 we're talking about foldable devices like this, and other ones, 464 00:26:20,650 --> 00:26:23,140 and how you can build and adapt your web apps for them. 465 00:26:23,140 --> 00:26:28,090 But maybe, you're not going to go and buy Surface Duo right away in order 466 00:26:28,090 --> 00:26:28,860 to do this. 467 00:26:28,860 --> 00:26:37,870 And the good news is that is no problem because the support is built right 468 00:26:37,870 --> 00:26:41,050 into Edge and Chrome. 469 00:26:41,050 --> 00:26:46,750 So when you're in Microsoft Edge or when you're in Google Chrome, 470 00:26:46,750 --> 00:26:49,150 this might be a trick that you know, it might not be, 471 00:26:49,150 --> 00:26:53,170 but there's really sophisticated developer tools. 472 00:26:53,170 --> 00:26:56,620 So you can hit F12, you can hit Control-Shift-I, 473 00:26:56,620 --> 00:27:01,090 or you can find the menu and go down to Developer Tools, 474 00:27:01,090 --> 00:27:03,430 and this is going to unlock a ton of stuff 475 00:27:03,430 --> 00:27:07,090 that's going to be super helpful for working with CSS, 476 00:27:07,090 --> 00:27:11,480 working with media queries, and working with foldable devices. 477 00:27:11,480 --> 00:27:15,100 So just quickly, when you're in developer tools, 478 00:27:15,100 --> 00:27:18,400 there is a button here that's going to be a little hard for you all to see. 479 00:27:18,400 --> 00:27:22,790 It's in the top, and it lets you toggle device emulation. 480 00:27:22,790 --> 00:27:27,490 So when you turn that on, you get this new nav along the top here. 481 00:27:27,490 --> 00:27:31,330 And also, when you're in the default responsive mode, 482 00:27:31,330 --> 00:27:36,430 see how I can just drag the viewport, and it's 483 00:27:36,430 --> 00:27:39,280 changing because I've done some of this media queries that I said. 484 00:27:39,280 --> 00:27:44,590 So I can simulate really easily what happens when a view changes. 485 00:27:44,590 --> 00:27:49,420 But that is not all because, in this list, 486 00:27:49,420 --> 00:27:53,600 there's actually a Surface Duo entry, and like I said, 487 00:27:53,600 --> 00:27:55,030 this is available in Chrome. 488 00:27:55,030 --> 00:27:56,570 It's available in Edge. 489 00:27:56,570 --> 00:28:02,320 And when you enable that choice, you get a new toggle dual screen mode, 490 00:28:02,320 --> 00:28:06,207 and now, we have a simulator for the Surface Duo device right in Edge. 491 00:28:06,207 --> 00:28:08,290 So all of the media queries and stuff that we just 492 00:28:08,290 --> 00:28:12,790 talked about, you can build and test on a desktop with the browser 493 00:28:12,790 --> 00:28:14,050 that you're already using. 494 00:28:14,050 --> 00:28:18,520 You don't need to go and buy a foldable device like the Surface Duo just 495 00:28:18,520 --> 00:28:20,770 to get started. 496 00:28:20,770 --> 00:28:24,680 They're fun to have, but you can do everything right in the browser. 497 00:28:24,680 --> 00:28:29,410 So you can see that I can spin it around and see the vertical view. 498 00:28:29,410 --> 00:28:33,490 And I can click this dual screen button, which 499 00:28:33,490 --> 00:28:36,160 is mimicking what would happen if it was like this, 500 00:28:36,160 --> 00:28:38,230 or I was folding and unfolding it. 501 00:28:38,230 --> 00:28:43,650 502 00:28:43,650 --> 00:28:45,270 Yeah, it's looking pretty good. 503 00:28:45,270 --> 00:28:50,070 So the page that we're on is a URL that I'm going to share later. 504 00:28:50,070 --> 00:28:58,740 It's aka.ms/cs50demo, and it actually has a collection of web samples that 505 00:28:58,740 --> 00:29:00,160 we're going to look at right now. 506 00:29:00,160 --> 00:29:04,150 But the first one I wanted to show you is just this page. 507 00:29:04,150 --> 00:29:07,320 So you'll notice that, when it's not folded, 508 00:29:07,320 --> 00:29:14,160 the content is all one on top of the other, and when it is folded, 509 00:29:14,160 --> 00:29:18,330 the dual screen stuff flicks over to the right. 510 00:29:18,330 --> 00:29:23,580 That's cool because we can actually see how that happens using developer tools. 511 00:29:23,580 --> 00:29:27,120 So developer tools also have this Inspect Element, 512 00:29:27,120 --> 00:29:30,570 which you might have used before, and when I click on that 513 00:29:30,570 --> 00:29:36,730 and then click on this region, I can see now, over on the right of that screen, 514 00:29:36,730 --> 00:29:40,570 these are the CSS elements that are being applied. 515 00:29:40,570 --> 00:29:45,040 So in real time, I can see what the browser is processing. 516 00:29:45,040 --> 00:29:50,600 So it's processing the fact that we have a screen spanning media query, 517 00:29:50,600 --> 00:29:53,840 and it's processing that the left calc is 518 00:29:53,840 --> 00:29:55,820 using the environment variables we had. 519 00:29:55,820 --> 00:29:59,688 And I can turn it off and see what happens. 520 00:29:59,688 --> 00:30:00,980 Oh, it's screwing up my layout. 521 00:30:00,980 --> 00:30:02,960 Well, that's obvious. 522 00:30:02,960 --> 00:30:08,060 But I can interactively test and play with how this layout works 523 00:30:08,060 --> 00:30:12,170 on a dual screen device, and if I unfold it, it will change, 524 00:30:12,170 --> 00:30:17,480 and it'll show that foldable class is no longer being applied. 525 00:30:17,480 --> 00:30:20,010 That media query isn't being applied in this case. 526 00:30:20,010 --> 00:30:24,860 So you can really jump into and debug and understand 527 00:30:24,860 --> 00:30:28,610 how these styles are being applied right in the browser using 528 00:30:28,610 --> 00:30:34,100 the built-in developer tools, which is really flexible. 529 00:30:34,100 --> 00:30:36,770 So let me just jump in to the box's demo, 530 00:30:36,770 --> 00:30:39,020 which you saw a screenshot of before. 531 00:30:39,020 --> 00:30:43,400 And yeah, we can do the same thing using the Inspect Element. 532 00:30:43,400 --> 00:30:47,390 I can click on that blue box, and then over here on the right, 533 00:30:47,390 --> 00:30:50,720 again, it's showing us that the media query is being applied, 534 00:30:50,720 --> 00:30:52,220 the single fold vertical. 535 00:30:52,220 --> 00:30:56,720 The left position is being calculated with the environment variable, 536 00:30:56,720 --> 00:31:01,730 and yeah, if I turn it off, I can see that the box jumps around 537 00:31:01,730 --> 00:31:05,010 because when I've turned it off, the style isn't being applied. 538 00:31:05,010 --> 00:31:07,400 And when I turn it on, the style is being applied. 539 00:31:07,400 --> 00:31:11,780 Now, all of the styles in this example are only 540 00:31:11,780 --> 00:31:18,740 being applied when the page is on a dual screen, so when I toggle off, 541 00:31:18,740 --> 00:31:19,790 the boxes just sit. 542 00:31:19,790 --> 00:31:22,220 So to the question earlier about whether it 543 00:31:22,220 --> 00:31:25,680 would be able to work on iPhones or other devices, 544 00:31:25,680 --> 00:31:29,120 this is an example where the dual screen styles just 545 00:31:29,120 --> 00:31:32,850 get ignored when you're not on a dual screen device. 546 00:31:32,850 --> 00:31:35,840 And the minute I fold it again, the boxes 547 00:31:35,840 --> 00:31:38,330 will jump around to where I positioned them 548 00:31:38,330 --> 00:31:41,120 because it detected that it's on a dual screen device. 549 00:31:41,120 --> 00:31:45,230 So super easy, and this is the main demo I 550 00:31:45,230 --> 00:31:50,990 show because it lets people click around and understand how we can make elements 551 00:31:50,990 --> 00:31:54,530 attach to the hinge, go to the sides, just adapt themselves 552 00:31:54,530 --> 00:31:57,022 for the dual screen layout. 553 00:31:57,022 --> 00:31:58,730 I don't want to run out of time, but I do 554 00:31:58,730 --> 00:32:01,070 want to show that there's quite a few examples here. 555 00:32:01,070 --> 00:32:04,070 I suspect maybe Justin's is going to share the whiteboard one because he 556 00:32:04,070 --> 00:32:06,650 built it, so I'll skip over that. 557 00:32:06,650 --> 00:32:09,860 But there's a few different samples here that 558 00:32:09,860 --> 00:32:13,980 could be an inspiration, again, for final projects. 559 00:32:13,980 --> 00:32:19,580 So here's a photo viewer, and when it's on a regular device, 560 00:32:19,580 --> 00:32:22,220 it's just a massive grid of photos. 561 00:32:22,220 --> 00:32:25,250 And when you click on one, it just opens up 562 00:32:25,250 --> 00:32:32,270 over the top, which is a pretty standard way that an app would work on a device 563 00:32:32,270 --> 00:32:33,710 or on any phone. 564 00:32:33,710 --> 00:32:38,940 And when we move it onto dual screen, you have a list showing on one screen, 565 00:32:38,940 --> 00:32:43,320 and when you click, it zooms in and takes over the whole other screen. 566 00:32:43,320 --> 00:32:46,220 So that's an example of changing the user interface 567 00:32:46,220 --> 00:32:49,828 or changing what your app does or your web page does based on the fact 568 00:32:49,828 --> 00:32:50,870 that there's two screens. 569 00:32:50,870 --> 00:32:54,230 You can do something cool that you couldn't really 570 00:32:54,230 --> 00:32:59,850 do before-- fully see the list, but also see the image zoomed in next to it. 571 00:32:59,850 --> 00:33:03,080 There's also a Battleship game. 572 00:33:03,080 --> 00:33:06,230 Everyone sees these foldable devices, and Battleship 573 00:33:06,230 --> 00:33:08,600 is the first thing they think of wanting to play 574 00:33:08,600 --> 00:33:11,000 just because the shape looks the same. 575 00:33:11,000 --> 00:33:13,010 So this is a really neat-- 576 00:33:13,010 --> 00:33:14,373 all of these are open-source. 577 00:33:14,373 --> 00:33:16,790 And in fact, these are not all samples built by Microsoft. 578 00:33:16,790 --> 00:33:21,368 They're built by the community that's interested in foldable devices. 579 00:33:21,368 --> 00:33:24,410 So I'm not going to play against the computer there because I might lose. 580 00:33:24,410 --> 00:33:27,080 581 00:33:27,080 --> 00:33:30,500 But there's another one here, which is a news reader, 582 00:33:30,500 --> 00:33:36,740 and it basically gives you an experience where the articles just lay out nicely 583 00:33:36,740 --> 00:33:38,435 on a two screen device. 584 00:33:38,435 --> 00:33:42,350 One of the great use cases for these foldable devices is book. 585 00:33:42,350 --> 00:33:47,720 I use the Kindle app all the time, but reading news and stuff on that format 586 00:33:47,720 --> 00:33:49,860 also works really well. 587 00:33:49,860 --> 00:33:54,860 And the last one I'll share, again, just for inspiration as much as anything 588 00:33:54,860 --> 00:34:01,140 else, is there is this really neat Space Invaders 589 00:34:01,140 --> 00:34:09,568 game that works best in this mode, where the game goes on the top 590 00:34:09,568 --> 00:34:11,110 and the controllers go on the bottom. 591 00:34:11,110 --> 00:34:16,469 So you can play it like a Nintendo DS, and this is all HTML. 592 00:34:16,469 --> 00:34:20,267 This is a web app that someone's put together that-- 593 00:34:20,267 --> 00:34:24,030 [MAKING LASER NOISES] It's a little bit slow while I'm on Zoom, 594 00:34:24,030 --> 00:34:27,850 so I probably will die pretty quickly in this one as well. 595 00:34:27,850 --> 00:34:31,260 But those are just some examples of how people 596 00:34:31,260 --> 00:34:34,949 can think about taking an existing user interface, 597 00:34:34,949 --> 00:34:38,310 whether it's a photo gallery or a game, and think 598 00:34:38,310 --> 00:34:41,159 of something neat or new or different to do with two screens 599 00:34:41,159 --> 00:34:42,840 because you've got two screens. 600 00:34:42,840 --> 00:34:46,800 And the game, in particular, having it folded over actually 601 00:34:46,800 --> 00:34:49,120 makes it easier to play. 602 00:34:49,120 --> 00:34:52,770 So those are some ideas that I wanted to share. 603 00:34:52,770 --> 00:34:56,790 I think maybe, Justin, it's a good time for you to take over. 604 00:34:56,790 --> 00:35:02,880 I've got a slide with your URLs, but maybe you 605 00:35:02,880 --> 00:35:04,165 just want to jump straight in. 606 00:35:04,165 --> 00:35:06,540 JUSTIN WILLIS: So yeah, I'll definitely jump straight in. 607 00:35:06,540 --> 00:35:09,960 So I'm just going to do a demo that explains 608 00:35:09,960 --> 00:35:12,610 more of what Craig was talking about there, 609 00:35:12,610 --> 00:35:15,270 and then also how you can easily get started 610 00:35:15,270 --> 00:35:19,800 building one of these web apps or PWAs. 611 00:35:19,800 --> 00:35:24,000 So first, I actually just wanted to show off a little bit more of the-- 612 00:35:24,000 --> 00:35:27,390 with the two demos that I have, some of the cool depth tools things, 613 00:35:27,390 --> 00:35:31,950 and also some other ways you can take advantage of the dual screen thing. 614 00:35:31,950 --> 00:35:34,620 One thing I will like to show, though, real quick, 615 00:35:34,620 --> 00:35:38,850 is someone was talking about older devices, like an iPhone 4. 616 00:35:38,850 --> 00:35:42,570 So as you can see, I'm using Edge, but just so you all know, 617 00:35:42,570 --> 00:35:46,020 the same thing works in Chrome and other Chromium based browsers, too. 618 00:35:46,020 --> 00:35:50,130 And Firefox also has some device emulation features in their DevTools 619 00:35:50,130 --> 00:35:51,010 too. 620 00:35:51,010 --> 00:35:53,820 So you don't have to use Edge to get all of this, 621 00:35:53,820 --> 00:35:57,540 although you will need Edge for the Surface Duo stuff. 622 00:35:57,540 --> 00:36:01,227 But yeah, so as you can see, there's my app, WebBoard, which is-- 623 00:36:01,227 --> 00:36:03,060 I'm showing it running at the web right now. 624 00:36:03,060 --> 00:36:06,930 But I'll show it here just in a second running as a Windows app 625 00:36:06,930 --> 00:36:08,140 on my Windows device. 626 00:36:08,140 --> 00:36:12,840 And then also, as you can see, so I'm not showing on my Surface Duo today 627 00:36:12,840 --> 00:36:16,510 because I'm actually having an issue with it right now. 628 00:36:16,510 --> 00:36:20,110 But I wanted to show it running in this emulator at least. 629 00:36:20,110 --> 00:36:25,440 So as you can see, this is the standard view, 630 00:36:25,440 --> 00:36:27,860 so it's just a standard mobile app view. 631 00:36:27,860 --> 00:36:30,360 All the controls are at the bottom, or at least the controls 632 00:36:30,360 --> 00:36:33,068 you're going to use the most, and then some of the other controls 633 00:36:33,068 --> 00:36:36,210 are up here at the top, such as sharing. 634 00:36:36,210 --> 00:36:39,190 Also cool thing, while we're in here-- 635 00:36:39,190 --> 00:36:43,710 so while this is a PWA, and it's just mainly HTML, CSS, and JavaScript, 636 00:36:43,710 --> 00:36:46,710 or it is just CSS, HTML, and JavaScript, that 637 00:36:46,710 --> 00:36:50,320 doesn't mean that I'm limited on the features that I can do either. 638 00:36:50,320 --> 00:36:55,720 So for example there, you see I have low latency inking turned on in this PWA. 639 00:36:55,720 --> 00:36:58,650 So this is a cool API that we have in Edge and coming soon 640 00:36:58,650 --> 00:37:00,390 to other Chromium based browsers, too. 641 00:37:00,390 --> 00:37:03,660 But it enables you to do some low latency inking, which is really cool. 642 00:37:03,660 --> 00:37:09,390 Same low latency inking stuff that native applications on Windows has, 643 00:37:09,390 --> 00:37:11,790 and then you could even do stuff like sharing and stuff 644 00:37:11,790 --> 00:37:16,200 like that, all using the native Windows UI. 645 00:37:16,200 --> 00:37:18,990 And then as you can see, just like Craig was showing, 646 00:37:18,990 --> 00:37:22,950 when it goes to dual screen, I can have some special UI for that, 647 00:37:22,950 --> 00:37:28,210 and then I can even have some special UI for when it's folded the other way. 648 00:37:28,210 --> 00:37:33,420 So it's really not limited at all on the age of the device 649 00:37:33,420 --> 00:37:35,910 or the performance of the device or something like that. 650 00:37:35,910 --> 00:37:38,760 You could even go all the way down to that GIO phone 651 00:37:38,760 --> 00:37:42,190 that I was talking about, which is a really, really small device, 652 00:37:42,190 --> 00:37:45,900 and you can still have some kind of experience 653 00:37:45,900 --> 00:37:47,640 for the user that's on that device. 654 00:37:47,640 --> 00:37:49,270 So I think that's pretty cool. 655 00:37:49,270 --> 00:37:55,590 It's something I like to point out about PWAs and just web apps in general. 656 00:37:55,590 --> 00:37:59,050 So that was one demo. 657 00:37:59,050 --> 00:38:02,910 I want to show also Simple Edit is the other demo. 658 00:38:02,910 --> 00:38:06,060 So before I jump into how you could build one of these, 659 00:38:06,060 --> 00:38:08,280 I wanted to show another idea that points out 660 00:38:08,280 --> 00:38:10,960 some of the cool things you can do on the web today. 661 00:38:10,960 --> 00:38:14,880 So Simple Edit is, as the name suggests-- and again, this is the name 662 00:38:14,880 --> 00:38:15,850 that I came up with. 663 00:38:15,850 --> 00:38:20,010 I'm not a designer or a product person of any kind. 664 00:38:20,010 --> 00:38:21,360 But I can go in here. 665 00:38:21,360 --> 00:38:22,980 I could choose Photos. 666 00:38:22,980 --> 00:38:25,200 Now, the cool thing you'll see there-- 667 00:38:25,200 --> 00:38:30,450 there's no extra popup that's saying, hey, here's-- 668 00:38:30,450 --> 00:38:34,410 can't open the files or there's no file inputs or anything. 669 00:38:34,410 --> 00:38:39,840 This is using an API that is in Chromium based browsers called the File System 670 00:38:39,840 --> 00:38:41,960 Handlers API. 671 00:38:41,960 --> 00:38:45,590 So it will enable me to work with the file system 672 00:38:45,590 --> 00:38:49,800 just like any other native app could on this device. 673 00:38:49,800 --> 00:38:52,070 And then I can also open up images. 674 00:38:52,070 --> 00:38:56,105 You can see I've actually edited this one before with this application. 675 00:38:56,105 --> 00:38:57,230 There's some drawing on it. 676 00:38:57,230 --> 00:38:58,670 There are some colors. 677 00:38:58,670 --> 00:39:02,300 And yeah, I can go in here and do things like Image, Filters, which 678 00:39:02,300 --> 00:39:05,570 is going to be a little slower when I'm sharing on Zoom. 679 00:39:05,570 --> 00:39:09,560 But yeah, this is all actually image filters that are happening on the GPU 680 00:39:09,560 --> 00:39:11,270 on this device. 681 00:39:11,270 --> 00:39:13,820 Again, fancy sounding stuff, but it's actually 682 00:39:13,820 --> 00:39:17,840 all just JavaScript, HTML, and CSS, so it's pretty cool what 683 00:39:17,840 --> 00:39:20,610 you could do with a web application. 684 00:39:20,610 --> 00:39:25,250 Now, the other thing that's cool is, as Craig's been saying, all of this 685 00:39:25,250 --> 00:39:28,670 is possible to do with a PWA, and it's also 686 00:39:28,670 --> 00:39:31,850 possible to ship this app to all devices. 687 00:39:31,850 --> 00:39:36,590 So for example, I have WebBoard running here 688 00:39:36,590 --> 00:39:41,570 as a Windows app on my Windows device installed from the Microsoft Store 689 00:39:41,570 --> 00:39:44,900 actually, although I could also install it from Edge if I wanted to. 690 00:39:44,900 --> 00:39:48,210 And on my Surface Duo, which again, I'm not showing right now, 691 00:39:48,210 --> 00:39:51,860 but I also have WebBoard in the Google Play store using a tool that I'll 692 00:39:51,860 --> 00:39:53,280 actually show here in a second. 693 00:39:53,280 --> 00:39:54,330 So you can install-- 694 00:39:54,330 --> 00:39:56,080 so basically, what I'm trying to point out 695 00:39:56,080 --> 00:39:59,660 there is I wrote one app with one code base, and I have it on the web, 696 00:39:59,660 --> 00:40:01,220 so I can get users to the web. 697 00:40:01,220 --> 00:40:04,520 I have it on the Microsoft Store, so I can get users to the Microsoft Store. 698 00:40:04,520 --> 00:40:07,145 I have it on Google Play, so I can get users to the Google Play 699 00:40:07,145 --> 00:40:10,563 store or my Surface Duo, for example. 700 00:40:10,563 --> 00:40:12,980 And all of the dual screen APIs and all that kind of stuff 701 00:40:12,980 --> 00:40:15,530 works with PWAs installed from the Google Play Store. 702 00:40:15,530 --> 00:40:19,760 And then recently, my team has also been working on iOS support, 703 00:40:19,760 --> 00:40:22,760 so the iOS support is a little bit different 704 00:40:22,760 --> 00:40:25,620 because there's not as many capabilities available to Safari. 705 00:40:25,620 --> 00:40:28,620 There's also not any of the dual screen stuff here that we talked about. 706 00:40:28,620 --> 00:40:32,840 But the point is there, you can actually ship your PWA to the Apple App Store, 707 00:40:32,840 --> 00:40:33,680 too. 708 00:40:33,680 --> 00:40:38,030 And the cool thing about the web is, because of the more limitations 709 00:40:38,030 --> 00:40:43,730 of Safari, you can use standard responsive design type things to ensure 710 00:40:43,730 --> 00:40:46,970 that your app works well on iOS. 711 00:40:46,970 --> 00:40:49,010 So I think that's pretty cool. 712 00:40:49,010 --> 00:40:51,528 Now, we've talked about a lot of cool stuff. 713 00:40:51,528 --> 00:40:53,570 but you're probably wondering. how do I even like 714 00:40:53,570 --> 00:40:58,430 started building something using this cool stuff that we showed today? 715 00:40:58,430 --> 00:41:02,390 That's always, with the web, in my opinion, 716 00:41:02,390 --> 00:41:05,780 the place that's hard to get started. 717 00:41:05,780 --> 00:41:08,750 So you learn your basic HTML, CSS, and JavaScript. 718 00:41:08,750 --> 00:41:11,600 And then a bunch of other really cool things are thrown at you, 719 00:41:11,600 --> 00:41:13,790 and you're like, hey, you can do this, this, this, and this. 720 00:41:13,790 --> 00:41:15,207 Here's a bunch of cool frameworks. 721 00:41:15,207 --> 00:41:20,360 Here's a bunch of cool CSS libraries, et cetera, and it becomes very-- 722 00:41:20,360 --> 00:41:25,500 gives me anxiety almost, honestly, trying to choose what all do I do here? 723 00:41:25,500 --> 00:41:27,290 What all do I say? 724 00:41:27,290 --> 00:41:28,580 What all do I choose? 725 00:41:28,580 --> 00:41:32,320 Am I choosing the right tools, et cetera? 726 00:41:32,320 --> 00:41:37,590 So my team PWA-Builder at Microsoft-- so this is a team that I work on. 727 00:41:37,590 --> 00:41:39,280 It's an open source project. 728 00:41:39,280 --> 00:41:41,887 We have multiple tools that we're working on. 729 00:41:41,887 --> 00:41:44,220 In fact, I'm going to go through a couple of those tools 730 00:41:44,220 --> 00:41:46,830 today real quick here in the demo, but I wanted 731 00:41:46,830 --> 00:41:49,440 to start off with our PWA starter. 732 00:41:49,440 --> 00:41:53,940 So normally, when you're building any web application, or even just 733 00:41:53,940 --> 00:41:56,235 a website, there's things you need to get started 734 00:41:56,235 --> 00:41:57,610 up front, just like I was saying. 735 00:41:57,610 --> 00:41:58,650 You need to choose-- 736 00:41:58,650 --> 00:42:02,130 normally, do you just want to get plain HTML, CSS, and JavaScript, 737 00:42:02,130 --> 00:42:04,980 or is it more of an application style experience? 738 00:42:04,980 --> 00:42:08,310 If you want to do that, maybe you need a single page-- or a framework that 739 00:42:08,310 --> 00:42:12,090 enables you to build single page apps. 740 00:42:12,090 --> 00:42:15,900 Sorry about the notification sound there. 741 00:42:15,900 --> 00:42:19,380 So yeah, maybe you need to build a single page app, 742 00:42:19,380 --> 00:42:21,443 and then there's a bunch of other questions 743 00:42:21,443 --> 00:42:23,610 that then happen, which is which framework do I use, 744 00:42:23,610 --> 00:42:25,610 like I was just talking about. 745 00:42:25,610 --> 00:42:28,660 So what we've done is we put together this starter, and what this does 746 00:42:28,660 --> 00:42:32,530 is it takes all of those decisions that you need to make up front 747 00:42:32,530 --> 00:42:34,690 and makes them for you. 748 00:42:34,690 --> 00:42:37,990 And we do this based on the best practices 749 00:42:37,990 --> 00:42:41,740 that we've established here working on PWAs here at Microsoft, 750 00:42:41,740 --> 00:42:44,800 working with the community who's building PWAs, 751 00:42:44,800 --> 00:42:48,040 and using that feedback to put together what we think 752 00:42:48,040 --> 00:42:54,640 is the best combination of tools that allows you to get started fast, easily, 753 00:42:54,640 --> 00:42:58,160 and actually spend your time building your application, 754 00:42:58,160 --> 00:43:02,230 not just setting up a bundler or learning what a bundler is 755 00:43:02,230 --> 00:43:09,380 or all of this not as fun stuff as just actually building an application. 756 00:43:09,380 --> 00:43:12,060 So there are some documentation, like Craig said. 757 00:43:12,060 --> 00:43:13,810 There's some links that we'll send you all 758 00:43:13,810 --> 00:43:16,010 that goes through how to get started here, 759 00:43:16,010 --> 00:43:18,825 but I just wanted to show how easy it is. 760 00:43:18,825 --> 00:43:20,950 So the first thing you'll need is a GitHub account. 761 00:43:20,950 --> 00:43:22,540 If you don't have a GitHub account yet, you 762 00:43:22,540 --> 00:43:25,210 will need to make one to use this specific workflow that I'm 763 00:43:25,210 --> 00:43:26,217 going to show here. 764 00:43:26,217 --> 00:43:28,300 So once you have that GitHub account-- and it only 765 00:43:28,300 --> 00:43:30,260 takes a minute or two to make. 766 00:43:30,260 --> 00:43:32,170 I also actually recommend making one. 767 00:43:32,170 --> 00:43:34,960 GitHub is really cool, and you can learn a lot 768 00:43:34,960 --> 00:43:37,758 and see what people are doing in their open source apps. 769 00:43:37,758 --> 00:43:39,550 But the cool thing is we're using a feature 770 00:43:39,550 --> 00:43:41,440 of GitHub called template repos. 771 00:43:41,440 --> 00:43:45,140 So what this does is it enables me to use this repo, 772 00:43:45,140 --> 00:43:47,500 so this PWA starter repo, that gives you all 773 00:43:47,500 --> 00:43:51,880 of that tooling that I just talked about up front, already set up, ready to go, 774 00:43:51,880 --> 00:43:55,840 just like if you had created an app in Visual Studio or even in Xcode 775 00:43:55,840 --> 00:43:57,940 on a Mac. 776 00:43:57,940 --> 00:44:00,440 This is going to give you all the setup that you need. 777 00:44:00,440 --> 00:44:04,300 So I just hit that green button that says New Template Repo, or something 778 00:44:04,300 --> 00:44:05,120 like that. 779 00:44:05,120 --> 00:44:07,480 I then go in here and name my app. 780 00:44:07,480 --> 00:44:11,890 For this one I'll name it harvard-pwa. 781 00:44:11,890 --> 00:44:14,320 I can give it a description if I want, and then I can also 782 00:44:14,320 --> 00:44:15,790 choose it to be public or private. 783 00:44:15,790 --> 00:44:19,850 I'm going to go with public just because this is an open source application. 784 00:44:19,850 --> 00:44:22,450 So then all I need to do is hit that button. 785 00:44:22,450 --> 00:44:24,640 Now, what this is going to do is it's going 786 00:44:24,640 --> 00:44:28,510 to generate my new code base that I need to actually start 787 00:44:28,510 --> 00:44:29,930 working on my application. 788 00:44:29,930 --> 00:44:34,300 And as you can see there, I now have my code base ready to go, 789 00:44:34,300 --> 00:44:37,330 ready to clone to my device, and where I could start coding. 790 00:44:37,330 --> 00:44:40,310 And all I had to do was click a couple of buttons. 791 00:44:40,310 --> 00:44:43,690 There's no reading that I've had to do so far, no putting together 792 00:44:43,690 --> 00:44:45,400 a bunch of tools, nothing like that. 793 00:44:45,400 --> 00:44:47,350 Just clicking buttons. 794 00:44:47,350 --> 00:44:49,780 So once you have this on your GitHub account, 795 00:44:49,780 --> 00:44:54,790 and you'll see this is now on my GitHub account, you would go to Code. 796 00:44:54,790 --> 00:44:59,710 And then you would click here and follow some instructions to clone it 797 00:44:59,710 --> 00:45:00,430 to your device. 798 00:45:00,430 --> 00:45:04,030 I'm not going to do that on the live demo because cloning repos from GitHub 799 00:45:04,030 --> 00:45:07,210 almost never goes well in the live demo. 800 00:45:07,210 --> 00:45:13,830 But how you would do that is you would just hit the Copy button there 801 00:45:13,830 --> 00:45:15,540 to get the URL. 802 00:45:15,540 --> 00:45:17,260 Then you would open up a terminal. 803 00:45:17,260 --> 00:45:19,950 So I'm using the Windows Terminal since I'm on-- 804 00:45:19,950 --> 00:45:21,130 oh. 805 00:45:21,130 --> 00:45:21,630 There we go. 806 00:45:21,630 --> 00:45:24,020 I'm on [INAUDIBLE] since I'm on a Windows device. 807 00:45:24,020 --> 00:45:27,600 But this could work on a Mac OS device, too. 808 00:45:27,600 --> 00:45:32,430 Any device that-- hopefully, my audio is-- 809 00:45:32,430 --> 00:45:35,362 I got a warning there. 810 00:45:35,362 --> 00:45:38,070 So yeah, Windows terminal is what I'm using since I'm on Windows, 811 00:45:38,070 --> 00:45:42,960 and you can actually see, too, that I'm actually using Linux, which is a WSL. 812 00:45:42,960 --> 00:45:46,500 A cool thing with Windows-- you can actually run Linux under the hood 813 00:45:46,500 --> 00:45:48,880 and do all of your coding there. 814 00:45:48,880 --> 00:45:51,840 So anyways, what you would do is type get clone 815 00:45:51,840 --> 00:45:55,980 and do Command-V. And as far as installing get and stuff, the links 816 00:45:55,980 --> 00:45:58,480 that Craig talked about will show you how to do that. 817 00:45:58,480 --> 00:46:00,570 So once you would run that command, that will then 818 00:46:00,570 --> 00:46:04,120 clone the repo to your device. 819 00:46:04,120 --> 00:46:07,290 So once I have that repo cloned to my device, 820 00:46:07,290 --> 00:46:11,400 I now have a working code base that I can open in my editor. 821 00:46:11,400 --> 00:46:13,740 I prefer Visual Studio Code. 822 00:46:13,740 --> 00:46:15,330 It's also cross-platform. 823 00:46:15,330 --> 00:46:16,485 It's actually web based. 824 00:46:16,485 --> 00:46:18,360 Just so you know, too, it is an Electron app, 825 00:46:18,360 --> 00:46:20,820 but all of the UI, all the functionality-- 826 00:46:20,820 --> 00:46:23,730 it's all just HTML, CSS, and JavaScript. 827 00:46:23,730 --> 00:46:25,650 And because of that, it runs across platform 828 00:46:25,650 --> 00:46:28,950 and also starts up pretty quickly and that kind of thing, too. 829 00:46:28,950 --> 00:46:31,908 Real quick, too, I would actually like to point out that you don't even 830 00:46:31,908 --> 00:46:34,830 need a huge computer to do any of this. 831 00:46:34,830 --> 00:46:38,790 I'm actually running on a Surface Pro X right now, which is not even 832 00:46:38,790 --> 00:46:42,130 considered a real developer device-- 833 00:46:42,130 --> 00:46:43,830 "real developer device." 834 00:46:43,830 --> 00:46:48,210 But I mean, you could even do this on an iPad or something like that. 835 00:46:48,210 --> 00:46:52,680 It's not anything that's compute intensive. 836 00:46:52,680 --> 00:47:00,420 So once I have it opened up in Visual Studio, all I would need to do is run-- 837 00:47:00,420 --> 00:47:02,620 actually, there's two ways we can do this. 838 00:47:02,620 --> 00:47:06,743 So one, you could do npm install and npm run dev, 839 00:47:06,743 --> 00:47:09,160 and that would do what I'm going to show here in a second. 840 00:47:09,160 --> 00:47:12,900 But I think the easier way to do, and the way that I'm more of a fan of, 841 00:47:12,900 --> 00:47:16,558 is just using the task runner that is built into Visual Studio Code. 842 00:47:16,558 --> 00:47:18,600 And this enables us to do some cool things, which 843 00:47:18,600 --> 00:47:20,140 you'll see here in a second. 844 00:47:20,140 --> 00:47:21,600 So I have my app open. 845 00:47:21,600 --> 00:47:23,640 As you can see, it's Test App. 846 00:47:23,640 --> 00:47:24,750 Cool name for my PWA. 847 00:47:24,750 --> 00:47:26,250 Right? 848 00:47:26,250 --> 00:47:29,430 Then I would go up here to Run and hit Start Debugging. 849 00:47:29,430 --> 00:47:31,665 Now, again, I haven't had to-- 850 00:47:31,665 --> 00:47:33,610 I'm not writing any code here. 851 00:47:33,610 --> 00:47:35,310 I haven't had to put anything together. 852 00:47:35,310 --> 00:47:38,520 We're still just working with the code that all I had to do 853 00:47:38,520 --> 00:47:40,410 was clone it from Git. 854 00:47:40,410 --> 00:47:42,630 So I hit Start Debugging, and as you can see, 855 00:47:42,630 --> 00:47:46,508 you could also just hit F5 there, which will do the same thing. 856 00:47:46,508 --> 00:47:47,550 We'll give this a second. 857 00:47:47,550 --> 00:47:52,150 Again, I'm running Zoom and that kind of thing, and as Craig was saying, 858 00:47:52,150 --> 00:47:54,990 sometimes, that can cause things to run a little bit slower. 859 00:47:54,990 --> 00:47:56,880 But we'll give this just a second. 860 00:47:56,880 --> 00:48:00,540 As you can see, it's doing a bunch of stuff in the background, I'll call it. 861 00:48:00,540 --> 00:48:04,170 It's not really super needed to understand exactly 862 00:48:04,170 --> 00:48:06,490 what's going on here at the moment. 863 00:48:06,490 --> 00:48:08,830 And as you can see-- 864 00:48:08,830 --> 00:48:11,830 oh, it's now asking me to sync my profile, 865 00:48:11,830 --> 00:48:14,560 so I guess I'm going to do that. 866 00:48:14,560 --> 00:48:16,630 And we'll give it just a second. 867 00:48:16,630 --> 00:48:17,620 Come on, Zoom. 868 00:48:17,620 --> 00:48:20,720 Cool, and now, we have our application running. 869 00:48:20,720 --> 00:48:25,480 So as you can see here, again, I haven't wrote any code at this point. 870 00:48:25,480 --> 00:48:29,470 I've only clicked a few buttons in GitHub, and then I hit like two buttons 871 00:48:29,470 --> 00:48:31,240 in VS Code. 872 00:48:31,240 --> 00:48:33,430 I have an application running on my device 873 00:48:33,430 --> 00:48:36,130 that I can then start developing on, and this is actually 874 00:48:36,130 --> 00:48:38,720 opened in its own app window, not in the browser. 875 00:48:38,720 --> 00:48:41,258 So this is emulating what a user is going 876 00:48:41,258 --> 00:48:44,050 to see if they choose to download your app from the Microsoft Store 877 00:48:44,050 --> 00:48:45,490 or install it from Edge. 878 00:48:45,490 --> 00:48:48,550 And you could use this now to develop your application, just 879 00:48:48,550 --> 00:48:51,790 like if you were working on a native app in Visual Studio, 880 00:48:51,790 --> 00:48:54,670 in Xcode, or even Android Studio. 881 00:48:54,670 --> 00:48:58,000 And the cool thing is, here, let's make some changes, 882 00:48:58,000 --> 00:49:02,050 and I'll show how they automatically update. 883 00:49:02,050 --> 00:49:06,460 So as you can see here, we have app home, and it says Welcome up here. 884 00:49:06,460 --> 00:49:09,575 I'm going to do-- 885 00:49:09,575 --> 00:49:11,700 let's see. 886 00:49:11,700 --> 00:49:12,200 Hello. 887 00:49:12,200 --> 00:49:15,080 888 00:49:15,080 --> 00:49:17,480 We'll save that real quick, and again, this 889 00:49:17,480 --> 00:49:21,740 might take a second since we're running on Zoom. 890 00:49:21,740 --> 00:49:24,650 But as you can see here, all I did was change the code, 891 00:49:24,650 --> 00:49:26,780 and it's now auto reloading my changes. 892 00:49:26,780 --> 00:49:29,647 And here in just a second, you can see my change, 893 00:49:29,647 --> 00:49:31,730 and then I can use this whole development workload 894 00:49:31,730 --> 00:49:32,750 to then build my app. 895 00:49:32,750 --> 00:49:33,860 Make changes. 896 00:49:33,860 --> 00:49:34,730 I hit Save. 897 00:49:34,730 --> 00:49:36,230 It auto reloads. 898 00:49:36,230 --> 00:49:36,800 I go in. 899 00:49:36,800 --> 00:49:37,700 I test it. 900 00:49:37,700 --> 00:49:41,870 I can even move the screen around, make it smaller, 901 00:49:41,870 --> 00:49:44,060 et cetera, just like my users might, and this 902 00:49:44,060 --> 00:49:46,917 is where some of that responsive design stuff might come in. 903 00:49:46,917 --> 00:49:49,250 And then the other cool thing is you still get DevTools, 904 00:49:49,250 --> 00:49:54,440 so you can right click and inspect, or in Visual Studio Code, 905 00:49:54,440 --> 00:49:57,490 you can also hit this button. 906 00:49:57,490 --> 00:50:02,500 And what this is going to do is open DevTools actually in my VS Code. 907 00:50:02,500 --> 00:50:05,070 So now, I have a full IDE-- 908 00:50:05,070 --> 00:50:07,210 well, is it going to load? 909 00:50:07,210 --> 00:50:07,710 Cool. 910 00:50:07,710 --> 00:50:10,050 Like I said, the demo gods have not been with me today. 911 00:50:10,050 --> 00:50:14,520 But what this enables is a full integrated development experience 912 00:50:14,520 --> 00:50:16,770 for your PWA, just like you might be used 913 00:50:16,770 --> 00:50:21,000 to, like I said, with Visual Studio or Xcode or Android Studio, 914 00:50:21,000 --> 00:50:24,090 but all focused on building your PWA that you could then 915 00:50:24,090 --> 00:50:27,300 ship to all these different devices. 916 00:50:27,300 --> 00:50:32,300 Final piece of the demo here, real quick, without taking up too much time. 917 00:50:32,300 --> 00:50:36,680 Once I have my PWA ready to go, and once I have that published to the web-- 918 00:50:36,680 --> 00:50:41,420 which we actually have instructions on, let's 919 00:50:41,420 --> 00:50:45,410 see, yeah, deployment and packaging. 920 00:50:45,410 --> 00:50:47,720 You can see here, we have instructions on what 921 00:50:47,720 --> 00:50:50,960 we recommend for deployment and packaging, that kind of thing. 922 00:50:50,960 --> 00:50:55,580 We're going to use PWA Builder, which is another tool that my team works on, 923 00:50:55,580 --> 00:50:57,780 and I can use this once I have my app. 924 00:50:57,780 --> 00:51:01,730 So let's just say that I sat here and built WebBoard in front of you 925 00:51:01,730 --> 00:51:04,760 all in the last 10 minutes, and now, I'm going 926 00:51:04,760 --> 00:51:08,330 to package that for the Google Play Store and the Microsoft Store. 927 00:51:08,330 --> 00:51:11,820 So let's remember I can already get users through WebBoard.app, 928 00:51:11,820 --> 00:51:14,365 so this is a URL that you can share with anyone, 929 00:51:14,365 --> 00:51:16,240 which I think is another advantage of the web 930 00:51:16,240 --> 00:51:19,400 that you don't really get with native applications. 931 00:51:19,400 --> 00:51:22,100 And then all you need to go to the app stores 932 00:51:22,100 --> 00:51:25,850 with this, Google Play Store, Microsoft Store, and the Apple App Store, 933 00:51:25,850 --> 00:51:29,330 is put in the URL to your PWA. 934 00:51:29,330 --> 00:51:31,160 Hit a button. 935 00:51:31,160 --> 00:51:32,740 This might take just a second. 936 00:51:32,740 --> 00:51:34,490 We're going to run some tests just to make 937 00:51:34,490 --> 00:51:37,460 sure you have your technical requirements needed, that you 938 00:51:37,460 --> 00:51:39,950 would need to actually go to the store. 939 00:51:39,950 --> 00:51:42,540 If you have all these [INAUDIBLE] scores, you're good to go. 940 00:51:42,540 --> 00:51:44,560 You can hit Next. 941 00:51:44,560 --> 00:51:47,740 And at this point now, we're ready to publish our PWA to the stores. 942 00:51:47,740 --> 00:51:51,147 So at this point, you can see, you can go and build your Windows package, 943 00:51:51,147 --> 00:51:53,230 and you'll get some instructions and documentation 944 00:51:53,230 --> 00:51:54,850 on how to put that in the store. 945 00:51:54,850 --> 00:51:58,960 Google Play here for Android, and also the Apple Store for iOS. 946 00:51:58,960 --> 00:52:02,200 And once you do that, you then have that whole experience 947 00:52:02,200 --> 00:52:05,350 that I just talked about, where you have the one app that you just 948 00:52:05,350 --> 00:52:07,832 built in Visual Studio. 949 00:52:07,832 --> 00:52:09,790 It's in GitHub, so it's an open source project, 950 00:52:09,790 --> 00:52:11,380 but it can also be closed source. 951 00:52:11,380 --> 00:52:13,610 You can then deploy it to [INAUDIBLE] static web 952 00:52:13,610 --> 00:52:15,610 apps, which I didn't show here, but like I said, 953 00:52:15,610 --> 00:52:17,980 is mentioned in the readme with documentation. 954 00:52:17,980 --> 00:52:21,800 So now, everything you need is all in one place. 955 00:52:21,800 --> 00:52:25,180 You can actually deploy from Visual Studio Code, too, 956 00:52:25,180 --> 00:52:29,932 and then all you need to do is just open pwabuilder.com, put in URL, 957 00:52:29,932 --> 00:52:32,140 hit the couple of buttons that I did, and then you're 958 00:52:32,140 --> 00:52:36,610 ready to go to the Google Play Store, Microsoft Store, and Apple App Store. 959 00:52:36,610 --> 00:52:38,980 And combine that with the responsive design stuff 960 00:52:38,980 --> 00:52:44,380 that Craig just showed, and you have a full application experience that you 961 00:52:44,380 --> 00:52:47,230 can ship anywhere without having to build multiple apps 962 00:52:47,230 --> 00:52:49,877 or have multiple teams or anything like that. 963 00:52:49,877 --> 00:52:52,960 So yeah, I think that's where I'm going to stop and maybe hand it back off 964 00:52:52,960 --> 00:52:54,220 to Craig. 965 00:52:54,220 --> 00:52:56,722 And any questions, if there's questions. 966 00:52:56,722 --> 00:52:57,930 BERNIE LONGBOY: I don't know. 967 00:52:57,930 --> 00:53:01,050 Craig, do you have anything else you want to add before I go to questions? 968 00:53:01,050 --> 00:53:02,730 CRAIG DUNN: No, let's do the questions. 969 00:53:02,730 --> 00:53:05,910 I just shared my screen, so that Justin's summary 970 00:53:05,910 --> 00:53:08,190 of his talk and two links are showing. 971 00:53:08,190 --> 00:53:10,365 But let's do questions while folks-- 972 00:53:10,365 --> 00:53:12,240 BERNIE LONGBOY: So this is from [INAUDIBLE].. 973 00:53:12,240 --> 00:53:13,860 I think you did answer this. 974 00:53:13,860 --> 00:53:15,660 Is there any JavaScript file that can work 975 00:53:15,660 --> 00:53:20,350 on any number of phones and screens and resolution, like a universal layout? 976 00:53:20,350 --> 00:53:22,470 CRAIG DUNN: Yeah, so there's no-- 977 00:53:22,470 --> 00:53:24,420 the universal layout is touching on, yeah, 978 00:53:24,420 --> 00:53:26,800 that's the goal that you want to get to. 979 00:53:26,800 --> 00:53:31,740 But we did provide a JavaScript method, the viewports.segments, that Windows 980 00:53:31,740 --> 00:53:36,300 segments, that you can use to query and find out if you're on the two screens, 981 00:53:36,300 --> 00:53:40,360 and then adapt that layout versus just being on one screen. 982 00:53:40,360 --> 00:53:45,300 So the JavaScript functionality is there to allow 983 00:53:45,300 --> 00:53:49,050 you to create a layout that will adapt for is there a hinge, is it foldable, 984 00:53:49,050 --> 00:53:50,570 or is it not. 985 00:53:50,570 --> 00:53:52,320 BERNIE LONGBOY: This one is from Bing Liu. 986 00:53:52,320 --> 00:53:56,025 Is Edge going to adopt AVIF in the near future? 987 00:53:56,025 --> 00:53:58,717 988 00:53:58,717 --> 00:54:00,050 CRAIG DUNN: Justin, do you know? 989 00:54:00,050 --> 00:54:00,883 JUSTIN WILLIS: Yeah. 990 00:54:00,883 --> 00:54:06,900 So no, I don't have any solid answer there. 991 00:54:06,900 --> 00:54:11,300 I will say, though, that yeah, as far as image formats go, 992 00:54:11,300 --> 00:54:14,390 I know we don't support AVIF, but we also support WebP, 993 00:54:14,390 --> 00:54:17,990 all the other advancing standards. 994 00:54:17,990 --> 00:54:23,450 And yeah, I think there's definitely a lot 995 00:54:23,450 --> 00:54:28,410 that we would want to do in Edge to ensure that images load well 996 00:54:28,410 --> 00:54:31,070 and that we support modern image formats that let you-- 997 00:54:31,070 --> 00:54:34,010 that enable developers to have those small images that 998 00:54:34,010 --> 00:54:38,537 work well over a mobile network or something like that. 999 00:54:38,537 --> 00:54:41,120 BERNIE LONGBOY: Safari supports split view because of the fact 1000 00:54:41,120 --> 00:54:44,870 that there is a split view [INAUDIBLE] to open two pages 1001 00:54:44,870 --> 00:54:46,310 apps with split screen. 1002 00:54:46,310 --> 00:54:50,210 Do I need to do a different algorithm for some web pages? 1003 00:54:50,210 --> 00:54:51,350 JUSTIN WILLIS: So yeah-- 1004 00:54:51,350 --> 00:54:52,330 CRAIG DUNN: Go ahead, Justin. 1005 00:54:52,330 --> 00:54:53,960 JUSTIN WILLIS: Oh, yeah, my bad, Craig. 1006 00:54:53,960 --> 00:54:58,610 So I was just going to say, so the split screen thing-- 1007 00:54:58,610 --> 00:55:00,380 I don't know if you can do it on iPhone. 1008 00:55:00,380 --> 00:55:02,510 But on iPad, I know what you're talking about, 1009 00:55:02,510 --> 00:55:04,880 where you can have two apps open at once. 1010 00:55:04,880 --> 00:55:11,030 So that, you don't actually have to use like the foldable stuff for it. 1011 00:55:11,030 --> 00:55:13,510 Safari doesn't actually support those APIs. 1012 00:55:13,510 --> 00:55:15,260 The only thing you would have to make sure 1013 00:55:15,260 --> 00:55:19,550 there is, like when Craig and I were showing DevTools earlier, 1014 00:55:19,550 --> 00:55:22,190 and how you can make the layout thinner, and then you 1015 00:55:22,190 --> 00:55:24,290 can make it larger if you want. 1016 00:55:24,290 --> 00:55:28,520 You would want to do that just to make sure that your application looks well 1017 00:55:28,520 --> 00:55:33,020 in that thinner layout that you're going to get 1018 00:55:33,020 --> 00:55:35,630 when you have two applications open at one time on an iPad. 1019 00:55:35,630 --> 00:55:40,460 It's actually the same thing as if you like snap one 1020 00:55:40,460 --> 00:55:43,100 app on one side on your Windows device and snap 1021 00:55:43,100 --> 00:55:46,100 one app on the other side on your Windows device. 1022 00:55:46,100 --> 00:55:48,440 You can actually test it that way. 1023 00:55:48,440 --> 00:55:50,990 BERNIE LONGBOY: And then we just have one comment here, one-- 1024 00:55:50,990 --> 00:55:56,900 [INAUDIBLE] UI will be significantly different from the single window UI? 1025 00:55:56,900 --> 00:55:59,150 Yes, it works on the other browsers. 1026 00:55:59,150 --> 00:56:01,340 [INAUDIBLE] 1027 00:56:01,340 --> 00:56:04,528 Does split view also consider screen rotation? 1028 00:56:04,528 --> 00:56:07,070 I can think of cases where left/right split wouldn't map well 1029 00:56:07,070 --> 00:56:08,270 to an up/down split. 1030 00:56:08,270 --> 00:56:11,780 I think you did answer that, Justin, or go ahead. 1031 00:56:11,780 --> 00:56:13,890 JUSTIN WILLIS: I think Craig did, too, actually. 1032 00:56:13,890 --> 00:56:15,890 CRAIG DUNN: Yeah, it's definitely a thing, which 1033 00:56:15,890 --> 00:56:19,220 is why there are media queries for both rotations 1034 00:56:19,220 --> 00:56:22,340 because you might want to do something in one rotation, but not the other. 1035 00:56:22,340 --> 00:56:25,680 BERNIE LONGBOY: What plugins do you usually use in Visual Code? 1036 00:56:25,680 --> 00:56:27,945 Well, that's-- 1037 00:56:27,945 --> 00:56:30,320 JUSTIN WILLIS: So actually, I will say, on that question, 1038 00:56:30,320 --> 00:56:33,640 so if you use the starter that I just showed-- 1039 00:56:33,640 --> 00:56:36,545 so if you go to aka.ms/pwastarter-- 1040 00:56:36,545 --> 00:56:38,920 although I would recommend starting with the second link, 1041 00:56:38,920 --> 00:56:40,300 really, since that's docs. 1042 00:56:40,300 --> 00:56:42,700 But you can feel free to just dive into, of course. 1043 00:56:42,700 --> 00:56:45,550 But yeah, if you go there, that starter actually 1044 00:56:45,550 --> 00:56:48,820 has a file that has our recommended VS Code extensions. 1045 00:56:48,820 --> 00:56:50,800 And when you open it up in VS Code, you'll 1046 00:56:50,800 --> 00:56:53,060 get a little prompt in the corner that says, hey, 1047 00:56:53,060 --> 00:56:55,990 would you like to install the recommended extensions for this repo? 1048 00:56:55,990 --> 00:56:58,850 If you do, it will show you exactly which ones it's installing, 1049 00:56:58,850 --> 00:57:02,810 and you can choose, hey, I don't want to do that, or hey, I'm OK with that. 1050 00:57:02,810 --> 00:57:05,620 So I won't go through all of them here, but the starter 1051 00:57:05,620 --> 00:57:08,620 has our recommended ones by default. 1052 00:57:08,620 --> 00:57:13,060 BERNIE LONGBOY: From Bjorn-- is the PWA Builder only for shipping to stores, 1053 00:57:13,060 --> 00:57:16,377 or can I compile standalone executables? 1054 00:57:16,377 --> 00:57:17,960 JUSTIN WILLIS: That's a good question. 1055 00:57:17,960 --> 00:57:20,600 1056 00:57:20,600 --> 00:57:25,170 So you can generate-- so for Android, for example. 1057 00:57:25,170 --> 00:57:28,520 So you can generate an APK using PWA Builder, 1058 00:57:28,520 --> 00:57:33,200 or a app bundle-- whatever the other format that they have now. 1059 00:57:33,200 --> 00:57:35,090 I can't remember exactly what it's called. 1060 00:57:35,090 --> 00:57:41,030 But you can generate those, and on most Android devices, like 95% of them 1061 00:57:41,030 --> 00:57:43,280 maybe, you can sideload APKs. 1062 00:57:43,280 --> 00:57:46,370 So you can, of course, do that if you want with the APK 1063 00:57:46,370 --> 00:57:49,130 that we generate, although it is-- 1064 00:57:49,130 --> 00:57:51,500 we meaning it to be taken to the store. 1065 00:57:51,500 --> 00:57:54,590 On the Windows side of things, we give you an MSIX. 1066 00:57:54,590 --> 00:57:59,300 In fact, we actually give you a sideloadable MSIX, too, 1067 00:57:59,300 --> 00:58:02,000 by default. That way you can test it on your device 1068 00:58:02,000 --> 00:58:07,360 just by clicking on the MSIX, and it will install on Windows. 1069 00:58:07,360 --> 00:58:10,510 But yeah, it's meant to be for the stores, 1070 00:58:10,510 --> 00:58:15,535 but we do allow you to test it on your own device with standalone executables. 1071 00:58:15,535 --> 00:58:18,160 BERNIE LONGBOY: And I'm going to just read two last questions-- 1072 00:58:18,160 --> 00:58:19,220 I think we're good-- 1073 00:58:19,220 --> 00:58:20,650 and just one last comment. 1074 00:58:20,650 --> 00:58:22,420 Thank you for this amazing webinar. 1075 00:58:22,420 --> 00:58:24,010 It was a wonderful experience. 1076 00:58:24,010 --> 00:58:27,550 And the two questions-- the last two questions from Audrey Simmons, 1077 00:58:27,550 --> 00:58:30,820 is it better to have your own servers when developing web pages? 1078 00:58:30,820 --> 00:58:34,593 1079 00:58:34,593 --> 00:58:35,760 JUSTIN WILLIS: Probably not. 1080 00:58:35,760 --> 00:58:39,150 I mean, you can-- it's a cool engineering exercise 1081 00:58:39,150 --> 00:58:41,740 to do, to try to set up your own web server and stuff. 1082 00:58:41,740 --> 00:58:42,812 But in the starter-- 1083 00:58:42,812 --> 00:58:46,020 I know I keep going back to the starter, but all the docs are in the starter. 1084 00:58:46,020 --> 00:58:49,200 In the starter, we actually have documentation that recommends-- 1085 00:58:49,200 --> 00:58:52,080 so we recommend Azure Static Web Apps just 1086 00:58:52,080 --> 00:58:55,710 because it's easy and integrates with the Visual Studio Code and GitHub 1087 00:58:55,710 --> 00:58:56,340 nicely. 1088 00:58:56,340 --> 00:58:58,380 But you can also use something like Firebase 1089 00:58:58,380 --> 00:59:02,780 or something like that, or if you want to have your own web server. 1090 00:59:02,780 --> 00:59:04,530 BERNIE LONGBOY: And last one from Angela-- 1091 00:59:04,530 --> 00:59:09,240 is PWA appropriate for sites that are heavy on API calls for external data? 1092 00:59:09,240 --> 00:59:12,743 I was under the impression it was mostly for offline able stuff. 1093 00:59:12,743 --> 00:59:13,410 CRAIG DUNN: Yup. 1094 00:59:13,410 --> 00:59:16,770 So yeah, that's a really good question, and the answer 1095 00:59:16,770 --> 00:59:19,200 for actually both of those is yes. 1096 00:59:19,200 --> 00:59:22,870 So the cool thing is, a PWA-- 1097 00:59:22,870 --> 00:59:26,160 so anything that works as a web app will work as a PWA. 1098 00:59:26,160 --> 00:59:31,320 All the PWA thing means is that you're using some of those more modern APIs, 1099 00:59:31,320 --> 00:59:35,670 like service workers, that then enable the second part of your question, which 1100 00:59:35,670 --> 00:59:36,840 is the offline stuff. 1101 00:59:36,840 --> 00:59:40,230 And just so you know, there's actually no limitation 1102 00:59:40,230 --> 00:59:45,780 on how many API calls that you can save the response offline 1103 00:59:45,780 --> 00:59:48,420 and things like that. 1104 00:59:48,420 --> 00:59:55,710 Yeah, you can, for example, save whole video files offline, whole text files 1105 00:59:55,710 --> 00:59:58,470 offline, your entire app offline, actually. 1106 00:59:58,470 --> 01:00:02,070 That way, the web app will work offline itself. 1107 01:00:02,070 --> 01:00:06,600 Yeah, there's no limitation really on the capabilities of what you can do 1108 01:00:06,600 --> 01:00:09,960 or what you can offline, or anything like that. 1109 01:00:09,960 --> 01:00:15,570 BERNIE LONGBOY: Well, again, thank you, Craig and Justin from Microsoft. 1110 01:00:15,570 --> 01:00:19,830 And thank you to our audience, and this has been wonderful. 1111 01:00:19,830 --> 01:00:21,900 I really appreciate learning more about-- 1112 01:00:21,900 --> 01:00:24,600 I learned a lot as well, so that was great. 1113 01:00:24,600 --> 01:00:28,000 We're getting some more thank yous, amazing presentation. 1114 01:00:28,000 --> 01:00:28,958 Thank you, everyone. 1115 01:00:28,958 --> 01:00:30,000 CRAIG DUNN: Yeah, thanks. 1116 01:00:30,000 --> 01:00:32,430 I appreciate everyone joining, and the link on the screen 1117 01:00:32,430 --> 01:00:33,638 will link to everything else. 1118 01:00:33,638 --> 01:00:37,070 But you'll also be able to see the recording, obviously. 1119 01:00:37,070 --> 01:00:38,475