Thanks for sticking around, everybody. We're going to talk about how to use web components to build progressive web applications and the notion of progressively enhancing your markup using custom elements. So this is me. It's at eBitle on Twitter and GitHub. I got crazy sometimes. I'm a digital Jedi at Google, which basically just means I'm a web developer that helps other web developers outside of Google build really awesome web apps. And I built a number of web apps at my time at Google. So we've worked on things like developer sites for HTML5 Rocks. We built developers.chrome.com, Polymer's website, chromestatus.com, SantaTrikers on a developer site, obviously, but it's kind of a fun project that we work on on developer relations. So you can track Santa around the globe, see where he delivers presents. We built the Codelab site that you see here today at the show in Polymer. And we've also worked on the Google I.O. Progressive Web app the last couple of years. Speaking of the last couple of years, I've gotten really excited about web components. All these emerging standards, several new APIs allow us web developers to build applications. Code reuse, reusability, these are really good things for the web. And it's important to know it's a set of emerging standards. So it's not just one API, it's a few. And you can use them each individually, that's totally cool, but together it becomes a web component and it becomes very powerful. So they allow us to extend and create new HTML elements. That's the core. That's the principle here. And over the last four or five years since the standards kind of first started to evolve, we've grown the community quite a bit. So there's webcomponents.org, which you can check out. It's got articles. It's got people there contributing. That's also where the polyfills are hosted. If you want to actually write an app in production, you can do that using the polyfills. So check that out. It's a great resource. But browser support's actually been lacking. So I think Chrome 36 was the first browser to land all of the web component APIs. So you can create a component without the use of a library. That's really awesome. But browser support's been lacking. So if you take away nothing today from this presentation, take away this slide. Basically, what's happened is that Chrome implemented the APIs very early on, so Shadow DOM, Custom Elements, Template, and HTML imports. This is what the API calls looked like. These are called now the v0 APIs. What's happened is that the browsers recently got together and said, hey, we want to tweak a little things here and there about each of these specs. And they decided and came to consensus. And what's going to happen now is there's a new version of Shadow DOM and Custom Elements. We call these the v1 APIs. So if you've learned about web components in the past, all the concepts still apply. Same stuff still applies. It's basically just syntax and name changes. In this presentation, I'm not going to talk about template, which is actually supported in all the modern browsers now, which is great. You can use that without a polyfill. And I'm not going to talk about HTML imports. I'm just going to focus on the two that have changed. And implementation in the browser is well underway. So Chrome has started in on Custom Elements and Shadow DOM. You can play with these today in Canary with a flag. Over at Firefox, Wilson Page, who's an advocate there, tweeted this recently. So they're actually started in on Shadow DOM v1. Custom Elements has an open bug. They haven't started that yet. Safari last week, in fact, at WWDC, announced Safari 10 will ship with Shadow DOM. So that's two browsers this year alone. We'll have Shadow DOM. And they've also started in on the new Custom Elements API. We thought that might land in Safari 10, but they just didn't get in on time. And over at Microsoft, Edge is playing a crazy catch of implementing all these things. Service worker push notifications. You see Shadow DOM and Custom Elements and web payments on there. So very exciting times for web developers. This stuff is coming in hot. Love it. Browser support really matters. Turns out native support really matters. We don't want to use polyfills for the rest of our lives, right? We don't want to drop in a needless library that we don't have to. And the notion that polyfills goes away over time is the promise of a polyfill. The other reason browser support really matters to me is because if you look today at all these libraries and frameworks, they all produce and allow developers to create components. But there's no standard way to build the component. Some use a lot of JavaScript. Some use more HTML and JavaScript. Some just use a massive amount of HTML. So the goal of creating a tab strip is the same, right? You want to create a reusable tab strip. But the way you get there is very different across the board. And so that's what web components is here for. It's here to have a standard way to create reusable components. So a web component tab strip would look something like this. It would be declarative. It would be my-tabs. We'll just call it that. It's got a selected attribute that you can use to select the tab that should be selected. And it's got div for its content. It's got HTML attributes. It's very readable and very clear what's going on here. The other thing that people often forget about is the fact that it's just DOM and HTML that we're creating means we're integrated with the browser. We're integrated into the platform. So Rob mentioned all these great accessibility features that the browser and the HTML elements already give you. We're integrated with that. We can take advantage of what's already there and don't have to reinvent the wheel ourselves. And we're also integrated with every web developer's best friend, which is the DevTools. And I'll show you an example of this. This is Polymer's old site. And I'll just fire up the DevTools and show you what happens and how you can kind of debug a web component. So this is a tab, a selecting tab strip that we have for our code that you can kind of poke around, see the code. And then you see the live output on the right there. So I'm just going to open the DevTools, open the inspector. And immediately, it's just DOM and HTML. So I can just poke around with the inspector, see what's going on, and see how this custom element is built. You see that there's a shadow DOM attached to some of these elements. I can open up the console, and I can start tweaking properties, DOM properties of this element. So I can change its selected property. And you can see a live update in the DOM. Since we're integrated with the platform in all ways, we can actually change CSS and affect how this component looks just by changing the color of the text of one of its panels. I can discover it's got a panel's property, and it's got an API. It's got methods, so things like updated panels. We can call that, and it does something. Who knows what it does? But we're discovering that in the DevTools. And it's got a bottom property. This one happens to actually change the way this thing renders. And by changing that, you can see the live DOM update. So this is really cool. And the fact that we're integrated with the tools and the platform means we can build apps even better. So for the rest of the presentation, I'm going to show a lot of code. Web Components is one of those things where it's a developer feature. It's for us. It's not a fancy feature like WebRTC or WebGL. So it's not sexy. It's actually for ergonomics. It's for you guys to produce a reusable code. So let's dive in. Let's talk about custom elements. Custom elements is sort of the foundational piece of Web Components. It allows you to create new HTML and tell the browser about that HTML. So let's build a button. There's no better way to actually learn this stuff than to actually build something. So we'll start simple. We'll build this very simple component, a button component. Now, if you probably know, right, HTML already has a button. But a lot of people stopped using button over the years. It doesn't look that great. It renders differently in different browsers. But it's got a lot of great built-in features if you think about it. Rob talked about focusability and keyboard behavior. It's got that built in. When you tab into this thing, it actually highlights itself. And it has this effect, this gradient that applies. It's got special properties to treat it like a button. It's got a disabled attribute that you can apply that actually affects the rendering of this element. And if you put this in a different context, if you put a button inside of a form and actually does something different, right, it submits the form and participates in the form submission. So this is magical and kind of cool. We get all this stuff for free just by declaring this on the page. But of course, we want to create a leave and better button. We'll call it a fancy button that's got a nice little ripple animation when the user clicks on it. It's got a box shadow if you apply this raised attribute. And we can make this thing behave exactly like button. So I'm going to do what Rob told you not to do, which is create a div button. Don't do this. This is just building up the example. But this is the way you might start off with this, right? And you could start off by using button and then remove the default styles the browser applies. But we're just going to have a blank slate here. Create a div, give it a class better button. And essentially, that class is just going to style this thing to look like a button. So it's got a box shadow. It's got some border radius. It handles disabled state if you have this disabled class on it. So we're just making a thing that looks like a button.  So we'll add a tab index 0 and a roll equals button. We'll actually tell the screen reader that this thing is going to be a button, and we'll allow users to keyboard into our button. And maybe we want to have this ripple effect. That's the extra functionality we're adding to the button. So we'll rip the element out of the DOM and attach an event listener for that. And if the button isn't disabled, we'll allow people to click on it and we'll draw the ripple animation. So very simple, not much going on here. But this has a couple problems. The first is that users have to know how to style this thing themselves. They have to kind of know all that magic that we gave them, put that on their page. And the second is that we have to add a click handler for all instances of the button that are used on the page. It's not very reusable. I can't really reuse this thing. Users have to add their own tab index equals 0 and roll equals button. It's not very componenty. So of course, we can do better. And the answer is to use a custom element for this. We can create something that's reusable. So the first thing I've done here is just replace div with the name better-button. I'm creating a custom element, and custom elements have to have a dash in their name. That's just part of the specification. We are calling our button a better button. And instead of CSS classes to style this thing, I'm just going to use HTML attributes. It's a little cleaner to read, and it's going to map really well to the JavaScript properties we're going to define on this button. In my CSS, all I've done is just replace classes with that new tag name. Nothing's changed about the appearance of this thing. Of course, we can do even better. We can progressively enhance this markup from itself right now to something better. We can give it an API and use JavaScript to do that. And so the way you create a custom element is just define an ES6 class. We'll call it better-button, and it's going to extend the browser's native HTML element. So it's going to gain all of the DOM API. And since we're creating a button, maybe you want to have a disabled property just like the normal HTML button has. So we can do that in ES6, just for define a getter and a setter for disabled. And in this case, what I'm doing here is I'm keeping the attribute in sync with the JavaScript property. So if somebody changes the JavaScript property in JavaScript, we're going to actually reflect that value back out into HTML and set the attribute on the HTML tag in the live DOM. And other properties on the web today do this, too. The hidden property, the ID property, if you set them in JavaScript, they'll actually update the markup as well. So we can do that in custom elements. Something else you can do is go the other way. So if somebody tweaks an attribute, you want to get a notification about that. You want to react to that. And so for that, there's two special things you can do in element code. The first is to define and observe attributes array. This is sort of a whitelist to say, any attributes in this array, I want to get a callback for. And so what the browser is going to do, if it observes a change to one of these attributes, is call it your attached attribute change callback. It's going to be provided the name, the old value, and the new value that the attribute is changed to. And here what I've done is basically just look at the disabled property when that happens and set a tab index in an already disabled attribute accordingly. So we're kind of mimicking the button again by adding this functionality ourselves. Something else you can do is run code every time an instance or your element is decreated and declared on the page. So to do that, we'll just define a constructor. And the first thing you need to do in element constructor is call super. That's just part of the spec. It needs to set up the prototype correctly. And then from there, you can put in whatever you want. So in our case, we're going to define a key down listener. We want to actually have when people press Enter on our button to react to that. And that's what this code does. And then we'll add that click listener that actually adds the ripple animation. So if the button's not disabled, we'll allow people to click it and draw the ripple at the user's click location. We can also react to when our element is added to the DOM or removed from the DOM. And so for that, we can use the connected callback. This is a great time to do any setup work. In our case, we're adding the role for screen readers, and we're adding tab index 0 at that time. And disconnected while we're not using it in this component is actually very valuable for things like cleanup. So if you add a bunch of event listeners in your component or do other kinds of setup, you can remove it at this time. The browser will call that method. If you're curious on how drawRipple is implemented, it's pretty simple. This is the way I've chosen to implement it. Just a div with a ripple class that styles this thing to look like a ripple effect. So it's a div with a border radius that kind of just grows and fades out. Pro tip, I'm using CSS containment here. We're creating a reusable component that self-contained. Mine as well tell the browser to optimize this for us so it knows to scope layout and paint. That's awesome. We can just basically drop that in our web components. And the other thing I want to point out about this code is I'm basically creating a declarative style API and providing a little bit of functionality and flexibility for this component. So if some user that uses better-dash button styles the color, the font text with red, we're basically styling that the same as the background ripple is going to be styled the same as the font color. So this is kind of cool. You can do these things in your components and document how this stuff works for users. Now we've got a component. We've defined its ES6 class. The last thing we need to do is actually tell the browser about this new element. And so the way you do that is to use the custom elements interface and call the define method. You pass it the tag that you want to create and the class definition that you just created. And then from there, the users can use this element as if it was a div or a span or any normal HTML element. They can declare it on their page. They can use the new operator in JavaScript with the element constructor. Or they can call document create element. The same tricks apply that always apply to the web. So that's a lot of stuff, right? If you think about it, there's a lot of CSS involved to make it look like a button. We have a class that mimics all the behavior of a button. And the last thing we do is have the registration. We actually tell the browser about our new element. We can do better. We can progressively enhance what's already available in the web platform. So again, we have a button already in HTML. Why are we reinventing the wheel? Why are we mimicking everything it does for us? Why don't we just progressively enhance the button element? Well, sure enough, we can do that. Custom elements allows you to extend HTML that's already existing in the web. So instead of extending the HTML element, we're going to extend the HTML button element. We're going to extend the specialized version of that element. And then what happens is this is our entire class definition. So all that work we had to do before with tab indexing and key down listeners, all of that stuff goes away because we get the DOM properties and methods that button has for us just for free. And then we add the extra functionality. In this case, it's that ripple animation with the click handler. So this is really convenient. This is called a customized built-in element. And the way someone declares this on their page is a bit different. So instead of using better dash button, they're going to actually declare a button, and it's going to be an is better button. So this button is a better button. That's how that reads. So we've done a lot. We've made a custom element. It's reusable. It's a fancy button, a little sexier than the normal HTML button, but it's got all the benefits that the original one had in it. I want to take it a little bit aside and talk about this call here. The notion that you call custom elements dot define with the tag name, and you kind of upgrade the element. What's happening is what is called an element upgrade. This is part of the custom element spec. You kind of endow your markup with an API by defining some JavaScript that gives it its API and its methods and properties. So you take an HTML element, and you make it something better. So the notion here is that custom elements are really just progressively enhanced markup. You're taking something that doesn't have any functionality, and you're progressively enhancing it to have functionality. We've taken advantage of this notion of element upgrades on the developer's code lab site. We built it in Polymer. And if you dissect this thing, you can actually see where the components live on the page. So our search bar is a component. Our sorting and filtering widgets are components. And also this main section in the center is a card sorting element that knows how to rearrange its children based on the user's sort and filtering. So that's how this thing is kind of structured. I want to show what happens when we load this page. I'm going to slow it down to a 3G connection so you can really see the effect. So we'll navigate to the page, and instantaneously it paints. The browser, it turns out, is really good at just painting pixels, HTML, CSS, very small payload. And then eventually what happens is the components fade in. We'll see that one more time because it was kind of fast. So first paint is really fast. And then as the components upgrade and get their supercharged API, they fade in asynchronously. So it turns out this is really fast. I clocked this at about 2.2 seconds for a first paint on a Nexus 5 3G connection. And of course, this would get even faster with a service worker if we had caching and the user came back to the site. So the way you do this is to use another feature of Custom Elements. It's the CSS colon define.  So in our case, I'm styling that paper tabs that selecting widget, basically giving it a little layout, giving it initial height to kind of replicate the styles that paper tabs defines in it. And I'm also just hiding it, right? On page load, it's just hidden. And then when the browser removes this defined pseudo class, our element will transition in. So the effect is that these things kind of just take up placeholders and you see them just fade in when they're ready. The rest of the page is very simple. Just a little bit of markup at the top to describe the website. We have that sorting and filtering section that's got some custom elements in it, the paper tabs element. And the main bulk of that intersection is this card sorting element. It's just a custom element. It's on the page ready to go. Everything's server-side rendered, so all these links just show up on page load.  So this is great. This paints really fast. The contents there, available to users, they can start reading it right away. And then eventually, at some point in the future, we actually register these elements in the browser. And at that point, that's when the card sorting element gets its API, gets its filtering API and its sorting API. That's not critical on page load, so it's a great story for progressive enhancement. So let's think about what we've done so far. In a very short period of time, we've created a reusable component. It's got custom elements API. It's got reusable styles. If you drill down into the DevTools, you can actually see a problem, though. One of the implementation details is kind of leaking. This ripple div that we're creating dynamically is kind of mucking with the user's DOM. It's taking up space. Implementation detail, they really shouldn't see that. We can fix that. The answer here is to use another part of web components, which is ShadowDown. So if you think about today's elements, there's the select element, right? And you drop a couple of option tags in it, give one of them the selected attribute, and somehow the browser magically knows to render this thing as a dropdown widget and select the correct element. That's kind of cool. If you add the multiple attribute to this HTML element, it completely changes the way it looks. So instead of a dropdown, you get this multi-select widget. Pretty magical. The video element, a couple of attributes on the single tag. You get an auto-playing video with video controls for free. Where did these UI controls come from? And input type equals date, or any of the various specialized versions of input are pretty cool. Instead of a text box, text input, you get a UI that allows you to select a date. So this, my friends, is ShadowDown. ShadowDown allows us to do the same thing the native browser vendors have been using for a long time. They use ShadowDown to create these widgets and hide away markup and CSS. We can do that inside of our component as well. So in order to use ShadowDown inside of a custom element, it's just one or two lines. So inside of the element constructor, we can call this.attachShadow. That's going to create a document fragment, a shadow root that's going to kind of attach itself to our element. And we can fill that document fragment with anything we want, any markup you want. In our case, we're bringing in those styles from the page, so users don't have to define them themselves. This is great because styles inside of ShadowDown are scoped to your element. So that means styles and selectors aren't going to bleed out into the page, and page styles aren't going to bleed into your component. So that's why you see I've replaced some of the selectors here. I've changed better dash button to use colon host. That's the way you style the element itself inside of ShadowDown. And my selector for the ripple div has gotten simpler. We're just using dot ripple now. And that's because, again, these styles are scoped. We can use common IDs again. We can use common class names again. They're not going to collide with the main page because we're inside of ShadowDown, which has this scoping for us. And the last thing you see is I've moved in this ripple div. It's become part of kind of the implementation detail of my component. Users are not going to see this inside of their DOM. So let's take a look at this. When you do this, when you call this.attachShadowRoot, what happens is that you get a shadow root attached to your better button. That's great. We have ShadowDown in the works. And you can see that we have the styles scoped to this element. You can see the actual style information. This thing looks like the button, but it's actually lost something. It's lost that fancy button text that we have and that users have declared. And so the reason for this is that ShadowDown's kind of like a party. You have to invite things into it. You have to invite things in the outside world to render inside of your ShadowDown. For this, you use composition with the slot element. Slot's another element that's part of ShadowDown that you can use for bringing those things into your ShadowDown. So let's say I have a ShadowDown that looks like this. I have a style information and a slot element. What's going to happen here is that when someone declares a better button on their page, fancy button text is going to get projected into this slot. It's going to render at that location inside of my ShadowDown. And the effect is that you get the text back. That's exactly what we want. You can also have default content. So if someone doesn't provide the text themselves when they use our component, you can render just a button as the default text. And you can have an entire DOM tree in here if you wish. It doesn't have to just be text. And there's also a more advanced form. It's called name slots. So we can have as many slots in your component in your ShadowDown as you want. In this case, we're defining a slot with the name equals icon and a default slot that doesn't have a name. When someone uses our button like this, maybe they want to have a little gear icon next to some text. What's going to happen is that the name slot is going to get projected into that location. It's going to render in that slot. And the settings text is going to render in the other slot because it's not using a name. The effect is exactly what you'd expect, which is that gear icon in a settings text. So I think of composition, I think of a slot element as kind of a declarative API for your element. It's a way to really provide a level of functionality and customization. And this is exactly what the select element and those other native elements are doing, allowing for you to configure their UI based on attributes. But let's say somebody wanted to use our button like this. They want a ginormous pink button with a lot of padding and a different ripple color. Well, since we brought the styles into our component, how do you actually allow for this type of customization? The answer here is to use another new web platform feature, which is CSS custom properties, essentially CSS variables. So what we can do inside of our ShadowDown CSS is basically have placeholders for users to fill if they want, if they so choose. Support for this is really good right now, actually. Everyone but Edge has this available as a native feature. So when someone uses your custom element, they define some CSS for better button. They can fill in the values if they so choose. So they'll define, in this case, they're defining the button padding and they're defining the size of that ripple animation we're going to create. And so in this case, we'll use those values. But if they didn't provide them, again, we'll just use our defaults that we set up ourselves. So CSS custom properties is a great way to have placeholders and allow people to customize your component and the styling of your internal elements in your component. So that was fast. Let's recap what we did. In a very short period of time, in less than 30 minutes, we created a reusable button. It's progressively enhanced from the native HTML button, which means we have all the benefits that the browser in that element already gives us. It's got keyboard behavior, all the stuff that Rob talked about baked in. It's self-contained using DOM and CSS scoping of Shadow DOM. It has an imperative API, a JavaScript API, thanks to custom elements. It's got a declarative API, thanks to composition and the slot element in Shadow DOM. And it's also configurable. So people can use it in different ways with HTML and they can also configure the CSS. That's pretty cool. So this is why I'm so excited about web components, because it allows for this flexibility, allows for the good reuse on the web again. And this is just a button. You can imagine building an entire app out of components. If you don't want to get started, so if you do want to get started, go back, you can actually check out and try to use web components yourself. So Polymer has put together a really awesome set of reusable and very useful components for different types of things. And there's also custom elements.io that has a list of web components you can check out. So with that, that's all the time I have. Again, this is me on Twitter if you want to hit me up with questions. I think now we're gonna transition to a break.  But I really do appreciate you guys sticking around. Thanks for your time. Go componentize the web.


