JawsomeJason

/* go to https://alexa.amazon.com/spa/index.html#scenes and paste this into the console */
Array.prototype.slice.call(document.querySelectorAll('.d-connected-home-link-btn')).map(el => el.getAttribute('appliance-id')).forEach(id => { console.log(id); fetch(`https://alexa.amazon.com/api/phoenix/appliance/${id}`, { method: 'DELETE' }) })

JawsomeJason

// see https://css-tricks.com/snippets/css/fluid-typography/ for 🤯
.viewport-fluid(@property, @from, @to, @screen-min: @screen-sm, @screen-max: @screen-lg, @viewport-unit: vw) {
  @{property}: @from;

  @media (min-width: @screen-min) {
    @{property}: calc(
      @from + unit(@to - @from) * ((~"100@{viewport-unit}" - @screen-min) / unit(@screen-max - @screen-min))
    );
  }

JawsomeJason

/*
 * Color names and values from http://chir.ag/projects/name-that-color/#6195ED
 * rgb = Red, Green, Blue
 * hsl = Hue, Saturation, Lightness
 * hsv = Hue, Saturation, Value
 * contrast = Readable contrast color via https://www.w3.org/TR/AERT/#color-contrast
 * Y = Perceived Brightness
 */

const COLORS = {

JawsomeJason

/* smallest reset ever */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  color: inherit;
  box-sizing: inherit;
}

JawsomeJason

/* 
 * Automatically applies spacing to all non-inline siblings 
 * Disable in an element with `--SPACING-ENABLED: 0;`.  Will automatically re-activate in children.  Good for Grid Layout gap control.
 * Change direction with `--SPACING-HORIZONTAL: 1`
 */

* {
  margin: 0;
  /* change this to 1 if you need to space it from it's previous sibling. */
  --SPACING-ENABLED: 0;

JawsomeJason

/**
 * super easy consistent spacing between all siblings
 *
 * usage:
 * // in main.less
 * :root {
 *   .consistent-spacing();
 * }
 *
 * // somewhere you want to apply 32px vertical spacing

JawsomeJason

• Place these in your Packages/User/Snippets folder
• Use any of them with their tab trigger value.
• call snippets using the first letter of each word plus the entire last word (e.g. rpch.. => react-proptypes-children.sublime-snippet

JawsomeJason

.gradient-overflow(@size: 24px, @color: white) {
  // content will scroll if not enough space
  overflow-y: auto;

  // add a sticky gradient to the top and bottom of content
  // it'll overlay over content if needed
  &:before,
  &:after {
    content: '';
    display: block;

JawsomeJason

@list: apple, satsuma, banana, pear;

.loop(@index) when (@index <= length(@list)) {
    @item: extract(@list, @index);
    .fruit-@{item} {
        content: "Just a test.";
    }
    .loop(@index + 1);
}
.loop(1);

JawsomeJason

// reset
* {
  &,
  &:before,
  &:after {
    font: inherit;
    // -webkit-font-smoothing: antialiased;
    // font-smoothing:antialiased;
    text-rendering:optimizeLegibility;