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.
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:
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.
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.
Sciter HTML/CSS/script in Sublime3
Steps to add Sciter support to Sublime3
- In Sublime: menu Preferences » Browse Packages. It will open /Packages folder.
- Create folder named Sciter right in that folder.
- Download all *.tmLanguage files from github.com/svitalij/sciter.tm.syntax
- 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
Early BETA of Sciter Assistant for Microsoft Visual Code by ConrLab.
Supports syntax and editing of Sciter HTML and CSS flavours and TIScript.
Code completion in CSS including
@const constructs and script for
this and variables starting from
then by using
Ctrl-S sequence you can run it in sciter.exe.
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/) :
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:
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 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: