Skip to content

Instantly share code, notes, and snippets.

View OllyHodgson's full-sized avatar

Olly Hodgson OllyHodgson

5 followers · 0 following
View GitHub Profile
@Warry
Warry / Article.md
Created December 11, 2012 00:11
How to make faster scroll effects?

How to make faster scroll effects?

  • Avoid too many reflows (the browser to recalculate everything)
  • Use advanced CSS3 for graphic card rendering
  • Precalculate sizes and positions

Beware of reflows

The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows:

@technopagan
technopagan / style.css
Created December 5, 2012 12:49 — forked from iansoper/dabblet.css
Progressive Enahncement to use SVG sprites with PNG fallback for IE6+7
/**
* Progressive Enahncement to use SVG sprites with PNG fallback for IE6+7
*
* The trick:
* Legacy IE does not support rgba values.
* By defining a rgba background color together with the
* SVG background image for all modern browsers, legacy IE
* will ignore the SVG and use the
* first background definition containing the fallback PNG
*
@OllyHodgson
OllyHodgson / buttons.css
Created October 11, 2012 17:17
Remarkably similarly stlyed buttons across IE7/8/9, FF, Chrome, Safari and Opera
/******************************************************************
*
* COMPONENTS: BUTTONS AND BUTTON-STYLE LINKS
* e.g. <button>Click me!</button>
* or <a class="button">Click me!</a>
* or <input type="submit" value="Click me!" />
*
******************************************************************/
.outer a.button,
.outer a.button:link,
@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),
@nefarioustim
nefarioustim / wiki.md
Created September 19, 2012 15:34
Wikiman's Creed

This is my wiki. There are many like it, but this one is mine.

My wiki is my best friend. It is my life. I must master it as I must master my life.

My wiki, without me, is useless. Without my wiki, I am useless. I must wiki true. I must wiki better than my enemy who is trying to out wiki me. I must wiki him before he wikis me. I will...

My wiki and myself know that what counts in this war is not the docs we type, the users who read, or the communities we forge. We know that it is the wikis that count. We will hit...

My wiki is human, even as I, because it is my life. Thus, I will learn it as a brother. I will learn its weaknesses, its strength, its parts, its accessories, its widgets and its syntax. I will keep my wiki clean and ready, even as I am clean and ready. We will become part of each other. We will...

@kulor
kulor / dropshadow-ie7.css
Created August 3, 2012 13:32
ie image dropshadow support
/*
Dropshadow handling in IE vs. native box-shadow support
- Normal box-shadow on .dropshadow
/////////////////////
/ +===============+ /
/ | | /
/ | | /
/ | | /
@sequielo
sequielo / gist:3086192
Created July 10, 2012 20:58
createCookie with JS
//! from http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
@farmdawgnation
farmdawgnation / modernizr-vml.js
Created May 8, 2012 15:08
Modernizr Test for VML
// Add a Modernizr check for VML
Modernizr.addTest('vml', function() {
// Adapted from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
var supportsVml = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
return supportsVml;
@gasman
gasman / pnginator.rb
Created April 30, 2012 18:08
pnginator: pack Javascript into a self-extracting PNG
#!/usr/bin/env ruby -w
# pnginator.rb: pack a .js file into a PNG image with an HTML payload;
# when saved with an .html extension and opened in a browser, the HTML extracts and executes
# the javascript.
# Usage: ruby pnginator.rb input.js output.png.html
# By Gasman <http://matt.west.co.tt/>
# from an original idea by Daeken: http://daeken.com/superpacking-js-demos
@emilbjorklund
emilbjorklund / breakpoints_via_css.html
Created April 24, 2012 16:03
Width detection via sneaky CSS rules
<!DOCTYPE html>
<!--[if IE 8]> <html lang="sv-SE" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="sv-SE" class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Breakpoint detection test</title>
<style type="text/css" media="screen">
@media screen and (min-width: 320px) {
#page:after {
content: 'smallest'; /* represent the current width-bracket */