Skip to content

Instantly share code, notes, and snippets.

View andrewrocco's full-sized avatar

Andy Rossi andrewrocco

23 followers · 1 following
View GitHub Profile
@andrewrocco
andrewrocco / micro-multi-tel.html
Created March 15, 2012 18:13
Example of multiple telephone number types for microformats
<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>
</p>
</div>
@andrewrocco
andrewrocco / diagonal-lines.sass
Last active December 10, 2015 23:48
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.
// Diagonal Lines
.some-element {
background: black;
position: relative;
&:before,
&:after {
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
content: "";
display: block;
@andrewrocco
andrewrocco / working-with-sprites.scss
Last active December 14, 2015 19:18
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.
// 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
andrewrocco / react-gulpfile.js
Last active February 18, 2016 13:47
A sample React gulpfile
// 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
andrewrocco / cripes.txt
Created September 25, 2016 19:27
Allowing the Apple Watch to unlock a Mac
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
andrewrocco / ga-ratio.js
Created July 17, 2012 15:48
Pixel Aspect Ratio Google Analytics Custom Variable
// 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']);
// --- IMPORTANT LINE!
// params: event method, custom variable slot, variable name, variable value, scope level
@andrewrocco
andrewrocco / border-radius.scss
Created March 8, 2012 15:22
Helpful Sass Mixins
@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;
}
@andrewrocco
andrewrocco / check.html
Created April 24, 2012 17:55
CSS Media Check
<!doctype html>
<html>
<head>
<title>CSS Media Check</title>
<style type="text/css">
#mediaquery{
-webkit-transition: width .001s;
-moz-transition: width .001s;