Write CSS with HSS and Haxe on OSX

I’m playing around with Haxe for a while now. My recent experiments are with Neko and PHP.

It’s a little flatfile CMS/website that lets you write Markdown (I’m using mdown from Jason O’Neil) for posts.
For styling (css) I’m using Twitter Bootstrap and for the animations the jQuery wrapper (jQueryExternForHaxe) from Andi Li.
This all is not important for the post, I was just showing off… πŸ˜› …. or showing what you can controle in one project using Haxe (jQuery, php, neko, js and now CSS)!

Using Twitter bootstrap for styling is very quick and nice. But when you want to modify that you will need to write css.
Not a problem, but what if you want to do it the awesome way?

Meet HSS

From the creator of Haxe (Nicolas Cannasse) comes HSS!

HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks. HSS is a CSS compiler which supports valid CSS syntax, so for every error that occurs during the parsing of the HSS file, it will display and error indicating at which file and which line the error occurred.

Sounds great and it’s written by someone who knows what he is doing, so lets give that a try.
And there comes trouble…

Remember this: I work on Mac OS X 10.6.8.

hss example code

Five steps to get started with HSS on OSX

#1
Download the file: HSS OSX version
The normal way of downloading (just click on the link) for some reason didn’t work for me. I had to download it with right-mouseclick and “Save link as…” (Google Chrome).

#2
Extract the file: the file you downloaded is a “gzip” compression file.
The normale decompression program on OSX don’t work with that (Archive Utility), my default decompression program didn’t work either (The Unarchiver).
Stuffit expander works!

And this is important! The other programs seem to work because there is a file created but its not a “exec”. Stuffit expander creates a file name “hss” other programs create a file named “hss-1.3-osx”

There is probably a terminal version to extract (here) but I stopped trying when I had the file.

#3
Where to leave the HSS executable?
I had a little help with that: (Source) for Linux AND OSX you can place it in the “usr/bin/” directory.
That is a hidden folder normally so you need to change that (but I hope you already did that) (read this post about it)
BTW “Users” is not the same as “usr”
When you drop the HSS executable in the bin folder you will be asked for you password

#4
I’m not 100% sure, but when I think about it while I write this I don’t think that you have to do this.
But just in case I’m wrong….
You need to give the file permission to execute (this is still true if you don’t copy the file in the usr/bin folder).
Open the terminal and type “chmod +x ” (without the quotes and don’t forget the space after x) and drag the HSS file in the terminal.
Press enter and you are done.

Create CSS with HXML

Now we can start with the cool stuff. Lets create an hss file:
(the examples are from Nicolas Cannasse himself)

// Property Variables
var mycolor = #1111AA;
var myfont = "Trebuchet MS", Arial, sans-serif;
body {
    color : $mycolor;
    font : $myfont;
}
// Block Variables
var nomargin = { margin : 0px; padding : 0px; }
pre {
    $nomargin;
    color : #FF0000;
}
// nested blocks
.faq {
	color : #BC683C;
	.form {
		width : 100px;
		textarea {
			width : 100%;
			height : 80px;
		}
		.name {
			font-weight : bold;
		}
	}
	ul {
		margin-left : 20px;
		margin-bottom : 20px;
	}
}
It’s probably useful to mention that ANY CSS file is an HSS file as long it’s validates.
That means that you can take a .css file and rename it to .hss!

(save the file as “style.hss” without quotes in the hss folder; see the folder structure below)

Now update your .hxml file!
Remember I use MonoDevelop 3.0 for OSX

Here a example of the folder structure I used for this example

+ Export
	+ neko
	+ php
+ Source
	+ hss
		- style.hss
	- Foobar.hx
Foobar.hxml

Open your Foobar.hxml file and it should look something like this:

-cp Source
-main Foobar
-neko Export/neko/index.n

--next
-cp Source
-main Foobar
-php Export/php

--next
-cmd "cd Source/hss/"
-cmd "hss style.hss" 
-cmd "hss style.hss -output ../../Export/php/" 
-cmd "hss style.hss -output ../../Export/neko/" 
The quotes are important when on OSX (possibly also for Linux)

Now every time you compile the source for Neko/PHP the css will be compiled in the correct folder!

Brrrrr

Okay, okay, I know I promote MonoDevelop for Haxe coding.
But… for hss/css I don’t think you should use it…
I haven’t tried it yet, but the Haxe plugin for Textmate looks good for it.

happy haxe-ing

Sources used:

Haxe IDE for OSX: Monodevelop 3.0

Update #1: I thought I had finished this post already, but it was not finished yet… In the mean while MonoDevelop is update to 3,0,3,2

I’ve been using MonoDevelop and the MonoDevelop Haxe Language Binding addin for all my Haxe experiments. It’s better than FDT 5 (I haven’t update to FDT 5.5 yet, because I’m at work in the middle of a project: I never update my computer/software during a project!!!)

This all is possible because Joshua Granick decided that MonoDevelop could be used for Haxe development.

Don’t get me wrong: MonoDevelop is great compared to the competition, especially because it’s free! But there are still some bugs to be crushed:
A while back I send a bug to the MonoDevelop development team about templates.

The formatter in 2.8.x is dead – can you switch somehow to monodevelop 2.9.x or master ?

So I was glad to get a message from the MonoDevelop IDE that I could update to 3.0.
To bad that they changed the api, and that broke the MonoDevelop Haxe Language Binding addin.

I’ve tried to update the plugin myself:
Forked the git repository.
First I thought I just had to change 2.8 to 3.0: no luck there I got error on excisting packages:
using MonoDevelop.Projects.CodeGeneration
First I thought it was a OSX related problem: so Installed MonoDevelop 2.8 again.
And there I didn’t have this problem: so I compiled the plugin there and installed it in MonoDevelop 3.0.
Still no go: only errors. Perhaps they changed something in the API? Could find that anywhere on the website and documentation. It had to end for me there: other stuff needed my attention.

