Skip to content

Instantly share code, notes, and snippets.

🇦🇺
JS, GraphQL & React

Jayden Seric jaydenseric

🇦🇺
JS, GraphQL & React
Block or report user

Report or block jaydenseric

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View zeit-now-g-suite-setup.md

Run each of the following lines, replacing yourdomain.com and codehere with your details:

now dns add yourdomain.com @ TXT google-site-verification=codehere
now dns add yourdomain.com @ MX ASPMX.L.GOOGLE.COM 1
now dns add yourdomain.com @ MX ALT1.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT2.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT3.ASPMX.L.GOOGLE.COM 10
now dns add yourdomain.com @ MX ALT4.ASPMX.L.GOOGLE.COM 10
@jaydenseric
jaydenseric / gist:a4e33d4b990539471af9
Created Sep 28, 2015
Batch ImageAlpha processing via Terminal
View gist:a4e33d4b990539471af9
/Applications/ImageAlpha.app/Contents/MacOS/pngquant 64 *.png --ext .png --force
@jaydenseric
jaydenseric / ffmpeg-web-video-guide.md
Last active Nov 10, 2019
A quick guide to using FFmpeg to create cross-device web videos.
View ffmpeg-web-video-guide.md

Video conversion with FFmpeg

Install

On mac:

  1. Download the latest release.
  2. Extract the binary and place it in /usr/local/bin.

Command basics

View forget-normalize-or-resets-lay-your-own-css-foundation.md

Forget normalize or resets; lay your own CSS foundation

⚠️ This article is outdated: Global CSS is an anti-pattern; components should be individually styled using tools such as styled-components. See Fix for the most recent, though still outdated styles from this article.

Most start their front end styles by throwing in a reset such as Eric Myer’s or the more fashionable normalize.css. I will say a few nasty things about both approaches before I present to you the perfectionist alternative: Your own custom foundation.

Foundation is a good word for a different approach. Resets strip user agent default styles back. Normalizing attempts to even out the differences and fix a few things. A foundation strips and adds style

@jaydenseric
jaydenseric / RouteIndicator.mjs
Last active Oct 30, 2019
A route change indicator for Next.js using React hooks.
View RouteIndicator.mjs
import Router from 'next/router'
import React from 'react'
const DONE_DURATION = 250
export const RouteIndicator = () => {
const [loading, setLoading] = React.useState(null)
const [timeoutId, setTimeoutId] = React.useState(null)
const onLoad = () => setLoading(true)
@jaydenseric
jaydenseric / fastmail-zeit-now-setup.md
Last active Oct 5, 2019
Setup FastMail in Zeit Now via now-cli.
View fastmail-zeit-now-setup.md
@jaydenseric
jaydenseric / DeferredQuery.jsx
Created Jul 2, 2019
A <DeferredQuery> react component that loads a react-apollo <Query> on demand.
View DeferredQuery.jsx
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>
View favicon-optimization.md

How to super optimize a favicon

⚠️ This article is outdated: For some reason the ImageMagick convert CLI no longer generates smaller .ico files when the source .png files have been optimized. After a few hours investigating I can’t workout why, or even with what versions everything worked. Here is a related StackOverflow question.

Learn how to manually create optimized website favicon.ico files as much as 60%+ smaller in file size without sacrificing content or quality.

This is something very few people seem to do, probably because no single tool exists. A pity since a favicon.ico file in the website root (still best practice) is one of the few things guaranteed to be downloaded by every first-time visitor. The smaller it is, the sooner it can appear.

The savings can be particularly juicy for icons containing multiple sizes, which is also best practice given the variety of ways favicons are used.

View css-font-smoothing-for-firefox-mac.md

CSS font smoothing coming to Firefox for Mac

Finally a Mozilla equivalent to -webkit-font-smoothing: antialiased is on the way in Firefox 25: -moz-osx-font-smoothing: grayscale. No more chunky font icons in Firefox for Mac!

Unfortunately we will have to wait a few weeks for this to be useful as Firefox 25 is currently in Aurora phase; according to the rapid release schedule it will be hit Beta September 17 for an October 29 2013 release.

It’s a good idea to begin using it now, IcoMoon has stealthily adopted it already. You can always download Firefox 25 and take it for a spin first.

Syntax

@jaydenseric
jaydenseric / graphql-react-options-guide.md
Last active Jul 7, 2019
A guide to cache related graphql-react options.
View graphql-react-options-guide.md

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
You can’t perform that action at this time.