Skip to content

Instantly share code, notes, and snippets.

View davidkpiano's full-sized avatar
🎹
Working on XState Dev Tools

David Khourshid davidkpiano

🎹
Working on XState Dev Tools
View GitHub Profile
@mpj
mpj / $http.js
Last active July 10, 2017 16:08
function £http(method, uri, body) {
let opts = {
mode: 'cors',
method: method,
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-XSRF-TOKEN': getCookieValue('XSRF-TOKEN')
}
@PaulKinlan
PaulKinlan / canvasrecord.js
Last active May 7, 2024 04:04
Screen recorder in JS
(function() {
let canvas = document.querySelector('canvas');
// Optional frames per second argument.
let stream = canvas.captureStream(25);
var options = {mimeType: 'video/webm; codecs=vp9'};
let recorder = new MediaRecorder(stream, options);
let blobs = [];
function download(blob) {
var url = window.URL.createObjectURL(blob);
@alekseykulikov
alekseykulikov / index.md
Last active February 6, 2025 21:20
Principles we use to write CSS for modern browsers

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

@iammerrick
iammerrick / PinchZoomPan.js
Last active April 22, 2024 02:54
React Pinch + Zoom + Pan
import React from 'react';
const MIN_SCALE = 1;
const MAX_SCALE = 4;
const SETTLE_RANGE = 0.001;
const ADDITIONAL_LIMIT = 0.2;
const DOUBLE_TAP_THRESHOLD = 300;
const ANIMATION_SPEED = 0.04;
const RESET_ANIMATION_SPEED = 0.08;
const INITIAL_X = 0;
@andymatuschak
andymatuschak / States-v3.md
Last active June 3, 2025 20:57
A composable pattern for pure state machines with effects (draft v3)

A composable pattern for pure state machines with effects

State machines are everywhere in interactive systems, but they're rarely defined clearly and explicitly. Given some big blob of code including implicit state machines, which transitions are possible and under what conditions? What effects take place on what transitions?

There are existing design patterns for state machines, but all the patterns I've seen complect side effects with the structure of the state machine itself. Instances of these patterns are difficult to test without mocking, and they end up with more dependencies. Worse, the classic patterns compose poorly: hierarchical state machines are typically not straightforward extensions. The functional programming world has solutions, but they don't transpose neatly enough to be broadly usable in mainstream languages.

Here I present a composable pattern for pure state machiness with effects,

@iammerrick
iammerrick / children-as-function.js
Created May 24, 2016 23:41
Which API do you prefer? Passing a function into the Ratio component or making a higher order component called Ratio you can use to configure a component.
<Ratio width={Ratio.OPTIONS.FLUID} x={3} y={4}>
{(width, height) => (
<Chart id={this.props.id} width={width} height={height} />
)}
</Ratio>
@alishalisha
alishalisha / states.md
Last active January 6, 2021 06:59
Checking state on product design patterns

Checking the State of Your States

If applicable, make sure your design component accounts for all these states. This is basically copied from the Nine States of Design Medium article. 😛

  • Initial state: What happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.
  • Loading state: Have you accounted for when a user will be waiting for something to happen? What does that look like?
  • Empty state: Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).
  • One state: You have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).
  • Some data state: This is usually what you think
@rgrove
rgrove / README.md
Created February 8, 2016 19:01
Cake's approach to React Router server rendering w/code splitting and Redux

Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.

Server

  1. Wildcard Express route configures a Redux store for each request and makes an addReducers() callback available to the getComponents() method of each React Router route. Each route is responsible for adding any Redux reducers it needs when it's loaded. (This isn't really necessary on the
@matthewoden
matthewoden / README.md
Last active January 21, 2016 22:14
Your CSS doesn't have to be a mess.

CSS in 2016

So this is roughly how I handle CSS these days. As much as I'd like to use CSSModules for everything, I work on a lot of different projects, for a lot of different clients. They can't all be a SPA.

Some of this seems blindingly obvious. But until I stop cleaning up messy, repetitive CSS, I figure it all merits being said.

Create a Baseline

I use one file to style HTML. This creates a baseline for the body, defines my box model, sets global typography rules, etc. If I need to style an HTML element, I style it globally. Otherwise, I give an element a class, and only style that class.

@feesh
feesh / .sass-lint.yaml
Last active November 25, 2015 21:15
sass-lint configuration
# sass-lint config generated by make-sass-lint-config v0.0.4
#
# The following scss-lint Linters are not yet supported by sass-lint:
# BemDepth, DisableLinterReason, ElsePlacement, PropertyCount
# PropertyUnits, SelectorDepth, SelectorFormat, SpaceAroundOperator
# TrailingWhitespace, UnnecessaryMantissa, UnnecessaryParentReference, Compass::*
#
# The following settings/values are unsupported by sass-lint:
# Linter Indentation, option "allow_non_nested_indentation"
# Linter Indentation, option "character"