Skip to content

Instantly share code, notes, and snippets.

View lukeed's full-sized avatar

Luke Edwards lukeed

View GitHub Profile
@bendc
bendc / simulate-typing.js
Created September 1, 2017 08:57
Fake typing animation
const trackTime = timing => {
const now = performance.now();
if (!timing.startTime) timing.startTime = now;
const elapsed = now - timing.startTime;
const {duration} = timing;
if (duration != null && duration <= elapsed) timing.startTime = null;
return elapsed;
};
const delay = (callback, duration) => {
@samthor
samthor / safari-nomodule.js
Last active February 14, 2024 02:54
Safari 10.1 `nomodule` support
// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
// does not support `nomodule` is probably not being used anywhere. The code below is left
// for posterity.
/**
* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
* load <script nomodule> anyway. This snippet solve this problem, but only for script
* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
*
* Again: this will **not** prevent inline script, e.g.:

tracked npm

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

@developit
developit / unistore.js
Last active September 8, 2020 15:13
Update: the newer & better version of this is published: https://github.com/developit/unistore
import { h, Component } from 'preact';
/** Creates a new store, which is a tiny evented state container.
* @example
* let store = createStore();
* store.subscribe( state => console.log(state) );
* store.setState({ a: 'b' }); // logs { a: 'b' }
* store.setState({ c: 'd' }); // logs { c: 'd' }
*/
const MODULE_DIR = /(.*([\/\\]node_modules|\.\.)[\/\\](@[^\/\\]+[\/\\])?[^\/\\]+)([\/\\].*)?$/g;
{
loader: 'babel-loader',
test: /\.jsx?$/,
include(filepath) {
if (filepath.split(/[/\\]/).indexOf('node_modules')===-1) return true;
let pkg, manifest = path.resolve(filepath.replace(MODULE_DIR, '$1'), 'package.json');
try { pkg = JSON.parse(fs.readFileSync(manifest)); } catch (e) {}
return !!(pkg.module || pkg['jsnext:main']);
@developit
developit / preact-8-changes.md
Last active August 25, 2017 00:51
Important changes coming in Preact 8

Removed: Element Recycling

DOM Element recycling will be removed in Preact 8.

This should have no effect on most applications. In fact, it fixes a number of known issues related to element state not being fully reset on reuse.

💡 Why? Many DOM properties are stateful, and trying to reset them all when recycling is a game of whack-a-mole. Preact's size makes it infeasible to use whitelists to address these issues, so recycling is being dropped. >

@developit
developit / hydra-alias.md
Last active February 27, 2020 01:54
Alias to invoke Chrome Canary w/ tracing, for IRHydra

An Alias to run Chrome with tracing enabled

For Chrome Canary:

alias hydra='/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --no-sandbox --js-flags="--user-data-dir=/tmp/profile --trace-hydrogen --trace-phase=Z --trace-deopt --code-comments --hydrogen-track-positions --redirect-code-traces"'

For regular ol' Chrome:

@Rich-Harris
Rich-Harris / please-include-a-repro.md
Last active April 29, 2024 15:08
Please include a repro

Please include a repro

You probably arrived here because of a curt message in response to an issue you filed on a repo that I contribute to. Sorry about that (particularly if you filed the issue long ago and have been waiting patiently for a response). Let me explain:

I work on a lot of different open source projects. I really do like building software that makes other people's lives easier, but it's crazy time-consuming. One of the most time-consuming parts is responding to issues. A lot of OSS maintainers will bend over backwards to try and understand your specific problem and diagnose it, to the point of setting up new test projects, fussing around with different Node versions, reading the documentation for build tools that we don't use, debugging problems in third party dependencies that appear to be involved in the problem... and so on. I've personally spent hundreds of hours of my free time doing these sorts of things to try and help people out, because I want to be a responsible maintainer and I

@bendc
bendc / easing.css
Created September 23, 2016 04:12
Easing CSS variables
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
@bendc
bendc / svgo.json
Created August 30, 2016 07:05
Sketch's SVGO Compressor settings
{
"comment": "This is the settings file for the SVGO Compressor Plugin. For more info, please check <https://github.com/BohemianCoding/svgo-compressor>",
"pretty": false,
"indent": 2,
"plugins": [
{
"name": "cleanupAttrs"
},
{
"name": "cleanupEnableBackground"