But have you thought about what happens when your business grows and your websites’ traffic or storage needs become too much for that shared environment?

Traditionally, when you outgrew a shared server, you only had two choices to resolve the problems, moving to a virtual private server (VPS) or a dedicated server. But recently, the popularity of a third option, called cloud hosting, has been on the rise.

Here’s a guide to help you out with the shopping process of moving up from shared hosting.

What Is Cloud Hosting?

The term “cloud” in cloud hosting stems from the technology of cloud computing, which originally referred to a group of computers that were tied together to be able to function as one machine. This meant they could share the load of resource intensive projects and programming needs. A few years ago, this architecture style was applied to a new kind of shared hosting to create cloud hosting.

Cloud hosting is similar to cloud computing as it ties many servers together to enable them to share resources. Like geo hosting, cloud hosting allows for multi-tenancy, which allows a large pool of users to share resources at a lower cost than other hosting options (i.e. – a dedicated server).

Furthermore, when peak-load levels hit, cloud hosting as a whole is better prepared to handle the extra traffic without problems. You, as the hosting customer, will pay a premium only when you require the extra services. During non-peak times, your cost will be a flat rate. The scalability of cloud hosting will allow you to have some of the advantages of dedicated geo hosting without paying the higher rates all the time.

Cloud Hosting Kinks

Conversely, cloud hosting still has a few kinks to work out. Since other accounts are still sharing your resources, they too will sometimes need that extra push. When the server you’re on starts shifting things around to balance the load with other accounts, you may find your resources coming from across the country or even across the globe. For example, if your website is being served from New York City and your users are in San Francisco, their connection could be as much as 23 times slower. In some cases, the distance could become even greater. Some cloud hosting companies use servers in other countries. So, if your files have to travel from a very far distance, server jobs, such as email, can be slowed significantly.

By the same token, the scalability that makes cloud hosting so attractive can also cause a slower overall response time as resources are constantly being shifted to balance the load due to the shared environment. That continual shifting could also become a security issue. Geo hosting companies have established rules for handling security situations. However, since cloud hosting is still relatively new, there are no present industry standards. But eventually there will be, as large cloud hosting companies are presently in the process of developing security guidelines.

On the brighter side of things, cloud hosting can be very useful for you if you need to have a wide variance of resources, such as if you’re working on large scale application projects that sometimes involve heavy loads of data.

Geo Hosting Benefits

On the other hand, if you have level load needs, a geo-based hosting plan may be a better choice. Starting off on a shared server may offer limited load balancing situations, but when needed a good geo host should be able to move your shared server account to a next level without the additional security risks. In addition, geo hosting is able to support Secure Shell (SSH) to help secure your data as you move your databases. This feature is not usually offered with cloud hosting.

Another benefit of geo hosting is that if you need more resources than a traditional shared environment can handle, you have the option of moving to a dedicated server. This alternative can surely resolve your traffic problems while providing you with a more stable habitat. Instead of sharing physical resources with others, you will have your own private space to perform operations and store files. With this solution, you have a much more secure environment for you and your clients’ confidential information and a more predictable financial situation.

Furthermore, if you have a small to medium sized business that is customer driven, a dedicated geo host will supply better email service, shorter page load times and a more evenly distributed cost. If your website has extreme variations in its environmental needs, then you should try out cloud hosting. If your server needs fluctuate wildly on an intermittent and unpredictable schedule, the flexible pricing of cloud hosting may save you money in the long run.

How to Choose a Host

Now that you have the background information on the different types of hosting plans available for your growing business, make sure to analyze your current and future growth when deciding on which choice works best for you and/or your clients.

Just as important–do the proper research to find a solid hosting company that has a professionally trained technical staff available on a 24/7, 365 days a year basis. The best hosting plan possible is not worth much if you cannot get the help you need when problems arise. The Internet does not shut down at night, weekends or holidays. So all of your users, clients and their users expect the websites to be accessible at all times. If they’re not, you face losing them to the competition that IS available.

Your Turn

Do you use cloud or geo hosting for your website?

Explain your choice in the comments so we can learn from each other.

Image by Karin Dalziel

It is worth it to pay as much for development as for the actual design itself. Here are eight web development mistakes that could be costing you business.

1. Slow Loading

One of the first things a visitor notices about your site is how fast it loads. This is especially important now in the age of mobile browsing and mi-fi setups. When you’re stuck with a slow loading site, it can be tough to diagnose (I was once “graced” with this problem myself). Here are a few things you can look at to speed up your sluggish site:

• Images – Do you use a lot of images? Are they web optimized? Try using something like Yahoo’s Smush.it to see if you can compress them some more.
• Database Calls – If you’re using a CMS, it’s possible that it’s calling to the database way too many times, making your site take longer to load. Try going through the code and replacing as much as the dynamic content as you can with static. Does everything really need to be updatable by the CMS?
• Server – I was once with a certain host that caused my site to take over 17 seconds to load! They tried to tell me it was my install of WordPress and the theme I was using, but when I finally switched hosts, the site ran in under two seconds. It seems they simply stuff too many people on one server with too little power.
• Javascript Errors – Another biggy, if you have JS errors, or a site you’re using to host your JS is done, this can make the page almost unloadable. Make sure something like a Tweet or Facebook button doesn’t hold up the rest of your site if their API is down.
• CSS/HTML – Is your code bloated? I’ve seen sites that have had thousands of lines of code that could’ve been accomplished in just a few hundred. Take a look and see if the code itself needs to be pared down, as well as running it through a minifier.

