Life & Tech Update

After my contract with Microsoft ended in late August, I took a month off for vacation. I traveled to Japan for 18 days, and took two weeks off afterwards to get over the jetlag and take care of some personal matters. Last month, I started seriously looking for work. I’m also brushing up on the newest technologies, and working on my own side business.

Lately, I’ve really been into NodeJS, specifically Hapi. I love it. It is as bare bones as it gets, yet provides all the functionality you’d want in the way of plugins. It’s incredibly quick to get started with and easy to understand. Hapi’s documentation is also pretty solid, so anyone with any sort of programming experience can get up and running in minutes.

In addition to Hapi, I’ve been writing Node stuff in TypeScript (using Visual Studio Code). Hapi is (mostly) covered by typings so I get intellisense and code completion for JavaScript… which is amazing. It took a bit of adjusting to get used to TypeScript, and to get the build process going, but now that I have it down, I’m very hapi with it. I started working on a side project to further learn the framework and get used to ES2015 syntax.

I’m happy to see strong types, classes, methods and interfaces come to JavaScript (though their implementation deep down is apparently a bit misleading). When I code in JavaScript, sometimes I miss the cleanliness of C#. Now, I can feel less dirty with the aforementioned programming constructs. And lastly…

On the note of programming constructs, I’ve been hitting the books refreshing Design Patterns (singleton, repository, etc) and Design Principles (SOLID). Although no interviewers generally ask for these, I feel like whatever job I work at next, I want to employ these coding practices and write spectacular code. Maybe it seems trivial… but something about dependency inversion just makes me warm inside.

So yeah, looking for work, studying and working on side gigs.

JS Framework Thoughts 08/16

It’s been a while since I’ve posted. I’ve been busy.

Besides having been working with Knockout at my day job every day, and consequently learning its ins and outs, I’ve also dabbled in other big frameworks out there on the side. In chronological order:

  1. Knockout is great. It’s easy to understand and very easy to get started. However, it’s not very easily testable and it’s not “modern”. I think it’s probably on its way out, unless there’s a major re-write.
  2. React was easy to get started with, but complexity escalated very, very quickly. When you want to build just one component on a page and follow the Hello World guide, it’s not bad. But when you want to grow your application, forget it. There are better choices out there such as…
  3. Vue is a great, small framework which combines the best of Angular, React and Knockout in one. It’s modular like Angular2, it’s blazing fast like React and it’s super easy to get started like Knockout. One problem with Vue is that the build process for it (like for React) kinda sucks to get running.
  4. Aurelia is a phenomenal framework. It’s really straight forward, uses ES2015, has all the new, cool toys like dependency injection, decorators and module support. However, in my several week stint with Aurelia I learned that they’re just not yet ready for production-level applications. There’s been a lot of API upheaval in the development process with things getting renamed and apps breaking in the process. When RTM 1.0 is out and the dust settles, I might come back and have a look unless…
  5. Angular 2 keeps its tendrils in me. I’ve just started working with it a few weeks ago, but I can already see how powerful it is. I’m literally eager to go home and keep building in Angular 2. That sounds weird, I know. Angular 2 RC4 seems pretty much ready except for a couple minor bugs. Its router is powerful and easy to understand. The documentation is phenomenal. It runs on TypeScript. One complaint I have is that the http module is not intuitive.

Before starting on my current contract, I worked with Backbone for 9 months and wasn’t a big fan. In the future I would like to give Ember a go. If I recall, Ember, like Angular 2 was super opinionated.

Bottom line is, most of the frameworks running on ES2015 syntax are all converging into the same direction -> components. I think Vue, specifically, is exceptionally good at it, but it’s not really a full app framework like Angular 2. I think whatever I build now on my own time will be using Angular 2.

Personal Finance Win10 App Update 1.1

After about 2 months of  パーソナルファイナンス being out we’ve had about 100 downloads and about a dozen sales! Unfortunately there’s been zero feedback on the Windows Store and being a one-man team leaves a lot of open holes in the development process — especially QA. I figured I need to find out when / if things go wrong so in this new release I threw a lot of things into try-catch blocks, and sprinkled some minor instrumentation throughout the app. I also just recently did this at work (on a much larger scale), it’s fresh on my mind, so I figured why not!

There are a few bug fixes too. Two big ones which I’m surprised nobody complained about, was terrible performance on adding expenses after a couple dozen are already in the app. Not sure how I didn’t catch that before, but fixed now. The problem was that the table is dynamically calculated from an array, and every time an item is added, the table is repopulated and recalculated. The computation procced with every addition to the table, which slowed rendering to a crawl. Adding a delimiter on the subscription unblocked it and it’s now near-instant.

Another interesting bug was with entering numbers in Full-width Kana. JavaScript (or rather, the Chakra engine that powers UWP Apps) didn’t know what to do with it, and so it thought it was an empty string. I found a parseUniInt library that someone built, and used that to turn full-width kana into regular numbers that Chakra can understand. Unicode… it’s gonna get ya…

Lastly, I added a few new features!

Settings Page:

Settings Page

In case you can’t read this… the top purple header says “Export and Import Data.” You can now export and backup your data into a CSV file, and import it back! In the future, I plan on adding an option to enable this backup feature to fire off automatically when you exit the application. The bottom section allows you to choose your app’s color theme. As you can see here, it’s purple!

I also added a way to view your budget for the entire year, rather than just individual months, a way to favorite accounts so that they show up at the top in the transaction input screen, and also a “weight” to each account so that the most used accounts always show up at the top (below any favorited accounts).

Overall this 1.1 release I feel is pretty stable now and should give users a bit more information about and control over their data, as well as improve the experience with the app overall. I’m pretty proud of this product, and I want to keep building on it in the months and years to come!

Personal Finance Win10 App – Part 2

In the last post I wrote about the initial framework decisions and some challenges I came across when building the app. Here I’d like to tackle the individual parts of the app and the logical challenges I encountered while writing the code.

The app in its initial version is split into five sections: Overview, Transactions, Budgets, Reports and Categories. The last one on that list, Categories, is simply a way to give users an ability to add custom transaction categories such as Shopping or Groceries and use them in the app. Nothing challenging there beyond filling out a database table.

Overview is the landing page when users open the App. Here, they can see their account totals, cash and debt totals and spending by category in a pie chart. Remember, it’s in Japanese…


Adding and removing accounts is pretty straight forward. They’re just simple database operations. When adding an account, you’re asked for the name, a type of account (bank, cash, credit or loan) and the starting balance. Initially, adding and removing transactions modified the balance in the database, but after a while I noticed it started getting convoluted. I re-wrote the math calculating the balance for each account and now the balance is dynamic based on the transactions attached to that account. So if you start with 10000, and add a transaction for 1000, the transaction gets written to the database, but the account balance remains as is.

Another fun exercise was getting the data for the graph all formatted correctly. Thankfully UnderscoreJS has a lot of handy functions that deal with filtering out objects and arrays. The graph can be shown annually or monthly, and you can scroll through months or years. The data is calculated dynamically, because all transactions are stored in memory, not read from the database. This was another conscious decision, though my feelings are somewhat mixed here. Storing transactions in memory makes the app extremely responsive, but reading from a database might have been a better option given performance down the line. The database, btw, is SQLite.

The transaction screen is a list of accounts as categories which allow you to sort and view your transactions. Since they’re all loaded into memory at boot, paging is super fast. There is a list of 10 pages maximum right now, but transactions are all loaded regardless. I think down the line I might add the ability to view transactions in chunks sliced by date ranges.


There was nothing particularly challenging about coding transactions. Hidden here under the ‘Add Transaction’ screen is the ability to edit, which looks similar to the add screen, but has the information from the record already pre-filled. Paging was pretty easy to put together, and sorting by date simply reverses the array. Selecting the account or the transaction type (income, spending) on the left, filters all transactions by that account or spending type only.

In Part 3, I’ll cover the last two sections: Budgets and Reports. Budgets was probably the most challenging conceptually, as well as logically, from a coding perspective. More on that later!

Personal Finance Win10 App – Part 1

