zemlan.in

time-stamp

Где я продолжаю минифаить и эмбедить

Обожаю рисовать/размышлять в Linea на айпаде. Но иногда не хватает инструмента для быстрого "штампования" даты или произвольного текста (типа заголовки или "TODO"). Поэтому сделал его сам, чтобы открывать в Сафари side-by-side с Линеей (unminified код; интерактив в самом конце записи):

<body onload="(
  canvas => {
    let context,
      initiateContext = () => {
        canvas.width = blockElement.clientWidth
        context = canvas.getContext('2d')
        context.font = '48px Menlo'
      },
      renderIntoImg = (text, word, wordWidth, cursorX = 6, cursorY = 44) => {
        context.fillStyle = '#0a0'
        context.fillRect(0, 0, canvas.width, canvas.height)
        context.fillStyle = '#fff'
        for(word of text.split(' ')) {
          wordWidth = 28.9 * word.length
          if (6 < cursorX && cursorX + wordWidth >= canvas.width) {
            cursorX = 6
            cursorY += 48
          }
          context.fillText(word, cursorX, cursorY)
          cursorX += wordWidth + 28.9
        }
        imgTag.src = canvas.toDataURL()
      },
      render = () => renderIntoImg(labelInput.value || new Date().toISOString().replace(/\.\d+/, ''));
    (onresize = () => render(initiateContext()))()
    setInterval(labelInput.oninput = render, 1000)
  }
)(document.createElement('canvas'))">
<input id=labelInput placeholder=label>
<img id=imgTag>
<p id=blockElement>

Сначала хотел уместить в твит, как таймер, но после нескольких часов обрезания функционала удалось ужать 502 символов, так что бросил эту затею — уж больно не хочется вырезать переносы текста на несколько строк

Большую часть трюков уже описывал в записи про таймер, но и при уменьшении штамповщика нашлась пара новых — и все в строке (onresize = () => render(initiateContext()))(), которая до минификаций выглядела приблизительно так:

function init() {
  initiateContext();
  render();
}
init();
window.addEventListener("resize", init);

Тут тебе и "assignment as expression", и IIFE, и использование глобального скоупа для обработки событий windowа, и злоупотребление пустых сигнатур функций…

Так как это уже вторая подобная микроутилитка (μ🐌), задумался о том, чтобы хостить их где-то с нормальным интерфейсом и рядом с текстовым описанием, как это делают игроделы на itch.io. Но там вроде как только игры и связанное с ними. Так что допилил нормальный(?) интерфейс прямо здесь:

time-stamp
time-stamp