Goksel Eryigit - Front-end Developer

Creating “Next Level” Search Form Using jQuery & CSS3 [Webstuffshare]

admin — Tue, 14 Feb 2012 10:55:53 +0000

Lately we found ton of new style search form crafted beautifully using CSS3 and JavaScript. Apple’s for example, widen the input field when it receive focus from user. The question is “how far we can go for styling search form?”, in this tutorial we are going to move search form to the next level using jQuery & CSS3.

Show Implementation

Download Source

Simple Style

First to go we will create a simple animated search form that show only search button with search image on it. When the button receives a click, the input field will widen while the search image will move to left filling the left blank space before input text.

Based on the picture above, the HTML element will consists of 4 elements, a div for elements wrapper, an input text, an input button for search button and an image search. All of them will be stacked each other where the div wrapper is at the very bottom of the stack and image search at the very top. Here’s the HTML and CSS :

.wrapper-simple {
	text-align: center;
	margin: 0 auto;
	display: block;
	width: 60px;
	height: 45px;
	padding: 10px 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
	border-radius: 5px;
	box-shadow: inset rgba(255, 254, 255, 1) 0 0.1em 2px,
					#9bb6c9 0 1px 2px;
	position: relative;
}

.wrapper-simple input[type=submit] {
	margin-top: .2em;
	z-index: 2;
	position: relative;
	vertical-align: top;
	height: 43px;
	min-width: 55px;
	border-radius: 3px;
	border: 1px solid #aa7818;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffb700), to(#ff8c00));
	box-shadow: inset rgba(255, 255, 255, .5) 0 0.1em 0.1em;
	cursor: pointer;
}

	.wrapper-simple input[type=submit]:active {
		box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	}

	.wrapper-simple input[type=submit]:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
	}

.wrapper-simple input[type=text] {
	font-family: Arial;
	font-weight: bold;
	color: #1a3d51;
	background: #d8e6ef;
	border-radius:2px;
	padding: 10px 10px 15px 10px;
	width: 250px;
	border: 0;
	font-size: 16px;
	text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
	box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	position: absolute;
	width: 1px;
	z-index: 2;
	padding-left: 2em;
	margin-left: .2em;
}

.wrapper-simple img {
	position: absolute;
	top: 1.5em;
	left: 1.5em;
	z-index: 4;
}

Now we will read the click event on search button and animate the form using jQuery.

$('.wrapper-simple input[type=submit]').toggle(function(){

	$('.wrapper-simple').animate({'width':'300px'})
	  .end().find('.wrapper-simple input[type=text]').animate({'width': '250px'})
	  .end().find('.wrapper-simple img').animate({'marginLeft': '-5px'})
	  .end().find(this).animate({'marginLeft':'22em'}).attr('value', 'CANCEL');

}, function() {

	$('.wrapper-simple').animate({'width':'60px'})
	  .end().find('.wrapper-simple input[type=text]').animate({'width': '1px'})
	  .end().find('.wrapper-simple img').animate({'marginLeft': '0'})
	  .end().find(this).animate({'marginLeft':'0'}).attr('value', '');

});

The script toggling user’s click. First click will widen the div wrapper and input text, move the search button to the edge of input text and move image search to fill the left blank space before input text. Second click will revert to normal.

Cube Style

After making simple animated search form, actually we aren’t moving too far. So we will make another experiment, how about show the search form rotating like a cube? Well, CSS3 properties like transform, perspective and animation seems very helpful. The thing that we must give more attention that the following code and demo currently work only on Safari 5+.

Making a cube is a bit tricky, for vertical rotate and one direction (up to down) we can create a cube by making 2 div, first div as a front side of the cube and the second div as a top side. The top side div must be rotated so it will be like coming from the top when the cube rotating.

The structure of elements will be :

wrapper1 acting as wrapper for all elements inside, content-wrapper1 also as a wrapper that will be rotated, search button-1 as top side and search-box1 as front side. The styling :

.wrapper1 {
	display: block;
	width: 300px;
	margin: 0 auto;
	-webkit-perspective : 1200px;
}

	.search-button1 span {
		display: block;
		margin: 0 auto;
		background: #643904;
		border-radius: 30px;
		width: 30px;
		height: 30px;
		box-shadow: rgba(255,255,255,.3) 0 1px 0px;
	}

		.search-button1 span img {
			vertical-align: middle;
			padding-top: 7px;
		}

	.search-button1:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
	}

	.search-button1:active {
		margin-top: 0.2em;
		box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em,
						#8e620e 0 0.3em 0,
						rgba(0, 0, 0, 0.2) 0 0.5em 3px;
	}

.search-box1 {
	margin-top: -.6em;
	display: none;
	position: absolute;
	width: 300px;
	height: 50px;
	padding: 10px 6px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
	border: 1px solid #9bb6c9;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-radius: 5px;
	box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em,
					#899faf 0 .5em 0px,
					rgba(0, 0, 0, 0.2) 0 .9em 3px;

	-webkit-transform:	rotate3d(1,0,0,90deg)
								translateZ(20px);
}

	.search-box1 input {
		font-family: Arial;
		font-weight: bold;
		color: #1a3d51;
		background: #d8e6ef;
		border-radius:2px;
		padding: 10px 10px 15px 10px;
		width: 250px;
		border: 0;
		font-size: 16px;
		text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
		box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
	}

		.search-box1 input:focus {
			outline: none;
		}

	.search-box1 img {
		opacity: .5;
		position: absolute;
		margin: .6em 0 0 -2em;
		cursor: pointer;
		-webkit-transition: 0.5s linear;
	}

		.search-box1 img:hover {
			opacity: 1;
		}

.hide-search-button {
	display: none;
}

.show-search-button {
	display: block;
}

.show-search-box {
	display: block;
}

.showed-search-box {
	display: block;
	-webkit-transform: rotate3d(1,0,0,0deg);
}

.hidden-search-box {
	-webkit-transform:	rotate3d(1,0,0,90deg)
								translateZ(25px);
}

.switch-show {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: hideBox 0.5s ease-in-out;
}

.switch-show {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: showBox 0.5s ease-in-out;
}

.switch-hide {
	height: 50px;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: hideBox 0.5s ease-in-out;
}

@-webkit-keyframes showBox{
	0% { -webkit-transform: rotate3d(1,0,0,0); }
	100% { -webkit-transform: rotate3d(1,0,0,-90deg); }
}

@-webkit-keyframes hideBox{
	0% { -webkit-transform: rotate3d(1,0,0,-90deg); }
	100% { -webkit-transform: rotate3d(1,0,0,0); }
}

We’re a half set up, now we will read the click event from the user and rotate the cube.

$('.search-button1').click(function() {

	$('.content-wrapper1').addClass('switch-show');
	$('.search-box1').addClass('show-search-box');

	setTimeout(function(){

		$('.content-wrapper1').removeClass('switch-show');
		$('.search-button1').removeClass('show-search-button').addClass('hide-search-button');
		$('.search-box1').addClass('showed-search-box');

	},480);
});

$('.search-box1 img').click(function() {

	$('.search-button1').removeClass('hide-search-button');
	$('.search-box1').addClass('hidden-search-box');
	$('.content-wrapper1').addClass('switch-hide');

	setTimeout(function(){

		$('.content-wrapper1').removeClass('switch-hide');
		$('.search-button1').removeClass('show-search-button');
		$('.search-box1').removeClass('show-search-box showed-search-box hidden-search-box');

	},480);

});

The script above act as an animation delegator, all animation handled by CSS. Since the CSS animation we describe before only works once and revert to the normal state, we force the current showed side to visible and other side to hidden until the animation works before revert back, this is do the trick.

Cube Style With Animate

At some point we might animate the front side before rotate the cube. Then we reduce the front side’s width and widen it before rotate.

$('.search-button2').click(function() {

	$('.arrow').hide();

	$(this).stop().animate({'width':'300px'}, 500, function() {

		$('.content-wrapper2').addClass('switch-show');
		$('.search-box2').addClass('show-search-box');

		setTimeout(function(){

			$('.content-wrapper2').removeClass('switch-show');
			$('.search-button2').removeClass('show-search-button').addClass('hide-search-button');
			$('.search-box2').addClass('showed-search-box');

		},480);

	});
});

$('.search-box2 img').click(function() {

	$('.search-button2').removeClass('hide-search-button');
	$('.search-box2').addClass('hidden-search-box');
	$('.content-wrapper2').addClass('switch-hide');

	$('.search-button2').addClass('show-search-button').stop().delay(500).animate({'width':'50px'}, 500, function() {

		$('.content-wrapper2').removeClass('switch-hide');
		$('.search-button2').removeClass('show-search-button');
		$('.search-box2').removeClass('show-search-box showed-search-box hidden-search-box');

		$('.arrow').show();

	});
});

We use jQuery’s animate() function to widen the front side’s width and reduce it back when user close the form.

Conclusion

CSS3 and jQuery combination help us improve current web user interface into unlimited state, depend on our imagination. Did I missed something? I’d love to hear.

Build Awesome Apps with CSS3 Animations [sitepoint.com]

admin — Mon, 13 Feb 2012 11:14:20 +0000

Today’s HTML5 applications can provide awesome experiences thanks to the new CSS3 specifications. One of them is CSS3 Animations. It can help you building rich animations on HTML elements. This can provide interesting feedbacks to the users and enables fast & fluid UIs. As those new animations are most of the time hardware accelerated by the GPU, they definitely raise the quality bar of the new generation of HTML5 applications.

