Read more here:
9 Useful PHP Functions and Features You Need to Know

Shared by 小董

的確很優~

1. Functions with Arbitrary Number of Arguments

You may already know that PHP allows you to define functions with optional arguments. But there is also a method for allowing completely arbitrary number of function arguments.

First, here is an example with just optional arguments:

// function with 2 optional arguments
function foo($arg1 = '', $arg2 = '') 

	echo "arg1: $arg1n";
	echo "arg2: $arg2n";

foo('hello','world');
/* prints:
arg1: hello
arg2: world
*/

foo();
/* prints:
arg1:
arg2:
*/

Now, let’s see how we can build a function that accepts any number of arguments. This time we are going to utilize func_get_args():

// yes, the argument list can be empty
function foo() 

	// returns an array of all passed arguments
	$args = func_get_args();

	foreach ($args as $k => $v)
		echo "arg".($k+1).": $vn";

}

foo();
/* prints nothing */

foo('hello');
/* prints
arg1: hello
*/

foo('hello', 'world', 'again');
/* prints
arg1: hello
arg2: world
arg3: again
*/

2. Using Glob() to Find Files

Many PHP functions have long and descriptive names. However it may be hard to tell what a function named glob() does unless you are already familiar with that term from elsewhere.

Think of it like a more capable version of the scandir() function. It can let you search for files by using patterns.

// get all php files
$files = glob('*.php');

print_r($files);
/* output looks like:
Array
(
    0 => phptest.php
    1 => pi.php
    2 => post_output.php
    3 => test.php
)
*/

You can fetch multiple file types like this:

// get all php files AND txt files
$files = glob('*.php,txt', GLOB_BRACE);

print_r($files);
/* output looks like:
Array
(
    0 => phptest.php
    1 => pi.php
    2 => post_output.php
    3 => test.php
    4 => log.txt
    5 => test.txt
)
*/

Note that the files can actually be returned with a path, depending on your query:

$files = glob('../images/a*.jpg');

print_r($files);
/* output looks like:
Array
(
    0 => ../images/apple.jpg
    1 => ../images/art.jpg
)
*/

If you want to get the full path to each file, you can just call the realpath() function on the returned values:

$files = glob('../images/a*.jpg');

// applies the function to each array element
$files = array_map('realpath',$files);

print_r($files);
/* output looks like:
Array
(
    0 => C:wampwwwimagesapple.jpg
    1 => C:wampwwwimagesart.jpg
)
*/

3. Memory Usage Information

By observing the memory usage of your scripts, you may be able optimize your code better.

PHP has a garbage collector and a pretty complex memory manager. The amount of memory being used by your script. can go up and down during the execution of a script. To get the current memory usage, we can use the memory_get_usage() function, and to get the highest amount of memory used at any point, we can use the memory_get_peak_usage() function.

echo "Initial: ".memory_get_usage()." bytes n";
/* prints
Initial: 361400 bytes
*/

// let's use up some memory
for ($i = 0; $i < 100000; $i++)
	$array []= md5($i);

// let's remove half of the array
for ($i = 0; $i < 100000; $i++)
	unset($array$i);

echo "Final: ".memory_get_usage()." bytes n";
/* prints
Final: 885912 bytes
*/

echo "Peak: ".memory_get_peak_usage()." bytes n";
/* prints
Peak: 13687072 bytes
*/

4. CPU Usage Information

For this, we are going to utilize the getrusage() function. Keep in mind that this is not available on Windows platforms.

print_r(getrusage());
/* prints
Array
(
    ru_oublock => 0
    ru_inblock => 0
    ru_msgsnd => 2
    ru_msgrcv => 3
    ru_maxrss => 12692
    ru_ixrss => 764
    ru_idrss => 3864
    ru_minflt => 94
    ru_majflt => 0
    ru_nsignals => 1
    ru_nvcsw => 67
    ru_nivcsw => 4
    ru_nswap => 0
    ru_utime.tv_usec => 0
    ru_utime.tv_sec => 0
    ru_stime.tv_usec => 6269
    ru_stime.tv_sec => 0
)

*/

That may look a bit cryptic unless you already have a system administration background. Here is the explanation of each value (you don’t need to memorize these):

• ru_oublock: block output operations
• ru_inblock: block input operations
• ru_msgsnd: messages sent
• ru_msgrcv: messages received
• ru_maxrss: maximum resident set size
• ru_ixrss: integral shared memory size
• ru_idrss: integral unshared data size
• ru_minflt: page reclaims
• ru_majflt: page faults
• ru_nsignals: signals received
• ru_nvcsw: voluntary context switches
• ru_nivcsw: involuntary context switches
• ru_nswap: swaps
• ru_utime.tv_usec: user time used (microseconds)
• ru_utime.tv_sec: user time used (seconds)
• ru_stime.tv_usec: system time used (microseconds)
• ru_stime.tv_sec: system time used (seconds)

To see how much CPU power the script has consumed, we need to look at the ‘user time’ and ‘system time’ values. The seconds and microseconds portions are provided separately by default. You can divide the microseconds value by 1 million, and add it to the seconds value, to get the total seconds as a decimal number.

Let’s see an example:

// sleep for 3 seconds (non-busy)
sleep(3);

$data = getrusage();
echo "User time: ".
	($data'ru_utime.tv_sec' +
	$data'ru_utime.tv_usec' / 1000000);
echo "System time: ".
	($data'ru_stime.tv_sec' +
	$data'ru_stime.tv_usec' / 1000000);

/* prints
User time: 0.011552
System time: 0
*/

Even though the script took about 3 seconds to run, the CPU usage was very very low. Because during the sleep operation, the script actually does not consume CPU resources. There are many other tasks that may take real time, but may not use CPU time, like waiting for disk operations. So as you see, the CPU usage and the actual length of the runtime are not always the same.

Here is another example:

// loop 10 million times (busy)
for($i=0;$i<10000000;$i++) 

$data = getrusage();
echo "User time: ".
	($data'ru_utime.tv_sec' +
	$data'ru_utime.tv_usec' / 1000000);
echo "System time: ".
	($data'ru_stime.tv_sec' +
	$data'ru_stime.tv_usec' / 1000000);

/* prints
User time: 1.424592
System time: 0.004204
*/

That took about 1.4 seconds of CPU time, almost all of which was user time, since there were no system calls.

System Time is the amount of time the CPU spends performing system calls for the kernel on the program’s behalf. Here is an example of that:

$start = microtime(true);
// keep calling microtime for about 3 seconds
while(microtime(true) - $start < 3) 

$data = getrusage();
echo "User time: ".
	($data'ru_utime.tv_sec' +
	$data'ru_utime.tv_usec' / 1000000);
echo "System time: ".
	($data'ru_stime.tv_sec' +
	$data'ru_stime.tv_usec' / 1000000);

/* prints
User time: 1.088171
System time: 1.675315
*/

Now we have quite a bit of system time usage. This is because the script calls the microtime() function many times, which performs a request through the operating system to fetch the time.

Also you may notice the numbers do not quite add up to 3 seconds. This is because there were probably other processes on the server as well, and the script was not using 100% CPU for the whole duration of the 3 seconds.

5. Magic Constants

PHP provides useful magic constants for fetching the current line number (__LINE__), file path (__FILE__), directory path (__DIR__), function name (__FUNCTION__), class name (__CLASS__), method name (__METHOD__) and namespace (__NAMESPACE__).

We are not going to cover each one of these in this article, but I will show you a few use cases.

When including other scripts, it is a good idea to utilize the __FILE__ constant (or also __DIR__ since PHP 5.3):

// this is relative to the loaded script's path
// it may cause problems when running scripts from different directories
require_once('config/database.php');

// this is always relative to this file's path
// no matter where it was included from
require_once(dirname(__FILE__) . '/config/database.php');

Using __LINE__ makes debugging easier. You can track down the line numbers:

// some code
// ...
my_debug("some debug message", __LINE__);
/* prints
Line 4: some debug message
*/

// some more code
// ...
my_debug("another debug message", __LINE__);
/* prints
Line 11: another debug message
*/

function my_debug($msg, $line)
	echo "Line $line: $msgn";

6. Generating Unique ID’s

There may be situations where you need to generate a unique string. I have seen many people use the md5() function for this, even though it’s not exactly meant for this purpose:

// generate unique string
echo md5(time() . mt_rand(1,1000000));

There is actually a PHP function named uniqid() that is meant to be used for this.

// generate unique string
echo uniqid();
/* prints
4bd67c947233e
*/

// generate another unique string
echo uniqid();
/* prints
4bd67c9472340
*/

You may notice that even though the strings are unique, they seem similar for the first several characters. This is because the generated string is related to the server time. This actually has a nice side effect, as every new generated id comes later in alphabetical order, so they can be sorted.

To reduce the chances of getting a duplicate, you can pass a prefix, or the second parameter to increase entropy:

// with prefix
echo uniqid('foo_');
/* prints
foo_4bd67d6cd8b8f
*/

// with more entropy
echo uniqid('',true);
/* prints
4bd67d6cd8b926.12135106
*/

// both
echo uniqid('bar_',true);
/* prints
bar_4bd67da367b650.43684647
*/

This function will generate shorter strings than md5(), which will also save you some space.

7. Serialization

Did you ever need to store a complex variable in a database or a text file? You do not have to come up with a fancy solution to convert your arrays or objects into formatted strings, as PHP already has functions for this purpose.

There are two popular methods of serializing variables. Here is an example that uses the serialize() and unserialize():

// a complex array
$myvar = array(
	'hello',
	42,
	array(1,'two'),
	'apple'
);

// convert to a string
$string = serialize($myvar);

echo $string;
/* prints
a:4:i:0;s:5:"hello";i:1;i:42;i:2;a:2:i:0;i:1;i:1;s:3:"two";i:3;s:5:"apple";}
*/

// you can reproduce the original variable
$newvar = unserialize($string);

print_r($newvar);
/* prints
Array
(
    0 => hello
    1 => 42
    2 => Array
        (
            0 => 1
            1 => two
        )

    3 => apple
)
*/

This was the native PHP serialization method. However, since JSON has become so popular in recent years, they decided to add support for it in PHP 5.2. Now you can use the json_encode() and json_decode() functions as well:

// a complex array
$myvar = array(
	'hello',
	42,
	array(1,'two'),
	'apple'
);

// convert to a string
$string = json_encode($myvar);

echo $string;
/* prints
"hello",42,,"apple"]
*/

// you can reproduce the original variable
$newvar = json_decode($string);

print_r($newvar);
/* prints
Array
(
    0 => hello
    1 => 42
    2 => Array
        (
            0 => 1
            1 => two
        )

    3 => apple
)
*/

It is more compact, and best of all, compatible with javascript and many other languages. However, for complex objects, some information may be lost.

8. Compressing Strings

When talking about compression, we usually think about files, such as ZIP archives. It is possible to compress long strings in PHP, without involving any archive files.

In the following example we are going to utilize the gzcompress() and gzuncompress() functions:

$string =
"Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc ut elit id mi ultricies
adipiscing. Nulla facilisi. Praesent pulvinar,
sapien vel feugiat vestibulum, nulla dui pretium orci,
non ultricies elit lacus quis ante. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Aliquam
pretium ullamcorper urna quis iaculis. Etiam ac massa
sed turpis tempor luctus. Curabitur sed nibh eu elit
mollis congue. Praesent ipsum diam, consectetur vitae
ornare a, aliquam a nunc. In id magna pellentesque
tellus posuere adipiscing. Sed non mi metus, at lacinia
augue. Sed magna nisi, ornare in mollis in, mollis
sed nunc. Etiam at justo in leo congue mollis.
Nullam in neque eget metus hendrerit scelerisque
eu non enim. Ut malesuada lacus eu nulla bibendum
id euismod urna sodales. ";

$compressed = gzcompress($string);

echo "Original size: ". strlen($string)."n";
/* prints
Original size: 800
*/

echo "Compressed size: ". strlen($compressed)."n";
/* prints
Compressed size: 418
*/

// getting it back
$original = gzuncompress($compressed);

We were able to achive almost 50% size reduction. Also the functions gzencode() and gzdecode() achive similar results, by using a different compression algorithm.

9. Register Shutdown Function

There is a function called register_shutdown_function(), which will let you execute some code right before the script finishes running.

Imagine that you want to capture some benchmark statistics at the end of your script execution, such as how long it took to run:

// capture the start time
$start_time = microtime(true);

// do some stuff
// ...

// display how long the script took
echo "execution took: ".
		(microtime(true) - $start_time).
		" seconds.";

At first this may seem trivial. You just add the code to the very bottom of the script and it runs before it finishes. However, if you ever call the exit() function, that code will never run. Also, if there is a fatal error, or if the script is terminated by the user (by pressing the Stop button in the browser), again it may not run.

When you use register_shutdown_function(), your code will execute no matter why the script has stopped running:

$start_time = microtime(true);

register_shutdown_function('my_shutdown');

// do some stuff
// ...

function my_shutdown()
	global $start_time;

	echo "execution took: ".
			(microtime(true) - $start_time).
			" seconds.";

Conclusion

Do you know any other PHP features that are not widely known but can be very useful? Please share with us in the comments. And thank you for reading!

Read the original here:
Object-Oriented PHP for Beginners

Shared by 小董

會利用物件導向的確可以省很多事 但誤用會多更多事

For many PHP programmers, object-oriented programming is a frightening concept, full of complicated syntax and other roadblocks. As detailed in my book, Pro PHP and jQuery, you’ll learn the concepts behind object-oriented programming (OOP), a style of coding in which related actions are grouped into classes to aid in creating more-compact, effective code.

Understanding Object-Oriented Programming

Object-oriented programming is a style of coding that allows developers to group similar tasks into classes. This helps keep code following the tenet “don’t repeat yourself” (DRY) and easy-to-maintain.

“Object-oriented programming is a style of coding that allows developers to group similar tasks into classes.”

One of the major benefits of DRY programming is that, if a piece of information changes in your program, usually only one change is required to update the code. One of the biggest nightmares for developers is maintaining code where data is declared over and over again, meaning any changes to the program become an infinitely more frustrating game of Where’s Waldo? as they hunt for duplicated data and functionality.

OOP is intimidating to a lot of developers because it introduces new syntax and, at a glance, appears to be far more complex than simple procedural, or inline, code. However, upon closer inspection, OOP is actually a very straightforward and ultimately simpler approach to programming.

Understanding Objects and Classes

Before you can get too deep into the finer points of OOP, a basic understanding of the differences between objects and classes is necessary. This section will go over the building blocks of classes, their different capabilities, and some of their uses.

Recognizing the Differences Between Objects and Classes

Photos by Instant Jefferson and John Wardell

“Developers start talking about objects and classes, and they appear to be interchangeable terms. This is not the case, however.”

Right off the bat, there’s confusion in OOP: seasoned developers start talking about objects and classes, and they appear to be interchangeable terms. This is not the case, however, though the difference can be tough to wrap your head around at first.

A class, for example, is like a blueprint for a house. It defines the shape of the house on paper, with relationships between the different parts of the house clearly defined and planned out, even though the house doesn’t exist.

An object, then, is like the actual house built according to that blueprint. The data stored in the object is like the wood, wires, and concrete that compose the house: without being assembled according to the blueprint, it’s just a pile of stuff. However, when it all comes together, it becomes an organized, useful house.

Classes form the structure of data and actions and use that information to build objects. More than one object can be built from the same class at the same time, each one independent of the others. Continuing with our construction analogy, it’s similar to the way an entire subdivision can be built from the same blueprint: 150 different houses that all look the same but have different
families and decorations inside.

Structuring Classes

The syntax to create a class is pretty straightforward: declare a class using the class keyword, followed by the name of the class and a set of curly braces ({}):

< ?php

class MyClass

    // Class properties and methods go here

?>

After creating the class, a new class can be instantiated and stored in a variable using the new keyword:

$obj = new MyClass;

To see the contents of the class, use var_dump():

var_dump($obj);

Try out this process by putting all the preceding code in a new file called test.php in your local testing folder:

< ?php

class MyClass

	// Class properties and methods go here

$obj = new MyClass;

var_dump($obj);

?>

Load the page in your browser at http://localhost/test.php and the following should display:

object(MyClass)#1 (0)

In its simplest form, you’ve just completed your first OOP script.

Defining Class Properties

To add data to a class, properties, or class-specific variables, are used. These work exactly like regular variables, except they’re bound to the object and therefore can only be accessed using the object.

To add a property to MyClass, add the following code to your script:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

$obj = new MyClass;

var_dump($obj);

?>

The keyword public determines the visibility of the property, which you’ll learn about a little later in this chapter. Next, the property is named using standard variable syntax, and a value is assigned (though class properties do not need an initial value).

To read this property and output it to the browser, reference the object from which to read and the property to be read:

echo $obj->prop1;

Because multiple instances of a class can exist, if the individual object is not referenced, the script would be unable to determine which object to read from. The use of the arrow (->) is an OOP construct that accesses the contained properties and methods of a given object.

Modify the script in test.php to read out the property rather than dumping the whole class by modifying the code as shown:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

$obj = new MyClass;

echo $obj->prop1; // Output the property

?>

Reloading your browser now outputs the following:

I'm a class property!

Defining Class Methods

Methods are class-specific functions. Individual actions that an object will be able to perform are defined within the class as methods.

For instance, to create methods that would set and get the value of the class property $prop1, add the following to your code:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

$obj = new MyClass;

echo $obj->prop1;

?>

Note — OOP allows objects to reference themselves using $this. When working within a method, use $this in the same way you would use the object name outside the class.

To use these methods, call them just like regular functions, but first, reference the object they belong to. Read the property from MyClass, change its value, and read it out again by making the modifications below:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

$obj = new MyClass;

echo $obj->getProperty(); // Get the property value

$obj->setProperty("I'm a new property value!"); // Set a new one

echo $obj->getProperty(); // Read it out again to show the change

?>

Reload your browser, and you’ll see the following:

I'm a class property!
I'm a new property value!

“The power of OOP becomes apparent when using multiple instances of the
same class.”

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

// Create two objects
$obj = new MyClass;
$obj2 = new MyClass;

// Get the value of $prop1 from both objects
echo $obj->getProperty();
echo $obj2->getProperty();

// Set new values for both objects
$obj->setProperty("I'm a new property value!");
$obj2->setProperty("I belong to the second instance!");

// Output both objects' $prop1 value
echo $obj->getProperty();
echo $obj2->getProperty();

?>

When you load the results in your browser, they read as follows:

I'm a class property!
I'm a class property!
I'm a new property value!
I belong to the second instance!

As you can see, OOP keeps objects as separate entities, which makes for easy separation of different pieces of code into small, related bundles.

Magic Methods in OOP

To make the use of objects easier, PHP also provides a number of magic methods, or special methods that are called when certain common actions occur within objects. This allows developers to perform a number of useful tasks with relative ease.

Using Constructors and Destructors

When an object is instantiated, it’s often desirable to set a few things right off the bat. To handle this, PHP provides the magic method __construct(), which is called automatically whenever a new object is
created.

For the purpose of illustrating the concept of constructors, add a constructor to MyClass that will output a message whenever a new instance of the class is created:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

// Create a new object
$obj = new MyClass;

// Get the value of $prop1
echo $obj->getProperty();

// Output a message at the end of the file
echo "End of file.";

?>

Note — __CLASS__ returns the name of the class in which it is called; this is what is known as a magic constant. There are several available magic constants, which you can read more about in the PHP manual.

Reloading the file in your browser will produce the following result:

The class "MyClass" was initiated!
I'm a class property!
End of file.

To call a function when the object is destroyed, the __destruct() magic method is available. This is useful for class cleanup (closing a database connection, for instance).

Output a message when the object is destroyed by defining the magic method
__destruct() in MyClass:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

// Create a new object
$obj = new MyClass;

// Get the value of $prop1
echo $obj->getProperty();

// Output a message at the end of the file
echo "End of file.";

?>

With a destructor defined, reloading the test file results in the following output:

The class "MyClass" was initiated!
I'm a class property!
End of file.
The class "MyClass" was destroyed.

“When the end of a file is reached, PHP automatically releases all resources.”

To explicitly trigger the destructor, you can destroy the object using the
function unset():

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

// Create a new object
$obj = new MyClass;

// Get the value of $prop1
echo $obj->getProperty();

// Destroy the object
unset($obj);

// Output a message at the end of the file
echo "End of file.";

?>

Now the result changes to the following when loaded in your browser:

The class "MyClass" was initiated!
I'm a class property!
The class "MyClass" was destroyed.
End of file.

Converting to a String

To avoid an error if a script attempts to output MyClass as a string, another magic method is used called __toString().