2. Broken Mobile Experience

While the computer is still the #1 way people access the internet, mobile is quickly catching up. New toys like smartphones, tablets and even mobile powered laptops and netbooks are quickly being used in place of a full-sized computer. Your visitors no longer view your site in 1024 or higher resolution, you’re now faced with dealing with a bunch of smaller resolutions.

While I don’t believe every site needs an app, or even a mobile web site, your site needs to at least look and function probably in the mobile world. If it works just as well on these devices as it does on your computer, you’re good to go. If not, you’re missing on a lot of traffic and potential business.

3. All Javascript–No Static

You’ve probably heard about the recent blow up of a popular network–after launching a new version of their site, one error on one like of Javascript caused the entire site to come up completely blank for ever user. Why? The simple version was that they decided to use AJAX and JS to load ALL of their content. Which also meant that devices that have JS turned off by default (some Android devices) can’t see the site at all, even when they fixed the bug.

4. No Testing Needed…

One of the biggest mistakes I see clients make, is that they launch the site before they’ve fully tested it. Contact forms get sent to nowhere, the gallery is broken, and the menu still has address hash-tag placeholders. This not only deters visitors, it also makes your company look like amateurs. Please make sure to fully test the site before you launch – it helps to grab a couple of your friends and let them browse the site as well. You’ll be surprised at what kind of bugs they’ll come across.

5. Invalid HTML

A lot of developers still argue whether it’s important to validate your HTML or not. I say, why not? There’s no excuse not to validate, and validation catches a ton of bugs before they make it into the live version. Especially when it comes to making the site consistent across browsers, validating can be a major, major help. Plus, it really doesn’t take any good developer extra time to do, and it means your site is less likely to have issues when browsers and code standards are updated.

6. Tables

I can’t believe that in 2011 I still have to tell people to stop using table-based layouts. But I do. Don’t ever, ever, ever use them. Tables are meant for tabular data, not layouts. Not only will you waste a ton of time trying to get the site to conform in all browsers, you’ll have unnecessary images from the slice tool, bloated code and other nasties. I repeat, don’t use tables!

7. Naughty SEO Tactics

Some people are obsessed with SEO, but in the real world, SEO really isn’t that big of a deal for most companies. The truth is, there are billions of web sites out there, Google is changing things all of the time, and most visitors probably won’t find you through search.

So that being said, please stop using bad SEO tactics. It’s one thing to optimize your site with good keywords, it’s entirely different to stuff every crevice with them. Don’t cram keywords in the footer and sidebar. Don’t just randomly throw them in your content. The key to good SEO is making the content real and relevant. It should happen without you really trying.

8. Forgetting About Accessibility

One of the key things that people forget, is that everyone who browses the internet isn’t exactly like them. There are blind people, deaf people, people with color blindness and more who want to navigate on your site. If you forget to put accessibility items like alt and link title tags, you can be missing the traffic from disabled persons. Your site is awesome and you want everyone to be able to experience it, right?

Your Thoughts

What are some of the worst development mistakes you’ve seen people make? How does it affect normal users?

Just like everything else, freelance web developers aren’t the same by any means. We’re so completely different from each other, even our code would come out completely different if we were all to sit down and code the same thing.

So what are some of these stereotypes? Are they helpful or harmful to web developers in general?

Stereotypes about Us

Here is a list of the most common stereotypes that I’ve faced:

