Monthjuillet 2016

[CSS3] Animations – Astuces et ressources utiles

  • Animate.css – A cross-browser library of CSS animations. As easy to use as an easy thing. Version SASS par Ben Hodgson.

[jQuery] Bonnes pratiques, astuces et ressources utiles

Apprendre jQuery, bonnes pratiques

jQuery Performance Rules

  1. Always Descend From an #id
  2. Use Tags Before Classes
  3. Cache jQuery Objects
  4. Harness the Power of Chaining
  5. Use Sub-queries
  6. Limit Direct DOM Manipulation
  7. Leverage Event Delegation (a.k.a. Bubbling)
  8. Eliminate Query Waste
  9. Defer to $(window).load
  10. Compress Your JS
  11. Learn the Library
  12. Avoid use of string concat(), Use join() for the long strings.
  13. Use Latest jQuery versions with CDN hosted files instead of older version.
  14. Use of For loop instead of jQuery $.each loop.
  15. Check if an Element Exists before doing operations on the DOM elements.
  16. Always use Return False in functions.
  17. Use of HTML5 Data Attributes.
  18.  Identify weight of the page.
  19. Keep your code DRY (Don’t Repeat Yourself)

Boilerplates, starter kits

Autre (n’a peut-être pas sa place dans ce billet…)

[Flexbox] Astuces et ressources utiles

Tutoriels Flexbox

Layout, mise en page

Mélanger largeurs fluides et fixes avec flex-grow

The “Holy Grail” 3 column liquid layout with pixel-widths.

Différentes astuces sur la manière de cibler les sélecteurs

Outils Flexbox

  • Flexplorer est un outil en ligne qui permet de jouer en live avec les valeurs du modèle Flexbox

Utiliser Flexbox avec des navIEgateurs de merde

Normalizing Cross-browser Flexbox Bugs

Source: Normalizing Cross-browser Flexbox Bugs.

flex-grow et flex-shrink craquent leurs slips sous IE10+

Il faut donner une largeur fixe (en %, ça ira très bien…) à l’élément sur lequel on a assigné la propriété flex-grow ou flex-shrink.

Ressources en ligne:

flexbox_without_flexbox-min

[Bourbon] Astuces d’utilisation de la bibliothèque de mixins SASS

Bourbon – A simple and lightweight mixin library for Sass.

[Bootstrap 3] Ajouter un point de rupture supplémentaire à la grille avec la version SASS de Bootstrap 3

Dans notre exemple, nous allons chercher à ajouter un breakpoint col-xl-… pour des résolutions d’écran plus larges que col-lg.
Pour ce faire, il faudra éditer 4 fichiers :

  1. bootstrap/mixins/grid-framework.scss
  2. bootstrap/mixins/grid.scss
  3. bootstrap/variables.scss
  4. bootstrap/grid.scss

Une fois ces ajouts effectués, vous pourrez utiliser toute la batterie de mixins et de classes offerte par la grille Bootstrap pour les breakpoints XS, SM, MD, LG, mais également votre nouveau point de rupture XL !

mixins/grid-framework.scss

Rajouter en début de fichier la classe .col-xl-… dans le mixin make-grid-columns (arguments + boucle for) :

mixins/grid.scss

Rajouter en fin de fichier les mixins make-xl-column, make-xl-column-offset, make-xl-column-push, make-xl-column-pull (vous pouvez vous inspirer de la batterie de mixins déjà présente pour make-lg-…) :

variables.scss

Rajouter les Media queries breakpoints pour Extra Large screen / wide desktop :

Rajouter les Container sizes :

grid.scss

Rajouter un Container widths pour le breakpoint xl :

En toute fin de fichier, rajouter un Extra Large grid :

[NPM] Résolution d’erreurs

tunneling socket could not be established, cause=getaddrinfo ENOTFOUND address address:8080

$ vim /home/intlangf/.npmrc et commenter la la ligne qui dirige vers le port 8080 :


Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 8.x

Found bindings for the following environments:
– Linux 64-bit with Node.js 11.x


lclain@vm64-lclain:~/drupal/roederer-drupal(develop)$ /usr/bin/node -v
v8.10.0
lclain@vm64-lclain:~/drupal/roederer-drupal(develop)$ /usr/local/bin/node -v
v11.2.0

Lors de npm install ou npm rebuild, c’était « /usr/local/bin/node » qui était utilisé, au lieu de « /usr/bin/node »
Je n’ai pas trouvé où changer ça pour utiliser la bonne commande. j’ai donc renommé « /usr/local/bin/node » vers « /usr/local/bin/node.old » et créer un lien symbolique vers « /usr/bin/node » et là, ça passe.

[Bower] Astuces d’utilisation du gestionnaire de packages front-end

Installer un package non répertorié par Bower

