### Install Rx.NET Packages

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Instructions for installing the `System.Reactive` NuGet package using both the .NET CLI and PowerShell Package Manager. This is the first step to integrate Reactive Extensions into a .NET project.

```shell
dotnet add package System.Reactive
```

```powershell
Install-Package System.Reactive
```

--------------------------------

### Inno Setup Registry Entry Example

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-environment-path-registry-by-code.md

This Inno Setup Registry entry demonstrates how to set a string value in the registry. It defines the root key, subkey path, value type, name, and data for a program's installation path setting.

```Inno Setup
[Registry]
Root: HKLM; Subkey: "Software\My Company\My Program\Settings"; ValueType: string; ValueName: "InstallPath"; ValueData: "{app}"
```

--------------------------------

### Install http-server Globally via npm

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-1-hello-world.md

This command installs the `http-server` package globally, allowing you to serve static files from your local machine. It's useful for developing web applications that require an HTTP server, especially when direct file access might cause issues.

```Shell
npm install http-server -g
```

--------------------------------

### Initialize Intro.js Guided Tour

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/front-end-intro-js.md

JavaScript code snippet demonstrating how to start the Intro.js guided tour. It attaches an event listener to a button, which, when clicked, initializes and begins the tour defined by the `data-step` and `data-intro` attributes.

```JavaScript
document.getElementById('start').addEventListener('click', function() {
  introJs().start();
});
```

--------------------------------

### Install Babel CLI Globally via npm

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-1-hello-world.md

This command installs the Babel command-line interface globally. The Babel CLI is used for offline compilation of JavaScript and JSX files, transforming them into standard JavaScript that browsers can understand without needing an in-browser compiler.

```Shell
npm install -g babel-cli
```

--------------------------------

### Enable Progress Bar in Intro.js Tour

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/front-end-intro-js.md

This JavaScript example shows how to add a progress bar to your Intro.js guided tour. By calling `setOption('showProgress', true)` before `start()`, users can visually track their progress through the steps.

```JavaScript
introJs()
  .setOption('showProgress', true)
  .start();
```

--------------------------------

### Publish .NET Core Application to Output Directory

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-continuous-integration-with-azure-devops.md

Publishes a .NET Core application to a specified output directory (`dist`), which is then used as the source for the Inno Setup installer in a CI pipeline.

```powershell
dotnet publish -o dist
```

--------------------------------

### Copy Inno Setup Installer to Azure DevOps Artifact Staging

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-continuous-integration-with-azure-devops.md

An Azure DevOps YAML task that copies the generated Inno Setup installer (`Setup.exe`) from its output directory to the `$(build.artifactstagingdirectory)`, preparing it for artifact publishing.

```yaml
- powershell: 'copy Output/Setup.exe $(build.artifactstagingdirectory)'
  displayName: '複製安裝檔'
```

--------------------------------

### Configure Inno Setup Source Files from Build Output

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-continuous-integration-with-azure-devops.md

Specifies the source paths for files to be included in the Inno Setup installer, pointing to the build output directory (`dist`) from the CI process. It includes the main executable and other application files.

```ini
[Files]
Source: "dist\{#MyAppExeName}"; DestDir: "{app}"; Flags: ignoreversion
Source: "dist\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
```

--------------------------------

### Load RxJS from CDN in HTML

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/mastering-rxjs-02-environment-prepare.md

This HTML snippet demonstrates how to include RxJS directly in a web page using a CDN link. It features a JavaScript block that uses `rxjs.fromEvent` to capture mouse clicks, applies `filter` and `map` operators to process the events, and then logs the resulting coordinates to the console. This method offers a quick way to get started with RxJS without a build system.

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>RxJS Practice</title>
  </head>
  <body>
    <script src="https://unpkg.com/@reactivex/rxjs@6.0.0/dist/global/rxjs.umd.js"></script>
    <script>
      rxjs
        .fromEvent(document, 'click')
        .pipe(
          rxjs.operators.filter((_, index) => index % 2 === 0),
          rxjs.operators.map((event) => ({ x: event.x, y: event.y }))
        )
        .subscribe((position) => {
          console.log(`x: ${position.x}, y: ${position.y}`);
        });
    </script>
  </body>
</html>
```

--------------------------------

### Install Parcel and RxJS via npm

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/mastering-rxjs-02-environment-prepare.md

These shell commands outline the initial steps for setting up a modern RxJS development environment using Parcel and npm. It covers installing the Parcel CLI globally, initializing a new npm project, and adding RxJS as a project dependency. This prepares the project for modular development with ES6 imports and TypeScript.

```Shell
npm install -g parcel-bundler
npm init
npm install --save rxjs
```

--------------------------------

### Initial HTML Form Structure

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/front-end-intro-js.md

A basic HTML form structure without any Intro.js specific attributes. This serves as the starting point before integrating the guided tour functionality.

```HTML
<div>
  <span>姓名</span>
  <input type="text">
</div>

<div>
  <span>Email</span>
  <input type="text">
</div>

<div>
  <input type="button" value="送出">
</div>
```

--------------------------------

### Time-Based Observables and Operators in Rx.NET

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Examples of `Observable.Timer` and `Observable.Interval` for creating time-based sequences. Also demonstrates using `TimeSpan` with operators like `Delay` for improved readability and type safety when dealing with time parameters.

```csharp
Observable
    .Timer(TimeSpan.FromSeconds(1.5), TimeSpan.FromSeconds(0.5))
    .Take(5)
    .Subscribe(Console.WriteLine);
```

```csharp
Observable
    .Return("Mike")
    .Delay(TimeSpan.FromSeconds(1))
    .Subscribe(Console.WriteLine);
```

--------------------------------

### Install Inno Setup via Chocolatey in Azure DevOps Pipeline

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-continuous-integration-with-azure-devops.md

An Azure DevOps YAML task that uses the Chocolatey command to install Inno Setup on the build agent, making it available for creating installers within the CI pipeline.

```yaml
- task: gep13.chocolatey-azuredevops.chocolatey-azuredevops.ChocolateyCommand@0
  displayName: '安裝 Inno Setup'
  inputs:
    command: install
    installPackageId: innosetup
```

--------------------------------

### HTML for Parcel with TypeScript Entry Point

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/mastering-rxjs-02-environment-prepare.md

This HTML file serves as the entry point for a Parcel-based RxJS application. It includes a `<script>` tag that directly references a TypeScript file (`./index.ts`), allowing Parcel to automatically transpile and bundle the TypeScript code into executable JavaScript. This setup simplifies the development workflow by abstracting away manual compilation steps.

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>RxJS Practice</title>
  </head>
  <body>
    <script src="./index.ts"></script>
  </body>
</html>
```

--------------------------------

### Inno Setup Registry Section Configuration

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-environment-path-registry-by-code.md

Defines the structure and parameters for configuring registry entries within an Inno Setup script. This section allows installers to add, modify, or delete registry keys and values during installation.

```APIDOC
[Registry]
Root: <RootKey>; Subkey: "<SubkeyPath>"; ValueType: <DataType>; ValueName: "<ValueName>"; ValueData: "<ValueContent>"

Parameters:
  Root: Specifies the root registry key.
    - HKLM: HKEY_LOCAL_MACHINE
    - HKCU: HKEY_CURRENT_USER
    - HKCR: HKEY_CLASSES_ROOT
    - HKU: HKEY_USERS
    - HKCC: HKEY_CURRENT_CONFIG
    - HKA: HKLM if installed as administrator, otherwise HKCU.
  Subkey: The path to the subkey under the specified Root.
  ValueType: The data type of the registry value.
    - string: String value.
    - expandsz: Expandable string value (contains environment variables).
    - (and others not explicitly listed but implied by Inno Setup documentation, e.g., dword, binary)
  ValueName: The name of the registry value.
  ValueData: The content or data for the registry value.
  Check: (Optional) A Pascal script function that returns true to execute this entry, false otherwise.

Special Variables:
  {app}: Represents the application's installation directory.
  {olddata}: Represents the existing data of the specified ValueName.
```

--------------------------------

### Pascal Function to Check Path Duplicates in Inno Setup

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-environment-path-registry-by-code.md

This Pascal function, designed for Inno Setup's `[Code]` section, checks if a given path already exists in the system's `Path` environment variable. It queries the `HKEY_LOCAL_MACHINE` Path, expands the input parameter, and performs a case-insensitive check to prevent duplicate entries.

```Pascal
[Code]
function NeedsAddPath(Param: string): boolean;
var
  OrigPath: string;
  ParamExpanded: string;
begin
  ParamExpanded := ExpandConstant(Param);
  if not RegQueryStringValue(HKEY_LOCAL_MACHINE,
    'SYSTEM\CurrentControlSet\Control\Session Manager\Environment',
    'Path', OrigPath)
  then begin
    Result := True;
    exit;
  end;
  Result := Pos(';' + UpperCase(ParamExpanded) + ';', ';' + UpperCase(OrigPath) + ';') = 0;  
  if Result = True then
     Result := Pos(';' + UpperCase(ParamExpanded) + '\;', ';' + UpperCase(OrigPath) + ';') = 0; 
end;
```

--------------------------------

### Initialize a Schematics Project with Sample Files

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/schematics-workshop-02-getting-started-cli.md

Uses the Schematics CLI to create a new Schematics project that includes some basic example files, useful for understanding common patterns and functionalities.

```shell
generate-post schematic --name=generate-post-workshop-with-samples
```

--------------------------------

