Diary of a Developer

Saturday, April 16, 2016

Give it five minutes

Did you learn anything today? You might have learnt something that is good or bad, useful or useless, or learnt some stuff that could help you in your day to day job. Today I came across this wonderful article written by Jason Fried who talked about giving some time to think about something instead of immediately pushing it back. Read this article to understand what that means!

Sunday, April 3, 2016

HTML5 template tag. - And also the script tag with type as text/template.

MDN Definition of template tag says The HTML template tag <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but subsequently be instantiated during runtime using JavaScript.

Read from this blog, http://www.html5rocks.com/en/tutorials/webcomponents/template/, on how to use and access the template tag contents.

Also the script tag with type as text/template works the same way:

By setting the type to "text/template", it's not a script that the browser can understand, and so the browser will simply ignore it. This allows you to put anything in there, which can then be extracted later and used by a templating library to generate HTML snippets.

<!doctype html>
<head>
<head>
<script>
window.onload=function(){
    document.getElementById('targetDiv').innerHTML = document.getElementById('hiddenTemplate').textContent;
};
</script>
</head>
<body>
<script id="hiddenTemplate" type="text/template">
    Type something: <input type="text" id="mailbox" />
    <button id="postMsgBtn">Send this message to main window</button>
    <div id="msg"></div>
</script>

<div id="targetDiv"></div>
</body>
</html>

HTML5 window.postMessage - communication between windows/frames hosted on different domains

window.postMessage allows safe communication between windows/frames hosted on different domains.

Concept is simple: Post a message from one window (origin) or another window (target) and check for any message received in the target window.

An example:

<!doctype html>
<html>
<head>

<script>
window.onload=function(){

    var iframeNode = document.getElementById("iframe");
    var iframe = iframeNode.contentWindow;
    iframe.document.body.innerHTML = document.getElementById('hiddenTemplate').textContent;

    var parentButtonNode = document.getElementById("postMsgBtn");
    var childButtonNode = iframe.document.getElementById("postMsgBtn");
    
    //  Post a message from main window to the iframe
    parentButtonNode.addEventListener('click',function(){
        iframe.postMessage(document.getElementById("mailbox").value, "http://localhost");       
    });

    //  Post a message from iframe to the main window
    childButtonNode.addEventListener('click',function(){
        iframe.parent.postMessage(iframe.document.getElementById("mailbox").value, "http://localhost");       
    });

    //  Check in main window if you received a message from iframe
    window.addEventListener('message', function(event) {
        if (event.origin !== "http://localhost"){
            return;
        }
        document.getElementById("msg").innerHTML = "Received this from iframe<span style='color:red;'>: " + event.data + "</span>";
    });

    //  Check in iframe if you received a message from main window
    iframe.addEventListener('message', function(event) {
        if (event.origin !== "http://localhost"){
            return;
        }
        var msgNode = iframe.document.getElementById("msg");
        msgNode.innerHTML = "Received this from main window<span style='color:red;'>: " + event.data + "</span>";
    });
}
</script>
</head>
<body>

<!-- hidden HTML template that will be used inside iframe -->
<script id="hiddenTemplate" type="text/template">
    Type something: <input type="text" id="mailbox" />
    <button id="postMsgBtn">Send this message to main window</button>
    <div id="msg"></div>
</script>

<!-- iframe and it's content -->
<iframe id="iframe" src="about:blank" width="600px"></iframe>

<!-- Main page content -->
Type something: <input type="text" id="mailbox" />
<button id="postMsgBtn">Send this message to iframe</button>
<div id="msg"></div>

</body>
</html>

References:

http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

http://jsfiddle.net/phusick/H7Zh8/

Sunday, March 13, 2016

Dojo define() Vs require()

This is the simplest explanation that I come across that explained the differences between dojo define() and require(){

http://g00glen00b.be/dojo-require-vs-define/

Tuesday, March 1, 2016

NodeJS for Beginners

I come across the following site where it was explained in simple about node, node custom modules, making database connection from a node module, etc. A must read...

http://code.tutsplus.com/tutorials/nodejs-for-beginners--net-26314

Monday, February 29, 2016

NodeJS and PhoneGap

Phonegap is a client-side solution only with JavaScript/CSS/HTML running on the browser-app of the phone. The JavaScript Phonegap API talks to the native phone interface and browser interface which gives you options to work natively and as a normal web page would with enhanced permissions. Node.js would only serve you as a data connection for JSON or whatever else you would need to pull/push with a network call.

Reference: http://stackoverflow.com/questions/14513029/phonegap-with-node-js

Wednesday, February 3, 2016

CSS: Elements do not expand to contain floated children by default

Elements do not expand to contain floated children by default.

There are a number of workarounds, such as floating the parent, using a clearfix or adding overflow: hidden to the parent.