tomhodgins

// In an async IIFE with await
(async () => {
  const response = await fetch('http://api.open-notify.org/astros.json')
  const json = await response.json()

  console.log(json)
})();

// Using .then()
fetch('http://api.open-notify.org/astros.json')

tomhodgins

function onAttributes(node = document.createElement('span'), functions = {}) {
  if (
    node.attributes
    && node.attributes.length
  ) {
    Array.from(node.attributes)
      .filter(({name}) => name.startsWith('on:'))
      .forEach(({name, value}) => {
        node.addEventListener(
          name.replace(/^on:/, '').toLowerCase(),

tomhodgins

<script type=module>
  import computedVariables from 'https://unpkg.com/computed-variables/index.es.js';

  computedVariables(
    '--python',
    (value, event, rule) => {
      if ('brython' in window === false) {
        const tag = document.createElement('script');

        tag.onload = callback;

tomhodgins

@--important {
  .mobile-hero,
  .desktop-hero {
    background-image: none;
  }
  .home-hero .button {
    width: 100%;
    max-width: 500px;
    font-size: 1.75rem;
  }

tomhodgins

function html(strings, ...things) {
  function stringify(object = '') {
    if (Array.isArray(object)) {
      return object.map(stringify).join('')
    }
  
    if (object instanceof DocumentFragment) {
      return Array.from(object.childNodes)
        .map(node => node.outerHTML || node.nodeValue)
        .join('')

tomhodgins

// Tagged template function for parsing a template string as CSS stylesheet
// …you can remove async from this if you replace the dynamic import with:
// import {parse} from 'https://unpkg.com/cssomtools'
async function css(strings, ...things) {
  const {parse} = await import('https://unpkg.com/cssomtools')

  return parse(
    strings.reduce((styles, string, index) => styles + things[index - 1] + string)
  )
}

tomhodgins

<style>
  json- {
    --string: "Hello World";
    --number: 1e3;
    --object: {"hello": "world"};
    --array: [1, 2, 3];
    --true: true;
    --false: false;
    --null: null;
  }

tomhodgins

function object2microxml(object) {
  function consume(object) {
    // Null
    if (object === null) {
      return ['null', {}, ['null']]
    }

    // Array
    if (object instanceof Array) {
      return ['array', {}, object.map(function(child) { return consume(child) })]

tomhodgins

{
  const fonts = new Set()

  document.querySelectorAll('*').forEach(tag => fonts.add(getComputedStyle(tag).fontFamily))

  console.log(fonts)

  document.body.insertAdjacentHTML('beforeEnd', `
    <font-demo>
      <style>

tomhodgins

/* Either external library of these helper rules exist */
/* Or can be added to any stylesheet */

--big {
  font-size: xx-large;
}

--red {
  color: #c00;
  background: white;