JavaScript's Event-Driven Approach and Event Loop

JavaScript executes programs in an event-driven manner, providing developers with a single thread (the main thread) that executes tasks sequentially, one at a time. To reduce the load on the main thread, I/O operations such as network requests are handled by a separate thread pool. Additionally, JavaScript supports the execution of web workers for long-running tasks that can be processed independently of the main thread. This allows developers to utilize parallel processing without directly dealing with multi-threaded programming.

Each thread running in the JavaScript engine (the main thread and each web worker) has its own event loop and task queue. In the case of web workers, the task queue is sometimes referred to as a message queue, but they are fundamentally the same concept. (Strictly speaking, web workers have separate message queues, and the main thread processes messages from workers through its task queue. Both are managed by the event loop.)

The event loop is a while loop that continuously monitors the task queue. If there are tasks remaining in the queue, the event loop retrieves (dequeues) and executes them. For example, if the task is related to a click event, the event loop creates a MouseEvent object at the time of task execution and executes the event handler connected to this event. If there is no handler, nothing happens. The time at which the MouseEvent object is created is stored in event.timeStamp. (PerformanceEntry.startTime also records this time and has a value almost identical to event.timeStamp. However, PerformanceEntry is used for a wider range of performance measurements.)

The main thread of a web browser performs many tasks, including HTML parsing, CSS processing, JavaScript execution, and handling user events. Therefore, each event handler should be written as short and efficient as possible. If an event handler performs too much work, the web page's responsiveness will suffer, degrading the user experience. Users expect a response time of within 200ms, and longer times can make them feel that the page is unresponsive. Especially in the case of web applications where immediate responses to user inp

Reference: Tasks, microtasks, queues and schedules - JakeArchibald.com

My comics about free/open source project

I have been posting comics about free/open source software for several years, originally written in Korean. Following numerous requests from my colleagues to translate them into English, I've published several episodes on Medium and shared the link here. :-)

https://medium.com/fosscomics

The WindowService2(?) of CrOS

Recently, WS was replaced with WS2:

• 1144255 window-service: removes mus_demo, test_wm, and some unnecessary deps

• Issue 865689  Remove window-service

I ran mus_demo to test ozone-gbm, but now it's gone. :-( So, I need to figure it out what is the difference between WS1 and WS2.

What is the Window Service of ChromeOS? Window Service is a kind of Window Compositor like Weston. It is a separate process from the browser process in CrOS. Some of CrOS features are part of the browser process, but those features will be a separate process using the WindowService.

For more details, see https://cs.chromium.org/chromium/src/services/ws/README.md

"Clients establish a connection to the WindowService by configuring Aura with a mode of MUS. See aura::Env::Mode for details. The WindowService provides a way for one client to embed another client in a specific window (application composition). Embedding establishes a connection to a new client and provides the embedded client with a window to use. See the mojom for more details. For example, on Chrome OS, Ash uses the WindowService to enable separate processes, such as the tap_visualizer, to connect to the WindowService. The tap_visualizer is a client of the WindowService. The tap_visualizer uses the WindowService to create and manage windows, receive events, and ultimately draw to the screen (using Viz). This is mostly seamless to the tap_visualizer. The tap_visualizer configures Views to use Mus, which results in Views and Aura, using the WindowService."

CrOS is now becoming more like a regular desktop. I'm not sure this is a good decision.

Linux container for ChromeOS

Recently, ChromeOS started to support Linux applications on ChomeOS. Google hasn't allowed ChromeOS to run native applications due to security reason. Finally, they found a way to support Linux application through the container technology.

It is worth to read a discussion on CrOSVM on Hacker News because the original author joined the discussion. Here is the article about ChromeOS Linux container.
https://www.zdnet.com/article/chrome-os-could-be-getting-containers-for-running-linux-vms/

There is a Youtube video:
https://www.youtube.com/watch?v=s9mrR2tqVbQ

