Building SPA Applications - the webcasts with RIA/JS

Three webcasts

http://thejoyofcode.com/Building_SPA_Applications_the_webcasts.aspx

WCF Support for jQuery

Quote from site :

(...)In today's web it is common to build web pages with interactive elements that load data asynchronously, whether it is to pre-validate a form submission, edit some tabular data on the server, or chat with another user on the page. Commonly this is accomplished using JavaScript or a particular JavaScript client library such as jQuery talking to a backing web service. This project enables you to build these types of services using the Windows Communication Foundation (WCF) and WCF RIA Services as your services framework. We aim to provide a productive and feature-rich end-to-end experience for talking to HTTP services from JavaScript and jQuery in particular. (...)

http://wcf.codeplex.com/wikipage?title=WCF%20jQuery

Silverlight 5 WCF RIA Services

Well written articles on

http://www.c-sharpcorner.com/uploadfile/Mahadesh/silverlight-5-wcf-ria-services-part-1/

CSV to Object with Javascript

Quote from site:

(...)A tiny library to fetch relational CSV data at client-side just like JSON(...)

http://archan937.github.com/csonv.js/

MP3 Player in Javascript

Nice customizable MP3 player

http://jplayer.org

Offline HTML5 canvas app in Python with django-mediagenerator

http://www.allbuttonspressed.com/blog/django/2010/11/Offline-HTML5-canvas-app-in-Python-with-django-mediagenerator-Part-1-pyjs

Playing with Ironpython and Silverlight

Ironpython plays nicely with Silverlight, especially when using
Gestalt.

Here is how I manage to pass arguments to a 'click event' handler,
assuming you have a button whith an id equal to 'Button1'

<script type="text/python">
        import System
        from System import EventHandler
        class Person(object):
            def __init__(self, name):
                self.name = name
                self.greeted = False        
        def GreetHandler(p):
            def SayHello(s,e):
                if not p.greeted:
                    window.Alert("Hello " + p.name)                    
                else:                    
                    window.Alert("Happy to see you again  " + p.name)
                p.greeted = not p.greeted        
            return SayHello
        p = Person("PAUL")
        document.Button1.AttachEvent('onclick',EventHandler(GreetHandler(p)))
</script>

A javascript animation toolkit

Quote from site :

(...)CAAT is a multi-instance director-based scene-graph manager.
It is able to render using Canvas, WebGL and CSS with the same code base.
Features actors, containers, scene transitions, behaviors, interpolators, paths, custom affine transformation stack, timers, elements lifecycle, etc. Watch some demos here.(...)

http://labs.hyperandroid.com/static/caat/

Extended WPF Toolkit

Quote frm site :

(...)The Extended WPF Toolkit is a collection of WPF controls, components and utilities made available outside the normal WPF Toolkit.(...)

http://wpftoolkit.codeplex.com/

http://nuget.org/packages/UsefulDB4OToWeb

Quote from site :

(...)This package allows you to easily use multiple db4o "object databases" in your asp.net project. It also adds to your code a sample implementation that you can use directly.

To install UsefulDB4OToWeb, run the following command in the Package Manager Console(...)

http://nuget.org/packages/UsefulDB4OToWeb

db4o, The Basics

From the author :

(...)With this post I start a little series about db4o, an object database. Why? Because I think object databases are a quite unknown technology. Normally when developers talk about databases they mean a relational database. Yes, relational databases are awesome and well known. But there are lots of alternatives out there! Sadly, lots of developer never even look at alternatives. For example graph-databases like Neo4J, document-database like CouchDB or a object-database like db4o.(...)


http://www.gamlor.info/wordpress/2009/09/db4o-the-basics/

ASP.NET Web Forms : Calling Web Service Page Methods Using JQuery

Amazing, this article shows how to call PageMethod without using 'ScriptManager'

http://tugberkugurlu.com/archive/asp-net-web-forms---calling-web-service-page-methods-using-jquery

Thanks Ugurlu

