Skip to content

Instantly share code, notes, and snippets.


Daniel Marino starzonmyarmz

View GitHub Profile
starzonmyarmz /
Created Sep 6, 2012
Play/Pause with space key
// Press space to toggle play/pause state in bandcamp
if ('') !== -1) {
if (e.keyCode === 32) {
return false;
starzonmyarmz /
Created Sep 2, 2012
The results of how mobile Safari and mobile Google Chrome render svg graphics when used as a css background image.

Is this a bug or a feature?

It appears that mobile Safari and mobile Google chrome (on iPhone for clarity sake) rasterizes svg graphics used as css background images when svg graphic needs to repeat. This causes the graphic to appear blurry which is no different than serving a raster-based format (such as a png) to the browser. This occurs whether the page is served at 100% or zoomed in on page load, or zooming in after page load.

If the svg graphic does not repeat or is cut off (if the html element is not wide or tall enough to show the whole svg graphic) it is treated as vector data. This allows the image to scale without any blurring during or after page load, zoomed at 100% or more.

Here is a side by side comparison of a test page served to iOS Mobile Safari, 100% on the left, and zoomed in on the right. Note that the results are the exact same on iOS Google Chrome and if images are served as data URIs. Also not pictured, iOS Mobile Opera serves the svg graphic (in this test

starzonmyarmz /
Created Aug 8, 2012
Sample file for CSS Preprocessor Presentation
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
starzonmyarmz / index.html
Created Jun 21, 2012
A web page created at
View index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Cube Slider &middot; CodePen</title>
View scss-mixin.scss
//Prefixes definition
//Gradient Mixin
@mixin gradient($mode,$direction,$from,$to,$oldDirection:null){
View utf-8-bug-fix.sass
* Yeah, so rake:assets:precompile will fail if this file is ascii, and something
* it imports is utf-8. To fix it, here is a snowman: ☃ (no, really.)
View flag.sass
@mixin flag-rag-right($ragClipColor, $ragShadow, $height, $width)
background: red
display: block
height: $height
position: relative
width: $width
starzonmyarmz / wunderlist.js
Created Feb 3, 2012
Email Redmine issues (tickets) to your Wunderlist inbox using 'mailto'
View wunderlist.js
// Email ticket to my Wunderlist
(function toWunderlist() {
var title = document.title
.replace(' - Cramer Dev', '')
.replace('Scrum Task ', ''),
url = document.location.href;
$('#content').find('.contextual').prepend('<a href="' + title + ' - ' + url + '" class="to-wunderlist">Add to Wunderlist</a>');
View modernizr_load.js
test:'only screen and (min-width: 768px)'),
yep : ['//', 'js/plugins.js', '//|PT+Sans+Narrow|Vollkorn:400italic,400'],
complete: function() {
if (window.jQuery) {
var images = '<li><img src=""></li><li><a href="#"><img src="img/slide-marriage.jpg"></a></li><li><a href="#"><img src=""></a></li><li><a href="#"><img src=""></a></li>';
starzonmyarmz / hide-inline-images.js
Created Jan 20, 2012
A userscript for Flowdock that adds a button next to inline elements like Tweets and Images that allows you to hide them. Really useful to hide annoying animated gifs and hubot pug bombs
View hide-inline-images.js
(function () {
$('.image-preview-wrapper').not('.hideBtnAdded').each(function() {
var t = $(this);
if (t.find('.hideImg').length === 0) {
t.append('<button class="hideImg">Hide This Image</button>');