Here is the readme about CrOSVM.
https://chromium.googlesource.com/chromiumos/platform/crosvm/+/837b59f2d97b005ef84ac36efa97530c1bbf2a79/README.md

The interesting thing is that it is implemented with Rust. Google now seriously uses Rust of their product, which is a good news for the Rust community.

Making Use Of Chrome's Ozone-GBM Intel Graphics Support On The Linux Desktop

Recently, I published a blog article about making Use Of Chrome's Ozone-GBM Intel Graphics Support On The Linux Desktop. This is about using ChromeOS graphics stack for a regular Linux system.  This article was also mentioned in Phoronix.

Originally, my old colleague started working on this a long time ago, but it has been broken since then. So I have been trying to enable ozone-gbm on a Linux system because this solution would be useful for embedded systems. I'm making a Yocto recipe for this and will open it soon.

Rust & DRM

I was surprised that there are many low-level graphics projects written in Rust and I started looking into one of them: drm-rs. Then, I added an example for handling page-flip event.

drm-rs is a subproject of Smithay that is a wayland compositor written in Rust. It allows Rust applications to access the Direct Rendering Manger(DRM), a subsystem of the Linux Kernel. So, we could directly paint something into a frame buffer and render it on the display using DRM APIs.

BlinkOn9

I attended BlinkOn9 from April 18 to 19, 2019. Here is the official page: bit.ly/blinkon9-info, presentations, and Lightning Talks.

At this conference, I talked about acelerating graphics performance with ozone-gbm on Intel based Linux desktop systems: explained what kind of hardware accelerations have been applied to Intel -based Chromebook and how we can use them on a Linux desktop.

Here is a demo video on Youtube:

Setting up NFS in OpenStep

If your server or host PC supports NFS,  you can set up shared directories for OpenStep. For example, if the shared folder is nfs://192.168.1.19/nfs/ftp, you can add the imported directory in NFSManager.app as follows:

Run mount command in OpenStep to mount a remote directory as follows:

$ mount -t 192.168.8.16:/mnt/openstep /coreonion 

Reference

• https://www.cyberciti.biz/faq/apple-mac-osx-nfs-mount-command-tutorial/
• http://nextstep.onionmixer.net/wordpress/?p=139

Installing OpenStep 4.2 on Parallels

NeXTSTEP is one of the most advanced operating systems from the 90s. You can understand why by watching this video:

Every feature Steve Jobs introduces in this video was already possible in 1992, which is amazing. I’ve dreamed of using NeXTSTEP ever since I learned about it, but I had never seen a running demo—only a NeXTCube. By chance, I found instructions on how to install OpenStep 4.2 on Parallels. Finally, NeXTSTEP (OpenStep 4.2) started running on my machine. o/

If you want to run OpenStep 4.2, follow this instruction. The only problem is that network doesn't work ,so you need to install a network driver. I found the solution by googling, but the link to NE2000 disk image(http://www-teaching.physics.ox.ac.uk/NextStep/NE2K_driver.fdd) was broken. Fortunately, I was able to recover the link from https://archive.org/ so you can download it.

Network setting:
1) Install the NE2K driver;
2) Shut down. Under Boot Order, make sure the hard drive is the first device, and add "devices.net.force_adapter_type=rtl"; in the boot flags.

3) Set the shared network. Reboot.
5) Open HostManager.app. Under Local choose "use local domain only".

6) Assign one of available IPs in your local network. Let the machine Reboot;
7) Add a name server in /etc/resolv.conf

Installing developer tools

There is a good video on Youtube:

The next step is to write some Objective-C code with this book and download some applications from http://www.nextcomputers.org/NeXTfiles/


References:

• http://openstep.bfx.re/
• http://www.nextcomputers.org/docs/FAQ-OpenStepOnEmulators.pdf
• https://forum.parallels.com/threads/openstep-4-2-driver-thread.3408/
• http://www.nextcomputers.org/forums/viewtopic.php?t=2992
• https://forum.parallels.com/threads/older-nic-emulation-before-gigabit.110324/

