DEV Community: Ruxo Zheng

My journey to Go

Ruxo Zheng — Sat, 25 Oct 2025 00:39:44 +0000

I'm now starting to look at the Go language seriously, whereas before I just thought it was an "Indy" language. In the past month, I've had the chance to work with a team that uses Go, which led me to read up on it. I stumbled upon one of its core ideas: Go doesn't have "async" programming (it has green threads—logical threads that handle concurrency via software through context switching). But Go is actually an asynchronous language by default! (It's comparable to every single function in Go using async/await.) The interesting part is that Go makes all the code look synchronous (but it handles the async parts where needed automatically). Personally, I really like this code style, but people who haven't read the specs might misunderstand and think Go is a single-threaded application, much like JS or Python.

If anyone has tried Haskell's IO monad, you'll find it's the same concept: you wrap a function (whether sync or async) with an IO type, and it ultimately makes the code look synchronous even though it can be both sync and async. In the past, I tried to apply this concept to several languages (C#, F#, TypeScript) but gave up because it involved a lot of boilerplate, and the resulting syntax was very "alien" (for anyone who wants to try the IO monad with JS/TS, check out https://effect.website/). So I never used it seriously. But Go embeds this idea through Go routines, whether by coincidence or not.

Another thing that made me uninterested in Go before: over ten years ago, I read about the language's origin, wondering why it was designed to be so "indy." I remember one interview quote from a designer: "Go is a language designed for junior developers to help them catch up with a codebase quickly." This idea led Go to cut out many abstract concepts (even generic types!). I had tried Go 2-3 times before but got annoyed because the lack of abstract ideas, especially generics, resulted in a lot of code duplication.

But recently, I had the chance to manage a team of Chula graduates (honors, new grads). The team uses C++, but they were using it at a very basic level, and some didn't understand core concepts like RAII. (Oh, and this made me go back and read the C++11 specs and discover that C++ has had the 'move' concept for over a decade! At first, I thought Rust introduced this idea.)

So I set up a 3-hour course to teach them about C++ memory pitfalls and RAII and found that... 3 hours was not nearly enough. And honestly, to use this stuff correctly, it takes months of practice and understanding, especially since C++ has so many nuances if you want to write truly idiomatic code.

It was only this past month that I finally had an "aha" moment about the Go designer's words. Go wants devs to get up to speed quickly while still remaining low-level enough to write system programming—even though it has mostly become an application language now.

Use Your Machine Name (Not Just localhost) with HTTPS on ASP.NET Core — and Make Node.js Trust It

Ruxo Zheng — Fri, 19 Sep 2025 23:13:43 +0000

When you run dotnet dev-certs https --trust, .NET creates and trusts a localhost-only developer certificate. That’s great for https://localhost:1234, but it won’t cover https://my-machine:1234.

If you want to reach your service by machine name (e.g., https://my-machine:7164) you need to create your own self-signed certificate that lists all the names you’ll use (machine name, localhost, and optionally 127.0.0.1) and then configure Kestrel to use it. You’ll also need to trust that certificate for browsers — and tell Node.js how to trust it.

Below are clean, copy-pasteable steps for Windows/PowerShell.

1) Create a self-signed certificate (.pfx) for your machine name

# Names you want this cert to cover (add/remove as needed)
$dns = @("my-machine", "localhost", "127.0.0.1")

# Create a leaf certificate in CurrentUser\My
$cert = New-SelfSignedCertificate -DnsName $dns -CertStoreLocation Cert:\CurrentUser\My

# Export a PFX with a password (change YOUR-PASSWORD and FILENAME)
$pwd = ConvertTo-SecureString "YOUR-PASSWORD" -AsPlainText -Force
Export-PfxCertificate -Cert $cert -FilePath "$env:USERPROFILE\FILENAME.pfx" -Password $pwd

Tip: Keep localhost and 127.0.0.1 in the SAN list so existing tooling continues to work.

2) (Optional) Replace the default `dotnet dev-certs` certificate

If you want your new cert to become the default dev cert:

dotnet dev-certs https --clean `
  --import "$env:USERPROFILE\FILENAME.pfx" `
  -p YOUR-PASSWORD --trust

3) Or: Point Kestrel to your PFX in `appsettings.json`

If you don’t want to replace the global dev cert, configure your app explicitly:

{
  "Kestrel": {
    "Certificates": {
      "Default": {
        "Path": "C:/Users/USER/FILENAME.pfx",
        "Password": "YOUR-PASSWORD"
      }
    }
  }
}

4) Trust the certificate (for browsers)

Export a .cer (public cert) from the cert you created, then import it into Trusted Root Certification Authorities for Current User.

$cer = "$env:USERPROFILE\FILENAME.cer"

# Export the public part of the certificate to .cer
Export-Certificate -Cert $cert -FilePath $cer

# Import into CurrentUser\Root (Trusted Root)
Import-Certificate -FilePath $cer -CertStoreLocation Cert:\CurrentUser\Root

Recommendation: Do not generate directly into the Trust store. Create the cert in CurrentUser\My, then export/import. Your actual private key lives with the leaf cert; keeping the flow explicit reduces mistakes.

5) Make it work with Node.js

Node.js 22.x

Node 22 does not use the Windows trust store by default and also doesn’t accept .cer via NODE_EXTRA_CA_CERTS. Convert the .cer to .pem and set NODE_EXTRA_CA_CERTS:

# Convert CER -> PEM (Base64)
certutil -encode C:\Users\USER\FILENAME.cer C:\Users\USER\FILENAME.pem

# For the current PowerShell session:
$env:NODE_EXTRA_CA_CERTS = "C:\Users\USER\FILENAME.pem"

# Or persist for new shells:
# setx NODE_EXTRA_CA_CERTS "C:\Users\USER\FILENAME.pem"

node

Now fetch("https://my-machine:7164/...") should stop complaining about a self-signed certificate.

Node.js 23.8+

Newer Node supports using the OS trust store directly:

node --use-system-ca your-script.js

6) Deleting the certificate later

If you still have the $cert object from creation:

$thumb = $cert.Thumbprint

# Remove from CurrentUser\My and delete the private key as well
Remove-Item "Cert:\CurrentUser\My\$thumb" -DeleteKey -Force

(If you no longer have $cert, find it by subject/issuer in Cert:\CurrentUser\My and remove by thumbprint.)

Common Gotchas

Name mismatch: The URL’s host must be listed in the certificate’s DNS names (SAN). If you access https://my-machine:7164, my-machine must be in the cert.
Node still failing: On Node 22, ensure NODE_EXTRA_CA_CERTS points to a PEM file, not .cer. Restart the shell or set it in the same session.
Browser trust: Make sure you imported the public cert into Current User → Trusted Root Certification Authorities.
Paths: Use absolute Windows paths for Kestrel’s "Path".

Summary

Generate a self-signed PFX with SANs for my-machine, localhost, and 127.0.0.1.
Either import it as the global dev cert or reference it in Kestrel.
Export the .cer and import it into Trusted Root so browsers trust it.
For Node: use NODE_EXTRA_CA_CERTS with a .pem (Node 22) or --use-system-ca (Node 23.8+).

This setup lets you develop and test HTTPS endpoints using your machine name, avoiding the limitations of dotnet dev-certs’ default localhost scope.

Host React with Blazor Server

Ruxo Zheng — Sun, 26 Jan 2025 02:43:27 +0000

Host React with Blazor Server

This article explores my experiment of hosting React within a Blazor Server project. Blazor offers a hosting model called Hosted Blazor, which combines Blazor Server and Blazor WebAssembly (WASM) within a single solution. This allows the application to render HTML with either server-side or client-side generation.

However, React excels due to its robust ecosystem in virtually every aspect, particularly its wide array of UI library choices. This potential advantage motivated this experiment.

Prerequisites

Here are the essentials you'll need to follow along:

Node + pnpm (or npm or similar). This guide uses pnpm.
Vite for React setup.
.NET Core (.NET 7 or later -- that supports Blazor project)

Install pnpm

Refer to the official installation instructions here: pnpm Installation Guide.

You can also install Node.js using the pnpm command:

pnpm env use --global lts

Setup React Side

Let's start by setting up the React application without .NET interoperability.

Steps

Create a directory to host a solution:

For example, create the directory called HostedReact.
In that directory, create a solution and a new Blazor Server app:

We'll have a solution directory to host two projects: one is a Blazor server project, another is a React project.

Run the following commands in your terminal:
```
dotnet new sln
dotnet new gitignore
md src
dotnet new blazor -o ./src/Sample
dotnet sln add ./src/Sample
```

Create a React app using Vite in the src directory:

cd src
pnpm create vite@latest
cd <Your-New-Project-Name>
pnpm install

Install node type definitions for better type safety:
```
pnpm add -D @types/node
```
Install nodePolyfilles for handling environment variabls with Vite:

Vite uses environment variables such as process for resolving paths, and these tools are essential for compatibility:
```
pnpm add node-stdlib-browser
pnpm add -D vite-plugin-node-stdlib-browser
```

Create a module entry point for the React project to be consumed by the Blazor:

Create a new file entrypoint.jsx in the React src directory.

import {createRoot} from "react-dom/client";
import {StrictMode} from "react";
import App from "./App.jsx";
import './index.css'

export function Initialize(el){
    createRoot(el).render(
        <StrictMode>
            <App />
        </StrictMode>
    )
}

Modify main.jsx to reuse this entry point function.

import './index.css'
import {Initialize} from "./entrypoint.jsx";

Initialize(document.getElementById('root'))

Configure Vite for library generation (instead of a static web app):

By default, Vite generates a static web app that bundles and index.html and necessary JavaScript files. However, to integrate with the Blazor Server project, we need it to output a JavaScript module. Update your Vite configuration (vite.config.js or vite.config.ts) as follow:
```
import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// @ts-expect-error Test
import nodePolyfills from "vite-plugin-node-stdlib-browser"

// https://vite.dev/config/
export default defineConfig({
base: "/react/",
build: {
    lib: {
    entry: path.resolve(__dirname, "src/entrypoint.jsx"),
    name: "ReactApp",
    fileName: "ReactApp",
    formats: ["es"]
    },
    outDir: "../Sample/wwwroot/react",
    emptyOutDir: true
},
plugins: [react(), nodePolyfills()],
resolve: {
    alias: {
    "@": path.resolve(__dirname, "./src")
    }
}
})
```
Notes:
- The outDir field specifies the location to generate files, aligning with Blazor's static wwwroot directory.
- The base key is for Vite's dev server and does not include the wwwroot part.
I recommend using React JavaScript (instead of TypeScript) to avoid additional overhead when calling .NET methods from JS. With JavaScript, you won't need to declare explicit types during interop. However, this is optional and depends on your preference.
Build the React project:

Run the following command to generate necessary files under the wwwroot/react directory:
```
pnpm run build
```
The output will include ReactApp.css and ReactApp.js. Ensure that you add /src/Sample/wwwroot/react to your project's .gitignore.

Setting Up the Blazor Side

Now that you've configured the React project, it's time to integrate it with Blazor so it can host the React app. This involves making use of the Initialize function declared earlier in the React entrypoint.jsx file.

Steps:

Simplify the Blazor layout:

Since the React app comes with its own style (css), we may want to get rid of Blazor's style related stuffs. You may even create a layout compoonent specifically for React rendering purpose.

Update MainLayout.razor to an empty template:

@inherits LayoutComponentBase

@Body

For App.razor, keep it minimal:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["Sample.styles.css"]" />
    <ImportMap />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Create a JS interop class for React integration:

Blazor uses JavaScript Interop to invoke JavaScript functions and receive data back from JavaScript side. To render the React components, we'll use JavaScript Interop to call the Initialize function you defined in your entrypoint.jsx file.

Create a ReactJsInterop.cs file in the project root (or another convenient namespace). Add the following code:

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace HostedReact;

public sealed class ReactJsInterop(IJSRuntime js) : IAsyncDisposable
{
    readonly Lazy<Task<IJSObjectReference>> importModule
        = new(() => js.InvokeAsync<IJSObjectReference>("import", "./react/ReactApp.js").AsTask());

    public ValueTask Initialize(ElementReference el)
        => InvokeVoidAsync("Initialize", el);

    async ValueTask InvokeVoidAsync(string identifier, params object?[]? args) {
        var module = await importModule.Value;
        await module.InvokeVoidAsync(identifier, args);
    }

    async ValueTask<T> InvokeAsync<T>(string identifier, params object?[]? args) {
        var module = await importModule.Value;
        return await module.InvokeAsync<T>(identifier, args);
    }

    public async ValueTask DisposeAsync() {
        if (importModule.IsValueCreated){
            using var import = importModule.Value;
            var module = await import;
            await module.DisposeAsync();
        }
    }
}

Notes:

This class dynamically imports the React app’s JavaScript module (ReactApp.js) at runtime and uses the Initialize function to render React components in a DOM element.
The ElementReference parameter is used to pass the DOM element where React will inject the UI.

Next, add the ReactJsInterop service to your dependency injection (DI) container. Update the Program.cs file to include the registration:

builder.Services.AddScoped<ReactJsInterop>();

Render the React App with Interop:

Use the ReactJsInterop class in a Razor page to host the React components. Let's modify Home.razor as an example:

@page "/"

@rendermode @(new InteractiveServerRenderMode(prerender: false))

@inject ReactJsInterop ReactJs

<link rel="stylesheet" href="./react/ReactApp.css" />
<div @ref="div" id="root">Loading...</div>

@code {

    ElementReference div;

    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender)
            await ReactJs.Initialize(div);
    }

}

