Skip to content

Instantly share code, notes, and snippets.

Avatar

Daniel Marino starzonmyarmz

View GitHub Profile
@starzonmyarmz
starzonmyarmz / bandcamp.com.js
Created Sep 6, 2012
Play/Pause bandcamp.com with space key
View bandcamp.com.js
// Press space to toggle play/pause state in bandcamp
if (window.location.host.indexOf('bandcamp.com') !== -1) {
$(document).keyup(function(e){
if (e.keyCode === 32) {
$('.playbutton').click();
}
return false;
});
}
@starzonmyarmz
starzonmyarmz / mobile-safari-background-image-svg-rendering-results.md
Created Sep 2, 2012
The results of how mobile Safari and mobile Google Chrome render svg graphics when used as a css background image.
View mobile-safari-background-image-svg-rendering-results.md

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
starzonmyarmz / config.ru
Created Aug 8, 2012
Sample config.ru file for CSS Preprocessor Presentation
View config.ru
# 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
starzonmyarmz / index.html
Created Jun 21, 2012
A web page created at CodePen.io
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cube Slider &middot; CodePen</title>
<style>
View scss-mixin.scss
//Prefixes definition
$webkit:true;
$o:true;
$moz:true;
$w3:true;
$ms:true;
//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
&:before,
&:after
@starzonmyarmz
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="mailto:me@wunderlist.com?body=' + title + ' - ' + url + '" class="to-wunderlist">Add to Wunderlist</a>');
})();
View modernizr_load.js
Modernizr.load({
test: Modernizr.mq('only screen and (min-width: 768px)'),
yep : ['//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', 'js/plugins.js', '//fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Narrow|Vollkorn:400italic,400'],
complete: function() {
if (window.jQuery) {
var images = '<li><img src="http://dummyimage.com/880x310/efefef/000.png"></li><li><a href="#"><img src="img/slide-marriage.jpg"></a></li><li><a href="#"><img src="http://dummyimage.com/880x310/123/fff.png"></a></li><li><a href="#"><img src="http://dummyimage.com/880x310/999/fff.png"></a></li>';
$('.slides').append(images);
Modernizr.load('js/script.js');
console.log('done');
}
@starzonmyarmz
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 () {
setInterval(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>');
t.addClass('hideBtnAdded');
}
});