### Running Performance Benchmarks with Yarn

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/BENCHMARKS.md

This snippet provides instructions to set up and run the performance benchmarks for the project. It first installs project dependencies using `yarn install` and then executes the benchmark script with `yarn bench`.

```bash
# In root directory
yarn install
yarn bench
```

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

### Running Standard Elm UI Unit Tests with Yarn/NPM

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/RUNNING_TESTS.md

This snippet demonstrates how to execute the standard Elm UI unit tests located in `tests/suite/`. It requires `elm-test` and can be run using either `yarn` or `npm` from the root `elm-ui` directory. `yarn install` or `npm install` is a prerequisite to set up dependencies.

```bash
# in the root elm-ui directory
yarn install   # or npm install
yarn run test  # or npm run test
```

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

### Creating a Basic Layout with Elm UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/README.md

This Elm UI example demonstrates how to create a simple row layout containing styled elements. It utilizes `Element` functions like `row`, `el`, `text`, and various attributes for background color, font color, border radius, and padding. The `main` function renders the `myRowOfStuff` element, showcasing basic UI composition and styling.

```Elm
module Main exposing (..)

import Element exposing (Element, el, text, row, alignRight, fill, width, rgb255, spacing, centerY, padding)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font


main = 
    Element.layout []
        myRowOfStuff

myRowOfStuff : Element msg
myRowOfStuff =
    row [ width fill, centerY, spacing 30 ]
        [ myElement
        , myElement
        , el [ alignRight ] myElement
        ]


myElement : Element msg
myElement =
    el
        [ Background.color (rgb255 240 0 245)
        , Font.color (rgb255 255 255 255)
        , Border.rounded 3
        , padding 30
        ]
        (text "stylish!")
```

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

### Applying Background Blend Mode in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This snippet illustrates a potential `Background.blend` function that would set a color mode and background opacity. The example shows blending with 0.5 opacity and a specified `color`.

```Elm
Background.blend 0.5 color
```

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

### Getting Element Bounding Box and Padding in JavaScript

Source: https://github.com/mdgriffith/elm-ui/blob/master/tests-rendering/automation/templates/gather-styles.html

This function calculates an element's bounding box using `getBoundingClientRect()` and extracts its padding values from `window.getComputedStyle`. It returns an object containing the element's position, dimensions, and individual padding values.

```JavaScript
function getBoundingBox(element) {
  var bbox = element.getBoundingClientRect();
  var style = window.getComputedStyle(element, null);
  var padding = {
    top: parseFloat(style.getPropertyValue("padding-top")),
    bottom: parseFloat(style.getPropertyValue("padding-bottom")),
    left: parseFloat(style.getPropertyValue("padding-left")),
    right: parseFloat(style.getPropertyValue("padding-right")),
  };
  return {
    top: bbox.top,
    bottom: bbox.bottom,
    left: bbox.left,
    right: bbox.right,
    width: bbox.width,
    height: bbox.height,
    padding: padding,
  };
}
```

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

### Initializing Elm Application and Subscribing to Ports in JavaScript

Source: https://github.com/mdgriffith/elm-ui/blob/master/tests-rendering/automation/templates/gather-styles.html

This snippet initializes an Elm application by mounting it to a specified DOM node. It then subscribes to two Elm ports: `report` to receive test results and update the document title, and `analyze` to process a list of element IDs, gather their styles, bounding boxes, text metrics, and visibility, and send the results back to Elm via the `styles` port.

```JavaScript
var app = Elm.~~_module_name_~~.init({
  node: document.getElementById("elm-home"),
});
// create a canvas for text measurements
let canvas = createHiDPICanvas(200, 100, "canvas");
var test_results = "waiting..";
app.ports.report.subscribe(function (results) {
  test_results = results;
  // NOTE - this is the signal to the automation that it is cool to retrieve results now
  // So don't remove this like you did before :D
  document.title = "tests finished";
});
app.ports.analyze.subscribe(function (ids) {
  // ids : List String
  var idsLength = ids.length;
  var results = [];
  for (var i = 0; i < idsLength; i++) {
    var id = ids[i];
    var element = document.getElementById(id);
    if (element == null) {
      console.log("id " + id + " not found");
    }
    var style = getStyle(element);
    var bbox = getBoundingBox(element);
    var metrics = getTextMetrics(element);
    var visible = isVisible(id, bbox);
    var result = {
      textMetrics: metrics,
      bbox: bbox,
      style: style,
      id: id,
      isVisible: visible,
    };
    results.push(result);
  }
  app.ports.styles.send(results);
});
```

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

