<commit_before># APEX Nitro Patterns

### 1. Concatenation Hybrid
This pattern consists of concatenating CSS but not JavaScript. It's logical for many projects to merge the stylesheets into a single file, but keeping the functional JavaScript into separate files.

Here is the configuration:

Group | Option | Value
--- | --- | ---
N/A | Mode | advanced
JavaScript | Processor | default
CSS | Language | sass

#### Sass
Because we are using Sass as a CSS Preprocessor, we are able to import files into other files. [See this example](../examples/demo-sass/src/scss) to understand how the `import` works. This mechanism is our concatenation.

In the APEX application, there will be a single point of reference for `#APP_IMAGES#css/app.css`.

#### JavaScript
We are going to create two types of files: public files and private files. The public files are going to be shared across the whole application. The private files are going to be used on a single page only.

**Example:**
```
|-/src/
	|-js
		|-ajax.js
		|-global.js
		|-functions.js
		|-p1.js
		|-p2.js
		|-p3.js
		|-p99.js
```

The only CSS file and the first three JavaScript files can be referenced in the Shared Components - User Interface Attributes:
![](img/pattern-hybrid-1.png)

The page-specific JavaScript files can be references in the appropriate page properties:
![](img/pattern-hybrid-2.png)

--- 

### APEX Nitro and you
Are **YOU** using APEX Nitro differently? 

Please feel free to open a pull request and describe your pattern here, or contact [<NAME>](https://github.com/vincentmorneau) with a brief explanation.<commit_msg>adds examples link to patterns doc<commit_after># APEX Nitro Patterns

### 1. Concatenation Hybrid
This pattern consists of concatenating CSS but not JavaScript. It's logical for many projects to merge the stylesheets into a single file, but keeping the functional JavaScript into separate files.

Here is the configuration:

Group | Option | Value
--- | --- | ---
N/A | Mode | advanced
JavaScript | Processor | default
CSS | Language | sass

#### Sass
Because we are using Sass as a CSS Preprocessor, we are able to import files into other files. [See this example](../examples/demo-sass/src/scss) to understand how the `import` works. This mechanism is our concatenation.

In the APEX application, there will be a single point of reference for `#APP_IMAGES#css/app.css`.

#### JavaScript
We are going to create two types of files: public files and private files. The public files are going to be shared across the whole application. The private files are going to be used on a single page only.

**Example:**
```
|-/src/
	|-js
		|-ajax.js
		|-global.js
		|-functions.js
		|-p1.js
		|-p2.js
		|-p3.js
		|-p99.js
```

The only CSS file and the first three JavaScript files can be referenced in the Shared Components - User Interface Attributes:
![](img/pattern-hybrid-1.png)

The page-specific JavaScript files can be references in the appropriate page properties:
![](img/pattern-hybrid-2.png)

--- 

### Examples
[Head here](../examples) to look at our examples.

--- 

### APEX Nitro and you
Are **YOU** using APEX Nitro differently? 

Please feel free to open a pull request and describe your pattern here, or contact [<NAME>](https://github.com/vincentmorneau) with a brief explanation.
{'fraction_non_alphanumeric': 0.09784260103312063, 'fraction_numerical': 0.004861744150714068, 'mean_word_length': 3.8269794721407626, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '571850', 'n_tokens_mistral': 1001, 'n_tokens_neox': 910, 'n_words': 440}