Skip to content

Instantly share code, notes, and snippets.

Avatar

Alex Rattray rattrayalex

View GitHub Profile
@rattrayalex
rattrayalex / my-styles.js
Created Nov 4, 2020
Loose sketch of css-in-js root variables
View my-styles.js
const rootCSSVars = {
colorPrimary: {name: '--color-primary', value: 'red'},
colorSecondary: {name: '--color-secondary', value: 'orange'},
}
writeCSSToDOM(`
:root {
${_.mapValues(rootCSSVars, (v) => `${v.name}: ${v.value};\n`)}
}
`)
@rattrayalex
rattrayalex / index.html
Last active Nov 17, 2020
Fall back to twitter's twemoji emoji when there is inadequate native emoji support (eg; on Windows)
View index.html
<html>
<body>
<div class="has-emoji">Hello world! I'm a unicorn: 🦄</div>
<script>
// Stolen from Modernizr: https://github.com/Modernizr/Modernizr/blob/v3.5.0/feature-detects/emoji.js
const hasEmojiSupport = () => {
var pixelRatio = window.devicePixelRatio || 1;
var offset = 12 * pixelRatio;
var node = document.createElement('canvas');
@rattrayalex
rattrayalex / play-html5-video-on-scroll-into-view-or-click.js
Created Nov 22, 2020
Vanilla JS ES6 snippet to play html5 video on scroll into view or click (and pause when out of view or clicked while playing)
View play-html5-video-on-scroll-into-view-or-click.js
function debounce(callback) {
let timeout = null;
return function() {
const next = () => callback.apply(this, arguments);
cancelAnimationFrame(timeout);
timeout = requestAnimationFrame(next);
}
}
const observerOptions = {
@rattrayalex
rattrayalex / ideas.md
Last active Apr 14, 2021
PostGraphile Framework Sketches
View ideas.md

I want something that I can share with a development team that's just focused on features and doesn't want to think about the tools at hand very much (but can deeply fine-tune where needed).

Postgraphile seems like an amazing place to start for this.

Here's what I might want to build on top of it (though ideally it'd be baked-in):

Each "table" (think pg_class) should have a single file where ~all logic around that table is contained in as declarative a format as possible.

@rattrayalex
rattrayalex / query.gql
Last active Apr 21, 2021
Postgraphile Pagila gql to sql demo
View query.gql
query MyQuery {
actor(actorId: 10) {
firstName
lastName
filmActors {
nodes {
film {
title
description
}
@rattrayalex
rattrayalex / query.gql
Last active Apr 30, 2021
Postgraphile SQL Rewrite Example
View query.gql
query MyQuery {
films(
filter: {and: [
{title: {startsWith: "A"}},
{releaseYear: {equalTo: 2006}}
]},
first: 3
) {
nodes {
title
@rattrayalex
rattrayalex / webhook.js
Created May 13, 2021
Changing a shopify order's location based on the shipping address of the order using order.created/order.updated webhooks
View webhook.js
// For posterity, I'm saving/sharing some code I wrote for a shopify app I ran
// in which I had two physical warehouses: one in Maryland, and one in California.
// Each of these was its own "Location" in Shopify, and I wanted every order
// to be automatically assigned to one or the other based on the shipping address.
// I ran this webhook on Autocode: https://autocode.com/
// which makes it really easy to stand up a webhook without futzing with servers.
const Shopify = require('shopify-api-node');
const shopify = new Shopify({
@rattrayalex
rattrayalex / desired-ternaries.jsx
Last active Jan 16, 2022
Desired Prettier formatting of (nested) ternaries
View desired-ternaries.jsx
// reflected in github.com/rattrayalex/prettier/tests/format/js/conditional/new-ternary-spec.js
// Input and output should match (for 2-space indent formatting).
// remain on one line if possible:
const short = isLoud() ? makeNoise() : silent();
// next, put everything after the =
// ⚠️⚠️⚠️ NOT WORKING
const lessShort =
isLoudReallyLoud() ? makeNoiseReallyLoudly.omgSoLoud() : silent();
@rattrayalex
rattrayalex / jsx-ternary-why-jsxexpressioncontainer.jsx
Last active May 16, 2021
Why check JSXExpressionContainer ancestor instead of JSXElement consequent for whether to use JSXMode.
View jsx-ternary-why-jsxexpressioncontainer.jsx
const WhyShouldTheseBeDifferent = () => {
return (
<div>
If you start with this code:
{showTheThing || pleaseShowTheThing ? (
<Foo attribute="such and such stuff here" />
) : showTheOtherThing ? (
<Bar />
) : null}
View Musings on revisiting ternaries formatting 2022-01-15.jsx
const Musings = () => {
return (
<div>
In general, I'm definitely thinking of removing parens around broken terminal alternates,
for example instead of this:
{component ?
<div>{React.createElement(component, props)}</div>
: render ?
<div>{render(props)}</div>