For more information see: livereload.com

Use a default folder structure

Whenever I start a project, I always start by creating a new folder in my projects folder. The contents of this folder looks like this:

I prefix the folders with a number so they are ordered in a reasonable fashion. I only use the ’06_dropbox’ folder if I work with someone else, so that one is not always required..

Use revision control software

This one is kind of obvious, but I put it in this list because I talked to a developer last week who still was working without any revision control software. So I really encourage you to use SVN or Git. Personally I prefer Git because it’s much more portable and you don’t need to have a server to save your revisions.

Automate the boring stuff

Another thing I learned is that clients like to see the current progress of the project and because they aren’t always around to look on your screen (which is a good thing) I upload my progress to my staging server. If you use a regular FTP program this could take a few minutes. First you open FTP, login to your server, find the right folder and upload. This manual uploading has two problems. The first is that it’s really slow. The second; you can make a lot of mistakes. Those two reasons made me choose for automation. So you probably wonder how you automate uploading a bunch of files?

The easiest way is use Automator (which ships with every Mac), and create a workflow which resembles this:

Alternatively you could do it the way I do it, this is slightly more dificult and requires a server with SSH access. The majority of shared hosting providers don’t provide you this kind of access unfortunately. If you have access, you could use this code sniplet to upload your project using RSync. This method is much faster because it does a comparison on byte level before starting the upload.

1
2
3
4
5

URL="http://clients.base42.nl/projectname/"
rsync --recursive --checksum --progress --compress --update --delete  folder-to-upload/ base42.nl:/home/jankeesvw/upload-to-this-folder/
echo $URL | pbcopy
echo "Upload to staging complete, link copied to clipboard: $URL"
/Users/jankees/bin/binaries/growlnotify -m "Upload complete, link copied to clipboard: $URL"

This defines a variable (line 1) then uploads it to my sever (line 2) copies the link to my clipboard (line 3) outputs a text to the console and to growl so I notice it’s done (line 4 and 5)

Use (and update) frameworks

When I work on projects I rely on open source projects; this is what I am currently using:

• Flash: Robotlegs, Navigator-AS3, LogMeister, MinimalComps, Tweenlite and Signals-as3
• HTML: Boilerplate, Blueprint, Compass and JQuery
• PHP: CakePHP

Another part of using frameworks is updating them, this can be a hard thing because it involves a lot of steps. That’s why I created an automation for this too! I put the shell script in a gist on github so you can see how it works. (Patrick Brouwer helped me building this). With my update script it’s really easy to update the external frameworks and I do this every few days when I work on a project.

Prepare a project to run in different environments

The last but not least is to prepare your projects to be ran in different environments. What this means is to be sure that your application is aware of it’s current location. To give an example. My flash project knows if it’s on the real server or on my local machine. If it’s on my local machine it generates some test data and shows some debug information. This does not mean I set something manualy everytime I publish to the server. This is some code that is smart enough to detect it’s current state. This is a glimp of what I use in Flash:

var browserpath : String = stage.loaderInfo.loaderURL;
var isLive : Boolean = true;
 
var localPaths : Array = [new RegExp("file://", ""), new RegExp("/localhost/", ""), new RegExp(".local/", "")];
for each (var regexp : RegExp in localPaths) {
    if (browserpath.match(regexp)) {
      isLive = false;
   }
}
 
if(isLive){
   trace("You are on a server!")
}else{
   trace("Hi developer")
}

I hope this helps to optimize your workflow. If you have other suggestions please let me know!

So what is a scrumboard? A scrumboard is basically a todolist with three columns, todo, in progress and done. I really like this approach when it comes to keeping track of todos.

There is nothing wrong with keeping this analog feel with post-it’s. However this analog approach has it’s downsides.

The problem with this analog version came up when I wanted to work from home, because I couldn’t see or move items on the todolist. So I thought to myself why not make this into a simple webapp so everybody can use this from where ever they are at that moment. So that’s when I started ‘todomeister’.

After a few days there was a first prototype I could use for my own projects and in the following weeks this first prototype evolved while I continued to work on it. And I can safely say it’s stable and usable for other people at this moment (I even passed the 1.0 version number).

I want to keep Todomeister really simple, just like the analog version. So no user management system or project management system. Just pick a project name and go, create a digital scrumboard in a split second!

Here are some photos of Todomeister running on my iPad.

If you want to try it for yourself go to http://todo.base42.nl.

There is also the possibility to install it on your own server if you would like some more privacy  *although I got password protection for a todolist*

Some of the features are

• Draggable todo’s
• Color coding
• Project archive
• Password protection
• iPad compatible
• NO user managment
• NO project managment

I hope you guys can give it a test drive, and please provide feedback in the comments so I can continue to improve it.

I want to give some additional credit to Jeroen Braspenning from EDHV for upgrading my original design! And to Bernard Visser for hosting the site!

*last note, it’s on github as well*

When I started to dig into this problem, @cottow pointed me in the right direction. When I opened the Console.app I saw lot’s of errors:

Then I found out that there were some applications I removed a long time ago still polling in the background. You can fix this by removing the .plist files in:

• /Library/LaunchAgents
• /Users/Youruser/Library/LaunchAgents

I think it’s good for everyone to take a look at these folders, because there is a big chance you will have some agents there as well.

My laptop got a whole lot faster since I fixed this!

To give a quick summary, since a few months I work for the Adobe User Group Netherlands. And together with my partner in crime Niels de Keizer I am building a mobile website for the Adobe User Group XL event. This website will be the guide for all visitors of the event, and contains a map, the program, and a description of all speakers. We decided to make this mobile website in WordPress because it fits to our needs and it’s an efficient way to build something like this.

We created some custom post types, which is a commonly used feature since WordPress 2.9. With this feature you can easily create custom types of content for your website. This is the menu we build in the WordPress admin for the AUGXL website:

The code you need to build the sponsors item is below:

register_post_type( 'sponsors',
	array(
		'labels' => array(
			'name' => __( 'Sponsors' ),
			'singular_name' => __( 'Sponsors' ),
			'add_new' => __( 'Add sponsor' ),
			'add_new_item' => __( 'Add new sponsor' ),
			'edit' => __( 'Edit' ),
			'edit_item' => __( 'Edit sponsor' ),
			'new_item' => __( 'New Sponsor' ),
			'view' => __( 'View sponsors' ),
			'view_item' => __( 'View sponsor' ),
			'search_items' => __( 'Search for sponsor' ),
			'not_found' => __( 'Sponsor not found' ),
			'not_found_in_trash' => __( 'No sponsors in trash' ),
			'parent' => __( 'Parent' ),
			),
		'public' => true,
		'show_ui' => true,
		'_builtin' => false,
		'capability_type' => 'post',
		'hierarchical' => false,
		'supports' => array('title', 'editor','thumbnail','revisions','custom-fields','post-thumbnails')
		)
);

When you create a sponsor it gets a custom link like www.website.com/sponsors/sponsor-xyz and WordPress loads this from the single-sponsor.php template page.

That’s awesome, but there comes the problem, you also need a list of all sponsors. By default this is all done in the index.php and if you have a lot of custom post types your index.php gets really messy!

The best thing to do would be to redirect www.website.com/sponsors to sponsors.php. This is not possible by default. However this will be in the next major version of WordPress! For now you need this plugin by Rolands Atvars. If you use this plugin you create a list of custom post type items (a custom post type archive) in separate php files. Awesome!

The plugin looks like this:

This is a preview of the mobile website we are building:

After some testing and thinking I came up with the following format to save the coordinates as a single string.

For a line:

{line}::{51.46501341580547:5.792863368988037},{51.4642714876185:5.794955492019653},{51.46358302094324:5.794869661331177},{51.46343596846251:5.793324708938599}

Points:

{point}::{51.46501341580547:5.792863368988037},{51.4642714876185:5.794955492019653},{51.46358302094324:5.794869661331177},{51.46343596846251:5.793324708938599}

Shape:

{fill}::{51.46501341580547:5.792863368988037},{51.4642714876185:5.794955492019653},{51.46358302094324:5.794869661331177},{51.46343596846251:5.793324708938599}

After I came up with this format I needed an easy way to let users insert these coordinates in my database. I wanted to make something that had the least impact, so I didn’t need to rewrite the whole CMS that I allready had written. Therefore I created a small Flash widget that easily could be hooked into the CMS. I did a little jQuery magic to make this possible. First I load the regular edit page. When the page is done loading I let jQuery look for a textfield called ‘treeCoordinates’. When jQuery finds the textfield it hides it and places my Flash widget below it. In this way the user only sees the Flash widget and not the data it outputs. The Flash widget writes all it’s data directly in the invisible textfield. The nice thing about this is the CMS doensn’t care that the textfield is actually filled by a Flash widget instead of a user.

This is what the editor looks like with a visible textfield:

Another vital part of my little coordinate system is my AS3 parser. The parser reads the string from the database and converts in to Google maps LatLng objects. I want to share the parser with you so you can use this in your own Google Maps project. The parser can be found on GitHub: http://gist.github.com/458361

If you want to see the complete project please see this video from my portfolio:

If you have any comments or questions, please leave a comment.

Let me know if you are interested…

The code can be found on the post detail page.

#!/bin/sh
 