//-----------------------------------------------------------------------------+
// jQuery call AJAX Page Method                                                |
//-----------------------------------------------------------------------------+
function PageMethod(fn, paramArray, successFn, errorFn) {
var pagePath = window.location.pathname;
//-------------------------------------------------------------------------+
// Create list of parameters in the form:                                  |
// {"paramName1":"paramValue1","paramName2":"paramValue2"}                 |
//-------------------------------------------------------------------------+
var paramList = '';
if (paramArray.length > 0) {
for (var i = 0; i < paramArray.length; i += 2) {
            if (paramList.length > 0) paramList += ',';
paramList += '"' + paramArray[i] + '":"' + paramArray[i + 1] + '"';
}
}
paramList = '{' + paramList + '}';
//Call the page method
$.ajax({
type: "POST",
url: pagePath + "/" + fn,
contentType: "application/json; charset=utf-8",
data: paramList,
dataType: "json",
success: successFn,
error: errorFn
});
}

db4o A light weight Object Oriented Database

From Sony Arouje Blog :

db4o is a light weight Object Oriented database. Using db4o I can persist my entities very easily without any configuration. I can add or remove new properties to my entities without affecting the existing persisted entities.

http://sonyarouje.com/2011/01/05/db4o-a-light-weight-object-oriented-database/

Knockout Tutorial

Nice tutorial

http://net.tutsplus.com/sessions/into-the-ring-with-knockout-js/

Box2D Tutorial

Todd's Box2D Tutorials!

 

Build your First Game with HTML5

Nice tutorial using Box2D

http://net.tutsplus.com/tutorials/html-css-techniques/build-your-first-game-with-html5/

jQuery - Shadow Text Plugin

This article shows how to develop a plugin for jQuery
http://mscerts.programming4.us/programming/jquery%201_3%20%20%20developing%20plugins%20-%20method%20parameters.aspx

Les meilleurs cours et tutoriels PyQt et PySide

Les fameux cours du site 'Developpez.com'
http://pyqt.developpez.com/tutoriels/

IE9 - Gradient with SVG / Gradient Editor

http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Box2D - Tutorial

 

Todd's Box2D Tutorials!

 

Dojo : Cross-Domain Ajax

http://startdojo.com/2010/02/03/cross-domain-ajax-with-dojo

Dojo Tutorail

Very simple introduction to Dojo
http://www.roseindia.net/tags/dojo

AOP aspect of JavaScript with Dojo

http://lazutkin.com/blog/2008/may/18/aop-aspect-javascript-dojo/

CRUD with Dojo

http://lazutkin.com/blog/2009/dec/2/crud-with-dojo/

Using recursion combinators in JavaScript

http://lazutkin.com/blog/2008/jun/30/using-recursion-combinators-javascript/

Functional programming in Dojo
http://lazutkin.com/blog/2008/jan/12/functional-fun-javascript-dojo/

Dojo Connect

(...)dojo.connect is the core event handling and delegation method in Dojo. It allows one function to "listen in" on the execution of any other, triggering the second whenever the first is called. Many listeners may be attached to a function, and source functions may be either regular function calls or DOM events.(...)
http://docs.dojocampus.org/dojo/connect

Introduction to dojo

http://www.javaworld.com/javaworld/jw-01-2009/jw-01-introduction-to-dojo-1.html

Creating rich user interfaces with the Dijit component framework

(...)Part 3 of this three-part series on developing rich web-based applications using the Dojo toolkit, learn about the Dijit rich user interface component framework, which lets you build powerful interfaces with minimal effort.
http://www.ibm.com/developerworks/web/library/wa-ground3/index.html(...)

Build an Ajax application with the Dojo Toolkit

(..) Summary: The Dojo toolkit is a JavaScript library that makes the process of building large JavaScript-based Rich Internet Applications (RIAs) much simpler. With a wide range of features—from DOM querying and manipulation, Asynchronous JavaScript and XML (Ajax) request handling, excellent object-orientation support, and a full user interface widget library (Dijit)—Dojo is an excellent library to use to build a dynamic and interactive web application. In this tutorial, learn about many of the concepts of Dojo and the Dijit widget library through the development of a fully featured sample application, a contact manager system. This application lets a user browse, create, edit, and remove contacts (and contact groups) from a MySQL database. PHP is used on the server side to communicate with the database, with Dojo and the Dijit component library providing a rich, Ajax-powered user interface. The final result is a powerful web application that you can use as a foundation for your own RIAs. (...)

