Rembrandt.ie Developer Notes

This website – rembrandt.ie – is controlled entirely by EasyCoder scripts running in the browser. These scripts request data from the site’s REST server and build the pages seen by users and by the editor.

Note: A REST (REpresentational State Transfer) server is a code module that accepts requests for data and returns the items requested. It uses standard HTTP commands in a human-readable format. The EasyCoder plugin has its own REST server, rest.php. To understand how it works you can use Postman to send to its endpoints, all of which are documented in its source file.

Everything is controlled by a set of EasyCoder JavaScript modules, stored in the ‘plugins’ folder on the website or called in from a CDN server. These files are requested by the main page HTML and comprise all the code loaded as the page starts. Scripts are compiled the instant they load; this takes only a few tens of milliseconds, then the runtime engine takes over. Once a script is running, everything it needs will be either in the database or in a folder called ‘easycoder’ at the top of your WordPress installation. This folder contains scripts, images, HTML code fragments and other items needed by the scripts. It is advisable to keep a current backup of the folder in case of accidental or malicious site damage.

EasyCoder is a WordPress plugin. When it loads it looks for a boot script in a DOM object whose id is easycoder-script, then compiles and runs it. This script is in the HTML for the home page.

A full language reference manual for EasyCoder can be found at https://easycoder.github.io, included as part of a tutorial series on the use of the language. Click the Codex button on the left-hand side. The manual is accessed through a button at the top of the right-hand panel.

This initial EasyCoder boot script for this website is only 7 lines long and its job is to load the main Rembrandt script from the server. We do this so the latter is not visible as part of the page source and also to keep all the scripts in one place, making maintenance easier. It is unlikely you will need to edit the main HTML file. The EasyCoder JavaScript module detects the loading of the page, looks for the named script inside the loaded page, compiles it and runs it. Progress information, written to the browser console, includes timing information to help choose the best optimization strategy.

Many programmers will see EasyCoder as something of a toy language, but don’t be fooled. It has everything needed to handle this job and it does it quite efficiently while at the same time being highly readable even to non-programmers. If you want to see what a script is doing, put a few print commands in strategic places. You can also add a debug step command to get it to display each source line as it executes. In extremis there is even a single-step tracer, but this does require a little bit of setting up. There’s a page in the EasyCoder codex that deals with this.

No build tools are needed to manage the site scripts. They are all plain text files that are supplied to the EasyCoder plugin as needed. Many developers may find this strange if they are used to a conventional programming environment, but all I can say is that the complexity you may be expecting isn’t present at all. All of the power of the system is in the language itself, not in the environment. The system is designed to provide the power that’s needed without the complexity that usually comes with it.

The main script does as little as possible, aiming to get a usable page up within a couple of seconds. It builds the title bar, a main content area with a space for a single painting with its title, caption and text, and an information panel on the right. While button images are loading It asks the REST server how many paintings there are, creates a random list of the painting IDs and calls the first one from the server.

At the top of the screen and down the middle are a number of buttons. When the user clicks one of these the script replaces the contents of the information panel with appropriate content.

Clicking the Free Paintings Evaluation button causes another script to load, which manages the relevant screen and the form that generates an email to be sent to Matthew.

Clicking the Blog button transfers control to the WordPress blog manager, which has no connection to the main page.

The page has 2 operating modes; user and admin. Admin is entered by clicking 3 times on the title graphic. The first time this is done the system will request a password, which is then remembered for that particular browser on that specific computer. To return to user mode, click the title graphic again just once. When in admin mode a gear symbol appears at the top right of the screen; when clicked this opens the admin page, which comprises a number of scripts for viewing site statistics and editing various components of the site such as the scripts themselves, HTML components used by them, the cartoon database or this documentation page.

Editing files

All the program scripts can be edited if you have access to them via the password. If there is ever a need for someone new to make updates to the system they should start with the ‘rembrandt’ script and study this to understand how it works. The language looks a lot like English so a competent programmer should have little difficulty. A reference manual for the EasyCoder scripting language is included in the EasyCoder Codex, at https://codex.easycoder.software, which is also a tutorial recommended for anyone new to EasyCoder. The programmer will also have to study the rest.php file in the EasyCoder plugin folder to see how REST calls are handled.

To read and modify scripts use the script editor listed on the Admin page. One of the files available is the script editor itself, should this ever need to be changed. The name of the script is ‘scripted’.

Another of the scripts isn’t an EasyCoder script at all; it’s a JSON (JavaScript Object Notation) file. It contains miscellaneous items such as file names and button labels in the three languages.

Many of the components of the screens are supplied by HTML fragments. These are also kept on the server and a separate editor is available to make changes to them. The name of the script is ‘htmled’.

Images, in particular those of the cartoons themselves, are stored in 2 different formats. The cartoon data is held in a database table and a script is provided to access it for editing. This particular script is embedded in the ‘cartooned’ WordPress page, unlike the script and HTML editors which are loaded from the scripts folder.