New blocks-based intro course to js/DOM programming

[Gregory Dyke]

Hi all

I believe infrequent project announcements are ok on this group (particularly as there are subparts of the project I think would be useful for the wider community, so I would like feedback on what you would like to see made available as blockly plugins/importable projects).

I'm very excited that we now have a shareable MVP for CYF Blocks, Code Your Future's intro course to js/DOM programming.

Deployed project: blocks.codeyourfuture.io/index.html

Github: https://github.com/CodeYourFuture/fundamentals-blockly

We are a volunteer based full stack course with the aim of getting meaningful jobs in tech for refugees and other people who would not otherwise have access to learning to code.

This is part of our new Fundamentals module (that has not been trialled with actual students yet, so your feedback would be very welcome). It is the first 3 week module that will be followed by further modules: Html/css, JavaScript (3 modules), React, Node, Postgres, Project. Our goal with this Fundamentals module is to teach some basics of problem solving through code with the intent to transition quite rapidly to writing Javascript in subsequent modules. Blockly allows us to abstract away from javascript syntax and the conceputally challenging DOM API (and the frameworks that exist on top of it). The new DOM blocks we've created allow us to start solving exactly the same kinds of web development problems that students will see in the remainder of the course. (We previously used code.org and khan academy extensively, but saw some transfer problems when transitioning to Javascript/DOM).

What you can do for us:

- try it out and report back (in this thread or by email to me directly: greg...@gmail.com)

- share your experiences in teach adults introduction to programming, particularly to JS web development through blockly

- share your experiences in writing blocks for the DOM (I have only found one set of DOM blocks so far and that was more a 1-1 mapping)

What we can maybe do for you:

- Make our DOM blocks available more widely (I think they present a useful subset of the DOM in a way that both powerful and restricted enough to not be overwhelming, particularly in the design decision to use context rather than variables to manage which html element is currently being worked with)

- We have an mechanism for offering multiple exercises in sequence, and for authoring exercises (along with testing to know whether the exercise was completed succesfully), that might be useful for anyone wanting to teach web development

Hoping you're having a great transition into spring!

Greg

[Beka Westberg]

Hi Greg! Sorry we missed this post. This is so cool!

Some things I love about your project:

1) I think the way you've styled Blockly is wonderful. There are so many nice things about it, but to pick just one: the little pink highlight you gave to the categories really ties the workspace into the rest of your application  :D

2) Your dom manipulation blocks seem really thorough and well developed! For example, I was delighted to discover that this actually works how I would expect it to:

```

let element_list = document.getElementById('list');
let element_list2 = document.getElementById('list2');
element_list2.innerText = 'cats';
element_list.innerText = 'dogs';

```

(Side note: Are you using a custom JavaScript generator? I'm curious about how you're handling indentation)

Not to mention the use of shadow blocks, and using events to add warnings to blocks when they are incorrectly placed!

If you want to convert these blocks into a third-party plugin that would be awesome! And I'm sure other projects would find it helpful, even just as an example of some really great block design! Here are some resources to get you started with creating a plugin if you choose to.

And if you get stuck just post to this forum and the core team will happily help =)

Also, if you haven't signed up already, you should consider coming to our upcoming developers summit. We'd love to hear your thoughts on Blockly =)

Best wishes,

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/4a93d52c-f92a-40d5-bc67-48dd1d32886en%40googlegroups.com.

[Gregory Dyke]

Hi Beka

Thanks for responding. You do wonderful work in this group and particularly in making sure that nobody goes unanswered!

The styling is my wonderful colleague and allround badass Sally McGrath (also our Director of Education at Code Your Future). I'm unreasonably excited about it.

I'm glad you noted the block design. I spent literally days (i.e multiple months of elapsed time) working it out and trying different combos. I also struggled with whether to use lists and how to differentiate js/blockly lists from html lists - and what operations to allow on lists.

The context variables (and lack of indentation inside those contexts) is "just" the following 3 lines of code, carrying a stack of context variables so that you can nest and unnest, plus a custom statementToCode that doesn't do indentation (each "context setting block" must call these lines, and each "context needing block" must be a descendant of a "context setting block")

Blockly.JavaScript.pushWithContextVariable(elementVar);

let branch = Blockly.JavaScript.statementToCodeNoIndent(block, "STACK");

Blockly.JavaScript.popWithContextVariable();

I'm already attending the developers summit (and presenting!!), so I look forward to "meeting" everyone there.

I'm also excited to figure out how to make a plugin and will definitely reach out

As a last point, allow me to introduce the ridiculousness that is our share button (everything is stored locally at the moment, so the url contains uriencoded compressed json serialized from blockly)

