Codepal

Archive for the ‘Blog’ Category

Listify, Convert Raw Text To HTML Elements

Monday, August 30th, 2010

What is Listify?

Listify is a very simple free service for web developers and designers, which allows you to convert raw text to html’s ‘list’ or ‘option’ elements by choosing various options like delimiter, type of lists and ignoring digits. I got this idea when I was working on the Clinova project. I had to insert the names of all the countries in the landing page of the site. To do that, I had to insert all the names within a <select> tag. You can very well understand the kind of time that would have been wasted doing it manually. So I went ahead and wrote a short piece of code in C, which would accept a text file with the country names and generate another text file with the <select> tags appended to the names. It saved a great amount of time which I utilized to do something else (I most probably saw an episode from How I Met Your Mother). Anyway, so when I started with Codeigniter, I thought, rather than wasting my time on creating a demo useless project, why not convert that C program to an online tool. Hence, came Listify.

This is still in Alpha stage and we would love to hear some suggestions for new features that you would like. Drop us a feedback here feedback@code-pal.com or leave a comment here.

How will it help?

Using listify you can speed up your HTML coding process when you need to include large lists or option elements in your code. For example, if you require option elements like country names, then you would have to add the tags to 257 names, which obviously will take some time. Using Listify, it would take just three seconds.

How to use it?

Using Listify is pretty easy. All you have to do is paste the text in the text box above, configure your options as per your requirements and just click on the generate button. You can place any raw text and choose a delimiter to divide it into the list / option elements. Basically, it involves three steps to generete list via Listify:

• Copy text from your desired source and paste it in the text box.
• Paste it in the text box, configure the options.
• Copy the generated list from the dialog box, paste it in your code

Now you can utilise your saved time the way you want to

What are these options?

List Type
This option enables you to choose what kind of list you want generated. Whether it is a list element  for an unordered / ordered list or an option element <option> element for the <select> tag.

Ignore Digits
Many a times there are unwanted numerical digits present in the text which we do not want to be included in the list / option item. This option enables generating the list ignoring the digits present in the text. For example, if you want to convert a numbered list to an unordered list, then just copy the list, select this option and the list items will be generated without the numbers.

Delimiter
A delimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions in the text you want to be converted. It means that how you want your text to be divided into the list elements. For example, if a text is a,b,c and the delimiter is , then the list will be generated as<li>a</li><li>b</li><li>c</li> By default, if no delimiter is entered then it will consider “return” or “new line” as the delimiter. For space as a delimiter, you need to enter space etc.

Let me know if it was useful and feedback for improvements and bugs are most welcome.

Use Listify!

Tags: codeigniter, convert, li, Listify, option, tag, text to html entities, tool
Posted in Blog, Projects | 7 Comments »

Creating a Neon Blink Effect for your Forms using CSS3 and jQuery

Saturday, July 17th, 2010

Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery, I will show you how to build a nifty effect to enhance your forms.

Am sure that this cool Neon blink effects in forms are going to be useful for a lot of purposes so don’t miss my tutorial on 1stWebDesigner.com.

In this tutorial, we have made use of @-webkit-keyframes which works only in browsers using the Webkit layout engine like Chrome and Safari. For browsers like Firefox and Opera, where there is no alternative, we will have to gracefully degrade the effect, which in this case will be just a box-shadow on focus. Internet Explorer ( till version 8 ) cannot render most of what we will learn here, but IE 9 does seem to be very promising from what I’ve seen in the recent platform preview.

Tags: CSS 3, Development, forms, how to, jQuery
Posted in Tutorials | 2 Comments »

Grunge Template

Friday, July 16th, 2010

Psdnation.info is a site dedicated to tutorials, articles, resources and artworks on photoshop. They provide many freebies which includes high quality PSD website templates. They made Grunge available as a fully editable, layered, grunge PSD website template. Professionally designed by them and developed by us, this high-quality freebie from PSDNation is a now also available as a xHTML/CSS template for the web development community. It can be used as a blog template or can also form a basis for CMS integration.

Tags: CSS 3, Dark, Free, Grunge, xHTML
Posted in Blog, Downloads | 2 Comments »

How to Create a Cool Slide Out Panel with CSS3 only

Monday, July 5th, 2010

I wrote a tutorial for 1stwebdesigner.com It is about how to use CSS3 to achieve goals which were only possible using javascript libraries like jQuery and Mootools. In this tutorial, we create a slide out subscribe panel.

Once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor. All of this will be done by just using CSS3.

Don’t miss my tutorial on 1stWebDesigner.com if you want to bypass using javascript to achieve this cool sliding effect.

Tags: coding, CSS 3, Development, how to, tutorial
Posted in Tutorials | 1 Comment »

New Web Host – Our Experience During the Transition

Sunday, June 6th, 2010

We are happy to announce that Code-pal is now being hosted on a new web host – wpWebHost. At the same time we are also sad and are truly sorry for the inconvenience caused to all of you who visited us during the transition phase. Though our previous web host, 000WebHost has been very good to us, we thought it was time to shift to a new one and expand code-pal to new extents. To say something about our previous host, all we can say that 000WebHost has been just great! Even though we used their free hosting service, the site’s downtime was minimal; almost nil and we received all the features any good webhost would provide us. We would recommend them to anyone who is looking to start up his blog and wants a host. Their support was also fantastic and quick.

Now you might be thinking that if we really loved them so much, why did we go for wpWebHost? Well, many of our friends have been using it and they were really happy with it. They recommended it the day we started looking for a new host. So we thought of giving it a try and given the fact that it is a host which is specifically wordpress oriented, it might prove to be a quite good. At that very moment we got the news of their super discount offer because of their newly renovated site. This even confirmed out decision of moving the site to a new host.

During the transition, we were really worried how the whole thing is going to end up after it is all over. We contacted the support of wpWebHost and their reply was quite quick, which was soothing because if something went wrong, there would be some support we could go running to. But the information they provided was not enough. They guided me to a post which mentioned on how to export a Wordpress blog from the Tools panel. We already knew about that (as most of us out there that have been using Wordpress for quite some time). So we thought of discussing our experience of shifting the site from one host to another.

When we move from one place to another, we take all our stuffs along with us; inform the proper authorities about our new address and then set up our moved stuffs in our new home. Shifting from one server to another server is just the same. ‘Our Stuff’ is our website’s content, ‘Our Address’ is the domain name, the proper ‘Authorities’ are the name servers at our domain’s manager. These are the primary steps involved in it.

Step 1. Backing up files

First of all, we just backed up our data, specially the wp-content folder and all the other files in the home directory. So the next time If you are backing up your wordpress site, don’t just backup the wp-content’s folder and also take a look at the files in the home directory because they might contain some identifying html files for various services like Google analytics etc.

Step 2. Downloading the Database

The second step was very important. This is the step where you take back up of your database. We took the backup in all the formats available and downloaded the files at least two times just in case if one of them turns out to be corrupt. I read somewhere that downloading the sql file in gz format via Firefox may corrupt it sometimes. The wordpress codex’s guide to backing up databases was very helpful to us.

Step 3. Updating the DNS

The next step was to update the domain name servers (DNS) at our domain provider’s domain management section. This was the most irritating part of the lot because the DNS updating takes time. It generally takes around 2 to 3 hours but it might even take a day to update it. We were lucky, so it got updated within 3 hours after changing it. This step was again important because we could not access our new host’s ftp without our domains pointing to it.

Step 4. Loading the Data

Once our domain was pointing to the right server, the only part left now was to upload the site on the new host. First of all we installed Wordpress on it. Then going to the phpMyAdmin, we restored the previous database and deleted the newly created one. Again, Wordpress Codex’s guide to restore database was very helpful to us. Once that was done, the last thing left was to upload the wp-content’s folder.

As soon as the theme was uploaded, we went to the backend, activated the theme and any plug-in which was inactive. Our site was the same as it was previously but on a different location. This article was of immense help to us during the whole process and most of our steps were followed as per its guideline. Shifting from one host to another may sound complex but it is not that tough neither that complex. The most important thing is to take proper backups before starting anything and patience.