Without __toString(), attempting to output the object as a string results in a fatal error. Attempt to use echo to output the object without a magic method in place:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

// Create a new object
$obj = new MyClass;

// Output the object as a string
echo $obj;

// Destroy the object
unset($obj);

// Output a message at the end of the file
echo "End of file.";

?>

This results in the following:

The class "MyClass" was initiated!

Catchable fatal error: Object of class MyClass could not be converted to string in /Applications/XAMPP/xamppfiles/htdocs/testing/test.php on line 40

To avoid this error, add a __toString() method:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function __toString()

        echo "Using the toString method: ";
        return $this->getProperty();

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

// Create a new object
$obj = new MyClass;

// Output the object as a string
echo $obj;

// Destroy the object
unset($obj);

// Output a message at the end of the file
echo "End of file.";

?>

In this case, attempting to convert the object to a string results in a call to the getProperty() method. Load the test script in your browser to see the result:

The class "MyClass" was initiated!
Using the toString method: I'm a class property!
The class "MyClass" was destroyed.
End of file.

Tip — In addition to the magic methods discussed in this section, several others are available. For a complete list of magic methods, see the PHP manual page.

Using Class Inheritance

Classes can inherit the methods and properties of another class using the extends keyword. For instance, to create a second class that extends MyClass and adds a method, you would add the following to your test file:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function __toString()

        echo "Using the toString method: ";
        return $this->getProperty();

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

class MyOtherClass extends MyClass

    public function newMethod()

        echo "From a new method in " . __CLASS__ . ".";

}

// Create a new object
$newobj = new MyOtherClass;

// Output the object as a string
echo $newobj->newMethod();

// Use a method from the parent class
echo $newobj->getProperty();

?>

Upon reloading the test file in your browser, the following is output:

The class "MyClass" was initiated!
From a new method in MyOtherClass.
I'm a class property!
The class "MyClass" was destroyed.

Overwriting Inherited Properties and Methods

To change the behavior of an existing property or method in the new class, you can simply overwrite it by declaring it again in the new class:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function __toString()

        echo "Using the toString method: ";
        return $this->getProperty();

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

class MyOtherClass extends MyClass

    public function __construct()

        echo "A new constructor in " . __CLASS__ . ".";

    public function newMethod()

        echo "From a new method in " . __CLASS__ . ".";

}

// Create a new object
$newobj = new MyOtherClass;

// Output the object as a string
echo $newobj->newMethod();

// Use a method from the parent class
echo $newobj->getProperty();

?>

This changes the output in the browser to:

A new constructor in MyOtherClass.
From a new method in MyOtherClass.
I'm a class property!
The class "MyClass" was destroyed.

Preserving Original Method Functionality While Overwriting Methods

To add new functionality to an inherited method while keeping the original method intact, use the parent keyword with the scope resolution operator (::):

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function __toString()

        echo "Using the toString method: ";
        return $this->getProperty();

    public function setProperty($newval)

        $this->prop1 = $newval;

    public function getProperty()

        return $this->prop1 . "";

}

class MyOtherClass extends MyClass

    public function __construct()

        parent::__construct(); // Call the parent class's constructor
        echo "A new constructor in " . __CLASS__ . ".";

    public function newMethod()

        echo "From a new method in " . __CLASS__ . ".";

}

// Create a new object
$newobj = new MyOtherClass;

// Output the object as a string
echo $newobj->newMethod();

// Use a method from the parent class
echo $newobj->getProperty();

?>

This outputs the result of both the parent constructor and the new class’s constructor:

The class "MyClass" was initiated!
A new constructor in MyOtherClass.
From a new method in MyOtherClass.
I'm a class property!
The class "MyClass" was destroyed.

Assigning the Visibility of Properties and Methods

For added control over objects, methods and properties are assigned visibility. This controls how and from where properties and methods can be accessed. There are three visibility keywords: public, protected, and private. In addition to its visibility, a method or property can be declared as static, which allows them to be accessed without an instantiation of the class.

“For added control over objects, methods and properties are assigned visibility.”

Note — Visibility is a new feature as of PHP 5. For information on OOP compatibility with PHP 4, see the PHP manual page.

Public Properties and Methods

All the methods and properties you’ve used so far have been public. This means that they can be accessed anywhere, both within the class and externally.

Protected Properties and Methods

When a property or method is declared protected, it can only be accessed within the class itself or in descendant classes (classes that extend the class containing the protected method).

Declare the getProperty() method as protected in MyClass and try to access it directly from outside the class:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function __toString()

        echo "Using the toString method: ";
        return $this->getProperty();

    public function setProperty($newval)

        $this->prop1 = $newval;

    protected function getProperty()

        return $this->prop1 . "";

}

class MyOtherClass extends MyClass

    public function __construct()

        parent::__construct();
		echo "A new constructor in " . __CLASS__ . ".";

    public function newMethod()

        echo "From a new method in " . __CLASS__ . ".";

}

// Create a new object
$newobj = new MyOtherClass;

// Attempt to call a protected method
echo $newobj->getProperty();

?>

Upon attempting to run this script, the following error shows up:

The class "MyClass" was initiated!
A new constructor in MyOtherClass.

Fatal error: Call to protected method MyClass::getProperty() from context '' in /Applications/XAMPP/xamppfiles/htdocs/testing/test.php on line 55

Now, create a new method in MyOtherClass to call the getProperty() method:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function __toString()

        echo "Using the toString method: ";
        return $this->getProperty();

    public function setProperty($newval)

        $this->prop1 = $newval;

    protected function getProperty()

        return $this->prop1 . "";

}

class MyOtherClass extends MyClass

    public function __construct()

        parent::__construct();
		echo "A new constructor in " . __CLASS__ . ".";

    public function newMethod()

        echo "From a new method in " . __CLASS__ . ".";

    public function callProtected()

        return $this->getProperty();

}

// Create a new object
$newobj = new MyOtherClass;

// Call the protected method from within a public method
echo $newobj->callProtected();

?>

This generates the desired result:

The class "MyClass" was initiated!
A new constructor in MyOtherClass.
I'm a class property!
The class "MyClass" was destroyed.

Private Properties and Methods

A property or method declared private is accessible only from within the class that defines it. This means that even if a new class extends the class that defines a private property, that property or method will not be available at all within the child class.

To demonstrate this, declare getProperty() as private in MyClass, and attempt to call callProtected() from
MyOtherClass:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function __toString()

        echo "Using the toString method: ";
        return $this->getProperty();

    public function setProperty($newval)

        $this->prop1 = $newval;

    private function getProperty()

        return $this->prop1 . "";

}

class MyOtherClass extends MyClass

    public function __construct()

        parent::__construct();
        echo "A new constructor in " . __CLASS__ . ".";

    public function newMethod()

        echo "From a new method in " . __CLASS__ . ".";

    public function callProtected()

        return $this->getProperty();

}

// Create a new object
$newobj = new MyOtherClass;

// Use a method from the parent class
echo $newobj->callProtected();

?>

Reload your browser, and the following error appears:

The class "MyClass" was initiated!
A new constructor in MyOtherClass.

Fatal error: Call to private method MyClass::getProperty() from context 'MyOtherClass' in /Applications/XAMPP/xamppfiles/htdocs/testing/test.php on line 49

Static Properties and Methods

A method or property declared static can be accessed without first instantiating the class; you simply supply the class name, scope resolution operator, and the property or method name.

“One of the major benefits to using static properties is that they keep their stored values for the duration of the script.”

To demonstrate this, add a static property called $count and a static method called plusOne() to MyClass. Then set up a do...while loop to output the incremented value of $count as long as the value is less than 10:

< ?php

class MyClass

    public $prop1 = "I'm a class property!";

    public static $count = 0;

    public function __construct()

        echo 'The class "', __CLASS__, '" was initiated!';

    public function __destruct()

        echo 'The class "', __CLASS__, '" was destroyed.';

    public function __toString()

        echo "Using the toString method: ";
        return $this->getProperty();

    public function setProperty($newval)

        $this->prop1 = $newval;

    private function getProperty()

        return $this->prop1 . "";

    public static function plusOne()

        return "The count is " . ++self::$count . ".";

}

class MyOtherClass extends MyClass

    public function __construct()

        parent::__construct();
        echo "A new constructor in " . __CLASS__ . ".";

    public function newMethod()

        echo "From a new method in " . __CLASS__ . ".";

    public function callProtected()

        return $this->getProperty();

}

do

    // Call plusOne without instantiating MyClass
    echo MyClass::plusOne();
 while ( MyClass::$count < 10 );

?>

Note — When accessing static properties, the dollar sign
($) comes after the scope resolution operator.

When you load this script in your browser, the following is output:

The count is 1.
The count is 2.
The count is 3.
The count is 4.
The count is 5.
The count is 6.
The count is 7.
The count is 8.
The count is 9.
The count is 10.

Commenting with DocBlocks

“The DocBlock commenting style is a widely
accepted method of documenting classes.”

While not an official part of OOP, the DocBlock commenting style is a widely accepted method of documenting classes. Aside from providing a standard for
developers to use when writing code, it has also been adopted by many of the most popular software development kits (SDKs), such as Eclipse and NetBeans, and will be used to generate code hints.

A DocBlock is defined by using a block comment that starts with an additional asterisk:

/**
 * This is a very basic DocBlock
 */

The real power of DocBlocks comes with the ability to use tags, which start with an at symbol (@) immediately followed by the tag name and the value of the tag. DocBlock tags allow developers to define authors of a file, the license for a class, the property or method information, and other useful information.

The most common tags used follow:

• @author: The author of the current element (which might be a class, file, method, or any bit of code) are listed using this tag. Multiple author tags can be used in the same DocBlock if more than one author is credited. The format for the author name is John Doe .
• @copyright: This signifies the copyright year and name of the copyright holder for the current element. The format is 2010 Copyright Holder.
• @license: This links to the license for the current element. The format for the license information is
  http://www.example.com/path/to/license.txt License Name.
• @var: This holds the type and description of a variable or class property. The format is type element description.
• @param: This tag shows the type and description of a function or method parameter. The format is type $element_name element description.
• @return: The type and description of the return value of a function or method are provided in this tag. The format is type return element description.

A sample class commented with DocBlocks might look like this:

< ?php

/**
 * A simple class
 *
 * This is the long description for this class,
 * which can span as many lines as needed. It is
 * not required, whereas the short description is
 * necessary.
 *
 * It can also span multiple paragraphs if the
 * description merits that much verbiage.
 *
 * @author Jason Lengstorf 
 * @copyright 2010 Ennui Design
 * @license http://www.php.net/license/3_01.txt PHP License 3.01
 */
