well good Monday morning I am back from
summer hiatus some arrests or let me
turn off the air conditioning thing
feeling good feeling rested excited
about the autumn season feels almost a
little bit weird to record videos is
talking to myself into a camera instead
of having Sun and talking to other
people there are no lights in the
background I am that’s because I’m going
to be repainting this wall because and
be where you won’t be able to unsee this
there is a spot over here where I messed
up the painting so I have to I wouldn’t
do it and there’s actually a spot over
there as well so yeah that’s a project
I’ve been procrastinating on for some
time alright so today I would just like
to spend 120 minutes coding something
but I didn’t really know what so I just
asked you find people on the Twitter’s
most voted was by Getty Phi I think it’s
kind of highly voted because he has a
huge audience but here it was a good
idea he had a speed typing challenge a
speed typing challenge give a random
number series of words tests how quickly
and how accurately you type it also
maybe on harder levels move the words
around or other distractions mmm
somebody in the mentioned that this is
similar to some Oh game and get if I
said that this is the idea like
you go like this and then and you just
type ha
this would be good because I am the
worst typist and then you like this is
extremely satisfying to do oh my god I’m
getting distracted so yeah that is
possibly something that we could do that
I like that idea
this one was interesting a game where
each connected user is assigned a number
and they have to press this button in
the correct order of their number live
the present button out of time it resets
everybody loses if everybody reaches the
end in order the button gets bigger
which is an interesting take because it
would add a multiplayer aspect to it or
this Twitter where you can’t tweet just
a button in the middle of the page that
does absolutely nothing must use es6
bubble webpack reactor duck CSS grid
WebGL and web they are also all features
must work in ie8 have fun drill
instructor window title just a tab that
keeps screaming at you code code code
keep coding fingers on the keyboard move
it move it I like this as well screw it
I think we’re going to go for this speed
typing challenge actually that’s yes it
yeah it’s the most voted one let’s go
for democracy so we know what to do we
were like we were gonna do a speed
typing challenge but I am a big believer
in that restrictions breed creativity so
I asked people what technology I would
be forced to use in technology
Rison ml l reason ml reason about fable
compiler right the server client would f
shop reason ml sigh all right grease in
ml it is to be clear I know very little
about recent ml I’ve watched one talk
about recent milk that’s it
blick suggest RTL Arabic Arabic variable
function name so so basically this no
loops
only recursion that might actually be an
limitation inherent in reason ml hang on
oh you actually can loop and reason
about
oh wow make it compatible with Internet
Explorer 6
that’s an internet history for you only
vanilla JavaScript no NPM packages no
variables right on your phone one-handed
you know what we’re going for and no
loops only recursion and editor forms
Comic Sans
alright so we’re going to make a typing
challenge in recent ml that I don’t know
anything about and we’re going to do it
without loops using only recursion and
we are going to have the code font of
our editor to be Comic Sans that is very
sensible let’s do this let’s start the
timer see startup Tito it go
Oh what was I doing
[Music]
sometimes it’s just really hard to just
figure out what to do okay objective
objective just a simple next step get
recent ml working in a real chap
let’s do that npm install created react
okay hang on so perhaps this is a better
choice so this is uh this is kind of
like great react up for reset okay okay
yep but do you know what we should do
do you know what we should do we should
replace our terminal with a different
terminal because I’m feeling like an
attentive deficient squirrel everybody’s
like what is happening why what is he
doing what I feel like if you don’t want
know what her hyper terminal is it’s
kind of like it’s a browser-based
terminal it’s sensible to build
everything with web technologies no
matter what it is at this point the
client calls and ask whoa how’s the
project going and you like we’re making
great use of your billable hours okay
let’s do this reason ml thing your I
will never use yarn yarn is for people
that live in the second half of 2017
it’s a very specific type of progressive
reactionary type JavaScript developer
they adopted yarn really really fast
when it arrived and fixed some of the
major issues with NPM but when NPM fixed
those issues they are now reactionary
again and don’t want to adopt the new
annum innum ennum and PM Wow
every X needs a px never heard of that
is this a thing
execute binaries from NPM package oh my
god did not know that this command
existed you learn everything in this way
NP x create reacts up and then we go
crazy
typing crazy crazy and then Oh get
script why am i retyping this means copy
and paste like real developers do ok so
how are we on time oh oh
holy 10 minutes passed this is gonna be
so easy
oh don’t jinx it oh I’m jinxing it we’re
gonna do so great I’m happy hacking oh
you can barely see my little circle
thing here
Jen oh can I change the skin you’re
hyper terminal let’s start Comic Sans
that’s horrible this is the
worst how do you install one of these
okay oh let’s go to the code temp god
this is such a horrible horrible font
it’s the worst font can I do an p.m.
start here and see if we have something
running to read okay fair to compile oh
god its failing already more chill not
found country song bull crap bla bla bla
bla bla bla bla bla bla bla
okay it’s a bug in there you have
to do npm install again what’s what are
we going to talk all great 18 minutes
and 39 seconds I want some recent plugin
for visual studio of
I cannot find Merlin binary at Oak
Campbell Merlin yeah because why would
anything work ever
I have honest talent even Myrna back Oh
Pam Oh Pam a package manager for okay
okay I know that reason Mel is related
to oh camel for some reason but then so
we need to install a package manager for
another language in order to use another
language that compiles down to another
language sure let’s do that how to
install Oh Pam the quickest ways to blah
blah blah blah blah is paste arbitrary
it commands into our channel we get
common not found oh my god Linux people
oh use yogurt no open up for homework
aha yes yes brew install open waiting
you know like there’s a lot of hassle
here but you know like Oh
using recent ml over a normal JavaScript
it’s gonna save us so much time because
it’s it has very it’s it’s very powerful
type type system
yeah it’s come saves a lot of time no
open route found that Oh Pam
oppa oppa minute no idea what I’m doing
mmm you won’t open to modify things in
your system yes you know what like being
a developer means that you get like a
lot of people don’t know but normal
people don’t know how to wait but
developers we know how to wait like
JavaScript developers we’re pretty good
at waiting
but you know who’s better at waiting
Java developers like they’re very good
at waiting especially if they’re Android
developers then they’re spent like 80%
of their time just waiting like I’ve
seen our C colleagues on mine that are
Android developers like they’re so good
at waiting J builder has been renamed
and the jbuilder package is now a
transition package used a doom package
instead thanks for the information aha
you see here like down here there’s like
some Merlin crap good that means
something is doing something that is
involved in reasonable this looks sort
of reactive so we have here some
component which is a stateless component
app react hmm
okay component so this is an object that
extends the component and then it has a
render function that has an um is a
function that takes an underscore itself
we’re gonna switch this to Comic Sans
I’ve reformatted this computer and I now
genuinely don’t know how to make
backslashes
oh that’s a that’s cool I don’t need to
make a backslash I can just do single
quotes don’t fix the core issue oh great
this actually looks a bit saner than in
hyper term actually this looks pretty
nice you know it looks a little bit
friendlier it’s I could get used to this
I could not get used to this so where
does message come from also this is
funky what’s the squiggly thing and the
underscore thing I guess that this has
some kind of significance because
there’s no other message here like this
what happens if I remove this a function
of like that this argument has a type a
blah blah blah blah blah blah this
argument cannot be allied with label
message at rain map and if I put back
the squiggly thing then it works let’s
let’s try to Google it Rison ml and then
what is this squiggly thing that’s not
gonna work yeah this is one of the more
annoying things with very terse
languages like reason or and
and Haskell has the same problem like
everything is your symbols and it’s like
what the hell is this symbol you just
can’t like try to google it but like
there’s no way to Google symbols and
you’re you’re screwed and who dogs dogs
dogs dogs dogs
perhaps I should do these things on a
live stream so that people can help me
out
otherwise I’m kind of like what I should
definitely do this as pair programming
at least when somebody could be googling
while failing at googling while I I code
then I could look better as a person a
Bloody Bloody Bloody Bloody Bloody blade
labelled arguments multi-argument
functions especially those whose
arguments are of the same type can be
confusing to call okay so x and y if
they have it sounded like to say if it’s
okay if it’s just two numbers then it’s
I call yeah then the order of them
becomes weird which is X and which is
why not make sense as a problem and Oh
camel and reason you can attach labels
to an argument so these are labels oh
and then you call them like this okay
okay
since we have carrying more than that
below we can provide the arguments in
any order oh so that you can auto carry
them
that’s very cool that’s actually very
cool that’s a very neat language feature
I like that a lot so what is this
what’s the underscore if I do more of
these episodes I’m gonna call them
mostly scrolling perhaps this is just
some kind of convention for stuff not
being used because I know that you do
tend to do this in Haskell to indicate
that because this is perhaps just a more
descriptive way of doing that
perfect we learn something so we have
reasonable are working with react that’s
mission accomplished good
and we also learned a little bit of
reason we know that this is labeled
arguments which is a very cool language
feature the question is how to proceed
what is the next step we want to make a
typing challenge so perhaps we want a
list we want to display list of words
definite type and as we type them they
should disappear yes that is what we’re
supposed to do where are we on time
we are 38 minutes in we’re almost used
half of our time yeah sure
oh I think we’re gonna do this six out
an array and let words and a waffle rule
that dogs perhaps it’s just a triple
were using as a record so I like they’ll
scan objects list an array to erase
that’s beasts are not allowed this
Sphinx right now that fixed it don’t
even cycle I do not think that let’s try
to just map through that the record
field map cannot be found yeah okay
mapping arrays reasoner well o acts of
mine blah blah type signatures may still
be cryptic to you but you’re still
profit from learning how to read them I
am not convinced axel I will click back
okay maybe I actually can read this
thing so this one array don’t map this
has type list string but somewhere
wanted array map Oh an array is
something different
oh that you declare them with yeah I
need this to return elements I suppose
so
what happens if I do this call it’s
missing an argument of type string
purpose that you have to do that just
messing around right now
perhaps this needs to be contained in
the deal okay so it says that this line
here has type array react reason react
dollars so they it makes sense
this here returns an array or react
element but something somewhere wanted a
reactance very simple I just kind
of need to see a simple example of it to
just get my brain out of breakage this
is really hard to do a little I should
not do these things alone
you should not program alone programming
on sucks array map reason and now react
usage bla bla bla bla bla bla be free be
free buffer than friend a friend of
every Syriac tutorial this should get me
started
oh look how happy is scrolling scrolling
scrolling scrolling scrolling oh there’s
some rate ailment here value of
array to element cannot be found in
recent reacted what the value array to
element cannot be found in recent react
is this deprecated since this tutorial
when is this tutorial written 2017 what
the hell I don’t know what to do array
to the surprise be crazy
do they have to do something to pull
that in somehow where does this even
come from like it’s not included
anywhere that’s a really extremely
annoying
this magic oh so stuck I don’t know what
this error means the value array to
element cannot be found in recent react
what if we just
defy this a little bit get this up here
and just have you been conned in this
language okay right so let’s actually
try to give you this there and I’m gonna
just try to actually used in line this C
so that we get rid of the confusion that
is involved in array map so yes go deal
okay we’re back to the problem at hand
is that a value a rate element can’t be
found in recent react I have no idea why
it’s giving this error message this is
so obscure tell you Ray – you sound like
you’re using outdated copy of recent
react maybe you’re saying oh five three
and we are on the current version
that’s not a problem then search that
did not work oh they have a search that
is therefore it doesn’t does it do
anything
good job recently act fine let’s let’s
do this here
react tray Jesus it seems to me that
this should be working such a stupid
thing to get stuck on this recently
acting what did we use we did use some
we used something else don’t remember
what this looks different let’s let’s
use this except and I hope it just
randomly works instead of the the broken
thing that we used because it’s probably
it can it’s not our fault that this is
not working it’s somebody else’s fault
that’s our MRF typing crazy and we are
going to do CD code tab and then we’re
going to mmm
call this type in crazy and then we just
going to take a crazy and then we go
into BM installed and then p.m. start
yeah this is what development is like
for some reason my code wishes review
code is black and if I open it again oh
it’s no longer black have you – have you
tried turning it off and on again so
let’s see if this array element works
here the value array element can’t be
okay if I check the recent reactive
documentation here actually it seems
like it pins it paints a very different
picture to solve this issue reason has a
special bread syntax so if I do if I do
this
so breaks but I can do that I could not
this is space
no oh you bastard
so this is different it is it is so I
need to have the actual space here
that’s evil Jesus that does not make
sense
Oh Oh God
so now I can do this can they will this
work whoops i refresh the terminal
nothing works
Oh hyper term
my experience with hybrid might be this
is not good
perhaps not everything should be built
in browsers yeah there yeah and we’re
back to this area Rachel my can be found
in resurrect because this is probably
just deprecated and the tutorial is
the value message can’t be
found that makes sense because we need
to make this of the function know what
let’s do this into a label because we’ve
learned how to do labels my new keyboard
mapping is messed up so this will break
because this is not a function let’s see
what that looks like
this is syntax error the call is missing
its argument of type message oh that’s
actually a helpful error register so
then we can do message equals message
said not yet
syntax error okay dot it let’s go back
to the reefs and docks ie I would like
to say that we’re making some kind of
progress oh my god I’m so bad should be
the call this is how you do it okay
let’s actually just do in life Springs
here first syntax are line 23 charges
13200 their self thing now there’s
another thing line 32 the Chavonne yeah
it should be like that okay now that
works i want to revert this message
thing here message message message value
message can be found that sure message
lady would be to do to miss an argument
and it’s going to be message and we have
never why is that working
so does this only work on as this the
children fixed and we’re going to pass
in something like this then works so I
can’t actually I can’t actually add an
expression here needs to be a variable
god that’s cumbersome why why is that
like this magical translation really
makes it hard to grasp what is going on
I wonder if we can can we see what the
code word is actually
happening oh this just creates some
garble I said the reason Amell doesn’t
really generate very readable stuff at
least not react react reason God so I
have no idea why this works but if I
inline this just all right but let’s
actually let’s try to actually make some
progress we know how to get the children
in surah so let’s go back to word let’s
let’s make these let’s get some words
all right
and we won’t get rid of that for bet
we’re gonna do s that we go to do array
dot map and we’re going to for each word
we’re going to return a div that
contains a reason reaction and we’re
did that work
they found a bug for us the coal is
missing argument of type string do you
mean – I need to do event oh that worked
all right cool now it’s mapping but
again if I do this it won’t work I
suppose and we have no idea how to
convert that into an element other than
this stuff and that does not accept
inline expressions Garg Oh twenty more
minutes to get something going 18
alright let’s add an input field mm
input on the click no on the changes
pose and then self handle handle change
value handle change cannot be found
correct so let’s add that mr. handle how
does this look
cool oops it’s just two organs an event
itself is log let’s handle the change
change and then long changed refresh and
yes and we get some change events good
good
so what does this event look like can i
event dot target it’s just I actually
just buy I always wanna love the event
object here oh it’s these react event
proxy events I don’t quite remember how
they look what if I just did that react
events the Y is these ones yeah do we
get those at end of time yes do that
knowest what I get no I got a compiler
with this syntax error on line 32 what’s
up what was it visited space know if
you’re accessing fields on your event
topic like event target value yes you’d
use a combination of react Dom re helper
yeah and buccal scripts objects access
FF i oh that’s convenient
oh now it works all right okay I was so
silly I was supposed to use react event
dot form doxology open the– oh the
event object and then use square square
value yeah
obvious obviously hello I’m Vijay my
name is Satan I designed this API and
I’m so happy that you feel that way what
is this even
intro because this is X for accessing
JavaScript object because this is Josh
gift object is kind yeah yeah
all right that was that was hard that
was really hard
how much on her oh great three minutes
yeah I am NOT going to get into the
whole thing of setting state which would
probably be the next point didn’t get
pretty far with this reason ml was not
exactly jump headfirst into sample to
work with Jesus Christ now was
emotionally hard for me I what learnings
did we get from this
getting started with a reason ml project
was actually priestly like there was a
create react app like thing for it the
project still seems to be moving quite
fast I found at 2017 tutorial which had
like was completely broken from breaking
changes and the syntax on how to get
children in is there probably logic to
it but like this thing here where you
need this space in order for it not to
break it’s just so nasty reasonable has
seems in some ways of nice language I
really like this these labeled arguments
and then it Otto Carius it seems that is
pretty cool the fact that you have to do
these things like that it doesn’t
default to strings and you have to
declare things on strings at least in
the initial example seems a little bit
cumbersome perhaps is not all that comes
reestablishes my prejudice that type
languages add just a lot of stuff that
you had to add everywhere also this
intro thing
with JavaScript objects is good lord
what is even happening here
I also find the unpredictability of the
fact that I the spread operator here
allows me to operate on this as a
variable but if I try to inline this
exact thing here it doesn’t work that is
also extremely confusing
we’ve learned that hyper term is where
is it even oh I keep licking it but it’s
as I kicked the window and I pretend
it’s not there it’s it’s a piece of crap
doesn’t work but it has it’s built with
web don’t jeez that’s it’s nice also
learned that learning an entirely new
technology stack might not be completely
super workable when you’re doing a
two-hour and actually do happen two
hours but it was one it wasn’t fun it
was suffering
I also loaded like comics and it’s not
an absolutely horrible coding font it’s
it’s perfectly fine from a readability
standpoint and it kind of makes my coat
look a little bit more friendly for some
reason let’s compare it to the let’s
remove that from the cynics eaves what
me there and see what it looks like it’s
I kind of find myself missing Comic Sans
a little bit now that I’ve I’m so used
to it oh well this was a very weird
little post vacation episode what did
you think about this challenge format I
kind of I kind of want to get it working
but it needs some work I don’t know what
what are your ideas for improving it or
making it work or just leave a comment
if you find that this is this cannot be
made workable at all thank you so much
for watching this has been episode of
fun fun
function I release these every Monday
morning Oh 800 GMT you will forget that
no so make sure that you subscribe or
you can check out another episode right
now by clicking here I am mpj until next Monday morning stay curious
summer hiatus some arrests or let me
turn off the air conditioning thing
feeling good feeling rested excited
about the autumn season feels almost a
little bit weird to record videos is
talking to myself into a camera instead
of having Sun and talking to other
people there are no lights in the
background I am that’s because I’m going
to be repainting this wall because and
be where you won’t be able to unsee this
there is a spot over here where I messed
up the painting so I have to I wouldn’t
do it and there’s actually a spot over
there as well so yeah that’s a project
I’ve been procrastinating on for some
time alright so today I would just like
to spend 120 minutes coding something
but I didn’t really know what so I just
asked you find people on the Twitter’s
most voted was by Getty Phi I think it’s
kind of highly voted because he has a
huge audience but here it was a good
idea he had a speed typing challenge a
speed typing challenge give a random
number series of words tests how quickly
and how accurately you type it also
maybe on harder levels move the words
around or other distractions mmm
somebody in the mentioned that this is
similar to some Oh game and get if I
said that this is the idea like
you go like this and then and you just
type ha
this would be good because I am the
worst typist and then you like this is
extremely satisfying to do oh my god I’m
getting distracted so yeah that is
possibly something that we could do that
I like that idea
this one was interesting a game where
each connected user is assigned a number
and they have to press this button in
the correct order of their number live
the present button out of time it resets
everybody loses if everybody reaches the
end in order the button gets bigger
which is an interesting take because it
would add a multiplayer aspect to it or
this Twitter where you can’t tweet just
a button in the middle of the page that
does absolutely nothing must use es6
bubble webpack reactor duck CSS grid
WebGL and web they are also all features
must work in ie8 have fun drill
instructor window title just a tab that
keeps screaming at you code code code
keep coding fingers on the keyboard move
it move it I like this as well screw it
I think we’re going to go for this speed
typing challenge actually that’s yes it
yeah it’s the most voted one let’s go
for democracy so we know what to do we
were like we were gonna do a speed
typing challenge but I am a big believer
in that restrictions breed creativity so
I asked people what technology I would
be forced to use in technology
Rison ml l reason ml reason about fable
compiler right the server client would f
shop reason ml sigh all right grease in
ml it is to be clear I know very little
about recent ml I’ve watched one talk
about recent milk that’s it
blick suggest RTL Arabic Arabic variable
function name so so basically this no
loops
only recursion that might actually be an
limitation inherent in reason ml hang on
oh you actually can loop and reason
about
oh wow make it compatible with Internet
Explorer 6
that’s an internet history for you only
vanilla JavaScript no NPM packages no
variables right on your phone one-handed
you know what we’re going for and no
loops only recursion and editor forms
Comic Sans
alright so we’re going to make a typing
challenge in recent ml that I don’t know
anything about and we’re going to do it
without loops using only recursion and
we are going to have the code font of
our editor to be Comic Sans that is very
sensible let’s do this let’s start the
timer see startup Tito it go
Oh what was I doing
[Music]
sometimes it’s just really hard to just
figure out what to do okay objective
objective just a simple next step get
recent ml working in a real chap
let’s do that npm install created react
okay hang on so perhaps this is a better
choice so this is uh this is kind of
like great react up for reset okay okay
yep but do you know what we should do
do you know what we should do we should
replace our terminal with a different
terminal because I’m feeling like an
attentive deficient squirrel everybody’s
like what is happening why what is he
doing what I feel like if you don’t want
know what her hyper terminal is it’s
kind of like it’s a browser-based
terminal it’s sensible to build
everything with web technologies no
matter what it is at this point the
client calls and ask whoa how’s the
project going and you like we’re making
great use of your billable hours okay
let’s do this reason ml thing your I
will never use yarn yarn is for people
that live in the second half of 2017
it’s a very specific type of progressive
reactionary type JavaScript developer
they adopted yarn really really fast
when it arrived and fixed some of the
major issues with NPM but when NPM fixed
those issues they are now reactionary
again and don’t want to adopt the new
annum innum ennum and PM Wow
every X needs a px never heard of that
is this a thing
execute binaries from NPM package oh my
god did not know that this command
existed you learn everything in this way
NP x create reacts up and then we go
crazy
typing crazy crazy and then Oh get
script why am i retyping this means copy
and paste like real developers do ok so
how are we on time oh oh
holy 10 minutes passed this is gonna be
so easy
oh don’t jinx it oh I’m jinxing it we’re
gonna do so great I’m happy hacking oh
you can barely see my little circle
thing here
Jen oh can I change the skin you’re
hyper terminal let’s start Comic Sans
that’s horrible this is the
worst how do you install one of these
okay oh let’s go to the code temp god
this is such a horrible horrible font
it’s the worst font can I do an p.m.
start here and see if we have something
running to read okay fair to compile oh
god its failing already more chill not
found country song bull crap bla bla bla
bla bla bla bla bla bla bla
okay it’s a bug in there you have
to do npm install again what’s what are
we going to talk all great 18 minutes
and 39 seconds I want some recent plugin
for visual studio of
I cannot find Merlin binary at Oak
Campbell Merlin yeah because why would
anything work ever
I have honest talent even Myrna back Oh
Pam Oh Pam a package manager for okay
okay I know that reason Mel is related
to oh camel for some reason but then so
we need to install a package manager for
another language in order to use another
language that compiles down to another
language sure let’s do that how to
install Oh Pam the quickest ways to blah
blah blah blah blah is paste arbitrary
it commands into our channel we get
common not found oh my god Linux people
oh use yogurt no open up for homework
aha yes yes brew install open waiting
you know like there’s a lot of hassle
here but you know like Oh
using recent ml over a normal JavaScript
it’s gonna save us so much time because
it’s it has very it’s it’s very powerful
type type system
yeah it’s come saves a lot of time no
open route found that Oh Pam
oppa oppa minute no idea what I’m doing
mmm you won’t open to modify things in
your system yes you know what like being
a developer means that you get like a
lot of people don’t know but normal
people don’t know how to wait but
developers we know how to wait like
JavaScript developers we’re pretty good
at waiting
but you know who’s better at waiting
Java developers like they’re very good
at waiting especially if they’re Android
developers then they’re spent like 80%
of their time just waiting like I’ve
seen our C colleagues on mine that are
Android developers like they’re so good
at waiting J builder has been renamed
and the jbuilder package is now a
transition package used a doom package
instead thanks for the information aha
you see here like down here there’s like
some Merlin crap good that means
something is doing something that is
involved in reasonable this looks sort
of reactive so we have here some
component which is a stateless component
app react hmm
okay component so this is an object that
extends the component and then it has a
render function that has an um is a
function that takes an underscore itself
we’re gonna switch this to Comic Sans
I’ve reformatted this computer and I now
genuinely don’t know how to make
backslashes
oh that’s a that’s cool I don’t need to
make a backslash I can just do single
quotes don’t fix the core issue oh great
this actually looks a bit saner than in
hyper term actually this looks pretty
nice you know it looks a little bit
friendlier it’s I could get used to this
I could not get used to this so where
does message come from also this is
funky what’s the squiggly thing and the
underscore thing I guess that this has
some kind of significance because
there’s no other message here like this
what happens if I remove this a function
of like that this argument has a type a
blah blah blah blah blah blah this
argument cannot be allied with label
message at rain map and if I put back
the squiggly thing then it works let’s
let’s try to Google it Rison ml and then
what is this squiggly thing that’s not
gonna work yeah this is one of the more
annoying things with very terse
languages like reason or and
and Haskell has the same problem like
everything is your symbols and it’s like
what the hell is this symbol you just
can’t like try to google it but like
there’s no way to Google symbols and
you’re you’re screwed and who dogs dogs
dogs dogs dogs
perhaps I should do these things on a
live stream so that people can help me
out
otherwise I’m kind of like what I should
definitely do this as pair programming
at least when somebody could be googling
while failing at googling while I I code
then I could look better as a person a
Bloody Bloody Bloody Bloody Bloody blade
labelled arguments multi-argument
functions especially those whose
arguments are of the same type can be
confusing to call okay so x and y if
they have it sounded like to say if it’s
okay if it’s just two numbers then it’s
I call yeah then the order of them
becomes weird which is X and which is
why not make sense as a problem and Oh
camel and reason you can attach labels
to an argument so these are labels oh
and then you call them like this okay
okay
since we have carrying more than that
below we can provide the arguments in
any order oh so that you can auto carry
them
that’s very cool that’s actually very
cool that’s a very neat language feature
I like that a lot so what is this
what’s the underscore if I do more of
these episodes I’m gonna call them
mostly scrolling perhaps this is just
some kind of convention for stuff not
being used because I know that you do
tend to do this in Haskell to indicate
that because this is perhaps just a more
descriptive way of doing that
perfect we learn something so we have
reasonable are working with react that’s
mission accomplished good
and we also learned a little bit of
reason we know that this is labeled
arguments which is a very cool language
feature the question is how to proceed
what is the next step we want to make a
typing challenge so perhaps we want a
list we want to display list of words
definite type and as we type them they
should disappear yes that is what we’re
supposed to do where are we on time
we are 38 minutes in we’re almost used
half of our time yeah sure
oh I think we’re gonna do this six out
an array and let words and a waffle rule
that dogs perhaps it’s just a triple
were using as a record so I like they’ll
scan objects list an array to erase
that’s beasts are not allowed this
Sphinx right now that fixed it don’t
even cycle I do not think that let’s try
to just map through that the record
field map cannot be found yeah okay
mapping arrays reasoner well o acts of
mine blah blah type signatures may still
be cryptic to you but you’re still
profit from learning how to read them I
am not convinced axel I will click back
okay maybe I actually can read this
thing so this one array don’t map this
has type list string but somewhere
wanted array map Oh an array is
something different
oh that you declare them with yeah I
need this to return elements I suppose
so
what happens if I do this call it’s
missing an argument of type string
purpose that you have to do that just
messing around right now
perhaps this needs to be contained in
the deal okay so it says that this line
here has type array react reason react
dollars so they it makes sense
this here returns an array or react
element but something somewhere wanted a
reactance very simple I just kind
of need to see a simple example of it to
just get my brain out of breakage this
is really hard to do a little I should
not do these things alone
you should not program alone programming
on sucks array map reason and now react
usage bla bla bla bla bla bla be free be
free buffer than friend a friend of
every Syriac tutorial this should get me
started
oh look how happy is scrolling scrolling
scrolling scrolling scrolling oh there’s
some rate ailment here value of
array to element cannot be found in
recent reacted what the value array to
element cannot be found in recent react
is this deprecated since this tutorial
when is this tutorial written 2017 what
the hell I don’t know what to do array
to the surprise be crazy
do they have to do something to pull
that in somehow where does this even
come from like it’s not included
anywhere that’s a really extremely
annoying
this magic oh so stuck I don’t know what
this error means the value array to
element cannot be found in recent react
what if we just
defy this a little bit get this up here
and just have you been conned in this
language okay right so let’s actually
try to give you this there and I’m gonna
just try to actually used in line this C
so that we get rid of the confusion that
is involved in array map so yes go deal
okay we’re back to the problem at hand
is that a value a rate element can’t be
found in recent react I have no idea why
it’s giving this error message this is
so obscure tell you Ray – you sound like
you’re using outdated copy of recent
react maybe you’re saying oh five three
and we are on the current version
that’s not a problem then search that
did not work oh they have a search that
is therefore it doesn’t does it do
anything
good job recently act fine let’s let’s
do this here
react tray Jesus it seems to me that
this should be working such a stupid
thing to get stuck on this recently
acting what did we use we did use some
we used something else don’t remember
what this looks different let’s let’s
use this except and I hope it just
randomly works instead of the the broken
thing that we used because it’s probably
it can it’s not our fault that this is
not working it’s somebody else’s fault
that’s our MRF typing crazy and we are
going to do CD code tab and then we’re
going to mmm
call this type in crazy and then we just
going to take a crazy and then we go
into BM installed and then p.m. start
yeah this is what development is like
for some reason my code wishes review
code is black and if I open it again oh
it’s no longer black have you – have you
tried turning it off and on again so
let’s see if this array element works
here the value array element can’t be
okay if I check the recent reactive
documentation here actually it seems
like it pins it paints a very different
picture to solve this issue reason has a
special bread syntax so if I do if I do
this
so breaks but I can do that I could not
this is space
no oh you bastard
so this is different it is it is so I
need to have the actual space here
that’s evil Jesus that does not make
sense
Oh Oh God
so now I can do this can they will this
work whoops i refresh the terminal
nothing works
Oh hyper term
my experience with hybrid might be this
is not good
perhaps not everything should be built
in browsers yeah there yeah and we’re
back to this area Rachel my can be found
in resurrect because this is probably
just deprecated and the tutorial is
the value message can’t be
found that makes sense because we need
to make this of the function know what
let’s do this into a label because we’ve
learned how to do labels my new keyboard
mapping is messed up so this will break
because this is not a function let’s see
what that looks like
this is syntax error the call is missing
its argument of type message oh that’s
actually a helpful error register so
then we can do message equals message
said not yet
syntax error okay dot it let’s go back
to the reefs and docks ie I would like
to say that we’re making some kind of
progress oh my god I’m so bad should be
the call this is how you do it okay
let’s actually just do in life Springs
here first syntax are line 23 charges
13200 their self thing now there’s
another thing line 32 the Chavonne yeah
it should be like that okay now that
works i want to revert this message
thing here message message message value
message can be found that sure message
lady would be to do to miss an argument
and it’s going to be message and we have
never why is that working
so does this only work on as this the
children fixed and we’re going to pass
in something like this then works so I
can’t actually I can’t actually add an
expression here needs to be a variable
god that’s cumbersome why why is that
like this magical translation really
makes it hard to grasp what is going on
I wonder if we can can we see what the
code word is actually
happening oh this just creates some
garble I said the reason Amell doesn’t
really generate very readable stuff at
least not react react reason God so I
have no idea why this works but if I
inline this just all right but let’s
actually let’s try to actually make some
progress we know how to get the children
in surah so let’s go back to word let’s
let’s make these let’s get some words
all right
and we won’t get rid of that for bet
we’re gonna do s that we go to do array
dot map and we’re going to for each word
we’re going to return a div that
contains a reason reaction and we’re
did that work
they found a bug for us the coal is
missing argument of type string do you
mean – I need to do event oh that worked
all right cool now it’s mapping but
again if I do this it won’t work I
suppose and we have no idea how to
convert that into an element other than
this stuff and that does not accept
inline expressions Garg Oh twenty more
minutes to get something going 18
alright let’s add an input field mm
input on the click no on the changes
pose and then self handle handle change
value handle change cannot be found
correct so let’s add that mr. handle how
does this look
cool oops it’s just two organs an event
itself is log let’s handle the change
change and then long changed refresh and
yes and we get some change events good
good
so what does this event look like can i
event dot target it’s just I actually
just buy I always wanna love the event
object here oh it’s these react event
proxy events I don’t quite remember how
they look what if I just did that react
events the Y is these ones yeah do we
get those at end of time yes do that
knowest what I get no I got a compiler
with this syntax error on line 32 what’s
up what was it visited space know if
you’re accessing fields on your event
topic like event target value yes you’d
use a combination of react Dom re helper
yeah and buccal scripts objects access
FF i oh that’s convenient
oh now it works all right okay I was so
silly I was supposed to use react event
dot form doxology open the– oh the
event object and then use square square
value yeah
obvious obviously hello I’m Vijay my
name is Satan I designed this API and
I’m so happy that you feel that way what
is this even
intro because this is X for accessing
JavaScript object because this is Josh
gift object is kind yeah yeah
all right that was that was hard that
was really hard
how much on her oh great three minutes
yeah I am NOT going to get into the
whole thing of setting state which would
probably be the next point didn’t get
pretty far with this reason ml was not
exactly jump headfirst into sample to
work with Jesus Christ now was
emotionally hard for me I what learnings
did we get from this
getting started with a reason ml project
was actually priestly like there was a
create react app like thing for it the
project still seems to be moving quite
fast I found at 2017 tutorial which had
like was completely broken from breaking
changes and the syntax on how to get
children in is there probably logic to
it but like this thing here where you
need this space in order for it not to
break it’s just so nasty reasonable has
seems in some ways of nice language I
really like this these labeled arguments
and then it Otto Carius it seems that is
pretty cool the fact that you have to do
these things like that it doesn’t
default to strings and you have to
declare things on strings at least in
the initial example seems a little bit
cumbersome perhaps is not all that comes
reestablishes my prejudice that type
languages add just a lot of stuff that
you had to add everywhere also this
intro thing
with JavaScript objects is good lord
what is even happening here
I also find the unpredictability of the
fact that I the spread operator here
allows me to operate on this as a
variable but if I try to inline this
exact thing here it doesn’t work that is
also extremely confusing
we’ve learned that hyper term is where
is it even oh I keep licking it but it’s
as I kicked the window and I pretend
it’s not there it’s it’s a piece of crap
doesn’t work but it has it’s built with
web don’t jeez that’s it’s nice also
learned that learning an entirely new
technology stack might not be completely
super workable when you’re doing a
two-hour and actually do happen two
hours but it was one it wasn’t fun it
was suffering
I also loaded like comics and it’s not
an absolutely horrible coding font it’s
it’s perfectly fine from a readability
standpoint and it kind of makes my coat
look a little bit more friendly for some
reason let’s compare it to the let’s
remove that from the cynics eaves what
me there and see what it looks like it’s
I kind of find myself missing Comic Sans
a little bit now that I’ve I’m so used
to it oh well this was a very weird
little post vacation episode what did
you think about this challenge format I
kind of I kind of want to get it working
but it needs some work I don’t know what
what are your ideas for improving it or
making it work or just leave a comment
if you find that this is this cannot be
made workable at all thank you so much
for watching this has been episode of
fun fun
function I release these every Monday
morning Oh 800 GMT you will forget that
no so make sure that you subscribe or
you can check out another episode right
now by clicking here I am mpj until next Monday morning stay curious
Please follow and like us: