The colorizer from mischback

Switch to ``TypeScript``

As of now, this is a typical JS-related project: "Oh, let's just kluge this together quickly..." - "Hey, let's put at least some comments into it..." - "Oh fuck, the JS code is about 10.000 LoC and no longer maintainable!!!"

This issue is not about switching to TypeScript because TypeScript is nicer than VanillaJS, it's about structuring the codebase better, having clearly defined interfaces and at least some type safety.

User-specific Settings / Configuration

There are some things, which should be exposed through user-specific settings. This is an additional feature beyond the core functions of the application, thus, it is not part of the v2 milestone.

This issue tracks the places, where a user-specific setting is beneficial / desired.

the inputDebounceDelay of the ColorFormInputMethod class

which method is used to display the colors

This will be a major effort, possibly worth a dedicated issue!
Idea: All elements that are created to display a color have a dedicated class. Somewhere in the beginning of the DOM hierarchy, a class is set, controlling the method and setting the color is then handled in CSS by custom properties.

Dummy code:

<html>
  <body class="rgb" style="--colorized-a=255; --colorized-b=128; --colorized-c=64">
    ...
    <SOME GENERIC ELEMENT class="colorized">

.rgb .colorized {
  background-color: rgb(var(--colorized-a) var(--colorized-b) var(--colorized-c));
}

.oklch .colorized {
  background-color: oklch(var(--colorized-a) var(--colorized-b) var(--colorized-c));
}

precision: Several input methods can operate on decimal numbers / floats. Should this be exposed? Should this be a dynamic thing, meaning that the the precision may be adjusted while using the application?
- all rounding operations should be performed as late as possible (when the value is actually displayed!)
- see roundToPrecision() in src/script/utility/index.ts
Light mode / dark mode (??)
- Great blog post about implementing a dark/light mode

Broken in Chromium/Chrome

Problem

Chromium (Ubuntu 22.04) is not working anymore!

The palette is not synchronized from the IndexedDB, console logs:

tslib.es6.js:118 Uncaught (in promise) Invalid lex string
fulfilled @ tslib.es6.js:118
Promise.then (async)
step @ tslib.es6.js:120
fulfilled @ tslib.es6.js:118
Promise.then (async)
step @ tslib.es6.js:120
(anonymous) @ tslib.es6.js:121
__awaiter @ tslib.es6.js:117
synchronizePaletteFromDb @ palette.ts:298
ColorizerPalette @ palette.ts:122
ColorizerController @ controller.ts:30
(anonymous) @ colorizer.ts:10
Show 6 more frames

While testing in the local network with a (mobile) Chrome, adding colors is broken aswell (as that test was executed from my phone, no detailled error messages, might be the same issue).

Research

This SO thread suggests that the error is raised because of a missing catch() while dealing with promises.
this may be solved during #42 , as failures during database access should end up in a notification, so there will be catch() blocks anyway.

Add input methods ``hsl`` and ``hwb``

These are more like different notations of sRGB, but still useful and common.

The original implementation (v1) does include them, so they should be part of v2 aswell.

Re-implement ``<form>`` to add colors

Milestone v2 includes the restructuring of the codebase. This might mean making some code obsolete by introducing another library as dependency or re-implementing existing code in TypeScript (to leverage the benefits of type safety and syntactic sugar).

Features

ColorizerForm
- setup the input methods; controlled by an argument during instance creation
- submit callback; controlled by an argument during instance creation
- keep track of the current color and expose it (getColor())
input method RGB
input method OkLCH

Why is the `<form>` logic the first refactoring subject?

This comment includes an experimental, VanillaJS re-implementation of the <form> logic. It is sufficiently complex to verify that the TS setup (#16) is working ~~and the implementation will be one place, where the (external) color libraries (see #10) can be evaluated~~.

[repo_root]
├── src/
│   ├── script/
│   |   ├── colorizer/
|   │   |   ├── interface/
|   |   │   |   ├── color_form/
|   |   |   │   |   ├── input_methods.ts
|   |   |   │   |   ├── form.ts
|   |   |   |   │   └── index.ts
|   |   │   |   ├── grid_view.ts
|   |   │   |   ├── palette.ts
|   |   |   │   └── index.ts
|   │   |   ├── engine.ts
|   |   │   └── index.ts
│   |   ├── utility/
|   |   │   └── index.ts
|   │   └── index.ts
│   └── style/   <-- details in #18 
└── tsconfig.json

Fix color inputs

There is a issue with adding colors, if one of the form fields (<input type="text" ...>, usually this is for a Hue component) has the value NaN.

While this is semantically correct (the Hue component is powerless under certain conditions), the form does not validate and is not submittable.

Possible Fixes

Enhance the underlying RegEx to include NaN
modify NaN to 0 in the engine

Improve Input of Colors

As of now, colors have to be added using hex notation in a text-based input field. This works well enough but is not really convenient.

Requirements

switch the existing input to type="color"
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
- https://www.the-art-of-web.com/javascript/html5-color-input/
- might require minor changes in ColorizerInterface and/or in ColorizerEngine, because that input field includes the leading # character.
add means to use RGB (based on three input fields for R, G, B with ranges between 0..255)
- ~~This might be implemented in frontend-only, meaning that the actual interface to ColorizerEngine remains the hex notation (see above, especially the this resource)~~ Switched to 0..255 internally!
add means to use HSL
add means to use HWB
~~add means to use Oklab~~ Not for now! Oklch seems more intuitive!
add means to use Oklch

Resources

https://www.w3.org/TR/css-color-4/ This is the most recent version of the CSS color module. Beside the formal description it includes example implementation of conversion functions
https://gist.github.com/mjackson/5311256 Different conversion functions between different color models (e.g. RGB to HSL, HSL to RGB)
The conversion from Oklab/Oklch to sRGB (which is predominant for usual computer screens) is described here, including sample implementation in JS

``CIE XYZ`` to ``OkLCH`` conversion

While playing around with the color-form, it appears that a RGB input of 255, 0, 0 is not a pure red in OkLCH (visually).

evilmartians' converter returns oklch(62.8% 0.25768330773615683 29.2338851923426).

Potential Problem

Our implementation assumes that the value range of C is [0..1]. The value of the conversion function

colorizer/src/script/utility/color-processing.ts

Line 213 in 4d13b7f

export function convertOklabToOklch(oklab: TOklab): TOklch {

is then converted to a percent-based value

colorizer/src/script/colorizer/interface/color-form/input-methods.ts

Line 564 in 4d13b7f

tmp = roundToPrecision(colorOklch.c * 100, 2).toString();

which is plainly WRONG, as W3C CSS Color Module 4 explicitly states, that the range for the C component is 0% = 0; 100% = 0.4.

Additionally, in the conversion function, hue is calculated like this: const hue = (Math.atan2(oklab.b, oklab.a) * 180) / Math.PI;, while the implementation source has const hue = Math.atan2(oklab.b, oklab.a) * 180 / Math.PI;. I'm humble enough to state that I'm not sure about the brackets here! Needs verification!

Possible Fix

Change input-methods.ts#L564 to either

tmp = roundToPrecision((colorOklch.c / 0.4) * 100, 2).toString(); to keep the percent-based visualization
- requires change in #L544: (Number(this.cBText.value) / 100) * 0.4,
tmp = roundToPrecision(colorOklch.c, 5).toString(); to display a raw value instead

This should be documented in all OkLCH-related functions!

Make drag'n'drop work with touch devices

Follow up to #43

The custom implementation of drag'n'drop is based on HTML5's API. This seems to not work properly with touch inputs.

Resources

Bernardo-Castilho/dragdroptouch is a shim, which might work out of the box.
- just including that shim does work out of the box

Ref

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Colorizer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/style.css">
    <script src="assets/colorizer.js" defer></script>
  </head>

  <body>
    <header>
      <h1>Colorizer</h1>
      <p>A tool to build color palettes while considering contrast values.</p>
    </header>
    <div id="ctrl">
      <button id="ctrl-toggle">&gt;</button>
      <section id="color-add">
        <form>
          <label for="new-color">New Color:</label>
          <input id="new-color" type="text" required>
          <button>Add</button>
        </form>
        <div id="color-palette">
            <ul></ul>
        </div>
      </section>
    </div>

    <div id="contrast-grid"></div>
  </body>
</html>

/* This is the actual engine that powers the web-based colorscheme builder.
 *
 * It stores colors of a palette in the browser, using IndexedDB.
 *
 * The colors of the palette are displayed in a matrix/grid and evaluated
 * considering their contrast values.
 *
 * Resources:
 * ----------
 * - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage#storing_complex_data_%E2%80%94_indexeddb
 */

// The database object
let db;

var color_palette_list = [];

// Get DOM elements
const DOM_color_palette_list = document.querySelector("#color-palette ul");
const DOM_color_add_form = document.querySelector("#color-add form");
const DOM_color_add_input = document.querySelector("#new-color");
const DOM_contrast_grid = document.querySelector("#contrast-grid");


// open an existing database or create a new one
//
// FIXME: Probably this should be wrapped in a function to make the site more
//        responsive, applying progressive enhancement methods
const openRequest = window.indexedDB.open("colorizer_palette", 1);

/** Error handler */
openRequest.addEventListener("error", () => {
  console.error("Could not open database");
});

/** The database was successfully opened, now process the content. */
openRequest.addEventListener("success", () => {
  console.log("Database opened successfully");

  // store the handle to the database
  db = openRequest.result;

  // TODO: Trigger function to display the palette!
  updatePalette();
});

/** Initialize the desired database structure. */
openRequest.addEventListener("upgradeneeded", (e) => {
  db = e.target.result;

  // setup the objectStore
  const objectStore = db.createObjectStore("colors", {
    keyPath: "id",
    autoIncrement: true,
  });

  objectStore.createIndex("color_hex", "color_hex", { unique: true });
  objectStore.createIndex("color_r", "color_r", { unique: false });
  objectStore.createIndex("color_g", "color_g", { unique: false });
  objectStore.createIndex("color_b", "color_b", { unique: false });

  console.log("Database setup completed");
});

function hexToRGB(hex) {
  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

  return result ? [
    parseInt(result[1], 16),
    parseInt(result[2], 16),
    parseInt(result[3], 16)
  ] : null;
}


function w3Category(contrastValue) {
  switch(true) {
    case contrastValue >= 7:
      return "AAA";
      break;
    case contrastValue >= 4.5:
      return "AA";
      break;
    case contrastValue >= 3:
      return "A";
      break;
    default:
      return "FAIL";
      break;
  }
}


function luminance(r, g, b) {
  var a = [r, g, b].map(function(v) {
    v /= 255;
    return v <= 0.03928
      ? v / 12.92
      : Math.pow((v+0.055) / 1.055, 2,4);
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}


function contrast(rgb1, rgb2) {
  var lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
  var lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
  var brighter = Math.max(lum1, lum2);
  var darker = Math.min(lum1, lum2);
  return (brighter + 0.05) / (darker + 0.05);
}


function buildContrastGrid(colorList, container) {
  /* Takes a list of hex colors (provided as strings) and builds a grid of
   * boxes with their respective contrast values.
   */

  let grid_row;
  let this_container;
  let this_container_content;
  let container_text;

  // empty the existing palette to prevent duplicates
  while (container.firstChild) {
    container.removeChild(container.firstChild);
  }

  for (let i=0; i<colorList.length; i++) {
    console.log("Color: " + color_palette_list[i]);

    grid_row = document.createElement("div");
    grid_row.classList.add("grid-row");

    for (var j=0; j<colorList.length; j++) {

      console.log("Color: " + colorList[i]);

      this_container = document.createElement("div");
      this_container.classList.add("grid-element");
      this_container.style.cssText = "background-color: #" + colorList[i] + "; color: #" + colorList[j] + ";";

      this_contrast = contrast(hexToRGB(colorList[i]), hexToRGB(colorList[j]))

      this_container_content = document.createElement("div");
      this_container_content.classList.add("w3cat");
      container_text = document.createTextNode(w3Category(this_contrast));
      this_container_content.appendChild(container_text);
      this_container.appendChild(this_container_content);

      this_container_content = document.createElement("div");
      this_container_content.classList.add("contrast-value");
      container_text = document.createTextNode(this_contrast.toFixed(2));
      this_container_content.appendChild(container_text);
      this_container.appendChild(this_container_content);

      this_container_content = document.createElement("div");
      this_container_content.classList.add("color-value");
      container_text = document.createTextNode(colorList[j]);
      this_container_content.appendChild(container_text);
      this_container.appendChild(this_container_content);

      grid_row.appendChild(this_container);
    }

    container.appendChild(grid_row);
  }
}


function generatePaletteItem(color_id, color_hex) {
  // create the general list element
  const listItem = document.createElement("li");
  listItem.setAttribute("palette-color-id", color_id);

  // create a <span> to hold the color code as text
  const itemColorCode = document.createElement("span");
  itemColorCode.textContent = "#" + color_hex;

  // create an empty <div> to visualize the color
  const itemColorPreview = document.createElement("div");
  itemColorPreview.style.cssText = "background-color: #" + color_hex + ";";

  // create a <button> to delete the color from the palette
  const itemColorDelete = document.createElement("button");
  itemColorDelete.textContent = "remove";
  itemColorDelete.addEventListener("click", deleteColorFromPalette);

  listItem.appendChild(itemColorCode);
  listItem.appendChild(itemColorPreview);
  listItem.appendChild(itemColorDelete);

  return listItem;
}

function deleteColorFromPalette(e) {
  const color_id = Number(e.target.parentNode.getAttribute("palette-color-id"));

  const transaction = db.transaction(["colors"], "readwrite");
  const objectStore = transaction.objectStore("colors");
  const deleteRequest = objectStore.delete(color_id);

  transaction.addEventListener("complete", () => {
    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
    console.log("Color deleted");

    // TODO: Trigger function to display the palette!
    updatePalette();
  });
}

function updatePalette() {
  // empty the existing palette to prevent duplicates
  while (DOM_color_palette_list.firstChild) {
    DOM_color_palette_list.removeChild(DOM_color_palette_list.firstChild);
  }
  color_palette_list = [];

  const transaction = db.transaction("colors");
  transaction.addEventListener("complete", () => {
    buildContrastGrid(color_palette_list, DOM_contrast_grid);
  });

  const objectStore = transaction.objectStore("colors");
  objectStore.openCursor().addEventListener("success", (e) => {
    const cursor = e.target.result;

    if (cursor) {
      DOM_color_palette_list.appendChild(generatePaletteItem(cursor.value.id, cursor.value.color_hex));
      color_palette_list.push(cursor.value.color_hex);

      // iterate to the next item
      cursor.continue();
    }
  });
}

// Hook into the DOM
DOM_color_add_form.addEventListener("submit", (e) => {
  // don't actually submit the form, intercept with this code
  e.preventDefault();

  let color = hexToRGB(DOM_color_add_input.value);

  if (color === null)
    // leave the function if the input can not be parsed as hex color code
    return;

  const new_item = { color_hex: DOM_color_add_input.value, color_r: color[0], color_g: color[1], color_b: color[2] };

  const transaction = db.transaction(["colors"], "readwrite");
  const objectStore = transaction.objectStore("colors");
  const addRequest = objectStore.add(new_item);

  addRequest.addEventListener("success", () => {
    // clear the form's field
    DOM_color_add_input.value = "";
  });

  transaction.addEventListener("complete", () => {
    console.log("Transaction completed, database modification finished");

    // TODO: Trigger function to display the palette!
    updatePalette();
  });

  transaction.addEventListener("error", () => {
    console.error("Transaction not opened due to error");
  });
});

/**** **** **** **** **** **** **** **** **** **** **** **** **** **** **** ***/


// NEW SHIT!
const DOM_ctrl_container = document.querySelector("#ctrl");
const DOM_ctrl_toggle = document.querySelector("#ctrl-toggle");

DOM_ctrl_toggle.addEventListener("click", (e) => {
  e.preventDefault();

  if (DOM_ctrl_toggle.textContent === "<") {
    DOM_ctrl_toggle.textContent = ">";
    DOM_ctrl_container.style.cssText = "";
  } else {
    DOM_ctrl_toggle.textContent = "<";
    DOM_ctrl_container.style.cssText = "left: 0;";
  }
});

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, sans-serif;
    background-color: #868686;
  color: #000;
    box-sizing: border-box;
}

#contrast-grid {
    display: inline-block;
    margin: 1em 1em 1em 3rem;
    padding: 1em;
}

.grid-element {
    padding: 0.5em;
    font-size: 0.7em;
    display: inline-block;
    width: 6em;
    height: 6em;
    text-align: right;
    border: 1px solid #000;
}

.grid-element .w3cat {
    font-weight: bold;
    font-size: 2em;
}

.grid-element .color-value {
    font-weight: bold;
}


/* THIS IS NEW SHIT */

header {
  margin: 1px 0 1rem 0;
  padding: 0.5rem 1rem 1rem 1rem;
  position: relative;
  text-align: right;
  background: linear-gradient(to top, #868686, rgba(0, 0, 0, 60%) 5px, #999 7px);
}

#ctrl {
  position: absolute;
  top: 1rem;
  left: -50vw;
  width: 50vw;
  height: calc(100vh - 5rem);
  background-color: #444;
  color: #fefefe;
  padding: 1em;
  box-shadow: inset 0 0 3px 2px rgba(0, 0, 0, 60%);
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 0.5rem;
}

#color-add {
  margin: 0.5em 0 1em 0;
}

#color-add form label {
  display: block;
  font-size: 0.7em;
}

