 Hei, saya akan mulakan beberapa tahun ini dengan Kelvin Chang dan beberapa orang lain. Mereka ingin mempunyai sesuatu kata-kata makan tengah hari. Mereka faham banyak orang tak boleh pergi ke pejabat dan bercakap tentang teknologi dan sebagainya. Jadi, mereka rasa kita akan mempunyai kata-kata makan tengah hari dengan lebih baik. Mereka mula-mula mempunyai kata-kata yang pertama di Block 71, di Raja Cousin. Dia minta saya jika saya boleh membantu dia menghormati satu di rumah. Saya kata, ya, baiklah. Dan bos saya, Steven Goh, sangat teruja. Saya rasa saya akan jumpa di tempat ini. Ini adalah keputusan saya. Jadi, ia okey untuk mempunyai kata-kata dan datang ke sini untuk mempunyai kata-kata di sini. Ya. Saya rasa cara yang berlaku di Block 71, saya rasa kita boleh menggunakan keputusan yang sama di sini juga. Jadi, jangan terlalu marah tentang makan tengah hari. Dan keadaan dia berkata, Jangan terlalu marah untuk makan tengah hari. Dan Steven berkata, cuba buat masalah. Jadi, ya. Ya, saya pasti ia akan berubah. Ya, jadi hari ini, saya akan bercakap sedikit tentang membuat website yang berlaku. Baiklah, jadi... Baiklah, jadi... Pertama-tama saya, Michael. Saya mengandungkan kata-kata saya sebelumnya. Dan saya akan menjadi penyelidik kata-kata penyelidik kata-kata di sini. Itu tempat kita sekarang. Pertama-tama saya. Ya. Jadi, membuat website yang berlaku. Pertama-tama keputusan yang terbaik. Dan kita akan mempelajari tentang apa yang kita lakukan di kata-kata. Untuk kata-kata kita. Jadi, bagaimana jika saya mempunyai kata-kata saya? Jadi, membuat kata-kata saya... Untuk saya, saya nampak ada dua kata-kata yang berlaku. Seorang adalah bagaimana jika kata-kata anda mengadu keguguran Epic? Baiklah. Itu tentang langkah website. Yang lain adalah bagaimana jika kata-kata anda meng급kan kata-kata yang terbaik kepada sisi meng inaugurasi dan konfigurasi lalui. Как berlaku dari pihak correspondent ke format smart phone dan ke siblings Apakah bagaimana anda meng급kan kata-kata untuk ke dalam kata? So, for the first part, about how fast the website is using input, there's a lot of literature on the internet about how this is done. I recommend you go to this website developed by Yahoo. I'll follow these slides a bit later so you guys can have a look at it. So basically, their site has 35 tips about how to actually optimize the website speed. That part of it is pretty much covered elsewhere. So, I'll cover more about how your website basically degrades into different platforms. So, the first question we'll ask is how far do you want to push this? So, basically, who are you building for? What kind of browser support do you want to achieve? In mid-2013, because we are accessible from different parts of the world and even in places where there are limited internet access. So, you need to be able to support a phone which is GPRS and a feature phone like Nokia M95 or E73 or E72. So, because we are a chat client, we let you basically chat with friends online through the smartphones and feature phones. So, why we need to be able to support different browser sizes. Internally, we have a matrix where we create 4 grades, like grade A, B, C, and D. Grade A support will be basically... Actually, I kind of stole this from J-grade mobile because J-grade mobile had also a grading system but they say what kind of browser they can support. So, I'm kind of paraphrasing from there. So, grade A will be a basic desktop browser. Basically, a minimum of 1, 280 by 800 or more in terms of school resolution. A tablet will be basically grade B support where I will say it's a tablet, like say iPad. So, we'll see how well your web page can be viewed on an iPad landscape or portrait. Grade C will be smartphone support. So, how do you view it on an iPhone and to a certain extent even on E72 which is like a keyboard. So, that's the grade C support. Grade D support will be for N95 phones which is kind of like really crappy small screen. 320 width usually. 320 pixels of width higher. Maybe 240 by 320. So, there are some documents online and how much screen sizes you can support. So, that's the question about who do you want, how far do you want to push this. When you're building a website, who are your target audience? For us in mid-cafe, our target audience are all the whole spectrum, A to D, this whole group of people. So, which is why we need to be able to build a site which can be supported and viewed on these audience devices. So, what's the stack? We're building front-end stuff. So, we're building front-end stuff and we try to use the latest technology as far as we can. HTML5 is a street and JavaScript. As far as we can, we try to use the latest tags and whatnot but there are some older browsers that don't support it. So, you might have to be worried. You got to kind of be aware of the limitations of certain browsers. So, at some browsers, if you give them the button tag, they don't know how to render it. Some browsers, fortunately, if the N95 phone actually doesn't know how to render a button. So, which is cool. CSS3, there are ways you can... Well, a good thing is that older browsers who don't understand CSS3 syntax usually will ignore it. Unless it's a non-standard browser that kind of dies when you see something that doesn't recognize. I've not actually seen any of those yet. So, maybe those in China. Okay, semantic naming. Basically, personally, I prefer classes more than IDs because you have CSS class when you assign a class, when you style a class, basically all the stuff in the DOM kind of inherits the styling. An ID would more likely, if it's only one, you should only one of this exist in the whole DOM, otherwise it's going to be crazy. Personally, I think frameworks are okay. We ourselves, we actually use frameworks for our JS client, which is our full web client where after users lock in. We're using backbone JS, we're using... Required JS but my responsibility in company is more the front-end. How many of you guys visited miktv3.com website recently? Just today? Never mind. I'll show you guys later. We actually just pushed a new version yesterday, so I'm kind of happy that we did. Okay, what do we use internally? Personally, I'm a fan of CSS. If you haven't started using this any form of pre-processed, please do. Go ahead and try something. There are a couple of these pre-processed out there. So basically, a CSS pre-processed means you write in a certain syntax and you have a parser that will convert it to a fully quantified CSS text that browsers can understand. There are many benefits of using CSS pre-processed. Mixings are kind of like... Think of it as functions. You call a function, you generate a whole bunch of CSS codes for you when it gets generated. Variables. You have variables for colors. So you can set a blue color at blue or something. You have a variable called blue color and you can mark, you can tag it to a hex, hexadecimal color. So that's CSS pre-processed. CSS less is a CSS pre-processed which we use. I'll show you how it looks like. So this is the less CSS pre-processed as you can see you're basically writing in CSS... This is CSS, but it allows, it supports accreditation syntax for indentation which will then create CSS. And so on and so forth. So for example, something like this will generate something like this so you can mix in a variable called color and then you convert into this when it generates compile. Using CSS, less CSS on its own is pretty cool but sometimes you might want to use some frameworks that can help you. So what you can use is called CSS less elements which is basically a collection of mixins they can use to quickly do round corners and stuff like round corners and you throw in all the additional browser specific markups as well like Morse and Webkit and all the other stuff. So this is pretty cool. It's just one file then import and you can do server-side include in compile time, right? Ya and for type of thing, we use PHP tau. We can use PHP tau to do that. Of course, if that's not your thing, you can go for moustache which is cool also whichever. Of course for JavaScript, we use vanillaJS. It's just plainJS. It's exercise you can check it out later. Ya Right, so let's get nitty gritty, the best practices. Media queries are your friend. Media queries was introduced in CSS tree to kind of help you detect what kind of browser what kind of property instead of browser window has like what's the width what's the minimum height and with that, you can then try to adapt to browser size. Ya, so for example, this is our website. So, I mean my responsive website is something like this. So, when you drag it and resize the window so this is like a full web. Grade A support, grade B support you know grade grade B, grade C and all the way down. Ya, so it gracefully degrades like for example, this section on fun, freedom and friends it kind of degrades and kind of pops up with the full image when you get to certain width. Ya, it's pretty fast also. Ya, it's pretty fast to load. Ya, another one which is the learn all section. When you go inside there, you see the whole big chunk of stuff. 3 3 chunks of stuff and as we resize it so it kind of narrow and only shows you the stuff that you need. Given the footer, it kind of resizes itself you can see the blue and the gray section it kind of switch to that arrow thingy and as you can see the bottom part it upgrades from 1 column to 3 column and then the last one which has a very nice gray bottom. So the way we kind of get around doing this is using media queries media query will basically tell me or rather tell my code what's the minimum width and height of a page and with that I can then apply and because we're just getting stylesheets visiting, if we declare something after the first declaration the second declaration will actually overwrite the first declaration. We give it a font size 5 and then you have a dental declaration after that and it kind of says I want to change to font size 15 you actually 15 will overwrite 5 so we're using this inherit capability of CSS to do responsive design what we're doing is actually we're declaring a new style attribute when browser window hits a certain size so I can so that's using media queries and we just show you in code how this pretty much works like in the home page this is less by the way so we have on top these are all the base styles that are applied to the different objects in your dorm but once the resolution hits a certain size you scroll and scroll down further you can see it so media is of screen it's a screen that's viewing this and it's minimum width of 500 pixels this style for example this style will overwrite the one that was declared previously so I'll show it to you how it differs so this style here it says I want the height to be 470 pixels but original declaration or it's also 470 pixels slogan for example slogan width is 90% and the slogan here so what this does is that the hero slogan which is the first page which is this part before pixel 500 it actually goes flush to the edges once it hits 500 pixels bring up my developer console so I can see the change in the resolution I can see over there the resolution change 500 pixels padding appears because the second style the second style which is only applied after if you just apply a new pixel mark changes the width to 90% so basically if you're having something below that overwrites what I was declared earlier and the way to do that is using media queries which is basically as opposed to this so we can set minimum width maximum height there are a few other attributes it can apply that would control it but mostly for us we use the width basically because that is pretty much what we kind of know the prevailing screen sizes for different types of devices so what we do based on the screen width and height will apply to different styles so that's using media queries so resolution there's no fixed guideline to how much resolution that will be used although we know the screen sizes but the resolution that you target will vary based on your design in our design for the new site a lot of the design elements are flushed all the way to the edge for example over here this blue this blue better beyond the margin so we need to then have a style that would be fully 100% but at the same time have a capability to control it to set up a margin so your design will actually determine which resolution to target for in our case so as you can see we use 500 pixels as the first layer of transition the second layer of transition is 5 pixels beyond that if I remember correctly it's 930 pixels somewhere below 930 pixels and then the rest is 1020 pixels so as a guideline i.e. A, B, C, D so these are the major platforms and guidelines of screen resolution but based on your design you might want to be able to transit in more than 4 phases for example over here because of this rotating banner and micboard in the middle I had to do something to hide it for example first resize it and then hide it altogether because if I go a bit too far it will overlap in other elements that will look ugly so I want to be able to do that so the resolution you target for is a lot based on your design and the best way to do it is to basically have the design ready and kind of the strategy that we use is to ask our product manager look, I'm going to resize this screen what are the things that are most important to you what do you want to see when you hit all the way to this resolution and our product manager look, I want to see this and I want to see this these are two most important elements on the screen so how do we gracefully degrade from this all the way down to this so I ask him is this piece of information important so the more important to start with this logo and this call to action so we kind of decide based on that so and that strategy that we use is to build for the smallest device first why and you can guess why we build for the smallest device first any guess that's where all the important elements are presented and we go down so basically what we also want to do is optimize download size so basically what we do is because of the way that cascading style sheet works the first declared style gets used first and in a browser that doesn't support css3 we ignore all the media queries when we have a media query tag and your browser is an old browser that doesn't understand what media query is it will basically ignore that section so this particular section for example on media screen and with this one some older browsers like internet explorer 6, 7, 8 maybe 9, I don't know don't really understand what media query is so if you declare this it will basically ignore it which is good because on older browsers you want them to be able to still see what you have you say ignore just ignore the media query or ignore everything ignore everything so basically our strategy is to basically load up the minimum graphics without media queries so basically without any media query declaration tag we load up what we want to see on the smallest browser and then we add the first media query tag which will be the first step up and that will basically include additional assets different sizes of assets like this button is now 700 pixels instead of 20 pixels something like that then you step up and in doing that you only load the big assets when you reach the highest resolution and in most cases for example if you look at our browser or rather our site the background actually is over up to 600 pixel mark our background is actually a smaller image and once it hits I think the 700 pixel mark it actually loads a newer a different image I think it's more obvious to do the developer console you bring up the network let me just start by resizing it to the smallest resolution possible clear all this and do a heart refresh so that's all that's loaded as you can see it's only 265 kilobyte transferred and when I start resizing it should start loading more stuff the rest of the assets gets loaded like what we see in this panel which has all the numbers gets loaded only a bit later as you can see the last part this image hasn't been loaded yet so when I resize it a bit further it ought to load the last few assets so let me just resize it a bit more there you go load the additional assets if we meet a query like display friendly so for example let me just show you the logo so our logo let's have a look at it logo you have one logo here which is a standalone logo you go further down there you go webkit minimum pixel basically tell me you will tell because the browser tells me that it is a retina display for ipad 3 or iphone 4 it will then load this asset instead which is why you can load our website on a retina display like iphone 4 or 5 you see the logo is very sharp of course the size of the file So be careful with that. There are some tips online that shows you how to actually do this. So I kind of adopted those tips. So basically it's about taking an image and kind of giving it a kind of actually 2X image and kind of resize it to the actual size of the logo. So yeah, so this is what we talked about. Building from the smallest device first then layering it up. Sometime it's not easy. To be honest, it's not easy. For me, because I didn't have a good idea of how this could basically degrade from big to small so I don't work backwards. I'll get the full size image out first. Full size up first, then I'll slowly consider what the stuff I need to pick and choose and move it around. So if you already have already a mature site and you build up, this probably the strategy will go for. So basically what I did was, okay, so this is the default styles and then say okay, now I need to do a bit, I need to do something to the logo. So for the logo, okay, this is the header and this is the logo. Okay, now I need to make this logo smaller or something. So what I do is I'll create a new block and then eliminate stuff which are kind of not meant to be there. So even if I say the logo will be bigger size when it hits a certain resolution, then I'll go down and just edit the size in the newer section. And then I'll start there duplicate between the first section and the first declaration and second declaration. Start there duplicate, make a mistake there with the height of 470 pixels. We should remove them. So basically you leave in things that are overwriting the older style which are relevant only for the extreme resolution. It takes a bit of experimentation to find out what you should use. In our own experimentation, we decided MinWave is kind of like the best way to go. In our previous version of our website, I even had to play around with the height, sorry, I'll play around with the height because in grade, smartphone browsers, you will look at just iPhone 4 and 5. It's a fairly straightforward resolution. You look at the HTC butterfly or something which has a white screen and a taller screen, the width setting of 320 may not be relevant. So it was a little bit of playing around with the resolution until you get it right. So best if you get an actual device to test with or you can find the actual resolution online, load it up. Personally, I have this little widget here which kind of lets me play around with the resolutions and stuff. So in Chrome, I'm sure in Firefox or something similar, you can just specify a resolution. Right, so in buildings for the smallest device up, only load the assets that you need in the smallest version. So basically in the unmediated query section, load the base stuff and only the assets that you need. So you optimize the download speed on a small device. As the screen goes bigger and whatnot, then you load more assets and we should overwrite the new assets. I think there's a rule of thumb if you're using a bigger screen size, that's the conventional wisdom. So Ya. Okay. So styling attack. So basically you can style attack instead of adding a div with the class. I think there's an old saying in the web development world, there's a thing called the divitis and classitis. Solve it with slapping a div there and putting a class to it. So as much as you can, style attack. And it also makes your markup a bit more readable. How do I mean by this? Let's just have a look at say see where I can do it up. See some of the templates. I think it's better to show the actual rendering. Okay. Right. So in the case of the slogan Okay. Okay, the slogan for example first started with a div, with a class slogan and as a H1 and a P. So as much as you can just style the H1 and the P. So basically take on the class as the main identifier and then kind of style the tag underneath it. I'm trying to load up that section and show you better Alright. I'll actually show you the style for that. Base, base. There you go. So based on this, you only style the H1 and you style the P. So it's already part of the dom. Sometime people do it in the past that they have a div with another H1 and then the H1 has a class and then and so on and so forth and they try to style the class instead of something else. Which is only relevant if, yeah. The reason they do that is another school of thought is because they're a style so you can change your markup but if you use class size it doesn't really matter if you push your class to the school. Which is why it only matters for see yourself recycling or reusing that style in other parts of the system. It only matters instead of each one use a style to class each one or something like that. It only matters if you want to recycle this or reuse this in other parts of the system. Personally, I don't really do that so I just keep it through. It makes the markup a bit cleaner. Of course, the reason why my markup is a bit dirty now is because I have an IV inside so that IV is meant for me to target the slogan and change it and rotate it. Okay. So as well as you can style tag unless you want to recycle that class, I'll swear. The browser developed too is your best friend. So if you're using Chrome or Firefox and Safari that's a whole bunch of developer that can use and bring up that can help you find stuff target, certain layer, even experiment with styles that you can go in and say okay, instead of being one see this. So for example, I can just select here right click and say look, this is this I don't want this to be so big I want it to be smaller. Let's see what happens when I make it smaller. Okay, there's some part here. Chrome has sometimes Chrome has a bug it doesn't like to change it but usually if it changes it you should apply. There are similar things that are available in Firefox. In Firefox, there's now a built-in developer too previously we use Firelock which kind of gives me the same impact. So you use that to kind of test around with styles sometimes when I've implement an initial style or whatever when I was doing the learn more page for example, when I was right, so when I was going from this to this I was kind of experimenting with the height I wasn't sure how much height I should give this padding here so I bring up the style editor and kind of I try increasing the height and you can see I can get the height here so it's off to work so you can play around with the height until you reach the one you want. It's kind of like to quickly prototype I know this is way too much Okay, roughly around here so it's about 560 or 550 pixels or sorry 550 pixels if you're roughly the right one 540 maybe Okay, that looks right so what I do is I take this number and I'll take my style sheet so this is how I cut the sheet Okay, as much as you can minify your assets your JavaScript and CSS I think that's pretty much natural doesn't it? Ya, so if you can use the tool, when I use less I have a tool called less it's a desktop software that basically takes my less file and generate it into the CSS file and minify it somewhere which is pretty cool which means Storm also has its own compiler I don't think it does any minification you want to go a bit more hardcore you should consider a tool called Grant GrantJS GrantJS is a built tool which has many different type of task and one of the tasks that you can apply is a CSS minification or JavaScript minification or I'll magnify your JavaScript and stuff so yeah, this is pretty cool pretty cool to have if you have a tool change if you have a development you have a development process that's supported it's great if not then you just manually run it before you check in a code okay this part about CDN is also covered in the Yahoo! article so use CDN distributed static assets as much as you can and last part will be CSS3 transitions CSS3 transition is pretty new I won't say new it's just hard it came about with newer browsers what CSS3 transitions it means is when a div or an element in a DOM gets changed some property gets changed you can actually slowly transit from 100px width to 50px width at what timing you can specify how smooth the animation could be so you basically can tell it to when the width when there's change in the width you should animate it from this to this at a certain speed to a situation of 1s of 2s or something so in our website we actually use that quite recently so when you resize it it's about 0.2s animation it kind of rotates it back and moves it from there to this given our home page because we recycle or rather we apply the transition yes but for user point of view the main time they'll see that is on their switch orientation because the DOM there well you can also do things on the hover on scroll you can also apply transitions and I saw you had a global style you just applied it to all divs so I'm a bit lazy no maybe because I was doing seems like cool thing to have let's try it so I applied to all divs so in this case I applied to all divs well I applied to all properties so you can specify when there's a change in width or when there's a change in height when there's a change in orientation say when you're rotating but I applied to all so whenever there's a change in in height width transparency you will actually apply this and over a 0.2s speed animation is linear I think in terms of how smooth it goes like either fast or slow or slow and fast but I choose linear because I want it to be even yeah go do a bit of experimentation I will play around with one second timing and half a second timing but 2.2 was kind of like the sweet spot where it doesn't get too jarring in terms of animation but there were some weird and quirky behaviours that kind of came out of this so for example this little arrow here because I applied the style to I gave it a background color of some sort in the second dip so when I resize to a certain size of the corner to here you can just see it a little bit you can see the black ground cut bleeds into this you see it as it stretches because it was resizing the dip at the same time so I had to go in and overwrite that style and turn off animation it used to be worse for like it was irritating so there were some quirks that kind of happened well I guess there's a cause of actually me applying it throughout the whole system so that's kind of if I was a little more smarter I would just go in and apply with the specific elements that needs it I have a feeling transitions like this are not cheap in terms of the CPU in terms of browser rendering so I would I would play a bit judiciously it's cool, it looks nice because in the past I don't know where it is we still have our old site here this is our old website you can see it kind of jumps abruptly put one to the other which is kind of okay but you know you have something cool that can amaze people amaze bosses and investors and clients but one of the little side effects of CSS transitions is this little thingy you see it it wasn't supposed to animate but somehow it's doing it now so there's one of those little unforeseen side effects I thought it wasn't purpose no well it's kind of cool, it kind of works but you get what I mean so yeah that's pretty much it it actually fades in now it used to be a rough flip crossfade so CSS transitions are cool, but use it judiciously because if it's overloaded I'm not sure how it would perform on a slow computer so you might want to be judicious about it actually there's not much demo because I've been showing you code throughout the whole thing that's what I have to share do you have any questions for me? I've got two questions so you said you put c and d yes so meaning if you're loading it on a browser doesn't mean the person using internet explorer is going to see the mobile version so what do you do with that? we don't upgrade the browser well if we're really particular about it if you really want to support older browsers like at least 7, 8, 9 you might want to have some user agent detection and then show them the full version of the thing because they don't support media queries can you respond.js respond.js so yeah another way we can use the JavaScript solution it will then help you apply the right styles I'm not a big fan of using too much JavaScript to do stuff my second question is do you have any tips to people who are actually designing websites what kind of best practices you have for them when it comes to we're going to come up with the design and we want to think responsibly as well when you're on the whiteboard I think it's no two way around that you just have to start drawing in smaller boxes big box, smaller box, smaller box how does it how does the whiteboard layout I think it starts at the wireframe level when you start doing the wireframe you have to think about if a mobile user uses what are the most important elements still in the show and model that and then how do you find a middle ground between that and this I think it's no two way around if you really want to be serious about being well planned and doing this you basically plan it beforehand say from you know that on a desktop browser you can support three columns but on a mobile browser you can support one column how do you go about doing this in our case we didn't have much we didn't have a luxury of time so the designer came out with just the full version so I kind of told the designer I just knew to give me the assets I need I need to give me a smaller version of the background banner which means I won't be loading the full background banner when I get to a smaller device so it will give me one with the width of 600 pixels and I'll handle the rest so in this case then this has a transit from a two column which is text on the left graphic on the right and transit into one column if I'm smarter about it I could actually in the interface load this into the social and fun box if I want to so it becomes part of being even smart but then I'm not sure how that would affect my markup design color schemes and what not as you can see the image resizes and I basically use the 2x version of this image so this image is a 1x so when I go to this you will load the 2x version and then you will come so the good thing about doing this is that at this stage at the smallest level I also declare a 2x version of the image so you will load it on the retina screen you will see a very high definition or a high quality version just kind of fun if I got a bit further I would have even done a 3x version which would then when I'm here doing this on the iPad Air I could then load you can't be done you haven't done that yet but optimizing for smallest screen sizes but yeah no 2 way around it, you just need to do that I think the 2 extremes basically the desktop version and the smallest version and then finding a way to kind of bridge the gap starting at a wireframe level will be very good because that will help and even rationalize I say on the desktop version you have a whole bunch of things on the screen happening at the same time so if you get a smaller screen you only want to focus on the things that the user wants that you want to focus on things that will catch user's attention we're in the first 2 scrolls once you put it too far down the full they'll never get to it although chances are on a mobile browser with a touchscreen browser you can just scroll all the way it's kind of not too much if you scroll I will not do much okay yeah, any other questions? alright without any questions you can just check out our website the hackers and haters website I think there is also an actual website that Calvin prepared so you can check it out and I'll see you again next week if I let me try to pull up the event it should be a search engine thing how I got my site to top 100 without top results with no budget okay so that's something else so next week yeah there's a whole bunch of other talks going on so if you can make it if you can't it's cool I'll try to put the videos up I'm actually recording today's session so I'll be putting up for that together with the links you can probably find it on the hackers and haters website soon yeah any other questions? okay, a bit logistic so if you can come you can bring a lunch here there's water there's cold water and hot water and a little bit of coffee I don't know yeah this is victim tree and it's my office where I work in feel free to come back and say hi and chat yeah, not too often though I'll never get work done but member of my web our web team and my hair engineering we're actually hiring I think yes, we are so hiring web developers so if you're interested and you love the view and the environment give us a think free coke in the fridge free coke in the fridge yeah alright thank you this is the yabu website I talked about so there's a whole bunch of best practices you can look at 35 so it's kinda cool I'll put the links up together in my slides thank you