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

This is all you really need to know in order to make Action Mailbox work in development.

1. Fire up ngrok http 3000 and make note of your subdomain for steps 3 and 8.
2. Create a Mailgun account because they offer sandbox addresses; grab your domain from the Dashboard.
3. Go into Receiving and create a catch-all route pointing to: https://XXX.ngrok.io/rails/action_mailbox/mailgun/inbound_emails/mime
4. Add your Mailgun API key to your credentials:

action_mailbox:
 mailgun_api_key: API KEY HERE

leastbad

import { Controller } from 'stimulus'

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

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

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

Choices.js Stimulus wrapper

https://joshuajohnson.co.uk/Choices/

Soon, this will be published as an NPM package, but there's an absence of documentation right now. It supports almost all functions from the original library; soon it will support 100% of them.

This wrapper adds Ajax pre-fetch search. Happens if controller has a data-search-path attribute.

Stimulus controller targets use new v2 syntax. Controller attaches a reference to itself on the element so that you can access the internal state from external scripts.

leastbad

This controller can be put on body or any other element.

1. Adds a websocket accessor to the element
2. Controller exposes a connected boolean getter
3. Controller bails with a warning if no shared consumer is available
4. Element will have data-action-cable-connected or data-action-cable-disconnected attributes which can be used for CSS selectors
5. Element will emit action-cable:connected or action-cable:disconnected events only when state is flipping
6. Errors => Disconnected to keep things simple

I intend to document the navigator.onLine accessor and the window:online/offline events so devs can handle PWA modes.