noamr

Importing a script from external script:

// script.js
export const something = "foo";

// importing
import {something} from "script.js"

Importing a style from an external style, with @sheet:

noamr

Self-Review Questionnaire: Security and Privacy

1. What information does this feature expose, and for what purposes?

It does not expose information.

2. Do features in your specification expose the minimum amount of information necessary to implement the intended functionality?

noamr

      async function after_next_paint() {
        const p = document.createElement("p");
        p.innerText = "1"
        p.style.transform = "rotateX(90deg)";
        p.style.pointerEvents = "none";
        p.style.position = "fixed";
        p.style.left = "0";
        p.style.top = "0";
        p.setAttribute("elementtiming", "foo");
        document.body.append(p);

noamr

const track = new PerformanceTrack();

// At some point
track.mark(name);

// At some other point
track.mark(name);

// Combines mark->mark as a single entry with duration
track.measure(name);

noamr

const next_frame = () => Promise(resolve => requestAnimationFrame(ts => resolve(ts));

async function get_img_presentation_time(img) {
  // Wait until image is fully loaded
  await new Promise(resolve => img.complete ? resolve() : img.addEventListener("load", resolve))

  let frame_timestamp = await next_frame();

  // Wait until we have the frame timestamp soonest after the image was decoded.

noamr

const events = [];
let current_dequeue_end = 0;
function dequeue() {
  // Ready to process, will send all current events.
  current_dequeue_end = events.length;
  fetchLater(makeURL(events)).then(({activated}) => {
    if (activated) {
      // Success, remove processed sub-array from the array and reset the index.
      events.splice(0, current_deque_end);
      current_dequeue_end = 0;

noamr

VT and types: fallbacks

The use-case: a page where elements transition to each other, but only if they're loaded. If the page is only partially loaded without those elements, the whole root elements transitions with a fade.

Old document:

@view-transition {
 navigation: auto;

noamr

VT Use case for types

!!DEPRECATED!!

Music App

Going back to the original use case for types. We have a music app with 4 pages:

• Home
• Playlist

noamr

(function() {
    let pending_loaf_entries = [];
    let pending_event_entries = [];
    let timeout_handle = null;
    const combined_map = new Map();

    function print() {
        const entries = [...combined_map.entries()].sort((a, b) => b.duration - a.duration);
        console.log(entries.map(([loaf, event]) => {
            let longest_script = null;

noamr

function hasPendingIncomingTransition() { }
function isRenderBlocked() { }
function continueIncomingTransition() { }

let hasSeenFold = false;
let lastFoldCheckTime = performance.now();
const FoldCheckThrolttle = 100;

function didSeeFold() {
  if (hasSeenFold || !hasPendingIncomingTransition())