Skip to content

Instantly share code, notes, and snippets.

View ryantownsend's full-sized avatar

Ryan Townsend ryantownsend

50 followers · 7 following
View GitHub Profile
@ryantownsend
ryantownsend / pinch-to-zoom.js
Last active June 5, 2023 09:27
A pinch-to-zoom custom element for HTML
// author: Ryan Townsend (lessonsofacto.com)
//
// usage:
// ```html
// <pinch-to-zoom style="display:block">
// <img srcset="..." style="display:block;width:100%;aspect-ratio:1/1" />
// </pinch-to-zoom>
// <script src='/scripts/pinch-to-zoom.js' defer></script>
// ```
@ryantownsend
ryantownsend / href-prefetch.js
Last active March 14, 2018 14:37
JavaScript to prefetch marked links after page load
<script>
function(w, d) {
var prefetchLinks = function() {
d.querySelectorAll("a[href][rel='prefetch']").forEach(function() {
var link = d.createElement('link');
link.rel = 'prefetch';
link.href = this.getAttribute('href');
d.head.appendChild(link);
});
}
@ryantownsend
ryantownsend / paginatable.rb
Last active January 26, 2016 08:47
Provides consistent JSON-API compliant pagination methods
#
# Api::Paginatable
#
# Provides consistent JSON-API compliant pagination methods
#
module Api::Paginatable
extend ActiveSupport::Concern
protected
# receives a ActiveRecord::Relation, applies pagination and returns
@ryantownsend
ryantownsend / example.html
Last active August 15, 2016 19:26
ITCSS Flexbox Grid Object
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="main.css" />
<title>ITCSS Grid Example</title>
</head>
<body>
@ryantownsend
ryantownsend / qubit.liquid
Created March 3, 2015 15:20
{% if qubit_page_type == blank %}
{% assign qubit_page_type = "Content" %}
{% endif %}
{% if cart_delivery_price == null %}
{% include 'cart_delivery_price' %}
{% endif %}
<script>
{% assign line_item_index = 0 %}
@ryantownsend
ryantownsend / keybase.md
Created September 23, 2014 18:52
keybase.md

Keybase proof

I hereby claim:

  • I am ryantownsend on github.
  • I am ryantownsend (https://keybase.io/ryantownsend) on keybase.
  • I have a public key whose fingerprint is CDB4 F79A 6D38 8957 8A6C E6BB 2907 05E2 A0C8 DB91

To claim this, I am signing this object:

@ryantownsend
ryantownsend / carrierwave_direct.rb
Created April 17, 2014 04:22
Patches CarrierWave Direct to fix signature not matching errors, as per https://github.com/dwilkie/carrierwave_direct/pull/128
# config/initializers/carrierwave_direct.rb
require "carrierwave_direct"
module CarrierWaveDirect
module SignatureFixMonkeyPatch
def policy(options = {})
options[:expiration] ||= upload_expiration
options[:min_file_size] ||= min_file_size
options[:max_file_size] ||= max_file_size
@ryantownsend
ryantownsend / gist:9614810
Created March 18, 2014 06:50
AGE_CATEGORIES = {
:child => 0..12,
:teenager => 13..19,
:young => 20..28,
:adult => 29..50,
:senior => 50..120
}
def age_group_lookup(age)
AGE_CATEGORIES.find { |(k, v)| v.cover?(age) }.first
@ryantownsend
ryantownsend / Procfile
Last active December 21, 2015 01:48
web: bundle exec puma -t 2:8 -C /path/to/current/config/puma.rb -b unix:///path/to/shared/tmp/sockets/puma.sock
@ryantownsend
ryantownsend / append_css.js
Last active December 15, 2015 16:19
Append CSS as a stylesheet using JS.
// source: http://alexsexton.com/blog/2013/03/deploying-javascript-applications/
var css = '#generated{css:goes-here;}';
var head = document.head || document.getElementsByTagName('head')[0],
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;