Blog Notes

Livereload ta page gratos!

2013-02-15T13:02:00+01:00

Quoi c'est? C'est comment recharger automatiquement un (ou plusieurs) tab(s) de votre navigateur lorsqu'un fichier est modifié. Il s'agit d'un script en ruby (pas de panique, ruby est installé sur votre mac ;-) et d'un service automator qui surveille le dossier depuis le quel vous l'invoquez. Z'allez voir, c'est très simple à installer/utiliser. Yay!

Mini-clip:

Script Ruby:


#!/usr/bin/env ruby
# watch.rb by Brett Terpstra, 2011 
# with credit to Carlo Zottmann 

trap("SIGINT") { exit }

if ARGV.length < 2
  puts "Usage: #{$0} watch_folder keyword"
  puts "Example: #{$0} . mywebproject"
  exit
end

dev_extension = 'dev'
filetypes = ['css','html','htm','php','rb','erb','less','js']
watch_folder = ARGV[0]
keyword = ARGV[1]
puts "Watching #{watch_folder} and subfolders for changes in project files..."

while true do
  files = []
  filetypes.each {|type|
    files += Dir.glob( File.join( watch_folder, "**", "*.#{type}" ) )
  }
  new_hash = files.collect {|f| [ f, File.stat(f).mtime.to_i ] }
  hash ||= new_hash
  diff_hash = new_hash - hash

  unless diff_hash.empty?
    hash = new_hash

    diff_hash.each do |df|
      puts "Detected change in #{df[0]}, refreshing"
      %x{osascript<<ENDGAME
        	tell application "Safari"
          	set windowList to every window
          	repeat with aWindow in windowList
          		set tabList to every tab of aWindow
          		repeat with atab in tabList
          			if (URL of atab contains "#{keyword}") then
          			  tell atab to do javascript "window.location.reload()"
          			end if
          		end repeat
          	end repeat
        	end tell
ENDGAME
}
    end
  end

  sleep 1
end

Copiez/collez ce script dans un éditeur de texte et enregistrez le dans un des chemins de votre $PATH (ex: /usr/local/bin/watch.rb).
Depuis le terminal, donnez au fichier les droits d'éxécution:

chmod a+x watch.rb

Service:

Télécharger ce fichier dans ~/Library/Services
Faites un clic droit sur un des dossiers que vous voulez surveiller puis Services->Watcher

Source

L'anti-spoiler le plus simple du monde:

2012-09-06T16:41:00+01:00

Sans commentaires tellement c'est simple.JS Bin on jsbin.com

Dashcode et StackLayout

2011-12-11T20:30:00+01:00

Vous avez un mac et vous avez installé Xcode? Bien, donc vous avez sûrement joué un peu avec Dashcode, une interface de création de site webkit/mobile. Premier tuto avec l'élément StackLayout...
Donc un tuto un peu fermé sur ce soft mais bon, c'est moi qui décide.

Dashcode est une interface wysiwyg de création de sites html/css/javascript qui s'installe avec Xcode. Le code qui suit concerne l'élément StackLayout, un snippet qui permet de gérer une pile de vues avec des transitions façon slideshow. Parmi ces transition (fade, dissolve,etc.) la transition slide est la plus prisée mais les réglages par défaut ne permettent pas un glissé de droite à gauche. Le code suivant (sur un évènement onclick) génère un glissement vers la gauche à la vue suivante:

function boutondedroite_onclick(event)
{
   var views = document.getElementById('stackLayout');
   for (var i=0;i<views.object.getAllViews().length;i++)
   {
       if (views.object.getAllViews()[i] == views.object.getCurrentView())
         var next = views.object.getAllViews()[i+1];
   }
   if (views && views.object && next) {
      views.object.setCurrentView(next);
   }
}

Pour inverser le glissement et revenir à la vue précédente il suffit de recopier cette fonction sous un autre nom (boutondegauche_onclick) et remplacer:

var next = views.object.getAllViews()[i+1];

par

var next = views.object.getAllViews()[i-1];

views.object.setCurrentView(next);

par

views.object.setCurrentView(next, 'reverse');

Un orchestre de chambre dans le mac(pc)!

2011-09-05T13:00:00+01:00

Amis mélomanes bonjour. En ces temps de poésie moite et sans don il serait bon de pouvoir inviter chez soi un orchestre classique et s'adonner à la composition de quelque sérénade en attendant que le bateau coule...
Ou comment utiliser un morceau de démo de reason pour composer soi même. Un petit clip rapidos pour vous montrer comment utiliser reason comme banque de sons depuis live.

Afficher votre statut ichat sur votre site. [maj]

