Sunday, July 6, 2014

Progressive Enhancement: start web development the right way...

Hay there, I've been working on a web based project and I came across this word recently: "Progressive Enhancement". Never heard of that before; but for me, it's never too let to learn if it can give you a better deliverance and get you some "extra money" only because you're following a correct path.
So 'Progressive Enhancement' is a web development strategy that ensures your website works and "doesn't fail" if some creepy user agent accesses it.

What we actually do under the suggested strategy is: we first try to develop our website targeting a demographic that has minimal support of technologies and tools available (you can decide how much you want to cover) so that we get our basic foundation is prepared. Doing this we can assure that our web app won't break for a large range of demographic. Now we can keep adding rings and bells to our app for better UI / UX / Functionality.

This is considered as a better approach in web development.


Collecting every possible thing on this particular topic, I came up with a summery I'm gonna write here:

When it comes to web development the most difficult thing is: "you can't predict what user agent will be using your website". When that's the problem, we are in a situation when we need to look for a foundation to our website. You need to choose your baseline till where your website won't break.

StatCounter shows browser usage in India, W3Schools shows worldwide usage of browsers and we have good percent of evil browsers also. No matter what, we've been developing HTML, CSS, ES to a new level but what if the user client doesn't support those new and awesome features?
Website will break.
It simply won't work, and that is so not a good impression in business.
But there is another aspect of this situation when there will be people like in this article of 'Brad Frost' and they won't care about:

  1. BlackBerries
  2. Windows Phones
  3. Poor people
  4. Androids
  5. IE8
  6. IE7
  7. Definitely IE6
  8. Colorblind people
  9. 7″ tablets
  10. Firefox
  11. Screen readers
  12. Opera Mini
  13. e-ink Kindles
  14. Kindle Fires
  15. Nokias
  16. non-JS users
  17. Sony PSPs
  18. Touch users
  19. Keyboard users
  20. Foreign language people
because they might think:

  1. Those people aren't our target demographic
  2. Nobody browses the Web on those devices
  3. No one would ever do this from their [outdated/clunky/quirky] device
  4. It would cost too much to support them
  5. Nobody disables JavaScript
  6. They should just upgrade their browser
  7. Nobody holds their device that way
  8. They can’t afford our products anyways
but you can see what he told them :) .

So one way or another if you are targeting a market you'll have to consider that tiny market because there can be people ready to give you money, but they simply want to use their clunky device to access your website. What's wrong in it?

There has been an incident with the same guy 'Brad Frost', he said "When I was inherited some Nike mobile site projects, I was looking through analytic and noticed a significant amount of traffic coming from 'Sony PSPs'." See!!! You never know who's gonna give you money. So better be ready to suck money from everywhere. 

Sunday, June 22, 2014

Hack: Follow all Recruiters at naukri.com :P

if you ever come across this page:

Copy and paste this script in console: fbtn = document.querySelectorAll(".blBtn.fuBtn.fl") for(var i=0; i<fbtn.length; i++){fbtn[i].click();}

to follow all.

Wednesday, June 11, 2014

Best companies in Bangalore

 Strategy for Job seeking what I prefer is classy. Lot many students just out from college think: "Man!! I'm getting a job and money what else matters?" If you feel the same way, Go for it or else keep reading. I prefer hunting... read more

Tuesday, February 18, 2014

Push Notifications using nodeJS and socketIO from MongoDB

Hay there, I'm writing a tutorial to get started with "How to make NodeJS talk to your MongoDB?"
There is already a step by step procedure on my blog to follow, for "How to make NodeJS talk to your FileSystem?"
Without wasting so much time Hello printing in console using node, we'll take it to the real thing but before that I'd like to make you believe that this thing is gonna work. If there is no trust issue, you can directly start coding but if you doubt every tutorial 'to be wasteful' like I do: Download this,  follow readme.txt and come back leaving your trust issues behind.
Lots of talk!!
Let's code now:

  • We'll first initiate the app on Client (browser). Open an Editor and write 'package.json':

// We need 'mongodb' and 'socketio' for our current need, so we'll write them as dependencies.
// after writing this save it as 'package.json'. run 'npm install'. 
// This will install all dependencies written in 'package.json'.

