So I’ve been wanting to do this for quite a while now, and now that I’m clearing my plate of a lot of work I thought now would be the perfect time to get a little more serious about blogging.

Get yourself setup

As a quick overview of where my blog is at the moment:

The blog uses Wordpress 2.8.4 as the base (at time of writing). If you don’t have a blog setup yet, Wordpress is my recommendation

• You can host your own version by grabbing the code from here (recommended)
• Or you can host your blog at wordpress.com if you want a cheap and quick option

While I have a few niche articles already on this blog that are attracting a few hits, when it comes down to it, this blog is pretty bare and without direction at the moment, but that’s all about to change.

Pretty it up a bit

First of all, the site is in need of a new design and instead of forking out the cash for a custom design and build, I’ll be searching around for a nice, neat design to use, while there’s literally hundreds of out there that can showcase the creme de la creme, here’s a few that I went through looking for what best matched what I wanted to portray.

• http://themeforest.net
• http://topwpthemes.com/
• http://www.crazyleafdesign.com/blog/top-50-free-wordpress-themes/
• http://sixrevisions.com/wordpress/40-excellent-free-wordpress-themes/
• http://www.smashingmagazine.com/2007/02/09/83-beautiful-wordpress-themes-you-probably-havent-seen/
• http://www.smashingmagazine.com/2008/01/08/100-excellent-free-high-quality-wordpress-themes/
• http://wordpress.org/extend/themes/

I opted to go with a template from http://themeforest.net for the pure reason that I know less people will have this template due to having to pay for it. At a later date I may have a custom design made up, but for now this will serve me quite well.

What’s next?

In the next article, I’ll put forward how and where to get inspiration on what you can write about. In the mean time though, you have some homework to do, go get your base blog setup.

To really help you all out, I’ll need to know what else would you like to know in setting up a blog to make money?

This application is built using the CodeIgniter base and the MVC approach, and comes with the CodeIgniter userguide, which is located in the user_guide directory. For more information on CodeIgniter, please visit www.codeigniter.com

A full demo of the tool is at http://mls.subooa.com (the admin area is still private as this is a running site, you’ll have access to your own admin area when you setup your site)

First of all, you’ll need to download the package which you can get from Themeforest at the following location:

http://themeforest.net/item/my-link-shortener/51104

So lets get started…

Create a new database called mls (you can change this if you like, however you’ll need to edit the database.php file to suit)
Run the database.sql file on that database using your preferred method (import using phpmyadmin for example).

The following files need to be modified to match your environment:

application/config/database.php
application/config/config.php
application/config/site_config.php

You will also need to change the about and terms page content to reflect your own site.
The files are located in the application/views folder as about.php and terms.php respectively.

Finally, you’ll need to edit template.htaccess, if you want to run this in a folder you’ll need to place the folder name before index.php (e.g., /folder/index.php ), otherwise the entry should read just /index.php. Rename template.htaccess to .htaccess

And that’s all there is to it! You now have your very own link shortening tool setup and running. If you have any questions / issues with the app, please post them on the discussion page on the item on Themeforst, not here as other people will also be able to benefit from the responses.

1. The Roadmap To Becoming A Professional Freelance Web Designer (SmashingMagazine.com)

A fantastic and fully loaded list that will guide you from your first thoughts of freelancing, right through to how you should safely bill your clients.

2. 80+ Must-Read Design Blogs to Enhance your Creativity and your Career (CreativeOpera.com)

A huge list of blogs that will keep your creative juices flowing, organised into groups to help you find exactly what you are looking for. Caters for everything from design right through to development.

3. 50+ Tools To Make You a More Efficient & Organized Designer (DesignReviver.com)

Another great list of blogs and tools that are mainly for developers, that will both help you work faster and more efficiently.

4. How to become a freelance web developer (NetTuts.com)

This article touches on all the main points that you really need to think about before diving straight into starting freelance work, like where to start, how to bill, how to market yourself, and what to charge.

5. Freelance Switch (blog and forum)

This site should never be far from your mind, the blog is very frequently updated by other freelance developers with tips and experience stories that are well worth a read. There’s a forum for like minded freelancers that you should get involved in, and finally there’s the jobs board full of job opportunities.

6. GuerillaFreelancing.com

While not quite as fully rounded as freelanceswitch.com, this site is a fantastic resource of articles, tips and ideas for freelancers.

7. 53 Steps to follow if you want to become Freelance Web Designer/Developer (SpeckyBoy.com)

Quite a large list of items you should consider before making the full switch over, for the items that aren’t quite so straight forward there’s often a link for further reading should you need it.

8. FreelanceFolder.com

A similar site to freelanceswitch.com, this site contains a blog, forum, and jobs board dedicated to freelancing.

9. 10 “Nos” for Freelancers (WakeupLater.com)

When starting out, it’s easy to take shortcuts to get the job, but this article points out what you should never compromise on.

10. Rockstar Freelancer eBook (RockablePress.com)

Saving the best until last, Rockstar Freelancer is a brilliant 200+ page eBook which goes into detail on every aspect you can think of whether you are just starting to think about freelancing, or have already made the move and want to sharpen your processes. At $29, it’s a tiny investment to make in yourself and getting things right.

A quick demo of what this article will build can be seen here:
http://blog.subooa.com/example/randomfadingrotator/images.html

First of all, setup a list of elements on your page something like below:

 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
		<script src="rfr.js" type="text/javascript"><!--mce:1--></script>
<div id="rotating_items">
<div class="rotating_item">
				<img src="first_image.jpg" alt="" /></div>
<div class="rotating_item">
				<img src="second_image.jpg" alt="" /></div>
<div class="rotating_item">
				<img src="third_image.jpg" alt="" /></div>
</div>

Viewing the above code will show you a simple list of images in an unordered list, nothing fancy at all, so to get the items in the right place and remove the default styling we need to generate the css file (which as you may have noticed we are going to call rfr.css)

body {
	font-family: "Trebuchet MS", "Geneva CY", Verdana;
	font-size: 12px;
	color: #414141;
}
 
h3{
	font-size: 18px;
	margin: 20px 0px;
}
 
#rotating_items{
	position: relative;
}
	#rotating_items h3{
		margin: 0px;
	}
 
	#rotating_items div.rotating_item{
		position: absolute;
	}

Again, there’s nothing overly complicated in this set of css classes, all that is happening is that each of the elements is being told to display on top of each other, so refreshing your page now you will see only one image. The other images are tucked in behind it, ready to be rotated through.

Now comes the fun part, the javascript. Again, you may have noticed that this javascript file we are going to call rfr.js

As noted earlier, we’re going to pick an element at random from the list available to fade in while the current image fades out.

jQuery(document).ready(function(){
	showing = jQuery('#rotating_items div.rotating_item:first'); // Initiate the 'showing' variable as the first rotating_item
	showing.siblings('div').hide(); // Hide all other rotating_items
	setInterval("show_next_rotating_item(showing)", 5000); // Set the rotate time to 5 seconds
});
 
// Below is the code that picks an item at random to display
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
    random: function(a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
        };
        return i == jQuery.jQueryRandom;
    }
}); 
 
// The below function repeatedly gets called, to do the rotating
function show_next_rotating_item(t){
	jQuery(t).fadeOut('slow');
 
	var next_rotating_item = jQuery(t).siblings('.rotating_item:random');
	if(!next_rotating_item.attr('class')){
		next_rotating_item = jQuery('#rotating_items div.rotating_item:first');
	}
	next_rotating_item.fadeIn('slow');
 
	showing = next_rotating_item;
}

The main things to notice here are the ‘random’ extension of jQuery, and the use of the randoms selector when using the ’siblings’ function call. This allows is to pick a random sibling element of the element that is currently being displayed.

This can be used with pretty much anything, including content based divs. The example here:
http://blog.subooa.com/example/randomfadingrotator/testimonials.html
Shows a set of testimonials that rotate at random, the added bonus here if you view the javascript source for this version, is that the entire element becomes a hot spot for the link, so the use can click anywhere on the item. It also has some extra code in there to allow you to track the clicks as an event in Google if you so wish.

The raw base

To start off with, we’re going to at least need some sort of menu structure to get us going. For this, the best way to structure the menu is using an unordered list (ul), nesting your submenus as you go. Below is the example we’re going to use in this demo it its raw unstyled format.

