Dot Spinner

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

By Onyengradar Hanafi

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

By Marie Vander Meiren

I've lost count 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 handy demo, and I have to say that getting it to respect changes to the inner text dynamically was an utter PITA! Have a play and see if it fits your requirements.