leastbad

// https://github.com/rafrex/fscreen

'use strict';

var key = {
  fullscreenEnabled: 0,
  fullscreenElement: 1,
  requestFullscreen: 2,
  exitFullscreen: 3,
  fullscreenchange: 4,

leastbad

const isSelectorValid = (qs => (
  selector => {
    try { qs(selector) } catch (e) { return false }
    return true
  }
))(s => document.createDocumentFragment().querySelector(s))

leastbad

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

leastbad

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

leastbad

require 'socket'
server = TCPServer.new 5678

while session = server.accept
  request = session.gets
  puts request

  unless request.nil?

    filename = request.split(" ")[1]

leastbad

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "input" ]

  connect() {
    this.minHeight = this.inputTarget.dataset.minHeight
    if (this.minHeight == undefined) this.findLineHeight()
    this.update()
  }

leastbad

    def stimulate(target, data)
      dataset = {}
      data.each do |k, v|
        dataset["data-#{k}"] = v.to_s
      end
      channel.receive({
        "target" => target,
        "attrs" => element.attributes.to_h.symbolize_keys,
        "dataset" => dataset
      })

leastbad

import { Controller } from 'stimulus'

export default class extends Controller {
  initialize () {
    this.setInputAttributes()
    this.update()
  }

  update () {
    this.element.style.height = 'auto'

leastbad

With apologies for the half-baked solution presented, this is the interesting parts of a polymorphic comment engine that makes use of Stimulus, StimulusReflex and CableReady.

Note that app/javascript/controllers/index.js has to set application.consumer = consumer

This was written in the pre-morphs era, so I've done my best to fill in the blanks on what I'd do today in the Reflex.

Not shown: any view templates. Basic idea:

<%= render partial: "comments/comment", collection: @comments %>

leastbad

https://github.com/google/diff-match-patch