Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

October 31 2016

Happy Halloween!

August 16 2015

Lazy Sunday morning. #kittens #sleep

August 14 2015

Peach et Banga

August 13 2015

Banga
Ice-Tea
Banga et Ice-Tea
Ice-Tea dans une chaussure
Ice-Tea

August 09 2015

Banga et Ice-Tea

July 08 2015

Traduire ses routes dans Rails

Photo de portes de Fushimi Inari-taisha

Les URLs de votre site sont visibles et méritent autant d’attention que le reste de votre interface. Dans ce cas, pourquoi avoir des chemins en anglais uniquement alors que le reste de votre site est traduit ?

https://monsite.com/en/books/1/edit
https://monsite.com/fr/books/1/edit
https://monsite.com/es/books/1/edit

Je trouve que les adresses suivantes, traduites, sont plus élégantes et compréhensibles par tous :

https://monsite.com/en/books/1/edit
https://monsite.com/fr/livres/1/éditer
https://monsite.com/es/libros/1/editar

Mieux, non ?

route_localize

Pour avoir des URLs pareilles avec Ruby on Rails sans pour autant tout dupliquer, j’ai développé la gemme route_localize.

Une fois installée, il suffit d’entourer les routes à traduire dans config/routes.rb :

scope localize: %w(en fr es) do
  resource :books
end

Vous pouvez ensuite traduire les chemins que vous voulez dans vos fichiers de localisation :

fr:
  routes:
    books: livres
    edit: éditer

Et voilà ! Magie !

Si vous souhaitez faire passer vos utilisateurs d’une langue à l’autre sur votre site un petit helper prends la langue voulue et vous retourne le chemin traduit.

July 06 2015

Enregistrer la langue d’un utilisateur avec Devise

Daim photographié

J’ai créé une petite gemme Ruby. Son petit nom c’est devise-track_locale. Si vous utilisez Ruby on Rails et Devise sur un site multilangue, cela vous permets d’enregistrer la dernière langue utilisée par l’utilisateur, automatiquement.

C’est un module Devise, donc son installation est aussi simple que d’ajouter :track_locale dans la liste de modules Devise et un champ locale sur les utilisateurs.

Ce n’est pas grand chose, mais plutôt que de garder cette fonctionnalité sur un site j’en ai fait une petite librairie externe, réutilisable, open-source, testée. Et je compte bien en faire autant pour tous ces petits développements qui sortent des fonctionnalités du cœur de mes sites.

April 18 2015

Gudetama, the lazy egg
Reposted byliwq liwq

March 17 2015

Ember en 2015

Trois choses à retirer de la Keynote d’ouverture d’EmberConf 2015 à propos du framework JavaScript Ember :

EmberJS Logo

V2

Toutes les nouvelles features de la version 2 d’Ember sont déjà dans la version 1. Cette nouvelle version va juste retirer les warnings. Du coup la mise à jour d’Ember peut se faire de façon beaucoup plus graduelle et rétrocompatible. Si on compare ça à Angular, la version 2 ne sera pas du tout compatible et introduit énormément de nouvelles façons de faire d’un coup.

Glimmer

Leur nouveau moteur de templates d’Ember, nommé « Glimmer » est au même niveau que React en terme de performances. Un des gros plus de React est son moteur de diff qui permets de minimiser les accès au DOM. Glimmer permets la même chose dans Ember mais il n’y a rien à changer aux templates normaux (handlebars) ou à construire du DOM à la main. Plutôt que de faire du diff sur chaque élément d’un DOM virtuel, il ne fait du diff que sur les parties à l’intérieur des {{}} de handlebars. Il reste du travail pour le rendre rétrocompatible avec les anciennes versions d’Ember, mais le travail avance sur is-ember-fast-yet.firebaseapp.com.

Fastboot

Enfin, Fastboot est le moteur de prérendu d’Ember. Cette application Node prends une application Ember « Single Page App » et génère l’HTML nécessaire pour la servir avec l’HTML déjà tout fait pré-rendue aux navigateurs, en appellant votre API via HTTP si nécessaire. Le premier chargement de vos applications devient beaucoup plus rapide, comme une application côté serveur uniquement. Et ce, encore une fois, sans changer votre façon de travailler avec Ember.

January 05 2015

Peach et Sunny
A lighthouse boat in front of Chrisitian IV's Brewery (the largest tiled roof in northern Europe) in Copenhagen.

November 20 2014

Au bureau j'ai gagné le trophée de la blague pourrie. Et le trophée est magnifique.

September 04 2014

Rails et Emails

parisrb

À la dernière conférence Paris.rb je présentais 6 choses à arrêter de faire si vous envoyez des emails avec votre application Ruby on Rails.

Mes slides sont en ligne et voici mes 6 points :

  1. Arrêtez de les envoyer avec vos contrôleurs : crééez un contrôleur pour s’occuper de prévisualiser vos emails ou utilisez ActionMailer::Preview de Rails 4.1
  2. Arrêtez d’inliner les CSS à la main : utilisez la gemme premailer-rails
  3. Arrêtez de recharger votre navigateur : utilisez la gemme rack-livereload
  4. Arrêtez d’envoyer vos emails tout de suite : utilisez une système d’envoi en tâches de fond comme sidekiq et utilisez deliver_later disponible dans Rails 4.2.0.beta1
  5. Arrêtez d’envoyer des emails en développement : utilisez la gemme letter_opener
  6. Arrêtez de configurer vos URLs : utilisez ma gemme action_mailer_auto_url_options, disponible sur Github et publiée sur Rubygems depuis aujourd’hui !

À ces 6 raisons, Loïc Boutet ajoute dans les commentaires à la fin une 7ème chose à ne plus faire lorsque vous envoyez des emails avec votre application Rails : configurer son serveur SMTP. Utilisez plutôt un service externe comme MailJet ou Mandrill.

PS : voici une photo de mon chat :

Peach is fed up with the bubbles

August 09 2014

Comment j’ai rendu mon blog responsive

L’HTML et le CSS de ce blog ont été écrits en 2006. En années Internet c’est comme si je l’avais fait y a 3042 ans.

À cette époque l’iPhone n’existait pas encore et on ne se préoccupait pas de savoir si un site fonctionnait sur son assistant personnel ou pas. La première mention de Responsive Web Design date de 2010 (il y a 520 ans environ). Essentiellement il s’agit de transformer un site pour qu’il puisse s’adapter de façon fluide à toutes tailles d’écrans.

Transformer quelque chose qui n’a pas été pensé mobile first n’est pas chose facile, alors un vieux site au CSS croupissant, cela paraît insurmontable.

Pourtant, il ne m’a fallu ajouter que les quelques règles de style suivantes :

body { max-width: 55em; } /* (au lieu de width: 55em) */
img { max-width: 100%; }
textarea { max-width: 100%; }

Et l’HTML :

<meta name="viewport" content="width=device-width" />

Capture de Sunfox.org sur un Nexus 5

Et voilà !

Si c’était facile c’est parce que le site lui-même était très simple, sans grille, en une seule colonne, avec peu de largeurs fixes. Je n’ai eu qu’à régler le problème de largeur maximale de la page et profiter du fait qu’HTML et CSS sont flexibles par défaut.

Le tout premier site, à l’origine du World Wide Web, a été remis en place à son URL originale. C’est un site encore plus simple. Sa simplicité fait qu’il fonctionne très bien sur un smartphone, de façon flexible, sans avoir à zoomer, sans avoir à ajouter des styles CSS ni des breakpoints.

Tout ça alors qu’il a été créée en 1989 (il y a 20 000 années Internet environ).

Capture d'écran du tout premier site Web, sur un smartphone

Pour avoir des sites future-friendly qui résistent aux temps et aux technologies, faites comme ce dernier, adoptez la simplicité.

August 06 2014

En CSS, n’utilisez que des classes

Photo de la mer

CSS permets d’utiliser plein de sélecteurs raffinés pour ajouter du style à vos éléments. Je soutiens qu’il ne faut utiliser que le sélecteur de classes (.foo).

Pour que vos styles soit réutilisables et ne soit plus aussi liés à votre HTML fini donc d’utiliser des sélecteurs d’identifiants, de balises, d’attributs ou de parenté.

Voici pourquoi.

Identifiants

#content { color: red; }

Les sélecteurs par ID vous empêchent de réutiliser vos styles, tout simplement.

Ils ont un autre inconvénient important : leur spécificité est extrèmement importante. C’est le début d’une lutte pour la spécificité si on veut remplacer des styles. On se retrouve donc des sélecteurs longs et complexes .page.about-page #content.important { color: red; }.

Balises

h1 { color: grey; }
.side ul { margin: 0; }

Ces sélecteurs sont trop généralistes. Si jamais vous utilisez un h1 autre part sur votre site ou que vous voulez une liste différente dans .side vous devrez commencer par annuler tous les styles.

Conséquence : vos CSS seront plus lourdes, se répèteront, vos styles ne seront pas indépendants les uns envers les autres et le tout sera plus difficiles à maintenir à l’avenir.

Attributs

[disabled] { opacity: .5; }
[data-triggered="true"] { background: green; }

Comme ces attributs sont sémantiques ils souffrent du même problème que les balises, impossible de réutiliser les styles associés sur d’autres éléments. Par exemple un bouton peut être disabled mais pas un lien qui aurait un style de bouton.

En terme de performances également : pour ne pas ralentir les pages avec beaucoup d’éléments DOM il ne faut pas utiliser les attributs seuls mais toujours y coller au moins une classe, un nom de balise ou un sélecteur enfant (.btn[disabled], input[disabled] ou [disabled] .btn). Raison de plus de les éviter.

Parenté

.about-page .sidebar {}
.sidebar + .article {}
.article > div {}

Les sélecteurs descendants, adjacents et enfants sont également à éviter car ils ont une très grande dépendance sur votre HTML. Cela veut dire que changer l’HTML implique de changer votre CSS. Ils seront également très peu réutilisables.

Universel

* { margin: 0; }

En plus d’être un trou à performances, ce sélecteur touche trop d’éléments et oblige souvent d’écraser les styles appliqués. Cela n’aide pas à ce que le CSS généré soit réutilisable facilement, ou qu’il n’impacte pas le reste du site.

Classes

.foo {}

Les classes en revanche peuvent être réutilisées, déplacées et ne dépendent pas de la sémantique de votre document.

En utilisant uniquement des classes vous pourrez réutiliser vos styles quelle que soit la sémantique. Votre .cool-bloc pourra être appliqué sur une div, une section, un form ou une nav selon l’utilité de ce bloc.

August 03 2014

Pêche à Pied(s)
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl