Sunfox

Arel through examples

9 mars 2021 — active record, rails, ruby, sql, wev development

When a database query cannot be described using Ruby on Rails’ short ActiveRecord syntax, consider building your queries using Arel instead of going for raw SQL strings.

This has the following advantages:

• Escaping by default: this helps not end up with SQL injections. We don’t like those.
• Full names: using "users"."email" instead of email in your queries helps you be future-proof by making queries that won’t break when you merge queries together or add columns with conflicting names.
• Composable: Arel expressions allows you to mix SQL commands as Ruby objects.
• Uniform queries: it ensures that the generated SQL always looks the same. For example "users"."email" ASC instead of email asc. This makes it easier to search through logs and can help caching mechanisms.

Actor

18 avril 2020

I created a Ruby gem called Actor. It helps you harmonize your application’s service objects.

Service Objects?

Service objects are a way of making your web applications grow in complexity while keeping your controllers and models thin. For that you’d create classes that represent your actions, for example, CreateComment, PlaceOrder, DestroyUser, etc.

At the start, these actions might hold very little code and look a lot like a regular controller. But as your app grows, you’ll realize that something simple like creating a comment can turn into a serie of actions:

• creating a record in the database,
• checking the contents for spam or duplicates,
• updating counters and cache keys,
• sending email or Slack notifications,
• logging the action to another system,
• triggering a job to translate the contents,
• etc.

These actions deserve a way of being represented as first-class citizens in your application. That’s where actor comes into play!

Comment je travaille

10 mai 2019 1 commentaire — bienveillance, management, revue de code, valeurs

Voici un mode d’emploi sur mon travail en tant que Lead Développeur à KissKissBankBank.

Même si l’exercice est un peu étrange, l’idée derrière l’écriture de ce « Manager README » est de partager mes valeurs et mes attentes afin d’être plus transparent et de mieux travailler ensemble. Allez, c’est parti.

Ember en 2015

17 mars 2015 — ember, javascript, webdev

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

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.

Suite de l’article…

Rails et Emails

4 septembre 2014 2 commentaires — chat, emails, gem, github, paris, peach, rails, ruby

À 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.

Suite de l’article…

Comment j’ai rendu mon blog responsive

9 août 2014 5 commentaires — css, future-friendly, html, web

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 il 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.

Suite de l’article…

En CSS, n’utilisez que des classes

6 août 2014 2 commentaires — class, css, selectors

CSS permets d’utiliser plein de sélecteurs raffinés pour ajouter du style à vos éléments. Je soutiens qu’il faut éviter autant que possible d’utiliser quoi que ce soit d’autre 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.

Suite de l’article…

Retrouver les clefs de localisation facilement avec Rails

17 juillet 2014 3 commentaires — i18n, rails, ruby, webdev

J’utilise Locale avec Ruby on Rails pour permettre à n’importe qui dans l’équipe de modifier les textes d’un site quelle que soit la langue.

Néanmoins, ce n’est pas évident pour celui qui n’a pas le code sous les yeux de retrouver quel texte correspond à quelle clef.

Suite de l’article…

ActionMailer n’aime pas vos URLs (par défaut)

14 juillet 2014 — rails, ruby, sécurité, webdev

Faire un lien dans un email dans une application Ruby on Rails devrait être aussi simple que de faire un lien dans le reste de l’application, non ?

Suite de l’article…

Liens de partage sans JavaScript vers Facebook, Twitter, Google Plus, Pinterest et email

6 février 2014 8 commentaires

Parce que vous voulez inclure des liens de partage sans que ça ne vienne importer 1 Mo de JavaScript sur votre page, voici des liens de partages. Sans balise script. Rien que des liens. Simple.

Ne pas oublier d’URL-encoder chaque paramètre, comme dans les exemples.

Suite de l’article…

Favicon dynamique

16 juin 2013 1 commentaire

Sites sans favicon : Boo!

Le favicon est un endroit assez délaissé dans une page Web alors que c’est parfois la seule indication visuelle permettant aux utilisateurs de de se retrouver dans ses onglets.

Edith

Sur Edith j’ai choisi de représenter la page en cours directement dans le favicon, en le mettant à jour à chaque caractère tapé.

favicon qui change à la volée sur Edith

JavaScript

Trop facile.