class SimpleClass

    /**
     * A public variable
     *
     * @var string stores data for the class
     */
    public $foo;

    /**
     * Sets $foo to a new value upon class instantiation
     *
     * @param string $val a value required for the class
     * @return void
     */
    public function __construct($val)

        $this->foo = $val;

    /**
     * Multiplies two integers
     *
     * Accepts a pair of integers and returns the
     * product of the two.
     *
     * @param int $bat a number to be multiplied
     * @param int $baz a number to be multiplied
     * @return int the product of the two parameters
     */
    public function bar($bat, $baz)

        return $bat * $baz;

}

?>

Once you scan the preceding class, the benefits of DocBlock are apparent: everything is clearly defined so that the next developer can pick up the code and never have to wonder what a snippet of code does or what it should contain.

Comparing Object-Oriented and Procedural Code

There’s not really a right and wrong way to write code. That being said, this section outlines a strong argument for adopting an object-oriented approach in software development, especially in large applications.

Reason 1: Ease of Implementation

“While it may be daunting at first, OOP actually provides an easier approach to dealing with data.”

While it may be daunting at first, OOP actually provides an easier approach to dealing with data. Because an object can store data internally, variables don’t need to be passed from function to function to work properly.

Also, because multiple instances of the same class can exist simultaneously, dealing with large data sets is infinitely easier. For instance, imagine you have two people’s information being processed in a file. They need names, occupations, and ages.

The Procedural Approach

Here’s the procedural approach to our example:

< ?php

function changeJob($person, $newjob)

    $person'job' = $newjob; // Change the person's job
    return $person;

function happyBirthday($person)

    ++$person'age'; // Add 1 to the person's age
    return $person;

$person1 = array(
    'name' => 'Tom',
    'job' => 'Button-Pusher',
    'age' => 34
);

$person2 = array(
    'name' => 'John',
    'job' => 'Lever-Puller',
    'age' => 41
);

// Output the starting values for the people
echo "

Person 1: ", print_r($person1, TRUE), "

“;
echo “

Person 2: ", print_r($person2, TRUE), "

“;

// Tom got a promotion and had a birthday
$person1 = changeJob($person1, 'Box-Mover');
$person1 = happyBirthday($person1);

// John just had a birthday
$person2 = happyBirthday($person2);

// Output the new values for the people
echo “

Person 1: ", print_r($person1, TRUE), "

“;
echo “

Person 2: ", print_r($person2, TRUE), "

“;

?>

When executed, the code outputs the following:

Person 1: Array
(
    name => Tom
    job => Button-Pusher
    age => 34
)
Person 2: Array
(
    name => John
    job => Lever-Puller
    age => 41
)
Person 1: Array
(
    name => Tom
    job => Box-Mover
    age => 35
)
Person 2: Array
(
    name => John
    job => Lever-Puller
    age => 42
)

While this code isn’t necessarily bad, there’s a lot to keep in mind while coding. The array of the affected person’s attributes must be passed and returned from each function call, which leaves margin for error.

To clean up this example, it would be desirable to leave as few things up to the developer as possible. Only absolutely essential information for the current operation should need to be passed to the functions.

This is where OOP steps in and helps you clean things up.

The OOP Approach

Here’s the OOP approach to our example:

< ?php

class Person

    private $_name;
    private $_job;
    private $_age;

    public function __construct($name, $job, $age)

        $this->_name = $name;
        $this->_job = $job;
        $this->_age = $age;

    public function changeJob($newjob)

        $this->_job = $newjob;

    public function happyBirthday()

        ++$this->_age;

}

// Create two new people
$person1 = new Person("Tom", "Button-Pusher", 34);
$person2 = new Person("John", "Lever Puller", 41);

// Output their starting point
echo "

Person 1: ", print_r($person1, TRUE), "

“;
echo “

Person 2: ", print_r($person2, TRUE), "

“;

// Give Tom a promotion and a birthday
$person1->changeJob(“Box-Mover”);
$person1->happyBirthday();

// John just gets a year older
$person2->happyBirthday();

// Output the ending values
echo “

Person 1: ", print_r($person1, TRUE), "

“;
echo “

Person 2: ", print_r($person2, TRUE), "

“;

?>

This outputs the following in the browser:

Person 1: Person Object
(
    _name:private => Tom
    _job:private => Button-Pusher
    _age:private => 34
)

Person 2: Person Object
(
    _name:private => John
    _job:private => Lever Puller
    _age:private => 41
)

Person 1: Person Object
(
    _name:private => Tom
    _job:private => Box-Mover
    _age:private => 35
)

Person 2: Person Object
(
    _name:private => John
    _job:private => Lever Puller
    _age:private => 42
)

There’s a little bit more setup involved to make the approach object oriented, but after the class is defined, creating and modifying people is a breeze; a person’s information does not need to be passed or returned from methods, and only absolutely essential information is passed to each method.

“OOP will significantly reduce your workload if implemented properly.”

On the small scale, this difference may not seem like much, but as your applications grow in size, OOP will significantly reduce your workload if implemented properly.

Tip — Not everything needs to be object oriented. A quick function that handles something small in one place inside the application does not necessarily need to be wrapped in a class. Use your best judgment when deciding between object-oriented and procedural approaches.

Reason 2: Better Organization

Another benefit of OOP is how well it lends itself to being easily packaged and cataloged. Each class can generally be kept in its own separate file, and if a uniform naming convention is used, accessing the classes is extremely simple.

Assume you’ve got an application with 150 classes that are called dynamically through a controller file at the root of your application filesystem. All 150 classes follow the naming convention class.classname.inc.php and reside in the inc folder of your application.

The controller can implement PHP’s __autoload() function to dynamically pull in only the classes it needs as they are called, rather than including all 150 in the controller file just in case or coming up with some clever way of including the files in your own code:

< ?php
    function __autoload($class_name)

        include_once 'inc/class.' . $class_name . '.inc.php';

?>

Having each class in a separate file also makes code more portable and easier to reuse in new applications without a bunch of copying and pasting.

Reason 3: Easier Maintenance

Due to the more compact nature of OOP when done correctly, changes in the code are usually much easier to spot and make than in a long spaghetti code procedural implementation.

If a particular array of information gains a new attribute, a procedural piece of software may require (in a worst-case scenario) that the new attribute be added to each function that uses the array.

An OOP application could potentially be updated as easily adding the new property and then adding the methods that deal with said property.

A lot of the benefits covered in this section are the product of OOP in combination with DRY programming practices. It is definitely possible to create easy-to-maintain procedural code that doesn’t cause nightmares, and it is equally possible to create awful object-oriented code. Pro PHP and jQuery will attempt to demonstrate a combination of good coding habits in conjunction with OOP to generate clean code that’s easy to read and maintain.

Summary

At this point, you should feel comfortable with the object-oriented programming style. Learning OOP is a great way to take your programming to that next level. When implemented properly, OOP will help you produce easy-to-read, easy-to-maintain, portable code that will save you (and the developers who work with you) hours of extra work. Are you stuck on something that wasn’t covered in this article? Are you already using OOP and have some tips for beginners? Share them in the comments!

Step 1.
Download this file
FunctionList.zip

Step 2.
Install notepad++ 5.7 and don’t install with %APPDATA%

Step 3.

unzip the FunctionList.zip and copy all file to /plugins

This Article is from

http://www.danielkassner.com/2010/01/22/using-notepads-function-list-plugin-for-php-development

http://sourceforge.net/projects/npp-plugins/forums/forum/670934/topic/3568427

(This has been corrected with the V2.1.0.1 version, and also added powershell support:)

$ cat thegeekstuff.txt
        * virtualization technologies
        * sed and awk tips/tricks
        * emacs tutorials
        * bash scripting tutorial series

$ emacs -nw thegeekstuff.txt
        * virtualization technologies
        * sed and awk tips/tricks
        * emacs tutorials
        * bash scripting tutorial series

        * Virtualization technologies
        * Sed and awk tips/tricks
        * Emacs tutorials
        * Bash scripting tutorial series

Read this article:
Emacs Macro Tutorial: How to Record and Play

c:\xampp\php>PEAR install PHP_Beautifier-beta

After install PHP_Beautifier,you will find the

c:\xampp\php\php_beautifier.bat

And just Do as below pictures

See the original post:
10 Awesome New Premium WordPress Plugins from CodeCanyon

Shared by 小董

CodeCanyon一定有給他錢

As part of our massive CodeCanyon push this year, I’m pleased to announce that we’ve launched not one, but two awesome new categories. The new CSS category features everything from incredible pricing charts, to buttons, to entire frameworks; while the WordPress plugins category is quickly on its way to becoming the premier location for purchasing premium plugins on the web. In fact, I’m betting that we’ll be there by the end of the year!

Today, I’d like to show you the first ten new premium WP plugins available on CodeCanyon.

1. Events Calendar Pro

The Events Calendar Premium plugin for WordPress enables you to rapidly create and manage events using the post editor. Features include Google Maps integration as well as default templates such as a calendar grid and event list for streamlined one click installation. Check out the full screencast here.

2. DDSlider WP

DDSliderWP features EVERYTHING that our jQuery plugin already offered PLUS a custom admin panel, with total management of slides.

3. jGallery

This WordPress Gallery Plugin gives you a simple and extremely customizable way to create a gallery on any post or page. You have the option to use widgets or shortcodes to insert your custom gallery into your web site. As well, the look of your gallery is fully customizable through the WordPress admin interface.

4. Twitter Widget Pro

If you own just one twitter plugin for WordPress, let it be this one! The only premium twitter plugin out right now – with support for multiple twitter users and includes a ton of premium options. This is the last Twitter plugin you’ll ever need! Check out the full screencast here.

5. WP-Membership

This is a WordPress plugin that helps you sell your content; you only need to install the plugin, create a category for your private content, setup the prices of your memberships and your Paypal account. Don’t hesitate and purchase it today.

You can easily select the posts you want to sell, manage the memberships you acquire and is fully integrated with Paypal. All you have to do is activate the plugin, setup your memberships and your Paypal account.

6. WordPress Owit

This plugin makes it possible for you to upload blog files, directly from the WordPress media manager to MyOws.

7. WP Auctions

WP Auctions is a plugin that enables you to host auctions on your self hosted WordPress powered blog or website.

8. All Tagged Up: Automated Post Tagging

