<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:
// 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); |
#!/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 |
<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"> |
<?php | |
$pattern = <<<EOT | |
/ | |
(?(DEFINE) | |
(?<T_NUM> [0-9] ) | |
) | |
^(?&T_NUM)$ | |
/x | |
EOT; |
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]; |
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...
div
s within the page (which have a class of delayed-image-load
) into a transparent GIF using a Base64 encoded string.
width
& height
HTML attributes of the image to the required sizediv
has custom data-attr
set server-side to the size of the imageimage-replace
onto each newly created transparent imagesetTimeout
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@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; |
// --- | |
// 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)) { |
// 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; | |
} |