So here is the video with the test side by side, get amazed!

Here is the video

And the links to the font directory: Google Font Directory and a tutorial on getting started: tutorial

It’s on github you can fork it there or download it!

Fork on github!

DEMO

Take a look:

Sexy CSS+JS Form

I was working on our new open source project that i think you will like and I was working on the registration page. This is what I got in the end and i will walk you trough the process with me. This new tutorial is about styling the forms of your website, I find it very good looking and very simple to implement. We will use simple CSS and some JavaScript.

Usually for inserting text into the inputs or our forms we set the value attribute with the text and then use javascript to check for different scenarios for doing some fancy things. This is different we will use labels to fill the text and move them under the inputs and then just do our magic with JS.

The JavaScript library that we will use to create this effect for our forms is Jquery

1. Creating the markup!

            <div id="login">
                <div class="sayit">Log In:</div>
                <form action="javascript:void(0)" onsubmit="login()" autocomplete="off">
                    <label for="username">Username</label>
                    <input type="text" id="username"/>
                    <label for="password">Password</label>
                    <input type="password" id="password"/>
                    <input type="submit" class="medium button green" value="Log me In"/>
                </form>
            </div>

The above code is our markup and as you can see is very simple and it can be changed as you like because the code that we will use for checking for different scenarios in javascript will work without necessary classes or ids. We have 2 inputs and 2 labels, one is password one is text and we can work with these ones, you can add as many as you like.

Now let’s style these bastards!

2. Use CSS to style the form elements!