1. Créer un canvas de 16×16 et colorier ses pixels via JavaScript
2. Appeler sa méthode toDataURL() pour transformer le canvas en data:image/png;base64,iVBORw0…
3. Placer dans le DOM dans le <link rel="icon" href="…" /> de la page en cours.

Noter que pour qu’il soit mis à jour instantanément Firefox a besoin qu’on supprime et qu’on recréer la balise link.

Exemple dans le CoffeeScript utilisé sur Edith.

Can I Use?

Fonctionne là où canvas et les datauri fonctionnent, soit IE9+.

Erreurs 404 dynamiques dans Rails 3

14 novembre 2012 — 404, errors, exceptions, rails, ruby

Utiliser un fichier statique public/404.html dans Rails est très vite limitant. Si on veut utiliser le layout normal de l’application, des informations dynamiques comme des menus, le nom de l’utilisateur courant ou un formulaire de recherche il faut rendre ces erreurs dynamiques.

Pour ça il faut intercepter deux erreurs qui produisent des 404 : les infos nos trouvées dans la base via ActiveRecord::RecordNotFound et les routes qui n’existent pas avec ActionController::RoutingError.
Suite de l’article…

May the fourth be with you

5 mai 2011 1 commentaire

Pour continuer de célébrer le jour de Star Wars voici de gros boutons de sons en HTML5 grâce à bigbuttons :

Suite de l’article…

Quand ne faut-il pas mettre en ligne un site Web ?

9 décembre 2010 18 commentaires — bonnes pratiques, parisweb, performances, serveurs, webdev

Il y a mieux à faire
les vendredis…

• Le vendredi
• Le soir
• À un pic de fréquentation

Merci.

Calendriers de l’avent pour artisans du Web

2 décembre 2010 3 commentaires — calendrier, html, html5, javascript, noël, performance, typographie, veille

Un mois à 24 jours

Ça y est, décembre est lancé. Et avec les premières neiges on a envie de rester au chaud et de lire des bons articles qui parlent du Web, n’est ce pas ?

4 calendriers avec des perles à découvrir chaque jour de décembre :

• 24ways remets ça pour la sixième année : des articles de haute qualité qu’on attends toute l’année. Ils contribuent à rendre l’hiver moins dur.
• HTML5 Advent : des démos HTML5 pour en avoir plein les yeux.
• Adfont Calendar : mateurs de typographie, sous chaque case se cache une police d’écriture proposée par FontDec.k
• Performance Calendar : et oui, même les performances Web ont leur calendrier.

Typographie, HTML5 et performances : les sujets chaud du Web de cette année sont là pour se tenir au chaud cet hiver jusqu’à Noël.

Raccourcis clavier pour changer d’onglet dans TextMate

16 novembre 2010 — clavier, os x, software, textmate

La mise à jour 1.5.10 de TextMate change les raccourcis pour aller à l’onglet précédent et suivant. À la place de ⌥⌘← et ⌥⌘→. Ils sont maintenant ⌘⇧⌥5 and ⌘⇧⌥° sur un clavier français.

La raison pour ce changement est que c’est la façon de changer d’onglet dans Safari. Je sais pas vous mais je préfère les raccourcis précédents et ceux de Firefox…

Changez les raccourcis en allant dans Préférences Système, Clavier, Raccourcis clavier, Raccourcis d’applications et ajoutez vos raccourcis. Choisissez l’application Textmate et entrez les titres de menu « Next File Tab » et « Previous File Tab ».

Et pour couronner le tout, désindenter un bloc de code avec ⌥⇧↦ ne fonctionne plus pour les claviers français à cause d’un bug. Pour le réparer avant d’attendre la prochaine mise à jour ajouter "~$\t" = "shiftLeft:"; dans /Applications/TextMate.app/Contents/Resources/KeyBindings.dict

Après cette mise à jour les développeurs de Textmate se sont « rendus compte que tout le monde n’utilisait pas un clavier US » et ont donc remis les raccourci précédents ainsi que réparé le second bug d’indentation. Sigh.

N’utilisez plus « www »

15 novembre 2010 14 commentaires — domains, uri, url, web, www

www

Pourquoi ne plus utiliser « www. » quand on donne un lien vers un site :

