Sam Yamashita sotayamashita

Just jotting some notes on delivering webfonts performantly…

still an incomplete draft.

Any critical fonts must be requested asap.

Critical fonts are neccessary for the above-the-fold content to be useful. Identify which of the fonts you NEED for the first render, as they get very different treatment vs the others.

You want the network reqs for your critical fonts to start ASAP. ideally the @font-face req is in a style tag, following CRP guidelines

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

Auto-deploying built products to gh-pages with GitHub Actions

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

A file below this one contains the steps for doing this with Travis CI. However, these days I recommend GitHub Actions, for the following reasons:

It is much easier and requires less steps, because you are already authenticated with GitHub, so you don't need to share secret keys across services like you do when coordinate Travis CI and GitHub.
It is free, with no quotas.
Anecdotally, builds are much faster with GitHub Actions than with Travis CI, especially in terms of time spent waiting for a builder.

Shortcut for Syntax Highlighting in Keynote

The idea is based on a gist by @jimbojsb.

You can use Pygments or Highlight.

Install Pygments

brew install python

	import pluginify from 'pluginify';

	class Plugin {
	constructor() {
	/* ... */
	}
	}

	/*
	Convert plugin class into a jQuery plugin

	var webpack = require('webpack');
	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var path = require('path');
	var folders = {
	APP: path.resolve(__dirname, '../app'),
	BUILD: path.resolve(__dirname, '../build'),
	BOWER: path.resolve(__dirname, '../bower_components'),
	NPM: path.resolve(__dirname, '../node_modules')
	};

	# rubocop v0.35.0 から inherit_gem という機能が増えたので gem にしました
	# https://github.com/onk/onkcop
	inherit_gem:
	onkcop: "config/rubocop.yml"

	# Import unittest module for creating unit tests
	import unittest

	# Import time module to implement
	import time

	# Import the Selenium 2 module (aka "webdriver")
	from selenium import webdriver

	# For automating data input

	var mediaJSON = { "categories" : [ { "name" : "Movies",
	"videos" : [
	{ "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
	"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
	"subtitle" : "By Blender Foundation",
	"thumb" : "images/BigBuckBunny.jpg",
	"title" : "Big Buck Bunny"
	},
	{ "description" : "The first Blender Open Movie from 2006",
	"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],

	require('font-awesome/css/font-awesome.css');

	document.body.innerHTML = '<i class="fa fa-fw fa-question"></i>';