### Project Setup and Server Commands

Source: https://github.com/krausest/js-framework-benchmark

This snippet outlines essential commands for setting up a project, installing dependencies, creating a new framework directory, and starting the local development server. It ensures the project is ready for benchmarking.

```shell
npm ci
or
npm i
```

```shell
npm run install-local
```

```shell
mkdir /frameworks/keyed/fast
```

```shell
npm start
```

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

### Install Global Dependencies and Start Server

Source: https://github.com/krausest/js-framework-benchmark

Installs top-level dependencies for building frameworks and starts a local web server required for testing framework accessibility.

```bash
npm ci
npm run install-server
npm start
```

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

### Clone and Setup js-framework-benchmark

Source: https://github.com/krausest/js-framework-benchmark

This command sequence clones the js-framework-benchmark repository, checks out a specific tagged release (e.g., chrome100) to a new branch, and then installs project dependencies using npm. It's the initial step to get the benchmark environment ready.

```shell
git clone https://github.com/krausest/js-framework-benchmark.git
cd js-framework-benchmark
git checkout chrome100 -b release
npm ci && npm run install-local
```

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

### Setup and Compile Benchmark Driver

Source: https://github.com/krausest/js-framework-benchmark

Navigates to the benchmark driver directory, installs its dependencies, and compiles the driver code, preparing it for benchmark execution.

```bash
cd ../../..
cd webdriver-ts
npm ci
npm run compile
```

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

### Setup Benchmark Driver

Source: https://github.com/krausest/js-framework-benchmark

Navigate to the benchmark driver's root directory, install its dependencies using 'npm ci', and compile the driver code.

```shell
cd ../../..
cd webdriver-ts
npm ci
npm run compile
```

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

### Project Setup and Opening

Source: https://blog.angular.dev/schematics-an-introduction-dc1dfbc2a2b2

Standard commands to navigate into a newly created project directory, install its npm dependencies, and open the project in a code editor.

```bash
cd my-component
npm install
code .
```

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

### Setup and Run Benchmark Results Generation

Source: https://github.com/krausest/js-framework-benchmark

Installs necessary dependencies and navigates to the correct directories to prepare for generating or viewing benchmark results. It involves installing packages via npm ci and changing directories to the 'webdriver-ts' location.

```bash
cd ..
cd webdriver-ts-results
npm ci
cd ..
cd webdriver-ts
```

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

### Project Setup and Navigation

Source: https://blog.angular.dev/schematics-an-introduction-dc1dfbc2a2b2

After creating the schematic, navigate into the new project directory, install npm dependencies, and open the project in your preferred code editor.

```shell
cd my-component
npm install
code . # or atom, webstorm, vi, ...
```

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

### Angular CLI Setup and Project Commands

Source: https://github.com/angular/angular-cli

Installs the Angular CLI globally and provides essential commands for creating a new Angular workspace and serving the application.

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

```shell
ng new [PROJECT NAME]
```

```shell
cd [PROJECT NAME]
```

```shell
ng serve
```

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

### Verify Environment Setup (Node, npm, Java)

Source: https://github.com/krausest/js-framework-benchmark

Checks the versions of Node.js, npm, and Java (JDK) to ensure they meet the project's requirements. This step is crucial before proceeding with framework installations.

```shell
npm
npm -version
8.5.0
> node --version
v16.14.2
> echo %JAVA_HOME% / echo $JAVA_HOME
> java -version
java version "1.8.0_131" ...
> javac -version
javac 1.8.0_131
```

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

### Install ng-zorro-antd (Save)

Source: https://ng.ant.design/docs/getting-started/en

Installs the ng-zorro-antd library as a project dependency using npm or yarn. This is an alternative to using `ng add` if manual installation is preferred.

```shell
$ npm install ng-zorro-antd --save
# Or if you use yarn
$ yarn add ng-zorro-antd
```

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

### NG-Zorro Development Setup

Source: https://github.com/NG-ZORRO/ng-zorro-antd

Steps to clone the NG-Zorro Ant Design repository, install dependencies, and start the development server. This process typically involves cloning the project, navigating into the directory, installing Node.js packages, and running a start script.

```shell
$ git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run start
```

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

### Install Angular CLI

Source: https://ng.ant.design/docs/getting-started/en

Installs the Angular CLI globally using npm or yarn. This tool is essential for creating and managing Angular projects.

```shell
$ npm install -g @angular/cli
# Or if you use yarn
$ yarn global add @angular/cli
```

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

### Create New Angular Project

Source: https://ng.ant.design/docs/getting-started/en

Creates a new Angular project folder named 'PROJECT-NAME' in the current directory. It automatically installs necessary dependencies.

```shell
$ ng new PROJECT-NAME
```

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

### NG-ZORRO Navigation Links

Source: https://ng.ant.design/docs/customize-theme/en

Provides links to key sections of the NG-ZORRO documentation, including introduction, components, experimental features, and getting started guides in both English and Chinese.

```APIDOC
Navigation:
  - Docs: /docs/introduce/en
  - Components: /components/overview/en
  - Experimental: /experimental/pipes/en
  - Getting Started (EN): /docs/getting-started/en
  - Getting Started (ZH): /docs/getting-started/zh
  - Schematics (EN): /docs/schematics/en
  - Schematics (ZH): /docs/schematics/zh
  - Internationalization (EN): /docs/i18n/en
  - Internationalization (ZH): /docs/i18n/zh
  - Theme Customization (EN): /docs/customize-theme/en
  - Theme Customization (ZH): /docs/customize-theme/zh
  - Dynamic Theme (Experimental) (EN): /docs/customize-theme-variable/en
  - Dynamic Theme (Experimental) (ZH): /docs/customize-theme-variable/zh
  - Global Configuration (EN): /docs/global-config/en
  - Global Configuration (ZH): /docs/global-config/zh
  - Animations Switch (EN): /docs/animations/en
  - Animations Switch (ZH): /docs/animations/zh
  - Direction (EN): /docs/direction/en
  - Direction (ZH): /docs/direction/zh
  - Resources (EN): /docs/recommendation/en
  - Resources (ZH): /docs/recommendation/zh
  - FAQ (EN): /docs/faq/en
  - FAQ (ZH): /docs/faq/zh
  - How to Contribute (EN): /docs/contributing/en
  - How to Contribute (ZH): /docs/contributing/zh
  - Change Log (EN): /docs/changelog/en
  - Change Log (ZH): /docs/changelog/zh
  - v20 Migration Guide (EN): /docs/migration-v20/en
  - v20 Migration Guide (ZH): /docs/migration-v20/zh
  - Join us (EN): /docs/join/en
  - Join us (ZH): /docs/join/zh
```

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

### Setting up a New Framework Implementation

Source: https://github.com/krausest/js-framework-benchmark

Steps to copy an existing framework's structure (like vanillajs) to create a new implementation directory, followed by installing dependencies and building the production version.

```shell
cd ../frameworks/keyed
cp -r vanillajs super-vanillajs
cd super-vanillajs

npm install
npm run build-prod
```

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

### Development Setup Commands

Source: https://github.com/NG-ZORRO/ng-zorro-antd

Commands to clone the NG-Zorro-Antd repository, navigate into the project directory, install necessary npm packages, and start the development server. This process allows you to run the project locally and see changes in real-time.

```shell
git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
cd ng-zorro-antd
npm install
npm run start
```

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

### Copy and Setup VanillaJS Framework

Source: https://github.com/krausest/js-framework-benchmark

Demonstrates copying the 'vanillajs' framework to 'super-vanillajs' and navigating into the new directory. This is a common step for creating new framework implementations.

```shell
cd ../frameworks/keyed
cp -r vanillajs super-vanillajs
cd super-vanillajs
```

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

### Set Up Framework Files and Dependencies

Source: https://github.com/krausest/js-framework-benchmark

Configures the new framework directory by setting up linters, dependencies like '@microsoft/fast-element', and creating the main index.html file. It also specifies the required global CSS link.

```shell
touch /frameworks/keyed/fast/index.html
```

```html
<link href="/css/currentStyle.css" rel="stylesheet" />
```

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

### Angular Location Service Usage Example

Source: https://angular.dev/api/common/Location

This example demonstrates how to import and use the Location service and PathLocationStrategy within an Angular component. It shows the typical setup for dependency injection.

```typescript
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'path-location',
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
  template: `...`
})
export class PathLocationComponent {
  constructor(private location: Location) {}

  // Example usage of Location service methods
  getCurrentPath(): string {
    return this.location.path();
  }

  navigateToHome(): void {
    this.location.go('/');
  }
}
```

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

### CSS align-items Values Examples

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Demonstrates common values for the CSS `align-items` property, including stretch, center, start, and end. These examples show how items are aligned within their container on the cross axis.

```css
align-items: stretch;
```

```css
align-items: center;
```

```css
align-items: start;
```

```css
align-items: end;
```

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

### Build and Serve Single Framework

Source: https://github.com/krausest/js-framework-benchmark

Navigates to a framework's directory, installs its specific dependencies, builds it for production, and prepares it for serving via the local web server.

```bash
cd frameworks/keyed/vanillajs
npm ci
npm run build-prod
```

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

### Serve Angular Project

Source: https://ng.ant.design/docs/getting-started/en

Starts the development server and opens the application in the default browser. The --port 0 flag allows the CLI to pick an available port, and --open automatically launches the browser.

```shell
$ ng serve --port 0 --open
```

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

### Install Local Web Server

Source: https://github.com/krausest/js-framework-benchmark

Installs the necessary components for the local web server used to serve benchmark results and applications. This prepares the server environment.

```shell
npm run install-server
```

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

### Build Angular Project for Production

Source: https://ng.ant.design/docs/getting-started/en

Builds the Angular application for production deployment. The output is typically placed in the 'dist' directory.

```shell
$ ng build --prod
```

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

### Install Dependencies Safely

Source: https://github.com/krausest/js-framework-benchmark

Security advice regarding package installation. Commands like `npm ci` and `npm install` can execute arbitrary commands and should only be run for trusted packages. It's recommended to run these on a dedicated server.

```bash
npm ci
npm install
```

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

### npm Build and Development Commands

Source: https://github.com/krausest/js-framework-benchmark

These commands are essential for setting up and running your contribution. 'npm install' fetches project dependencies, 'npm run build-prod' creates a production-ready build, and 'npm run dev' generates a development build for easier iteration.

```bash
npm install
```

```bash
npm run build-prod
```

```bash
npm run dev
```

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

### Import All ng-zorro-antd Styles (style.css)

Source: https://ng.ant.design/docs/getting-started/en

Imports all ng-zorro-antd component styles into the main stylesheet. This method is suitable for projects using CSS.

```css
@import "~ng-zorro-antd/ng-zorro-antd.min.css";
```

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

### Multiple Frameworks and Custom Options

Source: https://github.com/krausest/js-framework-benchmark

This example illustrates how to specify multiple frameworks (e.g., 'react:redux') and includes optional configurations like 'customURL' for specifying a different build output directory and 'useShadowRoot' to indicate DOM structure.

```json
{
  "js-framework-benchmark": {
    "customURL": "/target/web/stage",
    "useShadowRoot": true
  }
}
```

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

### Install Dependencies

Source: https://github.com/krausest/js-framework-benchmark

Installs project dependencies using npm ci and then runs a local installation script. This step ensures all necessary packages and local configurations are set up correctly.

```shell
npm ci && npm run install-local
```

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

### Import All ng-zorro-antd Styles (style.less)

Source: https://ng.ant.design/docs/getting-started/en

Imports all ng-zorro-antd component styles using LESS. This is the recommended approach for projects utilizing LESS for styling.