#color-add form input {
  border: none;
  border-bottom: 1px solid #fefefe;
  background-color: #868686;
  padding: 0.5em 1em;
  font-size: 1.2em;
  border-radius: 5px;
}

#color-add form button {
  font-size: 1.2em;
  padding: 0.5em 1em;
}

#ctrl-toggle {
  position: absolute;
  top: 1.75rem;
  right: -1rem;
  font-size: 1.5rem;
}

button {
  color: #333;
  border: none;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 60%);
  background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 15% 40%, #d0d0d0 50% 90%, #666 95%);
  border-radius: 5px;
  font-weight: bold;
  padding: 0.25em 0.5em;
}
button:hover {
  background: linear-gradient(to bottom, #eedd99 5%, #ffcc00 15% 40%, #eeaa00 50% 90%, #666 95%);
}

#color-palette ul {
  margin: 3em 0;
  padding: 0;
  list-style: none; 
}
#color-palette ul li {
  display: inline-block;
  background-color: #f00;
  color: #000;
  padding: 0.25em 0.5em;
  margin: 0.25em 0.5em;
  border-radius: 5px;
  background-color: #888;
}

#color-palette ul li span {
  display: inline-block;
  vertical-align: middle;
  font-family: monospace;
  font-size: 1.1em;
}
#color-palette ul li button {
  vertical-align: middle;
}
#color-palette ul li div {
  display: inline-block;
  vertical-align: middle;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid rgba(0, 0, 0, 60%);
  border-radius: 5px;
  margin: 0 0.5em;
}

