Display Content

[00:00:00]
>> Let's start with goal 1. Display content. So I don't know if any of you have been an ever watched charge at the or any of these sort of talks the people do diagramming through their code running. The output of saving or running code in JavaScript already most programming languages is actually is saving data in a computer, under the hood you can't see it.

[00:00:23]
When you do let lights equal seven, and determined for to get to seven likes. When you save likes as seven, we draw it when we whiteboard, if we ever do that. We draw it on the blackboard visually, but it ain't visual. It's output is very much definitely not visual.

[00:00:44]
It's output inside the computer. You know what? With user interface engineering, the output is visual. It's pixels on a screen. And pixels on the screen, there's a lot of them. In that little window there with what's on your mind, maybe there's like, I don't know. Yeah, I should have looked that up before.

[00:01:03]
I mean 2,000,000 pixels to like 8 million pixels, every single one of those is a little dot that we need to code for. If the output of writing JavaScript is saving data, that's actually literally in the computer saving, switching zeros and ones, transistors on and off in the computer.

[00:01:21]
But there's no visual output for that. Even though we draw it, so there is. There's no visual output for that. Whereas with user interface, it's visual output. It's actually pixels on a screen. So my goodness, we've got to actually write content to define exactly where those pixels are.

[00:01:40]
So we've got two days to do just this screen here. So let's get started pixel by pixel. This is not a joke. [LAUGH]. Maybe it's a joke. We're gonna have to start with just the top right hand corner, because we've got a lot of pixels to write here people.

[00:01:57]
So we'll start with just this first one here. We're gonna write some code to display that first pixel here. This is not a joke maybe it is. It is about 100 pixels across you know from the edge of the page roughly and maybe it's like 900 pixels up.

[00:02:18]
So maybe my code will be something like I guess I can right pixel hopefully I can do that. And then I can write 100. Let's say x sort of across. It's like x coordinates. And then 900. Maybe x 100 I don't know we can make this up as we go, right?

[00:02:36]
Maybe y 900. Actually, to be fair, I could even do this like that. I can have my code live wherever I want. I'm the syntax designer of this and I'd made it like that.
>> [LAUGH]
>> Happy with that.
>> [LAUGH]
>> Look at that beautiful. And that's my first pixel, done.

[00:02:51]
Okay, settle in people because we've got a lot of pixels to draw. Who would like to draw their next one? I think we'll have Justice. Justice take a guess, just intuit for me, what might my next line of code be, to draw my next Pixel in this W that's gonna make up what's on your mind on this page that we've gotta somehow display this content.

[00:03:17]
Someone's gonna do it Justice?
>> Probably a pixel that's maybe 101 pixels.
>> Brilliant. Yes exactly 101. I don't know why my syntax is like this. And then maybe 900 and no, 800 and. What do you think? [INAUDIBLE]
>> By the way, I hope this becomes a montage in the recorded version.

[00:03:38]
[LAUGH]. So that no one has to actually sit through this. John, you're back up. John, what might be our next pixel?
>> Pixel?
>> I'm gonna write it because I want us all to suffer here.
>> [LAUGH] Yeah, x is 102.
>> Yes.
>> And y is 898.

[00:03:56]
>> Beautiful, and look at my weird syntax I invented for this. It was very strange, okay. Beautiful, next one, A toy, it's gonna be a montage. [LAUGH]. Okay, all right. Obviously we are not gonna keep going, there must be a better way. In programming with data, with JavaScript or any other program language Python whatever, where our output is saved data.

[00:04:17]
In this case, our output is pixels on the display, on the screen. In most programming I was able to save data right and then we can change that data so the output then is the data changed. I know it sounds funny to think but that's the core feature of a programming language is changing state in the computer.

[00:04:31]
Changing data by adding numbers to it taking numbers away adding elements removed yeah. Whereas that, we have shorthands. We do not have to allocate the exact position in memory, its exact address in whatever sort of ones and zeros in the computer's hardware. We do not have to write the code to allocate that, someone else has done that for us.