Luckely Joshua fixed everything (there was indeed an API change) and got the plugin working again.

Installing MonoDevelop 3.0

Some extra issues I encountered installing the new MonoDevelop 3.0 (3.0.1):

I’m not a 100% sure but the release notes from MonoDevelop 3.0 mentioned:

This release of MonoDevelop needs at least Mono 2.10.9 version 11 and GTK#2.12.8 to run.

That would mean that we need to install a beta version of Mono
http://www.go-mono.com/mono-downloads/download.html
Beta Version: 2.10.9 (Release Notes)

Because the new version broke the ‘automatic’ install you need to install the haxe addin manually:
visit http://addins.monodevelop.com/Project/Index/41
and download:
Monodevelop 3.0
get the first one in the list
package mac

How to install the addin?
Monodevelop >> addin-manager >> left bottom button “Install from file”
find the file you just downloaded and “Open” it

your good to go

Source can be found at github for people who want to contribute to the plugin (yes please!):
https://github.com/jgranick/md-haxebinding

On of the most pleasant improvement of MonoDevelop on OSX is:
* anoying copy/paste bug (copied part duplicates the last character)

example:
_sp.graphics.
change _sp into _sprite
becomes
_sprite..graphics.

happy haxe-ing

Installing Haxe and NME on OSX

I recently had to (uninstall and) reinstall Haxe, so I decided that it would be useful to document the process!

Remember this is a post for OSX(10.6.8) install of Haxe(2.09) and NME(3.3.0)!

This entire post started because MonoDevelop didn’t show any auto-completion anymore. It cost me 4 nights to fix the ‘problem’. I deleted Haxe entirely and reinstalled it (and NME/extra libraries) again. I had written the process of install down before to blog about it later, so there is some stuff that happened the previous time I install Haxe and NME (and that means that this it’s not exactly a clean install)

About the deletion/uninstall of Haxe: at the bottom of the post

I can’t thank Joshua Granick (one of the programmers of NME) enough for his help! The man must be a superhero: helping everybody on twitter, writing tutorials/post on his blog, programming an haxe/nme add-in for MonoDevelop, NME (duh), being a dad, having his own game company….(!!)

Start installing Haxe

Download the Haxe OSX install zip from: http://haxe.org/download
And install it like you normally do.

After install you can check if everything went okay (and you need the terminal later on):
open the terminal
(CMD+SPACE and type terminal)

type in the terminal
haxe
to check the install

Download the NME OSX install zip from: http://www.haxenme.org/download/
And install.

type in the terminal
haxelib list
to check what libraries are installed

This is probably not useful for everybody, but these are some of the extra libraries I use…
type in the terminal

haxelib install swf
haxelib install jeash
haxelib install spritesheet
haxelib install format
haxelib install actuate
haxelib install box2d
haxelib install waxe

You probably only want to install these to get NME working
jeash for html5 and actuate to animate stuff

haxelib install jeash
haxelib install actuate

Next we will make a short cut to NME
Type in the terminal
haxelib run nme setup

Explanation from Joshua Granick

If you execute β€œhaxelib run nme setup” from a command-line or terminal, it will add a script to your PATH (in the Haxe directory) that shortens the command string. Instead of having to call β€œhaxelib run nme”, you can simply call β€œnme”.

This failed on my computer; the terminal spit this back at me

haxelib run nme setup
chmod: Unable to change file mode on /usr/lib/haxe/nme: Operation not permitted
rm: /usr/bin/nme: Permission denied
ln: /usr/bin/nme: File exists

