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.

Snugug

// We're going to use Breakpoint to handle our media queries
// http://github.com/team-sass/breakpoint
@import "breakpoint";

@mixin element-query($sizes...) {
  @each $size in $sizes {
    @include breakpoint(nth($size, 2)) {
      #{nth($size, 1)} & {
        @content;
      }

MoOx

// ---
// Sass (v3.2.9)
// ---


// Styling elements based on sibling count
// http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
@mixin adjust-from-sibling-count($max: 10, $property: width) {
    $i: 0;
    @while ($i < $max) {

chriseppstein

mymodule {
  @at-root {
    .#{&}-header { ... }
    .#{&}-footer { ... }
    .#{&}-body   {
      a          { ... } 
      span       { ... } 
      p          { ... } 
    }
  }

ddemaree

@mixin retina($ratio: 1.5) {
  $dpi: $ratio * 96;
  $opera-ratio: $ratio * 100;

  @media only screen and (-webkit-min-device-pixel-ratio: #{$ratio}),
         only screen and (     -o-min-device-pixel-ratio: '#{$opera-ratio}/100'),
         only screen and (                min-resolution: #{$dpi}dpi),
         only screen and (                min-resolution: #{$ratio}dppx) {
    @content;
  }

shanselman

{
{I have|I've} been {surfing|browsing} online more than {three|3|2|4} hours today, yet I never found any interesting article like yours. {It's|It
is} pretty worth enough for me. {In my opinion|Personally|In my view}, if all {webmasters|site owners|website owners|web owners} and bloggers made good content as
you did, the {internet|net|web} will be {much more|a lot more}
useful than ever before.|
I {couldn't|could not} {resist|refrain from} commenting. {Very well|Perfectly|Well|Exceptionally well} written!|
{I will|I'll} {right away|immediately} {take hold of|grab|clutch|grasp|seize|snatch}
your {rss|rss feed} as I {can not|can't} {in finding|find|to find} your {email|e-mail} subscription {link|hyperlink} or {newsletter|e-newsletter} service. Do {you have|you've} any?
{Please|Kindly} {allow|permit|let} me {realize|recognize|understand|recognise|know} {so that|in order that} I {may just|may|could} subscribe.
Thanks.|

zachleat

Or, yet more evidence that you should use feature detection instead of browser/user agent sniffing.

IE9

Not supported in IE9 but works in IE10-as-IE9

• Unprefixed CSS transform. Should require -ms-transform but doesn’t require it.

IE8

dbushell

/*!
 *
 *  Copyright (c) David Bushell | @dbushell | http://dbushell.com/
 *
 */

var fs = require("fs"),
    path = require("path");

module.exports = function(grunt)

erin-dot-io

// The mixin

@mixin css-arrow($box-edge         : bottom,
                 $edge-side        : center,
                 $arrow-size       : 10px,
                 $edge-side-offset : 0,
                 $fill-color       : black, 
                 $border-color     : none,
                 $border-style     : border) {

erickarbe

var menu = $j('#menu'),
  	menulink = $j('.menu-link'),
		menuTrigger = $j('.has-submenu > a');

	menulink.click(function(e) {
		e.preventDefault();
		menulink.toggleClass('active');
		menu.toggleClass('active');
	});