Posts

Showing posts from May, 2014

Ng-grid: Display Two Fields in One Column

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

"updated" field missing with Blogger

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'> <data:post.dateHeader/> </time>
Lookin…

Penguins Rising: Game Blotting

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 game. A…

Project: DuckSauce Notes Part II

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 3Managing 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 4gruntjs/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 to my preferences.

Sharing Blogger links on Facebook

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


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
<metacontent='yourUrl'property='og:image'/>

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.com/customsearch/answer/2595557?hl=en
https://support.google.com/webmasters/answer/34592

Error: No compatible version found: chalk@'0.4.0'

Image
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. 
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 same package I was trying to add.
https://www.npmjs.org/doc/json.html
https://gi…

Updating MVC4 to MVC5

In my last article on MVC, I updated Razor 2.0 to 3.0 and showed the difficulties of updating the Razor nuget package in a MVC application. This article picks up from there and since Razor 3.0 is dependent on MVC5 I can assume you have updated Razor already.

Typical errors you will see..
Method not found: 'System.Web.WebPages.IDisplayMode System.Web.Mvc.ControllerContext.get_DisplayMode()'.Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.Exception Details: System.MissingMethodException: Method not found: 'System.Web.WebPages.IDisplayMode System.Web.Mvc.ControllerContext.get_DisplayMode()'.
Updating the System.Web.WebPages to version 3.0 fixed this issue. However you may see more packages issues like it.

What you can do is try reinstall each package that appears to be broken like so..
Update-Package –reinstall <packageName…

Project: DuckSauce Notes

What is Ducksauce
    Ducksauce is a small pet project I am working on to make everyday work easier with css and javascript cleanups. The hope is to automate those cleanups in controllable way I see fit, and to also make my code more scalable with third party libraries.

Mission
Listen to CSS changes and separate them into a .less file.

Features (Just for starters focusing on css cleanups)
Console system to attach files/directories.Listen to CSS filesRemove changes and separate into a less file.Compile new less files with Unmodified Third party styles (Overridering the css results)Log changes.Refresh page to see the changes? I would like this but it might get annoying.Day 1

Challenges: Listening to file, watch changes, find what those changes are.
filesystems - Node.JS: How does "fs.watchFile" work? - Stack OverflowNode.js: Event Emitters and Listeners | ScribblingsAccessing the File System in Node.jsObserve file changes with node.js - Stack OverflowIssues: No issues.

Day 2Challeng…

Bootstrap Typeahead/Autocomplete

This UI feature goes by many names and whatever you call it is currently no included in the bootstrap project as of 3.1.1 but that might change in later versions. No all hope is lost, actually had found multiple alternatives to import this feature with no dependencies! My biggest concern I had at the start of my research for this feature was that I would have to include Jquery UI which as Autocomplete. Not that there is anything wrong with Jquery UI but I try to avoid adding too many third party styles into my applications. I also try to leverage the css files that I do have as much as possible. So below is two solutions that I am very comfortable with using and strongly suggest.

Typeahead/Autocomplete Projects
https://github.com/twitter/typeahead.js/
https://github.com/devbridge/jQuery-Autocomplete - Another approach which I have used.

Resources
jquery - Where is the typeahead javascript module in bootstrap 3 RC 1? - Stack Overflow
Install typeahead in Bootstrap 3, fix css overlay bug…

Npm Install Error - Invalid Package.json

I felt pretty silly for this error I was seeing on one of my project, but lucky for me nothing a good night's sleep couldn't fix. I'm a nite programmer but that sometimes takes it's toll. The first problem was the fact I put an 's' on my file name. It should be "package.json" not "packages.json" which I carelessly did but the second for this error was actually one I think many people run into. Which is syntax, I found my mistake pretty quickly but you could always use online tools to validate your json file or use the pacakge-json-validator package.

//package.json file
{   "name": "ducksauce",
  "description": "Web Application Tool",
  "dependencies" : {
    "open" : "*", <-- Here is the problem!
  },
  "version" : "0.1.0",
  "author" : "Anthony Fassett <XXXXXX@gmail.com>",
  "keywords" : [
    "app"…

Nuget Packages You May Not want to use

This is just a thought and in my opinion, I feel that there are certain packages in Nuget that include css files  in which developers should use with caution. A good example is Bootstrap, which you should try using less instead of your own css file other customizing the bootstrap css. The reason for this is because less allows you to separate your styles from the root of bootstrap and makes it simpler for later updates with bootstrap. Not to mention the possibility of changing the third party libraries that you might be using. If the library you are using isn't in a less format I would be worried about customizing it because it would only make things harder for when you want to move away to something else.
    I think most developers out there are using Jquery UI or bootstrap but not many are using less which puts a lot of projects in danger for restyling and restructuring their code. I've made it my goal to try and not to separate css files into more than one css in prod…

Galaxy S Fascinate SCH-I500 Notes

Javascript Focus event on IPad

This article goes in hand with one of my jquery plugins that I am creating. The purpose of my plugin is to store data items into a table. I'm not perceptually interested in writing out Sql so creating a plugin that can hand a database from a UI perspective is rather important to me. I know there are a few plugins out there that could achieve what I want but I wanted to take up the task as a learning experience. Either way that just some background information about this article, what this article is really about is a request that was given to me for my plugin that I could not directly met. The users wanted to have the Ipad auto focus on an input when a device returned some input via bluetooth. However because of how the Ipad's interfaced with input this was not allowed.

My Solution
There was a comment in one of the links that provided a possible solution but I think it was too much of a hack and didn't want to go down that road for such a small piece of functionality. …