![GitLab [6/6] : GitLab Runner](https://connect.adfab.fr/wp-content/uploads/2018/02/part-6.jpg)
Suite et fin de notre série sur Gitlab. On conclut sur GitLab Runner.
Suite et fin de notre série sur Gitlab. On conclut sur GitLab Runner.
Pour ce 5ème épisode, on déploie !
Suite de notre série sur GitLab avec ce quatrième épisode.
Au programme de ce troisième épisode de notre série dédiée à GitLab : tester son code.
Deuxième épisode de notre série sur GitLab.
Bienvenue dans cette nouvelle série d’articles sur… GitLab ! Nous allons voir pourquoi et comment, chez Adfab, nous avons décidé de migrer sur GitLab.
L’avantage pour GitLab, comparé à GitHub, est que toute la chaine de déploiement est regroupée dans un projet, ce qui facilite énormément la collaboration des équipes. Il n’est également plus nécessaire de se rendre sur d’autres outils pour utiliser un wiki ou un système de tickets. Grâce la gestion des rôles, il est aussi possible de donner un accès en lecture a vos clients, ou encore – via les intégrations – de le notifier sur Slack par exemple.
Dans cette série d’articles, nous verrons comment passer du développement local jusqu’à la production, en utilisant la suite d’outils de GitLab pour builder une application, réaliser des tests de couverture sur le code, créer et uploader une image docker et déployer notre code sur un serveur de production.
Habituellement quand on demande à un développeur de faire du scroll jacking sur mobile nous avons tendance à dire NON. Mais pour une expérience de navigation pleine page, le fait d’être positionné parfaitement sur chaque page rend l’expérience plus esthétique.
Nous allons voir comment faire cela simplement, sans que l’expérience utilisateur ne soit altérée. Pour ça, il est important de conserver le mode contracté du navigateur mobile.
Chez Adfab nous avons travaillé sur plusieurs approches pour développer des applications avec React Native. Pour ma part j’ai utilisé sur différents projets le boilerplate Ignite maintenu par Inifite Red (https://infinite.red).
Je ne vais pas faire de rétrospective sur ce projet, mais plutôt expliquer comment j’ai pu facilement prendre en main ce nouvel outil grâce à l’étude de leur repo Github. Le seul prérequis pour lire cet article et de savoir comment fonctionne React. Nous verrons également comment utiliser Redux, sans que des connaissances approfondies soient nécessaires.
Il a 6 faces, 12 arêtes et 8 sommets, oui je vais vous parler d’un cube !
J’ai réalisé un cube configurable grâce au mixed mode du framework famous (et l’aide de collègues pour certains calculs mathématiques). Vous pouvez trouver les sources sur github et customiser votre propre cube assez facilement. Je vais vous expliquer sans plus attendre comment faire.
Tout d’abord clonez le repo puis passer sur la branche cube
git clone https://github.com/AdFabConnect/animation.git git checkout -b cube
Dans cet article je vais seulement traiter la partie customisation qui nécessite seulement de connaitre HTML et css. Pour ceux qui connaissent le javascript (es2015) et famous, vous pouvez aller encore plus loin en compilant les sources avec la commande suivante.
famous.dev
Pour modifier le cube allez dans le dossier ./public et ouvrez le fichier index.html
Ici se trouve la configuration du cube :
var FACE_STEP = ['FRONT', 'LEFT', 'BACK', 'RIGHT', 'TOP']; var CUBE_CONFIG = { cube_size: 300, camera_depth: 3000, transition_duration: 1500, face_wait: 2000, scale_back: .90, transition_scale: .75 };
La variable FACE_STEP permet de configurer la rotation automatique du cube. Donc au chargement le cube commencera sur la face FRONT, puis LEFT, BACK, RIGHT et enfin TOP. Il est possible d’ajouter autant d’entrée dans le tableau pour faire tourner le cube a l’infini.
La variable suivante CUBE_CONFIG va nous permettre de modifier la configuration de notre cube.
Maintenant ça serait bien de pouvoir changer l’apparence des faces du cube. Voici comment faire.
<div data-face="front"> <style> .face-front-wrapper { background: #2ecc71; } .face-front-wrapper div { width: 100%; height: 100%; line-height: 3.5; color: black; text-align: center; font-size: 70px; border: 1px solid #000; } </style> <div>FRONT</div> </div>
L’attribut data-face permet d’indiquer dans quelle face sera injecté notre code html.
Nous allons y ajouter du html
<div>FRONT</div>
et du css (je vous conseille de plutôt utiliser une feuille de style externe)
.face-front-wrapper { background: #2ecc71; } .face-front-wrapper div { width: 100%; height: 100%; line-height: 3.5; color: black; text-align: center; font-size: 70px; border: 1px solid #000; }
Pour des raisons de confort j’ai ajouté la possibilité de pouvoir cliquer sur un élément du DOM pour tourner le cube sur une face définie. Il vous suffit d’utiliser l’attribut data-rotate.
<button data-rotate="LEFT">Go to left face</button>
Au click sur ce bouton le cube tournera automatiquement sur la face gauche.
Une face spéciale a été définie, elle s’appelle GOBACK et permet de pousser vers le fond le cube. (rappelez-vous la configuration scale_back). Il vous faudra pour cela utiliser l’attribut data-face plus data-rotate.
<button data-rotate="GOBACK" data-face="LEFT">Go to bottom face</button>
Voici à quoi ressemble l’action précédente au clic sur le bouton :
Enfin quand le cube se trouve en position éloignée il est possible de bouger celui-ci grâce à la souris.
Nous verrons dans un autre article comment j’ai réalisé le cube avec le mixed mode de famous.
En bonus le codepen du projet :
J’ai envi de vous donner un tip pour pouvoir mutualiser vos fichiers d’un vritualhost sous plusieurs sous dossiers. Cela peut être très utile, par exemple si vous utilisez toujours les mêmes bibliothèques ou bien des images de substitutions sur plusieurs sites.
Tous d’abord il nous faut créer 1 domaine. Rendez-vous dans votre fichier de configuration des hosts sur votre machine.
Sous mac :
/etc/hosts
Sous window :
C:\WINDOWS\system32\drivers\etc\hosts
Puis rajouter les domaines suivants:
127.0.0.1 mon-domain.local
Maintenant il ne nous reste plus qu’à créer nos virtualhosts
Voici comment se structure l’arborescence de nos dossiers
– /chemin/vers/le/dossier/parent
|__ mon-dossier
|__ mon-dossier-de-substitution
Dans l’exemple suivant nous allons faire en sorte que ; dans le cas où un fichier .css ou .js n’existe pas dans mon-dossier, il sera recherché aussi dans mon-dossier-de-substitution
NameVirtualHost mon-domain.local:80 ServerName mon-domain.local DocumentRoot "/chemin/vers/le/dossier/parent" SetEnv APPLICATION_ENV "development" <Directory "/chemin/vers/le/dossier/parent"> Options Indexes +FollowSymLinks +Includes RewriteEngine on RewriteBase /mon-dossier/ AllowOverride All Order allow,deny Allow from all RewriteRule ^/(scripts|styles)/([^_]*)(?:_[a-z]{2}(?:-[a-zA-Z]{2})?)+\.(js|css)$ /$1/$2.$3 [N] RewriteCond %{DOCUMENT_ROOT}/mon-dossier/$0 -f RewriteRule ^(.*) /mon-dossier/$1 [L] RewriteCond %{DOCUMENT_ROOT}/mon-dossier-de-substitution/$0 -f RewriteRule ^(.*) /mon-dossier-de-substitution/$1 [L]
Voici l’explication tant attendu, mon-domain.local pointe sur le dossier /chemin/vers/le/dossier/parent. Grâce à la règle RewriteBase, les fichiers seront chargé depuis se dossier.
Par exemple un fichier index.html sera chargé depuis le dossier mon-dossier.
Puis nous ajoutons notre règle sur les fichier .js/.css, contenue respectivement dans les dossiers scripts et styles. Puis les conditions, si l’on trouve dans le dossier mon-dossier alors on prend le fichier, sinon il faut aussi chercher dans mon-dossier-de-substitution. Bien sûr si le fichier n’existe dans aucun des 2 dossiers une 404 sera présente.
RewriteRule ^/(scripts|styles)/([^_]*)(?:_[a-z]{2}(?:-[a-zA-Z]{2})?)+\.(js|css)$ /$1/$2.$3 [N] RewriteCond %{DOCUMENT_ROOT}/mon-dossier/$0 -f RewriteRule ^(.*) /mon-dossier/$1 [L] RewriteCond %{DOCUMENT_ROOT}/mon-dossier-de-substitution/$0 -f RewriteRule ^(.*) /mon-dossier-de-substitution/$1 [L]