6 ms·

Show HN: Blocklike.js Educational Library – So kids can level up from Scratch

88 points by ronilan 7y ago

kresten 7y ago
There’s also what seems to be a better scratch than scratch: https://snap.berkeley.edu https://snap.berkeley.edu
- ronilan 7y ago
  As well as the relatively new MakeCode from Microsoft[1], multiple projects based on Google's Blockly[2] and obviously everyones goto: Code.org With the above, and with Scratch 3.0 finally ditching Flash, I think the absolute-beginner-basic-concepts niche is covered. BlockLike is an attempt to imagine what the next step in a progression could be. [1] https://www.microsoft.com/en-us/makecode https://www.microsoft.com/en-us/makecode [2] https://developers.google.com/blockly https://developers.google.com/blockly
- davidperrenoud 7y ago
  There's also GP Blocks, which is a better Scratch written in itself: https://gpblocks.org/ https://gpblocks.org/ For more background information about GP Blocks from the team that brought Smalltalk, Squeak, Etoys, Scratch 2.0 and Snap! read the following paper: http://www.vpri.org/pdf/tr2015003_modsys.pdf http://www.vpri.org/pdf/tr2015003_modsys.pdf
- stevenkkim 7y ago
  It's not obvious to me - why do you think snap is better than scratch?
em-bee 7y ago
excellent. this is a needed step. the first block programming tool i used is etoys. it has an interesting feature, where each piece of blocks has a direct equivalent in smalltalk, so you can compare the block version with the code version. the transition is therefore much smoother as you can reuse your existing block code. in that vein it would be nice if blocklike had an import function to load scratch projects. at least for simpler projects this should be possible, and it would further enhance the transition.
- ronilan 7y ago
  > in that vein it would be nice if blocklike had an import function to load scratch projects. I actually played with a basic React app to do that and I scraped it for two reasons: 1) Practically Scratch projects are very visual beyond the code. They contain a whole lot of assets. After conversion, just the asset loading parts of the code looks scary. It is not really workable. (As a side note, Scratch IDE encourages duplication, and this also increases the complexity of the converted code). 2) Conceptually. The idea is to learn how to write code. So, use the exact pattern, but write it yourself...
d4rcyc 7y ago
this reminds me of a project with similar goals (of providing learner coders with a "level-up" from Scratch) https://github.com/stevekrouse/WoofJS https://github.com/stevekrouse/WoofJS
- ronilan 7y ago
  woof.js is great. It feels similar to how Khan Academy do their intro to JS which in turn is very like Processing.js and other Canvas based libs. This gives it a clear progression path which is an advantage. BlockLike has a slightly different feel/direction mainly because it is DOM based. You can dive into CSS with it for example. Generally, with JS, one should learn early that for every simple task there are multiple libs ;)