Before I write another word, let me just list the JavaScript libraries I used for this project: Knockout, Pager, Moment, Numeral, Underscore, CanvasJS, jQuery. I am now intimately familiar with Knockout, Pager and Moment. I spent probably several hours fiddling with Moment’s formatting, parsing and setting methods to get the right settings for Japan. Oh yeah, this app is for the Japan market, so it’s entirely in Japanese.

Alright so…

I started out with WinJS. Microsoft’s JavaScript offering is actually pretty cool … if you’re building Microsoft-looking apps and want to use Microsoft-looking controls in your app. They’re great when you want to get a prototype of something up and running quickly. I’m guessing these controls also pretty much the default a lot of developers go with when coding their apps in C# with XAML. I, however, opted for JavaScript, because I feel a lot more comfortable in that world than C#.

Ultimately, I ended up dropping WinJS and going with the tried and true jQuery UI with Knockout bindings. However, I dropped those too after a couple days and defaulted to my own solutions, because I needed more granular control over how content was being rendered. I’ll mention this now and probably again later in this article, but rendering Kana/Kanji is totally different than English or any other Latin-based alphabet. Buttons suddenly go from being 150 pixels wide to 50 and look weird. It really didn’t work with any of the jQuery UI widgets very well since they use pretty tiny font to achieve good usability.

To get the widgets I needed, I had to write my own components. I wrote my own datepicker, because the way date is displayed in Japan is different; not just the order of day, month, year, but they also display the actual Kanji for the day, month and year after the number. I wrote my own dropdown, because I needed the font to be bigger without breaking wrapping inside the controls. I also wrote my own filter, styled all inputs and wrote a few other custom components tailored specifically to Kana/Kanji.

Another thing I needed to write that doesn’t exist anywhere is a Knockout binding wrapper for CanvasJS. I actually started out with ChartJS as my graphing library of choice, but after a week of fighting with it, I dropped it like a bad habit and dipped my toes into CanvasJS. Love it. Awesome library, 5/5 stars would visit again. While the app currently only has one pie chart graph, I plan on adding two more in future releases, and I know CanvasJS can build them for me.

Last thing I want to mention in Part 1 is about mobile. Before I even wrote one line of code, I did a bit of market research. My goal was to target a market that wasn’t flooded with Personal Finance apps. Android and iOS are full of them for all languages (even Afrikaans). Windows 10, or actually Windows in general is theoretically a platform with a potentially wider audience, despite the [currently] smaller install base. Thing is, Windows Phone is a joke pretty much everywhere except Seattle where Microsoft basically slips them under your pillow while you’re asleep. So to sum it up: Android and iOS are flooded and Windows Phone is non-existent. Desktop Windows however … is nearly barren in this category, especially in foreign markets. Bam!

In the next part I’ll cover some of the logical challenges I encountered while writing the app both from design and coding perspectives.

Investing, 4 months

This post is a short primer on my experience with the investing world after just a bit over 4 months. I’ve done a significant amount of research and learning in July and part of August in an effort to establish a base understanding of how the investing world works. After all, this is money – my money – that I’m playing with, so having a good idea of where it’s going and what’s going to happen with it in a month or a year is a good strategy.

Before investing anything, I started out by reading a pretty good write-up about investing in general. Why do it, why it’s good for you, where to start, and some key terms you’ll find in the investment world. You can check out this write-up here.

I googled a lot more, but I don’t have all the links saved anywhere, because I just absorbed the knowledge and didn’t think I’d need to refer back to it. At the top level, it’s not really that complicated. I learned about individual stocks, mutual funds, options and other various ways to distribute your capital. After I knew what all the different options were, I looked for advice on what to invest in and how to get started. This is the tricky part, because everybody’s got an opinion and these opinions vary with risk tolerance. Since everybody’s got a different risk tolerance, these ways to invest will differ from person to person.

I started reading Financial Samurai to get accustomed to the lingo and the general notion of putting your money into, seemingly, the void. Non-tangible investments seem a bit scary after all, because you don’t actually get anything physical to hold in your hand when you deposit that money. That said, it seems a lot easier to spend money “virtually” … though maybe that’s because I’m so used to it as a gamer… buying up virtual goods with virtual money, or sometimes real money.