[00:04:53]
There are keywords like let that say please now go and find the next position in memory that we can use you do the work of that, and then save the value that we're assigning here in that position. And don't even worry about dealing with addresses. This label is English language label, whatever we call it likes is going to refer to that position from now on because, you use the keyword let right before.

[00:05:15]
Okay, that's wonderful. Whatever goes even high level, you have functions like sum that take, and listen numbers one, two and three and call them function sum. And now we are able to add those numbers together. But by the way, let's think about that which great languages have all the languages have functional sum, right?

[00:05:35]
Any modern language would have a built in function, sum. Any, all of them, especially JavaScript, unfortunately not. But most do. We have much more useful Reduce.
>> [LAUGH]
>> Which we all love, and can do some for us in a way that's almost unreadable. All right, good. So we must hopefully have something similar here.

[00:06:01]
Well, people have designed these program actually won't invent it. Well, they literally met they were derived from the sky they were invented and designed. So given that what would be if I if my output of this is this text? What's on your mind? If that's my output what will be the most intuitive and look programming languages is one intuition they will flexibility but they want intuition.

[00:06:26]
What be the most intuitive way I could write code? It please cannot be this. This was untenable thing my favorite word to use in talks untenable. What would be a much more tenable? I know that's a phrase that may not even be real word. What would be a much more tenable, way of producing the output of what's on your mind that text on the page.

[00:06:52]
I'm going to pull what would be the most intuitive way of having the text what's on your mind? What would be my Code say I have my code here that's going to produce the text what's on your mind?
>> Knowing HTML I would either use a paragraph or label.

[00:07:10]
>> All this is too much information already. Or we might absolutely what do I add to it most minimal?
>> If I want you to show what's on your mind, I might write the text what's on your mind?
>> Yes, spot on, it's almost too obvious. Paul showing us some real sophistication there.

[00:07:23]
But what's on your mind might become exactly what's on your mind in my page. If I tried to be really intuitive and you know what? That'd be amazing. Would it be had that Charles maybe it's gonna happen who knows there's on line one. Line two, if I wanted to display what side an input field into which I can type text, what am I right or input.

[00:07:53]
And unfortunately that's going to, and this is maybe where our friend Paul was suggesting having some sort of let the computer know whether it's going to be text or something else. Maybe here, we don't want it to write input, we want it to show an input. So we can put some square brackets around it, We use those quite a lot.

[00:08:10]
Let's put something else around it.
>> [LAUGH]
>> Let's put some triangle brackets. I know we don't use them very much. That's nice. And that could display us a box on the screen beautiful.. And then All right we're getting it okay. Maybe everyone there we go do button and that would produce a button and then if you just wrote the text, Publish right next to it, maybe that shows up in the screen.

[00:08:43]
I don't know this language would be too intuitive though. There's no way that we're hiring people in the six figures developing user interfaces using a language this intuitive. And to be fair, I'm a bit suspicious about it anyway. I'm a bit suspicious about it anyway because, it's not clear to me how I'd know.

[00:09:03]
So in theory, writing what's on your mind and then having that displayed some, other tool, some other engine's gonna have to have been running to convert this into elements on the screen. And to be fair animate on the screen, there's a lot of questions. I can change my window size in a web browser, and all of these are gonna change their position and their pixels on the screen.

[00:09:27]
I'm gonna have to work all that out unless there's some way in which I can have a very simple. What will be my most simple way of describing what's on this screen? I could have even done it here I could list down the page and create element by element, a list maybe in describing what's gonna be on the screen.

[00:09:53]
I can have some sort of list, that takes each of these elements. And all I have to do is add to that list and figure out nothing else. Have no other thoughts about what pixels are gonna be on the screen, how to think about the layout. And instead, all I have to do is go through a list of elements that I wanna have on the screen, an ordered list, by the order they are on the page, they get added to this list.