input[type=text],input[type=password]{padding: 5px 10px; background-color: transparent;	position: relative; z-index: 2;}
label{position: absolute; z-index: 1;-webkit-transition: opacity 0.15s linear; color: #bababa; background-color: #FFFFFF; }

#login{width: 290px; margin: 0 auto;}
#login input[type=text],#login input[type=password]{width:270px; margin: 5px 0; font-size: 24px; font-weight: bold; border: 1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; color: #595959;}
#login label{font-size: 24px; margin: 14px 10px;}

#login .sayit{font-size:24px; color: #595959; font-style: italic; padding-bottom: 5px;}

What we did here is make the label absolute so it will go under the input. This is important you will have to place the label before the input so remember this! The input will have a position relative and a z-index of 2 so we can be sure it will land above the label. Next we define the login div by using his id(#login). We use CSS3 for creating the round borders for the input and style the label by setting a big font-size to fit the input. The rest is pretty obvious, if you have trouble understanding this then let us know in the comments.

3. Make everything move with JS!

$(document).ready(function(){
    $.string(String.prototype);
    $("input,textarea").each(function (type) {
        $(this).focus(function () {
            if($(this).val().blank())
                $(this).prev("label").fadeTo('fast',0.45);
        });

        $(this).keypress(function () {
            $(this).prev("label").fadeTo('fast',0);
        });

        $(this).blur(function () {
            if($(this).val().blank()){
                $(this).prev("label").fadeTo('fast',1);
            }
        });
    });
});

We use here jQuery of course that we add using the google api like this:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

And one plugin that I use to extend the jQuery string properties and that is $.string plugin. After we do that we create the above code and we assign to input and textarea elements a focus, keypress and blur actions. We use the focus action to lower the labels opacity to 45% then on keypress we just hide it for good. Then on blur we check to see if anything was written in our sexy element and if not then we fade the label back to 100%. This is kind of everything we do here, pretty simple.

4. Showing of a demo and download source

I’ve set up a demo here: DEMO

The source code you can either pick it from the demo page or from here: SOURCE

5. Wrapping up!

So here is our nice form styling that you can use on your website and that can be done very easily. Feel free to leave us comments and suggestions. Thanks a lot!

Have fun coding!

I’ve been using this website for a week now and I’m so glad i found it. In fact Grooveshark was launched since 2007 but it was not from the start like this.

Let’s see what Wikipedia says about this: “Grooveshark is an internationally-available online music search engine, music streaming service and music recommendation web software application, allowing users to search for, stream, and upload music free of charge that can be played immediately or added to a playlist. Grooveshark streams 50 to 60 million songs per month, to more than 400,000 users. As of April 2009, its audience was growing at a rate of 2 to 3% per day.”

So it seems this is just starting to get big. One notable thing about the service/website/player how you wan to call it is that they just signed a licensing deal with EMI and they say Universal is coming soon.

Here is screenshot of the player and just go and listen.grooveshark.com

GrooveShark Player

Performance

What Yslow goes round and round is the cache system of the browser. So what you are actually doing is making everything cacheable and as small as possible so that the browser takes everything loading from one bite. The browsers have a limited number of requests that they address at once so if you can get into that margin then you are good. So very important combine every file and make is small!

What have i done is use the gzip module of the apache server by using php and a .htaccess file. I believe this is one of the most nice ways to take advantage of this feature without making any changes to your website. What it does is adding lines of code at the beginning of txt/html/htm/php files, css files and js files. After we do this we add a closing line at the end and we are good. Gzip is in place up and running.

How do we do it? Well here is the code:

<FilesMatch "\.(css)">
    ForceType application/x-httpd-php
	php_value auto_prepend_file "address-to-this-file/gzip/gzip-css.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>

<FilesMatch "\.(txt|html|htm|php)">
    ForceType application/x-httpd-php
	php_value auto_prepend_file "address-to-this-file/gzip/gzip-gen.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>

<FilesMatch "\.(js)">
    ForceType application/x-httpd-php
	php_value auto_prepend_file "address-to-this-file/gzip/gzip-js.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>

The next step is a selective one since what we are doing is telling the browser to not look for a file until we tell it to. So if we set the expiration to 2 years from now the browser will always use the one it has in it’s cache until 2 years pass.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A604800
ExpiresByType text/javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600
</IfModule>

We check for the expires module and if it’s activated then we just set the expiration dates. What does “ExpiresByType text/css A17200″ means? Css files “expire after 4.8 hours”
“A” before the numbers above stands for Access. This means that the stopwatch starts when a client accesses the file. You can also use “M” for modified.

TIME CHEAT SHEET

• 300 5 MIN
• 600 10 MIN
• 900 15 MIN
• 1800 30 MIN
• 2700 45 MIN

• 3600 1 HR
• 7200 2 HR
• 86400 24 HR

• 86400 1 DAY
• 604800 7 DAY

• 604800 1 WEEK
• 2419200 4 WEEK

• 2419200 1 MONTH (FEBRUARY)
• 2505600 1 MONTH (FEBRUARY LEAP YEAR)
• 2592000 1 MONTH (APRIL, JUNE, SEPTEMBER, NOVEMBER)
• 2678400 1 MONTH (JANUARY, MARCH, MAY, JULY, AUGUST, OCTOBER, DECEMBER)
• 31536000 12 MONTH

Now just download this thing and get a faster website. The rest of the Yslow rules are pretty simple to follow so i just felt i would let you know what i use for these 2 because i found them hard to figure out than the rest.

Here it is the .htaccess code:

RewriteRule ^.+\.(css|js|png|jpg|swf)$ gzip/compress.php [NC]

This will pass all files that are css, js, png, jpg, swf trough the compress.php file. And here is what the compress.php file does:

<?php
$basedir = $_SERVER['DOCUMENT_ROOT'];
$file = realpath( $basedir . $_SERVER["REQUEST_URI"] );

if( !file_exists($file) && strpos($file, $basedir) === 0 ) {
    header("HTTP/1.0 404 Not Found");
    print "File does not exist.";
    exit();
}

$path_info = pathinfo($file);
$extension=$path_info['extension'];

switch($extension) {
    case 'css':
        $mime = "text/css";
        break;
    case'js':
        $mine = "text/javascript";
        break;
    default:
        $mime = "text/plain";
}

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
    ob_start("ob_gzhandler");
else
    ob_start();
header( "Content-Type: " . $mime . "; charset: UTF-8");
header ("cache-control: must-revalidate");
readfile($file);
?>

The file checks for the extension of the file that is receives and ads the corresponding headers to it’s top.
Pretty simple. Download the zip file to get both versions.

Awesome website optimizer

flash-gallery-logo

Hi there. So i was surfing the web and i stumbled on this great website: CU3ER, and i wanted to show it to you too.

CU3ER \kju:bər\, an image slider initially conceived to create 3D transitions between slides, turned out to be a convenient and multifunction solution that can be applied in a range of website building areas, from content slider to feature slider and image & banner rotator. Consider using it when you want to grab the user’s attention, and you’ll be delighted by the results!

CU3ER’s main features are:

1. FREE
2. EASY to set up
3. CUSTOMIZABLE via XML
4. TAILORED to provide a UNIQUE look & feel
5. INSPIRING
6. FUN-to-USE

There are no special requirements for setting it up and running other than a limited knowledge of web authoring:

1. Flash Player 9+,
2. XML Basics,
3. SWFObject (embedding .swf files into web pages),
4. Applications for image editing (especially for creating & exporting slides).

To set it up just to go on their site and click the quick start button, they have a nice basic tutorial there that will help you set it up. See you next time.