My Macbook Broke “sobs”

I have started doing development on my iPad which should be interesting.

The reasons is that my Macbook broke recently “sob” so I have been working on Windows again for a bit which is localbitcoins not too bad… But there are things that I miss like the Terminal and Alfred App. While I have found ways to make Windows work in a similar way it just isn’t the same.

The solution for me then is to move all of my development into the “cloud”. I say that in quotes because the cloud lives in my company’s data centre :D . So I have been using Vim (with a ton of cool plugins) and SSH for most of my development now. I read this blog post a while ago and wanted to try it out but I didn’t have an iPad then. Now I do so I am going to give it a bash (hehe, no pun intended).

I am currently using the zaTelnet app but I want to move to iSSH sometime soon. zaTelnet is not too bad but it is a bit like Putty which I find a bit basic, also it does not support VNC or X Server.

The server is running Ubuntu Server 12.04 on Citrix Xenserver. Then it just has the standard LAMP stack as well as Xdebug for PHP and Drupal development. I am using Vim for writing code with the NERDTree plugin which is a file manager sidebar toggle allowing you to open multiple file in Vim without needing to know all of the file paths.

I am also running Tmux which allows you to have binance multiple window sessions inside your terminal and you can also save those sessions and come back to them whenever you feel like it

I will be blogging about how I find working on the iPad in a series of blog posts :) so look out for that. Also if you would like me to post my Vim configs and plugins and any other configuration files let me know in the comments or send me an email.

CSS Floats Explained

CSS floats are quite well covered all over the place, but finding all the information in one place can sometimes be tricky. It took me quite a while to bittrex understand how floats work when I started out. And once I started using them that opened a whole new can of worms. In this post I am going to show you how I use floats everywhere. It seems to work quite well :) .

Lets start out with some simple HTML. You want to position two divs next to each other.

<div class="main_content">
  <h2>Hello</h2>
  <p>Welcome to my website</p>
  <img src="/img/me.jpg" alt="A picture of me" />
</div>

<div class="sidebar">
  <ul class="main_menu">
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

Ok, we have a very simple HTML snippet. We have two container divs that hold the main content and the sidebar. The main content contains a title, paragraph and an image the sidebar contains the main menu.

To float them together you would create some CSS like this:

.main_content,
.sidebar {
  float: left;
}

.main_content {
  width: 600px
}

.sidebar {
  width: 200px;
}

That isn’t very complicated either. If you ran that code you would see the two divs floated nicely next to each other. But what happens if you want to wrap our current code in another div with a background colour?

<div id="container">
  <div class="main_content">
    ...
  </div>

  <div class="sidebar">
    ...
  </div>
</div>
#container {
  width: 800px;
  padding: 20px;
  background: #333;
}
  ...

That’s cool, the only trouble is that your container is not going to wrap around the the two floated divs, so it will just be a red stripe at the top. Why does this happen? Because the divs are floating. Don’t worry there are ways to fix this. I am going to show you two:

#container {
  width: 800px;
  padding: 20px;
  background: #333;
  overflow: hidden;
}

Setting the overflow to hidden with will make the container div wrap around the floating divs. I have no idea why it does this, but it works :D . The other way is to create a CSS clear class.

.clear {
  height: 0;
  clear: both;
  overflow: hidden;
}

You can then use it like this:

<div id="container">
  <div class="main_content">
    ...
  </div>

  <div class="sidebar">
    ...
  </div>
  <div class="clear"></div>
</div>

Leaving empty divs lying around is neither pretty nor possible sometimes. If you are using a content manage like Drupal or WordPress they put together HTML for you and sometimes it is not possible to alter that.

I like using the first way, where you just set the overflow on the container to hidden, that works for probably 90% of all floating. For the other 10% create a clear class and use that.

The Awesomeness of PHP __autoload

Many of you have probably written or at least tried to write a PHP framework at some point during your career. The best way to write a frameworks, in my very humble opinion, is to use object oriented programming (OOP) and a sort of model/view/controller (MVC) architecture. In most cases this means that by the end of writing a sort of usable system you will have a large amount of files filled with different bits of code.

