Hieu Le Trung's personal tech blog

Active class helper for Laravel 4

When working with Laravel 4 and Bootstrap framework, I usually need determine  which menu item is currently “selected” and add the active class into that item. After installing the dwightwatson/active package and founding that that package does not fit my requirement, I decided to develop a new one and use it in my current project. You can find its source code in Github

Installation

You will need Composer to use this package in your work. Supposed that you have Composer installed in your machine, edit your project composer.json  file by adding this line into the require array:

After that, run composer update to get this package.

If you use Laravel 4, some extra steps need executing. Append these line in your providers and aliases array respectively:

 Usage

Check whether current route match a pattern

Check whether current route match a named route

Check whether current route match with an action formated as ‘FooController@getAction’

Check whether current controller is an instance of ‘FooController’ class

Check whether current controller is an instance of ‘FooController’ class or ‘BarController’ class

If you just want to know current controller and current method name, use these method. Notice that the “Controller” suffix will be trimmed from controller name and those prefix: “get”, “post”, “put”, “delete”, “show” will be removed from method name

For more detail about API, your can see the class source code file

 

 

 

PHP pthreads extension for windows x64 system

Today, I have practiced with the multithread interface of PHP with the support of this POSIX pthreads extension. However, I cannot find a version for my development environment, which is built with VC++ 9.0 compiler in 64-bit system. Therefore, I have built this extension for myself and share it here for any one need it. I have tested and used this library successful in my environment.

You can download it here: http://www.mediafire.com/?r8f5t4agde8ikvd

After download this binary, extract in a new folder and copy files to your php binary folder as normal way. Remember to add extension=php_pthreads.dll to your php.ini file to load this library.

PHP – convert Vietnamese character between VNI and Unicode

Why I need it?

VNI here stands for VNI Encoding, a way to store Vietnamese characters without using Unicode in 1990s ans 2000s. In fact, many Vietnamese old documents used it instead of Unicode. When working with a new web project, a client requires me to build their website with Unicode (of course!) but the articles is imported from a bundle of MS Word documents which are used VNI Encoding. Therefore, I need to find a function to convert these character into Unicode standard before save them to the database.

The code

Yep, first of all, this is my code:

The first function, unichr is just the Unicode version for the chr function, which return an Unicode character from it code. In the conversion routine, all you need here is two array: one contains VNI character, another contains the corresponding Unicode character. For the conversion from Unicode to VNI, exchange the position of these arrays.

Handle mouse wheel event with jQuery jMouseWheel plugin

Recently, when answer this question on stackoverflow, I found that old way of cross-platform mouse wheel event detection have failed on new version of Firefox and Chrome. After some study on MDN, I have begun to write a new jQuery plugin to support the mouse wheel event call jMouseWheel. You can get the full source code on GitHub.

Why this plugin is created?

Well, jQuery support a event call scroll. However, it is only fired when a element have a scroll bar and the scrolling of the user make its content moved. If you want to detect just the mouse wheel event on an element, you may need another plugin like jMouseWheel.

Installation

First of all, jMouseWheel is just a plugin of jQuery and you need to include jQuery library to your HTMl first:

Next, download the zipped file of my project and use the jMouseWheel-.min.js in your HTML:

Usage

Simply call the $.mousewheel(handler) in your desired element like this: 

For more details of the evt event, read the documentation from Mozilla developer network.

Current status

By the time I wrote this introduction, my plugin just allows binding to the mouse wheel event and does not support unbinding from it. I’m working to improve this plugin and make it support fully jQuery event API with on, bind and unbind method.

Sharing files and folders with Linux guest OS in VMWare player

One day, when preparing a virtual machine to study Hadoop, I have to find the way to share a files and folder between my Windows 8 machine with the Linux guest OS, more specific, I use LUbuntu as my guest OS. After a quick Googling and read the documentation, I was successful. Today, I want to share this experience with you.

Install the VMWare Tool

First of all, you have to install the VMWare Tool for the guest OS to enable the shared folder in this OS. Click in Player menu > Manage, > Install VMWare Tools…. You may have do download the tool before the installation start.

Start install the vmware tools

Start install the vmware tools

After the compressed installation file has been mounted to the guest OS, copy it to another writable location e.g. the Desktop folder and decompress it. Now, open the Terminal and change the working directory to the new created folder, usually named vmware-tools-distrib.

