Skip to content

Instantly share code, notes, and snippets.

View stuntbox's full-sized avatar

David Sleight stuntbox

View GitHub Profile
@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 */
@jlong
jlong / uri.js
Created April 20, 2012 13:29
URI Parsing with Javascript
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.search; // => "?search=test"
parser.hash; // => "#hash"
parser.host; // => "example.com:3000"
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
@gruber
gruber / make_bookmarklet.pl
Last active September 13, 2023 23:22
JavaScript Bookmarklet Builder
#!/usr/bin/env perl
#
# http://daringfireball.net/2007/03/javascript_bookmarklet_builder
use strict;
use warnings;
use URI::Escape qw(uri_escape_utf8);
use open IO => ":utf8", # UTF8 by default
":std"; # Apply to STDIN/STDOUT/STDERR
@joubertnel
joubertnel / gist:870190
Last active July 8, 2023 12:52
HTML5 Canvas - Rendering of Text on high-DPI screens
<html>
<head>
<script src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
</head>
<body>
<h2>Naive canvas</h2>
<canvas id="naive" width="400" height="50"></canvas>
<h2>High-def Canvas</h2>
@davatron5000
davatron5000 / Sublime Text Setup.md
Last active April 15, 2023 15:39
A new user's guide to SublimeText 2. Estimated reading time: 2 mins. Estimated workthrough time: 12 minutes.

Make it useful

  • Install Package Control. For SublimeText 2, paste the following in Terminal:
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

From here on out, use Package Control to install everything. +Shift+P, then type Install to get a list of installable packages you can 'livesearch through. After installing plugins, they should be running.

@winzig
winzig / Liberal Regex Pattern for URLs
Last active May 4, 2022 05:44 — forked from gruber/Liberal Regex Pattern for Web URLs
Updated @gruber's regex with a modified version that looks for 2-13 letters rather than trying to look for specific TLDs, and many other improvements. (UPDATE 2018-07-30: Support for IPv4 addresses, bare hostnames, naked domains, xn-- internationalized domains, and more... see comments for BREAKING CHANGE.)
# Single-line version:
(?i)\b(https?:\/{1,3})?((?:(?:[\w.\-]+\.(?:[a-z]{2,13})|(?<=http:\/\/|https:\/\/)[\w.\-]+)\/)(?:[^\s()<>{}\[\]]+|\([^\s()]*?\([^\s()]+\)[^\s()]*?\)|\([^\s]+?\))+(?:\([^\s()]*?\([^\s()]+\)[^\s()]*?\)|\([^\s]+?\)|[^\s`!()\[\]{};:'\".,<>?«»“”‘’])|(?:(?<!@)(?:\w+(?:[.\-]+\w+)*\.(?:[a-z]{2,13})|(?:(?:[0-9](?!\d)|[1-9][0-9](?!\d)|1[0-9]{2}(?!\d)|2[0-4][0-9](?!\d)|25[0-5](?!\d))[.]?){4})\b\/?(?!@)(?:[^\s()<>{}\[\]]+|\([^\s()]*?\([^\s()]+\)[^\s()]*?\)|\([^\s]+?\))*(?:\([^\s()]*?\([^\s()]+\)[^\s()]*?\)|\([^\s]+?\)|[^\s`!()\[\]{};:'\".,<>?«»“”‘’])?))
# Commented multi-line version:
(?xi)
\b
(https?:\/{1,3})? # Capture $1: (optional) URL scheme, colon, and slashes
( # Capture $2: Entire matched URL (other than optional protocol://)
@bpainter
bpainter / arrows.scss
Created July 15, 2011 19:08
Sass mixin for arrows based on The Shapes of CSS from Chris Coyier http://css-tricks.com/examples/ShapesOfCSS/
// --------------------------------------------------------
// arrows
// --------------------------------------------------------
// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// @example
// .element{
// @include arrow(top, #000, 50px);
// }
@robweychert
robweychert / frame-based-animation.md
Last active September 8, 2021 15:19
A simple Sass function for frame-based CSS animation

A simple Sass function for frame-based CSS animation

If you have experience with animation in other media, CSS animation’s percentage-based keyframe syntax can feel pretty alien, especially if you want to be very precise about timing. This Sass function lets you forget about percentages and express keyframes in terms of actual frames:

@function f($frame) {
  @return percentage( $frame / $totalframes )
}
@ttscoff
ttscoff / rtftomarkdown.rb
Created October 9, 2012 21:05
Convert RTF/DOC files to Markdown via Textutil
#!/usr/bin/ruby
=begin
Usage: rtftomarkdown.rb FILENAME.rtf
Uses textutil, available on Mac only (installed by default)
Outputs to STDOUT
Notes:
Links are replaced with Markdown references (duplicate links combined).