Random Jots

Githubdomain

Sat, 2 Dec 2017 00:00:00 GMT

Change in domain

Very short notice! My original domain blogs.nnn.ninja.np has been down for a while now. I tried communicating with the provider but to no avail. So, I have now decided to use github.io domain, which is the default domain given by github for any github pages.

To stay safe in future, I plan to continue with this domain on perpetual basis.

Learning reactjs flux, node, electron ... (Part-22)

Sat, 5 Dec 2015 06:00:00 GMT

Running unit test inside electron

If you are following this series, you may already know that I have been using jsdom for the purpose of mocking DOM. But the experience hasn’t been very smooth. Although jsdom itself is quite great project, React doesn’t play well with jsdom. It’s quite funny since they themselves use jsdom as part of their jest framework (official testing framework from React).

I had been working around the incompatibilities and quirks between React and jsdom since quite the beginning. Recently when I couldn’t write test for one of my feature because jsdom didn’t support CustomEvent, I started to have serious thought about changing my test approach. I finally had enough when React again started giving “dangerouslyReplaceNodeWithMarkup” exception whenever re-rendering got triggered. Basically it worked find on first render, but when I simulated some event like click that caused the DOM to change, it threw this exception. Initially I was thinking about monkey patching things by avoiding re-rendering, and dividing test into 2-3 tests. With combination of these tests I could assert that things would turn out well.

Meanwhile I began searching if electron can have headless...

Learning reactjs flux, node, electron ... (Part-21)

Fri, 27 Nov 2015 06:00:00 GMT

The release.

Finally I have released the fb-messenger as v0.1.0. Not quite usable at this time since we can just view conversation. That too just for the current session, nothing that happened before logging in to the app is showin right now. There are a lot of things remaining to accomplish to make it even an usable application, let alone feature rich like the ones from facebook themself.

The journey.

It was quite a pain to get it released. First of all I had to setup travsi ci to deploy to github releases. Configuration wasn’t much difficult. But after configuring found a bug in travis. Finally after the workarround suggested in the issue itself got it working.

Now the next trouble started… Avira was detecting the electron exe file built on travis as a virus! I was quite worried at this point, so tested it using Virustotal. A sigh of relief! it was a false alarm. I then submitted the report to Avira, they have confirmed about the false alarm and have mentioned that their virus database will be updated.

Then this another trouble followed! The application wasn’t working! The...

Learning reactjs flux, node, electron ... (Part-20)

Thu, 19 Nov 2015 06:00:00 GMT

Adding support for receiving emoji and emoticons.

I have two cards on my waffle board for receiving emoji and emoticons. Emoji are unicode characters showing various expressions. Where as emoticons are combination of plain ascii characters to denote emotions eg: “:)” represents happy face.

As of now most of softwares uses image replacements to display the emoji. Pure font support for emoji (e.g Segoe UI) are emerging but it will take time to get mainstream. And probably longer time for chromium to support it. Electron is based on chromium. More over cross platform solution hasn’t emerged yet. So I needed to support emoji with image replacement technique. There are thousands of emojis so it was absolutely necessary to get a 3rd party solution, or else emoji which is just one small feature in whole chat application, would turn into a subproject of its own requiring a lot of attension. Luckily I found one: minEmoji. In fact I had found couple of them:

But minEmoji appealed to me due to its small size and simplicity, and I found it more near to what I really want....

Learning reactjs flux, node, electron ... (Part-19)

Tue, 17 Nov 2015 06:00:00 GMT

A lot of things has been changed since the last post. Few more features has been added into the application, new icon has been created, started working with inno-setup to create setup files, integrated into travis-ci Changed from gulp-atom to gulp-electron for packaging the application with electron shell…

Instead of trello I’ve decided to use waffle.io, since it gives board view while making it easy to track issues in github. Trying to get more formalized with my approach. I haved divided issues into milestones, and now planning to follow proper git-flow for version control, and semver for versioning application.

Will discuss about most of these in this and future posts. Let’s continue with one additional feature added to the application. Now the application is able to receive stickers, although animated stickers are still not supported. The change itself was quite simple:

In message-item.tsx, change the render method of MessageContent class as follows:

render() { if((this.props.message.attachments || []).length == 0) { let justify = {'textAlign'

Learning reactjs flux, node, electron ... (Part-18)
Sat, 14 Nov 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  As of now the chat thread does get updated when we send or receive message, but we need to scroll to bottom to see the latest message. In this post we will make the chat thread scroll to end automatically. I’m feeling lucky as I found a blog entry explaining exactly how to do it… 
 For our purpose, we will add a private member in “ConversationHistory” class named “shouldScrollBottom”. This flag is used to determine if we should automatically scroll to bottom or not. In case user is scrolling upwards to view old messages it will be rather irritating to scroll them down. And in constructor we set the default value to false (which I don’t think is mandatory).
 private shouldScrollBottom: boolean; constructor(props: ConversationHistoryProps){ super(); this.props = props; this.shouldScrollBottom = false; } 
 Now we will tap into two of the react lifecycle methods:
  componentWillUpdate and
 componentDidUpdate
 
 componentWillUpdate() { var currentNode 

Learning reactjs flux, node, electron ... (Part-17)
Thu, 12 Nov 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  In this post we will clean up the chat component by dividing it further into multiple subcomponents.The chat component itself is consist of two major parts: 
  The friend list
 Conversation history with selected friend.
 
 We already have separate component for friend list. For conversation history we are clubbing everything right into chat component. My plan is to move conversation section to separate component. The conversation component has various sections, the header in which currently selected friend’s detail is displayed, the actual conversation with that friend and the textbox to type in message.
 With this goal in mind, let’s modify chat.tsx as follows:
 import * as React from 'react'; import * as ReactDom from 'react-dom'; import {Hbox, Vbox} from './layout'; import ChatStore from '../stores/chatstore'; import ChatActions from '../actions/chatactions'; import AppStores from '../appstores'; import connectToStore from '../decorators/connectToStores'; import FriendList from './friendlist'; 

Learning reactjs flux, node, electron ... (Part-16)
Tue, 10 Nov 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  In previous post we converted the login form to material-ui desing. In this post we will convert the inner pages. 
 To get started with I added a search bar on top of the friend list. To create search bar, ‘Toolbar’ component was used..
 <Toolbar> <ToolbarGroup key={0} float="left"> <TextField hintText="Search..." style= />  </ToolbarGroup>  <ToolbarGroup key={1} float="right"> <ToolbarSeparator/> <Popover listStyle= iconButtonElement={<IconButton><FontIcon className="fa fa-bell notification" /></IconButton>}  openDirection='bottom-right' > <ListItem leftAvatar={<Avatar>F</Avatar>}  primaryText="Brendan Lim" secondaryText={ <p> I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch? </p> } /> </Popover> <IconButton><FontIcon className="fa fa-sign-out" /></IconButton> </ToolbarGroup> </Toolbar> 
 Along with search textbox,...


Learning reactjs flux, node, electron ... (Part-15)
Fri, 6 Nov 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  So far the UI for our project looked quite dull. And I was quite bored looking at the UI, so I decided to go for some styling. It was also meant to be a breath of fresh air for the project which was getting quite monotonous. 
 Instead of diving into all css, I chose to go for awesome material ui kit. I figured out that it should be pretty easy, as it is built for reactjs. All I need to do was download it and use its components instead of default html components. Well I was quite wrong didn’t turnout to be the way I was day dreaming.
 Downloading was pretty easy:
 npm install material-ui --save 
 Using material-Ui wasn’t that difficult either. All that needs to be done is to require the component that is to be used:
 const Avatar = require('material-ui/lib/avatar'); const FontIcon = require('material-ui/lib/font-icon'); const RaisedButton = require('material-ui/lib/raised-button'); const TextField = require('material-ui/lib/text-field'); const 

Learning reactjs flux, node, electron ... (Part-14)
Tue, 3 Nov 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  Its been quite long since I worked on this small side project of mine. Well I got busy with my day to day works and couldn't find enough time to work on this. I though that I should work atleast once a month even if it is for an hour or so. Hence, I continued with adding one more feature, i.e. showing received messages from the friend. 
 With these changes we won’t still be able to send message, but message sent by friends will be listed.
 To get started following change was made ChatStore class
 import {Store} from 'delorean'; import ChatService from '../services/chatservice'; import {EventEmitter} from 'events'; export default class ChatStore extends Store { private api: any; private chatService: ChatService; currentUserId: string; currentChatThread: string; error: any; friendList: { [id: string] : any

Learning reactjs flux, node, electron ... (Part-13)
Thu, 1 Oct 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  In this post we will add a very basic interactivity functionality. When any friend in friend list is clicked that friend should be the active friend. 
 I had to make changes in total of 5 files all together to get this functinality working… One change would have been rather unnecessary if I had followed proper unit testing :)
 The problem was with merge method in layout.tsx’s Style component. Now over all layout.tsx looks like this:
 import * as React from 'react'; /** * Style * @ref: https://gist.github.com/Munawwar/7926618 */ export var Style: any = { merge(target: any) { //@ref = https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign if (target === undefined || target === null) { throw new TypeError('Cannot convert first argument to object'); } var to = Object(target); for (var i = 1; i < arguments.length

Learning reactjs flux, node, electron ... (Part-12)
Wed, 23 Sep 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  In this post we will divide the chat component, abstracting the task of listing friends to a separate component. And we will also add some styling to the component. Let's name the component that lists friends as "FriendList". 
 To get started we will add a file named “friendlist.tsx” in src/components folder.
 import * as React from 'react'; import {Hbox, Vbox} from './layout'; export class FriendListProps { friendList: { [id: string] : any; } = {};//Dictionary<string, any>; } export default class FriendList extends React.Component<FriendListProps, any> { constructor(props: FriendListProps) { super(); this.props = props; } render() { var state = { 'online': { border: '1px solid gray', borderLeft: '3px...


Learning reactjs flux, node, electron ... (Part-11)
Sat, 19 Sep 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  So far the chat interface has been intangible, we have console logs but the front interface itself doesn't do anything at all. Lets change this lets make it display list of our friends. We will start by doing this in the chat component itself and then refactor various functionalities of the chat component into their own component as required. 
 After looking at the log it is quite clear that the friend list is returned as key value pair of userId and user details. One thing that seems to be missing though is the user’s online status. It does seem like online status can be updated through the use of presence events, but doesn’t look very promising to me, as it will take sometime to get the list updated, till then we will have to assume all friends offline.
 import * as React from 'react'; import ChatStore from '../stores/chatstore'; import ChatActions from '../actions/chatactions'; import {Hbox, Vbox} from './layout'; import AppStores from 

Learning reactjs flux, node, electron ... (Part-10)
Tue, 8 Sep 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  Let's create a layout component that would enable us to organize our components in terms of hbox and vbox. You'll find an example of these layout rules here. Don't be lazy please go ahead and click the link! I'll be waiting... 
 If you did actually went through the article it would be quite clear how hbox and vbox components can make our life easy when it comes to laying out our components. Add a file named “layout.tsx” in src/components folder.
 import * as React from 'react'; /** * Style * @ref: https://gist.github.com/Munawwar/7926618 */ export var Style: any = { merge(target: any, ...source: any[]) { var from:any; var keys:Array<string>; var to = Object(target); for (var s = 1; s < source.length; s++) { from 

Learning reactjs flux, node, electron ... (Part-9)
Mon, 7 Sep 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  In previous post we added functionality for login. Now user can enter their facebook username and password and get authenticated. Next step is to show chatting screen as soon as login is successful. But due to the way "facebook-chat-api" and Flux works, I'm quite confused. After login is successful we get "api" object in the callback. For any further communication we need this "api" object. My plan is to have a separate store and services for chat interface. And confusion is over how loginStore should pass the "api" object to chatStore? As per flux model the communication flow should always be one-way, from view -> action -> dispatcher -> store -> view. But here we need to pass data from one store to next. May be I'm mis-understanding the concept of store here. 
 My solution here is to save “api” object as a property of loginStore, and pass it as a property of chat component when rendering. Here’s what my plan is:
 return (<Chat store={AppStores.chatStore} api={AppStores.loginStore.api} />);...


Learning reactjs flux, node, electron ... (Part-8)
Mon, 24 Aug 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  Currently the login store's authenticate method does nothing much. Obviously it should try to login from Facebook. For this purpose we will use [facebook-chat-api](https://www.npmjs.com/package/facebook-chat-api). We will wrap actual calls to the "facebook-chat-api" inside our service classes. As of now I'm planning to use LoginService class for login, and ChatService to get the chat running. 
 Lets focus on login first for now.
 Add following import in login.spec.tsx
 import LoginService from '../../src/services/loginservice'; 
 Then add following specs:
 it("should call LoginService.authenticate when login button is clicked, and form is valid", () => { HTMLFormElement.prototype.checkValidity = () => true; //We don't actually want to hit facebook in our unit test spyOn(LoginService.prototype, 'authenticate').and.returnValue(Promise.resolve({})); var loginForm = React.render(<Login store={AppStores.loginStore} />, document.body);  ReactTestUtils.Simulate.click(React.findDOMNode(loginForm

Learning reactjs flux, node, electron ... (Part-7)
Sun, 23 Aug 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  Lets try adding some behaviour into the login form, we created in the previous post. To get the behaviour we want, we will follow the recommended pattern from Facebook i.e. Flux. 
 There are mainly 4 parts that makes up Flux:
  Store
 Dispatcher
 Action
 View
 
 We already have the View part, i.e. the App and Login components we have been creating so far. For other parts we will use delorean. To use delorean we will install it first.
 npm install delorean --save-dev 
 For implementation of Flux, I’m following the recommendations from the following blog post (a must read if you haven’t already done so): http://blog.andrewray.me/flux-for-stupid-people/
 Lets first create a store. We will be using concepts introduced in this post itself. Below are few quotes about stores concepts from the article:
   A store is a singleton
 Store then responds to the dispatched event.
 A store is not a model. A store contains models.
 Store emits an event, but not using the dispatcher
 A store is the only thing in your application that knows how to update data
 A store represents a single “domain” of your application.
 ...


Learning reactjs flux, node, electron ... (Part-6)
Sun, 23 Aug 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  Lets establish a basic flow for our application. The initial thing that user sees as soon as application is started is the login interface. Once user enters the credentials and is successfully validated, the user should see the chat interface. Chat interface will consist of the user's friend list, and the interface to type messages. 
 I’m not really a designer so here’s basic wire frame 
 
 Lets start by writing some tests. We will be using jasmine and jsdom to write our tests. To begin with lets install jasmine and jsdom.
 npm install gulp-jasmine --save-dev npm install jsdom --save-dev tsd install jasmine tsd install jsdom 
 Add following entries in the filesGlob section of tsconfig.json file.
 "./tests/**/*.ts" "./tests/**/*.tsx" 
 Your filesGlob should look something like this:
 "filesGlob": [ "./src/**/*.ts", "./src/**/*.tsx", "./tests/**/*.ts", "./tests/**/*.tsx", "./tools/typings/**/*.d.ts", "!./node_modules/**/*", "!./out/**/*", "!./tests/out/**/*", "!./electron/**/*" ] 
  Note: my initial plan was to write tests in js, so I didn't have filesGlob entires for test folder. But I noted that both jasmine and jsdom has definitelytyped entries, so I decided to use typescript itself. ...


Learning reactjs flux, node, electron ... (Part-5)
Fri, 21 Aug 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  A series titled "Learning reactjs flux, node, electron ...", with four posts already published nothing much has been done yet about ReactJs or flux. That's absurd right? Yes, I too am with you. Now is the time to do some justice to the title. So, lets get started with ReactJs. 
 Well this isn’t supposed to be a tutorial about ReactJs, so if you are looking for tutorial about how to get started or working philosophy of reactjs, you may want to visit some other blog. In this series we will take more practical stance. In my opinion this approach would be helpful for someone who has gone through such tutorials and knows a thing or two about react already, but want to know what all those theories means when writing down code. I’ll try to explain some of my design choice though. Probably also share links to blogs based on which I make some decission. I may be mis-understanding the intension of original author, if anyone points out my mistakes I would be really grateful.
 So, let’s being with installing react first.
 npm install react --save-dev 
 Since we are using...


Learning reactjs flux, node, electron ... (Part-4)
Fri, 21 Aug 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  Finally we now have a basic structure of folders, configurations files, build system and a minimal running program in place, after these excruciating long process. Now, its time to commit things to git and sync with github. If you have followed throughly, I haven't created a repository in github. We do have a local git repository but it isn't cloned from github. At this point, my initial thought was something on this line: 
  Rename local folder.
 Goto to github.com.
 Create repository there.
 Clone the repository (using clone to desktop button).
 Copy all the files/folders to this cloned repository.
 commit and Sync.
 
 Phew! quite a process. Luckily I didn’t do it! I wanted to investigate if github for desktop had easier way. Well thanks to github, it does have that feature. Heres how I did it:
  Open github for windows and click on the “+” icon.
 Choose “Add” tab
 Type name of repository and paste the path of repository (D:\Projects\Node\fb-messenger for me), then click “Create repository” button
 Now commit the files, and click on “publish”
 
 Thats it!!
 This is how dialog for adding existing repository looks like.  This is a multipart series filed under category fb-messenger 
  Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
   In previous post we did write some simple code, whose expected output is to print "Hello from electron!" into the console when we run the program. Now the thing remaining is to actually run the program. But to run program we will have to build first. 
 Building javascript!!
 Hmm.. yes, we will build javascript, the basic building will involve compiling typescript code to es6 code, and further transpile es6 code to es5 (js) code, and combile all the modules into single file. Normally it is good idea to write various modules in seperate files for maintainability, but when deploying it is easier if all modules reside in one file. In case of normal browser application we can further opt to minify and gzip the content.
 Lets begin
 We will be using gulp as our build tool. Actually it is a task runner similar to rake in Ruby world. We can create a list of tasks and decide the sequence of task we would like to run to achieve our final output. To be able to create we will have to install gulp first. It is easy just open console and type...


Learning reactjs flux, node, electron ... (Part-2)
Thu, 20 Aug 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  In previous post we created project's folder structure and wrote some json config files. In this post we will continue on that and write some code. 
 About the folder structure
 Lets get started by explaining about how I plan to use the folders.
  electron: this folder will be used to save electron files, cache folder will be used by gulp-atom package to download and cache the prebuilt electron files, and in build folder we will have our final product.
 out: this folder will contain compiled output. In js we will have the output of typescript compilation, and in compile we will further compile the files in the js folder using babel and browserify to create single js file.
 src: this folder is where we will have all our codes. Since I’m planning to use Flux pattern, I’m already dividing this folder into several part like actions, stores etc.
 tests: this is where we will have our unit tests. We will write unit test in js + jsx probably using few es6/es7 features, so even test will require build step. The compiled test will be stored in tests/out folder
 tools/typings: this is where...


Learning reactjs flux, node, electron ... (Part-1)
Wed, 19 Aug 2015 06:00:00 GMT
 This is a multipart series filed under category fb-messenger   Part 1
  Part 2
  Part 3
  Part 4
  Part 5
  Part 6
  Part 7
  Part 8
  Part 9
  Part 10
  Part 11
  Part 12
  Part 13
  Part 14
  Part 15
  Part 16
  Part 17
  Part 18
  Part 19
  Part 20
  Part 21
  Part 22
 
 
  Its been a while since I last worked on big enough javascript project. Javascript landscape has changed a lot since then. Es6, Es7 are now hot topics, so are the technologies like gulp/grunt nodejs and npm. I have been learning about these technologies through various sources, but haven't been able practically apply what I have learned. So I came up with this plan to get my hands dirty by writing some code using these technologies. I'm planning this post to be a series, where I'll track my progress. To get started, I'll be setting up a project and commit it to github. 
 (Be warned!! It is a project to get my hands dirty on, it may never be completed. Also, be warned that I’m in no way authority over these topics.)
 About the project
 This is going to be github’s electron based desktop application. Windows will be used as primary target, as I have easy access to windows machine, but hopefully it will be cross platform due to the technology being used. I’ll try to build it for mac once I get hold of a mac machine.
 I’ve been hearing quite nice...


Portable Jekyll setup
Tue, 18 Aug 2015 17:05:00 GMT
It has been sometime since I wrote my last post. I have switched couple of different machines in this period of time. I was trying to write a post, but then it occured to me that I have forgotten how I used to do it :laughing:
 In this post I’ll try to outline the steps for my own future reference, someone else may find it helpful too.
  Go to https://github.com/madhur/PortableJekyll click “Download Zip” button.
 For more setup instruction look at https://github.com/madhur/PortableJekyll/wiki
 Create a file named set_JEKYLL_PATH.cmd with following content:
 
 SETX JEKYLL_PATH %~dp0 
 Save this file in same directory where you have portable jekyll, i.e. this file and protable jekyll’s setpath.cmd should be on same level (in my case I have it at E:\portable-softwares\PortableJekyll), and double click the file. This is one time setup, until you change the machine, once this file is double clicked it sets an environment variable named JEKYLL_PATH.
 In the jekyll blog root path I have a file jekyllhelper.bat with following content.
 ECHO Setting env variables... ECHO %1 if "%1"=="-d" ( CALL %JEKYLL_PATH%setpath.cmd START jekyll serve & ping 1.1.1.1 -n 1 -w 10000 > nul & START http://localhost:4000/ & EXIT EXIT ) else ( CALL %JEKYLL_PATH%setpath.cmd jekyll %1 ) 
  ref:  https://github.com/nripendra/nripendra.github.io (see there is Jekyllhelper.bat file)
 https://github.com/nripendra/nripendra.github.io/blob/master/Jekyllhelper.bat (refer it’s content.)
 
 
 
 Open command window in root path of your blog project (in my case it is at D:\Git\nripendra.github.io), type ‘Jekyllhelper build’. This compiles the md files into html and opens the homepage in the default browser. Sometimes the serving process may not be completed withing 10 seconds, in that case wait for sometime and then refresh the browser.
 If you look carefully my blog has visual studio project file. In this project file I have removed all...


Cubicle.js
Tue, 16 Dec 2014 06:00:00 GMT
Cubical.Js is a small light-weight javascript library for defining modular components. Released under MIT license, it is my yet another opensource project that I published this year. This year I’m quite happy to be able to release couple of my projects into opensource world. Cubicle.js is one of such projects. Many times when working on larger projects we need a way to organize our javascript codes into multiple files/classes/modules. In past I normally used to create javascript classes, either using some sort of frameworks or using vanilla-js. No matter what, I would end up with a lot of classes that clutter up the global namespace.
 One of my project used requirejs framework which is quite nice framework that loads desired modules asynchronously at the run time. But whole loading javascript asynchronously didn’t fit well with this particular project, where javascript was spread across a lot of pages. Having to require jquery each time just to use some “$” magic was also not very comfy. We couldn’t help much as this project was a jumbled mess of CMS and dynamic server-side code. We decided to remove requirejs. When I began with refactoring, I got into a situation, a lot of our code was defined as requirejs modules. I didn’t wanted to move away from this approach, so I created my own “define” function. It worked very similar to requirejs’s “define”. But unlike requirejs, it was fully synchronous. Hence we had to properly bundle each module in correct sequence.
 Need less to say I was quite happy with what the define function did. I could move all 74 requirejs modules in couple of hours which, I was expecting to take at least couple of weeks, if I had to entirely create separate vanilla js classes for each modules....


Introducing xGherkin.net
Sun, 23 Nov 2014 07:35:00 GMT
Test Driven Development (TDD) is the current norm in industry. It refers to design of software product based on series of Tests. Tests in TDD are not essentially unit tests, but unit test frameworks and concepts are primarily in use. The Red-Green-Refactor flow is at the heart of TDD, it basically means write a failing test first (which test tools generally denotes in Red), then make it pass (Green) and then refactor the code. Which implies that we should write test even before writing actual code. Also a rule of thumb for compiled language like c# would be to consider compilation failures as a Red.
 What is BDD?
 BDD is new style of doing TDD, it maintains same Red-Green-Refactor flow and can be done with same frameworks and tools used for TDD. The difference being its ultimate focus on human beings, rather than machine. BDD encourages writing test such that it is easy to read for humans. This human focus does turn out to be very important aspect of BDD, so much so that people like me who are wary of writting Tests can now turn their mind towards writing tests.
 Writing tests in BDD mostly seems like explaining what software should do in very human language, that’s exactly the intended purpose of TDD! But “T” in TDD didn’t do it any justice. Programmers who were already writing unit tests, integration tests etc continued on their path, and new entrants to TDD domain were rather perplexed at the complexity. How would I even write test without any code to ‘test’? This was exactly my question for quite some ‘years’ when I first got introduced to TDD! Finally figured out after going throug a lots of article and trying things myself. But still today when I know at least basics...


About my Favicon
Sat, 1 Nov 2014 11:55:00 GMT
Favicons are very small, so small that, most of us don’t even realize they are present. Small they might be but not unimportant, as I recently learned. The favicons do subtly identify a website, without us even knowing (we are accustomed to recognize Facebook tab using their icon). I really didn’t give much thought to favicons before this, they were always there and I was ok. When I started this blog, the first thing I noticed was the fact that the space for my favicon in tab was blank. So, I began to think about what my favicon should be? May be a small image of myself? Or, should I ask one of my designer colleagues to design it for me. I was surrounded by quite dilemma on this topic for quite some time after release of this blog.
 Lost and found!
 Well, not quite "lost" per say, but I found my favicon, all thanks to stackoverflow and Gravatar. While I was asking questions and giving answers on stackoverflow, I noticed that stackoverflow uses my "identicon" generated by Gravatar. Wow! This instantly clicked me, my identicon should me my favicon. It is a personal blog, and what is better favicon than something that identifies me?
 Putting identicon up for favicon seemed to be much better idea than my initial idea of putting up small image of myself. At a 16X16 pixel my image would have lost a lot or details, so much so that it wouldn’t have been recognizable that it actually was an image of me. But this identicon can scale quite well to small sizes.
 Here you go:
   
 Decisions
 So, here we go,...


My own Domain
Thu, 23 Oct 2014 01:14:00 GMT
Well lets get started with a brief back-story, I have been blogging from nripendra-newa.blogspot.com. Although not very active, I do like to share my ideas every now and then. When I mention url of my blog to my friends and colleagues, they always pick on me about my domain. I’m a techie so obviously I should have my own domain RIGHT :stuck_out_tongue:? This blog is response to all these sarcasm I face from time to time. Now that I have my own super cool domain name nnn.ninja.np, I decided to use it for my blogs.
 Decissions Decissions
 Domain name
 Well, I’m from Nepal so I thought to take up .np domain, primarily because it is free for Nepalese, all I needed to do was to produce a government verified Identity. Although not the best user interface, our domain Registrar’s registration process was quite straight forward.
 Our national domain Registrar requires that a personal domain name must include all parts of name as per the citizenship card. Since my full name is “Nripendra Nath Newa” it would become quite a long one if I used my name, so I decided to use just the initials, hence “nnn”.
 I would have preferred nnn.np as my domain but our registrar required that I had to choose a generic Top Level Domain(gTLD). So, after going through the list of available generic domains I finally settled down for .ninja domain. Mainly because it sounds cool, breaking free from (not so cool) traditional domain names like .com, .net. Also since my domain name already had 3 ‘n’s, both gTLD and ccTLD staring with n was fun, and to some extent I always had this fantasy of becoming a Ninja myself :smile:
 Blog hosting
 When I started registering my domain name, I...