# ------------------------------
# -  FDT stub project creator  - 
# -  Jankees van Woezik, 2010  -
# -   http://blog.base42.nl    -
# -      januari 11, 2010      -
# ------------------------------
 
if [ $# -ne 1 ]
then
	echo ""
	echo "Problem, missing path"
	echo "Usage: ./create_project.sh <path> "
	echo ""
else
	echo ""
	echo "What's the name of the project:"
	read project_name
	echo ""	
	echo "creating folder: $1"
 
	#####
	# Create project folder
	#####
 
	mkdir $1	
 
	#####
	# Create AS3_ClassPath
	#####
 
	echo "creating file: $1/.as3_classpath"
 
	echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>
<AS3Classpath>
    <AS3Classpath generateProblems=\"false\" type=\"lib\" useAsSharedCode=\"false\">playerglobal.swc</AS3Classpath>
    <AS3Classpath generateProblems=\"false\" type=\"lib\" useAsSharedCode=\"false\">flex.swc</AS3Classpath>
    <AS3Classpath generateProblems=\"false\" type=\"lib\" useAsSharedCode=\"false\">framework.swc</AS3Classpath>
    <AS3Classpath generateProblems=\"false\" type=\"lib\" useAsSharedCode=\"false\">rpc.swc</AS3Classpath>
    <AS3Classpath generateProblems=\"false\" type=\"lib\" useAsSharedCode=\"false\">utilities.swc</AS3Classpath>
    <AS3Classpath generateProblems=\"true\" type=\"source\" useAsSharedCode=\"false\">source</AS3Classpath>
    <AS3Classpath generateProblems=\"false\" type=\"source\" useAsSharedCode=\"false\">inlet42</AS3Classpath>
</AS3Classpath>" > $1/.as3_classpath
 
	#####
	# Create .project
	#####
 
	echo "creating file: $1/.project"
 
	echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<projectDescription>
	<name>$project_name</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
		<buildCommand>
			<name>com.powerflasher.fdt.core.FlashBuilder</name>
			<arguments>
			</arguments>
		</buildCommand>
	</buildSpec>
	<natures>
		<nature>com.powerflasher.fdt.core.FlashNature</nature>
	</natures>
	<linkedResources>
		<link>
			<name>flex.swc</name>
			<type>1</type>
			<locationURI>Flex_3_SDK_0/frameworks/libs/flex.swc</locationURI>
		</link>
		<link>
			<name>framework.swc</name>
			<type>1</type>
			<locationURI>Flex_3_SDK_0/frameworks/libs/framework.swc</locationURI>
		</link>
		<link>
			<name>playerglobal.swc</name>
			<type>1</type>
			<locationURI>Flex_3_SDK_0/frameworks/libs/player/9/playerglobal.swc</locationURI>
		</link>
		<link>
			<name>rpc.swc</name>
			<type>1</type>
			<locationURI>Flex_3_SDK_0/frameworks/libs/rpc.swc</locationURI>
		</link>
		<link>
			<name>utilities.swc</name>
			<type>1</type>
			<locationURI>Flex_3_SDK_0/frameworks/libs/utilities.swc</locationURI>
		</link>
	</linkedResources>
</projectDescription>" > $1/.project
 
	#####
	# Create .settings folder
	#####
 
	echo "creating folder: $1/.settings"
 
	mkdir $1/.settings
 
	#####
	# Create settings files
	#####
 
	echo "creating file: $1/.settings/com.powerflasher.fdt.core.prefs"
 
	echo "#Sun Jan 10 22:13:28 CET 2010
com.powerflasher.fdt.core.Language=AS3
com.powerflasher.fdt.core.LanguageType=Flex_3_SDK_0
eclipse.preferences.version=1" > $1/.settings/com.powerflasher.fdt.core.prefs
 
	echo "creating file: $1/.settings/org.eclipse.core.resources.prefs"
 
	echo "#Sun Jan 10 22:13:28 CET 2010
eclipse.preferences.version=1
encoding/<project>=UTF-8" > $1/.settings/org.eclipse.core.resources.prefs
 
	#####
	# Create source folder
	#####
 
	echo "creating folder: $1/source"	
 
	mkdir $1/source
 
	#####
	# Create Main.as
	#####
 
	echo "creating file: $1/source/Main.as"
 
	echo "package {
	import flash.display.Sprite;
 
	/**
	 *	@author Jankees.van.Woezik [jankees at base42 dot nl] 
	 */
	public class Main extends Sprite {
 
		public function Main() {
		}
	}
}" > $1/source/Main.as
 
	#####
	# Create builders folder
	#####
 
	echo "creating folder: $1/builders"
 
	mkdir $1/builders
 
	#####
	# Create builder for Main.as
	#####
 
	echo "creating file: $1/builders/Main.launch"
 
	echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>
