Loading Spinners inside Modal - Bootstrap

This solution for both static html and can be setup inside directive for angular 1.X. Just like with some of css3 I created awhile back these spinners ready as soon as the client hits the page hence way there's a static version.  A directive could be made to for dynamic situations like http requests. This implementation goes inside div or inside another component, while the global spinner closes the children and takes over.
  <div style="position:relative;height: 95px"  ng-show="data.length == 0">
    <div id="my-modal" class="modal fade in show" style="position: absolute">
      <div class="modal-dialog" style="width: 100px;margin-top: 2px;">
        <div class="modal-content">
          <div class="modal-body">
            <div class="spinner"></div>

Why you might want to use Amp

Currently working on a blogger template that is completely stripped down to bare bones to setup a AMP site. This just a list of reasons why you start using AMP at least for maybe for blogs which I'm more interested. I wouldn't recommend for business sites just yet. Unless you're site is very simple and straight forward or mostly middler-tier based anyway.Pro'sEverything in a AMP site is styled directly in the beginning of the site, no external stylesheets (a huge performance boost).Global styling forces developer to think globally about their styles. So the styles run more like a style guide.Styles are limited about the total amount for AMP making developers to do more with less.No inline-styles this is a plus because there is no surprises for other developers jumping in or modifying (look at cons).No inline javascript, where this is the same for inline styling.No external javascript, this is really something you will want to know before getting into AMP and you should…

Material Angular Time Picker

Continuing off my article on android's material timepickers I wanted to include this feature in the web based version of mypatco. I don't think it will be officially included in the material angular project but just something I could have as my own and if anyone comes across it to use it just as any other component. The key difference with timepickers vs. datepicker just picking time, since time is a more necessary feature for cases like notifications or alerts/alarms.

First and foremost I recommend checking out the project which I forked to personalize and strip out any code related to datepicker. Since the datepicker is already implemented in material angular, instead I'm just going to focus on time pickers.  The rest of my notes are in the repo's issue tracking. You may see the results on for an example.

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.
HTML <divng-controller="TestController"><jsonlddata-json="jsonId"></jsonld></div>Javascript var myApp = angular.module('application',[]); myApp.controller('TestController',['$scope',function($scope){ $scope.jsonId ={"@context"…

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+")";} g.append("path").attr("…

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 d…

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


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.