Hello everyone. My apologies, I don't think the monitor here likes Linux, so I'm just using Alex's laptop. Thank you for that. So my name is Nick Vidal. I work with the OSI, the open source initiative, and it's a pleasure to be here. Thank you, Alexi, for the invitation. And so today we're going to talk about open source AI. There has been a lot of talk about open source AI, but there's no clear definition of what's actually open source AI. In fact, there's the European AI Act that has been progressing rapidly in Europe, and over there on this legal document, they stay free and open source AI, but nowhere in this legal document do they actually define what's open source AI. So the OSI is working together with the community to try to come up with a definition. And this slide's here. I'm going to go over an overview of what's actually AI, generative AI, and so I'll pass through quickly here. So this is a stable diffusion from stability AI, and this is a question. What if Elon Musk was living on Mars? This one here. What if Wall E, the Disney character, was a real human person? And these are some amazing images created by generative AI. Next we have the Joker as a Disney princess. This one's a bit scary. And finally Harry Potter surfing at the beach. So all this was created using open source and generating those images. And it's quite amazing how it was able to generate that, right? It's groundbreaking. So we have the diffusion model. We also have other models, right? Like attention and transformers. And so what is generative AI? Basically we have a prompt once where we enter text or we enter image or whatever and it generates a response. So here we have what's the capital of Germany and using those large language models is going to respond the capital of Germany is Berlin. All right. This is the diagram of how this works basically. So we have a prompt where somebody asks a question. And this goes to an application. Let me see if we can. All right. And this is going to ask the large language model to see if there's a response. And to create this large language model we use a training data, a huge amount of data. And this is going to return a response to the user. All right. Besides using a training data, you can also do some fine tuning to adapt this large language model to use cases. So for example, we can adapt this large language model to generate programming language codes, right? Or to question and answer type of chat style or any other specific tasks for medical research as well or other topics. Another form of enhancing this is by using prompts engineering or RAG where you can use live documents or live data. And when you use a prompt, it's going to seek if there's something more recent or something more precise using embedding. And it's going to work with the large language model and return a result is much more precise. So this is the basic diagram for generative AI. And let's go, this is very generic. It works for both proprietary models and open source models. But let's dive into what's actually open source AI. And what's interesting here is that we can break this into four components. So we have the software. The software is the easiest part. We clearly know what's open source software or what's not. There's at least 25 years of history behind this using the OSI licenses. But much more than that, the free software movement that started before, it has four freedoms. So you can clearly explain if a software is actually free and open source software or not. So this is the basics, right? The software is very well defined. However, with data, this is more challenging because the data, there's some privacy issues. There's a copyrights around data. Sometimes you cannot fully release the data or the data sets. So there are some challenges around that, right? Maybe it's under Creative Commons and you have to give attribution. How does that work for large language models? There's also the model architecture and the weights as well. So when Yama was launched, the first version, the weights were only shared with researchers. And this weights got leaked on 4chan. So people started using Yama, even though they couldn't basically use the weights, even if there were not researchers because this got leaked, right? We know that there's a whole community around open models, right? Open source models. So hugging face, we can see here the leadership board where we have a whole bunch of models coming up every week or every day. It's very challenging to keep up with all the news happening. So this is pretty exciting. And also there was a leaked documents from an engineer at Google where they see that open source is really growing and outspacing proprietary models. We're not there yet, but even though your company might have the best engineers, the best team, it's very challenging to compete with a global community of developers, of researchers, and also this iteration that everyone can develop on top of other models. So this document basically says that open source will outpace proprietary models and Google or OpenAI don't have a modes, right? And we're seeing this happening, this rapid innovation and iteration. And so what's happening is that we see that companies like OpenAI and other organizations are trying to create a regulation difficulty for startups, right? Make it really challenging for startups to obey all the laws and all the regulations. So only the big players will be able to play this game. But we've seen a lot of companies also trying to promote a more inactive scene, right? So we have Huggingface, for example, or Stability AI who have written letters to Congress, to the American Congress to promote open source AI. Recently, Meta launched Yamachu. It's not open source. OSI created an article explaining why Yamachu is not open source, but Yamachu is one of the most open models that there is. It's almost open source, right? And it's rapidly being adopted. And we also see a question around privacy. When you use OpenAI, when you use ChatGPT, companies are basically giving away their data to a third party. And so we've seen Apple, Goldman Sachs, Samsung prohibiting the use of ChatGPT because of those questions. When you use open source AI, when you use open models, you can have this on-prem. And so your data does not get leaked. For companies, startups or even large companies, having your own large language models, running on-prem or using privacy enhancing technologies, running in the clouds, makes much more sense. It's much better because you have a lot of sensitive data. You don't want to give that away, right? So here are some advantages of using open source AI. So the transparency of the data, the data that you use for training or for fine-tuning, this is very much transparent. When you have a proprietary model, you don't know what has been used to train the data or to fine-tune the data, right? There's also a question of independence. You're not dependent on a company making changes to those models. If you want to fine-tune that, if you want to change the direction of those models with open source, you can do that. Also security, it's much more secure. You don't have to talk with a third party. You can run this on-prem or on privacy enhancing technologies on the clouds. And finally, customization. You have total control over the data, over the model, over the software. So it's much more customizable. Other advantages as well, it allows for this fast iteration, collaboration with a global community. And it's just more diverse, right? We see this happening at hugging phase, models that are being created week after week, right? And it's very difficult to actually keep up with all this innovation. And finally, other advantages. It allows for an easier interoperability because since it's open source, you can integrate it with your own systems. It allows for a cost reduction, especially a large scale. If you're open AI and shy GPT can be quite expensive if you're running this like several thousands API calls. But if you're running this as part of your own infrastructure at a large scale, it makes much more sense. And also performance, because you don't have the latency of transmitting that data back and forth. You're running this close to your data, right? So these are some of the advantages of open source. And also, I found this interesting tweets by Emmet, who's the CEO of Stability AI. This is a company that's valued at four billion. And it says here, for people asking, but how are open models going to make money for business? Imagine this, every government, every institution, every company, every one of those is going to have a model, an open model that's audible in the future, hopefully, right? This is like a trillion dollar markets. How can we enable that? How can, and this has a huge potential, right? So basically, as a conclusion, comparing proprietary models and comparing open models, open models offer a whole bunch of advantages. There's no data leakage. You have privacy and security. You can customize everything, it's not restrictive. It's not a black box, it's more transparent. It doesn't have a locking. It's much more heterogeneous, more diverse. It's not homogeneous, right? So open source offers a lot of advantages. And so as part of the OSI, we really believe in open source. And there has been a lot of talk about open source AI and what exactly that is. And we are working to actually define what's open source AI. So what's interesting is that the OSI does not define what's open source software. It's a community consensus.  And we're doing the same process for open source AI. We're bringing together several communities. We're working with nonprofits like the Linux Foundation and Wikimedia and a whole bunch of other organizations. And trying to come up with a definition. And why is that important? When we have this clear definition, it allows for companies, organizations to clearly understand how they can use those open source models. We need that. And just how open source software has enabled companies and organizations to benefit from open source, we're trying to do the same for open source AI. So let me try to come up with, let me try to open a tab here. Can I open a tab? Yeah, yeah. All right. I think it moves around with me. Let me see. It's weird, right? Oh, wonderful. But you won't be able to see it. Do you just bring up a URL and then move the screen? Yeah, that's all. You can just bring up a URL and move to the right. All right. So this is the URL, opensource.org slash deep type, where we're working together with the community to create a definition of what's actually open source AI. And this has been pretty exciting. We are, so this started in June. We had a meeting at the Mozilla headquarters where we gathered about 15 people to start those discussions. And later we had a community review in Portland, together with Fawzi. We were also a part of the Linux Foundation open source Congress in Geneva, in Switzerland. We're going to be next week holding the deep dive webinars online. And this is very exciting. We're here in Bilbao to have those discussions, to have a review of the definition. And we next month, we're going to be at All Things Open in North Carolina to have the first release candidates of this definition of what's open source AI. And after we have this release candidate, we're going to put this online and allow people to comment around those changes. And hopefully by 2024, we hope to have a clear definition so that it will help everyone have a clear understanding of what's open source AI. We have this webinar series that's happening next week after Bilbao. And we have a whole bunch of very interesting speakers from the Allen Thuring Institute and other organizations. So everyone's welcome to join. And so that's it. I open to questions and thank you so much for being part of that. Yeah. Just a quick question. You said there's a community review happening in Bilbao. Where is that happening? So right here, I'm hoping to have those discussions. And I'm going to show a draft of this definition of open source AI. And I hope to connect with each one of you one-on-one to have those discussions. So feel free to reach out to me. Thanks. Is the draft at that link on the opensource.org deep dive? It's not there yet. We have a small group that we're working and we're going to have this official release candidates at all things hoping. Yeah. But I'll be happy to share with you. It's okay. Yeah. So you can share it privately one-on-one. Yeah. For feedback. Yeah. This is David. My question is this. Since the large language model today is very expensive to train. Yeah. So I'm wondering how open source kind of a large language model can sustain to the big proprietary like Lama and things beyond that. That's a question that basically is how relevant of this open source large language model in terms of capability compared to those proprietary due to the very expensive of those training resource. That's my question. Yeah. And secondly is that the license model seem to be those available one is getting changed to the non-commercial based license. You can see the train on hocking faces. So that mean what if this component scratch is very expensive. And then if you want to derive from those proprietary that also become very restrict. Yeah. So how do you foresee that open source large language model can head down the road. Yes. So that's a very good question. Indeed it's very expensive to create a foundational model. But we do have some organizations like Lion or a L4 AI which we are in contact with which are organizations that are either they have support from governments or other sponsors who are allowing them to use GPUs or for training rights. So it is a challenge but it's finding a way. Basically finding a way. Also we are seeing that sometimes larger does not mean it's better. Right. We're seeing smaller large language models or we call it small language models. They are just as good or sometimes even better than those foundational models that are very large because they're very focused on an area like for example healthcare or finance or whatever. The quality of the data is really important. And sometimes when you focus on that it's cheaper to create those models and sometimes it's better as well. So we're seeing that regarding your second question. Yes we do have those challenges. And this is something that we have to help define and help understand around the licenses and how we can make it more open while respecting all the other challenges like copyrights and privacy. And so this is an open challenge that we have to come up with. Yeah. Yeah. Any questions? I have a question, Nick. So compared proprietary models, open source models, right? And kind of the hypothesis is that you will have you know, municipalities, hospitals will have these open source models and you say the advantages is no data leakage but if you deploy a model on Pram you have multiple users that still can be leakage in turn between the users, right? So and also what I'm also wondering about and I think it's a hard problem whether what your thoughts are. So let's say a hospital trains a model, right? And like on the use cases obviously they will have patient data. So you cannot have all of that model being open source available. Like it may be based on open source technologies. It may run on open source tools but I don't know if you want this model to be available for inspection for anyone who wants to see it. So how do we define? Because model now has chunks of data in it, right? And so how do you wrap? Like what's the community thinking given what you start in June, right? Like how do we have an open source model which encapsulates sensitive data, right? How do you kind of distinguish between sensitive data and model and what does it mean to be open source if you cannot give this data to anybody who asks for it? Yes, so this is one of the limitations of large language models and we're seeing more and more a combination of large language models with knowledge graph and a RAG prompts engineering to allow a better access control, right? So when you have very sensitive data probably you don't want to have that as part of the model. You want to have that either in a knowledge graph or somewhere where you can have a better control over this data. And this is the direction they were seeing happening. Yeah. Thank you. Any other questions? Tim, do you see anything on the live stream? Vengeance. I think we have a couple, a few people on the live stream and I didn't see questions yet. Okay, great. Thank you, Nick. All right, thank you so much. Thanks.


