aethernet-blog

[aethernet-blog]

DEV | Automate processes

Today is my weekly tool improvement day.

As a webdev and sysadmin i have to keep all my tools, process and knowledge up-to-date, so ... time to dig.

Last week i found this great presentation about automated the front-end dev workflow and it quite blow my mind so i'll post here some of the great tools i found. Unfortunately i lost the link to that presentation i'll update it here if i found it back.

The first one, is not really a tools but more of a tip :

How to add a javascript build system in sublime text

It's really easy and come quite handy.

The second one is the "network link conditionner" of mac os : 

Mac OS Network link conditionner

Wich let you degrade your internet connection to test your app or website on virtually any type of internet connection. Usefull for you mobile dev.

The third and final one for this batch is Wraith from the BBC.

Wraith is a diff tools for screenshot. It takes screenshots of your page and compare them to previous version to highlight changes. A tool that will help you spot the glitch introduced by your CSS changes in seconds.

Wraith is on github

[aethernet-blog]

ipad | how to get the best experience with displayPad ?

DisplayPad is a great app that turns your iPad in a second ( or third, or fourth or ... ) screen for your mac.

It have some great feature as adding a new mouse which is touch responsive on your screen.

Although when used on wifi you can have some really annoying issue as :

- random disconnection

- lags

- freeze

The disconnection is probably the worse as you'll have a 3 seconds bluescreen on every screen connected, which cut your work even if you was not working on the iPad screen. Also all the windows you had on that screen will come back to your main one...

A great solution i found is to use myWi ( a great thetering app available on Cydia - another good reason to jailbreak ) :

Disconect your mac from airport

Connect your mac and iPad with the usb-dock cable

Configure myWi to share your wifi connection on usb

Connect your iPad to wifi ( if not allready done )

If needed configure your mac to get it's internet from the new cabled network made available ( in most case you don't have to do anything )

Launch displayPad on the iPad

Connect your mac with displayPad

And TADAAAA you get a super stable, reliable and quite fast displayPad experience.

It's not as fluid as having a screen connected through hdmi, dvi, displayport or vga but it's realy usefull to keep your eye on something that does not change too fast.

The same trick can be used in other situation where network lag is a big problem such as midi over wifi ...

[aethernet-blog]

works | update from the work part of my life

On peut pas dire que ce blog soit très régulier, mais à ma décharge, il n'est pas non plus très lu...

Quoiqu'il bénéficie tout même d'un effet longue traine, les articles enfuis au fond du blog sont encore pas mal lu, et surtout aucun article ne sort vraiment du lot, ils bénéficient tous de leurs quelques lectures, preuve si il en fallait, que ces archives servent quand même un peu...

Mais ce billet est là pour parler un peu de mon travail de ces derniers mois :

Redesign du site de l'entonnoir :

On peux pas vraiment dire que c'est terminé, mais c'est un processus long, le magazine C4 c'est transformé en ligne en le laboratoire l'entonnoir.org.

Redisign du site d'Herrmutt Lobby :

Herrmutt Lobby, collectif de musicien électronique et de développeur, prépare les instruments de demain. Ou comment jouer de la musique électronique plutôt que de la programmer et la faire jouer à des machines.

Ca se passe sur HerrmuttLobby.com

Préparation de la Saponiere.com et petite fabrique artisanale de savon :

Depuis quelques mois, je suis devenu savonnier. La saponiere, la savonnerie artisanale que je partage avec Skaïa [ also like sheep ] à produit une dizaine de kilo de savon prototype et travaille au marketing et aux certifications pour le mettre officiellement en vente...

Stay in touch with la saponiere on lasaponiere.com

3D printing / polargraphing / fab@home

Ca fait déjà un moment qu'on y travaille, avec Karl Russel [ caroussel production / decollagen.be ], à notre MicroFabLab à la maison. Et bien ça commence à tourner avec une PrintRBot presque fonctionnelle ( encore un peu de réglage à faire ).

En parallèle avec dJay on a monter un polargraph, sorte de traceuse grand format à coordonnée polaire. Je lui ai développé un contrôleur en python. Et projette de faire plein de jolie choses avec mais ... à chaque jour suffit sa peine !

Design du site AlsoLikeSheep

Jenny Clash & Skaïa produisent depuis quelques temps des vêtements et des accessoires de mode, il est temps qu'elle aillent leur propre vitrine sur internet, ça s'appelle AlsoLikeSheep et ça arrive très très vite !

InfoLab / production infographique

Profitant du laboratoire du quotidien qu'est l'entonnoir, Karl Russel et moi même nous lançons dans le deep data inspection. Faites chauffer les tableurs, nous voulons comprendre le monde !

xGames

Un peu de prod de jeu vidéo indépendant mais c'est encore un work in progress vous aurez des nouvelles plus tard.

et puis on s'étonne que je sois fatigué :)

[aethernet-blog]

ide | coda vs sublime text

Since i do web i tried a lot of ide and text editor.

One stands above all the other when talking about html / css and js, it's coda from panic.

It has everything you'll need to make great webpages.

But recently i came to sublime text. And the truth is ... it rocks ! The only thing i'm not very satisfied with is the plugin for ftp/sftp wich has not a realy usable tree for remote editing. All the rest is just ... well ... sublime !

The best part of sublime is the plug-ins system and the great plugins out there like "fetch" that will help you get the last version of any dependency you'll allways use, like jquery, html5boilerplate, ...

[aethernet-blog]

e-learning | first html on paper

Pour la première fois, j'écris de l'html sur papier ... C'est le premier exercice de la school of webcraft et voici le résulat :

Bon ok, j'écris mal, et en plus j'écris sur du papier virtuel avec une palette graphique...

[aethernet-blog]

e-learning | coursera, khan ac, p2pu and the school of webcraft

Si vous lisez ce blog vous vous souviendrez peut-être des cours en ligne donné l'année passée par certain professeur de l'université de Stanford.

Le projet pilote proposait de suivre des cours sur l’intelligence artificielle, l'apprentissage aux machines ainsi qu'une initiation aux bases de données.

Le projet est désormais solide et propose plus d'une centaine de cours donné par des professeurs venant de plus de 10 universités différentes dont deux ou trois hors états-unis et continue de grandir. Son nom est devenu coursera.

L'approche de coursera est une version mise à jour de l'approche universitaire, et c'est très bien. Mais les internets ont permis le développement d'autres type d'école en ligne tel que P2PU ( littéralement l'université de pair à pair ) qui favorise l'apprentissage horizontal.

Il faut noter aussi la merveilleuse Khan Academy qui propose d'apprendrepresquetout gratuitement, et qui se trouve être d'une grande aide quand vous manquez de background pour suivre un cour sur coursera ( des lacunes en math par exemple ).

Aujourd'hui je suis inscrit dans 5 cours sur coursera et m'en vais aiguiser mes web skills dans la school of webcraft de mozilla sur P2PU.

[aethernet-blog]

ipad | midi over 30pin dock cable

Avec la sortie aujourd'hui de l'application "beatsurfing" d'Herrmutt Lobby ( http://beatsurfing.net ) - app qui fait entrer le monde de la musique électronique dans le 3ième millénaire soit dis en passant. Je me demandais si il était possible de brancher l'ipad au mac ... simplement.

L'idéal c'est bien sur d'utiliser le cable dock ( connecteur 30pin, le cable qui permet de charger l'ipad ou de transférer des photos ). Mais voilà Apple est pas très partageux avec ses spécifications et ses sdk et pour faire passer le midi sur l'usb ils ont simplement dis non ...

Alors de quoi est-ce qu'on dispose comme solution ?

Le wifi :

En créant un réseau wifi entre l'ipad et le mac (en adhoc) ou en les connectant tout les deux sur le même réseau (via un routeur), on peut profiter assez naturellement des fonction réseau de coremidi ... C'est un bon début, c'est rapide et pas cher, mais il a un soucis - et de taille - la latence ! Qui n'est pas super élevée mais quand même un peu trop et surtout qui BOUGE ! Si elle était stable on pourrait la compenser en jouant un peu plus vite mais là c'est juste impossible à prévoir...

Le midi "din5" :

