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

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

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

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

#!/bin/bash

# Uses Gource (http://gource.io) to generate a lossless PPM and a high quality MP4 visualizing the history of a Git repo.

# By Jayden Seric: https://gist.github.com/jaydenseric/df3263eb3c33856c11ce

# Install Gource and FFmpeg with Homebrew:
#   brew install gource
#   brew install ffmpeg

jaydenseric

import { fileURLToPath } from 'url';

const __dirname = fileURLToPath(new URL('./', import.meta.url));

jaydenseric

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

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

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

#!/usr/bin/env bash

# Usage:
# 1. Save script in project.
# 2. Run "chmod +x find-unused-sass-variables.sh".
# 3. Run script, pointing to Sass directory: "./find-unused-sass-variables.sh ./scss".

VAR_NAME_CHARS='A-Za-z0-9_-'
find "$1" -type f -name "*.scss" -exec grep -o "\$[$VAR_NAME_CHARS]*" {} ';' | sort | uniq -u