According to the “CSS Animation Module Level 3” specification on the W3C site, CSS3 Animations introduces defined animations, which specify the values that CSS properties will take over a given time interval. This specification is an extension to CSS Transitions.

As CSS3 Animation is an extension to CSS3 Transitions, you should first read the article of my colleague David Catuhe on Transitions here: Introduction to CSS3 Transitions.

We’ll see in this article an interesting demo highlighting the potential of CSS3 animations, how to build simple animations & how to handle fallback in JavaScript:

CSS3 Animationsa>

Let’s first start by quickly demonstrating what CSS3 Animations are. Here is a sample animation of a Star Wars AT-AT which uses CSS3 Animations to animate parts of the transport (and which will fall back to JavaScript if your browser doesn’t support CSS3 Animations):

You can test this sample also in a separate window here: http://david.blob.core.windows.net/html5/css3atat/index.htm

Note: this sample has been tested successfully with native animations under IE10 PP3/PP4, Chrome 15, Firefox 8 & iPad 2 and with JS fallback under IE9 desktop & mobile (Windows Phone). For an unknown reason, it behaves in weird way under Opera 11.50 but works fine with the 11.60. Moreover, our lovely blogging platform is most of the time forcing the IE9 rendering engine via a meta tag. To force it back to the IE10 standards mode, press the F12 key and change the value of “Document Mode” back to IE10. Otherwise, view the demo in a separate window.

This sample is based on the awesome work done by Anthony Calzadilla. You can check other incredible demos on his website here: http://www.anthonycalzadilla.com . I’m a huge fan of the I twitty the fool sample using SVG & CSS3 Animation for instance.

CSS3 Animations

Introduction

Let’s first review on what you can play to build the animations. CSS3 Animations works basically on the same values as CSS3 Transition.

Here they are:

color: interpolated via red, green, blue and alpha components (treating each as a number, see below)
length: interpolated as real numbers.
percentage: interpolated as real numbers.
integer: interpolated via discrete steps (whole numbers). The interpolation happens in real number space and is converted to an integer using floor().
number: interpolated as real (floating point) numbers.
transform list: see CSS Transforms specification: http://www.w3.org/TR/css3-2d-transforms/
rectangle: interpolated via the x, y, width and height components (treating each as a number).
visibility: interpolated via a discrete step. The interpolation happens in real number space between 0 and 1, where 1 is “visible” and all other values are “hidden”.
shadow: interpolated via the color, x, y and blur components (treating them as color and numbers where appropriate). In the case where there are lists of shadows, the shorter list is padded at the end with shadows whose color is transparent and all lengths (x, y, blur) are 0.
gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated.
paint server (SVG): interpolation is only supported between: gradient to gradient and color to color. They then work as above.
space-separated list of above: If the lists have the same number of items, each item in the list is interpolated using the rules above. Otherwise, no interpolation.
a shorthand property: If all the parts of a shorthand can be animated, then interpolation is performed as if each property was individually specified.

And the following properties must be supported for animations:

background-color (color)
background-image (only gradients)
background-position (percentage and length)
border-bottom-color (color)
border-bottom-width (length)
border-color (color)
border-left-color (color)
border-left-width (length)
border-right-color (color)
border-right-width (length)
border-spacing (length)
border-top-color (color)
border-top-width (length)
border-width (length)
bottom (length and percentage)
color (color)
crop (rectangle)
font-size (length and percentage)
font-weight (number)
grid-* (various)
height (length and percentage)
left (length and percentage)
letter-spacing (length)
line-height (number, length and percentage)
margin-bottom (length)
margin-left (length)
margin-right (length)
margin-top (length)
max-height (length and percentage)
max-width (length and percentage)
min-height (length and percentage)
min-width (length and percentage)
opacity (number)
outline-color (color)
outline-offset (integer)
outline-width (length)
padding-bottom (length)
padding-left (length)
padding-right (length)
padding-top (length)
right (length and percentage)
text-indent (length and percentage)
text-shadow (shadow)
top (length and percentage)
vertical-align (keywords, length and percentage)
visibility (visibility)
width (length and percentage)
word-spacing (length and percentage)
z-index (integer)
zoom (number)

SVG

The properties of SVG objects are animatable when they are defined as animatable:true in the SVG specification: http://www.w3.org/TR/SVG/struct.html. But at the time where this article is written, I didn’t manage to combine CSS3 Animation directly on SVG elements in any of the latest browsers versions. Today’s samples on the web are then doing a little trick: they are embedding SVG resources into different DIV animated by CSS3 like the I twitty the fool sample.

Declarations

To declare an animation in a CSS file, here is the kind of generic code you’ll need to write:

@keyframes name_of_the_animation {
  from {
    property_to_animate: initial_value;
  }
  50% {
    property_to_animate: intermediate_value;
  }
  to {
    property_to_animate: final_value;
  }
}

Which could also be written like that:

@keyframes name_of_the_animation {
  0% {
    property_to_animate: initial_value;
  }
  50% {
    property_to_animate: intermediate_value;
  }
  100% {
    property_to_animate: final_value;
  }
}

This animation definition declares 3 steps 0, 50 & 100%. You should at least set a from (or 0%) and a to (or 100%) steps to build a correct animation (minimum 2 steps thus). Once done, you may add as many keyframes as you’d like between 0 and 100% to handle precisely the various steps of your animations.

Once the definition is declared, you can affect it to an element using the classical CSS3 selectors and you’ll need also to configure the animation options. Here the kind of generic blocks you’ll see:

#id_of_the_html_element {
    animation-name: name_of_the_animation;
    animation-duration: number_of_seconds s;
    animation-iteration-count: number | infinite;
}

To better understand, let’s review a real sample. First of all, as the CSS3 Animations specification is still in a draft stage, you’ll need to use the appropriate vendor prefix. Let’s use IE10 as a sample with the –ms prefix then. Let’s now see how the head of our AT-AT is moving.

Here’s the animation declaration:

@-ms-keyframes rotate-skull {
    0% {
        -ms-transform: rotate(0deg)
    }
    25% {
        -ms-transform: rotate(15deg)
    }
    50% {
        -ms-transform: rotate(-5deg)
    }
    55% {
        -ms-transform: rotate(0deg)
    }
    75% {
        -ms-transform: rotate(-10deg)
    }
    100% {
        -ms-transform: rotate(0deg)
    }
}

We’ve got 6 steps (0, 25, 50, 55, 75 & 100%) working on the CSS3 2D transform attributes by changing the value of the rotation.

The animation is then applied via this CSS rule:

#skull
{
    -ms-animation-name: rotate-skull;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: infinite;
}

We’re targeting the

element having the “



			id=skull

” and we’re applying the animation named “rotate-skull” on it. The animation will have to be completed in 7s and be played an infinite number of times.

Here is the living result if your browser supports CSS3 Animations:

We could have written this rule in a shorter manner using the animation shorthand property:

#skull {
    -ms-animation: rotate-skull 7s infinite;
}

The animations will be triggered as soon as a matching rule is applied. You can then play or stop animations simply via JavaScript or via CSS3 to play with the classes affected to a tag.

Non-linear animations

The “animation-timing-function” property can be used if you want non-linear animations. You can even mix the type of timing functions during each keyframe.

Basically, CSS3 animations will use cubic bezier curve to smooth the animation by computing different speed over its duration.

The following functions are supported:

linear: Constant speed
cubic-bezier: Speed will be computed according to a cubic bezier curve define by two control points : P0 and P1 (so you will have to define 4 values here : P0x, P0y and P1x, P1y.
ease: Speed will be computed with cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in: Speed will be computed with cubic-bezier(0.42, 0, 1, 1)
ease-inout: Speed will be computed with cubic-bezier(0.42, 0, 0.58, 1)
ease-out: Speed will be computed with cubic-bezier(0, 0, 0.58, 1)

Here is a simulation tool written by David Catuhe that uses pure JavaScript to show the impact of each timing function:

Note: this tool uses in-line SVG supported by Firefox, Chrome, Opera 11.60 & IE9/10. It won’t work properly under Opera 11.50 & Safari on iPad thus.

This is an awesome tool using SVG. You can even play with your mouse on the custom function to edit the curve. If you’d like to know more about this tool, please again have a look to David’s article.

If your browser supports CSS3 animations, let’s now see a simple demo using easing functions to animate a canvas tag containing an animated sprite with CSS3.

Here is the CSS3 animations code that will be used in this demo:

@-ms-keyframes demo {
    from {
    -ms-animation-timing-function: ease;
    -ms-transform: translateX(0px);
    }
    50% {
    -ms-animation-timing-function: ease-in;
    -ms-transform: translateX(300px);
    }
    to {
    -ms-animation-timing-function: ease-inout;
    -ms-transform: translateX(900px);
    }
}
 
#testCanvas
{
    -ms-animation-delay: 0s;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-name: demo;
}

As well as all the vendor prefixes variations to make sure it works also in Google Chrome & Mozilla Firefox. And here’s the living output:

If your browser doesn’t support CSS3 Animation but support canvas, the sprite’s running animation should be displayed but the character won’t move through the width of the screen.

Note: if you’d like to know more about canvas and sprites animation, you can have a look to this article: HTML5 Gaming: animating sprites in Canvas with EaselJS

Delay

The “animation-delay” property simply allows an animation to begin execution some time after it is applied.

Events

3 events could be raised during an animation. They are named “AnimationStart”, “AnimationEnd” and “AnimationIteration”. Depending on your browser, the correct name will be for instance:

Chrome: webkitAnimationEnd
Firefox: mozAnimationEnd
Internet Explorer: MSAnimationEnd

The event will give you the following details:

animationName: name of the animation which raised the event
elapsedTime: the amount of time the animation has been running, in seconds

Here is an usage sample for IE10:

elementToAnimate.addEventListener("MSAnimationEnd", function () {
    alert("the end !");
}, false);

More about CSS3 animations

CSS3 animations are really useful for 2 main reasons:

Hardware acceleration: CSS3 Animations are most of the time directly handled by the GPU and could produce smoother results. This could then be a very interesting approach for mobile devices.
Better separation between code and design: I know there is some debates on this point but with David, we think that a developer shouldn’t be aware of animations or anything related to design as much as possible. In the same way the designer/artist must not be aware of JavaScript. CSS3 offers then this possibility and could let the designers work with their classical tools to generate the appropriate animations on elements, between screens, etc.

To highlight this importance in performance, the following HTML5 game I wrote using a full frame

Browsers Support

Since the Platform Preview 3 of IE10 available in the Windows Developer Preview, we’re supporting CSS3 Animations. And as you can see on the following report produced by caniuse.com, the CSS3 animations are now supported on a wide range of browsers:

But as the specification is not finished yet (working draft), you must use vendor’s prefixes such as –ms-, –moz-, –webkit-, –o- to make a cross-browsers compatible application.

But the question could be: how to handle browsers that don’t support this new feature?

First option is to just do nothing. Thanks to the beauty of graceful degradation, you could just let the user only see a static image if you’ve worked correctly. This is for instance the case of these 2 original samples of Anthony: I Twitty the Fool! and Pure CSS3 AT-AT Walker . When watched in IE9, it looks like we only have a static image. When watched in IE10, the very same code shows nice animations. IE10 users will then have an enhanced version while IE9 will still be able to view and use properly the website. The more modern your browser is, the more visual bonus you will have.

The second option is to detect the feature via a JS library like Modernizr and try to offer the same animation via a JavaScript library that will mimic the animations. This is what we usually call a fallback mechanism. Unfortunately, I haven’t found today a working & complete JS library that could replace CSS3 animations when not supported by the browser.

I have then written a sample JS library more or less specifically designed for the AT-AT sample.

CSS3 Animations JavaScript fallback library

Animations are nothing more than a series of transitions separated by a certain duration defined via the keyframes. I’ve then reused the concepts built by David Catuhe in his transitions helper library. I let you reviewing his article to check the base of the concepts behind the code.

On my side, I’ve added some support to animate the CSS3 2D Transform rotation & translation values and a way to iterate through the keyframes.

Here is the main part of the library you need to review:

// Animation object
// It need the HTML targeted element, the name of the animation, its duration & iteration count and
// the keyframes contained in an array object
// View the animation simply as a sequence of transitions played a certain number of times
ANIMATIONSHELPER.animation = function (target, name, duration, iterationcount, keyframes) {
    // saving the properties values
    this.name = name;
    this.duration = duration;
    this.iterationcount = iterationcount;
    this.target = target;
 
    var elapsedtime = 0;
    var keyframeduration = 0;
    var elapsedtime = 0;
 
    // Transforming the percentage of each keyframe into duration value
    for (var i = 0; i < keyframes.length; i++) {
        keyframeduration = ((keyframes[i].percentage * duration) / 100) - elapsedtime;
        keyframes[i].duration = keyframeduration;
        elapsedtime += keyframeduration;
    }
 
    this.currentTransition = { isPlaying: false };
    this.keyframes = keyframes;
    this.keyframesCount = keyframes.length;
    this.currentKeyFrameIndex = 0;
 
    // The nextTransition() function return the next transition to run
    // based on the current keyframe to play
    this.nextTransition = function (keyframe, ease, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y) {
        var properties = [];
        var finalValues = [];
        var transition;
 
        // Compared to the original TRANSITIONSHELPER of David Catuhe
        // We need a specific code to play with the CSS3 2D Transform properties values
        if (keyframe.propertyToAnimate === "transform") {
            for (var i = 0; i < keyframe.transformType.length; i++) {
                properties.push(keyframe.transformType[i].type);
                if (keyframe.transformType[i].type == "rotate") {
                    finalValues.push({ deg: keyframe.transformType[i].value1 });
                }
                else {
                    finalValues.push({ x: keyframe.transformType[i].value1, y: keyframe.transformType[i].value2 });
                }
            }
 
            // Create a new transition
            transition = {
                name: this.name + this.currentKeyFrameIndex,
                target: this.target,
                properties: properties,
                finalValues: finalValues,
                originalValues: ANIMATIONSHELPER.extractValues(target.style[ANIMATIONSHELPER.currentTransformProperty], this.name),
                duration: keyframe.duration,
                startDate: (new Date).getTime(),
                currentDate: (new Date).getTime(),
                ease: ease,
                customEaseP1X: customEaseP1X,
                customEaseP2X: customEaseP2X,
                customEaseP1Y: customEaseP1Y,
                customEaseP2Y: customEaseP2Y,
                isPlaying: true,
                type: "transform"
            };
 
            return transition;
        }
        // If it's a classic property to animate, we're using more or less the TRANSITIONSHELPER as-is
        else {
            return TRANSITIONSHELPER.transition(this.target, keyframe.propertyToAnimate, keyframe.value, keyframe.duration, TRANSITIONSHELPER.easingFunctions.linear);
        }
    };
 
    // each animation object has a tick function
    // that will be called every 17 ms (to target 60 fps)
    // This ticker is monitoring the current state of the transition and
    // create a new transition as soon as the old one is finished/dead
    this.tick = function () {
        if (this.iterationcount > 0) {
            if (!this.currentTransition.isPlaying) {
                this.currentTransition = this.nextTransition(this.keyframes[this.currentKeyFrameIndex], ANIMATIONSHELPER.easingFunctions.linear);
                // We're using our own global ticker only for the 2D transformations
                // Otherwise, we're using the one from the TRANSITIONSHELPER library
                if (this.currentTransition.type === "transform") {
                    ANIMATIONSHELPER.currentTransitions.push(this.currentTransition);
                }
                this.currentKeyFrameIndex++;
 
                // We've reached the last keyframe (100%). We're starting back from the beginning
                if (this.currentKeyFrameIndex >= this.keyframesCount) {
                    this.currentKeyFrameIndex = 0;
                    this.iterationcount--;
                }
            }
        }
    };
};

The first part of the code is iterating through each keyframe to compute the exact duration specified by each percentage. We’re then defining a
nextTransition()
function that will dynamically build the next transition to play based on the current index into the keyframes collection. At last, we’ve got a
tick()
function that will monitor the current state of the transition applied. Once the transition is finished or dead, it asks for the next transition, push it to the stack of transitions to be played and moves the indexes.

This
tick()
function is called thanks to this code:

ANIMATIONSHELPER.launchAnimation = function (animation) {
    // Launching the tick service if required
    if (ANIMATIONSHELPER.tickIntervalID == 0) {
        ANIMATIONSHELPER.tickIntervalID = setInterval(ANIMATIONSHELPER.tick, 17);
    }
 
    // Little closure to launch the tick method on the appropriate animation instance
    setInterval(function () { animation.tick(); }, 17);
};

At last, we have this kind of code that helps us building the keyframes:

// Object to build a new generic keyframe (not working on the CSS3 2D Transform properties thus)
ANIMATIONSHELPER.keyframe = function (percentage, propertyToAnimate, value) {
    this.percentage = percentage;
    this.propertyToAnimate = propertyToAnimate;
    this.value = value;
};
 
//Objects to build specific rotation keyframes
ANIMATIONSHELPER.rotationkeyframe = function (percentage, value) {
    this.percentage = percentage;
    this.propertyToAnimate = "transform";
    this.transformType = [];
    this.transformType.push(new ANIMATIONSHELPER.transformType("rotate", value));
};

To highlight its usage, let’s recreate the previous simple CSS3 Animation skull sample with this library :

// number of times you'd like the animations to be run
var iterationsNumber = 100;
 
var skullElement = document.getElementById("skull");
var keyframes = [];
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(25, 15));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(50, -5));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(55, 0));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(75, -10));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(100, 0));
 
var animation1 = new ANIMATIONSHELPER.animation(skullElement, "rotate-skull", 7000,
                            iterationsNumber, keyframes);
 
ANIMATIONSHELPER.launchAnimation(animation1, ANIMATIONSHELPER.easingFunctions.linear);

And here is the result that will now work in every browser supporting CSS3 2D Transform:

At last, the very first sample demonstrated at the beginning of this article uses Modernizr to check the support for CSS3 Animations. If it’s not the case, it loads the code that will mimic the keyframes defined in the file master.css, moz-master.css & ms-master.css :

// Checking if CSS3 animations is supported
if (!Modernizr.cssanimations) {
// if so, we can use our JS fallback library
    supportElement.innerHTML = "CSS3 Animations are not supported";
    LoadJSAnimationsFallback();
}
else {
    // if CSS3 animation is supported, we have nothing to do.
    // The *master.css stylesheets will be automatically applied & used.
    supportElement.innerHTML = "CSS3 Animations are supported";
}

The LoadJSAnimationsFallback() function is defined into jsfallback-master.js which simply contains all the keyframes declarations and the 19 animations needed to mimic the behavior created by Anthony in pure CSS3. In this approach, the designer then needs to rewrite all rules using the library. Another approach could be to parse one of the CSS file using an XHR call and to create dynamically the JavaScript calls to the library. This needs more work as you almost need to reimplement the CSS3 animations specifications in JavaScript!

You now have an idea on the way to build a fallback mechanism to support more browsers while starting to use the latest CSS3 specifications.

You can download the files for the main sample here: http://david.blob.core.windows.net/html5/css3atat/CSS3ATATNonMinified.zip

It contains the unminified versions of the animationsHelper.js, transitionsHelper.js, jsfallback-master.js JavaScript files as well as the various CSS3 declinaison files for the main vendors prefixes.

Conclusion

CSS3 Animations is a powerful technology to push HTML5 applications to a new level. It offers interesting scenarios. Designers could use it to create a new generation of UI screens with smooth & fluid animations without the need of developers. As it’s hardware-accelerated most of the time, developers should also pay attention to this specification. At last, both could collaborate. Designers could work on a series of predefined animations covering most scenarios. Developers could then create JavaScript libraries that will implement those animations. This library could offer in a transparent way 2 implementations: a dynamic generation of CSS3 on the fly or a fallback for older browsers.

Going further

Article about CSS3 Transitions by David Catuhe: Introduction to CSS3 Transitions
CSS3 Animations specifications: http://www.w3.org/TR/css3-animations/
IE Test Drive on CSS3 animations: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm

Other useful posts:

Events are relatively limited in the CSS3 Animation spec. Joe Lambert is proposing an interesting solution to trigger events on each keyframe: CSS Animation Keyframe Events (Javascript solution)

Amazing things to do with PHP and cURL

admin — Tue, 07 Feb 2012 09:25:48 +0000

cURL, and its PHP extension libcURL, are very useful tools for tasks like simulating a web browser, submit forms or login to a web service. In this article, I’m going to show you some amazing things that you can do using PHP and cURL.

Check if a specific website is available

Want to know if a specific website is available? cURL is here to help. This script can be used with a cron job to monitor your websites.

Don’t forget to update the script with the url you want to check on line 3. Once done, just paste it somewhere and it will let you know about the site availability.

→ Source: http://css-tricks.com/snippets/php/check-if-website-is-available/

cURL replacement for file_get_contents()

The
file_get_contents()
function is very useful but it is unfortunely deactivated by default on some webhosts. Using cURL, we can write a replacement function that works exactly like
file_get_contents()
.

function file_get_contents_curl($url) {
	$ch = curl_init();

	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //Set curl to return the data instead of printing it to the browser.
	curl_setopt($ch, CURLOPT_URL, $url);

	$data = curl_exec($ch);
	curl_close($ch);

	return $data;
}

→ Source: http://snipplr.com/view/4084

Get latest Twitter status

Using PHP and cURL, it is pretty easy to get the status of a specific user. Once you have it, what about displaying it on your blog, like I do in WPRecipes footer?

function get_status($twitter_id, $hyperlinks = true) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, "http://twitter.com/statuses/user_timeline/$twitter_id.xml?count=1");
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $src = curl_exec($c);
    curl_close($c);
    preg_match('/(.*)<\/text>/', $src, $m);
    $status = htmlentities($m[1]);
    if( $hyperlinks ) $status = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]", '\\0', $status);
    return($status);
}

The function is super easy to use:

echo get_status('catswhocode');

→ Source: http://www.catswhocode.com/blog/php-snippets-to-interact-with-twitter

Twitter: test friendship between two users

If you want to know if a specific user is following you (or someone else) you have to use the Twitter API. This snippet will echo
true
if the two users specified on lines 18 and 19 are friends. It will return
false
otherwise.

function make_request($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	$result = curl_exec($ch);
	curl_close($ch);
	return $result;
}

/* gets the match */
function get_match($regex,$content) {
	preg_match($regex,$content,$matches);
	return $matches[1];
}

/* persons to test */
$person1 = 'phpsnippets';
$person2 = 'catswhocode';

/* send request to twitter */
$url = 'https://api.twitter.com/1/friendships/exist';
$format = 'xml';

/* check */
$persons12 = make_request($url.'.'.$format.'?user_a='.$person1.'&user_b='.$person2);
$result = get_match('/(.*)<\/friends>/isU',$persons12);
echo $result; // returns "true" or "false"

→ Source: http://www.catswhocode.com/blog/php-snippets-to-interact-with-twitter

Download and save images from a page using cURL

Here is a set of functions that can be very useful: Give this script the url of a webpage, and it will save all images from this page on your server.

function getImages($html) {
    $matches = array();
    $regex = '~http://somedomain.com/images/(.*?)\.jpg~i';
    preg_match_all($regex, $html, $matches);
    foreach ($matches[1] as $img) {
        saveImg($img);
    }
}

function saveImg($name) {
    $url = 'http://somedomain.com/images/'.$name.'.jpg';
    $data = get_data($url);
    file_put_contents('photos/'.$name.'.jpg', $data);
}

$i = 1;
$l = 101;

while ($i < $l) {
    $html = get_data('http://somedomain.com/id/'.$i.'/');
    getImages($html);
    $i += 1;
}

→ Source: http://stackoverflow.com/questions/7747875/grab-download-images-from-multiple-pages-using-php-preg-match-all-curl

Convert currencies using cURl and Google

Converting currencies isn’t very hard to do, but as the currencies fluctuates all the time, we definitely need to use a service like Google to get the most recent values. The
currency()
function take 3 parameters: from, to, and sum.

function currency($from_Currency,$to_Currency,$amount) {
    $amount = urlencode($amount);
    $from_Currency = urlencode($from_Currency);
    $to_Currency = urlencode($to_Currency);
    $url = "http://www.google.com/ig/calculator?hl=en&q=$amount$from_Currency=?$to_Currency";
    $ch = curl_init();
    $timeout = 0;
    curl_setopt ($ch, CURLOPT_URL, $url);
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch,  CURLOPT_USERAGENT , "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)");
    curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $rawdata = curl_exec($ch);
    curl_close($ch);
    $data = explode('"', $rawdata);
    $data = explode(' ', $data['3']);
    $var = $data['0'];
    return round($var,2);
}

→ Source: http://l33ts.org/forum/Thread-PHP-Convert-currencies-using-Google-and-cURL-Snippet

Get remote filesize using cURL

Want to be able to calculate the size of a specific file? The following function can help. It takes 3 parameters: the file url, and in case the file is password protected, a username and a password.

function remote_filesize($url, $user = "", $pw = ""){
    ob_start();
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_HEADER, 1);
    curl_setopt($ch, CURLOPT_NOBODY, 1);

    if(!empty($user) && !empty($pw))
    {
        $headers = array('Authorization: Basic ' .  base64_encode("$user:$pw"));
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    }

    $ok = curl_exec($ch);
    curl_close($ch);
    $head = ob_get_contents();
    ob_end_clean();

    $regex = '/Content-Length:\s([0-9].+?)\s/';
    $count = preg_match($regex, $head, $matches);

    return isset($matches[1]) ? $matches[1] : "unknown";
}

→ Source: http://megasnippets.com/source-codes/php/get_remote_filesize

FTP upload with cURL

PHP does have a FTP library, but you can also use cURL to upload files on a FTP server. Here is a working example:

// open a file pointer
$file = fopen("/path/to/file", "r");

// the url contains most of the info needed
$url = "ftp://username:password@mydomain.com:21/path/to/new/file";

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

// upload related options
curl_setopt($ch, CURLOPT_UPLOAD, 1);
curl_setopt($ch, CURLOPT_INFILE, $fp);
curl_setopt($ch, CURLOPT_INFILESIZE, filesize("/path/to/file"));

// set for ASCII mode (e.g. text files)
curl_setopt($ch, CURLOPT_FTPASCII, 1);

$output = curl_exec($ch);
curl_close($ch);

Developing a Responsive Website: The Footer

admin — Mon, 06 Feb 2012 11:17:22 +0000

At this point we’re just about done with the homepage of our responsive website. We’ve got our navigation in place, our background images resize nicely, and our other elements are able to resize and adjust to various screen resolutions.

Today we’re going to focus on tying the page off with a footer. I’ve always admired sites that put some thought in to the bottom of their page design. There are certainly times when a footer requires nothing more than some basic contact info and maybe a copyright claim.

But I think it’s a good idea with any site requiring a fair amount of vertical scrolling to go ahead and add a smaller version of your main navigation in to your footer. This allows the viewer to reach the end of your page and quickly jump to another page on the site. We’ll put the icing on our footer by feeding in our latest tweet with a little jQuery script and then sprinkle in some contact info. Before we dive in to it, let’s take a quick peek at what we’re working towards.

Much like a website’s header, I like to use a separate file for my footer and dynamically pull it in to each page with a php include.

This makes for quick and easy updating if a link is added or contact info changes. Go ahead and open your idex.php file and include your footer, mine is sitting just above the close of my body tag and looks like this.

That’s it for our index.php page, go ahead and save it then close out of that file. Next up we’re going to want to create our footer file and enter all of our content, so open a new document and save it as “footer.php”. The first tag we’re going to want to drop in our footer.php file is our container id.

This will keep our footer content centered on the page and aligned nicely with the rest of our main content above. You’ll notice in the image of our footer above that it’s broken down in to three sections, so we’re going to want to include a “footerLeft” class right after we open the container.

We then populate our “footerLeft” class with a miniature version of our main navigation, and then icons linking to our social media pages. At this point my code looks like this.


	
		
    		Home

        	Portfolio
        	Services
        	About

        	Blog
        	Contact

Our middle section is our Twitter feed and is only three simple lines of code, an image wrapped in a div class I named “twitter”. Our content is populated by jQuery and is set to recognize our “twitter” class as the appropriate location to place our latest tweet. We’ll dive in to this in our next tutorial.

Lastly we have some contact info, which I aptly named “contact”. From there simple paragraph and line break formatting displays our contact info.


    Developer Drive


	123 Fake St.

	Cupertino, CA 95014

	P: 650-555-1212

	F: 650-555-1213

That does it for our footer.php file. Feel free to check your work against my full footer.php code or save your work and close out of this page.


	
		
    		Home

        	Portfolio
        	Services
        	About

        	Blog
        	Contact
    	

        
        
        
        
	


    
    
    


    
    Developer Drive


	123 Fake St.

	Cupertino, CA 95014

	P: 650-555-1212

	F: 650-555-1213

Now that all of the content is entered in to the appropriate files, we can begin to style it. Our regular HTML5 footer tag sets the height, color, and font style for our footer. I also put a thick top border to help separate our footer from our portfolio slider above.

footer {
	height:250px;
	background-color:#C15007;
	border-top:10px solid #EDEAE5;
	color:#fff;
	font-weight:bold;
	font-weight:.8em;
}

The .footerLeft class gets a little tricky as there’s quite a bit going on in there with our mini main navigation list elements and images. Most of this is basic styling, but there are a couple things worth pointing out.

Since we don’t have too much room to make our mini navigation bar fluid and keep it on the same line with decent spacing, I made its width specific. We’ll rely on the Twitter and contact sections for our minor width adjustments.

Also, it’s worth pointing out that the inline display under our list element is important to maintain the same horizontal appearance of our page links.

.footerLeft {
	color:#fff;
	float:left;
	width:380px;
	height:150px;
	border-right:1px solid #fff;
	margin-top:5%;
	padding-top:2%;
}

.footerLeft ul li{
	display:inline;
	text-transform:uppercase;
	list-style:none;
	margin-right:2%;
}

.footerLeft ul li a {
	font-size:.8em;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
}

.footerLeft ul li a:hover {
	text-decoration:underline;
}

.footerLeft img {
	float:right;
	margin:5% 2% 5% 0;
}

Next up we have our Twitter section, notice how we’re back to a percentage based width. We’re also able to style the time stamp of our tweets to subtly pronounce the time of our last tweet.

.twitter {
	width: 35%;
	height:150px;
	float:left;
	margin-top:5%;
	padding:2% 2% 0 2%;
	border-right:1px solid #fff;
	color:#fff;
	font-weight:bold;
	font-weight:.8em;
}

.twitter img {
	float:left;
	margin-bottom:100px;
	margin-right:5%;
}

.twitter .tweet a {
	text-decoration: none;
	color:#6BA5BD;
	font-weight:bold;
	font-weight:.8em;
}

.twitter .tweet a:hover {
	text-decoration: underline;
}

.twitter .tweet .time {
	font-size:10px;
	font-style:italic;
	color:#FFD08C;
}

Lastly, we’ll add some spacing to our contact section for an evenly spaced look.

.contact {
	float:left;
	margin-top:5%;
	padding:2% 2% 0 2%;
}

Next week we’ll finish off the styling to make our footer fully responsive as well as discuss the jQuery Twitter feed. In the mean time, test your responsive skills and see if you’re able to make your footer responsive. Click here to download the source code.

Implement Google Custom Search into WordPress [.net Magazine]

admin — Wed, 01 Feb 2012 11:39:57 +0000

Knowledge needed: Basic PHP, experience with WordPress
Requires: WordPress 3.1+
Project time: 1 hour

WordPress has a search function which has developers opinions split. Freelancer Paul Maloney shows us how to replace the search function with a super powered Google Custom Search engine

View demo: http://netmag.clientden.com/

WordPress and its search function – this is a subject that often splits the most hardcore WordPress users. Terms like “abysmal” are frequently banded about among developers, I personally defend it… to a certain level.

For smaller sites the search function does its job successfully, it’s no frills and does what it says on the tin, but for larger sites it can be like taking a spoon to a bazooka fight. So today I plan to show you how to integrate Google Custom Search into your WordPress install and harness the raw power of the world’s most powerful search solution.

Before we get into the nitty gritty I wanted to briefly cover something that has come up as an issue (of sorts) for me while replacing the search function. As we all know Google Custom Search will use Google results for your site so we need to ensure Google has good access to our content, so installing the Google XML Sitemap plugin will assist in Google’s indexing quest. The other point of note is due to the way WordPress archives work, Google may index multiple versions of your posts so you could in effect have several versions of the same article competing in your own search results, so to combat this I opted to use the All In One SEO Pack plug-in and set it up so only single posts would appear.

Not only will using these (or similar) plug-ins help your custom search work more efficiently; it’s also good SEO practice and could help you climb up those pages!

Now we can move onto the part you have been patiently waiting for, the actual implementation of Google Custom Search into WordPress.

Creating a custom search engine

First thing first, we need to visit Google Custom Search and set up our search engine. Follow this link: http://www.google.com/cse/ and you will be taken to the Google Custom Search page were you can create or manage your search engines.

We need to give our search engine a name, description and define its primary language, then we need to give it a list of sites to search, so in our case it would just be our site, so for example: http://www.netmagazine.com.

You then need to select an edition, there is an ad supported free version or, for the more financially blessed among us, we can go for the paid version and wave goodbye to those ads.

At this point Google Custom Search offers little in the way of customisation, but does offer a few themes and layouts we can use and hopefully one of those will work on our WordPress install.

The final step over at Google is to grab our code for our custom search engine, Google recommends using a supported Doc Type such as in your pages as the custom search uses some CSS hover effects.

Below our code Google also offers some further options that you can use to customise the custom search a little further, which in this case we will need to do.

Hit the change the look and feel link and you will be presented with some layout and style options. We will need to use the Results only layout as we will be using our own search box. Tthe style is totally up to you. Once that is done, hit the Save & Get Code button and we can then finish this part off by grabbing our code.

You will need to specify your site details such as HTTP/HTTPS and specify the search result details – we should use “q”, which is the default Google search query parameter.

Our code is now ready to use in our WordPress install, so keep it in a safe place for the time being.

Building the results page