### Add Application Path to Environment Variable in Inno Setup

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-environment-path-registry-by-code.md

This Inno Setup Registry entry adds the application's installation path (`{app}`) to the user's `Path` environment variable. It appends the new path to the existing `Path` value (`{olddata}`). This simple approach does not check for duplicate entries.

```Inno Setup
[Registry]
Root: HKCU; Subkey: "Environment"; ValueType: expandsz; ValueName: "Path"; ValueData: "{olddata};{app}"
```

--------------------------------

### Subscribing to an Observable with Callbacks

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Shows how to subscribe to an Rx.NET Observable, providing `OnNext`, `OnError`, and `OnCompleted` callback functions. Callbacks must be in order, and `OnNext` is the only mandatory one.

```csharp
var subscription = source
    .Subscribe(
        data => { Console.WriteLine(data.Name); }, // OnNext callback
        error => { Console.WriteLine("Error"); }, // OnError callback
        () => { Console.WriteLine("Complete"); }
    );
```

--------------------------------

### Example of Babel-Compiled React JavaScript Output

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-1-hello-world.md

This snippet illustrates the transformation of JSX into standard JavaScript by Babel. The original `<h1>Hello, world!</h1>` JSX is converted into `React.createElement('h1', null, 'Hello, world!')`. This pre-compiled output can be directly consumed by browsers, removing the dependency on an in-browser Babel compiler.

```JavaScript
ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('example'));
```

--------------------------------

### Configure Inno Setup Language Files for CI

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-continuous-integration-with-azure-devops.md

Adjusts the paths for language files within the Inno Setup (.iss) script to ensure they are correctly referenced in a CI environment, especially when custom language files are version-controlled.

```ini
[Languages]
Name: "english"; MessagesFile: "Langs\Default.isl"
Name: "chinesetraditional"; MessagesFile: "Langs\ChineseTraditional.isl"
```

--------------------------------

### Install Angular Schematics CLI Globally

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/schematics-workshop-02-getting-started-cli.md

Installs the `@angular-devkit/schematics-cli` package globally, providing the `generate-post` (or `schematics`) command-line tool for creating and managing Schematics.

```shell
npm install -g @angular-devkit/generate-post-cli
```

--------------------------------

### Creating Custom Cold Observables with Observable.Create

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Explains how to create a custom cold Observable using `Observable.Create`. It demonstrates emitting values and completing, and highlights the requirement to return a disposable action for cleanup upon unsubscription, which is mandatory in C#.

```csharp
Observable
    .Create<int>(observer =>
    {
        observer.OnNext(1);
        observer.OnNext(2);
        observer.OnCompleted();
        return Disposable.Empty;
    });
```

```csharp
var source = Observable
    .Create<int>(observer =>
    {
        observer.OnNext(1);
        observer.OnNext(2);
        return () => { Console.WriteLine("Unsubscribe"); };
    });
    
var subscription = source
    .Subscribe(result => Console.WriteLine(result));

subscription.Dispose();

// 1
// 2
// Unsubscribe
```

--------------------------------

### Install QuestPDF Library using Package Managers

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/introduction-quest-pdf.md

Instructions for installing the QuestPDF NuGet package using different .NET package management tools. This includes commands for NuGet Package Manager Console, .NET CLI, and a direct reference in the .csproj file.

```sh
// Package Manager
Install-Package QuestPDF

// .NET CLI
dotnet add package QuestPDF
```

```xml
// Package reference in .csproj file
<PackageReference Include="QuestPDF" Version="2022.12.1" />
```

--------------------------------

### Install Package Control for Sublime Text 3

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-4-ide-3-sublime-text-hightlight.md

This Python script downloads and installs Package Control, a package manager for Sublime Text 3. It fetches the package from the official URL, verifies its SHA256 hash for integrity, and then writes it to the Sublime Text installed packages directory.

```Python
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
```

--------------------------------

### Creating an Observable with Observable.Return

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Demonstrates `Observable.Return`, which creates an Observable that emits a single item and then completes, similar to RxJS's `of` operator. It's useful for creating simple, synchronous observables.

```csharp
Observable
    .Return(1)
    .Subscribe(Console.WriteLine);
```

--------------------------------

### Install OpenFeature SDKs for Node.js and Web Projects

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/open-feature-api-demo.md

Installs the necessary OpenFeature SDK packages using npm. The `@openfeature/server-sdk` is for backend Node.js applications, while `@openfeature/web-sdk` is for frontend browser-based projects.

```bash
npm install --save @openfeature/server-sdk
```

```bash
npm install --save @openfeature/web-sdk
```

--------------------------------

### Initialize and start a nanospinner

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/node-packages-to-create-beauty-cli.md

This snippet demonstrates how to create a new spinner instance with a specified message and immediately start its animation. It's used to visually indicate that a background process has begun.

