Nepali English Date Converter

Here is a nepali english date converter app. Unlike most other nepali-to english date converters,this is very fast and converts the date instantly without any delay. The design is also very elegant and user-friendly.This app is based on google’s material design and built on top of angularjs.


If you want to see the standalone version of the app click here

improve your ionicframework performance with template caching

In this blog I want to share how I improved my hybrid angularjs mobile app built with ionicframework with template caching. This can used with any other angularjs app. Here we use gulp, an awesome javascript automation tool.

 var plugins = gulpLoadPlugins({
      pattern: 'gulp-*', // the glob to search for
      //config: 'package.json', // where to find the plugins, by default  searched up from process.cwd() 
      scope: ['devDependencies'],//'dependencies', 'devDependencies', 'peerDependencies' // which keys in the config to look within
      replaceString: 'gulp-', // what to remove from the name of the module when adding it to the context
      camelize: true, // if true, transforms hyphenated plugins names to camel case
      lazy: true, // whether the plugins should be lazy loaded on demand
      rename: {} // a mapping of plugins to rename
  });

Here I’m using gulp-load-plugins plugin to automatically load the gulp plugins Credit goes to the gulp plugin gulp-angular-templatecache

gulp.task('cache_templates', function() {
  gulp.src(workingDir+'/templates/**/*.html')
    .pipe(plugins.minifyHtml({empty: true}))
    .pipe(plugins.templateCache({
      standalone: true,
      root: 'templates'
    }))
    .pipe(gulp.dest('www/templates'))
    .pipe(notify('templates cached (' + moment().format('MMM Do h:mm:ss A') + ')'))
    ;
})

This will generate  templates.js js file with a module called templates that looks like

angular.module("templates", [])
.run(["$templateCache", function($templateCache) {
    $templateCache.put("templates/templatefile.html","template string here");
}]);

Finally inject the templates module as dependency to your main app module to use generated templates.
During development it may be tedious to run the task every time so gulp watch comes to the rescue

gulp.task('watch', function() {
  gulp.watch(workingDir+'/templates/**/*.html', ['cache_templates']);
  gulp.watch(paths.js.custom, ['js']);
 
});

This will watch for the changes in the the templates directory and automatically run the cache_templates task for us.

 

Prefetching templates in your ionic framework app easily

Update:
The following code was targeted for older beta version of ionicframework. Ionicframework beta 14 has builtin template prefetch feature.
Inject $ionicConfigProvider eg

.config(['$ionicConfigProvider',function($ionicConfigProvider) {

    $ionicConfigProvider.templates.maxPrefetch(20);

}])

You may be interested in this article to use gulp to minify and cache your anguarjs templates for performance improvement.


 

If you are looking to optimize your app this article to

Prefetching and template caching is one of the ways to improve your angularjs application and so it is recommended for your ionicframework app.

Here I’m using angular ui router for the routes and looks like

$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})

.state('app.news', {
url: "/news/:category",
views: {
'menuContent': {
templateUrl: "templates/news/listing.html",
controller: 'NewsListsCtrl'
}
}
})

.state('app.news.detail', {
url: "/detail/:id",
views: {
'menuContent@app': {
templateUrl: "templates/news/detail.html",
controller: 'NewsDetailCtrl'
}
},
resolve: {
newsDetail: function($stateParams, $q, myservice) {

//...

}
}
})
...

Normally we would use list all the templates manually and then prefetch

var templates = [
"page.html",
"page2.html"
];

But in angular ui router we can use

$state.get()

to get the list of all the states. We can then extract the template names from there

In my hybrid app based on ionicframework I used following code to prefetch all my templates easily.

 

...
.run(['$http', '$templateCache','$state',
function($http, $templateCache,$state) {
/**
* Template prefetching
*
*/
var templates = findNested($state.get(),'templateUrl');
        var promises = [];

    templates.forEach(function (c,i) {
        if ($templateCache.get(c)) return; //prevent the prefetching if the template is already in the cache
            promises[i] = $http.get(c).success(function (t) {
              $templateCache.put(c, t);
              console.log(c+ 'loaded')
            });
        });
     });
}
console.timeEnd('templatesPrefetch');
}
])

findNested is a function with loadash as dependency

function findNested(obj, key, memo) {
_.isArray(memo) || (memo = []);
_.forOwn(obj, function(val, i) {
if (i === key) {
memo.push(val);
} else {
findNested(val, key, memo);
}
});
return memo;
}

Note you need to include lodash as dependency for the above function

PHP debugging through email

As a developer we know that debugging can be very handy sometimes. So it is good to know about different debugging tools and methods. Of course, all of them do not work out for every situation so I think it is good to learn about new ways of debugging!.

At the time of writing this blog post, its been more than 4 years since I started programming in PHP. Right now I’m having mixed feeling; feeling of shamefulness that I don’t know many things yet and also feeling of excitement that I’m learning new things everyday!
I want to share one very important tool in PHP that can be very important in debugging- error_log. Yes that’s right its about error_log. I’m damn sure almost everyone who is reading this knows about this (if you are or ever been into PHP programming).
But I’m here to let you know about another very helpful feature of this function which is capable of sending emails about the error

Here is the syntax according to PHP manual
bool error_log ( string $message [, int $message_type = 0 [, string $destination [, string $extra_headers ]]] )
An example use

error_log("testing".$debugString, 1,"developer@yourdomain.com","From: debugger@yourdomain.com\nSubject: Debugging this value");

I found this pretty helpful in debugging in live environment where you want to keep track of different values while still keeping things clean.

Happy debugging!