amundo

<super-slider unit="em" target=".preview h1">
	<label for="title-size">Title font size</label>
	<input id="title-size" type="range" min="0.5" max="4" step="0.1" value="2" />
</super-slider>
<super-slider unit="em" target=".preview h2">
	<label>Subtitle font size</label>
	<input type="range" min="0.5" max="2.5" step="0.1" value="1.5" />
</super-slider>

<div class="preview">

amundo

Resources for learning Kaboom.js

https://kaboomjs.com/

Main site.

Here are the releases:

https://github.com/replit/kaboom/releases

amundo

  document.querySelectorAll('p')
  .forEach(p => p.style.border = '4px solid red')

amundo

// http://phrogz.net/SVG/convert_path_to_polygon.xhtml
function pathToPolygon(path,samples){
  if (!samples) samples = 0;
  var doc = path.ownerDocument;
  var poly = doc.createElementNS('http://www.w3.org/2000/svg','polygon');

  // Put all path segments in a queue
  for (var segs=[],s=path.pathSegList,i=s.numberOfItems-1;i>=0;--i) segs[i] = s.getItem(i);
  var segments = segs.concat();

amundo

/*

ANNOTATION_DOCUMENT - top level
  HEADER - unique top-level node containing references to media, and arbitrary name/value PROPERTY pairs
    MEDIA_DESCRIPTOR - links to media files

  PROPERTY - generic key-value element. wt actual f.

  TIME_ORDER - array of TIME_SLOTs
    TIME_SLOT - a single point in the timeline

amundo

<section class="intro">
  A long time ago, in a galaxy far,<br> far away....
</section>

<section class="logo">
      <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="693.615px" height="419.375px" viewBox="0 0 693.615 419.375" enable-background="new 0 0 693.615 419.375"
  xml:space="preserve">
  <g id="Layer_2">
    <g>

amundo

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg28094"
   viewBox="0 0 744.09448819 1052.3622047"

amundo

pdfjsLib.getDocument('helloworld.pdf')
  .then(pdf => pdf.getPage(1)
    .then(page => {
      var scale = 1.5
      var viewport = page.getViewport(scale)

      var canvas = document.createElement('canvas')
      var context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width

amundo

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="movies.xsl" ?>

<collection>  
  <movie>
    <title>Happy Gilmore</title>
    <year>1996</year>
    <genre>comedy</genre>
  </movie>
  <movie>

amundo

// This works on all devices/browsers, and uses IndexedDBShim as a final fallback 
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

// Open (or create) the database
var open = indexedDB.open("MyDatabase", 1);

// Create the schema
open.onupgradeneeded = function() {
    var db = open.result;
    var store = db.createObjectStore("MyObjectStore", {keyPath: "id"});