BlockLike.js

BlockLike.js

Bridging the gap between block programming and JavaScript.

2 followers

BlockLike.js is an educational JavaScript library. It bridges the gap between block-based and text-based programming. Designed following scratch.mit.edu concepts, methods and patterns BlockLike.js code is meant to be as similar as possible to Scratch blocks.
BlockLike.js gallery image
BlockLike.js gallery image
BlockLike.js gallery image
BlockLike.js gallery image
Free
Launch tags:EducationGitHub
Launch Team
Intercom
Intercom
Startups get 90% off Intercom + 1 year of Fin AI Agent free
Promoted

What do you think? …

Ron Ilan
From the FAQ (https://www.blocklike.org/faq.html) === Who created BlockLike.js? I did. I'm Ron, father of three from Vancouver BC, Canada. I'll be the one answering your questions below. How did it come to be? One day, while a top a mountain, I had a profound epiphany: the world needs a new JavaScript library!!!1 I went home, opened a text editor and wrote it in like an hour. Bro. Seriously, how did it come to be? It took several years. I'm sure you've heard of Scratch, the block-based programming language and Integrated Development Environment (IDE) built by the MIT Lifelong Kindergarten group. If you haven't heard of Scratch, forget about BlockLike, go there and have fun. See ya next year. Scratch is amazing. Once my kids were old enough, we started playing with it. We haven't stopped since. Playing with Scratch is always fun. Learning comes naturally. Throughout the years we've made several attempts to move beyond Scratch and into "Web Programing". It went something like this: Let's put something on the screen. Create a DIV in HTML. Style it in CSS. Change it in JavaScript. Remember, it is background-color: pink; in CSS but backgroundColor = 'pink' in JS. Let's do something with it. Give your DIV an id in HTML. Grab it JavaScript. Do it like this:
var el = document.getElementById('sprite') Let's move it. el.style.left is how you change the position. It is a string. It ends with ‘px’. el.offsetLeft Is where the DIV is. It is a number. Add to it Like this: el.style.left = el.offsetLeft + 100 + 'px' Now, let's center the DIV . === Learning web programming was excruciating. Even when it wasn't, it was hardly ever fun. The HTML/CSS/JS triumvirate that rules the web (and beyond) is great. It's flexible. It's powerful. It's intricate. Unlike Scratch, it wasn't designed, it evolved. By now it has gone through decades of permutations. For those who've been through the cycles, it's like a game. A version of the Incredible Machine with endless levels. Each level requires the player to reinvent the wheel so they can build a better mouse trap. One can get used to it. For beginners though, it makes no sense. It is a pile of arbitrary rules with complex syntax and special cases. It is a riddle wrapped up in an enigma inside a box at the bottom of the ocean. Very hard to crack. I realized, that if we want to progress, we need something that will help us bridge the gap between Scratch and the web. Something that will be to JavaScript what training wheels are for bikes. Something that will teach beginner developers the same thing heel-side side-slipping teaches beginner snowboarders. Something that will allow for control, improve confidence and provide results. In short, something upon which to built a progression. That was the general idea. Since it seemed like a pretty good idea, I went on to build that thing that was needed. === Read more at: https://www.blocklike.org/faq.html