elstgav

# Fixes the fullscreen resolution for Magic the Gathering Arena on macOS.
#
# MTGA doesn’t account for the MacBook Pro notch, so it defaults to a resolution
# that’s too wide for the screen, and cuts off important information (like the
# stack). This script sets the resolution to a scaled 16:9 resolution that fits
# the screen.
#
# Forked from april/arena-macos-full-screen-fixes.sh
# https://gist.github.com/april/ef679cf5719cc5a2ba6a55da20869ffa
function mtga_fullscreen_fix {

elstgav

Quickly display and inspect all custom window properties defined on a page.

Useful for inspecting websites and reverse-engineering their JS.

Note

Requires local overrides to be set up.

To use:

1. Open the Developer Tools

elstgav

/**
 * Create GitHub labels in bulk from the Web Inspector console
 *
 * To use:
 * 
 * 1. Go your GitHub repo’s issues page (e.g. `github.com/my/repo/issues/labels`)
 * 2. Open the Web Inspector console
 * 3. Copy-paste the script below
 * 4. Call `createLabels` with the labels you’d like to add:
 * 

elstgav

document.querySelectorAll('.State--closed,.State--merged').forEach((node, index) => {
  setTimeout(
    () => node
      .closest('.Details-content--shown')
      .querySelector('.js-branch-delete-button')
      .click(),
    600 * index,
  )
})

elstgav

/**
 * Custom Wikipedia Styles
 *
 * @author Gavin Elster
 * @source https://gist.github.com/elstgav/c4f1d5856adf6ef9c696d8a0091777e0
 *
 * To install, you must have a user account setup with Wikipedia.org. Then:
 * 1. Go to Preferences > Appearance
 * 2. Click on “Shared CSS […] for all skins:” > “Custom CSS”
 * 3. Click on “Edit source”

elstgav

elstgav

CSS-Generated Error Messages

Writing a UI library is hard: coming up with components, figuring out naming schemes, finding the right granularity for your UI components so they can be composed together easily. As an author of the library, you'll be intimately aware of how things work and how components should go together. But the users of your library won’t. In other programming languages, this is where error messages can step in, providing guidance when using deprecated methods or incorrect arguments. So how can we produce error messages in CSS? Simple: with pseudo elements.

First let’s start with our error message mixin:

// Prints out error messages
// $location defaults to 'before'. 'after' is recommended for inline elements
@mixin error($message, $location: 'before') {

elstgav

Pure SCSS Radio Buttons

SASS component for enabling larger, custom radio buttons. Unfortunately it doesn't work in Firefox (but does fall back to native radios). Completely customizable with SASS variables

A Pen by Gavin Elster on CodePen.

License.

elstgav

Chrome Gradient Sizing/Alignment Bug

Demonstrates a bug in how Chrome 2014 incorrectly renders background gradients

A Pen by Gavin Elster on CodePen.

License.