Okay, so hi everyone. Awesome that you're all here. I'm Jadka, this is Jens and we will
now present SNAP, a programming language that we work on together with Bernat and a few
other people that I'll mention in a second. And what we want to do with you today, or
what you have to listen to, is first I'll explain shortly what SNAP is and why we care
about it. Then we'll show our three guiding principles and if we have time in the end,
Jens will show what's under the hood of SNAP as well. Okay, so SNAP is a visual block
space programming language and I'll show you that to you in a second. It's also like
MicroBlocks Live and Parallel and we develop it together with people at UC Berkeley in
California. So we have three people, us three working together with three people from UC
Berkeley, developing this thing together. SNAP is a block space programming language
but it's aimed at high school and college students but as you will see in a second,
you can basically start whenever you want with it. Okay, our three guiding principles,
let's start with the first one, is low floor. So this means that we really want to have
engaging activities for entry level programmers so you don't get scared away and that we really
want to have fun activities that they can do. To show you that, I've built a super
simple what we call a micro world. So this is an extension of SNAP that I customized
myself and this only has these three blocks here and as you can see you don't even have
to read to use them. We can just try them out and see what happens. So let me increase
the stage size a bit so I can click on that. As you can see it's live so I'm clicking on
it while it's in the palette and it's still doing things. I can click on that, nothing
happens. I see oh wow there's an input slot here, maybe I could type a number in here.
Let's see what happens now. Okay, it's doing something. This is stamping a flower and this
one is supposed to be a sponge. It's clearing the stage again. So since we're working with
flowers let me draw a beautiful petal real quick using the costume editor. Let's do a
yellow one. Oh that's brown. Okay and then let me draw something. And let me even fill
it maybe. Yeah wow this is very beautiful and then let's make this even more beautiful
and let's also, that's important, move the rotation center. And let's try the same thing
again. Ah okay this is pretty cool. So now if I want more flowers I can build a larger
script so I can use the central area of snap to build more complex programs. So I could
go to a random position and draw another flower there and go to a random position and draw
another flower there and so I could click on that forever. But it would also be cool
to just have a forever loop that does that. So computers are really good at doing things
automatically very often so why don't I make a loop. So I already prepared this page here
and let's use for the look for the infinity sign because what I want to build is an infinite
loop and let's just copy that and then let's build our own control structure by just hiding
it in the actual, I don't know we don't hide it, let's just do it. So this is going to
be a control block and I'm calling it infinity. And this is going to have two inputs, one
is going to be, no it's only having one input, it's going to be the action. So let me build
this block, I already have it here. So okay no let's do that again. Sorry I'll just delete
that and start over again. Okay I want to make a control structure, it's called infinity.
I want to add a parameter to that and this is the action that I'm going to run. I can
even decide what I want this to look like. So as you might know from scratch our loops
have the C shaped or from snap our loops have the C shaped command structure. So I can click
on that and when I apply that you see that I have the C shaped block with this infinity
sign on it and now I need to decide what I want to do with this block. So first I want
to run the action, I don't have a run block here so let me just open the hide blocks section
and because I hit all the actual blocks from snap and I'll show you how to do that in a
second and let me drag out one of the run blocks. And what I want to do is I want to
run the action and then I want to repeat the same thing and I want to run the action again.
So I think that's correct. Let's try it. So I made myself a forever loop and let's clear
the stage so we can actually see what's happening and let me drag this around here and I can
run my program and I built myself my own control structure and it still looks very simple for
kids but all of you obviously could do that. So this is one thing that we really care about.
We want really simple entry level engaging activities and this is one of my favorite
starter projects but we also want teachers to be able, educators to be able to build
these microverts very easily and we want them to be able to customize snap in a way that
they can use it for their needs. What I also wanted to show you in this project, let me
make the stage a bit smaller again, you can have several what we call scenes in a project
so this is basically a project in another project. So I can now switch to that scene
and here I already prepared a petal and you see that I have more blocks than I had before.
I also have a separate stage so I can switch between scenes and we can use that idea to
build something like language levels. So in the first, in the first micro world I used
I just had that block that draws a flower. In the second micro world I want learners
to be able to build this flower block themselves. So we gave them all the tools that they need
for that. So here for example we only have this block that stamps a leaf, so one of the
petals. So what else do I need to build the flower? I want to do that several times so
I might need a loop and this one as you can see has a number as an input so I can specify
the number of repeats and of course I need a turn in between. So what we want to do is
we want to stamp, let's do a flower with six petals and then I need a turn in between
and also I build this block myself and I want to turn 60 degrees each time so let's clear
before we draw a flower. And then let's do one. So this is how the flower block was actually
built in the first thing. So we can help learners to gradually get new ideas. And then which
is, which I find pretty cool, it's also super simple in Snap to prepare your own libraries.
So I made one if you have a kid in class that is just faster than the other kids. You can
export a library and just let them add more blocks. So here I added a few more blocks.
For example these ones let me change the appearance of the petal that I have. So this one for
example changes the size of it. Let's set this to 100 and then you see the petal becomes
super huge. I can set that to 10. Let's clear again. Then it becomes super small so maybe
we want to pick something in between and we could even do that randomly. So for example
I could add this here and I want the size to be between 20 and 40 and then I get differently
sized petals each time I do that. So if I do it like this you see that this changes
and I really like that about Snap that you can easily expand projects with fun ideas
so they look differently and are more engaging but you only need like one or two more ideas.
This one for example switches to the next costume so if I wanted to add another petal
let's draw one. Let's do the one that I did before but in blue this time. Let's fill
it with something. Okay and then again let's move the rotation center to one of the tips
and we can now use that and each time we draw something we draw a different flower. So the
next one in line and then again we can combine that with what we had before and just create
a beautiful flower field with the blocks that we made. How do you do that if you want to
create a micro world? Let me go to the third one I prepared so this is not actually a micro
world this is regular Snap with all the blocks that you have so as in other block space programming
languages we have different categories here we have the palette on the left where you
find all the blocks for a specific category as I mentioned before it's a live programming
language so you can just click them and something happens immediately and what I also added here
or what I thought I added here but didn't oh that's unfortunate is the so let's just
build it is the project so again we want to have all the blocks that we used last time
so what we had was the next costume block we had the set size tool block we had the
pig random block we also need a division block we had a repeat block we had a forever block
we had a stamp block and we had a turn block and what was the last one oh the second to
last one was clear and what was the last one go to random position awesome and we need
to go to random position and let's assemble these so that we actually can make sure that
our script is working so for a flower we want to repeat a specific number of times let's
do six times then we want to stamp then we want to turn the number of degrees that's
three that's 360 divided by the number of petals that I want so six in this case and
before we wanted to do that we wanted to go to a random position so let's check that that
seems to work awesome we wanted to do that forever and so that all flowers don't look
the same we wanted to set the size to a random position a random size random number let's
do twenty to thirty maybe and we need a second costume so let's just duplicate that one and
let's change the color a bit yeah this is very different awesome this is exactly what
I oh wow okay okay and so we have two costumes so we can actually also use the next costume
block and so we start with a clear stage let's add that at the beginning and let's see whether
this works okay awesome and now if you want to build your own micro world you can just
go to the file menu and select hide blocks and then that's the awesome thing that we
added in the second last like the previous release and you can hide all the unused blocks
and if I do that I only have the blocks left in the palette that I used for my project
and they are in these categories here and I can even make the single palette that I
had before by clicking on the settings menu and then selecting the single palette and
now you have all the blocks in like one palette and you can make your own micro worlds that
have all the blocks that you need for your project that you want to do in class or with
your kids or with some other people who want to learn programming and then you can delete
that and then you have your perfect passance puzzle generator and so this is again the
low floor idea that I mentioned we really want to have engaging activities that have
a cool artifact that looks beautiful or is fun to do but we also want to help teachers
and educators to create these fun and engaging activities in a simple way okay the second
idea that I wanted to present or that we think is or that we care about is white walls so
we want to allow for a huge variety of projects and the ones that we care most about media
projects so we love this idea of media computation meaning you learn general purpose programming
by playing with sounds images texts and one exemplary project for that is for example
from snap you can access the microphone of your computer so in this case if it's running
it should be and this for example is a visualization of the frequency spectrum of my voice that's
just picked up through the microphone so this looks beautiful at the same time as it's interesting
because you can talk about sounds from a physical and computational perspective and we love
to do stuff with the camera so this is another project that I like very much this is pasting
the webcam of my computer to the stage right now I set the transparency to 50% let's make
it fully transparent so the video is still there but you can't see it anymore because
all the pixels are transparent and then I am sending a message to the other sprite and
what's that doing is it's drawing dots on the stage which size corresponds to the brightness
that it's measuring in the image that it picks up from the camera and this is actually a
pretty cool technique it's called dithering and this is how images were made in newspapers
back in the days when you didn't weren't able to print different colors so you just did differently
sized dots to get like a more deep color space so this is what we mean with white walls allow
a variety of projects that are engaging and fun and that also kids who don't necessarily
like Fibonacci might find interesting and the last idea for that I will hand over to
Jens is no ceiling so as I said snap is a programming language that's aimed for high
schoolers and early college students so it's scratch but with all the awesome ideas that
make programming fun and Jens is going to show you this now.
Thank you Jadka so we're having kind of a conflict here because we want to have this
low floor and the wide walls for the kids but we're also having this idealist notion
of blow off the ceiling like we don't want to constrain kids we don't want to dumb down
the language so it's okay for kids and this is kind of coming from the sixties when you
know some of you might remember logo had the idea that you know you don't you don't make
stuff easy for kids but you make it welcoming for kids but you don't constrain it you let
kids express everything they can and this is only one part of the pedagogy the other
part of the pedagogy is geared as Mark said towards teachers towards educators because
if you look at these micro worlds that Jadka has shown let me again go to oh yeah this
is mine already so here is a bunch of blocks like these aren't the regular blocks these
are the ones that we made okay I need to stay more in the center of so y'all at home can
see me we want teachers to be able to build these exercises to build these micro worlds
for their kids so it's not just us you know building something here's an exercise you
can do with their kids but there's a teacher there's an educator wants to teach something
as Yadka did about what was then called you remember the total turtle trip theorem that
was kind of what Yadka showed you about so we built a micro world to that which language
are they going to build this sub language in are they going to have to learn another
language to build these little domain specific languages no you saw Yadka build these blocks
in snap itself and so we want to take this even further and find out whether we can maybe
even invent a language that lets us build a block space language inside the block space
language and for this we really kind of want to do things that we can do in the UI we want
to be able to do it in the language so in this palette here I made a little block and
it shows me some tools so if I click on this I'm getting some more blocks and I can again
hide these it's a very simple block I can build myself that just shows and hides me
some blocks and now I can kind of explore some of these things so I can for example look
at this block that the flower block and I can see how it is defined and see it is defined
with its own blocks so I can open this and edit it but I can also get the definition
of this in a program so now I'm getting the definition of this block and I can see that
it's a function I can take this out and I can do some other interesting things with that
so here is our split block for example I can split hello world by the space and I get hello
and world I can split it by letters and I get each letter so what happens if I split
a script by blocks let's make this even smaller if I split a script by blocks I'm getting a
syntax tree a table of the syntax elements in there so I can do this with you know the
definition of my flower block and oh wow so I can so this is a table so I can also flatten
this so I'm not saying I don't want the length of this I want it flattened so now I'm getting
a list of all the syntax elements that make up the definition of this flower block and
that's kind of interesting because now I can find out for example so here I can take out
the turn block and I can say you know do all of these um is this list contain this turn
block and says yes the turn block is part of the definition of this list so but what
about for example the clear block is that also in there no it's not present in there
so this is interesting I could maybe discover something else so what I can I can look at
all the blocks that I have in this micro world this is a list of all the blocks in this micro
world so I'd like to find out which blocks contain this turn block so I could say you
know I want to keep I want to filter from my blocks those that contain this block let's
see whether that works yeah so I'm getting a list of two blocks that all use this block
now I can turn this into its own block I make a block that says this is the colors of a
block block and the block should be an input so I'm saying this is a block and in order
to define this well I just did define this I just dragged this in and I say okay this
should should work for any block so not not just this block but for any block and um so
now I have this block that gives me the colors of for example this block let me see whether
it works so this block is used by two other blocks and this block isn't used by any other
block and huh let me see maybe I can get a whole report by looking at all the blocks
and by mapping overall the blocks and I want to see the block and I want to see its colors
right so what we're now doing is really an introspection of the system of the block system
in itself so if I map this I'm sort of getting this interesting structure it's a data structure
it's a table and it's a graph really a reverse dependency graph of all the blocks and the
blocks it uses and I get a report of the overall structure of my micro world and folks this
is something interesting if you think about this so we're starting with this easy simple
thing that we can build worlds for kids and we want to build these little domain specific
languages but we want to have a language that actually lets us build these things in itself
and this is why we build introspection and kind of all the goodies of functional programming
into this language but we didn't want to make it so that you kind of have to go down to
memory addresses but we want to represent everything in blocks and this is kind of the
idea of no ceiling because at one point you know we start doing this with kids but we
actually build it for the University of California at Berkeley and they're using it for the
introductory course of computer science for non majors and you know this goes up quite
a long way so we actually want to be able to do scheme in this and to really teach abstraction
so at one point we really want to blow off the ceiling and we don't want to do just only
this imperative style programming where you know one follows the other and you've got
the puzzle pieces but we actually do a higher order function you do kind of recursive you
build your own control structures you build your own language it's a little stiff and
it's challenging to try to accommodate you know the let's draw a flower with a bunch
of three blocks to let's invent our own programming language in the same environment and in order
to build such an environment the whole thing that you see here at your nerds I can show
you right the whole thing you see here isn't using Blockly or a library but what you're
seeing here is actually an operating system that runs inside a single canvas element in
the browser and there's sort of a pill you can take to switch to dev mode and you're
sort of inside this environment that some of you might recognize looks a lot like Squeak
so if anybody you know Squeak and so it's kind of the same morphing environment where
you could just get you know any things you can directly manipulate them for example
you can make this bold but you can also use this to you know let's make a slider I can
attach the slider set the target to the string morph to the font size I can change it I can
make it horizontal and now my slider governs for example the size the font size of this
I can make other elements like for example color palette and I could set the target of
the color palette also to the string and now I can change the color and the size I can
still edit it so this is basically our own system that is kind of self sustained in the
browser and everything that you see in snap is sort of an application inside this really
OS inside the browser and comes with its own green threading model which is how we do parallelism
so in order to go up on the ladder of abstraction on the back end side we have to go kind of
down to not the metal but to kind of a metal of sorts of the browser okay this was kind
of our ideas if you'd like to check it out it runs on snap.berkeley.edu give it a try
yourself you'll find lots of material there is it's open source by the way it's free and
open source is an AGPL license so if you want to know so it's copy lefted so you know everything
is open source about it we write the front end the back end the community side it's not
as big as some other languages but we've got a vibrant community it's all hosted on github
please do contribute please do fork it many people have forked it please let us know what
you think and thanks for coming.
So I found that really fascinating and as a list programmer I couldn't help but think
about macros when you were showing the exploding of blocks so would it be possible once you
get the abstract syntax tree to annotate it let's say add a sound between each step and
then recreate a new block from an existing block?
Yes if we had more time I could show you this we do have macros.
So I showed you the split block which takes apart the stuff we have a joint block that
you could pass on the syntax tree.
Well this is running in the web in a browser so your phone can run the thing in a browser
what you get here is you can publish it as a URL and yes and then you can run it on the
phone and it's something I like to do with kids a lot it's also interesting if you do
stuff on touch devices like on tablets or stuff like that you kind of need to be considerate
of which gestures to use because you don't have mouse over or you know so yeah it's
fun.
That's a good question I really have this dream that I think block space programming if we
take away the kitty stigma of it and if we dare move on from this sometimes horrible imperative
paradigm to the beauty and joy of functional programming that you know we get these expressions
that actually make things easier to understand that make things more accessible and that
this is a great way to be to actually you know express many things inside professional
development so we write the software in a way that we like to use it ourselves and
we hope that it might convince others to actually build and embed this into enterprise applications
because often enough if you think about these low code no code things you know you moved
you click together some preconfigured stuff but then you need to write some glue code and
the glue code often enough is terrible and awful and this is where I would love to see
a block space environment that has no ceiling yes it is less it is skiing in the browser
yes exactly and we do have stickers and buttons here take all you want yeah yeah thank you
very much again.