Learning IoT & coding with HTML5 games
Szmozsánszky, István
Learning to code might be the handiest skill of the XXI. century - but findingmotivation to do so seems to be the hardest part. Even when one decides toembark on this journey, their path is often hindered by the lack or quality oftools, resources they will be using, and are often turned away by the lack ofsuccess and their feeling of "coding is not for me" is often reinforced by allthese negative experiences. This is where Happy Code Friends, Code Invadersand Clouduboy tries to help - introduce coding, hardware and IoT in afriendly, impulse-rich, exciting environment to anyone willing to givecomputers a try. Happy Code Friends is a "free one-day coding bootcamp" type of initiative tointroduce anyone to web technologies and coding in general, with the intentionto give them a taste of the bright side of computer programming, and startthem on a way of learning coding self-sufficiently. Code Invaders is a freeonline webpage/tutorial teaching basic JavaScript programming concepts bybuilding an online game. Clouduboy is a free web-based tool for creating HTML5games with JavaScript and running/playing them on tiny microcontrollers.
 Our next speaker is Yzvan Smurzanski. It took me like three years to be able to say his name. And you'll figure that everybody prefers to call him Flaki, no wonder. He's one of the most ex-speakers, and he travels around the world with this little puppy called Bella, which has its own Twitter account. And one of the challenges that he takes on is to travel in most of the only remote places and try to work from there. Like, I don't know, maybe a hearing room catch him soon. So I invite you all to listen to Yzvan Akaflaki. OK. Yes, welcome. And let me just switch to some slides. I took this photo just the other night Yzvan is walking around. How many of you know this figure? I don't know if it has any Brussels bound connotations. Please tell me about that on Twitter or something. But who knows the origin of this thing? Where are you from? Anybody? Just shout it out. Space invaders, right, exactly. So we're going to be doing some space invading. I'm going to be invading your spaces, but not your personal spaces because we have a code of conduct. What other spaces can I invade? JavaScript. Who knows about JavaScript here? Who doesn't know about JavaScript here? You're going to be born out of your buttocks. Oh, it's free. You might as well leave. I can't even show you anything else. Who knows about C here? Colonel C Eckers? Sorry about that. I'm going to be invading your world. You're going to be pissed off. Please tweet at me or talk to me. But try to see the big picture. So what I'm going to be talking about after this five minute intro is a JavaScript or microcontrollers. Not really, but creating JavaScript games at HTML5 in browser and putting them onto small microcontrollers. And why would I do that? Well, why would you want to do that? There is a little story about the whole thing. Before I start demoing stuff, there is a little story that we did a, oh, yeah. Sorry. That is a thing I forgot to tell. But I think Yorna described it very well. So in JavaScript to improve, I'm a frontend trainer. I'm a Meso-tech speaker. And I do travel with Baylor all around the world. But I also give a lot of talks. I don't sleep. But one of these is just a rumor. So I'm a testable project member. I've been doing JavaScript and hardware for three years now. So the whole story starts with a thing called Happy Code Friends. Happy Code Friends was when we decided tech needs more diversity. People need more. We need more people who can code. But you can tell someone that they need to code. You will have to spark something in there. They have to want to be coding. So how about introducing people to app development, mainly HTML5, CSS basics, and some bit of JavaScript? There is a whole lot of introductory content to HTML and CSS. There's a lot of tools out there. What we don't really find out there is a lot of really good JavaScript tools. There is no, you can find different things that could bring you into coding. But they're not really a lot of these out there. So what I came up with is anybody likes games. And I know somebody is going to raise their hand. I don't like games. But most people at least do. So how about telling people that games, all this cool stuff that you see or played, or made by people as well, like it made me just created by someone who knew how to code. And most of the games you see, you would never imagine that you could be, even if you are a developer, you would never imagine that you could create a proper game of your skills. But actually, games are pretty easy to create. And I don't have the time to show you how can you create a game in like 15 minutes or so with a bit of JavaScript knowledge. I will then let you what you can do with it if you embrace the thought that that can actually be done. So the whole thing turned out to be a thing I called invaders. Coding invaders is basically introducing people to programming concepts, like functions, iteration, variables, like the basic concepts of programming, while at the same time they are actually creating their own game. We did a few experiments with this. And there is very good feedback. This is still a working progress thing. But at some point, it collided with my other huge love, which is IoT and microcontrollers. And the problem with microcontrollers is they are very, very, very limited in resources. So you cannot put for more, most intense and purposes, you cannot put JavaScript running on a microcontroller. There are whole new stuff coming up, like JavaScript as per you know, then we'll let you run JavaScript to a microcontroller hardware. I'm just saying that because I usually get questions like, how about this thing or that thing? There are things that run JavaScript to a microcontroller. Even the Tesla project itself is proud to run JavaScript to a microcontroller, accept the very first Tesla, or program the microcontroller in JavaScript. And it was not compatible. It was actually transpiling your code to Lua and running it on the actual device in Lua. So what you want to do though is you still want to create stuff in JavaScript because it's easy. Like you don't have to care about a lot of those stuff, your memory management, or the low level, just trying to concatenate the string and see, make you lose a lot of hair. And I don't have a lot to lose anymore. So I decided that people, I don't want people to lose their hair. So how about creating your game in JavaScript and somehow compiling it to see in a way that it could be done run on a microcontroller that is an ordinary across microcontroller that has 16 megabytes of a processor and maybe like two kilobytes of memory or maybe 30 kilobytes of programming space. The microcontroller I'm talking about, let me show you just in a moment. If I can find a camera, there's this one. If any one of you knows this, it's called the Arduino Micro. This is an AVR chip. It's basically 16 megahertz. It has two kilobytes of memory. That's like 2,000 bytes of memory. And you can put a program that's like 30 kilobytes on it. Usually what you do is you open your Arduino IDE and you write C code for this stuff. So what I'm not going to do today is open my Arduino IDE and write C code in there. Because we have this project and I want to show you what it can do. The very interesting thing about this is just start out with a basic program. I have a surprise banner here. I'm going to see if I can show it. Let's close this. Yeah, it's not super visible, is it? Yeah. Let me just try. That's a bit better, right? Can you invert the color? Not at this point. In mid-talk. I should have talked about that earlier. Yeah. It's not super important, the code currently is. It's basically just a basic JavaScript code. Some of you, we know ES6 will realize that. Some of you in the first two rows we can actually see it. So what I'm going to show you is basically see a JavaScript code. You can see it's exactly 67 lines of code. We have a small library that has some built-in stuff that makes this easier. Magic happens when I push this button. So what you will see, you will see a small bat just flying around the thing and just flapping the wings. What you will see is basic games programming basics. You want to sprite on screen. This is the bat. You animate the sprite on screen by switching between two states. You just float it around on the screen. And then 60 times in a second, you just clear the screen and redraw it in a different place, which creates the effect of motion. We have some background text as well, but this is not interesting. What gets interesting is when you actually start creating actual games. And I have here a small banner of the code invaders game, which might be more familiar to you. So exactly, again, this is just JavaScript code. You will see how far this is just JavaScript code. So you can do a few more sprites, just move them around on the screen. But you can also make it interactive so I can control it. And sometimes you can even fire projectiles. But today is not that day. So here's the thing. You'll see how it looks like. OK, but how do you code this? And what does this have to do with people who never seen any code in your lives? So then we started doing building our materials, which will be open source, hopefully, which will be online so everybody could try themselves as well. So when we started building this material, these kind of things are really good way to introduce people to basic programming concepts. So if I'm running through the creation of this code, which is also, like I said, this is a bit more than 140 lines of code, with a lot of empty spaces and comments. When you run people through this, hey, here you have a variable, and then you introduce what a variable is. There are people there. If you want to store at which position currently the monsters are, or the turretes, you want to store it. You want to store it somewhere. So you introduce variables. And then you go on and introduce basic control flow. You introduce loops or conditions. And slowly, people, while having fun and creating the game games, start to embrace all the basic concepts that they will be using later. Where the magic happens is actually, where the magic happens actually, is this tiny device. If any of you know what Kickstarter is, all right, a lot of you. So this device is crowdfunded, maybe like 1.5 to 2 years ago. And it's called the Aldeboy. So what the Aldeboy is and does, and you will see in a moment, just let me sweat this. That's quick. So what the Aldeboy is and does is basically the exact same thing that you see in right here, side by side. It's basically just a more nicely looking version of the contraption you see on the right hand side. The right hand side is basically an Aldeboy in a micro hooked up to a screen, hooked up to some micro controllers, to some buttons, and the buzzer. The Aldeboy is basically this exact thing in a much smaller and nicer package. So the idea was, you can get this thing or do it yourself, and people are going to make open source games for it. Except the problem was, the only way you could create games for it is in C, with the Aldeboy and the IDE, which now is very welcoming for starting up contributors. And there are a few folks who made really good games, or really cool games, constrained by the memory space that they were given. But it wasn't really taken off in any big ways. And most of the ecosystem is still growing. There are a lot of people having a lot of Aldeboys back at their homes, which is as you have your Raspberry Pi's and Aldeidos at home. You're all with it. You play with it with a few moments. And then it sits on your shelf, and all who are looking into it. And it's a very powerful device with its constraints, which is exactly what you here see is an ultimately translation of the JavaScript code that you just seen in the browser into C code and put it onto the device. So what happens in the background is basically when you use the Cloudable IDE, this JavaScript code, when you push a button, is being translated into C code. And the C code is then compiled into machine code. And let me just push the compilation that will create us a compiled version that I can really open. So what happens in the background is your JavaScript code is translated into C code. So it's not a whole lot of people combining JavaScript code straight to C, because then you start to experience a lot of edge cases. Like, Tesla's own JavaScript to new R transpire didn't really work out very well. Because of that, a new R is practically a whole lot similar to JavaScript, not what I like C. When you start experiences in edge cases, then there is a problem. We have heard Ross talk about edge cases. And we actually heard about doing a lot of interactions between JavaScript and C during runtime. What happens here is compile time interactions, your JavaScript code is turned into C code. There are a lot of constraints, of course, but for the sake of creating the basic game and following some basic rules and not using some, there was a mention to creating non-surprising output. So you're not trying to surprise the compiler. It will do just fine. Your JavaScript code will compile into C and will run and design it in vice as C code. So hopefully, yes. So the compiling has finished. So there is a HCI.org. We do it.ino showing up in here, which is just opened. And you're going to see that it compiled into actual C code if you are going to see. Sorry about the colors here. So you're going to see that it actually compiled into C code. It's not nice, but it's actually relatable. And even if there is something you cannot implement in the JavaScript code, and you are like a mad C code hacker, you can just do most of the stuff like with code. You can just do most of the stuff in JavaScript and just do the very nitpicky parts by actually writing or modifying the C code. What will happen now is let me try to get the camera on board. I'll actually show you this live. So when I hit the compile button, what you will see, or not see, that one. No. Let's try this again, shall we? Oh, because I'm trying to compile the C code version. Of course. Yeah, let's try this again. How much better? Except we were running into an error. Not good. It's a bit fragile as every demo. Now you see the device light up. The flash is a few bits. And you see, so we just got our application compiled into that. There's one more thing to that. So I'm going to zoom into this. Because I'm running out of time fast. I'm going to show you, OK, so yeah, whatever. You re-implemented an ID in JavaScript. Why is that important? Because the whole ID, the whole editor, is implemented in JavaScript itself. It's just a web page. There is a whole lot of things that you can do with just a web page, including how about? We have this tiny thing here. You might recognize this is one of the enemies. How about? I'm not a very good drawer. But this might remind you something that falls down. Close enough, right? So what I did now is I'm going to go into the code. I'm going to go in there. If you haven't seen this, this is basically binary data. Audience price or your image data is basically, hey, there's a pixel that is lit. There's a pixel that is not lit. When you are constrained on a tiny device, you have to make sure your images don't take up a lot of space. So you tag them into bytes. And just do a byte stream. It's not like you can have compression in there. Or most likely, you will not win much. So what these devices do is just put byte stream data onto the device itself. That they are going to be using to be drawing onto the screen. So what happened now, if I actually now open the preview which, remember, this is still JavaScript. This is running in your browser. Then I can see that we are close enough. We have a little fast-dem invader. And now I'm just going to recompile the whole thing and hope for the best. Yes, it's flashing. And, and, and, and, and, there you go. It is made of you. It's made of you, yeah. I am quickly running out of time. But I'm going to try to show you one more demo. Just to understand the implications of building something in the browser. What would that do? So as you might see or not, that is actually one of the most readable parts of the thing. This is running from a local server. So I actually hosted this off from my own mobile phone, which gives me the extra that I can actually access this computer's IP address for my phone. Which is basically, I can open this web page for my phone. So see what happens when I open this other invader in here. And let me just open you a camera view and show you my phone. No peeking at my notifications. Let me just reload this page. What you're going to see, this is your response of web page. And response of web pages have keyboards. But also, interesting stuff that they can access the network. How about a monster like that? Not that. Maybe that's more monster-ish. Let's say this. Oh, no, no, no. Yeah. And. I just re-wrote my image for my phone. Because you don't want to fit over your touch bar. If you have a touchscreen device, we have pockets. Like, not everybody has a touchscreen device. So why not just put it on your phone? And there is a lot of implications. So what happens here is basically, I'm connecting to the same web page from the same phone. And I'm pushing data between the two web pages, the live updating, in the same time. So out of time, what I still want to say is, oh, yeah, the best thing I haven't even showed you, but just for measurement. And I have this whole thing running in here as well. Just you. Oops. This is the other game. You will be showing a version of this a bit later. You know what that is? Yeah, so you can even drive this one yourself. It's a bit, there is a bit different version, a bit more of a five version. Because if you go to this URL, cld.bi slash Firefox, do we have this? No. You can actually play this with a very normal Wi-Fi access. I should put it in there. But if you have a computer, you will see this is a next-name game, except it has different images on it. I just made this, I just read some of these aspects in the last Mizzler Workweek in like, whatever, half an hour. So a little more of the whole thing that's called cloudaboy. Ask me around. I'm going to be here today and tomorrow in the Mizzler Workweek, if you're interested, or if you want to know about the details. Do we have questions? We have one question, so make it a good one. We have time for one question. Yes? I'll do a transparent C, a JavaScript code to C. Yes, so the question is, how do I transpire a JavaScript code to C with blood and sweat? Basically, by hand, you have a transpire. And it's tricky because JavaScript is not strict with types, so you have to infer types and stuff like that. A lot of things are working. A lot of things are not working. Objects are not currently working. I'm working on arrays. Arrays are almost working. And there's a lot of boilerplate code in there behind all this. There's one more idea. So the Arduboid was just one device. But there are a whole host of devices that you could use and transpire the games you just created, and just play them onto other devices as well, as well as desktops and mobiles and all those things. So these are retro games, not anything like the next Half Life, but it's a very interesting way to follow all this. So you can see the slides. The slides have links on the link about you can get this in touch at my Twitter account at SLsoftworks or find me at the Mizzle brief tomorrow. Thank you for your listening. Thank you, Frankie.
 Our next speaker is Yzvan Smurzanski.  It took me like three years to be able to say his name.  And you'll figure that everybody  prefers to call him Flaki, no wonder.  He's one of the most ex-speakers,  and he travels around the world with this little puppy  called Bella, which has its own Twitter account.  And one of the challenges that he takes on  is to travel in most of the only remote places  and try to work from there.  Like, I don't know, maybe a hearing room catch him soon.  So I invite you all to listen to Yzvan Akaflaki.  OK.  Yes, welcome.  And let me just switch to some slides.  I took this photo just the other night  Yzvan is walking around.  How many of you know this figure?  I don't know if it has any Brussels bound connotations.  Please tell me about that on Twitter or something.  But who knows the origin of this thing?  Where are you from?  Anybody?  Just shout it out.  Space invaders, right, exactly.  So we're going to be doing some space invading.  I'm going to be invading your spaces,  but not your personal spaces because we have a code of conduct.  What other spaces can I invade?  JavaScript.  Who knows about JavaScript here?  Who doesn't know about JavaScript here?  You're going to be born out of your buttocks.  Oh, it's free.  You might as well leave.  I can't even show you anything else.  Who knows about C here?  Colonel C Eckers?  Sorry about that.  I'm going to be invading your world.  You're going to be pissed off.  Please tweet at me or talk to me.  But try to see the big picture.  So what I'm going to be talking about after this five minute  intro is a JavaScript or microcontrollers.  Not really, but creating JavaScript games at HTML5  in browser and putting them onto small microcontrollers.  And why would I do that?  Well, why would you want to do that?  There is a little story about the whole thing.  Before I start demoing stuff, there is a little story  that we did a, oh, yeah.  Sorry.  That is a thing I forgot to tell.  But I think Yorna described it very well.  So in JavaScript to improve, I'm a frontend trainer.  I'm a Meso-tech speaker.  And I do travel with Baylor all around the world.  But I also give a lot of talks.  I don't sleep.  But one of these is just a rumor.  So I'm a testable project member.  I've been doing JavaScript and hardware for three years now.  So the whole story starts with a thing called Happy Code  Friends.  Happy Code Friends was when we decided  tech needs more diversity.  People need more.  We need more people who can code.  But you can tell someone that they need to code.  You will have to spark something in there.  They have to want to be coding.  So how about introducing people to app development, mainly  HTML5, CSS basics, and some bit of JavaScript?  There is a whole lot of introductory content  to HTML and CSS.  There's a lot of tools out there.  What we don't really find out there  is a lot of really good JavaScript tools.  There is no, you can find different things  that could bring you into coding.  But they're not really a lot of these out there.  So what I came up with is anybody likes games.  And I know somebody is going to raise their hand.  I don't like games.  But most people at least do.  So how about telling people that games, all this cool stuff  that you see or played, or made by people as well,  like it made me just created by someone who knew how to code.  And most of the games you see, you  would never imagine that you could be, even if you  are a developer, you would never imagine  that you could create a proper game of your skills.  But actually, games are pretty easy to create.  And I don't have the time to show you  how can you create a game in like 15 minutes or so  with a bit of JavaScript knowledge.  I will then let you what you can do with it  if you embrace the thought that that can actually be done.  So the whole thing turned out to be a thing  I called invaders.  Coding invaders is basically introducing people  to programming concepts, like functions, iteration,  variables, like the basic concepts of programming,  while at the same time they are actually  creating their own game.  We did a few experiments with this.  And there is very good feedback.  This is still a working progress thing.  But at some point, it collided with my other huge love,  which is IoT and microcontrollers.  And the problem with microcontrollers  is they are very, very, very limited in resources.  So you cannot put for more, most intense and purposes,  you cannot put JavaScript running on a microcontroller.  There are whole new stuff coming up, like JavaScript  as per you know, then we'll let you run JavaScript  to a microcontroller hardware.  I'm just saying that because I usually get questions like,  how about this thing or that thing?  There are things that run JavaScript to a microcontroller.  Even the Tesla project itself is  proud to run JavaScript to a microcontroller,  accept the very first Tesla, or program the microcontroller  in JavaScript.  And it was not compatible.  It was actually transpiling your code to Lua  and running it on the actual device in Lua.  So what you want to do though is you  still want to create stuff in JavaScript because it's easy.  Like you don't have to care about a lot of those stuff,  your memory management, or the low level,  just trying to concatenate the string and see,  make you lose a lot of hair.  And I don't have a lot to lose anymore.  So I decided that people, I don't want people to lose their hair.  So how about creating your game in JavaScript  and somehow compiling it to see in a way  that it could be done run on a microcontroller that  is an ordinary across microcontroller  that has 16 megabytes of a processor  and maybe like two kilobytes of memory  or maybe 30 kilobytes of programming space.  The microcontroller I'm talking about,  let me show you just in a moment.  If I can find a camera, there's this one.  If any one of you knows this, it's called the Arduino Micro.  This is an AVR chip.  It's basically 16 megahertz.  It has two kilobytes of memory.  That's like 2,000 bytes of memory.  And you can put a program that's like 30 kilobytes on it.  Usually what you do is you open your Arduino IDE  and you write C code for this stuff.  So what I'm not going to do today  is open my Arduino IDE and write C code in there.  Because we have this project and I  want to show you what it can do.  The very interesting thing about this  is just start out with a basic program.  I have a surprise banner here.  I'm going to see if I can show it. Let's close this.  Yeah, it's not super visible, is it?  Yeah.  Let me just try.  That's a bit better, right?  Can you invert the color?  Not at this point.  In mid-talk.  I should have talked about that earlier.  Yeah.  It's not super important, the code currently is.  It's basically just a basic JavaScript code.  Some of you, we know ES6 will realize that.  Some of you in the first two rows  we can actually see it.  So what I'm going to show you is basically  see a JavaScript code.  You can see it's exactly 67 lines of code.  We have a small library that has some built-in stuff  that makes this easier.  Magic happens when I push this button.  So what you will see, you will see a small bat just  flying around the thing and just flapping the wings.  What you will see is basic games programming basics.  You want to sprite on screen.  This is the bat.  You animate the sprite on screen by switching between two  states.  You just float it around on the screen.  And then 60 times in a second, you just clear the screen  and redraw it in a different place, which creates the  effect of motion.  We have some background text as well, but this is not  interesting.  What gets interesting is when you actually start creating  actual games.  And I have here a small banner of the code invaders game,  which might be more familiar to you.  So exactly, again, this is just JavaScript code.  You will see how far this is just JavaScript code.  So you can do a few more sprites, just move them around  on the screen.  But you can also make it interactive so I can control  it.  And sometimes you can even fire projectiles.  But today is not that day.  So here's the thing.  You'll see how it looks like.  OK, but how do you code this?  And what does this have to do with people who never seen  any code in your lives?  So then we started doing building our materials, which  will be open source, hopefully, which will be online so  everybody could try themselves as well.  So when we started building this material, these kind of  things are really good way to introduce people to basic  programming concepts.  So if I'm running through the creation of this code, which  is also, like I said, this is a bit more than 140 lines of  code, with a lot of empty spaces and comments.  When you run people through this, hey, here you have a  variable, and then you introduce what a variable is.  There are people there.  If you want to store at which position currently the  monsters are, or the turretes, you want to store it.  You want to store it somewhere.  So you introduce variables.  And then you go on and introduce basic control flow.  You introduce loops or conditions.  And slowly, people, while having fun and creating the  game games, start to embrace all the basic concepts that they  will be using later.  Where the magic happens is actually, where the magic  happens actually, is this tiny device.  If any of you know what Kickstarter is, all right,  a lot of you.  So this device is crowdfunded, maybe like 1.5 to  2 years ago.  And it's called the Aldeboy.  So what the Aldeboy is and does, and you will see in a  moment, just let me sweat this.  That's quick.  So what the Aldeboy is and does is basically the exact  same thing that you see in right here, side by side.  It's basically just a more nicely looking version of the  contraption you see on the right hand side.  The right hand side is basically an Aldeboy in a  micro hooked up to a screen, hooked up to some micro  controllers, to some buttons, and the buzzer.  The Aldeboy is basically this exact thing in a much smaller  and nicer package.  So the idea was, you can get this thing or do it yourself,  and people are going to make open source games for it.  Except the problem was, the only way you could create  games for it is in C, with the Aldeboy and the IDE, which  now is very welcoming for starting up contributors.  And there are a few folks who made really good games, or  really cool games, constrained by the memory space that they  were given.  But it wasn't really taken off in any big ways.  And most of the ecosystem is still growing.  There are a lot of people having a lot of Aldeboys back at  their homes, which is as you have your Raspberry Pi's and  Aldeidos at home.  You're all with it.  You play with it with a few moments.  And then it sits on your shelf, and  all who are looking into it.  And it's a very powerful device with its constraints, which  is exactly what you here see is an ultimately translation of  the JavaScript code that you just seen in the browser into  C code and put it onto the device.  So what happens in the background is basically when you  use the Cloudable IDE, this JavaScript code, when you push  a button, is being translated into C code.  And the C code is then compiled into machine code.  And let me just push the compilation that will create  us a compiled version that I can really open.  So what happens in the background is your JavaScript  code is translated into C code.  So it's not a whole lot of people combining JavaScript  code straight to C, because then you start to experience a  lot of edge cases.  Like, Tesla's own JavaScript to new R transpire didn't really  work out very well.  Because of that, a new R is practically a whole lot  similar to JavaScript, not what I like C. When you start  experiences in edge cases, then there is a problem.  We have heard Ross talk about edge cases.  And we actually heard about doing a lot of interactions  between JavaScript and C during runtime.  What happens here is compile time interactions, your  JavaScript code is turned into C code.  There are a lot of constraints, of course, but for the  sake of creating the basic game and following some basic  rules and not using some, there was a mention to  creating non-surprising output.  So you're not trying to surprise the compiler.  It will do just fine.  Your JavaScript code will compile into C and will run  and design it in vice as C code.  So hopefully, yes.  So the compiling has finished.  So there is a HCI.org.  We do it.ino showing up in here, which is just opened.  And you're going to see that it compiled into actual C code  if you are going to see.  Sorry about the colors here.  So you're going to see that it actually compiled into C  code.  It's not nice, but it's actually relatable.  And even if there is something you cannot implement in  the JavaScript code, and you are like a mad C code  hacker, you can just do most of the stuff like with  code.  You can just do most of the stuff in JavaScript and just  do the very nitpicky parts by actually writing or  modifying the C code.  What will happen now is let me try to get the camera on  board.  I'll actually show you this live.  So when I hit the compile button, what you will see, or  not see, that one.  No.  Let's try this again, shall we?  Oh, because I'm trying to compile the C code version.  Of course.  Yeah, let's try this again.  How much better?  Except we were running into an error.  Not good.  It's a bit fragile as every demo.  Now you see the device light up.  The flash is a few bits.  And you see, so we just got our application  compiled into that.  There's one more thing to that.  So I'm going to zoom into this.  Because I'm running out of time fast.  I'm going to show you, OK, so yeah, whatever.  You re-implemented an ID in JavaScript.  Why is that important?  Because the whole ID, the whole editor, is  implemented in JavaScript itself.  It's just a web page.  There is a whole lot of things that you can do with just a  web page, including how about?  We have this tiny thing here.  You might recognize this is one of the enemies.  How about?  I'm not a very good drawer.  But this might remind you something that falls down.  Close enough, right?  So what I did now is I'm going to go into the code.  I'm going to go in there.  If you haven't seen this, this is basically binary data.  Audience price or your image data is basically, hey, there's  a pixel that is lit.  There's a pixel that is not lit.  When you are constrained on a tiny device, you have to make  sure your images don't take up a lot of space.  So you tag them into bytes.  And just do a byte stream.  It's not like you can have compression in there.  Or most likely, you will not win much.  So what these devices do is just put byte stream data onto  the device itself.  That they are going to be using to be drawing onto the  screen.  So what happened now, if I actually now open the preview  which, remember, this is still JavaScript.  This is running in your browser.  Then I can see that we are close enough.  We have a little fast-dem invader.  And now I'm just going to recompile the whole thing and  hope for the best.  Yes, it's flashing.  And, and, and, and, and, there you go.  It is made of you.  It's made of you, yeah.  I am quickly running out of time.  But I'm going to try to show you one more demo.  Just to understand the implications of building  something in the browser.  What would that do?  So as you might see or not, that is actually one of the  most readable parts of the thing.  This is running from a local server.  So I actually hosted this off from my own mobile phone,  which gives me the extra that I can actually access this  computer's IP address for my phone.  Which is basically, I can open this web page for my phone.  So see what happens when I open this other invader in here.  And let me just open you a camera view and show you my  phone.  No peeking at my notifications.  Let me just reload this page.  What you're going to see, this is your response of web page.  And response of web pages have keyboards.  But also, interesting stuff that they can access the  network.  How about a monster like that?  Not that.  Maybe that's more monster-ish.  Let's say this.  Oh, no, no, no.  Yeah.  And.  I just re-wrote my image for my phone.  Because you don't want to fit over your touch bar.  If you have a touchscreen device, we have pockets.  Like, not everybody has a touchscreen device.  So why not just put it on your phone?  And there is a lot of implications.  So what happens here is basically, I'm connecting to  the same web page from the same phone.  And I'm pushing data between the two web pages, the live  updating, in the same time.  So out of time, what I still want to say is, oh, yeah, the  best thing I haven't even showed you, but just for  measurement.  And I have this whole thing running in here as well.  Just you.  Oops.  This is the other game.  You will be showing a version of this a bit later.  You know what that is?  Yeah, so you can even drive this one yourself.  It's a bit, there is a bit different version, a bit  more of a five version.  Because if you go to this URL, cld.bi slash Firefox, do we  have this?  No.  You can actually play this with a very normal  Wi-Fi access.  I should put it in there.  But if you have a computer, you will see this is a  next-name game, except it has different images on it.  I just made this, I just read some of these aspects in  the last Mizzler Workweek in like, whatever, half an hour.  So a little more of the whole thing that's called  cloudaboy.  Ask me around.  I'm going to be here today and tomorrow in the Mizzler  Workweek, if you're interested, or if you want to know  about the details.  Do we have questions?  We have one question, so make it a good one.  We have time for one question.  Yes?  I'll do a transparent C, a JavaScript code to C.  Yes, so the question is, how do I transpire a JavaScript code  to C with blood and sweat?  Basically, by hand, you have a transpire.  And it's tricky because JavaScript is not strict with  types, so you have to infer types and stuff like that.  A lot of things are working.  A lot of things are not working.  Objects are not currently working.  I'm working on arrays.  Arrays are almost working.  And there's a lot of boilerplate code in  there behind all this.  There's one more idea.  So the Arduboid was just one device.  But there are a whole host of devices that you could use  and transpire the games you just created, and just play  them onto other devices as well, as well as desktops and  mobiles and all those things.  So these are retro games, not anything like the next Half  Life, but it's a very interesting way to follow all  this.  So you can see the slides.  The slides have links on the link about you can get  this in touch at my Twitter account at SLsoftworks or  find me at the Mizzle brief tomorrow.  Thank you for your listening.  Thank you, Frankie.
Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_0_131.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_132_563.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_564_3755.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_3756_5543.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_5544_6023.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_6024_9359.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_9360_11039.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_11040_12083.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_12084_18095.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_18096_20327.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_20328_20531.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_20532_26711.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_26712_28859.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_28860_30539.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_30540_31967.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_31968_34523.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_34524_34655.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_34656_36743.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_36744_37499.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_37500_39239.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_39240_39599.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_39600_40031.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_40032_40979.png Learning_IoT_coding_with_HTML5_games_Introducing_Clouduboy_and_Happy_Code_Friends_40980_41669.png
Our next speaker is Yzvan Smurzanski. It took me like three years to be able to say his name. And you'll figure that everybody prefers to call him Flaki, no wonder. He's one of the most ex-speakers, and he travels around the world with this little puppy called Bella, which has its own Twitter account. And one of the challenges that he takes on is to travel in most of the only remote places and try to work from there. Like, I don't know, maybe a hearing room catch him soon. So I invite you all to listen to Yzvan Akaflaki. OK. Yes, welcome. And let me just switch to some slides. I took this photo just the other night Yzvan is walking around. How many of you know this figure? I don't know if it has any Brussels bound connotations. Please tell me about that on Twitter or something. But who knows the origin of this thing? Where are you from? Anybody? Just shout it out. Space invaders, right, exactly. So we're going to be doing some space invading. I'm going to be invading your spaces, but not your personal spaces because we have a code of conduct. What other spaces can I invade? JavaScript. Who knows about JavaScript here? Who doesn't know about JavaScript here? You're going to be born out of your buttocks. Oh, it's free. You might as well leave. I can't even show you anything else. Who knows about C here? Colonel C Eckers? Sorry about that. I'm going to be invading your world. You're going to be pissed off. Please tweet at me or talk to me. But try to see the big picture. So what I'm going to be talking about after this five minute intro is a JavaScript or microcontrollers. Not really, but creating JavaScript games at HTML5 in browser and putting them onto small microcontrollers. And why would I do that? Well, why would you want to do that? There is a little story about the whole thing. Before I start demoing stuff, there is a little story that we did a, oh, yeah. Sorry. That is a thing I forgot to tell. But I think Yorna described it very well. So in JavaScript to improve, I'm a frontend trainer. I'm a Meso-tech speaker. And I do travel with Baylor all around the world. But I also give a lot of talks. I don't sleep. But one of these is just a rumor. So I'm a testable project member. I've been doing JavaScript and hardware for three years now. So the whole story starts with a thing called Happy Code Friends. Happy Code Friends was when we decided tech needs more diversity. People need more. We need more people who can code. But you can tell someone that they need to code. You will have to spark something in there. They have to want to be coding. So how about introducing people to app development, mainly HTML5, CSS basics, and some bit of JavaScript? There is a whole lot of introductory content to HTML and CSS. There's a lot of tools out there. What we don't really find out there is a lot of really good JavaScript tools. There is no, you can find different things that could bring you into coding. But they're not really a lot of these out there. So what I came up with is anybody likes games. And I know somebody is going to raise their hand. I don't like games. But most people at least do. So how about telling people that games, all this cool stuff that you see or played, or made by people as well, like it made me just created by someone who knew how to code. And most of the games you see, you would never imagine that you could be, even if you are a developer, you would never imagine that you could create a proper game of your skills. But actually, games are pretty easy to create. And I don't have the time to show you how can you create a game in like 15 minutes or so with a bit of JavaScript knowledge. I will then let you what you can do with it if you embrace the thought that that can actually be done. So the whole thing turned out to be a thing I called invaders. Coding invaders is basically introducing people to programming concepts, like functions, iteration, variables, like the basic concepts of programming, while at the same time they are actually creating their own game. We did a few experiments with this. And there is very good feedback. This is still a working progress thing. But at some point, it collided with my other huge love, which is IoT and microcontrollers. And the problem with microcontrollers is they are very, very, very limited in resources. So you cannot put for more, most intense and purposes, you cannot put JavaScript running on a microcontroller. There are whole new stuff coming up, like JavaScript as per you know, then we'll let you run JavaScript to a microcontroller hardware. I'm just saying that because I usually get questions like, how about this thing or that thing? There are things that run JavaScript to a microcontroller. Even the Tesla project itself is proud to run JavaScript to a microcontroller, accept the very first Tesla, or program the microcontroller in JavaScript. And it was not compatible. It was actually transpiling your code to Lua and running it on the actual device in Lua. So what you want to do though is you still want to create stuff in JavaScript because it's easy. Like you don't have to care about a lot of those stuff, your memory management, or the low level, just trying to concatenate the string and see, make you lose a lot of hair. And I don't have a lot to lose anymore. So I decided that people, I don't want people to lose their hair. So how about creating your game in JavaScript and somehow compiling it to see in a way that it could be done run on a microcontroller that is an ordinary across microcontroller that has 16 megabytes of a processor and maybe like two kilobytes of memory or maybe 30 kilobytes of programming space. The microcontroller I'm talking about, let me show you just in a moment. If I can find a camera, there's this one. If any one of you knows this, it's called the Arduino Micro. This is an AVR chip. It's basically 16 megahertz. It has two kilobytes of memory. That's like 2,000 bytes of memory. And you can put a program that's like 30 kilobytes on it. Usually what you do is you open your Arduino IDE and you write C code for this stuff. So what I'm not going to do today is open my Arduino IDE and write C code in there. Because we have this project and I want to show you what it can do. The very interesting thing about this is just start out with a basic program. I have a surprise banner here. I'm going to see if I can show it. Let's close this. Yeah, it's not super visible, is it? Yeah. Let me just try. That's a bit better, right? Can you invert the color? Not at this point. In mid-talk. I should have talked about that earlier. Yeah. It's not super important, the code currently is. It's basically just a basic JavaScript code. Some of you, we know ES6 will realize that. Some of you in the first two rows we can actually see it. So what I'm going to show you is basically see a JavaScript code. You can see it's exactly 67 lines of code. We have a small library that has some built-in stuff that makes this easier. Magic happens when I push this button. So what you will see, you will see a small bat just flying around the thing and just flapping the wings. What you will see is basic games programming basics. You want to sprite on screen. This is the bat. You animate the sprite on screen by switching between two states. You just float it around on the screen. And then 60 times in a second, you just clear the screen and redraw it in a different place, which creates the effect of motion. We have some background text as well, but this is not interesting. What gets interesting is when you actually start creating actual games. And I have here a small banner of the code invaders game, which might be more familiar to you. So exactly, again, this is just JavaScript code. You will see how far this is just JavaScript code. So you can do a few more sprites, just move them around on the screen. But you can also make it interactive so I can control it. And sometimes you can even fire projectiles. But today is not that day. So here's the thing. You'll see how it looks like. OK, but how do you code this? And what does this have to do with people who never seen any code in your lives? So then we started doing building our materials, which will be open source, hopefully, which will be online so everybody could try themselves as well. So when we started building this material, these kind of things are really good way to introduce people to basic programming concepts. So if I'm running through the creation of this code, which is also, like I said, this is a bit more than 140 lines of code, with a lot of empty spaces and comments. When you run people through this, hey, here you have a variable, and then you introduce what a variable is. There are people there. If you want to store at which position currently the monsters are, or the turretes, you want to store it. You want to store it somewhere. So you introduce variables. And then you go on and introduce basic control flow. You introduce loops or conditions. And slowly, people, while having fun and creating the game games, start to embrace all the basic concepts that they will be using later. Where the magic happens is actually, where the magic happens actually, is this tiny device. If any of you know what Kickstarter is, all right, a lot of you. So this device is crowdfunded, maybe like 1.5 to 2 years ago. And it's called the Aldeboy. So what the Aldeboy is and does, and you will see in a moment, just let me sweat this. That's quick. So what the Aldeboy is and does is basically the exact same thing that you see in right here, side by side. It's basically just a more nicely looking version of the contraption you see on the right hand side. The right hand side is basically an Aldeboy in a micro hooked up to a screen, hooked up to some micro controllers, to some buttons, and the buzzer. The Aldeboy is basically this exact thing in a much smaller and nicer package. So the idea was, you can get this thing or do it yourself, and people are going to make open source games for it. Except the problem was, the only way you could create games for it is in C, with the Aldeboy and the IDE, which now is very welcoming for starting up contributors. And there are a few folks who made really good games, or really cool games, constrained by the memory space that they were given. But it wasn't really taken off in any big ways. And most of the ecosystem is still growing. There are a lot of people having a lot of Aldeboys back at their homes, which is as you have your Raspberry Pi's and Aldeidos at home. You're all with it. You play with it with a few moments. And then it sits on your shelf, and all who are looking into it. And it's a very powerful device with its constraints, which is exactly what you here see is an ultimately translation of the JavaScript code that you just seen in the browser into C code and put it onto the device. So what happens in the background is basically when you use the Cloudable IDE, this JavaScript code, when you push a button, is being translated into C code. And the C code is then compiled into machine code. And let me just push the compilation that will create us a compiled version that I can really open. So what happens in the background is your JavaScript code is translated into C code. So it's not a whole lot of people combining JavaScript code straight to C, because then you start to experience a lot of edge cases. Like, Tesla's own JavaScript to new R transpire didn't really work out very well. Because of that, a new R is practically a whole lot similar to JavaScript, not what I like C. When you start experiences in edge cases, then there is a problem. We have heard Ross talk about edge cases. And we actually heard about doing a lot of interactions between JavaScript and C during runtime. What happens here is compile time interactions, your JavaScript code is turned into C code. There are a lot of constraints, of course, but for the sake of creating the basic game and following some basic rules and not using some, there was a mention to creating non-surprising output. So you're not trying to surprise the compiler. It will do just fine. Your JavaScript code will compile into C and will run and design it in vice as C code. So hopefully, yes. So the compiling has finished. So there is a HCI.org. We do it.ino showing up in here, which is just opened. And you're going to see that it compiled into actual C code if you are going to see. Sorry about the colors here. So you're going to see that it actually compiled into C code. It's not nice, but it's actually relatable. And even if there is something you cannot implement in the JavaScript code, and you are like a mad C code hacker, you can just do most of the stuff like with code. You can just do most of the stuff in JavaScript and just do the very nitpicky parts by actually writing or modifying the C code. What will happen now is let me try to get the camera on board. I'll actually show you this live. So when I hit the compile button, what you will see, or not see, that one. No. Let's try this again, shall we? Oh, because I'm trying to compile the C code version. Of course. Yeah, let's try this again. How much better? Except we were running into an error. Not good. It's a bit fragile as every demo. Now you see the device light up. The flash is a few bits. And you see, so we just got our application compiled into that. There's one more thing to that. So I'm going to zoom into this. Because I'm running out of time fast. I'm going to show you, OK, so yeah, whatever. You re-implemented an ID in JavaScript. Why is that important? Because the whole ID, the whole editor, is implemented in JavaScript itself. It's just a web page. There is a whole lot of things that you can do with just a web page, including how about? We have this tiny thing here. You might recognize this is one of the enemies. How about? I'm not a very good drawer. But this might remind you something that falls down. Close enough, right? So what I did now is I'm going to go into the code. I'm going to go in there. If you haven't seen this, this is basically binary data. Audience price or your image data is basically, hey, there's a pixel that is lit. There's a pixel that is not lit. When you are constrained on a tiny device, you have to make sure your images don't take up a lot of space. So you tag them into bytes. And just do a byte stream. It's not like you can have compression in there. Or most likely, you will not win much. So what these devices do is just put byte stream data onto the device itself. That they are going to be using to be drawing onto the screen. So what happened now, if I actually now open the preview which, remember, this is still JavaScript. This is running in your browser. Then I can see that we are close enough. We have a little fast-dem invader. And now I'm just going to recompile the whole thing and hope for the best. Yes, it's flashing. And, and, and, and, and, there you go. It is made of you. It's made of you, yeah. I am quickly running out of time. But I'm going to try to show you one more demo. Just to understand the implications of building something in the browser. What would that do? So as you might see or not, that is actually one of the most readable parts of the thing. This is running from a local server. So I actually hosted this off from my own mobile phone, which gives me the extra that I can actually access this computer's IP address for my phone. Which is basically, I can open this web page for my phone. So see what happens when I open this other invader in here. And let me just open you a camera view and show you my phone. No peeking at my notifications. Let me just reload this page. What you're going to see, this is your response of web page. And response of web pages have keyboards. But also, interesting stuff that they can access the network. How about a monster like that? Not that. Maybe that's more monster-ish. Let's say this. Oh, no, no, no. Yeah. And. I just re-wrote my image for my phone. Because you don't want to fit over your touch bar. If you have a touchscreen device, we have pockets. Like, not everybody has a touchscreen device. So why not just put it on your phone? And there is a lot of implications. So what happens here is basically, I'm connecting to the same web page from the same phone. And I'm pushing data between the two web pages, the live updating, in the same time. So out of time, what I still want to say is, oh, yeah, the best thing I haven't even showed you, but just for measurement. And I have this whole thing running in here as well. Just you. Oops. This is the other game. You will be showing a version of this a bit later. You know what that is? Yeah, so you can even drive this one yourself. It's a bit, there is a bit different version, a bit more of a five version. Because if you go to this URL, cld.bi slash Firefox, do we have this? No. You can actually play this with a very normal Wi-Fi access. I should put it in there. But if you have a computer, you will see this is a next-name game, except it has different images on it. I just made this, I just read some of these aspects in the last Mizzler Workweek in like, whatever, half an hour. So a little more of the whole thing that's called cloudaboy. Ask me around. I'm going to be here today and tomorrow in the Mizzler Workweek, if you're interested, or if you want to know about the details. Do we have questions? We have one question, so make it a good one. We have time for one question. Yes? I'll do a transparent C, a JavaScript code to C. Yes, so the question is, how do I transpire a JavaScript code to C with blood and sweat? Basically, by hand, you have a transpire. And it's tricky because JavaScript is not strict with types, so you have to infer types and stuff like that. A lot of things are working. A lot of things are not working. Objects are not currently working. I'm working on arrays. Arrays are almost working. And there's a lot of boilerplate code in there behind all this. There's one more idea. So the Arduboid was just one device. But there are a whole host of devices that you could use and transpire the games you just created, and just play them onto other devices as well, as well as desktops and mobiles and all those things. So these are retro games, not anything like the next Half Life, but it's a very interesting way to follow all this. So you can see the slides. The slides have links on the link about you can get this in touch at my Twitter account at SLsoftworks or find me at the Mizzle brief tomorrow. Thank you for your listening. Thank you, Frankie.
JavaScript or microcontrollers. Not really, but JavaScript and hardware for three years now. So Code Friends. Happy Code Friends was when we want to be coding. So how about introducing me just created by someone who knew how to code. love, which is IoT and microcontrollers. And the So how about creating your game in JavaScript and just a basic JavaScript code. Some of you, we what does this have to do with people who never source, hopefully, which will be online so things are really good way to introduce people to basic programming concepts. So if I'm running concepts that they will be using later. Where the magic happens is actually, where the magic games, or really cool games, constrained by the is an ultimately translation of the JavaScript experiences in edge cases, then there is a interactions, your JavaScript code is turned into constrained on a tiny device, you have to make JavaScript. This is running in your browser. Then as you might see or not, that is actually one of there. But if you have a computer, you will see