Simplify your WordPress posting workflow with our automated WordPress post tagger!

Why stumble around trying to determine what keywords from your post(s) are best for getting some extra Search Engine Optimization; while you can let All Tagged Up do the work for you.

9. Extended Google Analytics for WordPress

It’s never been easier to add Google analytics and event tracking to your websites. This in combination with a campaing url generator tool makes a powerfull WordPress plugin to get the most out of Google Analytics.

10. WordPress Deposit System

The deposit system is similar to the one they use on ThemeForest (and other Envato sites). The system enables the users to deposit their money into their accounts, and lets the administrator to control all of the cash in his blog & the settings of the system.

But there’s always room for more — and this is a category that will grow in leaps and bounds over the course of this year. If you’re a ninja WordPress dev, and want to start profiting from your hard work, be sure to become an author on CodeCanyon, and get started!

Email signatures contain alternative contact details,
pertinent job titles and company names, which help the recipient
get in touch when emails are not responded to. Sometimes, they
give the recipient an idea of who wrote the email in case it
has been a while since they have been in touch. They are also
professional: like a letterhead, they show that you run a business
(in some countries, you’re required to do so). Here are some
tips on how to create a tasteful signature that
works.

[Offtopic: by the way, did you know that there is a Smashing
eBook Series? Book #2 is
Successful Freelancing for Web Designers, 260 pages for just
$9,90.]

Be Concise

First and foremost, the sender’s header (the “From” field)
should have a name, and you should use a company email address if
you can. If someone sees
stevies747@hotmail.com, they’ll suspect it’s spam. If the
sender’s header reads, “Steve Stevenson – Mister Stevenson Design
Company” <steve@misterstevenson.com>,
they’ll know it’s a professional email from Steve, their trusted
designer.

Start by making your website a link. Many email clients convert
email addresses and websites into links automatically, but not
always. When you’re creating the HTML for an email, make sure the
link will appear by adding writing it in HTML. And instead of
linking text like “My website,” type out the URL, which will be
useful for those who want to copy and paste the address.

An email signature shouldn’t double the email’s length, so
make it as short as possible (three lines is
usually enough). Don’t get into your life story here. The
purpose of a signature is to let them see who you are and how to
get in touch with you.

Make Sure to Include…

• Your name,
• Your company and position,
• How to get in touch with you.

No need to include 10 different ways to get in touch with you.
As in website design, less is more; and then they’ll know which way
you prefer to be contacted. Go to two or three
lines, with a maximum of 72 character per line (many email
applications have a maximum width of 80 characters, so limit the
length to avoid unsightly wrapping). An optional fourth line could
be your company address, but use caution if you work from home.

-- Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com

Short and Concise, but Check the Rules

In some European countries, laws dictate what items you must put
in your email signature if you are a registered company. For
example, UK law requires private and public limited companies to
include the following:

• Company number,
• Address of registration,
• VAT number, if there is one.

You can be fined for not including this information on all
electronic correspondence and on your website and stationary. Many
freelancers and small businesses have ignored these rules since
their inception, risking a fine. For more information on UK rules,
go
here. Do some research to find out what rules apply in your
country.

-- Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com 55 Main Street, London, UK, EC2A 1RE Company number: 12345678

Don’t Include…

• Personal Twitter, IM or Skype details;
• Your home phone number or address (unless you want to be called
  by international clients early in the morning);
• The URL of your personal website;
• Random quotes at the bottom;
• Your entire skill set, CV and lifetime achievements in point
  form.

Random quotes are fun for friends, but you risk offending
business associates with whom you don’t have a personal
relationship. Unless you want clients contacting you while you’re
watching Lost, don’t share your home details far and wide. Also,
don’t share your personal contact information with your corporate
partners. They certainly won’t be interested in it, and you may not
want them to know certain details about you. However, mentioning
your corporate Twitter account or alternative means of contact in
your signature might be useful, in case your correspondent is not
able to get in touch with you by regular email.

	Steve Stevenson, Web Designer web: www.misterstevenson.com blog: blogspot.celebritiesneedhelp.com email: steve@misterstevenson.com
	home: 613.555.2654 home (wife): 613.555.3369 work: 613.555.9876 cell: 613.555.1234 55 Drury Lane Apartment 22 Ottawa, Ontario Canada twitter: @stevie_liverpool_fan skype: stevie_the_man messenger: stevie_mrstevenson I specialize in: Web design Graphic design Logo design Front-end development UI design “Flying may not be all plain sailing, but the fun of it is worth the price.” -Amelia Aerheart

Don’t do this.

Images And Logos

Let’s get this out of the way now: your entire signature
shouldn’t be an image. Sure, it will look exactly how you
want, but it is completely impractical. Not only does an image
increase the email’s file size, but it will likely be blocked
before being opened. And how does someone copy information from an
image?

Any images should be used with care and attention. If you do use
one, make it small in both dimensions and size, and make it fit in
aesthetically with the rest of the signature. 50 x 50 pixels should
be plenty big for any logo. If you want to be taken seriously as a
business person, do not make it an animated picture,
dancing dog or shooting rainbow!

Most email clients store images as attachments or block them by
default. So, if you present your signature as an image, your
correspondents will have a hard time guessing when you’ve sent a
genuine attachment.

The best way to include an image is to host it on a server
somewhere and then use the absolute URL to insert the logo. For
example, upload the logo to
http://www.example.com/uploads/logo.gif. And then, in
your email signature’s HTML, insert the image like so:

<img src="http://www.example.com/uploads/logo.gif" width="300" height="250" alt="example's logo" />

Don’t Be A Fancy Pants

Use vCards With Caution

While vCards are a great, convenient way to share contact
information, in emails they add bytes and appear as attachments. It
is often said that you shouldn’t use a vCard for your email
signature, because as helpful as it might be the first time you
correspond with someone, receiving it every time after that gets
annoying. Besides, the average email user won’t know what it is.
Look at the example below. Would an average user know what that
is?

--- Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com 

If you do want to provide a vCard, just include a link to a
remote copy.

What About Confidentiality Clauses?

If your emails include confidential information, you may need to
include a non-disclosure agreement to prevent information leaks.
However, good practice is never to send sensitive information as
plain text in emails because the information could be extracted by
third parties or forwarded by recipients to other people. Thus,
including a non-disclosure agreement doesn’t make much sense if you
do not send sensitive information anyway.

Keep in mind, too, that the longer a confidentiality clause is,
the more unlikely someone will actually read it. Again, check your
country’s privacy laws. Some big companies require a disclosure
with every email, but if you’re at a small company or are a
freelancer and don’t really require it, then don’t put it in. The
length of such clauses can be annoying, especially in short
emails.

--- Warm Regards & Stay Creative! Aidan Huang (Editor) ------------------------------------------- Onextrapixel Showcasing Web Treats Without Hitch web . http://www.onextrapixel.com twi . http://twitter.com/onextrapixel --------------------------------------------------------------------------------- This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the sender. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this email. Please notify the sender immediately by email if you have received this email by mistake and delete this email from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.

-- This email and any files transmitted with it are confidential. If you have received this email in error please notify the sender and then delete it immediately. Please note that any views or opinions presented in this email are solely those of the author and do not necessarily represent those of Company. The recipient should check this email and any attachments for the presence of viruses. Company accepts no liability for any damage caused by any virus transmitted by this email. Company may regularly and randomly monitor outgoing and incoming emails (including the content of them) and other telecommunications on its email and telecommunications systems. By replying to this email you give your consent to such monitoring. ***** Save resources: think before you print.

Don’t Be Afraid to Show Some Personality

Although your email signature should be concise and memorable,
it doesn’t have to be boring. Feel free to make your email
signature stand out by polishing it with your creative design ideas
or your personal touch. Using a warm greeting, adding a cheeky key
as Dan Rubin does or encouraging people to “stalk” you as Paddy
Donnelly does, all show personality behind simple text.

The key to a simple, memorable and beautiful email signature
lies in balancing personal data and your contact details. In fact,
some designers have quite original email signatures; most of the
time, simple ASCII is enough.

-- h: http://danielrubin.org w: http://sidebarcreative.com b: http://superfluousbanter.org m: +1 234 567 8901 i: superfluouschat k: h = home, w = work, b = blog, m = mobile, i = aim, k = key

Paddy -- The Site: http://iampaddy.com Stalk Me: http://twitter.com/paddydonnelly

-- With optimism, Dmitry Belitsky http://belitsky.info

/////////////////////////////////////////////////////////////////// /// Matthias Kretschmann     ///   krema@xxxxxxxx.xx            /// /// freelance designer &     ///   www.kremalicious.com         /// /// photographer             ///   www.matthiaskretschmann.com  /// /////////////////////////////////////////////////////////////////// /// media studies / communication science & art history         /// /// MLU Halle-Wittenberg                                        /// ///////////////////////////////////////////////////////////////////

-- With greetings from Freiburg, Germany, Vitaly Friedman (editor-in-chief) ------------------------------------------------- Smashing Magazine http://www.smashingmagazine.com - http://www.twitter.com/smashingmag online magazine for designers and developers

HTML?

If you can, stay away from HTML formatting. Every Web designer
knows the pain of HTML newsletters, and while HTML is supported for
email signatures, you’ll likely have problems with images and
divider lines in different email clients. Some nice ASCII
formatting may work in some cases.

-- carole guevin . editor //// design + digital culture magazine //// http://netdiver.net

-- Min, Tran Dinh Chief Creative Designer - Frexy Studio Website: http://frexy.com | Blog: http://min.frexy.com | Email: info@frexy.com Cellphone: (84) 012 345 678

- -- Rene Schmidt -- Berater für Web-Entwicklung & eCommerce, Linux-Webserver-Systemadministration & Web-Programmierung Vordamm 46, 21640 Horneburg; http://www.reneschmidt.de/ Tel: 0123.456.7.890; Skype: reneATreneschmidt.de Steuernummer 43/141/09180; USt-IdNr 219014862 -----BEGIN PGP SIGNATURE----- Version: GnuPG v1.4.9 (MingW32) Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/ iEYEARECAAYFAktit8sACgkQucSanG9drm2ZYACggIeQST/C226LIsd/czEmrnrR TjUAniVPXI2lkA68fy3n+nUawdAE1nJ/ =+vZR -----END PGP SIGNATURE-----

--- Geoff Teehan Teehan+Lax Web Platforms  |  Digital Campaigns  |  Mobile Applications  |  Strategic Consulting T: 416 123 4567 x 890  |  teehanlax.com  |  twitter.com/@teehanlax

