Skip to content

Commit

Permalink
fix: fixed assets into vcomposieux's articles
Browse files Browse the repository at this point in the history
  • Loading branch information
eko committed Jul 4, 2017
1 parent 103444e commit 82e0b20
Show file tree
Hide file tree
Showing 21 changed files with 18 additions and 17 deletions.
1 change: 1 addition & 0 deletions _authors/vcomposieux.md
Expand Up @@ -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.
Expand Up @@ -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 :

<a href="http://blog.eleven-labs.com/wp-content/uploads/2016/07/behat.jpg"><img class="wp-image-1986 size-full" src="http://blog.eleven-labs.com/wp-content/uploads/2016/07/behat.jpg" alt="Schéma d'architecture Behat/Selenium" /></a>
![Diagram](/assets/2016-07-19-behat-structure-functional-tests/diagram.jpg)

# Mise en place de Behat

Expand Down
Expand Up @@ -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 :

<img class="size-full wp-image-2283 aligncenter" src="http://blog.eleven-labs.com/wp-content/uploads/2016/09/Capture-d’écran-2016-09-26-à-20.50.44.png" alt="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.
Expand Down
2 changes: 1 addition & 1 deletion _posts/2016-09-29-symfony-workflow-component.md
Expand Up @@ -118,7 +118,7 @@ $ bin/console workflow:dump pull_request

The generated Graphviz will give you the following diagram:

<img class="size-full wp-image-2288 aligncenter" src="http://blog.eleven-labs.com/wp-content/uploads/2016/09/Capture-d’écran-2016-09-26-à-20.50.44-1.png" alt="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.
Expand Down
4 changes: 2 additions & 2 deletions _posts/2016-12-01-creer-votre-premier-package-pour-atom.md
Expand Up @@ -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 :

<img class="size-full wp-image-2642 aligncenter" src="http://blog.eleven-labs.com/wp-content/uploads/2016/11/Capture-d’écran-2016-11-24-à-13.58.11.png" alt="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 :

Expand Down Expand Up @@ -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é !

<img class="size-full wp-image-2635 aligncenter" src="http://blog.eleven-labs.com/wp-content/uploads/2016/11/fusee.gif" alt="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`.

Expand Down
4 changes: 2 additions & 2 deletions _posts/2016-12-05-create-atom-package.md
Expand Up @@ -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:

<img class="size-full wp-image-2642 aligncenter" src="http://blog.eleven-labs.com/wp-content/uploads/2016/11/Capture-d’écran-2016-11-24-à-13.58.11.png" alt="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:

Expand Down Expand Up @@ -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.

<img class="size-full wp-image-2635 aligncenter" src="http://blog.eleven-labs.com/wp-content/uploads/2016/11/fusee.gif" alt="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.

Expand Down
2 changes: 1 addition & 1 deletion _posts/2017-01-20-redux-structure-frontend-applications.md
Expand Up @@ -21,7 +21,7 @@ Historically, this has been needed by [React](https://facebook.github.io/react/

Here is the philosophy:

<img class="size-full wp-image-3188 aligncenter" src="http://blog.eleven-labs.com/wp-content/uploads/2017/01/flux-diagram.png" alt="" />
![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.
Expand Down
Expand Up @@ -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 :

<img class="aligncenter size-full wp-image-3446" src="http://blog.eleven-labs.com/wp-content/uploads/2017/02/consul-checks.png" alt="" />
![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 :

Expand Down
Expand Up @@ -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:

<img class="aligncenter size-full wp-image-3445" src="http://blog.eleven-labs.com/wp-content/uploads/2017/02/consul-archi.png" alt="" />
![Consul Infrastructure Schema](/assets/2017-02-22-consul-service-discovery-failure/schema.png)

As you can see, we'll have 3 Docker machines:

Expand Down Expand Up @@ -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:

<img class="aligncenter size-full wp-image-3446" src="http://blog.eleven-labs.com/wp-content/uploads/2017/02/consul-checks.png" alt="" />
![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:

Expand Down
6 changes: 3 additions & 3 deletions _posts/2017-04-11-http2-nest-pas-le-futur-cest-le-present.md
Expand Up @@ -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 :

<img class="aligncenter size-full wp-image-3657" src="http://blog.eleven-labs.com/wp-content/uploads/2017/03/caniuse_http2.jpg" alt="" width="2520" height="566" />
![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.

Expand All @@ -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.

<img class="aligncenter size-full wp-image-3658" src="http://blog.eleven-labs.com/wp-content/uploads/2017/03/waterfall_http.jpg" alt="" width="1015" height="654" />
![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 :

<img class="aligncenter size-full wp-image-3659" src="http://blog.eleven-labs.com/wp-content/uploads/2017/03/waterfall_http2.jpg" alt="" width="943" height="652" />
![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.

Expand Down
6 changes: 3 additions & 3 deletions _posts/2017-04-12-http2-future-present.md
Expand Up @@ -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:

<img class="aligncenter size-full wp-image-3657" src="http://blog.eleven-labs.com/wp-content/uploads/2017/03/caniuse_http2.jpg" alt="" />
![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.

Expand All @@ -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).

<img class="aligncenter size-full wp-image-3658" src="http://blog.eleven-labs.com/wp-content/uploads/2017/03/waterfall_http.jpg" alt="" />
![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:

<img class="aligncenter size-full wp-image-3659" src="http://blog.eleven-labs.com/wp-content/uploads/2017/03/waterfall_http2.jpg" alt="" />
![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.

Expand Down
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 82e0b20

Please sign in to comment.