Notes:

Add the reference to the generated React stylesheet ReactApp.css so that React styles are applied in Blazor.
Use the @ref directive to link a Blazor-controlled div element (with id="root") for React to render its components.

Run and Verify

Start the Blazor app using the dotnet run command, and navigate to the configured route (e.g. /) in your browser. You should see the React app rendered withint the Blazor app's DOM.

If any changes are made to the React app, you must rebuild it using:
```
pnpm run build
```
This regenerates the ReactApp.js and ReactApp.css files inside the Blazor wwwroot/react directory.

Add two-way interoperability

So far, we've configured React to render inside a Blazor component using the Initialize function. While this setup enables on-way communication -- from .NET (Blazor) to React -- we can extend it to allow React to call back into .NET, enabling full two-way interaction. This is achieved using Blazor's JavaScript Interop ([JSInvokable]) alongside enhancements to the React entry point.

This interoperability can be helpful for scenarios like updating React UI components based on data fetched from a Blazor service or triggering Blazor logic from user actions in the React app.

Steps:

Expose Methods in Blazor for React to Call

You'll need to define methods in Blazor that React can invoke using the .NET-to-JS interop mechanism. Let's update the Home.razor file to include a [JSInvokable] method that React can call.

Update Home.razor like this:

@page "/"

@rendermode @(new InteractiveServerRenderMode(prerender: false))

@inject ReactJsInterop ReactJs
@implements IDisposable

<link rel="stylesheet" href="./react/ReactApp.css" />
<div @ref="div" id="root">Loading...</div>

@code {

    ElementReference div;
    readonly DotNetObjectReference<Home> me;

    public Home() {
        me = DotNetObjectReference.Create(this);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender)
            await ReactJs.Initialize(div, me);
    }

    [JSInvokable]
    public int GetSecretNumber() => 123;

    public void Dispose() {
        me.Dispose();
    }

}

GetSecretNumber is the method that will be called from the React App. Notice that we need to mark JS callable methods with JSInvokableAttribute. A JS method can be either sync or async.

Also notice that IDisposable implementation is needed to release resources allocated by DotNetObjectReference, to avoid the memory leakage.

Update the React Initialize Function:

In your entrypoint.jsx file, extend the Initialize function to accept the additional .NET object reference. Use this to call the .NET method from React.

Update the entrypoint.jsx file like so:

import {createRoot} from "react-dom/client";
import {StrictMode} from "react";
import App from "./App.jsx";
import './index.css'

export async function Initialize(el, dotnet){
    const number = await dotnet.invokeMethodAsync("GetSecretNumber")

    createRoot(el).render(
        <StrictMode>
            <App n={number} />
        </StrictMode>
    )
}

And that's it. Now we have two-way communication between JS and .NET.

Conclusion

This experiment was initiated to take advantage of React's superior ecosystem and developer experience, particularly its Hot Module Replacement (HMR) feature, which allows faster UI development. While Blazor does have HMR, changes to .NET code or Razor files often require a rebuild, making development less efficient in comparison.

However, this hybrid approach has its trade-offs:

While React speeds up UI development with better HMR and its rich ecosystem, it introduces an additional API layer between .NET and JavaScript, adding complexity and potential overhead compared to pure Blazor applications.
The additional pnpm run build step for React takes 3–4 seconds to complete, which is roughly comparable to Blazor’s HMR compilation time, minimizing the perceived benefits in simple use cases.

That said, this setup shows its value in projects where React's strengths in UI development already align with an existing API-driven architecture, such as those using HTTP or gRPC for communication. In such cases, the React-Blazor integration can provide a powerful and cohesive solution by leveraging React’s flexibility while still benefiting from Blazor's robust backend/server-side capabilities.

In summary, while this hybrid approach might not be a one-size-fits-all solution, it can be a compelling choice for applications that require both React's dynamic UI ecosystem and seamless integration with Blazor's full-stack .NET environment.

Pre-render issue in Blazor server interaction

Ruxo Zheng — Fri, 20 Dec 2024 11:17:16 +0000

I have been using Reactive UI with Blazor Server for years, and I’ve often noticed double data loadings in applications I’ve developed. This issue can significantly impact application performance by unnecessarily increasing network usage, slowing down page loads, and creating a poor user experience. I fixed this by turning off pre-rendering, but I’ve never fully understood why it happened.

Recently, I experimented with PersistentComponentState, hoping to transfer state between the pre-rendering phase and the final rendering phase. My goal was to resolve the double loading issue while still benefiting from pre-rendering. However, I discovered that pre-rendering—even in .NET 9 (SDK 9.0.101)—behaves inconsistently. There also seems to be an unnecessary “page-loading” phase that wastes CPU and memory resources without achieving anything meaningful. I reported this issue on the .NET GitHub repository: Issue #59569.

To better understand the problem, let’s review how Blazor pre-rendering works in .NET 9.

Pre-render Effects in Blazor Server Interaction

Pre-rendering is enabled by default for Blazor Server. Whenever a user navigates to a page marked with @rendermode InteractiveServer, Blazor renders the page twice:

Static Rendering: The first render is for static content, which benefits search engine crawling and robots.
Interactive Rendering: The second render initializes the in-memory state of the Blazor circuit.

During static rendering, Blazor triggers lifecycle methods such as OnInitialized, OnParametersSet, and SetParametersAsync, but not OnAfterRender. In the interactive phase, all lifecycle methods are triggered. Developers typically load data in OnInitialized, which leads to the double loading issue. To mitigate this, Microsoft introduced PersistentComponentState to share state between these phases.

Understanding Static Rendering

Static rendering behaves like an MVC framework where it has access to HttpContext as a CascadingParameter. It is stateless, meaning Blazor creates temporary states, including DI contexts, for static rendering and discards them afterward. PersistentComponentState is the only mechanism to carry serializable state into the interactive phase.

Static rendering occurs not only on the page’s initial load but also during navigation via NavigationManager (e.g., clicking a <NavLink>), which might be understandable when occasional data updates on the screen are necessary. However, PersistentComponentState is only effective during the initial load. Static rendering during navigation doesn’t utilize PersistentComponentState, leading to the creation and discarding of states without updating the screen. This behavior appears more like a defect than an intentional design choice.

Example Code

Here’s an example demonstrating the behavior:

@page "/"
@rendermode InteractiveServer

@implements IDisposable
@inject PersistentComponentState State

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>
<p>Count = @myCount</p>

Welcome to your new app.