```typescript
const spinner = nanospinner.createSpinner('Processing').start();
```

--------------------------------

### Install rxjs-spy Package

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/rxjs-debugging-with-rxjs-spy.md

Instructions for installing the `rxjs-spy` library as a development dependency using npm, a standard practice for front-end projects.

```Shell
npm install --save-dev rxjs-spy
```

--------------------------------

### Creating an Observable from .NET Events

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Shows how to use `Observable.FromEventPattern` to convert a standard .NET event into an Observable, allowing Reactive Extensions to process event streams. This is particularly useful when integrating with existing event-driven libraries.

```csharp
private event EventHandler<int> MyEvent;

public void MyFunc()
{
    var source = Observable.FromEventPattern<int>(
        addHandler => MyEvent += addHandler,
        removeHandler => MyEvent -= removeHandler);

    var subscription = source
        .Select(data => data.EventArgs)
        .Filter(result => result > 0)
        .Subscribe(Console.WriteLine);

    subscription.Dispose();
}
```

--------------------------------

### Install Angular Universal Express Engine

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/static-site-generator-using-angular-universal-prerender.md

Command to add the Angular Universal Express engine to an Angular project. This single command simplifies the setup for server-side rendering (SSR) by automatically configuring the necessary files and dependencies.

```bash
ng add @nguniversal/express-engine
```

--------------------------------

### Install TestStack.White via NuGet

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/ui-testing-automation-with-stack-white.md

Installs the TestStack.White NuGet package into the project, providing necessary libraries for Windows UI automation testing.

```PowerShell
install-package TestStack.White
```

--------------------------------

### Chaining Rx.NET Operators

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Demonstrates how Rx.NET operators are chained using dot notation, similar to LINQ, unlike RxJS's `pipe()` method. Each operator is an extension method on `IObservable`.

```csharp
var subscription = source
    .Where(user => user.Age >= 18)
    .Select(data => data.Name)
    .Subscribe(data => { Console.WriteLine(data.Name) });
```

--------------------------------

### Angular Signals Pagination: Complete Component Implementation

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-signals-example-pagination.md

Presents the full TypeScript implementation of an Angular pagination component using Signals. This comprehensive example showcases how `signal`, `computed`, `@Input`, and `@Output` work together to create a reactive and maintainable pagination solution. It includes `ngOnInit` for initial state setup.

```typescript
export class PaginationComponent implements OnInit {
  @Input() page = 1;
  @Input() pageCount = 1;

  @Output() pageChange = new EventEmitter<number>();

  // 目前頁碼
  currentPage = signal(1);

  // 上一頁頁碼
  previousPage = computed(() => {
    // 檢查頁碼是否大於 1
    return this.currentPage() > 1 
      ? this.currentPage() - 1 
      : this.currentPage();
  })

  // 下一頁頁碼
  nextPage = computed(() => {
    // 檢查頁碼是否小於總頁數
    return this.currentPage() < this.pageCount
      ? this.currentPage() + 1
      : this.currentPage()
  });

  ngOnInit() {
    // 根據 @Input() 初始頁碼狀態
    this.currentPage.set(this.page);
  }

  jumpTo(num: number) {
    // 頁碼不可以小於 1 或大於總頁碼
    if(num < 1 || num > this.pageCount) {
      return;
    }

    // 送出目前頁碼變更的訊號
    this.currentPage.set(num);

    // 觸發事件
    this.pageChange.emit(num);
  }

  goPrevious() {
    this.jumpTo(this.currentPage() - 1);
  }

  goNext() {
    this.jumpTo(this.currentPage() + 1);
  }
}
```

--------------------------------

### Install Node.js Server Dependencies

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/static-site-generator-using-angular-universal-prerender.md

Installs development dependencies required for setting up a local Node.js server. This includes `ts-node` for executing TypeScript files directly, `connect` for middleware, and `serve-static` for efficiently serving static files.

```shell
npm i -D ts-node connect serve-static @types/node @types/connect @types/serve-static
```

--------------------------------

### Basic APP_INITIALIZER Configuration in Angular

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/mastering-angular-19-app-initializer.md

Demonstrates the fundamental setup of `APP_INITIALIZER` in an Angular `@NgModule` to perform asynchronous initialization tasks, such as fetching data from an API, before the application starts. It highlights the use of `useFactory` and `deps` for dependency injection and the requirement for a Promise-returning function.

```TypeScript
export function initData(httpClient: HttpClient) {
  // 假設有個 API 包含了基本的設定
  return () => httpClient.get('https://jsonplaceholder.typicode.com/todos/').toPromise();
}
```

```TypeScript
@NgModule({
  ...,
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initData,
      deps: [HttpClient],
      multi: true
    }
  ]
})
export class AppModule {}
```

--------------------------------