One Minor Problem

The site was working fine but, there was a problem when we tried uploading any file. The error which came was “Unable to create directory /home/xxx/public_html/wp-content/uploads/20XX/XX. Is its parent directory writable by the server?” The problem was that the database table wp_option still contained some values of our old host’s account name. This messed up the path to the upload directory. As we did not import the website using the wordpress’ default import/export tool, hence this update was not done properly. To solve this issue, we went into the phpMyAdmin, searched the database with that ‘xxx’ term which was creating the entire problem. After all its occurrences where listed, we replaced each one with the new term. This completely solved the problem. We would recommend you to follow this
guide to properly move wordpress from one directory to another within the same server or moving from one server to another

Conclusion

Our experience during the whole transition from one host to another was quite pleasant. We didn’t face any hiccups during the whole process.
How was your experience when you shifted from one host to another?

Tags: 000webhost, dns, Moving, new host, shifting wordpress site, transfer wordpress blog, transferring wordpress database, Unable to create directory, wpwebhost
Posted in Articles, Blog, News | 3 Comments »

The ‘Select’ Problem After Using jqTransform and its Solution

Thursday, February 18th, 2010

The Project

In this recent project of mine, I was required to construct a landing page. In this landing page, there would be a list of languages and after the user selects any particular language, the homepage of the site would open automatically in the respective selected language. It was also required to style the select list box in the way it was given in the design of the landing page. So I opted for the jqTransform jQuery plug-in, which I used once to style some forms. jqTransform is very nice plug-in to customize the forms in a very easy way and the end product is no doubt beautiful. But in this case, it became a minor speed breaker to my progress.

The Problem

The drop down list control of the html form contains the ’select’ tags which enclose the various ‘option’ tags. Here is a form which I am using in this tutorial to explain the problem:

<form>
	<h4>Select Box Without jqTransform</h4>
	<div id="box-city" class="select-menus">
		<label>City</label>
		<br/>
		<select name="select-country">
  		        <option>Gotham</option>
			<option>New York City</option>
			<option>Smallville</option>
		</select>
		<div class="clear"></div>
	</div>
</form>

What jqTransform does is, it scans the whole ’select’ tag and creates an unordered list containing hyper-links of the options in the drop-down-list. It then hides the original ’select’ tag and its content.

<form class="jqtransform jqtransformdone">
	<h4>Select box with jqTransform and normal select change method</h4>
	<div class="select-menus" id="box-name">
		<label style="cursor: pointer;">Name</label>
		<div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
			<div>
				<span style="width: 119px;">Batman</span>
				<a class="jqTransformSelectOpen" href="#"></a>
			</div>
                        <ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
				<li><a index="0" href="#" class="selected">Batman</a></li>
				<li><a index="1" href="#">Robin</a></li>
				<li><a index="2" href="#">Superman</a></li>
				<li><a index="3" href="#">Spiderman</a></li>
			</ul>
			<select name="select-country" class="jqTransformHidden" style="">
	 				<option>Batman</option>
					<option>Robin</option>
					<option>Superman</option>
					<option>Spiderman</option>
			</select>
		</div>
		<div class="clear"></div>
	</div>
</form>

This does not create a problem when we use the ’select’ tag generally for selecting a particular value and then performing the form submission by using a submit button. It creates a problem when we want to perform some function when the value of the drop down list is changed.

This is normally achieved in javascript by using the ‘change’ method of the select control. The ‘change’ method captures the value-change event and we can access the value selected by the user in the following manner.

// Capturing the change event of the Non-Transformed Select Box.
$("#box-city select").change(function(){
	var value= $(this).val();
    alert("Value Selected = "+value);
});

But after using the jqTransform plugin, the ’select’ tag is no more there to apply the change method on.

The Solution

The solution to this, is a very simple one. We can simulate the change event for the jqTransformed drop down list by applying a click function to the hyper-link element within the unordered list. Then we can have the selected value by accessing the text of the span tag where the selected element is set or displayed.

