Coding

CEO can code? Watch Netlify’s CEO code a Sudoku app from scratch in a bar on a Saturday night

  • 00:00:00 in addition to everyone who's building
  • 00:00:01 things here over the course of a couple
  • 00:00:03 of days
  • 00:00:04 we asked Matt if you'd build us
  • 00:00:05 something in an hour which that was that
  • 00:00:07 was a nice surprise right let's just say
  • 00:00:10 it was a surprise it was a surprise okay
  • 00:00:12 the nice part we'll wait and see and so
  • 00:00:14 we're gonna give that a try now we'll
  • 00:00:16 we'll see how we get on and we've got an
  • 00:00:18 hour to see you know what the process is
  • 00:00:21 what you dig through we'll we'll work
  • 00:00:23 through it together yeah it'll show up
  • 00:00:26 your your typing and talking skills well
  • 00:00:30 an hour of me cooling stackoverflow and
  • 00:00:33 making typos pretty much I did cheat a
  • 00:00:36 little and spent some time today
  • 00:00:38 prototyping what I'm gonna be working on
  • 00:00:41 just so so I'm not gonna stumbling
  • 00:00:43 around completely blind okay but I
  • 00:00:46 didn't let's let's see how it goes and
  • 00:00:49 if I still remember how to write code in
  • 00:00:51 between your Co II okay so in should we
  • 00:00:56 move so first of all can we can we show
  • 00:00:57 map screen we are we showing map screen
  • 00:00:59 at the moment yeah okay great so now
  • 00:01:02 there's no escape now Matt there's left
  • 00:01:06 so so if you're watching my screen
  • 00:01:08 you'll see that I'm doing this a little
  • 00:01:11 boilerplate that we made a little if I
  • 00:01:13 comb to create react Atlanta and
  • 00:01:17 basically it I think by now pretty much
  • 00:01:19 the far majority of people watching this
  • 00:01:22 dream will probably know create react
  • 00:01:24 app as being sort of their the really
  • 00:01:26 common starting points when you react
  • 00:01:28 applications in and I really this just
  • 00:01:32 gives me will see if I even get so far
  • 00:01:34 but this gives me the ability to write
  • 00:01:36 some server-side code during during
  • 00:01:38 during this stream okay in and I think
  • 00:01:42 it's just one of these things that I
  • 00:01:43 also talked about earlier in the live
  • 00:01:45 stream in how how how great it is to
  • 00:01:48 just start getting a basic flow setup
  • 00:01:52 before we actually start building our
  • 00:01:54 our app then that supports what we are
  • 00:01:57 going to build right now so in terms of
  • 00:01:59 what we're going to build the next thing
  • 00:02:02 I've given some thought to write in what
  • 00:02:06 do we call it in got any good name
  • 00:02:09 suggestions for super cool challenge
  • 00:02:12 yeah yeah that's not so come on
  • 00:02:17 [Music]
  • 00:02:19 Sudoku stack velcro stack okay okay so
  • 00:02:23 that's gonna be in the Louisville I get
  • 00:02:25 in the new repo in so basically what
  • 00:02:29 this deploy button does is that it sets
  • 00:02:31 up a new repo and there's an initial
  • 00:02:33 deploy of create react app and make sure
  • 00:02:36 I just have like a complete continuous
  • 00:02:38 deployment process to true globally
  • 00:02:40 distributed network and and they you
  • 00:02:43 know me a slammed the integration and
  • 00:02:44 all of that stuff and basically what
  • 00:02:46 what what I thought would be really fun
  • 00:02:48 to do for sort of an hour-long challenge
  • 00:02:50 is that back about ten years ago in when
  • 00:02:56 I had moved to Spain from been mark and
  • 00:02:58 and I was still at the time working as a
  • 00:03:00 music journalist in Denmark and and was
  • 00:03:03 starting to figure out that I was gonna
  • 00:03:04 stay in Spain and that there wasn't a
  • 00:03:06 lot of work in working as a writer
  • 00:03:10 covering music in Danish especially not
  • 00:03:14 when it was like contemporary classical
  • 00:03:16 music and and weird yes
  • 00:03:17 in Danish in Spain yeah yeah I liked it
  • 00:03:20 it was a surprise at the time but but it
  • 00:03:23 turned out that it just wasn't that high
  • 00:03:25 demand in something's wrong with the
  • 00:03:28 world but but that's how it was right in
  • 00:03:30 okay but back then I want one of the
  • 00:03:34 things I just started building or soon
  • 00:03:36 was was this is pseudocode challenge and
  • 00:03:40 so I built this challenge where you
  • 00:03:42 could like go to a webpage you could get
  • 00:03:44 us sued aku you could solve it on time
  • 00:03:46 and then you could send the mail to a
  • 00:03:48 friend with the same Sudoku and and
  • 00:03:51 challenge that person to like see if you
  • 00:03:53 can beat my time but in fact then that
  • 00:03:56 was like a pretty big project actually
  • 00:04:00 if it was back in in the early days of
  • 00:04:03 rails right and and everything was if
  • 00:04:09 everything was was server-side and so on
  • 00:04:12 when rails app wasn't it wasn't the easy
  • 00:04:14 right and just just the whole story
  • 00:04:16 around like the browser and JavaScript
  • 00:04:18 was really different years ago right so
  • 00:04:21 so even just the concept of like okay
  • 00:04:23 how how am I gonna me
  • 00:04:25 and interactive UI for Sudoku singing in
  • 00:04:28 a browser it was much more peach based
  • 00:04:31 of like having all these forms and
  • 00:04:33 sending it to a rails controller and
  • 00:04:35 rendering it response and so on and of
  • 00:04:37 course all all the pseudocode generation
  • 00:04:40 in I I had to come up with a way to do
  • 00:04:43 through this I found this old repository
  • 00:04:45 I made back then like 10 years ago right
  • 00:04:47 this is the one to say original so this
  • 00:04:49 is this is an a version of it that I
  • 00:04:51 wrote in Group E so one of the things
  • 00:04:53 that was a constraint back then was that
  • 00:04:54 this had to run on my server during the
  • 00:04:57 redwood quest and and service are
  • 00:04:59 smaller back then and ruby is kind of
  • 00:05:00 sad and deployments were really hot yeah
  • 00:05:03 so I actually also rewrote this and see
  • 00:05:05 that's a ruby extension just to get the
  • 00:05:08 performance for for generating these
  • 00:05:10 these rubies so this is like a DLX based
  • 00:05:13 on but it's like based on an old day in
  • 00:05:15 computer science paper by Donald Knuth
  • 00:05:18 around an algorithm called dancing links
  • 00:05:20 in that really like if someone wants
  • 00:05:23 like some mind-bending fun go and read
  • 00:05:26 that paper image and and do the logic
  • 00:05:28 and and see why it's called dancing
  • 00:05:30 links and visualizer and a lot of fun
  • 00:05:31 but like again one of these things
  • 00:05:34 that's that's changed now right from
  • 00:05:36 from back when I when I had to do it
  • 00:05:38 that way yeah it said today we can maybe
  • 00:05:40 just go on NPM and then we do with like
  • 00:05:42 pseudo coup and we get like oh there's
  • 00:05:45 like NPM gaya / pseudo code that's a
  • 00:05:48 relief because I was worried yeah and
  • 00:05:49 it's been the next our hindrance anyway
  • 00:05:57 right but now I can just like NPM pseudo
  • 00:06:00 cool makes Indonesia yeah it's a little
  • 00:06:03 like kidding but that's that's the
  • 00:06:05 resources we have medicine that's what
  • 00:06:07 it's all about now right like so so what
  • 00:06:09 have you been to while you were talking
  • 00:06:10 you yeah you do so basically I set up my
  • 00:06:14 locale devera development environment by
  • 00:06:16 like what what what net if I did for me
  • 00:06:18 was setting up like this new website it
  • 00:06:21 has its own URL if anybody deployed if
  • 00:06:24 anyone is fast enough to capture this
  • 00:06:26 URL from the lime stream you can go
  • 00:06:28 there and follow along
  • 00:06:30 it's a dist yeah and it also created a
  • 00:06:34 new repository so again if anyone
  • 00:06:38 goes to kill men in its the other test
  • 00:06:41 is spelling my name right and then dr.
  • 00:06:44 stack you you can actually find the the
  • 00:06:46 source code I'm working this is what
  • 00:06:49 this is yeah this is what was cloned and
  • 00:06:52 then I just downloaded it and ran a yawn
  • 00:06:55 to to install all of the internet
  • 00:06:59 locally right and and Yanis even it's
  • 00:07:02 nicer than npm in that it actually since
  • 00:07:04 i practiced this a little before it
  • 00:07:06 realized that and it seems really
  • 00:07:10 surprised how fast it was nice
  • 00:07:12 so by this stage then you've already got
  • 00:07:14 your continuous integration setup got a
  • 00:07:16 site yes configured on that the fire
  • 00:07:18 that's watching a repository and you
  • 00:07:20 also download clone that repository
  • 00:07:22 locally so you've got a local
  • 00:07:23 environment CI environment
  • 00:07:26 yep city everything right and and i can
  • 00:07:28 here in the local repository I just did
  • 00:07:32 a yawn yawn at pseudo cool right like so
  • 00:07:34 that was what took me like it back ten
  • 00:07:37 years ago then I spent like a month
  • 00:07:39 implementing tunnel clearance dancing
  • 00:07:41 links and everything and transpiling it
  • 00:07:43 to see and now I just died young at do
  • 00:07:46 you really you realize that this was
  • 00:07:47 around 10 years ago though Matt do you
  • 00:07:48 not realise this and then I just ran
  • 00:08:01 yawn stat right and that's again one of
  • 00:08:03 these awesome things that that that now
  • 00:08:06 as soon as this whole server spins up
  • 00:08:09 and gets done building the initial build
  • 00:08:11 plane I just have this awesome
  • 00:08:13 Google local environment and we can
  • 00:08:15 start hacking away right in so this this
  • 00:08:18 demo obviously has little craft that we
  • 00:08:19 don't really need don't need some big
  • 00:08:21 react local do show pseudo code
  • 00:08:23 challenges I don't need a lamp that
  • 00:08:25 anymore let's get rid of this logo let's
  • 00:08:29 say having each one because I like
  • 00:08:32 having an each one on a pink bra though
  • 00:08:36 getting cheerleading from the plain old
  • 00:08:42 dog who stick here we go
  • 00:08:45 bang cool so we're spinning we have a
  • 00:08:49 name I think we'll need
  • 00:08:50 the header to be a little smaller it has
  • 00:08:53 like some big viewport wildenstein let's
  • 00:08:58 just get rid of that and do like a
  • 00:08:59 padding no fear I'm kind of interested
  • 00:09:03 to see that very quickly you're starting
  • 00:09:05 to work on the design of this as well
  • 00:09:08 I'm very much like instant gratification
  • 00:09:11 how can we best get something quickly
  • 00:09:13 that has something it's like totally him
  • 00:09:16 and especially when I'm trying to turn
  • 00:09:19 our project you'll also see me there's a
  • 00:09:23 bunch of stuff I would do differently
  • 00:09:24 from it for me like your project I had
  • 00:09:26 more time don't really think about like
  • 00:09:28 hey maybe I should use typescript right
  • 00:09:30 totally look into how hooks works to do
  • 00:09:33 things that way yes there's a bunch of
  • 00:09:36 stuff right but but when you I'd like a
  • 00:09:38 hackathon and you want to actually build
  • 00:09:40 something then I just find it it's
  • 00:09:42 really good to just rely and stuff
  • 00:09:43 you've done
  • 00:09:44 yeah build with what you know discovery
  • 00:09:48 no and and and split your time a bit
  • 00:09:50 between the time that's like hey now I'm
  • 00:09:52 learning new tools and experiencing and
  • 00:09:54 now I'm actually trying to get something
  • 00:09:57 was working right don't get it get it
  • 00:09:59 get it out there right source solace
  • 00:10:00 right now I'm very much and get
  • 00:10:02 something working mode right so the
  • 00:10:04 first thing I'll need to get anything
  • 00:10:06 working is to figure out how how the
  • 00:10:07 hell does this thing work and they it
  • 00:10:11 apparently has to make puzzles right but
  • 00:10:13 we need to sort of figure out what what
  • 00:10:14 does that make puzzle version do one of
  • 00:10:17 the things that I love in coding is the
  • 00:10:19 a very ripple idea I'm right like the
  • 00:10:21 runt run to run eval print loop there's
  • 00:10:24 this sort of brought forth and the
  • 00:10:27 browser to date this comes with an
  • 00:10:28 awesome one of those so my first aid
  • 00:10:32 really ugly dirty hack to get a little
  • 00:10:34 bit of it will be to import this
  • 00:10:36 generator from pseudo cool and then
  • 00:10:40 instead of using it for anything else
  • 00:10:41 you say like this is this is nothing
  • 00:10:44 don't try this at all I'll just expose
  • 00:10:48 it on the window update
  • 00:10:52 let's make a puzzle here we go Oh yummy
  • 00:10:56 ruin running right in so this was one
  • 00:10:58 thing that when I was / diving earlier
  • 00:11:00 it it it couldn't like it took me a
  • 00:11:02 while to figure this out and not be
  • 00:11:04 really really confused by it so it just
  • 00:11:07 to recap like a pseudo coup it's always
  • 00:11:10 like it's this grid like typically nine
  • 00:11:12 by nine right and then each row has to
  • 00:11:15 have all the numbers 1 to 9
  • 00:11:17 each a column has to have all the
  • 00:11:20 numbers 1 to 9 and each square that's
  • 00:11:22 nine by nine has to has all the numbers
  • 00:11:24 99 right in and if if we look and again
  • 00:11:28 this took me a while to reach I noticed
  • 00:11:30 right but if we look at what this
  • 00:11:31 specific NPM module outputs
  • 00:11:34 there's only zeros in here right so for
  • 00:11:37 some reason the author of this generator
  • 00:11:39 decided it was nice to have the number
  • 00:11:41 zero to eight instead of one to nine
  • 00:11:45 interesting choice for them now that I
  • 00:11:48 know it I won't spend a lot of time
  • 00:11:50 being very perplexed and on a couple of
  • 00:11:52 things to discover that is a good thing
  • 00:11:55 to just go before him right but now the
  • 00:11:57 next time I make the next thing like one
  • 00:12:00 of the things that I learned a lot from
  • 00:12:01 as a developer was working with Haskell
  • 00:12:04 for a while Haskell has this very strong
  • 00:12:06 type system and it's all about
  • 00:12:08 transformations of the types right in
  • 00:12:11 and in the beginning I was fighting a
  • 00:12:13 lot with that today I would really like
  • 00:12:15 that obviously I didn't pick typescript
  • 00:12:18 than anything so I'm not going to do
  • 00:12:19 anything that really deals with types
  • 00:12:20 but I am gonna start from thinking okay
  • 00:12:23 how do I want data to flow down through
  • 00:12:26 this application right so I know that
  • 00:12:28 I'll end up with with like an app that
  • 00:12:31 has some kind of pseudo keyboard and
  • 00:12:32 that board has some grows and those rows
  • 00:12:35 has some fields in them that that has a
  • 00:12:38 number that's either a read-only number
  • 00:12:40 that came from the from the puzzle or a
  • 00:12:44 non read-only number that that came from
  • 00:12:46 the user right so I want to think off
  • 00:12:48 the bed okay how can i how can I take
  • 00:12:51 this and generate something that that
  • 00:12:53 that comes with a data structure there
  • 00:12:56 dim in that that I can work really well
  • 00:13:02 with
  • 00:13:03 and how can I write right like
  • 00:13:05 JavaScript that activity is JavaScript
  • 00:13:07 it's another question right so I'll
  • 00:13:10 start by just generating the raw in
  • 00:13:13 pseudo Kuen I've just seen in my little
  • 00:13:15 rate ripple that in meek puzzle seems
  • 00:13:19 just do that job right
  • 00:13:21 so all that gives me is just like this
  • 00:13:23 long array of no structure whatsoever
  • 00:13:27 right like that's not really what I want
  • 00:13:28 to work with in I want to work with him
  • 00:13:31 just like now that I don't have added
  • 00:13:35 anything with the type system I can at
  • 00:13:37 least like document a little I like the
  • 00:13:41 attention to detail that's going on here
  • 00:13:43 okay I'm assuming that's cuz you're
  • 00:13:45 scared of tripping yourself up later
  • 00:13:48 yeah yeah and it's because I think that
  • 00:13:50 this is so fundamental like just
  • 00:13:51 thinking about the right data structures
  • 00:13:53 really really helps oh so what I'm
  • 00:13:55 thinking is that I'll have an array of
  • 00:13:57 rows and if there's Haskell is result
  • 00:14:00 all be types and stuff just like weird
  • 00:14:02 objects right like if it was typescript
  • 00:14:04 I might even turn it into two classes
  • 00:14:06 right so each of these so so probably
  • 00:14:09 I'll have like actually a base object
  • 00:14:10 that has some rows and each of those
  • 00:14:14 rows will be an object that has some
  • 00:14:16 columns I guess and then each of those
  • 00:14:19 columns in this Chris one thing I
  • 00:14:23 quickly found out I want to have it like
  • 00:14:24 the row ID and the column ID so we know
  • 00:14:28 what we're working on
  • 00:14:29 I wanted to have the actual value
  • 00:14:31 whatever it is right and then I want it
  • 00:14:34 and then then I want like a read-only
  • 00:14:36 property in that that tells us like is
  • 00:14:40 this a prefilled value that the youth
  • 00:14:42 like that they that can't be changed or
  • 00:14:44 is it something that can't be changed
  • 00:14:45 right so so this is probably an okay
  • 00:14:49 start for like the the the data
  • 00:14:51 structure it gives me four for each I I
  • 00:14:54 would actually add one thing I would add
  • 00:14:56 also here an index that just gives me a
  • 00:14:59 key because I know in later on when I'm
  • 00:15:02 building out this this UI tree which is
  • 00:15:06 really the way you should think about
  • 00:15:07 react right like you have like a root
  • 00:15:10 element and then you have data just
  • 00:15:11 flowing down you know through a three of
  • 00:15:13 components right I just know that I'm
  • 00:15:16 gonna
  • 00:15:17 he's for each rose that states the same
  • 00:15:19 for efficiency and so on right yeah so I
  • 00:15:22 know this is kind of like the initial
  • 00:15:24 data structure I want to come up with
  • 00:15:26 and then I could do like normally I'll
  • 00:15:28 do all kinds of fancy functional maps
  • 00:15:31 and so on but let's do something really
  • 00:15:33 basic and say okay so we want some
  • 00:15:37 result in that has some rows etc here
  • 00:15:41 and then for just to completely zero to
  • 00:15:56 nine right in one thing that can be a
  • 00:16:06 little confusing with with es6 is that
  • 00:16:08 kant's doesn't really mean that
  • 00:16:09 something is frozen in it it just means
  • 00:16:13 that it means that I can't reassign this
  • 00:16:20 variable but I can still mutate the
  • 00:16:22 object I didn't know that I might choose
  • 00:16:28 to use too late but I think my limbs are
  • 00:16:29 sending is right now welcome
  • 00:16:37 you know so we have this nine times nine
  • 00:16:41 you read right that we're just gonna use
  • 00:16:43 the very basic ing variable yes yeah
  • 00:16:47 right and the world friends and then
  • 00:16:51 this column is gonna be something that
  • 00:16:54 has like the role yeah
  • 00:16:59 generate and then the value will
  • 00:17:02 actually I think I like strike the value
  • 00:17:05 out here because clear well be the wrong
  • 00:17:10 one and then if I'm right it will be
  • 00:17:12 like I times nine to sort of navigate it
  • 00:17:16 in there rewrite like doing doing doing
  • 00:17:18 okay yes yes plus gay right if I'm right
  • 00:17:22 this is a team right to you thank you if
  • 00:17:26 we say if we have this if we take our
  • 00:17:31 little rebel or I did you play around
  • 00:17:33 right so if we have raw and we say okay
  • 00:17:37 we have the first column in the first
  • 00:17:38 one yeah like 0 times nine plus zero
  • 00:17:42 right like they will give us the first
  • 00:17:44 value yeah then let's see one two three
  • 00:17:47 four five six seven eight nine
  • 00:17:52 so if we had like still the first row
  • 00:17:55 and nine off that didn't get right
  • 00:18:07 actually okay yeah actually yeah because
  • 00:18:12 we're going from ceará Tory yes that's
  • 00:18:14 good right and then if we have the
  • 00:18:16 second element and the next row that
  • 00:18:19 would be something like this I know
  • 00:18:22 something like this you know before okay
  • 00:18:24 so it seems to increase reading
  • 00:18:26 interesting in I'll say this looks good
  • 00:18:30 and then read only right now it's
  • 00:18:32 actually as simple as if the value is
  • 00:18:36 not know exactly then it's a prefilled
  • 00:18:41 field setting this in the moments got
  • 00:18:43 you yeah so yeah and then at the end of
  • 00:18:47 this to make it useful we should
  • 00:18:48 probably return something
  • 00:18:50 oops okay
  • 00:18:54 in we have a problem still we should
  • 00:18:58 actually do something with this problem
  • 00:19:01 in
  • 00:19:02 [Music]
  • 00:19:13 okay here we go let's see okay
  • 00:19:18 complaints like we're not getting
  • 00:19:19 actually using this right makes sense
  • 00:19:21 because we're not using it so let's
  • 00:19:25 start by just this I know this like a
  • 00:19:28 more fencing yours it takes for this now
  • 00:19:30 but again
  • 00:19:31 Agathon do what you do a computer with
  • 00:19:35 confidence first and and don't worry in
  • 00:19:39 so let's say we set the stage and we
  • 00:19:43 just sit this rule to generate pseudo
  • 00:19:46 cool and now we have some state okay
  • 00:19:51 okay
  • 00:19:51 next job let's actually displace
  • 00:19:54 something yeah that would be lovely
  • 00:19:55 I always have is always a nice moment
  • 00:19:56 when something appears on the screen
  • 00:19:58 yeah so let's see let's create a suit so
  • 00:20:09 cool for yes him I'll do that by let's
  • 00:20:12 create a component folder in and add a
  • 00:20:17 pseudo COO board there and just get this
  • 00:20:23 boilerplate in there
  • 00:20:34 okay and then let's let's start with
  • 00:20:38 fair really yeah with the most basic
  • 00:20:41 proof of concept there would be
  • 00:20:43 something like yeah this this should at
  • 00:20:53 least show us if you know if we're doing
  • 00:20:56 anything where we will need to actually
  • 00:20:58 go and import our component
  • 00:21:08 great
  • 00:21:11 okay we have a bunch of stuff finished
  • 00:21:16 authorship amazing let's see let's start
  • 00:21:25 by filing like no now my really first
  • 00:21:29 goal right and I really like to write
  • 00:21:30 like work in small achievable goals that
  • 00:21:33 I can get towards them that gives me
  • 00:21:35 something right so my first goal should
  • 00:21:36 just be to display like and and the
  • 00:21:39 empty Sudoku on the screen that'll make
  • 00:21:41 me happy or sad yeah yeah so we know
  • 00:21:45 it's just this will savor some typing
  • 00:21:49 just stick track Doku and say okay we
  • 00:21:53 have cocoa and then we'll want to hear
  • 00:21:56 cool rose map so we'll just met over
  • 00:22:01 each of these rows and for each row will
  • 00:22:04 make last name sounds reasonable yeah
  • 00:22:13 and then for each of these rows we sort
  • 00:22:17 of have a set of columns yes we should
  • 00:22:22 also react will complain you know no no
  • 00:22:25 it's really nice that I had this index
  • 00:22:26 rate because now we can actually sit he
  • 00:22:32 will and then here I think what we
  • 00:22:35 actually want here is sort of like a
  • 00:22:37 field right that that allows us to do
  • 00:22:39 input yes and and so on so I'll make a
  • 00:22:43 new component for that and call it in a
  • 00:22:45 field
  • 00:22:47 I don't know it's a little weird if
  • 00:22:49 column field but I'm not know is agate
  • 00:22:52 anything in so I will do this and I'll
  • 00:23:00 you see this the column actually not
  • 00:23:03 maybe I like to call this a field here
  • 00:23:05 even if sure because then we have like
  • 00:23:11 the row index and the column index in
  • 00:23:14 makes sense in we also have typos and
  • 00:23:20 let's do this now we need to actually
  • 00:23:23 create yep and then we can think about
  • 00:23:41 how do we want to render a field and it
  • 00:23:44 could be like from static could be as
  • 00:23:46 easy as just an input shoe last name
  • 00:23:49 field and the value would just be the
  • 00:23:53 let's do this again
  • 00:24:03 just be like this right and then we can
  • 00:24:07 even sit should it be read-only
  • 00:24:09 I actually react this vehicle is
  • 00:24:13 reminding me that's like some reason
  • 00:24:16 apiece I would trip me up every single
  • 00:24:19 time I think yeah okay so we still need
  • 00:24:28 to actually import this one so this is
  • 00:24:31 really nice while you're doing this and
  • 00:24:33 you're working away since you've got a
  • 00:24:35 build running which is like well do
  • 00:24:37 coding isn't doing you know yeah keeping
  • 00:24:40 everything refreshed yeah you can
  • 00:24:42 actually even without switching context
  • 00:24:49 okay so yeah I'm constantly getting this
  • 00:24:55 feedback right which results are just
  • 00:24:57 right again ten years ago this was not
  • 00:24:59 as smooth and of course cults it's not a
  • 00:25:03 function it's what I want to do is men
  • 00:25:06 over the car okay this is starting to
  • 00:25:11 look like something right like let's go
  • 00:25:13 big and just tweet this is this a little
  • 00:25:15 bit when you you've got it's not even
  • 00:25:19 just a list of things it is a grid it's
  • 00:25:21 great values are going in in the right
  • 00:25:23 places
  • 00:25:24 yes that's it that feels like a big step
  • 00:25:27 to me yeah yeah if I was really good I
  • 00:25:34 would like make it oh this is already
  • 00:25:36 starting to give this hitter a little
  • 00:25:39 knocking awesome maybe maybe make those
  • 00:25:47 numbers a little larger yeah in and
  • 00:25:50 actually like let's make let's do
  • 00:25:53 phonce
  • 00:26:04 thank you to look like something and
  • 00:26:07 then let's take all the read only ones
  • 00:26:11 and let's say when then when when it's
  • 00:26:15 the one you winter we make them like a
  • 00:26:18 little you know light and then when it's
  • 00:26:20 the read only one we make it back in
  • 00:26:25 let's see okay
  • 00:26:27 now you now we have something resembling
  • 00:26:30 this to the group board at least rate
  • 00:26:33 like so so that's a that's a stat yeah
  • 00:26:36 ideally I mean like that that's sort of
  • 00:26:39 we intrigued that later right like
  • 00:26:40 ideally we also wanted to create as well
  • 00:26:46 right again this mean something yeah for
  • 00:26:50 tasks like this where the bigger part of
  • 00:26:52 this is the logic in actual yeah another
  • 00:26:54 team yeah yeah that's the place to go
  • 00:26:57 first then we can precisely right so
  • 00:27:00 this is a really typical first thing
  • 00:27:01 okay now let's see okay I have something
  • 00:27:03 now right like and and note some of the
  • 00:27:06 things I did for example like up here
  • 00:27:08 right like it's pretty obvious that this
  • 00:27:10 is not going to be the right place where
  • 00:27:11 this function should should live yeah
  • 00:27:13 that's something when I'm like starting
  • 00:27:16 out getting something working getting
  • 00:27:18 out I often really like just putting
  • 00:27:20 something in the same file assign me in
  • 00:27:25 and and because that's like the most
  • 00:27:28 trivial refactoring in the world ever to
  • 00:27:30 like put that into its own little
  • 00:27:32 component and pull it in right but but
  • 00:27:34 right when I'm just playing around it
  • 00:27:36 it's it can become like a bit of a
  • 00:27:39 stream of consciousness the way I'm
  • 00:27:40 thinking of doing the whole in one place
  • 00:27:42 before you go and optimize things make
  • 00:27:44 tidy things up and get them get them
  • 00:27:46 refactored cause the oh you're actually
  • 00:27:48 gonna push this at this moment and this
  • 00:27:51 is this is something I've been as I've
  • 00:27:53 been walking around the teams during the
  • 00:27:55 day and seeing how they've been working
  • 00:27:56 since they're many people working
  • 00:27:57 together yeah it was really nice to see
  • 00:28:00 that people have fairly quickly reached
  • 00:28:02 a point that they're they're sharing
  • 00:28:04 code together in a repo and they're
  • 00:28:05 sharing progress
  • 00:28:06 so as different people are making making
  • 00:28:08 commits they're pushing and pushing them
  • 00:28:10 up to the project that is rebuilding in
  • 00:28:12 exactly the same way that you know
  • 00:28:13 you're doing now and people can
  • 00:28:16 share the progress they can see how
  • 00:28:17 they're getting on and it's it's living
  • 00:28:21 and breathing right from the outset so
  • 00:28:23 it's really nice to be able to share
  • 00:28:24 these results and get them get them on a
  • 00:28:26 on a URL yeah I really agree I mean if I
  • 00:28:30 was a bit more of a team I would even do
  • 00:28:31 this with full requests and sure yeah
  • 00:28:39 [Laughter]
  • 00:28:48 well I just push this live and again and
  • 00:28:50 anyone following should in a moment be
  • 00:28:52 able to actually go to Sue's and get a
  • 00:28:58 random sodoku right in so now we should
  • 00:29:01 maybe start figuring out like you should
  • 00:29:03 probably not be oh yes things like this
  • 00:29:05 and there should be some indication of
  • 00:29:08 where you're at and so on each time you
  • 00:29:11 refresh that page is that giving you a
  • 00:29:13 new Sudokus yes and yeah because with
  • 00:29:16 this generated yeah in the constructor
  • 00:29:18 of the app right we're just doing and
  • 00:29:19 generate pseudo pollution now we
  • 00:29:21 actually already have a public-facing
  • 00:29:22 like pseudo code generator and we're
  • 00:29:24 right like that took me a lot longer and
  • 00:29:32 we've come a long way yeah precisely
  • 00:29:34 right so so let's see let's think about
  • 00:29:37 okay now now we start having data
  • 00:29:39 travelling down right so so this was
  • 00:29:42 really want to talked about okay make
  • 00:29:43 make this data structure think about how
  • 00:29:45 its structured so we can easily have it
  • 00:29:47 propagate down a tree of your own
  • 00:29:48 Android and we have this very logical
  • 00:29:50 tree like system now now of course when
  • 00:29:54 when I do edits here and so on right we
  • 00:29:56 need to be able to have data travel back
  • 00:29:58 up in propagate up right so in here in
  • 00:30:03 our field I think will already see the
  • 00:30:04 console is saying hey why are you
  • 00:30:06 setting a value when a that's null and
  • 00:30:10 and the wire you're not having like any
  • 00:30:13 callbacks on your field so first to make
  • 00:30:16 this one a little heavy we'll do this
  • 00:30:18 and we'll have values that no no and
  • 00:30:20 then it's saying like yeah why don't you
  • 00:30:22 have an unchanged handler because you're
  • 00:30:24 setting a value
  • 00:30:25 you're not sitting in him so we should
  • 00:30:28 of course sitting in so we want to do
  • 00:30:32 some unchanged in let's handle change in
  • 00:30:40 and change in handler here in and which
  • 00:30:53 probably just say so now now we are
  • 00:30:58 starting to presume okay like since
  • 00:31:00 we're not going to be using any fancy
  • 00:31:02 state management or something which is
  • 00:31:04 going to be propagating just stayed up
  • 00:31:06 and down in reacting this is something
  • 00:31:09 that you could do if like hooks a
  • 00:31:11 reduction and so on but but I like
  • 00:31:13 studying this really simple right yes I
  • 00:31:15 understand and then unchanged what we
  • 00:31:17 want to do is that we want to take their
  • 00:31:19 their the current field and then we want
  • 00:31:24 to update the value to be a new value
  • 00:31:28 now we probably want to clean up that
  • 00:31:30 value a little bit so we want to see
  • 00:31:33 okay that value we we want to make sure
  • 00:31:36 we kind of pass this into an integer
  • 00:31:40 even if it comes from from from lake
  • 00:31:44 each of these fields those will be
  • 00:31:46 strengths we type in right now just
  • 00:31:48 absolutely but but we want to keep like
  • 00:31:51 again we want to think as if we had a
  • 00:31:53 type system right you think okay the
  • 00:31:55 value should definitively not sometimes
  • 00:31:56 be a string and sometimes be an integer
  • 00:32:00 yeah in so want to propagate up this
  • 00:32:03 value now here we have like a problem
  • 00:32:05 because what if the value is actually
  • 00:32:07 empty in in so what if it's just the
  • 00:32:13 empty string then we just want to accept
  • 00:32:16 that and otherwise we want to try to
  • 00:32:18 pass it into an int yeah in this like
  • 00:32:22 this is like an okay stat now we can
  • 00:32:25 propagate this up so now we should pass
  • 00:32:27 down some handlers in so here we want to
  • 00:32:30 pass down here we actually probably just
  • 00:32:33 want to assume because the good thing is
  • 00:32:35 that with the data structure we had
  • 00:32:37 right like if we go back and look at
  • 00:32:38 yeah every single field has like the row
  • 00:32:41 and column and so on right so so when we
  • 00:32:45 get like an updated value here it's it's
  • 00:32:48 easy to at the very top level go in and
  • 00:32:51 and and find the right field to actually
  • 00:32:54 it it yes so here we can just assume
  • 00:32:56 that we're getting pests down some event
  • 00:32:58 handler and see on change or something
  • 00:33:02 like that what's that wait I called it
  • 00:33:03 yeah yeah this props unchanged yet so
  • 00:33:06 we'll just assume here that we also has
  • 00:33:09 like an unchanged handle oppressed in
  • 00:33:13 here and then we should actually write
  • 00:33:19 an unchanged handler in that we can pass
  • 00:33:22 in here right it's amazing to see how
  • 00:33:27 quickly it pays dividends just when you
  • 00:33:30 were like thinking about your data
  • 00:33:32 structure yeah yeah you might kind of
  • 00:33:35 sketch that somewhere you might would it
  • 00:33:36 be actually putting it right there in
  • 00:33:37 the code yeah this would also be kind of
  • 00:33:39 shared around if you were working with
  • 00:33:40 someone else a team and you and you can
  • 00:33:43 refer back to that thinking and it's
  • 00:33:44 kind of it I mean it's not just the
  • 00:33:46 process of writing that helps you
  • 00:33:47 internalize it but also we've got that
  • 00:33:49 reference straightaway and you've been
  • 00:33:50 you've been making use of it right away
  • 00:33:57 this change and yeah it has a call in
  • 00:34:00 something right and I should do with
  • 00:34:02 some kind of this sit state within your
  • 00:34:04 state but this is where this is where I
  • 00:34:06 quickly feel like oh that's a lot of
  • 00:34:09 state to to handle if it's like all
  • 00:34:11 mutating and like how do I make sure
  • 00:34:13 that it's not some weird conditions
  • 00:34:15 going on and then fortunately the other
  • 00:34:17 day is Sean weighing from from our team
  • 00:34:21 wrote this great post on our blog about
  • 00:34:24 EEMA yeah which which is really really
  • 00:34:27 cool library so so in when it comes to
  • 00:34:30 another inspiration from from sort of
  • 00:34:32 Haskell world and so on it's this whole
  • 00:34:34 idea of immutable data structures Yeah
  • 00:34:38 right like and and and of having data
  • 00:34:40 that doesn't change in you you you take
  • 00:34:44 like one value and then you take a new
  • 00:34:46 value yes you don't your own change is a
  • 00:34:49 progression of a value of something
  • 00:34:51 it's a it's it's always like a
  • 00:34:53 transformation from my setup values to
  • 00:34:55 another right and mr is really cool like
  • 00:34:58 they have some great illustrations you
  • 00:35:00 have of these kind of transformations
  • 00:35:03 but it's a really cool way of doing it
  • 00:35:06 in waste with without really having to
  • 00:35:09 learn like immutable Gaia's or some
  • 00:35:12 different kind of data structure or
  • 00:35:14 anything like that so now I edit immer
  • 00:35:18 and then I'll import let me just see how
  • 00:35:20 they do it import produce from Emma and
  • 00:35:25 then we'll do a little trick here so
  • 00:35:29 we'll say okay produce from this let's
  • 00:35:39 see if this works basically the the way
  • 00:35:42 mr does it is that it has this little
  • 00:35:45 producer take some initial state and
  • 00:35:47 then it and then it returns a function
  • 00:35:53 for updating that state and and inside
  • 00:35:55 that function you can pretend that the
  • 00:35:57 state is mutable but but everything ends
  • 00:35:59 up being a immutable nice let me just
  • 00:36:03 first see if I if I'm breaking
  • 00:36:05 everything now I can see that there's
  • 00:36:07 some I'm definitely missing yeah here we
  • 00:36:22 go okay so now we're back again we have
  • 00:36:23 exactly the same state with the
  • 00:36:25 difference that Emmer in my turns this
  • 00:36:27 into sort of a proxy object and so on so
  • 00:36:29 now this state is immutable
  • 00:36:30 I can't actually accidentally change it
  • 00:36:34 and this means that she and my in my
  • 00:36:37 handle change right like on the EMA site
  • 00:36:39 they'll have some good example of a
  • 00:36:41 fusing instead of this traditional way
  • 00:36:43 of saying okay now I need to like sort
  • 00:36:45 of unpack this whole object and put it
  • 00:36:48 together again yeah I can just call
  • 00:36:51 produce and take the state modify it and
  • 00:36:54 and Emma will handle that hold so I can
  • 00:36:57 go in here and say it's state and say
  • 00:36:59 produce and then take a function that
  • 00:37:03 takes the current state
  • 00:37:04 and then it just it just mutate it in
  • 00:37:08 here it does actually do mutation but
  • 00:37:11 it's not in it's not that painful so we
  • 00:37:15 have these rows and then from our
  • 00:37:17 element we have like the row ID and now
  • 00:37:21 we'll have some columns and then we'll
  • 00:37:23 have our collide E and that will have a
  • 00:37:25 value that now we want to update boom
  • 00:37:29 let's see yep's I can't do things and I
  • 00:37:38 can't type now you can see I can type in
  • 00:37:40 E
  • 00:37:40 yeah right right for those that don't
  • 00:37:41 can see it I'm desperately trying to put
  • 00:37:43 similar to my pseudo queue right now and
  • 00:37:46 and I can't I can only put in numbers
  • 00:37:49 now right so now we already got this
  • 00:37:50 this data flow work that's fantastic
  • 00:37:52 that's yeah that takes us such a long
  • 00:37:53 way in such a short time we use about
  • 00:37:55 you can tell you just like again like
  • 00:37:57 building these kind of things ten years
  • 00:38:01 ago in the browser which is so hot right
  • 00:38:04 and now now you have this really clear
  • 00:38:06 state abstraction all the state is just
  • 00:38:08 flowing down a tree it's immutable we
  • 00:38:10 understand where it's coming from and so
  • 00:38:12 on right now next thing I want to do is
  • 00:38:15 is start checking if the pseudo quiz has
  • 00:38:18 been solved or not and this is one thing
  • 00:38:20 I realized when I was doing like it like
  • 00:38:22 playing around with this earlier and
  • 00:38:24 that is that I'm not very good at
  • 00:38:25 solving you should anymore spend an hour
  • 00:38:30 building as so I'm gonna cheat a little
  • 00:38:38 writer like I'm gonna I'm gonna add a
  • 00:38:42 little button with an unclick and learn
  • 00:38:44 that this is the flip to the back of the
  • 00:38:49 stoker book button so you can see the
  • 00:38:51 solution and then we are gonna make a
  • 00:39:00 pseudo code handler here and let's see
  • 00:39:05 so one of the things we want kind of
  • 00:39:08 anyway I think in already when we when
  • 00:39:11 we generate our structure up here is
  • 00:39:14 actually we probably also want to to
  • 00:39:18 keep the solution around right yeah
  • 00:39:21 because like we we need to actually be
  • 00:39:24 able to verify yes if you're doing the
  • 00:39:26 right wrong right yeah it's not no
  • 00:39:27 reason to keep doing that and we have
  • 00:39:29 this solve puzzle thing yeah again I've
  • 00:39:33 exposed it to my little cheating ripple
  • 00:39:35 right you know we have this tulip that's
  • 00:39:37 across all in so I can do this right and
  • 00:39:43 then we can say generator is solve
  • 00:39:45 puzzle puzzle and see oh this one is the
  • 00:39:50 sweet sweet the same one but just with
  • 00:39:53 the results right so here we'll just say
  • 00:39:55 generator and we will immediately take
  • 00:39:59 stuff possible and say okay solve the
  • 00:40:01 puzzle and story that's the solution and
  • 00:40:04 then the other thing I would probably
  • 00:40:06 start doing is writing a little chick
  • 00:40:11 tech solution or something in passing
  • 00:40:14 that should up with structure and then
  • 00:40:17 we need to sort of now now we have these
  • 00:40:20 and we kind of want to unwrap them again
  • 00:40:22 yeah probably say okay we have something
  • 00:40:25 like a candidate for solution mmm and
  • 00:40:28 then we take the pseudo ku rose
  • 00:40:32 yes we map over each row for each row we
  • 00:40:37 take the columns remember where each
  • 00:40:40 column we take the value and
  • 00:40:45 in modern JavaScript it's like nice
  • 00:40:49 enough that we can just say okay and
  • 00:40:50 then just make it a flattery yep so now
  • 00:40:52 we're back and we have a structure
  • 00:40:55 that's the same so now we can just start
  • 00:40:58 again really simple just say
  • 00:41:08 and then this like a really you see
  • 00:41:10 first chick which is like if the
  • 00:41:12 candidate if the candidate value is
  • 00:41:17 equal to an empty string um we scrape
  • 00:41:23 out of that I did way I tell you what's
  • 00:41:25 it ignore it's actually not right could
  • 00:41:27 we actually do that we should probably
  • 00:41:28 again we should keep it really strongly
  • 00:41:30 type yes so we should actually make this
  • 00:41:32 same null because otherwise which
  • 00:41:34 sometimes have strengths and sometimes
  • 00:41:35 and all and we really old like that try
  • 00:41:38 to miss with Haskell right like you can
  • 00:41:40 so easily mix up your types but we want
  • 00:41:42 to keep it really straight to type right
  • 00:41:43 so if it's no then we know that we we
  • 00:41:46 don't need to take it you know it can be
  • 00:41:48 your salt yet right in or if the value
  • 00:41:54 here is not exactly equal to the to the
  • 00:42:00 sued aqua solution then we should return
  • 00:42:05 false right then there's no reason to go
  • 00:42:07 I guess more pieces right and if we make
  • 00:42:09 it all the way through and we haven't
  • 00:42:11 return false which you say yes great so
  • 00:42:13 now we have a function for checking his
  • 00:42:15 solution in in this is the this where's
  • 00:42:18 the point where it's like oh how it was
  • 00:42:19 sold so am I actually kind of trying to
  • 00:42:20 solve one of these just to figure out if
  • 00:42:22 that function works right ideally I
  • 00:42:24 would have set up like some test suite
  • 00:42:26 in something like this is what I'm
  • 00:42:27 missing now my party in there would be
  • 00:42:29 by two maybe if I had more than an hour
  • 00:42:31 if this was like a reading project there
  • 00:42:33 is definitively set up some way of
  • 00:42:35 running tests right like that would make
  • 00:42:38 it so easy to to write a little field
  • 00:42:40 test of that frightened and see if it
  • 00:42:42 actually makes sense instead we will
  • 00:42:45 write a function to magically self in in
  • 00:42:49 a way in your ruining sodoku for
  • 00:42:51 everyone on you let's see what are we
  • 00:42:57 gonna do in to magically solve this I
  • 00:43:01 guess we can run through
  • 00:43:05 well one it will run us some somehow
  • 00:43:08 like take each of these and find the
  • 00:43:10 right value yes yeah and so I guess we
  • 00:43:13 can actually just like do something
  • 00:43:15 similar and say in this stage Doku and
  • 00:43:20 then just for each row take the row and
  • 00:43:27 then for in the columns for each column
  • 00:43:32 take that one and then in here we'll
  • 00:43:36 just want to see in if it's not out we
  • 00:43:45 okay actually we will really make sure
  • 00:43:47 we do this with with our mr produce
  • 00:43:50 right because we want to actually update
  • 00:43:52 the state through the salt so you're
  • 00:43:55 right you'll be doing this same trick of
  • 00:43:57 seeing okay let's take the stage inside
  • 00:44:00 produce and then and then inside here we
  • 00:44:05 can do all of these nice mutations
  • 00:44:07 mm-hmm why you can't so if it's not a
  • 00:44:17 read-only column then set the column
  • 00:44:19 value to in there's stage cool solution
  • 00:44:27 and then we have the same at some point
  • 00:44:30 we should probably make some helper
  • 00:44:32 method to that right but we have the
  • 00:44:33 same kind of local function where we say
  • 00:44:35 okay in column row times nine plus
  • 00:44:42 column
  • 00:44:47 I think she's that right oh there's a
  • 00:44:52 new age of the candidates right in the
  • 00:44:55 first thing is that value is not defined
  • 00:44:58 and light forty year
  • 00:45:06 now we have this room that didn't work
  • 00:45:10 very well in regional aim because I'm
  • 00:45:16 trying to do in the actual up gauge
  • 00:45:18 let's see where was it 71 I want to do
  • 00:45:24 this for each rooms ready so I'm just
  • 00:45:27 running over you troll and interact look
  • 00:45:32 quite right so there's something
  • 00:45:34 something is not right in Atlantis
  • 00:45:36 so is that are those zeros so we've got
  • 00:45:38 early is this a tripod that it's
  • 00:45:41 actually a really good point yeah
  • 00:45:42 because up here yeah that's a really
  • 00:45:45 good point yeah there's actually both
  • 00:45:53 the point
  • 00:45:55 so did we ever correct
  • 00:46:04 I'm not seeing any zeros here so we did
  • 00:46:07 fix it in the me class on the world
  • 00:46:17 [Music]
  • 00:46:32 okay yeah it's totally the zeroes that
  • 00:46:34 are creating an issue right notice how
  • 00:46:36 we're never seeing any zeros again this
  • 00:46:38 is this is the this is a gun show of
  • 00:46:40 type on type languages right here saying
  • 00:46:43 if if and zero matches and yeah so the
  • 00:46:47 first thing we want to do is probably to
  • 00:47:03 right let's see let's see if we start
  • 00:47:07 getting some lines yeah okay great but
  • 00:47:10 also that makes me feel more at ease
  • 00:47:12 sing nested okay with the right number
  • 00:47:15 and we can write navigate around there
  • 00:47:18 kind of type issue the solution will
  • 00:47:21 always have one so let's just just say
  • 00:47:23 like this
  • 00:47:26 [Music]
  • 00:47:36 so about here can I read frozen hmm
  • 00:48:02 just picking this apart and yeah
  • 00:48:20 Oh
  • 00:48:27 haha old friend our friend cancel lock
  • 00:48:31 okay
  • 00:48:33 it did it did lock something out earlier
  • 00:48:36 up the page isn't it spot what it was
  • 00:48:40 there we go now he's up there somewhere
  • 00:48:43 yeah it's not okay that actually yeah
  • 00:48:50 we can't do this because now
  • 00:48:56 because the self person in expect the
  • 00:48:59 format or the the raw format a well so
  • 00:49:03 it's like a little annoyance here oh
  • 00:49:05 that's a shame that would he was getting
  • 00:49:06 such a tidy solutions yeah yeah that's a
  • 00:49:15 shame but that that that this mean that
  • 00:49:18 we might want it yeah
  • 00:49:26 it's awfully annoying okay I'm gonna do
  • 00:49:30 a quick
  • 00:50:26 okay
  • 00:50:41 okay now now we have this something who
  • 00:50:48 is because we are saying nines now as
  • 00:50:50 well so we are seeing nines now right
  • 00:50:52 like now it's probably just this mapping
  • 00:50:54 of of rows and columns that are some ago
  • 00:51:00 right when we when we say okay let's
  • 00:51:03 solve this yeah
  • 00:51:21 is
  • 00:51:36 again this is where just wheat would be
  • 00:51:39 life yeah absolutely
  • 00:51:43 mm-hmm
  • 00:51:45 so this is the state before in the
  • 00:51:48 solution so the solution here three
  • 00:51:55 seven one three six two and then it's
  • 00:52:03 something it's something related to it
  • 00:52:06 not just keep just giving these
  • 00:52:08 read-only or something like that let's
  • 00:52:11 [Music]
  • 00:52:15 okay okay now we now we have this solid
  • 00:52:20 matically button in okay so there was a
  • 00:52:24 sudden out now we now now now we know we
  • 00:52:26 can we can solve these pseudo crews very
  • 00:52:28 fast yeah in and now we can start is
  • 00:52:31 saying okay whenever we handle this
  • 00:52:35 change we should also have some function
  • 00:52:38 to you need to see if it's old oh yeah
  • 00:52:43 something like that right where I'm just
  • 00:52:46 going to see okay first of all I'm
  • 00:52:49 probably gonna introduce like assault
  • 00:52:51 yeah we could even we're gonna introduce
  • 00:52:53 some more we could say like okay
  • 00:52:56 up here when when we create the pseudo
  • 00:52:59 chrome maybe we want to say okay we have
  • 00:53:01 these roads we have this solution we
  • 00:53:04 have this that time which is a new page
  • 00:53:08 we started it now we can have the result
  • 00:53:12 hey somebody were recycling precisely
  • 00:53:16 okay so we have a start time in a stall
  • 00:53:18 time right and then here in okay this is
  • 00:53:24 this is all the same then
  • 00:53:31 and then here we can say okay if first
  • 00:53:36 of all we can we can start by checking
  • 00:53:46 because if we've already sorted you just
  • 00:53:49 never be wearing em yeah but if if it's
  • 00:53:51 solved in and we if we don't have a soft
  • 00:53:54 time we can say okay hold it up here
  • 00:54:03 check solution and we can pass in
  • 00:54:09 actually realizing that we'll probably
  • 00:54:11 want this to be a part of our state
  • 00:54:14 change here and that means we don't
  • 00:54:16 really want it to be a handler because
  • 00:54:18 we'll get some weird race condition
  • 00:54:20 degree when she is passing State okay so
  • 00:54:28 we're gonna see okay is it is it gonna
  • 00:54:31 be solved in by sitting up here it's
  • 00:54:42 just that before we extract it to
  • 00:54:44 anonymous yeah
  • 00:54:57 later
  • 00:55:10 it's now in theory we should start
  • 00:55:13 setting a soft time if the pseudocode
  • 00:55:16 has been sold huh
  • 00:55:18 now we're passing this in so maybe in
  • 00:55:22 here in our board we can go in and see
  • 00:55:43 right borders actually yeah that's
  • 00:55:47 that's a curious effect and
  • 00:55:53 okay let's see why we didn't solve it in
  • 00:55:57 [Music]
  • 00:56:03 with the logic intensely detecting if it
  • 00:56:06 had been solved or just just the
  • 00:56:09 reporting of it couldn't quite so
  • 00:56:13 basically here we should be checking if
  • 00:56:17 it had in salt and I mean that is the
  • 00:56:19 function we haven't quite checked it yet
  • 00:56:22 so we again
  • 00:56:27 [Laughter]
  • 00:56:39 it's not happening right right
  • 00:56:48 is our handler running is I change
  • 00:56:50 Honduran even firing and that I do think
  • 00:56:54 it is yeah but it's double check
  • 00:57:03 yep yeah it's probably people screaming
  • 00:57:10 at the life so it's obviously the
  • 00:57:19 condition here in oh oh in that's just
  • 00:57:25 that the short time so up here yeah this
  • 00:57:36 is because we are setting the soft time
  • 00:57:38 to keep it so there'll be this weird
  • 00:57:43 thing where I need to go into yep this
  • 00:57:45 was and now we detect okay you solve
  • 00:57:47 this okay so that's so that so that's
  • 00:57:51 great then while we're not solving it
  • 00:57:54 will obviously want to show some kind of
  • 00:57:56 timer right right in so let's make a
  • 00:58:00 little timer component
  • 00:58:09 let's figure out how a timer should
  • 00:58:11 behave it's gonna start to feel pretty
  • 00:58:15 pretty complete in terms of the
  • 00:58:17 functionality is that point I think yeah
  • 00:58:18 yeah populating it will be a check to
  • 00:58:20 see if it's old yes to watch for the
  • 00:58:24 entry even though we're cheating to
  • 00:58:27 populate it but we'll be able to report
  • 00:58:32 if it's old or not and if we if this
  • 00:58:35 time is updating as well it sounds like
  • 00:58:38 it's a that's gonna be good to push so
  • 00:58:45 typically in the timer it's like hmm
  • 00:58:48 it's useful to hit some state that
  • 00:58:55 that's maybe later second sit elapsed
  • 00:58:58 starting at zero in and and let's see
  • 00:59:07 forgetting the new a fancier life cycle
  • 00:59:12 methods but we'll just do this when it
  • 00:59:15 mount will say sit just good old
  • 00:59:24 JavaScript sitting in inducing using sit
  • 00:59:31 stage to just say a elapsed is now let's
  • 00:59:38 see how we do it
  • 00:59:42 I'm expecting to pair since that time
  • 00:59:46 that's a date mm-hmm so we all want to
  • 00:59:50 say we're going to take the time right
  • 00:59:56 now and subtract the time from date and
  • 01:00:04 then this is going to be milliseconds so
  • 01:00:06 we want to get it in seconds and then we
  • 01:00:09 want to round down soon I have some
  • 01:00:10 weird like because people don't tend to
  • 01:00:13 think in milliseconds
  • 01:00:14 I mean I love the optimism that we're
  • 01:00:16 gonna be reporting this in seconds I was
  • 01:00:17 thinking like like days or serious you
  • 01:00:21 duck food solvers right like this is hit
  • 01:00:24 hard or challenge
  • 01:00:29 okay now we have this time whether we
  • 01:00:32 should probably try to show it something
  • 01:00:33 yeah we also ought to do what's called
  • 01:00:35 component too well unmount or something
  • 01:00:39 you can say even to listener you're
  • 01:00:49 hanging and then here no board we can
  • 01:00:52 import a timer yeah oops something good
  • 01:00:54 you know typos in that I just I just
  • 01:00:58 fulfilled my value is the pair okay so
  • 01:01:05 we only want to show that we don't have
  • 01:01:08 the final time right
  • 01:01:17 I think we called it like that no yep
  • 01:01:21 there we go nice we have a time you have
  • 01:01:24 a time right now with it and then
  • 01:01:26 hearing the result like so maybe we
  • 01:01:28 should actually make that a little
  • 01:01:30 component in the self and say okay we
  • 01:01:32 have some little result component that
  • 01:01:34 will show what what happens right yeah
  • 01:01:43 okay and then we'll return little things
  • 01:01:48 here but what what I want is what I want
  • 01:01:50 to do here is something similar to the
  • 01:01:52 timer I want to get that elapsed time
  • 01:01:54 right so yeah so in the result we will
  • 01:01:57 have they're all half there right now
  • 01:02:03 I'm just gonna pitch in and then we'll
  • 01:02:08 want to have like it laps to be in same
  • 01:02:13 calculation right I don't want to take
  • 01:02:15 this you don't cool a solve time and
  • 01:02:21 take the millisecond snip and then
  • 01:02:24 subtract its that time and we'll want it
  • 01:02:32 yeah
  • 01:02:34 and then
  • 01:02:47 that's good and let's get it on the
  • 01:02:49 board it's the excitement isn't it yes I
  • 01:02:58 am I'm a horrible and slow type I know
  • 01:03:01 in general honestly right like it's it's
  • 01:03:04 a and I'm super like some people really
  • 01:03:09 like a very very punch speakers about
  • 01:03:12 how fast they can use the editors and so
  • 01:03:15 on and I'm I've never really been
  • 01:03:17 obsessing over this it's pretty likely
  • 01:03:19 this is you've been moving quite quickly
  • 01:03:21 I've shown yeah all right
  • 01:03:23 okay let's see well actually have to
  • 01:03:26 cheat a little right like and you know
  • 01:03:28 fill this in yes all this weirdo point
  • 01:03:30 in seven seconds oh nice nice okey I
  • 01:03:34 think this warrants like cleaning up
  • 01:03:36 some consoling and committing great I
  • 01:03:40 think yeah this feels like functionally
  • 01:03:44 does exactly what what we would have set
  • 01:03:46 out to do yeah so now we have like the
  • 01:03:50 the basic outfit right like I will
  • 01:03:52 probably extract this so you get rid of
  • 01:03:54 this at some point I would really yeah I
  • 01:04:06 actually check this an NPM import Konami
  • 01:04:11 [Laughter]
  • 01:04:19 okay and then I mean then then we could
  • 01:04:22 go in and do more things so we could
  • 01:04:24 wrap it up right like so now we have
  • 01:04:26 this basic thing right like what I did
  • 01:04:28 in my original challenge which which is
  • 01:04:30 actually not a big step up from this but
  • 01:04:32 but is to say okay so so let's say we
  • 01:04:35 we've been working on this for a while
  • 01:04:37 and I've solved this in 41 seconds yeah
  • 01:04:40 now how about that I could send you this
  • 01:04:43 very same pseudo cool yes and say like
  • 01:04:46 hey now you saw right in in in these
  • 01:04:48 seconds right but at the moment this is
  • 01:04:51 being generated like a fresh with every
  • 01:04:53 every single time it is right so we can
  • 01:04:57 actually do something pretty quick to
  • 01:04:59 get around
  • 01:05:00 and just to give you a concept of how we
  • 01:05:02 can make it shareable right you know so
  • 01:05:04 this is really basic and that especially
  • 01:05:05 secure anything but but but just to see
  • 01:05:09 like it's not the end of the world at
  • 01:05:11 people in so now I'm am gonna go and
  • 01:05:15 take this stuff here and put it into its
  • 01:05:19 own little library mm-hm
  • 01:05:23 it starts becoming a little messy to
  • 01:05:25 have it out there let's export this
  • 01:05:27 generate pseudo cool that export this
  • 01:05:30 check solution and let's go here and
  • 01:05:34 then import generate pseudo cool and
  • 01:05:40 check solution from now we are back
  • 01:05:48 again right so one of the things we
  • 01:05:50 would want to use yeah because I'm
  • 01:05:55 calling generator generate pseudo coo
  • 01:05:58 and we just want to call
  • 01:06:08 okay it because up here I'm talking
  • 01:06:12 about a generator and we haven't
  • 01:06:14 actually important
  • 01:06:17 we haven't actually imported the NPM
  • 01:06:19 tsuyoku right here we go
  • 01:06:26 okay so now we've begged in right and
  • 01:06:28 basically what we need to be able to
  • 01:06:30 send someone the challenge is some form
  • 01:06:32 of URL yeah with this ruku in it right
  • 01:06:35 so we can say okay in let's have some
  • 01:06:42 share URL that we can generate for
  • 01:06:44 pseudocode this first step right in and
  • 01:06:47 basically we'll we'll want some data in
  • 01:06:50 that URL that's like hey let's get that
  • 01:06:53 in let's basically get what this one is
  • 01:06:56 generating right like that make puzzle
  • 01:06:58 right so let's get this raw one in there
  • 01:07:01 right maybe we want to keep now we now
  • 01:07:06 we've multiplied everything so maybe
  • 01:07:08 we're gonna keep it around here so just
  • 01:07:11 so we have it for generating there the
  • 01:07:13 data here right you know in so we want
  • 01:07:17 that we probably also want some more
  • 01:07:19 right we want who should we send the
  • 01:07:21 pseudocode to yeah to be able to well
  • 01:07:25 not in the URL yeah yeah we didn't so
  • 01:07:27 this one went through right when you
  • 01:07:28 actually sent this meal if we don't have
  • 01:07:31 a database or something we want that URL
  • 01:07:33 to also have who do we send it from and
  • 01:07:35 who do we send it to so once you're done
  • 01:07:36 we can send it to the one that oh wow so
  • 01:07:41 this is just like going a little bit but
  • 01:07:43 we probably we can start without decent
  • 01:07:46 even if we just said we could not good
  • 01:07:48 we can we can use your own right in the
  • 01:07:50 basis of you yeah so what we'll have in
  • 01:07:52 the data room and let's take that data
  • 01:07:55 and say okay we'll have the roster Doku
  • 01:07:58 in then we will want this that time
  • 01:08:05 mm-hmm and we'll want the soft time
  • 01:08:09 right because those two will want to
  • 01:08:13 to verify right a then a really handy
  • 01:08:24 thing is that all the browsers now again
  • 01:08:26 this is something that they didn't you
  • 01:08:27 said right buddy they have these two
  • 01:08:29 functions and I always forget which one
  • 01:08:31 they switch it to be and Beach way in so
  • 01:08:35 it should be it be 2 a1
  • 01:08:38 visa for base64 encoding of our strings
  • 01:08:43 these are these are built in to build
  • 01:08:46 into the browser's I know right and it's
  • 01:08:51 so easy now right like you just say okay
  • 01:08:53 Jason stringify data repertory and now
  • 01:08:58 you have like now we have like a query
  • 01:09:06 string with all of this just encoded in
  • 01:09:08 the query right and then we can do
  • 01:09:10 something like like returning the
  • 01:09:13 document location a truth in we want to
  • 01:09:18 make sure we don't end up with a lot of
  • 01:09:19 core strings I'm just gonna do some
  • 01:09:21 replace like this is really quick and
  • 01:09:23 dirty right but I'm just gonna say
  • 01:09:25 whoops
  • 01:09:26 what did Mitchell code tried to help me
  • 01:09:28 with that I'm just gonna say okay if
  • 01:09:31 there is a query string everything then
  • 01:09:33 remove it and then you add like the
  • 01:09:37 pseudo cool is super crafty like that
  • 01:09:42 okay now we have a share URL in itself
  • 01:09:46 that's not gonna help us super much
  • 01:09:49 apart from like what are we going to do
  • 01:09:52 with it right so yourself actually
  • 01:09:54 decode that yeah so we have we have to
  • 01:09:57 get some kind of like up here we'll want
  • 01:09:59 to check are we getting this raw one
  • 01:10:02 from the generator are we getting it
  • 01:10:04 from this year URL yeah are we getting
  • 01:10:06 and now we're getting some so we'll want
  • 01:10:08 something like from your
  • 01:10:16 something like this right and then we
  • 01:10:18 can write this function extract URL data
  • 01:10:21 and we can say okay here we go let's
  • 01:10:24 first see in so this will give us the
  • 01:10:33 query param and then it's a it's one of
  • 01:10:39 those in three honest we could even do a
  • 01:10:44 check right now we don't have a query
  • 01:10:46 parameter levels I know you put I
  • 01:10:49 thought you said oka was the query
  • 01:10:50 parameter yeah yeah I just mean like
  • 01:10:52 here we always see in the browser so I
  • 01:10:54 just wanted to make sure okay we have a
  • 01:10:55 string so then we can just let let's do
  • 01:10:57 let's do even just do a match so you
  • 01:10:59 know like this is gonna be really a
  • 01:11:02 brute force
  • 01:11:04 let's bring not ampersand okay that's
  • 01:11:11 where one and if we get a match then we
  • 01:11:14 know we have a URL in here it'll return
  • 01:11:17 know if we don't have one and if we have
  • 01:11:20 one here we can see okay so the first
  • 01:11:24 value is this one so now we just want to
  • 01:11:26 do with the you need to be and we want
  • 01:11:30 to do with adjacent on that value
  • 01:11:40 in this way I wish it had started with a
  • 01:11:42 just framework because it would make it
  • 01:11:44 so much easier but I don't well
  • 01:11:48 sometimes you sometimes you're leasing
  • 01:11:50 the wrong place yeah but okay now now we
  • 01:11:55 can both like share URL and we can
  • 01:11:56 extract this royalty and up here we can
  • 01:11:58 say okay if we extract this then we
  • 01:12:02 could say from URL if we already have
  • 01:12:05 the URL then just take the raw value
  • 01:12:07 from there in other ways you here and
  • 01:12:10 then this is exactly the same this is
  • 01:12:13 the same this is the same and then we
  • 01:12:16 just want sort of their Challenger that
  • 01:12:21 time
  • 01:12:30 and Challenger all the time college
  • 01:12:45 okay so now in theory we should have all
  • 01:12:49 the information to know if there's a
  • 01:12:51 challenger in the URL and so on yes now
  • 01:12:53 we should just to figure out like okay
  • 01:12:56 if we actually solve this Sudoku in we
  • 01:13:02 should also update the pseudocode with
  • 01:13:05 this year URL and we'll want to import
  • 01:13:10 what we call the function the ship we
  • 01:13:15 just called it share URL we did
  • 01:13:16 yeah there's okay so here we go we take
  • 01:13:26 they share your L and can read it from
  • 01:13:29 ours so what's the right signature right
  • 01:13:35 yep okay so now in theory we have a URL
  • 01:13:39 that we can start sharing so now it's
  • 01:13:41 just up to us and our result here to say
  • 01:13:44 okay you solve this in these seconds
  • 01:13:54 and then see ya it challenge yeah
  • 01:13:59 friends want enemy and I know why would
  • 01:14:08 do that but still aim and it'll be a
  • 01:14:12 little silly because it'll just open in
  • 01:14:13 your browser this way no one can get in
  • 01:14:16 so then it would just be listed of
  • 01:14:19 course yeah right now
  • 01:14:32 and we're gonna find out
  • 01:14:36 yeah let's take that okay so let's see
  • 01:14:44 it's it's totally cheat right and then
  • 01:14:47 and then somewhere get a shilling great
  • 01:14:50 like I can copy this link address and
  • 01:14:52 and send it to you you and then I can
  • 01:14:55 remove the magic button and yeah and
  • 01:14:58 here you go right like let's let's see
  • 01:15:00 if this actually so did this actually no
  • 01:15:04 it it didn't pick the right room so
  • 01:15:07 let's figure out why why we didn't now
  • 01:15:10 but now we have now we have like an easy
  • 01:15:12 test case here right like we have this
  • 01:15:13 one over here in well it will change the
  • 01:15:17 students I update stuff then that that's
  • 01:15:20 the one piece library though sometimes
  • 01:15:22 um but in let's see why don't we get
  • 01:15:27 this we do have this rhetorical query
  • 01:15:31 string and I think I think I know
  • 01:15:38 because we are doing this wrong cool
  • 01:15:46 yeah yeah yeah yeah yeah yeah I think we
  • 01:15:50 are almost there now right like I think
  • 01:15:51 we're actually gonna get this this ready
  • 01:15:53 right so so let's see I'm gonna open
  • 01:15:58 this share link it's it's it's all your
  • 01:16:15 changes oh well I mean I think we're
  • 01:16:18 pretty much there right like I think
  • 01:16:20 this is this one okay look at the match
  • 01:16:24 no no this does seem like it should be
  • 01:16:27 right No
  • 01:16:30 [Music]
  • 01:16:42 yeah yeah we are getting we're getting
  • 01:16:44 all the right stuff so we are we not
  • 01:16:52 using it I mean this actually seems
  • 01:16:57 right we are showing the right one and
  • 01:16:59 you will see that now in this one we are
  • 01:17:02 getting this let's see if I think we're
  • 01:17:13 just looking at the wrong one let's
  • 01:17:15 let's let's let's see if we're just like
  • 01:17:18 in okay let's see in four to five seven
  • 01:17:25 mm nope no so why are we getting the
  • 01:17:30 wrong one
  • 01:17:31 so the problem then must be with not
  • 01:17:34 with that but with the share URL it
  • 01:17:38 seems like right we actually we are we
  • 01:17:58 certainly using it when we yeah it seems
  • 01:18:01 like we're sitting the wrong data here
  • 01:18:03 yeah it's so close right we look at the
  • 01:18:09 URL what's the shelling that we actually
  • 01:18:12 yeah so this was and and and I did have
  • 01:18:17 that like we don't have this process
  • 01:18:21 here right like and you can see it's
  • 01:18:23 right one and we can see that we are
  • 01:18:26 setting the same every to you in
  • 01:18:35 hmm okay something is wrong when we
  • 01:18:38 solve it and so the problem might
  • 01:18:42 actually be the magic solver function
  • 01:18:44 that misses something up it's gonna wind
  • 01:18:47 up being that the easiest way to test it
  • 01:18:49 is to manually solve the Sudoku No okay
  • 01:18:54 so the problem the problem is totally
  • 01:18:57 there there we it is actually our manual
  • 01:19:02 I think everything is working except for
  • 01:19:04 this cheating function I think so I
  • 01:19:14 think so okay well I mean well it feels
  • 01:19:19 like we're we're within so I will I will
  • 01:19:25 I'll do this okay okay and then I would
  • 01:19:32 like to say that that that without that
  • 01:19:34 the religions without the cheat if I
  • 01:19:36 could solve this the main issue being
  • 01:19:38 back would be to actually here in in the
  • 01:19:41 result in handle a case where where
  • 01:19:44 where where we have one right like so in
  • 01:19:48 so here we would just have and this we
  • 01:19:52 won't have time to to test now in him
  • 01:19:56 but we had this field called the
  • 01:19:59 Challenger is salt time right so in this
  • 01:20:03 result we can go in and see in if there
  • 01:20:08 is a challenge assault time yeah then
  • 01:20:10 maybe put a little h3 here saying your
  • 01:20:13 opponent solved in and yeah we don't
  • 01:20:21 want to do that little piece of math up
  • 01:20:23 here
  • 01:20:31 and exam yes seems like something that
  • 01:20:36 should be extracted into its own method
  • 01:20:38 in because this is like well that's
  • 01:20:44 that's the way it works with getting
  • 01:20:46 something together quickly getting the
  • 01:20:48 steel thread yeah getting it working
  • 01:20:49 yeah then we can yes we can then we can
  • 01:20:52 optimize right like there's a bunch of
  • 01:20:54 things we could we did we could make
  • 01:20:57 smooth all right I think this is gonna
  • 01:21:03 be our last piece of functionality yeah
  • 01:21:05 it is it is okay and then we can say
  • 01:21:13 your opponents opted in and we have okay
  • 01:21:29 okay in theory this is in theory this is
  • 01:21:34 our fully working through double
  • 01:21:36 challenge that we can share I'll commit
  • 01:21:42 this yeah in tandem yeah once we Justice
  • 01:21:48 a nice I love the I love that
  • 01:21:51 combination message working working
  • 01:21:54 solution it's this thing it's my it's my
  • 01:21:57 way of saying yeah thank you love
  • 01:21:59 working but hey I think we're in good
  • 01:22:04 shape I think yeah barring the fact that
  • 01:22:08 you have to actually go through yes yeah
  • 01:22:11 you have to actually solve this yeah
  • 01:22:14 that given because I think that I can
  • 01:22:16 really get that magic button through to
  • 01:22:19 to work again oh okay I like it as is I
  • 01:22:21 like the fact there's integrity to it it
  • 01:22:23 means the people that solve it but this
  • 01:22:25 is kind of remarkable so I mean we went
  • 01:22:27 a little over the how that we were
  • 01:22:28 chatting away everyone can still in an
  • 01:22:31 hour and twenty minutes we've gone from
  • 01:22:33 zero to having this kind of
  • 01:22:35 functionality in place it's been
  • 01:22:37 deployed out onto the web it's the kind
  • 01:22:39 of thing that
  • 01:22:40 now you can actually get get a shared
  • 01:22:44 URL is finishing his build right now as
  • 01:22:47 we speak
  • 01:22:48 its function is zero to functional in a
  • 01:22:51 little over an hour with chatting and
  • 01:22:53 yeah and and my help so that's amazing I
  • 01:22:59 think is the perfect perfect place to to
  • 01:23:03 close it it's kind of remarkable what
  • 01:23:06 what can be achieved in that amount of
  • 01:23:08 time I mean it's not just the tools were
  • 01:23:10 looking at here with like the with net
  • 01:23:13 the fight getting out and deployed but
  • 01:23:14 also the the modern capabilities of the
  • 01:23:16 browsers we have things that I was
  • 01:23:18 seeing there that I wasn't aware of and
  • 01:23:20 little utilities though I wish we had
  • 01:23:22 known about but also that the tools that
  • 01:23:28 we have in things like react and
  • 01:23:31 libraries that have in NPM what a wealth
  • 01:23:34 of resources they're in the hands of
  • 01:23:39 developers now is kind it's kind of
  • 01:23:40 incredible
  • 01:23:41 it isn't variable right this there's
  • 01:23:43 been fun for me because I basically
  • 01:23:44 built in in a now I'm miners like the
  • 01:23:47 one little legging component and it's
  • 01:23:49 like setting up a little lamp the
  • 01:23:51 function and sending a mail back and
  • 01:23:52 forth and so on right buddy yeah but
  • 01:23:55 that's that's actually a pretty trivial
  • 01:23:57 amount of work I did a little experiment
  • 01:23:59 before with me I'll gone right and and
  • 01:24:02 it's it's pretty girl right and and to
  • 01:24:05 see that that this can just pretty
  • 01:24:07 easily be built in an hour and deployed
  • 01:24:09 globally and like shared and and and
  • 01:24:13 done with like this kind of workflow in
  • 01:24:16 anything right like that that's just
  • 01:24:17 such a huge difference from 10 years ago
  • 01:24:20 when I was when I was building the same
  • 01:24:22 time you're being in in Ruby and rails
  • 01:24:25 and on dreamhost or something like that
  • 01:24:28 and and trying to make it run at all
  • 01:24:31 it's pretty remarkable Matt thanks so
  • 01:24:33 much for spending the time to do that
  • 01:24:34 and braving the challenge remarkably no
  • 01:24:38 biting stuff very easy