From: HTML5DevConf

Recently , i got a chance to attend html5devconf held in San Francisco. It was a enriching experience to share different thought of different Front-End Geeks. New technologies , New framework, New Libraires , HTML5 specs , State of HTML5 and lots of things were discussed . I analyzed most of them and here is snapshot of what i was able to grasp from Conference.

• HTML5 was hyped to a greater extent and we need to realize the reality , its pitfall, how to overcome the pitfall and right way to use it.
• SPA - Single Page Applications are better as compared to other form of web application , for browser support IE8+
• We should stop thinking about browser compatibility and should just focus on implementing feature in a clean and efficient way.[since most of browser coming with auto update feature, we need not to take care of this . It will be handled by respective browsers even IE(10)]
• Most of Front-end Developers are Jquery developers and this is bad trend for industry. On should lay focus on Naked Javascript as much as possible.
• Node.js is gaining lot of momentum due to its event based nature . Jquery/Javascript + Node.js + MongoDB is forming a nice benchmark for a wonderfull web application end to end.
• Lots of new framework and libraries are being developed in last few years(backbone.js, ember.js, canjs etc). All of them are great framework, but we should keep in mind the need of one application . 
• Many framework/libraries gets outdated(exception of JQuery) in time and we should be wise enough to choose these framework.
• A Developer should always prefer cleaner way of implementing MVC architecture in his/her web application. And best way to do so is work in native Javascipt and implement MVC with  that. It is always good to follow some design pattern for Model and Controller. Few recommended design pattern keeping inconsistent support of HTML5 is facade pattern.
• HTML is base of everything and using right HTML is very important
• CSS is often ignored , as developer believe it can be done by anyone. Reality is no web-application can be great without properly using CSS in efficient way. Try to be modular , it affect the performance of whole web application. 
• OOCSS and  SMACSS are few good places to learn nice CSS modularity for all developers.Sass should be considered .
• Most of presenter in a way or another refered to - http://docs.webplatform.org for efficiently learning and sharing knowledge in web domain.
• SPDY 2.0 will be base for HTTP2.0 with all features of HTTP1.1
•  Adobe is doing great stuff to help HTML5 community.
• Streaming data , will be future of new generation application especially for mobile devices(to mention some - web intent , web user media, web RTC, web midi, transferable objects etc)

• Cache is king - http://t.co/zqdijFIR
• Paul Irish - https://dl.dropbox.com/u/39519/talks/html5dc-workflow/index.html#1
• Build with HTML- https://s3.amazonaws.com/pubnub-demo/Stephen-Blum-Coding-HTML5DevConf.pdf
• Slides from Conference - https://docs.google.com/spreadsheet/ccc?key=0Apmc_N5PEhjtdHA0SlNTMWhIeXJPOXozM3dQRWFHS0E#gid=0
• Twitter Feed - https://twitter.com/search?q=%23html5devconf&src=typd

Enjoy:)

The Silent Monk - DMR

   DMR , Dennis M. Ritchie - father of C and UNIX passed away recently. World came to know about this through various medium such as twitter . I think he was not given his due on web after his death as compared to Steve Jobs demise , reason is simple both of them are totally different personality but complement each other pretty well. Jobs made things for any user but DMR  made it for technologist who went on inventing the Jobs's way.
             "Pretty much everything on the web uses those two things: C and UNIX,” Pike tells Wired. “The browsers are written in C. The UNIX kernel — that pretty much the entire Internet runs on — is written in C. Web servers are written in C, and if they’re not, they’re written in Java or C++, which are C derivatives, or Python or Ruby, which are implemented in C. And all of the network hardware running these programs I can almost guarantee were written in C."

He left behind a silent legacy which everyone would be directly or indirectly be using in times to come. We owe him in every respect, may his soul rest in peace . RIP .         

The Monk - who changed "thinking"!

     Yes , I am talking about Steve Jobs. 6th Oct , he died fighting cancer leaving behind his implacable legacy. I would not keep him into league of technocrats of century like Larry page, Bill Gates or Mark Zuckerberg but he created a league of his own - a league of "thinking differently". He is mostly admired for his vision , for his ideologies and his stubbornness .   Its easy to send troops to afghanistan and get Osama , but very difficult to change the way people thinks. And he has done exactly the same, simply changed the way people thinks. He made world realize that a innovation gets its due respect only when people know about it and love to use it .

     Talking about Tech Giants like IBM, HP, Microsoft, Oracle, Google and Facebook who has left a impending impression on world , Jobs's Apple stay apart . Apple taught people how to furnish and finish a product. Apple simply changed the way one looked at technology and software.

     Jobs was a fighter , every moment of his life he loved doing what he loved and connected dots from past. A true optimistic personality who taught world to look differently at technology. [His Stanford Commencement Speech] . One call a person stubborn if he remains adamant for a good cause and a person arrogant if he remains adamant for wrong cause.He surely belonged to first category and pursued it with all critics. This is what i admire the most about him. Apart from this , he never tried to be great with philanthropy or other activities just did what he loved to do.

     I learnt a lot from him and would continue to do so. I admit that he has influenced the way i think especially in past 2-3 years. I am more confident and am unafraid of failures . Steve, this is what you have done apart from building APPLE. RIP.

STAY HUNGRY , STAY FOOLISH. I will !

[This Post is personal not influenced by any employer or firm.]

Javascript On Server - I !

           Javascript is generally used to build web-applications. One can do whole lot of Front-End Stuff and give his/her application a interactive paradigm . Another aspect, can we do Javascript programming on backend or servers . Is event driven backend possible. Yes, Node.js is answer to all these question.
          In order to execute the JavaScript you intend to run in the backend, it needs to be interpreted and, well, executed. This is what Node.js does, by making use of Google's V8 VM, the same runtime environment for JavaScript that Google Chrome uses. Node.js is pretty good runtime enviornment coupled with usefull libraries. Javascript is pretty powerfull Event driven programming language.
          The “traditional” mode of web servers has always been one of the thread-based model. You launch Apache or any other web server and it starts receiving connections. When it receives a connection, it holds that connection open until it has performed the request for the page or whatever other transaction was sent. If it make take a few microseconds to retrieve a page from disk or write results to a database, the web server is blocking on that input/output operation. (This is referred to as “blocking I/O“.) To scale this type of web server, you need to launch additional copies of the server (referred to as “thread-based” because each copy typically requires another operating system thread).
              In contrast, Node.js uses an event-driven model where the web server accepts the request, spins it off to be handled, and then goes on to service the next web request. When the original request is completed, it gets back in the processing queue and when it reaches the front of the queue the results are sent back (or whatever the next action is). This model is highly efficient and scalable because the web server is basically always accepting requests because it’s not waiting for any read or write operations. (This is referred to as “non-blocking I/O” or “event-driven I/O“.)

Example :

• You use your web browser to make a request for “/index.html” on a Node.js web server.
• The Node server accepts your request and calls a function to retrieve that file from disk.
• While the Node server is waiting for the file to be retrieved, it services the next web request.
• When the file is retrieved, there is a callback function that is inserted in the Node servers queue.
• The Node server executes that function which in this case would render the “/index.html” page and send it back to your web browser.

     V8 is constantly pushing the boundaries in being one of the fastest dynamic language interpreters on the planet. I can't think of any other language that is being pushed for speed as aggressively as JavaScript is right now. In addition to that, node's I/O facilities are really light weight, bringing you as close to fully utilizing your system's full I/O capacities as possible. In Nutshell, Event-Driven Nature, Scalable and modular are the few traits by virtue of which Node.Js is much talked about these days.

PS: DOM is browser things and till now has got nothing to do with Node. (Some work going in this direction)

Go(d)ogle! Social War is ON!

                  With all buzz around, and after 2-3 days of twisting and turning with Google plus , i feel like coming back to it again and again. In any case i can't avoid it now. Obvious reasons ! i use google and gmail most of the  time and top black bar will keep reminding me of updates on plus. Pundits over HN ,reddit, techmeme , twitter and other forums discussing  and views are exchanged..as what's future of FB or plus, shortcomings , optimistic details , pessimistic details,etc. 

Advantage Google + :

• Google owns browser and can do a lot with that in future
• Data and users Google has(via gmail) is mammoth and more than that of FB
• Simple and Clean Website/Features (Great work)
• Mobile market - Anroid coaxed by google

Advantage Facebook:

• Already a huge population using it.
• Apps and Games 
• "I don't know".

              Vic Gundotra ,  Google's social czar and man behind plus  remarked - "We think people communicate in very rich ways," ... "The online tools we have to choose from give us very rigid services." . Vic  highlighted circles featured in plus, which promises to overcome possible privacy issues faced by people on FB. Google seems to have analysed its mistakes from wave and buzz and had provided its user with limited and scope of "options" . With plus unlike wave or buzz its not pushing anything onto its user , rather provide "options"  for same .Although , this could be a curse for noob internet guys and boon specially for geeks. Google has a  Panoply of services, and vision seems to be clear - " to make one stop solution for your internet(may be Search , mail, social, videos ) with one identity and for all devices".

                       Why people in India shifted from Orkut to Facebook?? One big answer to this - "FB was simple , easy, at the same time pretty powerfull when we talk about features ". Another reason be people like change , these were atleast my reasons to switch from Orkut to FB.  We can't judge from the failure of buzz and wave that plus will lie on same side of table . Talking about it globally , Badoo , Bebo , Cyworld ,  FriendFeed , Friendster , Hi5 , ibibo  , Jaiku , Myspace , Netlog , Orkut ,  StudiVZ ,  Tagged , Tribe.net , Tuenti  , Vkontakte , Whispurr are few minniows social networking portals . The main reason of rise of FB was simply the " robustness with simplicity" . Exception of Vkontakte , who's user base was limited to a particular region ,others were no match to FB. Now,   social war in on ! Google capable of taking on FB has arrived with plus and looks promising as of now . 

             Some recent happening around  Facebook - launch of "Awesome" , FB Circles . Are these out of desperation or  was it hunched..Google plus is still in its beta , a long way to go . Facebook already established on social front, will  leave no stone upturned to maintain its monopoly over social sphere. In nutshell , a interesting "social war" ahead , hope better wins.

          [ For those who are unaware, while both sound the same, the service each one provide is very different. You see, Google+ nee Google Plus works as a hub for all the new social-network services of Big G announced like sparks hangout, etc. Meanwhile, Google +1 works like Facebook Like which you can embed on your website and when your Gmail contacts +1 a certain page, you’ll be able to see their little avatar the next time you search Google – of course – when you’re logged in with your Gmail account.
         So far, Google Plus is still on its beta stage and no one knows when will Google release this to the public. Take note that once you are logged in with Plus, you’ll be able to do most of the things you can do on google like checking your email, images, shopping, etc. But of course, its focus are those circles from your friends and how you’ll be able to contact them.
          At this point, pundits aren’t sure what will be the future of this project. In the case of Google Plus One, its still comparable to David compared to the Goliath that was Facebook Like.]




PS: One personal reason why i would prefere G+ , is that it allows me to keep my name "only" Vishal unlike FB where i have to use palindrome of my first name i don't use second name :D

Cross Origin Resource Sharing - CORs

              With advancement of web , Ajax is playing an important role in most of website or web application . One of common restrictions is same -origin policy within browsers due to but obvious security reasons. What we mean by [violating same origin] or cross site request  - "Cross-site HTTP requests are HTTP requests for resources from a different domain ,different port, different sceheme than the domain of the resource making the request.  For instance, a resource loaded from Domain X (http://vvishal.com) such as an HTML web page, makes a request for a resource on Domain Y (http://vvishal.me)". 