<launchConfiguration type=\"com.powerflasher.fdt.ui.MxmlcGroup\">
<stringAttribute key=\"APP_ARGUMENTS\" value=\"\"/>
<stringAttribute key=\"ARGUMENTS\" value=\"-default-size 800 600 -default-frame-rate 31 -default-background-color 0xFFFFFF -library-path {flexSDK}/frameworks/locale/en_US\"/>
<stringAttribute key=\"FLEX_SDK_NAME\" value=\"Flex_3_SDK_0\"/>
<booleanAttribute key=\"KILL_PREVIUOS_VIEWER\" value=\"false\"/>
<stringAttribute key=\"MAIN_CLASS\" value=\"source/Main.as\"/>
<stringAttribute key=\"OUTPUT\" value=\"bin/main.swf\"/>
<booleanAttribute key=\"PASS_CP\" value=\"true\"/>
<booleanAttribute key=\"PASS_MAIN_CLASS\" value=\"true\"/>
<booleanAttribute key=\"PASS_SWCS\" value=\"true\"/>
<intAttribute key=\"PLAYER_HEIGHT\" value=\"600\"/>
<intAttribute key=\"PLAYER_WIDTH\" value=\"800\"/>
<stringAttribute key=\"POST_COMPILE_ANT\" value=\"\"/>
<stringAttribute key=\"PRE_COMPILE_ANT\" value=\"\"/>
<stringAttribute key=\"PROJECT_NAME\" value=\"$project_name\"/>
<stringAttribute key=\"PUBLISHER_ID\" value=\"\"/>
<booleanAttribute key=\"START_SWF_ENABLED\" value=\"true\"/>
<stringAttribute key=\"START_SWF_LOCATION\" value=\"bin/main.swf\"/>
<stringAttribute key=\"START_SWF_WITH\" value=\"External SWF Viewer\"/>
<booleanAttribute key=\"USE_GLOBAL_FCSH_LOCATION\" value=\"true\"/>
<listAttribute key=\"org.eclipse.debug.core.MAPPED_RESOURCE_PATHS\">
<listEntry value=\"/$project_name\"/>
</listAttribute>
<listAttribute key=\"org.eclipse.debug.core.MAPPED_RESOURCE_TYPES\">
<listEntry value=\"4\"/>
</listAttribute>
<listAttribute key=\"org.eclipse.debug.ui.favoriteGroups\">
<listEntry value=\"org.eclipse.debug.ui.launchGroup.debug\"/>
<listEntry value=\"org.eclipse.debug.ui.launchGroup.run\"/>
</listAttribute>
<stringAttribute key=\"process_factory_id\" value=\"com.powerflasher.fdt.ui.launch.fcsh.ProcessFactory\"/>
</launchConfiguration>" > $1/builders/Main.launch
 
	echo ""
	echo "All done, the project is created and ready to be imported in FDT"
	echo ""
 
fi

All the files I used in the video can be downloaded here:

In my last three projects I have been using the same ANT file and I think it is pretty useful for other Flash developers too. That’s why I want to share it with you.

My ANT file has four targets (functions).

1. Debug in Firefox
2. Create deployable swf
3. Deploy to FTP server
4. Clean debug in Firefox

The most important target is the first one, that’s the target I use the most. It compiles the actionscript into a SWF and then gives Firefox focus. If you want to know how this works see epologee.com/blog. I know a lot of people use the external player in FDT, I switched to Firefox because it is much faster and as a bonus you can use SWFAdress and other HTML stuff. In my opinion it’s much better to test from within the browser because it it behaves a bit different then external player in some occasions.

The second target (Create deployable SWF) creates a SWF which is smaller that the debug version; this is because I excluded the ‘verbose stacktraces’ on a large project this somethings takes 200kb of a SWF file.

Another thing I added to my ANT task is a conditional compilation arguments to the compiler. With these arguments it’s really easy to create a code block which only works for deployment, or a piece of code which only works for testing.

The code to do this looks like this:

CONFIG::Debug
{
	// code for debugging
}
 
CONFIG::Release
{
	// code for release version
}

Another interesting thing I added was FTP, the only problem is it isn’t supported by FDT by default. You need to install a external script (pretty easy). All about FTP and ANT is on the blog of Erik van Nieuwburg.

Every time you compile using my script ANT creates a build.txt with some information about the build (deploment or development, time of compilation, filesize, user, etc) I store this information in Subversion to keep track of all the builds. I copy this to a folder on the webserver too. In another project I used a modified version of this code to update a Version.as file before compiling….

Video

I created a video of my workflow to show you how it works.

If you have any feedback or suggestions please let me know. I created a zip file with all the files used in the video;