iudqnolq 7y ago
A few years ago I tried to make a project that would let kids write in a written language which would be parsed and translated into the XML Snap (a scratch alternative) uses. Then I'd embed the Snap runtime to run it. The basic parts worked, but I ended up giving up on the project.
choward 7y ago
It's a shame they decided to involve one of the worst parts of JavaScript and hardest to explain in all the examples: "this". I've written a lot of JavaScript code that doesn't use it and it's really easy to understand.
- ronilan 7y ago
  I agree that "this" may be hard to explain (especially, say if you find yourself interviewing at AMZN and some middle manager shouts at you over video to explain what "this" means) but in BlockLike it is, by design, pretty straight forward - "this" refers to the Sprite that invoked the function. "this" is me, the BlockLike Sheep (friend of Scratch Cat). There is a lot of discussion about the more technical details of the implementation in the FAQ (https://www.blocklike.org/faq https://www.blocklike.org/faq) and you can look at this example (https://www.blocklike.org/example/10-patterns/functions.html https://www.blocklike.org/example/10-patterns/functions.html) to see what emerges out of the implementation (code prints out to console) >I've written a lot of JavaScript code that doesn't use it and it's really easy to understand. In the example below the concept of a function that can be shared by two Sprites is introduced. (Scratch Blocks can not be shared by two Sprites). https://codepen.io/BlockLike/pen/JpjVOp?editors=1010 https://codepen.io/BlockLike/pen/JpjVOp?editors=1010 It can be rewritten without using "this" (obviously). But can you make it easier to understand? Can you make it better at explaining the concept it does? There is a reason JavaScript has "this" and I think this might be the reason ;)
  - choward 7y ago
    > "this" refers to the Sprite that invoked the function Sure, "this" is always what invoked the function. Why not just pass in the sprite to the function though and use the argument instead? That makes the learning more general for all languages and not javascript specific. IMO, there is no value in using "this". I don't think OOP should be taught in the early stages of learning programming. Here is a simple example from the docs: let stage = new blockLike.Stage(); let sprite = new blockLike.Sprite(); sprite.addTo(stage); Why are you adding a stage to a sprite instead of adding a sprite to a stage? Why does sprite have a method defined on it and why is stage the parameter? I think a more consistent way to do that would be to have a function that takes both as arguments: addSpriteToStage(sprite, stage); Imagine that the person trying to learn programming is trying to come up with their own library to use. It wouldn't even occur to them to create free standing function. Instead they would have to waste time deciding which arbitrary class to put the method on. > It can be rewritten without using "this" (obviously). But can you make it easier to understand? Here is a simple change I would make for that example. I can't figure out how to share the codepen (I think creating an account might be the only way) so here's the code for the relevant part: function myFunction(sprite) { sprite.say('hi'); sprite.wait(1); sprite.sayWait('bye', 1); sprite.say('') } sprite1.whenClicked(function() { myFunction(sprite1); }); sprite2.whenClicked(function() { myFunction(sprite2); }); Unfortunately this doesn't work. I have no idea what magic that "invoke" function does, so I don't know why this doesn't work. What if you wanted the other sprite to talk when a sprite is clicked? Wouldn't you have to pass in an argument anyway. Getting a magical "this" when it happens to be the sprite that is clicked that is doing the talking seems arbitrary. Anyway, I guess my biggest gripe is that it puts too much emphasis on OOP too early in the process of learning to program.
threatofrain 7y ago
I feel that the most significant edge provided by these kinds of pedagogical languages is they bridge the years for when the hands can't use the keyboard very well -- in other words, it's not a very interesting edge. I also think that typing the words out has an effect on fluency even though it seems like a menial form of practice.
Glench 7y ago
There's also https://woofjs.com/ https://woofjs.com/ from my friend Steve Krouse which has Scratch-like JS!
bayesian_horse 7y ago
I am divided on using Javascript as a first language to teach to children [Or second or first-and-a-half after Scratch] It's extremely useful, and does contain lots of good parts. But it's at times inconsistent,requires learning its quirks and may cause more frustration than other languages. I would also worry a little about pushing the students down a road of mostly frontend web development. Not that they can't escape by learning something else, but still. I guess it would take studies to compare the outcome of various languages and curriculi? A lot of apps and games nowadays are data driven, to optimize for onboarding, engagement and so on. I would like to see more of that in education.
- stevenkkim 7y ago
  I am curious - what languages do you think would be better for kids to start with?
  - bayesian_horse 7y ago
    I am actually not sure. Depending on the age, from those I know, I would prefer Python, but it has its own disadvantages, especially that it doesn't run (properly, yet) on mobile or web. If I were to teach Programming to a particular age group, especially with students that aren't self-selected for interest, I would hope for a compelling and engaging experience, as free as possible from sources of frustration that aren't inevitable (js has many of those). So in some situations some kind of special language would be best? Maybe something more similar to Basic? Another issue is that teachers generally don't code well. Most don't have a lot of practical experience, some don't even have had relevant education. And if you teach programming to talented teachers, chances are that they discover how software development pays more for less effort.
    - timbit42 7y ago
      TypeScript? Dart?
      - bayesian_horse 7y ago
gkochlam 7y ago
cosmohandmade.etsy.com
matt_morgan 7y ago
It's hard to tell the home page is more than the gray field; and then "get started" skips to the end, where I'm encouraged to click on the codepen link and get a completely obtuse page. I recommend fixing that first view so there's more to see right when the page opens.
Scirra_Tom 7y ago
We talked to a lot of teachers, and it's a real problem going from block based programming to syntax heavy scripting - there's a chasm there which from a teaching standpoint is sometimes tricky to breach and keep students engaged with. We've gone for a different approach with Construct 3 which is so far resonating well in education, by mixing our block based programming system with Javascript itself helping to smooth the transition: https://s1.construct.net/images/v721/refresh/features/learn-to-code.png https://s1.construct.net/images/v721/refresh/features/learn-... The above example is a mix of block based and Javascript, but it can go all the way to making games with pure Javascript in script files - we're hoping to cover the transition in education from between Scratch and other tools such as Unity. There's a big gap there.
- Zhyl 7y ago
  >[…] We're hoping to cover the transition in education from between Scratch and other tools such as Unity This would be amazing. Every child want to make games, especially with a 'proper' engine like Unity (or maybe Godot, but I don't think that has as much street cred yet). Going from either drag and drop in scratch, or very basic python to using a full game engine requires a lot, but if that can be crossed then I think there is a very clear motivation for students to start learning in the first place.
  - Scirra_Tom 7y ago
    That's what we're trying to do and we're making good progress! As our engine Construct 3 is written in HTML5 itself, Javascript was the natural language choice to integrate with our block system. All languages have their up and downsides but we love Javascript and think it's suitable because it's used in many industries (not just making games) and is likely to have a growing demand going forwards. I think this is a much easier sell to education than other tools such as Gamemaker who use their own propitiatory language.
