Scalable Web Aplications

May 28, 2016

Filed under: HTML and CSS,Philosophy,Web Application Techologies — Andrew @ 3:40 pm

Nicholas Zakas is talking about basic principles of scalable [Web] application architectures:

While this talk was made in 2013 it is still 100% applicable to modern Web and Sciter (desktop) applications.

Maintainable CSS

May 12, 2016

Filed under: Design,HTML and CSS,Web Application Techologies — Andrew @ 8:20 am

I have found Maintainable CSS site exceptionally useful for designing maintainable CSS systems.

Modular and encapsulated: Styles don’t bleed or cascade without your permission.

Any design requirements: Completely flexible to your needs.

No tooling required: But you can use tooling if you want to.

Easy to learn: Read the guides and see.

Any size project: Whatever size project you have, MaintainableCSS will help.

Upgrade in your own time: You can start applying the approach today, bit by bit. You don’t need to upgrade the whole

Tokenizer + ::mark() = syntax colorizer

August 25, 2015

Filed under: HTML and CSS,Sciter,Script,Source code — Andrew @ 9:45 pm

Here is selfie of syntax (tiscript) colorizer – the text below is a full source code of syntax highlighting routine.
The code has colorized itself:

syntax colorizer

syntax colorizer

Can your browser do that in 40 lines of code?

And here are styles that define style of tokens:

plaintext > text::mark(number) { color: brown; }
plaintext > text::mark(number-unit) { color: brown; }
plaintext > text::mark(string) { color: teal; }
plaintext > text::mark(keyword) { color: blue; }
plaintext > text::mark(symbol) { color: brown; }
plaintext > text::mark(literal) { color: brown; }
plaintext > text::mark(comment) { color: green; }

Easy, no?

And even shorter selfie, colorizer wrapped as an aspect component (referenced from colorizer.css):
colorizer

::mark(…) feature is comming

August 22, 2015

Filed under: HTML and CSS,Sciter,Web Application Techologies — Andrew @ 10:04 pm

Please consider these tasks:

  1. Find all words in text on HTML page and highlight them
  2. Syntax highlighting: parse text of <pre> and mark all keywords by changing their color
  3. Find all misspelled words in <textarea> highlight them specifically.

Currently you can do #1 and #2 by wrapping each text found into <span>s with specific classes – thus to modify DOM structure of the document. Such modification by itself is a) not trivial to implement, b) is highly non-desirable (consider text editor with syntax highlighting) and c) even impossible in case of <textarea> for example.

Ideally we should have some facility that will allow us to a) mark text fragments, b) apply styling to such marked runs through CSS and c) do that without DOM tree modifications.

As a result upcoming Sciter will have:

  1. In CSS, support of ::mark(...name[s]...) pseudo element.
  2. In script runtime, new methods of Selection class:
    • Selection.applyMark(start,end, ... mark names...); – to add marks to the range.
    • Selection.clearMark(start,end, ... mark names...); – to clear marks from the range.

Example, CSS:

div::mark(hilite) { background-color:lime; } 
div::mark(hilite2) { background-color:cyan; }
div::mark(literal,string) { font-style:italic; color: red; }

First rule will tell the engine to set background color on all text runs that are marked by “hilite” to “lime”.

And script code

      var text = $(div).firstNode;
      var start = [bookmark: text, 6, false];
      var end   = [bookmark: text, 11, false];
      Selection.applyMark(start,end,"hilite");

will apply mark “hilite” to the text node from 6th until 11th position and so you will have the following rendering:
marks in text nodes
Note: this will not change DOM structure but rather apply some meta information to characters in the text.

CSS3 ‘filter’ property support

August 10, 2015

Filed under: HTML and CSS,Sciter — Andrew @ 9:49 pm
CSS filter property demo.

CSS filter property demo.

I am adding CSS filter property support to upcoming Sciter version. That involved Windows backend refactoring to support Direct2D v.1.1 if it is available.

January 28, 2015

Filed under: HTML and CSS,Sciter — Andrew @ 10:53 am

In Sciter <frame> element may have content-style attribute defined.

That content-style attribute takes URL of style sheet that gets applied on top of existing styles of the document:

<frame src="some-child.htm" content-style="content.css" />

That content.css gets appended to the list of other styles of the some-child.htm as if that document has <link rel="stylesheet" type="text/css" href="content.css"> at the end:

<html>
<head>
  <style>
    ... local styles ...
  </style>
</head>
<body>
   ... local content ...
</body>
 <link rel="stylesheet" type="text/css" href="content.css">
</html>

So when host document wants:

  1. to customize rendering of child document in the frame
  2. and/or inject some scripting behaviors in it

it can provide its own content.css file without the need of that child element modification.

Sciter SDK built-in document browser is an example of content-style usage:

{sciter-sdk]/doc/main.htm defines content frame as:

<frame #content src="content/preface.htm" content-style="styles/content.css"/>

so each document loaded into the frame gets {sciter-sdk}/doc/styles/content.css applied to its content

Next Page »