First part july 2018 (#148)

* Update unit-testing-vue-components.md (vuejs#1623)

* Fixed a typo (vuejs#1625)

Removed an extra 's' to fix a grammatical mistake

* fix a typo (vuejs#1627)

* Update v-for list example (vuejs#1628)

* Add presentation role to style-only li item

* fix: code snippet language (close vuejs#1617) (vuejs#1626)

* Update todo-list-example for a11y (vuejs#1630)

* Update todo-list-example for a11y

* Implement review suggestions

 * Use explicit label instead of aria-label
 * Move v-model directive to top for improved readability

* change NODE_ENV to follow recommendations from webpack (vuejs#1622)

* change NODE_ENV to follow recommendations from weback

* Update deployment.md

* note that modes are not available in transition groups, fixes vuejs#1619

* add examples for  in API doc

* add comparison note about react-like libraries

* Update components.md (vuejs#1632)

* Update components.md

* Update components.md

* improve flow of single root component section

* cookbook entry for storage (vuejs#1550)

* cookbook entry for storage

* minor tweak

* updates to article

* updates to article

* maybe the last tweak

* the honest to god really last mod

* Update index.md (vuejs#1634)

* docs(guide/comparison): correct size stat of Angular CLI project (vuejs#1638)

* Update client-side-storage.md (vuejs#1640)

* Update creating-custom-scroll-directives.md (vuejs#1639)

* chore: update ad code

* remove unnecessary word 'know' (vuejs#1641)

* Updated broken links for the Vue Test Utils documentation. (vuejs#1643)

* Reorganize component props to introduce prop types earlier, fixes vuejs#1644 (vuejs#1646)

@BlitZz96 brought up a good point in [this issue](vuejs#1644) about users lacking the necessary background knowledge to fully understand Passing Static and Dynamic Props, at least as it relates to booleans and potentially other types in the future. To fix this, I added a new Prop Types section right before it.

* First stab at SFC to npm documentation (vuejs#1558)

* First stab at SFC to npm documentation

* Clean up sample code, clarify .vue usage with SSR builds

* Run build tasks in parallel, fix dependency order

* Backtick all instances of .vue, minor edits for clarity

* Fix typo on link

* Update url to vue-sfc-rollup utility in acknowledgements

* Fix order, other edits suggested by @sdras

* Additional explanation about sfc-to-npm recipe package.json

* Rename packaing-sfc-for-npm.md to packaging-sfc-for-npm.md (vuejs#1652)

* Update link in comparison guide (vuejs#1653)

The phrase "These state management patterns and even Redux itself can be easily integrated into Vue applications" has a link to a deprecated project. 

Instead I link to a yarnpkg.com search I saw used in https://vuejs.org/v2/guide/state-management.html, which links all "redux vue" projects (so it's always up to date)

* chore: update vue version

* Fix link to docs on custom inputs (vuejs#1660)

The old link redirected me to https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components which was unexpected. I think the correct link is https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components as per this change.

* correct wrong link (vuejs#1661)

* Update events.md

correct wrong link

* Update events.md

correct wrong link

* Feature/vuemeetups (vuejs#1665)

* feature: Add link to VueMeetups

* feature: Add section on becoming a community leader

* minor tweaks to meetup section

* Added details about Lifecycle Hooks (vuejs#1664)

* Added details about Lifecycle Hooks

Mostly a clarification for beginners without prior knowledge about what Lifecycle hooks are. Makes it easier to understand when perhaps only knowing that the developer has a `mounted()` hook. 

I left out the function syntax because of generality. Add if it makes more sense to add. I am not fully knowledgable in Vue yet.

* add (de)activated to lifecycle hooks list in style guide

* improve comparisons react scaling down section

* add text versions of image code examples

* remove extra comma in components

* TypeScript project generation in @vue/cli 3.0 (vuejs#1668)

* TypeScript project generation in @vue/cli 3.0

update information about generating TypeScript project using new @vue/cli 3.0

* tweaks to Vue CLI 3 TypeScript support docs

* chore: update sponsors

* chore: update sponsors

* update CLI docs link

* add Scrimba links for preview

* Fix example indentation in the Unit Testing Vue Components recipe (vuejs#1683)

* Update debugging-in-vscode.md (vuejs#1662)

* Added link to vuemeetups.org to the ecosystem drop-down menu on website. (vuejs#1685)

* Correct mistake of Migration from Vue 1.x (vuejs#1686)

* Fix code style in Form Validation recipe (vuejs#1682)

* Fix code style in Form Validation recipe

* More style code slight improvement in Form Validation recipe

* Fix code style in Client-Side Storage recipe (vuejs#1690)

* [Doc EN]: `typescript.md` (vuejs#1679)

* New in with + symbol

Signed-off-by: Bruno Lesieur <[email protected]>

* Review of 2.5.0 doc

Signed-off-by: Bruno Lesieur <[email protected]>

* Review

Signed-off-by: Bruno Lesieur <[email protected]>

* Fix syntax typo

Signed-off-by: Bruno Lesieur <[email protected]>

* Add space between new line of documentation

Signed-off-by: MachinisteWeb <[email protected]>

* Add @posva review

Signed-off-by: MachinisteWeb <[email protected]>

* Add french str

Signed-off-by: MachinisteWeb <[email protected]>

* Change directeur to director

Signed-off-by: MachinisteWeb <[email protected]>

* Fix EN doc

Signed-off-by: MachinisteWeb <[email protected]>

* Subtitle for typescript.md

Signed-off-by: MachinisteWeb <[email protected]>

* Revert instance.md

Signed-off-by: MachinisteWeb <[email protected]>

* [cookbook] Dockerize Vue.js App (vuejs#1483)

* First draft with 'Simple Example' section

* Fix typo on Docker 'build' command

* Fix copy of multiple files

* Remove unnecessary whitespace

* Fix typo in webpack template link

* First draft of 'Real-World Example'

* Update 'Real-World Example' with multi-stage build

* Add 'Why Dockerize a Vue.js App?' section

* Rename 'Why Dockerize a Vue.js App?' as 'Additinal Context'

* Add 'Alternative Patterns' section

* Minor fix on 'Alternative Patterns'

* Fixed typo

* Update order to avoid collision with other cookbooks

* Clarify why NGINX in real-world example

* Update debugging-in-vscode.md (vuejs#1663)

* remove outdated information about polymer from comparison

* update React comparison status

* chore: adjust sponsor placement

* chore: sponsor meta

* adjust sponsor naming on pages

* Add alt text to images to help with screen reader accessibility (vuejs#1676)

* chore: update sponsors

* chore: add tidelift

Author: MachinisteWeb

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/[email protected]
+    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