New blocknote.net application is getting its shape.

My Blocknote.net editor is getting new shape.

BN is an editor “for the rest of us on the Net” – simple WYSIWYG editor producing clean HTML that is ready to be embedded into blogs, emails, etc.

It is an editor for “Internet writers” people who produce content and so need humanistic tool rather than plain text editor with cryptic HTML or even Markdown.

BN2

Some editing tasks are easy to do in source code though. So BN supports source code view with transparent selection – text selected in WYSIWYG will be selected in source and vice versa:

BN2

On the road to better documentation

Sciter documentation, how to say in polite manner, is not convenient. I know.

So looking for ideas of making it better.

Problem is that I need documentation for at least of two types of media: for Sciter’s help browser and for the web. While I can use HTML it is not always use the same files. Standard CSS is not at Sciter’s level yet.

For example I missed things like flow:row(dt,dd), simply no such things in conventional CSS. <dl/dt/dd> lists are barely usable without proper styling. To achieve flow:row(dt,dd) layout on the web it need to render it as a table, sigh.

So it is clear that documentation shall use some other format and be assembled from it for particular use. One of obvious choices is to use Markdown for that. So I need markdown parser in Sciter that supports hierarchical constructs like <li><pre>… I’ve managed to implement such a parser in 250 lines of code. Just in case, original Perl parser written by John Gruber is about 1400 lines of highly cryptic Perl code. In Sciter I am using generators/yield that allowed to simplify the whole thing.

This is how test-bed looks that far:

And speaking about software documentation in general.

I’d appreciate any examples of good examples of software documentation. But not from Microsoft or Apple please – they are barely readable.

Sublime 3, Sciter syntaxes

Sciter HTML/CSS/script in Sublime3

Steps to add Sciter support to Sublime3

  1. In Sublime: menu Preferences » Browse Packages. It will open /Packages folder.
  2. Create folder named Sciter right in that folder.
  3. Download all *.tmLanguage files from github.com/svitalij/sciter.tm.syntax
  4. Copy those *.tmLanguage files into that folder.

Done. Now if you will open .tis files in Sublime3 you will see syntax highlighting.

To edit HTML and CSS files with Sciter specific extensions select

View » Syntax » Sciter » Sciter HTML

Gratitude to Vitalij Shitts the Great

Sciter assistant for Visual Studio Code

Early BETA of Sciter Assistant for Microsoft Visual Code by ConrLab.

MS-visual-code-sciter

Microsoft Visual Code, Sciter assistant in actions 

Supports syntax and editing of Sciter HTML and CSS flavours and TIScript.

Code completion in CSS including @mixin/@const constructs and script for this and variables starting from el....

If to update user settings (File->Preferences->User Settings) like this:
code-preferences

then by using Ctrl-K, Ctrl-S sequence you can run it in sciter.exe.

HTML/CSS desktop UI solutions, distribution sizes

As was mentioned, I’ve added scapp.exe to the SDK distribution. The Scapp is a monolithic executable with Sciter engine inside.

The question: Having the scapp what if to create IDE using it? How that IDE will compare with other existing on the market?

To answer on this question I’ve created simple IDE sketch in Sciter (sdk/samples/ideas/ide/) :


ide-windows ide-osx
As you see it is pretty close to, let’s say, Brackets editor from Adobe: brackets-windows

My quick sketch implements just basic functionality: loading file, basic editing and syntax highlighting. All together HTML/CSS/scripts are about 40k (uncompressed). Full implementation will definitely have more of those. Let’s assume that we will be creative enough to produce 1mb of scripts, styles and HTML.

Together with the executable it will give us:

Binary (scapp.exe) HTML/CSS/scripts total
on disk 4.1mb 1mb 5.1mb
compressed
(distribution)
1.8mb 0.29mb 2.09mb

So the whole IDE could be of just 2 megabytes !

Let’s compare it with other behemoths then:

IDE/vendor distribution size installation size ratio to largest
(the less – the better)
Brackets / Adobe 48.1mb 114mb 51%/31%
Visual Studio Code / Microsoft 31.9mb 135mb 34%/37%
Atom / GitHub 93.6mb 366mb 100%/100%
Sciter / Terra Informatica Software 2.1mb 5.1mb 2%/1.4%

So for each of us, users, it takes 50 times more of traffic to download these things that it should be… Is it fair?

Sciter and OpenGL

Sciter with Skia/OpenGL backend adds an ability to render HTML/CSS directly onto OpenGL window mixing HTML content with 3D content.

Here is a screen cast of one of one of stock GLFW demos with Sciter additions.

OpenGL integration uses the same approach as used in Sciter/DirectX – document in the window may contain two HTML layers with 3D scene in between:

sciter DOM layers on OpenGL window