http://www.ibm.com/developerworks/web/tutorials/wa-dojotoolkit/resources.html

Maverick

(...)Maverick is a lightweight open-source framework that enables the MVC pattern in JavaScript in a smart way(...)
http://maverick.round.ee/en-US/

Python Web Frameworks

Here is a list of Web Frameworks for Python
Notice : bobo, bottle

http://wiki.python.org/moin/WebFrameworks

Monad explained using Javascript

(...)Translation from Haskell to JavaScript of selected portions of the best introduction to monads I’ve ever read(...)
http://blog.jcoglan.com/2011/03/05/translation-from-haskell-to-javascript-of-selected-portions-of-the-best-introduction-to-monads-ive-ever-read/
http://blog.jcoglan.com/2011/03/11/promises-are-the-monad-of-asynchronous-programming/

Javascript : Mixin

(...)Consider you have a function, and you wish to use in many classes. In practice, you create a class that contains your general-purpose methods, and then use it to augment other classes. Class with these general-purpose methods is called Mixin class. It is generally not instantiated or called directly, instead it exists to provide methods to other classes.'(...)
from : Chamnap Chhorn
http://chamnapchhorn.blogspot.com/2009/05/javascript-mixins.html

Use OData data with WCF Data Services and Silverlight 4

(...)The purpose is to build a Silverlight master-detail application composed of a ComboBox control to choose a customer and a DataGrid Control to see all the Customer orders. We will use Customers and Orders tables from Northwind OData feed which is at this address : http://services.odata.org/Northwind/Northwind.svc/(...)

http://msmvps.com/blogs/audrey/archive/2010/06/10/odata-use-odata-data-with-wcf-data-services-and-silverlight-4.aspx

By Audrey Petit

Introduction à Open Data Protocol et WCF Data Services

(...)L'Open Data Protocol est un nouveau standard suivant le style d'architecture REST dont le but est de permettre aux applications d'exposer des données en tant que service à travers des réseaux intranet ou le Web.

WCF Data Services quant à lui est un composant serveur du Framework .NET basé sur WCF permettant la création de services utilisant l'Open Data Protocol.(...)

By Florian Casabianca

http://badger.developpez.com/tutoriels/dotnet/odata-wcf-data-services/

OData - WCF Data Services Best Practices from TechEd

http://blogs.msdn.com/b/alexj/archive/2010/06/11/odata-wcf-data-services-best-practices-from-teched.aspx

Advanced using OData in .NET: WCF Data Services

(...)In this article, I will give code samples showcasing the usage of OData in .NET (WCF Data Services). The samples will go in increasing order of complexity, addressing more and more advanced scenarios.(...)

By Vincent-Philippe Lauzon

http://www.codeproject.com/KB/webservices/WCFDataServices.aspx?msg=3696953

OData] Use OData data with WCF Data Services and Silverlight 4

http://msmvps.com/blogs/audrey/archive/2010/06/10/odata-use-odata-data-with-wcf-data-services-and-silverlight-4.aspx

Consuming OData Feeds (Silverlight QuickStart)

(...)Silverlight includes a WCF Data Services client library that enables you to access data from any service that exposes an Open Data Protocol (OData) feed. OData is based on an entity and relationship model that enables you to access data in the style of representational state transfer (REST) resources. Silverlight-based applications can access this data through the standard HTTP protocol to execute queries, and to create, update, and delete data in the data service. OData enables you to create services that expose data to a variety of client applications. For more information, see the OData Web site.(...)
http://www.silverlight.net/learn/quickstarts/consuming-odata-feeds/#querying

Wrap Odata

This articles shows how to wrap Odata around a particular dataSource
http://lostintangent.com/post/3189655590/you-want-to-wrap-odata-around-what

Consuming WCF / ASMX / REST service using JQuery

(...) In this article I will explain how to consume a WCF / ASMX service using jQuery. The scope of the article is limited to creating & consuming different kind of services using jQuery. I have segregated this article into 7 topics based on the service consumption.

