AngelHack Mumbai

AngelHack Mumbai is going on at prestigious Bombay Exchange India and will end up on Sunday May 16. Students, Start up enthusiasts ,representatives from IBM Blue Mix, HP havenondemand ,Zone Start ups and Amazon web services have gave up their precious weekends and  are participating in this hackathon.

The hackathon kicked off with a note from Ratish Narayan , the Angelhack representative and then wannabe team members explaining their skill sets, participants with ideas pitching for teams.

We had an impressive session from IBM Bluemix representative on how to make an app live in seconds and various services and apis provided by it.

It is followed by HP haven representative explaining wonderful hp haven services like face recognition ,image to text conversion and so on.

Then aws representative took over from there explainig how scalable and highly popular apps like freecharge are build over amazon web services and how do it.

Three startups from zone have announced some of their problem statements and their services 

pykih a cool data visualization start up from zone with their great analytics is also in run for competition.

Then the actual fun started with people finalizing their ideas and platforms. Evangelists from various platforms was helping developers in their short journey of building app.

Forget to mention food was at its best thanks to BSE for that with the perennial coffee and tea is keeping everyone awake over the night.

Some of the app ideas are interesting like intelligent apps which will go silent when you got to a classroom.

Let see who makes it too big tomorrow thats all from today ..

JAVA FX - The Forgotten hero

Why are we so moving into native applications in mobile area and web application for out desktops?
Facebook launched its popular mobile version but not bothered to launch a desktop app.

Similar questions were in my mind when I planned to build an application for my company internal competition where theme was log management. I decided to go for a desktop application.At start it was a joke as I am familiar with only Java and whether a  good technology which we can master is easily available.

Then we came to know about java fx a cross platform techonology where we can build desktop apps. It needs minimum java 7.
It got Screen builder where you can design screens similar to android apps which creates FXML its own tag languages,.
It also got css files where you can customize your styles.
We completed the app and have created good Gui with the help of java fx  and developed desktop application LOGON for log management

Responsive web design and development

RWD is the future of the web. Any web application which is not going responsive way misses large number of mobile and tablet users who are increasing day by day.So here I am going to discuss how to create a responsive site which suites your needs.

If you are planning to create simple layout website Grids plays a very important role in rwd  but they might not be as useful if you are building a very complex application. Any way we have got media queries in css which will help you develop rwd for any site.

Grid is your layout is chunked into proper ratio so the content will fit properly in different sizes.
Media queries are just css queries which will apply different css based on devise screen size . For example for desktop it applies different styles compared to mobile for the same class.
Through only css we create the magic and remember no new javascript is load based on size.

One can get confused by the variety of mobile resolutions we have now and how to support them all.
We have to code based on the device width and height and not its ppi(pixels per inch). For example iPhone and iPhone Retina has the same size and different ppi but it calls the web application with same size as device widths are same.

Normal break points can have at

1. Mobile - 240px -568px
2. Tablet - 568px -1024px
3. desktop 1024 px -2048px

 Best way to write  media queries because  we can edit all styles for minimal and override as we go increasing of width.

@media only screen and (min-width : 240px){

  // Mobile styles  

}

@media only screen and (min-width : 568px){

   // Tablet styles  

}

@media only screen and (min-width : 1024px){

// Desktop Styles

}

They are lot of frameworks for rwd in the market but best I found in usefulness are

1. Foundation
2. Bootstrap
3. Html Boiler Plate 

And if you need only grids the best out there are

1. 960 grid 
2. Pure from Yahoo 

IBM Blue MIX

Have you ever wondered if you can start building your idea with in  few hours ? Yes you can with IBM Bluemix , Be it Mobile app or web app , be it static or dynamic application its plugin features help you focus on your idea while it take care of hosting and other services your idea needs etc.
It got eclipse pluggin if you are java fan where you can start coding and host it lively too with just a click.There is option to deploy through console too.

These are the features it provides

1. IBM Watson Services
2. Mobile
3. Data Management
4. Business Analytics
5. DevOps
6. Security
7. Internet of things
8. IOS
9. Blue Mix Dedicated
10. Integration
11. Open Cloudd
12. Web apps

You can look into wide range of services here 

I have build my idea with ibm watson with in less than 20 hrs
These are the steps i have done

1. Registering ibm bluemix watson services ie,,m java liberty and ibm watson q and a service
2. Downloading sample code and eclipse pluggin and eclipse luna
3. Coding the backend for sending request and getting responses
4. Coding the frontend for receiving response and showing them.
5. Testing the changes  lively in the server by publishing them

There you go my idea is ready and live
doctoro

So start converting your ideas to apps to with by ibm bluemix.

D3 Data Driven Documents

I have always wondered seeing the power of SVG (Scalar Vector Graphics) in modern day web. It creates the wow effect automatically to all our digital apps with the flexibility it provides for our shapes and colors .But this svgs are difficult to handle. Be it creating them, playing with them and using them for our various daily problems. There are tools before and there are tools after today but D3 is extremely powerful in handling the SVG.

This D3 for SVG does same what jquery does for html DOM. It gives flexibility to create your own designs live and need not put constraints normal plug-gins do.All charts like pie, bar and node and the new charts you can envision can become live and amuse the customers,

And you can make your sites interesting with visualizations and make users happy. What more can you ask?

d3js.org
http://www.lynda.com/sdk/D3js-tutorials/Data-Visualization-D3js/162449-2.html

Circles.js

Circles from lugolabs is a cool plugin if you are looking to create stylish donut circles or circles with animations. Its configuration is pretty simple where you can specify circle width, radius ,custom class you can apply for text and the circle itself. I got a chance to use myself and in no time I was able to use this nice features.
It uses svg and also light library.

Configuration of Circles
 

var myCircle = Circles.create({
  id:           'circles-1', // Id for which you apply
  radius:       60, 
  value:        43,// Value shown at center
  maxValue:     100,
  width:        10,
  text:         function(value){return value + '%';},// Customizing text shwon
  colors:       ['#D3B6C6', '#4B253A'],
  duration:       400, // Animation Duration
  wrpClass:     'circles-wrp',// Class which wraps circle
  textClass:      'circles-text'// Class which wraps text
  styleWrapper: true,
  styleText:    true
});

Git link

Polymer

I have recently attended Google Dev Fest organized by Hyderabad chapter and got to know about this future tool.
If you like material design and looking to implement in your websites Polymer is the one you have to go.It got web components (create your own custom components) ,good library of  reusable elements and there is designer which helps you to drag and drop to create elements. 

With this implementing Google map is one tag away with this. And all its components are responsive so you need not write your own media queries for that if you use base components.

Its a little buggy now but I am sure you will get a good stable version in no time.