diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..7278fb6 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +charset = utf-8 +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..09b230f --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,3 @@ +github: [MattIPv4] +open_collective: cdnjs +patreon: cdnjs diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f48516d --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2011-2020 cdnjs + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md index e17b944..10f32ac 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,31 @@ +

+ < cdnjs > +

-## Cdnjs Tutorials +

The #1 free and open source CDN built to make life easier for developers.

-### Overview +--- -We want you to help us write awesome web development tutorials! Community driven open source tutorials. By developers, for developers. +## Table of Contents + +* [Introduction](#introduction) +* [Contributing](#contributing) +* [Tutorial Listings](#tutorial-listings) +* [Why host your tutorial on cdnjs?](#why-host-your-tutorial-on-cdnjs) + +## Introduction + +We want you to help us write awesome Community driven open source web development 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? -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! +* 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? -### Instructions +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! + +## Contributing Simply fork the repository and copy the [example tutorial](https://github.com/cdnjs/tutorials/tree/master/backbone.js/organizing-backbone-using-modules) @@ -22,7 +35,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 on the [cdnjs.com](https://cdnjs.com) website, and are also all available via the [API](https://cdnjs.com/api). 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 +44,8 @@ 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. -* 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. +* Everything is hosted on GitHub so the community can easily help fix bugs and grammatical mistakes in your tutorials. + +## License + +Each library is released under its own license. This cdnjs repository and the tutorials within are published under [MIT license](LICENSE). 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/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/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/cross-domain-sessions/tutorial.json b/backbone.js/cross-domain-sessions/tutorial.json index 824397e..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": "https://twitter.com/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/cross-domain-sessions" -} \ No newline at end of file +} 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 @@ -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/infinite-scrolling/tutorial.json b/backbone.js/infinite-scrolling/tutorial.json index e59a363..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": "https://twitter.com/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/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/nodejs-restify-mongodb-mongoose/tutorial.json b/backbone.js/nodejs-restify-mongodb-mongoose/tutorial.json index 4610731..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": "https://twitter.com/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/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/organizing-backbone-using-modules/tutorial.json b/backbone.js/organizing-backbone-using-modules/tutorial.json index 5e353e8..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": "https://twitter.com/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/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/seo-for-single-page-apps/tutorial.json b/backbone.js/seo-for-single-page-apps/tutorial.json index 59cef99..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": "https://twitter.com/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/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-collection/tutorial.json b/backbone.js/what-is-a-collection/tutorial.json index f7b5e13..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": "https://twitter.com/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/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-model/tutorial.json b/backbone.js/what-is-a-model/tutorial.json index a42c3c2..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": "https://twitter.com/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/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-router/tutorial.json b/backbone.js/what-is-a-router/tutorial.json index 68165e4..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": "https://twitter.com/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/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/what-is-a-view/tutorial.json b/backbone.js/what-is-a-view/tutorial.json index b5c1027..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": "https://twitter.com/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/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/backbone.js/why-would-you-use-backbone/tutorial.json b/backbone.js/why-would-you-use-backbone/tutorial.json index 2a71992..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": "https://twitter.com/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/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