Welcome to the session of microeconomics and the microeconomics. These are the learning outcome of the session. Before proceeding, let me ask you one question. What are the fundamental questions of the economics? You can pause the video, think about the question, write down your answer in your notebook. In order to see the answer, you can resume the video after writing the answer. So there are three choice problems have become three central problems of the economy. What to produce, how to produce and for whom to produce. The microeconomics. The microeconomics is a subsection of the economics that places attention to the behavior of individual within the market. It has been defined as the branch where the unit of study is an individual firm or the household. It studies how the individual make their choices about what to produce, how to produce and for whom to produce and what price to charge. It is also known as the price theory and is the main source of concept and analytical tool for managerial decision making. The various microeconomic concepts such as demand supply, elasticity of demand supply, marginal cost, the various market forms, etc are the great significance of the managerial economics. The microeconomics also engages with the idea of scarcity, quite often scarcity means a limited availability of the resources. The use of the microeconomics. As purely normative science, the microeconomics does not try to explain what should happen in the market. Instead of that, microeconomics only explain what to expect if the certain conditions changes. If the manufacturer raises the prices of the car, the microeconomics says that the consumer will tend to buy fewer cars than before. If the major copper mine collapse in the South Africa, the prices of the copper will tend to increase because of the supply is restricted. So what is the marginal utility? The marginal utility quantifies the added satisfaction that consumer garners from the consuming additional units of the goods and the services. The concept of marginal utility is used by the economics to determine how much of the item consumers are willing to purchase. The positive marginal utility occurs when the consumption of an additional item increases the total utility. While the negative marginal utility occurs when the consumption of an additional item decreases the total utility. How the marginal utility works? Economics has utilized the concept of marginal utility to gauge this how satisfaction levels affect the consumer decisions. Economics also have identified the concept known as the law of diminishing marginal utility which described how the first unit of the consumption of the goods or the services carries more utility than the subsequent units. These are the multiple kinds of the marginal utility. There are three most common ones which are as follows. A zero marginal utility, positive marginal utility and the negative marginal utility. A zero marginal utility is when having more of an item breaks no extra major of the satisfaction. For example, if you receive two copies of the same issues of the magazine that extra copy has a little added value to it. A positive marginal utility is when buying an extra version of an item is satisfying. For example, one such example could be a store promotion where the customer can walk out with the free pairs of the shoes if they buy two pairs of the shoes. Negative marginal utility is where too much of an item actually detrimental. For an example, while correct dose of the antibiotics can kill harmful bacteria, too much can also harm the person's body. So, under that condition the marginal utility will be negative. So, what is the equimarginal principle? The equimarginal principle is an important idea in economic subfield of the managerial economics. It is also known as equimarginal principle or a principle of the maximum satisfaction. The equimarginal principle state that the consumer will choose a combination of various goods in order to achieve the maximum total utility. In other words, the consumer will allocate spending their income across the goods or the services so that the marginal utility per dollar or rupees of the expenditure on the final unit of the each good purchase will be equal to the all other goods which are purchased. It explains the way in which the customer will spend a portion of their income across the variety of different goods in such a way that in order to maximize the overall satisfaction, it can be described like the marginal utility of the A divided by the price of the A equal to the marginal utility of the B divided by the price of the B. So, according to the equimarginal principle, when the consumer is making a purchase decision, they will consider both marginal utility of the goods along with the price of the goods. Taking both of this into the consideration, they will make a decision that balances each other. Let us see the macroeconomics. As the name implies, the macroeconomics look at the bigger picture. The macroeconomic is a study of entire economics and the economic system especially which is considered under the broad economic aggregates such as domestic product, economic growth, national income, employment, unemployment, inflation and the international trades. In general, the topic covered in the macroeconomics are concern with the economic environment within which the firm managers operate. For the most part, the macroeconomic focuses on the variables over which the managerial decision makers has little or no control, but may be considerably important in the making of economic decision at the micro level that is individual firms or organization or at the industrial level. The macroeconomic is a study of the aggregate economic behavior. The macroeconomic is a study of behavior of the national, regional economy as a whole. It is concerned with the understanding of economic wide events such as total amount of the goods and the services produced, the level of unemployment and the general behavior of the prices. Unlike the microeconomic which studies the individual economic as a actor such as the consumers and the firms make the decisions, the macroeconomic concerned itself with the aggregate outcome of these decisions. For that reason, in addition to using the tools of microeconomics such as a supply and the demand analysis, microeconomics also utilizes the tools such as gross domestic product, unemployment rate, the consumer price index to study the larger scale analysis of financial decisions. So, the microeconomics and the microeconomics if you consider, the microeconomics deals with the demand supply in between the individuals which are consumers, buyers and the vendors. Whereas, the microeconomics concerned with the total economical environment which includes a studies which is related to the local, national, regional and the global economics. So, the microeconomics deals with a study of entire economy. It consider the factors such as government policies, business cycles, national income, etc. Whereas, the microeconomics include the analysis of the small individual units of the economics such as individual firms, individual industries or the single individual person. So, let us see what is the gross domestic product. The gross domestic product is also called as a GDP. The gross domestic product is a total monetary or the market value of all finished goods and the services produced within the country borders in a specific time period as a broad major of the overall domestic production. It functions as a comprehensive scorecard of the given countries economic health condition. So, the GDP or the gross domestic product is a monetary value of all finished goods and the services within the country during the specific time period. GDP provides us the economical snapshot of the country and it is used to estimate the size of the economy and growth rate. The GDP can be calculated in three ways. Using the expenditure, production or income, it can be adjusted for the inflation, population to provide the deeper insight. Though it has a limitation, the GDP is a key tool to guide the investor's business in a strategic decision making policy. So, what is the consumer price index? The consumer price index measure the average change in the price over the time that consumer pay for the basket of the goods and the services. CPI is a most widely used a measure of the inflation by proxy of the effectiveness of the government's economical policy. The CPI that is a consumer price index is a statistics over the professionals, self-employed, poor, unemployed, retired people in the country, but exclude the non-metro or the rural populations, farm families, armed forces, the people serving in the prison and those which are present in the mental hospital. So, there are two factors CPIW and the CPIU. A CPIW measures the consumer price index for the urban wage earners whereas, the CPIU is the consumer price index for the urban customers. These are the references of the session. Thank you.