[00:10:21]
Just like a JavaScript list, and then rely on some sort of, I don't know, layout and render engine that can convert that list of elements into actual, Pixels on the screen itself. But this is far too appealing. Is it far too intuitive? There's no way this language exists, and we're still charging for even this content.

[00:10:52]
There's no way I should imagine a job that is very unhelpful. But It does. What is this language called, Paul?
>> HTML.
>> This is called HTML. People, do not underestimate it. We don't even teach it at Codesmith. That's how intuitive it is. This is something where we can list down the page in order and the elements will show up in that respective order on the web page.

[00:11:21]
Our HTML file, literally all we have to do, maybe one of the first things we did on a computer each of us, is save like, I don't know, app, write in a text file. And then input dot HTML, and then load it into the web browser arousing off screen load it into the web browser.

[00:11:38]
And that text will be read past is a term they use PARSE passed and turned into line by line elements on a list. A simplified list that a simple list of elements now totally is implemented as an object. But this list here of elements will then be automatically converted onto the screen.

[00:12:04]
And all we have to do is write text this list. What language is this list going to be stored in? Well, the one that the web browser is mostly built in, which is C++, but we don't have to interface with it. We don't have to work on it directly.

[00:12:19]
We instead get to list out and have each of these automatically added to this list. That is a simplified version of this page. So here's our page, Here's our list. And it's a simplified version so that we don't have to worry about the individual pixels, cuz there are thousands of different device types.

[00:12:42]
There are tablets, phones, laptops. There are thousands different sizes our window of screen can be. If we don't think about any of it, all we do is list out our individual elements and rely on some sort of engine. We'll learn more about it that lays out and figure out the exact pixels that get displayed on this page.

[00:13:01]
And that's it. We add each of our elements. So into this list here, we'd have the string what's on your mind? We literally get to in from our HTML affect this list in C++, that determines what gets displayed on the page. We add our input. And each of these will then be turned into the specific elements, that describe that particular work for that particular device.

[00:13:30]
That's it. People, this is called HTML, this C++ list, and this page. I guess this list here, we need to give it a name. I am presuming it's name is the list of elements on the page. L E P. I literally come up with different invented names every time.

[00:13:55]
No, it's not actually a list, it's technically an object. So maybe an object just gives it a bit more flexibility, allows it to have a bit more specific structure. So it's technically an object, so maybe it's an object. And it's a representation of the page and your representation of something.

[00:14:13]
If you've built your sort of LEGO model, it's all I know, is a representation of a real thing. So the LEGO model of Riverdale I actually don't know about that. I like that when I saw that in the store, the Lego representation Of, what do I like, the, there's a new gaming truck from Lego Friends, I think.

[00:14:35]
I haven't even used, I haven't seen it, but you can play a game. You can be a gamer in it. So, Lego presented a gaming truck. Yeah. Is not the real gaming truck. It's a simplified with bricks version of it. Well, this is a simplified with elements in an object, version of the page that all we have to do is add to that list, almost push almost a pen to that list.

[00:14:58]
So this is known as a model. Not a representation, but a model of the real thing. A Lego model, models the real gaming truck. So this is a model technically here. So a model in object form. So object model, of the page. Up well, this is an app.

[00:15:18]
So is it really an object model of the page or not the model the app? So I think maybe Omar no okay. All right. So this a user calls a document because it was literally like a list of links and text, so it was like a document. So, O M D, okay fine.

[00:15:36]
DOM. A list in JavaScript, a model of the document, the page, stored in an object format in C++. That enables us to not have to interact directly with pixels and work out. That code at the top there was absolutely untenable. Instead, we get to write almost functions. Think of these as functions being called.

[00:16:04]
This input says, please go and create on this list of elements A single element of type input. And then we have to think nothing more about it determining the exact content displayed on the page is then handled by the render engine.