```less
@import "~ng-zorro-antd/ng-zorro-antd.less";
```

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

### Install JS Framework Benchmark Dependencies

Source: https://github.com/krausest/js-framework-benchmark

Navigates to the benchmark directories and installs project dependencies using npm ci. This is a prerequisite for running the benchmarks.

```shell
cd ..
cd webdriver-ts-results
npm ci
cd ..
cd webdriver-ts
```

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

### Serve Benchmark Application

Source: https://github.com/krausest/js-framework-benchmark

Starts the benchmark server from the root directory and provides the URL to access the newly added framework's benchmark page. It emphasizes running the server from the root to access global CSS.

```shell
npm start
http://localhost:8080/frameworks/keyed/fast/index.html
```

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

### Import All ng-zorro-antd Styles (angular.json)

Source: https://ng.ant.design/docs/getting-started/en

Configures the project to include all ng-zorro-antd component styles by adding the pre-built CSS file to the styles array in angular.json.

```json
{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}
```

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

### Build and Run Project

Source: https://github.com/krausest/js-framework-benchmark

Commands to build the project for production and run the local server to view the report. The server must be running to access the report page.

```shell
npm run build-prod
http://localhost:8080/webdriver-ts-results/table.html
```

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

### CSS justify-content Examples

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Demonstrates common `justify-content` values like start, center, space-between, space-around, and space-evenly in CSS.

```css
justify-content: start;
```

```css
justify-content: center;
```

```css
justify-content: space-between;
```

```css
justify-content: space-around;
```

```css
justify-content: space-evenly;
```

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

### Hotjar Tracking Script

Source: https://ng.ant.design/docs/getting-started/en

This JavaScript snippet integrates the Hotjar tracking code into the application. It's used for collecting user feedback and analyzing website usage patterns.

```javascript
!function(t,h,e,j,s,n){t.hj=t.hj||function(){(t.hj.q=t.hj.q||[]).push(arguments)},t._hjSettings={hjid:792689,hjsv:6},s=h.getElementsByTagName("head")[0],(n=h.createElement("script")).async=1,n.src="https://static.hotjar.com/c/hotjar-"+t._hjSettings.hjid+".js?sv="+t._hjSettings.hjsv,s.appendChild(n)}(window,document)
```

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

### Development Server and Build Configuration

Source: https://github.com/krausest/js-framework-benchmark

Configuration for setting up a development environment. It includes commands for cleaning a build directory ('dist') and using Webpack to watch files for changes, recompiling the project in development mode. It also shows how to start a local server.

```shell
"dev": "rimraf dist && webpack --config webpack.config.js --watch --mode=development"
```

```shell
npm start
```

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

### Nginx Upload Module Integration

Source: https://github.com/blueimp/jQuery-File-Upload/wiki

Guides for uploading files to Nginx using the nginx upload module. This covers basic integration and specific setups with PHP handlers.

```APIDOC
Nginx Upload Module:
  Description: Enables file uploads directly to Nginx.
  Related: Uploading to nginx using the nginx upload module, Uploading-to-nginx-using-the-nginx-upload-module-with-php_handler
```

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

### Install Project Dependencies

Source: https://github.com/krausest/js-framework-benchmark

Installs all root-level dependencies required for the js-framework-benchmark. This involves navigating to the project directory and using npm to install packages.

```shell
cd js-framework-benchmark/
npm ci
npm run install-local
```

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

### Install Dependencies

Source: https://github.com/krausest/js-framework-benchmark

Command to install project dependencies using npm. This is typically run after cloning a repository or setting up a new project.

```shell
npm install
```

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

### Add ng-zorro-antd to Project

Source: https://ng.ant.design/docs/getting-started/en

Navigates into the project directory and adds the ng-zorro-antd library using Angular schematics. This command initializes project configuration, including i18n files and stylesheets.

```shell
$ cd PROJECT-NAME
$ ng add ng-zorro-antd
```