You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blockcode/README.md
+6-2Lines changed: 6 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,11 @@ There are a couple of things I want to accomplish with this code. First and fore
15
15
16
16
To do this, we encapsulate everything that is specific to the turtle language into one file (turtle.js) that we can easily swap out with another file. Nothing else should be specific to the turtle language, the rest should just be about handling the blocks (`block.js` and `menu.js`) or generally useful web utilities (`util.js`, `drag.js`, `file.js`). That is the goal, although to maintain the small size of the project, some of those utilities are less general purpose and more specific to their use with the blocks.
17
17
18
-
In order to make the resulting tool available to the widest possible audience, it is web-native. Simple HTML, CSS, and JavaScript means it should work in the widest variety of browsers and platforms. Wherever possible, if something about the implementation began to be too complex, I took that as a sign that I wasn't doing it "the web way" and tried to re-think how to leverage the tools built into the browser better. Modern web browsers are powerful platforms, with a rich set of tools for building great apps, worth exploring for projects large and small.
18
+
## Web Applications
19
+
20
+
In order to make the resulting tool available to the widest possible audience, it is web-native. HTML, CSS, and JavaScript means it should work in most browsers and platforms. Wherever possible, if something about the implementation began to be too complex, I took that as a sign that I wasn't doing it "the web way" and tried to re-think how to leverage the tools built into the browser better. Modern web browsers are powerful platforms, with a rich set of tools for building great apps, worth exploring for projects large and small.
21
+
22
+
An important distinction between web applications and traditional desktop or server applications is the lack of a `main()` or other entry point. There is not explicit run loop because that is already built into the browser and implicit on every web page. All our code will be parsed and executed on load, at which point we can register for events we are interested in for interacting with the user. After the first run, all further interaction with our code will be through callbacks we set up and register, whether we register those for events (like mouse movement), timeouts (fired with the periodicity we specify) or frame handlers (called for each screen redraw, generally 60 frames per second). The browser does not expose full-featured threads (only shared-nothing Web Workers) either.
19
23
20
24
## Why not use MVC?
21
25
@@ -29,7 +33,7 @@ Aside from `blocks.css` which provides styling (and some help with functionality
29
33
30
34
### blocks.js
31
35
32
-
Each block consists of a few HTML elements, styled with CSS, with some JavaScript event handlers for drag-and-drop and modifying the input argument. It's all standard web stuff, and this file just helps to create and manage these grouping of elements as single objects. When a type of block is added to the block menu, it is also associated with a JavaScript function to run to implement the language, and so each block in the script has to be able to find its associated function and to call it when the script runs.
36
+
Each block consists of a few HTML elements, styled with CSS, with some JavaScript event handlers for drag-and-drop and modifying the input argument. This file helps to create and manage these grouping of elements as single objects. When a type of block is added to the block menu, it is also associated with a JavaScript function to run to implement the language, and so each block in the script has to be able to find its associated function and to call it when the script runs.
33
37
34
38
The entry point for a block is the `createBlock(name, value, contents)` function, which returns a DOM element representing the block, which can be appended to the document. This can be used to create blocks for the menu, or for restoring script blocks saved in files or localStorage. While it is flexible this way, it is built specifically for the Blockcode "language" and makes assumptions about it, so if there is a value it assumes the value represents a numeric argument and creates an input of type "number". Since this is a limitation of the Blockcode as used here, this is fine, but if we were to extend the blocks to support other types of arguments, or more than one argument, the code would have to change extensively.
0 commit comments