pl12133

var vConsoleHid = (function hookVirtualConsole(window, document, undefined) {
	var [ input, btn, container, log ] = [ 'input', 'button', 'div', 'div' ].map((tag) => document.createElement(tag));
	container.setAttribute('style',
		`position: fixed; z-index: 99999999; left: 10vw; width: 80vw; top: calc(80vh - 100px); height: 160px; border: 2px solid #ccc; background-color: rgba(0,0,0,.2); overflow-y: auto;`
	);
	input.setAttribute('style', 'width: 95%; position: absolute; bottom: 0; left: 0;' );
	input.setAttribute('placeholder', 'JavaScript' );
	btn.textContent = 'Eval';
	btn.setAttribute('style', 'width: 5%; position: absolute; bottom: 0; right: 0;' );
	function submitScript() {

pl12133

const http = require('http');
const path = require('path');
const fs = require('fs');
const port = process.env.PORT || 8080;
const host = process.env.HOST || '0.0.0.0';
const publicPath = __dirname;

function serveStatic(publicPath) {
	return function(request, response) {
		let url = '.' + request.url;

pl12133

import { h, Component } from 'preact';


function withScript(src) {
  return (Child) => class ScriptLoader extends Component {
    static script;

    componentWillMount() {
      if (typeof ScriptLoader.script === 'undefined') {
        ScriptLoader.script = document.createElement('script');

pl12133

/* Call a function when a fetch is made to a URL containing `str`
 * @param {String} str          if a URL being fetched contains this string, call {@param callback}
 * @param {Function} callback   a function to call when a fetch is made to the given {@param str}
 * @example <caption>Call debugger on fetches to `example.com`</caption>
 *
 * breakOnUrlMatch('example.com', () => { debugger; });
 */
function breakOnURLMatch(str, callback) {
       let nextOpen = XMLHttpRequest.prototype.open;
       XMLHttpRequest.prototype.open = function monkeypatchedOpen(...args) {

pl12133

/* A collection of React higher order components I have been working on */
 
// <If>, the simplest of HOCs, to conditionally render it's children
// Accepts a `test`, if `test === true`, then render the children; else render nothing
function If ({children, test}) {
  return Boolean(test)
    ? children
    : null
}
If.propTypes = {

pl12133

/* If you have a React event handler and you want to pass it more than just the `event` argument, you can
 * do so in the following ways.
 */
 
// using an inline Wrapper
handleEvent (someData, event) {
// ...
}
<MyComponent onEvent={(event) => this.handleEvent('someData', event)} />

pl12133

#!/bin/bash
function mkcomponent {
  if [ ! -z "${1}" ]
  then
    if [[ $PWD == *"src" ]]
    then
      if [ ! -d "./components/${1}" ]
      then
        echo 'Making Component' ${1}
        mkdir ./components/${1}

pl12133

function handleKeydown() {
  var unreadSelector = '.channel.channel-text.unread > a';
  var unreadIndex = 0;
  var getUnread = () => document.querySelectorAll(unreadSelector);
  var numUnread = getUnread().length;
  return function (e) {
    // Hotkey is CTRL + B (case insensitive)
    if (e && e.ctrlKey && e.keyCode == 'B'.charCodeAt(0)) {
      var newLength = getUnread().length;
      var unreadDelta = numUnread - newLength;

pl12133

// A tiny script to move channels around on the DiscordApp.com chat servers.
//
// Open up your console and paste in all the functions
// Then just call `moveChannelToTopByName` on the channel you want to pin to the top


function getIndexOfChannelByName(channel) {
  var channelTextList = document.querySelectorAll('#guild-channels > ul:nth-child(2) span.channel-name')
  return [].slice.call(channelTextList)
    .map(elem => elem.innerHTML)

pl12133

// Problem: How to make a "Loading" spinner or animation appear before a component is fully rendered?
// Solution: 
//   1. Allow the component to render once and display a <LoadingSpinner /> component,
//      and defer the change of `this.state.loading` until after component renders once

class SomethingWithLoadSpinner extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      loading: true