DEV Community: Dominic Myers

Dot Spinner

Dominic Myers — Sun, 23 Feb 2025 07:17:00 +0000

Last week, I got an itch, as I often do when checking the emails sent from Pinterest. There was one pin of an excellent animation of rings comprised of dots rotating around a centre, and, on each segment of the rotation, the dot would arrive back at its starting point - that's a terrible explanation. What I mean is, should the ring be comprised of 6 dots, then for every sixth of the whole rotation, the original dots location would match the location of the following dot; a ring consisting of 12 dots would be similar - in the time that the first ring took for the original dots location to be matched by the subsequent dots location, the original dots location would be matched by the subsequent dots location. I'm not explaining it well, sorry. It inspired me to replicate it in p5js, so that's what I did, though with some measure of trepidation, as I was sure it would require some level of trigonometry.

Now, I took GCSE maths, but trigonometry has always been something I was utterly terrified of. I blame it on slide rules that my Dad had and being completely unable to get it clear in my head—I've even taken courses on Khan Academy, but it's still something I can't seem to get straight in my head (geddit?).

Anyway, I figured out how to do the math to do it eventually (after significant research) but then got stuck trying to rotate the dots: interestingly, the number of dots increased by six on each ring, so 6, 12, 18, 24, 30, 36.

After pestering Oliwia, who was stuck in a meeting, I called my Dad and explained my situation. After he started talking about trigonometry for a few minutes, I remembered why it wouldn't stick. But, in the process of explaining it, I clocked that the rotation was based on an arbitrary figure within a loop and that by incrementing that figure, I could alter the placement of the dots:


draw() {
  this.p5.fill(this.fill);
  this.p5.noStroke();
  for (
    let j = 0 + this.increment;
    j < this.p5.TWO_PI + this.increment;
    j += this.step
  ) {
    this.p5.circle(
      this.x + (Math.cos(j) \* this.diameter) / 2,
      this.y + (Math.sin(j) \* this.diameter) / 2,
      this.dotWidth,
    );
  }
  const incrementValue = 360 / this.number / 3000;
  this.increment =
    this.increment + incrementValue >= this.step
      ? 0
      : this.increment + incrementValue;
}

After clocking that, I realised I didn't need to keep on incrementing the increment but could set it to zero once it had reached the step value, which was derived from:

this.step = p5.TWO_PI / this.number;

This means that each time the subsequent dot reached the position of the original dot, the animation could be reset! Instead of each ring rotating for the entire three hundred and sixty degrees, the inner ring rotated sixty degrees and returned to its original position. The next outer ring rotated twenty-one and two-thirds degrees, and so on. Neat eh? The original and my animation are here and here.

Sort HTML table only on child columns

Dominic Myers — Fri, 14 Feb 2025 08:43:00 +0000

I was recently asked to help sort table columns, but there was a specific use case. The original data was a mixture of arrays and objects; some of the object keys represented the text to display in the table cell, some of the arrays represented child elements, and some object keys would become further text within cells, meaning that the elements at the top of the JSON tree would be repeated an arbitrary number of times. The use case was that if a column header representing a child element should be clicked, only the children would be sorted, and the parents would remain in the same order.

After some head-scratching, I concluded that the table had to effectively be chunked into blocks identified by the ancestors of the currently selected column. These chunks could then be sorted, and after discarding the idea of sorting them in place, I realised I'd need to empty the table and place them all back in order - thankfully, good HTML practice meant that I had a table header and a table body to play with (do you hate it as much as I when people neglect to use a thead element?).

That explanation seems relatively straightforward, but it wasn't—it took an age of thinking and ensuring things worked as expected.

The following is the relevant function:


const headers = Array.from(thead.querySelectorAll("th"))

headers.forEach((header, index) => {
  header.addEventListener("click", () => {
    const rows = Array.from(tbody.querySelectorAll("tr"))
    const groupedRows = rows.reduce((acc, row) => {
      const cells = Array.from(row.querySelectorAll("td"))
      const key = cells.slice(0, index).map(cell => cell.textContent).join("|")
      if(!acc[key]) {
        acc[key] = []
      }
      acc[key].push(row)
      return acc
    }, {})
    Object.keys(groupedRows).forEach(key => {
      if(header.classList.contains("asc")) {
        groupedRows[key].sort((a, b) => {
          return a.children[index].textContent.localeCompare(b.children[index].textContent)
        })
      } else {
        groupedRows[key].sort((a, b) => {
          return b.children[index].textContent.localeCompare(a.children[index].textContent)
        })
      }
    })
    tbody.innerHTML = ""
    Object.keys(groupedRows).forEach(key => {
      groupedRows[key].forEach(row => {
        tbody.appendChild(row)
      })
    })
    headers.forEach(h => {
      if(h !== header) {
        h.classList.remove("asc")
        h.classList.remove("desc")
      }
    })
    if (header.classList.contains("asc")) {
      header.classList.remove("asc")
      header.classList.add("desc")
    } else {
      header.classList.remove("desc")
      header.classList.add("asc")
    }
  })
})

Here is a working example with data that bears no responsibility for that in the example data provided: https://replit.com/@annoyingmouse/Sort-only-on-child-columns?v=1

wc-trim-middle

Dominic Myers — Mon, 20 Jan 2025 10:43:00 +0000