### Executing Elm UI Rendering Tests on Sauce Labs

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/RUNNING_TESTS.md

This command initiates the `elm-ui` rendering tests on Sauce Labs, leveraging the configured `sauce.env` file. For this to function, the compiled Elm UI test output must be publicly accessible, as the Sauce Labs platform needs to retrieve it for execution across various browsers.

```bash
npm run test-render-sauce
```

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

### Configuring Sauce Labs Environment Variables for Elm UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/RUNNING_TESTS.md

This snippet shows the required environment variables for integrating Elm UI tests with Sauce Labs. Users with a Sauce Labs account must create a `sauce.env` file in the `elm-ui` directory, populating it with their `SAUCE_ACCESS_KEY` and `SAUCE_USERNAME` to enable automated testing on the platform.

```bash
export SAUCE_ACCESS_KEY={your key}
export SAUCE_USERNAME={your username}
```

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

### Initializing Elm Main Application in JavaScript

Source: https://github.com/mdgriffith/elm-ui/blob/master/experiments/virtual-css/test.html

This JavaScript snippet initializes an Elm application. It calls the `init` method of the `Elm.Main` module, passing an object that specifies the DOM node where the Elm application should be mounted. The initialized application instance is then assigned to the `app` variable.

```JavaScript
var app = Elm.Main.init({ node: document.getElementById('elm') });
```

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

### Subscribing to Elm-to-JavaScript Port (JavaScript)

Source: https://github.com/mdgriffith/elm-ui/blob/master/benchmarks/runtime/template/run.html

This JavaScript snippet sets up a subscription to the 'elmToWorld' port, allowing the JavaScript environment to receive data sent from the Elm application. The received data is then stored in the 'window.metrics' array.

```javascript
window.metrics = []
app.ports.elmToWorld.subscribe(function(fromElm){ window.metrics = fromElm })
```

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

### Running Local Elm UI Layout Rendering Tests

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/RUNNING_TESTS.md

This command sequence runs the `elm-ui` layout rendering tests locally. These tests are designed to verify layout behavior across browsers by rendering output and harvesting bounding box data. By default, they execute in headless Chrome, providing output on test compilation and results without opening a browser window.

```bash
npm install
npm run test-render
```

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

### Initializing Elm Application and Sending Data (JavaScript)

Source: https://github.com/mdgriffith/elm-ui/blob/master/benchmarks/runtime/template/viewResults.html

This snippet initializes an Elm application named 'Elm.View.Results' by attaching it to an HTML element with the ID 'elm'. It then sends a 'results' object to the Elm application via the 'worldToElm' port, allowing JavaScript to pass data to Elm.

```JavaScript
const results = ${results} var app = Elm.View.Results.init({ node: document.getElementById('elm') }); app.ports.worldToElm.send(results)
```

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

### Applying Minimum and Maximum Width to an Element in Elm

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/CHANGES-FROM-STYLE-ELEMENTS.md

This snippet demonstrates how to use the new `minimum` and `maximum` functions with `width` to constrain an element's size, replacing the deprecated `fillBetween` functionality. It shows how to set a base `fill` width and then apply min/max limits.

```Elm
view =
    el 
        [ width 
            (fill
                |> minimum 20
                |> maximum 200
            )
        ]
        (text "woohoo, I have a min and max")
```

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

### Applying Minimum and Maximum Constraints with Fill in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/CHANGES-FROM-STYLE-ELEMENTS.md

Demonstrates how to apply minimum and maximum size constraints to an element using `fill` combined with `minimum` and `maximum` functions. This pattern is used for `minWidth`, `maxWidth`, `minHeight`, and `maxHeight` behaviors, allowing an element to fill available space within specified bounds.