// Capturing the change event of the Transformed Select Box using the modified method of capturing the value change event.
$("#box-age div.jqTransformSelectWrapper ul li a").click(function(){
	var value= $("#box-age div.jqTransformSelectWrapper span").text()
	alert("Value Selected = "+value);
	return false; //prevent default browser action
});

Conclusion

This is one way of simulating the change function for drop-down-list boxes after using jqTransform to customize them. The other option is to modify the jqTransform plugin itself to properly access the onChange event of the ‘Select’ boxes. I hope the jqTransform plug-in developers can fix this problem in their next release of the plug-in. Though this is not a very important or common bug but I do hope that this was of some help.

Tags: CSS, forms, jqTransform, jQuery
Posted in Tutorials | 37 Comments »

Spice Up Your Twitter Feed Display Box Using CSS

Friday, October 23rd, 2009

For a very long time now there has been this trend of displaying tweets on the website’s sidebar, footer or the header. Many designers have designed ingenious ways of displaying the tweets by creating beautiful eye-catching illustrations containing them. The main purpose of making them visually attractive is so that the visitors can get interested and read the fresh updates that the site’s owner is providing. What this tutorial is going to do is enable to you to make your twitter feed display box interactive so that your visitors can go ‘wow! That’s pretty cool’ when they visit your site or read your feeds. So here it goes:

Step 1. How do I insert the feed in my website?

Inserting your twitter account’s feed in your website may become tricky. It’s a good thing there are so many tutorials out there which provide you with the knowledge of inserting these feeds easily. Here are some resources which will enable you to get the feeds from twitter onto your very own site:

1.Designing a Unique Page for Twitter Updates
2.10 Awesome Ways to Integrate Twitter With Your Website
3.Tweet!

Wordpress users can use some awesome plugins to get their twitter feed on their site:

1.35 Awesome Twitter Plugins for Wordpress
2.Juitter
3.jQuery Plugin For Twitter

Step 2. Creating the image sprite.

Now that you have successfully learned how to import the twitter feed, it’s time to configure the display area. For this tutorial, I am going to use the same design for the twitter box as I have used in this site’s footer i.e. a twitter bird staring at the tweets.

What our primary aim is that when ever the user hover’s over the twitter feed box, some action is going to take place. In our case the twitter bird will look towards the user.

You can create designs like this using various twitter icons made by some wonderful designers who love to share their work with the web community. Here is an ultimate source to these icons.

100+ Remarkably Beautiful Twitter Icons And Buttons (Always remember to ask the designer first before using these icons.)
Free vector icon set by ProductiveDreams.com

I have used the icons made by ProductiveDreams. After creating a simple box in photoshop. Place the normal twitter bird icon i.e. the one with the cross sectional view of the bird, at the bottom right side of the box such that the bird appears to be looking inside the box. Now paste the other twitter bird icon, the one which appears to be looking towards the viewer.

Then push the tilted bird icon above the older icon which you placed at the bottom right corner of the box such that it appears like a two headed twitter bird as shown below

Now hide the tilted twitter bird icon and properly mark a square containing the normal twitter bird using guide lines. Make sure that both the tilted and the normal bird fit properly in the same square made by the guidelines.

Crop the image with the normal twitter bird icon along the guidelines and open a new file and paste it there. Then check the height of the cropped image and increase the canvas size by that amount vertically. This is done so that you can paste the tilted twitter bird version on the same canvas to give the final touches to the image sprite.

Hide the normal twitter bird icon and make the other tilted bird visible. Then crop the image again along the guide lines just as you did for the previous image. Copy the image and paste it on the newly created canvas where you pasted the other image. Adjust the images so that they properly fit the whole canvas. Your image sprite is ready for use and should look like this:

Step 3. Coding the bird to life!

The html skeleton of the twitter feed box is going to be a simple one. There would be a main container div containing the twitter feed, the bird and an optional “Follow Me” link.

<div id="twitter">
	<a href="http://twitter.com/SumeetChawla" id="twitter-link">Follow Me!</a>
	<div id="twitter-bird"></div>
	<!--Your Twitter Feed Comes Here-->
</div>

