Skip to content

Instantly share code, notes, and snippets.

View morewry's full-sized avatar
💭
⛈ 🌩 ☁️ 🌧 ☁️ ⛈ 🌧 🌩 ☁️

Rhy Moore morewry

💭
⛈ 🌩 ☁️ 🌧 ☁️ ⛈ 🌧 🌩 ☁️
82 followers · 223 following
View GitHub Profile
@threepointone
threepointone / glam-for-css-folks.md
Last active September 4, 2022 07:43
why css purists will love glam

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

@treshugart
treshugart / README.md
Last active August 11, 2017 23:33
Web component that allows you to define a split point in your code at the component level.

Trying to attempt a similar pattern in Web Components that was done here in React. Props to James Kyle for the original idea :)

@treshugart
treshugart / deferred.js
Last active August 11, 2017 23:33
SkateJS code-splitting with Webpack 2
import { Component, h } from 'skatejs';
class Deferred extends Component {
renderCallback () {
return <span>Yay! Loaded!!!</span>;
}
}
customElements.define('x-deferred', Deferred);
@treshugart
treshugart / example.js
Last active May 6, 2024 05:01
Pseudo shadow DOM at the custom element level. When element is updated, `childNodes` is set, thus it's a single entry point for updates. Custom distribution is required.
/** @jsx h */
// You only need custom elements for this!!!
import 'skatejs-web-components/src/native-shim';
import { Component, define, h, prop } from 'skatejs';
import ShadowNode, { scopeCss, scopeTree } from './shadow-node';
// Converts real DOM nodes into Incremental DOM nodes.
//
// This is orthogonal to this gist, but makes it so we can distribute real
@alexlafroscia
alexlafroscia / README.md
Last active August 6, 2018 19:13
Skate.js ShadyCSS Mixin

ShadyCSS Skate.js Mixin

Out of the box, Skate.js doesn't work that well with ShadyCSS. This is a mixin that helps bridge the gap.

Usage

The usage example below assumes you're using a build tool like Webpack to transform a CSS file into a string when loaded.

import Component from 'skatejs';
@treshugart
treshugart / example.jsx
Last active May 6, 2024 04:53
Give yourself full control over the DOM that any hyperscript VDOM style function creates http://www.webpackbin.com/4kR0ZnXFf
import hify from './create-element';
import React from 'react';
import { render } from 'react-dom';
const h = hify(React.createElement.bind(React));
class Test extends HTMLElement {
static observedAttributes = ['attr']
attributeChangedCallback (name, oldValue, newValue) {
this.innerHTML = `Hello, ${this.getAttribute('attr')}!`;
@alexjlockwood
alexjlockwood / flatten.js
Created December 11, 2016 22:00 — forked from timo22345/flatten.js
Flatten.js, general SVG flattener. Flattens transformations of SVG shapes and paths. All shapes and path commands are supported.
<!doctype html>
<html>
<title>Flatten.js, General SVG Flattener</title>
<head>
<script>
/*
Random path and shape generator, flattener test base: http://jsfiddle.net/xqq5w/embedded/result/
Basic usage example: http://jsfiddle.net/Nv78L/3/embedded/result/
@Rich-Harris
Rich-Harris / module-loading.md
Last active April 19, 2023 09:11
Dynamic module loading done right

Dynamic module loading done right

Follow-up to Top-level await is a footgun – maybe read that first

Here are some things I believe to be true:

  1. Static module syntax is beneficial in lots of ways – code is easier to write (you get better linting etc) and easier to optimise (tree-shaking and other things that are only really possible with static syntax), and most importantly, faster to load (it's trivial for a module loader to load multiple dependencies concurrently when they're declared with a static syntax – not so with imperative statements like require(...) or await import(...)).
  2. App startup time is perhaps when performance is most critical. (You already know this, I don't need to cite the studies.)
  3. If you're in favour of constructs that jeopardise app startup time, you are anti-user. Top-level await is such a construct.
@Rich-Harris
Rich-Harris / footgun.md
Last active May 6, 2024 10:24
Top-level `await` is a footgun

Edit — February 2019

This gist had a far larger impact than I imagined it would, and apparently people are still finding it, so a quick update:

  • TC39 is currently moving forward with a slightly different version of TLA, referred to as 'variant B', in which a module with TLA doesn't block sibling execution. This vastly reduces the danger of parallelizable work happening in serial and thereby delaying startup, which was the concern that motivated me to write this gist
  • In the wild, we're seeing (async main(){...}()) as a substitute for TLA. This completely eliminates the blocking problem (yay!) but it's less powerful, and harder to statically analyse (boo). In other words the lack of TLA is causing real problems
  • Therefore, a version of TLA that solves the original issue is a valuable addition to the language, and I'm in full support of the current proposal, which you can read here.

I'll leave the rest of this document unedited, for archaeological

@nolanlawson
nolanlawson / why_we_dropped_lerna_from_pouchdb.md
Last active December 13, 2023 10:56
Why we dropped Lerna from PouchDB

Why we dropped Lerna from PouchDB

We dropped Lerna from our monorepo architecture in PouchDB 6.0.0. I got a question about this from @reconbot, so I thought I'd explain our reasoning.

First off, I don't want this post to be read as "Lerna sucks, don't use Lerna." We started out using Lerna, but eventually outgrew it because we wrote our own custom thing. Lerna is still a great idea if you're getting started with monorepos (monorepi?).

Backstory: