Stop Using IE6 or Google will Abandon you!!

Minutes ago, I received an email from Google which made jump in my chair with joy. As a developer, no other news could make me happier (especially at this time, when I was on the verge of pulling my hair, trying to get a client’s site work properly on this beastly browser). We all know about the age old fight of web developers, site owners, designers and web service providers with the timeworn Internet Explorer 6 users. Interestingly, this fight has been supported by many communities across the globe and Microsoft gave its share by taking away all support for IE6 with the launch of IE7.

What’s the news after all?

Though Google has been intimidating its users for long to stop using IE6, it finally declared to set its foot down, saying, “In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology.  This includes faster JavaScript processing and new standards like HTML5.  As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 as well as other older browsers that are not supported by their own manufacturers … Later in 2010, we will start to phase out support for these browsers for Google Mail and Google Calendar.”

Finally, Google fully joined the war with Microsoft and the rest of the world against IE6 users with this bold step. For this Google deserves a round of applaud!

The news brings hope for an end to the usage of IE6, if not by the end of year 2010, at least somewhere between the years 2011-12. It’s no news that Google rules the World Wide Web with the maximum number of market share, and with this step it will definitely act as an eye opener for the IE6 users and bring relief to businesses and people suffering because of them.

Great News! No IE6.

This will be great news for developers, as they’ll save a lot of production time bypassing the extra styling and fixes needed to work upon, just to render same look for all the apps and websites on IE6. They will finally implement newer technologies and render web experience, which in turn will undoubtedly raise the web standards and their awareness among users.

Great news for users, as they’ll surf the web more securely and can welcome newer technologies; applications that will enhance their browsing experience. Users will then get more features and functionality from newer browsers, which means they can actually speed up their business or work online and deliver more in lesser time. And above all, they will have one look for all applications on all browsers.

Also for website owners, as they will be relieved from the merciless charge by developers, not me!! to have their websites support users of IE6.

Well, it’s more than important for everyone to support Google in their efforts against IE6. I say, be it developers or designers, we should all follow the footsteps of these great leaders and from this point, stop any and every support and fix for IE6.

What’s your take on this news? Share your views below..

Foot sponsored by CSSJockey.com

You got it right! I’m very much climbing each step with these extraordinary people, who are making a tremendous effort to bring not mere clean running water, but the true sense of humanity to the people deprived of it.

What this is about is all about?

More than ONE BILLION people worldwide do not have access to clean, safe drinking water. The astonishing reality is, every 15 seconds a child dies from a waterborne disease. KENNA, the founder of this expedition, joined by a group of Global Influencers will climb Mt. Kilimanjaro 19340 foot in lieu of bringing attention to the thundering crisis the world around has shut eyes to.

Take a step forward with the Climbers.

Bringing technology to good use with the generous and overwhelming support of HP & Intel, they are sharing their caravan through pictures, videos, tweets and Facebook updates from every sojourn. You get it all in the updates on their website SummitonSummit.com

The crisis is enormous, yet the solution is simple but sadly it has been drifted for years leaving us cold feet. CSSJockey has a made a modest bit to support the efforts of this magnanimous team and makes a humble appeal to all my readers and friends to do the least they can for this noble cause.

Congratulations Power Gallery Contest Winners

The Year 2010 started a bit silently for the readers for CSSJockey. Well, no I’ve not been hiding under rock. Had a bundle of new things to work on, for your up-coming surprises and yes, looking for many great designs online which have been flaunted on CSSTreat, do check them out!

For the news everybody has been waiting for eagerly! Yes, you guessed it right, The CJ Santa’s Lucky Winners of the Christmas Contest.

Ho-Ho-Ho! I greatly appreciate everybody who took time off their holidays to participate and keep an eye for the contest. But as I said, the Santa was quite picky and the final verdict has been made. The proud winners of the Christmas Contest – PowerGallery Giveaway who got their websites a cool new gift this exciting year are:

Enrico Bonardi aka webbografico and Sheik Dawood aka Sheik. Your prizes will be delivered via email so keep your inbox wide open.

Congratulations to the winners and hope you do put this great tool to good use!!

For the rest, please don’t ever be disheartened as CJ is always working on something new to charm your website and online presence.