```Elm
fill |> minimum 20 |> maximum 200
```

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

### Initializing Elm Application (JavaScript)

Source: https://github.com/mdgriffith/elm-ui/blob/master/benchmarks/runtime/template/run.html

This JavaScript code initializes the Elm 'Main' application, attaching it to the HTML element with the ID 'elm'. This is the essential entry point for embedding the Elm application within a web page.

```javascript
var app = Elm.Main.init({ node: document.getElementById('elm') });
```

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

### Compiling Elm Test Cases with elm-live

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/classifying-issues.md

This shell command is used to compile a specific Elm test file located within the `tests-rendering/cases/open` directory. It utilizes `elm-live` to automatically open the compiled output in a browser, direct the output to the `view` directory, and enable debug mode. This step is crucial for verifying if a newly added test case for a bug compiles without errors.

```Shell
elm-live cases/open/{The file}.elm --open --dir=view -- --output=view/elm.js --debug
```

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

### Defining Basic CSS Styles

Source: https://github.com/mdgriffith/elm-ui/blob/master/benchmarks/runtime/template/run.html

This CSS defines basic styles for elements like '.box', '.pink', '.white', and '.contain', used for layout and background colors in the Elm UI application. The 'contain: strict;' property is used for CSS containment.

```css
.box { width: 400px; height: 50px; border: solid thick; }
.pink { background-color: pink; }
.white { background-color: white; }
.contain { contain: strict; }
```

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

### Exposing JavaScript Functions Globally (JavaScript)

Source: https://github.com/mdgriffith/elm-ui/blob/master/benchmarks/runtime/template/run.html

This JavaScript code assigns the 'elmRefresh', 'elmStartAnim', and 'elmStopAnim' functions to the 'window' object, making them globally accessible. This allows these functions to be invoked from HTML event handlers or other global scripts, facilitating interaction with the Elm application.

```javascript
window.elmRefresh = elmRefresh;
window.elmStartAnim = elmStartAnim;
window.elmStopAnim = elmStopAnim;
```

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

### Calculating Device Pixel Ratio in JavaScript

Source: https://github.com/mdgriffith/elm-ui/blob/master/tests-rendering/automation/templates/gather-styles.html

This Immediately Invoked Function Expression (IIFE) calculates the device pixel ratio, accounting for `window.devicePixelRatio` and various browser-specific `backingStorePixelRatio` properties to determine the optimal ratio for HiDPI canvas rendering.

```JavaScript
var PIXEL_RATIO = (function () {
  var ctx = document.createElement("canvas").getContext("2d"),
    dpr = window.devicePixelRatio || 1,
    bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
  return dpr / bsr;
})();
```

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

### Sending Messages to Elm Ports (JavaScript)

Source: https://github.com/mdgriffith/elm-ui/blob/master/benchmarks/runtime/template/run.html

These JavaScript functions ('elmRefresh', 'elmStartAnim', 'elmStopAnim') send specific messages (with tags 'Refresh', 'StartAnim', 'StopAnim') to the Elm application via the 'worldToElm' port. These functions are designed to trigger actions or state changes within the Elm application.

```javascript
function elmRefresh(){ app.ports.worldToElm.send({tag: "Refresh"}) }
function elmStartAnim(){ app.ports.worldToElm.send({tag: "StartAnim"}) }
function elmStopAnim(){ app.ports.worldToElm.send({tag: "StopAnim"}) }
```

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

### Defining Shadow Model Attribute in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/PaletteGroups.md

Introduces `Element.Shadow.stack` for applying a list of shadows as an attribute to an element. This suggests a dedicated module for shadow definitions, enabling complex shadow effects to be grouped and applied easily, enhancing visual consistency.

```Elm
Element.Shadow.stack : List Shadow -> Attribute msg
```

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

### Defining Inline Styles on Elm Elements

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/CHANGES-FROM-STYLE-ELEMENTS.md

This snippet demonstrates how to apply styles directly to an Elm element using a list of style attributes. It shows setting background and font colors for a text element, which are then gathered and rendered into a stylesheet for performance and expressive power.

```elm
el [ Background.color blue, Font.color white ] (text "I'm so stylish!")
```

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

### Using Font Palette Attribute in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/PaletteGroups.md

Demonstrates the usage of the `Font.with` function to define a `titleFont` with specific typeface, fallback, and a triple scale. It then applies this font to an `elm-ui` element within a `view` function, showcasing how to use the `large` scale option for text.

```Elm
(titleFont, title) = 
    Font.with
        { typeface = "EB Garamond"
        , fallback =
            [ "georgia"
            , "serif"
            ]
        , scale =
            Font.Triple
                { small = 12
                , normal = 16
                , large = 32
                }
        , adjustments = Nothing
        , variations = []
        }


view =
    Element.layoutWith { options = [ titleFont ] } <|
        el 
            [ title.large
            ]
            (text "I am a large title font")
```

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

### Creating HiDPI Canvas in JavaScript

Source: https://github.com/mdgriffith/elm-ui/blob/master/tests-rendering/automation/templates/gather-styles.html

This function creates or configures an HTML canvas element for high-DPI displays. It adjusts the canvas's internal dimensions and CSS styling based on the provided width, height, and pixel ratio, then sets the 2D rendering context's transform for proper scaling.

```JavaScript
function createHiDPICanvas(w, h, id, ratio) {
  if (!ratio) {
    ratio = PIXEL_RATIO;
  }
  let can = document.getElementById(id);
  can.width = w * ratio;
  can.height = h * ratio;
  can.style.width = w + "px";
  can.style.height = h + "px";
  can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
  return can;
}
```

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

### Handling Form Submission in Elm-UI (No `<form>` element)

Source: https://github.com/mdgriffith/elm-ui/blob/master/CSS-LOOKUP.md

This snippet clarifies that Elm-UI does not provide a direct equivalent for the HTML `<form>` element. Instead, Elm applications typically handle data submission using Elm's `Http` package. The text also acknowledges potential accessibility benefits of the `form` element, indicating openness to discussion.

```HTML
<form>
```

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

### Applying Multiple Border Shadows in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function applies multiple shadows to the border of an Elm-UI element. It takes a `List` of shadow configurations, each including `offset`, `blur`, `color`, and `opacity`, returning an `Attribute msg`.

```Elm
Border.manyShadows :
    List
        { offset : (Float, Float)
        , blur : Float
        , color : Color
        , opacity : Float
        } -> Attribute msg
```

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

### Defining Spacing Palette Attribute in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/PaletteGroups.md

Defines a new `Element.spaceWith` attribute for `elm-ui` that consolidates padding and spacing properties. This aims to make element definitions more concise and consistent by grouping common spacing configurations into a single attribute.

```Elm
Element.spaceWith :
    { padding :
        { top : Int
        , right : Int
        , bottom : Int
        , left : Int
        }
    , spacing :
        { x : Int
        , y : Int
        }
    } -> Attribute msg
```

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

### Applying Heading Region for Accessibility in Elm

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/CHANGES-FROM-STYLE-ELEMENTS.md

This snippet shows how to mark an Elm element as a heading for accessibility purposes using Element.Region.heading. By applying Region.heading 1 to an el containing text, it semantically defines the text as an <h1> equivalent, enhancing document structure for assistive technologies.

```elm
el [ Region.heading 1 ] (text "Super important stuff")
```

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

### Mapping CSS Pseudo-classes to Elm-UI States

Source: https://github.com/mdgriffith/elm-ui/blob/master/CSS-LOOKUP.md

This snippet maps common CSS pseudo-classes (`:hover`, `:focus`, `:active`) to their Elm-UI equivalents: `mouseOver`, `focused`, and `mouseDown`. It notes that in Elm-UI, only specific styles, typed as `Attr decorative msg`, are permitted within these pseudo-states, allowing them to function as either an `Attribute` or a `Decoration`.

```CSS
:hover
:focus
:active
```

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

### Defining Border Model Attribute in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/PaletteGroups.md

Defines `Element.Border.with` to consolidate border properties including width, style, and rounded corners. This allows for a unified definition of an element's border appearance, simplifying the application of consistent border styles.

```Elm
Element.Border.with :
    { width : Int
    , style : Border.Style
    , rounded :
        { topLeft : Int
        , topRight : Int
        , bottomLeft : Int
        , bottomRight : Int
        }
    }
```

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

### Setting Background Color in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function sets the background color for an Elm-UI element. It takes a `Color` type as input and returns an `Attribute`.

```Elm
Background.color : Color -> Attribute
```

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

### Mixing Two Colors for Font Styling in Elm UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This Elm UI snippet illustrates how to explicitly mix two colors using `Color.mix` for a font. It applies a background color to an `el` element and then sets the font color by mixing `white` with the `bg` color at a `0.2` ratio, providing a subtle blend. This approach is an alternative to using alpha for color blending.

```Elm
el
    [ Background.color bg
    -- explicitly mix the two!
    , Font.color (Color.mix 0.2 white bg)
    ]
    (text "Howdy")
```

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

### Defining Color Palette Attribute in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/PaletteGroups.md

Introduces an `Element.colors` attribute designed to group background, text, and border colors. This consolidation helps in verifying and specifying minimum contrast for accessibility by binding related color properties together, promoting a cohesive color design.

```Elm
Element.colors :
    { background : Color
    , text : Color
    , border : Color
    } -> Attribute msg
```

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

### Elm-UI's Alternative to CSS `margin`

Source: https://github.com/mdgriffith/elm-ui/blob/master/CSS-LOOKUP.md

This snippet explains that Elm-UI does not have a direct equivalent for the CSS `margin` property. Instead, `padding` and `spacing` are used. This design choice aims to eliminate property conflicts common in CSS (like `margin` vs. `padding`), promoting a more predictable and simpler layout system where effects are achieved in a single, clear way.

```CSS
margin
```

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

### Mapping CSS `float` to Elm-UI Alignment

Source: https://github.com/mdgriffith/elm-ui/blob/master/CSS-LOOKUP.md

This snippet shows how CSS `float:left` and `float:right` are mapped in Elm-UI. Within a `paragraph` or `textColumn`, similar alignment effects can be achieved using `alignLeft` or `alignRight`.

```CSS
float:left
float:right
```

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

### Lightening a Color using CIELUV Luminance in Elm

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This snippet demonstrates how to lighten a color using the `Color.lighten` function in Elm. It suggests that this function should operate based on CIELUV luminance for more accurate color adjustments, rather than simple HSL lightness or alpha manipulation. The `0.3` parameter indicates the degree of lightening.

```Elm
Color.lighten 0.3 color
```

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

### Setting Background Opacity in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function sets the opacity of the background for an Elm-UI element. It takes a `Float` value (0.0 to 1.0) as input and returns an `Attribute`. This is commonly used for text over image backgrounds.

```Elm
Background.opacity : Float -> Attribute
```

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

### Adding Navigation Region for Accessibility in Elm

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/CHANGES-FROM-STYLE-ELEMENTS.md

This Elm snippet illustrates how to use the Element.Region module to add accessibility markup. Specifically, it applies Region.navigation to a row element, indicating that its content serves as navigation links, separating accessibility concerns from layout.

```elm
import Element.Region as Region

row [ Region.navigation ] 
    [ --..my navigation links
    ]
```

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

### Deprecated Percent Usage in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/CHANGES-FROM-STYLE-ELEMENTS.md

Illustrates the deprecated usage of `percent 100` for width/height values in Elm-UI. Users are advised to use `fill` or `fillPortion` instead to prevent accidental element overflow.

```Elm
percent 100
```

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

### Handling CSS `position:fixed` in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/CSS-LOOKUP.md

This snippet describes the Elm-UI approach to the CSS `position:fixed` property. In Elm-UI, `inFront` can achieve similar fixed positioning, especially when attached to the `Element.layout` element. The description also highlights common pitfalls of `position:fixed` in CSS, such as its interaction with parent elements using `filter`, `transform`, or `perspective`.

```CSS
position:fixed
```

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

