Skip to content

Instantly share code, notes, and snippets.

View bmcmahen's full-sized avatar
😈

Ben McMahen bmcmahen

😈
View GitHub Profile
@alexreardon
alexreardon / fix-post-drop-pointer-bug.ts
Last active April 12, 2024 16:03
Fix Chrome + Safari bug where the element under where the user started dragging (on the viewport) is entered into by the browser
import { bindAll } from 'bind-event-listener';
import type { DragLocation } from '../internal-types';
type CleanupFn = () => void;
/** Set a `style` property on a `HTMLElement`
*
* @returns a `cleanup` function to restore the `style` property to it's original state
*/
@jacob-ebey
jacob-ebey / image.ts
Last active February 29, 2024 05:25
Remix Image Component
import { createHash } from "crypto";
import fs from "fs";
import fsp from "fs/promises";
import path from "path";
import https from "https";
import { PassThrough } from "stream";
import type { Readable } from "stream";
import type { LoaderFunction } from "remix";
import sharp from "sharp";
import type { Request as NodeRequest } from "@remix-run/node";
@hyrious
hyrious / esbuild-plugin-styled-components.js
Created October 20, 2021 03:09
esbuild plugin styled-components
import babel from '@babel/core'
import styled from 'babel-plugin-styled-components'
import fs from 'node:fs'
export default {
name: "styled-components",
setup({ onLoad }) {
const root = process.cwd();
onLoad({ filter: /\.[tj]sx$/ }, async (args) => {
let code = await fs.promises.readFile(args.path, "utf8");
final class Loader: BindableObject {
let didChange = PassthroughSubject<Data?, Never>()
var task: URLSessionDataTask!
var data: Data? = nil {
didSet {
didChange.send(data)
}
}
init(_ url: URL) {
@neoeinstein
neoeinstein / Auth0.elm
Last active March 2, 2017 08:22
Elm Example for interoperating with Auth0. Note that much of this was culled out of an existing code-base, so may need some minor edits to work correctly for you. Presumes that Elm.Main is transpiled into elm.js
module Auth0
( AuthenticationState(..), AuthenticationError, AuthenticationResult
, Options, defaultOpts
, LoggedInUser, UserProfile, Token
, showLock, showLockSignal
, mapResult
) where
function createDisabledUntilClientRendersComponent(component, displayName='ClientComponent') {
return React.createClass({
displayName,
propTypes: {
disabled: React.PropTypes.bool
},
getInitialState() {
@paulirish
paulirish / what-forces-layout.md
Last active June 22, 2024 12:14
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@HenrikJoreteg
HenrikJoreteg / README.md
Last active September 20, 2021 01:36
Minimalist routing in Redux

Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.

Instead, with this approch, your app's current pathname is just another piece of state, just like anything else.

This also means that when doing server-side rendering of a redux app, you can just do:

var app = require('your/redux/app')
var React = require('react')
@sahrens
sahrens / React Native: Animated - Code
Last active July 4, 2020 00:07
Example code from ReactEurope 2015 talk - React Native: Animated
/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
@kevinold
kevinold / immutable-js-flux-store.js
Created January 31, 2015 23:55
Immutable Flux Store example from Lee Byron (@leeb) from his React.js Conf 2015 talk
var Immutable = require('immutable');
var todos = OrderedMap();
var TodoStore = createStore({
getAll() { return todos; }
});
Dispatcher.register(function(action) {
if (action.actionType === "create") {
var id = createGUID();