robinsloan

#!/usr/bin/env ruby
require "rubygems"
require "twitter"
require "json"
require "faraday"

# things you must configure
TWITTER_USER = "your_username"

# get these from dev.twitter.com

jessicard

Basic macaron shell recipe

• This will make approximately 100 shells, or about 4 dozen cookies
• When practicing, I generally half this recipe to only make 1 sheet of cookies
• When making macarons, you will generally flavor the filling but not the shells
• You want to make the macarons the day before the event. You will store them in the refrigerator over night, and then take them out a few hours before to come to room temperature. This is because macarons are best when "ripened", or allowed to sit for at least one night and have the filling seep into the shells a bit. Otherwise, straight out of the oven, they can be too crunchy or hard
• Macarons shells freeze well! Filled macarons can also freeze well depending on the filling. Buttercream fillings freeze great. Put the cookies into an airtight container before freezing
• Everyones baking temperature and baking time vary depending on their oven - you might have to experiment a bit!
• _I always separate egg whites myself by cracking the egg, p

alishalisha

Checking the State of Your States

If applicable, make sure your design component accounts for all these states. This is basically copied from the Nine States of Design Medium article. 😛

• Initial state: What happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.
• Loading state: Have you accounted for when a user will be waiting for something to happen? What does that look like?
• Empty state: Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).
• One state: You have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).
• Some data state: This is usually what you think

daneden

Aspirational Dropbox SCSS Principles

This is purposefully ambitious and aspirational. Some concepts that are worth understanding in addition to the principles outlined here include:

• Object-Oriented CSS
• BEM naming methodology
• CSS Namespacing

Here’s a CodePen I’ll periodically update with the compiled CSS to use as a testing playground.

scottjehl

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:

razwan

$base-font-size: 	16px;
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {

arminrosu

svgsprite: {
	options: {
		padding: 10,
		prefix: 'icon',
		layout: 'diagonal', // OR 'vertical' OR 'horizontal'
		render: {
			css: false,
			compass: {
				template: 'path/to/template.js',
				dest: 'path/to/_svg_sprites.scss'

mauricesvay

Brand styleguides

• Starbucks
• Github
• Github Primer
• Mailchimp
• Mapbox
• Salesforce
• Lonely Planet
• FontShop

PaulKinlan

(function() { 
  var CSSCriticalPath = function(w, d, opts) {
    var opt = opts || {};
    var css = {};
    var pushCSS = function(r) {
      if(!!css[r.selectorText] === false) css[r.selectorText] = {};
      var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
      for(var i = 0; i < styles.length; i++) {
        if(!!styles[i] === false) continue;
        var pair = styles[i].split(": ");

malarkey

When times get tough and people get nasty, you’ll need more than a killer smile. You’ll need a killer contract.

Used by 1000s of designers and developers Clarify what’s expected on both sides Helps build great relationships between you and your clients Plain and simple, no legal jargon Customisable to suit your business Used on countless web projects since 2008

…………………………