Rails : Afficher les pages 404 et 500 comme en production

Si, en phase de développement, vous souhaitez voir le comportement d’une erreur 404 ou 500 comme en production, il suffit de modifier la valeur de la constante config.consider_all_requests_local du fichier config/environments/development.rb et la passer à false.

Let’s Encrypt et Apache

Let’s Encrypt est une autorité de certification lancée en décembre 2015 qui fournit des certificats gratuits. Il a l’avantage de fournir un processus qui permet d’automatiser l’installation du certificat.

Grafikart a créé un tutoriel vidéo pour la mise en place d’un certificat SSL sur Apache, ce tutoriel est très bien pour la mise en place de Let’s Encrypt et des certificats mais le script de renouvellement n’a pas fonctionné dans notre configuration sous debian 8 + apache2 : Mettre en place un serveur Web : Apache, Let’s Encrypt

Résumé de l’installation de Let’s Encrypt et mise en place des certificats

Pour plus d’infos (installation de dépendances, …) n’hésitez pas à consulter l’article de Grafikart.

On installe Let’s Encrypt avec les droits administrateur :

Voilà pour l’installation de Let’s Encrypt. L’outil se chargera par la suite d’installer les dépendances lors de son utilisation.

À noter que la version 2.7.9 de Python est requise (c’est la version présente dans Debian 8).

Passons à la mise en place des certificats. Deux solutions :

  1. Soit vous souhaitez mettre en https tous les noms de domaines configurés avec un virtual host
  2. Soit vous préférez mettre en https que certains noms de domaines pointant sur votre serveur

Pour le cas 1, utilisez la commande suivante :

Pour le cas 2, utilisez la commande suivante :

En remplaçant bien sûr mondomaine.fr et www.mondomaine.fr par votre nom de domaine.

Le script va vous demander des infos :

. Enter email address (used for urgent renewal and security notices) (Enter ‘c’ to cancel): il faut rentrer l’adresse mail sur laquelle vous souhaitez être prévenu de l’expiration du certificat

Please read the Terms of Service at : répondre A pour Agree

Would you be willing to share your email address with the Electronic Frontier Foundation… : Yes ou No (à vous de voir si vous voulez partager votre adresse mail sur leur liste de diffusion) 

Please choose whether HTTPS access is required or optional.
——————————————————————————-
1: Easy – Allow both HTTP and HTTPS access to these sites
2: Secure – Make all requests redirect to secure HTTPS access

Option 1 : vous acceptez de pouvoir accéder à votre nom de domaine à la fois en HTTP ou HTTPS
Option 2 : votre nom de domaine est automatiquement redirigé vers le HTTPS même si vous cherchez à y accéder en HTTP

Si tout s’est bien passé, un nouveau virtual host a été créé dans sites-available avec votredomaine-le-ssl.conf.

Renouvellement automatique du certificat ssl

Un certificat généré par Let’s Encrypt est valide pendant 90 jours. Il faut donc le renouveler tous les 3 mois. Il existe pour cela des scripts qu’on peut ajouter à nos tâches cron.

Pour le renouvellement ça se complique un peu, Let’s Encrypt permet de le faire très bien via la commande :

mais l’objectif n’est pas de renouveler le certificat tous les jours via un cron mais bien de le renouveler lorsque la date d’expiration est inférieure à 45 jours par exemple. Le script proposé par Grafikart disponible sur GitHub, et écrit par Erika Heidi n’est pas compatible avec notre installation debian 8 + apache2 + letsencrypt. Dans notre cas, nous avons dû apporter une petite modification. Voici notre script disponible ici. Pour l’utiliser il faut se mettre avec les droits administrateurs puis le télécharger comme suit :

Le rendre exécutable :

Et enfin le lancer via :

Où domaine.fr correspond à votre nom de domaine. Attention, si vous avez un certificat pour mondomaine.com et un pour www.mondomaine.com, pensez à lancer 2 fois la commande : une fois avec en argument mondomaine.com et une fois en argument www.mondomaine.com. Il est important de mettre le chemin complet vers le script pour le lancer depuis crontab.

Ce script vérifie, pour le nom de domaine passer en paramètres, le délai avant expiration. Si celui-ci est inférieur à 45 jours, il renouvelle le certificat. Dans le cas contraire, il ne fait rien.

Maintenant, libre à vous de mettre en tâches cron, sur la fréquence que vous souhaitez, le lancement de ce script.

Petite astuce : Si on lance via le terminal la commande de let’s encrypt pour le renouvellement de certificat comme ceci :

cela crée un fichier certbot.log dans le répertoire courant. Jusque là pas de souci, mais si par mégarde vous lancez cette commande dans le dossier /etc/apache2/sites-available et que vous essayez de relancer le commande :

Vous obtiendrez une erreur bizarre car cette commande lit le contenu du dossier /etc/apache2/sites-available et rencontrera le fichier certbot.log que la commande n’arrivera pas à parser correctement. Il suffit dans ce cas de déplacer le certbot.log ou de le supprimer et tout rentrera dans l’ordre.

Source :

Auteurs : Matthieu et Julien

Quoi de neuf dans mon navigateur ?

Veille inspirée par l’article de Stéphanie Walter : Le futur du web dans le navigateur mobile ?

L’attribut accept des <input type="file">

L’attribut accept d’un input de type file permet de spécifier le type de fichier accepté au téléchargement.

Plus d’infos : HTML <input> accept Attribute sur w3schools

Le manifest d’application pour créer une web app

Grâce à un fichier manifest.json, on peut déclarer un site web pour qu’il s’exécute comme une application sur mobile (plein écran, splashscreen, …).

Plus d’infos : Manifeste d’application sur developer.mozilla.org et Getting started with Progressive Web Apps

Et plein d’autres choses

  • notifications
  • mode hors-ligne
  • géolocalisation
  • statut de la batterie

Plus d’infos : What Web Can Do Today

À étudier :

#Barcamp : Les Assets Ruby on Rails

Asset Pipeline

L’asset pipeline est un outil qui concatène et minifie (compresse) les ressources CSS et JavaScript. Il nous permet aussi d’écrire nos assets avec d’autres langages ou pré-processeurs comme ERB, Sass ou CoffeeScript. En Ruby on Rails, Il est gérer par la gem sprockets-rails, dont le code a été extrait du cœur du framework dans la version 4.

Les assets sont placés dans le répertoire /app/assets. En production, Rails les précompile et les place dans le répertoire /public/assets.

Inclusion des assets

Lorsqu’on génère un contrôleur (ou un scaffold), rails crée automatiquement des fichiers CSS et JS (ou SCSS et Coffee, si les gems correspondantes sont installées). Par exemple, si on crée le contrôleur elements_controller.rb, les fichiers app/assets/stylesheets/elements.scss et app/assets/javascripts/elements.js vont être créés. Ces fichiers sont inclus dans l’application si l’instruction require tree . est présente dans le fichier application.css.

Mais il est également possible d’inclure seulement les fichiers d’assets spécifiques au contrôleur courant en utilisant les lignes suivantes dans le layout :

Organisation des assets

Les répertoires images, javascripts et stylesheets présents dans app/assets, lib/assets et vendor/assets sont gérés par l’assets pipeline. Il est possible d’ajouter des chemins au pipeline dans le fichier config/application.rb. Par exemple :

Manifest

Les fichiers app/assets/stylesheets/application.css et app/assets/javascript/application.js sont des fichiers manifest qui déterminent quelles assets inclure et servir.

Un fichier manifest ressemble à ceci :

Ici, les fichiers jquery.js et jquery_ujs présents dans un des chemins connus par l’asset pipeline sont inclus. La directive require_tree inclus tous les fichiers présents dans le répertoire courant, alors que require_directory inclus les fichiers présents dans le répertoire spécifié.

Pour exclure un fichier présent dans le répertoire courant après un require_tree, il faut utiliser la directive stub.

À noter que les assets sont inclus dans l’ordre spécifié par le manifest. Par contre, il n’y a pas d’ordre spécifique d’inclusion des assets avec le require_tree ou le require_directory. Il faut donc inclure un fichier avant le require_tree si on veut qu’il soit inclus le premier (il ne sera alors pas inclus une seconde fois).

On peut utiliser autant de fichiers manifest que le souhaite. Pour cela, il faut les ajouter à la précompilation dans le fichier /config/initializers/assets.rb :

Helpers d’assets

Il existe plusieurs helpers qui nous permettent d’inclure les assets :

Sources :

Lectures complémentaires :

 

#Barcamp : Les unités CSS

Taille de police

Par défaut, la taille de la police sous Firefox est fixée à 16px. Mais l’internaute peut modifier cette taille (et la fixer à 32px par exemple). Pareil pour la taille minimale de la police : elle n’est pas définie par défaut, mais peut l’être par l’utilisateur.

Pour améliorer l’accessibilité d’un site, il faut donc laisser la possibilité à l’internaute de redimensionner le texte. Pour cela, il faut utiliser les unités relatives (em ou rem) et non les pixels. Cela est valable autant pour la propriété font-size que pour line-height.

Sources : alsacréations

em.

L’ em est une unité relative qui se base sur l’élément parent pour déterminer sa taille. A savoir que la balise HTML se base sur la taille de police par défaut du navigateur. Attention à ne pas tomber dans le piège de la cascade qui vas augmenter rapidement la taille de police.

rem

le rem pour root em se comporte exactement comme le em à la différence que le rem se base sur l’élément racine, donc soit la balise HTML soit la police par défaut du navigateur.

vh et vw.

Il est pratique de vouloir que le texte soit d’une taille adapté en fonction de la taille de l’écran. Si vous avez une tablette, le titre de l’application va être en plus gros que le titre de la même application mais sur mobile. Et  les unités VW et WH vont permettre de réaliser cela facilement.

D’abord il faut savoir que la première lettre V de ces unités signifie viewport (donc ce sont des unités relative à la taille du viewport que vous avez définie -ou non-), ensuite, w pour width et h pour height.

Donc :

  • vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran
  • vh : « Viewport Height », correspond à l’unité relative à la hauteur de votre écran

Prenons un exemple en supposant que vous avez un écran (enfin un viewport…) de 1000px de hauteur :

La taille du texte à l’intérieur de votre div sera donc de (1000 * 20/100) = 200px.

Et si vous passez à un écran de 800px de hauteur, vous aurez alors une taille de texte de 160px.

Source : graphikArt

vmin et vmax

vmin et vmax pour viewport min et max : il correspondent à l’unité à la plus petite ou grande des deux dimensions (largeur ou hauteur selon l’orientation).

Du responsive en em ?

Pour aller plus loin il est aussi possible de définir les medias queries avec des unités relative. Ainsi si l’utilisateur utilise une taille de police importante l’interface passe en mode « tablette » ou « mobile ».  ainsi la police seras toujours adaptée en fonction du device.

Sources :

#Barcamp : Utilisons SVG !

« SVG (Scalable Vector Graphics) est un langage de balisage XML décrivant des images vectorielles bidimensionnelles. On pourrait dire que SVG est aux images ce qu’XHTML est au texte. » (source developer.mozilla.org)

Les images au format SVG étant vectorielles, elles peuvent être redimensionnées sans perte de qualité.

Le format SVG a ainsi plusieurs utilités : créer des logos, des icônes (à la place des icon-fonts), des graphiques, des cartes, des visuels animés (à la place de flash), et même des images responsives (en attendant <picture>).

Créer des SVG

  • Éditeur de texte
  • Inskape
  • Sketch
  • Illustator (version 1.1 de SVG)

Intégrer un SVG

Il a plusieurs façons d’intégrer un SVG dans une page HTML, avec pour chacun ses avantages et inconvénients.

  • <img src= »mon-image.svg » /> ou background-image (mise en cache, mais pas d’interaction via CSS ou JS)
  • <object type= »image/svg+xml » data= »mon-image.svg »> ou <svg version= »1.1″ xmlns= »http://www.w3.org/2000/svg »>…</svg> (pas de mise en cache mais interaction avec CSS/JS)

Dans tous les cas, il est conseillé d’utiliser des fallback pour les navigateurs ne supportant pas le SVG (IE8 et inférieur en général).

Animer un SVG

Pour animer un SVG, on peut utiliser les propriété animation et @keyframes de CSS ou le JavaScript. À noter qu’il existe une multitude de bibliothèques JS permettant de manipuler les SVG plus facilement (SnapSVG, SVG.js, D3.js, Raphael.js…).

Sources :

  • MDN : https://developer.mozilla.org/fr/docs/Web/SVG
  • SVG, format clé du responsive : http://blog.mh-communication.fr/svg-format-cle-du-responsive.html

#Barcamp : Aller plus loin avec SCSS

Nous utilisons quotidiennement deux fonctionnalités de SASS dans nos projets : les variables et l’imbrication. Mais cela n’est qu’une infime partie des fonctionnalités proposées par SASS.

Les variables

L’imbrication

Il est conseillé de ne pas trop imbriquer les selecteurs (pas plus de 3 niveaux d’imbrication) : « Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. »

Les mixins

Un mixin permet de regrouper des propriétés CSS réutilisables. On peut passer des paramètres à un mixin pour le rendre plus modulaire.

Les fonctions

Une fonction se distingue d’un mixin car elle ne définit pas une série de propriétés mais retourne une valeur en fonction de paramètres passés en arguments.

Sass définit une série de fonctions natives qu’on peut utiliser directement sans avoir à les redéfinir (http://sass-lang.com/documentation/Sass/Script/Functions.html).

Les partials

On peut structurer les fichiers SCSS en les scindant en plusieurs partials. Ces différents fichiers sont compilés dans un même fichier lorsqu’ils sont inclus dans ce fichier, et ne nécessite pas d’être tous inclus dans le <head> de la page.  La convention de  nommage est la suivante : _nom_du_partial.scss.

L’héritage

Le mot-clé extend permet à un sélecteur d’hériter des propriétés d’un autre sélecteur.

À noter que cet héritage est multiple.

Les opérateurs

Grâce à Sass, on peut utiliser les opérateurs mathématiques de base (pour calculer les hauteurs, largeurs, marges, …).

Un exemple d’utilisation des opérateurs est la création de grilles responsives.

Le sélecteur « & »

Le sélecteur & fait référence au sélecteur parent. Il est donc forcément imbriqué.

Les conditions

Sass introduit les conditions.

Les boucles

Sass introduit également les boucles while, for et each.

Liens supplémentaires :

Gérer l’historique de navigation en JavaScript

Quand on réalise une navigation en AJAX, l’url de la page ne change pas au fil de la navigation. On ne peut donc pas utiliser les boutons de navigation « Précédent » et « Suivant » … sauf si on utilise la méthode history.pushState et l’événement popstate apportés par HTML5.

history.pushState

La méthode history.pushState() ajoute une entrée à l’historique. Elle prend trois paramètres :

  • un objet JavaScript, dans lequel on pourra placer les données qu’on voudra récupérer par la suite,
  • un titre, qui nomme la page. Il n’est pas encore utiliser par les navigateurs,
  • une url, qui est l’url ajoutée à l’historique.

Une fois cette méthode appelée, on voit que l’url de la barre d’adresse a été remplacée par "/chemin-de-la-page". On peut alors utiliser le bouton « Précédent » qui nous ramènera sur la page précédente.

popstate

Un événement popstate est envoyé à la fenêtre chaque fois que l’entrée active de l’historique change. Si l’entrée de l’historique activée a été créée par un appel à replaceState, la propriété state de l’événement popstate contient une copie de l’objet JavaScript passé en paramètre lors de l’appel. On pourra ainsi le récupérer facilement.


J’ai créé un pen sur CodePen.io qui expérimente tout ça. Pour le tester, c’est ici : http://codepen.io/maattt/pen/zrRvod. Par contre, on ne voit pas l’url de la page changer, puisque c’est une iframe.

Sources : developer.mozilla.org et grafikart.fr

Gérer les sources de vos gems

Par défaut, lorsqu’on installe une gem avec un gem install, l’url de téléchargement de cette gem est https://rubygems.org. Il peut cependant être intéressant de modifier ou d’ajouter des sources de téléchargement, notamment lorsqu’on possède un serveur de gem perso.

Pour cela, quelques commandes sont utiles :

Lister les sources

Ajouter une source

Supprimer une source

Source : http://guides.rubygems.org/command-reference/#gem-sources