Skip to content

Instantly share code, notes, and snippets.

Mindset: The New Psychology of Success - Carol Dweck
Test Driven Development: By Example - Kent Beck
Implementation Patterns - Kent Beck
Wim Crouwel in his own words (http://www.lauwenprojects.com/projects.asp?id=114)
Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability - Steve Krug
Badass: Making Users Awesome - Kathy Sierra
Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students - Ellen Lupton
The Vignelli Canon - Massimo Vignelli (http://www.vignelli.com/canon.pdf)
Stop Stealing Sheep & Find Out How Type Works - Erik Spiekermann, E.M Ginger
Mental Models - Indi Young
;(function() {
var size, width = 1024, step = 64, selector, out = '', style = document.createElement('style')
for (size = 15; size < 32; size++) {
out += '@media (min-width: ' + width +'px) and (min-height: ' + (width * 0.7) +'px) {'
out += ' body, input, button, textarea { font-size: ' + size + 'px; }'
out += ' .column { max-width: ' + (width + step) + 'px; }'
out += ' }'
width += step
}
style.innerHTML = out
@tvandervossen
tvandervossen / gist:5d857b7908054df3b553
Last active October 23, 2015 11:12
Cancel Adobe CC subscription
General Info
Chat start time Oct 23, 2015 3:51:34 AM PST
Chat end time Oct 23, 2015 4:09:20 AM PST
Duration (actual chatting time) 00:17:45
Operator Anurag
Chat Transcript
info: Hi, we are currently helping other customers in line ahead of you. We'll be with you as soon as possible.
;(function() {
var out = [], style
// Scale up margins
function scale(template, from, to, min, max, step) {
for (width = from; width <= to; width += 2) {
out.push('@media (min-width: ' + width + 'px) { ' +
template.replace('[]', min + (width - from) / (to - from) * (max - min)) + ' }')
if (width > screen.width && width > screen.height)
break
The goal of this guide is to define a workflow for generating icon webfonts that are 1. optimized for “pixel perfect” rendering at specific font-sizes and that 2. render consistently across modern platforms and browsers.
Glyphs.app settings and workflow
When you create a new font, remove all glyphs generated by default (first select them, then use the “-” button at the bottom). Icons should be created within a Unicode Private Use Area (PUA), not at the Unicode code points of existing characters.
In Glyphs.app, choose File → Font Info (⌘I), then select the “Font” tab. Set “units per Em” to 2048. You can also set a “Family Name” here.
Switch to the “Masters” tab. Set “Ascender”, “Cap Height”, and “x-Height” to 2048 and “Descender” to -128.
@tvandervossen
tvandervossen / gist:7489079
Last active December 28, 2015 10:49
Quick node.js script to help you test your fancy client-side XHR2 progress bar implementation.
var http = require('http')
var sleep = require('sleep')
var server = http.createServer(function (req, res) {
// console.log(req.headers);
req.on('data', function(chunk) {
console.log('chunk: %d bytes', chunk.length)
// console.log(chunk.toString('utf8'))
sleep.sleep(1)
})
div.description a.autolink
{
display: inline-block;
max-width: 250px;
text-overflow: ellipsis;
overflow: hidden;
}
@tvandervossen
tvandervossen / gist:6687723
Created September 24, 2013 16:54
PostgreSQL for people who just need to get some data out of a dump from Heroku
Start the console (or whatever it’s called):
$ /Applications/Postgres.app/Contents/MacOS/bin/psql
Create a database:
thijs=# create database adj2013;
Import the dump:
@tvandervossen
tvandervossen / gist:5410762
Last active December 16, 2015 09:09
From Astrid Lindgren’s “Pippi Longstocking”
“the children came to a perfume shop. In the show window was a large jar of freckle
salve, and beside the jar was a sign, which read: DO YOU SUFFER FROM FRECKLES?
What does the sign say?” ask Pippi. She couldn’t read very well because she didn’t
want to go to school as other children did.
It says, ‘Do you suffer from freckles?’” said Annika.
Does it indeed?” said Pippi thoughtfully. “Well, a civil question deserves a civil
answer. Let’s go in.”
@tvandervossen
tvandervossen / environment.js
Last active April 2, 2024 20:18
Here’s an example of my current web app user agent, device, and/or feature detection approach. I tend to inline this in the page header just before the stylesheet as part of the distribution build. A benefit of this approach is that detection is done early without any external dependencies. It’s also straightforward to modify or extend while you…
env = (function() {
var flags = {}, ua = navigator.userAgent, el = document.createElement('div'), video = document.createElement('video'), audio = document.createElement('audio'), root = document.documentElement, i
function flag(names) {
names = names.split(' ')
for (i = 0; i < names.length; i++)
flags[names[i]] = true
}
function classnames() {
var names = [], name
for(name in flags) if (flags.hasOwnProperty(name))