- donclark 7y ago
  What was the reasoning behind choosing Javascript as the language, rather than Go or something else?
nkrisc 7y ago
Very interesting way of trying to bridge the gap from "blocks" to code. Part of my introduction to coding was using the Starcraft and Warcraft 3 map editors. At a base level, much of the scripting in the editor is very much block-like: choose an event, add actions, and apply conditions. It wasn't block-based programming but it was point and click nonetheless. However there were essentially "blank blocks", actions which were just an input for arbitrary scripts. If I'm remembering correctly, I think WC3 editor might have used Lua (not 100% sure), but I learned a lot by going beyond what was possible with just tools the editor gave you by using these seemingly limitless windows into the world of programming that it offered. Though as I recall a lot of the really advanced and customized Starcraft maps actually used, I believe, some kind of overflow bug to add all kinds of arbitrary data that you couldn't normally. Off topic now, but interesting fact nonetheless, when Blizzard remastered Starcraft they essentially re-implemented the bug so old maps would still work.
- plopz 7y ago
  WC3 used JASS and the starcraft bug is known as EUD, theres a post about it here: https://news.ycombinator.com/item?id=16305769 https://news.ycombinator.com/item?id=16305769
  - nkrisc 7y ago
    Oh awesome, thanks.
ngmc 7y ago
This is great work! I’m a fan of blockp5.js’ approach to the problem: take a beginner-friendly JavaScript environment (p5.js) and add a blocks. https://github.com/ycatch/blockp5.js https://github.com/ycatch/blockp5.js
johnjones4 7y ago
This honestly seems like a big leap to ask kids to take from Scratch. I agree with some of the comments I'm seeing that the concept of "this" is a big one - but even other common JavaScript concepts such as callback functions seem like a stretch. What I wonder is why a variant of BASIC hasn't taken off. I think most Gen X and Millennial software professionals can point to early exposure to BASIC as an inspiration for their careers. The syntax of that language was meant to be for beginners - so why aren't we using it?

