Sous tableau avec dataTable

Lorsque l’on à un dataTable sur une vue et que l’on veux cliquer sur une ligne du tableau pour déplier cette ligne et y voir de nouvelles informations, cela peut devenir compliqué et l’on peux vite faire du code pas très propre.

DataTables propose une api, rowChild pour pouvoir créer des sous tableaux dans un table de manière moins sale.

function format ( d ) {
    // `d` is the original data object for the row
    return '&lt;table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;'+
        '&lt;tr&gt;'+
            '&lt;td&gt;Entretiens:&lt;/td&gt;'+
            '&lt;td&gt;'+d[1]+'&lt;/td&gt;'+
        '&lt;/tr&gt;'
    '&lt;/table&gt;';
}

function format ( d ) {

// `d` is the original data object for the row

return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+

'<tr>'+

'<td>Entretiens:</td>'+

'<td>'+d[1]+'</td>'+

'</tr>'

'</table>';

}

La fonction format permet de passer l’objet ( une ligne du tableau ) et ainsi de recréer un tableau en allant rechercher les informations que l’on veux afficher dans un tableau javascript.

$(document).ready(function() {
  var table = $('.table').DataTable( {
      "iDisplayLength": 100,
      'oLanguage': {
          'oPaginate': {
              'sPrevious': 'Page précédente',
              'sNext': 'Page suivante',
              'sLast': 'Dernière page',
              'sFirst': 'Première page',
          },
         'sInfoEmpty': 'Aucune infos à afficher',
         'sInfo': '_TOTAL_ iinfos à afficher (_START_ à _END_)',
         'sEmptyTable': 'Aucune infos à afficher',
         'sInfoFiltered': ' - filtrées de _MAX_ enregistrements',
         'sLengthMenu': 'Afficher _MENU_ infos',
         'sSearch': 'Recherche :',
         'sZeroRecords': 'Aucun résultat pour cette recherche'
      },
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets:   0
        }


         ],
        order: [ 1, 'asc' ]
  });

