mattsacks

Tailwind.css and CSS Modules make a lovely pairing. You get to write things like:

/* In your styles.module.css file: */
.heading {
  composes:
    global(bg-primary)
    global(p-6)

mattsacks

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

%fart {
  color: brown;
}

%fart {

mattsacks

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----

%address-input {
  color: red;
  &-city, &-state {
    color: blue;
  }

mattsacks

// prevent back/forward gestures when scrolling an element left/right on OS X
var preventHistorySwipe = function(element) {
  // not even on the right platform bro
  if (navigator.userAgent.indexOf('Macintosh') === -1) return;

  element.addEventListener('mousewheel', function(e) {
    var x = e.wheelDeltaX;

    // scrolling up or down? then i don't give a shit
    if (x === 0) return;

mattsacks

Inspired by @tmcw and Geometry Daily.

mattsacks

var defaultDate = '1/10/2013';
window['d8'] = Date;

Date = function(time) {
  return time == null ? new d8(defaultDate) : new d8(time);
}
for (var key in Date.prototype) Date[key] = d8[key];

// fix mootools and d3
Date.parse = d8.parse;

mattsacks

$a: white
$b: blue
$c: black

$letters: a b c
$colors:  $a $b $c

@for $i from 1 through length($letters)
  $letter: nth($letters, $i)
  $color:  nth($colors, $i)

mattsacks

comparison between 15-point line transition and n-point transition

demo

in association with

mattsacks

Animating the addition/subtraction of points along a path causes jerkiness. This is a demonstration of what that could look like between 5-15 points on a normal distribution.

It can probably be solved in some way by re-drawing the line with the new number of points, interpolating between the old number of points so that it looks exactly the same - then just animating those points to their new coordinate.

mattsacks

--langdef=js
--langmap=js:.js
--regex-js=/([A-Za-z0-9._$]+)[ \t]*[:=][ \t]*\{/\1/,object/
--regex-js=/([A-Za-z0-9._$]+)[ \t]*[:=][ \t]*new Class\(\{/\1/,class/
--regex-js=/([A-Za-z0-9._$()]+)[ \t]*[:=][ \t]*function[ \t]*\(/\1/,function/
--regex-js=/function[ \t]+([A-Za-z0-9._$]+)[ \t]*([^)])/\1/,function/
--regex-js=/([A-Za-z0-9._$]+)[ \t]*[:=][ \t]*\[/\1/,array/
--regex-js=/([^= ]+)[ \t]*=[ \t]*[^"]'[^']*/\1/,string/
--regex-js=/([^= ]+)[ \t]*=[ \t]*[^']"[^"]*/\1/,string/
--regex-js=/(,|(;|^)[ \t]*(var|let|([A-Za-z_$][A-Za-z0-9_$.]+\.)*))[ \t]*([A-Za-z0-9_$]+)[ \t]*=[ \t]*.+([,;=]|$)/\5/,variable/