• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Nicolas LABBE

Si c’est stupide mais que ça marche, ce n’est pas stupide.
DevOps Outils

GitLab [6/6] : GitLab Runner

GitLab [6/6] : GitLab Runner

Suite et fin de notre série sur Gitlab. On conclut sur GitLab Runner.

LIRE LA SUITE
06/04/2018 TAGS: GitLab BY: Nicolas LABBE
SHARE
LIRE LA SUITE
DevOps Outils

GitLab [5/6] : CI/CD Go prod

GitLab [5/6]  : CI/CD Go prod

Pour ce 5ème épisode, on déploie !

LIRE LA SUITE
06/04/2018 TAGS: GitLab BY: Nicolas LABBE
SHARE
LIRE LA SUITE
DevOps Outils

GitLab [4/6] : CI/CD Docker and Registry

GitLab [4/6]  : CI/CD Docker and Registry

Suite de notre série sur GitLab avec ce quatrième épisode.

LIRE LA SUITE
06/04/2018 TAGS: GitLab BY: Nicolas LABBE
SHARE
LIRE LA SUITE
DevOps Outils

GitLab [3/6] : CI/CD Test coverage

GitLab [3/6]  : CI/CD Test coverage

Au programme de ce troisième épisode de notre série dédiée à GitLab : tester son code.

LIRE LA SUITE
06/04/2018 TAGS: GitLab BY: Nicolas LABBE
SHARE
LIRE LA SUITE
DevOps Outils

GitLab [2/6] : CI/CD Build

GitLab [2/6] : CI/CD Build

Deuxième épisode de notre série sur GitLab.

LIRE LA SUITE
06/04/2018 TAGS: GitLab BY: Nicolas LABBE
SHARE
LIRE LA SUITE
DevOps Outils

GitLab [1/6] : Git clone

GitLab [1/6] : Git clone

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.

Avant de commencer, pourquoi GitLab et pas GitHub ?

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.

LIRE LA SUITE
06/04/2018 TAGS: GitLab BY: Nicolas LABBE
SHARE
LIRE LA SUITE
Frontend Mobile

Scroll jacking iOS / Android

Scroll jacking iOS / Android

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.

LIRE LA SUITE
07/02/2018 TAGS: Android, ios, Mobile, React BY: Nicolas LABBE
SHARE
LIRE LA SUITE
Mobile

Ignite boilerplate pour React Native

Ignite boilerplate pour React Native

Introduction

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.

LIRE LA SUITE
12/09/2017 TAGS: boilerplate, React Native BY: Nicolas LABBE
SHARE
LIRE LA SUITE
Framework

Cube, jouer avec le DOM

Cube, jouer avec le DOM

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.

auto-rotate

La variable suivante CUBE_CONFIG va nous permettre de modifier la configuration de notre cube.

  • cube_size, la taille du cube
  • camera_depth, la profondeur
  • transition_duration, le temps de transition entre chaque face
  • face_wait, le temps d’attente entre chaque face
  • scale_back, le scale pour le cube en arrière plan
  • transition_scale, et le scale pendant une transition

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 :

click-to-rotate

Enfin quand le cube se trouve en position éloignée il est possible de bouger celui-ci grâce à la souris.

drag-to-rotate

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 :

LIRE LA SUITE
26/08/2015 TAGS: cube, Famo.us, Famous, webgl BY: Nicolas LABBE
SHARE
LIRE LA SUITE
Outils

Mixer le contenu de dossiers sur un virtualhost

Mixer le contenu de dossiers sur un virtualhost

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]
LIRE LA SUITE
05/08/2015 TAGS: Apache, vhost, virtualhost BY: Nicolas LABBE
SHARE
LIRE LA SUITE
1 2 3 Next

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect