Nay nhờ có thằng đệ Claude Code và gói Copilot Pro Github tài trợ cho open source developer, mình đã xong nốt món nợ tech này.

Tính năng rất đơn giản: Ngay trong cửa sổ terminal, chỉ cần gõ

$ curl -L amlich.app
# hoặc
$ curl https://amlich.app

thì thông tin của ngày Âm hiện tại và bảng lịch tháng sẽ hiện thị rõ ràng, “rực rỡ” như một phần mềm CLI.

Ngoài ra, amlich.app cũng được thêm tính năng render thông tin Âm Lịch dưới dạng plain text cho AI Agent hoặc bất kỳ HTTP client nào có truyền header “accept: text/markdown”. Việc trả về plain text sẽ giúp tiết kiệm token khi làm việc với LLM.

Bài giới thiệu cũng chỉ đến đây. Bà con có thắc mắc gì thêm mình comment nghen.

Ghi chú thêm:

• curl mặc định prepend http:// nên cần thêm flag -L để follow redirection. Domain .app bắt buộc phải dùng https.
• Nếu terminal không có curl thì có thể thay bằng wget -qO-

Đây là một side project xuất phát từ nhu cầu cá nhân mà mình nghĩ nhiều người cũng sẽ gặp phải: việc sử dụng tên phường xã mới đã xuất hiện sâu rộng trên các văn bản, mẫu đơn, tin tức báo chí… nhưng chúng vẫn quá mới và lạ lẫm đối với những người đã lớn lên cùng với những cái tên phường, tên quận quen thuộc.

Đã có một vài công cụ tra cứu trực tuyến được làm ra từ năm ngoái nhưng khi mình tìm thử một browser extension để tiện việc tra cứu ngay tại tab đang mở thì chưa có ai làm.

Với số lượng dữ liệu ĐVHC cấp nhỏ nhất là phường/xã không quá lớn: 3291 đơn vị phường xã mới; 9953 phường xã cũ, tương đương với số lượng đối chiếu giữa cũ và mới). Đây là con số khá lý tưởng để thử khả năng và tốc độ của công nghệ IndexedDB mà các trình duyệt hiện đại đều hỗ trợ. Và nhờ sử dụng IndexedDB, tất cả dữ liệu và xử lý tra cứu hoàn toàn xảy ra offline tại trình duyệt mà không cần đến server.

Một tính năng đáng kể mà chỉ có browser extension mới làm được đó là tự động tìm và chú thích các tên phường / xã mới với tên địa phương cũ trong bất kỳ trang web nào bạn đọc. Việc này giúp độc giả các trang tin tức dễ dàng liên hệ đến vị trí địa lý của địa phương đang được nhắc tới.

Ngoài ra, side project này cũng giúp mình thử nghiệm agentic engineering và build software gần như hoàn toàn bằng AI Agent (Claude Code).

Và đến hôm nay, giữa thời đại AI này, mình đã được kiểm chứng rằng: VIẾT CODE sẽ không còn là công việc của lập trình viên nữa. LTV sẽ phải “tiến hóa” sang một vai trò cao hơn và đúng nghĩa engineering hơn. Topic này mình xin bàn trong một bài viết khác.

Cuối cùng, mời mọi người cài thử extension này và cho feedback nhé. Extension này nguồn mở và hoàn toàn không có quảng cáo hay tracking.

This blog is getting quite some dust. It’s been a while and I was too busy with daywork, technical research and especially a family with 2 kids. I regreted a little bit that I should have kept a habit of writing.

Anyhow, here I am, at the end of of 2023. I jotting down my recap of 2023 as a chance to look back and appreciate what I have achieved and also to restart my writing habit.

Professional

• 🚢 Released id.chotot.com and deep dived in OAuth & OpenID Connect
• 🚢 Released first stable version 1.0 of Chợ Tốt Design System after 2+ years of research, cross-domain collaboration and execution
• 🚢 Strengthen Chợ Tốt’s users authentication with SMS-based MFA
• ✅ Fought (and won) the uphill battle against Facebook Data Assessment ordeal

Personal

• ⌨️ Switched to Neovim completely and set up a portable nvim config based on NVChad
• 🖼️ Dipped one toe into Generative AI with Stable Diffusion, Automatic1111, LLM and Langchain
• 🔑 Researched WebAuthn and passwordless tech solutions; delivered a presentation at Vietnam Web Summit 2023
• 📜 Learned Go lang, Python
• 📚 Read (mostly listen to) 08 books
• 🚙 Traveled to 09 different towns and city with team and family.
• 🛝 Raised 2 boys (5 and 9 year old) without going insane.

More images:

How to install Ubuntu MATE on MacBook (Air) is out of this post scope. You may look up tutorials or YouTube videos specialized on this aspect.

Here’s what you need to do, after install it successfully and on the first start up:

#1 Choose panel layout

Ubuntu MATE uses the MATE Desktop Environment and it has system of panels affixed to the sides of the screen. These panels are so flexible that with them, MATE desktop can mimic any popular desktop layouts, including the traditional GTK2 layout, or Windows, or current Ubuntu GNOME or even Mac OSX…

However, tweaking the panels is tedious, so starting from Ubuntu Mate 19.10, you’ll have the Desktop Layout option on the Welcome screen where you can choose the preset of the panels that will resemble any popular desktops:

If you miss this screen, you can still search and re-open Welcome app from the applications menu.

Another way to choose panel layout is via MATE Tweak (installed by default): With MATE Tweak opened, switch to Panel settings group. At the Panels layout dropdown, select your preferred preset. Here, you have the option to save your panels’ preferences as a custom preset for your convenience.

Since I’m used to OSX metaphor, my choice was Cupertino and some of below tweaks depends on this.

#2 Install TLP power saving daemon

You only need this step if you’re on laptop. Here’s the claim by the author: “TLP saves laptop battery power on Linux without the need to understand every technical detail.”

For most laptop devices and MacBooks, all you have to to do is install these packages:

sudo apt install tlp tlp-rdw

And from now on, just leave it to the daemon to do its job. For more more info and configuration, visit TLP documentation page over here.

#3 Install dconf editor

dconf Editor, if you don’t know it yet, is a very handy tool to configure some of very hidden settings of Linux desktop. It is also a required tool for some of the steps below. If you can’t find it in the Applications menu > System Tool, install it now:

sudo apt install dconf-editor

#4 Hide the plank icon on dock

The Cupertino (macOS style) layout use Plank dock. By default it has the plank icon always appear on the dock (clicking it will open Plank preferences) which looks redundant for me.

Dock with Plank icon

So to hide it, open dconf Editor, click on the 🔍 (search) icon, search for plank, then select the path /net/launchpad/plank, then dock > dock1 (Since there is only one dock on the screen).

Scroll down and look for show-dock-item, turn it to false.

#5 Change Brisk menu hotkey

The applications menu (open when clicking top left Ubuntu MATE icon) is called Brisk menu. Depends on which panel layout you choose, it will be a conventional dropdown list menu or the full screen icons grid like ones found in modern desktops. But they use the same hot key to trigger, and by default it is Super_L (the left Command / Window key). However, I’m used to binding Super key with many shortcuts, so my preference is to change it to something else.

Open dconf Editor, search for brisk-menu, and navigate to /com/solus-project/brisk-menu/hot-key, disable Use default value and then set your own shortcut. Here are some of my suggestions:

• LaunchB - Launch the menu like on macOS; it is the media key at F4 key on MacBook keyboard. (This is my choice)
• <Mod4>space - Launch the menu with Super+space
• <Mod4>a - Similar to GNOME Shell’s activity and app launcher

#6 Reduce indicator applet spacing

Ubuntu MATE’s systray icons notoriously have very large spacing. To fix this, we will add some custom gtk-3 CSS overrides. Open this file or create it if it doesn’t exist: ~/.config/gtk-3.0/gtk.css. Add below CSS to the file and you may adjust it depending on your panel’s height and theme:

/* this apply to all panel menu items */
.mate-panel-menu-bar menuitem {
  padding: 2px 2px; /* vertical then horizontal padding */
}

/* this increase horizontal spacing a bit for global menu items*/
.-vala-panel-appmenu-private > menuitem {
  padding: 2px 4px;
}

#7 Install new theme

Ubuntu MATE comes with a few default themes which you can pick from the app named Appearance. To me, only the default Ambiant-MATE theme looks decent, while other looks dated. Fortunately, there are some good-looking themes that are still compatible with MATE desktop and can be easily installed from default Ubuntu apt-get repo:

• Adapta (adapta-gtk-theme)
• Arc (arc-theme)
• Numix (numix-gtk-theme)
• Flat-remix (installation instructions)

Besides, many GTK theme here compatible with Ubuntu Mate: omgubuntu.co.uk/2017/11/best-gtk-themes-for-ubuntu

Icons also have big impact on look & feel of the desktop. However I’ve tried many icon themes and because of compatibility, many of theme make the systray icons look terrible. These are a few of them that look decent on MATE:

• Papirus (papirus-icon-theme)
• Numix / Numix Circle (numix-icon-theme)
• Faenza (from faenza-icon-theme)
• Faenza MATE Icon (mate-icon-theme-faenza)
• Flat Remix icons (installation instructions)

My current desktop featuring default Ambiant MATE Dark theme with Flat-Remix-GTK window decoration.

#8 Switch to use dark cursors

Here’s another personal preference, but I’d prefer dark cursors to light ones. From Appearance app, you can choose the default MATE Black at the Pointer chooser. Or, you can install Yaru cursors theme via yaru-theme-icon apt package.

To set the cursor theme even before user log in, you can run below command, and then choose the preferred one:

sudo update-alternatives --config x-cursor-theme

#9 Install Ulauncher

I’m a big fan of Spotlight, and more recently, the Alfred app on macOS. More or less, both of them let me search and launch apps quickly without having to browse through the list of icons in launcher menu. They also let me search and open files quickly, and provide some handy actions like calculate arithmetic expression, look up dictionary and even search from the web.

When moving to Linux, fortunately, I’ve found Ulauncher which does very similarly to Alfred. To install, you can follow instructions at Ulauncher website. (there’s a custom ppa for Ubuntu users’ convenience.)

Ulauncher’s default shortcut is similar to macOS Spotlight’s, that is Super + Space. You can change it from the application’s setting.

Ulauncher popup with System extension

#10 Install Ubuntu Software application

Software Boutique is the default software center on Ubuntu MATE. However, it has very small selection of applications. To come back to the popular Ubuntu Software center which has more choices, including many updated Snap apps, install following package via terminal:

sudo apt install ubuntu-software

#11 Remember opening applications when log out / shutdown

When switching from macOS to Ubuntu MATE on this same MacBook Air, I noticed that the suspend mode on Linux keep consuming power much more than that on macOS. That means when I closed the laptop to put away or to carry to somewhere, the battery kept draining, and I ended up having to charge it constantly.

As long time macOS user, I find this is the most annoying thing about Linux on laptop. To work around, I shutdown the laptop whenever I leave it overnight or for a long time. Fortunately, Ubuntu MATE is already light-weigh and boots up very fast on SSD. To ease the pain of recovering the opening windows from last session, you can turn on Automatically remember running applications when logging out option in Startup Application window:

#12 Fix keyboard back lights keep turn up to 100% after restart / re-login

If your laptop has backlight for keyboard, then you’ll notice an annoying issue with the power management control which will set the keyboard backlight to maximum whenever you re-login or change from battery to AC power. On this community thread regarding the issue, some suggested to edit the Upower.conf but this will also disable the ability to adjust backlight brightness level with media keys.

Adapting from this post, below are the config I’m currently use as work-around. It will reset backlight to a very dim level which is visible in the dark instead of turn it off completely.

# run with terminal
gsettings set org.mate.power-manager kbd-backlight-battery-reduce on
gsettings set org.mate.power-manager kbd-brightness-dim-by-on-battery 75
gsettings set org.mate.power-manager kbd-brightness-on-ac 10

Instead of running above commands, you can edit these config with dconf Editor at /org/mate/power-manager

MacBook tweaks

Below are some additional tweaks specialized for MacBook. These tweaks may be too opinionated and less demanding so I just keep them brief (and because at this point I’m so exhausted writing this long post):

#13 Correct monitor color with custom ICC profile

My MacBook monitor looks a bit bluish when booting to Linux. This can be fixed by apply correct ICC color profile. Unfortunately, these is no ICC profile chooser on Ubuntu MATE (Ubuntu GNOME does have one). To apply custom ICC color profile on Ubuntu MATE, I need to install a tool named xcalib.

• Extract the *.icc file when logged into macOS or search and download a file called CustomMacRumors.icc.
• Add a new entry in Startup Application with following command: /usr/bin/xcalib -d :0 /path/to/CustomMacRumors.icc
• If there is error related to ramp size, check out this SO question.

#14 Swap Fn and Control keys and/or Option and Command keys

Install a kernel module named hid-apple-patched. Visit this Github repo to learn more..

#15 Install multi touch touchpad driver and config

If you want to make the best of your MacBook touch pad, especially wanting native three-finger drag, visit this article of mine to learn more.

#16 Install fusehpfs to mount HPFS disk drive from macOS

If you’re dual-booting Linux and macOS and wanting to mount macOS’ HPFS drive, head to this Github repo for instructions to install an APFS FUSE Driver for Linux. Do note that, with this fuse driver, you can only mount the HPFS drive as read-only for now.

Chắc hẳn khi dùng các công cụ gõ văn bản tiếng Việt (TV), bạn đã từng nghe qua hai bộ mã TV Unicode: dựng sẵn và tổ hợp.

Để hiểu rõ hơn chúng ta hãy cùng xem xét ký tự TV có dấu đơn giản: “Ạ”. Để mã hóa ký tự này, với Unicode dựng sẵn, chúng ta dùng một ký tự có mã Unicode U+1EA0 với tên mô tả tiếng Anh: “LATIN CAPITAL LETTER A WITH DOT BELOW”. Cả chữ A và dấu nặng được dựng sẵn trong một tọa độ mã Unicode (code point). Còn với Unicode tổ hợp, bạn cần hai code point:

• U+0041: LATIN CAPITAL LETTER A
• U+0323: COMBINING DOT BELOW

Đoạn JavaScript sau sẽ minh họa thêm sự khác nhau giữa 2 cách viết:

const dungSan = '\u1EA0';
const toHop = '\u0041\u0323';

console.log(dungSan); // "Ạ"
console.log(toHop);   // "Ạ"

console.log(dungSan.length); // 1
console.log(toHop.length);   // 2

console.log(dungSan == toHop); // false

Hiện nay, hầu như tất cả các phần mềm bộ gõ tiếng Việt đều sử dụng bộ mã dựng sẵn khi người dùng chọn bảng mã Unicode. Trong giao diện cài đặt Unikey cho Window, tại danh sách bảng mã sổ xuống, bạn sẽ thấy 2 lựa chọn: Unicode (ngầm hiểu là dựng sẵn) và Unicode tổ hợp.

Hai ứng dụng của String.prototype.normalize

Ứng dụng 1: So sánh chuỗi tiếng Việt

Như đã nói ở trên, văn bản tiếng Việt có thể được viết bằng hai bảng mã, và dù về mặt hiển thị ta thấy cùng một chuỗi, nhưng khi so sánh bằng code, hai chuỗi không bằng nhau ("Ạ" != "Ạ"). Do đó, sẽ có nhu cầu “chuẩn hóa” chuỗi văn bản tiếng Việt về một bảng mã thống nhất để dễ dàng so sánh.

Để chuẩn hóa chuỗi tiếng Việt trong ES6+, chúng ta chỉ cần gọi phương thức normalize của string như sau:

const dungSan = str.normalize('NFC');
// NFC — Normalization Form Canonical Composition. — Dựng Sẵn (mặc định)
const toHop = str.normalize('NFD');
// NFD — Normalization Form Canonical Decomposition. — Tổ Hợp

Như vậy, để so sách chuỗi tiếng Việt an toàn, chúng ta sẽ dùng normalize như ví dụ sau:

const str1 = '\u1EA0'; // "Ạ"
const str1n = str1.normalize('NFC');
const str2 = '\u0041\u0323'; // "Ạ"
const str2n = str2.normalize('NFC');

console.log(str1 == str2); // false
console.log(str1n == str2n); // true

Xem thêm đặc tả của String.prototype.normalize tại MDN.

Ứng dụng 2: Gỡ bỏ dấu khỏi chuỗi tiếng Việt và chuyển thành slug

Trước đây, để bỏ dấu khỏi chuỗi tiếng Việt trong JS, chúng ta cần một bảng tra cứu tất cả các ký tự có dấu, như ví dụ sau:

let str = 'Từ Điển Tiếng Việt';
str = str.replace(/[aáàảãạâầẩẫậăằẳẵặ]/g, 'a');
// tiếp tục cho các nguyên âm còn lại...
// và thêm một bảng tương tự nếu cần giữ nguyên hoa thường...

Tuy nhiên với normalize, có một thủ thuật khá ngắn gọn để gỡ bỏ dấu TV mà không cần đến bảng tra cứu. Cơ chế của nó là bạn sẽ chuyển chuỗi TV thành định dạng tổ hợp với dấu là các ký tự rời. Các ký tự dấu rời nằm trong một dãy Unicode biết trước có tên Combining Diacritical Marks (\u0300-\u036f) nên chúng ta dễ dàng xóa chúng một cách tổng quát. Cuối cùng, ký tự “Đ” là một ký tự độc lập nên cần kiểm tra riêng trường hợp này:

let str = 'Từ Điển Tiếng Việt';

// chuyển về dạng tổ hợp
str = str.normalize('NFD');
// xóa các ký tự dấu tổ hợp
str = str.replace(/[\u0300-\u036f]/g, '');
// chuyển chữ đ/Đ thành d/D
str = str.replace(/[đĐ]/g, m => m === 'đ' ? 'd' : 'D');

console.log(str); // 'Tu Dien Tieng Viet'

Không phải tôi tự nghĩ ra giải pháp thú vị này, mà tôi đã tình cờ đọc được tweet này của Lea Verou. Và cũng nhờ nó mà lần đầu tiên tôi biết đến phương thức normalize.

Việc xóa dấu TV có nhiều mục đích, tuy nhiên phổ biến nhất có lẽ là để chuyển tiêu đề thành dạng slug để tạo URL cho trang web. Sau đây là đoạn CodePen hiện thực phương thức chuyển chuỗi slug tiếng Việt:

See the Pen Vietnamese Slug Converter with Unicode Normalizer by Thanh Tran (@trongthanh) on CodePen.

Trên đây là hai ứng dụng thú vị của String.prototype.normalize với tiếng Việt. Nếu bạn phát hiện ra thêm ứng dụng nào hay ho nữa hay có thắc mắc, hãy để lại comment bên dưới.

Trailing comma (dấu phẩy đuôi, dấu phẩy cuối) là việc để dư một dấu phẩy sau phần tử cuối cùng ở cuối một danh sách. (có thể là phần tử trong Array literal, property trong Object literal, tham số của hàm…). Ví dụ:

// trailing comma trong Array literal
var categories = [
  'men',
  'women',
  'accessories',
];
// trailing comma trong Object literal
var person = {
  name: 'Harry Potter',
  gender: 'male',
  house: 'Gryffindor',
};
// trailing comma trong tham số của hàm (và trong lời gọi hàm)
function compare(
  param1,
  param2,
) { /* ... */ }

Như bạn cũng có thể thấy, dấu phẩy vốn để ngăn cách giữa các phần tử trong một danh sách, và dấu phẩy cuối là dư thừa về mặt cú pháp. Để dễ hình dung hơn, ví dụ mảng ở trên nếu viết trên cùng một dòng sẽ là var categories = ['men', 'women', 'accessories',]. Trong thực tế, với các trình duyệt cũ chỉ hỗ trợ ECMAScript 3 trở về trước (IE8), trailing comma sẽ gây ra lỗi cú pháp lúc chạy.

Trailing comma gây ra lỗi cú pháp lúc chạy trên IE8. Hình screenshot lấy từ StackOverflow.

Tuy nhiên, kể từ ECMAScript 5, trailing comma được chấp nhận cho danh sách phần tử Array và Object property. Việc lấy số phần tử (array.length) vẫn đúng với Array có trailing comma.

Tại sao trailing comma trở thành best practice?

1. Phần tử khi thêm vào cuối sẽ luôn đồng nhất và tách bạch

Khi không dùng trailing comma, việc thêm phần tử vào cuối danh sách sẽ gây ảnh hưởng đến phần tử kế cuối vừa được thêm dấu phẩy và commit log của bạn sẽ như thế này:

  var categories = [
    'men',
    'women',
-   'accessories'
+   'accessories',
+   'children'
  ];

Khi có trailing comma, commit log của bạn sẽ chỉ hiển thị phần thay đổi:

  var categories = [
    'men',
    'women',
    'accessories',
+   'children',
  ];

2. Dễ dàng sắp xếp lại thứ tự và cập nhật danh sách

Vì tất cả các phần tử đều kết thúc bằng dấu phẩy, sắp xếp lại thứ tự phần tử bất kỳ đơn giản và dễ dàng:

Sắp xếp lại phần tử trong mảng

3. Giảm số dòng conflict khi merge với version control

Conflict code hiển thị khi không dùng (trên) và có dùng (dưới) trailing comma

Trong ví dụ không dùng trailing comma, mặc dù phần tử female đều thêm cùng một dấu phẩy, Git vẫn không tự động merge dòng này và vẫn báo conflict cùng với dòng thay đổi tiếp theo. Việc theo dõi những dòng conflict vô nghĩa này sẽ gây khó khăn cho người merge và rất dễ gây ra sai sót bị mất code sau khi resolve.

Ngoài ra, khi số dòng thay đổi ít đi thì khả năng conflict code sẽ giảm và khả năng code tự merge sẽ cao hơn.

Sử dụng trailing comma có an toàn?

Trailing comma chỉ hữu dụng với danh sách trên nhiều dòng, do đó khi danh sách ngắn trên cùng một dòng, bạn không cần để dư dấu phẩy làm gì.

Như đã nói ở trên, trailing comma được chấp nhận kể từ ECMAScript 5 cho Object và Array literal, nên nó khá an toàn cho 2 trường hợp này. Ngoài ra khi được minify, mã nguồn JavaScript cuối cùng sẽ được loại bỏ dấu phẩy dư thừa.

Với danh sách tham số của hàm, nó chỉ mới được chấp nhận trong ES2017. Nếu JS engine chưa hỗ trợ, và khi chạy trực tiếp nó sẽ gây lỗi cú pháp. Cho nên sẽ an toàn hơn nếu code của bạn được biên dịch thông qua Babel và sử dụng preset-env.

Theo kinh nghiệm cá nhân, hiện tôi vẫn tránh dùng trailing comma trong tham số hàm và cũng rất ít khi viết hàm có danh sách tham số quá dài. Thay vào đó, lời khuyên cho bạn là nên dùng object literal để gom danh sách nhiều tham số vào thành một tham số cho hàm, như ví dụ sau:

// Thay vì viết hàm nhận nhiều tham số:
function getDayString(lunar, solarDay, solarMonth, solarYear) { /* ...*/ }
// Nên thay bằng hàm nhận một tham số là object
function getDayString(options = {}) { /* ...*/ }

// Khi đó lúc gọi hàm ta có thể truyền tham số bằng object literal
// và sử dụng propety shorthand nếu biến local trùng tên
getDayString({
  lunar,
  solarDay,
  solarMonth,
  solarYear,
})
// Bằng việc sử dụng object literal, tham số của hàm giờ đây sẽ tham chiếu theo tên
// và không còn phụ thuộc vào thứ tự như với mảng danh sách tham số.

Công cụ hỗ trợ viết code với trailing comma

Phần này danh cho những ai đã có kinh nghiệm cấu hình code editor nên tôi chỉ viết ngắn gọn:

ESLint

Nếu bạn đang sử dụng eslint, bạn có thể thêm rule: comma-dangle. Rule này có thể được áp dụng tùy trường hợp, ví dụ để không áp dụng cho tham số hàm:

{
  "comma-dangle": ["error", {
    "arrays": "always-multiline",
    "objects": "always-multiline",
    "imports": "always-multiline",
    "exports": "always-multiline",
    "functions": "never"
  }]
}

Prettier

Với prettier, bạn chỉ cần bật option: trailingComma.

# chỉ bật trailing comma cho Array, Object và import
trailingComma: es5
# bật trailing comma cho cả danh sách tham số hàm
trailingComma: all

Trường hợp danh sách khai báo biến

Khi nói về danh sách có dấu phẩy không thể không nhắc đến trường hợp khai báo nhiều biến cùng lúc với một từ khóa var / let. Tuy nhiên với danh sách này, cú pháp JavaScript hiện tại không cho phép trailing comma:

// lỗi cú pháp unexpected token...
var a,
    b,
    c,
    ;

Thay vì vậy, từ lâu tôi vẫn áp dụng best practice cho việc khai báo nhiều biến local như sau:

// Với danh sách biến không gán giá trị ban đầu,
// có thể viết trên cùng một hàng:
var a, b, c, d, e;
// Với danh sách biến có gán giá trị ban đầu,
// luôn luôn xuống dòng và bắt đầu với từ khóa var / let:
var x = 1;
var y = 2;
var z = 3;
// Trong mọi trường hợp, nếu muốn việc thêm bớt và sắp xếp biến local
// dễ dàng, luôn xuống dòng và bắt đầu từ khóa var / let:
var foo = 123;
var bar = 'hello';
var baz;

Việc luôn xuống dòng và bắt đầu bằng từ khóa var / let sẽ giúp đạt được những lợi ích như đã liệt kê ở trên với trailing comma.

Một cách viết danh sách comma khác

Trước đây, đã từng có một kiểu viết danh sách phần tử trong JavaScript khá thịnh hành, đó là “comma first”:

var gender = [
    'men'
  , 'women'
  , 'accessories'
  ];

Tuy nhiên, đây là cách viết nhiều người (trong đó có tôi) xem là không chuẩn và vẫn bị một hạn chế đó là dòng đầu tiên không đồng nhất (ngược lại với comma last). Và một khi thành thói quen, có thể bạn sẽ để dư thêm dấu phẩy ở dòng đầu tiên và điều này còn nguy hiểm hơn là để dư dấu phẩy cuối.

Thay lời kết: luôn thêm ký tự xuống dòng cuối file

Dù không nhìn thấy, các dòng văn bản plain text đều kết thúc bằng ký tự linefeed (\n) đối với Linux & macOS và 2 ký tự carriage return và linefeed (\r\n) trên Windows. Khi người soạn văn bản (hay code) viết đến cuối file và không gõ Enter lần nữa, dòng cuối cùng của file sẽ không kết thúc bởi ký tự xuống dòng. Do đó khi văn bản mới được đánh vào cuối file, dòng cuối cùng của version trước đó sẽ thay đổi trong change log bởi nó vừa được thêm ký tự xuống dòng.

Do đó cùng nguyên tắc như với trailing comma, lời khuyên là luôn chèn ký tự xuống dòng vào cuối file. Và nếu bạn nghĩ mình sẽ quên, các editor phổ biến (VSCode, SublimeText, Atom…) đều có setting Insert Final Newline để tự động làm việc này cho bạn.

Nếu team bạn có sử dụng editorconfig, bạn có thể cài đặt rule này: insert_final_newline = true để áp dụng cho cả project.

When I started my software engineering career, I was fully immerged with GUI and mouse pointers by the OS and the tooling I used. With irritation at first, I had to self-taught my terminal skills because some of the tasks demanded. However, the more I advanced in my career, the more I see how powerful and convenient CLI (command line interface) can be. Through the years, I had to look up every command that is needed by my job, as a coder, writer, devops and even as casual user, and kept the command usage in a long note. I’m migrating and organizing them here for my own reference as well as may it be useful for other peeps.

Sure you can further look up command usage in cheat sheets or Google them up if you know what command to use, but for my younger self as CLI noob, I had no ideas what command to use as well as which tasks are possible on the terminal. Therefore, this mini cheat sheet is how I get on with the CLI bandwagon.

I’m composing below snippets and headings following devhints.io markdown structure with intention that this may be re-deployed in that format later.

Note: these commands of course use Bash or compatible shells (ZSH, fish), which is available as default in Linux and macOS.

Navigate file systems

Display full path of current working directory:

pwd

List folder content:

# list content of current folder
ls
# list content (even hidden files) of current folder
ls -a
# list content of current folder with extra metadata columns
ls -l

Note: The terms folder and directory are interchangeable.

Change directory (a.k.a cd):

# go to a folder with absolute path (start with /)
cd /home/user/documents
# go to a child folder from current folder (./ optional)
cd work/projects/client
# go to parent folder
cd ..
# go to user's home folder (from anywhere)
cd ~

Display byte size of current directory and sub-directories

# get size of current and its direct sub-directories
du -chd 1

# get size of a single directory
du -sh node_modules/

• -d: max depth (if omitted, display all sub-directories recursively)
• -h: use human-readable size
• -s: display only 1 entry for each specified directory

Find files via name:

Find files with name in current directory and its children:

find . -type f -name "postgis-2.0.0”

Type: f (file); d (directory)

Find all files in a folder with pattern and execute command on it

find . -name '*.js' -exec [command] '{}' \;

Note: {} is the path to the file of each loop entry \; is the terminate character

Example:

find . -name '*.js' -exec jscodeshift -t migrate-to-modern-1.0.js '{}' \;

Find and remove all node_modules folder recursively

# Dry run:
find . -name "node_modules" -type d -exec echo "{}" +
# Do it:
find . -name "node_modules" -type d -exec rm -rf '{}' +

Search for pattern in files with grep

grep -rnw '/path/to/somewhere/' -e 'pattern'

• -r or -R is recursive,
• -n is line number, and
• -w stands for match the whole word.
• -l (lower-case L) can be added to just give the file name of matching files.

Along with these, --exclude, --include, --exclude-dir flags could be used for efficient searching:

# This will only search through those files which have .c or .h extensions:
grep --include=\*.{c,h} -rnw '/path/to/somewhere/' -e "pattern"

# This will exclude searching all the files ending with .o extension:
grep --exclude=*.o -rnw '/path/to/somewhere/' -e "pattern"

# For directories it's possible to exclude a particular directory(ies) through --exclude-dir parameter. For example, this will exclude the dirs dir1/, dir2/ and all of them matching *.dst/:
grep --exclude-dir={dir1,dir2,*.dst} -rnw '/path/to/somewhere/' -e "pattern"

Working with file owner and permission

Changing file permissions

# Change permission of a file using octal number
chmod 600 key.pem
# (note: don't use same octal number on both files and directories)

# Add run (execute) permission to all users
chmod a+x key.pem

# Add write permission to user, remove read permission from group
chmod u+w,g-r key.pem

# Recursively set exact permission
chmod -R u=r project/

Changing file owner

# Change owner of files and directories recursively to user:group
chown -R thanh:admin /usr/local/

Note: add sudo if needed.

Viewing files content:

# print content of a whole file
cat file.txt

# print only the last 20 lines of a text file
tail -n 20 errors.log

Make new files & directories:

# Make an empty file
touch filename

# Make a directory
mkdir src

# Make a deeply nested directory and any directories between
mkdir -p project/private/devops/nginx

Copy and link files

# copy a file
cp from/path to/path

# create symbolic link
ln -s source_file target_file

Move files and folders

# Move and rename a file
mv from_file to_file
# Move multiple files to a target directory
mv file1 file2 file3 directory

Edit file content:

# edit a file
vim README.md
# Easier editor on Linux
nano README.md

# set content of a file with echo
echo 'hello' > file
# append some text to an existing file (on new line)
echo 'world' >> file

