helloworlder

Regardless of what language your app is coded in there are some things that are common to pretty much all deployments. Deployment scripts such as capistrano and Ant are great but if you haven’t done a manual deployment before, jumping the gun to a full auto deploy can be pretty confusing. We’re not talking about opening up an FTP client and dragging your files onto the server, although there’s nothing to stop you from doing that. With simple static websites it’s OK, but doing that with any non-trivial web app this approach is very inefficient. The nightmarish file management practices alone is enough discouragement.

Imagine deploying a PHP/MySQL app onto a Linux Ubuntu VPS with SSH access and Apache running. These are the things I would do for a manual web deploy:

1. Set up an SVN repository on your web server. You cannot live without a version control system. If you’re progressive and using Git or Mercury, that’s great.

2. Commit your entire web app into the SVN repository - well actually you should be working and committing to a repo on day 1 of development. If you’re developing on Windows, TortoiseSVN is a good GUI client.

3. Most non-trivial web apps run a database. Assuming that you add data to the database during development, you need to keep the data “in sync” with the rest of your web app. It’s obvious yeah? - export the database into a file e.g. mydata.sql and commit it to the SVN repository with the rest of your web app, not placing it in a folder exposed to the public.

4. Log onto the server (using Putty if on Windows) via SSH, and navigate into the folder where your website is served. From there do an SVN checkout from your repository, which goes something like:

sudo svn co file:///home/helloworlder/repository/myproject trunk .

5. Create the database on your web server if you haven’t already. Or, if you already have the database with outdated data in it then drop it and create it again. Now, you just need to import the database (in our case a .sql file) that’s in your repository (step 3).

6. SVN metadata is served with the rest of the website, and you don’t want that. There are many ways to deal with this including using exports and not checkouts, but you can do this.

7. After doing all that many times over you might even start to get tired of it. Maybe write a script that does the svn checkout and database import in one fell swoop.

I posted this on Stack Overflow a while ago and it got some up votes so I’ll re-post it here. Here are the things I considered before choosing to use the Zend Framework:

1. Learning Objectives

I know with CakePHP you can get started quicker, but with a blackbox framework such as that I feel I’d be missing out on a lot of learning. If I used CakePHP I’d be missing out on learning about OO concepts and patterns because I just won’t get the chance to apply them. And, if I were to stop my freelancing work and look for a job I want to be able to tell me employer I really understand OO programming, as it’s in pretty high demand now. A common argument is to go for CakePHP if you’re new to programming, but I strongly disagree. When you’re new you want to understand the concepts behind all these things first, before you start using a framework that hides implementation details from you. And when things do break in a blackbox framework such as CakePHP you want to know exactly what’s going on in the background so you can fix it. It’s kind of like using Dreamweaver but not understanding HTML! You need to understand the architecture of CakePHP, and for that to happen you need to know the OO concepts, patterns and architecture behind it.

A bit of learning goes a long way. It might be harder in the beginning when you need to write more code by yourself, but in the long run it’s a lot more enjoyable to understand what is actually going on. There is dogma that says “Don’t write anything yourself that has been written before”. OK, I agree mostly, but if you have much to gain from writing something yourself, it’s better to do it. The things to gain may be having a more flexible framework at your disposable, and of course better understanding of what you’re doing.

2. Documentation and Support

What if the Framework developers decide in a flash of brilliance that no one needs documentation for version XXX of the framework and overwrite it with a new documentation version, but you are still using that old version? I’d say you’re screwed in a big way. The guys at ZF put all the doc versions at your disposal — http://framework.zend.com/docs/api and it’s something you’d just expect. I strongly believe that a framework is only as good as it’s documentation.

If you’re going to create a very long running project with lots of unknowns, I’d go with the Zend Framework. It’s got corporate backing and official training courses. CakePHP does have a great community, but there’s always more security with corporate backing. The fact that Zend is commercializing it’s products (the Zend Framework is open source), does not bother me in the least, and is more or less irrelevant. I couldn’t care less about ideologies on free software or whatever, I just want to get things done.

3. Flexibility

You never know what the client will ask for next (or what you yourself will need next). If he/she asks for some insane/strange feature from Mars that will break or stretch a framework beyond its capabilities, then you’re going to be in trouble. The Zend Framework is well known for being very flexible - you can pick the components you want to use and it doesn’t force an architectural doctrine on you. In some cases you could go for an existing CMS, but CMSs are only good for websites that fit a certain mold, beyond that they’re no good.

4. Project Hand-off to Other Developers

If it ever comes to this, you want to make sure the clients have access to a large number of developers who understand the framework you have used. I don’t know the numbers here so I can’t honestly say whether Zend or CakePHP has a larger developer base. My guess is Zend as it has a lot more financial backing than CakePHP and the organization has the ability to officially train developers who use it. Probably it’s easier to hire a Zend developer by asking for his/her certification.

5. Continual Development of the Framework

Is the framework continually developed and at what pace? Is the documentation able to keep up with the framework development? And, does the organization support older versions of the framework? What if the lead developer of a framework gets hit by a truck? What’s going to happen now? Is the organization that develops the framework as brilliant managerially as they are technically? I give Zend Framework the go here.

This has got to be the most annoying mobile phone problem I’ve encountered. It doesn’t show the numbers of missed calls. It used to. Now it doesn’t. What the hell?

But I’ve heard worse. I have a friend with a phone that has the buggiest software like alarms not going off at the set time (yes he was late to something when the alarm failed to go off in the morning), and contacts being randomly deleted without input from the user. Apparently that phone’s poor software has been over-compensated with the strongest physical armor to protect it from bangs and drops.

I dislike Apple’s hypocrisy when it comes to open standards and propriety software and hardware, especially it’s fiasco with Adobe recently regarding the Flash CS5 packager for iPhone, but maybe it’s time to get an iPhone … now just need some money :/

Why is this happening? Garbage collection is the culprit … again!

This StackOverflow page provides the solution.  The second answer - the one related to GC -  is the one that solved the problem for me, although you should check out the first one as well.

I’ve been working with Actionscript 3.0 for some months now, and I’ve tripped over more than once when it came to garbage collection and memory management in general. Be very careful about letting local variables go out of scope, because the garbage collector may (or may not!) come to remove that variable before it finishes doing its job. This also results in one of the most frustration types of bugs - the intermittent bug.

For example, I used AS3’s TransitionManager class which allows you to create animations through code easily. I created an instance of the TransitionManager within an onclick handler, and used it to do slide a MovieClip onto the screen. However, sometimes the animation would stop before reaching the end. It might have stopped halfway, a quarter of way … every time it was different, but most of the time the slide in would complete. The problem was that the instance of TransitionManager was going out of scope as it was created in a method (in this case an onclick handler to be exact). Much of the time the garbage collector did not destroy the instance of the TransitionManager before it finished doing its animation, but sometimes it did, thus causing the animation to stop.

What I did was to make the instance of TransitionManager into a class variable. There might be other ways to do this though … Anyway the next time you see an intermittent bug in your program, it can be due to any reason - but remember this

Flash already has an important role on the Internet when it comes to general interactive applications,  games and video.

Then there’s HTML5, which is supposedly going to replace many instances where Flash would otherwise be used. YouTube has been experimenting with using HTML5 instead of Flash. However, there is not yet any reason to believe that HTML5 and AJAX technologies will become a significant threat to Flash. The fact that HTML5 is an open standard doesn’t automatically put a halo on its head and a path to RIA domination, even though that may happen in the future.

Then there’s the ongoing Flash accessibility issue. Sure, Adobe has its fair share of problems and yes they still have, but they are concerned about accessibility and have been making improvements over time. For example, can screen readers read SWFs? Yes, they can. In fact, to provide accessibility developers can even provided built in readers and voice overs recorded by real people. Can users tab through components? Yes. The problem is becoming less of an issue of Flash itself than an issue of inaccessible design by developers. Remember, you can write inaccessible AJAX too.

The more relevant question regarding accessibility is now becoming  “Can Adobe provide developers with easier ways to implement accessibility?” instead of “Is Flash accessible?” Flash today isn’t the same as Flash 10 years ago, and I’ll bet you Flash in 10 years won’t be the same as Flash today.

Finally, while the Flash Platform is not open source, the SWF file format specification is open and free of charge to anyone. Yes, that includes you Apple!

I might be wrong, but I think Flash is not only here to stay, but we’ll see more diverse applications of it in the future. But I’m not betting on this one The thing is, don’t dismiss the technology.

http://www.adobe.com/accessibility/

Question:

Why do package names start with com. in Actionscript 3?

By the way, I’m guessing you already know that package names map to folder names. E.g. an as3 source file in the package com.example must be under the folder example, which in turn must be under the folder com..

Answer:

Package names do not have to begin with com. However, it is the convention to do so. E.g. com.thebestcompany.thebestproduct

What is the significance of com? Well, the package name is simply a domain name reversed. E.g com.helloworlder.utils

The domain name technically does not have to exist but you should own it. Obviously never use someone else’s domain name!! That’s just rude. It is standard practice to use a domain name because it helps to guarantee that your package names don’t collide with the names of someone else’s package on the other side of the world.

If I release some AS3 code that creates popup windows, I may place the code in a package called com.helloworlder.utils.popupwindow and not simply popupwindow

Likewise, if I download some third party code to use in my own project I’d expect their code to be packaged properly. E.g. com.goodbyeworld.utils.modalwindow. Then, I can just place their goodbyeworld folder under by own com folder.

Just as importantly, putting your as3 files into packages helps you think about how to organize the files. Often people place all files (their own and 3rd party code) under one folder! The advice is - don’t.

I’m developing a project on the Flash CS4 platform and finally started unit testing my AS3 code.  Not doing unit tests seems lazy and negligent. The only reliable unit testing framework I’ve found so far is asunit, which is open source. The Flash CS4 platform has been traditionally targeted at designers and not programmers so unit testing was somewhat neglected in the past.