@code {
    PersistingComponentStateSubscription? ps;

    static int count;

    [CascadingParameter] HttpContext? HttpContext { get; set; }

    int myCount = Interlocked.Increment(ref count);

    protected override void OnInitialized() {
        ps = State.RegisterOnPersisting(Persist);

        var existed = State.TryTakeFromJson<int>("data", out var c);

        Console.WriteLine($"{myCount}. Created with persisted={existed}, c={c}, service={State.GetHashCode()}, and context={HttpContext}");
    }

    Task Persist() {
        State.PersistAsJson("data", myCount);
        return Task.CompletedTask;
    }

    protected override void OnAfterRender(bool firstRender) {
        Console.WriteLine($"{myCount}. OnAfterRender {firstRender}");
    }

    public void Dispose() {
        ps?.Dispose();
    }
}

This modified example from the Blazor skeleton project assigns a counting number whenever OnInitialized is called and prints out state details. Below is the output when loading the page, navigating away, and returning to the page:

1. Created with persisted=False, c=0, service=16484805, and context=Microsoft.AspNetCore.Http.DefaultHttpContext
2. Created with persisted=True, c=1, service=23091838, and context=
2. OnAfterRender True
3. Created with persisted=False, c=0, service=23749772, and context=Microsoft.AspNetCore.Http.DefaultHttpContext
4. Created with persisted=False, c=0, service=23091838, and context=
4. OnAfterRender True

Explanation of the Output

Step 1: The first static render during the initial load. HttpContext is accessible.

Step 2: The interactive render after static rendering. PersistentComponentState retrieves the persisted state.

Step 3: Static rendering occurs during navigation, creating and discarding states without utilizing them. This takes place after navigating to another page and returning.

Step 4: The interactive render after navigating back, but PersistentComponentState is no longer effective.

Another unexpected behavior occurs when navigating to the current page, such as <NavLink> with href="/". In this case, only the static rendering takes place, but the screen remains unchanged, leading to a confusing and seemingly redundant action.

To clarify, observe the service numbers in the output panel. This number is a unique hash that functions like an object ID. Steps 1 and 3 have entirely different numbers, while steps 2 and 4 share the same number. This happens because the PersistentComponentState service is registered with a "scoped" lifetime in the DI context, meaning the scoped states in the interactive session are shared. The service is created when the Blazor circuit is initialized and is disposed of when the circuit ends. Since steps 2 and 4 are in interactive mode, they use the same service instance, resulting in the same number. However, steps 1 and 3 are static renders, and their instances are temporary, preventing them from sharing states.

It would be acceptable if PersistentComponentState worked consistently in step 4. However, even with that functionality, the peculiar behavior of pre-rendering when navigating to the current page remains problematic, particularly for applications that experience heavy usage.

My Two Cents

The current pre-rendering in interactive server mode is not yet suitable for production due to its tendency to perform unintentional and wasteful loads. To make it production-ready, improvements are necessary, such as consistent handling of PersistentComponentState during navigation and eliminating redundant static rendering phases when revisiting the same page. Until these issues are resolved, it’s advisable to disable pre-rendering using @rendermode @(new InteractiveServerRenderMode(prerender: false)).

Dev Drive's shortcut guide

Ruxo Zheng — Wed, 04 Dec 2024 06:00:00 +0000

Dev Drive is a new type of storage volume introduced in Windows 11. It works with the Resilient File System (ReFS). One interesting feature I came across is that when copying a file, both the original and the copy might share the same disk space (though I haven't confirmed this yet). I'll look into it more in the future.

Anyway, here's a quick guide on working with Dev Drive, summarized from the Microsoft Document.

Creating a New Dev Drive

A Dev Drive is essentially a partition inside a Virtual Hard Disk (.vhd). Creating a Dev Drive involves creating a virtual disk, formatting it with ReFS, and then mounting it to a logical drive.

To create a Dev Drive, navigate to System > Storage > Advanced Storage Settings > Disks & volumes. Select Create Dev Drive.

If you want to disable antivirus for the Dev Drive, you can use the following command line with administrative privileges:

fsutil devdrv enable /disallowAv

Resizing a Dev Drive

The Microsoft document provides a way to resize a Dev Drive. However, if you're like me, you might run into a problem where the resize utility doesn't detect your Dev Drive and instead shows irrelevant volumes. There's a PowerShell command called Resize-VHD, but it requires installing Hyper-V on your machine.

A better solution is to use diskpart:

Take the VHD of the Dev Drive offline in the Disk & volumes setting.
Open a terminal and run diskpart.

Enter the following commands:

select vdisk file="<Your VDH Path>"
attach vdisk
extend size=<size in MB>
detach vdisk
exit

The good news is that this method does not require Hyper-V.

Move a VHD across machines

The Microsoft documentation includes a recommendation:

When you create a Virtual Hard Disk (VHD) hosted on a fixed disk (HDD or SSD), it is not recommended to copy the VHD, move it to a different machine, and then continue using it as a Dev Drive.

No specific reason is provided, but from my research I believe it might relate to the security settings on the volume. When a VHD is moved to a new machine, it loses its security descriptor, and you need to "trust" the Dev Drive again. The procedure is detailed in the same document, but essentially it's just a command line (with administrator access):

fsutil devdrv trust <drive-letter>

การใช้งาน Polyglot notebook กับ Python

Ruxo Zheng — Tue, 03 Dec 2024 05:09:21 +0000

โพสนี้รวบรวมเทคนิคที่เกี่ยวข้องกับการใช้ Polyglot notebook เพื่อ run Python interpreter (Polyglot ณ เวลาที่เขียน คือ version 1.0.5568010)

Polyglot เป็น plugin อันนึงของ Visual Studio code ที่ run .NET Interactive (ซึ่งคือ Jupyter version .NET นั่นเอง)

การ enable Python ใน Polyglot

Polyglot มีคู่มือในการใช้ Python อยู่ที่ Manual ซึ่งมีอยู่ 2 วิธี คือ 1) ใช้ Python ตรงๆ กับ 2) ใช้ผ่าน Anaconda

อะไรคือ Anaconda?
Anaconda เป็น toolset สำหรับ data scientists ใช้ Python ในการทำ data processing โดย Adaconda จะมี python repositories ของตัวเอง ที่รับประกันเรื่องปัญหาความเข้ากัน (compatibility issues) ของ Package ไว้ และมันง่ายต่อการติดตั้ง และใช้งาน (โดยเฉพาะ Windows ซึ่งถ้าเป็น Python module บางตัว จะต้องติดตั้ง C++/Rust compilers ไว้เวลาจะใช้งาน แต่ถ้าผ่าน Anaconda เค้าจะมี package พร้อมใช้ให้เลย แม้จะเป็น Windows ก็ตาม!)

การใช้งานกับ Python ตรงๆ

การใช้งานแบบนี้มี trick เล็กน้อย ถ้าคุณอยากใช้ virtual environment แต่ถ้าคุณ install Python package เป็นแบบ global หมด ก็สามารถใช้งานได้เลย ผ่าน "magic command" ของ Polyglot

#!connect jupyter --kernel-name pythonkernel --kernel-spec python3

ให้ copy magic command ลงไปใน Code cell (จะภาษาอะไรก็ได้) แล้วก็กด run ถ้าทุกอย่างโอเค ก็จะขึ้นข้อความประมาณนี้

