Skip to content

Instantly share code, notes, and snippets.

@backflip
backflip / bookmarklet.js
Last active April 18, 2017 17:17
Keyboard navigation for Sketch Measure
(function() {
const aside = document.querySelector('aside');
function getCurrent() {
return document.querySelector('.artboard.active') || document.querySelector('.artboard');
}
function showSidebar() {
aside.classList.add('on');
}
@backflip
backflip / gist:1386442
Created November 22, 2011 18:26
OS X Folder Action to make Screenshot either public or not
on adding folder items to theWatchedFolder after receiving theDetectedItems
set _public to "Macintosh HD:Users:me:Dropbox:Public:Screenshots"
set _private to "Macintosh HD:Users:me:Dropbox:Photos:Screenshots"
try
set _choice to button returned of (display dialog "Share on DropBox?" buttons {"No", "Yes"} default button 2 cancel button "No")
if _choice = "Yes" then
@backflip
backflip / gulpfile.js
Created February 3, 2014 16:48
Gulp.js: Process SASS to CSS and auto-prefix the necessary properties
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('css', function() {
return gulp.src('./source/assets/css/main.scss')
.pipe(sass({
style: gutil.env.production ? 'compressed' : 'expanded'
}))
traceroute to mediatemple.net (64.207.129.182), 64 hops max, 52 byte packets
1 172.20.10.1 (172.20.10.1) 2.215 ms 2.089 ms 1.623 ms
2 192.168.242.1 (192.168.242.1) 45.445 ms 28.917 ms 39.819 ms
3 192.168.0.202 (192.168.0.202) 39.991 ms 47.569 ms 39.702 ms
4 192.168.0.181 (192.168.0.181) 30.114 ms
192.168.0.205 (192.168.0.205) 79.893 ms 39.294 ms
5 192.168.19.14 (192.168.19.14) 39.779 ms 69.757 ms 40.024 ms
6 192.168.18.2 (192.168.18.2) 49.195 ms 49.675 ms 70.768 ms
7 192.168.18.23 (192.168.18.23) 59.657 ms 40.749 ms 39.454 ms
8 253-154-3-213.bluewin.ch (213.3.154.253) 98.625 ms 57.896 ms 70.271 ms
/**
* Accordion plugin
*
* @author XY (123 AG)
*/
;(function(window, document, $) {
/**
* Plugin name
@backflip
backflip / gist:4723028
Created February 6, 2013 14:52
Issues with Reader button when hiding the address bar in iOS

HIDING ADDRESS BAR ON IOS

Problem

To have more space available for the content, it is common practice for web apps to hide the address bar. This is done by programmatically scrolling the page. Since the introduction of the "Reader" functionality in iOS 5, the address bar contains an additional button when the browser detects "enough" content (see http://mathiasbynens.be/notes/safari-reader for details). When this button is present, the address bar does not hide for about 3-5 seconds. During this period of time, the content below the address bar (in our situation the whole header) is not visible.

Solutions

@backflip
backflip / gist:4722355
Last active December 12, 2015 05:29
Issues with fixed header

FIXED HEADER ON MOBILE

Problem

Some platforms do not support a value of "fixed" for the CSS property "position", which is used to position elements relative to the viewport where they remain while scrolling. It is possible to emulate this behavior using CSS or JavaScript. However, there are several trade-offs:

  • It is not reliable to listen to the scroll event and re-position a fixed element while scrolling. One approach is to hide the fixed elements when scrolling starts and show them again when it stopped (jQuery Mobile was using this for some time).
  • The only somewhat working solution is to create a "scrollview" which is as tall as the viewport and to scroll inside this area instead.
  • A "scrollview" can either be created using CSS or JavaScript. The CSS solution (overflow:scroll) is not feasible because there is no scroll momentum, usually no scrollbars and many platforms require two fingers for scrolling. There is a new CSS property on webkit (-webkit-overflow-scrolling) which solves most of thi
$(function() {
var hash = window.location.hash,
field = document.tweetfinder.user;
if (hash) {
hash = hash.substring(1);
// Fill field
field.value = hash;
@backflip
backflip / gist:3132520
Created July 17, 2012 22:17
Update SASS in LiveReload
// Assuming the latest version was installed using RubyGems (gem install sass --pre)
// The path depends on the exact version, of course. Tab completion to the rescue.
cd /Applications/LiveReload.app/Contents/Resources/SASS.lrplugin/lib
mv sass sass-bundled
ln -s /Library/Ruby/Gems/1.8/gems/sass-3.2.0.alpha.275/ sass
@backflip
backflip / gist:2997044
Created June 26, 2012 16:50
NZZ: Ruckelloser Social-Media-"Floater"
/**
* JavaScript von nzz.ch
* Anpassungen: Zeile 72 - 161: Code für $.fn.floaternavi mit Abfrage für position:fixed-Support
*
* Notwendige Anpassungen am CSS: "position:fixed" für ".inScrollMode"
*
* Demo: http://jsfiddle.net/backflip/4Zjxx/embedded/result/
*/