### Mapping CSS `opacity` to Elm-UI `alpha`

Source: https://github.com/mdgriffith/elm-ui/blob/master/CSS-LOOKUP.md

This snippet provides the Elm-UI equivalent for the CSS `opacity` property. In Elm-UI, the `alpha` function is used to control the transparency of an element.

```CSS
opacity
```

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

### Defining Font Palette Attribute in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/PaletteGroups.md

Defines `Element.Font.with` for grouping font-related attributes such as typeface, fallback fonts, scale, adjustments, and variations. This allows for more precise and consistent font sizing and styling across elements, simplifying font management.

```Elm
Element.Font.with :
    { typeface : String
    , fallback : List String
    , scale : Scale
    -- adjustments is a new thing that's coming that will allow more precise font sizing.
    , adjustments : Maybe Font.Adjustment
    -- These are variations like `slash zero`
    , variations : List Font.Variation
    } -> (Option, Attribute msg)

type Scale 
    = Single Int
    | Triple
        { small : Int
        , normal : Int
        , large : Int
        }
    | Fluid (windowSize -> Scale)
```

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

### Measuring Text Metrics for Child Elements in JavaScript

Source: https://github.com/mdgriffith/elm-ui/blob/master/tests-rendering/automation/templates/gather-styles.html

This function iterates through an element's children, specifically those with the class 't', to measure their text metrics. It uses a canvas 2D context to measure text width and bounding box properties based on the child's computed font size and family, returning an array of text metric objects.

```JavaScript
function getTextMetrics(element) {
  // Given our element, we want to return the text metrics on the text within.
  // If it is an element we want to measure:
  // we want to get the font family
  // and the font size.
  // We're going to presume that the font is loaded.
  let childrenTextMetrics = [];
  for (i = 0; i < element.children.length; i++) {
    if (element.children[i].classList.contains("t")) {
      let style = window.getComputedStyle(element, null);
      let fontSize = style.getPropertyValue("font-size");
      let fontFamily = style.getPropertyValue("font-family");
      let ctx = canvas.getContext("2d");
      ctx.font = fontSize + " " + fontFamily; //"16px Roboto";
      let text = ctx.measureText(element.children[i].innerText);
      childrenTextMetrics.push({
        actualBoundingBoxAscent: text.actualBoundingBoxAscent,
        actualBoundingBoxDescent: text.actualBoundingBoxDescent,
        actualBoundingBoxLeft: text.actualBoundingBoxLeft,
        actualBoundingBoxRight: text.actualBoundingBoxRight,
        width: text.width,
      });
    }
  }
  return childrenTextMetrics;
}
```

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

### Setting Border Color in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function sets the color of the border for an Elm-UI element. It takes a `Color` type as input and returns an `Attribute`.

```Elm
Border.color : Color -> Attribute
```

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

### Setting Border Opacity in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function sets the opacity of the border for an Elm-UI element. It takes a `Float` value (0.0 to 1.0) as input and returns an `Attribute`. Transparent borders are sometimes used as placeholders to prevent layout shifts.

```Elm
Border.opacity : Float -> Attribute
```

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

### Setting Font Opacity in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function sets the opacity of the font for an Elm-UI element. It takes a `Float` value (0.0 to 1.0) as input and returns an `Attribute msg`. The document suggests this might be dropped in favor of `Element.opacity`.

```Elm
Font.opacity : Float -> Attribute msg
```

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

### Elm-UI's Approach to CSS `z-index`

Source: https://github.com/mdgriffith/elm-ui/blob/master/CSS-LOOKUP.md

This snippet clarifies that the CSS `z-index` property is not directly exposed in Elm-UI. The library aims to manage z-ordering internally, making `z-index` a behind-the-scenes detail to simplify layout reasoning and reduce complexity.

```CSS
z-index
```

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

### Retrieving Computed Styles in JavaScript

Source: https://github.com/mdgriffith/elm-ui/blob/master/tests-rendering/automation/templates/gather-styles.html

This function retrieves all computed CSS properties and their values for a given HTML element using `window.getComputedStyle`. It iterates through all available styles and returns them as an array of `[name, value]` pairs.

