Skip to content

Instantly share code, notes, and snippets.

andrewrocco / cripes.txt
Created Sep 25, 2016
Allowing the Apple Watch to unlock a Mac
View cripes.txt
1. Update everything to the latest respective OS.
2. If 2-Step Verification is in use with your AppleID, turn it off.
3. Every device will freak out
4. Turn on 2-factor Authentication for your AppleID through System Preferences > iCloud > Account > Security (or from the Settings app on iOS)
5. Every device will freak out
6. Sign in and authenticate on every Mac and iOS device you use
7. Security pref pane may show option to allow Apple Watch to unlock your Mac but it may not work yet ("unable to communicate with Watch" error may appear)
8. Toggle Handoff setting on iPhone and Watch
9. Try to check the Allow Apple Watch checkbox again
andrewrocco / react-gulpfile.js
Last active Feb 18, 2016
A sample React gulpfile
View react-gulpfile.js
// gulpfile.js
var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var watchify = require('watchify');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
watchify.args.debug = true;
andrewrocco / working-with-sprites.scss
Last active Dec 14, 2015
I found a cool way to iterate through a list and apply some styles, in this case with a bunch of social network icons! The sprite in question is a vertical one. If it was a grid, a matrix may be necessary to iterate in two dimensions. This all assumes all icons have uniform dimensions.
View working-with-sprites.scss
// Setting Networks in sprite order from top to bottom
$networks: youtube, blogger, dribbble, email, facebook, twitter;
// Setting background sprite (separated for readability)
.social-icons li a { background: url(icon-sprite.png) no-repeat 0 0; }
// Iterating and multiplying!
.social-icons {
li {
// Set the icon height
andrewrocco / diagonal-lines.sass
Last active Dec 10, 2015
Here's a way to create a white diagonal line on a black background using pseudo elements and css triangles. It works on all modern browsers, and IE8.
View diagonal-lines.sass
// Diagonal Lines
.some-element {
background: black;
position: relative;
&:after {
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
content: "";
display: block;
andrewrocco / ga-ratio.js
Created Jul 17, 2012
Pixel Aspect Ratio Google Analytics Custom Variable
View ga-ratio.js
// Create the test
var pixelRatio = (window.devicePixelRatio >= 1.5) ? "high" : "normal";
// Pass it along through GA
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
// params: event method, custom variable slot, variable name, variable value, scope level
View check.html
<!doctype html>
<title>CSS Media Check</title>
<style type="text/css">
-webkit-transition: width .001s;
-moz-transition: width .001s;
andrewrocco / micro-multi-tel.html
Created Mar 15, 2012
Example of multiple telephone number types for microformats
View micro-multi-tel.html
<div class="vcard">
<p class="adr">
<span class="tel"><span class="value">123-123-3333</span> (<span class="type">home</span>)</span><br>
<span class="tel"><span class="value">123-123-5555</span> (<span class="type">work</span>)</span><br>
<span class="tel"><span class="value">123-123-7777</span> (<span class="type">cell</span>)</span><br>
View border-radius.scss
@mixin border-radius ( $value: 3px ) {
-webkit-border-radius: $value;
-moz-border-radius: $value;
border-radius: $value;
// keeps background from busting out of border
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;