There are thousands of cases similar to that of the girl named Rose Puglisi. No single one of them, perhaps, is of earth-shaking significance. And yet, taken all together, they comprise an impressive body of evidence. Evidence that there is a whole world of human experience which science has not even begun to understand. At 15, Rose Puglisi was a normal attractive American girl. If she had one idiosyncrasy, it was what she called her intuition, about which she boasted frequently much to the amusement of her family and friends. But after the night of February 1st, 1941, they ceased to be amused. About 11 o'clock that night, Rose's parents, returning from a neighborhood movie, found their daughters sitting in the living room staring moodily out the window.  I don't feel like going to bed. Worried about something, I think? No. No, not exactly.  Reluctantly, Rose climbed the stairs to her bedroom. Ten minutes later, her mother glanced up to find the girl standing by her chair. Hi, Rose. What's the matter? I can't do it, Mother. I just can't go to bed in that room. But why not? It's just a feeling. I feel as if, as if I were never going to sleep in that bed again. Well, what do you want there? Stay down here in the living room, in the big chair there. I'd rather stay awake all night than go into my room again. And neither logic nor ridicule could persuade Rose Pugliese to change her mind. An hour later, her parents retired to their own rooms. And Rose, looking disconsolate and a little sheepish, curled up in the big chair. At four o'clock in the morning, Mr. Pugliese opened his eyes and stared into the darkness. Something had disturbed his sleep, a sound, an odor strange and yet unpleasantly familiar. In an instant, he was sitting erect in his bed, tugging violently at his wife's arm. Mother! Mother, wake up! What's the matter with you? We've got to get out of here! There's a fire! Throwing their robes around them, they yanked open the door and hurried out into the hall. Oh, look! Under that door, smoke! All the fires in Rose's bedroom! Before the night was over, the interior of the Pugliese home had been gutted. Rose's bedroom completely destroyed and her bed, the bed which she had a feeling she would never sleep in again, was reduced to ashes. It was inevitable that the local newspaper should get wind of this strange affair. And when the reporter came to interview Rose Pugliese, he asked her, first of all, whether she did not think it was remarkable that her life should have been saved by a mysterious premonition. Remarkable? No, I don't see anything very remarkable about it. You see, I've had hunches like that last time and every one of them turned out to be true. No, the story of Rose Pugliese is not a unique one. Thousands of other ordinary people have had similar hunches, similar premonitions. And as long as science rejects the idea of supernormal perception and scoffs at the gift of prophecy and yet provides us with no alternate explanation, just so long we must continue to label such stories incredible but true.