1. We are messy. When people think of web developers, they tend to think of us as messy, disorganized people, while they think designers are the clean and organized ones. In truth, both designers and developers can both be either really messy or really organized. I know several fellow developers who are the messiest people I know–but I myself am overly organized. I also know of several designers who like to keep a messy desk as well.
2. We are all men. I can’t tell you how many (annoying) times I get messaged something like this: Oh, you’re a web developer? But you’re such a pretty girl! As if pretty girls can’t be web developers! In truth, there are a ton of pretty girls who chose to be web developers. I would bet there’s almost as many of us as there are of men, we are just less outspoken and we tend to stay focused on working.
3. We have no social life in the real world. People tend to think freelance web developers are the absolute geeks–We’re always on the computer and we never leave our offices. However, the web development community has been one of the most social communities I’ve ever been a part of. We have a ton of in-person meetups and events like Barcamps, and all of the fellow developers I know have plenty of real life friends.
4. We are greasy and unwashed. While it’s true we like to work in our pajamas (cough cough, me!), it’s very untrue that we like to be unwashed and unhygienic. I know personally, I can’t stand to have a greasy face and for most of us, daily showers are a must. Sure, we don’t have to look good for anyone, but we all know it’s time to take a shower when even the dog can’t stand to be in the same room with us!
5. We work on weekends and until 4 am. This stereotype is tough, because it is true in some cases. I’ve never worked until 4 am myself, but I have worked on weekends and late at night when I was behind on a project or happened to have overscheduled myself that week. But as a rule, most of us try to keep normal office hours as we all have friends and families we like to spend time with. Plus, who wants to be on the computer for 16 hours straight?
6. We know everything that’s in web development. The most dangerous stereotype of all is the one where clients assume that we know everything there is to know about web development. We’re aware of every single CMS, platform and language there is to know. This is simply both impossible and untrue. There’s just too much to know in this industry for one person, which is why it’s always good to specialize in a few things.
7. We’re overweight. One of the biggest problems facing freelance web developers health-wise is the threat of being overweight. But every desk job faces that issue and that doesn’t mean we’re more likely to be overweight than any other. As a matter of fact, a lot of us take our health into our own hands and work out at the gym, or use an awesome home workout app like Fitfu. I like to think we developers are some of the healthiest desk workers out there.
8. We sleep all day and are unreliable. How I sometimes wish this were true. In reality, in order to be successful we have to make reliability one of the key services we offer. We also have to keep a regular schedule of hours in order to satisfy our clients. Plus, most of us have significant others or children, and they sure don’t let us sleep all day!

Twitter Freelance Web Developer Stereotypes

I took a quick Twitter poll to find out what other stereotypes exist. Here is the result:

• CraigReville. We’re all super rich…I’ve also been told on several occasions that freelancers always take shortcuts and don’t design & code properly.
• welcomebrand. They live in damp caves and are often hungry…
• jaytem. That we are all incredibly brilliant and good looking?
• ThisIsDannyZ. Stubborn, narrow-minded about their coding language (it’s the best), nerdy, fat, passive-aggressive… to name a few.
• jbokkers. Euhm, they’re geekie, and typically confuse their work and their hobby because they love what they do?
• adavis3105. That we all like Star Wars, Star Trek and comic books.
• imthegirl. I’m immediately struck with a mental image of mom’s basement & a pile of empty mountain dew bottles.
• rarescosma. Uhm, smoking? http://bit.ly/gPRmXV
• dvbii. They wear esoteric t-shirts, drink coffee like it’s going to disappear and are afraid of women?
• boundbystars. Lazy. Hygienically challenged. Focused on $ instead of project.
• iDamianH. The one that’s mentioned a lot is developers not being able to design.

Your Turn

What are some of the stereotypes you’ve heard about freelance web developers? Are they true?

Image by howieluvzus

I recently had this scenario happen. Thankfully, the site wasn’t live yet, but the client still expected me to fix the site, with no offer of extra payment, even though I wasn’t the one who blew up the site.

There’s no doubt about it. A site blow-up can be difficult to handle.

I ended up spending an entire unpaid day and a half trying to figure the issue out. I reinstalled the site and database several times, played with the settings and finally gave up and put it on my own server to test it out. Turns out, it was a server issue brought on by messing with the htaccess file in WordPress.

Fixing blown up sites is obviously not the best way to spend our work time, so I made sure to turn it into a learning experience for next time. So, what do you do if a site blows up on you?

Who Dun It?

First, you need to figure out who blew up the site in the first place. This isn’t to assign blame, but instead helps you figure out where to start looking for the solution. It’s important to figure out what the last thing was that was added, changed or deleted in order to fix the site.

If It Was Your Doing

If you were the one who happened to have blown the site up, you owe the client a huge apology and an assurance that you won’t stop working until the site is back up.

Messing up big time like this can be difficult to deal with. After all, we work hard to try to appear perfect in the eyes of our clients and any mistake can feel like a huge embarrassment. Fortunately for us, clients realize that we’re human beings as well and most remain thankful that you’ve admitted to the mistake and are working to correct it. Who knows, you might end up gaining some extra points over the way you handle this situation!

Unfortunately though, this means you’ll be working for free. Don’t even think about trying to charge the client for this or you’ll find yourself quickly without any.

Also, don’t try to avoid fixing the site or pawning off the blame onto the client. They know if they broke something or not. Remember, good customer service is really one of the main things that set you apart from other developers.

If the Client Held the Dynamite

If it was the client who blew the site up, take a deep breath. Don’t get angry and don’t yell. Remember when I said developers are human beings? Well, so are clients.

If a client comes to you with a broken site, be calm and reassure them that you’ll get it back up ASAP. Be sure you get the exact details of what happened, what they did, what buttons they pushed etc, etc.  This will go a long way to finding a speedy solution.

If the client doesn’t come to you or you were the one who discovered the blown up site, be careful not to place blame. People hate being pushed into a corner and will immediately become defensive and unhelpful.

Instead, inform the client that something critically wrong has happened to the site and ask them if they could tell you the last things that were done to the site so you can fix the problem.

This simple phrasing of words gently lets the client know they did something wrong, without embarrassing them. It reassures them that you’re there to fix the problem, not to make them feel bad.