{

    "name": "push-server",

    "version": "0.0.0",
    "description": "talks bw node and mongo",
    "dependencies": {
        "socket.io": "latest",
        "mongodb": "latest"
    },
    "author": "Mayank Dixit"
}

  •  open a new file for 'index.html' and write anything like:

<html>

  <head>

    <title>Push notification server</title>
  </head>
  <body>
    <time></time>
    <div id="container">TEST Push Notification</div>
  </body>
</html>
  • Here we need a client side socket. So we'll modify our 'index.html' code a little:
 <!-- include these scripts in web page: code: -->
    <script src="socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

 <!-- We'll make a container who's gonna receive updates: -->
    <div id="container">TEST Push Notification</div>

 <!-- Then we'll make a script on client: -->
  <script>
// Create a client socket:
      var socket = io.connect('http://localhost');

// Apply a listener on socket: 
// on seeing 'notification' on socket : catch what is written in 'data' var. and proceed: 
// while sending data from node server we'll specify that: "It's a 'notification' written on socket"
      socket.on('notification', function (data) {
        console.log(data)
        $('#container').append("<br/>"+data.message);
      });
    </script>

  • Finally we get to write server side script:
  • open a new file for 'push-server.js' and start writing:
// create a server whose callback is function: 'handler'
var app = require('http').createServer(handler),

// create a socket reference for this 'app' that listens for this 'node server'
io = require('socket.io').listen(app),

// create a reference to fileserver
fs = require('fs');

// listen this node server on port: 8000
app.listen(8000);

// callback function for creating http server:
// it receives request, and response in params
function handler(req, res) {

// read: file named 'index.html' in current directory (__dirname refers current directory in node)
  fs.readFile(__dirname + '/index.html', function(err, data) {

// on error do this:
    if (err) {
      console.log(err);
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
// if control comes here that means there is no error so set writing head and end response with write data
    res.writeHead(200);
    res.end(data);
  });
}

// this has been enough for taking care of client side first load
// now it comes to create a socket on server that listens if any connection is made to our app:

var mdsok;

// here we say: on 'connection' being made to the server this socket listens to; catch the reference to
// client's socket and refer it to a global var. so that it might be used further 
// while watching database changes 

io.sockets.on('connection', function(socket) { 
    mdsok = socket; 
    console.log('++++++'); 
});

// after setting up code for client side and creating a listener to incoming requests on 8000 port.
// it comes to creating a database connection and listen every changes in particular collection

// you can choose any method to connect to your mongo database
// I prefer using MongoClient:
var MongoClient = require('mongodb').MongoClient;
MongoClient.connect('mongodb://127.0.0.1:27017/test', function(err, db) {
if(err) { throw err; }

// if no error get reference to colelction named: 'notifications'
db.collection('notifications', function(err, collection){
if(err) { throw err; }

// if no error apply a find() and get reference to doc
collection.find().sort({ $natural: -1 }).limit(1).nextObject(function(err, doc) {
      if(err) { throw err; }

//  using tailable cursor get reference to our very first doc
      var query = { _id: { $gt: doc._id } };
      var options = { tailable: true, awaitdata: true, numberOfRetries: -1 };
      var cursor = collection.find(query, options).sort({ $natural: 1 });

// This function will take cursor to next doc from current as soon as 'notifications' database is updated
      function next() {
      cursor.nextObject(function(err, message) {
      if (err) throw err;
      console.log(message.message);
mdsok.volatile.emit('notification', message);
          next();
        });
      }
// what you need to do is: call it first time
      next();
    });
});
});


  • After putting this much effort on copy-paste, now you are ready to test your brand new push notification application.
  • you may need to use your Terminal to do some work-around.
  • Ok so here is the thing: you can't run your JS file yet. You'll need database (named test) and collection (named notifications) in your mongo
  • so open current dir. in terminal and run 'mongo'. now run these:
use test

db.createCollection('noifications', {capped: true, size: 100000})

db.notifications.insert({message: "lets start fun!!"})

  • Now your JS app is ready to run
  • open another terminal > navigate to current dir. and run 'node push-server.js'
  • it will run and activate socket.
  • now open your browser and access 'localhost:8000' you'll see your first welcome line.
  • now insert data / document in your 'notifications' collection and see it updating your browser window (using same insert query above).
  • Target Achieved!!!
  • Please comment. Cheers!!!