 I was quite delighted because the first speaker's name was also so weak and I found another person with the same name after a long time, like I never heard that name before. So the flash of that I'm going to have today is about why do most developers hate UI development so much. So just to give you a background I come from I have done about 13 years of development mostly on the back end side but then for the past five years or so the front end development has actually excited me quite a lot. And when I was actually shifting my focus more and more towards the front end development because I was getting more and more interested in that a lot of developers actually used to come to me and they used to you know come with a lot of surprises as you know what's wrong with you like you know why do you want to get into the messy structure of front end development like the back end development is so much better. So I just you know trying to think about you know what really makes the front end development so repulsive to most developers. So just run quickly through a lot of these things. The main thing is about logical thought process versus creative thought process like most of us developers we have been modeled to think about in the flowchart way like you know if this then that if this then that but most of the front end development it's not really so much of the logical development. Sorry not so much of the logical thought process but about a creative thought process like you know you need to think about OK where should I place the button so that you know it is really accessible to the user where should the images be where should what should the color be and things like that. So for example I'll give you an example from a site that I've developed. So let's say this is one site where this is one ad button. And then on click a fat button I'm supposed to add three more contacts. So if a developer is supposed to add these he'll say OK why is this ad button at the top. I wanted all these things over here. So the way they try to you know target this is they try to apply logic that you know I mean what is the best way to actually get these things up over there. But as you see in a CSS there is nothing logical about it like when they look at this display settings there they don't understand OK what is this inherit what I'll do is OK since there is no logic let me just do one by one. So they'll keep doing you know one after the other and then see OK whichever fits in the best I just like that and this is how most of the developers they develop UI and then they say that OK you know what this is not my my cup of tea because it just doesn't come and even if that button is showing this ad contact is showing somewhere down here. And there is absolutely no logic in you know getting up with the good UI. And this is one thing that most of the developers face that you know they don't understand most of the constraints. They just want to play with it one by one. Most of the property that you see is like display even position whenever you know they want to position the element somewhere. They just go to position and they select absolute static and relative and things like that. They don't know you know they'll just see OK whichever works that is fine with me. And with that they face a lot of a lot of problem going ahead. Oh sorry I'm running out of time. So and one more reason why they hate your development because because their peers say that your development is bad. So another problem is with leading styles because they do do select styles in this way when the application complexity grows big that style actually flows down right. And so in one component where they did not want that style. There are also things start showing up. So they really I mean these kind of things really you know creates problem for a developer. So how to make life easier for a developer in the UI development. One thing that I am really doing a lot of research these days is what if there is only one position which is absolute. This will make things look so much nicer to a developer that I want this button here. I will just specify what is X and Y and it should be there. This sounds more logical to me. So not the time right now to think about this in detail but I'll talk about it later. What if there are more meaningful panels like you have it in frameworks like you know a silver light where I come from. They have good meaningful panels like stack panel dock panel grids and all this will make more logical you know structure of the UI. What if there are no manual edits always use to prefix you know precompilers like lessons as always have packages like auto prefixes lint and good you guys good editors so that because whenever the developer has to edit anything by hand that is the pin point with them. And then make your developers participate in usability testing so that they do actually understand what is the customer looking for because as a developer. I always think that OK this button is there. The user is going to click on that but you know I will only concentrate upon what happens when the button is clicked but the user does the developer doesn't really realize that you know this user has to see that button and click on that. So make them you know participate in usability testing then use things like shadow DOM and the angle operator to make sure that at least your styles don't flow down. So these kind of things few of them when we make our developers follow more and more their life will become much more easier and they'll start appreciating your development. OK so the last point was like if you try to make your development more logical than creative absolutely it has to be creative but make it more logical. Thanks. We have two more speakers after which so we want to go again. So if anybody else wants to come and speak before that you're welcome to up next is Prashant. Good evening guys. How many of y'all are designers here. Please raise your hands. How many of y'all feel that you've designed something and the developer has given something which is like slow sluggish. It lacks the performance and it's not up to mark. Please raise your hands. OK. So within this five minutes I'm going to talk about one of the most interesting technologies we have today. That is SVG. OK. So how many of y'all have used SVG or how many of y'all have told your designers to I mean include SVG stuff. OK. So a couple of guidelines and designing SVGs. I am about me. I'm a front end developer from Bombay and I've been freelancing since almost five years from now. And I work a lot on visual based creative websites. So I work extensively on SVG and some of the guidelines that I've told to some of my designers. I would want to share some of the insights. So first of all SVG is pure code. So you can't have too many points. So try to simplify your points. If you have something like gradient measures and stuff like that don't come completely avoid gradient measures. So instead you can use a simple gradients like radial gradients. I mean linear gradients and stuff like that. Combine the parts as much as possible. Use simple strokes and fills. How many of y'all have used SVG animation. So I think one of the best ways you can animate an SVG is using a stroke. So obviously the stroke and obviously you can create good vector parts using only stroke. So make sure your strokes are very simple. I think that's it. Thank you for being such a good audience. Thank you. Thanks Prashant. Sakshi is next. Hello. Hi my name is Sakshi and I work at Praktor. This is going to be about how to build a style guide for your company's website and other products like a general CSS. Yeah. So designers have their own way of designing stuff. And so as a developer, I'm a developer here and not a designer, not a PM. So this is my side of story how it's difficult to build UI components and how to maintain consistency across all products. So we were given a style guide of components where there are colors and fonts and different kinds of buttons and layouts. And making like developing this into a consistent file and file system and maintaining it across products is extremely difficult and requires a lot of work. Writing it from scratch. So what we did was like we picked up a CSS framework which is semantic UI which looked similar to what our developers wanted. And this also allows theming. So there are different kinds of themes which you can pick whichever whichever looks closest to whatever you want. So despite that, there will be changes that you will need to make to do those. So semantic provides variables and you can create your own themes using that. So for example, a button that here looks like this. And if I want to make it look like this, all I had to do was go to the buttons. Just go to the theme.config file, change the theme name here and go to the variables file and give them whatever values that I wanted. This way I could do it for all the components picking whatever is closest to my requirement and just try to gulp task to move the theme to our folder and just build the CSS files that way. This helped us maintain all our components and anyone can just use the classes and continue just coding using it. Thank you. Thanks Akshay. Is anyone else speaking? Shaila? Hi again. So this is something that I am doing currently nowadays a lot so I am going to speak about that. By the way, how many of you attended JSFU also in the last two days? Oh, it has only started. So if you would have noticed that the slides today were much more beautiful, cleaner, the font size was good, the color choice was much better and the graphics and everything in the slides was much better than what I saw in the last two days. So yeah, it proves. So, okay, so the next one that I'm going to talk about is about usability testing and design review, not what to do, but mostly what not to do in a usability testing. So what exactly is usability testing? You have created your product and you are very excited to go to the market, but hold on your hustle because your user may not use your application the way you have designed it for them. So you want to make sure that your user is actually aware of all the features that you have incorporated. So the purpose is to get a good, it's like a good feedback mechanism for your application to make it much better. So one thing that you have to make sure in your usability testing, like big companies, what they do is they'll make a user sit in a room, put a lot of cameras into their face and eyes and everything and then see how they are reacting to each and everything. But it's not always possible for us. So what we should do is as much as possible, sit with the user. If the user is not co-located, at least have a video conference and at least try to look at the face of the user also. And if that is also not possible, tell the user to think aloud. When the user is actually using the application, tell them before you start with the usability testing, set the expectations very clear. Tell them what exactly they should expect out of the application. Do not discuss about the feature. Do not tell them that, okay, you know what, I have got this cool feature in the application. Let them discover it and that is the purpose of the testing. But tell them what to expect from the application that, you know what, this is a movie ticket booking application and not a rail booking application. So those kinds of expressions should be set. And while they are testing, it actually happens quite a lot that, you know, the user is saying, okay, where is the button to book my ticket? And you are like, okay, it's in front of you and you're not clicking it. But you should keep absolute silence and not give any kind of hint to the user. Let the user search for it, see how difficult it is getting for the user to search for that button. And tell the user that, you know, okay, tell what is going on in your mind. The user will say that, okay, you know what, this user is so cluttered, I cannot really find the button. I'm expecting a button to be here somewhere, but I just don't see it. And you see it and the user doesn't, you know, they don't see it. So let this kind of feedback come in, never give any kind of hint, never give any kind of expectation to the user that, you know, what to expect in the UI. So that is one very major point. And that needs a lot of calmness within yourself because when you're sitting with a user on usability testing, you really try to get very angry that, you know, okay, everything is in front of you and you cannot find it out. So normally what I do is the application that I'm creating on, I'm working on a startup right now. So I always make my wife test it because whatever, even if I get angry and all I have to keep quiet and you know, I cannot really vent it out. So, yeah, so, yeah, let me just see if I missed out any point. Yeah, so I think that was more about it. This was quite a slow pace for me. Good. So the main thing and the takeaway is that see what the user is doing. See their gestures. We saw a lot of good presentations today about, you know, collecting measures from the user about their gestures. So always see very minutely what the user is doing and tell them to keep talking about it. And then after the usability testing is done, then tell them that, you know what, the button was there only and they'll have an aha moment and you'll also have an aha moment kind of. So, yeah, and always keep incorporating those changes. And that's why the best thing is that even if you have like 10 friends, do not discuss your application with your 10 friends because use each of those friends as a good tester for your application. Keep absolute silence about your application. Take them into a room one day and give them the laptop and then tell them that, you know what to use this application and then see their reactions and how they're using it. So that's the best way. Do not discuss your application features before it is, you know, actually out to the user. So yeah, that's about it.