To Charge or Not to Charge

Now here’s the really tricky part–do you or do you not charge the client to fix their website if they were the ones who blew it up?

This is totally up to you and your comfort level, but I suggest just biting the bullet and fixing the issue for free, especially if it’s something fairly small and quick.

Not only will you be a hero in the client’s eyes, but you’re more likely to get more referrals and repeat business from them as well.

A more difficult dilemma occurs when the problem is a large one. When the whole site needs to be redone, reinstalled, the database has a hidden bug or something that takes longer than an hour or two to fix, you might want to think about charging for it.

If the problem has occurred well after launch, it’s ok to charge for it. Just make sure to charge a fair rate and if possible, give them a discount and let them know you’re doing so.

If the site breaks before or right after launch, it’s best to suck it up and just fix it for free. Clients are finicky and you don’t want to risk angering them to where they don’t send you final payment for the original project. Plus, it doesn’t reflect well on you if the client has a broken site before it’s even launched.

Client Education

In order to ensure this never happens again, it’s worth your while to spend some time educating a client on how the site works. It may also benefit you in the long run to redo a part of the admin area to make it less confusing for the client.

A few ways you can help the client not repeat their mistake:

• Help videos
• Help documents
• ‘?’ blurbs next to the editable fields to let the client know what it does.
• Remove the extra fields you don’t want the client to edit

Your Turn

Have you ever had a site blow up on you? How did you handle it?

Image by BlatantNews.com

Choice is not something lacking in the development world either and because of this, it’s important to choose one or two platforms to focus on otherwise you run the risk of not being good at any of them.

If you’re a front-end developer like me, it’s important to realize that it’s no longer enough to specialize in HTML and CSS.

Without some kind of CMS knowledge, you’ll find it tough to find normal PSD to HTML/CSS jobs, at least ones that pay over $80 an hour.

So the problem now becomes, which content management system should you focus on? It can be quite confusing, so let’s take a look at a few and the pros and cons of each.

