When Getting 404 Error While Using FancyBox 1.3.4 jQuery Plugin

According to the article http://stackoverflow.com/questions/6591288/im-getting-404-errors-with-fancybox-images, there are 404 errors occur while using the FancyBox 1.3.4 jQuery plugin. I had the exact same errors and, because of this, my IIS has almost gone down to write server error logs.

In order to fix this issue, without modifying the plugin core, simply add the URL rewrite rule into your web.config.

<configuration>
	...
	<system.webServer>
		...
		<rewrite>
			<rules>
				...
				<rule name="Fancybox image path correction" stopProcessing="true">
					<!--
						Assumptions:
						- the page URL is http://yoursite.com/contents/pagename.html
						- the 404 error happens when the server tries to access to http://yoursite.com/contents/fancybox/image_file_name.png
						- FancyBox jQuery plugin is located under /scripts/jquery.fancybox-1.3.4
					-->
					<match url="^contents/fancybox/(.+).png$" />
					<action type="Rewrite" url="/scripts/jquery.fancybox-1.3.4/fancybox/{R:1}.png" />
				</rule>
				...
			</rules>
		</rewrite>
		...
	</system.webServer>
	...
</configuration>

Node that this is just a workaround, not the solution. The best thing is modifying the plugin core.

Removing the “x_” Prefixes Injected by AntiXSS Library, from the “id” and “class” Attributes

Microsoft Web Protection Library provides strong security protection while building a web site. By using this library, the web site can avoid XSS attacks. One of the benefits using this library is that the web site can sanitise users’ input, that means the HTML input can be filtered by the library.

However, during the sanitisation process, a prefix, "x_", intentionally prepends both "id" and "class" attributes of each HTML element. The reason is that the sanitisation process cannot guarantee which "id" and "class" values are safe or not, so each "id" and "class" attribute have their prefix "x_" as a result. This is, of course, not desirable. So, developers have to get rid of those prefixes from the HTML output.

public static string RemoveSanitisedPrefixes(string html)
{
	Match match = Regex.Match(html, "(id|class)=\"?(x_).+\"?", RegexOptions.IgnoreCase);
	if (match.Success)
	{
		string key = match.Groups[2].Value;
		html = html.Replace(key, "");
	}
	return html;
}

Once your HTML contents are sanitised by Microsoft.Security.Application.GetSafeHtml() or Microsoft.Security.Application.GetSafeHtmlFragment(), pass the sanitised HTML value to the method above, and you’ll get the "x_" removed HTML contents.

Quiz: 3-6-9 Game with Your Programming Language

There is a very popular game in Korea, called “3-6-9″. Its rule is very simple:

• A player starts counting from 1.
• Next player count the number added 1. Repeat this rule until one player fails counting.
• However, when a player meets a number containing digits such as 3, 6, or 9, the person has to do a clap for the number of times.
• This is the example of playing:
  • 1, 2, “clap” (3), 4, 5, “clap” (6), 7, 8, “clap” (9), 10, 11, 12, “clap” (13), 14, 15, “clap” (16), 17, 18, “clap” (19), 20, 21, 22, “clap” (23), 24, 25, “clap” (26), 27, 28, “clap”  (29), “clap” (30), “clap” (31), “clap” (32), “clap clap” (33), “clap” (34), “clap” (35), “clap clap” (36), “clap” (37), “clap” (38), “clap clap” (39), 40, 41, 42, “clap” (43), …

The question is…

Use your preferred programming language, create a function or method to perform this game up to 100.

And my solution using C# is… (substituted “clap” with “X”)

using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;

namespace Aliencube.Quizes
{
	public partial class ThreeSixNine
	{
		public static string Execute(int maxNumber = 100)
		{
			List<string> results = new List<string>();
			for (int i = 1; i <= maxNumber; i++)
			{
				int xs = Regex.Matches(Convert.ToString(i), "[369]").Count;
				results.Add(xs == 0 ? Convert.ToString(i) : new String('X', xs));
			}
			return String.Join(" ", results);
		}
	}
}

How’s yours guys?

Triming Property Type Value – Description or Validation – While Saving Document Type in Umbraco