88 points by ronilan 7y ago

kresten 7y ago

There’s also what seems to be a better scratch than scratch: https://snap.berkeley.edu https://snap.berkeley.edu

ronilan 7y ago
As well as the relatively new MakeCode from Microsoft[1], multiple projects based on Google's Blockly[2] and obviously everyones goto: Code.org With the above, and with Scratch 3.0 finally ditching Flash, I think the absolute-beginner-basic-concepts niche is covered. BlockLike is an attempt to imagine what the next step in a progression could be. [1] https://www.microsoft.com/en-us/makecode https://www.microsoft.com/en-us/makecode [2] https://developers.google.com/blockly https://developers.google.com/blockly
davidperrenoud 7y ago
There's also GP Blocks, which is a better Scratch written in itself: https://gpblocks.org/ https://gpblocks.org/ For more background information about GP Blocks from the team that brought Smalltalk, Squeak, Etoys, Scratch 2.0 and Snap! read the following paper: http://www.vpri.org/pdf/tr2015003_modsys.pdf http://www.vpri.org/pdf/tr2015003_modsys.pdf
stevenkkim 7y ago
It's not obvious to me - why do you think snap is better than scratch?

em-bee 7y ago

excellent. this is a needed step. the first block programming tool i used is etoys. it has an interesting feature, where each piece of blocks has a direct equivalent in smalltalk, so you can compare the block version with the code version. the transition is therefore much smoother as you can reuse your existing block code. in that vein it would be nice if blocklike had an import function to load scratch projects. at least for simpler projects this should be possible, and it would further enhance the transition.

ronilan 7y ago
> in that vein it would be nice if blocklike had an import function to load scratch projects. I actually played with a basic React app to do that and I scraped it for two reasons: 1) Practically Scratch projects are very visual beyond the code. They contain a whole lot of assets. After conversion, just the asset loading parts of the code looks scary. It is not really workable. (As a side note, Scratch IDE encourages duplication, and this also increases the complexity of the converted code). 2) Conceptually. The idea is to learn how to write code. So, use the exact pattern, but write it yourself...

d4rcyc 7y ago

this reminds me of a project with similar goals (of providing learner coders with a "level-up" from Scratch) https://github.com/stevekrouse/WoofJS https://github.com/stevekrouse/WoofJS

ronilan 7y ago
woof.js is great. It feels similar to how Khan Academy do their intro to JS which in turn is very like Processing.js and other Canvas based libs. This gives it a clear progression path which is an advantage. BlockLike has a slightly different feel/direction mainly because it is DOM based. You can dive into CSS with it for example. Generally, with JS, one should learn early that for every simple task there are multiple libs ;)

iudqnolq 7y ago

A few years ago I tried to make a project that would let kids write in a written language which would be parsed and translated into the XML Snap (a scratch alternative) uses. Then I'd embed the Snap runtime to run it. The basic parts worked, but I ended up giving up on the project.

choward 7y ago

It's a shame they decided to involve one of the worst parts of JavaScript and hardest to explain in all the examples: "this". I've written a lot of JavaScript code that doesn't use it and it's really easy to understand.

