Setup

Author: easycoder

.eslintrc.json

@@ -0,0 +1,33 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "rules": {
+        "indent": [
+            "error",
+            "tab"
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "backtick"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ],
+        "no-case-declarations": "off",
+        "no-console": "off",
+        "no-constant-condition": "off",
+        "no-undef": "off"
+    }
+}

AboutEasyCoder.md

@@ -0,0 +1,22 @@
+### What is EasyCoder - and why? ###
+
+Programming is getting complicated. As new techniques come along it gets harder and harder to keep up. Even professional programmers have difficulty knowing which new technology to follow and how to get proficient in it.
+
+When computers were young - back in the 1970s and 80s - programming was open to all, and many of the software products we take for granted now have their roots in the efforts of amateurs. Excel is the logical development of VisiCalc, for example, and even the mighty Microsoft Windows owes a lot to CP/M. Products like these often resulted from the efforts of very small teams, often of 1 or 2 people, but now there's no room for the amateur programmer in any but the simplest of environments.
+
+Yet there are software tools that are accessible by ordinary people. Every trainee accountant uses Excel macros, and databases can be managed with SQL, which although able to do some pretty powerful things is pretty simple to use (at the outset, at least).
+
+In the world of the browser, things are divided between HTML, CSS and JavaScript. HTML defines _what_ goes into the page and CSS describes _how_ it looks. JavaScript adds interactivity and the ability to customise the page after it loads.
+
+By way of explanation, every page you see is produced by code running on the web server. WordPress and its themes are composed of a lot of PHP files working together and using your information - stored in a database - to build the page that is sent to the browser. Because you didn't write the PHP code yourself you have limited control over it; the color scheme, the fonts and the general layout are all decided by the theme designer. They may allow you to customise a little and sometimes there's a plugin to adjust some part of the display, but essentially you get what you're given. JavaScript running in the browser lets you tinker with the page _after_ it arrives and without the server knowing anything about it.
+
+The trouble for most WordPress users is that JavaScript is a huge programming language in which there are always several different ways to do the same thing. It's quite easy to learn some basic JavaScript but very hard to get beyond the baby steps. Most WordPress page designers are not professional programmers; they deal primarily with the _what_ and _how_ of HTML and CSS.
+
+In general there are quite a small number of things you need to do with JavaScript. It's not computing rocket trajectories or drug doses; it's just taking elements of your HTML and altering them in some way. Maybe it's changing the CSS of an element so it shows in a different color, or with a different border color, or... there are so many things you might want to do but they mostly amount to changing a CSS style somewhere.
+
+**_EasyCoder_** aims to simplify the job of writing code that runs in the browser and does things with your page. It's a programmming language that aims to looks as much like English as possible and the script is contained in the page itself, right next to the HTML it controls. All you need is to install our plugin, add some IDs to the elements of your page you want to control then write a suitable script, placing it inside a special preformatted element. It doesn't require any formal programming experience but professionals might also find it can save them time and leave a result their clients can understand later if they want to make changes.
+
+[A Simple Example](Example.md)
+
+[EasyCoder](README.md)
+

DemoWebsite.md

@@ -0,0 +1,9 @@
+### Here On The Map - a demo website ###
+
+[Here On The Map](https://hereonthemap.com) is a website that shows off the capabilities of **_EasyCoder_**. It is a 100% scripted website; single-page and driven from the browser. All of its scripts are included in this repository, in the "scripts" folder.
+
+The purpose of Here On The Map is to demonstrate that website coding need not be complex. In fact, for the majority of websites you don't need to learn JavaScript, let alone any of the over-complicated frameworks that have become de _rigeur_ for anyone wanting to show off their programming skills, but which generally leave a website in an un-maintainable state.
+
+There's a reason why React exists; it's so Facebook could manage development of one of the world's largest websites. Are you building a website of a similar complexity and size to Facebook? Probably not. So is the toolkit they developed necessarily the best for you too? Getting the right answer to this question could save you a massive amount of time and effort.
+
+(more to follow)

Example.md

@@ -0,0 +1,67 @@
+### A Simple Example ###
+
+As a simple example, suppose you'd like to adjust the background color of a specific block of text when the page loads. The simple way is to go into the WordPress page editor, find the paragraph and wrap it in a tag:
+
+```
+<div style="background-color:pink">This is the paragraph of text</div>
+```
+
+That's easy enough but the background will always be pink. Suppose you'd like it to only change when the user interacts with the page in some way? This is where you need a bit of JavaScript and it's where **_EasyCoder_** makes things a breeze. Here's the code for making the background change; we'll look at triggering it later.
+
+First of all, the DIV must have its own unique ID, like this:
+
+```
+<div id="my-special-div">This is the paragraph of text</div>
+```
+
+but it doesn't need any style information; we'll do that using a script.
+
+I'm assuming that you have installed and activated the **_EasyCoder_** plugin. So now you need to provide it with a script to run. Put the following code anywhere in your HTML file:
+
+```
+<pre id="easycoder-script" style="display:none">
+  <!-- script goes here -->
+</pre>
+```
+
+As you can see, the script is contained in an invisible preformatted section with a specific ID that the plugin will look for. Let's supply some code to change the backgound color.
+
+```
+<pre id="easycoder-script" style="display:none">
+  div MyDiv
+  
+  attach MyDiv to `my_special-div`
+  set style `background-color` of MyDiv to `pink`
+</pre>
+```
+
+The first line declares a "variable" called _MyDiv_, being an instance of the general type _div_, and it attaches this variable to the element having the id _my-special_div_. The backticks are what **_EasyCoder_** uses to define a text constant; other languages mostly use double-quotes but we have a couple of good reasons for not doing so - see the documentation on our website. The final line sets a single style element - the background color - to the element.
+
+Most non-programmers will find this a lot easier to read than the corresponding JavaScript. It's English, after all, with a minimum of special symbols.
+
+Let's suppose you wanted to change the background color only when the user clicks a button in your page. So you need to add an appropriate ID to your button in the HTML.
+
+```
+<button id="my-clickable-button">Click me!</button>
+```
+
+And the script now looks like this:
+
+```
+<pre id="easycoder-script" style="display:none">
+  div MyDiv
+  button Button
+  
+  attach MyDiv to `my_special-div`
+  attach Button to `my-clickable-button`
+  on click Button set style `background-color` of MyDiv to `pink`
+</pre>
+```
+This code does the following:
+1. Attaches MyDiv to the _div_ element with the id _my_special_div_.
+1. Attaches the _Button_ variable to the _button_ element with the id  _my-clickable-button_ id
+1. Waits for the user to click the button and sets the _background-color_ when this happens.
+
+[About EasyCoder](AboutEasyCoder.md)
+
+[EasyCoder](README.md)

README.md

@@ -0,0 +1,42 @@
+### EasyCoder ###
+
+**_EasyCoder_** is a WordPress or standalone plugin that lets you write highly readable scripts to control the appearance and behavior of your web pages. This is what JavaScript does, but **_EasyCoder_** is a lot easier to learn. Here are its main benefits:
+
+ 1. It's quick to write browser applications in **_EasyCoder_**. Website development is faster and sites are more reliable.
+ 1. **_EasyCoder_** scripts are smaller than the corresponding JavaScript and are easy to read by most people, not just by programmers. This matters later on when maintenance is needed and the original programmer may no longer be available.
+ 1. You don't have to figure where to put custom JavaScript files in the WordPress directory structure, because the **_EasyCoder_** script is kept in its own section of your WordPress page or post, or downloaded from your database. It's easy to see the context of each script and what it does and the script is less likely to get lost during maintenance of the site.
+ 1. The **_EasyCoder_** plugin has the ability to single-step your script, showing you its variables at each step, which makes it easier to see what's happening.
+ 1. When things go wrong an error message pops up, showing you which line of the code you reached. The error message also gets written to the browser console.
+ 1. The language has commands to do things that are very complex to do in JavaScript, such as handling REST dialogs, custom GUI elements and vector graphics.
+ 1. You can divide your HTML into markup and content, by providing the latter as a JSON structure in its own section of your page. The script can easily access this data to write content into the HTML elements. This makes it easier to understand the structure of the page.
+ 1. **_EasyCoder_** has a fully pluggable architecture. This allows any owner of JavaScript functionality to 'wrap' this in script commands and offer it as a plugin, allowing any site developer to use it without the need to learn JavaScript. Typical examples of such wrappers would be for Google Maps or for CKEditor, each of which presents a concise API and has functionality that's easily understood and easy to describe in plain English. Such well-encapsulated products are ideal candidates for implementation as **_EasyCoder_** plug-ins.
+ 1. **_EasyCoder_** includes a REST server that permits scripts to access resources on demand from the server rather than having them embedded in the page. Resources include scripts, HTML components, CSS and general data, and all can be loaded and unloaded dynamically.
+ 1. **_EasyCoder_** is well suited to the construction of single-page web designs of unlimited size. The memory space occupied by JavaScript remains roughly the same no matter how many scripts and data you load and unload using REST. There is no memory or performance hit as the size of the project grows, because modules remain on the server, ready for use, instead of taking up browser space.
+ 
+It is said that there's a shortage of competent programmers, a belief that's confirmed by the huge number of job vacancies all asking for the same skills such as React. If that's true then the use of React or similar tools in any project that is not managed by a permanent team is almost guaranteed to result in problems later with maintenance. If it's hard to find developers now then the chances of locating a skilled React engineer in 5-10 years' time at a price compatible with effective maintenance are vanishingly small.
+
+**_EasyCoder_** tries to address this problem by offering a way to build websites that won't rely on such high-level skills, using the power of language rather than relying on elaborate structures to achieve the desired goal. In the hands of a competent programmer it makes little difference to the cost of building the project but a huge difference to that of maintaining it by people lacking those skills. **_EasyCoder_** scripts are easy to understand by anyone who has a good knowledge of what the site does, even by many people who aren't programmers at all.
+
+There's a lot more information on [our website](https://easycoder.software) including example scripts, and full reference documentation on the language plus a tutorial course, suitable for desktop or mobile users, can be found on [our Codex page](https://codex.easycoder.software). Anyone interested in helping develop **_EasyCoder_** will find a developer manual in the last of the links below.
+
+[A Simple Example](Example.md)
+
+[A Demo Website](DemoWebsite.md)
+
+[About EasyCoder](AboutEasyCoder.md)
+
+[Developer Manual](developer/Developer.md)
+
+### The Codex ###
+The Codex is a separate website that provides a tutorial series plus a programming playground to try out code and a complete programmers' reference to the **_EasyCoder_** language. We also offer a zip file that can be unpacked on any suitable host. The only special hosting requirement is a recent version of PHP. Running it on your own hosting allows you to save scripts to your server; otherwise they remain in browser local storage.
+
+### License ###
+
+Copyright (c) 2018-19 EasyCoder Software
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

build

@@ -0,0 +1,23 @@
+#!/bin/sh
+
+mkdir -p ~/temp/lib
+rm -rf ~/temp/lib
+cd ~/Dropbox/Code/VisualStudio/EasyCoder/
+
+echo "easycoder: running babel"
+npx babel --plugins transform-object-rest-spread js --out-dir ~/temp/lib
+echo "easycoder: babel finished"
+
+npx browserify ~/temp/lib/EasyCoder.js -o ~/EasyCoder/easycoder.js
+echo "easycoder: browserify finished"
+
+java -jar compiler.jar --js ~/EasyCoder/easycoder.js --js_output_file ~/EasyCoder/easycoder-min.js
+echo "easycoder: closure finished"
+
+cp js/easycoder/plugins-sample.js ~/EasyCoder
+cp js/plugins/* ~/EasyCoder/plugins
+cp server/* ~/EasyCoder
+echo "Files copied"
+
+rm -rf ~/temp/lib
+echo "All done"

codex/README.md

@@ -0,0 +1,19 @@
+### EasyCoder Codex ###
+
+**_EasyCoder_** Codex is a complete IDE for building and maintaining websites based on **_EasyCoder_** scripts. It includes a tutorial for beginners and a complete set of reference guides for the scripting language.
+
+The Codex can be used as the core of a web page. Just rename index.html (for example to codex.html) and create a new index.html with an internal reference that loads your main script. All site development and maintenance can be done using the script editor. To get started go to [EasyCoder Codex](https://codex.easycoder.software)
+
+### Installing the Codex ###
+Codex is a self-contained package that run on any suitable hosting. Download the `codex.zip` file to an empty site root and unzip it. Your host should provide a recent version of PHP. Self-hosting allows the scripts you write to be saved to your server, whereas when running from our server your scripts are saved to browser local storage.
+
+### License ###
+
+Copyright (c) 2019 EasyCoder Software
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+