### Working with Hot Observables (Subjects) in Rx.NET

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Illustrates the instantiation of `Subject`, `BehaviorSubject`, and `ReplaySubject` in Rx.NET, emphasizing the need for type specification due to C#'s strong typing. Also shows how to emit events using `OnNext`, `OnError`, and `OnCompleted`.

```csharp
var subject = new Subject<int>();
var behaviorSubject = new BehaviorSubject<int>("test");
var replaySubject = new ReplaySubject<int>(1);
```

```csharp
var subject = new Subject<int>();
subject.OnNext(1);
subject.OnNext(2);
subject.OnNext(3);

subject.OnError(new Exception("Error"));

subject.OnCompleted();
```

--------------------------------

### Installing Angular CLI Next for Preview Features

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-14-standalone-components-directives-pipe-preview.md

These shell commands are used to install the `@next` version of the Angular CLI globally and then create a new Angular project. This step is crucial for accessing and experimenting with preview features like Standalone Components in Angular 14 RC.

```Shell
npm i -g @angular/cli@next
ng new ng-standalone-preview
```

--------------------------------

### Serve React Application with http-server

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-1-hello-world.md

This command initiates a local HTTP server using `http-server` to serve your React application. Specifying a `[path]` allows the server to root itself in your project directory, enabling proper loading of resources and avoiding issues that can arise from opening HTML files directly via the `file:///` protocol.

```Shell
http-server [path]
```

--------------------------------

### Add Angular Material 6 to an Angular Project

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-35-upgrade-to-6.md

This command uses Angular Schematics to automatically add Angular Material 6 to an existing Angular project. It handles multiple setup steps including package installation, theme configuration, font imports, and animation module setup in one go.

```shell
ng add @angular/material
```

--------------------------------

### Creating Nested Elements Using JSX

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-8-jsx-1.md

Demonstrates the improved readability and conciseness of creating nested React elements using JSX syntax. This example achieves the same result as the `React.createElement` nested example but with a syntax that closely resembles standard HTML.

```javascript
var NestedElementInJSX = 
    <div>
        <h1 className="heading">Test</h1>
    </div>;
ReactDOM.render(
    NestedElementInJSX, 
    document.getElementById("content"));
```

--------------------------------

### Initialize a Blank Schematics Project

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/schematics-workshop-02-getting-started-cli.md

Uses the Schematics CLI to create a new, empty Schematics project with a specified name. This command sets up the basic project structure without any sample files.

```shell
generate-post blank --name=generate-post-workshop
```

--------------------------------

### Basic React HTML Structure with In-Browser Babel

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-1-hello-world.md

This HTML code defines the foundational structure for a React application. It includes the necessary React and ReactDOM libraries, along with Babel's browser-based compiler to process JSX directly in the browser. A `div` element is designated as the mount point for React components.

```HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>

  </body>
</html>
```

--------------------------------

### Basic Angular Material Expansion Panel Usage

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-21-expansion-panels.md

Demonstrates the fundamental structure of an Angular Material expansion panel, including the required `mat-expansion-panel-header` for displaying the panel's title.

```HTML
<mat-expansion-panel>
  <mat-expansion-panel-header>
    收件夾
  </mat-expansion-panel-header>
  <!-- 收件夾內容 -->
  ...
</mat-expansion-panel>
<mat-expansion-panel>
  <mat-expansion-panel-header>
    聯絡人列表   
  </mat-expansion-panel-header>
  <!-- 聯絡人列表內容 -->
  ...
</mat-expansion-panel>
```

--------------------------------

### Execute Inno Setup Compiler in Azure DevOps Pipeline

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-continuous-integration-with-azure-devops.md

An Azure DevOps YAML task that runs the Inno Setup compiler (`iscc.exe`) using PowerShell to build the installer based on the specified `.iss` script during the CI process.

```yaml
- powershell: 'iscc.exe installation.iss'
  displayName: '打包安裝檔'
```

--------------------------------

### Activate Intro.js Hints

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/front-end-intro-js.md

JavaScript code to activate and display hints defined using the `data-hint` attribute on HTML elements. Calling `introJs().addHints()` will render the hint points on the page.

```JavaScript
introJs().addHints();
```

--------------------------------

### Conditionally Add Application Path to Environment Variable in Inno Setup

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-environment-path-registry-by-code.md

This Inno Setup Registry entry conditionally adds the application's installation path to the user's `Path` environment variable. It uses the `Check` parameter to call a custom Pascal function (`NeedsAddPath`) to ensure the path is only added if it doesn't already exist, preventing duplicates.

```Inno Setup
[Registry]
Root: HKCU; Subkey: "Environment"; ValueType: expandsz; ValueName: "Path"; ValueData: "{olddata};{app}"; Check: NeedsAddPath(ExpandConstant('{app}'))
```

--------------------------------

