Anthony's Blog

    It's been a couple of weeks since I've released an update on this project, but much of it is due to the fact that I have completely reimplemented my approach. I now have a better understanding where browserify will come into place and where grunt will come into place. Most importantly I understand the v8 javascript engine which runs underneath the chrome browser; this is a major win for me. Here is my  previous article ... Day 1 Day 7: GruntJS LiveReload--Take Productivity to the Next Level | Openshift Blog I basically want to remove the need for LiveReload. Moving from CodeKit to Grunt Watch + LiveReload for Real-time JavaScript/LESS/SASS Compilation - Justin Klemm Another great example what LiveReload can do. Chrome Apps Office Hours: NodeJS in Chrome packaged apps - YouTube Example with Browserify but you can't using it against Grunt. Iced Blog - node js in chrome http://stackoverflow.com/questions/16788731/grunt-watch-multiple-files-compile-only

    This summer is going by fast however I think I got a lot done and I'm really surprised how quickly things are coming together. Like I said in my last article , I've played with Blender before. My goal for this week was really simple. Create a model, give it some animations and control it in unity . First Attempt (very basic...) Resources https://www.youtube.com/watch?v=J1mExXURsWk https://www.youtube.com/watch?v=FNntp5OOA30 http://blender.stackexchange.com/questions/3690/toggle-wireframe-mode-with-hotkey Cntrl-R - create more, "loop cut"? -  2.6/Manual/Modeling/Meshes/Editing/Subdividing/Loop Subdivide  BLENDER Tutorial - EASY Fully poseable hand in 10 minutes! - YouTube - audio is very low but very useful video Importing Blender into Blender After I imported my object I noticed on the back side one of the fingers was missing... Wasn't sure if this was something I did or a setting. Update  Solution:  One side of an object appears normal but the

    Web essentials has this really cool feature that allows you to convert your images to base64 on the fly which at the time it was a very new concept to me. I had no idea that you could use a string of data in place of the url but right from the start I got the impression that it wasn't very efficient. Not only that but I was pretty sure that anything less than IE10 was going to cry about it. My experience and gut were right, now IE support aside this is still a really cool ability to have but I did some research still to see if it really wasn't efficient. Which also appeared to be true, but I didn't test that myself. Still the reason behind why I might use this feature would be when you have a small web application and for whatever reason you need all the resources  to be inline with the html. A better scenario is if the whole html page was being placed in a xml as cdata. I've actually had to do this before with an Google Hangout application. Resources php - Wh

    For this setup you will need IIS 8.0 or higher because of the URL rewrites module. In my process of figuring this out I ran into some pretty funny infinite loops so watch out those if you're site is taking a long time to load. Most of this process is just using the URL rewrites, and what we are trying to do is make our application the homepage and have the CMS rest in the back making all links needed point to it. We could easily reverse this setup and make the CMS the homepage, or we could pull data from the CMS into our web application. Making some kind of widget built based on the CMS, which is easy to do if your CMS has an API  service already built out.    In this example I make the CMS seat behind my web application and routed the CMS's to a subdomain. There is also a legacy site which will seat next to the CMS on its own sub subdomain. If the url's within each application are relative then there is no need to modify them for this setup. Example of URL

    For a particular web application a user has selected to download a file but since the files is extremely large it will take sometime for it to return. In the process of write out this task, I knew already how I wanted the process to appear. However I didn't give it too much thought as to how I would implement it since I have multiple possible ways to approach it.     To make a long story short I ended up doing what I've seen before with Google Drive and just made a button that would direct to a new tab and return the content type in the headers. What this does is allow the user to see a response without impacting the whole page. Note that I used a button instead of a link. Inside the  button and create javascript function for the  onclick attribute. Inside that function I simply called  window.open . There is two reason why I didn't use just a link, the first is I had no clue what the link would point to until the user was done making a selection. The second was beca

    I've used zero's in my styles before but I think it has been an habit of mine to "px". In the end, and it was when I use checking out the features on Web Essentials  that I noticed this helpful hint. I think the benefits of choosing one over the over are very small. Something similar to choosing a comma or a double comma in javascript but I find myself in a grey area when it's one habit vs another. So what I've started to do is just use zero's instead. Not a very difficult habit to change but I need to be consistent so it has been more of a pain to go through all my projects and edit all the styles. Reasons Behind my Choice Saves space using single character. The definition is universal in all browser (zero is zero). There are a lot more reasons in the links below but these are the two the easiest to remember. Also just because I like to use bootstrap with a lot of my projects, I noticed that bootstrap already does this so that is another re

    This article is just a quick note for some of the things I have forgotten sadly Html but also give an example using AngularJs. Basic Html Solution < input id = "1" type = "checkbox" /> < label for = "1" > TEST </ label > AngularJs Solution < input id = "{{$index}}" type = "checkbox" /> < label for = "{{$index}}" ng-model = "field" ></ label > Thoughts    If I was going to make this more scalable I would need to guarantee that the id is unique. It might become a problem if I'm using multiple ng-repeats then the index would not be so special in the view , maybe I can do the index plus the number for that particular element. Resources Clicking the text to select corresponding radio button - Stack Overflow http://plnkr.co/edit/llSc8o?p=preview

   This was a simple mistake so the article is really short but what I need to do style placeholder color in a dark colored input box. I made the simple mistake of adding an extra colon, but take this as a learning point. Or just as a reminder (mostly to myself) that not all browser specifics follow the same rule. Whether it's single or double I need to be careful which one is appropriate. From what I know the placeholder in Chrome is double colon, IE is single and firefox is both. I don't need to write an article about every minor bug or problem I face but this was just one that I found interesting because I found myself asking why the subtle difference. Also are the difference consistent? Meaning that if I used browser specific stuff on another element is it always double colons for chrome and it's counterparts? I won't lie, I don't have time to explore this anymore than I need to. Quick Note    Not every style is a colon  or a double colon and there is a di

    This is another cool idea by Google which I think has gone unnoticed but it's probably just me but can see it on Google's App Engine documentation page. It is on there that you can see relative stackoverflow questions that go along with the documents. It even goes so far as to adding tags in the page for you if you choose to lookup more questions yourself. This is awesome and maybe google has been doing has for awhile and I just haven't taken notice until now. Still pretty cool and brings me to my point that I think this is something every project on github with documentation should start doing. A little sidebar with some community support. This can help and make a big difference even if your project is proprietary or small scaled. There is always something you could relate to in a Q/A site. At the time I viewed it References https://developers.google.com/appengine/docs/python/users/

    I am currently working on two chrome extension projects, however this one is more of a warm up for what is ahead. Not to be confused with my other Chrome Project Ducksauce and not that I worked very long on this but I really should get back to my Unity project... So ignore these until I'm free again. Notes to self.      Don't using the create context menu code in a regular script because everytime you right click. There is a difference from the background page and the extension popup page. Each has it's own devtool and console page. For the background you have to click on the link provided in chrome://extensions/  for chrome. As for the popup you can just inspect it like you would with any page. However if you reload or update the extension the window for inspecting it closes. Question How do I use the storage in the popup as I would for the background page? How to communicate between popup.js and background.js in chrome extension? - Stack Overflow sending c

     So like I did in  my previous article , I'm going to list off the things I was want to get done so that I can focus on just those things. Here goes...  Note to Self: I  don't  have a video demo for this week (life got in the way..) but I think it will play out much better for next week's. Mission So this week I have an good idea what my characters will look like. I'm played around with Blender before but never got anywhere far to create what I need for this project. I think my characters are simple enough so that I can finish one of them by next week. So not in this article but perhaps the next one. In Game Menu Start Screen - Exit game End Game (not exiting, just restarting the round.) Start Plate Form (Reason and Types.)  This is where the story comes in and the different levels begin to unfold. Create Story (No sneak peeks for this, but it's important to know I did worked on it.) Questions Do I need a Terrain? I don't think I need one

    Sometimes you can go to great lengths to implement a UI that is more intuitive for your users but still end up with some of them lost. In the past I have personally experienced this, specially when moving users from an old system to something completely new one. So what do you do? One approach that I was given was to write out documentation that could be passed out in an email attachment. However a lot of major website that I know and see don't this because they may not have their users on file. This wasn't the cause in my situation but still I wouldn't recommend it. What I needed was some kind of guide that would help users through a new workflows and after words if I want just for fun give the user a little reward. That last part is just something I think that would be good for exploiting some gamification concepts.     The points I'm really trying to make is that  users should not have to look up the information they need in a separate location and by using a l

     The setup is this; I have some content on a page that needs all pipe characters changed to a newline. However there can be multiple pipes characters in a single body of content. One approach that I used was the global flag in String.replace's method. If you use \g  you be warned as the flag is not standardized and you will lose some support for certain browsers. I can't say which ones but I do know that chrome does not support this or whatever version I was using that the time. Not that chrome was my only target browser, just that I took it as a sign for concern. The solution I would use is a regular expression and passed through with a string, much like the example shown in the second link. Resources JavaScript String replace() Method  Fastest method to replace all instances of a character in a string - Stack Overflow replace global flag in Chrome or IE, and how to work around it? - Stack Overflow regex - How to escape backslash in JavaScript? - Stack Overflow

    This is a issue I call the angularjs "blinking syntax" because for a quick second users are able to see angularjs syntax in the web page, which isn't good. This issue becomes a greater problem for those with a slow connection. Cause is simple, using  {{}}  inline, which is much slower compared to other methods. Instead one solution is to use the ng-bind inline or can also create a directive. Resource why ng-bind is better than {{}} in angular? - Stack Overflow inline conditionals in angular.js - Stack Overflow  - Also by using a directive you can separate your logic more. Making your code cleaner or easier to maintain. ng-cloak/ng-show elements blink - Stack Overflow  - This will not always solve the problem, but using this along with ng-bing or a directive I think is appropriate. 

    So this was an interesting bug that I encountered last week and it was just happening with Firefox. I'm not complete sure about the information I found but my guess was firefox  grabs it's file types from the register in windows. Either way my issue was what I was using for the mime type and below is what I tried in order. application/vnd.ms-excel  - This would for some users open up the file in xls and trim file name. application/csv - Worked fine for all my users. text/csv - Worked just like the previous one. I think this is the safest choice. I'm already treating it like a text file on the server side so this would more apparent in my case to use. Resources How do I map a .csv MIME type to the "Microsoft Excel Comma Separated Values File" application? What to set as mimetype for csv files to open in spreadsheet applications - Stack Overflow

    So like I did in my previous article , I'm going to list off the things I was want to get done so that I can focus on just those things. Here goes... Mission Splash screen (no artwork yet) Just a start button for now. Continue with falling Objects  make their fall more random. Instead of just making them round add some edge to them ( probably not as seen ). Bonus... Blurry Texture? Results Resource      Splash Screen Creating a Splash Screen in Unity - Platformer Tutorial #1 - YouTube Loading Screen? - Unity Answers      Falling Object How can I spawn enemies within a specified random interval? Unity - Scripting API: Random Unity - Scripting API: Time (Notes for myself ) Unity's JS API has a Math  class  called Mathf instead and it's methods are capitalized. Unity - Scripting API: Mathf How to generate a random number inside Unity? - Unity Answers      Bonus   Blurry Textures, despite High Detail! - Unity Answers   Hid

    With my recent experience using ng-grid, I came up with two dynamic variables that would display based on the location of where they were in relationship to a particular page. I wasn't sure how to find a specific example on this. Since most might wrap this up with pagination concept it's difficult to find something on this for Ng-grid.. Not that I need an example but I like to think of them as separate, or as metadata. Dependency      I could have made the dependency on a ajax  return call but I had multiple ways for the Grid data to be insert, so rather than set it at that point I just hooked in the dom. If you wanted to go the other route just change the  self.domAccessProvider call  to whatever you name your data object in the grid . As for the start number this is easier to handle, so there is no dependencies. Solution $scope.endItem = function () { var self = this; //Last page... if (self. maxPages () == self.pagingOptions.currentPage)

    I don't think I need to explain the setup here since the title explains it all and if not there are similar questions I found that can explain the question for me (in the resource). The Solution  Example , I didn't write this example but I did think of one way to improve upon  it. If we have already defined the styles as classes we can than use the $odd or $even in ng-repeat. Since $odd or $even are Boolean we can use either one with a inline if statement and give the <li> tag a class based on it. I haven't tested this but I'm sure it will work, what I actually am curious about is that in the example the definition of odd and even since ng-repeat also have these variables. I wonder if they would ever have a conflict? As a side note for myself note that the example isn't in a un-order list but rather a div . That could another possibly reason behind my issue below. A Possible Alternative Solution column-count - CSS | MDN  -  Example Problems

    With my first attempt, I started to look at what Google Game Services to see what it had to offer for real time multiplayer but quickly found my answer in the documentation. Game Service " Real-time multiplayer is currently only supported for the Android platform." So I looked at Google Hangout as an option. The example I found helped me test out this theory and proved that creating multiplayer mode would be possible. However there was minor issues with latency as the example code shows and also ways to handle it. I didn't publish any code on github since there is a lot more for me to do and this year  my plans  are  to start working more on my other games. For now its just important to make note of it so that I can pick up on it later... Example sendMessageApp.xml - google-plus-hangout-samples - It's sample code... for Google+ Hangout Apps https://developers.google.com/+/hangouts/resource-management line:188 gapi . hangout . data . sendMessage (        

    So you want to have multiple blogs and on top of it all you need to create a different work follow for each blog? One example that I have is a process that I created which allows for two types of workflows. The first is where users are monitored by a manager and the second is one without. In my particularly case the two types of blogs even had a control group that had access to both.     The first problem I saw in my case was with permission since some of our permissions are global where the blog modifier has access over multiple blogs and users that don't should only be aware of their particular blog. By default Orchard's blog content type is a container in which it is a single type allowing child's of that type but this does not allow use to configure children's permissions.      So here's what I did create the two blogs as custom content types where they act much like a blog post and really we don't need them for more than that being in my case of cour

    I love the Bundling and  Minification  feature in Asp.net MVC (4.0+) but sadly I couldn't find a similar process in Google App Engine. So I went looking to create it, but there was a few work arounds I had in place. For example for my styles I simply used Less.js but for my javascript I would have to either pass them through a minifier.     In order to create the best web application on Google App Engine you need to be able to bundle and minify your resources. Last week I looked at externally improve this speed of the game "Penguins Rising" which is hosted on Google App Engine. This externally services was  PageSpeed Insights  and managed under Google's  Webmaster Tools . Which is a little confusing of where I need to go or use for my Application since Webmaster tools is separate from Google API Console. Research for a Python Solution Approaches to minify js and css in grails applications - Stack Overflow Python script for minifying CSS? - Stack Overfl

    I've added some new features to my blog but most of it has probably gone unnoticed with what can directly be seen. So this is what I've done, first corrected any 404's and fixing broken indexed pages.  Replaced images with more compress versions and combined styles as well as scripts.  The other stuff I did is a little harder to document since it was varies based on what tools I was looking at but overall I simply just made my blog better for indexing or displaying in search results. Resources Webmaster Tools: 404 Redirection - YouTube DMOZ - the Open Directory Project Yahoo Directory Listings Google Product Forums Google Authorship Photo Snippet in Search Results Not Author Dependent Developer's Guide: Protocol - Blogger — Google Developers How to Add a Google Sitemap to your Blogger (Blogspot) Blog What are sitemaps? - Webmaster Tools Help Tools Index status - Webmaster Tools Help Search Engine Optimization (SEO) Tools | SeoSiteCheckup.com PageRank

    I've been using NPOI for sometime now and was recently asked to create a process to output some data in a csv for better support. I was hoping to bring NPOI in the mix but I had to ask myself does  NPOI support CSV/TSV? , simply put no. Alternatives http://filehelpers.sourceforge.net/ https://github.com/MarcosMeli/FileHelpers Library Version - Reading/Writing Project Version - Server/Storage Features included. And... There just doing it my way. Personally speaking I didn't like jumping into FileHelpers, I felt was much more overhead than what I need so I looked at creating a small snippet of code for myself. Unlike with NPOI, I also didn't like from what I could see was examples that needed a model to be passed in. Either way, I will try to post an update when I have finished that piece of the puzzle. Resources Returning in the middle of a using block - A question for the code examples I saw. asp.net - Response Content type as CSV Back to Basics - Keep

    The reason I wrote this article was to create myself a mission of tasks to complete. A lot goes into a game and I already know that I need to narrow down my scope for this game. Especially if I want to have something really show in the next couple of months. So here is my focus... Mission Create landscape (slope, sky, borders) Make it so I can't fall off, it's annoying. Landscape Texture keeps scretching. First person view single player. Detect collision with falling objects Destroy player for now Repeat falling objects spawn multiple randomly. Create a timer for when a new object spawns. Resources for Landscape Task      Unity - Manual: How do I Make a Skybox?      Unity - Manual: Lightmapping Quickstart      How do I make a sky using skybox?      How to make a texture tile and not stretch      High quality skybox / space Resources for Player      What is the best free 3D modeling program to use alongside with Unity?      Unity - Scripting API

    I was working on this idea for Penguins Rising when Google App Engine was relatively new so this solution didn't come until later in my research. Either way it good to spread the word and get an understand with what I attempted. Solution Google Cloud Platform Blog: Using GitHub for Push-to-Deploy Problems I have yet to created a process that takes advantage of the continuous integration in penguins Rising since most of my code is built in javascript is would be nice to have a bridge between  phantomjs  and  Travis CI . Not sure how it would work since Google app engine would the notice for code pushes at the same time when I check in and Travis would have to tell G.A.E that the code cleared. Resources https://gist.github.com/benbeadle/5185679 d6y/example-webhook Uploading, Downloading, and Managing a Python App - Python Python — Google Developers Webhooks | GitHub API Local Unit Testing for Python - Python  - This showed the most promise.

     Its important initialize a game if and when it is ready. I probably spent probably about two weeks looking for examples of this idea.One thing I was hope to get from this process was a way accurately update the loading and give the user a percent of when the game has loaded.For accurately updated the loading bar the best I have come up with is to have counter based on the number of assets and after each assets is loaded update the bar. The following setup is for the start button to change when the assets are loaded.   <button ><span class= "label" id= "Gamer" > Loading </span></button>     Follow code is taken directly from the example on  HTML5 Rocks  but I collected it into a single script and it proved to be very useful. I was working on some logic to queue not only images but sounds because more often than not audio files are larger than image files. Keep in mind though there is not a universal format that is supported like

    I wrote this little snippet for some requirements a while back but since it's so general and if it helps the project to have a quick template to grab it I think it would be much greater to share. Also I was just wanted to write out the documentation as I was learning Angularjs along with ng-grid for the first time during the time I wrote it. So it should be clear that the dependencies are Font-awesome ,  Ng-grid  and Angularjs for this snippet. When I wrote this when I was using Angularjs v1.2.16 stable, font-awesome v4.1.0 both it should not be a problem moving forward but with Ng-grid I used v2.7. It may break with later version as I know a lot has or will change in the template. This snippet should work in all browser but I only tested for Chrome, FireFox, IE8 and greater. My Code $templateCache.put("headerCellTemplate.html", "<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng

Task For ng-grid I have a set of fields in which they are pulled in via ajax however, when I have setup the cell template I need to not only display one field as a column but instead in the first column with the second another field. Solution I feel the documentation wasn't very clear on this point but the solution is simply using row.getProperty()  with the field you want in quotes. Plunker Example  using two column in the same column definition. Resources Defining columns · angular-ui/ng-grid Wiki · GitHub Templating · angular-ui/ng-grid Wiki · GitHub cellTemplate and grouping: can I change the template for the 'grouping' row - Stack Overflow how to apply field on cell Template using ng-grid - Stack Overflow

    This was a really fun problem to solve, and helped expand my knowledge with Rich Snippets. A lot of the information that I found on this issue was not helpful and came down to me reading hours of documentation mostly because I didn't know what I was looking for. The best things about this error was I that I could use  Google Structured Data Testing Tool  to instantly see my results with my code. When I was working on this issue I made sure to backup my Blogger Template, I would do the same. Problem  Update field missing in Hatom markup which throws errors in Google's Rich Snippets and probably other search engines as well. Solution - Should be wrapped with class='hentry'  < time class = 'updated' expr : title = 'data:post.timestampISO8601' > < data : post.timestamp / > < / time > < time class = 'published' expr : title = 'data:post.timestampISO8601' itemprop = 'datePublished' > <

    This week I took a good look at the repository history for Penguins Rising and I was  surprised  to see that this project started on,  June 4th of last year. I suspect that I probably spent more time  developing a strategy more than executing my code. That doesn't mean I didn't have a clear idea what I need to do but just that I was adding too many additional pieces.  Ironically this problem was actually the reason why I started working on the project. With my other projects creating a strong baseline for games can be extremely difficult. Sitting down and hammering out ideas that sound good in theory vs. a realistic approach can be seem impossible for me without writing some code So like my other project I found myself constantly wanting to add my own twist to Penguins Rising and diverged from the baseline of the original game. Strategy  Seeing this has made me hold off on many of my projects until I have completely written AND settled on the ideas that go on behind the

Working on the second part of my project... I now need to automate bootstrap builds and compare the bootstrap's unmodified version of bootstrap to the new styles that I have added or modified on the bootstrap compiled css. From there DuckSauce should separate the style changes and place them in a .less file and recompile, which will then override or append the proper styles. Day 3 Managing module dependencies - How To Node - NodeJS package.json  - More reading... Getting started - Grunt: The JavaScript Task Runner  - Docs, docs and more docs Moving from CodeKit to Grunt Watch + LiveReload for Real-time Compilation  - Lots of help Day 4 gruntjs/grunt-contrib-watch  - This is the direction I am heading now! No compatible version found: chalk@'0.4.0'   - Helping myself. This week had to cut my research a little short but I feel I am really close to a solution with little effect on my part since a lot what I need is already built and simply needs to be configured

    Publishing to all my media profiles can be a tedious task which is why I use  IFTTT  ( thanks to a colleague for introducing to it). However I notice a small problem with facebook, which selects an image that is apart of my social media profiles. I didn't intend for this to happen but it only appears to happen when I don't already have an image in the article that is posted. Watch out for images greater than 200x200! The image I originally used was greater than 200x200 and because of it facebook simply cropped the top and bottom. With a quick adjust in gimp I was able to correct this and now appears just how I want. Solution < meta content = 'yourUrl' property = 'og:image' /> Final look in the thumbnail Resources How to show particular image as thumbnail while implementing share on Facebook? - Stack Overflow Facebook Debugger tool https://ifttt.com/ http://ogp.me/  - Mostly interested in  og:type https://support.google.

    This error actually had me stumped for a bit but that's because I thought it was something I was doing wrong. However after looking around I found that I simply needed to update my Node version. Rather than getting too deep into the technical details, I will just list my researches. I forget what version of Nodejs I was using before the update but with one simply click all my problems went away.  Error: No compatible version found: chalk@'0.4.0' The reasoning behind my thoughts earlier was because of my use with the mark ">= version" in my dependencies package.json file. This attempt was made after looking into the documentation  which I noticed that grunt-contr-uglify requires grunt 0.4.0 or great. So this all started that point on with my research. Resources node.js  - Note to self update Nodejs! Error: No compatible version found: chalk · Issue #23 · segmentio/metalsmith npm install fails · Issue #163 · gruntjs/grunt-contrib-uglify  - The