Skip to content

Instantly share code, notes, and snippets.

View jaydenseric's full-sized avatar
🇦🇺
Deno, Node.js, GraphQL & React

Jayden Seric jaydenseric

🇦🇺
Deno, Node.js, GraphQL & React
View GitHub Profile
@jaydenseric
jaydenseric / Deferred.mjs
Created May 3, 2022 07:50
A JavaScript with TypeScript JSDoc solution for a deferred promise that can be externally resolved or rejected.
// @ts-check
/**
* A deferred promise that can be externally resolved or rejected.
* @template [Resolves=void] What the promise resolves.
*/
export default class Deferred {
constructor() {
/** The promise. */
this.promise = /** @type {Promise<Resolves>} */ (
@jaydenseric
jaydenseric / Deferred.mjs
Created May 3, 2022 07:46
A JavaScript with TypeScript JSDoc solution for a deferred promise that can be externally resolved or rejected.
// @ts-check
/**
* A deferred promise that can be externally resolved or rejected.
* @template [Resolves=void] What the promise resolves.
* @extends {Promise<Resolves>}
*/
export default class Deferred extends Promise {
/** @typedef {(value: Resolves | PromiseLike<Resolves>) => void} Resolve */
/** @typedef {(reason?: any) => void} Reject */
@jaydenseric
jaydenseric / index.mjs
Created May 3, 2021 07:26
How to get the `__dirname` in a Node.js ESM module.
import { fileURLToPath } from 'url';
const __dirname = fileURLToPath(new URL('./', import.meta.url));
@jaydenseric
jaydenseric / clearLocationHash.mjs
Last active August 13, 2020 04:13
A JavaScript function to clear the browser location hash (if present), without leaving a `#` on the end of the URL, affecting page scroll, or causing the page to reload, whilst allowing `hashchange` events to work.
/**
* Clears the window location hash (if present), without leaving a `#` on the
* end of the URL, affecting page scroll, or causing the page to reload, whilst
* allowing `hashchange` events to work. Only usable in a browser environment.
*
* Note: It’s debatable if a `hashchange` event should be fired when the old
* URL has an empty `#` on the end, since `window.location.hash` will be the
* same before and after; an empty string. This should be ok though as a native
* link with `href="#"` triggers `hashchange` when the old URL has no hash.
* @see [GitHub gist](https://gist.github.com/jaydenseric/7c8ac07a89fb6b8e7faa22e4808365e6).
@jaydenseric
jaydenseric / zeit-now-subdomain-with-heroku.md
Created December 29, 2019 09:59
How to use a Zeit Now subdomain with a Heroku deployment.

How to use a Zeit Now subdomain with a Heroku deployment

In the following steps replace:

  • subdomain with your desired subdomain.
  • domain.com with your domain.
  • random.herokudns.com with your Heroku DNS target (see step 1).
  1. In the Heroku deployment settings, under domains, click “Add domain”. Enter subdomain.domain.com to receive the random.herokudns.com Heroku DNS target.
  2. In the Heroku deployment settings, under SSL certificates, ensure a certificate is automatically managed. If you don’t do this, attempting to visit https://subdomain.domain.com in a browser will fail with an SSL error.
@jaydenseric
jaydenseric / DeferredQuery.jsx
Created July 2, 2019 03:34
A <DeferredQuery> react component that loads a react-apollo <Query> on demand.
import React from 'react'
import { Query } from 'react-apollo'
export const DeferredQuery = ({ children, ...props }) => {
const [skip, setSkip] = React.useState(true)
const load = () => setSkip(false)
return (
<Query skip={skip} {...props}>
{args => children({ ...args, load })}
</Query>
@jaydenseric
jaydenseric / graphql-react-options-guide.md
Last active July 7, 2019 23:45
A guide to cache related graphql-react options.

graphql-react options guide

This is a guide to the cache related options for the useGraphQL React hook. The reloadOnLoad and resetOnLoad options also apply to the GraphQL instance method operate.

Defaults

The defaults are suitable for typical query use, as apps tend to have more queries than mutations.

loadOnMount loadOnReload loadOnReset reloadOnLoad resetOnLoad
@jaydenseric
jaydenseric / RouteIndicator.js
Last active November 29, 2023 11:34
A route change indicator for Next.js using React hooks.
import classNameProp from 'class-name-prop';
import { useRouter } from 'next/router';
import React from 'react';
import styles from './RouteIndicator.module.css';
const DONE_DURATION = 250;
export default function RouteIndicator() {
const router = useRouter();
@jaydenseric
jaydenseric / useIsMounted.mjs
Created February 21, 2019 06:22
A React hook that tells if the component is mounted.
import React from 'react'
export const useIsMounted = () => {
const ref = React.useRef(false)
const [, setIsMounted] = React.useState(false)
React.useEffect(() => {
ref.current = true
setIsMounted(true)
return () => (ref.current = false)
}, [])