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ố

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.

Lập trình web tức là tìm và xài hay bạn đã đóng góp gì cho thế giới


Có vẻ như là mình cần cái gì, chỉ cần vô google, chịu khó lần mò các trang phía sau thể nào cũng tìm được hàng ngon. Ví dụ như em này:

http://davidwalsh.name/dw-content/jquery-chosen.php

Dự án vất vả code hết cái select box này đến autocomplete khác. Nhưng thực sự mình thấy em này đẹp lại ngon. Đủ xài mà không rườm rà. Mặc dù vẫn còn một số lỗi khi kết hợp với các UI khác của jQuery như Dialog chẳng hạn, nhưng ấn tượng bởi sự nuột nà, hợp lý nên vẫn chấm điểm 10.

Ngẫm lại lấy bọn “international” nó đóng góp cho cộng đồng nhiều quá thể. Mang lại cho lập trình viên khác sự sung sướng mà lại hoàn toàn miễn phí.

Xấu hổ thiệt. Nhưng tặc lưỡi chứ biết làm sao?!

Yahoo mail một lần trở lại


Lâu, lâu lắm rồi (chắc phải hơn một năm) hôm nay mới có dịp trở lại Yahoo mail. Wow, một sự thay đổi ngoài sức tưởng tượng. Yahoo Mail mặc dù về mặt tính năng thì vẫn y nguyên nhưng tốc độ đã cải thiện đáng kế. Nhớ ngày nào ì ạch duyệt Yahoo Mail, hôm nay chạy nhanh phe phé. Thật là tin đáng mừng cho những người đang sử dụng dịch vụ của Yahoo. Nhưng cái mình đã quyết định trung thành với Gmail mất rồi. Gặp bạn vui quá Yahoo ơi nhưng ta vẫn phải chào tạm biệt.

He he, để giữ khách hay sao ấy. Trước đây nghỉ dùng Yahoo Mail 4 tháng thôi là mail của em đã bị xóa sạch và phải khởi tạo lại dịch vụ từ đầu. Còn hôm nay sau một năm đằng đẵng, Mail của cái mình vẫn còn nguyên.

Ma thuật với jQuery Deferred


Những ai đã từng làm việc với jQuery đặc biệt là với các hiệu ứng Animation hoặc Ajax với tính năng callback. Chắc hẳn bạn cũng đã từng điên cái đầu với những hiệu ứng kết hợp phức tạp, nối tiếp nhau… Nó làm cho mã nguồn trở nên rối như tơ vò. Mức độ phức tạp ngày một tăng khi bạn phải callback nhiều tầng nhiều lớp.

Ví dụ đơn giản là bạn muốn thực hiện 3 ajax call kế tiếp nhau, sử dụng kết quả của nhau. Bạn làm thế nào

