Friday, September 25, 2015

Handpicked JS CodePen

A few codepen caught my attention recently and my recent favorite one is

http://codepen.io/16octets/pen/BoaBZK


Others,

http://codepen.io/giana/pen/PqVbRr
http://codepen.io/dissimulate/pen/KrAwx (All time hit I believe and my all time favorite)



Saturday, April 11, 2015

Angular Performance tuning

An excellent article talking about how to approach AngularJS app performance optimization.

http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html

Tuesday, March 10, 2015

ionic framework crash start!

AngularJS has been popular MVC framework for SPA. There are alternatives like EmberJS or similar but AngularJS really kicked of pretty well and was well adapted by the community. ReactJS is posing challenge to all framework in the rendering area. But keep all those aside, if you want to build iOS and inclined to build Hybrid app using PhoneGap and comfortable AngularJS, then ionic is natural choice. Without getting in to conversation if you want to build native app on iOS or not and WebUI performance issues, UX etc, I shall quickly jump in to quick start.


When I started developing front end apps, first thing I made sure to incorporate was yeoman. I could use community generators or I could create something for myself to standardized templates.

Install yeoman - straight forward

sudo npm install -g yo

Install grunt
sudo npm install -g grunt-cli

Install ionic-cli
sudo npm install -g ionic

Install yeoman generator for ionic
sudo npm install -g generator-ionic

Scaffold ionic app
yo ionic sample-app

Add ios target as platform so that you can build and launch simulator
grunt platform:add:ios

Add any custom plug-in you need
grunt plugin:add:

Prepare cordova
sudo npm install -g cordova

Install ios-sim runtime for grunt
sudo npm install -g ios-sim


Now launch the app
grunt emulate:ios

Monday, December 01, 2014

PreRender install error


Problem/Error 

C:\_dev\...\prerender\node_modules\prerender\node_modules\phantom\n
ode_modules\dnode\node_modules\weak>node "C:\Program Files\nodejs\node_modules\n
pm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
Building the projects in this solution one at a time. To enable parallel build,
please add the "/m" switch.
C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V120\Microsoft.Cpp.Platform.t
argets(64,5): error MSB8020: The build tools for Visual Studio 2010 (Platform T
oolset = 'v100') cannot be found. To build using the v100 build tools, please i
nstall Visual Studio 2010 build tools.  Alternatively, you may upgrade to the c
urrent Visual Studio tools by selecting the Project menu or right-click the sol
ution, and then selecting "Upgrade Solution...". [C:\_dev\hmh\curiousworld\prer
ender\node_modules\prerender\node_modules\phantom\node_modules\dnode\node_modul
es\weak\build\weakref.vcxproj]
gyp ERR! build error

https://github.com/atom/atom/issues/2435

Below is the solution

When I set below path variable resolved it, in the same command prompt
set GYP_MSVS_VERSION=2013

Thursday, November 27, 2014

Moving from iOS to Android

I have been with iOS for last 6 years. I have thoroughly enjoyed the OS and in general the apple platform. I am always amazed the way the first apple device was high performance from the day one while Android devices had struggled and got so much better now. I have admired Apple and always will. Apple is an eco-system and very difficult to get out of it.

However, I got bored with the phone. iOS 6 was the last time I was so excited with the upgrade. Since then it  has been pretty much boring upgrades. Flat UI upgrade was not ground breaking either. Some of new features like Passbook looked like half baked and map was broken. So I decided to switch to Android. It was 'brave' move ;) to leave a great OS and great hardware!

Took a OnePlus. For me from iPhone 5s to OnePlus was a huge jump - super big phone in hand and my iPhone looked like business card next to OPO. Definitely need to get used with it and it can really annoy you initially when you try to use in one hand. But a week usage you will get past it. But it is OS that was challenging.

First was navigation - I had a mixed feeling about additional hardware buttons but back-button is so handy especially on a large phone. I realized that it is such handy component when we spent so much browsing website and navigation within apps. However, in my opinion, 5.5 inch (if  phone is light enough) can still can be used in one hand, if navigation on all applications may have to be moved down and leverage the gestures using gyro - shake left to right or right to left etc.

Contact & Emails - it is was an easy migration. Export vCards from iCloud and import them to Google contact manager and sync all set. But Email client - even though iOS email client was not super exciting but it was much intelligent the way it handle email content - especially parsing phone number, tracking number and make them clickable is such an important feature especially when the copy feature in android is horrible. iOS parse the sender detail and allows us to add them to contacts directly as well.

Screen - lovely big screen. Better reading experience and recently read an article saying that with iPhone 6 & 6-plus people are moving away iPad. That is very true. It adds lot to the reading experience and if you are one of them who is wearing a glass, bigger text would certainly help your eyes. But how rich the screen looks - now for general usage, all phone screens are pretty good and hardly make any difference.

Performance - OnePlus is a beefed up hardware and hence no complain. It is buttery as iOS and did not feel any difference. There are so many other talking about the hardware and impact of those on these iOS but most part there is any difference I could feel. Most case it has to do more with the app experience than the OS itself.

Launchers - This is great. This combined with "Privacy" enabled via CyanogenMod could add some of variety to the device. You can mimic iOS on Android if you want, but why would you right? :) but seriously these launchers can add lot more to user experience.

Waiting for Lollipop to come to my device and exploration will begin again!


Sunday, October 12, 2014

Buy vs Build | Tesla's approach

SAP is known for is slow paced innovation, huge license cost and huge support overhead. Many CIO's safe bet was to defacto to SAP, to go with the popular saying "that no one got fired for buying IBM" or "FUD"(fear, uncertainty and doubt) technique. Many organizations are neck deep to SAP and that they are paying huge price for procurement and maintenance.  And build something like SAP was believed to be an insanely long project and complex one. When I was doing some consultation for some large corporate, internal team always resisted to build or adopt OpenSource or OpenPlatform and quoting the support and other lame reasons and has been big blockers for innovation or change.

But Tesla CIO has a different opinion. They have managed to rollout ERP system, home grown, in 4 months. As their car is creative wave in car industry, this is a significant achievement. Their different business model has been one of the key reason for this initiative, instead of figuring out the connector and other bells and whistles.

http://techcrunch.com/2013/10/31/being-a-cio-at-tesla-motors-a-startup-that-builds-cars-and-its-own-it/

Hybrid app developer for IOS! Good news

With iOS8 Apple has introduced/exposed the true webkit based webview (WKWebView) which native apps can use to embed the HTML content and URLs. In previous version, it was UIWebView. UIWebView was not same as WebKit used by Safari and hence had performance issue compared to native apps. Availability of WebGL was absent to UIWebView and also javascript performance was significantly faster on native safari.

PhoneGap, as we all know, is built around this UIWebVIew and loading URL/local pages using file:// protocol.

There are test that have been done to benchmark the performance improvement and it is expected that application would have around 20% performance improvement with new WKWebView. Supposedly WebGL support should enhance 3D rendering and WebKit javascript engine is significantly fast as well. Also we have indexedDB support as part of WKWebView as well.

To view some statistics around the performance gains, read here:
 http://www.sencha.com/blog/apple-shows-love-for-html5-with-ios-8

If not as good as native, but this definitely will have significant impact on Hybrid application and frameworks.

Unfortunately, PhoneGap is still using UIWebView because of a defect in iOS 8 webkit view. Hopefully the bug is fixed soon and is not an policy as part of the new webkit.

Friday, September 19, 2014

Secured File sharing


We were building a social media piece on a website. Images and videos were uploaded by end user. We store media in a social media service called Pluck.

Pluck allows us to create multiple galleries like Personal, Friends or anything you could think off. We could set permission on folders managing whether anonymous user can upload to these folders via API. However, we noticed that the image path themselves are not secured. Meaning, say you upload an image to private gallery but if you get hold of the path anyone could view the file. Based on the privacy constraints of your website this could be a major issue. This is true with Google+ and FB as well I think (atleast when we tested)

So problem in hand is URL should NOT be accessible without making sure user is signed in to our website.

Other side effects we had to handle was however allow other features like social sharing work - since that is happening after user consent to share them outside out system.

First problem in hand was to secure access to the URL. Website use OpenID connect and idea was use the access token issued and authorize the image request. Every image request would include Authorization header as part of the request and token is validated. There were few other options discussed like cookie based access control etc. But sticking to Authorization header based solution sounded more RESTful or HTTP-kind and decided to use Authorization. Akamai had edge authorization model that allowed us to configure the token validation against our OpenID.

Second problem, having decided how to secure the URL, this had a direct impact on how image, video and audio were loaded. To allow authorization header to be included, means we cannot display images, for e.g., using "src" attributes. We had to issue an AJAX request to load the image, which would add the necessary headers. Response would be binary image data and fortunately there are couple of options to bind the binary to HTML5 controls. One is to bind them using "data uri" and other being bind them as "blob".  Read more here. Data URI was little complicated with base64 encoding involved and our application was Angular application and doing all this on javascript, faced bunch of issue and resolved them to get the base64 working and bind them. We did not opt to do this as it was too much to do on the client side. But if anyone of you guys interested, here is the link that can help to perform base64 encoding (btoa function did not work). We built an Angular directive to do all this for various html element.

At this point, we are able to load image securely and bind that to HTML5 element using blob attribute.

Third problem, going back to social sharing feature and some of this restricted contents cannot be shared anymore as, say, Pinterest is going to issue a get and above solutions in place would return nothing to Pinterest. So our next solution was to hand off a short-living image URL to social sharing providers and this link would expire and it would not affect the sharing either as these provider make a copy of the content and store them in their CDN. Keep it short, we are heading toward one of the 2 solutions - either use AWS or Akamai short living secure signed URL. Refer below links


  • http://docs.aws.amazon.com/AmazonS3/latest/dev/PresignedUrlUploadObjectDotNetSDK.html
  • http://www.akamai.eu/dl/feature_sheets/FS_edgesuite_accesscontrol.pdf
Akamai was better as we were already using their service and we don't have to upload the image, instead since we are using their Remote Authorization Feature.

This solution may not fit for others but for us this worked out and there could be alternatives. Any other approaches?

Wednesday, August 20, 2014

Chrome missing mobile emulating tool

I always used to struggle to find the device emulator section in Chrome developer tool section. They changed from where you could find before and unfortunately I keep forgetting. Click F12 on windows to open the developer and tool and you would see "Drawer" icon like in the picture below. Click that to view the emulator


Monday, April 22, 2013