Friday, June 6, 2014

Folder-like html nested lists & Create your own CSS Icon Font

Recent trend saw the rise of mobile technology. In order to accommodate it, websites have to cater mobile users as well. Bootstrap, the most popular front-end framework for developing responsive, has take to web development to a more elegant way. At the same time, Icon Font has rode along the wave. Two major popular clans of Icon Font is Glyphicons & Font Awesome. Icon Font comes with a lots of benefits, eg, size, color, shape. Why it has such advantages? Reads more.

I involved in a website, where one of the requirement is to create Folder-like html nested lists. There's some trick to do it, some have introduced at:
1) using image (simple)

2) CSS background property (a bit imagination requires)

So far no issue, but to apply them on HTML with bootstrap, it really takes a bit extra of time, especially for those people that are not good in CSS, like me. I was looking fast-and-clean approach, something like CSS Icon Fonts, but built-in Glyphicons & Font Awesome does not come with it, Goggling other existing icon font also yields no result.

Then I bumped into this website, fontastic, prompting the idea of creating my Icon Font. From here, I found out that it needs .svg file to create icon font. SVG defines graphics in XML format. Now you know why Icon Font can be sized, since it's vector image. Thus I pick-up the tool, svg-edit, I used before in this post, and start creating the asset. Let's begin.

1) Download the "svg-edit", extract the zip file and click "svg-editor.html" to load the editor.
2) You'll be welcomed with default blank canvas. Click on the "Rectangle".

3) Try to create something like this. As you can see, I create the vertical rectangle over the size of the canvas. If i create with exact fit, it'd be far too small when Icon Font generated later, could be padding or margin issue. Try it yourself. And I found out that the color does not matter now.

4) When you done, save the file, let's say "m.svg". You can click on the "SVG", and reveal the svg content.

5) Now the asset is done. Let's go to create the Icon Font at fontastic.
6) Select "Modify Font" if it default to it, else create new font.

7) Give a descriptive name, this will be the name use in html.

8) Now we import the "m.svg" created early.

9) Import successful!

10) Preview of our Icon Font. It still looks weird, huh? Bear for while, click "Change set name".

 11) Change the set name

12) Click this set to add to your font, and you can see you have "1" ready to publish.

13) Click "Publish" tab and click the "Manual Download" button.

14) Now you can prepare to add it to your HTML. Let's use one of the very nice bootstrap menu library, metisMenu.

15) Download it's js library and sample. Add these few lines into the sample html provided by metisMenu.


This CSS is for adding extra second-level indentation.

Add this HTML to all the nested list "li" , and it is for adding the Icon Font generated.

16) Yeah, a nice folder-like html nested lists you got by now! You can download the source here.

p/s: When you use this Icon Font in Google Chrome browser, you might experience some weird issue. I think Google Chrome use some scaling technique to adjust the web content, so when you enlarge the browser to a special size like "110%", it skewed.

So, you have to apply the fix, for more please follow this link.
@media screen and (-webkit-min-device-pixel-ratio:0) {
 @font-face {
 font-family: 'startcoding';
 src: url("fonts/startcoding.svg#startcoding") format("svg");

Wednesday, June 4, 2014

"HTTP Error 401.3 - Unauthorized" on a unity web player page?

Recently, i involved in a project that has to rush to deploy. Since I work in mobile game company, some games have to be able to run in web browser as well. Unity web player usually would be generated by Unity along with a html page, my task was just to link to that page. So, I uploaded the zipped game content using FileZilla to the Azure server.

To host in IIS 7.5, and allow ".unity3d" to be downloaded is not an issue, what you need to add is new MIME, as explain here.


Easy, huh? I thought so. Then I browse to my page.

HTTP Error 401.3 - Unauthorized

You do not have permission to view this directory or page because of the access control list (ACL) configuration or encryption settings for this resource on the Web server.

I just did what's considered normal process, right? As rushing for live, I was cracking my head and wonder what went wrong. Goggling on internet gave me no result which could link error 401.3 with Unity web player. After few hours of trial-and-error, 2 workarounds came into my mind:

1) Permissions and user rights : I have tried to give full-rights on the folder, but failed.
2) Thinking to write code on Impersonation, but it invites security concerns.

Suddenly, I found something special:

Hey, why the file name is in green color?
And another googling on this, I found out that:
Green means encrypted, blue means compressed in Windows.

The resolution is:
1) Right-click the file, click "Properties"

2) Click the "Advanced.." button.

3) On the "Compress or Encrypt attributes" section, un-check the "Encrypt contents to secure data"

After the decryption, the text becomes normal black color.

And refresh the browser again, it's ok.

I found out that:
1) when i uploaded the zipped content thru' FileZilla, then this encryption will happen. It must be caused by the FTP issue.
2) when i uploaded the extracted content thru' FileZilla, no issue.

Tuesday, April 15, 2014

Private domain SSL setup on Winodws Azure VM

Nine years of programming life, and finally I got the chance to setup the domain & SSL on my own. Usually I work in enterprises, this will be done by MIS guy and programmer will be shut-off from production environment. With the new job and as a new back-end department pioneer, here comes the opportunities.

For the first few steps, I'll show more on hosting with Windows Azure, if any other hosting company, the steps will be roughly the same.

1) Hosting with Windows Azure: You have to purchase a cloud server. My case I use: You can start with trial plan but it will not last long, at most few days only. Here're the few links you can start with:

It's highly recommended that you use new IE (I use IE9) for accessing Windows Azure, even for service payment. Most of the standard browsers do not work well with IE-only Windows Azure.

2) Hosting with Windows Azure: Your web binary files can be deployed through FTP, and this is the steps:

3) Hosting with Windows Azure: Remember to open the Azure HTTPS endpoints (usually is port 443) of the server:

4) Domain with GoDaddy: For hosting with Azure server, you'll get a sub-domain that looks like this: But for a HTTPS to be worked, you need your own private domain. No choice but have to buy one. My company bought one at: Mind you, there's no such thing called customer service in GoDaddy, everything is on your own. When you get the domain, go to:

Click on the "Launch" near the domain and you will see the domain you purchased.

5) Domain with GoDaddy: For hooking up the domain and the Windows Azure server, some details is on here: The latest GoDaddy site might looks like this. Click on the "Manage" near the "Forwarding".

Add one entry of your domain here.

Click on the "DNS Zone". Change the Host,"@" to Windows Azure Virtual IP & CName,"www" to Azure DNS name. You can get this from Windows Azure Dashboard.

6) Domain & Hosting: After the TTL period, you can go to the website through the domain. You will get the standard IIS welcome page that looks like this:

7) Domain & Hosting: You have to go back to Azure IIS and add this domain to the website. Click "Add Web Site".

On the new website added, click "Bindings" and key-in the domain info.

And your website should be browsable by now.

8) SSL with GoDaddy: Now we come to final part, which is SSL. Purchase the SSL from GoDaddy. Create the certificate by following this link: (until step 8). It takes only few minutes for SSL to be signed.

Install the SSL certificate by following this link: [To Install an SSL Certificate in Microsoft IIS 7]

9) SSL: Do not forget the HTTPS binding in the new website.

And your site should be browsable through HTTPS by now.

10) SSL: After the SSL is setup, you can check your SSL security level on your server. Here're the few websites that you can check:

  1. (you might need to clear your cache after your first run)

11) SSL: With default settings on Windows Server 2008 R2, most probably you'll be getting an "F".

it's because of SSL version 2 is not disabled on server. Here're the links that you can refer to.
12) SSL: After adding new entries on registry and restart the server, I got this, a "B".

13) Done! Phew, what a long way.

Thursday, January 2, 2014

Developing a FPS game with Unity3D

Almost after 10-year ago I developed some basic stuffs on OpenGL, I manage to regain some interests on developing a FPS (First-person shooter) game again. I have to admit I am not an avid-gamer, and just a casual gamer, but it's kinda fun to work on it.

There're couples of top-notch free 3D game engines in the markets, ie:
  1. Unity
  2. CryEngine
  3. Unreal Development Kit (UDK)
and many more. By starting with the game engine, you focus your work on game itself, and not the engine.

After some tries-and-errors, I chose to start with Unity. Its UI looks simple and the requirement on hardware spec is low, if compare with CryEngine & UDK. The ability to export to multiple platforms, likes Apple's iOS & Google's Android, is also another reason I choose it.

For those FPS lover, I highly-recommend to try the Unity3D with this book: "Beginning 3D Game Development with Unity 4", by Sue Blackman.

Not only it guides you with some basic concept, it also comes with chapters on building a FPS game on one of the level from scratch. And for the past few months, I was following all the chapters closely and it's quite fun.

Here are some of the screenshots from the sample of the book (credit to the author)

Impressive with the graphics, huh? Why waits then? :)

You can reach the author here, and sometimes she is at Unity forum as well.
You can read some free excerption from Google Books too.

Two things bear in mind:
  • Unity is getting updated frequently, some of the old features might not available (or even works, a.k.a bugs) in new version. To follow the chapters in this book, please download a suitable version 4.2.X from here.
  • There're couple of erratas in the book, my suggestion is: please open the finished chapter along with you own project, side-by-side, to compare whenever something's wrong.