Important : ne faites pas ça comme des sauvages. Tout se fait en ligne de commande.

  1. Aller sur la page github du package en question (dans notre exemple, gulp-sass).
  2. Récupérer l’URL *.git du repository (bouton vert « Clone or download » en haut à droite). Dans notre exemple : https://github.com/dlmanning/gulp-sass.
  3. En ssh, taper la commande bower install git://github.com/dlmanning/gulp-sass --save-dev (vous avez remarqué qu’on a changé le préfixe https en git et qu’on a ajouté le paramètre –save-dev afin que les informations sur ce nouveau package soient ajoutées dans le fichier bower.json).

Résolution de problèmes liés à votre mauvaise utilisation de Bower 😛

Error: Cannot find module ‘nom-du-module’

Intervient notamment lorsqu’un package non répertorié par Bower a été installé.
Il faut ré-installer le package avec npm en tapant sudo npm install -g <mon_bô_package>.

Error: EACCES: permission denied, open ‘/home/mco/.config/configstore/bower-github.json’

Quand on tape bower install et qu’on a l’erreur suivante :

Si bower install --allow-root renvoie aussi une erreur :

Taper les eux commandes suivantes :

…et retenter un bower install.

[SASS] Ressources utiles pour les utilisateurs de SASS et COMPASS

Documentation non-officielle, exploration des concepts

En français

En anglais

The SASS ampersand (&)

  • The Sass Ampersand – The & is an extremely useful feature in Sass (and Less). It’s used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you’re struggling and could have written the same code in regular CSS. Let’s see if we can really understand it.

Outils en ligne

  • www.sassmeister.com – The sassiest way to play with Sass, Compass, & LibSass

    SassMeister is a playground for Sass, Compass, and LibSass. Add some Sass and SassMeister will show you the rendered CSS. SassMeister supports both Sass and SCSS syntaxes, all output styles, and an ever-expanding list of Sass libraries.

Outils hors ligne

Installation, mise à jour, maintenance

Mettre à jour SASS (SCSS)

$ sass -v pour connaître la version installée.

$ sudo gem update sass
$ sudo gem update compass pour mettre à jour les packages SASS et compass.

Mettre à jour Ruby vers la version 2.0.0

Sera nécessaire à partir de la version SASS 3.5 qui ne supportera plus Ruby 1.9.x.
Source : How to install Ruby 2.1.4 on Ubuntu 14.04.

Installer les librairies pré-requises :

Installer rbenv qui sert à installer Ruby :

Optionnel : ne pas installer la documentation de Ruby

[Docker] Quelques notes de prise en main et résolution d’erreurs

Voir aussi: Résolution des problèmes et recommandations pour les troubleshooting.


Objectif : faire tourner un projet Change 3.x dans une VM Ubuntu 14.xx qui intègre une version de PHP (5.5.x) trop récente pour la solution. Le projet que nous essayons de faire tourner est alainflou.

Doc interne :

Déployer le projet sur la VM

Ce projet a été déployé sur la VM à l’aide de l’outil RBS cooking vers le chemin /home/<utilisateur_de_la_VM>/change30/alainflou. Les sources du projet sont accessibles depuis le repository git de Netapsys.

Les instructions principales pour la partie : Déployer le projet sur la VM

  • Stopper le serveur Apache : sudo service apache2 stop
  • Démarrer un conteneur Docker : docker-compose up -d
  • Stopper un conteneur Docker : docker-compose down -v
  • Visualiser les conteneurs Docker qui tournent : docker ps
  • Se logguer dans un conteneur Docker : docker exec -ti alainflou_change_1 bash (où alainflou_change_1 est le nom du Docker en question; on peut trouver ce nom en tapant la commande docker ps, sous la colonne NAMES).
  • Se logguer dans un conteneur Docker pour un projet déployé avec Cook : cook utf e:local m2.shell (ou utf est le nom du projet).

Utiliser le Docker dcompass

Deux pré-requis:

  • Le fichier config.rb doit se trouver à la racine du theme (exemple: projet/skin/frontend/package/theme/config.rb)
  • On exécute la commande depuis projet/skin/frontend/package/theme/

Liens d’accès rapide pour la partie : Déployer le projet sur la VM

Installer Docker sur la VM Ubuntu Server

Installer Docker pour Ubuntu à la racine de /home/<utilisateur_de_la_VM>/.

Récupérer les conteneurs Docker pour Change

Dans le dossier /home/intlangf/Docker, récupérer sur le Git Netapsys les images Docker mises à notre disposition. Celle qui nous intéresse plus particulièrement est /docker-images/change/35 mais on va les récupérer toutes.

Lancer le conteneur Docker Change35

Se rendre ensuite dans le dossier /home/intlangf/Docker/docker-images/change/35 et lancer la commande make.
Un message qui doit ressembler à :

