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 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 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 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="/category/programming/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 '/category/programming/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 .'/category/programming/.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] .'/category/programming/.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…

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

Fun with Flowplayer & jQuery

Recently at Amoebasys we worked with Media Machine to create a jQuery slider that integrated a Flash movie. Where the movie had to control the slider. This means that when the movie was playing it had to stop the auto sliding and start the slider again as soon as the video stopped.

Basically this is not as simple as it sounds. First we started by hunting around for an HTML5 solution that might be able to work, but we found that to be a wishy-washy solution that did not really work at best. The next route that we took was to manipulate Flowplayer that has an awesome javascript API and plays nicely with jQuery.

The final solution is Flowplayer together with a really simple jQuery slider developed by CSS-Tricks called AnythingSlider. But getting to that took some interesting gymnastics and a couple of sliders later.

The problem with most of the really simple sliders is that it is very complicated to stop their auto sliding from outside and they also have really crappy functions, mostly everything is piled into one or two functions with a couple of useless options.

What I like about AnythingSlider is that is has all sorts of functions for playing/stopping, jumping between slides etc with functions that you can call with simple click functions. This makes some real sense in terms of building extensions onto it.

Even though AnythingSlider has this awesome API we still had to add some clever bits and pieces to it in order to allow Flowplayer to control the way it worked.

So as I said the final solution is a simple integration of Flowplayer and AnythingSlider with a couple of modifications to the AnythingSlider code. This allows us to play movies inline in the slider while still keeping full control of what the slider can do or not with Flowplayer.

I will write some more about it later when the client goes live.

Moodle / Drupal Single Sign On

It has been a while… I am apparently not dead yet, just terribly busy. The latest project I did with Amoebasys and Perceptum Though Squad was to create a way for Moodle users to automatically login to a Drupal site.

Simple huh? Erm… no ;)

Since both Drupal and Moodle would be using the same database and would also be sitting on subdomain there were not too many complexities in that department. The problem was getting Moodle to create a cookie and then force Drupal to use it. Ideally I would like to have used oAuth or something nicer (I use this in the vaguest sense of the word), but there was no time to create clever solutions.

Basically the solution looks something like this:

  • Clever Drupal module that creates an API callback to sync Moodle Users into the Drupal database. An admin chooses which role you want to sync users from and which role you want to sync the user to.
  • A tiny little Moodle hack that creates and deletes a cookie that will tell Drupal which user to login and also to log a user out when the cookie is not available anymore. This is also only for that specific role that you select to sync to.
  • Then lastly there is a small Drupal hack that checks for the cookie and either logs a user in or logs a user out, depending on the content of the cookie.

Let me just say that I really REALLY hate writing hacks. They disagree with me completely down to my core ;) but in this case I did not have the luxury of time to screw around trying to create a module that could do this. Perhaps the client will be happy to allow future development around the system. I would then definitely look at doing a more elegant solution with perhaps as I have said before, oAuth or LDAP at the very least.

At the moment the module is working well and there don’t appear to be any glaring bugs that we have been able to identify. So even though this is not an optimal solution I am very happy with it so far.

I will most likely write a more technical post at a later stage, but I am not 100% sure on the secrecy policy on the code :P