Calling ASMX Web service using jQuery
Calling WCF service using jQuery and retrieving data in JSON Format
Calling WCF service using jQuery and retrieving data in XML Format
Calling WCF service using jQuery and retrieving data in JSON Format (pass multiple input parameters) & ( Get multiple objects as output using DataContract)
Calling WCF service using jQuery[ Get Method] and retrieving data in JSON Format
Calling REST based WCF service using jQuery
Streaming an image through WCF and request it through HTTP GET verb.. (...)

http://www.c-sharpcorner.com/UploadFile/sridhar_subra/116/

Remedial JavaScript

Direct from the master :-)
(...)The JavaScript Programming Language suffers from premature standardization. It was rushed to market and then instantly had a huge user base and, soon after, a formal international standard. There was no time during its development to polish the language. As a result, it still has some rough spots. (...)


I specially like

if (!String.prototype.supplant) {
   String.prototype.supplant = function (o) {
      return this.replace(/{([^{}]*)}/g, 
           function (a, b) { var r = o[b]; 
                return typeof r === 'string' 
                    || typeof r === 'number' ? r : a; } );
      }; 
   }

http://javascript.crockford.com/remedial.html

Singleton Design Pattern

(...)The intent of the Singleton pattern as defined in Design Patterns is to "ensure a class has only one instance, and provide a global point of access to it".(...)http://www.dhtmlkitchen.com/learn/js/singleton/

Essential JavaScript Design Patterns For Beginners

(...)A pattern is a reusable solution that can be applied to commonly occurring problems in software design - in our case - in writing JavaScript applications. Another way of looking at patterns are as templates for how you solve problems - ones which can be used in quite a few different situations.
(...)

http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/

JavaScript Module Pattern: In-Depth

(...)The module pattern is a common JavaScript coding pattern. It's generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I'll review the basics and cover some truly remarkable advanced topics, including one which I think is original.(...)

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

Music mashing with YouTube, YQL and Open Data Tables

(...)Grab the top 20 chart singles from the BBC web site, look up each song on YouTube and get the most popular matching videos. Show them in the chromeless player and set it so that they play automatically and users can skip ones they don’t like.(...)

http://www.bassett-jones.com/music-mashing-with-youtube-yql-and-open-data-tables/

Making a Sleek Feed Widget With YQL, jQuery & CSS3

(...)You will be surprised at how much data is made available on the web through RSS or ATOM feeds – twitter searches, your latest diggs, Google Search alerts, your own blog categories and so much more. You just have to look for that orange icon and you’ll surely find a lot more precious data, just waiting to be put into use.

Today we are making a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You can set it up to show the latest posts from the different categories of your blog, your latest stumbles, or even people mentioning you on twitter.(...)
http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/

Javascript Closures

An explaination from Mozilla site

(...)Closures are often considered an advanced feature in JavaScript, but understanding them is essential to mastering the language.(...)
https://developer.mozilla.org/en/JavaScript/Guide/Closures

Event Pooling in Javascript

(...)Managing Complexity in the UI

As everyone knows, the more dependencies you have in a system, the harder maintaining that system is. Javascript is no exception- and orchestrating actions across complex user interfaces can be a nightmare if not done properly.



Luckily, there’s a great pattern for orchestrating complex interaction in a disconnected way. No, it’s not the Observer pattern. It’s a take on the Observer pattern called Event Pooling which is a piece of cake with jQuery’s bind and trigger functions. For the get to the code folks, here’s an example of using jQuery’s bind and trigger for event pooling.
(...)
http://www.michaelhamrah.com/blog/2008/12/event-pooling-with-jquery-using-bind-and-trigger-managing-complex-javascript/

Routing in Javascript

(...)route.js is the smallest, easiest way to create stateful navigation based on unique ... route.js doesn't impose any other libraries or formats, handlers are ...
(...)route.js




Indeed, it' is a very nice piece of work
Here is a little example