(The running demo is here – http://blog.subooa.com/example/css_jquery_dropdown.html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Creating a dropdown menu with jQuery and CSS</title>
	</head>
</html>
<div id="mainmenu">
	<ul>
		<li><a href="#">Menu item 1</a>
			<ul>
				<li><a href="#">Submenu item 1</a></li>
				<li><a href="#">Submenu item 1</a></li>
			</ul>
		</li>
		<li><a href="#">Menu item 2</a></li>
		<li><a href="#">Menu item 3</a></li>
		<li><a href="#">Menu item 4</a>
			<ul>
				<li><a href="#">Submenu item 4.1</a></li>
				<li><a href="#">Submenu item 4.2</a></li>
			</ul>
		</li>
		<li><a href="#">Menu item 5</a></li>
	</ul>
</div>
</body>
</html>

Opening that in a browser is going to be pretty plain, something like this:

A little css

For the sake of this tutorial we’re only going to give the menu a basic look and not get too fancy. So we’ll just create a nice green and black menu.

The nav we are going to create is going to be a left to right manu, with the second level popping out below its parent, so we first need to order the items left to right and get the submenu it the right position. (To keep it simple, the style is going to be added to the same file and not extracted into a saperate stylesheet)

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

	<style type="text/css">
 
		body{
			margin: 0px;
			font-family: Arial, Verdana, Helvetica, Sans-Serif;
		}
 
		#mainmenu ul{
			width: 100%;
			height: 30px;
			background-color: #393;
			margin: 0px;
			padding: 0px;
			font-size: 12px;
		}
			#mainmenu ul li{
				float: left;
				list-style: none;
				margin: 0px;
				position: relative;
				height: 30px;
				width: 100px;
			}
				#mainmenu ul li a{
					display: block;
					padding: 0px 10px;
					height: 30px;
					line-height: 30px;
					color: #FFF;
					text-decoration: none;
					border-right: 1px solid #363;
					border-left: 1px solid #3c3;
				}
 
				#mainmenu ul li ul{
					width: 170px;
					position: absolute;
					left: 0px;
					float: left;
					clear: left;
				}
					#mainmenu ul li ul li{
						background-color: #000;
					}
						#mainmenu ul li.hover ul li a{
							border-width: 0px;
							border-bottom: 1px solid #CCC;
							background-color: #000;
							height: 29px;
							width: 150px;
						}	
	</style>

Hiding the submenu

Now that the menu is working and displaying as we want it to, now we need to hide the submenu by default and setup the style for the hover state.

Change the left value for the “#mainmenu ul li ul” class to be off the screen somewhere (we’re using -12000px here) and add a new hover class for the list item, which moves the ul back to where we just had it when the user hovers over the main menu item.

40
41
42
43
44
45
46
47
48
49
50

				#mainmenu ul li ul{
					width: 170px;
					position: absolute;
					left: -12000px;
					float: left;
					clear: left;
				}
 
					#mainmenu ul li.hover ul{
						left: 0px;
					}

Adding the jQuery event… the fun part

Up to this point, the file could run as a standalone HTML file, and with a little extra CSS could actually work in a lot of browsers, but there are many out there that don’t support using the “:hover” on list items, so we need to make use of some javascript to tell the browser to react when the user hovers over the main menu items. So first step here is to actually load the jQuery javascript:

63
64
65
66

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		jQuery.noConflict();
	</script>

(The no conflict line has been added in cases where people may already be calling a javascript file that makes use of $, it prevents us from running into any javascript code conflicts)

And now here is where the magic happens, using jQuery you can ‘chain’ function calls one after the other without having to do each function call on an element on its own line which cuts down the file size and keeps things neat and together.

64
65
66
67
68
69
70
71
72
73
74
75

	<script type="text/javascript">
		jQuery.noConflict();
 
		jQuery(document).ready(function(){
			jQuery('#mainmenu').find('li').mouseenter(function(){
				jQuery(this).addClass('hover');
			}).mouseleave(function(){
				jQuery(this).removeClass('hover');
			});
		});
 
	</script>

Finally, just to top things off we need to add some hover colors to the menu items.

63
64
65
66
67
68
69

 
				#mainmenu ul li.hover a{
					background-color: #3c3;
				}
				#mainmenu ul li ul li.hover a{
					background-color: #333;
				}

And that’s it, a fully functional CSS dropdown using jQuery. In a later article, I’ll cover adding a slight animation and also adding multiple levels of dropdowns.

Demo and full code

Here’s the running demo – http://blog.subooa.com/example/css_jquery_dropdown.html
In case you got a little lost along the way, you can download the full code here to play with – css_jquery_dropdown.zip

This article came about while I was building a custom Joomla component at work, the component required a multi step form that stayed on the same page. So data needed to be grabbed from the database and displayed on the screen as the user was filling in the form.

I wont go into the details of making a custom component as that is outside the scope of this article, more information on that can be found here, instead we’ll just grab an article assuming that it belongs to a menu and has the Itemid of 10 (you can call absolutely any component you like, as long as you know the non SEF link to the page you are after).

First of all we need to load jQuery, we’ll load this from Googles server to reduce the load on our own server

1
2
3
4

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	jQuery.noConflict();
</script>

We’ll also need to setup a new file in the /templates/system/ folder called barebones.php that will be called when we make our Ajax calls instead of the normal template so that the data returned doesn’t include the main template, css, javascript etc. Create the file, and enter in the following:

1
2
3
4
5
6
7
8
9
10
11
12

<?php
/**
 * @copyright	Copyright (C) 2009 subooa.com. All rights reserved.
 * @license	GNU/GPL, see LICENSE.php
 * @author	Chris Duell (subooa.com)
 * barebones is a stripped template by subooa. 
 */
 
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<jdoc:include type="component" />

Now to making the Ajax call, you will need a place to put the data once it is loaded, so create a div with the id of “ajax_here”.

Using jQuery, the Ajax call is pretty striaght forward:

1
2
3
4
5
6
7
8
9
10

jQuery(document).ready(function(){
	jQuery.ajax({
		type: "GET",
		url: "index.php",
		data: "?Itemid=10&tmpl=barebones",
		success: function(html){
			jQuery("#ajax_here").html(html);
		}
	});
});

Quickly stepping through this, we are making a call to index.php and requesting the article associated with Itemid 10, and after the data is received adding it to the div that we created earlier that has the id of “ajax_here”. But most importantly, we explicitly call the “barebones” template so the data returned and entered into the div is ONLY the output for the component, nothing more.

I highly recommend using Firebug as you are developing and testing this so that you can see if the Ajax calls are being correctly made, and the expected results are being returned.

This article is quite basic on purpose, however if you would like more information just leave a comment.

CushyCMS is a hosted solution that allows you to build static HTML pages, without the need to install anything extra. This means it is independant of platform, you can use it on a Windows based server, or a Unix based server, the results are the same.

You will of course need to sign up to CushyCMS in order to use the solution, but it’s a very simple process and is free.

Once you’ve signed up, you will be asked to add a site to your account which will require details such as the server name and FTP details so that it can make the adjustments to the site as you make your changes. After adding a site, you will need to add a page to list as editable, clicking on the ‘assign page to site…’ link will bring up a list of files (using the FTP details you entered for the site). Click on the file you want to be able to edit, give it a name, and click the ‘assign page’ button.

You’ll now see that page in your list, and you’ll be able to click through to the edit page. Doing so now though, CushyCMS wont know which parts of the page you want to be editable, so lets go ahead and put in some code to let it know.

Jump into your favourite editor and open up the original file. All you need to do is give all the elements you want to be editble the css class “cushycms”. For example:

1

<h1 class="cushycms">My editable title</h1>

Once you’ve added this class to all the elements you want to be editble (including images that are auto resized!) save the file and add it to the server you have hooked up to CushCMS, and go back to the edit page in CushyCMS.

That’s it. Done. Simple right!

It doesn’t stop there though, as the main developer, you can also give access to your clients so they can maintain their own content. You can even assign only certain pages to them if you want to restrict their access. When you add a new “editor” the client will receive an email with their login details, and they will have a simplified view of the admin area and be able to edit the content for only the pages you have allowed them access to.

So next time you build a small site that still needs CMS capabilities, keep CushyCMS in mind.

There are a few other libraries out there that allow for the creation of rounded corners, where CurvyCorners differs though is that it only attempts to make the corners with Javascript if the browser being used doesn’t support CSS3 (for those unaware, rounded corners is supported in CSS3, however CSS3 is not available in browsers that hold the highest market share just yet).

So if the user is browsing your site on say Internet Explorer 8, the normal CSS3 rounded corners will be used. If however the user is browsing your site using Internet Explorer 7, the Javascript will kick in and create the rounded corners.

Using CurvyCorners couldn’t be simpler, first you’ll need to obtain a copy which you can get either as a full download here, alternatively you can get the latest version from subversion from http://curvycorners.googlecode.com/svn/tags/2.0.x/stable (or if you live on the edge, the latest development code is at svn co http://curvycorners.googlecode.com/svn/trunk).

Once you’ve downloaded the code and placed it with your other source files for your site, and loaded it in your site as you would any other Javascript file, you’ll just need to edit your CSS file to determine which of your elements you would like to give the rounded corners to.

Let’s say you wanted to wrap your entire site in a rounded box, and your existing wrapping container was a div with the class “wrapper”. Simply edit your CSS declaration for the .wrapper class similar to the following

1
2
3

.wrapper {
-moz-border-radius:3ex;
-webkit-border-radius:3ex;

As you can probably guess, the webkit section is for CurvyCorners to pickup if the CSS3 “-moz-border-radius” isn’t supported by the browser.

There are a myriad of settings available for the script, along with the ability to call the script dynamically in cases where the box would be displayed as the result of an Ajax call.

For full instructions, check out CurvyCorners.net

The main goal behind the blog is the same as it was before, however I want to try my hand at writing up not only tutorials, but also roundups. I’m often looking for particular solutions to a problem, and come across a few good ones, so now I’ll post all the good stuff I find in those searches so you can decide for yourself what’s right for you, not just see what I end up using in my work.
I’ll also be putting in here any notes on current projects including TwitterHawk, LoudNLocal, Biddy, Ensuites On Tow and more.