which is basically first blockchain platform in Singapore to issue the education certificate on blockchain. Hi, I'm Martin and I'm also working as a software consultant at ZNES and I've been in software development for nine years and also building Android Redstabs using Web Components for So today, as end guys, we will go through the basics of Web Components and then we'll talk about the elements of Web Components and we will build a 2-2 demo using Web Components, can we say? And after that, we will build a check application using Lake Element, which is one of the Web Components framework and then we will talk about how we can integrate Web Components with the existing project, which you just saw at Party Library like ZEA, Tangular or Vue.js. Excited? Yeah, it seems so. Okay. So Web Components is the set of standards to like modular, reusable and encapsulated HTML elements. Basically, in today's world, if you are working on the front-end side, so before proceeding, I just want to ask one thing. How many of you have worked on Web Components? Like raise your hand. Ever heard of Web Components? Okay. How many of you are working on the front-end framework? Like any framework heard of Components? Okay. So basically in today's world, everything is on the components. Everything is component, which can be reused, encapsulated and can be modularized for your application. So every framework, React.js, Angular by Google or anything, they have all introduced components, but the only problem is technology is evolving really fast. So if any of you have worked on Angular 1 and when it switched to Angular 2, it was the drastic change. The whole application was broken and they were written from scratch again. So you cannot depend on the third party library framework always. For that, Web Components has been there for quite a long time. But since quite a few years, the support on the browser for Web Components has been drastically moved. And now most of the latest browser supports the Web Components. So while they are useful, they are framework agnostic. They don't depend on any framework. And they are written in vanilla JavaScript. You don't need any kind of secondary language for that. So why Web Components? It's basically HTML is not semantic enough to understand. There is no standard templating system. There is no native encapsulation in browser. Basically, you cannot encapsulate your styles or your markup so that it don't get overrides by the global or parent CSS. There is no way to reuse the existing HTML and everything is component, as we talk. So what are the goals of Web Components? It's basically to reuse our existing code to encapsulate the styling and markups. It provides the separation of concerns. It provides the better composition. And for theming purpose, it's really best when you want to provide the theme to your application. And it's pretty much expressive because you define your elements by yourself. And it's semantic. This is the browser support. Basically, if you see most of the latest browser supports Web Components, except for the Internet Explorer, which is developing the support for especially custom elements and Saddodom. And apart from that, Chrome, Opera, and Safari pretty much support Web Components. So these are the four parts of standard Web Components, basically templates, imports, Saddodom, and custom elements. Templates are nothing but reusable HTML, which you can define and use in your application. Imports are basically introduced in ES6, if you know. They are basically to import the HTML file in your application. It gives the flexibility so that you can write your Web Components and dot HTML file and import in another HTML. Saddodom, it's basically to encapsulate your markups or CSS. And custom elements, which basically gives you the flexibility to define your own elements. So let's talk about every standard of Web Components. So custom elements, it basically gives you the flexibility to author your own component. You can name your own component, my cool component, or whatever you want. And you can define your component and tell the parcel how you want to parse it in your application. What are the events you want to handle on that event? What are the markups you want to handle on that particular element? So how elements of that particular class will react to some changes? You can parse the props, you can parse the attributes. You can define properties on that particular element. And custom elements always define in a prefix hyphen name. So you will always have a hyphen between the custom elements so that it doesn't get messed up with the native HTML elements. Next one is Saddodom, which is basically to encapsulate your styling and markups. So whenever you define a Saddodom, it's basically attach a dome subtree to your dome root. And that dome subtree is encapsulated and doesn't get overridden by your global scope CSS or markups. It's really great for modularity so that you can just use that modular components anywhere in your application. ES module is nothing but it's for the use and inclusion of the JS documents. In part, it's also you can use it for HTML and CSS to import in your application. HTML templates, it's basically defined using template tags. And it's good because this HTML template code doesn't run by itself until you activate this code. So any kind of image, any kind of script written inside that HTML tag won't get loaded until you will activate this particular code. These are the life cycle provided with the custom elements. It's basically a constructor by default with any class you can define. Connected callback is every time your components get created and it gets attached to the dome tree. Similarly, disconnected to clear your memory and clear your detach your events. Attribute change callback is similarly whenever you pass a property or attribute to a component, this particular life cycle method will get called. And adopted callback is nothing when you reuse your custom elements from one dome element to another dome element. So here is the short definition when you can use the constructor.  And it's good for setting up the initial state event listeners, binding the event listeners, and creating the shadow dome. Connected callback is when your custom elements inserted into the dome. And it's basically good for fetching data, making ejects call, and setting the default attributes in your application. In this connected callback, similarly, to detach your event listener or cancel time intervals free up memory of your application. Attribute change callback is called like any time of element observed attribute changes. So there is one static method which is provided in the custom elements. Observed attribute where you can define your variables or observables which is going to change in the future. And these attributes can fire this attribute change callback lifecycle method every time. So it has three parameters, name, old value, and new value. Name is basically the name of your attribute which you have defined. Old value is the previous value. And new value is the change value of that particular element.  It's basically useful when you're using iframe in your application. And there's one more method which is available which is custom elements.define which is used to register your elements into the JavaScript. And it uses custom elements registry, and it defined using window.customElements.define. You will give the name out to your element and provide the class you have created for that particular element. So this is the application we are going to build now. So before that, I'm going to start with one basic example which is hello world. And for that, I think everyone is connected with the Wi-Fi. So one thing everyone can do, can download HTTP server. Everyone has NPM with them installed on their computer. Just install this HTTP server which will help us to basically run our server.  You have placed the site? Sorry guys, thanks for waiting. Okay, so for the new people who have just arrived, we have just gone through the basics of web components definition and what are the parts we are going to use to create our web component. So we are going to start with the demo of hello world, which is the basic demo. And we will modify that demo to create a to-do app later on. So I hope everyone has installed the HTTP server which I'm going to use to run my server. I think everyone has installed the HTTP server, right? Yes. Let's just start with edging1index.html file. And we will add the body tag in it. And if you want, you can add the tag with it also. With that, we are going to include our JavaScript file which we are going to create. So I'm going to give a script tag a source that I'm going to create one file helloworld.js which will be included here. And this helloworld file will define a web component which is helloworld which later on I'm going to use it. Okay? This is the very basic HTML file in which I have a body tag and I'm loading one script and I'm defining one web component. Let's open a new tab and write a JavaScript file. So we are going to use the self-invoking function. Basically, we don't want to expose our context to outside. So I'm going to use the self-invoking function inside which I'm going to define a function, basically. This is the self-invoking function in our helloworld.js and in this, I'm going to define a class helloworld. So every web component, every custom element we define, it extends one class which is HTML elements. I'm going to inherit that class. Okay, so let me just save these files so that it will look good. I will give it an index.html and I will save this file as helloworld.js. Okay? So first of all, we have defined a class and we have extended the HTML element. HTML elements give us the flexibility to attach all the native HTML elements properties to our custom defined elements. So now we are going to use the custom elements.define property to define our element. So we will write and we will give it a name helloworld and we will type the class here. So this line tells JavaScript, okay, this is the helloworld tag which has been defined by the user and it can be used as a helloworld in my index.html where I have loaded this. Everyone okay?  Super is basically to inherit the props from your parent class which is in our case HTML element. So before that, I'm going to need my template also. So I'm going to define a constant template and I'm going to create my template here. Now I'll say I'll just put the inner HTML to some hello and currently I'm just going to put it as a void. Now I'm going to attach this shadow with the mode open. I will explain this mode later like why I have used this mode and I will tell it like... Would it be possible to increase the font size a little bit? Better? I'm going to append this as a child, my template. Okay, so what I'm doing here, in this current context, I'm attaching the shadow DOM and in the shadow root I'm appending my template contained and cloning its content to its shadow root. So now let's try to execute this code. You can just run your server using npxhttp-server and just copy pasted. Let me just open the another window. It's your HTML. Inner HTML? Another file. Inner HTML. Yeah. Sorry. Okay. So we have our hello void here. Let's try to modify this hello void code and I'm going to put a dynamic content here with the hello summit or something. And we will pass this name as a property to our web component. So as we said before, what all the selectors or all the template is starting will be here in connected callback. So we are going to define another cycle method, connected callback. And I'm going to say this dot element is equal to this dot shadow root dot query selector. And I'm going to select the strong here. And I'm going to use the attribute change callback lifecycle method also, which is going to update our inner HTML of the strong. It's basically takes three parameters, your name, your old value and the new value. So I'm just going to do this dot underscore element dot text content is going to new value. So when we define a variable properties or attribute on a custom elements, we learned before that we have to define a static method, which is observed attribute inside which we are going to define the attribute. So we are going to define this method here is static get observed attribute, which basically returns the area of all the observed value. We are going to give this attribute a name and even you can check it here if you can just call it here. And we are going to pass this name as a property here. Everyone is following here. This basically defines in your custom elements what are the variables are observable in your custom elements. So which are the observable variables you are going to define in this array. So any other property if you want to pass like anything name, surname or year date of words, you can define it here. And whenever you will use this attribute and you define different kind of name here. Suppose I'm going to say so this observed value will call this attribute change callback method. One right left. Which one? Let me just check. I think I need to define it here. So there was one problem. We need to define the element inside the constructor where we are using our query selector. And inside the attribute change callback, we are defining the text content using the new value. If you have done it, you will see like for different instance of our hello world component, you will have the different value with it. And if you will see the source code for this, you can see the shadow root in your inspect element. And you can see an open written after the shadow root. This open basically gives you the flexibility to access the reference of your custom shadow root outside the dome. So after this shadow dome, if you want to reference your hello world element support document dot query selector hello world and you want to perform any operation. With the open method, you can do that as soon as you will make it close. You won't be able to access the reference to the hello world of shadow root outside this particular complex. So this is the dynamic method. Next method we are going to try using slots. So everyone is following. So next method we are going to try using slots. Slots are nothing but place holder in your template which gives you the flexibility to dynamically change the content of your template. So instead of using the strong, I am going to use the slot. And I will give, slot has this name property with which you can reference the slot in your application. So basically I am going to say, okay, my demo is the name of the slot. And I am going to comment this. I don't need. So whenever you use slot, you don't need to pass this property.  Which is basically my demo. And you will pass it over to it. And I am going to write something. Similarly, I am going to use it here. Another dip. I am going to write JS coms. Let's try. In JS instead of a strong selector, I have used the slot. And I have given it a name my demo. Then I don't need to use the query selector or anything in my template. So this slot will give you the flexibility to add the dynamic elements in your custom elements. Suppose you have defined some URL attribute and you want to have the dynamic li attribute inside it. You can define that using slots in your application. Sorry, it's just closing. There is nothing else. All the code is commented. You just directly put the slot that side. Which one? I am referencing the same slot but the content is changing between both elements. This is the same element but the inside content is different. There is JS coms text. Yeah, that's same. So slot is a place holder in your components elements basically. Which is dynamic. It's basically the children of your elements. Which is purely dynamic and variable. So this section which is here. I have defined this slot. I have given it a name to reference it into my HTML. To reference it into my any other HTML or components where I want to use this slot in my template. Second part. Here. JS coms is not shown in all my posts. I have only the first one. You have defined this slot. Okay, variable HTML. You have defined there, you have defined slots. Hello world closing, there is closing. Now, where is your JS? JS. Here is your JS, you have defined slot. My demo. JS coms. JS folder. Okay, you have defined the slot.  It's your whole course. My whole course. This is my can find it. I have a, I have a, I have a, I have a, I have a, I have a, I have a, I have a, I have a. This is also working. I hear you are running this code. Actually, there is just this error which you are using. You have to define this lot here on your element. You have to define it into your HTML element. Why is the second one working? The code is the same. Okay. The second one is going to work. One more. You just need to define this lot here. So, you have to define this lot here. You need to define this lot on your element. Now it should work. Yeah, I know this. Okay. Slot my demo. This is wrong. No, no, no. You cannot do that. Okay. Good morning. Yeah. That's why it's not working. The slot should be on your native HTML element where you are going to define which part you want to make the variable and difference it in your template, basically. So, this part is going to be variable for a placeholder for my custom element. So, I'm going to define this lot here and give it the text. So, if anyone's code is not working, please make sure that you have defined this lot on the native HTML element. Everyone is okay? Okay. So, for the to-do demo, can you please clone this code on your local system? We are going to use this repository, which is basically for our to-do demo and the next application, check application. We are going to use it. It has two folders. One is completed code, which you can use it for reference. And one is our demo, which we are going to work on. I'm going to paste it as I point out. So, everyone has cloned this apple. What happened? Refresh. Refresh. Refresh. Refresh. Refresh. Yep. It shouldn't be right. This is going to be a new demo. This is going to be a new demo. This is going to be a new demo. I think I need to check it. This should be... Flicking should be so don't be there. If you not check from the... It's still flash. You will see. It's like... Normally, it doesn't do that. That's the flexibility of web components. It just only changes the text itself so that it won't give you the flicker. Everyone has cloned this, Rappo. Wi-Fi password is here. Is that it? No, it's in the... Wi-Fi password is written here. Password is JSCon. Wifi is Lajalep. JSCon. Anyone need it, please copy and paste it here. In your code base, there would be two folders. One is the check demo and one is the todoMBC. We are going to cover todoMBC right now. Later on, we will check the check demo which is basically using the late element. For your reference, there is a completed code is also written in the demo complete which you can check out later on if you need the reference. So for todoMBC, we have defined three components for our application. One is the parent component which is todoDemo and then todoList and todoItem. TodoList is the wrapper component which is going to render all the todoItems inside it. So let's start with the todoDemo which is our first component which we are going to write. Similarly, like Hello World, we have defined the template here, created a template and put one innerHKML here. In the innerHKML, I have defined three sections basically. Header, section and photo. Header is nothing but your input box where we are going to type the todoDemo. Section is the list which will show you the todoList and photo is showing you the count of the todo which are active right now. So this is our template which is going to render in our application. We have defined this todoDemo class and we are going to define this element first. So let's use window.customElements.define and I will give it a name todoDemo and I will pass the class here. Now let's go to our constructor. It says we need to bind these two methods first. So we are going to bind the method.newTodoKup and we are going to bind another method also. Now in our connected callback we are going to append the host. So before that we also need to define the... We have also defined the disconnected callback which is basically just to remove the event listeners or unnecessary cleanup on our code. So we are just going to use this.innerHKML and we are going to assign it append the root.appenter We are just going to append the content of the template here. Next we are going to bind some event listeners which we are going to use. I am going to reference them from the complete demo item. So we are going to use keyup and todoListChange event listeners. So keyup is basically nothing when we press the enter to our input box we are going to add that todo into our demo and todoListChange is nothing but to refresh the count in our application. We are going to remove this listener in our disconnected callback. So I have just copy pasted this listener cleanup from the completed file. So I have added to listeners keyup and todoListChange and removed these listeners in our disconnected callback to clean up it. Apart from that I am going to need few query selector to put the operations to put the event on my todo list. So these are the query selector which I am going to use. So our todoList query selector is nothing but the placeholder which is going to show the list of all the todo's in our application. And new todo class I have selected to get the event to our input box in our todo demo. Then another main class which is basically nothing but the section class the list of todo's we are going to perform some operations there like delete, remove or edit. And the last word not least todoCount which is basically we are going to show the count of our todo's in our application. So let's try to run this code for now and see the UI like how it looks. So if we will run this code this is how our UI will look. We have put the CSS and everything already there in our HTML file. And if currently I will do anything it will do nothing for me. So what we have done till now, till now we have defined the todo demo custom elements. And inside that element we have defined our templates for todo demo which is basically the input box and the list we are going to show and the photo section. Inside that template we have also introduced one another custom element to todo list where we are going to render all our todo's. Inside our connected callback we have used all the query selector to perform the different operations and we have attached all the events key up and todo change. And then we did the cleanup in our disconnected callback and these methods I am going to explain it later on. Let's go to our todo list file. So inside todo list if you will see we have created a template element and give it a slot. So slot is nothing but the variable content inside your template. So here in this section we are going to define some content we are going to add some content which will be your particular todo's content or text which we are going to show there. So as we saw in our hello world example we are going to append templates to our todo's root. So before that we are going to attach this todo with the mode open and we are going to clone our template. Everyone following? Sorry. Before that we also need to define our components actually. In our connected callback we are going to add one listener to listen for the slot change. Every time the content of the slot will change and in our disconnected callback will similarly remove the listener. So every time our slot content will change what we will do we will remove all the nodes which are unknown to the todo list elements. So for that we are going to use the node type element which is nothing but we are going to look through all the child nodes and we are going to check for the node type. If node type is one which basically tells it's a native HTML element and we are going to check its tag name. If it's not a todo item we are going to remove it from our list and then we are going to dispatch the event basically. So I am going to dispatch this custom event todo list change and with that I am going to deliver the todo item element counts which are basically all the counts which I have assigned to my slot here. So this can be accessible through assigned nodes to that particular slot and this slot is nothing but the query selector of this slot which we have in slides in our constructor. Let's see what it will change. It's an object. Yeah I have created it an object. Okay. Change todo list change todo list change. Let me just check it from here. Just not dispatch event. It's dispatching the same going to be here. Okay. So this todo list is going to give us the functionality to listen for that todo change event and update the number of todoes we have added. So now we need to add the list of todoes which we are going to show down here. For that we are going to work on todo item. So by default whenever you define a template and set a root its host element has the styling markup of inline. So by default it doesn't take the height and width. So it's better for you to define some height and width on your host. So you can either change the styling of your host or put some and if you don't need the height and width on your host you can just use the existing styling. So here I'm going to give it some styling from my todo item. So for my host I have made a display to block and I did some border and font size here. We will add all the styling letters on the CSS part. Again we are going to similarly define the elements first and similarly we are going to attach the todo and clone the template into the todo root. Apart from that I have added few methods which are basically checkbox or a different operation on our todo which we are going to see later. And similarly I have selected few elements from my todo list templates. So this is my template for the todo. You will see there is an input box level to assign the level for my todo to destroy a button which is basically to remove the todo and there would be an edit button to perform the addition on my todo. Inside connected callback I have just added all the listeners on different for a particular todo what I am going to do. I am going to edit the todo, change their text, remove the todo and update the todo. So I have added different kinds of operations, click events and double click and blur of events. And in the disconnected callback I just remove all the listeners attached. And in attribute change callback I am going to just check for a switch case which will check for if it is a label or completed and I am going to assign the value to it. So it is nothing but this code. So what I am going to do if my attribute name is label I am just going to make a text contain to the new value and my attribute is completed. I am going to mark a checkbox as a check with the disk.completed property. One thing you can also notice we are going to define these two properties as our observable also. So I am going to define these here, label and completed basically.  Once we define, I have put some code in here getter and setter code inside it which is basically used to set or get your observable properties in your custom elements. So I have used two methods, set completed and set label and similarly get completed and get level which is basically to set our observable attribute and these are the different methods which we are going to use to make our todo list to perform different operations. Basically we are going to blur the text as soon as you click on the checkbox and you can double click on the todo list to edit it and there should be a remove button. So we are missing some CSS here. I am going to copy paste it from the original elements. So this is our todo list demo using vanilla JavaScript. Next we are going to look into lake element which Martin is going to explain but before that we are going to take a break for 10 minutes. For the second part of our workshop, we just witnessed how we can able to build web components using just vanilla JS without using any library or using any framework but for the second part of the workshop we will be using lit element. So there are already libraries and frameworks that help us to build web components. So libraries such as hybrid, polymers, Kate JS, lit element, SlimJS these are the libraries that we can use for us to be able to build web components a bit faster and easier. So for the frameworks we also have this custom elements everywhere.com where it lists all the... it shows us how compatible the framework is when it comes to the web components so we can try to take a quick look. So for this one we can see that Angular has a good rating, AngularJS, HyperHTML, LitElement, Polymer. ThinkRack is somehow a bit low when it comes to web component support but hopefully in the future they will cover most of the features and yes, sir class is Belty and Vue. So yeah, also apart from that I guess frameworks like Angular and Vue also had their own tools for instance for Angular they have this Angular element for Vue they have this Vue web component wrapper, I'm not mistaken and also Stancil also is a framework that helps us to build web components. So yeah, we're going to use Lit but what is LitElement? So LitElement is basically just a base class for creating fast, lightweight web components that work in any web page without any framework. It uses LitHTML properties are observed by default, elements update as synchronously when their property change. So we can think of somehow LitElement like an enhancement or an improved version of the HTML element. So LitHTML is the templating library that we're going to use later on. So basically LitHTML allows us to define or write our HTML templates using just plain JavaScript with the use of template literals. So if you notice on my right side you will see this is how pre-app VDOM re-renders or reruns every time they have an update while on the left side this is how LitHTML does its re-rendering. So if we take a look at the H1 element what happens is the whole node is actually being re-rendered while in LitHTML only the dynamic text which those numbers represent are the only ones that's changing. So thank you for code burst for the image. So basically somehow LitHTML is a bit or slightly faster compared to VDOM. It's like 30% to 40% faster depending on your browser. And then I think the only slight problem that we have for LitHTML is actually during its first render it's somehow a bit slow. But yeah I think in the future they will improve that because actually LitHTML is not using any VDOM overhead or it's not using any diffing algorithm. It's purely using web standards. So it's leveraging the web standards like it uses the built-in parser, HTML parser of the browser. It uses week map, tag template, literal. So for this slide I want you to somehow focus a bit on the template bindings because this is what we're going to use mostly later on when we're building our chat component. So to do attribute binding we just simply do let's say class attribute then the data CSS class nothing that's special but when it comes to Boolean attribute we need to use question mark for property binding we need to use the period and for event binding we need to use the at sign. So as I mentioned earlier LitElement is like an extension of HTML element so all the life cycle that was mentioned by Sumit earlier can still be used when building LitElement but apart from that LitElement added some couple of life cycle but I won't be able to discuss each one by one because we won't be able to tackle everything for this workshop as we don't have that much of a time but just to give you a quick overview the LitElement update cycle starts when we set a property so then afterwards LitElement will request an update if there is a change in the property so by default it tracks whether the old value is equal or not equal to the new value so after that it will do the performed date then should update this should update is somehow similar to I guess the React life cycle component should update where in by default this one returns true but if you want to somehow prevent the component from re-rendering you can return false on this part for the update no need to override, no need to implement it's just LitElement has this life cycle in between should update and render where in this update the reflection of properties to attribute is happening and then we have this render this one we will use this one most of the time this is where we define our HTML templates and the first updated is like this one is once the template has been created it will be called but this one only happened once so any one time work that you need can be implemented here and then the updated this happens once the the updated or the element has been rendered and finally the update complete actually this update complete is not a method it's more on a property that resolves into a promise but this one we also won't be covering for this workshop so in LitElement we have we declare properties somehow like this we need to type in static get properties then return just an object with the property name and then the property options so for the property options mostly we will be using the type reflect and no access so for the type these are the types the default types that we have for LitElement is string, object, array, Boolean, and number so for the attribute this is also going to tackle that but if you see by default if we do reflect if we mention that reflect is true then if we change the property to value to something it will get reflected to an attribute also called as property to so if we specify an attribute it's like just whenever prep one has changed the value will be set to the or will be reflected to the my-attribute, ATTR so I guess that's it these are the property options that are available for LitElement so what we're going to do for today is we're going to build just a simple chat component so it has four components so the first one is the chat demo this is the main component or the entry point component so in this one we will just need to identify whether we should show chat lobby where you can see once we're... so at first we will display the chat lobby then afterwards once we enter the username we now see the chat room with the chat messages so I think we can now start so I hope that a while ago that you have already downloaded the repost that was mentioned by Sumit so if you can go to the inside demo chat folder you'll find the client folder so for this one we have five folders one is for Angular, one is for React one is for View, Server, and Client so for the integration it will be covered by Sumit afterwards so basically in these folders these Angular React and View folder we will see how we can integrate the chat component that we built into these frameworks so for now the client component that we're going to build is located in the Client folder I also have Server folder it's just a plain web socket server if you want to try or run but this server is actually not necessary you can skip it for now but we will be able... we will see just a single error when we're building it's like a WS or web socket connectivity error but it's okay because it will not crash our application so running server is like an optional thing so before we begin first as we look into the package.json so what I have here is just... I'm using of course the lit element I'm also using the OWC dev server but you can also use Polymer CLI if you want to run a server or any server but for this workshop I prefer to use OWC dev server and we just have a roll up for bundling maybe afterwards we will use this bundling just to somehow integrate the chat component into React or View and yeah I only have start and build script so first what we need to do is we need to npm install so now let's create a source folder it's rcd and in here we will first create the chat message by the way for this one we will just use plain javascript but you can also use typescript if you want but yeah for this workshop it's just purely javascript so first thing to do is to import the lit element and the html and dcss helpers so yeah now let's start creating our class so let's name this one as chat message which extends instead of html we use lit element so somehow this looks familiar because somehow this is similar to what we did earlier when we're building a web component using vanilla js also we need to define let's call it chat-message and the chat-message so for lit element the three basic requirements that we need is first is we need to define our template second is also we need to provide our styles and yeah we need to render it so let's start first by creating a render function so we need to write this is where we will write our html template so just to check that this is somehow working we can just write chat-message and then go into the index html then for this one we'll use esx module so type should be module then source let's point it to the chat-message now we use the chat-message so to run this one we should be able to run it just npm start and yeah should be good to go yeah we were able to create our first component but of course this is not final yet but we can somehow see that we already have our chat-message working so what to do next the next thing to do is we should define our own styles just simply so for this one we need to use dcss helper it's similar on what we did for the render and then we put in our style we can add background and let's just say that this one display black yeah so we were able to apply our style so as actually we can add our styles here as well we can add this style or external style sheet we can add it here however as per lit element it is highly recommended to use the static get styles instead because somehow what lit element does is it tries to use the constructable styles sheets object so if the browser supports the constructable styles sheets object somehow what the constructable stylesheet object does is it allows as to parse and reuse these stylesheets only once so for maximum efficiency they're using constructable stylesheets as well only if the browser supports it so I think one more thing that we need to do of course later on we're going to change the styles and the template so we can also define the properties so first is we need to return an object then let's say I think for the hello world sample if I'm not mistaken we use name as the property so we can also do that then for the type it's just string then we tell lit element to reflect whenever the property changes we tell lit element to reflect the value to the attribute so to see that happens let's use the property that we defined under properties inside the render by the way if we need to somehow initialize or have a default value for our properties we should do it in the constructor so let's say the default value for name is equals to hello yeah we see sorry it's not that clear maybe we can change the color to white yeah so now we have the name property the name property default value is hello so there's two things that we can check here is first is since we mentioned that whenever our property changes it should reflect to this attribute so yeah we can try that here let's say we change the name to well we see that this changes as well as the attribute here the attribute name here but what if we change this or we remove this one what will happen so what will happen is whenever we change the name property yeah it will not just reflect so if we want for a property to get reflected to the html element we just say reflect to so I guess that's I mean basic to get us started for building this chat message so starting now I might need a bit of a copy paste skill so let's go on to the chat message so for this one I'll be copying this one first and then for the properties we're going to have two properties one is from and the other one is outgoing so what this is is from it's more on the name of the server so that we will be able to see in the chat message where the message came from and outgoing is just a flag for us to identify whether it should be a line right or a line left so I also need to copy all the styles so I think we now have or we have now completed the chat message but just to have a quick idea of what is happening on this render portion so first is whenever this or the from property changes we will get the value and if the from is null or undefined or it's not set so by default we will have the anonymous as a value then the initial is just like the first we'll get the first letter of the name then for the html template first is just the badge we just pass in or bind the initial also we did the same for the name and we're also using slots because for slots we want the content or the content of the template of our html tag to be projected on this portion so if we now try to modify this chat message and we add let's say Martin then say hello so now we have this element so we can also see how it looks when it is an outgoing so basically if it's an outgoing the direction will be on the right side portion but if it's not we should see it on the left side so if we since we do reflect so we should see outgoing here so I guess since now we have the chat message we can now proceed on creating our chat room so we first create a new file so since we already done the basic stuff so as much as possible I want you to create this chat room maybe just the skeleton or in you add the or you import the lit element then you write in the class with a chat room message that extends lit element then add the static get styles and the render also don't forget to define your element so yeah so I hope that you're able to come up with this structure so first what I'm going to do is first is we need to have two properties username and the message list so we can type in string and the message list which is an array so for this one I'll just copy the styles and I'll just quickly copy the render so if one thing that we use in these styles is if you're familiar with CSS variables the native CSS variables or the ID custom CSS properties we're currently using that here because later on when we try to integrate this one in React or in view we will be able to somehow change the look and feel of our chat component so for this one it's I think it will be somehow I assume that everyone have is familiar with tag template or template literals so for this one we can do the loop here but we need to return the HTML element if not we won't be able to see this one rendered if we're not using the HTML element for displaying the element so if one thing that we need to see is this one so this we use the Boolean attribute binding so if in case you're wondering why we need to use the Boolean attribute binding for this one if we change this one to this we have some error earlier in the future because what will happen by default is if this message outgoing is not false or undefined the outgoing value will be undefined string since which is not what we supposed to do that's why we're using the Boolean because if we use the Boolean what happens is the value that this outgoing property will receive is pure just through our false not string Boolean so I'll also be copying the rest of the code so what we're doing here is first we define our own custom setter and getter if you still remember earlier in the slide I have mentioned the no accessor so by default LitElement provides the accessor so they do LitElement the setter and getter by default but for this case we did our own accessor so we added our own setter and getter so for this one we actually don't need these request update because the we're not using the username for the rendering so we don't want the LitElement to re-render whenever the username property change so one of the things that we need to take note is if we add our own custom accessor we need to trigger the request update manually and pass in the name like what we're doing here earlier we need to pass in the name for this case username and the old value for the Lit HTML to do its rendering again we need to trigger this when manually when writing our own custom accessors but for this case as I mentioned we don't need this as we don't need LitElement to re-render whenever the username changes what this does is just whenever we provide him the username it will try to connect to a web socket server and for the one of the life cycle hooks that was mentioned earlier is the first updated so in here we can have our reference to the input on this case and also you can also put your let's say if you're going to do focus on the input after the element has been created for the first time you can do that on this life cycle so I think that's it for the chat room so if we go on to the index.html and if we replace this to chat room I hope we should be able to see we're inside the chat room so one thing I want you to take note of is if you see whenever we add in oh I have an error we need also to import the chat room at the chat message rather because we remove the chat message from this one from index and since we need the chat message inside the chat room we need to import the chat message so now we should be able to so yeah we just have this undefined error because we didn't provide a username I think what we can do is instead of yeah we need to provide now we have this name and the message and the initial so if you notice we have this error but we can ignore this one as I mentioned earlier but for this one I want you to take note of this because what we did is whenever we add a message to the message list it's like we're getting all the message and concatenating it with the new message this is because by default if we do mutation change on our array or object the element will not be able to know if something has changed on that object or on this array so one thing we can do is we can actually try to use push we can push the new message object instead but for for the lit element to be rendered we need to mention the request update manually but first I just comment this one first so that we can see that our app is not working I mean we're adding but it's not re-rendering because as I mentioned if we do mutate the object or the array by default lit will not be able to identify whether change happened in an array or object so we need to trigger request update manually so now if we type in we see the same result so we can get this one and now I guess we can start creating the chat lobby so let's first create a new file and call it chat lobby so we're just going to do the same thing first we need to import lit element then the HTML and CSS helpers then we create our class let's name it chat lobby and extend lit element also we need to define our element so we call it chat lobby and we pass in the chat lobby class next thing to do is to write the static get properties if we need but for this case I think we need if I remember it correctly we also need to provide our styles and lastly the render so for this one I'm also going to copy and paste I guess we don't have that much time yeah so I need to copy these styles first or maybe just copy everything so what is new here I guess there's nothing new it's just we're doing the same we also have provided or exposing our CSS variables for the chat lobby and then I think the new thing that we're doing here is we're dispatching an event a custom event which we did it earlier I guess and to do this app if you remember correctly we also dispatched our own custom event so we just we also added that here so this is for us to identify whether the user have entered his name or not or if he already wants to enter the room or not so we dispatched an event once the user clicks on the join room so for this one we we did as well as we bind an event as I mentioned earlier one binding event we need to use the at sign and then yeah there's yeah I guess we also did the event binding earlier so we can or should we should now try the event the chat lobby rather for the chat lobby we don't have any properties required so if you notice we don't have these static yet properties yeah and by default if you remember earlier we're manually cleaning up all the events that we have added for the to do list app but in this case let HTML handles that one for us so we don't need to worry about cleaning up the events that we have here but if of course if we do our or if we add manually our own listener in this one then we should remove that manually but by default if we use the lit HTML event binding cleaning up the events is being taken care of us by lit HTML so we now added the chat lobby in the index so yeah we're now able to see that this is the chat lobby so I guess finally we need to create last component which is chat demo so for this one there's only few lines on the chat demo because what this does is it actually just toggles the chat lobby and chat room but for this one let's try it first for the chat demo if you notice we also imported the chat lobby and chat room so we only have two properties the joined and the username so join is just an indicator whether the user joined the room or not and username so for this one if we can now see if we type in our name and join the room we were able to successfully hide the lobby and show the chat room instead so another thing that we can do here is instead of doing this hidden Boolean attribute binding we can also have conditionals inside so let's try that so what we do instead of hidden we remove this hidden so we remove the Boolean attribute binding so we can then check whether it's not if the user is not yet joined then we show the chat lobby otherwise we show the chat room so for this one we also need to return a template result so we were just doing some ternary here so we're checking if the user has joined or not if the user is not yet entered the room so we will display the chat lobby otherwise we'll show chat room sorry sorry sorry sorry sorry sorry oh we can try it but I think it will still work it's like this one right both will work I believe so just return this right but just to make sure that we have sorry just to make sure that this has changed let's try to add a fake attribute or say class say class so if we enter so any approach will work but I think this one is a bit cleaner so I guess that's it for the chat demo for the integration of the chat demo it will be done by Sumit so for the last part we are going to use web components basically see how we can integrate them with our existing projects which we have already written in third party framework so do you guys need a break before that so we can have a 10 next break and then we can see how we can integrate it into our existing projects with any third party library framework so I'm going to show you how we can integrate it with React and there are similar steps which you can follow with mostly Angular or Vue.js or any other third party library so there is polyfield you will need to install if you want your application to support for all the browsers especially for Internet Explorer and there is one polyfield available Web Components JS which you can always install to support it apart from that there is vandal copy which is available for zxjs to copy all the vandal files into your own repository so in your packet.json you can write a post install script which it basically will whenever you do npm install this post script post install will get executed and it will execute a vandal copy script which basically what that takes the custom elements ES5 adapter and polyfield which is Web Components vandal.js and copy it into our public folder so that later on we can utilize this in our index.html and in your index.html you need to add these three files now three lines basically you are including the same copied file in your index.html that's how you can support it in your react or any existing application where you want to integrate the Web Components so if you see we have like one of the we have put all the code for angular react and view into the repository if you want to look at it look at them apart from that if you will see here in the codebase so in my packet.json I have added my vandal copy script which will do the copy of all the Web Components polyfield and ES5 adapter for me and I have written this into a post install script so whenever I do npm install it will get executed and in my app.js I will just if I am writing my Web Components in this folder directly structure I can directly import it here for this I have created that as a package and I have installed that package and I am importing from that package chat demo and I am using that directly as a component inside my app.js and if you will run this it will be similar as we saw previously and we can just execute this and use this command so it's really simple to use Web Component in your legacy project or any existing project you can plug it in any time you know any kind of project and similarly it's really simple to integrate with view for angular it's a bit complicated but we have provided some difference for them and you can always go through those links and check that there are some best practices while you are working on Web Components always create a sado root whenever you want to encapsulate your styles create your sado root in the constructor always place any children the elements you create into the sado root so that it should be inside your DOM elements set a $host display style default it's an inline means it doesn't take the height and width so it's better to set it to block or inline block or flex it's always better to set the display property for the hidden attribute on the host it's basically you will never be able to assign the non-property to a host element so whenever you are passing the data or passing some kind of Boolean's numbers or strings try to pass them as a property as we saw like name in our hello world example do not try to override them in your custom elements always accept primitive data as either attributes or properties so whenever you are passing the data or passing some kind of Boolean's numbers or strings do not dispatch event any time from a host to downwards to your children always pass them as a property or attribute dispatch events from your children to your parents so as we saw we saw to do change or other events which we pass from our children don't forget it basically tells us like what you should always keep in mind when developing any custom element accessibility of your elements it should like be accessible using the whole attribute if it's taking all the area attribute if it can define you should always put the accessibility of your custom elements performance try to not use much of debounds or any other performance lagging method which can impact the performance of your element script agent always the answer if there is sometimes like you can use the native HTML only don't always go with the web components custom elements be responsive try to define your components in a responsive manner and always test your components as much as possible these are the differences we went through to collect all the content and if you want to go through it especially the last three which are used for to integrate a web component with angular view and react these are really useful when you are trying to set it into a project that's it that was the workshop and if you have any questions you can ask any time


narcissism is a choice. Above all, it's a choice. There is no question that in individuals there is a genetic predisposition to this choice, but like everything else in genetics, genes are templates. They can be activated and deactivated. They are subject to environmental influences and effects. They begin to operate and they cease to operate in accordance with environmental cues such as childhood abuse and childhood trauma. So while the predisposition of the proclivity to develop pathological narcissism are there, still the question remains, why does a child in the case of an individual or why does a collective such as a nation or a club or a church, why do they decide to react with narcissism to a given set of circumstances where other individuals and other collectives choose to react differently, not necessarily with narcissism. What predisposes certain individuals and collectives to narcissism? Or is it maybe not the individuals and the collectives, but the context in which they are embedded? Is it the context that determines narcissism? If we regard narcissism as a choice, it must involve a cognitive element and an emotional element. Additionally, once the choice is made, narcissism has two basic aspects or dimensions. One is the role play. Narcissism is a role play very similar to an actor with a script acting on the stage or acting in the movie. So the narcissist goes through the motions dictated by the narcissistic narrative and the narcissistic narrative has two components. One component is fact-based and the other component is confabulation-based because the narcissist is highly dissociative. The narcissist tries to bridge between events. He tries to regain the time lost by inventing plausible, probable, acceptable narratives that could have happened, should have happened, might have happened, probably had happened. It's like Sherlock Holmes. When you have eliminated the impossible, whatever remains, however improbable, must be the truth. That is a very good definition of confabulation. So the narcissistic narrative is founded partly on fact and partly on confabulation. And in this sense, the narcissistic narrative is actually a conspiracy theory. So now all narcissists are conspiracy theorists which would explain why there is a very pronounced paranoid streak in narcissism, why this, why this persecutory delusion, why this feeling that the narcissist is at the center of attention, the certain center of the universe and everyone around him is referring to him, mocking him, talking about him, gossiping and conspiring out of envy or out of other ulterior motives or hidden agendas to do the narcissist ill. The narcissist is like Indra's net. It is the bead that lifts or beads. So the narcissistic narrative is partly fact-based, partly confabulation-based and it goes hand in hand with a script, a derivative script, a script that derives from the narrative. The narrative is like a screenplay. It tells the narcissist. It gives, it imbues the narcissist's life with meaning and sense. It's hermeneutic. It's exegetic. It's interpretative. It explains to the narcissist the why, the why of his life. Why are you here? What are you here for? What is your cosmic mission? Because it's always cosmic. So there is an element of the narcissistic narrative that has to do with imbuing life with meaning and significance. And the second element is an organizing principle. The narcissism organizes life, makes sense out of apparently disparate and random events, charts a path forward, a course, a trajectory. These are very powerful mental functions, usually carried out by the ego, but they are very powerful mental functions. If you have a kind of a screenplay which renders your life meaningful and significant and provides you with an organizing principle with a set of rules, boundaries, dictated behaviors, predictable routines, this is something that's addictive. It's very difficult to resist. And that's why narcissism is so ubiquitous and all pervasive. That's why it's very difficult for the narcissist to give up on his narcissism. This narcissism is not merely a mental illness. It's not merely a disorder. It's not merely an agglomeration or aggregation of cognitive deficits, emotional deficiencies, behavioral, kind of antisocial aspects and counterproductive traits. This is the external facet. This is the facade of narcissism. This is what we would call in therapy the presenting signs. This is what you see, but what you see is not what you get. Narcissism is not merely this dysfunctional entity, this set of instructions with glitches and bugs, this broken down computer. Narcissism is much more than that. Narcissism in this sense is very much like a religion, very much like a philosophy, very much like an ideology. It makes sense of the world. It provides goals. It produces goals. It produces meaning. It drives you forward. It structures your life. It's like an exoskeleton. It gives you the incentive to get out of bed in the morning, to take on reality and its challenges, to prevail, to triumph and to attain your goals, your purpose in life and your aim. And so if you think of narcissism as a religion or as an ideology, you would be far closer to the truth. And this is precisely why narcissists are emotionally invested. They are affected. They are emotionally invested in the narcissism. It's very difficult to divorce the narcissist from his disorder, from narcissism, because narcissism fulfills so many important psychological functions for the narcissist.  It's not merely to torture people. It's not merely to be entitled. It's not merely to be grandiose. It's not merely to live in a fantasy. It's not, I mean, all these are, of course, integral facets of narcissism. But I would argue that they are not the important facets of narcissism. The important thing about narcissism is that it makes a narcissist feels alive and feels alive for a reason, feels alive for a purpose. It makes him part of a cosmic plan. It unites him with the world in a way. And because he lacks all the emotional and cognitive and psychological apparatus of a normal, healthy individual, that's the only way he can relate to the world via his narcissism. We find the same mechanism exactly, the same set of specifications in cult members. Cult members are the same. They interact with the world via the intermediation and the interface and the buffer of the cult, the cult leader, the cult principles, the cult goals and aims, the cult's paranoia, the cult's weakness and belonging and affiliation. The cult is a surrogate family. And so the narcissist is a one-man cult. He worships a god, which is the false self. And he is both god and worshipper. In a sense, it's a religion. But it's also an ideology because the narcissist uses his narcissism to derive the principles underlying human existence. When he tries to make sense of society and of social interactions, when he tries to make sense of sex, when he tries to make sense of the family, of intimate relationships, of intimacy, when he tries to make sense of business, when he tries to imbue many of his activities with meaning, when he tries, in other words, when the narcissist tries to humanize himself, because he is part, he is part human. He is not fully human. When he tries to humanize himself, the only tool at his disposal is his narcissism. This is the set of edicts, rules, strategies, lessons, life lessons that he has at his disposal to implement and to derive meaning from the world. When he tries to understand things, he automatically takes out the only weapon in his arsenal, his narcissism. And he uses his narcissism to understand, to comprehend, to cope with, to interact. And this is why when normal people, when healthy people interact with the narcissist, they feel they spot this microsecond delay. It's like the narcissist is a delayed person. When you talk to the narcissist, there's always this nanosecond or microsecond delay. And this delay is when the narcissist uses his narcissism to filter what you had said, to grasp what you had meant, to interpret, to translate your words into narcissists' speak. This narcissism has its own language. And there is a dictionary in the mind of every narcissist. There's a dictionary that allows them to translate daily speech, daily gesture, daily behaviors, daily interactions, daily frameworks of reference, daily institutions, anything from the family to bureaucracy. They filter all these. They filter quotidian, pedestrian, daily existence and routines. They filter them through the narcissistic dictionary so that they convert them into a language that they can understand. And this takes the microsecond. This takes some time. And when you talk to the narcissist, you can feel, you can sense, you can discern this tiniest of delays before the narcissist reacts.  And this is also part of the narrative. The problem with the narcissistic narrative is that it is very, very cohesive, very coherent, very, very powerful. It's a powerful tool. It does explain the world. It does give meaning. It does provide goals. It does make sense of other people and their behaviors. And even when it's wrong and it's often wrong, even when it's fallacious, even when and if it relies on cognitive deficits, such as confirmation bias, or done in Kruger effect, even when it's totally off the mark, it is still very powerful in the sense that it makes sense to the narcissist. That's why the narcissistic narrative is very rigid. It almost impossible to tinker with. And that's why the narcissist defends, defends his narcissism violently and aggressively. That's why if you try to challenge the narcissist, he would fight you tooth and nail and claw because you're not challenging a specific trait or a specific behavior or a specific cognitive deficit or a misunderstanding or or you're not just trying to reason with the narcissist or to negotiate with the narcissist.    Narcissism is the narcissist religion is the narcissist ideology. It's exactly the thing that allows the narcissist to survive. So this roleplay, this roleplay coupled with the narrative does become a choice. Maybe as a child, when you're four years old, six years old, nine years old, you don't have much of a choice. Your options are limited. There's very little you can do and you crucially depend for your life actually, for your survival on a specific set of adults, parents, grandparents, later teachers and sometimes on peers. But the dependency is there and you can't get rid of it by any successful means. Society itself, the legislation, the institutions of society are biased against children. They condition children, they make sure that children remain dependent on adults. So in this sense, it's a power structure where adults perpetrate their power over children. So as a child, trapped, you're trapped, you're embedded in a system of society with its institutions that make sure that you are disempowered. You have no power as a child. And so they, to become a narcissist when you are six years old, when you're four years old, may not be a choice. But what about when you are 40 years old? What about when you are 30 years old or 50 years old or worse, 60 years old like me? What then isn't narcissism a choice when you're 60 years old? Of course it is. And when you're 30 and when you're 14, when you're 20, at a certain point in time, you do become independent. And at that point, you'll definitely face the choice of getting rid of your narcissism, or at the very least getting rid of your narcissistic behaviors and traits and deficits. You can work on yourself, you can change, you can modify your behavior if nothing else. Maybe you cannot get rid of the deep internal structures, the deep state of narcissism, but you can definitely get rid of all the external manifestations and expressions of narcissism. You can get rid of abrasive behaviors. You can get rid of antisocial misconduct. You can get rid of hurting people. You can get rid of being unreliable, not keeping your word and promises. You can get rid of manipulating people, etc. There's a lot you can consciously decide not to do anymore. But narcissists make this choice and the vast majority of them choose to remain narcissists. And this raises the question, why? Why do individuals and collectives choose to become or even worse remain narcissists? Again, in early childhood or in times of collective trauma, narcissism is not a choice. It's sometimes a default based on genetics in the case of the individual and based on the crumbling of institutions in case of collective trauma. But when everything is well and when you are of an age as an individual or when the trauma is over and society is reconstructed, why do people, individuals and collectives choose to remain narcissists? And the unpopular answer is that narcissism works. Narcissism is a positive adaptation. Narcissism renders people more self-efficacious. In other words, by adopting narcissism, people are able to secure beneficial outcomes to extract and extricate benefits from their environment. And this is a very crucial thing.  It doesn't matter. If you hit upon a strategy that allows you to secure your goals and to extricate and extract beneficial outcomes from a difficult environment, you never let go of this strategy. You become emotionally invested in this strategy. You become wedded to the strategy and you never intend to divorce. So the thing is that narcissism works and it is a vicious cycle because the more efficacious narcissism is, the more society and civilization become narcissistic. And the more society and civilization become narcissistic, the more reason you have to be a narcissist. In highly psychopathic societies, cultures and civilizations and periods in history where human solidarity broke down, where the jungle rule applied, where unbridled greed, avarice, envy and other bad qualities reigned, well in this kind of societies it pays to be a narcissist. It's the rational strategy to be a psychopath.  It was a mental health pathology. People who were altruistic and empathic in Nazi Germany should have been treated by psychiatrists to get rid of these undesired qualities.  In modern western civilization, what pays is to be a narcissist, a grandiose narcissist. Grandiose narcissists become multi-billionaires. They become famous coaches. They become public intellectuals. They become TV stars. They become cinematic stars. They become celebrities. They become famous singers. They make money. They get the girls. They live the good life. Why would someone like Donald Trump have an incentive to get rid of his grandiose pronounced narcissism? Why would he have an incentive? It is his narcissism that carried him all the way to the White House. It is his narcissism that made him famous and rich and powerful. In the case of Donald Trump, for example, his narcissism was definitely an extremely positive adaptation. And people are beginning to recognize this. And in Akadem where I work, in universities, there are many, many scholars who are not talking about high-functioning narcissism. There is high-functioning psychopath even. There are some scholars like Kevin Dutton and others. They say to be a psychopath is a good thing. We need psychopaths because psychopaths are good politicians. Psychopaths are good leaders. Psychopaths are good surgeons. Psychopaths are good chief executive officers. Where would we be without psychopaths? There is a whole body of scholarly literature that insists that narcissism and psychopathy are good things. There was even a cover story in New Scientist, a famous science magazine. There was a cover story in July 2016. Parents teach your children to be narcissists.  So today's narcissists, they have an incentive to become psychopaths and today's psychopaths, they have an incentive to become mini-hitlers. Society pushes narcissists and psychopaths to radicalize and pushes the average normal person, healthy person, to become more and more narcissistic just in order to survive, just in order to thrive, just in order to realize personal goals and personal agendas, which are totally legitimate. In a healthy society, this would be done via negotiation, via compromise, via empathy, via altruism and so on.  So narcissism works and this presents a serious problem because narcissism used to be an individual ideology and an individual private religion, but now it's becoming more of a collective ideology and a collective religion. It's becoming the organizing principle of all our collective human activities. Today, people analyze politics, for instance, in terms of narcissism. They analyze the mass media and mass entertainment in terms of narcissism. They even analyze the functioning of the medical establishment in terms of narcissism. Narcissism today serves to explain, make sense of a very senseless, sometimes nonsensical world. So narcissism is taking over, taking over as the main feature of modern life as the single buzzword and keyword that you can fling about and would explain everything in an instant. This is very similar to the Middle Ages. In the Middle Ages, the equivalent of narcissism was good. If you wanted to explain something in the Middle Ages, why a famine happened, why a plague happened, why a war happened, why this king is ascendant upon the other king. If you wanted to explain why in the Middle Ages, you did it by evoking the name of God. You just said, God did it and that was enough. No one questioned the sentence. No one said, are you sure it was God? Can you explain how God did it? Can you explain why God? No one asked this question. It was enough to say God. God was the word, God was the key that unlocked the mysteries of human existence. God was the key to all the unexplained, to all the occult, to all the arcane, to all the unresolved, to all the questions which puzzled us and perplexed us. All we had to say was God and everything was in its place. Calm and peace, especially inner peace, were restored. People self-medicated with God. God was an anxiolytic, an anxiety-reducing medicine. The same with narcissism today. Today, if you ask what makes politicians tick, you don't say God anymore. You say narcissism. What makes celebrities celebrities? Narcissism. What makes Wall Street bankers rob the rest of the population? Narcissism. Narcissism. Narcissism is the new God. Narcissism is the word that explains it all. That's all you need to say. One word. And with this one word, within this one word, you have the whole world. You know, the New Testament opens with a sentence, at the beginning there was the word. At the beginning there was logos. Beginning there was the word. And today I can say, to explain the world, you can do it with the word. And the word is narcissism. Narcissism is a perfect, almost perfect explanation of everything that's happening around us, everything that's happening to us, and everything we do to each other. And why would the narcissists give up on this wonderful elixir, on this fruit of the tree of knowledge? Why would he give up on his privileged access to this key, to the cosmos, to this universal organizing mechanism and principle? Narcissists are in a privileged position because they know more about narcissism than anyone else. They have a competitive advantage. They have a competitive edge over everyone else. They have experienced narcissism since childhood. They know what makes things work. They know what makes people tick. They know what makes society function. Why would you expect them to give up on this precious knowledge which provides them with the edge to win, to prevail, to survive, to conquer? That is an unreasonable and irrational request. And most narcissists regard the attempts to eradicate narcissism and to cure them of their narcissism with derision and contempt and anger. Because what they feel, narcissists feel, that the average people, the disadvantage people, the inferior people, the people who have no access to narcissism, they want to take the narcissism away from them. They feel that people want to reduce them to their level. They, narcissists, feel that narcissism gives them an advantage, an edge. Narcissism makes them superior and creative. Narcissism gives them the way to take over the world. And here come average Joe, the pedestrian day-to-day person, the failure, the loser, and they want to take the narcissism away from the narcissist. Because they are jealous, they're envious of the narcissism. They envy the narcissist's narcissism. Narcissist regards his narcissism as an asset, as an asset, as a gift. And he says to himself, people are jealous of my narcissism. They're envious of my narcissism because it's a gift. God gave me a gift. My parents gave me a gift. I gave myself a gift. And they want to take this gift away from me. They want to take this endowment. They want to take away my edge, my advantage. They want to reduce me to their level.  And I will never let this happen. I will never let this happen because I'm a narcissist. I belong to a master race. I belong to a superior phase of human evolution. I am the future. I am the future. And I will not let the present and the past drag me back to the primitive swamps of the beginning of humanity. Because the future is narcissism and it's here in my figure, in my essence. I am the future, reified and embodied. Therefore, I'm entitled to special treatment and I'm entitled to take as much as I want from as many people as I want. Whenever I want. And anyone who objects to this, anyone who resists me, anyone who criticizes and disagrees with me, anyone who tries to heal me and cure me, they're just envious of me. They want to be like me, but they cannot. So they are trying to shape shift me. They are trying to mold me. They're trying to remove whatever is special about me, whatever makes me unique, my idiosyncrasy. They are trying to homogenize me. And I will never let this happen. I will never let this happen, no matter what the cost in human life and human suffering. I will fight for my right to be a god. Because I am a god. I'm a god because I've discovered the heart of the world. I've discovered the engine of the universe. I've discovered the mechanism behind the Wizard of Oz. I've discovered narcissism.


Hi everyone, Joe for jatsby's casebreaks.com. Happy Wednesday. Happy new release day 2021 Panini select baseball is finally here. We got four box random team break number two coming at you all card ship Big thanks to these folks for getting into it and one spot gets you three teams. So let's triple you up a Lot of great stuff in select Love the fun parallels a lot of tie-dyes and stuff like that. So all teams are in all right Roll it roll in it randomizing it seven times for names and teams five into two one two three four five six and Seventh and final time after seven we've got Jeff down to Brett Five into two seven times for the teams one two three four five Six and seven then final time After seven we got the Yankees all the way down to the Phillies John. What's going on? I saw your order and I was like hey good to see your name come across my desk Things are going well We're staying busy Have you been to our new show we reconfigured our shop again here in Hermosa Beach? So it's looking real sharp All right for break two There's Jeff in the Yankees Robert in the Blue Jays Katie you got the Cardinals Sean with the brew with the Rangers Eric has the brew crew Peter with the Giants Paul with the Red Sox Brett with the Angels Tyler with the twins and Rays Brandon with the Mariners Eric with the O's Robert with the Royals Peter with my Dodgers Brett with the Reds Jeff with the Astros Brandon with the Braves Peter with the Metz Robert with the Tigers Tyler with the Diamondback Sean with the Marlins Eric with the Padres Sean with the Cubs Jeff with the Nationals Brandon with the A's Katie with the Rockies Indians and Pirates for Paul Katie with the White Sox and Brett with the Philadelphia Phillies Let's sort by column B and let's see which Let's see which stack we're going to do so let's select a die Let's use that right there. We'll go one two three for the left side four five six for the right side We're gonna go with one we'll do that set right here with this we will save for break number three You can see I've marked those with three so you know that it's from the same case We want to mix it up with anything else. All right, I'm gonna pause the video when we come back We're gonna see if there's any trades and then we'll have the break stick around be our beat All right, welcome back everybody. So no trade chatter. No deals were done. So all the teams remain the same Thanks, everyone for making this happen Appreciate it You know how I'm sure we'll have more of these random team breaks and pick your team breaks coming up on Jasper's case breaks calm So let's pop this open and let's see what we got our two autographs two memorabilia cards per box on Average a little basketball news Suns optimistic Chris Paul can return for game in baseball There's there's a bunch of games in progress already in baseball the Nationals beat the Phillies 13 to 12 White Sox edged out the Pirates four to three Tigers beat the Cardinals six to two Games in progress the Rockies were working on a no-hitter, but Mariners got a couple hits and a run Rockies up three one in Seattle Giants angels tied at one In the middle of the seventh inning of Brewers in Arizona Brewers up three to one on the Diamondbacks rough season for the Diamondbacks First box. Good luck box number one. Remember all car chip in this select Like obviously that these hits will ship. There's Joey Bart Rookie relic for Peter and the Giants. I know Connor I saw that Max Scherzer getting checked for four and something's not once not twice But three times Connor saying it was crazy. I thought I Thought Scherzer was gonna like burst out of the dugout George Brett style There's Dodgers is Zach McKinstree Jersey and autograph one of the nice surprises from Spring training going to Peter and my Dodgers 178 out of 199 There's Andres Jimenez seven out of 25 Tucker Davidson red white and blue and an Andres Jimenez Jersey and autograph you got a bit of the Mets pinstripe in there, but he is with Cleveland now Cleveland this is for you Paul K with the tribe 91 out of 1 at 99 we got a Jorge Ona 101 out of 4 149 for the Padres Eric with the Friars Should be another good game between the Dodgers and Padres tonight Dodgers putting a Trevor Bauer on the mound Bauer versus Musgrove close game last night Padres pulled it off Dodgers just have Dodgers just terrible against left-handed starters for some reason they just haven't been able to To really get the offense going against left-handed starters All right Nick Knight are going to Sean Oh and the Marlins Yeah, Connor saying he thought Joe Girardi handle that entire situation poorly Yeah, I think well, I mean it goes to the top, right I Feel like the I feel like major league baseball Kind of sprung this sprung this on everybody In the middle of the season, there's Eugenio Suarez to 1 99 And now everyone's just trying to like figure out fear things out as they go along True Derek Jennings. You're right. They had they've been doctoring the ball for decades and it's you know It's major league baseball is prerogative to see how strictly they want to enforce those rules It's gotten a little out of control. I get that so and I get that major league baseball wants to Fix this situation. That's getting a little out of hand But in the middle of the season just seems a little odd. I feel like I've read reports where Major league baseball has been talking to teams about this for a couple of years now And if there was a good time to experiment with stuff I would say like why not last year last year's pandemic shortened season You know, so it just seems odd that they're they suddenly kind of panicked and did a knee-jerk reaction And now is just turning You know kind of saying midstream the middle of the season. Hey You know and think about how many pictures or creatures have had it too. It's like hey Just change this in the middle of the season, you know So I can see where pictures are and then just the whole vetting process throughout the game They haven't thought that through they're just kind of doing it on the doing it on the field guys are like dropping their Pants checking their belt buckles taking off belts and it's all just that's just kind of weird too Can't there be a separate area to do that? So that's a little embarrassing and I don't know it's just It's in just Rob Manfred just handling it poorly. I think one another situation once again again I understand the regulation the regulation aspect angle from baseball, but the timing is a little weird There's Tim Anderson. It's like if we were doing a group break right now And then halfway through the select break random team break number two I'm just like, you know what? We're gonna we're gonna change it up from here on from these two boxes Now that comments won't ship like if I change the rules in the middle of it You guys would be up in arms You like wait wait wait wait, I thought all car chipped in this I'll be like well not not for the second half You'd be like that's crazy talk Joe People freak out And there's Spencer Howard piece of his Jersey rookie Jersey for the Phillies that's for Brett Dalton Jeffries to 199 That's for the A's that'll be for Brandon Hall William Contreras Premier level. I unless I accidentally missed one. I don't think I've seen a field level yet 144 out of 149 David Fletcher. They have field level this year, right? Versions break down. There's the base versions. There's the premier versions and Diamond level Let's go to the checklist here I know they got hollow cosmic red disco scope tri-color zebra So it goes base Premier and diamond level. I don't know if I've seen the diamond level yet Which no is this diamond level? No, this is premier That David Fletcher will go to a bread and the angels These are just the regular ones and there's Dean Dunning 171 out of 299 Jersey and autograph The last 50 cards are short prints How do you like on the checklist each? Copy box contains ground Well, there's Brandon belt tie-dye 15 out of 20 Concourse level with cardboard connection that has no mention of concourse level We'll just keep learning as we go along. There's premier level Alec Baum And we got a nick Madrigal Jersey and autograph Nick Madrigal was having a fine season until uh forgot what his injury was but But he had season-ending surgery about a week ago 62 out of uh Out of 299 white socks Katie with the white socks Could be a keeper Katie Hang on to this and see how it recovers and comes back next year And the gungeon Rue on the back. All right two boxes to go You know, I don't remember what the injury was to nick Madrigal, but no now now the the ad block Chicago Tribune just let me just read what happened nick Madrigal Something happened to him. He's out for the season And he was having a pretty good season too I feel like Poor white socks have been just dealing with uh with with a ton of injuries to key players But I still think that their team is deep enough But they're still still competing pretty well Yeah, they're still they're still two and a half games Uh ahead of the the indians in the al central I don't know what happened with the twins this season, but I thought they they were gonna be a lot better They're 31 and 42 And they're they're They're in the al central cellar Tigers are like a half game ahead of them. I just I just thought I just thought they had the pieces Next box Got clayton kershaw red to 199. Oh, it was a torn hamstring. I'll feel be all right Got Reese Hoskins And we got a nickniter 187 out of 250 Piece of his jersey going to shawn. Oh and miami There's louise castillo 21 out of 50 for jeff and the nationals Another marlin braxton garret 009 out of 250 I'd like to see like a one of one of these relics. What do these look like? Buxton miss 30 games came back for three And out again with a broken hand Poor Byron buxton. Yeah, lithe right ham right hamstring tear to be precise building on Connor's report PJ saying bad hammy. Yeah, no Connor found it torn hamstring could be offers is out for a season Got a surgery got surgery last week and is officially out for the season There's jamae jones 89 out of 199 jersey and autograph for baltimore. That's going to be for eric I wonder how active the whites ox are going to be in the trade window. They are leading the division Even though they're missing key players they might think that That they could get the pieces to uh To go deep in the playoffs There's showy otani 59 out of 99 lime green brett mires with otani probably possibly probably al mvp And we got a cabrion haze jersey and auto nice Nice cabrion haze for paul k and the pittsburgh pirates Nice 176 out of 199 And there's a tricolor estivon floriel And the fourth and final box here And select number two Plenty of select in the store So get in on it ladies and gentlemen Especially the pick your teams if you buy at least two teams in the pick your teams You'll get an entry for a chance to win Some uh some sealed boxes of select baseball And don't sleep on those uh our latest jaspy's repack product It's like hit parade Just like uh gold rush Etc etc Yeah, there's six left on jaspy's for the collectors repack product with a hitless promo per break And a promo if you join any of the breaks one through twelve Now it's kind of weird eric. There's no mention of concourse on panini's website either And yet there are cards that say concourse on it and it's teased to 199 What are the hits valued at brett? They could be I think some of them could be under the cost of the Spot some of them could be around the cost of the spot Some of them could be way way way more than the cost of the spot. There's louis camposano Two-color patch and autograph If you look back on our videos brett and you just kind of check out um Other just similar price point jaspy's repack products I think you'll get a good idea of what could possibly be pulled there 18 out of 25 on louis It's eric seal with san diego Premier level cabrion haze that is for the pirates that'll be for paul There's brady singer 86 out of 149 royals robert There's andreas hymnus jersey and autograph for cleveland cleveland. This is for you paul with the tribe Yeah, technically thomas is right. Yeah, they're valued at what what people eventually pay for them 004 out of 2 99 queso sanchez Ozzie albies we got a dylan carlson big piece of his jersey Going to katie and the cards There's tyler glass now. I'll see another concourse card number 37 concourse. It's josh bell another cabrion haze illy hymnus And migelson. Oh 44 out of 150 piece of his jersey going to minnesota tyler with the twins And we've got a randy arroz irania 15 out of 99 lime green for the rays tyler Putting the lime in the coconut nick nidard Exact clisac at the very end. There you have it. That was random team break number two from jaspy's case breaks dot com We got half case picker teams available too if people want to get into that With a chance to win a couple boxes all card ship in both the random team breaks and the uh picker team breaks So thanks everyone for getting in appreciate it. I'll see you next time for the next break. Bye. Bye


Hello friends, hope you're all doing good. I've just woke up to the news that we will be getting a new patch update for Pokemon Scarlet and Violet will be going from version 1.0.1 to version 1.1.0 and that will be happening today as a recording in this video at some point on the 1st of December. I'm going to go over everything in today's video, let you know what this implies for everything like the duplication glitches and other issues that we're seeing in the games. So over on the Nintendo site they've got the actual patch notes for this update. As you can see it will be going live on the 1st of December. I don't know when or what time that will be going live today but as soon as it is and we figure out any fixes to certain things in the game we'll do a video on it and keep you all updated. So the patch notes are the season 1 of Ranked Battles will kick off allowing you to enjoy Ranked Battles through Battle Stadium. Check the in-game notice for more details about Ranked Battle season 1. So basically there's a glitch at the minute with the online battle system where it's seeding each of the games with the same RNG meaning that you can kind of predict when certain moves like one-hit-kill moves are going to hit and things like that. So it's a pretty big issue with Ranked Battles and especially with season 1 going live tomorrow on the 2nd of December. That's something that 100% needs fixed especially because you're going to have the ladder introduced for the first time in these new games. An issue has been fixed that caused the music not to play correctly during the battles with the Elite Four and the top champion in Victory Road Path. So I didn't experience this I've heard a bunch of people had issues with this one in particular so that looks like that will be fixed going forward in this next version. Other select bug fixes have been made. I would assume that this is referring specifically to the recent item duplication glitches that we've had available and they've kind of snowballed in popularity within the community because of the way that you can duplicate Corridor and Mariah on your ride Pokemon then use this method to duplicate items. We had a similar thing with Brilliant Diamond Shine and Pearl when the duplication glitches happened there. They tried to fix them and patch them pretty quickly after the glitches got made public and everyone was kind of doing them in games. Then they finish it off with we are aware that players may encounter issues that affect the game's performance. Our goal is to always give players a positive experience with our games and we apologize for inconvenience. We take the feedback from players seriously on working on improvements to the games. So basically they're acknowledging that the games are pretty janky and they don't work as well as they probably were intended to. It doesn't appear here like we'll get framerate fixes or anything like that. I think there are immediate fixes that need to be done like the battle season which is like I say kicking off tomorrow. That's a pretty big issue especially for competitive play. That needs fixing. They don't like anything like duplication glitches or things like that even though it's their own fault for the coding of the game. They've allowed this to happen. They want that fixed. They don't want players to be able to do it. So I would imagine they're the things that will probably see get fixed. Hopefully there are other issues that get fixed in the game. The camera panning. The framerate. Lots of there's so many things. I'm not going to list them all in this video but there are a bunch of things that I would have said are just as important to improving the play of these games but we'll probably only get a few of them tomorrow and then we might get a patch a later date to fix the rest of the issues that we're all experiencing with these games. Now you're not required to update your games. Of course when this patch is released you don't have to do it but you are going to be restricted from going online taking part in things like the ranked ladder tournament and also taking part probably in the first seven star terror raid that we're going to have which is going live later today. So I'd imagine this patch will come out before that event goes live and I'm assuming that you're not going to be able to partake in that unless you've got this update. I could be wrong. We'll confirm that when the patch comes out and the event is live so but if you don't want your game to automatically update when the patch is dropped you need to come into your system settings in your switch and then come down to system and then because this is a new console I'm on actually it will probably be on. You want to look for automatic updates auto updates. There we go automatic software updates and you want to just turn that off just like I've done there and that will stop the game from updating automatically meaning you can stay on the current vision that you're on and kind of keep doing what you're doing in your game. For anyone that is worried about getting banned for duplications using the duplication glitch it's not going to happen. You're not going to get banned for using something in game that was at fault because of Game Freaks coding etc. People know this. People are just creating a lot of drama about it for no reason. In my opinion whatever anyone wants to do in their own game it's their own game they can do what they want. Whatever your stance on it is allow people to play the game how they want it to. The duplication glitch isn't like hacking Pokemon in and then sending them out to other people and breaking other people's games. It's a completely different thing but if you're worried about getting banned from the duplication glitch if you've used it don't worry about it. I would though suggest if you are using the duplication glitch and you have been using it to get rid of the duplicated ride Pokemon before you do the update because we don't know what implications that might have in your game for going forward and we don't want any issues with your copy of the game getting corrupt or anything like that from an update that potentially isn't fixing the issues properly. So that is all of the patch notes for version 1.1.0. We'll be dropping at some point today. We'll do an update with it after it's dropped and we've tested a bunch of things to see what's working, what improvements we've got and things going forward. But good to see that Game Freaker being proactive about this for a change. They did the same with BDSP although there were different developers who had ILC doing BDSP but you know the same things were happening. They were getting constant updates for the game to improve things and hopefully that carries on until we have a fully finished Pokemon Scarlet and Violet. But have a great rest of your day. Let me know your thoughts on the patch notes. If you've got any questions drop them down below and I will catch you all in another video very soon. So until then friends take care. Bye bye.