Code Monkey home page Code Monkey logo

scratch-blocks's Introduction

scratch-blocks

Scratch Blocks is a library for building creative computing interfaces.

CircleCI

An image of Scratch Blocks running on a tablet

Introduction

Scratch Blocks is a fork of Google's Blockly project that provides a design specification and codebase for building creative computing interfaces. Together with the Scratch Virtual Machine (VM) this codebase allows for the rapid design and development of visual programming interfaces. Unlike Blockly, Scratch Blocks does not use code generators, but rather leverages the Scratch Virtual Machine to create highly dynamic, interactive programming environments.

This project is in active development and should be considered a "developer preview" at this time.

Two Types of Blocks

A divided image showing horizontal blocks on the left and vertical blocks on the right

Scratch Blocks brings together two different programming "grammars" that the Scratch Team has designed and continued to refine over the past decade. The standard Scratch grammar uses blocks that snap together vertically, much like LEGO bricks. For our ScratchJr software, intended for younger children, we developed blocks that are labelled with icons rather than words, and snap together horizontally rather than vertically. We have found that the horizontal grammar is not only friendlier for beginning programmers but also better suited for devices with small screens.

Documentation

The "getting started" guide including FAQ and design documentation can be found in the wiki.

Donate

We provide Scratch free of charge, and want to keep it that way! Please consider making a donation to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!

Committing

This project uses semantic release to ensure version bumps follow semver so that projects depending on it don't break unexpectedly.

In order to automatically determine version updates, semantic release expects commit messages to follow the conventional-changelog specification.

You can use the commitizen CLI to make commits formatted in this way:

npm install -g commitizen@latest cz-conventional-changelog@latest

Now you're ready to make commits using git cz.

scratch-blocks's People

Contributors

rachel-fenichel avatar neilfraser avatar renovate[bot] avatar dependabot-preview[bot] avatar tmickel avatar paulkaplan avatar ericrosenbaum avatar kchadha avatar chrisgarrity avatar seanlip avatar renovate-bot avatar picklesrus avatar marisaleung avatar thisandagain avatar semantic-release-bot avatar anmatanm avatar nikerabbit avatar drigz avatar cwillisf avatar espertus avatar rschamp avatar gonfunko avatar towerofnix avatar siebrand avatar fsih avatar quachtina96 avatar edauterman avatar daarond avatar corydcode avatar carlosperate avatar

Stargazers

 avatar

Watchers

Beka Westberg avatar  avatar

scratch-blocks's Issues

Refactor block definitions patched in scratch-gui/src/lib/blocks.js

The scratch-gui package patches/overrides a number of block definitions in src/lib/blocks.js, generally when they need dynamic state depending on the state of the VM. We should likely do one of the following:

  • Remove the body of the block definitions in scratch-blocks, since they're being overwritten
  • Move the dynamic bits out of scratch-gui and into scratch-blocks
  • Perhaps something else?

Update Delete Blocks contextual menu item to not reference the number of blocks

When right clicking on a stack of blocks, a "Delete N Blocks" menu item is shown, with N corresponding to the number of blocks in the stack. In Scratch proper, this is shown as "Delete Block", regardless of the number of blocks in the stack. The code for handling procedure deletion also looks for the "Delete Block" string literal to patch the implementation to scour the workspace for references to the procedure and warn about them, which is currently broken as a result.

Preserve Scratch's block duplication functionality

In core Blockly, the Duplicate contextual menu just makes a copy of a block offset slightly from the original. In Scratch, the menu attaches the copied block to the cursor as if it were mid-drag, and it follows the cursor until clicked to place it.

Horizontal rendering (noop)

Got confirmation from Chris that we don't need to support horizontal rendering.

Filing this and immediately closing so we don't lose that info.

Investigate CSS attributes added for ScratchAddons

It looks like there have been a bunch of CSS attributes added to scratch to support https://github.com/ScratchAddons

Some PRs that did this:

Adding most of these CSS attributes involved monkey-patching things in Blockly, which is not happy =(

We need to figure out:

  1. Whether we need to continue supporting these CSS attributes. (Ask a scratch person)
  2. If so, what the attributes actually are. Which is going to be kinda tricky given that bugs won't show up in actual scratch. They'll only show up if you're using a given addon that references an attribute.
  3. If we want to pull those into core Blockly or figure out a way to add them in a non-monkey-patch-y way to scratch-blocks.

Resolve angle picker skew

Our angle picker lacks the background color in the dropdown, extra padding, and arrow icon from Scratch. It also continuously follows the mouse, whereas the Scratch implementation requires clicking and dragging the arrow icon to change the angle.
Screenshot 2024-05-06 at 2 45 06 PM
Screenshot 2024-05-06 at 2 45 11 PM

Fix dropdown menu rendering skew

The rendering of dropdowns differs between us and Scratch:

Screenshot 2024-05-06 at 2 39 06 PM
Screenshot 2024-05-06 at 2 39 00 PM

Scratch renders both the dropdown field and the menu with a slightly lighter background color, uses bold text in the menu, and does not display a darkened selection indicator behind the selected item when the menu is first opened.

Review and clean up CSS

Scratch injects a great deal of CSS, some of which may be redundant/obsolete/etc. We should look through this (ideally in an automated way?) and clean up anything unnecessary.

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.