### Generate Angular Material Dashboard Layout with Schematics

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-35-upgrade-to-6.md

This command generates a dashboard layout featuring various Angular Material components such as Card, Grid List, Button, and Menu. The `--name` flag allows customization of the component's name, providing a quick starting point for dashboards.

```shell
ng generate @angular/material:material-dashboard --name dashboard
```

--------------------------------

### HTML Structure for React with Pre-Compiled JavaScript

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-1-hello-world.md

This final HTML structure integrates the pre-compiled React JavaScript file (`build/helloworld.js`). By using offline compilation, the need for the in-browser Babel compiler and the `type="text/babel"` attribute is eliminated, resulting in faster page loads and a more optimized production environment.

```HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <!-- 原本要載入的Babel編譯器可以省略了 -->
  </head>
  <body>
    <div id="example"></div>
    <!-- 直接使用babel編譯過的js檔，也不需要type="text/babel"了 -->
    <script src="build/helloworld.js"></script>
  </body>
</html>
```

--------------------------------

### Install or Upgrade Angular CLI to Version 6

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-35-upgrade-to-6.md

This command globally installs or upgrades the Angular CLI to version 6. It is a prerequisite for creating Angular 6 projects and utilizing new features like schematics, ensuring you have the latest tools for development.

```shell
npm i -g @angular/cli
```

--------------------------------

### Compile React JSX Files Offline with Babel CLI

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-1-hello-world.md

This command uses the Babel CLI to pre-compile JSX files from the `src` directory into standard JavaScript, outputting them to the `build` directory. The `--watch` flag ensures continuous compilation upon file changes, eliminating the need for in-browser compilation and improving development workflow and production performance.

```Shell
babel --presets react src --watch --out-dir build
```

--------------------------------

### Separate React JSX Code into External File

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-1-hello-world.md

This JavaScript code represents the core rendering logic for the 'Hello World' application, intended to be placed in an external file (e.g., `src/helloworld.js`). Separating concerns into external files improves code organization and reusability, making the application easier to manage as it grows.

```JavaScript
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById("example")
);
```

--------------------------------

### Create a File Using Tree API in Schematics Rule

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/schematics-workshop-02-getting-started-cli.md

Demonstrates how to use the `tree.create()` method within a Schematics rule to add a new file to the virtual file system. This example creates `hello.txt` with 'world' as its content.

```typescript
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function schematicsWorkshop(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('hello.txt', 'world');

    return tree;
  };
}
```

--------------------------------

### Mounting the root TodoList component to the DOM

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-5-react-basic-and-todolist-scaffold.md

This final snippet uses `ReactDOM.render` to mount the top-level `TodoList` component into the HTML element with the ID 'content'. This action initializes and renders the entire React application on the webpage.

```javascript
ReactDOM.render(
  <TodoList />,
  document.getElementById("content")
);
```

--------------------------------

### HTML Form with Intro.js Step Attributes

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/front-end-intro-js.md

Modified HTML form elements incorporating `data-step` and `data-intro` attributes. These attributes define the order and content of each step in the Intro.js guided tour. A button is also added to trigger the tour.

```HTML
<div>
  <button id="start">
    ?說明
  </button>
</div>

<div data-step="1" data-intro="請先輸入姓名">
  <span>姓名</span>
  <input type="text">
</div>

<div data-step="2" data-intro="再輸入EMail">
  <span>Email</span>
  <input type="text">
</div>

<div data-step="3" data-intro="最後按下送出，就完成註冊囉">
  <input type="button" value="送出">
</div>
```

--------------------------------

### Preventing Angular Material Menu from Overlapping Trigger

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-08-menu.md

This example demonstrates how to use the `[overlapTrigger]='false'` attribute on `<mat-menu>` to ensure that the menu never covers its triggering element, maintaining visibility of the trigger.

```HTML
<mat-menu #messageMenu="matMenu" [overlapTrigger]="false">
  <button mat-menu-item>最新訊息</button>
  <button mat-menu-item>訊息設定</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="messageMenu" #menuTrigger="matMenuTrigger">
  <mat-icon>message</mat-icon>
</button>
```

--------------------------------

### Disposing Rx.NET Subscriptions

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Illustrates how to cancel an Rx.NET subscription by calling the `Dispose()` method on the subscription object, aligning with .NET's object disposal pattern. This is equivalent to `unsubscribe()` in RxJS.

```csharp
var subscription = source.Subscribe(Console.WriteLine);
subscription.Dispose();
```

--------------------------------

### Run Parcel Development Server

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/mastering-rxjs-02-environment-prepare.md

This shell command initiates the Parcel development server for the specified HTML entry point. Parcel automatically bundles all linked assets, including TypeScript files, and provides a local server for live preview and development. This command is essential for running and testing the RxJS application during development.

```Shell
parcel index.html
```

--------------------------------

