Skip to content

Instantly share code, notes, and snippets.

View tomblanchard's full-sized avatar

Tom Blanchard tomblanchard

View GitHub Profile
@tomblanchard
tomblanchard / array-object-for-loop.js
Last active August 29, 2015 14:01
Array of objects `for` loop with repaint performance in mind, mostly for use in fetching and displaying data from external JSON APIs.
var data = [
{
id: 1,
name: 'One',
image: 'http://image-1.jpg'
},
{
id: 2,
name: 'Two',
image: 'http://image-2.jpg'
@tomblanchard
tomblanchard / native-js-api-pollyfills.js
Created June 9, 2014 18:43
Native JS API pollyfills
/**
`classList` pollyfill:
https://github.com/remy/polyfills/blob/master/classList.js
*/
!function(){function e(a){this.el=a;for(var c=a.className.replace(/^\s+|\s+$/g,"").split(/\s+/),d=0;d<c.length;d++)b.call(this,c[d])}function f(a,b,c){Object.defineProperty?Object.defineProperty(a,b,{get:c}):a.__defineGetter__(b,c)}if(!("undefined"==typeof window.Element||"classList"in document.documentElement)){var a=Array.prototype,b=a.push,c=a.splice,d=a.join;e.prototype={add:function(a){this.contains(a)||(b.call(this,a),this.el.className=this.toString())},contains:function(a){return-1!=this.el.className.indexOf(a)},item:function(a){return this[a]||null},remove:function(a){if(this.contains(a)){for(var b=0;b<this.length&&this[b]!=a;b++);c.call(this,b,1),this.el.className=this.toString()}},toString:function(){return d.call(this," ")},toggle:function(a){return this.contains(a)?this.remove(a):this.add(a),this.contains(a)}},window.DOMTokenList=e,f(Element.prototype,"classList",function(){return new e(this)})}}();
/**

Main Title

I have a utility class such as:

.mb {
  margin-bottom: 20px;
}
@tomblanchard
tomblanchard / instagram-feed.html
Created December 6, 2014 21:00
Instagram feed.
<ul class="instagram__items"></ul>

Shopify Custom HTML Email

Installation

Images

Start by uploading the contents of the email/img directory to your theme assets folder, you can do this via the admin page by clicking the active theme Edit HTML/CSS button, expanding the Assets folder tree and clicking Add a new asset.

HTML

@tomblanchard
tomblanchard / shopify-encapsulated-components.md
Last active April 24, 2017 04:27
Shopify: Encapsulated components.

Concept

In React (JSX), you create a component like so:

function Button(props) {
  return (
    <button className={"button " + (props.color ? props.color : '')} type="button">
      {props.value}
    </button>
var element = document.querySelector('[data-module-language-selector]');
if (element) {
element.addEventListener('change', (event) => {
window.location = event.target.value;
});
}
{% assign google_analytics_id = nil %}
{% if content_for_header contains "ga('create', '" %}
{% assign google_analytics_id = content_for_header | split: "ga('create', '" | last | split: "'" | first | strip %}
{% endif %}
{% if google_analytics_id %}
<p>My Google Analytics ID is: {{ google_analytics_id }}</p>
{% endif %}
var express = require('express');
var cors = require('cors');
var Shopify = require('shopify-api-node');
var app = express();
var port = 3000;
// Shopify API
var shopify = new Shopify({
shopName: 'liquify-scripts',