From ff6d9309a4bac5f62e62f7562766dcf8ad89922c Mon Sep 17 00:00:00 2001 From: "Vue.js Developers" Date: Mon, 22 May 2017 09:41:29 +0700 Subject: [PATCH 01/26] Create index.md --- vue.js/wtf-is-vuex/index.md | 116 ++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 vue.js/wtf-is-vuex/index.md diff --git a/vue.js/wtf-is-vuex/index.md b/vue.js/wtf-is-vuex/index.md new file mode 100644 index 0000000..37ad2e7 --- /dev/null +++ b/vue.js/wtf-is-vuex/index.md @@ -0,0 +1,116 @@ +Vuex. Is it pronounced “vewks”, or “veweks”? Or maybe it’s meant to be “vew”, pronounced with a French-style silent “x”? + +My trouble with understanding Vuex only began with the name. + +Being an eager Vue developer I’d heard enough about Vuex to suspect that it must be an important part of the Vue ecosystem, even if I didn’t know what it actually was. + +I eventually had enough of wondering, so I went to the documentation with plans of a brief skim through; just enough to get the idea. + +To my chagrin I was greeted with unfamiliar terms like “state management pattern”, “global singleton” and “source of truth”. These terms may make sense to anyone already familiar with the concept, but for me they didn’t gel at all. + +The one thing I did get, though, was that Vuex had something to do with Flux and Redux. I didn’t know what those were either, but I figured it may help if I investigated them first. + +After a bit of research and persistence the concepts behind the jargon finally started to materialise in my mind. I was getting it. I went back to the Vuex documentation and it finally hit me…Vuex is freaking awesome! + +I’m still not quite sure how to pronounce it, but Vuex has become an essential piece in my Vue.js toolbelt. I think it’s totally worth your time to check it out too, so I’ve written this primer on Vuex to give you the background that I wish I’d had. + +## Understanding The Problem That Vuex Solves + +To understand Vuex it’s much easier if you first understand the problem that it’s designed to solve. + +Imagine you’ve developed a multi-user chat app. The interface has a user list, private chat windows, an inbox with chat history and a notification bar to inform users of unread messages from other users they aren’t currently viewing. + +Millions of users are chatting to millions of other users through your app on a daily basis. However there are complaints about an annoying problem: the notification bar will occasionally give false notifications. A user will be notified of a new unread message, but when they check to see what it is it’s just a message they’ve already seen. + +What I’ve described is a real scenario that the Facebook developers had with their chat system a few years back. The process of solving this inspired their developers to create an application architecture they named “Flux”. Flux forms the basis of Vuex, Redux and other similar libraries. + +## Flux + +Facebook developers struggled with the “zombie notification” bug for some time. They eventually realised that its persistent nature was more than a simple bug; it pointed to some underlying flaw in the architecture of the app. + +The flaw is most easily understood in the abstract: when you have multiple components in an application that share data, the complexity of their interconnections will increase to a point where the state of the data is no longer predictable or understandable. Consequentially the app becomes impossible to extend or maintain. + +The idea of Flux was to create a set of guiding principles that describe a scalable front end architecture that sufficiently mitigates this flaw. Not just for a chat app, but in any complex UI app with components and shared data state. + +Flux is a pattern, not a library. + +You can’t go to Github and download Flux. It’s a design pattern like MVC. Libraries like Vuex and Redux implement the Flux pattern the same way that other frameworks implement the MVC pattern. + +In fact Vuex doesn’t implement all of Flux, just a subset. Don’t worry about that just now though, let’s instead focus on understanding the key principles that it does observe. + +## Principle #1: Single Source of Truth + +Components may have local data that only they need to know about. For example, the position of the scroll bar in the user list component is probably of no interest to other components. + +But any data that is to be shared between components, i.e. application data, needs to be kept in a single place, separate from the components that use it. +This single location is called the “store”. Components must read application data from this location and not keep their own copy to prevent conflict or disagreement. + +```js +// Instantiate our Vuex store +const store = new Vuex.Store({ + + // "State" is the application data your components + // will subscribe to + + state: { + myValue: 0 + } +}); +// Components access state from their computed properties +const MyComponent = { + template: `
{{ myValue }}
`, + computed: { + myValue () { + return store.state.myValue; + } + } +}; +``` + +## Principle #2: Data is Read-Only + +Components can freely read data from the store. But they cannot change data in the store, at least not directly. + +Instead they must inform the store of their intent to change the data and the store will be responsible for making those changes via a set of defined functions called “mutations”. + +Why this approach? If we centralise the data-altering logic than we don’t have to look far if there are inconsistencies in the state. We’re minimising the possibility that some random component (possibly in a third party module) has changed the data in an unexpected fashion. + +```js +const store = new Vuex.Store({ + state: { + myValue: 0 + }, + mutations: { + increment (state, value) { + state.myValue += value; + } + } +}); +// Need to update a value? +// Wrong! Don't directly change a store value. +store.myValue += 10; +// Right! Call the appropriate mutation. +store.commit('increment', 10); +``` + +## Principle #3: Mutations Are Synchronous + +It’s much easier to debug data inconsistencies in an app that implements the above two principles in it’s architecture. You could log commits and observe how the state changes in response (which you can indeed do when using Vuex with Vue Devtools). + +But this ability would be undermined if our mutations were applied asynchronously. We’d know the order our commits came in, but we would not know the order in which our components committed them. + +Synchronous mutations ensure state is not dependent on the sequence and timing of unpredictable events. + +## Finally: What is Vuex? + +With all that background out of the we are finally able to address this question. +Vuex is a library that helps you implement the Flux architecture in your Vue app. By enforcing the principles described above, Vuex keeps your application data in a transparent and predictable state even when that data is being shared across multiple components. + +Its implementation includes a store, custom mutators and it will reactively update any components that are reading data from the store. + +It also allows for cool development features like hot module reloading (updating modules in a running application) and time travel debugging (stepping back though mutations to trace bugs). + +Sound cool. I have some questions… + +Maybe you’re wondering now whether or not your app needs Vuex, how it integrates with vue-devtools or how you can commit data from asynchronous functions. +My goal in this article was just to give you a primer on Vuex. I hope you’ll find if you go to the documentation now, you’ll feel well equiped to get these answers yourself. From b5c937e22a286e3f89103ed9712f1e447f983253 Mon Sep 17 00:00:00 2001 From: "Vue.js Developers" Date: Mon, 22 May 2017 09:48:51 +0700 Subject: [PATCH 02/26] Create tutorial.json --- vue.js/wtf-is-vuex/tutorial.json | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 vue.js/wtf-is-vuex/tutorial.json diff --git a/vue.js/wtf-is-vuex/tutorial.json b/vue.js/wtf-is-vuex/tutorial.json new file mode 100644 index 0000000..c13e051 --- /dev/null +++ b/vue.js/wtf-is-vuex/tutorial.json @@ -0,0 +1,18 @@ +{ + "author": { + "name": "Anthony", + "email": "anthony@vuejsdevelopers.com", + "description": "Web developer, author and online course instructor with Vue.js Developers", + "homepage": "http://vuejsdevelopers.com", + "twitter": "https://twitter.com/vuejsdevelopers" + }, + "description": "Vuex is one of the most useful tools in the Vue.js ecosystem, but it can be very confusing at first. I've written this primer on Vuex to give you the background that I wish I'd had.", + "homepage": "http://vuejsdevelopers.com", + "keywords": [ + "vue.js", + "vuex" + ], + "library-tags": ["vue.js", "vuex"], + "name": "WTF is Vuex? A Beginner's Guide To Vue's Application Data Store", + "repository": "https://github.com/vuejsdevelopers" +} From 1193439679990ed98787a8e527490ae9d993e826 Mon Sep 17 00:00:00 2001 From: "Vue.js Developers" Date: Mon, 22 May 2017 10:00:20 +0700 Subject: [PATCH 03/26] Update index.md --- vue.js/wtf-is-vuex/index.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/vue.js/wtf-is-vuex/index.md b/vue.js/wtf-is-vuex/index.md index 37ad2e7..bbc51a0 100644 --- a/vue.js/wtf-is-vuex/index.md +++ b/vue.js/wtf-is-vuex/index.md @@ -14,6 +14,8 @@ After a bit of research and persistence the concepts behind the jargon finally s I’m still not quite sure how to pronounce it, but Vuex has become an essential piece in my Vue.js toolbelt. I think it’s totally worth your time to check it out too, so I’ve written this primer on Vuex to give you the background that I wish I’d had. +Note: This article was originally posted [here on the Vue.js Developers blog](http://vuejsdevelopers.com/2017/05/15/vue-js-what-is-vuex/?jsdojo_id=cjs_wfv) on 2017/05/15. + ## Understanding The Problem That Vuex Solves To understand Vuex it’s much easier if you first understand the problem that it’s designed to solve. @@ -32,7 +34,7 @@ The flaw is most easily understood in the abstract: when you have multiple compo The idea of Flux was to create a set of guiding principles that describe a scalable front end architecture that sufficiently mitigates this flaw. Not just for a chat app, but in any complex UI app with components and shared data state. -Flux is a pattern, not a library. +Flux is a pattern, not a library. You can’t go to Github and download Flux. It’s a design pattern like MVC. Libraries like Vuex and Redux implement the Flux pattern the same way that other frameworks implement the MVC pattern. @@ -113,4 +115,7 @@ It also allows for cool development features like hot module reloading (updating Sound cool. I have some questions… Maybe you’re wondering now whether or not your app needs Vuex, how it integrates with vue-devtools or how you can commit data from asynchronous functions. + My goal in this article was just to give you a primer on Vuex. I hope you’ll find if you go to the documentation now, you’ll feel well equiped to get these answers yourself. + +*Get the latest Vue.js articles, tutorials and cool projects in your inbox with the [Vue.js Developers Newsletter](http://vuejsdevelopers.com/newsletter/?jsdojo_id=cjs_wfv).* From 4fdf83f6521c71bdffb9d10375aef0c664da8372 Mon Sep 17 00:00:00 2001 From: Anthony Gore Date: Mon, 29 May 2017 11:18:13 +0700 Subject: [PATCH 04/26] Changing directory to vue --- {vue.js => vue}/wtf-is-vuex/index.md | 0 {vue.js => vue}/wtf-is-vuex/tutorial.json | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename {vue.js => vue}/wtf-is-vuex/index.md (100%) rename {vue.js => vue}/wtf-is-vuex/tutorial.json (100%) diff --git a/vue.js/wtf-is-vuex/index.md b/vue/wtf-is-vuex/index.md similarity index 100% rename from vue.js/wtf-is-vuex/index.md rename to vue/wtf-is-vuex/index.md diff --git a/vue.js/wtf-is-vuex/tutorial.json b/vue/wtf-is-vuex/tutorial.json similarity index 100% rename from vue.js/wtf-is-vuex/tutorial.json rename to vue/wtf-is-vuex/tutorial.json From e8e0606543f428c55f4dce700b173d65d4c60693 Mon Sep 17 00:00:00 2001 From: Gisson Date: Mon, 21 Aug 2017 10:43:56 +0100 Subject: [PATCH 05/26] Fix minor typo. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e17b944..83298cb 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Here's a simple list of questions to help you figure out if you should publish a - Do you want to help other people learn web development? - Did you just learn about something awesome that you think other people would find awesome too? -If you answered yes to any of the above, we want you to write a web developemnt tutorial and publish it on cdnjs! It's super easy! +If you answered yes to any of the above, we want you to write a web development tutorial and publish it on cdnjs! It's super easy! ### Instructions From 08ea2f6ac9578aec87aa4125ea334af089bd5efe Mon Sep 17 00:00:00 2001 From: mrnerd Date: Wed, 30 Aug 2017 21:41:51 +0100 Subject: [PATCH 06/26] new tutorial for react --- react/universal-react-apps/index.md | 117 +++++++++++++++++++++++ react/universal-react-apps/tutorial.json | 19 ++++ 2 files changed, 136 insertions(+) create mode 100644 react/universal-react-apps/index.md create mode 100644 react/universal-react-apps/tutorial.json diff --git a/react/universal-react-apps/index.md b/react/universal-react-apps/index.md new file mode 100644 index 0000000..e74771c --- /dev/null +++ b/react/universal-react-apps/index.md @@ -0,0 +1,117 @@ + +## Introduction + +Next.js is a framework for quickly building universal (also called Isomorphic) server-rendered web apps with +React. In this tutorial i'm going to get you started with Next.js to build an example demo app showing the +essential concepts of server rendered React apps. + +Building apps with Next.js is dead easy, you just create a pages directory and place React components in it. + Next.js will take care of everything else. + +This tutorial was originally published in [techiediaries](https://www.techiediaries.com/universal-react-apps-nextjs/) + +Now lets get started + +First we need to install the required tools: + +## Installing Next.js 2.0 + +You can install Next.js 2.0 via npm with: + + npm install --save next react react-dom + +## Installing Next.js 3.0 + + Next.js 3.0 is still in beta, you can also install it via npm with: + + npm install next@beta react react-dom --save + + +## Adding NPM Scripts to package.json + +Building apps with Next.js is a matter of using three commands: + + next + next build + next start + +So lets add NPM scripts to trigger these commands: + + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + + +## Adding Pages + +To create pages you first need to create a pages directory: + + mkdir pages + +### Adding the Home Page + +Create an index.js file inside pages folder and put this content in it: + + import Link from 'next/link' + export default () => ( +
+ Home - + About Me - + Contact +