Note: pythonkernel เป็นชื่อของ Kernel ที่จะขึ้นมาเลือกเวลาเลือก ภาษาใน Polyglot ดังรูป

ตัวอย่างการทำงาน

แต่ถ้าคุณอยากจะใช้ virtual environment จะมีข้อจำกัดอยู่ นั่นคือคุณจะต้องสร้าง virtual environment ใน directory ของ Notebook นั้น (ก็ด้วยคำสั่งมาตรฐาน Python py -m venv .venv) ส่วน magic command ยังคงไว้เหมือนเดิม เพียงแต่ Polyglot จะใช้ Python จาก environment เรา พร้อม package ต่างๆที่ installed ไว้

หลังจาก Preview หวังว่าจะมี option refer virtual environment ที่ตำแหน่งอื่นได้ 🤞

การใช้งานกับ Anaconda

ข้อดีของการใช้กับ Anaconda คือ เราสามารถสร้าง virtual environment ไว้ที่อื่นได้ และโดยเฉพาะอย่างยิ่งถ้าคุณอยากจะเล่น data science ของ Python อยู่แล้ว เช่น NumPy package

ปกติเมื่อลง Anaconda เสร็จ มันจะมี default environment ที่ชื่อ base มาให้อยู่แล้ว ซึ่งเราสามารถใช้ magic command ดังต่อไปนี้ได้เลย

#!connect jupyter --kernel-name pythonkernel --conda-env base --kernel-spec python3

สังเกตว่าจะมี parameter -conda-env base เพิ่มขึ้นมา คำว่า base คือ base environment ของ Anaconda

แต่ในทางปฏิบัติ เราไม่ควรใช้ base ของ Anaconda โดยเฉพาะถ้าเราอยากจะเพิ่มเติม/ลด package ซึ่งมันอาจจะกระทบ package dependencies และทำให้ tools หลายๆตัวของ Anaconda run ไม่ได้ก็ได้

เราควรสร้าง Anaconda environment ขึ้นมาใหม่ และวิธีง่ายที่สุดคือใช้ Anaconda Navigator

สร้าง environment ใหม่บน Anaconda

Anaconda Navigator เป็น notebook management และ environment management ในตัว

วิธีสร้างก็แสนง่าย กดปุ่ม Create ตั้งชื่อ environment และเลือก Python interpreter ซึ่งแนะนำว่าใช้ตัวที่ recommend โดย Anaconda เพราะจะมีปัญหาเรื่อง compatibility น้อยสุด

เมื่อกดปุ่มสร้างแล้ว รอซักครู่ ก็จะปรากฎ environment ใหม่ของเราขึ้นมาอยู่ใน list

แต่เราจะต้อง install package ชื่อ ipykernel เพิ่มเติมด้วย ซึ่งสามารถทำได้เลยจาก Navigator window เช่นกัน โดย search คำว่า ipykernel ใน panel ด้านขวาของ environment เรา (สำคัญ ต้องเลือก dropdown เป็น Not installed หรือ All) check ที่ package และกดปุ่ม Apply ด้านล่าง) package นี้จำเป็นสำหรับ Polyglot plugin

ในตัวอย่าง มีสร้างไว้อันนึงชื่อ ai เวลาจะใช้ใน Polyglot ก็เปลี่ยน --conda-env ให้เป็นชื่อ environment เรา

#!connect jupyter --kernel-name pythonkernel --conda-env ai --kernel-spec python3

Missing package!? ใน Anaconda

อาจจะมีบางกรณีที่ Python package ของเราไม่อยู่ใน default list ของ Anaconda ซึ่งเราสามารถ manual install ได้ จาก 2 แหล่งคือ 1) Conda forge และ 2) PyPI

แนะนำว่าให้หา Python package จาก Conda forge ก่อน ผ่าน https://anaconda.org/conda-forge package หลายอย่างไม่ได้อยู่ใน default list แต่หาได้ที่นี่เช่น langchain-community

จะเห็นว่ามันบอกคำสั่งสำหรับ install ใน Anaconda ให้ด้วย

วิธีการ install package ลงใน environment เรา ก็ต้องเปิด terminal ขึ้นมาก่อน ง่ายสุดก็ใช้ Navigator

แล้วสามารถพิมพ์คำสั่งเพื่อ install package ได้เลย

conda install conda-forge::langchain-community

แต่ถ้าใน Conda forge ก็ไม่มี?

ก็ต้องกลับมาใช้ pip install ซึ่งแนะนำให้เปิด terminal ผ่าน Navigator เหมือนกัน ข้อควรระวังคืออาจจะมี compatible issue ระหว่าง conda packages กับ PyPI package แต่เท่าที่ลองมา so far ยัง so good 😇

สำรวจงาน DigiTech Nov 2024

Ruxo Zheng — Thu, 21 Nov 2024 10:49:19 +0000

ไปงาน DigiTech 2024 ที่เมืองทองมา เดินสำรวจดูว่า trend เป็นอย่างไร

อย่างแรก ก่อนเข้างานก็คิดไว้ว่า อยากจะมีเครื่องมืออะไรซักอย่างสำหรับนับว่า industry ในงานมีอะไร หรือประเภท/ปัญหาของแต่ละเจ้าที่มาตั้ง booth เป็นเรื่องเกี่ยวกับอะไรบ้าง เลยก็คิดในใจว่า มันน่าจะมีเครื่องมือสำหรับสร้างตัวนับแบบง่ายๆนะ และ search ใน Perplexity ก็มีจริงๆ! 😅

Tally และ keepthescore เป็นตัวอย่างของเวปที่ทำหน้าที่แค่สร้าง counter แบบง่ายๆ (limit counter 8 ตัว อยากได้ unlimit ต้องจ่ายตังค์ 😮)

ในแง่ของการจัดงาน งานเหมือนทำมาเพื่อ B2B หา business partner กัน แต่เท่าที่เดินดู เห็นกลุ่มใหญ่เป็นนักศึกษาเสียมากกว่า ดันมาจัดวันธรรมดาซะด้วย

เราเดินดูงานแล้วใช้ counter นับลักษณะของกลุ่ม industry หลักๆได้ "ประมาณ" ตามตาราง (อย่างน้อยประมาณนี้ เดินไป ดูไป คุยไป)

Industry	Count
HR	8
Security	3
No code	3
Business	17
iOT	3
Cloud	2
E-Commerce	3
Training	2
AI	10
RPA	5
Image recog	3

แสดงเป็นกราฟสัดส่วนดังนี้

Observation

เท่าที่ดู Low code platform มาจาก SG และ JP หมด, หนึ่งในนั้นคือ TOPPAN (จาก SG) ซึ่งพึ่ง launch lowcode platform ปีที่แล้ว และ

Note 2: CRM + AI มีให้เห็น 2-3 platforms

