diff --git a/2-ui/99-ui-misc/03-event-loop/article.md b/2-ui/99-ui-misc/03-event-loop/article.md
new file mode 100644
index 000000000..26a80afe9
--- /dev/null
+++ b/2-ui/99-ui-misc/03-event-loop/article.md
@@ -0,0 +1,341 @@
+
+# Olay döngüsü: microtasks ve macrotasks
+
+Node.js'de olduğu gibi tarayıcı JavaScript yürütme akışı da bir *olay döngüsüne* dayanır.
+
+Olay döngüsünün nasıl çalıştığını anlamak, optimizasyonlar ve bazen de doğru mimari için önemlidir.
+
+Bu bölümde önce işlerin nasıl yürüdüğüyle ilgili teorik ayrıntıları ele alacağız ve ardından bu bilginin pratik uygulamalarını göreceğiz.
+
+## Olay Döngüsü
+
+*Olay döngüsü* kavramı çok basittir. JavaScript motorunun görevleri beklediği, yürüttüğü ve daha sonra uyuyarak daha fazla görev beklediği sonsuz bir döngü vardır.
+
+Motorun genel algoritması:
+
+1. Görevler varken:
+    - en eski görevden başlayarak bunları yürütün.
+2. Bir görev görünene kadar uyuyun, ardından 1'e gidin.
+
+Bu, bir sayfaya göz atarken gördüğümüz şeyin biçimselleştirilmesidir. JavaScript motoru çoğu zaman hiçbir şey yapmaz, yalnızca bir script/işleyici/olay etkinleştirildiğinde çalışır.
+
+Görev örnekleri:
+
+- Harici bir script `<script src="...">` yüklendiğinde, görev onu yürütmektir.
+- Bir kullanıcı faresini hareket ettirdiğinde, görev `mousemove` olayını göndermek ve işleyicileri yürütmektir.
+- Zamanlanmış bir `setTimeout` için zaman geldiğinde, görev callback'i çalıştırmaktır.
+- ...ve benzeri.
+
+Görevler belirlenir - motor bunları işler - sonra daha fazla görev bekler (uyurken ve sıfıra yakın CPU tüketirken).
+
+Motor meşgulken bir görev gelebilir, sonra sıraya girebilir.
+
+Görevler, "macrotask sırası" (v8 terimi) olarak adlandırılan bir sıra oluşturur:
+
+![](eventLoop.svg)
+
+Örneğin, motor bir `script`'i yürütmekle meşgulken, bir kullanıcı faresini hareket ettirerek `mousemove`'a neden olabilir ve `setTimeout` zamanı gelmiş olabilir ve benzeri, yukarıdaki resimde gösterildiği gibi bu görevler bir kuyruk oluşturur.
+
+Kuyruktaki görevler "ilk gelene ilk hizmet" esasına göre işlenir. Tarayıcı motoru `script` ile işi bittiğinde, `mousemove` olayını, ardından `setTimeout` işleyicisini vb. işler.
+
+Buraya kadar oldukça basit, değil mi?
+
+İki ayrıntı daha:
+1. Motor bir görevi yürütürken oluşturma(Render) asla gerçekleşmez. Görevin uzun sürmesi önemli değil. DOM'daki değişiklikler yalnızca görev tamamlandıktan sonra boyanır.
+2. Bir görev çok uzun sürerse tarayıcı, kullanıcı olaylarını işleme gibi diğer görevleri yapamaz. Bu yüzden bir süre sonra "Sayfa Yanıt Vermiyor" gibi bir uyarı vererek görevi tüm sayfayla sonlandırmayı önerir. Bu, çok sayıda karmaşık hesaplama olduğunda veya sonsuz bir döngüye yol açan bir programlama hatası olduğunda olur.
+
+Teori buydu. Şimdi bu bilgiyi nasıl uygulayabileceğimizi görelim.
+
+## Kullanım Senaryosu 1: CPU'ya aç görevleri bölme
+
+Diyelim ki CPU'ya aç bir görevimiz var.
+
+Örneğin, sözdizimi vurgulama(syntax-highlighting) (bu sayfadaki kod örneklerini renklendirmek için kullanılır) oldukça CPU ağırlıklıdır. Kodu vurgulamak için, analizi gerçekleştirir, birçok renkli öğe oluşturur, bunları belgeye ekler - çok fazla zaman alan büyük miktarda metin için.
+
+Motor sözdizimi vurgulama ile meşgulken, DOM ile ilgili diğer işlemleri yapamaz, kullanıcı olaylarını işleyemez vb. Hatta tarayıcının bir süre "hıçkırmasına" ve hatta "takılmasına" neden olabilir ki bu kabul edilemez bir durumdur.
+
+Büyük görevi parçalara bölerek sorunlardan kaçınabiliriz. İlk 100 satırı vurgulayın, ardından sonraki 100 satır için "setTimeout" (sıfır gecikmeli) zamanlayın, vb.
+
+Bu yaklaşımı göstermek için, basitlik adına, metin vurgulama yerine `1` ile `1000000000` arasında sayan bir fonksiyon alalım.
+
+Aşağıdaki kodu çalıştırırsanız, motor bir süre "askıda kalır". Açıkça fark edilen sunucu tarafı JS için ve tarayıcıda çalıştırıyorsanız, sayfadaki diğer düğmeleri tıklamayı deneyin - sayım bitene kadar başka hiçbir olayın işlenmediğini göreceksiniz.
+
+```js run
+let i = 0;
+
+let start = Date.now();
+
+function count() {
+
+  // ağır bir iş yap
+  for (let j = 0; j < 1e9; j++) {
+    i++;
+  }
+
+  alert("Done in " + (Date.now() - start) + 'ms');
+}
+
+count();
+```
+
+Tarayıcı, "script çok uzun sürüyor" uyarısı bile gösterebilir.
+
+İşi iç içe `setTimeout` çağrılarını kullanarak bölelim:
+
+```js run
+let i = 0;
+
+let start = Date.now();
+
+function count() {
+
+  // ağır işin bir parçasını yap (*)
+  do {
+    i++;
+  } while (i % 1e6 != 0);
+
+  if (i == 1e9) {
+    alert("Done in " + (Date.now() - start) + 'ms');
+  } else {
+    setTimeout(count); // yeni cağrıyı planla (**)
+  }
+
+}
+
+count();
+```
+
+Artık tarayıcı arayüzü "sayma" işlemi sırasında tamamen işlevseldir.
+
+A single run of `count` does a part of the job `(*)`, and then re-schedules itself `(**)` if needed:
+Tek bir `count` çalıştırması `(*)` işinin bir bölümünü yapar ve ardından gerekirse kendisini `(**)` olarak yeniden zamanlar:
+
+1. İlk çalıştırma sayar: `i=1...1000000`.
+2. İkinci çalıştırma sayar: `i=1000001..2000000`.
+3. ...ve benzeri.
+
+Şimdi, motor bölüm 1'i yürütmekle meşgulken yeni bir yan görev (örneğin `onclick` olayı) ortaya çıkarsa, sıraya alınır ve sonraki bölümden önce bölüm 1 bittiğinde yürütülür. `count` yürütmeleri arasındaki olay döngüsüne periyodik geri dönüşler, JavaScript motorunun başka bir şey yapması, diğer kullanıcı eylemlerine tepki vermesi için yeterli "hava" sağlar.
+
+Dikkate değer olan şey, her iki varyantın da -- işi `setTimeout` ile bölerek ve bölmeden -- hız açısından karşılaştırılabilir olmasıdır. Toplam sayım süresinde pek bir fark yok.
+
+Onları daha da yakınlaştırmak için bir iyileştirme yapalım.
+
+Zamanlamayı `count()`un başına taşıyacağız:
+
+```js run
+let i = 0;
+
+let start = Date.now();
+
+function count() {
+
+  // zamanlamayı en başa taşı
+  if (i < 1e9 - 1e6) {
+    setTimeout(count); // yeni cağrıyı planla 
+  }
+
+  do {
+    i++;
+  } while (i % 1e6 != 0);
+
+  if (i == 1e9) {
+    alert("Done in " + (Date.now() - start) + 'ms');
+  }
+
+}
+
+count();
+```
+
+Şimdi `count()` yapmaya başladığımızda ve daha fazla `count()` yapmamız gerektiğini gördüğümüzde, işi yapmadan önce bunu hemen zamanlıyoruz.
+
+Çalıştırırsanız, önemli ölçüde daha az zaman aldığını fark etmek kolaydır.
+
+Neden?  
+
+Çok basit: Hatırladığınız gibi, iç içe geçmiş birçok `setTimeout` çağrısı için tarayıcıda minimum 4 ms gecikme vardır. `0` ayarlasak bile, `4ms` (veya biraz daha fazla). Yani ne kadar erken zamanlarsak o kadar hızlı çalışır.
+
+Son olarak, CPU'ya aç bir görevi parçalara ayırdık - artık kullanıcı arayüzünü engellemiyor. Ve genel yürütme süresi çok daha uzun değil.
+
+## Kullanım Senaryosu 2: ilerleme göstergesi
+
+Tarayıcı komut dosyaları için ağır görevleri bölmenin bir başka yararı da ilerleme göstergesi gösterebilmemizdir.
+
+Daha önce belirtildiği gibi, DOM'daki değişiklikler, ne kadar sürdüğüne bakılmaksızın, yalnızca şu anda çalışan görev tamamlandıktan sonra boyanır.
+
+Bir yandan, bu harika, çünkü fonksiyonumuz birçok öğe oluşturabilir, bunları tek tek belgeye ekleyebilir ve stillerini değiştirebilir -- ziyaretçi herhangi bir "ara", tamamlanmamış durum görmez. Önemli bir şey, değil mi?
+
+İşte demo, `i`'deki değişiklikler fonksiyon bitene kadar görünmeyecek, bu yüzden yalnızca son değeri göreceğiz:
+
+
+```html run
+<div id="progress"></div>
+
+<script>
+
+  function count() {
+    for (let i = 0; i < 1e6; i++) {
+      i++;
+      progress.innerHTML = i;
+    }
+  }
+
+  count();
+</script>
+```
+
+...Ancak görev sırasında da bir şey göstermek isteyebiliriz, örneğin bir ilerleme çubuğu.
+
+Eğer ağır görevi `setTimeout` kullanarak parçalara ayırırsak, o zaman değişiklikler aralarında boyanır.
+
+Bu daha güzel görünüyor:
+
+```html run
+<div id="progress"></div>
+
+<script>
+  let i = 0;
+
+  function count() {
+
+    // ağır işin bir parçasını yap (*)
+    do {
+      i++;
+      progress.innerHTML = i;
+    } while (i % 1e3 != 0);
+
+    if (i < 1e7) {
+      setTimeout(count);
+    }
+
+  }
+
+  count();
+</script>
+```
+
+Şimdi `<div>`, bir tür ilerleme çubuğu olan `i`'nin artan değerlerini gösteriyor.
+
+
+## Kullanım Senaryosu 3: olaydan sonra bir şeyler yapmak
+
+Bir olay işleyicide, bazı eylemleri olay kabarıp tüm seviyelerde işlenene kadar ertelemeye karar verebiliriz. Bunu, kodu sıfır gecikmeli `setTimeout` içine sararak yapabiliriz.
+
+<bilgi:olayları gönderme(dispatch-events)> bölümünde bir örnek gördük: `menu-open` özel olayı(custom event) `setTimeout` içinde gönderilir, böylece "click" olayı tamamen işlendikten sonra gerçekleşir.
+
+```js
+menu.onclick = function() {
+  // ...
+
+  // tıklanan menü öğesi verileriyle özel bir olay oluşturun
+  let customEvent = new CustomEvent("menu-open", {
+    bubbles: true
+  });
+
+  // özel olayı eşzamansız(asynchronously) olarak gönder
+  setTimeout(() => menu.dispatchEvent(customEvent));
+};
+```
+
+## Macrotasks ve Microtasks
+
+Bu bölümde açıklanan *macrotask*'ler ile birlikte, <bilgi:microtasks-sırası> bölümünde bahsedilen *microtask*'ler vardır.
+
+Microtask'ler yalnızca kodumuzdan gelir. Genellikle promise'larla oluşturulurlar: `.then/catch/finally` işleyicisinin yürütülmesi bir microtask haline gelir. Microtask'ler, bir başka promise işleme biçimi olduğu için, `wait`'in "örtüsü altında" da kullanılır.
+
+Ayrıca, microtask kuyruğunda yürütülmek üzere `func`'u sıraya sokan özel bir `queueMicrotask(func)` fonksiyonu da vardır.
+
+**Her macrotask'dan hemen sonra, motor, diğer macrotask'ları çalıştırmadan veya oluşturmadan veya başka herhangi bir şeyden önce tüm görevleri microtask kuyruğundan yürütür.**
+
+Örneğin, bir göz atın:
+
+```js run
+setTimeout(() => alert("timeout"));
+
+Promise.resolve()
+  .then(() => alert("promise"));
+
+alert("code");
+```
+
+Buradaki sıra ne olacak?
+
+1. Sıradan bir eşzamanlı(synchronous) çağrı olduğu için önce `kod` gösterilir.
+2. `promise` ikinci sıradadır, çünkü `.then` microtask kuyruğundan geçer ve geçerli koddan sonra çalışır.
+3. `timeout`'u en son gösterir, çünkü bu bir macrotask'dir.
+
+Daha zengin olay döngüsü resmi şöyle görünür (sıra yukarıdan aşağıya doğrudur, yani: önce script, ardından microtask'ler, oluşturma(rendering) vb.):
+
+![](eventLoop-full.svg)
+
+Tüm microtask'ler, başka herhangi bir olay işleme(handling) veya oluşturma(rendering) veya başka herhangi bir macrotask gerçekleşmeden önce tamamlanır.
+
+Uygulama ortamının microtask'ler arasında temelde aynı olmasını (fare koordinat değişikliği yok, yeni ağ verisi yok, vb.) garanti ettiği için bu önemlidir.
+
+Bir fonksiyonu eşzamansız(asynchronously) olarak (geçerli koddan sonra) yürütmek istiyorsak, ancak değişiklikler oluşturulmadan(rendered) veya yeni olaylar işlenmeden(handled) önce, bunu `queueMicrotask` ile zamanlayabiliriz.
+
+Here's an example with "counting progress bar", similar to the one shown previously, but `queueMicrotask` is used instead of `setTimeout`. You can see that it renders at the very end. Just like the synchronous code:
+Burada, daha önce gösterilene benzer bir "sayan ilerleme çubuğu" örneği verilmiştir, ancak `setTimeout` yerine `queueMicrotask` kullanılmıştır. En sonunda oluştuğunu(render) görebilirsiniz. Tıpkı senkron kod gibi:
+
+```html run
+<div id="progress"></div>
+
+<script>
+  let i = 0;
+
+  function count() {
+
+    // ağır işin bir parçasını yap (*)
+    do {
+      i++;
+      progress.innerHTML = i;
+    } while (i % 1e3 != 0);
+
+    if (i < 1e6) {
+  *!*
+      queueMicrotask(count);
+  */!*
+    }
+
+  }
+
+  count();
+</script>
+```
+
+## Özet
+
+Daha ayrıntılı bir olay döngüsü algoritması (yine de [spesifikasyona](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model) kıyasla basitleştirilmiş olsa da):
+
+1. En eski görevi *macrotask* kuyruğundan ayırın ve çalıştırın (ör. "script").
+2. Tüm *microtask*'leri yürütün:
+    - Microtask kuyruğu boş değilken:
+        - En eski microtask'i sıraya alın ve çalıştırın.
+3. Varsa oluşturme(render) değişiklikleri.
+4. Macrotask kuyruğu boşsa, bir macrotask görünene kadar bekleyin.
+5. 1.Adıma gidin.
+
+Yeni bir *macrotask* zamanlamak için:
+- Sıfır gecikmeli `setTimeout(f)` kullanın.
+
+Bu, tarayıcının kullanıcı olaylarına tepki verebilmesi ve aralarındaki ilerlemeyi gösterebilmesi için büyük bir hesaplama ağırlıklı görevi parçalara ayırmak için kullanılabilir.
+
+Ayrıca, olay tamamen işlendikten (köpürme işlemi) sonra bir eylem zamanlamak için olay işleyicilerinde kullanılır.
+
+Yeni bir *microtask* planlamak için
+- `queueMicrotask(f)` kullanın.
+- Ayrıca promise işleyicileri microtask kuyruğundan geçer.
+
+Microtask'ler arasında UI veya ağ olayı işleme yoktur: Bunlar birbiri ardına hemen çalışır.
+
+Bu nedenle, bir fonksiyonu eşzamansız(asynchronously) olarak ancak ortam durumu içinde yürütmek için `queueMicrotask` isteyebilirsiniz.
+
+```smart header="Web Workers"
+Olay döngüsünü engellememesi gereken uzun ağır hesaplamalar için [Web Workers](https://html.spec.whatwg.org/multipage/workers.html)'ı kullanabiliriz.
+
+Bu, başka bir paralel iş parçacığında(thread) kod çalıştırmanın bir yoludur.
+
+Web Workers ana süreçle mesaj alışverişinde bulunabilirler, ancak kendi değişkenleri ve kendi olay döngüleri vardır.
+
+Web Worker'larının DOM'a erişimi yoktur, bu nedenle, esas olarak hesaplamalar için, aynı anda birden fazla CPU çekirdeği kullanmak için yararlıdırlar.
+```
diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg b/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg
new file mode 100644
index 000000000..201d9a14a
--- /dev/null
+++ b/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="407" height="391" viewBox="0 0 407 391"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="eventLoop-full.svg"><text id="..." fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="257.4" y="71">...</tspan></text><path id="Rectangle-1-Copy-6" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M216 86h108v28H216z"/><path id="Rectangle-1-Copy-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M216 195h108v28H216z"/><text id="mousemove" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="232.2" y="214">mousemove</tspan></text><path id="Rectangle-1-Copy-9" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M216 302h108v28H216z"/><text id="event-loop" fill="#000" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="45.162" y="189">event</tspan> <tspan x="51.115" y="222">loop</tspan></text><text id="render-copy-2" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="297.3" y="176">render</tspan></text><g id="np_paint_2296353_000000-copy-2" fill="#EE6B47" fill-rule="nonzero" transform="translate(256 158)"><path id="Shape" d="M3.079 0A3.095 3.095 0 000 3.079V22.92A3.095 3.095 0 003.079 26H22.92A3.095 3.095 0 0026 22.921V3.08A3.095 3.095 0 0022.921 0H3.08zm0 2.053H22.92c.587 0 1.026.44 1.026 1.026v13.043l-2.886-2.684a1.027 1.027 0 00-1.443.032l-5.72 5.955-5.035-4.148a1.021 1.021 0 00-1.38.075l-5.43 5.43V3.08c0-.587.44-1.026 1.026-1.026zM6.158 3.42A3.095 3.095 0 003.078 6.5a3.095 3.095 0 003.08 3.079A3.095 3.095 0 009.237 6.5a3.095 3.095 0 00-3.08-3.079zm0 2.053c.579 0 1.026.447 1.026 1.026s-.447 1.026-1.026 1.026A1.012 1.012 0 015.132 6.5c0-.579.447-1.026 1.026-1.026zm14.176.566c-.377 0-.759.722-.759 1.08-.46.112-.748.358-.748.716s.371.717.748.717h2.662c.73 0 1.11-1.433-.021-1.433-.022-.677-.445-.86-1.134-.716-.183-.284-.375-.386-.748-.364zM16.71 9.237c-.314 0-.631.584-.631.876-.382.093-.63.296-.63.588 0 .293.316.589.63.589h2.213c.608 0 .931-1.176-.01-1.176-.018-.555-.379-.706-.952-.588-.152-.232-.31-.308-.62-.29zm3.688 6.382l3.55 3.293v4.01c0 .586-.44 1.025-1.027 1.025H3.08a1.01 1.01 0 01-.855-.449l6.05-6.04 4.202 3.453-1.24 1.294 1.475 1.422 7.687-8.008z"/></g><text id="microtasks-copy-2" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="297.5" y="140">microtasks</tspan></text><g id="Group-Copy-2" fill="#EE6B47" transform="translate(256 124)"><path id="Fill-52" d="M23.145.978C21.737.348 20.186 0 18.56 0c-2.59 0-4.983.885-6.921 2.38L10.474.618a.286.286 0 00-.305-.125.303.303 0 00-.226.249L8.797 7.779a.317.317 0 00.07.258.287.287 0 00.22.102h.018l3.112-.206 3.504-.233a.296.296 0 00.258-.204.315.315 0 00-.078-.33l-1.46-1.415a7.18 7.18 0 014.118-1.301c1.07 0 2.083.238 3.003.662a.284.284 0 00.23.003.306.306 0 00.162-.171l1.35-3.568a.314.314 0 00-.159-.398" transform="matrix(-1 0 0 1 32.117 0)"/><path id="Fill-54" d="M12.787 13.315a12.66 12.66 0 001.346 4.7c1.225 2.393 3.101 4.186 5.274 5.27l-.929 1.908a.318.318 0 00.04.342c.077.094.201.13.315.09l6.454-2.269a.3.3 0 00.183-.187.32.32 0 00-.018-.251l-.01-.016-1.644-2.779-1.852-3.127a.29.29 0 00-.295-.142.298.298 0 00-.24.228l-.498 2.018a7.607 7.607 0 01-3.041-3.19 8.083 8.083 0 01-.865-3.087.314.314 0 00-.105-.214.286.286 0 00-.22-.068l-3.636.44a.305.305 0 00-.26.334" transform="matrix(-1 0 0 1 38.273 0)"/><path id="Fill-56" d="M2.646 22.333a12.003 12.003 0 003.205-3.576 12.684 12.684 0 001.713-7.424l2.04-.112a.293.293 0 00.262-.207.316.316 0 00-.084-.332L4.681 5.958a.28.28 0 00-.247-.072.291.291 0 00-.198.14l-.01.018-1.47 2.883-1.654 3.247a.32.32 0 00.03.339.285.285 0 00.307.104l1.916-.558a8.078 8.078 0 01-1.111 4.358 7.652 7.652 0 01-2.117 2.33.31.31 0 00-.123.203.325.325 0 00.053.234l2.183 3.08a.285.285 0 00.406.069" transform="matrix(-1 0 0 1 9.882 0)"/></g><text id="render-copy-2" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="297.3" y="285">render</tspan></text><g id="np_paint_2296353_000000-copy-2" fill="#EE6B47" fill-rule="nonzero" transform="translate(256 267)"><path id="Shape" d="M3.079 0A3.095 3.095 0 000 3.079V22.92A3.095 3.095 0 003.079 26H22.92A3.095 3.095 0 0026 22.921V3.08A3.095 3.095 0 0022.921 0H3.08zm0 2.053H22.92c.587 0 1.026.44 1.026 1.026v13.043l-2.886-2.684a1.027 1.027 0 00-1.443.032l-5.72 5.955-5.035-4.148a1.021 1.021 0 00-1.38.075l-5.43 5.43V3.08c0-.587.44-1.026 1.026-1.026zM6.158 3.42A3.095 3.095 0 003.078 6.5a3.095 3.095 0 003.08 3.079A3.095 3.095 0 009.237 6.5a3.095 3.095 0 00-3.08-3.079zm0 2.053c.579 0 1.026.447 1.026 1.026s-.447 1.026-1.026 1.026A1.012 1.012 0 015.132 6.5c0-.579.447-1.026 1.026-1.026zm14.176.566c-.377 0-.759.722-.759 1.08-.46.112-.748.358-.748.716s.371.717.748.717h2.662c.73 0 1.11-1.433-.021-1.433-.022-.677-.445-.86-1.134-.716-.183-.284-.375-.386-.748-.364zM16.71 9.237c-.314 0-.631.584-.631.876-.382.093-.63.296-.63.588 0 .293.316.589.63.589h2.213c.608 0 .931-1.176-.01-1.176-.018-.555-.379-.706-.952-.588-.152-.232-.31-.308-.62-.29zm3.688 6.382l3.55 3.293v4.01c0 .586-.44 1.025-1.027 1.025H3.08a1.01 1.01 0 01-.855-.449l6.05-6.04 4.202 3.453-1.24 1.294 1.475 1.422 7.687-8.008z"/></g><text id="microtasks-copy-2" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="297.5" y="249">microtasks</tspan></text><g id="Group-Copy-2" fill="#EE6B47" transform="translate(256 233)"><path id="Fill-52" d="M23.145.978C21.737.348 20.186 0 18.56 0c-2.59 0-4.983.885-6.921 2.38L10.474.618a.286.286 0 00-.305-.125.303.303 0 00-.226.249L8.797 7.779a.317.317 0 00.07.258.287.287 0 00.22.102h.018l3.112-.206 3.504-.233a.296.296 0 00.258-.204.315.315 0 00-.078-.33l-1.46-1.415a7.18 7.18 0 014.118-1.301c1.07 0 2.083.238 3.003.662a.284.284 0 00.23.003.306.306 0 00.162-.171l1.35-3.568a.314.314 0 00-.159-.398" transform="matrix(-1 0 0 1 32.117 0)"/><path id="Fill-54" d="M12.787 13.315a12.66 12.66 0 001.346 4.7c1.225 2.393 3.101 4.186 5.274 5.27l-.929 1.908a.318.318 0 00.04.342c.077.094.201.13.315.09l6.454-2.269a.3.3 0 00.183-.187.32.32 0 00-.018-.251l-.01-.016-1.644-2.779-1.852-3.127a.29.29 0 00-.295-.142.298.298 0 00-.24.228l-.498 2.018a7.607 7.607 0 01-3.041-3.19 8.083 8.083 0 01-.865-3.087.314.314 0 00-.105-.214.286.286 0 00-.22-.068l-3.636.44a.305.305 0 00-.26.334" transform="matrix(-1 0 0 1 38.273 0)"/><path id="Fill-56" d="M2.646 22.333a12.003 12.003 0 003.205-3.576 12.684 12.684 0 001.713-7.424l2.04-.112a.293.293 0 00.262-.207.316.316 0 00-.084-.332L4.681 5.958a.28.28 0 00-.247-.072.291.291 0 00-.198.14l-.01.018-1.47 2.883-1.654 3.247a.32.32 0 00.03.339.285.285 0 00.307.104l1.916-.558a8.078 8.078 0 01-1.111 4.358 7.652 7.652 0 01-2.117 2.33.31.31 0 00-.123.203.325.325 0 00.053.234l2.183 3.08a.285.285 0 00.406.069" transform="matrix(-1 0 0 1 9.882 0)"/></g><path id="Path" fill="#EE6B47" fill-rule="nonzero" d="M240.536 23.5c18.067 0 28.19 5.407 30.493 19.865l.067.441.016.179.264 10.223 5.906-11.165 2.652 1.402-8.582 16.229-1.247 2.357-1.367-2.29-9.412-15.76 2.576-1.539 6.476 10.845-.263-10.128-.046-.305c-1.998-12.562-10.586-17.259-27.028-17.353l-.505-.001h-51.072c-18.854 0-27.785 5.925-27.961 22.709l-.003.512v294.675c0 9.183 2.661 14.683 7.881 17.703 4.3 2.487 10.047 3.365 19.488 3.4l.595.001h51.072c9.796 0 15.693-.862 20.083-3.401 5.127-2.966 7.785-8.324 7.878-17.214l.003-.489v-6.472h3v6.472c0 10.183-3.152 16.697-9.379 20.3-4.884 2.825-11.037 3.766-20.972 3.803l-.613.001h-51.072c-10.296 0-16.602-.921-21.585-3.804-6.122-3.542-9.271-9.897-9.376-19.785l-.003-.515V49.721c0-18.944 10.246-26.078 30.352-26.219l.612-.002h51.072z"/><text id="script" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="245.3" y="105">script</tspan></text><text id="setTimeout" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="228.5" y="321">setTimeout</tspan></text></g></g></svg>
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop.svg b/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
new file mode 100644
index 000000000..f7de0b6ad
--- /dev/null
+++ b/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="479" height="279" viewBox="0 0 479 279"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="eventLoop.svg"><path id="Rectangle-1-Copy-5" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 173h108v28H218z"/><text id="..." fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="258.9" y="189">...</tspan></text><path id="Rectangle-1-Copy-6" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 90h108v28H218z"/><path id="Rectangle-1-Copy-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 117h108v28H218z"/><text id="mousemove" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="233.7" y="136">mousemove</tspan></text><path id="Rectangle-1-Copy-9" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 145h108v28H218z"/><text id="script" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="246.8" y="109">script</tspan></text><text id="event-loop" fill="#000" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="69.662" y="134">event</tspan> <tspan x="75.615" y="167">loop</tspan></text><text id="macrotask-queue" fill="#9B9B9B" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="345.111" y="136">macrotask</tspan> <tspan x="367.951" y="169">queue</tspan></text><path id="Path" fill="#EE6B47" fill-rule="nonzero" d="M192 40c22.467 0 43.818 7.359 61.285 20.712l.622.479.143.122 8.961 8.422-4.584-14.61 3.817-1.197 6.869 21.895 1.064 3.392-3.452-.852-22.278-5.5.959-3.883 14.864 3.669-8.886-8.352-.55-.424c-16.564-12.656-36.757-19.698-58.036-19.87L192 44c-30.748 0-59.095 14.403-77.315 38.412l-.549.73-3.208-2.387C129.87 55.303 159.664 40 192 40z"/><path id="Path-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M269.882 208.148l2.823 2.834-.366.365a533.245 533.245 0 00-3.982 4.033l-.333.34c-9.922 10.12-14.79 14.544-22.017 19.272-15.185 9.934-34.01 15.688-51.594 15.688-25.222 0-47.144-6.827-64.077-19.673l-.589-.45-.089-.07-.08-.078-8.854-8.581 4.36 14.68-3.835 1.138-6.532-21.998-1.012-3.409 3.439.906 22.19 5.841-1.018 3.868-14.808-3.898 8.766 8.497.488.374c16.02 12.15 36.782 18.698 60.792 18.85l.859.003c16.796 0 34.862-5.522 49.404-15.035 6.911-4.521 11.624-8.806 21.35-18.725l.334-.34c2.06-2.101 3.135-3.19 4.381-4.432z"/><text id="setTimeout" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="230" y="164">setTimeout</tspan></text></g></g></svg>
\ No newline at end of file