Giter VIP home page Giter VIP logo

blocklike's Introduction

BlockLike.js

BlockLike.js is an educational JavaScript library. It bridges the gap between block-based and text-based programming.

BlockLike.js is designed following Scratch concepts, methods and patterns. The screen is a centered stage. Interaction is with Sprites. Code is executed in a "paced" manner. Scratch block code and BlockLike.js text code are meant to be as literally similar as possible.

BlockLike.js is written in ES6/ES7 flavored JavaScript. It is environment independent. It can be used anywhere modern JavaScript runs.

See BlockLike.org for details, docs, examples and FAQ.

Get Started

The easiest way to start with BlockLike.js is using CodePen or replit. Alternatively, you can create an index.html file and include BlockLike.js with the script tag.

The website has a one-click setup for CodePen and instructions how to set up replit and how to load the most recent version off of a CDN.

Development

Install

Make sure to have Node.js installed.

Clone the repo.

In a terminal:

npm install
npm start

npm run watch

Troubleshoot

If you encounter:
listen EADDRINUSE 127.0.0.1:9000

Something else is using that port.

Open webpack.config.js and change the port setting for the devServer.

Test

All:

npm run test

Single test:

TEST=stage_looks npm run test:it

Build

npm run build

The build script will build the two library versions (normal and min), generate the third one (mascotless) and republish the docs.

Publish

For most cases.

npm version patch

For more festive occasions:

npm version minor

Generally speaking, patch a version any time there is a change in the minified distribution, even if the change is not the result of a code change but only of build tools.

Running version will trigger the version script and will create a tagged commit.

git push origin master
git push --tags  

Pushing tags will trigger a GitHub Workflow and will publish the version to the NPM registry

Documentation publishing

npm run docs

Note that building the library will also build the docs.

Authors

Ron Ilan

License

MIT

Fabriqué au Canada : Made in Canada

blocklike's People

Contributors

cruscanlan avatar ronilan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blocklike's Issues

Issues porting simple Scratch game to BlockLike

Hi,

First off, great little library, exactly what I was looking for to transition my daughter from Scratch to JavaScript.

I thought I would port the simplest possible game (Pong) from Scratch to BlockLike to show her the path, but I'm facing a few issues:

  1. Sprites are sized differently in BlockLike compared to Scratch.
  2. Backdrop image do not fully fill Stage, unlike in Scratch.
  3. Sprite.isTouchingBackdropColor(Color) throws warning: BlockLike.js Notice: isTouchingBackdropColor() ingnored. Backdrop image can not be located at a remote origin.
  4. Sprite.isTouching(Sprite) seems to fire before they actually touch.
  5. Sprite.playSound(Sound) throws exception: NotSupportedError: Failed to load because no supported source was found.

What am I doing wrong? Appreciate your help!

Thanks!

Suggestions not available in visual studio code

Suggestions are not available when using Blocklike.js in visual studio code
I think Suggestions are a must for educational library
However, it seems that the explanation is written in jsdoc in the code.
How to use with vscode?

Missing link to Github

When we are on blocklike.org or in the Doc, there is no obvious way to see that the project is open source hosted on github. I finally found a link to this repository in the FAQ section.

It would be nice to have an easier way to find this link:

  • maybe Github corner?
  • or just a link in the footer, next to "FAQ", "Docs" and "Examples"?

In any case, thanks for this project! 🙏

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.