To get the custom search in place of WordPress’ in built search function we are going to use a custom page template (you can read more about these here: http://codex.wordpress.org/Pages#Page_Templates).

At the beginning of a custom page template you must define your custom page name so it can be used by WordPress, so we will name our template googlesearch.php and place this at the top of our custom page:

/*
Template Name: Google Search
*/
?>

The file name and template name can of course be altered and named to anything you wish.

Once that is in place, you can continue to build the rest of your page. For this tutorial I will be using the TwentyEleven theme and using the page.php as a base to work from, which looks a little something like this:

/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other ‘pages’ on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
get_header(); ?>
while ( have_posts() ) : the_post(); ?>
get_template_part( ‘content’, ‘page’ ); ?>
comments_template( ”, true ); ?>
endwhile; // end of the loop. ?>
div> #content –>
div> #primary –>
get_footer(); ?>

That gives us our base to work with, but we need to add the code from Google and remove the things we don't need from the standard page template.

We don’t need the content or comments part so they can be removed, and then you can add your search code so you end up with something like this:

/*
Template Name: Google Search
*/
?>
get_header(); ?>
while ( have_posts() ) : the_post(); ?>
Loading
endwhile; // end of the loop. ?>
div> #content –>
div> #primary –>
get_footer(); ?>

*Notice the code is used inside the loop (codex.wordpress.org/The_Loop).

We can now upload that new file which I have called googlesearch.php to our theme folder.

Creating the search page

Now the bulk of the code is done we need to create a new page through the WordPress wp-admin, I have called my page “Search Results.”

You will see my page has no content as Google will supply that for us, but the main thing we need to do here is change the template to our custom page template. In this case we need to select the Google Search template from the drop down on the right. Once we have done that hit Publish.

We will also need to alter one other snippet of code. In searchform.php we need to alter the name field from s to q, and the form action to the URL of our new results page (in my demos case: action=”http://netmag.clientden.com/search-results”). Once that has been changed we're ready to go.

Tweaking our custom search engine

If all goes well, we now have a custom search engine that displays our WordPress’ results on our search-results page.

You might notice when you hit a link from your results page, it opens in a new window which is not ideal, so if we want to change this, we can add an extra snippet to our googlesearch.php page:

If we add:

customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

between the following:

customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();

so we get this:

customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
var options = new google.search.DrawOptions();

Your search results will now open in the same window, which in most cases will be the desired result.

Google offers further steps for customisation, such as applying your own stylesheet and using image search with your results but I will allow you to dig into those in further depth at your leisure.

Conclusion

While this is a solution that will favour many, it does have a few downsides. New posts might take a few days to get indexed and results can change, so popular pages might rank higher than newer articles and so on… That being said if you are managing a content heavy site and the inbuilt search feature doesn’t cut the mustard, this is probably right up your street.

Designing a Clean Website: Gradients [developerDrive]

admin — Tue, 10 Jan 2012 23:55:02 +0000

This is our third installment of how to design a clean a minimalist website.

First we looked at navigation and how to make an accordion style drop-down menu with pure CSS3. Then we moved on to laying the site out and went over rounding corners and applying drop shadows with CSS3.

Now we’re going to look at how to create a gradient with CSS3 and apply that to a few of the elements in our homepage.

We left off in part two after we pulled our header, navigation and main image in to our layout. Now that we have all those things in place let’s go ahead and put in a few small quick-info type boxes underneath our main image. You can populate these boxes with anything you want, news headlines that link to a blog or news page, images, ads, testimonials, you name it.

For this tutorial I’m just going to use a few of the most recent blog posts off Developer Drive. We’re going to use the

tag for these boxes and add a little bit of style to help polish them up. Three of the main style elements I’m going to use on these are rounded corners, drop shadows and gradients.

I styled an article tag with the class “home” and made it 248 px wide by 190 px tall so that they’d align nicely underneath our main image. I also added margins, padding and the rest of the styling as follows.

article.home {
	float:left;
	width:248px;
	height:190px;
	padding:5px;
	margin:11px 11px 11px 0;
	border:1px solid #737373;
	-moz-border-radius:7px;
	border-radius:7px;
	-webkit-border-radius:7px;
	box-shadow: 2px 2px 2px #838383;
        overflow:hidden;
}

Next we want to make it look a little less flat and dull and gradients are an excellent way to breathe a little bit of color in to a site and help give it that nice, glossy, modern look.

To make a gradient cross-browser compatible requires a lot of redundant coding, so that’s when a site like Colorzilla comes in handy. Colorzilla generates cross-browser gradient code for you with a few simple clicks of the mouse.

When making a gradient you set start and stop points for each color, as well as opacity. Adding a simple gradient to something like a navigation bar, or in our case to use as a background, can require a lot of repetitive coding.

Colorzilla makes this process a breeze, click the colors you want, slide the bars to where you want the colors to change, then highlight the automatically generated code and paste it in to your CSS file. You even get a real time preview of what your gradient will look like.

I created a gradient that was a soft grey color that faded to white and we’re going to have it start with the light grey at the bottom of the box and fade to white towards the top. I added the following code that Colorzilla generated for me to my article.home class in my CSS file.

article.home {
	float:left;
	width:248px;
	height:190px;
	padding:5px;
	margin:11px 11px 11px 0;
	border:1px solid #737373;
	-moz-border-radius:7px;
	border-radius:7px;
	-webkit-border-radius:7px;
	box-shadow: 2px 2px 2px
        overflow:hidden;
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 79%, #dddddd 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(79%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ffffff 79%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ffffff 79%,#dddddd 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ffffff 79%,#dddddd 100%); /* IE10+ */
        background: linear-gradient(top, #ffffff 79%,#dddddd 100%); /* W3C */
}

Since we’re going to be displaying some news headlines, let’s style a few other tags that will become useful. I’m going to use and h3 tag for the headline of each article, along with an h3 img tag so that we can include the author’s gravatar image as well.

I also created a h5 tag for the author’s name and the date and then styled a paragraph tag. These are all optional and could be unnecessary if you’re doing something different inside these boxes. When all was said and done my code ended up looking like this:

article.home h3 {
	font-size:14px;
	margin:0;
	padding:0;
	color:#404648;
}

article.home h5 {
	font-size:10px;
	margin-bottom:0;
	padding-bottom:0;
	color:#404648;
}
article.home h3 img {
	float:left;
	margin-right:10px;
}
article.home p {
	border-top:3px solid #6BA5BD;
	font-size:12px;
	color:#737373;
	margin:0;
	padding-top:5px;
}

Now that we’ve got all of the styling we need for our little promotional boxes under our main image, let’s jump back in to our index.php file and create the HTML needed and drop in the content.

Staying within the

tag, and just under the img src code for our main image, go ahead and place three instance of . I just pulled some content out of a few recent Developer Drive articles, so my HTML ended up looking as follows.


	

    
    	Developing With The HTML5 Video Element
        By Scott Stanton - November 23, 2011
        Videos have been a great way to attract viewers to a website long before YouTube launched back in 2005.  But it wasn't until the release of HTML5 that web developers have had a lightweight solution to playing the video.  In the past, displaying a video on your site meant your viewer was required to have a Flash or Java-based player installed on their system in order to watch the video.
    

    
    	Creating a PHP User Survey: Writing to Database Tables
        By Gerald Hanks - November 22, 2011
        In the first two parts of this series, we created the data layer that will hold the polling data and established methods for setting the variable values and reading from the database tables.

In this part, we will build the methods that will write new polls and answers to the tables.
    
    
    	An Introduction to HTML5's Video API Part 2
        By Louis Lazaris - November 21, 2011
        This is the second part in our introduction to HTML5′s video API. In part 1 of this series, I introduced you to the basic markup we'll be using to play the video, then I helped set up a simple script with which we were able to make the controls visible, while ensuring that the native controls will still be visible when JavaScript is disabled.

Now that we’ve got our boxes and everything in place on our homepage we can utilize another cool new HTML5 tag,

. I kept mine simple and just included some basic info that was wrapped in a

tag. Note how I take advantage of the php file and use a tiny snippet of code to dynamically generate the year.


	All Content © Developer Drive

I gave it some real basic styling back in my CSS file, the only real noteworthy bit being the border-top that helps separate the footer from the rest of the content. My footer styling looks like this.

footer {
	position:absolute;
	top:747px;
	border-top:1px solid #838383;
	width:805px;
	text-align:center;
	margin-left:105px;
}
footer p {
	font-size:10px;
}

Now you’ve got a basic homepage that is clean, simple, polished, and minimalist. You can leave it the way that it is and run with it, or supercharge it by turning your image in to a slider that cycles through several images.

Stay tuned next time where we will cover sub-pages and how to easily display content in a manner that will quickly load and not require the viewer to load a new page on each link they click.

Adventures In The Third Dimension: CSS 3D Transforms [smashingmag]

admin — Tue, 10 Jan 2012 23:30:06 +0000

Back in 2009, the WebKit development team proposed a new extension to CSS that would allow Web page elements to be displayed and transformed on a three-dimensional plane. This proposal was called 3D Transforms, and it was soon implemented in Safari for Mac and iOS. About a year later, support followed for Chrome, and early in 2011, for Android. Outside of WebKit, however, none of the other browser makers seemed to show much enthusiasm for it, so it’s remained a fairly niche and underused feature.

That’s set to change, though, as the Firefox and Internet Explorer teams have decided to join the party by implementing 3D Transforms in pre-release versions of their browsers. So, if all goes according to plan, we’ll see them in IE 10 and a near-future version of Firefox (possibly 10 or 11, but that’s not confirmed yet), both of which are slated for release sometime this year.

That being the case, this is an ideal time to get ahead of the curve and start learning about the possibilities and potential of adding an extra dimension to your Web pages. This article aims to help you do just that, by taking you on a flying tour of the 3D Transforms syntax.

Please bear in mind that in order to see the examples in this article, you’ll need a browser that supports 3D Transforms; as I write this, that’s Safari, Chrome, IE 10 Platform Preview or Firefox Aurora.

The Third Dimension

On the Web, we’re accustomed to working in two dimensions: all elements have width and height, and we move them around the screen horizontally (left to right) and vertically (top to bottom). The move to a third dimension can be thought of as adding depth to elements, and adding movement towards and away from you (the viewer). Think about 3D films in which objects are constantly thrust out of the screen towards you in an attempt to demonstrate the possibilities of the extra depth.

To use 3D Transforms in CSS, you’ll need to know about axes (that’s the plural of axis, not the plural of axe). If you already know about working in three dimensions or remember using axes in math class at school, you can skip the next section. For everyone else, here is…

A Quick Primer On Axes

I just mentioned that on the 2-D Web, we move elements around horizontally and vertically. Each of these directions is called an axis: the horizontal line is known as the x-axis, and the vertical line is the y-axis. If we think of the top-left corner of an element as our origin (i.e. the point from which movement is measured), a movement to the left is a negative movement along the x-axis, and a move to the right is a positive movement along the x-axis. The same goes for moving an element up (negative on the y-axis) and down (positive on the y-axis).

The third dimension is known as the z-axis and, as I said, can be thought of as towards or away from you; a negative movement along the z-axis is away from you, and a positive movement is towards you.

Showing the three axes: x (left-right), y (up-down) and z (away-towards).

If you’ve read all of this talk of axes and negative movements and you’re rubbing your eyes and blinking in disbelief and misunderstanding, don’t worry: it will all become clear when you get stuck in the code. Come back and read this again after a few examples and it should all be clear.

Transformation Functions

The various transformations are all applied with a single CSS property:
transform
— yes, the same property that’s used for 2-D CSS Transforms. At the moment, this property is still considered experimental, so remember to use all of the browser prefixes, like so:

div {
  -moz-transform: foo;
  -ms-transform: foo;
  -o-transform: foo;
  -webkit-transform: foo;
}

Note that Opera doesn’t currently have an implementation of 3D Transforms, but I’m including it here because work is apparently underway. For the sake of clarity, in the examples throughout this article, I’ll use only non-prefixed properties, but remember to include all of the prefixed ones in your own code.

Anyway, the
transform
property accepts a range of functions as values, each of which applies a different transformation. If you’ve used 2-D CSS Transforms, then you’ll already know many of these functions because they are quite similar (or, in some cases, the same). Here are all of the 3D functions:

matrix3d
perspective
rotateX, rotateY, rotateZ, rotate3d
scaleX, scaleY, scaleZ, scale3d
translateX, translateY, translateZ, translate3d

Now,
matrix3d
definitely sounds the coolest, but it’s so unbelievably complex (it takes 16 values!) that there’s no way I could cover it in this article. So, let’s put that aside and take a quick look at the others.

Rotation

To explain what this does, I’ll have to ask you to do a little mental exercise (which will come in useful later in the article, too). Imagine a sheet of card with a string running through the middle that fixes it in place. By taking the top corners in your fingers, you can move the card up and down, left and right, and forwards and backwards, pivoting around the string. This is what the
rotate()
function does. The individual functions
rotateX()
,
rotateY()
and
rotateZ()
take a
deg
(i.e. degree) value and move the element around its point of origin (where the string passes through it) by that much.

Have a look at our first example (a screenshot is shown below in case you don’t have access to a supported browser). Here we’ve rotated each of the elements 45° around a different axis (in order: x, y, z), so you can see the effect of each. The semi-translucent red box shows the original position of the element, and if you mouse over each, you’ll see the transformations removed (I’ve used this convention in all of the examples in this article).

Each element is rotated 45° around a different axis: x (left), y (center) and z (right).

There is a
rotate3d()
function as well, but it’s too complex to explain in a brief article like this one, so we’ll skip it.

Translation

This is really just a fancy way of saying “movement.” The functions
translateX()
,
translateY()
and
translateZ()
each take a length value, which moves the element by that distance along the given axis. So,
translateX(2em)
would move the element 2 ems to the right, and
translateZ(-10px)
would move the element 10 pixels away from the viewer. There’s also a shorthand function,
translate3d()
, which takes three values in order, one for each axis, like so:
translate3d(x, y, z)
.

In our second example, we’ve translated each of the elements by -20 pixels along a different axis (in order: x, y, z).

Each element is translated by -20 pixels along a different axis: x (left), y (center) and z (right).

Note that translation of an element is similar to relative positioning, in that it doesn’t affect the document’s flow. The translated element will keep its position in the flow and will only appear to have moved, meaning it might cover or show through surrounding elements.

Scaling

This just means making bigger or smaller. The three functions
scaleX()
,
scaleY()
and
scaleZ()
each take a unitless number value, which is used as a multiplier. For
scaleX()
and
scaleY()
, this is applied directly to the width and height; for example, applying
scaleY(1.5)
to an element with a height of 100 pixels would transform it to 150 pixels high, and applying
scaleX(0.75)
to an element with a width of 100 pixels would transform it to 75 pixels wide.

The
scaleZ()
function behaves slightly differently. Transformed elements don’t actually have any depth to increase or decrease; what we’re doing is more like moving a 2-D object around in 3D space. Instead, the value given to
scaleZ()
acts as a multiplier for the
translateZ()
function that I explained in the last section. So, applying both
translateZ(10px)
and
scaleZ(2)
would translate an element 20 pixels along the z-axis.

There’s also a shorthand property,
scale3d()
, which, like
translate3d()
, takes three values, one for each of the individual functions:
scale3d(x,y,z)
. So, in the following code example, the same transformation applies to both of the elements:

.e1 {
   transform: scaleX(1.5) scaleY(1.5) scaleZ(0.75);
}

.e2 {
   transform: scale3d(1.5,1.5,0.75);
}

Perspective

The
perspective()
function is quite simple, but what it actually does is quite complex. The function takes a single value, which is a length unit greater than 0 (zero). Explaining this is a little complicated; the length is like a distance between you and the object that you’re viewing (a tutorial on Eleqtriq has a more technical explanation and diagram). For our purposes, you just need to know that the lower the number, the more extreme the 3D effect will appear; any value below 200px, for example, will make the transformation appear very exaggerated, and any value of 1000px or more will seem to have no effect at all.

In our third example, we have three transformed elements, each with a different value for the
perspective()
function: 25px, 50px and 200px, respectively. Although the difference between the three is very discernible, it’s even clearer when you mouse over to see the transformations removed.

Each element has a different value for the perspective() function: 25px (left), 50px (center) and 200px (right).

Note that I’ve transformed the parent elements (equally) so that we can see the degree of perspective more clearly; sometimes the difference in perspective values can be imperceptible.

Other Properties

In addition to
transform
, you’ll need to know about a few other important properties.

transform-style

If you’ll be applying 3D transformations to the children of an already transformed element, then you’ll need to use this property with the value
preserve-3d
(the alternative, and default, is
flat
). This means that the child elements will appear on their own planes; without it, they would appear flat in front of their parent.

Our fourth example clearly illustrates the difference; the element on the left has the
flat
value, and on the right,
preserve-3d
.

The element on the left has a transform-style value of flat, and the one on the right has a value of preserve-3d.

Something else to note is that if you are transforming child elements, the parent must not have an
overflow
value of
hidden
; this would also force the children into appearing on the same plane.

transform-origin

As mentioned, when you apply a transformation to an element, the change is applied around a point directly in the horizontal and vertical middle — like the imaginary piece of string we saw in the earlier illustration. Using
transform-origin
, you can change this to any point in the element. Acceptable values are pairs of lengths, percentages or positional keywords (
top
,
right
, etc.). For example:

div {
   transform-origin: right top;
}

In our fifth example, you can see the same transformations applied to two elements, each of which has a different
transform-origin
value.

The element on the left has a transform-origin value of center center, and the one on the right has a value of right top.

The difference is clearly visible, but even more obvious if you pass the mouse over to see the transformation removed.

backface-visibility

Depending on which transformation functions you apply, sometimes you will move an element around until its front (or “face”) is angled away from you. When this happens, the default behavior is for the element to be shown in reverse; but if you use
backface-visibility
with a value of
hidden
, you’ll see nothing instead, not even a background color.

perspective and perspective-origin

We introduced the
perspective()
function earlier, but the
perspective
property takes the same values; the difference is that the property applies only to the children of the element that it’s used on, not the element itself.

The
perspective-origin
property changes the angle from which you view the element that’s being transformed. Like
transform-origin
, it accepts lengths, percentages or positional keywords, and the default position is the horizontal and vertical middle. The effect of changing the origin will be more pronounced the lower the
perspective
value is.

Conclusion

By necessity, we’ve flown through the intricacies of the 3D transformations syntax, but hopefully I’ve whetted your appetite to try it out yourself. With a certain amount of care for older browser versions, you can implement these properties in your own designs right now. If you don’t believe me, compare the list of “More adventures” on The Feed website that I built last year in a browser that supports 3D transforms and in one that doesn’t, and you’ll see what I mean.

Some of the concepts used in 3D transforms can be quite daunting, but experimentation will soon make them clear to you in practice, so get ahold of a browser that supports them and start making some cool stuff. But please, be responsible: not everything on the Web needs to be in three dimensions!

(Better) Tabs with Round Out Borders [by Chris Coyier]

admin — Tue, 10 Jan 2012 21:24:51 +0000

The following is a guest post by Menno van Slooten. You might notice we’ve been down this road before, but I quite like Menno’s approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements.

A good-looking tab control usually has one feature that I’ve always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS
:before
and
:after
pseudo elements to create this effect without using images. First, let’s start with some basic markup.

The markup

									
    Lorem
    Ipsum
    Sit amet
    Consectetur adipisicing

This would be about as basic as you can get. Not a lot of elements to work with here, but it will do.

Getting started

To get started, let’s get rid of the default

styling and get these babies in line.
- Lorem
- Ipsum
- Sit amet
- Consectetur adipisicing
```
									.tabrow {
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 24px;
}
.tabrow li {
    margin: 0 10px;
    padding: 0 10px;
    border: 1px solid #AAA;
    background: #ECECEC;
    display: inline-block;
}
								
```
Selecting a tab

The selected tab should of course be clearly visible.
- Lorem
- Ipsum
- Sit amet
- Consectetur adipisicing
```
									.tabrow li.selected {
    background: #FFF;
    color: #000;
}
								
```
Getting to the bottom of things

Every tab control needs a well-defined bottom edge. It won’t do much now, but later it will help emphasize the effect of the selected tab being on top.
- Lorem
- Ipsum
- Sit amet
- Consectetur adipisicing
```
									.tabrow {
    position: relative;
}
.tabrow:after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #AAA;
    z-index: 1;
}
								
```
Here we introduced our first
:after
pseudo-element. Basically,
:after
appends another child to an element. It’s not in the DOM (which is why it’s called a pseudo element), so it is not a real child but it is completely stylable, as long as you add some
content
, in this case a single space character.

In my opinion, the terms
:before
and
:after
are slightly confusing since the pseudo’s aren’t actually added before or after the element they apply to, but are inserted as children. This is also why you can’t apply
:before
and
:after
to elements that can’t contain children (“no content” elements), like

.

In this case, we use the pseudo element to create a bottom border that doesn’t influence the tabs’ positioning. We could have just put a bottom border on the

Textarea Auto Resize [by ImpressiveWebs]

admin — Tue, 10 Jan 2012 00:38:59 +0000

On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed.

It seemed like a simple task. After doing a search to see what types of plugins and scripts were floating around to do this, the examples I found seemed a little overly complex. While most solutions seemed to incorporate some complex math calculations, I thought of a better way.

Using a Hidden Clone Element

element will naturally stretch to fit the height of its content (assuming no floats or absolutely positioned elements are involved). So to get the height of the textarea, I just need to do the following:

Grab the content loaded into the textarea
Create an invisible clone div
Give the clone the same width and typographical properties as the textarea
Place the content into the clone
Get the height of the clone
Apply the height of the clone to the height of the textarea

The Code

One of the keys to this solution is the CSS. As mentioned, the invisible clone needs to have the same typographical properties as the textarea. Not only does this include stuff line
font-size
and
font-family
, but also the
white-space
and
word-wrap
properties of the clone need to be set to mimic what happens inside the textarea.

First here’s the CSS for the textarea:

textarea {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #444;
    padding: 5px;
}

.noscroll {
    overflow: hidden;
}

Take note that I’ve added a separate class with
overflow: hidden
, to prevent scrollbars from appearing. Normally this would not be a good thing to add to a textarea element, but because I’ll be resizing it with JavaScript, it’s fine. This class will be added to the textarea with JavaScript, to ensure that if JavaScript is turned off, the textarea will scroll normally.

Here is the CSS I’ll be applying to the hidden clone element:

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    padding: 5px;
    word-wrap: break-word;
}

A quick break-down: First, I set it to
display: none
because I don’t want it visible to the user. I believe this should be fine for screen readers, because I don’t want it read out to them either. If anyone has a better solution for hiding it for assistive devices, let me know.

I’ve also set the
white-space
property to a value of “pre-wrap”. This ensures that lines will wrap correctly, but everything else gets pre-formatted. I’ve also set the width to be equal to the textarea, and duplicated a few typographical properties. In both examples, I’m giving the clone and the textarea a
min-height
so it will always start out at a standard, usable height.

Now for the JavaScript (which is using jQuery, sorry):

$(function() {
	var txt = $('#comments'),
	hiddenDiv = $(document.createElement('div')),
	content = null;

	txt.addClass('noscroll');
	hiddenDiv.addClass('hiddendiv');

	$('body').append(hiddenDiv);

	txt.bind('keyup', function() {

	    content = txt.val();
	    content = content.replace(/\n/g, '
');
	    hiddenDiv.html(content);

	    txt.css('height', hiddenDiv.height());

	});
});

This code assumes we’re targeting a single textarea element on the page. If you need this to affect more than one element, then just change the first line inside the function that defines the element we’re working with.

I’m dynamically changing the height based on jQuery’s
keyup
event. You could easily change this to respond to an Ajax request instead, if you happen to be loading the content that way.

Using
keyup
, however, is a good solution because it’s the most likely reason that you’ll want to auto-resize a textarea — user-entered data.

What About IE6-8?

I almost didn’t write this article, because the code wasn’t working at all in IE6-8. The reason for this had to do with the poor way IE handles grabbing content using innerHTML. So after I had written this simple solution that seemed to work in all the newer browsers, I came across this jQuery plugin. That solution uses the exact same method that I’m using (the cloned element), and it worked (mostly) in IE.

So the line that I borrowed from that example that (mostly) fixed mine in IE was:

// fixes the IE innerHTML problem
content = content.replace(/\n/g, '
');

But even after adding this line, there was still an issue: Long, unbroken strings of text wouldn’t affect the height of the textarea (which isn’t a big problem, really). A simple fix was adding
word-wrap: break-word
to the CSS for the clone element.

Bugs? Problems?

Like the other solutions floating around, this could easily be turned into a plugin. In that case, I’d have to add a little more jQuery so that the characteristics of the clone element aren’t dependent on the CSS. Also, if the width of the textarea is fluid, then you’d have to use jQuery to grab that, and then apply it to the clone.

The solution I linked to in the previous section is just about perfect — you just need to add the
word-wrap
fix that I mentioned.

For a demo, you can view my JSFiddle using the link below. Just be sure to hit the “run” button before you test it. Let me know if you find any problems with it.

View Demo

Tutorials and snippets to get started with CoffeeScript [by CatsWhoCode]

admin — Mon, 09 Jan 2012 20:29:37 +0000

Tutorials and snippets to get started with CoffeeScript

Published on January 9th, 2012
by Jean-Baptiste Jung. 0 Comments -

JavaScript is definitely an important part of a website as it allow the developer to interact directly with the web browser. Since 2005, lots of new JavaScript techniques and tools such as Ajax and jQuery became extremely popular and made the web a better place. Today, I’m introducing to you CoffeeScript, a new language that make JavaScript better and simpler.

What is CoffeeScript?

To keep it simple, CoffeeScript is a little language that compiles into JavaScript. If you ever coded in languages such as Python or Ruby, you’ll probably love CoffeeScript a lot. Instead of awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart.

The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

Installing CoffeeScript

Installing CoffeeScript is not hard at all. The first thing to do is to make sure that you already installed a working copy of the latest stable version of Node.js as well as npm, the Node Package Manager.

Once done, you can install CoffeeScript by running the following command:

npm install -g coffee-script

CoffeeScript is now installed. Next step is to compile a
.coffee
file into a
.js
file. Use the following syntax to do so:

coffee --compile example.coffee

CoffeeScript.org is the official website of the CoffeeScript language. Don’t hesitate to visit it, it’s full of helpful ressources.

Tutorial: Basics of CoffeeScript

A great tutorial that demonstrate all you need to get started with CoffeeScript: installation, configuration and first lines of codes.
→ View tutorial

Tutorial: Rocking out with CoffeeScript

A very complete tutorial that will make you a real CoffeeScript coder: it will show you how to write your code, how to indent, how to use classes, conditionnal statements and more.
→ View tutorial

Tutorial: Creating an iOS-like Home Screen with CoffeeScript

Now, let’s code something concrete: this tutorial will show you how to create an iOS-like home screen, using CoffeeScript. A great way to learn by the example.
→ View tutorial

CoffeeScript snippet: Shorten url using Google’s Goo.gl service

Short urls are very useful, especially on social networking sites like Twitter. Want to be able to create your own short urls using Google goo;gl service? No problem, just use the following code. Please note that you’ll need your own Google API key for the code to work.

apikey = "YOUR GOOGLE API KEY GOES HERE"

shorten_url = (url, success_callback, error_callback) ->

  xhr = Titanium.Network.createHTTPClient()
  xhr.open "POST", "https://www.googleapis.com/urlshortener/v1/url?key=" + apikey
  xhr.setRequestHeader "Content-type", "application/json"
  xhr.onload = () -> success_callback xhr.status, xhr.responseText
  xhr.onerror = () -> error_callback xhr.status, xhr.responseText
  content =  "{\"longUrl\": \"#{url}\"}"
  xhr.send content

→ Source: http://developer.appcelerator.com/question/125880/…

CoffeScript snippet: Read in a file

CoffeeScript make reading files very easy, as shown below:

fs.readFile 'data.txt', (err, data) -> fileText = data

→ Source: http://ricardo.cc/2011/06/02/10-CoffeeScript-One-Liners-to-Impress-Your-Friends.html

CoffeScript snippet: Fetch and Parse a XML web service

Fetching and parsing XML or .json files from web services is quite common when coding modern web applications. Here is how you can do it using CoffeeScript:

request.get { uri:'path/to/api.json', json: true }, (err, r, body) -> results = body

→ Source: http://ricardo.cc/2011/06/02/10-CoffeeScript-One-Liners-to-Impress-Your-Friends.html

CoffeeScript snippet: Finding substrings

Another very common task, made easier with CoffeeScript:

message = "This is a test string. This has a repeat or two. This might even have a third."
message.indexOf "This", 0

→ Source: http://coffeescriptcookbook.com/chapters/strings/finding-substrings

Goksel Eryigit - Front-end Developer

Creating “Next Level” Search Form Using jQuery & CSS3 [Webstuffshare]

Simple Style

Cube Style

Cube Style With Animate

Conclusion

Build Awesome Apps with CSS3 Animations [sitepoint.com]

CSS3 Animations

Introduction

SVG

Declarations

Non-linear animations

Delay

Events

More about CSS3 animations

Browsers Support

CSS3 Animations JavaScript fallback library

Conclusion

Going further

Amazing things to do with PHP and cURL

Check if a specific website is available

cURL replacement for file_get_contents()

Get latest Twitter status

Twitter: test friendship between two users

Download and save images from a page using cURL

Convert currencies using cURl and Google

Get remote filesize using cURL

FTP upload with cURL

Developing a Responsive Website: The Footer

Implement Google Custom Search into WordPress [.net Magazine]

WordPress has a search function which has developers opinions split. Freelancer Paul Maloney shows us how to replace the search function with a super powered Google Custom Search engine

Advertisement

Creating a custom search engine

Building the results page

Creating the search page

Tweaking our custom search engine

Conclusion

Designing a Clean Website: Gradients [developerDrive]

Developing With The HTML5 Video Element

By Scott Stanton - November 23, 2011

Creating a PHP User Survey: Writing to Database Tables

By Gerald Hanks - November 22, 2011

An Introduction to HTML5's Video API Part 2

By Louis Lazaris - November 21, 2011

Adventures In The Third Dimension: CSS 3D Transforms [smashingmag]

The Third Dimension

A Quick Primer On Axes

Transformation Functions

Rotation

Translation

Scaling

Perspective

Other Properties

transform-style

transform-origin

backface-visibility

perspective and perspective-origin

Conclusion

(Better) Tabs with Round Out Borders [by Chris Coyier]

The markup

Getting started

Selecting a tab

Getting to the bottom of things

Above and beyond

Around the bends

Don’t be such a square

Cutting corners

Almost there

Pieces of flair

Textarea Auto Resize [by ImpressiveWebs]

Using a Hidden Clone Element

The Code

What About IE6-8?

Bugs? Problems?

Tutorials and snippets to get started with CoffeeScript [by CatsWhoCode]

What is CoffeeScript?

Installing CoffeeScript

Tutorial: Basics of CoffeeScript

Tutorial: Rocking out with CoffeeScript

Tutorial: Creating an iOS-like Home Screen with CoffeeScript