fix(tutorial): some fixes

Author: wmertens

packages/docs/src/routes/tutorial/events/synchronous-sync/index.mdx

@@ -15,17 +15,24 @@ created_at: '2022-08-02T12:07:45Z'
 
 While not a common use case, you may occasionally need to process events synchronously.
 
-Since Qwik processes asynchronously by default, your code must be explicitly configured for synchronous calls. 
+The two most common use cases are to call `event.preventDefault()` or `event.stopPropagation()` on a DOM event. Those are handled by adding the `preventdefault:eventname` or `stoppropagation:eventname` in addition to your event handler.
 
-There are two ways of processing events synchronously:
-1. preferred way: use `sync$()` to load code synchronously. Fast, resumable but with **significant restrictions** on event handler size. 
-2. eager registration: use `useVisibleTask$()` to load code synchronously. No restrictions, but requires eager code execution, which goes against resumability.
+```tsx
+  <a href="/" preventdefault:click onClick$={() => {
+    console.log('clicked');
+  }}>
+    link
+  </a>
+```
 
-This example shows how to use synchronous code blocks using `sync$()`.
+When you have other use cases that require synchronous event processing, you can use either `sync$()` or `useVisibleTask$()`.
+1. preferred way: use `sync$()` to embed the code in the HTML. Fast, resumable, but with some restrictions (see below).
+2. eager registration: use `useVisibleTask$()` to register a handler. No restrictions, but it will not handle events until the visible task has executed, and it will cause of course run extra javaScript while the page is loading.
 
 ```tsx
   <a href="/" 
     onClick$={sync$((event, target) => {
+      // Only prevent default if the ctrl key is pressed.
       if (event.ctrlKey) {
         event.preventDefault();
       }
@@ -34,7 +41,7 @@ This example shows how to use synchronous code blocks using `sync$()`.
   </a>
 ```
 
-## `sync$()` Restrictions (BETA)
+## `sync$()` Restrictions
 
 The `sync$()` function is a resumable way to process events synchronously. However, it has some significant restrictions. The `sync$()` **can't close over anything**. The implications are that you can't:
 - access any state: The recommended way to get the state into function is to place on element attributes.
@@ -63,6 +70,23 @@ For this reason, we recommended breaking up the event handlers into two parts:
   </a>
 ```
 
+You can also dispatch a custom event from the `sync$()` handler and handle it asynchronously:
 
+```tsx
+  <a href="/" 
+    onClick$={sync$((event, target) => {
+      if (event.ctrlKey) {
+        event.preventDefault();
+      }
+      // Dispatch a custom event to be handled asynchronously.
+      target.dispatchEvent(new CustomEvent('myclick', { bubbles: true }));
+    })}
+    onMyclick$={() => {
+      // This part can be asynchronous and can close over anything.
+      console.log('clicked');
+    }}>
+    link
+  </a>
+```
 
- **Your task:** Convert the `onClick$` from asynchronous event to synchronous event by using [`useVisibleTask$`](/docs/(qwik)/core/tasks/index.mdx#usevisibletask) lifecycle and [normal event registration](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
+ **Your task:** Convert the `onClick$` from asynchronous event to synchronous event by using [`sync$`](/docs/(qwik)/core/tasks/index.mdx#usevisibletask).

packages/docs/src/routes/tutorial/hooks/use-un-mount/index.mdx

@@ -11,6 +11,8 @@ created_at: '2022-08-02T12:07:45Z'
 
 Fallback content allows the child component to display fallback content in case the parent component did not provide content. The fallback content can be done with CSS, it is necessary to add a CSS selector (and the appropriate CSS) on the named Slot in case it is empty.
 
+Note that in the upcoming Qwik 2.0, a Slot can embed fallback content directly, without needing CSS.
+
 ### Example
 
 In this example, we show three cards, but some of them are not filled with content. Use the right CSS selector to specify the fallback content.

packages/docs/src/routes/tutorial/hooks/use-un-mount/problem/app.tsx

@@ -139,6 +139,13 @@
         "enableClientOutput": false,
         "enableSsrOutput": false
       },
+      {
+        "id": "use-signal",
+        "title": "useSignal()",
+        "enableHtmlOutput": false,
+        "enableClientOutput": false,
+        "enableSsrOutput": false
+      },
       {
         "id": "recursive",
         "title": "Recursive Store",
@@ -233,13 +240,6 @@
         "enableClientOutput": false,
         "enableSsrOutput": false
       },
-      {
-        "id": "use-signal",
-        "title": "useSignal()",
-        "enableHtmlOutput": false,
-        "enableClientOutput": false,
-        "enableSsrOutput": false
-      },
       {
         "id": "use-visible-task",
         "title": "useVisibleTask$()",
@@ -253,13 +253,6 @@
         "enableHtmlOutput": false,
         "enableClientOutput": false,
         "enableSsrOutput": false
-      },
-      {
-        "id": "use-un-mount",
-        "title": "useUnMount$()",
-        "enableHtmlOutput": false,
-        "enableClientOutput": false,
-        "enableSsrOutput": false
       }
     ]
   },