Posts

Showing posts with the label Html

Array Value Url Queries

Image
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 of system. Wher…

The Four Components of a Web Application

Image
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.
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 draws your users to a website. Focus on just the meaning around the fact that all information is content and can be located elsewhere.…

CSS3 Transition Rotating Does Not Fit

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 but also as you rotat…

Base64 images in Web Applications

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 - What are the …

Html: Download Files and Respond

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 because I…

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…

Ng-repeat: Order a List Vertically rather Horizontal

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 Faced
     I believe…

Penguins Rising: Possible Multiplayer

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(
          JSON.stringify(());

HTML5 Game Asset Manager and Loading Screen

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><spanclass="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 images.

<script>…

Penguins Rising: Html5 Custom Cursor Support

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


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 all IEs? - Stack Overflow

Penguins Rising: Responsive Text with the Title Screen

Image
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 have no probl…

Penguins Rising: Caching in Google App Engine

Image
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 cache. 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. QuestionLucky 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 default_expiration:"10m"


Warning
Once you set the expiration in the header it will…

Research on JQuery Editable Table Plugins

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 chars).Highlighting if a in…

HTML5 Audio doesn't Autoplay for Chrome on Android

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
<audioautoplayloop><sourcesrc="content/ArcticWind.wav"type="audio/wav"><sourcesrc="content/ArcticWind.ogg"type="audio/ogg"><sourcesrc="mp3/ArcticWind.mp3"type="audio/mpeg"></audio>
Currently I have for my solution is to simply st…

CSS Side Borders for a HTML5 Game

Image
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
<divid="game"><canvasid="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 to get the images to face the rig…

HTML Select Placeholder

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 following...
<se…

A Static DropDownList for ASP.Net MVC

Image
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 important to take away in this article is that if you look carefully you will se…

Checkboxes, Radio and Button Inputs

The purpose of this post is to think out loud and remind myself the types of inputs available for HTML. Three that I most commonly use are the radio, checkboxes and a input type button (not the button tag). Which are the focus of this article since none of them allow me to achieve what I want.

The UI I want:      I want to give my users a place to select from a group of item and only select one item as well as give them the option to deselect that option if they change their mind of selecting that set of group. This is how the input  check-boxes but without the grouping like a radio button. So really combining the two (radio and check-boxes) types of input together. You have the look and feel of a check-box but the logic of a radio and the add logic of unselecting from a check-box. There are other types of inputs/UI's that I did not look at but this was just a starting point for my research. 
Radio Button     Here is an Example of what a radio button does. As you can see once s…

Chapter Notes. Programming in HTML5 with JavaScript & CSS3

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 1Purpose 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 StudiosVS Web allows web projects only (C# or VB)VS Express for Windows 8 only for Windows Store ApplicationsBlend for VS 2012 provides the ability to create window store app.Visual Studio Express 2012 for Windows 8 and Visual 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 featureImproved IntelliSenseReusable MarkupAutomatic R…