Newebe a enfin un logo

Comme tout logiciel qui se respecte Newebe se devait d’avoir son petit logo sympa. Je pensais remettre ça à plus tard mais mon passage à Annecy m’a permis de rencontrer quelques graphistes. Parmi eux Stella Salumaa à qui j’ai proposé de réaliser ce petit travail et qui a gentiment accepté. Newebe a donc hérité d’un joli logo blanc et noir symbolisant la liberté (oiseaux), le partage (la lettre de l’oiseau blanc à l’oiseau noir) et la confidentialité (le sceau sur la lettre). Vous l’aurez compris, je suis ravi !

Pour que le logo trouve sa place sur le site, j’ai du légèrement modifié la mise en page. J’en ai profité pour le rendre aussi plus atractif. Donc voilà Newebe a désormais non seulement un joli logo mais aussi un site plus sympa que je vous laisse le découvrir en cliquant sur l’image !

Le logo est sous licence Creative Commons by-nc-sa 3.0

Nouveau thème

Ecrivant régulièrement du code dans mes posts, j’ai décidé de changer de thème. En effet l’ancien était beaucoup plus sympathique mais les couleurs, les petites fonts et les minuscules fonts du texte pré-formatté le rendait peu agréable à la lecture. J’ai donc décidé de changer pour ce thème un peu moche mais qui possède le mérite d’être bien clair.  Et surtout les zones de code apparaissent entièrement. Il faudrait d’ailleurs que je cherche un plugin wordpress permettant de hilighter la syntaxe du code.

Créer un environnement de développement pour votre client JS avec Coffeescript, Cake, Stylus et Uglifyjs (partie 2)

Coffeescript et Stylus nous offre un syntaxe alléchante mais cela se gagne au prix d’une compilation. On ne peut se servir directement des fichiers que l’on a codé. Donc maintenant, vous l’avez compris, nous allons créer un fichier Cakefile. C’est le fichier utiliser par Cake pour savoir quoi entreprendre en fonction de l’action qui lui est fourni en paramètre. Ce fichier nous permettra d’exécuter 3 actions : build CSS, build JS, minification JS. A laquelle nous ajouterons une quatrième action “watch” qui permettra de lancer la compilation après la modification d’un fichier source.

Pour commencer définissons l’arborescence de notre projet :

lib/
src/
styles/
Cakefile

lib/ contient les librairies tierces et surtout le rendu final.
src/ contient les sources en Coffeescript du code.
styles/ contient notre fichier Stylus et le fichier CSS résultant.
Cakefile est notre fichier de build.

Maintenant on passe aux choses sérieuses avec le Cakefile ! Nous allons préparer les données nécessaires à la compilation puis nous allons créer les 4 actions qui nous intéressent. Tout ce qui suit est fortement inspiré de cet article de blog.

On configure notre environnement :

# Name of application to build
appName = "activities"

# Dependencies and shortcuts
sys = require 'sys'
print = sys.print
puts = sys.puts
fs = require 'fs'
{exec} = require 'child_process'

Puis on définit la liste de nos fichiers, soit en les positionnant à la main soit en les mettant dans le dossier src qui sera parcouru pour déterminer la liste des fichiers à compiler. Pour effectuer ce parcours nous écrivons une petite fonction walk.

# Files to compile
appFiles  = [
  '../my/path/to_any_file.coffee'
]

walk = (dir) ->
  list = fs.readdirSync(dir)
  if list
    for file in list
      if file
        filename = dir + '/' + file
        stat = fs.statSync(filename)
        if stat and stat.isDirectory()
          walk (filename)
        else
          appFiles.push(filename)

walk("./src")</pre>

Voici la tâche principale qui va permettre de compiler les fichiers coffee en un fichier JS. On charge les fichiers en mémoire, on les concatène puis on les transforme en JS. A la fin est appelé automatiquement la tâche de minification :

task 'build', 'Build single application file from source files', ->
  puts 'Start build'
  appContents = new Array
  remaining = appFiles.length

  puts 'Building JS' puts "Files to Compile"
  for appFile in appFiles
    puts appFile

  # Load files in memory then process compilation
  for file, index in appFiles then do (file, index) ->
    fs.readFile file, 'utf8', (err, fileContents) ->
      throw err if err
      appContents[index] = fileContents process()
      if --remaining is 0 process = ->
        # Concatenate files
        fs.writeFile "lib/#{appName}.coffee", appContents.join('\n\n'), 'utf8', (err) ->
           throw err if err
          # Compile files
          exec "coffee --compile lib/#{appName}.coffee", (err, stdout, stderr) ->
            throw err if err print stdout + stderr fs.unlink "lib/#{appName}.coffee", (err) ->
              throw err if err
              puts "JS Built to lib/#{appName}.js"
              invoke 'minify'

Vient ensuite la tâche de minification qui va réduire le fichier final et qui appelera à la fin la tâche de styles.

