Wednesday, October 19, 2016

App Indexing & Sitemaps in Single Page Apps (Firebase + Angular)

    I started this article while working on the mypatco app and for the past three years or so I've been talking about developing single page applications. I always talk about the performance and not much on seo. With my other projects which require a more complex middle-ware I've looked at google's notes on how to properly setup for some example but found some of them just don't work or takes a considerable amount of time to appear in the results. Found a npm page that might be helpful grunt-jsondl, haven't tried it but below is how I handled in the website. However note that the station markup isn't working or just not showing up in google's testing tools.

<div ng-controller="TestController">
  <jsonld data-json="jsonId"></jsonld>

var myApp = angular.module('application', []);

myApp.controller('TestController', ['$scope', function($scope) {
  $scope.jsonId = {
    "@context": "",
    "@type": "Place",
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": "40.75",
      "longitude": "73.98"
    "name": "Empire State Building"
}]).directive('jsonld', ['$filter', '$sce', function($filter, $sce) {
  return {
    restrict: 'E',
    template: function() {
      return '<script type="application/ld+json" ng-bind-html="onGetJson()"></script>';
    scope: {
      json: '=json'
    link: function(scope, element, attrs) {
      scope.onGetJson = function() {
        return $sce.trustAsHtml($filter('json')(scope.json));
    replace: true
   Created the sitemap by hand really and wouldn't recommend it. I don't want to promote any tools that I can't say are legit but there are a few cloud based ones that can speed this up.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns=""> 

  1.      Its important to choose the correct schema but sometimes the Schemas overlap in meaning as well as logic. For example article and blog post. The end result is the same and format very similar. For the mypatco website I went with the TrainStation and TrainTrip.  
  2. AMPAccelerated Mobile Pages, is a very helpful way to tell google a single application application that it is mobile ready and has static content to server up faster.
  3. Android - Reminder to handle in a android app when using app indexing.

Sunday, October 9, 2016

D3Js Exploding Pie Chart Part 1

    With one of my current projects I have been worked on creating a way for users to click on individual pieces of a pie chart and slight pull out that portion of the pie. It's a small and pointless feature, something I like to call eye candy in the frontend world.  For people some people it illustrates the content better. To be honest I found myself interesting for the UX. Its fun for me to recreate in d3js since the problem is challenging.

   This isn't a math problem but more of svg drawing problem, at the point where d3js draws out the pie chart there is some calculations to the index to see it out of order but if I can understand the method being used then I can modify it to include the exploding property.

var explode = function(x,index) {
  var offset = 80;
  var angle = (x.startAngle + x.endAngle) / 2;
  var xOff = Math.sin(angle)*offset;
  var yOff = -Math.cos(angle)*offset;
  return "translate("+xOff+","+yOff+")";

    .attr("d", arc)
    .style("fill", function(d) { return color(; })
    .attr("transform", explode);
Partial Solution

Saturday, October 8, 2016

Intuitive Third Party Packages

   In relevance  to my package npm "flavorstrap" this is a little of a working progress for me and a few of my github projects I hopes it helps others. I've based this heavily on what I've seen others do  and what I think looks helpful to others. In that there enough context provided for others to go off from github package. I I face this problem with sometimes but I love to code so I spend the extra time to read someone else's code using a project as well. It helps if the documentation isn't there or if the code shows something the developer didn't think of.  Now this is just in my opinion and not so much a complain but advice for myself. I would definitely say I have used my share of third party libraries more often than actually written any but I do appreciate the ones well written. For example bootstrap and android's documentation pretty good and they even include some examples. However there are a couple of things I would suggest. For starters developers should be alert and aware of similar names to their own project and avoid confusions.

   I noticed a pattern with the names but not clear in the docs what the difference is. I had to use most of these libraries so I could know the differences, but still documentation would have helped.
  • grunt-contr-sass (ruby) vs. grunt-sass (no ruby).
  • grunt-htmlmin vs. grunt-contr-htmlmin
    If your not familiar with sass you would have even more confusion. Just do a simple search on nuget. I know which package I need or want to use but the problem is the same. Your needs may differ and I'm sure some those packages have their place. However we're just looking for the regular use case in most packages. It's not very clear what the difference are between particular packages and this is not only a problem on Nuget packages but also node's npm package. Maybe things are just not clear to me how they are setup or maybe I could have read a little more in depth on the library and find some information on why the packages might be setup that way.

Everywhere else 
    Use github, I'm not kidding its nice to see a package in multiple location and having a strong supported community. From what I've seen nothing else comes clearer than github repo's but I'm open to use whatever with third packages. I would like to nuget evolve into a more friendly interface as well as a platform for its third party packages. Until that happens, I think the second best example of how to document package could be npm package.

Just an example of Third Packages that I'm familiar with and pulled from my experience. 
  • API/Modules
  • Npm Packages
  • Orchard Modules
  • Nuget Package

Material Design for the Chrome App/Ext Store

    I don't work for Google but if I did I would show some love to the much needed chrome app & extension store. I would even take it further by making it have value to other browsers but that's another topic. Either way this article is able adding chrome's app/extensions to the store.

Taking the Google Play Layout and add Chrome App/Ext
Using the Google Play's layout as a template but fitting the needs of the Chrome Store's needs


  1. background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAABGdBT…DAS7ZcAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==);
Original Look

The Google Play Layout has a minor bug where if you have a cropped screen in half of the window and scroll right it will sometime make the menu disappear. It will reappear when you scroll down, if this was on purpose why not make it like a side-nav component.


Separate or Combined Frontend & Middle Tier Solution

   Agnostic code that you can pick and choice or reuse from the browser to the server is the ideal situation to be. I believe there is only two way to get there. By a nodejs server environment or a transpilers like typescript. JavaScript isn't going anywhere and probably will be transformed as a lower level language in future generations. Which a lot of JavaScript frameworks seem to completely do.

    So now some bit of my background on what I've done in the past and how I got to this way of thinking. Initial I started out with aspnet nvm and keep running into the concern of mvvm which is constant problem if your models done match. In aspnet mvc front-end is usually included in with the middle-tier. I have nested nodejs inside aspnet application and this was before aspnet core so it seemed like the right move. After my third job I wanted to completely move toward nodejs to solve this mvvm problem. However security and usability were major concerns my employer had so I was forced to make alternative choice to just handling the front-end as static html. I didn't stop there I went out and make nodejs application and I prefer node express for a lot of my applications but I felt I was leaving some behind in the aspnet world. Html helpers which I still love to use but with front-end technology the only choice was directives/component like solutions. Or a more challenging route render server side which third party apis and some kind of static develop setup. Just like I talked about in my one article. So there all comes back to mixing and un-mixing backend to front-end code.
   I've run into developers who compile their code into javascript but don't think that's a proper way to solve this problem. Typescript gets a pass because its a much better effort and project set out to solve this problem, not a individual's idea within a organization that none can contribute to or see. Which the reason is I have spent so much of my time to actually learn javascript rather than create a transpiler because not many projects can get support of a company. So if you can't write JavaScript I always encourage others to try typescript.