$.ajax({…

success : function(){

$.ajax({…

success: function(){

$.ajax({…

success : function(){}

}

}

}

});

Bức tranh tương tự với các hiệu ứng animation của  jQuery.

Rất nhiều dư thừa trong đó. Và đặc biệt là rất khó phát triển, thay đổi … theo chiều sâu tính bằng số lượng của các ajax call bạn cần giải quyết.

Nhưng jQuery đã nhận ra điều đó và giải quyết nó từ jQuery 1.5

Với $.Deffered, bạn không phải lo lắng về những điều đó nữa.

function callAjax1(){

$.ajax({..});

}

function callAjax2(){

$.ajax({..});

}

function callAjax3(){

$.ajax({..});

}

$.when(callAjax1).then(callAjax2).then(callAjax3)

Bạn cũng có thể tự tạo defered cho các hiệu ứng như:

function getData(){
return $.get(‘/foo/’);
}
function showDiv(){
var dfd = $.Deferred();
$(‘#foo’).fadeIn( 1000, dfd.resolve );
return dfd.promise();
}
$.when( getData(), showDiv() )
.then(function( ajaxResult ){
console.log(‘The animation + AJAX request are both done!’);           // ‘ajaxResult’ is the server’s response
});

Có lẽ không cần phải nói thêm về tính hữu ích của nó. Tất cả đều có thể xem ở website của jQuery.

Google+ sẽ thu hút khách hàng


Tôi là một fan của google. Dĩ nhiên, cách mà họ làm, những cái họ đã làm được, những giá trị họ đã cung cấp cho thế giới thật đáng nể phục.

Google+ ra đời, tất nhiên sẽ thu hút rất rất nhiều những người như tôi với tư duy Google đã in sâu lắng đậm. Tôi dùng Gmail, tuyệt. Tôi dùng Gdocs, tuyệt… Nếu tôi mở công ty tôi cũng sẽ dùng Google App Enterprise… Ứng dụng của google thực sự làm hài lòng bất cứ ai trong công việc. Bằng chứng là tôi đã gắn bó với Yahoo, đăng ký Gmail một cách lạ lẫm, nhưng tôi đã hoàn toàn bỏ Yahoo.

Google+ dựa trên một nền tảng công nghệ cực tốt của Google. Vì thế, không có lý gì mà không nhanh, mạnh mẽ.

Google+ đã có bài học Facebook đi trước, tính năng của họ sẽ ngang bằng và vượt trội.

Vì thế tôi tin rằng, G+ sẽ lôi kéo được nhiều khách hàng và chia sẻ thị trường mạng xã hội với Facebook. Nếu Facebook không có con đường phát triển đứng đắn, có thể họ sẽ không đứng vững trước Google+ thêm nữa.

OAuth là gì?


0. Mở đầu

Bài viết này dành cho những người chưa hiểu cơ bản về OAuth và Single Sign On.

OAuth là gì? Đó là câu hỏi không dễ đối với những người chưa từng làm việc với SSO (Single Sign On). Thực ra thì Single Sign On không liên quan gì mấy đến nội dung của OAuth. Tuy nhiên chúng hay đi liền với nhau. Vì vậy cũng phải có sự phân biệt cho khỏi nhầm lẫn.

  1. Single Sign On là việc bạn có thể đăng nhập vào một website (như google.com) và sử dụng đăng nhập đó trên các website khác.
    • Vì vậy SSO là một tiện ích
    • Thường được sử dụng trên các website liên quan mật thiết đến nhau
    • Tiện ích SSO có nhiều phương pháp để thực hiện, SAML là một trong các phương pháp đó
  2. OAuth là phương pháp chia sẻ tài nguyên giữa các ứng dụng mà không phải đưa ra “giấy thông hành” là username và password.
    • Do đó, OAuth là một phương pháp
    • Thường được sử dụng trên các website … chả liên quan gì nhau (thực ra là có liên quan đấy, nhưng về mặt bản chất chúng có thể hoạt động mà chẳng cần gì đến nhau, việc kết nối là để xin chút tài nguyên thôi).
Ngoài ra, bạn cũng phải phân biệt giữa hai từ Authorization và Authentication. Từ thứ 2 đơn giản là “đăng nhập” hay không, còn từ thứ nhất là “có quyền” hay không. Cần chú ý chúng khác nhau nhiều lắm, đôi khi bạn chẳng cần “đăng nhập” bạn cũng có thể “có quyền”. Ý của tôi ở đây là Authentication thường liên quan đến việc bạn phải “đăng nhập” vào hệ thống. Còn Authorization tức “có quyền” trên tài nguyên hệ thống hay không thì bạn phải yêu cầu chủ thể của tài nguyên cho phép bạn.
Nói vậy thì hơi lan man, bạn có thể bỏ qua đừng suy nghĩ gì về đoạn giải thích như đánh đố trên.
Xin được đi chi tiết hơn về OAuth, nội dung của nó thì không mới, các hãng lớn như Google, Aol, Yahoo… đều có các phương pháp Authorization của riêng mình. Nhưng nó khiến các bên thứ ba khó khăn khi tích hợp với họ. Vì vậy họ họp nhau lại để tạo ra chuẩn Open Authorization.
1. Bắt đầu với Authorization, cụ thể là OAuth bạn phải phân biệt được những bên liên quan như sau
  • Client: là ứng dụng (chú ý là một ứng dụng, có thể là ứng dụng Desktop, cũng có thể là website của bạn như http://www.hdwebsoft.com
    ), muốn có quyền sử dụng tài nguyên của Server
  • Server: là một ứng dụng khác,  chẳng hạn như google.com.
  • You: chính bạn, bạn có tài nguyên trên Server và bạn muốn cho Client quyền sử dụng nó
Tóm lại: OAuth là phương pháp để Client sử dụng được tài nguyên của You bên phía Server
2. Phân biệt hai loại OAuth
  • 2-legged OAuth: là kiểu Authorization trong đó vai trò của You và Client là như nhau. Tức là Client chính là You của Server. Đó là kịch bản Client-Server thông thường.
  • 3-legged OAuth: là kiểu Authorization trong đó You và Client là phân biệt. Client muốn You chia sẻ tài nguyên đã có bên phía Server.
3. Cách OAuth hoạt động
3.1. 2- legged OAuth
  1. Client đăng ký sử dụng dịch vụ với Server
  2. Server cho Client
    • CONSUMER_KEY
    • CONSUMER_SECRET_KEY
  3. Client sử dụng các keys trên để thực hiện Authorization
3.2. 3- legged OAuth
  1. Client đăng ký sử dụng dịch vụ với Server
  2. Server cho Client
    • CONSUMER_KEY
    • CONSUMER_SECRET_KEY
  3. You có tài nguyên ở Server
  4. You sử dụng dịch vụ ở Client, Client yêu cầu You cho phép khai thác tài nguyên của You ở Server
  5. Client yêu cầu Server gửi REQUEST_TOKEN cho You
  6. Client chuyển You đến Server Authentication
  7. You đăng nhập vào Server, Server hỏi You có muốn chia sẻ quyền khai thác dữ liệu cho Client hay không
  8. You đồng ý, Server chuyển You về Client kèm theo ACCESS_TOKEN
  9.  Client sử dụng ACCESS_TOKEN để thực hiện thao tác trên các tài nguyên của You thuộc Server
4. Chú ý khi cài đặt với PHP
  1. Các trang tích hợp OAuth phần lớn hỗ trợ thư viện để bạn có thể dễ dàng cấu hình OAuth
  2. Nếu trong tình huống xấu, bạn chính là người cung cấp dịch vụ và muốn cung cấp mã nguồn tích hợp OAuth với dịch vụ của bạn. Thì bạn phải code rùi. Tất nhiên đây là trường hợp chủ động
  3. Nếu bên cung cấp dịch vụ ỉm đi, không cho bạn cái gì sất. Bạn phải code phần client chẳng hạn. Bạn nên tìm hiểu các thư viện sẵn có để học hỏi. Như Zend_OAuth chẳng hạn.
5. Tài liệu

Mẹo mực với Eclipse PDT


Khi làm việc với Eclipse PDT, đôi khi bạn gặp phải những tình huống như:

1/ Mất chức năng AutoComplete?

Đơn giản là hãy xóa file .project đi và refresh lại. Lỗi này thường gặp khi bạn Create Project from SVN

2/ Khi làm việc với những đối tượng như CakePHP, giả sử với AuthComponent bạn muốn gọi trong Controller như sau: $this->Auth->something, nếu có AutoComplete cho cái something kia thì tốt hơn đúng không ạ.

Những lúc thế này mình phải khai báo biến Auth cho controller mình đang sử dụng:

/**
* @var AuthComponent
*
* @var Auth
*/
var $Auth;

3/ Với template thì sao, template thì ná ná giống functional based code. Do đó mẹo như sau:

Đưa file này https://github.com/markstory/story-scribbles/blob/master/eclipse/code-completion-in-views.php vào bất cứ thư mục nào (trừ thư mục gốc của project). Bạn sẽ có AutoComplete cho form.

4/ Về Code AutoComplete cho CakePHP em đã tham khảo ở đây:

http://mark-story.com/posts/view/code-completion-for-cakephp-in-eclipse

Sự khác nhau giữa assure, ensure và insure


assure vs ensure, assure vs insure, ensure vs insure

assure vs. ensure, assure vs. insure, ensure vs. insure

Chán công việc chuyển qua Tiếng Anh. Vừa phát hiện sự khác nhau giữa 3 động từ rất giống nhau là “đảm bảo, chắc chắn” này.

Ensure có thể được dùng trong nhiều ngữ cảnh khác nhau.

Assure thường được áp dụng cho người (đảm bảo với ai đó, cho ai đó).

Insure thường được dùng trong lĩnh vực tài chính.