Freelancing Riches

Founder of the Freelancers Union Sara Horowitz explains why the self-employed are a bigger factor in today’s economy. Check out this video from CNNMoney:

It’s happened to all of us. We start off with the best of intentions in creating a new habit of backing up every day, and we’re committed to sticking to it. But just like any diet or New Year’s resolution, “real life” creeps in and pulls your attention away towards more important things.

At first you only skip a day here or there. But eventually, days turn into weeks and months. This is only natural, considering the busy lifestyle that most freelancers have.

That’s why, when it comes to backing up their data, freelancers really love the automation and convenience that comes with online backup services. You just install the software once, and you never have to think about it again until something bad happens. You can just feel safe knowing that it’s there, working in the background for you.

However, there are MANY different services to choose from. And prices range from FREE to $10 per GB. With so much variety, how can you pick a solution that’s right for you? Well here are a few features that freelancers should keep in mind when looking into automating their data protection:

Automation and ease of use
Because freelancers work alone, they don’t always have access to reliable technical staff. For this reason, you’ll want to pick a solution that installs quickly and runs fully-automated in the background while you work.

Also, since your time is the only product that you have to sell, you can’t afford to spend hours learning how to use a new application. It has to be intuitive enough to start using right away. That’s why any new software you buy has to be very easy-to-use in order to minimize the learning curve and prevent any problems down the road.

Continuous protection
Every freelancer has had the experience where they’ve pulled an all-nighter, working 12-hours straight for an important deadline, only to have something disastrous happen at the last second.

In order to prevent this, you’ll want to select a provider that offers Continuous Data Protection (CDP) capability. CDP simply means that the software will back up your data files every time you save instead of waiting until a scheduled daily backup time. This means that your potential “window” for data loss will be kept to only about 5 minutes instead of 24 hours.

If you decide to go with a CDP solution, make sure that it also offers block-level uploads. Block level capability allows the software to analyze your files, and only upload the portion that has changed since the last save point. This can significantly speed up your backup process and minimize the load on your internet connection.

Laptop-specific features
Most freelancers travel a lot, and often end up in places that may not always have the most reliable internet connections. Make sure that the solution you select offers laptop-specific features that can protect you on the road.

One such feature would be the hybrid capability to create both local AND remote backup copies of your data.

In other words, the solution should give you the option of creating a local hard drive partition which can be accessed in an emergency… even if you don’t have internet access. And of course, this should automatically synchronize with your online data backups as soon as you connect to the internet again.

And if you’re working out of an area that has only a slow internet connection, the CDP functionality we’d discussed earlier should ensure that your data still gets backed up without causing a significant burden on your connection.

Security and privacy
Often, freelancers will deal with very sensitive information. Make sure that the online backup service you select offers proper encryption.

But more importantly, make sure that the application you select allows you to encrypt the files with a password that only YOU know. In other words, make sure that the online backup provider can’t access your encrypted data once it’s on their servers.

Not all providers offer this feature. So make sure to ask before signing up.

So there you have it! If you want to protect your freelance business from data loss, just make sure that the solution you pick offers:

• Automation
• Continuous Protection
• Laptop-Specific Features
• Proper Security

If you follow this simple checklist, you can feel confident that you’re making the right choice for your business.

About The Author: Storagepipe Solutions offers online backup and backup software for freelancers & other small businesses.

Before we get into tactics for improving your social media presence, it must be said that solid marketing is all about the ideas behind your product or service. These ideas need to be communicated on your website with clear messaging and visual appeal (which good creative advertising firms can help you with), as well as through a variety of channels. Social media is rapidly becoming a preferred channel for web users to communicate and share ideas, and should be a strong part of your web strategy. Here are some tips for improving your website’s presence as it relates to social media.

Create Content!
Being a participant in social web requires that you create content, and certain kinds of content at that. Regardless of your industry, to create buzz you need to educate or entertain your target market, and well executed content will make people want to share it.

Improve the “Linkability” of your Content
Having “static” web pages, e.g. brochure-style or storefront pages, are definitely useful for product information. But to optimize a site for social media, we need to increase the frequency and linkability of the content. My favorite method is to add a more-personal blog that shows your personality and thoughtfulness about a particular topic area. Other types of content, like white papers or aggregated selected links to related articles, are also quite useful for potential readers. Remember, the idea is to create something valuable beyond your core product offering to keep potential customers coming back.

Enable Easier Bookmarking and Sharing
Once a reader thinks your content is worth sharing, make the process as easy as possible for them! Adding website features like ReTweet and ShareThis buttons are a great way to allow your users to spread your content via their preferred channels. I also like to make sure each page has concise meta tag data (Title, Description, etc), because it will be easier for places like Facebook to import and show pertinent information about your link. As mentioned before, make sure your content is valuable and interesting because buttons-alone cannot get people to share your work.

Encourage Inbound Links
Inbound links from other blogs and websites are crucial to enhancing your search optimization and overall rankings. Listing trackbacks with each article or post will entice users to link to your site in the hopes that you will reciprocate a link. However, be aware of trackbacks from unrelated, spammy blogs or sites that are merely republishing your content without permission. For these reasons, I like to approve trackbacks manually before allowing them to enter the comments.

Help Your Content Travel
Building multiple channels of distribution for content can be a very effective way to gain exposure and attract links. Use Email newsletters, RSS subscribers, Facebook status updates, Twitter updates, content syndication, video syndication with YouTube, etc can all improve your social reach. With the number of possible channels on the web increasing, you need to make sure to stay current with popular services in the industry

Encourage Video Sharing
Online video is a growing medium, and in my opinion a rich and effective channel for entertaining, informing, or just getting a message across. If you have the resources to create compelling video content, please give it a shot. Since distribution is VERY inexpensive, especially with YouTube and embedding capabilities, you can potential receive a high return on your efforts. Encourage and embrace others who republish your videos.

Participate in Conversations
Let’s say you have a decent social presence – your Facebook page has fans, your blog is receiving comments, people are contacting you through your site. Take the time to connect one-to-one with these active readers, they’re often your best customers! Foster dialog in whatever public forums you have, but also think about dropping a quick email or note in private to create a more personalized relationship. Show your true passion for the topic at hand. You just might be connecting with a top influencer or champion of your service.

Get to Know Your Audience
As long as you understand your subject matter and that community’s interests, you’ll be able to set yourself for successful social media connections. Don’t stray too far from your niche, leverage the latest tools and industry trends, and try to stay focused on content that will drive interest in your expertise.

Thanks for taking a look at our thoughts! What tips for social media marketing and optimization would you add?

There are many free hosts on the web and the number increases almost on a daily basis. This is because, on the contrary to most people thought, setting up a new free web hosting company is really easy. Therefore, the chances of getting scammed are a bit high, not to mention, the other companies which aren’t reliable enough to support your website properly. Whether you are running a serious business or just a simple site to share your life with, I don’t think you would like to see your website down and offline for those who are trying to get access to it and try to visit.

This is why choosing the right host for your site is very crucial. And to actually look for a host that is free and that is reliable just makes the task even more challenging. Here’s the good news though, there really are good free web hosting providers around. You just have to be very picky to be able to point yourself on the right one.

A few basic things to consider:

1. Check if the hosting company has been around for at least a year. This is a better way to avoid yourself from signing up on a hosting company only to find out after a couple of days or so that they aren’t reachable anymore. This could definitely cause your website a big problem especially if you don’t regularly do backups for your site and other issues.

2. Look for a host that says no banner ads. Some free web hosts, in exchange for the free service that they would provide your website, put tons of ads on to your site. Often times, this really could cause irritation for your visitors.

3. Look for a host that offers free technical support to their free hosting customers. This is very helpful especially when you’re not that very technical yourself. A company that has a good support system is often a sign that they are indeed providing a good service for their customers.

4. Look for a host that guarantees at least 99% uptime.. To actually know if a host is reliable is really very hard to determine.. Since usually you’ll just get to know about a host’s reliability once you have been with them. So your best shot is at least go with a host that gives high guarantees for their reliability.

Free hosting provider I recommend

So far, I’ve been with a few free web hosts and have experienced some of the worst. One free web hosting provider I highly would recommend is Doteasy.com. There are other free good web hosts too, but I have to admit, Doteasy has better offers than others.

Doteasy is a free hosting company that is well established, so that gives me an assurance that my website is safe and secured. They also strictly implement banner-free, this means no annoying ads on your website. Aside from that, I find their support team very reliable especially at times I’m having trouble on my site. I can’t be more thankful, because they still are very willing to help me even when the problem was basically caused by me. And as for their reliability, for a free host, I can say that I hit the jackpot with them. They guarantee 99.9% uptime and they have kept my website up and running all the time.