Le din5 c'est le connecteur midi "old school", une solution fonctionnelle mais un peu bricolage, c'est de sortir d'une interface midi spécialement conçue pour l'ipad (ou de brnacher une interface usb générique dans un caméra connector kit), puis rentrer dans une interface midi/usb pour le laptop ... ça fait 2 ou trois interfaces à chainer ... c'est quand même un peu laid ...

le 30 pin dock connector :

Voilà probablement la découverte du jour, on savait déjà que l'on peut envoyer le midi sur le réseau en profitant de core midi. Il ne restait qu'a créer du réseau à travers le câble usb/dock entre le mac et l'ipad pour que ça fonctionne... et c'est là qu'intervient ... MyWi 5. MyWi est un soft qui permet de faire du "thetering" - pratique qui consiste à utiliser son forfait internet mobile et de le partager à un pc ou un autre device. Or pour faire le thetering via USB MyWi ne fait rien d'autre que de créer une connexion réseau entre l'ipad et l'ordi via le cable usb... Bingo...

Pour que ça marche vous aurez besoin :

d'un ipad JAILBREAKE ( c'est facile à faire et ça a plein d'avantage, chercher sur google ... )

de MyWi (19.99$ sur le cydia store)

d'un mac ( ou d'un pc windows avec rtpmidi installé )

d'un cable usb/dock

d'itunes

d'un logiciel qui comprends le midi

La config est super simple, branchez tout, lancer itunes, lancer mywi, activer le thethering usb, ensuite configuré votre réseau midi comme vous le feriez avec du wifi.

Je ferai un tuto plus détaillé et une traduction en anglais dans les prochains jours.

En attendant gardez la pointe !

[aethernet-blog]

firefox | extention optimization

Je suis un grand fan de la première heure de firefox !

Tout les quelques mois je tente un passage vers chrome mais rien n'a faire, je revient toujours vers le renard.

La modularité est probablement le point le plus intéressant dans firefox mais elle a un cout ! Selon mozilla chaque plugin installé ajoute autours des 10% au temps de lancement du navigateur. Aussi chaque extension charge un peu plus la machine.

Le temps de lancement n'est pas un grave problème pour moi étant donné que je garde mon mac en veille la plupart du temps (un reboot tout les ~10 à 20 jours) et utilise la commande #purge d'onyx de temps à autre pour nettoyer complétement la ram ( mais c'est une autre histoire ). Par contre la charge processeur et l'usage de la mémoire sont un réel problème étant donné qu'il n'est pas rare de voir la charge de ma machine passer au dessus des 3 avec *juste* firefox qui bloque tout le système.

C'est bien évidement inadmissible !

J'ai donc investigué - et trouvé - quelques moyens d'optimiser mon navigateur.Le premier et le plus évident est de désactiver un maximum d'extension (et de plugins). En fait tout ceux qui ne servent pas !J'ai gagné énormément en réactivité en désactivant des plugins tel que "developper tools" (firebug suffit à la plupart de mes besoins), "downThemAll", "feedly" (je ne lis plus que sur tablette ou smartphone), "gracemonkey", "zementa", ...Ensuite la seconde grande nouvelle à été la découverte de cette page : http://kb.mozillazine.org/Problematic_extensions qui, comme son nom l'indique, liste - une partie - des extentions connues pour poser problème avec le moyen de le résoudre.C'est comme ça que j'ai découvert qu'il était intéressant de désactiver l'option d'"AdBlock Plus" : "afficher une étiquette pour le contenu flash et java".J'y ai également découvert que - ironie du sort - fasterfox avait une fâcheuse tendance à ralentir voir à causer des freeze de firefox sous certaine configuration. Enfin j'ai découvert tout les bons conseils de la page http://www.webgapps.org/tutorials/firefox/optimization/ qui liste un paquet de trucs et astuces pour une navigation plus rapide et un navigateur plus véloce. Notamment le nettoyage des bases de données sqlite de firefox ( dont ignorait parfaitement l'existence ). Qui pointe aussi les deux excellentes ressources que sont http://kb.mozillazine.org/Knowledge_Base et http://www.tweakguides.com/Firefox_10.html.

[aethernet-blog]

dataset | belgian open data initiative

Voilà que je découvre que le gouvernement belge distribue une partie de ses datas.

Ca se trouve sans surprise sur http://data.gov.be.

Il n'y a pas grand chose, mais c'est un début.

[aethernet-blog]

fonts | font in use

Pour voir plein de typos dans leur environnement naturel : fontsinuse.com

[aethernet-blog]

css | center a "position: fixed" element

Probablement le truc le plus utile que j'ai après ces dernières 24h...

Si vous placez un élément en "position: fixed" et que vous le retirez dès lors du flux normal, les propriétés "margin-left: auto; margin-right: auto;" n'auront plus leur effet magique de centrage ...

Par contre il suffit d'ajouter : "left:0; right:0;" à l'élément, et voilà que les margin auto fonctionnent à nouveau :)