Ref : https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript


             Web Developers had been trying work around for this by various means setting up proxies , server side proxies .  At this point of time community of developer outcried a native way of doing cross domain Ajax Request . Cross Origin Resource Sharing - CORS evolved at this point of time .Internet Explorer 8+, Firefox 3.5+, Safari 4+, and Chrome supports CORS , Opera till 10.63 was not suppoting CORS.


             In Simple terms , the basic idea of CORS is to modify HTTP headers from client and server side to enable communication between two. This makes server and client know about each other and recognize the needs , Success , Fail etc. Header plays an important role the handshake between client and server and the informations needed to be exchanged.


Read More:
- http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
- http://arunranga.com/examples/access-control/
- https://developer.mozilla.org/En/HTTP_access_control

Host your Website - Google app engine

      Google app engine provides environment to host your web-application . Essential steps involved in hosting a website -

    1. Buy a domain name with no hosting space to pay for.(ex- GoDaddy)
      Buying a domain is simple we can go to any website and buy a domain .

Ex- GoDaddy , here you can get discount also some coupon are available on net.

    2 .Upload and configure your web application(website here) on Google apps

      Web Hosting ! this is where google app engine comes to rescue . Follow few of below simple steps to upload/deploy your website on app engine.

1. Create app engine account, install python and download app engine sdk.  
2. On your machine create a folder  eg. MyWebsite (c:\MyWebsite).
3. Make a folder named static inside that eg. (C:\MyWebsite\static)
4. keep all your files to be uploaded inside "Static".
5. In "MyWebsite" we need to add a file app.yaml

Code to be written inside app.yaml

application: [Name of application , which you create on google app engine eg. Website]

version: 1

runtime: python

api_version: 1

handlers:

- url: (.*)/

  static_files: static\1/index.html

  upload: static/index.html

- url: /

  static_dir: static

Folder hire achy looks like this in genral case

- MyWebsite/

   -Static/

       -index.html

       -css/

       -JS/

       -images/

       -favicon.ico

   -app.yaml

      Once done with this on client side(i.e Your machine) , log in to google app engine and create simple application (eg Website). Now, we need to deploy our code on app engine . Open command line and type in simple command --appcfg.py --email=example@gmail.com update c:\MyWebsite/

Done ! now your website is hosted on google app engine and can be accessesed directly at 

url- http://[Your-Application name eg. Website].appspot.com/

    3. Management of Domain, Domain Mapping (as google app dosen't allow you to map to naked domain eg example.com, you may map to sub-domain though eg- test.example.com )

      Application is up and running but generally we want it to map to our domain eg. example.com .Since app engine dosen't allows that so we have to follow few workarounds to make it work as we wish. 

Domain Setting

Domain Verification-

   - Go to Google App engine Dashboard-> Your Application[eg. Website here]

   - Administration->Application Settings-> Add Domain 

   - Enter your Domain Name and follow registration process and Get domain registered.

   - Go To Google Apps for your domain name 

   - Login to dashboard

-  Go to Domain setting and check for domain registration etc. 

URL Mapping

- Browse to Service Setting, go to your app eg-Website here 

- Add new URL for your google app

- Here we can't map to naked domain like example.com

- So , as matter of practice we map it to www subdomain eg- http://[www].example.com

(as www.example.com is also a subdomain of example.com)

 
After this our website will be available at http://www.example.com and [your application name eg. website].appspot.com . Content available at subdomain http://www.example.com will not be available at naked domain http://example.com .

To make content available at http://example.com we need to redirect it to http://www.example.com. For this , we can use meta refresh but this is not a good practice . One of alternate solution is using header redirection. Generally, at domain provider we are given a small space of web hosting ,there we have to put a index.php file with following code inside it

header ("Location: http://www.example.com");

This solves our problem and our website gets redirected properly.So now the app/website is available at - 

- http://[Your application name].appspot.com

- http://www.example.com

- http://example.com

This is a simple way of keeping your domain name and web hosting a separate . Incured with flexibilities of Google App Engine, your website will be 99.9% up as claimed by Google.

Cheers!