Lastly I perused Bogleheads, but other than mutual fund recommendations I wasn’t able to find anything immediately interesting. There’s a lot of chatter on there, not necessarily related to traditional investing (also the interface sucks, but that’s just my UX spirit aflame). I did find good recommendations for mutual funds to invest in, so that’s good!

After about two weeks of reading about stuff, I opened a Fidelity account and bought my first set of mutual funds. I don’t recall what my risk estimates were, but I ended up going with…


10% in US bonds (safe), 65% in US stock and 25% in foreign markets.

Unfortunately, Fidelity’s user interface is rather unintuitive. After wrestling with it for 3 months and investing all over the place, I got fed up and opened an account on Wealthfront. Before you click that link, I must warn you that it’s an invite link to open an account on Wealthfront. If you use it, you get a free $5000 bonus added to your pre-fee cap (ie. they charge a fee for after $10,000, but if you use the invite link, you get to hang out fee-less for $5000 more, so $15,000). Now, what is Wealthfront?

It’s a robo-adviser. Pretty much someone wrote an algorithm to invest people’s money based on risk tolerance as an input parameter, and now they’re selling that service. As of this writing I believe they manage over $2.5bln, so .. given their fee structure I would imagine they’re making a very healthy profit. This in turn makes me feel a bit more secure about the future of the service.

Finally, what type of accounts should you open? The common wisdom (which makes perfect sense) is to open and fill up your tax-free accounts first: IRA, 401k. Everybody has access to an IRA and you can start filling it up today. 401k is something that’s offered through your employer (or in my case, I have my own business, so I have a 401k through that). There are other options too, if you’re self employed, such as a SEP-IRA, which has a few limits on it, but worth investigating if you’re in that boat. Once you have your tax-free accounts filled up (say, you don’t have access to a 401k and you’re not self employed, so you only have an IRA account), you can open a regular brokerage account which is taxed just like any other income. Obviously only your capital gains are taxed, so if you make $1000 in interest, you pay $150, etc.

Investing is a complicated endeavor, but I strongly suggest you start as soon as you can. With the power of compound interest, you, too can be a millionaire. Start with $1000, add $1000 monthly, with a conservative 7.5% interest rate, compound every month… after 10 years of that you will have $180,000… Now imagine you’re putting away $3000 every month instead, that’s $535,000 after 10 years. It’s never too late to start, and it’s basically free money!


#RealWebApp, E2E, Part 2

The web application is called TopPerformanceNow and is built for a client who provides employee sourcing, training and developing services. You can find his page here (disclaimer: not built by me). I opted to go with Visual Studio 2013, though this app is likely the last I am going to build in VS2013. VS2015 has way better tooling and a plethora of front-end productivity improvements.

I always like to start with an Empty template and import the libraries I need via Nuget. Since this app is rather small in scope, I used Nuget to get KnockoutJS, jQuery, momentJS and pagerJS and just kept them in the Scripts folder. I kept the CSS (or in this case LESS) in the Content folder. Generally, I try to split all that stuff into its own App folder (and VS2015 does this with a wwwroot folder by default in the new project templates).


I chose to go with LESS. There’s no reason, really. I use SASS at work. I know some purists will rage when I say “they’re the same”, but I really don’t see any differences in my workflow. Functions, mixins, variables, nesting… both languages have it.

I split my LESS up into several modules: _Colors, _Forms, _Icons, _Typeface, _Reset, and individual page partials which all converged on App.less. These are all pretty self-explanatory, though one thing to mention is that _Icons contains the CSS I get back from icomoon that holds the icon styles. More on that next!


Personal preference, but rather than grabbing the whole font, I like to pick and choose which icons I really need and building a font out of them. Icomoon is great for that! They have some in-house icons, but you can also import fonts from tons of other libraries including everybody’s favorite FontAwesome (which I used in this app). I highly recommend checking out Icomoon if you’re looking for icons for your app. Make sure to check what kind of license each one has though.


