Skip to content

Instantly share code, notes, and snippets.

View onezerodigits's full-sized avatar
⌨️
probably typing into a text file

onezerodigits

⌨️
probably typing into a text file
View GitHub Profile
@nathansmith
nathansmith / moz-webkit.css
Created March 22, 2011 01:51
Target Firefox and WebKit via hacky CSS.
/*
Read more here:
https://developer.mozilla.org/en/CSS/@-moz-document
For more browser-specific hacks:
http://paulirish.com/2009/browser-specific-css-hacks
*/
@-moz-document url-prefix() {
/* Put your Firefox specific code here. */
@blindcyclistsunion
blindcyclistsunion / tumblr_recentpostwidget_js.html
Created June 6, 2011 20:15
Tumblr recent posts widget in javascript
<!-- need jquery for this, this line should really go in your theme html
just after the <head> marker, might work OK here if you aren't already using jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- Mimic the style of the tumblr headers from your theme -->
<div class="heading">Recent Posts</div>
<!-- The javascript below will insert your recent posts lists in here -->
<div id="recentPosts"></div>
@necolas
necolas / snippet.js
Created June 14, 2011 20:36
Optimised async loading of cross-domain scripts
/*
* Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
* Better handling of scripts without supplied ids.
*
* N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
*/
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
@wilr
wilr / event.tracking.js
Created August 26, 2011 03:54
Simple jQuery Helper for wrapping GA event tracking
(function($) {
/*
A simple helper plugin for wrapping Google Analytic event tracking
into sites through jQuery and HTML5 data attributes.
This assumes that you have used the standard configuration provided
by google for setting up Google Analytics and used the _gaq var for
storing the tracker.
Can track focus, activate, hover and click input methods but not key
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Design Testing</title>
<style>
body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
.wrapper { width: 6000px; }
.frame { float: left; }
h2 { margin: 0 0 5px 0; }
@andreasbovens
andreasbovens / viewport-meta-in-20-best-responsive-designs.md
Created July 17, 2012 15:56
Viewport meta tags used by the 20 sites that are listed in Social Driver's "20 Best Responsive Web Design Examples of 2012"

Intro

http://socialdriver.com/2012/07/20-best-responsive-websites/ lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.

Findings

  • All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.

However:

  • 8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
  • 3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
  • 1 site has 2 viewport meta tags (with different values) in the source...
@marcedwards
marcedwards / high-dpi-media.css
Last active November 19, 2023 12:56
A CSS media query that captures almost all high DPI aware devices.
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
@mlouro
mlouro / gulpfile.js
Last active June 21, 2022 23:20
gulpfile.js with browserify, jshint, libsass, browserSync for livereload, image optimization and system notifications on errors
'use strict';
var gulp = require('gulp');
var gutil = require('gulp-util');
var del = require('del');
var uglify = require('gulp-uglify');
var gulpif = require('gulp-if');
var exec = require('child_process').exec;
var notify = require('gulp-notify');
@cferdinandi
cferdinandi / stop-video.js
Last active July 19, 2024 23:33
A simple method to stop YouTube, Vimeo, and HTML5 videos from playing.
/**
* Stop an iframe or HTML5 <video> from playing
* @param {Element} element The element that contains the video
*/
var stopVideo = function ( element ) {
var iframe = element.querySelector( 'iframe');
var video = element.querySelector( 'video' );
if ( iframe ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
@zachleat
zachleat / rwdurl
Last active February 5, 2019 02:20
A command line utility to open a url with a bunch of different screen widths (and organize the windows).
# My Chrome developer profile is in the `Profile 1` directory, make sure to update with yours.
# Best on an ultra wide monitor.
function rwdurl() {
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(0,0);window.resizeTo(320,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(330,0);window.resizeTo(480,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(815,0);window.resizeTo(640,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(1460,0);window.resizeTo(800,1395);window.location='$1';</script></body></html>"
open -n