---------------------------------------- Dmitry Dragilev ZURB | Marketing Lead getstarted@zurb.com http://www.zurb.com ------------------------------------------ Follow our blog at: http://www.zurb.com/blog Follow us on Twitter: @zurb http://twitter.com/zurb Check out Notable - Easiest way for teams to provide feedback on websites. http://www.notableapp.com ------------------------------------------

______________________________________________ Website: www.webdesignerdepot.com Twitter: www.twitter.com/DesignerDepot

Regards, Matt Ward Echo Enduring Media Web - http://www.echoenduring.com Blog - http://blog.echoenduring.com Twitter - @echoenduring - Follow me!

-- Dan Rubin Sidebar Creative { Director of Training & User Experience } mobile: +1 234 567 8901 http://sidebarcreative.com

-- David Leggett Tutorial9 Founder 555.012.34567 @theleggett Tutorial9.net

Gareth Hardy Graphic Designer | Down With Design www.downwithdesign.com gareth@downwithdesign.com +44 (0) 0123 456 789

Grant Friedman www.colorburned.com Follow me on Twitter! http://twitter.com/colorburned ----------------------------------------

Many thanks, Yaili. yaili.com | webdesignernotebook.com | londonchronicles.com +44 (0) 1234 567890 skype: inayaili

Thanks! Jonathan Cutrell, Editor FuelYourInterface.com | @FuelInterface | @jCutrell

-- All the best, Rob Bowen Copywriter | Designer | Creative Consultant Co-Founder/Editor @ Arbenting & Dead Wings Designs http://arbent.net/blog http://deadwingsdesigns.com

Arseny -- Please consider the environment before printing this email. --- Arseny Vesnin http://designcollector.net Calendar: http://2010.designcollector.net Profile: http://designhub.ru Twitter: http://twitter.com/designcollector Flickr: http://www.flickr.com/groups/designcollector-6 Vimeo: http://vimeo.com/channels/designcollector Facebook: http://www.facebook.com/designcollector

