Rich-Harris

easy:

🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐻‍❄️ 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🐔 🐧 🐦 🐤 🐣 🐥 🦆 🦅 🦉 🦇 🐺 🐗 🐴 🦄 🐝 🪱 🐛 🦋 🐌 🐞 🐜 🪰 🪲 🪳 🦟 🦗 🕷 🕸 🦂 🐢 🐍 🦎 🦖 🦕 🐙 🦑 🦐 🦞 🦀 🪸 🐡 🐠 🐟 🐬 🐳 🐋 🦈 🐊 🐅 🐆 🦓 🦍 🦧 🦣 🐘 🦛 🦏 🐪 🐫 🦒 🦘 🦬 🐃 🐂 🐄 🐎 🐖 🐏 🐑 🦙 🐐 🦌 🐕 🐩 🦮 🐕‍🦺 🐈 🐈‍⬛ 🪶 🐓 🦃 🦤 🦚 🦜 🦢 🦩 🕊 🐇 🦝 🦨 🦡 🦫 🦦 🦥 🐁 🐀 🐿 🦔

medium:

🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🍆 🥑 🥦 🥬 🥒 🌶 🫑 🌽 🥕 🫒 🧄 🧅 🥔 🍠 🫘 🥐 🥯 🍞 🥖 🥨 🧀 🥚 🍳 🧈 🥞 🧇 🥓 🥩 🍗 🍖 🦴 🌭 🍔 🍟 🍕 🫓 🥪 🥙 🧆 🌮 🌯 🫔 🥗 🥘 🫕 🥫 🍝 🍜 🍲 🍛 🍣 🍱 🥟 🦪 🍤 🍙 🍚 🍘 🍥 🥠 🥮 🍢 🍡 🍧 🍨 🍦 🥧 🧁 🍰 🎂 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🌰 🥜 🍯 🥛 🍼 🫖 🍵 🧃 🥤 🧋 🫙 🍶 🍺 🍻 🥂 🍷 🫗 🥃 🍸 🍹 🧉 🍾 🧊 🥄 🍴 🍽 🥣 🥡 🥢 🧂

hard:

Rich-Harris

I saw this poll on Twitter earlier and was surprised at the result, which at the time of writing overwhelmingly favours option 1:

I've always been of the opinion that the (req, res, next) => {} API is the worst of all possible worlds, so one of two things is happening:

• I'm an idiot with bad opinions (very possibly!)
• People like familiarity

Rich-Harris

// re https://stackoverflow.com/questions/62621666/how-can-i-reliably-merge-objects-from-these-2-arrays-and-loop-the-resulting-arra/62623714?noredirect=1#comment110766294_62623714

function with_nested_for_each([a, b]) {
	const result = [];

	a.forEach(p => {
		b.forEach(q => {
			if (p.code === q.code) {
				result.push(Object.assign({}, p, q));
			}

Rich-Harris

This is a copy of an early attempt to imagine an implementation of 'style properties' in Svelte, as described in this RFC. It is preserved here to satisfy curiosity, or in case we hate the new one.

---

Style properties — handily distinguishable from regular properties by the leading -- used by CSS custom properties — are passed down to components through a separate channel. The example at the top of this RFC might be converted to the following JavaScript:

const slider = new Slider({
  props: {
    value: ctx.value,

Rich-Harris

You have an array. Its sort order doesn't matter. You want to remove an item from this array.

The obvious thing to do would be to use splice:

function remove(array, item) {
  const index = array.indexOf(item);
  array.splice(index, 1);
}

Rich-Harris

Responding to https://mobile.twitter.com/Sawtaytoes/status/1120478565454307328:

Here's an example component representing a work-in-progress screen for a concert ticket sales website, built for a recent demo:

<script>
  let type;
  let count = 1;
  let seconds = 300;

Rich-Harris

const fs = require('fs');
const { ReadableStream, TransformStream, WritableStream} = require('web-streams-polyfill/ponyfill/es2018');

function createReadStream(file, opts) {
  return new ReadableStream({
    start(controller) {
      const stream = fs.createReadStream(file, opts);
      stream.on('readable', () => {
        const data = stream.read();
        controller.enqueue(data);

Rich-Harris

I'm procrastinating instead of working on a conference talk, so I decided to implement this component in Svelte to see which framework is most expressive:

Ember Octane

Here's the original, with the addition of an import for dataUriAsSrc (and updated per @chriskrycho's comment):

<img

Rich-Harris

WICG/webcomponents#759

Suppose you have an app like this, and your bundler turns .css files into strings:

// main.js
import './x-foo.js';
import './x-bar.js';

document.body.innerHTML = ``;

Rich-Harris

So far, most of us have been writing Svelte components into .html files, with a few exceptions (Parcel users, for example, have additional constraints to work with). We're currently discussing whether this should change.

Once you've read the pros and cons, please vote!

.html

Pros:

• It signals that you can use your existing HTML (and CSS) knowledge
• Valid HTML is valid Svelte