I get all of their great service for free, this is certainly a very good deal that I just can’t pass up. As of the moment, I can’t think of a better host or just even close on providing the service I get from Doteasy. And to get your own free web hosting account with them, you just need to click here to sign up and open a free account.

This is the second part of a two-part series that will help you build a complex sliding menu, enhanced with modal windows. Click here to read Part 1 of Building an Awesome Navigation Menu with jQuery

This second part will cover building a modal window and coding its behavior. If you don’t know what I already explained, please go back to the first article here and come back once you finish that one. However, if XHTML, CSS and jQuery are your friends, you may pick things up as we go, so just go ahead and read this part of the tutorial.

Let me remind you the concept we described in the previous article. We have a horizontal menu with a few categories. Each category has multiple subcategories and each such subcategory may contain a random number of products. For easier and faster movement of users thorough the site, we won’t reload the page once a subcategory is clicked. Instead, we will display all products in a modal window.

Here’s a screenshot of the menu and one simple modal window.

How does the modal work?

Once someone clicks a subcategory link, the modal window will be displayed and the products will show up. The modal will close when products are clicked, and the browser is targeted to a new page, when the user clicks the close button or when the overlay is clicked. It isn’t that hard is it?

The main issue is that we need different content in the modal window. Each subcategory will have its own products and we need to find out which products to display. We will do this with the help of jQuery as you’ll find out in just a few minutes.

But first, lets get to coding the structure and design of the modal window. First of all, we have the overlay mask, which will be an empty div. We need to make sure the overlay mask will be on top of all site content but beneath the modal window, so we will use z-index:1100 for modal content and z-index:1000 for the overlay. The overlay won’t be displayed unless a subcategory is clicked, so display:none is also mandatory. You should also choose your favorite color for the overlay, and set it absolutely to top left 0 pixels.

<div id="overlay-mask"> &nbsp; </div>

#overlay-mask {
	display:none;
	z-index:1000;
	background-color:#333;
	position:absolute;
	top:0;
	left:0;
	}

The modal window will be something like this. An outer div to hold everything in place, another inner div to hold the products, and a link that will server as a close modal window button. Because we want the button to span all the way, we had to use an outer div for the content of the modal, so that’s why there’s 2 divs and not just one.

<div id="overlay-content" class="all-rounded">
 
	<div>
		<a href="http://www.ultimatewasher.com" target="_new" class="thumb"><img src="images/wash1.jpg" width="102" height="102" alt="Wash1" /><span>First thumb</span></a>
 
		<a href="http://www.city-rentals.ca" target="_new" class="thumb"><img src="images/wash2.jpg" width="102" height="102" alt="Wash2" /><span>Second</span></a>
 
		<a href="http://www.tonsoftools.com" target="_new" class="thumb"><img src="images/wash3.jpg" width="102" height="102" alt="Wash3" /><span>Third</span></a>
 
		<a href="http://www.carriergenerators.com" target="_new" class="thumb last"><img src="images/wash4.jpg" width="102" height="102" alt="Wash4" /><span>Fourth</span></a>
 
	</div>
 
	<a class="close bottom-rounded">Click to close</a>
 
</div>

As you see, each product is in fact a link containing a product thumbnail and some text. Lets see how we style them. the purpose of the tutorial is creating the modal window, not styling it, so the style is really basic, especially if you take out the rounded corners.

#overlay-content {
	width:500px;
	}
 
#overlay-content div {
	width:450px;
	padding:25px;
	padding-bottom:10px;
	}
 
#overlay-content a.close {
	display:block;
	padding:0px;
	border-top:1px solid #333;
	font-size:15px;
	line-height:25px;
	height:25px;
	text-align:center;
	}
 
#overlay-content a.thumb {
	display:block;
	width:102px;
	height:122px;
	padding:0px;
	margin:0px 14px 0px 0px;
	float:left;
	text-decoration:none;
	}
 
#overlay-content a.thumb img {
	display:block;
	width:102px;
	height:102px;
	padding:0px;
	border:0px;
	}
 
#overlay-content a.thumb span {
	display:block;
	width:102px;
	height:20px;
	padding:0px;
	text-align:center;
	color:#999;
	}
 
#overlay-content a.last {
	margin-right:0px;
	}
 
#overlay-content div {
	overflow:auto;
	}

The first two lines are just setting the dimensions of the modal window, for the purpose of a modal window that contains four products, all on the same line. The anchor tag with the “close” class is in fact the button that will be displayed in the bottom of the modal that will be used to close to modal window if needed.

The thumb classed anchor will contain the image and the text description contained in a span tag. As all thumbnails have a small right margin, we need the additional last class to remove the right margin from the last product in the modal. The overflow is used to cancel the collapsing of the inner div that contains only floating elements.

We finished with structure and styling, so lets move on to jQuery coding. Take a look at the code in its entirety and try to understand it. The explanations will follow it just below.

var opacity = '0.8'; // can be up to 1
 
$('a[name=modal]').removeAttr('href'); 	//javascript on, no need to redirect to a link here
$('a[name=modal]').click(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	bvar contentWidth = $('#overlay-content').width(); // width
	bvar contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	b$('#overlay-mask').css('opacity',opacity);
	$('#overlay-mask').css('display','block');</p> <p>
 
	// put the overlay content area in the center of the window
	$('#overlay-content').css('display','block');
	$('#overlay-content').css('left',(windowWidth-contentWidth)/2);
	b$('#overlay-content').css('top',(windowHeight-contentHeight)/2);
	});
 
	// move overlay content to center of the window
$(window).resize(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var contentWidth = $('#overlay-content').width(); // width
	var contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	$('#overlay-content').css({'left':(windowWidth-contentWidth)/2});
	$('#overlay-content').css({'top':(windowHeight-contentHeight)/2});
	});
 
var $scrollingDiv = $("#overlay-content");
$(window).scroll(function()
	{
	$scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop()) + "px"}, "fast" );
	});
 
$('#overlay-mask').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});
 
$('.close').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});

The opacity variable will set the overlays opacity. It would look really odd with a non transparent overlay, so perhaps anything below .8 will do just fine. Except if you have it completely transparent when there isn’t going to be any overlay.

We find all anchor tags that has “modal” as name, and remove their href attribute, as we don’t want to move to another page before seeing the overlay, don’t we?

Then we have the on click behavior. As soon as an anchor link that has an attached modal window is clicked, we get the sizes of the document as well as those of the window. We also check out the width and height of the content inside the modal window.

Next, we set the width and height of the overlay mask using css attributes. We want the overlay to span across the entire page, right? We then set its opacity and make it appear in the page by changing its display property from none (set in the css) to block. We do the same with the content div, and also put it in the center of the browser window.

We also have a resize behavior, which will be triggered if you resize the browser after the page has loaded. If that happens, we check out the dimensions of the document and browser as well, and reset the content window in the center of the page. In the same time, we modify the width and height of the overlay so that it matches the changes triggered by resizing the browser.

If the page has a scrollbar and we scroll either up or down, we use the scroll jQuery trigger to animate the modal back to the center of the page. The stop function there before the animation will make sure that older animations will be stopped if the scroll is used continuously or with small pauses.

Finally, once the overlay mask or close button is clicked, we need to close the modal window, and the last two lines of code do just that.

One small, but real problem!

We haven’t taken in consideration the most important aspect. Each time we load the modal window the content needs to be different. The above code only works for the same content in the modal window such as a contact form, and we need to fix this issue.

First of all, we remove content from the overlay-content inner div and leave it empty. This div will auto-populate with proper content when a subcategory is clicked. Next, we add rel attributes to modal anchor links (those that were named “modal”). We will use unique rel attributes to identify the content we need to load.

We will also add divs that have classes corresponding to each rel attribute, which will contain the content we will load on click. We have to make this divs hidden so they don’t pop up god know where inside your site’s layout. Simple right? But how do we do this via jQuery? Even simpler, using only three lines of code.

Once a modal anchor is clicked we identify its rel attribute, get the html contents of the div that has the same class name as the rel attribute, then populate the inner div in the overlay content with the html content we found. Cool! Here’s the code for that, which we add just below the .click function.

var rel = $(this).attr('rel');
var modal_content = $('.'+rel).html();
$('#overlay-content div').html(modal_content);

And we’re done. You can check out the demo over here, or perhaps you’d like the source code? If so, you can download the source codes for the first part, which is just the sliding menu from here, or if you want the real deal you can get full source codes for modal window too from here.