Web-Services recapitulate

Now days most of the apps are using WebServices and the good thing is we all know what it is :)

Just adding some notes from my side on things like SOAP, REST and ......., and what? is there anything else do we have in the name of WebService.. really?

Few days ago, a guy who have experience of more then a decade came to me and told me to integrate WebService in an app. I simply asked for WebService summary which I think an usual question while we start working on something. He said to take the reference from an existing website which he pretended that using the same. First I did't get what he wanted to tell but, his steps just gave me heart attack. He just went to Chrome, opened the Website, right clicked for the Inspect element option and while logging in to that website he monitored the Network and said look here is the WebServices just replicate it in your app. After his statement I thought is it worth to ask something anymore?

Okey, letz do a quick recap on what we know:

1. Charles, Yet simplest tool to monitor a WebService request from an iOS and Mac environment
2. Each and every resource request to an URI is not a WebService.
3. One is SOAP and the rest is REST, why do extensive debate
4. SOAP is XML based definitive object access WebService protocol made for rich guys :)
5. OAUTH is a two tear authorization framework, ie 

iOS + WS 

1. Avoid using 3rd party wrappers like ASIHTTP for networking without exploring them
2. NSURLRequest + NSURLConnection are not an evil
3. Use event driven APIs
4. Reachability is our friend
5. Don't put sync requests on main thread
6. Your app UI should reflect network reality 
7. Be prepared for speed latency and packet loss
8. Be prepared for no network and host not reachable conditions
9. Always code for insecure connection, use end to end security 
10. Minimize use of network connections, keep in mind that we also have push notifications 

PHP + WS

1. Always think above $_POST, $_GET, $_REQUEST, $_FILE they are just to help you 
2. Use and read headers generously
3. php://input thats what you need 
4. Don't forget your buddy "MIME types"
5. Be prepared for Trojan and Injunction
6. PHP is more related to network, explore its low level possibilities
7. Take authorization and content distribution seriously

JS + WS

1. Don't misuse client network and resources :|
2. Just enjoy with JSON, sometime XML and leave it all for server side :)

Simple JS minification tool

ONLINE TOOL URL
http://closure-compiler.appspot.com/home



SAMPLE CODE
// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name default.js

// ==/ClosureCompiler==

// ADD YOUR CODE HERE
function hello(name) {
alert('Hello, ' + name);
}
hello('New user');



TO INCLUDE EXTERNAL FILE
add following code with the full path to the files

// @code_url https://dl.dropbox.com/u/37581115/.js
// @code_url https://dl.dropbox.com/u/37581115/.js

JS keyboard shortcuts library

Keymaster (keymaster.js) is a simple micro-library for defining and dispatching keyboard shortcuts with no dependencies on any other framework. Usage is so simple just include keymaster.min.js in your web app, by loading it as usual and write your shortcuts with modifiers like ⇧, shift, option, ⌥, alt, ctrl, control, command, and ⌘., for example;

Sencha Touch

Sencha Touch is a full mobile JS library, along with widgets, animations and all sort of utilities for mobile html5 development.

Sprite3D or 3D HTML5

I think we can say 3D-HTML ;) because Sprite3D wraps HTML elements with the necessary behaviors to easily control their 3D-position using a simple JavaScript syntax. It gives AS3-style properties and derivative support, Lots of accessory methods with a basic support for sprite sheets. Sadly Sprite3D is only limited to chrome browser yet.

Official URI: http://minimal.be/lab/Sprite3D/

FlyJSONP

FlyJSONP is a small JavaScript library, 2.38KB (1.13KB gzipped), that allows you to do cross-domain GET and POST requests with remote services that support JSONP, and get a JSON response.

Official URI : http://alotaiba.github.com/FlyJSONP/ 
Demo : http://alotaiba.github.com/FlyJSONP/#!/demo

{LESS} for CSS

LESS is an amazing little tool which helps to minify your CSS by using some JS stuff, it extends CSS with the addition of variables, mixins, operations and nested rules, this means you can write code very quickly.

knockout.js

knockout.js: A pure lightweight JavaScript library that simplifies the creation of dynamic user interfaces by MVVM (Model-View-View Model) architecture with cross browsers support. (something similar like Mustache.js)

JS Fiddle

Suppose you want to test a JS snippet and test it, then all you have to do are; create a HTML page then write stuff on it then run it on a browser such a boring and long phenomena and these type of junk page we lost them almost in our huge file base and after a longtime when you really need this code or you want to share with you friend then you have to do a huge search to find that file..... get rid from all this with JSFiddle.

Mustache.js

 Mustache.js is KISS(keep it simple stupid) Logic-less template engine quite useful when writing web applications.

WebSocket in HTML5

HTML5 provides a new thing called a WebSocket. Now data can flow between the browser and server without having to send HTTP headers until the connection is broken down again. Welcome to the world of PUSH technology!

What is Websocket?
WebSocket is bi-directional (full-duplex) communication channel over a single TCP (Transmission Control Protocol) socket for client or server application... goes too much technical, ok then
WebSockets opens a connection to a server and the connection stays open until you decide to close it. From there, you can start sending messages from the browser to the server and you can define a callback function for when the server send data back. Basically we got rid of each time new request for server.

