Weekend courses on UX / UI

Why UX/UI matters?
https://www.youtube.com/watch?v=O94kYyzqvTc

http://www.goodui.org
GoodUI did a good job on pointing out what kind of design and why they're cool.
It has fundamental tips on designing usable UX/UI.

Debug Laravel View

Laravel is a very nice framework, except some annoying.

One of it is the famous "Method Illuminate\View\View::__toString() must not throw an exception".
We often found this in the end of an action in a controller:

return View::make('path/view');

This implicitly converts the View to a string, by calling magic __toString() method. If something wrong with the view, we are shielded from seeing what happen.

To get around, use the explicit version:

return View::make('path/view')->render();

You will get your desire and "real" exception caused the view die!

Compile preprocessors like Coffeescript / SASS on saving in Komodo Edit

Be able to customise the editor is very convenient.

A normal approach is running a "watcher".
This approach is to call the compiler on saving (check Trigger > After save in Marco properties)
The code can be extends for other usage! : )

Note that Komodo has built-in syntax checking for SASS. I want this be off because it generates ".sass-cache" without giving me result. Check it off in preference window.

If something wrong, the command line output will tell you. That's enough : )
We can further "parse" the output to quick click to show the wrong code.

// Run after file saved
// 
// Install Sass: sudo gem install sass
// Install CoffeeScript: npm install -g coffee-script
komodo.assertMacroVersion(3);
var koDoc = ko.views.manager.currentView.koDoc;
var input = koDoc.file.dirName + '/' + koDoc.file.baseName;
var barename = input.substr(0, input.length - koDoc.file.ext.length);

switch (koDoc.file.ext) {
    case '.sass':
        var output =  barename + '.css';
        ko.run.runEncodedCommand(window, 'sass --no-cache ' + input + ' ' + output);
        break;
    case '.coffee':
        ko.run.runEncodedCommand(window, 'coffee --map --compile ' + input);
        break;
    default:
        break;
}

Japanese form - confirm - complete flow in Perl

I use the same view as both form and validation.
The trick here is to use multiple submit buttons to determine whether the form is confirmed or not.

The sample is written in Perl with module HTML::Template, however, the idea is open for all server side languages (Java, PHP, Python, ...)

Processing Perl script:

my $query = CGI->new;

    # Flag to display form inputs or not
    my $input = 1;
    if ($ENV{'REQUEST_METHOD'} eq 'POST') {
        if (validate_form()) {
            if ($query->param('submit_confirm') || $query->param('submit_confirm.x')) {
                # Confirmed, end here
                send_email();
                print $query->redirect('complete.pl');
                exit 0;
            }
            if ($query->param('submit_edit') || $query->param('submit_edit.x')) {
                $input = 1;
            } else {
                $input = 0;
            }
        } else {
            # Go back, display form to correct
            $input = 1;
        }
    }
    if ($input) {
        $query->param('step_input', 1);
    }

HTML views/form.html (Supposed to use HTML::Template)
Note that submit buttons should have two separate names. Some browsers like Firefox need this to distinguish. We can determine which button chosen by checking if field submit_confirm.x is existed.
It's tricky. Browser sends along a coordinate...

{% input family %}

         <tmpl_if name="step_input">
            <input type="image" src="confirm.gif" alt="確認">
        <tmpl_else>
            <input name="submit_edit" value="edit" type="image" src="edit.gif" alt="戻る">
            <input name="submit_confirm" value="confirmed" type="image" src="complete.gif" alt="登録する">
        </tmpl_if>

A little trick to writing view for both, by customised filter for HTML::Template
Having this, new shiny sugar syntax {% input family %} will render the input box, as well as validation message if found $message_family

sub custom_filter {
    my $text_ref = shift;
    
    # Define a new syntax {% input family %}
    $$text_ref =~ s/\{%\s*input\s+(.*?)\s*\%}
        /<tmpl_if name="step_input">
            <tmpl_if name="message_$1">
                <span class="message">
                    <tmpl_var escape=html name=message_$1>
                <\/span>
            <\/tmpl_if>
            <input 
        <tmpl_else>
            <tmpl_var escape=html name=$1>
            <input type="hidden"
        <\/tmpl_if>
        name="$1"
        value="<tmpl_var escape=html name=$1>">
        /gx;
}

Then register it:

    my $template = HTML::Template->new(
        filename => 'views/form.html',
        associate => $query,
        filter => \&custom_filter,
    );

Cẩm nang đi tàu ở Nhật

Mục lục:

1. Tàu và tàu điện

只見線 Tuyến tàu với phong cảnh hùng vĩ của miền Tohoku
  (Nguồn: marumine.co.jp)

2. Ga tàu
3. Cấu trúc ga tàu
4. Cửa soát vé
5. Tìm thông tin, tờ rơi, bảng điện tử
6. Tuyến tàu
7. Giờ giấc và sự cố
8. Đi tàu
9. Tra cứu
10. Vé thường, vé tháng, vé đặc biệt
11. Sử dụng máy bán vé
12. Leo lên tàu
13. Làm thế nào biết mình đi đúng hướng?
14. Chuyển tiếp tàu
15. Văn hoá trên tàu
16. Quên đồ trên tàu
17. Tản mạn: tàu điện ngầm, shinkansen.

Chọn nơi sống ở Nhật

Đến một nơi xa lạ, chọn được nơi sống ưng ý đôi khi là may rủi hơn là lựa chọn. Tuy nhiên nếu tìm hiểu kỹ trước khi quyết định sẽ giúp tránh phải chuyển nhà (khá đắt đỏ), chịu đựng (với không gian chưa ưng ý).