bingo webin

#Extract Image URLs and WGet Them to a New Server#

This was a fun problem. I needed to move all the images referenced in a CSS file to another server. I didn't want to just grab all the image files as there were a bunch I didn't need. Here is how I went about it. I am sure you could do it in one step but doing it this way gives you a chance to check for errors.

First you may want to use wget http://otherserver/the_css.css to pull the CSS file on to the target server if it is still on the old server as it was in my case.

User grep to extract the URLs from the css file into another file. (You may need to adjust the regular expression if you have funny characters in your file names) Note the use of the -o flag that tells grep to only print out that part of the line that matches the expression rather than the entire line.
```
 grep -o '\/path\/to\/files\/[a-zA-Z0-9/.:_-]*' the_css.css > images.txt
```

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

	/* Pounding heart animation */

	@keyframes pound {
	to { transform: scale(1.4); }
	}

	.heart {
	display: inline-block;
	font-size: 150px;
	color: #e00;

	/*
	* Javascript EXIF Reader 0.1.4
	* Copyright (c) 2008 Jacob Seidelin, [email protected], http://blog.nihilogic.dk/
	* Licensed under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt]
	*/


	var EXIF = {};

	(function() {

	@mixin for-phone-only {
	@media (max-width: 599px) { @content; }
	}
	@mixin for-tablet-portrait-up {
	@media (min-width: 600px) { @content; }
	}
	@mixin for-tablet-landscape-up {
	@media (min-width: 900px) { @content; }
	}
	@mixin for-desktop-up {

	@mixin for-size($size) {
	@if $size == phone-only {
	@media (max-width: 599px) { @content; }
	} @else if $size == tablet-portrait-up {
	@media (min-width: 600px) { @content; }
	} @else if $size == tablet-landscape-up {
	@media (min-width: 900px) { @content; }
	} @else if $size == desktop-up {
	@media (min-width: 1200px) { @content; }
	} @else if $size == big-desktop-up {

	@mixin for-size($range) {
	$phone-upper-boundary: 600px;
	$tablet-portrait-upper-boundary: 900px;
	$tablet-landscape-upper-boundary: 1200px;
	$desktop-upper-boundary: 1800px;

	@if $range == phone-only {
	@media (max-width: #{$phone-upper-boundary - 1}) { @content; }
	} @else if $range == tablet-portrait-up {
	@media (min-width: $phone-upper-boundary) { @content; }

	// Use Gists to store code you would like to remember later on
	console.log(window); // log the "window" object to the console

	/**
	* Compares two software version numbers (e.g. "1.7.1" or "1.2b").
	*
	* This function was born in http://stackoverflow.com/a/6832721.
	*
	* @param {string} v1 The first version to be compared.
	* @param {string} v2 The second version to be compared.
	* @param {object} [options] Optional flags that affect comparison behavior:
	* <ul>
	* <li>

	<html>
	<head>
	<style>
	.viewport {
	position: relative;
	width: 300px;
	height: 300px;
	}

	.viewport:hover img {