Warm regards, Dipti Kankaliya { dipti.kankaliya@studiomarch.com } Studio March Private Limited 12 Moledina Road Camp Pune 1 India Phone: +91-20-26334002 { http://www.studiomarch.com } MarchCast – The Studio March blog { http://www.studiomarch.com/mc } -- This is an official email from Studio March Private Limited and is protected by a disclaimer. If you are not the intended recipient of this email, please visit: http://www.studiomarch.com/legal/email.

Of course, if you’re really keen to use HTML, keep it
simple:

• Make sure it still looks good in plain text.
• Use black and standard-sized fonts, and stay away from big,
  tiny and rainbow-colored fonts.
• Don’t use CSS. Inline HTML formatting is universally
  accepted.
• Use common Web fonts.
• Including a logo? Make sure the signature looks nice even when
  the logo doesn’t load or is blocked.
• Check how it looks when forwarded. Do all the lines wrap
  correctly?
• You may want to load your company image as your gravatar from
  Gravatar.com as Joost de Valk does.
• Feel free to experiemnt with your e-mail signature: Jan Diblík
  uses a signature with dynamicaly changed promo image.

–

Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com

Separate Signature From Content

Your signature should clearly be a separate entity. Wikipedia
explains the correct way to separate the signature:

“The formatting of the sig block is prescribed somewhat more
firmly: it should be displayed as plain text in a fixed-width font
(no HTML, images, or other rich text), and must be delimited from
the body of the message by a single line consisting of exactly two
hyphens, followed by a space, followed by the end of line (i.e., “–
\n”). This … allows software to automatically mark or remove the
sig block as the receiver desires.”

There are other less standard ways to separate your signature.
While not automatic formatting, a line of —–, ======, or _______ or
even just a few spaces will visually separate your signature from
your email.

-- ---------------------------------- Dan Oliver (editor) .net magazine (www.netmag.co.uk) ---------------------------------- Twitter: danoliver Email: dan.oliver@futurenet.com Phone: 01234 56789 ---------------------------------- Address for deliveries: .net, Units 1 & 2 Cottrell Court, Monmouth Place, Bath, BA1 2NP ----------------------------------

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Elliot Jay Stocks Elliot Jay Stocks Design Ltd. Registered in England & Wales #1234567 http://elliotjaystocks.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

### Cheers, -Dan

Vennlig hilsen Lars Bæk Byråleder & Tekstforfatter ................................................... JØSS! Storgata 15, 2408 Elverum Mob (+47) 01 23 45 67 xxxx@joss.as | www.joss.as

---------------------------------------------- Information Architects Inc. Tokyo Zurich Oliver Reichenstein, Founder http://informationarchitects.jp http://webtrendmap.com http://twitter.com/iA ----------------------------------------------

Wrestling With Your Email Client

Offering general advice on signatures is easy, sure. But anyone
who has tried to implement automatic signatures in Outlook, Gmail
or Yahoo knows it’s not always that simple. Here are some resources
to help you get yours right every time.

Outlook
Changing Outlook’s signature is a real pain, but here’s a
guide that teaches you a few things. If you use Outlook 2003,
here’s another
tutorial on custom signatures.

Entourage
Microsoft’s mail for mac works differently.
Here’s a tutorial on how to set it up.

Gmail
Want just one basic signature?
Here’s how to change the text. You’d think Google would
allow you multiple signatures, links and a bit of formatting. If
you’re looking for something a little more designed or wish to
choose between multiple signatures,
here are five ways to do it in Firefox.

Hotmail
Tips on custom images and more for Hotmail (Oh my!) can be found

here. If you use Windows Live,
here is a tutorial on adding images and HTML. The detail is
helpful, even if the images are awful.

Yahoo
After a bit of research, I found that Yahoo used to support HTML
signatures, but no longer.
Here’s how to change your signature using rich text.

Apple Mail

Here is a pretty decent tutorial, with some inline HTML for
formatting. It then explains how to implement it in the
application. You even get some hints on how it will look on the
iPhone.

Palm Pre
Learn how to customize your message on your Palm Pre here.

iPhone
Customize your “Sent from my iPhone” message here.

BlackBerry
Some information on how to change your message on BlackBerry
smartphones here.

Resources

• 
  The 4 Personalities of Poor Email Signatures
• 
  20 Tips for Creating an Effective Email Signature
• About the Signature
  Block on Wikipedia
• 
  Email Signature Etiquette

Related Posts

You may be interested in the following related posts:

• 
  How To Create A Great Web Design CV and Résumé?
• 
  Business Card Design: Better Than A Plain Ol’ Business
  Card
• Invoice
  Like A Pro: Examples and Best Practices

(al)

We’ve tried our best to fuel the growing appetite of our readers
for more advanced articles, but recently we’ve been receiving more
requests for carefully selected, useful round-ups. We are not big
fans of lists either, but the format is useful and — if the
resources are relevant — can be extremely helpful. Therefore, we’ve
decided to add a couple of round-ups per month as a bonus to our
regular articles. Instead of replacing the main articles, we will
add round-ups on top of our regular schedule. If you don’t like
round-ups or find them inappropriate, please feel free to skip
them. How does this work for you?

In this post, we present 40 useful but obscure jQuery
plug-ins that will hopefully help you improve the user
experience on your websites. We look forward to your ideas and
suggestions in the comments to this post.

[Offtopic: by the way, have you ever visited Smashing Magazine's

List of tags? There might be something interesting for
you.]

Tips, Hints, Navigation

TipTip
jQuery Plugin
TipTip detects the edges of the browser window and will make sure
the tooltip stays within the current window size. As a result the
tooltip will adjust itself to be displayed above, below, to the
left or to the right of the element with TipTip applied to it,
depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery
plugin. It uses ZERO images and is completely customizable via
CSS.

Contextual Slideout Tips With jQuery & CSS3
A set of contextual slideout tips with jQuery & CSS3, which are
ideal for product pages and online tours.

jQuery
Slider plugin (Safari style)
jQuery Slider is easy to use and multifunctional jQuery plugin.

jSquares

jSquares is a jQuery plugin that pops up an image and a description
in an overlay on hover. It is basically identical to the image grid
found on www.ted.com. Works like a
charm in IE6+, FF 3+, Safari 3+ and Opera 10.

Nav-o-Matic

Single sprite navigation is great, but we all know it can get a
little bit tedious. All that measuring of pixel perfect photoshop
slices, careful coding of your CSS and subsequent calculator
bashing is enough to drive anyone to start microwaving fluffy
kittens. Wouldn’t it be great to have a fancy online tool to take
care of all the boring stuff for you in a few simple clicks? Well
wish no more…

Jquery Two Sided Multi Selector
This Plugin converts a multi select list into a two-sided
multi-select list. This means you display a list of options in the
left hand box and items you select are moved into the right hand
box.

jQuery
MegaMenu Plugin

jQuery
Keyboard Navigation Plugin
The jQuery Keyboard Navigation Plugin provides the capability for
elements on a page to be navigated and activated via the keyboard’s
up, down, right and left arrow keys.

FullCalendar –
Full-sized Calendar jQuery Plugin
FullCalendar is a jQuery plugin that provides a full-sized, drag
& drop calendar like the one below. It uses AJAX to fetch
events on-the-fly for each month and is easily configured to use
your own feed format (an extension is provided for Google
Calendar). It is visually customizable and exposes hooks for
user-triggered events (like clicking or dragging an event).

Forms

iPhone Style
Radio and Checkbox Switches using JQuery and CSS
A simple technique for creating radio button and checkbox switches
with jQuery.

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a
Custom HTML Select Element
Our latest contribution to labs is the selectmenu plugin, which is
designed to duplicate and extend the functionality of a native HTML
select element, and lets you customize the look and feel, add
icons, and create hierarchy within the options. Best of all, it’s
built with progressive enhancement and accessibility in mind, has
all the native mouse and keyboard controls, and is
ThemeRoller-ready.

A Better jQuery In-Field Label Plugin
This is a pretty nice effect, and it can really help to save space
on forms. There are a billion different ways to implement this, and
I don’t suggest you use the example from above because that was
just a quick way to show the effect. So let’s walk through a couple
of different implementation approaches and figure out the best way
to implement this feature.

Sliding
Labels
Tim Wright came up with a jQuery technique that presents labels in
input fields by default but then slides them to the left (or up)
rather than removing them on click. If JavaScript is turned off,
the labels are displayed above the input fields. The small jQuery
snippet works in all major browsers and can be used for input and
textarea elements.

Login or Signup with jQuery
Some users doesn’t like to filling the registration form. So that I
had implemented login and singup fields in same block just
controlling with jquery and PHP. It’s is very simple javascript and
basic PHP code.

Uniform – Sexy
forms with jQuery
Have you ever wished you could style checkboxes, drop down menus,
radio buttons, and file upload inputs? Ever wished you could
control the look and feel of your form elements between all
browsers? If so, Uniform is your new best friend. Uniform masks
your standard form controls with custom themed controls. It works
in sync with your real form elements to ensure accessibility and
compatibility.

Slideshows and Galleries

jQuery Quicksand
plugin
Reorder and filter items with a nice shuffling animation.

Nivo Slider: Slideshow
jQuery Script
Nivo Slider is a simple and powerful jQuery image slider plug-in
that fits the bill. The tool has nine unique transition effects
built in, as well as plenty of options to fiddle with: for
instance, you can define functions to be applied before and after
the image has changed, set the animation speed and activate pause
on hover.

#grid
#grid is a little tool that inserts a grid onto the Web page. You
can hold the grid in place and toggle it between the foreground and
background. To display the grid, just press a hot key on your
keyboard, and you can set your own short keys to switch views.
#grid comes set up with a 980 pixel-wide container, with 20-pixel
gutters, and assumes one lead of 20 pixels. You can download the
source code (JavaScript and CSS) and use classes for multiple
grids.

Improving The Content

Dynamic
Footnotes With CSS and jQuery
Lukas Mathis has come up with an elegant solution to improve user
experience with footnotes: his jQuery script shows the content of
footnotes as soon as the user indicates that they are interested in
it – i.e. when they move the cursor over the footnote symbol.

jQuery Captify
Plugin v1.1.3
Captify is a plugin for jQuery written by Brian Reavis to display
simple, pretty image captions that appear on rollover. It has been
tested on Firefox, Chrome, Safari, and the wretched Internet
Explorer. Captify was inspired by ImageCaptions, another jQuery
plugin for displaying captions like these. The goal of Captify is
to be easy to use, small/simple, and completely ready for use in
production environments (unlike ImageCaptions at the moment).

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery
With today’s post I will show you a contrived example to get you
started. I eventually hope to add this to the contextMenu.js jQuery
plugin that I use, but for now this should be pretty straight
forward. I do want to note that in the demo and download I am
loading the latest version of the jQuery library (1.3.1) from
Google’s CDN for the first time in any of my posts. For more
information on how to do this see the instructions from Google.

Layouts

Columnizer
jQuery Plugin
This jQuery plugin will help you create a multi-column layout
without complex CSS hacks. Works across all major browsers.

jQuery Grid
Plugin

Charts and Graphs

Dygraphs: Create interactive graphs from open source Javascript
library
Dygraphs is an open source JavaScript library that produces an
interactive, zoom-able charts of the present time series. It is
mainly designed to display the dense data sets and enable the users
to explore and interpret them. It is a JavaScript Visualization
Library.

gMap – Google Maps Plugin For
jQuery
gMap is a lightweight jQuery plugin that helps you embed Google
Maps into your website. With only 2 KB in size it is very flexible
and highly customizable.

10 jQuery Plugins for Easier Google Map Installation
The plugins below offer not only an easier method to install a map,
they also offer the option to add extra functionality, should you
choose to need them. They also all come with a varied degree of
docs, some are extensive and some non-existent, so choose your
plugin wisely.

Images and Visual Effects

jQuery imageless
buttons a la Google
This jQuery plugin is an attempt to recreate Google’s imageless
buttons and prove that it doesn’t take a whole team of engineers
and an endless cycle of code revision and quality control (their
own words) to pull this off. I don’t know how Google did it, but my
buttons automatically adapt to paddings and other styling you wish
to use. They allow for a lot of stylistic customisatoin via a few
lines of css while keeping all the display critical css rules
hidden deep inside the plugin.

jQuery
Presentation Plugin
jQuery Presentation Plugin: Say NO to Keynote!

jQuery
pageSlide
This plugin allows any developer to recreate a similar interaction
on their own website using a few simple lines of Javascript. By
attaching the method to an anchor tag, pageSlide wraps the original
body content into a wrapper and creates an additional block for the
secondary content load. The slide is animated whenever the click
event is invoked.

jqFancyTransitions:
jQuery Image Rotator Plugin
jqFancyTransitions is easy-to-use jQuery plugin for displaying your
photos as slideshow with fancy transition effects.

A demo of
AD Gallery
A highly customizable gallery/showcase plugin for jQuery.

Pines Notify jQuery Plugin
Pines Notify’s features include: timed hiding with visual effects,
sticky (no automatic hiding) notices, optional hide button,
supports dynamically updating text, title, icon, type, stacks allow
notice sets to stack independently, control stack direction and
push to top or bottom.

Animate Panning Slideshow with jQuery
In today’s tutorial we’ll take the makings of a classic slideshow,
but use a different kind of transition to animate between slides.
It may not fit every project, but diversity is always welcome in
the world of web design.

Sponsor
Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s
life (at least the lucky developer’s life, if it is about a
personal site of theirs). It, however, follows different rules than
those for the other pages of the site. You have to find a way to
fit a lot of information and organize it clearly, so that the
emphasis is put on your sponsors, and not on other elements of your
design.

Last Click

CofeeScript
CoffeeScript is a little programming language that compiles
JavaScript while simplifying the code that developers actually have
to deal with. It works with current JavaScript libraries and
compiles clean code, leaving even comments intact. Once developers
familiarize themselves with how CoffeeScript works, they could
potentially save themselves a lot of time and headaches with the
simplified code.

Brosho ‘Design in the Browser’ jQuery Plugin
With this Plugin you can style your markup right in your browser
with a build-in element selector and CSS editor. Generate the CSS
code of altered elements with one click and use it in your own
stylesheet.

gameQuery – a javascript
game engine with jQuery
gameQuery is a jQuery plug-in to help make javascript game
development easier by adding some simple game-related classes. It’s
still in an early stage of development and may change a lot in
future versions. The project has a Google Code page where the SVN
repository of the project is hosted and a twitter page where you
can follow the daily progress of the development.

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing
capabilities of the modern browsers such as Chrome and Safari. In
this post I will showcase to you an array of experiments that will
surely blows your mind off.

Is adding round-ups to our regular content a good idea?

What do you
think, is adding more round-ups to our regular content a good
idea?Market
Research

In this post we present 50 useful and powerful
CSS3/jQuery-techniques that can strongly improve user
experience, improve designer’s workflow and replace dirty old
workarounds that we used in Internet Explorer 6 & Co. Please
notice that most techniques presented below are experimental, and
many of them are not pure CSS3-techniques as they use jQuery or
other JavaScript-library.

[Offtopic: By the way, did you know that Smashing Magazine has a

mobile version? Try it out if you have an iPhone, Blackberry or
another capable device.]

Visual Effects and Layout Techniques With CSS3

CSS3 Analogue Clock
Analogue clock created using webkit transition and transform CSS.
JavaScript is only used to pull in the current time.

Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and
CSS3 and use such CSS3 features as transform and transition (for
the dynamic effects) and @font-face, box-shadow and border-radius
(for the styling).

dynamic PNG
shadow position & opacity
When the light is turned on, the position and opacity of the logo
shadow will change dynamically, depending on the position and
distance of the light bulb. Don’t forget to drag the logo and/or
the light bulb around!

How To Create A Sexy Vertical Sliding Panel Using jQuery And
CSS3
So, what about a vertical sliding panel that would act as some sort
of drawer instead of the usual top horizontal sliding panel that
pushes everything else down when it opens? While thinking of
alternatives to the usual horizontal panels, I thought it would be
nice to create something that works in a similar way, but that is a
bit more flexible.

Awesome Overlays
with CSS3
The trick with these overlays is the gradient border, going form a
lighter to darker orange as you go from top to bottom. To create
that effect we used to the border-image property, which is a tricky
little addition to CSS.

CSS3 & Flexible UI: Avoid Recutting UI Graphics for
Mobile
What if we could replace almost all of the graphical UI elements
within Fennec with CSS created equivalents? As a designer, am I
comfortable bypassing Photoshop and letting CSS run the pixel
rodeo? After a few initial tests, the answer to both of those
questions was a very solid “yes”. A solid “friggin’ right” if in
Cape Breton.

How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color
model that allows an optimized contrast with any kind of
backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255)
and it adds the last option (a) for the opacity. We can use this
model also for other properties and it works with the new
browser.

Create a Beautiful Looking Custom Dialog Box With jQuery and
CSS3
This custom dialog box is one of the scripts in that website and I
think it will be quite useful for all of us. The reason I have this
custom dialog box is to overcome the inconsistencies across
different browsers. And, of course, it uses CSS3 to style
everything.

Drop-In
Modals with CSS3
For those using WebKit based browsers (Safari and Chrome), CSS3
effects and properties can help you create fast, simple modals by
using transforms, animation, and some subtle design cues.

Newspaper Layouts with Columns and Image Masks
The faux-newspaper look goes in and out of style online pretty
frequently, but these tricks can be used for quite a few cool
applications. What we’ll talk about here is using
-webkit-mask-image and -webkit-column-count.

Navigation Menus With CSS 3

Sweet
AJAX Tabs With jQuery 1.4 & CSS3
This post is a tutorial of making an AJAX-powered tab page with
CSS3 and the newly released jQuery 1.4.

Sweet tabbed navigation bar using CSS3
Although I don’t understand why animations have been added in CSS3,
this upcoming standard does have a couple of very neat features
added to the CSS we’re using today. I wanted to take a couple of
these new things, and create a Sweet tabbed navigation using
CSS3.

Halftone Navigation Menu With jQuery & CSS3
Today we are making a CSS3 & jQuery halftone-style navigation
menu, which will allow you to display animated halftone-style
shapes in accordance with the navigation links, and will provide a
simple editor for creating additional shapes as well.

Building
Coverflow With CSS Transforms
I was able to create a coverflow effect that actually flows and
animates in real-time, without using canvas or prerendered
graphics.

CSS3 Hover Tabs without JavaScript
With the new techniques in CSS3 and clever applications of existing
CSS it is increasingly stepping on the toes of JavaScript. Which to
be honest isn’t necessarily a bad thing. I thought I’d try my hand
at something so here is a basic CSS tabbed content section that
changes on hover.

CSS 3 Transitions and Animations