Working on the Servo project

I began to work on the Servo project. Actually, my first open source project was Mozilla and also I was involved in the Korea Mozilla community. During the time, I contributed to Fennec browser by fixing bugs and localization. Anyway, this blog article motivated me work on Mozilla again.

I landed a simple patch and am working on adding the ellipse API to Canvas API. I see many missing features so it looks like the blue ocean for me compared to the Chromium project.

Enable to open multiple file-pickers in Chromium for Linux

Sometimes, we don't know exact requirements or expect user behaviors while developing or fix something. I fixed the file-picker modal issue in Chromium for Linux last year. At that time, the reviewer and I thought that there would be no case to pop-up multiple file-pickers, but it happened  since M55 when you follow the following steps:
1) Enable "Ask where to save" in settings.
2) Open 2 tabs of e.g.: https://sourceforge.net/projects/azureus/files/latest/download
3) Wait for 2 downloader windows, and close/cancel/etc both
4) Freeze or crash

Here is a video to reproduce the problem.



When file-picker is opened, it disables event listening of the main host window. Then, the user closes the file-picker, it enables the event listening. Now, the host widow has a counter to check the number of the open file-pickers and it doesn't disable the event listening if there are any open file-picker. The event listening can be enabled when the last file-picker is closed. Here is the fix.
Anyway, you may see the fix in M58(Apr 25th, 2017)

Apple-style-span class was fully removed from Blink

Finally, Apple-style-span class was fully removed from Blink(commit).

Apple-style-span has not been produced since 2011: https://webkit.org/blog/1737/apple-style-span-is-gone, but there were still some legacy code to handle Apple-style-span class because old WebKit engines has produced it, but now the usage is quite low(<=0.0001%). So, we decided to remove it from Blink at BlinkOn7. The code was executed whenever the users copy a text or run Editing APIs(document.execCommand) to keep the styles when pasting it. Other non-standard CSS classes(Apple-interchange-newline, Apple-converted-space, Apple-paste-as-quotation) will be also removed soon if possible.

Anyway, I feel that editing in Chromium is a bit faster :P

Make file-picker modal in Chromium for Linux

When I stared working on Chromium, I found a bug in Chromium for Linux: the file-picker was not modal. So, while opening a file-picker, the users could control the main window. Sometimes, it caused mis-behaviors such as we were able to send an email while attaching a file.
There was already a bug and it seemed easy to fix it, but, it took 2 years to fully fix the problem.

The root cause is as follows:

Chromium for Linux uses GtkFileChooserDialog to open a file-picker, but it is not modal to the X11 host window because GtkFileChooserDialog can be modal only to the parent GtkWindow. So I tried to allow the X11 host window to disable input event handling to make a file-picker modal:  Here is the details:

Opening a file-picker

DisableEventListening() disables event listening for the host window using aura::ScopedWindowTargeter, which allows to temporarily replace the event-targeter with ui::NullEventTargeter. It returns a scope handle that is used to call |destroy_callback| when closing the file-picker.

class ScopedHandle {
 public:
   explicit ScopedHandle(const base::Closure& destroy_callback);
   ~ScopedHandle();
   void CancelCallback();

 private:
    base::Closure destroy_callback_;
    DISALLOW_COPY_AND_ASSIGN(ScopedHandle);
};

In addition, we also set another destroy callback(OnFilePickerDestroy) to the GtkFileChooserDialog that can be called when the file-picker is closed.

Close the file-picker

As you can see, OnFilePickerDestroy deletes scoped_handle.

void OnFilePickerDestroy(views::DesktopWindowTreeHostX11::ScopedHandle*

   scoped_handle) {

 delete scoped_handle;

}

Then, |destroy_callback| of ScopedHandle below is automatically called.

void DesktopWindowTreeHostX11::EnableEventListening() {

 DCHECK(modal_dialog_xid_);

 modal_dialog_xid_ = 0;

 targeter_for_modal_.reset();

}

