 Okay. Excuse me while I put this thing in my back pocket. Okay. All right. So, hi people. Welcome. And I'm going to start off today on my talk with the title you can see here. But what I'm really going to talk about is what do we do as front-end web engineers? So before we start, let's take a quick poll here. Like how many people here consider themselves programmers or engineers? Anybody? Okay. So you've done some programming. Maybe you've worked in a technical role. How many of you consider yourselves web engineers or web developers? Okay. A few. Yeah. So today's talk is actually more for people who are not already front-end web engineers. Maybe you are a back-end web engineer or full stack. But today's talk is really just focusing on what it is that front-end web engineers do, what it's like, some of the really gnarly things that we deal with, but also some of the really cool things that we do. So if you're not a front-end web engineer, this talk is for you. If you are, it will not be offended if you had to take a toilet break. So we're going to start. My name is Sherman. I'm actually a Malaysian. Yeah. Don't be fooled by this. A lot of people think I'm Singaporean, but I'm not. I'm currently a front-end web engineer at Vicky, which is where we are hosting this event right now. What I do is front-end web engineering things. What exactly is a front-end web engineer? What do we do? It's such a mouthful front-end web engineer. Some other terms that you might have heard that sound similar are web developer, web designer, back-end web engineer, full-stack web engineer, UI engineer, UI UX developer, so on and so forth. But for the purposes of this talk, I'm going to be using the terms engineer and developer interchangeably. And you just have to know that all these terms are really referred to different specializations in a larger subset that I just call front-end web. So yeah, it can be kind of confusing at times because people use different terms, but generally there are some differences. But generally, we refer to the same thing. So to define what a front-end web engineer is, we talk about what a web engineer is. And a web engineer is someone who builds, designs, maintain things for the web. And the web in this case refers to the worldwide web, which a lot of us are familiar with in terms of websites. Like, you know, who has visited a website today in the past five minutes? Facebook? Yeah, I know. But the tricky part comes in talking about, you know, what is front-end referred to? And in order to talk about what front-end is, we need to talk about how the web works. So is that like a back-end? Is that like a middle-end? We don't know. So think about a website. Like, when you visit a website, you pull out a browser. Let's say Chrome, Edge, Firefox. And then you type in the URL. So in this case, if I want to visit Vicky, which I do every day because this is what I work on, I go to like, you know, www.vicky.com. I hit enter. A website appears magically from somewhere. We don't know where. And so what really happens is that there's you, here's you and your browser, which is in your machine. And then there's a server. So when you enter like, you know, www.vicky.com in your browser, your machine or your browser is responsible for looking up the Vicky server and sends a request to the server, say, hey, I need this Vicky website thing. What do I need to like display this website? And so the server will be like, okay, hey, cool, I got you. And the server runs some code and to get the assets that you need in order to display this website. So the server's like, hey, all right, here's all the stuff that you need. And it sends a response back to you or really your browser. And the response may include things like, you know, HTML, CSS, JavaScript, like, have people heard of these terms before? Kind of, I see not. Yeah, which is like, yeah, that's like her life, you know. And so what happens is that the browser takes this response, this HTML, CSS, JavaScript and uses that to create or render your website. So the important thing to note is that it's not that the server, you know, builds this website for you, you know, colors and fonts and everything and sends it to your browser. The, what we really have here is like, all this HTML, CSS, JavaScript code, which is like, you can think of it as a bunch of rules on how to display your website. And that bunch of rules get sent to your browser and your browser runs it to show you the website that you see. So we've done it. It's kind of interesting because I like to think of Frontend Web as bridging the gap between users and content. I actually created this to like Jason for this here. And what it really means is that usually when you visit a website, you are there for a reason, you're there for content, you're there to check your email, there to like watch cat videos. And what Frontend does is that we are really talking about all the stuff that happens here on this site, like whatever is related to the user, the browser and what the browser needs to display your website. So it's really creating, like for example a website that makes it easy for users to access their content. So that's just a way that I like to think about Frontend Web. And because we are dealing with users, we also need to understand how design works. There's a very human interaction element to it. And it may include things like, what makes it easy for a user to read this article? What makes it easy for users to find episodes? So we have to keep that design mindset there. But at the same time, we also have to work with technology because we are dealing with browsers and browsers can be difficult, which I will talk about later. And this combination to me is something that's pretty special to Frontend Web. And you don't get it necessarily in other fields of software engineering or as much. I believe mobile is also like, it has a similar marriage of design and technology. So I think it's something that's really special to Frontend Web. All right, so I'm gonna be talking about the two parts. So I'll talk about what goes on in the design side, how do features get created from the designer to the actual product to the actual website itself. And I'll also talk about the technology that we deal with. Like for example, browsers, like why are browsers so difficult? Why do, if you have friends who are Frontend Web engineers, like why do they complain so much about IE8? You know, things like that. Or yeah, or like, so yeah, I'm gonna start off with design. So in the Frontend Web world, what typically happens a lot is that we are required to build features. So let's say we want to revamp sign it, sign it, sign up page. And what happens is that we usually work with designers and designers will come up with a mock of how they want the design or the feature to look like. And from that, it's our responsibility to take that flat image, which is usually created in Sketch, Photoshop, Illustrator, and convert that to code that achieves the same effect. So like, you know, one of the examples that I worked on recently was to rehaul our login page. So this is actually like the design mock. It's like a flat image itself that the designer sent to us. And from that, we actually created so that it displays in your browser. And you can see like there's some differences, like it's not exactly the same. And you know, design is an ongoing, growing process. So things change along the way. So I'm gonna run through like a really simple example of like how, you know, that process happens. And in order to talk about how that happens from an image to code, we need to talk about the building blocks of websites. So there are three parts, like most of us hear the terms like HTML, CSS, and JavaScript together with the whole like web development thing. And what you need to understand is that the first part is HTML, which is a markup language that we use to structure our content. So for example, like the content article, the titles, images, all of that is created in HTML. And then you have CSS, which you can think of as like the styling rules, like how is your content presented, the colors, your font sizes, how big is this image gonna be, all that is controlled with CSS. And then there's JavaScript, which in the simplest form is used to add behavior or interactions to your website. So it interacts with both HTML and CSS to create interactions. So if you have ever like, you know, press a button and something happens, that's probably JavaScript. So in the case of a sign up form, like this here is just an image, like how do we get from this to this something that we can actually use and like interact with. And so yeah, let's just, I'm just gonna show like, you know, the different parts and how they kind of relate to each other. So this here is the sign up form with interactions. And I'm just gonna comment this out so you can see what parts are, what parts come from where. Most of the time when I talk about HTML, CSS, JavaScript, it's like, what's the difference? What do they do? And we always start with HTML. And this is, I think, the most underrated part of web development because good HTML is really important. And what HTML does is that we, this enables us to add things like your forms or like your input fields, labels, titles, things like that in a very semantic kind of way. So I can look at HTML, I know like, oh yeah, there's a form here. And then there's like, you know, a field set with a label and an input that takes in text, for example. And at this point, it works, like you have all this here, but it doesn't look very good. So that's when we add on CSS. So something that we might do is we might change your background color or whoops, we might change your background color or we might change the layout, like maybe center it. Or if it still doesn't look good enough, then maybe we add your styles to the form and make it like prettier, pretty much. And CSS is a lot of fun because there's a lot of creativity involved in doing things. So it works now, but then we also need to think about, you know, how the user interacts with the form. So let's say you're a user signing up and you need to add the username and you have a restriction on how long the username must be at least. We need to be able to tell the user, hey, your username is too short. So when it comes to things like that, like we add, we use the magic of JavaScript in order to tell a user, like, hey, if my username is too short, please enter a longer username. And this is to, in my opinion, like the more interesting part of working with the front-end web because it's not so simple as like, oh, making things look good, but it also needs to make sense. It needs to be useful to a user. And as a front-end web engineer, like a lot of the time, the responsibility to make sure that things interact properly falls on you. So yeah, it can be challenging at times, but it's also quite interesting. So we saw how we use HTML as structure content, how you can use CSS to style content, and then JavaScript to add interactions. Yeah, so that's like for the design process of how things get made. I don't know, are people familiar with this? Like if you've worked with designers before, yeah. And then there's the technology side. So it's not good enough to be able to build something that looks good and does what you're expected to do. You also need to make sure it works nicely with your technology. So the web is a very egalitarian ecosystem. As long as you have a device and your device is a browser, you can access the web, which is pretty freaking amazing. But at the same time, different devices have different browsers. Like, you know, who uses Chrome? Like, oh, yeah, yeah. You are my favorite users because I also use Chrome, so I build things for Chrome. But then you also have people who use Edge, and who uses Edge? Yeah, all two of you. And Safari and so on. So because there's so many different types of browsers, remember how I talked about you only send HTML, CSS, JavaScript, which is code to your browser, and your browser is responsible for taking that code and creating a website for you. And the thing is like different browsers are created by different people. You know, like Edge is created by Microsoft, Chrome is, like Google Chrome is created by people at Google. And because of that, they behave differently. So what you may happen? What may happen is that, okay, well, I make something and I testing Chrome, it looks pretty cool. And then two days later, after we launched, someone like writes in and say, hey, things are broken on Safari. And I'm like, what? And you can see here the sidebar that we had, that we could see in Chrome is missing because it is for some reason, and Safari is not respecting the height of that sidebar and it's pushing everything off like that. So I'm like, ah, but we fixed it, it's fine now. And with modern browsers, it's all right. Like usually it's not a crazy fix. But then sometimes you get like IE8. And we don't support IE8, but I just wanted to show you this to you because I'm like, oh, I don't want to fix this. And it's okay if you don't support it, but I have been in situations where I had to like support IE8 for like bank applications and that was not fun. But yeah, unfortunately things are moving along pretty quickly now. So browsers do get up to speed on standards a lot faster than they did before. So thankfully for that, but this is just one of the things that we had to keep in mind every time when we were building things. Because we want to make sure everybody can use this in a reasonable way. And in addition to different browsers, we also had to deal with like different screen sizes. So laptops and mobile phones have very different screen sizes. One is like this and one is like this. And so sometimes you have things like this where you have a table, which looks great in desktop, table, table, table. Okay, there are your table. But then you also to think about like, what if someone on a tablet uses it, like does that still look okay? Still looks okay. But what happens when someone on a mobile phone looks at this? And if you maintain a table layout, it's gonna get really, really squished and it wouldn't look really good. So instead, you had to exercise a little bit of creativity and push things down so that it works nicely for a mobile screen. So instead of having the three columns, we like push that data under each like row here. So you get to work with things like that, which can be, it's like a bit of a brain teaser. Like how do I maintain this information but like also get it to work in a mobile form? And of course we work with designers on this as well. So it's lots of fun. And then there's JavaScript, like who here has tried JavaScript? Yeah, so I see a handful of people. And JavaScript is interesting because like on the web or front-end web, you don't really have a choice. You have to use JavaScript because that's the only thing that your browser supports. And that's okay, but it really doesn't help that JavaScript is actually kind of weird as a language. And it's weird for historical reasons, like when JavaScript was first created, it was created in 10 days before I shipped it in Netscape. So it's got a lot of historical baggage. But just to like show you like, why is this like, why is JavaScript weird? So let's say I have Ruby. Ruby is a pretty reasonable language. In Ruby, I have like, you know, for example, Division, Division works great. But then what do you think happens when I divide by zero? Error. Yeah, an error is reasonable, right? You'd be like, you try to divide by zero, that's not legit. Too bad. If you try to divide by strings, it's like, oh, you can't divide by string because the string can't be a number. I don't know if you all can see this. Oh my God, no, you can't. Yeah. Okay, anyway, just know that's just an error there. I'm just gonna like bump this up. Okay, no, that did not work. So okay, Ruby's reasonable. It's good to know like, something went wrong. But then let's say you end up with JavaScript and then you have, let's say, you know, let's say your regular division works fine, great. So far so good. But what do you think happens when you divide by zero? Undefined maybe? Some, no, yeah. So 42 divided by zero in JavaScript is infinity. And I'm like, I'm like, why? Why? And there's actually like a reason behind this is because like the way that JavaScript decides to deal with floating point numbers kind of makes it seem as though, okay, well, you're kind of tending towards infinity when you divide by zero, but I don't fully understand that either. And then what happens when you divide, like when you do negative 42 divided by zero, what are you gonna get? And I was like, really amused because it's actually negative infinity. And I'm like, well, what happens when you do infinity minus infinity? Like, you know, are you gonna get zero or something? Like, how does that work? Like, no, it's not a number. And JavaScript is kind of funny because like not a number actually just means that, oh, you try to do an invalid mathematical operation, you are a bad person, so I'm not gonna give you a number. So here's not a number. So you get those like weird quirkiness, but at the same time, like JavaScript is a bit of a misunderstood language. If you take time to like figure out like the quirks and why it's like that, it's actually a really powerful language because everything, literally everything that you see on a web is powered by JavaScript. Like this presentation is actually, you know, a website. It's built of the web. JavaScript is powering it. Like this Rappel here, this console that's powered by JavaScript. So any games you see, any 3D like crazy stuff that you see, all that is powered with JavaScript. So it's a really powerful language, very versatile, does a lot of things, but often misunderstood. So yeah, and then like my favorite thing to do is like, you know, what is, what is, so you have type, so type off, yeah, in JavaScript and it tells you the type of a thing. And then if you do like type of not a number, guess what type of not a number is? It's a number. But it makes sense because you are used, not a number is returned in place of a number. So it's a numerical value, but it's like, it's an invalid numerical value. So yeah, JavaScript. But it's a great language if you get used to it. So for those of you who are, you know, considering like, you know, what would you want to do front and web? There are a lot of reasons like why I love it, like why I chose to do specifically front and web. And the biggest part is because, you know, you have this like creative thing combined with like a technical thing. And because of that, you get to do a lot of crazy stuff. Like just, there are just so many possibilities. And you know, my favorite example of like, you know, a thing that you can do with JavaScript is this, and it's called staggering beauty. And this is all it does. And if you shake vigorously, like crazy things happen, but I'm not gonna show it because like it has flashing lights. I'm not sure like, and it's kind of loud. But yeah, if you want to look it up, you can look it up. But why would you do this? And it's because you can. And it's actually not trivial to be able to like, create this kind of behavior. So, yeah. And in my free time, I like to create like what I call screensaver art. And this is all in JavaScript, it's running in the browser. So you can do this within the web. And you can share it with anybody because you know, it's accessible. And then there's, and then there are people who really push the boundaries of CSS. Like these are like single diff art. And it's literally like one HTML element. So everything that you see like all of this is created with CSS. And it's pretty freaking amazing. Like it's just pure CSS, just literally one diff and like some pseudo elements. And all this here, like all is created with CSS. But I can't even do this in Illustrator. So, yeah, it's pretty amazing. You should check it out. It's called a Single Diff. And then, yeah, and like I said, the web's for everyone. Anybody can publish through it. You don't have to have a device. You don't have to pay money. You don't have to be like an Android user to be able to use it. Anyone can use it. And that's, I don't know. I think it's pretty cool. And also it has a very low barrier to entry. So if you've never done web before, a good place to start is HTML CSS because it doesn't require you to know too much syntax. But at the same time, you very quickly get results. But at the same time, there's also a lot of room to grow. Like from HTML or CSS, you can always add on JavaScript and do crazy things with it. So there's just a whole realm of possibilities there. And my favorite quote about front-end web is this, which is from CSS Tricks, Geoff Graham. And he says, the practice of front-end web development is similar to playing the bass. It's easy to learn, but difficult to master, which is kind of satisfying. There's a lot to learn. But at the same time, anyone can get started a little bit. So yeah, with that, come to the end. You can find me on Twitter here. And then there's links to the slides at the bottom. If you haven't seen that, if you want to look at pretty weird things like staggering beauty. And yeah, thanks all for listening. I'm going to hand it off to the next presenter. Who's next? OK.