Git Product home page Git Product logo

coding-with-chrome's Introduction

Coding with Chrome Suite

Actions Status Actions Status codecov Coding with Chrome

NOTE: This repository is used for the the upcoming and experimental Coding with Chrome Suite version.

If you are looking for the Chrome App version from the Chrome Store, please use chrome-app-v6.x repository instead.

Coding with Chrome Suite is an Educational Coding Development Environment built around two core philosophies:

  1. Offer a stand-alone, offline app experience which allows people anywhere to learn how to build useful computer programs:
    • A basic OS allow the access to different external devices like robots
    • A basic IDE able to support real programming work
    • A tutorial system that poses a challenge, checks the solution and provides feedback.
  2. Allow educators to put together a custom curriculum made up of various components like:
    • Input languages (blockly, javascript)
    • Output modules (turtle graphics, javascript output, connected robots)
    • Flexible UI where elements can be easily added, modified or removed
    • Tutorial engine for self-learning

๐Ÿ“œ Licensing

Apache License, Version 2.0 see LICENSE.md

โš—๏ธ Access Coding with Chrome Suite - PWA (Beta)

๐Ÿงช We are currently in beta and still in the development process. In order to help us improve please file an issue to let us know of any issues or suggestions you may have.

You can access the Coding with Chrome Suite beta version under the following URL:

๐Ÿ“Š Supported hardware

Computers and Laptops with Chrome OS or any OS which is able to run PWA (Progressive Web Apps) are supported in general.

The mobile support is very limited because of the small screen size and is not recommended.

Credits

Coding with Chrome is made possible by other open source software.

coding-with-chrome's People

Contributors

chunkjs avatar dependabot[bot] avatar markusbordihn avatar valeriemaite 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  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

coding-with-chrome's Issues

Integrate notice.md into the app

Subject says it all, put the credits of the app into the app somewhere.

chrome://credits is a nice example but doesn't have to be fancy, a verbatim copy and paste of Notice.md is fine.

Demo Video

URL as discussed, image attached. Text, perhaps "Quick Intro"

cwcdemo

Also put all video links in 'Resources' as well..

EV3: Use autodetected sensors and actors for the API

At the moment we assume the following setup:

  • Port 1 - Color Sensor
  • Port 2 - Touch Sensor
  • Port 4 - IR Sensor
  • Port A - Small Motor
  • Port B - Big Motor left
  • Port C - Big Motor right

But because we know which Type of actor and sensor is connected to which port we should get rid of this and use the auto-detected sensors and actors.

install fails on Snow Leopard OSX

The npm install command fails with this log...

npm ERR! install Couldn't read dependencies
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.2.4
npm ERR! npm v2.14.12
npm ERR! path /Users/rahulbawa/package.json
npm ERR! code ENOPACKAGEJSON
npm ERR! errno -2
npm ERR! syscall open

npm ERR! package.json ENOENT: no such file or directory, open '/Users/rahulbawa/package.json'
npm ERR! package.json This is most likely not a problem with npm itself.
npm ERR! package.json npm can't find a package.json file in your current directory.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/rahulbawa/npm-debug.log

Resizing of window is only available when moving mouse from left to right

There is a separator between the 'code' section and the 'output' section.
To resize these two windows, you move the pointer to that separator, the mouse pointer changes to 'move slider' and then you drag and drop to then desired location.

In OSX at least, the pointer only switches from normal to 'adjust the separator' if you move your pointer in from the left. Strange.

Launch in Fullscreen

Perhaps make it a default-on option, but for computer beginners it's too easy to accidentally click outside the window and then lose the app.

Building fails on pristine Mac ElCapitan

1/ install git
2/ install node.js
3/
Last login: Mon Jan 18 00:44:34 on console
Martens-Mac:~ marten$ git clone git://github.com/google/coding-with-chrome.git
xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.
Martens-Mac:~ marten$ git clone git://github.com/google/coding-with-chrome.git
Cloning into 'coding-with-chrome'...
remote: Counting objects: 1140, done.
remote: Compressing objects: 100% (249/249), done.
remote: Total 1140 (delta 107), reused 0 (delta 0), pack-reused 878
Receiving objects: 100% (1140/1140), 993.41 KiB | 335.00 KiB/s, done.
Resolving deltas: 100% (578/578), done.
Checking connectivity... done.
Martens-Mac:~ marten$ cd coding-with-chrome/
Martens-Mac:coding-with-chrome marten$ ls
CONTRIBUTING.md build resources
LICENSE-HEADER doc spec
LICENSE.md documentation.json src
README.md karma.conf.js test
app package.json third_party
Martens-Mac:coding-with-chrome marten$ git checkout jquery-turtle
Branch jquery-turtle set up to track remote branch jquery-turtle from origin.
Switched to a new branch 'jquery-turtle'
Martens-Mac:coding-with-chrome marten$
Martens-Mac:coding-with-chrome marten$ npm install
loadDep:jquery-turtle โ†’ n โ–€ โ•ขโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ•Ÿ
loadDep:jquery-turtle โ†’ n โ–„ โ•ขโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ–‘โ•Ÿ
^C
Martens-Mac:coding-with-chrome marten$