task 'minify', 'Minify the resulting application file after build', ->
  puts 'Start minify'
  command = "uglifyjs lib/#{appName}.js > "
  command += lib/#{appName}.production.js"
  exec command, (err, stdout, stderr) ->
    throw err if err
    print stdout + stderr
    puts 'Minify done' invoke 'styles'

On crée la tâche styles qui va compiler le fichier Stylus en fichier CSS :

task 'styles', 'Compile styles to CSS', ->
  puts 'Building CSS'
  exec "stylus styles/#{appName}.styl", (err, stdout, stderr) ->
  throw err if err
  print stdout + stderr
  puts 'CSS built'

On complète notre fichier Cake par la tâche watch qui va agir comme un démon, dès qu’un fichier source est modifié, le tout est recompilé :

task 'watch', 'Watch source files and build changes', ->
  for file in appFiles then do (file) ->
    fs.watchFile "src/#{file}", (curr, prev) ->
      # If a change occurs, it invokes build action.
      if +curr.mtime isnt +prev.mtime
        puts "Saw change in lib/#{file}"
        invoke 'build'

Le fichier Cakefile qui en résulte n’est que la mise bout à bout des morceaux de code de cet article. Pour compiler ses fichiers il ne reste plus qu’à appeler la commande

cake build

Qui provoque l’affichage suivant :

Start build Building JS Files to compile
../my/path/to_any_file.coffee
./src/activities.coffee
./src/views/activityview.coffee
./src/views/activity.coffee
./src/models/activities.coffee
JS Built to lib/activities.js
Start minify
Minify done
Building CSS
compiled styles/activities.css
CSS built

Maintenant que votre environnement est prêt, il ne vous reste plus qu’à coder !

NB : Vous pouvez suivre l’évolution de ce Cakefile ici : https://github.com/gelnior/teatime

Créer un environnement de développement pour votre client JS avec Coffeescript, Cake, Stylus et Uglifyjs (partie 1)

Développer des applications webs requiert désormais une bonne dose de travail côté client. En effet, la partie Javascript est presque codée comme un client lourd. Malheureusement, comme chacun sait Javascript n’est pas la panacée pour écrire des programmes conséquents. Cela demande aussi de maintenir une feuille de style à jour pour définir proprement le look and feel.

Heureusement avec l’arrivée de Node.js (un framework de développement pour serveur en javascript), une multitude de tools ont vu le jour pour développer efficacement avec Javascript :

  • Coffeescript : un langage à la syntaxe très légère qui est convertible en javascript. Ce langage est également enrichi en fonctionnalités (classes explicites, séquencement d’appels asynchrones…).
  • Cake : un système permettant de créer des fichiers de build qui utilise Node.js lors de leur exécution. Ceci est intéressant pour faire des builds évolués. C’est l’équivalent du makefile pour Coffeescript
  • Stylus : un langage à la syntaxe légère permettant de générer des CSS facilement.
  • Uglifyjs : un minifier de javascript pour générer le fichier le plus léger possible en bout de chaîne.

Avant de continuer nous allons installer ces quatre logiciels. Je ne m’étends pas sur leur fonctionnalités, chacun mériterait un long post.

Vous l’avez compris tout ces programmes se basent sur node.js, il nous faut donc l’installer :

git clone https://github.com/ry/node.git 
cd node
./configure

make && make install

Ensuite nous aurons besoin du gestionnaire de packet de Node.js, npm :

curl http://npmjs.org/install.sh | sh

Pour enfin installer nos quatre logiciels :

npm install coffe-script
npm install cake
npm install uglifyjs
npm install stylus

Chaque logiciel s’utilise avec la syntax suivante

# Compile un fichier de Coffeescript à JS.
coffee mon_fichier.coffee

# excécute l'action "action" du Cakefile
cake action

# Minifie un fichier JS vers un fichier minifié.
uglifyjs mon_fichier.js > mon_fichier_minify.js

# Convertit un fichier Stylus en CSS.
stylus mon_fichier.styl

Fin de la première partie, dans la seconde on attaque le vif du sujet avec le fichier de build, le Cakefile.

Quelques news…

  • Movim a une nouvelle version, la 0.2.0. Il va falloir que je me décide à l’installer.
  • J’ai enfin eu un compte Diaspora. C’est vraiment bien. Peu de features pour le moment mais ça fonctionne et la notion d’aspect est très bien : Chaque aspect est un genre de contact list. Ce qui permet de ne partager que certaines choses avec une catégorie de personnes bien définie (les choses personnelles pour la famille et les amis, les annonces pour les collègues…).
  • Une nouvelle version de Newebe est disponible sur le dépôt GIT mais j’ai encore du travail pour la stabiliser. Au menu : authentification, flux d’activité et rattrapage d’erreur manuel. Je ferai un post plus long à ce sujet bientôt.
  • Facebook connait son premier essoufflement en perdant 6 millions d’utilisateurs aux Etats-Unis. Ils ont probablement tous installé un Newebe. Toutefois certains démentent. De plus sur la planète entière le site atteint les 700 000 000 d’utilisateurs. Bientôt le milliard !