Install Tree.io on Ubuntu with Apache

A couple of days ago I stumbled upon a very, very interesting open source project, which I have  quickly fallen in love with. This this project is called Tree.io, an all-purpose business management app for any business. Sounds great, doesnt it? I dont want to bore you with its features, since you can easily look them up yourself here. However some things that I personally really like about this system are:

1) Beautiful user interface
Tree.io just looks awesome, and thats not the end of the story – even though in my opinion it is a big plus, since many open source projects just look crappy and dont have the “good-looking” and “quick-to-use” interfaces like the one that Tree.io offers. Its interface makes it really easy to work with: its ajaxified, fast and organized, which in my opinion is pretty important, since you’ll probably use it pretty often, once you decided to go with it. Just look yourself in this demo video:

2.) Code
Tree.io is written in Python, making use of the Django Web Framework. I think its a good thing. I hate it when complex projects roll the foundation of their software on their own, probably very inferior framwork – if they even use any. Django is a great, flexible and very mature framework, that has a lot to offer. The code is organized, clean, extendable all that stuff… If you’re experienced with MVC Frameworks, let them be Rails or Symfony for instance, you will probably appreciate Django, if you dont know it already.

3.) Features
Tree.io provides a lot of functionality which is probably sufficient for any small to medium sized business, that looks for an all-around solution. I personally dig the project management module. There many project management tools out there, few open source, and very few are in my opinion a pleasure to work with. Tree.io offers solid project management features like milestones, tasks (yeah, even sub tasks) and the ability to collaborate on tasks using project comments, task comments or to chat using Tree.io’s build-in chat functionality.

Conclusion
Different tools for project management, billing and invoicing, file-storage and collaborating, contact management -> I am tired of it. Since I decided to get totally organized in 2012, Tree.io really comes in handy and will be the tool that manages everything that I do 🙂 .

Installation

Unfortunately, the installation docs are not very clear, if you (as I), have never deployed a Django Project before. I assume you’re on a linux box with Ubuntu (or I guess another debian-based distribution) installed. I also assume you will install Tree.io into the /home/projects/treeio directory. Depending on what you actually have installed on your system, there might be some problems, just comment and I will happily answer them. Lets start.

Install apache, Wsgi and mysql:

 $ sudo apt-get install apache2 libapache2-mod-wsgi
 $ sudo apt-get install mysql-server python-mysqldb
 

Install some stuff that we need in order to work with Python and Django (if you havent done so already):

$ sudo apt-get install python-pip python-dev build-essential
$ sudo pip install --upgrade pip
$ sudo pip install --upgrade virtualenv
 

Install dependencies as outlined by Tree.io:

sudo apt-get build-dep python-lxml python-imaging

Create the directory Download and unzip Tree.io:

mkdir /home/projects // if the folder does not already  exist
wget http://tree.io/static/download/treeio.zip
unzip treeio.zip
cd treeio

You’re now into the treeio directory. Lets install all of its dependencies

make

If you get some error message saying that “PIP” wasnt able to find some dependencies such as “PIL”, just remove them from the “requirements.pip” file in the treeio directory. We have already installed them. You can than run “make” again after running “clean make”.

Create the “treeio”-database. I will not cover this here. However you then have to generate all the tables:

make install

The installer will guide you through all the steps. We’re almost done. There are 3 more steps:

Create a VirtualHost. Put a file called “treeio” in the /etc/apache2/sites-available directory and add the following:

Listen 8080
WSGIRestrictStdout Off
<VirtualHost *:8080>
 
    DocumentRoot /home/projects/treeio
 
    <Directory /home/projects/treeio>
        Order allow,deny
        Allow from all
    </Directory>
 
    WSGIScriptAlias / /home/projects/treeio/treeio.wsgi
    
    WSGIDaemonProcess treeio processes=2 threads=15 display-name=%{GROUP}
    WSGIProcessGroup treeio
 
</VirtualHost>

Save your file. We now have to add the “treeio.wsgi”-file in your treeio directory. Add this:

import os
import sys

sys.path.append('/home/projects')
sys.path.append('/home/projects/treeio')

os.environ['DJANGO_SETTINGS_MODULE'] = 'treeio.settings'

import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()

Almost done! Add the treeio-site to the apache enabled sites:

$ sudo a2ensite treeio

Restart apache!

$ sudo /etc/init.d/apache2 restart

You’re done! Enter the url in your browser: http://yourip:8080 . You will now see your Tree.io installation, the default admin credentials are admin (user) and admin(pass).

Troubleshooting
If it doesnt work for you, the first thing you should do is to enable the debug mode: go to /home/projects/treeio and edit the settings.py file, setting “DEBUG” to “True”. You will now see some more output and error information, given that there is no server error. In this case, as always, check your Apache logs and go from there 🙂 .

Save time with the Envato market place

Many times, when doing design, coding or any other web related work I first  look for resources to make my work easier. Let this be existing plugins for the CMS of my choice, Javascript stuff or graphic related stuff. One thing, that annoys me quite a lot is, that I find myself using the same resources over and over again: background patterns, image galleries you name it. It is first of all hard to find decent resources and also to find resources that you can use, for licensing reasons ect. This is where the Envato market place comes in. Envato offers several platforms for different purposes, offering resources that you can buy for really not much money at all. The great concept however is, that users can create resources and publish them at one of the Envato sites, splitting some of the revenue with Envato. It seems like many designers, coders ect. are now using these platforms to publish stuff, that they would otherwise have not published for free and also the overall quality of the offered resources is overall way greater than with free or other paid resources. And just to point it out again, many resources such as awesome jQuery plugins, background patterns or even themes can be bought for less than 5 bucks.

Themeforest.net

Themeforest.com is a platform that offers themes – simple as that. WordPress themes, Joomla themes or even admin themes for your next great web app can be bought here. If youre looking for something great, this is the right place. The great thing is also that the overall quality of the themes is really good. When going through templatemonster.com for instance, I find myself just getting pissed a lot of times, because there is so much low quality stuff offered. Take a look, you’ll see what I mean 🙂

Graphicriver.net

Graphicriver.com is a platform that offers graphics related stuff. I really love how the site is structured and how easy it is to navigate. Logos, fonts, web graphics, print stuff or even ready-to-use brochures and  business cards can be found here –> check it out!

Codecanyon.net

Codecanyon.net is the place to find the right script, plugin or code snipped for your project. CMS plugins, Javascript plugins such as jQuery image galleries or css templates can be found here – and actually quite a lot more as well. I must say this is my favorite Envato site, because there is so much useful stuff offered. But you can check it out yourself. I highly recommend it.

Conclusion

Market places for digital resources is of course not the newest business idea. However Envato’s sites just excell when comes to quantity AND quality. For a few bucks you will almost always find some great new resource that fit well for what you want to accomplish. If you do web related work, you really have to check these sites out, even though there’s a high chance that you already know them 😛

Easy server management with EHCP

Server administration is a pain in the a** to deal with, at least it is for me. For the production deployments that I work on, we usually use a deticated server with CentOS installed along with CPanel , which I must say works quite well. At least I have never had any problems with the CentOS/CPanel combination. However, I also use a bunch of vservers for testing and development purposes. These usually have the ubuntu server edition installed, since ubuntu just offers most software/tools in its repositories than any other linux distribution.

A couple of weeks ago, I wanted to set up a new development server for another side project, which by default had the “Froxlor” server control panel installed. This thing was as buggy as it gets. I found my self setting up a couple of vhosts, fixing postfix and some other annoying stuff for a couple of hours until I had enough.

I then started to look for a rather simple server control panel: easy to set up and of course easy to use. Needless to say, I found it:

EHCP stands for “Easy hosting control panel” and as the name suggests, it is quite easy, just works and in addition – it gives me all the features, that I need :).

Installation

1.) Donwload EHCP

$ http://www.ehcp.net/ehcp_latest.tgz

2.) Extract EHCP

$ tar -zxvf ehcp_latest.tgz

3.) Move to the EHCP directory

$ cd ehcp

4.) Start the installer

$ ./install.sh

Thats it! The installer will guide you through the installtion –> eezy peezy japanesey. Happy coding!

Sass – CSS reloaded

