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.

7 amazing maps

As you might see on our blog, I’m very passionate about finding great images. So i was surfing the web and i kept seeing this statistics maps that really amazed me. So i decided that you should see them too, that in case you haven’t seen them yet.

This one shows information according to popularity and influenza of every website.

Web trend map 4

This one shows every country in the world and what social network website is the most popular in every one of them. Very interesting.

World map of social networks

The internet has cables under the oceans. That’s nice. There used to be an older map of this kind.

The internet undersea world

This is a chart that shows what people are doing on the internet. It’s analyzed by age and occupation.

What people are doing

A map that shows the most dominant forces on the internet. By forces i mean the most influent country by number of people using internet.

The exploding internet

Where is all the traffic going?

Global Traffic Map

The communities are created according to size. The bigger the better.

Map of online communities

I hope you liked this information and that i was not that boring.

Play with CSS3

If you saw our “ImageRoll” page and you used Firefox, Chrome or Safari then you saw the images being rotated in different angles well the way i did that is by using CSS3. I guess you already figured that out from the title.

CSS3 implements a lot of new features that can make your life easier of course you will not be able to use them quite yet. IE is not supporting like more than 90% of them so it’s useless if you want to make this for a client. The ones that we used on our blog are: box-shadow, border-radius and text-shadow. I think these are the most important of them but you can check all of them out by taking a look at this page: css3.info/preview/.

I’m gonna do a simple explanation on the ones we used and show you some code.

We used on the hrefs of the page this property:

-moz-box-shadow: 0px 2px 15px #333;

Now let’s explain. Why “-moz” in front of it? This is a simple hack for those who don’t know it. It tells the browser to render this only in mozilla based browsers. Next we have the property box-shadow and 0px means the top margin of the shadow, 2px means we move the shadow 2 pixels to the left and 15px
means we create a shadow with 15 pixels of size of blur if you want, #333 is of course the color of the box shadow. Pretty simple .

Now let’s rotate the images:

   -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);

You know -moz- already but we have a new one “-webkit-” this one means it will render in webkit based browsers, the most popular are: Safari and Chrome. Next we have the property “transform” and the degree of rotation “-10deg”.

The other one that we used all over the blog is text-shadow

text-shadow:1px 1px 0px #000;

This property is like this 1px means we move the shadow with 1 pixel from the top, 1 pixel from the left and 0 blur or size, #000 means of course the color of the shadow.

And here is a preview in 2 browsers IE and Firefox so you can see maybe you are not using a browser that supports CSS3.

Ie view

Firefox view

My imageroll page is inspired from this page: line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery . Go and check it out .

Thank you and happy coding!

Cache Pic

As I said in my last post, I wanted from the first time to make a cacheing system for my imageroll page. Because i take the images from vi.sualize.us servers and we don’t want to make to much trafic and make stuff worse for them.

So what i did is simple, i made a class that extracts the rss data from theirs servers and get the images to display them. I do this every time someone visits the page. If any image is new for the first time we display the image from vi.sualize.us and run a functions in javascript to check for new images. If any new images exist then we cache them in a folder on our server and the next time a user visits the page that image will be shown from our server. Pretty simple.

For now i’ll just show you the stuff that makes this thing run and if you want i can share the whole script so that you can make one for your blog or website.

I’ll also try to make a WordPress plugin so you can integrate it easily in your blog.

So here we go. We start with the function that checks for new images:

functio checkCache($image_url){
            $path=pathinfo($image_url);
            $img_cached = 'cache/'.$path['filename'].'.'.$path['extension'];
            if(!file_exists($img_cached)) {
                createCacheImg($image_url);
            }
}

This function just checks if the image exists in the “cache” folder. If it’s not there then we run the “createCacheImg” function.

We now need a function to get the image so we check if the image is in the cache folder or not so we know what to display.

    function getImage($or_img) {
        $path=pathinfo($or_img);
        $filename=$path['filename'];
        $img_cached = 'cache/'.$filename.'.'.$path['extension'];
        if(file_exists($img_cached)) {
            $url=$img_cached;
        }else {
            $url=$or_img;
        }

        return $url;
    }

Very simple function that just returns the right url of the image.

Now we cache the image.

function createCacheImg($image){
        $srcsize = getimagesize($image);
        $w = $srcsize[0];
        $h = $srcsize[1];

        $path=pathinfo($image);
        $dest='cache/'.$path['filename'].'.'.$path['extension'];
        if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
            $src_img = imagecreatefromjpeg($image);
        }else if($path['extension']=='gif') {
                $src_img = imagecreatefromgif($image);
            }else if($path['extension']=='png') {
                    $src_img = imagecreatefrompng($image);
                }
        $img_cpy=imagecreatetruecolor($w,$h);
        imagecopy($img_cpy, $src_img, 0, 0, 0, 0, $w, $h);
        if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
            imagejpeg($img_cpy,$dest);
        }else if($path['extension']=='gif') {
                imagegif($img_cpy,$dest);
            }else if($path['extension']=='png') {
                    imagepng($img_cpy,$dest);
                }
        imagedestroy($src_img);
}

This function will save the image into the cache folder. Now we need a new file “checkcache.php” where we put this code:

include('functions.php');
$image=$_GET['image'];
checkCache($image);

Right now we should have this kind of structure in our imageroll folder: A folder “cache” a file “functions.php” where we place all these functions we just did and a file “index.php” where we run the javascript function and display the images.

The “index.php” file requires this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <title>
            Image ROLL
        </title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">  google.load("jquery", "1.3.2"); </script>
    </head>
    <body>
<input type="hidden" id="image" value="http://test.com/image.jpg">
<img src="<?=getImage($image)?>" alt="test image"/>
</body>
</html>

We have here a simple index.php file that imports the google api and jquery so we can run a simple ajax function. This is the javascript code that you should insert in this file or a separate one if you want:

            $(document).ready(function() {
                checkCache();
            });

            function checkCache(){
                var page=$('#image');
                var url='checkcache.php';
                var pars='page='+page.val();
                $.get(url,pars);
            }

This will run this function after the page loads and it will check for new images. So this is just a simple script that will make you pages load faster expecialy if you load the images from outside of your server.

If you liked this i’ll go and make a more complex one and even share the imageroll script i did. That until i find the time and make a Wordpress Plugin.

Super WordPress

Hello guys since we were working on a lot of WordPress based websites we decided is time to convert our blog into one since is such a great CMS.

So why am i writing this post to let you know? Because I think it would be a nice thing to share with you the problems we run into and the plugins we are using right now for our blog.

We use the following plugins for our blog and I think you might think about using them too.

• Smart 404

  I modified this plugin so that it can fit our needs. The idea of it is that will search for the term you enter in the url and find the post or page that you might be looking for. But we had a very crazy url at our old blog so i had to do something about it. So here is the code i added to the plugin:

          if($search=='post.htm'){
              $search = preg_match('/year\/(.*)\/month\/(.*)\/title\/(.*)\/post.htm/', $_SERVER["REQUEST_URI"], $matches);
              $search = $matches[3];
          }
  

  This will just check and see if the string that the plugin came up with is ‘post.hm’ because that was the case in our url format. So what i just use is a regex and get the title and correct the great plugin by giving him a hand in that particular case. So you can try that out by clicking this link and see. Pretty cool right?

• Google Analyticator

  This one is a fancy thing. I like it because it shows stats of google analytics in your blog dashboard and it will place your analytics code in the footer without you modifying any file.

• All in One SEO Pack

  One of the most famous plugins of wordpress. It helps you blog by making it more SEO friendly and get up in the search engines.

• AntiVirus

  Antivirus is a plugin that checks posts and comments for spam injections or attacks from hackers. A very nice plugin that i think you should try. As you know if you are reading this blog for some time we had some problems with our blog.