<!DOCTYPE>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/route.js" type="text/javascript"></script>
    <script>

        var nbrLoadedPages = 0;
        var pageNames = [];

        var staticPages = { "accueil": "Pages/accueil.htm",
                            "gestion": "Pages/gestion.htm",
                            "admin": "Pages/admin.htm"
                          };     
        var pages = {}


        displayPage = function (p) {
            var np = p.param
            if (pages[np]) {
                $("#page").html(pages[p.param]);
                return false;
            }          
        }


        setupRoutes = function () {
            route('#/page/:param').bind(displayPage);            
        }

        setupRouting = function () {
            setupRoutes();
            hashObject = {};
            hashObject._hashchange_last = '';
            hashObject._onhashchange = function () {
                if (hashObject._hashchange_last != location.hash) {
                    hashObject._hashchange_last = location.hash;
                    route(location.hash).run();
                }
            }
            setInterval(function () { hashObject._onhashchange(); }, 50);
        }

        
        initPages = function () {
            for (var key in staticPages) {
                if (staticPages.hasOwnProperty(key)) {
                    pages[key] = null;
                } 
            }
        }

        loadPages = function () {
            $.each(pages, function (k) {
                $.get(staticPages[k], (function (r) { pages[k] = r; nbrLoadedPages += 1; }));
            });
            checkLoading = setInterval(checkIfLoaded, 50);
        }

        checkIfLoaded = function () {
            if (nbrLoadedPages < staticPages.length) {
                // Waiting...
            }
            else {
                $("#main").css("display", "block");
                clearInterval(checkLoading);
                setupRouting();
            }
        }


        $(document).ready(function () {
            initPages();
            loadPages();
        });
    </script>
</head>
<body>
    <div id="log">
    </div>
    <div id="main" style="display: none">
        <center>
            <div>
                <h1>
                    <a href="#/page/accueil">Accueil</a> 
                    <a href="#/page/gestion">Gestion</a> 
                    <a href="#/page/admin">Administration</a>                       
                </h1>
            </div>
        </center>
        <div id="page" />
    </div>
</body>
</html>

corMVC: An jQuery-based MVC Framework

(...)corMVC stands for “client-only-required” Model-View-Controller and that means it does not depend on specific server-side technology. In case you want to demo something, it would be perfect if everything can be done on client side. Of course, you can save changes or load data from server (via Model) as the general illustration below(...)

http://javascriptly.com/2009/12/coremvc-an-jquery-based-mvc-framework/

Convert Form Elements to JavaScript Object Literals with jQuery formParams Plugin

See how easy it is to retrieve data form a form element

http://jupiterjs.com/news/creating-a-javascriptmvc-slider#news/convert-form-elements-to-javascript-object-literals-with-jquery-formparams-plugin

Ajax Fixtures Plugin for jQuery

When devolopping web client applications, il can be tedious to rely on server to get the data in response to a javascript request.
This plugin allows to send customs responses by overriding '$.ajax'.

'abolutely indispensable'

http://jupiterjs.com/news/creating-a-javascriptmvc-slider#news/ajax-fixtures-plugin-for-jquery

JavaScript MVC jQuery

We all know JQuery an how effective it is.
But it also true that building a maintenable, testable and extensible application using JQuery only can become a mess.
The plugin MVC developped by David Pirek allows to easily create decoupled applications.
Of course the are other great frameworks, but i have to say this one i very amazing compared to it's size

http://www.davidpirek.com/blog/javascript-mvc-jquery-based-framework-is-here

Test it

A beginner’s guide for consuming a WCF service in JavaScript using ASP.NET AJAX

Great article and very well explained, it just works

http://www.codeproject.com/KB/aspnet/wcfinjavascript.aspx?msg=3433363

Great Javascript coding tools

Although there are many tools to avoid coding directly in javascript (GWT, WebSharper,Pyjamas...)
there are also many great tools which help developping 'clean' code in Javacsript, among of them :
(apart from JQuery of course, well the term 'clean' is perhaps less appropriate for it)

- Angular.js
- KnockOut.js
- Sammy.js
- Mochikit
- Mootools
- JS.Class

Give them an eye it really worth it

Settin up Pyjamas GWT for Python

Setting Pyjamas

JavaScript IS Object Oriented Programming

The simplest and clearest explanation of Object Programming in Javascript
http://weblog.bocoup.com/javascript-is-object-oriented-programming