One of my newest Tools for my daily design activities includes Sass. CSS is of course not a real complex technology in itself. However CSS does have some shortcomings. Inheritance, variables and nested rules are some features that I personally would have loved to see in CSS. Luckily though, this is where Sass comes in. Sass in an CSS extensions that allows you to write .sass files instead of .css files and have these files compiled into css automatically. To use Sass, all you have to do is to install the “haml” rubygems package, which is actually another templating syntax for Ruby on Rails. In order to have your .sass files compiles to CSS, you have to tell sass to watch them using your command line: sass –watch style.scss:style.css. You can also watch whole directories: sass –watch stylesheets/sass:stylesheets/compiled. Here are a few of Sass’s features that will show you, what it can do for you:

Easier syntax

You will get the idea. There are no brackets and no semicolons:

body   
   color: #000000
   font-family: Tahoma,Geneva,sans-serif
   font-size: 13px

The downside of this syntax is, that you get used to it pretty quickly, but since Sass works on all platforms, there is nothing that keeps you from just just using Sass exclusively 🙂 .

Variables

This comes in handy, if you for instance deal with many different colors or other properties. Just assign a variable to a property and you can easily change colors for all your stylesheets :

$green : #6C9424
body   
   color: $green
   font-family: Tahoma,Geneva,sans-serif
   font-size: 13px
a:hover
   color: $green
div.mydiv
   border-top: 1px solid $green

This can be a huge time saver. Among other things I am now working on a theme with for different color schemes. Variables make it really easy to change and adjust your colors, since don’t have to find all of your selectors using a particular color.

Selector inheritance

I also love this feature. Sass allows you to inherit the styles from different selectors. I personally have found myself to use particular properties over and over again in my CSS files. Here you have the same problem as in the before mentioned example: you will have to edit all occurrences of your properties when making changes to these properties. Sass helps :

.heading-font
  font-family: Tahoma, sans-serif
  font-size: 16px
  font-weight: normal
span.mycontainer span.heading
  @extend .heading-font

I hope you get the idea. Usually during the theming process, you have different selectors with the same styles, often times split across many different css files. Using selector inheritance allows you to easily make the changes editing only one property of one selector.

Conclusion
Sass makes your design life easier. You write less, easier maintainable code and don’t repeat yourself. Thats a good thing. You will of course find a more extensive documentation on the official Sass web site. However I hope I was able to give a nice, clean and straight forward introduction on this im my opinion really awesome tool.

Super easy, fast and awesome project management with Teamworkpm

Having worked as a freelance web designer/developer in recent years, there are very few tools that have been as helpful to me as the one I am now going to present:

Teamworkpm is Project Management tool to help you make your life easier. Many of you have probably heard about Basecamp, which is similar and also good, but not as awesome as Teamworkpm 🙂 . Project management tools help you to get organized – and in the case of Teamworkpm, they do not slow you down in terms of productivity and help to do more quality work faster. I have been using this tool for almost a year now – and I do want to miss it anymore.

What I used to

Even working on small projects can be a pain in the ass if the project is not organized well. Before using a project management tool, I kind of approached new projects something like this:

• make an excell spreadsheet for all the tasks and to-dos
• track time on this spreadsheet
• collaborate per email

For small projects, in which you are working by yourself, this solution may seem sufficient. However headaches will begin to start once the project is getting more complex or more people are collaborating on a project. Usually you are collaborating with different people on different tasks. And usually one or more people will give you feedback about particular tasks. People will send each other emails on several issues, maybe a screen shot, some passwords and some files here and there and after a while, you have no friggin idea whats going on and probably forget half of the things that you or others are supposed to do. Of course am over-dramatizing this scenario a bit. The point I want to get across is, that it is hard to really organize a project without an extra tool. You want to focus on work, being productive and worry about actually getting the job done :).Teamworkpm to rescue!

Project & Task management

The first thing that Teamworkpm in my opinion has gotten right is its task management features. You can:

• create tasks
• create tasks lists
• assign persons to these tasks
• set due dates
• add descriptions
• attach files
• comment and collaborate on these tasks

This way, you will always know what still needs to be done and all the information and collaboration is cleanly and organized bound to
these tasks. Teamworkpm also offers other milestone and project management features, so far I have not found anything that I am missing 🙂 .

Time tracking

Another great feature is time tracking:

• easily track the time per task
• stop and continue the timer whenever you want
• export your time sheets as an excel spread sheet or a pdf
• create an invoice based on your tracked time