This is probably because I’m on OSX and not on Linux as “root” user….
So fix this with:
sudo haxelib run nme setup, type your password and try again!
(source: http://www.haxenme.org/developers/get-started/)

After this you install the ‘stuff’ you need for development on mobile devices.
I only need android so I installed that (for now):

nme setup android
Download and install the Android SDK? [y/n/a] ? y
Output directory [/opt/Android SDK] : /opt/Android SDK
or just use enter to use the default path

after install the “Android SDK Manager” will be started

download Android 4.0.3 (API 15)

After the “Android SDK Manager” is ready with downloading and install you can close it (it will ask you to do so)

The terminal will start yelling stuff:
Download and install the Android NDK? [y/n/a] ? y
Path to Android NDK [/opt/Android NDK] : /opt/Android NDK
or just use enter to use the default path

Okay.. your good to go!

Install IDE

Install an IDE (read about the choices that I made)

Let’s assume that you will also use MonoDevelop (2.8.8.4):
Download the OSX files (yes 2!) from: http://monodevelop.com/Download
Click on osx and you will get two download options

  • MonoDevelop 2.8.8.4 installer
  • Mono 2.10.5 + GTK#

Click/Download MonoDevelop (pretty straight forward)
Click on Mono and you will go here http://www.go-mono.com/mono-downloads/download.html.
Do you need “An open source, cross-platform, implementation of C# and the CLR that is binary compatible with Microsoft.NET”???
Well… yes: see Mono as the car-engine and MonoDevelop as the rest of the car (you as the driver)… you need both to go on a road trip!

We want stable release: “Latest Stable Version: 2.10.8” and click again on OSX.
At the bottom of the page you will see some links appears
download the Intel Mac: “Runtime”

Install both files you just downloaded
And open MonoDevelop (in Applications)!

Add-in Manager Monodevelop
The only thing you need to do now is:
MonoDevelop > Add-in Manager > Gallery tab > Language bindings > Haxe language Binding
Install that add-in (0.2.1).

Your MonoDevelop is ready for Haxe/NME programming.
Moving from FDT to MonoDevelop? I wrote something about that to make it somewhat easier: Moving from FDT to Monodevelop for Haxe and NME

About your first NME > Flash project, visit Joshua Granick post: getting-started-with-haxeflash-in-monodevelop/ he has also one form cpp and html5..

Happy Haxe-ing

Uninstall Haxe on OSX

something you should never do πŸ˜€

After updating to Haxe 2.09 (and updated the Add-in) I noticed that the MonoDevelop auto-completion didn’t work anymore.
I mentioned this to Joshua Granick but we couldn’t figur out what it was.

This is probably what happend: I installed Haxe 2.09 very quickly after it was released and after that there was a hotfix which I couldn’t install over the previous installed Haxe…
Eventually Joshua gave me this advice on twitter.

Open the terminal (CMD+SPACE and type terminal) and typerm /usr/bin/haxe
I got “rm: /usr/bin/haxe: Permission denied”
This is probably because I’m on OSX and not on Linux as “root” user….
I fixed this with sudo rm /usr/bin/haxe: you will be asked to fill in you password (there is no feedback of typing) and hit enter, the Haxe folder will be deleted.
(you will lose Haxe and everything you installed in there: NME and libraries, the other install you need to do for NME will still be installed: Android/IOS for example)

After the reinstall everything worked again.
I can finally use my evenings for programming again πŸ˜€

Moving from FDT to MonoDevelop for haXe and NME

Before I start with this post I should mention that Joshua Granick (on of the creators of NME) has a post about:How to Install Haxe, NME and MonoDevelop! That will save me some time and who can explain that better than Joshua.

I wrote something similar when I moved from PC (FlashDevelop) to OSX (FDT) (read my post: moving-from-flashdevelop-to-fdt/). Which also was a reminder when I needed to reinstall or explain it to a college.

Want to know why I’m using MonoDevelop?
Moving from FDT to MonoDevelop is not a big step (my opinion πŸ˜› )

After reading my post, it looks like I’m leaving FDT… That is not what I’m doing: I’ll keep on using it for AS3.
But I hope to ‘take’ some features from FDT to MonoDevelop

Adding your own short-cuts / key-binding

First let add some features that I use a lot:
MonoDevelop > Preferences... (CMD+,) > Key Bindings
search for “comment”
Toggle Line Comment : Edit Binding > (CMD + 7)
search for “case”
Uppercase Selection : Edit Binding > (CTRL + SHIFT + X)
Lowercase Selection : Edit Binding > (CTRL + SHIFT + Y)
search for “template”
Insert template.. : Edit Binding > (CMD + SHIFT + 1) [doesn’t work yet]

Using default Short cuts – (besides the ‘normal’ short cuts)

Then there are some default shortcuts you use a lot:
run >> ALT + CMD + enter
debug >> CMD + enter (doesn’t work)
move the line or highlighted section down >> ALT + ARROWDOWN
move the line or highlighted section up >> ALT + ARROWUP
show completion window >> ALT + SPACE

Adding personal info

Don’t have to explain this … right?
MonoDevelop > Preferences... (CMD+,) > Author Information

Changing settings

Perhaps this is very personal, but I’m not writing this for you alone (it’s also a reminder to myself!)
MonoDevelop > Preferences... (CMD+,) > Text Editor > Behavior >

  • check: Insert matching brace
  • check: Smart semicolon placement
  • check: Enable on the fly code formatting (doesn’t do anything)
  • check: Format document on save (doesn’t do anything)

and
MonoDevelop > Preferences... (CMD+,) > Text Editor > Behavior > XML

  • check all

Moving on:
MonoDevelop > Preferences... (CMD+,) > Text Editor > Syntax Highlighting
I installed Monokai for Darius Kucinskas: you can get it from github. That because I use it on TextMate and gotten use to it….
Joshua Granick has created a FlashDevelop color scheme (if there are people who want to move from PC to Mac/Linux).

Templates/snippets

And then the most interesting… the one that doesn’t seems to be working
MonoDevelop > Preferences... (CMD+,) > Text Editor > Code Templates
Code templates are awesome and speed up your development a lot (create a getter/setter in just one click for example)
Just do the following:
Edit > Insert template...
And remember that the mime type is:
mime: text/x-haxe
It really doesn’t matter what you do… for example // test


but then only bugs…

πŸ™

Something to read: The official statement from MonoDevelop about Code Templates.

I would like to see

I miss some stuff that I was very use to, so lets make that a NICE-TO-HAVE-LIST

  • feedback when exporting/compiling to a target like SublimeText 2 or in the terminal.
  • code completion on variables and functions
  • templates that work
  • duplicate line (up/down)
  • code formatting
  • auto import
  • code checking while typing/checking without running
  • if auto code checking is not going to happen: a shortcut to check your code
  • automatic “add to folder” (for all folders)
  • TODO added to “Task list”

haXe and NME IDE and Editors OSX

I’ve been playing around with haXe for some time now. And when you do that, you will automatically notice NME.

HaXe is really awesome and very easy to learn when you are a ActionScript (AS3) developer. (NME has a great cheat sheet which also works for haXe).

But this post is not about explaining haXe or NME (just read the links I provided) and it’s not a tutorial about programming in haXe.
This is about programming: an IDE to help you develop much quicker.

There are a lot of IDE which support haXe: just check it here.
It seems like a big list…. but not entirely true…
For windows it’s easy: just get FlashDevelop.
Before I moved to OSX, I did all my Flash development on it and it rocks!

But for OSX it’s not that easy. So it comes down to a few contenders…
Sadly Sam Brick beat me with writing about this subject.
He only ends up taking another route… because there was no other choice.

But because I already started writing this post, I will finish it.

First I tried the editor I use for my Actionscript programming:

FDT 5 (PC, Mac and Linux) (free and €249/€499)

FDT is a commercial product (FDT max) but there is a free version (FDT free). And both version support haXe.
Although I love FDT for AS3 programming, I don’t feel that way for haXe. I miss to many features I have in the AS FDT (templates, trace, snippets, format, autoimport). It also feels very sluggish (I know Eclipse doesn’t help with that, but it feels soooo slow compared with the as3 counterpart.). And it doesn’t support NME and so although I wrote FDT templates for NME, it doesn’t help you.
FDT made a clever move adding haXe to its editor, but it should be labeled beta.

So I moved to my second editor on OSX:

TextMate (Mac only) (€44.85)

TextMate is a commercial product, but it will not set you back that much. You can try it for 30 days. And it’s awesome. I use it to open files quickly.
But what I don’t like about TextMate is the autocompletion… it’s under escape… doesn’t feel natural.

So my search brought me to a new editor:

SublimeText 2 (PC, Mac and Linux) (USD $59)

SublimeText 2 is a commercial product just like TextMate. You can evaluate this product for free and there is currently no enforced time limit for the evaluation.
This one is very good, still in beta but very useable.
You need to install the haXe bundle: the instruction can be found here

The haXe Sublime Text 2 bundle enables:

  • haXe compiler code completion and hints
  • syntax highlighting and basic completion for hx, hxml, hss and nmml files
  • Sublime build system integration
  • hxml parsing, automatic creation, and multiple build management (ctrl+shift+b)
  • supports NME projects (nmml)

This editor would have been my choice if there was no MonoDevelop (just wait and you will see πŸ˜› ).

Another great solution would be:

IntelliJ IDEA (PC, Mac and Linux) (from €94 -> €664)

IntelliJ IDEA is a commercial product that you can try out for 30 days. It’s the choice that Sam Brick ended up with. I can’t tell you much about it.
I did install it but haven’t tried it simple because I already have FDT (set me back €499) and IntelliJ would cost another €189 (Personal license) for experiments.
But it seems very powerful and I know some AS3 developers who use it, so in that scenario IntelliJ would be the obvious choice.

Here comes the most promising editor (for now):

MonoDevelop (PC, Mac and Linux) (free!)

MonoDevelop…. it even sounds like FlashDevelop and its free like FlashDevelop. This is so new that there is not a lot of blogging done about it (Saumya beat me to it πŸ™ )
This is one awesome project which is so new it still has ribbons on it! One of the lead programmers of NME; Joshua Granick asked himself why FlashDevelop (his code editor of choice) couldn’t be ported to Linux and OSX.
He learned from previous attempts and made a start with it… and it works!

I’m not going to repeat what Joshua said; just go and visit his blog and read about it (and then return here again…. I’ll just wait for a minute of two) FlashDevelop for Mac/Linux: Part 1

If you want to know about the latest development of this addin, you can follow Joshua on twitter: @singmajesty.

Currently you have to copy the .dll from the git repository to a the correct folder but then it should work fine.
But that can change very quickly:

I’m waiting for MonoDevelop to allow my add-in in the official (beta) repositories. That will make it much easier to upgrade in the future

source


Note:
Oh still here? You want to know how to get started?
First you need to download MonoDevelop.HaxeBinding.dll from Github: press the button “Raw” and the file will be downloaded.
Then you need to copy it in the folder: ~/Library/Application Support/MonoDevelop-2.8/LocalInstall/Addins.
This folder will not be there so you need to create it for yourself (this path is when you use OSX and installed the latest MonoDevelop).

Don’t feel very comfortable doing that?
MonoDevelop can create the folder for you … but you still need to copy the .dll yourself.
goto: MonoDevelop > Add-in manager… > gallery > IDE extensions > Specflow Support > install…
and then uninstall it again (folders are made, but you don’t need the extension)


You don’t have to install it by hand… just goto:
MonoDevelop > Add-in Manager > Gallery tab > Language bindings > Haxe language Binding

This is not the latest version (as fare as I know) so if you are more adventurous the github download and install is still the way to go (that’s what I’m doing).

Tribute to Heavy Bramble: papertoy Brummble

Updates: I moved them to the bottom of this post, just click here to jump to the updates!

This is my first of my monthly “big” – post (read more about the changes I will make this year).

I had this lying around for some time (made it before Christmas), but didn’t take the time to finish it.
For the first time I had a WIP test builder (Jason Bolt) and that helped a lot.
Especially because I had some pressure to finish it!!

And as promised it will be down-loadable; I present:

Brummble

Brummble side front

Brummble is a papertoy tribute to the awesome vinyl from ThreeA: Heavy Bramble.
I wanted to see how fast I could “papertoy” a vinyl (about 3 nights (3*4hours) and some extra hours for ‘bugfixing some ‘lite’ instructions and photos). The instructions are very minimal, so some it’s not a beginners project. You will need 5 pages, my advice is to use 120/160 gram paper (heavier than the usual printing-/copy-paper). It will take about 4 hours to cut out and build.

Blank template

Not a print this time? No I don’t think it needs more, but you may always surprise me with a custom!

5 pages

Yes it’s not a small papertoy, but the result will be very close to the original!
and show me/the world the pictures!!

The .ZIP file contains a .PDF
(You can use freeware like FilZip or 7zip to extract a .ZIP-file and read a .PDF with Acrobat or Foxit)

Update #1: Everybody is as excited as I am: 400 downloads in 5 days (300+ in the weekend; normally the time that the visits to this blog is the lowest)
Update #2: Check the trackback links at the bottom: 3 blogs posted about Brummble: THX
Update #3: The first prove that someone has built Brammble: Josh Buczynski build https://twitter.com/#!/Sergenth/status/161100136280358912/photo/1 (also check out his website paperposeables.com and especially the poplock; I will be doing something with that system in the future! )
Update #4: Another build: check out https://twitter.com/#!/ario_fitrianto/status/162202275434086401 by Ario Fitrianto. Thx for the build! And customizing
Update #5: A French papertoy blog has a post about Brummble: check out paper-toy.fr (perhaps use google translate)
Update #6: A documented build by Jared R Delo, visit his google+ photo gallery: Brammble build in 8 staps
Update #7: A custom by Marko Zubak. Check my tweet about this AWESOME Brammble custom

2011 vs 2012

Update #1: I joint a gym to learn how to KickBoxing and Muay Thai! Here is the link to the site: http://www.samuraisports.nl/ (little warning: this website is not a beauty)
Update #2: Brummble the papertoy tribute to ThreeA vinyl: Heavy Bramble is online and ready for downloading: here.

It’s been a while … haven’t posted anything regular in a… year.
That would have been the year 2011: the year I became for the first time a dad.

So here a little update (for the one person who still reads this blog).

2011 and a little bit before that

I had big plans; I wanted to show everybody that my live didn’t change when I got a kid…
Boy…was I mistaken.
Don’t get me wrong: this has been the best year of my live!!
But the things I wanted to do this year, the plans I made… nothing of that happened.
My daughter happened! and everything else followed HER plans.

I wanted to be a part of her live and not only look after her in the weekends.
My girlfriend and I both decided to have a 4 days work week so my daughter only has to goes to the daycare center for 3 days.
The employer I was working for at that time didn’t want me to work 4 days. I tried to use a dutch-law: they said they would take me to court, etc, etc.
I don’t want to make this post about my former employer (if you want to know more about this story, just ask), so I decide that it would be best for the both of us to find another job (1.5 month before my daughter was born…. I know: I’m still bitter about that).
But here is the good news (remember: the best year of my live) I found a great new job at noprotocol.nl!!!
I could work there for 4 days, they are very flexible and an awesome group of talented people.
AND I didn’t miss anything daughter-related stuff, which I can recommend every dad to do: have a day alone with you kid.

So the first 6 month of the year 2011 is mostly about being a dad (boring stuff for people who don’t have kids, nothing to explain to the people who have them).

Professionally (during the day I’m a Flash Designer/Developer) I learned about Robotlegs, AS3-navigator, LoaderMax, etc. Had some interesting talks with the people of “the bigger boat” (group of freelancers). AND I can do the job in 4 days (sometimes with some creative time-management from my employer and myself) which I knew would be possible, but conformation is alway nice.
In the next 6 months of 2011 I started to think about what I wanted. What makes me happy, what is making me happy right now and what will make me happy in the future. I miss the feeling I had when I started to work as a junior designer: wanting to learn EVERYTHING to become a senior. But now I am a senior… what’s next? Do I want to be a programmer for the rest of my live? Questions that are not answered yet.

I’m also a papertoy designer (something I do at night). This year was not a good year for papertoys: I needed my sleep!
I have done 1 exhibition in Amsterdam and I did an exhibit at Sneakerness Amsterdam (also the first time that I sold papertoys).
Both exhibition was done the rest of the dutch papertoy designers (3eyedbear, Marshall Alexander, Dolly Oblong) and one german papertoy designer (Nick Knite).
For these events I made 2 new papertoys, but they will not be downloadable. Nick Knite and myself wanted to organize a papertoy calendar with papertoy designers we both like… sadly I had to cancel that: no time to start/finish it πŸ™
All and all not very productive year.

2012

My live (and this blog) is more than just one specialty. So here a short list:

Flash / Development

This is my job, this is how I make a living… and Flash is Dead! (again). I’m not worried so I will keep learning even more about that subject. But I need more! I have made a small CMS in 4 weeks in PHP (what an ugly language is that!) but that didn’t excited me much.
So I want to learn haXe! I’m quite excited about this language so I will be writing about that soon.
I would love to lead a team… or join a group of flash/geek-superstars (whatever moves me forward)
I want to finish what I have started in 2011:

  • finalize (and improve) my project setup.
  • automate the stuff that I have to do over-and-over-again

Find out how a senior finds his “what’s next”
Start having coffee-meeting with the industry tech-directors/tech-team leaders/etc to answer BIG question
Will be joining the after-work-drink-on-friday with my colleagues more often (once a month)

Urban Papercraft / papertoy

I really have no plans for papertoys: I used to do this to relax, but last year I relaxed by sleeping.
There is still two books I wanted to write…. but I can’t promise that it will be finished this year.
You can always ask me for a workshop or lecture about papertoys: just let me know!

The graffiti inspired papertoys I do will not be downloadable: that will be my art and art can’t be given away πŸ˜€
So what can the fans download? I have created a toy based upon 3A vinyl toy: Brummble. That will be released very soon.
And more perhaps? Not really a plan for that but sometimes I get a tickle and that needs to be scratched… and the product of that scratching (now this metaphor is getting dirty) will be downloadable.
Can you ask me for exhibitions? Yes, please do. I like the idea that my work is art and not only a (paper)-toy.
That is also the reason that I have titled this paragraph “Urban”: urban-art, urban-toy, urban-paper that’s what I will be making.
Can you ask me for a papertoy book? Yes, please do. I have worked on two books with much pleasure and would be honored to asked for another.
Can you ask me for a custom? Yes you can… but time is very precious right now. So your project must be VERY interesting.
I have promised to finish a custom Zealot Guard from Abz, and that is what I will do. Why do this custom? This is a VERY exciting project by a (perhaps the only) female papertoy designer.
There are some plans to visit Germany for some workshops, but other than that I have no idea.
2012 will reveal itself to me as it goes towards 2013 πŸ˜€

Blog

Now I have some energy back in the evening I will be writing again on this blog, but not as often as I did before 2011. I used to write every week. That will change to once a month: a ‘big’ post. The ‘big’ post will be a tutorial or something else that needs more explaining. That will mean that there will be at least 12 more posts. Between these ‘big’ posts there will be some papertoy related images (minimal writing).
I will be writing about haXe, so that will be exciting (for programmers). I think I can be of some help making haXe more accessible for the ‘normal’ programmer.

That is not the only way to follow me: I have a twitter account. here I talk about everything that interests me (design/development/sneakers/games/video/whatever)

Misc

When my daughter was born I quit the gym (it was too expensive). I wanted to find something cheaper… It turned out to be very cheap: I didn’t join a gym but I also didn’t do something else. This year I will be joining a gym…. and to be very specific: I want to try Kickboxing!
Another thing that I will do, or stop doing… Is doing things for free. And that goes also for friends and family; they will pay (not necessarily with money, but for free doesn’t work for me anymore)

I’m looking forward to 2012!

Introduction of Squeezzrr a C-Myk papertoy

Finally I join the papertoy world again and enter a contest….

Pop'Set Colours attack logo
(popsetpaper.com, Happy Colours’ Attack)

But for I can’t finish the papertoy in time πŸ™ (my live is changed a lot!)
(participate)

Damn I just couldn’t get more time in the design/build… I wanted to compete but there are more important things to do…

I could be sad, but I’m not, so instead of winning a contest
Ishare the end result with you (this is my blog so why not):

I introduce to you:

Squeezzrr

a C-Myk papertoy
(and my first Shin Tanaka custom)

Squeezzrr front-shot

Squeezzrr front

Squeezzrr side-shot

Squeezzrr side

My creation is based upon the fact that Shin got inspired by a drop of water. The (head-) shape he created made me think of an orange squeezer and I decided to make a character based upon that.
Some minor changes to the original design: shortened the ‘head’ and removed/replaced the arms with my own design. And of course an orange!

Hope you like it.

Update #1: I have added Squeezzrr also to the gallery of Pop’set. It will be visible in 48 hours :D. To bad that there is no like button anymore πŸ™
Update #2: I was missing the possibility to “like” this! So now you can do that here: like me on facebook. So like me alot πŸ˜€
Update #3: Yes!! added to the Pop’set Colours’ attack contest – gallery: http://www.popsetpaper.com/layers-node/519 to bad no “like” so I have created my own like!

Lightweight CMS For simple projects

I use WordPress for this blog, and happy with it. But it’s not for everybody: you need a database, it’s very impressive, plugins, themes, users, comments, regular update, kinda geeky install and the default installment is 7.9 mb.
And I needed a CMS for a small website/portfolio; it needs something small, not impressive (visually), easy to set up, no database, PHP and light!

So I started to look for: light/lightweight/nano/simple CMS (no database/flat file storage)
This is the list I compared it to:
Very important: free (and not a pro-$$-account), no database/flat file storage, lightweight, easy to install, WYSIWYG editors, PHP
Important: easy to use/beautiful , normal data editing, file manager, easy to create templates/CSS for this system
Nice to have: gallery, no need for multiple users (no a must), no need for backup, no need for multiple languages (english is fine), contact form, html-editor (export to files)

I went a little overboard with the search for the ideal CMS for me.
After reviewing them I gave them a grade from 1->10 and to make it even easier: the highest grade is the one I choose for this project.
So here a little overview to make it somewhat easier to read about my findings:

  1. LotusCMS –> 9.5
  2. razorCMS –> 9
  3. gpEasy –> 9-
  4. GetSimple –> 8
  5. CMSimple –> 8-
  6. Pluck –> 7
  7. phpsqlitecms –> 7-
  8. SkyBlueCanvas –> 6.5
  9. NanoCMS –> 6+
  10. Nanomus –> 6
  11. opensolution (Quick.Cms) –> 6-
  12. LightNEasy –> 5
  13. onefilecms –> 4

LotusCMS

It brings to the forefront design and design integration into one of the most neglected CMS niches – Databaseless Web-Design and Development. LotusCMS is free and more than free, it is licensed under the General Public Licence under which you may copy, change and redistribute this software to suit your needs!

Features:

  • A plugin system using the concept of observable classes.
  • A lightweight core, into which everything else is plugged in.
  • Multiple users and user roles.
  • WYSIWYG content editor.
  • A blogging system.
  • Improved general usability and design.
  • An advanced speed caching system for standard pages, with up to a 3 times average speed increase for server-side processing.
  • SEO settings (Search Engine Optimisation), if your installed template supports it.
  • A back-up system.
  • Very beautiful
  • User friendly
  • multiple users but 2 roles
  • Ugly dynamic URLs
  • easy install (check if server is ready, self config with deletion from install file!)
  • Install 2.9 mb

I like it a lot and I give it a 9,5


razorCMS

With the further evolution of razorCMS, our goal for the next milestone release is to offer true choice, by offering a more simple intuitive approach, choice of mySQL or flat file storage, and pure razorCMS code putting razorCMS on the map as an original CMS solution with no connection to other CMS solutions.

Features:

  • really small, and works out of the box.
  • You need to install ‘blade’-plugins to add more functionality
  • Flat File design, no database required
  • Simple, fast and security conscious installer
  • Small and fast footprint
  • Modular framework
  • Support for multilingual translations
  • Multiple infobar content displayed on single page
  • External links in link menus
  • Easily modified
  • Easily extendable via blade pack add-on interface
  • Multi level menus
  • Security check for file permissions
  • Full file manager
  • 3 user accounts with varying levels of access (good for handing over to clients)
  • Simple backup manager
  • Automatic invalid login check, blocks invalid logins by IP address after 8 attempts
  • Improved security
  • Multiple theme control
  • Maintenance Mode, keeping your site offline to users but online to you, for changes
  • easy install (check if server is ready, self config with deletion from install file!)
  • possible to work on pages but not published yet

Nice set op plugins: possible to use for posting news, gallery, editor of you choise, nice url, etc

A lot of lite CMS use this: the name of the content is called ‘sidebar’ (you can rename it in this cms!), which made me think
why not call it ‘content’?

It’s beautiful and easy to use. I installed some extra’s to make it even better.
Install: 503 KB (default install) >> need for wysiwig editor and theme
Install: 1.9 mb with install (tinymc / gallery / theme)

I like it a lot and I give it a 9.


gpEasy

gpEasy is a lightweight CMS (built without the use of a database) which helps us reach our goal of making it fast and easy to use right down to the installation. Once installed, you’ll find an intuitive interface that let’s you edit your entire site in WYSIWYG fashion.

Features:

  • WYSIWYG Editor (CKEditor)
  • Galleries (ColorBox with some modifications)
  • SEO Friendly Links
  • Free and Open Source (GPL)
  • Runs on PHP
  • File Upload Manager
  • Editable Theme Content
  • Deleted File Trash Can
  • Multiple User Administration
  • Works in Safe Mode with FTP Functions
  • Flat File Storage
  • Fast Page Loading
  • Fast and Easy Installation
  • reCaptcha for Contact Form
  • HTML Tidy (when available)
  • themes
  • gallery
  • plugins
  • easy install (check if server is ready, self config)
  • Install: 4.2mb

I like it and I give it a 9-


GetSimple

GetSimple is an XML based lite Content Management System. To go along with its best-in-class user interface, we have loaded it with features that every website needs, but with nothing it doesn’t. GetSimple is truly the simplest way to manage a small-business website.

Features:

  • No database
  • XML Based
  • You can “Undo” Almost Everything
  • Easy to Learn UI
  • Simple Installation
  • Simple Theme Customization
  • Designed For the Small-Site Market
  • plugin
  • templates
  • easy install (check if server is ready, self config with deletion from install file!)
  • Install: 2.6mb

strange the need to set a ‘Website Base URL’

I like it: 8


CMSimple


it is small – simple – smart!
Features:

  • Easy installation
  • The CMS script is less than 100 KB
  • Template driven layout using a css script
  • The contents of the site is stored in a single HTML-file
  • Many languages available (both for the user and for site maintenance)
  • Written in PHP – it runs on Linux/Apache servers, or on Win32 with Apache or IIS
  • Inbuilt WYSIWYG editor (both on IE and Mozilla) – or other alternative editors
  • Uploading of images and files
  • Link validation
  • Search function
  • Print version option
  • User downloads from their HTML content file
  • Simple mailform included
  • Easy setup of multi language sites
  • PHP-scripting may be included within the content (named CMSimple Scripting)
  • Integration with 3rd party scripts possible (using CMSimple scripting
  • Online editing of system configuration
  • wwwaut login available
  • Automatic backup on logout
  • Documentation
  • Special download folder
  • Easy install (but it uses the default settings)
  • Install: 117kb

it took me a while to find the login: add &login (index.php?welcom&login) or ?login (index.php?login)
It’s not the most beautiful cms out there, but it’s very complete
don’t know how useful the split on H-tags is in submenu’s
It’s quite intuitive which is unexpected!

I like it and I give it a 8-


Pluck


Pluck is packed with some nice features, from which we’ve listed the most important ones on this page. To try everything live, take a look at our demo.
Features:

  • create an unlimited amount of pages
  • create your own blog
  • create an album to show images or photos to your visitors
  • include a contact form in your page(s)
  • easy-to-use theming system
  • single user
  • Install 3mb

I like it: 7


phpsqlitecms

phpSQLiteCMS is good if you want to quickly set up a small website without needing to spend a lot of time studying, installing and configuring (as SQLite is file-based, it just runs “out of the box”). But note that it is no large-scale content management system – it’s a tiny and simple one!

Features:

  • Simple and lightweight
  • Runs out of the box (no database setup required)
  • Optional caching to save server performance
  • Supports news
  • overview and
  • commentable pages
  • photo galleries
  • search function
  • RSS feeds and
  • XML sitemaps
  • need some explaining, very complete, quite technical
  • Install 1.2 mb

It’s an easy instal but you need to use the default inlog data–>user: admin // pass: admin

The default install is also the documentation.
Which means that you need to remove a lot of pages before you can start clean

Good but not for this project: 7-


SkyBlueCanvas

SkyBlueCanvas is an easy-to-use Web Content Management System, that makes it simple to keep the content of your site fresh. You simply upload the software to your web server, and you are ready to start adding text and pictures to your website.

Features:

  • Easy-to-use
  • Easy-to-install
  • XML Data Storage (no database required)
  • Extensible
  • Flexible & Powerful Plugin API
  • Skinnable
  • Small in size (3.5MB) <-- hmmmm I got 5MB
  • Valid XHTML 1.0 Strict output
  • Search Engine Friendly URLs (requires mod_rewrite)
  • Customizable Meta Tags (globally or by page)
  • Built-in RSS feed creation of pages, articles and news items
  • easy install (check if server is ready, self config with deletion from install file!)
  • 1 user
  • template editor
  • Install: 5mb

some advertisement in install
strange question about location of website ?? (yes, I want to install it here)
user interface could be better, but that probably because the developer wants to make some money out of it (can’t blame em)

Not my choise: I give it a 6.5


nanoCMS

nanoCMS created by Kalyan Chakravarthy in 2007 is a php open source, gpl licensed flat file content management system (CMS). It does not use a MySQL database and is ideal for small websites. It is a very small CMS package (hence the nano part). Doesn’t take long to setup and is very simple to create pages and edit content. As it is small and doesn’t use a mysql database….. it’s fast, very fast.

Features:

  • one user
  • one template
  • WYSIWYG editor
  • Install: 2,2 mb

Easy install but not configurable at first // username: admin // password: ch4ng3th1s

very nice simple, but kinda heavy for something that’s called nano…
Categories are places on the page: sidebar == content // top-navigation == navigation

It would take me some modification to get it to work how I want it: so not for me but certainly not bad: 6+ (a little more then Nanomus)


Nanomus

Nanomus is one of the smallest, fastest and more simple free Content management Systems under GPL GNU.

Features:

  • Very small : the complete content management system is less than 100kb, PHP core is less 23 kb
  • Very simple : really simple to install and really easy to manage it.
  • Nanomus store all datas in secure PHP files, no database is required.
  • With Nanomus you can get a real small dynamic website
  • Really fast: with nanomus your website is really light and fast !
  • an unlimited number of pages
  • backup file system
  • deactive page system
  • dynamic menu
  • css template
  • include a filemanager
  • Nanomus is a free content management system, open source, really light, fast and secure.
  • No database required.
  • Nanomus isn’t multi users, only one account is possible.
  • Nanomus backup, if you want, all the olders page version.
  • Install: 153kb

It’s an easy instal but you need to use the default inlog data–>user: admin // pass: admin
Meta is perhaps not so obvious for a unexperienced user
Admin is not ugly, but to call it beautiful is taking it to far.

Nice but to ‘unpleasant’ design: 6


opensolution (Quick.Cms)


Features:

  • Pages and subpages management
  • Images and files management
  • Languages management
  • Configuration
  • Pages and subpages view
  • Pages print option
  • Images view by Lightbox
  • Change language option

Nice cms, but there is a paid model… And I feel that they are holding out on me
If you would need a gallery/contact form, you need the paid-version-extra
Install: 844kb
not for me: 6-


LightNEasy

LightNEasy generates a complete set of HTML/PHP webpages and recreates them whenever you make any changes. Your website will always be updated and easy to edit. No broken links to worry about.

Features:

  • not really nicely designed
  • kinda heavy
  • lots of templates pre-installed
  • admin is too much for my taste
  • template driven
  • website builder
  • and cms
  • language
  • gallery
  • Install: 4,7 mb

not for me: 5


onefilecms


Features:

  • Validating, semantic, and commented markup. Tested in FF, Safari, and IE7/IE8.
  • Small footprint (24 kb)
  • Possibly the easiest installation process ever
  • All the basic features of an FTP application like renaming, deleting, copying, and uploading
  • (Of course, for more complex processes like batch renaming or mass uploads/deletions, you’re going to want to break out an actual FTP program.)
  • Gracefully degrading CSS and Javascript
  • 100% re-brandable with title/footer text stored in variables and a modifiable filename
  • Externally hosted CSS and images for smaller file size
  • (But you can switch it out to your own stylesheet if you need to!)
  • Smart alert if you try to leave without saving your edits
  • very small but extremely technical (you need to know about programming)
  • Install 78 kb (with example site)

It’s not for this project, I think it’s a great starting point for creating your own CMS, but in this case I’ll give it a 4.


Note

Lite CMS I also tested, but didn’t fit one (but probably more) feature that I described above:
autocms(can’t get it to work), editeasy (can’t get it to work), whitecrane (difficult to use, BBCode), le.cms (couldn’t get it to work)
This doesn’t mean they are bad; they just don’t fit my needs.

My advice to all cms builders: create a minimal template series so designers have a starting point for their designs
simple stuff: header, horizontal navigation, vertical navigation, content, sidebar

Papertoy Monster Day

Never heared of it… That because it self-proclaimed.
And I’m one of the people who will do the self-proclaiming.

I have written about it, showed you images/photos and now there is a special day for it!

Papertoy Monsters:

Make Your Very Own Amazing Papertoys!
Papertoy Monster - book cover

The papertoy book I have designed two monsters for published by Workman Publishing (strangly enough you can’t buy the book at Workman anymore).
If you want to buy the book visit amazon.com and buy a couple of copies!!!.

Here a little quote by Workman:

A breakthrough paper-folding book for kids—paper airplanes meet Origami meets Pokemon. Papertoys, the Internet phenomenon that’s hot among graphic designers and illustrators around the world, now comes to kids in the coolest new book. Created and curated by Brian Castleforte, a graphic designer and papertoy pioneer who rounded up 25 of the hottest papertoy designers from around the world (Indonesia, Japan, Australia, Italy, Croatia, Chile, even Jackson, Tennessee), Papertoy Monsters offers 50 fiendishly original die-cut designs that are ready to pop out, fold, and glue. The book interleaves card stock with paper stock for a unique craft package; the graphics are colorful and hip, combining the edginess of anime with the goofy fun of Uglydolls and other collectibles. Plus each character comes with its own back-story.

I’m proud to present the monsters I have designed:
Scorpion Robot
Scorpion Robot
and
Squidbeak (formely know as ‘Octobeak’)
Squidbeak

You won’t find a lot of images of these Monster papertoys around on the Internet, I’m not sure but I think my paper models are rated advanced.
Although you can see a part of the page where Squidbeak is at boingboing.net (check the first page of the book you see).

Here a promo of the author Castleforte:

The Papertoy Monster book has also a site:papertoymonsters.tumblr.com/ so check that out for more pictures of the monsters. And follow it with twitter: twitter.com/PapertoyMonster

Here all the other monsters that you can build: