Posts

Showing posts from July, 2014

Clicking Text Selects Corresponding Input

    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
<inputid="1"type="checkbox"/><labelfor="1">TEST</label>
AngularJs Solution
<inputid="{{$index}}"type="checkbox"/><labelfor="{{$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

My IE Mistake While Styling the Input Placeholder

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

Adding Q/A Sites to Documentation Pages

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

References
https://developers.google.com/appengine/docs/python/users/

Chrome Extension Project: Aptitude Words

    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 Overflowsending chrome.storage da…

Unity: Notes for My Next Game III

     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 MenuStart Screen - Exit gameEnd 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 but I did play around with the id…

Creating a More Intuitive UI with Bootstro.js

    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…

Javascript: The global flag with String.replace

     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

Angularjs: Blinking Syntax

    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. 

My Firefox Bug with Returning Csv Content

    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

Unity: Notes for My Next Game Part II

    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 ScreenCreating a Splash Screen in Unity - Platformer Tutorial #1 - YouTubeLoading Screen? - Unity Answers     Falling Object
How can I spawn enemies within a specified random interval?Unity - Scripting API: RandomUnity - 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: MathfHow to generate a random number inside Unity? - Unity Answers     Bonus
Blurry Textures, despite High Detail! - Unity AnswersHide mouse cursor - Unity Answers

Ng-grid: Start and End Items for a Grid

    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) { …