Going Nuts
with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions
can add zing to the way you present images on your site.

Sliding
Vinyl with CSS3
We take a standard album cover, a little HTML, and some CSS3
transitions and transforms to create a sliding vinyl effect for
showing off the music you love.

Fun with CSS3
and Mootols
These examples came about when experimenting with the extend
property in MooTools. By extending the styles class I could add
CSS3 properties into the Core MooTools framework and do CSS3
animations.

Star
Wars HTML and CSS: A NEW HOPE
There are a lot of CSS transitions experiments going on right now.
Yesterday I discovered another HTML and CSS experiment which went
“far far away”, compared with my simple CSS gallery.
Guillermo Esteves presented a piece of history translated for
tomorrows browsers: the Star Wars Episode IV opening crawl in HTML
and CSS.

Fun with 3D
CSS and video
Zach Johnson has been having fun with 3D effects via CSS such as
his isocube above, which is brought to you with simple HTML
(including a video tag for a playing video on the surface!) and
some CSS.

CSS3 animations and their jQuery equivalents
This tutorial/these examples will show the use of the same HTML,
with different classes for CSS3 and jQuery. You can compare both
the codes and see which one you like more. Don’t forget to check
the demo/download the source code to view how everything is working
under the hood.

CSS
Animations
No matter how fast internet tubes or servers are, we’ll always need
spinners to indicate something’s happening behind the scenes.

Snowy CSS3
Animation
It’s cold and snowy down here in Brighton, so to celebrate the
falling white stuff (and of course the various festivities at this
time of year) Clearleft’s very own Natbat has made a snowy CSS3
animation surprise for all you Safari and Chrome users out
there.

What You Need To Know About Behavioral CSS
In this article, we will take those properties a step further and
explore transformations, transitions, and animations. We’ll go over
the code itself, available support and some examples to show
exactly how these new properties improve not only your designs but
the overall user experience.

3D Cube using new CSS transformations
The impression of a three dimensional cube can be created using
modern CSS techniques, without the need for JavaScript, imagery,
canvas or SVG. Using the proprietary transform property to skew and
rotate shaded rectangles, individual cube faces can combine to form
a 3D object.

Playing around
with WebKit Animations
I’ve been playing around doing a KeyNote like animation done with
CSS and some JS to hook up the necessary events. The animation is
kind of like a deck of cards. When you go to the next one the
current one zooms in and fades out, symbolizing getting closer to
the viewer. The next card then zooms and fades in from the back and
to give a fancy effect-

More on 3D
CSS Transforms
Various 3D CSS Transforms in an overview.

Gradients, RGBA and HSL with CSS 3

Working With RGBA
Colour
CSS3 introduces a couple of new ways to specify colours, and one of
those is RGBA. The A stands for Alpha, which refers to the level of
opacity of the colour, or to put it another way, the amount of
transparency. This means that we can set not only the red, green
and blue values, but also control how much of what’s behind the
colour shows through. Like with layers in Photoshop.

CSS3 Gradients: No Image Aqua Button
I played around with WebKit CSS3 gradient and created a useless but
fun stuff – an Aqua button with no images! Back in the time when
Mac OS X was first announced, there’re a plenty of web tutorials
that describe how to create the sexy aqua button with Photoshop,
and now I can show how to create one with CSS!

CSS3
HSL & HSLA
A tutorial on using the HSL & HSLA declarations along with the
quick + / – guide to which browsers currently support the herein
effect.

Super Awesome Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a
color mode that adds alpha-blending to your favorite CSS
properties. We’ve kicked the tires on it a bit with our own
projects and have found that it helps streamline our CSS and makes
scaling things like buttons very easy. To show you how, we’ve
cooked up an example with some super awesome, scalable buttons.

Using the Shadow-Property in CSS3

Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design,
and with a couple of modern browsers now showing support for the
text-shadow CSS3 property it’s now simple and easy to create the
effect with pure CSS. No Photoshop trickery here!

Shadows
and CSS3
I’m currently working on a design that uses text-shadow and
box-shadow, with RGBA in place to create the shadow color. I wanted
to tweet about this technique because it’s simple and awesome, but
to my surprise I couldn’t find a good, quick tutorial that covered
the use of both text and box-shadow, along with RGBA. So I decided
to create one.
I learned this technique from Dan Cederholm’s Handcrafted CSS book,
so if you’re able I’d recommend just going out and grabbing that,
as he explains it much more elegantly and thoroughly than I ever
could.

Learning New CSS3 Selectors

CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better.
Combined, they enable designers to create lighter, cleaner websites
faster and easier than ever before.

A Look at Some of the New Selectors Introduced in CSS3
Here is a run-down of just some of the things that is possible with
CSS3 selectors. Of course CSS3 isn’t supported at all by any IE
browsers including IE8 but all latest versions of Safari, Firefox
and Opera support most, if not all of them.

Cleaner
Code with CSS3 Selectors
In this article I’m going to take a look at some of the ways our
front and back-end code will be simplified by CSS3, by looking at
the ways we achieve certain visual effects now in comparison to how
we will achieve them in a glorious, CSS3-supported future. I’m also
going to demonstrate how we can use these selectors now with a
little help from JavaScript – which can work out very useful if you
find yourself in a situation where you can’t change markup that is
being output by some server-side code.

The CSS3 :target Pseudo-class And CSS Animations
It’s no secret that I’m always looking for an easy way out using
CSS instead of trying to replicate things with convoluted code —
there are so many underused techniques that we could be applying to
our designs as an enhancement layer! In this experience, I take a
brief look into the :target pseudo-class and a very simple CSS
animation.

The
CSS3 :not() selector
There isn’t a lot of information to be found about the :not()
selector. The specifications only offer 3 lines of text and a
couple of examples. So lets see what it can do!

IE CSS3
pseudo selectors
ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class
selectors and render any style rules defined with them. Simply
include the script in your pages and start using these selectors in
your style sheets — they’ll work in IE… Honest…!

CSS3 Galleries

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be done by combining various CSS properties,
especially when some of the new CSS3 tricks are thrown into the
mix. Let’s take a look at building a cool looking stack of Polaroid
photos with pure CSS styling.

An
Awesome CSS3 Lightbox Gallery With jQuery
In this tutorial we are going to create an awesome image gallery
which leverages the latest CSS3 and jQuery techniques. The script
will be able to scan a folder of images on your web server and
build a complete drag and drop lighbox gallery around it.

If That Is An Awesome CSS3 Gallery, How Would You Call
Mine?

Editable CSS3 Image Gallery
We build a pretty typical image gallery design pattern, a grid of
images that pop up larger when clicked. But this image gallery page
makes use of hot semantic HTML5 markup, loads of visual treats with
CSS3 and jQuery, and made editable through the CMS PageLime. Quick
reminder, the demo is awesome-est in a WebKit browser (Safari or
Chrome).

Replacing CSS Hacks with CSS 3

Rounded corner
HTML elements using CSS3 in all browsers
This is a behavior htc file for Internet explorer to make CSS
property ” border-radius ” work on all browsers. At present, all
major browsers other than IE shows curved corner by adding 4 lines
of css.

Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream
design, the days of rounded corners through elaborate background
images is fading. This means less headache and time spent working
out alternatives for each browser.

Better
Image Preloading with CSS3
Using CSS3’s new support for multiple background images, we can use
a single, existing element to preload all of the required
images.

Saying
Goodbye to the overflow: hidden Clearing Hack
I’m now saying goodbye to overflow: hidden and the deciding factor
for me is CSS3. Specifically box-shadow. At least in the sense that
box-shadow was the first property I noticed being negatively
impacted by the use of overflow: hidden. Like the positioned child
elements mentioned above, box-shadow can get clipped when the
parent (or other ancestor) element has overflow applied. And there
are several other things to consider as we move forward using more
CSS3. Text-shadow and transform can also potentially be clipped by
overflow: hidden.

General articles about CSS 3

How to bring CSS3 features into your design
Top web browser (such as Firefox 3.5 and Safari 4) have introduce
some cool features you can already use. Now, with just a few lines
of css you can do things you used to do with images and
javascript.

Practical
Uses of CSS3
In this article I’ll show you some practical uses for CSS3.

11 Classic CSS Techniques Made Simple with CSS3
We’ve all had to achieve some effect that required an extra handful
of divs or PNGs. We shouldn’t be limited to these old techniques
when there’s a new age coming. This new age includes the use of
CSS3. In today’s tutorial, I’ll show you eleven different
time-consuming effects that can be achieved quite easily with
CSS3.

Mobile optimised websites using CSS3 Media Queries
A while ago I wrote about using CSS3 Media Queries on my website
redesign to provide mobile visitors with an optimised view designed
for smaller screens. I thought it might be useful if I went into a
bit more detail on how I’m doing this.

Code a Backwards Compatible, One Page Portfolio with HTML5 and
CSS3
HTML5 is the future of web development but believe it or not you
can start using it today. HTML5 is much more considerate to
semantics and accessibility as we don’t have to throw meaningless
div’s everywhere. It introduces meaningful tags for common elements
such as navigations and footers which makes much more sense and are
more natural. This is a run through of the basics of HTML5 and CSS3
while still paying attention to older browsers. Before we start,
make note of the answer to this question. Do websites need to look
exactly the same in every browser?

Get the best out of CSS3
Craig Grannell turns into a cross between Jeffrey Zeldman and
Russell Grant, taking a peek at what the future of CSS has to offer
– with a little help from Opera, Safari and Firefox

Practical
Uses of CSS3
“One big item for me is how much we use CSS3. Yes I know, it is not
fully supported across all browsers. If you still want everything
to look exactly the same across all browsers, you should probably
just close this article and not read about CSS for another 10
years. A user is not going to pull up your site in two different
browsers to compare the experience, so they won’t even know what
they are missing. Just because something is not fully supported,
that does not mean that we can’t use it to an extent. In this
article I’ll show you some practical uses for CSS3.”

A Crash-Course in Advanced CSS3 Effects
This video tutorial reviews a bunch of different neat effects that
can be used in Safari 4, Chrome, and for all iPhone
development.

33 Must Read CSS3 Tips, Tricks, Tutorial Sites and
Articles
An extensive overview of CSS3-techniques, tools, articles and
resources.

$ cat /etc/apt/sources.list
deb-src http://ftp.de.debian.org/debian lenny main

$ apt-get update

Syntax: apt-get source command-name

Example: apt-get source netstat

Originally posted here:
Get Source Code for any Linux Command