Silverlight Form Submission using the Enter Key
Sounds ridiculously simple but still I need to look it up over and over again.
So here it is, documented once and forever: How to catch the Enter key (to trigger a search form submission for example).
XAML:
<TextBox x:Name="txtInputField" KeyUp="txtInputField_KeyUp" />Code-behind (C#):
private void txtInputField_KeyUp(object sender, KeyEventArgs e) { if ((e.Key == Key.Enter) && (txtInputField.Text.Length > 3)) // feel free to remove the length limit { // submit form or whatever you want to do this.SubmitForm(); } }
Note: I've added a clause so that the form is only submitted when the user has typed a minimum of 3 characters which makes sense when hitting a service for example. Feel free to remove that.
Including Tweets into your Webpage
Very simple and effective. I started off researching into php libraries for twitter before I settled on a very pragmatic approach which I'd like to share here. I separated the code into smaller bits for clarity and better understanding.
Somewhere in your code include this HTML snippet (style the HTML using CSS id selectors):
<div id="twitter-container"> <div id="twitter-container-content"> <!-- tweet retrieval in here --> </div> </div>
Copy and paste the actual PHP tweet retrieval code into the section above. Don't forget to rename the screen_name to whatever your twitter handle is
print("<h2>Latest Tweets</h2>"); error_reporting(-1); ini_set('display_errors', true); $user = new SimpleXMLElement('http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=michaelgaigg&count=3',null,true); foreach($user->status as $status){ print("<div class=\"twitter-entry\">"); print("<div class=\"twitter-entry-text\">".renderUrls($status->text)."</div>"); print("</div>"); }
Add this PHP helper function (maybe you have a tools class) that will parse the tweet and detect hyperlinks which are then wrapped into the HTML A tag so that they become clickable.
function renderUrls($originalString) { $returnString = ""; $stringToArray = explode(" ",$originalString); foreach($stringToArray as $key=>$val) { //$URL_Validation = ereg("^[^@ ]+@[^@ ]+\.[^@ ]+$", $val, $trashed); $returnString .= (substr($val,0,7) == "http://") ? "<a href='".$val."' target='_blank'>".$val."</a> " : $val." "; } return $returnString; }
That's it, no magic!
Automatically Populate a Switch Statement for an Enum
This one goes out to Selim - I love your 'lazy' way of programming. Here is one gem you showed me in Visual Studio:
How to automatically populate a switch statement for an enum
1.) Define your enumeration
2.) Start typing "switch"
3.) Hit the [tab] key
4.) Type the reference to your enumeration
5.) Hit the [Enter] key
6.) Voila, all case statements are auto-populated.
Additional Tip
If two cases are identical, simply leave the first one blank (without break;) and the compiler will automatically move on to the next statement.
case FoodItem.Cake:
case Default:
// do something here that applies to Cake and default
break;
How to use the Google Font API
If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's
- easy to implement (as I will show)
- well supported by IE, Firefox, Safari and obviously Chrome
- open-source
- free (I should have mentioned first huh?)
End Result
Code Example
<html> <head> <link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'> <style> body { font-family: 'Tangerine', arial, serif; font-size: 2em; } </style> </head> <body> This text is in <strong>Tangerine</strong>. </body> </html>
Implementation
The important parts in above code are to embed the font into your page through the
Link
The link element referencing the google api and your desired font family.
<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'>In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible.
The variant parameter can be omitted for use of default.
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.
<link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'>Style
Use the font within your style sheet by simply referencing the font-family:
body { font-family: 'Tangerine', arial, serif; }Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android).
Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.
Tools
Font previewer
Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.
WebFont Loader
Look into the WebFont Loader for getting more control over loading the right fonts at the right time.
The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.
UPDATE: Chris Heilmann just posted a REALLY nice post about Controlling custom fonts with the Google WebFonts API.
What about you?
Post your link if you are using the Google Font API already. I'd like to see some really creative uses.
Are you using any other Font library?
The importance of the JavaScript parseInt radix
Problem:
Just recently I had to implement an HTML form that allows users to enter percentage values. Like every good programmer I added client-side validation to check that the input values are between 0 and 100.
Using the JavaScript function parseInt(txtValue) with txtValue being the value of the input field our tester was able to submit the form with a value of 0137.
My first reaction was to restrict the maxlength attribute of the input field to 3 characters only. Even though this is a good and recommended practise there was clearly something else wrong.
Explanation:
The parseInt() function parses a string and returns an integer. The signature is parseInt(string, radix) with
- string (required) being the string to be parsed, and
- radix (optional) a number (from 2 to 36) that represents the numeral system to be used
If the radix parameter is omitted, JavaScript assumes the following:
- If the string begins with “0x”, the radix is 16 (hexadecimal)
- If the string begins with “0”, the radix is 8 (octal)
- If the string begins with any other value, the radix is 10 (decimal)
Solution:
So, what happened? Because I forgot to specify the radix and our QA tester tried the (however unlikely) case of 0137 JavaScript assumed it was an octal number and returned a value of 95. Lesson learned: Always specify the radix (if it decimal set it to 10
!!!!
PS.: Only the first number in the string is returned!
PPS.: Leading and trailing spaces are allowed.
PPPS.: If the first character cannot be converted to a number, parseInt() returns NaN.


![Hit the [tab] key Hit the [tab] key](http://www.mgitsolutions.com/blog/wp-content/uploads/switch02.jpg)

![Hit the [Enter] key Hit the [Enter] key](http://www.mgitsolutions.com/blog/wp-content/uploads/switch04.jpg)