• on dit « va sur facebook.com » et pas « va sur www.facebook.com »
• www ne sert à rien techniquement
• www est difficile à dire
• on sait que c’est un site Web sans ajouter www
• l’adresse devient plus longue
• il faut en choisir un des deux et le garder pour des raisons de référencement et de performances Web
• on ne mets jamais de www devant les sous-domaines, qui sont pourtant aussi sur le World Wide Web (images.google.com, dev.sunfox.org, …)
• les sites qui s’internationalisent mettent souvent un pays à la place (fr.msn.com, fr.wikipedia.org, …)
• www n’existe que pour de vieilles raisons historiques

« Le World Wide Web est la seule chose que je connaisse pour laquelle la version plus courte est trois fois plus longue à dire que l’expression entière. » Douglas Adams

Quelques sites qui les retirent tout le temps :

• twitter.com
• cs5.org
• rapidshare.com
• thepiratebay.org
• pitchfork.com
• posterous.com
• digg.com
• github.com
• tinyurl.com
• no-www.org

Un site qui en mets deux :

• www.www.arson-news.com

La puissance du texte sur le Web

10 novembre 2010 1 commentaire — paris web, référencement, texte

Jean-Marc Hardy

Mon résumé de la conférence sur la puissance du texte sur le Web à Paris Web 2010 par Jean-Marc Hardy.

Le texte reste maître à bord

Même si une image vaut mille mots on la compte tout de même en mots

Le référencement passe forcément par du texte.

Le texte attire plus l’attention que les images. Le texte est la première chose vue par l’œil dans les premières millisecondes. Les publicités textuelles de Google Ads fonctionnent mieux que les images.

Le texte reste la meilleure façon d’inviter au clic. Changer un bouton Continue en Check availability donne +230% de conversion.

Quelques bonnes pratiques

• Pas de jargon, utiliser les mots des gens. Par exemple :
  « Low fares » 40 000 recherches
  « Cheap flights » 25 000 000 recherches.

• Ne pas utiliser des liens/boutons au libellé générique (cliquez-ici, continuer…)

• Les 11 premiers caractères d’un titre sont les plus lus, donc les plus importants

• Coller aux recherches ciblées qui intéressent plus les visiteurs et où il y a moins de concurrence.

• Utiliser le moteur de recherche interne du site pour trouver les mots clefs importants.

• Dans les titres utiliser un mot clef générique puis la marque, par exemple « Video Technology – Adobe ».

• Se focaliser sur les deux premiers mots des titres.

• Utiliser des chapôs, il sont très lus (30-50 mots maximum).

• Mettre des légendes sous les images.

• Utiliser les mots pour rassurer, comme Amazon qui utilise comme intitulé de lien « pourquoi cette opération est sans danger » plutôt que « conditions d’utilisation ».

• Garder une cohérence syntaxiques dans les menus, ne pas mélanger verbes et questions.

Évangélisation

8 novembre 2010 2 commentaires — agence, communication, cosmic, emails, évangélisation, paris web, standards

Revenu de Paris Web 2010 remonté à bloc je fais profiter mon agence des conférences auquel j’ai assisté.

Pour ça j’envoie des résumés des conférences les moins techniques par email à toute l’entreprise.

Faites-en autant car ça permet de :

• distiller les bonnes pratiques pour qu’elles rentrent petit à petit
• faire comprendre pourquoi certains choix techniques sont si importants (« on ne peut pas tout faire en Flash ? »)
• donner aux commerciaux les clefs — et les chiffres — pour justifier les choix techniques auprès des clients
• valoriser notre métier en montrant son étendue et sa complexité
• montrer la qualité de ces conférences et l’importance d’y être envoyé régulièrement

Et par dessus tout ça me sert de base pour faire quelques articles sur mon blog.

Ne faites qu’une version d’un site Web

6 novembre 2010 6 commentaires — accessibilité, articles pour cosmic, firefox, mobile, mobilité, paris web

Un responsable accessibilité chez Adobe ??!1

Mon résumé de la conférence Paris Web 2010 sur la Conception Universelle de Matt May, responsable accessibilité Adobe.

Parce qu’il y a beaucoup :

• de type d’écrans qui accèdent au Web (ordinateurs, ipads, ipods, téléphones simples, télévisions, …) et qu’il va y en avoir de nouveaux l’année prochaine
• de limites humaines permanentes (handicap), temporaires (plâtre) ou situationnelles (dans un train bruyant)
• de robots (moteurs de recherche, syndication, etc.)

On ne peut pas créer une version par support, une version par handicap.

Il faut donc tenter d’aller vers une conception universelle, terme un peu utopique, plus large qu’accessibilité (trop lié au handicap).

Créer One Web.