Y-U-NO-CODE

I remember that moment when the big earthquake happened. From a slow shake, which is usually ignored, until it shook down everything from monitors of our office to mini tables, whiteboards, chairs and even then continue to shake the whole building. It lasted for around 6 minutes. The building was skewed to the extremes and would want to make you say your last prayers and remember your loved ones. And we weren’t even close to the Epicenter. The news came a few minutes later of the huge tsunami that wiped clean an entire populated areas in Sendai.

It was a tragedy hard to articulate and the loss of human life and resources incalculable. Human, though prepared for such high level calamities, once again bowed down to this supreme force of Mother Nature.

I tweeted a lot during that time and am sharing some of the posts on my Facebook/Twitter. These include some from my friends who inquired about our well-being at that time.

I also wrote a blog post a day after the incident.

Angularjs users would be familiar with the Angular Style Guide by John Papa. The guide has been very well received (16k stars and 2k forks as of 2016-03-01) and lays down all the common patterns and mistakes one can make while using AngularJS. While working on https://app.statusbrew.com, which uses Angularjs and Angular-Material, we made sure that we strictly follow the above style guide. But we also had some future development of others apps in mind, not just for https://app.statusbrew.com, but using parts of those code to make a Chrome Extension, Chrome App and more. We needed a way to further modularize our code base so that we can pick up bits and pieces of the same code to spin off new projects.

We needed a way to ensure that we do not explode the code with other unnecessary libraries (as Angular and Angular Material are already huge code bases in themselves). I was already familiar with RequireJS, but we also needed to make sure that while we follow the Style Guide, we also are able to do automation with grunt for creating all our assets, while making it easier to do the development using watch, etc.

I have created a sample repo to share how we have done it in app.statusbrew.com. The main components of the sample are:

Keeping index.html as clean as possible with only one entry source to all the javascript files

Making the app as modular as possible at various levels. ex. Ex.App, Ex.WebApp, Ex.Common, Ex.Common.Filters etc. This makes it easy to pick and chose any module as needed

[TODO] Making it easier to create various distributions. ex. webapp, chromapp etc

The File structure with the basic description of the components are as follows:

. ├── Gruntfile.js ├── app │   ├── app.js <-- entry point for require.js │   ├── index.html │   ├── modules <-- this is where all your top level modules/apps are │   │   ├── common <-- services/providers/models/configs commmon to all other modules │   │   │   ├── common.module.js <-- angular.module('Ex.Common') │   │   │   ├── config │   │   │   │   ├── config.module.js <-- angular.module('Ex.Common.Config') │   │   │   │   ├── c1.config.js <<- some config │   │   │   │   └── c2.config.js <<- another config │   │   │   ├── directives │   │   │   │   ├── directives.module.js <-- angular.module('Ex.Common.Directives') │   │   │   │   └── d1.directive.js <<- some directive │   │   │   ├── filters │   │   │   │   ├── filters.module.js <-- angular.module('Ex.Common.Filters') │   │   │   │   └── f1.filter.js <<- some filter │   │   │   └── utils │   │   │   ├── utils.module.js <-- angular.module('Ex.Common.Utils') │   │   │   └── utils.factory.js │   │   └── app1 │   │   ├── common │   │   │   ├── common.module.js <-- angular.module('Ex.App1.Common') │   │   │   ├── services │   │   │   │ ├── services.module.js <-- angular.module('Ex.App1.Common.Services') │   │   │   │ └── s1.service.js <<- some factory | │      │   └── directives │   │      │   ├── directives.module.js <-- angular.module('Ex.App1.Common.Directives') │   │      │   └── d2.directive.js <<- some directive │   │   ├── state1 │   │   │   ├── state1.controller.js │   │   │   ├── state1.tpl.html │   │   │   ├── child1 │   │   │   │   ├── state1.child1.controller.js │   │   │   │   └── state1.child1.tpl.html │   │   │   └── child2 │   │   │      ├── state1.child2.controller.js │   │   │      └── state1.child2.tpl.html │   │   ├── app1.module.js <-- angular.module('Ex.App1') │   │   └── app1.states.js <-- angular.module('Ex.App1.States') │   └── app1.js ├── bower.json └── package.json

The sample code is available at https://github.com/rishabhmhjn/angularjs-requirejs-style-guide. It’s still very much a work in progress.

We could finally release our ‪#‎iPhone‬ ‪#‎iOS‬ app today: https://geo.itunes.apple.com/us/app/statusbrew-find-followers/id1079388184?mt=8

I remember when I released the first version of our Android app on Apr 21, 2013, I never thought I will see it grow this big. I published it, beginning from my first tutorials in Android until release, all within a month.

As of today, it has been downloaded over 4.5M times, all organic; zero dollar spent on ads (which is so not mainstream, given the incessant flow of VC money others are spending while they struggle to create a viable biz model even after many years.)

Today is a big milestone for Statusbrew. We are now 8 people and we hope to continue to do better as we keep moving forward.

This is a subclass of the Android's ListView for endless scrolling purposes. It is a very simple and a relatively easy to use version of other such ListView available.

How to Use?

Add the load_more_footer.xml to res/layout folder.

Add the LoadMoreListView view in your layout as described in listview_activity.xml

Set the OnLoadMoreListener on the ListView as described in the MyActivity.java and put the loading logic in the onLoadMore method of the interface

Filters are awesome. I like the usage of linky as it removes the redundant task of converting all the links into <a> tags and storing it in your model so that it can be attached to the DOM like in other template libraries.

When working with tweets and Twitter user's bio, there is often a necessity of converting the #hashtags and @mentions to hyper-links too. So I created a small filter that does it.

It requires the ngSanitize plugin.

Demo(plunkr)

By tweetLinky,

This is a #hashtag & @mention to link creator using tweetLinky filter. @AngularJS is so awesome!

will be converted into

Previously in 2012, I got into some server side tasks and was fascinated to be in control of your own system, be able to tweak at ease. I thought of starting a blog and chose Wordpress for the content management. It's good to be in control but frankly, in today's world with so many platforms and services and Platform As (A) Services available, having to manage stuffs like DB, platform updates is a tedious job! There are better things to do in life than that.

So, although late, I decided to move to tumblr to be able to write and share with others quickly without having to do all those hassles.