5 comments

[ 2.7 ms ] story [ 24.9 ms ] thread
I'm seeing a lot of inconsistency with arrow function usage. The sample code should probably just universally use arrow functions for lambdas to simplify the amount of keywords there.

Also, having a `range` helper would really simplify some of the for-loop stuff that'll be boilerplate nonsense to a beginner. The simplest way would be to just rebrand lodash's range:

    function pattern(sides, size, times) {
      const drawSide = () => {
        this.move(size)
        this.turnRight(360 / sides)
      }
  
      const drawShape = () => {
        this.penDown()
        range(sides).forEach(drawSide)
        this.penUp()
        this.turnRight(360 / times)
      }  

      this.penClear()
      range(times).forEach(drawShape)
    }
If you change the methods on `this` to return itself and add more helpers, you can reduce the amount of visual complication further:

    import range from 'lodash.range'
    this.repeat = (i, f) => { range(i).forEach(f); return this }

    const pattern = (sides, size, times) => {
      const drawSide = () => this
        .move(size)
        .turnRight(360 / sides)

      const drawInstance = () => this
        .penDown()
        .repeat(sides, drawSide)
        .penUp()
        .turnRight(360 / times)
      
      this
        .penClear()
        .repeat(times, drawInstance)
    }
Thanks for the thoughtful comment.

First chaining. Most defiantly needed. Current implementation will make it hard to support due to the simplistic way code is rewritten in real time. Will have to work on it...

Second, loop helpers. This is something I’ve debated with myself. I’m not sure being forced to do ‘vanilla’ is ‘boilerplate nonsense’. It’s debatable.

Last, function inconsistency. It is actually to illustrate both are ok to use. Maybe being opinionated on this is a better idea... will fix that.

> I’m not sure being forced to do ‘vanilla’ is ‘boilerplate nonsense’. It’s debatable.

I'm of a very strong opinion that a range-plus-forEach style is going to be tremendously more readable at a glance than any for loop, especially since it makes the inevitable confusion of zero-indexing a non-problem for beginners.

> It is actually to illustrate both are ok to use.

Using both is only helpful for teaching purposes if you also teach why there are two different syntaxes and what the differences are between them. They aren't interchangeable, and treating them like they are just means trouble later.

Having volunteered at a Coder Dojo and having tried to transition young Scratchers on to various more advanced coding languages like Python and Processing (with little success) I applaud this effort. Also see http://woofjs.com/ for another project with similar goals.
There's room for lots of ideas of this kind, and this reminded me of the fabulous EduBlock project https://edublocks.org by an amazing young chap Josh