Frontbend NPM | npm.io

Frontbend

Frontbend is a tool that automates the analysis of image dimensions accross various breakpoints.

Node

Install

npm install --save-dev frontbend

Usage

const path = require('path');
const fs = require('fs');
const frontbend = require('frontbend');

const configFile = path.resolve(__dirname, 'config.json');
const outputDir = path.resolve(__dirname, 'output');
const config = JSON.parse(fs.readFileSync(configFile, 'utf8'));

frontbend
  .analyze(config)
  .then(result => frontbend.writeResult(result, outputDir));

API

const frontbend = require('frontbend');

`frontbend.analyze(config [, options])`

Options:

Option	Default value	Description
`parallel`	`1`	Increase to allow multiple image types being processed in parallel.
`open`	`false`	Run in full version of Chromium. By default, frontbend launches Chromium in headless mode.

`frontbend.writeResult(result [, options])`

Options:

Option	Default value	Description
`clean`	`false`	Delete output directory before running frontbend.

CLI

npx frontbend ./my/config.json ./my/output/ [options]

npm install --global frontbend
frontbend ./my/config.json ./my/output/ [options]

Options:

Option	Alias	Default value	Description
`--parallel`	`-p`	`1`	Increase to allow multiple image types being processed in parallel.
`--open`	`-o`	`false`	Run in full version of Chromium. By default, frontbend launches Chromium in headless mode.
`--clean`	`-c`	`false`	Delete output directory before running frontbend.

Configuration

`policies` object<string, object>

Use policies in order to define transformations and output quality for images delivered by Akamai Image Manager.

Example:

{
  "policies": {
    "16x9": {
      "transformations": [
        {
          "transformation": "Resize",
          "type": "normal",
          "aspect": "fill",
          "width": 3840,
          "height": 2160
        },
        {
          "gravity": "Center",
          "transformation": "Crop",
          "width": 3840,
          "height": 2160,
          "allowExpansion": false
        }
      ],
      "output": {
        "perceptualQuality": "mediumHigh"
      }
    }
  }
}

Documentation of Akamai Image Manager Policies

Note: The id and breakpoints fields are added dynamically to the resulting policy files.

`viewports` object<string, object>

Define a set of viewports/breakpoints at which the interface adapts its layout.

Fields:

Field	Type	Default value	Required	Description
breakpoint	`number`	`undefined`	yes	Minimum width (pixel) of viewport
width	`number`	`undefined`	yes	Width (pixel) of the reference viewport
fallback	`boolean`	`undefined`	no	Use as fallback viewport, e.g. for browsers without support for `<picture>`-elements (If no fallback is specified, Frontbend will use the largest viewport as fallback)

Example:

{
  "viewports": {
    "xs": {
      "breakpoint": 0,
      "width": 375
    },
    "s": {
      "breakpoint": 575,
      "width": 768
    },
    "m": {
      "breakpoint": 1024,
      "width": 1200
    },
    "l": {
      "breakpoint": 1440,
      "width": 1600,
      "fallback": true
    },
    "xl": {
      "breakpoint": 1920,
      "width": 1920
    }
  }
}

Note: Frontbend follows the mobile-first approach.

`imageTypes` object<string, object>

Provide a set of image types that respond in its own way to different viewport sizes.

Field	Type	Default value	Required	Description
url	`string`	`undefined`	yes	Url of page
selector	`string`	`undefined`	yes	CSS Selector for the image element
credentials	`object`	`null`	no	Provide credentials for HTTP authentication
useRelativeUnit	`boolean`	`true`	no	Set to `false` in order to use an absolute unit (px) for image dimensions
retinaScale	`number`	`1.5`	no	Scale factor that will be used to determine image dimensions for high resolution screens
policy	`string`	`'default'`	no	Id of policy that should be applied to the image
overrides	`object`	`undefined`	no	Use the overrides object to use a different policy at specific viewports/breakpoints (e.g. when you want to switch to a different aspect ratio for particular viewports)

Example:

{
  "imageTypes": {
    "stage": {
      "url": "http://localhost:8000/",
      "selector": ".stage__image",
      "credentials": { "username": "USERNAME", "password": "PASSWORD" },
      "policy": "16x9"
    },
    "intro": {
      "url": "http://localhost:8000/",
      "selector": ".intro__image",
      "credentials": { "username": "USERNAME", "password": "PASSWORD" },
      "policy": "1x1",
      "overrides": {
        "xs": {
          "policy": "16x9"
        }
      }
    }
  }
}

See configuration example