Skip to content

Instantly share code, notes, and snippets.

Rich Harris Rich-Harris

Block or report user

Report or block Rich-Harris

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@Rich-Harris
Rich-Harris / README.md
Last active May 7, 2019
Testing array.splice vs array.pop vs set.delete
View README.md

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
Rich-Harris / README.md
Last active Apr 23, 2019
Svelte vs Knockout
View README.md
@Rich-Harris
Rich-Harris / index.js
Last active Apr 16, 2019
whatwg stream utils
View index.js
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
Rich-Harris / README.md
Last active May 16, 2019
Source bytes: React vs Ember Octane vs Svelte
View README.md

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:

Screen Shot 2019-03-30 at 16 42 16

Ember Octane

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

<img
@Rich-Harris
Rich-Harris / README.md
Last active Mar 7, 2019
Optimising CSS modules
View README.md

https://github.com/w3c/webcomponents/issues/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 = `<x-foo></x-foo><x-bar></x-bar>`;
@Rich-Harris
Rich-Harris / extensions.md
Last active Feb 8, 2019
What should be the canonical file extension for Svelte components?
View extensions.md

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
@Rich-Harris
Rich-Harris / streams.md
Last active Jan 22, 2019
Notes on Node streams
View streams.md

I have a real mental blockage around this stuff. Partly because the docs could probably be a little better, partly because it's changed over the years, probably partly because I'm dumb. Whatever. I'm going to try and document how to do stuff I occasionally need to do, so I can refer to it next time.

Return value of pipe

x.pipe(y) === y; // true
x.on(someEvent, callback) === x; // true
View diff.md

A concept diff from Svelte 2 to 3

-A component must have a default export, but the default export is not the component
-The default export and its properties must be structured a certain way, you can't just use JavaScript
-Components, actions, animations, transitions, custom events etc must be registered, not just imported
-Components can be registered with a shorthand, because the normal way is cumbersome
-methods are attached to the prototype, and `this` is the component, even though it looks (including to linters and typecheckers) as though the `methods` object itself is the context
-Events must be method calls, not arbitrary expressions
-`event` has a special meaning in method calls, as does `this`, as does `refs`, as do `console` and other special names
@Rich-Harris
Rich-Harris / what-is-svelte.md
Last active May 23, 2019
The truth about Svelte
View what-is-svelte.md

I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.

But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.

Svelte is a language.

Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?

A few projects that have answered this question:

@Rich-Harris
Rich-Harris / README.md
Last active Apr 28, 2019
first-class binding syntax
View README.md

A modest proposal for a first-class destiny operator equivalent in Svelte components that's also valid JS.

Svelte 2 has a concept of computed properties, which are updated whenever their inputs change. They're powerful, if a little boilerplatey, but there's currently no place for them in Svelte 3.

This means that we have to use functions. Instead of this...

<!-- Svelte 2 -->
<h1>HELLO {NAME}!</h1>
You can’t perform that action at this time.