[Editor's Note: the opinions expressed here are those of the author and not the entire Freelance Folder community.]

Trying Out Content Management Systems

The first thing to deciding on which platform to work with is to try a few out. Download some of the platforms you’re interested in, install them and try to code a couple of sites in them. It also helps to pick up a few books or read a few tutorials on the CMS itself.

If you’ve already dipped your toes into a CMS, you may find that you’ll want to continue on learning that platform. This was how I started with WordPress myself. I had done a couple of edits for a client and decided I really liked the platform and wanted to continue learning it.

Another thing to keep your eye out for is the content management system’s community. Does the CMS have a large and expansive online community like WordPress? Or, something small and hard to find like Joomla? Not only does the website have a community, but are there a lot of blogs dedicated to tutorials of the CMS?

This is really important, especially for someone just starting out, because it allows you to quickly and easily learn your chosen platform. I can’t tell you how many times some blog post has saved me time and money by writing a tutorial on what I was needing to do.

Different CMS’s

Let’s take a look at some of the popular CMS’s out there and how they compare. We’ll (of course) start with my very favorite:

• WordPress is my very favorite platform of all. It’s super easy to learn, has a very extensive community and codex and I’ve never really not been able to do something in it. It’s simple enough for a small blog, but powerful enough for a very large non-blog website. Clients are able to understand the admin area very quickly. Bonus is that it’s free to download and use.
• Drupal is another great open-source (free) platform. I’ve been told that the learning curve is a little bit higher than WordPress, but that it’s still easy to pick up and really powerful as a CMS. It also has a large community and is easy to find resources for.
• Joomla is the worst CMS in the history of mankind and if you choose to support it, I’ll no longer be your friend. In all seriousness though, I don’t recommend this CMS for beginners, or really anyone at all. It’s very clunky, the admin area was impossible for both me and my client to understand or pick up quickly and coding for it – forget it. Plugins were buggy for it, it was tough to customize and there isn’t a large enough community to find what you’re looking for in terms of customization. Let’s move on…
• Mura is a neat little open-source CMS from the guys at Blue River Interactive. I had the chance to download, install it and play with it a couple of months ago. The backend was very nice looking and easy to figure out. It was a bit more work to install a version locally, because it runs on Cold Fusion, but was pretty easy when following the included instructions. Mura would be great for a serious developer to get to learn, but it is in Cold Fusion, which is not a very popular web language.
• ExpressionEngine is the only paid for CMS I’ve come across and it comes at a pretty hefty price. I have been told though, that ExpressionEngine is the CMS to go with, although I’m pretty skeptical about that, considering the ease of use of WordPress.

While choosing a content management system to focus on is imperative, it’s also very helpful to choose an eCommerce CMS as well. This will allow you to take on clients that need to set up stores, without trying to bolt on any plugins to the CMS’s above. (The eCommerce plugins for WordPress are terrible….). Here are a few eCommerce platforms that come with a CMS that you may want to check out.

• CoreCommerce (my eCommerce platform of choice!)
• Zen Cart
• Shopify
• OSCommerce
• FoxyCart

Making Your Own CMS

What happens if you’ve taken a look at all of these platforms and none of them tickle your fancy? If you’re a great programmer, you may think about rolling your own. I’ve often heard that custom CMS’s, while not as pretty as the professional ones, are better and more fine-tuned to the client’s site. While I disagree with this, I think it would be a great idea for a developer to produce their own CMS. Who knows, it could be a rival to WordPress!

What to Do After You Choose One

After you’ve figured out which CMS you want to learn, the next best thing to do is just to start using it. Download it and try to integrate it into your portfolio website, or one that you’ve made up. You can also find some awesome books on Amazon or a bookstore that would help you along.

If you’re brave, you can also start taking on client projects that deal with the CMS you’re trying to learn. The project may take you longer than normal to code, but the knowledge you get from first-hand coding is always better than any tutorial or book can give you.

From then on, it just takes practice and dealing with different site features to become an expert on your chosen CMS. Happy coding!

Your Turn

What CMS do you use and why? Was it easy for you to learn? Are you thinking about learning something else?

Image by rport

Ever since I started my one-man business, I have looked for ways to improve my productivity and get things done faster. There were a couple of methods that seemed to lead to small improvements, but overall none of them proved efficient.

That is, until I discovered agile techniques. In this post, I’ll discuss some of the ways that agile techniques can help improve a freelancer’s productivity. Specifically, I’ll look at agile methods in general and at Scrum methodology.

Agile Techniques are Team-Oriented

A couple of months ago I was researching agile methods to see if they would help improve my productivity. While studying agile development methods such as Extreme Programming, pair programming, and Scrum I was disappointed to learn that these methods were designed for teams and not for freelancers.
I decided to examine the methods further. I asked myself the question: Why are agile techniques team-oriented?

I discovered that agile development methods are team-oriented because a single person inevitably makes mistakes, mistakes that go untracked and unfixed. This means that the end product has poor quality and stands against the very nature of the agile manifesto, which tries to ensure high quality in each iteration of a product’s development.

If a team develops the product, errors made by one member are discovered by others and fixed. Each member has a specific role. Some may even have passive roles, as their only task is to listen, observe or moderate–such as the moderator of a poker play agile technique, or an employee that hasn’t got a scrum role, but attends a Scrum meeting.

Therefore, agile methodologies were designed and work best with teams that are usually larger than three or four members.

But, adjustments can be made

Despite the fact that it is really hard to successfully apply agile methods to developers working alone, some tweaks can be made to certain methods and therefore use them to improve your own productivity and work flow.

One that can be modified is the Scrum methodology. Scrum is an iterative framework that was designed to serve as a management tool for software development projects, but it is also widely used to manage development teams too.

What Is Scrum Methodology?

Scrum contains a set of practices and three predefined roles. The project manager is usually the Scrum master and maintains the processes. There’s also the product owner, or someone who represents the client and a team of developers.

In summary, the Scrum roles are:

• Scrum Master
• Product Owner
• Development Team

Scrum uses sprint periods of two to four weeks during which a potentially releasable product increment is developed. The features that are implemented during a sprint are chosen from a set of high-level requirements needed to be done. Which of these requirements go into a sprint is decided at the beginning of the phase.

The product owner or the client informs the development team about the items in the requirements list that must be completed first. The team than estimates how many of these items can be completed during the next sprint. An important issue with Scrum is that, during a sprint, requirements of that specific sprint cannot be changed. This ensures that the development team is focused on its tasks and doesn’t get distracted.

A key principle of Scrum is its recognition that during a project, the customers can change their minds about what they want or need. These modifications are introduced to the project development only between sprints.

Scrum requires daily meetings, which may seem Sci-Fi to some. Don’t worry because the modified Scrum version that works for a freelancer is simple and straightforward.

Scrum for Freelancers in Two Easy Steps

Scrum can be adapted for freelancers by implementing the following steps:

• Client meeting–one each week
• Sprint planning meeting–one each week

The starting point for implementing scrums is to develop a prioritized list of outstanding client requirements or needed features, having for each item in the list a priority, a description, and a developing estimate.

The client requirements and features list are built during the first client meeting. This list can be modified afterwards during each weekly client meeting. During these meetings, list items should also be prioritized as the client wants. Estimates should be computed by the developer alone and communicated to the client.

The next step would be to define a one-week sprint and start developing the items in its list while making sure that distractions aren’t sidetracking the development task. The success of each sprint depends on the ability of the developer to estimate development time required for each task and stay on track. The items that are added to the weekly sprint should be selected according to customer’s priorities.

If the client wishes to change any features of the product during a sprint, you mustn’t waste time discussing this with him. Instead, you should advise your customer to point the modifications during the weekly meeting he has with you. Of course, this can have side effects, but if you explain your development process to your clients during the first meeting with them, they’ll stick to it and love the fact that you have strong management capabilities.

Using this technique, you could have one day a week during which you meet with all your clients that you’re currently involved in a project with, and leave the rest of the days for distraction-free development process.

But, you can further improve the process!

Scrum Methodology and the Pomodoro Technique

You can improve the adapted Scrum methodology with the Pomodoro technique. It is a time management method developed in late 1980s that uses a timer to define work periods of 25 minutes followed by short breaks. Each period is called a pomodoro (Italian for tomato). The technique is based on the concept that frequent breaks can improve mental agility.

Five basic steps are required to implement this technique, in the following order:

1. Decide on task to be done.
2. Set the pomodoro timer to 25 minutes.
3. Work on the task until the timer rings.
4. Take a short break.
5. Continue with the third step or the first step if the task is completed.

It is also recommended that a longer break is taken every four pomodoros.

This technique blends the one-man team Scrum as the first step––that of choosing a task––is embedding the sprint list of the Scrum methodology. Moreover, the Pomodoro technique is related to concepts such as time boxing and iterative and incremental development, which are all characteristics of agile development.

Final Thoughts

This technique may seem a bit complex, but it is easy to manage it. You can do it with sticky notes or whiteboards, or by using dedicated apps. And, just in case you don’t have a timer around, you can use Focus Booster App, which was designed to work with the Pomodoro technique.

Your Turn

What methods do you use to improve your productivity? Share your thoughts in the comments.

Image by IDS. Photos

Regular people can’t see code, nor do they care to see it or what it looks like. It’s precisely this reason that there’s so much ugly code in the web world today. People don’t see it so developers don’t believe that clean code is important, but it is.

It’s quite rare to find a clean coded site, even from huge companies who should have the budget to pay for a good developer. However, it’s just as important to have beautiful code as it is to have a beautiful design.

Why Should It Matter?

Most of the time, messy code works just as well as clean code. So why should it matter if it’s pretty or not?

• Quicker to update–Organized code is easy to navigate and update. Save yourself some time in the future by making stuff easier to find now.
• Faster loads–Often, clean coding uses less code, which means it’s faster to load.
• Professionally–Would you rather pay someone who gives you a junk heap of code you can’t read, or someone who hands you correctly nested and organized code? Which one would make your life easier? Which one shows more professionalism?
• Find errors–With organized code, there’s less of a chance you forgot to close a tag or that you closed them in the wrong order. Plus, if you do make a mistake, it’s a lot quicker to find it.

Beautify Your CSS

There are several ways that I’ll show you how to organize your CSS. Of course, beauty is in the eye of the beholder, so you may not find that what works for me, works for you. Experiment with a few different ways you can organize your code to find what works for you.

• All in one line–Placing the entire rule on one line shortens the document, making it a smaller file size, easier to read and quicker to locate what you need. For example, instead of:
  • div {
background: #FFF;
font-style: italic;
font-size: 18px;
margin: 20px;
padding: 10px;
font-weight: bold;
}

  Try doing this instead:

  • div { background: #FFF; font-style: italic; font-size: 18px; margin: 20px; }
• Group like elements–I like to group similar rules together so that I can find everything I’m looking for in one section. For example:
  • div.element {}
div.element a {}
div.element ul {}
div.element .class p {}

    div.other {}
div.other a {}
div.other p.class {}

• Sectioning–It’s also good to section off your CSS by the area of the website where it is located. I use comments to call attention to the sections and usually section them off by header, nav, footer, main page and subpages.
• Semantics–Semantics are all about giving your items proper names. Name your classes and IDs with pertinent names, such as “header”, “nav”, or “bkg.jpg”. This allows anyone who needs to make updates to the site to find what they’re looking for quickly.
• Shorthand–Shorten your background, font, padding, margin and border properties by using shorthands. Instead of using a single property for each, combine them into one. Instead of:
  • div { padding-left: 20px; padding-right: 30px;  padding-top: 50px; padding-bottom: 10px; }

  do this:

  • div { padding: 50px 30px 10px 20px; }

One CSS organization “tip” I personally hate is tabbing your rules into a hierarchy. In my opinion, this wastes space and makes it harder to read, but you can try that out and see if it works for you.

Organizing Your HTML

Organizing HTML is pretty quick and easy. Here are a few tips.

• Tabbing–It’s important to properly tab your HTML code, otherwise it becomes almost impossible to read or find that one missing closed div. Convention says to tab once for each nested div, or div inside of a div.
• Space sparing–It’s good to put some blank lines in between sections of your code, but too many can be counterproductive. I tend to space out separate main divs.
• Semantics–Like your CSS class and ID names, everything should be named properly, including images and video. This can save you loads of time in the future. Your main background image should be name bkg.jpg (or something similar), not image2345.jpg.

Do I Hafta??

Of course, you don’t have to organize your code or make it look good. After all, no one is really going to look at it, right?

Wrong. If you’re planning on coding for a living, lots of people are going to look at your code. In fact, you may be losing business without even knowing it! A lot of potential clients will pass on a coder if their portfolio and own site are filled with nasty code.

Share Your Tips!

What are some of your tips for great looking code?

In this post, I want to offer a variety of great tips on beginning your journey to learning web code. At the end of the post, I want to share a simple site structure with you to get started in HTML and CSS.

I’ll focus on HTML and CSS in this article. HTML and CSS are the most basic web languages that everyone must learn before they can move on to another web language. Even if you plan to do all backend programming, you’ll still need to use them often.

Learning Code from Web Development Books

I don’t advise trying to learn coding from web development books. They’re often filled with syntax errors, outdated or they focus too much on following exercises and not enough on explanation.

These neither help you memorize proper code, nor do they help you critically think out your first site on your own. While you may find it easy to follow along with the exercises, or even do the exercises without looking at the book, you won’t be able to piece together code different from the examples provided.

That being said, books are still a great way to get the very basics down and provide a great point of reference throughout your learning process. When you look for a web development book, try finding one that:

• presents a basic history of the web and how websites are made and interact.
• focuses more on web theory and less on shuffling you from exercise to exercise. You need to know why you do it that way, not just how you do it that way.
• teaches you basic tags and what they mean. For example in HTML you would need to know:
  • <html><body><div><a><img><head><p> just to name a few!

Make Some Friends

After you’ve read a bit about web development, it’s time to start looking for a web developer friend. If you already have a friend who’s a developer, great; but if not, try making some connections on Facebook or Twitter. Ask them politely if they can spend a few minutes talking a little bit about the development process. Ask them if they can provide you with a coded template or old site code that you can use for your learning process.

Make sure the developer has enough experience and is good at what they do. You’d don’t want to learn their bad habits! Make sure their sites are not built in <table>’s and that it validates with W3C (the people who make HTML/CSS standards).

Take a look at the code they give you. Do you notice any patterns? How are the lines spaced? How is the code laid out compared to the layout of the actual site you see in the browser?

Jump In Feet First

Now it’s time to get your feet wet. The best way to learn how to code is to simply start coding. So what do you do with the template the developer has given you?

• Design a site similar to the template you were given. Make it similar enough to easily use the code provided, but different enough to make you have to change some of it. Learning is the only time copying someone’s code and designs are okay.
• Start coding. Retype the code line-by-line. Check what each line of code does in your browser as you go along. Some great Firefox plugins to use while you’re coding are Web Developer and Firebug. These will help you debug in the browser, saving you time, and are great for beginners to get used to looking at their HTML and CSS.

Google is Your Best Friend

It’s okay if you don’t understand much, or any, of the CSS and HTML you’re retyping. Google it. You’ll be amazed at how many tutorials exist on the web.

For example, I used to know very little PHP. However, most of my WordPress work I do has to be dynamic. Instead of paying a back-end programmer to do the work, I’m able to Google and find almost any function I need in WordPress. Because of this, I’ve saved lots of money and my knowledge of PHP has grown substantially. While I still may not be able to write it from scratch, I’m able to easily find what I’m looking for and customize it to my needs.

Some Googling tips:

• Search for specific phrases instead of general terms. For example, instead of Googling  ”WordPress”, try “How to exclude children categories in WordPress.”
• Learn to hack, or customize, the code. A lot of code you search for can simply be copied and pasted, but you’ll often find that one developer’s solution may not perfectly fit your problem. Even if you don’t plan on learning PHP or Javascript, it’s still good to learn a few basics so you can easily change your found code, as you’ll come across these languages often in the web development world, even if you plan on sticking with CSS and HTML.

Code Problems Are Good Problems

When you first start coding, nothing will work and everything will break. Don’t give up. Just by trying to debug your code and figure out the problems, you’ll learn a lot and will quickly begin to anticipate what happens when you code one way or another. Treat these problems as another HTML learning lesson.

Mix It Up

What happens if you put a div inside of a p tag? If you moved one block of code to the bottom of the page? What can you do to make the site unvalidate or break? How do you fix that? Don’t be afraid to move code around to see what happens.

Next Steps

After you learn basic HTML and CSS, you should jump in to some more advanced layouts. Some great ways to learn advanced coding:

• Follow tutorials on web development blogs.
• Continue copying sites you find that you really like. Learn to spot bad and/or unorganized code. Just because the site looks great in the browser, doesn’t mean it’s built great.
• Team up with a local developer for some tutoring.
• Take a few web development courses at your local tech college. They can be surprisingly affordable. Get some reviews on the professors first, to make sure they know what they’re talking about, and are easy to learn from.
• Forums are another great place to post questions and meet with developers.

Ready to Code?

If you’re now ready to jump into your first site, you’re in luck! I’ve coded up the simplest of basic web layouts–a two column layout with a header and footer, along with a jpg of how it should look. It already validates and is organized/spaced correctly, with semantic code.

You can download the zip file here.  Feel free to hack, change, or even use it for your first development portfolio. If you want, I also offer step-by-step coding of this site, from breaking down the layout to the CSS, along with basic explanations of what each line of code is and does.

Your Turn

Are you learning web development? What techniques have you tried? Do they work? If you’re already a developer, how did you learn your basic coding?

Good SEO depends on several factors in your website, but when you usually think of SEO, you probably think of dealing with content and inward links. But did you know that there are several ways to improve your traffic and SEO by changing your code? Increasing traffic and rankings in code depends on three factors:

• Semantics – It’s been debated, but it seems Google gives higher rankings to validated sites, plus there’s less chance for major errors that can cause browser rendering or download issues that could turn visitors off.
• Download times – Users don’t leave your site because it’s taking 20 minutes to download-plus it’s easier for search engines to spider.
• Keywords – Just like regular SEO, it’s important to get those pertinent keywords into your code for good rankings.

Let’s take a look at how you can use all three of these to easily improve your site’s code, traffic and even your SEO rankings.

1) Validation and Semantics

Validating your website and using proper semantics are important in several ways, but let’s just focus on the SEO issue. When you follow W3C standards to validate your site (I use XHTML 1.0 Strict) and you use proper semantics, like cutting down on classes and IDS, using selectors and properly naming elements – there are several traffic benefits you can get:

• Shorter Code – Shorter code means faster download times.
• Better ranking – You’ll already get a slight increase in rankings from a validated site, without even taking content into consideration.

2) Link Title & Alt Tags

