Reactjs là gì? Cơ bản về React.


React là một JavaScript framework để xây dựng UI của app.

Với tư tưởng của rất đơn giản:

  1. Mỗi thành phần của React là một hàm: Dễ dàng chia nhỏ dự án, làm unittest…
  2. Luồng dữ liệu một chiều: Đây là điều khác biệt so với Angular $watch hay Knockout observable. Khi cần thay đổi dữ liệu của một thành phần, phải sử dụng setState hoặc các setter tương đương. Cơ bản, không khuyến khích tư tưởng “tự động” phức tạp

Cơ chế re-render của React

Nhìn sơ qua React render() tương đương với jQuery(DOM).html(newHtml)

Đây là nhầm lẫn thường gặp của người mới bắt đầu. Thực sự khi re-render react có cơ chế để “merge” các element thay vì thay đổi toàn bộ HTML.

React đơn giản, nhưng hệ sinh thái của nó phong phú và phức tạp

  • FLUX: MVC like framework dành cho Reactjs
  • IDE support
  • Chrome Extension để debug trên Chrome
  • Visual Component-Link Builder: Dùng để kết nối các thành phần React để tạo thành Application
  • React kết hợp với Backbone
  • … etc …

Bắt đầu với Reactjs dành cho người đã có kinh nghiệm

  1. Cài đặt Chrome Extension
  2. Xem basic react tutorial
  3. Nắm các thuật ngữ cơ bản
    • ES5, ES6
    • JSX
  4. Xem một vài chủ đề nâng cao
    • Multi-Components
    • Visual Component-Link Builder
    • FLUX tutorial
    • Authentication/Authorization tutorial

Mã ví dụ

Có thể xem core example của React ở đây.

https://github.com/datgs/react-tutorial/blob/master/public/scripts/example.js

Một số

Featured Image -- 669

Our website got 95/100 Google page speed rate!


Reblog một cái xem nó thế nào.

Web Development Company in Vietnam

A high score at Google page speed A high score at Google page speed

We optimized our website http://www.hdwebsoft.com to have 95/100 Google page speed rate for desktop web and 90/100 for mobile version. That’s great!

This job needs so much of patient. The test link is here  https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.hdwebsoft.com&tab=desktop

In order to do that, we have to do a lot of works.

  1. Change to use CDN instead of local resource
  2. Minify all everything from JS, CSS, Images and HTML
  3. Using requirejs for JavaScript asynchronous. This is helpful to reduce the JavaScript render block.

This is very good for SEO with Google. Would you like to have the high page speed? Please visit us at http://www.hdwebsoft.com/#contact and we can help you to do that.

View original post

An active access token must be used to query information about the current user


Haizz. Đây là lần thứ 2 bị cái lỗi củ cải này. Lên Google thì thấy nhiều người bị nhưng không có tìm thấy cái nào bắt đúng bệnh của mình hết. Đành phải hì hục debug.

Ờ rế cà, lần thứ 2 phát hiện nguyên nhân lỗi. Để tránh lần thứ 3 lặp lại đành phải log nó vào đây.

Đơn giản là vì cái server apache sử dụng vhosts với alias. Thành thử domain chạy web là sub.main.com mà cái code Facebook nó cung cấp cứ detect thành main.com. Nên redirect_uri của của mình (http://sub.main.com/auth/facebook) không match với cái do “nó” tạo ra (http://main.com/auth/facebook).

Tóm lại có thể đổ lỗi cho cái thằng đã cài đặt server.

Viết câu tiếng anh cho bạn nào không biết Tiếng Việt mà search ra cái này😀

Resolved! The main cause my case is the apache vhosts setup with alias. So my domain is sub.main.com but the $_SERVER[‘HTTP_HOST’] is main.com only.

Sắp xếp dữ liệu Tiếng Việt với PHP


Các hàm của PHP hầu hết không hỗ trợ sắp xếp Tiếng Việt nói riêng và các ngôn ngữ loằng ngoằng nói chung. Hoặc nếu có hỗ trợ thì lại đụng chạm nhiều thứ như … hosting không có hỗ trợ…

Em cũng gặp tình huống như vậy nên em phải viết cái hàm sau sử dụng với PHP usort để sắp xếp với Tiếng Việt. Tất nhiên là chỉ sắp xếp trên code thôi chứ không sắp xếp phân trang với SQL đâu nha.

function e_sortcb($a, $b) {
$map = array(
‘Ă’ => ‘Az’,
‘Ằ’ => ‘Azz’,
‘Ắ’ => ‘Azzz’,
‘Ẳ’ => ‘Azzzz’,
‘Ẵ’ => ‘Azzzzz’,
‘Ặ’ => ‘Azzzzzz’,
‘Â’ => ‘Azzzzzzz’,
‘Ầ’ => ‘Azzzzzzz’,
‘Ấ’ => ‘Azzzzzzzz’,
‘Ẩ’ => ‘Azzzzzzzzz’,
‘Ẫ’ => ‘Azzzzzzzzzz’,
‘Ậ’ => ‘Azzzzzzzzzzz’,
‘ă’ => ‘az’,
‘ằ’ => ‘azz’,
‘ắ’ => ‘azzz’,
‘ẳ’ => ‘azzzz’,
‘ẵ’ => ‘azzzzz’,
‘ặ’ => ‘azzzzzz’,
‘â’ => ‘azzzzzzz’,
‘ầ’ => ‘azzzzzzzz’,
‘ấ’ => ‘azzzzzzzzz’,
‘ẩ’ => ‘azzzzzzzzzz’,
‘ẫ’ => ‘azzzzzzzzzzz’,
‘ậ’ => ‘azzzzzzzzzzzz’,
‘Đ’ => ‘Dz’,
‘đ’ => ‘dz’,
‘Ê’ => ‘Ez’,
‘Ề’ => ‘Ezz’,
‘Ế’ => ‘Ezzz’,
‘Ể’ => ‘Ezzzz’,
‘Ễ’ => ‘Ezzzzz’,
‘Ệ’ => ‘Ezzzzzz’,
‘ê’ => ‘ezzzzzzz’,
‘ề’ => ‘ezzzzzzzz’,
‘ê’ => ‘ezzzzzzzzz’,
‘ể’ => ‘ezzzzzzzzzz’,
‘ễ’ => ‘ezzzzzzzzzzz’,
‘ệ’ => ‘ezzzzzzzzzzzz’,
‘Ô’ => ‘Oz’,
‘Ồ’ => ‘Ozz’,
‘Ố’ => ‘Ozzz’,
‘Ổ’ => ‘Ozzzz’,
‘Ỗ’ => ‘Ozzzzz’,
‘Ộ’ => ‘Ozzzzzz’,
‘Ơ’ => ‘Ozzzzzzz’,
‘Ờ’ => ‘Ozzzzzzzz’,
‘Ớ’ => ‘Ozzzzzzzzz’,
‘Ở’ => ‘Ozzzzzzzzz’,
‘Ỡ’ => ‘Ozzzzzzzzzz’,
‘Ợ’ => ‘Ozzzzzzzzzzz’,
‘ô’ => ‘oz’,
‘ồ’ => ‘ozz’,
‘ố’ => ‘ozzz’,
‘ổ’ => ‘ozzzz’,
‘ỗ’ => ‘ozzzzz’,
‘ộ’ => ‘ozzzzzz’,
‘ơ’ => ‘ozzzzzzz’,
‘ờ’ => ‘ozzzzzzzz’,
‘ớ’ => ‘ozzzzzzzzz’,
‘ở’ => ‘ozzzzzzzzzz’,
‘ỡ’ => ‘ozzzzzzzzzzz’,
‘ợ’ => ‘ozzzzzzzzzzzz’,
‘Ư’ => ‘Uz’,
‘Ừ’ => ‘Uzz’,
‘Ứ’ => ‘Uzzz’,
‘Ử’ => ‘Uzzzz’,
‘Ữ’ => ‘Uzzzzz’,
‘Ự’ => ‘Uzzzzzz’,
‘ư’ => ‘uz’,
‘ừ’ => ‘uzz’,
‘ứ’ => ‘uzzz’,
‘ử’ => ‘uzzzz’,
‘ữ’ => ‘uzzzzz’,
‘ự’ => ‘uzzzzzz’,
);
$keys = array_keys($map);
$vals = array_values($map);
$a = str_replace($keys, $vals, $a);
$b = str_replace($keys, $vals, $b);
if ($a == $b) {
return 0;
}
return ($a < $b) ? -1 : 1;
}

Dùng hàm này với PHP usort, hoạt động khá tốt.

Tập phát âm với Google Translate


Yêu cầu:

1) Bạn cần có một trình duyệt đủ “hiện đại”. Tôi đang dùng Chrome 14.0. (Đủ hiện đại thì microphone mới kích hoạt được)
2) Microphone.
3) Vào trang http://translate.google.com
4) Bật chế độ dịch Anh-Việt

Chiến thôi:

Bạn để ý thấy vùng text để nhập tiếng anh có cái hình micro. Bạn click vào đó. Và nói một câu tiếng anh. Sau đó, câu nói của bạn sẽ được ghi vào vùng text.

Đây là một trong những cách tuyệt vời đề kiểm tra khả năng phát âm tiếng anh của bạn.

PM: Đố mít xì tơ Nưu nói đúng câu I love you😀

Một điểm rất hay của Yii Model


Hôm nay xem overview của Yii Framework, khám phá ra cách tổ chức validation rules của Yii rất là hay. Tôi hay sử dụng CakePHP và không thỏa mãn với cách thiết lập validation rules của nó:

CakePHP

Model::$validate = array(); # là một biến trong một class. Vì thế rất là bất tiện khi muốn có một validation rule tùy biến tham số được (ví dụ password pattern lấy ra từ configuration, hoặc database). Thông thường sẽ phải viết một hàm callback cho cái rule mới này.

Yii

public function rules() {

return array(

array(‘title, content, status’, ‘required’),
array(‘title’, ‘length’, ‘max’=>128),
array(‘status’, ‘in’, ‘range’=>array(1,2,3)), # range này có thể tùy biến được
array(‘tags’, ‘match’, ‘pattern’=>’/^[\w\s,]+$/’,
‘message’=>’Tags can only contain word characters.’),
array(‘tags’, ‘normalizeTags’),
array(‘title, status’, ‘safe’, ‘on’=>’search’),

);

}

Model::rules(); # trả về một mảng các validation rules. Vì vậy rất tiện lợi nếu như chúng ta cần tùy biến tham số từ database.

Một điểm có thể học tập được từ Yii validation rules là cách tổ chức theo nhóm. Bạn thử tưởng tượng bạn đang sử dụng CakePHP để làm điều này? Một table có khoảng 20 fields mà thực hiện validation theo chuẩn CakePHP thì quá oải.

 

Tại sao nên sử dụng kiểu ENUM khi thiết kế Database?


Trước đây khi thiết kế database tôi thường sử dụng kiểu INT để cho các trường dữ liệu. Ví dụ kiểu boolean là 0 = No, 1 = Yes. Sau đó khi code định nghĩa các constant tương ứng:

const YES = 1;
const NO = 0;

Hoặc

const STATUS_ACTIVE = 1;
const STATUS_PENDING =2;
const STATUS_APPROVED = 3;

Tuy nhiên kiểu thiết kế này rất bất lợi cho việc bảo trì hệ thống. Bởi vì khi đọc trực tiếp trên database, các giá trị 0,1,2,3… không có ý nghĩa. Buộc phải đọc code để hiểu các giá trị trên là gì. Điều này đã ngốn không ít thời gian của tôi.

Khi đã có kinh nghiệm hơn, tôi chuyển sang sử dụng kiểu ENUM lúc này Yes sẽ là ‘Yes’, No sẽ là ‘No’. Nhờ vậy, tôi chỉ cần đọc dữ liệu là hiểu được ý nghĩa của nó. Giảm đi một thao tác vô ích.