https://blocks.codeyourfuture.io/share.html?v=('jqblocksqlanguageVersion!0~blocks!%5B('type!'%26_clicked4S%24%237%2Cfe2Q%25W%25zH61cgDJ'~x!90~y!33-TEXT1!'when%20the%20%26%20with%20id'~ID!'%3F'~TEXT2!'is%20clicked').HANDLERq*with_%26_by_id4h%603J%7D1w'%3A%2B%60zco%3DB%7Bf3v)'-ID!'list%7Cadd_%264t8%25%5BdJ%3DyhO%5E0M%7D8QQ%3Bgw'-ELEMENT!'li%7Cset_content4h_%3D9sRpi%40_Ixdv%5D1lI3W'.VALUEqshadowqtype!'text4y(tJYb0bx8l%7DEY5O%23G%3D)'-TEXT!''))~*get_input_value_with_id4F5dLS%23v%2C'J7%2C'js8PBJI3%3B'-ID!'text'))))))))))))))%5D))~h!'%3Cp%3EThings%20to%20do%3A%3C%2Fp%22ulZlist%5C'%3E%3C%2Ful%22inputZtext%5C'%20%2F%22%3FZ%3F%5C'%3Eadd%20Todo%20Item%3C%2F%3F%3E%5Cn')*blockqtype!'-~fieldsq.~inputsq4'~id!'Z%20id%3D%5C'q!('%22%3E%5Cn%3C%26element%3Fbutton%7C').STACKq*%01%7C%3F%26%22qZ4.-*_

Cheers,

Greg

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAHpwHMZ2S7zBPv-i9OeqYNDLm5FJ2MpSXv-6ps2SLKvcynV0Nw%40mail.gmail.com.

[Beka Westberg]

Hi again Greg!

> You do wonderful work in this group and particularly in making sure that nobody goes unanswered!

Hehe it's a team effort. There are a lot of questions to get to!

> The context variables (and lack of indentation inside those contexts) is "just" the following 3 lines of code, carrying a stack of context variables so that you can nest and unnest, plus a custom statementToCode that doesn't do indentation (each "context setting block" must call these lines, and each "context needing block" must be a descendant of a "context setting block")

That is very interesting! And seems like a very elegant solution to the problem. Both in terms of user experience, and in terms of implementation. For the user-experience side of things, were you inspired by any existing system? I don't think I've seen a solution like this before. The closest thing I can think of is AppInventor's lexical variable system, but you still have to directly refer to the variables (they aren't just scooped up from context).

> As a last point, allow me to introduce the ridiculousness that is our share button (everything is stored locally at the moment, so the url contains uriencoded compressed json serialized from blockly)

Haha that's wonderful! Whatever work works. Also love that you're using the JSON serialization <3

> I'm already attending the developers summit (and presenting!!), so I look forward to "meeting" everyone there.

Awesome! Can't wait to see you there :D

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CACptYiLRSB5S-yHQeO6rEeaW-k_E-CY8r4b1aRkUDuA-ia_obw%40mail.gmail.com.

[Gregory Dyke]

> The context variables (and lack of indentation inside those contexts) is "just" the following 3 lines of code, carrying a stack of context variables so that you can nest and unnest, plus a custom statementToCode that doesn't do indentation (each "context setting block" must call these lines, and each "context needing block" must be a descendant of a "context setting block")

That is very interesting! And seems like a very elegant solution to the problem. Both in terms of user experience, and in terms of implementation. For the user-experience side of things, were you inspired by any existing system? I don't think I've seen a solution like this before. The closest thing I can think of is AppInventor's lexical variable system, but you still have to directly refer to the variables (they aren't just scooped up from context).

The inspiration was actually the xtend programming language, which is a slight variant on java that transpiles to java. Xtend has lambdas with an implicit "it" variable that is also optional (similar to how "this" is often optional), so the following are all equivalent.

people.forEach[person | person.greet]

people.forEach[it.greet]

people.forEach[greet]

people.forEach(Person::greet) // not sure about this one

xtend also has a with operator that allows a lambda block to be executed with an expression as the argument, which makes for nice builders

val greg = new Person

greg.setName("Greg")

greg.setEyeColor("blue")

greg.addInterest("CYF")

 

can be written as

val greg = new Person => [

  name = "Greg" // implicit it.setName

  eyeColor = "blue"

  addInterest("CYF")

]

I assume there are other languages with something similar

Cheers

Greg

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAHpwHMZEkOuFJLOVJzUnn6GX0MYDuvd%2BoDTCa%3Ds6MS5%2BSDssbg%40mail.gmail.com.

[Beka Westberg]

Wow what a fun language construct! It's awesome that you were able to get something like it working in blocks. Thank you for sharing :D

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CACptYiJow4BPG4c7vr6VY58vwLqtoinymxQsXJ8wJO%2BFQeG2WA%40mail.gmail.com.