ronilan 7y ago
I agree that "this" may be hard to explain (especially, say if you find yourself interviewing at AMZN and some middle manager shouts at you over video to explain what "this" means) but in BlockLike it is, by design, pretty straight forward - "this" refers to the Sprite that invoked the function. "this" is me, the BlockLike Sheep (friend of Scratch Cat). There is a lot of discussion about the more technical details of the implementation in the FAQ (https://www.blocklike.org/faq https://www.blocklike.org/faq) and you can look at this example (https://www.blocklike.org/example/10-patterns/functions.html https://www.blocklike.org/example/10-patterns/functions.html) to see what emerges out of the implementation (code prints out to console) >I've written a lot of JavaScript code that doesn't use it and it's really easy to understand. In the example below the concept of a function that can be shared by two Sprites is introduced. (Scratch Blocks can not be shared by two Sprites). https://codepen.io/BlockLike/pen/JpjVOp?editors=1010 https://codepen.io/BlockLike/pen/JpjVOp?editors=1010 It can be rewritten without using "this" (obviously). But can you make it easier to understand? Can you make it better at explaining the concept it does? There is a reason JavaScript has "this" and I think this might be the reason ;)
- choward 7y ago
  > "this" refers to the Sprite that invoked the function Sure, "this" is always what invoked the function. Why not just pass in the sprite to the function though and use the argument instead? That makes the learning more general for all languages and not javascript specific. IMO, there is no value in using "this". I don't think OOP should be taught in the early stages of learning programming. Here is a simple example from the docs: let stage = new blockLike.Stage(); let sprite = new blockLike.Sprite(); sprite.addTo(stage); Why are you adding a stage to a sprite instead of adding a sprite to a stage? Why does sprite have a method defined on it and why is stage the parameter? I think a more consistent way to do that would be to have a function that takes both as arguments: addSpriteToStage(sprite, stage); Imagine that the person trying to learn programming is trying to come up with their own library to use. It wouldn't even occur to them to create free standing function. Instead they would have to waste time deciding which arbitrary class to put the method on. > It can be rewritten without using "this" (obviously). But can you make it easier to understand? Here is a simple change I would make for that example. I can't figure out how to share the codepen (I think creating an account might be the only way) so here's the code for the relevant part: function myFunction(sprite) { sprite.say('hi'); sprite.wait(1); sprite.sayWait('bye', 1); sprite.say('') } sprite1.whenClicked(function() { myFunction(sprite1); }); sprite2.whenClicked(function() { myFunction(sprite2); }); Unfortunately this doesn't work. I have no idea what magic that "invoke" function does, so I don't know why this doesn't work. What if you wanted the other sprite to talk when a sprite is clicked? Wouldn't you have to pass in an argument anyway. Getting a magical "this" when it happens to be the sprite that is clicked that is doing the talking seems arbitrary. Anyway, I guess my biggest gripe is that it puts too much emphasis on OOP too early in the process of learning to program.

threatofrain 7y ago

I feel that the most significant edge provided by these kinds of pedagogical languages is they bridge the years for when the hands can't use the keyboard very well -- in other words, it's not a very interesting edge. I also think that typing the words out has an effect on fluency even though it seems like a menial form of practice.

Glench 7y ago

There's also https://woofjs.com/ https://woofjs.com/ from my friend Steve Krouse which has Scratch-like JS!

bayesian_horse 7y ago

I am divided on using Javascript as a first language to teach to children [Or second or first-and-a-half after Scratch] It's extremely useful, and does contain lots of good parts. But it's at times inconsistent,requires learning its quirks and may cause more frustration than other languages. I would also worry a little about pushing the students down a road of mostly frontend web development. Not that they can't escape by learning something else, but still. I guess it would take studies to compare the outcome of various languages and curriculi? A lot of apps and games nowadays are data driven, to optimize for onboarding, engagement and so on. I would like to see more of that in education.

stevenkkim 7y ago
I am curious - what languages do you think would be better for kids to start with?
- bayesian_horse 7y ago
  I am actually not sure. Depending on the age, from those I know, I would prefer Python, but it has its own disadvantages, especially that it doesn't run (properly, yet) on mobile or web. If I were to teach Programming to a particular age group, especially with students that aren't self-selected for interest, I would hope for a compelling and engaging experience, as free as possible from sources of frustration that aren't inevitable (js has many of those). So in some situations some kind of special language would be best? Maybe something more similar to Basic? Another issue is that teachers generally don't code well. Most don't have a lot of practical experience, some don't even have had relevant education. And if you teach programming to talented teachers, chances are that they discover how software development pays more for less effort.
  - timbit42 7y ago
    TypeScript? Dart?
    - bayesian_horse 7y ago

gkochlam 7y ago

cosmohandmade.etsy.com

matt_morgan 7y ago

It's hard to tell the home page is more than the gray field; and then "get started" skips to the end, where I'm encouraged to click on the codepen link and get a completely obtuse page. I recommend fixing that first view so there's more to see right when the page opens.

Scirra_Tom 7y ago

We talked to a lot of teachers, and it's a real problem going from block based programming to syntax heavy scripting - there's a chasm there which from a teaching standpoint is sometimes tricky to breach and keep students engaged with. We've gone for a different approach with Construct 3 which is so far resonating well in education, by mixing our block based programming system with Javascript itself helping to smooth the transition: https://s1.construct.net/images/v721/refresh/features/learn-to-code.png https://s1.construct.net/images/v721/refresh/features/learn-... The above example is a mix of block based and Javascript, but it can go all the way to making games with pure Javascript in script files - we're hoping to cover the transition in education from between Scratch and other tools such as Unity. There's a big gap there.

Zhyl 7y ago
>[…] We're hoping to cover the transition in education from between Scratch and other tools such as Unity This would be amazing. Every child want to make games, especially with a 'proper' engine like Unity (or maybe Godot, but I don't think that has as much street cred yet). Going from either drag and drop in scratch, or very basic python to using a full game engine requires a lot, but if that can be crossed then I think there is a very clear motivation for students to start learning in the first place.
- Scirra_Tom 7y ago
  That's what we're trying to do and we're making good progress! As our engine Construct 3 is written in HTML5 itself, Javascript was the natural language choice to integrate with our block system. All languages have their up and downsides but we love Javascript and think it's suitable because it's used in many industries (not just making games) and is likely to have a growing demand going forwards. I think this is a much easier sell to education than other tools such as Gamemaker who use their own propitiatory language.