ผู้เล่นใหม่

TOPPAN Ecquaria -- KAIZEN - Low code targets government sector
EnableSurvey ของไทยเอง ทำมาแข่ง SurveyMonkey พึ่ง launch ปีที่แล้ว ราคา individual ถูกกว่า แต่ถ้าแบบ team ก็พอๆกัน พึ่งสังเกตว่าราคา individual แพงกว่าแบบ team ... ทำไมนะ? -_-a
SMSKUB พึ่งจดทะเบียนเมื่อ 2 ปีก่อน
KhunAI AI aggregator + pre-prompt platform -- สำหรับให้คนทั่วไปใช้ AI ง่ายขึ้น พึ่งเปิดตัวกันยา ปีนี้
FunCrowd -- CRM platform launched 3 ปีก่อน

ผู้เล่นเก่า

desknet's NEO -- AppSuite app no code ตั้งแต่ปี 2013 -- ทำ subscription model ที่ ฿280 ต่อ user ต่อเดือน (น่าจะ cloud based)
- มี ChatLuck อีก น่าจะเป็นคู่แข่ง Slack, MS Team

[F#] Bring Chrome Window to front in Selenium (Windows)

Ruxo Zheng — Mon, 18 Nov 2024 03:45:47 +0000

(Note: This article uses .NET Web Driver and .NET Interoperability to work with the Win32 API.)

In this article, I'll show you how to bring a Chrome browser window to the front, ensuring it becomes the active, focused window during Selenium automation. Usually, Selenium is used to automate web tasks in the background, allowing you to continue working on other tasks. However, some websites 😉 get suspicious if they detect actions happening while the browser is inactive—after all, how could there be interactions if the browser isn't even in focus?

To help address this, let's take a closer look at how browser focus works. In JavaScript, the onfocus and onblur events allow websites to determine if the browser is the active window. The onfocus event triggers when the window gains input focus (meaning it can receive keyboard input and is the active window on the screen), while the onblur event triggers when the browser loses focus. These simple events can give websites clues about whether interactions seem automated.

Many websites also use more sophisticated approaches to detect human-like interaction patterns. Therefore, if you're trying to convincingly simulate human behavior, controlling the browser window—bringing it to the front or switching between windows—can be essential. This is where the Win32 API comes in handy.

Little Note about F#

This article uses F#. Here is a little explanation of its syntax:In C# if you have a method/function named f which takes one argument (supposed it's x), you can call it with var y = f(x). But F# version, the possibilities are:

let y = f(x)   // normal call
let y = f x    // parentheses are optional
let y = x |> f // forward pipe call

Bringing Chrome to the Front with Selenium

On Windows, you can control any application window using the Win32 API, but you need a "window handle" to do so. A window handle (often abbreviated as HWND) is a token provided by the Windows OS that uniquely identifies a window in the system's GUI environment.

When using Selenium, starting ChromeDriver automatically opens the browser, but it doesn't directly provide the window handle. Instead, we can get to it indirectly via the ChromeDriver process ID, which is accessible through ChromeDriverService.

Step 1: Obtain `ChromeDriver` Process ID

When we create the ChromeDriver instance, we can access its process ID through the given ChromeDriverService object.

let options = ChromeOptions()
let service = ChromeDriverService()
let driver = ChromeDriver(service, options)

printfn $"Process ID = {service.ProcessId}"

Step 2: Find the Browser's Process ID

The ChromeDriver executable (chromedriver.exe) is responsible for launching the Chrome browser instance, but we need the browser's process ID, not the driver's. To find it, we need to iterate through all running Chrome processes on the machine and identify the one spawned by our driver.

open System.Diagnostics

let getBrowserId (driver_process_id: int) =
    let chrome_processes = Process.GetProcessesByName "chrome"
    try
        let candidates = chrome_processes |> Seq.filter (fun p -> getParentId(p.Id) = driver_process_id)
                                          |> Seq.map _.Id
                                          |> Seq.toArray
        assert (candidates.Length = 1)  // must be one Chrome window
        candidates[0]
    finally
        chrome_processes |> Seq.iter _.Dispose()

Step 2.1: Get the Parent Process ID

Getting the parent process ID from a given process ID is a bit tricky — it requires querying detailed process information using the NtQueryInformationProcess function. Essentially, we open the process with the known ID, call this function, and extract the required information.

open System.Runtime.InteropServices

[<Flags>]
type private ProcessAccessFlags = QueryInformation = 0x400u

[<Struct; StructLayout(LayoutKind.Sequential)>]
type private ProcessBasicInformation = {
    Reserved1: IntPtr
    PebBaseAddress: IntPtr
    Reserved2_0: IntPtr
    Reserved2_1: IntPtr
    UniqueProcessId: IntPtr
    InheritedFromUniqueProcessId: IntPtr
}
with
    static member Default = { Reserved1 = IntPtr.Zero; PebBaseAddress = IntPtr.Zero; Reserved2_0 = IntPtr.Zero; Reserved2_1 = IntPtr.Zero; UniqueProcessId = IntPtr.Zero; InheritedFromUniqueProcessId = IntPtr.Zero }

[<DllImport("kernel32.dll")>]
extern IntPtr private OpenProcess(ProcessAccessFlags dwDesiredAccess, bool bInheritHandle, int dwProcessId)

[<DllImport("kernel32.dll", SetLastError = true)>]
extern bool private CloseHandle(IntPtr hObject)

[<DllImport("ntdll.dll")>]
extern int private NtQueryInformationProcess(IntPtr ProcessHandle, int ProcessInformationClass, ProcessBasicInformation& ProcessInformation, int ProcessInformationLength, int& ReturnLength)

let getParentId (process_id: int) =
    let handle = OpenProcess(ProcessAccessFlags.QueryInformation, false, process_id)
    if handle = IntPtr.Zero then
        failwith "OpenProcess failed"
    try
        let mutable pbi = ProcessBasicInformation.Default
        let mutable returnLength = 0
        let size = Marshal.SizeOf pbi
        let status = NtQueryInformationProcess(handle, 0, &pbi, size, &returnLength)
        if status <> 0 then failwithf $"NtQueryInformationProcess failed with status %d{status}"
        pbi.InheritedFromUniqueProcessId.ToInt32()
    finally
        CloseHandle handle |> ignore

Step 3: Locate the Window Handle

Once we have the process ID for the browser, the next step is to enumerate the window handles owned by this process.

type private EnumWindowsProc = delegate of IntPtr * IntPtr -> bool

[<DllImport("user32.dll")>]
extern bool private EnumWindows(EnumWindowsProc lpEnumFunc, IntPtr lParam)

[<DllImport("user32.dll")>]
extern int private GetWindowThreadProcessId(IntPtr hWnd, int& lpdwProcessId)

[<DllImport("user32.dll")>]
extern bool private IsWindowVisible(IntPtr hWnd)

let findBrowserHandle (browser_pid: int) =
    let mutable result = []

    let enumWindowsProc (hWnd: IntPtr) (_: IntPtr) :bool =
        let mutable pid = 0
        GetWindowThreadProcessId(hWnd, &pid) |> ignore
        if pid = browser_pid then result <- hWnd :: result
        true

    let callback = EnumWindowsProc(enumWindowsProc)
    if not <| EnumWindows(callback, IntPtr.Zero) then failwith "EnumWindows failed"

    result |> Seq.filter IsWindowVisible
           |> Seq.exactlyOne

Since there could be multiple windows, we specifically look for the visible one—this is the Chrome window that we want to interact with.

Final Step: Bring Chrome to the Front!

Now that we have the correct window handle, we can bring it to the front by using the SetForegroundWindow API. This call will make Chrome the active window, ready for any user input.

[<DllImport("kernel32.dll")>]
extern uint GetLastError()

[<DllImport("user32.dll")>]
extern bool private SetForegroundWindow(IntPtr hWnd)

let [<Literal>] private NoError = 0u
let [<Literal>] private AccessDeniedError = 5u

let setForegroundWindow (hwnd: IntPtr) =
    if not (hwnd |> SetForegroundWindow) then
        match GetLastError() with
        | AccessDeniedError -> printfn "Cannot set foreground, process doesn't own foreground privilege"; false
        | NoError -> true // window is already on top... I think...
        | code -> failwithf $"""SetForegroundWindow failed (0x%X{code})"""
    else
        true

One caveat here is that in order to successfully set the foreground window, the process making the request (your Selenium script) must already be the foreground process. In practical terms, this means your Selenium script needs to be the active application before it can bring the browser to the front. To make this strategy work smoothly, ensure your script maintains foreground status whenever necessary.

Conclusion

In this tutorial, we used a combination of Win32 API calls to obtain and manipulate the window handle of a Chrome browser, allowing us to bring it to the front during Selenium automation. While this may seem like a lot of effort for something seemingly simple, it's often necessary if you need to convincingly simulate human interactions. Ideally, Selenium would offer more direct support for this, but until then, this approach ensures your automation scripts remain effective and human-like.

Blazor's Authentication

Ruxo Zheng — Thu, 07 Nov 2024 03:48:52 +0000

Disclaimer: based on my observation, not readings.

Recently, I had to implement Firebase authentication for a Blazor WASM project. To my surprise, I discovered there's no ready-made authentication library for Firebase on .NET. While I found the Firebase Admin library, it wasn't quite what I needed for client-side authentication. So, I ended up building my own solution for .NET.

Fortunately, I didn't have to start from scratch. Firebase provides a JavaScript SDK for authentication, which is quite straightforward to use and integrates well with Blazor WASM.

Blazor Authentication

Blazor handles authorization through a class derived from AuthenticationStateProvider. This class requires you to override a key method: GetAuthenticationStateAsync. You can find more details in the official documentation.

The GetAuthenticationStateAsync method is responsible for returning an instance of AuthenticationState, which encapsulates the current user as a ClaimsPrincipal. The ClaimsPrincipal contains a ClaimsIdentity, which the framework uses to determine whether the user is authenticated by checking the IsAuthenticated property.

By overriding GetAuthenticationStateAsync and returning the appropriate user state, you can manage the application's authentication flow as well as user permissions. Essentially, this means you have full control over how authentication is implemented and when users are considered authenticated or not.

Firebase Authentication Overview

Firebase offers comprehensive documentation for their authentication libraries, which can be found here (JavaScript SDK). Since I was working with Blazor WASM, it made sense to leverage browser modules. Luckily, Firebase also supports this approach, as mentioned in a note on this page.

Blazor integration

The idea is to use the JS SDK to provide the Firebase authentication, and once we get the authenticated JWT, just hands over to .NET Cookie authentication for storing as .NET cookie, or manually managing the token yourself.

JS interop script

First, we need a Javascript-side interop code to call Firebase authentication. It looks like this:

import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js'
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js'

const signin = async (output, config) => {
    const app = initializeApp(config);
    const auth = getAuth(app);

    const provider = new GoogleAuthProvider();

    try {
        const result = await signInWithPopup(auth, provider);
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const user = result.user;
        const info = {
            accessToken: credential.accessToken,
            idToken: user.accessToken
        }
        const encoded = await output.invokeMethodAsync("AfterSignIn", true, info, null)
        // you may use local storage or session storage, etc.
        document.cookie = `after-signin=${encoded}; path=/; Secure; SameSite=Strict`;
    } catch(error) {
        console.error(error);
        output.invokeMethodAsync("AfterSignIn", false, null, "permission-needed")
    }
};

window.firebase = { signin };

In order to use the SDK, you need Firebase configuration, which is passed to the function via config variable. You can find the configuration in Firebase's console, in the application section under your project's settings.

The output variable encapsulates .NET interop class with a method name AfterSignIn. It is an integration for the script and .NET Blazor code. My AfterSignIn method looks like this:

    [JSInvokable]
    public async Task<string?> AfterSignIn(bool success, SignInInfo? info, string? error) {
        // basically you may want to cache the result of login
        afterSignInInfo = success? new AfterSignInInfo(info) : null;
        // return serialized sign-in data as string for storing in the cookie
        return success? JsonSerializer.Serialize(info!) : null;
    }

and the code to invoke the signin function:

async Task Login(){
        var jsRef = DotNetObjectReference.Create(this);
        var fbConfig = JsonSerializer.Deserialize<FirebaseConfig>( Configuration["FirebaseConfig"]!)!;

        await js.InvokeVoidAsync("window.firebase.signin", jsRef, fbConfig);
        if (afterSignInInfo?.IsSuccess ?? false){
            var query = returnUrl is null ? string.Empty : $"?ReturnUrl={HttpUtility.UrlEncode(returnUrl)}";
            navManager.NavigateTo($"/login/success{query}");
        }
}

That's it

The JS code should be generalized enough to be used with any kind of Blazor project (Blazor Server, Blazor Hosted WASM, or just Blazor WASM).

Casual Bayesian Network

Ruxo Zheng — Thu, 07 Nov 2024 01:50:22 +0000

A causal Bayesian network (CBN) is a diagram that shows cause and effect to make it easier to understand Bayesian reasoning... The key is being able to identify what is the cause and what is the effect.

Blue represents forward problems (deduction)
Red represents inverse problems (induction)

p-value

Ruxo Zheng — Wed, 06 Nov 2024 09:42:31 +0000

Just recently understood p-value... I’ve seen many papers mention this value, but I didn’t really know what it meant.

The p-value is the probability of getting the observed experimental results assuming that our hypothesis is not true or has no effect.

For example, if we say that watering plant X every morning makes it grow 20% faster compared to watering it at other times of the day:

If the p-value is high, it means there's a high chance that plant X could grow 20% without us watering it in the morning (suggesting that our hypothesis might not be true).

For instance, if the p-value is 0.1 or 10%, it means there’s a 10% chance that the plant will grow 20% without being watered in the morning.

On Brilliant.org, it explains that the issue with p-values is that they represent confidence in a single experiment only. In practice, a good experiment should be independently replicated and consistently yield significant results. (In Bayesian terms, this means that confidence in the experimental results multiplies with each successful replication.)

The bottom line is... trusting a single paper isn’t very reliable.

Apply Bayes กับงาน 😆

Ruxo Zheng — Tue, 05 Nov 2024 07:35:34 +0000

สมมติถ้าเรากำลังหางาน แต่เราพยายามหลีกเลี่ยงบริษัทที่ management team มี lead ควบหลาย role (เรียกว่า duck leader -- Ld 😆 -- ละกัน d = duck🦆) โดยเราเชื่อว่า ในบริษัทที่มี lead แบบนี้ จะไม่น่ามีความสุขในการทำงาน 😏

บังเอิญว่าเราได้งานบริษัท A.. โอกาสที่บริษัท A จะเป็นที่ทำงานที่มีความสุขเทียบกับโอกาสที่บริษัท A เป็นที่ทำงานที่ไม่มีความสุข... โดยที่เราไม่รู้อะไรเลย เขียนเป็น:

P(H):P(¬H)=1:1

โดย P(H) เป็นความน่าจะเป็นที่บริษัท A เป็นที่ทำงานที่มีความสุข
และ P(¬H) เป็นความน่าจะเป็นที่บริษัท A ไม่น่าจะมีความสุข
มันเป็น 1:1 เพราะเราไม่รู้อะไรเลย ดังนั้นโอกาสที่จะมี/หรือไม่มีความสุขเท่ากับ 50% นั่นคืออัตราส่วน 1:1
บังเอิญตอนสัมภาษณ์เราพบว่าบริษัท A มี duck leader และเริ่มสงสัยว่าเราจะมีความสุขในการทำงานที่บริษัท A มั้ย..❓ ด้วย evidence ใหม่... อัตราส่วนของที่ทำงานที่มีความสุขของเรากลายเป็น

P(H)∙P(Ld│H):P(¬H)∙P(Ld│¬H)
หรือ P(Ld│H):P(Ld│¬H) เพราะ P(H):P(¬H)=1:1

ถามว่า ถ้าในบริษัทที่ทำงานไม่สุขทั้งหมดในโลก(จักรวาล ฯลฯ) มี duck leader หรือเปล่า? จริงๆอาจจะมีหรือไม่มีก็ได้ เพราะอาจจะไม่สุขจากสาเหตุอื่นก็ได้ เราคิดว่ามันอาจจะเป็น 50% (subjective evidence) ดังนั้นเราให้

P(Ld│¬H)=½

ดังนั้นอัตราส่วนจึงเป็น P(Ld│H):½
นั่นคือ บริษัทจะเป็นที่ที่มีความสุขหรือเปล่า ขึ้นอยู่กับ P(Ld|H) หรือโอกาสที่มี duck leader อยู่ในบริษัทที่มีความสุขเท่าไหร่

ถ้าโดยเฉลี่ยเราคิดว่า มันจะมีหรือไม่มีก็ได้ โอกาสก็จะเป็น 50% หรือ ½ ซึ่งจะทำให้อัตราส่วนกลับมาเป็น ½:½ หรือ 1:1 เท่าเดิม แปลว่า duck leader ไม่มีผลต่อความสุข

แต่ถ้าเรา "เชื่อ" (subjective evidence) ว่า บริษัทที่มีความสุขไม่น่าจะมี duck leader อยู่ได้ เช่น assume 5 บริษัทที่สุข อาจจะมีแค่ ที่เดียวที่มี duck leader (เดาเอา)
อัตราส่วนของ H กลายเป็น ⅕:½ หรือ 2:5 นั่นคือ ถ้ามีบริษัททั่วไป 7 แห่งแล้ว 2 ใน 7 (~29%) จะเป็นที่มีความสุข และ 5 ใน 7 (~71%) เป็นที่ไม่มีความสุข

แต่ถ้า somehow มีผลสำรวจทางสถิติ (objective evidence) บอกว่าบริษัทที่มีความสุข มี duck leader อยู่ 80% ก็จะกลายเป็น ⅘:½ หรือ 8:5 แปลว่าโอกาสที่จะเป็นที่ทำงานมีสุขเท่ากับ 8/13 (61.5%) และไม่มีสุข 5/13 (38.5%)

อยากทำงานกับบริษัท A มั้ย เลือกเอา 😁

DEV Community: Ruxo Zheng

My journey to Go

Use Your Machine Name (Not Just localhost) with HTTPS on ASP.NET Core — and Make Node.js Trust It

1) Create a self-signed certificate (.pfx) for your machine name

