Show HN: My winter project, BlockLike.js, an educational JavaScript library
blocklike.org
blocklike.org
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)
}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 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.