(stuck)

Color Code not in Blocks/Drawing

When you open blocks>EV3 or blocks>sphero the toolbox is color-coded, as indicated by a colored bar to the left of the toolbox. The toolbox for 'drawing' has no such color coding. Why? Perhaps add?

Better Sphero implementation

Whatever Sphero Sensors are available, implement in blockly and javascript. Ideally multiple blocks including a binary "triggered or not" and perhaps a full "value"

Canceling edit of file title empties it

1/ Open example, new project, whatever
2/ Click on the title of the project eg "Untitled Basic Blockly File"
3/ In the small window, hit 'cancel' or push the 'escape' button
4/ Title disappears

New Project goes to 'welcome screen'

New project button should probably behave the same as 'quit cwc, restart cwc', i.e. check 'show welcome screen' is ticked or not, and jump immediately to beginner or advanced home screen.

Start/Stop button locations

  • In simple mode: between the Input and Output areas
  • In simple mode: LARGE.
  • In both: color them green and red for start and stop
  • In both: together, not left and right

Saving not working 100% correctly

  • Hitting 'Save' shows the save dialog with the entire filename selected. If you then start to type, the extension (.cwc) is overwritten too. It is common to only select the actual name of the file, so the extension is preserved.
  • If I save a file, the window title does not change to
  • Might be good to put a (*) in front of the filename if changes are made

Video Resources

Need some location of video resources. Very important to have them next to the main interface, but would also put them in the 'built in gallery' you have created. Perhaps consider a 'group of videos'

Suggest opening main UI and starting the video in separate window.

Clicking on bluetooth icon is strange

1/ It says its disabled but it is not?
2/ It says 'checking bluetooth state' but never gives any outcome. Suggest "no bluetooth devices found" or

JavaScript compiler failed for some instances

The closure compiler failed for some instances with:
...
Sample usage: --compilation_level (-O) VAL --externs VAL --js VAL --js_output_file VAL --warning_level (-W) [QUIET | DEFAULT | VERBOSE]
Run with --help for all options and details
...

Sphero relative blocks

Currently, we can tell sphero to go direction degrees, where (say) 90deg is 'right'.
It would be very good if we can also implement a block that allows us to program the sphero in a more relative way, i.e. "turn x degrees" and then "move forward".

Reason is that it is a lot more easy to use variables and loops ("turn x degrees, move forward, repeat a few times")

We need a timer block

Given that the sphero block we have moves forward forever, we need a timer.
Your example (that chains move forward, 90, 180, 270..) does drive a square but it seems to be some implicit wait time between processing blocks? Not intuitive or I don't get it..

Main Screen resizing is strange

When making the main (welcome) screen smaller, some empty space is kept on the right side, so the menu items are sliding down unnecessarily.
screen shot 2016-03-24 at 1 31 05 am

npm install fails on crouton

I'm running crouton on an Acer C720P and npm install fails. Any ideas on how to proceed?

(trusty)johan@localhost:/media/removable/SD Card/Projects/coding-with-chrome$ npm install closure-builder
[email protected] /var/host/media/removable/SD Card/Projects/coding-with-chrome
โ”œโ”€โ”ฌ [email protected]
โ”‚ โ””โ”€โ”€ [email protected] 
โ”œโ”€โ”ฌ [email protected]
โ”‚ โ””โ”€โ”€ [email protected] 
โ””โ”€โ”ฌ [email protected]
  โ”œโ”€โ”ฌ [email protected]
  โ”‚ โ””โ”€โ”€ [email protected] 
  โ””โ”€โ”ฌ [email protected]
    โ””โ”€โ”ฌ [email protected]
      โ””โ”€โ”€ [email protected] 

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm ERR! Linux 3.8.11
npm ERR! argv "node" "/usr/local/bin/npm" "install" "closure-builder"
npm ERR! node v0.12.9
npm ERR! npm  v3.5.3
npm ERR! path ../acorn/bin/acorn
npm ERR! code ENOSYS
npm ERR! errno -38