My best wishes to all and hope everybody had a great start of this year!

CSSJockey Featured on Alltop.com

Isn’t that so cool?

Hell yeah!! And I’m so excited about it. Have been closely following Guy Kawasaki for around 2 years now and finally being featured on one of his project Alltop.com makes me feel on cloud 9!!

I have always loved his ideology and followed his videos, posts, tweets. It always gave me something to learn from. For this reason I think Alltop.com is a great platform to be associated with as it gives a varied exposure to online businesses and personals while providing them a space to pool all resources they need.

So, here I’m people, featured on Alltop and feeling on Top of the World!! And I encourage you all to be here too!

Hello again, all my lovely readers and I hope you all are having merriest time of the year. Christmas is still on and I really want to thank you all for your immense love for CJ Christmas gifts. I never imagined being a Santa could be so much fun

Well, this brings me to being a Santa one more time. But this time, I’m gonna be real picky! Ho-ho-ho, don’t be surprised. I’m inviting you all for a small Christmas Spirit Contest. And I’m giving away a mesmerizing gift to two lucky winners. You read it right! I will choose 2 lucky winners from this contest. And these winners will walk away with a smooth, exquisite, powerful and professional solution to PHP photo gallery – PowerGallery by WebAssist.com

This pre-built PHP solution empowers the developers to set up a great looking photo gallery with ease. You can use this to showcase the products you sell online, or simply share your personal photos with the world. And above all, it’s as simple as counting candy canes.

Some of its salient features are:

• Painless Setup:
  To setup this ready to use package simply upload the files to your server, run the package and you’re ready to roll. Just open your browser to launch the Installation Wizard to configure your PHP photo gallery.
• Striking Image Display:
  This gallery includes 5 stunning image gallery designs, with both dark and light themes, giving you variant options for your website gallery. You may even add your own custom text watermark.
• Multiple Image Galleries:
  Now you can set up, manage and display any number of galleries in various locations throughout your site with ease.
• Straightforward Interface:
  Creating and editing your image gallery has never been so easy – add a new gallery, upload and manage images, modify titles and descriptions, and quickly change designs.

To know more check out the Support Documentation, the Features and FAQs for PowerGallery.

So much said about this great award, now here’s what you need to do to get it for free. I’ve tried to keep it quite simple. All you have to do is answer five questions based on Christmas festivities. And we’ll pick the winners from a random lucky draw. Simply answer the questions in this contest form and copy the generated key to the comments section of this post. We will randomly pick 2 lucky winners from the contestants who gave the right answers. The winners will be contacted via email, so double check when you enter it.

Contest Terms & Conditions:

1. All members of team CSSJockey.com and WebAssist.com are allowed to participate, but will not be eligible for the lucky draw.
2. Attempts to hack the system or mislead organizers will result in disqualification or a complete ban on the user.
3. The administrators of the contest may add further terms & conditions to this list at their own discretion.
4. The award of prizes is done at the sole discretion of the organizers and cannot be questioned.

Better hurry, the contest expires on 6th January.
Click here to rush to the contest form and don’t forget to submit the generated key in the comments below.

Best of Luck!!

Merry Christmas

As people around the globe prepare to cease the year with the colors of festivities and joy, we at CSSJockey, would like to take this opportunity to wish everybody, all the very best for the years and years to come.

Well well well, we aren’t here just to convey our wishes through words we got you some nice presents too. After all, we love our community and are always working to make it a better place for us all. With this wish, we present to you a token of our good wishes and loads of love: A Christmas Twitter Background, to color your twitter page with the Season’s best colors and gifts and a CJ Christmas Message Plug-in, to welcome your user’s with a custom message/news for the season. Now, whether you’re ready for this Christmas or not, it’s raining gifts already!!!

As someone truly said, It is Christmas in your heart, that puts Christmas in the air! We’ve put together our hearts and soul to flaunt your screens and websites with the season’s best festive spirit. Hoping you enjoy this season to the best and get everything you wish for yourself or your loved ones, here’s where you can download our gifts.

Twitter Background:

Christmas Twitter Background by CSSJockey