Testing of TS/JS

This is a browser-centric application, so big parts of the codebase are actually DOM manipulations or are tight to DOM event processing/handling.

Are Unit Tests useful in that scenario?
Can End to End Tests be automated, at least during CI runs?
- e.g. puppeteer?

Replace ``SortableJS``

During implementation of #40, the actual drag'n'drop operation is handled with SortableJS. However, this adds around 40 - 50kB to the bundle size, which is kind of not acceptable.

After finishing the initial implementation of the contrast grid, which should also allow drag'n'drop operations, SortableJS should be replaced, because I feel like the app is using just a minimal subset of its functions.

v1 / the original implementation had its own drag'n'drop logic already implemented. Should be easily adaptable.

Fix calculation of relative luminance

The engine uses a function to determine the relative luminance of a given color. There is a bug!

File colorizer.js
Function ColorizerUtility.luminance()

The implementation is most-likely based on a SO answer, but there's a wrong threshold in the function. See https://www.w3.org/WAI/WCAG20/errata/ for more details.

Fix

Just change 0.03928 to 0.04045.

Use an existing library for handling colors

As of now, color handling is based on (s)RGB internally. All conversion functions are implemented (more or less) following the reference implementations in W3C's Color Module Level 4.

Reasoning

It could possible completely replace the current ColorizerUtility function related to converting from / to RGB.
Probably higher code quality than my own implementations.

Candidates

color.js
- supports tree shaking
- seems well maintained
culori
- supports tree shaking
- seems well maintained

Evaluation

color.js aswell as culori add lots of overhead while using the tree-shakable APIs. Both of them are based around Color Spaces / Color Modes, which are - as of now - way out of scope of this application, which is intended to provide different input methods to define colors and then work with them.

Just for now, we're implementing our own interface for colors, which is tightly geared towards the specific needs of this application.

Evaluation - Part II

Ok, I gave culori another try.

culori exposes its conversion functions directly, making it suitable for tree-shaking (color.js has the conversion functions tied to classes/objects, so the resulting bundle would contain more overhead). BUT, culori does not provide a full set of conversion functions!

Everything went smooth to convert from sRGB to CIE XYZ and back, but there are no conversion functions from CIE XYZ to (i.e.) OkLCH. You would have to convert to sRGB and then to OkLCH which is a) overhead and b) might lead to rounding/calculation/precision issues.

Sorting of Palette

The palette should be "sortable", meaning the existing colors should be re-arrangeable by the user. This should then be applied to the contrast grid output aswell.

Functional Requirements

Colors should be re-arrangeable via drag'n'drop
The order should be applied to the contrast grid

Semantic names for palette items

As of now, the ColorizerPaletteIO visualization of the palette items used the item's paletteItemId in the interface, which is not really nice nor does it provide relevant information for the user.

Having a semantic name for the color would be the desired option, but this does require quite a lot of internal logic:

each item in the palette have a dedicated form for its label with an internal logic to update that label
for styling it would be great if there was a button to activate the form / input and keep it as plain text until then
- clicking the activate button would make the form input writable, hide the button and replace it with a save button
- clicking that save button would update the palette item in ColorizerPalette (and consequently in the database) and deactivate the form again, showing the activate button again

``v2`` Feature List

This is a meta issue for the features that should be provided with v2. It is not meant to track everything related to the v2 milestone, but instead be a backlog of required features / functions.

Guard JS code with Progressive Enhancement techniques

The JS code is meant to be run after the DOM is ready. As of now, this is not enforced/implemented.

Resources

Build process for ``development`` and ``production``

Production Requirements

Script
- create optimized bundle colorizer.js using Rollup's terser plugin
- no source maps
Style
- compile using sass
- run through postcss with purgecss, autoprefixer and cssnano
Cache Busting
- create the assets and then hash the respective file's content and add hash to the filename
- replace original filename with filename with hash in index.html

Development Requirements

[Experimental] Contrast Calculation

WCAG2.0 calculates the contrast ratio between two colors depending on their relative luminance.

The relative luminance is calculated like this:

  luminance: function(red, green, blue) {
    var a = [red, green, blue].map(function(v) {
      v /= 255;
      return v <= 0.04045
        ? v / 12.92
        : Math.pow((v+0.055) / 1.055, 2,4);
    });
    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
  },

However, this article states, that the Y of XYZ corresponds to the relative luminance already.

Experiment

Define two colors (a, b) in sRGB colorspace. Calculate their contrast ratio in sRGB using the functions of WCAG2.0 and then use their corresponding XYZ representations to calculate the contrast ratio depending on Y alone.

Result

As of 28b7d7b

When RGB-based inputs are used to set the color (RGB, HSL, HWB), the
values of both methods correspond within an acceptable error margin
(talking 1/1000 here).
When the okLCH-based input is used, the methods vary significantly.
Probably this is not an issue of the actual calculating, but the
clipping when converting the XYZ color (as it is stored internally) to
RGB (ColorizerColor.toRgb()). This is already tracked as an issue
(#25), which might need higher prio.

So What?

Actually not yet sure. It feels better and more modern to use the
XYZ Y component directly. This will work out ok, as soon as #25 is
fixed, but will still not be perfect in line with WCAG2.0
Possibly this is another subject for #23, letting the app's user make
the decision, depending on his use case (if he's using RGB notation in
his use case, he might want the more correct RGB-based calculation,
but when he is already using XYZ or another (bigger) colorspace, he
might want the XYZ Y solution).

Force colors into gamut

Internally, colors are stored in CIE XYZ D65 colorspace, which is really big (meant to provide the means to describe all visible colors). The different input methods are working on their respective color spaces (e.g. sRGB and Oklch), which are not congruent.

Colors must be forced into the color space's gamut. The easiest way is to just clip values, that are outside of the expected range, e.g. for sRGB values < 0 and > 1.

Currently this is the most basic implementation, just discarding these values. Might need more attention!

Resources

https://www.w3.org/TR/css-color-4/#binsearch
- this is just pseudo-code. Compare with implementation in colorjs / coluri and apply to our codebase
https://bottosson.github.io/posts/gamutclipping/

Build an overall layout

Overall

Palette Management

should be switchable between a compact and an extended output
- compact only shows a preview of the color, the label and the possible actions (provided as buttons)
- extended output shows all possible output formats #53
the display of output formats in extended view should be configurable
- this configuration can be persistent between reloads (tracked in #23)
pin or fixate the toggle buttons when scrolling
hide output toggle buttons when compact mode is activated

Color Add Form

must remove the boilerplate code in src/index.html, explicitly defining the whole form; must use templates instead, which are initialized in src/script/colorizer/interface/color-input-method.ts (#55)
should provide a reset button; might be implemented as set the form's color to xyz(0 0 0) (#55)
must be as accessible as possible (#55)
- refactor the current method of input method tooltips into a WCAG disclosure pattern, see this article for more info on accessible tooltips
- provide labels for all elements of the <form>
  - https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
  - https://webaim.org/techniques/forms/
- provide instructions how to use the <form>
  - https://www.w3.org/WAI/tutorials/forms/instructions/
  - https://webaim.org/techniques/forms/
input methods must be configurable (meaning: which methods should be visible?) (#55)
- Possible Solutions:
  - Make methods toggleable: Each method is associated with a toggle button and the corresponding <fieldset> is visible or hidden;
  - Group input methods: Group the input methods by color space (e.g. sRGB, OkLab, ...) and provide a tab-based interface

Palette Management

Implementation Idea

Todo

Resources

Class Serialization / Deserialization

Use library for database abstraction

As of now, the use of IndexedDB is implemented in the sources, with several problems, e.g. rather tight coupling.

Candidates

Setup development environment

Several tools should be in place to support the development:

NodeJS
- package.json This is not a NodeJS module, so no complete package.json is required. Provide some minimal meta information, but the focus is tracking dependencies here.
- Linting
  - lint-staged and simple-git-hooks (#15)
  - prettier (#15)
  - eslint, setup for TypeScript (#16)
  - typechecking using tsc (#16)
  - stylelint (see .stylelintrc @ mischback.de)
    - stylelint-config-standard-scss (#26)
    - stylelint-config-sass-guidelines (#26)
    - stylelint-config-property-sort-order-smaccs (#26)
    - ~~stylelint-config-prettier~~ Not longer required!
  - https://github.com/ai/size-limit
- TypeScript (see #11)
  - typescript / tsc (#16)
  - Rollup (#16)
  - ~~testing (jest)?~~ Skipped for now! See #19
- SASS (see #18)
  - sass (#26)
  - postcss (#26)
GitHub Actions
- Dependabot
  - gh-actions (monthly)
  - npm (monthly)
  - run against development branch
  - apply auto-approving
- development workflow
  - running linters on sources (TS and SASS) (#15)
  - ~~running tests on TS sources? coveralls?~~ Skipped for now! See #19
  - running build with Rollup (just to verify that this is working!)
- release workflow (#30)

Drag'n'drop sorting of palette items

Implementation Idea

Resources

Possible Libraries

Drag'n'Drop Sorting
- https://github.com/SortableJS/Sortable
  - evaluated and tested, worked out of the box as intended
  - might add some overload to the bundle, but it just works
- https://github.com/bevacqua/dragula
  - not evaluated, because SortableJS worked on first try
- https://github.com/LeaVerou/dragula2
  - not evaluated, because SortableJS worked on first try
- https://github.com/sindu12jun/table-dragger
  - not evaluated, because SortableJS worked on first try
Lexicographical Sorting
- https://github.com/Kayron013/LexoRank
  - rather minimal implementation great
  - does not limit string length internally, but most likely this isn't relevant for our use case
  - Settled for this one!
- https://github.com/kvandake/lexorank-ts
  - this is a TypeScript re-implementation of Atlassian's LexoRank and might be way over the top for the estimated number of palette items
  - no unittests
- https://github.com/wewatch/lexorank
  - fork of lexorank-ts (see above)
  - adds more means of configuration
  - might still be way over the top
  - has good test coverage

Provide styling for the ``<form>``

Follow up to #20, dependent on #18.

There is (PoC-grade) styling in this comment.

Release Workflow

This project is meant to be hosted using GitHub Pages.

Intended workflow

Happy hacking in feature branch
Create PR against development branch, running a default CI workflow including linting (#16 / #26) and testing (#19)
merge into development, create a PR against main and merge it into main
run a GitHub Action workflow to build the application, including
- .scss to .css (#18)
- .ts to .js (#11)
- cache busting including modification of index.html
Profit, new version is available at mischback.github.io/colorizer/

Resources

Notification system

As of now, there is no dedicated feedback about the internal operations of the application (beside the logging to the browser's console, which is not meant to be open by normal users).

A message system, where messages of different severities are visualized in the actual frontend would be great.

error grade messages must be closed by the user
warnings / informations disappear after a given period

mischback / colorizer Goto Github PK

colorizer's Introduction

colorizer

colorizer's People

Contributors

Stargazers

Watchers

colorizer's Issues

Problem

Research

Features

Why is the <form> logic the first refactoring subject?

Possible Fixes

Requirements

Resources

Potential Problem

Possible Fix

Resources

Fix

Reasoning

Candidates

Evaluation

Evaluation - Part II

Functional Requirements

Resources

Production Requirements

Development Requirements

Experiment

Result

So What?

Resources

Overall

Palette Management

Color Add Form

Implementation Idea

Todo

Resources

Candidates

Implementation Idea

Resources

Possible Libraries

Intended workflow

Resources

Recommend Projects

Recommend Topics

Recommend Org

Why is the `<form>` logic the first refactoring subject?