When developers create a document type in Umbraco, they might notice that an extra line – either Line Feed (\n) or Carriage Return (\r), or both – is added into those two fields – Validation and Description – of each property. This extra white space will result in validation errors and prevent the content from saving, in the Content section.

In order to avoid this, the value must be trimmed while retrieving and saving by modifying the source code, UmbracoProject\umbraco\cms\businesslogic\propertytype\propertytype.cs. Find the following code lines from the file and put .Trim() as highlighted.

public string ValidationRegExp
{
	get { return _validationRegExp.Trim(); }
	set
	{
		_validationRegExp = value.Trim();
		InvalidateCache();
		SqlHelper.ExecuteNonQuery(
			"Update cmsPropertyType set validationRegExp = @validationRegExp where id = @id",
			SqlHelper.CreateParameter("@validationRegExp", value.Trim()), SqlHelper.CreateParameter("@id", Id));
	}
}

public string Description
{
	get
	{
		if (_description != null)
		{
			if (!_description.StartsWith("#"))
				return _description.Trim();
			else
			{
				Language lang = Language.GetByCultureCode(Thread.CurrentThread.CurrentCulture.Name);
				if (lang != null)
				{
					if (Dictionary.DictionaryItem.hasKey(_description.Substring(1, _description.Length - 1)))
					{
						var di =
							new Dictionary.DictionaryItem(_description.Substring(1, _description.Length - 1));
						return di.Value(lang.id).Trim();
					}
				}
			}

			return "[" + _description.Trim() + "]";
		}

		return _description.Trim();
	}
	set
	{
		_description = value.Trim();
		InvalidateCache();
		SqlHelper.ExecuteNonQuery(
			"Update cmsPropertyType set description = @description where id = @id",
			SqlHelper.CreateParameter("@description", value.Trim()),
			SqlHelper.CreateParameter("@id", Id));
	}
}

public string GetRawDescription()
{
	return _description.Trim();
}

By adding the .Trim() method, even though it can’t prevent displaying an extra line, but it won’t save the extra line into the database.

uComponents: Multi-Node Tree Picker Data Saving Format Error in Umbraco

uComponents is a killer extension for Umbraco as it compliments a lot of features that Umbraco lacks or doesn’t have. Nowadays uComponents is a sort of de-facto standard extension because many other extensions are assuming that uComponents is installed.

Once uComponents is installed, several data types used in Umbraco are also installed. Multi-Node Tree Picker (MNTP) which is one of the installed data types is, I believe, the most useful and versatile data type. However, it stores its value as NTEXT type when its value type is set to CSV, which is not quite right.

When you modify contents at the Umbraco back-office, the following error message can be seen.

Your data has been saved, but before you can publish this page there are some errors you need to fix first:

• [PROPERTY] at [TAB] is not in a correct format

This results from the fact that the value type is set to NTEXT, instead of NVARCHAR. So, once a data type using MNTP is created, the value type should be updated to NVARCHAR directly in SQL.

SELECT
	node.id,
	node.[text],
	dt.*
FROM
	cmsDataType AS dt
	JOIN umbracoNode AS node
		ON dt.nodeId = node.id
WHERE
	dt.controlId = 'c2d6894b-e788-4425-bcf2-308568e3d38b'

Note that the controlId has the value “c2d6894b-e788-4425-bcf2-308568e3d38b” that represents MNTP. Once the query is run, all MNTP data types are listed. They all have NText at their dbType. So they need to be updated to NVarchar by running the following SQL script.

UPDATE
	cmsDataType
   SET
	dbType = 'Nvarchar'
 WHERE
	controlId = 'c2d6894b-e788-4425-bcf2-308568e3d38b'

Now, the MNTP control will have NVarchar data value and will not display the error message above.

Translation: The Agile Waterfall

Disclaimer: This is the translated article, The Agile Waterfall, originally written by Jon Arnold on .net magazine. The translator doesn’t guarantee the quality of the translation.

The Agile Waterfall - 2012년 3월 19일, Jon Arnold

작성자인 Jon Arnold는 Centresource Interactive Agency에서 현재 전략 컨설턴트로 일하고 있습니다. 이 글에서 그는 애자일 방법론과 전통적인 워터폴 방법론을 어떻게 조화롭게 섞어서 쓸 수 있는지 설명합니다.

최근에 우리 팀은 애자일 개발 방법론과 전통적 워터폴 방법론을 조합해서 쓰는 방식을 실험중에 있습니다. 많은 프로젝트 매니지먼트 전문가들은 이것을 “물에 젖은 애자일 (WetAgile)” 이라고 부르기도 합니다. 적절하지만 발음하기가 좀 부담스러운 단어네요. 좀 더 설명하기 전에, 배경지식에 대한 설명을 덧붙이자면:

우리는 표준 워터폴 방식을 4D 어프로치라고 합니다 – Define (정의), Design (설계), Develop (개발), 그리고 Deploy (설치). 각각의 단계는 다음 단계로 넘어가기 전에 명확한 종료지점이 있어서 웹 개발에서는 매우 표준적인 방식이지요. 고객과 함께 마일스톤을 잡고, 기대치를 설정하는데 매우 좋습니다. 하지만, 어떤 면에서는 내부적인 문제 또는 시간관리에 있어서 꽤 어려워지기도 합니다.

이것이 워터폴 방식으로 작업하는 데 있어서 가장 큰 약점입니다. 실제로 각각의 단계를 “정말로” 끝냈다고 말할 수 없기 때문입니다. 아무리 명확한 계획을 세웠다 하더라도 실제로는 개발 단계에서 디자인을 수정할 필요가 생긴다거나, 개발자가 디자이너와 함께 애니메이션 효과라든가 하는 시각적인 효과들을 논의해야 하는 경우가 생기게 마련입니다.

애자일 방법론으로는 우리는 보통 작은 규모의 전담 팀을 회사 내에 만들어서 함께 긴밀하게 일하도록 합니다. 엄청나게 많은 양의 소통과 협업이 있구요, 종종 고객도 이러한 소통에 참여하기도 합니다. 많은 애자일 프로젝트들은 몇 번의 스프린트(30일을 주기로 하는 반복적인 개발 사이클 – 역자 주)를 거치면서, 혹은 일주일 또는 이주일 간격의 집중적인 개발기간 동안, 혹은 실제 웹 사이트에서 기능들을 정의하면서 계속해서 발전해 나갑니다.

Agile Waterfall

만약 당신이 워터폴 방식의 프로젝트를 생각한다면, 애자일은 서로를 기반으로 하는 일련의 동심원들로 시각화를 할 수 있습니다. 우린 이 모델을 루비 프로젝트에 적용시켰구요, 단기간에 집중적인 개발이 필요한 다른 프로젝트들에도 적용시켜 봤습니다. 애자일 방식은 어떤 고객들에게는 짜증스럽게 느끼는 방식이기도 합니다. 짧은 기간과 지속적인 반복 사이클은 좀 더 전통적인 협업을 기대했던 어떤 고객들에게는 굉장히 스트레스 받는 일로 느껴지게 하더군요.

그래서, 우린 마치 초콜렛에 땅콩버터를 섞듯이 그 두가지를 섞어봤습니다. 그것이 바로 Agile Waterfall 방식인데요, 이것은 일반적으로:

1. 디자이너가 홈페이지 컨셉을 잡습니다. 그리고 그것은 개발자와 기획자와 함께 내부적으로 리뷰를 합니다.
2. 이렇게 만들어진 리뷰는 고객과 함께 다시 한번 공유를 합니다. 그리고, 고객은 피드백을 주게 됩니다.
3. 최종 결과물이 만들어지고 디자이너는 이제 세부 페이지 디자인 컨셉을 잡기 시작합니다.

그동안에 두명의 개발자들은 초기 개발을 시작합니다 (보통 한 개발자가 백엔드 개발을 리드하고, 다른 한 개발자는  프론트엔드 개발을 하죠). 그들은 최초 리뷰 회의에서 나온 개발 순서를 갖고 있습니다. 따라서, 대략적으로 무슨 일이 일어날 지는 알고 있죠. 개발자들의 일반적인 방식은 아래와 같습니다.