donclark 7y ago
What was the reasoning behind choosing Javascript as the language, rather than Go or something else?

nkrisc 7y ago

Very interesting way of trying to bridge the gap from "blocks" to code. Part of my introduction to coding was using the Starcraft and Warcraft 3 map editors. At a base level, much of the scripting in the editor is very much block-like: choose an event, add actions, and apply conditions. It wasn't block-based programming but it was point and click nonetheless. However there were essentially "blank blocks", actions which were just an input for arbitrary scripts. If I'm remembering correctly, I think WC3 editor might have used Lua (not 100% sure), but I learned a lot by going beyond what was possible with just tools the editor gave you by using these seemingly limitless windows into the world of programming that it offered. Though as I recall a lot of the really advanced and customized Starcraft maps actually used, I believe, some kind of overflow bug to add all kinds of arbitrary data that you couldn't normally. Off topic now, but interesting fact nonetheless, when Blizzard remastered Starcraft they essentially re-implemented the bug so old maps would still work.

plopz 7y ago
WC3 used JASS and the starcraft bug is known as EUD, theres a post about it here: https://news.ycombinator.com/item?id=16305769 https://news.ycombinator.com/item?id=16305769
- nkrisc 7y ago
  Oh awesome, thanks.

ngmc 7y ago

This is great work! I’m a fan of blockp5.js’ approach to the problem: take a beginner-friendly JavaScript environment (p5.js) and add a blocks. https://github.com/ycatch/blockp5.js https://github.com/ycatch/blockp5.js

johnjones4 7y ago

This honestly seems like a big leap to ask kids to take from Scratch. I agree with some of the comments I'm seeing that the concept of "this" is a big one - but even other common JavaScript concepts such as callback functions seem like a stretch. What I wonder is why a variant of BASIC hasn't taken off. I think most Gen X and Millennial software professionals can point to early exposure to BASIC as an inspiration for their careers. The syntax of that language was meant to be for beginners - so why aren't we using it?