How to access the web server in VMWare Fusion on its host machine

Currently, I am in a team developing a web application that supports IEs. My development environment runs under Centos.

Some UI problems appear on IE but not other browsers. This situation leads me to be in need of reproducing those problems on my development environment to confirm if my issues are fixed. I tried to install IE on Centos using Wine, but it doesn’t work properly.

So, I think if I could access the web server on the virtual machine in its host?

Below steps are what I did to make it works.

1. Set the Virtual Machine’s Network Adapter to Bridged:

2017-05-22_171609

2. Get the IP V4 of the virtual machine using the below command in Terminal:

ifconfig
eth1 Link encap:Ethernet HWaddr 00:0C:29:11:C1:E8 
inet addr:192.168.0.178 Bcast:192.168.0.255 Mask:255.255.255.0
inet6 addr: fe80::20c:29ff:fe11:c1e8/64 Scope:Link
UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
RX packets:536823 errors:0 dropped:0 overruns:0 frame:0
TX packets:241377 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 txqueuelen:1000 
RX bytes:537011299 (512.1 MiB) TX bytes:27427710 (26.1 MiB)

Now you can browse your VM’s localhost outside of the virtual machine (your host machine) by replacing “localhost” by “192.168.0.178“.

Absolute position table with padding

Today, I have a task of widening the tables to match 100% browser width to view more contents while keeping other elements stay the as they were.

pjimage

The problem is, I have so many tables to do (about 20 pages including that kind of table). I am too lazy to edit all of those pages. It really takes time and potential to introduce bugs.

So, I choose javascript and CSS to help me out.

Firstly, those tables have the class named “table_wide”.

We will use the CSS absolute position’s power of ignorance. We can make the table to be absolute with 100% percent width. But the problem is, it also ignores padding or margin. So our table will be stuck to the left and right edges.

Well, challenge accepted.

Absolute position ignores everything but it has top, right, bottom and left instead. However, top, right, bottom and left are not adapted to its width. So we cannot use padding properly.

We will use what we have to acquire what we want.


$(".table_wide").each(function(){
var paddingInPx = 10;
var windowWidthInPx = $(window).width();

// Calculate the width of table.
var thisWidthInPercent = 100 - (100/windowWidthInPx*2*paddingInPx);

// Create an empty div to fill up the space the absolute table occupied in the past.
$(this).after('<div style="height: ' + this.offsetHeight + 'px;"></div>');
$(this).wrap('<div style="position: absolute; width: ' + thisWidthInPercent + '%; left: ' + paddingInPx + 'px"></div>');
});

.table_wide {
    display: block;
    overflow: auto;
}

Well done! Challenge accomplished.

Jsfiddle: https://jsfiddle.net/ducfilan/p961moLd/

How to debug/inspect your mobile web page on a real mobile device (with or without real device)

When developing web apps for with mobile support, we usually use Device toolbar (Ctrl + Shift + M) on Google Chrome Developer Tools. But, the problem is that sometimes our layout or javascript code work on Device toolbar but not a real device and there is no dev tool on mobile browsers.

Luckily, Chrome Developer Tools provides us a really useful tool to debug our web page on a real android device on our desktop totally like what we do on desktop web pages.

Installation and interacting with Remote debugging are described here.

In case you don’t have an Android device in hand. You could use an Emulator. It works perfectly with me.

I use Genymotion, it’s really fast and stable.

You can use any mobile browser and be able to debug your web pages on that browser.

You can install browsers to the Genymotion Emulator by drag and drop your .apk file to the emulator screen.

Or you can install Google Play Store and get them downloaded just like a normal device.

The processes are described here.

Goodluck!

How I setup my Terminal on Linux

Today, I got a new computer in my company. So I have to set it up to have my comfortability.

This one runs CentOS 7 and for Linux based OS, Terminal is what you work with the most.

So, I started to configure it.

  • Change the background color and cursor of Terminal

The default color of Terminal is white background and block cursor. But I prefer black background and underline cursor because white background is so dazzlingly bright.

So, open up the Terminal, choose from the menu: Edit > Profile Preferences:

2017-05-10_110243

