panphora

Local ES Modules Without a Server

Why Use This?

Sometimes you just want to write modular JavaScript without the overhead of:

• Starting a development server
• Setting up a build process
• Dealing with CORS issues on file:// protocol
• Installing Node.js or any tooling

panphora

(() => {
  // Remove any existing highlights
  document.querySelectorAll('.overflow-highlight').forEach(el => {
    el.style.outline = '';
    el.classList.remove('overflow-highlight');
  });

  // Get viewport width
  const viewportWidth = document.documentElement.clientWidth;
  

panphora

import React, { useState } from 'react';

const useEditable = (initialText) => {
  const [text, setText] = useState(initialText);
  const [isEditingDraft, setIsEditingDraft] = useState(false);
  const [draftText, setDraftText] = useState(text);

  const enableEditingDraft = () => {
    setDraftText(text);
    setIsEditingDraft(true);

panphora

/*

  Files in directories in "ephemeral" will be deleted 
  when they're older than the name specified by the directory

  For example:
  - Files in directory "min5" won't be older than 5 minutes
  - Files in directory "min15" won't be older than 15 minutes
  - Files in directory "day30" won't be older than 30 days

panphora

function animateFavicon () {
  const frameDelay = 10;
  const angleChange = .5;
  let angle = 0;
  let lastFrameTime = 0;

  const favicon = document.querySelector("[rel='icon']");
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

panphora

/*

  # calculate your taxes in your browser console

  ## Usage ##

  taxes.bracket(0, 22000, .10)
  taxes.bracket(22001, 89450, .12);
  taxes.bracket(89451, 190750, .22);

panphora

/*
  
# taxes.js - calculate Federal Taxes

## Usage:

taxes.bracket(0, 22000, 0.10)
taxes.bracket(22001, 89450, 0.12);
taxes.bracket(89451, 190750, 0.22);

panphora

import toastNotification from "./toast-notification";
import {callEventCallbacks} from "./event-callbacks";

let emailPlatforms = [
  {
    urlIncludes: ".convertkit.com/forms",
    subscribeFunction: addSubscriberToConvertKit
  },
  {
    urlIncludes: ".list-manage.com/subscribe",

panphora

<style>
/* never show exit intent pop: */
.polite-pop__pop--exit-intent {
    display: none !important;
}
</style>

<script>
  let politeScript = document.createElement("script"); 
  politeScript.src = "https://cdn.politepop.com/polite-pop-v1.5.0/polite-pop.min.js";

panphora

/*

  DON'T ALLOW THESE USERNAMES IN YOUR APP

  if you want to allow www.yourapp.com/{username}

  here are the words you wouldn't want people to use
  as their username

  words followed by star (*) mean you don't want to