```html

<script> let counter = 0; let evens = 0; $: { if (counter > 10) { break $; } if (counter % 2 === 0) { evens++; } } </script>

<button on:click={() => (counter++)}> Increment </button>

Counter: {counter}, evens before 10: {evens}

```

```js / * twitter-entities.js * This function converts a tweet with "entity" metadata * from plain text to linkified HTML. * * See the documentation here: http://dev.twitter.com/pages/tweet_entities * Basically, add ?include_entities=true to your timeline call * * Copyright 2010, Wade Simmons * Licensed under the MIT license * http://wades.im/mons * * Requires jQuery /

function escapeHTML(text) { return $('<div/>').text(text).html() }

function linkify_entities(tweet) { if (!(tweet.entities)) { return escapeHTML(tweet.text) }

// This is very naive, should find a better way to parse this
var index_map = {}

$.each(tweet.entities.urls, function(i,entry) {
    index_map[entry.indices[0]] = [entry.indices[1], function(text) {return "<a href='"+escapeHTML(entry.url)+"'>"+escapeHTML(text)+"</a>"}]
})

$.each(tweet.entities.hashtags, function(i,entry) {
    index_map[entry.indices[0]] = [entry.indices[1], function(text) {return "<a href='http://twitter.com/search?q="+escape("#"+entry.text)+"'>"+escapeHTML(text)+"</a>"}]
})

$.each(tweet.entities.user_mentions, function(i,entry) {
    index_map[entry.indices[0]] = [entry.indices[1], function(text) {return "<a title='"+escapeHTML(entry.name)+"' href='http://twitter.com/"+escapeHTML(entry.screen_name)+"'>"+escapeHTML(text)+"</a>"}]
})

var result = ""
var last_i = 0
var i = 0

// iterate through the string looking for matches in the index_map
for (i=0; i < tweet.text.length; ++i) {
    var ind = index_map[i]
    if (ind) {
        var end = ind[0]
        var func = ind[1]
        if (i > last_i) {
            result += escapeHTML(tweet.text.substring(last_i, i))
        }
        result += func(tweet.text.substring(i, end))
        i = end - 1
        last_i = end
    }
}

if (i > last_i) {
    result += escapeHTML(tweet.text.substring(last_i, i))
}

return result

} ```

```html <img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"

```

```js if (navigator.mediaDevices) { console.log("getUserMedia supported.");

const constraints = { audio: true }; let chunks = [];

navigator.mediaDevices .getUserMedia(constraints) .then((stream) => { const mediaRecorder = new MediaRecorder(stream);

  visualize(stream);

  record.onclick = () => {
    mediaRecorder.start();
    console.log(mediaRecorder.state);
    console.log("recorder started");
    record.style.background = "red";
    record.style.color = "black";
  };

  stop.onclick = () => {
    mediaRecorder.stop();
    console.log(mediaRecorder.state);
    console.log("recorder stopped");
    record.style.background = "";
    record.style.color = "";
  };

  mediaRecorder.onstop = (e) => {
    console.log("data available after MediaRecorder.stop() called.");

    const clipName = prompt("Enter a name for your sound clip");

    const clipContainer = document.createElement("article");
    const clipLabel = document.createElement("p");
    const audio = document.createElement("audio");
    const deleteButton = document.createElement("button");

    clipContainer.classList.add("clip");
    audio.setAttribute("controls", "");
    deleteButton.textContent = "Delete";
    clipLabel.textContent = clipName;

    clipContainer.appendChild(audio);
    clipContainer.appendChild(clipLabel);
    clipContainer.appendChild(deleteButton);
    soundClips.appendChild(clipContainer);

    audio.controls = true;
    const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
    chunks = [];
    const audioURL = URL.createObjectURL(blob);
    audio.src = audioURL;
    console.log("recorder stopped");

    deleteButton.onclick = (e) => {
      const evtTgt = e.target;
      evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
    };
  };

  mediaRecorder.ondataavailable = (e) => {
    chunks.push(e.data);
  };
})
.catch((err) => {
  console.error(`The following error occurred: ${err}`);
});

} ```

```js const canvas = document.querySelector("canvas");

// Optional frames per second argument. const stream = canvas.captureStream(25); const recordedChunks = [];

console.log(stream); const options = { mimeType: "video/webm; codecs=vp9" }; const mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable; mediaRecorder.start();

function handleDataAvailable(event) { console.log("data-available"); if (event.data.size > 0) { recordedChunks.push(event.data); console.log(recordedChunks); download(); } else { // … } } function download() { const blob = new Blob(recordedChunks, { type: "video/webm", }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; a.click(); window.URL.revokeObjectURL(url); }

// demo: to download after 9sec setTimeout((event) => { console.log("stopping"); mediaRecorder.stop(); }, 9000); ```

It's not a bug, it's a feature - they say.

React DX is so special...

js export default { async tail(events) { fetch("https://example.com/endpoint", { method: "POST", body: JSON.stringify(events), }) } }