This video describes properties of a trapezoid. So it says a quadrilateral is a trapezoid if and only if it has exactly and we're going to fill in the blank. If you look at the picture you can see the little arrows. We know that means parallel and that's what makes a trapezoid a trapezoid. If it has exactly one pair of parallel sides. So here we see these are the sides that are parallel. Of course you can tell that these two sides are not parallel and so that's what makes this a trapezoid. A trapezoid can also be isosceles and a trapezoid is isosceles if and only if the legs, whoops, I need to my pen here, if the legs are congruent. Now in very very important to understand in this picture, which ones are the legs? So what you need to know is that the legs are the non parallel sides and we call the parallel sides the bases. So when we're talking about an isosceles triangle it is really important that you know that the parallel sides are called bases and the non parallel sides are called legs. So a trapezoid is isosceles if the legs are congruent. There are a couple other things about an isosceles trapezoid and that's what we're going to write down here. If a trapezoid is isosceles then another thing that's true is that the base angles are congruent. Now the base angles would be the two at the bottom. So those are congruent and then the two at the top. So notice that they're not all four congruent. The two bottom base angles are congruent and the two top base angles are congruent. And then the last thing about an isosceles trapezoid is that the diagonals are congruent. So in a regular trapezoid or in a normal trapezoid the diagonals might not be congruent but an isosceles trapezoid the diagonals are always congruent.


