“Expert’s pyramid”

October 10, 2016

Filed under: Philosophy,Web Application Techologies — Andrew @ 11:15 am

Does front end developer need to know anything except of __HIS_FAVORITE_FRAMEWORK_HERE__ ?


experts-pyramid
From Dmitri’s Pavlutin “The path of software development craftsmanship”

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.

Web Frameworks: React vs Vue

Filed under: Philosophy,Web Application Techologies — Andrew @ 10:25 am

Practical investigation on effectiveness of Virtual DOM (React) updates versus direct DOM updates (Vue).

Stats of list  update having 100 items.

Stats of list update having 100 items.

Clearly React takes significantly more CPU time for the task of updating 100 items list.

That proves once again that there is no silver bullet in Web Front End design. Each task has its own optimal framework/architecture.
“Ideal framework” should allow to use multiple paradigms – list-of-items view should use virtual list, it could be one-way bound with data [model] and item-details may or may not be data bound – depends on its structure.

What if just start from our old friend jQuery with its system of plugins and/or components/modules architecture of Twitter’s Flight.
Where you can add view routing, data bound lists and other plugins of your choice? Only when and where they are needed …

Is it close to that optimal, flexible and stable architecture web applications we are dreaming of?

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

Russian Roulette game, .JS style.

February 18, 2016

Filed under: Philosophy,Web Application Techologies — Andrew @ 10:58 am

Disclaimer: the game is quite dangerous and may lead to alcoholism of participants even after first game. Play responsibly!

Idea of the game:

Players, in their turn, name random English word. To this word they add “JS” or “.JS” suffix and go google for it.
If google will give JS library or framework with that name – you won and drink one Vodka shot.

You’ll be surprised… and read disclaimer above.

Studies show that a TODO list is the most complex JavaScript app you can build before a newer, better framework is invented.

Allen Pike: “A JS framework on every table”

::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.

Next Page »