Placeholder Image

字幕表 動画を再生する

  • in addition to everyone who's building things here over the course of a couple of days, we asked Matt, if you build us something in an hour, which that was a nice surprise, it it's just say it was a surprise.

  • It was a surprise.

  • Okay, the nice, but we'll wait and see.

  • So we're gonna give that a try.

  • Now we'll see how we get on.

  • We've got an hour to see.

  • No.

  • What house?

  • This is what you dig through will work through it together on totally all it'll show up your your typing and talking skills An hour off me groupings that go a flow and making typos pretty much.

  • I did treat a little and spent some time today prototyping What I'm going to okay, be working on just so I'm not gonna stumbling around completely blind, but in Let's let's let's see how it goes.

  • And if I still remember how to write code in between all the ceiling.

  • OK, so in three moves for festival committee committee show Matt screen, we were showing Max Green at the moment.

  • Okay, great.

  • So now there's no escape Now match was left.

  • So So if you're watching my screen.

  • You'll see that I'm viewing this little boilerplate that we made a nickel if I called create react that land in.

  • And basically I think by now, pretty much the five majority of people watching this stream will probably know create reactive.

  • That's being sort of really common starting point for you back at the inn and I really I This just gives me We'll see if I even get so far.

  • But this gives me the ability to write some service ID code during during during this stream in.

  • And I think it's just one of these things that I also talked about earlier in the live stream in how, how, how great it is to just start getting a basic flow set up before we actually start building our our that that supports what we're going to build.

  • So in terms of what we're going to build, you know, because the next thing I know, I've given some thought to write in.

  • What do we call it in good names to distance for Super Cool Challenge Sudoku Challenge.

  • Yeah, Yeah, that's not so good.

  • Come on.

  • Sudoku Stack.

  • Belle crew.

  • Steck.

  • Ok, ok, so that's gonna be in the way.

  • We like it in the new repo in some ways together what this deploy button does since that it sets up a new repo and an initial deploy off, create reactive and make sure I just have, like, a complete, continuous deployment process to globally distributed network.

  • And, you know, we aflame the integration and all of that stuff.

  • And basically what?

  • What I thought would be really fun to do for sort of an hour long challenge.

  • Is that back?

  • About 10 years ago in when I had moved to speaking from Denmark and I was still at the time working as a musical journalist in Denmark and was starting to figure out what was going to stay in Spain and that there wasn't a lot of work in working s a writer covering music in Danish, especially not when it was like contemporary classical music.

  • And we're yes, in Danish in Spain.

  • Yeah, Yeah, I like it.

  • It wasn't surprised at the time, but it turned out that it just wasn't that I demand in something's wrong with the world.

  • But that's how it was in.

  • Okay, But back then, I want one of the things that just started building Where soon?

  • What's what's this is Sudoku challenge in?

  • So I built this challenge where you could, like, go to a web page you could get us through, Doc.

  • Oh, you could solve it on time.

  • And then you could send the mail to a friend with the same sudoku and challenge that person to, like, see if you can beat my time back.

  • Then that was like a pretty big A project, actually in it was back in in the early days of rails, right?

  • And everything was in if everything was was server side and so on were going rail set.

  • Wasn't, Wasn't it easy, right?

  • And just just the whole story around like the browser and JavaScript was really different years ago, right?

  • So So even just the concept of like, Okay, how How am I gonna make an interactive you i for pseudo cruising in a browser if it was much more peach based of, like having all these forms and sending it to a rail controller and rendering in response and so on.

  • And of course, all all this dope with generation in I had to come up with a way to do it through this.

  • I found this old depository and meet back in, like, 10 years ago.

  • Right?

  • This is the one to say original.

  • So this is this is an aversion off it that they have rodent groupie.

  • So one of the things that was the constraint back then was that this had to run on my server during the rep request and service or smaller back then.

  • And Ruby is kind of shot, and deployments were really hot.

  • So actually also rewrote this and see as a ruby extension is to get the performance for for generating these thes Rubies.

  • So So this is like a Felix Be Silver.

  • It's like based on an old dude in computer science paper by Donald Youth around an algorithm called dancing Links in that I really like if someone wants, like, some mind bending fund going, read that play bridge and through the logic and see why it's called dancing links and miss your license and floor fun.

  • But like again, one of these thinks that that's changed now, right from from back when I when I had to do that way, it's that today we can maybe just go on in p.

  • M.

  • And then we do like sudoku.

  • We get like, Oh, there's like 10 p.m. j a slash sudoku.

  • That's a relief because I was worried you were going to spend the next hour re implementing a hindrance from getting anywhere.

  • All right, But now I can just like npm Sudoku makes.

  • Yeah, it's a little like kidding, but that's a that's That's the resources we have.

  • That's what it's all about now, right?

  • So what have you been?

  • So while you were talking you Yeah, things you do.

  • So basically, I set up my local development development environment by like what?

  • What?

  • What?

  • What if I did for me was setting up like this new website.

  • It has its own your health.

  • If anybody really deployed, if anyone is fast enough to capture this year oil from the lime street, you can go there and follow along.

  • It's a test yet in and it also created a new repositories.

  • So again, if anyone goes to peel men in the politest is spelling my name, right, And then sudoku stack.

  • You can actually find the source code and thistles.

  • What?

  • So So this is Yeah, this is what was cloned.

  • And then I just downloaded it and ran a young to install all off the Internet locally, right?

  • And the youngest even.

  • It's nicer than implement that it actually, since I practiced this a little before, I realized that, you know, everything seems so.

  • I was really surprised how fast by this stage, then you've already got your continuous integration set up.

  • You got a site configured on net.

  • If I that's watching a repositories and also download clone that repositories locally.

  • So you got a local environment yet yet set everything right and and I can hear in the local repositories I just did a young Janette sudoku, right?

  • Like so That's what took me, like, back 10 years ago.

  • And then I spent, like, a month implementing Donald clear standing links and everything and turns filing it to see.

  • And now I just Do you really realize that this was around 10 years ago?

  • That man, do you not realize that you could I really owe you, huh?

  • And then I just ran Yonts that right?

  • And that's again, one of these awesome things that now, as soon as this little server spins up and gets done building this whole plane.

  • I just have this awesome grew local environment and we can start hacking away.

  • Right?

  • So this this demo obviously has a little craft that we don't really need.

  • I don't need some big react.

  • Local news shows challenges.

  • I don't need a lamp.

  • That demo.

  • Let's get rid of this logo that they haven't each one because I like having an each one on a peach.

  • Bravo!

  • Getting cheerleading from the plain old mill crowd Doku Stack.

  • Here we go.

  • Bang.

  • Cool.

  • So versatile way.

  • Have a name I think we'll need.

  • They head out to be a little smaller.

  • It has, like some big you poured will disturb.

  • Let's just get rid of that and do like a padding off.

  • I'm kind of interested to see that very quickly.

  • You're starting to work on the design of this is well, this is all happening.

  • At the same time, I'm very much like the instant gratification.

  • How can we best get something quickly that has something like, especially when when, when I'm time, turn to our project, you'll want to see me.

  • That's a bunch of stuff I would do differently from a from a larger project.

  • I had more time.

  • I don't really think about like, Hey, maybe I should use type screen Russian Totally look into how books work to do things that we know that there's a bunch of stuff, right.

  • But But when you are like a hackathon and you want to actually build something, then I just find it.

  • It's really good to just rely on stuff you've built with with what you know, like discovering no and and split your time a bit between the time.

  • That's like, Hey, now I'm learning new tools and experiencing And now I'm actually trying to to get something was working right I get it, Get it, get it out there, right source.

  • So us, Right now I'm very much and get something working mood, right?

  • So the first thing I'll need to get anything working is to figure out how the hell does this thing work and it apparently has to make possible right.

  • But we need to sort of figure out what what I said make possible version do.

  • One of the things that I love, including is the Ripple idea might like the run run run evil print.

  • Luke, there is this sort of brought forth and the browser to date.

  • This comes with an awesome one of those.

  • So my first, it really ugly, dirty heck to get a little rest will be to import this generator from Sudoku and then instead of using it for anything, I'll just say, like, this is this is not in Don't try this.

  • It'll just explosives on the window up.

  • Great way.

  • And now we have generally Okay, let's make it puzzle.

  • Here we go.

  • Oh, give me a role in running right in.

  • So this was one thing that when I was spurred that thing earlier it like it took me a while to figure this out and not be really, really confused by it.

  • So I just to recap like a sudoku, it's always like it's this grid like typically nine by nine and right.

  • And then each row has to have all the numbers 1 to 9 years each.

  • A column has to have all the numbers 1 to 9 in each square.

  • That's nine by nine has to have all their numbers 9 to 9 right in.

  • If if we look and again this took me a while to, you know, I noticed, right?

  • But if we look at what this specific and PM module upwards, that's only Ciro's in here.

  • So for some reason, the author of this generator decided it's nice to have the number 02 eight instead of 1 to 9.

  • Interesting choice.

  • But in now that I know it, I won't spend a lot of time being very perplexed on on a couple of things going into discovered before.

  • That is a good thing to score before him.

  • But now the next time I make the next thing like one of the things that I learned a lot from a developer was working with Haskell.

  • Haskell has this very strong type system, and it's all about transformations of types, right in in the beginning, I was fighting a lot with that today.

  • I would I really like that.

  • Obviously, I didn't pick typescript on anything, so I'm not gonna do anything that really deals with types, But I am going to stop from thinking, okay, how do I want data to flow down through this application?

  • Right.

  • So I know that I'll end up with with, like an edge that has some kind of Sudoku board, and that board has some rose.

  • And those rose has some fields in them that has a number that's either read only number that came from the from the castle or none read only number that came from the use of right.

  • So I want to think off the bed.

  • Okay.

  • How can I How can I take this and generate something that that that comes with a data structure that in in that that I can work really well with?

  • And how can I write, write like JavaScript effectively?

  • It's a question.

  • So I'll start by just generating the roar in Sudoku in I've just seen in my little red ripple that make puzzle seems just right.

  • So all that gives me it's just like this long array with no structure whatsoever, right?

  • Like that's not really what I want to work with.

  • And I want to work with him just like now.

  • They don't have added anything with a type system can least like document a little.

  • I like the attention to detail is going on here, here, here, here.

  • I'm assuming that because you're scared of shipping yourself up later.

  • A cz much as anything else.

  • Yeah, yeah, And it's because I think that this is so fundamental.

  • Like just thinking about the right data structures Really, really helped.

  • So So what I'm thinking is that I'll have an array off off Rose.

  • And if this is Haskell is really all be types and stuff, just like we had our object, right?

  • Like if in which typescript I might even turn it into class, it's ready.

  • So each of these so so probably l half like actually a base optic that has some roast in each of those rose will be an object that has some columns, I guess in.

  • And then each of those columns in this case, one thing I quickly found out I want to have it like the road i d and the column ideas.

  • So we know what we're working out.

  • I wanted to have the actual value, whatever it is, right.

  • And then I wanted.

  • And then I went like a read only property in that tells was like, Is this a pre filled value that the like?

  • They can't be changed?

  • Or is it something that can be changed?

  • Right, So so This is probably an okay start for, like, the data structure gives me for which I would actually at one thing, I would add also here and index, that just gives me a key.

  • Because I know in later on when when I'm building out this this white tree, which is really the way you should think about react right?

  • Like you have, like, a rude element.

  • And then you have data just flowing down through a three of components, right?

  • I just know that I'm gonna want peace for each roads that states the same for efficiency and so on.

  • Right.

  • So I know this is kind of like the initial data structure I want to come up with, and then I could do, like, normally Oh, do all kinds of fancy functional maps and so on.

  • But let's do something really basic and see OK, so we want some result in that has some rose at scenery here.

  • And then for a it's just do a completely Syria nine, right, 11 pipers in one thing that could be a little confusing with with your sixes that counts.

  • Doesn't really mean that something is frozen.

  • It just means that It means that I can't reassign this variable, but I can still mutate.

  • I didn't know that.

  • Is that right?

  • I didn't.

  • I might choose to use the lead, but I think my Linder sendings right now will complain that rug.

  • So we have this nine times 900 right?

  • Then we're just gonna using the very basic I N g.

  • Yes.

  • Yeah, and the world friends.

  • And then this column, it's gonna be something that has, like, the role is the rate, and then the value will be actually think I'll extract the value out here Clear will be the raw one.

  • And then if I'm right, it will be like I times nine to sort of navigating their rewrite like doo doo doo.

  • Okay.

  • Yes, yes.

  • Plus gay, right?

  • If I'm right, it's a team right to you.

  • Think way.

  • If we say if we have this, if we take our little rebel right that you used to play around, right?

  • So if we have raw and we say OK, we have the first column in the first ones like zero times nine plus Cyril, right?

  • They will give us the first.

  • Yeah, yeah, Let's see.

  • +123456789 So if we had, like, still the first row and nine off, that didn't give us the right immediate 12 Okay, Because it's actually one okay?

  • Yeah, actually, yeah, because we're going from Syria tree.

  • So that's good, right?

  • And then if we have the second element on the next row, that would be something like this.

  • I know something like this, you know, before Kate.

  • So it seems to me Oh, dress them in.

  • I'll say this looks good and then read only right now it's actually a symbolist.

  • If the value it's not No, exactly.

  • Then it's a pre field field setting this at the moment I got you.