Link title and alt tags are used for both accessibility standards and to boost your SEO through keywords. You should have a title tag on every link describing what the link is, but also adding a few keywords into it. For example, a link to FreelanceFolder’s index page could have a title of “Home of FreelanceFolder freelancing web articles and blog” or whatever keywords you’re trying to target on your site. The same goes for alt tags on images. You’re required to have them for validation (#1) anyways, so make sure you put some good keywords in them.

3) Site Title Tags

Website title tags are the tags you see in the browser tabs, or top of your browser window. These are weighed pretty heavily by Google, so make sure you have the most important keywords, as well as unique titles on each page.

4) Replace Flash with jQuery

Flash websites are pretty much ignored by Google. Unless you’re a big name company who doesn’t need rankings to get traffic, this can be a death sentence. However, if you replace your flash with jQuery, not only will your content now be read by search engines, but ALL the content inside your jQuery will count, whether the user can see all of it at one time or not. This is very useful for people who use jQuery tabs to switch between large blocks of content.

5) Optimize JS & CSS Files

Optimizing your files can greatly reduce your download times and server load. There are several free optimizers on the web, like JSO. Your JS should also be broken up to multiple files, so each page isn’t loading a bunch of script it isn’t using.

6) Link to Google’s jQuery Library

This also reduces load on your server, making for faster download times. Google’s jQuery library is also optimized and smaller than the normal jQuery library.

