frontbend

0.3.2 • Public • Published

npm Build Status Build status

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]

or

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

Package Sidebar

Install

npm i frontbend

Weekly Downloads

1

Version

0.3.2

License

MIT

Unpacked Size

31.2 kB

Total Files

43

Last publish

Collaborators

  • digitales-github
  • selamanse
  • digitalesdeveloper
  • schapka