This is a customary red background that spreads sparkles of the season’s magical spirit with the cute Santa; the jingle bell and the visionary light balls that enlighten each day of your festive season. Also, the abstract art adds style and ambiance. We’re sure you’ll love it and be sure to flaunt it to your followers!

1. Login to you twitter account and click settings on the top menu bar
2. Click design and change background image
3. Click change design colors and use these colors for default design.
   • background: 8c0707
   • text: 454545
   • links: 990000
   • sidebar: efefef
   • sidebar border: d9d9d9

CJ Christmas Message WordPress Plug-in:

If you love to spread the Christmas cheer around, we’re sure you’d wanna get your hands on this first. This plug-in helps you setup a custom message with cool graphics for all your visitors. This message can be a welcoming season’s greetings or may be a news flash for the new attractions on your website.

It’s like putting up a placard and be assured to grab your visitor’s attention. It will leave your visitor’s smiling and looking for more on your web-site. The beauty of this plug-in is, once a visitor has come across this message they will not be given the same surprise every time they visit the same page. However, they will see this surprise message the next day they visit the same page. This is because the cookies are set to expire in 24 hours.

So, let us not stop you anymore, go ahead and be the first to flaunt it to your visitors.

Screenshot »

Christmas Message WordPress Plugin

Installation »

1. Extract the Plugin Folder from the downloaded ZIP file.
2. Upload cj-xmas-message folder to your /wp-content/plugins/ directory.
3. Activate the plugin from the “Plugins” page in your Dashboard.
4. Configure the plugin from Settings > CJ X-mas Message options page.

Important: For trouble free execution, this plugin requires your theme to have wp_head() and wp_footer() functions.

Plugin Support »

Report any Bugs or Request more Features at our Support Forums.

Be nice and don’t hesitate to share these goodies with your friends and peers. Remember Santa loves nice people

What is Regular Expression?

Regular Expression is a type of sub language used with main stream programming languages like PHP, ASP, JAVA, and many more. As a matter of fact, it can be used with any programming language. You can think of regular expressions as wild cards on steroids. You are probably familiar with wild card notations such as *.txt to find all text files in a file manager.

The regular expression equivalent is . *\.txt$.

What is its use?

Regular expression is used to match strings of text, such as particular characters, words, or patterns of characters, e.g., I wish to search a word which starts with the letter ‘c’ and is followed by O twice and can end with any alphabet or a numerical. I can use these regular expressions to get exact matches like cool, cook, cooked, cooking, cooper, cooperate, etc.

What’s in it for me?

Regular expressions are very useful as they involve interpolation with strings, numerical, alphabets and special symbols like $ @ % * etc. In my opinion no application can be built without using regular expressions in some way. There are many features and uses of regular expressions and we will proceed to discuss a few regular expressions that are a “Must Know” for any programmer. We shall tests these expressions in the following scenarios using PHP:

1. Validating Username.
2. Validating Password.
3. Validating Email Address.
4. Matching a URL.

Validate Username

// regular expression for validating username
$valid_username = "/^[a-z0-9_-]{3,16}$/";  

// input from user through a textbox
$user = $_POST['user'];  

// using ‘preg_match’ to validate user input against the expression.
if(preg_match($valid_username, $user)){
	$message= "Username Valid! You may proceed.";
}else{
	$message = "Inavlid Username.";
	$message .= "Username should contain only alphabets, numbers, underscores or hyphens.";
	$message .= "Should be between 3 to 16 characters long.";
}

In the above code the regular expression will look for a specific pattern of username which contains characters such as letters (a-z); number (0-9); an underscore or a hyphen. Later, it would verify that the username is minimum 3 characters long without exceeding the upper limit of 16 characters. This verification is performed by {3,16} expression. Then we will end the string by a ‘$’.

Live Demo

Validate a password

$valid_password = "/^[a-z0-9_-]{6,18}$/";
$pass = $_POST['pass'];
if(preg_match($valid_password, $pass)){
        $message = "Valid Password. You may proceed.";
}else{
        $message = "Invalid Password.";
        $message .= "Password should contain only alphabets, numbers, underscore or hyphen.";
        $message .= "Should be between 6 to 18 characters long.";
    }

Password is almost similar to matching a username the only difference here is that we need minimum of 6 characters.

Live Demo

Validate an email