You can find more details and discussion at here.

The first change list was reverted due to the UI freezing problem that happens when the users open a file-picker from a child window of the X11 host window. The second change list finally fixed this issue(BUG 408481, 579408). I also added a test case for the fix: BrowserSelectFileDialogTest.ModalTest.

My major contributions to Chromium project

I have been working on Chromium project since 2013 and fixed many bugs and implemented some features. Here are my major contributions:

Blink Editing

1. [Issue 226941] Contenteditable issues related to backspace handling
• https://codereview.chromium.org/2064473002
• https://codereview.chromium.org/2117663002
2. [Issue 318925] Copy and paste sometimes removes spaces between words

• https://codereview.chromium.org/2193033004
• https://codereview.chromium.org/2280513004
• https://codereview.chromium.org/2320533002
• https://codereview.chromium.org/2325553002
• https://codereview.chromium.org/2336043006

3. [Issue 310149] ContentEditable:   is forced on SPACE between text nodes
• https://codereview.chromium.org/2175163004
4. [Issue 335955] Unwanted spans inserted in contentEditable elements
• https://codereview.chromium.org/2072093002
5. [issue 571420] chrome hangs on when creating bullet list in contenteditable
• https://codereview.chromium.org/2250133004

6. [Issue 634482] Formatting tags converted to spans with styles on cut/paste
• https://codereview.chromium.org/2229703004
7. [Issue 625802] Unnecessary quote appears after clicking on indent more option in compose box.
• https://codereview.chromium.org/2175433002
8. [Issue 582225] document.queryCommandState isn't working well with _and
• https://codereview.chromium.org/1986563002
9. [Issue 584939] document.queryCommandState returns true for bold, italic, underline, and strikethrough after selecting image
• https://codereview.chromium.org/1960553002
10. [Issue 385374] queryCommandState can return true for both list types
• https://codereview.chromium.org/2268843002
11. [issue 232188] Caret color issue in content editable element
• https://codereview.chromium.org/14098003/ 

Aura and Wayland support:

1. [Issue 408481] System dialogs (e.g. 'Save As...') are not modal on Ubuntu
• https://codereview.chromium.org/1624793002/
2. [Issue 473228] Make *::ShowWithWindowState(minimized, maximized, fullscreen) consistent across platforms
• https://codereview.chromium.org/1125383008
• https://codereview.chromium.org/1138383008
• https://codereview.chromium.org/1159703006
• https://codereview.chromium.org/1130033003
3. Issue 578890 upstream wayland backend for ozone
• https://codereview.chromium.org/2042503002
4. Issue 50485 Korean Hangul typing issue  
• https://codereview.chromium.org/13818036/

OSCON 2014

I attended OSCON 2014 held in Portland, Oregon. I think Portland is the Mecca of Open Source because OSCON is held there every year and Intel Open Source Technology center is also in Hillsboro near Portland. In addition, Linus Torvalds is based in Portland.

I wanted to attend some sessions this year, but I didn't see many topics related to my job. There are more high-level topics above system level. Anyway, it's great to hear voices from web developers as a web engine developer.

OSCON is a bit different from other F/OSS conferences, which is aimed at the Web development, clouds, database, language, and hardware like Raspberry Pi and Arduino. So, there are no Linux kernel, GNOME/KDE, and other system-level topics. I think that Guadec or FOSDEM is well suited for me.

Anyway, I really enjoyed the atmosphere of the F/OSS conference. I saw many hackers and geeks who were hacking around session rooms. There were many BoFs until 10PM.

Many companies that have open source solutions joined the Expo. They showed their solutions and services to visitors. Intel also showed a Crosswalk demo video with a web application running on Crosswalk controlling a drone remotely, which shows Crosswalk can talk to the device using JavaScript to communicate with each other over wireless networks. It was cool.

I had an opportunity to use Firefox OS. The device looks cheap, but the UI responsiveness is really good. I heard that it's just 150$, but it was released in some developing countries. I hope to see a Firefox OS phone in the major markets. I got lots of information from the Firefox OS session. The speakers introduced ways on how to develop Firefox OS applications and to use the development tools. It's quite interesting to know that Firefox OS applications can run in Firefox for Android.

I need to learn other areas to enjoy talks more in OSCON next year. :-)

Ozone-Wayland

Ozone-Wayland is an Ozone implementation of Chromium, which allows to run Crosswalk and Chromium browser natively on Wayland without any X11 dependence[1].

I have been working on Ozone-Wayland recently. There were two releases since I was involved in the development. In the latest release, I contributed the virtual keyboard support to Ozone-Wayland. You can find how it works in the following video:

The ozone-wayland team has been focusing on graphics accelerations such as WebGL, Canvas 2D, Accelerated Compositing on Wayland. WebGL and Canvas 2D accelerations can be accelerated by off-screen Rendering in GPU process. In the latest release, we started supporting multi-touch and virtual keyboard, which work fine on Tizen IVI as you can the above video.

What is Ozone?
 Ozone is an abstraction layer used by Chromium browsers to separate out the different windowing systems and also abstract surface acceleration for Aura UI framework, input handling, event handling, and other UI-related matters[4]. Ozone-Wayland provides Wayland support for Ozone[2].

Reference

1. Project Homepage: https://github.com/01org/ozone-wayland
2. https://01.org/ozone-wayland/blogs/kalyankondapally/2014/beta-channel-updated-m35
3. Ozone-Wayland Release Adds Virtual Keyboard, Touch Support, Mar. 26,  2014 
4. Chromium On Wayland "Ozone" Continues, Oct. 07, 2013
5. Wayland-Based Chromium Browser Released, Nov. 11, 2013
6. Chromium Ported To Wayland, Now Working, Sep. 18, 2013

What I learned about American holidays

This year, I experienced Halloween, Thanksgiving day, and Christmas with my family for the first time since I moved to the US. There were many new things I learned about these holidays, so I’d like to share them with you.

Many Koreans know about Halloween because the young Korean people who had studied in the US started bringing Halloween customs back to South Korea and enjoying Halloween there since the 2000s and the majority of kindergartens have a Halloween costume party these days, but Halloween is still not commonly celebrated in Korea, so it’s very hard to find a person wearing a Halloween costume on the streets on Halloween.

I didn’t know that Halloween started in the US at first. From reading Wikipedia, I learned that Irish immigrants brought their Halloween into the new land and then it has been developed into what we see today. Actually, I didn’t know Halloween is such a big holiday like Christmas, until I saw every big market start to sell big pumpkins at the end of September. Moreover, a Korean also suggested to me that I visit a pumpkin farm near Portland together. I didn’t think I would buy a pumpkin at that time. Anyway, I took my family there in early October.



I was surprised to see many pumpkins in the field. The pumpkin farm was very fun to walk around. I got on a small train with my daughter lead by a tractor. There were many kinds of farm animals such as ponies, pigs, cows, sheep, and chickens, so my daughter saw them very closely, which made her excited. Every family, including the Korean family, bought pumpkins. Finally, I bought a pumpkin for my daughter and it still rolls around on the living room floor.

On Halloween, my daughter wore a vampire dress and went out with me to get candies and chocolates. I saw many children and their parents wore various costumes walking around. They really enjoyed the day, even some who were adults, so I considered wearing a costume for the next Halloween day. My daughter is also prepared for next Halloween: I already bought her another costume for 50% off!




After Halloween, I noticed that many people started getting ready for Thanksgiving. I I became aware that, like Halloween, Thanksgiving Day also started in the U.S. I thought every Western person enjoyed Thanksgiving day, similar to how Korean people sometimes think all western people are American.