Since we started with front-end stuff, might as well finish with JavaScript. Not much to say here other than since this is a pretty small project, I went with a non-modular approach. For larger projects with many moving parts, I usually go with NodeJS and Browserify, but really in this case there was no need. I split the JS up into different files depending on which part of the app people are accessing. For example, trial users don’t need to have access to all the JS, and regular users shouldn’t have access to admin JS. Theoretically it doesn’t matter, because everything is locked down on the server anyway, but I think it’s good practice to serve as little JS as necessary.

I used Knockout with pagerJS, which I found to be much more intuitive than Sammy. I used Sammy on my first KO project ever and I recall it was a huge chore. Pager is straight up just 3 lines of code to get working and all the routes are automatically wired up via bindings in the HTML. It’s magic, and it’s simple. Pager also allows you to use HTML5 history (not sure if Sammy does?) though it takes some guessing to get wired up, because the documentation on that is awful.


I didn’t build out a Web API infrastructure for this app, because I really only need one JSON controller and I didn’t want to add the Web API libraries just for a few methods. MVC can accomplish the same with JsonResult.

One mistake I made was not using the Role provider that comes with SimpleMembership to sort people into Trial, Normal and Admin. I store people’s state in the database in the form of an enumerator. It works, but thinking back on it, using Roles would probably have been more consistent. You’ll notice that I opted to skip the ASP.NET Identity stack here. As I wrote in my previous post

I have a few models and enums for holding data. I also built out 3 repositories for handling data access. In this application, the repository pattern was a no-brainer since it’s all CRUD.

Lastly, there’s a document processor class with 4 methods which each process the data I get from the database and turn it into document files.


I store all data in SQL, but I am pretty conservative with how I use the space. Previous developer who built the app 15 years ago stored individual fields as marked records (like, 28a, 14b) so each app user who had 2 forms per position and 40 fields per form had 80 table records per position. With average of 6 positions per user, that’s 480 records per user, and there are hundreds of users.

I opted to go a different route. Forms are stored as JSON blobs. Now a user can have 6 positions – that’s 6 position records, and each position has only 2 records in the Forms table attached. Forms are stored as a string in a Key:Value pair format. Keys correspond to form field names, so when parsing the forms in the middle tier either for retrieval or document generation, they’re trivially easy to process. This also gives me an opportunity to reuse code in both instances.


The page is hosted on Microsoft Azure’s Shared hosting plan and the data is stored in Azure SQL. Perhaps I’m a bit biased (I love Azure), but after my experience with mass shared hosting (GoDaddy) I’d rather stay away. The cost for the above is right about $15/month and it comes with the peace of mind you don’t get with GoDaddy.

Wrap up

This app took me just about 90 hours to build from start to finish. Granted it’s not very complicated, it allowed me to apply all I’ve learned to building out a solid web application from the ground up. I already have another project I’m working on now. This one is going to require the module/controller approach in the front-end. I’ve already created the solution for it in VS2015 and followed a pretty specific and rather different process than above. Perhaps a story for another blog post…

#RealWebApp, E2E, Part 1

I spent the past two weeks applying all I know about web application development to a real project for a real client. While I’ve built numerous websites for clients by now, this is the first time I actually built a web application outside of work (where I’ve been building web apps for 2 years now, so I guess it’s not that impressive…) I’ve built a couple personal projects (one of which can be found here) just to solidify all that I’ve been absorbing at work, but until now never had a chance to put it to use beyond the corporate environment.

The scenario for the project is: Users log in with an account created by the administrator and they can add job positions they’re hiring for to their account. Then, after filling out some forms, they can download Word Docx files pre-filled with the data from the forms filled in in the app. Easy peasy, you exclaim! This probably means you haven’t tried integrating with MS Office formats before…

In addition to the above requirements, I added a few things like a Settings panel in which users can toggle autosave, its delay, and the view mode (boxes or tiles) for the position listing. This panel can, in the future, be expanded to store more settings if the app grows. There’s also an administrator panel visible only to the Admin (first user in the database). In the admin panel, you can view, add, delete and edit the current users. You can reset passwords for them (not view passwords though obviously, since they’re hashed), change their status to Trial (there are some trial restrictions in place) and disable their accounts, which will simply prevent them from logging in, while preserving their data.

