Posts

Material Angular Time Picker

Image
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 mypatco.org 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.

Problem
   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

Image
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 play.google.com 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-COLOR: #FFC107

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

Original Look



Note 
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.

Links:
 redirect https://chrome.google.com/webst…

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.

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

Posting Null File Input in Dataform Via Ajax

This was actually quite annoying and was needed since the api I was given by another developer won't change it so had to go around him to achieve this. To be clear I was posting a form and inside it was a file input with some other input text values. The file input needed to always be included even if it was null...Don't ask me why.
Common Errors 
These errors can be corrected from my notes.
Unexpected end of input response from wp_handle_uploadUnexpected end of input Notes
Create File Objectvar f =newFile([""],"filename.txt",{type:"text/plain", lastModified: date})Append file to form object form.append("blob",blob, filename);aFormData =newFormData($("form").get(0));Just check the length of files property, which is a FileList if( document.getElementById("uploadFile").files.length ==0){ console.log

Fixing a Windows 7 Machine

Sometimes I have to work in an environment I disagree with and its in those situations I learn the most because I don't just accept my situation. I adapter to improve them. Windows 7 is already out the door but some places hold on to it like its all there is. I'm using windows 10 to work on my personal projects and can say as a developer it is a lot easier to manage.

Fix Sound crash
This is related to the C:\Windows\System32\audiodg.exe  but restarting this process sometimes doesnt fix the problem so do the following.
Right click on My ComputerChose ManageSelect Device Manager in the left panelExpand Sound, video and game controllersFind your audio driver and right click on it.Chose DisableRight click on the audio driver againChose Enable
Roaming account & Machine ProfilePath
/HOMEDIR:pathname Sets the path for the user's home directory. The path must exist. /PROFILEPATH[:path] Sets a path for the user's logon profile <path> …

Using Html Entities rather than Icons

This article is my opinion on the subject of html entities vs. png or icon files in a web application. If you have been watching bootstrap and seen the beta version of bootstrap 4 you might have seen some of the examples using entities. Initial I thought this was an improvement and in a lot of ways still do. But now I have given it some thought about the longer term of solution. I still think font-awesome is a much better choice to go because of the ability to modify the styles or simply create custom ones in a svg.  I know entities are nothing new but just wanted to write out why I would use them in some cases and not others.
Use case for Entities For one of my sites I actually used the up and down triangle entity. I think it’s a good fit for one the ui-grid and other javascript libraries that require some kind of indicator of sorting. In this situation it’s really a grey area of whether the icon should be an icon or entity because in this use I'm not going to style it all that…

Dynamic Development to Static Deploy

I believe this is an approach beneficial to any application for performance reason. If an application needs to be scalable but can remove the dynamic references there is a opportunity for improvement. With task runner or build process like gulp, grunt and asp.net mvc's bundle for example this is the same solution. What I'm point to is the things I want to create in javascript but don't necessarily need to be dynamic. For example Angular's template property with directives or component's and even routes. While I do like to use templateUrl in development for performances reason I want to include it in the statement as a template. If I'm trying to make the most of my code I need to inject directly
but for validation or organizational reasons I want to point it dynamically.
   This isn't a new problem in the computer science field but I think a lot of web developers will agree to injecting regardless if its development. It makes the code a little less manag…

Top-Down Development

Image
If you ask me what my development style is like? I would have to describe it as a form of top-down view with a model view approach. I've been describing my approach to build web application this way for a few years. Every now and then I encountered a developers who will agree with this approach. I guess you can just take the definition from wiki page but really I have my own way of marketing it.     "Throw everything away thing and get ready to start fresh. That's just how it is with every new javascript framework and I think it’s safe to say if it not middle-tier or backend code get ready to rebuild it. This is actually an awesome thing and you need to believe it because forcing development to the backend or middle tier every time something new comes along isn't realistic. Besides why not have the biggest impact on an application's lifecycle with the least amount of work!?"     This is how I marketed my approach it probably could use some work for some dev…