Redesign of Web Programming

Web languages — HTML, CSS and JavaScript are the best choice for kids and for amateur programmers, because they are very simple, and with them you can create many interesting things: sites, mobile and desktop applications, web servers and robotics — what else does an amateur programmer need for happiness?

Visual Programming!

Visual programming frees programmers from monitoring correctness of syntax program syntax, it is useful at the beginning of training. This is the next stage in development of text-based programming languages.

And Programming on the Touch Screen!

I suggest using the touch screen to create applications. You can create applications on the tablet, for example, lying on the couch, or walking in the park. I developed a new way of working with text on a touch screen, based on Flexbox.

But in the usual web programming, there are two problems:

1. Web languages have many unnecessary features. To create real good programs, you do not need to know these languages completely. In the beginning, you can master core, the basic features. The rest you can learn later or never use.
2. In the professional web industry, besides knowledge of these languages, you need to know many other tools. To learn them, you need to spend a lot of time and effort. But kids do not need these complex tools, they need simplicity. The amateur programmer does not need to conform to industry standards.

We must clearly understand the beauty of web languages. The programming tool can be and should be simple.

Let's distinguish three areas of programming:

1. Professional industry — complex standard tools and stress
2. Teaching kids, at school or alone — minimum stress and complexity
3. Amateur programming — creating necessary programs for yourself

The second and third group of programmers can use one simple tool that I propose. Programmers from the first group may not understand the meaning.

Based on HTML, CSS and JavaScript languages, I developed three visual programming languages for kids, and for all amateur programmers (like me) who need minimal programming complexity. So simple was not yet there.

I redesigned web languages, cut off all unnecessary things and allocated a core sufficient to create normal web applications.

HTML®

Content of document can be described using only 10 elements:

1. group — for grouping elements
2. string — for strings, line groups form paragraphs
3. link — for links, used on sites
4. window — for additional windows, used on sites
5. picture — for embedding graphic files
6. video — for embedding video files
7. audio — for embedding audio files
8. input — to select and download files from the computer
9. SVG — scalable vector graphics
10. canvas — for colorizing pixels

The full HTML contains about ten times as many elements. For example, for grouping, there are about ten elements, and each has its own role. But you can use only one basic element for grouping, and add roles through WAI-ARIA. If you want, you can add more elements, but in fact there is no sense in this, it's a meaningless complication of the language.

There are only seven elements in the visual editor of document:

CSS®

Decor is described in styles, within which there are rules, within which there are declarations.

Styles

Style contains a set of rules. Program can enable and disable it dynamically, referring to it by its identifier. So you can change decor of application. Also, style change can occur automatically, depending on the screen size and its orientation.

Rules

Rule contains a set of decor declarations, for one element or several elements, or contains an declaration for an animation.

Declaration of Decor

All decor attributes are grouped by purpose — 11 main groups, in which there are 52 subgroups, in which there are one or more attributes.

Declaration of Animation

Declaration of animation describes initial, intermediate, and final value of attribute of decor.

Flexbox First

I suggest using three methods of positioning:

1. Instead of the usual classic flow, you can use Flexbox. The result will be similar, except for the ability to use "float". For all elements, the default is "display:flex". Another possible value for this attribute is "display:none".
2. Absolute or fixed position relative to parent container or screen. For all elements, the default is "position:relative".
3. Displacement relative to one's own position. Displacement via "position: relative" is not animated, so "transform:translate" is used.

You can also use Flexbox to create text and tables.

Text consists of words. A word is one string, for example a button. String sequence within group is paragraph of text. When editing a word, each of its letters is temporarily converted to a separate string. Text inside strings is formatted in the declaration of text decor. String sequence within group is formatted via Flexbox.

JivoScript®

JivoScript is a subset of JavaScript language. It uses only simple and understandable to kids capabilities of JavaScript language, and only its good parts, and only strict mode. JivoScript® is the Russian analog of the original name of JavaScript language: LiveScript.

Total of 50 graphic elements of which program consists:

Program is a sequence of elements. Empty program:

Each program element is an action or a group of actions. You can create any program from 12 elements:

Value assignment:

Deleting element of object or array:

Logical branching. This action contains one or two groups of actions, that are executed depending on the value on the right side. If value of the right side is "Yes", then the first group of actions is executed. If "No", then the second action group is executed:

Branching of variants. This action contains several variants of action groups. Action group is executed if the value in corresponding right side of it coincides with the value of address on the left side. Also, there is an action group which is executed if no value on the right side corresponds to the value of address on the left side:

Loop of actions after verification. In beginning, this action checks value on the right side. If value is "Yes", then action group of this loop is executed. And this loop starts from the beginning. If value is "No", then this loop is terminated, and the following action is executed:

Loop of verification after actions. In the beginning, this action executes its group of action. Then it checks the value on the right side. If value is "Yes", then this loop starts from the beginning. If value is "No", then this loop is terminated and the following action is executed:

Loop of array elements. This action executes its group of action. Number of executions correspond to the length of array. In the left part, there is address accessible only within action group of loop. In each execution, the value of this address increases by one, starting from zero:

Loop of object elements. This action executes its group of action. Number of executions corresponds to the number of object properties. In the left part, there is address accessible only within action group of loop. In each execution, value of this address is associated with one of object properties:

Online Visual Code Editor

In this editor, programmer edits a single-page application, which consists of:

• application title
• application description
• document code
• style code
• program code

Also, programmer edits spare parts for application, which consist of:

• spare parts title
• spare parts for document
• spare parts for styles
• spare parts for rules
• spare parts for program
• image files
• audio files
• video files

Programmer can save data (application and spare parts) to its server and download data from its own or another's server to editor. To create your own server — download and unzip server.zip on your php-server. You can download the finished demo application from editor server.

When you click Run button, editor launches application in separate window.

When you click Export button (in online and offline version), editor launches application in its window. You can save html-file of finished application to disk.

If there is an error in running application, window with code and error message will open on top of application window.

Editor contains standard set of fonts (about 300) that you can use.

Ready-made application can use built-in js-libraries: localforage and howler.

Video Lessons

Learning programming languages and code editor is now possible in one day.