Google Code Prettify

It is a truly better and easier way for syntax highlighting of code snippets in a web page with good cross-browser support. It contains a Theme based Customizable CSS file which you can chose from its gallery of theme and a Javascript module file that allows syntax highlighting of source code snippets in an html page. It is also light weighted and have basic support to all  C (and friends), Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles languages (because of commenting conventions, doesn't work on Smalltalk, or CAML-like languages), and we don't need to specify the language. Apart this for Clojure, CSS, Go, Haskell, Lua, OCAML, SML, F#, Nemerle, Protocol Buffers, Scala, SQL, TeX, LaTeX, VHDL, Visual Basic, WikiText, XQuery, and YAML. it have an extensible language handlers for other languages in such case you can specify the language.

Cross site AJAX request

For cross site AJAX request we need following headers in host site:


Access-Control-Allow-Origin : http://example1.com, http://example2.com, ..
( it is necessary to mention requesting sites reference for localhost we can use http://127.0.0.1 and to grant access to all sites we can also use * )
 
Access-Control-Allow-Headers : Header1, Header2, ..
(we need to mention the permissions for headers send by other site)

Access-Control-Allow-Methods : POST, OPTIONS, ..(we also need to mention Request methods supported by our site for other sites GET is by default open)

SOAP

SOAP is a simple and extensible schema(or format) of XML information exchange over HTTP, it is used for communication between applications. SOAP stands for Simple Object Access Protocol.
A SOAP XML should have an Envelope (that is root element of a SOAP message), Header, Body and Fault element that identifies the document is SOAP message.

Introduction to PhoneGap

What is PhoneGap?
It is a bridge platform between browser of a device and native control of device, it is based on advantage that every mobile operating system provides a Web View interface for its application like UIVewView in iOS.

Ripple Emulator

About Ripple Emulator

A browser plugin emulator to test and debug your HTML5 mobile applications for smartphone like Android, iOS, Blackberry.

It also supports multiple platforms like WAC, PhoneGap, WebWorks, Mobile Web, Opera and Vodafone.

Some of device features are also supported by Ripple Emulator, we can test Orientation, Accelerometer, Network Settings and Geo Location, apart that we can get the status of Audio and Video playback.  
All from within your Google Chrome browser and in a fraction of the time.

JavaScript Tutorial Websites

1. Mozilla Developer Network
The MDN has become the de facto resource for JavaScript documentation, and is an excellent resource for beginners and seasoned developers alike.


2. JQAPI
JQAPI is an alternative to the official jQuery.com API documentation.


3. JS Fiddle
JS Fiddle is a JavaScript pastebin on steroids. Create, share, execute and test your JavaScript right in the browser. This is a great tool for collaborative debugging or for sharing code snippets. It's also a fun way to perform quick experiments and test out new ideas. Simply combine your JavaScript, HTML and CSS, then click the "Run" button to see the results. You can also validate your JavaScript code against JSLint and save your Fiddle for use later, or share with others. JS Fiddle provides a number of useful features, like the ability to load up common frameworks automatically (to test your jQuery or MooTools code, for example) and as-you-type syntax highlighting, just like you'd get by writing code in your favorite IDE.


4. Eloquent JavaScript
This free ebook is an introduction to programming and the JavaScript language, the book reads much like a tutorial, and introduces a number of concepts and real-world applications in a clean, concise style. Interactive examples are also available, which means you can read about various techniques.

5. Douglas Crockford's JavaScript Videos
An undisputed expert in JavaScript, Douglas Crockford is Yahoo's JavaScript architect and is one of the individuals instrumental in the planning, development and future growth of the language.


6. How To Node
NodeJS is one of the web's most popular server-side JavaScript frameworks. This community-driven site offers an excellent repository of Node tutorials that's proven itself useful on a number of occasions. No Node developer toolkit would be complete without it.


7. DailyJS
DailyJS is a popular JavaScript-focused blog that brings you the latest and greatest JavaScript news, offers tips and techniques, and reviews libraries, plug-ins and services for JavaScript developers.

Are you sure you want to navigate away from this page?

function closeIt()
{
return "Custom Message \n" +
" \n" +
" It is a PRANK ;) \n" +
" \n";
}
window.onbeforeunload = closeIt;

JSONP vs JSON

nothing much more, just proposed a cleaner way to get data objects (and other things) from the external domain (Like RSS, Atom).

Javascript function for getting page elements by their attribute

function getElementsByAttribute(TagName,Attribute,Value)
{
var oElm = document.body;var oCurrent;var oAttribute;var arrReturnElements = new Array();
var arrElements = (TagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(TagName);
var oAttributeValue = (typeof Value != "undefined")? new RegExp("(^|\\s)" + Value + "(\\s|$)") : null;
for(var i=0; i 0)if(typeof Value == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute)))arrReturnElements.push(oCurrent);}
return arrReturnElements;
}