various docs cleanup

docs/device/crocodile-clips.md

@@ -7,10 +7,16 @@ Register an event that will execute whenever the user attaches one side of the c
 
 This example displays a random number every time the crocodile clip holds  `GND` then connects and disconnects the `P0` pin. Each time the crocodile clip is firmly connected and disconnected from pin `P0`, the micro:bit will return a random Number between 0 and the parameter limit
 
-![](/static/mb/crocodile-clips-0.png)
+```blocks
+input.onPinPressed(TouchPin.P0, () => {
+    basic.showNumber(Math.random(10))
+})
+```
 
 ### Connecting Crocodile Clips
 
+![](/static/mb/crocodile-clips-2.jpg)
+
 ### See also
 
 [micro:bit pins](/device/pins), [pin is pressed](/reference/input/pin-is-pressed), [analog read pin](/reference/pins/analog-read-pin), [analog write pin](/reference/pins/analog-write-pin), [digital read pin](/reference/pins/digital-read-pin), [digital write pin](/reference/pins/digital-write-pin)

docs/offline.md

@@ -0,0 +1,18 @@
+# Offline editing
+
+## Web application
+
+**https://codethemicrobit.com is an HTML5 web application** that automatically gets cached locally by your browser. 
+Once the web app is loaded and you have compiled at least once, you will have all the code needed to work without an internet connection.
+
+## Command line interface
+
+For more experience users, you can download the entire toolchain and use the [command line interface](/cli) (CLI) to compile 
+and deploy your scripts locally. PXT provides a great out-of-the-box experience using [Visual Studio Code](/code), 
+a lightweight cross-platform code editor.
+
+![](/static/mb/vscode.png)
+
+## Native clients
+
+There are no native clients available yet.

docs/reference/images/image.md

@@ -11,11 +11,16 @@ An *Image* is a matrix of pixels to show on the [LED screen](/device/screen)
 To display an image:
 
 * click `Basic` , `Show LEDs`, and tap on the LEDs`
-* when you're done, return to your code
 
-![](/static/mb/show-leds-1.png)
-
-You should see code similar to this:
+```blocks
+basic.showLeds(`
+    . . . . .
+    . # . # .
+    . . . . .
+    # . . . #
+    . # # # .
+    `)
+```
 
 ### Creating an image
 

docs/reference/led/toggle-all.md

@@ -20,7 +20,11 @@ led.plot(2, 2)
 led.toggleAll()
 ```
 
-![](/static/mb/toggle-all-0.png)
+```sim
+basic.clearScreen()
+led.plot(2, 2)
+led.toggleAll()
+```
 
 ### See also
 

docs/reference/offline.md

