Saturday, May 6, 2017

Async JS

setTimeout

asdf

  • timed actions
  • more responsive GUI, but beware of unwanted artifacts

asdf

setInterval

asdf

Promises

asdf

  1. return new Promise((resolve, reject) => { setTimeout(() => { resolve([1, 2, 3]); }, 1000); });

asdf

async/await

asdf

  • loading scripts - await, defer
  • Promises
Sunday, May 28, 2017

Document fragments

Many JavaScript developers know very well document.createElement, fewer of them know document.createTextNode but AFAIK very few know document.createDocumentFragment. And I'd say it's rather pity, it could be very useful!

Fragments are like lightweight elements, that never goes into the DOM. Because of this they're faster, than working directly with DOM. The magic of fragments is in parentNode.appendChild(fragment), because it doesn't append the fragment, but all it's children. They move into the new parent, so after appendChild the fragment becomes empty.

It's basically a single container for multiple DOM elements, so if you want to output 0-N elements from your function, you simply append them to a fragment and return the fragment instead.

There's is a caveat though. If you want to keep a reference to the fragment, you need to use parent.appendChild(fragment.cloneNode(true)), which keeps all elements in the fragment and it even appends children faster (so called “cached mode”), BUT! if you had some event listeners attached to those nested elements inside your fragment, the cloneNode method won't clone them and therefore they disappear.

There's no good way around it, because with JavaScript you can't extract events from an element. The only way is to attach events after the clone using various approaches, most of which aren't much practical.

Thursday, May 25, 2017

Japan

On our travels in Japan and especially during preparation of our thorough itinerary I noticed Japanese websites look at least a decade behind “western” site styles and technology.

Many styled texts are in a picture, like we did before CSS2. They often use just a single font face – MS PGothic, which became a staple of a Japanese website for me.


But because we fell in love with Japan, I decided to ditch my former decision to not support non-latin languages in my apps. In Japan they have staggering four alphabets: ''kanji'', logographic characters borrowed from Chinese, ''hiragana'' and ''katakana'', two syllabic scripts (“kana”) and ''rōmaji ''– romanized Japanese.

  • English: Japan
  • Kanji: 日本
  • Hiragana: にほん
  • Katakana: ニホン
  • Rōmaji: Nihon / Nippon

Room to grow web apps

※ reference mark, using tilda to mark from-to, esp. in times. 7~23 (seven-eleven)