The CSS for the ‘#twitter’ container div is very simple. The ‘#twitter-bird’ div is going to contain the bird. It should have half the height of the original sprite we made because only one of the two images in the sprite will be displayed. Using CSS sprites is a good practice because it reduces server requests, hence decreases the load time and prevents the sudden flashes of the image when hovered upon for the first time.

The twitter bird div should be floated to the right and a negative margin should be assigned to it so that the bird appears to be some what outside the container div. Make the background position ‘top’ so that the normal twitter bird is displayed. To give the finishing touches to our twitter feed box, just change the background image position of the ‘twitter-bird’ div to ‘bottom’ when ever the user hovers over the container div.

#twitter {
	color: #658097;
	position: relative;
	width: 332px;
	height: 122px;
	background-color: #1f1f1f;
	border: 1px solid #414040;
	background-position: left bottom;
	background-repeat: no-repeat;
	padding-left: 10px;
	padding-top: 10px;
}
#twitter-bird{
	background-image: url('images/twitter.jpg');
	background-position:top;
	position: relative;
	float: right;
	margin-top: 32px;
	margin-right: -75px;
	width: 101px;
	height: 100px;
	background-repeat: no-repeat;
}
#twitter:hover #twitter-bird {
	background-position: bottom;
}

To see how the final result would look like, just scroll down to the footer at the bottom of this page.

Examples

Gopal Raju from ProductiveDreams has made his twitter feed look very lively and bright. The twitter bird is interactive in a very friendly and casual way. It winks and displays the total number of followers that he has.

Before Hovering:

After Hover:

This was the only site I could find which made the twitter feed box interactive. If you guys find any other site which follows this trend just post about it in the comment and I will make sure to add it here.

Tags: CSS, display feed, feed, how to, sprite, Twitter
Posted in Blog, Tutorials | 14 Comments »

How to Code an Overlapping Tabbed Main Menu

Wednesday, October 14th, 2009

There are various styles and techniques of creating a tabbed navigation menu and one of them is the tabbed overlaying or overlapped style in which each tab appears to be lying over the other and hence giving the whole menu a very realistic feel. While designing my site, I went through lots of inspirations and tutorials. One of them was this tutorial called Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it! Written by Collis from NetTuts.com This ended up being the main inspiration for my site and while going through the tutorial I found Collis saying that:

” Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. Unfortunately this also makes them harder to work with in HTML. You can however do a variety of things with transparent PNGs, or alternately just make text change colours in rollovers and not worry about changing tab colours. Anyhow this is all a bit beyond the scope of this tutorial. Suffice to say the menu might be a bit tricky to build. “

So I tried coding one into html and after I succeeding thought of sharing it with you all.

Step 1.Gearing Up

So before starting to code this kind of a tabbed navigation into html/css code, you first have to learn how to create one in photoshop first. The above tutorial is very detailed and Collis does a great job in teaching how to build such a menu in photoshop. I have built one simple one specially for this tutorial.

Now let me specify that there are three states of the tab.The inactive state is grayish in colour, the active state is deep blue and the hover state is light steel blue colour. Hence, rather than slicing up three images for each tab, we can slice out an image sprite.

Step 2. Slicing The Tabs From the PSD

Align the tabs vertically using grids as shown in the image above. You can also align the tabs horizontally rather than vertically but then the CSS background image position will be accessed in a different way. The choice depends on person to person but both work perfectly. While cropping the image follow the guidelines properly and note that I have made the background transparent because we will be needing a transparent background if we need to overlap the tabs. Crop the image and save it for web in PNG24 format. One more point to note while slicing up the images is that the first tab i.e. the ‘Home’ tab should not be having any shadow on its left edge in the inactive state. Hence, for that specific tab we have to create another sprite without the shadows in it.

Step 3. Code Away

