Skip to content

Instantly share code, notes, and snippets.

View davidhund's full-sized avatar

David Hund davidhund

84 followers · 38 following
View GitHub Profile
@tvandervossen
tvandervossen / environment.js
Last active April 2, 2024 20:18
Here’s an example of my current web app user agent, device, and/or feature detection approach. I tend to inline this in the page header just before the stylesheet as part of the distribution build. A benefit of this approach is that detection is done early without any external dependencies. It’s also straightforward to modify or extend while you…
env = (function() {
var flags = {}, ua = navigator.userAgent, el = document.createElement('div'), video = document.createElement('video'), audio = document.createElement('audio'), root = document.documentElement, i
function flag(names) {
names = names.split(' ')
for (i = 0; i < names.length; i++)
flags[names[i]] = true
}
function classnames() {
var names = [], name
for(name in flags) if (flags.hasOwnProperty(name))
@dergachev
dergachev / GIF-Screencast-OSX.md
Last active August 9, 2025 03:16
OS X Screencast to animated GIF

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Screencapture GIF

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

@matijs
matijs / commands.sh
Last active December 10, 2015 18:29
Useful command line stuff
# use `basename [suffix]` to do clever multiple renaming
for file in *.html.pdf; do \
mv "$file" "`basename $file .html.pdf`.pdf";
done
# remove "from" metadata from files on OS X
xattr -d "com.apple.metadata:kMDItemWhereFroms" file
# remove "quarantine" metadata from files on OS X
xattr -d "com.apple.quarantine" file
@JeanSebTr
JeanSebTr / gists.js
Last active February 5, 2018 17:15
Async load of Github's gists without jquery in 31 lines of code
document.getElementsByClassName && (function(){
var _URL = /(https?:\/\/gist.github.com\/[^?#]+)(\?file=([a-z0-9_.-]+))?/i;
var gists = document.getElementsByClassName('gist');
function embed(url, i, tag) {
window['embed_gist_'+i] = function(gist) {
var tmp = document.createElement('div');
tmp.innerHTML = gist.div;
tag.parentNode.replaceChild(tmp.firstChild, tag);
var css = document.getElementsByClassName('gist_css');
for(var i=0; i<css.length; i++) {
@chriseppstein
chriseppstein / responsive_table.scss
Created October 25, 2012 20:46
@include handhelds {
table.responsive {
width: 100%;
thead {
display: none;
}
tr {
display: block;
}
td, th {
@brandonb927
brandonb927 / image-2x.less
Last active December 1, 2019 15:38
@2x LESS CSS Mixin
/**
* I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
*
* Update: 2014-08-04 - Updated a long-standing bug where retina images were shown no matter what in the first background-image property.
* - Updated retina media query to be more reliable ()
* Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html
* Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy
* Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
* Update: 2012-12-29 - U
@chriscoyier
chriscoyier / mq.css
Created October 3, 2012 18:24
@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),
@marcedwards
marcedwards / high-dpi-media.css
Last active March 2, 2025 20:24
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 */
@adactio
adactio / placeholderFromDatalist.js
Created August 12, 2012 15:54
Generate a placeholder attribute from the datalist associated with that input.
(function(win,doc) {
if (doc.querySelectorAll) {
var inputs = doc.querySelectorAll('input[list]'),
total = inputs.length;
for (var i=0; i<total; i++) {
var input = inputs[i],
id = input.getAttribute('list'),
list = doc.getElementById(id),
options = list.getElementsByTagName('option'),
amount = options.length,
@simX
simX / hidpi.txt
Created July 28, 2012 04:58
Enable HiDPI mode in Mountain Lion w/o Quartz Debug
sudo defaults write /Library/Preferences/com.apple.windowserver DisplayResolutionEnabled -bool YES;
sudo defaults delete /Library/Preferences/com.apple.windowserver DisplayResolutionDisabled;
// by the way, you need to logout and log back in for this to take effect. Or at least that's what
// Quartz Debug says. Who knows, maybe it's lying?
// P.S. Go to [Apple menu --> System Preferences --> Displays --> Display --> Scaled] after logging
// back in, and you'll see a bunch of "HiDPI" resolutions in the list to choose from.