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