Fortunately, an older Korean couple who have been living in the U.S. for many years invited me to their Thanksgiving dinner. If it wasn't for my friendly daughter, I might not have had the chance to participate in a Thanksgiving feast. While my wife was grocery shopping with my daughter near our apartment one day, she smiled at an elderly Korean couple. They started chatting, and my wife found out that they had lived in the U.S. for many years. They ended up inviting me to their house for Thanksgiving dinner. They prepared a turkey, sweet potatoes, cranberry jam and kimchi and soybean stew. The turkey was really good. I heard that it takes a lot of time to cook a turkey, from marinating to roasting. I would like to thank the couple and hope everything is great with them.

Christmas Day in the U.S. is a bit different although it is also a holiday in Korea. It seemed that every family really enjoyed Christmas day: I saw many houses decked out with lights for Christmas and my colleagues brought Christmas cookies to the office. I also decorated a Christmas tree with ornaments and lights for my daughter, which was my first time to have a Christmas tree at home. My tree is a fake one, but many families seem to buy a real tree. As you may know, it’s very hard to find a real Christmas tree and houses decked with lights in Korea. Usually, churches and department stores are decked with lights, but not private homes. Decorating a Christmas tree is also not common, even for Christians. I also attended the Portland Christmas tree lighting ceremony in Pioneer Square, which is one of my best memories of Portland. An interesting thing was that nobody around me had attended this ceremony, which for me was like many Seoul citizens never having gone up to the observation deck of the 63 building in Yeouido.

Through experiencing these holidays in Oregon for the first time, I realized that we just know superficial things about how other people live in their countries, and I have resolved to try to learn as much as possible about America and Americans while I live in the U.S.

Why Gangnam style became more popular than other typical Kpop idol songs

Can you believe that a Kpop song reached no.1 on iTunes in 31 countries?, even though this Kpop song is not an English song, but a Korean song that is called “Gangnam style” by PSY. Actually, nobody expected that this song could become a great hit wordwide, but this song has been spread all over the world very quickly due to Youtube. In this article, I am going to talk about why “Gangnam style” became more popular than other typical Kpop idol songs.

Recently, Kpop has been popular in Asia and has had some fan groups in the western countries, but Kpop itself refers to songs for the younger generation, which have been performed by girl and boy groups so far. However, Psy’s “Gangnam style” showed a different side of Kpop songs because he didn’t imitate the pop idols and created his own style that nobody had performed before.

Psy is so unique, even in Korea. He has kept his own character since he debuted in 2001, which is a cheap and comic image. This means that he enjoys performing in his own style.
During the time from his debut until now, he has released 5 albums and has 6 number 1 hit songs in Korea. His music is always cheerful and makes us excited because he has produced his songs by himself in order to pursue his own style. The interesting thing is that his style has gained in popularity because his songs give comfort to people who are suffering from a long recession.

Why did “Gangnam style” became popular? The contract with Justin Bieber’s manager, Scooter Braun played an important role, but without Youtube, all things might have never happened. Currently, Psy’s Gangnam style has racked up over 400 million views on YouTube and becoming the most-liked video in the site’s history. Actually, he didn’t make any effort to make people know about his song except by making the comic music video. I think Youtube changed the way of promoting music, which means that there are no barriers to find music. A few years ago, one Indian song was popular in Korea because of its comic style. Psy’s song is the same case.

Psy’s success is not by chance, because he has been developing his own music style for 10 years. “Gangnam style” is just the first of his songs to show his character and music to the world.  I’m sure again that creating one’s own style is always better than imitating others in many areas. Furthermore, anyone can be a star through Youtube if they have any special talents which other stars haven’t shown.

References:

• http://www.nytimes.com/2012/10/14/arts/music/interview-psy-the-artist-behind-gangnam-style.html?_r=0
• http://edition.cnn.com/2012/10/01/world/asia/psy-gangnam-style-charts/index.html
• http://askakorean.blogspot.com/2012/10/aak-music-gangnam-style-by-psy.html