chriscoyier

@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),

OllyHodgson

/******************************************************************
 *
 *  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,

technopagan

/**
 * 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 
 *

Warry

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:

bgrins

Javascript log Function

Every time I start a new project, I want to pull in a log function that allows the same functionality as the console.log, including the full functionality of the Console API.

There are a lot of ways to do this, but many are lacking. A common problem with wrapper functions is that the line number that shows up next to the log is the line number of the log function itself, not where log was invoked. There are also times where the arguments get logged in a way that isn't quite the same as the native function.

This is an attempt to once and for all document the function that I pull in to new projects. There are two different options:

• The full version: Inspired by the plugin in HTML5 Boilerplate. Use this if you are writing an application and want to create a window.log function. Additionally,

phamann

Lesson's learnt building the Guardian

Below is a collection of my favourite responses I gathered from Guardian engineers when asked the question: What have you learnt starting from scratch and building a mobile-first next generation web platform for the Guardian?

Daithi O Crualaoich

• Work with great people.
• Deploy like crazy. This means the team has to control the infrastructure as well as code.
• Design is not a service. Designers have to sit in the team.
• Infrastructure is intrinsically unreliable. Discard and replace is the robust strategy.
• Use your CDN for HTML too.
• Don't always do as you are told.

ijy

<!--
    CHECK IF A STRING IS NULL OR EMPTY
--> 

<!-- Example XML -->
<group> 
    <item> 
        <id>item 1</id> 
        <CategoryName>blue</CategoryName> 
    </item> 

kozo002

jQuery.fn.brightness = function() {
  var bg_color, rgba, y;
  bg_color = this.css('background-color');
  if ((bg_color != null) && bg_color.length) {
    rgba = bg_color.match(/^rgb(?:a)?\(([0-9]{1,3}),\s([0-9]{1,3}),\s([0-9]{1,3})(?:,\s)?([0-9]{1,3})?\)$/);
    if (rgba != null) {
      if (rgba[4] === '0') {
        if (this.parent().length) return this.parent().brightness();
      } else {
        y = 2.99 * rgba[1] + 5.87 * rgba[2] + 1.14 * rgba[3];

yukulele

$.fn.wordify = function(){
	this.find(":not(iframe,textarea)").addBack().contents().filter(function() {
		return this.nodeType === 3;
	}).each(function() {
		var textnode = $(this);
		var text = textnode.text();
		text = text.replace(/([^\s-.,;:!?()[\]{}<>"]+)/g,'<span>$1</span>');
		textnode.replaceWith(text);
	});
	return this;

mattjohnsonpint

"SharePoint ID","SharePoint Description","Windows Display Name","Windows ID","IANA Time Zone"
"2","(UTC) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London","(UTC) Dublin, Edinburgh, Lisbon, London","GMT Standard Time","Europe/London"
"3","(UTC+01:00) Brussels, Copenhagen, Madrid, Paris","(UTC+01:00) Brussels, Copenhagen, Madrid, Paris","Romance Standard Time","Europe/Paris"
"4","(UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna","(UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna","W. Europe Standard Time","Europe/Berlin"
"5","(UTC+02:00) Athens, Bucharest, Istanbul","(UTC+02:00) Athens, Bucharest","GTB Standard Time","Europe/Bucharest"
"6","(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague","(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague","Central Europe Standard Time","Europe/Budapest"
"7","(UTC+02:00) Minsk","(UTC+03:00) Kaliningrad, Minsk","Kaliningrad Standard Time","Europe/Kaliningrad"
"8","(UTC-03:00) Brasilia","(UTC-03:00) Brasilia","E. South Ameri