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
@jaydenseric
jaydenseric / graphql-react-options-guide.md
Last active May 26, 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
@jaydenseric
jaydenseric / RouteIndicator.mjs
Last active May 14, 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 / useIsMounted.mjs
Created Feb 21, 2019
A React hook that tells if the component is mounted.
View useIsMounted.mjs
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)
}, [])
@jaydenseric
jaydenseric / fastmail-zeit-now-setup.md
Last active Jun 9, 2019
Setup FastMail in Zeit Now via now-cli.
View fastmail-zeit-now-setup.md
@jaydenseric
jaydenseric / responsive-iframes.md
Created Jan 9, 2018
“Responsive iframes without wrappers did you say?” blog post: https://jaydenseric.com/blog/responsive-iframes.
View responsive-iframes.md

Responsive iframes without wrappers did you say?

⚠️ This article is outdated: Don’t use jQuery. Also, this JS technique does not work well when server side rendering.

Responsive images are pretty intuitive; apply max-width: 100% and voila. But what to do about those pesky iframes (video embeds!) whose height does not remain in ratio to width when responding down? The most common technique you will come across dates back years and involves wrappers styled to preserve a hard-coded intrinsic aspect ratio (typically 16:9). Most of the popular scripts such as fitvids.js utilize this technique.

This approach sucks for few reasons:

  1. Wrappers may not play nice with your current setup. Perhaps your videos are added, sized and positioned via a CMS WYSIWYG.
  2. Is ~75 lines of jQuery really necessary?
View fun-with-sass-and-font-icons.md

Fun with Sass & font icons

⚠️ This article is outdated: CSS in JS is far superior to Sass, and font icons are no longer a good idea. Use inline SVG React components and in certain situations plain old .svg files in img tags.

Icon fonts have been been best-practice for a while now. They allow us to use tons of fully styleable cross-browser vector icons with one lightweight HTTP request.

Folk typically use font icons via non-semantic presentational markup such as class="icon icon-happy-face" that should be avoided. With a pinch of Sass you can add icons to elements purely via your stylesheet using easy to remember names, without polluting your markup. Yay!

Setup

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

View os-x-mavericks-rubygems-cleanup-issue.md

OS X Mavericks RubyGems cleanup issue

Ever tried sudo gem cleanup in OS X Mavericks only to be hit with errors like this?

Attempting to uninstall sqlite3-1.3.7
Unable to uninstall sqlite3-1.3.7:
  Gem::InstallError: sqlite3 is not installed in GEM_HOME, try:
  gem uninstall -i /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/gems/2.0.0 sqlite3
View favicon-optimization.md

How to super optimize a favicon

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.

It really isn’t as hard as it looks, your second one will be easy 😉

You can’t perform that action at this time.