threepointone

architectures and whatnot

1. plain ol' React

let state = initial
render(view(state), element)

• view is pure!

daneden

#!/usr/bin/env bash
# Run this command to execute the script:
# curl https://gist.githubusercontent.com/daneden/c6b5cfbcff4d3cc3ca46/raw/smaller-sketch-svgs.sh | bash

# Tell Sketch to export compact SVGs
defaults write com.bohemiancoding.sketch3 svgExportCompact -bool yes
defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist svgExportCompact -bool yes

# Tell Sketch to omit layer names as IDs for SVGs
defaults write com.bohemiancoding.sketch3 svgExportSkipAssignIdToLayerName -bool yes

wesbos

// paste in your console
    speechSynthesis.onvoiceschanged = function() {
      var msg = new SpeechSynthesisUtterance();
      msg.voice = this.getVoices().filter(v => v.name == 'Cellos')[0];
      msg.text = Object.keys(window).join(' ');
      this.speak(msg);
    };

ericelliott

git remote prune origin
git branch -r --merged master | egrep -iv '(master|develop)' | sed 's/origin\///g' | xargs -n 1 git push --delete origin

bendc

const shuffle = (arr, mixed = [], pool = arr.slice()) => {
  const remaining = pool.length;
  if (!remaining) return mixed;
  const index = Math.floor(Math.random() * remaining);
  const el = pool.splice(index, 1).pop();
  mixed.push(el);
  return shuffle(arr, mixed, pool);
};

jonsuh

.HeartAnimationContainer .HeartAnimation {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC1QAAABkCAYAAAA7MJAoAABZBElEQVR42uzBAQEAAACAkP6v7ggCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDZgwMBAAAAACD/10ZQVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVXYuXuWKOAAjuP/paF3UO8gaAwJ90Ck1E49HygDL+ye8s5DF0kzMJCgGhxssMDFoRIqbPAp7zofwG5IaqkhagjaImhw/LdF0VbQqXw+b+G7/vjB/1cb6i4F9ECLA2B9dKBxdTTTGNg3VooXCwE9AAAAAAAAONzK7Q3HNy+dGd9OnDoW0IM/7PQ3na/1NyUCeqCHHmhxIJWLPaXHY6W4UuwbCeiBFvvccr6nupTvrQUAAAAAAADgcKukmi9UU83dgX1ha2JwrHItG7duDE4F9OA3cebOkZXJkXfLk8Mf9+5PHw3ogR56oMWB8yLd9nAp0/t5NZ1YDOiBFgAAAAAAAGDAS71VryYbXuaTn6r55PeNwa7Tgbp6kz53Ynm88PXB1ERcvD60t5vvOBnQg582My0L86Urca6Uj+V060JAD/TQAy0AAAAAAAAAAANe/sX2zeHF5zN349PpW3Hr9lg5UFeb2bbdR/2tca5QjPOpZKykW14H9ODX177b5Wzn20q2+/1auu1eQA/00AMtAAAAAAAAAMAbsgEvf2sn3dK+lOv6NltIxdnC5fgk1xtrA2c7AnWznkmkKrn2D6+G+p5t5Dq/rGUShYAeAAAAAMAP9u7npek4juP4hyAo+gfqTwi6RZDUSQJbufS7NbdpTTfS77bvvvsqbaBpP0AhITyUUIc6pUZ

joshpuckett

spinner = new Layer
	width: 100
	height: 100
	x: 100
	y: 100
	backgroundColor: "transparent"
spinner.html = "<svg><path fill='#27AE60' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'></path></svg>"

spinner.animate
 properties: {rotation: 360*10}

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

kirbysayshi

I have a big fat object that is structured like this (using CJS format to remove all ambiguity):

// big-fat-package.js
module.exports = {
  runtime: {
    compile: function() {},
    partials: {
      'non-valid-identifier-property-0': function() {},
      'non-valid-identifier-property-1': function() {},

bendc

const toRGB = (() => {
  const expand = hex =>
    hex.length < 7 ? hex.split("").reduce((a, b) => a + b + b) : hex;
  const convert = hex =>
    hex.match(/[\d\w]{2}/g).map(val => parseInt(val, 16));
  return hex => {
    const [r, g, b] = convert(expand(hex));
    return `rgb(${r}, ${g}, ${b})`;
  };
})();