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.

  • So yeah, and then at the end of this to make it useful, we should really return it.

  • Ups going on.

  • Okay.

  • In.

  • We have a problem.

  • Still, we should actually do something with this column, and Okay, here we go.

  • Let's see.

  • Complaints that were actually using this right makes sense because we're not using it using it.

  • So let's start by just this.

  • I know this like, um, offense in yours in text for this now, but in Dagestan, do what you do.

  • We oh, come get familiar with confidence first and don't worry in.

  • So let's say we set the state and we just sit this your cocoa too generated Sudoku.

  • And now we have some state.

  • Okay, great.

  • Next job.

  • Let's actually display something.

  • Yeah, that would be lovely.

  • Is always a nice moment when something appears on the screen in.

  • So let's see, let's create a Sudoku board.

  • Yes, in.

  • I'll do that by Let's create a component folder in an ad, a sudoku or there Just get to spoil a plea in there.

  • Okay?

  • And let's let's start with their really?

  • Yeah, with the most basic proof of concept, that would be something like, Yeah, this this should at least show us if we're doing anything.

  • We will need to actually go when import our component.

  • Great way.

  • Have a bunch of stuff finished because the rest I mean everything else when this one is basically just, let's see, let's start by then, like now, now, my really first goal, right?

  • And I really like to write, like, work and small, achievable goals that I can get towards him that gets me something right.

  • You know my first goal should be to displayed like and the empty sudoku on the screen.

  • We'll make a course that yeah, yeah, so we know it's just this will savor some typing.

  • Just stick track this, Doku and say OK, we have a local and then we'll want to hear Sudoku Rose map.

  • So we'll just met over each of these Rose and for each row will make a deaf we'll give it like last Ni roll Sounds reasonable.

  • Yeah, well, by that well And then for each of these rose, we sort of have a set of columns Europe's We should also react like complain.

  • No, no, now it's really nice that I had this index straight because now we can keep it more efficient and he will.

  • And then here I think what we actually want here is sort of like a field right that that allows us to do input and so on.

  • So I'll make a new component for that and call it a field.

  • I know it's a little weird.

  • The column field.

  • No, it is acting weakens me when we can live with anything.

  • And so I will do this and I'll use their this column.

  • Actually, maybe I like to the Colts field here, even if gets the column, sort of Sure, sure, because then we have, like, the roll index and the column in dates, and that makes sense.

  • And we also have mmm table and let's do this.

  • Now we need to actually create yep, fields.

  • It's too short piece.

  • It's Yeah, yeah, And then we can think about how do we want to render a field?

  • It could be like form static Could be a C C.

  • It's just an importer.

  • Sure.

  • Last name, Field in value, which is the Let's do this again, just be like this, right?

  • And then we can even sit.

  • Should be read on Lee.

  • I actually react this via school.

  • It's reminding me, let's like some reason up piece that would trip me up every single time.

  • I think.

  • D'oh e.

  • Coli.

  • Okay, so we still need to actually import this one.

  • So this is really nice to you while you're doing this and you're working away.

  • Since you've got a build running, which is like building your code compiling and doing, you know, keeping everything refreshed.

  • You can actually, even without switching context.

  • You think going red or no?

  • Okay.

  • So hole, it's not OK.

  • We rename its feet.

  • So So, yeah, Constantly getting this feedback right with your shelter.

  • Just write again.

  • 10 years ago, This first notice and of course, cults.

  • It's not a function.

  • It's what I want to do it.

  • Smith, over the court.

  • Okay, okay.

  • Is this is starting to look like something great, like, Let's go big and just tweet this.

  • Is this a little bit?

  • Yes, you you got.

  • It's not even just a list of things.

  • It is a grid.

  • And values are going in the right places.

  • Yes.

  • So that's what that feels like.

  • A big step to me.

  • Yeah, you know, Yeah.

  • If I was really good, I would like, make it.

  • Oh, this is already starting.

  • Let's give this hit her a little more.

  • Maybe.

  • Hey, way.

  • You maybe make those numbers a little larger.

  • Yeah, in and actually like, let's make its two fronts.

  • It's going to look like something.

  • And then let's take all the reader only ones and let's see when then when it's the one you winter.

  • We make them like a little, you know, light and then when it's the read only one we make in.

  • Let's see.

  • Okay, now you know we have something resembling a supergroup board.

  • At least raise like.

  • So that's a that's a stop.

  • Ideally, I mean that that's sort of we can treat that later, right?

  • Like ideally, we also wanted to put some December 9 green, my ninth grade, a swell right again.

  • This mean for something?

  • The task like this, where the bigger part of this is the logic in that reality, it feels like that's the Yeah, that's the place to go first, then weaken.

  • Precise is right.

  • This is a really typical first like banality.

  • Okay, I have something now, right?

  • Like, you know, some of the things that if, for example, like appear right, it's pretty obvious that this is not gonna be the right place where this function should should live.

  • That's something when I'm, like, starting out getting something working, getting out.

  • I often really like just putting something in the same file assignment in right because it is in one place logically and because that's like most traveled refectory in the world ever to, like, put that into its own little component pull it in.

  • Right?

  • But right when I'm just playing around it, it's become a bit of a stream of consciousness, is thinking of doing it all in one place before year, going up to my eyes, Things make tidy hands up and get them, Get them reflected, cause, you know, you're actually gonna push this at this moment and this is something I've bean.

  • I've been walking around the teams during the day and seeing how they've been working since there many people working together, it was really nice to see that people have fairly quickly reached the point that they're sharing code together in a repo and they're sharing progress.

  • So as different people are making, making commits, they're pushing.

  • Pushing them up to the project is rebuilding in exactly the same way that you know you're doing now on people couldn't share the progress.

  • They can see how they're getting on, and it's it's living and breathing right from the outset.

  • Eso is really nice to get to share these results and get them get them on a on a girl.

  • Yeah, I really agree, right?

  • And just I mean, if I was a bit more of a demo even with full requests?

  • Sure.

  • Yeah.

  • Now your team of one.

  • Yeah.

  • Yeah.

  • You're not helping, I e Well, I just pushed this live in grand.

  • Anyone following you in a moment be able to actually go to supercool Ugo and get a random sudoku.

  • Right?

  • So now we should maybe start figuring out like you should probably not be Oh, yes.

  • Thinks like this.

  • And that should be Cem Cem indication of where you're at.

  • And so just each time you refresh the page is that giving you a new suit?

  • Joker?

  • Yes.

  • Since yeah, because we have been generated.

  • Yeah, in the construction of that right, We're just doing it.

  • Generates to your question now, we actually already have a public facing like Sudoku generator under whip, right?

  • Like that took a lot longer.

  • T Yes.

  • Yeah, this'll half a now.

  • Yeah, and we gotta come a long way.

  • Yeah, precisely right.

  • So So let's Let's think about.

  • Okay, now, now we start having data trailing down, right?

  • So this was really want to talk about Okay, make make this data structure of think about how it's structured so we can easily have it propagate down a tree of your own and dried.

  • And we have this very lucky kill three like system.

  • Now Now, of course, when when I do it, it's here and so on, Right?

  • We need to be able to have data traveled back up, propagate up.

  • So in here in our field, I think will already see the console.

  • This thing.

  • Hey, why are you sitting a value when that snow And why are you not having, like, any cold backs on your field?

  • So first, to make this one a little heavy will do this and we'll have values that No, no.

  • And then it seemed like, Yeah, why don't you have a non change handler?

  • Because you're setting a value.

  • But you're not sitting in here, so we should, ofcourse sitting in.

  • So we want to do some one change in, Let's handled change in and it's change a little and handler here in and which you probably just see.

  • So now, now we're starting to to assume okay, like since we're not gonna be using any fence, estate management or something which is gonna be propagating just stayed up and down in reacting.

  • This is something that you could do with, like, hopes of reduction and so on.

  • But I like setting this really understand and then unchanged.

  • What we want to do is that we want to take their their current field, and then we want to update the value it to be a new value.

  • Now, we probably want to clean up that value a little bit.

  • So we want to see okay, that value way.

  • Want to make sure we kind of pass this intern integer even if it comes from from from each of these fields, those will be strength.

  • We type in writing, just barely rapes moving.

  • But But we want to keep like again.

  • We want to think it's if we had a type system, right?

  • You think?

  • Okay, the value should definitive not sometimes be a string and sometimes be an integer in.

  • So when I propagate up this value now, here we have, like, a problem because what if the value is sexually empty in Yes, in.

  • So what if it's just in history?

  • Anything.

  • We just want to accept that and otherwise we want to try to pass it into an inn.

  • This, like this, is like a no case that now we can propagate this up.

  • So now we should pass down some handlers.

  • So here we want to pass down here.

  • We actually probably just wantto assume, because the good thing is that with the data structure we had, right, like if we go back and look at the little dog I put here, every single field has, like, the row and column and so on, Right?

  • So So when we get, like, an updated value here, it's it's easy to at the very top level, go in and find the right field to actually it.

  • So here we can just assume that we're getting passed down some of intent lor and see on Jane to something like that was the way they called it.

  • Yeah, yeah, yeah, this props unchanged yet, So we'll just assume here that we also has, like, an unchanged handle a pest in your in.

  • And then we should actually right in Chandler in that we can pass in here, right?

  • It's amazing to see how quickly it pays dividends.

  • Just when you were like thinking about your data structure, you might kind of sketch that somewhere.

  • You might what would it be putting it right there in the code.

  • This would also be kind of shared around if you were working with someone else came and you and you can refer back to that thinking.

  • And it's kind of it means not just the process of writing that helps you internalize it.

  • But also, we've got that reference straightaway.

  • And you, bean, you mean making use of it right away.

  • So now, Now I know I have this right and get this change and yeah, it hasn't called in something right.

  • And I should do with some kind of this sit state within your state.

  • But this is where this is where it quickly feel like, Oh, that's a lot of state to handle.

  • If it's, like, all mutating and like, how do I make sure there's not some weird conditions going on?

  • Unfortunately, the other day, and Shawn, weighing from from our team, wrote this great post on our block about Emma, which which is really, really cool library.

  • So?

  • So when it comes to another inspiration from from sort of Haskell World and so on, is this whole idea off immutable data structures, right?

  • Like and of having data that doesn't change and you take, like, one value.

  • And then you take a new Well, yes, you don't your own changes the progression of the value of something here.

  • Yeah, it's always like a transformation from one set of values to another.

  • Right?

  • And m R is a really cool like they have some great negotiations off this kind of you transformations.

  • But it's a really cool way off, off off, doing it in, raced with without really having just to learn, like immutable Gaius some different kind of data structure or anything like that.

  • So now I feel added him, er, and then I'll import when you see how they did import produce from Emma in.

  • And then we'll do a little trick here, so we'll see.

  • Okay, produce from this air.

  • Let's see if this words basically the way in more dust, notice that it has this little producer take some initial state and then it and then it returns in F function for updating that state.

  • And inside that function you can pretend that the state is mutable, but everything ends up being in immutable.

  • Nice.

  • Let me just first see if I if I'm breaking everything.

  • Now I can see that some defensively missing.

  • Yeah.

  • No.

  • Undefined, I think.

  • Julie?

  • Yes.

  • Here we go.

  • Okay, so now we're back again.

  • We have exactly the same state with the difference that emerged in my turns.

  • This into a sort of proxy object and center.

  • Now, this status so beautiful, I can't actually accidentally change it.

  • And this means that she and my in my handle change, right?

  • Like on the outside, they'll have some good example off fusing instead of this traditional way of thing.

  • Okay, Now I need to, like, sort of unpack this whole object and put it together again.

  • If I can just call produce and take the state, modify it and em.

  • I will handle that hold so I can go in here and sees its state and say, produce and then take a function that takes the current state right?

  • And then it just it just going to take it in here.

  • That's actually organization.

  • But it's not.

  • It's not that painful.

  • So we have these rows.

  • And then from our element, we have, like, the roadie, and that will have some columns.

  • And then we'll have a call.

  • I d and that will have a value that now we want to update.

  • Boom, Let's see tips.

  • I can do things and I can't type now I can see you can type in.

  • Yeah, right, Right for those that don't get seat.

  • I'm desperately trying to put the left one to my right, and I can't.

  • I can only put it numbers now.

  • Right now, we already got this state of the work.

  • That's fantastic.

  • Yeah, that takes It's such a long way in such a short time we use about, I can tell you, just like again building these kind of things.

  • 10 years ago in the brass, it was so hot, right?

  • And and now now you have this really clear state obstruction, all the status just flowing down a tree.

  • It's immutable.

  • We understand where it's coming from, and so on right now.

  • Next thing I want to do is start checking if the sudoku is is has been solved or not.

  • Yeah, This is one thing I realized when I was doing like like playing around with this earlier.

  • And that is that I'm not very good at solving thing for us to spend in our building is way actually solve this in an hour.

  • Let's not do that.

  • So I'm going to cheat a little, right?

  • I'm gonna I'm gonna add a little button with an unclean and learned that thing is the flip to the back of the stoker book button so you can see the solution.

  • It's it's the way I forgot how Thio.

  • And then we're gonna make it solves sudoku handler here and And let's see so one of the things we want kind of anyway, I think in already when we when we generate our structure up here, is that actually, we probably also want to to keep the solution around because, like, way need to actually be able to verify if you're doing the right wrong, right?

  • It's no reason to keep doing that.

  • And we have this solved puzzle thing.

  • Yeah, again, I've exposed it to my little cheating ripple.

  • Right, So we have this that's so crucial in so I can do this right, and then we can see generator it solved puzzle, hustle and see things.

  • The sweet, sweet results that the same one.

  • But just with the result trade so here we'll just say generator and we'll immediately take self possible and say, OK, solve it.

  • Sure, apostle and story, that's the solution.

  • And then the other thing I would probably start doing is writing a little check, check solution or something in passing that sudoku restructure in.

  • And then we need to sort of now, Now we have thes and we kind of want to unwrap them again.

  • Yeah, probably say Okay, we have something like a candidate for a solution.

  • And then we take this to the cool rose.

  • Yes, we met over each row for you troll.

  • We take the columns, remember where each column we take the value it.

  • And then in modern jazz groups, it's like nice enough that we can just get in and just make it a flattery.

  • So now we're back and we have a structure that's the same.

  • So now we can just that again really symbol just see.

  • And then this, like a really you see first chick, which is like if the candidate in if the candidate value iss equal to an empty string way, escape out of that, Did we actually?

  • What's that?

  • No, it's actually know, All right, that we actually do that we should probably again.

  • We should keep it really strongly.

  • Type.

  • Yes.

  • So we should actually make this scene all you can say otherwise, which sometimes have strings and sometimes in all.

  • And we really owe that starting this swift Haskell, right?

  • Like conservatively miss.

  • Mix up your types, but we want to keep it really strict type, right?

  • So if it's no, then we know that way.

  • Don't need to take any of it.

  • Can read your salt yet right in.

  • Or if they value here, it's not exactly equal to the to this ridiculous tradition.

  • Then we should return full.

  • Then there's no reason to go on your more pieces, right?

  • And if we make it all the way through and we haven't returned full yes.

  • So now we have have functioned for checking a solution, and this is that this was the point where it's like, Oh, I was so so am I.

  • To the country, to someone just to figure out if that function works.

  • Ideally, I would have set up like some test suite and something like this is what I'm missing, that I would like to Maybe if I had more than an hour if if this is like reading project was definitively set up, some way of writing thistles like that would make it so easy to to write a few artists of that function and see if it actually makes it instead way will write a function to magical itself.

  • So, Chris, for us away in your ruining sudoku for everyone on in that sea, what are we gonna do in to magically solve this?

  • I guess we can run through Well, one.

  • It will run a some somehow, like, take each of these and find the right value U s.

  • So I guess we can actually just, like, do something similar and see in this stage, Doku.

  • And then just for each role, take the row and then for in the columns for each column take that one and then in here, we'll just want to see if it's not okay.

  • Actually, we will run and really make sure we do this with with our imara produce, right, Because we want actually update the state through the salt.

  • So you're right.

  • You'll be doing the same trick of saying, OK, let's take the stage inside produce.

  • And then and then inside here.

  • We can do all of these nice medications.

  • What you can't in.

  • So if it's not a read only column, they said the column value too in there's date.

  • Cool solution.

  • And then we have this same.

  • At some point, we should probably make some help.

  • A myth it to that.

  • Right.

  • But we have the same kind of local function where we see okay in call them roll times nine plus column.

  • Come, I think.

  • Is that right?

  • Well, there's a new way of looking at it right in.

  • The first thing is that well, you snore defined on light.

  • 40 here.

  • Now we have this.

  • That didn't work very well in reached because some trying to do it in the actual up gauge.

  • What?

  • See, where was century?

  • I want to do this for each room is ready.

  • So I'm just running over, you troll.

  • And I know that it doesn't look quite right.

  • Some things some something is not right.

  • Landers Also is that those zeros?

  • So we've got Is this the type that it's actually a really good point?

  • Because up here, Uh, yeah, that's a really good point in Yeah, they're sexually both points So did we ever correct?

  • I'm not seeing any serious years.

  • So we did fix it in there and make Russell Lord okay.

  • Yeah.

  • It's totally the sea rose that are creating an issue.

  • Right?

  • Notice how we're never seeing any serious again.

  • This is This is the This is a gotcha, off type on type language.

  • It's right here saying if if an zero matches Yeah, so the first thing way want to do is probably too in.

  • Right?

  • Let's see.

  • Let's see if we start getting some nights.

  • Great.

  • Also, that makes me feel more teasing the Sudoku with the right number.

  • Yeah, way.

  • Navigate around the kind of type issue.

  • The solution will always have one.

  • So that's just you see, like, this street Go.

  • You can't reproach, huh?

  • Yes.

  • Picking this.

  • Well, uh, old friend, our old friend Council lock, huh?

  • It did.

  • It did Look coming out of Europe.

  • The page, it's about what it was.

  • You know what this is?

  • It's No.

  • So uh huh Okay.

  • That actually, yeah, we can't do this because now, because the soft expect the form it the raw form it Well, so it's like a little annoyance.

  • Shame that would've felt like it was going to such a tidy solution.

  • Yeah, Yeah, that's a shame, but that that that this mean that we might want.

  • And it's awfully annoying.

  • Okay, I'm gonna do a quick.

  • Okay.

  • Okay.

  • Now, Now we have this and still something way are saying nines now as well.

  • So we're seeing nines now, right?

  • Like now, it's probably just this mapping off in off rows and columns that are somehow off right when we when we see.

  • Okay, let's solve this.

  • Yeah.

  • And what is it again?

  • This is where it's a sweet life.

  • Yeah, absolutely.

  • A lot easier.

  • You didn't.

  • Mmm.

  • So this is the state before in the solution.

  • So the solution here, 3 17 23 62 And then it's something something related to not just giving these read only or something like that.

  • Okay, Okay.

  • Now we know we have to solve it medically, but in Okay, So there was this time.

  • Now, now we Now, now, now we know we can.

  • We can solve these ludicrous very fast in.

  • And now we can start saying Okay, whenever we we handle this change, we should also have some function too.

  • You check to see if it's old.

  • Um, yeah, something like that.

  • Right where I'm just going to see.

  • Okay, First of all, I'm probably gonna introduce like it's solved.

  • We could even way gonna introduce some We could say like, Okay, appear when we create this riddle room, maybe we want to say, OK, we have these roads.

  • We have this solution if we have the start time, which is a new age, because we started No way.

  • Hey, so many were precisely precisely.

  • Okay, So we have a start time in the soft time, right?

  • Then here in.

  • Okay, this is this.

  • It's all the same, then in.

  • And then here we can see.

  • Okay, if first of all we we can we can start by checking, because if we've already salted, would you just never be worrying about that?

  • What if if it's solved, and if we don't have a soft time, we can see Okay?

  • Called it up here.

  • Check solution.

  • We can piss in actually realizing that will probably want this to be a part of our state change here, and that wins.

  • We don't really want it to be a handler because we'll get some real race conditions.

  • Everyone just pets in estate we can check against.

  • Okay, so we're gonna see Okay.

  • Is it Is it gonna be so in?

  • It's that by seeing up here, it's this suffering.

  • Like before we extracted studio later.

  • And I am.

  • He's now, in theory, we should start sitting a soft time if the sudoku has been sold.

  • No way of passing this end.

  • So maybe in here now aboard, we can go in and see in who didn't quite work.

  • Uh, actually, yeah, that's that's a curious effect, and it's no okay.

  • See why we didn't solve it in much again?

  • It actually detecting if it had been sold, just just the reporting of it.

  • Quite so basically here we should be checking if it had been solved.

  • And I mean, that is the function we haven't quite dejected worship.

  • So we again, this is just a happening Cool.

  • It's not right, right?

  • It is our handler.

  • Running is our change, hunger and even firing.

  • And that I do think it is.

  • It's double check.

  • Yeah, and it's probably people screaming at you that way.

  • So it's obviously the condition here in Oh, they're in power in that cysts that the salt time in So up here?

  • Yeah.

  • This is because we're setting the salt time should keep it.

  • So they'll be this weird thing where I need to go into it.

  • And now we detect Okay yourself.

  • Okay, so that's so that so That's great.

  • Then, while we're not solving it well, obviously want to show some kind of time or right?

  • Right.

  • So let's make a little timer.

  • It's in a company.

  • Let's figure out how time or shoot behave.

  • It just don't feel pretty pretty complete in terms of the functionalities that point, I think populating it will be a check to see if it's solved.

  • Yes, and change Chandler's Thio watch for the entry even though we're cheating, Thio populated.

  • But wait, that's saving us.

  • Their effort will be reported it sold or not.

  • And if we if this time is updating as well sounds like, it's, ah, that's gonna be good to push, and he just pushes that time.

  • So typically in the timer, it's useful to have some states that hiss maybe latest second set lips to starting its hero in and and let's see, forgetting the new fence your life cycle methods, but we'll just do this.

  • Winded mounts will seize it and just keep some Let's do it and see just good old JavaScript sitting and go sing using sits.

  • They just see a a leftist is.

  • Now let's see how we do it.

  • I'm expecting to pass in a start time.

  • That's a date.

  • So we'll want to see.

  • We'll want to take the time right now and obstruct the time date.

  • And then this is gonna be milliseconds.

  • So we want to get it in seconds.

  • And then, I mean, I love the optimism that we're gonna be reporting this in seconds.

  • I was thinking, like like, days or serious sudoku solvers, right?

  • Like this is hot.

  • Okay, now we have this time was that we should probably try to show it something you We also ought to do What components?

  • Well, unwound or something.

  • You say this'll ce terrell or something like that to make sure we don't keep that even to Lisner hanging.

  • And then here No board we can import a timer so good in that, I just I just fulfilled my value.

  • Is the pair that Yes, that's my contribution gate.

  • So we only when it's joellen when we don't have the final time, right?

  • I think we called it, You know, we go nice.

  • We have a time having a time, right?

  • Well, it and then here in the result, like so maybe we should actually make that a little component itself and say OK, we have some little results.

  • Confirm that will show what?

  • What happened?

  • A key.

  • And then we'll return little thing here.

  • But what I want when I want to do here is something similar to the time I want to get that elapsed time, right?

  • So?

  • So in the result, we will have.

  • We'll have food right now.

  • I'm just gonna pit and then we'll want to have like it laps to be in same calculation, right?

  • I wanna take this Trudeau cool a solved time and take it in milliseconds and then distract.

  • It's that time and we'll learn on then it's good and let's get it on the board.

  • It's the excitement.

  • Isn't it horrible in slow type?

  • I know you know, in general, honestly, right, Like, it's it's ah, and I'm super like some people reall

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.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

CEO會碼字?看Netlify的CEO週六晚上在酒吧裡從頭開始碼數獨應用。 (CEO can code? Watch Netlify's CEO code a Sudoku app from scratch in a bar on a Saturday night)

  • 4 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字