Installation is very simple. Just unzip the archive and place the as3 folder anywhere on your system. Then in Flash CS4 go to Edit->Preferences and click on the button “Actionscript 3.0 Settings” at the bottom of the popup.  You need to add both of the following paths under “Source path”:

as3/src/

as3/test/

IMPORTANT: Don’t just add as3/ otherwise the framework files won’t be found.

That’s all for the installation. For usage, the asunit website has enough information to get you started.

If you’ve posted stories to Digg before then you’re familiar with the “Choose a Topic” form. This form allows you to select which category your Digg submission belong and then lets you submit the form, all without using radio buttons. This tutorial tells you how to achieve the same effect. But I warn you that this Javascript code will not be degradable. If it’s any consolation, if you disable JS on the Digg website their form will also not work. I’m not trying to encourage obtrusive Javascript, but this is a tutorial and not production code. If you want you can build on the code to make it non-obstrusive.

Digg’s Choose a Topic form

Our version of it (it’s better isn’t it?)

First, create a new HTML file with the following code, and call it anything you like:

<html>
<body>
<head>
<title> Digg Style Selectors </title>
<script language="JavaScript" type="text/javascript" src="digg_selector.js"></script>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>

<h1> Digg Style Selectors </h1>

<hr />

<form action="CHANGE_THIS.php" method="POST">

<div id="container">

<a href="javascript://" class="digg_style_link" id="1"> Link 1 </a>
<a href="javascript://" class="digg_style_link" id="2"> Link 2 </a>
<a href="javascript://" class="digg_style_link" id="3"> Link 3 </a>
<a href="javascript://" class="digg_style_link" id="4"> Link 4 </a>

</div>

<input type="hidden" name="hidden_data" id="hidden_data" value="nothing" />
<input type="submit" value="Submit" />

</form>

</body>
</html>

To note here is the inclusion of the “digg_selector.js” file which we will look at next. Also important is the hidden field with the id of “hidden_data”. Since what we’re doing is replacing the functionality of radio buttons with nicely styled links, we need another way to get the information submitted and we do that with the hidden field. That’s where the Javascript file comes in:

window.onload=function() {
    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a'); // get anchors
    for(var j=0;j<containerAnchors.length;j++)
    {
        containerAnchors[j].onclick = handleClick;
    }
};

function handleClick()
{
    document.getElementById('hidden_data').value = this.id;

    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a');

    // unhighlight all the links
    for(var j=0;j++;containerAnchors.length;j++)
    {
        containerAnchors[j].style.backgroundColor = "#eceff6";
        containerAnchors[j].style.color = "#3b5998";
    }

    // highlight the link that was just clicked
    this.style.backgroundColor = "#3b5998";
    this.style.color = "#ffffff";
}

This is simple - there are just 2 functions. Looking at the first one:

window.onload=function() {
    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a'); // get anchors
    for(var j=0;j<containerAnchors.length;j++)
    {
        containerAnchors[j].onclick = handleClick;
    }
};

When the page is loaded, we get all the anchors in the container div (these anchors are the digg style selectors/buttons or whatever you want to call them). Then, inside the for loop we attach an event handler to each anchor, which executes when the anchor is clicked. The event handler is a function called handleClick(), which we look at now:

function handleClick()
{
    document.getElementById('hidden_data').value = this.id;

    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a');

    // unhighlight all the links
    for(var j=0;j<containerAnchors.length;j++)
    {
        containerAnchors[j].style.backgroundColor = "#eceff6";
        containerAnchors[j].style.color = "#3b5998";
    }

    // highlight the link that was just clicked
    this.style.backgroundColor = "#3b5998";
    this.style.color = "#ffffff";
}

The line document.getElementById(’hidden_data’).value = this.id; gets a hold of the hidden field we talked about earlier, and dynamically sets its value to this.id . So what is this.id? Well, this refers to the anchor that gets clicked on. So this.id gets the id of the anchor. The hidden field is set, and when the form is submitted we can get the value of the hidden field in the $_POST['hidden_data'], assuming you’re using PHP.

Finally, here’s the CSS stylesheet, which needs to explanation:

body
{
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 15px;
}

a:link {color: #3b5998}
a:visited {color: #3b5998}
a:hover {color: #3b5998}
a:active {color: #3b5998}

h1 {
font-family: Georgia, serif;
font-style: italic;
font-size: 20px;
font-weight: bold;
}

hr {
color: #A8A8A8;
height: 1px;
}

#container {
margin:0;
margin-top: 20px;
margin-bottom: 20px;
}

.digg_style_link {
color: #3b5998;
padding: 3px;
margin: 3px;
margin-bottom: 20px;
background-color: #eceff6;
text-decoration: none;
border: 1px solid #d4dae8;
}

That’s pretty much all there is to it.

So, this is my 2nd Facebook book app and it’s an FBML app this time, not an iframe. You can find it at http://apps.facebook.com/makedebate . It’s called “Make Debate” and you can share your (passionate?) opinion on topics with friends and other Facebook users.

It’s more fun (and easier) to build a site using FBML rather than using an IFRAME app. You can just use FBML tags rather than lots of PHP API calls.