$valid_email = "/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ ";
$email = $_POST['email'];
if(preg_match($valid_email, $email)){
        $message = "Valid Email. You may proceed.";
}else{
        $message = "Please enter a Valid Email.";
}

This is one of the most common, widely used and important regular expression for validating an email address. This matches a string that has all the parts required for an e-mail address. To explain in detail, it will look for one or more lowercase letters, numbers, underscores, dots, or hyphens first followed by @ sign, next it will look up for a domain name which can consist of one or more lowercase letters, numbers, underscores, dots, or hyphens and then it would look for extension which would vary from 2 to 6 characters that can be country specific like .ca, .net, .uk, .com or .co.uk.

Live Demo

Regular expression to match a URL

$valid_url = "/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/";

$url= $_POST['url'];
if(preg_match($valid_url, $url)){
        $message = "Valid URL. You may proceed.";
}else{
        $message = "Please enter a Valid URL.";
}

This one compares the URL where it will first look for http://, https:// or check for it presence at all. Next it looks up the domain name which consists of one or more numbers, letters, dots, or hyphens followed by another dot then two to six letters or dots. The later section “?([\da-z\.-]+)\” is optional files and directories. Then the inside part “.([a-z\.]{2,6})([\/\w \.-]*)” matches any number of forward slashes, letters, numbers, underscores, spaces, dots, or hyphens. Then we say that this group can be matched as many times as we want. Pretty much this allows multiple directories to be matched along with a file at the end. I have used the star instead of the question mark because the star says zero or more, not zero or one. If a question mark was to be used there, we could match only one file/directory. Then a trailing slash is matched, but it can be optional. Finally we end with the end of the line.

Live Demo

Stay tuned and updated for more useful regular expressions to come in future readings.

Free Twitter Background (Layered PSD)

How to change twitter background and colors?

1. Login to you twitter account and click settings on the top menu bar
2. Click design and change background image
3. Click change design colors and use these colors for default design.
   • background: cdd7b5
   • text: 2c311d
   • links: d73030
   • sidebar: cdd7b5
   • sidebar border: ffffff

I hope you like this twitter background!! If you do, don’t forget to share it with your friends and family. I will be creating a few for Christmas as well so do check back again.

A Favicon is a small square icon associated with a website or a web page. In a browser, it is typically displayed before a web page’s address in the address bar and also before the name of the web page in the list of bookmarks, if you add it your Favorites. So “Favorites Icon” is where the name Favicon comes from. Browsers that have tabbed document interface show a page’s favicon next to the page’s title on the tab as well.

How to create a favicon and Why should you use one

By a small square icon, I mean that a favicon is a really small icon measuring 16×16 pixels. You can also create a 32×32 pixels or 64×64 pixels icon. Creating a larger favicon is only useful if user opens up a folder that is set to display large icons. In all other cases, your Favicon will be scaled down to 16×16 pixels to be displayed in the tabs, favorites menu or the address bar.

Why Should You Use a Favicon?

At CSSJockey, making your web presence outstanding is a key point that is always on our mind. One of the ways to make your website stand out from other pages on the WWW is to use a Favicon that represents your website if it’s opened in a browser or saved in someone’s list of bookmarks. You probably know how cluttered can a person’s list of bookmarks or favorites can be. Having a graphic identity in the form of a Favicon is a great way to catch attention.

In this post, we’ll see how to create a Favicon.ICO file in 2 easy ways:

Create a Favicon.ICO using Photoshop

You can create your Favicon offline using Photoshop. This requires that you add a plugin to your Photoshop that allows it to open and save .ICO files. You can download the .ICO Format plugin for Photoshop from Telegraphics. Extract the contents of the .ZIP file and place the “ICOFormat.8BI” file into \Plug-ins\File Formats directory inside the Adobe Photoshop folder where it is installed.

The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons (with 8-bit alpha channel).

Now we can start with a new 16 x 16 pixels canvas but since its  a very small area it can be a little hard to work with. Instead, we can start with a 64 x 64 canvas (because if you plan to re-size an image later, it’s always good to use even multiples of the original dimensions.)

If you already have a logo, try scaling it down to this canvas size. It’s well and good if it holds.. and you can use it. But if it doesn’t look good and crisp, try creating a simple design that uses colors from your website’s design.

When you’re ready with your Favicon design, Select Image>Image Size menu and enter 16 x 16. NOTE: CS versions of Photoshop will have an option called “resample image” – If you’re using a CS version of Photoshop – Check the Resample Image option and choose “Bicubic Sharper” from the drop-down menu. This technique is for optimizing reduction transformation.

Save your image from the File > Save menu, enter a suitable name and select ICO (Windows Icon) .ico from the Format drop down menu.

Create a Favicon.ico from images in other formats using Online Favicon Generators

If you have your website’s logo or an image that you’d want to use as your Favicon in formats other than .ICO such as PNG, GIF, JPEG, etc. you can still Create a Favicon from those using Free Favicon Generators available online.  Here are a few nifty Favicon generators that I have seen around the internet:

1. Dynamic Drive FavIcon Generator

This FavIcon generator supports GIF, JPG, PNG, and BMP formats and you can even use a gif or png with transparency if you require it. However, the maximum image size that you can upload is 150 KB.

2. HTMLKit FavIcon Generator

With this FavIcon generator you simply select a picture, logo or other graphic (of any size/resolution) for the “Source Image”.

3. Favicon.cc

This is my personal favorite! When you open this website, you’re presented with a grid where you can paint each pixel of the grid using any colors from the palette provided alongside and also preview the result of your creativity LIVE just below the workarea. Besides sketching a FavIcon, you can also import an image in various formats and convert them into a favicon.ico file.  You have an additional option to keep the dimensions of the image you choose, or to shrink the uploaded image to a square icon. There are also user generated favicons in two sections – “Latest Favicons” and “Top Rated Favicons” that you can view or download.

How to use your Favicon

After you’ve created your favicon, it’s time to add it to your website. You can do so by following these steps:

1. Upload the favicon.ico file to the root directory of your website. Visit http://your-website.com/favicon.ico to make sure it is present.

2. If your website is a static website with different HTML pages, insert the below code in the HEAD section of your pages:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

If your website is based on WordPress and you’re using a theme, you’ll need to modify the above code as follows:

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('wpurl'); ?>/favicon.ico">

and place it in HEAD section in the header.php file of the theme.

Some people suggest that the following is actually more correct:

You can use both if you want! Clear your browser’s cache, restart the browser and visit your web page. Ideally, you should be able to see your Favicon. However, it must be noted that sometimes the Favicon doesn’t show up immediately. You should try putting a ‘?’ at the end of the URL, which will trick a browser into thinking the page is new and not cached. In some cases the favicon might not show up in Internet Explorer 7. You’d want to add

in the HEAD section to display your Favicon correctly in IE7.

Some Good Looking Favicons and Favicon Galleries

For your viewing pleasure …

1. List of 50 Remarkable Inspirational Favicons – Smashing Magazine
2. 88 Outstanding Favicons
3. Favicon Gallery at FineIcons
4. Favicons at Delta Tango Bravo
5. Fresh Favicon – Inspirational Favicon Gallery

I hope you enjoyed this walk through and if you have something nice to share, please feel free to use the comments form below.

1. As many basic users were not able to figure out how to access the dashboard after activating the plugin and then log out – we added the option to enable or disable a LOGIN Link in the footer of the Coming Soon Page.

For all our basic users out there, I’d like to share a quick-tip :

You can access your WordPress website’s dashboard by visiting:

http://www.your-website.com/wp-admin

This might help you just in case you feel lost, some time.

2. We have made significant changes to the CSS, so now you can display only a Coming Soon message without specifying a heading without breaking the layout of the page (the email subscription form and the footer, more specifically). Also, the style information has been so tailored that it does not conflict with other themes and plugins that you might be using..

3. We have also fixed the issues being created by the date setup and the Count Down Timer – it should work perfectly now.

You can Download Custom Coming Soon Pages Plugin latest version from the WordPress.org Plugin Repository.

We’re absolutely delighted at how well you’ve received this plugin and are constantly supporting us with your inputs so that we can make it even better and serve you better. So please keep your valuable feedback coming! In case you still run into any issues, feel free to post in the Support Forums! We’ll be glad to assist you..