First part july 2018

src/v2/cookbook/client-side-storage.md

@@ -6,9 +6,9 @@ order: 11
 
 ## Base Example
 
-<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Client-side storage is an excellent way to quickly add performance gains to an application. By storing data on the browser itself, you can skip fetching information from the server every time the user needs it. While especially useful when offline, even online users will benefit from using data locally versus a remote server. Client-side storage can be done with [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) (technically "Web Storage"), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), and [WebSQL](https://www.w3.org/TR/webdatabase/) (a deprecated method that should not be used in new projects).</p>
+<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Client-side storage is an excellent way to quickly add performance gains to an application. By storing data on the browser itself, you can skip fetching information from the server every time the user needs it. While especially useful when offline, even online users will benefit from using data locally versus a remote server. Client-side storage can be done with [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) (technically "Web Storage"), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), and [WebSQL](https://www.w3.org/TR/webdatabase/) (a deprecated method that should not be used in new projects). </p>
 
-In this cookbook entry we'll focus on Local Storage, the simplest of the storage mechanisms. Local Storage uses a key/value system for storing data. It is limited to storing only simple values but complex data can be stored if you are willing to encode and decode the values with JSON. In general, Local Storage is appropriate for smaller sets of data you would want to persist, things like user preferences or form data. Larger data with more complex storage needs would be better stored typically in IndexedDB.
+In this cookbook entry we'll focus on Local Storage, the simplest of the storage mechanisms. Local Storage uses a key/value system for storing data. It is limited to storing only simple values but complex data can be stored if you are willing to encode and decode the values with JSON. In general, Local Storage is appropriate for smaller sets of data you would want to persist, things like user preferences or form data. Larger data with more complex storage needs would be better stored typically in IndexedDB. 
 
 Let's begin with a simple form based example:
 
@@ -39,7 +39,7 @@ const app = new Vue({
 });
 ```
 
-Focus on the `mounted` and `watch` parts. We use `mounted` to handle loading the value from localStorage. To handle writing the data base, we watch the `name` value and on change, immediately write it.
+Focus on the `mounted` and `watch` parts. We use `mounted` to handle loading the value from localStorage. To handle writing the data base, we watch the `name` value and on change, immediately write it. 
 
 You can run this yourself here:
 
@@ -115,12 +115,12 @@ As mentioned above, Local Storage only works with simple values. To store more c
     <span class="cat">{{ cat }}</span> <button @click="removeCat(n)">Remove</button>
     </p>
   </div>
-
+  
   <p>
-    <input v-model="newCat">
+    <input v-model="newCat"> 
     <button @click="addCat">Add Cat</button>
   </p>
-
+  
 </div>
 ```
 
@@ -134,7 +134,7 @@ const app = new Vue({
     newCat: null
   },
   mounted() {
-
+    
     if (localStorage.getItem('cats')) {
       try {
         this.cats = JSON.parse(localStorage.getItem('cats'));
@@ -149,7 +149,7 @@ const app = new Vue({
       if (!this.newCat) {
         return;
       }
-
+      
       this.cats.push(this.newCat);
       this.newCat = '';
       this.saveCats();

src/v2/cookbook/dockerize-vuejs-app.md

@@ -6,7 +6,7 @@ order: 13
 
 ## Simple Example
 
-<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p>So you built your first Vue.js app using the amazing [Vue.js webpack template](https://github.com/vuejs-templates/webpack) and now you really want to show off with your colleagues by demonstrating that you can also run it in a Docker container.</p>
+<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>So you built your first Vue.js app using the amazing [Vue.js webpack template](https://github.com/vuejs-templates/webpack) and now you really want to show off with your colleagues by demonstrating that you can also run it in a Docker container.</p>
 
 Let's start by creating a `Dockerfile` in the root folder of our project:
 

src/v2/cookbook/unit-testing-vue-components.md

@@ -82,7 +82,7 @@ Dans les équipes où les développeurs sont nombreux, les tests automatiques pe
 
 #### Pour commencer
 
-Le package officiel pour tester les composants Vue est [Vue Test Utils](https://github.com/vuejs/vue-test-utils). Le template `webpack` pour [vue-cli](https://github.com/vuejs/vue-cli) contient soit Karma soit Jest. Ces deux test runners sont très bien supportés par Vue.js. On peut trouver quelques [guides](https://vue-test-utils.vuejs.org/fr/guides/) dans la documentation de Vue Test Utils.
+Le package officiel pour tester les composants Vue est [Vue Test Utils](https://github.com/vuejs/vue-test-utils). Le template `webpack` pour [vue-cli](https://github.com/vuejs/vue-cli) contient soit Karma soit Jest. Ces deux test runners sont très bien supportés par Vue.js. On peut trouver quelques [guides](https://vue-test-utils.vuejs.org/guides/) dans la documentation de Vue Test Utils.
 
 ## Exemple concret
 
@@ -224,7 +224,7 @@ describe("Foo", () => {
 
 À noter :
 
-Au début du code, on déclare la fonction `factory` qui prend l'objet `values` et en construit le `data` pour renvoyer une nouvelle instance de `wrapper`. Du coup, plus besoin de dupliquer `const wrapper = shallowMount(Foo)` dans chaque test. Un autre avantage important : quand des composants plus complexes vont devoir être testés, le `mock` ou le `stub` d'une méthode ou d'une propriété calculée pourront facilement être mutualisés une fois.
+Au début du code, on déclare la fonction `factory` qui prend l'objet `values` et en construit le `data` pour renvoyer une nouvelle instance de `wrapper`. Du coup, plus besoin de dupliquer `const wrapper = shallowMount(Foo)` dans chaque test. Un autre avantage important : quand des composants plus complexes vont devoir être testés, le `mock` ou le `stub` d'une méthode ou d'une propriété calculée pourront facilement être mutualisés une seule fois.
 
 ## Pour aller plus loin
 

src/v2/guide/comparison.md

@@ -134,6 +134,10 @@ MobX est devenu populaire dans la communauté React et utilise actuellement un s
 
 Les bibliothèques de type React essayent généralement de partager le plus possible leur API et leur écosystème avec React. Pour cette raison, la grande majorité des comparaisons ci-dessus leur seront également applicables. La principale différence sera généralement un écosystème réduit, souvent de manière significative, par rapport à React. Étant donné que ces bibliothèques ne peuvent pas être 100% compatibles dans l'écosystème React, certaines bibliothèques d'outils et de compagnons ne peuvent pas être utilisables. Ou, même s'ils semblent fonctionner, ils peuvent se bloquer à tout moment à moins que votre bibliothèque spécifique de type React ne soit officiellement supportée par React.
 
+### Preact and Other React-Like Libraries
+
+React-like libraries usually try to share as much of their API and ecosystem with React as is feasible. For that reason, the vast majority of comparisons above will also apply to them. The main difference will typically be a reduced ecosystem, often significantly, compared to React. Since these libraries cannot be 100% compatible with everything in the React ecosystem, some tooling and companion libraries may not be usable. Or, even if they appear to work, they could break at any time unless your specific React-like library is officially supported on par with React.
+
 ## AngularJS (Angular 1)
 
 Une partie de la syntaxe de Vue ressemblera très fortement à celle de AngularJS (ex : `v-if` vs `ng-if`). Cela est dû au fait qu'il y a beaucoup de choses pour lesquelles AngularJS a vu juste et que cela a été une source d'inspiration pour Vue très tôt dans son développement. Cependant, AngularJS vient également avec de nombreux soucis. C'est là que Vue a tenté d'apporter une amélioration significative.

themes/vue/_config.yml

@@ -6,64 +6,95 @@ vue_version: 2.5.16
 special_sponsors:
   - url: https://stdlib.com
     img: stdlib.png
-  - url: https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue
-    img: bit.png
-    wide_img: bit-wide.png
-    big_width: 120px
-    big_height: 120px
 
 platinum_sponsors:
+  - url: https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue
+    img: bit-wide.png
+    alt_img: bit.png
   - url: http://tooltwist.com/
     img: tooltwist.png
+    name: tooltwist
   - url: https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1
     img: vueschool.png
+    name: vue school
   - url: https://vehikl.com/
     img: vehikl.png
+    name: vehikl
 
 gold_sponsors:
+  - url: https://www.vuemastery.com/
+    img: vuemastery.png
+    name: vue mastery
   - url: https://laravel.com
     img: laravel.png
+    name: laravel
   - url: https://htmlburger.com
     img: htmlburger.png
+    name: html burger
   - url: https://chaitin.cn/en/
     img: chaitin.png
+    name: chaitin
   - url: https://www.frontenddeveloperlove.com/
     img: frontend-love.png
+    name: frontend love
   - url: https://onsen.io/vue/
     img: onsen-ui.png
+    name: onsen ui
   - url: https://vuetifyjs.com
     img: vuetify.png
+    name: vuetify
   - url: https://neds.com.au/
     img: neds.png
+    name: neds
   - url: https://hackr.io/tutorials/learn-vue-js
     img: hackr-io.png
+    name: hacker io
   - url: https://icons8.com/
     img: icons8.png
+    name: icons 8
   - url: https://vuejobs.com/?ref=vuejs
     img: vuejobs.png
+    name: vue jobs
   - url: https://codepilot.ai
     img: codepilot.png
+    name: code pilot
   - url: https://teamextension.io/
     img: teamextension.png
+    name: team extension
   - url: http://aaha.co/
     img: aaha.png
+    name: aaha
   - url: https://www.valuecoders.com
     img: valuecoders.png
+    name: value coders dot org
   - url: https://www.nsoft.com/careers/
     img: nsoft.png
-  - url: https://www.vuemastery.com/
-    img: vuemastery.png
+    name: n soft
+  - url: https://coreui.io/?utm_source=vuejs&utm_medium=logo&utm_campaign=homepage
+    img: coreui.png
+    name: core ui
+  - url: https://piio.co/vuejs?ref=vuejs
+    img: piio.png
+    name: piio
+  - url: https://tidelift.com/subscription/npm/vue
+    img: tidelift.png
+    name: tidelift
 
 silver_sponsors:
   - url: https://dopamine.bg/
     img: dopamine.png
+    name: dopamine
 
 bronze_sponsors:
   - url: http://tighten.co/
     img: http://i.imgur.com/T7fQYLT.png
+    name: tighten co
   - url: https://alligator.io
     img: https://alligator.io/images/alligator-logo.svg
+    name: alligator dot io
   - url: https://www.accelebrate.com/
     img: https://www.accelebrate.com/assets/images/accelebrate_logo@2x.png
+    name: accelebrate
   - url: https://pullstring.com
     img: https://i.imgur.com/hQHW6TB.png
+    name: pull string

themes/vue/layout/index.ejs

@@ -9,7 +9,7 @@
 <div id="hero">
   <div class="inner">
     <div class="left">
-      <img class="hero-logo" src="<%- url_for("/images/logo.png") %>">
+      <img class="hero-logo" src="<%- url_for("/images/logo.png") %>" alt="vue logo">
     </div><div class="right">
       <h2 class="vue">Vue.js</h2>
       <h1>
@@ -30,16 +30,11 @@
 
 <div id="special-sponsor">
   <h3>Sponsors spéciaux</h3>
-  <br>
   <a href="https://stdlib.com/" target="_blank">
-    <img src="/images/stdlib.png" style="width:140px">
+    <img src="/images/stdlib.png" style="width:160px" alt="Logo standard de la Bibliothèque">
+    <br>
     <span>Fonction en tant que plateforme de service et bibliothèque</span>
   </a>
-  <br>
-  <a href="https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue" target="_blank">
-    <img src="/images/bit.png" style="width:60px;height:60px">
-    <span>La manière la plus rapide de partager du code</span>
-  </a>
 </div>
 
 <div id="highlights">

themes/vue/layout/partials/header.ejs

@@ -1,6 +1,6 @@
 <div id="header">
   <a id="logo" href="<%- url_for("/") %>">
-    <img src="<%- url_for("/images/logo.png") %>">
+    <img src="<%- url_for("/images/logo.png") %>" alt="vue logo">
     <span>Vue.js</span>
   </a>
   <ul id="nav">

themes/vue/layout/partials/sponsors.ejs

@@ -2,14 +2,14 @@
 
 <%_ for (const sponsor of theme.platinum_sponsors) {_%>
 <a href="<%- sponsor.url %>" target="_blank" style="width: 160px;">
-  <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 160px;">
+  <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 160px;" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
 <br>
 <br>
 <%_ for (const sponsor of theme.gold_sponsors) {_%>
 <a href="<%- sponsor.url %>" target="_blank" style="width: 120px;">
-  <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 120px;">
+  <img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width: 120px;" alt="<%-sponsor.name-%>">
 </a>
 <%_ } _%>
 <br>
@@ -19,13 +19,13 @@
 <div class="open-collective-sponsors">
   <h3>Sponsors OpenCollective</h3>
   <h4>Platinum</h4>
-  <%_ for (let i = 0; i < 3; i++) {_%>
+  <%_ for (let i = 0; i < 2; i++) {_%>
   <a href="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/website" target="_blank">
     <img src="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/avatar.svg">
   </a>
   <%_ } _%>
   <h4>Or</h4>
-  <%_ for (let i = 0; i < 10; i++) {_%>
+  <%_ for (let i = 0; i < 8; i++) {_%>
   <a href="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/website" target="_blank">
     <img src="https://opencollective.com/vuejs/tiers/gold-sponsors/<%- i %>/avatar.svg">
   </a>

themes/vue/layout/partials/sponsors_sidebar.ejs

@@ -1,10 +1,10 @@
 <div id="sidebar-sponsors-special">
   <div class="main-sponsor">
-    <span>Special Sponsors</span>
+    <span>Special Sponsor</span>
     <div>
     <%_ for (const sponsor of theme.special_sponsors) {_%>
     <a href="<%- sponsor.url %>" target="_blank" class="logo">
-      <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>">
+      <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>" alt="<%-sponsor.name-%>">
     </a>
     <%_ } _%>
     </div>
@@ -13,11 +13,11 @@
 
 <div id="sidebar-sponsors-platinum">
   <div class="main-sponsor">
-    <span>Patreon Sponsors</span>
+    <span>Platinum Sponsors</span>
     <div>
     <%_ for (const sponsor of theme.platinum_sponsors) {_%>
     <a href="<%- sponsor.url %>" target="_blank" class="logo">
-      <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>">
+      <img src="<%- url_for(`/images/${sponsor.wide_img || sponsor.img}`) %>" alt="<%-sponsor.name-%>">
     </a>
     <%_ } _%>
     </div>

themes/vue/source/css/index.styl

@@ -79,12 +79,11 @@ body
     margin 0
   a
     color $light
-    margin 8px 0
   a, span, img
     display: inline-block
     vertical-align: middle
   img
-    margin: 0 15px
+    margin: 15px
 
 #highlights
   background-color: #fff