1. 선임 백엔드 개발자는 CMS를 셋업한 후 주요 기능요소들을 개발하기 시작합니다 (보통 모델과 콘트롤러들이죠).
2. 이러한 요소들의 프로토타이핑을 끝낸 후 기획 회의에서 그것들을 디자이너와 기획자와 함께 리뷰합니다. 그렇게 함으로써 모두가 같은 내용을 공유하는지 확인하는 거죠.
3. 디자이너가 위의 세번째 과정을 끝내면, 선임 프론트엔드 개발자는 홈페이지를 요소별로 잘개 쪼개서 현재 개발하는 곳에 붙여 넣습니다.

… 그리고 여기서부터 모든 것들이 계속해서 굴러갑니다. 이 과정 동안 기획자는 계속해서 고객에게, 때때로 개발환경에 접근권한을 줘서, 진행상황을 알려줍니다. 기획자는 또한 고객의 피드백을 이용해서 시각적, 기술적인 결과물들을 개발팀이 통합할 수 있게끔 도와줍니다.

수많은 애자일 순수주의자들은 아마도 이 글을 읽는 동안 피눈물이 날 겁니다. 좀 더 명확하게 말하자면, 저는 구체적으로 우리 회사에서 전통적인 워터폴 모델로 개발했던 프로젝트들에 대해 얘기하고 있습니다. 이 프로젝트들은 전형적인 적은 예산의 웹 애플리케이션이거나, 커다란 마케팅용 웹사이트 프로젝트입니다. 보통 이것들은 워터폴 방법론으로도 충분합니다. 이것은 또한 또한 애자일 방법론을 혼란스러워하는 고객들에게도 훌륭한 방식입니다. 애자일 방법론은 종종 끝없는 예산과 시간계획이 필요하다고 알려져 있어서 비용 절감을 목표로 하는 마케팅 담당자들은 싫어하기도 합니다.

지금까지 결과들은 다 훌륭했습니다. 마감일을 지켰구요, 예산 절감에 고객 만족까지 실행시켰습니다 – 웹 에이전시가 “성공”이라고 여기는 세가지 조건이지요. 돈이 들어가면 웹사이트가 나오는 블랙박스 같은 웹 에이전시 입장에서는 이 개발 방법론은 빡빡한 예산과 개발 기간 안에서 우리를 끊임없이 돌아보게 하고 고객 중심적으로 만들었답니다.

How to Convert Korean Drivers Licences to Victorian Ones

Based on reciprocity between Australia and South Korea, converting Korean drivers licences directly to Australian ones or vice versa is not reportedly possible. In order for Korean immigrants to obtain Australian drivers licences, they have to take several tests including paper test, hazard perception test and driving test.

However, in South Australia, the State Government classifies Korean licences with an “Experienced Driver” recognition group. It means that any Korean migrants who are older than or equal to 25 years old and hold drivers licences are recognised that they are eligible to convert their licences to the SA ones without tests. Make sure that only SA currently applies this rule. Please refer to this page.

What an issue!

Now, Korean migrants can legally and directly convert their drivers licences to Australian ones. Of course, there are some efforts necessary in reality.

Briefly the process for the conversion is:

1. Convert Korean licences to SA licences
2. Convert SA licences to VIC licences (or other State licences)

As Victoria State Government doesn’t allow Korean migrants to directly convert their licences to the VIC ones, refer to this page, but allows interstate conversion, refer to this page, if they willing to make their efforts above, they can convert their licences to the Victorian ones.

Learning English with Behind the News @ ABC

As an immigrant from non-English background country, living in an English speaking country including Australia is pretty challenging. Everyday can be regarded as a situation in a battlefield. However, the choice to live in the country with languages other than my mother tongue is solely made by myself. So immigrants have to adapt themselves to the environment as soon as possible with being fluent in English.

There is a good reference to learn English, called “Behind the News” http://www.abc.net.au/btn. This is a TV show for primary school kids that introduces what are currently happening in Australia and all over the world. Basically, this show extracts briefs from the TV news and modifies them for kids. Therefore, TV presenters uses clear words to understand and topics are all well known to everybody.

This is the reason why I recommend to watch BTN. It also provides transcripts for schools so that anyone interested can easily download and use them while watching the show.