I've lost track of the number of times I've needed to truncate text online, and I've tried all sorts of mechanisms, so when I came across Christian Heilmann's trimMiddle() function, I was happy as Larry.

So happy that I just had to convert it into a web component. After reading about how problematic people are finding styling web components from outside, I also decided to create it without a shadow DOM, and I'm pleased with the result.

There's a functional demo. However, I found it very frustrating to make it accept dynamic changes to the inner text. Have a play and see if it fits your requirements.

Container queries and column layouts.

Dominic Myers — Fri, 15 Nov 2024 16:22:00 +0000

We've recently introduced the possibility of new starters borrowing some of our old kit. A couple of factors have prompted this: we've found that beginners prefer using wooden takedown bows rather than the fancy aluminium ILF kit we purchased a few years - we don't know why; the feel of wood is nicer I guess, and the weight of the bow is lighter (people seem less inclined to lift heavy weights after the pandemic) - the other reason is that we can't be bothered popping stuff onto eBay and figuring out postage and all that stuff.

This means we need a way of recording our kit and who has it, so rather than killing another spreadsheet, I've added it to our web application. Using React Bootstrap, we have cards available, so each kit has a card, sometimes with images. But displaying the details of the kit is awkward. Adding and editing are easy, as I'm a fan of simple forms, but showing it is less straightforward and likely to take up a lot of space, so I thought about using CSS columns; so far, so good!

But it's responsive, so we need to alter the number of columns depending on the screen's width—which isn't helped by my adding a sidebar on broader screens. When the screen hit a specific width and the menu switched to the side, we were left with a hinterland situation when I used media queries on the whole document. What was once extensive in the main content ended up shrinking, thus affecting the columns' layout: I needed container queries, something I read about a little while ago and bookmarked.

After reading the article by Josh W Comeau (A Friendly Introduction to Container Queries) I knew how to do it too:


.responsive\_multi\_columns {
  container-type: inline-size;
  .columns {
    column-count: 1;
    column-gap: 0;
    dd {
      break-before: avoid-column;
    }
    @container (min-width: 36rem) { // 576px (sm)
      column-count: 2;
      column-gap: .25rem;
    }
    @container (min-width: 48rem) { // 768px (md)
      column-count: 3;
      column-gap: .5rem;
    }
    @container (min-width: 60rem) { // 960px (lg)
      column-count: 4;
      column-gap: 1rem;
    }
    @container (min-width: 75rem) { // 1200px (xl)
      column-count: 5;
      column-gap: 2rem;
    }
    @container (min-width: 87.5rem) { // 1400px (xxl)
      column-count: 6;
      column-gap: 2rem;
    }
  }
}

What was annoying, though, was the tendency for the definition list to break at what I found to be wrong places; this was solved by adding break-before: avoid-column; to the dd element - that worked a treat!

AskJS Toy problem

Dominic Myers — Sat, 31 Aug 2024 08:15:00 +0000

There was a post on Reddit last week that got me sort of excited (I probably need to get out more).

It's been removed now, but my RSS feed still has it:

Write a function that takes a string representing open hours and returns an object where the keys are days of the week and the values are the corresponding open hours. Missing days should still be represented as a key but with an empty string value.

Examples:

"Mon-Sun 11:00 am - 10 pm" would return:
{
Mon: "11:00 am - 10:00 pm", 
Tues: "11:00 am - 10:00 pm", 
Wed: "11:00 am - 10:00 pm", 
Thu: "11:00 am - 10:00 pm", 
Fri: "11:00 am - 10:00 pm", 
Sat: "11:00 am - 10:00 pm", 
Sun: "11:00 am - 10:00 pm"
}
"Mon-Thu, Sat 11 am - 9 pm / Fri 5 pm - 9 pm" would return:
{
Mon: "11:00 am - 9:00 pm",
Tues: "11:00 am - 9:00 pm",
Wed: "11:00 am - 9:00 pm",
Thu: "11:00 am - 9:00 pm",
Fri: "5:00 pm - 9:00 pm",
Sat: 11:00 am - 9:00 pm",
Sun: ""
}
Additional test cases:

"Mon-Sun 11 am - 12 am"

"Mon-Fri, Sat 11 am - 12 pm / Sun 11 am - 10 pm"

"Mon-Thu, Sun 11:30 am - 10 pm / Fri-Sat 11:30 am - 11 pm"

"Mon-Thu 11 am - 11 pm / Fri-Sat 11 am - 12:30 am / Sun 10 am - 11 pm"

This is what I came up with:

/*
 * Names regex groups are really handy! Remember to end a regex with a ";"!
 */
const timeRegex = /(?<sHour>\d{1,2})(\:(?<sMinute>\d{1,2}))?\s(?<sAmPm>am|pm)\s\-\s(?<eHour>\d{1,2})(\:(?<eMinute>\d{1,2}))?\s(?<eAmPm>am|pm)/;
const daysRegex = /\b([a-zA-Z]{3,4}\-?)\b/g;
/*
 * Our tests:
 */
const tests = [
  "Mon-Sun 11:00 am - 10 pm",
  "Mon-Sun 11 am - 12 am",
  "Mon-Thu, Sat 11 am - 9 pm / Fri 5 pm - 9 pm",
  "Mon-Fri, Sat 11 am - 12 pm / Sun 11 am - 10 pm",
  "Mon-Thu, Sun 11:30 am - 10 pm / Fri-Sat 11:30 am - 11 pm",
  "Mon-Thu 11 am - 11 pm / Fri-Sat 11 am - 12:30 am / Sun 10 am - 11 pm"
]
/*
 * Our original object
 */
