Monday, April 28, 2014

Miscellaneous Responsive Meteor Development tips

Tip 1: On the iphone the responsive bootstrap forms zoom in when you enter text. If the input item (select, textarea & text) size is less than 16px, it zooms in to let user enter the text. But, it does not snap back after. This causes all sorts of problems when you change orientation.

The simple CSS fix for this was proposed by Christina Arasmo Beymer in SO. 
http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone/16255670#16255670

/*
  Disable auto zoom for iOS forms, which causes responsive issues
  on the phones
 */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 select:focus, textarea:focus, input:focus {
 font-size: 16px;
 background:#eee;
  }
 }


Tip 2: How do you test for iphone form factor when chrome does not allow you to reduce the width to less than 420px?? This nifty trick was proposed somewhere on the internets, but i am unable to find a reference to attribute.

    Dock the Google Inspector Tool to the right side of the screen, by holding the dock button down for a couple of seconds. It should show the Dock Right option.

Here is my iPhone-5 test bench which works very well:


Sunday, April 27, 2014

Meteor project with bootstrap-3

Recently have been dabbling in learning Meteor and doing a quick and dirty project to get my meteorjs development skills up to speed.

Check out the recently uploaded/deployed project:

http://devicebox.meteor.com

The code is in github if you are so inclined to clone the repository...

https://github.com/sunkay/device-safe.git

A great book to learn meteor is discover.meteor.com I personally found this book to be invaluable in jump starting learning the framework and some of its intricacies.

What I like most about Meteor (Meteorjs) framework:

  1. End to End framework to develop application quickly
  2. Integrated mongodb collections which are reactive
  3. Reactive Templates which automatically update when the underlying data changes
  4. Data Syncronization between the front-end and backend. The collection & template integration makes this very clean and powerful
  5. Latency Compensation - This is pretty cool, but I am still trying to figure out the performance characteristics of this...
I like developing in meteorjs framework so far. I have dabbled in Angularjs and looking back, I find developing in angularjs horrendous. The dependency injection model looks cool at first, but the code to accomplish it is absolutely effing complicated.