L'histoire d'Ember.js, le documentaire

Honeypot, vient de mettre en ligne un documentaire racontant toute l'histoire d'Ember.js avec, entre autres, ses deux co-créateurs, Tom Dale et Yehuda Katz. En plus d'être très instructif, cela permet de parler d'un outil qui pour le grand public est assez technique, sans pour autant être ennuyeux.

Ember.js étant un de nos frameworks frontend de prédilection (pour ne pas dire celui que nous préférons à l'heure actuelle !), nous vous recommandons de prendre un peu de temps pour regarder ce documentaire. Cela permet de se rendre compte, que même si Ember est moins "à la mode" que certains autres frameworks, il est là depuis très longtemps, a une communauté très importante, est très utilisé, et promet encore de belles choses (Octane par exemple).

En écrivant ces quelques lignes, la curiosité a pris le dessus et j'ai voulu regarder depuis quand nous travaillons avec Ember.js : notre premier commit sur un vrai projet date du 3 juillet 2012 :)

Le documentaire (en anglais) :

Mettre en place un styleguide dans un projet Django

Chez Naeka, nous avons une affection particulière pour les projets complexes. Un styleguide est donc devenu une nécessité dans de nombreux aspects du développement et de la maintenance de nos applications web. Nous l'utilisons pour les raisons suivantes :

  • ça facilite la communication équipe/équipe et client/équipe,
  • ça liste les composants ré-utilisables de l'application,
  • ça permet de garder une cohérence de l'interface dans notre projet,
  • ça simplifie le développement de nouvelles vues HTML/CSS,
  • ça nous force à standardiser notre code.

Mise en place

Nous créons une URL dans Django pour notre styleguide :

Nous obtenons une URL http://localhost:8000/styleguide accessible en environnement de développement (lorsque DEBUG=True) qui nous permet de visualiser le styleguide depuis le navigateur. Ensuite, nous créons un fichier styleguide.html dans le répertoire de nos templates contenant le code suivant :

Ensuite, nous plaçons notre propre fichier CSS à la place des lignes suivantes :

C'est tout !

Comment ça marche ?

Le code HTML présenté ci-dessus est personnalisé en fonction du projet. Les classes CSS préfixées par …

FeedBack Lastify

Après avoir passé une semaine à tester les APIs Python de Spotify et LastFm, j'ai fini par faire un petit site exploitant ces deux APIs (+ GData et une bonne dose de jQuery) que je vous présente aujourd'hui : http://lastify.dev.naeka.fr/

Ce site n'était pas vraiment destiné à être montré ni même à exister, ce n'est qu'un terrain de jeux, mais au lieu de m'en débarrasser autant m'en servir pour vous montrer ce que l'on peut faire avec quelques APIs Python.

Dans cet article je vais donc vous présenter les deux APIs qui constituent la majeure partie du site :

Spotimeta

Pour télécharger spotimeta : http://pypi.python.org/pypi/spotimeta/

L'aide de spotimeta : http://developer.spotify.com/en/metadata-api/overview/

Spotimeta est une API très simple d'utilisation et il n'y a pas beaucoup de possibilités alors vous aurez très vite compris comment elle marche.

Voici une petite démo qui fera quasiment le tour de l'API :

import spotimeta p = 1 # numéro de la …

Avoir un footer toujours en bas de page

Nombreux sont ceux qui se prennent la tête en positionnant leur footer. Selon la hauteur de votre page mais aussi de votre fenêtre votre footer ne se place pas toujours en bas de votre page.

Sachez qu'il existe une solution pour toujours placer votre footer en bas de page qui fonctionne très bien avec TOUS les navigateurs : CSS STICKY FOOTER

La structure HTML de base :

<div id=`wrap`>
    <div id=`header`>
    </div>

    <div id=`main` class=`clearfix`>
    </div>
</div>

<div id=`footer`>
</div>
</pre>
**Le style CSS à appliquer :**
<pre lang=`css`>html, body, #wrap {
    height: 100%;
}

body &gt; #wrap {
    height: auto; 
    min-height: 100%;
}

#main {
    padding-bottom: 150px;  /* MÊME TAILLE QUE LA HAUTEUR DU FOOTER !! */
}  

#footer {
    position: relative;
    margin-top: -150px; /* VALEUR NEGATIVE DE LA HAUTEUR DU FOOTER */
    height: 150px;
    clear:both;
} 

Et voilà ce n'est pas plus compliqué que ça. Je vous invite à remplir votre page de contenu est de tester en redimensionnant votre page en hauteur vous verrez alors que votre footer sera …

IE 6, Une solution pour la transparence sur les PNG

Malheureusement Internet Explorer 6 ne gère pas la transparence sur les images de type PNG... Assez embêtant me diriez vous ?

Sachez qu'il existe une nouvelle solution pour régler ce problème :

DD belated PNG (Site Officiel ) permet donc de résoudre le problème de transparence de façon très simple via l'utilisation d'un script .js(...)

Télécharger le script PNG FIX

Rendez vous à l'adresse suivante pour obtenir la dernière version : Telecharger DD_belatedPNG

Insertion du script dans votre code

Très simple, il vous suffit d'ajouter les lignes suivante dans votre balise <head></head>

<script src="DD_belatedPNG_0.0.8a.js"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>

Utilisation sur une image transparente

Une fois DD_belatedPNG intégré dans votre code, il ne vous reste plus qu'à ajouter la class png_bg sur vos images pour avoir la transparence. Exemple :

<img class="png_bg" src="mon-image-transparente.png" alt="mon image">

Notez toute fois que dans la cas d'un utilisation pour un background-image le procédé est le même, appliquez la class png_bg à votre div.

Exemple :

<div …