const daysObj = { "Mon": "", "Tues": "", "Wed": "", "Thu": "", "Fri": "", "Sat": "", "Sun": "" }
/*
 * Our array of days from the object above
 */
const days = Object.keys(daysObj)
/*
 * Our function to format a time
 */
const formatTime = (hour, minute, AmPm) => `${hour}:${minute} ${AmPm}`
/*
 * Our function to format a time duration
 */
const generateTime = (sHour, sMinute, sAmPm, eHour, eMinute, eAmPm) => {
  const sTime = formatTime(sHour, sMinute, sAmPm)
  const eTime = formatTime(eHour, eMinute, eAmPm)
  return `${sTime} - ${eTime}`
}
/*
 * Iterate over the tests
 */
for (const test of tests) {
 /*
  * Start with a fresh version of the days object by copying the one from above.
  */
  const returnObj = Object.assign({}, daysObj)
  /*
   * First we need to chunks of the string seperated by " / "
   * We'll then iterate over each chunk.
   */
  for (chunk of test.split(" / ")) {
    /*
     * We'll then get all the days from the chunk.
     */
    const daysResult = chunk.match(daysRegex)
    /*
     * We'll then destructure the groups from the regex match. Named regex groups are really helpful for this as we
     * we can then access the values by name from the groups object, and have default values for those that might be 
     * undefined.
     */
    const { sHour, sMinute = '00', sAmPm, eHour, eMinute = '00', eAmPm } = timeRegex.exec(chunk.trim()).groups
    /*
     * We'll then generate the time from the values we've extracted from the regex match.
     */
    const timeString = generateTime(sHour, sMinute, sAmPm, eHour, eMinute, eAmPm)
    /*
     * We'll then iterate over the days we've extracted from the chunk.
     */
    for (let i = 0; i < daysResult.length; i++) {
      /*
       * If the last character of the day is a hyphen, we know we need to iterate over the days array we created above.
       */
      if (daysResult[i].charAt(daysResult[i].length - 1) === "-") {
        /*
         * We'll then iterate over the days array we created above and populate it with the time string we've generated.
         */
        for (let l = days.findIndex(e => e === daysResult[i].slice(0, -1)); l < days.length; l++) {
          if (days[l] !== daysResult[i + 1]) {
            returnObj[days[l]] = timeString
          } else {
            /*
             * If the current day isn't the same as the next day in the array, we'll break.
             */
            break;
          }
        }
      } else {
        /*
         * If the last character of the day is not a hyphen, we can just set that day with the time string we've 
         * generated.
         */
        returnObj[daysResult[i]] = timeString
      }
    }
  }
  /*
   * Display the result along with the test
   */
  console.log(test, JSON.stringify(returnObj, null, 2))
}

That was fun!

Notes:

Just to let you know, there's no error checking... because that wasn't in the requirements, though it should be easy enough to add. For instance, we need to consider:

In a range of days, does the second have an index before the first?
Is the start time after the end time?
What should happen with duplicate days, such that a date range is partially or replicated within another range, or a single day exists within a previous range?

Practicality over Purity

Dominic Myers — Mon, 26 Aug 2024 06:28:00 +0000

Image by Joshua Stairhime

It was Voltaire who said that perfect is the enemy of good; it was me in many interviews who answered, "I'm a perfectionist", whenever anyone asked if I had a weakness. That's not strictly true; it's just something I read years ago about what to answer when asked that question... to be honest, it's good advice and a darn sight better than saying, "Benign dictatorship" when asked about my management style (I still think I would have been brilliant in that role too).

Anyway, it wasn’t precisely Voltaire’s aphorism that prompted me to write this; it was more along the lines of grokking that sometimes, being a purist can get in the way of making a useful thing. Let me explain a little more. I’ve been playing with Web Components for a long time, long before they became as popular as they seem to be now, and whenever I’ve created them, I’ve been conscious that the best place for them would be on NPM. Once on NPM, they can be imported using skypack or unpkg and used wherever without downloading and hosting them; they should work (Indeed, whenever I demo them on CodePen, that’s what I do to check the mechanism works).

To ensure that as many people find them helpful as possible, I make them as perfect as possible, anticipate where they might be used, and make them as flexible as possible. Even in the case of input elements, I try to make them form-associated (though that’s been a massive issue in the past—thanks to a dearth of information on making elements form-associated). This has stopped me from creating and using them in a more bespoke manner up until recently.

Recently, I’ve been involved as a subject-matter-expert (due to suffering a specific condition) with consulting and testing a research tool. I was provided with the underlying questionnaire to be used in that research. We were informed that a development team had been tasked with converting that questionnaire into an online tool which would record answers over days, weeks and months, and I thought that would be a fun way of filling a weekend – to try converting it myself. I’d also been reading about Beer CSS, which aims to translate a modern UI into an HTML semantic standard, which also sounded like a fun tool to play with.

As I started developing the application, I noticed that there would be many repeated code blocks. Each daily question was repeated six times, and the weekly question was repeated fourteen times. Once I started coding it, I noticed the only difference between the questions was the specific language used and the options. Each question had a radio button to click for the value appropriate to the respondent. This was a perfect place to use a slot within a web component!

I started with the weekly question and copied the markup I’d already implemented:

<article class="large-padding">
  <i>lock_open</i>
  <p>
    <slot></slot>
  </p>
  <div class="grid d-grid-10">
    <div class="col s10 m5 l2">
      <label class="radio">
        <input type="radio"
               name="Domain-2-1"
               value="0">
        <span class="bold">None</span>
      </label>
    </div>
    <div class="col s10 m5 l2">
      <label class="radio">
        <input type="radio"
               name="Domain-2-1"
               value="1">
        <span class="bold">A little bit</span>
      </label>
    </div>
    <div class="col s10 m5 l2">
      <label class="radio">
        <input type="radio"
               name="Domain-2-1"
               value="2">
        <span class="bold">Moderately</span>
      </label>
    </div>
    <div class="col s10 m5 l2">
      <label class="radio">
        <input type="radio"
               name="Domain-2-1"
               value="3">
        <span class="bold">Quite a bit</span>
      </label>
    </div>
    <div class="col s10 m5 l2">
      <label class="radio">
        <input type="radio"
               name="Domain-2-1"
               value="4">
        <span class="bold">Extreme</span>
      </label>
    </div>
  </div>
</article>

You’ll no doubt appreciate the sheer amount of copying and pasting required to get fourteen of these on the page simultaneously, but this translated into the following template literal within the component:

`
<article class="large-padding">
  <i${this.#disabled ? ' class="tertiary-text"' : ""}>
    ${this.#locked || this.#disabled ? "lock" : "lock\_open"}
  </i>
  <p><slot></slot></p>
  <div class="grid d-grid-10">
    ${this.labels.map((label, i) => `
      <div class="col s10 m5 l2">
        <label class="radio">
          <input type="radio"
                 name="${this.name}"
                 value="${i}"
                 ${this.#value === i ? " checked" : ""}
                 ${this.#locked || this.#disabled ? " disabled" : ""} />
          <span class="bold">${label}</span>
        </label>
      </div>
    `).join("")}
  </div>
</article>
`

It was much neater, especially as the constructor had the values hard-coded:

this.labels = [
  "None",
  "A little bit",
  "Moderately",
  "Quite a bit",
  "Extreme",
];

The keen-eyed amongst you will notice that we have several private values, namely #value, #locked, and #disabled. That’s not to say we don’t expose these values; we can set the value, locked, and disabled attributes, which will update the private values using getters and setters. Further, as we’ve defined the component as being form-associated, when we set the attribute from inside the element, the containing form can be notified of the change by dispatching a change event.

This is the complete code (as always, I’m more than happy to have input into how it might be improved):

import { v4 as uuidv4 } from "https://cdn.skypack.dev/uuid";

class WCEasyQ extends HTMLElement {
  #value = null;
  #locked;
  #disabled;

  static get observedAttributes() {
    return ["value", "name", "locked", "disabled"];
  }
  static formAssociated = true;

  constructor() {
    super();
    this.labels = [
      "None",
      "A little bit",
      "Moderately",
      "Quite a bit",
      "Extreme",
    ];
    this.internals = this.attachInternals();
    this.shadow = this.attachShadow({
      mode: "closed",
      delegatesFocus: true,
    });
    this.name = uuidv4();
  }

  get css() {
    return `
      <style>
        @import url("https://cdn.jsdelivr.net/npm/beercss@3.6.0/dist/cdn/beer.min.css");
        .d-grid-10 {
          margin-block-start: 1rem;
          ---gap: 1rem;
          display: grid;
          grid-template-columns: repeat(
            10,
            calc(10% - var(---gap) + (var(---gap) / 10))
          );
          gap: var(---gap);
        }
        article {
          & i {
            &.tertiary-text {
              cursor: not-allowed !important;
            }
            &:first-child {
              position: absolute;
              top: 10px;
              right: 10px;
              cursor: pointer;
            }
          }
        }
      </style>
    `;
  }

  get html() {
    return `
      <article class="large-padding">
        <i${this.#disabled ? ' class="tertiary-text"' : ""}>
          ${this.#locked || this.#disabled ? "lock" : "lock\_open"}
        </i>
        <p><slot></slot></p>
        <div class="grid d-grid-10">
          ${this.labels.map((label, i) => `
            <div class="col s10 m5 l2">
              <label class="radio">
                <input type="radio"
                       name="${this.name}"
                       value="${i}"
                       ${this.#value === i ? " checked" : ""}
                       ${this.#locked || this.#disabled ? " disabled" : ""} />
                <span class="bold">${label}</span>
              </label>
            </div>
          `).join("")}
        </div>
      </article>
    `;
  }

  set value(value) {
    if (value !== null) {
      this.setAttribute("value", Number(value));
      this.#value = Number(value);
    } else {
      this.removeAttribute("value");
      this.#value = null;
    }
    this.internals.setFormValue(this.#value);
  }

  get value() {
    this.#value =
      this.hasAttribute("value") && this.getAttribute("value") !== null
        ? Number(this.getAttribute("value"))
        : null;
    return this.#value;
  }

  set name(value) {
    this.setAttribute("name", this.name);
  }

  get name() {
    return this.hasAttribute("name") && this.getAttribute("name") !== null
      ? this.getAttribute("name")
      : this.name;
  }

  set locked(value) {
    this.#locked = value;
    this.render();
  }

  get locked() {
    this.#locked = this.hasAttribute("locked");
    return this.#locked;
  }

  set disabled(value) {}

  get disabled() {
    this.#disabled = this.hasAttribute("disabled");
    return this.#disabled;
  }

  handleDisabled(value) {
    this.render();
  }

  render() {
    if (this.shadow) {
      this.shadow.removeEventListener("change", this.handleChange);
    }
    if (this.icon) {
      this.icon.removeEventListener("click", this.handleClick);
    }
    this.shadow.innerHTML = `${this.css}${this.html}`;
    this.icon = this.shadow.querySelector("i");
    this.inputs = this.shadow.querySelectorAll("input");
    this.shadow.addEventListener("change", this.handleChange.bind(this));
    this.icon.addEventListener("click", this.handleClick.bind(this));
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      if (name === "locked") {
        this.#locked = this.hasAttribute("locked");
      }
      if (name === "disabled") {
        this.#disabled = this.hasAttribute("disabled");
      }
      if (name === "value") {
        this.value = newValue ? Number(newValue) : null;
      }
      this.render();
    }
  }

  handleClick(event) {
    event.preventDefault();
    this.#locked = !this.#locked;
    this.render();
  }

  handleChange(event) {
    this.value = Number(event.target.value);
    this.dispatchEvent(
      new CustomEvent("change", {
        bubbles: true,
        composed: true,
      }),
    );
  }

  connectedCallback() {
    this.render();
  }
}

customElements.define("wc-easy-question", WCEasyQ);

Except for the hardcoded label values, this is an inherently reusable component. Still, the next element—the daily question elements—was far more custom, not least because it was my first attempt at using a component as a table row. This is the markup I needed to produce:

<tr is="wc-easy-question-row"
    name="Domain-1-1"
    value="2">
  <th class="weight-normal vertical-align-bottom">
    1. Some <span class="bold">strong</span> and important question?
  </th>
  <td class="center-align">
    <label class="radio" title="Not limied at all">
      <input type="radio"
             name="Domain-1-1"
             value="0"
             class="middle center">
      <span></span>
    </label>
  </td>
  <td class="center-align">
    <label class="radio" title="A little limited">
      <input type="radio"
             name="Domain-1-1"
             value="1"
             class="middle center">
      <span></span>
    </label>
  </td>
  <td class="center-align">
    <label class="radio" title="Moderately limited">
      <input type="radio"
             name="Domain-1-1"
             value="2"
             class="middle center"
             checked="">
      <span></span>
    </label>
  </td>
  <td class="center-align">
    <label class="radio" title="Very limited">
      <input type="radio"
             name="Domain-1-1"
             value="3"
             class="middle center">
      <span></span>
    </label>
  </td>
  <td class="center-align">
    <label class="radio" title="Totally limited / unable to do">
      <input type="radio"
             name="Domain-1-1"
             value="4"
             class="middle center">
      <span></span>
    </label>
  </td>
</tr>

As you can see, we’re extending the HTMLTableRowElement and making it form-associated. This is the whole implementation:

import { v4 as uuidv4 } from "https://cdn.skypack.dev/uuid";

class WCEasyQRow extends HTMLTableRowElement {
  #value = null;
  #disabled = false;

  static get observedAttributes() {
    return ["value", "name", "disabled"];
  }

  static formAssociated = true;

  constructor() {
    super();
    this.labels = [
      "Not limied at all",
      "A little limited",
      "Moderately limited",
      "Very limited",
      "Totally limited / unable to do",
    ];
    this.name = uuidv4();
  }

  render() {
    this.removeEventListener("change", this.handleChange);
    const tds = this.querySelectorAll("td");
    for (const td of tds) {
      td.remove();
    }
    this.insertAdjacentHTML("beforeend", this.html);
    this.addEventListener("change", this.handleChange);
  }

  get html() {
    return this.labels
      .map(
        (label, i) => `
          <td class="center-align">
            <label class="radio"
                   title="${label}">
              <input type="radio"
                     name="${this.name}"
                     value="${i}"
                     class="middle center"
                     ${this.#disabled ? "disabled" : ""}
                     ${this.#value === i ? "checked" : ""} />
              <span></span>
            </label>
          </td>`,
      )
      .join("");
  }

  set name(value) {
    this.setAttribute("name", this.name);
  }

  get name() {
    return this.hasAttribute("name") && this.getAttribute("name") !== null
      ? this.getAttribute("name")
      : this.name;
  }

  set disabled(value) {}

  get disabled() {
    this.#disabled = this.hasAttribute("disabled");
    return this.#disabled;
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      if (name === "value") {
        this.#value = newValue ? Number(newValue) : null;
        this.render();
      }
      if (name === "disabled") {
        this.#disabled = this.hasAttribute("disabled");
        this.render();
      }
    }
  }

  connectedCallback() {
    this.render();
  }

  set value(value) {
    this.#value = Number(value);
    this.setAttribute("value", this.#value);
  }

  get value() {
    return this.hasAttribute("value") && this.getAttribute("value") !== null
      ? Number(this.getAttribute("value"))
      : null;
  }

  handleChange(event) {
    this.value = Number(event.target.value);
    if (this.#value !== Number(event.target.value)) {
      this.dispatchEvent(new Event("change"));
    }
  }
}

customElements.define("wc-easy-question-row", WCEasyQRow, {
  extends: "tr",
});

Creating these components didn’t save me much time over copying and pasting the relevant markup and changing the text and names of the radio inputs. Still, it did mean that should I discover an issue when creating the inputs, I only had to address the problem in one file for all the relevant inputs to be fixed simultaneously. And more importantly, it meant the classes would act as templates for future implementations. I’m not adding them to npm as they are only helpful to me, but I can think about abstracting the classes in the future so that they might be more flexible. The second example – the extended table row element – is unsuitable for reuse in any current project I’m working on, but it might be in the future.

Interestingly, I did have a minor issue with them due to the sheer number of moving parts. I originally had a render function that ran once when the component mounted. I then did all sorts of interesting internal DOM manipulation, but every so often, the elements would not reflect the changes. So every time something needs to change in the DOM, I re-render it, and things don’t mess up now.

My primary concern is the hard coding of the values, but I’ve read that passing complicated object data in an attribute is considered a bad thing, so I’m not sure how best to address that other than using slots. Sure, I could do complicated things like using JSON strings or Base64 encoded data, but that seems to be getting away from the spirit of web components. I’ve read about passing data using properties. Still, for this example, at least, the only hard-coded values are the labels for the inputs, and they stop the same, so I might as well leave them like that; making them properties might increase the utility of the classes and encourage internalisation and reuse.

Perhaps making them proper web components suitable for use by others and thus worthy of popping into NPM might be a job when I have a little time. Including the specific CSS for the first component might also be an attribute which would increase that component's utility.

But, going back to Voltaire, as you’ll doubtless clock from this rambling, while I embraced the less-than-perfect (no utility outside the specific project and no aim to upload to npm) in creating these two components, creating them meant that I could see how they might be made more perfect; I particularly enjoyed the whole locking mechanism, and this is something that I’d like to explore more, though with an appreciation that this might not be required elsewhere – perhaps the locking functionality needs to be made optional before I abstract the class further. You’ll also notice the inclusion of uuidv4 so that, should I forget to add the name when adding the component, the radio buttons will all share the same name, preventing more than one radio button from being checked at a time.

In this instance, I chose Practicality over Purity, and that's fine in my books... for now.

Create dot notation array of strings from an Object

Dominic Myers — Tue, 15 Nov 2022 08:41:00 +0000

Image by Maxim Polak

I created an object from an array of strings using dot notation last night. I did this because I had previously flattened an object into those strings. I spent a lot of time and effort trying to solve this problem, but then I asked a colleague if they could solve it using recursion. He did, and I'd like to share it here.

If we have this object:

{
  "thingOne": {
    "thingTwo": {
      "thingThree": true,
      "thingFour": true
    }
  },
  "thingyOne": {
    "thingyTwo": {
      "thingyThree": true,
      "thingyFour": true
    }
  }
}

Then this code:

(() => {

  const obj = {
    "thingOne": {
      "thingTwo": {
        "thingThree": true,
        "thingFour": true
      }
    },
    "thingyOne": {
      "thingyTwo": {
        "thingyThree": true,
        "thingyFour": true
      }
    }
  }

  const getObjStringsArr = (o = {}, arr = [], name = '') => {
    Object.keys(o).forEach(key => {
      if (o[key] === true) {
        arr.push(`${name}${key}`)
      } else {
        const nested = getObjStringsArr(o[key], arr, `${name}${key}.`)
        arr.concat(nested)
      }
    });
    return arr
  }

  console.log(getObjStringsArr(obj))

})()

It's brilliant having colleagues; it's even better having colleagues with giant brains! Thanks, Hamish!

It's not necessarily faster than my cludge, but it is far more elegant!

Create an Object from dot notation

Dominic Myers — Mon, 14 Nov 2022 20:29:00 +0000

Image by Oleksandr Klymovych

I was puzzled about this all afternoon. I came up with a terrible workaround using eval. Tonight, I did some more research and found this answer on StackOverflow. I've adapted it, and it seems to work a treat:

(() => {

  const obj = {}

  const expand = (output, mystr, value) => {
    const items = mystr.split(".") // split on dot notation
    let ref = output // keep a reference of the new object
    // loop through all nodes, except the last one
    for (let i = 0; i < items.length - 1; i++) {
      if (!ref[items[i]]) {
        // create a new element inside the reference
        ref[items[i]] = {}
      }
      ref = ref[items[i]] // shift the reference to the newly created object 
    }
    ref[items[items.length - 1]] = value // apply the final value
    return output // return the full object
  }

  const arr = [
    "thingOne.thingTwo.thingThree",
    "thingOne.thingTwo.thingFour",
    "thingyOne.thingyTwo.thingyThree",
    "thingyOne.thingyTwo.thingyFour"
  ]

  arr.forEach(a => {
    expand(obj, a, true)
  })

  console.log(obj)

})()

I was nearly there on my tod, TBH, but wussed out at the end; this is lovely! It produces this object:

{
  "thingOne": {
    "thingTwo": {
      "thingThree": true,
      "thingFour": true
    }
  },
  "thingyOne": {
    "thingyTwo": {
      "thingyThree": true,
      "thingyFour": true
    }
  }
}

wc-slider (An alternative to the range input)

Dominic Myers — Fri, 30 Sep 2022 08:26:00 +0000

Shameless brag! This got mentioned in WebToolsWeekly!

Image by Maksim Chernyshev

HTML is brilliant; it's an ever-growing standard; CSS is also pretty amazing! I say this because I was bored over the evenings this week and brushed off an old thing I started years ago to help me with the inability to style range inputs. You can do some cool styling on range inputs now, but when I created my initial component, it wasn't easy and involved many vendor prefixes, with some target browsers unable to handle even those. So I decided to write a component to get our designer's desired effect.

But - like I've said - I was bored this week, so I decided to revisit it; you can see the result on JSFiddle.

It was a lot of fun doing this, I'm not sure if I'll ever need it again, but it was a valuable learning experience. Asking for help from a mate meant that she could echo back something I've said to her many times before: "Have you tried flex?", so embarrassing, but it just goes to show! One issue was that I was sticking to the original CSS too much and didn't have to cope with variable-sized wc-sliders. You see, the little arrows behind the slider element moved depending on the number of elements in the slider.

The Drag-and-Drop mechanism took the most time and - as a result of checking my workings - I clocked I was using the getters for range, colourRange and deselectedRange far too much. I moved these to Private class features and only calculate them on render(). Thanks to the dictates of working with a designer, I also spent a fair bit of effort working with colours and gradients - a bit of a ballache, TBH, but I've got the functions now so that I can use them again in the future!

I do like the invertColor(hex, bw) though. That's tremendous fun and might be useful should you check what colour you need to set text atop different coloured backgrounds. Looking at it again now, though, I think the none bw might be a little borked; I'll fix it as and when I've time.

It's a bit CSS-heavy, but no worse for that, TBH; if you can do something with CSS, then it's better than firing up JS - let the browser do the work!

From the README:

Dragging the slider element will alter the value surfaced by the component from its value attribute (should the number in which the drop ends be greater than or equal to the constrain-min or less than or equal to the constrain-max)
Clicking on the numbers shown at the top of each step will alter the value surfaced by the component from its value attribute (should the number be greater than or equal to the constrain-min or less than or equal to the constrain-max).
Clicking on the triangles on either side of the slider will alter the value surfaced by the component from its value attribute by +/- 1 (should the number resulting from the click be greater than or equal to the constrain-min or less than or equal to the constrain-max).

As you can doubtless see, there are three ways of changing the value and - given the work I put into checking the bugger, no way for an invalid value to be produced - though you might not like the value. Having said that, if you manage to break it, please let me know, so I can fix it!

It has some default attributes so that you can test it for your use case.

Again, from the README:

The range of numbers, inclusive of min and max, should not be too large - tests have found that the ranges should not have more than 15 numbers, but YMMV.

One thing to consider in the future is whether or not to allow for a comma-separated list of hex values so that designers can adequately define what colours should appear on the wc-slider.

Fixing the Donut

Dominic Myers — Wed, 21 Sep 2022 14:34:00 +0000

Image by Jessica May

I've been playing with a pie-chart web component for a little while now, and I was thrilled with the result... until I started to use it in anger, that is.

The thing was, angles over 180 messed something up - I decided to revisit it this week after reading this article by Temani Afif, and I'm once again thrilled to see it working - and working correctly (at least in Chrome and Edge):

class DMPieChart extends HTMLElement {
  static get observedAttributes() {
    return [
      'width',    // width of the chart
      'duration', // duration of the animation
      'delay',    // delay before the animation
      'thickness' // thickness of the slices
    ];
  }
  get style() {
    return `
      <style>
        * {
          box-sizing: border-box;
        }
        div {
          width: ${this.width}px;
          height: ${this.width}px;
          position: relative;
        }
      </style>
    `
  }
  constructor() {
    super()
    this.shadow = this.attachShadow({
      mode: 'closed'
    })
    this.shadow.innerHTML = `
      ${this.style}
      <div>
        <slot name='pie-slices'></slot>
      </div>
    `
    try {
      window.CSS.registerProperty({
        name: '--p',
        syntax: '<number>',
        inherits: true,
        initialValue: 0,
      })
    }catch (e) {
      console.warn('Browser does not support animated conical gradients')
    }
  }
  connectedCallback() {
    const segments = [...this.querySelectorAll('dm-pie-slice')]
    const total = segments.reduce((p, c) => p + Number(c.getAttribute('value')), 0)
    let durationTotal = this.delay;
    let rotationTotal = 0
    const totalDegree = 360/total

    segments.forEach(segment => {
      const value = Number(segment.getAttribute('value'))
      const currentRotation = totalDegree * value
      const animationDuration = currentRotation / (360/Number(this.duration))
      segment.setAttribute('thickness', this.thickness * this.width)
      segment.setAttribute('end', (value / total) * 100)
      segment.setAttribute('rotate', rotationTotal)
      segment.setAttribute('delay', durationTotal)
      segment.setAttribute('duration', animationDuration)
      segment.setAttribute('width', this.width)
      rotationTotal += currentRotation
      durationTotal += animationDuration
    })
  }
  get width() {
    return Number(this.getAttribute('width')) || 150      // 150px by default
  }
  get duration() {
    return Number(this.getAttribute('duration')) || 5000  // 5 seconds by default
  }
  get delay() {
    return Number(this.getAttribute('delay')) || 500      // half a second by default
  }
  get thickness() {
    return Number(this.getAttribute('thickness')) || 0.2   // 60% of width by default
  }
}

class DMPieSlice extends HTMLElement{
  static get observedAttributes() {
    return [
      'width',      // width of the chart
      'duration',   // duration of the animation
      'delay',      // delay before the animation
      'color',      // color of the arc
      'thickness',   // thickness of the arc
      'rotate'      // how far to rotate the arc
    ];
  }
  get style() {
    return `
      <style>
        * {
          box-sizing: border-box;
        }
        div {
          --p: ${this.end};
          width: ${this.width}px;
          aspect-ratio: 1;
          margin: 0;
          position: absolute;
          left: 50%;
          top: 50%;
          animation-name: p;
          animation-fill-mode: both;
          animation-timing-function: ease-in-out;
          transform: translate(-50%, -50%);
          animation-duration: ${this.duration}ms;
          animation-delay: ${this.delay}ms;
        }
        div:before {
          content: "";
          position: absolute;
          border-radius: 50%;
          inset: 0;
          background: conic-gradient(from ${this.rotate}deg, ${this.color} calc(var(--p)*1%), transparent 0);
          -webkit-mask: radial-gradient(farthest-side, transparent calc(99% - ${this.thickness}px), #000 calc(100% - ${this.thickness}px));
          mask: radial-gradient(farthest-side,#0000 calc(99% - ${this.thickness}px), #000 calc(100% - ${this.thickness}px));
        }
        @keyframes p {
          from {
            --p: 0
          }
        }
      </style>
    `
  }
  constructor() {
    super();
    this.shadow = this.attachShadow({
      mode: 'closed'
    })
    this.shadow.innerHTML = `${this.style}<div/>`
  }
  get width() {
    return Number(this.getAttribute('width')) || 150      // 150px by default
  }
  get duration() {
    return Number(this.getAttribute('duration'))
  }
  get delay() {
    return Number(this.getAttribute('delay'))
  }
  get color() {
    return this.getAttribute('color') || '#000000'        // black by default
  }
  get thickness() {
    return Number(this.getAttribute('thickness'))
  }
  get rotate() {
    return Number(this.getAttribute('rotate'))
  }
  get end() {
    return Number(this.getAttribute('end'))
  }
}

window.customElements.define('dm-pie-chart', DMPieChart)
window.customElements.define('dm-pie-slice', DMPieSlice)

It is significantly cleaner but only animates within Chrome and Edge (everywhere else, it should just appear without animation, which is a shame).

I've also moved away from using the CSSStyleSheet interface as Safari throws a wobble when it's used without a polyfill, which is a shame as constructible/adoptable style sheets rock!

The animation is thanks to @property CSS at-rule. It is utterly brilliant, especially once I understood you could inject it via JS, as injecting it into the component's CSS didn't work at all - either via the static CSS or the constructible/adoptable CSS.

Bundling it into one file should also ease its adoption.

Sierpiński triangle

Dominic Myers — Mon, 19 Sep 2022 09:46:00 +0000

I was scrolling through TikTok a couple of evenings ago (I know, I'm probably far too old to do so, but now and again, there's gold!) and I came across the following video:

@flipperzer0 ♬ Levels - Live Session - Sarah Coponat

Anyway, inspired to give it a go, I worked up a p5 test, and it works!

const points = [
  [-75, 130],
  [-150, 0],
  [-75, -130],
  [75, -130],
  [150, 0],
  [75, 130],
  [75, 130],
]

const rand = (int) => Math.round(Math.random() * int)

const width = 600
const height = 600


function setup() {
  createCanvas(width, height)
  noStroke()
}

function draw() {
  background(0)
  fill(255, 255, 255)
  text(points.length, 50, 50)
  points.forEach(point => {
    circle(point[0] + (width /2), point[1] + (height /2), 1)
  })
  populateArray(10000, points)
}

const populateArray = (count, arr) => {
  for(let i = 0; i < count; i++){
    const target = points[rand(6)]
    const source = points[points.length - 1]
    const point = [
      Math.round((source[0] + (2/3) * (target[0] - source[0]))),
      Math.round((source[1] + (2/3) * (target[1] - source[1])))
    ]
    if(points.indexOf(point) === -1){
      points.push(point)
    }else{
      console.info('Duplicate removed')
    }
  }
}

~~For some unknown reason, and only every so often, the pattern goes wrong; does anyone have any idea why or how to fix it?~~

It's fixed now, you can find it here.

Sorting colours is a pain!

Dominic Myers — Mon, 12 Sep 2022 08:49:00 +0000

(Cover image by Garrick Ang)

I've written before about sorting colours, and this got me thinking about some work I'm doing in terms of converting some CSS to SCSS (with the proper use of CSS variables, I must add).

As such, I've been wading through some CSS, extracting colours, and then popping them into a :root CSS pseudo-class. I do this by looking for # and popping the colour into the function as and when I find them. The resulting text is well messy! I thought it couldn't be that hard to sort them similarly as employed in Google Sheets; so I came up with CSSColourSorter, which you're more than welcome to use or steal/borrow as you see fit.

It works by pasting in your whole :root directive - you'll then need to copy and paste the resulting test into your CSS/SCSS as noted before, though, sorting colours is a pain!

I've added a swatch beneath the textareas so you can see the new spectrum - mainly to check that I was doing things right!