@@ -1,26 +0,0 @@
-# Off-line support
-
-The micro:bit pins.
-
-## How to work offline
-
-If you have loaded the web app at some time in the past (by clicking on "my scripts" from the home page), then if you later open the same browser (whether you are online or offline) and type in [https://codethemicrobit.com/](https://codethemicrobit.com/), you will be able to access all the features of the web app. Note that it is important to end the URL with "/".
-
-## Save and load code using files
-
-![](/static/mb/offline-0.png)
-
-The micro:bit automatically saves and synchronises scripts for signed-in users through the cloud. We also decided to also support file save/load for offline support and sharing via email and other storage providers. Users are now able to import and export scripts as files. For example, they can simply email it or submit them in their classroom portal.
-
-![](/static/mb/offline-1.png)
-
-## The new in-browser compiler
-
-The compilation from a script to ARM machine code is now done entirely in the browser  (read the [in depth story](https://www.touchdevelop.com/docs/touch-develop-in-208-bits) about building the compiler). The new compiler is used by the Block Editor, Touch Develop and Code Kingdoms to create a .hex file solely within the confines of your web browser (no Internet connection is needed). The micro:bit compilation process is shown below:
-
-![](/static/mb/offline-2.png)
-
-The C++ compiler is now only used to compile the micro:bit runtime - this is done offline by the micro:bit team and the pre-compiled runtime is linked with your compiled script in the browser.
-
-Compiled .hex files can also be imported back into the web site. This make it easy for a teacher to review the source of a script by simply drag and dropping the file into the editor.
-

olddocs/js/assign.md

@@ -1,50 +0,0 @@
-# Assignment Operator
-
-Set the value for local and global variables.
-
-### @parent js/operators
- 
-
-Set or change the value of a variable
-
-### Block Editor
-
-![](/static/mb/antenna-0.png)
-
-### Touch Develop
-
-Use the assignment operator (:=) to set or change the value of a [local variable](/blocks/variables/var) or a [global variable](/js/data).
-
-### Declare a variable
-
-Declare a new *local* variable using the [var](/blocks/variables/var) statement and the assignment operator (`:=`). Like this:
-
-```blocks
-let num1 = 7
-let name = "Joe"
-```
-
-The variable's name is on the left of the assignment operator (`:=`) and the variable's value is on the right:
-
-*variable name* `:=` *value*
-
-See [global variable](/js/data) for info on declaring a global variable.
-
-### Change a variable
-
-After a global or local variable is defined, use the assignment operator (`:=`) to change the variable's value.
-
-```
-g = 42
-num1 = 42
-```
-
-### Notes
-
-* Don't confuse the assignment operator `:=` with the equality operator `=`, which is used to compare values.
-* You can use the assignment operator  `:=` with variables of each of the supported [types](/js/types).
-
-### See also
-
-[local variables](/reference/variables/var), [global variables](/js/data), [types](/js/types)
-

olddocs/js/boolean.md

@@ -1,118 +0,0 @@
-# Boolean
-
-true or false.
-
-### @parent js/language
-
-A Boolean has one of two possible values: `true`; `false`.  Boolean (logical) operators (*and*, *or*, *not*) take Boolean inputs and yields a Boolean value. Comparison operators on other types ([numbers](/reference/types/number), [strings](/reference/types/string)) yields a Boolean value.
-
-### Block Editor
-
-In the Block Editor, the following blocks represent the true and false Boolean values, which can be plugged in anywhere a Boolean value is expected:
-
-![](/static/mb/boolean-0.png)
-
-The next three blocks represent the three Boolean (logic) operators:
-
-![](/static/mb/boolean-1.png)
-
-The next six blocks represent comparison operators that yield a Boolean value. Most comparisons you will do involve [numbers](/reference/types/number):
-
-![](/static/mb/boolean-2.png)
-
-### Touch Develop
-
-### ~hide
-
-```
-let condition = true
-let condition2 = true
-```
-
-### ~
-
-Boolean values and operators are often used with an [if](/blocks/logic/if) or [while](/js/while) statement to determine which code will execute next. For example:
-
-```
-if (condition && condition2) {
-    // This code runs if both `condition` and `condition2` are `true`
-} else {
-    // This code runs if either `condition` or `condition2` is `false`
-}
-```
-
-### Functions that return a Boolean
-
-Some functions return a Boolean value, which you can store in a Boolean variable. For example, the following code gets the on/off state of `point (1, 2)` and stores this in the Boolean variable named `on`. Then the code clears the screen if `on` is `true`:
-
-```
-let on = led.point(1, 2)
-if (on) {
-    basic.clearScreen()
-}
-```
-
-### Boolean operators
-
-Boolean operators take Boolean inputs and evaluate to a Boolean output:
-
-### Conjunction: `A and B`
-
-`A and B` evaluates to `true` if-and-only-if both A and B are true:
-
-- `false and false` = `false`
-
-- `false and true` = `false`
-
-- `true and false` = `false`
-
-- `true and true` = `true`
-
-### Disjunction: `A or B`
-
-`A or B` evaluates to `true` if-and-only-if either A is true or B is true:
-
-- `false or false` = `false`
-
-- `false or true` = `true`
-
-- `true or false` = `true`
-
-- `true or true` = `true`
-
-### Negation: `not A`
-
-`not A` evaluates to the opposite (negation) of A:
-
-* `not false` = `true`
-* `not true` = `false`
-
-### Example
-
-This example turns on LED `3 , 3`, if LEDs `1 , 1` and `2 , 2` are both on:
-
-```
-if (led.point(1, 1) && led.point(2, 2)) {
-    led.plot(3, 3)
-}
-```
-
-### Comparisons of numbers and strings
-
-When you compare two Numbers, you get a Boolean value, such as the comparison `x < 5` in the code below:
-
-```
-let x = Math.random(10)
-if (x < 5) {
-    basic.showString("Low", 150)
-} else {
-    basic.showString("High", 150)
-}
-```
-
-See the documentation on [Numbers](/reference/types/number) for more information on comparing two Numbers. You can also [compare strings](/reference/types/string-functions) using the `equals` function.
-
-### See also
-
-[if](/reference/logic/if), [while](/js/while), [number](/reference/types/number)
-

olddocs/js/data.md

@@ -1,112 +0,0 @@
-# Global Variables
-
-How to define and use global variables.
-
-### @parent js/language
-
-A variable is a place where you can store data so that you can use it later in your code. A *global* variable is accessible from every point in your code.
-
-### Block Editor
-
-In the Block Editor, all variables are global. See [Block Editor](/blocks/editor) for info on creating global variables in a Block Editor script.  The following block is used to set (assign) global variable's value:
-
-![](/static/mb/antenna-0.png)
-
-The block below retrieves (gets) the current value of a global variable:
-
-![](/static/mb/data-0.png)
-
-### Touch Develop
-
-In Touch Develop variables are either [global](/js/data) or [local](/reference/variables/var). Variables have a name, a [type](/js/types), and value:
-
-* the *name* is how you'll refer to the variable
-* the *type* refers to the kind of value a variable can store
-* the *value* refers to what's stored in the variable
-
-[Global variables](/js/data) are variables that are available throughout your script. Unlike [local variables](/reference/variables/var), global variables are accessible across functions and in nested code blocks.
-
-### Create a global variable
-
-To create a new global variable:
-
-1. In the Touch Develop [editor](/js/editor), click `script` (to the right of the search box).
-
-2. Click `+` **add new**.
-
-3. Click `data->` **data** and then choose a [type](/js/types).
-
-4. Enter a name for your global variable and click **OK**.
-
-### Set and use a global variable
-
-To use a global variable that you've declared (using steps above):
-
-1. In the Touch Develop [editor](/js/editor), click `data-> ` **data** or `data->` + *variable name*.
-
-2. Click `:=` (assignment).
-
-2. Click on the right-side of `:=` and type or click what you want to store in the variable.
-
-Your code should look something like this:
-
-// global number variable
-
-```
-counter = 2
-```
-
-// global string variable
-
-```
-name2 = "Mike"
-```
-
-// global boolean variable
-
-```
-bool = true
-```
-
-(for info on creating image variables, see [Image](/reference/image/image))
-
-Once you've defined a variable and set it's initial value, use the variable's name whenever you need what's stored in the variable. For example, the following code gets the value stored in the global `counter` variable and shows it on the screen:
-
-```
-basic.showNumber(counter, 100)
-```
-
-To change the contents of a variable use the [assignment operator](/reference/variables/assign) `:=`. The following code increments `counter` by 10:
-
-```
-counter = counter + 10
-```
-
-### Promote, demote, and extract
-
-To **promote** a local variable to a global variable:
-
-* select the local variable name and click `promote to data`. The [var](/reference/variables/var) keyword changes to the data symbol `data->`.
-
-To **demote** a global variable to a local variable:
-
-* select the global variable name and click `demote to var`
-
-To **extract** the content of a global variable to a local variable:
-
-* select the global variable name and click `extract to var`
-
-### See your global variables
-
-To see a list of the global variables in your script:
-
-* click `script` (along the top) and scroll down to the **vars** heading
-
-### Lessons
-
-[counter](/lessons/counter), [rotation animation](/lessons/rotation-animation), [digital pet](/lessons/digital-pet), [offset image](/lessons/offset-image)
-
-### See also
-
-[local variables](/reference/variables/var), [types](/js/types), [assignment operator](/reference/variables/assign)
-

olddocs/js/editor.md

@@ -1,112 +0,0 @@
-# Touch Develop Editor
-
-The Touch Develop editor.
-
-### @parent js/contents
- 
-
-The Touch Develop editor is where you write and test your code. If you're new to Touch Develop, check out the [Touch Develop editor video](/getting-started/touchdevelop-editor).
-
-To create a new Touch Develop script:
-
-1. Go to the micro:bit website and click **Create Code** (along the top).
-
-2. Under the Touch Develop editor heading, click **New project**.
-
-3. Type a name for your script and click **create**.
-
-An empty script with a [function](/js/function) called `main` is created.
-
-## The Editor Menu Bar
-
-The Touch Develop editor has a bar of options above the code area:
-
-![](/static/mb/data-1.jpg)
-
-* `my scripts` takes you back to a list of your scripts (My Scripts). The open script is automatically saved (in the cloud) when you leave the editor.
-* `run` executes your script, showing you the results on the on-screen micro:bit device. See [run scripts in the browser](/js/simulator) for more about this.
-* `compile` sends your script to an ARM compiler, which creates a file that you can run on your micro:bit. See [run scripts on your micro:bit](/device/usb) for more info.
-* `undo` undoes changes that you made to your script.
-* `search code...` search for functions in libraries such as the micro:bit library.
-* `script` opens script options, where you can do things like publish and preview. See **script options** below.
-
-Many of the above buttons aren't much use until you've written some code, so let's move on to the Code Keyboard.
-
-## Code Keyboard
-
-The Code Keyboard makes it easy to write code on a touch screen device or by using your mouse. You can also type code using your computer keyboard if you know what function or statement you want (see [Touch Develop documentation](/js/contents) for a complete list).
-
-To open the Code Keyboard, click on a line of code:
-
-![](/static/mb/data-2.jpg)
-
-An on-screen keyboard appears, with buttons that vary depending on what's selected.
-
-### Statements
-
-The first row of the Code Keyboard has Touch Develop [statements](/js/statements) that you can insert into your code. These buttons are blue and include things like [var](/reference/variables/var), [if](/reference/logic/if), [for](/reference/loops/for) , and [while](/js/while). Click `more` to see additional statements.
-
-### The BBC micro:bit, math, and code buttons
-
-* `micro:bit`: click to see all the [micro:bit functions](/js/contents); click `more` to scroll left to right. The micro:bit functions are also grouped together behind the following category buttons: `basic`, `control`, `input`, `image`, `led`,  and`pins`
-* `code`: click to access functions you've written (see [call a function](/js/call) for more info)
-* `math`: click to see [math functions](/js/math); such as `abs` and `round`
-* `bits`: click to see functions for bit-level manipulation of integers
-
-### Editing code: add, copy, paste, and cut
-
-In the coding area...
-
-* **add**: to add a new line, click on a line and then click a **+** to add a new line above or below the current line
-* **copy, paste, cut**: click on a line then click **copy** or **cut**. Then click on a new line, and click **paste**.
-
-### Block editing
-
-To copy, cut, or comment out a block of code (more than one line):
-
-1. Click on a line of code.
-
-2. Press and hold the `Shift` key, and then press the `Up arrow` or `Down arrow` key on your keyboard (this selects multiple lines).
-
-3. Choose a block editing option like copy, cut, or [comment out](/js/comment).
-
-### Script options
-
-Click `script` (in the upper-right corner) to open the script options:
-
-![](/static/mb/data-3.jpg)
-
-Here you'll find options like...
-
-* `script properties`: the script name, description, and whether or not the script is a library  (more info below)
-* `publish`: share a script with other users by [publishing](/js/publishing) it
-* `share`: share a link to a published script (see [publish as script](/js/publishing) for more info)
-* `preview`: preview a documentation script
-* `+` `add new`: add a new [function](/js/function), [global variable](/js/data), picture, or library to a script
-* *code*: the functions in your script; click a function to open it in the editor
-* *global vars*: the [global variables](/js/data) in your script; click a variable to go to that variable
-* *libraries*: the libraries added to your script
-* *art*: picture and video resources added to your script
-
-### Script properties
-
-To edit a script's properties, click `script` (in the upper-right corner), and then click the script name or script properties.
-
-![](/static/mb/data-4.png)
-
-* `name`: the script's name (60 character limit)
-* `description`: a description of what your script does along with #hashtags for search (for example, #game or #maker). Hashtags are especially important if you publish your script (200 character limit).
-* `this script is a library`: click this check box to turn a script into a library
-
-### Comments
-
-Comments are notes within your scripts. To learn how to insert comments into your scripts, see [Comments](/js/comment). You can format your comments using [markdown syntax](/js/markdown).
-
-### Share your scripts
-
-Share your scripts with other people by publishing them. See [publish a script](/js/publishing) for more info.
-
-### See also
-
-[publish a script](/js/publishing), [Touch Develop documentation](/js/contents)
-

olddocs/js/for.md

@@ -9,8 +9,6 @@ Repeat code a fixed number of times.
 
 ### Block Editor
 
-![](/static/mb/events-0.png)
-
 The Block Editor *for* loop is different than the Touch Develop *for* loop in an important way. The above for loop will iterate *five* times, with the loop variable *i* taking on values 0, 1, 2, 3, and 4. The Touch Develop for loop shown below will iterate four times:
 
 ```

olddocs/js/if.md

@@ -9,8 +9,6 @@ Conditionally run code depending on whether a [Boolean](/reference/types/boolean
 
 ### Block Editor
 
-![](/static/mb/hourofcode-0.png)
-
 In the Block Editor, click on the dark blue gear icon (see above) to add an *else* or *if* to the current block.
 
 ### Touch Develop

olddocs/js/simulator.md

@@ -8,7 +8,6 @@ While you're writing and testing your scripts, you'll mostly be running scripts
 
 When you click `run main` in the Touch Develop editor, your code executes and the results are simulated on-screen, using an image of the BBC micro:bit device, like this:
 
-![](/static/mb/simulator-0.png)
 
 In the picture above, [plot image](/reference/led/plot-image) create a heart image that appears on the BBC micro:bit simulator.
 

olddocs/js/while.md

@@ -17,7 +17,6 @@ let condition = false
 
 ### Block Editor
 
-![](/static/mb/string-0.png)
 
 ### Touch Develop