Mobile-Web-App

Wednesday, August 13, 2014

Chrome Dev Editor (developer preview) - tool for building apps on Chrome platform

Chrome Dev Editor (CDE) is a developer tool for building apps on the Chrome platform - Chrome Apps and Web Apps, in JavaScript or Dart. CDE is built as a Chrome App written in Dart and uses Polymer. CDE runs on Windows, Mac, Linux, and Chrome OS! CDE supports Git, Polymer, and mobile development.

Install Chrome Dev Editor (developer preview) from Chrome Web Store.

Check out the video from Google I/O 2014 about building apps on the Chrome platform and how Chrome Dev Editor (CDE) is build.

Thursday, August 7, 2014

Node.js Tutorial with Ryan Dahl, creator of Node.js

Wednesday, July 16, 2014

Node.js example - retrieve dir and base using path module

The "path" module contains utilities for handling and transforming file paths.

Example to using path module:

var http = require("http");
var path = require("path");
 
http.createServer(function(request, response){
 
 var dirname = path.dirname(decodeURI(request.url));
 var basename = path.basename(decodeURI(request.url));
 
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.write("Hello World! \n");
 response.write("from mobile-web-app.blogspot.com \n");
 
 response.write("dirname: " + dirname + "\n");
 response.write("basename: " + basename + "\n");
 
 response.end();
}).listen(8888);

Friday, June 27, 2014

Example of Javascript String comparison

Example of Javascript String comparison:

<html>
<body>
<script>
console.log("mobile-web-app Javascript String comparison");
var result1 = 'abc'===new String('abc');
var result2 = 'abc'===new String('abc').toString();
var result3 = 'abc'== new String('abc');
var result4 = 'abc'== new String('abc').toString();

console.log("'abc'===new String('abc') : " + result1);
console.log("'abc'===new String('abc').toString() : " + result2);
console.log("'abc'== new String('abc') : " + result3);
console.log("'abc'== new String('abc').toString() : " + result4);
</script>

</body>
</html>

Thursday, June 19, 2014

Polymer: making Web Components accessible

Custom elements allow you to create your own encapsulated components on the web, however there are a number of questions that arise from this. How do you build elements that are accessible to everyone? Can they be navigated with a keyboard? How well do they work with screenreaders and ARIA? Learn how to create accessible elements that all your users can benefit from.

Wednesday, June 18, 2014

Polymer: Interacting with Google Services with HTML only

Google has over 250 APIs and services. Every API is different! Eric Bidelman shows you how you can interact with Google services without writing code!

Tuesday, June 17, 2014

Node.js + socket.io, emit events between server and client, bi-directionally.

server.js

var serverapp = require('http').createServer(handler);
var io = require('socket.io').listen(serverapp);
var fs = require('fs');

serverapp.listen(8888);

function handler (req, res) {
    fs.readFile("page.html",
        function (err, data) {
            if (err) {
                throw err; 
            }
            res.writeHead(200);
            res.end(data);
        });
}

io.sockets.on("connection", function (socket) {
    socket.on("event_button_clicked", function (data) {
        console.log(data.text);
        io.sockets.emit("event_upatetext", { value: "hello " + data.text});
    });
});

page.html

<html>
<head></head>
<body>
<h1>Hello World!</h1>
<p>from mobile-web-app.blogspot.com</p>

<form action="">
<input 
    type="text" id="intext"><br>
<input 
    type="button" 
    id="button1" 
    value="Click ME" 
    onclick="button_clicked(this);">
</form>
<p id="outtext"></p>

<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect(document.location.href);

function button_clicked(button)
{
    socket.emit(
        "event_button_clicked", 
        { text: document.getElementById("intext").value });
}

socket.on("event_upatetext", function (data) {
    console.log("event_upatetext" + ": " + data.value);
    document.getElementById("outtext").innerHTML = data.value;
});
</script>

</body>
</html>