+

This is the home page

+ +
+ ) + + +### Adding the About Page + +Next create an about.js file inside pages folder then put the following content: + + import Link from 'next/link' + export default () => ( +
+ Home - + About Me - + Contact +

+

This is about page

+
+ ) + + +### Adding the Contact Page + +Add contact.js file inside pages folder then put the following: + + import Link from 'next/link' + export default () => ( +
+ Home - + About Me - + Contact +

+

This is the contact page

+ +
+ ) + + + +Now you can launch next with: + + npm run dev + +Your app will be available from [http://localhost:3000](http://localhost:3000). + +As you can see the names of files inside pages directory become the routes except for / which points to index.js + +## Conclusion + +Universal apps become very popular in these days and thanks to React and Next.js you can build them in a matter +of a few commands. + +Thanks for reading! diff --git a/react/universal-react-apps/tutorial.json b/react/universal-react-apps/tutorial.json new file mode 100644 index 0000000..04aacdd --- /dev/null +++ b/react/universal-react-apps/tutorial.json @@ -0,0 +1,19 @@ +{ + "author": { + "name": "Ahmed Bouchefra", + "email": "techiediaries9@gmail.com", + "description": "Web developer, technical writer and entrepreneur", + "homepage": "https://www.techiediaries.com", + "twitter": "https://twitter.com/techiediaries" + }, + "description": "This tutorial will cover how to use React and Next.js to build a simple universal web app.", + "homepage": "https://www.techiediaries.com", + "keywords": [ + "react", + "nextjs", + "universal" + ], + "library-tags": ["react", "nextjs"], + "name": "Building Universal Server Rendered Apps with React and Next.js 3.0", + "repository": "https://github.com/techiediaries" +} From f199943b95b5a10ba87d6eb282c33603ffa59a24 Mon Sep 17 00:00:00 2001 From: Peter Dave Hello Date: Wed, 6 Sep 2017 01:31:26 +0800 Subject: [PATCH 07/26] Update Twitter link format --- animate.css/Getting-Started-with-Animate-CSS/tutorial.json | 3 +-- backbone.js/cross-domain-sessions/tutorial.json | 4 ++-- backbone.js/infinite-scrolling/tutorial.json | 2 +- backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json | 2 +- backbone.js/organizing-backbone-using-modules/tutorial.json | 2 +- backbone.js/seo-for-single-page-apps/tutorial.json | 2 +- backbone.js/what-is-a-collection/tutorial.json | 2 +- backbone.js/what-is-a-model/tutorial.json | 2 +- backbone.js/what-is-a-router/tutorial.json | 2 +- backbone.js/what-is-a-view/tutorial.json | 2 +- backbone.js/why-would-you-use-backbone/tutorial.json | 2 +- react/universal-react-apps/tutorial.json | 2 +- redux/react-redux-beginners/tutorial.json | 2 +- 13 files changed, 14 insertions(+), 15 deletions(-) diff --git a/animate.css/Getting-Started-with-Animate-CSS/tutorial.json b/animate.css/Getting-Started-with-Animate-CSS/tutorial.json index 063c33a..bba41cb 100644 --- a/animate.css/Getting-Started-with-Animate-CSS/tutorial.json +++ b/animate.css/Getting-Started-with-Animate-CSS/tutorial.json @@ -3,8 +3,7 @@ "name": "Dog2puppy", "email": "me@dog2puppy-github.tk", "description": "I love open source and all code.", - "homepage": "http://dog2puppy-github.tk/", - "twitter": "https://twitter.com/" + "homepage": "http://dog2puppy-github.tk/" }, "description": "Getting started with animate,css", "homepage": "https://github.com/dog2puppy", diff --git a/backbone.js/cross-domain-sessions/tutorial.json b/backbone.js/cross-domain-sessions/tutorial.json index 824397e..cd403f3 100644 --- a/backbone.js/cross-domain-sessions/tutorial.json +++ b/backbone.js/cross-domain-sessions/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", @@ -19,4 +19,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/cross-domain-sessions" -} \ No newline at end of file +} diff --git a/backbone.js/infinite-scrolling/tutorial.json b/backbone.js/infinite-scrolling/tutorial.json index e59a363..7f494ce 100644 --- a/backbone.js/infinite-scrolling/tutorial.json +++ b/backbone.js/infinite-scrolling/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", diff --git a/backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json b/backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json index 4610731..65f0282 100644 --- a/backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json +++ b/backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", diff --git a/backbone.js/organizing-backbone-using-modules/tutorial.json b/backbone.js/organizing-backbone-using-modules/tutorial.json index 5e353e8..f38643e 100644 --- a/backbone.js/organizing-backbone-using-modules/tutorial.json +++ b/backbone.js/organizing-backbone-using-modules/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", diff --git a/backbone.js/seo-for-single-page-apps/tutorial.json b/backbone.js/seo-for-single-page-apps/tutorial.json index 59cef99..d70d31b 100644 --- a/backbone.js/seo-for-single-page-apps/tutorial.json +++ b/backbone.js/seo-for-single-page-apps/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", diff --git a/backbone.js/what-is-a-collection/tutorial.json b/backbone.js/what-is-a-collection/tutorial.json index f7b5e13..3cbd043 100644 --- a/backbone.js/what-is-a-collection/tutorial.json +++ b/backbone.js/what-is-a-collection/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", diff --git a/backbone.js/what-is-a-model/tutorial.json b/backbone.js/what-is-a-model/tutorial.json index a42c3c2..bf4324a 100644 --- a/backbone.js/what-is-a-model/tutorial.json +++ b/backbone.js/what-is-a-model/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", diff --git a/backbone.js/what-is-a-router/tutorial.json b/backbone.js/what-is-a-router/tutorial.json index 68165e4..f0bcb79 100644 --- a/backbone.js/what-is-a-router/tutorial.json +++ b/backbone.js/what-is-a-router/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", diff --git a/backbone.js/what-is-a-view/tutorial.json b/backbone.js/what-is-a-view/tutorial.json index b5c1027..6a9d0df 100644 --- a/backbone.js/what-is-a-view/tutorial.json +++ b/backbone.js/what-is-a-view/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", diff --git a/backbone.js/why-would-you-use-backbone/tutorial.json b/backbone.js/why-would-you-use-backbone/tutorial.json index 2a71992..31c4d84 100644 --- a/backbone.js/why-would-you-use-backbone/tutorial.json +++ b/backbone.js/why-would-you-use-backbone/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "Why do you need Backbone.js?", "homepage": "https://github.com/thomasdavis", diff --git a/react/universal-react-apps/tutorial.json b/react/universal-react-apps/tutorial.json index 04aacdd..3b844e1 100644 --- a/react/universal-react-apps/tutorial.json +++ b/react/universal-react-apps/tutorial.json @@ -4,7 +4,7 @@ "email": "techiediaries9@gmail.com", "description": "Web developer, technical writer and entrepreneur", "homepage": "https://www.techiediaries.com", - "twitter": "https://twitter.com/techiediaries" + "twitter": "techiediaries" }, "description": "This tutorial will cover how to use React and Next.js to build a simple universal web app.", "homepage": "https://www.techiediaries.com", diff --git a/redux/react-redux-beginners/tutorial.json b/redux/react-redux-beginners/tutorial.json index c51d3cb..23b02e4 100644 --- a/redux/react-redux-beginners/tutorial.json +++ b/redux/react-redux-beginners/tutorial.json @@ -4,7 +4,7 @@ "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work at Listium", "homepage": "http://thomasdav.is/", - "twitter": "https://twitter.com/thomasdav_is" + "twitter": "thomasdav_is" }, "description": "React/Redux beginners tutorial", "homepage": "https://github.com/thomasdavis", From b8837faf564dde562ff0d34f561d43c7eedc9975 Mon Sep 17 00:00:00 2001 From: Peter Dave Hello Date: Wed, 6 Sep 2017 01:41:17 +0800 Subject: [PATCH 08/26] Help @thomasdavis update author info --- backbone.js/cross-domain-sessions/tutorial.json | 5 +++-- backbone.js/infinite-scrolling/tutorial.json | 7 ++++--- backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json | 7 ++++--- .../organizing-backbone-using-modules/tutorial.json | 7 ++++--- backbone.js/seo-for-single-page-apps/tutorial.json | 7 ++++--- backbone.js/what-is-a-collection/tutorial.json | 7 ++++--- backbone.js/what-is-a-model/tutorial.json | 7 ++++--- backbone.js/what-is-a-router/tutorial.json | 7 ++++--- backbone.js/what-is-a-view/tutorial.json | 7 ++++--- backbone.js/why-would-you-use-backbone/tutorial.json | 7 ++++--- redux/react-redux-beginners/tutorial.json | 4 ++-- 11 files changed, 41 insertions(+), 31 deletions(-) diff --git a/backbone.js/cross-domain-sessions/tutorial.json b/backbone.js/cross-domain-sessions/tutorial.json index cd403f3..550d5b7 100644 --- a/backbone.js/cross-domain-sessions/tutorial.json +++ b/backbone.js/cross-domain-sessions/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", diff --git a/backbone.js/infinite-scrolling/tutorial.json b/backbone.js/infinite-scrolling/tutorial.json index 7f494ce..cf09ad2 100644 --- a/backbone.js/infinite-scrolling/tutorial.json +++ b/backbone.js/infinite-scrolling/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", @@ -19,4 +20,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/infinite-scrolling/" -} \ No newline at end of file +} diff --git a/backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json b/backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json index 65f0282..27b9744 100644 --- a/backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json +++ b/backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", @@ -19,4 +20,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/nodejs-restify-mongodb-mongoose" -} \ No newline at end of file +} diff --git a/backbone.js/organizing-backbone-using-modules/tutorial.json b/backbone.js/organizing-backbone-using-modules/tutorial.json index f38643e..81d967d 100644 --- a/backbone.js/organizing-backbone-using-modules/tutorial.json +++ b/backbone.js/organizing-backbone-using-modules/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", @@ -19,4 +20,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/organizing-backbone-using-modules" -} \ No newline at end of file +} diff --git a/backbone.js/seo-for-single-page-apps/tutorial.json b/backbone.js/seo-for-single-page-apps/tutorial.json index d70d31b..28e17e1 100644 --- a/backbone.js/seo-for-single-page-apps/tutorial.json +++ b/backbone.js/seo-for-single-page-apps/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", @@ -19,4 +20,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/seo-for-single-page-apps" -} \ No newline at end of file +} diff --git a/backbone.js/what-is-a-collection/tutorial.json b/backbone.js/what-is-a-collection/tutorial.json index 3cbd043..5206c6b 100644 --- a/backbone.js/what-is-a-collection/tutorial.json +++ b/backbone.js/what-is-a-collection/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", @@ -19,4 +20,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/what-is-a-collection" -} \ No newline at end of file +} diff --git a/backbone.js/what-is-a-model/tutorial.json b/backbone.js/what-is-a-model/tutorial.json index bf4324a..d0d6fd7 100644 --- a/backbone.js/what-is-a-model/tutorial.json +++ b/backbone.js/what-is-a-model/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", @@ -19,4 +20,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/what-is-a-model" -} \ No newline at end of file +} diff --git a/backbone.js/what-is-a-router/tutorial.json b/backbone.js/what-is-a-router/tutorial.json index f0bcb79..62d0ef1 100644 --- a/backbone.js/what-is-a-router/tutorial.json +++ b/backbone.js/what-is-a-router/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", @@ -19,4 +20,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/what-is-a-router" -} \ No newline at end of file +} diff --git a/backbone.js/what-is-a-view/tutorial.json b/backbone.js/what-is-a-view/tutorial.json index 6a9d0df..b6b5523 100644 --- a/backbone.js/what-is-a-view/tutorial.json +++ b/backbone.js/what-is-a-view/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Organizing your application using Modules (require.js)", "homepage": "https://github.com/thomasdavis", @@ -19,4 +20,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/what-is-a-view" -} \ No newline at end of file +} diff --git a/backbone.js/why-would-you-use-backbone/tutorial.json b/backbone.js/why-would-you-use-backbone/tutorial.json index 31c4d84..cfe2cf7 100644 --- a/backbone.js/why-would-you-use-backbone/tutorial.json +++ b/backbone.js/why-would-you-use-backbone/tutorial.json @@ -3,8 +3,9 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work in the drone industry", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "github": "thomasdavis", + "twitter": "ajaxdavis" }, "description": "Why do you need Backbone.js?", "homepage": "https://github.com/thomasdavis", @@ -19,4 +20,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/what-would-you-use-backbone" -} \ No newline at end of file +} diff --git a/redux/react-redux-beginners/tutorial.json b/redux/react-redux-beginners/tutorial.json index 23b02e4..5eb1243 100644 --- a/redux/react-redux-beginners/tutorial.json +++ b/redux/react-redux-beginners/tutorial.json @@ -3,8 +3,8 @@ "name": "Thomas Davis", "email": "thomasalwyndavis@gmail.com", "description": "I work with a few open source projects and also work at Listium", - "homepage": "http://thomasdav.is/", - "twitter": "thomasdav_is" + "homepage": "https://ajaxdavis.com/", + "twitter": "ajaxdavis" }, "description": "React/Redux beginners tutorial", "homepage": "https://github.com/thomasdavis", From 6763ae4eeeb3049e9052044594b0886cc1ed834c Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Wed, 21 Feb 2018 22:55:43 +0900 Subject: [PATCH 09/26] capitalization fixes --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 83298cb..35894ba 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ We want to make a super beautiful and useful tutorial system where anyone can ge ## Tutorial Listings -Tutorials show under each associated library. At the moment we don't have support for generic Javascript tutorials but please leave an issue if you want to write one. +Tutorials show under each associated library. At the moment we don't have support for generic JavaScript tutorials but please leave an issue if you want to write one. ![related tutorials](http://i.imgur.com/mDOePCw.png) @@ -31,5 +31,5 @@ Tutorials show under each associated library. At the moment we don't have suppor * [cdnjs.com](https://cdnjs.com) is visited by hundreds of thousands of web developers every month. * You don't have to worry about setting up an elegant website to display your tutorials. * Authors get full credit and can remove their work at any time. -* Everything is hosted on Github so the community can easily help fix bugs and grammatic mistakes in your tutorials. +* Everything is hosted on GitHub so the community can easily help fix bugs and grammatic mistakes in your tutorials. * Cdnjs is a completely volunteer driven effort where we pay for bills out of our own pockets. Writing tutorials increases our advertising revenue which means we can better improve the project. From 7ab20190885b6a1adfb6d620bbdc9ba465baa862 Mon Sep 17 00:00:00 2001 From: dkkv <36552397+dkkv@users.noreply.github.com> Date: Tue, 20 Mar 2018 03:46:57 -0700 Subject: [PATCH 10/26] Rewrite tutorial of react/universal-react-apps and fix typos (#33) --- react/universal-react-apps/index.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/react/universal-react-apps/index.md b/react/universal-react-apps/index.md index e74771c..ef70c1e 100644 --- a/react/universal-react-apps/index.md +++ b/react/universal-react-apps/index.md @@ -2,15 +2,14 @@ ## Introduction Next.js is a framework for quickly building universal (also called Isomorphic) server-rendered web apps with -React. In this tutorial i'm going to get you started with Next.js to build an example demo app showing the -essential concepts of server rendered React apps. +React. In this tutorial you will learn essential concepts of server-rendered React apps by creating a demo app with Next.js. -Building apps with Next.js is dead easy, you just create a pages directory and place React components in it. +Building apps with Next.js is simple. You just create a pages directory and place React components in it. Next.js will take care of everything else. This tutorial was originally published in [techiediaries](https://www.techiediaries.com/universal-react-apps-nextjs/) -Now lets get started +Now let's get started First we need to install the required tools: From e30423c1c5a9514aba9667166b0636b3dea8d7ef Mon Sep 17 00:00:00 2001 From: Peter Dave Hello Date: Sat, 28 Jul 2018 16:54:41 +0800 Subject: [PATCH 11/26] Improve markdown style/format --- README.md | 14 +-- .../Getting-Started-with-Animate-CSS/index.md | 10 +- backbone.js/cross-domain-sessions/index.md | 35 +++--- backbone.js/infinite-scrolling/index.md | 14 +-- .../nodejs-restify-mongodb-mongoose/index.md | 17 ++- .../index.md | 3 - .../real-time-backbone-with-pubnub/index.md | 18 +-- .../tutorial.json | 2 +- backbone.js/seo-for-single-page-apps/index.md | 7 +- backbone.js/what-is-a-collection/index.md | 2 +- backbone.js/what-is-a-model/index.md | 20 +--- backbone.js/what-is-a-router/index.md | 30 +++-- backbone.js/what-is-a-view/index.md | 17 +-- .../why-would-you-use-backbone/index.md | 5 +- js-skeleton/skeleton-building-blocks/index.md | 24 +++- js-skeleton/skeleton-forms/index.md | 4 +- js-skeleton/skeleton-functions/index.md | 108 ++++++++++-------- js-skeleton/skeleton-router/index.md | 6 +- js-skeleton/skeleton-subscriptions/index.md | 17 +-- .../why-would-you-use-skeleton/index.md | 3 +- react/universal-react-apps/index.md | 52 ++++----- redux/react-redux-beginners/index.md | 8 +- vissense/autoplay-video/index.md | 9 +- vissense/getting-started/index.md | 37 +++--- vue/wtf-is-vuex/index.md | 26 ++--- 25 files changed, 250 insertions(+), 238 deletions(-) diff --git a/README.md b/README.md index 35894ba..6571615 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,18 @@ +# Cdnjs Tutorials -## Cdnjs Tutorials - -### Overview +## Overview We want you to help us write awesome web development tutorials! Community driven open source tutorials. By developers, for developers. Here's a simple list of questions to help you figure out if you should publish a web development tutorial on cdnjs: -- Do you love web development? -- Do you want to help other people learn web development? -- Did you just learn about something awesome that you think other people would find awesome too? + +* Do you love web development? +* Do you want to help other people learn web development? +* Did you just learn about something awesome that you think other people would find awesome too? If you answered yes to any of the above, we want you to write a web development tutorial and publish it on cdnjs! It's super easy! -### Instructions +## Instructions Simply fork the repository and copy the [example tutorial](https://github.com/cdnjs/tutorials/tree/master/backbone.js/organizing-backbone-using-modules) diff --git a/animate.css/Getting-Started-with-Animate-CSS/index.md b/animate.css/Getting-Started-with-Animate-CSS/index.md index 265c367..1edf252 100644 --- a/animate.css/Getting-Started-with-Animate-CSS/index.md +++ b/animate.css/Getting-Started-with-Animate-CSS/index.md @@ -2,8 +2,12 @@ To get started with Animate.css, add `` -to your tag. After that, you can now add the class to another tag. Example: -`

Bouncy text!

+to your `` tag. After that, you can now add the class to another tag. Example: + +```html +

Bouncy text!

-

I bounce until you make me stop!

` +

I bounce until you make me stop!

+``` + For a full list, check https://github.com/daneden/animate.css#Basic-Usage diff --git a/backbone.js/cross-domain-sessions/index.md b/backbone.js/cross-domain-sessions/index.md index 3b5b477..036fc8a 100644 --- a/backbone.js/cross-domain-sessions/index.md +++ b/backbone.js/cross-domain-sessions/index.md @@ -4,7 +4,6 @@ This tutorial will teach you how to completely separate the server and client al On a personal note, I consider this development practice highly desirable and encourage others to think of the possible benefits but the security still needs to be proved. - > Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries. - [enable-cors.org](http://enable-cors.org/) **Some benefits include** @@ -15,7 +14,6 @@ On a personal note, I consider this development practice highly desirable and en * As a front-end developer you can host the client anywhere. * This separation enforces that the API be built robustly, documented, collaboratively and versioned. - ** Cons of this tutorial ** * This tutorial doesn't explain how to perform this with cross browser support. CORS headers aren't supported by Opera and IE 6/7. Though it is do-able using [easyXDM](http://easyxdm.net/wp/) @@ -37,7 +35,6 @@ Host the codebase on a simple HTTP server such that the domain is `localhost` wi [Example Demo](http://thomasdavis.github.io/backbonetutorials/examples/cross-domain/) - This tutorial focuses on building a flexible Session model to control session state in your application. ## Checking session state at first load @@ -52,7 +49,7 @@ define([ 'vm', 'events', 'models/session', - 'text!templates/layout.html' + 'text!templates/layout.html' ], function($, _, Backbone, Vm, Events, Session, layoutTemplate){ var AppView = Backbone.View.extend({ el: '.container', @@ -62,7 +59,7 @@ define([ //options.url = 'http://localhost:8000' + options.url; options.url = 'http://cross-domain.nodejitsu.com' + options.url; }); - + }, render: function () { var that = this; @@ -74,7 +71,7 @@ define([ Session.getAuth(function () { Backbone.history.start(); }) - } + } }); return AppView; }); @@ -93,7 +90,7 @@ define([ 'backbone' ], function(_, Backbone) { var SessionModel = Backbone.Model.extend({ - + urlRoot: '/session', initialize: function () { var that = this; @@ -113,7 +110,7 @@ define([ login: function(creds) { // Do a POST to /session and send the serialized form creds this.save(creds, { - success: function () {} + success: function () {} }); }, logout: function() { @@ -127,9 +124,9 @@ define([ // The server also returns a new csrf token so that // the user can relogin without refreshing the page that.set({auth: false, _csrf: resp._csrf}); - + } - }); + }); }, getAuth: function(callback) { // getAuth is wrapped around our router @@ -176,7 +173,7 @@ define([ if(Session.get('auth')){ this.$el.html(_.template(exampleLogoutTemplate, {username: Session.get('username')})); } else { - this.$el.html(exampleLoginTemplate); + this.$el.html(exampleLoginTemplate); } }, events: { @@ -257,7 +254,6 @@ This server has 3 endpoints, that are pseudo-restful; * GET /session - Checks Auth - Simply returns if auth is true or false, if true then also returns some session details ```js - var express = require('express'); var connect = require('connect'); @@ -273,7 +269,7 @@ var allowCrossDomain = function(req, res, next) { 'http://backbonetutorials.com', 'http://localhost' ]; - + if(allowedHost.indexOf(req.headers.origin) !== -1) { res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Origin', req.headers.origin) @@ -293,7 +289,7 @@ app.configure(function() { app.use(csrf.check); }); -app.get('/session', function(req, res){ +app.get('/session', function(req, res){ // This checks the current users auth // It runs before Backbones router is started // we should return a csrf token for Backbone to use @@ -304,7 +300,7 @@ app.get('/session', function(req, res){ } }); -app.post('/session', function(req, res){ +app.post('/session', function(req, res){ // Login // Here you would pull down your user credentials and match them up // to the request @@ -312,16 +308,16 @@ app.post('/session', function(req, res){ res.send({auth: true, id: req.session.id, username: req.session.username}); }); -app.del('/session/:id', function(req, res, next){ +app.del('/session/:id', function(req, res, next){ // Logout by clearing the session req.session.regenerate(function(err){ // Generate a new csrf token so the user can login again // This is pretty hacky, connect.csrf isn't built for rest // I will probably release a restful csrf module csrf.generate(req, res, function () { - res.send({auth: false, _csrf: req.session._csrf}); + res.send({auth: false, _csrf: req.session._csrf}); }); - }); + }); }); app.listen(8000); @@ -329,7 +325,6 @@ app.listen(8000); _Note: I wrote a custom csrf module for this which can be found in the example directory. It's based of connects and uses the `crypto` library. I didn't spend much time on it but other traditional csrf modules won't work because they aren't exactly built for this implementation technique._ - ## Conclusion This approach really hammers in the need for a well documented and designed API. A powerful API will let you do application iterations with ease. @@ -346,4 +341,4 @@ Enjoy using Backbone.js cross domain! * [cross-site xmlhttprequest with CORS](http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/) * [Cross-Origin Resource Sharing](http://www.w3.org/TR/cors/) -* [Using CORS with All (Modern) Browsers](http://www.kendoui.com/blogs/teamblog/posts/11-10-04/using_cors_with_all_modern_browsers.aspx) \ No newline at end of file +* [Using CORS with All (Modern) Browsers](http://www.kendoui.com/blogs/teamblog/posts/11-10-04/using_cors_with_all_modern_browsers.aspx) diff --git a/backbone.js/infinite-scrolling/index.md b/backbone.js/infinite-scrolling/index.md index 5ac28c1..911f2e1 100644 --- a/backbone.js/infinite-scrolling/index.md +++ b/backbone.js/infinite-scrolling/index.md @@ -18,7 +18,7 @@ Twitter offers a jsonp API for browsing tweets. The first thing to note is that Using the 'q' and 'page' query parameters we can find the results we are after. In the collection definition below we have set some defaults which can be overridden at any point. -Twitter's search API actually returns a whole bunch of meta information alongside the results. Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection. +Twitter's search API actually returns a whole bunch of meta information alongside the results. Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection. ```js // collections/twitter.js @@ -43,7 +43,7 @@ define([ return Tweets; }); ``` - + _Note: Feel free to attach the meta information returned by Twitter to the collection itself e.g._ ```js @@ -56,7 +56,7 @@ parse: function(resp, xhr) { ## Setting up the View The first thing to do is to load our Twitter collection and template into the widget module. We should attach our collection to our view in our `initialize` function. `loadResults` will be responsible for calling fetch on our Twitter collection. On success we will append the latest results to our widget using our template. Our Backbone.js `events` will listen for `scroll` on the current `el` of the view which is '.twitter-widget'. If the current `scrollTop` is at the bottom then we simply increment the Twitter collections current page property and call `loadResults` again. - + ```js // views/twitter/widget.js define([ @@ -83,14 +83,14 @@ define([ // we are starting a new load of results so set isLoading to true this.isLoading = true; // fetch is Backbone.js native function for calling and parsing the collection url - this.twitterCollection.fetch({ + this.twitterCollection.fetch({ success: function (tweets) { // Once the results are returned lets populate our template $(that.el).append(_.template(TwitterListTemplate, {tweets: tweets.models, _:_})); // Now we have finished loading set isLoading back to false that.isLoading = false; } - }); + }); }, // This will simply listen for scroll events on the current el events: { @@ -119,7 +119,7 @@ Our view above passes into our underscore template the variable tweets which we
    <% _.each(tweets, function (tweet) { %> -
  • <%= tweet.get('text') %>
    • +
  • <%= tweet.get('text') %>
    • <% }); %>
@@ -131,4 +131,4 @@ This is a very lightweight but robust infinite scroll example. There are caveats [Example Demo](http://thomasdavis.github.io/backbonetutorials/examples/infinite-scroll/) -[Example Source](https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/infinite-scroll) \ No newline at end of file +[Example Source](https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/examples/infinite-scroll) diff --git a/backbone.js/nodejs-restify-mongodb-mongoose/index.md b/backbone.js/nodejs-restify-mongodb-mongoose/index.md index 77825b6..e2fb7d5 100644 --- a/backbone.js/nodejs-restify-mongodb-mongoose/index.md +++ b/backbone.js/nodejs-restify-mongodb-mongoose/index.md @@ -1,4 +1,4 @@ -# Simple example - Node.js, Restify, MongoDb and Mongoose +# Simple example - Node.js, Restify, MongoDb and Mongoose Before I start, the Backbone.js parts of this tutorial will be using techniques described in "Organizing your application using [Modules](http://backbonetutorials.com/organizing-backbone-using-modules/) to construct a simple guestbook. @@ -20,7 +20,6 @@ This stack is great for rapid prototyping and highly intuitive. Personal note: I "Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices." - ### Restify "Restify is a node.js module built specifically to enable you to build correct REST web services. It borrows heavily from express (intentionally) as that is more or less the de facto API for writing web applications on top of node.js." @@ -42,7 +41,7 @@ In the example repository there is a server.js example which can be executed by The first thing to do is require the Restify module. Restify will be in control of handling our restful endpoints and returning the appropriate JSON. ```js -var restify = require('restify'); +var restify = require('restify'); var server = restify.createServer(); server.use(restify.bodyParser()); ``` @@ -51,7 +50,6 @@ Note: bodyParser() takes care of turning your request data into a JavaScript obj ## MongoDb/Mongoose configuration - We simply want to require the MongoDb module and pass it a MongoDb authentication URI e.g. mongodb://username:server@mongoserver:10059/somecollection The code below presupposes you have another file in the same directory called _config.js_. Your config should never be public as it contains your credentials. So for this repository I have added _config.js_ to my _.gitignore_ but added in a [sample config](https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/config-sample.js). @@ -60,7 +58,7 @@ The code below presupposes you have another file in the same directory called _c var mongoose = require('mongoose/'); var config = require('./config'); db = mongoose.connect(config.creds.mongoose_auth), -Schema = mongoose.Schema; +Schema = mongoose.Schema; ``` ## Mongoose Schema @@ -74,8 +72,8 @@ var MessageSchema = new Schema({ date: Date }); // Use the schema to register a model with MongoDb -mongoose.model('Message', MessageSchema); -var Message = mongoose.model('Message'); +mongoose.model('Message', MessageSchema); +var Message = mongoose.model('Message'); ``` _Note: Message can now be used for all things CRUD related. @@ -89,7 +87,7 @@ Just like in Backbone, Restify allows you to configure different routes and thei function getMessages(req, res, next) { // Resitify currently has a bug which doesn't allow you to set default headers // This headers comply with CORS and allow us to server our response to any origin - res.header("Access-Control-Allow-Origin", "*"); + res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); // .find() without any arguments, will return all results // the `-1` in .sort() means descending order @@ -122,7 +120,6 @@ This wraps up the server side of things, if you follow the [example](https://git [http://backbonetutorials.nodejitsu.com/messages](http://backbonetutorials.nodejitsu.com/messages) - _Note: Again you must remember to change the [Model](https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/models/message.js) and [Collection](https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/nodejs-mongodb-mongoose-restify/js/collections/messages.js) definitions to match your server address._ ## Setting up the client (Backbone.js) @@ -177,7 +174,7 @@ define([ el: '.guestbook-form-container', render: function () { $(this.el).html(guestbookFormTemplate); - + }, events: { 'click .post-message': 'postMessage' diff --git a/backbone.js/organizing-backbone-using-modules/index.md b/backbone.js/organizing-backbone-using-modules/index.md index cc87711..aff42c1 100644 --- a/backbone.js/organizing-backbone-using-modules/index.md +++ b/backbone.js/organizing-backbone-using-modules/index.md @@ -38,7 +38,6 @@ To easily understand this tutorial you should jump straight into the example cod [Example Demo](http://thomasdavis.github.io/backbonetutorials/examples/modular-backbone) - The tutorial is only loosely coupled with the example and you will find the example to be more comprehensive. If you would like to see how a particular use case would be implemented please visit the GitHub page and create an issue.(Example Request: How to do nested views). @@ -167,8 +166,6 @@ Any modules we develop for our application using AMD/Require.js will be asynchro We have a heavy dependency on jQuery, Underscore and Backbone, unfortunately this libraries are loaded synchronously and also depend on each other existing in the global namespace. - - ## A boiler plate module So before we start developing our application, let's quickly look over boiler plate code that will be reused quite often. diff --git a/backbone.js/real-time-backbone-with-pubnub/index.md b/backbone.js/real-time-backbone-with-pubnub/index.md index c4420a3..7827dec 100644 --- a/backbone.js/real-time-backbone-with-pubnub/index.md +++ b/backbone.js/real-time-backbone-with-pubnub/index.md @@ -46,18 +46,18 @@ var _ = require('underscore')._, publish_key: 'demo', subscribe_key: 'demo' }); - + var MyCollection = Backbone.Collection.extend({ // Add business logic here }); - + var myCollection = new MyCollection(); - + pubnub.subscribe({ channel: 'backbone-collection-MyCollection', // This is what is created internally by the framework callback: function (message) { var data = JSON.parse(message); // All data is transferred as JSON - + if (data.method === 'create') { myCollection.add(data.model); } else if (data.method === 'update') { @@ -66,21 +66,21 @@ pubnub.subscribe({ var record = _.find(myCollection.models, function (record) { return record.id === data.model.id; }); - + if (record == null) { console.log("Could not record: " + model.id); } - + var diff = _.difference(_.keys(record.attributes), _.keys(data.model)); _.each(diff, function(key) { return record.unset(key); }); - + return record.set(data.model, data.options); } } }); - + // Now myCollection will always be up to date. // Here you can provide some way (i.e. http.createServer) to get the data from the server. ``` @@ -89,4 +89,4 @@ Now you can listen for all the changes to the collection and either store them i We here at PubNub truly believe that real-time is the way of the future. Your users will not have to click a refresh button to constantly synchronize their Backbone client data with a server. Instead, with PubNub integration, your users will get data right when it happens. This is also much more extensible since any client or server can listen to the events and manipulate them as they need to. This allows business logic to lay in more places than one. We really hope this changes the way developers look at building not just Backbone applications but web applications overall. -You can read more about PubNub at [our website](http://pubnub.com) and more about Backbone integration at [our GitHub page](http://pubnub.github.io/backbone/) \ No newline at end of file +You can read more about PubNub at [our website](http://pubnub.com) and more about Backbone integration at [our GitHub page](http://pubnub.github.io/backbone/) diff --git a/backbone.js/real-time-backbone-with-pubnub/tutorial.json b/backbone.js/real-time-backbone-with-pubnub/tutorial.json index 8ec31b6..db40694 100644 --- a/backbone.js/real-time-backbone-with-pubnub/tutorial.json +++ b/backbone.js/real-time-backbone-with-pubnub/tutorial.json @@ -18,4 +18,4 @@ "repository": "https://github.com/thomasdavis/backbonetutorials", "disqus_shortname": "bbtutes", "disqus_url": "http://backbonetutorials.com/real-time-backbone-with-pubnub" -} \ No newline at end of file +} diff --git a/backbone.js/seo-for-single-page-apps/index.md b/backbone.js/seo-for-single-page-apps/index.md index 83fdf40..ee670dd 100644 --- a/backbone.js/seo-for-single-page-apps/index.md +++ b/backbone.js/seo-for-single-page-apps/index.md @@ -2,7 +2,7 @@ This tutorial will show you how to index your application on search engines. As the author I believe that servers should be completely independent of the client in the age of API's. Which speeds up development for the ever increasing array of clients. It is on the shoulders of the search engines to conform and they should not dictate how the web is stored and accessed. -In 2009 Google released the idea of [escaped fragments](http://googlewebmastercentral.blogspot.com.au/2009/10/proposal-for-making-ajax-crawlable.html). +In 2009 Google released the idea of [escaped fragments](http://googlewebmastercentral.blogspot.com.au/2009/10/proposal-for-making-ajax-crawlable.html). The idea simply stating that if a search engine should come across your JavaScript application then you have the permission to redirect the search engine to another URL that serves the fully rendered version of the page (The current search engines cannot execute much JavaScript (Some people speculate that Google Chrome was born of Google Search wishing to successfully render every web page to retrieve ajaxed content)). @@ -30,8 +30,8 @@ var app = express(); var getContent = function(url, callback) { var content = ''; - // Here we spawn a phantom.js process, the first element of the - // array is our phantomjs script and the second element is our url + // Here we spawn a phantom.js process, the first element of the + // array is our phantomjs script and the second element is our url var phantom = require('child_process').spawn('phantomjs', ['phantom-server.js', url]); phantom.stdout.setEncoding('utf8'); // Our phantom.js script is simply logging the output and @@ -118,7 +118,6 @@ RewriteRule (.*) http://webserver:3000/%1? [P] We could also include other `RewriteCond`, such as `user agent` to redirect other search engines we wish to be indexed on. - Though Google won't use `_escaped_fragment_` unless we tell it to by either including a meta tag; `` or diff --git a/backbone.js/what-is-a-collection/index.md b/backbone.js/what-is-a-collection/index.md index 4111d13..4f14fd2 100644 --- a/backbone.js/what-is-a-collection/index.md +++ b/backbone.js/what-is-a-collection/index.md @@ -55,4 +55,4 @@ var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" }); var myAlbum = new Album([ song1, song2, song3]); console.log( myAlbum.models ); // [song1, song2, song3] -``` \ No newline at end of file +``` diff --git a/backbone.js/what-is-a-model/index.md b/backbone.js/what-is-a-model/index.md index 4f82c3c..e7ac3f0 100644 --- a/backbone.js/what-is-a-model/index.md +++ b/backbone.js/what-is-a-model/index.md @@ -5,7 +5,6 @@ Across the internet the definition of [MVC](http://en.wikipedia.org/wiki/Model%E > Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. So for the purpose of the tutorial let's create a `model`. - ```js var Human = Backbone.Model.extend({ @@ -17,7 +16,6 @@ var Human = Backbone.Model.extend({ var human = new Human(); ``` - So _initialize()_ is triggered whenever you create a new instance of a model( models, collections and views work the same way ). You don't have to include it in your model declaration but you will find yourself using it more often than not. ## Setting attributes @@ -37,10 +35,9 @@ var human = new Human({ name: "Thomas", age: 67}); var human = new Human(); human.set({ name: "Thomas", age: 67}); - ``` -So passing a JavaScript object to our constructor is the same as calling _model.set()_. Now that these models have attributes set we need to be able to retrieve them. +So passing a JavaScript object to our constructor is the same as calling _model.set()_. Now that these models have attributes set we need to be able to retrieve them. ## Getting attributes @@ -58,7 +55,6 @@ var human = new Human({ name: "Thomas", age: 67, child: 'Ryan'}); var age = human.get("age"); // 67 var name = human.get("name"); // "Thomas" var child = human.get("child"); // 'Ryan' - ``` ## Setting model defaults @@ -108,7 +104,7 @@ human.adopt('John Resig'); var child = human.get("child"); // 'John Resig' ``` -So we can implement methods to get/set and perform other calculations using attributes from our model at any time. +So we can implement methods to get/set and perform other calculations using attributes from our model at any time. ## Listening for changes to the model @@ -160,7 +156,7 @@ var UserModel = Backbone.Model.extend({ ### Creating a new model -If we wish to create a new user on the server then we will instantiate a new UserModel and call `save`. If the `id` attribute of the model is `null`, Backbone.js will send a POST request to the urlRoot of the server. +If we wish to create a new user on the server then we will instantiate a new UserModel and call `save`. If the `id` attribute of the model is `null`, Backbone.js will send a POST request to the urlRoot of the server. ```js var UserModel = Backbone.Model.extend({ @@ -184,7 +180,6 @@ user.save(userDetails, { alert(JSON.stringify(user)); } }) - ``` Our table should now have the values @@ -209,7 +204,6 @@ user.fetch({ alert(JSON.stringify(user)); } }) - ``` ### Updating a model @@ -218,7 +212,6 @@ Now that we have a model that exists on the server we can perform an update usin We will use the `save` api call which is intelligent and will send a PUT request instead of a POST request if an `id` is present(conforming to RESTful conventions) ```js - // Here we have set the id of the model var user = new UserModel({ id: 1, @@ -235,7 +228,6 @@ user.save({name: 'Davis'}, { alert(JSON.stringify(user)); } }); - ``` ### Deleting a model @@ -251,13 +243,12 @@ var user = new UserModel({ }); // Because there is id present, Backbone.js will fire -// DELETE /user/1 +// DELETE /user/1 user.destroy({ success: function () { alert('Destroyed'); } }); - ``` ### Tips and Tricks @@ -294,13 +285,12 @@ var Human = Backbone.Model.extend({ }); var human = new Human; -human.set({ name: "Mary Poppins", age: -1 }); +human.set({ name: "Mary Poppins", age: -1 }); // Will trigger an alert outputting the error var human = new Human; human.set({ name: "Dr Manhatten", age: -1 }); // God have mercy on our souls - ``` ### Contributors diff --git a/backbone.js/what-is-a-router/index.md b/backbone.js/what-is-a-router/index.md index 36edede..a753be0 100644 --- a/backbone.js/what-is-a-router/index.md +++ b/backbone.js/what-is-a-router/index.md @@ -1,6 +1,6 @@ # What is a router? -Backbone routers are used for routing your applications URL's when using hash tags(#). In the traditional MVC sense they don't necessarily fit the semantics and if you have read "[What is a view?](http://backbonetutorials.com/what-is-a-view)" it will elaborate on this point. Though a Backbone "router" is still very useful for any application/feature that needs URL routing/history capabilities. +Backbone routers are used for routing your applications URL's when using hash tags(#). In the traditional MVC sense they don't necessarily fit the semantics and if you have read "[What is a view?](http://backbonetutorials.com/what-is-a-view)" it will elaborate on this point. Though a Backbone "router" is still very useful for any application/feature that needs URL routing/history capabilities. Defined routers should always contain at least one route and a function to map the particular route to. In the example below we are going to define a route that is always called. @@ -22,7 +22,6 @@ app_router.on('route:defaultRoute', function(actions) { // Start Backbone history a necessary step for bookmarkable URL's Backbone.history.start(); - ``` [Activate route](#action) @@ -31,7 +30,6 @@ Backbone.history.start(); _Notice the change in the url_ - ## Dynamic Routing Most conventional frameworks allow you to define routes that contain a mix of static and dynamic route parameters. For example you might want to retrieve a post with a variable id with a friendly URL string. Such that your URL would look like "http://example.com/#/posts/12". Once this route was activated you would want to access the id given in the URL string. This example is implemented below. @@ -40,7 +38,7 @@ Most conventional frameworks allow you to define routes that contain a mix of st var AppRouter = Backbone.Router.extend({ routes: { "posts/:id": "getPost", - "*actions": "defaultRoute" + "*actions": "defaultRoute" // Backbone will try to match the route above first } }); @@ -48,10 +46,10 @@ var AppRouter = Backbone.Router.extend({ var app_router = new AppRouter; app_router.on('route:getPost', function (id) { // Note the variable in the route definition being passed in here - alert( "Get post number " + id ); + alert( "Get post number " + id ); }); app_router.on('route:defaultRoute', function (actions) { - alert( actions ); + alert( actions ); }); // Start Backbone history a necessary step for bookmarkable URL's Backbone.history.start(); @@ -63,7 +61,6 @@ Backbone.history.start(); _Notice the change in the url_ - ## Dynamic Routing Cont. ":params" and "\*splats" Backbone uses two styles of variables when implementing routes. First there are ":params" which match any URL components between slashes. Then there are "\*splats" which match any number of URL components. Note that due to the nature of a "\*splat" it will always be the last variable in your URL as it will match any and all components. @@ -77,25 +74,25 @@ routes: { "posts/:id": "getPost", // Example - + "download/*path": "downloadFile", // Download - + ":route/:action": "loadView", // Load Route/Action View - + }, -app_router.on('route:getPost', function( id ){ - alert(id); // 121 +app_router.on('route:getPost', function( id ){ + alert(id); // 121 }); -app_router.on('route:downloadFile', function( path ){ - alert(path); // user/images/hey.gif +app_router.on('route:downloadFile', function( path ){ + alert(path); // user/images/hey.gif }); -app_router.on('route:loadView', function( route, action ){ - alert(route + "_" + action); // dashboard_graph +app_router.on('route:loadView', function( route, action ){ + alert(route + "_" + action); // dashboard_graph }); ``` @@ -104,6 +101,7 @@ Routes are quite powerful and in an ideal world your application should never co Remember to do a pull request for any errors you come across. ### Relevant Links + * [Backbone.js official router documentation](http://backbonejs.org/#Router) * [Using routes and understanding the hash tag](http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html) diff --git a/backbone.js/what-is-a-view/index.md b/backbone.js/what-is-a-view/index.md index be2fc44..22c1742 100644 --- a/backbone.js/what-is-a-view/index.md +++ b/backbone.js/what-is-a-view/index.md @@ -33,7 +33,7 @@ Let us set our view's "el" property to div#search_container, effectively making alert("Alerts suck."); } }); - + var search_view = new SearchView({ el: $("#search_container") }); ``` @@ -47,7 +47,6 @@ Backbone.js is dependent on Underscore.js, which includes its own micro-templati Let us implement a "render()" function and call it when the view is initialized. The "render()" function will load our template into the view's "el" property using jQuery. ```html - - ``` _Tip: Place all your templates in a file and serve them from a CDN. This ensures your users will always have your application cached._ @@ -110,10 +108,8 @@ To attach a listener to our view, we use the "events" attribute of Backbone.View var search_view = new SearchView({ el: $("#search_container") }); - ``` - ## Tips and Tricks _Using template variables_ @@ -142,17 +138,16 @@ _Using template variables_ this.$el.html( template ); }, events: { - "click input[type=button]": "doSearch" + "click input[type=button]": "doSearch" }, doSearch: function( event ){ // Button clicked, you can access the element that was clicked with event.currentTarget alert( "Search for " + $("#search_input").val() ); } }); - + var search_view = new SearchView({ el: $("#search_container") }); - ``` ### Relevant Links @@ -161,9 +156,7 @@ _Using template variables_ * [This examples exact code on jsfiddle.net](http://jsfiddle.net/thomas/C9wew/4/) * [Another semi-complete example on jsFiddle](http://jsfiddle.net/thomas/dKK9Y/6/) - - ### Contributors * [Michael Macias](https://github.com/zaeleus) -* [Alex Lande](https://github.com/lawnday) \ No newline at end of file +* [Alex Lande](https://github.com/lawnday) diff --git a/backbone.js/why-would-you-use-backbone/index.md b/backbone.js/why-would-you-use-backbone/index.md index c561678..c7ace19 100644 --- a/backbone.js/why-would-you-use-backbone/index.md +++ b/backbone.js/why-would-you-use-backbone/index.md @@ -8,12 +8,10 @@ I shouldn't need to explain why building something without any structure is a ba Backbone.js enforces that communication to the server should be done entirely through a RESTful API. The web is currently trending such that all data/content will be exposed through an API. This is because the browser is no longer the only client, we now have mobile devices, tablet devices, Google Goggles and electronic fridges etc. - ## So how does Backbone.js help? Backbone is an incredibly small library for the amount of functionality and structure it gives you. It is essentially MVC for the client and allows you to make your code modular. If you read through some of the beginner tutorials the benefits will soon become self evident and due to Backbone.js light nature you can incrementally include it in any current or future projects. - ## Other frameworks If you are looking for comparisons to build your single page application, try some of these resourceful links. @@ -21,9 +19,8 @@ If you are looking for comparisons to build your single page application, try so * [A feature comparison of different frontend frameworks](http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/) * [Todo MVC - Todo list implemented in the many different types of frontend frameworks](http://todomvc.com/) - ### Contributors * [FND](https://github.com/FND) -__If you questions regarding why you should choose Backbone.js as your framework, please leave a comment below__ \ No newline at end of file +__If you questions regarding why you should choose Backbone.js as your framework, please leave a comment below__ diff --git a/js-skeleton/skeleton-building-blocks/index.md b/js-skeleton/skeleton-building-blocks/index.md index 0a8710b..8bda6f6 100644 --- a/js-skeleton/skeleton-building-blocks/index.md +++ b/js-skeleton/skeleton-building-blocks/index.md @@ -1,6 +1,7 @@ # Setting up the html, template, model and list for our app First, let's look at the project structure: + ```js |--- public | |--- models @@ -27,7 +28,9 @@ First, let's look at the project structure: ``` --- + Next, let's set up the 'html' body: + ```html
@@ -46,21 +49,25 @@ Next, let's set up the 'html' body:
``` + Now let's go over it and break it into parts: -* Functions: 'removeAll' todos, 'clearCompleted' todos. + +* Functions: 'removeAll' todos, 'clearCompleted' todos. * Forms: A 'todo-form' to submit a new todo. -* Lists: A 'todo-list' element which will be the container of our todos. +* Lists: A 'todo-list' element which will be the container of our todos. * We also have 'all', 'active' and 'completed' filters (The 'router.visit' explained later). --- + Ok, now let's define our 'todo-template': + ```html ``` + Now notice that a template is attached to a model, which is defined below in this article. When you define a template, you actually tell how each model will look. The way to seperate templates when they get rendered is by using 'index', which is provided by Skeleton.js for free. @@ -77,7 +85,9 @@ What you see inside '{{ }}' will get rendered as you push an object to the list So the 'text' value will get rendered and it will be capitalized. --- + Let's define a model, and continue exploring what we see in the template: + ```js const TodoModel = Skeleton.Model({ defaults: { @@ -90,13 +100,16 @@ const TodoModel = Skeleton.Model({ } }); ``` + The only object needed is the defaults object, to specify constant and changing model fields. Each of our models has 'text', 'isCompleted' and 'isEditing' fields. The 'init' function is called each time a model is initialized. --- + Now, we need to define a list. A skeleton list object is what we are going to work with in all phases of the application. + ```js const TodosList = Skeleton.List({ model: TodoModel, @@ -104,13 +117,16 @@ const TodosList = Skeleton.List({ templateId: 'todo-template' }); ``` + * 'model': The model that builds the list. * 'element': The html element that will contain the list models. * 'template' or 'templateId': A string representing the template, or a templateId which specifies the id of the template element in the html --- + Now, let's write our server code. This is not the main issue in this tutorial so let's go over it really briefly: + ```js const express = require('express'); const path = require('path'); diff --git a/js-skeleton/skeleton-forms/index.md b/js-skeleton/skeleton-forms/index.md index 69ae673..925f034 100644 --- a/js-skeleton/skeleton-forms/index.md +++ b/js-skeleton/skeleton-forms/index.md @@ -2,6 +2,7 @@ Skeleton gives you a very clean way to organize your forms. remember the form part of the html? + ```html
@@ -9,6 +10,7 @@ remember the form part of the html? ``` Let's use skeleton to give readable structure to the javascript: + ```js Skeleton.form({ name: 'todo-form', @@ -33,4 +35,4 @@ Skeleton.form({ Now, the html peace and the javascript are organized in a very easy-to-understand way. You only need to provide the 'name' of the form and its 'inputs', the 'submit' button id or the input submitted with its key code, and an 'onSubmit' function. -> 'Skeleton.form.clear' lets you clean all the inputs text when you provide form name. \ No newline at end of file +> 'Skeleton.form.clear' lets you clean all the inputs text when you provide form name. diff --git a/js-skeleton/skeleton-functions/index.md b/js-skeleton/skeleton-functions/index.md index 2246380..c5a4009 100644 --- a/js-skeleton/skeleton-functions/index.md +++ b/js-skeleton/skeleton-functions/index.md @@ -1,12 +1,13 @@ # Our TodoMVC Functions Let's look at our todo-template: + ```js