<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Pixel Acres &#187; Technology</title>
	<atom:link href="http://f6design.com/journal/category/technology/feed/" rel="self" type="application/rss+xml" />
	<link>http://f6design.com/journal</link>
	<description>Adventures in web and graphic design</description>
	<lastBuildDate>Thu, 11 Mar 2010 02:37:53 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Subversion for web development: Part 3</title>
		<link>http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-3/</link>
		<comments>http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-3/#comments</comments>
		<pubDate>Sun, 27 Dec 2009 09:48:46 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/?p=975</guid>
		<description><![CDATA[ In the final article of the series I will talk about configuring a local Apache webserver to integrate smoothly with your development working copy, and how to deploy a version controlled website to a live webserver.]]></description>
			<content:encoded><![CDATA[<p>In the <a href="http://f6design.com/journal/2009/12/23/subversion-for-web-development-part-1/">first</a> and <a href="http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-2/">second</a> parts of this series you learned what version control is, and how to put a place a website under version control using Subversion. In this final article I will talk about configuring a local Apache webserver to integrate smoothly with your development working copy, and how to deploy a version controlled website to a live webserver.</p>
<h3>Working with a local web server</h3>
<p>Except for the very simplest sites, my web projects require PHP and therefore must run on a webserver with PHP installed. For testing purposes I have an Apache webserver installed on my local computer &#8211; I use <a href="http://www.apachefriends.org/en/xampp.html">XAMPP</a>, which is a free Apache/MySQL/PHP distribution for Linux, Windows, Mac OS X and Solaris.</p>
<p>For each project I create an Apache virtual host, which allows the website to have its own domain root. This is configured in Apache&#8217;s <em>httpd-vhosts.conf</em> file:</p>
<pre><code>&lt;VirtualHost *:80&gt;
    DocumentRoot "D:/jobs/my_project/dev/_svn_working_copy/www"
    ServerName myproject.local
    ServerAlias www.myproject.local
    ErrorLog "logs/error.log"
    CustomLog "logs/access.log" combined
    &lt;Directory "D:/jobs/my_project/dev/_svn_working_copy/www"&gt;
	Options Indexes FollowSymLinks Includes ExecCGI
	AllowOverride All
	Order allow,deny
	Allow from all
    &lt;/Directory&gt;
&lt;/VirtualHost&gt;</code></pre>
<p>The important thing to note here is that the DocumentRoot points at the <em>www</em> directory of my Subversion working copy, not at a sub-directory of my XAMPP installation, as would usually be the case. This allows me to keep the development version of the site in the same location as all my other project files, in this case: <em>D:/jobs/my_project</em>.</p>
<p>The job folder also contains Photoshop mockups, wireframes, image assets and any other files related to the project. Keeping these files all in the one spot makes it easy to backup the project &#8211; I simply burn the entire job folder to disc or an external hard drive.</p>
<h3>Version control is not backup</h3>
<p>While we are on the topic of backup, I think it is important to point out that your should never rely on Subversion alone as a backup solution.</p>
<p>It is tempting to think of a Subversion repository as an alternative to conventional backup strategies, since in many respects a repository seems like the perfect backup: it is stored off site, it is well commented, and it has a history of every change ever made to your project. But by relying on the repository for backup you are putting all of your eggs in one basket. If the repository is ever corrupted you will lose your entire development history! Sure, you still have your local working copy of the site, but the ability to roll back to a previous website state or refer to old code is lost forever.</p>
<p>To guard against this possibility it is important to perform regular exports of your working copy, and archive these copies using your regular backup method. Subversion has an <a href="http://svnbook.red-bean.com/nightly/en/svn.ref.svn.c.export.html">export command</a> for this purpose.</p>
<h3>Deploying to a live server</h3>
<p>When it comes time to deploy your website to a production webserver, the simplest approach is to simply upload your working copy via FTP or SFTP. This method should require no major changes from your existing workflow, and has the advantage of working with any webserver. If your site resides on a shared hosting account then this is probably your only option.</p>
<p>There is just one gotcha: Subversion creates a bunch of <em>.svn</em> folders inside the working copy, which it requires to work. They contain sensitive information such as your repository URL, which you probably don&#8217;t want to broadcast to the whole world, so it is important to make sure that these files are omitted from the upload process. Any decent FTP client can be configured to filter out particular files or folders, so make sure to create a filter that ignores <em>.svn</em> directories. I use <a href="http://filezilla-project.org/">Filezilla</a>, which <a href="http://allthingsmarked.com/2009/07/20/avoid-transferring-svn-cvs-folders-in-filezilla/">does the job nicely</a>.</p>
<p><img src="http://f6design.com/journal/wp-content/uploads/2009/12/server_diagram_ftp.jpg" alt="Server diagram - upload via FTP" title="Server diagram - upload via FTP" width="450" height="384"  /></p>
<p>If Subversion is already installed on your production web server (or you are able to install it yourself) and have shell access to the server, then you have another option available to you.</p>
<p>Instead of uploading files to the server from your working copy, you can checkout a working copy of your repository trunk to the production server. When you are ready to publish to the live site you just need to update the server&#8217;s working copy and any modified files and folders will be deleted/renamed/downloaded automatically.</p>
<p><img src="http://f6design.com/journal/wp-content/uploads/2009/12/server_diagram_subversion_on_live_server.jpg" alt="Server diagram - live server is a working copy" title="Server diagram - live server is a working copy" width="450" height="414" /></p>
<p>The advantage of this approach is that it is largely free from human error &#8211; there is no chance you might forget to upload a modified file, or that one developer will accidentally upload an old file over a newer one.</p>
<p>Explaining how to work with Subversion on your production server is beyond the scope of this article (plus, I&#8217;ve never done it before!), but if you dig a little you will find tutorials online.</p>
<p><em><strong>Update 11 March 2010:</strong> A couple of readers have pointed out that the alternative deployment approach mentioned above requires additional steps to hide the .svn directories on your production server. Please read the comments below for further information.</em></p>
<h3>Making friends with Subversion</h3>
<p>As I mentioned at the outset of this series, it took a couple of goes before I had an &#8220;aha!&#8221; moment and realised how Subversion could improve my workflow, but once everything clicked into place I didn&#8217;t look back. Hopefully this article has given you some pointers about integrating version control into your own web development process.</p>
<p>There is plenty of technical detail I haven&#8217;t covered, and for that I recommend checking out the free <a href="http://svnbook.red-bean.com/"><em>Version Control with Subversion</em></a> book, and the excellent <a href="http://tortoisesvn.net/support">TortoiseSVN documentation</a>. If you have any questions about my approach, or suggestions based on your own experiences with Subversion, please leave a comment below.</p>
<p><em>Icons in this article are courtesy of <a href="http://www.visualpharm.com/">Visual Pharm</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-3/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Subversion for web development: Part 2</title>
		<link>http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-2/</link>
		<comments>http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-2/#comments</comments>
		<pubDate>Sun, 27 Dec 2009 09:47:23 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/?p=973</guid>
		<description><![CDATA[In the second article of the series I will give specific detail about establishing a Subversion workflow.]]></description>
			<content:encoded><![CDATA[<p>In <a href="http://f6design.com/journal/2009/12/23/subversion-for-web-development-part-1/">part 1</a> of this series you learned what version control is, and how it can be useful for website development. In this second article I will give specific detail about establishing a Subversion workflow.</p>
<h3>Structuring your repository</h3>
<p>Before you import any data to your Subversion repository you will need some top-level directories to help organise your project. There are no set rules dictating how you approach this, but the <a href="http://svnbook.red-bean.com/en/1.5/svn.tour.importing.html#svn.tour.importing.layout">recommended repository layout</a> is to create <em>trunk</em>, <em>branches</em> and <em>tags</em> directories:</p>
<pre><code>/trunk
/branches
/tags</code></pre>
<p><strong>Trunk:</strong> This is where you store the &#8220;main line&#8221; of development. It is a snapshot of the current state of the project.</p>
<p><strong>Branches:</strong> A &#8220;branch&#8221; is a copy of the project, and allows you to carry out a separate line of development without breaking the trunk. Once you are happy with your changes they can be merged back into the main code base.</p>
<p><strong>Tags:</strong> A &#8220;tag&#8221; is an archival snapshot of the project at a given point in time.</p>
<p>Whether or not you create branches and tags entirely depends on your own approach to version control.</p>
<p>Tags are commonly used in software development to capture a snapshot of a stable release of an application, but are not necessarily applicable to websites, where changes tend to be pushed live as soon as they are made.</p>
<p>Branching is useful when multiple developers are working on the project, but may be a redundant concept for a solo developer. Two scenarios where I can see branching would be useful are during a website redesign, or when adding a major new feature to a site. Development of the live site continues in the trunk whilst the upgrades are carried out in a branch.</p>
<p>Even if you don&#8217;t plan on creating branches or tags I still recommend sticking with this conventional directory naming structure. If another developer ever needs to access your repository the <em>trunk/branches/tags</em> structure will probably be one they are already familiar with, and it also gives you the flexibility to create branches and tags should the need ever arise.</p>
<h3>What files to keep under version control</h3>
<p>The only files I keep under version control are those that are required to compile and deploy the site: the source files, any files that are required on the live web server, and a copy of the site&#8217;s database.</p>
<p>For a typical website I create two additional folders inside the trunk:</p>
<pre><code>/trunk
    /db
    /www
/branches
/tags</code></pre>
<p>The <em>www</em> directory represents a web server&#8217;s public http directory. This is where most of the project files and folders live. The <em>db</em> directory is where I store a dump of the site&#8217;s MySQL database (more on this in <a href="http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-3/">part 3 of this series</a>).</p>
<p>If I was working on a Flash project then I would have additional directories for my Actionscript and FLA source files:</p>
<pre><code>/trunk
    /db
    /www
    /src
    /lib
/branches
/tags</code></pre>
<p>None of these folder names are set in stone, and you should choose a structure that suits your work methodology.</p>
<h3>Creating a working copy</h3>
<p>To begin working with your repository you need to checkout a working copy. To do this, create a folder somewhere on your local computer, and give it a name that makes its purpose obvious. I call mine <em>_svn_working_copy</em>, and create it inside the job folder for the particular project it relates to. For instance, my folder might reside at <em>D:/jobs/my_project/dev/_svn_working_copy</em>.</p>
<p>Right-click on the directory you created, and choose <em>SVN Checkout</em> from TortoiseSVN&#8217;s context menu. In the Checkout dialog that appears, enter the URL of your repository trunk.</p>
<p><img src="http://f6design.com/journal/wp-content/uploads/2009/12/tortoisesvn_checkout_dialog.gif" alt="TortoiseSVN checkout dialog" title="TortoiseSVN checkout dialog" width="450" height="356" /></p>
<p>Once the checkout is complete your working copy should now contain the <em>db</em>, <em>www</em>, and any other directories you created in the trunk.</p>
<p>(You might notice that each directory in your project contains a folder named <em>.svn</em>. TortoiseSVN requires these folders to do its job so make sure not to delete or edit them!)</p>
<p>Now you can start to add files to your project, and edit them as you would usually. Remember that the <em>www</em> directory represents the site&#8217;s root level, so your index file should be stored here, along with any other files and folders required for the site to function.</p>
<p>You might be wondering <em>&#8220;What if I need run my project in my local web server? Shouldn&#8217;t I check out the working copy to my Apache webroot?&#8221;</em>. That&#8217;s what I initially thought too, until I realised that Apache could be configured to read files from any directory on my computer. I&#8217;ll explain how (and why) I do this in <a href="http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-3/">part 3 of this series</a>.</p>
<h3>Keeping a database under version control</h3>
<p>If your site relies on a database then you need to keep that under version control too, otherwise you lose synchronisation if you ever need to roll back to a previous website state. But because the database is stored outside of a website’s public html directory it needs special consideration to ensure it is included with Subversion commits.</p>
<p>I mentioned earlier that my SVN trunk includes a directory named <em>db</em>. This is where I place a dump of the site’s MySQL database. In my case this is a manual process: I use PHPMyAdmin to export a .sql file which I copy into my trunk’s <em>db</em> directory, overwriting the previous version.</p>
<p>I suspect it is possible to automate the process of exporting the database from MySQL into the <em>db</em> folder, but for now I&#8217;m happy enough to do it manually. Like the other steps in the version control workflow it quickly becomes second nature.</p>
<h3>Making commits</h3>
<p>When you have finished editing the files in your working copy it is time to commit them to the repository. In TortoiseSVN this is accomplished by right-clicking the folder in which your working copy resides (or any sub-folder or individual file) and choosing <em>SVN Commit</em> from the context menu.</p>
<p>At this point you have the option to add any non-versioned files to the repository, after which any new or modified files are uploaded to your Subversion server and stored in the repository. The next time anyone browses or checks out the trunk they will be able to view your changes.</p>
<h3>Commenting your commits</h3>
<p>It is good practice to accompany each commit with a descriptive message explaining the changes you have made. In a team environment commit log messages are a vital means of communicating with the rest of the team, but they are just as important for the solo developer. Well documented commits help you recall every change you make to your project, when you made it, and why. </p>
<blockquote><p>Trust me, you don’t want to be the dunce, who commits with blank messages, or with meaningless ones like “Fixes”. Your team will hate you. You will hate yourself after a month, when trying to discover what the hell this code does in your brilliant project.<br />
<cite>&ndash;Petyo Ivanov, <a href="http://wildbit.com/blog/2008/11/11/the-importance-of-commit-messages/">The importance of commit messages</a></cite></p></blockquote>
<h3>Commit frequency</h3>
<p>How often you choose to commit changes to the repository is a matter of personal preference. Once a day, twice a day, ten times a day &#8211; it&#8217;s entirely up to you.</p>
<p>I like to make my commits fairly frequently. This makes it easier to review the changes that I&#8217;ve made, and also keeps me focussed on the task at hand: the commit message acts as a goal for the coding session. Also, I get a small glow of satisfaction each time I make it commit, like ticking off an item on a to-do list!</p>
<p>In the final part in this series I will talk about working with a local Apache development server, and deploying a version controlled website to a live webserver.</p>
<p><strong><a href="http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-3/">Read part 3 &raquo;</a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Subversion for web development: Part 1</title>
		<link>http://f6design.com/journal/2009/12/23/subversion-for-web-development-part-1/</link>
		<comments>http://f6design.com/journal/2009/12/23/subversion-for-web-development-part-1/#comments</comments>
		<pubDate>Thu, 24 Dec 2009 06:09:35 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/?p=764</guid>
		<description><![CDATA[In this three part series of articles I will explain my approach to using Subversion, the open-source version control software, for web development.
For a long time I steered clear of version control, dismissing it as too complex, or something that was only useful for large development teams. I took Subversion for a test drive, but [...]]]></description>
			<content:encoded><![CDATA[<p>In this three part series of articles I will explain my approach to using <a href="http://subversion.tigris.org/">Subversion</a>, the open-source version control software, for web development.</p>
<p>For a long time I steered clear of version control, dismissing it as too complex, or something that was only useful for large development teams. I took Subversion for a test drive, but didn&#8217;t really &#8220;get it&#8221;, and decided version control wasn&#8217;t for me.</p>
<p>I changed my tune earlier this year when I was employed to work on a project that was already under version control. I had no choice but to get up to speed with Subversion, and once I got the hang of it I was excited to discover that version control streamlined my entire workflow. I now use Subversion for all of my web projects and consider it an integral part of my development process.</p>
<p>My approach to Subversion is geared towards solo web developers like myself, and is fairly easy to grasp. I won&#8217;t delve too deeply into the inner workings of Subversion and its commands &#8211; this will be more of a conceptual overview of setting up a version control workflow:</p>
<p>Part 1: Getting started with version control<br />
<a href="http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-2/">Part 2: Working with Subversion repositories</a><br />
<a href="http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-3/">Part 3: Servers and deployment</a></p>
<h3>What is version control?</h3>
<p>In a nutshell, version control allows you to track changes made to a file over time, and roll back to a previous state when you mess up. This might not sound too different to the traditional <em>&#8220;save as&#8230;&#8221;</em> technique offered by virtually every software application, but a <a href="http://en.wikipedia.org/wiki/Revision_control">Version Control System</a> offers considerably more functionality than simply appending <em>&#8220;_v01&#8243;</em> or <em>&#8220;_v02&#8243;</em> to your file names. Some of the advantages of a Version Control System are:</p>
<ul>
<li><strong>Roll back.</strong> Jump back in time and revert a file, folder, or even the whole project to a specific historic state. If you make a mistake in your code you can simply revert to the last good version of the file you are working on.</li>
<li><strong>Revision messaging.</strong> File revisions can be accompanied by messages explaining what changes were made, and why. This makes it possible to track the evolution of a project over time.</li>
<li><strong>Branching.</strong> If you need to test out new features in your project without disturbing the main line of development, you can &#8220;branch&#8221; your code and continue development in a separate sandbox. Later, you can merge changes back into the main code base.</li>
<li><strong>Work with a team.</strong> If several people are working on the same project, version control helps to synchronise changes so that one team member doesn&#8217;t accidentally overwrite another&#8217;s work.</li>
<li><strong>Work remotely.</strong> A version controlled project can be accessed from anywhere, any time. This is perfect for geographically remote team members or developers who work from multiple locations.</li>
</ul>
<h3>Why use version control?</h3>
<p>In my pre-Subversion days I relied on an ad-hoc backup system whereby I would periodically create a manual snapshot of the project I was currently working on by copying the entire project source to a new directory. I might make a backup once a day, or perhaps every two days. If the changes were small, I might not make a backup at all.</p>
<p>This approach worked well enough, but left me wide open to data loss. Reverting to a previous project state could be a tedious task, requiring that I backtrack further than was strictly necessary.</p>
<p>I also lacked comprehensive metadata about the changes I was making. I did keep brief notes with each backup, describing the changes I had made since the last snapshot, but these notes provided only &#8220;broad brush strokes&#8221; information about my edits, and lacked detail about which specific files had been modified.</p>
<p>A Version Control System helps to address these problems: snapshots are taken of revisions much more frequently, code changes are easier to document and track, and recovering from coding mistakes is much easier.</p>
<h3>Version control for web development</h3>
<p>When setting up a Version Control System my initial challenge was to find a workflow that worked for me as a solo web developer. Most of the explanations of version control I read were aimed at software programming teams, and it wasn&#8217;t immediately obvious to me how I fitted into the picture. To help me choose a version control approach that suited my own requirements, I began by listing the key components of my web development process:</p>
<ul>
<li>Most of the time I work alone on projects, not as part of a team</li>
<li>I work on projects from the office and from home, using two different computers</li>
<li>During the development phase of a project I work from an Apache web server, hosted on my local computer</li>
<li>Most of my websites rely on a MySQL database</li>
<li>My websites are hosted on a range of web servers, usually in a shared hosting environment, and in many cases I am not free to choose the hosting solution</li>
</ul>
<p>With those considerations in mind, I needed an approach to version control that allowed for:</p>
<ul>
<li>Remote access to the Subversion repository</li>
<li>A working copy of the repository that could be accessed by my local web server</li>
<li>The website&#8217;s database to be under version control along with the source files</li>
<li>A deployment process that would work in a typical shared hosting environment</li>
</ul>
<h3>Creating a Subversion repository</h3>
<p>The first step in working with Subversion is to create a repository. A repository is a store of data, which holds all of your project files, much like a standard file-system. A repository does a lot more than that though:</p>
<blockquote><p>What makes the Subversion repository special is that it <em>remembers every change</em> ever written to it: every change to every file, and even changes to the directory tree itself, such as the addition, deletion, and rearrangement of files and directories.<br />
<cite>&ndash;<a href="http://svnbook.red-bean.com/">Version Control with Subversion</a></cite></p></blockquote>
<p>The simplest way to create a repository is on your local machine, a task that is made extremely easy by <a href="http://tortoisesvn.tigris.org/">TortoiseSVN</a> (a Subversion client). A local repository is perfect for cutting your teeth with Subversion, but has a major drawback: it can only be accessed from one computer. A remotely hosted repository is a far more powerful and flexible option.</p>
<p>To create a remote Subversion repository you are going to need a web server with Subversion installed. This is not as daunting as it may sound. Many web hosting companies offer Subversion with their plans (I use <a href="http://dreamhost.com/">Dreamhost</a>), or you can choose a Subversion hosting specialists such as <a href="http://unfuddle.com/">Unfuddle</a>, <a href="http://www.springloops.com/">Springloops</a> and <a href="http://beanstalkapp.com/">Beanstalk</a>.</p>
<p>It is important to note that your Subversion repository needn&#8217;t be on the same server as your website. In the development environment I describe in this article there is never any direct communication between the repository and the live web server.</p>
<h3>Choosing a Subversion client</h3>
<p>Once your Subversion repository is up and running, you need a way to access it. A Subversion client allows you to to read data from your repository (&#8220;check out&#8221;, in Subversion parlance), write data to the repository (&#8220;commit&#8221;), and perform other useful actions such as branching, tagging, and merging.</p>
<p>I work in a Windows environment, so <a href="http://tortoisesvn.tigris.org/">TortoiseSVN</a> was an obvious choice for my Subversion client. TortoiseSVN installs as a Windows shell extension, and all of its functionality is accessed via the Explorer context menu &#8211; in other words, by right-clicking on a file or folder. This approach is very unobtrusive, and soon becomes second nature.</p>
<p><img src="http://f6design.com/journal/wp-content/uploads/2009/12/tortoisesvn_context_menu.jpg" alt="TortoiseSVN context menu" title="TortoiseSVN context menu" width="450" height="541" /></p>
<p>I won&#8217;t go into detail about how to install and use TortoiseSVN. The program is very <a href="http://tortoisesvn.net/support">well documented</a> and there are stacks of <a href="http://www.google.com/search?q=tortoisesvn+tutorial">online tutorials</a> if you get stuck.</p>
<p>In <a href="http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-2/">part 2</a> and <a href="http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-3/">part 3</a> of this series I will refer to TortoiseSVN when explaining some of my processes. For other Subversion clients the process will be slightly different from what I describe, but the basic principles remain the same. Apple users will find that there are plenty of Subversion clients for the Mac, though I haven&#8217;t used any of them and can&#8217;t make a personal recommendation &#8211; if you have a favourite you can leave a comment below.</p>
<p>In the second part of this series I will explain how I structure my subversion repository, how to create a working copy of your repository, and how to commit changes to the repository.</p>
<p><strong><a href="http://f6design.com/journal/2009/12/27/subversion-for-web-development-part-2/">Read part 2  &raquo;</a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2009/12/23/subversion-for-web-development-part-1/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Font Squirrel&#8217;s @font-face kit generator</title>
		<link>http://f6design.com/journal/2009/10/18/font-squirrel-font-face-generator/</link>
		<comments>http://f6design.com/journal/2009/10/18/font-squirrel-font-face-generator/#comments</comments>
		<pubDate>Mon, 19 Oct 2009 02:25:29 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[News & Reviews]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/?p=749</guid>
		<description><![CDATA[If you want to create your own @font-face kits, you absolutely must check out Font Squirrel&#8217;s new @font-face generator tool. All you have to do is upload a TrueType or OpenType format font, and the generator spits out a zip file containing:

The original typeface for Safari and Firefox 3.5
A WOFF font for Firefox 3.6+
An SVG [...]]]></description>
			<content:encoded><![CDATA[<p>If you want to create your own <code>@font-face</code> kits, you absolutely must check out Font Squirrel&#8217;s new <a href="http://www.fontsquirrel.com/fontface/generator"><code>@font-face</code> generator tool</a>. All you have to do is upload a TrueType or OpenType format font, and the generator spits out a zip file containing:</p>
<ul>
<li>The original typeface for Safari and Firefox 3.5</li>
<li>A WOFF font for Firefox 3.6+</li>
<li>An SVG font for Opera, Chrome, and iPhone</li>
<li>An EOT font for Internet Explorer</li>
<li>A sample HTML page</li>
<li>A sample CSS stylesheet</li>
</ul>
<p>The generator also features options to reduce file size by subsetting the font, cleanup font outlines, and auto-hint glyphs to improve rendering.</p>
<p><img src="http://f6design.com/journal/wp-content/uploads/2009/10/font_squirrel_generator.jpg" alt="Font Squirrel Generator" title="Font Squirrel Generator"  width="450" height="550" class="" /></p>
<p>Sweet!</p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2009/10/18/font-squirrel-font-face-generator/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>My run-in with the Great Firewall of China</title>
		<link>http://f6design.com/journal/2008/07/06/my-run-in-with-the-great-firewall-of-china/</link>
		<comments>http://f6design.com/journal/2008/07/06/my-run-in-with-the-great-firewall-of-china/#comments</comments>
		<pubDate>Mon, 07 Jul 2008 05:45:24 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/2008/07/06/my-run-in-with-the-great-firewall-of-china/</guid>
		<description><![CDATA[Recently I was developing a website for a client whose primary export market is in China. Needless to say I was a little alarmed when my client&#8217;s representatives in China reported that they couldn&#8217;t access their new site.
My client has reps in both Shanghai and Beijing, neither of who could see the website, so I [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I was developing a website for a client whose primary export market is in China. Needless to say I was a little alarmed when my client&#8217;s representatives in China reported that they couldn&#8217;t access their new site.</p>
<p>My client has reps in both Shanghai and Beijing, neither of who could see the website, so I knew it wasn&#8217;t a localized issue. My immediate suspicion was that the infamous &#8220;Great Firewall of China&#8221; was to blame. Thankfully I was able to take a few simple steps to diagnose the problem and get the site up and running.</p>
<h3>What is the Great Firewall of China?</h3>
<p>For anyone who doesn&#8217;t already know, the &#8220;Great Firewall of China&#8221; is the informal name given to the vast <a href="http://en.wikipedia.org/wiki/Internet_censorship_in_the_People%27s_Republic_of_China">Internet censorship apparatus</a> of the Chinese government. Sites considered injurous to the public good are blocked on a massive scale, so that they are innaccessible to Internet users within China.</p>
<h3>How to test if your site is blocked</h3>
<p>For foreign businesses and web designers who need to ensure their website reaches a Chinese audience, there are several tools which test a site&#8217;s availability from servers within China.</p>
<h4>WebSitePulse</h4>
<p>Website monitoring company <a href="http://www.websitepulse.com/help/testtools.china-test.html">WebSitePulse</a> offer a free service to check if a website makes it past the Great Firewall of China. You can test your site using servers in Beijing, Shanghai and Hong Kong. WebSitePulse also do a side by side comparion with servers in the US, Germany or Australia, so you can compare the responses.</p>
<h4>WatchMouse</h4>
<p><a href="http://www.watchmouse.com/en/ping.php">WatchMouse</a> offer a free service which pings your website from a number of servers worldwide, including one in Shanghai. If your website is being blocked, the Shanghai server will report 100% packet loss.</p>
<h3>Why me?</h3>
<p>One of the common methods of censoring a site is by IP blocking. Unfortunately, if the banned site is on a shared web host, all sites that share the same IP address are also blocked. This is what I believe happened in my case.</p>
<h3>The fix</h3>
<p>Luckily there is a simple workaround to sidestep issues with using a shared IP address: buy a static IP address. If your website has a unique IP address then it can&#8217;t be blocked simply because it shares a server with a banned site.</p>
<p>Within an hour of purchasing a static IP adress, my client&#8217;s website could be reached from within China. WebSitePulse and WatchMouse&#8217;s Chinese servers could see the site, and more importantly, my client&#8217;s reps in Shanghai and Beijing could too.</p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2008/07/06/my-run-in-with-the-great-firewall-of-china/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Opera Mini 4 simulator</title>
		<link>http://f6design.com/journal/2007/07/12/opera-mini-4-simulator/</link>
		<comments>http://f6design.com/journal/2007/07/12/opera-mini-4-simulator/#comments</comments>
		<pubDate>Thu, 12 Jul 2007 22:12:29 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[News & Reviews]]></category>
		<category><![CDATA[Technology]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/2007/07/12/opera-mini-4-simulator/</guid>
		<description><![CDATA[In a head-to-head battle with the Apple iPhone, Opera recently announced the beta version of their Opera Mini 4 browser. For those not familiar with Opera Mini, it is a very popular free web browser for mobile devices, and works with any modern mobile phone. To help woo consumers Opera are offering a web-based simulator, [...]]]></description>
			<content:encoded><![CDATA[<p>In a head-to-head battle with the Apple iPhone, Opera recently announced the beta version of their <a href="http://www.operamini.com/beta/">Opera Mini 4</a> browser. For those not familiar with Opera Mini, it is a very popular free web browser for mobile devices, and works with any modern mobile phone. To help woo consumers Opera are offering a <a href="http://www.operamini.com/beta/simulator/">web-based simulator</a>, which replicates exactly the functionality of the mobile browser.</p>
<p><img src='http://f6design.com/journal/wp-content/uploads/2007/07/opera4simulator.jpg' alt='Opera Mini 4 simulator' /></p>
<p>This is not only a great way to try Opera Mini 4 before downloading, it&#8217;s also handy for web designers curious to see how their sites hold up on a mobile device. Like previous versions of Mini, Opera Mini 4 processes web pages on the server, and reformats them to fit the screen of your mobile device. This reduces bandwidth consumption dramatically, and makes pages easy to read even on small screens. In what appears to be a nod to the iPhone, this time around the browser combines full screen and zoomed-in views, instead of squeezing an entire page into one long column. The genius of Opera&#8217;s approach is that text is still reformatted to fit your screen width, so multi column layouts will appear as several columns of narrow text that neatly wrap within the browser window.</p>
<p><strike>Unfortunately the Opera team are still working out some kinks which stop the beta installing on my Samsung d900i, so for now I&#8217;m still stuck on Opera Mini 3. But judging by the simulator, the upgrade will be well worth waiting for.</strike> </p>
<p><strong>Update:</strong> I downloaded the latest beta, and it now works on my phone. The only downside &#8211; no RSS reader in the beta, so it looks like I will <em>still</em> be stuck with Opera Mini 3 until the final release of version 4&#8230; Sigh.</p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2007/07/12/opera-mini-4-simulator/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Choosing a web host</title>
		<link>http://f6design.com/journal/2007/06/30/choosing-a-web-host/</link>
		<comments>http://f6design.com/journal/2007/06/30/choosing-a-web-host/#comments</comments>
		<pubDate>Sun, 01 Jul 2007 05:04:29 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[Technology]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/2007/06/30/choosing-a-web-host/</guid>
		<description><![CDATA[Web designers love to talk about our craft, but one topic we seldom touch on is web hosting. Perhaps that&#8217;s because hosting belongs to the realm of networking and hardware, whereas web design is a discipline primarily concerned with software and scripting. Be that as it may, web hosting can have a big impact on [...]]]></description>
			<content:encoded><![CDATA[<p>Web designers love to talk about our craft, but one topic we seldom touch on is web hosting. Perhaps that&#8217;s because hosting belongs to the realm of networking and hardware, whereas web design is a discipline primarily concerned with software and scripting. Be that as it may, web hosting can have a big impact on the success of a design: a site&#8217;s markup, CSS and images might be optimized for lightning fast loading speeds, but it will make little difference if the web server is lagging.</p>
<p>When I bought my first web hosting account back in 1999 I had no idea what I wanted from a hosting company. I went with a recommendation from a more experienced colleague, and wound up with a fairly pricey &#8211; although fast &#8211; shared hosting account. At the time I don&#8217;t think I even considered basic criteria such as disk allocation, bandwidth allowance or server-side scripting support. As it turned out the host was running the Cold Fusion programming language, which even in 1999 must have been extremely unusual!</p>
<p>In those happy-go-lucky days clients placed few technological demands on their web designer, beyond the simple requirement of getting a website online. For a newbie like myself that was about the extent of my abilities anyway, and as long as a web host gave me FTP access I was happy. But as the medium has matured so have the needs of both clients and designers, and today I am much more careful to select a hosting package that suits my requirements.</p>
<h3>Hosting platforms</h3>
<p>Most web hosting plans fall into one of two categories, determined by which operating system they run: Windows or Linux. This in turn dictates the programming languages, databases, and software packages available to a designer. For this reason, the choice of platform is a fundamental one when deciding on a hosting solution.</p>
<p>The most prevalent web server configuration is is known as a <a href="http://en.wikipedia.org/wiki/LAMP_(software_bundle)">LAMP</a> stack, comprising the Linux operating system, Apache web server, PHP programming language, and MySQL for database management. Linux hosting plans also often offer support for the Ruby and Perl programming languages. The fact these are all open source software solutions means that Linux hosting tends to be cheaper than Windows.</p>
<p>With about <a href="http://news.netcraft.com/archives/web_server_survey.html">32% of the server market</a>, Microsoft&#8217;s Internet Information Server (IIS) running on Windows is also an extremely popular hosting solution. IIS is usually coupled with the ASP.NET programming framework and MS SQL database management. Windows servers often offer PHP and MySQL support too, which makes them a flexible &#8211; albeit more expensive &#8211; option.</p>
<p>I&#8217;m not going to argue the comparative merits of Windows and Linux hosting, suffice to say that familiarity with a platform is usually the deciding factor. Pingdom did and interesting <a href="http://royal.pingdom.com/?p=95">survey</a> of seven of the most popular sites on the Internet to see what server configuration they were running on, and found that the decision to use a particular technology was usually motivated by familiarity. It makes sense &#8211; we are much more likely to choose technologies that suit our skill set rather than the other way around.</p>
<h3>Shared vs dedicated hosting</h3>
<p>Regardless of the software platform you settle on, you will also need to decide between a shared and dedicated server environment.</p>
<p>A shared hosting plan is where a large number of websites are located on a single server box, and share the computer&#8217;s resources. The hosting company takes care of server maintenance, software installation, backups, and bandwidth management, which makes shared hosting a painless affair. In addition to simplicity, a big advantage of shared hosting is the price. Because the web server is shared between many customers the cost per business is lower.</p>
<p>But there is a downside to hosting numerous sites on a single machine. If a neighboring site experiences extreme traffic demand, other sites on the server are likely to slow down too. You are also limited to whatever server configuration your hosting company decides is best. For instance most web hosts don&#8217;t give shared hosting customers access to their domain&#8217;s PHP ini (configuration) file.</p>
<p>If you don&#8217;t like to share then you&#8217;ll want a dedicated hosting account, with your very own web server at the hosting company&#8217;s data center. Your server will still be managed to a degree by the hosting provider, who will typically take care of data backups and performance monitoring. Scalability is the single biggest advantage of dedicated hosting, and because the server&#8217;s resources are reserved solely for your use dedicated hosting is perfect for high traffic websites. For a web design firm a dedicated server can also be used to house a number of client websites, allowing you to balance the server&#8217;s resources to suit the requirements of each site.</p>
<p>A third option is co-location, in which you provide your own server machine, and plug it into a service provider&#8217;s Internet pipeline. This gives you total control over your server, but isn&#8217;t an option you will want to pursue unless you are skilled in server administration and hardware configuration.</p>
<h3>Server-side programming</h3>
<p>One thing to be wary of when choosing a hosting package is to make sure the server, programming, and database management software are configured in a way that suits your requirements. Lets take PHP as an example.</p>
<p>In version 5 and earlier PHP offered a <a href="http://us2.php.net/features.safe-mode">&#8217;safe mode&#8217;</a>, designed to limit the possibility of malicious PHP code being executed, and protect servers from hackers. Nice as that may sound, safe mode also severely limits web developers from performing even straightforward tasks such as uploading files to their server via PHP. Some hosts install PHP with safe mode turned off, while others such as Dreamhost and Media Temple offer a way to effectively <a href="http://kb.mediatemple.net/article.php?id=080">disable safe mode</a> on a per-site basis. Unfortunately, most hosts have no such option, which means many popular PHP scripts will not run on their servers without some serious tinkering.</p>
<p>Similarly, the speed with which hosting companies update their software installations can differ quite significantly. For instance, if you are developing in PHP 5 then obviously you will need a host that has PHP 5 installed, whereas a large number of hosts still only offer PHP 4. Most web hosts will specify somewhere on their company website what software versions they run. If they don&#8217;t, make sure to ask.</p>
<h3>Disk and data allowances</h3>
<p>Exponential increases in hard disk space have meant that even the cheapest web hosting plans now offer ample file storage. Gone are the days of 10Mb hosting plans, so hosting video and other disk hungry files is no longer a major drama. Still, it is worth paying attention to the storage limits imposed by your web host, especially if you plan on hosting multiple websites under a single account.</p>
<p>As well as dictating the amount of disk space your site(s) can utilize, web hosts set a data transfer limit. This is a measure of how much data can be transferred between your web server and the Internet each month &#8211; in other words, how much your visitors can download before you are penalized. Traffic allowances vary greatly from one host to the next, so it is important to estimate your requirements accurately and choose a plan that meets them.</p>
<p>One hosting company I have used in the past states on their website that a 2Gb monthly traffic allowance should be sufficient for most small or medium business websites. Having designed a number of sites for small businesses I can say that this is not the case, and even a moderately successful site can easily exceed that limit.</p>
<p>If you think you may exceed the bandwidth limit set by your host, it is important to check the rate at which they charge for excess traffic &#8211; sometimes excess data charges can be exorbitant.</p>
<h3>Control panel</h3>
<p>Smaller hosting firms often require that you contact their support staff any time you need a change made to your account. When even something as simple as setting up an email autoresponder requires a phone call, it can be extremely frustrating. Thankfully most hosts offer a web-based control panel that allows you to customize almost every aspect of your account. Some larger hosts offer a comprehensive custom built control panel, but most opt for a generic panel such as the popular <a href="http://cpanel.net/index.html">cPanel</a> or <a href="http://www.swsoft.com/en/products/plesk/">Plesk</a>.</p>
<p>When considering a host it is worth considering the control panel you will be using, as a good panel will make website maintenance simpler and more pleasurable.</p>
<h3>Reseller hosting</h3>
<p>Reselling hosting to your clients not only saves you having to purchase new hosting account for each client, it can turn a tidy profit. Reselling involves purchasing one hosting account, then subdividing it into multiple sub-accounts, one per client. This allows you to set your own pricing structure, and sell hosting to your clients at more than its original value.</p>
<p>In practice, any hosting plan that allows multiple domains can be resold, but many web hosts offer accounts that are purpose built for reselling. These reseller packages mask the identity of the hosting company, so it appears to your clients as if you are the host.</p>
<h3>Local vs offshore hosting</h3>
<p>Unless your website&#8217;s primary audience is in the US, choosing to host on a web server located in your own country may offer significant speed and reliability benefits. The downside to local hosting (by which I mean non-US hosting) is that it tends to cost more. Most of the large scale hosting companies (Go Daddy, Dreamhost, Media Temple etc) are based in the US, and economies of scale mean that local operations cannot compete with them on price alone. But there are compelling advantages to local hosting, even despite the fact it is more expensive.</p>
<p>The primary reason for choosing local hosting is speed. It&#8217;s a simple matter of geography: the further your end-user is from your host&#8217;s data center, the longer the traffic is going to take to reach them. I live in Australia, where hosting on locally based servers generally costs more, but is considered vastly more desirable due to the speed boost when serving pages to an Australian audience.</p>
<p>Another advantage of local hosting is that server maintenance is timed to coincide with off-peak traffic in your time zone. Any sensible web host will perform scheduled server maintenance during the wee hours of the morning, when web traffic is at its lowest. But what may be middle of the night in Texas or LA is the middle of our working day in Australia, meaning routine maintenance can kill my client&#8217;s email access and take their website offline.</p>
<p>For those readers who are based in the US, the local/offshore distinction is irrelevant as you already get the best of both worlds: low cost hosting in the same country as your primary audience.</p>
<h3>Reliability and performance</h3>
<p>While cost is inevitably a consideration when choosing a web host, it is dangerous to make a decision based on price alone, as cheap hosting often comes at the expense of server reliability and performance. A common measure of reliability is uptime, the percentage of time that a web host&#8217;s computers are up and running. A website needs to be available around the clock, and every moment offline equates to lost visitors and income, so choosing a host with a high uptime is critical. Most hosts promise 99.9% uptime, but don&#8217;t take their word for it. Check with a host to see if they records of their outages, or ask one of their customers for their anecdotal experiences.</p>
<p>Many hosts also have redundant servers, waiting to kick into action if the primary servers go down. Ideally, redundant servers will be housed in a separate data center to the host&#8217;s primary servers, so that in the case of a power outage or natural disaster they will be unaffected.</p>
<p>Another critical measurement is the speed of a host&#8217;s servers. This is influenced by many factors, including their network infrastructure, connection to the Internet, and whether they <a href="http://en.wikipedia.org/wiki/Overselling">oversell</a> their hosting plans. A host will usually offer information about their network and data center on their company website, but overselling &#8211; cramming too many websites on a single shared server to maximize profits &#8211; is harder to detect. In most cases overselling has no ill-effect, since few customers will ever use their full bandwidth and disk allowances, but it is still something to be aware of.</p>
<p>To test the response time of a host, you can ping a site that is hosted with them. In Windows you can do this by opening a command prompt, and typing <code>ping domain</code>, for example <code>ping google.com</code>. This will tell you how long data takes on average to reach your computer from the website. This is a useful way to compare the speed of two different webhosts.</p>
<h3>Conclusion</h3>
<p>Choosing a web host isn&#8217;t as easy as typing &#8216;web host&#8217; into Google and clicking on the first search result, but provided you do your research it&#8217;s not hard to find a service that suits your needs. I hope that this article has made you aware of a few of the pitfalls that await the unwary.</p>
<p>Although I have mentioned a couple of web hosting firms and software solutions by name, that&#8217;s not because I think they are the best around, but rather they illustrate a point I was making. There are a vast number of hosting companies out there, and obviously I have personal experience with only a fraction of them. During the article I also talked in greater detail about Linux/PHP hosting environments than other alternatives. That&#8217;s because I am most familiar with LAMP servers, not because I think they are somehow better.</p>
<p>If you have your own web hosting experiences or tips to share, please leave a comment below.</p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2007/06/30/choosing-a-web-host/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>IE7 Release Candidate 1 Standalone</title>
		<link>http://f6design.com/journal/2006/10/15/ie7-release-candidate-1-standalone/</link>
		<comments>http://f6design.com/journal/2006/10/15/ie7-release-candidate-1-standalone/#comments</comments>
		<pubDate>Sun, 15 Oct 2006 11:45:53 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/2006/10/15/ie7-release-candidate-1-standalone/</guid>
		<description><![CDATA[You can pick up a standalone version of Internet Explorer 7 Release Candidate 1 (RC1) at Tredosoft.
I haven&#8217;t tested it out, as I do in fact have RC1 installed as my &#8216;official&#8217; version of IE, and use a standalone version of IE6 for backwards compatibility testing. It looks good though, and appears to be a [...]]]></description>
			<content:encoded><![CDATA[<p>You can pick up a standalone version of Internet Explorer 7 Release Candidate 1 (RC1) at <a href="http://tredosoft.com/IE7_standalone">Tredosoft</a>.</p>
<p>I haven&#8217;t tested it out, as I do in fact have RC1 installed as my &#8216;official&#8217; version of IE, and use a standalone version of IE6 for backwards compatibility testing. It looks good though, and appears to be a &#8216;proper&#8217; standalone version which fully identifies itself as IE7, meaning <a href="http://f6design.com/journal/2006/07/14/goodbye-hacks/">conditional comments</a> ought to work fine.</p>
<p>For anyone running <a href="http://browsers.evolt.org/?ie/32bit/standalone">older IE6, 5.5, or 5 standalones</a> that don&#8217;t support conditional comments, I recommend you read <a href="http://www.positioniseverything.net/articles/multiIE.html">Manfred Staudinger&#8217;s article</a> on the topic, which will solve your woes.</p>
<h3>Why would I want a standalone anyway?</h3>
<p>Since you can only have one version of Internet Explorer installed on a single Windows system, testing a website across multiple versions of IE very difficult. That&#8217;s where standalones are very useful, allowing you to run multiple versions of IE side by side on the same machine. For web developers this is a must.</p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2006/10/15/ie7-release-candidate-1-standalone/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>&#8220;Must have&#8221; web development and office programs (free too)</title>
		<link>http://f6design.com/journal/2006/09/19/must-have-web-development-and-office-programs-free-too/</link>
		<comments>http://f6design.com/journal/2006/09/19/must-have-web-development-and-office-programs-free-too/#comments</comments>
		<pubDate>Tue, 19 Sep 2006 10:04:58 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[News & Reviews]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/2006/09/19/must-have-web-development-and-office-programs-free-too/</guid>
		<description><![CDATA[I&#8217;ve read a few articles recently where the author gives a run down of their top development or office productivity software &#8211; the &#8220;must have&#8221; tools that make you and your computer happy campers. Never one to miss a bandwagon, I&#8217;ve decided to create my own list of the web development and productivity tools that [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve read a few articles recently where the author gives a run down of their top development or office productivity software &#8211; the &#8220;must have&#8221; tools that make you and your computer happy campers. Never one to miss a bandwagon, I&#8217;ve decided to create my own list of the web development and productivity tools that I use on a daily basis. To be kind to your wallet all of the software on my list is available under a freeware or generous shareware license. The programs I mention run on Windows, but that&#8217;s not to say there is not a Mac or Linux version available too.</p>
<p>Without further ado, here&#8217;s the list:</p>
<h3>Web Development</h3>
<h4><a href="http://www.devside.net/">Developerside Server Suite</a> and <a href="http://www.apachefriends.org/en/xampp.html">XAMPP</a></h4>
<p>If you&#8217;re like me &#8211; and the majority of web designers &#8211; you rely on PHP as the server side scripting language that powers your websites, and MySQL as your database solution. That&#8217;s all fine and well, but uploading your PHP files to your web hosting account to test them *every* time you make a minor change gets old *real* fast. The solution is to install a WAMP (Windows Apache MySQL and PHP) web server on your local computer. Installing a web server isn&#8217;t as scary as it sounds, thanks to the availability of all-in-one web server distributions aimed at individuals and small businesses. I cut my teeth on the Developerside Server Suite, which is an easy WAMP installation, fully configured and ready to run. It&#8217;s as simple as unzipping the files, running a few command-line instructions, and firing up your web browser. From then on you can develop sites locally with all the goodness of MySQL databases and PHP, and only need to upload files to your web hosting account when the job is complete.</p>
<p>Although the Developerside server suite is the only WAMP package I have experience with, I know of many people using XAMPP. You may like to compare the two products to see which takes your fancy. XAMPP is available for Linux as well as Windows and Mac OSX.</p>
<h4><a href="http://www.mpsoftware.dk/phpdesigner.php">PHP Designer</a></h4>
<p>If you write a fair amount of PHP code, a PHP IDE (Integrated Development Environment) might help you code faster and smarter. The best known IDE&#8217;s are commercial products (<a href="http://www.zend.com/products/zend_studio">Zend Studio</a> and <a href="http://www.nusphere.com/products/index.htm">NuSphere PhpED</a>), but there are a few good free PHP editors to choose from. PHP Designer has a free version for personal use that includes a code debugger, syntax highlighting, code tips, and a number of shortcuts for adding common PHP statements and HTML tags to your documents. Think of it as a text editor on speed. A more fully featured version on PHP Designer is available for USD$69, although if you&#8217;re going to splash out you should probably investigate some of the other commercial IDE&#8217;s on the market to make sure you get the best bang for your buck.</p>
<p><strong>A little tip for getting the most out of PHP Designer:</strong> Turn on all of your toolbars (Format, Forms etc). The toolbars give you quick access to all the commonly used commands, but for some reason they are turned off by default.</p>
<h4><a href="http://www.smartftp.com/">SmartFTP</a></h4>
<p>When it comes to FTP applications you want something that you can quickly fire up, connect to a server, and transfer files across. SmartFTP does the job, and throws in those handy extras like a favorites list, easy CHMODing of files and folders (that&#8217;s setting Unix file permissions), filtering files (so for instance you can choose to skip files of type *.fla and *.bak when uploading), and a nifty file transfer queue.</p>
<h4><a href="http://www.mozilla.com/">Firefox</a></h4>
<p>The release of Firefox shook up the web design industry by challenging Microsoft&#8217;s stranglehold over the web browser market, and it&#8217;s still the best browser out there. These days other web browser might match it for web standards support, but when you throw a thousand or so extensions into the mix, Firefox is the clear winner. It&#8217;ll be interesting to see how the final release of Internet Explorer 7 changes the playing field, but for now I build sites for Firefox then tweak them to work in IE.</p>
<h4><a href="http://chrispederick.com/work/webdeveloper/">Web developer toolbar for Firefox</a></h4>
<p>Speaking of firefox extensions, this baby is the web developer&#8217;s best friend. Edit a page&#8217;s CSS on-the-fly, display detailed information about every page element, validate HTML and CSS from within the browser, disable images, resize the page, run a javascript console. Is there anything this handy toolbar can&#8217;t do? Basically, no.</p>
<h4><a href="http://users.skynet.be/mgueury/mozilla/">HTML Validator extension for Firefox (based on HTML Tidy)</a></h4>
<p>OK, there is *one* thing the web developer toolbar can&#8217;t do. It can&#8217;t validate your pages locally. Instead it relies on the W3C&#8217;s online <a href="http://validator.w3.org/">validation service</a>. That&#8217;s where the HTML Tidy extension steps in. It also displays a handy icon in Firefox&#8217;s status bar letting you know if a page validates. That little icon will revolutionize the way you work by telling you at a glance if your pages are valid, and you can say goodbye to round trips to the W3C validator every time you modify a page. And as you&#8217;d expect from a Tidy extension, it can clean your HTML code for you, right from within the browser.</p>
<h4><a href="http://www.chiark.greenend.org.uk/~sgtatham/putty/">PuTTY</a></h4>
<p>If your web host offers you shell access to your server, then you&#8217;ll need an SSH client to make the connection. Grab a copy of PuTTY and in no time at all you&#8217;ll be pulling the mad unix command line styles.</p>
<h3>Office Productivity</h3>
<h4><a href="http://www.mozilla.com/thunderbird/">Mozilla Thunderbird</a></h4>
<p>From the folks that gave us Firefox comes the lean n&#8217; mean Thunderbird email client. So far Thunderbird has failed to set the world on fire the way it&#8217;s web browser sibling has, probably because Tbird takes it&#8217;s lead from other email clients &#8211; notably Microsoft Outlook &#8211; rather than blazing new ground like Firefox did. However it still does a great job as an email client, and as you&#8217;d expect from a Mozilla product it can be augmented by a number of community created plugins.</p>
<h4><a href="http://www.mozilla.org/projects/calendar/sunbird/">Sunbird</a></h4>
<p>Thunderbird lacks the day planner and task organizer that Outlook boasts, and that&#8217;s where Sunbird steps in. It&#8217;s still an alpha release, so don&#8217;t expect perfection, but Sunbird sports most of the features you need to keep your life organized.</p>
<h4><a href="http://www.openoffice.org/">OpenOffice.org</a></h4>
<p>Have a chip on your shoulder about using Microsoft products? OpenOffice.org lets you break the shackles of corporate oppression with a fine set of Office productivity tools designed to rival Microsoft Office. Writer is the pick of the bunch for me, offering an alternative to Microsoft&#8217;s Word. It does a damn fine job too, and even reads and writes to Word format so you won&#8217;t find yourself shunned by Microsoft devotees.</p>
<h4><a href="http://www.mozy.com/">Mozy</a></h4>
<p>If you read my review of Mozy a few months back you&#8217;ll know that I was highly impressed with the ease with which the product automates online backup of your important data. For a web developer that means you can ensure that development files for your current projects are always safely backed up, and you barely have to think about it. 2gb of storage &#8211; and peace of mind &#8211; for $0 is a sweet deal in my book.</p>
<h4><a href="http://www.ceruleanstudios.com/">Trillian</a> and <a href="http://gaim.sourceforge.net/">Gaim</a></h4>
<p>It seems like a good number of people rely on instant messaging these days to conduct realtime conversations with friends and colleagues, rather than the telephone. Unfortunately the major IM protocols don&#8217;t play to well together, but with a little help you can have all of your IM accounts and buddies happily cohabiting. Trillian and Gaim are the two multi-protocol IM clients I have experience with. Unfortunately neither application is perfect, and when transferring files with your buddies both clients show their weakness. I have found Gaim to become unresponsive when receiving a file, and Trillian to upload files at very slooooow speeds. In any case, it beats running ICQ, MSN and AIM all at the same time!</p>
<p><strong>Here&#8217;s a gotcha for Trillian:</strong> The application comes with some of it&#8217;s shortcut keys configured the same as Photoshop. Except Trillian will &#8217;steal&#8217; the shortkey even when Photoshop has focus. You can disable the shortcut keys in Trillian&#8217;s preferences, which will put Photoshop back in the driver&#8217;s seat.</p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2006/09/19/must-have-web-development-and-office-programs-free-too/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Getting serious about backup</title>
		<link>http://f6design.com/journal/2006/07/15/getting-serious-about-backup/</link>
		<comments>http://f6design.com/journal/2006/07/15/getting-serious-about-backup/#comments</comments>
		<pubDate>Sat, 15 Jul 2006 10:39:18 +0000</pubDate>
		<dc:creator>Jonathan</dc:creator>
				<category><![CDATA[News & Reviews]]></category>
		<category><![CDATA[Technology]]></category>

		<guid isPermaLink="false">http://f6design.com/journal/2006/07/15/getting-serious-about-backup/</guid>
		<description><![CDATA[Recently I was discussing with my studio-mates what sort of contingency plan we have in place to prevent data loss. We all work as professional designers, and almost 100% of our work for clients is stored in digital format. A hard drive failure, fire, or theft of our computers could be catastrophic, setting us back [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I was discussing with my studio-mates what sort of contingency plan we have in place to prevent data loss. We all work as professional designers, and almost 100% of our work for clients is stored in digital format. A hard drive failure, fire, or theft of our computers could be catastrophic, setting us back days &#8211; possibly even weeks.</p>
<p>I make a regular habit of backing up projects to CD/DVD, but I&#8217;m not fanatical enough to burn a backup disc every single day. An external hard-drive would give peace of mind against hard drive failure, but it&#8217;s reasonable to assume it wouldn&#8217;t get left behind in a burglary or magically escape damage in a fire. Clearly a regular off site backup method is required to give bulletproof protection.</p>
<p>One studio-mate suggested online backup. At the time I dismissed the concept as too bandwidth and disk hungry. With the massive photoshop and video files I deal with on a daily basis it might take days to perform a backup, and the cost of storage would be astronomical.</p>
<p>Later I gave the idea more thought. What if I were to use an online backup service to protect only my <em>critical files</em>. As a web designer, I consider my website source files (Flash .fla&#8217;s, actionscript files etc) and deployment files (HTML/CSS/JS/SWF/XML files and website folder structure, mySQL databases etc) to be my most valuable assets. If those files are safe, then my client&#8217;s website&#8217;s are safe. Semi-regular CD/DVD backups would continue to take care of the larger files, with online backups providing protection against losing the day&#8217;s work.</p>
<h3>The hunt is on!</h3>
<p>I quickly discovered that there are now a plethora of <a href="http://www.techcrunch.com/2006/01/31/the-online-storage-gang/" target="_blank">online backups services</a> to choose from. Most seem fairly fresh out of the starting gate, and the features and cost of each vary considerably.</p>
<p>One product seemed a particuarly good match for my requirements. It&#8217;s called <a href="https://mozy.com/" target="_blank">Mozy</a>, and it&#8217;s free to signup for their basic plan, which gives you 2GB of storage space, and allows you to recover your data up to 4 times a month should you need to. If that sounds too restrictive, you have the option to sign up for Mozy&#8217;s month-to-month $1.95/5GB, $4.95/30GB or $9.95/60GB plans. The Mozy application is currently only available for Windows XP, but a Mac client is on it&#8217;s way.</p>
<p><a class="imagelink" href="http://f6design.com/journal/wp-content/uploads/2006/07/mozy_client_large.gif" target="_blank" title="Mozy client screenshot - click to enlarge"><img class="contentImg" src="http://f6design.com/journal/wp-content/uploads/2006/07/mozy_client_small.jpg" alt="Mozy client screenshot - click to enlarge" /></a></p>
<p>Mozy works by performing incremental backups, meaning only files that are new or have been modified since your last backup will be uploaded. The initial backup can take some time to complete, but after that backups should take between 10 mins and 1 hour &#8211; depending how frequently you modify the files in your backup sets.</p>
<h3>Configuring Mozy</h3>
<p>Once the Mozy application is installed you have the option to schedule backups and configure backups sets. Mozy comes with a number of pre-defined backup sets, covering the needs of your common home user. I removed the default sets and created my own, which was as simple as using a Windows file browser to locate the folders I wish to include in a set. There is the option to filter files that are included in a set based on file extension, size, creation date and modification date.</p>
<p><a class="imagelink" href="http://f6design.com/journal/wp-content/uploads/2006/07/mozy_set_large.gif" target="_blank" title="Mozy set creation screenshot - click to enlarge"><img class="contentImg" src="http://f6design.com/journal/wp-content/uploads/2006/07/mozy_set_small.jpg" alt="Mozy set creation screenshot - click to enlarge" /></a></p>
<h3>Running Mozy</h3>
<p>There is no option within Mozy to disable scheduled backups, however you are still able to manually start a backup whenever you wish. I&#8217;ve got Mozy installed at home and at work (you need a different account for each computer you install Mozy on), each scheduled to backup daily. Backups occur in the background, and usually I don&#8217;t even notice that they have started. Occassionally I can detect a slight slowdown in computer processing speed during backups, but not enough to disrupt my workflow.</p>
<h3>Restoring files</h3>
<p>This is what really sold me on Mozy. When you choose to restore files, it delivers them back to you as a zip file containing a exact replica of your original folder structure. You can choose to restore individual files or folders, in any combination you choose, from backups as much as a month old.</p>
<p><a class="imagelink" target="_blank" href="http://f6design.com/journal/wp-content/uploads/2006/07/mozy_restore_large.gif" title="Mozy restore screenshot - click to enlarge"><img class="contentImg" src="http://f6design.com/journal/wp-content/uploads/2006/07/mozy_restore_small.jpg" alt="Mozy restore screenshot - click to enlarge" /></a></p>
<h3>Security</h3>
<p>Mozy uses 448-bit Blowfish encryption to encrypt files on your PC, then transfers them to the Mozy server using 128-bit Secure SSL encryption. I&#8217;ll be honest, I don&#8217;t know what Blowfish encryption actually is, but it sounds robust &#8211; in a fishy kinda way! Of course, once your data is actually on the Mozy servers, I guess you pretty much have to put your trust in Mozy&#8217;s staff to keep it private. Bottom line, if you&#8217;re backing up top secret government documents, you&#8217;re probably a lot safer keeping them offline, but for the average Joe, Mozy should be more than secure enough.</p>
<h3>The bottom line</h3>
<p>As you can probably tell I&#8217;m fairly chuffed with Mozy. It&#8217;s gives me peace of mind to know that my current projects are backed up on a daily basis, and it&#8217;s given me a new toy to play with! Due to the comparitively slow network speeds of online backup services I don&#8217;t think they can provide an all-in-one backup solution, but they definitely have a place in the backup arsenal. I&#8217;m planning to also invest in an external hard drive to perform full system backups, but for my day-to-day needs Mozy has me covered.</p>
]]></content:encoded>
			<wfw:commentRss>http://f6design.com/journal/2006/07/15/getting-serious-about-backup/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