7) Fix Broken Links & JS Errors

Not having someone’s browser attempt to load files and scripts that aren’t there speeds up their download times.

8) Header Tags

As important as website title tags, header tags are also a great place to add keywords. Headers should be used sequentially. Therefor, your <h1> tag should probably be the website name or section name, <h2> should be the page name, and <h3> should be a subheading or subsection name.

9) Optimize Your PHP

There are several ways to optimize PHP specifically to speed up download times:

• Variables – Declare variables outside of the loop, so its declared once and not repeated.
• Functions – Pass variables by reference to functions, instead of passing copies.
• File pointers – Always close these!

10) Use htaccess Files

Use htaccess files to change the names of your pages (especially if you’re using PHP variables like I do) to rename pages. Include important keywords separated by dashes. You can also use them to redirect users to another page, in case they bookmarked an old page that no longer exists.

SEO is Not Just Keywords

Good SEO depends on a variety of things, not just keywords and links. While changing your code won’t really help a site with little or bad content, it can be a great boost to a site or blog just starting out.

Have there been things you’ve changed in your code that’s increased your traffic? What did you do?

Photo courtesy of Burning Image

With all of the regular articles and tutorials being posted on these blogs, it’s easy for a beginner developer (or even a designer who’s dabbling with the idea of becoming a developer) to learn a ton of useful information. I personally subscribe to all of these sites and have learned more in the past few months that I think I ever have in my life. They’re definitely worth the RSS subscriptions — trust me, you won’t regret it.

CSS Development Blogs

Below are some great blogs specifically written for those of us who are looking for css tutorials and resources.
CSS Tricks

CSS Vault

CSS Basics

Soh Tanaka

Ruby on Rails Blogs

Below are some great blogs specifically written for those of us who are looking for ruby on rails tutorials and resources.

The Rail World

Nuby on Rails

Ruby on Rails Security Project

Viget Extend

Ruby Inside

Rails Forum (too great a forum to not be on the list)

jQuery Development Blogs

Below are some great blogs specifically written for those of us who are looking for jQuery tutorials and resources.

Learning jQuery

James Padolsey

Woork

PHP Development Blogs

Below are some great blogs specifically written for those of us who are looking for php tutorials and resources.

Killer PHP

Chris Shiflett

David Walsh

Web Development Blogs

Below are some great blogs written for those of us who are looking for web tutorials and resources.

Net Tuts

Paper Mashup

Stout Labs

A List Apart

If you have any freelance development blogs you write for or any that you’re subscribed to that you think should be added to this list, feel free to leave a comment and let us know. I’m always on the lookout for a new place to learn from!