 Hello everyone and welcome to React knowledgeable as well as some guests that welcome to the shopping office. So my name is Thien, I'm working as a finance software engineer for Shoppe. So today my talk will be about the CSSCOM and CSSCOM EU highlights and okay let's start it. So the CSSCOM and CSSCOM EU was organized was just around three weeks ago in Berlin. Usually the CSSCOM and the CSSCOM will be organized together and this year I have an opportunity to go to Berlin and enjoy them in three days. So I will talk briefly about about the CSSCOM EU. So CSSCOM EU is one of the largest CSSCOM in the world. It started in 2009 and the organizers of CSSCOM EU was actually inspired after they attended the CSSCOM US and back to 2009, JavaScript is really really in very early stage and we don't have a community. As we show here in 2009 when we say JavaScript most people will think of jQuery and people can think don't think that we can do more than that with JavaScript and at that time because other languages like Python they have a strong community and already that's why the organizer of CSSCOM EU really want to have a contribution to the development of JavaScript community and it's a story. So CSSCOM EU has gone through 10 years and over these 10 years that it actually has an impact in the development of JavaScript community. For example on the first CSSCOM EU not just was introduced to the world. Later on in 2012, TypeScript was publicly introduced to the community after being used two years internally by Microsoft. And one year later React was reintroduced at CSSCOM EU as well after it has been introduced in US and inspired lots of people. And last year at CSSCOM EU 2018 the creator of Notch.js officially launched the general which is actually a new thing that we would like to fix the issues with Notch.js there's a very interesting talk about that like 10 things that he regrets about doing with Notch.js and for the CSSCOM EU it started in 2013 and from that until now every year it will consider as a sister conference with CSSCOM EU. A very bad news is that this year will be the last CSSCOM and CSSCOM EU which is a bit sad but the organizer really do this for 10 years and after that they did lots of things and now the conference is so big that they cannot continue with this format anymore. So this year we have around more than 1200 developers from more than 25 countries joining CSSCOM EU. So they will take a break and maybe they come back in the near future with a new format. So I will highlight a bit some of the very interesting talk about CSSCOM EU as well as CSSCOM EU because I'm not really a CSS people I just those are the talk that I found is more relevant and might be interesting for most of us. Due to the time constraint I will not go through all of the talks because I don't think that I can do better than the speakers to deliver what I want to say in the talk. I only highlight some of them. A very interesting I would like to mention is about a talk about functional CSS. So what is functional CSS? It's just a way you write CSS in too smaller class and very atomic that you can reuse everywhere. For example for display flex or flex direction column at this direction I can just create a class for that property only and the good thing of it is that it's very minimum and you can reuse a class. For example the display flex due to the different implementation in the browser it has different prefix depends on the web engine. So display flex will be able to be fixed into three lines for this for example like this. So if we use a functional CSS we don't have to have lots of duplication in the style sheet and can produce it as minimum as possible and by doing this you also don't have to worry about the rules which rules will apply first if you shop for the style because every style is very atomic and those are some of my highlights about the JSConf EU. So because this really a big conference and most of the talk happening at the same time. So actually I didn't attend all of them but those are my highlights about the talks. I divide them into four categories. The Java script in general, the front-end, the Node.js one and the others interesting talk for example they show you how to build a Java script engine by in Rust or explain about how adblocker works and how the website are fighting back with adblockers. Those are very interesting talks and since I am a front-end developer I will focus more on the front-end part. So these are the two talks that I would like to highlight in my presentation today is that the problem with Node.js and front-end developer nowadays is about how do you maintain and manage your package. So who hates young install or NPM install raise your hand. Okay you're not alone I'm one of them so I have the pain that for example I work on multiple branches on features every time I check out to a new branch a new feature I have to run young install again and sometimes it takes so long it takes like two or three minutes to install all the packages I want and when I check out back again I have to run young install again. Not too bad I decided to get a cup of coffee in wait time and I think I drink too much coffee. So it is a problem that there are two very interesting talks that they would like to solve it so the talk the first talk is about think so in short the idea is that you don't have to run young install you can move that to a runtime so the idea is that all the packages will be lazy loaded and it will and one more issue with the NPM packages is that when you download a library over the network there are many things that you are downloading together not just the logic that you want like the documentation the test the raw source code but even actually you can you just need the minify version or something like that so think is an effort to just download what you want for example like it just download the entry point of that library and it cache it and even if you check out to another branch because it keep a local version of the library already so you don't have to run young install and actually it will be faster a very interesting about thing is that the thing the thing was introduced first and immediately after that there is a talk about young 2.0 and they have a similar idea so so team they want to install less packages right but young they want zero they want a zero instance it will be the upcoming features for next version of young so the idea is that we will add all the files to the heat report you commit everything into the commit so it sounds horrible it's like I don't want to commit like 500 megabyte of packages into my report but actually because young already have a plug-in late and play feature it means that it can guarantee that one package is mapping it's to 1.5 so with plug-in play and zip loading you don't have to worry much about that and the young team actually talked to the colleagues in github to mention this issue and they say it's fine so it's very interesting that we can wait for the upcoming release of young so yeah this is my photo with the creator of think she's very interesting lady and one minute for advertisement is that thing is now under the repo npm and they are working on it so if you want to really and she is the man maintainer for this thing and if you want really to have this you can take a look another thing I'm quite impressed is about introduction to the version 1.0 version of stencil so what is stencil in short it is a compiler for web component the good thing about stencil is that it has zero dependencies so basically stencil is not a library it's a compiler provide a tiny API which is using gsx syntax and asynchronous rendering it will compile your source code to pew JavaScript and on and it's based on the web component standard so the reason why they view stencil is that what one thing I read to mention here is that stencils is created by the quality of myonic so the reason why they come up with this idea is that the very first version of Ionic they view it on Angular v1 and then later the v2 of Angular is released and as we know it's a totally new thing and they have to rewrite lots of things so that's why they come up with idea is that to write a component in the UI maybe it's not a good idea that you rely on the framework or library but they would like to rely something like on the web standard the web platform standard like a web component is something that will always be there and even if and stencil it's just a compiler it will compile your code into web component so even if in the future stencil is not there you can still use it use your component to ship it everywhere one interesting use case is that maybe for example in shopping right now we are using react.js and we have lots of utilities and UI component that we would like to share but think about it for example in the future if we don't use react.js anymore we use something like the X framework or something or library it means that all our library cannot be used anymore right you have to rewrite it but if we would we use something like this we can just get that component and use it everywhere as long as support a web standard so yeah this is then so this year they officially introduced the 1.0 version of stencil in just com and yeah I actually in the this talk also the guy with the red t-shirt yeah just in front of the speaker yeah you can see me in the talk so this is really selling point that the Ionix team is trying to sell is that since it relies on web component and it has zero dependencies you can view a very to do MPC app very small size so the small size is really a selling point for stencil however stencil is still a young library I think it's we can give it a try with a smaller scale and they don't really recommend us to use it as a framework but rather to use it as a way to generate the component rather than use it as a as a framework for your whole big app so Ionix team is uses a lot they use it the stencil to build a UI component that can be reusable yeah and I think I have cover some of the very highlight of the talks that I found is more relevant to me and maybe interesting to us so for the next part I would like to highlight something it's why should we as developer should go to conference is it really so because over two years I attended quite a number of conferences and lots of people asked me why do you do that is it really useful or just a waste of time and money or you just want to travel so so this is my answer okay I will highlight a bit about me I Joy Shoppe in July 2017 exactly two years ago less than two years I guess and I attending the react euro last year and this year I was fortunate to have the opportunity to attend it the Google IO in Mountain View and the just come you you just this month so it means I have less than two years of working point time yeah and have a 10 like quite a lot a number of famous conferences so the first reason is that it is a chance for you to meet people the core people of doing things like you can contribute to the standard open web like at conference like just come you this year you can have a chance to talk to the people of the TC 39 panel and you can talk to them and why you need to contribute to this thing because if you wait until aspect is done and implementing by the browser and you look at it and you say it's rubbish it's too late for you to say so so go into conference is the fastest way that you can meet those people and let's say you have a request it's a I think I have a use case that can be useful then you can talk to them and they can propose you some way if you really wanted to write this request because everything is ongoing so I actually talked to the Mozilla team I asked I talked to them that this year I attended the Google IO and I see Chrome is implementing the lazy loading for image but I don't see any plans for Mozilla 5 Fox yet they have any ongoing process on that so it's a chance for you to tell them that I want this thing I want this implementation and yeah so I think what I really think is that because we are for the GS in general in specific because I'm not sure about other platforms so it's really an open standard and you can actually contribute to it you technology is changing and you can help to develop to shape what we will be in the future so either you are part of it or you are left behind and you cannot complain that this sucks this doesn't work one more thing I want to highlight is that this is the statistics in 2019 on average every day there will be more than 1 million new internet users and where do they come from they do not come from US or Europe they are coming from developing countries they come from China they come from India they come from Southeast Asia so we as a developer in developing countries in Southeast Asia we should be a representative because the problem we are doing every day here is the problem that other developers all around the world is trying to solve and it is also with a chance for you to tell the others about you and your work so I take this slide at this here Google IO and actually Sharpie was feature is one of the talk about performance and as you see here that is very true that a good example of performance or user experience can be found everywhere and so maybe the problem you are solving every day optimization issue you are working every day the book you are fixing every day actually has an impact and the other is also looking for the answer for this so please go out and share them discuss about the solution because eventually right for big companies like if like Google Facebook everywhere they are shifting to the new market to developing countries that's why recently like Facebook they are doing very interesting project involved in India or something okay it sounds interesting I would like to go to Congress now but how if it's really expensive for example like it's not really affordable for me to go to US or Europe to attend a conference I really wanted but it's a bit expensive what can you do the first thing is that ask for your company for help is I think the most is the easiest way as a Sharpie we have this kind of financial support as self-development for employees and if your company can help with that you can ask for the organizers most of the conference they will care of donations and they can have the budget for to help people from really disadvantaged background or those that they think that you can bring some values to the conferences and in a watch case you cannot go very far you can go to a local meet-up like like the meet-up we're going to have in Sharpie after my talk yeah so I will say a bit about just come you so I will use this slide to show my thanks a lot for the just come you organizer because they have the scholarship I applied for that and they give me the scholarship I really appreciate that and it's like what I want to say it's like one what you if you want to go and you want you need help just approach the organizers actually they will would like you to come because I I wrote them about a story I grew up in the countryside part of Vietnam every in my childhood right what I see is that every day I I ride a bicycle like 5 a.m. to school I see the right field of follow along along the way and I managed to find a way to Singapore to get a to study in Singapore and then I find a way to U.S. later on I would like to go out to the conference like in Europe and so many places so yeah and this is the end of my presentation and thanks a lot for your listening but I think it's not the end yet I believe that next year if I have attending an interesting conference and I have something to share I will have another sharing soon yeah thanks sorry so what Mozilla said is that they are working on it and I asked very about very specific reason is that why in Chrome the way they implemented is now is that even I specify the size and width of my image they still download the first 2 kilobyte of the image yeah it's I raise a use case is that maybe like it's something that they should consider as I if I I need a way to specify that I don't need to download it at all I can specify some attributes for them to do that and yeah yeah they say that they will consider and yes yes but you know what because but the point is that you want to talk to them and maybe I if they don't really do that maybe I will create a pull request for them in GitHub raising that pressure yeah I don't know yet okay usually I will tell where I come from and what I work on like I say that I usually start when I work for e-commerce website and we say oh what is a company so shopping the largest e-commerce in Southeast Asia yeah and yeah it's like and I I talk about the work I work every day I like I spend a lot of time on the server render and yeah they asked me and then actually they asked me some questions about server render because they are doing that also so for example I talked to one of the oh about a sensor also because I was impressed by the talk about sensor so I I spent I spent a bit I stay a bit and I asked some questions like can you use it in black scale or any big corporation is doing it and actually one of the engineers in from Spain he say that he works for the bank and they're using that a bank in Spain yeah and they use it a lot in the main website and that's why I really surprised and I asked him how you do that and you have seen any issues so far he said they don't face any serious issues yeah thank you