### Initial ReactDOM.render with inline JSX

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-5-react-basic-and-todolist-scaffold.md

This snippet demonstrates the basic usage of `ReactDOM.render` to mount a simple `<h1>` element directly into the DOM. It shows the initial approach before encapsulating content into reusable components.

```javascript
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById("example")
);
```

--------------------------------

### Using the Where Operator (Filter) in Rx.NET

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Illustrates the `Where` operator in Rx.NET, which filters items emitted by an Observable based on a predicate, similar to the `filter` operator in RxJS and `Where` in LINQ. Only items satisfying the condition are passed through.

```csharp
source.Where(user => user.Age >= 18);
```

--------------------------------

### Creating a basic React component with createClass

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/react-tutorial-5-react-basic-and-todolist-scaffold.md

This snippet defines a `HelloWorld` React component using `React.createClass`. It includes a `render` method that returns a simple `<h1>` element, demonstrating the fundamental structure of a React component and how its visual output is defined.

```javascript
var HelloWorld = React.createClass({
    render: function() {
        return (
            <h1>Hello, world!</h1>
        );
    }
});
```

--------------------------------

### Programmatic Control of Angular Material Menu

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-08-menu.md

This example illustrates how to programmatically open, close, or toggle an Angular Material menu using the `matMenuTrigger` reference. The `toggleMenu()` method is bound to a button's click event.

```HTML
<button mat-raised-button (click)="menuTrigger.toggleMenu()">開啟訊息設定</button>
```

--------------------------------

### Serve Static Assets with Lite-Server for Prerendering

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/static-site-generator-using-angular-universal-prerender.md

Command to start a lightweight development server (lite-server) to serve static assets from the `src` directory. This is a workaround necessary during the prerendering process, as there is no actual server running to provide local files like markdown content via relative paths.

```shell
npx lite-server --baseDir=./src
```

--------------------------------

### Publish Build Artifacts in Azure DevOps Pipeline

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/inno-setup-continuous-integration-with-azure-devops.md

An Azure DevOps YAML task responsible for publishing the contents of the `$(build.artifactstagingdirectory)` as a build artifact, typically named 'drop', making it available for subsequent release pipelines.

```yaml
- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: drop'
  inputs:
    PathtoPublish: '$(build.artifactstagingdirectory)'
  condition: succeededOrFailed()
```

--------------------------------

### Bootstrapping Multiple Angular Root Modules

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/mastering-angular-03-application-start.md

Demonstrates how to launch multiple independent root modules (`AppModule` and `App2Module`) simultaneously from `main.ts` by calling `platformBrowserDynamic().bootstrapModule()` for each module.

```TypeScript
platformBrowserDynamic().bootstrapModule(AppModule)

// 啟動第二個根模組
platformBrowserDynamic().bootstrapModule(App2Module);
```

--------------------------------

### Angular Material Menu Default Positioning Example

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-08-menu.md

This snippet demonstrates an Angular Material menu with its default positioning behavior. The menu's growth direction (xPosition and yPosition) is automatically determined based on available screen space.

```HTML
<div style="text-align:center">
  <button mat-raised-button [matMenuTriggerFor]="positionMenu">開啟訊息設定，這是一條比較長的按鈕，好確認Menu的生長方向</button>
  <mat-menu #positionMenu="matMenu">
    <button mat-menu-item>訊息1</button>
    <button mat-menu-item>訊息2</button>
  </mat-menu>
</div>
```

--------------------------------

### Define Schematics Collection Path in package.json

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/schematics-workshop-02-getting-started-cli.md

Shows the `schematics` property in `package.json` that points to the `collection.json` file, indicating that the project contains Schematics and where to find their definitions.

```json
"generate-post": "./src/collection.json"
```

--------------------------------

### Basic HttpClient Usage in Angular

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-advanced-handle-http-request-with-interceptor.md

Demonstrates a fundamental HTTP GET request using Angular's `HttpClient` to fetch data from a public API and display it in the view. This initial setup highlights the typical scenario before implementing centralized request/response handling.

```typescript
  data$: Observable<any>;

  constructor(private httpClient: HttpClient) {
  }

  ngOnInit() {
    this.data$ = this.httpClient.get('https://jsonplaceholder.typicode.com/posts/1');
  }
```

```html
<pre>
  {{ data$ | async | json }}
</pre>
```

--------------------------------

### Utilize QuestPDF Previewer for Real-time PDF Development

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/introduction-quest-pdf.md

This snippet demonstrates how to set up and use the QuestPDF Previewer tool for efficient PDF development. It includes commands for installing the global .NET tool, running the previewer on default or custom ports, and integrating the `ShowInPreviewer` extension method into C# code to display generated PDF documents in real-time.

```Shell
dotnet tool install QuestPDF.Previewer --global
```

