diff --git a/README.md b/README.md index df2760284..d1eeb12d5 100644 --- a/README.md +++ b/README.md @@ -144,19 +144,19 @@ You can use one of the solutions: To add images to your article, you will need to create the folder `_assets/articles/YYYY-MM-DD-slug/` and add your images there. Then in the markdown content, insert the tag: ```md -![alt of image]({{ site.baseurl }}/assets/YYYY-MM-DD-slug/image-name.png) +![alt of image]({BASE_URL}/imgs/articles/YYYY-MM-DD-slug/image-name.png) ``` To add an image with a figure and a figcaption you just need to write this syntax: ```md -![alt of image]({{ site.baseurl }}/assets/YYYY-MM-DD-slug/image-name.png) +![alt of image]({BASE_URL}/imgs/articles/YYYY-MM-DD-slug/image-name.png) Figure: *Source Github* ``` And to specify a size on the image, you can add the arguments (`width`, `height`, `maxWidth`, `maxHeight`) after the url: ```md -![alt of image]({{ site.baseurl }}/assets/YYYY-MM-DD-slug/image-name.png?width=500) +![alt of image]({BASE_URL}/imgs/articles/YYYY-MM-DD-slug/image-name.png?width=500) ``` > Warning: Don't add html in your markdown, you don't have to override the blog template in the markdown. diff --git a/_articles/en/2016-07-13-how-to-be-best-friend-with-the-http-cache.md b/_articles/en/2016-07-13-how-to-be-best-friend-with-the-http-cache.md index 5d88f989e..625dc0c54 100644 --- a/_articles/en/2016-07-13-how-to-be-best-friend-with-the-http-cache.md +++ b/_articles/en/2016-07-13-how-to-be-best-friend-with-the-http-cache.md @@ -157,7 +157,7 @@ It acts like the CDN, and the CDN belongs to the architecture. It often concerns #### The Web Server The web server also allows you to use the HTTP cache, it is generally used for the cache of assets (JS, CSS, images, etc.). Like Varnish, its advantage is to be very finely configurable. -![Architecture Http](/_assets/articles/2016-06-29-le-cache-http-votre-meilleur-ami/untitled.png) +![Architecture Http]({BASE_URL}/imgs/articles/2016-06-29-le-cache-http-votre-meilleur-ami/untitled.png) ### Customizing your HTTP cache diff --git a/_articles/en/2016-07-19-behat-structure-functional-tests.md b/_articles/en/2016-07-19-behat-structure-functional-tests.md index 3d5dab01d..af84ab405 100644 --- a/_articles/en/2016-07-19-behat-structure-functional-tests.md +++ b/_articles/en/2016-07-19-behat-structure-functional-tests.md @@ -35,7 +35,7 @@ Before we can go, please note that we will use a `Selenium` server which will r To be clear on the architecture we will use, here is a scheme that will resume the role of all elements: -!["Behat architecture schema"](/_assets/articles/2016-07-19-behat-structure-functional-tests/behat_en.jpg) +!["Behat architecture schema"]({BASE_URL}/imgs/articles/2016-07-19-behat-structure-functional-tests/behat_en.jpg) ## Behat set up First step is to install Behat and its extensions as dependencies in our `composer.json` file: diff --git a/_articles/en/2016-09-29-mtools-mongodb.md b/_articles/en/2016-09-29-mtools-mongodb.md index f1a6cfdd4..41eb57833 100644 --- a/_articles/en/2016-09-29-mtools-mongodb.md +++ b/_articles/en/2016-09-29-mtools-mongodb.md @@ -81,7 +81,7 @@ More info [here](https://github.com/rueckstiess/mtools/wiki/mlogfilter). Those tools allows you to generate graphics to visualize data in a human-readable format. We can see : calls distribution, type of commands, etc : -![mlogvis](/_assets/articles/2016-09-29-mtools-mongodb/mlogvis.png) +![mlogvis]({BASE_URL}/imgs/articles/2016-09-29-mtools-mongodb/mlogvis.png) More info on [Mlogvis](https://github.com/rueckstiess/mtools/wiki/mlogvis) & [Mplotqueries](https://github.com/rueckstiess/mtools/wiki/mplotqueries). @@ -133,6 +133,6 @@ This command is creating a MongoDB server with 5 replicas. Compass is a desktop client allowing you to browse and analyze data from a MongoDB database. Its goal is to allow a person to manipulate data without real knowledges on MongoDB querying. However, it's only available on Windows and MacOS yet. -![date-sample](/_assets/articles/2016-09-29-mtools-mongodb/date-sample.png) +![date-sample]({BASE_URL}/imgs/articles/2016-09-29-mtools-mongodb/date-sample.png) -![query-builder](/_assets/articles/2016-09-29-mtools-mongodb/query-builder.png) +![query-builder]({BASE_URL}/imgs/articles/2016-09-29-mtools-mongodb/query-builder.png) diff --git a/_articles/en/2016-09-29-symfony-workflow-component.md b/_articles/en/2016-09-29-symfony-workflow-component.md index 2fbf95ce7..3814e0a6f 100644 --- a/_articles/en/2016-09-29-symfony-workflow-component.md +++ b/_articles/en/2016-09-29-symfony-workflow-component.md @@ -119,7 +119,7 @@ $ bin/console workflow:dump pull_request The generated Graphviz will give you the following diagram: -![Workflow Graphviz](/_assets/articles/2016-09-29-symfony-workflow-component/workflow.png) +![Workflow Graphviz]({BASE_URL}/imgs/articles/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/_articles/en/2016-11-21-push-notification-website.md b/_articles/en/2016-11-21-push-notification-website.md index a0f6175cc..6876912c2 100644 --- a/_articles/en/2016-11-21-push-notification-website.md +++ b/_articles/en/2016-11-21-push-notification-website.md @@ -36,15 +36,15 @@ At this point, you should have access to your PWA at localhost:8080. If you hav Before getting into sending push notifications, we are going to go through the configuration. Yes! It's not magic, we are going to ask Google for authorization. Let's go to [Firebase](https://console.firebase.google.com/) to create a project. -![Firebase - créer un projet](/_assets/articles/2016-11-21-push-notification-website/newproject.png) +![Firebase - créer un projet]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/newproject.png) Feel free to choose any name for the project. Once you are on the dashboard, you have to click the small wheel, and then "Project settings". -![](/_assets/articles/2016-11-21-push-notification-website/settings-1.png) +![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/settings-1.png) In the "Cloud messaging" tab you'll find your sender ID. -![](/_assets/articles/2016-11-21-push-notification-website/cloud.png) +![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/cloud.png) In the manifest.json, available in the public folder of the application, you have to add at the end of the file the "gsm_sender_id" with the value of the sender ID. @@ -98,7 +98,7 @@ if('serviceWorker' in navigator) { As you would expect, if you restart your server, you'll have a request to accept the notifications. -![PWA - Autoriser les notifications](/_assets/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-15.34.14.png) +![PWA - Autoriser les notifications]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-15.34.14.png) You should also see in your console a message such as: @@ -109,7 +109,7 @@ endpoint: cV2kP3sOb24:APA91bHfZgFSPQ3CXyG9LejWdq9jOT-WqQpvK4peX9ZZtrfsHCf6OPEvDe This is the device token, we will use it to send a push notification. Since we want to do something clean (even if it's just a tutorial), we are going to use Firebase to store user tokens. To do so, let's go back to the Firebase console, and click "Web setup" in the "Authentication" tab. -![](/_assets/articles/2016-11-21-push-notification-website/web_setup.png) +![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/web_setup.png) The script installation is done in the HTML code, in files public/home.html and public/article/alorscettearticle.html. @@ -202,11 +202,11 @@ Before starting the server, you have to open permissions to Firebase in order fo } ``` -![](/_assets/articles/2016-11-21-push-notification-website/rules.png) +![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/rules.png) If you restart the server, you will see a token stored in the DB in the "Database" tab of Firebase. -![](/_assets/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-16.24.58.png) +![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-16.24.58.png) Now that the tokens are stored in the database, we are going to prepare a message that will appear when a push notification occurs. Let's add the following code to the file public/sw.js: @@ -262,15 +262,15 @@ It's almost ready! We are going to create a "/sender" url that will allow us t In the app.js file, we initialize Firebase. You are going to need a server key file. Click the wheel in Firebase, and then "Permissions". You are now taken to another console. -![](/_assets/articles/2016-11-21-push-notification-website/permissions.png) +![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/permissions.png) In "Service accounts", create a new account. -![](/_assets/articles/2016-11-21-push-notification-website/account.png) +![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/account.png) A json file will be downloaded, you need to add it to your project folder. -![JsonFile - Racine](/_assets/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-17.22.04.png) +![JsonFile - Racine]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-17.22.04.png) In the app.js file, we are going to add the route /sender that will send a request of a push notification with all the tokens. @@ -330,11 +330,11 @@ app.listen(8080, function () { Be careful! The authorization key is in the first tab that we opened. -![](/_assets/articles/2016-11-21-push-notification-website/cloud.png) +![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/cloud.png) If everything is ok, when you restart the server and go to / and then /sender, you will get a notification. If it isn't the case, clear the cache of your application in the chrome console. -![Enfin - la push notification](/_assets/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-17.46.23.png) +![Enfin - la push notification]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-17.46.23.png) Once again, this code is only a tutorial, I invite you to open issues for any question. The finale code is available [here](https://github.com/CaptainJojo/pwa-parisjs/tree/push). diff --git a/_articles/en/2016-12-05-create-atom-package.md b/_articles/en/2016-12-05-create-atom-package.md index f53e4e980..dfd760d0a 100644 --- a/_articles/en/2016-12-05-create-atom-package.md +++ b/_articles/en/2016-12-05-create-atom-package.md @@ -108,7 +108,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: -![Gitlab URL Parameter](/_assets/articles/2016-12-05-create-atom-package/gitlab-url.png) +![Gitlab URL Parameter]({BASE_URL}/imgs/articles/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: @@ -222,7 +222,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. -![Publish](/_assets/articles/2016-12-05-create-atom-package/publish.gif) +![Publish]({BASE_URL}/imgs/articles/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/_articles/en/2016-12-21-understanding-ssltls-part-1.md b/_articles/en/2016-12-21-understanding-ssltls-part-1.md index c5b7a3306..990c2d5d9 100644 --- a/_articles/en/2016-12-21-understanding-ssltls-part-1.md +++ b/_articles/en/2016-12-21-understanding-ssltls-part-1.md @@ -44,7 +44,7 @@ SSL and TLS are invisible to the user, and don't require a usage of protocol of _OSI Model with SSL/TLS_ -![tls-in-osi](/_assets/articles/2016-12-21-understanding-ssltls-part-1/tls-in-osi.png) +![tls-in-osi]({BASE_URL}/imgs/articles/2016-12-21-understanding-ssltls-part-1/tls-in-osi.png) _Bottom line:_ diff --git a/_articles/en/2017-01-12-mobile-development-start.md b/_articles/en/2017-01-12-mobile-development-start.md index 1ab9ed223..32ea13c31 100644 --- a/_articles/en/2017-01-12-mobile-development-start.md +++ b/_articles/en/2017-01-12-mobile-development-start.md @@ -43,7 +43,7 @@ Android's WebView is based on Chromium. For iOS, it's Safari, and it's Internet Thus, Ionic doesn't allow creating native mobile applications strictly speaking. We'll be talking about hybrid applications instead. -*Ionic representation schema*:![schema1](/_assets/articles/2017-01-12-mobile-development-start/Schema1.png) +*Ionic representation schema*:![schema1]({BASE_URL}/imgs/articles/2017-01-12-mobile-development-start/Schema1.png) I can see you coming: "AngularJS, great, I have it under control, let's go". @@ -90,7 +90,7 @@ But Ionic has weaknesses as well: *Compatibility table with Cordova:* -![platform-support](/_assets/articles/2017-01-12-mobile-development-start/platform-support.png) +![platform-support]({BASE_URL}/imgs/articles/2017-01-12-mobile-development-start/platform-support.png) **Conclusion:** diff --git a/_articles/en/2017-01-20-redux-structure-frontend-applications.md b/_articles/en/2017-01-20-redux-structure-frontend-applications.md index 5224649ed..2bff92924 100644 --- a/_articles/en/2017-01-20-redux-structure-frontend-applications.md +++ b/_articles/en/2017-01-20-redux-structure-frontend-applications.md @@ -23,7 +23,7 @@ Historically, this has been needed by [React](https://facebook.github.io/react/ Here is the philosophy: -![Flux Diagram](/_assets/articles/2017-01-20-redux-structure-frontend-applications/flux-diagram.png) +![Flux Diagram]({BASE_URL}/imgs/articles/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/_articles/en/2017-01-31-rabbitmq-publish-consume-retry-messages.md b/_articles/en/2017-01-31-rabbitmq-publish-consume-retry-messages.md index 085a5c3ed..193a686c9 100644 --- a/_articles/en/2017-01-31-rabbitmq-publish-consume-retry-messages.md +++ b/_articles/en/2017-01-31-rabbitmq-publish-consume-retry-messages.md @@ -6,7 +6,7 @@ slug: rabbitmq-publish-consume-retry-messages title: 'RabbitMQ: Publish, Consume, and Retry Messages' excerpt: >- ![Swarrot - Logo](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png) + Logo]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png) categories: - php authors: @@ -16,7 +16,7 @@ keywords: - rabbitmq - symfony --- -![Swarrot Logo](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png) +![Swarrot Logo]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png) RabbitMQ is a message broker, allowing to process things asynchronously. There's already an [article](https://blog.eleven-labs.com/fr/creer-rpc-rabbitmq/) written about it, if you're not familiar with RabbitMQ. @@ -77,11 +77,11 @@ Create binding between exchange default and queue send_astronaut_to_space (with If you connect to the RabbitMQ management interface (ex: http://127.0.0.1:15672/), many things will appear: -![Capture of exchanges created](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_exchanges.png) +![Capture of exchanges created]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_exchanges.png) Click on the _Exchanges_ tab: an exchange named _default_ has been created, with a binding to our queue as indicated in our terminal. -![Capture of queues created](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_queues.png) +![Capture of queues created]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_queues.png) Now click on the _Queues_ tab: _send_astronaut_to_space_ is also here. diff --git a/_articles/en/2017-02-22-consul-service-discovery-failure-detection.md b/_articles/en/2017-02-22-consul-service-discovery-failure-detection.md index 9d56a446d..44c6277b2 100644 --- a/_articles/en/2017-02-22-consul-service-discovery-failure-detection.md +++ b/_articles/en/2017-02-22-consul-service-discovery-failure-detection.md @@ -37,7 +37,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/articles/2017-02-22-consul-service-discovery-failure/schema.png) +![Consul Infrastructure Schema]({BASE_URL}/imgs/articles/2017-02-22-consul-service-discovery-failure/schema.png) As you can see, we'll have 3 Docker machines: @@ -265,7 +265,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/articles/2017-02-22-consul-service-discovery-failure/checks.png) +![Consul Infrastructure Schema]({BASE_URL}/imgs/articles/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/_articles/en/2017-03-15-cqrs-pattern-2.md b/_articles/en/2017-03-15-cqrs-pattern-2.md index 5a5c42736..40151af6f 100644 --- a/_articles/en/2017-03-15-cqrs-pattern-2.md +++ b/_articles/en/2017-03-15-cqrs-pattern-2.md @@ -21,7 +21,7 @@ A command is defined as a method that changes state. On the contrary, a query on The following schema shows a basic implementation of the CQRS pattern inside an application. All messages are sent through commands and events. Let's take a closer look at this. -![Example of implementation of CQRS pattern](/_assets/articles/2015-04-07-cqrs-pattern/cqrs_pattern.png) +![Example of implementation of CQRS pattern]({BASE_URL}/imgs/articles/2015-04-07-cqrs-pattern/cqrs_pattern.png) *Example of implementation of CQRS pattern* We can clearly see the separation between writing parts and reading ones: the user does a modification on his page, resulting in a command being executed. Once this command is fully handled, an event is dispatched to signal a modification. diff --git a/_articles/en/2017-04-12-http2-future-present.md b/_articles/en/2017-04-12-http2-future-present.md index a4887883b..e8dd01dcc 100644 --- a/_articles/en/2017-04-12-http2-future-present.md +++ b/_articles/en/2017-04-12-http2-future-present.md @@ -32,7 +32,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/articles/2017-04-12-http2-future-present/caniuse.jpg) +![Can I use HTTP/2?]({BASE_URL}/imgs/articles/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. @@ -52,13 +52,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/articles/2017-04-12-http2-future-present/waterfall_http.jpg) +![Waterfall HTTP?]({BASE_URL}/imgs/articles/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/articles/2017-04-12-http2-future-present/waterfall_http2.jpg) +![Waterfall HTTP/2?]({BASE_URL}/imgs/articles/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/_articles/en/2017-04-20-upload-file-ajax.md b/_articles/en/2017-04-20-upload-file-ajax.md index 25e8c878d..31ad1f90e 100644 --- a/_articles/en/2017-04-20-upload-file-ajax.md +++ b/_articles/en/2017-04-20-upload-file-ajax.md @@ -269,7 +269,7 @@ A **ProgressEvent** object passed to the **onUploadProgress** callback function. Small demo in GIF and full code here [https://github.com/lepiaf/file-upload](https://github.com/lepiaf/file-upload) -![](/_assets/articles/2017-04-20-upload-file-ajax/upload.gif) +![]({BASE_URL}/imgs/articles/2017-04-20-upload-file-ajax/upload.gif) ### To conclude diff --git a/_articles/en/2017-06-14-amp-web-3-0.md b/_articles/en/2017-06-14-amp-web-3-0.md index 168b14e35..5439f2693 100644 --- a/_articles/en/2017-06-14-amp-web-3-0.md +++ b/_articles/en/2017-06-14-amp-web-3-0.md @@ -24,11 +24,11 @@ Google, the undisputed leader in web services (search, pub, analytics ...), has If you follow the digital news and use google search a lot, you have very likely already seen the following "cards" in your mobile searches : -![](/_assets/articles/2017-06-14-amp-web-3-0/croped-1.png) +![]({BASE_URL}/imgs/articles/2017-06-14-amp-web-3-0/croped-1.png) Yes, that's AMP. A place of choice in Google search, but also a new way of browsing between websites. Indeed, if you click on one of the cards you will not be on the website that sent the content (you will understand why later) but you will stay at Google's, which will allow you to slide between each page of the search: -![](/_assets/articles/2017-06-14-amp-web-3-0/capture-decran-2017-05-29-a-10.38.18.png) +![]({BASE_URL}/imgs/articles/2017-06-14-amp-web-3-0/capture-decran-2017-05-29-a-10.38.18.png) Interesting don't you think? But there is more to it, if you look more carefully you will realize that the AMP website is vastly faster than your own. diff --git a/_articles/en/2017-07-05-take-care-your-mails.md b/_articles/en/2017-07-05-take-care-your-mails.md index 70ad9e828..3d6a26ea0 100644 --- a/_articles/en/2017-07-05-take-care-your-mails.md +++ b/_articles/en/2017-07-05-take-care-your-mails.md @@ -24,15 +24,15 @@ The most common mean of communication between a provider and its customer is the You should have seen it in your Gmail mailbox, in some cases your mails have a different display or even an extra button (like a call-to-action). -![](/_assets/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-20.20.36.png) +![]({BASE_URL}/imgs/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-20.20.36.png) > Example: Booking an event -![](/_assets/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-20.26.14.png) +![]({BASE_URL}/imgs/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-20.26.14.png) > Example: Your next trip -![](/_assets/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-20.29.24.png) +![]({BASE_URL}/imgs/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-20.29.24.png) > Exemple: Un call-to-action @@ -178,9 +178,9 @@ As Google knows you better than yourself, you can do Google searches that will p I invite you to type **my flights**, **my orders**, **my reservations**, you will be surprised. -![](/_assets/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-21.11.52.png) +![]({BASE_URL}/imgs/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-21.11.52.png) -![](/_assets/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-21.11.11.png) +![]({BASE_URL}/imgs/articles/2017-07-05-take-care-your-mails/capture-decran-2017-05-30-a-21.11.11.png) ### Conclusion diff --git a/_articles/en/2017-07-19-video-live-dash-hls.md b/_articles/en/2017-07-19-video-live-dash-hls.md index 73af3e3d5..1d3f1eb15 100644 --- a/_articles/en/2017-07-19-video-live-dash-hls.md +++ b/_articles/en/2017-07-19-video-live-dash-hls.md @@ -35,7 +35,7 @@ Major streaming platforms use this protocol to serve their live video streams or A diagram explains it better than a long speech: -![Operating diagram- HLS ]({{ site.baseurl }}/assets/2017-07-12-video-live-dash-hls/diagram_HLS.png) +![Operating diagram- HLS ]({BASE_URL}/imgs/articles/2017-07-12-video-live-dash-hls/diagram_HLS.png) Here we see the workflow that allows the raw audio/video to reach the client as a stream. The segmented files, usually in MPEG-2 TS format, are accessed via a "manifest", an index file in M3U format that describes content segments as well as metadata that the client can/must use. This file is basically an URL playlist. @@ -85,7 +85,7 @@ live/low.m3u8 Each `#EXT-X-STREAM-INF` tag indicates the data needed to read the segment, each of them of a given quality and encoding. Thus, the compatible client will be able to switch from one quality to another in real time, depending on the available bandwidth or the user's choice. The following diagram illustrates this possibility very well: -![M3U file - HLS ]({{ site.baseurl }}/assets/2017-07-12-video-live-dash-hls/HLS_Figure_1.jpg) +![M3U file - HLS ]({BASE_URL}/imgs/articles/2017-07-12-video-live-dash-hls/HLS_Figure_1.jpg) ### JS library @@ -125,7 +125,7 @@ DASH, in addition to being ISO-standardized, has several features not found in o Once again, let's use a good diagram: -![Operating diagram - DASH ]({{ site.baseurl }}/assets/2017-07-12-video-live-dash-hls/diagram_DASH.png) +![Operating diagram - DASH ]({BASE_URL}/imgs/articles/2017-07-12-video-live-dash-hls/diagram_DASH.png) The different sequences of content are again of a given size, quality and encoding and are sent to the client via HTTP. The client is responsible for selecting and displaying the sequences in the desired quality. And always in the right order. Trust me, this is important. diff --git a/_articles/en/2017-08-03-continuous-improvement-how-to-run-agile-retrospective.md b/_articles/en/2017-08-03-continuous-improvement-how-to-run-agile-retrospective.md index 54c39799e..be43fd5f2 100644 --- a/_articles/en/2017-08-03-continuous-improvement-how-to-run-agile-retrospective.md +++ b/_articles/en/2017-08-03-continuous-improvement-how-to-run-agile-retrospective.md @@ -5,8 +5,7 @@ date: '2017-08-03' slug: continuous-improvement-how-to-run-agile-retrospective title: 'Continuous improvement: how to run your Agile retrospective?' excerpt: "We usually share\_on this blog our technical expertise around web and mobile development or\_architecture. Today, I would like to address another expertise, equally important: our methodology." -cover: >- - /assets/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-heart-retrospective.jpg +cover: /assets/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-heart-retrospective.jpg categories: - agile authors: @@ -24,7 +23,7 @@ At Eleven Labs, our agile methodology is mainly based on the SCRUM framework. I We will focus on the SCRUM sprint retrospective in the context of a web development project, but most of the tools mentioned here could be used with any other agile frameworks and almost all types of projects. -[![SCRUM Sprint Retrospective](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/eleven-labs-scrum-sprint-focus-retrospective.png)](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/eleven-labs-scrum-sprint-focus-retrospective.png) +[![SCRUM Sprint Retrospective]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/eleven-labs-scrum-sprint-focus-retrospective.png)]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/eleven-labs-scrum-sprint-focus-retrospective.png) *
SCRUM Sprint Retrospective
* @@ -99,7 +98,7 @@ If the team is globally not confident enough to discuss any subjects, possibly t In the same way, the 5 grades of the Safety Check described above can be displayed in a funny way, using pictures, characters or smileys reflecting the level of confidence. -[![Mood Board with Eleven Labs astronauts](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/astronauts-mood-board.jpg)](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/astronauts-mood-board.jpg) +[![Mood Board with Eleven Labs astronauts]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/astronauts-mood-board.jpg)]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/astronauts-mood-board.jpg) *
Mood Board with Eleven Labs astronauts
* @@ -118,7 +117,7 @@ The most common practice, and usually the most efficient, is to ask to everyone - or a metaphorical declination of a boat, symbolizing the team: the facilitator draws a boat, half under water, half above water, with its sail allowing it to move, its anchor slowing it down and attracting it to the ocean ground, and the wind which has the potential to make it move faster. - In the end you can even come up with your very own categories. At Eleven Labs we are quite fond of these ones: **'⊕ Positive Points', '⊖ Negative Points', '✨ Improvement ideas', '❤ Special thanks'** -[![Post-its, as used during our retrospectives](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-retrospective.jpg)](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-retrospective.jpg) +[![Post-its, as used during our retrospectives]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-retrospective.jpg)]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-retrospective.jpg) *
Post-its, as used during our retrospectives
* diff --git a/_articles/en/2017-08-18-how-to-check-the-spelling-of-your-docs-from-travis-ci.md b/_articles/en/2017-08-18-how-to-check-the-spelling-of-your-docs-from-travis-ci.md index ee7142e44..66f2d63db 100644 --- a/_articles/en/2017-08-18-how-to-check-the-spelling-of-your-docs-from-travis-ci.md +++ b/_articles/en/2017-08-18-how-to-check-the-spelling-of-your-docs-from-travis-ci.md @@ -7,8 +7,7 @@ title: How to check the spelling of your docs from Travis CI? excerpt: >- We will show you how to check the spelling in your markdown documents, changed in your pull requests, very easily using Aspell and Travis CI -cover: >- - /assets/2017-08-18-how-to-check-the-spelling-of-your-docs-from-travis-ci/typing.jpg +cover: /assets/2017-08-18-how-to-check-the-spelling-of-your-docs-from-travis-ci/typing.jpg categories: [] authors: - charles-eric diff --git a/_articles/en/2017-08-23-feedback-on-a-live-coding-to-discover-go-language.md b/_articles/en/2017-08-23-feedback-on-a-live-coding-to-discover-go-language.md index bfad7aa09..4036068fc 100644 --- a/_articles/en/2017-08-23-feedback-on-a-live-coding-to-discover-go-language.md +++ b/_articles/en/2017-08-23-feedback-on-a-live-coding-to-discover-go-language.md @@ -7,8 +7,7 @@ title: Feedback on a live-coding to discover Go language excerpt: >- This blog post follows a workshop / live-coding session I organized at Eleven Labs for an initiation to Go language. -cover: >- - /assets/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/cover.jpg +cover: /assets/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/cover.jpg categories: [] authors: - vcomposieux @@ -43,7 +42,7 @@ The idea is pretty simple: Before going into details, here is a diagram representing the features of our library: -![WorkMQ Diagram](/_assets/articles/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/schema.jpg) +![WorkMQ Diagram]({BASE_URL}/imgs/articles/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/schema.jpg) As you can see on this diagram, we have four `Queues` defined and each of them has three `Workers`. @@ -356,7 +355,7 @@ In this code, we loop over each queue to display counters data on output. In order to let you have a better visualization of the output, here is a sample: -![HTTP Output](/_assets/articles/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/output.gif) +![HTTP Output]({BASE_URL}/imgs/articles/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/output.gif) Conclusion ---------- diff --git a/_articles/en/2017-08-24-api-platform-en.md b/_articles/en/2017-08-24-api-platform-en.md index 15e94d325..10084eede 100644 --- a/_articles/en/2017-08-24-api-platform-en.md +++ b/_articles/en/2017-08-24-api-platform-en.md @@ -52,7 +52,7 @@ Last but not least, we need to update the database to be able to play with our m bin/console do:sche:update --force vendor/bin/schema generate-types src/ app/config/schema.yml ``` -![](/_assets/articles/2017-07-25-api-platform/api_platform_movies.png) +![]({BASE_URL}/imgs/articles/2017-07-25-api-platform/api_platform_movies.png) Accessing documentation, you see that the _Movie_ resource is here, with all operations like creating, updating, and deleting. You can play with the interface and the auto-generated documentation before we go on and see another feature used many times in API: filters. diff --git a/_articles/en/2017-09-03-migrate-a-react-client-side-application-into-a-server-side-with-nextjs.md b/_articles/en/2017-09-03-migrate-a-react-client-side-application-into-a-server-side-with-nextjs.md index b2763f185..f7fdf0d2f 100644 --- a/_articles/en/2017-09-03-migrate-a-react-client-side-application-into-a-server-side-with-nextjs.md +++ b/_articles/en/2017-09-03-migrate-a-react-client-side-application-into-a-server-side-with-nextjs.md @@ -7,8 +7,7 @@ title: Migrate a React client-side application to server-side with Next.JS excerpt: >- Most of the front-end applications using React that I've been able to work on are browser-based (client-side) applications. -cover: >- - /assets/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs/cover.jpg +cover: /assets/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs/cover.jpg categories: - javascript authors: diff --git a/_articles/en/2017-11-08-git-bisect.md b/_articles/en/2017-11-08-git-bisect.md index 808c7170d..1e056bee9 100644 --- a/_articles/en/2017-11-08-git-bisect.md +++ b/_articles/en/2017-11-08-git-bisect.md @@ -43,7 +43,7 @@ The problem is immediately brought to developers and they have to isolate the ca Git takes away the boredom of testing our commits one by one with `git bisect`. This command does a [binary search](https://en.wikipedia.org/wiki/Binary_search_algorithm) in our history. -![](/_assets/articles/2017-10-26-debugging-with-git/binary_search.jpg) +![]({BASE_URL}/imgs/articles/2017-10-26-debugging-with-git/binary_search.jpg) At every step of the binary search, we must tell `git bisect` if the issue still persists. According to our response, `bisect` will go forward or backward to isolate the issue. diff --git a/_articles/en/2017-12-04-deploy-a-replicated-mongodb-on-aws-with-terraform-and-ansible.md b/_articles/en/2017-12-04-deploy-a-replicated-mongodb-on-aws-with-terraform-and-ansible.md index 3f9caa1e3..f01ad1eb5 100644 --- a/_articles/en/2017-12-04-deploy-a-replicated-mongodb-on-aws-with-terraform-and-ansible.md +++ b/_articles/en/2017-12-04-deploy-a-replicated-mongodb-on-aws-with-terraform-and-ansible.md @@ -9,8 +9,7 @@ excerpt: >- Services (AWS). In order to limit the problems of crash and data loss, it is also replicated with two other servers, ideally in a different geographical area to ensure high availability. -cover: >- - /assets/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs/cover.jpg +cover: /assets/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs/cover.jpg categories: [] authors: - vcomposieux @@ -37,7 +36,7 @@ What is important to note is that only the `primary` server will be able to read This is the target infrastructure we are looking for, for this replication: -![MongoDB Replication](/_assets/articles/2017-11-01-deployer-un-mongodb-replique-sur-aws-avec-terraform-et-ansible/replication.svg) +![MongoDB Replication]({BASE_URL}/imgs/articles/2017-11-01-deployer-un-mongodb-replique-sur-aws-avec-terraform-et-ansible/replication.svg) As you can see on this diagram, only the primary node is used for read/write, the other two replicas are there to synchronize the updated data of the primary server in real time as well as for the purpose of eventually becoming primary in turn, in case the current primary server would become unavailable. diff --git a/_articles/en/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony.md b/_articles/en/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony.md index ab22d93a6..855545233 100644 --- a/_articles/en/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony.md +++ b/_articles/en/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony.md @@ -10,8 +10,7 @@ excerpt: >- The purpose of this post is to show the power of a Slack bot that can be used to ease everyday life in your company, and how to implement it using DialoFlow and Symfony -cover: >- - /assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/cover.jpg +cover: /assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/cover.jpg categories: - php authors: @@ -80,19 +79,19 @@ First we have to create a Slack app. Login to your Slack account related to your company's Workspace. Then go to [https://api.slack.com/apps](https://api.slack.com/apps) and click on 'Create New App'. -[![Create Slack App]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_create_app.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_create_app.png) +[![Create Slack App]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_create_app.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_create_app.png) Then it's yours to fill all information about your app: name, description, color, icon. After that, you'll be able to access other following configurations from the screen 'Basic Information': -[![Slack App Basic Information]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_basic_info.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_basic_info.png) +[![Slack App Basic Information]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_basic_info.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_basic_info.png) ### Create a bot Now you need to create a bot user related to this app. To do so, let's go to the left menu 'Bot Users' or from 'Basic Information' > 'Add features and functionality' > 'Bots'. -[![Slack Bot]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_bot.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_bot.png) +[![Slack Bot]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_bot.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_bot.png) You only have to add a name for this bot, and make it visible "online". @@ -102,7 +101,7 @@ Then go to the menu 'Event Subscriptions', fill in the **URL of your future webh You also need to select the event "**message.im**" in order for Slack to call the previous webhook each time a private message is sent to the bot user. -[![Slack Event Subscriptions]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_event_subscription.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_event_subscription.png) +[![Slack Event Subscriptions]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_event_subscription.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_event_subscription.png) The requests sent to this webhook must be secured with a token that will be used in the last step: please write down the value of the '**Verification Token**' displayed on the page 'Basic Information' that you will need later. @@ -134,13 +133,13 @@ Then create a new **agent** (button 'Create New Agent') and select the default l The 'intents' correspond to different types of messages received from the user, that we need to understand. We will configure three of them for this blog post: -[![DialogFlow intents]({{site.baseurl}}/assets/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intents.png)]({{site.baseurl}}/assets/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intents.png) +[![DialogFlow intents]({BASE_URL}/imgs/articles/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intents.png)]({BASE_URL}/imgs/articles/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intents.png) #### 1. First intent, the most interesting one that we will call '**Leave request with start and end dates**': We're gonna list in the part '**User says**' all possible inputs which could be sent by astronauts who send their leave requests. -[![DialogFlow intent dates input]({{site.baseurl}}/assets/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intent_dates_input.png)]({{site.baseurl}}/assets/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intent_dates_input.png) +[![DialogFlow intent dates input]({BASE_URL}/imgs/articles/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intent_dates_input.png)]({BASE_URL}/imgs/articles/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intent_dates_input.png) For each of these inputs, we select the most interesting parts, in yellow and orange on the picture just above. These parts correspond to the dates of the vacation that we need to identify and save. @@ -148,7 +147,7 @@ These selected parts are related to parameters that we can name as '**startDate* Finally, we can configure the answers that will be sent back by DialogFlow when we will send this message type, if it recognizes it: -[![DialogFlow intent dates output]({{site.baseurl}}/assets/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intent_dates_output.png)]({{site.baseurl}}/assets/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intent_dates_output.png) +[![DialogFlow intent dates output]({BASE_URL}/imgs/articles/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intent_dates_output.png)]({BASE_URL}/imgs/articles/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/dialogflow_intent_dates_output.png) We notice there are two types of answers: - texts that we will use to answer the astronaut on Slack. @@ -521,11 +520,11 @@ Indeed if your webhook returns an **HTTP error** code, Slack will call many time **Demonstration**: here is the discussion I had with our awesome bot: -[![Demonstration]({{site.baseurl}}/assets/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/slack_demo1.png)]({{site.baseurl}}/assets/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/slack_demo1.png) +[![Demonstration]({BASE_URL}/imgs/articles/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/slack_demo1.png)]({BASE_URL}/imgs/articles/2018-01-04-replace-erp-by-slack-bot-with-dialogflow-and-symfony/slack_demo1.png) And here is the result in our database: -[![Results from the database]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo2.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo2.png) +[![Results from the database]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo2.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo2.png) We notice our friend Google managed to recognize the dates that were written in full English and allowed us to save the dates with a 'datetime' format in our database: big thanks to him! diff --git a/_articles/en/2019-05-09-manage-translations-with-localise.biz.md b/_articles/en/2019-05-09-manage-translations-with-localise.biz.md index 07ee2dee9..7769e32b6 100644 --- a/_articles/en/2019-05-09-manage-translations-with-localise.biz.md +++ b/_articles/en/2019-05-09-manage-translations-with-localise.biz.md @@ -28,14 +28,14 @@ As part of our project, we needed a translation management tool. We have 3 langu First, we need to create a user account. Once our account is created, we start by creating a project and choose a main language for this project which will serve as a basis for translations. The same user can be part of several projects. -![loco_create]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/create.png "create project") +![loco_create]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/create.png "create project") We can then add all the languages we need in our application, whether it be in a standard format, ISO2, or custom languages for more specific needs. The interface is quite simple and intuitive. With all the filters availables, it becomes easy to work on this interface without any issues. -![loco_translate]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/translate.png "translate") +![loco_translate]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/translate.png "translate") ## Features @@ -50,12 +50,12 @@ For example, when the development team creates translation keys, they can put th Then, when the translations have been done and validated by the people whose responsibility it is, the status is modified, allowing to filter on the assets that are to be translated yet, thus simplifying their work. -![loco_statuses]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/status.png "statuses") +![loco_statuses]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/status.png "statuses") Moreover, it is possible to assign tags to assets. This was useful for us to prepare releases in particular. -![loco_tags]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/tags.png "tags") +![loco_tags]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/tags.png "tags") ### Import / export @@ -63,7 +63,7 @@ Of course, when migrating to a new solution, we do not want to create the transl Loco has a very complete import / export system with a wide range of formats (JSON, CSV, etc.). We can also use all the filters in our exports. I'll let you take a look at their documentation with all the details if needed. -![loco_export]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/export.png "export") +![loco_export]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/export.png "export") ### REST API diff --git a/_articles/en/2020-01-08-let-s-think-outside-the-box.md b/_articles/en/2020-01-08-let-s-think-outside-the-box.md index 3a5c9409d..61ffdb4ef 100644 --- a/_articles/en/2020-01-08-let-s-think-outside-the-box.md +++ b/_articles/en/2020-01-08-let-s-think-outside-the-box.md @@ -405,10 +405,10 @@ Our beautiful app runs and what's happening? For what we can see in the simulator, our app launches, displays our dummy screen, then opens Safari and navigates to the website of **Eleven-Labs**.
Hum, that's funny, it reminds me of the action we defined in the third module.

-![AppVideo]({{ site.baseurl }}/assets/2018-05-21-let-s-think-outside-the-box/appvideo.gif)

+![AppVideo]({BASE_URL}/imgs/articles/2018-05-21-let-s-think-outside-the-box/appvideo.gif)

If we know have a look at the log console, we can see some outpouts.
But those outputs, we are familiar with them, aren't they the ones defined in the two first modules?!

-![ConsoleOutput]({{ site.baseurl }}/assets/2018-05-21-let-s-think-outside-the-box/console-output.png)

+![ConsoleOutput]({BASE_URL}/imgs/articles/2018-05-21-let-s-think-outside-the-box/console-output.png)

I think that you start to understand, right?
All the actions that we defined in the **JSON** file, and that really exist in our modules are then executed.
Pretty cool isn't it? :) diff --git a/_articles/en/2020-05-06-php-serverless-part-1.md b/_articles/en/2020-05-06-php-serverless-part-1.md index 04cd0650f..93d4a8f9b 100644 --- a/_articles/en/2020-05-06-php-serverless-part-1.md +++ b/_articles/en/2020-05-06-php-serverless-part-1.md @@ -59,7 +59,7 @@ Another constraint is the **maximum execution time** of a function. It varies de There are also **limitations** related to memory, the maximum size of the packages you deploy and the available disk space. Below is an excerpt from the limitations of AWS Lambda to give you an idea. -![]({{ site.baseurl }}/assets/2020-05-06-php-serverless-part-1/aws-limitations.png) +![]({BASE_URL}/imgs/articles/2020-05-06-php-serverless-part-1/aws-limitations.png) Another point to keep in mind is that the **price** of our infrastructure can be **unpredictable**. Since the cloud provider takes care of everything, we therefore have no control over how it manages resources, and in the event of an unforeseen event which places a lot of demand on our serverless functions, the price could rise. Rest assured, it is nevertheless possible to create alerts and be notified by your cloud provider if you exceed a certain amount. diff --git a/_articles/en/2020-05-13-php-serverless-part-2.md b/_articles/en/2020-05-13-php-serverless-part-2.md index 0801279fa..1c15fb958 100644 --- a/_articles/en/2020-05-13-php-serverless-part-2.md +++ b/_articles/en/2020-05-13-php-serverless-part-2.md @@ -380,7 +380,7 @@ layers: My application is available on the URL indicated in the endpoints. Here is the result: -![]({{ site.baseurl }}/assets/2020-05-07-php-serverless-part-2/example.png) +![]({BASE_URL}/imgs/articles/2020-05-07-php-serverless-part-2/example.png) That's it. We just deployed a Symfony application to AWS Lambda using Bref! As you can see, it is a pretty straight forward process... diff --git a/_articles/en/2020-07-01-you-are-using-states-wrong.md b/_articles/en/2020-07-01-you-are-using-states-wrong.md index 28b96aa77..3641f6528 100644 --- a/_articles/en/2020-07-01-you-are-using-states-wrong.md +++ b/_articles/en/2020-07-01-you-are-using-states-wrong.md @@ -30,7 +30,7 @@ A **state** is a set of variables which defines a component at a given time. In Now that we've gone over the basics, let's take a look at what's good and what's not. -![]({{ site.baseurl }}/assets/2020-05-20-vous-utilisez-mal-les-states/bien-pas-bien.gif) +![]({BASE_URL}/imgs/articles/2020-05-20-vous-utilisez-mal-les-states/bien-pas-bien.gif) ## You will not mutate your state diff --git a/_articles/en/2020-09-16-https-part-1.md b/_articles/en/2020-09-16-https-part-1.md index 647b6c914..79bcde41c 100644 --- a/_articles/en/2020-09-16-https-part-1.md +++ b/_articles/en/2020-09-16-https-part-1.md @@ -36,7 +36,7 @@ HTTP (HyperText Transfer Protocol) is the communication protocol used on the web Without the secure - encrypted - layer of HTTPS, all communication is done "in clear", that is to say potentially readable or even modifiable by anyone between you (the client) and the server. HTTPS, by encrypting the communication through SSL/TLS, protects the data traveling through HTTP by making it understandable only to the recipient. To make sure that the recipient server is the one it claims to be, HTTPS authenticates the target with certificates, usually called "SSL Certificates". -![HTTP-VS-HTTPS]({{site.baseurl}}/assets/2018-05-09-https-part-01/http-vs-https.png) +![HTTP-VS-HTTPS]({BASE_URL}/imgs/articles/2018-05-09-https-part-01/http-vs-https.png) ## Le HTTPS : pourquoi est-ce si important ? @@ -45,7 +45,7 @@ Without the secure - encrypted - layer of HTTPS, all communication is done "in c As I said before, in simple HTTP all communications are transparent, therefore fully accessible to anyone between you and the server. Taking advantage of such a situation is called a "Man-in-the-middle" attack. Take a look at the diagram below: -![man-in-the-middle]({{site.baseurl}}/assets/2018-05-09-https-part-01/man-in-the-middle.png) +![man-in-the-middle]({BASE_URL}/imgs/articles/2018-05-09-https-part-01/man-in-the-middle.png) Here, Helen communicates with the website "http://www.example.com" in simple HTTP. Thus, the password she sent is fully visible to the attacker. Carol, visibly wiser or at least luckier, communicates with the site "https://www.example.com" in HTTPS. In this way, the attacker sees only the encrypted and therefore useless version of the password. @@ -59,7 +59,7 @@ As an Internet user, only your vigilance will save you. If the sites you visit d It is therefore up to the managers of the websites you visit to set up HTTPS. Today (as of August 2020 at least), about 80% of the websites visited are already encrypted according to Mozilla Firefox statistics (visible in particular on the page [Let's Encrypt telemetry](https://letsencrypt.org/stats/) : -![graphique-progression-HTTPS]({{site.baseurl}}/assets/2018-05-09-https-part-01/graph_HTTPS_use.png) +![graphique-progression-HTTPS]({BASE_URL}/imgs/articles/2018-05-09-https-part-01/graph_HTTPS_use.png) ## HTTPS: as an administrator, is it complicated to set up? diff --git a/_articles/en/2020-09-23-https-part-2.md b/_articles/en/2020-09-23-https-part-2.md index b0b18bf2b..95e524ac4 100644 --- a/_articles/en/2020-09-23-https-part-2.md +++ b/_articles/en/2020-09-23-https-part-2.md @@ -19,7 +19,7 @@ keywords: --- ## Introduction -As we have seen in [the first part]({{site.baseurl}}/https-part-1/) of this article dedicated to HTTPS, regarding web communication, security is essential. This second part is dedicated to its implementation, to show how easy it is to deploy free certificates, valid for 90 days and issued by a certified authority. To do so we will use Docker, Certbot and Nginx on a Linux server. Although this article does not deal with other web servers (like Apache for example), it is of course possible to implement HTTPS on those as well. +As we have seen in [the first part]({BASE_URL}/en/https-part-1/) of this article dedicated to HTTPS, regarding web communication, security is essential. This second part is dedicated to its implementation, to show how easy it is to deploy free certificates, valid for 90 days and issued by a certified authority. To do so we will use Docker, Certbot and Nginx on a Linux server. Although this article does not deal with other web servers (like Apache for example), it is of course possible to implement HTTPS on those as well. ## Prerequisites diff --git a/_articles/en/2020-11-18-munin-monitoring-odin.md b/_articles/en/2020-11-18-munin-monitoring-odin.md index 946654139..8551d97a4 100644 --- a/_articles/en/2020-11-18-munin-monitoring-odin.md +++ b/_articles/en/2020-11-18-munin-monitoring-odin.md @@ -83,7 +83,7 @@ sudo service munin-node restart The static files of the web interface should now be available in the folder indicated previously in the configuration (line `htmldir`): -![]({{ site.baseurl }}/assets/2020-04-29-munin-monitoring-odin/eleven-master.png) +![]({BASE_URL}/imgs/articles/2020-04-29-munin-monitoring-odin/eleven-master.png) The monitoring of your "Master" machine is now set up. Now let's see what happens next. @@ -140,6 +140,6 @@ sudo service munin-node restart After a few minutes, by the time Munin retrieves the information from the newly added Node, you should see your second machine appear in the web interface: -![]({{ site.baseurl }}/assets/2020-04-29-munin-monitoring-odin/eleven-node.png) +![]({BASE_URL}/imgs/articles/2020-04-29-munin-monitoring-odin/eleven-node.png) Your instance of Munin is now fully set up. You can configure specific monitoring tools (apache, mysql, nginx, etc) at any time, thanks to [plugins from the community](http://gallery.munin-monitoring.org/). diff --git a/_articles/en/2020-12-09-monitor-your-docker-containers.md b/_articles/en/2020-12-09-monitor-your-docker-containers.md index a67ff94a4..65de3fad9 100644 --- a/_articles/en/2020-12-09-monitor-your-docker-containers.md +++ b/_articles/en/2020-12-09-monitor-your-docker-containers.md @@ -57,7 +57,7 @@ For starters, we're going to quickly install an app, take for example [Api Platf ``` We now have access to the documentation for the API you just installed. -![api]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/api.png) +![api]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/api.png) ## cAdvisor @@ -99,11 +99,11 @@ Let's restart `docker-compose`. We can now access `cAdvisor`'s interface. -![cadvisor]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/cadvisor.png) +![cadvisor]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/cadvisor.png) This already allows us to see briefly the metrics of our containers. -![metrics]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/metrics.png) +![metrics]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/metrics.png) However, this solution alone is not configurable enough and cannot fully meet our needs. @@ -182,7 +182,7 @@ We can restart `docker-compose` again. We can see that the jobs we configured are up. That is to say that `Prometheus` has managed to scrape the metrics from` cAdvisor` and `Prometheus`. -![prom]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/prom.png) +![prom]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/prom.png) ## Grafana @@ -223,7 +223,7 @@ Let's restart `docker-compose` one last time. Let's start by adding our `Prometheus` as` Data Sources`. Let's go to [http://localhost:3000/datasources/new](http://localhost:3000/datasources/new) and add the host of our `Prometheus`. -![grafana]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/grafana.png) +![grafana]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/grafana.png) Now that `Grafana` can access our` Prometheus` all we have to do is create a new dashboard. To save time we will import it directly. @@ -233,7 +233,7 @@ Let's import this new dashboard [http://localhost:3000/dashboard/new?editview=im > [http://localhost:3000/dashboard/db/docker-monitoring?refresh=10s∨gId=1](http://localhost:3000/dashboard/db/docker-monitoring?refresh=10s∨gId=1) -![dashboard]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/dashboard.png) +![dashboard]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/dashboard.png) We can now see the system metrics of our containers, like the consumption `cpu` or `ram` for each of them. diff --git a/_articles/en/2020-12-15-using-traefik-as-a-reverse-proxy.md b/_articles/en/2020-12-15-using-traefik-as-a-reverse-proxy.md index af28a7f64..7831c53c9 100644 --- a/_articles/en/2020-12-15-using-traefik-as-a-reverse-proxy.md +++ b/_articles/en/2020-12-15-using-traefik-as-a-reverse-proxy.md @@ -18,7 +18,7 @@ keywords: - reverse-proxy --- -![Cover]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/cover.jpg) +![Cover]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/cover.jpg) ## Introduction @@ -38,7 +38,7 @@ There are loads of reverse proxy on the market, but today's focus will be on Tra Of course to make it work you will need a domain name (_wilson.net_ in my case), and to make sure the different DNS Zones are pointing to your server. -![My DNS zones](/_assets/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/11-zones.jpg) +![My DNS zones]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/11-zones.jpg) You could also emulate a domain name through your local `/etc/hosts` file, but in such case the generation of a SSL certificate won't be possible. @@ -51,7 +51,7 @@ First, you'll need to setup Traefik on a webserver accessible from the internet. In my case, that server will be 192.168.0.1: it is where ports 80 (HTTP) and 443 (HTTPS) of my internet router (freebox) are forwarded to. -![Port mapping of my freebox router]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/01-ports.jpg) +![Port mapping of my freebox router]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/01-ports.jpg) It is just as well to install Traefik's binary file, compile it from source, or, just like we'll be doing in this blog post, deploy it with a Docker image. @@ -96,11 +96,11 @@ Next, we can start our reverse-proxy service from our `/srv` directory using the docker-compose up -d ``` -![Launching Traefik with docker-compose]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/02-docker-compose-up.jpg) +![Launching Traefik with docker-compose]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/02-docker-compose-up.jpg) Of course, we'll have a pretty 404 response if we visit our server's page for the moment, but take it a proof that our server is here and can't wait to serve us content. -![Traefik returning 404]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/03-nothing-for-the-moment.jpg) +![Traefik returning 404]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/03-nothing-for-the-moment.jpg) ## Configuring the dashboard @@ -135,7 +135,7 @@ For that, we must use `htpasswd` and as we don't want to install it inside our r docker run --rm --name apache httpd:alpine htpasswd -nb wilson schizo ``` -![Password generation]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/04-password.jpg) +![Password generation]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/04-password.jpg) In that exemple, *wilson* is my login, *schizo* is my password. The ouput from our last command is `wilson:$apr1$1eZu7RXg$Ql9Z5AvZNc0Oe4In900mi0` @@ -181,7 +181,7 @@ docker-compose up -d Here's what I see when I browse the URL defined in my routing rule above: -![Dashboard]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/05-dashboard.jpg) +![Dashboard]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/05-dashboard.jpg) ## Reverse proxy of a website accessible from local network @@ -189,7 +189,7 @@ Here's what I see when I browse the URL defined in my routing rule above: Connected to my network, there's my NAS I'd like to reach from outside. -![My NAS Synology]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/06-nas-http.jpg) +![My NAS Synology]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/06-nas-http.jpg) We'll need to declare it to with the `file` provider as, unlike Docker, it can't be automatically discovered. Therefore, we'll create the `/srv/services.toml` file as below: @@ -263,7 +263,7 @@ docker-compose up -d _Voilà_, here's what I get now when I reach my NAS using th hostname declared above. -![My reversed nas synology]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/07-nas-reversed.jpg) +![My reversed nas synology]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/07-nas-reversed.jpg) ## Generating SSL certificate @@ -357,11 +357,11 @@ docker-compose up -d ``` Once done, I have an access to my NAS, secured by HTTPS :D -![My nas synology https]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/08-nas-https.jpg) +![My nas synology https]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/08-nas-https.jpg) And that I can, of course, see inside my Traefik dashboard: -![My nas synology dashboard]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/09-traefik-dashboard-nas.jpg) +![My nas synology dashboard]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/09-traefik-dashboard-nas.jpg) ## Reverse proxy for services running in Docker containers @@ -431,7 +431,7 @@ docker-compose up -d We can now use _Home Assistant_ and do so directly through https ;) -![Home Assistant]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/10-home-assistant.jpg) +![Home Assistant]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/10-home-assistant.jpg) I hope that you enjoyed this article and that you'll be delighted to play with Traefik. diff --git a/_articles/en/2021-01-05-introduction-gitlab-ci.md b/_articles/en/2021-01-05-introduction-gitlab-ci.md index a0e5ea428..c54c21cf3 100644 --- a/_articles/en/2021-01-05-introduction-gitlab-ci.md +++ b/_articles/en/2021-01-05-introduction-gitlab-ci.md @@ -203,7 +203,7 @@ job:deploy: stage: deploy # We declare that this `job` is part of the deploy step script: make deploy ``` -![CI Stages]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-stages.png) +![CI Stages]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-stages.png) ## Only and except These two directives allow you to put in place constraints on the execution of a task. You can say that a task will run only on the event of a push on master or run on every push in a branch except master. @@ -252,7 +252,7 @@ job:only:master: For the use of `schedules` you must first define rules in the web interface. You can configure them in the Gitlab web interface: `CI/CD -> Schedules` and fill out the form. -![CI Schedules]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-schedules.png) +![CI Schedules]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-schedules.png) If you want, you can set a custom time interval. This is what I did in my example. The definition is made as a [cron](https://en.wikipedia.org/wiki/Cron). @@ -369,7 +369,7 @@ deploy:production: By declaring `environments` you can, from the GitLab web interface, deploy / redeploy your application or directly access your site if you have declared a `url`. This is done in `Operations > Environment`. -![CI Environment]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-environment.png) +![CI Environment]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-environment.png) The `undo` button allows you to redeploy, the `external link` button allows you to go to the application and the `remove` button allows you to remove the environment. @@ -416,7 +416,7 @@ As with `environment` I'll let you look at the official documentation on [variab It is also possible to declare variables from the GitLab web interface `Settings> CI/CD> Variables` and to specify an environment for them. -![CI Variables]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-variables.png) +![CI Variables]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-variables.png) ## cache This directive allows you to play with cache. The cache is useful for specifying a list of files and directories to cache along your pipeline. Once the pipeline is finished the cache will be destroyed. @@ -511,7 +511,7 @@ test:unit: The code coverage will be visible in the `job` information in the GitLab web interface: -![CI Coverage]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-coverage.png) +![CI Coverage]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-coverage.png) ## retry This declaration allows to re-execute the `job` in case of failure. You must indicate the number of times you want to re-run the `job`. diff --git a/_articles/en/2021-03-08-women-in-it.md b/_articles/en/2021-03-08-women-in-it.md index fc9f51813..751f0bd2b 100644 --- a/_articles/en/2021-03-08-women-in-it.md +++ b/_articles/en/2021-03-08-women-in-it.md @@ -28,7 +28,7 @@ Today is the International Women's Rights Day, and we wanted to take the opportu ### Did you know? In the 1980s, almost 40% of computer science students were women. Yes, really! -![40% of computer science students were women]({{ site.baseurl }}/assets/2021-03-08-les-femmes-dans-linformatique/first.jpg) +![40% of computer science students were women]({BASE_URL}/imgs/articles/2021-03-08-les-femmes-dans-linformatique/first.jpg) It is not clear exactly why this trend suddenly changed, but the theory of commercials that have associated personal computers and video games with men and young boys is often put forward. @@ -83,7 +83,7 @@ But there are also [41%](https://www.ncwit.org/sites/default/files/resources/wom Among the reasons that push them to make this decision, we can see this: -![Reasons why women drop out of IT]({{ site.baseurl }}/assets/2021-03-08-les-femmes-dans-linformatique/second.png) +![Reasons why women drop out of IT]({BASE_URL}/imgs/articles/2021-03-08-les-femmes-dans-linformatique/second.png) There are women who experience great pressure at work related to [associating certain tasks with a given gender.](Https://hbr.org/2018/11/the-subtle-stressors-making-women-want-to-leave-engineering). For example, there is always the idea that women are better than men in organization and communication skills. @@ -100,7 +100,7 @@ This situation creates pressure, adds stress to everyday life, and also impinges In addition, women are encouraged by their superiors to upgrade their skills in positions that make them abandon development. And here is the observation: -![Main IT jobs by gender]({{ site.baseurl }}/assets/2021-03-08-les-femmes-dans-linformatique/third.png) +![Main IT jobs by gender]({BASE_URL}/imgs/articles/2021-03-08-les-femmes-dans-linformatique/third.png) Women are therefore sometimes dissatisfied with their career prospects. They feel that they cannot evolve the way they would like to, and they eventually give up IT and choose another career path. diff --git a/_articles/en/2021-09-22-po-free-developer-time-with-integromat.md b/_articles/en/2021-09-22-po-free-developer-time-with-integromat.md index 53a846645..8e6f174a9 100644 --- a/_articles/en/2021-09-22-po-free-developer-time-with-integromat.md +++ b/_articles/en/2021-09-22-po-free-developer-time-with-integromat.md @@ -8,8 +8,7 @@ excerpt: >- You're part of a small team with a lot of features to release quickly and a PoC needed to test a product but you only have little to no tech skills ? NoCode is what you're looking for ! -cover: >- - /assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cover.jpg +cover: /assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cover.jpg categories: [] authors: - marianne @@ -28,14 +27,14 @@ I will propose some features that are regularly found in a project, and make a c ## Interface presentation -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/homepage.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/homepage.png) It is worth mentioning that Integromat did pay attention to users with a non-technical profile by proposing an easy to use and quite intuitive interface. On the scenario building page, each node is represented by a bubble: adding and configuring is done directly on the page. Integromat allows you to create "Data Structures" and to store data ("Data Stores") that you can prepare in advance in their own menus and then use them in the scenarios. With these features, you can process and manipulate data without needing a specific database. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/interface-noeud.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/interface-noeud.png) @@ -45,9 +44,9 @@ With these features, you can process and manipulate data without needing a speci You start a new site from scratch that requires registration, and you want to send a confirmation email. The scenario is quite simple: a webhook on which the application will have to send data, and an email server. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-scenario.png) -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-webhook.png) -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-mail.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-scenario.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-webhook.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-mail.png) > On the plus side, you are autonomous to change the template: no need for additional development and therefore no need for a specific release to deliver those changes. @@ -75,7 +74,7 @@ You have just created your e-commerce site, either via Shopify or Prestashop. To For this example, I will use a webhook rather than directly an e-commerce site node that retrieves the information as soon as there is a new event. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas2-scenario.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas2-scenario.png) > As in our previous exemple with the email template, you are completly autonomous to change it. @@ -92,7 +91,7 @@ Without going into too much detail, there are several ways to create an image, b #### Sending this image via email In addition to storing the image, you can also send it by email. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas2-aller-plus-loin.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas2-aller-plus-loin.png) #### Printing @@ -104,18 +103,18 @@ This scenario allows to go further in Integromat with the use of Data Stores and We want to process a CSV to split it into several CSV to be then processed by different microservices. You can connect the trigger on a *FTP* service as well as on a *Google Drive*. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-scenario.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-scenario.png) It is possible to add filters between the nodes. To avoid errors during processing, I added the condition to accept only CSV documents for the following steps. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-filter-csv.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-filter-csv.png) To be sure of uploaded document pattern and to save the data to potentially use in another scenario, I use the *Data Store* node which will map each CSV entry to a database entry. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-mapping-csv-data-store.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-mapping-csv-data-store.png) For my need, I have to create 3 different CSV based Data Structures and save them in a folder. The *Router* node allows to parallelize the work. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-create-data-structure-product.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-create-data-structure-product.png) > On the plus side, you have complete autonomy on the models: if the input(s) or output(s) change, you can update them easily. @@ -141,7 +140,7 @@ You need to add the brand id or a color trigram, but the data is not in the orig There are plenty of nodes to allow communication: each time a new file is processed, a slack message will be sent to warn the team. It is even possible to predict the path in case of an error during a node. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-add-error-handler.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-add-error-handler.png) ## Conclusion diff --git a/_articles/en/2022-01-31-build-website-with-nextjs.md b/_articles/en/2022-01-31-build-website-with-nextjs.md index a53dc9961..36d26dfcc 100644 --- a/_articles/en/2022-01-31-build-website-with-nextjs.md +++ b/_articles/en/2022-01-31-build-website-with-nextjs.md @@ -163,7 +163,7 @@ export default MyApp Now, each page generated from the pages folder uses the Layout, as we can see in our index page: -![astro teams layout]({{ site.baseurl }}/assets/2022-01-26-build-website-with-nextjs/website-layout.png) +![astro teams layout]({BASE_URL}/imgs/articles/2022-01-26-build-website-with-nextjs/website-layout.png) Let's add the HTML content for the index page. @@ -227,7 +227,7 @@ export default function Home() { > **Note**: don't forget to add the CSS rules. They are in the `styles/Home.module.css. All CSS modules for pages are in this folder. -![Website Home Page]({{ site.baseurl }}/assets/2022-01-26-build-website-with-nextjs/homepage.png) +![Website Home Page]({BASE_URL}/imgs/articles/2022-01-26-build-website-with-nextjs/homepage.png) The `pages/index.js` and `components/Layout.js` components contain redirections to other website pages, but they don't exist yet. Let's learn how to create these pages with NextJS. @@ -274,7 +274,7 @@ export default function Contact() { } ``` -![Contact Page]({{ site.baseurl }}/assets/2022-01-26-build-website-with-nextjs/contactpage.png) +![Contact Page]({BASE_URL}/imgs/articles/2022-01-26-build-website-with-nextjs/contactpage.png) Now we have a contact page. The website needs one page for each astronaut's team. To do that, we will create a route with the team name as a parameter. @@ -346,7 +346,7 @@ export default function Team({ teamName, teamDescription, teamImagePath, teamPla We pass our props to a component to render the page content. Now if you click on the read more button, you can see a team page: -![Team Page]({{ site.baseurl }}/assets/2022-01-26-build-website-with-nextjs/teampage.png) +![Team Page]({BASE_URL}/imgs/articles/2022-01-26-build-website-with-nextjs/teampage.png) Our website is finally ready to be published. To conclude this article, let's sum up some feedback about building this website. diff --git a/_articles/en/2022-02-22-throwback-to-nantes-2021-devfest-my-first-conference.md b/_articles/en/2022-02-22-throwback-to-nantes-2021-devfest-my-first-conference.md index 03fd11e86..f29f677d2 100644 --- a/_articles/en/2022-02-22-throwback-to-nantes-2021-devfest-my-first-conference.md +++ b/_articles/en/2022-02-22-throwback-to-nantes-2021-devfest-my-first-conference.md @@ -14,7 +14,7 @@ keywords: - conference --- -![DevFest Nantes 2021's logo]({{ site.baseurl }}/assets/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/devfest-logo.png) +![DevFest Nantes 2021's logo]({BASE_URL}/imgs/articles/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/devfest-logo.png) Finally! After 4 years of working as a web developer, I finally attended a conference linked to my job & passion: the [DevFest Nantes](https://devfest2021.gdgnantes.com). @@ -36,7 +36,7 @@ This year, they welcomed a little bit more than 2000 people per day during 2 day _By Antonin Fourneau_ -![Waterlight Graffiti]({{ site.baseurl }}/assets/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/waterlight-graffiti.jpeg) +![Waterlight Graffiti]({BASE_URL}/imgs/articles/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/waterlight-graffiti.jpeg)
Credits: Antonin Fourneau
@@ -66,7 +66,7 @@ To summarize, she made us understand that a majority of developers have this syn _By Elad Schechter_ -![Coronavirus Invaders]({{ site.baseurl }}/assets/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/coronavirus-invaders.jpeg) +![Coronavirus Invaders]({BASE_URL}/imgs/articles/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/coronavirus-invaders.jpeg) When the lockdown started, Elad prepared his apartment to make it feel cosy and a place where he feels good. During a week-end, he decided to code a pure CSS game related to the global health situation: Coronavirus Invaders. The game and its source code are [available on CodePen](https://codepen.io/elad2412/pen/wvabjXy). @@ -159,7 +159,7 @@ This is Thibaud’s proposal to set up chaos engineering in the front-end. He pu ## What I remember from my first conference -![Waouh]({{ site.baseurl }}/assets/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/waouh.jpeg) +![Waouh]({BASE_URL}/imgs/articles/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/waouh.jpeg) On one hand, I felt a fervour during these two days that made me watch everywhere with amazed eyes. Everything seemed awesome to me and everyone looked accessible & nice. diff --git a/_articles/en/2022-07-27-responsive-accessible-typography.md b/_articles/en/2022-07-27-responsive-accessible-typography.md index 870b552ca..4a784fc14 100644 --- a/_articles/en/2022-07-27-responsive-accessible-typography.md +++ b/_articles/en/2022-07-27-responsive-accessible-typography.md @@ -25,7 +25,7 @@ keywords: } -![Man holding a note saying 'Read me if you can']({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/read-me.png?width=300) +![Man holding a note saying 'Read me if you can']({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/read-me.png?width=300) How many times have you been aware of text's different shapes and sizes while browsing the web lately? Probably not many, unless you found an extremely uncomfortable typography that pushed you to quickly flee the website. Typography is a silent tool that UX designers and developers can sometimes take for granted. **There is much noise around this topic**. Pixels? Are breakpoints enough to switch sizes across devices? Do we even need breakpoints at all ? @@ -45,12 +45,12 @@ Smaller text can be challenging for seniors, children or visually impaired peopl For **heavy-text pages, even 18px or >20px** could even be suitable for a comfortable reading. Does it sound ridiculous? Check the body text on any medium.com article, such as [this one](https://kantrowitz.medium.com/face-to-face-with-dall-e-the-ai-artist-that-might-change-the-world-e9057e9e89a). -![Post on medium with detail on font-size]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/medium-example.jpg) +![Post on medium with detail on font-size]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/medium-example.jpg) ### Should typography be smaller in mobile? -![Magnifier glass]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/girl-phone.png?width=300) +![Magnifier glass]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/girl-phone.png?width=300) Ok, what’s the trick here? Perhaps an intuitive answer to this question is to think that the text needs to be smaller to fit on the phone screen, or perhaps the opposite… that the text should be larger to achieve a more comfortable experience when reading on a smaller screen! @@ -97,13 +97,13 @@ html { This practice has even been promoted by CSS-tricks last May on Twitter... and it received little love from their followers: -[![Tweet from CSS tricks suggesting to set the font-size to 62.5% in the root element]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/css-tricks.png?width=400)](https://twitter.com/css/status/1523700789083996160?s=20&t=CC56aWixbiPV7R_pqUOGcw) +[![Tweet from CSS tricks suggesting to set the font-size to 62.5% in the root element]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/css-tricks.png?width=400)](https://twitter.com/css/status/1523700789083996160?s=20&t=CC56aWixbiPV7R_pqUOGcw) Changing the font size in the root is generally not great. It will either overwrite custom values or break any other usage of rem outside the typography. It is possible, but it will bring many changes regarding scalability. Let's check a better way. Or two. -![Researcher going for adventure]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/research-illustration.png?width=300) +![Researcher going for adventure]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/research-illustration.png?width=300) #### #1 - Use calc(): yes, but wait and see! @@ -144,7 +144,7 @@ Yes, it is almost the same. But in terms of scalability and practicity, this app ### Ok, great... but what about fluid typography? -![Researcher going for adventure]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/fluid-typography.png?width=400) +![Researcher going for adventure]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/fluid-typography.png?width=400) @@ -175,7 +175,7 @@ However, fluid typography should not replace responsive typography and it is not #### Line height Line height is also a key point in accessible typography. Just check this two paragraphs with the exact same content: -![Line height example]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/line-height.png) +![Line height example]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/line-height.png) By default, most browsers set the line-height to 1.2. But what does 1.2 even mean? Spoiler: it's not pixels. An accessibility-focused line-height uses nothing less but unitless values (numbers) that are multiplied by the element's own font size. Yes, it is also possible to use `percentages`, `em` as well as global values, but this might lead to [unexpected results](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values). @@ -227,10 +227,10 @@ The magic range to aim here is between 50 - 75 characters per line. Ignoring thi Wikipedia is a great (bad) exemple. Even using a way greater amount of characters than recommended, the difference is easily visible in this [two extraits](https://fr.wikipedia.org/wiki/Wikip%C3%A9dia): -![Wikipedia entry with 88 characters]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/wiki2.png) +![Wikipedia entry with 88 characters]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/wiki2.png) Figure: Wikipedia entry with 88 characters -![Wikipedia entry with 148 characters]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/wiki1.png) +![Wikipedia entry with 148 characters]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/wiki1.png) Figure: Wikipedia entry with 148 characters Let's jump to the last readability point of this article! @@ -239,7 +239,7 @@ Let's jump to the last readability point of this article! High contrast between the font and the background ensure good readability. This is a quite basic concept and might even feel like an intuitive principle. Nevertheless, it still happens (quite often). -![Two examples of color contrast]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/color-contrast.png) +![Two examples of color contrast]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/color-contrast.png) Do you think both texts have enough contrast? @@ -253,7 +253,7 @@ Web typography is a beautiful and a little bit messy world. In this article we j From my point of view, it is a responsability as creators to care about having inclusive products. Even if accessibility is a wide topic and we can struggle putting all its principles in practice, I think this can be a good start. Caring is always the first step. -![Woman on a rocket heading to the sky]({{ site.baseurl }}/assets/2022-07-27-responsive-accessible-typography/rocket.png?width=300) +![Woman on a rocket heading to the sky]({BASE_URL}/imgs/articles/2022-07-27-responsive-accessible-typography/rocket.png?width=300) ## Ressources diff --git a/_articles/fr/2013-12-11-introduction-a-angularjs.md b/_articles/fr/2013-12-11-introduction-a-angularjs.md index 2c734d4ab..4af748545 100644 --- a/_articles/fr/2013-12-11-introduction-a-angularjs.md +++ b/_articles/fr/2013-12-11-introduction-a-angularjs.md @@ -57,7 +57,7 @@ function HelloController($scope) { Le chargement de "hello.html" dans un navigateur produira l'affichage suivant : -![hello](/_assets/articles/2013-12-11-introduction-a-angularjs/hello.png) +![hello]({BASE_URL}/imgs/articles/2013-12-11-introduction-a-angularjs/hello.png) Il y a plusieurs choses intéressantes à noter ici en comparaison avec la plupart des méthodes utilisées aujourd'hui : @@ -75,7 +75,7 @@ Dans les applications *AngularJS*, la vue est le *DOM* (*Document Object Model*) *AngularJS* permet de faire du *data binding* très simplement sans devoir écrire le moindre code *AJAX*. Retournons dans l'exemple de code ci-dessus. Si nous remplaçons le texte *Hello* par le texte *Hi* dans le champ de saisie, voici l'affichage que nous aurons dans le navigateur : -![Hi](/_assets/articles/2013-12-11-introduction-a-angularjs/hi.png) +![Hi]({BASE_URL}/imgs/articles/2013-12-11-introduction-a-angularjs/hi.png) L'interface utilisateur se met à jour dynamiquement, sans que nous ayons eu besoin d'attacher un *change listener* sur le champ de saisie. Il faut également noter que le *data binding* est bidirectionnel. Dans notre contrôleur, le changement de valeur de notre variable *$scope.hello.text*, à la suite d'une requête au serveur par exemple, mettrait automatiquement à jour le champ de saisie et le texte dans les doubles accolades. diff --git a/_articles/fr/2014-01-06-creer-rpc-rabbitmq.md b/_articles/fr/2014-01-06-creer-rpc-rabbitmq.md index a2b686c70..02609f16d 100644 --- a/_articles/fr/2014-01-06-creer-rpc-rabbitmq.md +++ b/_articles/fr/2014-01-06-creer-rpc-rabbitmq.md @@ -61,7 +61,7 @@ Le code ci-dessus fait que tous les messages publiés dans la queue auront une r La clé unique est ce que l'on appelle la 'correlation_id', elle permet d'identifier chaque réponse par rapport à son message. Elle est envoyée sur chaque message envoyé sur le serveur, et renvoyée dans la réponse qui permet alors de reconnaître la demande initiale. Avant de faire l'exemple de code, voici un petit résumé: -![RPC description](/_assets/articles/2014-01-06-creer-rpc-rabbitmq/python-six.png) +![RPC description]({BASE_URL}/imgs/articles/2014-01-06-creer-rpc-rabbitmq/python-six.png) Comme on peut le voir sur le schéma ci-dessus, le client envoie un message dans la queue 'rpc_queue' avec l'option reply_to qui permet d'envoyer la réponse dans une queue de callblack et la clé de 'correlation_id' qui est l'index unique de chaque demande. Commençons l'exemple du serveur de génération d'url via un titre. Nous commencerons par le serveur qui s'occupera de créer une url à partir d'un titre. Pour l'exemple, nous prenons simplement un titre et remplaçons les espaces par des underscores. diff --git a/_articles/fr/2014-01-13-dotjs-2013-retour-sur-les-conferences-2.md b/_articles/fr/2014-01-13-dotjs-2013-retour-sur-les-conferences-2.md index 67255cb5f..d5472ba10 100644 --- a/_articles/fr/2014-01-13-dotjs-2013-retour-sur-les-conferences-2.md +++ b/_articles/fr/2014-01-13-dotjs-2013-retour-sur-les-conferences-2.md @@ -64,7 +64,7 @@ Si Polymer aiguise votre curiosité, une [FAQ](http://www.polymer-project.org/fa TypeScript se présente comme une sur-couche de Javascript. Il offre un cadre de développement plus strict que le Javascript natif. Il permet d’utiliser un typage strict et des mots clefs de POO (class, interface, implements, extends, …) A la manière de l’ActionScript, il faut compiler notre fichier hello.ts pour obtenir un fichier en sortie hello.js. Développé en partenariat avec Microsoft, le compilateur écrit en CodePlex est disponible pour Node.js. La forte valeur ajoutée de TypeScripte réside dans l'existance des plugins pour les éditeurs de textes comme VirtualStudio 2012/2013, Sublime Text, Vim et Emacs. -![Type2\_Fig\_06](/_assets/articles/2014-01-13-dotjs-2013-retour-sur-les-conferences-2/Type2_Fig_06.gif) +![Type2\_Fig\_06]({BASE_URL}/imgs/articles/2014-01-13-dotjs-2013-retour-sur-les-conferences-2/Type2_Fig_06.gif) Note : TypeScript est différent de CoffeeScript qui supprime la syntaxe superflue du Javascript tel que les accolades, les parenthèses, les semi-colons. @@ -74,7 +74,7 @@ Note : TypeScript est différent de CoffeeScript qui supprime la syntaxe superfl Brendan Eich, alias PapaJS, nous a offert une présentation des perspectives d’avenir des jeux développés dans les technologies web. Nous avons assisté à une démo en temps réel de la carte [Epic Citadel](http://www.unrealengine.com/html5/) du jeu Infinity Blade, avec des combats et des bots contrôlés par l’IA. Le réputé et très utilisé moteur physique et graphique “Unreal Engine” a été porté pour les navigateurs modernes en 4 jours avec [Asm.js](http://www.generation-nt.com/go/?url=http%3A%2F%2Fasmjs.org%2F) et [Emscripten](http://www.generation-nt.com/go/?url=https%3A%2F%2Fgithub.com%2Fkripken%2Femscripten%2Fwiki) pour la compilation du code C++ en JavaScript. Les performances sont au rendez-vous et les graphismes impressionnants pour un jeu dans le navigateur. Cette avancée confirme un peu plus la volonté de faire du navigateur l’élément central d’un ordinateur personnel. -![citadel-demo-2-100068222-orig](/_assets/articles/2014-01-13-dotjs-2013-retour-sur-les-conferences-2/citadel-demo-2-100068222-orig.png) +![citadel-demo-2-100068222-orig]({BASE_URL}/imgs/articles/2014-01-13-dotjs-2013-retour-sur-les-conferences-2/citadel-demo-2-100068222-orig.png) Suite à cette dernière conférence, beaucoup d'interrogations sont nées sur le devenir du gaming : diff --git a/_articles/fr/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive.md b/_articles/fr/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive.md index c0c068e00..d1ac618ee 100644 --- a/_articles/fr/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive.md +++ b/_articles/fr/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive.md @@ -22,11 +22,11 @@ Depuis quelques mois, le navigateur Google Chrome permet, dans ses fonctionnalit Pour faire simple, voilà ce que j'ai sur ma tablette Nexus 7. -![Screenshot Nexus 7](/_assets/articles/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive/screenshot-nexus-7.jpg) +![Screenshot Nexus 7]({BASE_URL}/imgs/articles/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive/screenshot-nexus-7.jpg) Sur mon ordinateur, après avoir activé le Chrome Screencast, je peux faire de l'édition live et contrôler le rendu sur la tablette : -![Screenshot Google Chrome Screencast](/_assets/articles/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive/screenshot-google-chrome-screencast.png) +![Screenshot Google Chrome Screencast]({BASE_URL}/imgs/articles/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive/screenshot-google-chrome-screencast.png) Pour activer ces fonctionnalités : @@ -41,9 +41,9 @@ Pour activer ces fonctionnalités : Et c'est bon ! Il ne vous reste plus qu'à aller sur [chrome://inspect/](//inspect/) pour voir apparaitre les pages ouvertes sur le périphérique : -![Google inspect screencast](/_assets/articles/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive/google-inspect-screencast.jpg) +![Google inspect screencast]({BASE_URL}/imgs/articles/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive/google-inspect-screencast.jpg) -![Google-toggle-screencast](/_assets/articles/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive/google-toggle-screencast.jpg) +![Google-toggle-screencast]({BASE_URL}/imgs/articles/2014-02-10-chrome-screencast-deboguer-le-rendu-mobile-dun-site-responsive/google-toggle-screencast.jpg) Et à cliquer sur *inspect*. Vous trouverez en bas à gauche de de la fenètre DevTools qui s'ouvre un bouton *Toggle Screencast *: Retrouvez encore plus de fonctionnalités avancées dans cet excellent article de Paul Irish pour HTML5Rocks : [Chrome DevTools for Mobile: Screencast and Emulation](http://www.html5rocks.com/en/tutorials/developertools/mobile/ "Chrome DevTools for Mobile: Screencast and Emulation by Paul Irish") diff --git a/_articles/fr/2014-04-10-eleven-labs-au-symfony-live-paris-2014.md b/_articles/fr/2014-04-10-eleven-labs-au-symfony-live-paris-2014.md index ba1c08c56..a3f2dd641 100644 --- a/_articles/fr/2014-04-10-eleven-labs-au-symfony-live-paris-2014.md +++ b/_articles/fr/2014-04-10-eleven-labs-au-symfony-live-paris-2014.md @@ -20,11 +20,11 @@ keywords: Nous sommes allés au Symfony Live Paris en force cette année ! En tant que sponsor Gold, nous avions notre stand et avons pu rencontrer plein de symfoniens. -![photo 2](/_assets/articles/2014-04-10-eleven-labs-au-symfony-live-paris-2014/photo-2.jpg) +![photo 2]({BASE_URL}/imgs/articles/2014-04-10-eleven-labs-au-symfony-live-paris-2014/photo-2.jpg) Et tout le monde a pu tester le photomaton Eleven Labs (vous pouvez voir toutes les photos [ici](https://www.facebook.com/11Labs)). On espère que vous en avez profité pour immortaliser des moments magiques avec les astronautes, Mario et Jurassic Park ! Voici quand même LE selfie de l’événement (oui, nous espérons battre [celui des Oscars](http://i.cbc.ca/1.2571222.1394724679!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_620/ellen-degeneres-s-oscar-selfie.jpg)) :) -![BkpLVSjIUAAHEBA](/_assets/articles/2014-04-10-eleven-labs-au-symfony-live-paris-2014/bkplvsjiuaaheba.jpg) +![BkpLVSjIUAAHEBA]({BASE_URL}/imgs/articles/2014-04-10-eleven-labs-au-symfony-live-paris-2014/bkplvsjiuaaheba.jpg) Mais parlons des conférences qui nous ont paru les plus intéressantes. @@ -54,4 +54,4 @@ Vivement SymfonyCon Madrid ! P.S.: Have you been Stoffed yet? -![You've been Stoffed!](/_assets/articles/2014-04-10-eleven-labs-au-symfony-live-paris-2014/stoffed.png) +![You've been Stoffed!]({BASE_URL}/imgs/articles/2014-04-10-eleven-labs-au-symfony-live-paris-2014/stoffed.png) diff --git a/_articles/fr/2014-11-24-retour-sur-les-dotjs-2014.md b/_articles/fr/2014-11-24-retour-sur-les-dotjs-2014.md index e049e56d2..cb5da0408 100644 --- a/_articles/fr/2014-11-24-retour-sur-les-dotjs-2014.md +++ b/_articles/fr/2014-11-24-retour-sur-les-dotjs-2014.md @@ -5,7 +5,7 @@ date: '2014-11-24' slug: retour-sur-les-dotjs-2014 title: Retour sur les DotJS 2014 ! excerpt: >- - ![wilsononstagedotjs](/_assets/articles/2014-11-24-retour-sur-les-dotjs-2014/wilsononstagedotjs.jpg) + ![wilsononstagedotjs]({BASE_URL}/imgs/articles/2014-11-24-retour-sur-les-dotjs-2014/wilsononstagedotjs.jpg) categories: - javascript authors: @@ -15,7 +15,7 @@ keywords: - conference --- -![wilsononstagedotjs](/_assets/articles/2014-11-24-retour-sur-les-dotjs-2014/wilsononstagedotjs.jpg) +![wilsononstagedotjs]({BASE_URL}/imgs/articles/2014-11-24-retour-sur-les-dotjs-2014/wilsononstagedotjs.jpg) [DotJS](http://www.dotjs.eu/) est une journée consacrée au langage JavaScript, créée par [dotConferences](http://www.dotconferences.eu/), dont le but est d’apporter des conférences du niveau de [TED](http://www.ted.com/) au monde de l’informatique. C’est la plus grande conférence de ce type en Europe et elle regroupe des participants du monde entier. @@ -31,7 +31,7 @@ Le matin, Justin Meyer nous a fait une présentation sur comment réussir son pr Domenic Denicola est ensuite venu nous parler des différentes méthodes et modules NPM permettant de manipuler le DOM en Node.JS. -![dotjssubstack](/_assets/articles/2014-11-24-retour-sur-les-dotjs-2014/dotjssubstack.jpg) +![dotjssubstack]({BASE_URL}/imgs/articles/2014-11-24-retour-sur-les-dotjs-2014/dotjssubstack.jpg) Après la pause déjeuner, nous avons enchainé sur une session de conférences “petit format”, très dynamiques (et adaptées à la digestion!) portant sur des sujets variés : pourquoi utiliser le “localstore” des navigateurs internet au lieu des cookies pour l'authentification, une présentation de [Pouchdb](http://pouchdb.com/) par Franck Rousseau ou encore de [Meteor](https://www.meteor.com/) par Guido Bouman (Diaporama disponible [ici](http://fr.slideshare.net/guidobouman/meteor-dotjs-2014)). @@ -39,7 +39,7 @@ Nous avons ensuite pu assister à une présentation sur le futur des API Front Angus Croll est venu nous parler de son livre “If Hemingway wrote JavaScript” dans lequel il nous détaille avec beaucoup d’humour la liberté qu’offre JavaScript sur les solutions à apporter à un problème. -![ifhemingwaywrotejavascript](/_assets/articles/2014-11-24-retour-sur-les-dotjs-2014/ifhemingwaywrotejavascript.jpg) +![ifhemingwaywrotejavascript]({BASE_URL}/imgs/articles/2014-11-24-retour-sur-les-dotjs-2014/ifhemingwaywrotejavascript.jpg) Pour finir cette session, les gagnants des meilleurs bibliothèques Front et Back ont été annoncé. Ce sont donc respectivement [Pixi.js](http://www.pixijs.com/) et [Gulp.js](http://gulpjs.com/) qui ont largement mérité leur prix. @@ -49,15 +49,15 @@ Joe McCann nous a donné des clés pour optimiser son code en Node.JS grâce au Paul O’Shannessy est venu ensuite nous parler de son module [React](http://facebook.github.io/react/). Réalisé par Facebook, cette bibliothèque permet de créer des interfaces utilisateurs simplement et agit comme le V dans MVC. Le diaporama est disponible par [ici](https://speakerdeck.com/vjeux/react-css-in-js). -![dotjstheatre](/_assets/articles/2014-11-24-retour-sur-les-dotjs-2014/dotjstheatre.jpg) +![dotjstheatre]({BASE_URL}/imgs/articles/2014-11-24-retour-sur-les-dotjs-2014/dotjstheatre.jpg) Et entre les conférences, beaucoup d’ambiance au Dot JS... Quelques extraits des photos souvenirs du photomaton Eleven Labs ci-dessous ! Si vous voulez voir (ou revoir, on ne s’en lasse pas!) toutes les photos, costumes à l’appui : c’est [ici](https://www.facebook.com/media/set/?set=a.236453333168290.1073741837.152455631568061&type=1ci). -![15648693537\_048cd14d2d\_z](/_assets/articles/2014-11-24-retour-sur-les-dotjs-2014/15648693537_048cd14d2d_z.jpg) +![15648693537\_048cd14d2d\_z]({BASE_URL}/imgs/articles/2014-11-24-retour-sur-les-dotjs-2014/15648693537_048cd14d2d_z.jpg) -![elevenlabscrewpic](/_assets/articles/2014-11-24-retour-sur-les-dotjs-2014/elevenlabscrewpic.jpg) +![elevenlabscrewpic]({BASE_URL}/imgs/articles/2014-11-24-retour-sur-les-dotjs-2014/elevenlabscrewpic.jpg) Vivement la DotJS 2015 ! diff --git a/_articles/fr/2015-04-07-cqrs-pattern.md b/_articles/fr/2015-04-07-cqrs-pattern.md index 1497cb43a..f03a772c5 100644 --- a/_articles/fr/2015-04-07-cqrs-pattern.md +++ b/_articles/fr/2015-04-07-cqrs-pattern.md @@ -22,7 +22,7 @@ Une commande est définie comme une méthode qui change un état, alors qu'une La figure suivante montre l'implémentation basique du pattern CQRS au sein d'une application. Elle entreprend l'échange de _messages_ sous forme de commandes et d’événements. Voyons cela de plus près. -![Figure 1: Exemple d'implémentation du pattern CQRS](/_assets/articles/2015-04-07-cqrs-pattern/cqrs_pattern.png) +![Figure 1: Exemple d'implémentation du pattern CQRS]({BASE_URL}/imgs/articles/2015-04-07-cqrs-pattern/cqrs_pattern.png) *Figure 1: Exemple d'implémentation du pattern CQRS* On voit clairement la séparation des parties lectures et écritures sur la figure précédente : l'utilisateur fait une modification sur sa page, ce qui engendre l'envoie d'une commande. Une fois cette commande terminée, un _event _est publié pour signaler qu'une modification a été apportée. diff --git a/_articles/fr/2015-05-11-microdata-ou-microdonnees.md b/_articles/fr/2015-05-11-microdata-ou-microdonnees.md index 844a8d313..44573edeb 100644 --- a/_articles/fr/2015-05-11-microdata-ou-microdonnees.md +++ b/_articles/fr/2015-05-11-microdata-ou-microdonnees.md @@ -48,7 +48,7 @@ Les moteurs de recherche comptent sur ce balisage pour améliorer l'affichage de Nous allons voir un premier exemple que vous avez probablement rencontré dans les résultats de Google. -![Résultat Google avec microdata](/_assets/articles/2015-05-11-microdata-ou-microdonnees/Capture-decran-2015-05-06-a-09.54.20.png) +![Résultat Google avec microdata]({BASE_URL}/imgs/articles/2015-05-11-microdata-ou-microdonnees/Capture-decran-2015-05-06-a-09.54.20.png) Voici une version HTML de l’exemple ci-dessus : diff --git a/_articles/fr/2015-06-10-les-web-2015-cetait-bien.md b/_articles/fr/2015-06-10-les-web-2015-cetait-bien.md index ebe0a8d48..5240be8a9 100644 --- a/_articles/fr/2015-06-10-les-web-2015-cetait-bien.md +++ b/_articles/fr/2015-06-10-les-web-2015-cetait-bien.md @@ -24,7 +24,7 @@ keywords: Le 5 juin dernier, tandis que la France entière affrontait vaillamment sa première canicule de l’année avec du courage, de la sueur et les jambes à l'air, les organisateurs du Best of Web ont eu la bonne idée de réunir une petite tranche de notre communauté bien au frais - ou pas - dans la Grande Crypte du 16e arrondissement de Paris. Salariés, freelance, étudiants… Des développeurs et intégrateurs de tout bord étaient présents dans la salle pour assister à une douzaine de conférences, chacune portant sur un sujet très différent de la précédente. -![IMG\_0788](/_assets/articles/2015-06-10-les-web-2015-cetait-bien/IMG_0788.jpg) Jésus, le premier évangéliste Web, était également présent ce jour-là. +![IMG\_0788]({BASE_URL}/imgs/articles/2015-06-10-les-web-2015-cetait-bien/IMG_0788.jpg) Jésus, le premier évangéliste Web, était également présent ce jour-là. Qu’est-ce que le Best of Web ? ============================== diff --git a/_articles/fr/2015-10-16-generator-gulp-angular-1-0-0-stable-released.md b/_articles/fr/2015-10-16-generator-gulp-angular-1-0-0-stable-released.md index 422c37a5e..6776aef4f 100644 --- a/_articles/fr/2015-10-16-generator-gulp-angular-1-0-0-stable-released.md +++ b/_articles/fr/2015-10-16-generator-gulp-angular-1-0-0-stable-released.md @@ -37,7 +37,7 @@ Technologies supported We are not joking around when we talk about this being a stable version. We integrated lots of technologies and languages, from Coffee to Typescript, from Sass to Stylus. The amount of combinations exceeds several millions! We wrote tests, documentation and fixed issues for 12 minor versions and 2 release candidates, to be able to deliver a perfectly configured seed project, no matter the options you choose. -![technologies-gga](/_assets/articles/2015-10-16-generator-gulp-angular-1-0-0-stable-released/generator-gulp-angular-logo.png) +![technologies-gga]({BASE_URL}/imgs/articles/2015-10-16-generator-gulp-angular-1-0-0-stable-released/generator-gulp-angular-logo.png) Optimization served =================== diff --git a/_articles/fr/2016-01-26-verifier-la-qualite-du-code.md b/_articles/fr/2016-01-26-verifier-la-qualite-du-code.md index 9e2afb600..ebfdc19dd 100644 --- a/_articles/fr/2016-01-26-verifier-la-qualite-du-code.md +++ b/_articles/fr/2016-01-26-verifier-la-qualite-du-code.md @@ -273,7 +273,7 @@ Tous ces outils, une fois en place, permettent de surveiller et de maintenir la Avec Jenkins, il est possible de lancer ces commandes de manière automatisée. Il suffit de créer un "job" et de le programmer. Chacune des commandes abordées dans cet article permettent de produire un rapport au format jUnit. -![rapport jenkins](/_assets/articles/2016-01-26-verifier-la-qualite-du-code/Capture-decran-2016-01-25-a-21.35.56.png) +![rapport jenkins]({BASE_URL}/imgs/articles/2016-01-26-verifier-la-qualite-du-code/Capture-decran-2016-01-25-a-21.35.56.png) ### SonarQube diff --git a/_articles/fr/2016-02-17-domain-driven-design.md b/_articles/fr/2016-02-17-domain-driven-design.md index b67398daf..4f143ec6a 100644 --- a/_articles/fr/2016-02-17-domain-driven-design.md +++ b/_articles/fr/2016-02-17-domain-driven-design.md @@ -36,7 +36,7 @@ Le fort couplage entre le langage et le modèle permet ainsi de réduire toute c Dans une application complexe, de nombreuses choses sont mélangées au sein du code : notre code métier est couplé avec notre base de données, notre interface utilisateur, des librairies externes… Cela engendre une plus grande difficulté pour faire évoluer le code, et même le comprendre. Nous perdons le plus important dans la représentation de notre code métier : sa compréhension et son évolutivité. Le _Domain Driven Design_ permet de répondre à ce problème en isolant complètement le code métier de notre application et en éliminant toute dépendance superflue : infrastructure, interface utilisateur, logique applicative… -![DDD Schema](/_assets/articles/2016-02-17-domain-driven-design/ddd_schema.png) +![DDD Schema]({BASE_URL}/imgs/articles/2016-02-17-domain-driven-design/ddd_schema.png) Ainsi l’architecture adoptée du _Domain Driven Design_ est composée de 4 couches. Voyons cela plus en détail. @@ -73,7 +73,7 @@ Ce sont des objets avec une identité et un cycle de vie (ex: un Customer, un Pu Elément clé du Domain Driven Design, un Value Object peut être défini de la sorte : un objet dont la notion d’égalité n’est pas basée sur son identité mais sur ses attributs. Ainsi, une date, une devise ou encore une adresse sont des candidats naturels pour devenir des Value Objects. -![DDD value objects](/_assets/articles/2016-02-17-domain-driven-design/ddd_value_objects.png) +![DDD value objects]({BASE_URL}/imgs/articles/2016-02-17-domain-driven-design/ddd_value_objects.png) Les Value Objects permettent de nommer explicitement des concepts clés de notre modèle, d’en améliorer la lisibilité et la communication. Il est fortement conseillé de rendre les Value Objects immuables, car s’ils sont partagés, ils peuvent mettre en péril l’intégrité des données. @@ -131,7 +131,7 @@ Le Domain Driven Design permet donc de se focaliser sur le métier, plutôt que Penser à sa modélisation métier en communiquant et en utilisant un langage partagé au sein de l’équipe permettra une meilleure lisibilité. De plus, prendre du recul avant d’implémenter une fonctionnalité pour savoir dans quel contexte cette dernière intervient vous garantira une meilleure maintenabilité, ainsi qu’une plus grande aisance lors de la lecture de votre code. Le _ubiquitous language_ et les outils de modélisation du modèle permettent de faire apparaître l'intention dans le code, et d'expliciter les contextes. N'est-ce pas une approche intéressante? -![DDD board](/_assets/articles/2016-02-17-domain-driven-design/ddd_board.jpeg) +![DDD board]({BASE_URL}/imgs/articles/2016-02-17-domain-driven-design/ddd_board.jpeg) ### Pour aller plus loin diff --git a/_articles/fr/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production.md b/_articles/fr/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production.md index d52d56d88..42267aa36 100644 --- a/_articles/fr/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production.md +++ b/_articles/fr/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production.md @@ -35,7 +35,7 @@ Posons le décor : nous avons une branche *master* qui sera utilisée pour la mi Ça donne ceci : -![git workflow](/_assets/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/init_git.png) +![git workflow]({BASE_URL}/imgs/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/init_git.png) Un développeur créé une nouvelle fonctionnalité. Il va créer sa branche depuis *develop et* la nommer "*feat-my-awesome-feature*". Des fichiers sont créés, il y a un commit et la branche est poussée. @@ -48,7 +48,7 @@ git commit -m "create some awesome code" git push origin feat-my-awesome-feature ``` -![GIT feature](/_assets/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_feature.png) +![GIT feature]({BASE_URL}/imgs/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_feature.png) La *code review* est ok, les tests passent, la branche est *fusionnée* dans *develop* pour être déployée en environnement d'intégration. Lors d'une *pull request*, le *merge* est fait en no-ff (*no fast forward*). Cela signifie qu'il y a un *commit* de *merge* dans l'historique. C'est important car il sera utilisé plus tard. @@ -58,7 +58,7 @@ git merge --no-ff feat-my-awesome-feature git push origin develop ``` -![Git Awesome Feature](/_assets/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_awesome_feature.png) +![Git Awesome Feature]({BASE_URL}/imgs/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_awesome_feature.png) Je refais de même avec une seconde fonctionnalité : *feat-killer-feature* @@ -71,7 +71,7 @@ git commit -m "create killer code" git push origin feat-killer-feature ``` -![Git Killer Feat](/_assets/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_killer_feat.png) +![Git Killer Feat]({BASE_URL}/imgs/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_killer_feat.png) Et je *merge*. @@ -81,18 +81,18 @@ git merge --no-ff feat-killer-feature git push origin develop ``` -![Git merge killer feat](/_assets/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_merge_killer_feat.png) +![Git merge killer feat]({BASE_URL}/imgs/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_merge_killer_feat.png) Voilà, mon décor est posé. Petite vue en mode terminal. -![Git log](/_assets/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_log.png) +![Git log]({BASE_URL}/imgs/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_log.png) Préparation de la branche release --------------------------------- Notre *sprint* va bientôt s'achever, préparons la branche de *release*. Mais au dernier moment, un *product owner* affolé voit que la fonctionnalité n'est pas valide. Il ne faut pas passer cette fonctionnalité en production. -![seriously](/_assets/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/seriously.png) +![seriously]({BASE_URL}/imgs/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/seriously.png) Il faut gérer cette situation ! @@ -105,7 +105,7 @@ git merge develop --no-ff Il est important de faire un *merge --no-ff* car cela va permettre de garder une trace dans l'historique sur cette annulation. -![Git release](/_assets/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_release.png) +![Git release]({BASE_URL}/imgs/articles/2016-02-24-annuler-une-fonctionnalite-avant-une-mise-en-production/git_release.png) Annuler la branche "feat-my-awesome-feature" ============================================ diff --git a/_articles/fr/2016-03-23-obtenir-apporter-de-laide-sur-symfony.md b/_articles/fr/2016-03-23-obtenir-apporter-de-laide-sur-symfony.md index 1cce64745..3e5c95740 100644 --- a/_articles/fr/2016-03-23-obtenir-apporter-de-laide-sur-symfony.md +++ b/_articles/fr/2016-03-23-obtenir-apporter-de-laide-sur-symfony.md @@ -23,7 +23,7 @@ Toute bonne recherche d’informations commence par une recherche en anglais sur Aucune excuse n’est à trouver, les recherches tout comme le code se font en anglais. Symfony comme de nombreux projets Open Source regroupent de nombreuses nationalités tant dans leur développeurs, la communauté proche, que nous autres utilisateurs de Symfony 2. Le standard, c’est l’anglais. Et de surcroît, sur Google, c’est primordial, leur système d’indexation et algos ne sont plus à prouver, que ce soit à court, moyen ou long terme. En d’autres termes “Google, English, Deal with it”. -[![dealwithit](/_assets/articles/2016-03-23-obtenir-apporter-de-laide-sur-symfony/dealwithit.gif) +[![dealwithit]({BASE_URL}/imgs/articles/2016-03-23-obtenir-apporter-de-laide-sur-symfony/dealwithit.gif) Je ne peux que retourner le couteau dans la plaie pour ceux qui n’utilisent pas cette méthode en citant les différents intervenants de Symfony. diff --git a/_articles/fr/2016-04-11-la-symfony-live-2016.md b/_articles/fr/2016-04-11-la-symfony-live-2016.md index 9df8f6184..e1d67de1e 100644 --- a/_articles/fr/2016-04-11-la-symfony-live-2016.md +++ b/_articles/fr/2016-04-11-la-symfony-live-2016.md @@ -19,9 +19,9 @@ keywords: Cette année, Eleven Labs a, pour la troisième fois, sponsorisé le Symfony Live 2016, qui s’est déroulé à la Cité Universitaire. Nous étions présents avec nos brand new Wilson Black Edition, notre borne d’arcade et nos astrobeers. -![](/_assets/articles/2016-04-11-la-symfony-live-2016/astrobeer.jpg) -![](/_assets/articles/2016-04-11-la-symfony-live-2016/stand-eleven.jpg) -![](/_assets/articles/2016-04-11-la-symfony-live-2016/tomgregbox.jpg) +![]({BASE_URL}/imgs/articles/2016-04-11-la-symfony-live-2016/astrobeer.jpg) +![]({BASE_URL}/imgs/articles/2016-04-11-la-symfony-live-2016/stand-eleven.jpg) +![]({BASE_URL}/imgs/articles/2016-04-11-la-symfony-live-2016/tomgregbox.jpg) Après notre Storify de ce matin, voici un retour détaillé en mode live tweet de l’astronaute Captain Jojo ! diff --git a/_articles/fr/2016-04-22-kernel-terminate.md b/_articles/fr/2016-04-22-kernel-terminate.md index 0bc06ce97..f37e6e5e2 100644 --- a/_articles/fr/2016-04-22-kernel-terminate.md +++ b/_articles/fr/2016-04-22-kernel-terminate.md @@ -41,7 +41,7 @@ Si vous ouvrez votre arborescence Symfony 2, et plus particulièrement le fichie Deux étapes exposées précédemment devraient vous interroger. Je vous laisse réfléchir desquelles il s'agit 2 minutes, pendant que je mets un petit gif de chat. -[![catbeer](/_assets/articles/2016-04-22-kernel-terminate/catbeer.gif) +[![catbeer]({BASE_URL}/imgs/articles/2016-04-22-kernel-terminate/catbeer.gif) Alors, trouvé ? Une fois la réponse envoyée (_$response->send();_) l'exécution du processus de votre serveur HTTP devrait se terminer étant donné que la réponse à été envoyée et probablement reçue par le client. Pourtant, on a de nouveau une instruction ensuite. diff --git a/_articles/fr/2016-06-16-le-best-of-web-2016.md b/_articles/fr/2016-06-16-le-best-of-web-2016.md index c6a74d272..7a049a31f 100644 --- a/_articles/fr/2016-06-16-le-best-of-web-2016.md +++ b/_articles/fr/2016-06-16-le-best-of-web-2016.md @@ -24,7 +24,7 @@ keywords: 09:00 ===== -![Alsacréations](/_assets/articles/2016-06-16-le-best-of-web-2016/alsacreations-1.png) +![Alsacréations]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/alsacreations-1.png) **Le quotidien d'une agence web du futur - Alsacreation : Raphaël Goetter / Rodolphe Rimelé** @@ -33,7 +33,7 @@ Ils nous ont présenté leur agence web telle qu’elle était à ses débuts, a 09:30 ===== -![Harris Freddy Render tree](/_assets/articles/2016-06-16-le-best-of-web-2016/harris-freddy-render-tree-1.png) +![Harris Freddy Render tree]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/harris-freddy-render-tree-1.png) **Web Animation Performance - ParisJS : after the render tree / Freddy Harris @harrisfreddy** @@ -44,7 +44,7 @@ Pour revoir les slides du talk, [c'est par ici que ça se passe](http://freddy03 10:00 ===== -![Streaming API](/_assets/articles/2016-06-16-le-best-of-web-2016/streaming-api.png) +![Streaming API]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/streaming-api.png) **Streaming API : pourquoi et comment ? - Eric Horesnyi / Audrey Neveux @Audrey\_Neveu** @@ -66,7 +66,7 @@ Il s’agissait ensuite essentiellement du live coding d’une application de su 11:00 ===== -![Redux](/_assets/articles/2016-06-16-le-best-of-web-2016/redux.png) +![Redux]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/redux.png) **Tout ce que vous voulez savoir sur redux - Matthieu Lux @swiip** @@ -82,7 +82,7 @@ Pour plus d’information n’hésitez pas à suivre Dan Abramov, ou à lire la 11:30 ===== -![CSS](/_assets/articles/2016-06-16-le-best-of-web-2016/css.png) +![CSS]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/css.png) **CSS, Compagnonnage et Vexillologie - Tim Carry @pixelastic** @@ -93,7 +93,7 @@ Voici un talk qui, sur le papier, ne partait pas pour être des plus enthousiasm 12:00 ===== -![meteorjs](/_assets/articles/2016-06-16-le-best-of-web-2016/meteorjs.png) +![meteorjs]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/meteorjs.png) **Le web temps réel avec météor - Maxime Quandalle** @@ -102,7 +102,7 @@ Creation d'une app méteor en live coding 12:30 ===== -![Photo buffet](/_assets/articles/2016-06-16-le-best-of-web-2016/photo-buffet.png) +![Photo buffet]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/photo-buffet.png) **REPAS** @@ -111,7 +111,7 @@ C'était bon, j’ai encore dû prendre 1kg, monde de merde. 13:30 ===== -![REX](/_assets/articles/2016-06-16-le-best-of-web-2016/rex.png) +![REX]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/rex.png) **REX sur la refonte de l'espace client Bouygue télécom avec Backbone.js Carl Ogren / Stéphane Bachelier** @@ -129,7 +129,7 @@ Un grand bravo à tous les deux ! 14:00 ===== -![Charrts de d3](/_assets/articles/2016-06-16-le-best-of-web-2016/charrts-de-d3.png) +![Charrts de d3]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/charrts-de-d3.png) **Reusable chart d3 : un pattern réutilisable pour créer un composant JS - Jeremy Pinhel @jeremypinhel** @@ -140,7 +140,7 @@ Voir le billet du maintainer de d3js sur le sujet : https://bost.ocks.org/mike/c 14:30 ===== -![RxJS5](/_assets/articles/2016-06-16-le-best-of-web-2016/rxjs5.png) +![RxJS5]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/rxjs5.png) **RxJS 5 in depth - Gerrard Sans @gerardsans** @@ -151,7 +151,7 @@ Son support : https://github.com/gsans/bestofweb\_rxjs5\_indepth/blob/master/tal 15:30 ===== -![Progressives WebApp](/_assets/articles/2016-06-16-le-best-of-web-2016/progressives-webapp.png) +![Progressives WebApp]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/progressives-webapp.png) **Progressive Web apps - Florian Orpelière @florpeliere** @@ -164,7 +164,7 @@ Vous pouvez aussi [retrouver son talk](https://docs.google.com/presentation/d/1Z 16:00 ===== -![GameBoyJs](/_assets/articles/2016-06-16-le-best-of-web-2016/gameboyjs.png) +![GameBoyJs]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/gameboyjs.png) **Emuler une gameBoy en JS - Maël Nison** @@ -203,7 +203,7 @@ Il a également développé [start9.io](http://www.start9.io) pour héberger ses 17:00 ===== -![WebComps](/_assets/articles/2016-06-16-le-best-of-web-2016/webcomps.png) +![WebComps]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/webcomps.png) **Mixité dans le monde des web components - Horacio Gonzalez @LostInBrittany** @@ -214,7 +214,7 @@ Pour les curieux, ses travaux [sont accessibles sur GitHub](https://github.com/L 17:30 ===== -![DuWebauMobile](/_assets/articles/2016-06-16-le-best-of-web-2016/duwebaumobile.png) +![DuWebauMobile]({BASE_URL}/imgs/articles/2016-06-16-le-best-of-web-2016/duwebaumobile.png) **Du web au mobile, les techno multiplateformes qui changent les standards en 2016 Florian Rival... @florianrival / Yann Leflour @yleflour** diff --git a/_articles/fr/2016-06-29-le-cache-http-votre-meilleur-ami.md b/_articles/fr/2016-06-29-le-cache-http-votre-meilleur-ami.md index adbf52004..1fd6c67de 100644 --- a/_articles/fr/2016-06-29-le-cache-http-votre-meilleur-ami.md +++ b/_articles/fr/2016-06-29-le-cache-http-votre-meilleur-ami.md @@ -162,7 +162,7 @@ Il agit comme le CDN et ce dernier appartient à l'architecture. Il s'agit souve Le web serveur aussi permet d'utiliser le cache HTTP, on l'utilise généralement pour le cache des assets (js, css, images, etc ...). Comme le varnish, son avantage est d'être configurable très finement. -![Architecture Http](/_assets/articles/2016-06-29-le-cache-http-votre-meilleur-ami/untitled.png) +![Architecture Http]({BASE_URL}/imgs/articles/2016-06-29-le-cache-http-votre-meilleur-ami/untitled.png) ### Personnaliser votre cache HTTP diff --git a/_articles/fr/2016-07-19-behat-structurez-vos-tests-fonctionnels.md b/_articles/fr/2016-07-19-behat-structurez-vos-tests-fonctionnels.md index 4102dc5ed..bc433ebb4 100644 --- a/_articles/fr/2016-07-19-behat-structurez-vos-tests-fonctionnels.md +++ b/_articles/fr/2016-07-19-behat-structurez-vos-tests-fonctionnels.md @@ -36,7 +36,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 : -![Diagram](/_assets/articles/2016-07-19-behat-structure-functional-tests/diagram.jpg) +![Diagram]({BASE_URL}/imgs/articles/2016-07-19-behat-structure-functional-tests/diagram.jpg) # Mise en place de Behat diff --git a/_articles/fr/2016-07-20-votre-premiere-pwa.md b/_articles/fr/2016-07-20-votre-premiere-pwa.md index 5f505876b..871b6d3e8 100644 --- a/_articles/fr/2016-07-20-votre-premiere-pwa.md +++ b/_articles/fr/2016-07-20-votre-premiere-pwa.md @@ -52,7 +52,7 @@ Si tout se passe bien, l'application est disponible sur [cette adresse localhost Vous pouvez alors naviguer dans l'application, son seul but étant d'avoir quelques urls et d'afficher des images (ce qui n'a que peu d'intérêt). Je vous invite à lancer l'extension installée plus tôt. Vous devez arriver sur cette page : -![Lighthouse Step1](/_assets/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-18.16.05.png) +![Lighthouse Step1]({BASE_URL}/imgs/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-18.16.05.png) Cette extension génère une note sur 100 pour votre application. Plus la note est proche de 100, plus votre application est une progressive web app. Comme vous pouvez le lire, il y a deux choses principales qui permettent de gagner des points : la mise en oeuvre d'un service worker qui permet d'avoir une application offline et la mise en place d'un manifest notifiant le navigateur que "vous êtes une progressive web app" et donc installable sur votre téléphone.  Nous allons commencer par mettre en place le service worker. @@ -81,11 +81,11 @@ Vous pouvez retrouver cette étape [ici](https://github.com/CaptainJojo/pwa/comp Il vous suffit alors de relancer le serveur. Si vous allez sur http://localhost:8080 et que vous ouvrez l'outil de développement, vous trouverez l'onglet application qui vous permet de gérer l'état de votre PWA. Je vous invite à cliquer sur "Service Workers" pour vérifier que vous avez bien un service enregistré pour votre site. -![Enregistrer votre service worker](/_assets/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-19.34.26.png) +![Enregistrer votre service worker]({BASE_URL}/imgs/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-19.34.26.png) Fermez l'outil de développement et relancez l'extension Lighthouse. -![LightHouse - Enregistrez votre service worker](/_assets/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-19.36.15.png) +![LightHouse - Enregistrez votre service worker]({BASE_URL}/imgs/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-19.36.15.png) Bravo, vous avez gagné des points ! Passons à la suite. @@ -136,11 +136,11 @@ Vous retrouverez cette étape [ici](https://github.com/CaptainJojo/pwa/compare/s Si vous relancez l'application, vous pouvez voir dans l'outil de développement, onglet application, un lien pour voir ce que contient votre cache (Cache Storage), vous y retrouvez l'ensemble des fichiers statiques. -![Service worker - Cache Storage](/_assets/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-19.54.56.png) +![Service worker - Cache Storage]({BASE_URL}/imgs/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-19.54.56.png) Puis, encore une fois, fermez l'outil de développement, et relancez LightHouse. -![LightHouse - Offline](/_assets/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-19.57.34.png) +![LightHouse - Offline]({BASE_URL}/imgs/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-19.57.34.png) Vous êtes sur la bonne voie, mais il y a une méthode encore meilleure pour initialiser votre cache. @@ -253,11 +253,11 @@ Vous pouvez retrouver cette étape [ici](https://github.com/CaptainJojo/pwa/comp Si vous relancez l'application et que vous allez dans l'outil de développement, onglet application, vous trouverez les propriétés de votre manifest. Il est même possible d'installer votre application en cliquant sur 'Add to homescreen'. -![Propriétés du manifest](/_assets/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-21.10.55.png) +![Propriétés du manifest]({BASE_URL}/imgs/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-21.10.55.png) Et encore une fois, fermez l'outil de développement et lancez l'extension LightHouse. -![LightHouse - Manifest](/_assets/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-21.12.32.png) +![LightHouse - Manifest]({BASE_URL}/imgs/articles/2016-07-20-votre-premiere-pwa/capture-decran-2016-07-18-a-21.12.32.png) Vous y êtes, votre application est une Progressive Web App ! En conclusion, ce n'est pas compliqué de mettre en place une PWA, maintenant il faut jouer avec, tester le cache, etc... Il existe d'autres fonctionnalités sympa comme la mise en place des push notifications, le fait de contrôler le bluetooth... diff --git a/_articles/fr/2016-08-19-transformer-tableau-en-reponse-json.md b/_articles/fr/2016-08-19-transformer-tableau-en-reponse-json.md index 249930510..695abe3a8 100644 --- a/_articles/fr/2016-08-19-transformer-tableau-en-reponse-json.md +++ b/_articles/fr/2016-08-19-transformer-tableau-en-reponse-json.md @@ -30,7 +30,7 @@ Concrètement, le rôle du contrôleur est de prendre un objet _Request_ en entr Ce qui a été décrit plus haut peut se résumer en une image ci-dessous. -[![Symfony kernel event](/_assets/articles/2016-08-19-transformer-tableau-en-reponse-json/10-kernel-view.png) +[![Symfony kernel event]({BASE_URL}/imgs/articles/2016-08-19-transformer-tableau-en-reponse-json/10-kernel-view.png) Le cœur de Symfony tourne autour d'un composant en particulier : _HttpKernel_. Tout au long de sa vie, la requête va passer par plusieurs étapes successives dans le noyau de Symfony. diff --git a/_articles/fr/2016-09-21-mtools-le-must-pour-mongodb.md b/_articles/fr/2016-09-21-mtools-le-must-pour-mongodb.md index fddf6b55d..ffbb53afb 100644 --- a/_articles/fr/2016-09-21-mtools-le-must-pour-mongodb.md +++ b/_articles/fr/2016-09-21-mtools-le-must-pour-mongodb.md @@ -86,7 +86,7 @@ Plus d'infos sur [mlogfilter](https://github.com/rueckstiess/mtools/wiki/mlogfil Ces deux exécutables permettent de générer des graphiques afin de visualiser plus d'informations (répartition des appels, type de commandes etc...) de manière graphique. -![Mlogvis]({{ site.baseurl }}/assets/2016-09-21-mtools/mlogvis.png) +![Mlogvis]({BASE_URL}/imgs/articles/2016-09-21-mtools/mlogvis.png) Plus d'infos sur [Mlogvis](https://github.com/rueckstiess/mtools/wiki/mlogvis) & [Mplotqueries](https://github.com/rueckstiess/mtools/wiki/mplotqueries). @@ -136,6 +136,6 @@ Cette commande permet de demander la création d'une instance mongo avec 5 repli est un client lourd permettant d’analyser et de parcourir les données d'une base MongoDB. Globalement l'outils permet de manipuler la data sans réellement demander des compétences en query mongo. Petit bémol, il n'est encore disponible que sous Windows ou MacOs :'( - ![Compass]({{ site.baseurl }}/assets/2016-09-21-mtools/date-sample.png) + ![Compass]({BASE_URL}/imgs/articles/2016-09-21-mtools/date-sample.png) - ![Compass]({{ site.baseurl }}/assets/2016-09-21-mtools/query-builder.png) + ![Compass]({BASE_URL}/imgs/articles/2016-09-21-mtools/query-builder.png) diff --git a/_articles/fr/2016-09-27-utiliser-le-composant-workflow-de-symfony.md b/_articles/fr/2016-09-27-utiliser-le-composant-workflow-de-symfony.md index c3553d5f8..6ecc9d79c 100644 --- a/_articles/fr/2016-09-27-utiliser-le-composant-workflow-de-symfony.md +++ b/_articles/fr/2016-09-27-utiliser-le-composant-workflow-de-symfony.md @@ -120,7 +120,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](/_assets/articles/2016-09-29-symfony-workflow-component/workflow.png) +![Workflow Graphviz]({BASE_URL}/imgs/articles/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/_articles/fr/2016-10-05-cohabitation-de-plusieurs-versions-de-php.md b/_articles/fr/2016-10-05-cohabitation-de-plusieurs-versions-de-php.md index 548e9c434..4dff4cbfd 100644 --- a/_articles/fr/2016-10-05-cohabitation-de-plusieurs-versions-de-php.md +++ b/_articles/fr/2016-10-05-cohabitation-de-plusieurs-versions-de-php.md @@ -103,7 +103,7 @@ $ ./bin/phpenv install php-7.1.0beta3 J'ai le temps d'aller prendre un café : -![cat](/_assets/articles/2016-10-05-cohabitation-de-plusieurs-versions-de-php/cat.gif) +![cat]({BASE_URL}/imgs/articles/2016-10-05-cohabitation-de-plusieurs-versions-de-php/cat.gif) ```bash (12h40, le ventilateur se met en route, ça compile beaucoup) diff --git a/_articles/fr/2016-10-27-les-push-notifications-sur-votre-site.md b/_articles/fr/2016-10-27-les-push-notifications-sur-votre-site.md index 6ee9c0c13..acb64aa9a 100644 --- a/_articles/fr/2016-10-27-les-push-notifications-sur-votre-site.md +++ b/_articles/fr/2016-10-27-les-push-notifications-sur-votre-site.md @@ -39,15 +39,15 @@ A partir de la vous devez avoir accès à votre PWA à l'adresse suivante [local Avant de se lancer dans l'envoi d'une push notification, nous allons passer par la configuration. Et oui ! Ce n'est pas magique, nous allons demander à Google l'autorisation. Nous allons sur [Firebase](https://console.firebase.google.com/) pour créer un projet. -![Firebase - créer un projet](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-11.19.54.png) +![Firebase - créer un projet]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-11.19.54.png) Nous vous laissons choisir le nom du projet. Une fois sur le dashboard, vous devez cliquer sur la petite roue puis "Paramètres du projet". -![Firebase - parametre du projet](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-11.22.12.png) +![Firebase - parametre du projet]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-11.22.12.png) Dans l'onglet "Cloud Messaging" vous trouverez votre bonheur en récupérant l'ID de l'expéditeur. -![Firebase - Cloud messaging](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-11.32.06.png) +![Firebase - Cloud messaging]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-11.32.06.png) Dans le manifest.json, disponible dans le dossier public de l'application, vous devez ajouter en fin de fichier le "gsm_sender_id" avec comme valeur l'ID de l'expéditeur. @@ -101,7 +101,7 @@ if('serviceWorker' in navigator) { Normalement, si vous relancez le serveur, vous devez avoir une demande pour accepter les notifications. -![PWA - Autoriser les notifications](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-15.34.14.png) +![PWA - Autoriser les notifications]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-15.34.14.png) Vous devez aussi voir dans votre console un message du type : @@ -112,7 +112,7 @@ endpoint: cV2kP3sOb24:APA91bHfZgFSPQ3CXyG9LejWdq9jOT-WqQpvK4peX9ZZtrfsHCf6OPEvDe Il s'agit du token du device, c'est à partir de celui-ci que nous pourrons envoyer une push notification. Comme nous voulons faire quelque chose de propre (même s'il ne s'agit que d'un tutoriel), nous allons utiliser Firebase pour stocker les tokens utilisateurs. Pour cela rien de plus simple,  vous retournez sur la console Firebase et dans l'onglet "Authentification" vous cliquez sur "configuration web". -![PWA - Autoriser les notifications](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-15.50.59.png) +![PWA - Autoriser les notifications]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-15.50.59.png) L'installation du script se fait dans le code html, donc public/home.html et public/article/alorscettearticle.html. @@ -205,11 +205,11 @@ Avant de lancer le serveur, vous devez ouvrir les droits à Firebase afin qu'il } ``` -![Firebase - Règles database](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-16.13.27.png) +![Firebase - Règles database]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-16.13.27.png) Si vous relancez le serveur, vous devez voir dans l'onglet "Database" de Firebase un token dans la BDD. -![Firebase - Database Token](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-16.24.58.png) +![Firebase - Database Token]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-16.24.58.png) Bon, maintenant que nous mettons les tokens dans une base de données nous allons préparer le message qui s'affichera lors d'une push notification. Pour aller vite nous allons ajouter le code suivant en fin du fichier public/sw.js : @@ -265,15 +265,15 @@ C'est presque fini ! Nous allons créer une url "/sender" qui nous permettra d'e Dans le fichier app.js, nous initialisons Firebase. Vous allez avoir besoin d'un fichier de clé serveur. Vous allez cliquer sur la roue dans Firebase puis "Autorisation". Vous êtes alors redirigé sur une autre console. -![Firebase - Autorisation](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-16.59.31.png) +![Firebase - Autorisation]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-16.59.31.png) Puis dans Comptes de service, vous créez un nouveau compte de service. -![Création - Compte et services](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-17.02.45.png) +![Création - Compte et services]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-17.02.45.png) Un fichier json sera alors téléchargé, il vous suffit de l'ajouter à la racine de votre projet. -![JsonFile - Racine](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-17.22.04.png) +![JsonFile - Racine]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-17.22.04.png) Dans le fichier app.js nous allons ajouter la route /sender qui envoie la requête de demande de push en prenant l'ensemble des tokens. @@ -333,11 +333,11 @@ app.listen(8080, function () { Attention ! La clé Authorization se trouve dans le premier onglet que l'on a ouvert. -![Firebase - Autorisation](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-17.44.27.png) +![Firebase - Autorisation]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-17.44.27.png) Si tout est bon, quand vous relancez le serveur et que vous allez sur / puis /sender vous avez la notification. Si ce n'est pas le cas supprimez le cache de votre application dans la console chrome onglet application. -![Firebase - Autorisation](/_assets/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-17.46.23.png) +![Firebase - Autorisation]({BASE_URL}/imgs/articles/2016-10-27-les-push-notifications-sur-votre-site/capture-decran-2016-10-26-a-17.46.23.png) Encore une fois ce code est vraiment un tutoriel, je vous invite donc à faire des issues pour la moindre question. Le code final est [ici](https://github.com/CaptainJojo/pwa-parisjs/tree/push). diff --git a/_articles/fr/2016-11-04-forum-php-2016.md b/_articles/fr/2016-11-04-forum-php-2016.md index f1f1fcf7b..9b8dee1a5 100644 --- a/_articles/fr/2016-11-04-forum-php-2016.md +++ b/_articles/fr/2016-11-04-forum-php-2016.md @@ -23,17 +23,17 @@ keywords: Cette année, Eleven Labs était Sponsor Gold du Forum PHP, et l’AFUP nous attendait au Beffroi de Montrouge. Au programme : un bon nombre de conférences techniques, des retours d’expériences et pas mal de PSR (pour notre plus grand plaisir :)). Mais aussi un tournoi de ping-pong organisé par Sensio, la (déjà) mythique borne d’arcade par Eleven Labs et en dessert une petite barbe à Papa de chez JoliCode ! -![montage-pour-article-forum-php-ld](/_assets/articles/2016-11-04-forum-php-2016/montage-pour-article-forum-php-LD.png) +![montage-pour-article-forum-php-ld]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/montage-pour-article-forum-php-LD.png) ## KEYNOTE D’OUVERTURE -![tweet-keynote-douverture](/_assets/articles/2016-11-04-forum-php-2016/Tweet-Keynote-douverture.png) +![tweet-keynote-douverture]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Tweet-Keynote-douverture.png) Une petite keynote rapide de **Cyril Pascal** qui nous accueille pour ce nouvel événement. Présentation du programme et des sponsors. ## HEADERS HTTP : UN BOUCLIER SUR VOTRE APPLICATION -![tweet-headers-http](/_assets/articles/2016-11-04-forum-php-2016/Tweet-Headers-HTTP.png) +![tweet-headers-http]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Tweet-Headers-HTTP.png) Romain Neutron ouvre donc le bal, avec une première conférence sur les HEADERS HTTP. Il nous explique comment se protéger un peu plus des différentes vulnérabilités XSS en s’attardant un peu sur ce qu’est le Clickjacking, et sur la compromission de Root Certificate. @@ -53,7 +53,7 @@ Twitter: ## AFFRONTEZ LA DETTE TECHNIQUE DE VOTRE PROJET EN TOUTE AGILITÉ -![tweet-dette-technique](/_assets/articles/2016-11-04-forum-php-2016/Tweet-Dette-technique.png) +![tweet-dette-technique]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Tweet-Dette-technique.png) Comment identifier et comprendre la dette technique au sein d’un projet ? Quelles sont les méthodes ou les outils pour la vaincre ? **Maxime Thoonsen**, nous apporte son retour d'expérience pendant ce talk. @@ -108,15 +108,14 @@ Twitter: ## INDUSTRIALISATION ET AUTOMATISATION CHEZ M6WEB LILLE -![tweet-rex-m6web](/_assets/articles/2016-11-04-forum-php-2016/Tweet-REX-M6web.png) +![tweet-rex-m6web]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Tweet-REX-M6web.png) **Pierre Marichez** et **Renaud Bougre** viennent nous expliquer leur retour d’expérience d'un an sur la mise en place de process et workflow chez M6WEB Lille. Pourquoi ces changements ? Leur plus grand problème est que sur les 7 projets présents à l’époque, aucun des projets n’avait de process commun. Chaque développeur était libre du choix de la techno du début jusqu’au déploiement en PROD. - ![capture-du-2016-11-03-23-25-53](/_assets/articles/2016-11-04-forum-php-2016/Capture-du-2016-11-03-23-25-53-1.png) [ -](/_assets/articles/2016-11-04-forum-php-2016/Capture-du-2016-11-03-23-25-53.png) + ![capture-du-2016-11-03-23-25-53]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Capture-du-2016-11-03-23-25-53-1.png) Comment s’y sont-ils pris ? @@ -129,14 +128,14 @@ Comment s’y sont-ils pris ? Pour résumer voilà tout ce qu’ils ont mis en place : -![capture-du-2016-11-03-23-29-07](/_assets/articles/2016-11-04-forum-php-2016/Capture-du-2016-11-03-23-29-07.png) +![capture-du-2016-11-03-23-29-07]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Capture-du-2016-11-03-23-29-07.png) Slide: Twitter: ## CLINIQUE ‘CIRCUIT BREAKER’, LE FUSIBLE DE VOTRE SITE -![tweet-clinique-circuit-breaker](/_assets/articles/2016-11-04-forum-php-2016/Tweet-Clinique-Circuit-Breaker.png) +![tweet-clinique-circuit-breaker]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Tweet-Clinique-Circuit-Breaker.png) Sous forme d’un speed talk devant le stand Eleven Labs, notre @captainJojo42 alias **Jonathan Jalouzot**, nous a proposé une petite introduction au pattern **Circuit-Breaker**. @@ -147,7 +146,7 @@ Twitter: ## PATTERN ADR, PSR-7, ACTIONS FRAMEWORK-AGNOSTIC ET AUTOWIRING AVEC SYMFONY -![tweet-conf-symfony](/_assets/articles/2016-11-04-forum-php-2016/Tweet-Conf-Symfony.png) +![tweet-conf-symfony]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Tweet-Conf-Symfony.png) **Kévin Dunglas **nous propose un tour d’horizon des problématiques que l’on embarque tous au quotidien sans parfois sans rendre compte. Il insiste aussi sur le fait qu’avant d’être un développeur **Symfony** nous sommes des développeurs **PHP**, on a tendance à l'oublier. @@ -164,7 +163,7 @@ Twitter: ## ÉTENDRE COMPOSER -![tweet-etendre-composer](/_assets/articles/2016-11-04-forum-php-2016/Tweet-Etendre-Composer.png) +![tweet-etendre-composer]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Tweet-Etendre-Composer.png) Clairement la conférence la plus rapide du forum, je crois ~9min. Pour notre plus grand plaisir, on en voudrait tous les jours :) **Nicolas Joseph**, parle peu mais très bien. Il nous fournit une liste de commande et de plugin qui lui facilite la tâche au quotient. @@ -179,4 +178,4 @@ Pour résumer ces deux jours, des conférences de qualité, de très bons confé Merci l’AFUP. See you next year ;) -![merci-afup](/_assets/articles/2016-11-04-forum-php-2016/Merci-Afup.png) +![merci-afup]({BASE_URL}/imgs/articles/2016-11-04-forum-php-2016/Merci-Afup.png) diff --git a/_articles/fr/2016-11-10-se-lancer-dans-le-dev-mobile-partie1.md b/_articles/fr/2016-11-10-se-lancer-dans-le-dev-mobile-partie1.md index 98d4ca4b9..116f5bd51 100644 --- a/_articles/fr/2016-11-10-se-lancer-dans-le-dev-mobile-partie1.md +++ b/_articles/fr/2016-11-10-se-lancer-dans-le-dev-mobile-partie1.md @@ -49,7 +49,7 @@ Ainsi, Ionic ne permet pas de créer à proprement parler d’applications nativ *Schéma représentation Ionic* : -![schema1]({{ site.baseurl }}/assets/2016-11-10-se-lancer-dans-le-dev-mobile-partie1/schema.png?width=600) +![schema1]({BASE_URL}/imgs/articles/2016-11-10-se-lancer-dans-le-dev-mobile-partie1/schema.png?width=600) Je vous vois venir :  “AngularJs, super je maîtrise le truc, aller hop on y go”. Hop hop hop !!!!. Jeune padawan, lire l’article en entier tu dois ! @@ -94,7 +94,7 @@ Mais Ionic dispose de points faibles : *Tableau compatibilité sous Cordova* : -![]({{ site.baseurl }}/assets/2016-11-10-se-lancer-dans-le-dev-mobile-partie1/platform-support.png?width=300) +![]({BASE_URL}/imgs/articles/2016-11-10-se-lancer-dans-le-dev-mobile-partie1/platform-support.png?width=300) **Conclusion :** diff --git a/_articles/fr/2016-11-23-mdbe16-mongodb-europe-a-londres.md b/_articles/fr/2016-11-23-mdbe16-mongodb-europe-a-londres.md index 971391278..5ca5fdab5 100644 --- a/_articles/fr/2016-11-23-mdbe16-mongodb-europe-a-londres.md +++ b/_articles/fr/2016-11-23-mdbe16-mongodb-europe-a-londres.md @@ -39,7 +39,7 @@ Puis quelques grands acteurs sous MongoDB : Baidu (plus grand site chinois, +100 Les nouveautés de cette version sont présentées sous forme d’amélioration, d'extension ou d'innovation. -![Mongo3.4]({{ site.baseurl }}/assets/2016-11-23-mdbe16/IMG_4288.jpg) +![Mongo3.4]({BASE_URL}/imgs/articles/2016-11-23-mdbe16/IMG_4288.jpg) *Improve :* @@ -62,7 +62,7 @@ Toutes les nouveautés de la 3.4 i ### Keynote du Prof Brian Cox, physicien et astronome. -![Prof Brian Cox]({{ site.baseurl }}/assets/2016-11-23-mdbe16/CxS5AUkWgAAgyK0.jpg) +![Prof Brian Cox]({BASE_URL}/imgs/articles/2016-11-23-mdbe16/CxS5AUkWgAAgyK0.jpg) L'objectif de cette présentation était de nous montrer l’utilité de MongoDB dans le travail de cartographie de l'univers du prof Cox, et comment l’avènement du BigData aide aujourd'hui énormément les chercheurs à définir des "modèles" d’expansion de l'univers (milliards de données). @@ -76,20 +76,20 @@ L'objectif de cette présentation était de nous montrer l’utilité de MongoDB La présentation a commencé par un récapitulatif de l'utilité de l'aggregation framework, puis plusieurs use-cases plus ou moins compliqués d'application. -![Pipelines]({{ site.baseurl }}/assets/2016-11-23-mdbe16/CxTD2xUWEAAaGFI-1.jpg) +![Pipelines]({BASE_URL}/imgs/articles/2016-11-23-mdbe16/CxTD2xUWEAAaGFI-1.jpg) Par exemple le calcul des nombres premiers en MongoDB -![Pipelines2]({{ site.baseurl }}/assets/2016-11-23-mdbe16/CxTJq9WXUAAw7Et.jpg) +![Pipelines2]({BASE_URL}/imgs/articles/2016-11-23-mdbe16/CxTJq9WXUAAw7Et.jpg) Et enfin, une première présentation des graphes sous MongoDB 3.4 avec $graphLookup Avec $graphLookup dans MongoDB 3.4, nous avons enfin la possibilité de "join" des données d'une même collection, afin de constituer un graphe de données. Par exemple : -![Pipelines3]({{ site.baseurl }}/assets/2016-11-23-mdbe16/CxTHdM2XAAAsM_G.jpg) +![Pipelines3]({BASE_URL}/imgs/articles/2016-11-23-mdbe16/CxTHdM2XAAAsM_G.jpg) -![Pipelines4]({{ site.baseurl }}/assets/2016-11-23-mdbe16/CxTHdMTW8AEgUuU.jpg) +![Pipelines4]({BASE_URL}/imgs/articles/2016-11-23-mdbe16/CxTHdMTW8AEgUuU.jpg) Un article sur les fonctionnalités de $graphLookup plus complet sera disponible sur le blog d'ici peu. diff --git a/_articles/fr/2016-12-01-creer-votre-premier-package-pour-atom.md b/_articles/fr/2016-12-01-creer-votre-premier-package-pour-atom.md index 6b925397e..59999e8e0 100644 --- a/_articles/fr/2016-12-01-creer-votre-premier-package-pour-atom.md +++ b/_articles/fr/2016-12-01-creer-votre-premier-package-pour-atom.md @@ -110,7 +110,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 : -![Gitlab URL Parameter](/_assets/articles/2016-12-05-create-atom-package/gitlab-url.png) +![Gitlab URL Parameter]({BASE_URL}/imgs/articles/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 : @@ -223,7 +223,7 @@ Vous pouvez lancer les specs via le menu d'Atom : `View`  -> `Packages`  -> `R Notre package est maintenant prêt à être publié ! -![Publish](/_assets/articles/2016-12-05-create-atom-package/publish.gif) +![Publish]({BASE_URL}/imgs/articles/2016-12-05-create-atom-package/publish.gif) Pour se faire, nous allons utiliser l'outil CLI installé avec Atom : `apm`. diff --git a/_articles/fr/2016-12-02-ajouter-le-code-coverage-sur-les-pr-avec-gitlab-ci.md b/_articles/fr/2016-12-02-ajouter-le-code-coverage-sur-les-pr-avec-gitlab-ci.md index 084f55e43..644742ac6 100644 --- a/_articles/fr/2016-12-02-ajouter-le-code-coverage-sur-les-pr-avec-gitlab-ci.md +++ b/_articles/fr/2016-12-02-ajouter-le-code-coverage-sur-les-pr-avec-gitlab-ci.md @@ -19,7 +19,7 @@ keywords: Voici un tip qui permet de pouvoir voir en un clin d’œil les répercussions d'une MR sur la couverture de code de votre projet. -![gitlab-ci-code-coverage]({{ site.baseurl }}/assets/2016-12-02-gitlab-ci/gitlab-ci-code-coverage-1.png) +![gitlab-ci-code-coverage]({BASE_URL}/imgs/articles/2016-12-02-gitlab-ci/gitlab-ci-code-coverage-1.png) Dans un premier temps, nous allons modifier notre .gitlab-ci.yml @@ -41,7 +41,7 @@ La modification de notre pipeline porte sur les configs de phpunit en ajoutant  Puis dans l'interface de réglages du pipeline, nous allons configurer la regex afin de récupérer la couverture de code du commit. -![gitlab-ci-code-coverage]({{ site.baseurl }}/assets/2016-12-02-gitlab-ci/gitlab-ci-code-coverage-2.png) +![gitlab-ci-code-coverage]({BASE_URL}/imgs/articles/2016-12-02-gitlab-ci/gitlab-ci-code-coverage-2.png) Là, gitlab est plutot sympa et nous donne déjà plusieurs regex toutes prêtes en fonction du langage du projet. Dans mon cas c'est du PHP donc la config sera ```^\s*Lines:\s*\d+.\d+\%``` @@ -55,6 +55,6 @@ Petit bonus, pour avoir le badge avec le code coverage sur le README, ajouter si Et voila le résultat -![gitlab-ci-code-coverage]({{ site.baseurl }}/assets/2016-12-02-gitlab-ci/gitlab-ci-code-coverage-3.png) +![gitlab-ci-code-coverage]({BASE_URL}/imgs/articles/2016-12-02-gitlab-ci/gitlab-ci-code-coverage-3.png) Pour plus d'infos : [gitlab-ci: documentation](https://docs.gitlab.com/ee/user/project/pipelines/settings.html#test-coverage-parsing) diff --git a/_articles/fr/2016-12-05-feedback-sur-les-dotcss-2016.md b/_articles/fr/2016-12-05-feedback-sur-les-dotcss-2016.md index 816f076fa..44f3eac12 100644 --- a/_articles/fr/2016-12-05-feedback-sur-les-dotcss-2016.md +++ b/_articles/fr/2016-12-05-feedback-sur-les-dotcss-2016.md @@ -22,7 +22,7 @@ keywords: Pour cette 3ème édition des DotCSS consacrée à la partie stylée de la Force, le menu était alléchant : 8 conférenciers de qualité dont quelques pointures de la profession, avec comme cerise sur le gâteau un talk de Dieu le père, aka Håkon Wium Lie, le créateur de CSS en personne. Comme d’habitude aux Dot Conférences, l’accueil était princier et l’ambiance chaleureuse dans un théâtre des variétés plein à craquer. -![dot2016](/_assets/articles/2016-12-05-feedback-sur-les-dotcss-2016/dot2016.jpg) +![dot2016]({BASE_URL}/imgs/articles/2016-12-05-feedback-sur-les-dotcss-2016/dot2016.jpg) **VARYA STEPANOVA – PatternLibraries** diff --git a/_articles/fr/2016-12-08-google-cloud-platform-pour-les-nuls.md b/_articles/fr/2016-12-08-google-cloud-platform-pour-les-nuls.md index cb52c49c4..4a864db99 100644 --- a/_articles/fr/2016-12-08-google-cloud-platform-pour-les-nuls.md +++ b/_articles/fr/2016-12-08-google-cloud-platform-pour-les-nuls.md @@ -46,16 +46,16 @@ Je vous invite à aller sur cette url [https://cloud.google.com/](https://cloud En haut du dashboard, vous devez alors créer un projet. -![Création d'un projet - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.09.13.png) +![Création d'un projet - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.09.13.png) Vous devez choisir un nom de projet, celui-ci sera alors considéré comme l'id du projet pour le reste du tutoriel. -![Création du projet - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.11.57.png) +![Création du projet - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.11.57.png) Vous êtes alors redirigé sur le dashboard du projet, vous y verrez toutes les infos de votre projet. -![Création du projet - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.15.47.png) +![Création du projet - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.15.47.png) ### Etape 3,  on va mettre un budget : @@ -63,38 +63,38 @@ Vous avez peur de payer trop cher lors des différents tutoriels, nous allons do Dans le menu, vous devez sélectionner "Facturation". -![Facturation - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.20.16.png) +![Facturation - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.20.16.png) Puis cliquez sur "budgets et alertes", vous pouvez alors créer un budget. -![Créer un budget - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.22.21.png) +![Créer un budget - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.22.21.png) Il ne vous reste plus qu'a remplir le formulaire de création de budget. -![Créer un budget - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.24.38.png) +![Créer un budget - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.24.38.png) ### Etape 4, Jenkins en 5 minutes : Dirigez vous dans le menu "Cloud launcher", vous arrivez dans l'interface du choix des technologies disponibles pour être préinstallé. -![Cloud Launcher - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.28.09.png) +![Cloud Launcher - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.28.09.png) Vous n'avez plus qu'à chercher la solution Jenkins, vous arrivez alors sur l'interface de lancement de configuration. -![Configuration Jenkins - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.30.33.png) +![Configuration Jenkins - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.30.33.png) Vous devez cliquer sur "Lancer sur Compute Engine", comme vous le voyez si vous laissez la configuration par défaut le coût estimé est de 14,20 dollars/mois. Je vous invite à jouer avec les options pour voir le prix changer. -![Deployer - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.35.43.png) +![Deployer - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.35.43.png) Il ne vous reste plus qu'à "déployer", cela peut prendre un peu de temps. Lorsque tout est terminé vous trouverez les éléments essentiels pour accéder à votre Jenkins fraîchement installé. -![Accéder à Jenkins - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.38.53.png) +![Accéder à Jenkins - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.38.53.png) Si tout est bon, cliquez sur "Visit the site", entrez les informations utilisateur disponibles sur l'interface précédente. Félicitations : Jenkins est installé. -![Jenkins - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.42.19.png) +![Jenkins - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.42.19.png) Maintenant que vous savez faire du Cloud, nous allons passer à l'étape suivante dans le tutoriel 2. @@ -102,4 +102,4 @@ Maintenant que vous savez faire du Cloud, nous allons passer à l'étape suivant N'oubliez pas de supprimer le projet Jenkins, pour ne pas payer pour rien. -![Supprimer Jenkins - Google Cloud Platform](/_assets/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.51.59.png) +![Supprimer Jenkins - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-08-google-cloud-platform-pour-les-nuls/capture-decran-2016-11-30-a-11.51.59.png) diff --git a/_articles/fr/2016-12-09-google-cloud-platform-appengine-pour-vos-projets.md b/_articles/fr/2016-12-09-google-cloud-platform-appengine-pour-vos-projets.md index c84b535b6..5d024a46d 100644 --- a/_articles/fr/2016-12-09-google-cloud-platform-appengine-pour-vos-projets.md +++ b/_articles/fr/2016-12-09-google-cloud-platform-appengine-pour-vos-projets.md @@ -109,7 +109,7 @@ Allez dans la console Cloud dans l'onglet [AppEngine](https://console.cloud.goog Puis dans "versions" vous devriez voir la version de votre projet apparaître. -![AppEngine - Google Cloud Platform](/_assets/articles/2016-12-09-google-cloud-platform-appengine-pour-vos-projets/capture-decran-2016-11-30-a-14.05.13.png) +![AppEngine - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-09-google-cloud-platform-appengine-pour-vos-projets/capture-decran-2016-11-30-a-14.05.13.png) Quand le déploiement sera terminé, vous pourrez accéder à votre site en cliquant sur le nom de la version. Vous pouvez suivre les logs de l'application en lançant la commande suivante dans votre terminal : @@ -142,7 +142,7 @@ gcloud app deploy --version version2 ``` Dans l'interface AppEngine, vous devez voir la nouvelle version se lancer : -![AppEngine V2 - Google Cloud Platform](/_assets/articles/2016-12-09-google-cloud-platform-appengine-pour-vos-projets/capture-decran-2016-11-30-a-14.13.55.png) +![AppEngine V2 - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-09-google-cloud-platform-appengine-pour-vos-projets/capture-decran-2016-11-30-a-14.13.55.png) Google enverra 100% du trafic sur la nouvelle version dès que celle-ci sera lancée entièrement. Une fois le processus terminé vous pouvez choisir vous même comment répartir le trafic. @@ -153,12 +153,12 @@ La répartition du trafic permet de gérer un changement de version progressif d Vous arrivez sur l'interface suivante : -![Répartir le traffic - Google Cloud Platform](/_assets/articles/2016-12-09-google-cloud-platform-appengine-pour-vos-projets/capture-decran-2016-11-30-a-14.18.42.png) +![Répartir le traffic - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-09-google-cloud-platform-appengine-pour-vos-projets/capture-decran-2016-11-30-a-14.18.42.png) ### Etape 8, Stopper les versions Avant de partir, nous allons éteindre les versions, pour cela sélectionnez la version que vous souhaitez éteindre, puis cliquez sur "Arrêter". -![Arreter - Google Cloud Platform](/_assets/articles/2016-12-09-google-cloud-platform-appengine-pour-vos-projets/capture-decran-2016-11-30-a-14.22.54.png) +![Arreter - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-09-google-cloud-platform-appengine-pour-vos-projets/capture-decran-2016-11-30-a-14.22.54.png) Je vous invite à jouer un peu avec AppEngine, il permet de très vite tester vos POC sur de vrais serveurs, et même de maintenir une charge importante pour vos projets. diff --git a/_articles/fr/2016-12-12-feedback-dotjs-2016.md b/_articles/fr/2016-12-12-feedback-dotjs-2016.md index dd6662051..3cdbc6830 100644 --- a/_articles/fr/2016-12-12-feedback-dotjs-2016.md +++ b/_articles/fr/2016-12-12-feedback-dotjs-2016.md @@ -17,7 +17,7 @@ La 5ème édition des conférences dotJS a battu un nouveau record d'affluence Bien que le charme du théâtre parisien des années passées n'y était plus, il était beaucoup plus agréable de suivre une journée entière de conférence dotJS dans cette salle de bon volume, bien ventilée et avec de bons sièges :) -[![dotjs-1](/_assets/articles/2016-12-12-feedback-dotjs-2016/dotjs-1-300x224.jpg)](/_assets/articles/2016-12-12-feedback-dotjs-2016/dotjs-1.jpg) +[![dotjs-1]({BASE_URL}/imgs/articles/2016-12-12-feedback-dotjs-2016/dotjs-1-300x224.jpg)]({BASE_URL}/imgs/articles/2016-12-12-feedback-dotjs-2016/dotjs-1.jpg) La journée est composée de dix regular talks (sujets de 30 min présentés par des personnalités) et de huit lightning talks (sujets de 5 min présentés par des courageux ;)). Quatre sessions au total temporisent la journée, intercalées par des temps de pauses suffisamment long pour se ressourcer. Ce fût très enrichissant tout en étant très agréable. diff --git a/_articles/fr/2016-12-12-google-cloud-platform-compute-engine-architecture-complete.md b/_articles/fr/2016-12-12-google-cloud-platform-compute-engine-architecture-complete.md index a419e27c8..51b80ce4f 100644 --- a/_articles/fr/2016-12-12-google-cloud-platform-compute-engine-architecture-complete.md +++ b/_articles/fr/2016-12-12-google-cloud-platform-compute-engine-architecture-complete.md @@ -27,11 +27,11 @@ Dans ce tutoriel nous allons seulement installer un apache, mais vous pouvez app Allez dans le menu "Compute Engine", disponible [ici](https://console.cloud.google.com/compute/instances). -![Compute Engine - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.09.20.png) +![Compute Engine - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.09.20.png) Puis cliquez sur "Créer une instance", vous allez arriver sur un formulaire qu'il va falloir remplir. -![Créer une instance - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.11.17.png) +![Créer une instance - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.11.17.png) - Choisissez un nom - Puis la zone (il s'agit du lieu du serveur) @@ -41,7 +41,7 @@ Puis cliquez sur "Créer une instance", vous allez arriver sur un formulaire qu' Ouvrez le lien "Gestion, disque, réseau et clés SSH", et dans l'onglet Disque décochez la case "Supprimer le disque de démarrage lorsque l'instance est supprimée". -![Suppression du disque - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.14.42.png) +![Suppression du disque - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.14.42.png) Cliquez alors sur "Créer". @@ -49,11 +49,11 @@ Cliquez alors sur "Créer". Allez dans "Instance de VM" et attendre que la machine soit prête. -![Instance de VM - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.18.22.png) +![Instance de VM - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.18.22.png) Cliquez sur SSH pour ouvrir la connexion à la machine. -![Connexion SSH - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.20.12.png) +![Connexion SSH - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.20.12.png) Une fois connecté, nous allons installer apache. Pour cela il vous suffit de lancer les commandes suivantes : @@ -65,7 +65,7 @@ sudo /etc/init.d/apache2 restart; Une fois terminé, si vous cliquez sur l'IP externe fournie dans l'interface "Instance de VM", vous devriez voir la page apache par défaut. -![Apache - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.25.36.png) +![Apache - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.25.36.png) Comme vous pouvez le voir l'installation prend un certain temps, et nous ne voulons pas le refaire pour chaque machine dont nous avons besoin. Nous allons donc nous servir de cette machine comme template pour d'autres machines. @@ -73,28 +73,28 @@ Comme vous pouvez le voir l'installation prend un certain temps, et nous ne voul Retour dans l'interface "Instance de VM", vous allez supprimer la machine en sélectionnant la VM puis cliquer sur supprimer. -![Supprimer une instance - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.29.17.png) +![Supprimer une instance - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.29.17.png) Allez dans le menu "Images" et cliquez sur "Créer une image". -![Créer une image - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.32.54.png) +![Créer une image - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.32.54.png) Vous devez alors remplir le formulaire de création d'image. -![Formulaire Image - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.33.58.png) +![Formulaire Image - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.33.58.png) La seule chose qu'il faut surveiller, c'est le choix du disque source qui doit être celui de la machine que l'on vient de détruire. Une fois l'image créée, allez dans le menu "Modèles d'instances" et cliquez sur "Créer un modèle d'instance". -![Modèle d'instance - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.37.04.png) +![Modèle d'instance - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.37.04.png) Vous arrivez dans un formulaire ressemblant à celui de la création d'instance. -![Modèle d'instance - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.39.26.png) +![Modèle d'instance - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.39.26.png) Dans disque de démarrage, vous devez choisir l'image que vous venez de créer, elle est disponible dans l'onglet "images personnalisées" . -![Image perso - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.41.14.png) +![Image perso - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.41.14.png) Et n'oubliez pas de cocher la case "Autoriser le trafic HTTP". Puis cliquez sur "Créer". Pour vérifier que tout est bon, nous allons créer de nouvelles instances via ce template. @@ -103,13 +103,13 @@ Pour vérifier que tout est bon, nous allons créer de nouvelles instances via Allez dans le menu "Groupes d'instances" puis cliquez sur "Créer un groupe d'instances". -![Créer groupe d'instances - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.47.54.png) +![Créer groupe d'instances - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.47.54.png) Vous avez l'habitude, nous arrivons sur un formulaire assez long. -![Formulaire 1 - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.49.30.png) +![Formulaire 1 - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.49.30.png) -![Formulaire 2 - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.49.43.png) +![Formulaire 2 - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.49.43.png) - Choisissez un nom pour votre groupe - Puis l'emplacement (le mieux c'est multizone qui permet d'avoir des serveurs dans le monde entier) @@ -120,7 +120,7 @@ Vous avez l'habitude, nous arrivons sur un formulaire assez long. Vous pouvez alors créer le groupe. Si vous retournez dans le menu "Instances de VM" vous pourrez voir les trois machines en cours de création. Une fois terminé, cliquez sur l"IP externe" de chaque machine. Normalement la page d'apache par défaut s'affiche. -![groupe d'instance - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.56.59.png) +![groupe d'instance - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-18.56.59.png) À partir de maintenant, nous avons un groupe d'instances qui va scaler selon le trafic. Seulement, le trafic arrive sur les trois Ips, il nous faut donc un "load balancer" devant les machines pour envoyer le trafic sur le groupe d'instances. @@ -128,31 +128,31 @@ Si vous retournez dans le menu "Instances de VM" vous pourrez voir les trois mac Changez de menu et allez dans "réseau". -![Réseau - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.02.40.png) +![Réseau - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.02.40.png) Puis allez dans "Équilibrage des charges", et créez un équilibreur. -![Load Balancer - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.05.27.png) +![Load Balancer - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.05.27.png) Choisissez un équilibrage des charges HTTP(S). Vous pouvez alors configurer l'équilibreur. -![Configuration équilibreur - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.07.08.png) +![Configuration équilibreur - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.07.08.png) Choisissez un nom. Puis cliquez sur "Configuration des backends", et créez un service backend. Vous arrivez sur le formulaire suivant : -![Backend - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.10.37.png) +![Backend - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.10.37.png) -![Formulaire - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.10.42.png) +![Formulaire - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.10.42.png) - Choisissez un nom - Puis l'instance backend (c'est le groupe créé juste avant) Ajoutez un test périodique. -![Test périodique - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.11.07.png) +![Test périodique - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.11.07.png) - Choisissez un nom - Puis le protocole http @@ -162,11 +162,11 @@ Il ne nous reste plus qu'a cliquer sur "Règles d'hôte et de chemin d'accès", Vous n'avez plus qu'à créer, cela va prendre pas mal de temps (environs 5 min). Vous pourrez trouver l'IP d'entrée du load balancer dans le menu "Équilibrage des charges", puis sur le load balancer fraîchement configuré vous aurez l'ip disponible. -![Load balancer - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.17.18.png) +![Load balancer - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.17.18.png) Toujours dans cette interface, dans l'onglet surveillance vous pouvez suivre les backends qui reçoivent les requêtes. -![Surveillance Backend - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.20.22.png) +![Surveillance Backend - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.20.22.png) Et voila vous avez une architecture scalable automatiquement avec un load balancer comme un vrai architecte réseau. @@ -182,4 +182,4 @@ Avant de vous quitter, nous allons supprimer les machines.  Vous devez le faire Si vous allez dans le dashboard vous devez ne plus voir de machine "compute engine" -![Dashboard - Google Cloud Platform](/_assets/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.28.32.png) +![Dashboard - Google Cloud Platform]({BASE_URL}/imgs/articles/2016-12-12-google-cloud-platform-compute-engine-architecture-complete/capture-decran-2016-11-30-a-19.28.32.png) diff --git a/_articles/fr/2016-12-13-tutoriel-polyfill.md b/_articles/fr/2016-12-13-tutoriel-polyfill.md index ece91e440..9975da6ec 100644 --- a/_articles/fr/2016-12-13-tutoriel-polyfill.md +++ b/_articles/fr/2016-12-13-tutoriel-polyfill.md @@ -45,7 +45,7 @@ Nous allons faire simple, aujourd'hui nous voulons utiliser la fonction "Object. Si vous allez sur [Can I Use](http://caniuse.com/) vous trouvez la page [suivante](http://kangax.github.io/compat-table/es6/#test-Object_static_methods_Object.assign) : -![](/_assets/articles/2016-12-13-tutoriel-polyfill/capture-decran-2016-12-11-a-17.38.08.png) +![]({BASE_URL}/imgs/articles/2016-12-13-tutoriel-polyfill/capture-decran-2016-12-11-a-17.38.08.png) Donc comme vous pouvez le voir, la fonction n'est pas implémentée sur IE11. Nous allons donc faire le polyfill nous même. diff --git a/_articles/fr/2016-12-14-le-circuit-breaker-kesako.md b/_articles/fr/2016-12-14-le-circuit-breaker-kesako.md index 032331240..5ccba97b7 100644 --- a/_articles/fr/2016-12-14-le-circuit-breaker-kesako.md +++ b/_articles/fr/2016-12-14-le-circuit-breaker-kesako.md @@ -31,23 +31,23 @@ Mais quel parallèle avec notre architecture micro-services ? Il faut se représ Un service A fait appel à un service B. -![](/_assets/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-1.png) +![]({BASE_URL}/imgs/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-1.png) Si le service B tombe ou est ralenti, sans circuit breaker la communication entre le service A et le service B continue. -![](/_assets/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-1-1.png) +![]({BASE_URL}/imgs/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-1-1.png) Le service A peut alors être ralenti ou même tomber. -![](/_assets/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-2.png) +![]({BASE_URL}/imgs/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-2.png) Mais si vous avez un circuit-breaker, quand le service B tombe ou est ralenti, le circuit-breaker s'ouvre et stoppe la communication entre A et B. -![](/_assets/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-3.png) +![]({BASE_URL}/imgs/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-3.png) Ce qui permet au service A de prendre en charge la panne, et d'attendre que le service B soit relancé. Dans ce cas là le circuit-breaker se ferme et la communication recommence. -![](/_assets/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-5.png) +![]({BASE_URL}/imgs/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-5.png) ***Bonus***: L'intérêt est encore plus présent quand votre architecture est dans le cloud et que vous avez choisi un système d'autoscalling. Quand un service tombe ou est ralenti cela peut entraîner une plus forte demande du service, ce qui par effet de levier peut faire des demandes de création de machine et ne ferrons que sur-alimenter le cloud. Cela peut vite coûter cher ! @@ -56,7 +56,7 @@ Vous êtes désormais convaincu d'avoir besoin d'avoir un circuit-breaker, mais ### Implémentation en Symfony 3 : Nous allons suivre le pattern suivant. -![](/_assets/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-6.png) +![]({BASE_URL}/imgs/articles/2016-12-14-le-circuit-breaker-kesako/untitled-drawing-6.png) Ce dont nous avons besoin : diff --git a/_articles/fr/2016-12-15-debugger-avec-xdebug.md b/_articles/fr/2016-12-15-debugger-avec-xdebug.md index 589f9401a..7f621ab1e 100644 --- a/_articles/fr/2016-12-15-debugger-avec-xdebug.md +++ b/_articles/fr/2016-12-15-debugger-avec-xdebug.md @@ -63,28 +63,28 @@ Ensuite, configurons PHPStorm : On va dans **Run > Edit configurations**, puis cliquer sur le symbole « + » Dans la liste on clique sur « **PHP Remote Debug** ». -![](/_assets/articles/2016-12-15-debugger-avec-xdebug/my_app_remote.png) +![]({BASE_URL}/imgs/articles/2016-12-15-debugger-avec-xdebug/my_app_remote.png) Nommez votre configuration et renseignez l'idekey, ici « idekey » comme configuré dans le php.ini. On ajoute ensuite un serveur en cliquent sur le bouton « ... » -![](/_assets/articles/2016-12-15-debugger-avec-xdebug/remote_host.png) +![]({BASE_URL}/imgs/articles/2016-12-15-debugger-avec-xdebug/remote_host.png) Dans cet exemple je fais tourner un server en local, mon host distant est en fait localhost. On laisse le port **80** et on sélectionne évidemment « **xDebug** ». Il faut également mapper les fichiers PHP locaux avec ceux qui se trouvent sur le serveur (pour que l'IDE reconnaisse les fichiers que xDebug lui communique). Ici mon projet se trouve dans **/var/www** sur le serveur distant. -Maintenant il ne nous reste plus qu'à poser un point d'arrêt dans le code et d'écouter les connections de xDebug (bouton à droite sur l'image) : ![](/_assets/articles/2016-12-15-debugger-avec-xdebug/configuration_dropdown.png) +Maintenant il ne nous reste plus qu'à poser un point d'arrêt dans le code et d'écouter les connections de xDebug (bouton à droite sur l'image) : ![]({BASE_URL}/imgs/articles/2016-12-15-debugger-avec-xdebug/configuration_dropdown.png) -![](/_assets/articles/2016-12-15-debugger-avec-xdebug/my_controller.png) +![]({BASE_URL}/imgs/articles/2016-12-15-debugger-avec-xdebug/my_controller.png) Pour déclencher la session de debug, nous devons passer la variable `XDEBUG_SESSION_START` en query string avec comme valeur notre idekey. -![](/_assets/articles/2016-12-15-debugger-avec-xdebug/browser.png) +![]({BASE_URL}/imgs/articles/2016-12-15-debugger-avec-xdebug/browser.png) > Il est également possible de passer par un cookie, mais le plus simple est d'utiliser un plugin sur votre navigateur ([Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc) pour chrome, [The easiest debug](https://addons.mozilla.org/fr/firefox/addon/the-easiest-xdebug/) pour firefox) qui vous permet en un clic d'activer le debugging. Et HOP ! PHPStorm surgit tout à coup et nous montre tout ce qui se passe à l'endroit de notre point d'arrêt ! On peut même avancer l'exécution au pas à pas ! -![](/_assets/articles/2016-12-15-debugger-avec-xdebug/debugging.png) +![]({BASE_URL}/imgs/articles/2016-12-15-debugger-avec-xdebug/debugging.png) ## Debugger les scripts CLI @@ -113,7 +113,7 @@ Ou encore : XDEBUG_CONFIG="remote_enable=1" php bin/console xdebug:test ``` -![](/_assets/articles/2016-12-15-debugger-avec-xdebug/debugging_cli.png) +![]({BASE_URL}/imgs/articles/2016-12-15-debugger-avec-xdebug/debugging_cli.png) Pour débugger en mode CLI sur un serveur distant, vous devez simplement changer la valeur de `xdebug.remote_host` dans le php.ini par votre IP. diff --git a/_articles/fr/2016-12-20-comprendre-ssl-tls-partie-1.md b/_articles/fr/2016-12-20-comprendre-ssl-tls-partie-1.md index 7a697d9ec..1460886b4 100644 --- a/_articles/fr/2016-12-20-comprendre-ssl-tls-partie-1.md +++ b/_articles/fr/2016-12-20-comprendre-ssl-tls-partie-1.md @@ -44,7 +44,7 @@ SSL et TLS sont donc transparents pour l'utilisateur et ne nécessitent pas l'em *Modèle OSI avec le SSL/TLS* -![]({{ site.baseurl }}/assets/2016-12-20-comprendre-ssl-tls-partie-1/tls-in-osi.png) +![]({BASE_URL}/imgs/articles/2016-12-20-comprendre-ssl-tls-partie-1/tls-in-osi.png) *En clair:* diff --git a/_articles/fr/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement.md b/_articles/fr/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement.md index d3b6ffa5f..074fad341 100644 --- a/_articles/fr/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement.md +++ b/_articles/fr/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement.md @@ -25,7 +25,7 @@ C’est à dire que le texte chiffré s'obtient en remplaçant chaque lettre du *Chiffre de Jules César* -![]({{ site.baseurl }}/assets/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement/caesar3.jpg) +![]({BASE_URL}/imgs/articles/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement/caesar3.jpg) Bien évidemment, nous parlons ici d'un algorithme enfantin pour notre époque, mais si vous avez compris le principe qui s'applique ici, alors vous avez compris la cryptographie symétrique. @@ -54,17 +54,17 @@ Les deux algorithmes asymétriques les plus connus sont : Le serveur crée deux clés (privée et public). Il envoie sa clé publique au client et garde bien secrètement sa clé privée. -![]({{ site.baseurl }}/assets/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement/schema_base_asymetrique.jpg) +![]({BASE_URL}/imgs/articles/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement/schema_base_asymetrique.jpg) Si le serveur souhaite envoyer des données, il chiffre celles-ci via la clé privée. Le client pourra alors déchiffrer les données via la clé publique. -![]({{ site.baseurl }}/assets/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement/schema_base_asymetrique_v2.jpg) +![]({BASE_URL}/imgs/articles/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement/schema_base_asymetrique_v2.jpg) Inversement, pour envoyer des données au serveur, le client utilise la clé publique fournie par le serveur afin de chiffrer ses données. Le serveur utilise la clé privée afin de déchiffrer lesdites données. -![]({{ site.baseurl }}/assets/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement/schema_base_asymetrique_v3.jpg) +![]({BASE_URL}/imgs/articles/2016-12-20-comprendre-ssl-tls-partie-2-chiffrement/schema_base_asymetrique_v3.jpg) Le serveur est le seul à pouvoir déchiffrer les messages chiffrés par la clé publique grâce à la clé privé. diff --git a/_articles/fr/2016-12-21-comprendre-le-ssltls-partie-3-certificats.md b/_articles/fr/2016-12-21-comprendre-le-ssltls-partie-3-certificats.md index 53cf54034..c71b454fa 100644 --- a/_articles/fr/2016-12-21-comprendre-le-ssltls-partie-3-certificats.md +++ b/_articles/fr/2016-12-21-comprendre-le-ssltls-partie-3-certificats.md @@ -43,7 +43,7 @@ On remarque plusieurs points : 2. Le nom de l'émetteur (ici Let’s Encrypt), son algo de signature, les infos de la clé publique… 3. La hiérarchie du certificat ! On voit clairement que le certificat intermédiaire d’Eleven-labs qui est émis par Let’s Encrypt Authority X3 est **signé** par DST Root CA X3 -![]({{ site.baseurl }}/assets/2016-12-21-comprendre-le-ssltls-partie-3-certificats/capture-d-ecran-2016-11-26-a-11.15.04.png) +![]({BASE_URL}/imgs/articles/2016-12-21-comprendre-le-ssltls-partie-3-certificats/capture-d-ecran-2016-11-26-a-11.15.04.png) # Normes de certificat : @@ -91,13 +91,13 @@ Procédure de signature (avec l’exemple du certificat d’Eleven-labs) : * A - Let’s Encrypt hash vos données avec du SHA-256 * B- Il chiffre le résultat du hash avec sa clé privé en RSA (4096 bits) * C- Le résultat du chiffrement correspond à la signature - * D- Let’s Encrypt vous envoie votre certificat ![]({{ site.baseurl }}/assets/2016-12-21-comprendre-le-ssltls-partie-3-certificats/cert_1.jpg) + * D- Let’s Encrypt vous envoie votre certificat ![]({BASE_URL}/imgs/articles/2016-12-21-comprendre-le-ssltls-partie-3-certificats/cert_1.jpg) 2. Client * A - Lors de la connexion à votre serveur, le client récupère votre certificat. * B - Il hash votre certificat avec du SHA-256 (défini dans votre certificat) * C - Il déchiffre la signature du certificat avec la clé publique récupérée dans le certificat. - * D - Il compare le résultat du hash avec le résultat du déchiffrement de la signature. ![]({{ site.baseurl }}/assets/2016-12-21-comprendre-le-ssltls-partie-3-certificats/cert_2.jpg) + * D - Il compare le résultat du hash avec le résultat du déchiffrement de la signature. ![]({BASE_URL}/imgs/articles/2016-12-21-comprendre-le-ssltls-partie-3-certificats/cert_2.jpg) Si le résultat est le même alors on est sûr que les données que nous allons récupérer de ce serveur viennent bien d’Eleven-labs. diff --git a/_articles/fr/2016-12-22-comprendre-le-ssltls-partie-4-handshake-protocol.md b/_articles/fr/2016-12-22-comprendre-le-ssltls-partie-4-handshake-protocol.md index 2bb6a1ade..f5a933999 100644 --- a/_articles/fr/2016-12-22-comprendre-le-ssltls-partie-4-handshake-protocol.md +++ b/_articles/fr/2016-12-22-comprendre-le-ssltls-partie-4-handshake-protocol.md @@ -22,7 +22,7 @@ La première couche est constituée par des protocoles de négociation (Handshak L’image ci-dessous illustre les différentes couches : -![]({{ site.baseurl }}/assets/2016-12-22-comprendre-le-ssltls-partie-4-handshake-protocol/untitled-diagram.png) +![]({BASE_URL}/imgs/articles/2016-12-22-comprendre-le-ssltls-partie-4-handshake-protocol/untitled-diagram.png) # Handshake Protocol : @@ -35,7 +35,7 @@ Traduit “poignée de main” en Français, ce protocole permet au serveur et a Voici en détails comment se déroule le handshake, dans l'ordre chronologique : -![]({{ site.baseurl }}/assets/2016-12-22-comprendre-le-ssltls-partie-4-handshake-protocol/untitled-diagram-1.png) +![]({BASE_URL}/imgs/articles/2016-12-22-comprendre-le-ssltls-partie-4-handshake-protocol/untitled-diagram-1.png) **1 - Client Hello** diff --git a/_articles/fr/2016-12-23-comprendre-ssl-tls-partie-5-record-protocol.md b/_articles/fr/2016-12-23-comprendre-ssl-tls-partie-5-record-protocol.md index d7f7c51f3..7f62e056f 100644 --- a/_articles/fr/2016-12-23-comprendre-ssl-tls-partie-5-record-protocol.md +++ b/_articles/fr/2016-12-23-comprendre-ssl-tls-partie-5-record-protocol.md @@ -25,7 +25,7 @@ Ce protocole a pour buts : Voici en détail comment se déroule le record protocole : -![]({{ site.baseurl }}/assets/2016-12-23-comprendre-ssl-tls-partie-5-record-protocol/ssl_intro_fig3.jpg) +![]({BASE_URL}/imgs/articles/2016-12-23-comprendre-ssl-tls-partie-5-record-protocol/ssl_intro_fig3.jpg) 1. Segmentation - les données sont découpées en blocs de taille inférieure à 16 384 octets ; 2. Compression - les données sont compressées en utilisant l'algorithme choisi lors de la négociation. diff --git a/_articles/fr/2017-01-17-redux-structurez-vos-applications-front.md b/_articles/fr/2017-01-17-redux-structurez-vos-applications-front.md index dc84ae50d..d3a245225 100644 --- a/_articles/fr/2017-01-17-redux-structurez-vos-applications-front.md +++ b/_articles/fr/2017-01-17-redux-structurez-vos-applications-front.md @@ -23,7 +23,7 @@ Historiquement, le besoin s'est fait sentir sur [React](https://facebook.github Le principe est le suivant : -![](/_assets/articles/2017-01-17-redux-structurez-vos-applications-front/flux-diagram.png) +![]({BASE_URL}/imgs/articles/2017-01-17-redux-structurez-vos-applications-front/flux-diagram.png) Votre application déclare, pour chaque composant, les `actions`  qui lui sont liées. Ces actions permettent de définir l'état de votre composant, stocké dans un `store` , qui permet de maintenir votre `vue`  à jour. L'inconvénient est que dans ce cas, vous avez un store par composant. Ce modèle fonctionne pour React mais vous pouvez vous sentir limité sur certaines applications. diff --git a/_articles/fr/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq.md b/_articles/fr/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq.md index 98bd839dd..d039ff5cc 100644 --- a/_articles/fr/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq.md +++ b/_articles/fr/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq.md @@ -6,7 +6,7 @@ slug: publier-consommer-reessayer-des-messages-rabbitmq title: 'Publier, consommer, et réessayer des messages RabbitMQ' excerpt: >- ![Swarrot - Logo](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png) + Logo]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png) categories: - php authors: @@ -16,7 +16,7 @@ keywords: - rabbitmq --- -![Swarrot Logo](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png) +![Swarrot Logo]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png) RabbitMQ est un gestionnaire de queues, permettant d'asynchroniser différents traitements. Si vous n'êtes pas familier avec cet outil, un [article](https://blog.eleven-labs.com/fr/creer-rpc-rabbitmq/) traitant du sujet a déjà été écrit précédemment, je vous invite donc à le lire. @@ -77,11 +77,11 @@ Create binding between exchange default and queue send_astronaut_to_space (with En vous connectant sur votre interface RabbitMQ management (ex: http://127.0.0.1:15672/), plusieurs choses apparaissent : -![Capture of exchanges created](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_exchanges.png) +![Capture of exchanges created]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_exchanges.png) En cliquant sur l'onglet _Exchanges_, un exchange _default_ a été créé avec un _binding_ avec notre _queue_, comme indiqué dans la console. -![Capture of queues created](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_queues.png) +![Capture of queues created]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_queues.png) Si l'on clique maintenant sur _Queues_, _send_astronaut_to_space_ est également présente. Jusqu'à présent, pas de problèmes. diff --git a/_articles/fr/2017-02-02-test-unitaire-swift-xcode.md b/_articles/fr/2017-02-02-test-unitaire-swift-xcode.md index 8434604e2..8323cccaa 100644 --- a/_articles/fr/2017-02-02-test-unitaire-swift-xcode.md +++ b/_articles/fr/2017-02-02-test-unitaire-swift-xcode.md @@ -80,7 +80,7 @@ Lorsque vous créez un projet, généralement Xcode vous demande si vous désire Une fois cette étape terminée, faites clique droit sur le dossier > New File et sélectionnez Unit Test Case Class. -![]({{ site.baseurl }}/assets/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-16-a-23.18.39.png) +![]({BASE_URL}/imgs/articles/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-16-a-23.18.39.png) Le nommage de la classe doit obligatoirement finir par Tests, soit dans notre cas **AstronauteTests**. @@ -161,7 +161,7 @@ Il y a 3 solutions : 2. Vous passez votre curseur sur le carré vide à côté du nom de la classe et celui-ci se transforme en bouton play. Ce procédé va lancer tous les tests de votre classe (cf. screenshot ci-dessous) ; 3. Même procédure que la solution 2 mais seulement sur la méthode que vous souhaitez tester. -![]({{ site.baseurl }}/assets/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-17-a-23.46.10.png) +![]({BASE_URL}/imgs/articles/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-17-a-23.46.10.png) Pour finir notre test, nous allons rajouter la méthode **testInitAstronuateWithPlanet** >qui va tester l’initialisation d’un astronaute avec une planète (oui j’aime bien mettre des noms en rapport avec Star Wars :) ). @@ -178,15 +178,15 @@ Bon normalement nous avons testé tous les cas possibles sur notre structure. Ma La solution : le code coverage. Il permet d’écrire le taux de code source testé d'un programme. Comment faire sous Xcode ? Cliquez sur l’icone (cf. screenshot ci-dessous) et cliquez sur “Edit Schema” -![]({{ site.baseurl }}/assets/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-18-a-00.19.57.png) +![]({BASE_URL}/imgs/articles/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-18-a-00.19.57.png) Allez dans l’onglet Test et cochez la case “Gather coverage data” (cf. screenshot ci-dessous) -![]({{ site.baseurl }}/assets/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-18-a-00.21.30.png) +![]({BASE_URL}/imgs/articles/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-18-a-00.21.30.png) Une fois ces étapes effectuées, relancez le processus de test sur votre classe et cliquez sur l’icône qui ressemble à un message dans votre onglet à gauche puis dans l’onglet principal sélectionnez Code Coverage. N’oubliez pas de cocher dans cette partie la checkbox “Show Test Bundles” -![]({{ site.baseurl }}/assets/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-18-a-00.23.46.png) +![]({BASE_URL}/imgs/articles/2017-02-02-test-unitaire-swift-xcode/capture-d-ecran-2017-01-18-a-00.23.46.png) ## Test sur un ViewController diff --git a/_articles/fr/2017-02-08-ma-premiere-application-sous-ios.md b/_articles/fr/2017-02-08-ma-premiere-application-sous-ios.md index 2db95862e..471b9577d 100644 --- a/_articles/fr/2017-02-08-ma-premiere-application-sous-ios.md +++ b/_articles/fr/2017-02-08-ma-premiere-application-sous-ios.md @@ -41,12 +41,12 @@ Après avoir visionné quelques tutos vidéos pour apprendre les bases, j’ai p Aperçu de mes maquettes : -![]({{ site.baseurl }}/assets/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.39.50.png) -![]({{ site.baseurl }}/assets/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.52.43.png) -![]({{ site.baseurl }}/assets/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.52.54.png) -![]({{ site.baseurl }}/assets/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.53.11.png) -![]({{ site.baseurl }}/assets/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.53.29.png) -![]({{ site.baseurl }}/assets/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.54.23.png) +![]({BASE_URL}/imgs/articles/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.39.50.png) +![]({BASE_URL}/imgs/articles/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.52.43.png) +![]({BASE_URL}/imgs/articles/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.52.54.png) +![]({BASE_URL}/imgs/articles/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.53.11.png) +![]({BASE_URL}/imgs/articles/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.53.29.png) +![]({BASE_URL}/imgs/articles/2017-02-08-ma-premiere-application-sous-ios/capture-d-ecran-2017-01-22-a-13.54.23.png) * PS: Je remercie Julie qui m'a aidée sur la partie Graphique/UX :)* diff --git a/_articles/fr/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles.md b/_articles/fr/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles.md index ea74a43cd..785af615b 100644 --- a/_articles/fr/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles.md +++ b/_articles/fr/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles.md @@ -9,8 +9,7 @@ excerpt: >- autour du développement et de l’architecture web et mobile. Aujourd’hui, j’aimerais aborder un autre sujet, tout aussi important : notre expertise méthodologique. -cover: >- - /assets/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-heart-retrospective.jpg +cover: /assets/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-heart-retrospective.jpg categories: - agile authors: @@ -27,7 +26,7 @@ Chez Eleven Labs, notre méthodologie agile repose principalement sur la méthod Dans cet article, on parlera plus particulièrement d’une rétrospective de sprint SCRUM dans le cadre d’un projet informatique mais la plupart des outils mentionnés ici sont utilisables pour n’importe quelle méthodologie agile et la majorité des projets. -[![Rétrospective de fin d'un Sprint SCRUM](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/eleven-labs-scrum-sprint-focus-retrospective.png)](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/eleven-labs-scrum-sprint-focus-retrospective.png) +[![Rétrospective de fin d'un Sprint SCRUM]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/eleven-labs-scrum-sprint-focus-retrospective.png)]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/eleven-labs-scrum-sprint-focus-retrospective.png) *
Rétrospective de fin d'un Sprint SCRUM
* @@ -102,7 +101,7 @@ Si l’équipe n’est globalement pas suffisamment à l’aise pour discuter de De la même façon, les 5 notes du Safety Check précédent peuvent être représentées de manières plus ludiques à l’aide d’images, de personnages ou smileys plus ou moins confiants. -[![](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/astronauts-mood-board.jpg)](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/astronauts-mood-board.jpg) +[![]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/astronauts-mood-board.jpg)]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/astronauts-mood-board.jpg) *
Mood Board des astronautes Eleven Labs
* @@ -121,7 +120,7 @@ La manière la plus courante, et aussi souvent la plus efficace, est de demander - ou variante métaphorique du bateau, symbolisant l’équipe : le facilitateur dessine sur un paper board ou tableau un bateau à moitié sous l’eau et à moitié à la surface, avec sa voile qui lui permet d’avancer, son ancre qui le ralentit et le tire vers le fond, et le vent qui permettrait de faire encore accélérer le bateau. - Il est aussi possible de laisser l’équipe inventer ses propres catégories. Chez Eleven Labs, on aime bien celles-ci : **“⊕ Points positifs”, “⊖ Points négatifs”, “✨ Idées d’amélioration”, “❤ Remerciements personnalisés”** -[![](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-retrospective.jpg)](/_assets/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-retrospective.jpg) +[![]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-retrospective.jpg)]({BASE_URL}/imgs/articles/2017-02-16-amelioration-continue-comment-animer-vos-retrospectives-agiles/post-it-retrospective.jpg) *
Post-it catégorisés lors de nos rétrospectives chez Eleven Labs
* diff --git a/_articles/fr/2017-02-22-consul-service-discovery-failure-detection-2.md b/_articles/fr/2017-02-22-consul-service-discovery-failure-detection-2.md index a6c105994..1f651b4bc 100644 --- a/_articles/fr/2017-02-22-consul-service-discovery-failure-detection-2.md +++ b/_articles/fr/2017-02-22-consul-service-discovery-failure-detection-2.md @@ -35,7 +35,7 @@ Afin de clarifier la suite de cet article, voici les ports utilisés par Consul La suite de cet article va se concentrer sur la partie service discovery et failure detection. Nous allons pour cela mettre en place un cluster Docker Swarm possédant l'architecture suivante : -![](/_assets/articles/2017-02-22-consul-service-discovery-failure-detection-2/consul-archi.png) +![]({BASE_URL}/imgs/articles/2017-02-22-consul-service-discovery-failure-detection-2/consul-archi.png) Nous aurons donc 3 machines Docker : @@ -263,7 +263,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/articles/2017-02-22-consul-service-discovery-failure/schema.png) +![Consul Infrastructure Schema]({BASE_URL}/imgs/articles/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/_articles/fr/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification.md b/_articles/fr/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification.md index bac573332..4f20dd92e 100644 --- a/_articles/fr/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification.md +++ b/_articles/fr/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification.md @@ -43,7 +43,7 @@ Sommaire 5. Protéger les routes authentifiées avec AuthGuard 3. **Conclusion** -![](/_assets/articles/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification/sf-blog-2.png) +![]({BASE_URL}/imgs/articles/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification/sf-blog-2.png) --- @@ -294,7 +294,7 @@ Si tout va bien, vous devriez recevoir un token d'authentification. C'est le cas ? Très bien, nous allons pouvoir commencer la partie front-end :) -![](/_assets/articles/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification/ng-blog.png) +![]({BASE_URL}/imgs/articles/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification/ng-blog.png) --- @@ -802,9 +802,9 @@ body { Et voilà le travail ! -![](/_assets/articles/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification/Capture-decran-2017-03-03-a-01.58.49.png) +![]({BASE_URL}/imgs/articles/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification/Capture-decran-2017-03-03-a-01.58.49.png) -![](/_assets/articles/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification/Capture-decran-2017-03-03-a-13.28.40.png) +![]({BASE_URL}/imgs/articles/2017-03-03-angular2-symfony3-comment-creer-rapidement-systeme-dauthentification/Capture-decran-2017-03-03-a-13.28.40.png) ### 3 Conclusion diff --git a/_articles/fr/2017-03-09-retour-experience-codeception.md b/_articles/fr/2017-03-09-retour-experience-codeception.md index 5e5c59e01..01b6ea6e5 100644 --- a/_articles/fr/2017-03-09-retour-experience-codeception.md +++ b/_articles/fr/2017-03-09-retour-experience-codeception.md @@ -19,7 +19,7 @@ keywords: - api --- -![Logo Codeception](/_assets/articles/2017-03-09-retour-experience-codeception/codeception-logo.png) +![Logo Codeception]({BASE_URL}/imgs/articles/2017-03-09-retour-experience-codeception/codeception-logo.png) Dans cet article je vous propose un retour d'expérience sur le framework de test Codeception, outil choisi par mon équipe au sein de France Télévisions lors de la refonte de notre stack ! diff --git a/_articles/fr/2017-04-11-http2-nest-pas-le-futur-cest-le-present.md b/_articles/fr/2017-04-11-http2-nest-pas-le-futur-cest-le-present.md index d7da70290..607ae8a96 100644 --- a/_articles/fr/2017-04-11-http2-nest-pas-le-futur-cest-le-present.md +++ b/_articles/fr/2017-04-11-http2-nest-pas-le-futur-cest-le-present.md @@ -34,7 +34,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/articles/2017-04-12-http2-future-present/caniuse.jpg) +![Can I use HTTP/2?]({BASE_URL}/imgs/articles/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. @@ -52,13 +52,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/articles/2017-04-12-http2-future-present/waterfall_http.jpg) +![Waterfall HTTP]({BASE_URL}/imgs/articles/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/articles/2017-04-12-http2-future-present/waterfall_http2.jpg) +![Waterfall HTTP/2?]({BASE_URL}/imgs/articles/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/_articles/fr/2017-04-20-televersement-dun-fichier-en-ajax.md b/_articles/fr/2017-04-20-televersement-dun-fichier-en-ajax.md index 1444b3281..68143d74e 100644 --- a/_articles/fr/2017-04-20-televersement-dun-fichier-en-ajax.md +++ b/_articles/fr/2017-04-20-televersement-dun-fichier-en-ajax.md @@ -270,7 +270,7 @@ Un objet **ProgressEvent** est passé à la fonction de rappel **onUploadProgres Petite démo en GIF :) et le code complet [https://github.com/lepiaf/file-upload](https://github.com/lepiaf/file-upload) -![](/_assets/articles/2017-04-20-televersement-dun-fichier-en-ajax/upload.gif) +![]({BASE_URL}/imgs/articles/2017-04-20-televersement-dun-fichier-en-ajax/upload.gif) ### Pour conclure diff --git a/_articles/fr/2017-05-29-amp-est-le-futur.md b/_articles/fr/2017-05-29-amp-est-le-futur.md index ba8b8bd2f..7bacd99ac 100644 --- a/_articles/fr/2017-05-29-amp-est-le-futur.md +++ b/_articles/fr/2017-05-29-amp-est-le-futur.md @@ -20,11 +20,11 @@ Google, leader incontesté des services web (recherche, pub, analytics...), pro Si vous suivez à fond l'ensemble des actualités médiatiques et que vous utilisez énormément la recherche google, vous avez sûrement vu apparaître les "cartes" suivantes lors de vos recherches mobile : -![](/_assets/articles/2017-05-29-amp-est-le-futur/croped-1.png) +![]({BASE_URL}/imgs/articles/2017-05-29-amp-est-le-futur/croped-1.png) Et oui, c'est cela AMP. Une place de choix dans la recherche Google, mais aussi une nouvelle façon de naviguer entre les sites. En effet, si vous cliquez sur une des cartes vous ne serez pas sur le site qui a envoyé le contenu (on comprendra pourquoi plus tard) mais vous resterez chez Google, qui vous permettra de "slider" entre chaque page de la recherche : -![](/_assets/articles/2017-05-29-amp-est-le-futur/capture-decran-2017-05-29-a-10.38.18.png) +![]({BASE_URL}/imgs/articles/2017-05-29-amp-est-le-futur/capture-decran-2017-05-29-a-10.38.18.png) Intéressant non ? Mais ce n'est pas tout, si vous regardez plus attentivement vous vous rendrez compte que le site AMP est énormément plus rapide que votre site lui-même. diff --git a/_articles/fr/2017-05-30-google-tag-manager-configuration-js.md b/_articles/fr/2017-05-30-google-tag-manager-configuration-js.md index 97dc040af..efb5eec68 100644 --- a/_articles/fr/2017-05-30-google-tag-manager-configuration-js.md +++ b/_articles/fr/2017-05-30-google-tag-manager-configuration-js.md @@ -26,19 +26,19 @@ Vous l'aurez compris, Google Tag Manager va vous servir à contrôler vos tags j Vous pouvez vous rendre sur le site de [Google Tag Manager](https://tagmanager.google.com). Il faut alors configurer votre site. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-26-a-10.49.46.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-26-a-10.49.46.png) La première chose à configurer est le type de container dont vous avez besoin. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-26-a-10.50.52.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-26-a-10.50.52.png) Vous allez choisir Web. Vous n'avez plus qu'à mettre le script sur votre site. Il s'agit d'un tag javascript classique à poser dans la balise `````` de votre site. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-26-a-10.53.20.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-26-a-10.53.20.png) Vous arrivez sur la page d'accueil, dans laquelle vous trouverez les informations de la dernière version de votre Google Tag Manager ainsi que les modifications en cours. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-26-a-11.01.29.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-26-a-11.01.29.png) Vous pouvez maintenant commencer à utiliser Google Tag Manager. @@ -69,27 +69,27 @@ On y pose seulement le script Google Tag Manager. Retournez ensuite dans l'interface Google Tag Manager et créez votre premier workspace. Cliquez sur "Default Workspace" en haut à gauche. Puis créez votre workspace, il s'agit d'un espace de travail qui permet ensuite de faire une sorte de Pull Request (on verra plus tard). -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.42.42.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.42.42.png) Une fois le workspace créé, nous allons nous mettre en "mode prévisualisation" qui permet de voir les modifications du Google Tag Manager, ainsi qu'activer le débuggeur directement dans votre page web. Pour cela rien de plus simple, il vous suffit de cliquer sur "Preview" en haut à droite. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.48.11.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.48.11.png) Ce qui est pratique avec la Prévisualisation, c'est que vous pouvez la partager avec d'autres personnes, il vous suffit de cliquer sur "Share Preview" et d'envoyer le lien fourni par Google Tag Manager. Cela permet de faire les modifications dont vous avez besoin et de les faire tester avant la mise en production. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.49.57.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.49.57.png) Retournez sur votre page web, vous devriez voir en bas de la page la console de debug Google Tag Manager. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.52.55.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.52.55.png) Nous allons poser le premier tag, pour faire simple il s'agira seulement d'un petit alert('GTM') . Cliquez sur tag dans la colonne de gauche, puis "New". -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.56.08.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.56.08.png) Puis cliquez sur "Tag configuration" et choisissez "HTML personnalisé", comme vous pouvez le voir, il existe de nombreux tags pré-configurés, je vous invite à regarder ceux qui pourrait vous intéresser. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.58.48.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-12.58.48.png) Dans le "textarea" je vous invite à mettre le code suivant. @@ -100,15 +100,15 @@ Dans le "textarea" je vous invite à mettre le code suivant. ``` Puis il faut choisir le trigger, le trigger permet de savoir quand le tag doit s'activer. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-13.01.18.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-13.01.18.png) Vous pouvez créer vos propres trigger, mais pour l'instant je vous invite à prendre le trigger "All page" par défaut qui activera le tag à chaque page vue. Il ne vous reste plus qu'à nommer le tag et sauvegarder. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-13.03.47.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-13.03.47.png) Il ne vous reste plus qu'à "Refresh" la preview et retourner sur votre page web, l'alert devrait s'afficher. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-13.05.10.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-13.05.10.png) Maintenant nous allons créer une nouvelle page "category.html" avec exactement le même code. @@ -134,37 +134,37 @@ Si vous allez sur la page vous devriez avoir la même "alert". On va d'abord utiliser les triggers, retournez dans l'interface de Google Tag Manager et cliquez sur triggers dans la colonne de gauche puis "new". Vous arrivez sur une page permettant de créer un trigger. Cliquez "Trigger configuration" et choisissez "Page vue". -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-17.58.03.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-17.58.03.png) Maintenant, on va choisir quand le trigger doit s'activer, donc choisissez "Certaines pages vues". À ce moment, vous allez pouvoir choisir quand le trigger "Page vue" doit s'activer, pour cet exemple nous allons choisir de regarder le "Page Path" et selon ce qu'il contient nous allons lancer le trigger. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.02.31.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.02.31.png) Nommez votre trigger et sauvegardez. Re-faites l'opération en créant un trigger pour la page index. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.05.09.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.05.09.png) Maintenant, nous allons modifier notre tag "ALERT 1", pour cela cliquez sur le tag puis cliquez pour modifier le trigger. Les deux triggers que vous avez créés doivent apparaître dans la colonne de droite. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.08.06.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.08.06.png) Je vous invite à choisir le trigger "Page Index", de sauvegarder et de "refresh" votre "preview". Si vous allez sur votre page "index.html" vous devriez voir votre "alert" mais pas sur la page "category.html", d'ailleurs dans la console de debug vous voyez qu'aucun trigger n'a été appelé. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.12.45.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.12.45.png) Il existe énormément de trigger, vous pouvez en créer vous-même, ce qui permet d'effectuer de nombreuses actions personnalisées. Revenez en arrière en changeant le trigger pour que toutes les pages lancent l'alerte. Nous allons utiliser les "variables" et mettre en place un "data layer". Cliquez sur "variables" dans la colonne de gauche, vous y trouverez les variables fournies directement par Google Tag Manager ainsi que les variables que vous pouvez ajouter. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.21.01.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.21.01.png) Nous allons ajouter une variable, cliquez sur "New", puis sur "variable de configuration". -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.23.04.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.23.04.png) Choisissez "Variable Javascript" et  donnez un nom à votre variable puis sauvegardez. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.25.42.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.25.42.png) Retournez dans la configuration de votre tag, et changez l'HTML personnalisé en mettant le ```{{NOM DE VOTRE VARIABLE}}``` à la place du message. Sauvegardez votre tag et faites un "refresh" de votre "preview". @@ -198,13 +198,13 @@ Il faut maintenant mettre en place votre "data layer" dans vos pages HTML,  et Vous pouvez donc choisir votre message de l'alerte en donnant la valeur à alertMsg . Vous pouvez voir vos variables directement dans la console de debug. -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.36.39.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.36.39.png) Vous pouvez mettre énormément d'informations dans votre "data layer" ce qui vous permet d'utiliser et de configurer chacun de vos tags selon votre page. Maintenant que nous avons terminé notre travail, nous allons publier notre "container". Retournez dans l'interface Google Tag Manager et cliquez sur "Submit" en haut à droite. Vous arrivez sur une page vous montrant l'ensemble des modifications. Choisissez votre nom de version et une description pour cliquez sur "publish" . -![](/_assets/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.40.08.png) +![]({BASE_URL}/imgs/articles/2017-05-30-google-tag-manager-configuration-js/capture-decran-2017-05-27-a-18.40.08.png) Vous êtes redirigé sur la page de votre version, vous pouvez retourner sur votre site et maintenant tous les utilisateurs sont sur la nouvelle version. Vous pouvez quitter le mode debug. diff --git a/_articles/fr/2017-06-01-prenez-soin-de-vos-emails.md b/_articles/fr/2017-06-01-prenez-soin-de-vos-emails.md index 12423c49f..687081a07 100644 --- a/_articles/fr/2017-06-01-prenez-soin-de-vos-emails.md +++ b/_articles/fr/2017-06-01-prenez-soin-de-vos-emails.md @@ -19,15 +19,15 @@ Le moyen de communication le plus répandu entre un prestataire et son client, Vous avez dû le voir dans votre boite Gmail, dans certains cas, vos mails ont un affichage différent ou même un bouton en plus (un "call-to-action"). -![](/_assets/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-20.20.36.png) +![]({BASE_URL}/imgs/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-20.20.36.png) > Exemple: Réservation d'un événement -![](/_assets/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-20.26.14.png) +![]({BASE_URL}/imgs/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-20.26.14.png) > Exemple: Votre prochain voyage -![](/_assets/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-20.29.24.png) +![]({BASE_URL}/imgs/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-20.29.24.png) > Exemple: Un call-to-action @@ -173,9 +173,9 @@ Comme Google vous connait mieux que vous même, vous pouvez faire des recherches Je vous invite à taper *'mes vols', 'mes commandes', 'mes réservations',* vous serez surpris. -![](/_assets/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-21.11.52.png) +![]({BASE_URL}/imgs/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-21.11.52.png) -![](/_assets/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-21.11.11.png) +![]({BASE_URL}/imgs/articles/2017-06-01-prenez-soin-de-vos-emails/capture-decran-2017-05-30-a-21.11.11.png) ### Conclusion diff --git a/_articles/fr/2017-06-28-push-notification-ios-amazon-sns.md b/_articles/fr/2017-06-28-push-notification-ios-amazon-sns.md index 6bdc3f790..23e3aa9d7 100644 --- a/_articles/fr/2017-06-28-push-notification-ios-amazon-sns.md +++ b/_articles/fr/2017-06-28-push-notification-ios-amazon-sns.md @@ -63,7 +63,7 @@ Lors du lancement initial de votre application sur l’iphone d’un utilisateur L’autre partie de la connexion permet l’envoi de notifications. Le “canal” persistant et sécurisé entre un serveur provider et les APNs nécessite une configuration dans votre compte de développeur en ligne et l’utilisation de certificats cryptographiques fournis par Apple. Un serveur provider est un serveur que vous déployez, gérez et configurez pour fonctionner avec les APNs. -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/remote_notif_simple_2x.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/remote_notif_simple_2x.png) 1. Votre provider peut envoyer des demandes de notification aux APNs ; 2. Les APNs transmettent les payloads de notification correspondants à chaque périphérique ciblée ; @@ -81,7 +81,7 @@ Votre provider a les responsabilités suivantes pour échanger avec les APNs : Bien évidemment vous pouvez avoir plusieurs providers -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/remote_notif_multiple_2x.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/remote_notif_multiple_2x.png) Vous l’aurez vite compris : c’est un sujet vaste et complexe. Rassurez-vous, il existe énormément de services qui vous facilitent la tâche concernant la partie provider. @@ -108,11 +108,11 @@ Cela signifie que vous devez configurer votre support de notification au plus ta Créez une “Single View Application” sous Xcode -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/create_app_xcode.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/create_app_xcode.png) Ensuite, il va falloir activer les notifications de votre application. Pour cela, il suffit de cliquer dans la rubrique “Capabilities” et d’activer “Push notifications”, et pour finir dans “Background Modes”, checker “Remote notifications”. -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/conf_push_xcode.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/conf_push_xcode.png) Rappel : @@ -218,18 +218,18 @@ Pour générer un certificat SSL de client universel, il faut : 1. Accéder à Certificates 2. Cliquer sur le button (+) à droite -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/ios_notif_cert01.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/ios_notif_cert01.png) 3. Sélectionner dans la partie développement “Apple Push Notification service SSL (Sandbox)” et cliquer sur “Continue”. Bien évidemment, si vous devez mettre en production vous devez sélectionner la partie “production”. -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-17.31.52.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-17.31.52.png) 4. Choisir L’App ID qui match avec votre bundle ID et cliquer sur “Continue”. -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-17.37.58.jpg) -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-17.35.17.jpg) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-17.37.58.jpg) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-17.35.17.jpg) 5. Apple vous demande de créer un “Certificate Signing Request” (CSR) Pour générer manuellement un certificat, vous avez besoin d’un fichier de demande de signature de certificat (CSR) à partir de votre Mac. Pour créer un fichier CSR, suivez les instructions ci-dessous: 1. Ouvrez l’application “Keychain Access”. 2. Cliquez sur Trousseaux > Assistant de certification > Demandez un certificat à une autre autorité de certificat (cf: screenshot) - ![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-17.56.30.jpg) + ![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-17.56.30.jpg) 3. Dans la fenêtre Informations sur le certificat, entrez les informations suivantes : 1. Votre adresse email 2. Dans le champ Nom commun, créez un nom pour votre clé privée (par exemple, Pepito Dev Key). @@ -238,7 +238,7 @@ Pour créer un fichier CSR, suivez les instructions ci-dessous: 5. Cliquez sur continuer 6. Uploader votre fichier .certSigningRequest précédemment créé. 7. Votre certificat est prêt, téléchargez-le. -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-18.05.22.jpg) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-18.05.22.jpg) Encore un effort c’est presque fini ! @@ -246,11 +246,11 @@ Maintenant, nous devons transformer notre fichier aps_development.cer en fichier Pour se faire, c’est très simple : 1. Double-cliquez sur votre fichier précédemment créé. Ça l’ajoutera dans votre application Keychain. -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-18.13.54.jpg) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-18.13.54.jpg) 2. Clique droit sur celui-ci et cliquez sur Exporter -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-19.09.52.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-19.09.52.png) 3. Choisissez bien le format .p12, puis l’application Keychain vous demandera un mot de passe. -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-18.18.55.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-18.18.55.png) Bien évidemment vous pouvez utiliser openssl en cli afin d’exporter votre .cer en .pem : @@ -259,7 +259,7 @@ $ openssl x509 -in aps_development.cer -inform DER -out myapnsappcert.pem ``` Pour vérifier que tout est en ordre, il suffit d’aller sur la liste des App IDs, de cliquer sur l’ID de votre App puis sur “Edit”. Dans la partie Push notification, vous devriez voir que vous avez bien un certificat dans la partie Development. -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-18.22.00.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-18.22.00.png) Enfin fini ! Je vous l’accorde cette partie est fastidieuse et lourde. Il ne manque plus que la partie Amazon SNS. @@ -275,7 +275,7 @@ Les publishers communiquent de façon asynchrone avec les subscribers en produis Les subscribers (par exemple, des serveurs web, des adresses e-mail, des files d’attente Amazon SQS, des fonctions AWS Lambda) consomment ou reçoivent le message ou la notification via l’un des protocoles pris en charge (Amazon SQS, HTTP/S, e-mail, SMS, Lambda) lorsqu’ils sont abonnés au topic. -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/sns-how-works.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/sns-how-works.png) Lorsque vous utilisez Amazon SNS, vous créez une rubrique (topic) et définissez des stratégies d’accès à cette dernière de manière à déterminer quels publishers et subscribers peuvent communiquer avec le topic. @@ -288,7 +288,7 @@ Les subscribers reçoivent tous les messages publiés dans les topics auxquels i **Etape 1: Création d’un topic** 1. Connectez-vous à la console AWS , cliquez sur “Create topic” -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/sns_c_app.jpg) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/sns_c_app.jpg) 2. Renseignez un nom. @@ -296,14 +296,14 @@ Les subscribers reçoivent tous les messages publiés dans les topics auxquels i 1. Cliquez sur “Create platform application” -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/sns_c_s.jpg) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/sns_c_s.jpg) 2. Indiquez un nom à votre application 3. Dans la zone “Push notification platform”, sélectionnez la plateforme auprès de laquelle l’application est inscrite. Dans notre cas nous choisissons “Apple development”. 4. Dans la zone “Push certificate type”, sélectionnez “iOS push certificate” 5. Choisissez le fichier .p12 créer ultérieurement 6. Entrez votre mot de passe et cliquez sur “load credentials” -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-19.19.53.jpg) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/capture-d-ecran-2017-05-01-a-19.19.53.jpg) **Etape 3 : Ajoutez notre token à notre application** @@ -335,7 +335,7 @@ Amazon met à votre disposition un json generator si vous ne savez pas comment Résultat : -![]({{ site.baseurl }}/assets/2017-06-28-push-notification-ios-amazon-sns/img_0562.png) +![]({BASE_URL}/imgs/articles/2017-06-28-push-notification-ios-amazon-sns/img_0562.png) # Conclusion diff --git a/_articles/fr/2017-07-19-video-live-dash-hls.md b/_articles/fr/2017-07-19-video-live-dash-hls.md index d5595dcc5..8fc92ba35 100644 --- a/_articles/fr/2017-07-19-video-live-dash-hls.md +++ b/_articles/fr/2017-07-19-video-live-dash-hls.md @@ -36,7 +36,7 @@ De grandes plateformes de streaming utilisent ce protocole pour servir leurs str Un diagramme vaut sûrement mieux qu'un long discours : -![Diagramme de fonctionnement - HLS ](/_assets/articles/2017-07-12-video-live-dash-hls/diagram_HLS.png) +![Diagramme de fonctionnement - HLS ]({BASE_URL}/imgs/articles/2017-07-12-video-live-dash-hls/diagram_HLS.png) On voit ici le workflow permettant à l'audio/vidéo brut d'arriver sous forme de streaming au client. Les fichiers segmentés, le plus souvent au format MPEG-2 TS, sont accessibles via un "manifest", un fichier index au format M3U qui décrit les différents segments du contenu ainsi que des métadata que le client peut/doit utiliser. Ce fichier est basiquement une playlist d'URL. @@ -86,7 +86,7 @@ live/low.m3u8 Chaque balise `#EXT-X-STREAM-INF` indique les données nécessaires à la lecture du segment, chacun d'entre eux d'une qualité et d'un encodage donnés. Ainsi, le client compatible pourra passer d'une qualité à une autre en temps réel, en fonction de la bande passante disponible ou du choix de l'utilisateur. Le diagramme suivant illustre d'ailleurs très bien cette possibilité : -![Fichier M3U - HLS ](/_assets/articles/2017-07-12-video-live-dash-hls/HLS_Figure_1.jpg) +![Fichier M3U - HLS ]({BASE_URL}/imgs/articles/2017-07-12-video-live-dash-hls/HLS_Figure_1.jpg) ### Librairie JS @@ -124,7 +124,7 @@ Le DASH, en plus d'être normalisé et standardisé ISO, dispose de plusieurs fo Ne changeons pas une équipe qui gagne et commençons par un bon diagramme : -![Diagramme de fonctionnement - DASH ](/_assets/articles/2017-07-12-video-live-dash-hls/diagram_DASH.png) +![Diagramme de fonctionnement - DASH ]({BASE_URL}/imgs/articles/2017-07-12-video-live-dash-hls/diagram_DASH.png) Les différentes séquences du contenu sont un fois encore d'une taille, d'une qualité et d'un encodage donnés et sont envoyées au client via HTTP. Ce dernier a la responsabilité de sélectionner puis d'afficher les séquences dans la qualité voulue. Et toujours dans le bon ordre. Je vous assure, c'est important. diff --git a/_articles/fr/2017-07-25-api-platform.md b/_articles/fr/2017-07-25-api-platform.md index 1531bab48..e64c90d97 100644 --- a/_articles/fr/2017-07-25-api-platform.md +++ b/_articles/fr/2017-07-25-api-platform.md @@ -51,7 +51,7 @@ Enfin, il nous reste à mettre à jour la base de données pour pouvoir jouer av bin/console do:sche:update --force vendor/bin/schema generate-types src/ app/config/schema.yml ``` -![](/_assets/articles/2017-07-25-api-platform/api_platform_movies.png) +![]({BASE_URL}/imgs/articles/2017-07-25-api-platform/api_platform_movies.png) En accédant à la documentation, vous apercevrez que la ressource _Movie_ est maintenant là, accompagnée de toutes les opérations de création, modification, suppression. Je vous laisse jouer avec l’interface et la documentation auto-générée avant de passer à une fonctionnalité très utilisée dans les API de listing : les filtres. diff --git a/_articles/fr/2017-08-09-android-design-patterns.md b/_articles/fr/2017-08-09-android-design-patterns.md index 3045e19bc..5ccdd846b 100644 --- a/_articles/fr/2017-08-09-android-design-patterns.md +++ b/_articles/fr/2017-08-09-android-design-patterns.md @@ -70,7 +70,7 @@ Plusieurs choses ont changé : Rien de mieux qu'un schéma pour illustrer une implémentation MVC -![MVC Android](/_assets/articles/2017-08-02-android-design-pattern/mvc.png) +![MVC Android]({BASE_URL}/imgs/articles/2017-08-02-android-design-pattern/mvc.png) Maintenant essayons d'attribuer chaque partie constituant un projet Android à un élément de ce pattern, on se retrouve avec : - **Modèle** : Une classe qui contiendra notre modèle (jusque-là rien de particulier) @@ -128,7 +128,7 @@ La seconde méthode, beaucoup moins jolie, consiste à se fabriquer des vues per Au final, si l'on veut respecter scrupuleusement cette implémentation, on se retrouve obligé de tordre le code pour créer le lien entre la vue et son modèle, sinon on se retrouve avec quelque chose qui ressemble étrangement à du MVP (voir MVVM) -![MVC / MVP Android](/_assets/articles/2017-08-02-android-design-pattern/mvp-mvc-android.jpg) +![MVC / MVP Android]({BASE_URL}/imgs/articles/2017-08-02-android-design-pattern/mvp-mvc-android.jpg) + ---------- @@ -148,7 +148,7 @@ Au final, si l'on veut respecter scrupuleusement cette implémentation, on se re Encore une fois, un schéma pour expliquer l'implémentation d'un MVP -![MVP Android](/_assets/articles/2017-08-02-android-design-pattern/mvp.png) +![MVP Android]({BASE_URL}/imgs/articles/2017-08-02-android-design-pattern/mvp.png) La différence la plus marquante avec le MVC est la disparition de l'interaction entre la vue et le modèle. Cette absence d'interaction tombe à pic pour Android, car on se retrouve avec l'intégration suivante : - **Modèle** : Une classe qui contiendra notre modèle @@ -194,7 +194,7 @@ La présentation, c'est-à-dire celle qui va indiquer quel contenu mettre dans q Enfin le dernier Design Pattern structurant parmi les plus utilisés est le MVVM. -![MVVM Android](/_assets/articles/2017-08-02-android-design-pattern/mvvm.png) +![MVVM Android]({BASE_URL}/imgs/articles/2017-08-02-android-design-pattern/mvvm.png) Il se distingue grandement des deux précédents car il attribue beaucoup plus d'intelligence à la vue ainsi qu'au ViewModel. diff --git a/_articles/fr/2017-08-18-comment-verifier-l-orthographe-de-vos-docs-depuis-travis-ci.md b/_articles/fr/2017-08-18-comment-verifier-l-orthographe-de-vos-docs-depuis-travis-ci.md index 3bb0e37af..d07ec6f35 100644 --- a/_articles/fr/2017-08-18-comment-verifier-l-orthographe-de-vos-docs-depuis-travis-ci.md +++ b/_articles/fr/2017-08-18-comment-verifier-l-orthographe-de-vos-docs-depuis-travis-ci.md @@ -8,8 +8,7 @@ excerpt: >- Nous allons montrer dans cet article comment vérifier l'orthographe automatiquement dans vos documents markdown, modifiés dans vos pull requests, simplement avec Aspell et Travis CI -cover: >- - /assets/2017-08-18-how-to-check-the-spelling-of-your-docs-from-travis-ci/typing.jpg +cover: /assets/2017-08-18-how-to-check-the-spelling-of-your-docs-from-travis-ci/typing.jpg categories: [] authors: - charles-eric diff --git a/_articles/fr/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go.md b/_articles/fr/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go.md index 7fd12376f..8113ea850 100644 --- a/_articles/fr/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go.md +++ b/_articles/fr/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go.md @@ -7,8 +7,7 @@ title: Retour sur un live-coding de découverte du langage Go excerpt: >- Cet article fait suite à un workshop / live-coding que j'ai eu l'occasion d'organiser chez Eleven Labs pour une initiation au langage Go. -cover: >- - /assets/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/cover.jpg +cover: /assets/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/cover.jpg categories: [] authors: - vcomposieux @@ -43,7 +42,7 @@ L'idée est simple : Avant de rentrer dans les détails, voici un schéma expliquant le fonctionnement de notre librairie : -![WorkMQ Schema](/_assets/articles/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/schema.jpg) +![WorkMQ Schema]({BASE_URL}/imgs/articles/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/schema.jpg) Comme vous pouvez le voir sur ce diagramme, nous avons ici quatre `Queues` de définies, et chacune d'entre elles dispose de trois `Workers`. @@ -356,7 +355,7 @@ Nous avons ici bouclé sur toutes les queues et affichons les données des compt Pour vous aider à visualiser le résultat, voici la sortie HTTP : -![HTTP Output](/_assets/articles/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/output.gif) +![HTTP Output]({BASE_URL}/imgs/articles/2017-08-23-retour-sur-un-live-coding-de-decouverte-du-langage-go/output.gif) Conclusion ---------- diff --git a/_articles/fr/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs.md b/_articles/fr/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs.md index d553d0e11..e119ca3fd 100644 --- a/_articles/fr/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs.md +++ b/_articles/fr/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs.md @@ -8,8 +8,7 @@ excerpt: >- La plupart des applications front utilisant React sur lesquelles j'ai pu travailler sont des applications destinées à être rendues par le navigateur (client-side). -cover: >- - /assets/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs/cover.jpg +cover: /assets/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs/cover.jpg categories: - javascript authors: diff --git a/_articles/fr/2017-09-10-flux-infini-react-symfony.md b/_articles/fr/2017-09-10-flux-infini-react-symfony.md index 7b8940be5..d4e6ebb51 100644 --- a/_articles/fr/2017-09-10-flux-infini-react-symfony.md +++ b/_articles/fr/2017-09-10-flux-infini-react-symfony.md @@ -302,7 +302,7 @@ Ajoutez la ligne suivante dans votre `/etc/hosts` Si vous lancez un `docker-compose up` puis allez sur la page suivante [infinite.dev](infinite.dev), vous devriez voir la page suivante vous indiquant que votre site est bien configuré. -![Configuration](/_assets/articles/2017-09-10-flux-infini-react-symfony/image1.png) +![Configuration]({BASE_URL}/imgs/articles/2017-09-10-flux-infini-react-symfony/image1.png) Une partie de la configuration est tirée de l'article de Maxence Poutord disponible [ici](http://www.maxpou.fr/docker-pour-symfony/). diff --git a/_articles/fr/2017-09-15-fastlane-ios.md b/_articles/fr/2017-09-15-fastlane-ios.md index 7cdffeb73..00b8823b8 100644 --- a/_articles/fr/2017-09-15-fastlane-ios.md +++ b/_articles/fr/2017-09-15-fastlane-ios.md @@ -31,7 +31,7 @@ Vous l'avez compris, cet outil va changer votre vie. Voici la liste des libs à disposition avec Fastlane : -![Fastlane tools]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastlane_tools.png) +![Fastlane tools]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastlane_tools.png) * **Deliver**: Télécharge des captures d'écran, des métadonnées et votre application sur l'App Store en utilisant une seule commande. * **Snapshot**: Automatise la prise des captures d'écran localisées de votre application iOS sur tous les périphériques. @@ -51,7 +51,7 @@ Se rajoute également à cette liste : *Schéma de lanes fastlane* -![Fastlane tree]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastlane-tree.png) +![Fastlane tree]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastlane-tree.png) Personnellement, quand j'ai vu ce que Fastlane était capable de faire j'ai limite versé une petite larmichette ! Fini le temps de tout faire à la main ! @@ -88,7 +88,7 @@ On vous demandera votre Apple ID, mot de passe et dans mon cas un digit code via Fastlane vous récapitulera vos informations dans `Summary for produce` et créera votre application dans Itunes Connect et Dev Center. Il générera également une configuration pour vous, en fonction des informations fournies. -![Fastlane files]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastline-files.png) +![Fastlane files]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastline-files.png) **Appfile**: L'Appfile stocke des informations utiles qui sont utilisées dans toutes les libs Fastlane comme votre Apple ID ou le Bundle Identifier, pour déployer vos **lanes** (voies) plus rapidement, adaptées aux besoins de votre projet. @@ -141,7 +141,7 @@ $ bundle exec fastlane test Il lance alors tous les unit/ui tests de votre projet. Bien évidemment, Scan peut générer des rapports au format HTML, JSON et JUnit. -![CLI scan]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/cli-scan.png) +![CLI scan]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/cli-scan.png) Magique non ? @@ -246,7 +246,7 @@ De cette manière, vous n'aurez pas à mettre à jour Xcode à chaque fois que v Vous pouvez spécifier quel profil de provisionnement utiliser dans `General` tab après avoir désactivé `Automatically manage signing`. -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastlane_xcode_sign.png) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastlane_xcode_sign.png) On vient de voir avec quelle facilité on gère les certificats et profils de provisionnement. Maintenant on va s'attaquer au push notification profile. @@ -292,11 +292,11 @@ end $ bundle exec fastlane pushCertificat ``` -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastlane_pem.jpg) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastlane_pem.jpg) Et hop, un jeu d'enfant ! -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastlane_pem_apple.jpg) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastlane_pem_apple.jpg) # Scan @@ -348,8 +348,8 @@ end *Résultat sur Slack* -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastlane_scan_success.png) -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastlane_scan_error.png) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastlane_scan_success.png) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastlane_scan_error.png) # Snapshot - Frameit @@ -472,8 +472,8 @@ Bon c'est le moment d'aller prendre un café ou de manger une pomme ! (Oui les p Fastlane vous crée une page HTML récapitulant tous les devices par langues. -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastlane_snapshot_success.png) -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/fastlane_snapshot.png) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastlane_snapshot_success.png) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/fastlane_snapshot.png) Cool non ? @@ -523,7 +523,7 @@ $ bundle exec fastlane frameit Vous avez normalement de nouvelles images qui sont arrivées telles que : -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/iPhone6Plus-02CarDetail-d41d8cd98f00b204e9800998ecf8427e_framed.png) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/iPhone6Plus-02CarDetail-d41d8cd98f00b204e9800998ecf8427e_framed.png) Et si vous avez envie d'avoir l'iphone rose on fait comment ? @@ -534,7 +534,7 @@ $ bundle exec fastlane frameit download_frames $ bundle exec fastlane frameit rose_gold ``` -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/iPhone6-01CarList-d41d8cd98f00b204e9800998ecf8427e_framed.png) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/iPhone6-01CarList-d41d8cd98f00b204e9800998ecf8427e_framed.png) Vous trouverez la liste des frames [ici](https://github.com/fastlane/frameit-frames/tree/gh-pages/latest). @@ -576,8 +576,8 @@ Créer un fichier `Framefile.json` dans le dossier screenshots. } ``` -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/iPhone6-01CarList-d41d8cd98f00b204e9800998ecf8427e_framed_custom.png) -![]({{ site.baseurl }}/assets/2017-07-17-fastlane-ios/iPhone6-02CarDetail-d41d8cd98f00b204e9800998ecf8427e_framed_custom.png) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/iPhone6-01CarList-d41d8cd98f00b204e9800998ecf8427e_framed_custom.png) +![]({BASE_URL}/imgs/articles/2017-07-17-fastlane-ios/iPhone6-02CarDetail-d41d8cd98f00b204e9800998ecf8427e_framed_custom.png) Avouez c'est bad ass ? :) diff --git a/_articles/fr/2017-09-27-notre-blog-amp.md b/_articles/fr/2017-09-27-notre-blog-amp.md index 9ab9c2bf4..767db09b4 100644 --- a/_articles/fr/2017-09-27-notre-blog-amp.md +++ b/_articles/fr/2017-09-27-notre-blog-amp.md @@ -174,10 +174,10 @@ Si vous le souhaitez, vous pouvez voir la pull request [ici](https://github.com/ Et voilà ! Vous pouvez retrouver ceci dans vos recherches Google Mobile : -![Search Google](/_assets/articles/2017-09-27-notre-blog-amp/search-google.png) +![Search Google]({BASE_URL}/imgs/articles/2017-09-27-notre-blog-amp/search-google.png) Et notre page dans le CDN google : -![AMP](/_assets/articles/2017-09-27-notre-blog-amp/amp.png) +![AMP]({BASE_URL}/imgs/articles/2017-09-27-notre-blog-amp/amp.png) **Bonne lecture.** diff --git a/_articles/fr/2017-10-17-https-s3-cdn-des-nouvelles-du-blog.md b/_articles/fr/2017-10-17-https-s3-cdn-des-nouvelles-du-blog.md index 03953ceb5..385a32584 100644 --- a/_articles/fr/2017-10-17-https-s3-cdn-des-nouvelles-du-blog.md +++ b/_articles/fr/2017-10-17-https-s3-cdn-des-nouvelles-du-blog.md @@ -21,7 +21,7 @@ keywords: --- En Juillet dernier nous vous annoncions la -[refonte du blog]({{ '/fr/migration-du-blog/' | prepend: site.baseurl | replace: '//', '/' }}) en Jekyll hébergé sur +[refonte du blog]({BASE_URL}/fr/migration-du-blog/) en Jekyll hébergé sur github pages. Cependant, l'hébergement sur github pages ne permet pas l'utilisation d'un certificat SSL autre que celui fourni. Ce certificat étant prévu pour une utilisation sur le domaine `github.io`, nous ne pouvions pas l'utiliser avec notre diff --git a/_articles/fr/2017-10-20-google-cloud-summit-2017.md b/_articles/fr/2017-10-20-google-cloud-summit-2017.md index bec8f5c1f..b042f32d2 100644 --- a/_articles/fr/2017-10-20-google-cloud-summit-2017.md +++ b/_articles/fr/2017-10-20-google-cloud-summit-2017.md @@ -50,7 +50,7 @@ C'est d'ailleurs en s'inspirant d'un citation de Larry Page que Sébastien Marot Puis laissons place à Ulku Rowe. -![Ulku Rowe](/_assets/articles/2017-10-20-google-cloud-summit-2017/ulku.jpg) +![Ulku Rowe]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/ulku.jpg) Qui va nous présenter pourquoi le cloud Google est le meilleur. Elle commence par nous montrer ce que doit être le futur des sociétés. @@ -95,8 +95,8 @@ Puis La Redoute avec la blague de la Google Summit. Première conférence et premiers défis : comment récupérer, stocker et comprendre l'ensemble des données. Pour commencer Google nous présente deux outils de visualisation, DataLab et DataStudio. -![DataLab](/_assets/articles/2017-10-20-google-cloud-summit-2017/image5.jpg) -![DataStudio](/_assets/articles/2017-10-20-google-cloud-summit-2017/image6.jpg) +![DataLab]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/image5.jpg) +![DataStudio]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/image6.jpg) Datalab est un outil orienté développeur qui permet de suivre les données que vous ingérez dans votre Cloud Google. @@ -118,7 +118,7 @@ La suite fut les étapes de la conception du système de recommandation, tout d' -![Architecture](/_assets/articles/2017-10-20-google-cloud-summit-2017/image7.jpg) +![Architecture]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/image7.jpg) Puis de créer une architecture permettant avec du machine learning de faire ce fameux système. @@ -147,7 +147,7 @@ Guillaume Laforge s'attardera sur 3 exemples : La chose importante à retenir ici, c'est que Google a pensé à tout et a créer un emulator pour vous permettre de développer facilement. -![Local](/_assets/articles/2017-10-20-google-cloud-summit-2017/image8.jpg) +![Local]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/image8.jpg) ### Introduction au Machine Learning @@ -195,7 +195,7 @@ Aujourd'hui l'API permet de définir dans des phrases, l'utilité de chaque mot Vous trouverez des exemples [ici](https://cloud.google.com/natural-language/). -![Syntax](/_assets/articles/2017-10-20-google-cloud-summit-2017/image0.png) +![Syntax]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/image0.png) #### API CLOUD SPEECH @@ -209,15 +209,15 @@ L'API permet de reconnaître ce qu'il y a sur des images. On peut l'utiliser de La première, c'est de tagger ce qu'il y a sur l'image : -![Labels](/_assets/articles/2017-10-20-google-cloud-summit-2017/image1.png) +![Labels]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/image1.png) La seconde permet de reconnaître des visages et de connaître le sentiment des personnes : -![Visage](/_assets/articles/2017-10-20-google-cloud-summit-2017/image2.png) +![Visage]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/image2.png) La dernière permet de reconnaître des caractères et grâce à l'API de natural language d'identifier ce qu'il se dit : -![Mot](/_assets/articles/2017-10-20-google-cloud-summit-2017/image3.png) +![Mot]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/image3.png) L'API est vraiment impressionnante et demande à être prise en main. @@ -231,7 +231,7 @@ Cette API permet de tagger chaque partie de la video en prenant ce qui se passe Cette API est en bêta mais vous pouvez trouvez les exemples [ici](https://cloud.google.com/video-intelligence/). -![Labels](/_assets/articles/2017-10-20-google-cloud-summit-2017/image4.png) +![Labels]({BASE_URL}/imgs/articles/2017-10-20-google-cloud-summit-2017/image4.png) ### Conclusion diff --git a/_articles/fr/2017-10-26-git-bisect.md b/_articles/fr/2017-10-26-git-bisect.md index 1152e307d..ce438d4cc 100644 --- a/_articles/fr/2017-10-26-git-bisect.md +++ b/_articles/fr/2017-10-26-git-bisect.md @@ -45,7 +45,7 @@ Le problème est donc immédiatement remonté aux développeurs et ces derniers Git nous épargne l'ennui de tester tous nos commits un par un avec `git bisect`. Cette commande effectue une recherche par [dichotomie (recherche binaire)](https://fr.wikipedia.org/wiki/Recherche_dichotomique). -![](/_assets/articles/2017-10-26-debugging-with-git/binary_search.jpg) +![]({BASE_URL}/imgs/articles/2017-10-26-debugging-with-git/binary_search.jpg) *Binary search illustration* À chaque étape de la recherche binaire, nous devons dire à `git bisect` si le problème persiste toujours. diff --git a/_articles/fr/2017-12-01-openpgp-participe-fete-signature-clefs-partie-4.md b/_articles/fr/2017-12-01-openpgp-participe-fete-signature-clefs-partie-4.md index 1f05c970c..607c16890 100644 --- a/_articles/fr/2017-12-01-openpgp-participe-fete-signature-clefs-partie-4.md +++ b/_articles/fr/2017-12-01-openpgp-participe-fete-signature-clefs-partie-4.md @@ -7,8 +7,7 @@ title: OpenPGP - J'ai participé à une fête de la signature des clefs excerpt: >- OpenPGP ne s'appuie pas sur une autorité de certification pour certifier les personnes, mais sur la confiance. -cover: >- - /assets/2017-12-01-openpgp-clef-participe-a-une-fete-de-la-signature-des-clefs/cover.jpg +cover: /assets/2017-12-01-openpgp-clef-participe-a-une-fete-de-la-signature-des-clefs/cover.jpg categories: [] authors: - tthuon @@ -26,7 +25,7 @@ sur une feuille. Cette feuille est ensuite distribuée à chaque participant. Le Cela paraît simple, mais il faut une bonne organisation. Lors de cette rencontre, nous étions 20 personnes. -![key signing party](/_assets/articles/2017-12-01-openpgp-clef-participe-a-une-fete-de-la-signature-des-clefs/key_signing_party.jpg) +![key signing party]({BASE_URL}/imgs/articles/2017-12-01-openpgp-clef-participe-a-une-fete-de-la-signature-des-clefs/key_signing_party.jpg) Il y a deux rangées de 10 personnes qui se font face. À tour de rôle, les personnes posent des questions pour vérifier l'identité de leur interlocuteur. Prenons un exemple avec Bob et Alice. @@ -40,7 +39,7 @@ Bob: _vérifie le nom, prénom et la photo_. Ok je valide ton identité. Ensuite Bob met une croix pour dire que l'empreinte de la clef est bonne et que l'identité est vérifiée. Ce dialogue est inversé puis reproduit avec les 19 autres personnes. -![key signing party list](/_assets/articles/2017-12-01-openpgp-clef-participe-a-une-fete-de-la-signature-des-clefs/keysigning_list.png) +![key signing party list]({BASE_URL}/imgs/articles/2017-12-01-openpgp-clef-participe-a-une-fete-de-la-signature-des-clefs/keysigning_list.png) Une fois l'événement terminé, il faut certifier les clefs des personnes que l'on a vérifié. Certifier une clef, c'est donner sa confiance à la personne rencontrée. Cette action n'est pas anodine car elle sera retranscrite dans la clef que je vais certifier. Par exemple, je n'ai pas certifié de clefs dont le nom et prénom incrit dans la clef PGP ne correspond pas à ce qui a été vérifié avec la pièce d'identité. diff --git a/_articles/fr/2017-12-04-deployer-un-mongodb-replique-sur-aws-avec-terraform-et-ansible.md b/_articles/fr/2017-12-04-deployer-un-mongodb-replique-sur-aws-avec-terraform-et-ansible.md index f62605a24..eb08d75c9 100644 --- a/_articles/fr/2017-12-04-deployer-un-mongodb-replique-sur-aws-avec-terraform-et-ansible.md +++ b/_articles/fr/2017-12-04-deployer-un-mongodb-replique-sur-aws-avec-terraform-et-ansible.md @@ -9,8 +9,7 @@ excerpt: >- Services (AWS). Afin de limiter les problèmes de crash et de perte de données, celui-ci est également répliqué avec deux autres serveurs, idéalement dans une zone géographique différente pour assurer de la haute disponibilité. -cover: >- - /assets/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs/cover.jpg +cover: /assets/2017-09-03-migrer-une-application-react-client-side-en-server-side-avec-nextjs/cover.jpg categories: [] authors: - vcomposieux @@ -37,7 +36,7 @@ Ce qu'il est important de noter est que seul le serveur `primaire` pourra lire o Voici donc l'infrastructure cible que nous cherchons à obtenir pour cette réplication : -![MongoDB Replication](/_assets/articles/2017-11-01-deployer-un-mongodb-replique-sur-aws-avec-terraform-et-ansible/replication.svg) +![MongoDB Replication]({BASE_URL}/imgs/articles/2017-11-01-deployer-un-mongodb-replique-sur-aws-avec-terraform-et-ansible/replication.svg) Comme vous pouvez le voir sur ce schéma, seul le noeud primaire est utilisé pour la lecture/écriture, les deux autres réplicas sont là pour la synchronisation des données à jour du serveur primaire en temps réel ainsi que dans le but d'éventuellement devenir primaire à leur tour, dans le cas ou le serveur primaire actuel deviendrait indisponible. diff --git a/_articles/fr/2017-12-07-rgpd.md b/_articles/fr/2017-12-07-rgpd.md index 2bd3f86fc..7213ff9a9 100644 --- a/_articles/fr/2017-12-07-rgpd.md +++ b/_articles/fr/2017-12-07-rgpd.md @@ -24,7 +24,7 @@ Si vous avez utilisé internet au moins une fois sur les dix dernières années, Dans le web d’aujourd’hui les trackers, qu’ils soient analytiques, publicitaires ou encore d’un écosystème CRM, sont plus que monnaie courante comme le montrait cette [étude](http://www.lemonde.fr/pixels/article/2016/05/20/les-mouchards-d-un-million-de-sites-web-analyses_4923485_4408996.html) de 2016. En tête de liste ? Les sites de Presse avec en moyenne 40 trackers. -![]({{site.baseurl}}/assets/2017-12-07-rgpd/lemonde.JPG) +![]({BASE_URL}/imgs/articles/2017-12-07-rgpd/lemonde.JPG) Même si l’utilisation directe peut être justifiée (bien que le nombre de trackers soit juste dingue), le problème est que nous n’avons aucune idée de ce qui est fait avec ces données, mais surtout que tout cela est fait sans notre accord... @@ -80,7 +80,7 @@ Pour les autres droits, “l’application” devra être en mesure de restituer ## Bon finalement, c’est grave docteur ? -![]({{site.baseurl}}/assets/2017-12-07-rgpd/bugs.jpg) +![]({BASE_URL}/imgs/articles/2017-12-07-rgpd/bugs.jpg) Et bien, tout dépend de votre niveau de dépendances aux trackers & Co et surtout de la quantité de données que vous collectez. Si votre site possède un simple tracker GA, la demande de consentement sera simple et les données à restituer seront nulles. diff --git a/_articles/fr/2017-12-08-mon-retour-sur-les-dotjs-2017.md b/_articles/fr/2017-12-08-mon-retour-sur-les-dotjs-2017.md index 30f53553f..143d6d98c 100644 --- a/_articles/fr/2017-12-08-mon-retour-sur-les-dotjs-2017.md +++ b/_articles/fr/2017-12-08-mon-retour-sur-les-dotjs-2017.md @@ -21,7 +21,7 @@ keywords: - dotjs - nodejs --- -![DotJS logo]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/logo.png) +![DotJS logo]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/logo.png) [DotJS](https://www.dotjs.io/) est la plus grande conférence JavaScript en Europe et c'est souvent l'occasion de parler des nouvelles technologies à notre disposition et découvrir ce que nous réserve le futur de ECMAScript. @@ -35,7 +35,7 @@ Après un bon petit-déjeuner offert par les partenaires de l'événement, il es ### Wes Bos -![Wes Bos]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/wesbos.jpg) +![Wes Bos]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/wesbos.jpg) C'est [Wes](https://twitter.com/wesbos) qui ouvre le bal avec un talk sur les promesses et l'évolution vers le couple async/await. Il revient notamment sur la problématique historique du JavaScript sur la gestion de l'asynchrone et notamment sur les problèmes très connus que sont le _Callback of Hell_ ou la _Pyramide of Doom_. @@ -49,7 +49,7 @@ _[Voir ses slides](https://wesbos.github.io/Async-Await-Talk/#1)_ ### Trent Willis -![Trent Willis]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/trentwillis.jpg) +![Trent Willis]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/trentwillis.jpg) [Trent Willis](https://twitter.com/trentmwillis) enchaîne ensuite sur comment bien tester son application web et quels sont les outils disponibles pour y arriver. Il cite notamment Chrome DevTools qui offre tout une gamme d'outils comme par exemple le calcul de la couverture de code. Cela permet de savoir quelle proportion de code JS/CSS a réellement été utilisée par le navigateur et ainsi procéder, si nécessaire, à un nettoyage. @@ -59,7 +59,7 @@ _[Voir ses slides](http://pretty-okay.com/static/slides/dot-js_working-well-futu ### Suz Hinton -![Suz Hinton]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/suzhinton.jpg) +![Suz Hinton]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/suzhinton.jpg) Après une introduction faisant le parallèle entre l'accessibilité sur le web et une proposition de changement du logo international du handicap (♿), [Suz Hinton](https://twitter.com/noopkat) présente une démonstration de code en machine learning qui, grâce à une requête fetch(), va interroger une API pour ajouter des attributs HTML alt sur une galerie d'images Instagram, et l'accessibiliser. @@ -67,7 +67,7 @@ Une autre de ses démonstrations porte sur l'injection de sous-titres en direct ### Feross Aboukhadijeh -![Feross Aboukhadijeh]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/feross.jpg) +![Feross Aboukhadijeh]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/feross.jpg) [Feross](https://feross.org/) aime enfreindre les règles sur le web et bidouiller les navigateurs. Ainsi il fait la démonstration d'une technique éprouvée permettant d'activer la webcam des visiteurs d'un site à leur insu en passant par les autorisations du plugin Flash. Celles-ci sont hébergées par une page d'Adobe, qui peut être placée en iframe transparente au-dessus de la page courante. En faisant croire à un jeu et en incitant l'internaute à cliquer sur plusieurs boutons qui se déplacent successivement à 4 emplacements stratégiques, on provoque des clics sur l'interface de gestion délicate d'Adobe Flash qui débloque l'accès à la webcam. @@ -82,7 +82,7 @@ Vous pouvez en retrouver la compilation sur [Theannoyingsite.com](http://www.the ## Lightning Talks -![La salle de conférence]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/lightningtalks.jpg) +![La salle de conférence]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/lightningtalks.jpg) Les Lightning Talks sont une suite de petites présentations d'environ cinq minutes. Elles permettent de présenter des sujets simples ne nécessitant pas la durée complète d'un talk. Ces sujets sont très variés et peuvent être aussi bien une anecdote amusante, un rappel utile, une découverte intéressante ou la présentation du métier et/ou produit d'un des partenaires de l'événement. @@ -102,7 +102,7 @@ Après un déjeuner plus que mérité, il est temps de continuer. ### Adrian Holovaty -![Adrian Holovaty]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/adrianholovaty.jpg) +![Adrian Holovaty]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/adrianholovaty.jpg) Voilà un sujet intéressant que l'on pourrait penser à contre-courant. [Adrian Holovaty](https://twitter.com/adrianholovaty), co-fondateur du célèbre framework Django nous fait un plaidoyer en faveur d'une notion simple : arrêter d'utiliser des frameworks. @@ -114,7 +114,7 @@ Mais attention de ne pas faire l'erreur : Adrian utilise bien des bibliothèques ### Thomas Watson -![Thomas Watson]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/thomaswatson.jpg) +![Thomas Watson]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/thomaswatson.jpg) [Thomas Watson](https://twitter.com/wa7son) nous explique pendant près de 15 minutes comment les avions communiquaient entre eux et comment le contrôle aérien pouvait récupérer énormément d'informations sur ses radars. Quel rapport avec JavaScript me direz-vous ? Et bien Thomas s'est mis en tête de créer une application permettant de capter les signaux émis par les avions à plusieurs dizaines de kilomètres (protocole ADS-B) puis récupérer leur identification transpondeur, altitude, longitude, latitude, etc, et les placer sur une carte en direct. Toutes ces données sont librement accessibles et il n'y aucune sécurité (ce qui peut poser des questions...). Il suffit de s'équiper d'une petite antenne radio grand public (chip RTL2832U fréquence 1090 Mhz) et de la piloter avec Node.JS. Si vous êtes intéressé, n'hésitez pas à consulter ses projets récents sur son compte GitHub : [rtl-sdr](https://github.com/watson/rtl-sdr), [mode-s-decoder](https://github.com/watson/mode-s-decoder). @@ -123,7 +123,7 @@ _[Voir ses slides](https://speakerdeck.com/wa7son/dotjs-2017-getting-data-from-t ### Sean Larkin -![Sean Larkin]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/seanlarkin.jpg) +![Sean Larkin]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/seanlarkin.jpg) [Sean Larkin](https://www.twitter.com/thelarkinn) est, entre autres, un des _lead maintainer_ sur [Webpack](https://webpack.js.org/). Et ça tombe bien, car il a décidé de nous expliquer comment que tout ça marche dedans. Il nous introduit la bibliothèque [Tapable](https://github.com/webpack/tapable) qui constitue l'épine dorsale de Webpack. @@ -132,7 +132,7 @@ Il nous présente enfin le futur de Webpack avec sa version 4 : amélioration de ### Marcy Sutton -![Marcy Sutton]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/marcysutton.jpg) +![Marcy Sutton]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/marcysutton.jpg) [Marcy](https://www.twitter.com/marcysutton) met particulièrement l'accent dans son travail sur l'accessibilité. Elle souhaite prendre en compte toutes les spécificités : handicap, situation géographique, capacités de lecture, âge, matériel, moyens, vitesse d'accès au réseau. Elle démontre ainsi l'importance de JavaScript sur ce domaine et comment il est possible d'apporter des améliorations en suivant quelques critères : @@ -148,7 +148,7 @@ _[Voir ses slides](https://marcysutton.github.io/enabling-users/)_ ### Tom Dale -![Tom Dale]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/tomdale.jpg) +![Tom Dale]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/tomdale.jpg) En tant que _Software Engineer_ chez LinkedIn et co-créateur de Ember.js, [Tom Dale](https://twitter.com/tomdale) travaille principalement sur les performances d'affichage et notamment les marchés émergents. @@ -173,7 +173,7 @@ Vous pouvez tester cette nouvelle technique sur [Glimmer Playground](https://gli ### Brendan Eich -![Brendan Eich]({{site.baseurl}}/assets/2017-12-08-dotjs-2017/brendaneich.jpg) +![Brendan Eich]({BASE_URL}/imgs/articles/2017-12-08-dotjs-2017/brendaneich.jpg) [Brendan Eich](https://twitter.com/brendaneich) n'est autre que le créateur de JavaScript lui-même. Comme il lui est souvent demandé, il nous présente la genèse et l'évolution du JS au fur et à mesure des années avec évidemment son lot de difficultés et d'espoir. diff --git a/_articles/fr/2017-12-12-monitorer-ses-containers-docker.md b/_articles/fr/2017-12-12-monitorer-ses-containers-docker.md index 8435fb2f4..1c206633d 100644 --- a/_articles/fr/2017-12-12-monitorer-ses-containers-docker.md +++ b/_articles/fr/2017-12-12-monitorer-ses-containers-docker.md @@ -56,7 +56,7 @@ Pour commencer, nous allons installer rapidement une application, prenons par ex ``` Nous avons maintenant accès à la documentation de l’api que vous venez d’installer. -![api]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/api.png) +![api]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/api.png) ## cAdvisor @@ -98,11 +98,11 @@ Nous pouvons relancer le `docker-compose`. Nous avons maintenant accès à l'interface de `cAdvisor`. -![cadvisor]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/cadvisor.png) +![cadvisor]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/cadvisor.png) Ce qui nous permet déjà de voir sommairement les metrics de nos containers. -![metrics]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/metrics.png) +![metrics]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/metrics.png) Malgré tout, cette solution seule n'est pas assez configurable et ne peut pas répondre pleinement à notre besoin. @@ -181,7 +181,7 @@ Nous pouvons de nouveau relancer le `docker-compose`. Nous pouvons voir que les jobs que nous avons configurés sont bien `up`. C'est à dire que `Prometheus` a bien réussi à scraper les metrics de `cAdvisor` et de `Prometheus`. -![prom]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/prom.png) +![prom]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/prom.png) ## Grafana @@ -222,7 +222,7 @@ Nous pouvons lancer une dernière fois le `docker-compose`. Commençons par ajouter notre `Prometheus` comme `Data Sources`. Rendons-nous sur [http://localhost:3000/datasources/new](http://localhost:3000/datasources/new) et ajoutons le host de notre `Prometheus`. -![grafana]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/grafana.png) +![grafana]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/grafana.png) Maintenant que `Grafana` peut accéder à notre `Prometheus`. Il nous reste plus qu'à créer un nouveau dashboard. Pour gagner du temps nous allons en importer directement. @@ -232,7 +232,7 @@ Importons ce nouveau dashboard [http://localhost:3000/dashboard/new?editview=imp > [http://localhost:3000/dashboard/db/docker-monitoring?refresh=10s∨gId=1](http://localhost:3000/dashboard/db/docker-monitoring?refresh=10s∨gId=1) -![dashboard]({{site.baseurl}}/assets/2017-12-12-monitorer-ses-containers-docker/dashboard.png) +![dashboard]({BASE_URL}/imgs/articles/2017-12-12-monitorer-ses-containers-docker/dashboard.png) Nous pouvons maintenant voir les metrics systèmes de nos containers, comme la consommation `cpu` ou `ram` de chacun. diff --git a/_articles/fr/2017-12-13-comprendre-noyau-linux.md b/_articles/fr/2017-12-13-comprendre-noyau-linux.md index 076dfe993..3fa4e0642 100644 --- a/_articles/fr/2017-12-13-comprendre-noyau-linux.md +++ b/_articles/fr/2017-12-13-comprendre-noyau-linux.md @@ -71,7 +71,7 @@ Je n'ai pas de benchmarks sous la main, mais j'en ai fait plusieurs à l'époque ## Quels problèmes cela peut-il engendrer ? -![Kernel Panic]({{site.baseurl}}/assets/2017-12-13-understanding-linux-kernel/kernel_panic.jpg) +![Kernel Panic]({BASE_URL}/imgs/articles/2017-12-13-understanding-linux-kernel/kernel_panic.jpg) TL;DR : beaucoup de problèmes, est-ce dangereux pour autant ? Non, à condition de respecter certaines règles. De la même manière qu'il existe des règles de sécurité en chimie, en bricolage, et j'en passe, il y en a pour se prémunir d'une compilation de Kernel loupée conduisant à une impossibilité de booter. @@ -181,5 +181,5 @@ Une petite rubrique pour conclure cette introduction à la compilation d'un Kern Cette article est le premier d'une série de trois. Vous pouvez retrouver les deux suivants ci-dessous : -- [Je configure mon noyau GNU/Linux (partie 2)]({{site.baseurl}}/fr/configurer-kernel-linux/) -- [Je compile mon noyau GNU/Linux (partie 3)]({{site.baseurl}}/fr/compiler-kernel-linux/) +- [Je configure mon noyau GNU/Linux (partie 2)]({BASE_URL}/fr/configurer-kernel-linux/) +- [Je compile mon noyau GNU/Linux (partie 3)]({BASE_URL}/fr/compiler-kernel-linux/) diff --git a/_articles/fr/2017-12-14-configurer-noyau-linux.md b/_articles/fr/2017-12-14-configurer-noyau-linux.md index 85a213368..de17210da 100644 --- a/_articles/fr/2017-12-14-configurer-noyau-linux.md +++ b/_articles/fr/2017-12-14-configurer-noyau-linux.md @@ -19,7 +19,7 @@ keywords: - gentoo --- -Cette article fait suite à un article intitulé [Je comprends mon noyau GNU/Linux (partie 1)]({{site.baseurl}}/fr/comprendre-kernel-linux/) et en dépend. Si vous ne l'avez pas lu, je vous invite à le faire. +Cette article fait suite à un article intitulé [Je comprends mon noyau GNU/Linux (partie 1)]({BASE_URL}/fr/comprendre-kernel-linux/) et en dépend. Si vous ne l'avez pas lu, je vous invite à le faire. Maintenant que nous avons compris de façon générale comment fonctionnait le noyau Linux dans le précédent article, voyons comment le configurer afin, à terme, de le compiler et l'utiliser. @@ -94,13 +94,13 @@ ncurses-dev n'est pas obligatoire mais dans ce cas, vous devrez répondre à aut Sans ncurses-dev, `make config` : -![Vue make config]({{site.baseurl}}/assets/2017-12-14-configuring-linux-kernel/make_config.png) +![Vue make config]({BASE_URL}/imgs/articles/2017-12-14-configuring-linux-kernel/make_config.png) *Have fun ! On se revoit dans 10 jours quand vous aurez fini de configurer votre kernel :troll:* Avec ncurses-dev, `make menuconfig` (ou `make nconfig` pour un style plus épuré) : -![Vue make menuconfig]({{site.baseurl}}/assets/2017-12-14-configuring-linux-kernel/make_menuconfig.png) +![Vue make menuconfig]({BASE_URL}/imgs/articles/2017-12-14-configuring-linux-kernel/make_menuconfig.png) *Bien plus user-friendly* @@ -217,7 +217,7 @@ Kernel hacking, security options, cryptographic API, Virtualization, library rou #### Désactiver initrd Dans notre cas, nous voulions nous passer de l'initrd. Une brève recherche m'indique que je peux trouver cette option dans le menu general setup : -![Recherche initrd]({{site.baseurl}}/assets/2017-12-14-configuring-linux-kernel/search_initrd.png) +![Recherche initrd]({BASE_URL}/imgs/articles/2017-12-14-configuring-linux-kernel/search_initrd.png) Il me suffit de m'y rendre pour le désactiver. En faisant ça je m'assure que l'initrd ne pourra jamais être utilisé, ce qui m'oblige à avoir un noyau très épuré, avec les drivers nécessaires au boot compilés en dur dans le Kernel. @@ -238,13 +238,13 @@ Selects: INTEL_GTT [=y] && INTERVAL_TREE [=y] && SHMEM [=y] && TMPFS [=y] && DRM ``` C'est donc dans le sous-menu graphics support que je vais aller activer l'option si ce n'est pas déjà fait, et désactiver ce qui me semble inutile (c'est à dire d'autres pilotes graphiques). -![Menu graphics]({{site.baseurl}}/assets/2017-12-14-configuring-linux-kernel/graphics.png) +![Menu graphics]({BASE_URL}/imgs/articles/2017-12-14-configuring-linux-kernel/graphics.png) Comme vous le voyez, tout est compilé en modules, et quasiment toutes les cartes sont supportées ! Faisons un peu de ménage. -![Twelve seconds later]({{site.baseurl}}/assets/2017-12-14-configuring-linux-kernel/12s.jpg) +![Twelve seconds later]({BASE_URL}/imgs/articles/2017-12-14-configuring-linux-kernel/12s.jpg) -![Menu graphics propre]({{site.baseurl}}/assets/2017-12-14-configuring-linux-kernel/clean_graphics.png) +![Menu graphics propre]({BASE_URL}/imgs/articles/2017-12-14-configuring-linux-kernel/clean_graphics.png) C'est beaucoup plus digeste ! @@ -261,5 +261,5 @@ Si vous avez tenté d'optimiser au maximum votre kernel, votre première compila Cette article est le second d'une série de trois. Vous pouvez retrouver le précédent et le suivant ci-dessous : -- [Je comprends mon noyau GNU/Linux (partie 1)]({{site.baseurl}}/fr/comprendre-kernel-linux/) -- [Je compile mon noyau GNU/Linux (partie 3)]({{site.baseurl}}/fr/compiler-kernel-linux/) +- [Je comprends mon noyau GNU/Linux (partie 1)]({BASE_URL}/fr/comprendre-kernel-linux/) +- [Je compile mon noyau GNU/Linux (partie 3)]({BASE_URL}/fr/compiler-kernel-linux/) diff --git a/_articles/fr/2017-12-15-compiler-noyau-linux.md b/_articles/fr/2017-12-15-compiler-noyau-linux.md index bb28e67f8..a09b83b6d 100644 --- a/_articles/fr/2017-12-15-compiler-noyau-linux.md +++ b/_articles/fr/2017-12-15-compiler-noyau-linux.md @@ -18,7 +18,7 @@ keywords: - gentoo --- -Cette article fait suite à un article intitulé [Je configure mon noyau GNU/Linux (partie 2)]({{site.baseurl}}/fr/configurer-kernel-linux/) et en dépend. Si vous ne l'avez pas lu, je vous invite à le faire. +Cette article fait suite à un article intitulé [Je configure mon noyau GNU/Linux (partie 2)]({BASE_URL}/fr/configurer-kernel-linux/) et en dépend. Si vous ne l'avez pas lu, je vous invite à le faire. Le moment tant attendu est finalement arrivé, il est tant de : compiler, installer, tester (kernel-paniquer, recompiler, réinstaller, retester). @@ -38,7 +38,7 @@ Déjà assurez-vous que votre processeur n'est pas trop utilisé par d'autres t Par exemple évitez de miner de la crypto-monnaie sur votre processeur en même temps. Et pour répondre, pendant que ça compile on fait autre chose : -![On attend...]({{site.baseurl}}/assets/2017-12-15-compiling-linux-kernel/wait.gif) +![On attend...]({BASE_URL}/imgs/articles/2017-12-15-compiling-linux-kernel/wait.gif) ### Si ça plante ? @@ -172,11 +172,11 @@ La réponse est simple, l'entrée ajoutée à grub ajoute le initrd avec, sauf q Il n'y a plus qu'à rebooter et sélectionner notre nouvelle entrée : -![grub]({{site.baseurl}}/assets/2017-12-15-compiling-linux-kernel/grub.png) +![grub]({BASE_URL}/imgs/articles/2017-12-15-compiling-linux-kernel/grub.png) Puis le moment tant attendu arriva... Le saint Graal de toute personne qui compile son Kernel ! Le Mother Fucking Kernel Panic -![Kernel Panic]({{site.baseurl}}/assets/2017-12-15-compiling-linux-kernel/kernel_panic.png) +![Kernel Panic]({BASE_URL}/imgs/articles/2017-12-15-compiling-linux-kernel/kernel_panic.png) Bon dans mon cas précis j'ai vite fait trouvé l'erreur, je l'ai fait sur une VM (c'est plus simple pour les screenshots) sauf que j'ai désactivé le support des systèmes de fichiers virtuels (VFS). L'erreur est en général beaucoup plus parlante que sur un BSOD Windows ! @@ -191,5 +191,5 @@ C'est donc une source intarissable d'apprentissage ! Cette article est le dernier d'une série de trois. Vous pouvez retrouver les précédents ci-dessous : -- [Je comprends mon noyau GNU/Linux (partie 1)]({{site.baseurl}}/fr/comprendre-kernel-linux/) -- [Je configure mon noyau GNU/Linux (partie 2)]({{site.baseurl}}/fr/configurer-kernel-linux/) +- [Je comprends mon noyau GNU/Linux (partie 1)]({BASE_URL}/fr/comprendre-kernel-linux/) +- [Je configure mon noyau GNU/Linux (partie 2)]({BASE_URL}/fr/configurer-kernel-linux/) diff --git a/_articles/fr/2017-12-19-push-notification.md b/_articles/fr/2017-12-19-push-notification.md index da4d9c4b2..be3da83c5 100644 --- a/_articles/fr/2017-12-19-push-notification.md +++ b/_articles/fr/2017-12-19-push-notification.md @@ -34,11 +34,11 @@ Pour cela, lors de la première visite sur le site, le service worker s'enregist Vous pouvez voir cela directement dans votre console de développement dans l'onglet `application`. -![Console Chrome]({{site.baseurl}}/assets/2017-12-19-push-notification/image1.png) +![Console Chrome]({BASE_URL}/imgs/articles/2017-12-19-push-notification/image1.png) La mise en place d'un service worker est assez simple. Il faut dire au navigateur compatible avec les service workers où se dernier se trouve. Voici la liste des navigateurs actuellement compatibles ([CanIUse](https://caniuse.com/#search=service%20workers)). -![Can I Use]({{site.baseurl}}/assets/2017-12-19-push-notification/image2.png) +![Can I Use]({BASE_URL}/imgs/articles/2017-12-19-push-notification/image2.png) Vous devez avoir un fichier contenant l'enregistrement du service workers. @@ -115,7 +115,7 @@ Donc voilà, nous avons notre service worker prêt pour y mettre des notificatio La première chose à faire dans la mise en place des web notifications, c'est d'ajouter dans votre `manifest.json` votre `gcm_sender_id` que vous pouvez trouver dans les paramètres du projet Firebase. -![Paramètre Firebase]({{site.baseurl}}/assets/2017-12-19-push-notification/image3.png) +![Paramètre Firebase]({BASE_URL}/imgs/articles/2017-12-19-push-notification/image3.png) Il faut ensuite enregistrer le token des utilisateurs qui acceptent de recevoir les notifications. @@ -157,11 +157,11 @@ L'enregistrement du token utilisateur se fait au même endroit que celui du serv Il faut appeler la fonction `subscribeDevice` si le service worker est disponible dans le navigateur. Si tout est ok, vous avez un petit popup qui vous demande de valider l'autorisation de recevoir les notifications. -![Popup notification]({{site.baseurl}}/assets/2017-12-19-push-notification/image4.png) +![Popup notification]({BASE_URL}/imgs/articles/2017-12-19-push-notification/image4.png) Si la personne accepte son token (unique par navigateur), cela devrait apparaître dans votre base de données Firebase. -![BDD Firebase]({{site.baseurl}}/assets/2017-12-19-push-notification/image5.png) +![BDD Firebase]({BASE_URL}/imgs/articles/2017-12-19-push-notification/image5.png) Et voilà, la première étape est terminée, vous avez dans votre base de données l'ensemble des utilisateurs qui acceptent de recevoir vos notifications. @@ -202,7 +202,7 @@ Vous pouvez faire un lien vers votre site lors du clic sur la notification, en a Donc maintenant l'utilisateur pourra voir votre notification s'afficher. -![Notification]({{site.baseurl}}/assets/2017-12-19-push-notification/image6.png) +![Notification]({BASE_URL}/imgs/articles/2017-12-19-push-notification/image6.png) > Et comment je l'envoie ? diff --git a/_articles/fr/2017-12-20-optimize-image-with-imagine.md b/_articles/fr/2017-12-20-optimize-image-with-imagine.md index 318a7553e..54bdb7644 100644 --- a/_articles/fr/2017-12-20-optimize-image-with-imagine.md +++ b/_articles/fr/2017-12-20-optimize-image-with-imagine.md @@ -34,11 +34,11 @@ Notre projet est un jeu dont le but est de placer des objets (par drag and drop Les données à manipuler essentiellement sont : * **la pièce**: Elle est caractérisée principalement par _une image_ et un _coefficient d'agrandissement_ des objets. -![un exemple de pièce]({{site.baseurl}}/assets/2017-12-20-optimize-image-with-imagine/room.png) +![un exemple de pièce]({BASE_URL}/imgs/articles/2017-12-20-optimize-image-with-imagine/room.png) * **les objets**: Ils ont comme informations principales _une image_, et _une taille réelle_ en centimètre. -![une table]({{site.baseurl}}/assets/2017-12-20-optimize-image-with-imagine/table.png) -![un écran]({{site.baseurl}}/assets/2017-12-20-optimize-image-with-imagine/imac.png). +![une table]({BASE_URL}/imgs/articles/2017-12-20-optimize-image-with-imagine/table.png) +![un écran]({BASE_URL}/imgs/articles/2017-12-20-optimize-image-with-imagine/imac.png). L'objectif à atteindre : * Optimiser les fonds de pièces @@ -197,8 +197,8 @@ protected function execute( Pour les objets, la méthode de calcul est un peu différente. On ne peut pas leur appliquer une taille par défaut comme pour les pièces. En effet ils n'ont pas tous la même taille (On ne peut pas redimensionner une table et un écran de la même manière)! -![une table](/_assets/articles/2017-12-20-optimize-image-with-imagine/table.png) -![un écran](/_assets/articles/2017-12-20-optimize-image-with-imagine/imac.png). +![une table]({BASE_URL}/imgs/articles/2017-12-20-optimize-image-with-imagine/table.png) +![un écran]({BASE_URL}/imgs/articles/2017-12-20-optimize-image-with-imagine/imac.png). Nous avons décidé de calculer la taille maximale des images de nos objets lorsqu'elles sont au maximum zoomées dans les pièces. diff --git a/_articles/fr/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony.md b/_articles/fr/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony.md index 589a28cbc..3c056da08 100644 --- a/_articles/fr/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony.md +++ b/_articles/fr/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony.md @@ -10,8 +10,7 @@ excerpt: >- Le but de cet article est de montrer la puissance d'un Slack bot pour simplifier la vie en entreprise, et comment le mettre en place avec DialogFlow et Symfony -cover: >- - /assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/cover.jpg +cover: /assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/cover.jpg categories: - php authors: @@ -80,19 +79,19 @@ Il faut tout d'abord créer une app Slack. Connectez vous donc à votre compte Slack relié à votre Workspace d'entreprise. Puis allez sur [https://api.slack.com/apps](https://api.slack.com/apps) et cliquez sur "Create New App". -[![Create Slack App]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_create_app.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_create_app.png) +[![Create Slack App]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_create_app.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_create_app.png) Puis à vous de compléter les informations de votre app comme bon vous semble : nom, description, couleur et icône. Vous pourrez ensuite accéder aux configurations suivantes depuis cet écran de "Basic Information" : -[![Slack App Basic Information]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_basic_info.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_basic_info.png) +[![Slack App Basic Information]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_basic_info.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_basic_info.png) ### Créer un bot Il faut maintenant créer un utilisateur bot relié à cette app. Pour cela, rendez vous dans le menu de gauche "Bot Users" ou depuis les "Basic Information" > "Add features and functionality" > "Bots". -[![Slack Bot]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_bot.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_bot.png) +[![Slack Bot]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_bot.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_bot.png) Il suffit ici de nommer le bot et de le rendre visible "online". @@ -102,7 +101,7 @@ Ensuite allez dans le menu "Event Subscriptions", saisissez l'**URL de votre fut Il faut également sélectionner l'event "**message.im**" pour signifier à Slack d'appeler le webhook précédent à chaque fois qu'un message privé est envoyé à notre bot. -[![Slack Event Subscriptions]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_event_subscription.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_event_subscription.png) +[![Slack Event Subscriptions]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_event_subscription.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_event_subscription.png) Les appels faits vers ce webhook devront être sécurisés à l'aide d'un token qui sera utilisé dans la dernière partie : veuillez donc noter la valeur du "**Verification Token**" affichée sur la page "Basic Information". @@ -133,13 +132,13 @@ Puis créez un nouvel **agent** (bouton "Create New Agent") et sélectionnez la Les "intents" correspondent aux types de messages de l'utilisateur que nous avons envie de comprendre. Nous allons en configurer trois dans le cadre de cet article : -[![DialogFlow intents]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intents.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intents.png) +[![DialogFlow intents]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intents.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intents.png) #### 1. Premier intent, le plus intéressant que nous appelons "**Demande de congés avec dates de début et de fin**" : Nous allons lister dans la partie "**User says**" un maximum d'inputs utilisateurs qui pourraient être envoyés par les astronautes qui font leur demande de congés. -[![DialogFlow intent dates input]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intent_dates_input.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intent_dates_input.png) +[![DialogFlow intent dates input]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intent_dates_input.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intent_dates_input.png) Pour chacun de ces inputs, nous sélectionnons les passages les plus intéressants, en jaune et orange sur l'image ci-dessus. Ces passages correspondent aux dates de congés qu'on doit reconnaître puis enregistrer. @@ -147,7 +146,7 @@ Ces sélections sont associées à des paramètres que nous nommerons "**startDa Enfin, nous pouvons configurer les réponses qui seront renvoyées par DialogFlow quand on lui enverra un message de ce type, s'il le reconnaît : -[![DialogFlow intent dates output]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intent_dates_output.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intent_dates_output.png) +[![DialogFlow intent dates output]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intent_dates_output.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/dialogflow_intent_dates_output.png) Nous avons deux types de réponses : - les textes que nous utiliserons pour répondre à l'astronaute sur Slack. @@ -519,11 +518,11 @@ Si votre webhook retourne un code d'**erreur HTTP**, Slack **rappellera plusieur **Démonstration** : voici un extrait d'une conversation Slack avec notre bot : -[![Démonstration]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo1.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo1.png) +[![Démonstration]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo1.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo1.png) Et voilà le résultat enregistré en base de données : -[![Résultats en base de données]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo2.png)]({{site.baseurl}}/assets/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo2.png) +[![Résultats en base de données]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo2.png)]({BASE_URL}/imgs/articles/2017-12-21-remplacer-erp-par-slack-bot-avec-dialogflow-et-symfony/slack_demo2.png) On remarque notre ami Google a bien su reconnaître les dates écrites en français et nous a permis d'enregistrer des dates au format "datetime" en base de données, merci à lui ! diff --git a/_articles/fr/2017-12-22-optimiser-son-application-react.md b/_articles/fr/2017-12-22-optimiser-son-application-react.md index a90c719ca..0242a20da 100644 --- a/_articles/fr/2017-12-22-optimiser-son-application-react.md +++ b/_articles/fr/2017-12-22-optimiser-son-application-react.md @@ -29,7 +29,7 @@ Prenons l'exemple d'une application assez simple et commune. On réalise un back Vous vous exécutez donc et pensant avoir fini vous constatez ceci : -![Exemple d'application lente]({{site.baseurl}}/assets/2017-12-22-optimiser-son-application-react/slow-app.gif) +![Exemple d'application lente]({BASE_URL}/imgs/articles/2017-12-22-optimiser-son-application-react/slow-app.gif) > MéKéCéCéCeBordel ?! @@ -37,7 +37,7 @@ Votre application est lente et peu réactive (un comble pour du React...). Allons faire un petit tour dans la console de Chrome à l'onglet Timeline. Ici on va pouvoir capturer tout ce qui se passe au niveau code, mémoire et rendu pendant un laps de temps donné. Après quelques bidouilles, voici ce qu'on obtient : -![Flamegraph de l'application]({{site.baseurl}}/assets/2017-12-22-optimiser-son-application-react/slow-app-flamegraph.png) +![Flamegraph de l'application]({BASE_URL}/imgs/articles/2017-12-22-optimiser-son-application-react/slow-app-flamegraph.png) Alors au premier abord, ça peut être un peu repoussant mais c'est en fait très simple. Sur ce "FlameGraph", on peut voir que lorsque l'utilisateur a cliqué, ce n'est pas seulement les lignes de notre tableau qui se sont redessinées mais toute l'application ! En bref, à chaque changement de `state` dans votre application, vous réinitialisez compètement cette dernière à zéro comme si vous étiez au tout premier rendu de la page. @@ -324,7 +324,7 @@ Une petite parenthèse sur les "stateless functions". Comme vous l'avez sûremen Eh bien... non. C'est prévu mais à l'heure où j'écris ces lignes, rien n'a été fait. Une "stateless function" est transpilée en une classe à la compilation... -![Commentaire sur github confirmant le problème des stateless functions]({{site.baseurl}}/assets/2017-12-22-optimiser-son-application-react/stateless-function-github.png) +![Commentaire sur github confirmant le problème des stateless functions]({BASE_URL}/imgs/articles/2017-12-22-optimiser-son-application-react/stateless-function-github.png) Ainsi il est plutôt conseillé d'utiliser des `Component` ou `PureComponent`, car vous pouvez y maîtriser le workflow. Vous pouvez jeter un coup d'oeil à cet article pour de plus amples informations : ["7 reasons to outlaw React's functional components"](https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c) diff --git a/_articles/fr/2018-01-05-SSR-symfony-vue.md b/_articles/fr/2018-01-05-SSR-symfony-vue.md index 2871f0c16..ac9119a5a 100644 --- a/_articles/fr/2018-01-05-SSR-symfony-vue.md +++ b/_articles/fr/2018-01-05-SSR-symfony-vue.md @@ -9,7 +9,7 @@ excerpt: >- Symfony et un framework client type Vue.js. D'ailleurs on trouve énormément d'articles sur le sujet. La question que l'on se pose le plus souvent, c'est comment rendre ces choix technologiques performants. -cover: /assets/2018-01-05-SSR-symfony-vue/cover.jpg +cover: /assets/{BASE_URL}/imgs/articles/2018-01-05-SSR-symfony-vue/cover.jpg categories: - javascript authors: @@ -159,7 +159,7 @@ Dans votre fichier twig vous devez appeler le fichier généré par webpack en a Voilà, vous devez avoir un site symfony 4 qui vous affiche `Hello world` en vue.js. Si vous désactivez le javascript, vous n'aurez que le `salut` qui s'affiche. -![Demo1]({{site.baseurl}}/assets/2018-01-05-SSR-symfony-vue/demo1.png) +![Demo1]({BASE_URL}/imgs/articles/2018-01-05-SSR-symfony-vue/demo1.png) ## Faire du SSR @@ -171,7 +171,7 @@ Mais ici, nous voulons garder notre serveur Symfony (pour plein de raison que je Tout d'abord nous allons créer deux fichiers d'entrée pour vue.js, parce qu'il faut appeler des fonctions différentes pour l'affichage dans le client et dans le serveur. -![App.js]({{site.baseurl}}/assets/2018-01-05-SSR-symfony-vue/appjs.png) +![App.js]({BASE_URL}/imgs/articles/2018-01-05-SSR-symfony-vue/appjs.png) Commençons par créer le fichier `assets/js/entry-client.js` qui permet de "monter" l'application sur l'id `#app` @@ -285,7 +285,7 @@ Et dans le twig vous pouvez mettre la valeur `raw` de `ssr`. Si tout est ok, votre page affichera "Hello World" directement dans votre code source. -![CodeSource]({{site.baseurl}}/assets/2018-01-05-SSR-symfony-vue/source.png) +![CodeSource]({BASE_URL}/imgs/articles/2018-01-05-SSR-symfony-vue/source.png) ## Conclusion diff --git a/_articles/fr/2018-01-17-blog-bandeau-cookie.md b/_articles/fr/2018-01-17-blog-bandeau-cookie.md index 34d61d784..ddfa524b2 100644 --- a/_articles/fr/2018-01-17-blog-bandeau-cookie.md +++ b/_articles/fr/2018-01-17-blog-bandeau-cookie.md @@ -46,7 +46,7 @@ Lorsque des manquements à la loi sont portés à sa connaissance, la formation - **Une injonction de cesser le traitement.** - **Un retrait de l’autorisation accordée par la CNIL** en application de [l’article 25 de la loi](https://www.cnil.fr/fr/loi-78-17-du-6-janvier-1978-modifiee#Article25) -![saline]({{site.baseurl}}/assets/2018-01-17-cookie-banner/brouette-sel.jpg) +![saline]({BASE_URL}/imgs/articles/2018-01-17-cookie-banner/brouette-sel.jpg) _Chargement de sel pour une entreprise ayant été sanctionné par la CNIL_ ### Cas de Google Analytics @@ -73,7 +73,7 @@ Nous avons développé cette fonctionnalité récemment sur ce blog. Les seuls c Comme la CNIL le recommande, on part sur un bandeau avertissant l'utilisateur avec un bouton/lien lui permettant d'avoir plus d'informations et de s'opposer à l'utilisation des cookies. Si l'utilisateur clique sur le site n'importe où en dehors de ce bandeau, il sera considéré que l'utilisateur a approuvé l'utilisation des cookies. -![Bandeau Cookie - learn the difference]({{site.baseurl}}/assets/2018-01-17-cookie-banner/learn-the-difference.jpg) +![Bandeau Cookie - learn the difference]({BASE_URL}/imgs/articles/2018-01-17-cookie-banner/learn-the-difference.jpg) Le choix final de l'utilisateur (après clic sur le bouton dans le bandeau) sera affiché dans une boite de dialogue contenant une explication détaillée de pourquoi les cookies sont nécessaires et deux boutons permettant d'accepter ou de refuser l'utilisation des cookies. Cette boite de dialogue comportera un "overlay" obligeant l'utilisateur à faire son choix avant de continuer à utiliser le site. @@ -204,7 +204,7 @@ function processCookieConsent() { Lorsque l'utilisateur a décidé de s'opposer à l'utilisation des cookies, il faut... poser des cookies... -![Ironic]({{site.baseurl}}/assets/2018-01-17-cookie-banner/ironic.jpg) +![Ironic]({BASE_URL}/imgs/articles/2018-01-17-cookie-banner/ironic.jpg) Le but est d'enregistrer le choix de l'utilisateur pendant la durée maximum légale (13 mois). Dans cette fonction, on créera aussi des cookies spécifiques à Google Analytics pour l'empêcher de fonctionner (voir la [documentation](https://developers.google.com/analytics/devguides/collection/analyticsjs/user-opt-out)). @@ -315,4 +315,4 @@ Si vous avez bien suivi cet article et si vous l'avez adapté aux besoins de vot Évidemment un site comme celui-ci (un simple blog) est un cas simple où il y a peu voire pas de cookies posés du tout. En réalité, votre site est déjà quasiment prêt pour la future mise en application de la RGPD à quelques ajustements près. Si vous ne savez pas ce qu'est la RGPD, c'est en gros une évolution de la directive européenne dont nous avons parlé précédemment vers une version XXL. Pour de plus amples informations, je vous invite à lire l'excellent article de mon collègue [Pouzor](/authors/pouzor/) : [RGPD - Ce qu'il va changer](/fr/rgpd-ce-qu-il-va-changer/). -![Cookie Monster]({{site.baseurl}}/assets/2018-01-17-cookie-banner/cookie-monster.jpg) +![Cookie Monster]({BASE_URL}/imgs/articles/2018-01-17-cookie-banner/cookie-monster.jpg) diff --git a/_articles/fr/2018-01-29-neo4j-et-symfony.md b/_articles/fr/2018-01-29-neo4j-et-symfony.md index bf8524a3c..8c08c8f0d 100644 --- a/_articles/fr/2018-01-29-neo4j-et-symfony.md +++ b/_articles/fr/2018-01-29-neo4j-et-symfony.md @@ -32,7 +32,7 @@ Un graphe est composé de deux choses : - des noeuds qui contiennent la donnée dans un format simple de propriété du noeud ; - des relations qui permettent de lier les noeuds entre eux. Les relations aussi peuvent avoir des propriétés, et donc contenir de la donnée. -![Graph]({{site.baseurl}}/assets/2018-01-29-neo4j-et-symfony/graph.png) +![Graph]({BASE_URL}/imgs/articles/2018-01-29-neo4j-et-symfony/graph.png) > Mais cela permet quoi ? @@ -51,7 +51,7 @@ Si vous êtes sur un environnement Ubuntu vous n'avez qu'à suivre les instructi Une fois l'installation terminée, vous aurez accès à l'interface web qui est très pratique, elle est disponible [ici](http://127.0.0.1:7474/browser/). -![Interface]({{site.baseurl}}/assets/2018-01-29-neo4j-et-symfony/interface.png) +![Interface]({BASE_URL}/imgs/articles/2018-01-29-neo4j-et-symfony/interface.png) ## Cypher, le requêtage simple @@ -119,7 +119,7 @@ MATCH (n:Person) RETURN n ...vous devez voir cela : -![person]({{site.baseurl}}/assets/2018-01-29-neo4j-et-symfony/person.png) +![person]({BASE_URL}/imgs/articles/2018-01-29-neo4j-et-symfony/person.png) Pour finir, nous allons récupérer toutes les relations avec `Emil`. @@ -359,7 +359,7 @@ Il ne vous reste plus qu'à afficher la page complète ! ``` -![arbo]({{site.baseurl}}/assets/2018-01-29-neo4j-et-symfony/arbo.png) +![arbo]({BASE_URL}/imgs/articles/2018-01-29-neo4j-et-symfony/arbo.png) ## Conclusion diff --git a/_articles/fr/2018-03-15-retour-d-experience-sur-bem.md b/_articles/fr/2018-03-15-retour-d-experience-sur-bem.md index c007db0ce..b5547f0f8 100644 --- a/_articles/fr/2018-03-15-retour-d-experience-sur-bem.md +++ b/_articles/fr/2018-03-15-retour-d-experience-sur-bem.md @@ -47,7 +47,7 @@ Au sein des **Modifiers** il faut distinguer : La première difficulté inhérente à cette méthodologie est de savoir identifier un **Block**. Dans la documentation il est dit que toutes zones logiques et fonctionnellement indépendantes sont des **Blocks**. -![BEM_image]({{site.baseurl}}/assets/2018-03-15-retour-d-experience-sur-bem/bem_image.png) +![BEM_image]({BASE_URL}/imgs/articles/2018-03-15-retour-d-experience-sur-bem/bem_image.png) Un **Block** peut contenir d’autres **Blocks**, il peut ne pas contenir d’**Elements** et peut être utilisé plusieurs fois sur la même page. Le gros plus de cette méthode est d’avoir une structure simple sur 2 niveaux et un système de nommage permettant d’identifier facilement les **Elements** de nos pages par des noms de classe uniques et exclusifs. diff --git a/_articles/fr/2018-03-21-calabash-cucumber.md b/_articles/fr/2018-03-21-calabash-cucumber.md index 7d5074068..0fccbbc70 100644 --- a/_articles/fr/2018-03-21-calabash-cucumber.md +++ b/_articles/fr/2018-03-21-calabash-cucumber.md @@ -38,7 +38,7 @@ En clair, Cucumber vous permet d'exprimer le comportement de votre application e Exemple : -![Cucumber]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/cucumber-feature@2x.png) +![Cucumber]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/cucumber-feature@2x.png) ### Comment ça marche ? @@ -46,7 +46,7 @@ Un morceau de code Ruby est exécuté pour chaque ligne de test. Le diagramme suivant illustre comment toutes ces pièces s'emboîtent : -![cucumberSchema]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/image-02.png) +![cucumberSchema]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/image-02.png) Les `steps definitions` utilisent les API Calabash (Ruby) pour interagir avec l'application lorsqu'elle s'exécute sur un périphérique ou dans le simulateur. Les API contiennent des méthodes pour simuler des actions de l'utilisateur, telles que toucher l'écran, entrer du texte dans des champs de texte, etc. @@ -65,11 +65,11 @@ Cette architecture permet d'écrire des tests Cucumber pour presque n'importe qu Schéma Cucumber / Calabash: -![stackCucumberCalabash]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/image-01.png) +![stackCucumberCalabash]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/image-01.png) Schéma sur le fonctionnement sur device / simulateur. -![iosCalabash]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/calabash-ios-stack.png) +![iosCalabash]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/calabash-ios-stack.png) Le framework Calabash fournit un petit serveur HTTP intégré qui permet aux tests de communiquer et de contrôler l'application pendant qu'elle s'exécute sur le périphérique. Cependant, le framework Calabash ne doit pas être inclus dans les versions Release de l'IPA. @@ -197,7 +197,7 @@ Il rédige donc les scénarios d'acceptation de test de chaque écran dans des f Aide : -![Gerhkins]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/gherkincheat.png) +![Gerhkins]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/gherkincheat.png) > Les scripts Gherkins ci-dessous peuvent être optimisés mais j'ai préféré vous présenter quelque chose de simple :) @@ -444,7 +444,7 @@ end Si vous lancez votre test `bundle exec cucumber -n Home` pour `home.feature` vous devriez obtenir quelque chose comme ça. -![homeFeatureCli]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/screen_home_feature.png) +![homeFeatureCli]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/screen_home_feature.png) Cool non ? :) @@ -456,12 +456,12 @@ Pour cet article j'ai mis sur [github](https://github.com/Prims47/CalabashCucumb ### Screenshots -![appHome]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/simuHome.png) -![appLogin]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/SimuLogin.png) -![appLoginError]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/SimoLoginError.png) -![appRegister]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/SimuRegister.png) -![appRegisterError]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/SimuRegisterError.png) -![appHome2]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/SmuHome2.png) +![appHome]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/simuHome.png) +![appLogin]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/SimuLogin.png) +![appLoginError]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/SimoLoginError.png) +![appRegister]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/SimuRegister.png) +![appRegisterError]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/SimuRegisterError.png) +![appHome2]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/SmuHome2.png) ### Login Validation @@ -628,28 +628,28 @@ Si le bouton `Create a new run` s'affiche, choisissez-le. Vous devez uploader votre .ipa précédemment créée : -![uploadIpa]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/upload_ipa.png) +![uploadIpa]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/upload_ipa.png) Amazon nous indique quelques informations à propos de votre build : -![uploadIpaVersion]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/upload_ipa_version.png) +![uploadIpaVersion]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/upload_ipa_version.png) **Step 3 - Uploader vos tests Calabash** Sélectionnez Calabash et uploadez votre dossier .zip : -![uploadCalabash]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/upload_calabash.png) +![uploadCalabash]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/upload_calabash.png) **Step 4 - Pool de Devices** J'ai délibérément mis mon build en target iOS 10.3, c'est pourquoi la sélection `Top Devices` d'Amazon apparaît en rouge. -![poolError]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/pool_error.png) +![poolError]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/pool_error.png) Cependant, vous pouvez bien sûr créer votre propre pool. -![poolCreate]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/pool_create.png) -![poolSuccess]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/pool_success.png) +![poolCreate]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/pool_create.png) +![poolSuccess]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/pool_success.png) **Step 5 - Configuration Devices** @@ -662,19 +662,19 @@ En effet, on remarque via l'image ci-dessous qu'Amazon nous permet de : * Pré-sélectionner les paramètres régionaux de l'appareil pour l'exécution ; * Pré-définir le profil réseau de l'exécution, choisissez un profil dans `Network profil` ou choisissez `Create a new profile` pour créer le vôtre. -![deviceState]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/device_state.png) +![deviceState]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/device_state.png) **Step 6 - Run** Avant de lancer les tests, Amazon vous demande le temps (en minutes) maximum par devices qu'il doit prendre. Bien évidemment, ce temps dépend de vos tests ; dans mon cas, j'ai mis une valeur large de 30 minutes. -![runExec]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/run_exec_time.png) +![runExec]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/run_exec_time.png) ### Tableau de bord Au bout de X minutes, lorsque vos tests sont terminés, si vous allez dans le détail de votre projet, Amazon va créer un dashboard hyper complet. -![dashboard]({{ site.baseurl }}/assets/2018-03-01-calabash-cucumber/dashboard.png) +![dashboard]({BASE_URL}/imgs/articles/2018-03-01-calabash-cucumber/dashboard.png) Dans notre cas, Amazon nous montre directement quel scénario ne fonctionne pas. En quelques clics, nous pouvons rentrer en détails sur chaque device et chaque scénario. Amazon nous fournit pas mal d’éléments comme : diff --git a/_articles/fr/2018-03-28-codelabs-under-the-hood.md b/_articles/fr/2018-03-28-codelabs-under-the-hood.md index 92e6cfa46..b46285009 100644 --- a/_articles/fr/2018-03-28-codelabs-under-the-hood.md +++ b/_articles/fr/2018-03-28-codelabs-under-the-hood.md @@ -20,7 +20,7 @@ keywords: Après plusieurs mois de travail acharné, nous avons le plaisir de vous annoncer la sortie d'Eleven Codelabs ! -![Codelabs]({{site.baseurl}}/assets/2018-03-28-codelabs-under-the-hood/codelabs.png) +![Codelabs]({BASE_URL}/imgs/articles/2018-03-28-codelabs-under-the-hood/codelabs.png) Au début de l'été 2017, l'idée d'une plateforme de tutoriels "Made in Eleven Labs" a commencé à prendre forme, en même temps que la création du projet sur github. En juillet 2017, douze astronautes se rassemblent pour brainstormer autour des features qui définiront le MVP. Le projet vise à proposer du contenu plus complet et plus didactique que les articles déjà proposés sur le [Blog](https://blog.eleven-labs.com/) : des tutoriels à suivre étape après étape. @@ -335,11 +335,11 @@ Ce que vous venez de lire est une version très simplifiée du process de géné Et voici la représentation React des composants générés : -![React components result]({{site.baseurl}}/assets/2018-03-28-codelabs-under-the-hood/react-result.png) +![React components result]({BASE_URL}/imgs/articles/2018-03-28-codelabs-under-the-hood/react-result.png) Voici le HTML correspondant : -![Html result]({{site.baseurl}}/assets/2018-03-28-codelabs-under-the-hood/html-result.png) +![Html result]({BASE_URL}/imgs/articles/2018-03-28-codelabs-under-the-hood/html-result.png) ### Déploiement diff --git a/_articles/fr/2018-03-28-gestion-d-environnement-avec-gradle.md b/_articles/fr/2018-03-28-gestion-d-environnement-avec-gradle.md index df50364e2..7f43fa853 100644 --- a/_articles/fr/2018-03-28-gestion-d-environnement-avec-gradle.md +++ b/_articles/fr/2018-03-28-gestion-d-environnement-avec-gradle.md @@ -35,7 +35,7 @@ Si vous regardez votre projet, vous devriez voir deux fichiers build.gradle. Le Nous allons nous intéresser au deuxieme fichier qui correspond à notre module applicatif. Jetons-y un oeil : -![Gradle init]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I1.jpg) +![Gradle init]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I1.jpg) Sans effort, gradle genère un fichier build.gradle contenant une configugarion par défaut, defaultConfig, où sont déclarés : votre applicationId, vos versions de SDK et autres, ainsi que deux buildTypes debug et release. @@ -43,13 +43,13 @@ Ces deux BuildTypes ont pour but de séparer vos versions publiables de vos vers Ici modifions un peu le fichier, nous allons donner un nom de package différent à notre version de debug, et changer la valeur de minifyEnabled qui par défaut est à false, donc ne prenez pas en compte les fichiers de config proguard ! -![Gradle minifyEnabled]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I2.jpg) +![Gradle minifyEnabled]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I2.jpg) Géneralement, notre buildType realease va signer l'application. Il est aussi possible que vous ayez besoin de le faire en debug, mais disons que globalement c'est plus souvent un rôle qui incombe au buildType release. Nous allons donc définir une configuration de signature, signingConfigs, à notre buildtype release pour signer automatiquement notre apk à la compilation ! (Je passe à la trappe la création d'une clé pour signer l'apk, nous éloignant un peu du sujet principal, vous trouverez tout ce qu'il vous faut [ici](https://developer.android.com/studio/publish/app-signing.html) ) -![Gradle signingConfig]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I3.jpg) +![Gradle signingConfig]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I3.jpg) ## Flavor & Flavor Dimension @@ -60,11 +60,11 @@ Imaginons que vous ayez différents environnements pour votre application, qui d Je vous montre ? Allez, on va donc déclarer ce qu'on appelle une dimension de flavor, ici "server" ! -![Gradle dimension]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I4.jpg) +![Gradle dimension]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I4.jpg) Une fois cette dimension déclarée, nous allons créer nos flavors, Prod/Preprod/Dev, en précisant pour chacun de ces flavors qu'ils appartiennent à la dimension "server" : -![Gradle flavor]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I5.jpg) +![Gradle flavor]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I5.jpg) Après avoir sync le projet, vous devriez voir apparaitre dans vos Build Variants les 6 builds ( 3 flavors x 2 build types ) ! Mais la puissance des flavors ne s'arrete pas là ! Vous pouvez en effet rajouter des dimensions, et multiplier la modulation de votre application. @@ -75,7 +75,7 @@ Rien de plus simple ! On va définir une deuxième dimension, et défnir nos deu À noter tout de même qu'il y a une hiérarchie dans l'ordre de déclaration de vos dimensions. La première dimension déclarée étant plus importante que la seconde etc... -![Gradle double dimension]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I6.png) +![Gradle double dimension]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I6.png) Maintenant, vous êtes capable de coder sur vos deux versions d'application en même temps, tout en ayant la possibilité de générer vos versions pour l'ensemble de vos environnements de développement ! Mais comment personnaliser le code pour toutes ces versions coexistantes en parallèle ? @@ -91,7 +91,7 @@ Un exemple simple : ici je vais modifier la valeur du string app_name pour chacu Mais il aurait été possible de faire varier le design, les dimensions, modifier les icônes en fonction des versions et j'en passe : -![Gradle res]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I7.png) +![Gradle res]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I7.png) À savoir, à la compilation, sur les fichiers contenus dans votre répertoire main vont se merge tous les fichiers contenus dans les répertoires de vos flavors. Si il y a des clés, des noms de fichiers identiques, les valeurs des répertoires de flavor vont écraser celles contenues dans votre repertoire main. Ici la valeur d'app_name va, en fonction du build que vous choisissez, être remplacée ou non par les valeurs de nos flavors ! @@ -101,13 +101,13 @@ Android génère une classe BuildConfig, accessible partout, qui va vous permett Imaginons qu'une feature soit disponible uniquement en version complète, nous allons vérifier avant son lancement si l'on se trouve bien dans une version full, ou si l'on doit afficher un log d'erreur pour notifier que l'utilisateur doit passer à la version complète : -![Gradle BuildConfig]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I8.png) +![Gradle BuildConfig]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I8.png) Encore plus fort, il est possible de déclarer directement dans votre fichier build.gradle des champs, BuildFields, qui seront accessibles depuis votre classe BuildConfig. Alors là, encore à vous d'y trouver une utilité. Je vous propose un petit exemple simple qui serait l'activation de vos logs ou non en fonction de votre build type : -![Gradle bluildFields]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I9.png) +![Gradle bluildFields]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I9.png) Imaginons que vous ayez centralisé l'envoi de vos logs dans une classe LogManager, un simple accès à votre paramètre LOG dans BuildConfig va vous permettre de savoir si oui ou non, l'appel à votre classe va renvoyer un Log ou pas ! @@ -116,10 +116,10 @@ Allons plus loin. Imaginons qu'en fonction des versions, le code soit complétem Pour remédier à ça il est possible de créer plusieurs versions de vos classes en fonction du flavor selectionné. Mais à la différence des fichiers de ressources vu précédemment, si vous voulez pouvoir personnaliser une classe en particulier, et la rendre disponible dans tout votre code sans devoir spécifier à quel package elle appartient, il va falloir la retirer de votre répertoire main et créer une version pour chaque flavor d'une même dimension. Car à la différence des fichiers de ressources qui vont se merge avec ceux existants à la compilation, ici Android va juste sélectionner quelle classe appeler en fonction de votre build. -![Gradle duplicate]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I10.jpg) +![Gradle duplicate]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I10.jpg) Ma classe ApiManager ici est disponible partout dans mon code et va pouvoir avoir un comportement différent en fonction du niveau de version de l'utilisateur en totale transparence au niveau de ma classe MainActivity ! -![Gradle use]({{site.baseurl}}/assets/2018-03-28-gestion-d-environnement-avec-gradle/I11.jpg) +![Gradle use]({BASE_URL}/imgs/articles/2018-03-28-gestion-d-environnement-avec-gradle/I11.jpg) C'est tout pour moi, j'espère que vous aurez apprécié ce petit tour d'horizon du potentiel de la gestion de vos environemments avec Gradle, éclatez-vous bien et bon voyage ! diff --git a/_articles/fr/2018-04-05-api-platform.md b/_articles/fr/2018-04-05-api-platform.md index 6cc9e79fe..92fb28f05 100644 --- a/_articles/fr/2018-04-05-api-platform.md +++ b/_articles/fr/2018-04-05-api-platform.md @@ -73,7 +73,7 @@ Vous allez devoir accepter d'ajouter une exception de sécurité dans votre navi Si vous voyez cette belle page d'accueil, c'est que tout s'est bien passé ! -![homepage]({{ site.baseurl }}/assets/2018-04-05-api-platform/ready.png) +![homepage]({BASE_URL}/imgs/articles/2018-04-05-api-platform/ready.png) ## Création de modèle de données @@ -174,7 +174,7 @@ Allons à cette adresse [https://localhost:8443](https://localhost:8443) Vous devriez voir cette page, qui décrit toutes les actions possibles sur cette ressource : -![docapi]({{ site.baseurl }}/assets/2018-04-05-api-platform/apidoc.png) +![docapi]({BASE_URL}/imgs/articles/2018-04-05-api-platform/apidoc.png) Oh joie! Api Platform intègre une version personnalisée de [Swagger UI](https://swagger.io/swagger-ui/), qui permet de documenter vos ressources et par la même occasion de les tester, mais propose également une alternative avec [NelmioApiDoc Bundle](https://github.com/nelmio/NelmioApiDocBundle). Le format par défaut de l'api est le [JSON-LD](https://json-ld.org/) avec l'extension [Hydra](http://www.hydra-cg.com/), qui est une version plus évoluée que le JSON standard donnant plus d'informations sur la ressource ainsi que les opérations possibles sur cette dernière. L'api supporte également les formats courants tels que le JSON, XML, HAL, JSONAPI et très récemment le [graphQL](https://graphql.org/) ...que nous allons bien évidemment nous empresser d'activer ! @@ -189,7 +189,7 @@ docker-compose exec php composer req webonyx/graphql-php ``` Et voilà ! L'interface graphique GraphiQL est disponible ici [https://localhost:8443/graphql](https://localhost:8443/graphql) -![graphql]({{ site.baseurl }}/assets/2018-04-05-api-platform/graphql.png) +![graphql]({BASE_URL}/imgs/articles/2018-04-05-api-platform/graphql.png) Rien de mieux pour commencer à se faire les dents sur ce super langage. ## Le Backend @@ -197,7 +197,7 @@ Rien de mieux pour commencer à se faire les dents sur ce super langage. API Platform intègre un backend utilisant la librairie [Admin On Rest](https://github.com/marmelab/admin-on-rest), un client en React avec [material design](https://github.com/material-components/material-components-web) qui se bind directement sur une api, et construit ses vues en fonction des ressources disponibles et des opérations permises : [https://localhost:444](https://localhost:444) -![admin]({{ site.baseurl }}/assets/2018-04-05-api-platform/backend.png) +![admin]({BASE_URL}/imgs/articles/2018-04-05-api-platform/backend.png) En sachant que ce backend est entièrement paramétrable. @@ -211,7 +211,7 @@ Créons notre application JavaScript : docker-compose exec client generate-api-platform-client ``` -![console]({{ site.baseurl }}/assets/2018-04-05-api-platform/consolegen.png) +![console]({BASE_URL}/imgs/articles/2018-04-05-api-platform/consolegen.png) Ajoutons maintenant les routes et les reducers générés dans index.js comme ceci : @@ -265,7 +265,7 @@ Redux Form pour gérer les formulaires et Redux Thunk pour gérer les requêtes Nous pouvons maintenant aller à l'url de la vue `list` de notre ressource `shoppingItem`: [https://localhost/shopping_items/](https://localhost/shopping_items/) Parfait, vous avez votre liste de courses en react/redux qui va bien : -![listecourse]({{ site.baseurl }}/assets/2018-04-05-api-platform/listcourse.png) +![listecourse]({BASE_URL}/imgs/articles/2018-04-05-api-platform/listcourse.png) ## Pour conclure diff --git a/_articles/fr/2018-04-11-rabbitmq-partie-2-la-maitrise.md b/_articles/fr/2018-04-11-rabbitmq-partie-2-la-maitrise.md index bd11b0557..e2d8c1262 100644 --- a/_articles/fr/2018-04-11-rabbitmq-partie-2-la-maitrise.md +++ b/_articles/fr/2018-04-11-rabbitmq-partie-2-la-maitrise.md @@ -75,7 +75,7 @@ Sur le backend d'auth par défaut (`rabbit_auth_backend_internal`), les permissi * Write regexp * Read regexp -![RabbitMQ Permissions]({{site.baseurl}}/assets/2018-04-11-rabbitmq-partie-2-la-maitrise/rabbitmq-permissions.png) +![RabbitMQ Permissions]({BASE_URL}/imgs/articles/2018-04-11-rabbitmq-partie-2-la-maitrise/rabbitmq-permissions.png) > 🚀 Pour une utilisation plus simple des regexp je vous conseille d'avoir une vraie stratégie de nommage des `exchanges`/`queues` > avec des préfixes/segments/suffixes. D'une part vous pourrez plus facilement identifier qui a créé les ressources mais aussi qui les consomme. @@ -89,7 +89,7 @@ Je vous laisse consulter le [tableau de répartition des actions par ressource]( Les policies sont des règles de configurations qui s'appliquent aux `exchanges` et aux `queues` (dont le nom matche une regexp) afin de diminuer la redondance de configuration mais aussi et surtout de pouvoir changer une `policy` sans avoir à détruire et recréer la ressource (`exchange`/`queue`). Certaines options de configuration d'une `policy` sont spécifiques aux `exchanges` et d'autres aux `queues`. -![RabbitMQ Policies]({{site.baseurl}}/assets/2018-04-11-rabbitmq-partie-2-la-maitrise/rabbitmq-policies.png) +![RabbitMQ Policies]({BASE_URL}/imgs/articles/2018-04-11-rabbitmq-partie-2-la-maitrise/rabbitmq-policies.png) Les `Policies` peuvent être utilisées pour configurer : @@ -142,7 +142,7 @@ Configurez ensuite votre queue `queue1` avec `x-dead-letter-exchange: "waiting_5 > ⚠️ le x-dead-letter-routing-key doit être configuré avec le nom de la queue. -![RabbitMQ Retry]({{site.baseurl}}/assets/2018-04-11-rabbitmq-partie-2-la-maitrise/rabbitmq-retry.jpg) +![RabbitMQ Retry]({BASE_URL}/imgs/articles/2018-04-11-rabbitmq-partie-2-la-maitrise/rabbitmq-retry.jpg) Avec cette configuration, quand le consumer NACK le message, RabbitMQ redirige le message dans l'exchange `waiting_5` (fanout) qui va donc router ce message dans la queue `waiting_5`. La queue `waiting_5` va attendre 5 secondes avant d'`expired` le message, @@ -156,7 +156,7 @@ Un `poison message` c'est un message que le consumer rejettera (NACK) à chaque Afin de traiter les poisons messages il faut que le consumer regarde dans les properties du message afin de vérifier que le nombre de tentatives n'a pas été atteint. -![RabbitMQ Retry]({{site.baseurl}}/assets/2018-04-11-rabbitmq-partie-2-la-maitrise/rabbitmq-x-death-header.jpg) +![RabbitMQ Retry]({BASE_URL}/imgs/articles/2018-04-11-rabbitmq-partie-2-la-maitrise/rabbitmq-x-death-header.jpg) > Si le nombre de retry a été atteint il faudra loguer une erreur et ACK le message. diff --git a/_articles/fr/2018-04-18-livre-blanc-architecture.md b/_articles/fr/2018-04-18-livre-blanc-architecture.md index 87fa7087f..cd7234095 100644 --- a/_articles/fr/2018-04-18-livre-blanc-architecture.md +++ b/_articles/fr/2018-04-18-livre-blanc-architecture.md @@ -31,7 +31,7 @@ Après plusieurs expériences en tant qu'architecte, il m'a semblé intéressant * Aux développeurs, qui pourront avoir une vision plus claire du rôle d'un architecte sur leur projet, et comprendre dans quels cas certains patterns peuvent être appliqués et ce qu'ils engendrent. * Enfin, à toute personne dans le domaine du web (chefs de projets, product owners, ...), qui pourra ainsi élargir sa vision de la technique et cerner en quoi un architecte pourra l'aider à répondre au mieux aux besoins et à construire une application plus adaptée. -[![Télécharger livre blanc]({{site.baseurl}}/assets/2018-04-05-livre-blanc-architecture/button.jpg)](http://bit.ly/LivreBlancArchitectureLogicielle) +[![Télécharger livre blanc]({BASE_URL}/imgs/articles/2018-04-05-livre-blanc-architecture/button.jpg)](http://bit.ly/LivreBlancArchitectureLogicielle) Des questions, ou simplement envie d'échanger sur ce sujet ? Contactez-moi : vcomposieux(at)eleven-labs.com Vous souhaitez partager vos connaissances sur ce sujet (ou un autre) ? Faites-le sur [Codelabs](https://codelabs.eleven-labs.com) ! diff --git a/_articles/fr/2018-05-04-https-part-1.md b/_articles/fr/2018-05-04-https-part-1.md index 108b53d71..94d8a3227 100644 --- a/_articles/fr/2018-05-04-https-part-1.md +++ b/_articles/fr/2018-05-04-https-part-1.md @@ -36,7 +36,7 @@ Le HTTP (HyperText Transfer Protocol) au sens large, est le protocole de communi Sans la couche sécurisée, chiffrée du HTTPS, toute la communication est faite “en clair”, c’est à dire potentiellement lisible voire modifiable par quiconque se trouvant entre vous (le client) et le serveur. Le HTTPS, en chiffrant la communication grâce à du SSL/TLS protège les données voyageant au travers du HTTP en ne les rendant compréhensibles que par le destinataire. Pour s’assurer que le serveur destinataire est bien celui qu’il prétend, le HTTPS authentifie la cible grâce aux certificats, appelés généralement “Certificats SSL”. -![HTTP-VS-HTTPS]({{site.baseurl}}/assets/2018-05-09-https-part-01/http-vs-https.png) +![HTTP-VS-HTTPS]({BASE_URL}/imgs/articles/2018-05-09-https-part-01/http-vs-https.png) ## Le HTTPS : pourquoi est-ce si important ? @@ -45,7 +45,7 @@ Sans la couche sécurisée, chiffrée du HTTPS, toute la communication est faite Comme je le disais précédemment, en simple HTTP, toute la communication est en clair, donc pleinement accessible à qui que ce soit se trouvant entre vous et le serveur. Tirer profit d’une telle situation correspond à ce que l’on appelle une attaque “Man-in-the-middle”. Regardez plutôt le schéma ci-dessous : -![man-in-the-middle]({{site.baseurl}}/assets/2018-05-09-https-part-01/man-in-the-middle.png) +![man-in-the-middle]({BASE_URL}/imgs/articles/2018-05-09-https-part-01/man-in-the-middle.png) Ici, Helen communique avec le site “http://www.example.com” en simple HTTP. Ainsi, la teneur de son mot de passe envoyé est pleinement visible au yeux de l’attaquant. Carol, visiblement plus avisée ou au minimum plus chanceuse, communique avec le site "https://www.example.com” en HTTPS. De cette manière, l’attaquant ne voit que la version chiffrée et donc inutile du mot de passe. @@ -59,7 +59,7 @@ En tant qu’internaute, seule votre vigilance vous sauvera. Si les sites que vo Il revient donc aux gérants des sites que vous fréquentez de mettre en place le HTTPS. Aujourd’hui (mai 2018), environ 70% des sites internet visités sont d’ores et déjà chiffrés d’après les statistiques de Mozilla Firefox (visible notamment sur la page [télémétrie de Let’s Encrypt](https://letsencrypt.org/stats/)) : -![graphique-progression-HTTPS]({{site.baseurl}}/assets/2018-05-09-https-part-01/graph_HTTPS_use.png) +![graphique-progression-HTTPS]({BASE_URL}/imgs/articles/2018-05-09-https-part-01/graph_HTTPS_use.png) ## Le HTTPS : en tant qu’administrateur, est-ce compliqué à mettre en place ? diff --git a/_articles/fr/2018-05-11-retour-d-experience-android-maker.md b/_articles/fr/2018-05-11-retour-d-experience-android-maker.md index cb9fdf8c4..d980fa8e1 100644 --- a/_articles/fr/2018-05-11-retour-d-experience-android-maker.md +++ b/_articles/fr/2018-05-11-retour-d-experience-android-maker.md @@ -7,7 +7,6 @@ title: Retour d'Expérience Android Maker 2018 excerpt: >- Cette année a eu lieu la deuxième édition de l'Android Maker. Avec l'astronaute Omar, nous vous proposons un petit retour sur ce qu'on y a vu ! -cover: /img/covers/StockSnap_1S8SVUVUNU.jpg categories: [] authors: - babas diff --git a/_articles/fr/2018-05-16-deboguer-vos-applications-dockerisees-avec-phpstorm.md b/_articles/fr/2018-05-16-deboguer-vos-applications-dockerisees-avec-phpstorm.md index 804bd3b53..fe3642a91 100644 --- a/_articles/fr/2018-05-16-deboguer-vos-applications-dockerisees-avec-phpstorm.md +++ b/_articles/fr/2018-05-16-deboguer-vos-applications-dockerisees-avec-phpstorm.md @@ -8,7 +8,6 @@ excerpt: >- Aujourd'hui je vais vous expliquer comment lancer vos tests unitaires et les déboguer avec PhpStorm, le tout sans avoir besoin d'installer php, phpunit, ou Xdebug sur votre machine... -cover: /img/covers/StockSnap_X7ZB66F677.jpg categories: - php authors: @@ -56,20 +55,20 @@ Vous aurez alors accès à un container nommé `test-app` faisant tourner un `ph > Note : Vous pouvez également effectuer un `ctrl`+`Shift`+`a` et taper **Docker** dans le champ de recherche comme ceci : > -> ![Quick Docker settings access]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/quick-docker-settings-access.png) +> ![Quick Docker settings access]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/quick-docker-settings-access.png) Nous arrivons alors sur la page suivante, qui va nous permettre d'ajouter notre interpréteur `docker` : -![Docker plugin settings page]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/docker-plugin-settings-page.png) +![Docker plugin settings page]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/docker-plugin-settings-page.png) -- Cliquez sur ![Plus phpstorm button]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/plus-phpstorm-button.png) pour ajouter une nouvelle configuration Docker et indiquer à phpStorm comment se connecter au démon Docker. +- Cliquez sur ![Plus phpstorm button]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/plus-phpstorm-button.png) pour ajouter une nouvelle configuration Docker et indiquer à phpStorm comment se connecter au démon Docker. > Le message "Connection successful" doit apparaître. -![Docker configuration]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/docker-configuration.png) +![Docker configuration]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/docker-configuration.png) - Allons maintenant dans **Tools** pour fournir à phpStorm les interpréteurs de `docker` et `docker-compose` -![Docker interpreters configuration]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/docker-interpreters-configuration.png) +![Docker interpreters configuration]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/docker-interpreters-configuration.png) Voilà tout pour le plugin Docker. Si vous souhaitez en savoir plus sur son utilisation, je vous invite à visiter [cette page](https://www.jetbrains.com/help/idea/docker.html). @@ -125,38 +124,38 @@ services: Ici, on notera la présence de la variable d'environnement `PHP_IDE_CONFIG`. Nous allons utiliser la valeur de `serverName` pour indiquer à phpStorm le nom du serveur sur lequel il va écouter les connexions. Pour ce faire, rendez-vous dans **File/Settings.../Languages & Framework/PHP*** -![PHPStorm Settings PHP]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-settings-php.png) +![PHPStorm Settings PHP]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-settings-php.png) -- Cliquez sur ![PHPStorm Browse button]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-browse-button.png) à droite de **CLI Interpreter** +- Cliquez sur ![PHPStorm Browse button]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-browse-button.png) à droite de **CLI Interpreter** - Dans **Remote** sélectionnez **Docker** (le serveur que nous avons créé précédemment est automatiquement sélectionné) - Dans **Image name** sélectionnez **dockerremotephpdebugingexample_test_app:latest** -![PHPStorm Settings CLI interpreter]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-settings-CLI-interpreter.png) +![PHPStorm Settings CLI interpreter]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-settings-CLI-interpreter.png) PhpStorm va alors automatiquement récupérer l'image si elle n'est pas déjà présente, et va détecter la version de `php` présente sur le container ainsi que ses extensions. -![PHPStorm Settings PHP]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-settings-php.png) +![PHPStorm Settings PHP]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-settings-php.png) - sélectionnez l'interpréteur que nous venons de créer... PhpStorm va de nouveau détecter (ou au moins essayer...) le mapping entre le chemin du projet en local, et celui sur le container. Je dis "essayer" car vous devrez peut-être configurer manuellement ce mapping de la manière suivante : -- Dans la partie `Docker container` cliquez sur les ![PHPStorm browse buttons]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-browse-button.png) +- Dans la partie `Docker container` cliquez sur les ![PHPStorm browse buttons]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-browse-button.png) Vous pouvez alors modifier le mapping entre le volume docker et le chemin en local (ici `/home/rmasclef/Documents/projects/ElevenLabs/DockerRemotePhpDebugingExample` doit être bindé avec `var/www/TEST_APP` étant donné que nous avons effectué ce binding dans le [Dockerfile](https://github.com/rmasclef/docker-remote-php-debuging/blob/master/docker-compose.yml#L8). -![PHPStorm]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm.png) +![PHPStorm]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm.png) ### PHPUnit Ici, nous allons faire en sorte de pouvoir lancer nos tests unitaires sur le container en utilisant une simple combinaison de touches :) - Rendez-vous dans **Files\Settings...\Languages & framework\PHP\Test frameworks**. -- Cliquez sur ![Plus phpstorm button]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/plus-phpstorm-button.png) puis **phpUnit by remote interpreter**. +- Cliquez sur ![Plus phpstorm button]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/plus-phpstorm-button.png) puis **phpUnit by remote interpreter**. - Sélectionnez l'interpréteur php que nous avons créé précédemment. -![PHPStorm PHPUnit by remote interpreter]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-PHPUnit-by-remote-interpreter.png) +![PHPStorm PHPUnit by remote interpreter]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-PHPUnit-by-remote-interpreter.png) - Ajoutez `/var/www/TEST_APP/vendor/autoload.php` en tant que path vers le fichier d'autoload composer -![PHPStorm PHPUnit interpreter]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-PHPUnit-interpreter.png) +![PHPStorm PHPUnit interpreter]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-PHPUnit-interpreter.png) PhpStorm doit alors détecter la version de phpunit installée sur le container. > Note : Vous pouvez également ajouter un fichier de configuration phpunit (ici `/var/www/TEST_APP/phpunit.xml.dist`). @@ -164,13 +163,13 @@ PhpStorm doit alors détecter la version de phpunit installée sur le container. **À présent, vous pouvez lancer les tests unitaires sur votre container via phpStorm** ### PHP Remote debugger -![PHPStorm menu tests]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-menu-tests.png) +![PHPStorm menu tests]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-menu-tests.png) -- Cliquez sur ![Plus phpstorm button]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/plus-phpstorm-button.png) puis **PHP remote debug** +- Cliquez sur ![Plus phpstorm button]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/plus-phpstorm-button.png) puis **PHP remote debug** - Donnez un nom à cette configuration -- Cliquez sur ![PHPStorm browse buttons]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-browse-button.png) afin d'ajouter un serveur de débogage +- Cliquez sur ![PHPStorm browse buttons]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-browse-button.png) afin d'ajouter un serveur de débogage -![PHPStorm Settings Server]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-settings-server.png) +![PHPStorm Settings Server]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-settings-server.png) **/!\ Ici, il faut mettre en nom de serveur le nom que nous avons mis dans la variable d'environnement `PHP_IDE_CONFIG`** @@ -178,7 +177,7 @@ Notez également qu'il faut ajouter le mapping entre notre environnement local e Sélectionnez le serveur précédemment créé et ajoutez l'IDE key qui est renseignée dans le fichier de configuration [xdebug.ini](https://github.com/rmasclef/docker-remote-php-debuging/blob/master/xdebug.ini#L5). -![PHPStorm Remote debug configuration]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-remote-debug-configuration.png) +![PHPStorm Remote debug configuration]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-remote-debug-configuration.png) Félicitations ! Vous êtes maintenant capable de déboguer votre application sans avoir php, phpunit, Xdebug ou tout autre librairie sur votre environnement local. @@ -186,7 +185,7 @@ Félicitations ! Vous êtes maintenant capable de déboguer votre application sa Nous pouvons à présent lancer notre suite de tests unitaires sur notre container. Vous pouvez effectuer un clic droit sur le dossier `tests` puis cliquer sur `run tests` (ou `ctrl`+`Shift`+`F10`). > Vous pouvez également lancer les tests d'une seule classe ou encore lancer un test d'une classe en particulier. -![PHPStorm test class]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-test-class.png) +![PHPStorm test class]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-test-class.png) > Tips: Dans une classe de tests unitaires, si vous placez votre curseur à l'intérieur d'une fonction et que vous effectuez un `ctrl`+`Shift`+`F10`, alors seul ce test sera lancé. > > À l'inverse, si vous placez votre curseur à l'extérieur des fonctions et que vous effectuez un `ctrl`+`Shift`+`F10`, alors tous les tests de la classe seront lancés. @@ -195,7 +194,7 @@ Nous pouvons à présent lancer notre suite de tests unitaires sur notre contain Ajoutons un point d'arrêt dans notre code : -![PHPStorm IDE Break point]({{site.baseurl}}/assets/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-IDE-break-point.png) +![PHPStorm IDE Break point]({BASE_URL}/imgs/articles/2018-04-26-deboguer-vos-applications-dockerisees-avec-phpstorm/PHPStorm-IDE-break-point.png) Cette fonction est testée unitairement, nous allons donc pouvoir la déboguer... - Effectuez un clic droit sur le test unitaire que vous souhaitez déboguer puis cliquez sur **Debug 'testGetContent'**. Le débogueur se lance alors et arrive au point d'arrêt ajouté dans notre classe concrète :D diff --git a/_articles/fr/2018-05-21-let-s-think-outside-the-box.md b/_articles/fr/2018-05-21-let-s-think-outside-the-box.md index 27bdacdbb..ef1dbee62 100644 --- a/_articles/fr/2018-05-21-let-s-think-outside-the-box.md +++ b/_articles/fr/2018-05-21-let-s-think-outside-the-box.md @@ -407,10 +407,10 @@ Notre belle application se lance et que se passe-t-il ? Pour ce qui est visible dans le simulateur, on va voir notre application s'ouvrir, afficher notre dummy screen, puis ouvrir Safari et aller sur le site d'**Eleven-Labs**.
Hum, c'est étrange ça, ça me rappelle l'action que l'on avait définie dans le 3ème module.

-![AppVideo]({{ site.baseurl }}/assets/2018-05-21-let-s-think-outside-the-box/appvideo.gif)

+![AppVideo]({BASE_URL}/imgs/articles/2018-05-21-let-s-think-outside-the-box/appvideo.gif)

Si on se penche maintenant sur la console, on va pouvoir observer des outputs.
Mais dis-donc, ces outputs là, ce ne seraient pas ceux que l'on a définis pour nos deux premiers modules ?!.

-![ConsoleOutput]({{ site.baseurl }}/assets/2018-05-21-let-s-think-outside-the-box/console-output.png)

+![ConsoleOutput]({BASE_URL}/imgs/articles/2018-05-21-let-s-think-outside-the-box/console-output.png)

Je pense que vous commencez à comprendre le truc non ?
Toutes les actions que l'on a définies dans le **JSON** et qui existent vraiment dans le module se sont réalisées.
Plutôt cool non ? :) diff --git a/_articles/fr/2018-05-21-realm-coredata-killer.md b/_articles/fr/2018-05-21-realm-coredata-killer.md index 6a9f5c30e..14e033c15 100644 --- a/_articles/fr/2018-05-21-realm-coredata-killer.md +++ b/_articles/fr/2018-05-21-realm-coredata-killer.md @@ -45,9 +45,9 @@ Voici quelques éléments de réponses : Comme annoncé plus haut, l'un des avantages de Realm est la performance. -![realmCount]({{ site.baseurl }}/assets/2018-02-24-realm-coredata-killer/realm_benchmarks_count.png) -![realmInsert]({{ site.baseurl }}/assets/2018-02-24-realm-coredata-killer/realm_benchmarks_insert.png) -![realmQueries]({{ site.baseurl }}/assets/2018-02-24-realm-coredata-killer/realm_benchmarks_queries.png) +![realmCount]({BASE_URL}/imgs/articles/2018-02-24-realm-coredata-killer/realm_benchmarks_count.png) +![realmInsert]({BASE_URL}/imgs/articles/2018-02-24-realm-coredata-killer/realm_benchmarks_insert.png) +![realmQueries]({BASE_URL}/imgs/articles/2018-02-24-realm-coredata-killer/realm_benchmarks_queries.png) On voit clairement que Realm en a sous le capot ! C'est vraiment un point très important car de nos jours nous mettons en place des applications qui traitent de plus en plus de données et de ce fait nous ne pouvons absolument pas nous permettre d'avoir une application lente. @@ -637,7 +637,7 @@ Où 1 accès = configure, écrire, détruis Realm. Realm met à disposition un petit [outil](https://realm.io/products/realm-studio#download-studio) qui permet de visualiser votre base de donnée et d’interagir avec. -![realmStudo]({{site.baseurl}}/assets/2018-02-24-realm-coredata-killer/realm-studio.png) +![realmStudo]({BASE_URL}/imgs/articles/2018-02-24-realm-coredata-killer/realm-studio.png) Pratique, non ? diff --git a/_articles/fr/2018-06-26-rex-product-conf-2018.md b/_articles/fr/2018-06-26-rex-product-conf-2018.md index 4601d1ee6..6f7c9f53b 100644 --- a/_articles/fr/2018-06-26-rex-product-conf-2018.md +++ b/_articles/fr/2018-06-26-rex-product-conf-2018.md @@ -28,7 +28,7 @@ Les interventions ayant été nombreuses je ne reviendrai pas sur tout mais le c Roger Voice est une app’ permettant aux personnes atteintes de surdité de passer des appels téléphoniques grâce à la retranscription de la voix par écrit, et une retranscription de l’écrit par synthèse vocale. -![Logo Roger Voice]({{site.baseurl}}/assets/2018-06-26-rex-product-conf-2018/LogoRogerVoice.png) +![Logo Roger Voice]({BASE_URL}/imgs/articles/2018-06-26-rex-product-conf-2018/LogoRogerVoice.png) Ce qu’il fallait retenir : @@ -52,7 +52,7 @@ Pour en savoir plus sur RogerVoice c’est par [ici](https://rogervoice.com/fr/h **Par Rémi Guyot et Tristan Charvillat @BlaBlaCar** -![Logo BlablaCar]({{site.baseurl}}/assets/2018-06-26-rex-product-conf-2018/blablacar-logo.png) +![Logo BlablaCar]({BASE_URL}/imgs/articles/2018-06-26-rex-product-conf-2018/blablacar-logo.png) > *Quand les valeurs d’une entreprise sont tellement fortes qu’elles prennent naturellement part à la stratégie.* @@ -85,7 +85,7 @@ Pour en savoir d'avantage sur le sujet, c'est [ici](https://www.blablacar.fr/bla Clustree est un outil d’accompagnement RH basé sur l’IA proposant des recommandations de postes ou de candidats. -![Logo Clustree]({{site.baseurl}}/assets/2018-06-26-rex-product-conf-2018/logoclustree.png) +![Logo Clustree]({BASE_URL}/imgs/articles/2018-06-26-rex-product-conf-2018/logoclustree.png) La problématique évoquée est : «Comment créer un produit complexe, tout en le rendant simple pour l’utilisateur». @@ -107,7 +107,7 @@ Pour en savoir plus sur Clustree, suivez ce [lien](https://www.clustree.com/fr). Everoad est un service qui vise à révolutionner le transport routier de marchandise. -![Logo Everload]({{site.baseurl}}/assets/2018-06-26-rex-product-conf-2018/everoadlogo.png) +![Logo Everload]({BASE_URL}/imgs/articles/2018-06-26-rex-product-conf-2018/everoadlogo.png) On entend parler depuis quelques années d’uberisation. En voici un cas concret. L’idée est de mettre en relation expéditeurs et transporteurs de marchandises en temps réel. diff --git a/_articles/fr/2018-10-03-introduction-gitlab-ci.md b/_articles/fr/2018-10-03-introduction-gitlab-ci.md index 3812279fa..3e06256b1 100644 --- a/_articles/fr/2018-10-03-introduction-gitlab-ci.md +++ b/_articles/fr/2018-10-03-introduction-gitlab-ci.md @@ -205,7 +205,7 @@ job:deploy: stage: deploy # On déclare que ce `job` fait partie de l'étape deploy script: make deploy ``` -![CI Stages]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-stages.png) +![CI Stages]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-stages.png) ### Only et except Ces deux directives permettent de mettre en place des contraintes sur l'exécution d’une tâche. Vous pouvez dire qu’une tâche s'exécutera uniquement sur l’événement d’un push sur master ou s'exécutera sur chaque push d’une branche sauf master. @@ -254,7 +254,7 @@ job:only:master: Pour l'utilisation de `schedules` il faut dans un premier temps définir des règles dans l'interface web. On peut les configurer dans l’interface web de Gitlab : `CI/CD -> Schedules` et remplir le formulaire. -![CI Schedules]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-schedules.png) +![CI Schedules]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-schedules.png) Si vous souhaitez, vous pouvez définir un intervalle de temps personnalisé. C'est ce que j'ai fait dans mon exemple. La définition se fait comme un [cron](https://en.wikipedia.org/wiki/Cron) @@ -371,7 +371,7 @@ deploy:production: En déclarant des `environments` vous pouvez, depuis l'interface web de GitLab, déployer / redéployer votre application ou directement accéder à votre site si vous avez déclaré une `url`. Ceci se fait dans `Operations > Environment`. -![CI Environment]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-environment.png) +![CI Environment]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-environment.png) Le bouton `undo` permet de redéployer, le bouton `external link` permet d'aller sur l'application et le bouton `remove` permet de supprimer l'environnement. @@ -419,7 +419,7 @@ Comme pour `environment` je vous laisse regarder la documentation officielle sur Il est aussi possible de déclarer des variables depuis l'interface web de GitLab `Settings > CI/CD > Variables` et de leur spécifier un environnement. -![CI Variables]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-variables.png) +![CI Variables]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-variables.png) ### cache Cette directive permet de jouer avec du cache. Le cache est intéressant pour spécifier une liste de fichiers et de répertoires à mettre en cache tout le long de votre pipeline. Une fois la pipeline terminée le cache sera détruit. @@ -514,7 +514,7 @@ test:unit: Le code coverage sera visible dans les informations du `job` dans l'interface web de GitLab : -![CI Coverage]({{site.baseurl}}/assets/2018-09-19-introduction-gitlab-ci/ci-coverage.png) +![CI Coverage]({BASE_URL}/imgs/articles/2018-09-19-introduction-gitlab-ci/ci-coverage.png) > Si vous le souhaitez voici un autre article de notre blog écrit par l'astronaute [Pouzor](https://blog.eleven-labs.com/authors/pouzor/) sur le code coverage : [Ajouter le code coverage sur les MR avec avec GitLab-CI](https://blog.eleven-labs.com/fr/ajouter-le-code-coverage-sur-les-pr-avec-gitlab-ci/) diff --git a/_articles/fr/2018-11-22-retour-sur-le-php-forum-2018.md b/_articles/fr/2018-11-22-retour-sur-le-php-forum-2018.md index ec80bac9c..68b6d4485 100644 --- a/_articles/fr/2018-11-22-retour-sur-le-php-forum-2018.md +++ b/_articles/fr/2018-11-22-retour-sur-le-php-forum-2018.md @@ -24,7 +24,7 @@ keywords: --- ## Introduction -Les 25 et 26 octobre s'est tenue l'édition 2018 du [Forum PHP]({{site.baseurl}}/assets/2018-11-15-retour-sur-le-php-forum-2018/eleven-labs-php-forum-2018.jpg). Les astronautes étaient encore une fois présents sur place. Voici les retours des conférences qui les ont marqués. +Les 25 et 26 octobre s'est tenue l'édition 2018 du [Forum PHP]({BASE_URL}/imgs/articles/2018-11-15-retour-sur-le-php-forum-2018/eleven-labs-php-forum-2018.jpg). Les astronautes étaient encore une fois présents sur place. Voici les retours des conférences qui les ont marqués. ## Reprenez le contrôle de PostgreSQL grâce à POMM - Mikael Paris - SISMIC @@ -65,7 +65,7 @@ Et oui, maintenant, depuis MySQL vous pouvez faire du NoSQL orienté document. I L'intégration du NoSQL dans MySQL 8.0 va vous permettre de centraliser vos données dans un seul SGBD. De plus avec la nouvelle APi dev vous pouvez mêler query SQL et NoSQL ce qui vous permettra d'optimiser le nombre de requêtes vers votre SGBD. Mais aussi plusieurs nouvelles `Windows Functions` sont apparues pour permettre de prendre en charge le NoSQL. En plus de toutes ces nouvelles fonctionnalités MySQL 8.0 a subi un petit lifting de performances comme le montre ce graphique : -![Eleven Labs PHP Forum 2018 ]({{site.baseurl}}/assets/2018-11-15-retour-sur-le-php-forum-2018/mysql8performance-80.png) +![Eleven Labs PHP Forum 2018 ]({BASE_URL}/imgs/articles/2018-11-15-retour-sur-le-php-forum-2018/mysql8performance-80.png) Voici le lien des slides et de la vidéo de la présentation d'Olivier Dasini sur MySQL 8.0 : [afup.org - MySQL 8.0: Quoi de neuf ?](https://afup.org/talks/2669-mysql-8-0-quoi-de-neuf) @@ -105,7 +105,7 @@ Thomas a donc dû trouver un moyen d’afficher ces IRM qui sont enregistrés au Après avoir lu les specs (nifti-1) du format Nifti il a pu trouver le détails des données octet par octet : les 352 premiers octets constituent le Header (348 pour le header et 4 pour l’extension), ce header donne du détail sur la structure du fichier, le reste constitue le détail de l’image en voxel. -![Image1]({{site.baseurl}}/assets/2018-11-22-retour-sur-le-php-forum-2018/Image1.png) +![Image1]({BASE_URL}/imgs/articles/2018-11-22-retour-sur-le-php-forum-2018/Image1.png) Thomas Jarrand nous a aussi fait un rappel sur comment sont affichées les images sur nos écrans et comment en partant de cela avec les specs il avait pu afficher l’IRM. @@ -177,7 +177,7 @@ la clef doit être cryptée la clef doit faire AU MOINS la taille de ce que l’on cherche à crypter la clef ne doit SURTOUT pas être utilisée une deuxième fois -![Image2]({{site.baseurl}}/assets/2018-11-22-retour-sur-le-php-forum-2018/Image2.png) +![Image2]({BASE_URL}/imgs/articles/2018-11-22-retour-sur-le-php-forum-2018/Image2.png) (L’image ci-dessus représente bien ce qui pose problème lors de la réutilisation d’une clef) diff --git a/_articles/fr/2018-12-05-dotcss-2018-un-tres-grand-cru.md b/_articles/fr/2018-12-05-dotcss-2018-un-tres-grand-cru.md index 933355a90..73fa20dc7 100644 --- a/_articles/fr/2018-12-05-dotcss-2018-un-tres-grand-cru.md +++ b/_articles/fr/2018-12-05-dotcss-2018-un-tres-grand-cru.md @@ -26,7 +26,7 @@ Cauchemar dans la gestion des textes en dehors de leur cadre, filtres SVG, inter ## La gestion des sauts de ligne... un véritable cauchemar -![Le cauchemar de la gestion des sauts de ligne]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/line-breaking.png) +![Le cauchemar de la gestion des sauts de ligne]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/line-breaking.png) Pour gérer les sauts de ligne (line-break) des contenus de nos éléments HTML, on a tendance à utiliser la configuration standard des espaces blancs (white-space). @@ -67,7 +67,7 @@ Découvrez la [présentation en vidéo de Aga Naplocha](https://www.youtube.com/ ## Les filtres SVG -![Sara Soueidan à dotCSS 2018]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/sara-soueidan-dotcss2018.jpg) +![Sara Soueidan à dotCSS 2018]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/sara-soueidan-dotcss2018.jpg) Sara Soueidan, développeuse web front-end freelance, formatrice et auteure, a animé un cours accéléré sur la mise en œuvre des filtres SVG sur nos sites Web. Elle nous a démontré qu'il est possible de créer des effets similaires à ceux de Photoshop. @@ -95,7 +95,7 @@ Les filtres CSS standards sont bien, mais assez limités si on souhaite décorer Prenons un exemple concret : rendre une image floue. -![Comparaison entre le filtre CSS blur() et sa version SVG]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/svg-filtre-blur.png) +![Comparaison entre le filtre CSS blur() et sa version SVG]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/svg-filtre-blur.png) Si on utilise le filtre CSS standard blur(), on obtiendra un effet de flou radial uniforme sur les axes X et Y. Cependant, si nous voulons un flou spécifique affectant un seul des axes, nous aurons besoin d'un filtre SVG personnalisé pour obtenir ce résultat. Certains effets ne peuvent être obtenus que par les filtres SVG. @@ -179,7 +179,7 @@ Au lieu de cela, il se fie à la lecture des codes couleur hexadécimaux. David nous a partagé son processus pour comprendre ces codes et les informations connexes sur la vision humaine, l'histoire de l'ordinateur et la couleur numérique. -![Comprendre le cercle chromatique]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-1.png) +![Comprendre le cercle chromatique]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-1.png) ### Qu'est-ce-qu'un code hexadécimal de couleur ? @@ -202,7 +202,7 @@ D4 (rouge), 9B (vert), 25 (bleu), soit [#D92](https://www.color-hex.com/color/dd Pour représenter la version courte de notre code hexadécimal, il faut créer un graphique en bâtons, comme dans l'exemple ci-dessous. -![Graphique en bâtons du code hexadécimal et cercle chromatique]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-2.png) +![Graphique en bâtons du code hexadécimal et cercle chromatique]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-2.png) Plus un chiffre est proche de "F" et plus le bâton du graphique sera grand. Et inversement, plus un chiffre est proche de "0" et plus le bâton du graphique sera petit. @@ -210,13 +210,13 @@ Plus un chiffre est proche de "F" et plus le bâton du graphique sera grand. Et Maintenant, il faut comparer ce graphique à celui du cercle chromatique RVB (couleur primaire, secondaire et tertiaire). Ainsi, la couleur trouvée est le orange. -![Teinte de la couleur du code hexadécimal]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-3.png) +![Teinte de la couleur du code hexadécimal]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-3.png) #### La luminosité de la couleur Chaque couleur possède trois variantes de luminosité : claire (_Light_), moyenne (_Middle_), et sombre (_Dark_). Pour la connaître, il suffit d'additionner les trois valeurs RGB d'une couleur. Plus la somme est élevée, plus la couleur est claire. Dans notre exemple, la variante de couleur est moyenne. -![Luminosité du code hexadécimal]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-4.png) +![Luminosité du code hexadécimal]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-4.png) #### La saturation de la couleur @@ -228,7 +228,7 @@ Si l'intervalle est très grand alors le niveau de saturation sera de type _Sat Dans notre cas, il est grand, donc la saturation de notre couleur est _Washed_. -![Saturation du code hexadécimal]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-5.png) +![Saturation du code hexadécimal]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/hexadecimal-5.png) Après toutes ces étapes, nous pouvons dire que le code couleur hexadécimal **#D49B25** représente un **orange moyen avec une saturation washed** (_"middle washed orange"_) ! @@ -319,7 +319,7 @@ D'après Mandy, la réponse est oui ! Tous les éléments artistiques et créatifs souhaitées peuvent aujourd'hui être réalisés avec des polices variables, alors qu'auparavant, on devait les faire en image. -![Exemple d'effet réalisable avec une police variable]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/font-variable.png) +![Exemple d'effet réalisable avec une police variable]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/font-variable.png) D'autres avantages à utiliser les polices variables : @@ -345,7 +345,7 @@ Et aussi, des ressources pour vous plonger sur ce sujet : ## Conclusion -![Photo finish de dotCSS 2018]({{site.baseurl}}/assets/2018-12-05-dotcss-2018-un-tres-grand-cru/dotCSS-photo-finish.jpg) +![Photo finish de dotCSS 2018]({BASE_URL}/imgs/articles/2018-12-05-dotcss-2018-un-tres-grand-cru/dotCSS-photo-finish.jpg) Quelle magnifique conférence ! diff --git a/_articles/fr/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1.md b/_articles/fr/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1.md index efd36a717..f2c00b1a3 100644 --- a/_articles/fr/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1.md +++ b/_articles/fr/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1.md @@ -8,8 +8,7 @@ excerpt: >- Si l'on considère l’ensemble des cérémonies préconisées par le framework SCRUM, la rétrospective de sprint est certainement celle qui peut être le principal vecteur d’amélioration continue. -cover: >- - /assets/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1/cover.jpg +cover: /assets/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1/cover.jpg categories: [] authors: - pbrenot @@ -86,7 +85,7 @@ Ce sont souvent de bon points d’entrées pour des équipes qui débutent en SC #### Stat, stop, continue -![start_stop_continue_sprint_review]({{site.baseurl}}/assets/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1/NewProject_1.png "start stop continue sprint review") +![start_stop_continue_sprint_review]({BASE_URL}/imgs/articles/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1/NewProject_1.png "start stop continue sprint review") **Préparation** - Des posts-it de 3 couleurs - Un stylo par personne @@ -121,7 +120,7 @@ Dans cette méthode on se focalise essentiellement sur le produit. Elle est cert #### KALM -![KALM_sprint_review]({{site.baseurl}}/assets/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1/NewProject_3.png) +![KALM_sprint_review]({BASE_URL}/imgs/articles/2018-12-05-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-1/NewProject_3.png) **Préparation** - Des posts-it (une seule couleur) - Un stylo par personne diff --git a/_articles/fr/2018-12-21-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2.md b/_articles/fr/2018-12-21-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2.md index 84169d75f..d9cf426e7 100644 --- a/_articles/fr/2018-12-21-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2.md +++ b/_articles/fr/2018-12-21-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2.md @@ -9,8 +9,7 @@ excerpt: >- est maintenant temps de se pencher sur des versions plus évoluées, qui vous permettront notamment d’aborder des situations différentes et récolter des informations parfois plus pertinentes. -cover: >- - /assets/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/cover.jpg +cover: /assets/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/cover.jpg categories: - agile authors: @@ -41,7 +40,7 @@ Passons maintenant à des versions un peu plus « fun » où l’échange peut ### STARFISH -![Starfish_sprint_review]({{site.baseurl}}/assets/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/starfish.png "starfish sprint review") +![Starfish_sprint_review]({BASE_URL}/imgs/articles/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/starfish.png "starfish sprint review") **Préparation** @@ -139,7 +138,7 @@ C’est une variante extrêmement intéressante, car on peut voir comment les di ### SPEED BOAT -![Speed_boat]({{site.baseurl}}/assets/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/boat.png "speed boat sprint review") +![Speed_boat]({BASE_URL}/imgs/articles/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/boat.png "speed boat sprint review") **Préparation** @@ -200,7 +199,7 @@ Ce type de rétrospective a un énorme avantage par rapport aux autres : en plus ### LES 3 PETITS COCHONS -![les_trois_petits_cochons]({{site.baseurl}}/assets/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/3-cochons.png "les 3 petits cochons sprint review") +![les_trois_petits_cochons]({BASE_URL}/imgs/articles/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/3-cochons.png "les 3 petits cochons sprint review") **Préparation** @@ -250,7 +249,7 @@ Je n’en présenterai que 3 ici, que j’aime particulièrement, car ils diffè ### LES SIX CHAPEAUX (Edward De Bono) -![les_six_chapeaux]({{site.baseurl}}/assets/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/chapeaux.png "les six chapeaux d'Edward De Bono sprint review") +![les_six_chapeaux]({BASE_URL}/imgs/articles/2018-12-13-la-retrospective-de-sprint-diversifier-pour-gagner-en-qualite-partie-2/chapeaux.png "les six chapeaux d'Edward De Bono sprint review") **Préparation** diff --git a/_articles/fr/2019-01-14-architecture-hexagonale.md b/_articles/fr/2019-01-14-architecture-hexagonale.md index 1ee842f2a..6c5c247f9 100644 --- a/_articles/fr/2019-01-14-architecture-hexagonale.md +++ b/_articles/fr/2019-01-14-architecture-hexagonale.md @@ -27,7 +27,7 @@ d'avoir un besoin métier complètement agnostique des choix techniques de son i Pour visualiser l’architecture hexagonale on la représente souvent par un hexagone avec au coeur de cet hexagone le Domain. La couche du dessus correspond à l’Application et le tout est entouré de l’Infrastructure. -![hexagone]({{site.baseurl}}/assets/2019-01-14-architecture-hexagonale/hexagone.jpg) +![hexagone]({BASE_URL}/imgs/articles/2019-01-14-architecture-hexagonale/hexagone.jpg) L'architecture hexagonale peut être la solution car elle tend à isoler une application en trois couches distinctes : diff --git a/_articles/fr/2019-01-24-rex-le-design-system-leroy-merlin.md b/_articles/fr/2019-01-24-rex-le-design-system-leroy-merlin.md index af5b9fe80..35ec5b298 100644 --- a/_articles/fr/2019-01-24-rex-le-design-system-leroy-merlin.md +++ b/_articles/fr/2019-01-24-rex-le-design-system-leroy-merlin.md @@ -22,7 +22,7 @@ Depuis septembre 2018, le groupe Adeo travaille à la mise en place d'un design Tiago, UX depuis presque 10 ans, est l'initiateur du projet. Il travaille depuis 2013 chez Leroy Merlin et a supervisé l'ensemble de la refonte utilisateur du site E-commerce Leroy Merlin Brésil. Gael, est un designer devenu intégrateur qui a mis en place notamment le design system pour Lemonde.fr. Il est en charge de l'implémentation technique du projet. Quant à moi, je travaille depuis maintenant trois mois pour mettre en place sur ce projet la CI/CD. Revenons sur le début de ce projet pas comme les autres. -![team]({{site.baseurl}}/assets/2019-01-23-rex-le-design-system-leroy-merlin/team.png) +![team]({BASE_URL}/imgs/articles/2019-01-23-rex-le-design-system-leroy-merlin/team.png) ## Brief diff --git a/_articles/fr/2019-01-31-apollo-local-state-une-alternative-a-redux-contextapi.md b/_articles/fr/2019-01-31-apollo-local-state-une-alternative-a-redux-contextapi.md index 60883cce4..21b5619a5 100644 --- a/_articles/fr/2019-01-31-apollo-local-state-une-alternative-a-redux-contextapi.md +++ b/_articles/fr/2019-01-31-apollo-local-state-une-alternative-a-redux-contextapi.md @@ -12,8 +12,7 @@ excerpt: >- Depuis peu, celle-ci offre une autre manière de gérer le state de votre application afin de ne pas avoir à gérer un Redux, il est temps de voir ça d'un peu plus près ! -cover: >- - /assets/2019-01-26-apollo-local-state-management-une-alternative-a-redux-contextapi/cover.png +cover: /assets/2019-01-26-apollo-local-state-management-une-alternative-a-redux-contextapi/cover.png categories: - javascript authors: diff --git a/_articles/fr/2019-02-06-what-is-an-architect.md b/_articles/fr/2019-02-06-what-is-an-architect.md index c98650fa8..fd774f1b9 100644 --- a/_articles/fr/2019-02-06-what-is-an-architect.md +++ b/_articles/fr/2019-02-06-what-is-an-architect.md @@ -31,7 +31,7 @@ En général, comme tout bon projet, cela commence chez le Promoteur. Un client L'objectif : savoir si le besoin est réalisable au vu des contraintes. Le plus simple en général est d'utiliser le ratio qualité / coût / délai. Il est important de noter ici qu'on peut challenger le projet sur deux de ces contraintes, mais jamais sur les trois en même temps. -![Trium Vira]({{site.baseurl}}/assets/2019-02-06-what-is-an-architect/triumvira.png) +![Trium Vira]({BASE_URL}/imgs/articles/2019-02-06-what-is-an-architect/triumvira.png) C'est à ce moment que l'architecte a la mission de challenger le besoin. Il n'est pas rare que le client arrive après avoir visité des maisons témoins : @@ -116,4 +116,4 @@ Certainement la partie la plus difficile, apprenez de vos erreurs, mais aussi de Enfin dernier point, ne vous attachez pas (trop) aux technologies. Apprenez les forces et les faiblesses de chacune et choisissez en fonction de ces critères factuels. Evitez la "hype train" : voir le [HDD](https://blog.daftcode.pl/hype-driven-development-3469fc2e9b22). Formalisez d'abord votre architecture de manière agnostique, puis choisissez chaque brique en fonction des contraintes et des besoins. Si vous souhaitez malgré tout partir sur une nouvelle technologie, mesurez les risques et communiquez dessus avec l'ensemble des acteurs. -![Hype Driven Development]({{site.baseurl}}/assets/2019-02-06-what-is-an-architect/hdd.png) +![Hype Driven Development]({BASE_URL}/imgs/articles/2019-02-06-what-is-an-architect/hdd.png) diff --git a/_articles/fr/2019-02-13-agile-tour-microsoft.md b/_articles/fr/2019-02-13-agile-tour-microsoft.md index 883cf77cb..35e2979e0 100644 --- a/_articles/fr/2019-02-13-agile-tour-microsoft.md +++ b/_articles/fr/2019-02-13-agile-tour-microsoft.md @@ -24,7 +24,7 @@ keywords: Nous étions plusieurs astronautes de la galaxie Eleven Labs à nous rendre le 5 décembre dernier à l'Agile Tour organisé par Microsoft dans ses propres locaux. -![Agile tour paris 2018]({{site.baseurl}}/assets/2019-02-13-agile-tour-microsoft/agiletourparis2018_image1.png) +![Agile tour paris 2018]({BASE_URL}/imgs/articles/2019-02-13-agile-tour-microsoft/agiletourparis2018_image1.png) Nous avons donc pu assister à différentes conférences et plusieurs ateliers autour de l'agilité et de ses différentes applications. Petit résumé des découvertes ci-dessous ! @@ -79,7 +79,7 @@ Introduction au "Management 3.0" par Rafik MEKKI, avec sa mise en pratique du "D L'idée du Delegation Board est d'inscrire sur un tableau les grandes actions de son projet agile. Cela peut être la rédaction d'une US, la priorisation des US, le challenge client, le choix des participants aux rétrospectives, etc. -![Delegation board]({{site.baseurl}}/assets/2019-02-13-agile-tour-microsoft/delegation_board_image2.jpg) +![Delegation board]({BASE_URL}/imgs/articles/2019-02-13-agile-tour-microsoft/delegation_board_image2.jpg) Les 7 niveaux définis par le Delegation Board sont les suivants : @@ -177,7 +177,7 @@ D'autant plus qu'engager les autres dans la résolution d'un problème existant Petit fun fact en chiffres, il apparait qu'aujourd’hui en France, 69% des salariés ne se sentent pas concernés par leur travail. Rien que ça... -![Agile mindset]({{site.baseurl}}/assets/2019-02-13-agile-tour-microsoft/Agile_Mindset_Image3.jpg) +![Agile mindset]({BASE_URL}/imgs/articles/2019-02-13-agile-tour-microsoft/Agile_Mindset_Image3.jpg) Par groupe de 2-3 personnes nous avons échangé autour des émotions ressenties à la suite d’une réunion où la collaboration s’est mal passée, puis sur une récente situation professionnelle qui a déclenché chez nous une émotion inconfortable. Que peut-on apprendre de cette émotion et comment la transformer pour la rendre plus confortable et surtout, constructive ? @@ -224,7 +224,7 @@ Jean-Pierre LAMBERT est intervenu à l’Agile Tour pour nous présenter l’Exa Le principe de l’Example Mapping, qui arrive en amont de la validation et de l’estimation des user stories, est de structurer avec une méthodologie bien définie la réflexion permettant d’aboutir à une clarification et validation des critères d’acceptance. -![Example mapping]({{site.baseurl}}/assets/2019-02-13-agile-tour-microsoft/Example_Mapping_Image4.jpg) +![Example mapping]({BASE_URL}/imgs/articles/2019-02-13-agile-tour-microsoft/Example_Mapping_Image4.jpg) Nous nous sommes donc retrouvés avec quatre bloc-notes de couleurs différentes : diff --git a/_articles/fr/2019-02-27-school-of-po-devoir-maison-et-rex.md b/_articles/fr/2019-02-27-school-of-po-devoir-maison-et-rex.md index 9f9738a15..78ddf1bf8 100644 --- a/_articles/fr/2019-02-27-school-of-po-devoir-maison-et-rex.md +++ b/_articles/fr/2019-02-27-school-of-po-devoir-maison-et-rex.md @@ -72,7 +72,7 @@ Ensuite, la variable du **temps** qui peut rendre obsolète le produit (un autre Ou encore la variable **humaine**, qui rend la perception très subjective et qui va faire connaître son avis à son entourage. -![]({{site.baseurl}}/assets/2019-02-27-school-of-po-devoir-maison-et-rex/maximpact_mineffort.jpg) +![]({BASE_URL}/imgs/articles/2019-02-27-school-of-po-devoir-maison-et-rex/maximpact_mineffort.jpg) ### Besoin d’adaptabilité @@ -160,7 +160,7 @@ Un autre exemple, au contraire, pourrait être de partager une anecdote avec 3 p ### Daily basis ? -![]({{site.baseurl}}/assets/2019-02-27-school-of-po-devoir-maison-et-rex/own-your-product.jpg) +![]({BASE_URL}/imgs/articles/2019-02-27-school-of-po-devoir-maison-et-rex/own-your-product.jpg) La limite de la proposition qu’il faut, je pense, ne pas oublier, est que chaque mesure est basée sur des hypothèses. Et cela peut laisser un grand flou. @@ -228,7 +228,7 @@ Deux types d’hypothèses sont à dissocier : Nous nous sommes prêtés à l’exercice par groupes d’environ 6 personnes. -![]({{site.baseurl}}/assets/2019-02-27-school-of-po-devoir-maison-et-rex/arbre-hypotheses.jpg) +![]({BASE_URL}/imgs/articles/2019-02-27-school-of-po-devoir-maison-et-rex/arbre-hypotheses.jpg) **1. Question** @@ -379,7 +379,7 @@ D’où l’importance de : À nos crayons ! On se lance à travers les 6 étapes suivantes pour réaliser en 1h un semblant de design sprint de 5 jours. Challenge accepted pour l’équipe ! -![]({{site.baseurl}}/assets/2019-02-27-school-of-po-devoir-maison-et-rex/design_sprint.jpg) +![]({BASE_URL}/imgs/articles/2019-02-27-school-of-po-devoir-maison-et-rex/design_sprint.jpg) **1/6 : identifier les challenges potentiels** diff --git a/_articles/fr/2019-03-06-un-an-de-webperformance.md b/_articles/fr/2019-03-06-un-an-de-webperformance.md index 1504f06de..b68a19567 100644 --- a/_articles/fr/2019-03-06-un-an-de-webperformance.md +++ b/_articles/fr/2019-03-06-un-an-de-webperformance.md @@ -29,7 +29,7 @@ Aujourd'hui, l'ensemble des sites médias se fait concurrence sur les infos dite Il n'y a pas que pour l'actu chaude que la performance du site est importante. On le sait aujourd'hui, il existe clairement un impact fort entre le trafic du site et la web performance. Je vous invite à lire [ce document](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/) provenant d'une source plutôt fiable puisqu'il s'agit de Google. -![thinkwithgoogle]({{site.baseurl}}/assets/2019-02-28-un-an-de-webperformance/image1.jpg) +![thinkwithgoogle]({BASE_URL}/imgs/articles/2019-02-28-un-an-de-webperformance/image1.jpg) Voici trois points qui vous donneront envie de faire de la webperformance : @@ -58,7 +58,7 @@ Bien sûr il n'est pas possible de suivre l'ensemble des métriques et cela n'au Dans le cadre de la mission nous avons choisi cinq KPIs à suivre. L'un des plus important est le visuel d'une page seconde par seconde (filmstrips), cela permet de comprendre ce que voit l'utilisateur. Comme la webperformance n'a pas de valeur absolue, il est préférable de faire un benchmark avec vos concurrents. C'est certainement ce qui est le plus important, car Google compare les résultats entre les sites. -![filmstrips]({{site.baseurl}}/assets/2019-02-28-un-an-de-webperformance/image2.png) +![filmstrips]({BASE_URL}/imgs/articles/2019-02-28-un-an-de-webperformance/image2.png) Maintenant que nous savons quelles sont les métriques à suivre, nous pouvons choisir le ou les outils pour les suivre. @@ -76,12 +76,12 @@ Comme par exemple : - **audit** permettant de faire un rapport de webperformance -![audit]({{site.baseurl}}/assets/2019-02-28-un-an-de-webperformance/image3.png) +![audit]({BASE_URL}/imgs/articles/2019-02-28-un-an-de-webperformance/image3.png) - **network** permettant de voir les bottlenecks du réseau - **coverage** permettant de connaitre le taux d'utilisation du javascript et du css -![coverage]({{site.baseurl}}/assets/2019-02-28-un-an-de-webperformance/image4.png) +![coverage]({BASE_URL}/imgs/articles/2019-02-28-un-an-de-webperformance/image4.png) ## Travailler avec les équipes @@ -118,13 +118,13 @@ Voici un exemple fait à la google I/O 2018 Après un an de mission et grâce au travail des équipes MCD et France24, nous sommes maintenant numéro un selon nos métriques. Comme un long discours ne sert à rien voici le résultat après la mise en production. -![bilan]({{site.baseurl}}/assets/2019-02-28-un-an-de-webperformance/image5.png) +![bilan]({BASE_URL}/imgs/articles/2019-02-28-un-an-de-webperformance/image5.png) -![bilan]({{site.baseurl}}/assets/2019-02-28-un-an-de-webperformance/image6.png) +![bilan]({BASE_URL}/imgs/articles/2019-02-28-un-an-de-webperformance/image6.png) -![bilan]({{site.baseurl}}/assets/2019-02-28-un-an-de-webperformance/image7.png) +![bilan]({BASE_URL}/imgs/articles/2019-02-28-un-an-de-webperformance/image7.png) -![bilan]({{site.baseurl}}/assets/2019-02-28-un-an-de-webperformance/image8.png) +![bilan]({BASE_URL}/imgs/articles/2019-02-28-un-an-de-webperformance/image8.png) Si vous aussi vous souhaitez améliorer votre webperformance, renseignez-vous [ici](https://eleven-labs.com/accompagnement-sur-mesure/audit-et-expertise) diff --git a/_articles/fr/2019-03-19-po-vs-pm-like-batman-vs-superman.md b/_articles/fr/2019-03-19-po-vs-pm-like-batman-vs-superman.md index 73371dc08..d9c7e8ff2 100644 --- a/_articles/fr/2019-03-19-po-vs-pm-like-batman-vs-superman.md +++ b/_articles/fr/2019-03-19-po-vs-pm-like-batman-vs-superman.md @@ -41,7 +41,7 @@ Le rôle de Product Management est arrivé très tôt dans la gestion de projet McElroy ne s’est d’ailleurs pas arrêté là, et à notamment aidé à fonder la NASA et a fortement influencé Bill Hewlett et David Packard, -les créateurs de HP- avec sa vision du product management. Et oui. Rien que ça… - ![]({{site.baseurl}}/assets/2019-03-19-po-vs-pm-like-batman-vs-superman/superman_super_product.jpg) + ![]({BASE_URL}/imgs/articles/2019-03-19-po-vs-pm-like-batman-vs-superman/superman_super_product.jpg) À l’origine, ce rôle n’est donc pas du tout lié à l’agilité. Le Product Manager a pour objectif la réalisation d’un produit dans sa vision globale : @@ -67,7 +67,7 @@ Son rôle, beaucoup plus opérationnel dans le développement d’un produit au - réduire les risques en définissant des conditions de réalisation - apprendre de ses erreurs et des erreurs de l’équipe en améliorant continuellement les process en place - ![]({{site.baseurl}}/assets/2019-03-19-po-vs-pm-like-batman-vs-superman/batman_justice_product.jpg) + ![]({BASE_URL}/imgs/articles/2019-03-19-po-vs-pm-like-batman-vs-superman/batman_justice_product.jpg) Finalement, d’avancer pas à pas vers le produit final souhaité par le client et / ou l’utilisateur, de la manière la plus lisse possible. @@ -81,7 +81,7 @@ Le Product Owner doit s’assurer que le produit est développé en fonction de Voici un tableau récapitulatif, avec une vision macro, de la répartition des rôles entre le product manager, le product owner, et toute la team dans un projet agile : - ![]({{site.baseurl}}/assets/2019-03-19-po-vs-pm-like-batman-vs-superman/pm-po-team-differences.png) + ![]({BASE_URL}/imgs/articles/2019-03-19-po-vs-pm-like-batman-vs-superman/pm-po-team-differences.png) Pour conclure sur ces comparatifs, le PO est défini par SCRUM et l’agilité de manière générale, il n’existe pas sans l’équipe de développement. @@ -99,7 +99,7 @@ Dans un monde idéal, il est évident que ces deux rôles doivent être remplis Il est aussi évident que toutes les sociétés n’ont pas les moyens de se payer deux ressources pour mener à bien ces deux rôles, et qu’il incombe au PO+PM de remplir le job pour deux. - ![]({{site.baseurl}}/assets/2019-03-19-po-vs-pm-like-batman-vs-superman/pm-vs-po-justice-league.jpg) + ![]({BASE_URL}/imgs/articles/2019-03-19-po-vs-pm-like-batman-vs-superman/pm-vs-po-justice-league.jpg) Voici une petite liste des pours et des contres à cette solution : diff --git a/_articles/fr/2019-04-24-aws-summit-2019-retour-d-experience.md b/_articles/fr/2019-04-24-aws-summit-2019-retour-d-experience.md index 38cc17888..de6b6006b 100644 --- a/_articles/fr/2019-04-24-aws-summit-2019-retour-d-experience.md +++ b/_articles/fr/2019-04-24-aws-summit-2019-retour-d-experience.md @@ -28,7 +28,7 @@ Autre précision, l'événement est gratuit, il faut simplement se pré-inscrire ## Keynote d'ouverture -![]({{site.baseurl}}/assets/2019-04-16-aws-summit-2019-retour-d-experience/keynote-ouverture.jpg) +![]({BASE_URL}/imgs/articles/2019-04-16-aws-summit-2019-retour-d-experience/keynote-ouverture.jpg) L'ouverture des conférences s'est faite à 9h30 après le petit déjeuner sur une Keynote d'une heure quarante-cinq. Julien Groues, Country Manager France AWS, est revenu un peu sur l'historique des services. @@ -61,7 +61,7 @@ L'idée générale du talk était de montrer comment faire des économies en com Statistiquement : sur **une moyenne de 125 clients** on obtient une **économie de 26 à 49%** en cloud comparé à du on premise, et c'est en partie dû au fait que **84% des servers on-premise sont surdimensionnés** (statistiques d'Amazon). -![]({{site.baseurl}}/assets/2019-04-16-aws-summit-2019-retour-d-experience/onpremise-vs-aws.jpg) +![]({BASE_URL}/imgs/articles/2019-04-16-aws-summit-2019-retour-d-experience/onpremise-vs-aws.jpg) ### Économie : @@ -114,7 +114,7 @@ L'utilisateur accède à l'app (statique) qui est sur un bucket (S3, le service Pour finir, cette sauvegarde lance un événement qui permet d'exécuter une autre lambda qui va écrire dans un SQS (Simple Queue Storage) pour envoyer la confirmation d'inscription à l'utilisateur. -![]({{site.baseurl}}/assets/2019-04-16-aws-summit-2019-retour-d-experience/20-minutes-frontend.jpg) +![]({BASE_URL}/imgs/articles/2019-04-16-aws-summit-2019-retour-d-experience/20-minutes-frontend.jpg) Conclusion le frontend est maintenant séparé en différentes briques interchangeables et est scalable en fonction de la demande des utilisateurs et tout ça à moindre coût. diff --git a/_articles/fr/2019-05-02-gestion-des-traductions-avec-localise.biz.md b/_articles/fr/2019-05-02-gestion-des-traductions-avec-localise.biz.md index 635099df9..148bed875 100644 --- a/_articles/fr/2019-05-02-gestion-des-traductions-avec-localise.biz.md +++ b/_articles/fr/2019-05-02-gestion-des-traductions-avec-localise.biz.md @@ -28,13 +28,13 @@ Dans le cadre de notre projet, nous avions besoin d'un outil de gestion de tradu Tout d'abord, il faut créer un compte utilisateur. Une fois notre compte créé, nous commençons par créer un projet et choisissons une langue principale pour ce projet qui servira de base pour les traductions. Un même utilisateur peut faire partie de plusieurs projets. -![loco_create]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/create.png "create project") +![loco_create]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/create.png "create project") Nous pouvons ensuite ajouter toutes les langues dont nous avons besoin dans notre application, que ce soient des langues au format standard, ISO2, ou custom pour des besoins un peu plus spécifiques. L'interface est assez simple et intuitive, et il est facile de travailler dessus sans s'y perdre grâce à tous les filtres disponibles. -![loco_translate]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/translate.png "translate") +![loco_translate]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/translate.png "translate") ## Fonctionnalités @@ -49,12 +49,12 @@ Par exemple, lorsque l'équipe de développement crée les clés de traduction, Ensuite, lorsque les traductions ont été faites et validées par les gens dont c'est la responsabilité, le statut est modifié, permettant ainsi de filtrer sur les assets qui sont à traduire et en simplifiant leur travail. -![loco_statuses]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/status.png "statuses") +![loco_statuses]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/status.png "statuses") De plus, il est possible d'assigner des tags aux assets. Ceci nous a été utile pour préparer les releases notamment. -![loco_tags]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/tags.png "tags") +![loco_tags]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/tags.png "tags") ### Import / export @@ -62,7 +62,7 @@ Bien sûr, lorsqu'on migre sur une nouvelle solution, on n'a pas envie de créer Loco a un système d'import / export d'assets très complet avec un large choix de formats (JSON, CSV, etc.). On peut aussi utiliser tous les filtres dans nos exports. Je vous laisse regarder leur documentation avec tous les détails si besoin. -![loco_export]({{site.baseurl}}/assets/2019-05-02-gestion-des-traductions-avec-localise/export.png "export") +![loco_export]({BASE_URL}/imgs/articles/2019-05-02-gestion-des-traductions-avec-localise/export.png "export") ### API REST diff --git a/_articles/fr/2019-05-16-prise-en-main-vim-php.md b/_articles/fr/2019-05-16-prise-en-main-vim-php.md index c67d7a87e..fdc0997c9 100644 --- a/_articles/fr/2019-05-16-prise-en-main-vim-php.md +++ b/_articles/fr/2019-05-16-prise-en-main-vim-php.md @@ -15,7 +15,7 @@ keywords: - vim --- - ![]({{site.baseurl}}/assets/2019-05-06-prise-en-main-vim-php/vim-logo-en.png) + ![]({BASE_URL}/imgs/articles/2019-05-06-prise-en-main-vim-php/vim-logo-en.png) ## Vim, c'est quoi ? @@ -32,7 +32,7 @@ Il y en a plusieurs : ## Guide rapide des modes de Vim - ![]({{site.baseurl}}/assets/2019-05-06-prise-en-main-vim-php/vim-modes.png) + ![]({BASE_URL}/imgs/articles/2019-05-06-prise-en-main-vim-php/vim-modes.png) Vous avez ouvert Vim sans terminer ce tuto et vous aimeriez savoir comment commencer à naviguer ? Voici quelques commandes. @@ -104,7 +104,7 @@ mkdir -p ~/.vim/autoload ~/.vim/bundle && curl -LSso ~/.vim/autoload/pathogen.vi ### NERDtree, voir l'arborescence du dossier - ![]({{site.baseurl}}/assets/2019-05-06-prise-en-main-vim-php/nerdtree.png) + ![]({BASE_URL}/imgs/articles/2019-05-06-prise-en-main-vim-php/nerdtree.png) Si vous ne deviez installer qu'un plugin, ce serait celui-là ! A tout moment vous saurez où vous vous situez. Installation : @@ -128,7 +128,7 @@ Relancez Vim et admirez ! Pour passer de l'éditeur à NERDtree et vice-versa, i ### YouCompleteMe, l'autocomplétion - ![]({{site.baseurl}}/assets/2019-05-06-prise-en-main-vim-php/ycm.jpg) + ![]({BASE_URL}/imgs/articles/2019-05-06-prise-en-main-vim-php/ycm.jpg) Ce plugin fournit une autocomplétion basique s'appuyant sur ce que vous avez déjà saisi. Avant d'éditer .vimrc, lancez : @@ -151,7 +151,7 @@ Pour plus d'informations sur YCM, regardez ( export default MovieList; ``` -![]({{ site.baseurl }}/assets/2019-10-16-skeleton-screen/list_skeleton.gif) +![]({BASE_URL}/imgs/articles/2019-10-16-skeleton-screen/list_skeleton.gif) En bonus la version de notre liste avec apollo hook : diff --git a/_articles/fr/2019-10-22-joker-planning-estimer-backlog.md b/_articles/fr/2019-10-22-joker-planning-estimer-backlog.md index 4066285d4..ea10de65a 100644 --- a/_articles/fr/2019-10-22-joker-planning-estimer-backlog.md +++ b/_articles/fr/2019-10-22-joker-planning-estimer-backlog.md @@ -23,7 +23,7 @@ Tirant le Joker de ma manche, je vous laisse en compagnie du mastermind de Gotha ## 1. "Estimer c'est faire un choix. Pourquoi cet air si sérieux ?" -![]({{site.baseurl}}/assets/2019-10-22-joker-planning-estimer-backlog/joker.jpg) +![]({BASE_URL}/imgs/articles/2019-10-22-joker-planning-estimer-backlog/joker.jpg) Quand on parle d’estimation de son product backlog, on parle de l’estimation en points d’effort des user stories composant le backlog de votre produit. @@ -98,7 +98,7 @@ Mais si vous avez une équipe qui se sent rassurée par ce fonctionnement, ou m Avant de vous lancer dans l’estimation, balayons quelques points d’attention ! -![]({{site.baseurl}}/assets/2019-10-22-joker-planning-estimer-backlog/black-joker.jpg) +![]({BASE_URL}/imgs/articles/2019-10-22-joker-planning-estimer-backlog/black-joker.jpg) - **Points d’effort & points de complexité** diff --git a/_articles/fr/2019-11-06-async-await.md b/_articles/fr/2019-11-06-async-await.md index 10b811a67..adce84f70 100644 --- a/_articles/fr/2019-11-06-async-await.md +++ b/_articles/fr/2019-11-06-async-await.md @@ -20,7 +20,7 @@ Après avoir vu en profondeur comment fonctionnent les promesses et comment les ⚠️ Il est important de connaître et de comprendre les promesses pour maîtriser `async/await`. Si ce n'est pas votre cas, je vous conseille de lire mon précédent [article](https://blog.eleven-labs.com/fr/lespromessesenjavascript/) qui traite justement des promesses. -![]({{site.baseurl}}/assets/2019-11-06-async-await/async-await.jpg) +![]({BASE_URL}/imgs/articles/2019-11-06-async-await/async-await.jpg) ## Définition diff --git a/_articles/fr/2019-11-20-reprenez-le-controle-de-vos-file-system-avec-flysystem.md b/_articles/fr/2019-11-20-reprenez-le-controle-de-vos-file-system-avec-flysystem.md index 01c1c66a5..00c22b23f 100644 --- a/_articles/fr/2019-11-20-reprenez-le-controle-de-vos-file-system-avec-flysystem.md +++ b/_articles/fr/2019-11-20-reprenez-le-controle-de-vos-file-system-avec-flysystem.md @@ -470,7 +470,7 @@ class invoicePlugin implements PluginInterface 4/ Voir le résultat : -![result plugin Flysystem]({{ site.baseurl }}/assets/2019-11-20-reprenez-le-controle-de-vos-file-system-avec-flysystem/screenshot-result-plugin.png) +![result plugin Flysystem]({BASE_URL}/imgs/articles/2019-11-20-reprenez-le-controle-de-vos-file-system-avec-flysystem/screenshot-result-plugin.png) Et voilà pour ce dernier exemple. diff --git a/_articles/fr/2019-12-12-visualiser-l-architecture-de-vos-projets.md b/_articles/fr/2019-12-12-visualiser-l-architecture-de-vos-projets.md index f37fd9241..5cf374ea5 100644 --- a/_articles/fr/2019-12-12-visualiser-l-architecture-de-vos-projets.md +++ b/_articles/fr/2019-12-12-visualiser-l-architecture-de-vos-projets.md @@ -26,13 +26,13 @@ La solution la plus souvent envisagée est d'utiliser ponctuellement un **tablea [![Vidéo Youtube: UML, Cucumber and modeling reality - MPJ's Musings - Fun Fun Function][fff-image]][fff-video] _[UML, Cucumber and modeling reality - MPJ's Musings - Fun Fun Function][fff-video] par [Mattias Petter Johansson (mpj)][mpj-twitter]_ -[fff-image]: {{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/just-use-a-whiteboard.png +[fff-image]: {BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/just-use-a-whiteboard.png [fff-video]: https://www.youtube.com/watch?v=4_SvuUYQ5Fo [mpj-twitter]: https://twitter.com/mpjme L'approche semble valable de prime abord, malheureusement, on peut aboutir rapidement à ce résultat : -![Exemple de diagramme d'architecture problématique]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/diagramme-bordelique.jpg) +![Exemple de diagramme d'architecture problématique]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/diagramme-bordelique.jpg) Sur le moment, l'équipe qui a produit le diagramme a une idée claire du système et se figure bien les interactions entre les différentes briques de l'application. @@ -62,7 +62,7 @@ Le modèle permet de créer une cartographie du code, Chaque niveau s'adresse à une audience bien définie. -![Illustration des 4 niveaux de zooms du modèle C4]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/c4model-layered.svg) +![Illustration des 4 niveaux de zooms du modèle C4]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/c4model-layered.svg) _Illustration des 4 niveaux de détails du modèle C4_ @@ -84,7 +84,7 @@ Voilà ! Nous y sommes. En réalité, ce qui compte c'est ce **[modèle](https:/ Modèle qu'il va falloir **extraire** pour permettre à toutes les personnes concernées de le **maintenir**, de l'**enrichir** et de le **corriger** au fil des évolutions de l'architecture. -![Le professeur Dumbledore utilisant un sort d'extraction de souvenirs]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/dumbledore_memory.jpg) +![Le professeur Dumbledore utilisant un sort d'extraction de souvenirs]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/dumbledore_memory.jpg) _Le professeur Dumbledore en pleine séance d'extraction de son modèle mental de l'architecture._ @@ -102,7 +102,7 @@ L'avantage de maintenir un modèle, est qu'il est possible de l'interroger progr L'idée ici et de **séparer le fond de la forme** et d'accorder plus d'importance au contenu _(que l'on souhaite exhaustif)_, qu'au contenant _(nos futurs diagrammes)_. -![Filtrage du modèle d'architecture pour obtenir une vue correspondant à la question posée]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/c4model-filter.svg) +![Filtrage du modèle d'architecture pour obtenir une vue correspondant à la question posée]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/c4model-filter.svg) ## Formalisme @@ -111,13 +111,13 @@ Le modèle s'appuie sur un ensemble d'abstractions utilisées pour décrire la s Le modèle C4 s'intéresse à représenter des **systèmes logiciels** composés de **conteneurs**, scindés en **composants** qui s'expriment par du **code**. On matérialise également les **personnes** utilisant ces systèmes et les différentes **relations** qu'entretiennent les élements de l'architecture. -![Hiérarchie des éléments d'architecture du modèle C4]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/hierarchy.png) +![Hiérarchie des éléments d'architecture du modèle C4]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/hierarchy.png) ## Notation L'idée derrière le modèle C4 est de laisser peu de place à l'interprétation. Les diagrammes générés à partir du modèle doivent être **autoporteurs** ; il ne doit pas être nécessaire de les accompagner d'une documentation ou d'un discours. -![Notation du modèle C4]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/notation.png) +![Notation du modèle C4]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/notation.png) - Chaque boîte porte un **nom**, un **type** et une **description**. - Chaque relation porte une **description** accompagnée si nécessaire de la **technologie** utilisée pour le transport de l'information quand il s'agit d'une relation technique. @@ -129,7 +129,7 @@ On identifie 4 niveaux d'abstractions ### **Niveau 1**: System **Context** _(Contexte Système)_ -![Modèle C4: Vue Contexte Système]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/system-context.png) +![Modèle C4: Vue Contexte Système]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/system-context.png) Ce diagramme permet d'obtenir la vision d'ensemble d'un système. @@ -141,7 +141,7 @@ La boîte centrale matérialise un système logiciel, entouré des ses utilisate ### **Niveau 2**: **Container** _(Conteneur)_ -![Modèle C4: Vue Conteneur]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/containers.png) +![Modèle C4: Vue Conteneur]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/containers.png) Une fois que l'on situe un système dans son environnement, la prochaine étape est de zoomer dans les frontières de ce dernier _(system boundaries)_ pour matérialiser les conteneurs qui le composent. @@ -163,7 +163,7 @@ Un conteneur est un élément qui peut être exécuté/déployé individuellemen ### **Niveau 3** : **Component** _(Composant)_ -![Modèle C4: Vue Composant]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/component.png) +![Modèle C4: Vue Composant]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/component.png) Quand on zoome sur un conteneur, on observe les composants nécessaires à son fonctionnement, ainsi que leurs interactions. @@ -183,7 +183,7 @@ Pour finir, en zoomant sur un composant, on accède à son implémentation. Pour décrire une implémentation, l'UML est le langage à privilégier sachant qu'à ce niveau de détails, on s'adresse essentiellement à des développeurs. -![Modèle C4: Vue Code]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/code.png) +![Modèle C4: Vue Code]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/code.png) Pour les traitements jugés triviaux (exemple: un CRUD), il est inutile de descendre jusque-là. @@ -195,13 +195,13 @@ Vous n'êtes pas obligé pour ce niveau d'utiliser systématiquement des diagram ### Software Landscape _(Paysage Applicatif)_ -![Modèle C4: Paysage Applicatif]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/landscape.png) +![Modèle C4: Paysage Applicatif]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/landscape.png) Permet de visualiser plusieurs applicatifs maintenus par l'entreprise et leurs interactions avec des systèmes et des personnes, qu'ils soient internes ou externes à l'entreprise. ### Deployment _(déploiement)_ -![Modèle C4: Plan de Déploiement]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/deployment.png) +![Modèle C4: Plan de Déploiement]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/deployment.png) Fait correspondre les conteneurs (éléments individuellement déployables) à l'infrastructure matérielle du SI. @@ -211,15 +211,15 @@ La page officielle du modèle C4 [référence déjà un certains nombres d'outil C'est actuellement le seul outil qui vous permet de modéliser et de maintenir un modèle d'architecture, via du code ([java](https://github.com/structurizr/java), [.net](https://github.com/structurizr/dotnet), [typescript](https://github.com/ChristianEder/structurizr-typescript) ou [php](https://github.com/structurizr-php/structurizr-php)) ou depuis son interface graphique et qui offre la possibilité de générer des diagrammes à partir de ce dernier. -![Logo Structurizr]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/structurizr-logo.png) +![Logo Structurizr]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/structurizr-logo.png) -![Structurizr: Ajouter des éléments]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/structiruzr-edit-elements.gif) +![Structurizr: Ajouter des éléments]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/structiruzr-edit-elements.gif) _Ajout d'éléments via l'interface Structurizr_ -![Structurizr: éditeur de styles]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/structurizr-edit-styles.png) +![Structurizr: éditeur de styles]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/structurizr-edit-styles.png) _Édition des styles via l'interface Structurizr_ -![Structurizr: éditeur de styles]({{ site.baseurl }}/assets/2019-12-12-visualiser-l-architecture-de-vos-projets/structurizr-edit-views.png) +![Structurizr: éditeur de styles]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/structurizr-edit-views.png) _Création de vues via l'interface Structurizr_ Le workflow de l'outil est le suivant : diff --git a/_articles/fr/2020-01-02-Storybook-Addons.md b/_articles/fr/2020-01-02-Storybook-Addons.md index c37ec54f5..944419d92 100644 --- a/_articles/fr/2020-01-02-Storybook-Addons.md +++ b/_articles/fr/2020-01-02-Storybook-Addons.md @@ -18,7 +18,7 @@ keywords: - react --- -![Liste d'addon 1]({{ site.baseurl }}/assets/2020-01-02-Storybook-Addons/addonlist.png) +![Liste d'addon 1]({BASE_URL}/imgs/articles/2020-01-02-Storybook-Addons/addonlist.png) Coucou les bichons, on se retrouve pour un nouvel article qui porte sur les Addons ! @@ -45,7 +45,7 @@ On pourrait presque être rabat-joie en se disant que c'est juste une mode d'ouv Déjà le nombre d'addons est moins important que le nombre de vendeurs de tours Eiffel au Trocadéro, on en dénombre 13 officiels et 27 communautaires, ça présage déjà de la part belle à la qualité et au besoin, plutôt qu'à la quantité. -![Liste d'addon 2]({{ site.baseurl }}/assets/2020-01-02-Storybook-Addons/addonlist2.png) +![Liste d'addon 2]({BASE_URL}/imgs/articles/2020-01-02-Storybook-Addons/addonlist2.png) Dans les faits ces derniers sont rangés par fonctionnalité : **Organisation**, **Test, Code**, **Data & State**, **Style** et pour finir **Design**. @@ -94,7 +94,7 @@ Comme on est des grosses flemasses, nous on voudrait bien ne pas avoir à édite Un peu comme ça non ? -![Storybook knobs addon]({{ site.baseurl }}/assets/2020-01-02-Storybook-Addons/knobs.gif) +![Storybook knobs addon]({BASE_URL}/imgs/articles/2020-01-02-Storybook-Addons/knobs.gif) C'est cadeau, c'est l'addon **Knobs** comme on peut voir dans le petit onglet, juste à côté d'**Actions**, qui lui aussi est un addon qu'on a utilisé dans le tutoriel d'avant (celui qui permet de mocker des callbacks type `onClick()` par exemple) et qui est déjà présent dans notre fichier story : @@ -146,13 +146,13 @@ On va donc immédiatement éditer le code de notre story .add('archived', () => ); ``` -![Storybook knobs addon]({{ site.baseurl }}/assets/2020-01-02-Storybook-Addons/knobs1.png) +![Storybook knobs addon]({BASE_URL}/imgs/articles/2020-01-02-Storybook-Addons/knobs1.png) Et là imaginez, vous filez ça à Jean-Marie qui est en charge de tester votre composant. Il va s'éclater à voir si vous avez pas fait de la daube pour revenir vers vous, avec une haleine de cendrier et de café froid, en vous beuglant : > Eh mec ! T'as vu la gueule de ton composant ? Quand j'ai mis un titre un peu long ? Non mais je te jure... hahaha -![Storybook knobs addon 2]({{ site.baseurl }}/assets/2020-01-02-Storybook-Addons/knobs2.png) +![Storybook knobs addon 2]({BASE_URL}/imgs/articles/2020-01-02-Storybook-Addons/knobs2.png) Quel coquin ce Jean-Marie, mais il n'a pas tort. On peut simplement se rajouter une nouvelle story "long titre" pour sauvegarder ce use-case et éviter la régression. diff --git a/_articles/fr/2020-01-22-lazy-load-react.md b/_articles/fr/2020-01-22-lazy-load-react.md index 6a4a5af6d..1dc40810a 100644 --- a/_articles/fr/2020-01-22-lazy-load-react.md +++ b/_articles/fr/2020-01-22-lazy-load-react.md @@ -168,11 +168,11 @@ Dans ce composant nous utilisons le retour de **useIntersectionObserver** afin d Voici le résultat : -![]({{ site.baseurl }}/assets/2020-01-22-lazy-load-react/image-lazy-load.gif) +![]({BASE_URL}/imgs/articles/2020-01-22-lazy-load-react/image-lazy-load.gif) Si vous voulez un effet d'image floue comme le fait le site **Medium**, c'est possible. -![]({{ site.baseurl }}/assets/2020-01-22-lazy-load-react/medium-lazy-load.jpeg) +![]({BASE_URL}/imgs/articles/2020-01-22-lazy-load-react/medium-lazy-load.jpeg) La technique la plus simple est d'afficher une image de petite taille (et donc moins lourde), et de l’étirer à la taille souhaitée. Dans notre exemple nous pouvons déclarer en paramètre de placeholder l'image que nous adapterons au contenu grâce au CSS. @@ -187,7 +187,7 @@ La technique la plus simple est d'afficher une image de petite taille (et donc m Voici le résultat : -![]({{ site.baseurl }}/assets/2020-01-22-lazy-load-react/image-lazy-load-blur.gif) +![]({BASE_URL}/imgs/articles/2020-01-22-lazy-load-react/image-lazy-load-blur.gif) Et ceci n'est qu'un exemple parmi tant d'autres. diff --git a/_articles/fr/2020-02-05-open-street-map-une-alternative-a-google-map.md b/_articles/fr/2020-02-05-open-street-map-une-alternative-a-google-map.md index 468ee736a..23478958e 100644 --- a/_articles/fr/2020-02-05-open-street-map-une-alternative-a-google-map.md +++ b/_articles/fr/2020-02-05-open-street-map-une-alternative-a-google-map.md @@ -101,7 +101,7 @@ Sans oublier le SCSS, sinon la carte ne s'affiche pas } ``` -![]({{ site.baseurl }}/assets/2020-02-05-open-street-map-une-alternative-a-google-map/init-map.jpeg) +![]({BASE_URL}/imgs/articles/2020-02-05-open-street-map-une-alternative-a-google-map/init-map.jpeg) ## Chercher une adresse Notre besoin est le suivant : lorsque je commence à entrer une adresse ou le nom de mon bar favori, je voudrais avoir une liste déroulante qui affiche les différentes propositions sans utiliser Google. Lorsque je clique sur une adresse, un marqueur s'affiche sur la carte. @@ -147,7 +147,7 @@ _search () { Il existe, en HTML 5, un composant natif ``navigator.geolocation`` pour géolocaliser la personne. Pas de panique, lorsque l'on utilise une pop-in demandant l'autorisation s'affiche : -![]({{ site.baseurl }}/assets/2020-02-05-open-street-map-une-alternative-a-google-map/pop-in.jpeg) +![]({BASE_URL}/imgs/articles/2020-02-05-open-street-map-une-alternative-a-google-map/pop-in.jpeg)

Important

@@ -217,7 +217,7 @@ _getCurrentPosition() { }); } ``` -![]({{ site.baseurl }}/assets/2020-02-05-open-street-map-une-alternative-a-google-map/current-position-js.jpeg) +![]({BASE_URL}/imgs/articles/2020-02-05-open-street-map-une-alternative-a-google-map/current-position-js.jpeg) ### Étape 2 : Localisation en PHP diff --git a/_articles/fr/2020-02-11-cheat-sheet-docker.md b/_articles/fr/2020-02-11-cheat-sheet-docker.md index 183631a1f..1f99c0312 100644 --- a/_articles/fr/2020-02-11-cheat-sheet-docker.md +++ b/_articles/fr/2020-02-11-cheat-sheet-docker.md @@ -25,6 +25,6 @@ Nous avons créé pour vous une Cheat Sheet qui vous permettra de retrouver rapi [Pour télécharger la cheat sheet, cliquez ici](http://bit.ly/cheat-sheet-Docker) -![cheat-sheet-docker]({{site.baseurl}}/assets/2020-02-11-cheat-sheet-docker/button.png) +![cheat-sheet-docker]({BASE_URL}/imgs/articles/2020-02-11-cheat-sheet-docker/button.png) Des questions, ou simplement envie d'échanger sur ce sujet ? N'hésitez pas à laisser un commentaire :) diff --git a/_articles/fr/2020-03-10-introduction-a-arangodb-part-1.md b/_articles/fr/2020-03-10-introduction-a-arangodb-part-1.md index 837436a8f..3cd55ebfb 100644 --- a/_articles/fr/2020-03-10-introduction-a-arangodb-part-1.md +++ b/_articles/fr/2020-03-10-introduction-a-arangodb-part-1.md @@ -18,7 +18,7 @@ keywords: - base de données multi-modèles - graphe --- -![]({{ site.baseurl }}/assets/2020-03-10-introduction-a-arangodb-part-1/ArangoDB_logo.webp) +![]({BASE_URL}/imgs/articles/2020-03-10-introduction-a-arangodb-part-1/ArangoDB_logo.webp) ## ArangoDB c'est quoi? ArangoDB est une base de données multi-modèles, ce qui veut dire qu'elle prend en charge plusieurs types de données nativement. @@ -49,7 +49,7 @@ ArangoDB vient également avec des notions de réseau et vous laisse choisir ent - l'instance de base de données (DB Server) : responsable de l'écriture et lecture des données. -![]({{ site.baseurl }}/assets/2020-03-10-introduction-a-arangodb-part-1/cluster.webp) +![]({BASE_URL}/imgs/articles/2020-03-10-introduction-a-arangodb-part-1/cluster.webp) ## Installation @@ -69,14 +69,14 @@ docker run -p 8529:8529 -e ARANGO_ROOT_PASSWORD=rocketEleven arangodb/arangodb:3 ## Interface Même si Arango de base expose par défaut une API REST pour pouvoir communiquer via le protocole HTTP, une interface graphique est également disponible. Pour nous ce sera à l'adresse [http://localhost:8529](http://localhost:8529). -![]({{ site.baseurl }}/assets/2020-03-10-introduction-a-arangodb-part-1/login.webp) +![]({BASE_URL}/imgs/articles/2020-03-10-introduction-a-arangodb-part-1/login.webp) Le login admin par défaut est "root", et le mot de passe est celui fourni dans la ligne de commande ci-dessus, en l'occurrence "rocketEleven". -![]({{ site.baseurl }}/assets/2020-03-10-introduction-a-arangodb-part-1/selectDBView.webp) +![]({BASE_URL}/imgs/articles/2020-03-10-introduction-a-arangodb-part-1/selectDBView.webp) Chaque serveur a par défaut une base de données "_system", sélectionnez-la. -![]({{ site.baseurl }}/assets/2020-03-10-introduction-a-arangodb-part-1/dashboard.png) +![]({BASE_URL}/imgs/articles/2020-03-10-introduction-a-arangodb-part-1/dashboard.png) Nous accédons enfin au dashboard de l'instance, qui présente quelques statistiques (le nombre de requêtes par seconde, le type de requête, le nombre de connexions, mémoire, CPU, etc) À savoir que par défaut ArangoDB choisit l'architecture "single instance". Si on avait choisi le mode "cluster" nous aurions eu des statistiques sur les nœuds le composant (Coordinator, DB Server, Agency) ainsi que leurs endpoints. diff --git a/_articles/fr/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu.md b/_articles/fr/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu.md index 439972d8f..c1cd8f357 100644 --- a/_articles/fr/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu.md +++ b/_articles/fr/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu.md @@ -37,7 +37,7 @@ Voici des éléments déclencheurs -parmi tant d’autres- d’une **Guerre du B Et pour vous lancer dans cette véritable course contre la montre, vous faire des alliés et pacifier le développement du Produit, voici trois premières **méthodes de priorisation du Backlog** qui pourront très certainement vous accompagner. -![]({{ site.baseurl }}/assets/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu/scoffield-and-blake.jpg) +![]({BASE_URL}/imgs/articles/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu/scoffield-and-blake.jpg) ## Tactique numéro 1 : l’oeil de MoSCoW @@ -74,7 +74,7 @@ Les participants sélectionnent des post-it et viennent les placer dans les diff Ils devront dans un second temps échanger sur les post-its qui font débat. Il est important de bien cadrer l’atelier pour équilibrer le nombre de post-its dans les différentes catégories. Si trop de tickets sont encore en Must Have ou Should Have, demandez aux participants de débattre à nouveau sur les éléments en Must Have pour n’en garder qu’un nombre défini. Répétez l’opération sur les Should Have jusqu’à l’obtention d’un nombre cohérent d’éléments dans chaque catégorie. -![]({{ site.baseurl }}/assets/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu/MoSCoW.jpg) +![]({BASE_URL}/imgs/articles/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu/MoSCoW.jpg) *Cette méthode peut s’avérer inefficace si les différentes parties prenantes manquent d’objectivité ou si les relations sont très conflictuelles entre les différents services. Elle présente néanmoins l’intérêt d’aligner tous les métiers sur des objectifs communs lors d’un atelier assez simple à mettre en place. Cet atelier pourra être répété à intervalle régulier et est un bon moyen d’engager vos parties prenantes !* @@ -155,7 +155,7 @@ Le calcul de l’indicateur WSJF tiendra compte des valeurs suivantes : Pour chacune des valeurs, vous pourrez utiliser la suite de Fibonacci pour les noter. -![]({{ site.baseurl }}/assets/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu/WSJF.jpg) +![]({BASE_URL}/imgs/articles/2020-03-25-la-guerre-du-backlog-n-aura-pas-lieu/WSJF.jpg) Une fois les différentes valeurs notées, vous voilà prêt pour le grand calcul. diff --git a/_articles/fr/2020-03-30-extensions-navigateur.md b/_articles/fr/2020-03-30-extensions-navigateur.md index dc1c4bc67..458ed385d 100644 --- a/_articles/fr/2020-03-30-extensions-navigateur.md +++ b/_articles/fr/2020-03-30-extensions-navigateur.md @@ -20,7 +20,7 @@ keywords: Depuis le début de l’existence des navigateurs, il est possible de les customiser afin d’y ajouter des fonctionnalités. Cela se présentait d'abord presque exclusivement sous la forme de barres d’outils à l'utilité douteuse, pour plus tardivement proposer des extensions présentant un véritable gain pour l’utilisateur. On pourra citer pour les plus connues : µBlock, React Developper Tools, DownloadHelper... Certaines dans d'entre elles ont même été intégrées aux navigateurs. -![]({{ site.baseurl }}/assets/2020-03-30-extensions-navigateur/ie_bar.png) +![]({BASE_URL}/imgs/articles/2020-03-30-extensions-navigateur/ie_bar.png) Ces extensions sont aujourd’hui développées sur la base de Javascript, HTML et CSS. Ce qui rend facile leur accessibilité. Tous les principaux navigateurs se sont accordés autour d’une seule et même API, à quelques légères différences près. Safari par contre continue à utiliser sa propre structure. @@ -118,13 +118,13 @@ browser.storage.sync.set({ ``` On poura éditer cette configuation dans les propriétés de l'extension dans `about:addons` -![]({{ site.baseurl }}/assets/2020-03-30-extensions-navigateur/web_extension_config.png) +![]({BASE_URL}/imgs/articles/2020-03-30-extensions-navigateur/web_extension_config.png) ## Installation Pour installer temporairement son extension il suffit d’ouvrir dans Firefox `about:debugging` et de cliquer sur « Charger un module complémentaire temporaire… » et de sélectionner son fichier manifest.json. Cela nous permet aussi de pouvoir la débuguer. Afin de créer son package .xpi, il faudra passer par la [validation de Mozilla](https://extensionworkshop.com/documentation/publish/submitting-an-add-on/) qui contrôlera la validité du code et signera l’extension. Elle pourra ensuite être distribuée ou même ajoutée dans le store. -![]({{ site.baseurl }}/assets/2020-03-30-extensions-navigateur/web_extension.png) +![]({BASE_URL}/imgs/articles/2020-03-30-extensions-navigateur/web_extension.png) ## La suite Il reste beaucoup à améliorer : diff --git a/_articles/fr/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II.md b/_articles/fr/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II.md index 63f9924fe..c929d956d 100644 --- a/_articles/fr/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II.md +++ b/_articles/fr/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II.md @@ -35,13 +35,13 @@ Dans notre [premier article](https://blog.eleven-labs.com/fr/la-guerre-du-backlo Alors si la guerre du produit est déclarée, voici trois nouvelles méthodologies pour upgrader votre arsenal, “votre stuff”. -![]({{ site.baseurl }}/assets/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II/product-warzone.png) +![]({BASE_URL}/imgs/articles/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II/product-warzone.png) # Tactique numéro 4 : RICE, la bataille de l’impact La méthode **RICE** a été créée par l’équipe d’Intercom, plateforme de centralisation des échanges clients, pour ses propres besoins de priorisation produit. -![]({{ site.baseurl }}/assets/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II/rice-4-piliers.png) +![]({BASE_URL}/imgs/articles/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II/rice-4-piliers.png) Source : Intercom - Illustration: Maddie Edgar @@ -107,7 +107,7 @@ Il s’agit d’estimer un **pourcentage entre 0 et 100 de confiance en la featu Appliquez la formule suivante pour calculer votre score RICE pour chacune des features. -![]({{ site.baseurl }}/assets/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II/rice-formule-de-calcul.png) +![]({BASE_URL}/imgs/articles/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II/rice-formule-de-calcul.png) Source : Intercom - Illustration: Maddie Edgar @@ -184,7 +184,7 @@ N’hésitez pas à rephraser pour les questions dysfonctionnelles pour permettr Chacune des fonctionnalités pourra à la suite des entretiens avec les utilisateurs être située sur la grille suivante : -![]({{ site.baseurl }}/assets/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II/evaltable-kano-model.png) +![]({BASE_URL}/imgs/articles/2020-04-08-la-guerre-du-backlog-n-aura-pas-lieu-part-II/evaltable-kano-model.png) Source : © Daniel Zacarias - Folding Burritos diff --git a/_articles/fr/2020-04-15-visual-regression-testing.md b/_articles/fr/2020-04-15-visual-regression-testing.md index 651f23cc5..25de958e8 100644 --- a/_articles/fr/2020-04-15-visual-regression-testing.md +++ b/_articles/fr/2020-04-15-visual-regression-testing.md @@ -40,7 +40,7 @@ C'est également très pratique si le support ne peut accepter une politique de C'est donc tout naturellement qu'un nouveau type de test est née: les tests de régression visuelle. -![principe de la régression visuelle]({{ site.baseurl }}/assets/2020-04-15-visual-regression-testing/regressionvisuelle.gif) +![principe de la régression visuelle]({BASE_URL}/imgs/articles/2020-04-15-visual-regression-testing/regressionvisuelle.gif) Le but de la régression visuelle est de détecter les changements d'apparence qui ne saurait être mesuré finement, via les snapshots Jest ou les tests unitaires, sachant que le test visuelle est fastidieux pour le développeur et parfois l'erreur ou sa source ne sont pas détectable à l'oeil nu. @@ -56,7 +56,7 @@ On se rend donc compte pourquoi Storybook est si apprécié, il offre un environ Bon pour ceux qui m'ont déjà perdu, je vous ai fait un beau dessin pour illustrer les 3 niveaux de test d'un composant (un bouton) incrémentant un compteur de 1 à chaque clic. -![Les 3 niveaux de test d'un composant]({{ site.baseurl }}/assets/2020-04-15-visual-regression-testing/Untitled.png) +![Les 3 niveaux de test d'un composant]({BASE_URL}/imgs/articles/2020-04-15-visual-regression-testing/Untitled.png) > Super ta régression visuelle Manu mais au final, j'ai des yeux et pour voir les différences, ça suffit. @@ -95,7 +95,7 @@ Allez, venez, laissez faire l'insouciance et entrez dans la danse. --- -![Simba à bien changé entre 2 versions]({{ site.baseurl }}/assets/2020-04-15-visual-regression-testing/Untitled1.png) +![Simba à bien changé entre 2 versions]({BASE_URL}/imgs/articles/2020-04-15-visual-regression-testing/Untitled1.png) Chroma s'articule sur 3 points: @@ -109,7 +109,7 @@ S'ajoute alors tout le sel pour agrémenter ces features: - Gestion des viewports pour les composants responsive, - Gestion de version des composants (permettant des rollbacks) -![Chromatic workflow]({{ site.baseurl }}/assets/2020-04-15-visual-regression-testing/workflow-chromatic.gif) +![Chromatic workflow]({BASE_URL}/imgs/articles/2020-04-15-visual-regression-testing/workflow-chromatic.gif) L'installation est relativement simple: diff --git a/_articles/fr/2020-04-29-munin-monitoring-odin.md b/_articles/fr/2020-04-29-munin-monitoring-odin.md index 18c1ff57f..c7f2631c3 100644 --- a/_articles/fr/2020-04-29-munin-monitoring-odin.md +++ b/_articles/fr/2020-04-29-munin-monitoring-odin.md @@ -84,7 +84,7 @@ sudo service munin-node restart Les fichiers statiques de l’interface web devraient maintenant être disponibles dans le dossier indiqué précédemment dans la configuration (ligne `htmldir`) : -![]({{ site.baseurl }}/assets/2020-04-29-munin-monitoring-odin/eleven-master.png) +![]({BASE_URL}/imgs/articles/2020-04-29-munin-monitoring-odin/eleven-master.png) Le monitoring de votre machine “Master” est donc bien en place. Voyons maintenant la suite. @@ -141,6 +141,6 @@ sudo service munin-node restart Au bout de quelques minutes, le temps que Munin récupère les informations du Node fraîchement ajouté, vous devriez voir apparaître votre seconde machine dans l’interface web : -![]({{ site.baseurl }}/assets/2020-04-29-munin-monitoring-odin/eleven-node.png) +![]({BASE_URL}/imgs/articles/2020-04-29-munin-monitoring-odin/eleven-node.png) Votre instance de Munin est maintenant en place. Vous pouvez à tout moment configurer des outils de monitoring spécifiques (apache, mysql, nginx, etc) grace aux [plugins issus de la communauté](http://gallery.munin-monitoring.org/), il y a beaucoup de choses très utiles. diff --git a/_articles/fr/2020-05-06-php-serverless-part-1.md b/_articles/fr/2020-05-06-php-serverless-part-1.md index 7219a6b93..27e337aad 100644 --- a/_articles/fr/2020-05-06-php-serverless-part-1.md +++ b/_articles/fr/2020-05-06-php-serverless-part-1.md @@ -59,7 +59,7 @@ Une autre contrainte est la **durée d'exécution maximale** d'une fonction. Ell Il existe aussi des **limitations** liées à la mémoire, la taille maximum des packages que vous déployez et à l'espace disque disponible. Ci-dessous un extrait des limitations d'AWS Lambda pour vous donner une idée. -![]({{ site.baseurl }}/assets/2020-05-06-php-serverless-part-1/aws-limitations.png) +![]({BASE_URL}/imgs/articles/2020-05-06-php-serverless-part-1/aws-limitations.png) Un autre point à garder en tête est que le **prix** de notre infrastructure peut être **imprévisible**. Etant donné que le fournisseur Cloud s'occupe de tout, nous n'avons aucun contrôle sur la façon dont il gère les ressources. En cas d’événement imprévu qui solliciterait beaucoup nos fonctions serverless, le prix pourrait alors grimper. Rassurez-vous, il est néanmoins possible de créer des alertes et d'être notifié par votre fournisseur Cloud si vous dépassez un certain montant. diff --git a/_articles/fr/2020-05-13-php-serverless-part-2.md b/_articles/fr/2020-05-13-php-serverless-part-2.md index 664df2325..3eecf6597 100644 --- a/_articles/fr/2020-05-13-php-serverless-part-2.md +++ b/_articles/fr/2020-05-13-php-serverless-part-2.md @@ -380,7 +380,7 @@ layers: L'URL à laquelle mon application est accessible est indiquée dans les endpoints. Voici donc le résultat : -![]({{ site.baseurl }}/assets/2020-05-07-php-serverless-part-2/example.png) +![]({BASE_URL}/imgs/articles/2020-05-07-php-serverless-part-2/example.png) Nous avons terminé ! Nous venons de déployer une application Symfony sur AWS Lambda en utilisant Bref. Comme vous avez vu, c'est assez simple au final... diff --git a/_articles/fr/2020-05-20-vous-utilisez-mal-les-states.md b/_articles/fr/2020-05-20-vous-utilisez-mal-les-states.md index db5a6c8df..c67bdb848 100644 --- a/_articles/fr/2020-05-20-vous-utilisez-mal-les-states.md +++ b/_articles/fr/2020-05-20-vous-utilisez-mal-les-states.md @@ -32,7 +32,7 @@ Un **état** (ou **state** dans la langue de Shakespeare) est un ensemble de var Maintenant que nous avons rappelé les bases, regardons maintenant ce qui est bien et ce qui ne l'est pas. -![]({{ site.baseurl }}/assets/2020-05-20-vous-utilisez-mal-les-states/bien-pas-bien.gif) +![]({BASE_URL}/imgs/articles/2020-05-20-vous-utilisez-mal-les-states/bien-pas-bien.gif) ## Tu ne muteras point ton état diff --git a/_articles/fr/2020-08-05-construire-le-story-mapping-de-votre-batmobile.md b/_articles/fr/2020-08-05-construire-le-story-mapping-de-votre-batmobile.md index 8ba51e2cf..8af5de2ba 100644 --- a/_articles/fr/2020-08-05-construire-le-story-mapping-de-votre-batmobile.md +++ b/_articles/fr/2020-08-05-construire-le-story-mapping-de-votre-batmobile.md @@ -101,17 +101,17 @@ Dans mon exemple précédent, je peux typiquement définir les EPICS suivantes : Ces EPICS sont à écrire sur des post-its et à placer sur votre axe horizontal, celui de la “timeline”, qui représente le déroulé des actions de votre utilisateur dans le temps. -![]({{ site.baseurl }}/assets/2020-08-05-construire-le-story-mapping-de-votre-batmobile/EPICS-StoryMapping.PNG) +![]({BASE_URL}/imgs/articles/2020-08-05-construire-le-story-mapping-de-votre-batmobile/EPICS-StoryMapping.PNG) Pour le moment, celui-ci est très large en terme de scope, et c’est normal. Le but étant maintenant, sous chaque EPIC, de rentrer un peu plus dans le détail. Nous allons donc rajouter de nouveaux post-it : les “Features”. Qui représentent les fonctionnalités macro à développer dans chaque EPIC. -![]({{ site.baseurl }}/assets/2020-08-05-construire-le-story-mapping-de-votre-batmobile/Features_StoryMapping.PNG) +![]({BASE_URL}/imgs/articles/2020-08-05-construire-le-story-mapping-de-votre-batmobile/Features_StoryMapping.PNG) Puis, sous ces features, nous allons maintenant pouvoir rajouter toutes les tâches - qui seront directement vos user stories - que cet utilisateur va pouvoir y faire ! -![]({{ site.baseurl }}/assets/2020-08-05-construire-le-story-mapping-de-votre-batmobile/US-StoryMapping.PNG) +![]({BASE_URL}/imgs/articles/2020-08-05-construire-le-story-mapping-de-votre-batmobile/US-StoryMapping.PNG) Vous vous demandez sûrement pourquoi mes post-its “User Stories” sont répartis et séparés par des traits ? Nous y arrivons tout de suite dans la dernière étape ! @@ -125,7 +125,7 @@ Vous pouvez vous servir du [dot voting](https://blog.myagilepartner.fr/index.php Vous arriverez donc à la suite de cette répartition à cela : -![]({{ site.baseurl }}/assets/2020-08-05-construire-le-story-mapping-de-votre-batmobile/Release-StoryMapping.PNG) +![]({BASE_URL}/imgs/articles/2020-08-05-construire-le-story-mapping-de-votre-batmobile/Release-StoryMapping.PNG) De cette manière, vous allez pouvoir laisser en place vos EPICS et Features comme ils sont, puis regrouper toutes vos user stories qui font parties de votre MVP. Tracez ensuite un trait sous ce premier regroupement. Félicitations, vous avez là la constitution de votre premier release ! @@ -133,7 +133,7 @@ Faites ensuite le même travail pour définir les éléments qui sont selon vous Voici la représentation globale de mon Story Mapping, à laquelle vous avez également accès ici : -![]({{ site.baseurl }}/assets/2020-08-05-construire-le-story-mapping-de-votre-batmobile/Global-StoryMapping.PNG) +![]({BASE_URL}/imgs/articles/2020-08-05-construire-le-story-mapping-de-votre-batmobile/Global-StoryMapping.PNG) ## Keep the Story Map Alive diff --git a/_articles/fr/2020-08-12-deno-vs-node.md b/_articles/fr/2020-08-12-deno-vs-node.md index aff4336f8..d18fb6aa9 100644 --- a/_articles/fr/2020-08-12-deno-vs-node.md +++ b/_articles/fr/2020-08-12-deno-vs-node.md @@ -22,7 +22,7 @@ Jetons un coup d'œil aux 5 principales nouveautés qu'offre Deno aux développe ## 1. Du Javascript moderne (ES Modules) -![]({{ site.baseurl }}/assets/2020-08-12-deno-vs-node/modern.png) +![]({BASE_URL}/imgs/articles/2020-08-12-deno-vs-node/modern.png) Si vous êtes un développeur React, vous avez remarqué que la syntaxe d'importation des packages est différente lorsque vous travaillez avec NodeJS. En effet, Node a été créé en 2009, il y a eu de nombreuses mises à jour et améliorations de Javascript depuis lors. @@ -66,7 +66,7 @@ const moment = require("moment") De plus, chaque fois que quelqu'un souhaite exécuter votre dépôt NodeJS localement, il doit installer toutes les dépendances de NPM. Dans Deno, le package est importé à partir d'une URL, donc si vous voulez utiliser moment, vous importez simplement [https://deno.land/x/moment/moment.ts](https://deno.land/x/moment/moment.ts). -![]({{ site.baseurl }}/assets/2020-08-12-deno-vs-node/moment.jpeg) +![]({BASE_URL}/imgs/articles/2020-08-12-deno-vs-node/moment.jpeg) Un autre énorme avantage en ce qui concerne les packages dans Deno, c'est que **chaque package est mis en cache sur le disque dur après l'installation**. @@ -75,7 +75,7 @@ Si vous souhaitez importer à nouveau la dépendance, n'importe où, il ne sera ## 3. Await en top level : Utiliser Await en dehors d'une fonction asynchrone -![]({{ site.baseurl }}/assets/2020-08-12-deno-vs-node/await.png) +![]({BASE_URL}/imgs/articles/2020-08-12-deno-vs-node/await.png) Dans Node, le mot clé *await* n'est accessible que dans une fonction asynchrone. Avec Deno, vous pouvez l'utiliser n'importe où, sans l'encapsuler dans une fonction asynchrone. @@ -84,7 +84,7 @@ Cette mise à niveau rend le code beaucoup plus propre et simple. ## 4. TypeScript natif, aucune configuration nécessaire -![]({{ site.baseurl }}/assets/2020-08-12-deno-vs-node/type.jpeg) +![]({BASE_URL}/imgs/articles/2020-08-12-deno-vs-node/type.jpeg) Faire fonctionner TypeScript avec NodeJS est un processus en plusieurs étapes. Vous devez installer Typescript, mettre à jour package.json, tsconfig.json et vous assurer que vos modules prennent en charge @types. @@ -114,7 +114,7 @@ ainsi que tout autre élément dans l'API du navigateur sans installer de librai Lorsqu'il est combiné avec l'avantage top level d'*await*, vous pouvez maintenant voir à quel point le code Deno est plus simple que le code Node : -![]({{ site.baseurl }}/assets/2020-08-12-deno-vs-node/api.jpeg) +![]({BASE_URL}/imgs/articles/2020-08-12-deno-vs-node/api.jpeg) ## Ça ne s'arrête pas là diff --git a/_articles/fr/2020-08-26-a-la-decouverte-de-mercure.md b/_articles/fr/2020-08-26-a-la-decouverte-de-mercure.md index 57949ab3a..fcbe8db5e 100644 --- a/_articles/fr/2020-08-26-a-la-decouverte-de-mercure.md +++ b/_articles/fr/2020-08-26-a-la-decouverte-de-mercure.md @@ -23,7 +23,7 @@ keywords: Aujourd'hui, je vous fais découvrir ce qu'est [Mercure](https://mercure.rocks/), ses principes, puis on apprendra comment le mettre en place simplement avec Docker. Mercure est un sérieux concurrent aux classiques WebSockets et autres solutions similaires, car il tire parti de nombreuses nouveautés du Web (HTTP/2, SSE, ...) et est supporté nativement par la plupart des navigateurs. -![Logo de Mercure]({{ site.baseurl }}/assets/2020-08-26-a-la-decouverte-de-mercure/mercure_logo.png) +![Logo de Mercure]({BASE_URL}/imgs/articles/2020-08-26-a-la-decouverte-de-mercure/mercure_logo.png) En clair, c'est un **protocole** qui permet d'envoyer des push updates vers tout client HTTP. @@ -57,7 +57,7 @@ Mercure utilise les SSE (Server Sent Events) pour pousser ses Updates
-![Schéma du fonctionnement de Mercure]({{ site.baseurl }}/assets/2020-08-26-a-la-decouverte-de-mercure/mercure.png) +![Schéma du fonctionnement de Mercure]({BASE_URL}/imgs/articles/2020-08-26-a-la-decouverte-de-mercure/mercure.png) C'est bon, vous avez tout compris... Plus qu'à mettre en pratique ! @@ -163,7 +163,7 @@ Voilà qui conclut un très rapide tour d'horizon de Mercure. Vous savez à présent comment il fonctionne, et vous êtes capables de le configurer et l'utiliser simplement dans n'importe laquelle de vos applications. Bien évidemment, ce protocole est beaucoup plus complet qu'il n'y parait, et il y aurait beaucoup d'autres choses à dire, mais je n'en dévoilerai pas plus dans cet article d'introduction. -![GIF Keep your secrets]({{ site.baseurl }}/assets/2020-08-26-a-la-decouverte-de-mercure/keep_your_secrets.gif) +![GIF Keep your secrets]({BASE_URL}/imgs/articles/2020-08-26-a-la-decouverte-de-mercure/keep_your_secrets.gif) Cependant, un codelabs est prévu très bientôt pour approfondir tout cela, et découvrir plein d'autres choses, notamment comment sécuriser les connexions, utiliser Mercure dans une application Symfony... Le tout sur la plateforme [Eleven's Codelabs](https://codelabs.eleven-labs.com/). diff --git a/_articles/fr/2020-09-02-test-e2e-cypress.md b/_articles/fr/2020-09-02-test-e2e-cypress.md index 43a0148de..464e62e3c 100644 --- a/_articles/fr/2020-09-02-test-e2e-cypress.md +++ b/_articles/fr/2020-09-02-test-e2e-cypress.md @@ -14,17 +14,17 @@ authors: keywords: [] --- -![Logo Cypress]({{ site.baseurl }}/assets/2020-09-02-test-e2e-cypress/cypress-logo.png) +![Logo Cypress]({BASE_URL}/imgs/articles/2020-09-02-test-e2e-cypress/cypress-logo.png) Les tests sont devenus un aspect essentiel du développement web, pour ces deux raisons : **vérifier** que l’application fonctionne correctement et **garantir** la meilleure expérience utilisateur possible. Il existe différents types de tests mais aujourd’hui nous allons nous concentrer principalement sur les **tests End-to-end** et comment les implémenter avec **[Cypress](https://cypress.io/)**. ## Que sont les tests end to end ? -![Pyramide des coûts et quantités selon les tests]({{ site.baseurl }}/assets/2020-09-02-test-e2e-cypress/pyramid.png) +![Pyramide des coûts et quantités selon les tests]({BASE_URL}/imgs/articles/2020-09-02-test-e2e-cypress/pyramid.png) Tout d’abord avant de parler des tests end-to-end, il faut que je vous explique les deux premières couches de cette pyramide (on ne peut pas arriver au sommet sans grimper la montagne). -![GIF Alright]({{ site.baseurl }}/assets/2020-09-02-test-e2e-cypress/alright.gif) +![GIF Alright]({BASE_URL}/imgs/articles/2020-09-02-test-e2e-cypress/alright.gif) **Les tests unitaires (TU)** constituent le socle des tests d’une application. Les TU permettent de tester uniquement un élément individuel de l’application (classe, fonction…). @@ -43,7 +43,7 @@ Cypress est un framework JS de tests end-to-end. C’est un outil open source pe Par rapport à d’autres outils de tests e2e, Cypress n’a pas besoin d’être couplé à une solution ni à un driver pour sa mise en place. Sa mission est de rendre l’écriture des tests plus rapide (tests exécutés sur le navigateur), plus facile (écriture des tests en JavaScript avec Mocha, Chai et Sinon) et encore plus fiable (visibilité des tests effectués sur le navigateur, screenshot de l’erreur). -![Schéma avant et après Cypress]({{ site.baseurl }}/assets/2020-09-02-test-e2e-cypress/cypress-details.png) +![Schéma avant et après Cypress]({BASE_URL}/imgs/articles/2020-09-02-test-e2e-cypress/cypress-details.png) Ce qui m'a poussé à vous parler aujourd'hui de Cypress est le fait que lors d'un projet j'ai eu l'occasion de pouvoir l'utiliser et de constater la simplicité d'installation et d'écriture des tests mais aussi la robustesse de l'outil. @@ -82,7 +82,7 @@ Une fois l'installation terminée, on va ajouter une commande dans le champ `scr ``` Cette commande va nous permettre de démarrer l'interface d'exécution de tests de Cypress. Comme vous pouvez le voir sur la photo ci-dessous, des fichiers de tests sont affichés sur l'interface de Cypress. Ces fichiers ont été créés lors de l'exécution de la commande. Pour tester sur différents navigateurs, Cypress va tenter de trouver tous les navigateurs compatibles sur la machine. À l'heure où j'écris cet article, Cypress peut effectuer les scénarios de tests sur `Chrome`, `Chromium`, `Electron` et `Firefox`. -![Cypress test runner]({{ site.baseurl }}/assets/2020-09-02-test-e2e-cypress/cypress-test-runner.png) +![Cypress test runner]({BASE_URL}/imgs/articles/2020-09-02-test-e2e-cypress/cypress-test-runner.png) L'exécution du script `yarn cypress` n'a pas seulement généré des fichiers de tests, mais aussi une architecture placée à la racine du code de votre application. @@ -195,11 +195,11 @@ context("Login and buy stuff", () => { Lorsque vous souhaitez tester votre scénario, il suffit de cliquer sur le scénario voulu dans l'interface de Cypress et ce dernier le lancera dans le navigateur qui a été sélectionné. Chaque ligne du test est répertoriée en détails (action, temps ...) sur l'interface de Cypress, la description des tests est séparée comme dans le code (`context`, `describe`, `it`). -![Cypress tests succeed]({{ site.baseurl }}/assets/2020-09-02-test-e2e-cypress/cypress-succeed.png) +![Cypress tests succeed]({BASE_URL}/imgs/articles/2020-09-02-test-e2e-cypress/cypress-succeed.png) Lorsque le test échoue, l'interface permet de débugger assez rapidement grâce aux messages d'erreurs assez explicites et aux snapshots de l'état avant et après au niveau du test qui a échoué. -![Cypress tests failed]({{ site.baseurl }}/assets/2020-09-02-test-e2e-cypress/cypress-failed.png) +![Cypress tests failed]({BASE_URL}/imgs/articles/2020-09-02-test-e2e-cypress/cypress-failed.png) ## Conclusion diff --git a/_articles/fr/2020-09-08-gerer-son-organisation-github-avec-terraform.md b/_articles/fr/2020-09-08-gerer-son-organisation-github-avec-terraform.md index b011b1259..2fe8fccfa 100644 --- a/_articles/fr/2020-09-08-gerer-son-organisation-github-avec-terraform.md +++ b/_articles/fr/2020-09-08-gerer-son-organisation-github-avec-terraform.md @@ -238,7 +238,7 @@ réutilisables pour abstraire une partie de la complexité. Nous en profiterons pour ajouter de nouvelles resources à ces modules afin d'ajouter les arguments optionnels sur les resources ainsi que la création des resources de protection de branches et des webhooks sur les repositories. -![Github model]({{site.baseurl}}/assets/2020-09-08-gerer-son-organisation-github-avec-terraform/github_model.png) +![Github model]({BASE_URL}/imgs/articles/2020-09-08-gerer-son-organisation-github-avec-terraform/github_model.png) #### Module repository Le premier module que nous allons réaliser est le module de gestion de repository que nous nommerons `repository`. diff --git a/_articles/fr/2020-09-23-monitorer-son-debit-internet.md b/_articles/fr/2020-09-23-monitorer-son-debit-internet.md index e925c0357..2a6335845 100644 --- a/_articles/fr/2020-09-23-monitorer-son-debit-internet.md +++ b/_articles/fr/2020-09-23-monitorer-son-debit-internet.md @@ -29,14 +29,14 @@ Après quelques recherches et la découverte de l'utilitaire [speedtest-cli](htt L'objectif étant de récupérer à intervalle régulier, d'historiser et de consulter ces mesures. -![]({{site.baseurl}}/assets/2020-09-23-monitorer-son-debit-internet/dashboard.png) +![]({BASE_URL}/imgs/articles/2020-09-23-monitorer-son-debit-internet/dashboard.png) ## Architecture globale du projet Notre projet se décompose en deux parties : d'une part le stockage et la visualisation des métriques, et d'autre part la récupération de ces métriques. Le tout sera hébergé sur un Raspberry Pi avec docker et docker-compose. -![]({{site.baseurl}}/assets/2020-09-23-monitorer-son-debit-internet/schema.png) +![]({BASE_URL}/imgs/articles/2020-09-23-monitorer-son-debit-internet/schema.png) Pour la première partie, stockage et visualisation des métriques, nous allons utiliser InfluxDB et Grafana. InfluxDB est une base de données time series conçue pour supporter des charges soutenues en lecture et en écriture. @@ -287,7 +287,7 @@ Pour vous connecter a l'interface web de Grafana, rendez vous à l'url `http://< Un écran de connexion s'affiche, utilisez le username `admin` et le mot de passe `admin` pour votre première connexion. Vous serez ensuite redirigé vers une page vous permettant de changer le mot de passe de l'utilisateur `admin`. -![]({{site.baseurl}}/assets/2020-09-23-monitorer-son-debit-internet/grafana_connect.gif) +![]({BASE_URL}/imgs/articles/2020-09-23-monitorer-son-debit-internet/grafana_connect.gif) ### Source de donnée InfluxDB @@ -303,7 +303,7 @@ renseigner le nom de la base de données `speedtest` dans la section "InfluxDB D Vous pouvez alors sauvegarder et tester la connexion (bouton "Save & Test"). -![]({{site.baseurl}}/assets/2020-09-23-monitorer-son-debit-internet/grafana_datasource.gif) +![]({BASE_URL}/imgs/articles/2020-09-23-monitorer-son-debit-internet/grafana_datasource.gif) ### Création du dashboard @@ -316,7 +316,7 @@ la zone "Import via panel json" puis chargez le (bouton "Load"). Et enfin importez le (bouton "Import"). -![]({{site.baseurl}}/assets/2020-09-23-monitorer-son-debit-internet/grafana_dashboard.gif) +![]({BASE_URL}/imgs/articles/2020-09-23-monitorer-son-debit-internet/grafana_dashboard.gif) ## Conclusion En quelques minutes nous avons mis en place une solution permettant de monitorer votre débit internet. Cependant cette diff --git a/_articles/fr/2020-09-30-meilleurs-outils-js-2020.md b/_articles/fr/2020-09-30-meilleurs-outils-js-2020.md index 8709c407a..21bcb31fa 100644 --- a/_articles/fr/2020-09-30-meilleurs-outils-js-2020.md +++ b/_articles/fr/2020-09-30-meilleurs-outils-js-2020.md @@ -65,7 +65,7 @@ Node Version Manager est un logiciel permettant de faire cohabiter plusieurs ver ## Docker -![]({{ site.baseurl }}/assets/2020-09-30-meilleurs-outils-js-2020/docker.png) +![]({BASE_URL}/imgs/articles/2020-09-30-meilleurs-outils-js-2020/docker.png) Si vous ne voulez pas vous soucier de quelle version de Node vous utilisez, il existe une solution encore plus pratique : [Docker](https://blog.eleven-labs.com/fr/cheat-sheet-docker-tout-ce-que-vous-devez-savoir/). @@ -79,7 +79,7 @@ Ils peuvent nous permettre de lancer notre application sur nos différents envir ## ESLint & Prettier -![]({{ site.baseurl }}/assets/2020-09-30-meilleurs-outils-js-2020/lint-prettier.jpg) +![]({BASE_URL}/imgs/articles/2020-09-30-meilleurs-outils-js-2020/lint-prettier.jpg) Quand on fait du travail collaboratif, parler le même langage c’est bien. Mais arriver à lire les autres c’est encore mieux. Comme il existe autant de manières de coder qu’il y a de développeurs, on a besoin d’un outil qui permette d’uniformiser notre manière d'écrire pour permettre de nous concentrer sur d’autres aspects de notre travail. Ce genre d’outils existe et se nomme “linteur”. Il en existe pour à peu près tous les langages et celui de javascript s'appelle [ESLint](https://eslint.org/). Il marche grâce à un système de “rules” qui peuvent être décrites dans un fichier spécifique inclus à votre projet. Parmis ces “rules” on retrouve des règles de formatage, comme par exemple le nombre de caractères maximum pour une ligne, ou la nomenclature des variables et fonctions. Mais on trouve surtout des règles de bonne pratique régissant la qualité du code qui peuvent nous prévenir d'éventuels bugs. @@ -105,7 +105,7 @@ Pour les tests End to End je vous conseille [Cypress](https://www.cypress.io/). Tous les web developers qui travaillent avec le navigateur de Google vous le diront, la console de Chrome est incroyable que ce soit pour logger, debbuger, analyser le network, etc… il existe un outil inclus. Mais à côté de toutes ces fonctionnalités qui existent aussi sur les autres navigateurs, il y en a une qui nous intéresse particulièrement, c’est Lighthouse. -![]({{ site.baseurl }}/assets/2020-09-30-meilleurs-outils-js-2020/lighthouse.jpg) +![]({BASE_URL}/imgs/articles/2020-09-30-meilleurs-outils-js-2020/lighthouse.jpg) Lighthouse est un programme open source qui permet en un clic de générer des audits de votre application pour mobile ou desktop et ce sur plusieurs aspects, qui sont: * Les performances @@ -125,7 +125,7 @@ En parlant de render, ne vous êtes vous jamais demandé pourquoi vos composants ## Storybook -![]({{ site.baseurl }}/assets/2020-09-30-meilleurs-outils-js-2020/storybook.png) +![]({BASE_URL}/imgs/articles/2020-09-30-meilleurs-outils-js-2020/storybook.png) Si comme moi vous avez adopté la méthodologie [BEM](https://blog.eleven-labs.com/fr/retour-d-experience-sur-bem/), alors vous connaissez la nécessité d’avoir des composants unitaires, avec un affichage et un comportement uniforme à chaque utilisation. Pour aider à travailler dans ce sens il existe l’outil open source [Storybook](https://storybook.js.org/), qui est disponible pour React, Vue et Angular et qui permet de facilement créer et maintenir vos composants pour une meilleure réutilisabilité. Pour en savoir plus une suite d’articles est disponible sur notre [blog](https://blog.eleven-labs.com/fr/Storybook-creer-son-premier-composant/). @@ -147,13 +147,13 @@ La gestion des versions de package npm de votre application peut être compliqu ## Bundlephobia -![]({{ site.baseurl }}/assets/2020-09-30-meilleurs-outils-js-2020/bundlephobia.png) +![]({BASE_URL}/imgs/articles/2020-09-30-meilleurs-outils-js-2020/bundlephobia.png) [Bundlephobia](https://bundlephobia.com/) est un site très pratique permettant de rechercher et d’afficher les informations d’un package npm afin de connaître son poids (minifier ou gziper), son temps de chargement ainsi que toutes ses dépendances selon ses versions. Il permet aussi de scanner votre package.json pour y retrouver toutes les informations de votre application. ## Webpack visualizer -![]({{ site.baseurl }}/assets/2020-09-30-meilleurs-outils-js-2020/webpack-visualizer.png) +![]({BASE_URL}/imgs/articles/2020-09-30-meilleurs-outils-js-2020/webpack-visualizer.png) Comme Bundlephobia, [Webpack visualizer](https://chrisbateman.github.io/webpack-visualizer/) vous permet de scanner votre application afin de connaître le poids de vos différentes librairies au sein de votre application. Cette application est spécifique aux utilisateurs de webpack et contrairement à l'outil que je vous ai montré précédemment, il existe aussi sous forme de plugin qui nous donne la possibilité de faire une analyse pour une partie spécifique de notre application. diff --git a/_articles/fr/2021-01-13-user-journey-map.md b/_articles/fr/2021-01-13-user-journey-map.md index 5ac2d6852..ad0d5e144 100644 --- a/_articles/fr/2021-01-13-user-journey-map.md +++ b/_articles/fr/2021-01-13-user-journey-map.md @@ -39,7 +39,7 @@ Dans la construction et représentation du parcours : aucune. La **Customer et l ## Comment construire votre Customer Journey Map ? -![Template de Customer Journey Map]({{ site.baseurl }}/assets/2021-01-13-user-journey-map/user-journey-map-template.png) +![Template de Customer Journey Map]({BASE_URL}/imgs/articles/2021-01-13-user-journey-map/user-journey-map-template.png) **Étape 1 : Déterminez le persona dont vous souhaitez étudier le parcours** @@ -108,7 +108,7 @@ Vous pouvez **ajouter tout autre élément utile à la qualification du parcours N’oubliez pas de prendre des photos de votre parcours réalisé en atelier et **mettez-le au propre sur un format web** pour pouvoir le diffuser facilement au sein de votre entreprise. [Miro](https://miro.com/), par exemple, propose des templates gratuits à adapter pour transposer votre Customer Journey Map. -![Exemple de customer Journey Map sur un site d'annonces immobilières]({{ site.baseurl }}/assets/2021-01-13-user-journey-map/user-journey-map-exemple.png) +![Exemple de customer Journey Map sur un site d'annonces immobilières]({BASE_URL}/imgs/articles/2021-01-13-user-journey-map/user-journey-map-exemple.png) Votre Customer Journey map est prête à être exploitée ! N’hésitez pas à la transmettre aux participants de l’atelier pour leur permettre de rectifier certaines remontées ou verbatims et compléter leurs propos. diff --git a/_articles/fr/2021-02-10-k9s.md b/_articles/fr/2021-02-10-k9s.md index 6ba5d50d3..b7f850cec 100644 --- a/_articles/fr/2021-02-10-k9s.md +++ b/_articles/fr/2021-02-10-k9s.md @@ -17,7 +17,7 @@ keywords: - kubernetes --- -![Logo k9s]({{ site.baseurl }}/assets/2021-02-10-k9s/k9s.png) +![Logo k9s]({BASE_URL}/imgs/articles/2021-02-10-k9s/k9s.png) Dans ce billet de blog je vous propose de découvrir [k9s](https://k9scli.io/), un outil graphique en ligne de commande pour *Kubernetes* qui peut faciliter la gestion des ressources d'un cluster, donner pas mal de visibilité sur son état général, et accélérer vos opérations courantes. @@ -35,7 +35,7 @@ Enfin, vous pouvez lancer k9s en lecture seule avec l'argument `--readonly`. La ## Présentation de l'interface Voici maintenant un aperçu de l'interface de k9s qui en résume les principales zones d'intérêt : -![Main k9s]({{ site.baseurl }}/assets/2021-02-10-k9s/k9s_main.png) +![Main k9s]({BASE_URL}/imgs/articles/2021-02-10-k9s/k9s_main.png) - En haut à gauche, quelques informations globales données par *k9s* telles que le nom du cluster auquel vous êtes connecté, le contexte actuellement utilisé, votre userid, votre version de k9s, etc. - Juste à droite, vous trouverez une liste de raccourcis utiles pour interagir avec k9s. Gardez dans un coin de votre tête que son contenu change en fonction de la vue active, nous y reviendrons plus tard. Notez aussi que la touche `?` ouvrira l'aide complète à tout moment. @@ -51,26 +51,26 @@ Lorsque vous serez parfaitement à l'aise avec *k9s*, vous pourrez masquer le pa ### Le mode commande La touche `:` ouvre un prompt chien (`🐶>`) au-dessus du panneau principal. C'est le mode de *k9s* qui permet d'exécuter des commandes. Il existe une commande par ressource kubernetes plus quelques autres spécifiques que nous verrons plus tard. Par exemple, `:pod⏎` bascule dans la vue *Pod* et ce sont désormais les informations sur les pods qui sont affichées dans le panneau principal. -![Le prompt du mode commande]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_dog_prompt.gif) +![Le prompt du mode commande]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_dog_prompt.gif) *k9s* fait de l'autosuggestion pour le nom des commandes. Quand je tappe `pod`, il me propose la commande `poddisruptionbudget`. - Les touches 🔼 et 🔽 permettent de naviguer circulairement entre les différentes propositions - Les touches ➡ , `tab` ou `ctrl + f` permettent de compléter automatiquement la suggestion dans le prompt (autocomplétion), sans toutefois exécuter la commande - Les touches `ctrl + u` ou `ctrl + w` permettent d'effacer la ligne sans quitter le mode commande -![Autosuggestion du mode commande]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_autosuggest.gif) +![Autosuggestion du mode commande]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_autosuggest.gif) Pratique non ? La liste complète des commandes est disponible par le raccourci `ctrl + a` ou avec `:aliases`. -![Commande Aliases]({{ site.baseurl }}/assets/2021-02-10-k9s/ctrl_a.png) +![Commande Aliases]({BASE_URL}/imgs/articles/2021-02-10-k9s/ctrl_a.png) On notera que toutes les commandes disposent d'un alias plus court qui permet d'accélérer la navigation (e.g. `:a` au lieu de `:aliases`) Si vous entrez une commande qui n'existe pas k9s vous le fera savoir avec une *cowsay* qui malheureusement ne partira pas avec la touche `esc`. Pour sortir de cette vue, il faut rejouer une commande valide comme `:pod⏎` par exemple. -![Erreur cowsay]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_cowsay.gif) +![Erreur cowsay]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_cowsay.gif) Voilà, vous savez désormais exécuter différentes commandes qui vous permettent de changer de vues. C'est déjà pas mal ! Vous êtes capables de lister les différentes ressources de votre cluster et de voir si elles sont OK ! Allons un peu plus loin maintenant. @@ -79,15 +79,15 @@ La touche `/` ouvre un prompt caniche `🐩>` qui permet d'appliquer un filtre s En reprenant notre exemple, si l'on est dans la vue pod (`:pod`) et que l'on tape `/kops⏎` on n'affichera que les *Pods* qui contiennent `kops` dans leur nom. Ce prompt supporte `Regex2` et on peut utiliser des syntaxes comme `/toto|astronaute⏎` (`toto` ou `astronaute` dans le nom du pod) ou `!tata` (tous les noms de pods qui ne contiennent pas `tata`). -![Filtre sur le nom]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_caniche_kops.gif) +![Filtre sur le nom]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_caniche_kops.gif) On peut aussi filtrer les ressources qui portent un label kubernetes avec la syntaxe `/-l =`. Dans notre exemple `/-l k8s-app=cilium` liste tous les pods qui portent le label `k8s-app=cilium` (notez bien qu'on filtre uniquement sur l'existence de label ici et pas sur le nom des pods.) -![Filtre sur les labels]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_label_search.gif) +![Filtre sur les labels]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_label_search.gif) Ce prompt fonctionne dans *toutes* les vues de *k9s* et applique le filtre sur tout ce qui est affiché dans le panneau principal. Il n'est pas réservé aux vues des ressources Kubernetes. Voyez un exemple dans la vue `aliases`. -![Mode filtre dans la vue Aliases]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_caniche_alias.gif) +![Mode filtre dans la vue Aliases]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_caniche_alias.gif) Voilà, désormais vous savez comment retrouver toutes vos petites ressources. On va pouvoir découvrir maintenant comment interagir avec elles. @@ -95,19 +95,19 @@ Voilà, désormais vous savez comment retrouver toutes vos petites ressources. O ## Le panneau des raccourcis Intéressons-nous de plus près au panneau des raccourcis. Il contient tout ce qu'il vous faut pour vos opérations courantes. Rappelez-vous que son contenu change en fonction de la vue dans laquelle vous êtes, alors pensez à vous y référer régulièrement 💡. Voici par exemple le contenu des raccourcis pour la vue pod : -![Raccourcis vue pod]({{ site.baseurl }}/assets/2021-02-10-k9s/raccourcis_vue_pod.png) +![Raccourcis vue pod]({BASE_URL}/imgs/articles/2021-02-10-k9s/raccourcis_vue_pod.png) Vous pouvez à tout moment appuyer sur la touche `?` pour afficher l'aide complète. -![Aide complète]({{ site.baseurl }}/assets/2021-02-10-k9s/full_help.png) +![Aide complète]({BASE_URL}/imgs/articles/2021-02-10-k9s/full_help.png) Globalement, un raccourci s'applique à la ligne du panneau principal en surbrillance et vous pouvez changer de ligne en utilisant les flèches de votre clavier. -![Selection de ligne]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_select_lines.gif) +![Selection de ligne]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_select_lines.gif) Les touches numériques affichées en magenta dans le panneau des raccourcis permettent de filtrer le contenu du panneau principal sur la base d'un paramètre qui change d'une vue à l'autre. Pour les pods par exemple, ces touches changent le namespace, mais pour les logs elles changent la plage temporelle à afficher. La valeur du paramètre est rappelée en magenta dans le titre du panneau principal -![Changement de namespace vue pod touche numérique]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_numeric_parameter.gif) +![Changement de namespace vue pod touche numérique]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_numeric_parameter.gif) Dans l'exemple ci-dessus, mon écran se vide lorsque je sélectionne le namespace *default* (`<2>`) car je n'ai pas de pod sur ce namespace. Pensez donc à vérifier régulièrement la valeur de ces paramètres. @@ -142,36 +142,36 @@ Dans les différentes vue de ressources, on peut trier les éléments par colonn Une petite flèche bleue se placera à coté de la colonne et indiquera le sens du tri. Appuyer plusieurs fois sur un même raccourci inverse l'ordre du tri. -![Changement ordre tri]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_sort_name.gif) +![Changement ordre tri]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_sort_name.gif) Les raccourcis de tri changent d'une vue à l'autre et la liste complète est donnée dans l'aide (touche `?`) ### Afficher des logs Dans la vue `:pod`, la touche `l` permet d'afficher des logs du pod sélectionné. Lorsque qu'un pod n'écrit pas beaucoup de logs, on est généralement confronté au message `Waiting for logs...`. -![Message waiting for logs]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_waiting_for_logs.gif) +![Message waiting for logs]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_waiting_for_logs.gif) Cette vue n'affiche en effet que les logs avec un timestamp vieux de maximum 1 minute et quand il n'y en a pas, elle attend alors qu'un log assez jeune arrive. Si vous cherchez des logs plus vieux, vous pouvez changer la plage temporelle avec les touches `0` à `5`. La durée sélectionnée est rappelée dans le titre du panneau principal représenté par la flèche rouge dans l'image ci-dessous. -![Menu log durée 1m]({{ site.baseurl }}/assets/2021-02-10-k9s/k9s_log_waiting.png) +![Menu log durée 1m]({BASE_URL}/imgs/articles/2021-02-10-k9s/k9s_log_waiting.png) On peut naviguer dans les logs à l'aide des flèches ⇞ et ⇟, toutefois, l'autoscroll est activé par défaut et forcera l'affichage vers le bas dès qu'un nouveau log arrivera. On peut activer / désactiver cette fonction avec la touche `s`. Aussi, on peut afficher / masquer l'affichage des *timestamps* avec la touche `t` N'oubliez pas également que `🐩>` fonctionne ici également. -![Menu filtre dans les logs]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_caniche_logs.gif) +![Menu filtre dans les logs]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_caniche_logs.gif) ### Ouvrir un shell dans un conteneur Dans la vue `:pod`, la touche `s` permet d'attacher un shell à un conteneur s'exécutant au sein d'un pod. Si le pod contient plusieurs conteneurs, un prompt demandera de sélectionner celui auquel on souhaite attacher un shell. Une fois le shell attaché, on peut le déconnecter en pressant `ctrl + d`. -![Shell conteneur]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_shell.gif) +![Shell conteneur]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_shell.gif) ### Upscale / Downscale des ressources Dans la vue `:statefulset` ou `:replicaset`, on peut modifier le nombre de réplica en appuyant sur la touche `s`. -![Scaling replica]({{ site.baseurl }}/assets/2021-02-10-k9s/k9s_scale_replicas.png) +![Scaling replica]({BASE_URL}/imgs/articles/2021-02-10-k9s/k9s_scale_replicas.png) ### Retrouver qui utilise une ressource Certaines vues permettent de lister les ressources qui sont consommées par d'autres ressources en utilisant la touche `u` (*used by*). Cela fonctionne pour la vue `:secrets` ou `:configmap` par exemple. @@ -179,21 +179,21 @@ Certaines vues permettent de lister les ressources qui sont consommées par d'au ### Détruire une ressource `ctrl + d` permet de détruire une ressource. L'option `cascade`, activée par défaut, permet de supprimer en plus les ressources qui lui sont associées. Détruire un déploiement en mode cascade détruira également les pods associés à ce déploiement. -![Détruire pod]({{ site.baseurl }}/assets/2021-02-10-k9s/k9s_delete_pod.png) +![Détruire pod]({BASE_URL}/imgs/articles/2021-02-10-k9s/k9s_delete_pod.png) Il est aussi possible de faire un *kill* avec `ctrl +k` pour les pods, mais faites attention, cette opération ne demande pas de confirmation ! 💣 ### Décrire / éditer une ressource Il est parfois intéressant de lire la description d'une ressource pour vérifier sa liste de labels par exemple. Pour cela on peut soit utiliser la touche `d` qui retourne la description formatée par *k9s*, soit la touche `y` pour obtenir le fichier *YAML* brut. Dans ces vues, lorsque l'on utilise le mode filtre et qu'il correspond à plusieurs résultats, on pourra naviguer vers l'occurence suivante avec la touche `n` et l'occurence précédente avec `shift+n` (pensez bien à valider le filtre avec `⏎` avant d'appuyer sur ces touches). -![Navigation mode filtre]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_describe_next_match.gif) +![Navigation mode filtre]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_describe_next_match.gif) Il est également possible d'éditer le ficher YAML correspondant à une ressource en appuyant avec `e`. Cela ouvrira votre éditeur de texte par défaut et appliquera les modifications une fois le fichier sauvegardé. ### Actions groupées On peut "marquer" des ressources pour leur appliquer une action commune (e.g. supprimer 2 pods d'un coup). On marque la ressource en surbrillance en appuyant sur `espace`. La ressource change alors de couleur et on appuiera de nouveau sur `espace` pour retirer la marque. -![Marquer une ressource]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_basic_markers.gif) +![Marquer une ressource]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_basic_markers.gif) On peut également marquer une plage de ressource. Pour cela : @@ -204,11 +204,11 @@ On peut également marquer une plage de ressource. Pour cela : Toutes les ressources de la plage sont maintenant marquées. On peut effacer toutes les marques d'un coup avec `ctrl+\`. -![Marquer une plage de ressources]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_marker_range.gif) +![Marquer une plage de ressources]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_marker_range.gif) Dès que l'on pose une marque, les actions qui peuvent s'appliquer à un groupe de ressources s'appliqueront aux ressources marquées et non pas à la ligne en surbrillance. Dans l'exemple ci-dessous mon action *killed* (`ctrl+k`) s'applique à tous les ressources marquées et pas à la ressources en surbrillance. -![Effacer tous les marqueurs]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_marker_delete.gif) +![Effacer tous les marqueurs]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_marker_delete.gif) --- @@ -218,12 +218,12 @@ Dès que l'on pose une marque, les actions qui peuvent s'appliquer à un groupe **Pulses** est un dashboard global qui permet de voir l'état de santé de votre cluster. Il affiche le nombre de ressources OK / KO au cours du temps et permet via les touches numériques ou tab de passer rapidement dans la vue la plus pertinente pour surveiller un paramètre. On active sa vue avec `:pulses` -![Vue Pulses]({{ site.baseurl }}/assets/2021-02-10-k9s/pulses.png) +![Vue Pulses]({BASE_URL}/imgs/articles/2021-02-10-k9s/pulses.png) ### Xray **Xray** est un outil qui permet de visualiser sour forme d'arborescence les dépendances entre les ressources. On active cette vue avec `:xray `. En utilisant `pod` par exemple, Xray donne l'arbre de dépendance des pods par namespaces (leurs conteneurs, configmaps, tokens, etc.) C'est très pratique pour retrouver ses petits quand on commence à avoir un cluster assez gros. -![Vue Xray]({{ site.baseurl }}/assets/2021-02-10-k9s/xray_pods.png) +![Vue Xray]({BASE_URL}/imgs/articles/2021-02-10-k9s/xray_pods.png) Dans cet exemple, mes pods sont répartis sur 5 namespaces différents (🗂), le namespace `pplogs` contient 32 pods (🚛), le pod `elastic-client-6d7cdcd4fd-nrmtc` contient 5 types de ressources différentes : @@ -232,12 +232,12 @@ Dans cet exemple, mes pods sont répartis sur 5 namespaces différents (🗂), l - 1 configmap (🗺) - 2 conteneurs (🐳) -![Gif Xray]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_xray.gif) +![Gif Xray]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_xray.gif) ### Popeye **Popeye** est un outil qui permet de tester la conformité des ressources d'un cluster selon différents critères. Chaque type de ressources se voit attribué un score de conformité et la navigation permet d'accéder aux différentes erreurs et warnings rencontrés. -![Animation Popeye]({{ site.baseurl }}/assets/2021-02-10-k9s/gif_popeye.gif) +![Animation Popeye]({BASE_URL}/imgs/articles/2021-02-10-k9s/gif_popeye.gif) --- diff --git a/_articles/fr/2021-02-22-a-la-decouverte-de-svelte.md b/_articles/fr/2021-02-22-a-la-decouverte-de-svelte.md index faadbde4b..f857d6c3d 100644 --- a/_articles/fr/2021-02-22-a-la-decouverte-de-svelte.md +++ b/_articles/fr/2021-02-22-a-la-decouverte-de-svelte.md @@ -14,7 +14,7 @@ authors: keywords: [] --- -![Logo Svelte]({{ site.baseurl }}/assets/2021-02-22-a-la-decouverte-de-svelte/svelte-logo.png) +![Logo Svelte]({BASE_URL}/imgs/articles/2021-02-22-a-la-decouverte-de-svelte/svelte-logo.png) Connaissez-vous [Svelte](https://svelte.dev/), le framework Javascript qui monte malgré le silence des médias ? Créé en 2016 par [Rich Harris](https://twitter.com/rich_harris) ([github](https://github.com/Rich-Harris)), il est arrivé en version 3 en 2019, et a reçu le _[Prediction Award de la consultation StateOfJS](https://2019.stateofjs.com/awards/#prediction_award)_ cette même année. @@ -25,7 +25,7 @@ Svelte.JS est en fait un framework _et_ un compilateur, et c’est la principale Avec cette approche, plus besoin de DOM virtuel ! On se passe également de l’étape de [calcul des différences de DOM virtuel](https://fr.reactjs.org/docs/reconciliation.html) (réconciliation) quand l’état de l'application change... encore des gains de performances ! -![Mais enfin Jérome, ça dépasserait l'entendement !]({{ site.baseurl }}/assets/2021-02-22-a-la-decouverte-de-svelte/entendement.gif?width=300) +![Mais enfin Jérome, ça dépasserait l'entendement !]({BASE_URL}/imgs/articles/2021-02-22-a-la-decouverte-de-svelte/entendement.gif?width=300) Figure: *Gagner en performance en se passant du DOM virtuel ??* @@ -118,12 +118,12 @@ L’idée principale était de copier le code du middleware de Sapper dans un no C’est donc une solution qui fonctionne, mais assez peu satisfaisante puisque l’on duplique du code déjà présent dans le framework. J’ai tout de même proposé notre solution [ici](https://github.com/sveltejs/sapper/issues/1008#issuecomment-751300133). Le point positif étant que nous avons reçu une réponse de la part d’un des contributeurs de Sapper nous disant que que les pages AMP seraient supportées dans la prochaine version majeure de Sapper ! -![phoque yeah]({{ site.baseurl }}/assets/2021-02-22-a-la-decouverte-de-svelte/yes.gif?width=300) +![phoque yeah]({BASE_URL}/imgs/articles/2021-02-22-a-la-decouverte-de-svelte/yes.gif?width=300) En fait il parle plus exactement de SvelteKit, car [il n’y aura pas de version 1.0 de Sapper](https://youtu.be/qSfdtmcZ4d0?t=76). En effet, plutôt que de proposer deux templates de projets (un pour Svelte, l’autre pour Sapper), l’équipe de Svelte souhaite offrir une solution unique qui permette de tout faire. On a encore assez peu de détails sur SvelteKit, mais l’équipe qui travaille dessus a montré la volonté de fournir un processus de migration d’un projet Sapper vers SvelteKit aussi indolore que possible. -![Soulagement]({{ site.baseurl }}/assets/2021-02-22-a-la-decouverte-de-svelte/soulagement.gif?width=300) +![Soulagement]({BASE_URL}/imgs/articles/2021-02-22-a-la-decouverte-de-svelte/soulagement.gif?width=300) diff --git a/_articles/fr/2021-03-08-les-femmes-dans-linformatique.md b/_articles/fr/2021-03-08-les-femmes-dans-linformatique.md index d275d0165..c42899df3 100644 --- a/_articles/fr/2021-03-08-les-femmes-dans-linformatique.md +++ b/_articles/fr/2021-03-08-les-femmes-dans-linformatique.md @@ -30,7 +30,7 @@ Aujourd'hui, c'est la journée internationale des droits de la femme, et nous av ### Le saviez-vous ? Dans les années 80, presque 40% des étudiants en informatique étaient des femmes. Si, si, je vous assure. -![40% des étudiants étaient des femmes]({{ site.baseurl }}/assets/2021-03-08-les-femmes-dans-linformatique/first.jpg) +![40% des étudiants étaient des femmes]({BASE_URL}/imgs/articles/2021-03-08-les-femmes-dans-linformatique/first.jpg) On ne sait pas exactement pourquoi cette tendance a brusquement changé, mais la théorie des publicités qui ont associé les ordinateurs personnels et jeux vidéos aux hommes et jeunes garçons est souvent mise en avant. @@ -85,7 +85,7 @@ Mais il y a également [41%](https://www.ncwit.org/sites/default/files/resources Parmi les raisons qui les poussent à prendre cette décision, on peut voir ceci : -![Les raisons pour lesquelles les femmes abandonnent l'informatique]({{ site.baseurl }}/assets/2021-03-08-les-femmes-dans-linformatique/second.png) +![Les raisons pour lesquelles les femmes abandonnent l'informatique]({BASE_URL}/imgs/articles/2021-03-08-les-femmes-dans-linformatique/second.png) Il y a des femmes qui subissent une grande pression au travail liée à [l'association de certaines tâches à un genre donné.](https://hbr.org/2018/11/the-subtle-stressors-making-women-want-to-leave-engineering). Par exemple, il existe toujours l'idée que les femmes sont plus douées que les hommes dans l'organisation et la communication. @@ -102,7 +102,7 @@ Cette situation crée une pression, ajoute du stress au quotidien, et empiète Par ailleurs, les femmes sont encouragées par leurs supérieurs à monter en compétences sur des postes qui leur font abandonner le développement. Et voici le constat : -![Principaux métiers numériques par genre]({{ site.baseurl }}/assets/2021-03-08-les-femmes-dans-linformatique/third.png) +![Principaux métiers numériques par genre]({BASE_URL}/imgs/articles/2021-03-08-les-femmes-dans-linformatique/third.png) Les femmes sont donc parfois insatisfaites de leurs perspectives de carrière. Elles ont le sentiment de ne pas pouvoir évoluer de la façon dont elles voudraient, et finissent par abandonner l'informatique. diff --git a/_articles/fr/2021-04-16-recruter-un-product-owner-pour-votre-projet-web.md b/_articles/fr/2021-04-16-recruter-un-product-owner-pour-votre-projet-web.md index 6e9137d93..7518fd124 100644 --- a/_articles/fr/2021-04-16-recruter-un-product-owner-pour-votre-projet-web.md +++ b/_articles/fr/2021-04-16-recruter-un-product-owner-pour-votre-projet-web.md @@ -28,7 +28,7 @@ Vous rencontrez des difficultés à faire l’interface entre les besoins émis Vous recherchez très certainement votre futur Product Owner et on vous en dit plus sur son métier ! -![Le product Owner en action]({{ site.baseurl }}/assets/2021-04-16-recruter-un-product-owner-pour-votre-projet-web/product-owner.jpg) +![Le product Owner en action]({BASE_URL}/imgs/articles/2021-04-16-recruter-un-product-owner-pour-votre-projet-web/product-owner.jpg) ## Quel est le rôle du Product Owner ? diff --git a/_articles/fr/2021-04-21-UX-Writing-Introduction-et-bonnes-pratiques.md b/_articles/fr/2021-04-21-UX-Writing-Introduction-et-bonnes-pratiques.md index d08c30b42..ab7d13989 100644 --- a/_articles/fr/2021-04-21-UX-Writing-Introduction-et-bonnes-pratiques.md +++ b/_articles/fr/2021-04-21-UX-Writing-Introduction-et-bonnes-pratiques.md @@ -39,7 +39,7 @@ Cette communication est construite au travers de la rédaction des différents c Pour remplir son objectif, l’UX Writer participe à la définition de l’expérience utilisateur au travers du langage, grâce à sa compréhension des utilisateurs. De cette façon, l’UX Writing n’est pas distincte de l’UX Design et de l’UX Research, mais complémentaire. En effet, l’UX Writer se nourrira de la compréhension utilisateur pour concevoir la hiérarchie de l’information ou encore le contenu même de ces informations. Une fois rédigés, ces textes pourront ensuite être testés et évolueront à partir des retours utilisateurs, par itération. -![Illustration des interactions entre UX Writer, UX Designer et UX Researcher]({{ site.baseurl }}/assets/2021-04-21-UX-Writing/IllustrationUXWriting.png) +![Illustration des interactions entre UX Writer, UX Designer et UX Researcher]({BASE_URL}/imgs/articles/2021-04-21-UX-Writing/IllustrationUXWriting.png) (Image tirée de l'article de G. Ligertwood (2017) [sur l'UX Writing](https://uxplanet.org/ux-writing-how-to-do-it-like-google-with-this-powerful-checklist-e263cc37f5f1)) @@ -68,7 +68,7 @@ Comme nous l’avons dit précédemment, l’UX Writer doit comprendre les utili Coutumiers du digital, je ne vous apprendrai rien en vous disant que ces étapes de recherches, hypothèses, tests et analyses sont au cœur même de la méthode UX générale consistant en 5 étapes : -![Illustration de la méthodologie UX]({{ site.baseurl }}/assets/2021-04-21-UX-Writing/IllustrationMéthode.png) +![Illustration de la méthodologie UX]({BASE_URL}/imgs/articles/2021-04-21-UX-Writing/IllustrationMéthode.png) Il est important de comprendre que la démarche présentée n’est pas linéaire et de nombreux allers-retours entre les étapes peuvent se produire. Par exemple, il est possible de constituer des premières hypothèses en (2) Exploration qui seront revues dans la phase de (4) Génération avant même d’entrer en phase (5) d’Évaluation. @@ -86,7 +86,7 @@ L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux - Au sein des paragraphes aussi, commencez par les informations principales puis présentez le détail afin de leur permettre d’identifier rapidement les informations essentielles à votre discours -![Illustration de la règle d'ordre]({{ site.baseurl }}/assets/2021-04-21-UX-Writing/IllustrationOrdre.png) +![Illustration de la règle d'ordre]({BASE_URL}/imgs/articles/2021-04-21-UX-Writing/IllustrationOrdre.png) @@ -95,7 +95,7 @@ L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux - Chaque sous-groupe d’informations doit contenir un ensemble limité de concepts, distincts les uns des autres -![Illustration de la règle de catégorisation]({{ site.baseurl }}/assets/2021-04-21-UX-Writing/IllustrationSeparation.png) +![Illustration de la règle de catégorisation]({BASE_URL}/imgs/articles/2021-04-21-UX-Writing/IllustrationSeparation.png) @@ -108,7 +108,7 @@ L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux - Clair : Utilisez un langage simple pour favoriser la compréhension et la satisfaction des utilisateurs -![Illustration de la règle de label]({{ site.baseurl }}/assets/2021-04-21-UX-Writing/IllustrationTitre.png) +![Illustration de la règle de label]({BASE_URL}/imgs/articles/2021-04-21-UX-Writing/IllustrationTitre.png) @@ -117,7 +117,7 @@ L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux - Une règle de pouce est d’[éviter les phrases au-delà de 14 mots](https://medium.com/@scottydocs/what-is-the-perfect-sentence-length-4690ce8d5048) - attention toutefois, ne faites pas que des phrases de 14 mots pour éviter un ton trop monotone -![Illustration de la règle de concision]({{ site.baseurl }}/assets/2021-04-21-UX-Writing/IllustrationConcis.png) +![Illustration de la règle de concision]({BASE_URL}/imgs/articles/2021-04-21-UX-Writing/IllustrationConcis.png) @@ -126,7 +126,7 @@ L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux - La communication avec l’utilisateur doit être cohérente sur l’ensemble du produit -![Illustration de la règle d'homogénéité]({{ site.baseurl }}/assets/2021-04-21-UX-Writing/IllustrationHomogeneite.png) +![Illustration de la règle d'homogénéité]({BASE_URL}/imgs/articles/2021-04-21-UX-Writing/IllustrationHomogeneite.png) ## En conclusion diff --git a/_articles/fr/2021-05-20-informatique-quantique.md b/_articles/fr/2021-05-20-informatique-quantique.md index fe8156f43..bd3990f62 100644 --- a/_articles/fr/2021-05-20-informatique-quantique.md +++ b/_articles/fr/2021-05-20-informatique-quantique.md @@ -16,7 +16,7 @@ keywords: - quantique - qubit --- -![Informatique quantique]({{ site.baseurl }}/assets/2021-05-20-informatique-quantique/informatique-quantique.jpg) +![Informatique quantique]({BASE_URL}/imgs/articles/2021-05-20-informatique-quantique/informatique-quantique.jpg) ## Qu'est-ce que l'informatique quantique @@ -56,7 +56,7 @@ est **mort et vivant à la fois.** Cela n'est pas vrai, il est dans un état qui est une combinaison de l'état mort et de l'état vivant. Cet état est aussi légitime que l'état mort tout court (pauvre chat), ou l'état vivant, mais simplement **nous ne pouvons pas l'observer**. -![Schrodinger meme]({{ site.baseurl }}/assets/2021-05-20-informatique-quantique/schrodinger-meme.jpg) +![Schrodinger meme]({BASE_URL}/imgs/articles/2021-05-20-informatique-quantique/schrodinger-meme.jpg) Oublions nos chats, et revenons à notre électron. On dit qu'en mécanique quantique la mesure de la position d'un électron est un **"observable"**, qui n'est en réalité pas observable avec quelconque appareil, à contrario de la mécanique classique où ma position en tant qu'humain à un instant T @@ -96,7 +96,7 @@ la mécanique classique (nos yeux, notre instrument de mesure, le monde tel qu'o Notons pour plus tard que le cas où l'électron se trouve exactement à la position A n'est que le cas particulier où il est à 100% sur A et 0% ailleurs, et pareil pour B. On appelle ces états particuliers des états **propres**. -![Monsieur propre]({{ site.baseurl }}/assets/2021-05-20-informatique-quantique/mr-propre.jpg) +![Monsieur propre]({BASE_URL}/imgs/articles/2021-05-20-informatique-quantique/mr-propre.jpg) Pour résumer un peu ce charabia, notre physique classique admet des grandeurs (comme la taille, le poids, la vitesse d'un objet), et la physique quantique a des observables (la position comme vu un peu plus haut, mais aussi le niveau diff --git a/_articles/fr/2021-05-24-leco-conception.md b/_articles/fr/2021-05-24-leco-conception.md index 6fa1264b1..b43bfdb2d 100644 --- a/_articles/fr/2021-05-24-leco-conception.md +++ b/_articles/fr/2021-05-24-leco-conception.md @@ -117,7 +117,7 @@ Si vous devez éco-travailler sur un site web existant, vous pouvez faire un bil Bonne nouvelle, le blog d’Eleven Labs obtient un A ! -![Le blog d'Eleven passe le test]({{ site.baseurl }}/assets/2021-05-24-leco-conception/blog-eleven-result.png) +![Le blog d'Eleven passe le test]({BASE_URL}/imgs/articles/2021-05-24-leco-conception/blog-eleven-result.png) Pour la consommation électrique, vous avez [Scaphandre](https://github.com/hubblo-org/scaphandre) qui vous permettra d’avoir des métrics de vos services et de savoir quels services il serait intéressant d’optimiser. diff --git a/_articles/fr/2021-06-13-outil-low-code-automatisation-workflow-n8n.md b/_articles/fr/2021-06-13-outil-low-code-automatisation-workflow-n8n.md index 119e89dbe..bf76e0889 100644 --- a/_articles/fr/2021-06-13-outil-low-code-automatisation-workflow-n8n.md +++ b/_articles/fr/2021-06-13-outil-low-code-automatisation-workflow-n8n.md @@ -39,7 +39,7 @@ docker run -it --rm \ -v ~/.n8n:/home/node/.n8n \ n8nio/n8n ``` -![Sortie de la console]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/install/install.png) +![Sortie de la console]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/install/install.png) Voilà, vous n’avez plus qu’à appuyer sur “o” ou à aller sur l’url [http://localhost:5678/](http://localhost:5678/) pour accéder à l’interface. @@ -54,7 +54,7 @@ En plus de n8n, vous avez besoin d’un compte Google, avec Google Calendar, Goo ### L’interface L’outil propose une interface assez claire, avec à droite un menu permettant de gérer les workflows et les credentials pour accéder aux différentes applications que vous souhaitez utiliser, à gauche la recherche pour ajouter un noeud, et au centre, la création de votre workflow. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/workflow_init.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/workflow_init.png) ### Premier noeud : le trigger Le trigger *Start* est par défaut sur chaque worflow et on ne peut pas le supprimer, mais cela ne pose aucun souci. @@ -62,9 +62,9 @@ Pour le scénario, il s’agit d’un trigger *Cron* qui sera déclenché tous l Il suffit d’aller le chercher dans la liste des triggers dans l’ajout de noeuds à gauche. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/cron/add_trigger_cron.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/cron/add_trigger_cron.png) -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/cron/popin_trigger_cron.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/cron/popin_trigger_cron.png) Dans le cas d’un trigger de type GitLab, il vous faudra saisir les credentials associés. Je vais montrer comment en rajouter lors des étapes suivantes pour les API Google. @@ -91,16 +91,16 @@ return items; Pour avoir les variables pour le noeud suivant, il faut cliquer sur _Execute Node_ en haut à gauche de la popin. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/function_start_end_date/function_start_end_date.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/function_start_end_date/function_start_end_date.png) ### Troisième noeud : récupérer mon planning de la semaine sur Google Calendar Maintenant que nous avons les valeurs pour filtrer, vous allez pouvoir ajouter un noeud de type _Google Calendar_. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/popin_empty.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/popin_empty.png) Ici, il va falloir rajouter les credentials de votre compte Google. Dans la popin de configuration du noeud, vous pouvez accéder directement à la création de credentials via _Credentials -> Calendar Calendar -> Select “Create new”_. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/credentials_empty.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/credentials_empty.png) La documentation de n8n vous explique [comment récupérer vos credentials](https://docs.n8n.io/credentials/google/#prerequisites) si vous ne savez pas comment procéder. Vous allez devoir aller sur le Google Cloud Platform et si vous en avez besoin, créer un projet. @@ -108,7 +108,7 @@ N’oubliez pas non plus d’activer l’API correspondant à l’outil que vous Un nouveau _Credential_ sera à recréer pour chaque API différente que vous allez devoir appeler dans ce workflow. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/credentials.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/credentials.png) Quand la configuration du _Credential_ est terminée, il faut saisir le reste des paramètres du noeud : - Resource : Event @@ -117,16 +117,16 @@ Quand la configuration du _Credential_ est terminée, il faut saisir le reste de - Return All : true - Options : Rajouter les filtres _Start Time_ et _End Time_. Pour chacun, cliquez sur les écrous puis sur _Add Expression_. Dans la popin, il est possible de récupérer facilement la valeur des items définis dans la fonction précédente. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/parameters_without_list.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/parameters_without_list.png) -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/filter.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_calendar/filter.png) Pour tester le noeud, cliquez sur _Execute Node_, et vous verrez l’ensemble des événements pour cet intervalle. ### Quatrième noeud : Récupérer la todo list de Google Tasks Pour cet article, j’ai fait une petite liste simple sur Google Tasks. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_tasks/list.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_tasks/list.png) Comme pour Google Calendar, après avoir ajouté le noeud, il faudra configurer les credentials. @@ -134,11 +134,11 @@ Ensuite, dans les paramètres à saisir, il suffit d'indiquer que vous souhaitez Même scénario pour tester, cliquez sur _Execute node_, vous allez avoir votre tableau de tasks à faire. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_tasks/popin.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/google_tasks/popin.png) Votre workflow ressemble maintenant à ça : -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/workflow_wip.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/workflow_wip.png) Il faut maintenant merger les données, créer le mail puis l'envoyer. @@ -147,7 +147,7 @@ Il s’agit du noeud le plus simple dans cet exemple : _Merge_. Il y a plusieurs Après le _Execute Node_, vous avez la liste combinée des événements de la semaine et des tâches à faire. -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/merge/merge.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/merge/merge.png) ### Sixième noeud : Créer le contenu du mail Pour créer un contenu de mail tout propre, j’ai décidé d’utiliser une nouvelle fois le noeud _Function_. @@ -185,7 +185,7 @@ return newItems; Testez pour voir le rendu : -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/function_message/function_message.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/function_message/function_message.png) ### Dernier noeud : envoi du mail avec toutes les informations Voici la dernière étape, l'envoi de l'email avec le message. @@ -197,16 +197,16 @@ Après avoir configuré encore une fois les credentials, vous n’avez qu’à i - HTML Message/Message: Add Expression, et sélectionner le message - To Email: l’email du destinataire, vous -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/gmail/popin.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/gmail/popin.png) -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/gmail/message_expression.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/gmail/message_expression.png) ### Workflow final et réception du mail -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/workflow_final.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/workflow_final.png) Maintenant que le workflow est fini, il ne reste plus qu’à cliquer sur _Execute Workflow_ pour tester de bout-en-bout. Si tout se passe bien, vous allez recevoir ce fameux email : -![]({{ site.baseurl }}/assets/2021-06-13-outil-low-code-automatisation-workflow-n8n/email.png) +![]({BASE_URL}/imgs/articles/2021-06-13-outil-low-code-automatisation-workflow-n8n/email.png) Il ne manque plus qu’à activer votre workflow pour qu’il vous envoie le mail toutes les semaines. diff --git a/_articles/fr/2021-08-25-un-premier-controleur-kubernetes-avec-controller-runtime.md b/_articles/fr/2021-08-25-un-premier-controleur-kubernetes-avec-controller-runtime.md index e0d7ee28e..d47069c6b 100644 --- a/_articles/fr/2021-08-25-un-premier-controleur-kubernetes-avec-controller-runtime.md +++ b/_articles/fr/2021-08-25-un-premier-controleur-kubernetes-avec-controller-runtime.md @@ -18,7 +18,7 @@ keywords: - kubernetes --- -![Gopher sailing]({{ site.baseurl }}/assets/2021-08-25-un-premier-controleur-kubernetes-avec-controller-runtime/gopher-logo.png) +![Gopher sailing]({BASE_URL}/imgs/articles/2021-08-25-un-premier-controleur-kubernetes-avec-controller-runtime/gopher-logo.png) J'ai récemment été amené à écrire mon premier contrôleur pour Kubernetes et je dois reconnaitre que mes premiers pas ont été difficiles. Kubernetes était encore relativement nouveau pour moi, et le concept de contrôleur complètement flou. Après avoir pris un peu de recul sur le sujet, j'ai eu envie d'écrire cet article pour tenter de démystifier le concept tel que j'aurais aimé le découvrir quand j'ai commencé à m'y intéresser. @@ -145,7 +145,7 @@ Pour notre premier contrôleur, nous scruterons une source interne de type `Ingr ## Manipuler des objets Kubernetes -![Juggling]({{ site.baseurl }}/assets/2021-08-25-un-premier-controleur-kubernetes-avec-controller-runtime/juggling.gif) +![Juggling]({BASE_URL}/imgs/articles/2021-08-25-un-premier-controleur-kubernetes-avec-controller-runtime/juggling.gif) Pour manipuler un objet Kubernetes, on doit au préalable importer le paquet correspondant à son API Kubernetes (i.e. `networking` pour les `Ingresses` ; `apps` pour les `Deployments` ; etc.) afin d'accéder aux différentes structures des ressources. diff --git a/_articles/fr/2021-09-22-git-rebase.md b/_articles/fr/2021-09-22-git-rebase.md index ba7c92e69..2488e5fd2 100644 --- a/_articles/fr/2021-09-22-git-rebase.md +++ b/_articles/fr/2021-09-22-git-rebase.md @@ -67,7 +67,7 @@ Un autre personne crée une branche avec une autre fonctionnalité à implément git checkout -b anotherfe ``` -![gitrebase-init]({{site.baseurl}}/assets/2016-06-21-git-rebase/gitrebase-init.png) +![gitrebase-init]({BASE_URL}/imgs/articles/2016-06-21-git-rebase/gitrebase-init.png) Les développements avancent. La branche *myfeat* : @@ -85,7 +85,7 @@ Date: Sun Jun 12 16:32:19 2016 +0200 initialize tutorial ``` -![gitrebase-myfeat-commit]({{site.baseurl}}/assets/2016-06-21-git-rebase/gitrebase-myfeat-commit.png) +![gitrebase-myfeat-commit]({BASE_URL}/imgs/articles/2016-06-21-git-rebase/gitrebase-myfeat-commit.png) La branche *my-feat* est fusionnée en premier dans *master*. @@ -110,7 +110,7 @@ Date: Sun Jun 12 16:32:19 2016 +0200 initialize tutorial ``` -![gitrebase-myfeat-merge]({{site.baseurl}}/assets/2016-06-21-git-rebase/gitrebase-myfeat-merge.png) +![gitrebase-myfeat-merge]({BASE_URL}/imgs/articles/2016-06-21-git-rebase/gitrebase-myfeat-merge.png) Ici il y a eu une fusion rapide. @@ -130,7 +130,7 @@ Date: Sun Jun 12 16:32:19 2016 +0200 initialize tutorial ``` -![gitrebase-anotherfe-commit]({{site.baseurl}}/assets/2016-06-21-git-rebase/gitrebase-anotherfe-commit.png) +![gitrebase-anotherfe-commit]({BASE_URL}/imgs/articles/2016-06-21-git-rebase/gitrebase-anotherfe-commit.png) Si je fusionne cette branche avec *master*, je vais avoir des problèmes car j'ai modifié le même fichier. Je vais d'abord faire un rebase depuis master pour appliquer mes modifications à la suite des modifications de *master*. @@ -142,7 +142,7 @@ Application : add title level 2 Je vois que le commit "c3" est bien appliqué après les modification "c1" et "c2". -![gitrebase-anotherfe-rebase]({{site.baseurl}}/assets/2016-06-21-git-rebase/gitrebase-anotherfe-rebase.png) +![gitrebase-anotherfe-rebase]({BASE_URL}/imgs/articles/2016-06-21-git-rebase/gitrebase-anotherfe-rebase.png) Ici, le *rebase* s'est bien déroulé car il n'y a pas eu de modification au même endroit. @@ -170,7 +170,7 @@ Date: Sun Jun 12 16:32:19 2016 +0200 Je vois que master contient bien les modifications de *myfeat* et *anotherfe*. -![gitrebase-master-final]({{site.baseurl}}/assets/2016-06-21-git-rebase/gitrebase-master-final-1.png) +![gitrebase-master-final]({BASE_URL}/imgs/articles/2016-06-21-git-rebase/gitrebase-master-final-1.png) ### Gestion des conflits @@ -288,6 +288,6 @@ git rebase --continue Le rebase est terminé. L'historique de *master* est propre. -Pour référence: [git-rebase]({{site.baseurl}}https://git-scm.com/docs/git-rebase) et [Git branching - rebasing]({{site.baseurl}}https://git-scm.com/book/en/v2/Git-Branching-Rebasing) +Pour référence: [git-rebase](https://git-scm.com/docs/git-rebase) et [Git branching - rebasing](https://git-scm.com/book/en/v2/Git-Branching-Rebasing) Images créées avec diff --git a/_articles/fr/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat.md b/_articles/fr/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat.md index 638ebed35..0f88758ce 100644 --- a/_articles/fr/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat.md +++ b/_articles/fr/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat.md @@ -8,8 +8,7 @@ excerpt: >- Vous faites partie d’une petite équipe, avec des features à sortir très rapidement et un PoC pour tester un produit, mais vous n'avez pas ou peu de connaissances techniques ? Le NoCode est fait pour vous ! -cover: >- - /assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cover.jpg +cover: /assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cover.jpg categories: [] authors: - marianne @@ -27,13 +26,13 @@ Je vais proposer des fonctionnalités qu’on retrouve régulièrement dans un p ## Présentation de l’interface -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/homepage.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/homepage.png) On peut noter qu'Integromat a fait attention aux utilisateurs ayant un profil non technique en proposant une interface facile d’utilisation et assez intuitive. Sur la page de fabrication d’un scénario, chaque noeud est représenté par une bulle : l’ajout et la configuration se font directement sur la page. Integromat permet de créer des structures de données (Data structures) et de stocker des données (Data Stores) que vous pouvez préparer en amont dans leurs propres menus pour ensuite les utiliser dans les scénarios. Grâce à ces fonctionnalités, vous pouvez traiter et manipuler des données sans avoir besoin de base de données spécifique. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/interface-noeud.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/interface-noeud.png) @@ -43,9 +42,9 @@ Grâce à ces fonctionnalités, vous pouvez traiter et manipuler des données sa Vous commencez un nouveau site from scratch qui demande une inscription, et vous souhaitez envoyer l’email de confirmation. Le scénario est assez simple : un webhook sur lequel l’application devra envoyer des données, et un serveur d’envoi d’emails. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-scenario.png) -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-webhook.png) -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-mail.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-scenario.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-webhook.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas1-mail.png) > Dans les points positifs, c’est que vous êtes autonomes pour changer le template : pas besoin de développement supplémentaire et donc pas de mise en production à prévoir. @@ -73,7 +72,7 @@ Vous venez de créer votre site e-commerce, que ce soit via Shopify ou Prestasho Pour l’exemple, je vais plutôt utiliser un webhook que directement un noeud de site e-commerce qui permet de récupérer l’information dès qu’il y a un nouvel événement. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas2-scenario.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas2-scenario.png) > Comme pour le template d’email, vous êtes autonome pour le changer. @@ -90,7 +89,7 @@ Sans trop rentrer dans le détail, il y a plusieurs manières de créer une imag #### Envoyer cette image par email En plus de stocker l’image, vous pouvez en même temps l’envoyer par email. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas2-aller-plus-loin.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas2-aller-plus-loin.png) #### L’impression @@ -102,18 +101,18 @@ Ce scénario permet d’aller plus loin dans integromat avec l’utilisation des On veut traiter un CSV pour le spliter en plusieurs CSV pour être traités par des micro-services différents. Vous pouvez brancher le trigger sur un *FTP* comme sur un *Google Drive*. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-scenario.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-scenario.png) Entre les noeuds, il est possible de rajouter des filtres. Pour ne pas avoir d’erreur lors du traitement, j’ai rajouté la condition pour n'accepter que des documents CSV pour la suite. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-filter-csv.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-filter-csv.png) Après avoir téléchargé le document, pour être sûr du modèle et pour enregistrer les données à potentiellement utiliser dans un autre scénario, j’utilise le noeud *Data Store* qui va permettre de mapper chaque entrée du CSV en une entrée en base de données. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-mapping-csv-data-store.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-mapping-csv-data-store.png) Pour mon besoin, j’ai besoin de créer 3 CSV différents en se reposant sur des Data Structures et de les enregistrer dans un dossier. Le noeud *Router* permet de paralléliser le travail. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-create-data-structure-product.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-create-data-structure-product.png) > Dans les points positifs, il y a l’autonomie sur les modèles : si l’entrée ou la/les sorties changent, vous pouvez mettre à jour facilement. @@ -139,7 +138,7 @@ Vous avez besoin de rajouter l’id de la marque ou un trigramme de couleur, mai Il existe plein de noeuds pour permettre la communication : à chaque traitement de nouveau fichier, un message slack sera envoyé pour prévenir l'équipe. Il est même possible de prévoir le chemin en cas d’erreur lors d’un noeud. -![]({{ site.baseurl }}/assets/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-add-error-handler.png) +![]({BASE_URL}/imgs/articles/2021-09-22-po-liberez-du-temps-a-vos-developpeurs-avec-integromat/cas3-add-error-handler.png) ## Conclusion diff --git a/_articles/fr/2021-10-20-chatbot-dialogflow.md b/_articles/fr/2021-10-20-chatbot-dialogflow.md index c5aebb3ed..d05d97e41 100644 --- a/_articles/fr/2021-10-20-chatbot-dialogflow.md +++ b/_articles/fr/2021-10-20-chatbot-dialogflow.md @@ -29,13 +29,13 @@ Maintenant que l'on connaît le fonctionnement basique, nous allons créer notre Je vous invite à aller sur la console de DialogFlow disponible [ici](https://console.dialogflow.com). Nous allons créer notre premier "Agent" [ici](https://console.dialogflow.com/api-client/#/newAgent). -![dialogflow-agent](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-agent.png) +![dialogflow-agent]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-agent.png) Il faut remplir le formulaire de création de votre agent. Je vous invite à mettre le *DEFAULT LANGUAGE* en Français. Voilà, vous avez votre premier chatbot ! Par défaut vous avez 2 "intents" que Google vous propose. -![dialogflow-intent](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-intent.png) +![dialogflow-intent]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-intent.png) Allons voir ce que contient l'intent *Default Welcome Intent*, un intent est toujours séparé de la même façon. @@ -81,15 +81,15 @@ Il ne contient pas une section *User says*, il vous permet seulement de répondr Nous allons maintenant tester notre chatbot. Vous avez dû voir sur la droite de la console que DialogFlow vous permet d'utiliser en live votre chatbot. Si vous rentrez n'importe quel phrase vous devez arriver dans le *Default Fallback Intent* puisque pour l'instant nous n'avons aucun *user says* dans votre autre intent. -![dialogflow-fallback](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-fallback.png) +![dialogflow-fallback]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-fallback.png) Vous pouvez aussi voir le json que cela génère. Il vous servira lors de la phase *Mettons une petite intelligence*. -![dialogflow-json](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-json.png) +![dialogflow-json]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-json.png) Si dans le *User says* de votre *Default Welcome Intent* vous ajoutez un "salut" et que vous sauvegardez, vous pouvez re-tester et voir que le bot vous répond une des phrases présentes dans l'intent *Default Welcome Intent* -![dialogflow-test2](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-test2.png) +![dialogflow-test2]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-test2.png) Maintenant créons une vraie conversation. @@ -97,15 +97,15 @@ Dans l'intent *Default Welcome Intent* que vous pouvez renommer *Salut* je vous Puis créer l'intent *tu habites ?*, qui aura un context de sortie *city*. Puis vous pouvez ajouter comme *User says* les phrases suivantes -![dialogflow-response](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-response.png) +![dialogflow-response]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-response.png) Si tout se passe bien, DialogFlow va directement reconnaître les *entities* de géolocalisation. Si ce n'est pas le cas, en sélectionnant le mot vous pouvez choisir l'entity *@sys.geo-city*. -![dialogflow-entity](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-entity.png) +![dialogflow-entity]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-entity.png) Il ne vous reste plus qu'a répondre à votre utilisateur avec les phrases suivantes. -![dialogflow-response2](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-response2.png) +![dialogflow-response2]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-response2.png) Vous pouvez utiliser *$geo-city* pour récupérer la ville de l'utilisateur. @@ -117,11 +117,11 @@ Comme pour l'autre intent vous pouvez prendre le chiffre des *user says* et le m $number c'est le paramètre que l'utilisateur viens de fournir et #city.geo-city c'est la ville contenue dans le context. -![dialogflow-entity2](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-entity2.png) +![dialogflow-entity2]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-entity2.png) Vous pouvez sauvegarder et tester. Si tout est ok vous devez avoir ce genre de conversation : -![dialogflow-test4](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-test4.png) +![dialogflow-test4]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-test4.png) Vous pouvez le tester ici : @@ -137,19 +137,19 @@ C'est bien, nous avons un chatBot qui permet de faire une conversation avec vos C'est simple, il faut fournir à Dialog un *Fulfillment* qui est en fait un webhook vers un webservice. -![dialogflow-webhook](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-webhook.png) +![dialogflow-webhook]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-webhook.png) Il existe deux formats *Fulfillment*: **- Webhook** -![dialogflow-webhook2](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-webhook2.png) +![dialogflow-webhook2]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-webhook2.png) Il s'agit d'une simple url que DialogFlow appellera lors d'un intent. Vous pouvez y mettre des options comme l'authentification, des headers spécifiques ou encore autoriser le webhook seulement sur vos domains web. **- Inline Editor** -![dialogflow-inlineeditor](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-inlineeditor.png) +![dialogflow-inlineeditor]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-inlineeditor.png) Il s'agit d'un éditeur de code qui met cela directement dans une *function* Firebase. Ce qui est pratique, c'est que vous n'avez pas à réfléchir sur le déploiement de votre code ! Google le fait pour vous, et vous n'avez pas non plus à faire la structure de base du code, elle est déjà prête. @@ -158,11 +158,11 @@ Vous trouverez toutes les informations sur les *Fulfillment* sur la documentatio Il ne vous reste plus qu'à activer le *Fulfillment* sur votre intent. Commençons par activer le *Fulfillment* Inline Editor. -![dialogflow-inlineeditor2](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-inlineeditor2.png) +![dialogflow-inlineeditor2]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-inlineeditor2.png) Puis dans l'intent *Salut* en bas de la configuration vous avez la partie *Fulfillment* qui apparaît. Vous pouvez donc activer l'utilisation du webhook pour cet intent. -![dialogflow-webhook3](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-webhook3.png) +![dialogflow-webhook3]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-webhook3.png) Si vous avez fait attention au code par défaut vous verrez cela : @@ -183,11 +183,11 @@ C'est simple, si l'intent est l'action *input.welcome* alors on répond *Hello, Vous pouvez donc essayer. -![dialogflow-test5](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-test5.png) +![dialogflow-test5]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-test5.png) Vous pouvez faire beaucoup de choses avec vos webhooks, l'entrée du webhook c'est le json que vous trouvez dans les tests. -![dialogflow-json2](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-json2.png) +![dialogflow-json2]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-json2.png) La sortie c'est un objet json que vous pouvez retrouver [ici](https://dialogflow.com/docs/fulfillment#response). @@ -197,13 +197,13 @@ Maintenant que nous avons terminé notre chatbot, nous allons le déployer et c' Sur le côté, cliquez sur *intégration*. Vous y trouverez les différentes intégrations possibles. -![dialogflow-integration](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-integration.png) +![dialogflow-integration]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-integration.png) J'ai d'ailleurs utilisé l'intégration *Web Demo* pour cet article. Si vous n'avez pas l'intégration que vous souhaitez, vous pouvez aussi utiliser les SQK disponibles par DialogFlow. -![dialogflow-sdk](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-sdk.png) +![dialogflow-sdk]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-sdk.png) > Bravo vous avez déployé @@ -212,7 +212,7 @@ La première, c'est de l'*Analytics* que vous trouverez dans le menu à gauche. Il vous permet de voir combien vous avez eu d'appels en général et sur chaque *intents*. -![dialogflow-analytics](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-analytics.png) +![dialogflow-analytics]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-analytics.png) La documentation est assez riche [ici](https://dialogflow.com/docs/analytics). @@ -220,7 +220,7 @@ Et pour terminer, comme DialogFlow c'est aussi du machine learning, vous pouvez Vous y trouverez l'ensemble des conversations qu'il y a eu avec votre chatbot, et donc pouvoir comprendre l'utilisation qu'en ont vos utilisateurs. -![dialogflow-learning](/_assets/articles/2017-11-06-chatbot-dialogflow/dialogflow-learning.png) +![dialogflow-learning]({BASE_URL}/imgs/articles/2017-11-06-chatbot-dialogflow/dialogflow-learning.png) Ce qui est pratique c'est de voir les phrases qu'y n'ont matché aucun intent et donc pouvoir ensuite les ajouter dans un intent ou faire des réponses différentes à vos utilisateurs. diff --git a/_articles/fr/2021-10-20-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2.md b/_articles/fr/2021-10-20-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2.md index 5eca1e32f..a0888af8f 100644 --- a/_articles/fr/2021-10-20-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2.md +++ b/_articles/fr/2021-10-20-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2.md @@ -32,11 +32,11 @@ Pour plus d'informations sur l'implémentation de WSL 2, une [vidéo de présent WSL premier du nom, est un driver pour Windows implémentant l'API du noyau Linux, qui transforme les appels au noyau en instructions compatibles Windows NT. Ce qui pose de nombreux problèmes de compatibilité notamment avec l'API permettant d'accéder au système de fichiers. -![wsl1-architecture]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/wsl1-architecture.png "Architecture WSL 1") +![wsl1-architecture]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/wsl1-architecture.png "Architecture WSL 1") Pour résoudre les différents problèmes de compatibilité, de performances et pour réduire les coûts de maintenance de WSL, la version 2 fait tourner [un véritable noyau Linux](https://github.com/microsoft/WSL2-Linux-Kernel) compilé et maintenu par Microsoft dans [Hyper-V](https://fr.wikipedia.org/wiki/Hyper-V) (qui est un [hyperviseur de type 1](https://fr.wikipedia.org/wiki/Hyperviseur#Type_1_:_natif)). -![wsl2-architecture]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/wsl2-architecture.png "Architecture WSL 2") +![wsl2-architecture]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/wsl2-architecture.png "Architecture WSL 2") ## Activation de WSL 2 @@ -47,7 +47,7 @@ Pour résoudre les différents problèmes de compatibilité, de performances et - Ouvir [Windows Update](ms-settings:windowsupdate "Ouvre Windows Update") - Cliquer sur "Rechercher les mises à jour" pour télécharger le dernier build -![insider]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/insider.png) +![insider]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/insider.png) Lancer PowerShell en tant qu'administrateur @@ -163,7 +163,7 @@ Dans les grande lignes, l'astuce consiste à remplacer le shell de l'utilisateur ## Windows Terminal -![Windows Terminal]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/windows-terminal.png "Windows Terminal") +![Windows Terminal]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/windows-terminal.png "Windows Terminal") [Windows Terminal](https://www.microsoft.com/fr-fr/p/windows-terminal-preview/9n0dx20hk701) ([source](https://github.com/microsoft/terminal)) est un terminal moderne, configurable et personnalisable qui centralise PowerShell, Cmd, Azure Cloud Shell et vos shells Linux en une seule application. @@ -171,7 +171,7 @@ Dans les grande lignes, l'astuce consiste à remplacer le shell de l'utilisateur L'application est personnalisable via un fichier `.json`. Utilisez Ctrl + , pour y accéder ou utilisez l'interface de l'application. -![windows-terminal-settings]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/windows-terminal-settings.gif "Paramétrage de Windows Terminal") +![windows-terminal-settings]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/windows-terminal-settings.gif "Paramétrage de Windows Terminal") Le schéma du fichier est décrit via JSON Schema, le lien est consultable via la propriété `$schema`. Si vous utilisez VSCode, vous aurez accès à de l'autocomplétion 🎉. @@ -195,7 +195,7 @@ Sous Linux, les fins de lignes n'utilisent que le caractère LF `\n`. Pour éviter de vous retrouver avec des doublements de lignes dans Windows Terminal quand vous collez du texte, je vous suggère d'utiliser [AutoHotKey](https://www.autohotkey.com/), _(qui est un utilitaire permettant d'automatiser des tâches sous Windows)_. -![ahk-logo]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/ahk-logo.png "Logo de AutoHotKey") +![ahk-logo]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/ahk-logo.png "Logo de AutoHotKey") On va commencer par ouvrir le répertoire des scripts lancés au démarrage de Windows : @@ -237,7 +237,7 @@ Windows Terminal étant en "Development Preview", il existe encore des bugs qui Si vous rencontrez un bug d'affichage rendant l'interface complètement noire en déplaçant la fenêtre sur votre bureau... -![windows-terminal-rendering-bug]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/windows-terminal-rendering-bug.png "Bug de rendu du Windows Terminal") +![windows-terminal-rendering-bug]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/windows-terminal-rendering-bug.png "Bug de rendu du Windows Terminal") ... Il suffit de renseigner une largeur initiale pour la fenêtre de `110` via l'option `initialCols`. Cela fonctionne aussi avec des valeurs au-delà de `130` 🤷 (le mystère reste entier). @@ -252,7 +252,7 @@ Commencez par installer un serveur X pour Windows tel que : Si vous utilisez X410, activez l'option **Allow Public Access**. -![x410-public-access]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/x410-public-access.gif "X410 Allow Public Access") +![x410-public-access]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/x410-public-access.gif "X410 Allow Public Access") @@ -260,7 +260,7 @@ Si vous utilisez X410, activez l'option **Allow Public Access**. Pour VcXsrv, utilisez l'utilitaire Xlaunch, conservez les options par défaut et choisissez **Disable Access Control**. -![vcxsrv-configuration]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/vcxsrv-configuration.gif "Configuration de VcXsrv") +![vcxsrv-configuration]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/vcxsrv-configuration.gif "Configuration de VcXsrv") @@ -314,7 +314,7 @@ Ceci n'est pas une liste exhaustive, mais de plus en plus de logiciels prévoien [VSCode](https://code.visualstudio.com/) pour Windows supporte WSL avec le module [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) -![vscode-remote-wsl]({{site.baseurl}}/assets/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/wsl-readme.gif) +![vscode-remote-wsl]({BASE_URL}/imgs/articles/2019-10-25-le-developpement-sous-linux-depuis-windows-10-avec-wsl-2/wsl-readme.gif) ### PHPStorm diff --git a/_articles/fr/2021-10-20-rabbitmq-partie-1-les-bases.md b/_articles/fr/2021-10-20-rabbitmq-partie-1-les-bases.md index 6b87f9bf9..6a2660f5c 100644 --- a/_articles/fr/2021-10-20-rabbitmq-partie-1-les-bases.md +++ b/_articles/fr/2021-10-20-rabbitmq-partie-1-les-bases.md @@ -49,7 +49,7 @@ Voici le fonctionnement global du `broker` : > Le `publisher` va envoyer un `message` dans un `exchange` qui va, en fonction du `binding`, router le `message` vers la ou les `queues`. > Ensuite un `consumer` va consommer les messages. -![RabbitMQ Broker]({{site.baseurl}}/assets/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-broker.jpg) +![RabbitMQ Broker]({BASE_URL}/imgs/articles/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-broker.jpg) Nous allons donc détailler les différents éléments qui composent le `broker`. @@ -83,19 +83,19 @@ Un `exchange` est un routeur de message. Il existe différents types de routages *Cet exchange est auto bindé avec toutes les `queues` avec une `routing key` égale au nom de la queue.* -![RabbitMQ Exchange default]({{site.baseurl}}/assets/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-default.jpg) +![RabbitMQ Exchange default]({BASE_URL}/imgs/articles/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-default.jpg) ### L'exchange type fanout L'`exchange` `fanout` est le plus simple. En effet il délivre le message à **toutes** les queues bindées. -![RabbitMQ Exchange Fanout]({{site.baseurl}}/assets/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-fanout.jpg) +![RabbitMQ Exchange Fanout]({BASE_URL}/imgs/articles/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-fanout.jpg) ### L'exchange type direct L'`exchange` `direct` n'autorise que le binding utilisant strictement la `routing key`. -![RabbitMQ Exchange Direct]({{site.baseurl}}/assets/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-direct.jpg) +![RabbitMQ Exchange Direct]({BASE_URL}/imgs/articles/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-direct.jpg) Si la `routing_key` du message est strictement égale à la `routing_key` spécifiée dans le binding alors le message sera délivré à la queue. @@ -105,7 +105,7 @@ Si la `routing_key` du message est strictement égale à la `routing_key` spéci L'`exchange` `topic` délivre le message si `routing_key` du message matche le pattern défini dans le binding. -![RabbitMQ Exchange Topic]({{site.baseurl}}/assets/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-topic.jpg) +![RabbitMQ Exchange Topic]({BASE_URL}/imgs/articles/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-topic.jpg) Une `routing key` est composé de plusieurs segments séparés par des `.`. Il y a également 2 caractères utilisés dans le matching. @@ -131,7 +131,7 @@ Par exemple pour la `routing key` `foo.bar.baz` L'`exchange` `headers` délivre le message si les `headers` du binding matchent les headers du message. -![RabbitMQ Exchange Headers]({{site.baseurl}}/assets/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-headers.jpg) +![RabbitMQ Exchange Headers]({BASE_URL}/imgs/articles/2018-03-11-rabbitmq-partie-1-les-bases/rabbitmq-exchange-headers.jpg) L'option `x-match` dans le binding permet de définir si **un seul** header ou **tous** doivent matcher. diff --git a/_articles/fr/2021-10-20-utiliser-traefik-comme-reverse-proxy.md b/_articles/fr/2021-10-20-utiliser-traefik-comme-reverse-proxy.md index f23280bbb..112c3e202 100644 --- a/_articles/fr/2021-10-20-utiliser-traefik-comme-reverse-proxy.md +++ b/_articles/fr/2021-10-20-utiliser-traefik-comme-reverse-proxy.md @@ -15,7 +15,7 @@ keywords: - devops --- -![Cover]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/cover.jpg) +![Cover]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/cover.jpg) ## Introduction @@ -37,7 +37,7 @@ Il existe beaucoup de solutions de reverse proxy sur le marché mais nous allons Bien sûr pour que tout fonctionne, vous devez disposer d'un nom de domaine (dans mon cas wilson.net) et faire pointer les différentes zones dns sur votre serveur. -![Mes zones dns](/_assets/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/11-zones.jpg) +![Mes zones dns]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/11-zones.jpg) Sinon vous pouvez aussi simuler un nom de domaine dans votre fichier `/etc/hosts` mais dans ce cas la génération d'un certificat SSL ne sera pas possible. @@ -50,7 +50,7 @@ Pour commencer, vous devez mettre en place Traefik sur un serveur accessible à Pour moi, ce sera la machine 192.168.0.1 : c'est celle sur laquelle je redirige les ports 80 (HTTP) et 443 (HTTPS) de ma freebox. -![Mes ports dans la freebox]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/01-ports.jpg) +![Mes ports dans la freebox]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/01-ports.jpg) Vous pouvez aussi bien installer l'exécutable, compiler le logiciel à partir de ses sources ou bien comme dans notre exemple, le déployer avec une image Docker. @@ -95,11 +95,11 @@ Nous pouvons ensuite lancer notre service de reverse proxy en nous trouvant dans docker-compose up -d ``` -![Démarrage de traefik avec docker-compose]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/02-docker-compose-up.jpg) +![Démarrage de traefik avec docker-compose]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/02-docker-compose-up.jpg) Bien sûr si on visite la page de notre serveur, on obtient pour le moment une petite 404, mais c'est déjà la preuve qu'il est là et qu'il n'attend plus que de nous servir un contenu. -![Traefik renvoie une 404]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/03-nothing-for-the-moment.jpg) +![Traefik renvoie une 404]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/03-nothing-for-the-moment.jpg) ## Configurer le tableau de bord @@ -136,7 +136,7 @@ Comme nous ne voulons pas l'installer sur notre belle machine, nous allons faire docker run --rm --name apache httpd:alpine htpasswd -nb wilson schizo ``` -![Génération du mot de passe]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/04-password.jpg) +![Génération du mot de passe]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/04-password.jpg) Dans cet exemple, *wilson* est mon login tandis que *schizo* sera mon mot de passe. @@ -185,14 +185,14 @@ docker-compose up -d Voici ce que j'obtiens quand j'accède à l'url définie dans ma règle de routage plus haut : -![Dashboard]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/05-dashboard.jpg) +![Dashboard]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/05-dashboard.jpg) ## Reverse proxy d'un site accessible sur le réseau local J'ai sur mon réseau mon nas, que je souhaiterais rendre accessible de l'extérieur. -![Mon nas synology]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/06-nas-http.jpg) +![Mon nas synology]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/06-nas-http.jpg) Il va falloir le déclarer par le provider `file` car il ne peut pas être découvert automatiquement comme avec Docker. @@ -269,7 +269,7 @@ docker-compose up -d Voilà, quand j'accède maintenant à mon nas par le host déclaré plus haut j'ai cela : -![Mon nas synology reversed]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/07-nas-reversed.jpg) +![Mon nas synology reversed]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/07-nas-reversed.jpg) ## Génération d'un certificat SSL @@ -367,11 +367,11 @@ docker-compose up -d Une fois ceci fait, j'ai un accès à mon nas sécurisé par HTTPS :D -![Mon nas synology https]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/08-nas-https.jpg) +![Mon nas synology https]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/08-nas-https.jpg) Et puis bien sûr, je peux le voir aussi dans mon dashboard traefik : -![Mon nas synology dashboard]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/09-traefik-dashboard-nas.jpg) +![Mon nas synology dashboard]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/09-traefik-dashboard-nas.jpg) ## Reverse proxy de services tournants sous Docker @@ -440,7 +440,7 @@ docker-compose up -d Nous pouvons maintenant utiliser Home Assistant, et ce directement en https ;) -![Home Assistant]({{ site.baseurl }}/assets/2019-12-18-utiliser-traefik-comme-reverse-proxy/10-home-assistant.jpg) +![Home Assistant]({BASE_URL}/imgs/articles/2019-12-18-utiliser-traefik-comme-reverse-proxy/10-home-assistant.jpg) J'espère que vous avez apprécié cet article et que vous allez prendre beaucoup de plaisir à jouer avec traefik. diff --git a/_articles/fr/2021-11-03-Storybook-intro.md b/_articles/fr/2021-11-03-Storybook-intro.md index 78996b774..f1e62bce9 100644 --- a/_articles/fr/2021-11-03-Storybook-intro.md +++ b/_articles/fr/2021-11-03-Storybook-intro.md @@ -13,7 +13,7 @@ authors: - manu keywords: [] --- -![Storybook banner]({{ site.baseurl }}/assets/2019-11-27-Storybook-intro/storybooktitle.png) +![Storybook banner]({BASE_URL}/imgs/articles/2019-11-27-Storybook-intro/storybooktitle.png) Le but de cette série d'article sur Storybook est de présenter une feature de la librairie pour explorer ses possibilités, le tout de la manière la plus concise possible, avec des petits exemples. @@ -74,12 +74,12 @@ Si vous voulez de bons exemples 😉 → Storybook de Carbon : une librairie de composant -[![Storybook de la librairie Carbon Design]({{ site.baseurl }}/assets/2019-11-27-Storybook-intro/carbon.png)](http://react.carbondesignsystem.com/?path=/story/dropdown--default) +[![Storybook de la librairie Carbon Design]({BASE_URL}/imgs/articles/2019-11-27-Storybook-intro/carbon.png)](http://react.carbondesignsystem.com/?path=/story/dropdown--default) → Storybook d'un composant Airbnb, celui du choix dans les dates -[![Storybook d'un composant Airbnb]({{ site.baseurl }}/assets/2019-11-27-Storybook-intro/airbnb.png)](https://airbnb.io/react-dates/?path=/story/daterangepicker-drp--default) +[![Storybook d'un composant Airbnb]({BASE_URL}/imgs/articles/2019-11-27-Storybook-intro/airbnb.png)](https://airbnb.io/react-dates/?path=/story/daterangepicker-drp--default) @@ -103,7 +103,7 @@ Après un bon vieux `create-react-app` des familles on peut initialiser Storyboo --- -![c'est pas sorcier]({{ site.baseurl }}/assets/2019-11-27-Storybook-intro/pasorcier.png) +![c'est pas sorcier]({BASE_URL}/imgs/articles/2019-11-27-Storybook-intro/pasorcier.png) On va donc appliquer cette belle méthodologie, sur la meilleure application possible : cette bonne vieille to-do list! @@ -248,7 +248,7 @@ Il est un peu susceptible le George. 2. Wait... 3. `localhost:9009` -![Storybook web UI]({{ site.baseurl }}/assets/2019-11-27-Storybook-intro/tutobook.gif) +![Storybook web UI]({BASE_URL}/imgs/articles/2019-11-27-Storybook-intro/tutobook.gif) Et voilà c'est tout pour notre premier article ! @@ -270,11 +270,11 @@ Et si tu n'as pas lu l'encart en début d'article, la suite c'est simplement [ic → Documenter son Storybook avec MDX et DocsPage -![Article Documenter Storybook]({{ site.baseurl }}/assets/2019-11-27-Storybook-intro/docarticle.png) +![Article Documenter Storybook]({BASE_URL}/imgs/articles/2019-11-27-Storybook-intro/docarticle.png) → Test structurel de composant avec Storyshots et Jest -![Tester ses composants sous Storybook]({{ site.baseurl }}/assets/2019-11-27-Storybook-intro/testarticle.png) +![Tester ses composants sous Storybook]({BASE_URL}/imgs/articles/2019-11-27-Storybook-intro/testarticle.png) diff --git a/_articles/fr/2021-11-03-publication-npmjs.md b/_articles/fr/2021-11-03-publication-npmjs.md index 9cb3da256..6a88ab823 100644 --- a/_articles/fr/2021-11-03-publication-npmjs.md +++ b/_articles/fr/2021-11-03-publication-npmjs.md @@ -13,7 +13,7 @@ authors: - ygherbi keywords: [] --- -![logo-npm]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/npm-logo.png) +![logo-npm]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/npm-logo.png) De nos jours, en tant que développeurs front nous sommes constamment confrontés au fait d’utiliser des librairies. @@ -35,7 +35,7 @@ NodeJs : pour vérifier que node est bien installé, lancez la commande suivante Vous devriez avoir ce résultat (pas forcément la même version) -![node-v capture]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/node-version.png) +![node-v capture]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/node-version.png) L'usage de Git est quant à lui optionnel. @@ -93,7 +93,7 @@ Ajoutez ceci dans votre package.json Votre package.json devrait ressembler à ceci : -![paquet package.json init]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/paquet-package-init.png) +![paquet package.json init]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/paquet-package-init.png) Si vous ne souhaitez pas publier votre paquet sur github/gitlab passez à l’étape 4. @@ -109,7 +109,7 @@ Ajoutez la ligne suivante dans votre fichier : `node_modules/` -![paquet .gitignore capture]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/paquet-add-gitignore.png) +![paquet .gitignore capture]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/paquet-add-gitignore.png) Cela permettra lors du versioning de ne pas envoyer le dossier “node_modules” sur git. @@ -126,7 +126,7 @@ Si vous atterrissez sur une 404, BRAVO le nom est disponible, sinon trouvez-en u Maintenant que vous avez trouvé un nom de paquet, veuillez le modifier dans le fichier package.json. -![packahe.json maj]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/paquet-package-maj-name.png) +![packahe.json maj]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/paquet-package-maj-name.png) #### Étape 5 : @@ -150,7 +150,7 @@ import fetch from "node-fetch"; export const getRandomUser = async () => (await fetch('https://randomuser.me/api/')).json(); ```` -![paquet index.js]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/paquet-index.png) +![paquet index.js]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/paquet-index.png) Nous exportons getRandomUser pour qu’elle puisse être appelée par nos futurs utilisateurs. @@ -196,7 +196,7 @@ Exemple : npm link tutorial-paquet-npm Dans notre fichier index.js, ajoutez ceci : -![index.js test]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/test-index.png) +![index.js test]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/test-index.png) Nous importons le paquet que nous avons développé. @@ -209,7 +209,7 @@ Cela va nous permettre de voir ce que nous renvoie notre paquet. Dans votre console vous devriez avoir un user généré aléatoirement. -![node index.js capture]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/test-log-node.png) +![node index.js capture]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/test-log-node.png) Si c’est le cas vous pouvez publier votre paquet avec la certitude qu’il est fonctionnel ☺ @@ -224,7 +224,7 @@ Nous allons ajouter homepage, repository et keywords qui sont optionnels. Note : Ajoutez homepage et repository seulement si vous avez publié votre paquet sur Gitlab/Github. Dans le champ _author_ mettre votre nom et prénom pour informer que c’est vous le développeur du paquet. -![package.json paquet finish]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/paquet-maj-package-data-finish.png) +![package.json paquet finish]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/paquet-maj-package-data-finish.png) Si vous n’avez pas créé votre compte sur npm, veuillez le faire maintenant et n’oubliez pas de valider votre compte via l’email reçu. @@ -235,7 +235,7 @@ Une fois votre compte créé, rendez-vous à la racine de votre projet et lancez `npm login` (Vous allez devoir entrer votre username, password et mail) -![Login-npmjs-capture]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/login-npmjs.png) +![Login-npmjs-capture]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/login-npmjs.png) Maintenant vous pouvez lancer la commande suivante qui permet de publier votre paquet : @@ -243,7 +243,7 @@ Maintenant vous pouvez lancer la commande suivante qui permet de publier votre p `npm publish` -![Npm publish capture]({{ site.baseurl }}/assets/2021-11-03-publication-npmjs/npm-publish.png) +![Npm publish capture]({BASE_URL}/imgs/articles/2021-11-03-publication-npmjs/npm-publish.png) Votre paquet est maintenant publié ! Vous pouvez aller le vérifier dans vos paquets via votre compte sur https://www.npmjs.com/ diff --git a/_articles/fr/2021-11-17-que-faire-en-cas-de-fuite-de-donnees.md b/_articles/fr/2021-11-17-que-faire-en-cas-de-fuite-de-donnees.md index b9a6da903..739127e3c 100644 --- a/_articles/fr/2021-11-17-que-faire-en-cas-de-fuite-de-donnees.md +++ b/_articles/fr/2021-11-17-que-faire-en-cas-de-fuite-de-donnees.md @@ -28,7 +28,7 @@ Mais la violation de données n’inclut pas uniquement la fuite. D’après l Cela peut être la perte d’une clé USB ayant une copie de la base de données autant qu'une intrusion frauduleuse dans le système de données. -![Mais enfin Jérome, ça dépasserait l'entendement !]({{ site.baseurl }}/assets/2021-11-17-que-faire-en-cas-de-fuite-de-donnees/dataleak.png?width=300) +![Mais enfin Jérome, ça dépasserait l'entendement !]({BASE_URL}/imgs/articles/2021-11-17-que-faire-en-cas-de-fuite-de-donnees/dataleak.png?width=300) ## Comment les données peuvent-elles fuiter ? Les gros cas de fuites nous permettent de faire une liste plutôt exhaustive : @@ -58,7 +58,7 @@ Quand vous êtes au courant d’une fuite de données, voici ce que dit le droit Vous pouvez aussi faire en interne un manuel d’intervention en cas d’incident : cela vous permettra d’être plus efficace lors de la prise en charge et de moins jouer les pompiers. -![Mais enfin Jérome, ça dépasserait l'entendement !]({{ site.baseurl }}/assets/2021-11-17-que-faire-en-cas-de-fuite-de-donnees/law_legal_terms.png?width=300) +![Mais enfin Jérome, ça dépasserait l'entendement !]({BASE_URL}/imgs/articles/2021-11-17-que-faire-en-cas-de-fuite-de-donnees/law_legal_terms.png?width=300) ### Comment créer un manuel d’intervention ? diff --git a/_articles/fr/2021-12-8-mon-retour-sur-le-devfest-nantes-ma-premiere-conference.md b/_articles/fr/2021-12-8-mon-retour-sur-le-devfest-nantes-ma-premiere-conference.md index f63d39297..3039b2c14 100644 --- a/_articles/fr/2021-12-8-mon-retour-sur-le-devfest-nantes-ma-premiere-conference.md +++ b/_articles/fr/2021-12-8-mon-retour-sur-le-devfest-nantes-ma-premiere-conference.md @@ -15,7 +15,7 @@ keywords: - bonnes pratiques --- -![Logo du DevFest Nantes 2021]({{ site.baseurl }}/assets/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/devfest-logo.png) +![Logo du DevFest Nantes 2021]({BASE_URL}/imgs/articles/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/devfest-logo.png) Enfin ! Après 4 ans à pratiquer le métier de développeur, j'ai assisté pour la première fois à une conférence liée à mon métier et ma passion : le [DevFest Nantes](https://devfest2021.gdgnantes.com). @@ -37,7 +37,7 @@ Cette année le DevFest a accueilli un peu plus de 2000 personnes par jour penda _Par Antonin Fourneau_ -![Waterlight Graffiti]({{ site.baseurl }}/assets/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/waterlight-graffiti.jpeg) +![Waterlight Graffiti]({BASE_URL}/imgs/articles/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/waterlight-graffiti.jpeg)
Credits: Antonin Fourneau
@@ -67,7 +67,7 @@ Pour résumer, Aurélie nous a fait comprendre que la majorité des développeur _Par Elad Schechter_ -![Coronavirus Invaders]({{ site.baseurl }}/assets/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/coronavirus-invaders.jpeg) +![Coronavirus Invaders]({BASE_URL}/imgs/articles/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/coronavirus-invaders.jpeg) Quand le confinement a commencé, Elad a préparé son appartement pour en faire un endroit où il se sent bien, où il pourrait rester enfermé toute la journée. Pendant un week-end entier c'est exactement ce qu'il a fait, et il s'est lancé dans la création d'un jeu lié à la situation sanitaire : Coronavirus Invaders. Le jeu et son code source sont [disponibles sur CodePen](https://codepen.io/elad2412/pen/wvabjXy). @@ -162,7 +162,7 @@ C'est la proposition de Thibaud pour mettre en place du _chaos engineering_ dans ## Ce que je retiens de cette première conf' -![Waouh]({{ site.baseurl }}/assets/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/waouh.jpeg) +![Waouh]({BASE_URL}/imgs/articles/2021-12-08-mon-retour-sur-le-devfest-nantes-ma-premiere-conference/waouh.jpeg) D'un côté, j'ai ressenti une ferveur lors de ces 2 journées dans laquelle je me suis engouffré et qui me faisait un peu regarder partout avec des yeux émerveillés. Tout me paraissait incroyable et tout le monde me paraissait accessible et bienveillant. diff --git a/_articles/fr/2022-01-13-et-si-on-passait-a-github-actions.md b/_articles/fr/2022-01-13-et-si-on-passait-a-github-actions.md index 4ae98a74f..e6d1cf2fd 100644 --- a/_articles/fr/2022-01-13-et-si-on-passait-a-github-actions.md +++ b/_articles/fr/2022-01-13-et-si-on-passait-a-github-actions.md @@ -229,7 +229,7 @@ Voici donc les différentes étapes : - `run: terraform fmt -check -recursive -diff -no-color .` -![Premier job: lint]({{ site.baseurl }}/assets/2022-01-13-et-si-on-passait-a-github-actions/github-actions-lint.png) +![Premier job: lint]({BASE_URL}/imgs/articles/2022-01-13-et-si-on-passait-a-github-actions/github-actions-lint.png) Voici donc la définition YAML de notre premier `job` : @@ -269,7 +269,7 @@ Voici donc les différentes étapes pour le second : - `run: terraform plan -input=false -no-color -compact-warnings` -![Second job: plan]({{ site.baseurl }}/assets/2022-01-13-et-si-on-passait-a-github-actions/github-actions-plan.png) +![Second job: plan]({BASE_URL}/imgs/articles/2022-01-13-et-si-on-passait-a-github-actions/github-actions-plan.png) Voici donc la définition YAML de notre second `job` diff --git a/_articles/fr/2022-01-31-build-website-with-nextjs.md b/_articles/fr/2022-01-31-build-website-with-nextjs.md index c918748c6..8a5da48ad 100644 --- a/_articles/fr/2022-01-31-build-website-with-nextjs.md +++ b/_articles/fr/2022-01-31-build-website-with-nextjs.md @@ -164,7 +164,7 @@ export default MyApp Chaque page générée utilise notre Layout. On peut le constater sur la page d'accueil : -![astro teams layout]({{ site.baseurl }}/assets/2022-01-26-build-website-with-nextjs/website-layout.png) +![astro teams layout]({BASE_URL}/imgs/articles/2022-01-26-build-website-with-nextjs/website-layout.png) Il nous reste à ajouter le contenu de la page d'accueil. @@ -228,7 +228,7 @@ export default function Home() { > **Note** : Ne pas oublier d'ajouter les règles CSS. Le fichier correspondant est `styles/home.module Css`. L'ensemble des modules CSS pour les pages est stocké dans ce dossier. -![Website Home Page]({{ site.baseurl }}/assets/2022-01-26-build-website-with-nextjs/homepage.png) +![Website Home Page]({BASE_URL}/imgs/articles/2022-01-26-build-website-with-nextjs/homepage.png) Les composants `pages/index js` et `components/Layout js` contiennent des redirections vers d'autres pages, qui n'existent pas pour l'instant. Nous allons apprendre comment créer ces pages avec NextJS. @@ -275,7 +275,7 @@ export default function Contact() { } ``` -![Contact Page]({{ site.baseurl }}/assets/2022-01-26-build-website-with-nextjs/contactpage.png) +![Contact Page]({BASE_URL}/imgs/articles/2022-01-26-build-website-with-nextjs/contactpage.png) Maintenant que nous avons une page de contact, il nous faut une page par équipe. Pour ça, on va créer une seule page avec le nom de l'équipe en paramètre. @@ -345,7 +345,7 @@ export default function Team({ teamName, teamDescription, teamImagePath, teamPla ``` Ici on passe nos propos à un composant qui rend les éléments de la page. Dorénavant, si on clique sur le bouton "read more", on verra la page de détails d'une équipe. -![Team Page]({{ site.baseurl }}/assets/2022-01-26-build-website-with-nextjs/teampage.png) +![Team Page]({BASE_URL}/imgs/articles/2022-01-26-build-website-with-nextjs/teampage.png) Nous avons maintenant un site web prêt à être mis en production. diff --git a/_articles/fr/2022-01-31-glossaire-agile.md b/_articles/fr/2022-01-31-glossaire-agile.md index 37016b557..dbac07bd1 100644 --- a/_articles/fr/2022-01-31-glossaire-agile.md +++ b/_articles/fr/2022-01-31-glossaire-agile.md @@ -21,4 +21,4 @@ Ce glossaire regroupe tous les principaux termes utilisés au quotidien en équi Débutant ou expert, il est toujours utile de l'avoir à disposition, pour apprendre ou se rafraîchir la mémoire ! [Pour télécharger le glossaire, cliquez ici](https://bit.ly/glossaire-agile) -![glossaire-agile]({{site.baseurl}}/assets/2022-01-19-glossaire-agile/glossaireagile.jpg) +![glossaire-agile]({BASE_URL}/imgs/articles/2022-01-19-glossaire-agile/glossaireagile.jpg) diff --git a/_articles/fr/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises.md b/_articles/fr/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises.md index 9dbb6ac94..86889e837 100644 --- a/_articles/fr/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises.md +++ b/_articles/fr/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises.md @@ -70,7 +70,7 @@ document.removeEventListener("count", count as EventListener); Par ailleurs, une façon de s'assurer que les écouteurs d'événements sont bien présents et qu'ils n'ont pas été attachés plusieurs fois à la page web est de vérifier cela à l'aide des outils de développement Chrome. Voici à quoi cela peut ressembler : -![Outils de développement pour événements personnalisé sur Chrome]({{ site.baseurl }}/assets/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises/event-listeners-on-chrome.png) +![Outils de développement pour événements personnalisé sur Chrome]({BASE_URL}/imgs/articles/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises/event-listeners-on-chrome.png) Pour aller plus loin, il existe un troisième argument pour la méthode [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) qui n'a pas été évoqué précédemment. Il s'agit de l'argument `once`, qui peut s'avérer être utile pour que l'écouteur d'événement ne soit exécuté qu'une seule fois et qu'il soit détruit automatiquement après son invocation. ```ts @@ -83,9 +83,9 @@ document.addEventListener("open", open, { once: true }); L'application a été créée avec `Create React App` et `Chakra UI`. Elle représente un parcours classique sur un ecommerce, c'est-à-dire, ajouter un produit au panier, afficher le montant total du panier et afficher le panier complété. -![Application React - Liste des produits]({{ site.baseurl }}/assets/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises/application-react-product-list.png) +![Application React - Liste des produits]({BASE_URL}/imgs/articles/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises/application-react-product-list.png) -![Application React - Panier]({{ site.baseurl }}/assets/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises/application-react-cart.png) +![Application React - Panier]({BASE_URL}/imgs/articles/2022-02-09-communication-entre-composants-avec-des-evenements-personnalises/application-react-cart.png) Voici le conteneur de l'application. Dans celui-ci se trouvent trois conteneurs (`ViewCartButtonContainer`, `AddToCartButtonContainer`, `CartContainer`). ```tsx diff --git a/_articles/fr/2022-02-15-introduction-a-microsoft-azure.md b/_articles/fr/2022-02-15-introduction-a-microsoft-azure.md index 4d38274f0..05f2e00f2 100644 --- a/_articles/fr/2022-02-15-introduction-a-microsoft-azure.md +++ b/_articles/fr/2022-02-15-introduction-a-microsoft-azure.md @@ -15,7 +15,7 @@ keywords: - devops --- -![Dark Vador Cookie]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/COOKIE.jpg) +![Dark Vador Cookie]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/COOKIE.jpg) Si vous avez lu **“Microsoft”** et que vous n’avez pas fui, bienvenue sur cette introduction à la solution de **Cloud Microsoft** ! Ayant travaillé deux ans sur **Azure**, j’ai eu envie de partager ce que j’avais pu apprendre et livrer mes astuces et mon ressenti sur cet outil. @@ -95,7 +95,7 @@ Microsoft fournit un accès pour tester sa solution. Il suffit d'effectuer les 1. Cliquez sur le lien d'accès à la [version de test](https://azure.microsoft.com/fr-fr/free/) 2. Cliquez sur le bouton encadré en rouge. - ![Interface free azure]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/FREE.png) + ![Interface free azure]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/FREE.png) _**Image 1:** interface d'accès à l'abonnement gratuit_ 4. Connectez-vous via le portail Microsoft. (si vous n’avez pas de compte, créez-en un) 5. Remplissez le formulaire avec vos informations. À la fin de la procédure, vos informations bancaires vous seront demandées. C’est une sécurité pour éviter de créer plusieurs comptes gratuits. @@ -114,7 +114,7 @@ Nous avons donc : Voici un **schéma** qui résume l'ensemble : -![Organisation]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/ORG.png) +![Organisation]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/ORG.png) #### Votre première machine virtuelle @@ -137,7 +137,7 @@ Nous allons commencer par vérifier que nous possédons bien un abonnement. 2. Selectionnez 'Abonnement' **(2)** 3. Vérifiez qu'il est bien présent **(3)** - ![Abonnement]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/ABO.png) + ![Abonnement]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/ABO.png) ##### La création du groupe de ressources @@ -147,12 +147,12 @@ Nous avons un abonnement fonctionnel, nous allons ajouter un 'Groupe de ressourc 2. Selectionnez 'Groupe de ressources' **(2)** 3. Cliquez sur 'Créer' **(3)** - ![Ressource groupe]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/RG.png) + ![Ressource groupe]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/RG.png) 4. Entrez le nom du groupe **(1)** 5. Cliquez sur 'Vérifier + Créer' **(2)** -![Ressource group configuration]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/RGC.png) +![Ressource group configuration]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/RGC.png) ##### Groupe de sécurité réseau @@ -162,17 +162,17 @@ Nous allons créer et ajouter un Groupe de sécurité réseau. C'est l'équivala 2. Sélectionnez 'Groupe de sécurité réseau' **(2)** 3. Cliquez sur 'Créer' **(3)** - ![NSG]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/NSG.png) + ![NSG]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/NSG.png) 4. Entrez le nom du groupe de sécurité réseau **(1)** 5. Cliquez sur 'Vérifier + Créer' **(2)** - ![NSG configuration]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/NSGC.png) + ![NSG configuration]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/NSGC.png) 6. Vous avez ici les règles par défaut affichées **(1)** 7. Cliquez sur 'Règles de sécurité de trafic entrant **(2)** - ![NSG rules]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/NSGRR.png) + ![NSG rules]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/NSGRR.png) 8. Cliquez sur 'Ajouter'**(1)** 9. Entrez en source 'Any'**(2)** @@ -182,7 +182,7 @@ Nous allons créer et ajouter un Groupe de sécurité réseau. C'est l'équivala 13. Cochez 'Autoriser' **(6)** 14. Entrez le nombre pour la priorité **(7)** - ![NSG add port]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/NSGM.png) + ![NSG add port]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/NSGM.png) > Le choix du nombre pour indiquer la priorité est simple. Plus le nombre est petit, plus il sera traité avant les autres. Les règles de blocages ont des nombres plus grand que ceux qui autorisent. @@ -194,7 +194,7 @@ Nous allons créer et ajouter un Groupe de sécurité réseau. C'est l'équivala 2. Selectionnez 'Machines Virtuelles' **(2)** 3. Cliquez sur 'Créer' **(3)** - ![VM]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/MV.png) + ![VM]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/MV.png) 4. Ajouter notre Groupe de Ressources**(1)** 5. Ajouter le nom de la Machine Virtuelle **(2)** @@ -203,17 +203,17 @@ Nous allons créer et ajouter un Groupe de sécurité réseau. C'est l'équivala 8. Choisir la taille en fonction du besoin **(5)** 9. Cliquez sur 'Suivant : Disques' - ![VM configuration]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/MVC11.png) + ![VM configuration]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/MVC11.png) 11. Sélectionnez le type de disque qui vous intéresse **(2)** - ![VM configuration disk]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/MVCD.png) + ![VM configuration disk]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/MVCD.png) 12. Au niveau de 'Groupe de sécurité réseau de la carte réseau', cochez 'Paramètres avancés'**(1)** 13. Selectionner le groupe réseau crée précédemment. 14. Cliquez sur 'Vérifier + créer' -![VM configuration réseau]({{ site.baseurl }}/assets/2022-02-15-introduction-a-microsoft-azure/MVCN.png) +![VM configuration réseau]({BASE_URL}/imgs/articles/2022-02-15-introduction-a-microsoft-azure/MVCN.png) ##### Connexion à la machine virtuelle diff --git a/_articles/fr/2022-03-22-enquete-sur-le-crypto-gaming.md b/_articles/fr/2022-03-22-enquete-sur-le-crypto-gaming.md index 75be0a1c7..d9d5e5997 100644 --- a/_articles/fr/2022-03-22-enquete-sur-le-crypto-gaming.md +++ b/_articles/fr/2022-03-22-enquete-sur-le-crypto-gaming.md @@ -18,7 +18,7 @@ keywords: Le [crypto-gaming](https://en.wikipedia.org/wiki/Blockchain_game) est en plein essor sur les internets, quelle est cette nouvelle passion ? Peut-on réellement gagner de l’argent en jouant aux jeux vidéo ? -![Block chain]({{ site.baseurl }}/assets/2022-03-16-enquete-sur-le-crypto-gaming/enquete-crypto.png?width=300) +![Block chain]({BASE_URL}/imgs/articles/2022-03-16-enquete-sur-le-crypto-gaming/enquete-crypto.png?width=300) ## Les bases @@ -29,7 +29,7 @@ La [crypto-monnaie](https://fr.wikipedia.org/wiki/Cryptomonnaie) est une monnaie Vous en avez peut-être déjà entendu parler dans le monde artistique et surtout sportif, le NFT remplace les cartes de collections Panini. Le [NFT](https://fr.wikipedia.org/wiki/Jeton_non_fongible) pour _Non-Fungible Token_ (en français _Jeton non fongible_) est souvent un objet numérique qui va être certifié via la blockchain comme appartenant à une identité numérique ( = un propriétaire). -![Carte Haaland sur Sorare à 600k]({{ site.baseurl }}/assets/2022-03-16-enquete-sur-le-crypto-gaming/sorare-nft.png?width=233) +![Carte Haaland sur Sorare à 600k]({BASE_URL}/imgs/articles/2022-03-16-enquete-sur-le-crypto-gaming/sorare-nft.png?width=233) *
Sur Sorare, la carte unique de Erling Haaland vaut 600k, alors que la carte hors NFT ne vaut rien.
* @@ -64,7 +64,7 @@ Lorsqu’un éditeur lance son jeu, il va mettre en vente des NFT (ou jetons) po L’éditeur va déjà gagner de l'argent en vendant ces premiers jetons générés parfois à l'infini, parfois en nombre limité (surtout pour les NFT). Pourquoi en nombre limité ? Tout simplement pour éviter que le prix du jeton baisse s’il y en a trop en circulation, et donc décourager des joueurs/investisseurs. -![Starting game project]({{ site.baseurl }}/assets/2022-03-16-enquete-sur-le-crypto-gaming/crypto-gaming-start.png) +![Starting game project]({BASE_URL}/imgs/articles/2022-03-16-enquete-sur-le-crypto-gaming/crypto-gaming-start.png) @@ -74,7 +74,7 @@ L’éditeur va ensuite proposer aux utilisateurs de gagner des objets sous form Dans beaucoup de cas, plus le jeu offrira des avantages à jouer, plus le jeu sera attractif, plus il y aura de joueurs. Et les joueurs ayant investis rendront le jeu attractif pour ceux qui veulent se développer ou les nouveaux : ce sont eux qui achètent leurs jetons, et qui vont leur permettre de gagner de l’argent. -![Starting game project]({{ site.baseurl }}/assets/2022-03-16-enquete-sur-le-crypto-gaming/business.png) +![Starting game project]({BASE_URL}/imgs/articles/2022-03-16-enquete-sur-le-crypto-gaming/business.png) Une question me taraudait, et je le voyais dans Axie : comment les jetons, surtout en nombre infini, sont créés ? La réponse ne me plaît pas : un jeton est créé à partir de rien, il n'a de la valeur que pour les gens qui les utilisent. @@ -83,19 +83,19 @@ La réponse ne me plaît pas : un jeton est créé à partir de rien, il n'a de Comme pour la crypto-monnaie classique, les tokens possèdent leur propre cours boursier. -![Cours de l'objet SLP du jeu Axie Infinity]({{ site.baseurl }}/assets/2022-03-16-enquete-sur-le-crypto-gaming/axie-slp.png) +![Cours de l'objet SLP du jeu Axie Infinity]({BASE_URL}/imgs/articles/2022-03-16-enquete-sur-le-crypto-gaming/axie-slp.png) *
Sur Axie, on peut gagner en combat des objets SLP qui permettent de faire de l'élevage.
* En fonction du cours, il sera ou non intéressant de les revendre, comme à la bourse. -![Starting game project Up]({{ site.baseurl }}/assets/2022-03-16-enquete-sur-le-crypto-gaming/speculation-down.png) +![Starting game project Up]({BASE_URL}/imgs/articles/2022-03-16-enquete-sur-le-crypto-gaming/speculation-down.png) *
Plus il y a d’acheteurs et moins il y a d’intentions d’achat, plus le cours chute.
* -![Starting game project Down]({{ site.baseurl }}/assets/2022-03-16-enquete-sur-le-crypto-gaming/speculation-up.png) +![Starting game project Down]({BASE_URL}/imgs/articles/2022-03-16-enquete-sur-le-crypto-gaming/speculation-up.png) *
Moins il y a d’acheteurs et plus il y a d’intentions d’achat, plus le cours monte.
* diff --git a/_articles/fr/2022-03-29-nestjs-le-cycle-de-vie-dune-requete.md b/_articles/fr/2022-03-29-nestjs-le-cycle-de-vie-dune-requete.md index dd7e04bb1..944a753b3 100644 --- a/_articles/fr/2022-03-29-nestjs-le-cycle-de-vie-dune-requete.md +++ b/_articles/fr/2022-03-29-nestjs-le-cycle-de-vie-dune-requete.md @@ -16,7 +16,7 @@ keywords: [] Bienvenue dans cet article ayant pour but de faire un tour d'horizon du cycle de vie d'une requête puis d'une réponse dans un environnement NestJS ! -![NestJS logo]({{ site.baseurl }}/assets/2022-03-04-nestjs-le-cycle-de-vie-dune-requete/nest-logo.png?width=300) +![NestJS logo]({BASE_URL}/imgs/articles/2022-03-04-nestjs-le-cycle-de-vie-dune-requete/nest-logo.png?width=300) Figure: *NestJS Framework* Le but ici sera de donner une représentation précise de chaque étape que peut rencontrer une requête, dans l'ordre, et avec des exemples. Une fois lu une première fois, gardez cet article dans un coin, à la manière d'un **pense-bête**. @@ -42,7 +42,7 @@ Vous pouvez être totalement débutant en NestJS et quand même lire cet article ## Cycle de vie : vue globale Rien de tel qu'un schéma que je vous ai concocté pour entrer dans le vif du sujet. Je vous laisse vous en imprégner. -![]({{ site.baseurl }}/assets/2022-03-04-nestjs-le-cycle-de-vie-dune-requete/nest-lifecycle-schema.png) +![]({BASE_URL}/imgs/articles/2022-03-04-nestjs-le-cycle-de-vie-dune-requete/nest-lifecycle-schema.png)

Note

@@ -86,7 +86,7 @@ Niveau **global** => Niveau **module** => Niveau **controller** => Niveau **rout Reprenons donc une partie de notre schéma vu plus haut, mais mis à jour. Cela donnerait : -![]({{ site.baseurl }}/assets/2022-03-04-nestjs-le-cycle-de-vie-dune-requete/updated-lifecycle-schema.png) +![]({BASE_URL}/imgs/articles/2022-03-04-nestjs-le-cycle-de-vie-dune-requete/updated-lifecycle-schema.png) Ci-dessous à titre indicatif, vous trouverez des exemples de déclaration pour chaque niveau. Rendez-vous dans les prochaines sections pour les présentations plus poussées de toutes nos couches (Middlewares, Interceptors...). diff --git a/_articles/fr/2022-06-13-decouverte-ipython.md b/_articles/fr/2022-06-13-decouverte-ipython.md index 1466ea3ac..ed35276a6 100644 --- a/_articles/fr/2022-06-13-decouverte-ipython.md +++ b/_articles/fr/2022-06-13-decouverte-ipython.md @@ -113,7 +113,7 @@ L'interface Jupyter est quasiment identique à IPython. Il y a des cellules dans Tout est enregistré dans un fichier `.ipynb`. -![Interface Jupyter]({{ site.baseurl }}/assets/2022-06-13-decouverte-ipython/jupyter.png) +![Interface Jupyter]({BASE_URL}/imgs/articles/2022-06-13-decouverte-ipython/jupyter.png) Github met en forme les notebooks Jupyter pour en faciliter la lecture. Par exemple : [https://github.com/jdwittenauer/ipython-notebooks/blob/master/notebooks/ml/ML-Exercise1.ipynb](https://github.com/jdwittenauer/ipython-notebooks/blob/master/notebooks/ml/ML-Exercise1.ipynb) diff --git a/_articles/fr/2022-08-12-top-5-des-pires-erreurs-sous-symfony.md b/_articles/fr/2022-08-12-top-5-des-pires-erreurs-sous-symfony.md index f4c031542..1efe0b4ac 100644 --- a/_articles/fr/2022-08-12-top-5-des-pires-erreurs-sous-symfony.md +++ b/_articles/fr/2022-08-12-top-5-des-pires-erreurs-sous-symfony.md @@ -19,7 +19,7 @@ Je suis développeuse PHP/Symfony depuis près de 10 ans, et au cours de mes mis ## #5 Faire une librairie, alors qu’il s’agit d’un bundle -![Library vs Bundle]({{ site.baseurl }}/assets/2022-08-12-top-5-des-pires-erreurs-sous-symfony/libraryvsbundle.png?width=300) +![Library vs Bundle]({BASE_URL}/imgs/articles/2022-08-12-top-5-des-pires-erreurs-sous-symfony/libraryvsbundle.png?width=300) Combien de fois ai-je vu des soi-disant librairies qui, n'en étant pas (vous allez comprendre ce que j'entends par là très vite), posaient des soucis de maintenabilité sur les projets Symfony ? La réponse est : beaucoup trop. @@ -43,7 +43,7 @@ Un développeur travaille sur le service A qui utilise la library Tools pour la Mais ce développeur n'a pas détecté que sa modification a créé un break change inintentionnel sur le Service B, et comme la librairie n’a pas été mise à jour sur celui-ci, c'est resté invisible. Un autre développeur travaille en parallèle sur, justement, ce Service B et a aussi besoin de modifier cette librairie. Quand il va faire sa branche sur la librairie, cela sera à partir de la branche principale, avec la modification pour la feature 01. Quand la librairie sera mise à jour pour tester la branche spécifique, il y aura une erreur, dont la raison demeurera complètement opaque pour le deuxième développeur... -![Example problème librairies partagées]({{ site.baseurl }}/assets/2022-08-12-top-5-des-pires-erreurs-sous-symfony/librairies-partagees.png?width=600) +![Example problème librairies partagées]({BASE_URL}/imgs/articles/2022-08-12-top-5-des-pires-erreurs-sous-symfony/librairies-partagees.png?width=600) Cela fait perdre du temps pour débugger, car ça implique de solliciter toute son équipe, pour identifier le développeur responsable du break change et corriger ce qui doit l'être. @@ -73,7 +73,7 @@ Grâce à la commande `bin/console debug:event-dispatcher` ou dans le profiler, ## #1 Utiliser API Platform aveuglément -![No API Platform]({{ site.baseurl }}/assets/2022-08-12-top-5-des-pires-erreurs-sous-symfony/no-api-platform.png?width=200) +![No API Platform]({BASE_URL}/imgs/articles/2022-08-12-top-5-des-pires-erreurs-sous-symfony/no-api-platform.png?width=200) API Platform permet de créer rapidement des APIs et cela permet de gagner un temps incroyable en début de projet. Malheureusement, le coût de développement et de maintien vient plus tard et peut être faramineux. diff --git a/_articles/fr/2022-08-24-phpstorm-tips-config-extensions.md b/_articles/fr/2022-08-24-phpstorm-tips-config-extensions.md index 216620d9d..24cdd6723 100644 --- a/_articles/fr/2022-08-24-phpstorm-tips-config-extensions.md +++ b/_articles/fr/2022-08-24-phpstorm-tips-config-extensions.md @@ -17,7 +17,7 @@ keywords: [] Bienvenue dans cet article qui j'espère, vous aidera à gagner en productivité sur l'IDE [PhpStorm](https://www.jetbrains.com/fr-fr/phpstorm/) de la suite JetBrains. Je vais vous parler de mes extensions préférées ainsi que de certains points de configuration méconnus mais très utiles. Prêts ? C'est parti ! -![PhpStorm Logo]({{ site.baseurl }}/assets/2022-08-24-phpstorm-tips-config-extensions/PhpStorm_Icon.png?width=300) +![PhpStorm Logo]({BASE_URL}/imgs/articles/2022-08-24-phpstorm-tips-config-extensions/PhpStorm_Icon.png?width=300) Figure: *PhpStorm* @@ -35,7 +35,7 @@ Comme vous le savez certainement si vous utilisez PhpStorm, les raccourcis clavi Cependant il peut être compliqué de se rappeler de tous les raccourcis qui existent, et de prendre l'habitude de les utiliser. Il faudrait que quelqu'un nous rabache à longueur de journée que ce que nous faisons aurait pu être effectué en un clic avec un raccourci. Devinez quoi ? C'est exactement ce que Key Promoter va faire pour vous. -![Key Promoter notif]({{ site.baseurl }}/assets/2022-08-24-phpstorm-tips-config-extensions/key-promoter-notification.png?width=450) +![Key Promoter notif]({BASE_URL}/imgs/articles/2022-08-24-phpstorm-tips-config-extensions/key-promoter-notification.png?width=450) Figure: *Key Promoter* @@ -55,7 +55,7 @@ Heureusement, PhpStorm possède une extension pour cela, j'ai nommé *CodeGlance -![Codeglance Map]({{ site.baseurl }}/assets/2022-08-24-phpstorm-tips-config-extensions/code-glance-example.png?width=300) +![Codeglance Map]({BASE_URL}/imgs/articles/2022-08-24-phpstorm-tips-config-extensions/code-glance-example.png?width=300) Figure: *Code Glance*
@@ -80,7 +80,7 @@ La solution ? Cliquez sur l'onglet *View* => *Appearance*. La liste des menus s' Vous voilà à présent dans cette situation : -![PhpStorm Clean]({{ site.baseurl }}/assets/2022-08-24-phpstorm-tips-config-extensions/clean-phpstorm.png?width=500) +![PhpStorm Clean]({BASE_URL}/imgs/articles/2022-08-24-phpstorm-tips-config-extensions/clean-phpstorm.png?width=500) Figure: *PhpStorm, the clean way*
@@ -116,7 +116,7 @@ L'utilisation de ce menu prend tout son sens quand on est débarrassé de toutes Nous voilà arrivés à la dernière fonctionnalité que je vais vous présenter aujourd'hui. Elle devrait en particulier vous intéresser si vous avez du mal à vous passer des taskbars 100% du temps. Voici le Distraction free mode. -![distraction free mode]({{ site.baseurl }}/assets/2022-08-24-phpstorm-tips-config-extensions/distraction-free-mode.png) +![distraction free mode]({BASE_URL}/imgs/articles/2022-08-24-phpstorm-tips-config-extensions/distraction-free-mode.png) Figure: Distraction free mode diff --git a/_articles/fr/2022-10-26-retour-sur-le-forum-php-2022.md b/_articles/fr/2022-10-26-retour-sur-le-forum-php-2022.md index bb8c76a15..870a8dc9a 100644 --- a/_articles/fr/2022-10-26-retour-sur-le-forum-php-2022.md +++ b/_articles/fr/2022-10-26-retour-sur-le-forum-php-2022.md @@ -21,7 +21,7 @@ C'est la première fois que l'AFUP vient poser ses valises dans ce lieu magique, Les astronautes étaient présents pour assister aux différents talks proposés. Impossible bien entendu d'assister à tout, mais entre rappels et nouveaux apprentissages, voici un retour pêle-mêle sur les talks qui nous ont marqués ! -![Afup2022 Logo]({{ site.baseurl }}/assets/2022-10-26-retour-sur-le-forum-php-2022/afup2022.png?width=300) +![Afup2022 Logo]({BASE_URL}/imgs/articles/2022-10-26-retour-sur-le-forum-php-2022/afup2022.png?width=300) ## The PHP Foundation: The past, the present, and the future diff --git a/_articles/fr/2022-11-08-analyse-cout-electricite.md b/_articles/fr/2022-11-08-analyse-cout-electricite.md index 4323acf4b..a7c2ee68c 100644 --- a/_articles/fr/2022-11-08-analyse-cout-electricite.md +++ b/_articles/fr/2022-11-08-analyse-cout-electricite.md @@ -223,7 +223,7 @@ Cela me donne le tableau suivant. La lecture du tableau ne permet pas de se rendre compte de cette répartition. Ajoutons un graphique en camembert. -![répartition de la consommation entre les différentes périodes]({{ site.baseurl }}/assets/2022-11-08-analyse-cout-electricite/repartition-consommation.png) +![répartition de la consommation entre les différentes périodes]({BASE_URL}/imgs/articles/2022-11-08-analyse-cout-electricite/repartition-consommation.png) C'est mieux :) @@ -260,7 +260,7 @@ Je répète cette opération pour tous les tarifs que j'ai sélectionnés. Cela me permet de tracer ce graphique avec Plotly. -![coût de l'électricité en fonction du tarif]({{ site.baseurl }}/assets/2022-11-08-analyse-cout-electricite/calcul-cout-electricite.png) +![coût de l'électricité en fonction du tarif]({BASE_URL}/imgs/articles/2022-11-08-analyse-cout-electricite/calcul-cout-electricite.png) Il nous donne les informations nécessaires pour répondre à notre question initiale, à nous de l'interpréter. @@ -286,6 +286,6 @@ Sur cette base d'analyse, il est possible d'approfondir le sujet en appliquant u * [https://particulier.edf.fr/fr/accueil/electricite-gaz/offres-electricite/offres-marche.html](https://particulier.edf.fr/fr/accueil/electricite-gaz/offres-electricite/offres-marche.html) * [https://www.enedis.fr/jaccede-mes-donnees-de-consommation-et-de-production-delectricite](https://www.enedis.fr/jaccede-mes-donnees-de-consommation-et-de-production-delectricite) * [https://fr.wikipedia.org/wiki/Voltamp%C3%A8re](https://fr.wikipedia.org/wiki/Voltamp%C3%A8re) -* [Code de l'analyse]({{ site.baseurl }}/assets/2022-11-08-analyse-cout-electricite/code.zip) +* [Code de l'analyse]({BASE_URL}/imgs/articles/2022-11-08-analyse-cout-electricite/code.zip) * [https://pandas.pydata.org/pandas-docs/stable/user_guide/missing_data.html#values-considered-missing](https://pandas.pydata.org/pandas-docs/stable/user_guide/missing_data.html#values-considered-missing) * [https://chartio.com/resources/tutorials/how-to-check-if-any-value-is-nan-in-a-pandas-dataframe/](https://chartio.com/resources/tutorials/how-to-check-if-any-value-is-nan-in-a-pandas-dataframe/) diff --git a/_articles/fr/2022-11-22-mission-accessible.md b/_articles/fr/2022-11-22-mission-accessible.md index 8c630aecf..064b2e07f 100644 --- a/_articles/fr/2022-11-22-mission-accessible.md +++ b/_articles/fr/2022-11-22-mission-accessible.md @@ -27,7 +27,7 @@ La notion d’usages est au cœur de l’idée d’accessibilité. Opposé à l Concevoir un outil accessible c’est donc penser un outil pour les utilisatrices et utilisateurs tels qu’ils sont réellement, dans leur diversité (voir les [travaux d’accessibilité de Google](https://m3.material.io/foundations/accessible-design/overview) et de [Microsoft](https://www.microsoft.com/design/inclusive/) pour en savoir plus). -![Exemple de situation d’handicap permanent, temporaire et situationnel]({{ site.baseurl }}/assets/2022-11-22-mission-accessible/disabilities.jpg?width=600) +![Exemple de situation d’handicap permanent, temporaire et situationnel]({BASE_URL}/imgs/articles/2022-11-22-mission-accessible/disabilities.jpg?width=600) Figure: Source [Accessibility Guidelines de Avinash Kaur](https://uxdesign.cc/accessibility-guidelines-for-a-ux-designer-c3ba775539be) ## Pourquoi _faire_ de l’accessibilité ? @@ -36,7 +36,7 @@ Intégrer une démarche d’accessibilité à votre produit est **bénéfique po Tout d’abord, concevoir une expérience utilisateur accessible est **bénéfique pour l’ensemble de vos utilisateurs**. Par exemple, alors que le sous-titrage de messages peut servir pour les individus avec une déficience auditive, cela permet aussi de faire passer un message dans une situation bruyante (voir illustration ci-dessous). Ainsi, la démarche d’accessibilité permet d’inclure les individus atteints d’un handicap permanent, qui représentent [près d’1 adulte français sur 7](https://www.cnsa.fr/documentation/cnsa_chiffres_cles_2021_interactif.pdf), mais aussi d’offrir une expérience plus adaptée à **l’ensemble de vos utilisateurs**. -![Exemple de situation d’handicap permanent, temporaire et situationnel]({{ site.baseurl }}/assets/2022-11-22-mission-accessible/group.png?width=600) +![Exemple de situation d’handicap permanent, temporaire et situationnel]({BASE_URL}/imgs/articles/2022-11-22-mission-accessible/group.png?width=600) Figure: Source [Accessibility Guidelines de Avinash Kaur](https://uxdesign.cc/accessibility-guidelines-for-a-ux-designer-c3ba775539be) Enfin, concevoir votre produit dans une démarche d’accessibilité est aussi [bénéfique pour votre business](https://www.w3.org/standards/webdesign/accessibility). Parmi d’autres bénéfices pour votre entreprise, un produit “accessible” est un produit qui : @@ -90,7 +90,7 @@ Il est important de comprendre que ces descriptions doivent être objectives et De plus, une hiérarchie claire dans la structure du site est nécessaire jusqu'au niveau de conformité A. C'est l'un des nombreux cas où le code et l'UX se chevauchent nécessairement. Voici un exemple de mise en page de site Web prototype : -![HTML structuré de manière sémantique et prévisible en utilisant les éléments tels que Menu, en-tête, titre, sous-titre, article, image, etc.]({{ site.baseurl }}/assets/2022-11-22-mission-accessible/layout.png?width=600) +![HTML structuré de manière sémantique et prévisible en utilisant les éléments tels que Menu, en-tête, titre, sous-titre, article, image, etc.]({BASE_URL}/imgs/articles/2022-11-22-mission-accessible/layout.png?width=600) Figure: Source [How to structure your HTML properly for Web Accessibility](https://digital.com/how-to-create-a-website/how-to-properly-structure-your-html-for-web-accessibility/) @@ -136,7 +136,7 @@ D'autre part, de nombreux critères d'accessibilité ne font que suivre les bonn Une fois les principes appliqués se pose la question de l’évaluation. Est-ce que votre produit est effectivement davantage accessible pour les contextes d’usages que vous envisagiez ? -![Illustration of a guidelines book]({{ site.baseurl }}/assets/2022-11-22-mission-accessible/guidelines.png?width=300) +![Illustration of a guidelines book]({BASE_URL}/imgs/articles/2022-11-22-mission-accessible/guidelines.png?width=300) ### Outils d’audit @@ -178,7 +178,7 @@ Pour récapituler, nous avons vu que : Le chemin déblayé, il ne reste plus qu’à se demander : on commence quand ? -![Woman in a wheelchair using a computer]({{ site.baseurl }}/assets/2022-11-22-mission-accessible/accessibility_cover.png?width=300) +![Woman in a wheelchair using a computer]({BASE_URL}/imgs/articles/2022-11-22-mission-accessible/accessibility_cover.png?width=300) ### Ressources diff --git a/_articles/fr/2023-01-11-react-day-berlin.md b/_articles/fr/2023-01-11-react-day-berlin.md index 1821a579a..f967d76ac 100644 --- a/_articles/fr/2023-01-11-react-day-berlin.md +++ b/_articles/fr/2023-01-11-react-day-berlin.md @@ -19,7 +19,7 @@ keywords: [] Avec une reprise progressive des conférences depuis la crise de COVID, le React Day Berlin a eu lieu cette année le 2 et 5 décembre en modalité mixte : un jour en présentiel et un jour en distanciel. Le vendredi s’est passé dans **l’espace Kosmos**, un théâtre des années 1960 avec une capacité de plus de 800 personnes et deux salles principales. J’y suis allée pour la première fois, et vous propose dans les lignes qui suivent un retour de mon expérience. -![Kosmos place]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/kosmos-place.jpg) +![Kosmos place]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/kosmos-place.jpg) Figure: Le site Kosmos prêt pour le premier jour du React Day Berlin. *Crédit photo : GitNation.* ## Le chemin vers la conférence @@ -32,17 +32,17 @@ _Les meetups de GitNation sont ouverts aux bénévoles. Il suffit de remplir un _Participer en tant que bénévole implique d'être présent la veille de la conférence pour préparer le lieu et bien entendu de se rendre disponible pour l’organisation le jour de l'événement. En échange, les bénévoles peuvent avoir accès à l'intégralité de l'événement, les enregistrements des expositions inclus, et 6 mois d'accès Multipass aux événements de GitNation. Il vaut mieux savoir que le billet d'entrée en full remote coûtait environ 80 EUR, le billet hybride 480 EUR, et le Multipass annuel plus de 900 EUR._
-![Variété de goodies avec le logo React Day, tels que des autocollants et des badges.]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/react-day-berlin-1.jpg) +![Variété de goodies avec le logo React Day, tels que des autocollants et des badges.]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/react-day-berlin-1.jpg) Figure: Autocollants, épingles et badges prêts. *Crédit photo : GitNation.* Finalement à Berlin, je devais être sur place le jeudi à 12h. J’ai déposé mes affaires au Airbnb, qui n'était heureusement qu'à 10 minutes à pied du complexe Kosmos dans le quartier Friedrichshain. Une fois là, j’ai pu rencontrer une dizaine des gens, tous bénévoles eux aussi. La plupart d’entre eux étaient aussi devs, mais tous habitaient à Berlin. Ceci dit, malgré le fait d'être dans la capitale allemande, la communication de tout le voyage s’est passée entièrement en anglais. -![Mur en pierre blanche et détails en jaune, noir, vert et rouge avec des lettres bleues.]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/kosmos.jpg) +![Mur en pierre blanche et détails en jaune, noir, vert et rouge avec des lettres bleues.]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/kosmos.jpg) Figure: Intérieur de la salle principale de Blade Runner. *Crédit photo : GitNation.* La première journée était guidée par Veronika, chargée de l'organisation des événements de GitNation, qui a divisé l'équipe de bénévoles en squads. Les tâches étaient assez simples et on était nombreux à les faire, ce qui a été très appréciable pour passer le temps plus rapidement étant donné que je n’avais pas dormi le soir. Une équipe était chargéé de mettre en place les signalisations des salles, une autre de monter les décors, d'autres devaient ordonner les badges d'accès alphabétiquement, et la mienne étaient en charge des goodie bags. Avec plein des cartons sur le sol et un déjeuner complet offert, nous avons rempli plus de 450 sacs avec les goodies des sponsors. -![Trois sous-verre avec le logo d'Internet Explorer, JavaScript et TypeScript]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/sous-verre.jpg) +![Trois sous-verre avec le logo d'Internet Explorer, JavaScript et TypeScript]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/sous-verre.jpg) Figure: Sous-verres thématiques pour les participants. *Crédit photo : GitNation.* Etonnant, mais c'était plutôt drôle à faire ! On s’est divisés en stations ou chacun était chargé d’un des éléments. Les sacs étaient plutôt classiques : une tote bag en coton, avec quelques stickers, des dessousde verre JS et TS, un cache-camera, des cartes postales, et un mystérieux boomerang. À 18h nous avions fini et sommes rentrés chez nous. @@ -51,25 +51,25 @@ Etonnant, mais c'était plutôt drôle à faire ! On s’est divisés en station ## L'événement : goodies, nourriture et plein de gens Le lendemain, c'était la journée la plus importante de la conférence, avec plus de 25 speakers et plusieurs workshops gratuits. Dans le salon principal se tenaient les conférences du track Blade Runner, et dans le secondaire celles du track appelé Mnemonic. -![Trois plateaux en métal avec de la nourriture sur une table blanche.]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/breakfast.jpg) +![Trois plateaux en métal avec de la nourriture sur une table blanche.]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/breakfast.jpg) Figure: Pâtisseries du petit-déjeuner. *Crédit photo : GitNation.* L'équipe des bénévoles devait être sur place à 7h pour inscrire, guider ou donner des goodie bags aux participants qui ont commencé à arriver à 8h. Le matin a donc commencé avec l'accueil des participants et un petit déjeuner avec du café et des viennoiseries dans les deux buffets disponibles à côté de chaque salon. On remettait à chacun un carton jaune ou un carton bleu dans le but de diviser les visiteurs de la façon la plus homogène possible sur les deux endroits pendant l'heure de déjeuner. Il y avait aussi un open bar avec des bouteilles d'eau en libre service pour tous les assistants de la conférence. -![Salle avec plusieurs sièges bleus et une scène avec le logo React Day Berlin]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/mnemonic.jpg) +![Salle avec plusieurs sièges bleus et une scène avec le logo React Day Berlin]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/mnemonic.jpg) Figure: Intérieur de la deuxième salle Mnemonic. *Crédit photo : GitNation.* Cette fois en binôme, j’ai été assignée aux tâches dans le track Blade Runner, qui a été une belle surprise parmi les conférences. On devait s'assurer que les speakers soient dans la salle à l'heure indiquée au programme, puis les guider aux tests son, et les accompagner aux session de Q&A après leurs talks. On devait, bien-sûr, répondre aux requêtes générales des assistants relatives au mot de passe du Wi-Fi ou à la garde-robe. C’est important de préciser que les organisateurs de GitNation étaient disponibles tout le temps et qu’on avait une communication ouverte dans un channel spécial en Discord. ## Les conférences du track Bladerunner les plus intéressantes (selon moi) -![Porte en métal avec un panneau bleu]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/blade-runner-track.jpg) +![Porte en métal avec un panneau bleu]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/blade-runner-track.jpg) Figure: Extérieur de la salle principale. *Crédit photo : GitNation.* ### L'ouverture de Nik Graf L'ouverture était assurée par Nik Graf, le créateur de Serenity notes. Sa présentation "The weird things about React" a été - à vue d'oeil - la plus suivie. Il a donné plusieurs bons conseils, le plus évident étant peut-être **la recommandation sur le suivi des documentations informelles de la libraire par des chaînes non officiels, comme par exemple dans les comptes [Twitter de Dan Abramov](https://twitter.com/dan_abramov) (créateur de Redux et actuellement en ReactJS); [Sebastian Markbåge](https://twitter.com/sebmarkbage) (Vercel) et [Andrew Clark](https://twitter.com/acdlite) (core team de ReactJS).** -![Homme en pull blanc parlant sur une scène avec un écran géant]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/graf.jpg) +![Homme en pull blanc parlant sur une scène avec un écran géant]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/graf.jpg) Figure: Nik Graf lors de sa présentation. *Crédit photo : GitNation.* Pour illustrer l'importance d'être au courant des changements ‘hors normes’, il a mentionné la possibilité de remount un composant juste… en changeant la propriété “key”! Même si c’est un usage marginal et non recommandé dans les documentations officielles, c’est une notion qui peut être utile en travaillant avec du legacy code ou des useEffects problématiques. @@ -78,21 +78,21 @@ Graf a exposé un long chemin vers les évolutions de React par rapport à la co ### Tobias Koppers sur l'évolution de Webpack a Turbopack -![Salle avec vue sur l'écran d'information, le présentateur avec un t-shirt noir à gauche sur scène prenant la parole.]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/koppers.jpg) +![Salle avec vue sur l'écran d'information, le présentateur avec un t-shirt noir à gauche sur scène prenant la parole.]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/koppers.jpg) Figure: Tobias Kopper lors de sa présentation. *Crédit photo : GitNation.* Probablement la deuxième présentation la plus attendue de la première journée du React Day Berlin, présentée par l’allemand Tobias Kopper, qui a créé Webpack et qui travaille actuellement chez Vercel. Une introduction très complète sur Turbopack. Comme le dit Kopper, **Turbopack est le "successeur de Webpack”**. Cela veut dire que les objectifs sont les mêmes que dans l’ancien module bundler, avec un horizon open source et agnostique. La première motivation de la création de Turbopack est de répondre à une nouvelle demande sur le développement en JS : **la performance**. C’est pour ça que le cœur de ce nouveau projet se concentre sur des problématiques courantes comme l’invalidation de cache, les builds incrémentiels et le watch mode. Avec un système fait en plusieurs couches, l'équipe de Vercel s’est éloignée du langage JavaScript pour choisir Rust grâce à sa performance prévisible, sa sécurité, et surtout car cela permet d’utiliser le parser SWC. Toutefois, les plugins pourraient être développés en JS ou Rust pour améliorer l'expérience de l’application par des développeurs qui ne travaillent pas en Rust. -![Salle pleine illuminée de lumière bleue et le présentateur sur scène.]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/koppers2.jpg) +![Salle pleine illuminée de lumière bleue et le présentateur sur scène.]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/koppers2.jpg) Figure: La situation de Webpack selon Tobias Kopper. *Crédit photo : GitNation.* La couche suivante est le Turbo engine, qui est peut-être le concept le plus intéressant présenté par Koppers. **La puissance de Turbo engine réside dans la possibilité d’avoir la mémorisation ou le cache des fonctions**, ce qui implique que si la fonction est appelée deux fois, elle ne sera calculée qu'une seule fois. Au-dessus de tout cela, Turbopack est construit avec de grosses évolutions comme l’optimisation inter-environnement notamment, cet outil ne devrait pas tarder à arriver dans les projets des prochaines années. ### L'abordage des projets interculturels selon Emma Bostian -![Femme en longue robe noire sur podium donnant la présentation.]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/bostian.jpg) +![Femme en longue robe noire sur podium donnant la présentation.]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/bostian.jpg) Figure: Emma Bostian lors de sa présentation. *Crédit photo : GitNation.* Emma Bostian (Spotify) a mis sur le tapis le sujet de **l’interculturalité dans les équipes de développement**. Faire des demandes, donner ou recevoir du feedback, et même la quotidienneté n’est pas du tout évidente quand on travaille avec des gens partout dans le monde. J'étais touchée très rapidement par cette présentation car j’ai ressenti des chocs similaires plusieurs fois au travail. @@ -100,7 +100,7 @@ Emma Bostian (Spotify) a mis sur le tapis le sujet de **l’interculturalité da Bostian a exposé que l’expression et la communication en fonction des différentes cultures n’est que la reconnaissance de l'individualité de chaque être humain, et que l’effet de nier ou s'éloigner de cet aspect provoque une lecture des interactions envahie par notre propre culture. Elle a basé sa présentation selon **deux types de communication : celle de contexte bas, et celle de contexte haut**. La première correspondrait à une communication très claire, directe et indépendante du contexte, alors que la deuxième est absolument opposée car on a besoin de connaître le contexte pour bien comprendre le message. -![Salle pleine avec le présentateur sur le podium et les participants assis.]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/bostian2.jpg) +![Salle pleine avec le présentateur sur le podium et les participants assis.]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/bostian2.jpg) Figure: *Crédit photo : GitNation.* Par la suite, Bostian exprimait que selon la culture d’origine on peut être plus ou moins éloignés de nos interlocuteurs, et que nos compétences communicatives peuvent être très fortes avec les gens avec qui on partage la culture mais pas autant avec les autres. Elle a aussi remarqué que la plupart des conflits sont communs aux interlocuteurs avec un type de communication très liée au contexte mais qui appartiennent à différentes cultures. Les conseils proposés incluent une **écoute active** dans les cas de communication avec des gens qui correspondent plutôt aux cultures plus dépendantes du contexte et à **la priorité sur la clarté dans les processus du travail**, entre autres. @@ -109,14 +109,14 @@ Par la suite, Bostian exprimait que selon la culture d’origine on peut être p Après cette dernière présentation, l’after party a eu lieu. Plusieurs accessoires lumineux et des DJs ont animé la fête. -![Trois hommes discutant et dansant dans la chambre noire avec des accessoires lumineux.]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/after-party.jpg) +![Trois hommes discutant et dansant dans la chambre noire avec des accessoires lumineux.]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/after-party.jpg) Figure: Accessoires, musique techno et des jeux de société. *Crédit photo : GitNation.* Le lundi 5 décembre c'était la deuxième partie de cette conférence. Cette fois à distance, beaucoup moins de bénévoles ont été convoqués, mais j’ai participé à la modération des conférences et à l’introduction des speakers. Personnellement, j’ai été un peu moins attirée par ce format car les presentations étaient précédemment enregistrées. Par contre, après chacune le Q&A était possible en ligne, du coup les présentateurs étaient quand même “présents”. ### Retour d'expérience -![L'équipe sur scène saluant et souriant à la caméra.]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/team.jpg) +![L'équipe sur scène saluant et souriant à la caméra.]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/team.jpg) Figure: L'équipe GitNation, speakers et assistants sur la photo finale. *Crédit photo : GitNation.* L'expérience en tant que bénévole était très intéressante et c’est une très bonne façon de rencontrer du monde et de découvrir des nouveautés techniques. React Day Berlin nous rappelle **l'enrichissement unique de la rencontre en personne et comment le partage des connaissances dans la conversation avec le public n'est pas seulement un moyen d'apprendre mais aussi de rendre cette information interactive et engageante**. La ville gelée de Berlin était un point de ralliement pour les développeurs du monde entier et un point de découverte. @@ -124,7 +124,7 @@ L'expérience en tant que bénévole était très intéressante et c’est une t Dans cet article, je n'ai mentionné que certaines des présentations les plus intéressantes, mais il y en avait beaucoup d'autres comme le ["The Sorcery of Building a Cross Platform Design System Architecture" par Kamlesh Chandnani](https://portal.gitnation.org/contents/the-sorcery-of-building-a-cross-platform-design-system-architecture) ou ["Staying Safe In a Concurrent World" par Andreas Roth](https://portal.gitnation.org/contents/staying-safe-in-a-concurrent-world-1014). Tout le contenu est accessible depuis le site GitNation sur [ce lien](https://portal.gitnation.org/events/react-day-berlin-2022). -![Sac en tissu bleu avec un imprimé blanc]({{ site.baseurl }}/assets/2023-01-11-react-day-berlin/swag-bag.jpg) +![Sac en tissu bleu avec un imprimé blanc]({BASE_URL}/imgs/articles/2023-01-11-react-day-berlin/swag-bag.jpg) Figure: La phrase du React Day Berlin "Build code not walls". *Crédit photo : GitNation.* diff --git a/_articles/fr/2023-01-25-dedoublonnez-vos-photos.md b/_articles/fr/2023-01-25-dedoublonnez-vos-photos.md index 46a56fcce..39aabd301 100644 --- a/_articles/fr/2023-01-25-dedoublonnez-vos-photos.md +++ b/_articles/fr/2023-01-25-dedoublonnez-vos-photos.md @@ -14,7 +14,7 @@ authors: keywords: [] --- -![Cover]({{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/cover.jpg) +![Cover]({BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/cover.jpg) ## Introduction @@ -42,7 +42,7 @@ De cette manière, on peut être sûr que le fichier téléchargé est le même Il est important de noter que même si la somme SHA-1 est encore utilisée, il y a des algorithmes de hachage plus récents qui sont considérés plus sécurisés (comme SHA-256, SHA-3, etc). Calculons ainsi le hash SHA-1 de la photo suivante : -![Pilou]({{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546.jpg) +![Pilou]({BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546.jpg) Pour faire cela nous utiliserons le code suivant : ```php @@ -63,7 +63,7 @@ Si on refait la même opération sur la photo qui s'est affichée, dans votre na ```php hash('{{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546.jpg'); +$hash = $hasher->hash('{BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546.jpg'); echo $hash->toHex(); ``` @@ -109,7 +109,7 @@ a3d7d5f2e22489b3 Je vais maintenant faire quelques ajustements sur ma photo afin de changer les niveaux de couleurs et nous obtenons ainsi la photo suivante (plus pâle, plus jaune) : -![Pilou avec des niveaux modifiés]({{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546_leveling.jpg) +![Pilou avec des niveaux modifiés]({BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546_leveling.jpg) En exécutant le même bout de code que précédemment : @@ -121,7 +121,7 @@ require(__DIR__.'/vendor/autoload.php'); use Jenssegers\ImageHash\ImageHash; $hasher = new ImageHash(); -$hash = $hasher->hash('{{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546_leveling.jpg'); +$hash = $hasher->hash('{BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546_leveling.jpg'); echo $hash->toHex(); ``` @@ -135,7 +135,7 @@ a3d7d5f2e22489b3 Vous avez bien lu : nous avons toujours le même perceptual hash ! Même si les couleurs de l'image ont été modifiées, la donnée visuelle est toujours la même, et donc le hash de même. Pour avoir un hash différent il va falloir faire des modifications beaucoup plus aggressive. Je vais donc maintenant changer réellement l'aspect d'une zone entière de l'image en mettant un smiley par-dessus la tête de mon chat : -![Pilou avec un emoji à la place de la tête]({{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546_emoji.jpg) +![Pilou avec un emoji à la place de la tête]({BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546_emoji.jpg) En exécutant le même bout de code que précédemment : @@ -145,7 +145,7 @@ En exécutant le même bout de code que précédemment : use Jenssegers\ImageHash\ImageHash; $hasher = new ImageHash(); -$hash = $hasher->hash('{{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546_emoji.jpg'); +$hash = $hasher->hash('{BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546_emoji.jpg'); echo $hash->toHex(); ``` @@ -175,17 +175,17 @@ Le moyen le plus rapide de supprimer les hautes fréquences et les détails est De cette façon, le hachage correspondra à toute variation de l'image, indépendamment de l'échelle ou du rapport d'aspect. -![Pilou en 8x8 taille réelle]({{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546_8x8.jpg) <-- résultat en taille réelle +![Pilou en 8x8 taille réelle]({BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546_8x8.jpg) <-- résultat en taille réelle -![Pilou en 8x8 grande taille]({{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546_8x8.jpg?height=512&width=512) +![Pilou en 8x8 grande taille]({BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546_8x8.jpg?height=512&width=512) #### 2. Réduire la couleur #### La petite image 8x8 est convertie en niveaux de gris. Cela fait passer le hachage de 64 pixels (64 rouges, 64 verts et 64 bleus) à 64 couleurs au total. -![Pilou en 8x8 et greyscale taille réelle]({{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546_8x8_greyscale.jpg) <-- résultat en taille réelle +![Pilou en 8x8 et greyscale taille réelle]({BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546_8x8_greyscale.jpg) <-- résultat en taille réelle -![Pilou en 8x8 et greyscale en 8x8 grande taille]({{ site.baseurl }}/assets/2023-01-25-dedoublonnez-vos-photos/IMG_0546_8x8_greyscale.jpg?height=512&width=512) +![Pilou en 8x8 et greyscale en 8x8 grande taille]({BASE_URL}/imgs/articles/2023-01-25-dedoublonnez-vos-photos/IMG_0546_8x8_greyscale.jpg?height=512&width=512) #### 3. Moyenne des couleurs #### diff --git a/_articles/fr/2023-02-22-symfony-et-mongodb-retour-aux-sources.md b/_articles/fr/2023-02-22-symfony-et-mongodb-retour-aux-sources.md index 0306b174e..81f55d23b 100644 --- a/_articles/fr/2023-02-22-symfony-et-mongodb-retour-aux-sources.md +++ b/_articles/fr/2023-02-22-symfony-et-mongodb-retour-aux-sources.md @@ -16,7 +16,7 @@ keywords: --- -![Symfony et MongoDB]({{ site.baseurl }}/assets/2023-02-22-symfony-et-mongodb-retour-aux-sources/logo.png?width=200px) +![Symfony et MongoDB]({BASE_URL}/imgs/articles/2023-02-22-symfony-et-mongodb-retour-aux-sources/logo.png?width=200px) Sur ce blog, nous avons déjà quelques articles autour de MongoDB, et même s’ils sont encore d’actualité, il n’y en avait pas sur MongoDB dans Symfony, d'où cet article ! diff --git a/_articles/fr/2023-04-20-comment-choisir-parmi-scrum-kanban-safe.md b/_articles/fr/2023-04-20-comment-choisir-parmi-scrum-kanban-safe.md index 709e64a96..95265cc16 100644 --- a/_articles/fr/2023-04-20-comment-choisir-parmi-scrum-kanban-safe.md +++ b/_articles/fr/2023-04-20-comment-choisir-parmi-scrum-kanban-safe.md @@ -26,7 +26,7 @@ L'agilité est devenue un choix populaire pour les entreprises qui cherchent à L'approche SCRUM est une méthode agile de gestion de projet. Son objectif principal est d'améliorer la productivité de son équipe tout en permettant l'optimisation des produits grâce à des retours réguliers du marché. Cette méthodologie est l'une des plus populaires et des plus utilisées dans les projets de développement de logiciels. Scrum est basé sur des sprints, de courtes périodes de travail d'une durée de deux semaines à un mois, au cours desquelles une équipe de développement se concentre sur un objectif précis. Scrum utilise des réunions quotidiennes pour suivre l'avancement du projet et des réunions de sprint pour planifier et évaluer chaque sprint. -![]({{ site.baseurl }}/assets/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/agile.png) +![]({BASE_URL}/imgs/articles/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/agile.png) Suite à un questionnaire diffusé auprès des équipes d’Eleven Labs et des recherches, vous trouverez ci-dessous les avantages et inconvénients identifiés dans l’utilisation de la méthode SCRUM : @@ -83,8 +83,8 @@ Kanban est une méthode de gestion de projet visuelle axée sur la gestion du fl Le tableau Kanban est complètement personnalisable en fonction de vos besoins. Par exemple, vous pouvez utiliser le tableau le plus commun composé de 3 colonnes (image de gauche) : to do (tickets priorisés par ordre d’importance), work in progress (tickets en cours de développement) et done (tickets terminés ou livrés). Vous pouvez aussi personnaliser votre Kanban, comme l’un de nos projets Studio, en rajoutant une colonne pour les tickets en cours de définition fonctionnelle, ou ceux qui sont à tester par l’équipe technique ou fonctionnelle (image de droite). -![]({{ site.baseurl }}/assets/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/kanban1.jpg?width=400) -![]({{ site.baseurl }}/assets/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/kanban_jira.png) +![]({BASE_URL}/imgs/articles/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/kanban1.jpg?width=400) +![]({BASE_URL}/imgs/articles/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/kanban_jira.png) ### Avantages @@ -146,7 +146,7 @@ SAFe (Scaled Agile Framework) est une expansion du framework Scrum pour la gesti Ainsi, alors que Scrum définit un framework au niveau de l’équipe, Safe apporte des précisions pour la mise en place de l’agilité au niveau de l’entreprise au global. Elle permet ainsi d'étendre l'approche Agile à l'ensemble de l'organisation en utilisant une chaîne d'équipes collaboratives appelées "Agile Release Trains". Cette méthode se différencie de la pratique consistant à cloisonner les méthodes agiles à un seul service en utilisant le modèle Scrum. SAFe se concentre sur l'alignement de l'ensemble de l'entreprise sur les objectifs communs et sur la fourniture de résultats cohérents à grande échelle. -![]({{ site.baseurl }}/assets/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/agile_train.jpg) +![]({BASE_URL}/imgs/articles/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/agile_train.jpg) ### Avantages @@ -186,7 +186,7 @@ Rémi a également noté un manque concernant les **parties prenantes externes** Mission : Accompagnement sur l’agilité et le framework Safe "Pendant deux ans, nous avons appliqué les principes de SAFe (Scaled Agile Framework) pour faciliter l'adoption de pratiques communes par toutes les parties prenantes et favoriser la collaboration dans notre programme. Nous avons également mis en place les principes de l'agilité en entreprise pour permettre la mise en place d'un budget capacitif, suivi d'un portefeuille d'initiatives produit. Cette étape a permis d'aligner toutes les parties prenantes du programme sur des pratiques communes et de rendre notre produit plus réactif aux changements tels que le marché, les avantages concurrentiels, les besoins des clients et les impératifs commerciaux." -![]({{ site.baseurl }}/assets/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/methodo_eleven.jpg) +![]({BASE_URL}/imgs/articles/2023-04-20-comment-choisir-parmi-scrum-kanban-safe/methodo_eleven.jpg) ## Conclusion diff --git a/_articles/fr/2023-05-03-archi-modelisation.md b/_articles/fr/2023-05-03-archi-modelisation.md index 754dd8a83..660872cfb 100644 --- a/_articles/fr/2023-05-03-archi-modelisation.md +++ b/_articles/fr/2023-05-03-archi-modelisation.md @@ -35,7 +35,7 @@ ArchiMate offre un langage commun pour décrire la construction et le fonctionne Les principaux concepts et éléments du langage ArchiMate sont présentés sous le nom d'ArchiMate Core Framework, qui se compose de trois “layers” et de trois “aspects”. Cela crée une matrice de combinaisons. Chaque couche à ses aspects “Passive Structure”, “Behavior” et “Active Structure”. -![Matrice Archimate]({{ site.baseurl }}/assets/2023-05-03-archi-modelisation/core_framework_archimate.jpeg) +![Matrice Archimate]({BASE_URL}/imgs/articles/2023-05-03-archi-modelisation/core_framework_archimate.jpeg) D'après Wikipedia : @@ -67,36 +67,36 @@ Tout élément dans Archi est un objet (boite, relation, étiquette, …), poss Prenons comme exemple ce schéma simple, décrivant le parcours de création d’un utilisateur. -![Matrice Archimate]({{ site.baseurl }}/assets/2023-05-03-archi-modelisation/archi_screenshot_1.png) +![Matrice Archimate]({BASE_URL}/imgs/articles/2023-05-03-archi-modelisation/archi_screenshot_1.png) Ce que l’on peut voir immédiatement, c’est que l’ensemble des éléments sont référencés dans le Model Archi, que ça soit les éléments business (en jaune), les applications techniques et les interfaces d’API (en bleu) et même les relations. Cela vous permet d’avoir un référentiel documentaire entre les différents schémas, et de réutiliser les mêmes éléments dans des schémas différents. Dans l'exemple ci-dessous, l’application “MS Client” est le même objet que dans le premier schéma. -![Matrice Archimate 2]({{ site.baseurl }}/assets/2023-05-03-archi-modelisation/archi_screenshot_2.png) +![Matrice Archimate 2]({BASE_URL}/imgs/articles/2023-05-03-archi-modelisation/archi_screenshot_2.png) Cela permet notamment d’avoir une documentation unique sur l’ensemble de models et de faciliter cette documentation. -![Matrice Archimate 3]({{ site.baseurl }}/assets/2023-05-03-archi-modelisation/archi_screenshot_3.png) +![Matrice Archimate 3]({BASE_URL}/imgs/articles/2023-05-03-archi-modelisation/archi_screenshot_3.png) Autre force de l’outil, sa gestion des relations et notamment des imbrications. Lors de l’insertion d’un objet dans un autre, Archi comprend qu’il peut s’agir d’une relation (souvent d’une composition) et va vous demander explicitement de décrire s'il s’agit d’une relation explicite (comme une flèche finalement). Exemple ici quand je tente d’ajouter un component “test” dans l’API Gateway. -![Matrice Archimate 4]({{ site.baseurl }}/assets/2023-05-03-archi-modelisation/archi_screenshot_4.png) +![Matrice Archimate 4]({BASE_URL}/imgs/articles/2023-05-03-archi-modelisation/archi_screenshot_4.png) D’ailleurs maintenant, si je veux sortir cette boite de l’API Gateway, la relation va rester et apparaître explicitement. -![Matrice Archimate 5]({{ site.baseurl }}/assets/2023-05-03-archi-modelisation/archi_screenshot_5.png) +![Matrice Archimate 5]({BASE_URL}/imgs/articles/2023-05-03-archi-modelisation/archi_screenshot_5.png) Mais le plus gros avantage à cette gestion des “objets” dans Archi, c’est la possibilité de générer en un clic une vue, à partir d’un élément du référentiel, avec l’ensemble des objets qui lui sont attachés. Idéal pour comprendre la place d’un objet dans l’ensemble de notre ecosystème, y compris sur des schémas gérés par d’autres personnes. Exemple : -![Matrice Archimate 6]({{ site.baseurl }}/assets/2023-05-03-archi-modelisation/archi_screenshot_6.png) +![Matrice Archimate 6]({BASE_URL}/imgs/articles/2023-05-03-archi-modelisation/archi_screenshot_6.png) Enfin, dernier gros avantage de ce référentiel, l’outil permet de rechercher dans l’ensemble des objets (et des attributs des objets) ! diff --git a/_articles/fr/2023-05-10-instruction-debugger-et-points-arret.md b/_articles/fr/2023-05-10-instruction-debugger-et-points-arret.md index f1dc65163..6ac6173f6 100644 --- a/_articles/fr/2023-05-10-instruction-debugger-et-points-arret.md +++ b/_articles/fr/2023-05-10-instruction-debugger-et-points-arret.md @@ -39,7 +39,7 @@ Un exemple va nous aider à comprendre l’utilisation et les avantages de cette Pour l’occasion j’ai préparé une page web qui nous dit la vérité sur ce fameux `debugger`, la voici : -![La fausse vérité sur l'instruction debugger]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/screenshot1.png) +![La fausse vérité sur l'instruction debugger]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/screenshot1.png) Euh… ok… Je ne m’attendais pas à ça…
Bon, on va dire que ça tombe bien, on va déboguer tout ça ! @@ -85,19 +85,19 @@ L’instruction `debugger` ne fait rien d’autre que créer un **point d’arr C’est une façon d'arrêter le temps à un instant T et fouiller dans le code, un véritable bullet time à la Matrix pendant lequel on peut trouver et buter Le Grand Méchant Bug. -![Neo - Bullet time]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/bullet-time.jpg) +![Neo - Bullet time]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/bullet-time.jpg) Si on rafraîchit simplement notre page web, on ne verra rien de nouveau… mais si avant de rafraîchir la page on ouvre notre console… *it’s bullet time, baby!* Ça y est, le temps s’est arrêté, la console nous montre l’onglet “Sources”, qui contient différents outils pour analyser le code, se déplacer dans l’espace-temps et comprendre d’où vient réellement le problème. ## L’onglet Sources en deux mots -![L'onglet Source dans Google Chrome]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/onglet-source.png) +![L'onglet Source dans Google Chrome]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/onglet-source.png) **Sources** nous présente trois sections : 1. À gauche on retrouve tous les fichiers qui ont été chargés sur la page, y compris les fichiers CSS et HTML, très utile pour naviguer dans la structure de notre application et visualiser/modifier en temps réel chaque fichier. @@ -108,39 +108,39 @@ Si on rafraîchit simplement notre page web, on ne verra rien de nouveau… mais Résumé des épisodes précédents : le temps s’est arrêté, on est comme *Doctor Strange* sur une page web qui est totalement congelée et qui ne répond plus. -![Doctor Strange - Oeil d'Agamotto]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/Eye-of-Agamotto.jpg) +![Doctor Strange - Oeil d'Agamotto]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/Eye-of-Agamotto.jpg) Le panel de débogage est notre *Oeil d'Agamotto*, voici un aperçu de ses principaux buttons : -![Boutton reprendre l'execution du script]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/boutton-1.gif?width=45) **Reprendre l'exécution du script.** +![Boutton reprendre l'execution du script]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/boutton-1.gif?width=45) **Reprendre l'exécution du script.** Une façon de décongeler l'exécution du script, l’application reprendra son cycle naturel, sauf s'il y a d'autres points d'arrêt, auquel cas l'exécution s'arrêtera à nouveau. -![Boutton passer à l’appel de fonction suivant]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/boutton-2.gif?width=45) **Passer à l’appel de fonction suivant.** +![Boutton passer à l’appel de fonction suivant]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/boutton-2.gif?width=45) **Passer à l’appel de fonction suivant.** Lui, il nous permet d’avancer jusqu'au prochain appel d’une fonction. -![Boutton rentrer dans la fonction actuelle]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/boutton-3.gif?width=45) **Rentrer dans la fonction actuelle.** +![Boutton rentrer dans la fonction actuelle]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/boutton-3.gif?width=45) **Rentrer dans la fonction actuelle.** Si la ligne sur laquelle on s’est arrêté contient un appel à fonction, en cliquant sur ce bouton on sera magiquement téléporté à l'intérieur de cette fonction. Vous allez adorer. -![Boutton quitter la fonction actuelle]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/boutton-4.gif?width=45) **Quitter la fonction actuelle.** +![Boutton quitter la fonction actuelle]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/boutton-4.gif?width=45) **Quitter la fonction actuelle.** À l'inverse, ce bouton nous permet de sortir de la fonction dans laquelle on s’est téléporté. -![Boutton etape]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/boutton-5.gif?width=45) **Étape.** +![Boutton etape]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/boutton-5.gif?width=45) **Étape.** Notre meilleur ami, en cliquant dessus il nous fera avancer dans notre script d’une ligne à la fois, *step by step*. Plus en bas dans le panel de débogage, on retrouve plusieurs sections, on va se focaliser sur les sections **Scope** et **Call stack**. -![Scope]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/scope.gif?width=450) +![Scope]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/scope.gif?width=450) La section **Scope** contient la liste des variables et des fonctions disponibles dans le contexte d'exécution actuel de votre code. Intéressant de voir que le hoisting de javascript fait que la variable `theTruth` est déjà disponible dans le scope Local, malgré le fait qu’elle n’ait pas encore été initialisée. *Mathemagical!* -![Call stack]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/call-stack.gif?width=449) +![Call stack]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/call-stack.gif?width=449) La section **Call stack** contient la “pile d’appels”, autrement dit l’historique des fonctions appelées qui font qu’on en est là. La fonction la plus récente est toujours au sommet de la pile. @@ -154,7 +154,7 @@ Ok, on a toutes les armes pour tacler notre bug, on arrête le blah blah et on y Essayons de faire avancer notre script jusqu’à la ligne 19 pour observer les changements de notre panel de débogage. -![L'onglet Source dans Google Chrome - Breakpoint]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/onglet-source-2.png) +![L'onglet Source dans Google Chrome - Breakpoint]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/onglet-source-2.png) C’est intéressant de voir que la valeur de la variable `theTruth` dans la section Scope => Local du panel de débogage est passée de `undefined` à `“ne sert à rien”` (super, merci…). @@ -170,7 +170,7 @@ Je vais utiliser les actions du panel de débogage pour : Essayons: Intéressant : `theWholeTruth()` a l’air de faire un simple `join` sur un array qui semblerait venir d'une autre fonction : `nothingButTheTruth()`. @@ -180,7 +180,7 @@ On sait ce qu’il faut faire, n’est-ce pas ? ;-) Let’s go! Voilà… on a trouvé le responsable du bug. @@ -188,7 +188,7 @@ Autant de suspense, et finalement, il s'agissait juste d’un array de mensonges Il ne me reste plus qu'à revenir à mon IDE, dénoncer l’array en question pour faux et usage de faux, rétablir l’ordre dans l’univers et… -![La vérité sur l'instruction debugger]({{ site.baseurl }}/assets/2023-05-10-instruction-debugger-et-points-arret/screenshot2.png) +![La vérité sur l'instruction debugger]({BASE_URL}/imgs/articles/2023-05-10-instruction-debugger-et-points-arret/screenshot2.png) ## Conclusion diff --git a/_articles/fr/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers.md b/_articles/fr/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers.md index 07c065463..c993f1961 100644 --- a/_articles/fr/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers.md +++ b/_articles/fr/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers.md @@ -94,25 +94,25 @@ Lorsqu'il s'agit de gérer efficacement les Design Tokens, il existe une panopli ### Tokens Studio -![Tokens Studio]({{ site.baseurl }}/assets/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers/token-studio.jpg) +![Tokens Studio]({BASE_URL}/imgs/articles/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers/token-studio.jpg) Un outil puissant spécialement conçu pour les designers. Il vous permet de créer et de gérer facilement des Design Tokens visuels dans des outils de conception tels que Figma. ### Specify -![Specify]({{ site.baseurl }}/assets/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers/specify.jpg) +![Specify]({BASE_URL}/imgs/articles/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers/specify.jpg) Une solution conviviale qui offre une interface intuitive pour créer et gérer des tokens de manière centralisée. Il favorise la collaboration entre les équipes de conception et de développement. ### Supernova -![Supernova]({{ site.baseurl }}/assets/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers/supernova.webp) +![Supernova]({BASE_URL}/imgs/articles/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers/supernova.webp) Un outil tout-en-un qui prend en charge la création, la gestion et l'intégration des Design Tokens dans vos flux de travail de développement. Il facilite la collaboration entre les équipes et vous permet de libérer votre créativité. ### Style Dictionary -![Style Dictionary]({{ site.baseurl }}/assets/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers/style-dictionary.png) +![Style Dictionary]({BASE_URL}/imgs/articles/2023-06-28-un-pont-entre-les-mondes-comment-les-design-tokens-facilitent-la-cooperation-entre-developpeurs-et-designers/style-dictionary.png) Un outil populaire pour l'industrialisation des Design Tokens. Il permet de générer des fichiers de styles à partir des Design Tokens, simplifiant ainsi leur intégration dans vos projets de développement. diff --git a/_articles/fr/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet.md b/_articles/fr/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet.md index 4f04e71b3..fcef636aa 100644 --- a/_articles/fr/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet.md +++ b/_articles/fr/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet.md @@ -9,8 +9,7 @@ excerpt: >- technique qui nous fait perdre du temps et qui nous rend fou au point de vérifier qui a fait le code. Vous aussi vous voulez entrer dans la postérité lors d’un git blame et mal concevoir votre produit ? -cover: >- - /assets/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-projet/logo.png +cover: /assets/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-projet/logo.png categories: - php - javascript @@ -22,7 +21,7 @@ keywords: - développement --- -![La dette technique, cet enfer]({{ site.baseurl }}/assets/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet/logo.png?width=1000) +![La dette technique, cet enfer]({BASE_URL}/imgs/articles/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet/logo.png?width=1000) Quand on arrive sur un projet existant, on doit souvent subir une dette technique qui nous fait perdre du temps et qui nous rend fou au point de vérifier qui a fait le code. Vous aussi vous voulez entrer dans la postérité lors d’un git blame et mal concevoir votre produit ? @@ -38,7 +37,7 @@ Inventé en 1992, le terme vient d'une métaphore qui applique au développement Il est possible de contracter une dette consciemment pour des problématiques de délais, mais elle peut être prise inconsciemment. ## Mal cadrer son architecture -![Quand ton architecture se casse la figure]({{ site.baseurl }}/assets/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet/falling-diagram.png?width=1000) +![Quand ton architecture se casse la figure]({BASE_URL}/imgs/articles/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet/falling-diagram.png?width=1000) Prendre des mauvaises décisions dès le début en faisant des erreurs d’architecture peut être de vrais boulets pour la vie du projet. @@ -70,13 +69,13 @@ On veut souvent tester les dernières tendances, mais si vous n’avez pas au mo Même si le modèle est criticable, vous pouvez aussi vous baser sur le [cycle de la hype](https://fr.wikipedia.org/wiki/Cycle_du_hype) : il est plus raisonnable de prendre une technologie quand elle est à son plateau de productivité. -![Schéma du cycle de la hype]({{ site.baseurl }}/assets/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet/cycle-de-la-hype.png?width=500) +![Schéma du cycle de la hype]({BASE_URL}/imgs/articles/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet/cycle-de-la-hype.png?width=500)
Finalement, vous choisissez une nouvelle technologie, vous pouvez encore limiter la casse. La question sur la disponibilité n’est pas anodine : il faut se former sur la technologie et ça prend du temps. Entre les livres et les cours en ligne, vous savez où chercher, et au pire, vous avez votre réseau pour poser des questions. ## Mal modéliser sa base de données -![Quand la base de données est mal modélisée]({{ site.baseurl }}/assets/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet/burning-database.png?width=1000) +![Quand la base de données est mal modélisée]({BASE_URL}/imgs/articles/2023-08-09-comment-creer-de-la-dette-technique-des-le-debut-d-un-nouveau-projet/burning-database.png?width=1000) Point critique qui peut être source de problème de performances sur des applications qui ont besoin d’être rapide à lire en écriture et/ou en lecture. S’il y a trop de latence, un client peut délaisser votre produit pour un concurrent. diff --git a/_articles/fr/2023-08-09-comprendre-et-personnaliser-son-environnement-docker.md b/_articles/fr/2023-08-09-comprendre-et-personnaliser-son-environnement-docker.md index a3dffe10d..86faa9284 100644 --- a/_articles/fr/2023-08-09-comprendre-et-personnaliser-son-environnement-docker.md +++ b/_articles/fr/2023-08-09-comprendre-et-personnaliser-son-environnement-docker.md @@ -28,7 +28,7 @@ Vous découvrirez au cours des lignes qui suivent comment créer ses propres ima ## L'écosystème Docker -![ecosystem]({{ site.baseurl }}/assets/2023-07-25-comprendre-et-personnaliser-ses-docker/ecosystem.png) +![ecosystem]({BASE_URL}/imgs/articles/2023-07-25-comprendre-et-personnaliser-ses-docker/ecosystem.png) ### Une Image @@ -158,11 +158,11 @@ Cela nous donne la possibilité d'avoir une application avec un service pour la Nous allons d'abord sélectionner notre [version de docker](https://docs.docker.com/compose/compose-file/compose-versioning/) et l'inscrire dans notre docker compose, le Compose file format. -![docker -v]({{ site.baseurl }}/assets/2023-07-25-comprendre-et-personnaliser-ses-docker/docker-v.png) +![docker -v]({BASE_URL}/imgs/articles/2023-07-25-comprendre-et-personnaliser-ses-docker/docker-v.png) Dans mon cas, la version 20.10.24 de Docker correspond à la version 3.8 du fichier. -![docker compose -v]({{ site.baseurl }}/assets/2023-07-25-comprendre-et-personnaliser-ses-docker/docker-compose-v.png) +![docker compose -v]({BASE_URL}/imgs/articles/2023-07-25-comprendre-et-personnaliser-ses-docker/docker-compose-v.png) Nous pouvons ensuite commencer la création de nos services. diff --git a/_articles/fr/2023-10-23-event-driven-architecture.md b/_articles/fr/2023-10-23-event-driven-architecture.md index 7a0fbe564..b00e73af9 100644 --- a/_articles/fr/2023-10-23-event-driven-architecture.md +++ b/_articles/fr/2023-10-23-event-driven-architecture.md @@ -67,7 +67,7 @@ Le service _Catalog_ réduit le stock disponible pour les produits concernés. Reprenons ensemble le fonctionnement du modèle AMQP 0-9-1 (vous pouvez trouver la documentation [ici](https://www.rabbitmq.com/tutorials/amqp-concepts.html)) : -![]({{ site.baseurl }}/assets/2023-10-23-edd/event-driven-architecture-rabbitmq.png) +![]({BASE_URL}/imgs/articles/2023-10-23-edd/event-driven-architecture-rabbitmq.png) Les messages sont publiés sur des _exchanges_, voyez ça comme une boîte aux lettres. Les exchanges distribuent ensuite des copies des messages aux _queues_ à l'aide des _bindings_. diff --git a/_articles/fr/2023-10-26-how-to-git-gud.md b/_articles/fr/2023-10-26-how-to-git-gud.md index 5e4328863..9aa15d290 100644 --- a/_articles/fr/2023-10-26-how-to-git-gud.md +++ b/_articles/fr/2023-10-26-how-to-git-gud.md @@ -13,7 +13,7 @@ keywords: authors: - mchardenal --- -![gitgud]({{ site.baseurl }}/assets/2023-10-26-how-to-git-gud/gitgud.png?width=300) +![gitgud]({BASE_URL}/imgs/articles/2023-10-26-how-to-git-gud/gitgud.png?width=300) Dans cet article je vous partage la liste des commandes Git selon moi indispensables pour améliorer votre workflow ! Les commandes que vous allez découvrir m'ont simplifié la vie quelques années, pendant que je travaillais sur le projet d'un client du [Studio Eleven Labs](https://eleven-labs.com/conception-d-application). Bonne lecture ! diff --git a/_articles/fr/2023-10-30-pourquoi-creer-design-system.md b/_articles/fr/2023-10-30-pourquoi-creer-design-system.md index d0feda298..dedbd0d44 100644 --- a/_articles/fr/2023-10-30-pourquoi-creer-design-system.md +++ b/_articles/fr/2023-10-30-pourquoi-creer-design-system.md @@ -72,19 +72,19 @@ Pour illustrer la diversité des choix réalisés dans le contexte français, vo - **[Système de Design de l'État (Gouvernement Français)](https://www.systeme-de-design.gouv.fr/)** -![Design System Etat Français]({{ site.baseurl }}/assets/2023-10-30-pourquoi-creer-design-system/design-system-etat-francais.png) +![Design System Etat Français]({BASE_URL}/imgs/articles/2023-10-30-pourquoi-creer-design-system/design-system-etat-francais.png) Ce Design System gouvernemental garantit une cohérence visuelle à travers les différents services et sites web de l'administration française. - **[Vitamin (Decathlon)](https://www.decathlon.design/)** -![Design System Decathlon]({{ site.baseurl }}/assets/2023-10-30-pourquoi-creer-design-system/design-system-decathlon.png) +![Design System Decathlon]({BASE_URL}/imgs/articles/2023-10-30-pourquoi-creer-design-system/design-system-decathlon.png) Decathlon a développé son propre Design System, Vitamin, pour maintenir l'uniformité de l'expérience utilisateur dans ses produits sportifs diversifiés. - **[Welcome UI (Welcome to the Jungle)](https://www.welcome-ui.com/)** -![Design System Welcome to the Jungle]({{ site.baseurl }}/assets/2023-10-30-pourquoi-creer-design-system/design-system-welcome-to-the-jungle.png) +![Design System Welcome to the Jungle]({BASE_URL}/imgs/articles/2023-10-30-pourquoi-creer-design-system/design-system-welcome-to-the-jungle.png) Welcome to the Jungle, une plateforme d'emploi, a créé Welcome UI pour assurer une interface utilisateur cohérente et conviviale. diff --git a/src/helpers/markdownHelper.test.ts b/src/helpers/markdownHelper.test.ts index 71fa1456d..249506fb0 100644 --- a/src/helpers/markdownHelper.test.ts +++ b/src/helpers/markdownHelper.test.ts @@ -475,7 +475,7 @@ describe('validateMarkdownContent', () => { expect(() => validateMarkdownContent({ markdownFilePath, - content: 'This is a test post content with an asset reference {{ site.baseurl }}/assets/test.png', + content: 'This is a test post content with an asset reference {BASE_URL}/imgs/articles/test.png', }) ).toThrow(`The markdown of the file "${markdownFilePath}" is invalid ! The file does not exist "${assetPath}"!`); expect(existsSyncSpy).toHaveBeenCalledWith(assetPath); @@ -483,7 +483,7 @@ describe('validateMarkdownContent', () => { it('should generate an error when an img tag is used', () => { const markdownFilePath = '/path/to/some/file.md'; - const contentInvalid = `title image`; + const contentInvalid = `title image`; expect(() => validateMarkdownContent({ diff --git a/src/helpers/markdownHelper.ts b/src/helpers/markdownHelper.ts index 34273c4d9..bc85e1c81 100644 --- a/src/helpers/markdownHelper.ts +++ b/src/helpers/markdownHelper.ts @@ -98,12 +98,11 @@ export const validateMarkdownContent = (options: { markdownFilePath: string; con } } - const assetMatches = options.content.match(/{{ site.baseurl }}[^)"'\s]+/g); + const assetRegex = new RegExp('{BASE_URL}\\/imgs\\/[^.]+\\.(jpg|jpeg|png|webp|svg)', 'g'); + const assetMatches = options.content.match(assetRegex); if (assetMatches) { for (const assetMatch of assetMatches) { - const assetPath = assetMatch - .replace(/{{\s*?site.baseurl\s*?}}\/assets/g, `${ASSETS_DIR}/articles`) - .split('?')?.[0]; + const assetPath = assetMatch.replace(new RegExp('{BASE_URL}\\/imgs/'), `${ASSETS_DIR}/`).split('?')?.[0]; if (!existsSync(assetPath)) { throw new MarkdownInvalidError({ diff --git a/src/helpers/markdownToHtmlHelper.tsx b/src/helpers/markdownToHtmlHelper.tsx index 336308da9..246f810de 100644 --- a/src/helpers/markdownToHtmlHelper.tsx +++ b/src/helpers/markdownToHtmlHelper.tsx @@ -69,9 +69,7 @@ const getReminderVariantByAdmonitionVariant = (admonitionVariant: string): Remin }; const cleanMarkdown = (markdownContent: string): string => - markdownContent - .replace(/{{\s*?site.baseurl\s*?}}\/assets\//g, `${process.env.BASE_URL || '/'}imgs/articles/`) - .replaceAll('/_assets/articles/', `${process.env.BASE_URL || '/'}imgs/articles/`); + markdownContent.replace(/\{BASE_URL}\//g, `${process.env.BASE_URL || '/'}`); export const markdownToHtml = function >( markdownContent: string