In the bad old days before PHP 5 you would have an index.php file and that looked something like this:

<?php
/**
 * Index file of Xframework.
 */

// Include all sorts of useful stuff...
include_once '/bootstrap.html';
include_once '/app/model/x.class.html';
include_once '/app/model/theme.class.html';
include_once '/app/controller/user.class.html';
include_once '/app/view/index.html';

// Now we can finally do something.
$x = new x();
$x->run();

Wouldn’t it be really nice if we could just write the code without having to worry about including millions of files everywhere, which can become a pain in terms of maintainability.

Enter __autoload() in PHP5. YAY! All our troubles magically disappear. Well not really, but your life is made slightly easier. So instead of the above, you now have:

<?php
/**
 * Improved index file of Xframework.
 */

// Our pretty __autoload() function.
function __autoload($classname) {
  include_once '/app/classes/'. $classname .'/.html';
}

// Run the framework.
$x = new x_controller();
$x->run();

Using __autoload should theoretically also improve the speed at which your app loads because you only load the files that are needed at the time.

You could also do some really complex configurations like the below for example:

<?php
/**
 * A more complex __autoload example for Xframework.
 */

// Autoload some classes.
function __autoload($classname) {
  $class = explode('_'. $classname);

  $class_file = $class[0] .'/.html';
  $class_type = $class[1];

  // Include the class.
  include_once '/app/'. $class_type .'/index.html'. #class_file;
}

// Let's run the app.
$x = new x_controller();
$x->run();

In the example above the autoload function is checking the class name for a type. The type could be, for example, model, view, controller, elephant or whatever you wanted it to be. That type is the directory where the class is stored. In the example we called the x_controller class. So that class would be located at /app/controller/x.php, the same would be true if you wanted it to be x_model or x_view.

This most definitely makes my life easier when I write PHP applications. If you spend a lot of time writing PHP applications and don’t use a specific framework for the job I would suggest that you put together a rough toolkit for yourself using __autoload() as the heart.

SQLite3 + Dropbox == Awesome

Dropbox is one of the coolest apps I have ever used and everyone knows how to use it. I can tell my clients to Dropbox me files and they don’t roll their eyes. Finally something useful out there. No, this isn’t an advert for Dropbox I will explain my excitement in a minute.

I wrote a PHP/MySQL contact manager for a client a little while ago, it was the successor to an Excel VBA app that succeeded a Psion Series 3 from 1993. So the client was very happy with the system everything working perfectly. But then he wants to be able to access his database of contacts from other computers as well (work / home / etc…). Initially I was going to build an addon that allowed him to export a file and import it on the other end. But I didn’t really like that idea because it relies too much on the client to get it right, which is not a good thing at all. (Think late night phone calls and weekends filled with a moaning client)

It took a while to realise that perhaps Dropbox could do exactly what I wanted, the thing that held me up was MySQL. Enter SQLite3. I have know about SQLite3 for a while now but I have never used it much. I knew it was a portable database that lived in a single file but have never had a use for it. Until now.

PHP also makes it really simple to convert from a MySQL database to a SQLite3 database, thought I did spend a lot of time fiddling with export tools. I ended up porting the table structure and then writing a simple MySQL query that pushed all the data into the SQLite3 database. It took me around two hours to convert the contact manager from MySQL to SQLite3 which is not bad. All the queries work without needing to change, basically you just change any mysql_* function to sqlite_* and hey presto you’re done :) .

And for the cherry on top I use Dropbox to store the SQLite3 database and then reference it from the PHP application running in XAMPP on his local machines. Then whenever he updates his database on one computer it updates them all. Also with Dropbox he can work offline as well and then sync when he connects.

Of course I know this is not the elixir to everything but for something simple like this where there is one guy using an app on several computers it is perfect.

I think maybe for my next project I will start working on building a Dropbox clone to use in my own office, maybe with a few extra features more useful to developers. Haha, no… but then again…

When designing for the web, is the customer always right?

When I began thinking about this friction between clients and designers I tried to find a real life example to best describe how the relationship should work.

First I thought that it was rather like a person who wants to build a house. A person who wants to build a house looks for an architect, but they usually start out with a fairly good idea of what they want. They can show the architect rough sketches, magazine clippings and whatnot. So essentially the architect is just there to give advice, draw the plans and make sure that the house looks like the owners want it.

This works great except that a personal house only needs to fit the need of one person (maybe more if the client has a family but we will assume that they all were part of the planning). So for example if the client is short they may want to have kitchen cupboards that are quite low or floor level, this will be inconvenient for a taller person.

This scenario does not really fit the web because the web is not like a home, rather it is like a public building – a library or museum for example. The web cannot by its nature fit one person, neither can it fit everyone so a compromise needs to be arrived at. This compromise is, by using gathered knowledge, fit the largest group of people possible.

the web is not like a home, rather it is like a public building – a library or museum for example

With this in mind lets explore the process for designing a public building. A public building needs to be designed with the public in mind, this is the huge difference between designing a home. Yes the designs are begun in much the same way, a client with an idea finds a n architect. But in this case the client is usually a government or large company. They would probably start by getting a team of consultants together, these would be architects, designers and other people like that with experience in designing public buildings.

The client will then move to the background white the team puts together a design and then gets feedback from the people that are going to be affected by the building. Once all the required feedback has been gathered the team will then use it to make changes to their initial design. Once they are happy with what they have put together they will go back to their client, discuss it, maybe make one or two minor changes and then get on with the next stage.

The way a web design comes together follows the second scenario I proposed much closer than the first. Let me explain. The client starts out with an idea, they may go to a design company with some preconceived ideas but in most cases they just present their idea. The design company will then mull over the idea and try to build a design around it. This is done by using expertise from prior projects as well as doing usability studies and maybe a few other things as well. The usability testing involves the public in the design process by letting them show the design team how their design works in practice, the public can then also give their opinions. When all the tests and procedures have been completed the web design company will have a design that is both functional and one that works for the biggest possible amount of visitors.

Once the company is happy with what they have put together they will take it to their client and they will then make slight changes here and there. Once everyone is happy then they can procede to the next stage.

Conclusion

In conclusion I think that there are a lot of parallels that can be drawn from the second scenario. First, the client takes a less important role in the design because he trusts the team he has employed that they will give him the results he asked for. Second, the public is involved in the design process in a controlled way that allows them to influence the design but not derail the process with nonsense.

The biggest problem here is trust, clients need to trust that the team they have employed will do the job properly. What we do at Amoebasys is use Redmine (http://redmine.org), which is an online job tracking system, so that the client can see exactly what is going on. They can follow as each job task is signed off and this makes them happy.

Woolworths Constantia

I am impressed. I think that is most probably the only way to describe how I feel. While shopping at Woolworths in Constantia Village on Friday I noticed that the trolley’s baby seat was broken on one side. One of the staff noticed me fiddling with it and immediately rushed over to offer a new trolley. Though since the only thing it was carrying at the time was my laptop bag it wasn’t necessary.

I have never seen service like that before so as I have said before I am very impressed. Well done Woolworths :) .

Add new files to SVN

This is a fairly common issue and one that I have run into on more than a couple of occasions. How do you add new files to an SVN project without running the add command for every file/directory?

You use this clever one line script that I found at Snipplr:

svn status | grep "^\?" | awk '{print $2}' | xargs svn add

And as long as your file names don’t have spaces in them the script will add them recursively to your SVN project. By the way if you have spaces in your file names then you are being silly. :P

PHP SSH2 on Fedora Core the easy way

Installing the PHP SSH2 extension on Fedora is a pain in the backside unless you know how. There are countless examples for Ubuntu but everyone seems to leave the Red Hat family in the dark.

Here is the easy way to do it:

[theamoeba@amoeba2]# yum install php-pecl-ssh2
[theamoeba@amoeba2]# service httpd restart