2) (Optional) Replace the default dotnet dev-certs certificate

3) Or: Point Kestrel to your PFX in appsettings.json

4) Trust the certificate (for browsers)

5) Make it work with Node.js

Node.js 22.x

Node.js 23.8+

6) Deleting the certificate later

Common Gotchas

Summary

Host React with Blazor Server

Host React with Blazor Server

Prerequisites

Install pnpm

Setup React Side

Steps

Setting Up the Blazor Side

Steps:

Add two-way interoperability

Steps:

Conclusion

Pre-render issue in Blazor server interaction

Pre-render Effects in Blazor Server Interaction

Understanding Static Rendering

Example Code

Explanation of the Output

My Two Cents

Dev Drive's shortcut guide

Creating a New Dev Drive

Resizing a Dev Drive

Move a VHD across machines

การใช้งาน Polyglot notebook กับ Python

การ enable Python ใน Polyglot

การใช้งานกับ Python ตรงๆ

การใช้งานกับ Anaconda

สร้าง environment ใหม่บน Anaconda

Missing package!? ใน Anaconda

แต่ถ้าใน Conda forge ก็ไม่มี?

สำรวจงาน DigiTech Nov 2024

Observation

ผู้เล่นใหม่

ผู้เล่นเก่า

[F#] Bring Chrome Window to front in Selenium (Windows)

Little Note about F#

Bringing Chrome to the Front with Selenium

Step 1: Obtain ChromeDriver Process ID

Step 2: Find the Browser's Process ID

Step 2.1: Get the Parent Process ID

Step 3: Locate the Window Handle

Final Step: Bring Chrome to the Front!

Conclusion

Blazor's Authentication

Blazor Authentication

Firebase Authentication Overview

Blazor integration

JS interop script

That's it

Casual Bayesian Network

p-value

Apply Bayes กับงาน 😆

2) (Optional) Replace the default `dotnet dev-certs` certificate

3) Or: Point Kestrel to your PFX in `appsettings.json`

Step 1: Obtain `ChromeDriver` Process ID