# set file content using tee (where sudo is required)
echo "replication:" | sudo tee -a /etc/mongod.conf
# -a is for append

Replace text inline inside a text file:

sed -i -e "s/old_text/new_text/g" hello.txt

• -i replace inline
• -e followed by an expression
• s/old_text/new_text/g replace string from -> to

Compress and uncompress

Unzip (uncompress) .zip archives:

# unzip and extract to same folder
unzip file.zip
# unzip and extract to another folder
unzip file.zip -d another/folder

In Ubuntu, if unzip command does not exist, install with sudo apt install unzip

Compress a whole folder with tar + gzip

tar -czvf dump.tar.gz dump/

Mnemonic for the command flags -czvf (with some joking): Compress Ze Vucking File

Uncompress a tar.gz file:

tar -xzvf dump.tar.gz
tar -xzvf dump.tar.gz -C target/folder/

Mnemonic for the command flags -xzvf (with some joking): Extract Ze Vucking File

Remove files & directories

# Remove a file
rm file.txt

# Remove a directory
rm -r directory

# Remove all html file in current folder
rm *.html

• -r recursive (required for directory)
• -f force remove (if files are read-only)

Get server / machine info

Monitor system resource and workload with top command:

top

To sort and configure top command

In Linux:

• Capital P sort by CPU
• Capital M sort by Mem
• c to toggle full command path
• e to switch memory unit
• m to switch memory total display

In macOS:

• Type o, then key in cpu to sort by CPU
• Type o, then key in mem to sort by Memory

Get CPU, memory info (Linux only)

cat /proc/cpuinfo
lscpu

cat /proc/meminfo

List all disks on machine (Linux only)

sudo lsblk -o NAME,FSTYPE,SIZE,MOUNTPOINT,LABEL

Shows the amount of disk space used and available on current machine

df

#With file system type (EXT4, XFS...)
df -Th

Working with remote servers

Connect to remote server shell via SSH:

# Connect via provided username and password
ssh username@hostdomain.com
# Connect via secret *.pem key
ssh username@hostdomain.com -i /path/to/key.pem

Note: key.pem must have permission octal less than or equal 600

Check which distro & distro version

# try either
uname -r
lsb_release -a

For CentOS only:

rpm --query centos-release

Copying from and to remote server with scp

Copy the file “foobar.tgz” from the remote host to current dir in local host

scp remote-host:/home/user/foobar.tgz ./

remote-host is a pre-configured host name in ~/.ssh/config

Copy the file “foobar.tgz” from the local host to a remote host

scp -i key_file.pem foobar.tgz remote-host:/some/remote/directory

Copy whole directory from the local host to a remote host

scp -r uploads/ remote-host:/some/remote/directory

Result will be new folder copied to /some/remote/directory/uploads at remote.

Git and file download

Some Git tips

# Check diff change list with a COMMIT hash
git diff COMMIT^!

# Check diff against last change
git log -p [--follow] [-1] <path>
# Use --follow if file renamed

More: git commands and aliases.

Download files with curl

# Download and display file content on terminal
curl google.com
# Download a file and specify a new filename
curl http://example.com/file.zip -o new_file.zip
# Download multiple files (and save exact file names from remote)
curl -O URLOfFirstFile -O URLOfSecondFile
# Download a file and follow redirects
curl -L http://example.com/file
# Resume a previously failed download
curl -C - -o partial_file.zip http://example.com/file.zip

Download all URL listed in a text file (each link on a line)

cat photos.txt | xargs -n 1 curl -LO

Media conversion and manipulation

More often than not, you’ll have the need to convert or manipulate photos or even videos on the remote server or on your local machine where installing a full GUI software is restricted or too troublesome. Luckily, there are imagemagick and ffmpeg CLI tools that can help with most media manipulation needs.

Convert a PNG to ICO to make favicon.ico

Need to install imagemagick first:

convert favicon.png -define icon:auto-resize=64,48,32,16 favicon.ico

Convert a PDF to multiple jpg files

Require imagemagick:

convert -density 300 -trim test.pdf -quality 100 test.jpg

Merge multiple jpg files into one PDF document

Need imagemagick as well.

# jpg files are named so that they appear in correct order
convert -density 150 *.jpg passport.pdf

Convert mp4 to webm with FFMPEG

https://gist.github.com/clayton/6196167

Convert videos to animated gif with FFMPEG

To make best looking as well as optimized animated gif, you need to run multiple commands, so save below script as gifmaker.sh

#!/bin/sh
# Usage: ./gifmaker.sh video.mkv anim.gif
palette="/tmp/palette.png"

filters="fps=15,scale=640:-1:flags=lanczos"

ffmpeg -v warning -i $1 -vf "$filters,palettegen" -y $palette
ffmpeg -v warning -i $1 -i $palette -lavfi "$filters [x]; [x][1:v] paletteuse" -y $2

Edit fps=15 for more or less frame rate; scale=640 for larger or smaller size based on max width. Add execution permission to gifmaker.sh.

The script is thanks to this article on blog.pkh.me.

Miscellaneous

Generate SSH key

ssh-keygen -t rsa -C "your_email@example.com"

Tunnel MongoDB connection from remote to local

ssh user@host -i private-key.pem -L 27018:localhost:27017

(27018 is local, 27017 is remote server)

That’s it for now. To be updated…

Lấy cảm hứng từ trang blog mới của Dan Abramov’s Overreacted.io và từ trang the Old New Thing mà chính blog của Dan lấy ý tưởng, để mở đầu cho những bài viết của năm 2019, tôi sẽ viết nhiều hơn về những “câu chuyện mới” từ những điều quen thuộc, những câu chuyện “tiểu tiết” nhưng thú vị về những thứ mà lập trình viên vẫn gặp hằng ngày, hay những ngóc ngách của kỹ thuật mà chúng ta vẫn thường dùng nhưng quá bận rộn để tìm hiểu tường tận…

Để mở đầu chuỗi bài viết này, tôi sẽ bàn về một đặc tả mà chắc các bạn code JavaScript vẫn nghe về nó hằng ngày nhưng tôi dám cá ít bạn biết về cách nó đang vận hành. Đó chính là ECMAScript. Bạn có thắc mắc vì sao khi nói đến những cải tiến của JavaScript, người ta thường nói về phiên bản ECMAScript? Hay khi nói về JavaScript hiện đại, người ta thường dùng chữ ES6+? Tại sao ECMAScript 6 còn được gọi là ECMAScript 2015?.. Bài viết này sẽ giải đáp những thắc mắc đó của bạn.

Nguồn gốc ECMAScript

Để hiểu về ECMAScript chúng ta cần biết chút lịch sử của JavaScript.

JavaScript được sáng tạo bởi Brendan Eich (đọc là /aik/) vào năm 1995 chỉ trong 10 ngày cho trình duyệt lúc bấy giờ là Nescape Navigator. Công ty Nescape sau đó vào 1996 đã gửi đặc tả JavaScript lên tổ chức ECMA International để biến nó thành một đặc tả tiêu chuẩn cho các trình duyệt dưới sự bảo hộ của tổ chức ECMA. Ngôn ngữ scripting cho trình duyệt Nescape chính thức trở thành tiêu chuẩn ECMA với phiên bản đầu tiên được xuất bản vào tháng 06 1997 dưới tên mã ECMA-262, và JavaScript trở thành hiện thực (implementation) của đặc tả này.

Một điều thú vị với giai đoạn khởi đầu của ECMAScript đó là JavaScript là một cái tên được sở hữu nhãn hiệu (trademarked) bởi Sun Microsystems (cũng là chủ sở hữu của cái tên Java) và chỉ có Nescape mới có quyền sử dụng. Để cạnh tranh, Internet Explorer 3 của Microsoft cũng hiện thực một ngôn ngữ scripting tương tự, nhưng để tránh rắc rối về quyền nhãn hiệu, phải dùng cái tên là JScript. Do đó khi được chuẩn hóa, để đảm bảo ai cũng có thể sử dụng tên của ngôn ngữ lập trình định nghĩa bởi đặc tả ECMA-262, cái tên ECMAScript đã được chọn.

Các phiên bản ECMAScript đầu tiên

Thời điểm ECMAScript mới được phát hành, bản thân Nescape cũng tiếp tục hiện thực JavaScript và có phiên bản riêng. Cụ thể phiên bản ES đầu tiên tương đương với JavaScript 1.3. ECMAScript 2 chỉ là phiên bản hiệu chỉnh để tương thích với tiêu chuẩn ISO/IEC 16262. ECMAScript 3 là phiên bản có một số cải tiến đáng lưu ý như RegularExpression, try/catch… và tương đương với JavaScript 1.5 của Nescape Navigator 6.0, Firefox 1.0 và JScript 5.5 của Internet Explorer 5.5.

ECMAScript 4 với đặc tả nổi bật là class, khai báo kiểu, generator, iterator, và E4X (ECMAScript for XML) đã có sự không đồng thuận giữa hai tổ chức có thị phần trình duyệt lớn nhất lúc bấy giờ là Microsoft và Nescape/Mozilla dẫn đến việc phiên bản này bị loại bỏ. Tuy nhiên vẫn có một hiện thực khá nổi tiếng sử dụng đặc tả này đó chính là ActionScript 3 dành cho Flash.

ECMAScript 5 là phiên bản thay thế ES4, là sự thỏa hiệp của Brendan Eich (lúc này đã là CTO của Mozilla, tổ chức phi lợi nhuận thành lập bởi Nescape và chịu trách nhiệm phát triển trình duyệt nguồn mở Firefox) với các bên phản đối ES4 (trong đó có Yahoo, Microsoft và Google). Những cải tiến trong ES5 không nhiều và vốn ban đầu được Microsoft đưa ra dưới phiên bản đề nghị là ES3.1. Một số thay đổi đáng chú ý trong ES5: strict mode, JSON, các phương thức của Object và Array, getter & setter… ES5 được chính thức phát hành vào tháng 12/2009, tương đương với JavaScript 1.8.5 (Firefox 4, và là phiên bản JavaScript độc lập cuối cùng) và chỉ được hỗ trợ hoàn toàn kể từ Internet Explorer 9. Giai đoạn này cũng đánh dấu sự xuất hiện của Node.js, nền tảng server side thành công nhất của JavaScript.

Phiên bản tiếp theo sau ECMAScript 5 mất một khoảng thời gian dài để hoàn tất. Lúc này Firefox đã chiếm được thị phần đáng kể, IE vẫn chiếm đa số nhưng đang mất dần thị phần và Chrome là anh lính mới nhưng phát triển rất nhanh. JavaScript nhận được sự quan tâm lớn từ xu hướng phát triển web app nặng về phía Front End với cách tiếp cận AJAX. Tiếp theo sau đó là sự nở rộ của các JavaScript frameworks.

Các công ty nắm thị phần trình duyệt đa số đã đạt được sự đồng thuận cao nên dự án cho phiên bản ES tiếp theo được đặt tên là ECMAScript Harmony. ECMAScript Harmony cũng đánh dấu quy trình làm việc mới của tiểu ban ECMA TC39 (Technical Committee 39) với các đặc tả mới được tiến hành hoàn thiện theo module và chuẩn hóa qua 5 bước (tương tự quy trình của W3C cho các module của HTML & CSS).

ECMAScript 6 (ECMAScript 2015)

Các đặc tả của ES6 được khóa sổ vào tháng 6 2015 và phiên bản ES được đổi từ số thứ tự thành năm phát hành, ECMAScript 2015. Đây là phiên bản có rất nhiều cải tiến về cú pháp khiến cho JavaScript gần như lột xác hoàn toàn.

Một số đặc tả mới đáng chú ý (không phải tất cả):

• class và public method
• block scope và từ khóa let, const
• arrow function
• template string
• generator và iterator
• Promise
• destructuring assignment
• module (còn gọi là ECMAScript module / esm)
• …

Với nhiều cú pháp không tương thích cho trình duyệt cũ, ES6 cũng đánh dấu sự phát triển của xu hướng viết JavaScript hiện đại và biên dịch thành JavaScript cũ với trình biên dịch nổi bật nhất là 6to5 mà sau này được biết đến với cái tên Babel.

Hiện nay các trình duyệt hiện đại đều đã hỗ trợ hết các đặc tả ES6 trong đó có: Chrome, Firefox, Safari, MS Edge. Phiên bản cuối cùng của IE, IE11 chỉ hỗ trợ một vài đặc tính của ES6. Node.js hỗ trợ hoàn toàn ES6 (trừ module) từ phiên bản 6.0.

ECMAScript Next và quy trình 5 bước

Kể từ ES2015, các phiên bản ECMAScript tiếp theo được phát hành định kỳ hằng năm, tập hợp những module đã được hoàn thiện qua quy trình 5 bước:

• Stage 0 strawman: Ý tưởng cho ES mới được đệ lên TC39 bởi thành viên hoặc TC39 contributor. Những ý tưởng này rất thô nhám và hoàn toàn có thể bị loại bỏ, không được hiện thực.
• Stage 1 proposal: Được sự đồng thuận bởi các thành viên TC39, ý tưởng ở stage 0 trở thành đặc tả đề nghị. Một thành viên của TC39 được phân làm người chịu trách nhiệm chính (champion). Đặc tả stage 1 phải có các tài liệu mô tả API, ví dụ và đôi khi là có sẵn polyfill.
• Stage 2 draft: Đặc tả mới phải được định nghĩa đầy đủ như trong văn bản đặc tả chính thức (ECMAScript specification). Phải có hiện thực thử nghiệm bởi các JavaScript engine hoặc biên dịch thông qua Babel. Đến bước này, đặc tả đã có nhiều khả năng thành tiêu chuẩn và chỉ cho phép những thay đổi nhỏ.
• Stage 3 candidate: Đặc tả gần như hoàn thiện. Phải có ít nhất 02 hiện thực thử nghiệm từ các trình duyệt hoặc JavaScript engine (có thể nằm phía sau cờ config). Đặc tả được lấy đánh giá từ người dùng thông qua hiện thực thử nghiệm và cuối cùng phải được xem xét và duyệt bởi các thành viên khác của TC39.
• Stage 4 finished: Đặc tả đã trở thành tiêu chuẩn ECMAScript. Acceptance test trong bộ “Test 262” cho đặc tả phải được viết ra. Người biên tập viên ECMAScript phải ký duyệt để đặc tả trở thành tiêu chuẩn ECMA và đặc tả mới sẽ được chỉ định cho phiên bản ECMAScript tiếp theo gần nhất.

Với quy trình hoàn thiện dần theo module như trên, có thể thấy ECMAScript trở thành tiêu chuẩn tiến hóa liên tục. Các phiên bản ES sau ES6/ES2015 có ít đặc tả mới hơn trong từng phiên bản. Việc gọi ES với phiên bản tăng dần không còn mấy ý nghĩa. Qua đó ta cũng thấy lý do phiên bản ES bây giờ được đặt theo năm phát hành.

Phiên bản ECMAScript mới nhất tại thời điểm tôi viết bài này là ECMAScript 2018.

Hiểu biết về ECMAScript giúp cài đặt Babel hợp lý hơn:

Sự phổ biến của việc dùng Babel để biên dịch các cú pháp ES mới và một số boilerplate / starter-kit lạm dụng Babel stage preset (@babel/preset-stage-#) khiến cho các lập trình viên hay nhầm lẫn các đặc tả chuẩn và thử nghiệm của JavaScript. Bản thân tôi cũng từng nhầm lẫn.

Theo quan sát của tôi khi làm việc với React, có 2 đặc tả hay bị nhầm thuộc ES6 đó là: object spread và class field.

Object spread được phổ biến nhờ JSX và Redux reducer:

// property spread để truyền tự động props từ component cha sang con
const Container = props => (
  <div>
    <Child {...props} />
  </div>
);

// Redux reducer là pure function:
export default function reducer(state = defaultState, action) {
  switch (action.type) {
    case SOME_TYPE:
      return { ...state, ...action.payload };
    default:
      return state;
  }
}

Nhiều bạn vẫn nhầm lẫn đây là một đặc tả của ES6 bởi ES6 đã có rest và spread cho Array. Nhưng object spread chỉ thành đặc tả chính thức trong ES2018.

Một cú pháp thường được sử dụng để khởi tạo property và auto-bind các method của React class component đó là class (public) fields:

class MyComponent extends Component {
  // class property khởi tạo state
  state = { counter: 0 };
  // class property và arrow function cho phép this luôn được bind với instance của MyComponent
  onIncrement = () => {
    this.setState({ counter: this.state.counter + 1 });
  };

  render() {
    return (
      <div>
        <button onClick={this.onIncrement} />
      </div>
    );
  }
}

Đây là một đặc tả được review khá chậm và kỹ lưỡng, và tại thời điểm viết bài này, nó vẫn đang ở stage 3. Vì đây là đặc tả mở rộng trên đặc tả class của ES6, trong khi các boilerplate lại hay sử dụng preset-stage-0, nhiều dev sử dụng class field vẫn không biết rằng đây vẫn là đặc tả chưa hoàn tất.

Để tránh những nhầm lẫn ở trên cũng như tránh cho dev lạm dụng những cú pháp thử nghiệm mà không có nhận thức về tiêu chuẩn ES, Babel 7.0 đã chính thức khuyến cáo và sẽ từ bỏ stage preset trong thời gian tới. Thay vào đó, Babel 7 khuyến khích bạn sử dụng @babel/preset-env cho phép lập trình viên sử dụng cú pháp đã trở thành chuẩn ES vào thời điểm hiện tại. Và nếu muốn sử dụng những cú pháp thử nghiệm (stage <4), bạn phải khai báo tường minh plugin của Babel cho đặc tả đó. Cụ thể với class field, bạn phải thêm plugin babel-plugin-syntax-class-properties vào package.json và .babelrc.

Một vài chuyện bên lề thú vị khác về JavaScript và ECMAScript

JavaScript ban đầu được đặt tên là Mocha, sau đó trong giai đoạn beta được đổi tên thành LiveScript. Tuy nhiên lúc phát hành chính thức, lại được đổi thành JavaScript với mục đích marketing và để ăn theo ngôn ngữ lập trình hiện đại đang nổi lúc bấy giờ là Java. Việc Nescape sử dụng tên JavaScript phải được sự đồng ý của Sun Microsystems, chủ sở hữu của Java và Sun giữ quyền sở hữu nhãn hiệu với JavaScript™.

Sau khi mua lại Sun Microsystems, Oracle hiển nhiên trở thành chủ sở hữu của Java và nhãn hiệu JavaScript™. Mozilla (công ty kế tục của Nescape) đã có thỏa thuận đặc biệt từ trước với Sun, và vẫn tiếp tục với Oracle, được quyền sử dụng miễn phí vô thời hạn nhãn hiệu JavaScript™. Tuy nhiên, bất kỳ tổ chức, hay cá nhân nào khác muốn thương mại hóa JavaScript™ phải được phép và phải trả phí sử dụng cho Oracle. Vì vậy bạn để ý sẽ thấy các conference về JavaScript không bao giờ dùng chữ JavaScript mà chỉ viết tắt JS. Năm ngoái đã có một app bị từ chối cho lên iOS app store vì trong tựa app có chữ JavaScript!

TypeScript, phát triển bởi Microsoft, một ngôn ngữ biên-dịch-sang-JavaScript, không phải là ngôn ngữ theo tiêu chuẩn ECMAScript. Mặc dù TypeScript hỗ trợ hoàn toàn các cú pháp của ES, TS có nhiều cú pháp bên ngoài ES chẳng hạn như decorators, interface, và đặc biệt là khai báo kiểu (mặc dù đã xuất hiện trong ES4, cho đến hiện tại khai báo kiểu vẫn không được TC39 xem xét ở bất cứ stage nào)… Dù vẫn mang tiếng là ngôn ngữ viết để biên dịch, TypeScript đã trở thành ngôn ngữ chính thức cho server side platform mới có tên Deno được viết bởi chính tác giả của Node.js.

Lời kết

Những đặc tả mới của ECMAScript luôn hướng đến việc giúp cho công việc của lập trình viên dễ dàng hơn. Nếu bạn đang có ý định phát triển thư viện hoặc framework trên JavaScript, hiểu biết về ECMAScript là rất cần thiết để cân nhắc những cú pháp mới cho thư viện của mình, ví dụ: Koa framework, Redux Saga tận dụng generator; GraphQL, styled-components tận dụng tagged template string…

Nếu quan tâm đến các cú pháp và tính năng mới đang trong giai đoạn hoàn thiện, bạn có thể tham khảo danh sách các đặc tả đề nghị và danh sách các đặc tả đã sẵn sàng của TC39 tại Github. Nếu bạn muốn tham khảo cách dùng một cú pháp cụ thể, nơi tham khảo tin cậy nhất chính là tài liệu MDN của Mozilla. Để biết có những đặc tả mới nào trong một phiên bản cụ thể, VD: ES2016, ES2017… bạn có thể google những bài blog tổng hợp.

Cuối cùng, nếu bạn có thắc mắc hay muốn trao đổi thêm, bạn có thể để lại comment bên dưới bài viết này.

• Bạn đã cài các phần mềm cần thiết để chạy app: NodeJS, MongoDB, Nginx, Git.
• App deploy bằng source từ Git host, và clone về tại /apps/my-node-app
• App đã được build và chạy tại port 3000 của server

Hạn chế quyền truy cập của app

Đây là bước không bắt buộc, tuy nhiên tôi khuyến cáo không nên bỏ qua, nhất là bạn đang truy cập vào VPS bằng tài khoản root. Chúng ta sẽ tạo một Linux user mới và gán cho thư mục của app.

# Tạo một Linux user mới, nên dùng tên của app và không để khoảng trắng
sudo useradd my-node-app
# Chuyển quyền sở hữu (owner) thư mục app và các thư mục con cho user mới
sudo chown -R my-node-app /apps/my-node-app

Trong bước tiếp theo, khi chạy app như dịch vụ, app sẽ được chạy với quyền của user mới này để hạn chế quyền truy cập của app lên các thư mục hệ thống.

Chạy app như dịch vụ

Tiếp theo chúng ta sẽ cài đặt để chạy app như dịch vụ và tự động chạy lại khi server được restart. Có một số tutorial hướng dẫn chạy app với pm2, nhưng hôm nay tôi sẽ hướng dẫn dùng công cụ quản lý ứng dụng dịch vụ systemd trên Ubuntu 16 và các HĐH Linux mới.

Đầu tiên, chúng ta sẽ chạy một số lệnh để lấy thông tin cho config systemd:

# Lấy đường dẫn tuyệt đối đến node VM
which node
# -> /usr/bin/node

# Lấy đường dẫn tuyệt đối đến thư mục của app
pwd
# -> /apps/my-node-app

# Lấy thông tin user hiện tại (bỏ qua nếu chúng ta đã tạo user ở trên)
id
# -> uid=0(root) gid=0(root) groups=0(root)

Tiếp theo, tạo file service config cho systemd:

sudo nano /etc/systemd/system/my-node-app.service

• nano là editor trên terminal dễ dùng nhất. Bạn có thể thay nano bằng vim nếu nó là editor quen thuộc với bạn hơn.
• Tên file my-node-app.service là do bạn đặt nhưng cần giữ nguyên đuôi .service

Paste vào editor nội dung sau:

[Unit]
Description=Thay bằng nội dung mô tả app của bạn
Requires=mongod.service
After=mongod.service

[Service]
ExecStart=/usr/bin/node /apps/my-node-app/keystone.js
WorkingDirectory=/apps/my-node-app
Restart=always
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=my-node-app
User=my-node-app
Group=my-node-app
Environment=PORT=3000
Environment=MONGO_URL=mongodb://localhost:27017/my-node-app

[Install]
WantedBy=multi-user.target

Một vài điều lưu ý khi chỉnh sửa file .service trên:

• Hai thuộc tính Requires và After để cho systemd biết chỉ kích hoạt dịch vụ này khi service chỉ định tại Requires và After đã được chạy (Trong trường hợp server phải restart và có rất nhiều service cần chạy lúc khởi động). Trong ví dụ này, mongod.service là tên service của MongoDB khi được cài như hướng dẫn trong phần một.
• ExecStart là nơi thực thi lệnh cho dịch vụ, và yêu cầu đường dẫn phải tuyệt đối.
• WorkingDirectory là thư mục ngữ cảnh khi lệnh được thực thi.
• SyslogIdentifier là tên định danh của dịch vụ trong logger hệ thống, chúng ta sẽ dùng nó để lọc các output hoặc báo lỗi của app như trong phần tiếp theo.
• User và Group là tên của Linux user mà chúng ta muốn app sử dụng khi chạy. Như đã nói ở trên, bạn có thể dùng user mới tạo là my-node-app hoặc tên của user trả về ở dòng lệnh id.
• Environment là nơi để bạn gán các biến môi trường lúc thực thi app. Với Keystonejs thì có thể bạn không cần sử dụng thuộc tính này vì nó sử dụng .env (dotenv).
• Những thuộc tính còn lại nên để giá trị như ví dụ.

Sau khi bạn đã tạo xong file .service, bạn có thể thử chạy app ngay thông qua lệnh sau:

# Bắt đầu chạy app như dịch vụ (không cần đường dẫn đến file .service)
sudo systemctl start my-node-app.service

# Kiểm tra trạng thái app đang chạy hay không
sudo systemctl status my-node-app.service
# -> Nếu app chạy thành công, output sẽ có dòng: ...Active: active (running)...

Cuối cùng, sau khi app đã được chạy thành công và bạn có thể vào qua port 3000, bật chức năng dịch vụ tự khởi động khi server được restart:

sudo systemctl enable my-node-app.service
# -> Created symlink from ... to ...

Proxy app ra cổng 80 bằng NGINX

Nginx sẽ đóng vai trò reversed proxy và static file server. Nó sẽ tiếp nhận request từ ngoài Internet thông qua port mặc định 80 (http) và 443 (https) và forward request qua port của app là 3000.

Đối với Ubuntu[^1], 2 file config chính của Nginx nằm ở: /etc/nginx/nginx.conf (config toàn server) và /etc/nginx/sites-available/default (config cho từng web host ảo[^2]).

Bước này yêu cầu bạn đã cấu hình DNS của domain trỏ đến địa chỉ IP tĩnh của VPS (VD: mynodeapp.com). Sau đó bạn vào chỉnh sửa file /etc/nginx/sites-available/default, thay toàn bộ nội dung mặc định bằng mẫu bên dưới.

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    # File mặc định khi vào thư mục
    index index.html index.htm;

    # Điều chỉnh kích thước gói upload tối đa
    client_max_body_size 25M;

    # Domain name của web app, có thể một hoặc nhiều domain cùng trỏ đến
    server_name mynodeapp.com www.mynodeapp.com;

    # Forward toàn bộ request sang web app
    location / {
        # Thay đổi port nếu node-web-app chạy trên port khác 3000
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Nếu muốn dùng cùng config cho nhiều web host ảo, bạn có thể chuyển một số directive ở trên như index, client_max_body_size vào trong config toàn server tại /etc/nginx/nginx.conf.

Sau khi chỉnh sửa xong Nginx config như trên. Bạn có thể thử kiểm tra config mới có hợp lệ hay không bằng lệnh:

sudo nginx -t
# -> nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# -> nginx: configuration file /etc/nginx/nginx.conf test is successful

Nếu config mới OK, bạn khởi động lại Nginx bằng lệnh sau:

sudo systemctl restart nginx

Sau khi Nginx được restart, bạn vào thử website tại domain đã cài đặt ở trên với URL không thêm port (http://my-node-app.com). Nếu website hiện ra thì bạn đã cài đặt thành công. Nếu bạn thấy lỗi “Bad Gateway”, tức là cấu hình Nginx vừa rồi chưa thành công và cần phải rà soát lại.

Serve file tĩnh bằng NGINX

Một trong những lý do tôi hướng dẫn bạn sử dụng Nginx, ngoài việc để bật https, còn là để serve file tĩnh (static file) hiệu quả hơn. Nếu như các file tĩnh của web app được thiết kế sử dụng CDN thì bạn có thể không cần bước này.

Nginx serve file tĩnh cực nhanh với lượng kết nối đồng thời cao (concurrency). Việc bật header cache-ontrol với Nginx rất dễ dàng sẽ giúp tăng hiệu quả tải trang. Ngoài ra bạn còn có thể bật gzip khi serve file tĩnh, là một yêu cầu không thể thiếu khi tối ưu hóa việc tải trang từ phía server.

Để serve file tĩnh, chúng ta sẽ thêm bộ lọc location vào block server của host config ở trên. Đối với KeystoneJS, chúng ta có một thư mục file tĩnh mặc định đó là public và với ví dụ từ đầu đến giờ, đường dẫn đến thư mục này sẽ là /apps/my-node-app/public. Ngoài ra, nếu bạn có một thư mục để upload riêng và nằm ngoài thư mục public này, thì bạn cũng cần ghi lại đường dẫn để config như tiếp theo sau đây:

# thêm directive location trong config /etc/nginx/sites-available/default
server {
    # ...Các config khác đã ẩn...

    # Hướng dẫn cho Nginx serve tĩnh các file và folder bên trong public,
    # có tên bắt đầu bằng một trong những pattern như bên dưới
    location ~ ^/(fonts/|images/|javascript/|js/|script/|css/|stylesheets/|flash/|media/|static/|upload/|robots.txt|humans.txt|favicon.ico) {
        # đường dẫn tuyệt đối đến thư mục file tĩnh
        root /apps/my-node-app/public;
        access_log off;
        # bật cache-control lên với thời gian expire tối đa
        expires max;
	}

	# Nếu bạn có thư mục upload bên ngoài, bạn cần thêm một directive `location` đến thư mục này
	# Xem document của Nginx để biết thêm cách cấu hình location

    # Đặt directive location / (app reversed proxy) ở dưới cùng
    location / {
        # ...
    }
}

Một vài vấn đề có thể gặp với việc serve file tĩnh bằng Nginx:

• Nếu bạn bị lỗi 403 Forbidden: khả năng là Nginx chưa có quyền truy cập thư mục của app. Bạn cần thêm quyền truy cập cho thư mục public bằng lệnh sudo chmod o+rx -R public.

Để bật gzip, bạn có thể vào file /etc/nginx/nginx.conf, và bỏ comment (dấu #) ở những dòng config gzip như bên dưới:

http {
    # ...Các config khác đã ẩn...

    ##
    # Gzip Settings
    ##

    gzip on;
    gzip_disable "msie6";

    gzip_vary on;
    gzip_proxied any;
    # gzip_comp_level 6;
    # gzip_buffers 16 8k;
    # gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
}

Trong danh sách các loại file tĩnh được nén với gzip ở trên (gzip_types), tôi đã thêm SVG. Bạn có thể thêm các loại file khác nếu danh sách chưa có, nhưng không nên thêm các file ảnh bởi chúng đã được nén bằng thuật toán riêng và sẽ không hiệu quả khi nén tiếp với gzip.

Lấy chữ ký số từ Let’s Encrypt và cài đặt cho NGINX

Để một trang web được mã hóa an toàn thông qua giao thức HTTPS, bạn cần một chứng thư số (certificate) TLS/SSL để chứng thực cho những domain mà bạn sử dụng. TLS/SSL certificate phải được ký bởi một CA (Certificate Authority) hợp lệ, và trước đây chúng ta phải trả một khoản phí để đăng ký với CA. Tuy nhiên, từ bây giờ chúng ta đã có thêm Let’s Encrypt là một CA cung cấp TLS/SSL certificate hoàn toàn miễn phí.

Có nhiều cách để cài đặt certificate Let’s Encrypt nhưng đơn giản nhất trên Linux kết hợp với Nginx là sử dụng công cụ dòng lệnh Certbot. Ở đây tôi sẽ tóm tắt các bước cần thực hiện:

# Chạy các lệnh sau để cài đặt lệnh certbot kèm plugin Nginx trên Ubuntu
sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx

Sau khi certbot được cài, bạn có thể chạy lệnh sau để bắt đầu tiến trình cài đặt certificate cho website với Nginx plugin:

sudo certbot --nginx

Sau khi gọi lệnh trên, bạn sẽ nhập thông tin theo yêu cầu:

• Đầu tiên, certbot sẽ đọc Nginx config và liệt kê các tên miền hiện có. Bạn sẽ nhập vào con số gắn với tên miền (1, 2…) hoặc Enter bỏ trống để chọn tất cả.
• Certbot cũng sẽ hỏi bạn có muốn thêm Nginx config để tự động redirect từ HTTP sang HTTPS không[^3]. Tùy vào yêu cầu dự án, nhưng khả năng cao là bạn nên chọn “2: Redirect”.
• Certbot cũng sẽ hỏi một số thông tin về email liên lạc và một số thỏa thuận khác.

Certbot sẽ tự động xác nhận quyền sở hữu domain thông qua Nginx server và domain của bạn đã được trỏ về IP của VPS trước đó. Certbot cũng sẽ tự động lưu certificate xuống VPS, cấu hình lại Nginx config và khởi động lại Nginx giùm bạn. Ngay sau khi kết thúc cài đặt với certbot, bạn đã có thể thử vào website với scheme https://.

Certificate mà Let’s Encrypt cấp cho bạn chỉ có thời hạn 3 tháng. Trước đây, khi gần đến thời hạn 3 tháng, bạn phải gọi lại sudo certbot renew để xin cấp lại certificate mới và phải khởi động lại Nginx. Giờ đây với Nginx plugin thì certbot sẽ tự động renew cho bạn và bạn không cần phải làm gì nữa cả sau khi hoàn tất bước này.

Thêm: Xem log và thông báo lỗi của app

Ngoài lệnh systemctl status để biết trạng thái chạy của app, với các chương trình chạy bằng systemd, bạn có thể xem log (cả console log và thông báo lỗi) của chúng bằng lệnh journalctl.

Sau đây là một số lệnh tôi thường dùng để xem lại console log của app trong lúc đang chạy:

# Xem lại tất cả các log output của app
# Bạn còn nhớ `SyslogIdentifier` ở trên?
# Đặt chuỗi đó sau tham số -u để chỉ hiển thị log cho my-node-app
sudo journalctl -u my-node-app
# Nếu log quá nhiều, bạn có thể nhảy dòng bằng các phím tắt của vim

# Hiển thị 100 dòng log gần nhất
sudo journalctl -n 100 -u my-node-app

# Hiển thị log của app trong khoảng thời gian chỉ định
sudo journalctl -u my-node-app --since "2018-09-20" --until "2018-09-26 03:00"

# Hiển thị log gần đây nhất của app, sau đó tiếp tục chờ để
# hiển thị các log tiếp theo khi app đang chạy
# `-f` là tiếp tục chờ,
# `-o cat` là hiển thị log không có timestamp và id phía trước
sudo journalctl -f -o cat -u my-node-app

Lời kết

Vậy là chúng ta đã hoàn tất cài đặt một Node Web app lên Ubuntu VPS với cách thức tối ưu nhất và tiết kiệm tài nguyên nhất. Với cấu hình này, bạn có thể chạy nhiều web app trên cùng VPS, bằng cách chạy app thứ hai trên một port mới (VD: 3001) và thêm một web host ảo trong Nginx config như ở trên, với server_name là tên domain cho web app thứ hai…

Tuy nhiên đây là cách cài đặt gắn chặt với môi trường của HĐH Ubuntu. Nói như vậy để phân biệt với một số cách cài đặt sản phẩm phần mềm được cho là hiện đại hơn, sử dụng container, mà phổ biến nhất là Docker. Theo tôi việc deploy sản phẩm bằng container sẽ giúp quy trình CI[^4] được thực hiện dễ dàng hơn, không còn phụ thuộc vào Linux distro, và developer có thể giao việc deploy hoàn toàn cho devops mà không phải bận tâm. Tuy nhiên nó đòi hỏi developer phải có thêm kiến thức khá sâu về devops cũng như cách sử dụng docker ở vai trò người tạo.

Docker vẫn là một thứ khá mới mẻ đối với tôi và tôi vẫn đang nghiên cứu cách thức triển khai sản phẩm Node app trên Docker. Nếu nó thật sự hiệu quả và dễ tiếp cận, tôi sẽ viết tiếp chủ đề này với container.

[^1]: Đối với CentOS hay distro khác, đường dẫn đến config của Nginx sẽ khác.

[^2]: Tùy cách quản lý, bạn có thể tạo nhiều file conf khác nhau trong /etc/nginx/sites-available, mỗi file dùng để config một web host ảo khác nhau. Nếu bạn tạo thêm file khác, bạn phải tạo một symlink từ /etc/nginx/sites-available sang thư mục /etc/nginx/sites-enabled/ thì config cho site mới mới có hiệu lực. Dù vậy, thói quen riêng của tôi là để các block server vào cùng file default để dễ quản lý và theo dõi hơn vì số lượng web host trên một VPS không quá nhiều.

[^3]: Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.

[^4]: Continuous integration - test, build, deploy tự động và liên tục

In this post, I’m detailing my touchpad setup that I feel best so far and that it is as close to MacOS experience as I can get.

Although libinput is the default driver on latest Linux distros, we’ll switch to mtrack[^1] driver which supports many more of multi-touch gestures with flexible configurations, especially the three finger drag, which is also the main reason for my move. Thanks to this blog post, I got a much faster head start, but there were still a lot of other things I did to get to my current setup.

Before we begin, please be noted that mtrack currently and will only support Xorg environment, which I am fine since I don’t find Wayland is any better in terms of performance and resource usage on current Ubuntu 18.04. I’m staying with Xorg for now (which is default session of Ubuntu 18.04 by the way).

Compile and install mtrack driver

Compile a Linux package by yourself might be a little scary for newbies so you just follow these steps carefully, then get to know the ins and outs later:

First, open terminal and install the necessary tools and dependencies for the compilation of the driver:

# Update Ubuntu to latest packages
sudo apt update && sudo apt upgrade

# These dependencies were noted by me on default Ubuntu 18.04
sudo apt install build-essential git pkg-config libmtdev-dev mtdev-tools xserver-xorg-dev xutils-dev

Then we’ll clone source code and compile the mtrack driver from its currently active repo:

# execute line by line:
cd /tmp
git clone https://github.com/p2rkw/xf86-input-mtrack.git
cd xf86-input-mtrack
./configure --with-xorg-module-dir=/usr/lib/xorg/modules
sudo make

You are most li kely not be able to compile the package at the sudo make command. Look carefully at the error messages which will tell the missing dependencies for it. If you are stuck, post a comment here and I’ll see if I can help.

Finally, install the driver into system:

sudo make install

Configure the new touchpad driver

The new driver won’t be used until there’s a proper config file set up. Create the config file at /usr/share/X11/xorg.conf.d/50-mtrack.conf (root or admin permission needed) and edit it with your favorite text editor. Or use these commands:

sudo touch /usr/share/X11/xorg.conf.d/50-mtrack.conf
sudo gedit /usr/share/X11/xorg.conf.d/50-mtrack.conf

This will open the file with Gedit (Text Editor) with proper permission to save. Then, copy and paste my current mtrack config below:

# Install mtrack driver 0.5.0++
# Save this file to /usr/share/X11/xorg.conf.d/50-mtrack.conf
# This config is specialized for MacBook Air 2012 (5,2)
Section "InputClass"
        MatchIsTouchpad "on"
        Identifier      "Touchpads"
        MatchDevicePath "/dev/input/event*"
        Driver          "mtrack"
        # The faster you move, the more distance pointer will travel, using "polynomial" profile
        Option          "AccelerationProfile" "2"
        # Tweak cursor movement speed with this
        Option          "Sensitivity" "0.05"
        # Pressure at which a finger is detected as a touch
        Option          "FingerHigh" "5"
        # Pressure at which a finger is detected as a release
        Option          "FingerLow" "5"
        # I often use thumb to press down the physical button, so let's not ignore it
        Option          "IgnoreThumb" "false"
        Option          "ThumbRatio" "70"
        Option          "ThumbSize" "25"
        # Ignore palm, with palm takes up to 30% of your touch pad
        Option          "IgnorePalm" "true"
        Option          "PalmSize" "30"
        # Trigger mouse button when tap: 1 finger - left click, 2 finger - right click, 3 - middle click
        Option          "TapButton1" "1"
        Option          "TapButton2" "3"
        Option          "TapButton3" "2"
        Option          "TapButton4" "0"
        Option          "ClickTime" "25"
        # Disable tap-to-drag, we're using three finger drag instead
        Option          "TapDragEnable" "false"
        # While touching the touch pad with # fingers, press the touchpad physical click button
        Option          "ClickFinger1" "1"
        Option          "ClickFinger2" "3"
        Option          "ClickFinger3" "2"
        Option          "ButtonMoveEmulate" "false"
        Option          "ButtonIntegrated" "true"
        # The momentum after scroll fingers released
        Option          "ScrollCoastDuration" "300"
        Option          "ScrollCoastEnableSpeed" ".1"
        # Natural scrolling with two fingers
        Option          "ScrollSmooth" "true"
        Option          "ScrollUpButton" "5"
        Option          "ScrollDownButton" "4"
        Option          "ScrollLeftButton" "7"
        Option          "ScrollRightButton" "6"
        # Tweak scroll sensitivity with ScrollDistance, don't touch ScrollSensitivity
        Option          "ScrollDistance" "250"
        Option          "ScrollClickTime" "10"
        # Three finger drag
        Option          "SwipeDistance" "1"
        Option          "SwipeLeftButton" "1"
        Option          "SwipeRightButton" "1"
        Option          "SwipeUpButton" "1"
        Option          "SwipeDownButton" "1"
        Option          "SwipeClickTime" "0"
        Option          "SwipeSensitivity" "1500"
        # Four finger swipe, 8 & 9 are for browsers navigating back and forth respectively
        Option          "Swipe4LeftButton" "9"
        Option          "Swipe4RightButton" "8"
        # Mouse button >= 10 are not used by Xorg, so we'll map them with xbindkeys and xdotool later
        Option          "Swipe4UpButton" "11"
        Option          "Swipe4DownButton" "10"
        # Mouse buttons triggered by 2-finger pinching gesture
        Option          "ScaleDistance" "300"
        Option          "ScaleUpButton" "12"
        Option          "ScaleDownButton" "13"
        # Mouse buttons trigger by 2-finger rotating gesture, disabled to enhance the pinch gesture
        Option          "RotateLeftButton" "0"
        Option          "RotateRightButton" "0"
EndSection

Few things to note from above config file:

• This config file is tested on Macbook Air 2012 (5,2)
• You’ll most likely need to tweak the cursor sensitivity. Do so at Option "Sensitivity" "0.10", replacing value 0.10 to any other values between 0 and 1. The larger, the more movement.
• You can tweak 2 finger scrolling sensitivity at ScrollDistance.
• These scroll and swipe are natural, so you may swap the button number if you want the reverse.
• Click on tap is enabled. If you don’t want that, set those TapButton# value to “0”
• My config doesn’t ignore thumb. I often press the physical touchpad button with thumb. If you want to ignore thumb, set IgnoreThumb to “true”.

If you want further tweaks, head to the driver’s Github README and read the configuration instructions.

Updated 2019-08-19: I have added AccelerationProfile and tweak Sensitivity and SwipeSensitivity to make the experience with touchpad even more closer to that on macOS.

Updated 2018-09-18: There’s another key point in my notes that I forgot to include: During my first setup with mtrack, the driver didn’t work until I add my current Linux user to the input group. Do so with following command:

sudo adduser "`whoami`" input

After that, log out and log in to your desktop. You’ll know the driver is being used if you can drag or make selection immediately with three fingers on the touchpad.

Disable touchpad while typing with dispad

After using mtrack for a while, I notice one of the annoying things is that touchpad is not disabled while typing which make the caret jump if you accidentally tap on it (and because I enabled tap to click). If you have troubles with this, install the dispad daemon from the original author of mtrack:

# install addition dev dependencies for dispad
sudo apt install libconfuse-dev libxi-dev
# get code
cd /tmp
git clone https://github.com/BlueDragonX/dispad.git
cd dispad
# compile the daemon
./configure
make
sudo make install

Go ahead and start dispad by execute this command in terminal. A config file ~/.dispad[^2] is created for you with default options. You can keep those, or change some options to mine like below:

poll = 48
delay = 500

Lastly, we need to start dispad automatically every time we log in, so go to Activities, search and open Startup Applications. Add new entry, with name as “dispad”, command as /usr/local/bin/dispad and with an optional comment to remind you what it does.

Add more gestures with xbindkeys & xdotool

With above mtrack config, I already have these gestures (if it’s not obvious for you):

• Left mouse click with one finger tap; right mouse with two fingers tap; middle mouse with three fingers tap
• Scroll with two fingers (both horizontal & vertical)
• Drag with three fingers
• Swipe left and right with 4 fingers will simulate mouse button number 9 & 8. This means I can navigate back and forth in browsers and many applications.

mtrack can simulate mouse button up to 15 with different gestures. However, Ubuntu only uses mouse buttons up to 9. To make use of other gestures, we need 2 additional tools: xbindkeys and xdotool.[^3]

Luckily, there’s no need for manual compilation this time. Just open terminal and install via command:

sudo apt install xbindkeys xdotool

So what are xbindkeys & xdotool?

xbindkeys is a daemon listening to your inputs from any input devices including keyboard, mouse and touchpad. You’ll define a rule at which, if an input or combination of inputs matches, some command can be executed. That’s where xdotool come in. xdotool is the command line tool which is able to simulate other key inputs. So by combining xbindkeys and xdotool, we’ll be able to map high mouse buttons (> 9) to certain shortcuts that suit our needs.

To define the rules, you’ll need to open xbindkeys-config GUI app, from which you’ll define the keys listened and the actions (command). I won’t give the how-to here (which you can look it up here), but will provide my current xbindkeys config which you can copy and save it at ~/.xbindkeysrc:

# Next Workspace
"xdotool key super+Page_Down"
   b:11

# Move Next Workspace
"xdotool key --clearmodifiers super+shift+Page_Down"
   Control + b:11 + release

# Previous Workspace
"xdotool key super+Page_Up"
   b:10

# Move Previous Workspace
"xdotool key --clearmodifiers super+shift+Page_Up"
   Control + b:10 + release

# Zoom in
"xdotool key ctrl+21"
   b:12

# Zoom out
"xdotool key ctrl+20"
   b:13

What are these rules doing then?

Combined with my mtrack config above, and with assumption that default shortcuts in Ubuntu is unchanged, these xbindkeys will allow you:

• 4 finger swipe up: switch to next workspace
• 4 finger swipe down: switch to previous workspace
• While holding ctrl, 4 finger swipe up: Move active window to next workspace
• While holding ctrl, 4 finger swipe down: Move active window to previous workspace
• Pinch scaling down (move 2 fingers closer): trigger ctrl and - combination, which is zoom out in browsers and reduce font size in some apps
• Pinch scaling up (move 2 fingers away): trigger ctrl and = combination, which is zoom in in browsers and enlarge font size in some apps

I haven’t found a use case for rotating gesture (button 14 & 15) so I currently disabled them.

Finally, don’t forget to add this command /usr/bin/xbindkeys_autostart to Startup Applications so that it is automatically started at reboot.

Bonus: pixel perfect scrolling on Firefox

Updated 2018-08-19: FWIW, GTK3+ has started support for pixel perfect scrolling (no jumping, pixel by pixel scrolling) for many of its applications. That has greatly enhanced UX for laptop users or users with trackpad. However, Firefox, the default browser on many Linux distros, still uses the jumping scroll (or fake smooth with easing movement). I have searched a lot for how Firefox will support pixel perfect scrolling, like it does on macOS, but only found answers to current fake smooth option.

Thankfully, I’ve got a hint from a Redditor replying on my post on Reddit. The reply points to this post which I’ll quote here:

I know this works for Firefox 55 or newer, but don’t know the earliest version which supports it. I assume it will be enabled by default at some point, but it isn’t yet in Firefox 58 (the current nightly).

1. Run this command: echo export MOZ_USE_XINPUT2=1 | sudo tee /etc/profile.d/use-xinput2.sh
2. Log out and back in.
3. Firefox should now use xinput 2.
4. (optional) Open Firefox and go to about:preferences -> Advanced (or about:preferences -> Browsing for Firefox Nightly), and uncheck “Use smooth scrolling”. This disables the old style “smooth scrolling”, which just causes an annoying delay when using xinput2 style scrolling imo.

So by following above steps, pixel pefect scrolling is turned on for latest Firefox 62 and it’s working great.

Final words

That’s my whole setup for multi-touch touchpad and it has made my life on Linux a lot easier! However, I discovered some issues with mtrack driver after a lot of use, but they are trivial and won’t dismiss the whole experience:

• Scroll coast are sometimes sticky and make scroll move quickly in subsequence scroll gestures
• Dispad sometimes doesn’t detect typing and lets the caret jump

Finally, this may just be temporary since libinput and Wayland are already chosen to be the future and they are actively developed. I will revisit libinput once it get better multi-touch support and more configurations, but mtrack is the way to go, for now.

[^1]: Here’s a brief touchpad driver 101: There are three known drivers for laptop touchpad on Linux, i.e. synaptics (discontinued), libinput and mtrack. For latest Ubuntu and other popular distros, libinput is the chosen driver because it has decent multi touch support (and being improved) and most importantly, it supports Wayland environment. There are few flaws with current libinput driver though, for example: I cannot adjust the sensitive of scroll with two fingers, I cannot disable tap-and-drag easily (some manual commands involved), I cannot drag with three fingers…

[^2]: The ~/ sign means this file is stored at current user’s home folder.

[^3]: These tools also require Xorg.

Fast forward to 2018. Apple is not itself anymore, at least in the interest of MacBook. Bad reviews and incidents of the MacBook line just happened one after another. Here are just a few:

• Apple’s slow on updating its laptops hardware
• The shallow and dirt-prone butterfly keyboards on the new MacBook and MacBook Pro
• The unwanted touch bar
• The core i9 chip MacBook throttling
• And for MacBook Air, its chips are now outdated (as of 08/2018) and worse its peripheral design hasn’t change since… forever.

With all of that, I seriously consider moving away from Apple walled garden and embrace Linux where I can freely choose hardware from other vendors.

However, my aged MacBook Air is still working great. So my strategy for now is to dual boot a Linux distro along with macOS on this machine, first to get familiar with modern Linux desktop experience, and secondly, to explore the tools and software that can replace my current ones on macOS.

My chosen distro is Ubuntu, because I am very much used to it, and it’s stable, especially on exotic hardware like MacBook Air. Besides, being the most popular Linux distro, it will be easier for me to find answers to issues if I come across.

At first I installed the default Ubuntu 18.04 with GNOME Shell and felt really irritated. After that I tried 2 other desktop environments: Pantheon (of Elementary OS) over Ubuntu 18.04 and MATE (full install of Ubuntu MATE 18.04). I kept a note name “Linux Grudges” to list down what I personally dislike and like about each desktop environments (desktop UI experience only, other functionalities are almost the same), so here they are:

GNOME Desktop & GNOME Shell (Standard Ubuntu):

Default Ubuntu 18.04 with Nautilus

I tried GNOME 3 desktop with GNOME shell for the first time after long time with the old Unity DE and macOS. I have a lot of irritation with it and God forbid, GNOME shell, on the contrary to its claim, often steps in my way to get things done!

Like:

• Activities overview and Show applications screen
• Type to search anything (similar to macOS Spotlight)
• Dash to dock by default (this make GNOME Shell on Ubuntu suck less)
• Support legacy application indicators by default (this is another Ubuntu fix for GNOME Shell)
• Most GNOME apps support pixel perfect scrolling with touch pad

Dislike:

• A huge waste of space on the top panel and hide everything in the system tray and app menu dropdowns
• If I want to do anything, other than with current windows, I have to visit that Activities overview, like: launch another app, search for files, search for apps, switch workspace… which became annoying and distracting to current task
• It’s 2018 and people are moving away from hamburger menus and dropdowns. But for GNOME Apps, they hide everything in that menu
• Some of my favorite apps like Firefox, Sublime Text are still using fake smooth scrolling. (Not GNOME per se, but it just add up some irritation.)
• Crashy and sometimes CPU-hog GNOME Shell. I have to run: gnome-shell --replace once in a while.

If you’d like some more rants on the problematic GNOME 3, check out this post.

Pantheon Desktop on Ubuntu 18.04:

Elementary OS with Slingshot application menu

I was curious about Elementary OS which has minimalist and similar UI to macOS, so I tried out its Pantheon DE on default Ubuntu 18.04.

Like:

• Simple but clean and aesthetic UI, resemble macOS
• It’s default Terminal app can use Ctrl-C & Ctrl-V for copy & paste
• Files explorer with column view similar to macOS Finder
• Nice and clean app store

Dislike:

• Terminal lack of customization (other shortcuts, color theme…)
• No global menu, so most of the top panel space is also wasted
• Old system tray icons won’t show at top bar (iBus, Fcitx, Electron apps…). This is show-stopper for me.
• Log out crash the session (may be due to Pantheon desktop on top Ubuntu, not real Elementary OS)
• Currently, its configuration ability is limited.

Ubuntu MATE:

Ubuntu MATE Desktop with Mutiny layout

I tried Ubuntu MATE (with Unity-like layout) solely because I wanted the global menu which, for me, is the best solution of app menu. (Easier to target since it’s sticked to top edge; space of top panel is well used; and leave more working area for app window…). I did enjoy Ubuntu MATE and invested some tweaking with it. But after a while, I felt that the MATE experience is not very polished and feel dated.

Like:

• Low resource footprint
• Global menu
• HUD (menu items search like macOS)
• App Launcher (like macOS)
• Dock (again, like macOS)

Dislike:

• App switcher popup is too small and not having a thumbnail preview
• MATE doesn’t have something similar to Activities overview
• Panel icons occasionally hang, and have to restart with: mate-panel --replace &
• Lack of theme dedicated for MATE desktop, and the default MATE themes, IMO, lack some taste
• Lack of animation (this should be fine if I’m on very old hardware)
• No built-in color profile manager (this is important, without custom color profile, MacBook Air screen color look very off)

Ubuntu Budgie:

I learned about Ubuntu Budgie after I already chose my distro and DE. I did not tried it but viewed its screen cast walk-through. My immediate impression is that it’s just like another Elementary OS and still waste the top panel.

Maximized window on Budgie desktop on a 1920x1080 screen. Imagine it runs a traditional app with title, menu… on a 1366x768 laptop screen, the top bar is wasted and how narrow the space left for actual content.

Settle on GNOME Desktop and GNOME Shell

After actually trying the three different desktops, I decided, though, to settle on GNOME with these reasons:

• GNOME desktop has the most popular community and is actively developed.
• Crashy and resource-hog problems of GNOME Shell often come from lousy extensions. With some experiment and trials, I have spotted the problematic ones and removed them.
• Although it has many UX problems (that even Linus bashed it), it is still very configurable and extensible.
• After finding out Switcher, and Unite GNOME Shell extensions, GNOME desktop experience is now bearable for me.
• With the main Ubuntu distro chose GNOME as default desktop, I’m in hope that better GNOME enhancements will land from Ubuntu developers as they did for Unity.
• GNOME Shell has JavaScript API and its extensions are written with JavaScript; which really excites a JS guy like me that I’ll be able to jump into “hacking” my desktop real soon. I’m going through tutorials during spare time right now.

The journey has just begun

That said, I have been using Ubuntu on this MacBook Air for two months non-stop and have got used to it to the level of efficiency that I had with macOS.

My current Ubuntu desktop with Unite extension which allows me to move window title and buttons up the top panel for maximized windows, making good use of its space.

I did a lot of tweaks and configurations wherever I found it make sense and made the transition from macOS to Linux as quick as possible. For alternative software, I have also found most of the needed applications to avoid switching back to macOS.

If you are interested in installing Ubuntu on a MacBook, stay tuned. In the coming blog posts, I’ll share my experience and things I did to configure my current Ubuntu desktop, including: fixing GNOME shell with some extensions, making good use of the multi-touch touch pad, keyboard shortcuts and key swaps for Mac keyboard, fixing the screen color profile, mounting the APFS Macintosh drive, finding the software alternatives, and a lot more…

Cài đặt

Để cài đặt, bạn có thể tìm cài trong Software của Ubuntu (snap package) hoặc thông qua gói .deb với dòng lệnh:

# Cho Debian/Ubuntu/Raspbian
curl -kL https://github.com/tizonia/tizonia-openmax-il/raw/master/tools/install.sh | bash

Xem thêm cách cài cho các distro khác tại đây.

Sau khi cài đặt, mở terminal và chạy lệnh:

# Xem hướng dẫn chung
tizonia -h

# Xem các phím tắt điều khiểu trong lúc đang chơi:
tizonia -h keyboard

# Xem hướng dẫn cho Youtube...
tizonia -h youtube

Dùng với Youtube

Với Youtube, bạn không cần cài đặt tài khoản gì cả.

Một số dòng lệnh mình thường dùng với YouTube:

# Nghe một video / bài hát cụ thể (qua URL hoặc ID)
tizonia --youtube-audio-stream https://www.youtube.com/watch?v=tCV4dSMeQzE

# Nghe một playlist cụ thể (qua playlist URL hoặc ID)
tizonia --youtube-audio-playlist https://www.youtube.com/playlist?list=PLsIRiRj6jaw7Z6bHs5V99yAvlMUf2icOG

# Nghe mix nhạc tự động dựa trên từ khóa search
tizonia --youtube-audio-mix-search "Lam Trường"

Dùng với Spotify

Để sử dụng Tizonia với Spotify bạn phải đang dùng tài khoản trả phí. Cách tiện nhất là bạn sẽ set sẵn spotify.user và spotify.password trong file ~/.config/tizonia/tizonia.conf[^1] (nếu file này chưa tồn tại, bạn cần chạy lệnh tizonia lần đầu).

Có một lưu ý với người dùng đăng nhập Spotify bằng Facebook như mình, đó là bạn sẽ không có password để đăng nhập với email mà sẽ phải tạo thêm mật khẩu thiết bị (device password) bằng cách vào phần tài khoản tại spotify.com, tìm đến mục Cài đặt mật khẩu thiết bị và làm theo hướng dẫn. Sau đó, trường spotify.user bạn sẽ set là mã số tên người dùng cho thiết bị.

Một số dòng lệnh mình thường dùng với Spotify:

# Nghe một danh sách các bài hát theo từ khóa tìm thấy trong tên bài hát
tizonia --spotify-tracks "Frozen Heart"

# Nghe nhạc từ một ca sĩ đầu tiên theo từ khóa
tizonia --spotify-artist "Ed Sheeran"

# Nghe playlist do bạn tạo
tizonia --spotify-playlist "Programming Music"

# Nghe playlist do user "Spotify" tạo
tizonia --spotify-owner "spotify" --spotify-playlist "Sleep"

Lệnh tắt (bash alias)

Lệnh để nhập cho Tizonia khá dài, nên mình đã tạo một số alias để gõ cho nhanh.

Ví dụ, thay vì gõ “tizonia --spotify-artist”, bạn chỉ cần gõ: tisar sau đó là tham số. Hoặc thay vì gõ “tizonia --youtube-audio-mix-search”, bạn sẽ gõ tiyms.

Để cài các alias này, bạn chỉ cần copy nội dung của gist bên dưới và paste phía cuối file ~/.bashrc và sau đó khởi động lại Terminal.

[^1]: Dành cho newbie: ký tự ~ trong terminal dùng để thay thế cho thư mục HOME của user hiện tại. Đôi khi cũng được viết là $HOME.

<span class="reading-time" title="Estimated read time">
    {% assign words = content | number_of_words %}
    {% if words < 360 %}
        1 min
    {% else %}
        {{ words | divided_by:180 }} mins
    {% endif %}
</span>

This partial is okay except for those posts that has words count between 180 - 360 which will result as 1 min instead of 2, and words count between 360 - 539 will result as 2 min instead of 3…

So I have revised the solution with my own as following:

<span class="reading-time" title="Estimated read time">
    {% assign words = include.content | strip_html | number_of_words %}
    {{ words | divided_by: 180 | plus: 1 }} min read.
</span>

Since Liquid filter divided_by will round down the result if input is integer (0.5 to 0, etc.), adding back 1 will correct this, with the only flaw that any fractions of minute will now be rounded up to one minute.

Besides the new read-time algorithm, I’ve also added the strip_html filter to the partial and use include parameter so that it’ll work correctly with consistent min read value regardless of the context it is used. For example, if it is placed in post layout, we will add the partial like so:

<p class="meta">
    <span>Posted by {{ page.author }} on {{ page.date }}.</span>
    {% include read-time.html content=content %}
</p>

If it is used in blog index, such as index.html, it’ll be added like this:

{% for post in paginator.posts %}
<div class="post-preview">
    <a href="{{ post.url | prepend: site.baseurl }}">
        <h2 class="post-title">{{ post.title }}</h2>
    </a>
    <p class="post-meta">
        <span>Posted by {{ post.author }} on {{ post.date }}.</span>
        {% include read-time.html content=post.content %}
    </p>
</div>
<hr>
{% endfor %}

My blog has been updated with read-time partial with the adjustment that I’m using 265 WPM as per Medium recommendation[^1].

So, that’s it. Any comments are welcomed.

[^1]: It was 275, but it seems they recently updated.

So after several minutes crafting this mojave.xml and actually testing and tweaking it on Ubuntu for two days, I posted the XML on Github Gist and tweeted about it. It was amid my busy days, so I didn’t write a proper blog post. Fortunately, the guys at OMG! Ubuntu! was interested and wrote a detailed article about it and got many positive comments.

This post is not intended to repeat the instructions that were well written at the OMG! Ubuntu! article. But as a place for further update announcements and discussion since GitHub Gist sucks at notify commenters and owners (if not at all) about gist updates.

So from now on, please leave any comments at the bottom of this article (and not on the gist anymore).

From the commenters and my own tests, these are support status of different DE for slideshow XML:

• GNOME & Unity: Use gnome-tweak to select the XML file from any folder
• MATE: Just use the built-in Wallpaper selector from Control panel, make sure all files filter is selected at the file chooser.
• Cinnamon: From terminal, run gsettings set org.gnome.desktop.background picture-uri "file:/home/USERNAME/Pictures/wallpapers/mojave-background/mojave.xml"
• Xfce: It reportedly supports background XML, but I have not yet tested to confirm.
• Budgie: Sorry, no support. :(
• KDE: ???
• Pantheon (Elementary): ???

Here I’m embedding the XML again with short instructions for your convenience:

Progressive Web App (PWA) là một dạng ứng dụng web (web app) mới đang thu hút rất nhiều sự quan tâm từ các nhà phát triển web khắp thế giới đặc biệt là các doanh nghiệp hoạt động trực tuyến, tuy nhiên nó vẫn còn khá mới mẻ tại Việt Nam.

Đã có nhiều bài viết liên quan đến PWA dành cho lập trình viên, cho nên trong bài viết này tôi sẽ cố gắng giải thích PWA để người dùng Web phổ thông vẫn có thể hiểu.

Progressive Web App là gì?

PWA là ứng dụng web được viết để tận dụng những tính năng mới nhất của trình duyệt Web trên máy tính để bàn (desktop) lẫn điện thoại thông minh, nhưng đồng thời vẫn chạy được trên những trình duyệt và thiết bị cũ hơn. PWA lấy phương pháp Cải Tiến Tăng Dần (Progressive Enhancement) làm cốt lõi (nên mới có chữ Progressive).

Đối với những trình duyệt và thiết bị cũ, PWA hoạt động như một mobile website thông thường. Nhưng với những trình duyệt trên thiết bị di động mới nhất, PWA hoạt động như một mobile app[^1] thực thụ.

Những tác giả của khái niệm PWA (đến từ nhóm phát triển trình duyệt Chrome) đã đưa ra những đặc tính cần có của một PWA như sau:

• Progressive - Chạy được trên mọi (nên hiểu: tuyệt đại đa số) thiết bị, do được phát triển với phương pháp Cải Tiến Tăng Dần.
• Responsive - Có thiết kế giao diện tùy ứng (responsive design), hiển thị và sử dụng được trên mobile, tablet, laptop hay bất kỳ cỡ màn hình nào trong tương lai.
• Connectivity independent - PWA vẫn có thể hoạt động tốt với điều kiện kết nối mạng chập chờn hoặc mất hẳn (offline).
• App-like - Có giao diện và trải nghiệm như mobile app thực thụ.
• Fresh - Dù nó hoạt động như mobile app, nhưng tính năng và giao diện luôn được cập nhật tức thời nhờ nền tảng Web (không cần người dùng update từ Apple App Store hay Google Play - gọi chung là app store).
• Safe - PWA phải được tải thông qua giao thức TLS (hay nôm na là HTTPS), để đảm bảo việc trao đổi dữ liệu không bị bên thứ ba can thiệp.
• Discoverable - Thông qua file khai báo chuẩn (được thống nhất bởi tổ chức W3C), mà các PWA dễ dàng được các cỗ máy tìm kiếm đánh dấu và thông báo cho người dùng.
• Re-engageable - PWA cho phép việc tái tiếp cận người dùng dễ dàng hơn nhờ những tính năng đặc biệt như là push notification (thông báo chủ động).
• Installable - PWA cho phép người dùng dễ dàng lưu lại web app trên điện thoại (thường là trên màn hình home screen) mà không cần phải vào app store
• Linkable - Dễ dàng share app chỉ với đường link và không cần người nhận phải cài đặt phức tạp chỉ để xem được nội dung bạn muốn share.

Những điểm khác biệt của Progressive Web App?

Trước tiên cần hiểu rằng, sự tiến hóa của mobile web app cần sự hợp tác của rất nhiều bên liên quan trong đó có các nhà phát triển trình duyệt, hệ điều hành di động, và cả những chuyên gia về ngôn ngữ lập trình cho Web. Sự tiến hóa của mobile web thường đi cùng với sự phát triển và chuẩn hóa của nền tảng Web do tổ chức W3C[^2] chịu trách nhiệm.

Khi tôi tư vấn và phát triển app cho khách hàng, rất nhiều lần doanh nghiệp từ chối lựa chọn giải pháp web app hoặc hybrid app với lý do chính là “HTML5 không nhanh bằng native”. Tuy nhiên điều này không còn đúng tại thời điểm hiện tại.

Nhờ những cải tiến của phần cứng thiết bị, hệ điều hành di động, trình duyệt, và nhất là đặc tả Web trong vài năm gần đây mà web app đã thêm những khả năng không thua kém native app như:

• Giao diện tương tác mượt mà hơn, đặt biệt là hỗ trợ đồ họa 3D, animation từ phần cứng (hardware accelerated)
• Khả năng chơi video, audio thông qua trình duyệt mobile đã hoàn thiện và định dạng gần như đã thống nhất.
• Bàn phím ảo thích ứng với trường nhập web form khác nhau: email, URL, telephone…
• Có khả năng truy xuất các sensor và bộ phận đa phương tiện của thiết bị: định vị GPS, con quay hồi chuyển, trạng thái pin, network, camera, microphone…
• Cơ sở dữ liệu (CSDL) tại trình duyệt cho phép tìm kiếm và truy cập nhanh lượng dữ liệu lớn và cho phép người dùng trở lại trang web app nhanh hơn.
• Đặc tả mới về CSS cho phép designer và front end developer tạo giao diện tùy ứng (responsive design) và giao diện giống app dễ dàng hơn.

Từ trái qua, các web app nổi tiếng đã chứng minh được sự thành công của web app trên mobile: app.ft.com, flipboard.com, m.aliexpress.com

Dù vậy, web app vẫn còn một số hạn chế so với native app. Chúng ta hãy xem PWA đã được bổ sung những khả năng gì để có thể xóa dần khoảng cách giữa web và native:

Shortcut trên home screen và hỗ trợ theme từ trình duyệt

Ngay từ những thế hệ iPhone đầu tiên, iOS Safari đã có chức năng cho phép người dùng lưu shortcut của một website vào home screen (add to home screen) để truy cập nhanh vào lần sau. Và với những website được người dùng mở từ home screen, chúng có thể có giao diện toàn màn hình (không còn thanh địa chỉ và phần giao diện của Safari), đem tới trải nghiệm như mobile app.

Tuy nhiên những khả năng trên vẫn chỉ là sự hỗ trợ đơn lẻ từ nhà phát triển Apple cho những chiếc iPhone của mình. Giờ đây, tổ chức W3C đã thống nhất đặc tả cho web app với file khai báo manifest.json (tên chính thức: Web App Manifest) cho phép lập trình viên có thể tùy chỉnh:

• Màu theme (màu của giao diện trình duyệt và thanh status)
• Màu nền và icon trên splash screen
• Icon và tên app trên home screen
• Khóa hướng xoay màn hình
• Và một số tùy chỉnh kỹ thuật khác…

Ảnh chụp từ một PWA demo do tôi viết để minh họa cho một bài thuyết trình về PWA.

Banner cài đặt web app và tích hợp sâu hơn trong Android

Ngoài chức năng “Add To Home Screen” bằng tay đã được hỗ trợ bởi đa số trình duyệt di động hiện nay, một số trình duyệt mới hiện nay còn có thể chủ động hiện một banner mời gọi user cài web app lên home screen.

Theo Addy Osmani, người dùng sẽ được gợi ý cài web app lên home screen của Android nếu:

• Web app có khai báo manifest.json
• Được tải bằng giao thức HTTPS
• Có sử dụng service worker (xem tiếp mục sau)
• Được ghé thăm ít nhất hai lần, với mỗi lần cách nhau ít nhất 5 phút

Ngoài ra Chrome và Android đang được cải thiện để tích hợp PWA tốt hơn. Kể từ Chrome cho Android phiên bản 57, khi một PWA được lưu lại, icon của nó không chỉ xuất hiện tại home screen mà ở cả trong app drawer (trang danh sách tất cả app) và kết quả tìm kiếm app. Không những thế, Android sẽ hỗ trợ PWA của bạn có riêng một “Intent Filter” để khi có bất kỳ app khác trên Android link đến URL của web app của bạn, PWA sẽ được mở ra thay vì URL mở ở trình duyệt mặc định. Xem thêm tại đây.

Một số cải tiến tích hợp vào Android của PWA trên Chrome 57

Hoạt động offline

Một trong những hạn chế của web app so với native app khiến nó chưa thật sự hữu dụng và được triển khai rộng rãi đó chính là khả năng hoạt động ngay cả khi người dùng offline. Khi người dùng mất kết nối (tắt mobile data, tắt wifi, bật flight mode…) hoặc kết nối Internet chậm, web app sẽ không thể sử dụng được do nó phải lấy dữ liệu từ máy chủ trung tâm, và người dùng sẽ nhanh chóng bỏ cuộc hoặc tìm đến native app.

Nhờ một đặc tả mới của Web với tên gọi là Service Worker, kết hợp với CSDL tại trình duyệt, PWA đã có thể lưu lại dữ liệu bao gồm văn bản, hình ảnh hay bất kỳ định dạng nào cần thiết cho việc hoạt động offline.

Nhận push notification

Một tính năng đáng chú ý nữa của native app mà web app trước đây không thể làm được, đó chính là việc nhận push notification (thông báo chủ động). Push notification là một công cụ khá quan trọng cho các nhà phát hành mobile app, kích thích người dùng quay trở lại hoặc suy trì sự tương tác giữa người dùng và app của mình. Push notification cũng đang nhận được sự chú ý đặc biệt của bộ phận marketing cho những doanh nghiệp có mobile app của mình.

Cũng nhờ Service Worker, là một chương trình nhỏ viết bằng ngôn ngữ Web JavaScript nhưng nó chạy ngầm và độc lập với web app chính, PWA có khả năng nhận push notification như native app. Điều này đồng nghĩa với việc ngay cả khi web app và trình duyệt đã được đóng hẳn, chúng vẫn có thể nhận được notification[^5].

Tự động đồng bộ khi có mạng trở lại

Một khả năng khác của Service Worker, đó là hỗ trợ PWA tự động đồng bộ những yêu cầu từ phía người dùng lên server trung tâm ngay khi thiết bị có mạng trở lại.

Lấy ví dụ: ứng dụng nhắn tin tức thời, người dùng gửi một tin nhắn đi khi điện thoại của họ mất kết nối. Ngay khi điện thoại của họ có Internet trở lại, Service Worker sẽ tiếp tục gửi tin nhắn đi cho người dùng hoặc bất kỳ tác vụ nào cần đến Internet.

Chia sẻ bằng native banner của hệ điều hành

Một tính năng tương đối hữu dụng nữa của PWA đó chính là Web Share. Để dễ hình dung, nếu bạn đang đọc bài viết này trên điện thoại, cách duy nhất để bạn chia sẻ nó là copy URL[^3] của nó và paste vào app bạn muốn share, hoặc bạn sẽ mở menu của trình duyệt ra, và bấm vào nút share. Chức năng Web Share của PWA sẽ giống như cách thứ hai vừa nêu.

Với PWA có sử dụng Web Share, khi bạn bấm vào nút share ngay trong trang web, banner chia sẻ mặc định của HĐH sẽ hiện ra với tất cả các app và thao tác mà bạn có thể thực hiện với một chuỗi URL hoặc chuỗi băn bản. Một sự tiện lợi giúp tăng sự tương tác trên thiết bị di động.

Để tiếp cận Web Share theo cách Progressive, lập trình viên sẽ kiểm tra nếu trình duyệt không hỗ trợ Web Share, nút share sẽ gọi các widget chia sẻ thông thường như trên máy tính.

Quản lý đăng nhập và tự động đăng nhập

Một tính năng đang dần trở thành yêu cầu phải có của trình duyệt đó là khả năng đồng bộ giữa các thiết bị và hệ điều hành khác nhau (nhưng cùng một loại trình duyệt). Hiện nay bạn đã có thể tạo một tài khoản đồng bộ trên Firefox, Opera, MS Edge và Chrome. Bạn sẽ thấy việc đồng bộ tạo sự tiện lợi cho người dùng rất nhiều đặc biệt là những ai lướt web trên nhiều thiết bị khác nhau: bookmark, lịch sử, các tab đang mở, thông tin nhập form và đặc biệt là thông tin đăng nhập (username & password) của các website.

Với tính năng trên, người dùng sẽ dễ dàng đăng nhập vào các website trên nhiều thiết bị nhờ vào việc trình duyệt sẽ tự điền vào form đăng nhập. Tuy nhiên, một đặc tả mới dành riêng cho PWA với tên gọi Credential Management API cho phép web app thực hiện thao tác đăng nhập cho người dùng chỉ với một cú chạm và không cần phải nhập lại mật khẩu. Đây là một trong những tiện lợi của native app với tài khoản lưu sẵn mà giờ đây web app cũng có thể làm được.

Quản lý thanh toán và hỗ trợ thanh toán trực tuyến

Nếu như thanh toán trên mobile và bằng mobile đang trở thanh xu hướng và đem đến sự tiện lợi chưa từng có cho người dùng, thì Web App cũng không đứng ngoài cuộc.

Với tên gọi Payment Request API, một đặc tả mới nữa của W3C, nó cho phép PWA chuyển thao tác thanh toán vốn nhập nhằng và dễ sai sót cho một giao diện chung hỗ trợ bởi trình duyệt. Giao diện này bao gồm các bước: hiển thị tóm tắt đơn hàng (shopping cart), thông tin giao hàng, loại thanh toán, thông tin thẻ và cả việc thực hiện thanh toán. Các form liên quan đều được hỗ trợ tự động điền vào từ thông tin thanh toán đã được lưu trên điện thoại. Và vì giao diện thanh toán lúc này là của trình duyệt nên thông tin thanh toán sẽ được đảm bảo an toàn vì các đoạn mã độc nếu được vô tình nhúng vào website cũng không có khả năng lấy được.

Một khi chuẩn Web này được áp dụng rộng rãi trên tất cả các HĐH mobile, việc xây dựng web app cho các platform thương mại điện tử sẽ trở nên dễ dàng và thuận tiện hơn bao giờ hết.

Tiến độ hỗ trợ PWA từ các trình duyệt

Đến đây chắc hẳn bạn cũng đã rất hào hứng với PWA. Tuy nhiên, một số bạn am hiểu về Web cũng sẽ có thắc mắc rằng khi nào thì những tính năng trên của PWA sẽ đến được với đa số người dùng?

Tin tốt lành là đến thời điểm tôi viết bài này, các trình duyệt phổ biến nhất[^4] đã hỗ trợ Service Worker, đặc tả quan trọng nhất của PWA. Bảng bên dưới tóm tắt tiến độ hỗ trợ từng tính năng riêng rẽ của PWA tại các trình duyệt khác nhau.

Bảng tham khảo tiến độ hỗ trợ PWA từ các trình duyệt khác nhau. Ảnh chụp từ slide giới thiệu PWA tại Google I/O 2018

Tuy nhiên tôi muốn nhắc lại rằng với cơ chế Cải Tiến Tăng Dần, PWA có thể được áp dụng ngay từ bây giờ bất kể tính năng bạn cần chưa được hỗ trợ rộng rãi. Và với tiến độ hiện tại, những tính năng vừa nêu trên sẽ được hỗ trợ hoàn toàn trên hai nền tảng di động quan trọng và phổ biến nhất (Chrome trên Android và Safari trên iOS) trong vài tháng tới đây.

Hiệu quả của PWA

PWA có được thế mạnh của cả hai giải pháp Web và Native. Điểm mạnh của Web đó là sự tiện lợi và dễ truy cập khi mà người dùng chỉ việc mở trình duyệt và tìm đến địa chỉ của trang web app hoặc mở từ đường link được chia sẻ thông qua mạng xã hội hoặc tin nhắn. Một khi người dùng thấy app hữu dụng và có nhu cầu quay lại, họ sẽ lưu lại shortcut của app tại home screen. Và lúc này, người dùng sẽ có được trải nghiệm của PWA như một native app thực thụ mà không phải cất công vào app store để tải về.

PWA đã chứng minh được hiệu quả của mình thông qua một vài con số thống kê với những app đã được triển khai thực tế:

• 02 lần là số lượt sử dụng tăng sau khi Starbucks chuyển từ web app sang PWA.
• Sau khi Alibaba.com triển khai PWA, số giao dịch thành công (conversions) tăng 76%, số lượt truy cập tăng 14% trên iOS, 30% trên Android và tỉ lệ tương tác với app sau khi Add to home screen tăng gấp 4 lần.
• Sau khi triển khai PWA, lượt truy cập Tinder trên mobile web tăng. Và Tinder PWA có kích thước tải về nhỏ hơn so với native app của nó trên Android đến 90%.
• Thương hiệu Lancôme đã cho thiết kế lại trang web mobile (lancome-usa.com) và sử dụng một số tính năng của PWA với kết quả: conversions tăng 17%, số lượt sử dụng trên mobile tăng 51%, và đặc biệt là số lượt người dùng quay lại giỏ hàng và hoàn tất thanh toán nhờ push notification gửi nhắc nhở lên đến 12%.
• Trang PWA thử nghiệm của Forbes nhận được gấp 2 lần thời gian sử dụng trung bình của người dùng so với mobile site cũ, dẫn đến số lượt bài đăng được đọc tăng đến 6 lần…

Xem thêm những con số thống kê về hiệu quả của PWA tại: PWAStats.com.

Một số PWA đã chứng minh được hiệu quả, từ trái qua: m.alibaba.com, tinder.com, m.forbes.com

Kết luận

Được giới thiệu chính thức từ 2015, PWA đã trải qua thời gian thử nghiệm và trưởng thành đủ lâu để giờ đây chúng ta có thể khẳng định PWA chính là tương lai của Web và Web App.

PWA đóng góp thêm một giải pháp ứng dụng di động nhiều hứa hẹn, giải phóng doanh nghiệp khỏi sự lệ thuộc vào app store, những hạn chế của native app. Và nếu được thiết kế hợp lý, PWA sẽ là giải pháp hợp nhất cho “mọi nền tảng” từ desktop đến mobile.

Ghi chú:

[^1]: Xin tóm tắt lại một số thuật ngữ về “app” trên thiết bị di động: - Mobile app hoặc native app: (ở Việt Nam thường gọi tắt là “app”) là ứng dụng được cài đặt từ app store, được viết bằng ngôn ngữ lập trình dành riêng cho từng hệ điều hành di động khác nhau. - (Mobile) web app: là website chạy trên trình duyệt của smart phone nhưng có trải nghiệm giống app và thường trao đổi nhiều dữ liệu giữa người dùng và website. - Hybrid app: là ứng dụng được cài đặt từ app store, tuy nhiên được viết bằng cùng ngôn ngữ lập trình với web app. Dù hybrid app có thể cài được trên nhiều HĐH khác nhau nhưng nó chỉ cần được viết cùng một bộ mã nguồn với một ít điều chỉnh riêng cho mỗi loại HĐH mà nó hỗ trợ.

[^2]: Tổ chức World Wide Web Consortium có trách nhiệm chuẩn hóa các đặc tả về Web và khuyến khích các trình duyệt khác nhau phải tuân theo để các website hoạt động một cách đồng nhất bất kể trình duyệt dùng để hiển thị.

[^3]: URL là đường link đến một trang web bất kỳ

[^4]: Các trình duyệt phổ biến nhất bao gồm: Chrome, Firefox, Safari, MS Edge, Opera, Samsung Internet, UC Browser. Tại Việt Nam, trình duyệt phổ biến thứ 2 sau Chrome là CocCoc. Tuy nhiên CocCoc cũng là một trình duyệt biến thể từ mã nguồn mở của Chrome nên những tính năng của PWA cũng sẽ được hỗ trợ.

[^5]: Người dùng sẽ vẫn nhận được push notification cho dù họ không lưu app về home screen chỉ cần họ đã bấm đồng ý nhận push notification. Việc yêu cầu gửi push notification cần thận trọng và chỉ thực hiện khi người dùng đã thể hiện sự quan tâm đến dịch vụ của bạn. (Nếu không khả năng người dùng từ chối nhận push notification là rất cao)

NodeJS tuy phát triển mạnh mẽ những năm gần đây nhưng tại Việt Nam vẫn còn ít lựa chọn để triển khai (deploy) lên Internet cho công chúng. Các dịch vụ “app engine” cho NodeJS của nước ngoài như Heroku, Nodejitsu, now.sh… khó tiếp cận cho developer ở Việt Nam. Ngoài ra các dịch vụ trên còn nhiều hạn chế chẳng hạn: chưa có data center đặt tại Việt Nam, không kèm giải pháp database hoặc nếu có cũng là dạng add-on.

Để cài đặt một web app viết bằng NodeJS, cách đơn giản nhất và tiết kiệm chi phí nhất hiện nay chính là sử dụng Cloud VPS[^1]. Cloud VPS là một server toàn quyền được ảo hóa trên một server vật lý, có tài nguyên và băng thông được dành riêng. Ở Việt Nam, hiện đã có nhiều nhà cung cấp dịch vụ Cloud VPS với chi phí khá tiết kiệm (cấu hình thấp nhất có chi phí khoảng 150k/tháng). (Vì đây là bài hướng dẫn kỹ thuật nên tôi sẽ không giới thiệu cụ thể nhà cung cấp nào).

Trong bài viết này, tôi sẽ hướng dẫn bạn cài đặt một NodeJS app (cụ thể viết bằng KeystoneJS) lên một VPS Ubuntu 16.04 LTS[^2] với kết quả mong muốn như sau:

• Website tải cực nhanh
• Các tài nguyên tĩnh có cache header để tối ưu thời gian tải cho lần xem sau
• Các tài nguyên tĩnh được gzip để tối ưu băng thông
• Được mã hóa TLS với chữ ký số hợp lệ (miễn phí)
• Có thể cài đặt và chạy thêm app trên cùng server

Cài Đặt Server

Sau khi bạn tạo một Cloud VPS mới, thường thì nó sẽ ở trạng thái mặc định, tức là chưa có thêm bất cứ ứng dụng nào khác được cài thêm. Một số nhà cung cấp VPS thì có thể “nhanh nhảu” cài sẵn Apache HTTP server, tuy nhiên chúng ta sẽ không dùng Apache trong hướng dẫn này, nên có thể bạn phải cần remove nó khỏi hệ thống.

Ngoài ra, tùy nhà cung cấp VPS mà bạn sẽ được cấp tài khoản root hoặc tài khoản user bình thường nhưng có quyền sudo. Trong trường hợp bạn có tài khoản root thì sẽ không cần chạy những dòng lệnh bắt đầu bằng sudo[^3].

Bạn sẽ truy cập vào server thông qua giao thức SSH và sẽ cấu hình server bằng dòng lệnh trong một cửa sổ terminal. Nếu bạn dùng Windows, tham khảo hướng dẫn kết nối SSH vào Linux server tại đây và đây

Giao diện dòng lệnh SSH terminal trên macOS

Trước khi tiến hành cài đặt các phần mềm cần thiết, bạn cần cập nhật server Ubuntu với những package mới nhất:

sudo apt update && sudo apt upgrade -y

Cài đặt NGINX và Git

Đầu tiên chúng ta sẽ cài 2 phần mềm có sẵn trong repository của Ubuntu: nginx & git

sudo apt install -y nginx git

NGINX sẽ đóng vai trò reversed proxy và static file server để tiếp nhận request thông qua port mặc định 80 (http) và 443 (https). Git dùng để lấy source code của app để tiến hành build và deploy.

Cài đặt NodeJS VM:

Tùy vào yêu cầu phiên bản Node của web app, bạn sẽ cài phiên bản Node engine tương ứng. Ở đây chúng ta sẽ dùng Node 8 LTS làm ví dụ.

Thêm repository source cho NodeJS 8 LTS (link tham khảo):

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -

Sau đó cài NodeJS lên server:

sudo apt install -y nodejs

Hướng dẫn này chỉ sử dụng một phiên bản Node. Nếu có yêu cầu cài đặt nhiều app trên cùng một server và sử dụng nhiều phiên bản Node khác nhau, bạn cân nhắc cài đặt Node thông qua trình quản lý nhiều phiên bản Node như nvm hoặc n package

Cài đặt MongoDB:

KeystoneJS yêu cầu database MongoDB. Đầu tiên là thêm PGP key cho MongoDB repository:

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6

Thêm repository source của MongoDB dành riêng cho Ubuntu 16.04:

echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

Tiến hành cài MongoDB:

sudo apt update && sudo apt install -y mongodb-org

Khởi động dịch vụ mongod lần đầu tiên và đăng ký để nó tự chạy lúc restart server:

# Khởi động mongod service
sudo systemctl start mongod
# Bật chức năng tự chạy khi restart Ubuntu
sudo systemctl enable mongod

Tất cả trong một

Trên đây là hướng dẫn từng bước để các bạn hiểu rõ mình đang làm những gì để khởi tạo server mới. Một khi đã hiểu rõ, bạn có thể viết tất cả những dòng lệnh đó vào một file bash script như ở Gist này và thực thi nó:

# Thêm quyền thực thi cho file bash script
chmod +x initialize.sh

# Chạy file bash script này
./intialize.sh

Tải mã nguồn của app từ Git host và build app

Trong hướng dẫn này, chúng ta sẽ lấy mã nguồn của app từ một trong 3 Git host phổ biến là Github, Bitbucket, và Gitlab và build ngay tại server.

Trước tiên, chúng ta sẽ tạo khóa SSH mặc định trên server bằng các bước sau (Enter mặc định với tất cả các câu hỏi):

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Xuất nội dung của public key ra terminal để copy:

cat ~/.ssh/id_rsa.pub

Tại trang settings của project trên Git host, thêm deploy key và paste nội dung của file id_rsa.pub vừa mới copy ở trên.

• Tại Bitbucket, vào Settings > Chọn tiếp Access Keys
• Tại Github, vào Settings > Chọn Deploy Keys
• Tại Gitlab, vào Settings > Repository > Deploy Keys

Ảnh chụp popup thêm Access key của Bitbucket.

Quay trở lại terminal của server, tạo thư mục để chứa mã nguồn của app sẽ được clone vào:

sudo mkdir -p /apps/my-node-app
# Đổi owner của thư mục về user hiện tại để tiện chạy các lệnh sau đó
sudo chown -R $USER /apps/my-node-app/

Lệnh ở trên sẽ tự động tạo 2 cấp thư mục /apps/my-node-app tại root.

Theo quy ước, các app 3rd-party cài trên Linux thường được cài tại thư mục /opt. Tuy nhiên, đây là ứng dụng đặc biệt do chúng ta viết riêng nên chúng ta sẽ cài vào /apps để tách bạch.

Tiếp theo, clone Git repo của app vào thư mục vừa tạo (lưu ý sử dụng lệnh clone với giao thức SSH).

git clone git@bitbucket.org:<username>/<repo-name>.git /apps/my-node-app/

Với bản Gitlab mới nhất, bạn còn một lựa chọn nữa để lấy source từ Gitlab đó là dùng Deploy Token. Khi đó, URL để clone source có dạng: https://<username>:<deploy_token>@gitlab.com/user/my-node-app.git

Build app

Với một Node.js app chuẩn, việc đầu tiên chúng ta cần làm là cd vào thư mục gốc của project, và chạy lệnh cài tự động các dependency package được liệt kê trong package.json:

npm install

Sau đó, tùy vào cài đặt của dự án, ta cần chạy các lệnh để build các thành phần cần biên dịch hoặc tối ưu hóa từ mã nguồn.

Theo thông lệ chung của các NodeJS app, việc build project sẽ thông qua một lệnh script được config sẵn trong package.json, VD:

{
    "scripts": {
        "build": "gulp build"
    }
}

Do đó, việc tiếp theo sẽ là chạy script build này bằng npm:

npm run build

Tới đây, chúng ta đã có thể chạy thử app bằng lệnh node keystone.js (giả sử keystone.js là điểm start của app) và preview tại IP của server và port mặc định 3000 (VD: http://12.34.56.789:3000).

Với những bước cài đặt vừa rồi, bạn đã có thể chạy app cho môi trường TEST hoặc STAGING và có thể demo với khách hàng. Để giữ cho app demo tiếp tục chạy sau khi thoát SSH, bạn có thể dùng dòng lệnh screen (xem hướng dẫn).

Trong phần tiếp theo tôi sẽ hướng dẫn chạy app như service, đưa ra ngoài port chuẩn của web, bật mã hóa TLS/SSL… để sẵn sàng cho Production.

(Xem tiếp phần 2)

[^1]: Virtual Private Server [^2]: Có thể bạn sẽ thắc mắc sao không dùng CentOS/RedHat có thiết kế bảo mật cao hơn. Theo tôi, với đại đa số những web app thông thường, Ubuntu là lựa chọn cân bằng giữa sự anh ninh và tính dễ dùng, dễ cài đặt của dòng Linux Debian. [^3]: Bạn cần có chút kiến thức về Linux và bash command line để làm theo tutorial này dễ dàng hơn.

Cập nhật 2020-03-01: Bài viết này mình viết cũng đã lâu nhưng nó vẫn có lượt view cao trên trang blog này, nên mình quyết định bổ sung thêm một số bộ font code đẹp mới vào đây thay vì viết bài khác. Các bộ font mình bổ sung ở cuối bài.

Bạn có biết trình soạn code của mình đang dùng font chữ gì không? Ít người quan tâm đến điều này nhưng việc lựa chọn font chữ cho code editor cũng ảnh hưởng ít nhiều đến hiệu suất công việc của lập trình viên vì bạn phải nhìn những dòng code nhiều giờ trong một ngày làm việc.

Sau nhiều năm làm việc với nhiều code editor và font khác nhau, tôi rút ra được một số đặc điểm của một font chữ tốt dành cho trình soạn code như sau:

• Monospace: tất cả các ký tự và khoảng trắng đều cùng một cỡ, điều này cho phép canh cột và lề dễ dàng và code dễ đọc hơn với những đoạn logic lặp lại. Các font mặc định cho code editor và terminal đều là monospace.
• Dễ dàng phân biệt các ký tự Il1i, 0Oo, CG: có nhiều font monospace hiển thị các ký tự kể trên rất giống nhau, khiến cho việc đọc code khó khăn hơn. Với tiêu chí này, tôi đã loại một số font monospace khá phổ biến như Courier New, Noto Mono, Droid Sans Mono…
• Các ký tự đặc biệt cho cú pháp phải rõ, dễ đọc: () [] {} =+-<>:;,."'
• Và riêng đối với người Việt mình, thì font cho code cũng cần hỗ trợ tiếng Việt Unicode để hiển thị các chuỗi văn bản hoặc ghi chú bằng tiếng Việt (nếu có). Tiêu chí này cũng loại khá nhiều font mono đẹp và phổ biến khác như: Ubuntu Mono, Menlo, Operator Mono… Nếu bạn không lo vấn đề tiếng Việt, bạn có thể tìm và thử các font kể trên.

Sau đây tôi sẽ liệt kê một số font tiêu biểu cho code editor đáp ứng tất cả các tiêu chí trên:

Consolas

Font này không miễn phí nhưng có sẵn trong Windows hoặc được cài theo bộ Microsoft Office. Font Consolas hiển thị trên Sublime Text kích cỡ 15px

Monaco

Font này có sẵn trên macOS. Font Monaco hiển thị trên Sublime Text kích cỡ 15px

Roboto Mono

Font monospace của bộ Roboto, font mặc định cho HĐH Android và material design. Download font tại đây.

Font Roboto Mono (Regular) hiển thị trên Sublime Text kích cỡ 15px

SF Mono

Font SF Mono dùng để hiển thị code bên trong XCode 8+. Bạn có thể download và dùng cho mục đích cá nhân tại trang github này.

Font SF Mono (Regular) hiển thị trên Sublime Text kích cỡ 15px

Source Code Pro

Font monospace được dựng bởi Adobe dành riêng cho việc hiển thị code nên rất dễ đọc và tròn trịa. Đây là font yêu thích nhất của tôi.. Download font tại đây.

Font Source Code Pro (Regular) hiển thị trên Sublime Text kích cỡ 15px

Space Mono

Font monospace được dựng bởi Colophon Foundry cho Google Fonts. Font này có dáng chữ khá lạ và mang hơi hướng mỹ thuật hơn là cho code. Có thể download tại đây.

Font Space Mono hiển thị trên Sublime Text kích cỡ 15px

Xu hướng code font mới: Programming Ligature (nối chữ)

Ligature: đây là hiện tượng nối nhiều chữ thành một xuất hiện cùng với kỹ thuật in ấn trong một số ngôn ngữ tự nhiên. Trong thời đại số hóa, ligature cũng được mô phỏng lại (chủ yếu là vì lý do mỹ thuật) thông qua một số font chữ có hỗ trợ. Ligature cũng đã được hỗ trợ trên các trình duyệt hiện đại và đặc biệt là từ IE 10 trở về sau.

Ví dụ ligature

Các ngôn ngữ lập trình sử dụng rất nhiều biểu tượng và toán tử tuy nhiên chúng thường được tổ hợp từ nhiều ký tự đơn giản có sẵn trên bàn phím (VD. >=, ===, =>, !==…). Điều này bắt buộc người đọc code phải có một quá trình giải mã những tổ hợp ký tự đó thành biểu tượng toán mà chúng đang mô phỏng. (“≥”, “≡”, “⇒”, “≢”)

Một số font code mới đây đã bắt đầu hỗ trợ ligature cho tổ hợp các ký tự toán tử và ký hiệu giúp cho việc hiển thị chúng trực quan hơn. Trong số đó là bộ font Fira Code được dựng với rất nhiều tổ hợp ligature cho lập trình.

Font Fira Code và ligature

Tuy nhiên Fira Code (và cả Fira Mono mà nó dựa trên) không có các ký tự tiếng Việt Unicode. Để khắc phục, bạn có thể sử dụng một font khác làm fallback khá giống Fira Code đó là Roboto Mono.

Hiện nay đã có một số code editor hỗ trợ ligature, trong đó có VSCode và Atom. Rất tiếc là Sublime Text 3 chưa hỗ trợ, và tính năng này đang được đặt hàng cho nhà phát triển ST3. Sublime Text 3 kể từ build 3145 cũng đã hỗ trợ ligature.

Sau khi cài Fira Code vào hệ thống, với VSCode, cần cài đặt các settings sau để bật ligature và font Fira Code với Roboto Mono làm fallback:

{
    "editor.fontFamily": "Fira Code, Roboto Mono, monospace",
    "editor.fontLigatures": true
}

Cập nhật: Các bộ font mới cho 2020

Sau đây là một số bộ font mới mà mình thấy khá đẹp và dễ đọc dùng cho code editor (một số font không hoàn toàn hỗ trợ tiếng Việt nhưng có thể dùng thêm font fallback):

Hack

Font này không mới và còn thiếu một số ký tự tiếng Việt, tuy nhiên nó khá đẹp và rất giống Menlo (font mono space của HĐH Mac trước đây). Nó cũng là font mặc định của trang carbon.now.sh dùng để tạo ảnh chụp các đoạn code để chia sẻ lên MXH.

Font Hack (Regular) xuất ra từ Carbon.now.sh kích cỡ 16px với trình duyệt Firefox

IBM Plex Mono

Đây là font monospace trong gia đình font Plex được thiết kế làm font thương hiệu cho IBM. Theo mình đây là một trong những font cho code editor hoàn hảo nhất (nếu không kể đến ligature): hoàn toàn hỗ trợ tiếng Việt, có tất cả weight từ 100 đến 700, có kiểu in nghiêng riêng theo từng weight và đặc biệt các ký tự in nghiêng a, i, f, {} bay bướm theo phong cách của Operator Mono trông rất gì và này nọ ;)

Font IBM Plex Mono (Regular) 16px hiển thị trong VSCode trên Ubuntu MATE*

IBM Plex Mono hoàn toàn miễn phí và có thể tải về tại trang github của bộ IBM Plex ở đây.

Cascadia Code

Đây là font được thiết kế để hiển thị trong ứng dụng Terminal mới của Windows và cũng sẽ dần dần được sử dụng làm font monospace mặc định trong các sản phẩm của Microsoft. Font này nhìn tổng thể khá bay bướm nhưng dễ đọc như Operator Mono. Với phiên bản hiện tại, nó hỗ trợ tốt tiếng Việt và ligature. Tuy nhiên, hiện tại nó chỉ có mỗi weight regular và không có kiểu in nghiêng riêng.

Font Cascadia Code (Regular) 16px hiển thị trong VSCode trên Ubuntu MATE*

Download font Cascadia Code tại đây.

JetBrains Mono

Đây là font monospace rất mới (01/2020) đến từ nhà phát triển JetBrains, công ty đã tạo ra các IDE nổi tiếng như IntelliJ, WebStorm, Android Studio, GoLand… Theo như trang web giới thiệu, Jetbrains Mono được thiết kế dành riêng cho việc hiển thị code với phong cách tối giản. Nó có đầy đủ những đặc tính của một font cho code editor hiện đại như: các ký tự dễ nhầm lẫn được phân biệt rõ ràng; kiểu in nghiêng riêng giúp các code editor theme có thêm cách thức để nhấn mạnh hoặc làm nổi bật các đoạn comment; và đặc biệt là các ký tự ligature phong phú dành riêng cho các toán tử. Tuy nhiên, nó có một hạn chế (có thể chỉ là tạm thời) đó là nó chưa hỗ trợ đầy đủ tiếng Việt.

Font JetBrains Mono (Regular) 16px với fallback Roboto Mono hiển thị trong VSCode trên Ubuntu MATE*

Download font JetBrains Mono tại đây.

Xem thêm:

• Programmingfonts.com
• Các code editor và terminal hỗ trợ ligature
• Các font code có ligature khác

*: Theme được sử dụng là Boxy Ocean (dimmed bg) trong bộ theme Boxy Theme Kit do tôi port từ Sublime Text sang.

Bài viết này được dịch một phần từ bài viết BEM 101 của CSS Tricks cùng với một số ý kiến và giải thích của cá nhân.

Ký pháp BEM là gì

BEM viết tắt của Blocks, Elements, Modifiers, là một phương pháp đặt tên class cho HTML và CSS. Được phát triển tại Yandex giúp lập trình viên hiểu rõ hơn mối quan hệ giữa HTML và CSS trong dự án front end.

Ví dụ sau đây sẽ minh hoạ cách sử dụng ký pháp BEM:

/* Một Block (khối) độc lập */
.btn {}

/* Element (phần tử) con, phụ thuộc vào Block ở trên */
.btn__price {}

/* Modifier (bộ điều chỉnh) thay đổi trạng thái của Block */
.btn--orange {}
.btn--big {}

Với cách đặt tên class này, ta có Block sẽ đại diện cho một component, và trong ví dụ ở đây, là một button .btn. Block cũng sẽ đóng vai trò là một parent mà trong nó sẽ có một hoặc nhiều hơn Element con liên quan. Tên class cho Element và mối quan hệ của nó với Block sẽ được diễn tả bằng tên của Block, tiếp theo là hai gạch dưới, và cuối cùng là tên của Element .btn__price. Thành phần thứ ba của BEM là các Modifier mà chúng sẽ giúp điều chỉnh các trạng thái hoặc phái sinh khác của Block / Element. Tên của Modifier sẽ được nối với tên Block / Element phía trước bởi 02 gạch ngang .btn--orange.

Trong HTML, ký pháp BEM sẽ được dùng như sau:

<a class="btn btn--big btn--orange" href="http://int3ractive.com">
    <span class="btn__price">$9.99</span>
    <span class="btn__text">Subscribe</span>
</a>

Xem demo của ví dụ trên tại CodePen

Ấn tượng đầu tiên với bạn có thể là tên class quá xấu và mất thời gian hơn so với việc tạo riêng một class mới cho một kiểu button mới. Tuy nhiên, ký pháp BEM sẽ mang lại nhiều lợi ích mà tôi sẽ phân tích tiếp theo sau đây:

Tại sao sử dụng ký pháp BEM

Trước tiên, ký pháp BEM giúp người mới tham gia dự án dễ dàng phát hiện ra các trạng thái và các đối tượng con của một component đã được viết sẵn. Điều này giúp tránh cho họ phải viết lại những kiểu CSS đã có sẵn và hạn chế việc viết thừa code hoặc trùng kiểu CSS, điều mà rất hay xảy ra trong dự án lớn có nhiều người tham gia.

Thứ hai, chỉ cần đọc HTML, bạn vẫn có thể nhanh chóng nắm được các thành phần phụ thuộc lẫn nhau. Trong ví dụ trên, bạn dễ dàng nhìn thấy .btn__price phụ thuộc vào .btn mặc dù bạn chưa biết vai trò cụ thể của nó ngay lập tức.

Thứ ba, với ký pháp BEM, mọi định nghĩa chỉ có một cấp class và không lồng cấp. Điều này giúp cho độ ưu tiên (specificity) chung của hệ thống CSS thấp. Đây là một lợi thế vì sau này bạn không phải “chiến đấu” với specificity của những thuộc tính đã có sẵn (VD: siêu lồng cấp .a .b .c .d .e {...}) cũng như vận dụng những kỹ thuật không hay để thay thế được style (chẳng hạn !important hay inline CSS).

Quy luật thác nước cascading của CSS là con dao hai lưỡi: nó giúp dễ dàng định nghĩa những thuộc tính và kiểu chung trên những selector tổng quát mà không cần phải khai báo lặp lại trên từng phần tử, nhưng nếu không nắm được tầm ảnh hưởng, lập trình viên CSS rất dễ gây ra những tác động phụ đến các đối tượng không liên quan khi chỉnh sửa trên những class có sẵn hoặc thậm chí viết mới. Với ký pháp BEM, lập trình viên sẽ tự tin hơn khi bắt tay chỉnh sửa hoặc viết thêm style vì đã biết rõ tầm ảnh hưởng của selector mà mình đang viết ra.

Tóm lại, ký pháp BEM, nếu áp dụng triệt để, sẽ giúp cải thiện sự phối hợp giữa các thành viên trong nhóm. Ngoài ra, nó buộc người viết CSS phải đầu tư suy nghĩ về việc xây dựng những component độc lập và tái sử dụng được (phù hợp với tiêu chí của OOCSS).

Sử dụng BEM với SASS

Với phiên bản SASS mới nhất hiện nay, việc viết theo ký pháp BEM trong SCSS dễ dàng và thuận tiện hơn bao giờ hết.

Bạn vẫn sẽ sử dụng cách viết lồng để cô lập khối component và kết hợp với biểu tượng parent & của SASS để đặt tên cho Element và Modifier mà không phải đánh lại tên của Block. VD:

.block {

    &__element {}

    &--mod {}
}

Mặc dù viết lồng cấp, khi được biên dịch thành CSS, chúng vẫn được trải phẳng thành một cấp class theo đúng tinh thần của BEM:

.block {}

.block__element {}

.block--mod {}

Nếu bạn sử dụng LibSass (nhanh hơn rất nhiều lần bản gốc Ruby) để biên dịch SASS, thì hãy đảm bảo các công cụ wrapper được cập nhật các phiên bản tương đương hoặc mới hơn như sau: node-sass 3.4.0, gulp-sass 2.1.0 (nếu sử dụng GulpJS) và grunt-sass 1.1.0 (nếu sử dụng GruntJS)

Thế còn LESS? Vì tôi không sử dụng LESS nên sẽ không đề cập ở đây. Bạn có thể giúp bổ sung hướng dẫn cho LESS nếu nó có cú pháp trợ giúp tương đương.

Các ý kiến không đồng tình

Vẫn có một số ý kiến hoài nghi và không đồng tình với phương pháp đặt tên này.

Tên class quá xấu

Đồng ý với bạn rằng BEM trông kỳ quặc, tuy nhiên khả năng mà nó đem lại vô cùng lớn và sẽ hoàn toàn xoá mờ hạn chế về mặt “ngoại hình” của nó.

Ngoài ra BEM đòi hỏi phải gõ nhiều chữ hơn và chiếm nhiều byte ký tự hơn, tuy nhiên với việc sử dụng SASS như trên và việc gzip file đã trở thành tiêu chuẩn như hiện nay, những điều đó không còn là vấn đề so với lợi ích mà BEM mang lại.

Descendant selector vẫn giải quyết được vấn đề như trước giờ

Có một chỉ trích dành cho BEM thế này: Thay vì viết

.site-search        {}
.site-search__field {}
.site-search--full  {}

Họ đặt vấn đề rằng tại sao không viết như thế này:

.site-search        {}
.site-search input  {}
.site-search.full   {}

Rõ ràng cả hai cách viết đều có thể giúp hiện thực được component cụ thể này và cách thứ hai có vẻ “gọn gàng” hơn. Tuy nhiên khi CSS của toàn bộ dự án trở nên lớn và phức tạp hơn, thì rất khó tránh khỏi các kiểu được định nghĩa chồng chéo lên nhau ngoài tầm kiểm soát.

Thử tưởng tượng .site-search cũng nằm trong một container tên .main và những input bên trong .main cần được style với .main input. Như vậy, input bên trong .site-search sẽ bị điều chỉnh một cách không mong muốn.

Tương tự, nếu như .full trong ví dụ trên hoặc một tên phổ biến như .label được dùng như modifier, thì sẽ có rủi ro (rất cao) là một ngày nào đó một lập trình viên khác định nghĩa một class global trùng tên và sẽ làm hỏng style của element kia.

Ngoài ra, khi bạn đọc trong ngữ cảnh HTML, bạn sẽ khó thấy được quan hệ ràng buộc giữa input và .full với block .site-search.

“Tôi đơn giản là không thích ký pháp này”

Một số người khi nhìn thấy cách đặt tên BEM đã ngay lập tức bác bỏ nó. Họ không thích BEM, đó là quyền của họ, tuy nhiên sẽ là vô lý nếu phản bác việc cần có một số quy tắc đặt tên để dễ dàng nắm bắt và quản lý CSS trong dự án trung và lớn.

Hơn nữa, bạn hoàn toàn có thể nghĩ ra cho mình một cách đặt tên khác cho hợp sở thích, nhưng vẫn dựa trên nguyên tắc của BEM đã đề ra. Là kết quả đúc kết từ những kiến trúc CSS lớn và phức tạp trước đây, đề xuất của BEM không phải vô tình lại có một số điểm chung với các phương pháp quản lý CSS khác như SMACSS hay OOCSS. Lấy ví dụ khái niệm module của SMACSS:

/* Ví dụ một module */
.btn { }

/* Modifier của một module */
.btn-primary { }

/* Btn Module với State */
.btn.is-collapsed { }

Trong các phương pháp quản lý CSS vừa kể trên thì chỉ có BEM là làm rõ được mối quan hệ với các thành phần con bên trong.

Tóm lại, mỗi phương pháp đều có ưu nhược điểm. Quan trọng là cả team phải có phương pháp tiếp cận khoa học và áp dụng triệt để thì kiến trúc CSS của cả dự án mới vững và dễ bảo trì.

Câu hỏi thường gặp:

❓Hỏi: Element có modifier hay không?
💬️ Đáp: Có. Element có thể có modifier riêng của nó. Ví dụ:

.accordion__copy--open {
    display: block;
}

❓Hỏi: Có cần phải đặt tên class cho tất cả element (thẻ HTML) trong block hay không?
💬️ Đáp: Không cần thiết, chỉ những element cần có style riêng được viết trong CSS. Tuy nhiên cũng không nên lạm dụng những thẻ wrapper (phổ biến nhất là DIV) một cách vô tội vạ và không có chức năng vai trò cụ thể nào. Như vậy việc đặt tên element con cũng khiến bạn phải suy nghĩ một tag nào đó có thật sự cần thiết thêm vào trong block hay không.

❓Hỏi: Bên trong element con foo có một tag đóng vai trò một element con bar khác của block, vậy việc đặt tên class cho element bar này như thế nào? Có nên đặt là .block__foo__bar?
💬️ Đáp: Vẫn đặt bằng tên block và hai gạch dưới rồi đến tên element .block__bar, không chen giữa bằng foo__. Nói tóm lại, tên của element chỉ cần thể hiện quan hệ phụ thuộc với block, không cần phải chỉ rõ sự lồng bên trong nhau của các element con. (Xem thêm ví dụ trong câu hỏi tiếp theo)

❓Hỏi: Một thẻ HTML có thể là element của 2 block khác nhau không?
💬️ Đáp: Hoàn toàn có thể. Hãy xem ví dụ sau:

<a class="btn btn--big btn--orange" href="http://int3ractive.com">
    <span class="btn__price"><i class="icon icon--dollar-sign btn__icon"></i>9.99</span>
    <span class="btn__text">Subscribe</span>
</a>

Button có biểu tượng dollar-sign là một block .icon. Có thể trong block .btn, biểu tượng dollar-sign cần được style riêng, nên cần có một cái tên xác định rõ vai trò và style cho element này là .btn__icon. Nếu block .icon.icon--dollar-sign được dùng ở một ngữ cảnh khác, thì rõ ràng nó không cần class .btn__icon nữa vì tên class đã chỉ rõ sự ràng buộc với block .btn và chỉ được thêm vào khi ở bên trong nó.

❓Hỏi: Một element con có thể đóng vai trò là block của riêng nó không? Có thể xây dựng chuỗi component phụ thuộc nhau như .a__b__c không?
💬️ Đáp: Câu hỏi này thật sự ngoài tầm hiểu biết và kinh nghiệm của tôi. Có thể có những hoàn cảnh đặt biệt như vậy. Tuy nhiên, theo tôi, nếu có cũng không nên quá 2 cấp, tức là element con chỉ đặt đến .a__b__c là tối đa. Điều này là để sự phụ thuộc không quá sâu, làm giảm khả năng dùng lại của block (portability) và sự linh hoạt của các đối tượng CSS theo tinh thần OOCSS. Xem ví dụ bên dưới.

/* block list */
.list { }
/* item là con của list */
.list__item { }
/* link là con của block list__item, để phân biệt với list__link
hoặc chỉ rõ mối quan hệ phụ thuộc giữa item và link*/
.list__item__link { }

Sai lầm hay mắc phải khi sử dụng BEM:

Tôi xin hẹn lại về vấn đề này trong một bài viết khác, khi mà bản thân đã ứng dụng nhiều và quan sát được những ví dụ thực tiễn hơn để tổng hợp những sai lầm hay mắc phải do ảnh hưởng từ phương pháp cũ cũng như cách hiểu chưa đúng về phương pháp BEM này.

Còn tiếp…

Xem thêm:

• Bài viết giới thiệu BEM của CSSWizadry
• Bài viết giới thiệu BEM của Smashing Magazine
• Sử dụng BEM và @extend của SASS
• Bài viết 5 sai lầm phổ biến với BEM

Why The Change?

My ultimate motivation of this move is the frustration of maintaining a long post’s format and hierarchy across multiple platforms and editors. The blog post needed reviewing and editing from different people, so I used Google Doc as the collaborating tool. But its rich format didn’t play nice with Blogger’s WYSWYG editor, so I had to paste the content as plain text and did the formating and URL linking all over again.

It was when I realized that, rich text editors are a nuisance to long and serious writing, and why some new blog platforms adopting plain text editors (with specialized formating syntax) exclusively. Editing in plain text, in fact, encourages me to focus on the ideas and contents. Besides, I’m not writing just texts but using the Markdown syntax (you should have heard of it) which allows me to annotate the intended hierarchy, web links and images, etc. without compromising the convenience of version tracking or any means of writing collaboration.

Besides, here are other reasons of the move:

• Blogger’s WYSWYG editor is way out-dated and lousy. It handles new lines poorly and makes my posts, underneath the markups, like a single paragraph with just line breaks. You can suggest that I could write in HTML since I’m a Front End developer, but authoring HTML is a distraction to my focus on writing.
• Blogger’s XML-based template format is difficult to use and customize. Besides it doesn’t provide a separate CSS file but inlining to the output HTML. This has kept me from rewriting my blog’s theme for a long time.
• There is no static file storage for the blog post’s extras. Although it come with handy photo uploading service, for other stuff like downloadable assets and code demos, I had to reside on other services like Github or FileDen which often have cross domain issues or risk of service termination.

Moving to GitHub Pages

GitHub Pages allows me to overcome all shortcomings above.

Take the issue with text formating for example. Under the hood, GitHub Pages use Jekyll which is a template-enabled static site generator. That means, I can edit and keep my blog posts in markdown text. At GitHub side, my templates and posts are processed automatically to create a nice static website. (Let me discuss how to edit Markdown text effectively in another post).

A static site means I have all the freedom to customize the theme with the tooling of Front End I’m used to. And the Liquid template language offered by Jekyll is quite similar to Handlebars or EJS.

Another good thing with GitHub is that I can check in any kind of files to the blog repository and the post’s extra assets can now be hosted together with the blog for free.

Lastly, Jekyll does have a Blogger migration tool and it has well documented settings that allows me to migrate my blog without altering the post URL scheme. And GitHub Pages, for long, has support for custom domains.

Nothing is perfect!

GitHub Pages has the flaws of any static websites. But in this era of SaaS, many of them can be addressed easily, even at no cost:

Comments

By using a commenting / discussion service like Disqus, Facebook Comments Plugin, or G+ Comments, etc… my static website can accept readers’ comments and feedbacks although it doesn’t have a database or any server-side scripts. In fact, I have swapped Blogger’s comment system with Disqus for a long time since the latter accepts users with accounts from multiple social networks.

Site search

For this, we can use Google’s Custom Search Engine which can be easily installed on any static HTML pages. The service provides full text search with Google-grade algorithm. You can even force CSE to update your page index if you worry your latest blog won’t show up in the results.

In addition we can write a template for the archive page, in which visitors can have quick glance of all published blog posts.

RSS

This can be solved by an RSS/Atom template which outputs an updated feed XML every time I push new blog post. However, the trouble has been recently taken away when GitHub Pages rolled out built-in support for blog feeds.

Tags & categories

Currently, Jekyll in GitHub Pages does not support auto tag or category pages generation. However, you can implement a custom template for tags and categories, but it involves some manual preparation.

The new theme

I have found a nice minimalist blog theme called Clean Blog created by Start Bootstrap and modified it to fit with GitHub Pages and my preferences. You can find the source code and my comments on the changes of this blog theme here.

At the end of the day, moving my blog from Blogger (archive site) to GitHub Pages (source code) is a smooth transition and returning visitors may only notice the change in theme and a much faster loading time.

Recently, I am annoyed with some people thinking they can use their education and training to overcome lack of experience, or in other words, claiming that knowledge can replace experience. Though it has been said before, I want to express it again in my own thoughts and from my own experience (not a pun):

Knowledge can be trained. Experience cannot.

Knowledge can be get from books. Experience can only be earned from doing.

Knowledge can be stuffed in a short time. Experience requires time.

Knowledge lets you do a task properly. Experience lets you do that task quicker and more efficiently.

Knowledge shows how to fix problems. Experience shows how to find the causes.

Knowledge reduces the errors you make. Experience helps you correct them gracefully. (And as human, we will never be error-free)

Knowledge can only lead to ability. Experience can lead to mastery.

With knowledge, you can do OK work. With experience, you can do GREAT work.

Mức kỹ năng tối thiểu (baseline) là gì?

Là hệ thống kỹ năng và kiến thức tối thiểu của một nhân viên kỹ thuật cần có để có làm việc trong nhóm một cách hiệu quả và không cần nhiều sự trợ giúp.

Tại sao phải có mức tối thiểu cho lập trình viên Front End?

Từ kinh nghiệm làm việc trong nhiều nhóm phát triển phần mềm lớn nhỏ khác nhau, tôi nhận ra rằng một lập trình viên mới gia nhập rất cần được chỉ dẫn về quy ước và quy trình làm việc của nhóm phát triển để có thể nhận nhiệm vụ cũng như thay thế và hỗ trợ đồng nghiệp một cách trơn tru. Ngoài ra, những lập trình viên ít kinh nghiệm cũng cần được đào tạo những kiến thức tối thiểu để có thể đảm bảo được yêu cầu kỹ thuật cũng như hiệu suất khi thực hiện dự án. Tất cả những kiến thức và kỹ năng đó khi tập hợp lại sẽ thành mức kỹ năng tối thiểu của một lập trình viên trong môi trường phát triển phần mềm.

Khi xây dựng đội phát triển Front End tại Nâu Studio, tôi đã nghiên cứu thật kỹ về những kỹ năng và kiến thức chuyên môn tối cần thiết để được đưa vào hệ thống kiến thức cơ sở của nhóm và làm tâm điểm của việc huấn luyện căn bản.

Lấy cảm hứng từ bài viết A Baseline for Front End Developers của Rebecca Murphey, tôi sẽ ghi lại dưới đây mức tối thiểu về kiến thức cho các lập trình viên Front End hiện đại với hệ thống phù hợp hơn cho người mới bắt đầu cũng như cập nhật những xu hướng mới nhất của năm 2015.

Để bắt đầu, tôi sẽ bàn về 3 trụ cột của Web Front End:

HTML

Thực tế cho thấy có rất nhiều lập trình viên xem nhẹ HTML. Theo quan sát của tôi, nhiều lập trình viên dùng tag HTML rất tuỳ tiện, thêm các thẻ bao ngoài một cách vô tội vạ và kết quả là việc xử lý giao diện tuỳ ứng (responsive) cũng như canh lề rất vất vả. Khi làm càng nhiều, bạn sẽ nhận ra rằng HTML được viết gọn gàng và súc tích sẽ giúp ích rất nhiều cho việc xử lý CSS và cải thiện tốc độ website trên trình duyệt (đặc biệt là trên thiết bị di động). Làm được như vậy đòi hỏi một kỹ năng tuyệt vời, và tôi dám nói rằng viết HTML là cả một nghệ thuật.

Vì vậy, để trở thành một lập trình viên HTML thành công, bạn phải có khả năng kết hợp các phần tử (element) HTML để đạt yêu cầu cả về ngữ nghĩa và tính tối ưu. Điều này có nghĩa bạn phải nắm vững các quy luật layout mặc định và ý nghĩa sử dụng của tất cả các thẻ HTML. Ngoài việc tiến bộ dần thông qua kinh nghiệm thực tế, bạn có thể tăng tốc kỹ năng HTML của mình nếu được đào tạo bài bản.

Các tài liệu hỗ trợ:

• HTML5 Doctor: Tập hợp các bài phân tích cách sử dụng các thẻ HTML cho đúng ngữ nghĩa và mục đích.
• HTML basic tutorials: Tài liệu hướng dẫn HTML căn bản, phù hợp cho người mới bắt đầu.

CSS

Rất nhiều người mới bắt đầu với Web, đặc biệt là sinh viên CNTT ở Việt Nam, được học rất sơ sài về CSS trên lớp và các sách, giáo trình liên quan đều đã lỗi thời. Đa số các bạn sẽ học CSS bằng phép thử-và-sai (trial and error) và đó là một cách học cực kỳ kém hiệu quả.

Điều này không tồn tại trong đội lập trình viên của Nâu. Những khái niệm căn bản của CSS như thứ tự thác nước (cascading), luật về độ ưu tiên (specificity), bộ chọn lọc (selectors), sự thừa kế, mô hình hộp (box model), và ngữ cảnh xếp chồng (stacking context) phải được các bạn hiểu rõ.

Sau những kiến thức căn bản, bạn nên bắt đầu tìm hiểu về CSS hướng đối tượng (OOCSS) hoặc bắt đầu thực hành những chỉ dẫn trong tài liệu Những nguyên tắc về CSS

Ngoài ra, một lập trình viên Front End giỏi luôn thủ sẵn một số thủ thuật về CSS. Chẳng hạn, bạn phải biết tất cả các mẹo canh giữa nội dung theo chiều dọc khác nhau khi mà Flexbox vẫn chưa được áp dụng rộng rãi. Bạn cũng phải biết khi nào cần dùng pseudo-elements, tạo các khối hình học bằng CSS thuần, icon từ webfont, hoặc sprite sheet… để hiện thực giao diện với hiệu suất và độ tương thích tốt nhất.

Cuối cùng, một lập trình viên Front End hiện đại phải biết sử dụng một ngôn ngữ biên dịch sang CSS (như SASS hoặc LESS) để cải thiện khả năng bảo trì và hiệu suất làm việc với CSS.

Một khi nền tảng đã được nắm vững, bạn sẽ thấy việc học thêm hoặc ứng dụng những tính năng mới của CSS3 sẽ chẳng có chút khó khăn.

Tài liệu tham khảo:

• CSS basic tutorials: Hướng dẫn CSS căn bản
• OOCSS: Các khái niệm về CSS hướng đối tượng
• CSS Guidelines: Những nguyên tắc CSS
• CSS Tricks: Các thủ thuật CSS

JavaScript

Nếu như vài năm trước, jQuery là yêu cầu bắt buộc để nhập môn Giao Diện Web thì bây giờ không còn nữa. Tuy nhiên theo tôi nó vẫn rất hữu ích cho những người mới bắt đầu thực hành JavaScript trong bối cảnh tính năng và sự tương thích giữa các trình duyệt vẫn chưa đồng nhất.

Tiếp theo sau jQuery, việc nắm vững kiến thức về ngôn ngữ JavaScript thuần vẫn là mục tiêu tối quan trọng cho người làm Front End. Bên cạnh học từ quyển sách kinh điển JavaScript: The Good Parts do Rebecca giới thiệu, ngày nay bạn có thêm những lựa chọn miễn phí nhưng nội dung vẫn chất lượng như quyển Eloquent JavaScript hoặc JavaScript Enlightenment.

Từ kinh nghiệm thực tiễn, tôi tin rằng những đặc tính của ngôn ngữ JavaScript sau đây cần được nắm rõ bất kể trình độ bạn đang ở đâu, đó là chuỗi prototype (prototype chain), sự bao đóng (closure), và từ khoá this. Ngoài ra những đặc tính độc đáo khác của JS mà lập trình viên cũng cần phải biết như chuyển đổi kiểu động, xây dựng đối tượng trực tiếp từ giá trị (literal), sự dịch chuyển lên trên vị trí khai báo của biến và hàm (variable and function hoisting)…

Khi đã thành thạo với JavaScript thuần, và muốn tiếp cận cách viết có cấu trúc để dễ mở rộng và bảo trì, bạn sẽ nghiên cứu các đặc ngữ của JS (idiom), mẫu thiết kế (design pattern), cách viết module, và các framework MV* phổ biến hiện nay.

Năm 2015 là năm mà phiên bản tiếp theo của JavaScript, ECMAScript 6 (hay còn gọi là ECMASCript 2015) được thống nhất và thông qua về đặc tả để tiến hành hiện thực dần trong các phiên bản kế tiếp của các trình duyệt. Đi kèm đó là xu hướng sử dụng công cụ biên dịch từ ES6 sang ES5. Để không đứng ngoài xu hướng, bạn cần trang bị kiến thức về ECMAScript 6 ngay từ bây giờ và nên thử nghiệm quy trình viết bằng ES6 và biên dịch thành ES5 để chạy trên các trình duyệt hiện tại.

Nói về NodeJS, theo tôi nó không thuộc hệ thống kiến thức tối thiểu cho người lập trình Front End (trừ khi bạn viết cả back end bằng JavaScript). Tuy nhiên, bạn sẽ dần làm quen với nó như một hệ quả tất yếu khi bạn sử dụng những công cụ trong quy trình Front End (xem bên dưới) mà hầu hết đều được viết trên nền NodeJS.

Các link tham khảo:

• Eloquent JavaScript: tài liệu dành cho người mới học JavaScript rất hay, và miễn phí.
• JavaScript Enlightenment: Một quyển sách khác dành cho người học JS từ đầu.
• Idiomatic JavaScript: Đôi khi bạn đọc những đoạn code JS người khác viết mà không hiểu. Những đoạn “mật mã” đó sẽ được giải mã tại đây. ;)
• TodoMVC: Website không thể bỏ qua cho những bạn cần tham khảo và so sánh kiến trúc của những framework MV* khác nhau.
• Writing Modular JS: Thông tin hữu ích về về các mẫu thiết kế module.
• Understanding ES6: Học ECMAScript 6 với Nicholas C. Zakas

Quy Trình Front End Hiện Đại

Như tôi đã đề cập, kết quả làm việc nhóm có tốt hay không một phần phụ thuộc vào việc các thành viên có tuân thủ quy ước viết code (coding style convention) và quy trình làm việc (workflow) của nhóm hay không. Tuy nhiên, để nhớ hết tất cả các quy tắc đó không phải là việc đơn giản. Trong đội lập trình của Nâu, chúng tôi sử dụng các công cụ kiểm lỗi được tích hợp trong quy trình từ lúc soạn thảo cho đến biên dịch, giúp duy trì quy ước và hình thành thói quen cho các thành viên.

Không cần phải bàn cãi, trình duyệt là công cụ không thể thiếu của người làm Front End. Có hai kỹ năng mà tôi muốn nhấn mạnh ở đây đó là khả năng sử dụng công cụ cho người lập trình (developer tools / dev-tools) có sẵn trong trình duyệt và khả năng sử dụng phần mềm tự động nạp lại trang web (live/auto reload). Tất cả các trình duyệt hiện đại đều có dev-tools đi kèm, tuy nhiên theo tôi, dev-tools trên trình duyệt Chrome là tốt nhất hiện nay. Về phần mềm tự nạp trang, bạn có thể thử tìm hiểu Browsersync.

Bên cạnh trình duyệt, trình soạn thảo code đóng vai trò quan trọng không kém. Bất kể bạn chọn phần mềm gì, hãy bảo đảm rằng nó có khả năng tự hoàn tất code cũng như là khả năng kiểm lỗi tức thì cho ngôn ngữ lập trình bạn viết. Với đặc tính phân tán và ít ràng buộc như HTML/CSS/JS, trình soạn thảo cho những ngôn ngữ này cũng rất cần khả năng sửa văn bản trên nhiều con trỏ và mở file nhanh bằng tìm kiếm. Nếu bạn hỏi, tôi sẽ đề nghị bạn dùng thử Sublime Text hoặc Atom. Ngoài ra, đừng bỏ qua Emmet, một công cụ bổ sung cho các trình soạn thảo “giúp cải thiện hiệu suất làm việc với HTML và CSS một cách đáng kể”.

Quy trình Front End hiện đại sẽ rất thiếu sót nếu không nhắc đến những công cụ tự động hoá chạy bằng dòng lệnh (command line) như Grunt, Gulp hoặc những công cụ tương tự có giao diện (GUI) như Codekit, LiveReload. Việc xử lý từng bước và tối ưu hoá sản phẩm Front End đã trở nên rất phức tạp để có thể làm bằng tay. Khả năng vận dụng các công cụ tự động hoá đã trở thành yêu cầu cơ bản của lập trình viên Front End.

Các kỹ năng và kiến thức hiển nhiên khác mà bạn cần phải có: sử dụng phần mềm quản lý phiên bản, quy trình phát triển phần mềm, mô hình phát triển phần mềm agile, công cụ hỗ trợ giao tiếp (email, nhắn tin, gọi video…), và hiểu biết tối thiểu về hệ điều hành mà bạn dùng để làm việc.

• Nau Front End Dotfiles: Một số cài đặt và công cụ cho quy trình của Nâu.
• Tự động hoá với Grunt (video): Tôi sẽ hướng dẫn các bạn sử dụng một trong những công cụ tự động hoá Front End phổ biến nhất .
• Khởi tạo dự án Front End với các công cụ kiểm tra lỗi tự động (video): Đây là một phần của quy trình khởi tạo dự án mới mà chúng tôi đang áp dụng.
• Modern Front End Workflow from Start to Finish : Quy trình phát triển Front End hiện đại từ đầu đến cuối.
• JavaScript Development Workflow of 2013 (video) bởi Paul Irish. Mặc dù đã được trình bày cách đây 2 năm, nhưng những công cụ được đề cập vẫn được áp dụng trong thời điểm hiện tại.

Sự Cải Tiến Tăng Dần (Progressive Enhancement)

Hiểu biết về Cải Tiến Tăng Dần đã trở thành một yêu cầu bắt buộc đối với các lập trình viên Front End hiện đại. Đã qua rồi cái thời mà lập trình viên phải cố gắng hiện thực trang web cho giống y đúc trên mọi trình duyệt hoặc loại bỏ hoàn toàn những trình duyệt mà đặc tả không yêu cầu hỗ trợ. Phương pháp được khuyến khích như một chuẩn mực hiện nay là Cải Tiến Tăng Dần (Progressive Enhancement), trong đó lập trình viên Front End sẽ hiện thực website với trải nghiệm tốt nhất có thể tuỳ theo khả năng của từng loại trình duyệt khác nhau. Điều này yêu cầu bạn phải có hiểu biết về các phiên bản khác nhau của JS / CSS / HTML mà các trình duyệt hỗ trợ; biết sử dụng caniuse.com, Modernizr, html5boilerplate; cũng như biết khi nào cần áp dụng polyfill hoặc bỏ qua một hiệu ứng (nhưng nội dung vẫn đầy đủ) trên một trình duyệt nào đó.

Tham khảo thêm:

• Progressive Enhancement 2.0 trình bày bởi Nicholas Zakas
• Progressive Enhancement: What Is It and How to Use It

Kỹ Năng Về Giao Diện

Bạn cần có chút hiểu biết về hiệu ứng kiểu chữ (typography), các khái niệm giao diện (UI) và chuyển động (animation) và biết những thuật ngữ chuyên sâu để có thể trao đổi một cách dễ dàng với các bạn thiết kế. Ví dụ: nút hamburger, hero banner, the fold, hiệu ứng parallax…

Bên cạnh đó, bạn cũng cần có kỹ năng sử dụng Photoshop ở mức cơ bản để có thể trích xuất được những hình ảnh cần thiết cho việc hiện thực cũng như tham khảo các giá trị cho CSS (độ trong suốt, chuyển tiếp màu, màu sắc…). Những thao tác bằng tay này có thể sẽ được thay thế hoàn toàn bằng những công cụ hiện đại (Photoshop CC 2014, Sketch…) tuy nhiên kỹ năng về phần mềm đồ hoạ vẫn hữu ích cho bạn khi thỉnh thoảng bạn sẽ cần tự mình chỉnh sửa lên file mà không cần sự hỗ trợ của người thiết kế.

Bước vào năm 2015, một kỹ năng nữa mà bạn cũng cần biết, đó là sử dụng công cụ xử lý ảnh vector (Illustrator, Inkscape…) để hiệu chỉnh và trích xuất các icon và thành phần giao diện bằng vector cho thiết kế phẳng (flat design) đang là xu hướng của cả thế giới.

• Video hướng dẫn về CSS Text và Typography.

Kỹ Năng về Tiếng Anh

Mức tiếng Anh tối thiểu, theo tôi, không cần phải là trình độ A, B, C hay bao nhiêu điểm TOEIC, mà là thái độ tích cực và quyết tâm cải thiện kỹ năng giao tiếp bằng tiếng Anh của bạn.

Không sớm thì muộn, bạn sẽ nhận ra rằng tiếng Anh là yếu tố tối cần thiết đối với môi trường làm việc hiện đại và chuyên sâu về kỹ thuật. Công nghệ phần mềm nói chung và Web Front End nói riêng đang phát triển với tốc độ vũ bão mà nếu không có ngoại ngữ, bạn sẽ không thể nào bắt kịp. Bạn phải đọc tài liệu về các xu hướng mới, nghe các bài thuyết trình về kỹ thuật và nói chuyện với khách hàng trực tiếp hoặc qua chat/email rất thường xuyên để làm việc… Cũng có nhiều lập trình viên cho rằng chỉ cần đọc và viết tốt tiếng Anh là đủ. Tuy nhiên, bạn sẽ bỏ lỡ rất nhiều cơ hội tốt khi khả năng nghe hiểu và giao tiếp bằng tiếng Anh còn hạn chế. Vì vậy nếu tiếng Anh của bạn chưa đủ để giao tiếp, thì ngay từ bây giờ hãy không ngừng trau dồi và cải thiện.

Lý Quang Diệu khi đến thăm Việt Nam đã chia sẻ về tầm quan trọng của tiếng Anh:

Trả lời cho câu hỏi “Làm thế nào để không tụt hậu?” chỉ có một cách là phải giỏi tiếng Anh. Đây là điều ông Lý Quang Diệu nhấn mạnh. […]

Ông Lý Quang Diệu gợi ý: “Đại học Việt Nam nên có sách giáo khoa tiếng Anh ở các ngành quan trọng như kỹ thuật, công nghệ… bởi nếu chỉ dùng sách Việt Nam thì chắc chắn sẽ tụt hậu”. […] Ông cảnh báo, nếu tất cả sinh viên Việt Nam sau này “không thể nghe và nói tiếng Anh trôi chảy, chỉ có thể đọc thôi cũng đã là tụt hậu”.

Kết Luận

Đến đây, nếu bạn là một lính mới về Front End hoặc là một người mới chuyển từ Back End sang, bạn sẽ cảm thấy có quá nhiều thứ để học để đạt được mức tối thiểu của Front End. Đúng là như vậy. Nhưng những người làm Front End như tôi và bạn vẫn chọn con đường không mấy dễ dàng này bởi đơn giản chúng ta yêu thích việc tạo ra những giao diện đẹp, hữu dụng và cảm thấy tự hào khi thành quả đó được đưa lên web cho cả thế giới xem và trải nghiệm.

Theo tôi, không phải lập trình viên nào cũng phù hợp với con đường Front End. Có những phẩm chất tạo nên sự khác biệt giữa người yêu thích Front End với người yêu thích Back End, đó là sự nhạy cảm những với thiết kế trực quan, khả năng làm việc tỉ mỉ, chi tiết đến từng pixel, và phẩm chất của một người yêu thích sự hoàn hảo.

word cloud by wordle.net

HTML

• HTML5 Doctor: Reliable reference to HTML5 elements' usage, especially in a semantic way.
• HTML basic tutorial: Basic HTML tutorials

CSS

• CSS Tutorials from webplatform.org
• OOCSS: Object-Oriented CSS methodology by Nicole Sullivan
• CSS Guidelines by CSS Wizardry - Harry Robert
• CSS Tricks: Who does CSS and hasn't visited this site before? :)

JavaScript

• Eloquent JavaScript: Very good book for JS newbie, and it’s free.
• JavaScript Enlightenment: Another good book for newbie.
• Idiomatic JavaScript: Sometimes you read others' JS code and can’t get it. Those “cypher” may be decoded here. ;)
• TodoMVC: A go-to site for MVC frameworks evaluation and comparison
• Writing Modular JS: More details on modern JS modules
• Understanding ES6: Learn ECMAScript 6 with Nicholas C. Zakas

The Modern Workflow

• Nau's Front End Dotfiles: A set of tools and config for our team’s workflow.
• Automation with Grunt tutorial (screencast in Vietnamese): I’ll guide you through using one of the most popular automation tools for Front End dev.
• Front End Project Settings & Linters (screencast in Vietnamese): Part of our scaffolding workflow, semi-manual for now, but will be automated with Yeoman later.
• Modern Front End workflow from start to finish: An insightful read or current Front End workflow.
• JavaScript Development Workflow of 2013 by Paul Irish. Although it's 2 year old, there are a lot of demos of tools that are still applicable by now.

Progressive Enhancement

• Progressive Enhancement 2.0 by Nicholas Zakas, this is one of my eye-openers to PE
• Progressive Enhancement: What Is It and How to Use It from Smashing Magazine

UI Skills Set

Conclusion

P.S:

It's interesting enough that although the issue is quite common and has been reported several times but there seem to be no absolute solutions. Most suggested the workaround to set uneven padding to compensate for the shift. I have struggled so much with workarounds for this especially the padding didn't help to correct the alignment across browsers and devices (I preview my app in Chrome/OSX but it runs on iOS Safari and Android browser) so I decided to look into the issue again and thought about typography metrics problems.

Honestly, I know very little about typography and font metrics. I used FontForge (which happens to be easily installed on Ubuntu) to tinker with the troubling font file. After a few hours, I have discovered the problem when I tried to replicate the settings of another good font on the defective one. It was one of my Eureka moments!

So, here's how I fixed it:

1.  Open the troubled font file (TTF or WOFF) with FontForge
2.  Open menu Element > Font Info...

I have tried my fix on the defective fonts in the issue reports mentioned above and it did work!

For a live demo, visit this Dabblet. (You may only see the differences if you are on Mac/Linux).
Here's a screenshot of the demo:

So, this padding issue is actually a font metrics issue. I don't fully understand why and how it happens and I may need some more learning to explain it thoroughly. But ultimately the fix works.

If you can't install FontForge, you may try with other font editors available on your platform (of course I don't know the equivalent menu location so you have to find it yourself). I hope this guide will help everybody fix the web font problem once and for all!

• Thanks to Canvas' RenderingContext2D.measureText(), I can calculate size of the words off browser's stage.
• Initially, I was using Canvas as rendering stage for the tag cloud. However, it demands extra work to make the words interactive. So I decided to use normal block text with CSS3's transform/rotate. The result is texts are searchable and out-of-the-box hyperlinks.
• The position checking process may cause browser hang momentarily if run through all of the words. I have split the process of each word into each RequestAnimationFrame to avoid the script hang.

How-to:

GAE for Python

• Remove all other files except app.yaml
• Copy all static files into a subfolder. For example: helloworld/www
• Edit the app.yaml file as following:
  

  application: my-app
  version: 1
  runtime: python27
  api_version: 1
  threadsafe: yes
  
  handlers:
  # making index.html as default page for root
  - url: /
    static_files: www/index.html
    upload: www/index.html
  
  # begin any static files request from www folder
  - url: /
    static_dir: www

• However this won't make any of index.html files in the subfolder as default pages. To have default page for subfolders, you have to prepend a static_files handler for each one:
  

  [...]
  handlers:
  # default page for /projects subfolder, note the order in the handler list
  - url: /projects/?
    static_files: www/projects/index.html
    upload: www/projects/index.html
  
  # making index.html as default page for root
  - url: /
    static_files: www/index.html
    upload: www/index.html
  
  # begin any static files request from www folder
  - url: /
    static_dir: www

GAE for Java

• Copy WEB-INF from appengine's demos/new_project_template to your website's folder
• Edit appengine-web.xml with your application's name and version
• Edit web.xml by removing the sample servlet & servlet-mapping tags.
• Deploy your application with your website's folder in place of "war" in the command appcfg.sh update war from the instructions.

Where to go from here:

• jQuery
• Galleria photo gallery (library)
• OSMF's Strobe Media Playback (component)

The images

The code

HTML:

CSS:

Final thoughts

• HTML5 Boilerplate
• MooTools 1.4
• ThreeJS 3D library & its Birds Demo
• CSS3's transition & animation

• Realistic waterfall effect with CSS
• Fish boids

• jQuery
• Google Maps API

 

• jQuery (library)
• HTML5 Boilerplate (library)
• HTML5 Canvas
• CSS3 transitions

• MVC approach with Robotlegs framework
• AS3-Signals
• Greensock's TweenLite

• MVC approach 
• Multilingual with external fonts & texts loading
• Robotlegs framework
• AS3-Signals (AS3 Events replacement)

PHẦN 2. TÌM HIỂU MOLEHILL (STAGE3D) API

(TTT) Đây là bài viết giới thiệu về Molehill (Stage3D) API ở khía cạnh cơ bản của nó. Molehill API là một tập lệnh cấp thấp nên đòi hỏi bạn phải vững về ActionScript 3 và có chút kinh nghiệm về 3D (Flash) để có thể dễ dàng tiếp cận hơn.

(Dịch) Trước khi chúng ta bắt đầu, có một số thuật ngữ các bạn nên biết:

Các thuật ngữ:

• Vertex: Một điểm trong không gian 3D. Một vertex sẽ xác định đỉnh của một tam giác. Tuy nhiên trong MoleHill, vertex định nghĩa cả vị trí và màu của đỉnh.
• Matrix: Bạn dùng Matrix (ma trận) để biến đổi các Vertex. Hãy hình dung Matrix giống như là các “phương trình” để xoay, thay đổi tỉ lệ hoặc thay đổi vị trí của Vertex.
• Shader: Shader là một chương trình nhỏ dùng để xử lý Vertex. Shader có thể dùng Matrix để làm các phép biến đổi lên Vertex. (Hay nói cách khác, chương trình thực thi một phương trình lên tất cả các điểm trong 3D). Không như tôi nghĩ, Shader trong MoleHill không chỉ xử lý hoa văn và giao diện mà nó còn dùng để xử lý vị trí của các đối tượng.

Bây giờ chúng ta có thể bắt đầu xem xét các thành phần tạo nên MoleHill

Các thành phần tạo nên MoleHill:

Stage3D

Stage3D là phần đứng giữa Flash và bộ máy xử lý đồ họa (GPU). Stage3D không nằm trong display list (bạn không thể làm thao tác addChild với Stage3D). Stage3D tồn tại song song với đối tượng Stage chúng ta đã biết. Stage3D nằm đằng sau tất cả các đối tượng hiển thị của Flash nhưng nằm đằng trước StageVideo.

Minh họa Stage3D (nguồn: ByteArray)

Context3D

Stage3D sẽ chứa Context3D. Để dễ hình dung, bạn hãy liên tưởng tới việc Bitmap chứa BitmapData. Bạn không vẽ trực tiếp lên Bitmap cũng như bạn sẽ không render đối tượng trực tiếp lên Stage3D. Việc bạn làm với Context3D sẽ tương tự như với BitmapData.

VertextBuffer3D

Context3D sẽ chứa các đối tượng VertextBuffer3D. Hãy hình dung VertextBuffer3D như là các “chỉ dẫn” cần phải vẽ những gì và chúng trông như thế nào. VertextBuffer3D gồm một Vector. (mảng các giá trị kiểu Number) mà nó sẽ định nghĩa vị trí và màu sắc của vertex. (xem thêm bên dưới)

IndexBuffer3D

IndexBuffer3D chứa một Vector giống VertexBuffer3D. Nhưng thay vì là một Vector., IndexBuffer3D là một Vector. (các phần tử của Vector có kiểu uint). Hãy hình dung như vầy: VertexBuffer3D sẽ chứa một tập các tọa độ còn IndexBuffer3D sẽ quyết định thứ tự được vẽ của các tọa độ đó. Nếu so sánh chúng với thế giới thực, VertexBuffer3D xác định các thành phố trên bản đồ còn IndexBuffer3D sẽ xác định thứ tự để đến các thành phố đó.

Program3D

Program3D là một “chương trình” mà nó sẽ duyệt qua dữ liệu của VertextBuffer3D và “biến đổi” chúng. Program3D chứa 2 Shader mà một sẽ biến đổi vị trí của từng vertex và một sẽ định nghĩa các pixel trong một tam giác sẽ trông như thế nào. 2 chương trình nhỏ đó được gọi là VertexShader và FragmentShader

VertexShader

VertexShader là một chương trình nhỏ viết bằng ngôn ngữ AGAL mà nó sẽ biến đổi vị trí các Vertex (đỉnh) của tam giác. Chẳng hạn, nếu bạn muốn co giãn, xoay, hoặc di chuyển một tam giác, bạn sẽ dùng VertexShader để làm việc này.

FragmentShader

FragmentShader là một chương trình khác viết bằng AGAL mà nó sẽ xử lý các pixel bên trong tác giác. Chẳng hạn, nếu bạn muốn đổi màu tam giác thành màu đỏ thì bạn cần viết một chương trình FragmentShader để làm việc đó.

Hình minh họa về Vertex & Fragment program (nguồn ByteArray)

AGAL

AGAL (Adobe Graphics Assembly Language) là một ngôn ngữ lập trình cấp thấp. Nó được dùng để viết các chương trình VertexShader và FragmentShader. Nó là trái tim của MoleHill.

Sơ đồ bên dưới mô tả sự liên hệ giữa các thành phần

Ứng dụng MoleHill thường có 2 phần:

1. Cài đặt
2. Render (tạm dịch: xử lý hiển thị)

1. Những việc chúng ta cần làm trong giai đoạn Cài đặt

1. Truy xuất đối tượng Context3D từ Stage3D.
2. Cài đặt Context3D
3. Tạo một VertextBuffer
4. Tạo một IndexBuffer
5. Gửi dữ liệu Vertex cho VertexBuffer
6. Gửi dữ liệu Index cho IndexBuffer
7. Biên dịch VertexShader
8. Biên dịch FragmentShader
9. Tạo một Program3D để sử dụng 2 shader vừa tạo
10. Lắng nghe sự kiện ENTER_FRAME để liên lục gửi dữ liệu đến GPU.

Bạn có thể thấy có khá nhiều việc phải làm trong bước cài đặt. Việc cài đặt, theo tôi, phức tạp hơn nhiều so với việc render.

2. Những việc cần làm trong quá trình Render (ENTER_FRAME):

1. Dọn sạch Context3D
2. Cài đặt chương trình Program3D sẽ dùng
3. Gửi VertextBuffer đến Context3D
4. Cài đặt dữ liệu cho các shader (khai báo các biến AGAL)
5. Vẽ các tam giác
6. Hiển thị ra màn hình các tam giác được vẽ

Mã nguồn ví dụ

Bây giờ chúng ta sẽ xem qua mã nguồn ví dụ Phần cài đặt mô tả ở trên được hiện thực trong hàm onGotContext. Bởi vì để lấy được Context3D, chúng ta phải gửi yêu cầu cho Flash và chờ cho đến khi nó được trả về. Phần render xảy ra trong hàm onRenderLoop xử lý sự kiện ENTER_FRAME. Tôi đã cố gắng viết thật nhiều dòng ghi chú trong code để bạn có thể dễ nắm bắt. Cũng cần nói thêm là mã nguồn ví dụ này được dựa trên bài blog của Thibault Imbert và video này.

package {
	import com.adobe.utils.AGALMiniAssembler;
	import flash.display.Sprite;
	import flash.display.Stage3D;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display3D.Context3D;
	import flash.display3D.Context3DProgramType;
	import flash.display3D.Context3DTriangleFace;
	import flash.display3D.Context3DVertexBufferFormat;
	import flash.display3D.IndexBuffer3D;
	import flash.display3D.Program3D;
	import flash.display3D.VertexBuffer3D;
	import flash.events.Event;
	import flash.geom.Matrix3D;
	import flash.geom.Rectangle;
	/**
	 *
	 */
	[SWF(width="980",height="570",frameRate="60")]
	public class MolehillDemo extends Sprite {
		//Context3D là nơi xử lý hiển thị xảy ra
		//Nó giống như BitmapData đối với Bitmap (Stage3D)
		private var context3d:Context3D;
		//Đây là đối tượng sẽ lưu dữ liệu của vertex
		private var vertexBuffer:VertexBuffer3D;
		//Đối tượng này sẽ xác định thứ tự vẽ của các đỉnh vertex
		private var indexBuffer:IndexBuffer3D;
		//Chương trình này sẽ chứa 2 shader dùng để xử lý các vertex
		private var program:Program3D;
		//Đây là Ma Trận sẽ được sử dụng bởi VertexShader để xử lý vị trí của các vertex
		//(đừng lo, bạn sẽ hiểu nó khi đọc xong bên dưới)
		private var model:Matrix3D = new Matrix3D();


		public function MolehillDemo() {
			trace("start app");
			//Các lệnh thông thường của Flash để điều chỉnh nội dung Flash không thay đổi tỉ lệ
			//và luôn canh lề ở góc trên bên trái
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			//Lắng nghe sự kiện khi Flash sẵn sàng trả vể đối tượng Context3D.
			//Đối tượng Context3D có thể không truy xuất được ngay tức thời nên chúng ta
			//cần phải lắng nghe sự kiện này.
			stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onGotContext);

			//Yêu cầu Flash trả về tham chiếu đến Context3D, Flash sẽ đáp trả trong hàm onGotContext
			stage.stage3Ds[0].requestContext3D();

			//Tại đây chúng ta đề nghị Flash hiển thị các hình ảnh 3D trong một khung hình
			//chữ nhật rộng 980px, cao 570px bắt đầu từ tọa độ 0,0
			stage.stage3Ds[0].viewPort = new Rectangle(0, 0, 980, 570);
		}

		protected function onGotContext(e:Event):void {
			trace("got context");
			//Nhận được đối tượng Stage3D mà qua đó sẽ lấy được Context3D
			var stage3d:Stage3D = Stage3D(e.currentTarget);

			//cuối cùng cũng lấy được Context3D – Yeah!
			context3d = stage3d.context3D;
			trace("context 3D: " + context3d);
			//Khoan đã! Đến đây cũng chưa chắc bạn đã thật sự lấy được Context3D. Câu lệnh
			//bên dưới là cách chuẩn để kiểm tra lần cuối bạn có thật sự nhận được Context3D.
			//Trong ví dụ này, nếu điều kiện là true, chúng ta sẽ thoát khỏi hàm và không
			//làm gì cả.
			if (context3d == null)
				return;
			//Dòng dưới giúp chúng ta nhận được các thông báo lỗi nếu chương trình chạy có vấn đề.
			//Khi xuất bản ứng dụng, chúng ta nên cài về false. (Việc này cũng sẽ giúp cải thiện tốc độ).
			context3d.enableErrorChecking = true;

			//Thao tác này tương tự việc khởi tạo BitmapData(980, 570). Chúng ta đang khai báo
			//vùng dữ liệu mà chúng ta cần để xử lý. Số 4 là mức độ khử răng cưa.
			//Theo tài liệu, các giá trị cho phép của tham số này là:
			//0 không khử răng cưa
			//2 khử răng cưa ít
			//4 khử răng cưa chất lượng cao
			//16 khử răng cưa chất lượng rất cao
			//nhưng khi tôi thử đặt 16, chương trình bị lỗi nên có thể 16 hiện tại chưa hoạt động.
			context3d.configureBackBuffer(980, 570, 4, true);

			//Ở đây đơn giản chúng ta đang cài đặt nếu một tam giác không quay về phía người
			//xem thì không vẽ nó ra (culling: lược bớt)
			//context3d.setCulling(Context3DTriangleFace.BACK);
			context3d.setCulling(Context3DTriangleFace.BACK);

			//Tạo một vertex buffer
			//Chúng ta sẽ có 3 vertex và sẽ có 6 giá trị cho mỗi vertex: x, y, z, r, g, b
			vertexBuffer = context3d.createVertexBuffer(3, 6);

			//Tạo một buffer chỉ mục (index) cho các vertex
			//Chúng ta sẽ vẽ một tam giác, vì vậy sẽ có 3 đỉnh (vertex) và 3 chỉ mục (index)
			indexBuffer = context3d.createIndexBuffer(3);

			//Tiếp theo chúng ta sẽ tạo ra mảng dữ liệu cho các vertex. Mảng dữ liệu vertex này
			//sẽ chứa thông tin tọa độ và màu sắc của từng vertex.
			//Sau đây là giải thích cho mảng dữ liệu bên dưới:
			//Vùng thông tin cho mỗi vertex bao gồm tọa độ sau đó là màu sắc.
			//x==-1 là vị trí trái cùng của màn hình
			//x==1 là vị trí phải cùng của màn hình
			//x==0 là vị trí giữa màn hình (theo chiều ngang)
			//Tương tự theo chiều dọc cho Y
			//Màu sắc cũng được biểu diễn bằng số phân số cho nên:
			//1, 0, 0 <- màu đỏ 255 (r, g, b)
			//0.5, 0, 0 <- nửa màu đỏ 128

			//Mảng sau đây sẽ định nghĩa một tam giác có góc trái dưới màu đỏ, góc giữa trên
			//màu xanh lá và góc phải dưới màu xanh dương
			var vertexData:Vector. = Vector.(
				[-1, -1, 0, 255 / 255, 0, 0, //<- 1st vertex x,y,z,r,g,b
				0, 1, 0, 0, 255 / 255, 0, //<- 2nd vertex x,y,z,r,g,b
				1, -1, 0, 0, 0, 255 / 255 //<- 3rd vertex x,y,z,r,g,b
				]);

			//Sau đây là thứ tự các chỉ mục mà các đỉnh sẽ được vẽ
			//0==đỉnh thứ nhất
			//1==đỉnh thứ hai
			//2==đỉnh thứ ba
			var indexData:Vector. = Vector.([0, 1, 2]);

			//Gửi thông tin của các vertex cho vertex buffer
			vertexBuffer.uploadFromVector(vertexData, 0, 3);

			//Gửi dữ liệu chỉ mục cho index buffer
			indexBuffer.uploadFromVector(indexData, 0, 3);

			//Chúng ta sẽ cần 1 “bộ biên dịch” AGAL cho vertex shader và 1 cho fragment shader
			var agalVertex:AGALMiniAssembler = new AGALMiniAssembler();
			var agalFragment:AGALMiniAssembler = new AGALMiniAssembler();

			//Bây giờ hãy cùng viết vài dòng AGAL
			//AGAL là ngôn ngữ rất cơ bản
			//Nó bao gồm các câu lệnh (statements)
			//Mỗi câu lệnh có ít nhất các thành phần sau
			//Operation OutPut, Input1 (Hành-động Dữ-liệu-ra, Dữ-liệu-vào-1)
			//Đôi khi nó có thể có 2 tham số truyền vào
			//Operation OutPut, Input1, Input2

			//Để xem AGAL hoạt động như thế nào, hãy giả sử chúng ta cần làm một phép tính:
			//I*J=K
			//câu lệnh AGAL sẽ như sau:
			//mul K, I, J

			//mul==Operation
			//K==Output
			//I==Input1
			//J==Input2

			//Sau đây là định nghĩa của một số biến và lệnh được thấy ở dưới
			//m44: lệnh để thực thi một ma trận (Matrix) lên dữ liệu
			//op: dữ liệu ra là vị trí của vertex trên màn hình
			//va0: x, y, z của một vertex trogn tam giác của chúng ta
			//vc0: một hằng sẽ được định nghĩa sau (trong trường hợp của chúng ta chính là
			//ma trận để chuyển đổi các vertx)
			//v0: một “biến” ở giữa vertex shader và fragment shader
			//va1: r, g, b của một vertex

			//Mô tả của các dòng lệnh tiếp theo như sau:
			//m44 op, va0, vc0 -> thực thi một ma trận 4x4 lên vertex và trả về giá trị của nó trên màn hình
			//mov v0, va1 → lấy giá tri màu của vertex này và gửi nó cho fragment shader
			var agalVertexSource:String = "m44 op, va0, vc0\n" + "mov v0, va1\n";

			//oc: dữ liệu ra là màu hiển thị trên màn hình
			//v0: biến trung gian giữa vertex shader và fragment shader
			//mov oc, v0 -> lấy giá trị màu (biến trung gian đã được lưu từ vertex shader) và xuất ra màn hình
			var agalFragmentSource:String = "mov oc, v0\n";

			//Biên dịch source AGAL vừa viết thành một mảng ByteArray mà các shader có thể dùng.
			agalVertex.assemble(Context3DProgramType.VERTEX, agalVertexSource);
			agalFragment.assemble(Context3DProgramType.FRAGMENT, agalFragmentSource);

			//Tạo một chương trình (program) để thực thi các shader
			//Nên nhớ là chương trình này sẽ chứa một Vertex Shader và một Fragment Shader
			program = context3d.createProgram();

			//Gửi các shader đã được biên dịch đến program để thực thi
			//agalCode==bytearray
			program.upload(agalVertex.agalcode, agalFragment.agalcode);

			//Thêm hàm xử lý render liên tục
			addEventListener(Event.ENTER_FRAME, onRenderLoop);

		}

		protected function onRenderLoop(event:Event):void {

			//Xóa khung hình và màn hình
			context3d.clear(0.5, 0.5, 0.5, 1);

			//cài đặt chương trình dùng để render
			context3d.setProgram(program);

			//Có thể bạn sẽ thấy lạ vì 2 dòng bên dưới gần giống như nhau.
			//Về cơ bản, đoạn code bên dưới sẽ cho AGAL biết va0 sẽ là x, y, z và va1 sẽ là r, g, b
			//Dòng thứ 1
			//0: chỉ mục của biến đầu tiên, va0
			//vertexBuffer: vertex buffer mà chúng ta sẽ dùng
			//0: chỉ mục nơi bắt đầu lấy giá trị cho va0 (0 bởi vì x, y, z bắt đầu tại 0)
			//Context3DVertexBufferFormat.FLOAT_3: sẽ có 3 giá trị liên tiếp để lấy: x, y, z
			//Dòng thứ 2
			//1: chỉ mục của biến va1
			//vertexBuffer: vertex buffer mà chúng ta sẽ dùng
			//3: chỉ mục nơi bắt đầu lấy giá trị cho va1 (r, g, b bắt đầu tại chỉ mục 3)
			//Context3DVertexBufferFormat.FLOAT_3: 3 giá trị liên tiếp để lấy: r, g, b
			//Theo tôi bạn có thể dùng Context3DVertexBufferFormat.FLOAT_4 nếu bạn cần sử dụng r, g, b, a
			context3d.setVertexBufferAt(0, vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_3);
			context3d.setVertexBufferAt(1, vertexBuffer, 3, Context3DVertexBufferFormat.FLOAT_3);

			//Lấy giá trị mặc định của ma trận
			model.identity();

			//Co tỉ lệ của tam giác xuống 0.5 theo x, y, z
			model.appendScale(0.5, 0.5, 0.5);

			//Gán ma trận vừa khai báo vào biến vc0 và nó sẽ được dùng để xử lý dữ liệu vertex của chúng ta
			context3d.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, model);

			//Vẽ hình tam giác của chúng ta ra màn hình
			//0 là chỉ mục của vị trí (trong vertex buffer) bắt đầu vẽ
			//1 là số tam giác sẽ vẽ
			context3d.drawTriangles(indexBuffer, 0, 1);

			//Hiển thị tam giác tra màn hình
			context3d.present();
		}
	}
}

Để biên dịch được đoạn code trên, bạn cũng làm các bước chuẩn bị như ở Phần 1-II-1. Các bước để biên dịch đoạn code trên như sau:

1. Vào project settings, thêm thư mục lib vào danh sách Classpaths.
2. Tải về thư viện AGALMiniAssembler tại đây (đây là lớp tiện ích bên ngoài, không có sẵn trong Flash Player Incubator), giải nén vào thư mục lib của dự án. (thư mục ‘com’ ở trong ‘lib’). (Nếu bạn dùng lại dự án đã tạo cho phần 1 thì không cần phải làm bước này, AGALMiniAssembler đã được đóng gói sẵn với Away3D)
3. Tạo một lớp mới tên MolehillDemo.as và nhập nội dung của lớp như ở trên.
4. Click chuột phải lên MolehillDemo.as trên cửa sổ Project Manager, chọn Document Class
5. Nhấn F8 hoặc Project > Build Project để biên dịch ứng dụng.
6. Mở file index.html bằng browser đã cài Flash Player Incubator.

Xem thêm:

• Bài viết gốc: http://labs.jam3.ca/2011/03/molehill-getting-started
• Giới thiệu về Flash Player Incubator và cách biên dịch: http://labs.adobe.com/wiki/index.php/Flash_Player_Incubator#Authoring_for_Flash_Player_11.2C0.2C0.2C58_Incubator
• Đào sâu hơn về Molehill API: http://www.bytearray.org/?p=2555

PHẦN 1. TIẾP CẬN MOLEHILL THÔNG QUA FLASH ENGINE AWAY3D

I. Molehill và những câu hỏi thường gặp.

1. Molehill là gì?

Molehill là tên mã của một tập lệnh (API) cấp thấp trong Flash Player cho phép tận dụng sức mạnh của chip đồ họa (GPU) để hiển thị hình ảnh 3D phức tạp và các hiệu ứng đồ họa đòi hỏi tốc độ xử lý cực nhanh, từ đó mang lại cho người dụng trải nghiệm 3D ấn tượng trên hầu hết các máy tính và thiết bị kết nối internet.

Dự kiến Molehill sẽ được phát hành chính thức trong Flash Player 11 và Adobe AIR phiên bản tiếp theo.

Ảnh: Ứng dụng demo Max Racer viết bằng engine Alternativa 3D hỗ trợ Molehill.

Xem demo.

2. Những yêu cầu để Flash Player hoạt động với 3D:

3D APIs của Flash Player đòi hỏi DirectX 9 trên Windows và OpenGL 1.3 trên MAC và Linux. Trên nền tảng di động, 3D API dựa trên OpenGL ES 2.0. Với những card đồ họa không được hỗ trợ, Flash Player sẽ thay thế bằng nền tảng software (cũng khá nhanh) tên là SwiftShader, một công nghệ của TransGaming.

3. Điều này có nghĩa 3D API được giới thiệu trong Flash Player 10 sẽ ngưng hỗ trợ?

Không, 3D APIs giới thiệu trong Flash Player 10 tiếp tục được cung cấp cho người thiết kế và lập trình viên như là một phương thức hiển thị hiệu ứng 3D đơn giản trên nội dung 2D. Còn tập lệnh 3D cấp thấp mới hướng đến những lập trình viên chuyên sâu giúp xây dựng những trải nghiệm đồ họa 3D phức tạp tăng tốc bằng phần cứng. Việc lựa chọn API nào sẽ phụ thuộc vào từng trường hợp cụ thể và loại nội dung được tạo.

4. 3D Molehill có được hỗ trợ bởi phiên bản Flash Player cho di động? Nếu có thì khi nào?

Có, 3D APIs sẽ có mặt trên các nền tảng di động chẳng hạn như Android hoặc điện thoại sử dụng Linux. Adobe đang làm việc với các đối tác trong dự án Open Screen Project để triển khai 3D trên các thiết bị chạy Flash Player và AIR.

5. Lập trình viên sẽ viết ứng dụng 3D với Molehill như thế nào?

3D API của Molehill là một tập lệnh cấp thấp nên rất khó sử dụng. Tuy nhiên đã có các ActionScript 3D framework giúp lập trình viên tiếp cận Molehill ở cấp cao và dễ dàng hơn. Sử dụng 3D framework là cách dễ nhất để lập trình viên hiện thực dự án sử dụng Molehill. Các 3D framework hứa hẹn sẽ hỗ trợ Molehill bao gồm: Alternativa3D, Away3d, CopperCube, Flare3D, Minko, Sophie3D or Yogurt3D…

Xem thêm các câu hỏi thường gặp và phần giới thiệu về Molehill tại đây: http://labs.adobe.com/technologies/flashplatformruntimes/incubator/features/molehill.html

II. Ứng dụng 3D Molehill đầu tiên với Away3D

1. Chuẩn bị môi trường làm việc với 3D Molehill:

Vì 3D Molehill mới trong gian đoạn beta và còn rất mới, để biên dịch được ứng dụng sử dụng 3D API bạn cần làm một số bước chuẩn bị.

Sau đây là hướng dẫn chuẩn bị môi trường phát triển Molehill bằng FlashDevelop và FlexSDK đơn giản nhất theo ý kiến của tôi:

1. Tải về và cài đặt FlashDevelop 4 (tại thời điểm viết bài chỉ mới có bản beta) tại đây. Với bản FlashDevelop beta, bạn nên cài dạng stand-alone. Trong lúc cài nhớ bỏ chọn tải về Flex SDK và AIR SDK. Chúng ta sẽ tải về bản Flex SDK beta mới nhất.

2. Tải về và giản nén bản FlexSDK 4.5 revision 19786 trở lên tại đây. (Giả sử bạn giải nén tại C:\flex_sdk_4.5.0.19786)

3. Tải về thư viện flashplayer_inc_playerglobal_022711.swc hỗ trợ Molehill API tại đây.

4. Tạo thư mục 11.0 bên trong Flex SDK theo đường dẫn: “flex_sdk_4.5.0.19786\frameworks\libs\player\11.0”. Sau đó chép file SWC vừa tải ở trên vào và đổi tên thành playerglobal.swc

5. Chạy FD4, vào Tools > Program Settings… > chọn AS3 Context > nhấn nút […] tại mục Installed Flex SDKs > Add > Nhấn vào nút […] tại mục Path của Flex SDK vừa thêm > tìm đến thư mục Flex SDK vừa tải về (C:\flex_sdk_4.5.0.19786) > OK > Close

6. Tạo một dự án mới với template Actionscript 3 - AS3 Project.

7. Vào project settings:

8. Tại Output > Platform > chọn Flash Player - 11.0.

9. Tại Compiler Options > Additional Compiler Options > thêm dòng: -swf-version=13

10. Chúng ta chỉ build mà không chạy ứng dụng trực tiếp trong FlashDevelop do chưa có Flash Player standalone hỗ trợ Molehill. Để chạy được flash Molehill, bạn cần tải về Flash Player 11 incubator chạy trên browser tại đây.

Xem thêm bài viết sau để biết cách build Molehill bằng Flex SDK thuần túy hoặc Flash CS5: http://labs.adobe.com/wiki/index.php/Flash_Player_Incubator#Authoring_for_Flash_Player_11.2C0.2C0.2C58_Incubator

2. Viết ứng dụng Molehill đầu tiên với Away3D:

1. Tải về Away3D phiên bản hỗ trợ Molehill (4.0) tại đây.
2. Giải nén và chép nội dung của thư mục src (thư mục away3d và com) vào thư mục lib của dự án FlashDevelop vừa tạo ở trên.
3. Vào project settings, thêm thư mục lib vào danh sách Classpaths.
4. Tạo một lớp mới tên AwayMolehillDemo.as và nhập nội dung của lớp như sau:

package  {
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.entities.Sprite3D;
	import away3d.lights.PointLight;
	import away3d.materials.ColorMaterial;
	import away3d.primitives.Cube;
	import flash.display.Sprite;
	import flash.events.Event;

	/**
			 - ...
			 - @author Thanh Tran
	 */
	[SWF(width="800",height="600",frameRate="60")]
	public class AwayMolehillDemo extends Sprite {
		public var light1: PointLight;
		public var light2: PointLight;
		public var view3D: View3D;
		public var cube: Cube;

		public function AwayMolehillDemo() {
			super();
			init();
		}

		private function init():void {
			view3D = new View3D();
			//IMPORTANT
			view3D.width = 800;
			view3D.height = 600;
			addChild(view3D);

			var mat: ColorMaterial = new ColorMaterial(0x0000FF, 0.7);
			cube = new Cube(mat, 100, 100, 100, 2, 2, 2);

			light1 = new PointLight();
			light1.x = -1000;
			light1.y = 1000;
			light1.z = -1000;
			light1.color = 0xffFFFF;

			light2 = new PointLight();
			light2.x = 1000;
			light2.y = -1000;
			light2.z = 1000;
			light2.color = 0xffFFFF;

			mat.lights = [light1, light2];

			view3D.scene.addChild(light1);
			view3D.scene.addChild(light2);
			view3D.scene.addChild(cube);

			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}

		private function enterFrameHandler(e:Event):void {
			cube.rotationY += 1;
			cube.rotationX += 1;
			view3D.render();
		}
	}
}

5. Click chuột phải lên AwayMolehillDemo.as trên cửa sổ Project Manager, chọn Document Class
6. Nhấn F8 hoặc Project > Build Project để biên dịch ứng dụng.
7. Mở file index.html bằng browser đã cài Flash Player Incubator.

Bài viết này chúng ta dùng Flash engine để tạo hiệu ứng 3D Molehill nhanh chóng. Đây cũng là cách mà hầu hết lập trình viên sẽ tiếp cận khi làm việc trong dự án. Trong bài viết tiếp theo chúng ta sẽ xem xét Molehill 3D API ở cấp thấp để hiểu hơn bản chất và cách thức hoạt động của nó.

• Flash designer can use existing skills and tools to create animations for HTML5.
• If we just look from HTML5 aspect, Wallaby + Flash CS5 is similar to Sencha Animator which allow us to create HTML5/CSS3 animation on timeline visually.
• As it doesn't currently support ActionScript 1/2/3, it is quite useless for developers to get any quick porting of Flash applications to HTML5.
• Wallaby's current use cases: ad banners, intro animations, animated assets for HTML/Javascript apps

You should have seen the aesthetic tag cloud above somewhere on the web. It originates from the famous Wordle words cloud (closed source). For the past few days, I have ported an open source Java class to ActionScript and able to render the tag cloud in Flash as seen above. Please refer to this article to have the Java author explain the basic of the algorithm. (Thank Pierre Lindenbaum for the nice implementation)

For my AS3 port, I’ll leave the source code explain itself (mentioned below); but I can commend that Flash is very suitable for such visual tasks as it has built-in classes for drawing and object positioning. Some notable works for the Flash adaptation are:

• Checking for closely-fit bounds of the text on TextField (simple getBounds() will leave you some unwanted padding around the TextField object).
  I would like to thank Thu Hoang, my dear colleague, who helped fixing this perfect bounds implementation.
• Deploy some pixel perfect collision detection approaches and try them. However the result is extremely slow and somehow inaccurate. I leave this for later improvement.
• As the process of collision testing and word placing cost a lot of CPU power, the Flash application usually hang for several seconds when rendering the tag cloud. To prevent this, I have split the process into multiple ENTER_FRAME events in order to eliminate the hang and resulted in a word-appearing animation.
• The class doesn’t care about scaling to fit the viewport yet. I intend to take care of that later.

Check out the demo here.
I would like to open source the whole project but that is not possible because I have spent some of my company time doing the porting (It also come from a request of a commercial project). But I’m pleased to share the basic porting of the Java class which you can view it here (or check out the SVN here)
The open source Wordle tag cloud is the basic porting of the Java class which still run on single loop (no animation and still hang). But to split the process into multiple frames is simple OR you can deploy a pseudo-threading library. There are plenty of rooms for you to improve. (See the open source demo here.)
There is a native AS3 implementation as you can find here. I found the vertical/horizontal case of this implementation doesn’t look very good (and my request doesn’t care about free angle) so I decided to go with this Java class.
On a side note, when testing the single loop demo, I realized that the Flash Player on Linux (~2000ms) runs approximately 4 times slower than the Windows’ counter part (~500ms). Holy cow!

Updated 2013-04-04: I have uploaded this demo on Github sometimes ago. Please visit the Github repo. In this repo, I have also committed the part that was closed: multi-frame calculation (to avoid blocking script). However, this part remains closed source. You can read it for inspiration only. If you want to use the closed part (Main.as, WordleAS3.as), please seek permission from my ex-employer (noted as copyright holder in the source).
[Vietnamese tag: Đám mây tag Wordle viết bằng ActionScript 3]

All the coding effort is credited to my Flash team. The iOS applications were created by using Flash CS5’s iPhone Packager. I repackaged the Flash builds to AIR for Android using Flex SDK Hero. Some of the applications are not complete and/or Android-optimized yet.

FYI, the video was created with Cinelerra, the most advanced non-linear video editor and compositor for Linux. (Quite close to Adobe Premiere, and require some learning curve)

So which preset should we choose for the export settings?

I suggest you start with a preset for mobile such as “Apple iPod, iPhone (Widescreen) Video” (assuming Adobe Media Encoder CS5). For a Motorola phone like mine which has higher screen resolution than said preset I have successfully encoded my video with “YouTube Widescreen SD” for a better quality video. From these presets, you can tweak the settings a little bit to perfectly match your phone’s screen. Typically, you can set size and bitrate of the video and leave other settings alone.

I found these settings are perfect for my Motorola Android phone (854x480):

• Format: H.264
• Preset: YouTube Widescreen SD
• Frame Width: 854 (or leave it as 640)
• Frame Height: 480 (or leave it as 360)
• Target Bitrate: 1
• Maximum Bitrate: 2

Of course my source video has aspect ratio of 16x9. Otherwise, I would select a similar preset for 4x3 videos. You can try other presets at your own risk.

[Vietnamese tag: Vài lưu ý khi tạo video cho điện thoại Android với chương trình Adobe Media Encoder]

• Pyco Flash Framework – based on PureMVC
• Red5
• TweenMax
• Realtime multiplayer synchronization

[Vietnamese tag: Bài thuyết trình về FlexUnit và mô hình phát triển phần mềm dựa trên kiểm thử / kiểm tra]

So, Adobe has discontinued its Linux version of Flex Builder. That’s sad news for us. Anyway, it doesn’t change much since Linux users already have alternatives long before, e.g. FDT, IDEA. Besides, I have been able to run Flash Builder 4 on my Ubuntu (via Wine) for a while to take advantage of its mxml coding hinting and the unique design view. Let me share some of my experiences of using Flash Builer on Ubuntu so far.

Installation

Some users (here and here) said that they could install Flash Builder 4 (FB4) with Wine. However, that is dated back to the beta version of FB4. I have tried many times with different winetricks to install the released version of FB4 but didn’t succeed. So I have no choice but install it on my Windows virtual machine and copy the installed files to Ubuntu’s wineprefix.

This process is similar to what was described in my previous blog post about making Flash CS5 (and Photoshop CS5) running on Ubuntu, except the winetricks part should be as following:

~$ winetricks msxml3 vcrun2008 usp10 comctl32 ie6

FYI, to my findings, usp10 is for the source editor to work correctly (especially with unicode texts); comctl32 will corrects some win controls and the code hinting popup;and ie6 lets the tooltip display ASdoc help correctly.

(Proof of concept: Flash Builder running on default Ubuntu 10.4 desktop)

Start up

Very often, you will face this error box when starting FB.

Starting it from command line you will find this message:
Error occurred during initialization of VM
Could not reserve enough space for object heap

Don’t worry, try running the application again. You’ll finally have it started (usually after 2 - 3 attempts).

Passing above blocking error, another error message box will appear (all the time, just like with Flash CS5) but just close it and the initialization carry on. You will also notice a long delay before the Splash screen appear.

Code hinting popup issue

When you type, the code hinting popup may appear but doesn’t respond and you cannot input until the popup is closed. It is because Ubuntu’s windows manager is interfering. To resolve, for now, run the wine config (Application > Wine > Configure Wine OR enter this command in terminal: winecfg) > open tab Graphics > uncheck ‘Allow the window manager to control the windows’.

Now the source editor will work as expected. However, there is some downside: the option Allow the window manager to decorate the windows will not be effective anymore. Besides you will not be able to minimize Flash Builder to GNOME panel. It only minimizes to a small icon floating on the desktop. And there appear to be some glitches with text input focus.

Compile and debug

No extra Java Runtime is needed to compile with FB4. The FB4 has a bundled JRE & Flex SDK that will help you check compile-time errors and compile the project as you type.

For the test run, you can install Flash Player activeX debugger for IE6 in Wine to test the application. However, I have discovered a better way: running it directly on your Linux-native browser and still able to debug. How cool is that? Here’s how:

1. Open gedit and enter the following text:
      #!/bin/sh
      firefox -url "`wine winepath -u "$1"`"
   What this shell script does is to: open the native Firefox browser with the URL which has been converted from Windows path to Linux path by using ‘wine winepath’ command.
   If you prefer Chromium browser, use this command instead:
      chromium-browser "`wine winepath -u "$1"`"
2. Name the file as “lnx_browser” and save it to an easy access folder. (Here I choose /home/username/lnx_browser). Remember to allow it execute as program.
3. In FB, navigate to Window > Preferences > General > Web Browser.
4. Select “Use external web browser”
5. Click New, input new browser settings as following:
   Name: Linux Browser
   Location: /home/username/lnx_browser (Must be Linux path, do not use Z:\home…)
   Parameters: %URL%
6. OK and then select Linux Browser as your chosen external browser.

After setting up external browser, go ahead and run/debug your application. FB4 will show a warning message about not finding Flash Player. Just ignore and click yes. Your application will run on Firefox Linux!

For testing AIR applications, I just let FB4 use the Windows adl.exe debug loader (no native solution yet). It is fine to test functionality of simple windows. When it uses system tray or something complicated, you can write ANT task of shell script to run the app with native adl.

Isolate FB4 wineprefix

With said configurations and winetricks tweaking, it is very likely that they may affect other installed applications in Wine. I have come across one noticeable case: after setting up for FB4, Photoshop CS5 fails to start due to a conflict with the additional comctl32 library. So, my advice is to isolate FB in a separate wineprefix (default is .wine).

To create a  separate wineprefix use this command (assume you want it to be .winefb):

~$ env WINEPREFIX="/home/username/.winefb" winecfg

That command is actually to open wine config window, since wineprefix doesn’t exist, Wine will create a new one in that folder.

After that, prepend env WINEPREFIX="/home/username/.winefb" before every wine command, for example:

• Winetricks:
  ~$ env WINEPREFIX="/home/username/.winefb" winetricks msxml3 vcrun2008 usp10 comctl32 ie6
• Start wine config:
  ~$ env WINEPREFIX="/home/username/.winefb" winecfg
• Start up FB:
  ~$ env WINEPREFIX="/home/username/.winefb" wine "C:\Program Files\Adobe\Adobe Flash Builder 4\FlashBuilder.exe"

Summary

Here’s my summary in the style of Wine’s AppDB report for your reference:

What works:

Almost all functions

• Source view
• Design view
• Launching / debugging (with above tweaking)
• Export release builds
• New project/class wizard
• All panels: Package Explorer, Outline, Components, Problems, Console, ASDoc, Network monitor, Properties, Styles…

What does not work:

• Create new folder in New / Import Project wizard

What was not tested:

• Profiler
• Unit testing (but I guess it will work)
• Data/Services

[Vietnamese tag: sử dụng Flash Builder 4 trên Ubuntu, hướng dẫn cài đặt, khắc phục lỗi code hint, biên dịch và debug]

1. Open Flash CS* and press F1 to open it’s internal help panel. (Some of my friends do this even when they don’t have any fla to edit).
2. In FlashDevelop, place the caret on a Flash built-in class name and press F1. FD will open the default browser with Google search results within AS3 language reference’s site. (This requires you to open FlashDevelop anyway).
3. Bookmark this site: http://www.adobe.com/livedocs/flash/9.0/actionscriptlangrefv3/ (Flash Player 9 AS3 & Flash CS3 components) or this: http://help.adobe.com/en_US/AS3LCR/Flash_10.0/ (Flash Player 10 AS3 & Flash CS4 components) and open it with your favorite browser. Then you’ll need to browse through the classes list.
4. Download this offline FlashCS4 help document and open the index.html file locally with your favorite browser. You’ll also need to browse through the classes list.
   You can also bookmark this local document for quick access.

Now, if you’re using Google Chrome, let me propose another way not only help access the online document quickly but also allow to search for a specific term or class with lightning speed!

Setting up:

• Right-click on Google Chrome’s address bar and select Edit Search Engines…
  
• Click Add… to open custom search engine editor
• Input:
  - Name: ActionScript 3 Reference (or a name of your choice)
  - Keywork: as3 (or keyword of your choice; the shorter, the better)
  - URL: http://www.google.com/search?q=%s+site:http://www.adobe.com/livedocs/flash/9.0/actionscriptlangrefv3/
  OR: http://www.google.com/search?q=%s+site:http://help.adobe.com/en_US/AS3LCR/Flash_10.0/
  (I think you get the idea. This is custom search for specified site after “site:”)
  
• And then Save this new custom search engine.

To use:

• Press F6 or Ctrl-L to focus on the address bar
• Type ‘as3’ (or the short keyword you chose)
  
• Press Tab
• Type the term or class you want to look up
  
• Enter
• Your searched results appear instantly.
  

You may argue that this method is similar to FlashDevelop’s F1. Yes, it is. But consider these advantages:

• You don’t need to open FD (especially if you’re working on Linux)
• You search the term, not just slowly browsing for it.
• And you are searching with Google engine with lightning speed.
• Bookmarking the site only let you open it quickly and still browse through long list of classes. Besides, the provided search form in the site is way slower than Google’s.

The disadvantage is Google must index the whole site in order for you to search for the term/class effectively. I intended to propose Adobe’s latest Flash Platform documentation site at: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/ but the site is so new and not all the pages are indexed by Google yet. (You may switch to this site later when the indexing completes to access latest documentation.)

Updated 2010-09-20: You can just type the keyword, then space, then search term to search with specified custom engine. Your keyword should be unique.

[Vietnamese tag: Truy cập nhanh tài liệu tham khảo ActionScript với Google Chrome; tùy biến tìm chức năng tìm kiếm trong Google Chrome]

You can check out or download the source at Google Code site: http://code.google.com/p/as3-karaoke-player/. This library is licensed under Apache License 2.0.

Here's the sample player:

(The background photo is taken by me :P )

This library will render lyrics and music in synchronization so that viewer can sing a long. The core player was designed as simple as a screen to render karaoke only. Developers can implement their own graphical interface to control the engine and add other features.

The library was implemented with performance concerns and open standards kept in mind. The lyrics data file is adopted from W3C standard Timed Text. The player uses AS3Signals as communication mechanism among components.

Current features:

• Load and parse a Timed Text-based lyrics XML file (see specifications)
• Load and play progressive beat audio (MP3)
• Lyric texts are synchronized with audio
• Play, pause, stop, seek allowed
• Set global lyric styles (font, color, size) and few options

I have also created a sample player (demo above) based on the Lunar skin from RealEyes OSMF Media Player with these additional features:

• Set volume
• Turn lyrics (A.K.A captions) on/off
• Go to full screen

These are features that I plan to add (random order and no promises):

• AIR application for editing the lyric data file
• Song-specific lyric color styling
• Multiple text lines (more than 2, not decided how to show/animate them)
• Custom transition for text line instances
• Photo slide show for background
• Red5 application for recording from user's microphone
• Play video as background
• Play karaoke video (videos with music and running lyrics)
• Flex Component 
• AIR application for local recording
• ... (please suggest)

If you find any bugs or have any suggestion, feel free to post a new ticket to the issue tracker. I welcome anyone wants to join this project.

[Vietnamese tag: công bố thư viện nguồn mở đầu tiên của tôi as3-karaoke-player]

After a couple of days testing and examining, finally, I have managed to run Adobe Flash CS5 on my Ubuntu machine. As I say "run", I mean that I did not succeed installing the application but I had to copy the installed files from Windows. However, it is worth noting that this is the first Adobe Flash version that runs with workable quality since Macromedia Flash 8. The last 2 versions (CS3 & CS4) is known to be useless when trying to run with Wine.

No more wandering, let's me show you the how to first and then comments later.

1. Install Adobe Flash CS5 on Windows

I installed Adobe Flash CS5 on my Windows XP virtual machine (32-bit). You can get the trial version of Flash CS5 here. I suggest you install everything in the package in the default installation path.

2. Export Adobe registry branch

- Go to Start > Run… > input regedit > OK
- In Regitry Editor, navigate to HKEY_LOCAL_MACHINE/SOFTWARE
- Select Adobe  branch > File > Export… > save the file as adobe.reg > store it some where so you can access from Ubuntu later.

Now, let’s get back to Ubuntu. I’m using Ubuntu 10.04 Lucid.

3. Installing Wine 1.3

By the time of this post, the official repository of Ubuntu only update Wine to version 1.1.34. So you need to add the ppa repository from WineHQ to get the latest version. Open the terminal and enter these commands:

~$ sudo add-apt-repository ppa:ubuntu-wine/ppa
~$ sudo apt-get update
~$ sudo apt-get install wine1.3

By installing this version, you will also get winetricks installed. If you’re using other distro, go to this link to get your version of Wine.

4. Install subordinate Windows native libraries

It is recommended that you reset your wineprefix by deleting ~/.wine folder if you have testing something else before with wine. Then, use winetricks to install these libaries:

~$ winetricks vcrun2008 msxml3 atmlib gdiplus

The atmlib is kept in a large cab file so it is normal that you will experience a long progress downloading the 120MB cab file.

5. Replicate the installation in Ubuntu

Copy from Windows to Ubuntu :

• “C:\Program Files\Adobe\" to "$HOME/.wine/drive_c/Program Files/Adobe"
• “C:\Program Files\Common Files\Adobe" to “$HOME/.wine/drive_c/Program Files/Common Files/Adobe"
• “C:\Documents and Settings\All Users\Application Data\Adobe\CS5” to “$HOME/.wine/drive_c/users/Public/Application Data/Adobe/CS5”
  (this is required for Java Runtime Environment)

Import the registry branch for Adobe:

~$ wine regedit adobe.reg
(assuming the file adobe.reg has been placed at your home folder)

Then you’re done. Here you can run the application from command line:

~$ cd "$HOME/.wine/drive_c/Program Files/Adobe/Adobe Flash CS5"
~/.wine/drive_c/Program Files/Adobe/Adobe Flash CS5$ wine Flash.exe

During the initialization, you may come across this error message:

Just click Close and Flash CS5 will continue to start up.

For convenience, you can create a launcher to run Flash CS5 from your desktop:

6. Create desktop launcher

Right click on desktop and select Create Launcher
Enter the command as in the image:

You can find the logo of Flash CS5 in: …Adobe Flash CS5/Common/First Run/StartPage/resources/images/appicon_xl.png

7. How to: resolve “Error initializing Java Runtime Environment”

When starting Flash CS5, you may experience this error message:

There are a few reasons that I can identify up to now:

- The bundled JRE of CS5 is missing:

Make sure you copy the jre folder from:
C:\Documents and Settings\All Users\Application Data\Adobe\CS5
to:
$HOME/.wine/drive_c/users/Public/Application Data/Adobe/CS5

- Error reserving the memory for the Java Virtual Machine:

When you run Flash CS5 with command line, you may notice these error messages together with above message box:
Error occurred during initialization of VM
Could not reserve enough space for object heap

This is related to the –Xmx###m parameter in the JVM initial config.

To fix, open the jvm.ini file located at:
$HOME/.wine/drive_c/users/$USER/Local Settings/Application Data/Adobe/Flash CS5/en_US/Configuration/ActionScript 3.0/jvm.ini
(Assuming $USER is current user name)

Try editing the default line –Xmx128m NOT to a higher value BUT to a LOWER value.

When I set it to –Xmx64m, the problem is gone (my RAM is 2GB on a 32-bit Ubuntu)!

8. How to: Built applications cannot access online resources

(This solution is still in progress and can only resolve the issue partially)

When you build your application, the application will not be able to access online resources. This is because of the security sandbox which prevent local file access internet location. To solve, you can add trusted location to the Flash Player’s global settings.

There are 2 ways to do this:

1. Using the Global Security Settings panel to add your working folder. However, this requires you install IE6 and Flash Player to your wineprefix. (How to do this is long and out of this post’s scope)
2. Create new .cfg file at this location:
   $HOME/.wine/drive_c/users/$USER/Application Data/Macromedia/Flash Player/#Security/FlashPlayerTrust/
   If the folders are not there, create them manually.
   Each .cfg is a plain text document containing the path to your trusted folder. For e.g.: C:\

However, this just allow the application to access internet when testing in debug mode! There is still something wrong with the normal run.

Other comments:

Thanks to this how to for Photoshop CS5 in AppDB, I have come up with this procedure. However, you can use this procedure to run Photoshop CS5 as well. (I have tried)

Here’s my test report so far (deeper test update to come):

What works: most of the normal functionalities

• All the drawing tools including 3D transform
• All Panels: library, color, align, transform, AS editor…
• Time line, layers, tweens
• TLF text, Classic text
• Open, Save, Build, Test run

What does not work:

• If Java Runtime Environment fails to initialize, some components will not work
  - New TLF TextField
  - New AS editor (fall back to old one)
  - ActionScript will be ignored in the output application
  (See How to resolve “Error initializing Java Runtime Environment” above)
• In the workspace, the contents are sometime clipped or hidden. But when I try scrolling or zooming, the contents appear fully again. This looks like being caused by the rendering library. (UPDATE FIX: View > Preview Mode > select Fast) 
• The application can only start debug session once. If you attempt debug your application again, the application will notice that the debug socket is being used!

What was not tested:

• Build a AIR
• iPhone Packager
• Some other unpopular functions

I will post my report to AppDB when getting some more test results.

Adobe Media Encoder CS5

I also tried Adobe Media Encoder CS5. It ran but I could only open videos in some kind of format (3GP, MP4). Others (MPG, AVI…) failed to open. It seems like this program requires some default encoders available in Windows (which are not in Wine).

I will investigate further to improve the usability but this progress is very satisfactory to me. Now I can work with most projects without starting the virtual machine.

Update 2010-08-16: Added …/CS5/ to the folders need to copy, added 7. How to: resolve “Error initializing Java Runtime Environment” and 8. How to: Built applications cannot access online resources.

Update 2010-11-22: Flash CS5 stops at "building workspace" while initializing if Wine version is 1.3.7. I have no work around yet so if you want to run Flash CS5, please stay at Wine 1.3.6. (Photoshop CS5 may start normally)

Update 2010-12-02: The startup issue discussed above was fixed since Wine 1.3.8. Wine 1.3.8 was released at the end of Nov ‘10. You can now upgrade Wine to latest version to enjoy Flash CS5 on Linux. It is not likely that this issue will occur again in future version of Wine.

Update 2011-05-24:
- I have just found out that if you switch Preview Mode to Fast (menu View > Preview Mode > Fast or Ctrl-Shift-Alt-F), the authoring stage will render much faster and virtually no more clipping issue.
- I have tried to run Flash CS 5.5 and Photshop CS 5.1 trial on Ubuntu 11.04 using the same procedure. They both started as expected with the trial reminder window as well. However, during working session, an error popup keep appearing after a while. To tackle this, use the winetrick suggested by a commenter below (thanks Endur)
$ winetricks nocrashdialog

[Vietnamese tags: Hướng dẫn chạy Adobe Flash CS5 trên Ubuntu (với Wine) | Làm sao để chạy Flash CS5 trên Ubuntu]

To install, follow these steps:

1. Save my eclipse preference file (.epf) to your computer. (Don’t worry, this preference file only contains color settings for FDT, your own settings will not be affected)
2. In FDT/Eclipse go to File > Import… > expand General > select Preferences > click Next
3. At “From preference file” box, browse to the preference file > Check “Import all” > click Finished and there you go.

If you want to know how to make these preference files, read this tutorial.

Besides, the black background of the editor is set at global setting. Therefore, other editors (.txt, .xml, .java…) must also be changed to dark theme or they are very difficult to read.

Here are my additional preference file for:

ANT XML: download here

Java & WTP: download (this one is my quick adoption of this guy’s theme after removing redundant settings)

Bonus: SVN coloring scheme (download)

And last but not least, my dark color scheme for FlashDevelop 3.1+ (actually, my FDT scheme is based on this): instruction & download

Next time, I’ll compose some preference file to make FDT behave more like FlashDevelop and more convenient to use. (So that you and I don’t have to wade through all the settings again when installing a new copy of FDT)

The myths

The EnterFrame events reportedly generate 1500 – 1800 event objects per minutes. Imagine, in every instance of your component (for e.g. a text marquee), you add an EnterFrame handler to its own, that number of objects generated per minute will multiply. Keep in mind that, creating an object is one of the slow actions in ActionScript. So avoid creating too many event objects will theoretically improve application performance.

When discussing AS3Signals, I have mentioned an approach (raised by Robert Penner and AlecMcE) which uses a two-frame MovieClip which has some script attached to its frames. The MovieClip loops continuously between 2 frames. When the play head reach a frame, the script attached to it will call the handling function, imitating EnterFrame’s events. Some claims that: “The idea behind the approach is that a frame-loop is an internal Flash player structure. It sits underneath the AS3 functionality, and so it doesn’t produce ENTER_FRAME events”.

The experiments

To clear the myths about EnterFrame event performance and the 2-frame-loop approach, I have constructed an experiment of moving 5000 objects simultaneously using 4 different approaches:

1. A singleton frame-loop Manager. (View demo)

This singleton manager will extends a 2-frame movieclip. This movie clip is created before-hand in Flash CS. Attach the same enterFrameHandler to its 2 frames. The moving balls will attach their enterFrameHandler to this manager via Signals:

2. A singleton EnterFrame Manager. (View demo)

This manager will work the same as previous one except it extends a Shape (the most simple display object that can be created with ‘new‘ statement) and add an event listener to its own EnterFrame event.

3. Multiple frame-loop instances (View demo)

Every moving ball instance will attach its enterFrameHandler to the frames of a new TwoFrameMovie. i.e. there is one TwoFrameMovie for each moving ball.

4. Multiple EnterFrame instances (View demo)

Every moving ball will add an EnterFrame event listener to its own instance:

Results:

Running the demos a few time, I have come up with these average statistics (reported through the same Stats panel):

My computer: Intel Core 2 Duo 2.53Ghz, 2GB RAM, Win XP, Firefox 3.6, Flash Player 10.0 debugger.
Moving 5000 objects after 70 seconds. Compiled frame rate is 30.

1. Singleton frame-loop manager:
   - Average FPS: 23-24
   - Max Memory: ~ 20.900 MB
2. Singleton EnterFrame manager:
   - Average FPS: 24
   - Max Memory: ~ 20.900 MB
3. Multi-instances, frame-loop movie:
   - Average FPS: 18
   - Max Memory: ~ 24.300 MB
4. Multi-instances, EnterFrame event :
   - Average FPS: 13
   - Max Memory: ~ 24.000 MB

The source code of my demo is placed here.

What is learned from those numbers?

1. First, with a single event listener or frame-loop, there’s virtually no difference in performance and memory.
2. Multi instances of frame-loops or enterframe handlers will both significantly reduce our application performance.
3. The fact that frame rate of demo 3 higher than demo 4 can be considered a proof that frame-loop doesn’t generate objects (hence it’s performance is better).
4. Although faster, demo 3 consumes more memory due to the fact that it must create a 2-frame MovieClip for its every instance. (I haven’t tried to improved this anyway)
5. Creating many objects is really an ‘evil’ thing to application performance.

Conclusion

The Myth Buster way:

• Many event listeners (EnterFrame in particular) will reduce performance: Confirmed
• Frame-loop doesn’t create EnterFrame objects: Feasible

My way:

• It is strongly recommended that you should use an EnterFrameManager or TickManager (depending on how you call it) for every project needs EnterFrame events. The demo is using Signals to manage handlers. You can implement a non-Signals Manager with ease.
• It’s possible to conclude that frame-loop is more efficient than EnterFrame events. However, the fact that 2 singleton approaches don’t have significant difference in performance, you can safely use the traditional (singleton) event approach for the sake of simplicity.

[Vietnamese tag: giải mã những giả thuyết về vấn đề tối ưu tốc độ của sự kiện EnterFrame]

Visit www.Rubiks Cu.be, a new website dedicated to the puzzle cube. Try the online simulator, the solver, learn the easiest solution method and measure your solution times.

My role: Team leader, Flash developer

Tech notes:

• PureMVC framework
• GTween engine
• AddictingGames’ sponsor teaser

Although those 4 sets contain 994 glyphs, Vietnamese characters scatter in those sets and only take about one third of that number of glyphs. It is a waste to include other Latin characters that Vietnamese language never uses.

So I’ve done a quick experiment and come up with an optimal unicode range for Vietnamese characters (for [Embed] tags and compiled with Flex SDK):

However, Flash Player render composite unicodes very ugly (see demo). So the best advice is avoid using them. BTW, you cannot embed composite characters in Flash CS* even though you select all Latin* sets, weird!

Below is a simple demo which display full range of Vietnamese characters (you can also try entering or pasting some Vietnamese text):

The demo would take 23KB (18KB without composite) compared to 50KB of the same demo embedding 4 full sets of characters. And this is only 1 style of 1 font.

You can download the demo source code for usage reference here.

[Vietnamese tag: danh sách tối thiểu các ký tự unicode cho Tiếng Việt khi nhúng font động]

In Ubuntu, the default editor font in Eclipse is Monospace which is a sans-serif font. (Sans serif is a type of font without serif). To my observation, this font is much more legible than Courier New especially when the characters are small in size. Sadly, the font doesn't support many Unicode letters especially Vietnamese and extended Latin. Looking around in Ubuntu's default font sets, I've found WenQuanYi Micro Hei Mono. This sans serif monospace font contains a broad range of Unicode letters including Vietnamese and other East Asian languages. This is exactly what I'm looking for in terms of readibility and Unicode support.

To my studies, WenQuanYi Micro Hei is an open source derivative of Droid Sans Fallback and is powered by many Linux distros. As you may guess, Droid Sans is the font for the hottie mobile platform - Android. Windows users can download WQY Micro Hei font here (The file format is a true type collection .ttc).

Here's the screenshot of Courier New (top) and WQY Micro Hei Mono (bottom) both in size 11pt, 100% zoom:

According to Adobe’s Help, the root property is the top-most display object in the portion of the display list's tree structure represented by that SWF file. In other words, root is the document class of that SWF. (By saying document class, I mean the movie clip that is linked with document class in Flash CS or the target class which you compile with Flex SDK)

There are other cases mentioned in the document:

• Root of Stage is the Stage itself.
• Root of a loaded image (jpg, png, gif) whose content is a Bitmap is the Bitmap.
• If a DisplayObject is created by code and (for e.g. new Sprite()), its root is null until it is added to a container which has non-null root. (The container’s root will be passed to its child). The container is not necessary to be on stage.

Besides, I have made some experiments to come up with some more conclusions:

• If we add a new display object directly to Stage (by pass document class), its root will be the Stage.
• The root of document class is always itself even it is removed off stage (and then added again to stage) or even added to another display object which has a different root.

Below is my summary about root:

Download my experiment code here.

Conclusion

The root object is just an old revived property from ActionScript 2. But back then, since new movie clips must be instanciated from another existing movie clip, all _root properties will point to a single top-most display object, and hence _root reference is consistent.

In ActionScript 3, because of this inconsistence in object reference, I think we should AVOID using root and should use other approaches to get your intended reference.

[Vietnamese tags: Giải mã đối tượng root của DisplayObject, AS3]

The usage note sounds interesting but this is one of the least used classes in AS3. In fact there are some use cases of this class which prove it is extremely powerful and may help you save many lines of code. Some of those are:

• OrderedObject: an object whose properties order are strictly maintained.
• TraversableObject: an object which allow you to traverse through its declared properties by using for loop.

First let’s see how to use it.

The Proxy Class

The Proxy class is meant to be extended. In your own class definition, you must override some special methods of Proxy class which are responsible for some object operations in AS.

They are:

Override this when you want to set property, i.e MyObject.myProperty = “something”;

Override this when you want to get property, i.e trace(MyObject.myProperty);

Override these when you need to traverse through properties with for..in or for each..in

Override this when you call object’s method hasOwnProperty()

Override this when there’s a need to delete properties with delete operator.

Override this if you want to use descedant (..) operator with your object. Normally, the descendant operator only available in E4X objects. One example for this operation: you want to get MyObject..myProp which will recursively traverse through the object’s properties and the properties’ properties etc. and return an array of values whose name is myProp

Please note:

• Your Proxy-extended class will have no default behaviour for object operations. Flash Player will throw exceptions for any operations that are not defined by you in your custom class.
• Most of these operations only affect dynamic properties. For example: if you have a declared member “prop”, when you get obj.prop, your object will return the value of “prop” directly and the method getProperty() is not invoked.

Let’s take a look at some use cases to understand more about Proxy.

OrderedObject (source code)

As you may notice, when you iterate through an object with for loop, you don’t access its properties in the order you created them. For example:

This issue of order, most of the time, is acceptable. However, there are cases where the order of properties is very important. For example: a QueryString object which parse this string “a=1&b=2&c=3&d=4&e=5” and hold all the values in its dynamic properties. Unfortunately, when you iterate the properties list and return the string back, the output are not the same with input anymore. Imagine you use this class to work with SWFAddress, you will get 2 different URLs for the same page access (the browser will see http://yourdomain.com/?a=1&b=2&c=3&d=4&e=5 different from http://yourdomain.com/?c=3&d=4&a=1&e=5&b=2).

With OrderedObject and its extension QueryString, I can solve the above issue.

OrderedObject example:

QueryString example:

TraversableObject (source code)

Say, your project may have a few data objects (AKA value objects) which are used to transfer data among components. There a times you want to iterate through their properties list to quickly copy the values or something. However, it is impossible to use for..in and for each..in statement to iterate declared properties.

By extending TraversableObject (which is an implementation of Proxy), your object properties can now be iterated through with for loop.

Here’s how:

You can check out the demo FlashDevelop project here.

These are just some practical applications of Proxy class, I think there must be plenty of circumstances where this special class proves useful.

[Vietnamese tags: Sử dụng lớp Proxy của Flash: thay đổi cách truy xuất và các thao tác lên đối tượng trong ActionScript]

These slides are recommended to any Flasher who seeks for serious code optimization and extreme performance improvement.

Note: When entering the page, press Left or Right to navigate the slides.

Since the event that Flash is not supported by Apple’s latest “magical” gadget – the iPad, there came a lot of debates with Flash platform against others, from HTML5 (the biggest), to it’s poor performance on MAC/iPhone OS and even to user experiences in touch devices,…

This post of mine is to bookmark any interesting read related to or address those debates, especially, the so-called “The Great Flash vs HTML5 Debate of 2010”. I admit that I’m bias so maybe most of the links here are pro-Flash. Anyway, you can read the comments for counter-arguments but I’ve seen a lot of *bullshit* yell-outs against Flash with no proof or reasonable points at all.

I’ll update this post regularly whenever I come across any read-worthy articles (and sort them in chronological order).

• Kevin Lynch’s Open Access to Content and Applications – 2010-02-02
  “The Flash team will drive innovation over the coming years as they have over the past decade to enable experiences that aren't otherwise possible. With the ability to update the majority of Web clients in less than a year, Flash can make this innovation available to our customers much more quickly than HTML across a variety of browsers.”
  Follow up the post, Kevin has a comment reveal Flash team effort to prevent crash:
  “Before we release a new version of Flash Player we run more than 100,000 test cases and have built an automated system that has scanned over 1 million SWFs that we use for testing from across the web. Our QA lab has a very large variety of machines to represent the machines in real use on the web.”
• **** Grant Skinner’s thought on the future of Flash – 2010-02-03
  ”This skill set is applicable to so many things: WPF on Windows, Cocoa development on Mac / iPhone (ex. Core Animation), Silverlight, mobile development, and of course the emerging HTML 5 standard. Languages are easy to learn - mental models, process, and the experience gained from years of working with rich interactive are a whole lot harder.”
• ** Jeremy Allaire on TechCrunch’s The Future of Web Content – HTML5, Flash & Mobile Apps – 20010-02-05
  “…Likewise, and more important, whatever standards and models deliver the broadest reach will ultimately drive what is adopted by publishers, developers and ISVs.”
• Tinic Uro’s Core Animation – 2010-02-11 (Flash Player technical)
  “Flash Player 10.1 implements the Core Animation drawing model to fix [issue of sharing performance with HTML renderer], among others.”
• Mike Chamber’s Flash Player content, Mouse Events, and Touch input – 2010-02-22 – in response to Daniel Eran Dilger’s An Adobe Flash developer on why the iPad can’t use Flash
  “Hover events do work in Flash content on touch devices. Any issues with mouse input on a touch device are not specific to Flash, but affect all content, including HTML based content.”
• ** Matt Kenefick’s Strictly Democratic Tools Build Boredom and Disinterest – 2010-04-20
  “There are situations where Javascript is more suitable, there are situations where Flash is better, and there are also situations where Silverlight shines. *pun* To say that you're strictly an "X Developer," is just limiting your own abilities and forgoing your complete potential as a developer.”
• Mike Chamber’s On Adobe, Flash CS5 and iPhone Applications – 2010-04-20
  “Essentially, [Apple’s iPhone SDK 4.0 license – section 3.3.1 ] has the effect of restricting applications built with a number of technologies, including Unity, Titanium, MonoTouch, and Flash CS5. […]
  We will still be shipping the ability to target the iPhone and iPad in Flash CS5. However, we are not currently planning any additional investments in that feature.”
• *** Branden Hall’s Little Boxes in the Browsers… – 2010-04-21
  “Like it or not, the web, for many, many people, is just an entertainment medium. HTML still has ways to go to match the kind of entertainment you can build with Flash.”
• Serge Jespers’s Flash is as open as HTML 5 – 2010-04-22
  “[HTML5, CSS and JavaScript] are open, right? Well yeah. The specs are open meaning that everyone can download those specs and build an application around it to display that language. […] That sounds a lot like Flash! The specs for [FLV, SWF, AMF and RTMP] are all published and can be downloaded by anyone.”
• Steve Jobs’ Thoughts on Flash – 2010-04-29
  (Apple’s official explanation why Flash is not available on iDevices)
  “New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”
• Jesse Warden’s Steve Jobs on Flash: Correcting the Lies– 2010-04-29
  “Apple has posted Steve Jobs’ “Thoughts on Flash“. There are a lot of lies and half truths. No one will care. The article has enough valid points that people won’t check up on them.”
  Another post addressing Steve Jobs’ letter is: Steve McDonald’s Apple Steve Jobs Letter Rebuttal (2010-05-02).

[Updated 2010-05-09]

Here’s the idea:

• Capture the points drawn by pencil tool in an array.
• Filter a new points array from the original one by skipping points in the middle (to reduce turns & angles)
• Finally, use a simple point-to-point curve drawing algorithm. I use sample code from this article by gskinner.com

The result:

You can find the source of this demo here.

[Vietnamese tag: Làm mượt nét vẽ đơn giản với ActionScript]

1. Objects MUST extend EventDispatcher in order to be able to dispatch events. Implementing IEventDispatcher alone is impossible because the event target is read-only and you cannot change it from outside of EventDispatcher.
2. It’s difficult to manage events. There’s no way you can remove all event handlers attached to an event dispatcher at once. So in some cases, you don’t remove them properly and they start causing bugs. (BTW, using weak references is not reliable and not recommended.)
3. You cannot pass extra data to you listener unless you extends a new Event object
4. You cannot set up your interface in a way that it can enforce implementing classes to dispatch the required events.
5. On performance perspective, creating objects is one of the most evil things. That’s why any advanced programmers must know and practically use objects pool. However, we are still wasting a lot of resources creating event objects, especially repetitive events like mouse move or enter frame.
6. Read here for more critiques on AS3 events

So in order to address those issues, Robert Penner has adopted an alternative to AS3 events namely as3signals. (Follow the link for more info and get the library)
Here’s the briefing from as3signals wiki page:

Signals: Think Outside the Event.
Signals are light-weight, strongly-typed AS3 messaging tools.
Wire your application with better APIs and less boilerplate than AS3 Events.
Concept

• A Signal is essentially a mini-dispatcher specific to one event, with its own array of listeners.
• A Signal gives an event a concrete membership in a class.
• Listeners subscribe to real objects, not to string-based channels.
• Event string constants are no longer needed.
• Signals are inspired by C# events and signals/slots in Qt.

Let’s see how as3signals gains advantages over AS3 events:

1. Any object can dispatch events

Here’s how you create an event dispatching object with Signals:

Here’s how you add event listeners:

2. With signals, managing events is much less hassle

You can remove all event handlers with one convenient method:

You can retrieve number of listeners:

You can add a listener that will be removed automatically after just one event:

3. You can dispatch with any number of arguments to listener

You can define types for your arguments

Later on, when you dispatch events, as3signals can detect and notify argument error

When adding listeners, they are all so checked for argument types.

4. It’s possible that you enforce events in interface

To see an example, please follow this link http://snipt.org/wSm

5. It’s performance gain because no event object is created in Signals

But that’s not everything yet. The ultimate deal is to replace ENTER_FRAME event.
As we know that ENTER_FRAME event is the key to time-based animations and are widely used. Normally, ENTER_FRAME event can create 25 – 30 objects per second, that’s 1500-1800 objects per minute. But we are aware that that creating objects is evil. So some guys have tried to replace the ENTER_FRAME event with Signals. Read this blog for more info. (The site is currently down, so please use this cache from Google)

6. Signals only projects

Signals can wrap the native events of AS3 so that the whole project will use a consistent messaging system for communication between components. For example:

The author also claimed that he’s experimenting the bubble feature (the ability to forward events among objects in display list).

Conclusion

It is still under development and improvement but as3signals’ current feature set can satisfy most common project’s needs. Some guys even love it so much that they branch some frameworks to work purely with Signals, for example:

• PureMVC AS3 Multicore – as3signal branch
• RobotSignals – RobotLegs & as3signals combination
• SWFAddress as3signals version
• See more examples here

For now, I see no shortcomings of signals but I’m still skeptical that there might be some disadvantages compared to AS3 events because nothing is perfect. (Please help me pointing them out)
Anyway, it is worth trying as3signals in my upcoming projects to see if it really ‘shines’ in real applications.
(Credit: some of the sample code are revised from this Hello World example)
[Vietnamese tags: as3signals: cách tiếp cận mới cho sự kiện (event) trong AS3]

Generate div table elements with this table generator, a free online tool! It is also capable of generating and convert grid elements.

1. Check whether a dynamic property is set

Dynamic properties can be added to dynamic object at run-time. Consequently, there’s often a need to test whether they are set before using them.

Here’s how some developers do it:

The first test with Boolean is ok. But be careful when the input for color is black (0x000000) or the text is empty (“”). In that case, zeros and empty strings casted to Boolean equal false, and definitely the code will run incorrectly.

So, the best practice to check whether a dynamic property is set is to do as following:

2. Check whether an (E4X) XML node exists

Given an XML like this:

Since AS3, E4X has enabled a very neat way to select and get data from XML, something like:

However, because it is so compact, many developers don’t realize there are a lot of implicit type conversions beneath.

They often check for the existence of a node by writing:

Or check whether an element has data:

Of even check whether an element exists with conditional selection:

They often assume that these XPath selections will return null or undefined if the elements/nodes don’t exist.

In fact, these tests always return true because for any XPath query in E4X, they always return an XMLList object. Obviously, if the selected element doesn’t exist, the XMLList object doesn’t have any child. And if the element exists but have no child or text value, it will return empty string “” when casted to String.

So the best practice to check for XML element is to write as following:

For conditional selection, [0] notation is preferable because the condition may (by mistake) return more than one matched elements.

3. Get Boolean value from String:

Wrong:

Right:

Reference:

• Adobe Help – Type Conversion
• Adobe Help – Variables & default values
• Adobe Help – Traversing XML

[Vietnamese tag – Chuyển đổi kiểu dữ liệu trong AS3 và một số lỗi thường gặp]

This is my team’s case study to demonstrate our capability to build a MMORPG (Massively Multiplayer Online Role Playing Game). The site features 2.5D isometric scene and realtime multiplayer virtual world utilizing SmartFox server.

My role: key researcher, team leader

Tech notes:

• Flash Player 9 / Actionscript 3
• AS3IsoLib Isometric engine
• Red5 server (in first phase)
• SmartFox multiplayer server (Java backend)

This is an all-flash minisite for a key flying performer team from Air Show Buzz community. This site is to deliver videos, photos and other information related to the team in a centralized and convenient way. The site features PureMVC framework in the front-end flash site and PHP as backend services. The site was designed in a way that new contents and panels can be added/removed dynamically, and theme color can be changed via XML-based site config. (In fact, with the same swfs, it has been cloned into a few other minisites.)

My role: Technical leader

Tech notes:

• Flash 9 / Actionscript 3
• PureMVC framework
• Flash CS3 & Flex SDK workflow
• Clearspring sharing service
• Google Map API for Flash

This is a another key campaign site (2009) for Sony Ericsson to show off their latest mobile phones with smile capture technology (C510, C903). Apart from Flex and Cairngorm framework, this site features SOAP service communication and complicated back office management to handle a big photo gallery and users database. The site is also localized into over 30 languages.

My role: Flex technical leader; Flex developer

Tech notes:

• Flex 3 / Actionscript 3
• Cairngorm MVC micro-architecture framework
• Loaded CSS (dynamic font & styles)
• Custom effects
• XML-based localization
• SOAP services
• Large scale photo gallery (.NET backend)

Here are the list of application choices in Ubuntu which comes from my own experiences that I think necessary for any Flash developers to work comfortably in Linux world:

When I first moved to Ubuntu, I though I couldn’t do anything with it. But now I feel quite comfortable and “workable”. Though it still lacks some tools (like Live Writer which I’m using to post this blog) but thanks to its open environment, sooner or later, there’ll be good (and free) alternatives. (As I’m expecting ScribeFire to be sophisticated enough to replace Live Writer).

It’s high time we moved to Linux not only for the sake of free softwares but also because it has become mature enough.

Update: I have added some links to the softwares’ home page for easy reference. However, most of the Linux alternatives can be found in Ubuntu software center

HAPPY VIETNAMESE NEW YEAR 2010!
WELCOME THE YEAR OF THE TIGER!

The images are loaded from my FaceBook friends list.

You can find the source code of this app here.

Update 14-June-2010: Profile picture URLs were fetched once via FaceBook API tester and stored in an embedded XML. They may be outdated over time.

However, if you want to get the screen coordinates of a local point other than the object’s original position (for e.g. side of a plane, some random points on a surface of a sphere…), then you have to deal with Matrix3D transform.

Don’t worry, you don’t need to understand what Matrix3D is because I don’t either :). Let’s use what people have concluded here:

If local to global is:

child.transform.calculateMultiply(parent.world, child.transform);

then global to local is:

child.transform.calculateMultiply(Matrix3D.inverse(parent.world), child.transform);

There are 2 things to note with above conclusion:

• I have to invert method’s arguments (from what’s originally stated in the post) to get the correct conversion. I’m using PV3D 2.1
• I haven’t tried the global to local method, hence I don’t guarantee it works. The global to local transform works correctly.

So here’s how I convert any local positions to global:

If you want to convert the rotation as well, use Matrix3D.copy() to copy all transformation info from the child object. And then after calculateMultiply(), apply the matrix to your scene object with DisplayObject3D.copyTransform().

[Vietnamese Tag – Chuyển đổi tọa độ local sang global trong Papervision3D]

At first glance, the effect might look difficult to replicate. But then I realized that it may be even easier to implement from the traditional page flip effect which requires a lot of overly complicated math. Thanks to 3D engines and modifier libraries at my disposal, I’m hoping to be able to create a 3D paper and manipulate it into a page turning animation.

So if I want to bend or fold something in Flash 3D, the first thing came to my mind is using AS3DMod. However, when I look into it, the modifiers are so limited in terms of controlling interactions. For example, the Perlin modifier can makes the plane wavy like cloth or paper but there no way you can control it since Perlin noise is randomly generated. With Bend modifier, I can bend it only at one section. I can add more modifiers to bend at multiple sections but it is still too difficult to simulate the paper physically.

Here my attemp with AS3Dmod and Papervision3D (click to open the Flash demo):

So I decided to quit AS3DMod although I still thought that I might be missing something. (Somebody please prove I’m wrong with AS3DMod).

My only hope now is to access the vertices of the 3DPlane and control them with a physics simulator. Fortunately in the Flipper3Maker mentioned above, the paper is not bent from any direction; the bend lines are in parallel. So I’ve come up with the following demo:

I used a simple 2D chain simulator which I got from here (was AS2) and then apply the transform on the rows of vertices on the 3D plane. The achievement here is that I can interact with the “paper” although it doesn’t look like a page turning effect yet.

My next step is to find the right simulator for this page turning effect and I’m about to begin with Box2D.

You can find the source code of above demos here.

[Vietnamese Tag – Hiệu Ứng Lật Trang 3D – Cố Gắng Đầu Tiên]

This framework is aim to

• Set up a standard foundation for almost all Pyco Flash projects. I must say “almost” because some projects may not benefit from deploying PFF, especially ones that are too small and their file size is really a matter. (PFF and PureMVC take up to ~ 90 kB in the main swf).
• Reduce the time and hassle of setting up the same project’s frame and common components over again. And therefore, reduce the effort spending on the project.
• Drive team members to a new development approach which helps improve teamwork collaboration and source code’s maintainability

PFF features some of the latest techniques and approaches in the Flash universe:

• Flex SDK compilation:

• Deploy FlashCS 3/4 & Flex SDK workflow
• Using precompiled libraries SWC extensively to separate UI and logic and to accelerate project build time
• All SWFs are compiled using Flex SDK compiler
• Build and deployment can be automated using build script like FlexANT, ANT, batch…

• The framework core is based on PureMVC and Loadup utility
• An MVC-based page manager.

• The page manager supports external (loaded) and internal pages. Demo: Login form is an internal page (no waiting for loading). Researches' framework top page is a internal blank containing page
• Popups are supported (special pages which appear on top of other pages) Demo: Login form is a popup
• Custom transition for each page. Demo: Member page
• Page redirection. Demo: Redirection from Researches top page to Research Intro
• Linking page redirect users to an external URL. Demo: Forum
• Page accessibilty which requires authentication. Demo: Works (who wants to see this page may contact me for the password)

• Deep linking (AKA SWFAddress).

• The deeplinking module can be activated or omitted completely from project's build
• Page system has deep linking by default (if deep linkng is activated). Demo: All pages in the demo
• Especially, each page can implement its own sub-deeplink logic. This is an unprecedented feature which never be seen in other frameworks. Demo: Gallery page

• Multilingual support and dynamic fonts loading. A unique text style manager which centralized all fonts assets and styles. No character is embeded twice.
• A tracking manager which is designed to handle multiple tracking services at the same time. Trackers can be activated/deactivated completely from source code. Currently support Omniture, Webtrends and GoogleAnalytics. Future tracking services can be plugged in easily.
• Common utilities and controls: Scrollbar, Tooltip, StringUtil, Cookies, Random...
• Other modules and features to bundle in the framework: TBD

We are currently making the documents and API reference for it. Next step is to train every member of the team the usage of PFF.

Here’s the first:

“OpenZoom SDK

The open source OpenZoom SDK is a toolkit for the Adobe Flash Platform that enables you to easily build powerful applications, beautiful sites and stunning maps which use a zooming metaphor and high-resolution images. It is freely available under the MPL/GPL/LGPL trilicense.”

Main site: http://openzoom.org/
Code: http://openzoom.org/go/code
Document API: http://docs.openzoom.org/sdk
Author’s blog: http://gasi.ch/blog

Checkout this example. (Try: + – W A S D click wheel drag)
Interestingly, there is a Vietnamese showcase: http://www.albawater.com.vn/

There’s is one article mentioning about this at http://jira.red5.org/confluence/display/codecs/Data+Type+Mappings

However, for an unknown reason, the page is not accessible any more. I have to produce a test and observe the conversion of data as following:

From Flash to Red5 (valid to Red5 0.8 / 0.9)

Notes:

• Negative integer value is limited at –2147483648 even if the variable is declared as Number. If you try to send a value less than this number, it will be rounded up to –2147483648.
• If one of the params in the remote call is null or undefined, the handler will not be executed.

• Flex 3 / Actionscript 3
• Cairngorm MVC micro-architecture framework
• Loaded CSS (dynamic font & styles)
• Flex’ custom effect
• Flash + Flex combination
• XML-based localization