The app is built on ASP.NET MVC, using MSSQL as the back-end and KnockoutJS in the front. I used my favorite SQL microORM, Dapper, for reading and writing the database. If you’re an ASP.NET dev, you may be scratching your head now; “But Paul, you already had EntityFramework in place, why use a microORM?” In fact, I don’t ever use EF if I don’t have to. Actually, even at Microsoft we don’t use EF in every project. Usually when I start new ASP.NET projects, I start a blank slate and just add the libraries I need off nuget. I’m not a fan of ASP.NET’s Identity either, but 90% of my distaste is its dependency on EF. I heard that’s supposed to change in ASP 6. If it does, I’ll be all over it, because Simple Membership is pretty behind now when it comes to oAuth 2.0 and such…

Working with Knockout has been a total blast. I’ve been using it at work since February, and the more I do, the more I love it. The one and only drawback is its rather lackluster binding debugging support (there are Chrome plugins but they kinda suck – not like Ember’s chrome tools…) Sometimes I’ll have some binding issue and I won’t be able to tell what it is without hunting it down in Chrome tools via the stack trace, which can sometimes be 30+ steps long. That’s one thing that sucks about using frameworks!

In the next part, I’ll talk about the actual process of building the web app from File > New to handing off to the client.

A Year With Knockout

One year ago I was still working primarily in Backbone (at my job), but already looking into other frameworks. Earlier this year I thought I would be all into Ember. Alas, that was not to be. Since March 2015 I’ve been working primarily in Knockout. It’s been a blast!

Despite how Knockout markets itself – a data-binding framework – it’s far more than that. You can write an entire, complex web application with it. The new Azure Portal is written in Knockout, and it’s actually pretty incredible. To me, Knockout is the right mix of defined structure with freedom to use other tools and libraries without too much hassle. Backbone was too lax, and Ember was too rigid.

In addition to Knockout I’ve been using Numeral (number formatting), Moment (date formatting), Pager (for routing), and of course jQuery / jQueryUI plugins to beef up the UX. All this was initially tied together using ASP.NET MVC’s bundling feature which I find very convenient, but as the application grew in scope, so did the demand for modular code. To that effect, I took to NodeJS and Gulp+Browserify. It ties in with Visual Studio 2013 Update 5 pretty well, and with Visual Studio 2015 beautifully.

NodeJS is a bit of a chore to get started with initially, especially coming from the structured world of .NET, but a day and a few tutorials are enough to get up and running with the basics. Gulp is a Node package meant to automate tasks such as minifying and concatenating. Browserify is a package which enables modular code in Javascript, similar to RequireJS. Browserify doesn’t actually asynchronously load modules though, unlike Require… which I think is fine, because who does that in Web Apps anyway?? I would imagine most people who use Require just use r.js to compile a single package for clients to download.

Together with Node, Knockout is a beautiful experience. There are some quirks you have to get used to like prefixing variable names inside your HTML with module names, and instantiating modules inside your viewmodel before using them in the HTML to begin with, but once you master those, everything else just flows like water. If you’re looking for a JavaScript framework to learn or use in your next project, look at KnockoutJS.

boiled eggs

Perfect Hard Boiled Eggs

I will share with you what I believe to be the perfect recipe for hard boiled eggs. I generally make these when I need them for an egg salad, but they can of course be eaten straight up, or on bread, or whatever… Ok, here goes:

  1. Put the eggs in a saucepan.
  2. Pour cold water into the saucepan to cover the eggs about 2-3cm (1in).
  3. Turn the heat up to high and put the saucepan on.
  4. Put in half a teaspoon of salt – this may possibly help with the eggs cracking during boil.
  5. Once the water reaches boil, turn the heat off, but keep the pan on the burner.
  6. Cover the pan and set the kitchen timer for 10 minutes.
  7. After 10 minutes, take them off, pour the water out, and pour cold water in.
  8. Pour cold water out after 10 seconds.
  9. You can eat them now, or later, but no later than 3-4 days. If you plan on storing them, put them in the fridge obviously.

That’s it!