Mountain Dew Mountain Dew. I just noticed I waved at the trailer that said Mountain Dew and not at the driver. Whoops Morning everybody we're Where are we we're in Appleton, Wisconsin? I have four drops today. I just got the first one done It took like I thought less than five minutes. I rolled back the roll tight. That's behind me See my mirror there Blue to match the truck Rolled it back.  Let's go starting to get busy back here That's my cue to leave all four drops done today I'm gonna have to let the office know right away and all the load gods know that I'm gonna be empty this afternoon so they can start Fishing around for some new freight for me for tomorrow morning And hopefully they can if they line it up today that way I can Run towards it tonight yet and be there in the morning. It's raining here. Look at this. They got practically no snow Must be nice It's four degrees Celsius outside. We're probably looking around 38 to 40 Fahrenheit For this Canadian that is a nice sunny day Even if it is raining This is how you know I'm not lying to you we're in, Wisconsin Not even two minutes into the video And there's a roundabout and I took the wrong turn I was supposed to go straight through that roundabout and turn right at the next roundabout shoot We're leaving Appleton, Wisconsin. We're headed to Manitowoc. What was the next town again? Wawa Wawa Tosuk or something and the last one we're ending off in Kenosha, Wisconsin Never actually been to Kenosha. I've heard a lot about it in the last couple years You think I'll you think I'll see Kyle? Wisconsin according to their sign that I just drove past. There's 1195 souls that live here straight north of Milwaukee and Chicago along the same coastline Lake Michigan.  Right now. He is He's the Great Lake on this is I Missed the sign. I guess if there was one two deliveries done That's only nine o'clock. Hmm. I was here early. My next delivery. I got to be there for one o'clock It looks like I'm gonna be there at 11 So I hope they got some time. Maybe they can unload me early That means I'd be at my next my last drop actually at one o'clock probably maybe maybe even noon Yeah, we're way ahead of schedule today. Today's a good day Every day is a good day, but Today is a good day. So you remember when I I replaced This light because the marker light in there had broken off from like the motherboard behind there Well, the same thing happened to this thing now on the other side So luckily I have an extra one at the shop that I can replace it with But for now I did the exact same thing as I did last time. I went on this side and cut the wires So it just flashes and then I don't have one marker light working and one marker light out That you can't have them uneven. So if they're both gonna one's gonna be off They're both gonna be off, but they're still both flashing but the wire broke off from behind this LED bar So I'm gonna try to solder it see if I can save it I Don't really like it that they didn't use stainless steel screws in here though Like all the rest of them are don't rust but the ones in here always rust Not to replace those two just waiting to get unloaded and I've got all my straps off and rolled up already My freight in here keeping it dry underneath the roll type under the tarp as soon as they come out of that door right there I'm gonna roll this back They can take their freight off and close it up We're gonna head out this way. I Have a reload waiting for me in Bartlett, Illinois. It's LTL. So it's less than truckload It's not a whole full load. We're gonna fill up the rest of the trailer on the way back in Bemidji, Minnesota So two pickups on this next load both going back to Manitoba. It's been a bad a boom bad a bad a boom better It's been a good day Trailer is empty behind me just called my shipper that I was going to go load at tomorrow morning the first one Down in Bartlett, Illinois. They're gonna load me today Because I'm so far ahead of schedule. I'm gonna be there 230. I was only supposed to be here at three o'clock Hmm Trucker of the year. No, not quite Maybe next time That feels good that feels good. Okay, so it's about 65 miles from here And I quickly run over there. It's the west side of Chicago Pick those two skids up and then I can get out of Chicago for night That's that's the whole reason to get out of Chicago for the night and be up near Bemidji, Minnesota to load my second Part of my load tomorrow morning. So then I will be back at the yard tomorrow afternoon tomorrow evening, which means I'm a day ahead of schedule this week Oh knock on wood knock on wood all over the place all the wood you can come on knock on all the wood I don't think there's any real wood in here. Huh? You know what? I got these stir sticks. This will work okay Everything's gonna go good now Chicago you never cease to amaze me It doesn't matter how many signs they put along the side of the road Slower traffic keep right. It seems that the slower traffic always keeps left 90 west towards rockford I'm actually pretty close to my shipper now already It's fantastic. I think I'm just picking up two skids like very like very little Not much at all. The majority of the load is up in minnesota And you see it. Yep. There we go. I am one of the few using their turn signals to get out of this line Everybody better have their headlights on Otherwise, I'm not going to see you in my mirror so strange that they haven't Like in the u.s. Like for my canadian friends, you know when you buy a car Any car in canada, right? You you put it in gear the lights turn on right in the u.s. It doesn't do that They can drive down the highway with their lights off It blows my mind every time I see that like how do you why? I thought all cars were made with running lights until like a few years ago, and I realized no In the u.s. You actually have to like turn your lights on for your headlights to come on So on a day like today if you're running with no headlights on in my mirror, I don't know you're there no idea but It is the way they do it, right Just if you're coming to the u.s. For the first time that's something to keep in mind You wouldn't usually think of that right unless someone mentions it That's why I'm mentioning it I'll look twice three times four times just in case someone's beside you without their headlights on Especially in chicago The city is nuts. You think toronto is bad for driving Toronto is like chicago light. I gotta say though toronto is set up a little bit worse Toronto is They had the one 401 going through through the city and then they put a toll road up there that nobody uses on the 407 At least here in chicago. There are more options. There are more freeways, which does free things up a little bit So maybe it's not as bad as toronto depends on the day. I guess I don't know.  I'm just bugging you. I'm just bugging you But seriously nobody outside toronto really likes toronto But in all fairness anyone inside toronto doesn't even know there's a whole country outside of toronto So it goes it goes both ways. It's okay We live together We make it work That's it. That's the first part now. We head up to minnesota and we fill up the rest of it It took only what eight feet So I have about 35 feet left on the trailer and I only needed 30 Did I do that math right? 53 minus eight No 45 I have 45 feet left My brain has been turned off one second. Let me reboot it I've got my brain re-brewt re-brewt bit. Maybe not Got my brain rebooted. It's just it was just starting up. There wasn't quite all the way finished 53 feet trailer right 53 feet length 53 foot trailer minus eight 45 I have 45 feet of trailer space left at least I should And I only need 30 feet for What i'm picking up in minnesota. I think it's lumber We will find out when we get there Oh, man, it's been raining all day so weird I left the snow back at home and here in like milwaukee and chicago. It's been raining But the weather's been nice the temperature has been really nice Can't complain.  I don't know what my rush is to get home Approaching destination in 300 meters on the right side That's your destination on the right side find j travel plaza West for us gallon that's it everybody just finally It feels good I've got to go to bed and move all this stuff out of my way crawl under the blankets now and Thanks for watching. Please subscribe if you haven't already if you like the video give me a thumbs up If you didn't like the video double click the thumbs down make sure you hit it twice And i'll see you tomorrow