$(document).ready(function() {

var table = $('.table').DataTable( {

"iDisplayLength": 100,

'oLanguage': {

'oPaginate': {

'sPrevious': 'Page précédente',

'sNext': 'Page suivante',

'sLast': 'Dernière page',

'sFirst': 'Première page',

'sInfoEmpty': 'Aucune infos à afficher',

'sInfo': '_TOTAL_ iinfos à afficher (_START_ à _END_)',

'sEmptyTable': 'Aucune infos à afficher',

'sInfoFiltered': ' - filtrées de _MAX_ enregistrements',

'sLengthMenu': 'Afficher _MENU_ infos',

'sSearch': 'Recherche :',

'sZeroRecords': 'Aucun résultat pour cette recherche'

responsive: {

details: {

type: 'column',

target: 'tr'

}

columnDefs: [ {

className: 'control',

orderable: false,

targets: 0

}

order: [ 1, 'asc' ]

});

Dans le document.ready il faut ajouter une classe pour cibler une colonne, ici « control » qui va permettre de gérer l’affichage au clic

  $('.table tbody').on('click', 'td.control', function () {
      var tr = $(this).closest('tr');
      var row = table.row( tr );

      if ( row.child.isShown() ) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
      }
      else {
          // Open this row
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
      }
  });

$('.table tbody').on('click', 'td.control', function () {

var tr = $(this).closest('tr');

var row = table.row( tr );

if ( row.child.isShown() ) {

// This row is already open - close it

row.child.hide();

tr.removeClass('shown');

}

else {

// Open this row

row.child( format(row.data()) ).show();

tr.addClass('shown');

}

});

Il faut aussi bien penser à ajouter bootstrap.js et jquery pour que cela fonctionne.

source : DatatTable

19 octobre 201619 octobre 2016

Support des fonctionnalités

@supports

Appelé aussi règle conditionnelle, le @supports permet de détecter si une propriété css est compatible avec le navigateur utilisé par l’internaute, et ainsi prévoir une alternative si besoin.

Cette propriété et supporté par à peu près tout les navigateurs modernes sauf l’irréductible IE. Can i use

Tout comme les médias queries, @supports peut intégrer plusieurs règles au sein d’un bloc d’accolade. Et les conditions doivent êtres individuelles et entourées par des parenthèses.

@supports (hyphens: auto){
    p{
       hyphens: auto
     }
}

@supports (hyphens: auto){

hyphens: auto

}

Si le navigateur supporte la propriété hyphens il va l’appliquer sinon il va s’adapter avec les conditions par défaut.

Il est possible d’ajouter des conditions and et or comme avec les medias queries, ainsi que tester la non reconnaissance d’une propriété avec l’opérateur not.

Toutefois certaines règles que l’on testes sont mieux supportées que le @supports lui même, notamment sur IE. Donc le résultat peut être trompeur.

@supports et javascript

Il est possible d’utiliser @supports avec le javascript. Il y a deux syntaxes possible :

if ( CSS.supports('property', 'value') )  { }

if ( CSS.supports( '(property: value) and (property: value') ) { }

if ( CSS.supports('property', 'value') ) { }

if ( CSS.supports( '(property: value) and (property: value') ) { }

Conclusion

C’est une propriété assez intéressante dans la théorie, mais malheureusement du fait de sont manque de compatibilité sous IE, la pratique n’est pas forcément utile.

En effet celle ci ne sera utile que si la propriété testée n’est pas compatible avec plusieurs navigateurs, tels que hyphens, et que celle-ci ne demande pas non plus un travail trop important en solution alternative.

Source: alsacreation, MDN

5 octobre 20167 octobre 2016

Rails – Améliorer la vitesse du précompile

Pour améliorer la vitesse de precompile d’un projet il est possible d’utiliser la gem Turbo-sp-rocket-rails3

Cette Gem a pour but d’améliorer la vitesse de precompile d’un projet.

Installation

pour installer cette Gem il suffit de l’inclure dans le Gem file dans le groupe asset de cette manière

group :assets do
  gem 'turbo-sprockets-rails3'
end

group :assets do

gem 'turbo-sprockets-rails3'

end

Ensuite il est nécessaire de faire un bundle install, puis de lancer un rake assets:precompile.

Utilisation

le premier rake assets:precompile peut être lent, mais ceci est normal. La gem va créer un fichier manifest.yml dans le dossier public/assets

Ce fichier contient la source de tout les assets du projet. Seuls les assets modifiés seront precompilé et non plus la totalité lors d’un commit.

Quelque chiffre : sur un projet sans la gem 53 secondes lors du push. Avec la gem 12 secondes. le gain de temps est non négligeable.

Rails 5 ?

Avec l’apparition de Rails 5 il est nécessaire d’upgrader sprocket en version 4 qui apporte de gros changements dans la compilation des assets.

En effet dans les version précédentes on utiliser le fichier config/initializer/assets.rb pour indiquer quels assets devaient être precompilé.

Avec Sprocket 4 il est possible d’utiliser le manifest.js dans le dossier app/assets/

Utilisation

Comment utiliser ce nouveau fichier ? Il faut créer le fichier manifest.js dans app/assets/config/ (créer le dossier config s’il n’est pas présent).

Dans le manifest.js on va pouvoir relier nos répertoire JS CSS et bien d’autres.

// JS and CSS bundles
//
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

// Images, fonts etc ...
//
//= link_tree ../fonts
//= link_tree ../images

// JS and CSS bundles

//= link_directory ../javascripts .js

//= link_directory ../stylesheets .css

// Images, fonts etc ...

//= link_tree ../fonts

//= link_tree ../images

Ceci étant terminé il est nécessaire de retirer le config.assets.precompile du fichier config/initializers/assets.rb.

source : eileencodes, turbo-sprocket-rails3

7 septembre 201612 septembre 2016

Contrôleur actif

En rails il existe plusieurs méthodes pour savoir quel est le contrôleur actif de la page.

La première est de comparer le params[:controller] à une string :

 params[:controller] == "contact"

1	params[:controller] == "contact"

Mais, utiliser un params dans une vue n’est pas une bonne pratique.

Deux solutions s’offrent donc a nous :

controller_name
current_page

le controller_name s’utilise de cette façon :

 controller_name == "contact"

1	controller_name == "contact"

Et le helper methode current_page s’utilise de cette manière :

 current_page?(controller: "contact")

1	current_page?(controller: "contact")

Quelle est la meilleure pratique entre les deux ? Le current_page me semble le mieux car il permet de faire un peu plus de choses si besoin.

En effet le current_page peut prendre plusieurs options comme l’action, l’ordre ou même la pagination. Il peut aussi prendre une string, à la place d’un symbole.

Sources : doc current_page?, doc controller_name

17 août 201615 décembre 2016

Offline first avec Upup.js

Offline first ?

De nos jours, les sites modernes sont construit en mobile-first. Mais dans un monde on l’on est mobile, la connexion elle n’est pas stable tout le temps. On peux donc penser Offline-first.

La librairie UpUp permet d’ajouter rapidement des fonctionnalités offline sur un site web.

Pour ajouter un contenu basique il suffit d’ajouter le script suivant :

<script src="/upup.min.js"></script>
<script>
    UpUp.start({
      'content': '<html><body><br />
<h1>Top Hotels in Rome</h1>
<p>Villa Domus</p>
<p>Hotel Trivelli</p>
<p></body></html>'
    });
  </script>

UpUp.start({

'content': '<html><body><br />

<h1>Top Hotels in Rome</h1>

<p>Villa Domus</p>

<p>Hotel Trivelli</p>

<p></body></html>'

});

</script>

Avec ce bout de script, si la connexion est perdue cela permet d’avoir un affichage minimal avec du HTML simple, et ainsi améliorer l’expérience utilisateur.

Comment ça marche ?

La librairie UpUp utilise les ServiceWorkers lorsqu’il y a une erreur réseaux. Les ServiceWorkers sont des scripts qui tournent en arrière-plan du navigateur et qui permettent de connaître le statut des requêtes.

Donc quand un utilisateur visite pour la première fois le site, UpUp enregistre un ServiceWorker et il lui donne une liste de fichiers en cache pour plus tard.

À la prochaine visite de l’utilisateur, le ServiceWorker écoute les erreurs réseaux, et s’il y a un échec, il va chercher dans le cache et retourne les fichiers présent comme s’il venaient du réseau.

Créer une expérience offline riche.

On peux injecter du HTML pure mais, pour plus de propreté et de maintenabilité il est possible de séparer dans plusieurs fichier le contenu offline de cette manière :

<script src="/upup.min.js"></script>
  <script>
    UpUp.start({
      'content-url': 'offline.html'
    });
  </script>

UpUp.start({

'content-url': 'offline.html'

});

</script>

Il est aussi possible d’y ajouter notre propre style en ajoutant la ligne suivante pour permettre d’aller chercher les fichiers dans le cache :

 <script src="/upup.min.js"></script>
  <script>
    UpUp.start({
      'content-url': 'offline.html',
      'assets': ['css/bootstrap.min.css', 'css/offline.css']
    });
  </script>

UpUp.start({

'content-url': 'offline.html',

'assets': ['css/bootstrap.min.css', 'css/offline.css']

});

</script>

Selon votre imagination, il est possible de charger tout un tas de données tels que des données dynamiques en fonction de l’utilisateur, d’autre scripts, des images, pdf, videos etc …

Ou placer le script?

Pour des raison de sécurité les requêtes réseaux sont visibles au sein d’un scope. Le scope qu’un ServiceWorker peu affecter est déterminé par là ou le script est placé.

Par exemple si l’on place le script dans le dossier suivant : https://monsite.com/js/upup.sw.min.js, UpUp ne sera capable de montrer le contenu offline que si l’utilisateur essayer d’acceder au dossier /js/ .

C’est pourquoi il est important de placer idéalement les scripts à la racine du site sur le même serveur.

Restriction

Cette librairie ne fonctionne qu’avec des site web en HTTPS et possédant par conséquence un certificat SSL pour préserver la sécurité et la vie privée de l’utilisateur.

UpUp est supporter par Chrome 40+, Opera 27+, et Firefox 41+. cependant si un utilisateur possède un autre navigateur il ne notera rien de différent.

source : www.talater.com

git du pojet : UpUp

27 juillet 20166 décembre 2016

Srcset et size

L’attribut srcset

L’attribut srcset, est un attribut pour les balises images qui permet de résoudre les problèmes que pose l’intégration de site responsive avec des images.

Cet attribut vient en corrélation de l’attribut src habituel d’une image et permet de spécifier une liste d’image à afficher selon certain critère.

Cela ressemble étrangement au média queries, mais la façon de penser est un peu différente.

En effet une média querie vas dire : utilise ceci quand la taille du conteneur est moyenne, alors que srcset vas dire dire : cette image est de taille moyenne.

en pratique cela donne ce morceau de code :

<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 1024w, xl.png 1920w" alt="mon_alt" />;

1	<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 1024w, xl.png 1920w" alt="mon_alt" />;

Si l’attribut srcset n’est pas supporté, c’est l’attribut src qui par défaut prend le relais.

Pour connaitre les limites techniques des navigateurs à l’heure actuelle sur cet attribut je vous laisse regarder can i use.

Descripteurs

On peut aussi voir que chaque images précisé dans le srcset est suivi d’un chiffre et d’un w. Le w est appelé descripteur. Il en existe deux : le descripteur x et le descripteur w.

x: permet de préciser des images optimisées pour des appareils avec des densités de pixels à l’écran différentes ( utile pour les écrans rétinas par exemple )

w : est un indicateur de la taille de l’image pour le navigateur.

c’est bien joli tout ça mais comment faire pour savoir quelle image sera affichée ?

Voici ce que dit la spécification à ce sujet :

L’agent utilisateur va calculer la densité de pixel réelle de chaque image à partir du descripteur w spécifié et des tailles de rendus spécifiées dans l’attribut sizes. Il peut ensuite choisir n’importe quelle ressource en fonction de la densité de pixels de l’écran de l’utilisateur, de son niveau de zoom, ou peut-être d’autres facteurs comme les conditions de réseau de l’utilisateur.

En gros le navigateur fait ce qu’il veut.

L’attribut size

L’attribut size est obligatoire désormais pour l’utilisation de scrset. Il permet de spécifier la largeur d’affichage de l’image selon des points de ruptures.

<img src="small.png" srcset="small.png 340w, medium.png 680w, large.png 1024w" sizes="100vw" alt="mon_alt"/>

1	<img src="small.png" srcset="small.png 340w, medium.png 680w, large.png 1024w" sizes="100vw" alt="mon_alt"/>

L’utilité de size et qu’il permet de spécifier différente largeurs d’affichage pour notre image selon le reste de notre page. Ici les images prendront toujours une largeur égale à 100% du viewport. Les points de ruptures sont géré par le navigateur.

Mais il est aussi tout à fait possible de définir manuellement les points de ruptures :

<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 1024w, xl.png 1920w" sizes="(min-width:20em) and (max-width:50em) 20em, 100vw" alt="Test" />;

1	<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 1024w, xl.png 1920w" sizes="(min-width:20em) and (max-width:50em) 20em, 100vw" alt="Test" />;

Ici le point de rupture est à 20em s’il n’est pas rempli l’image prendra une largeur égale à 100% du viewport.

source : hteumeuleu, ericportis.com

13 juillet 201613 juillet 2016

CSS : poids des sélecteurs

Le CSS peut être considéré comme un langage chaotique par certaine personne, Mais en y regardant de plus près le CSS obéit à des règles bien particulières.

Il nous est tous arrivé d’utiliser une librairie tel que Bootstrap par exemple et de voir notre style se faire surcharger par le style de la librairie. La question qui se pose est comment savoir quelle règle va s’appliquer ?

Avant de se plonger dans les arcanes du CSS, il est bon de savoir deux choses :

plus un élément stylisé sera « lourd », plus il y à de chance que le style s’applique
L’inspecteur web montre les style appliqué par ordre d’importance

Poids des sélecteurs

Pour déterminer le poids d’un sélecteur css par rapport à un autre, il vous suffit de remplir le tableaux ci-dessous :

	!important	Dans l’attribut style	Nb #id	Nb .class	Nb Balise
Ciblage a	0	0	0	0	0
Ciblage b	0	0	0	0	0

Dans Attribut style : mettre « 1 » si vos propriétés sont dans un attribut style.
nb #ID : mettre le nombre d’id qui constitue votre chemin de ciblage.
Nb .class : mettre le nombre de class qui constitue votre chemin de ciblage.
Nb Balise : mettre le nombre de balises qui constitue votre chemin de ciblage.

Une fois le tableau remplie pour vos ciblages à comparer, vous pouvez les comparer. L’importance se fait par colonne de gauche à droite. Si il n’y a pas égalité, c’est la valeur la plus grande qui l’emporte; sinon, je passe à la colonne de droite suivante. Si les poids sont strictement égaux c’est la cascade qui permettra de savoir quel style s’applique.

Vous trouverez plus bas plusieurs exemples à un, deux sélecteurs ou plus.

Sélecteurs css particuliers

Quelques informations sur la valeur de certain sélecteur css :
p.maclass : compte 1 pour la balise et 1 pour la class
p#monId : compte 1 pour la balise et 1 pour l’id
body > p : compte 2 pour la balise et « < » n’est pas pris en compte.
div + div.maclass{...} compte 2 pour la balise et 1 pour la classe et « + » n’est pas pris en compte.
p:first-line : compte 2 pour la balise.
p:first-child : compte 1 pour la balise et 1 pour la class.
p[id="monId"] : compte 1 pour la balise et 1 pour la class, quelque soit la valeur de l’attribut [att=valeur] correspond a une classe.
* : compte n’est pas pris en compte.

Attention si vous avez !important dans une de vos propriétés cela change les règles car elle est prioritaire sur toutes les règles de ci-dessus.

récapitulatif en image : CSS Specify

source : Zone CSS

11 juillet 201628 juillet 2016

Validation sur une action spécifique

Quand on créer un validateur on écrit par exemple :

validates_presence_of :password, message: "Ce champ est obligatoire."

1	validates_presence_of :password, message: "Ce champ est obligatoire."

qui permet la validation sur toutes les actions.

Mais on peut préciser l’action sur lequel on souhaite appliquer le validateur :

validates_presence_of :password, message: "Ce champ est obligatoire.", on: :create

1	validates_presence_of :password, message: "Ce champ est obligatoire.", on: :create

Ici, on vérifie la présence du champs password que lors du create et pas du tout lors de l’update.

à l’inverse on peut vérifier la présence du champs que lors de l’update.

validates_presence_of :password, message: "Ce champ est obligatoire.", on: :update

1	validates_presence_of :password, message: "Ce champ est obligatoire.", on: :update

11 juillet 201612 juillet 2016

Bcrypt : has_secure_password

Précision sur l’utilisation de Bcrypt :

L’utilisation de cette gem nécessite de mettre dans le model de notre objet la ligne suivante :

has_secure_password

1	has_secure_password

Le has_secure_password valide la presence du password et du password_confirmation. Il vérifie aussi si les mots de passe sont les mêmes.

si l’on souhaite désactiver ces validateurs il faut passer validations: false en argument

has_secure_password validations: false

1	has_secure_password validations: false

et de faire les validateurs de la manière classiques.

si maintenant on souhaite ajouter un nombre de caractère minimum sur le mot de passe il faut garder le has_secure_password et ajouter un validate supplémentaire comme suis :

has_secure_password
validates :password, length: { minimum: 6 }, if: lambda { self.password.present? }

1 2	has_secure_password validates :password, length: { minimum: 6 }, if: lambda { self.password.present? }

Le validate permet de vérifier si le mot de passe fait 6 caractères minimum si et seulement si l’utilisateur change son mot de passe.

14 avril 201615 avril 2016

Différence entre length, size et count

Length

La méthode length est utilisée sur les arrays, pour en retourner le nombre d’éléments.

Exemple :

a = [1,2,3,4,5,6,7]
a.length #=> 7

1 2	a = [1,2,3,4,5,6,7] a.length #=> 7

Size

Size est un alias de length et fait exactement la même chose que length.

Count

Count possède plus de fonctionnalités que length ou size. Il peut être utilisé pour obtenir le nombre d’éléments basés sur une condition. Count peut être appelé de trois manières différentes.

Supposons l’array suivant :

c = [1,2,3,4,4,7,7,7,9]

1	c = [1,2,3,4,4,7,7,7,9]

Première méthode :
Permet de retourner le nombre d’éléments d’un array. À noter qu’il est préférable d’utiliser size ou length dans ce cas, pour une question de performance.

c.count #=> 9

1	c.count #=> 9

Seconde méthode :
Permet de retourner le nombre d’élément d’une occurence.

c.count 7 #=> 3

1	c.count 7 #=> 3

Troisième méthode :
Retourne le nombre d’éléments, basée sur une condition invoquée sur chaque élément de l’array.

c.count {|i| i > 5} #=> 4

1	c.count {\|i\| i > 5} #=> 4

Source : Ruby In Rails