Skip to content

Instantly share code, notes, and snippets.

View jackrugile's full-sized avatar

Jack Rugile jackrugile

485 followers · 244 following
View GitHub Profile
@jackrugile
jackrugile / SassMeister-input.scss
Created January 31, 2015 00:57
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
/*
The item class is sometimes a <div>, and sometimes an <a>.
I'd like to only set a hover effect when it's an <a>.
Id there a way to utilize the ampersand and
nested syntax to achieve this?
@jackrugile
jackrugile / SassMeister-input.scss
Created February 26, 2015 17:50
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
@mixin specify($selector) {
@at-root {
#{selector-append($selector, &)} {
@content;
}
@jackrugile
jackrugile / bem-nesting.html
Created July 29, 2015 16:59
<nav class="nav">
<ul class="nav__list">
<li class="nav-list__item">
<a class="nav-list-item__link"></a>
</li>
<li class="nav-list__item">
<a class="nav-list-item__link"></a>
</li>
<li class="nav-list__item">
<a class="nav-list-item__link"></a>
@jackrugile
jackrugile / index.html
Created December 15, 2011 19:36
Canvas Particles
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Particles v2</title>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0;
}
@jackrugile
jackrugile / main.js
Last active December 22, 2015 06:09
Favicon generated from array using canvas and toDataURL()
function generateFavicon() {
var favicon = document.getElementById( 'favicon' ), // referencing shortcut icon in <head>
favc = document.createElement( 'canvas' ),
favctx = favc.getContext( '2d' ),
faviconGrid = [
[ 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ],
[ 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0 ],
[ 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0 ],
@jackrugile
jackrugile / letters.js
Created November 27, 2013 19:26
$.definitions.letters = {
'1': [
[ , , 1, , 0 ],
[ , 1, 1, , 0 ],
[ , , 1, , 0 ],
[ , , 1, , 0 ],
[ 1, 1, 1, 1, 1 ]
],
'2': [
[ 1, 1, 1, 1, 0 ],
@jackrugile
jackrugile / glc1.js
Created January 24, 2016 04:01
function onGLC(glc) {
glc.loop();
glc.size(400, 400);
glc.setDuration(2.5);
glc.setFPS(60);
glc.setMode('bounce');
glc.setEasing(false);
var list = glc.renderList,
width = glc.w,
height = glc.h,
@jackrugile
jackrugile / gulpfile.js
Created April 4, 2016 22:59
Gulp Moving Files
gulp.task( 'fonts', function() {
gulp.src('src/fnt/**/*')
.pipe( gulp.dest( dest + 'fnt' ) );
});
gulp.task('watch', function() {
gulp.watch( 'src/fnt/**/*', [ 'fonts' ] );
});
@jackrugile
jackrugile / keybase.md
Created July 19, 2016 03:02

Keybase proof

I hereby claim:

  • I am jackrugile on github.
  • I am jackrugile (https://keybase.io/jackrugile) on keybase.
  • I have a public key whose fingerprint is 3587 DA94 7B25 D76A E723 5757 05BF ACC4 A7AC 936C

To claim this, I am signing this object:

@jackrugile
jackrugile / canvas-blurred-rect.js
Last active November 5, 2016 07:22
Create contained blurred rectangle with HTML 5 canvas
function blurredRect( w, h, blur, color ) {
let c = document.createElement( 'canvas' );
let ctx = c.getContext( '2d' );
c.width = w;
c.height = h;
ctx.fillStyle = color;
ctx.shadowBlur = blur;
ctx.shadowColor = color;
ctx.shadowOffsetX = w;
ctx.shadowOffsetY = h;