Skip to content

Instantly share code, notes, and snippets.

ngbrown / BlurImg.tsx
Last active Apr 2, 2021 — forked from WorldMaker/use-blurhash.ts
useBlurhash hook
View BlurImg.tsx
import React, { useState, useCallback } from "react";
import { useBlurhash } from "./use-blurhash";
import { useInView } from "react-intersection-observer";
type Props = React.DetailedHTMLProps<
> & { blurhash?: string | null };
// Uses browser-native `loading="lazy"` to lazy load images
ngbrown / AuthProvider.tsx
Last active Jan 1, 2021
useAuth React authentication with oidc-client
View AuthProvider.tsx
import React, {
} from 'react';
import * as Oidc from 'oidc-client';
// Inspired by
Manouchehri / rfc3161.txt
Last active Apr 20, 2021
List of free rfc3161 servers.
View rfc3161.txt
AndyCross / calendar.css
Created Oct 11, 2015
How the Calendar Visual might look in a few files
View calendar.css
.day {
fill: #fff;
stroke: #ccc;
.month {
fill: none;
stroke-width: 2px;
OlegIlyenko / Event-stream based GraphQL
Last active Mar 9, 2021
Event-stream based GraphQL subscriptions for real-time updates
View Event-stream based GraphQL

In this gist I would like to describe an idea for GraphQL subscriptions. It was inspired by conversations about subscriptions in the GraphQL slack channel and different GH issues, like #89 and #411.

Conceptual Model

At the moment GraphQL allows 2 types of queries:

  • query
  • mutation

Reference implementation also adds the third type: subscription. It does not have any semantics yet, so here I would like to propose one possible semantics interpretation and the reasoning behind it.


Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

deiu / linkheaderparser.js
Last active Jul 25, 2019
Parse HTTP Link header in Javascript
View linkheaderparser.js
// parse a Link header
// Link:<>; rel=meta
// var r = parseLinkHeader(xhr.getResponseHeader('Link');
// r['meta'] outputs
function parseLinkHeader(header) {
var linkexp = /<[^>]*>\s*(\s*;\s*[^\(\)<>@,;:"\/\[\]\?={} \t]+=(([^\(\)<>@,;:"\/\[\]\?={} \t]+)|("[^"]*")))*(,|$)/g;
var paramexp = /[^\(\)<>@,;:"\/\[\]\?={} \t]+=(([^\(\)<>@,;:"\/\[\]\?={} \t]+)|("[^"]*"))/g;
branneman /
Last active Apr 16, 2021
Better local require() paths for Node.js

Better local require() paths for Node.js


When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

thoemmi / PreBuild.targets.xml
Created Sep 14, 2012
Embed referenced assemblies, because ILMerge won't work with WPF applications
View PreBuild.targets.xml
<?xml version="1.0" encoding="utf-8" ?>
<Project ToolsVersion="4.0" xmlns="">
Originally written by Daniel Chambers (
<Target Name="EmbedReferencedAssemblies" AfterTargets="ResolveAssemblyReferences">
<!-- get list of assemblies marked as CopyToLocal -->
<AssembliesToEmbed Include="@(ReferenceCopyLocalPaths)" Condition="'%(Extension)' == '.dll'"/>
alex-seville / jsViews in Backbone
Created Jun 7, 2012
Using jsViews in backbone to make an editable area (
View jsViews in Backbone
var Form = Backbone.Model.extend({});
var FormView = Backbone.View.extend({
events: {
"click .save": "save",
"click .edit": "edit",
"click .cancel": "cancel"
initialize: function() {
//set up our input form template