…devrait apparaître suivi d’une succession d’étapes (Steps) pour enfin afficher un message qui ressemble à peu près à :

On peut ensuite vérifier que l’image Docker de Change35 a bien été lancée en tapant la commande docker ps qui affichera l’ensemble des images qui sont actuellement lancées. Normalement vous devriez avoir au moins celle-ci :

Relier le projet alainflou à l’image dockérisée de Change35

Retour à la racine du dossier Docker pour créer un dossier alainflou et y placer un fichier docker-compose.yml qui contient les informations suivantes (où intlangf est le nom d’utilisateur de la VM) :

Notez que le paramètre image (ligne 2) correspond au libellé de la colonne IMAGE dans la liste des Dockers actuellement en-train de tourner.

Lancer ensuite le conteneur en tapant la commande : docker-compose up -d. Normalement, un message Creating alainflou_change_1 s’affiche.
Taper dans la foulée la commande docker exec -ti alainflou_change_1 bash et vous voilà connecté sur votre conteneur (normalement et suivant comment votre VM est configurée, l’indicateur de commande de votre terminal doit passer de quelque chose comme intlangf@ubuntu2:~/docker/alainflou$ à quelque chose comme root@ad3f8ab33cea:/home/intlangf/change30/alainflou#).

Il est à noter que les commandes change seront à exécuter depuis le docker et non depuis l’instance Change installée dans la VM précédemment à l’aide de l’outil Cook.

De même, pour stopper une machine docker, lancer la commande docker-compose down -v.

Accèder au site en local via un navigateur

Récupérer les bonnes IPs et écrire les fichiers de configuration

L’URL pour accéder au site depuis un navigateur est (selon les données consignées dans notre fichier de configuration /alainflou/docker-compose.yml) alainflou.vmchange.rbs.fr. On le trouve ligne 5 - SERVER_NAME=alainflou.vmchange.rbs.fr.

Afin d’y accéder, il faut ajouter le site dans les hosts de la VM. Pour ce faire, taper un ifconfig et localiser l’IP de docker0 (la 2ème ligne normalement qui ressemble à :

Taper sudo vim /etc/hosts pour éditer les hosts et ajouter la ligne 172.17.0.1 alainflou.vmchange.rbs.fr.

Sous Windows, modifier les hosts également avec l’ip divulguée sous eth1, à savoir 192.168.56.110 alainflou.vmchange.rbs.fr.

Couper le serveur Apache de la VM et passer par un proxy dockerisé

Pour afficher notre projet Change dans un navigateur, il va falloir stopper le serveur Apache de notre VM et passer par un proxy dockerisé.

Sous /home/intlangf/Docker/</p>, créer un dossier <code>proxy et y placer un fichier docker-compose.yml (conf spécifique pour les projets Docker) dans lequel on écrira :

Il est possible que la création d’un dossier certs laissé vide dans /home/intlangf/Docker/proxy/ soit requise pour assurer le bon fonctionnement de notre proxy.

On peut ensuite vérifier que l’image Docker du proxy a bien été lancée en tapant la commande docker ps qui affichera l’ensemble des images qui sont actuellement lancées. A ce stade du tuto, vous devriez avoir au moins celles-ci :

A noter que l’image jwilder/nginx-proxy est téléchargée depuis le repo distant : https://hub.docker.com/explore/. Ce n’est pas nous qui nous occupons de la récupérer et de la stocker sur la VM comme celle de Change (vu tout en haut).

Couper Apache avec la commande sudo service apache2 stop. On y est presque… Encore un peu de config au niveau de Change et on pourra accéder à notre site en local depuis un navigateur.

Config au niveau de Change

Editer le fichier alainflou/config/project.intlangf.xml (où intlangf est votre propre user : ne modifiez pas le vrai fichier intlangf !!! – Pour connaître votre user, regardez dans le fichier profile présent à la racine de votre projet Change) et changer toutes les IPs en fonction de celle donnée pour docker0 lorsqu’on tape un ifconfig dans la VM (voir plus haut). Dans notre cas :

Dans notre conteneur dockerisé (accessible, pour rappel, en tapant la commande docker exec -ti alainflou_change_1 bash) taper les commandes :

Le site est désormais accessible en local dans un navigateur avec l’URL alainflou.vmchange.rbs.fr.

Résolution des problèmes et recommandations

disque plus visible dans l’explorateur, problèmes de droits d’écriture sur les fichiers du projet stockés sur la VM

Au cours du déploiement du projet, j’ai eu plusieurs fois des problèmes d’accès à ma VM sous Windows via Samba (disque plus visible dans l’explorateur, problèmes de droits d’écriture sur les fichiers du projet stockés sur la VM). Ne pas hésiter à redémarrer la VM dans ces cas là.

Le conteneur Change n’accède pas à la base de données stockée sur la VM

Il faut modifier les droits d’accès aux bases de données pour l’utilisateur admin-webedit.

Via la VM (et pas le conteneur), se connecter à mysql en root en tapant mysql -u root -p<mot_de_passe_de_votre_VM>.

Vérifier les droits : show grants for 'admin-webedit'@'%';

Taper à la suite les instructions :

  • GRANT USAGE ON *.* TO 'admin-webedit'@'%' IDENTIFIED BY 'admin-webedit';
  • FLUSH PRIVILEGES;
  • GRANT ALL ON *.* TO 'admin-webedit'@'%';

Le conteneur Change n’accède pas à la base de données stockée sur la VM (autre cas)

Se connecter au containter DB puis à mysql à l’intérieur de ce container:

Vous trouverez votre mot de passe root dans le fichier docker-compose.yml, sous:

Puis taper à la suite les instructions:

  • GRANT SUPER ON *.* TO 'admin-webedit'@'%' IDENTIFIED BY 'admin-webedit';
  • FLUSH PRIVILEGES;

Le conteneur Change n’accède pas à la base de données stockée sur la VM (autre cas)

  1. Vérifier la présence d’un fichier config/project.<user_profile_name>.xml à votre nom (intlangf pour moi, donc config/project.intlangf.xml) dans le repo git du projet.
  2. Checker la cohérence des hostnames et ports ouverts ci-dessous avec ce qui est déclaré dans le fichier docker-compose.yml du projet:

  3. Pusher le fichier config/project.intlangf.xml modifié dans la branche Git dont vous allez vous servir pour faire votre deploy avec cook.
  4. Lancez votre deploy en suivant les instructions du wiki.

Facultatif (parce que c’est probablement pas ça qui va résoudre le problème)

Faire $ docker ps pour obtenir la liste des containers.

Entrer dans le container qui concerne la base de données: $ docker exec -it <nom_du_container> bash.

Se logguer à mysql avec les infos retournées dans le message d’erreur obtenu, ici: $ mysql -u is-user -pis-password.

Faire un show databases; et vérifier la présence de la base de données retournée dans le message d’erreur (dans notre cas C4_aacall) et que son nom soit orthographié comme dans le fichier docker-compose.yml du projet. Sous:

ERROR 1049 (42000): Unknown database ‘C4_aacall’

Voir un point plus haut pour comparer le nom de la base de donnée dans le docker-compose.yml et dans le profile.intlangf.xml de Change (racine > dossier config).

ERROR: Get https://docker.netapsys.fr/v2/wfsolr/manifests/3.6: unknown: Authentication is required

Taper docker login docker.netapsys.fr puis renseigner username et password heldapp.

cat ~/.dockercfg

aufs au_opts_parse:1155:docker[ç_-]: unknow option dirperm1

Installer des extensions PHP supplémentaires dans un conteneur

J’ai une erreur de ce type en front : Fatal error: Class 'NumberFormatter' not found in /home/intlangf/change30/afflelou/modules/project/lib/services/PhysicalpropertytypeService.class.php on line 102. Comme expliqué ici, il faut installer une extension PHP intl.

Puis redémarer la VM et relancer le conteneur Docker.

En front: 503 Service Temporarily Unavailable nginx

Attention à ce qui est déclaré dans le fichier hosts de Windows. Le problème venait du fait que l’URL d’accès était déclaré&e à plusieurs reprises, mais avec une IP différente.

Error starting userland proxy: listen tcp 0.0.0.0:3306: bind: address already in use

Une instance de mysql tourne sur la VM. Pour la stopper, taper la commande :

ERROR: for nginx-proxy Cannot start service nginx-proxy

Erreur complète :

Une instance d’Apache2 tourne sur la VM. Pour la stopper, taper la commande :

Site inaccessible (ERR_CONNECTION_REFUSED)

Vérifier que le conteneur proxy est lancé et qu’il tourne normalement.

Disparition de la base de données

Dans le dossier du projet (à la racine), pour vérifier la présence d’une base de données:

sudo ls -alh /var/lib/docker/volumes/euroairport_mysql-data/_data/euroairport

ERROR: {« message »: »Get https://docker.netapsys.fr/v2/wfsolr/manifests/3.6: unauthorized: BAD_CREDENTIAL »}

Lorsque je lance un docker-compose up -d et que j’ai ce type de message d’erreur:


intlangf@ubuntu:~/docker/euroairport$ docker-compose up -d
Pulling solr (docker.netapsys.fr/wfsolr:3.6)...
ERROR: {"message":"Get https://docker.netapsys.fr/v2/wfsolr/manifests/3.6: unauthorized: BAD_CREDENTIAL"}

Taper :

docker login docker.netapsys.fr

Et renseigner ses login/mdp.

© 2020 devfrontend.info

Theme by Anders NorénUp ↑