hello and welcome back
to a fantastic afternoon of pike online
education track and it is my absolute
pleasure to welcome katie bell uh to the
stage our virtual stage um katie's going
to be talking about real python made of
blocks
which is a fantastic thing for any
python to be made out of
um i'm not at all biased because i've
been playing way too much duplo uh with
my kiddo um but
katie uh i have a fantastic bio here of
katie which she gave me full permission
to add some um uh made-up facts spurious
stats into i i haven't taken her up on
that opportunity but who knows uh so
let's see katie's 10-year career as a
software engineer has been pretty darn
fun
i i love that i love it uh she helped
develop google docs and later was on
call for some of google's biggest cloud
infrastructure as a site reliability
engineer she sold some serious technical
and operational challenges at campaign
monitor as the lead engineering uh
productivity team and she helped get the
education startup rock learning off the
ground as their first employee represent
today you'll find her freelancing for
startups as well as working on her own
projects um
more recently she's been teaching
programming to beginners for a long time
and is now an instructor at general
assembly i am super super excited to
hear this talk katie
tell me all about blocks in in my new
favorite thing
cool
well i'm not going to start off with
blocks um start off talking about myself
i've been teaching python for a while as
mentioned
mostly i was teaching high school kids
more recently i've been teaching python
to adults as an instructor for general
assembly
and anyone who's been teaching coding to
beginners will know this that coding is
hard coding is
really hard um there's a lot of stuff
that has to go on in your brain while
you are doing coding
while you're writing code and while
you're reading and understanding and
debugging code there's a lot going on so
if you're an experienced developer you
might not realize just how hard it is
for beginners so let's go through a bit
of an example
uh here's a little python program
uh has a while loop uh and it asks
repeatedly
to for the user to type in what did you
roll as in a dice roll
uh and if you type in you know what what
dice rolls you got uh it tries to keep
track of how many sixes you've rolled in
a row uh and when you reach three sixes
in a row it stops asking and says that's
three sixes in a row
and
if you understand python and you
understand all of the syntax and
everything that's going on uh your brain
can focus on
what these variables are and what
they're doing actually takes quite a lot
of mental capacity to sort of step
through and go okay i start the program
the sixes variable is zero okay if they
type in a six then that adds one and now
the sixes variable is one if i type in
another six now it's two but if then
they type something else then it's it's
not six it resets sixes to zero
and if they type in something else yep
it's still zero okay if they type in a
six that's one if they type in another
six that's two
okay and then it's three and then that
stops the while loop and then it prints
a message okay reading code
means keeping all of this like variable
state uh in your head as well as
following the the way that the program
is executing
if you are
a beginner to code it's really hard to
even think about those things because
you're too busy trying to remember all
of the stuff that's going on in the code
like what is a variable like why is this
print but not with a printer what do the
quotes mean there's parentheses there's
equals and and double equals and they're
different but like why does equals not
mean that the things are equal it's
actually changing something i forgot
the colon and the while and nothing
works and the indenting is wrong uh and
it gets really quite a lot now if you
happen to be a high school student in
your seven or eight and you're maybe 12
to 14 years old uh then maybe you can't
even think about these things because
just using a computer is taking so much
of your brain or your reading and
spelling actually takes quite a lot of
concentration um or even typing and
finding where the colon button is on the
keyboard is hard enough already and it
is just too much
for your brain to cope with at any one
time right this is called cognitive load
i have a limited amount of working
memory and when you are learning new
concepts and absorbing new ideas you
need to be storing that information in
working memory until you can build it as
a long-term memory and a long-term skill
so your brain is working really hard to
try and learn a lot of new things at the
same time and this is part of what makes
learning to code really quite difficult
uh so we don't teach kids to code or
anyone to code just all at once we break
it down into steps oh and you might have
not noticed that even with thinking
about all of those different things
there's still a bug in the code where if
you run it it never actually finishes it
never prints three sixes in a row no
matter how many sixes you get and then
trying to figure that out is another
step that's really hard
and it turns out to be because this
input returns a string and we're
comparing the string to an integer and
the code doesn't actually do what we
expect it to do
so this is all
really hard
and too much stuff for your brain to
keep track of at the same time
so we break coding down in two steps we
don't try and teach code all at once we
don't throw large amounts of code at the
students and we don't get them to build
really complicated programs right from
the start you start with hello world you
start with simple variables and ifs you
start with programs that have just text
input and output before you try and deal
with things with graphics you can build
it up step by step
but this is a little bit demoralizing
and frustrating right learning to code
from scratch
it takes a long time and a lot of energy
and a lot of effort just to get to the
point where you can build mildly
interesting text input output programs
and it's really hard to build up enough
python skills to be able to actually
build all of the cool and interesting
things that you can do with python you
can build web apps you can build games
with pygame uh you can build cool things
with micro python um
and you can analyze data and
make interesting sort of scientific
analysis out of it right using numpy and
scipy but actually getting to the point
where you have enough python skill to do
that is a slow and frustrating process
so again we don't teach things
in that order most students in primary
school
nowadays are starting to learn coding in
a simpler way first instead of starting
with hello world and building up the
syntax step at a time you start with
something like scratch scratch is much
much easier for students to pick up at
first right you don't have to remember
the syntax
you don't even have to remember what
blocks are available to you what
functions and what components are
available to you because they are all
listed there and you can go and find the
ones that you need if you're not sure
what a block does you get very immediate
feedback to try out that block and see
what it does
you don't need to keep in your head
all of the things that the program is
doing because most of the things that
the program does are visual things you
can see where the cat is moving across
the screen uh you don't need to keep in
your head you know what the xy
coordinates are of the cat
but more importantly you get to build
cool things you can build games and
things that you can show off to your
friends and
coding is this uh empowering experience
where you can solve problems on your own
where you can discover things on your
own
and build cool things uh very very
quickly
right it still works as a step towards
building other coding skills if you
learn
uh how variables work and how ifs work
and how loops work in scratch
in theory it should make it easier to
then move on to
python text-based coding
and let you build cool things there
without having to learn quite as much
new stuff at the same time
but what i find in practice is even
after learning scratch
this gap is still really really big you
go from building cool games in scratch
and when you start off with python it
takes a long time to get to the point
where you can actually build interesting
and cool things in python
you need to build up
the syntax
the control structures the variables the
data types
and then land functions and then you can
start to look at all of the cool things
that you might build now there are some
exceptions to this micropython in
particular lets you start to do you know
blinky leds very quickly
um but for most of the cool things that
you might want to build with python it's
actually really hard to get there
and it's hard enough that in my
experience with most teachers
it's really hard to do that in the year
seven and eight curriculum where you're
expected to teach general purpose
programming languages or text-based
programming languages but with the
limited amount of class time you get and
with the skills that the average you
know year seven or eight student has
it's really hard to get all of your
students to the point where they can
build something cool and interesting and
exciting
in text-based programming
so how do we bridge
this gap how can we take students that
were maybe already excited about
building applications in scratch and
scratch is already quite difficult to
build things in right because
programming is hard um but how do we
bridge that gap so that they can start
learning python and building cool things
in python
without it becoming this sort of slow
and frustrating experience
now i'm not the first person to try and
do this
by any means blockly is a really great
tool for this we saw in renee's talk
this morning that building micropython
programs with blockly is perfectly
feasible and this is much easier for
students to get started with they can
see the blocks that are available to
them
they can build programs out of blocks it
avoids typing it avoids syntax errors
and it avoids that process of having to
memorize all of the things that you need
to be able to type to be able to write a
program
it doesn't quite go far enough to make
it really a smooth transition into
python if you learn to code
some things with blocky it does blockly
it does help you get towards
writing anything else in python but it
doesn't quite go far enough or at least
as far as i wanted it to do
and so i decided that i wanted to build
something else that would be another
attempt at trying to bridge this gap
something where it's easy to get started
it's easy to pick up and start using it
but
it is a smoother transition to go from
there into text based python and a
smoother transition to go on to build
all kinds of cool things with all the
full flexibility
of what python can do and all the cool
programs you can do once you learn to
code
sorry i call this project split code uh
it is a work in progress um it's
currently under construction but all of
the things that i'm going to show you
today are already things that work uh
things that are real that you can write
real python programs with
so let's talk about what we are aiming
to build uh with blue code what i am
aiming to build here so the four things
i'm aiming to solve right one it needs
to be really easy to get started is to
have low cognitive load you don't need
to learn or memorize
or or comprehend a lot of things to get
started and start to write your first
programs
i also want it to have a really smooth
transition into text-based python as
much as we can it should also have
really fast feedback and the ability to
write code and iterate and see what your
code is doing
without having to learn how to use a
fully featured debugger
and it should also have
as close as possible
to the features and flexibility that
real text-based python has
and make it as unlimited as it possibly
can be so this is a pretty ambitious set
of goals i've not achieved all of the
goals uh yet but let's take a look
at the first one and see what we've got
so far
all right let's go and play a video
um so on the left side here we have
like in scratch a set of all of the
blocks uh that we can use it's not a
complete set
but most of the blocks that you need to
get started are there
and we can drag and drop them in and we
don't need to type any of these things
dragging two blocks in lets me run my
first hello world program or i could
edit the text make it actually a hello
world program
and run it again
and this is all happening in the browser
it is running a real true version of c
python in the browser uh to be able to
do this uh really quickly uh so we can
build up a program
with a combination of drag and drop uh
and typing
uh and enter you know interactive stuff
uh in the terminal there
one of the key differences between this
and other block based languages is that
the
way that you do mathematical expressions
is more closely related to how they work
in maths class or how they work in
regular python
you assemble a maths expression just
with like numbers variables and
operators um just like that uh it has
uh order of operations uh same way again
straight up creating python code here if
you don't remember how to type the star
to do a multiply
you can also type the word multiply or
you can even type work type the word
times
in the same way if you want to use later
less than or greater than and you don't
remember you know which symbol does that
you can just type less than or greater
than and it will order complete uh to
find the thing that you're looking for
all right so you can assemble
uh by writing text
so you have a cursor you can move the
cursor around with uh the arrow keys uh
to find where you want to enter things
and just start typing to enter things in
with autocomplete but if you don't know
what to type you can just go and find
the block and drag it in um
things like
nesting and indenting all just work kind
of the way that you would expect them to
work
okay
and now we go to the next slide
next slide please there we go
uh so it avoids like most block-based
programs it avoids all of the common
problems that really
hit students at the beginning with
syntax errors you
cannot write these syntax errors you
can't write a single equals by accident
because it will auto-complete to a
double equals for you
um and you can't accidentally kind of
assemble the programs in ways that don't
make sense so the one of the frustrating
things with text programming is that you
can just type anything into the text
editor and 90 99 of the things that you
could possibly type will be invalid
programs right whereas not so with block
based uh editing most of the things that
you can put together are valid programs
not all of them are but the vast
majority
okay so that's how it is to get started
uh it's easy to write valid programs
it's easy to find the pieces that you
need to put together to write valid
programs
but as for a smooth transition to
text-based python
the fact that you can navigate around
with the cursor that you can enter the
code by typing with an autocomplete
it means that you get used to this idea
that i can just type code with the
keyboard uh it takes fewer keystrokes it
takes less uh weird punctuation
characters that are hard to type um but
you are still typing in code into the
editor in the same way
uh it looks and feels closer
to uh the way that text-based code what
looks and feels uh in a regular editor
so here's an example of um one flavor of
blockly the blockley is quite flexible
and you can make it look as more or less
like python as you build it up
but i find that the the split code one
in the middle is a sort of closer
representation to the way that uh code
works in a text editor it's obviously
not exactly the same
but the way that you edit it and the way
that you write it is very very similar
to a text-based program
so if you were to learn to code in
python through the split code ui
because it reads and feels and writes in
a very similar way to text-based python
um
it's a not more natural transition into
writing python in a text file
you wouldn't need to learn how operators
and the order of operations works
particularly with things like and and or
you wouldn't need to learn how the
control structures work with indenting
or the different kinds of data types in
python or the python functions and
libraries that are available to you the
only part you would really need to learn
is the detail
of the syntax and which punctuation
characters mean which things you'd also
need to learn string escaping because
adding quotes into a string in the split
code ui doesn't need escaping so to get
that
transition into text
the only parts that you really need to
learn are just those parts that are very
specific to writing in text and writing
with syntax
so all these kinds of errors um
are things that trip up beginners a lot
but if you were already familiar with
how ifs work and you were already
familiar with how strings work and
variables and functions um it is easier
to learn the syntax than it is to try
and learn the syntax at the same as time
as learning everything else
okay
moving on to fast feedback and iteration
uh this is one of the bits that i am the
most excited about
one of the nice things about python and
one of the reasons that we like to teach
python is because you have this
very fast feedback with the python reply
right you can type in some code and
immediately see and find out what that
code is doing you can type in a little
bit of maths and find out what the
calculation is
in my experience the students might use
this a little bit at first but they very
quickly stop using it because it is a
difficult context switch to make from
like writing code in a file and running
it to writing the same code over again
in a rebel just to try it out and
experiment with it and they don't really
use the rebel very often even when it
would actually help them figure out what
their code is doing uh in a much more uh
real-time kind of way
and actually making that transition into
the repel and away from the text code uh
is difficult
uh even though the refer could be really
useful
it also involves typing out your code
again a lot of the time uh when you're
struggling with typing even into a text
file the idea of typing something and
then it you know it's it's gone
immediately is a little frustrating
so with a split code
i've added in a system
to essentially make your code act like a
ripple all the time
so to see how this works i'm going to
write an example program
where i am asking the user to type in
the temperature in celsius and then i am
converting it to fahrenheit it's a
relatively straightforward program
um but we'll see how it's still easy to
get it wrong in python
so i write a little bit of code and i
run it i type in the value 40.
and i can see that my celsius variable
is now set to 40. right it's got a
little bit of text here that tells me
what it's actually doing so i start
writing the next part
it remembers that i typed in 40
and it continues to write
the pro it continues to rerun the
program with the last text input that i
gave it
but i can see here that as i'm just
starting to calculate the fahrenheit uh
my fahrenheit variable is being set to
40 40 40 40 40 40 40 40 40 40 40 40.
right
and i can immediately see wait a minute
that's not right there's something wrong
here
and start to investigate
now instead of kind of going instead of
the student then going
what the hell is going on
they can look at what the code is doing
and go oh
um maybe i've seen this before maybe
this is something specific i can look up
or ask a teacher about
this is a string and the celsius
variable was a string and a string times
a number repeats that string over and
over again
so it's very obvious what's going on and
notice that i can do this and i can see
what's happening and i can see what the
bug with the program is without having
to add print statements anywhere or go
into a step-by-step debugger to be able
to find that
so if we keep going we can set the
celsius variable to like the ant version
of the input or we could use a float if
we wanted to support floats um and now i
can immediately see that that has solved
my problem and i can continue writing uh
the calculation for fahrenheit
so i calculate it plus 32
okay 104 that actually seems like the
right kind of number that i'm looking
for for fahrenheit um and i can print it
out
uh in the same way maybe i'm writing
some more stuff and i find that
uh because i cannot add a string and an
integer um i get a type error
this error is easy to easier to identify
because it puts the error right next to
where the line is that caused the error
so i can go all right yep the fahrenheit
i need to convert that into a string
okay
so now i have a program that works uh in
the same way if i have an if um
and i want to say if it's if the
fahrenheit temperature is greater than
100 then uh friend like it's really hot
now again this whole time since i
started writing the program i haven't
hit the run button once it has
continually
rerun the program uh every time i've
changed it so that i can immediately see
the effects of any changes that i make
to the code if i change the the if then
i can immediately see that the result of
the if is different and whether or not
that line of code has been run
now this is great for
lines of code that are only ever run
once what happens if you have something
like a while loop where the code is run
again and again
and so there's a solution for that too
if you have a function
it can show you maybe this function was
called multiple times
and
we can see that uh what is going on when
i run this function
now when i run it automatically i do put
a limit on how many iterations you can
do because it's all too easy to
accidentally write an infinite loop but
when you run it manually it doesn't have
any limit on the iteration so you can
still write an infinite loop and see it
going until you hit stop
um but i can see here that like my
while loop ran 100 times and if i change
it to add 10 every time it only runs 10
times
and this is again i could see what was
going on without having to print
anything to the console but if i do
print stuff i can also see
what the output of my program is
immediately as soon as it's run
okay so here i can
play around with the variables maybe we
start at a different one a different
number we start at 500 and i can see
that it only runs 500 times now so you
get very immediate feedback
on what your code is doing
and how your code is operating without
having to go through that whole
process of like writing a bit of code
running it writing it running it and
me as a teacher constantly telling my
students to run their code more often
to build it up a little bit by a little
bit uh and also to add more print
statements if they're struggling to
figure out why their code isn't doing
what they wanted it to do none of those
things that would be necessary anymore
if they could get that kind of real-time
feedback
automatically
so this last part uh real python with no
limitations um as you can see at the
moment it only does text input and
output right and that's not not really
good enough it really needs to do
something exciting um which it doesn't
do yet that part is still under
construction
but uh the code is
as close as you can possibly get
to
real python code in the way that the
operators work and the way that you can
do like dot to get um attributes or
methods on an object so here we can do
a variable.upper to get the uppercase
version of it um we can do replace we
get the same errors that we get from
python um
it does
everything in the same way that python
does it because it is literally writing
and running python code um
so
aside from adding some more features
into the syntax um
it's not dependent on having a specific
block built for every kind of function
that you might want to use because the
blocks are built in a generic way that
you can call any function or you can
call any method
or attribute on an object
so
there is more work to do to support
lists and dictionaries to support
functions and classes um but it should
be possible to just say
i can do an import and i have full
access to the standard library um it
should be possible to do third-party
libraries
and other things where you can just use
all of the flexibility that is out there
in python in your code without having to
write text python uh to be able to get
that kind of flexibility
so that's the goal it's not there yet um
we'll see how we go
so these are the four goals uh that i am
working towards i want it to be easy to
start uh have a smooth transition to
text-based python have that really fast
feedback and iterative process to
writing the code so you can immediately
see what your code is doing
and to have it be
the full flexibility of being able to
write python
rather than being like a walled garden
of only these blocks are available to
you
uh the next steps of the things i'm
going to be working on um there are some
sort of
things that make the editing process a
little bit uh tricky or confusing at
times i'm going to smooth out those um
i'm going to add cloud storage and the
ability to share your code this is
particularly important for remote
learning um
but more importantly i really want to
add the ability to build meaningful and
interesting programs that are engaging
for students in high school and things
like building a discord bot
or some data analysis and visualization
or 2d games um or the ability to write
micro python or circuit python code um i
would love for you if you're a teacher
of any kind to tell me what it is that
you think your students would be most
excited about building
and i can focus on those kinds of
programs first
so please do reach out to me i'm very
contactable
um
because i want split code to be
something that does entirely bridge this
gap where you can start on split code
when coming from a block based language
like scratch
and where you can build interesting and
cool things with split code and build up
an understanding of how python works and
how programming works um and make an
easier transition into python or other
kinds of text-based coding
so that's what i want to build uh thank
you and uh if you would like to know
more
there's a site splitcode.io where you
can sign up to the mailing list but
please also reach out to me in the chat
please dm me on twitter or send me uh
send me messages anything anything goes
thank you fantastic thank you so much i
i
i've collected together some of the
amazing comments from this chat we have
like two minutes for questions and
there's no way we're gonna get through
all of them um
this one is the highest highest rated
one can sploot use type hinting features
to help autocomplete be more
contextually aware
um so i was hoping that autocomplete
would be good enough with just the
rundime information if you happen to
know that a variable is of a particular
type at runtime
that makes it possible to get all of the
autocomplete help that you would get
from type hints without actually needing
to write the type hints in
um adding tie pins would make the syntax
quite a bit more complicated um
we could potentially in the future add
type hints into the syntax
but i'm hoping that for most students
the ability to build interesting things
without tie pins
will be made a lot easier by having that
real-time uh runtime feedback uh as to
what you're very you know why do you
need to know the type of your variable
when you know the actual value of your
variable at runtime
yeah
cool yes yes yes um uh more questions
i'm just gonna race through them could
split code easily use micro python and
with a bonus question a simulated device
in the browser could show what a device
might do and if a real device was
connected it would possibly run on the
device would this maybe be possible
uh it is maybe possible it's all a
matter of like how much we can get the
browser to do
um getting that feedback out of the
micro python system might be a little
bit trickier than it is to do with just
python running in the web browser um but
i would love to have it work with
micropython
with micropython simulated in the
browser that would be really awesome
which possibly leads into the next
question that i'm massively going over
time and i'm going to be booted out in a
minute um is split code open source can
people contribute how can we support you
oh i would love to have support um so
split code is not technically open
source i am hoping to make this into an
actual product at some point and so it
is not under a completely open source
license it is under a slightly different
license that being said the code is all
up there on github uh under a license it
will become open source automatically
after a period of years
fantastic do contribute to it but you'll
have to agree to a license
excellent uh and i imagine they can
contact you by the means on this twitter
to find out more if they have questions
um there are a number of other questions
ah can split could also output python or
other language syntax so the user can
see how their program would look in the
actual language
yes i am
planning to add a feature where you can
see the python code that is generated uh
it should also be possible to edit said
python code and bring it back into
sploot code
and in as many times as you want to um
that is a feature once sploot code
supports much more of the python syntax
than it currently does though that is
very shiny okay there are a million
other questions i'm going to throw them
over into the hallway
thank you so much katie that was
fantastic um thank you so much for
joining us um next up
after a short break uh we have 10 tips
for teaching technical topics from tom
uh stay tuned for more alliteration um
katie thank you thank you so much thank
you for joining us um you're fantastic
i'm so keen
you