EllyLoel

/*
  Made by Elly Loel - https://ellyloel.com/
  With inspiration from:
    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
    - Adam Argyle - https://unpkg.com/[email protected]/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

  Notes:
    - `:where()` is used to lower specificity for easy overriding.
*/

DavidWells

exports.handler = (event, context, callback) => {
   const response = {
    statusCode: 301,
    headers: {
      Location: 'https://google.com',
    }
  };

  return callback(null, response);
}

prestia

Installing MTGO on macOS using Wine, and making it look pretty!

The following instructions are heavily inspired by @pauleve. I modified his instructions and then added details about how to make a shortcut and support Retina/HiDPI displays.

Installing MTGO (and Wine and Homebrew and Xquartz and ...)

0. Install Homebrew by opening Terminal and executing the following command:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

jennyknuth

How to transform an SVG into a data URI

by Jenny Knuth, based on the work of Chris Coyier and Taylor Hunt

A data URI is a nice way to include a web resource without needing to make an HTTP request. Chris Coyier explains the technique nicely in Probably Don't Base64 SVG.

While a PNG might use Base64 encoding, for SVG, there is a better way.

Taylor Hunt's experiments led to this solution for optimizing SVGs in data URIs:

"So the best way of encoding SVG in a data URI is data:image/svg+xml,[actual data]. We don’t need the ;charset=utf-8 parameter (or the invalid ;utf8 parameter…), because URLs are always ASCII."

yossorion

What I Wish I'd Known About Equity Before Joining A Unicorn

Disclaimer: This piece is written anonymously. The names of a few particular companies are mentioned, but as common examples only.

This is a short write-up on things that I wish I'd known and considered before joining a private company (aka startup, aka unicorn in some cases). I'm not trying to make the case that you should never join a private company, but the power imbalance between founder and employee is extreme, and that potential candidates would

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

klamping

Some articles:

• How to automate a visual regression test (WebdriverCSS)
• CSS Testing with PhantomCSS, PhantomJS, CasperJS and Grunt (PhantomCSS)
• Automating Style Guide-Driven Development (Style Guide Based Testing
• Automating CSS Regression Testing (BackstopJS)

Some tools:

• WebdriverCSS
• PhantomCSS
• Gemini

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

ilikenwf

@font-face {font-family: "Droid Sans"; src: local("Tahoma");}
@font-face {font-family: "noto"; src: local("Tahoma");}
@font-face {font-family: "Arial Negreta"; src: local("Arial");}
@font-face {font-family: "Droid Sans"; font-weight: bold; src: local("Tahoma Bold");}
@font-face {font-family: "Droid Serif"; src: local("Tahoma");}
@font-face {font-family: "Droid Serif"; font-weight: bold; src: local("Tahoma Bold");}
@font-face {font-family: "Droid Serif"; font-style: italic; src: local("Tahoma Italic");}
@font-face {font-family: "opensans"; src: local("Tahoma");}
@font-face {font-family: "open_sans"; src: local("Tahoma");}
@font-face {font-family: "open_sans"; font-weight: bold; src: local("Tahoma Bold");}

guilherme

#!/bin/sh
# Redirect output to stderr.
exec 1>&2
# enable user input
exec < /dev/tty

consoleregexp='console.log'
# CHECK
if test $(git diff --cached | grep $consoleregexp | wc -l) != 0
then