Skip to content

Instantly share code, notes, and snippets.

View andrewabogado's full-sized avatar
🎯
Focusing

Andrew Abogado andrewabogado

🎯
Focusing
View GitHub Profile
@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...
@brianblakely
brianblakely / rem-calibrate.css
Created July 13, 2012 18:55
Simulate vw with rems
/* Android stock browser won't let you set font-size smaller than 8px unless you apply this. */
:root {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
@kylefox
kylefox / _media_queries.sass
Created March 1, 2012 18:37 — forked from jcroft/layout.sass
How easy responsive design can be with Sass
=respond-to($device)
@if $device == handheld
@media only screen and (min-width : 320px)
@content
@if $device == handheld-landscape
@media only screen and (min-width : 321px)
@content
@gwing33
gwing33 / .bash_profile
Created January 21, 2012 02:22
My git shortcuts in my ~/.bash_profile
# Git Shortcuts
alias gs='git status'
alias gst='git status -sb'
alias ga='git add'
alias gau='git add -u' # Removes deleted files
alias gp='git pull'
alias gpu='git push'
alias gc='git commit -v'
alias gca='git commit -v -a' # Does both add and commit in same command, add -m 'blah' for comment
alias gco='git checkout'
@mirisuzanne
mirisuzanne / keyframes-sass-output.css
Created January 13, 2012 17:37
A Keyframes Mixin (Sass only)
@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
100% { background-color: #ccffff; } }
@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
100% { background-color: #ccffff; } }
@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; }
50% { background-color: #ccffcc; }
@necolas
necolas / README.md
Last active March 28, 2024 20:34
Experimenting with component-based HTML/CSS naming and patterns

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name
@callumj
callumj / hci.rb
Created October 23, 2011 14:20
Download the Web Applications videos from Stanford's OpenClassroom. http://openclassroom.stanford.edu
require 'uri'
require 'net/http'
require 'fileutils'
BASE = "http://openclassroom.stanford.edu/MainFolder/courses/HCI/videos/"
for l in 1..42 do
for p in 1..20 do
uri = "CS147L" + l.to_s + "P" + p.to_s + ".flv"
@mathiasbynens
mathiasbynens / jquery.loadasync.js
Created September 6, 2011 09:44
Use jQuery to load scripts asynchronously
// Load scripts asynchronously
jQuery.loadAsync = function(url, callback) {
// Don't use $.getScript since it disables caching
jQuery.ajax({
'url': url,
'dataType': 'script',
'cache': true,
'success': callback || jQuery.noop
});
};
@nathansmith
nathansmith / last_child.js
Created May 1, 2011 19:26
Force IE7 & IE8 to respect :last-child
// Heavy-handed way to force IE7 & IE8 to respect :last-child.
// Note: Using jQuery. Adjust to suit your library, etc.
//
// Style via...
//
// element:last-child,
// element.last-child {
// /* Style here */
// }
//
@lxneng
lxneng / gist:741932
Created December 15, 2010 13:21
install PostgreSQL 9 in Mac OSX via Homebrew
install PostgreSQL 9 in Mac OSX via Homebrew
Mac OS X Snow Leopard
System Version: Mac OS X 10.6.5
Kernel Version: Darwin 10.5.0
Install notes for PostgreSQL 9.0.1 install using Homebrew:
sh-3.2# brew install postgresql