• DB Cache

  I find this plugin better than super cache or WP cache because instead of making html files or your blog and load those up this one saves your queries and when you load a page it will load them from tose files. It’s the same idea “memcache” used by YouTube.com, Wikipedia.com etc.

• Google XML Sitemaps

  This plugin is a must in my opinion since it creates sitemaps for YAHOO, GOOGLE and BING so that your blog is indexed the right way.

• underConstruction

  If you visited our blog while we were making the transition to WP then you saw our “Coming soon” page. That was created with this plugin. Well the page was made by me but the plugin just gives you the option to make your visitors see that page and you see the blog. So if you are loged in then you see the blog. Very useful in my opinion especially when you make major changes to your blog.

• Wordpress Popular Posts

  Ion found this plugin when i told him we should place some featured posts at the top for users to see some of the most important posts. This one is better since it will let you chose the criteria of sorting the posts. You have by most viewed post, most commented or average daily views. Very nice plugin i think you should try it. PS: don’t do like me! I installed the plugin and tried to see if it works, well it didn’t since i was logged in and it only records data when you are not logged in.

Ok let’s wrap it up this is a list of the plugins we used for our blog. I will create a new post with some of the functions we created for our blog. And maybe come up with a plugin too for “imageROLL”, by the way we have that on our blog right now but is not a plugin yet. The image roll is based on vi.sualize.us.

Write Better CSS

When writing your CSS, it is possible to write neater, more readable code by making use of CSS shortcuts. A shortcut is a feature of CSS that allows the developer to specify a number of related properties on a single line rather than specify them all separately. Lets look at the following example:

.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
}

The code above is perfectly valid and will work fine, but we can save time and make the code much neater using the following code:

.header {
padding:5px 10px 5px 10px;
}

Using the code above we can specify all of the padding for the header div on one line. It works by applying the first attribute (5px) to the top padding of the div. The second (10px) applies to the right side padding, the 3rd (5px) attribute means the padding on the bottom of the div, and the forth (10px) attribute means the left side padding. The padding is always applied in this order.

It is possible to shorten this code even further using the following code:

.header {
padding:5px 10px;
}

This works by taking the first (5px) attribute to mean the top and bottom, or vertical padding, and the second (10px) attribute to mean the horizontal padding (left and right).

The exact same principles can be used to declare the margin of your divs, so what could have looked like this:

.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
}

Can now look much neater, and is obviously much quicker to write using the following:

.header {
padding:5px 10px;
margin:5px 10px;
}

One of my favorite CSS shortcuts is the background property shortcut. This is how a typical CSS file could look without shortcuts:

.header {
background-image:url(images/image.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#fff;
}

However, with some nifty CSS it could look like this:

.header {
background: #fff url(images/image.jpg) repeat-x top;
}

The above code is much quicker and more manageable. Take note though, that all of the properties must be provided when using the background shortcut. If I missed off the colour specification at the beginning for example, the code would not work.

Another very useful shortcut is the font shortcut. The code below can be shorted considerably:

body {
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 0.8em;
line-height: 1.2em;
}

Here is the shortcut:

body {
font: bold 0.8em/1.2em verdana, sans-serif;
}

It is important to write the shortcut in the same order as above so that web browsers don’t get confused!

This is my favorite shortcut of all. This saves me a great deal of time when I am developing web sites because whenever I have a problem with a layout or an element, the first thing I do is put a border around it so that I can see its dimensions and work out what’s going on.

Here is some typical code:

.header {
border-width: 1px;
border-color: #000;
border-style: solid;
}

This can be shorted to the following:

.header {
border:1px solid #000;
}

Then, whenever you are not sure why an element is not behaving properly, just use the border shortcut above to debug your code and see what the dimensions of the element are.

As you can see, you can make your code much shorter and neater using the CSS shortcuts outlined here. Once you get into the habit of using them, I guarantee that you will wonder why you ever did it differently in the past!