```JavaScript
function getStyle(element) {
  var props = [];
  var style = window.getComputedStyle(element);
  for (var i = style.length; i--; ) {
    var name = style.item(i);
    var value = style.getPropertyValue(name);
    props.push([name, value]);
  }
  return props;
}
```

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

### Applying Font Shadow in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function applies a shadow to the font of an Elm-UI element. It requires an `offset` (x, y), `blur` radius, `color` for the shadow, and `opacity` for the shadow, returning an `Attribute msg`.

```Elm
Font.shadow :
    { offset : (Float, Float)
    , blur : Float
    , color : Color
    , opacity : Float
    } -> Attribute msg
```

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

### Applying Border Shadow in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function applies an outer shadow to the border of an Elm-UI element. It requires an `offset` (x, y), `size`, `blur` radius, `color` for the shadow, and `opacity` for the shadow.

```Elm
Border.shadow :
    { offset : (Float, Float)
    , size : Float
    , blur : Float
    , color : Color
    , opacity : Float
    }
```

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

### Handling Form Submission Events in Elm-UI (No `onSubmit`)

Source: https://github.com/mdgriffith/elm-ui/blob/master/CSS-LOOKUP.md

This snippet explains that Elm-UI does not have an `onSubmit` behavior similar to HTML forms. For capturing keyboard-related submission events, the recommended approach in Elm is to craft a custom keyboard event handler.

```JavaScript
onSubmit
```

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

### Setting Font Color in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function sets the color of the font for an Elm-UI element. It takes a `Color` type as input and returns an `Attribute msg`.

```Elm
Font.color : Color -> Attribute msg
```

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

### Applying Background Gradient with Opacity in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function applies a linear gradient to the background of an Elm-UI element. It specifies the `angle` of the gradient, a `List Color` for the gradient stops, and a separate `List Float` for the opacity at each color stop, making it easier to manage fades.

```Elm
Background.gradient :
    { angle : Float
    , colors : List Color
    , opacity : List Float
    }
```

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

### Mapping CSS `position:absolute` to Elm-UI Relative Positioning

Source: https://github.com/mdgriffith/elm-ui/blob/master/CSS-LOOKUP.md

This snippet explains how the CSS `position:absolute` property is handled in Elm-UI. Instead of `position:absolute`, Elm-UI uses functions like `above`, `below`, `onRight`, `onLeft`, `inFront`, and `behindContent` to attach elements relative to others without affecting normal document flow.

```CSS
position:absolute
```

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

### Checking Element Visibility in JavaScript

Source: https://github.com/mdgriffith/elm-ui/blob/master/tests-rendering/automation/templates/gather-styles.html

This function determines if an HTML element is fully visible within the viewport by checking if all four corners of its bounding box are covered by the element itself using `document.elementFromPoint`. It returns `true` if all corners are visible, `false` otherwise.

```JavaScript
function isVisible(id, bbox) {
  var current = document.getElementById(id);
  var result = 0;
  if (current == document.elementFromPoint(bbox["left"], bbox["top"])) {
    result++;
  }
  if (
    current == document.elementFromPoint(bbox["left"], bbox["bottom"] - 1)
  ) {
    result++;
  }
  if (
    current == document.elementFromPoint(bbox["right"] - 1, bbox["top"])
  ) {
    result++;
  }
  if (
    current == document.elementFromPoint(bbox["right"] - 1, bbox["bottom"] - 1)
  ) {
    result++;
  }
  if (result == 4) {
    return true;
  } else {
    return false;
  }
}
```

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

### Applying Inner Border Shadow in Elm-UI

Source: https://github.com/mdgriffith/elm-ui/blob/master/notes/discussion/ColorWithoutAlpha.API.md

This function applies an inner shadow to the border of an Elm-UI element. It requires an `offset` (x, y), `size`, `blur` radius, `color` for the shadow, and `opacity` for the shadow.

```Elm
Border.innerShadow
    { offset : ( Float, Float )
    , size : Float
    , blur : Float
    , color : Color
    , opacity : Float
    }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.