Making of Anima: UNICO – Tools

Here I am again. As promised, I’m going to talk about the tools I use to create Anima: UNICO. Without further ado…

1. Language: HTML+CSS+JavaScript client-side, PHP server-side

This one is easy. The main development of Anima: UNICO is made in JavaScript. The web itself is done in HTML, but it is mainly created dynamically from the code using jQuery. The representation is almost totally controlled by CSS.

2. Frameworks and JavaScripts libraries: jQuery, jQuery UI, Modernizr, Gumby

One of the strong points of JavaScript is the great quantity of existing developments. Very probably jQuery is the most famous. It allows working with the webpage DOM without going crazy.

Beyond jQuery, I started using jQuery UI as base for the user interface. jQuery UI is a framework with functions to create buttons, dialogs, draggable components, etc.

Modernizr is a small library which easies the design among different web browsers.

Gumby is a framework to create adaptative webpages, ehich adjust themselves to the screen size. Is the base I use to format the page.

3. Frameworks and PHP libraries: CakePHP

For the server-side, I’m using, in a very basic way, CakePHP, which offers me just what I needed.

4. IDEs: Jetbrains WebStorm, JetBrains PHPStorm

I’ve fallen in love with the JetBrains IDEs. I loved WebStorm  to develop JavaScript, and when I started using PHP, I jumped to PHPStorm (which includes all WebStorm functionality). They are very powerful environments, and integrate everything I wanted them to integrare: version control, remote database, ftp, libraries…

Also, through them I discover the technologies from the next point.

5. More: Node.JS/NPM+Grunt, SASS+Compass, Mocha

JetBrains IDEs integrate with their own Node.JS server, which allows the use of lots of useful scripts. I discovered Grunt, which allows to automatize tasks (it is similar to Make), and used it to unify, minimify and uglify mi javascript files and get them ready to deploy to production.

6. Version control

I started using Subversion as version control, but some months ago I discovered and learned Git, and never looked back. It is a really great VCS.

7. Tasks, general management, online repository: Assembla

I found several online repository options. In the end, I chose Assembla, which offered me a very nice free plan. It integrates with svn and git and offers task and ticket management, that I can integrate with PHPStorm.

8. Reports and web analysis: Google Analytics

In my web I use Google Analytics to check daily views, language, browser… important details for a JavaScript project.

That’s all for today. Next day I’ll start with the code structure.

By the way, you can find the code in GitHub. Go ahead, fork it!