npm ERR! ENOSYS, symlink '../acorn/bin/acorn'
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /var/host/media/removable/SD Card/Projects/coding-with-chrome/npm-debug.log

npm run build fails on crouton

I'm running crouton on an Acer C720P and npm run build fails. At first it failed because I didn't have a Java installation on my machine but after sudo apt-get install default-jdk that worked itself out nicely. However, now it fails with the below. Any ideas on how to proceed?

[ ... lots of removed output here ... ]
[100%] HTMLHint files [Done] (0.0 sec)
[14%] CodeMirror css Saving output to genfiles/external/codemirror/codemirror.css (0.9 sec)/var/host/media/removable/SD Card/Projects/coding-with-chrome/node_modules/closure-builder/build_compilers.js:375
      var message_info = message.match(message_reg);
                                 ^
TypeError: undefined is not a function
    at Function.<anonymous> (/var/host/media/removable/SD Card/Projects/coding-with-chrome/node_modules/closure-builder/build_compilers.js:375:34)
    at /var/host/media/removable/SD Card/Projects/coding-with-chrome/node_modules/closurecompiler/ClosureCompiler.js:289:21
    at ChildProcess.<anonymous> (/var/host/media/removable/SD Card/Projects/coding-with-chrome/node_modules/closurecompiler/ClosureCompiler.js:276:15)
    at ChildProcess.emit (events.js:110:17)
    at Process.ChildProcess._handle.onexit (child_process.js:1075:12)

npm ERR! Linux 3.8.11
npm ERR! argv "node" "/usr/local/bin/npm" "run" "build-extra-files"
npm ERR! node v0.12.9
npm ERR! npm  v3.5.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build-extra-files: `node build/extra_files.js`
npm ERR! Exit status 1
[ ... and more removed output here ... ]

Loading coffeescript file fails

Menu -> Open -> Local file -> cwc/resources/examples/Pencil Code - Turtle Catch.cwc

Runs the 'draw a star with cubes' demo program.

File Format field updates

When 'save as' is used: delete author name (and overwrite with current username if we know it)
Update title of file to match filename

"Unsaved Changes" dialog is badly phrased

has been modified. Continue? <Yes|No>

What does continue mean? Continue Editing? Or Continue Exiting? (ok, I now know it means continue exiting)

Suggest changing to
changes have not been saved. Exit? <Yes|No>

Overview video

Intro video should be in the Welcome Screen. Perhaps a 3rd option next to the choice of 'beginner' and 'advanced user'

Improved examples

Sphero:

  • It's a little 'meh' to have to wait for it to stop blinking, and also it takes a LONG time to finish 4 cycles. Improved IMO

Website:

  • Slightly more elaborate version that clearly does some 'processing' with the form. (also typo: form, not formular)

Examples.zip

Empty triple-dot menu should be removed

In Code>Basic Coding (and all other Code items), the system draws a triple-dot menu button in the top-middle of the screen. The button does nothing (in blocks mode it switches to editor). If it does nothing, remove/hide it?

Backspace key fail in website output

Perhaps this is a Chrome quirk, but the example form javascript works, but if you try to edit the input name box (and use backspace to remove what you typed) it doesn't work.(and I'm worried what I deleted.. I heard a 'rrrip' sound... possibly a blockly block delete sound)

Windows build error

Hi,

I had a play with coding-with-chrome at the BETT show in London, and it is quite awesome, great work guys!

I tried installing this locally (Windows 10 x64, node 5.0 x64) and encountered the following error:

> [email protected] build-cwc-files E:\workspaces\git\coding-with-chrome
> node build/cwc_files.js

[14%] cwc.ui.Builder Compiling 52 soy files to C:\Users\Carlos\AppData\Local\Temp\closure-builder-9H34MN4 (0.0 sec)soynode: Compile error
 Error: spawn java ENOENT
[Soy Compiler Error] Failed for C:\Users\Carlos\AppData\Local\Temp\closure-builder-9H34MN4:Error: Error compiling templates

Then if I tried to run the chrome app anyway, it gets locked at "Building the Coding with Chrome UI" build step, which I guess it would be expected.

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.