Change the working directory to the new installation folder

Change the working directory to the new installation folder

Execute the vmware-install.pl with super user privilege and accept all default value. It will automatically execute the vmware-config-tools.pl at the end of the installation. If your Linux does not have gcc and make, you have to install these package and re-run the wmware-config-tool.pl again by simply enter sudo vmware-config-tools.pl.

Config the Shared Folder in VMWare player.

Now, we have to VMWare tools in the guest Linux OS. We should open the virtual machine settings by click Player menu > Manage > Virtual Machine Settings. In the new dialog, choose the Options tab and enable the Shared Folder option.

Enable Share Folder in the virtual machine

Enable Share Folder in the virtual machine

Click the Add… button at the bottom, follow the wizard to choose a folder in the host OS and the name of shared folder in the guest OS. In the Linux guest OS, our shared folder will be mounted in the /mnt/hgfs/. You can make a soft link (shortcut) to the Desktop to used this folder more easily when working in the Linux OS by entering this command in the terminal:

Now you can access the shared files and folder from you Desktop folder. The modifications in this shared folder is two-way affected by default. If you do not want the guest users write or change this shared folder content, in the previous wizard click the read-only option, you can change this option any time in the virtual machine settings screen, too.

Last, my demonstration of sharing folder with Linux guest OS

Now, you have read all my words. I also upload a video to my Youtube chanel, you can see it to get more specific detail.

The new responsive design for my website

After a long time, I have finally release my first responsive layout for this website. Let’s see what is new in this version.

Responsive layout with smart phone supported

I’ve implemented three layout in this new design. One is designed for screen wider than 1280px – almost modern notebooks, one for 1024px-wide screen, the other is for smart phone screen with the minimum accepted width is 640px (Iphone 4 vertical screen width). The varying part of this design is the main menu bar, the sidebar and some module in the about page. You can resize your browser window to try with different layout.

For those who have not heard about the word responsive design, you can read wiki article as well as do some quick search in Google.

The 640px-wide version of my about page in new design

The 640px-wide version of my about page in new design

The 960px-wide version of my about page in new design

The 960px-wide version of my about page in new design

The 1280px-wide version of my about page in new design

The 1280px-wide version of my about page in new design

More semantic, more SEO friendly

In this new version, I have done a lot of things to improve the way search engines see my web pages. Now, each article will have a dedicated description and keywords for the meta tags, which is generated automatically in the previous version. I have also added Article, Review, and Person microdata into each post with the hope that Google an recognize my web pages better. For social networks, I have implemented the new View Hook module to add Open Graph meta data in to the head element of each article page as well as update the code of social sharing buttons to the latest version from the vendor.

Prepare for post thumbnail

As you can see, now each post will go along with an image (currently, my avatar). I’m developing the new gallery module to manage images, therefore, allowing attaching thumbnail for each article.

the new thumbnail position for each article

the new thumbnail position for each article

Large background

You can consider this being one of my effort to get used to with the large background designs before getting new camera by the end of this year. After getting the new camera, I’ll start learning photo and designing some themes, hope you can wait until then.

[Barcamp slide] new things in interface design with Modern UI style applications

oday, I have a presentation in Barcamp Sai Gon 2012 about the “Modern UI” and the new things it brings to the interface designer. I have shared it in my SkyDrive and everyone who is interested in can see online now. This is its content.

  • About the name of “Modern UI” and the name of “Metro”
  • The different views of a Windows 8 Modern UI styled application: portrait view, landscape view, snapped view and fill view
  • New navigation UX with Semantic Zoom, FlipView control and Group ListView/GridView
  • New commanding UX with the Appbar and the Charms
  • New application output message system

Well, this is my slideshow. Feel free to leave any comment here to help me improve it.

How I fix the TF30167 Error when creating new team project in VS2010

Hello everyone! Today, I am going to tell you how I can fix the TF30167 error when creating a new team project in Visual studio 2010. There are many things can be the reason for this ugly error. The way I solved the problem may or may not successfully applied to your case. However, I think you should give it a try.

The situation

I need to create a new team project under this condition:

  • Visual Studio 2010 SP1 on Windows 8.
  • Team Foundation Server 2010 with an account belonging to the Project Collection Administrator group.
  • Using MSF for Agile Software Development v5.0 template

In fact, I cannot create the project and receive this error:

Error

TF30167: The New Team Project Wizard could not finish creating the project Testing project.

Explanation

The following unexpected error was encountered while creating the team project: TF30229: Failure retrieving user information.

User Action

Restart Visual Studio and run the New Team Project Wizard again. If the problem persists, contact your Team Foundation Server administrator

What I did?

The solution is very simple. First, read this article from MSDN carefully and be sure that you have satisfied all requirements. If the TF30167 error cannot be eliminated, try to disable your antivirus for a while when creating the team project. I have disable the Avast and everything go like a charm!

See the video below for more details

Setup a small local web server for your office with WampServer 2

WampServer is a useful and convenient tool to setup a web development environment on Windows. It’s so easy to use WampServer for a private purpose – the way that you only access your projects via localhost. However, if you have no experience, you will find it difficult to use WampServer for your local office. What below is how I setup the server for our web applications in my company and allow just my colleagues access the server, hope that it will help you in some way.

A first general look

First, let take a look at the general steps to know what you will do:

  • Give your server a static IP
  • Determine which computers can access your server

Step 1: A static IP for your server

In this post, I’ll setup a local web server, which means that there will be no internet connection from the server. If you want to setup a real web server which allows people connect from internet, consider looking at another article.

First, you have to know the Physical Address (or MAC Address) of the server. Open the Connection properties of the current network connection of the server, press details button and look for the Physical address line in the new opened window, you will find the Physical Address of the server as a string with 8 pair of characters separated by 5 hyphens. Copy or note this string in order to use it later.

Now, keep the Network Connection Details windows open and look at the line named as DHCP Enabled. If its value is No, write the IP of the server (which can be found at the line IPv4 Address) to another location to use in the next steps. Otherwise, you have to setup your router to get a static IP for the server.

To set the static IP for the server, open the browser and navigate to the address of the router (it may be 192.169.1.1 or 192.168.0.1). If you don’t know this, ask your network administrator to do this step. After logging in the router configuration page, find the page allow you to bind an IP to a client (computer) by the MAC address. Use the previous saved MAC address (Physical address) of the server to bind an static local IP. This step may vary in different routers.

In the end of this step, you have to know the IP address of the server. Review what I wrote before if you don’t.

Step 2: Allow computers allowed

In this step, you have to be sure all client computer can access to server. Open the Command Prompt and enter ipconfig /all command. If the result look like the follow figure, it is fine. Otherwise, consider another setting for your network.


The result of a successful “ping”

With WampServer running, click to its icon in the system tray, point to Apache, click httpd.conf to edit the httpd.conf file in your text editor. Find a line as # onlineoffline tag – don’t remove and be sure that the next lines are the same as below to allow access only from localhost:


httpd.conf config to allow access only from localhost

To allow connections from more computer, insert Allow from <computer IP address> for each computer (with <computer IP address> is its address) after the Allow from ::1 line. You can also use IP address with subnet mask here for shorting your configuration.In some cases, you just want to allow your colleagues to access some web sites, not the whole server, do not insert more Allow statements. Go to the end of the httpd.conf file and insert this code:


Insert Allow from <computer IP address> lines between the and tag.

Final step

Everything will work after you restart your Apache service by clicking to the Wamp system tray icon, point to Apache, Services and click Restart services. You can consider allowing Wamp to auto start and go online with the Windows or setup more secure method with the Basic Authentication. However, you will have a simple web server for your office with just above steps.

See my video to more specific

My first look at Windows 8 User Experience

Last week, I did a foolish thing, installing a OS which is is beta state over my current OS. Of course, I backed up my data before doing that, but I do not recommend you to do the same thing with your work. However, after a few days of using the new Microsoft OS, I have had some idea about its UX and now I share it with you.

Have to do more steps to shutdown or restart

Unfortunately, my first impression about Windows 8 is a negative point. By removing the Start button, Microsoft do an intelligible action that make users do a longer process to shutdown or restart the computer. As you can see below, it takes us two steps to shutdown and three steps to restart in windows 7 whereas we have to do four confusing steps to do the same thing in windows 8.

the interaction to shutdown the computer in windows 7 (above) and Windows 8 (below)

the interaction to shutdown the computer in windows 7 (above) and Windows 8 (below)

Why do I say “confusing”? Well, in Windows 8, we have to activate the Charm bar (I’ll mention it later) to find the power button. Nevertheless, to do this, Microsoft tells us to hover our mouse to the top-right or bottom-right corner of the desktop. Unluckily, it is the bad news that if we move the mouse to the top-right corner, it’ll take us a time to move back to the bottom, where the power button is located. Moving to the bottom-right one? We will be easy hide our all windows, even the Charm bar itself, because of hovering the Show desktop button by accident, which is located exactly in the bottom-right corner of your desktop by default.

Change the way users customize their apps with Charm bar

Now, I talk about the Charm bar. First, take a look at some screenshot of my Charm bar

Windows 8 Charm bar in the desktop

Windows 8 Charm bar in the desktop

Windows 8 Charm bar in the start screen

Windows 8 Charm bar in the start screen

Windows 8 Charm bar in a Metro style applicaton - Weather

Windows 8 Charm bar in a Metro style applicaton – Weather

Instead of using the menu command Tools > Options … or Edit > Preferences …, windows 8 users now have to use Chamr bar to customize their applications. All settings options now can be found when navigating to Chamr bar. To show up this tool, we have two ways:

  • Use mouse gestures: hover the mouse to the top-right or the bottom-right corner of the desktop
  • Press Windows key + C

If we are using an Metro style application, the Settings section of the Charm bar contains all options for this. I we activate the Charm bar on our desktop, this section will lead to our computer settings (a system utility like our previous Control panel). To be honest, I really like this new feature, except what it does with the power button, when it allow user have more space for their apps.

Windows Store: a great innovation

Before windows 8, windows users does not have any hub to find new reliable applications for their computer. While Mac ones have Apple app store, Android ones have Android market (now, Google Play store), Ubuntu ones have Ubuntu application center, … windows users have to use some third-party applications/websites to find the programs they need. Now, with the Windows Store and the pre-installed Store application in windows 8, we can find new and reliable applications with screenshots, other users’ reviews, system requirements, … in one place and install them easily and silently.

The windows 8 pre-installed Store application

The windows 8 pre-installed Store application

New way to interaction with our workspace and Metro style applications

In their new OS, Microsoft introduces some new ways to interact with our workspace. First of all, we can split our desktop screen into two areas, which allow us to look at two application as the same time, with the Snap function. If you have a screen larger than 1366px in width, you can use this to keep your instance messaging program displayed when continue reading an article or play a game and don’t care about changing the size of our windows manually. This means that developers have to pay more attention about Responsive design and the situations that their application can be resized.

Snap function in windows 8 - play game when keep in touch with our friends

Snap function in windows 8 – play game when keep in touch with our friends

Another change is that we have no close, minimize or maximize button on our Metro style application. To close a program, we can use a gesture or the combination key Alt + F4 (believe me, unless you use windows 8 on a tablet, the gesture is a challenge, so remember the key shortcut). To switch to another program, use another gesture, or use Alt + Tab to circle between them, or use the new left panel (only for Metro style applications). See the video below for more detail about these new features.

Two types of account, great but need more improvements

Last but not least, one feature of windows 8 makes me so confused is using two types of windows account: Microsoft account and local account. We can bind our windows local account on our computer to a Microsoft live account. After that, we can synchronize our files, music, video clips, pictures, … between our computers which share the same Microsoft account, of course, we have to connect to the Internet to do this. With this feature, users who have a persistent Internet connection can save their time and money when they can use one multimedia library for several computers and change the way they store their stuff.

However, there are some points need improving with this idea. Microsoft allows us to switch between the Microsoft account and the local one without losing any files and settings, except the local account password! Furthermore, when using some Metro applications like Music or Video, windows suggests us to switch to the Microsoft account to sync our files and do not allow user to disable this silly notification. Why “silly”? Microsoft does not support the synchronizing function in all countries, so why they make users of these countries face too this meaningless message?

Conclusion

All above are just what I feel after one week using Windows 8. Up till now, it is still in beta state, which means that it will be changed a lot in the future. I think I will try this new OS until it official release to study about the new trend of interaction. By the way, if you have a middle-class computer and want to explore new things, give this OS a chance.