Bingo !

[aethernet-blog]

colors | 25 super nicely colored website

C'est toujours bien d'annoncer des listes dans des blogs parait-il, alors en voici une :

25 sites avec des très jolies couleurs !

et j'en profite pour mettre à jour un vieux post qui liste les outils en lignes pour créer et gérer des palettes.

[aethernet-blog]

webdev | jquery debuging extension for firebug

Je vous parlais il y a quelques jours de XRefresh de binaryAge, eh bien ces petits malin n'ont pas fait que ça ... et ben non !

Ils ont aussi écrit un débuger pour JQuery sous forme d'extension pour firebug. Ca s'appelle firequery. 

Et ce n'est pas tout ils ont aussi fait une autre extension pour ajouter de la coloration syntaxique dans firebug, et ça s'appelle firerainbow.

Merci binary Age de nous rendre la vie si belle :)

[aethernet-blog]

diy | drone diy

Faire sois même un drone, non seulement c'est possible mais en plus c'est fun et utile... et voilà toute une communauté qui y est dédiée : diydrone.com.

[aethernet-blog]

webdev | autorefresh when coding

How cool would it be ?

Uh ? 

Wai combien ce serait cool que pendant que tu code un site web en dual screen, ton second écran avec ton navigateur se refresh tout seul chaque fois que tu fais pomme-s (ou ctrl-s si t'est sous linux) dans ton IDE ?

Et bien c'est possible grâce au gars de chez binaryAge et de livereload.

LiveReload est basé sur les principes développé par binaryAge avec leur extension XRefresh. Mais LiveReaload pousse le bouchon encore un peu plus loin en permettant d'ajouter du pré-processing comme la possibilité de compiler le code LESS ou d'autres du genre.

BIM c'est la fête.

Même avec un seul écran ça reste du pur bonheur !

[aethernet-blog]

os x | les indispensables

Voici trois software dont je ne peux me passer sous mac os x :

Dockless

Quicksilver

AppCleaner

J'aime avoir un doc vide. C'est pratique car il ne représente plus que les applications qui sont lancées, et permet donc de facilement passer de l'une à l'autre.

Quicksilver permet sur un raccourci clavier d'ouvrir un lanceur (un peu comme le fait alt+f2 sous gnome) qui lui même peux lancer des softs ou exécuter des actions.

C'est un minimum pour tout power user os x.

Dockless quand à lui permet de masquer les applications lancées, et de les faire disparaitre du dock, mais plus intéressant il les fait aussi disparaitre de la liste de switch (pomme + tab). Du coup on peut facilement virer tout ce qui ne sert à rien hors du chemin. Comme Quicksilver... qu'on ne lance jamais à partir de son icone, mais bien à partir du raccourci clavier... ou mamp, ou hardwaregrowler, ou adium (qu'on a bien sur masqué derrière un bord actif ;) )

Enfin AppCleaner, lui sert à désinstaller "proprement" des applications. C'est super simple de supprimer un soft sur mac os, tout est dans le bundle, il suffit de le glisser sur la corbeille... oui ... mais ... ça ne supprime pas les plugins et outre fichier de préférences qui vont se mettre dans le /Libraray/ ou dans ~/Library... et c'est là qu'appcleaner entre en jeux, c'est aussi simple que de glisser dans la corbeille, mais ça supprime tout les autres fichiers en même temps et on garde son mac bien propre :)

Bref trois indispensables ...