Now that our slicing is complete and we have all the images needed we can start coding our navigation bar. Just to make the example look good, I have constructed a sample featured content area layout with the overlapped navigation bar. The whole layout looks like this:

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="page-wrap">
		<ul id="main-nav">
			<li class="current"><a href="index.html">Home</a></li>
			<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
			<li class="services"><a href="services.html">Services</a></li>
			<li class="about"><a href="about.html">About Us</a></li>
			<li class="contact"><a href="contact.html">Contact</a></li>
		</ul>
		<div class="clear"></div>
		<div id="featured">
			<div id="featured-content">
			</div>
		</div>
	</div>
</body>

</html>

Lets look at our main navigation menu. I have used a simple unordered list as any other navigation bar and styled it using a background image to the list’s hyperlink tag.

<ul id="main-nav">
	<li class="current"><a href="index.html">Home</a></li>
	<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
	<li class="services"><a href="services.html">Services</a></li>
	<li class="about"><a href="about.html">About Us</a></li>
	<li class="contact"><a href="contact.html">Contact</a></li>
</ul>

ul#main-nav li {
	float: left;
	position: relative;
	display: inline;
}

Remember that we are using an image sprite for the tabs in which the top most tab represents the active state, the middle represents the inactive state and the bottom represents the hover state. Hence, we will use the ‘background-position’ property to properly place the images to their respective state as follows:

ul#main-nav li a {
	position: relative;
	width: 110px;
	height: 29px;
	display: block;
	background-image: url('../images/tabs.png');
	background-position: center center;
	color: #44403b;
	text-decoration: none;
	font-size: 14px;
	padding-top: 12px;
	text-align: left;
	padding-left: 30px;
	font-weight: bold;
}
ul#main-nav li.home a {
	background-image: url('../images/tab-home.png');
}
ul#main-nav li.current a {
	background-position: top;
	color: #ffffff;
}
ul#main-nav li a:hover {
	background-position: bottom;
	color: #ffffff;
}
ul#main-nav li.current a:hover {
	background-position: top; /*To Prevent the Current tab from changing colour on hover*/
	color: #ffffff;
}

You will notice that I have given a relevant class to each of the list elements and a class named ‘current’ to the tab which is for the current page. This is done so that I can assign different z-index values to each tab in an ascending order such that each tab lies at a higher z-axis than the tab following it. The tab with the class ‘current’ will lie at the highest order of the z-axis because it represents the current page and will always stay on top irrespective of it’s position in the list. Before applying the z-index values, make sure that the position attribute for the list element is set to relative. Without any positioning value the z-index property won’t work at all.

ul#main-nav li.current {
	z-index: 100;
}
ul#main-nav li.home {
	z-index: 100;
}
ul#main-nav li.portfolio {
	z-index: 99;
}
ul#main-nav li.services {
	z-index: 98;
}
ul#main-nav li.about {
	z-index: 97;
}
ul#main-nav li.contact {
	z-index: 96;
}

Even though we have assigned different z-index values to the tabs, they still don’t appear over lapped and will look like this:

To give the finishing touches to our navigation bar, we have to push each tab on top of the other. We have assigned the z-index values in descending order from left to the right. Hence, we will just push each tab starting from the right to about 20px to its left by adding a negative ‘margin-left’ property to the ‘ul#main-nav li’ and push the whole navigation bar unordered list to the left by adding a positive 20px ‘margin-left’ to nullify the left wards movement of the bar.

ul#main-nav {
	margin-left: 20px;
}
ul#main-nav li {
	float: left;
	position: relative;
	margin-left: -20px;
	display: inline;
}

Mission Accomplished

After assembling all the css and the xhtml together, we will have our overlapped tabbed main navigation menu ready for use. This was my take on how to create this kind of a menu and am sure there are many better ways to do the same. I would be glad if you could share any other way of doing this or just discuss some improvements to this procedure itself.
Here are some site which use over lapping tabs as their main navigation menu:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tags: CSS, how to, menu, navigation, over lapped
Posted in Blog, Tutorials | 34 Comments »

Orange

Tuesday, October 6th, 2009

PSDTemplate.com is a great site providing some really cool website templates created in photoshop. They have a section of premium PSD layouts where they release a layout every day. They also have a free PSD layout section where they release good quality layouts available free of cost. They released Orange as one of the free PSD templates and we have coded it so that people who want to have the xHTML/CSS version of this awesome template can have that too!

