Skip to content

Instantly share code, notes, and snippets.

View tsvensen's full-sized avatar

Tim Svensen tsvensen

50 followers · 9 following
View GitHub Profile
@tsvensen
tsvensen / gist:4efedfe486ecbc4d3345
Created September 5, 2014 22:02
jQuery Element Caching System
// Requires underscore or lodash for isUndefined()
var $cache = {};
/**
* Returns the page title element and will set the page title element when it doesn't exist
* @param {String} selector
* @returns {jQuery}
*/
getElement: function getElement(selector) {
if (typeof selector !== 'string') {
@tsvensen
tsvensen / getQueryParameters
Last active August 29, 2015 13:56
Get Query Params
// Plugin to get query params as an object
jQuery.extend({
getQueryParameters : function(str) {
return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
}
});
// EXAMPLE
// http://codepen.io/chriscoyier/pen/uszCr?lunch=sandwich&dinner=stirfry
var queryParams = $.getQueryParameters();
@tsvensen
tsvensen / get-multiplier.sass
Last active December 17, 2015 00:10
get-multiplier() & strip-units() bonus. For setting line-height and EM values, specifically for vertical rhythms. This is different from the px to em functions out there.
// strip-units()
// Remove units from a Sass value with units (em, px, etc.)
// http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass#answer-12335841
// EXAMPLE
// strip-units($my-var);
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
@tsvensen
tsvensen / colorize-svg-with-js.svg
Created May 1, 2013 16:50
Colorize svg images with javascript using the file/browser path (js): http://elbone.github.io/cdn/codepen/icon.svg#FF0000
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@tsvensen
tsvensen / browser-notepad
Created May 1, 2013 16:45
Transform your browser into a notepad, paste in URL bar:
data:text/html,<html contenteditable>
@tsvensen
tsvensen / fixed-and-fluid-ratios.css
Last active December 16, 2015 20:10
Fixed and Fluid Ratios
/**
* FIXED and FLUID RATIOs
* http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
*/
/**
* FIXED RATIO
<div class="column">
<figure class="fixedratio"></figure>
@tsvensen
tsvensen / image-replacement.css
Last active December 23, 2019 11:46
Image Replacement Technique
/* http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
@tsvensen
tsvensen / MediaQueries+ESRG.scss
Last active December 16, 2015 17:59
Using Media Queries in Sass with ESRG's Sass Grid Generator (https://github.com/dfcb/extra-strength-responsive-grids)
// Using media queries in Sass with ESRG Grid Generator (https://github.com/dfcb/extra-strength-responsive-grids)
@import 'grid.generator.scss' // (https://github.com/dfcb/extra-strength-responsive-grids/blob/master/css/_grid.generator.scss)
// Media query mixin used below (should live in another file)
@mixin mq($media_query) {
@media ($media_query) { @content; }
}
@tsvensen
tsvensen / track.js
Last active April 4, 2023 18:52
Abstract+Extend Google Analytics Tracking
/**
* Google Analytics Tracking
*
* Abstracting Google Analytics basic _trackEvent and _trackPageview
* Easily extended to support specific use cases
*/
var TRACK = (function($) { // Yes I know, TRACK is a global variable poluting the global namespace
//////////////////////////////////////////////// Example calls (maybe not the best place for them)
@tsvensen
tsvensen / gist:2829402
Created May 29, 2012 16:30 — forked from cvuletich/gist:2829385
CSS3 Ring Pulsers
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ring Pulsers</title>
<style type="text/css" media="screen">
.marker {
left: 150px;
height: 100px;
position: absolute;