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

// @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

// @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

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

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

/Applications/ImageAlpha.app/Contents/MacOS/pngquant 64 *.png --ext .png --force

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

How to optimize SVG

Editors like Illustrator can save out some really dumb SVG code sometimes. Properly optimized SVG files can be as much as 80% smaller. Bunches of empty groups, pointless attributes and many other inefficiencies decrease readability and reliability.

Every SVG file should be manually optimized in 3 passes using:

1. Your vector graphic editor.
2. The SVGO command-line optimization tool.
3. Your text editor.

jaydenseric

Front end development methodology

Philosophy

• All public-facing content crawlable at page load.
• All page content pieces linkable, and linkable cross-device.
• Semantics trumps aesthetics.
• All content to all users. Never show or hide content based on device.
• Device agnostic design and UX. Mobile and widescreen should look and feel similar; basically less media-queries = more device agnostic.
• Consider viewport height as much as width.

jaydenseric

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