Tags: CSS, Free, PSD, Template, xHTML
Posted in Blog, Downloads, Portfolio | 4 Comments »

Summer of Love

Monday, September 28th, 2009

SloDive recently posted an article named 40 Free PSD Website Templates. This is an excellent resource for designers who don’t want to start from scratch with their designing process or for developers who are not very good at designing. This xHTML/CSS template that we have coded for you guys can easily be integrated with any content management system. It is purely table-less and semantically correct for SEO purposes. Go ahead, download it and start your own band or organize a music event!

Tags: CSS, Free, PSD, Template, xHTML
Posted in Blog, Downloads, Portfolio | 3 Comments »

Personal Computer Assistant

Sunday, September 27th, 2009

Personal Computer Assistant is a very simple application and has very common features. Anyone who uses a computer a lot will be benefited by it. This was developed by myself and a very close friend of mine, Rakesh. Below is a demo graphical user interface which shows how the software looks like and how the user can interact with it. The main buttons in this demo GUI are interactive and you can click on them to know more about the different features.

Once installed the application minimizes itself to the system tray. Whenever you click on it, the main window is maximized and the emergency note pad is in focus automatically. I implemented this feature because many a times I needed to scribble something and had to start notepad. So I thought this would faster and comfortable for me. After writing in the emergency notepad, you can save it anywhere you want. The application is still in Beta phase. You can download and check it out. Don’t forget to comment!

Requirements:

Windows Installer 3.1

Microsoft .NET Framework Version 2.0

Supported Operating Systems:
Currently only supported in Microsoft Windows XP and Windows operating systems before that.

Download

Tags: application, manager, pca
Posted in Blog, Projects | 8 Comments »

The Launch!

Thursday, September 24th, 2009

Code-pal started as a company which provides PSD to XHTML/CSS services. But since our first launch, in January 2009, we have grown with time and expanded our range of services. The previous version of code-pal was a very dark themed website and was more of a fun site rather than a professional one. There were many drawbacks of the previous version. To name a few, it was a static site and as our work experience grew, it was a very time consuming task to update our portfolio at regular intervals. The biggest disadvantage was that there was no blog. The main aim behind redesigning the site was to integrate a blogging system within the site where we can share, learn basically interact with the web community.

This is how the homepage of our previous site looked like:

The main features of this new site are as follows:

The home page consists of a giant portfolio viewer, order form, a feed of what our client’s say about us and a recent blog post section. The portfolio is a simple page consisting of all the work we have done till now some details about each of them. The services page enlists all the services we are currently providing.

In the project section, we are going to display all the projects and research work we have worked upon or are pursuing. The download section is going to consist of a wide variety of freebies which you can download and share. At present, we are going to start by providing free xHTML/CSS templates and later on we will be increasing our stocks with different stuffs like wordpress/joomla themes. We are also working on a windows desktop application at present and soon will be launching a free version of it too.

The blog section is going to be all about tutorials, articles, news and stuffs. Initially, we are going to start writing about coding and web development only. There are loads of awesome web development communities out there and we want to pitch in with whatever we can to help this web community grow and prosper. This can only be possible if we receive the same love, support and encouragement from you.

The homepage of the new site looks like this:

Even before the officially launching the site, we have provided two templates for download. Over the new few days you might constantly see some changes here and there. We are still in the process of completing the whole design process and fixing stuffs here and there. Please feel free to review our site. Don’t hesitate to comment if you like the redesign or even if you hate it. Of course let us know the reason behind it too. We warmly welcome suggestions on how to improve it further.

-Sumeet Chawla

Your friendly neighbourhood coder.

Tags: Launch, News
Posted in Blog, News | 2 Comments »

Business Template

Tuesday, September 1st, 2009

Business template is a free PSD Template designed by Dellustrations and is available for download at DelliBlog. We transformed this PSD template into valid xHTML/CSS code for people who want to download the code along with the PSD template.

Tags: CSS, Free, PSD, Template, xHTML
Posted in Blog, Downloads, Portfolio | 6 Comments »