Skip to content

Instantly share code, notes, and snippets.

Avatar

Alyson Hurt alykat

View GitHub Profile
@alykat
alykat / filmstrip-markup.html
Created January 8, 2014 15:55
Filmstrip blog post: Sample HTML
View filmstrip-markup.html
<div class="filmstrip-outer-wrapper">
<div class="filmstrip-wrapper">
<div class="filmstrip animated"></div>
</div>
</div>
View filmstrip-styles.less
.filmstrip-outer-wrapper {
width: 100%;
margin-bottom: 1em;
.filmstrip-wrapper {
width: 720px;
height: 528px;
}
.filmstrip {
View filmstrip-animation.js
function setup_css_animations() {
var prefixes = [ '-webkit-', '-moz-', '-o-', '' ];
var keyframes = '';
var filmstrip_steps = 25;
...
for (var i = 0; i < prefixes.length; i++) {
...
var filmstrip = '';
for (var f = 0; f < filmstrip_steps; f++) {
var current_pct = f * (100/filmstrip_steps);
View filmstrip-keyframes.css
@-webkit-keyframes filmstrip {
0% {background-position:0 -0%;-webkit-animation-timing-function:steps(1);}
4% {background-position:0 -100%;-webkit-animation-timing-function:steps(1);}
8% {background-position:0 -200%;-webkit-animation-timing-function:steps(1);}
...
View filmstrip-resize.js
...
var $filmstrip_cotton = $('#boxes').find('.filmstrip-wrapper');
var $filmstrip_cotton_wrapper = $('#boxes').find('.filmstrip-outer-wrapper');
...
var filmstrip_cotton_aspect_width = 720;
var filmstrip_cotton_aspect_height = 528;
...
function size_filmstrip() {
var filmstrip_cotton_width = $filmstrip_cotton_wrapper.width();
var filmstrip_cotton_height = Math.ceil((filmstrip_cotton_width * filmstrip_cotton_aspect_height) / filmstrip_cotton_aspect_width);
@alykat
alykat / copytext_table.html
Last active August 29, 2015 14:01
Blog post: Jinja/copytext sample code
View copytext_table.html
<table>
<thead>
<tr>
<th>{{ COPY.labels.hdr_category }}</th>
<th>{{ COPY.labels.hdr_jan }}</th>
<th>{{ COPY.labels.hdr_feb }}</th>
<th>{{ COPY.labels.hdr_mar }}</th>
</tr>
</thead>
@alykat
alykat / dailygraphics-pym.html
Created May 27, 2014 22:16
Blog Post: dailygraphics pym embed
View dailygraphics-pym.html
<div id="responsive-embed-my-new-graphic">
</div>
<script src="http://apps.npr.org/dailygraphics/graphics/my-new-graphic/js/lib/pym.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var pymParent = new pym.Parent(
'responsive-embed-my-new-graphic',
'http://apps.npr.org/dailygraphics/graphics/my-new-graphic/child.html',
{}
);
@alykat
alykat / dailygraphics-pym-child.js
Created May 27, 2014 22:18
Blog Post: dailygraphics pym child
View dailygraphics-pym-child.js
var pymChild = null;
...
$(window).load(function() {
pymChild = new pym.Child({
renderCallback: render
});
})
View keybase.md

Keybase proof

I hereby claim:

  • I am alykat on github.
  • I am alykat (https://keybase.io/alykat) on keybase.
  • I have a public key whose fingerprint is 1F37 2C61 4F2B 48EB C59C 3CF4 6328 DBDE 3BB8 9EE5

To claim this, I am signing this object:

@alykat
alykat / workon_project.applescript
Last active August 29, 2015 14:16 — forked from dannydb/workon_project.applescript
Applescript NPR project launcher for iTerm2
View workon_project.applescript
tell application "iTerm"
activate
set projectSlug to the text returned of (display dialog "Which project?" default answer "")
tell the current terminal
activate current session
launch session "Default Session"