 Okey, so today my talk is going to be directions of the web. If you understand Chinese, the four words say si mian bafang. Si mian bafang means the all types of directions. Yes, it's going to be a very quick running talk enough for my esteem speaker here to take a breath, come down and like stop sweating, it's okay, fine, moving on, very very sweat. Okay, so because this is semi-official, this is me and this is the stuff I do. I must mention that I represent Malaysia. Yes, that's the most important thing. Okay, I'm also this thing called, as you can see, I feel obliged to do some semi-marketing things for things that are relevant to me, so please bear with me for a little bit. So there's this thing called Mozilla Tech Speakers. Basically, they want to sort of support local community speakers, developers want to do technical speaking. So they are now open for people to apply. So if becoming a speaker, the bar very low. So if you see, anyhow, you can stand here, right? So if there's something interesting to you, there are resources, they offer training and things like that. If this is something that you feel that you're interested to get into, applications are open at this website, or you can just kind of talk to me, I can send you the link and stuff like that. Huijing is employed, guys. I'm not a fun individual. There is a company paying my CPF. So old people in my family are very happy that somebody is paying for a retirement. Very good. So I recently joined a company called Nexmo as a developer advocate. Nobody knows what a developer advocate is. Even my own company, like in Singapore, didn't know I spent the first three days explaining what I do. So basically, developer advocates only present themselves in companies that their product is a product that developers use. So my company makes communication APIs. So they need developers to talk about it. We also make a lot of cool stickers. And yeah, I have to work on this. I just joined for two months. So if you talk to me again in six months, I probably have a better speech about my company. But okay, moving on. Oh, jok. I never update slide. We are technical difficulties. Force, brother, force. Never push, never push. The more the story is, must push. Never push. So now I must load from local. Oh, I have stories about that. That went wrong. We will share one day when I have no speakers. Okay. Hopefully, this one is a later one. If not, then oh, hello. Okay, try again. Okay, yeah, yeah, yeah. Let's look at some old pictures. This is a drawing of the... Eh, eh, eh. Why you laugh? Why you laugh? Don't laugh. Be serious. Be serious. I'm very serious. I did those slides, guys. So this is a picture of an analytical engine by Charles Babbage. It's a very early iteration of what a computer is. This is a Z1 by Conrad Zuse. I cannot pronounce Germans. Please enlighten me on how to pronounce this name. Okay, what he said. This is, again, a very early prototype by this computer scientist. There's, I think, his parents' living room. This is a state diagram of a Turing machine by Alan Turing. So this was probably about 50s. This is the colossus. It was designed by Tommy Flowers, used during the war. And this is also an ABC computer by someone called Vincent Athanasoff and Cliff Berry. See, all black and white. These are very early iterations of computers. But what do all these early computers have in common? Made in Ang Moe countries. See? So in most Ang Moe countries, right, their writing system is top to bottom, left to right. Like, German, English. But if you look at the world as a whole, the writing systems can go in many different directions. So, like, the Arabic one is right to left. We got the East Asian ones that can go vertical or both. There are some very interesting ones. Inuit up top, Eskimos. There's Russian. So different writing systems, different directions. But on the web, generally the default is top to bottom left to right. Largely because, like I've shown in all the beautiful pictures of ancient computers, this digital age was pioneered in countries whose writing systems were horizontal top to bottom. So naturally, we all got very used to it. Like when we see something that is on a screen or digital, we kind of accept that the default is horizontal top to bottom. But of course, it's called the worldwide web for a reason. And there are a lot of initiatives that want to strive to be able to represent the world's writing systems accurately on the web as far as possible. So a lot of this in the early days were constrained by the limitations of hardware. But I think we have reached a point where hardware is relatively, how to say, good, cheap and powerful that there are a lot of things that can be implemented. So specifically to the web, a lot of the things now on the web we use Unicode to encode our characters. So for Unicode covers a lot of things, but in terms of directions, these are links. So if you are interested in this sort of thing, it's quite, it's a very detailed technical document that explains how and it's not just for, it's not just for browser's internet per se. It's just for any software application that uses Unicode how they handle bi-directional. Of course, can you imagine if you mix Hebrew text with English text or Arabic text with English text. If you've tried it, of course I have done that for some of my previous talks where I had to give the talk in or I shouldn't say this on camera ammunition passport. I build demos that use this right to left languages and if you try to type in the browser actually does this quite well. If you type a Hebrew line of text, it will start from the right automatically. And but funny thing start to happen if you have a mix, if you mix left to right and right to left. And for the most part, the computer can get it right because of this Unicode bi-directional algorithm, they are like rules attach to to the nature of each character, et cetera, et cetera. There's also Unicode Vertical Text Layup but this is a bit less it's much shorter than this because for vertical for vertical text it's something that I think the Unicode Consortium agreed that it can be handled in another way which is through CSS. So if we do want to do vertical writing on the web there are CSS properties that can do it and it's called it's specified in the writing mode specification which is pretty much what I talk about a lot of the time. So these are the these are what dictate I don't want to say alternative but non-default writing directions on the web. So today it's going to be like a lightning talkish thing but I just want to cover how you can change direction of the layout of your content or your websites through CSS basically. So the first thing we're going to cover like I mentioned is writing modes so the default is this horizontal top to bottom so it's like which one ah oh it's not because it's default I didn't I didn't have to do anything anyway but if you the alternative properties are vertical RL which is right to left I think it's the first one so it's right to left and or you can also do left to right this is specific from a language perspective Mongolian the not the Cyrillic one the actual Mongolian script right it's vertical but it's read from left to right so this particular property really actually is targeting targeting Mongolian the rest of the East Asian languages your Japanese your Chinese will go with vertical right to left because we read it from right to left and you can also combine with transforms because as you can see right even though it's right to left or left to right all the text have been sort of rotated clockwise if you have to rotate it anti-clockwise then you probably have to do some transforms but in general it's quite possible to rotate text even though you are using say latin based language like English from a from a graphic design perspective Vertical text has been around for quite a while in print and it's just that we couldn't do it properly on the web like I think early on some people just like type one letter then enter type la letter then enter type la letter then enter which is you get the visual effect but I mean from a from a semantic perspective it's quite bad but because now we have these writing modes and it's now since 2012 it's almost like fully supported across the board except for opera mini one of the nice things you can do is if you don't want all your letters to lie on the side there's a text orientation property that allows you to sort of like switch things upright okay wait change font size a bit yeah so you can sort of do something like this so if you want to design I guess you know if you go to like Hong Kong or maybe if you go Penang more denser cities they'll have those like neon street signs that have this vertical text effect this is totally doable and your text can still remain you know you can still highlight it copy it and whatever so I think even though you don't design for east Asian languages specifically there are a lot of things you can play around with from a graphic design standpoint with the writing mode property so that's for like individual letters but in a broader perspective in terms of the layout of the items on your web page they are also ways for you to lay out your text and actually Flexbox is really fun I think most people use Flexbox for very practical reasons like oh I have a I have a navigation bar that I have one item that I want to kick to the right okay I use Flexbox you know like very nice respectable reasons but I think not a lot of people play around with the different combination so what we have here for Flexbox in terms of directions is that well first of all we have wrap and no wrap so if you do a no wrap I'm not going to go into the details of Flexbox this could take all day but if you don't wrap by default and if I don't apply anything on my flex item the default start value is zero one auto so it's just going to try to squish everything onto the same line but the moment I start wrapping you'll notice that there is an order to how things are flowing so in this example I use numbers right so there's also a property sorry there's also a value other than wrap called wrap reverse which will let you start your content from the bottom see so instead of top left to right top to bottom it becomes left to right but bottom up right there's also this property called flex direction okay so now what flex direction does is default is row so again default is a horizontal sort of a flow but you can change it to column and instead of flowing horizontally now flows vertically so let's go back to wrap so if I just do column then it goes it starts from top to bottom left to right so I think you can notice now that because there are two different properties that you can play around with right you can sort of mix and match the values and end up with a lot of different directions so now if I do wrap reverse with column it becomes right to left for vertical and row and column that's two wrap and wrap reverse that's two but if we we throw in writing modes into the mix right you end up so in this sense because writing mode affects the layout of the content the individual characters right you can also adjust the how your tax within your flex items is displayed whilst still changing how your layout looks so long story short there are many different possibilities I hope this slide is updated yes so there's also left to right and right to left languages so mathematically speaking two options times four options times two option times four option equals 64 possibilities but as you notice from the demo earlier some of them end up with the same result so like if one find day you are very bored with your life and I'm sitting around here and I'm better to do in my life you can try to attend to hit all 64 combinations I'm just saying it's an interesting way to spend your time and the last bit I want to cover is grid because with grid there's also the ability to change the flow of your layout by default again is left to right top to bottom but there's this particular property called grid auto flow which is kind of fun because it by default is row if I change it to column I will have to do some adjustments here but you can also change it from a horizontal flow to a vertical flow but what's nice about grid auto flow is that it also affects the density of packing so this particular property takes another keyword which is the dense keyword okay let's let's sort of like do a before after so abc in alphabetical order if I put in the word dense you'll see that eh h got inserted in here n t that's because when you introduce the dense keyword the algorithm tells the browser to try to fit in if there are any items that can can fit into any blank space it's like go ahead and and and sort adjust adjust forward so I guess I can I can see I can see from a art direction perspective that sort this sort of behavior would be would be ideal for for a lot of things so that is a javascript free sort of option for for sort of laying out your items I think this this this this this particular property is pretty useful it's a bit okay I understand it's a bit odd to just suddenly throw this this particular property without explaining the whole thing of grid but the thing about grid is that it it offers a lot of different options that we never had before it allows us to control space like we've never like we never could before because previously everything had to line up next to each other but with grid and now I'm because now I'm not specifying like the manual placement properties but grid actually does both of them very well it does the auto placement meaning you give it like a general instruction like oh I want my items to flow vertically but like pack everything together and the browser does it for you or you can also like be very specific like I want item G specifically to be on the bottom right corner yes you can do that with grid also so I think it's something worth exploring if like you you you keep hearing people talk about grid talk about flex box and then you're like eh nah nah like floats are working fine for me I'm like I mean just if that this is the sort of thing that you get more you get a better idea of the possible use cases only when you use it because you would have very unique ideas about how you want to use it like I can tell you all the funny ways that I use it may not be relevant to you but when as you try around you will probably it could sort of like spark some you would be able to use grid in a way that other people will never have thought of so just this is just my like spiel to encourage y'all to try try out these kind of newer things and support is actually very good like 80% left so quite safe quite safe so I'm just going to end off in the science like art science like of wow I thought it was quite nice so just to a reminder that directions are not by default horizontal top to bottom they can go like all over the place and with that I'm done I hope you have good okay so yeah so as you can see I put in some effort because I made slides I didn't stand up here and any howly point point point click click click on articles so I would like to welcome our our next speaker Mr Lim Se Hao