graste

// Usage: http://localhost:8080/image.jpg/100x50
var http = require('http');
var spawn = require('child_process').spawn;

http.createServer(function(req, res) {
  var params = req.url.split('/');
  var convert = spawn('convert',  [params[1], '-resize', params[2], '-']);

  res.writeHead(200, {'Content-Type': 'image/jpeg'});
  convert.stdout.pipe(res);

graste

#!/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

graste

Title

<Additional information about your API call. Try to use verbs that match both request type (fetching vs modifying) and plurality (one vs multiple).>

• URL

  <The URL Structure (path only, no root url)>

• Method:

graste

<form role="search" class="search-form" id="search-form" action="#" method="post">
  
  <section class="search-terms">
    <label for="search-term" class="search-term-label screen-reader-text">Search Terms</label>
    <div>
      <span class="search-term-wrap">
        <input type="search" id="search-term" class="search-term">
      </span>
      <span class="search-term-button-wrap">
        <input type="submit" value="Search" class="search-button">

graste

<?php

$pattern = <<<EOT
/
    (?(DEFINE)
        (?<T_NUM> [0-9] )
    )
    ^(?&T_NUM)$
/x
EOT;

graste

var tabbableElements = 'a[href], area[href], input:not([disabled]),' +
	'select:not([disabled]), textarea:not([disabled]),' +
	'button:not([disabled]), iframe, object, embed, *[tabindex],' +
	'*[contenteditable]';

var keepFocus = function (context) {
	var allTabbableElements = context.querySelectorAll(tabbableElements);
	var firstTabbableElement = allTabbableElements[0];
	var lastTabbableElement = allTabbableElements[allTabbableElements.length - 1];

graste

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

• Create new instance of ImageEnhancer
• Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
  • We set the width & height HTML attributes of the image to the required size
  • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
  • We then set a class of image-replace onto each newly created transparent image
• We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe

graste

@mixin respond-to($primary, $secondary:min-width) {
  @if $secondary == max-width {
    @media screen and (max-width: $primary - .001) { @content; }
  }
  @else if $secondary == min-width {
    @media screen and (min-width: $primary) { @content; }
    @if $primary == $large {
      .ie8 &{
        @content;

graste

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


@mixin respond-to($queries...) {
    $length: length($queries);
    @for $i from 1 through $length{
        @if $i % 2 == 1 {
            @media screen and (min-width: nth($queries, $i)) { 

graste

// 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;
      }