diff --git a/_authors/vcomposieux.md b/_authors/vcomposieux.md index b74d26855..2686f9d55 100644 --- a/_authors/vcomposieux.md +++ b/_authors/vcomposieux.md @@ -2,5 +2,6 @@ layout: author login: vcomposieux name: Vincent Composieux +twitter: vcomposieux --- Architecte passionné par les technologies web depuis de longues années, je pratique principalement du PHP (Symfony) / Javascript mais aussi du Python ou Golang. diff --git a/_posts/2016-07-19-behat-structurez-vos-tests-fonctionnels.md b/_posts/2016-07-19-behat-structurez-vos-tests-fonctionnels.md index f1160ae87..d9133437b 100644 --- a/_posts/2016-07-19-behat-structurez-vos-tests-fonctionnels.md +++ b/_posts/2016-07-19-behat-structurez-vos-tests-fonctionnels.md @@ -35,7 +35,7 @@ Il conviendra alors de lancer à la fois les tests d'intégration et les tests d Avant de commencer, notez que dans cet exemple, nous allons utiliser un serveur `Selenium` qui recevra les informations fournies par `Mink` (extension de Behat) et qui pilotera ensuite notre navigateur (Chrome, dans notre configuration).n Pour être clair sur l'architecture, voici un schéma qui résume le rôle de chacun : -Schéma d'architecture Behat/Selenium +![Diagram](/assets/2016-07-19-behat-structure-functional-tests/diagram.jpg) # Mise en place de Behat diff --git a/_posts/2016-09-27-utiliser-le-composant-workflow-de-symfony.md b/_posts/2016-09-27-utiliser-le-composant-workflow-de-symfony.md index c44442062..f21ae42ca 100644 --- a/_posts/2016-09-27-utiliser-le-composant-workflow-de-symfony.md +++ b/_posts/2016-09-27-utiliser-le-composant-workflow-de-symfony.md @@ -118,7 +118,7 @@ $ bin/console workflow:dump pull_request Celle-ci va vous générer un code Graphviz qui donne le schéma suivant : -Workflow - Graphviz +![Workflow Graphviz](/assets/2016-09-29-symfony-workflow-component/workflow.png) Celui-ci permet vraiment de donner une vision claire de son workflow, à tous les niveaux (développeurs, product owners, clients, ...). Le composant Workflow implémente des méthodes permettant d'effectuer une transition, vérifier si une transition peut être effectuée avec l'état actuel et lister les transitions possibles avec l'état actuel. diff --git a/_posts/2016-09-29-symfony-workflow-component.md b/_posts/2016-09-29-symfony-workflow-component.md index 1fe0542f3..c95911009 100644 --- a/_posts/2016-09-29-symfony-workflow-component.md +++ b/_posts/2016-09-29-symfony-workflow-component.md @@ -118,7 +118,7 @@ $ bin/console workflow:dump pull_request The generated Graphviz will give you the following diagram: -Workflow - Graphviz +![Workflow Graphviz](/assets/2016-09-29-symfony-workflow-component/workflow.png) This one gives you a really clear vision of your workflow and allows everyone at every level (developers, product owners, customers, ...) to understand the business logic. The Workflow component implements methods that allow you to verify if a transition is applicable and to later apply it depending on the current status and to also list all enabled transitions. diff --git a/_posts/2016-12-01-creer-votre-premier-package-pour-atom.md b/_posts/2016-12-01-creer-votre-premier-package-pour-atom.md index d6617d585..6d70d402d 100644 --- a/_posts/2016-12-01-creer-votre-premier-package-pour-atom.md +++ b/_posts/2016-12-01-creer-votre-premier-package-pour-atom.md @@ -109,7 +109,7 @@ config: { La configuration offre un grand nombre de valeurs disponibles (`boolean` , `color` , `integer` , `string` , ...) ce qui permet de laisser un grand nombre de choix à vos utilisateurs. Les paramètres de votre package apparaîtront alors pour votre package, sous Atom : -Atom - Settings +![Gitlab URL Parameter](/assets/2016-12-05-create-atom-package/gitlab-url.png) Vous pourrez alors, à tout moment dans votre code, obtenir dans votre package la valeur définie par l'utilisateur (ou la valeur par défaut fournie si aucune valeur n'a été renseignée) via : @@ -222,7 +222,7 @@ Vous pouvez lancer les specs via le menu d'Atom : `View`  -> `Packages`  -> `R Notre package est maintenant prêt à être publié ! -Atom - Fusée +![Publish](/assets/2016-12-05-create-atom-package/publish.gif) Pour se faire, nous allons utiliser l'outil CLI installé avec Atom : `apm`. diff --git a/_posts/2016-12-05-create-atom-package.md b/_posts/2016-12-05-create-atom-package.md index b6cf71f2a..761ec8828 100644 --- a/_posts/2016-12-05-create-atom-package.md +++ b/_posts/2016-12-05-create-atom-package.md @@ -107,7 +107,7 @@ Atom settings allow multiple setting types (`boolean` , `color` , `integer` , Once it is added, if you reload your package, you will see your package settings appearing into Atom settings: -Atom - Settings +![Gitlab URL Parameter](/assets/2016-12-05-create-atom-package/gitlab-url.png) In order to retrieve the value (or default value) defined by a user for a given setting in your code, you just have to use the following line: @@ -221,7 +221,7 @@ In order to run the specs tests, you just have to navigate into the following me Our package is now ready to be deployed! Let's send it. -Atom - Fusée +![Publish](/assets/2016-12-05-create-atom-package/publish.gif) To do that, we will use the `apm`  CLI tool which comes with Atom when installing it. diff --git a/_posts/2017-01-20-redux-structure-frontend-applications.md b/_posts/2017-01-20-redux-structure-frontend-applications.md index 6ff56485a..732280d84 100644 --- a/_posts/2017-01-20-redux-structure-frontend-applications.md +++ b/_posts/2017-01-20-redux-structure-frontend-applications.md @@ -21,7 +21,7 @@ Historically, this has been needed by [React](https://facebook.github.io/react/ Here is the philosophy: - +![Flux Diagram](/assets/2017-01-20-redux-structure-frontend-applications/flux-diagram.png) Your application declare `actions`  for each components. These actions allow you to define the state of your data which is stored in a `store` . This stores continually maintains your `view`  up-to-date. We have a drawback in this case because you have to define one store per component. This is working but on large applications you can feel limited with it. diff --git a/_posts/2017-02-22-consul-service-discovery-failure-detection-2.md b/_posts/2017-02-22-consul-service-discovery-failure-detection-2.md index 1d0e5cdfa..95c406804 100644 --- a/_posts/2017-02-22-consul-service-discovery-failure-detection-2.md +++ b/_posts/2017-02-22-consul-service-discovery-failure-detection-2.md @@ -262,7 +262,7 @@ $ docker run -d \ Vous pouvez faire de même sur le node 02 (en faisant attention à bien modifier les `node-01`  en `node-02` ) et vous devriez maintenant pouvoir visualiser ces checks sur l'interface Consul : - +![Consul Infrastructure Schema](/assets/2017-02-22-consul-service-discovery-failure/schema.png) De la même façon, vous pouvez également utiliser l'API de Consul afin de vérifier la santé de vos services : diff --git a/_posts/2017-02-22-consul-service-discovery-failure-detection.md b/_posts/2017-02-22-consul-service-discovery-failure-detection.md index 4ad827bb3..e8aef8d55 100644 --- a/_posts/2017-02-22-consul-service-discovery-failure-detection.md +++ b/_posts/2017-02-22-consul-service-discovery-failure-detection.md @@ -36,7 +36,7 @@ In order to clarify the rest of the article, here are the ports used by Consul: Next, we'll focus on service discovery and failure detection. To do that, we'll create a Docker Swarm cluster with the following architecture: - +![Consul Infrastructure Schema](/assets/2017-02-22-consul-service-discovery-failure/schema.png) As you can see, we'll have 3 Docker machines: @@ -264,7 +264,7 @@ $ docker run -d \ You can do the same thing on your node 02 (by paying attention to modify the `node-01`  values to `node-02` ) and you should now visualize these checks on the Consul web UI: - +![Consul Infrastructure Schema](/assets/2017-02-22-consul-service-discovery-failure/checks.png) You can also use the Consul API in order to verify the good health of your services: diff --git a/_posts/2017-04-11-http2-nest-pas-le-futur-cest-le-present.md b/_posts/2017-04-11-http2-nest-pas-le-futur-cest-le-present.md index 16261f5aa..80b235695 100644 --- a/_posts/2017-04-11-http2-nest-pas-le-futur-cest-le-present.md +++ b/_posts/2017-04-11-http2-nest-pas-le-futur-cest-le-present.md @@ -31,7 +31,7 @@ Après une première étape menée en 2009 par Google avec le protocole `SPDY`, Aujourd'hui, le protocole HTTP/2 est supporté par la plupart des navigateurs. Au moment de l'écriture de cet article, seul Opera Mini se fait encore désirer : - +![Can I use HTTP/2?](/assets/2017-04-12-http2-future-present/caniuse.jpg) Il est donc possible d'envisager dès maintenant de passer vos applications web à HTTP/2 et ainsi offrir des performances de navigation accrues à vos visiteurs. @@ -49,13 +49,13 @@ Si vous souhaitez plus d'informations sur la configuration du protocole TLS afin Si HTTP/1 chargeait les ressources les unes après les autres, comme en décrit la cascade de chargement des ressources d'une application ci-dessous, HTTP/2 va vous permettre de gagner du temps au niveau des états d'attente car plusieurs ressources pourront être directement déchargées dans le même flux de réponse HTTP. - +![Waterfall HTTP](/assets/2017-04-12-http2-future-present/waterfall_http.jpg) Ici, le temps passé en vert correspond au temps d'attente avant le chargement de la ressource, le temps passé en violet correspond au temps d'attente de chargement de la ressource (TTFB - Time To First Byte) et enfin le temps en gris correspond au temps de réception de la ressource. Voici à quoi ressemble le chargement des ressources sous le protocole HTTP/2 : - +![Waterfall HTTP/2?](/assets/2017-04-12-http2-future-present/waterfall_http2.jpg) Nous voyons clairement ici que le temps alloué à attendre les ressources (le temps en vert) a complètement disparu et que toutes les ressources sont bien chargées "en même temps", en utilisant le même flux. diff --git a/_posts/2017-04-12-http2-future-present.md b/_posts/2017-04-12-http2-future-present.md index 1f0d8a013..5fbbd41e9 100644 --- a/_posts/2017-04-12-http2-future-present.md +++ b/_posts/2017-04-12-http2-future-present.md @@ -31,7 +31,7 @@ After a first step made by Google in 2009 with the `SPDY` protocol, `HTTP/2` Nowadays, HTTP/2 protocol is supported by most browsers and it's important to point out. While writing this blog post, only Opera Mini does not implement the new protocol, as shown on the following table: - +![Can I use HTTP/2?](/assets/2017-04-12-http2-future-present/caniuse.jpg) That being said, you can consider upgrading your own web applications to HTTP/2 as soon as possible and thus offer high browsing performances to your visitors. @@ -51,13 +51,13 @@ If you want more information about how to [improve SSL exchanges security](http HTTP/1 resources were loaded one by one as you can see below on a HTTP/1 application waterfall. HTTP/2 will allow to gain a lot of time on "waiting time" because multiple resources could be sent/downloaded by the client using the same HTTP stream (which is often called binary stream). - +![Waterfall HTTP?](/assets/2017-04-12-http2-future-present/waterfall_http.jpg) Here, time passed and displayed in green color is corresponding to wait time before resource loading. Purple time is corresponding to resource loading time (TTFB - Time To First Byte) and finally the grey time is corresponding on the resource reception to the client. Here is a waterfall of resources loading using the HTTP/2 protocol: - +![Waterfall HTTP/2?](/assets/2017-04-12-http2-future-present/waterfall_http2.jpg) You can clearly see here that time allocated to wait on resources (old-green time) has disappeared completely and all resources are clearly loaded in the same time because they are in the same stream. diff --git a/assets/2016-07-19-behat-structure-functional-tests/diagram.jpg b/assets/2016-07-19-behat-structure-functional-tests/diagram.jpg new file mode 100644 index 000000000..260e6e644 Binary files /dev/null and b/assets/2016-07-19-behat-structure-functional-tests/diagram.jpg differ diff --git a/assets/2016-09-29-symfony-workflow-component/workflow.png b/assets/2016-09-29-symfony-workflow-component/workflow.png new file mode 100644 index 000000000..c6c56e8e0 Binary files /dev/null and b/assets/2016-09-29-symfony-workflow-component/workflow.png differ diff --git a/assets/2016-12-05-create-atom-package/gitlab-url.png b/assets/2016-12-05-create-atom-package/gitlab-url.png new file mode 100644 index 000000000..8aa161118 Binary files /dev/null and b/assets/2016-12-05-create-atom-package/gitlab-url.png differ diff --git a/assets/2016-12-05-create-atom-package/publish.gif b/assets/2016-12-05-create-atom-package/publish.gif new file mode 100644 index 000000000..c1b5823ba Binary files /dev/null and b/assets/2016-12-05-create-atom-package/publish.gif differ diff --git a/assets/2017-01-20-redux-structure-frontend-applications/flux-diagram.png b/assets/2017-01-20-redux-structure-frontend-applications/flux-diagram.png new file mode 100644 index 000000000..d7ce2260f Binary files /dev/null and b/assets/2017-01-20-redux-structure-frontend-applications/flux-diagram.png differ diff --git a/assets/2017-02-22-consul-service-discovery-failure/checks.png b/assets/2017-02-22-consul-service-discovery-failure/checks.png new file mode 100644 index 000000000..04b3906dc Binary files /dev/null and b/assets/2017-02-22-consul-service-discovery-failure/checks.png differ diff --git a/assets/2017-02-22-consul-service-discovery-failure/schema.png b/assets/2017-02-22-consul-service-discovery-failure/schema.png new file mode 100644 index 000000000..438440ea7 Binary files /dev/null and b/assets/2017-02-22-consul-service-discovery-failure/schema.png differ diff --git a/assets/2017-04-12-http2-future-present/caniuse.jpg b/assets/2017-04-12-http2-future-present/caniuse.jpg new file mode 100644 index 000000000..d7ffddcb6 Binary files /dev/null and b/assets/2017-04-12-http2-future-present/caniuse.jpg differ diff --git a/assets/2017-04-12-http2-future-present/waterfall_http.jpg b/assets/2017-04-12-http2-future-present/waterfall_http.jpg new file mode 100644 index 000000000..4af879865 Binary files /dev/null and b/assets/2017-04-12-http2-future-present/waterfall_http.jpg differ diff --git a/assets/2017-04-12-http2-future-present/waterfall_http2.jpg b/assets/2017-04-12-http2-future-present/waterfall_http2.jpg new file mode 100644 index 000000000..a9769c891 Binary files /dev/null and b/assets/2017-04-12-http2-future-present/waterfall_http2.jpg differ