Anthony's Blog

After a long process of rebuilding a login page and since the first time I rebuilt a login page which was way back in 20012 or so. I've learned that a great deal of things but one change still comes to mind. I ran into an issue with ios/ie/chrome browsers "auotfilling" user & passwords. This auto-fill doesn't happening with the autocomplete function but its a new features. One that I've seen but ignored at that point because I haven't mess around with it. After all is said and done I choice to now use any of the solutions in my notes. I have yet to find a solution that I like meaning one that isn't a workaround. With autocomplete its simple to just disable but until this features has a html equivalent I will not be fixing it. As the behavior is built in and based on the browser. Meaning the user has more control over it then I do. Notes: Disabling Safari autofill on usernames and passwords Disable auto correct in Safari text input https://caniu...

One of the standards that I'm adapting on my own with real interest is handling accessibility for all my major applications. I like to think of printing last as a concern. I think the best practice that I've come up with helping me get in the habit is during the initial color design. Since I may or may not be slight color blind and hear way to often my colors are too light or don't match. I think matching part just comes from the fact I don't understand fashion. Which is why I was the same outfit, you can't mess up with khakis. In other words getting the habit is much the same with my applications with a little variety here and there. I'm not going for anything bold just modern, so here are the tools I use. Tools Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy! Accessibility Developer Tools - Chrome Web Store just a bit of caution don't solely depend on this, just like the mobile view in chrome

    I have written some articles on Solr and even more on AngularJs however when it comes to URL queries, I think a lot of production solutions do the opposite of what I'm about to suggest. I think the simpler approach is better and if major companies looked at their solution might find that their UI to be over cumbersome. I think if a URL is public it should be straightforward with what its values mean. This gives advanced users the ability to directly navigate and novice the ability to bookmark urls.        The problem with facets in search grid is that you have a limited number characters you can use. This is less of a problem in a post form but you won't get link for your novice users. I don't like the idea of a "bookmark button" - style UI where it provides the users with a guid that is unique to their search. So a get method approach is more appropriate for the behavior we want. At one point I thought it would be necessary for guid value kind...

    If I had to go back in time and explain to myself web development (primary what most call front-end) in a nutshell this is how I would organize it. I would purposely leave out explaining to myself any middle tier or backend frameworks as I would place those types of technologies in another category. Which may or may not be how others organize it but I'm open to suggestion . Hey these colors look familiar! Structures ( HTML) Not to be confused with styles, controls the structure/flow and order of things. Ignore tags like bold or italic because they kinda break this idea. The same could  kinda be said about  a break tag. Styles (CSS) - looks, not functionality but the two do work together a lot! Mobile first baby! Content (Other) -  separate  from all the rest but drives the app is in  Forget for a moment everything you know about databases, middle-tier, back-end or whatever there is that draw...

    Awhile back I created an application to display some data inside of a table but after it was all said and done I was then asked if I could make it so the information could be rotated. With that I thought I could easily implement this using CSS3 transition and rotate on the x-axis but I would much prefer doing this in a canvas.Which make this a great solution  but current my content is displayed in a table and isn't scalable this way, so it doesn't help for me. I could also use d3js, from what I've seen in the examples it could be easier to implement.     I did find that some created a solution to handle the issue with Css3 transition, where as you rotate the element the content around it does not adjust appropriately. There is reasons behind why this happens, but no proper way to handle it with just css . As you rotate a given element it does not remove or change any of the styles attached to it. So margin, padding and whatever else will still be applied ...

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

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

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

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

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

    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% sh...

      One day while I was exploring Google's Page-speed Insights to determine whether there was anything I could possibly improve with Penguins Rising. I discovered that I was not  Leveraging the browser cach e . Up to this point the only type of caching I had done was with the HTML5 cache manifest, however  this was  different than what Page-speed insight was advising me with and this was also what lead me to my question that is the  majority of what this article is about .        Question Lucky for me, I am not the only person to have asked this, but " What is the difference between a Cache Manifest and a Cache header? " As it stand with Page-speed Insight my current results with  Penguins Rising (will vary)  as you can see for yourself. Using Expiration in the Content Header You can set the expiration time however you like, I tested my application with 10 minute expiration date. //Inside the app.yaml...

    My goal here was to find or create a jquery editable table that I could custom to my needs with a little or no work and helpfully be easy to maintain. I also wanted to make sure that what I chose would not impact how I implemented my back-end. The following is the basic a starting point of what I am working with but not limited to... <table class = "table table-condensed" > <thead class = "storage" >< / thead> <tbody>< / tbody> < / table> From this point I would pull my table data in by either a model binder or simply create the table via ajax and appending it there. Still is without looking at how a plugin is design or needs to be setup so I might have to look at that before I begin implementing which I got with. I started my research by listing what I was looking for and what I thought I might have to customize. My Requirements  Input check for duplicates. character input limiting (no more than 12 c...

    Recently I was playing Penguins Rising on my nexus 7 and notice that the background music wasn't playing but strangely all the other sounds were. After a hard look at the code, I found no reason for the audio not to be work. So I could tell right away this wasn't going to be an easy fix. The first thing I did was check the support to see if   the HTML5 audio element  had any support issues. Since the support for the audio element seemed to be alright with what I was using, the next thing I thought was that it must be the attribute  autoplay . Its important to note that I am also using the loop attribute but I will return to that later. Example from Penguins Rising < audio autoplay loop > < source src = "content/ArcticWind.wav" type = "audio/wav" > < source src = "content/ArcticWind.ogg" type = "audio/ogg" > < source src = "mp3/ArcticWind.mp3" type = "audio/mpeg...

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

     When creating a static dropdowns list in Asp.net MVC, I have a two approaches that I like to commonly use. I know there are many ways to achieve this UI structure and I don't consider either one of the following approaches to be the final solution. However for awhile now  I have been using these two approaches  and I think they are  much  simpler  and easier to maintain  compared to other ways that I have seen . Rather than writing out the HTML select tag and all the options I take advantage of the Html Helper Dropdownlist. I avoid model bind since it is static and I don't want create the list outside of the view. I think this would only create more work to maintain and confusion for other coders if they new to my applications.  I did not come up with either solution  completely on my own and I actually forget where I saw them since it did take a while to find these approach in my research.   What's  impor...