jaydenseric

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

jaydenseric

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?

jaydenseric

Setup FastMail in Zeit Now

• FastMail docs for configuring your domain with MX only.
• Zeit Now DNS CLI docs.

Replace {domain} with your domain:

# Allows you to receive email at standard addresses, e.g. user@{domain}.
now dns add {domain} @ MX in1-smtp.messagingengine.com 10

jaydenseric

event-stream compromise

In October 2018 I investigated why nodemon was emitting a strange deprecation warning, leading to the eventual discovery of the now infamous event-stream npm package compromise. This post shares a unique perspective of the events that unfolded, along with downloadable forensic evidence that has since been purged from the npm registry.

For context, see:

• dominictarr/event-stream#116
• npm – “Details about the event-stream incident”
• Snyk – “A Post-Mortem of the Malicious event-stream backdoor”

jaydenseric

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

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

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

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

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

/**
 * 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).