Jacob Groß kurtextrem

Exporting an emblem

Log into BF4 Battlelog.
Visit the Customize emblem page.
Select the emblem you wish to export.
Open the console (Ctrl-Shift-J).
Enter the following code snippet to copy the raw emblem data to the clipboard:
copy('emblem.emblem.load('+JSON.stringify(emblem.emblem.data,null,2)+');');
Paste somewhere useful, like a gist. Whatever.
Close the console (Ctrl-Shift-J).

Make it useful

Install Package Control. For SublimeText 2, paste the following in Terminal:

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

From here on out, use Package Control to install everything. ⌘+Shift+P, then type Install to get a list of installable packages you can 'livesearch through. After installing plugins, they should be running.

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

http://www.fontsquirrel.com/tools/webfont-generator

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

	/**
	* Input CSS
	* No custom syntax. Just write "future" CSS without vendor prefixed properties or values.
	* Use a subset of CSS variables (not dynamic or scoped).
	* Specify a level of browser support: IE 8+, etc.
	* Tool takes browser support and specific declarations to generate vendor-specific variants.
	* This source code is just CSS and works in any browser with adequate support.
	* One day, perhaps you'll have no need to preprocess this code.
	*/

	(function(){
	var log = console.log;

	console.log = function(str) {
	var css = 'background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red); color: white; font-weight: bold;';
	var args = Array.prototype.slice.call(arguments);
	args[0] = '%c' + args[0];
	args.splice(1,0,css);
	return log.apply(console, args);
	}

	(function(){
	var log = console.log;

	console.log = function(str) {
	var css = 'background-image: url("http://fc07.deviantart.net/fs70/f/2013/090/3/5/ocs____seine_unicorn_sprite_by_onisuu-d5zuuax.gif"), linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red); background-repeat: no-repeat, no-repeat; padding-left: 20px; color: white; font-weight: bold; font-size: 12pt; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;';
	var args = Array.prototype.slice.call(arguments);
	args[0] = '%c ' + args[0];
	args.splice(1,0,css);
	return log.apply(console, args);
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Styled Select</title>
	</head>

	<style>

	* {

	/jslint indent: 2 /
	(function (FunctionPrototype) {
	'use strict';
	var originalBind = FunctionPrototype.bind;
	if (!originalBind.patched) {
	Object.defineProperty(
	FunctionPrototype,
	'bind',
	{
	configurable: true,

	<html>
	<head>
	<title>Select styles with CSS only</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
	background-color: #fff;
	font-family: helvetica, sans-serif;
	margin: 4% 10%
	}