I just love this feature, since I dont have to worry about stupid time sheets and invoices anymore. It really does not get any easier than that.

Other features

There are still other important features:

• manage companies, contacts and persons
• create forum posts
• create notebooks which can be revised and edited by other members
• calender features: set events, meetings and whatever you want

I cannot overstate how important this tool has been to keep my stuff together. Organization has been a pain to deal with – this tool makes it a non-factor. I would recommend Teamworkpm to anyone who does freelancer work or works collaboratively on projects. The downside is: it is not free – but why would it be, its awesome. I am subscribed to the “Business 1” package – 24 bucks in exchange to for a lot less headaches and better productivity. And no, I do not get paid for writing this post. This tool actually is this awesome. However you can get a 30 day free trial here.

Easy magento csv product feeds

One requirement of almost any online store is the ability to provide data feeds of its products. Out of the box, Magento offers this feature using either the DataFlow module or by using one of the many 3rd party export modules.

However, while working on one of my projects I had several problems using the before mentioned solutions because:

• the whole DataFlow thing just sucks ( slow, not straight forward, hard to customize, no cron support)
• many of the existing extensions are way too expensive
• many extensions do not provide the flexibility that we needed

These were some of our requirements for our product feeds, which we mainly needed for price comparison engines:

• csv export
• cron support
• the ability to add certain keywords to particular products or categories
• add a shipping cost column
• easy and straight-forward
• display child products along with its options using images from the parent product

My solution was to create a command line script for each feed, which now updates our feeds each night at a particular time. Also for testing purposes, php’s cli also helps since you dont have to worry about execution times, memory limits and so on. Lets get started, I will try to keep the code compact – hope you get the idea. I also commented the code so that there should not be any questions. Feel free to ask, if something is not clear.

Simple Export

 <?php 
//product_export.php

require 'app/Mage.php';
Mage::app("default");

// load all products from the default store which are enabled and visible in the catalog view

$products = Mage::getModel("catalog/product")->getCollection();
$products->addAttributeToFilter('status', 1);//enabled
$products->addAttributeToFilter('visibility', 4);
$products->load();
// open the csv file and write the header in the first line
$fp = fopen('export.csv', 'w');
$csvHeader = array(
  'Sku',
  "Manufacturer",
  "Name",
  "Price",
  "Url",
  "Image"
);
fputcsv( $fp, $csvHeader, $delimiter = "|");
// iterate through all the products

foreach ( $products as $_product )
{
   // load a product object using its sku
   $sku = $_product->getData('sku');
   $product = $_product->load($sku);

   //check if the product is visible
   if ($product->getVisibility() == 4 )
   {
      $image = 'http://www.your-store-url.com/media/catalog/product'.$product->getImage();
      $product_row = array(
			$sku, 
			$product->getAttributeText('manufacturer'), 
			$product->getName(), 
			$_product->getFinalPrice(), 
			$product->getProductUrl(), 
			$image
      );
      fputcsv( $fp, $product_row, $delimiter = "|");
   }
}

?>

You can now run this code using the command line, make sure your directory is writable by the web server:

$ php product_export.php

You should now have a nice looking csv data feed of your products. However getting the configurable child products took me a while. It was especially difficult to retrieve the different variations along with its name and price, since Magento would just output the the values from the parent product. For the sake of simplicity, I will not post all the code. It should now be relatively easy to build a list of different product variations – I will leave this task up to you 🙂 .

foreach ( $products as $_product )
{
   // load a product object using its sku
   $sku = $_product->getData('sku');
   $product = $_product->load($sku);

   if ($product->isConfigurable())
   {
		$_attributes = $product->getTypeInstance(true)
			       ->getConfigurableAttributesAsArray($product);
	
		foreach($_attributes as $_attribute)
		{
			// you can now iterate through all the attributes
			
			// get the attribute label
			$attr_txt = $_attribute["store_label"];

			// get the attribute values
			foreach ($_attribute["values"] as $value)
			{
					// get the attribute value..
					// .. as for instance the color
					$value_label = $value["label"];

					// get the price for the option
					$option_price = $value["pricing_value"];
			}
		}
    }

}

Hope this helps, the problem with the configurable child products drove me crazy. I found this solution to be way easier than any of the export modules. You are also way more flexible in terms of how you can display your data. Cheers.