HTML5 Snake Game Test

I'm currently studying Web 2.0 technologies, this is a test using HTML5 CANVAS.
Rendering real-time with script calculations, great for study, source of9lessons.
To play you need a browser that supports HTML5.
Using arrows to control the "snake".
Speed set on the script to a "normal" (perhaps?) range.

Good luck! XD

Blogger Image URL Pattern

Every image uploaded to Blogger is hosted in Picasa.
The server takes care of handling the image and resizing into different sizes.
Those you can choose by manipulating the URL.

Image URL

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1lIibHLWUuFPfiXJPmbA2_uw7-kuk8P6mCPWR8IL4MeYha3RsjeFUGemqvkUmuEq9iylKrnzSlz9GLS3kfGeH7ossaWynj_Q7F3x7jVHYcszUe8r9XgWoiIFrDVqohsl2dbq_xxcWMJ1R/s256/blogspot.png

s200	s126	s54	s20	s8

The size doesn't necessarily need to be a multiple, but any size. As it's by proportion.
s1600 is the original uploaded image size, and it's the limit, as the server only scale the image down.
This is useful if you have a big image, upload it to Blogger | Picasa and just manipulate the size through the URL.

Reverse Engineering on Blogger (Atom/HTTP)

Well, I wanted to create an Error Report feature to use within my tools.
Which would send me the data of any exception/crash my applications might cause.


To implement such feature I was thinking on, since I don't own any website, to make Error Report being actually sent as an usual comment on a special page I make on Blogger.

You can find Blogger APIs for .NET to study more about Atoms (RSS) and how they implemented it.
But I don't want to import such thing as this would require me to provide my own login information.
Even encrypted, anyone with enough knowledge can reverse-engineer it to get.
If one's willing, one does.

After some struggling I found to be better to send POST data using System.Net.WebRequest from C#.

Blogger requires some POST data to be sent such as:
(When Comment-Form is used as an iFrame)

Variable	Type	Description
securityToken	string	Token Hash to verify Autenticity
blogID	unique int	Blog UID (Unique Identifier
[pageID | postID]	unique int	[Page | Post] UID (Unique Identifier)
encodedIds	string	Cached Author IDs. (Encoded with UTF-8)
encodedSelectedId	string	Current Author IDs. (Encoded with UTF-8)
showPreview	bool	false to submit. true to return to Comment-Form with Preview Data.
photourl	string	URL of Photo
photowidth	int	Width in Pixels of Photo
photoheight	string	URL of Photo
openIdUri	string	if OpenID, it's URI
anonName	string	Anomymous ? "Anonymous" : Custom Name
anonURL	string	Anomymous ? "" : Custom URL
commentBody	string	Message as HTML (Encoded with UTF-8)
identityMenu	string	Identity Chosen. "CURRENT" | "NONE" | "OPENID" | "NAMEURL" | "ANON"

Using the following C# written functions I am able to send POST data.

WebResponse HTTP_Send(string URi, string QueryParams, string Method)
{
  WebRequest httpRequest = WebRequest.Create(URi);
  httpRequest.ContentType = "application/x-www-form-urlencoded";
  httpRequest.Method = Method;
  byte[] bytesParams = Encoding.ASCII.GetBytes(QueryParams);
  Stream os = null;

  try
  {
    httpRequest.ContentLength = bytesParams.Length;
    os = httpRequest.GetRequestStream();
    os.Write(bytesParams, 0, bytesParams.Length);
  }
  catch (WebException ex)
  {
    MessageBox.Show(ex.ToString(), "HTTP Request Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
    return null;
  }
  finally
  {
    if (os != null)
      os.Close();
  }

  return httpRequest.GetResponse();
}

string HTTP_Response(WebResponse httpResponse)
{
  try
  {
    if (httpResponse == null) 
      return null;
    StreamReader sr = new StreamReader(httpResponse.GetResponseStream());
    return sr.ReadToEnd().Trim();
  }
  catch (WebException ex)
  {
    MessageBox.Show(ex.ToString(), "HTTP Response Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
    return null;
  }
}

However, seems like, either some specific key is missing, or blogger know the data is being sent by an application.
Even with the request of the POST data running fine, Blogger does not create the comment as it should.

This code may serve for many purposes, allowing you to send GET/POST data to other websites.
(Examples)

// Send 'param1=Value&Param2=Value' via GET method to 'http://www.domain.com/'
WebResponse sendData = HTTP_Send("http://www.domain.com/", "param1=Value&Param2=Value", "GET");
// Gets the response in HTML
string responseData = HTTP_Response(sendData);

More info at comments.

CSS Tip: Outline

Some HTML Elements contains an outline when a element is focused.
It's such a ugly thing to have around a blog/website, but, you can remove it in Firefox.

Elements with Outline:	<anchor>
Elements without Outline:	<anchor>

CSS Snippet

* button::-moz-focus-inner, * a, * img::-moz-focus-inner, * input::-moz-focus-inner {
  outline: none !important;
  border: 0 !important;
}

*:-moz-any-link:focus {
  outline-width: 0 !important;
}

To remove outline from <input> elements, you need to blur the control once it gets focused:

<input type="radio" onfocus="this.blur();"/>
<input type="checkbox" onfocus="this.blur();"/>

Greasemonkey Script: "Blogger BlogTrap Removal"

When you preview Templates, POSTs and PAGEs in Blogger, you can't click on anything because of a CSS "trap".
This is just a small and simple script to remove this limitation.

Requirements

Mozilla Firefox
Greasemonkey Addon

Script Snippet

// ==UserScript==
// @name Blogger BlogTrap Removal
// @description Removes Preview Trap when previewing Pages/Posts on Blogger
// @namespace http://awtmk.blogspot.com/
// @include http://www.blogger.com/html?blogID=*
// @include http://*.blogspot.com/b/post-preview*
// @source ...
// @version 1.0.0
// @date 2010-11-17
// ==/UserScript==

(function () {
  document.getElementsByClassName("blogger-clickTrap")[0].style.display = "none";
})();

In case you don't want Greasemonkey you can bookmark the following javascript instruction:

javascript:document.getElementsByClassName("blogger-clickTrap")[0].style.display = "none";
void(0);

CSS Tip: Cross-Browser Compatibity

HTML_Element {
   Attribute: Value;  /* Works on ALL Browsers */
   #Attribute: Value; /* Works on IE */
   _Attribute: Value; /* Works on IE6 And Older */
}

Prefix # works on only.
Prefix _ works on 6 and Older.
Before it was used the prefix * that would work only in but it seems to generate invalid DOM exceptions on browsers.