 Hey, yeah, so hi everyone. Thanks for coming My name is István Smurzansky, and I'm not gonna burden you with that name anymore So you can just call me Flaki. This is like basically 90% of the people So I'm going to talk about a lot of things and We might not be able to get to all kind of all the intricacies and all that But feel free to ask me questions afterwards. So I'm gonna be talking about JavaScript I'm gonna be of course, this is a JavaScript, you know, but I'm also going to be talking about hardware and HTML5 games and a bunch of you know Fixing the pipeline and getting some more people into into JavaScript and programming or tech ID and general I have a few slides There will be a link to the slides so you can check it out check the links later if you're interested So don't worry about the slides. This is this is one of those meetups and one of those days I'm gonna be mostly doing live demoing stuff and trying to Deplete the kind of faith I have to get demo gods So if something goes wrong or wrong, that is totally to be expected But feel free to ask me to show me stuff after Afterwards if you cannot get it to work if you need any more info stuff They are gonna be on the slides and links so you can just check them out So just a short intro my name is Ishmaz Wajalski and Flaki is for short You can tweet at me at SL Softworks and I'm a JavaScript developer I'm a JavaScript trainer at each front-end development. I'm from Budapest, Hungary But most people when they ask me these days, where am I based in I usually just answer them Well, I still rented apartment in Budapest I'm here in Singapore like in and out For the most of July and I already Been given a short version of this talk at heck where Last week two weeks ago. I'm here by Enjoying the New hospitality of mind your friends to my and shiny who are the organizers of Build and live.js and the live dot Is that we will yes, that is one. Yeah, thank you I'm actually gonna be giving a podcast Early August so if you are into that and want to know what is rust or what is that about feel free to join us So I'm I'm enjoying the hospitality of these kind kind souls And they were the ones suggested me to come here as well. So if it's terrible blame them If it's nice thank them for it I'm a muscle of tech speaker. This is the The blue t-shirt and the yellow heart I'm fine with Missoula. By the way, I dropped off some stickers if you're into that kind of game Get some stickers in the table. I'm a muscle tech speaker that basically means like something like a community that they have evangelist Which is basically Missoula helps me With travel and lots of arrangements and resources If I talk about topics that is what cares about which is basically every topic connected to the open web and Is it very nice and generous offering in general? I'm also doing a bunch of JavaScript and hardware stuff. If you have a word of tassel, I'm working with the tassel Bringing some features on I'm mostly working on the rust support on the airport tassel is basically a no jish a A mix a tiny mid sport that runs no JS like out of the box So that's about me and the whole idea that They're gonna be talking about it basically came a year ago. You're a half almost We had this thing called happy code friends back in Hungary when we were teaching people basic web skills html 5 css Realizing that teaching JavaScript in a weekend much less one day much less one after it is kind of hard undertaking Mostly not just because people Don't really get you know, why are you trying to stuff variables and loops and whatever's in down to your heads But but also because of the resources are not almost there You can get a bunch of resources and teach people like the basics of html and css in an afternoon And they can they can continue on if they they you know, you manage to touch them. They can Take him from there and use online resources and some mentoring and get really good at that JavaScript not so much at least Unless you want to count JavaScript for cats which I love I did work Yeah, there is this thing to call JavaScript For cats I search for it explains JavaScript a very simple layman stares For cats and also for the human counterparts it's made by the wonderful Max Advin and So so there are a few few resources a few and far between but but there are There came the idea that we are gonna be teaching people when people went by Letting them create a game. This was the very first mock-up of what I imagine back in the days You're gonna see how much how far we went How far we gone is basically hey, you can you can you can create the JavaScript game in pretty easily With some pretty this is basically like a hundred lines of JavaScript code that you see on screen that is pretty much a workable game-ish like thing, you know People are like like blinking LEDs and you know create your own website and shit but It's not the kind of creation that people are after that, you know When you're creating with Legos for example when you're creating with Legos You you create something that wasn't before there before and Something completely new that is only bound by your imagination that kind of create the That that kind of feeling of creation and creativity It's hard to come by when you're trying to teach people JavaScript So this is this is this is not easy like this was not an easy job to come up on us So this is how Cloudboy came around how Cloudboy came around I was very old in history and Go right into it. Basically I was playing around with this little device that I'm going to show you in a moment If you ever notice Or if you're just as much as a junkie of Kickstarter's I am This is called the Arduboy. It's basically are an Arduino hooked up to a screen a few buttons and the piezo piezo beeper People went crazy about this and the Kickstarter campaign sold like 10,000 of these The idea was that this is basically an Arduino Hooked up to a screen. So the moment. Yeah, just you know for size like this is this Like basically a credit card size thing Basically inside of it. It's an Arduino micro microcontroller And you know when you everybody who buys their first microcontroller be it an Arduino or Raspberry Pi go home You know bling some LEDs use some tutorials measure the temperature of their cat or something Yeah, like that happened. Yeah, no, no, I don't own a cat I was experimenting for under a cat. No, but seriously And then you you you stop it into the drawer Unless you can convince your boss that you can create a something like you know It shows a flag when your bill goes around something like that but that is As far as people go with hard and like I mean, I'm not getting I mean just hall jerking because that was me as well my very first thing Into hardware land was a few years ago It that's all in the very first place and if it wasn't for JavaScript We don't have done too much with with hardware anyway Me neither But actually with your script it gets a lot easier in a lot of ways and a lot harder in a lot of other ways But we're gonna try to take over there's those hard ways So the idea was about the art boy is hey, this is just an Arduino You can just download the Arduino IDE is free and just create games for it then people would create three games for it upload them to GitHub and Your profit everybody can download the gasoline of like free games and it was a good idea. It always worked You know, you all know the almost part was it wasn't get hub It couldn't be but it wasn't get happy at the office, but the almost part was how do you program games in the Arduino editor? You know what I'm gonna. I went talking about Yeah, let me let me just start it up for you. Just remind you how do you program games in the Arduino editor? Yes, thank you windows Well, this is just half of it Is that is that familiar for so many Do you know what that is that is cnc++? Great games and cnc++. Here's your problem Everybody would love to create games, right? The problem is not a whole lot of people know enough cnc++ to create games much less to enough Do they know enough cnc++ to create games for microcontroller that's 16 megahertz and that is actually pretty good 60 megahertz of speed. It has two and a half kilobytes of memory two thousand five hundred sixty bytes of memory which like 30 percent of it is already taken by the OS that you already flash onto it like the bootloader issues and 30 kilobytes of flash grant you get 30 kilobytes To create something usable like something that resembles a game on this device So here's a problem a lot of people in their spare time love to create games a lot of people in the spare time Who knows see I love to create stuff But it's very hard to convince people to churn out hundreds and hundreds of games out of them Try to optimize them down to the minimum bare metal for them to be able to run on this device and And then to upload them for free for anybody else to grab, you know They almost worked But like the games weren't coming really and I was like yes because of the barrier of entry You you want to lower the barrier of entry this goes, you know, I'm telling you this about this particular game and armor I'm not bashing can This this was a super good idea the execution there was a slight problem This was a side problem. This goes for your super good idea of Kickstarter creating a company creating IOT and being the next Whatever insert Famous person here This goes for everyone, you know, they mistook The good idea for a good ecosystem and for a good ecosystem You need to have a low barrier of entry social supply If you ever heard of this tiny startup called Apple, they have this programming language called Swift and The this tiny startup. He's super super. They're super security about their Intellectual property the open source their number one programming language Swift is gonna replace most of Apple's offerings in whatever it is There is going to take to you to create programming To create programs for their most of their devices. Why? Because you realize they cannot miss on Cannot miss off on first on the ecosystem cannot miss off on all the people that want to use your language and Want to use your programming language and open sourcing a programming language is not just going to give you a Free work people Working on your stuff for free It also gives you that but most importantly it brings you people Being aware of your thing being like thinking more about your thing like being this kind of ecosystem Thinking even poisons the big Apple and not that bad that we got all the east coast of the US But the other big Apple Because you have to lower the barrier of entry to you to create an ecosystem. So that was my idea. Hey, I want to lower the barrier of entry How do I do that? Well, or do you know at your it's terrible. So I want to make something that is Easier easier to use. So here's the thing. I'm gonna try Let me just quickly Show you the very simple game I made Concentrators Should have preset this up so we're not spending a lot of time with this Works. Oh, yeah, it works. No, that's not the one Oh No, of course, it's not the one. Ah, let's try this again. Shall we? All right Come on compile compile Well, it wasn't my aim I dream of dreams. They weren't dreaming about giving a talk to computers in front of me Like I have enough gadgets anyhow. All right. There you go. Oh, there you go. Now we are talking So focus there again So yeah, we got some game running on this and my first thing was okay, so I'm gonna create a editor That is going to make it easier for people to create games in C++ because What there is one thing about C++ syntax and queer extension? The other thing is, you know, when you have when you want to create do it so have Yeah, I still have it So this is how this is basically how a game looks like, you know what these zeros are These are finally complete compiled images when you're creating stuff for the web You just load a PAG file, right and you have a sprite and image When you're creating stuff for microcontroller that has 30 key of memory, you know You're better not like loading a 30 kg bag on that, right? So how they do it is basically this is a pixel graphic map of all the pixels there are literally On a particular sprite and all the pixels there are not so I'm gonna show you again So so this is how it looks like so to achieve this kind of image You need a whole bunch of zeros and ones. It was like okay That sounds terrible And there are all kinds of tools on the web that you can upload a PNG file and like screw around to get like These hex codes and then you still know what the hell those hex codes are. So I was like, let's let's start here So I created a a editor That was pretty good at images And if you scroll down so what do you see here? This is a source code of the game you are seeing What you will see is this is a hundred sixty lives of Of C code. This is already the C code. I'm gonna show you the JavaScript But let's not get ahead ourselves I still have five minutes so we have plenty of time, right? So here's the thing I was like, okay, so let's create this thing if I go in here You will see these are still the same binary images, right? These are still the binary files that we have been talking about the only change is actually my editor loads these images and It does what a computer does well Transforms from the binary data into something that's visual something that's more understandable to humans Not just that it actually explains you what those cracks cracks mean. So if you go into there, you will see That as you scroll through the image, it will highlight all the columns. Basically every bite is eight pixels eight bits will serve eight pixels And basically eight columns and we'll let you know, you know, if I'm gonna edit this here like I'm gonna say I just zero this throw out the column now and Oops See the demo guys I've been talking about And in case I know you are okay So it actually deletes there are a line of code Let's see. All right. Now we are talking So I can edit this And see it changes the image as well, but I don't want to edit like the image manually That's not what I put the whole thing up into a bad browser, right? I want to use my fingers or you know my mouse or my my other devices and Come on Okay, I Mean the middle of a huge refactoring so a bunch of people a bunch of things are not gonna work No, there you are So that's why I made this view you just click the image and you know Redraw the image. How are you like so and it will just do And do the conversion do what does what computers do well? Converts the visual image into something that the tiny microcontroller can understand something optimize something compact something Something that computers do well. So if you go into there, you'll see it's a different thing It was nice it was good It has a few it had a few perks But it wasn't enough because you know what see still see and see plus buses see a C plus plus and teaching C plus plus as the first language for someone who you haven't seen any programming languages yet or even programming in itself It's not the best of the ideas at least According to me and a few of my friends like you can argue me in me, but don't ask me So the idea was hey actually look at this code. I mean, this is pretty much JavaScript I mean, it's not JavaScript, but I mean You know It can kind of you need a few seconds or rather, you know, what's your poison? But after a bottle of whiskey, it looks kind of job, right? so I was like you can actually create this thing in JavaScript and Transpiled to to to see code and then flush it to the device. That was an another thing, you know I made this code editor and it's fun But you know if I wanted to see how my game looks like I needed to compile it I needed to flush it onto a device. I need it to screw around You know for 15 seconds for it for 20 seconds, you know for those who use that back. This is not a problem If you if you are kind of used to the old-school bad Then you just update a file and reload the page, you know, you had to have five and it just works Then that is kind of like a hassle. So I was like, okay So if I actually made this in JavaScript that would you know that would serve like both things I could do it in a language that is more accessible than C or C++ And also I could just preview the whole whole damn thing in the browser because it's just a browser It just shows up. It just runs JavaScript. So the thing I came up with is called micro canvas It's basically translating the job a it has it is like a library. It's a tiny library that follows closely with the With the HTML5 specification is basically an extension of HTML5 canvas and Let's you create all kinds of things That is basically all kinds of mostly games that later There is actually a compiler I'm working on There is not a full flash like your JavaScript to see compiler, but it can compile a subset of JavaScript and a subset of your games Into into C code and then flash it onto the device. So this is exactly what you are seeing if I'm gonna say click this preview button This is exactly what you have just saw right It is exactly the same game. It is exactly the same thing except it runs in the browser And there's no emulation here. There's no, you know, I'm running a job AC interpreter or like compiling like you bad assembly or anything like that. No, this is pure JavaScript code And then HTML5 canvas Which you can even try yourself Because it runs on your browser so you can upload it to the internet So you can just type a URL and use it in your device So if you try this URL whether it's a laptop or your mobile device You will see a slightly upgraded version of this and I'll That will get me to the to the special edition invaders game I have today and Just Why you are playing around with this Let me open there is a new version. I'm working on of this the new version of this is actually using the You Has some upgrades that I'm happy to show you on the device itself because it's more fun like that and hopefully hex file coding minors SG Flash so Let's not talk about the whole thing that everything is compiled in the cloud So I'm working on one computer. It compiles on the cloud. It actually the Compiled hex files to this computer which uses Electron JS and no JS serial port to put the compile image into the device Oh, it's not let's just not talk about this thing. But basically Which you're gonna see so I have the uploaded Updated Or there you go the updated game that you're gonna be seeing with a bit of extra Flushing onto the device. Hopefully So, well, I'm not sure if I can win this here. I will try You know, it is the same thing because it just the web Oops, this is not the thing that I wanted to show you. Where is it? This is our all the so-called demo guys, right? Everybody's okay Before you go the links Just one more thing You know, I've been showing you a bunch of devices and my favorite fight didn't you show you by talking I can show you this one as well so Let me I show you a bunch of devices, right and You know, I've been giving them a good publicity for some time. So so that's fine And I'm giving them a good publicity for some time, right? But you're like, okay, okay, but how does this gets you know? What about teaching people stuff, you know, what like I told you that order you know device That order boy devices basically just an order, you know a button and a few other stuff Who topped your breadboard and I'm gonna prove it to you Because this is basically the same thing oh, by the way, this is an undergame I Guess you know this, right? All right So this is about that if you don't want to talk to me I like a whole bunch yourself is open source or at least it's gonna be one side I want to lose better than a monkey's buck Which I'm working on her. So feel free to check the slides that is talk.flag.is slash play at cloud boy is the Tweets if you want to send or is an email of the list you can sign up if you want to know more about this stuff and I hope you enjoyed this. Thank you If you have questions you can take this offline We have like say time for one