2011-09-04T21:50:00+01:00

Certains on peut être eu la curiosité de cliquer dans l'angle en haut à droite du blog et ont atterri sur mon site d'assistance. Si, avec la grosse ampoule qui indique si je suis connecté à internet. Pour que le site soit opérationnel il fallait que le statut sur le site corresponde à celui d'iChat de façon automatique.
J'ai pas mal galéré avant de trouver cette méthode qui n'est peut être pas la plus élégante mais ça fonctionne.
Au début j'ai essayé avec mon statut twitter, puis facebook sans succès. Et puis en regardant dans les préférences d'iChat: Alléluia! Il est possible d'exécuter un script applescript par évènement et donc quand on passe d'online à offline (et inversement).

Sur le site, la valeur du statut était codée en dur à offline (0) par défaut et j'oubliais tout le temps de le mettre à jour. Je l'ai donc modifié pour que cette valeur soit dans un fichier json à part:

statut.js (contenant une simple paire clé/valeur):

{ "value" : "0" }

Vu que je ne connais pas bien applescript j'ai opté pour un solution simple: créer deux scripts contenant une instruction en ligne de commande pour envoyer ce fichier par ftp (un pour online, un pour offline).
Donc voici les deux scripts.
Online:

using terms from application "iChat"
	on login finished
		set Source to "/Users/toto/Documents/mystatus/online/status.js"
		set Dest to "ftp.alwaysdata.com/www/"
		do shell script "curl -u ftpuser:ftppassword -T {" & quoted form of POSIX path of Source & "} " & Dest
	end login finished
end using terms from

Offline:

using terms from application "iChat"
	on logout finished
		set Source to "/Users/toto/Documents/mystatus/offline/status.js"
		set Dest to "ftp.alwaysdata.com/www/"
		do shell script "curl -u ftpuser:ftppassword -T {" & quoted form of POSIX path of Source & "} " & Dest
	end logout finished
end using terms from

Les lignes avant et après le commande shell sont là pour éviter l'erreur fatale 1708 qui vous affiche 15 fenêtres d'erreur en cascade façon windoze ;-)
Tout cela se fait de façon invisible et immédiate of course.

Edition et partage de CSS live - Video

2011-09-03T23:36:00+01:00

Ou comment éditer le css d'un site existant et partager son code avec d'autres pour le valider ou le modifier. En vidéo m'sieur dames! Sit back & enjoy!

Xray - CssTerminal - CssPivot

Service automator bien pratique

2011-08-19T19:04:00+01:00

Vous avez lancé automator (dans le dossier applications) et vous l'avez refermé aussitôt! Dommage… Automator permet, comme son nom l'indique, d'automatiser des tâches dans osx, comme la redimension d'images, l'envoi par ftp,etc.

Voici un petit service qui permet de quitter toutes les applications ouvertes en un clic.

Lancez Automator.
Séléctionnez service
Dans la partie du haut choisissez pas d'entrée dans la liste Réception du service.
Dans la partie action à gauche cliquez sur utilitaires.
Glisser l'action Quitter toutes les applications dans la zone de droite.
Ajoutez (ou non) des applications à ne pas quitter.
Enregistrez votre service: fichier->enregistrer.
Pour (Snow)Léopard enregistrez dans bibliothèque->services
Cliquez sur le bureau (pour activer le finder) et allez voir dans le menu Finder->services

Git à la sauce Mac.

2011-07-22T18:03:00+01:00

Ben voui je suis sur mac maintenant ☺. Ca ne m'empêche pas pas d'utiliser intensément le terminal pour le développement mais comment résister à un soft (gratis) de chez github avec en prime une astuce pour metre à jour son repo git et son site en un clic?

Tout d'abord il faut un compte github mais si vous lisez ça vous en avez déjà un...
Sur un de vos repos cliquez sur l'icone clone in mac. Lors de la première utilisation le site vous propose d'installer le soft. Par la suite il se lancera tout seul.

Je vous laisse découvrir tout seuls (c'est meilleur…) . Quelques sceens:

L'astuce du jour:

Pour synchroniser votre repo et votre site en un clic:

Mettre son site sur github
Le cloner sur son serveur
A la racine du clone ajouter un fichier PHP (ex: pull.php) contenant ceci:

<?php `git pull`;

Attention! Il ne s'agit pas d'apostrophes mais de "backticks" qui ont pour effet d'envoyer une commande terminal depuis un fichier php.

Aller sur la page admin de votre repo puis dans le menu service hooks cliquer en haut de la liste sur Post-Receive URLs et pointer vers le fichier pull.php

Votre site sera mis à jour automatiquement à chaque nouvelle synchro de votre repo.