Skip to content

Instantly share code, notes, and snippets.

View 1Marc's full-sized avatar

Marc Grabanski 1Marc

1.6k followers · 1 following
View GitHub Profile
@1Marc
1Marc / gist:4770156
Last active May 2, 2019 08:31
Pseudocode to demonstrate batch rendering views.
// Pseudocode to demonstrate batch rendering views
var $items = $('#items');
var $wrap = $items.parent();
$items.detach(); // this detaches the container element from the DOM
var dataset = data; // array of 1000 objects
for (var i = 0; i < dataset.length; i++) {
var myView = new ItemView({model: dataset[i]});
$list.append(myView.render().el;);
}
// put container element into the DOM, which dumps all of the views into the page at once.
@1Marc
1Marc / gist:4770164
Last active December 12, 2015 12:09
Pseudocode to demonstrate lazy loading views.
// Pseudocode to demonstrate lazy loading views
var $list = $('#list');
var dataset = data; // array of 1000 objects
var preload = 50;
for (var i = 0; i < preload; i++) {
var view = new ItemView({model: dataset[i]});
$list.append(view.render().el);
}
var $placeholders = $(); // jQuery collection to store placeholders
@1Marc
1Marc / gist:4770173
Last active December 12, 2015 12:09
Demonstrate smart rendering with requestAnimationFrame
// Pseudocode demonstrating smart rendering with requestAnimationFrame
$(".item_column").on("scroll", function(){
requestTick();
});
function requestTick() {
if (!isTicking) {
requestAnimationFrame(renderItemsInView);
}
isTicking = true;
@1Marc
1Marc / gist:4770184
Last active February 16, 2016 01:50
Pseudocode demonstrating debouncing.
// Pseudocode to demonstrate debouncing
$(".item_column").on("scroll", function(){
// this function fires way too fast
getItemsInView();
});
// With debouncing:
$(".item_column").on("scroll", _.debounce(function(){
// max this function can fire is every 150 milliseconds
getItemsInView();
@1Marc
1Marc / gist:4770187
Last active December 12, 2015 12:09
Pseudocode demonstrating finding elements in the current view.
// Pseudocode demonstrating finding elements in the current view
var $columns = $(".item_column");
$columns.each(function(){
var offset = $(this).offset();
$topItem = document.elementFromPoint(offset.left + 5, offset.top + 5);
$bottomItem = document.elementFromPoint(offset.left + 5, $(this).height - 5);
var $renderItems = $topItem.nextUntil($bottomItem).add($bottomItem);
renderItems($renderItems);
});
@1Marc
1Marc / index.html
Created May 15, 2013 16:56
A CodePen by John Blazek. 3D Carousel Using TweenMax.js & jQuery - Wanted to explore some 3d carousel goodness, using DOM elements. Works best in Chrome/Safari, then FF, not 100% sure about IE 10. TO DO: Adding touch interaction with devices & animate into place and out.
<header>
<h1>3D Carousel Using TweenMax.js & jQuery</h1>
<h3>A pen by <a href="http://www.twitter.com/johnblazek" target="_blank">@johnblazek</a></h3>
<div id="fps">Framerate: 0/60 FPS</div>
</header>
<div id="contentContainer" class="trans3d">
<section id="carouselContainer" class="trans3d">
<figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d">1</div></figure>
<figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d">2</div></figure>
@1Marc
1Marc / TextAsHTML
Last active December 19, 2015 18:08
Mailchimp Text as HTML Email Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|MC:SUBJECT|*">
<title>*|MC:SUBJECT|*</title>
@1Marc
1Marc / gist:7867523
Created December 9, 2013 04:47
PayPal list payments in Node.js
var request = require('request'),
async = require('async'),
express = require('express'),
app = express(),
paypal_api = require('paypal-rest-sdk');
paypal_api.configure({
'host': 'api.paypal.com',
'port': '',
'client_id': ' live application client id ',
@1Marc
1Marc / path_compare_intersection.js
Last active January 2, 2016 08:39
Raphael path intersection code
var targetElement = this.borderElement,
compareElement = item.borderElement,
bbox = targetElement.getBBox(),
transfromString = 'S' + [0.95, 0.95, (bbox.width/2), (bbox.height/2)] + '...',
newEl = targetElement.clone(),
smallerTransform = newEl.transform(transfromString).transform(),
path = newEl.attr('path').toString(),
tpath = Raphael.transformPath(path, smallerTransform),
itemPath = compareElement.attr('path').toString(),
tItemPath = Raphael.transformPath(itemPath, compareElement.transform()),
@1Marc
1Marc / picturefill_wrapper.php
Created February 3, 2014 19:51
Simple Wrapper around Scott Jehl's Picturefill
<?php
function get_src($dir, $filename, $res, $filetype) {
return $dir . $filename . ($res ? '@' . $res : '') . '.' . $filetype;
}
function picturefill($filename, $sizes, $filetype, $alt) {
$imgdir = get_template_directory_uri() . '/img/';
$default = get_src($imgdir, $filename, null, $filetype);
$images = array();