2017-05-10_110512

  • Change Bash PS1 colors for easy navigating and observing and show git branch information

Bash allows us to customize color and appearance of Terminal information, below is my own style. For more information for your own customization, refer this link.

And I also work quite much with Git so I need to visible branch information in Terminal.

# get current branch in git repo
 function parse_git_branch() {
 BRANCH=`git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/\1/'`
 if [ ! "${BRANCH}" == "" ]
 then
 STAT=`parse_git_dirty`
 echo "[${BRANCH}${STAT}]"
 else
 echo ""
 fi
 }

# get current status of git repo
 function parse_git_dirty {
 status=`git status 2>&1 | tee`
 dirty=`echo -n "${status}" 2> /dev/null | grep "modified:" &> /dev/null; echo "$?"`
 untracked=`echo -n "${status}" 2> /dev/null | grep "Untracked files" &> /dev/null; echo "$?"`
 ahead=`echo -n "${status}" 2> /dev/null | grep "Your branch is ahead of" &> /dev/null; echo "$?"`
 newfile=`echo -n "${status}" 2> /dev/null | grep "new file:" &> /dev/null; echo "$?"`
 renamed=`echo -n "${status}" 2> /dev/null | grep "renamed:" &> /dev/null; echo "$?"`
 deleted=`echo -n "${status}" 2> /dev/null | grep "deleted:" &> /dev/null; echo "$?"`
 bits=''
 if [ "${renamed}" == "0" ]; then
 bits=">${bits}"
 fi
 if [ "${ahead}" == "0" ]; then
 bits="*${bits}"
 fi
 if [ "${newfile}" == "0" ]; then
 bits="+${bits}"
 fi
 if [ "${untracked}" == "0" ]; then
 bits="?${bits}"
 fi
 if [ "${deleted}" == "0" ]; then
 bits="x${bits}"
 fi
 if [ "${dirty}" == "0" ]; then
 bits="!${bits}"
 fi
 if [ ! "${bits}" == "" ]; then
 echo " ${bits}"
 else
 echo ""
 fi
 }

export PS1="\[\e[31;40m\]\u\[\e[m\]@\[\e[33;40m\]\H\[\e[m\]:\[\e[36;40m\]\w\[\e[m\]\[\e[32m\]\`parse_git_branch\`\[\e[m\]\n"

Add above to .bashrc (sudo gedit ~/.bashrc and paste above scripts to the end of the file) file and the result:

2017-05-10_111541

P/s: don’t forget to run source ~/.bashrc to make it takes effects.

  • Setup git autocompletion

It supports us to work faster and more accurate with git commands. So to make it happens, I use a guide from here:

Get the autocompletion script:

curl https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash -o ~/.git-completion.bash

Add the below script to the end of the ~/.bashrc file (sudo gedit ~/.bashrc):

test -f ~/.git-completion.bash && . $_

Fire up changes:

source ~/.bashrc

Now the Terminal is ready to be worked on. Yay.

How to debug Github’s Hubot script?

First of all, Hubot is a complete Node.js application itself. And for Node.js applications in general, node-inspector is a celebrity out there as a debugger based on Blink Developer Tools.

If you did not install node-inspector yet, install it as a global package and under root.

$sudo npm install -g node-inspector

Wait for a few seconds till the installation process is done.

Inside your hubot project folder, start the debugger:

$node-inspector --no-preload --web-port 8123

When the following message appears, it means that our debug session is ready.

Node Inspector v1.0.0
Visit http://127.0.0.1:8123/?port=5858 to start debugging.

Now we need to start our bot, in a different way than the old ‘bin/hubot’ command and remember to put your bot name corresponding to your application:

$coffee --nodejs --debug node_modules/.bin/hubot --name "[your_bot_name]"

And to set a breakpoint, put debugger to any line of your code, like:

2017-04-04_174110

In Chrome, visit http://127.0.0.1:8123/?port=5858 to start your debugging session, debug like any of your web applications.

 

An example of how Excel can boost your coding productivity

During my working time in software companies, there are ton of cases which the support of Excel helps alot.
Today for an example.

I have to add rules to validate many fields with the similar name like below:

  • open1post
  • open1person
  • open2corp
  • open2post
  • open2person
  • open3corp
  • …and so on…

I need to create some code lines like below:

  • $val->add(‘open1corp’, $multi_lang_items[‘lbl’][23])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open1post’, $multi_lang_items[‘lbl’][23])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open1person’, $multi_lang_items[‘lbl’][23])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open2corp’, $multi_lang_items[‘lbl’][24])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open2post’, $multi_lang_items[‘lbl’][24])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open2person’, $multi_lang_items[‘lbl’][24])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open3corp’, $multi_lang_items[‘lbl’][25])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • …and so on…

So, in excel:

  1. First column, I store a list of fields, name it “Form control name”.
  2. Because, a label is provided to 3 fields, for example: “open1corp”, “open1post”, “open1person” use the same lbl 23.

So that, we have to calculate the same number for each open[x][post_fix]. In order to achieve that, I used the magic of mod like below formula.

Note that, 19 is the row number of the first open[x][post_fix] item.

=CONCATENATE("$val->add('",[@[Form control name]],"', $multi_lang_items['lbl'][",ROW()-MOD(ROW()-1,3)+4-2*(FLOOR.MATH((ROW()-19)/3)),"])
 ->add_rule('match_pattern', '/^[0-9]*$/');")

And the result we get:
Excel productivity
That’s it, now we can copy those code to our IDE.

Create a linux shell to wrap files to the corresponding wrapper folder

I have list of around 200 .log files, and I am in need of creating a wrapper for each file.
Laborious buffaloes may have a flow like: Copy file name > Right click and create a folder > Move the file into it, repeat 200 times. Seems ez.
And this case, beside those human-beings, linux shell is also a kind of that buffalo.
Ok let’s go.

What I have:

  • 20161208_access.log
  • 20161209_access.log

What I about to have:

  • 20161208_access\20161208_access.log
  • 20161209_access\20161209_access.log

Step 1:

[ducfilan@localhost]$ cd logs
[ducfilan@localhost logs]$ vi wrapper_creator
# wrapper_creator file.
for full_filename in *log; do # loop through the log files.
 filename="${full_filename%.*}" # get the file name without extension.
 mkdir -p "$filename" # create the folder.
 mv "$full_filename" "$filename" # move the file into it.
done
echo "Done!"

Ok done, save it.

Step 2:

In order to execute it, we need to grant the execute permission.

[ducfilan@localhost]$ chmod +x wrapper_creator

Step 3:

And execute it.

[ducfilan@localhost]$ ./wrapper_creator
Done!

Ok I have what I want.

Enable system-wide inverse/reverse/natural scrolling on Ubuntu

1. Get your mouse device id by running the following in a terminal, you have to choose the right one:

xinput list

Take that number you got (just the number after “id=”) and replace “{device id}” with that number in the following command:

xinput list-props {device id} | grep "Scrolling Distance"

In my case:

xinput list-props 6 | grep "Scrolling Distance"

This will output something like below, remember that “Scrolling Distance” is case-sensitive. If nothing is outputted, you’ve chosen a wrong device id, go back to step 1 and choose another one:

Evdev Scrolling Distance (270): 1, 1, 1

So 270 is your property number, 1, 1, 1 is your scrolling distance, remember this to use later.

It is case sensitive unless you use -i in the grep command. Write down the numbers you find in the output from that command (in my case it was the number 1, shown three times and separated by commas). You will use the negative values of the numbers you get in your output. Also, make sure to write down the property number (it will be in parentheses in the output; in my case, it was (270) in Ubuntu and (273) in Fedora).

Note: If you get no output containing the property “Scrolling Distance” this method will not work for you and you will need to stop here and skip to an alternate way.

2. Create a natural scrolling config file by running the following command in your open terminal:

sudo touch /usr/share/X11/xorg.conf.d/20-natural-scrolling.conf

3. Now, config the natural scrolling profile by running the following command (you can use your favorite text editor instead of nano but I use nano):

sudo nano /usr/share/X11/xorg.conf.d/20-natural-scrolling.conf

In the file you have opened in your preferred text editor, paste the following (but be sure to change the numbers to the same comma-separated numbers you got from step 3; in my case, the number was 1 so in order to make the scroll inverse, I will change 1 to -1):

Section "InputClass"
        Identifier "Natural Scrolling"
        MatchIsPointer "on"
        MatchDevicePath "/dev/input/event*"
        Option "VertScrollDelta" "-1"
        Option "HorizScrollDelta" "-1"
        Option "DialDelta" "-1"
EndSection

Save the file (Ctrl+O) and exit (Ctrl+X) the text editor. No need for a reboot. Just issue the following command (substituting the property number and the negatives of the numbers you got in the third step, and the device id you got from the second step):

xinput set-prop {device id} {property number} -1 -1 -1

In my case:

xinput set-prop 6 270 -1 -1 -1

Refer from:  Ask Ubuntu, UbuntuWiki

 

Eisenhower Box: Làm thế nào để năng suất cao hơn

Chiến lược hành động và tổ chức công việc của Eisenhower rất đơn giản. Sử dụng ma trận quyết định dưới đây, bạn sẽ chia hành động của mình dựa trên 4 khả năng:

  1. Khẩn cấp và quan trọng (những công việc bạn sẽ làm ngay lập tức)
  2. Quan trọng nhưng không khẩn cấp (những công việc bạn sẽ lên lịch để làm sau)
  3. Khẩn cấp nhưng không quan trọng (những công việc bạn sẽ ủy thác cho người khác)
  4. Không khẩn cấp cũng chẳng quan trọng (những công việc bạn sẽ loại bỏ.)

Điều tuyệt vời về ma trận này là bạn có thể sử dụng cho các kế hoạch toàn diện (“Tôi nên dành thời gian mỗi tuần như thế nào?”) hay những kế hoạch nhỏ hàng ngày (“Tôi nên làm gì hôm nay?”)

Dưới đây là ví dụ về Eisenhower Box của tôi:

eisenhower-matrix
Điều quan trọng hiếm khi khẩn cấp và điều khẩn cấp thì hiếm khi quan trọng. -Dwight Eisenhower

Những công việc khẩn cấp là những thứ bạn hay gặp như email, cuộc gọi, tin nhắn và câu chuyện tin tức. Trong khi đó, theo lời của Brett McKay: “Công việc quan trọng là những thứ đóng góp cho sứ mệnh, giá trị và mục tiêu dài hạn.”

Loại bỏ trước khi tối ưu hóa

Cách nhanh nhất để hoàn thành công việc là loại bỏ nó hoàn toàn. Tôi không nói rằng bạn nên lười biếng nhưng bạn nên mạnh dạn loại bỏ bất kỳ công việc nào không hướng tới nhiệm vụ, giá trị và mục tiêu của bạn.

Chúng ta nên tự hỏi “Tôi có phải thực sự làm điều này không?” trước khi tìm cách tối ưu hóa. Bạn sẽ cảm thấy mình chỉ cần làm thêm giờ một chút là có thể hoàn thành công việc, bạn thoải mái khi làm đều này. Nhưng đó không phải là cách sử dụng thời gian tốt nhất.

Như Tim Ferriss nói, “Bận rộn là một dạng của sự lười biếng, lười suy nghĩ và hành động bừa bãi.”

Phương pháp Eisenhower sẽ khiến bạn xem xét xem việc này có thực sự cần thiết, để chuyển vào ô “Xóa bỏ” hay không. Thật sự mà nói, nếu bạn loại bỏ được hết những công việc lãng phí thời gian mỗi ngày thì rồi bạn cũng chẳng cần những lời khuyên làm việc hiệu quả nữa.

Nếu bạn thấy khó loại bỏ những hoạt động lãng phí thời gian khi chưa chắc chắn, hãy tự hỏi mình:

– Tôi đang làm việc hướng tới điều gì?

– Giá trị cốt lõi trong cuộc sống của tôi là gì?

Trả lời những câu hỏi này sẽ giúp làm rõ những công việc nhất định trong cuộc sống. Lựa chọn những việc cần làm hay cần loại bỏ trở nên dễ dàng hơn khi bạn biết rõ những gì quan trọng với mình.

Nguồn: Cafebiz