```Shell
questpdf-previewer

questpdf-previewer 12345
```

```C#
using QuestPDF.Previewer;

var data = InvoiceDocumentDataSource.GetInvoiceDetails();
var document = new InvoiceDocument(data);

// 在 Previewer 中顯示產生的 PDF 內容
document.ShowInPreviewer();

// 指定 Port 號
// document.ShowInPreviewer(12345);
```

--------------------------------

### Initialize FullCalendar with Basic Setup

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/front-end-fullcalendar.md

This snippet demonstrates the fundamental steps to set up FullCalendar. It involves adding a `div` element to the HTML and then initializing the calendar on that element using jQuery and the `fullCalendar()` method in JavaScript.

```HTML
<div id="calendar"></div>
```

```JavaScript
$('#calendar').fullCalendar();
```

--------------------------------

### Using the Select Operator (Map) in Rx.NET

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Demonstrates the `Select` operator in Rx.NET, which transforms each item emitted by an Observable, analogous to the `map` operator in RxJS and `Select` in LINQ. It's used for projecting each source element into a new form.

```csharp
source.Select(num => num + 1);
```

--------------------------------

### Implementing Nested Menus in Angular Material

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-08-menu.md

This comprehensive example illustrates how to create multi-level (nested) menus in Angular Material. It shows how to link sub-menus using `matMenuTriggerFor` on menu items, allowing for complex menu hierarchies with icons and disabled states.

```HTML
<button mat-raised-button [matMenuTriggerFor]="positionMenu">巢狀選單demo</button>
<mat-menu #positionMenu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">訊息1</button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu2">訊息2</button>
  <button mat-menu-item>訊息3</button>
</mat-menu>

<mat-menu #subMenu1="matMenu">
  <button mat-menu-item>
    <mat-icon>person</mat-icon>
    訊息 1-1
  </button>
  <button mat-menu-item>
    <mat-icon>favorite</mat-icon>
    訊息 1-2
  </button>
  <button mat-menu-item>
    <mat-icon>thumb_up</mat-icon>
    訊息 1-3
  </button>
</mat-menu>

<mat-menu #subMenu2="matMenu">
  <button mat-menu-item>
    <mat-icon>delete</mat-icon>
    訊息 2-1
  </button>
  <button mat-menu-item disabled>
    <mat-icon>settings</mat-icon>
    訊息 2-2
  </button>
</mat-menu>
```

--------------------------------

### Configure Schematics Definitions in collection.json

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/schematics-workshop-02-getting-started-cli.md

Illustrates the structure of `collection.json`, which defines available schematics within the project. It specifies a schematic's description and the factory function (`index.js#schematicsWorkshop`) that implements its logic.

```json
{
  "$schema": "../node_modules/@angular-devkit/generate-post/collection-schema.json",
  "schematics": {
    "schematics-workshop": {
      "description": "A blank schematic.",
      "factory": "./generate-post-workshop/index#schematicsWorkshop"
    }
  }
}
```

--------------------------------

### Combining Observables with Select and Concat/Merge/Switch

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Explains how Rx.NET handles combination operators like `switchMap`, `mergeMap`, and `concatMap` by first using `Select` to transform items into inner Observables, then applying `Switch`, `Merge`, or `Concat` to flatten them. Rx.NET does not have direct `*Map` operators.

```csharp
Observable
    .Range(1, 3)
    // 先用 Select 換成另一個 Observable
    .Select(value => 
        Observable
            .Return(value)
            .Delay(TimeSpan.FromSeconds(value)))
    // 在用 Switch / Merge / Concat 等組合這些 Observable
    .Concat()
    .Subscribe(Console.WriteLine);
```

--------------------------------

### Using the Do Operator (Tap) for Side Effects in Rx.NET

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/notes-for-rx-net.md

Shows the `Do` operator in Rx.NET, which allows performing side effects for each emitted item, error, or completion without modifying the stream, similar to RxJS's `tap` operator. It's ideal for logging or debugging.

```csharp
source
    .Do(value => Console.WriteLine($"Current: {value}"))
    .Subscribe();
```

--------------------------------

### Generate Angular Material Table Component with Schematics

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-35-upgrade-to-6.md

This command generates a basic Angular Material table component, which is often complex to set up manually. The `--name` flag specifies the component's name, providing a ready-to-use template for displaying tabular data.

```shell
ng generate @angular/material:material-table --name table
```

--------------------------------

### Generate Angular Material Navigation Component with Schematics

Source: https://github.com/wellwind/wellwind.github.io/blob/master/src/assets/blog/angular-material-35-upgrade-to-6.md

This command generates a responsive navigation component, including a toolbar and sidenav, using Angular Material schematics. The `--name` flag specifies the desired name for the generated component, which automatically handles RWD considerations.

```shell
ng generate @angular/material:material-nav --name navigation
```