Anthony's Blog

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

    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

    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

    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

    Apart from the original Penguins Rising game, I thought it would be interesting to allow the user to modify or upgrade their cursor for a particular gun. However this was not possible for Internet Explore at all, even for 11! In most cases when I can not implement something in one browser or another, I simply default to the original structure.  With though IE styling breaks completely when using custom cursor so I had to scrap the idea for now. My goal for Penguins Rising has always been to support "modern browsers" and "mobile browsers". IE9 is in that grey area but IE10 is a must and because of this I have to just use the built-in cursor styling which is how it is setup right now. Sadly this limits me to only what is available in the browser's styling. Just an idea of what could have been... Resources CSS cursor property How To Create an IE-Only Stylesheet CSS-Tricks  - Not helpful in my case. css - Custom cursor image doesn't work in a

    With little testing as possible I wanted to create a title for penguins rising that was styled and would resize based on the device. I knew how to achieve this using css media queries however I would still need to test my queries on multiple devices which would take more time to test than actually write them. So I wondered what if there was a faster way to do this. Looking around I found ways to achieve this but most required Jquery and creating an event trigger to update the text size. Which wouldn't be too difficult to create but I have removed Jquery from my solution for sometime now. Things I looked at for this solution Text (not changing it too often.) Font-size - scale to full width of the screen. Font-Style - Added this later but not all devices liked text strokes in css. The answer if very clear to me and one that at the beginning I considered, but I wanted to weigh all my options first. By simply making the Title a image and setting the width to 100% should

It's time to created a HTML game with a more efficient background. As it stands I have already created an effective way to display my icy landscape with the actual game load on top of the canvas. Making it so I don't have to clear the whole canvas to create animations.This is a great improvement verse what I had before,  it was a much bigger image and had everything inside it. So moving from there I separated the side borders and split them into two images. Using a Div around my canvas tag I set the left image as the background and the second image on the canvas tag itself. This was not enough I now wanted to see if I could use a single image flipped horizontally for the other side. The Setup < div id = "game" > < canvas id = "window" > Sorry but Canvas is not Supported </ canvas > </ div > First Attempt Doing some research I found a way to flip background image. The problem was the flip effecting both images and trying

Update     Adding a selected and disabled attribute works as well and doesn't require any javascript, however refreshing the page does not reset the value. Doing a hard refresh does reset the value (for firefox) . However there seems to be a placeholder attribute in draft (as of november 2014).  " When there is no default option, a placeholder can be used instead". However in the example the placeholder value is still selectable after a choice has been made. This may not be what you want, so combining the two attribute and the javascript below  guaranty the behavior I'm looking for.  I could even support older browser with a little work.     The Purpose of this article is to make a placeholder in select that should help prevents bad selections with and make it easier to validate if no selection is made. In this article I will assume you have Jquery and the Jquery Validation plugin installed on your web application and similar html code displayed like the the fo

Introduction Much of the material here is based on the book:  Programming in HTML5 with Javascript and CSS3 . This is just summary notes that I took from the book and expanded on.  Chapter 1 Purpose of this Chapter: To introduce primary tools needed such as Microsoft Visual Studio 2012 and Blend for Blend for Visual Studio 2012. Notes By knowing these three core technologies you can increase your marketability and give you flexibility to choose the company for which you want to work. A  comparison list  of Visual Studios VS Web allows web projects only (C# or VB) VS Express for Windows 8 only for Windows Store Applications Blend for VS 2012 provides the ability to create window store app. Visual Studio Express 2012 for Windows 8  and V isual Studio Express 2012 for Web  are free. VS contains a new arrange of features and here is a  list . Testing  - Debug mode and  a list of installed browsers . Finding the source of rendered markup - new  Page Inspector

Introduction     I have a lot of experience from web development so I decided to take a blackjack game that I created in JavaScript and just edit it enough to be published on the window 8 app store. I will include a lot of my experiences but also my opinion. It took me about a month to make this game, the content and the functions within the game. The styling I edited later in the game, but in the beginning it was very dull for the most part and not very metro style looking. Don't have the original image of what the game looked like but just take my word that it needed improving. Here is how it looks now... you can find it  here ! ...As the picture explains and what I have not told yet is that my game is called "BlackJack the King of Cards". If you would like to download the game you can find it in the market under free card games. Windows 8 App     Ok, so lets say you have an window's 8 app ready to go. You go to the Store tab top of your visual studio w

Introduction     This is simply a guide and in it will not will provide you with any answers to the actual questions that be on the exam nor guarantee that you will pass the exam. However I have taken the beta test now and can show you references to what topics that may be on the exam. So with that said I hope this guide helps and don't forget to comment if I leave something out.     On the  certification page  you will find a list of topics and the skills of measurements that will be required to pass the exam. Following these four areas will be of great help, however from my experience I can say that it is not enough. You much actual practice using these skills to get a better at them (good time to use  jsfiddler !). There many books that can help, and depending on your level of skill will point you to the right direction. However note that you don't have to buy any books or services to pass this test. I am only point them for purpose of being resources to you. Pr

Introduction This is my research for Penguins Rising and in my search for studies on how to create the ultimate web based game. This list of links were helpful in concepts as well as implementing code in to the game. Part I "A Framework for Game Engine Based Visualizations" Advance Your Education With Free College Courses Online - Udacity PEGI Pan European Game Information - What do the labels mean? Foxes and Shotguns animation - How can you get different objects working at different framerates working in html5 canvas? - Stack Overflow JavaScript Timing Events HTML5 Canvas resize to fit window - Stack Overflow canvas · html · WPD · WebPlatform.org console.log - Web API reference | MDN HTML5 Canvas Image Tutorial Function - JavaScript | MDN WebPlatform Docs · WebPlatform Docs · WPD · WebPlatform.org #AltDevBlogADay » Brewing Your Own Game Analytics Service Free Music Archive: Dubstep Box2DJS - Physics Engine for JavaScript HTML5 Certificate - Udacity