Of course, there are many similar ways to learn English like watching movies or TV soaps. BTN is another type of approach, I admit. However, the benefit of watching BTN is that it deals with current affairs happening in Australia, which can be easily found at newspapers, TV news and even conversations between peers. So, while watching the show, topics are easily understandable.

What are you waiting for? Try it now. Go to http://www.abc.net.au/btn and have a try.

How to Get List of Countries Defined in ISO 3166-1 Programatically by C#

ISO 3166-1 defines the list of countries currently existing in the world while ISO 639-1 defines the list of languages currently and officially used all over the world. What if we need to display the list of countries do developers usually try? We can think of creating a meta table in a database or an XML file for reference.

Fortunately, .NET framework provides System.Globalization namespace to handle culture specific data such as date and time format, currency format and so forth. This is particularly useful for applications considering I18N or L10N.

There are two classes called CultureInfo and RegionInfo in the System.Globalization namespace. CultureInfo detects current system environment and returns the current culture including language, country, currency, time and date. It also returns a specific culture information by manually initialising the culture code. A CultureInfo object contains both language code defined by ISO 639-1 and country code defined by ISO 3166-1. By using this information, we can programmatically returns the list of countries.

/// <summary>
/// Gets the list of countries based on ISO 3166-1
/// </summary>
/// <returns>Returns the list of countries based on ISO 3166-1</returns>
public static List<RegionInfo> GetCountriesByIso3166()
{
	List<RegionInfo> countries = new List<RegionInfo>();
	foreach (CultureInfo culture in CultureInfo.GetCultures(CultureTypes.SpecificCultures))
	{
		RegionInfo country = new RegionInfo(culture.LCID);
		if (countries.Where(p => p.Name == country.Name).Count() == 0)
			countries.Add(country);
	}
	return countries.OrderBy(p => p.EnglishName).ToList();
}

Let’s see the highlighted line 8 above. Firstly, we need list up all cultures and create RegionInfo objects based on the culture. As a CultureInfo object has both language code and country code and some CultureInfo objects have common country code, eg. en-CA (English in Canada), fr-CA (French in Canada), we need to take only one RegionInfo object (line 10-12).

/// <summary>
/// Gets the list of countries by selected country codes.
/// </summary>
/// <param name="code">List of culture codes.</param>
/// <returns>Returns the list of countries by selected country codes.</returns>
public static List<RegionInfo> GetCountriesByCode(List<string> codes)
{
	List<RegionInfo> countries = new List<RegionInfo>();
	if (codes != null && codes.Count > 0)
	{
		foreach (string code in codes)
		{
			try
			{
				countries.Add(new RegionInfo(code));
			}
			catch
			{
				//	Ignores the invalid culture code.
			}
		}
	}
	return countries.OrderBy(p => p.EnglishName).ToList();
}

We can also get the list of countries from the country codes provided like above. Make sure that we need to use the try...catch... block (line 19) to ignore the invalid country code used. This code can be more improved by using various types of codes.

Confirm Password vs Confirm Email

During the signup process at a certain website, candidates are usually required to fill username, password and email at least. Traditionally, in order to avoid typing wrong password, a “Password Confirm” field has been used so far. It doesn’t let users only confirm their password, also let them make sure how they put their correct password and remember it easily.

Nowadays, a lot of websites do not request users to confirm their password while signing up. The reason is that additional field to fill in hurts user experiences. According to Munroe, It takes more time for users to complete the action and, as a result, the website will lose the users retention. That sounds very reasonable. “Forgot Password” function is to support users who forgot their password when they don’t remember the one.

Well, then there is another issue arising. How can we assure if users put their correct email address? If they put misspelled email address, the password reset email or authentication email will not be sent to the user. Website developer cannot guarantee if the users type the correct ones or not.

Of course, keeping the “Password Confirm” field won’t help users enter correct password. Instead, Appleseed argues in his article that we need to provide “Email Confirm” field to make users sure to put correct email address. Appleseed ends his post with:

A misspelled password is annoying. A misspelled e-mail address is hazardous.

If I am asked to put additional field, I’ll rather choose the extra “Email Confirm” field as the quotation above. If I can, I will not put any extra field but email and password (optionally username or nickname).

How do you guys think of this?